/* ============================================================
   fab-hero.css — "FAB Hero" (ISOLADO, namespace .fab-hero / .fab-hero__*).
   Figma kPNQN1yY5Eaxft1E7WS7CP: desktop 1920 1:1811 · 1440 1:3815 · 992 1:1969 ·
   tablet 1:2292 · mobile 2001:4370. Tokens da host. Desktop-first (base fiel 1440).
   Breakpoints: 1441 (1920) · 1024 · 768 · 680 (mobile empilha).

   MÍDIA (vídeo 800px) com logo + título gradiente + fade; CARD branco sobreposto (-160)
   com a barra lavanda (motion do collapsible-bar) e o parágrafo que escurece no scroll.
   ============================================================ */
.fab-hero {
    position: relative;
    /*background: var(--bg-default);*/
    display: flex;
    flex-direction: column;
    align-items: center;
}

    .fab-hero .fab-hero__media {
        /*position: relative;*/
        width: 100%;
        /*height: 800px;*/
        /*height: 92vh;*/
        overflow: clip;
        /*mix-blend-mode: darken;*/ /*afeta video escuro*/

        display: flex;
        justify-content: center;
        margin: 0 auto;
    }

    .fab-hero .positionTextHero {
        top: 40px;
        padding: 0 60px;
        max-width: 1920px;
        margin: 0 auto;
    }

    .fab-hero .fab-hero__media div.bg-black {
        background: var(--bg-black);
    }

    .fab-hero .positionTextHeroPos {
        width: 40%;
    }

        .fab-hero .positionTextHeroPos.positionTextHeroCenter {
            max-width: 1220px;
            width: auto;
        }

    .fab-hero .fab-hero__video {
        /*position: absolute;
        inset: 0;*/
        width: auto;
        height: calc(100vh - 96px);
        object-fit: cover;
        /*pointer-events: none;*/
        /*mix-blend-mode: lighten;*/
        /*transform: scale(1.03);*/
    }

    .fab-hero .mix-blend-mode-lighten {
        mix-blend-mode: lighten;
        transform: scale(1.03);
    }

    .fab-hero .fab-hero-logoImage {
        max-width: 200px;
        position: absolute;
        right: 24px;
        top: 35px;
    }

        .fab-hero .fab-hero-logoImage img {
            width: 100%;
            object-fit: contain;
        }

    .fab-hero .fab-hero__logo {
        max-width: 300px;
        height: auto;
        width: fit-content;
    }

    .fab-hero .fab-hero__logo--left {
        margin-left: 0;
        margin-right: auto;
    }

    .fab-hero .fab-hero__logo--center {
        margin-left: auto;
        margin-right: auto;
    }

    .fab-hero .fab-hero__logo--right {
        margin-left: auto;
        margin-right: 0;
    }

    .fab-hero .fab-hero__logo img {
        width: 100%;
        height: auto;
    }

    .fab-hero .fab-hero__title {
        /*position: absolute;
    left: var(--section-horizontal);
    top: var(--section-vertical);*/
        z-index: 2;
        margin: 0;
        /*max-width: 668px;*/
    }

    .fab-hero .fab-hero__logo + .fab-hero__title {
        padding-top: 34px;
    }

    .fab-hero .fab-hero__fade,
    .fab-hero__fade {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 103px;
        z-index: 1;
        pointer-events: none;
        background: linear-gradient(to top, var(--fade-color, var(--bg-default)) 0%, rgba(255, 255, 255, 0) 100%);
    }

    /* ---------- card branco sobreposto ---------- */
    .fab-hero .fab-hero__card-wrap {
        position: relative; /* renderiza acima da mídia (irmão posterior) */
        z-index: 3;
        width: 100%;
        max-width: var(--site-max);
        padding-inline: 320px; /* card = largura - 560 (880 @1440, 1360 @1920) */
        /*padding-inline: calc((var(--site-max) / 3) / 2);*/ /* card = largura - 560 (880 @1440, 1360 @1920) */
        margin-top: -15vh; /* sobrepõe a base da mídia */
    }

    .fab-hero .fab-hero__card {
        background: var(--fade-color);
        padding: var(--section-vertical); /* card 40 + text-block 40/48 do Figma */
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px; /* barra → texto */
    }

    /* barra lavanda — MESMO asset e motion do collapsible-bar (expande L→R ao entrar) */
    .fab-hero .fab-hero__bar {
        position: relative;
        display: block;
        width: 200px;
        height: 17px;
        transform-origin: 0 50%;
        transition: transform 900ms var(--ease);
        will-change: transform;
    }

        .fab-hero .fab-hero__bar.bar-anim {
            transform: scaleX(0);
        }

            .fab-hero .fab-hero__bar.bar-anim.is-in {
                transform: scaleX(1);
            }

        .fab-hero .fab-hero__bar img {
            position: absolute;
            top: 0;
            left: -11px; /* bar começa em x=11 no viewBox 284 → alinha à esquerda */
            display: block;
            width: 284px;
            height: 177px;
            max-width: none;
        }

    .fab-hero .CallToAction {
        padding-top: 24px;
    }

    /* texto que ESCURECE no scroll — mesmo mecanismo do intro da index (--reveal em JS) */
    .fab-hero .fab-hero__text {
        margin: 0;
        width: 100%;
        font-family: var(--font-sans);
        font-weight: var(--fw-extralight); /* 275 */
        --reveal: -25%; /* neutro (#acbacc) → preto conforme o scroll */
        background-image: linear-gradient(180deg, #010101 calc(var(--reveal) - 8%), #acbacc calc(var(--reveal) + 8%));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    .fab-hero .fab-hero__scroll {
        position: absolute;
        right: 40px;
        bottom: 110px;
        z-index: 9;
        display: inline-flex;
        align-items: center;
        gap: 16px;
        color: var(--title-inverse);
        text-decoration: none;
    }

    .fab-hero .fab-hero__scroll-icon {
        display: block;
        flex: none;
        width: 46px;
        height: 46px;
        animation: fabHeroScrollBob 2.4s var(--ease) infinite;
    }

        .fab-hero .fab-hero__scroll-icon svg {
            display: block;
            width: 100%;
            height: 100%;
        }

    .fab-hero .fab-hero__scroll-text {
        font-family: var(--font-sans);
        font-weight: var(--fw-light);
        white-space: nowrap;
    }

    .fab-hero .fab-hero__scroll--vertical {
        flex-direction: column-reverse;
        gap: 16px;
    }

        .fab-hero .fab-hero__scroll--vertical .fab-hero__scroll-text {
            writing-mode: vertical-rl;
            transform: rotate(180deg);
            white-space: nowrap;
        }

    .fab-hero .fabHero__layerImage {
        width: 100%;
        position: relative;
        inset: 0;
        height: calc(100vh - 96px);
    }

        .fab-hero .fabHero__layerImage img {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            object-fit: fill;
        }

@keyframes fabHeroScrollBob {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(6px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .fab-hero .fab-hero__bar {
        transition: none;
    }
    /* sem .bar-anim → barra cheia estática */

    .fab-hero .fab-hero__scroll-icon {
        animation: none;
    }
}

@media (min-width: 1441px) {
    .fab-hero .positionTextHero {
        /*max-width: 420px;*/
    }
}

@media (min-width: 1441px) {
    /* .fab-hero .fab-hero__title {
        max-width: 597px;
    }*/

    .fab-hero .fab-hero__card-wrap {
        /*margin-top: -64px;*/
    }
}

@media (min-width: 1920px) {
    .fab-hero {
        background-repeat: repeat-x;
        /*max-height: 500px*/
    }

        .fab-hero .fab-hero__media {
            /*max-width: 1920px;*/
            /*max-height: 500px*/
        }
}

@media (max-width: 1024px) {
    .fab-hero .fab-hero__media {
        /*height: 576px;*/
    }

    /*.fab-hero .fab-hero__title {
        max-width: 366px;
    }*/

    .fab-hero .fab-hero__card-wrap {
        padding-inline: 40px;
        /*margin-top: -80px;*/
    }

    .fab-hero .fab-hero__scroll {
        display: none;
    }
}

@media (max-width:991px) {
    .fab-hero {
        display: block;
    }

        .fab-hero .fab-hero-logoImage {
            position: relative;
            right: 0;
            top: 0;
            margin-left: auto;
            padding-block: 24px;
        }

        .fab-hero .positionTextHero {
            padding: 40px 24px 0;
        }

        .fab-hero .fab-hero__media {
            display: block;
        }

        .fab-hero .fab-hero__video {
            width: 100%;
            height: auto;
            object-fit: contain;
        }
}

@media (max-width: 768px) {

    /*.fab-hero .fab-hero__media {
        height: 640px;
    }*/

    /*.fab-hero .fab-hero__title {
        max-width: min(691px, calc(100% - 6px));*/
    /*top: 40px;*/
    /*}*/

    .fab-hero .fab-hero__card-wrap {
        padding-inline: 60px;
        /*margin-top: -80px;*/
    }

    .fab-hero .fab-hero__card {
        gap: 20px;
    }

    .fab-hero .fab-hero__text {
        /*font-size: 56px;
        line-height: 56px;*/
    }
}

@media (max-width: 680px) {
    /*.fab-hero .fab-hero__media {
        height: 500px;
    }*/

    /*.fab-hero .fab-hero__title {
        max-width: 283px;*/
    /*left: 20px;
        top: 104px;*/
    /*}*/

    .fab-hero .fab-hero__fade,
    .fab-hero__fade {
        height: 80px;
    }

    .fab-hero .fab-hero__card-wrap {
        padding-inline: 0;
        margin-top: 0;
    }

    .fab-hero .fab-hero__card {
        padding: 56px 20px;
    }

    .fab-hero .fab-hero__text {
        /*font-size: 40px;
        line-height: 40px;*/
    }
}