.fab-connect {
    --e: 0; /* vídeo: 0 = repouso (inset 40) · 1 = full-bleed */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* segura o full-bleed do vídeo e o swirl */
}

    .fab-connect .fc-stage {
        position: relative;
        overflow: hidden;
        /* reserva a expansão do vídeo: o stage já nasce na altura MÁXIMA e o
       padding devolve o que o vídeo ainda não ocupou (80px no --e:1) */
        padding-bottom: calc(80px + (1 - var(--e, 0)) * (400px * 675 / 1424));
    }

    /* o bg VOLTA ao original — ele abraça um stage que agora não muda de tamanho */
    .fab-connect .fc-stage__bg {
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
    }

    .fab-connect .fc-swirl img {
        position: absolute;
        opacity: 0;
        transition: opacity 0.6s var(--ease);
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .fab-connect .fc-swirl.is-active img {
        opacity: 1;
    }

    .fab-connect .fc-accordion {
        position: relative;
        z-index: 1;
        max-width: var(--site-max);
        margin: 0 auto;
    }

    .fab-connect .fc-accordion__inner {
        position: relative;
        z-index: 1;
        padding: 80px 40px; /* cards em cima; swirl sobra embaixo (o vídeo sobrepõe) */
        display: flex;
        flex-direction: column;
        gap: var(--spacer-arrow);
    }

    .fab-connect .fc-cards {
        display: flex;
        gap: 23px;
        align-items: stretch;
    }

    .fab-connect .fc-card {
        position: relative;
        flex: 0 0 158px; /* fechado 158 (≤992 vira 80) */
        min-width: 0;
        height: 262px;
        padding: 24px;
        background: var(--bg-primary-subtle); /* #ece8ff */
        overflow: hidden;
        cursor: pointer;
        transition: flex-grow 0.5s var(--ease), flex-basis 0.5s var(--ease), opacity 0.4s var(--ease);
    }

        .fab-connect .fc-card.is-open {
            flex-grow: 1;
            flex-basis: 0;
            opacity: 1 !important;
            cursor: default;
        }

    .fab-connect .fc-card__num {
        margin: 0;
        font-family: var(--font-sans);
        font-weight: var(--fw-extralight); /* 275 */
        white-space: nowrap;
        background: linear-gradient(to bottom, var(--bg-primary-strong), var(--bg-secondary-strong));
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }

    .fab-connect .fc-card__body {
        position: absolute;
        left: 24px;
        right: 24px;
        bottom: 24px;
        display: flex;
        flex-direction: column;
        gap: 16px;
        opacity: 0; /* fechado: só o número aparece */
        transition: opacity 0.3s var(--ease);
        pointer-events: none;
    }

    .fab-connect .fc-card.is-open .fc-card__body {
        opacity: 1;
        transition: opacity 0.3s var(--ease) 0.5s; /* espera o card TERMINAR de expandir (0.5s) antes de começar a aparecer */
        pointer-events: auto;
    }

    .fab-connect .fc-card__text {
        margin: 0;
        font-family: var(--font-sans);
        font-weight: var(--fw-light); /* 300 */
        font-size: var(--fs-18);
        line-height: var(--lh-24);
        letter-spacing: var(--letter-spacing);
        color: var(--body-default); /* #3e4854 */
    }

    /* ---------- paginação (accordion): visual do tpc__arrow (biblioteca) ---------- */
    .fab-connect .fc-nav {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 50%;
        margin: 0 auto;
        gap: 10px;
        padding-inline: 20px;
    }


    /*.fab-connect .fc-nav [data-tpc-progress-visible] {
        display: none;*/ /* escondida por padrão — só aparece no breakpoint mobile, ou se
                       data-tpc-progress estiver ligado (ver .fc-nav--progress-always) */
    /*}*/

    /* ---------- variação: barra de progresso sempre visível ----------
       ⚠️ Esse módulo usa .fc-nav (não .tpc__nav) — o HTML não tem a classe genérica
       tpc__nav, só fc-nav. A classe fc-nav--progress-always é aplicada pelo JS no
       ANCESTRAL (.fc-accordion), não no próprio .fc-nav — por isso o seletor mira
       .fc-accordion.fc-nav--progress-always .fc-nav, não .fc-nav--progress-always
       sozinho (que seria auto-referência ambígua) nem .tpc__nav (que não existe aqui). */
    /*.fab-connect .fc-accordion.fc-nav--progress-always .fc-nav {
        gap: 24px;
    }*/

    .fab-connect .fc-nav--progress-always .tpc__progress {
        position: relative;
        display: block;
        flex: 1 1 0;
        min-width: 0;
        height: 4px;
    }

        .fab-connect .fc-nav--progress-always .tpc__progress::before {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            top: 50%;
            height: 1px;
            transform: translateY(-50%);
            background: var(--bg-neutral-strong);
        }

    .fab-connect .fc-nav--progress-always .tpc__progress-fill {
        position: absolute;
        left: 0;
        top: 0;
        height: 4px;
        background: var(--bg-primary-strong);
        transition: width 0.4s var(--ease);
    }

    .fab-connect .fc-video {
        position: relative;
        z-index: 2;
        max-width: var(--site-max);
        margin: 0 auto;
    }

    .fab-connect .fc-video__media {
        width: calc(100% - 400px * (1 - var(--e)));
        margin-inline: auto;
        aspect-ratio: 1424 / 675;
        overflow: hidden;
        will-change: width;
    }

        .fab-connect .fc-video__media img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

@media (min-width:1440px) {
    .fab-connect .fc-swirl img {
        width: 100%;
    }
}

@media (max-width: 1024px) {
    .fab-connect .fc-nav {
        width: 100%; /* mesma regra do carouseltpc.css nesse breakpoint */
    }

    .fab-connect .fc-nav--progress-always .tpc__progress {
        display: none;
    }
}

@media (max-width: 991.98px) {
    .fab-connect .fc-accordion__inner {
        padding: 56px 20px 140px;
    }

    .fab-connect .fc-swirl img {
        object-fit: cover;
    }

    .fab-connect .fc-video {
        margin-top: -100px;
    }

    .fab-connect .fc-card {
        flex-basis: 100%;
        height: auto;
        min-height: 180px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 32px;
        overflow: visible;
        transition: opacity 0.3s var(--ease);
        padding: 15px;
    }

        .fab-connect .fc-card:not(.is-open) {
            display: none;
        }

        .fab-connect .fc-card.is-open {
            flex-grow: 0;
            flex-basis: 100%;
        }

    .fab-connect .fc-card__body {
        position: static;
        opacity: 1;
        pointer-events: auto;
    }
}

@media (max-width: 1200px) {
    .fab-connect .fc-card {
        flex: 0 0 99px;
        height: 300px;
    }
}

@media (max-width: 767.98px) {
    /*.fab-connect .fc-nav {
        justify-content: flex-start;
        gap: 24px;
    }*/

    /*.fab-connect .fc-nav .tpc__arrow--prev {
            display: none;
        }*/

    .fab-connect .fc-nav [data-tpc-progress-visible] {
        display: block;
    }

    .fab-connect .fc-nav .tpc__arrow--next {
        background: var(--bg-default);
        color: var(--icon-brand-strong);
    }

    .fab-connect .fc-card {
        min-height: 320px;
    }

    .fab-connect .fc-swirl img {
        width: 100%;
        object-fit: cover;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fab-connect .fc-card,
    .fab-connect .fc-card__body,
    .fab-connect .fc-video__media,
    .fab-connect .fc-swirl img {
        transition: none;
    }
}