/* ═══════════════════════════════════════════════════════════════════════
   BOOOT · PANORAMA / ISCA PATTERNS · v2.0.0 · sistema OURO
   Camada de componentes de ISCA-RELATORIO (panorama de mercado · whitepaper ·
   Painel BOOOT publico). Consome os SEMANTICOS de _MARCA/tokens/tokens.css.
   Carregue DEPOIS de landing.css (reusa .wrap, .eyebrow, .sticker, .cta,
   .reveal, .founder, .site-header/.site-footer).

   REGRA-MAE DESTA CAMADA (repintura 16/ago · D-OURO-VALE-PRO-PORTAL-16AGO):
   documento denso se le por HIERARQUIA, nunca por cor.
   · TEXTO tem degraus: --texto (o que salta) · --texto-lead (o corpo) ·
     --texto-2 (rotulo, legenda) · --texto-3 (nota de rodape, eixo, ordinal).
     Zero opacity em texto: o degrau ja e a hierarquia.
   · CARTAO se distingue por ELEVACAO (--superficie · --superficie-2), nunca
     por alpha de creme.
   · GRAFICO: a metrica-heroi e --serie-1 (a UNICA ouro) · a serie de apoio e
     --serie-2 · a massa "de fora" de uma proporcao e --serie-3 (ela precisa
     EXISTIR na retina: sem o denominador visivel a proporcao nao comunica).
   · OURO e raro e tem 4 postos NESTE arquivo, e so estes:
       1. a barra-heroi do grafico             (.bar-chart .bc-col:last-child)
       2. os pontos "dentro" da proporcao      (.dots-grid .dot.on)
       3. o marco "agora" da timeline          (.tl-item--now::before)
       4. o algarismo do BOOOT nas previsoes   (.read--booot .r-n)
     ERAM 5. O traco de assinatura do hero (.doc-hero .edition::before) PERDEU o
     posto em 16/ago: ele e o mesmo componente que o `.eyebrow` do landing.css, que
     ja tinha decidido a questao pra este degrau (o mais baixo da hierarquia se
     separa por caixa alta, tracking e espaco, nunca pelo acento da marca). Enquanto
     divergiam, o mesmo tracinho saia ouro em /panorama, /painel, /termos e
     /privacidade e cinza em toda outra rota, e o ouro nao acompanhava o tema.
     O 6o, a frase da virada, NAO mora aqui: `.accent` e definido uma vez so,
     em landing.css (`.lp .accent`), e este arquivo nao o repete.
     Nada alem disso: kicker, bullet, numero de fonte, selo, unidade e rotulo
     passaram a se distinguir por peso, tamanho, brilho e espaco.
   · TIPO: titulo e numero em --fonte-titulo (Archivo) com --largura-display
     (>=28px) ou --largura-titulo (titulo de secao/componente). Texto em Inter,
     herdado do .lp.
   Zero hex, zero raio a mao, zero token da ponte legada.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── BASE de leitura (long-form) ── */
.panorama .wrap--read{max-width:720px}
/* ritmo de seção = CHASSI (chassis.css) · 1 fonte unica */
.panorama section + section{border-top:1px solid var(--borda)}
.panorama p{color:var(--texto-lead)}
.panorama .lead-read{font-size:var(--fs-body-lg);color:var(--texto-lead);max-width:60ch;line-height:1.6}
.panorama .lead-read strong{color:var(--texto);font-weight:var(--fw-semibold)}

/* ── DOC HERO / CAPA (edição Nº 1) ── */
.doc-hero{position:relative;overflow:hidden;text-align:left} /* ritmo = CHASSI (hero = lg no topo) */
/* eyebrow unificado: MESMO traço do .eyebrow do landing.css (uma identidade só em todos os heros).
   ⚠️ O comentário dizia "unificado" e o código não estava: o traço aqui era `--acento`, e o do
   `.eyebrow` (landing.css) é `--borda-forte`. Duas versões de uma peça só, e o juiz mediu o
   resultado — 24x1px de #D4921B na MESMA coordenada nos DOIS temas em /panorama, /painel, /termos
   e /privacidade, enquanto nas outras rotas o mesmo componente saía cinza. O landing.css já tinha
   decidido a questão pra este degrau ("o eyebrow é o degrau MAIS BAIXO da hierarquia: pintar o
   degrau mais baixo com o acento da marca era hierarquia disfarçada de cor"), e o traço da edição
   é o mesmo degrau. Agora é o mesmo fio, e ele acompanha o tema. */
