/* ============================================================
   collapsible-numbers.css — estilos ISOLADOS (namespace .collapsible-numbers / .cn-*).
   Figma 3.Delivery: desktop 5623:10159 · tablet 5727:19265 · mobile 5727:15552.
   Tokens da host. Reusa: .tp-btn e o par glyph+sombra dos números (assets/images).

   Sanfona: item ativo mostra barra de progresso (auto-avança, JS) + número roxo + conteúdo.
   Layout — ≥1440: conteúdo AO LADO do número · 992–1439: conteúdo ABAIXO (3 em linha) ·
   <992: empilha vertical. Número: grande (≥992) / metade (<992).
   ============================================================ */
.collapsible-numbers {
    /*background: var(--bg-default);*/
    /*padding: 80px 40px;*/
    display: flex;
    flex-direction: column;
    gap: 80px;
    overflow-x: clip; /* contém o overflow transitório da animação de largura
                                          (não cria scroll-container; permite o bleed vertical das sombras) */
}

    .collapsible-numbers > .tp-btn {
        align-self: flex-start; /* não esticar full-width no flex column */
    }

/* ---------- cabeçalho ---------- */
    .collapsible-numbers .colnum__head {
        max-width: 784px;
        display: flex;
        flex-direction: column;
        gap: 24px; /* heading-block → subtítulo */
    }

    .collapsible-numbers .colnum__bar {
        position: relative;
        display: block;
        width: 200px;
        height: 17px; /* altura do bar no fluxo (a sombra do SVG sangra abaixo) */
        margin-bottom: 24px; /* bar → título (gap 48 no frame = 24 + 24 do head) */
        /*opacity: 0;*/ /* revelada pelo JS no scroll (handoff com a seção acima) */
        /*transform-origin: 0 50%;*/ /* draw-in a partir da esquerda */
        /*will-change: transform, opacity;*/
    }

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

    /*.collapsible-numbers .colnum__title {
        margin: 0;
        width: fit-content;
        max-width: 100%;
        font-family: var(--font-sans);
        font-weight: var(--fw-extralight);*/ /* 275 */
        /*font-size: var(--fs-64);
        line-height: var(--lh-64);
        letter-spacing: var(--letter-spacing);*/
        /* gradiente escuro→lavanda→escuro (mesma receita do client-stories) */
        /*background: linear-gradient(to left, var(--grey-950) 0%, var(--lavender-500) 48.558%, var(--grey-950) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }*/

    /*.collapsible-numbers .colnum__sub {
        margin: 0;
        font-family: var(--font-sans);
        font-weight: var(--fw-light);*/ /* 300 */
        /*font-size: var(--fs-24);
        line-height: var(--lh-32);
        letter-spacing: var(--letter-spacing);
        color: var(--body-default);
    }*/

/* ---------- linha de itens ---------- */
    .collapsible-numbers .colnum__items {
        display: flex;
        align-items: flex-start;
        gap: 56px;
    }

    .collapsible-numbers .cn-item {
        flex-grow: 0;
        flex-shrink: 1; /* permite encolher durante a transição (sem overflow) */
        flex-basis: 232px; /* colapsado */
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 40px; /* barra → corpo */
        /* acordeão: a largura anima (item expande/colapsa deslizando) */
        transition: flex-grow 0.42s var(--ease), flex-basis 0.42s var(--ease);
    }

        .collapsible-numbers .cn-item.is-active {
            flex-grow: 1; /* expandido cresce (largura desliza) */
            flex-basis: 0;
        }

/* barra de progresso (topo do item) */
    .collapsible-numbers .cn-bar {
        position: relative;
        width: 100%;
        height: 2px;
        background: var(--border-neutral-subtle); /* trilho #ced6de (= divisória dos inativos) */
    }

    .collapsible-numbers .cn-bar__fill {
        position: absolute;
        left: 0;
        top: -1px;
        height: 4px;
        width: 0;
        background: var(--bg-primary-strong); /* #8051ff */
    }

/* corpo: número + conteúdo (AO LADO no ≥1440) */
    .collapsible-numbers .cn-item__body {
        display: flex;
        flex-direction: row;
        align-items: center; /* ≥1440: conteúdo centralizado verticalmente no número */
        gap: 24px;
        height: 284px; /* = altura do número → a altura não muda com o reflow do texto */
    }

/* ---------- número (glyph mascarado + sombra, reuso do KPI) ---------- */
    .collapsible-numbers .cn-num {
        --sd: 1; /* escala (1 = 284px de altura) */
        position: relative;
        flex: none;
        display: block;
        padding: 0;
        border: 0;
        background: none;
        cursor: pointer;
        width: calc(var(--gw) * var(--sd) * 1px);
        height: calc(var(--gh) * var(--sd) * 1px);
    }

    .collapsible-numbers .cn-num__glyph {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
        -webkit-mask: var(--glyph) no-repeat 0 0 / 100% 100%;
        mask: var(--glyph) no-repeat 0 0 / 100% 100%;
        background-color: #fdfdfd; /* fantasma (branco) */
        transition: background-color var(--t-base) var(--ease);
    }

    .collapsible-numbers .cn-item.is-active .cn-num__glyph {
        background-color: var(--lavender-500); /* ativo roxo #8051ff */
    }

    .collapsible-numbers .cn-num__shadow {
        position: absolute;
        z-index: 1;
        pointer-events: none;
        height: auto;
        max-width: none;
        --ss: var(--sd);
        width: calc(var(--vbw) * var(--ss) * 1px);
        left: calc(var(--gx) * var(--ss) * -1px);
        top: calc(var(--gy) * var(--ss) * -1px);
    }
