/* <!-- anti-slop-visual-bypass: os 2 `backdrop-filter: blur` desta folha sao HERDADOS da LP
   aprovada do dono e nao sao glassmorphism decorativo: um e o header sticky (barra fixa sobre
   conteudo rolando, sem blur o texto do menu briga com a copy que passa por tras) e o outro e o
   veu do modal. Nenhum cartao, botao ou secao usa vidro. · 2026-08-16 --> */
/* ═══════════════════════════════════════════════════════════════════════
   BOOOT · LANDING PATTERNS · v2.0.0 · sistema OURO
   Camada de componentes de LANDING PAGE do PORTAL (Área 1 · porta-pra-fora).
   Consome os SEMÂNTICOS de _MARCA/tokens/tokens.css (--pagina · --superficie ·
   --texto · --acento · --cta-* · --borda · --raio-*). Zero hex, zero nome do
   mundo antigo. Carregue junto com tokens.css + assets/fonts/fonts.css e use
   <body class="lp">.

   REPINTURA 16/ago/2026 · D-OURO-VALE-PRO-PORTAL-16AGO · mapa único
   _MARCA/tokens/_DE-PARA-REPINTURA.md. O que mudou aqui NÃO foi a cor: foi a
   HIERARQUIA. O mundo antigo cavava nível com um acento barato (o laranja
   aparecia 176 vezes no Portal) e com uma rampa de opacidade sobre o creme. O
   sistema OURO permite UM preenchimento de acento por tela e proíbe opacity em
   texto, então quase todo ponto de cor desta folha virou PESO, TAMANHO, ESPAÇO
   e ORDEM. Onde o ouro ficou está escrito ao lado da regra, sempre.
   Elevação no escuro é por COR (--superficie → --superficie-2 → --flutuante),
   nunca por sombra: por isso os box-shadow de cartão viraram --sombra-cartao
   (none no escuro, discreto no claro) e os glows morreram.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── CTA PRIMÁRIO DO PORTAL = NEUTRO DE CONTRASTE MÁXIMO ──────────────────
   D-CTA-PRIMARIO-DO-PORTAL-E-NEUTRO-16AGO (decisão de desenho da Central,
   dentro do veto do dono "botão principal é botão principal, não estou seguro
   com ouro"). O tokens.css entrega o CTA em OURO no escuro; esta folha, que só
   é consumida por página pública de booot.com.br, re-mapeia os 4 tokens do CTA
   pro neutro: 17,53 no escuro contra os 7,10 do ouro. O botão passa a ser o
   objeto de MAIOR luminância da página, e por isso perdeu o glow — quem já é o
   mais claro da tela não precisa de sombra pra existir.
   O `:not(.tema-claro)` não é enfeite: o tokens.css já cumpre esta mesma
   decisão no claro (grafite sobre branco, 18,80) e, por ORDEM DE FONTE, este
   bloco venceria aquele se não se excluísse do tema claro.
   NÃO se edita o tokens.css por isto: a decisão é do Portal, não do sistema. */
:root:not(.tema-claro){
  /* ⚠️ CORRIGIDO EM 16/ago, e o erro foi MEU, de leitura. Eu li o veto do dono
     ("para o portal não. botão principal é botão principal, não estou seguro com ouro") como
     "o botão NÃO é ouro" e pintei uma pílula quase-branca. Ele viu no ar e reagiu na hora:
     "Caramba, o botão do CTA ficou branco? Pelo amor de deus".
     O QUE EU ATROPELEI: uma EXCEÇÃO que ele já tinha travado e que o cargo do Fable registra
     entre as proibições da casa, verbatim dele: "mesmo que o código diga o contrário, eu acredito
     que vale usar esse botão" — o CTA de LETRA BRANCA NO OURO, no tema escuro. Estava no manual
     (§8), estava no `_DE-PARA-REPINTURA.md` (§Botão) e eu li os dois. Decisão travada do dono não
     se re-deriva de uma frase ambígua: quando as duas se chocam, quem manda é a que ele CRAVOU,
     e a dúvida vai pra ele antes da tinta, nunca depois do deploy.
     A MEDIÇÃO que ele já conhece e mandou manter assim mesmo: branco no ouro mede 2,65 contra a
     régua 3,0 de texto grande. É exceção DELE, documentada como exceção, e não se espalha: nunca
     desce pra texto pequeno, nunca vira padrão de outro componente.
     NO TEMA CLARO nada disto vale: lá o `tokens.css` manda grafite com branco (18,80), porque
     ouro de preenchimento em superfície clara é proibido por palavra direta dele. */
  --cta-fundo: var(--booot-ouro-600);
  --cta-texto: #FFFFFF;
  --cta-hover: var(--booot-ouro-500);
  --cta-press: var(--booot-ouro-700);
}