.doc-hero .edition{display:inline-flex;align-items:center;gap:.625rem;font-size:var(--fs-eyebrow);font-weight:var(--fw-semibold);letter-spacing:var(--letra-caps);text-transform:uppercase;color:var(--texto-2)}
.doc-hero .edition::before{content:'';display:block;width:1.5rem;height:1px;background:var(--borda-forte);flex-shrink:0}
.doc-hero .edition b{color:var(--texto);font-weight:var(--fw-bold)}
.doc-hero h1{font-family:var(--fonte-titulo);font-stretch:var(--largura-display);font-size:var(--fs-display);font-weight:var(--fw-extra);line-height:var(--lh-display);letter-spacing:var(--letra-display);color:var(--texto);max-width:16ch;margin-top:var(--space-4)}
.doc-hero .deck{font-size:var(--fs-body-lg);color:var(--texto-lead);max-width:52ch;margin-top:var(--space-4);line-height:1.55}
.doc-hero .byline{display:flex;align-items:center;gap:.75rem;margin-top:var(--space-5);font-size:var(--fs-eyebrow);font-weight:var(--fw-semibold);letter-spacing:.06em;text-transform:uppercase;color:var(--texto-2)}
.doc-hero .byline b{color:var(--texto);font-weight:var(--fw-semibold)}
.doc-hero .byline::before{content:'';width:2rem;height:1px;background:var(--borda-forte)}

/* faixa de stats-âncora no hero (3 números que param o dedo) */
.stat-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);margin-top:var(--space-7);border-top:1px solid var(--borda);padding-top:var(--space-6)}
.stat-strip .stat{display:flex;flex-direction:column;gap:.3rem}
.stat-strip .stat .n{font-family:var(--fonte-titulo);font-stretch:var(--largura-display);font-size:clamp(1.8rem,5vw,2.6rem);font-weight:var(--fw-extra);line-height:1;letter-spacing:var(--letra-display);color:var(--texto);font-variant-numeric:tabular-nums}
/* A UNIDADE ACESA · o elemento-assinatura do sistema (manual §Componentes/§Dosagem · 16/ago).
   REVERTIDO em 16/ago: esta linha nasceu em --texto-2 com a justificativa "era acento: 3 numeros
   = 3 acentos numa dobra so", que aplica a COTA DE PREENCHIMENTO a um caso de TEXTO. O manual
   isenta o texto por escrito: "Preenchimento de ouro em NO MAXIMO 1 elemento por peca (o botao
   principal). Todo o resto do ouro entra como texto e traco: a assinatura, O NUMERO DE RESULTADO,
   o selo, o sublinhado." E o §Componentes crava que o numero com a unidade acesa "e a coisa
   memoravel do sistema". A cota que rege aqui e a regra 4 (um acento por card), e 3 numeros em
   3 celulas ficam NO teto, nunca acima. Achado do juiz visual fresco de 16/ago, na foto do ar.
   --acento-texto de proposito, e nao --acento: ele vira couro 800 sozinho no tema claro, onde o
   ouro cru mede 2,65 e reprova. Um token, zero regra por tema.
   o .u daqui NAO reseta a largura: ele nao tem font-size proprio, herda os 28-42px do .n e
   fica na MESMA linha ("62mil"), entao 92% quebraria a largura no meio do numero. O irmao
   .result .r-num .u reseta porque la o .u cai pra ~.62em, abaixo do piso de 28px. */
.stat-strip .stat .n .u{color:var(--acento-texto)}
/* O SINAL DE % NUNCA ACENDE, e esta regra e a LEI DO LEXICO em codigo (achado do juiz de 17/ago).
   A lei do dono (07/jul · `00_NORTE/_LEXICO.md`, repetida no manual §12) diz que proporcao que o
   cliente ve fala "a cada 10", nunca percentual. Acender a unidade e o elemento-assinatura da casa,
   entao acender um `%` aponta o holofote do sistema exatamente pra forma que a lei proibe: a linha
   acima, sozinha, transformou o `%` no pixel mais aceso da dobra. Antes ele era cinza e passava
   despercebido; a cura da unidade o promoveu, e isso e regressao ainda que a unidade esteja certa.
   Esta regra devolve o `%` ao neutro SEM tocar na copy do dono, que e dele: o "47%" e estatistica
   externa citada (Vigitel 2024) e trocar por "5 a cada 10" muda a precisao de um numero com fonte.
   ⚪ ABERTO PRO DONO: a decisao de reescrever o numero na forma da lei e dele, nao minha. Enquanto
   ele nao falar, o sistema ao menos para de premiar a forma proibida. */
