/* ============================================================
   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-tpSans-exLight);
        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-tpSans-light);
        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/0-glyph.svg);
    }

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

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

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

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

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

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

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

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

    .collapsible-numbers .cn-num--09 {
        /* --gx: 82;
        --gy: 38;
        --gw: 180;
        --gh: 290;
        --vbw: 546;*/
        --glyph: url(../../assets/bigNumbers/novo/9-glyph.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-tpSans-exLight);
    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-tpSans-exLight);
    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: 1200px) {
    .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;
    }
}

/* ============================================================
   about-sticky.css — "Sticky content" (ISOLADO, .about-sticky / .ast__*).
   Figma VRxYRQgtNch1TcMaMofWFF: 1920 293:13915 · 1440 293:13770 · 992 293:14065 ·
   tablet 293:14202 · mobile 293:14605. Tokens da host. Desktop-first (base fiel 1440).
   Breakpoints: 1024 · 768 · 680.

   NÚMEROS: sistema .asn-* (Figma "04 - Components Library Shadow" msQzsXCtdq3AbOx4eHdS0s,
   componente _shadowed-number 40000024:924). Cada char BRANCO = glyph SVG + sombra longa raster
   (aspect 1:1) que VAZA da caixa; unidade (%, B, M) = TEXTO escuro. Base do número = 220px de
   altura, escalada por --asn-h. Métricas (caixa/glyph/sombra) extraídas 1:1 do design context.
   ⚠️ BACKGROUND: #F4F6F8 (--bg-neutral-subtle) — os glyphs BRANCOS leem sobre ele (no branco puro
   sumiriam). ⚠️ O sticky depende de `align-items: flex-start` no container flex.
   ============================================================ */
.collapsible-numbers .about-sticky {
    background: var(--bg-neutral-subtle); /* #F4F6F8 — fundo do design dos números */
    padding: 80px 40px;
    display: flex;
    gap: 64px;
    align-items: flex-start; /* obrigatório p/ o sticky funcionar */
    overflow-x: clip; /* contém o vazamento horizontal das sombras SEM quebrar
                                            o sticky (clip não vira scroll container; hidden viraria) */
}

/* ---------- coluna esquerda (sticky) ---------- */
.collapsible-numbers .ast__text {
    flex: 1 0 0;
    min-width: 0;
    position: sticky;
    top: 136px; /* 96 do header sticky + 40 de respiro */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}

.collapsible-numbers .ast__bar {
    position: relative;
    display: block;
    width: 200px;
    height: 17px;
    transform-origin: 0 50%;
    transition: transform 900ms var(--ease);
    will-change: transform;
}

    .collapsible-numbers .ast__bar.bar-anim {
        transform: scaleX(0);
    }

        .collapsible-numbers .ast__bar.bar-anim.is-in {
            transform: scaleX(1);
        }

    .collapsible-numbers .ast__bar img {
        position: absolute;
        top: 0;
        left: -11px;
        display: block;
        width: 284px;
        height: 177px;
        max-width: none;
    }

.collapsible-numbers .ast__title {
    margin: 0;
    width: 100%;
    font-family: var(--font-tpSans-exLight);
    font-weight: var(--fw-extralight);
    font-size: 56px;
    line-height: 56px;
    letter-spacing: 0;
    color: var(--title-default);
}

.collapsible-numbers .ast__body p {
    margin: 0;
    font-family: var(--font-tpSans-light);
    font-weight: var(--fw-light);
    font-size: 24px;
    line-height: 32px;
    color: var(--body-default);
}

/* ---------- coluna direita (números) ---------- */
.collapsible-numbers .ast__list {
    flex: 1 0 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 80px;
}

.collapsible-numbers .ast__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    width: 100%;
}

/* ============================================================
   Sistema de números "shadowed" (.asn-*) — glyph branco + sombra longa raster + unidade texto.
   --asn-h = altura do número (220 base). --asn-k = px por "unidade" de métrica (220 → 1px).
   Vars por char (unitless), multiplicadas por --asn-k:
     --w caixa · --gw/--gh glyph · --glx/--gly nudge do glyph (centrado) · --shs sombra (quadrada)
     --shl/--sht canto sup-esq da sombra. Tudo extraído do design context 40000024:924.
   ============================================================ */