/* ── BASE ── */
.lp{background:var(--pagina);color:var(--texto);font-family:var(--fonte-texto);font-size:var(--fs-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
/* DEFESA DE FUNDO contra o transbordo lateral no celular (medido na PRODUCAO em 23/ago:
   scrollWidth 407 contra innerWidth 390 = 17px de rolagem pro lado na home). A linha acima ja pede
   `overflow-x:hidden`, mas ela mora no `body` (`<body class="lp">`) e o clipe do body so vale pro
   viewport quando o `html` esta `visible`; qualquer coisa que escape antes disso continua alargando
   o documento. O elemento que transbordava (o balao do ciclo) morreu na cura de 22/ago, e o dist
   mede 0; esta linha e o cinto pro proximo, que ninguem vai lembrar de medir.
   `clip`, NUNCA `hidden`, e a escolha tem motivo MEDIDO nesta folha: `hidden` cria contexto de
   rolagem, e o `.site-header` da linha 155 e `position:sticky` — com `hidden` no `html` ele para de
   grudar no topo. `clip` corta sem criar contexto, entao o sticky sobrevive. E o padrao de mercado
   pra isto desde que `overflow:clip` existe; Safari abaixo de 16 simplesmente ignora a declaracao e
   fica com o comportamento de hoje, entao nao ha regressao em navegador velho.
   🔴 PRECO DESTA LINHA, e quem for medir transbordo TEM que ler isto: ela CEGA o medidor de
   documento. Prova, feita nesta pagina em 23/ago: injetei uma faixa de 1480px numa tela de 1280 e
   `document.documentElement.scrollWidth` respondeu 1280, enquanto `document.body.scrollWidth`
   respondeu 1480. Ou seja, o gesto que CURA o transbordo e o mesmo que o ESCONDE do instrumento.
   Quem medir daqui pra frente mede em `document.body.scrollWidth` (ou caixa a caixa contra o
   viewport), NUNCA em `documentElement`: com esta linha no ar, o medidor de documento responde
   "limpo" pra qualquer transbordo, e verde de detector cego autoriza o defeito que ele devia pegar. */
html{overflow-x:clip}

/* ⚠️ O `:where()` NAO E ENFEITE: e a cura da causa de um defeito que chegou 3x no dono (12/ago).
   ANTES: `.lp *` tem especificidade (0,1,0) — uma CLASSE. Isso vence QUALQUER regra de elemento nu,
   e o autor da pagina nao tem como saber, porque a regra dele esta escrita e certa. No cadastro a
   MESMA declaracao servia os dois controles:
       input[type=text],...,textarea { padding:1.1rem 1.25rem }
   O `input[type=text]` e (0,1,1) e sobrevivia; o `textarea`, nu, e (0,0,1) e era atropelado. Medido
   na tela viva: input padding-left 20px, textarea 0px — o texto do cliente encostado na borda. Passou
   em toda revisao de CODIGO porque o CSS esta la; so o navegador via.
   DEPOIS: `:where()` tem especificidade ZERO (CSS Cascade 5). O reset continua vencendo o browser
   (origem do autor > user-agent, independe de peso), e QUALQUER regra da pagina passa a venc-lo — que
   e o contrato que todo reset moderno assina (Tailwind Preflight, open-props, Bootstrap Reboot).
   Pseudo-elemento NAO entra dentro de `:where()` (a lista dele nao os aceita), por isso `::before` e
   `::after` ficam DE FORA do parenteses. RAIO MEDIDO antes de mexer em arquivo compartilhado: 28
   paginas usam `.lp`, e existe 1 unica regra de elemento nu com padding/margin nelas — a quebrada.
   Trava: `_MOTOR/_tests/reset-nao-atropela-elemento.test.mjs` + o portao de tela `tela-controles.mjs`. */
:where(.lp *),:where(.lp *)::before,:where(.lp *)::after{box-sizing:border-box;margin:0;padding:0}
.lp h1,.lp h2,.lp h3{text-wrap:balance}
/* O MESMO `:where()` DE CIMA, PELO MESMO MOTIVO — e aqui ele custou o botao principal do /obrigado.
   `.lp a{color:inherit}` e (0,1,1) e vencia `.cta{color:var(--cta-texto)}`, que e (0,1,0). Resultado:
   TODO `<a class="cta">` do Portal (10 deles: /obrigado, /checkout, /painel, /panorama, /comece,
   /novo, /404, /analise...) descartava a cor escrita pra ele e herdava `--texto` do `.lp`. No tema
   CLARO `--texto` e o mesmo grafite de `--cta-fundo`: rotulo grafite sobre pilula grafite, 1,00:1,
   botao em BRANCO — foi o bloqueante que o juiz mediu. O `<button class="cta">` do /cadastro passava
   ileso (18,80:1) porque `.lp a` nao alcanca `<button>`: dois botoes irmaos, um certo e um invisivel,
   e a diferenca inteira era a TAG. O `.cta--wa` sofria o mesmo (perdia `--sobre-acento`, que existe
   justamente porque o quase-branco mede 3,17 sobre o verde do WhatsApp e reprova).
   Com especificidade zero o reset segue vencendo o user-agent (link azul e sublinhado) e passa a
   perder de QUALQUER regra de componente — que e o contrato que todo reset moderno assina.
   `.lp img` vai junto, pelo mesmo (0,1,1): sem isso o par de wordmark por tema abaixo nao troca. */
:where(.lp img){display:block;max-width:100%;height:auto}
:where(.lp a){color:inherit;text-decoration:none}
.lp button{font-family:inherit}

/* ── A LETRA DO TÍTULO · Archivo, e a LARGURA faz parte dela ──────────────
   Armadilha 5 do _DE-PARA: trocar só o `font-family` entrega Archivo na largura
   padrão, que NÃO é a letra da marca. A largura se ACRESCENTA. Título de seção e
   de componente = 92% (a condensada fecha demais no tamanho pequeno); manchete
   ≥28px sobe pra 62%, e isso está declarado na regra de cada manchete
   (.hero h1 · .closing .bigidea · .proof-stats .ps-n · e o .plano .price do pricing).
   O tracking também mudou de escala junto com a letra: o -0.038em do Poppins
   esmaga a condensada, então o padrão passou a ser --letra-titulo (-0.02em). */
.lp h1,.lp h2,.lp h3,.lp h4{font-family:var(--fonte-titulo);font-stretch:var(--largura-titulo);letter-spacing:var(--letra-titulo)}
/* papel de título sem tag de título (número, preço, frase-manchete): a letra vem do PAPEL, não da tag */
.lp .bigidea,.lp .proof-headline,.lp .contrast-after-h,.lp .founder-name,.lp .founder-kicker,
.lp .contrato-preco,.lp .cost-vs,.lp .reframe .arrow{font-family:var(--fonte-titulo);font-stretch:var(--largura-titulo);letter-spacing:var(--letra-titulo)}

/* ── ACENTO · o ÚNICO ouro desta folha, e ele é TEXTO ─────────────────────
   D-CTA-PRIMARIO-DO-PORTAL-E-NEUTRO-16AGO: "o ouro fica na assinatura, no
   número de resultado e no texto de acento". Preenchimento ouro nesta folha:
   ZERO. O CTA virou neutro, e badge, estado aberto, hover, borda de destaque e
   tique de eyebrow saíram da cor e passaram a se distinguir por elevação, peso,
   caixa e ordem. `.accent` é a marcação DELIBERADA de uma expressão pela
   página (o bordão, a promessa, o preço), nunca decoração de componente — por
   isso mora numa regra só, e não repetida dentro de cada bloco.
   No tema claro o --acento-texto vira couro 800 sozinho, porque ouro de
   preenchimento em superfície clara é proibido (palavra do dono). */
.lp .accent{color:var(--acento-texto)}

.wrap{max-width:1080px;margin:0 auto;padding-inline:clamp(1.25rem,5vw,3rem)}
.wrap--narrow{max-width:760px}

/* ── REVEAL (on-scroll) ── */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
.reveal.visible{opacity:1;transform:none}
.reveal-delay-1{transition-delay:.08s}
.reveal-delay-2{transition-delay:.16s}

/* ── EYEBROW · STICKER · TAG-PILL ──────────────────────────────────────────
   O TIQUE DO EYEBROW PERDEU A COR. Ele era laranja em toda seção do Portal, e o
   eyebrow é o degrau MAIS BAIXO da hierarquia: já se separa por caixa alta,
   tracking, tamanho e pelo próprio tique. Pintar o degrau mais baixo com o
   acento da marca era hierarquia disfarçada de cor. Agora é uma linha de borda. */
.eyebrow{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)}
.eyebrow::before{content:'';display:block;width:1.5rem;height:1px;background:var(--borda-forte);flex-shrink:0}
.sticker{display:inline-block;font-size:.62rem;font-weight:var(--fw-bold);letter-spacing:var(--letra-caps);text-transform:uppercase;padding:.35rem .7rem;border-radius:.4rem;background:var(--superficie-2);color:var(--texto-2);border:1px solid var(--borda-forte);white-space:nowrap}
.tag-pill{display:inline-block;font-size:.7rem;font-weight:var(--fw-semibold);letter-spacing:var(--letra-caps);text-transform:uppercase;padding:.3rem .75rem;border-radius:var(--raio-pill);border:1px solid var(--borda-forte);color:var(--texto)}

/* ── CTA (primário = neutro de contraste máximo · ver o bloco :root do topo) ── */
.cta{position:relative;display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap;overflow:hidden;background:var(--cta-fundo);color:var(--cta-texto);font-weight:var(--fw-semibold);font-size:1rem;text-decoration:none;padding:.95rem 1.85rem;border-radius:var(--raio-pill);border:none;cursor:pointer;max-width:100%;transition:background .25s ease,transform .25s ease}
.cta:hover{background:var(--cta-hover);transform:translateY(-1px)}
.cta:active{background:var(--cta-press);transform:translateY(0)}
.cta:focus-visible{outline:var(--anel-foco);outline-offset:var(--focus-offset)}
.cta--sm{padding:.6rem 1.25rem;font-size:.875rem;min-height:44px}
/* secundário = fundo transparente + 1px de borda + texto (a forma travada na decisão do CTA) */
.cta--ghost{background:transparent;border:1px solid var(--borda-forte);color:var(--texto);font-weight:var(--fw-semibold);transition:background .2s ease,border-color .2s ease}
.cta--ghost:hover{background:var(--superficie);border-color:var(--texto-3)}
/* WhatsApp = cor funcional da plataforma (exceção sancionada · ver patterns/README).
   O texto fica GRAFITE em qualquer tema (4,59 sobre o verde · o quase-branco media 3,17 e
   reprovava): por isso `--sobre-acento`, que é grafite nos dois temas, e não `--cta-texto`. */
.cta--wa{background:#1da851;color:var(--sobre-acento)}
.cta--wa:hover{background:#178a43}

/* ── HEADER sticky ── */
.site-header{position:sticky;top:0;z-index:var(--z-sticky);background:color-mix(in srgb,var(--pagina) 85%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--borda)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;padding-block:.75rem;max-width:1200px;position:relative}
.site-header .logo{height:32px;width:auto;display:block}
.header-right{display:flex;align-items:center;gap:var(--space-3)}

/* ── A ASSINATURA DA MARCA TROCA COM O TEMA ────────────────────────────────
   O DEFEITO: o wordmark do cabecalho e do rodape era um `<img>` unico apontando pro
   traco CLARO (`wordmark-claro.svg`, tinta #F6F7F8). Sobre a pagina clara (#F6F7F8) isso
   e tinta-sobre-a-propria-cor: o juiz mediu amplitude 1,02-1,03:1 dentro da caixa do logo
   em 8 rotas do tema claro, contra 17,5:1 no escuro. Pagina sem assinatura da marca.
   POR QUE ASSET, E NAO FILTRO: a marca se APLICA como e, nunca recolorida por conta
   propria. `filter:invert(1)` levaria o #F6F7F8 pra #090807, que nao e o grafite #0E1216
   do sistema — perto do olho, fora do token. O par certo JA existia no disco desde a
   repintura (`wordmark-claro.svg` + `wordmark-grafite.svg`, gerados no mesmo minuto):
   faltava so a chave que escolhe qual deles pinta.
   POR QUE DOIS `<img>`, E NAO UM SO: CSS nao troca o `src` de um `<img>` de forma
   portavel. `content:url()` faria isso num no so, mas e substituicao de ELEMENTO — Blink
   e WebKit implementam, o Firefox NAO (bugzilla 215083, aberto): la o logo continuaria
   claro-sobre-claro, ou seja, o bloqueante intacto no navegador que nao olhamos. Entao
   a marca vem nos dois tracos e o tema apaga um. E o padrao que GitHub e Docusaurus usam
   pela mesma razao, e o no escondido nao baixa (display:none + sem lazy = sem fetch).
   RUIDO ZERO PRO LEITOR DE TELA: o `<img>` oculto sai da arvore de acessibilidade, entao
   os dois carregam `alt="BOOOT"` e so um e anunciado, qualquer que seja o tema. */
/* ⚠️ A LISTA DE CONTEXTOS NAO E REDUNDANCIA: e a briga de ESPECIFICIDADE, e ela ja mordeu.
   ACHADO 16/ago, medido na foto do AR e depois reproduzido na cascata: `/analise` mostrava DOIS
   wordmarks no header do tema escuro, o segundo em #0E1216 sobre #0D1115 (~1,01:1, invisivel a
   olho nu) — e, pior que invisivel, ele OCUPAVA LUGAR: no celular empurrava o botao do topo e
   fazia "Comecar hoje" quebrar em duas linhas, so no escuro, na pagina que recebe trafego pago.
   A CAUSA, e ela e de cascata, nao de tema: `.site-header .logo{display:block}` (logo acima, na
   linha ~157) tem especificidade 0,2,0. O `.logo--grafite{display:none}` sozinho tem 0,1,0 e
   PERDE. Quem salvava as outras 18 paginas era o `.lp .logo--grafite` (0,2,0), que empata e vem
   depois — e `/analise` e a UNICA rota do Portal cujo `<body>` nao veste `class="lp"` (medido:
   `<body>` nela, `<body class="lp">` na home). Ou seja: a regra de marca dependia, sem dizer, de
   uma classe de LAYOUT que uma pagina nao tinha.
   A cura nomeia os dois contextos onde o logo vive, entao ela nao depende mais do `.lp` nem da
   proxima pagina lembrar de vesti-lo. E ADITIVA de proposito: nas 18 paginas que ja estavam
   certas o logo ja estava escondido, entao nada muda nelas — muda so na que estava quebrada. */
.logo--grafite,.lp .logo--grafite,.site-header .logo--grafite,.site-footer .logo--grafite{display:none}
.tema-claro .logo--claro,.tema-claro .site-header .logo--claro,.tema-claro .site-footer .logo--claro{display:none}
.tema-claro .logo--grafite,.tema-claro .site-header .logo--grafite,.tema-claro .site-footer .logo--grafite{display:block}
/* MENU do portal · Panorama · Painel · Plataforma · responsivo (hamburguer CSS-only no mobile).
   O link de menu é RÓTULO DE UI, não prosa: fica em --texto-2 e sobe pra --texto no hover.
   Assim o único elemento do topo em contraste máximo continua sendo o CTA. */
.logo-link{display:inline-flex;align-items:center;min-height:44px}
.site-nav{display:flex;align-items:center;gap:var(--space-4)}
.site-nav a{color:var(--texto-2);text-decoration:none;font-weight:var(--fw-medium);font-size:.95rem;transition:color .2s}
.site-nav a:hover{color:var(--texto)}
.nav-burger{display:none}
@media(max-width:768px){
  .nav-burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;background:none;border:0;cursor:pointer;min-width:44px;min-height:44px;padding:.5rem}
  .nav-burger span{display:block;width:22px;height:2px;background:var(--texto);border-radius:2px;transition:.2s}
  .nav-toggle:checked ~ .header-right .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle:checked ~ .header-right .nav-burger span:nth-child(2){opacity:0}
  .nav-toggle:checked ~ .header-right .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .site-nav{position:absolute;top:calc(100% + .6rem);right:0;left:0;flex-direction:column;align-items:stretch;gap:.25rem;background:var(--flutuante);border:1px solid var(--borda-forte);border-radius:var(--raio-flutuante);padding:.5rem;box-shadow:var(--sombra-flutuante);display:none;z-index:var(--z-sticky)}
  .nav-toggle:checked ~ .site-nav{display:flex}
  .site-nav a{padding:.9rem 1rem;border-radius:.6rem;font-size:1.05rem;min-height:44px;display:flex;align-items:center}
  .site-nav a:hover{background:var(--superficie-2)}
}

/* ── HERO + COUNTDOWN ── */
.hero{position:relative;overflow:hidden;padding-block:clamp(var(--space-7),9vw,var(--space-8)) var(--space-7)}
.hero__copy{display:flex;flex-direction:column;gap:var(--space-4);max-width:640px;position:relative;z-index:1}
.hero__sticker-row{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}
.hero h1{font-size:var(--fs-display);font-weight:var(--fw-extra);line-height:var(--lh-display);letter-spacing:var(--letra-display);font-stretch:var(--largura-display);color:var(--texto);max-width:13ch}
.hero .lead{font-size:var(--fs-body-lg);color:var(--texto-lead);max-width:52ch;line-height:1.55}
.hero .lead strong{color:var(--texto);font-weight:var(--fw-semibold)}
.hero .actions{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap}
/* ===== MOBILE RESPONSIVO (100% responsivo · NÃO degrada o web · DESIGN.md §10) =====
   ⚠️ SAIU DAQUI o override de `letter-spacing:-0.018em` nas manchetes. Ele existia pra
   AFROUXAR o -0.038em do Poppins no mobile; com o Archivo o padrão já é -0.01em, então a
   mesma linha passaria a APERTAR a condensada, que é exatamente o defeito que a armadilha 5
   do _DE-PARA descreve. Regra que perdeu o motivo se apaga, não se mantém "por garantia". */
@media(max-width:600px){
  /* CTA nunca vaza a tela: o texto longo quebra (em vez de nowrap-overflow) e os botoes de corpo viram full-width */
  .cta{white-space:normal;text-align:center;line-height:1.25}
  /* EXCEÇÃO: o pill do header não é botão de corpo; quebrado em 2 linhas ele estoura a altura
     do header e corta o texto (medido a 375px, 21/ago: 2 linhas, overflow hidden comendo a 1ª) */
  .header-right .cta--sm{white-space:nowrap}
  .hero .actions .cta,.closing .cta,.cost-anchor .cta,.secondary-cta .cta,.prova-more .cta,.doc-cta .cta{width:100%;justify-content:center}
  .br-desk{display:none} /* quebra manual de headline some no mobile · o text-wrap:balance equilibra */
}
.hero .proof-note{font-size:.8rem;color:var(--texto-2)}
/* O NÚMERO da prova é o único ouro da 1ª dobra, e ele é TEXTO, nunca preenchimento.
   Achado por MEDIÇÃO na foto da prévia (16/ago): a home fechou com 0 pixel de ouro acima
   da dobra, porque o CTA foi pro neutro por decisão do dono e o `.ps-n` (o outro ouro da
   página) mora lá embaixo. Uma marca cujo acento não aparece na tela que vende é uma marca
   que o visitante não vê. O tokens.css já nomeia a casa disto: "Ouro é valor conquistado:
   assinatura, NÚMERO DE RESULTADO". Aqui ele não disputa com a ação: o botão é o objeto de
   maior luminância (17,53), o número é o de maior saturação (7,10 no escuro · 5,70 no claro
   pelo degrau couro que o `.tema-claro` remapeia sozinho). */
.hero .proof-note strong{color:var(--acento-texto)}

/* ── SECTION HEAD ── */
/* ANTI-ÓRFÃ sistêmico (sem auditar linha a linha): títulos balanceiam, parágrafos evitam palavra solta na última linha */
h1,h2,h3,h4,.cmp-head,.section-head h2,.doc-hero h1{text-wrap:balance}
p,.sub,.deck,.lead,.anchor,.ch-deck{text-wrap:pretty}
.section-head{text-align:center;margin-inline:auto;max-width:620px}
.section-head h2{font-size:var(--fs-h2);font-weight:var(--fw-bold);line-height:var(--lh-heading);margin-top:var(--space-3)}
.section-head .sub{margin-top:var(--space-3);color:var(--texto-lead);font-size:var(--fs-body-lg);max-width:42ch;margin-inline:auto}

/* ── PROBLEM grid (pcards) ── */
.problem{border-top:1px solid var(--borda)} /* ritmo = CHASSI */
.problem-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);margin-top:var(--space-6)}
.pcard{border:1px solid var(--borda);border-radius:var(--raio-flutuante);padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3);position:relative;overflow:hidden;background:var(--superficie);box-shadow:var(--sombra-cartao)}
/* o número da dor é RÓTULO: sobe pra --texto-2 e se separa por caixa alta + tracking + tamanho.
   No mundo antigo ele vivia a .42 de alpha, que em 0,72rem some da tela e reprova contraste. */