.stat-strip .stat .n .u--pct{color:var(--texto-2)}
.stat-strip .stat .l{font-size:.8rem;color:var(--texto-2);line-height:1.35;max-width:22ch}
/* modificador: rotulo em ALTO CONTRASTE (quando os numeros nao tem unidade pra carregar o peso,
   ex: Painel). A distincao e BRILHO + peso, nunca cor. */
.stat-strip--accent .stat .l{color:var(--texto);font-weight:var(--fw-semibold)}

/* ── CHAPTER OPEN (respiro/cadência de revista) ── */
.ch-open{text-align:left}
/* o algarismo gigante e MARCA D'AGUA: cor de borda, que funciona nos dois temas */
.ch-open .ch-num{font-family:var(--fonte-titulo);font-stretch:var(--largura-display);font-size:clamp(3.5rem,12vw,6rem);font-weight:var(--fw-extra);line-height:.9;letter-spacing:var(--letra-display);color:var(--borda-forte)}
.ch-open .ch-kicker{display:block;font-size:var(--fs-eyebrow);font-weight:var(--fw-bold);letter-spacing:var(--letra-caps);text-transform:uppercase;color:var(--texto-3);margin-bottom:var(--space-3)}
.ch-open h2{font-family:var(--fonte-titulo);font-stretch:var(--largura-titulo);font-size:var(--fs-h2);font-weight:var(--fw-bold);line-height:var(--lh-heading);letter-spacing:var(--letra-titulo);max-width:18ch;margin-top:.4rem}
.ch-open .ch-deck{color:var(--texto-lead);font-size:var(--fs-body-lg);max-width:52ch;margin-top:var(--space-3)}

/* ── SECTION HEAD (texto longo) ── */
.sec-head h2{font-family:var(--fonte-titulo);font-stretch:var(--largura-titulo);font-size:var(--fs-h2);font-weight:var(--fw-bold);line-height:var(--lh-heading);letter-spacing:var(--letra-titulo);max-width:22ch}
.sec-head .sub{color:var(--texto-2);font-size:var(--fs-body-lg);margin-top:var(--space-3);max-width:48ch}

/* ── CARTA DE ABERTURA (1ª pessoa · founder) ── */
.carta .carta-body{max-width:60ch}
.carta .carta-body p{font-size:var(--fs-body-lg);color:var(--texto-lead);margin-bottom:var(--space-4);line-height:1.65}
.carta .carta-body p strong{color:var(--texto);font-weight:var(--fw-semibold)}
.carta .signature{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-5)}
/* O MESMO CÍRCULO, O MESMO IRMÃO: esta é a assinatura da carta e carrega o MESMO avatar-founder.png
   opaco #0E1216 do `.founder-photo-blend` do landing.css. A ordem do dono de 22/ago ("Eu queria que
   saísse esse círculo... um círculo que é escuro no escuro") vale aqui igual, senão a mesma foto sai
   solta numa página e anelada na outra, e a lei é "uma empresa, uma forma visual". Escopado no claro
   pelo mesmo motivo medido lá: contra o quase-branco o PNG opaco viraria um quadrado escuro. */
.carta .signature img{width:54px;height:54px;object-fit:cover}
.tema-claro .carta .signature img{border-radius:50%;border:1px solid var(--borda)}
.carta .signature .who b{display:block;color:var(--texto);font-weight:var(--fw-semibold);font-size:1rem}
.carta .signature .who span{font-size:.8rem;color:var(--texto-2);letter-spacing:.04em}

/* ── BIG NUMBER (número gigante isolado) ── */
.big-number{text-align:center;max-width:760px;margin-inline:auto}
.big-number .bn{font-family:var(--fonte-titulo);font-stretch:var(--largura-display);font-size:clamp(4rem,18vw,9rem);font-weight:var(--fw-extra);line-height:.86;letter-spacing:var(--letra-display);color:var(--texto);font-variant-numeric:tabular-nums}
/* o trecho marcado com .accent ja e ouro por landing.css (`.lp .accent`) · UMA verdade so */
.big-number .bn-cap{font-size:var(--fs-body-lg);color:var(--texto-lead);max-width:34ch;margin:var(--space-4) auto 0;line-height:1.5}
.big-number .bn-cap strong{color:var(--texto);font-weight:var(--fw-semibold)}