.collapsible-numbers .asn {
    --asn-h: 220px;
    --asn-k: calc(var(--asn-h) / 220); /* comprimento: 1px por unidade @220 */
    display: flex;
    align-items: center; /* dígitos/vírgula/ponto (caixa 220) centrados; ~ (44) e unidade alinham */
    gap: calc(40 * var(--asn-k)); /* 8px entre chars @220 */
    isolation: isolate; /* todas as sombras (z1) ficam sob todos os glyphs (z2) */
    max-width: 100%;
}

.collapsible-numbers .asn-ch {
    position: relative;
    flex: none;
    height: calc(220 * var(--asn-k));
    width: calc(var(--w) * var(--asn-k));
}

.collapsible-numbers .asn-gl { /* glyph branco — padrão: centrado (dígitos) */
    position: absolute;
    z-index: 2;
    display: block;
    max-width: none;
    width: calc(var(--gw) * var(--asn-k));
    height: calc(var(--gh) * var(--asn-k));
    left: 50%;
    top: 50%;
    transform: translate(calc(-50% + var(--glx, 0) * var(--asn-k)), calc(-50% + var(--gly, 0) * var(--asn-k)));
}

.collapsible-numbers .asn-sh { /* sombra longa raster (quadrada), vaza da caixa */
    position: absolute;
    z-index: 1;
    display: block;
    max-width: none;
    pointer-events: none;
    width: calc(var(--shs) * var(--asn-k));
    height: calc(var(--shs) * var(--asn-k));
    left: calc(var(--shl) * var(--asn-k));
    top: calc(var(--sht) * var(--asn-k));
}

/* dígitos 0-9 (caixa/glyph/sombra) */
.collapsible-numbers .asn-ch--0 {
    --w: 148;
    --gw: 133;
    --gh: 212;
    --glx: -2;
    --gly: -3;
    --shs: 390;
    --shl: -56;
    --sht: -26;
}

.collapsible-numbers .asn-ch--1 {
    --w: 128;
    --gw: 115.806;
    --gh: 206.831;
    --glx: -6;
    --gly: -6.5;
    --shs: 390;
    --shl: -59.25;
    --sht: -27.5;
}

.collapsible-numbers .asn-ch--2 {
    --w: 118;
    --gw: 118.746;
    --gh: 206.282;
    --glx: 0;
    --gly: -6.5;
    --shs: 390;
    --shl: -60.25;
    --sht: -27.5;
}

.collapsible-numbers .asn-ch--3 {
    --w: 121;
    --gw: 122;
    --gh: 210;
    --glx: -0.5;
    --gly: -5.5;
    --shs: 390;
    --shl: -62.25;
    --sht: -27.5;
}


.collapsible-numbers .asn-ch--4 {
    --w: 113;
    --gw: 112.324;
    --gh: 207.704;
    --glx: 0;
    --gly: -5;
    --shs: 390;
    --shl: -60.25;
    --sht: -24.5;
}

.collapsible-numbers .asn-ch--5 {
    --w: 116;
    --gw: 115.423;
    --gh: 207.606;
    --glx: -0.5;
    --gly: -6;
    --shs: 390;
    --shl: -61.25;
    --sht: -27.5;
}

.collapsible-numbers .asn-ch--6 {
    --w: 124;
    --gw: 123.944;
    --gh: 203.901;
    --glx: 0;
    --gly: -7;
    --shs: 390;
    --shl: -62.25;
    --sht: -28.5;
}

.collapsible-numbers .asn-ch--7 {
    --w: 122;
    --gw: 122.188;
    --gh: 207.606;
    --glx: 0;
    --gly: -6;
    --shs: 390;
    --shl: -60.25;
    --sht: -26.5;
}

.collapsible-numbers .asn-ch--8 {
    --w: 126;
    --gw: 125;
    --gh: 205.5;
    --glx: 0;
    --gly: -7.5;
    --shs: 390;
    --shl: -62.25;
    --sht: -29.5;
}

.collapsible-numbers .asn-ch--9 {
    --w: 124;
    --gw: 124.718;
    --gh: 205.282;
    --glx: -0.5;
    --gly: -6.5;
    --shs: 390;
    --shl: -61.25;
    --sht: -28.5;
}