.pcard .pnum{font-size:.72rem;font-weight:var(--fw-bold);letter-spacing:var(--letra-caps);text-transform:uppercase;color:var(--texto-2)}
.pcard h3{font-size:var(--fs-h3);font-weight:var(--fw-bold);line-height:var(--lh-heading)}
.pcard p{color:var(--texto-lead);font-size:var(--fs-body);line-height:var(--lh-body)}
.secondary-cta{text-align:center;margin-top:var(--space-7)}
.secondary-cta .cta{white-space:normal;line-height:1.3;text-align:center;max-width:100%;padding-block:.85rem}

/* ── REFRAME ── */
.reframe{border-top:1px solid var(--borda);border-bottom:1px solid var(--borda);text-align:center} /* ritmo = CHASSI */
.reframe-live{margin-bottom:var(--space-4)}
/* 25/ago · o par etiqueta+selo do .reframe ADOTA o agrupamento que o heroi ja tem (.hero__sticker-row,
   l.237) em vez de ganhar classe nova. Antes eles caiam na mesma linha por fluxo inline, com 4,7px de
   folga contra os 16px do heroi (medido pelo juiz visual L2 em 25/ago). Centralizado porque .reframe e
   text-align:center e flex ignora text-align. Escopo .reframe: a home nao tem secao .reframe, entao
   raio de impacto zero na copy-mae. */
.reframe .hero__sticker-row{justify-content:center;margin-bottom:var(--space-4)}
.reframe .hero__sticker-row .reframe-live{margin-bottom:0}
.reframe h2{font-size:var(--fs-h2);font-weight:var(--fw-bold);line-height:var(--lh-heading);max-width:18ch;margin:0 auto var(--space-4)}
.reframe .lede{font-size:var(--fs-body-lg);color:var(--texto-lead);max-width:34ch;margin:0 auto var(--space-4);font-weight:var(--fw-medium)}
.reframe .body p{color:var(--texto-lead);max-width:52ch;margin:0 auto var(--space-3)}
.reframe .body .stand{color:var(--texto);font-weight:var(--fw-semibold)}
.reframe .reframe-close{font-size:var(--fs-body-lg);color:var(--texto);font-weight:var(--fw-medium);line-height:1.4;max-width:32ch;margin:var(--space-4) auto 0}
.reframe .reframe-close strong{color:var(--texto);font-weight:var(--fw-bold)}
.reframe .arrow{font-size:var(--fs-h3);font-weight:var(--fw-bold);margin:var(--space-5) auto;max-width:24ch;color:var(--texto)}

/* ── CONTRAST (antes ↔ depois) ──────────────────────────────────────────────
   A coluna DEPOIS não ganha cor: ganha BRILHO e SUPERFÍCIE. O rótulo do antes
   fica em --texto-2 e o do depois em --texto (o degrau mais claro), e só o bloco
   do depois tem cartão. A separação continua inteira sem um hue. */
.contrast{border-top:1px solid var(--borda)} /* ritmo = CHASSI */
.contrast .section-head{margin-bottom:var(--space-6)}
.contrast .vs{font-style:italic;color:var(--texto-2);font-weight:var(--fw-medium);font-size:.85em;margin:0 .25em}
/* (21/ago) a coluna da lista (sem cartão) é mais baixa que o cartão do "depois": com align start
   ela grudava no topo e sobrava um vão morto embaixo à esquerda. A receita: os RÓTULOS alinham
   no topo (stretch, o default do grid) e a LISTA centra no vão que sobra (margin-block auto). */
.contrast-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5);max-width:880px;margin-inline:auto}
.contrast-col:not(.contrast-col--after){display:flex;flex-direction:column}
.contrast-col:not(.contrast-col--after) .contrast-list{margin-block:auto}
.contrast-col .contrast-label{font-size:.7rem;font-weight:var(--fw-bold);letter-spacing:var(--letra-caps);text-transform:uppercase;color:var(--texto-2);margin-bottom:var(--space-4);text-align:center}
.contrast-col--after .contrast-label{color:var(--texto)}
.contrast-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:.7rem}
.contrast-list li{font-size:.95rem;color:var(--texto-2);padding-left:1.6rem;position:relative;line-height:1.45}
.contrast-list li::before{content:'×';position:absolute;left:0;top:0;color:var(--texto-3);font-weight:var(--fw-bold);font-size:1.1rem;line-height:1}
.contrast-box{border:1px solid var(--borda);background:var(--superficie);border-radius:var(--raio-flutuante);padding:var(--space-5)}
.contrast-after-h{font-size:var(--fs-h3);font-weight:var(--fw-extra);color:var(--texto);text-align:center;margin-bottom:var(--space-3)}
.contrast-after-body{text-align:center;font-size:var(--fs-body-lg);color:var(--texto);margin-bottom:var(--space-4);font-weight:var(--fw-medium)}
.contrast-after-eq{text-align:center;padding-top:var(--space-4);border-top:1px solid var(--borda-forte);font-size:var(--fs-body);color:var(--texto-lead)}
.contrast-after-eq strong{color:var(--texto);font-weight:var(--fw-bold)}

/* ── PROOF · cidades/estados ── */
.proof-cities{border-top:1px solid var(--borda);text-align:center} /* ritmo = CHASSI */
.proof-cities .eyebrow{margin-bottom:var(--space-3)}
.proof-cities .proof-headline{font-size:var(--fs-h3);font-weight:var(--fw-bold);line-height:var(--lh-heading);margin-bottom:var(--space-5)}
.cities{list-style:none;display:flex;flex-wrap:wrap;gap:.55rem;justify-content:center;padding:0;max-width:560px;margin-inline:auto}
.cities li{font-size:.85rem;font-weight:var(--fw-semibold);color:var(--texto-lead);padding:.4rem 1rem;border:1px solid var(--borda);border-radius:var(--raio-pill);background:var(--superficie);letter-spacing:.05em}