/* ── BAR CHART (série temporal · ex.: o parque triplicou) ── */
/* serie de apoio = --serie-2 · a coluna do AGORA e a metrica-heroi = --serie-1 (ouro) */
.bar-chart{margin-top:var(--space-6)}
.bar-chart .bc-grid{display:grid;grid-template-columns:repeat(var(--bc-cols,6),1fr);gap:clamp(.5rem,2vw,1.25rem);align-items:end;height:clamp(180px,32vw,260px);border-bottom:1px solid var(--borda);padding-bottom:.5rem}
.bar-chart .bc-col{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:.5rem;height:100%}
.bar-chart .bc-bar{width:100%;max-width:56px;border-radius:var(--raio-controle) var(--raio-controle) 0 0;background:var(--serie-2);min-height:6px}
.bar-chart .bc-col:last-child .bc-bar{background:var(--serie-1)}
.bar-chart .bc-val{font-size:.82rem;font-weight:var(--fw-bold);color:var(--texto);font-variant-numeric:tabular-nums;order:-1;white-space:nowrap}
.bar-chart .bc-axis{display:grid;grid-template-columns:repeat(var(--bc-cols,6),1fr);gap:clamp(.5rem,2vw,1.25rem);margin-top:.6rem}
.bar-chart .bc-x{font-size:.74rem;color:var(--texto-3);text-align:center;font-variant-numeric:tabular-nums}

/* ── SPLIT STAT (2 lados · ex.: BR vs EUA) ── */
/* o lado que e o PONTO do grafico salta por BRILHO (era: os dois iguais, com um --accent morto) */
.split-stat{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--space-4);align-items:center;margin-top:var(--space-6);border:1px solid var(--borda);border-radius:var(--raio-cartao);padding:clamp(var(--space-5),4vw,var(--space-6));background:var(--superficie)}
.split-stat .ss-side{text-align:center}
.split-stat .ss-flag{font-size:.78rem;font-weight:var(--fw-bold);letter-spacing:var(--letra-caps);text-transform:uppercase;color:var(--texto-2);margin-bottom:.4rem}
.split-stat .ss-num{font-family:var(--fonte-titulo);font-stretch:var(--largura-display);font-size:clamp(2.4rem,8vw,3.4rem);font-weight:var(--fw-extra);line-height:1;letter-spacing:var(--letra-display);color:var(--texto-2);font-variant-numeric:tabular-nums}
.split-stat .ss-side--accent .ss-num{color:var(--texto)}
/* a ladder antiga tinha 3 degraus de alpha aqui (.42 / .55 / .42). Sobre CARTAO o --texto-3
   reprova em texto pequeno (4,36 < 4,5), entao os 3 degraus voltam por PESO e TAMANHO */
.split-stat .ss-lab{font-size:.78rem;color:var(--texto-2);margin-top:.4rem;line-height:1.35}
.split-stat .ss-vs{font-style:italic;font-weight:var(--fw-regular);color:var(--texto-2);font-size:1rem}

/* ── DOTS GRID (proporção · ex.: penetração / parados) ── */
/* o vazio e a serie MAIS QUIETA (--serie-3 · 3,44 s/ pagina, piso 3,0 de elemento grafico),
   nunca superficie: na peca viva sao 94 pontos apagados contra 6 acesos, e o apagado E o
   denominador. Se ele some da retina, sobram 6 pontos de ouro no vazio e o grafico deixa de
   dizer a unica coisa que tem pra dizer. O ouro segue mandando: --serie-1 e 2x --serie-3. */
.dots-grid{margin-top:var(--space-6);max-width:560px}
.dots-grid .dg-wrap{display:grid;grid-template-columns:repeat(20,1fr);gap:clamp(4px,1.2vw,7px)}
.dots-grid .dot{aspect-ratio:1;border-radius:50%;background:var(--serie-3)}
.dots-grid .dot.on{background:var(--serie-1)}
.dots-grid .dg-cap{font-size:.86rem;color:var(--texto-lead);margin-top:var(--space-4);max-width:46ch;line-height:1.5}
.dots-grid .dg-cap strong{color:var(--texto);font-weight:var(--fw-semibold)}

