/*
 * Chamadas editoriais aprovadas em 25/10/2026.
 * Substituem apenas os dois botões vermelhos do hero e da área de importação.
 */
.hero-copy > a,
.import-banner .shell > a {
    --cta-accent: #d55268;
    position: relative;
    align-self: flex-start;
    width: max-content;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 11px;
    padding: 8px 0 10px;
    border: 0;
    border-radius: 0;
    color: #fff;
    background: transparent;
    box-shadow: none;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .7);
    transition: color .22s ease, transform .22s ease;
}

.hero-copy > a::before,
.import-banner .shell > a::before {
    content: "";
    width: 27px;
    height: 1px;
    flex: 0 0 27px;
    background: linear-gradient(90deg, #8f2437, var(--cta-accent));
    box-shadow: 0 0 7px rgba(206, 67, 89, .32);
    transition: width .22s ease, flex-basis .22s ease, box-shadow .22s ease;
}

.hero-copy > a::after,
.import-banner .shell > a::after {
    content: "";
    position: absolute;
    left: 38px;
    right: 43px;
    bottom: 3px;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, .36), rgba(255, 255, 255, 0));
    transition: left .22s ease, right .22s ease, opacity .22s ease;
}

.hero-copy > a b,
.import-banner .shell > a b {
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    display: grid;
    place-items: center;
    margin-left: 1px;
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: 50%;
    color: var(--cta-accent);
    background: rgba(255, 255, 255, .045);
    box-shadow: inset 0 1px rgba(255, 255, 255, .05);
    font-size: 15px;
    font-weight: 400;
    line-height: 1;
    transition: color .22s ease, border-color .22s ease, background .22s ease, transform .22s ease;
}

.hero-copy > a:hover,
.import-banner .shell > a:hover {
    color: #fff;
    transform: translateX(2px);
}

.hero-copy > a:hover::before,
.import-banner .shell > a:hover::before {
    width: 34px;
    flex-basis: 34px;
    box-shadow: 0 0 9px rgba(206, 67, 89, .45);
}

.hero-copy > a:hover::after,
.import-banner .shell > a:hover::after {
    left: 45px;
    right: 37px;
}

.hero-copy > a:hover b,
.import-banner .shell > a:hover b {
    color: #ee7184;
    border-color: rgba(213, 82, 104, .7);
    background: rgba(213, 82, 104, .08);
    transform: translateX(2px);
}

.hero-copy > a:focus-visible,
.import-banner .shell > a:focus-visible {
    outline: 2px solid rgba(213, 82, 104, .88);
    outline-offset: 6px;
}

@media (max-width: 720px) {
    .hero-copy > a,
    .import-banner .shell > a {
        gap: 9px;
        padding-block: 7px 9px;
        font-size: 13px;
    }

    .hero-copy > a::before,
    .import-banner .shell > a::before {
        width: 22px;
        flex-basis: 22px;
    }

    .hero-copy > a::after,
    .import-banner .shell > a::after {
        left: 31px;
        right: 40px;
    }

    .hero-copy > a b,
    .import-banner .shell > a b {
        width: 29px;
        height: 29px;
        flex-basis: 29px;
        font-size: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-copy > a,
    .import-banner .shell > a,
    .hero-copy > a::before,
    .import-banner .shell > a::before,
    .hero-copy > a::after,
    .import-banner .shell > a::after,
    .hero-copy > a b,
    .import-banner .shell > a b {
        transition: none;
    }
}