/* ── PROOF · carrossel de logos de cliente (marquee · spec assets/partners/_PROMPT-PAGINA-CARROSSEL.md) ── */
.proof{border-top:1px solid var(--borda)} /* ritmo = CHASSI */
.proof__eyebrow{display:block;text-align:center;color:var(--texto-2);font-size:var(--fs-eyebrow);font-weight:var(--fw-semibold);letter-spacing:var(--letra-caps);text-transform:uppercase;margin-bottom:var(--space-5)}
.proof__viewport{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.proof__track{display:flex;align-items:center;gap:clamp(40px,7vw,64px);width:max-content;list-style:none;margin:0;padding:0;animation:proof-scroll 48s linear infinite}
.proof__track:hover,.proof__track:focus-within{animation-play-state:paused}
.proof__track li{flex-shrink:0}
/* opacity aqui é sobre IMAGEM (logo de cliente), não sobre texto: a lei "nunca opacity em
   texto" não alcança asset gráfico. */
.proof__track img{height:28px;width:auto;opacity:.78;transition:opacity var(--motion-base) var(--ease-standard)}
.proof__track img:hover{opacity:1}
/* ── A PROVA SOCIAL NO TEMA CLARO ──────────────────────────────────────────
   O DEFEITO: a faixa apontava pra `assets/partners/creme/`, tratado no #E9DCC9 do mundo
   antigo. Sobre a pagina clara (#F6F7F8) isso media 1,12:1 — as 18 academias que sao a
   PROVA da casa sumiam justo na tela que precisa delas. Agora a fonte e `partners/claro/`
   (#F6F7F8, certo pro escuro, onde media 8,77:1) e o tema claro INVERTE.
   POR QUE INVERSAO, E NAO O PAR DE ASSET (que e o mecanismo do wordmark logo acima):
   sao 18 logos, e a esteira e CLONADA por JS pra rodar o marquee — o par viraria 72
   `<img>` num elemento animado, e `<img>` de logo de parceiro nao aceita mask sem eu
   cravar a largura de cada um a mao (18 aspect-ratios digitados que apodrecem no primeiro
   re-corte de asset · a geometria ja vive no PNG). A inversao e uma linha, nao acrescenta
   no nenhum, e e EXATA por construcao aqui: estes assets sao silhueta CHAPADA de um unico
   tom (o `booot_logo_treat.py` da casa os achata), entao inverter #F6F7F8 da #090807, que
   e preto de logo de parceiro — nao a assinatura do BOOOT, onde a cor exata manda. A cor
   renderizada da faixa ja nao era um token cru de qualquer forma: o `opacity:.78` acima
   sempre a entregou como mistura.
   ⚠️ A REGRA PRESSUPOE SILHUETA MONOCROMATICA. Logo de academia COLORIDO entrando em
   `partners/claro/` sai invertido em cor berrante no tema claro; o tratamento da casa
   (`assets/partners/partner-logo-treatment.md`) e quem garante o achatamento. */
.tema-claro .proof__track img{filter:invert(1)}
@keyframes proof-scroll{to{transform:translateX(-50%)}}
@media(max-width:480px){.proof__track img{height:22px}}
@media(prefers-reduced-motion:reduce){.proof__viewport{overflow-x:auto;overflow-y:hidden}.proof__track{animation:none}}

/* ── FOUNDER · foto fundida no fundo (sem quadrado) ──────────────────────
   BLEND RULE (salvo · da LP do Samuel): mix-blend-mode:lighten funde a foto de
   fundo escuro na página; pixels mais escuros que o fundo somem, rosto/pele ficam.
   NUNCA altere o --pagina pra resolver foto. Use esta regra.
   ──────────────────────────────────────────────────────────────────────── */
.founder{border-top:1px solid var(--borda)} /* ritmo = CHASSI */
.founder-row{display:flex;align-items:center;gap:var(--space-6);justify-content:center;max-width:760px;margin-inline:auto}
.founder-photo-blend{width:clamp(220px,30vw,300px);aspect-ratio:1;flex-shrink:0;object-fit:cover}
/* ⚠️ O CÍRCULO SAIU DO TEMA ESCURO POR ORDEM DIRETA DO DONO (22/ago), que SUPERSEDE a ordem de 16/ago
   registrada logo abaixo (registro histórico: não se reescreve). Verbatim: "Eu queria que saísse esse
   círculo... Um círculo que é escuro no escuro... Eu deixaria a foto solta."

   E não é só gosto: virou REDUNDANTE quando a peça canônica passou a assar o fundo. Medido em 22/ago,
   todo pixel de borda de `_MARCA/assets/png/avatar-founder.png` é RGB(14,18,22) = #0E1216 com alpha 255,
   que é o valor EXATO de `--booot-cinza-000`, que é `--pagina` no tema escuro. O `background` pintava,
   sob um PNG opaco, a cor que o PNG já tinha; o raio e o anel recortavam uma foto cujo fundo já era o
   fundo da página. Sem eles, a foto funde na página com zero borda visível: byte a byte, a mesma cor.

   O CÍRCULO SOBREVIVE NO TEMA CLARO, e ali ele ganha o posto: contra o quase-branco de `.tema-claro` o
   mesmo PNG opaco seria um RETÂNGULO escuro, que é o defeito exato que a ordem de 16/ago consertava.
   Medalhão é escolha; bloco preto é bug. Nenhuma rota viva junta as duas coisas hoje (só a analise-booot
   usa `.tema-claro`, e ela tem avatar próprio), então esta regra mantém a classe portátil em vez de
   pintar pixel de hoje. Apagar as 3 declarações SEM escopar reabriria o defeito de 16/ago em silêncio. */
.tema-claro .founder-photo-blend{border-radius:50%;background:var(--booot-cinza-000);border:1px solid var(--borda)}
/* ⚠️ O CÍRCULO COM O FUNDO ESCURO É ORDEM DIRETA DO DONO (16/ago), e ele resolve num gesto o
   defeito que a varredura tinha achado. Verbatim: "Dai coloca minha foto de fundador dentro de um
   circulo com o fundo padrão escuro", com foto de referência.

   O QUE HAVIA AQUI, e por que morreu: `mix-blend-mode:lighten` sobre o recorte transparente.
   `lighten` fica com o mais CLARO entre foto e fundo. Sobre o carvão antigo isso guardava o rosto e
   derretia a camiseta escura, que é o efeito desejado. Sobre a página quase-branca do tema claro
   ele INVERTE de sentido: quase todo pixel do Samuel é mais escuro que o fundo, o fundo vence, e o
   fundador SOME da página em 3 rotas (/, /panorama, /reuniao). O remendo tentado (`normal` no tema
   claro) devolvia o retrato, mas com a camiseta recortada contra o branco, que é o oposto da lei
   `D-FOTO-DO-FUNDADOR-FUNDE-NO-FUNDO-16AGO`.

   POR QUE O CÍRCULO É MELHOR QUE QUALQUER BLEND, e não é só gosto: ele CARREGA O PRÓPRIO FUNDO.
   A peça deixa de depender da cor da página, então a mesma foto funciona no claro, no escuro, num
   post, num deck e numa rede social, sem uma regra por superfície. É a lei ESTADO VIVO aplicada a
   pixel: uma fonte, nenhuma variante por contexto.

   E A FOTO AGORA É A PEÇA CANÔNICA (`_MARCA/assets/png/avatar-founder.png`), a mesma que o dono
   aprovou e que já traz a camiseta fundida no grafite. O `object-fit:cover` recorta o quadrado no
   círculo sem deformar. Some daqui o `filter:contrast()`: o ajuste de tom mora no gerador
   (`_MOTOR/render-icones-marca.mjs`, passo 6), medido, e não numa folha de estilo, que é onde ele
   apodrecia sem ninguém ver. */
.founder-name{font-size:var(--fs-h3);font-weight:var(--fw-bold);line-height:1.1}
.founder-role{font-size:.74rem;font-weight:var(--fw-semibold);letter-spacing:var(--letra-caps);text-transform:uppercase;color:var(--texto-2);margin:.45rem 0 .8rem}
.founder-line{color:var(--texto-lead);font-size:var(--fs-body);max-width:50ch;line-height:1.55}
.founder-line strong{color:var(--texto);font-weight:var(--fw-semibold)}

/* ── WHAT · cards ──────────────────────────────────────────────────────────
   O CARD EM DESTAQUE (.card--ignicao) PERDEU O CONTORNO LARANJA e passou a se
   destacar pelo mecanismo que o próprio sistema tem: sobe UM degrau de
   superfície (--superficie → --superficie-2) e ganha a borda forte. Elevação por
   COR é como o escuro do OURO separa plano de fundo, e ela lê à distância sem
   gastar o acento da tela. Com isso 6 overrides do card de destaque (ícone,
   rótulo, h3, parágrafo, badge e hover) viraram idênticos ao card base e foram
   DELETADOS, não neutralizados: zero-resíduo. */
.section-what{border-top:1px solid var(--borda)} /* ritmo = CHASSI */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);margin-top:var(--space-6)}
.card{background:var(--superficie);border:1px solid var(--borda);border-radius:var(--raio-flutuante);padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-2);transition:border-color .3s ease,transform .3s ease;position:relative;box-shadow:var(--sombra-cartao)}
.card:hover{border-color:var(--borda-forte);transform:translateY(-3px)}
/* icone de card (line-icon · herda a cor do rótulo, um degrau abaixo do texto) */
.card__ic{width:30px;height:30px;color:var(--texto-2);margin-bottom:.4rem}
.card__ic svg{width:100%;height:100%;display:block;stroke:currentColor}
.card .k{font-size:.72rem;font-weight:var(--fw-semibold);letter-spacing:var(--letra-caps);text-transform:uppercase;color:var(--texto-2)}
/* titulo de card = fs-body-lg (17-19px) + semibold · NUNCA fs-h3 (lei de densidade web · reusa token existente) */
.card h3{font-size:var(--fs-body-lg);font-weight:var(--fw-semibold);line-height:var(--lh-heading);margin-top:.2rem}
.card p{color:var(--texto-lead);font-size:var(--fs-body);line-height:var(--lh-body);margin-top:.4rem}
/* densidade: lead forte + detalhe que recua (hierarquia por DEGRAU de texto · 1 ideia por card) */
.card p .lead{display:block;color:var(--texto)}
.card p .det{display:block;margin-top:.5rem;font-size:.85em;line-height:1.45;color:var(--texto-2)}
.card p .det:empty{display:none;margin:0}
.card .exclusive{display:inline-block;font-size:.65rem;font-weight:var(--fw-bold);letter-spacing:var(--letra-caps);text-transform:uppercase;color:var(--texto-2);border:1px solid var(--borda-forte);padding:.2rem .5rem;border-radius:.4rem;margin-top:.4rem;align-self:flex-start}
.card--ignicao{background:var(--superficie-2);border-color:var(--borda-forte)}