/* ── DATA TABLE (comparativo · ex.: com Pass vs direto) ── */
/* a coluna que ganha se distingue por BRILHO + PESO, nunca por cor (era laranja) */
.data-table{width:100%;border-collapse:collapse;margin-top:var(--space-5);font-size:.92rem}
.data-table caption{text-align:left;font-size:.78rem;color:var(--texto-3);letter-spacing:.04em;margin-bottom:.7rem;text-transform:uppercase;font-weight:var(--fw-semibold)}
.data-table th,.data-table td{text-align:left;padding:.85rem .9rem;border-bottom:1px solid var(--borda);vertical-align:top}
.data-table thead th{font-size:.76rem;font-weight:var(--fw-bold);letter-spacing:var(--letra-caps);text-transform:uppercase;color:var(--texto-3)}
.data-table tbody th{font-weight:var(--fw-semibold);color:var(--texto)}
.data-table td{color:var(--texto-lead);font-variant-numeric:tabular-nums}
.data-table .col-accent{color:var(--texto);font-weight:var(--fw-bold)}

/* ── TESE BLOCK (as 3 dores · numeradas, com munição) ── */
.tese{display:grid;grid-template-columns:auto 1fr;gap:var(--space-4) var(--space-5);align-items:start}
.tese + .tese{margin-top:var(--space-7);padding-top:var(--space-7);border-top:1px solid var(--borda)}
.tese .tese-num{font-family:var(--fonte-titulo);font-stretch:var(--largura-display);font-size:clamp(2.6rem,8vw,4rem);font-weight:var(--fw-extra);line-height:.85;color:var(--texto);letter-spacing:var(--letra-display)}
.tese .tese-kick{font-size:var(--fs-eyebrow);font-weight:var(--fw-bold);letter-spacing:var(--letra-caps);text-transform:uppercase;color:var(--texto-3)}
.tese h3{font-family:var(--fonte-titulo);font-stretch:var(--largura-titulo);font-size:var(--fs-h2);font-weight:var(--fw-bold);line-height:var(--lh-heading);letter-spacing:var(--letra-titulo);margin-top:.3rem;max-width:20ch}
.tese .tese-body{grid-column:1 / -1}
@media(min-width:721px){.tese .tese-body{grid-column:2}}
.tese .tese-body > p{font-size:var(--fs-body-lg);color:var(--texto-lead);margin-bottom:var(--space-4);max-width:56ch;line-height:1.6}
.tese .tese-body > p strong{color:var(--texto);font-weight:var(--fw-semibold)}
.tese .munition{list-style:none;padding:0;margin:var(--space-4) 0 0;display:flex;flex-direction:column;gap:.85rem}
.tese .munition li{position:relative;padding-left:1.5rem;font-size:var(--fs-body);color:var(--texto-lead);line-height:1.5;max-width:56ch}
/* o marcador e ESTRUTURA (repete dezenas de vezes): recuou pra neutro, o negrito da linha carrega */
.tese .munition li::before{content:'';position:absolute;left:0;top:.55em;width:.5rem;height:.5rem;border-radius:50%;background:var(--texto-3)}
.tese .munition li b{color:var(--texto);font-weight:var(--fw-bold)}

/* ── SOURCE (citação de fonte · inline e por número) ── */
.src{display:block;font-size:.74rem;color:var(--texto-3);margin-top:.3rem;letter-spacing:.01em}
.src::before{content:'Fonte: ';font-weight:var(--fw-semibold)}
.hyp{color:var(--texto-3);font-weight:var(--fw-semibold)}

/* ── CALLOUT (achado-chave · a ignição mora na ELEVAÇÃO, não na cor) ── */
/* 4 callouts na peça viva: kicker em ouro seria 4 acentos numa leitura só */
.callout{border:1px solid var(--borda);background:var(--superficie);border-radius:var(--raio-cartao);padding:clamp(var(--space-4),3vw,var(--space-5));margin-top:var(--space-5)}
.callout .co-kick{display:inline-flex;align-items:center;gap:.5rem;font-size:var(--fs-eyebrow);font-weight:var(--fw-bold);letter-spacing:var(--letra-caps);text-transform:uppercase;color:var(--texto-2);margin-bottom:.6rem}
.callout .co-kick::before{content:'';width:1.5rem;height:1px;background:var(--borda-forte)}
.callout p{font-size:var(--fs-body-lg);color:var(--texto);line-height:1.55;max-width:54ch}
.callout p strong{color:var(--texto);font-weight:var(--fw-bold)}

