/* ==========================================================
   HOME — estilos exclusivos da página inicial
   (usar junto com base.css)
   ========================================================== */

/* ========== HERO ========== */
.home-hero {
    /* Rectangle 9 do Figma: left 382px, width 1058px */
    --hero-gradient: linear-gradient(90deg,
        rgba(255, 255, 255, 0) 34.7%,
        rgba(255, 255, 255, 0.06) 48.6%,
        rgba(255, 255, 255, 0.2) 62.5%,
        rgba(255, 255, 255, 0.4) 76.4%,
        rgba(255, 255, 255, 0.7) 90.3%,
        rgba(255, 255, 255, 0.95) 100%);
}

.home-hero .page-hero-inner {
    min-height: 620px;
    grid-template-columns: minmax(0, 608px) minmax(0, 562px);
}

.home-hero .page-hero-eyebrow { margin-bottom: 28px; }
.home-hero h1 { margin-bottom: 24px; }

.home-hero .page-hero-lead {
    max-width: 460px;
    margin-bottom: 36px;
}

.home-hero-media {
    position: relative;
}

.home-hero .page-hero-image {
    height: 426px;
}

.home-hero-badge {
    position: absolute;
    left: -94px;
    bottom: 32px;
    width: 188px;
    height: 84px;
    background: var(--white);
    border: 0.8px solid #F3F4F6;
    border-radius: 14px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 31px;
}

.home-hero-badge strong {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 26px;
    color: var(--teal-soft);
}

.home-hero-badge span {
    font-size: 12px;
    line-height: 16px;
    color: var(--text);
}

/* ========== BLOCOS DE CONTEÚDO ========== */
.home-block {
    padding: 60px 0;
}

.home-block.light {
    background: var(--bg-light);
}

.home-about .section-split {
    grid-template-columns: minmax(0, 531fr) minmax(0, 701fr);
    gap: 48px;
}

.home-commitment .section-split {
    grid-template-columns: minmax(0, 701fr) minmax(0, 526fr);
    gap: 53px;
}

.home-women .section-split {
    grid-template-columns: minmax(0, 571px) minmax(0, 580px);
    gap: 56px;
}

.home-image {
    width: 100%;
    height: 404px;
    object-fit: cover;
    border-radius: 20px;
    background: #D4E4ED;
}

.home-women .home-image {
    height: 400px;
}

.home-women .text-stack p {
    font-family: 'Inter', sans-serif;
    line-height: 27px;
}

/* ========== BANNER ========== */
.home-banner {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    align-items: center;
    min-height: 329px;
    padding: 34px 0;
    /* Fundo azul liso, como no layout final (os pontos aparecem sobre ele) */
    background: #2C748C;
}

/* Vector do Figma (#D7E6E9): textura de pontos à direita, a partir da
   imagem exportada do Figma (663x329). Em 1440px começa em 777px, como
   no layout; em telas menores nunca começa antes de 700px (depois do
   texto) e em telas maiores fica encostada na borda direita. */
