/* ============================================================
capabilities.css — estilos ISOLADOS (namespace .capabilities / .cap*).
Figma 3.Delivery: desktop 5599:8530 · tablet 5727:19331 · mobile 5727:15998.
Tokens da host. Breakpoint PRÓPRIO 992 (desktop/accordion) + 1440 (card 400→520) + 768 (mobile).

DESKTOP (≥992): lista de linhas; o card do item ativo FLUTUA à direita, centrado
verticalmente; troca no hover (JS). ≤991: accordion — card do ativo em fluxo abaixo da linha.
============================================================ */
.capabilities2 {
    position: relative;
    /* âncora do card flutuante (desktop) */
    isolation: isolate;
    /*background: var(--bg-default);*/
    /*padding: 24px 40px 80px;*/
}

    .capabilities2 .capabilities__list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .capabilities2 .cap {
        position: relative; /* âncora do card por ITEM (desktop) → alinha ao progress da linha */
    }

    /* ---------- linha ---------- */
    .capabilities2 .cap__row {
        appearance: none;
        -webkit-appearance: none;
        background: none;
        border: 0;
        width: 100%;
        margin: 0;
        cursor: pointer;
        position: relative;
        /* âncora da barra de progresso */
        display: flex;
        align-items: center;
        gap: 24px;
        padding: 24px 0;
        text-align: left;
        /*color: var(--title-neutral);*/
        /* inativo #8b9eb3 */
        transition: color var(--t-base) var(--ease);
    }

    .capabilities2 .cap__num {
        flex: none;
        font-family: var(--font-sans);
        font-weight: var(--fw-extralight);
        /* 275 */
        /*font-size: var(--fs-40);*/
        /*line-height: var(--lh-40);*/
        /*color: inherit;*/
        white-space: nowrap;
    }

    .capabilities2 .cap__title {
        flex: 1 0 0;
        min-width: 0;
        font-family: var(--font-sans);
        font-weight: var(--fw-extralight);
        /*font-size: var(--fs-40);*/
        /*line-height: var(--lh-40);*/
        letter-spacing: var(--letter-spacing);
        /*color: inherit;*/
    }

    .capabilities2 .cap__progress {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 2px;
        background: var(--bg-neutral-medium);
        /* trilho #e7ebee (divisória sempre visível) */
    }

    .capabilities2 .cap__progress-fill {
        display: block;
        height: 100%;
        width: 0;
        background: var(--bg-primary-strong);
        /* preenchimento #8051ff */
        transition: width var(--t-base) var(--ease);
    }

    .capabilities2 .cap.is-active .cap__row {
        /*color: var(--title-primary-strong);*/
    }

    /* ativo #5318bf */
    .capabilities2 .cap.is-active .cap__progress-fill {
        width: 100%;
    }

    /* ---------- card ---------- */
    .capabilities2 .cap__card {
        position: absolute;
        right: 0; /* borda direita do item = gutter da section (antes era 40 no pai .capabilities) */
        z-index: 2; /* acima das linhas */
        width: 400px; /* @992–1439 */
        padding: 32px;
        background: var(--bg-primary-subtle); /* #ece8ff */
        border-radius: 4px;
        filter: drop-shadow(4px 4px 7.5px rgba(0, 0, 0, 0.1));
        display: flex;
        flex-direction: column;
        gap: 16px;
        opacity: 0;
        visibility: hidden; /* só o ativo aparece */
        transition: opacity var(--t-base) var(--ease);
    }

    .capabilities2 .cap.is-active .cap__card {
        opacity: 1;
        visibility: visible;
    }

    /* Ancoragem vertical ao PROGRESS do item (a barra fica em bottom:0 da linha, i.e. na base do <li>):
   itens 1–2 → card abre PARA BAIXO, topo colado ao progress (top:100% = base do <li>);
   itens 3–4 → card abre PARA CIMA, base colada no TOPO do progress (bottom = 2px = altura da barra),
   assim o card não cobre a linha (fica visível logo abaixo da base do card — simétrico ao caso p/ baixo).
   (No accordion ≤1299 o card é position:static → estas regras ficam inertes.) */
    .capabilities2 .cap:nth-child(-n + 2) .cap__card {
        top: 100%;
        bottom: auto;
    }

    .capabilities2 .cap:nth-child(n + 3) .cap__card {
        top: auto;
        bottom: 2px;
    }

    .capabilities2 .cap__card-num {
        margin: 0;
        font-family: var(--font-sans);
        font-weight: var(--fw-extralight); /* 275 */
        font-size: 96px;
        line-height: 96px;
        white-space: nowrap;
        color: var(--title-primary-strong);
    }

    .capabilities2 .cap__card-desc li {
        list-style: disc;
    }

    .capabilities2 .cap__card-desc,
    .capabilities2 .cap__card-desc p {
        margin: 0;
        font-family: var(--font-sans);
        font-weight: var(--fw-light);
    }

/* ≥1440 — card maior */
@media (min-width: 1440px) {
    .capabilities2 .cap__card {
        width: 520px;
    }
}

/* ============================================================
   ≤991 (tablet/mobile) — accordion: linha empilhada + card em fluxo abaixo do ativo
   ============================================================ */
@media (max-width: 1299px) {
    .capabilities2 .cap__row {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

    .capabilities2 .cap__num,
    .capabilities2 .cap__title {
        font-weight: var(--fw-light);
        /* 300 */
        /*font-size: var(--fs-24);*/
        /*line-height: var(--lh-32);*/
    }

    .capabilities2 .cap__card {
        position: static;
        transform: none;
        width: 100%;
        opacity: 1;
        visibility: visible;
        display: none;
        /* só o ativo entra no fluxo */
        /*margin-top: 24px;*/
    }

    .capabilities2 .cap.is-active .cap__card {
        display: flex;
        margin-top: 24px;
    }
}

/* ============================================================
   <768 (mobile) — gutter 20; nº do card 64; descrição 18/24
   ============================================================ */
@media (max-width: 767px) {
    .capabilities2 {
        padding: 24px 20px 80px;
    }

        .capabilities2 .cap__card-num {
            font-size: 64px;
            line-height: 64px;
            display: none;
        }

        .capabilities2 .cap__card-desc p {
            /*font-size: var(--fs-18);*/
            /*line-height: var(--lh-24);*/
        }
}