/* ── PULLQUOTE (frase-tese / a virada) ── */
/* aparece UMA vez no documento: e o posto de ouro da virada, e quem o pinta e o
   `.lp .accent` do landing.css (a definicao unica de .accent) · aqui so a forma */
.pullquote{text-align:center;max-width:24ch;margin-inline:auto}
.pullquote p{font-family:var(--fonte-titulo);font-stretch:var(--largura-display);font-size:clamp(1.75rem,4.5vw,2.4rem);font-weight:var(--fw-bold);line-height:1.25;letter-spacing:var(--letra-display);color:var(--texto)}
.pullquote cite{display:block;font-style:normal;font-size:.82rem;font-weight:var(--fw-semibold);letter-spacing:.06em;text-transform:uppercase;color:var(--texto-3);margin-top:var(--space-4)}

/* ── FIELD QUOTE (voz de campo / depoimento) ── */
.field-quote{border:1px solid var(--borda);background:var(--superficie);border-radius:var(--raio-cartao);padding:clamp(var(--space-4),3vw,var(--space-5));margin-top:var(--space-5)}
.field-quote p{font-size:var(--fs-body-lg);color:var(--texto);line-height:1.5;font-weight:var(--fw-medium)}
.field-quote .attr{display:block;font-size:.8rem;color:var(--texto-2);margin-top:.8rem;letter-spacing:.03em}

/* ── STEPS (os 5 passos do Método B·O·O·O·T) ── */
/* 5 marcadores = 5 acentos no antigo. Agora o algarismo salta por BRILHO dentro de um anel neutro */
.steps{display:flex;flex-direction:column;gap:var(--space-3);margin-top:var(--space-6);counter-reset:step}
.step{display:grid;grid-template-columns:auto 1fr;gap:var(--space-4);align-items:start;border:1px solid var(--borda);border-radius:var(--raio-cartao);padding:clamp(var(--space-4),3vw,var(--space-5));background:var(--superficie)}
.step .step-mark{width:2.6rem;height:2.6rem;border-radius:50%;border:1.5px solid var(--borda-forte);display:flex;align-items:center;justify-content:center;font-family:var(--fonte-titulo);font-stretch:var(--largura-titulo);font-size:1.2rem;font-weight:var(--fw-extra);color:var(--texto);flex-shrink:0}
.step h4{font-family:var(--fonte-titulo);font-stretch:var(--largura-titulo);font-size:var(--fs-h3);font-weight:var(--fw-bold);line-height:1.2;letter-spacing:var(--letra-titulo)}
.step h4 .tag{display:block;font-family:var(--fonte-texto);font-stretch:normal;font-size:.72rem;font-weight:var(--fw-bold);letter-spacing:var(--letra-caps);text-transform:uppercase;color:var(--texto-2);margin-bottom:.25rem}
.step p{color:var(--texto-lead);font-size:var(--fs-body);margin-top:.4rem;line-height:1.5;max-width:52ch}
.step p strong{color:var(--texto);font-weight:var(--fw-semibold)}

/* ── DOC CTA (fechamento · único CTA = Reunião de Dono) ── */
.doc-cta{text-align:center} /* ritmo = CHASSI (fecho = lg embaixo) */
.doc-cta .dc-kick{font-size:var(--fs-eyebrow);font-weight:var(--fw-semibold);letter-spacing:var(--letra-caps);text-transform:uppercase;color:var(--texto-3);margin-bottom:var(--space-3)}
.doc-cta h2{font-family:var(--fonte-titulo);font-stretch:var(--largura-titulo);font-size:var(--fs-h2);font-weight:var(--fw-bold);line-height:var(--lh-heading);letter-spacing:var(--letra-titulo);max-width:20ch;margin:0 auto var(--space-4)}
.doc-cta .cta{white-space:normal;text-align:center;line-height:1.3;max-width:100%;padding-block:.95rem;margin-block:var(--space-5)} /* respiro do botao: nao cola no texto nem no bigidea */
.doc-cta .dc-sub{color:var(--texto-lead);font-size:var(--fs-body-lg);max-width:46ch;margin:0 auto var(--space-6);line-height:1.55}
.doc-cta .dc-sub strong{color:var(--texto);font-weight:var(--fw-semibold)}
.doc-cta .risk{font-size:var(--fs-body);color:var(--texto-2);max-width:44ch;margin:var(--space-5) auto 0}
.doc-cta .bigidea{font-family:var(--fonte-titulo);font-stretch:var(--largura-display);font-size:clamp(1.75rem,4.5vw,3rem);font-weight:var(--fw-extra);letter-spacing:var(--letra-display);color:var(--texto);margin-top:var(--space-6)}