/* ── FAQ accordion ────────────────────────────────────────────────────────
   O ESTADO ABERTO não é mais um wash laranja atrás da seta: a seta já GIRA 180°
   e agora o disco dela sobe um degrau de superfície. Rotação + elevação dizem
   "aberto" sem hue, e funcionam pra quem não distingue cor. */
.faq{border-top:1px solid var(--borda)} /* ritmo = CHASSI */
.faq-head{text-align:center;margin-bottom:var(--space-6)}
.faq-head h2{font-size:var(--fs-h2);font-weight:var(--fw-bold);line-height:var(--lh-heading);margin-top:var(--space-3)}
.faq-list{max-width:680px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--borda)}
.faq-item:first-child{border-top:1px solid var(--borda)}
.faq-q{width:100%;background:none;border:none;color:var(--texto);text-align:left;padding:var(--space-4) 0;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);font-size:1rem;font-weight:var(--fw-semibold);line-height:1.4}
.faq-q .num{font-size:.8rem;font-weight:var(--fw-bold);color:var(--texto-2);min-width:1.5em}
.faq-q .arrow{width:24px;height:24px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--superficie-2);transition:transform .3s ease,background .3s ease}
.faq-item.open .faq-q .arrow{transform:rotate(180deg);background:var(--flutuante)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s cubic-bezier(.16,1,.3,1),padding .35s ease}
.faq-item.open .faq-a{max-height:340px;padding-bottom:var(--space-4)}
.faq-a p{color:var(--texto-lead);padding-left:2em;font-size:var(--fs-body);line-height:var(--lh-body)}

/* ── CLOSING · bigidea ── */
.closing{border-top:1px solid var(--borda);text-align:center} /* ritmo = CHASSI (fecho = lg embaixo) */
/* (26/ago) O RITMO DO FECHO E DO FLUXO, NUNCA DA POSICAO DE CADA PECA. Padrao de mercado adotado:
   Stack / lobotomized owl (`> * + *` · Heydon Pickering · every-layout.dev/layouts/stack) - o espaco
   mora ENTRE irmaos, entao ele existe em QUALQUER ordem. Antes, cada peca carregava margem de UM lado
   so (`.cta` so margin-top, `.closing-label` so margin-bottom), e isso so era correto enquanto o CTA
   fosse o ULTIMO filho: bastou uma pagina por conteudo depois dele pra ele colar (o dono viu na LP da
   Reuniao). O render da home NAO muda: os 3 vaos dela dao os mesmos space-6 / space-2 / space-6. */
.closing .wrap > * + *{margin-block-start:var(--space-6)}
.closing .wrap > .closing-label + .bigidea{margin-block-start:var(--space-2)} /* rotulo + manchete = um par */
.closing .risk-reversal{font-size:var(--fs-body);color:var(--texto-lead);max-width:48ch;margin-inline:auto;line-height:1.55}
.closing .risk-reversal strong{color:var(--texto);font-weight:var(--fw-semibold)}
/* (21/ago) o CTA desceu pra DEPOIS da bigidea: a página fechava com a manchete grande e nenhuma
   ação embaixo dela (o botão ficava ANTES, e quem chegava ao fim de verdade não tinha pra onde ir).
   Padrão de mercado do fecho: manchete → ação. Segue 1 CTA primário na seção. */
.closing .closing-label{font-size:var(--fs-eyebrow);font-weight:var(--fw-semibold);letter-spacing:var(--letra-caps);text-transform:uppercase;color:var(--texto-2)}
.closing .bigidea{font-size:clamp(1.75rem,4.5vw,3rem);font-weight:var(--fw-extra);font-stretch:var(--largura-display);letter-spacing:var(--letra-display);color:var(--texto)}

/* ── FOOTER ── */
.site-footer{border-top:1px solid var(--borda);padding-block:var(--space-6)}
.site-footer .wrap{display:flex;flex-direction:column;gap:var(--space-4);align-items:center;text-align:center;max-width:900px}
/* o logo se aplica como É: saiu o `opacity:.85` que rebaixava a assinatura da marca no rodapé */
.site-footer .logo{height:26px}
.site-footer .legal{font-size:.8rem;color:var(--texto-2);display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.3rem 1.4rem}
.site-footer a{color:var(--texto-2);text-decoration:none;border:0;min-height:44px;display:inline-flex;align-items:center;transition:color .2s}
.site-footer a:hover{color:var(--texto)}

/* ── MODAL · 3 passos (form) ──────────────────────────────────────────────
   O modal FLUTUA, então ele usa o mecanismo de elevação do escuro inteiro:
   véu da página + --sombra-flutuante + cartão --superficie, e os controles de
   dentro sobem pra --superficie-2 / --flutuante. Assim a escada nunca se inverte
   (página 000 → modal 010 → controle 100 → controle ativo 200). */
.modal-overlay{position:fixed;inset:0;z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--pagina) 82%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);opacity:0;pointer-events:none;transition:opacity .3s ease;padding:var(--space-4);overflow-y:auto}
.modal-overlay.open{opacity:1;pointer-events:auto}
.modal{width:100%;max-width:480px;background:var(--superficie);border:1px solid var(--borda-forte);border-radius:var(--raio-flutuante);padding:var(--space-6) var(--space-5);position:relative;transform:translateY(20px);transition:transform .35s cubic-bezier(.16,1,.3,1);margin:auto;box-shadow:var(--sombra-flutuante)}
.modal-overlay.open .modal{transform:none}
.modal-close{position:absolute;top:.75rem;right:.75rem;background:var(--superficie-2);border:1px solid var(--borda-forte);color:var(--texto-2);font-size:1.4rem;cursor:pointer;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background .2s,color .2s,transform .15s;z-index:2;line-height:1}
.modal-close:hover{background:var(--flutuante);color:var(--texto);transform:scale(1.05)}
.modal-eyebrow{text-align:center;font-size:.74rem;font-weight:var(--fw-bold);letter-spacing:var(--letra-caps);text-transform:uppercase;color:var(--texto-2);margin-bottom:.85rem}
/* PROGRESSO por LUMINÂNCIA: o passo cumprido é o degrau mais claro da tela, o
   pendente é uma borda. Antes era laranja contra creme/.12, ou seja: um hue fazia
   o trabalho que o contraste faz melhor (e que funciona sem enxergar cor). */
.modal-progress{display:flex;justify-content:center;gap:.4rem;margin-bottom:var(--space-5)}
.modal-progress .dot{width:28px;height:5px;border-radius:3px;background:var(--borda-forte);transition:background .25s}
.modal-progress .dot.on{background:var(--texto)}
.modal h2.modal-title{font-size:1.5rem;font-weight:var(--fw-bold);line-height:1.2;text-align:center;margin-bottom:.5rem}
.modal .modal-sub{text-align:center;color:var(--texto-lead);font-size:.95rem;margin-bottom:var(--space-5);line-height:1.5}
.modal-step{display:none;flex-direction:column;gap:.7rem}
.modal-step.on{display:flex}
.opt-btn{width:100%;background:var(--superficie-2);border:1px solid var(--borda);border-radius:var(--raio-pill);padding:.95rem 1.2rem;color:var(--texto);font-size:.95rem;font-weight:var(--fw-semibold);cursor:pointer;text-align:center;transition:border-color .2s,background .2s,transform .15s}
.opt-btn:hover{border-color:var(--borda-forte);background:var(--flutuante)}
.opt-btn:active{transform:scale(.99)}
/* TELA 2 do FORM 2 · cards de contrato. O contrato em destaque usa a MESMA
   mecânica do .card--ignicao (um degrau de superfície + borda forte), pra que a
   página inteira tenha um só jeito de dizer "este aqui". */
.contratos{display:flex;flex-direction:column;gap:.9rem;margin-bottom:.5rem}
.contrato{position:relative;border:1px solid var(--borda);border-radius:var(--raio-flutuante);padding:1.35rem 1.25rem 1.2rem;background:var(--superficie-2);text-align:left}
.contrato--destaque{border-color:var(--borda-forte);background:var(--flutuante)}
/* o selo é um CARIMBO: fundo no degrau mais claro, texto na cor da página. Não é
   ouro (o ouro do Portal é assinatura, número de resultado e texto de acento) e
   não vira um segundo botão: o tamanho e a caixa alta o mantêm como rótulo. */
.contrato-badge{position:absolute;top:-10px;left:1.25rem;background:var(--texto);color:var(--pagina);font-size:.62rem;font-weight:var(--fw-bold);letter-spacing:.04em;text-transform:uppercase;padding:.18rem .6rem;border-radius:var(--raio-pill)}
.contrato h3{font-size:1.05rem;font-weight:var(--fw-bold);margin-bottom:.25rem}
.contrato-preco{font-size:1.6rem;font-weight:var(--fw-extra);color:var(--texto)}
.contrato-preco small{font-size:.8rem;font-weight:var(--fw-medium);color:var(--texto-2)}
/* o preço antigo se marca pelo line-through, e só. A regra `.contrato-nota s{opacity:.5}`
   que morava aqui era opacity em TEXTO, proibida pela lei da casa, e o preço é justamente
   o dado que não pode ficar ilegível. */
.contrato-nota{font-size:.83rem;color:var(--texto-2);margin:.2rem 0 .9rem}
.contrato .cta{width:100%;justify-content:center}
.field{margin-bottom:var(--space-3)}
.field label{display:block;font-size:.8rem;font-weight:var(--fw-semibold);margin-bottom:.4rem;color:var(--texto-lead)}
.field label .opt{font-weight:var(--fw-regular);color:var(--texto-2)}
.field input{width:100%;background:var(--campo-fundo);border:1px solid var(--campo-borda);border-radius:var(--raio-controle);padding:.8rem 1rem;color:var(--texto);font-size:.95rem;outline:none;transition:border-color .2s}
.field input:focus{border-color:var(--campo-borda-foco)}
.field input::placeholder{color:var(--texto-3)}
.field .wa-row{display:flex;gap:.5rem}
.field .wa-row .cc{flex-shrink:0;width:90px;background:var(--campo-fundo);border:1px solid var(--campo-borda);border-radius:var(--raio-controle);padding:.8rem .7rem;display:flex;align-items:center;justify-content:center;gap:.3rem;font-size:.9rem;color:var(--texto-lead);font-weight:var(--fw-semibold)}
.field .wa-row input{flex:1}
.form-foot{margin-top:var(--space-4)}
.form-foot .cta{width:100%;justify-content:center}
/* nota e aviso legal ficam no MESMO degrau de cor (os .42 e .32 de alpha reprovavam
   contraste em corpo miúdo) e se separam por TAMANHO e MEDIDA: .78rem largo, .68rem
   estreito em 32ch. Hierarquia por tipografia, não por sumiço. */
