/* Home inspirada na referência de campanha de 10 anos. */
.reference-home {
    margin: 96px 0 0;
}

.reference-hero {
    --hero-background-image: url('/images/ImagemFundoHome.jpg');
    min-height: 605px;
    background-color: #61482f;
    background-image: linear-gradient(90deg, rgba(21, 15, 8, .64) 0%, rgba(21, 15, 8, .28) 48%, rgba(21, 15, 8, .06) 100%), var(--hero-background-image);
    background-position: center;
    background-size: cover;
}

.reference-hero-container {
    min-height: inherit;
}

.reference-hero-content {
    z-index: 1;
}

.reference-hero h1 {
    font-size: clamp(32px, 3.25vw, 50px);
    line-height: 1.17;
    letter-spacing: -1.5px;
}

.reference-protection {
    color: #c9fff0;
}

.reference-protection > i {
    font-size: 46px;
    line-height: 1;
}

.reference-protection p {
    font-size: 15px;
    line-height: 1.3;
}

.reference-protection a {
    color: inherit;
}

.reference-advance-copy {
    font-size: 15px;
    line-height: 1.3;
}

.reference-sales-card {
    top: 120px;
    right: 12px;
    width: 190px;
    border: 8px solid rgba(255, 255, 255, .75);
    background: rgba(255, 255, 255, .84);
    backdrop-filter: blur(5px);
}

.reference-card-icon {
    width: 25px;
    height: 25px;
    background: #c8f5e5;
    color: #24c98b;
    font-size: 11px;
}

.reference-sales-card small {
    font-size: 9px;
}

.reference-sales-card strong {
    font-size: 12px;
}

.reference-anniversary {
    min-height: 80px;
}

.reference-anniversary .container {
    position: relative;
}

.reference-ten-years-image {
    width: 120px;
    position: absolute;
    left: calc(var(--bs-gutter-x, 1.5rem) * .5);
    top: 50%;
    transform: translateY(-50%);
}

.reference-ten-years-image img {
    display: block;
    width: 100%;
    height: auto;
}

.reference-anniversary-copy {
    color: #17211d;
}