/* ── ANEXO / FONTES (lastro de credibilidade) ── */
/* .sources: ritmo = CHASSI · 22 itens na peça viva: numeral em ouro seria 22 acentos */
.sources h2{font-family:var(--fonte-titulo);font-stretch:var(--largura-titulo);font-size:var(--fs-h3);font-weight:var(--fw-bold);letter-spacing:var(--letra-titulo);margin-bottom:var(--space-3)}
.sources .src-intro{color:var(--texto-2);font-size:var(--fs-body);max-width:54ch;margin-bottom:var(--space-5)}
.sources ol{list-style:none;counter-reset:s;padding:0;display:grid;gap:.7rem}
.sources li{counter-increment:s;position:relative;padding-left:2.2rem;font-size:.86rem;color:var(--texto-2);line-height:1.5}
.sources li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:0;font-size:.74rem;font-weight:var(--fw-bold);color:var(--texto-3);font-variant-numeric:tabular-nums}
.sources .disclaimer{margin-top:var(--space-6);padding-top:var(--space-5);border-top:1px solid var(--borda);font-size:.82rem;color:var(--texto-3);max-width:54ch;line-height:1.55}

/* ── RESPONSIVE ── */
@media(max-width:720px){
  .stat-strip{grid-template-columns:1fr;gap:var(--space-4)}
  .stat-strip--accent{grid-template-columns:repeat(3,1fr);gap:var(--space-3)} /* Painel: 3 numeros curtos lado a lado no mobile (sem stack-void) */
  .split-stat{grid-template-columns:1fr;text-align:center}
  .split-stat .ss-vs{padding-block:.5rem}
  .tese{grid-template-columns:1fr;gap:var(--space-2)}
  .tese .tese-num{font-size:3rem}
  .dots-grid .dg-wrap{grid-template-columns:repeat(20,1fr)}
  .data-table{font-size:.84rem}
  .data-table th,.data-table td{padding:.6rem .55rem}
}
@media(max-width:480px){
  .bar-chart .bc-grid,.bar-chart .bc-axis{gap:.35rem}
  .bar-chart .bc-val{font-size:.58rem}
  .bar-chart .bc-x{font-size:.64rem}
  .data-table{font-size:.78rem}
}
@media(prefers-reduced-motion:reduce){
  .panorama .reveal{opacity:1;transform:none}
}

/* ═══════════════════════════════════════════════════════════════════════
   PANORAMA · v1.1 ADITIVO (peso de relatorio + funil Painel)
   Sumario executivo · timeline das ondas · a conta que nao fecha (big-number) ·
   previsoes · resultados do Painel (prova) · secao clara (ritmo). So var(--token).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── SUMARIO EXECUTIVO · os achados (pra quem tem 15 min) ── */
.findings{margin-top:var(--space-6);display:grid;gap:var(--space-4)}
.finding{display:grid;grid-template-columns:auto 1fr;gap:var(--space-4);align-items:baseline;border-bottom:1px solid var(--borda);padding-bottom:var(--space-4)}
.finding:last-child{border-bottom:none;padding-bottom:0}
.finding .f-n{font-family:var(--fonte-titulo);font-stretch:var(--largura-display);font-size:clamp(1.75rem,5vw,2.2rem);font-weight:var(--fw-extra);color:var(--texto);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:var(--letra-display);min-width:3.2ch}
.finding .f-t{font-size:var(--fs-body-lg);color:var(--texto-lead);line-height:1.45}
.finding .f-t strong{color:var(--texto);font-weight:var(--fw-semibold)}

