/* ============================================================
   fab-expandable.css — "FAB Expandable Content" (ISOLADO, .fab-expandable / .fex-*).
   Figma kPNQN...: 1920 1:1833 · 1440 1:3837 · 992 1:1991 · tablet 1:2448 · mobile 1:3179.
   Tokens da host. Desktop-first. Breakpoints: 768 (empilha) · 680 (mobile).

   2 col: ESQ tag+título+body · DIR accordion. 1 aberto por vez (1º default); nº do aberto ROXO.
   ============================================================ */
.fab-expandable {
    /*background: var(--bg-neutral-medium);*/ /* #e7ebee */
    /*display: flex;
    gap: 80px;
    align-items: flex-start;
    padding: 80px 40px;
    isolation: isolate;*/
}

/* ---------- coluna esquerda ---------- */
.fex-text {
    flex: 1 0 0;
    min-width: 0;
    max-width: 784px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.fex-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}

.fex-tag {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 4px 8px;
    background: var(--bg-primary-subtle); /* #ece8ff */
    font-family: var(--font-sans);
    font-weight: var(--fw-medium);
    font-size: 14px;
    line-height: 14px;
    letter-spacing: -0.14px;
    text-transform: uppercase;
    color: var(--title-primary-strong); /* #5318bf */
    white-space: nowrap;
}

.fex-title {
    margin: 0;
    font-family: var(--font-sans);
    font-weight: var(--fw-extralight);
    font-size: 56px;
    line-height: 56px;
    letter-spacing: 0;
    color: var(--title-default);
}

.fex-body {
    margin: 0;
    font-family: var(--font-sans);
    font-weight: var(--fw-light);
    font-size: 24px;
    line-height: 32px;
    color: var(--body-default);
}

/* ---------- coluna direita (accordion) ---------- */
.fex-list {
    flex: 1 0 0;
    min-width: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.fex-item {
    display: flex;
    flex-direction: column;
}

.fex-item__head {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
    font-family: var(--font-sans);
    font-weight: var(--fw-extralight);
}

.fex-item__num {
    flex: none;
    font-size: 40px;
    line-height: 40px;
    color: var(--title-default); /* fechado = preto */
    white-space: nowrap;
    transition: color var(--t-base) var(--ease);
}

.fex-item.is-open .fex-item__num {
    color: var(--title-primary-strong);
}
/* aberto = roxo */
.fex-item__title {
    flex: 1 0 0;
    min-width: 0;
    font-size: 40px;
    line-height: 40px;
    color: var(--title-default);
}
/* painel expansível (grid-rows 0fr→1fr = expand suave) */
.fex-item__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--t-base) var(--ease);
}

.fex-item.is-open .fex-item__panel {
    grid-template-rows: 1fr;
}

.fex-item__panel-inner {
    overflow: hidden;
    min-height: 0;
}

.fex-item__desc {
    padding-left: 52px;
    padding-top: 24px; /* gap título → descrição (some quando fechado) */
    display: flex;
    flex-direction: column;
    gap: 16px;
}

    .fex-item__desc,
    .fex-item__desc p {
        margin: 0;
        font-family: var(--font-sans);
        font-weight: var(--fw-light);
        font-size: 24px;
        line-height: 24px;
        color: var(--body-default);
    }

.fex-divider {
    width: 100%;
    height: 0;
    margin: 0;
    border: 0;
    border-top: 1px solid var(--title-neutral); /* #8B9EB3 = stroke exato do divider no Figma */
}

.fab-expandable .fex-item:not(.is-open) .fex__icon .fex-minus,
.fab-expandable .fex-item.is-open .fex__icon .fex-plus {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .fex-item__panel, .fex-item__num {
        transition: none;
    }
}

/* ============================================================ ≤768 — empilha ============ */
@media (max-width: 768px) {
    .fab-expandable {
        flex-direction: column;
        gap: 40px;
        padding: 40px 40px 80px;
    }

    .fex-text {
        max-width: none;
        width: 100%;
    }

    .fex-list {
        width: 100%;
    }

    .fex-title {
        font-size: 48px;
        line-height: 48px;
    }

    .fex-body {
        font-size: 18px;
        line-height: 24px;
    }

    .fex-item__num {
        font-size: 32px;
    }

    .fex-item__title {
        font-size: 32px;
    }

    .fex-item__desc,
    .fex-item__desc p {
        font-size: 16px;
    }
}

/* ============================================================ ≤680 — mobile ============ */
@media (max-width: 680px) {
    .fab-expandable {
        padding: 40px 20px 80px;
    }

    .fex-title {
        font-size: 40px;
        line-height: 40px;
    }

    .fex-body {
        font-size: 16px;
        line-height: 24px;
    }

    .fex-item__title {
        font-size: 24px;
        line-height: 32px;
    }

    .fex-item__desc,
    .fex-item__desc p {
        font-size: 14px;
        line-height: 16px;
    }
}