.form-foot .form-note{display:block;text-align:center;font-size:.78rem;color:var(--texto-2);margin-top:.85rem}
.form-foot .form-disclosure{display:block;text-align:center;font-size:.68rem;color:var(--texto-2);margin-top:.5rem;max-width:32ch;margin-inline:auto;line-height:1.4}
.modal-back{display:inline-block;margin-top:var(--space-3);background:none;border:none;color:var(--texto-2);font-size:.8rem;cursor:pointer;text-align:center;width:100%}
.modal-back:hover{color:var(--texto)}
/* sucesso é estado SEMÂNTICO, não acento de marca: o disco fica neutro e o anel
   usa --sucesso-texto. Assim a confirmação não gasta o ouro da tela. */
.modal-success .success-icon{width:64px;height:64px;border-radius:50%;background:var(--superficie-2);border:1px solid var(--sucesso-texto);display:flex;align-items:center;justify-content:center;margin:0 auto var(--space-3)}
.modal-success .when{margin:var(--space-3) auto var(--space-4);font-size:.95rem;color:var(--texto-lead);text-align:center}
.modal-success .when strong{display:block;color:var(--texto);font-weight:var(--fw-bold);font-size:1.05rem;margin-bottom:.2rem}
.modal-success .cta--wa{align-self:center}

/* ── RESPONSIVE ── */
@media(max-width:860px){
  .hero__copy,.hero h1{max-width:100%}
  .problem-grid,.cards{grid-template-columns:1fr}
  .contrast-grid{grid-template-columns:1fr;gap:var(--space-6)}
  .founder-row{flex-direction:column;text-align:center;gap:var(--space-4)}
  .founder-line{max-width:100%}
}
@media(max-width:480px){
  .tag-pill{display:none}
  .header-right .cta--sm{font-size:.78rem;padding:.5rem 1rem;min-height:44px}
  /* eyebrow do hero em 1 LINHA no celular (_LEIS-B2B: eyebrow <=1 linha · media 2 linhas a 375px, 21/ago):
     o traço decorativo sai e o tracking afrouxa; o texto é o mesmo. */
  .hero .eyebrow{font-size:.68rem;letter-spacing:.09em}
  .hero .eyebrow::before{display:none}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  /* ⛔ A ESCOTILHA `data-motion="essencial"` (nasceu do defeito da rodada 5 do dono, 13/ago).
     O `.lp *{animation:none!important}` estava certo pra DECORAÇÃO e errado pra SINAL. Ele matava,
     com !important genérico, toda animação de toda página da casa quando o sistema pede menos
     movimento, e nenhuma regra escrita na página conseguia vencer. Foi assim que a tela "Estamos
     montando a sua conta" chegou ao dono PARADA (medido: `document.getAnimations()` = [] no
     navegador dele), e ele descreveu como "não aparece nenhuma animação... só ficou uma bolinha
     mínima ali piscando". Nenhum ajuste na página ia alcançar isso: a causa mora AQUI.
     A preferência do usuário é sobre risco VESTIBULAR (translação, paralaxe, giro, zoom), não sobre
     proibir um cross-fade de cor que informa "sua conta está sendo montada". Barra de progresso que
     congela não é acessibilidade, é tela quebrada, e quem depende de menos movimento é justamente
     quem menos pode ficar sem saber se a página morreu.
     Então a regra segue matando tudo por padrão e só poupa quem se declara SINAL, um por um, no
     próprio elemento. É opt-in explícito: some por default, sobrevive só quando alguém escreveu que
     aquilo informa estado. Mesma família da exceção do `.proof__track` logo abaixo, que já existia. */
  .lp *:not([data-motion="essencial"]){transition:none!important;animation:none!important}
  .reveal{opacity:1;transform:none}
  .lp .proof__track{animation:proof-scroll 80s linear infinite!important}
}

/* ═══════════════════════════════════════════════════════════════════════
   LP · v1.1 ADITIVO (página de VENDAS) · só var(--token), zero hex novo.
   Componentes da página de vendas: hero com vídeo vertical (VSL), parede de
   cards de prova (entrevistas · alunos novos reais), slot de prints.
   Consumido por 1_COMERCIAL/oferta/pagina-vendas.html + pagina-provas.html.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── HERO SPLIT · copy + vídeo vertical 9:16 (empilha no mobile · copy = LCP) ── */
.hero--split .wrap{display:grid;grid-template-columns:minmax(0,1fr) clamp(240px,30vw,320px);gap:clamp(var(--space-5),5vw,var(--space-7));align-items:center}
.hero--split .hero__copy{max-width:560px}
.hero__media{display:flex;justify-content:center;width:100%}
.video-slot{position:relative;width:100%;max-width:320px;aspect-ratio:9/16;border-radius:var(--raio-flutuante);overflow:hidden;background:var(--superficie);border:1px solid var(--borda);display:flex;align-items:center;justify-content:center;box-shadow:var(--sombra-cartao)}
.video-slot video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.video-slot iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.video-slot__ph{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);text-align:center;padding:var(--space-4)}
/* o play saiu do disco laranja e virou controle ELEVADO: ele é affordance de vídeo, não a
   chamada principal da página (essa é o CTA, que agora é o objeto mais claro da tela).
   ⚠️ o glifo mora no HTML (pagina-vendas.html) e é CLARO: por isso o disco ficou escuro
   (--flutuante) em vez de branco — assim ele lê com o glifo que a página já entrega hoje E
   com o glifo repintado, sem depender de outra frente pra não sumir. */
.video-slot__play{width:64px;height:64px;border-radius:50%;background:var(--flutuante);color:var(--texto);border:1px solid var(--borda-forte);display:flex;align-items:center;justify-content:center}
.video-slot__play svg{width:22px;height:22px;margin-left:3px}
.video-slot__label{font-size:.74rem;font-weight:var(--fw-semibold);letter-spacing:var(--letra-caps);text-transform:uppercase;color:var(--texto-2)}
.video-slot__sub{font-size:.72rem;color:var(--texto-2);max-width:22ch;line-height:1.4}
@media(max-width:860px){
  .hero--split .wrap{grid-template-columns:1fr;gap:var(--space-6)}
  .hero--split .hero__copy{max-width:100%}
  .hero__media{order:2}
  .video-slot{max-width:260px}
}

/* ── PROVA WALL · cards de prova 1:1 (prova_cards/out · alunos novos reais) ── */
.prova-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:var(--space-4);margin-top:var(--space-6)}
.prova-wall--tight{grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:var(--space-3)}
.prova-card{margin:0;border-radius:var(--raio-cartao);overflow:hidden;border:1px solid var(--borda);background:var(--superficie);transition:transform var(--motion-base) var(--ease-standard),border-color var(--motion-base) var(--ease-standard)}
.prova-card:hover{transform:translateY(-3px);border-color:var(--borda-forte)}
.prova-card img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.prova-card figcaption{padding:.7rem .8rem;font-size:.73rem;line-height:1.35;color:var(--texto-2)}
.prova-card figcaption b{display:block;color:var(--texto);font-weight:var(--fw-semibold);font-size:.8rem;margin-bottom:.12rem}
.prova-more{text-align:center;margin-top:var(--space-6)}
@media(max-width:480px){.prova-wall,.prova-wall--tight{grid-template-columns:1fr 1fr;gap:var(--space-3)}}

/* ── PRINTS · cards 4:5 do engine print_cards (a prova crua do grupo · 21/ago) ──────────
   `.prints-tres` = o trio curado da home (203k · 165k · 136k) · `.prints-galeria` = a parede
   completa do /painel. O card já nasce com moldura própria (grafite + hairline no render),
   então aqui é só grid + raio + hover da casa. */
.prints-tres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4);max-width:920px;margin:var(--space-6) auto 0}
.prints-galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--space-4);margin-top:var(--space-6)}
.prints-tres figure,.prints-galeria figure{margin:0}
.prints-tres img,.prints-galeria img{width:100%;height:auto;display:block;border-radius:var(--raio-cartao);border:1px solid var(--borda);transition:transform var(--motion-base) var(--ease-standard),border-color var(--motion-base) var(--ease-standard)}
.prints-tres img:hover,.prints-galeria img:hover{transform:translateY(-3px);border-color:var(--borda-forte)}
.prints-tres figure,.prints-galeria figure{cursor:zoom-in} /* mesmos ganchos de lightbox da prova-wall */
@media(max-width:640px){.prints-tres{grid-template-columns:1fr 1fr}.prints-tres figure:first-child{grid-column:1/-1}}
/* ⚠️ `1fr 1fr` NÃO dá duas colunas iguais, e o dono pegou isso no ar em 23/ago ("os cards quebram no
   mobile"). Medido a 375px: coluna 1 com 186px e coluna 2 com 117px, alternando, com metade dos prints
   ilegíveis. A razão é do próprio CSS Grid: `1fr` é `minmax(auto,1fr)`, e esse `auto` deixa o track
   crescer até o min-content do item mais teimoso da coluna. O item teimoso é o card-vaga que ENTROU
   nesta rodada (o "Seu resultado pode estar aqui", com botão dentro): o min-content dele empurrou a
   coluna 1 pra 186px e o resto da largura sobrou pra coluna 2. Ou seja, uma peça nova quebrou o layout
   de 16 peças velhas, calada.
   O idioma que conserta é `minmax(0,1fr)`, que zera o mínimo automático, e ele JÁ ESTAVA NA CASA:
   é o que a `.prints-tres` usa na linha 609. Adotar o que a casa já tem, em vez de inventar. */
@media(max-width:480px){
  .prints-galeria{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}
}

/* ── PRINTS SLOT · estado vazio honesto (Samuel trata os prints depois) ── */
.prints-slot{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--space-4);margin-top:var(--space-5)}
.print-frame{aspect-ratio:4/5;border-radius:var(--raio-cartao);border:1px dashed var(--borda-forte);background:var(--superficie);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);text-align:center;padding:var(--space-4)}
/* icone de "imagem em breve" (nao le como card quebrado) */
.print-frame::before{content:"";width:2.2rem;height:1.7rem;border:2px solid var(--borda-forte);border-radius:.4rem;margin-bottom:.2rem}
.print-frame__label{font-size:.72rem;font-weight:var(--fw-semibold);letter-spacing:var(--letra-caps);text-transform:uppercase;color:var(--texto-2)}
.print-frame__hint{font-size:.74rem;color:var(--texto-2);max-width:26ch;line-height:1.4}