/* ── TIMELINE vertical · as 3 ondas / cronologia ── */
/* o marco AGORA e um dos 5 postos de ouro: e ESTADO ("voce esta aqui"), nao decoracao */
.tl{margin-top:var(--space-6);position:relative;padding-left:var(--space-5)}
.tl::before{content:'';position:absolute;left:6px;top:.5rem;bottom:.5rem;width:2px;background:var(--borda-forte)}
.tl-item{position:relative;padding-bottom:var(--space-6)}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:'';position:absolute;left:calc(-1 * var(--space-5) + 1px);top:.35rem;width:13px;height:13px;border-radius:50%;background:var(--pagina);border:2px solid var(--texto-3)}
.tl-item--now::before{background:var(--acento);border-color:var(--acento)}
.tl-date{font-size:.76rem;font-weight:var(--fw-bold);letter-spacing:var(--letra-caps);text-transform:uppercase;color:var(--texto-3)}
.tl-item--now .tl-date{color:var(--texto)}
.tl-item h4{font-family:var(--fonte-titulo);font-stretch:var(--largura-titulo);font-size:var(--fs-h3);font-weight:var(--fw-bold);line-height:1.2;letter-spacing:var(--letra-titulo);margin:.3rem 0}
.tl-item p{color:var(--texto-lead);font-size:var(--fs-body);max-width:50ch;line-height:1.5}

/* ── PREVISOES · leituras do resto do ano ── */
.reads{margin-top:var(--space-6);display:grid;gap:var(--space-3)}
.read{display:grid;grid-template-columns:auto 1fr;gap:var(--space-4);border:1px solid var(--borda);border-radius:var(--raio-cartao);padding:clamp(var(--space-4),3vw,var(--space-5));background:var(--superficie)}
/* 1,5rem = 24px, abaixo do piso de 28px da largura 62%: aqui a Archivo vai a 92% (tokens.css) */
.read .r-n{font-family:var(--fonte-titulo);font-stretch:var(--largura-titulo);font-size:1.5rem;font-weight:var(--fw-extra);color:var(--texto-3);line-height:1;font-variant-numeric:tabular-nums}
.read h4{font-family:var(--fonte-titulo);font-stretch:var(--largura-titulo);font-size:var(--fs-h3);font-weight:var(--fw-bold);line-height:1.2;letter-spacing:var(--letra-titulo);margin-bottom:.3rem}
.read p{color:var(--texto-lead);font-size:var(--fs-body);line-height:1.5;max-width:58ch}
/* a 5a "coisa a esperar" = o BOOOT. A distincao e ELEVACAO (sobe um degrau de superficie) +
   borda forte; o ouro fica so no ALGARISMO, que e onde ele vale */
.read--booot{background:var(--superficie-2);border-color:var(--borda-forte)}
.read--booot .r-n{color:var(--acento-texto)}

/* ── RESULTADOS DO PAINEL · prova real (cases publicos) ── */
.results{margin-top:var(--space-6);display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--space-3)}
.result{border:1px solid var(--borda);border-radius:var(--raio-cartao);padding:var(--space-4);background:var(--superficie);text-align:center}
.result .r-num{font-family:var(--fonte-titulo);font-stretch:var(--largura-display);font-size:clamp(1.75rem,5vw,2.1rem);font-weight:var(--fw-extra);color:var(--texto);line-height:1;letter-spacing:var(--letra-display);font-variant-numeric:tabular-nums}
.result .r-num .u{color:var(--texto-2);font-size:.62em;font-weight:var(--fw-bold);font-stretch:var(--largura-titulo)}
.result .r-cap{font-size:.78rem;color:var(--texto-2);margin-top:.5rem;line-height:1.35}
.result .r-cap b{display:block;color:var(--texto);font-weight:var(--fw-semibold);font-size:.84rem}

/* ── SECAO CLARA · quebra de ritmo (a luz no fim · a saida) ──
   O TEMA vem do sistema, nao deste arquivo: escreva class="sec-light tema-claro"
   na <section> e os semanticos de TEXTO/SUPERFICIE/BORDA remapeiam sozinhos
   (tokens.css:206-246). Repetir aqui a paleta clara seria uma SEGUNDA verdade.

   ⚠️ MAS O ACENTO NAO REMAPEIA. O bloco .tema-claro redefine --acento-texto,
   --serie-2 e --serie-3, e NAO redefine --acento, --sobre-acento nem --serie-1.
   Logo, dentro de uma secao clara, .tl-item--now::before, .dots-grid .dot.on e a
   barra-heroi do .bar-chart saem como PREENCHIMENTO de ouro-600 sobre fundo
   claro, que o dono proibiu verbatim (tokens.css:19-23: "em paginas brancas ou
   claras o certo e nao ter botao ouro. Ponto final."). Em secao clara use so
   acento de TEXTO/BORDA: nao coloque timeline, dots-grid nem bar-chart la dentro
   sem antes redefinir --acento/--serie-1 no proprio escopo da secao. */
.panorama .sec-light{background:var(--pagina);color:var(--texto);border-top:none}