.reference-anniversary-copy strong { font-size: 18px; }
.reference-anniversary-copy span { font-size: 18px; }
.reference-anniversary-copy b { color: #00b86b; }

.home-media-logo {
    width: 300px;
}

.home-media-brand {
    min-height: 145px;
    transition: transform .2s ease, box-shadow .2s ease;
}

/* Blocos centrais (terra / iG) menores que O GLOBO e Valor. */
.home-media-brand.home-media-terra,
.home-media-brand.home-media-ig {
    min-height: 105px;
}

a:hover .home-media-brand,
a:focus-visible .home-media-brand {
    transform: translateY(-4px);
    box-shadow: 0 .75rem 1.5rem rgba(0, 0, 0, .12);
}

.home-media-globo {
    background: #0786bd;
    color: #fff;
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 700;
    letter-spacing: .04em;
}

.home-media-terra {
    background: #ff6b00;
    color: #fff;
}

.home-media-terra-symbol {
    width: 30px;
    height: 25px;
    margin-bottom: 3px;
    border-radius: 8px 4px 9px 5px;
    background: linear-gradient(135deg, #ffe600 0 33%, #ff4f9a 33% 66%, #59d870 66%);
    transform: rotate(-8deg);
}

.home-media-ig {
    background: #2f6bd8;
}

.home-media-ig-logo {
    max-height: 100px;
    width: auto;
    object-fit: contain;
}

.home-media-valor {
    background: #10989b;
    color: #fff;
    font-family: Georgia, serif;
}

.home-media-valor small {
    margin-left: 75px;
    font-size: 9px;
}

.home-media-valor span {
    font-size: clamp(38px, 5vw, 58px);
    line-height: .9;
}


.home-media-news-img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.home-media-news-thumb {
    width: 90px;
    height: 70px;
    object-fit: cover;
    flex-shrink: 0;
}

.home-rates-photo {
    width: min(100%, 390px);
}

.home-rates-photo img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center 35%;
}

.home-rates-brand {
    height: 30px;
    width: auto;
    object-fit: contain;
}


@media (max-width: 991.98px) {
    .reference-home {
        margin-top: 92px;
    }

    .reference-hero {
        --hero-background-image: url('/images/fundoHeroMobile.png');
        min-height: calc(100svh - 92px);
        background-position: center bottom;
        background-image:
            linear-gradient(180deg, rgba(21, 15, 8, .62) 0%, rgba(21, 15, 8, .32) 45%, rgba(21, 15, 8, .12) 100%),
            var(--hero-background-image);
        align-items: flex-start !important;
    }

    /* Mulher segurando o celular: camada separada, ancorada na base da hero,
       escala com a largura da tela (limitada para não estourar em telas maiores)
       e fica atrás do texto para nunca atrapalhar a leitura. */
    .reference-hero::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        margin-inline: auto;
        width: 100%;
        max-width: 440px;
        /* Escala pela largura, mas limita pela altura da tela (46svh) para não
           estourar em telas baixas; mantém a proporção original da imagem. */
        width: min(100%, 440px, 46svh);
        aspect-ratio: 390 / 844;
        /* Desce a imagem em relação à própria altura para o rosto ficar abaixo
           dos botões/textos; a parte inferior do corpo é cortada pela hero. */
        transform: translateY(12%);
        background: url('/images/mulherFelizSegurandoCelular.png') no-repeat center bottom;
        background-size: contain;
        z-index: 0;
        pointer-events: none;
    }

    .reference-hero-container {
        min-height: inherit;
        align-items: stretch;
    }

    .reference-hero-content {
        display: flex !important;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        text-align: center;
        padding-top: 2rem !important;
        padding-bottom: 1.5rem !important;
    }

    /* Centraliza o bloco (ícone + texto) do escudo/relógio no mobile */
    .reference-hero-content .reference-protection {
        justify-content: center;
    }

    .reference-anniversary {
        min-height: auto;
        flex-shrink: 0;
    }

    .reference-anniversary .container {
        padding-top: .75rem !important;
        padding-bottom: .75rem !important;
        position: static;
    }

    /* No mobile a imagem volta ao fluxo (ícone + texto centralizados juntos) para não sobrepor o texto */
    .reference-ten-years-image {
        position: static;
        transform: none;
    }

    /* Escudo (chargeback) e relógio (antecipação): ícone e título em verde, descrição em branco */
    .reference-protection {
        color: #fff;
    }

    .reference-protection > i {
        color: #24c98b;
        font-size: 40px;
    }

    .reference-protection strong,
    .reference-hero-highlight {
        color: #24c98b;
    }

    .reference-mobile-divider {
        width: 60%;
        max-width: 260px;
        height: 2px;
        margin: 1.25rem 0;
        border: 0;
        background-color: #24c98b;
        opacity: 1;
    }

    .home-media-brand {
        min-height: 125px;
    }
}

/* Telas mobile baixas (ex.: iPhone SE): desce mais a mulher para o rosto
   ficar abaixo dos botões, mostrando cabeça/tronco na base da hero. */
@media (max-width: 991.98px) and (max-height: 740px) {
    .reference-hero::after {
        transform: translateY(24%);
    }
}

@media (max-width: 575.98px) {
    .reference-hero h1 {
        font-size: 31px;
        letter-spacing: -1px;
    }

    .reference-protection p { font-size: 12px; }

    .reference-anniversary-copy strong { font-size: 12px; }

    .home-media-logo {
        width: 240px;
    }

    .home-media-brand {
        min-height: 105px;
    }

    .home-media-brand.home-media-terra,
    .home-media-brand.home-media-ig {
        min-height: 85px;
    }

    #home-security-cta-title {
        font-size: 2rem;
    }
}