/* ── COST · âncora da Porta 3 (o custo de NÃO ter aluno novo) ── */
.cost-anchor{border:1px solid var(--borda);background:var(--superficie);border-radius:var(--raio-flutuante);padding:clamp(var(--space-5),4vw,var(--space-6));max-width:680px;margin:var(--space-6) auto 0;text-align:center;box-shadow:var(--sombra-cartao)}
.cost-anchor p{color:var(--texto-lead);font-size:var(--fs-body-lg);line-height:1.5;max-width:48ch;margin-inline:auto}
.cost-anchor .cta{margin-top:var(--space-4);padding-inline:2.2rem}
.cost-anchor strong{color:var(--texto);font-weight:var(--fw-semibold)}
/* corpo CORRIDO de 5+ linhas dentro do cartão lê alinhado à esquerda (parede central longa
   reprova o squint · 21/ago); o modificador não mexe no cartão curto, que segue centrado. */
.cost-anchor--corrido{text-align:left}
.cost-anchor--corrido p{margin-inline:0;max-width:58ch}
.cost-anchor .cost-vs{display:block;margin-top:var(--space-4);font-size:var(--fs-h3);font-weight:var(--fw-bold);color:var(--texto)}

/* ── LIGHTBOX · toca no card de prova e ele abre grande (lê no celular sem zoom) ── */
.prova-card{cursor:zoom-in}
.lightbox{position:fixed;inset:0;z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;padding:var(--space-4);background:color-mix(in srgb,var(--pagina) 95%,transparent);opacity:0;pointer-events:none;transition:opacity var(--motion-base) var(--ease-standard)}
.lightbox.open{opacity:1;pointer-events:auto}
.lightbox img{max-width:min(92vw,560px);max-height:86vh;width:auto;height:auto;border-radius:var(--raio-cartao);border:1px solid var(--borda);box-shadow:var(--sombra-flutuante)}
.lightbox__close{position:absolute;top:var(--space-4);right:var(--space-4);width:48px;height:48px;border-radius:50%;background:var(--flutuante);border:1px solid var(--borda-forte);color:var(--texto);font-size:1.7rem;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color var(--motion-fast) var(--ease-standard)}
.lightbox__close:hover{border-color:var(--texto-3)}

/* ── STACK DE VALOR · marca o que e GRATIS / R$0 (chamariz visivel) ──────────
   O "GRÁTIS" nunca dependeu da cor: a PALAVRA é o chamariz. A tag ficou com o
   texto no degrau mais claro e a borda forte, e o destaque da linha de valor sai
   pelo `.accent`, que é onde o ouro do Portal mora. */
.cmp-rows .free{color:var(--texto);font-weight:var(--fw-bold)}
.tag-free{display:inline-block;font-size:.62rem;font-weight:var(--fw-bold);letter-spacing:.06em;text-transform:uppercase;color:var(--texto);background:transparent;border:1px solid var(--borda-forte);border-radius:var(--raio-pill);padding:.1rem .5rem;margin-left:.4rem;vertical-align:middle}
.value-line{text-align:center;max-width:46ch;margin:var(--space-5) auto 0;color:var(--texto-lead);font-size:var(--fs-body-lg);line-height:1.5}
.value-line strong{color:var(--texto);font-weight:var(--fw-semibold)}
.value-line .accent{font-weight:var(--fw-semibold)}

/* ── CICLO · as 5 etapas de Alunos Infinitos como TRILHO visível (dono 21/ago: a venda nomeia
   E MOSTRA as 5 etapas · o loop é o mecanismo, então ele se DESENHA, não só se escreve).
   Chips na receita de pill da casa (borda + superfície, zero ouro); a volta (↺) fecha o loop. ── */
.ciclo{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5rem .45rem;max-width:780px;margin:var(--space-4) auto 0} /* vive FORA do .section-head (620px): numa linha só no desktop */
.ciclo-caption{margin:var(--space-3) auto 0;color:var(--texto-lead);font-size:var(--fs-body-lg);max-width:52ch;text-align:center}
.ciclo .ciclo-etapa{font-size:.82rem;font-weight:var(--fw-semibold);color:var(--texto);padding:.38rem .85rem;border:1px solid var(--borda-forte);border-radius:var(--raio-pill);background:var(--superficie);white-space:nowrap}
.ciclo .ciclo-seta{color:var(--texto-3);font-weight:var(--fw-bold);font-size:.9rem;line-height:1}
.ciclo .ciclo-volta{color:var(--texto-2);font-size:1rem}
@media(max-width:480px){.ciclo .ciclo-etapa{font-size:.74rem;padding:.3rem .65rem}}

/* ── RECONCILIAÇÃO _FONTE-PORTAL (28/jun) · novos componentes da home ── */
.founder-kicker{margin-top:var(--space-3);font-size:var(--fs-body-lg);font-weight:var(--fw-bold);color:var(--texto)}
.cmp-rows--price li span:first-child{color:var(--texto-lead)}
/* (21/ago) morreu o override que fazia o strong da coluna BOOOT ficar inline pequeno: ele
   desbalanceava os dois rodapés (a coluna da esquerda fechava com display grande e a da direita
   com texto corrido, deixando um vão de régua dupla vazia). Os DOIS rodapés agora têm a mesma
   estrutura: linha grande + sub (.cmp-foot-sub), definidas no pricing.css. */
.card .k--was{text-transform:none;letter-spacing:0;font-size:.8rem;font-weight:var(--fw-semibold);color:var(--texto-2)}
.card .k--was b{color:var(--texto);font-weight:var(--fw-bold)}
.card--wide{flex-direction:row;align-items:center;gap:var(--space-5);margin-top:var(--space-4)}
.card--wide .cw-head{flex:0 0 auto;max-width:280px;display:flex;flex-direction:column;gap:var(--space-2)}
.card--wide p{margin:0;color:var(--texto-lead)}
@media(max-width:640px){.card--wide{flex-direction:column;align-items:flex-start;gap:var(--space-3)}.card--wide .cw-head{max-width:100%}}

/* ── PROOF STATS · os 3 números públicos na home (alunos · academias · cidades) ─────────────────
   D-NUMERO-PUBLICO-CARDS-MAIS-LEGADO-MAIS-BOOOT (dono 30/jul): as 3 dimensões são compostas e
   VIVAS, e o dono pediu as 3 na home. POR QUE UMA CLASSE PRÓPRIA E NÃO O `.stat-strip`: o
   `.stat-strip` mora em `panorama.css`, que a home NÃO carrega, e são 247 linhas de padrão de
   página inteira para reusar 1 componente; além disso `pricing.css` (que a home CARREGA) já define
   `.step` e o `panorama.css` redefine, então somar os dois arquivos cria colisão latente.
   ⚠️ CORREÇÃO: a 1ª versão deste comentário dizia que a colisão era "PROVADA porque a home usa
   `.step`". Isso era FALSO (a home usa `modal-step` e `data-step`) e foi pego por verificador
   fresco. A decisão de classe própria continua certa, o motivo é o de cima.
   Faixa (não grid de 3 colunas) porque aqui os números ENTRAM na seção de prova acima dos cards:
   precisam ler como uma linha de fato, sem competir com o H2 nem com a parede de cards.

   🥇 A INVERSÃO DA REPINTURA (16/ago · o caso-escola desta folha inteira): o NÚMERO estava em
   creme chapado e o RÓTULO embaixo dele estava LARANJA. O acento da marca pintava a etiqueta e
   deixava o resultado sem destaque nenhum — hierarquia disfarçada de cor, e invertida. Agora o
   número é o ÚNICO ouro desta seção (é literalmente o "número de resultado" que a decisão do CTA
   nomeia como casa do ouro), na letra display do Archivo a 62% e peso 800; e o rótulo desceu pra
   --texto-2 e se separa por CAIXA ALTA + tracking de rótulo + tamanho micro. Cor no que importa,
   tipografia no resto. */
.proof-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-4) var(--space-7);
  margin:0 auto var(--space-6);padding-top:var(--space-5);border-top:1px solid var(--borda);max-width:760px}
.proof-stats .ps{display:flex;flex-direction:column;align-items:center;gap:.35rem;min-width:7rem}
.proof-stats .ps-n{font-size:clamp(1.8rem,5vw,2.6rem);font-weight:var(--fw-extra);line-height:1;
  font-family:var(--fonte-titulo);font-stretch:var(--largura-display);letter-spacing:var(--letra-display);
  color:var(--acento-texto);font-variant-numeric:tabular-nums;white-space:nowrap}
.proof-stats .ps-l{font-size:var(--fs-micro);font-weight:var(--fw-semibold);color:var(--texto-2);
  letter-spacing:var(--letra-caps);text-transform:uppercase;text-align:center}
/* MOBILE · vira grid de 3 colunas de propósito: com flex-wrap o 3º número caía sozinho numa 2ª linha
   (medido em 375px: 2+1, com o "cidades" órfão no centro). Nada quebrava nem cortava, mas número
   órfão em faixa de prova lê como defeito. Grid garante 1 linha, 3 colunas iguais, sem transbordo.
   O tracking do rótulo afrouxa aqui porque caixa alta + 0.14em em 3 colunas de ~100px transborda. */
@media(max-width:600px){
  .proof-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3);max-width:100%}
  .proof-stats .ps{min-width:0}
  .proof-stats .ps-n{font-size:clamp(1.35rem,8.5vw,1.9rem)}
  .proof-stats .ps-l{font-size:.62rem;letter-spacing:.06em}
}

/* ══ REVISÃO DO DONO 22/ago (D-COPY-DA-HOME-FECHADA-22AGO · gravação de design) ══ */
/* A LEI DA PALAVRA ÓRFÃ (verbatim: "deveria ser proibido ter uma palavra órfã em qualquer linha")
   · cura por CLASSE, CSS puro, degrade gracioso: balance nos títulos, pretty no corpo. Vale pras
   4 páginas do portal, que consomem esta folha (única forma visual). */