/* ~ (til): caixa 96×44, glyph ocupa a largura e centra na vertical */
.collapsible-numbers .asn-ch--til {
    --w: 96;
    --gw: 96;
    --gh: 26.585;
    --shs: 319;
    --shl: -31.69;
    --sht: -77.85;
    height: calc(44 * var(--asn-k));
    margin-right: calc(16 * var(--asn-k)); /* +8 do gap = 24 até o 1º dígito (frame) */
}

    .collapsible-numbers .asn-ch--til .asn-gl {
        left: 0;
        top: 50%;
        transform: translateY(-50%);
    }

/* vírgula e ponto: glyph pequeno ancorado na BASE (baseline), centrado na horizontal */
.collapsible-numbers .asn-ch--comma {
    --w: 40;
    --gw: 35.833;
    --gh: 67.186;
    --shs: 321;
    --shl: -48.5;
    --sht: 85;
}

.collapsible-numbers .asn-ch--dot {
    --w: 24;
    --gw: 13.527;
    --gh: 13.527;
    --shs: 180;
    --shl: -22;
    --sht: 168;
}

    .collapsible-numbers .asn-ch--comma .asn-gl,
    .collapsible-numbers .asn-ch--dot .asn-gl {
        left: 50%;
        top: auto;
        bottom: 0;
        transform: translateX(-50%);
    }

/* unidade (%, B, M …): TEXTO escuro, sobrescrito no topo */
.collapsible-numbers .asn-unit {
    align-self: flex-start;
    margin-left: calc(16 * var(--asn-k)); /* +8 do gap = 24 (frame) */
    margin-top: calc(8 * var(--asn-k)); /* topo, ~alinhado ao cap dos dígitos */
    font-family: var(--font-tpSans-exLight);
    font-weight: var(--fw-extralight);
    font-size: calc(48 * var(--asn-k));
    line-height: 1;
    color: var(--title-default); /* #010101 */
}

@media (prefers-reduced-motion: reduce) {
    .collapsible-numbers .ast__bar {
        transition: none;
    }
}

/* ============================================================ ≤1024 — frame 992 ======== */
@media (max-width: 1024px) {
    .collapsible-numbers .asn {
        align-items: start;
    }

    .collapsible-numbers .cn-item__content {
        top: -8px;
    }

    .collapsible-numbers .about-sticky {
        gap: 40px;
    }

    .collapsible-numbers .asn {
        --asn-h: 176px;
    }

    .collapsible-numbers .ast__title {
        font-size: 48px;
        line-height: 48px;
    }

    .collapsible-numbers .ast__body p {
        font-size: 18px;
        line-height: 24px;
    }

    .collapsible-numbers .ast__desc {
        font-size: 32px;
        line-height: 36px;
    }

    .collapsible-numbers .ast__list {
        gap: 64px;
    }
}

/* ============================================================
   ≤768 — tablet/mobile: COLUNA ÚNICA e SEM sticky (pedido do usuário)
   ============================================================ */
@media (max-width: 768px) {
    .collapsible-numbers .about-sticky {
        flex-direction: column;
        gap: 40px;
        padding: 40px;
    }

    .collapsible-numbers .asn {
        --asn-h: 120px;
    }

    .collapsible-numbers .ast__text {
        position: static; /* sem sticky em tablet/mobile */
        top: auto;
        flex: none;
        width: 100%;
    }

    .collapsible-numbers .ast__list {
        flex: none;
        width: 100%;
        gap: 64px;
    }

    .collapsible-numbers .ast__title {
        font-size: 40px;
        line-height: 40px;
    }

    .collapsible-numbers .ast__item {
        gap: 24px;
    }

    .collapsible-numbers .ast__desc {
        font-size: 24px;
        line-height: 24px;
    }
}

/* ============================================================ ≤680 — mobile ============ */
@media (max-width: 680px) {
    .collapsible-numbers .about-sticky {
        padding: 40px 20px;
    }

    .collapsible-numbers .asn {
        --asn-h: 88px;
    }
    /* = frame mobile 40000536:29969 */
    .collapsible-numbers .ast__body p {
        font-size: 16px;
        line-height: 24px;
    }
}

/* trava anti-salto: enquanto a largura do item anima, o reflow do texto não pode
   mudar a altura — o corpo fica com a ALTURA DO NÚMERO (mesma fórmula do .asn-ch).
   Só ≥1440: abaixo disso a transition de largura já é none (sem bolha) e a 1100
   o conteúdo em repouso é mais alto que o número (a trava encolheria o bloco). */
@media (min-width: 1440px) {
    .collapsible-numbers .cn-item__body {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 24px;
        height: calc(220 * var(--asn-k));
    }
}