.home-banner::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: max(700px, calc(100% - 663px));
    right: 0;
    /* 1x: versão com pontos em cor cheia (sem clarear ao reduzir);
       2x: versão original com as bordas reforçadas */
    background:
        url('../imagens/home/banner-pontos-2x.png') left center / 663px 100% no-repeat,
        linear-gradient(90deg, transparent 660px, #D7E6E9 660px);
    background-image:
        image-set(
            url('../imagens/home/banner-pontos-1x.png') 1x,
            url('../imagens/home/banner-pontos-2x.png') 2x),
        linear-gradient(90deg, transparent 660px, #D7E6E9 660px);
    z-index: 1;
    pointer-events: none;
}

.home-banner .container {
    position: relative;
    z-index: 2;
    width: 100%;
}

.home-banner h2 {
    max-width: 632px;
    padding-left: 18px;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 40px;
    line-height: 48px;
    color: var(--white);
}

.home-banner h2 strong {
    display: block;
    font-weight: 700;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 1200px) {
    .home-hero-badge { left: -40px; }
}

@media (max-width: 968px) {
    .home-hero .page-hero-inner { grid-template-columns: 1fr; min-height: 0; }
    .home-hero-media { max-width: 562px; }
    .home-hero .page-hero-image { height: auto; aspect-ratio: 562 / 426; }
    .home-hero-badge { left: 16px; bottom: -28px; }

    .home-about .section-split,
    .home-commitment .section-split,
    .home-women .section-split {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .home-commitment .home-image { order: 2; }
    .home-image,
    .home-women .home-image { height: auto; aspect-ratio: 701 / 404; }

    .home-banner {
        background: linear-gradient(90deg, #2C748C 0%, rgba(44, 116, 140, 0.72) 100%), #D7E6E9;
    }
    .home-banner::after { display: none; }
    .home-banner h2 { font-size: 32px; line-height: 40px; padding-left: 0; }
}

/* Celular (layout mobile de 390px) */
@media (max-width: 767px) {
    /* Hero */
    .home-hero .page-hero-inner {
        padding: 24px 30px 21px;
        gap: 30px;
    }
    .home-hero .page-hero-inner > div:first-child { max-width: 288px; }
    .home-hero .page-hero-eyebrow {
        max-width: 224px;
        font-size: 16px;
        line-height: 24px;
    }
    .home-hero h1 { font-size: 56px; line-height: 64px; }
    .home-hero .page-hero-lead { font-size: 18px; line-height: 28px; }

    .home-hero-media { max-width: none; }
    /* A foto ocupa 310 dos 332px do bloco no layout */
    .home-hero .page-hero-image {
        width: 93.4%;
        aspect-ratio: 310 / 251.57;
        border-radius: 10.63px;
        box-shadow: 0 16.21px 32.42px -7.78px rgba(0, 0, 0, 0.25);
    }
    .home-hero-badge {
        left: 50%;
        bottom: 9px;
        transform: translateX(-50%);
        width: 172.9px;
        height: 77.25px;
        padding-left: 28.5px;
        border-width: 0.74px;
        border-radius: 12.88px;
        box-shadow: 0 18.39px 22.99px -4.6px rgba(0, 0, 0, 0.1), 0 7.36px 9.2px -5.52px rgba(0, 0, 0, 0.1);
    }
    .home-hero-badge strong { font-size: 22.07px; line-height: 29px; }
    .home-hero-badge span { font-size: 11.04px; line-height: 15px; }

    /* Somos a IMMUNO Vita */
    .home-about { padding: 40px 0; }
    .home-about .section-split { gap: 20px; }
    .home-about .home-image { aspect-ratio: 340.5 / 196.24; border-radius: 9.71px; }

    /* Compromisso */
    .home-commitment { padding: 30px 0; }
    .home-commitment .section-split { gap: 30px; }
    .home-commitment .home-image { aspect-ratio: 323.5 / 186.44; border-radius: 9.23px; }

    /* Imunidade e Saúde Feminina */
    .home-women { padding: 40px 0; }
    .home-women .section-split { gap: 30px; }
    .home-women .home-image { aspect-ratio: 330 / 235.86; border-radius: 11.58px; }

    /* Banner: degradê vertical (cores medidas no layout mobile) */
    .home-banner {
        min-height: 462px;
        background:
            linear-gradient(180deg,
                rgba(255, 255, 255, 0) 4%,
                rgba(255, 255, 255, 0.01) 11%,
                rgba(255, 255, 255, 0.05) 17%,
                rgba(255, 255, 255, 0.1) 24%,
                rgba(255, 255, 255, 0.17) 30%,
                rgba(255, 255, 255, 0.24) 37%,
                rgba(255, 255, 255, 0.32) 43%,
                rgba(255, 255, 255, 0.38) 50%,
                rgba(255, 255, 255, 0.41) 56%,
                rgba(255, 255, 255, 0.45) 63%,
                rgba(255, 255, 255, 0.48) 69%,
                rgba(255, 255, 255, 0.58) 76%,
                rgba(255, 255, 255, 0.69) 82%,
                rgba(255, 255, 255, 0.8) 89%,
                rgba(255, 255, 255, 0.92) 95%,
                rgba(255, 255, 255, 0.97) 100%),
            #2C748C;
    }
    .home-banner h2 {
        max-width: 309px;
        margin: 0 auto;
        padding-left: 10px;
        font-size: 32px;
        line-height: 48px;
    }
    .home-banner h2 strong { line-height: 40px; }
}