h1,h2,h3,.pill-bar b,.bigidea{text-wrap:balance}
p,li,figcaption{text-wrap:pretty}
/* hero desktop em 2 LINHAS (verbatim: "só duas linhas: tenha mais alunos, e na linha de baixo as variáveis")
   ⚠️ O `display:block` sozinho NÃO entregava as 2 linhas, e o dono pegou no ar em 23/ago: saía em TRÊS,
   com "alunos" órfã no meio. A causa não estava aqui, estava no `max-width:13ch` do `.hero h1` (linha 219):
   13ch = 311px com a display condensada, e "Tenha mais alunos" precisa de 339px. Faltavam 28px, então a
   1ª linha quebrava sozinha antes de o `.h1-giro` sequer entrar em cena.
   A CURA NÃO É UM `15ch` NOVO. Número fixo em `ch` é medida de TEXTO adivinhada no dia em que alguém
   escreveu, e ela quebra calada toda vez que a COPY muda (foi exatamente isto que aconteceu: o dono
   reescreveu a headline em 22/ago e o número de 13 ficou). Aqui em cima de 900px o `.h1-giro` JÁ força a
   quebra no lugar certo, então a medida do parágrafo virou redundante: quem decide a largura passa a ser
   o CONTEÚDO. `fit-content` se ajusta sozinho a qualquer headline futura e continua limitado pela coluna.
   Medido nos 5 nichos do rotativo x 1440/1280/960/900: 2 linhas em todos (antes: 3 em todos).
   Abaixo de 900px nada muda: o 13ch segue fazendo o trabalho dele, e o mobile já estava certo. */
@media(min-width:900px){.hero--split h1{max-width:fit-content}.hero--split h1 .h1-giro{display:block}}
/* "Pra quem é" · a frase dos 5 formatos vira CHIPS (verbatim: "o melhor jeito é distribuir os blocos")
   · mesmo desenho do chip do ciclo: uma família visual só */
.praquem-sim{margin:var(--space-5) auto 0;text-align:center;font-size:var(--fs-body-lg);font-weight:var(--fw-bold);color:var(--texto)}
.praquem-mods{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem .45rem;margin-top:var(--space-3)}
.praquem-mod{font-size:.82rem;font-weight:var(--fw-semibold);color:var(--texto);padding:.38rem .85rem;border:1px solid var(--borda-forte);border-radius:var(--raio-pill);background:var(--superficie);white-space:nowrap}
/* o ciclo EXPLICA a metodologia (verbatim: "poderia passar o dedo e ter uma explicação... não explicou
   a metodologia") · tooltip por etapa: hover no desktop, toque (focus) no mobile, texto no title tb */
.ciclo .ciclo-etapa{position:relative;cursor:help}
.ciclo .ciclo-etapa::after{content:attr(data-exp);position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%) translateY(4px);width:max-content;max-width:230px;white-space:normal;text-align:center;font-size:.78rem;font-weight:var(--fw-regular);line-height:1.45;color:var(--texto-lead);background:var(--superficie);border:1px solid var(--borda-forte);border-radius:var(--raio-cartao);padding:.5rem .7rem;opacity:0;pointer-events:none;transition:opacity var(--motion-base) var(--ease-standard),transform var(--motion-base) var(--ease-standard);z-index:5}
.ciclo .ciclo-etapa:hover::after,.ciclo .ciclo-etapa:focus-visible::after,.ciclo .ciclo-etapa:focus::after{opacity:1;transform:translateX(-50%) translateY(0)}
.ciclo .ciclo-etapa:focus{outline:none;border-color:var(--borda-forte)}
/* ⚠️ O BALÃO SAI NO CELULAR, e não é preferência: ele empurrava a página 25px pro lado. O `::after` é
   `position:absolute` dentro de um chip `position:relative` com overflow visível, e absoluto CONTRIBUI
   pro overflow rolável do documento mesmo com `opacity:0`. Medido a 375px: `.ciclo` com scrollWidth 372
   contra clientWidth 319, e o chip "Base" (49px de largura) reportando 139px de conteúdo, que é o balão
   invisível. Resultado: a home inteira andava pro lado no celular, e isso ENTROU nesta rodada, junto com
   o balão que o dono pediu.
   Não se perde informação: o mesmo texto vive no `title=` de cada chip (e no `data-exp`), e em tela de
   toque não existe passar o mouse, que é o gesto que o balão serve. Ele segue vivo no desktop. */
@media(max-width:480px){.ciclo .ciclo-etapa::after{content:none}}
/* prints na MESMA largura do grid de provas (verbatim: "tá estranho esse afunilamento") */
.prints-tres{max-width:none}
/* a nota do Pro linka a Análise (Doc 14.6j: "Faça sua análise agora.") */
.plano-note-link{color:inherit;text-decoration:underline;text-underline-offset:2px}
.plano-note-link:hover{color:var(--texto)}
/* painel · a VAGA na última linha da galeria de prints (gravação do dono 22/ago: "mesmo se sobrar ou
   não espaço, deveria ser um card placeholder, 'o seu resultado pode estar aqui'... você põe um desse
   e parece que funciona") · consumidor: painel-booot.html */
/* `aspect-ratio:4/5` igual à irmã `.print-frame` (linha 620), e não é enfeite: a galeria é
   `auto-fill minmax(230px,1fr)`, então o nº de colunas muda com a largura, e sempre que
   (nº de cards) % (nº de colunas) == 1 a vaga cai SOZINHA na última linha. Sem proporção
   própria ela não tem irmão pra esticar junto e colapsa na altura do texto, deixando uma
   célula vazia do lado: é o "ficar sem nada parece que a gente errou" que o dono pediu pra
   evitar quando mandou fechar a última linha da galeria. */
.print-vaga{aspect-ratio:4/5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-3);border:1px dashed var(--borda-forte);border-radius:var(--raio-cartao);background:var(--superficie);padding:var(--space-5);text-align:center}
.print-vaga p{font-weight:var(--fw-semibold);color:var(--texto-lead);max-width:20ch;margin:0}
/* MOBILE · o card-vaga FECHA a última linha em vez de sentar sozinho ao lado de uma célula vazia (o
   pedido do dono era fechar a linha, e célula vazia é o "parece que a gente errou"). Em 2 colunas com
   17 peças ele sempre sobra sozinho. Ocupando a linha inteira a proporção 4/5 deixaria uma caixa de
   400px de altura quase vazia, então aqui a altura volta a ser a do conteúdo.
   ⚠️ Esta regra mora AQUI, e não junto das outras de mobile lá em cima, por um motivo medido: a base
   `.print-vaga{aspect-ratio:4/5}` fica DEPOIS no arquivo, e com a mesma especificidade quem vem depois
   vence. A versão anterior desta cura ficou sem efeito e a caixa saiu com 399px de altura. */
@media(max-width:480px){.print-vaga{grid-column:1/-1;aspect-ratio:auto}}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   REVISÃO 03 DO DONO (23/ago · ~/Desktop/comercial-revisao-03 · vídeo sincronizado com os 24 prints)
   Cada regra abaixo carrega o item da pauta e o verbatim que a pediu.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ITEM 21 · O OURO VOLTA A DESCER A PÁGINA, PELO FILETE E NÃO PELO TEXTO.
   Verbatim: "senão a página só vai ter ouro no hero e depois o outro ouro só vai aparecer nessa
   frase... poderia ter o ouro nessas tagzinhas". O diagnóstico está certo, medido: o ouro some
   depois do hero. A execução literal, não: a home tem 12 eyebrows, e doze em ouro fazem o ouro
   virar a cor da ESTRUTURA em vez do acento, contra a fala dele mesmo em 03:08 ("o nosso objetivo
   é ter poucos elementos ouro na página"). Então o ouro vai no traço que já precede cada eyebrow:
   12 marcas descendo a página, uma por seção, e o ouro TEXTUAL continua raro.
   ⚠️ Limite medido: o traço some em max-width:480px, mas SÓ no hero (`.hero .eyebrow::before`),
   que já tem ouro no botão e no número. As outras 11 seções mantêm no mobile. */
.eyebrow::before{background:var(--acento)}

/* ITEM 17 · O CHECK NO LUGAR DE "incluído"/"grátis".
   Verbatim: "só um check, não mais uma coisa para a pessoa ler". O símbolo é ouro porque é o valor
   da coluna do BOOOT; o `aria-label` no HTML é o que um leitor de tela ouve. */
.cmp-check{color:var(--acento);font-weight:var(--fw-bold);font-size:1.15em;line-height:1}

/* ITEM 14 · A CAIXA DA DIREITA DE "É SIMPLES" ESVAZIA, DE PROPÓSITO.
   Verbatim: "a caixa fica muito mais vazia, justamente fazendo contraste com o peso da lista do que
   não é mais problema seu... quase que um slogan". O respiro É o argumento: peso à esquerda, vazio
   à direita. Sem o padding extra a caixa encolhe junto do texto e o contraste morre. */
.contrast-box--slogan{display:flex;align-items:center;justify-content:center;min-height:100%;padding:var(--space-7) var(--space-5)}
.contrast-box--slogan .contrast-after-h{margin-bottom:0;line-height:1.25}

/* ITEM 1 · O CTA DO VÍDEO DESCEU PRA BAIXO DO BOTÃO.
   Verbatim: "isso não vai aparecer aqui porque ele está sendo colocado em uma capa". Dentro do slot
   9:16 a capa do player cobre o texto, então a linha mora aqui fora. A caixa 9:16 fica livre pro
   embed do VTurb. Fica discreta: é convite, não segundo CTA disputando com o botão. */
.hero-video-cta{margin-top:var(--space-3);font-size:.86rem;color:var(--texto-2);line-height:1.45}
.hero-video-cta strong{color:var(--texto);font-weight:var(--fw-semibold)}

/* DECISÃO A DA REVISÃO 03 · AS PÍLULAS DE "PRA QUEM É" FICAM, A QUEBRA DELAS É QUE MUDA.
   Ele perguntou (não mandou): "a gente tem que pensar melhor nessas pílulas, se elas são a melhor
   maneira". Recomendei manter: são o único elemento escaneável de uma seção pesada de texto.
   O defeito não é o formato, é a quebra, e eu medi no navegador antes de propor:
     · as 5 pílulas somam 663px e o container tem 566px em TODA largura de desktop (1440 a 768),
       então "as 5 numa linha" é impossível sem encolher a peça ~15%;
     · a quebra caía 4+1, deixando "no seu Funcional" sozinho na segunda linha, que é a regra da
       palavra órfã aplicada a ELEMENTO em vez de palavra, a mesma que ele invocou 2x em 23/ago;
     · a 375px era pior ainda: 1+2+1+1, quatro linhas irregulares.
   Larguras medidas: 138 · 128 · 116 · 117 · 136, gap 7.2px. As 3 primeiras somam 396px e as 4
   primeiras 521px, então um teto ENTRE os dois força 3+2 com as duas linhas centradas. 28rem
   (448px) é o meio, com folga dos dois lados pra variação de fonte. */
.praquem-mods{max-width:28rem;margin-left:auto;margin-right:auto}
@media(max-width:480px){
  /* a 375px o container tem 253px e duas pílulas pedem 273px: 8% a menos de caixa faz caber 2 por
     linha e mata a escada de 4 linhas. O texto não muda. */
  .praquem-mods{max-width:none}
  .praquem-mod{font-size:.76rem;padding:.34rem .68rem}
}