/* métricas por número (glyph dentro do viewBox) — iguais às do KPI */
    .collapsible-numbers .cn-num--00 {
        --gx: 82;
        --gy: 38;
        --gw: 187;
        --gh: 284;
        --vbw: 535;
        --glyph: url(../../assets/bigNumbers/novo/00.svg);
    }

    .collapsible-numbers .cn-num--01 {
        --gx: 82;
        --gy: 38;
        --gw: 161;
        --gh: 284;
        --vbw: 535;
        --glyph: url(../../assets/bigNumbers/novo/01.svg);
    }

    .collapsible-numbers .cn-num--02 {
        --gx: 81;
        --gy: 38;
        --gw: 164;
        --gh: 286;
        --vbw: 536;
        --glyph: url(../../assets/bigNumbers/novo/02.svg);
    }

    .collapsible-numbers .cn-num--03 {
        --gx: 80;
        --gy: 37;
        --gw: 171;
        --gh: 284;
        --vbw: 532;
        --glyph: url(../../assets/bigNumbers/novo/03.svg);
    }

    .collapsible-numbers .cn-num--04 {
        --gx: 82;
        --gy: 38;
        --gw: 154;
        --gh: 284;
        --vbw: 535;
        --glyph: url(../../assets/bigNumbers/novo/04.svg);
    }

    .collapsible-numbers .cn-num--05 {
        /*REVER*/
        --gx: 85;
        --gy: 37;
        --gw: 167;
        --gh: 294;
        --vbw: 554;
        --glyph: url(../../assets/bigNumbers/novo/05.svg);
    }

    .collapsible-numbers .cn-num--06 {
        --gx: 82;
        --gy: 38;
        --gw: 172.8;
        --gh: 286;
        --vbw: 535;
        --glyph: url(../../assets/bigNumbers/novo/06.svg);
    }

    .collapsible-numbers .cn-num--07 {
        --gx: 82;
        --gy: 37;
        --gw: 167;
        --gh: 285;
        --vbw: 532;
        --glyph: url(../../assets/bigNumbers/novo/07.svg);
    }

    .collapsible-numbers .cn-num--08 {
        --gx: 86;
        --gy: 38;
        --gw: 172;
        --gh: 288;
        --vbw: 537;
        --glyph: url(../../assets/bigNumbers/novo/08.svg);
    }

    .collapsible-numbers .cn-num--09 {
        --gx: 82;
        --gy: 38;
        --gw: 180;
        --gh: 290;
        --vbw: 546;
        --glyph: url(../../assets/bigNumbers/novo/09.svg);
    }

/* ---------- conteúdo do item ---------- */
    .collapsible-numbers .cn-item__content {
        position: relative;
        z-index: 2; /* acima da sombra que sangra */
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .collapsible-numbers .cn-item:not(.is-active) .cn-item__content {
        display: none; /* colapsado: só o número */
    }
/* conteúdo do item ativo entra deslizando (slide + fade) a cada troca */
    .collapsible-numbers .cn-item.is-active .cn-item__content {
        animation: cn-content-in 0.42s var(--ease) both;
    }

/*?????????? .colnum*/
@keyframes cn-content-in {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.collapsible-numbers .cn-item__ctitle {
    margin: 0;
    font-family: var(--font-sans);
    font-weight: var(--fw-extralight); /* 275 */
    /*font-size: var(--fs-64);*/
    /*line-height: var(--lh-64);*/
    /*color: var(--title-default);*/
}

.collapsible-numbers .cn-item__cbody {
    margin: 0;
    font-family: var(--font-sans);
    font-weight: var(--fw-extralight); /* 275 (Body/Extra Light) */
    /*font-size: var(--fs-24);*/
    /*line-height: var(--lh-32);*/
    /*color: var(--body-default);*/
}

/* ============================================================
   992–1439 — ainda 3 em linha, mas o conteúdo do ativo vai ABAIXO do número
   ============================================================ */
@media (max-width: 1439px) {
    .collapsible-numbers .cn-item {
        transition: none; /* sem animação de largura (evita a bolha de reflow do texto abaixo) */
    }

    .collapsible-numbers .cn-item__body {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        height: auto;
    }
}

/* ============================================================
   <992 — empilha vertical; número pela metade; título 56
   ============================================================ */
@media (max-width: 991px) {
    .collapsible-numbers .colnum__items {
        flex-direction: column;
        gap: 40px;
    }

    .collapsible-numbers .cn-item,
    .collapsible-numbers .cn-item.is-active {
        flex-grow: 0;
        flex-basis: auto; /* empilhado: largura fixa 100% (anima só o conteúdo) */
        width: 100%;
    }

    .collapsible-numbers .cn-num {
        --sd: 0.5;
    }

    /*.collapsible-numbers .colnum__title,*/
    .collapsible-numbers .cn-item__ctitle {
        /*font-size: var(--fs-56);*/
        /*line-height: var(--lh-56);*/
    }
}

/* ============================================================
   <768 (mobile) — gutter 20; título 40
   ============================================================ */
@media (max-width: 767px) {
    .collapsible-numbers {
        padding: 80px 20px;
    }

        /*.collapsible-numbers .colnum__title,*/
        .collapsible-numbers .cn-item__ctitle {
            /*font-size: var(--fs-40);*/
            /*line-height: var(--lh-40);*/
        }
}

/* sem animação sob reduced-motion (troca instantânea) */
@media (prefers-reduced-motion: reduce) {
    .collapsible-numbers .cn-item {
        transition: none;
    }

        .collapsible-numbers .cn-item.is-active .cn-item__content {
            animation: none;
        }

    .collapsible-numbers .colnum__bar {
        opacity: 1;
    }
}