/* =============================================================================
   comercial.css — a ÚNICA folha de estilo de `.claude/comercial/`, a pasta AUTOCONTIDA
   da vitrine.

   AUDIÊNCIA: o cliente, e só ele. Nasceu na F1 do plano `comercial`, por cópia da folha do
   dashboard; a F5 podou daqui a camada `quadro` — as superfícies de acompanhamento interno
   ficaram na forja, com `dashboard.css`. Duas pastas, duas audiências, duas folhas, e nenhum
   seletor de uma serve à outra. A linhagem é a `flexor.css` (F0 do plano
   `flexor-apresentacao`), que já servia só à apresentação comercial: o corte da F5 devolve
   a esta folha o escopo com que ela nasceu.

   POR QUE ARQUIVO EXTERNO, e não CSS inline como os atlas faziam: o molde é consumido pelas
   40 páginas (8 na raiz + 32 em `modulos/`). Inline significaria 40 cópias divergindo à
   primeira correção. `file://` carrega stylesheet por caminho relativo sem restrição
   (não é fetch/XHR), então o consumo por UNC do Windows continua funcionando.

   AS QUATRO CAMADAS (`@layer`, ordem de cascata declarada abaixo):
     tokens   paleta e reset. Fonte única das variáveis — inclusive os APELIDOS que o tema
              quadro usava (`--ink`, `--mut`, `--acc`, `--ok`…), agora apontando para a
              paleta espacial Flexor. Os apelidos ficaram: são a fonte única desta folha,
              e é por eles que a identidade continua a mesma dos dois lados do corte.
     vitrine   nav sticky com 2º nível em CSS puro (plano `navdashboard`, F2 — hover +
               focus-within, zero JS), hero, cards, chips, tabelas, gráficos, CTA, rodapé.
     atlas     o que é exclusivo dos atlas escritos à mão (starfield, gradientes de planeta,
               grade de cursos). Preenchida na F4 — declarada aqui para fixar a ordem.
     decks     os 3 decks de cliente (`d1_prospect`, `d2_ensino`, `d4_investidor`),
               absorvidos na F5a. Escopada por `.m3-deck`, com variáveis próprias que
               colidem de propósito com as de `tokens` — ver o cabeçalho da camada.
     landing   a home do site (`index.html`, landing page desde 2026-09-10). Escopada por
               `body.landing`, e só com o que a vitrine de páginas não tem: hero em duas
               colunas, faixa de prova, card de módulo em linha, faixa de métodos e o fecho.
               Card, grid, chip, botão, `.reflex`, `.lgpd` e a fusão vêm da camada `vitrine`.

   Camada só decide EMPATE de especificidade: regra sem camada vence qualquer regra em
   camada.

   Consumo:
     .claude/comercial/<pagina>.html          -> <link href="comercial.css">
     .claude/comercial/modulos/<pagina>.html  -> <link href="../comercial.css">

   Imagens: a pasta é AUTOCONTIDA — nenhuma referência sai dela (nem o favicon, que mora
   em `img/favicon.png` desde a F1). Todo caminho de imagem resolve dentro de `img/`:
     de .claude/comercial/          -> img/<arquivo>
     de .claude/comercial/modulos/  -> ../img/<arquivo>
   ============================================================================= */

@layer tokens, vitrine, atlas, decks, landing;

/* ============================================================ CAMADA: tokens */
@layer tokens {

  :root{
    --bg:#05070f; --panel:rgba(13,19,38,.82); --panel2:rgba(9,13,28,.9);
    --line:#1f2b4a; --line2:#2b3a63;
    --txt:#dbe4f5; --muted:#8fa0bf; --dim:#5c6c8c;
    --gold:#f5c542; --violet:#a78bfa; --cyan:#67e8f9; --green:#6ee7b7; --rose:#fda4af;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0; color:var(--txt); background:var(--bg);
    background-image:
      radial-gradient(1100px 700px at 85% -8%, rgba(76,54,140,.38), transparent 62%),
      radial-gradient(900px 650px at -12% 28%, rgba(16,72,120,.32), transparent 58%),
      radial-gradient(1000px 800px at 55% 115%, rgba(120,48,90,.20), transparent 60%);
    background-attachment:fixed;
    font-family:"Segoe UI",system-ui,-apple-system,Roboto,Ubuntu,sans-serif;
    line-height:1.55;
  }
  main,footer{max-width:1180px; margin:0 auto; padding:0 28px}
  a{color:var(--cyan); text-decoration:none}
  a:hover{text-decoration:underline}
  img{max-width:100%; height:auto}
  /* Apelidos do tema "quadro" — o que era `--bg:#0f1320` nos 5 geradores agora resolve na
     paleta espacial acima. Mantidos com os NOMES ANTIGOS de propósito: as regras de quadro
     migram sem serem reescritas, e a diferença fica só aqui. */
  :root{
    --panel-q:#141a2c;              /* superfície de painel/aba, opaca (o --panel da vitrine é translúcido) */
    --panel-q2:#101a30;             /* cabeçalho de grupo, linha de topo de tabela */
    --panel-q3:#0c1020;             /* poço: code inline, trilho da barra de progresso */
    --ink:var(--txt);               /* texto principal */
    --mut:var(--muted);             /* texto secundário */
    --acc:var(--cyan);              /* acento de interação (foi #36d1c4) */
    --ok:var(--green);              /* concluído */
    --open:var(--gold);             /* em aberto / em andamento (foi #f39c12) */
    --wip:var(--gold);              /* parcial na matriz */
    --pend:var(--rose);             /* pendente na matriz (foi #e74c3c) */
    --na:var(--dim);                /* não se aplica */
    --alerta:var(--rose);           /* achado grave (foi #e74c3c no performance.py) */
  }
}

/* =========================================================== CAMADA: vitrine */
@layer vitrine {

  /* --- navegação sticky ----------------------------------------------------- */
  nav{
    position:sticky; top:0; z-index:50; display:flex; gap:4px; align-items:center; flex-wrap:wrap;
    padding:10px 28px; background:rgba(5,7,15,.86); backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
  }
  nav .brand{display:inline-flex; align-items:center; gap:9px; font-weight:700; letter-spacing:.18em;
    font-size:13px; color:var(--gold); margin-right:14px}
  nav .brand img{width:26px; height:26px; border-radius:7px}
  nav a{color:var(--muted); font-size:12.5px; padding:5px 10px; border-radius:8px; letter-spacing:.04em}
  nav a:hover{color:var(--txt); background:rgba(255,255,255,.06); text-decoration:none}
  nav .sp{flex:1}

  /* --- menu canônico: o 2º nível em CSS puro (F2 do plano `navdashboard`) ---------------
     ZERO JavaScript, e não por gosto: estas páginas abrem por `file://`. Daí o par
     `:hover` (mouse) + `:focus-within` (teclado) — e daí o gatilho ser um <button>, que
     recebe foco por Tab; um <span> não recebe, e menu que só abre no mouse é menu que
     metade das pessoas não tem.
     O ::after do .mitem é uma PONTE invisível de 12px entre o gatilho e o painel: sem ela,
     o cursor atravessa o vão do `top:calc(100% + 12px)`, perde o :hover e o menu fecha na
     cara de quem estava indo até ele. */
  nav .menu{display:flex; gap:2px; align-items:center; flex-wrap:wrap}
  nav .mitem{position:relative}
  nav .mitem::after{content:""; position:absolute; left:0; right:0; top:100%; height:12px}
  nav .mtop{
    font:inherit; font-size:12.5px; letter-spacing:.04em; color:var(--muted);
    padding:5px 10px; border-radius:8px; border:0; background:none; cursor:pointer;
  }
  nav .mtop::after{content:"\25be"; margin-left:6px; font-size:9px; opacity:.65}
  nav .mitem:hover .mtop, nav .mitem:focus-within .mtop{color:var(--txt);
    background:rgba(255,255,255,.06)}
  nav .mitem.atual .mtop{color:var(--gold)}
  nav .msub{
    position:absolute; top:calc(100% + 12px); left:0; z-index:60; min-width:212px;
    display:none; flex-direction:column; gap:1px; padding:7px;
    background:rgba(9,12,24,.98); border:1px solid var(--line); border-radius:12px;
    box-shadow:0 18px 42px rgba(0,0,0,.55);
  }
  nav .mitem:hover .msub, nav .mitem:focus-within .msub{display:flex}
  nav .msub a{display:block; white-space:nowrap}
  nav .msub a[aria-current="page"]{color:var(--gold); background:rgba(245,197,66,.08)}
  /* A vitrine subiu para o 1º nível (`menu_plano`): o item corrente ali acende igual ao do
     2º nível — antes só o `.msub a` tinha a regra, e o `Índice` corrente ficava apagado. */
  nav .menu > a[aria-current="page"]{color:var(--gold); background:rgba(245,197,66,.08)}
  /* A faixa secundária são as âncoras DAQUELA página: `flex-basis:100%` a joga para a
     própria linha, senão 10 âncoras de curso empurram o menu para fora da barra. */
  nav .ancoras{flex-basis:100%; display:flex; gap:2px; align-items:center; flex-wrap:wrap;
    margin-top:8px; padding-top:7px; border-top:1px solid var(--line)}
  nav .ancoras a{font-size:11.5px; padding:4px 9px; color:var(--dim)}

  
  /* --- hero ----------------------------------------------------------------- */
  .hero{max-width:1180px; margin:0 auto; padding:76px 28px 26px; text-align:center}
  .hero .overline{font-size:12.5px; color:var(--dim); letter-spacing:.28em; text-transform:uppercase}
  .hero h1{
    margin:14px 0 6px; font-size:clamp(34px,6vw,68px); font-weight:800; letter-spacing:.08em;
    background:linear-gradient(100deg,#fff 10%, #ffd97a 38%, #a78bfa 72%, #67e8f9 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .hero .tag{font-size:clamp(15px,2vw,19px); color:var(--muted); max-width:820px; margin:12px auto 0}
  .hero .meta{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:24px}
  
  /* --- imagens: SEMPRE as derivadas de .claude/dashboard/img/ ----------------
     NÃO apontar para `static/images/M3Flexor/` direto. Os originais não seguem
     uma convenção única de fundo (34 sobre preto, 17 sobre branco), então nenhum
     tratamento CSS único funciona sobre eles — achado da F0 do plano
     `flexor-apresentacao`, depois de renderizar o piloto.
  
     `.claude/resources/imagens_comercial.py gerar` produz as derivadas: fundo
     virado ALFA (flood fill a partir das bordas), recortadas no bbox do assunto
     e reduzidas a 340px. Com alfa de verdade, o HTML trata as 51 igual — sem
     mix-blend-mode, sem moldura condicional — e o peso cai de 60 MB para 8 MB.
  
     Nome do arquivo derivado: <pasta>_<papel>.png  (papel = logo|castor|moeda)
       de .claude/dashboard/          ->  img/flexormidia_castor.png
       de .claude/dashboard/modulos/  ->  ../img/flexormidia_castor.png
  
     Ao trocar/acrescentar um PNG em static/, rode a ferramenta de novo — ela
     detecta a defasagem por mtime.
     ------------------------------------------------------------------------- */
  .art-painel{border:1px solid var(--line2); border-radius:18px; display:block;
    box-shadow:0 10px 40px rgba(0,0,0,.45)}
  
  /* PRINT DE PRODUTO (F23 do plano `medicao`): a tela real do sistema, capturada no tema ESCURO.
     Diferente da `.art-painel` (arte solta, que respira na página) — aqui a imagem é EVIDÊNCIA, e
     evidência quer largura total e legenda dizendo o que se está olhando. A borda é a mesma da arte
     para as duas conviverem na mesma página sem parecerem de sistemas diferentes. */
  .print-produto{margin:22px 0 0}
  .print-produto img{width:100%; height:auto; display:block; border:1px solid var(--line2);
    border-radius:14px; box-shadow:0 10px 40px rgba(0,0,0,.45)}
  .print-produto figcaption{margin-top:10px; font-size:13.5px; color:var(--muted); line-height:1.55}
  
  /* As moedas são metal escuro (verde/bronze envelhecido) e somem em tamanho
     pequeno sobre a página dark. O realce é do TAMANHO pequeno, não do fundo. */
  .moeda{filter:brightness(1.3) contrast(1.04) saturate(1.08)}
  
  /* emblema do módulo: a moeda inline, ao lado do overline do hero */
  .emblema{display:inline-block; width:40px; vertical-align:middle; margin:-4px 10px 0 0}
  
  /* hero de página de módulo: mascote grande e solto ao lado do texto */
  .hero-mod{display:grid; grid-template-columns:270px 1fr; gap:30px; align-items:center;
    max-width:1180px; margin:0 auto; padding:44px 28px 20px; text-align:left}
  .hero-mod .art{width:270px}
  .hero-mod .art img.castor{width:270px; margin:0 0 0 -14px}
  .hero-mod h1{text-align:left; font-size:clamp(30px,4.6vw,52px); margin:8px 0 4px}
  .hero-mod .tag{margin:12px 0 0; text-align:left; max-width:none}
  @media(max-width:820px){
    .hero-mod{grid-template-columns:1fr; justify-items:center; text-align:center}
    .hero-mod h1,.hero-mod .tag{text-align:center}
  }
  
  /* --- seções --------------------------------------------------------------- */
  section{padding:58px 0 8px; scroll-margin-top:70px}
  .overline{font-size:12px; letter-spacing:.32em; text-transform:uppercase; color:var(--gold); margin:0 0 8px}
  h2{font-size:clamp(25px,3.2vw,36px); margin:0 0 10px; letter-spacing:.03em}
  h3{letter-spacing:.03em; margin:0 0 6px}
  /* 1040px, não 880: o conteúdo de `main` tem 1124px (1180 - 2×28 de padding), e um lead
     parando em 880 deixava ~244px vazios à direita bem em cima de uma grade que vai até o fim
     — o texto lia como desalinhado dos cards em TODAS as páginas. 1040 encosta na coluna dos
     cards (sobra ~84px) sem esticar a linha ao máximo, que estragaria a leitura corrida. */
  .lead{color:var(--muted); max-width:1040px; margin:0 0 26px; font-size:15.5px}
  /* ...EXCETO quando o que vem abaixo é TABELA. Os 1040px acima são a folga deliberada contra
     uma grade de CARDS: card tem borda arredondada e fundo, e a folga de ~84px lê como respiro.
     Tabela não — ela é uma régua de bordas retas que vai até 1124px, e o lead parando antes lê
     como texto RECORTADO, não como respiro (usuário, 2026-09-08). Por isso o recorte é por
     vizinhança e não global: 45 dos 233 leads mudam; os outros 188 mantêm a medida de leitura.
     `~` e não `+`: entre o lead e a tabela costuma haver um `<h3>` (a transparencia.html é
     assim), e o que decide é a seção conter a tabela, não a adjacência exata. */
  .lead:has(~ .tblwrap), .lead:has(~ .rolagem), .lead:has(~ table){max-width:none}
  hr.sep{border:none; border-top:1px solid var(--line); margin:58px 0 0}
  
  /* --- cards e grids -------------------------------------------------------- */
  .card{background:linear-gradient(180deg, var(--panel), var(--panel2));
    border:1px solid var(--line); border-radius:16px; padding:22px}
  .card h3{font-size:18px}
  .card p{color:var(--muted); font-size:14.5px; margin:8px 0 0}
  .grid{display:grid; gap:16px}
  /* ── UTILITÁRIOS ───────────────────────────────────────────────────────────────────────
     Existem porque as 45 páginas carregavam 242 `style=` inline, e os mesmos punhados de
     declarações se repetiam 30+ vezes cada — `align-items:center` no grid de duas colunas,
     o respiro antes de uma tabela, a cor de destaque num <b>. Regra do projeto: CSS não mora
     no HTML (`padronizar-frontend`). O espaçamento foi normalizado numa escala de três
     degraus ao virar classe: 10/14 -> curto, 16/18/22 -> padrão, 28/30 -> largo. */
  .v-centro{align-items:center}
  .espaco-curto{margin-top:12px}
  .espaco{margin-top:18px}
  .espaco-largo{margin-top:28px}
  .c-gold{color:var(--gold)}
  .c-txt{color:var(--txt)}
  .c-muted{color:var(--muted)}
  /* card de FECHAMENTO de uma grade: ocupa a linha inteira. Existe porque o parágrafo solto
     embaixo do grid lia como desalinhado — o texto dele começava na borda do card, não na
     coluna de texto DELE, e parava antes (`.lead` tem max-width). Dentro do grid, o fecho
     alinha nos dois lados com os cards que resume. */
  .card.larga{grid-column:1/-1}
  .g2{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:repeat(3,1fr)}
  .g4{grid-template-columns:repeat(4,1fr)}
  @media(max-width:1000px){.g4{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:920px){.g2,.g3{grid-template-columns:1fr}}
  @media(max-width:620px){.g4{grid-template-columns:1fr}}

  /* --- mês colapsável e cartão com "Mais" (transparencia.html) ----------------
     Zero JS, como o resto desta folha: `<details>` nativo nos dois níveis. O de fora agrupa o
     mês (só o mais recente nasce `open` — a página tem dezenas de entregas e abrir tudo é uma
     parede); o de dentro é o próprio cartão, quando o texto é longo.
     O TEXTO DO CARTÃO MORA NO `<summary>`, não no corpo do `<details>` — é o que permite
     mostrar as primeiras linhas com o cartão fechado. Corpo de `<details>` fechado não
     renderiza; `<summary>` renderiza sempre. Daí o aparo ser por LINHA (`-webkit-line-clamp`)
     e valer só enquanto `:not([open])`: abrir não redesenha nada, só solta o limite. */
  details.mes{border-top:1px solid var(--line); margin-top:22px}
  details.mes>summary{list-style:none; cursor:pointer; display:flex; align-items:center;
    gap:12px; padding:16px 2px; font-size:18px; font-weight:600; letter-spacing:.03em}
  details.mes>summary::-webkit-details-marker{display:none}
  details.mes>summary::before{content:"\25B8"; color:var(--gold); font-size:12px; line-height:1;
    transition:transform .15s ease}
  details.mes[open]>summary::before{transform:rotate(90deg)}
  details.mes>summary:hover{color:var(--gold)}
  details.mes>.grid{margin:6px 0 30px}
  /* o cartão longo: o padding sai do `.card` e vai para o `<summary>`, senão a área clicável
     para de cobrir o cartão inteiro e sobra uma moldura morta de 22px em volta. */
  details.card{padding:0; position:relative}
  details.card>summary{list-style:none; cursor:pointer; padding:22px}
  details.card>summary::-webkit-details-marker{display:none}
  details.card:not([open])>summary>p{display:-webkit-box; -webkit-box-orient:vertical;
    -webkit-line-clamp:3; overflow:hidden}
  /* O "Mais" SÓ APARECE NO HOVER — é o comportamento que as telas do sistema já têm nas
     descrições longas das árvores (`.arvore-descricao-toggle` em `static/css/padrao.css`,
     revelada por `:hover`/`:focus-within` do corpo do card). Aqui a affordance é o `::after` do
     `<summary>`, e não um botão, porque o `<details>` já é o mecanismo — mas a regra de
     visibilidade é a mesma, inclusive a exceção: expandido, o rótulo fica visível sem hover,
     senão não há como voltar sem adivinhar onde clicar. Teclado entra pelo `:focus-visible`, que
     é o irmão do `:focus-within` de lá. As duas cópias existem porque esta pasta é HTML estático,
     sem acesso ao `static/` do sistema; ao mexer na regra, olhe as duas.

     ELE NÃO OCUPA LUGAR NO CARTÃO. Em fluxo, o rótulo reservava uma faixa no rodapé de todo
     cartão aparado — visível ou não, o espaço ficava lá, e 32 cartões com uma faixa morta
     embaixo desalinham a grade de duas colunas. Absoluto, ele flutua: some da caixa do cartão e
     o texto volta a ir até a borda. Como a área clicável é o `<summary>` inteiro (clicar em
     qualquer ponto do cartão expande), ele pode ainda SEGUIR O CURSOR — `--mx`/`--my` são
     escritas pelo `dashboard.py` no `pointermove`, e a classe `.segue` é o que distingue "tem
     mouse aqui" de teclado/aberto, que caem na âncora do canto. `pointer-events:none` para o
     rótulo nunca ficar entre o cursor e o clique que ele anuncia. */
  details.card>summary::after{content:"Mais"; position:absolute; right:18px; bottom:14px;
    padding:2px 10px; border-radius:999px; border:1px solid var(--line);
    background:var(--panel2); color:var(--gold); font-size:12.5px; letter-spacing:.04em;
    pointer-events:none; opacity:0; transition:opacity .15s ease}
  details.card.segue>summary::after{right:auto; bottom:auto; left:0; top:0;
    transform:translate(var(--mx,0), var(--my,0))}
  details.card:hover>summary::after,
  details.card>summary:focus-visible::after,
  details.card[open]>summary::after{opacity:1}
  details.card[open]>summary::after{content:"Menos"}
  
  /* PSEUDO-FUSÃO do módulo: castor + moeda compostos aqui, no lugar do PNG `<pasta>.png` que
     era pintado à mão. Espelha `static/css/m3_fusao.css` (o componente do lado Django) — as duas
     cópias existem porque a vitrine é HTML estático, sem acesso ao `static/` do app. Ao mexer na
     geometria, mexa nas DUAS. Pré-requisito: castor e moeda no recorte canônico
     (`imagens_comercial.py originais`), senão o fundo branco dos PNGs aparece como retângulo. */
  /* Mais LARGA que alta (1.12), não quadrada: num quadro quadrado ou o castor tapa o fim do nome
     gravado na moeda, ou a moeda sangra para fora e aparece cortada. Ver m3_fusao.css. */
  .m3-fusao{--moeda-h:80%; --moeda-x:0%; --moeda-y:5%;
    --castor-h:54%; --castor-x:0%; --castor-y:3%;
    /* rótulo em cqw, NÃO em %: padding/max-width em % resolvem contra a largura do container e
       jogam o texto para cima do monograma. Ver static/css/m3_fusao.css. */
    --rotulo-y:2.5cqw; --rotulo-tam:9.2cqw; --rotulo-inset:4.5cqw;
    position:relative; container-type:inline-size;
    aspect-ratio:1.12; overflow:hidden; border-radius:14px;
    background:radial-gradient(circle at 38% 34%, #123024, #071a12 72%)}
  .m3-fusao img{position:absolute; width:auto; max-width:none; display:block; height:auto}
  .m3-fusao .m3-fusao-moeda{height:var(--moeda-h); left:var(--moeda-x); top:var(--moeda-y)}
  /* a sombra é o que "cola" o castor na moeda: sem ela os dois lêem como adesivos soltos. */
  .m3-fusao .m3-fusao-castor{height:var(--castor-h); right:var(--castor-x); bottom:var(--castor-y);
    filter:drop-shadow(-10px 6px 14px rgba(0,0,0,.55))}
  /* nome do módulo GRAVADO na moeda-base compartilhada — as 18 moedas viraram 1 e o nome virou
     texto. Baixo-relevo por text-shadow (aresta iluminada embaixo, sombra em cima) + blend para a
     textura do metal atravessar a letra. Nome de 2 palavras quebra em 2 linhas: como o alinhamento
     é flex-end, a 2ª fica na linha de base original e a 1ª sobe para o vazio sob o monograma. */
  .m3-fusao .m3-fusao-rotulo, .m3-moeda .m3-moeda-rotulo{position:absolute;
    /* centro, não flex-end: ancorado embaixo, um nome de 2 linhas cresce só para cima e invade o
       monograma. Ver static/css/m3_fusao.css. */
    display:flex; align-items:center; justify-content:center;
    box-sizing:border-box; padding:0 var(--rotulo-inset);
    transform:translateY(var(--rotulo-y));
    font:400 var(--rotulo-tam)/1.04 Arial,"Liberation Sans",Helvetica,sans-serif;
    letter-spacing:.01em; text-align:center; text-wrap:balance;
    color:rgba(24,42,36,.78);
    text-shadow:0 .055em 0 rgba(198,226,212,.34), 0 -.03em .03em rgba(0,0,0,.4);
    mix-blend-mode:hard-light; pointer-events:none}
  /* geometria DENTRO da fusão: a caixa do rótulo é a do disco, em cqw da caixa da fusão. */
  .m3-fusao .m3-fusao-rotulo{left:var(--moeda-x); top:var(--moeda-y); width:68.70cqw; height:71.43cqw}
  
  /* MOEDA SOZINHA (sem castor) — moeda na tela é moeda COM o nome; nunca um <img> solto, senão o
     disco sai anônimo (a moeda-base não tem nome gravado). Espelha `.m3-moeda` de
     static/css/m3_fusao.css; ao mexer, mexa nas DUAS. Os cqw são os mesmos da fusão multiplicados
     por 100/68,70 = 1,4556, que é a conversão da caixa da fusão para a caixa do disco. */
  .m3-moeda{--rotulo-y:3.64cqw; --rotulo-tam:13.39cqw; --rotulo-inset:6.55cqw;
    position:relative; container-type:inline-size; display:block; aspect-ratio:327/340}
  .m3-moeda .m3-moeda-img{display:block; width:100%; height:auto; max-width:none}
  .m3-moeda .m3-moeda-rotulo{inset:0}
  
  /* card de módulo do grid da vitrine (é um <a>): a fusão entra como topo do card. */
  .modcard{display:flex; flex-direction:column; gap:0; color:inherit; overflow:hidden;
    background:linear-gradient(180deg, var(--panel), var(--panel2));
    border:1px solid var(--line); border-radius:16px; transition:border-color .18s, transform .18s}
  .modcard:hover{border-color:var(--line2); transform:translateY(-3px); text-decoration:none}
  /* Quadrada e de largura fixa: os títulos dos 4 cards da linha caem todos na mesma altura.
     Antes isso exigia `height:200px; object-fit:contain` porque as derivadas tinham proporções
     diferentes — a fusão é sempre 1:1, então o alinhamento sai de graça. */
  .modcard .m3-fusao{width:calc(100% - 24px); max-width:200px; margin:12px auto 4px}
  /* fusão como ilustração do bloco #cta das páginas de módulo: é uma das colunas do grid g2,
     ao lado do texto de chamada. */
  .m3-fusao.cta-fusao{width:100%; max-width:420px; margin-inline:auto; border-radius:18px}
  .modcard .txt{padding:16px 18px 18px}
  .modcard h3{font-size:16.5px; margin:0}
  .modcard p{color:var(--muted); font-size:13.5px; margin:6px 0 0}
  
  /* card de módulo COMPACTO ("combina bem com"): moeda solta + texto, sem ilustração */
  .modmini{display:flex; align-items:center; gap:14px; color:inherit;
    background:linear-gradient(180deg, var(--panel), var(--panel2));
    border:1px solid var(--line); border-radius:14px; padding:14px 16px;
    transition:border-color .18s, transform .18s}
  .modmini:hover{border-color:var(--line2); transform:translateY(-2px); text-decoration:none}
  /* a moeda do mini-card é o componente `.m3-moeda` (com o nome gravado), não a <img> crua: quem
     dimensiona é a caixa dele, que é o que dá o `cqw` do rótulo. 72px, e não os 60 de antes: no
     tamanho anterior a gravação ficava ilegível. */
  .modmini .m3-moeda{width:72px; flex:none; margin:-6px}
  .modmini h3{font-size:15px; margin:0}
  .modmini p{color:var(--muted); font-size:13px; margin:3px 0 0}
  
  /* --- chips, tags, listas -------------------------------------------------- */
  .chip{display:inline-flex; align-items:center; gap:6px; padding:3px 11px; border-radius:999px;
    font-size:12px; border:1px solid var(--line2); color:var(--muted); background:rgba(255,255,255,.03)}
  .chip.ok{border-color:rgba(110,231,183,.5); color:var(--green); background:rgba(110,231,183,.06)}
  .chip.wip{border-color:rgba(245,197,66,.55); color:var(--gold); background:rgba(245,197,66,.06)}
  .chip.dado{border-color:rgba(103,232,249,.4); color:var(--cyan)}
  .chip.sens{border-color:rgba(253,164,175,.5); color:var(--rose); background:rgba(253,164,175,.06)}
  .tags{display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 0}
  .tags .t{font-size:12px; color:var(--violet); border:1px solid rgba(167,139,250,.4);
    border-radius:7px; padding:2px 9px; background:rgba(167,139,250,.07)}
  
  ul.on{margin:12px 0 0; padding:0 0 0 2px; list-style:none; font-size:14.5px; color:var(--txt)}
  ul.on li{margin:6px 0; padding-left:20px; position:relative}
  ul.on li::before{content:"◈"; position:absolute; left:0; color:var(--cyan); font-size:11px; top:4px}
  ul.on li b{color:var(--txt)}
  
  /* destaque editorial (citação/tese) */
  .reflex{margin:18px 0 0; padding:14px 18px; border-left:3px solid var(--gold);
    background:rgba(245,197,66,.05); border-radius:0 10px 10px 0; color:#e9dcb0; font-size:14.5px; font-style:italic}
  .reflex b{font-style:normal; color:var(--gold); letter-spacing:.06em; font-size:11.5px;
    text-transform:uppercase; display:block; margin-bottom:3px}
  
  /* --- tabelas -------------------------------------------------------------- */
  .tblwrap{overflow-x:auto; border:1px solid var(--line); border-radius:14px}
  table{border-collapse:collapse; width:100%; font-size:13.5px; min-width:640px}
  th{font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); text-align:left}
  th,td{padding:10px 14px; border-bottom:1px solid var(--line); vertical-align:top}
  tr:last-child td{border-bottom:none}
  tbody tr:hover{background:rgba(255,255,255,.025)}
  
  /* --- gráficos (SVG inline, gerado por `comercial.py aplicar`) ---------------
     O SVG sai do `_comercial_svg.py` SEM cor literal: ele referencia as variáveis
     declaradas aqui no `:root` (`var(--gold,#f5c542)` etc.), com fallback para o
     caso de ser lido fora da página (conversor de PDF, e-mail). Mudar a paleta do
     molde muda os gráficos das 35 páginas sem regerar nada.
     `.grafico` é o quadro; o `<svg>` dentro dele já vem com `width:100%`.
     ------------------------------------------------------------------------- */
  .grafico{margin:22px 0 0; padding:18px 20px 14px; border:1px solid var(--line);
    border-radius:16px; background:linear-gradient(180deg, var(--panel), var(--panel2))}
  .grafico .cap{margin:10px 0 0; color:var(--dim); font-size:12.5px}
  .grafico svg{display:block; overflow:visible}
  .vspark{vertical-align:-6px; margin:0 2px}
  /* OCULTOS por decisão do usuário (2026-09-10). Os marcadores `<!-- GRAFICO:… -->` continuam
     nas páginas e o `comercial.py aplicar` continua redesenhando cada SVG com o dado do dia — só
     não são exibidos. Para voltar a mostrar, apague esta regra; nada mais precisa mudar. */
  svg.vsvg{display:none}
  
  /* --- bloco "Dados e conformidade" (padrão dos 30 módulos) ----------------- */
  .lgpd{border:1px solid rgba(103,232,249,.28); border-radius:18px; padding:24px 26px;
    background:linear-gradient(180deg, rgba(9,26,40,.72), rgba(7,13,26,.9))}
  .lgpd > .overline{color:var(--cyan)}
  .lgpd .none{color:var(--muted); font-size:14.5px}
  .lgpd .foot{margin:18px 0 0; font-size:13.5px; color:var(--muted)}
  
  /* --- CTA ------------------------------------------------------------------ */
  .cta{margin:16px 0 0; display:flex; gap:12px; flex-wrap:wrap; align-items:center}
  .btn{display:inline-flex; align-items:center; gap:8px; padding:10px 20px; border-radius:999px;
    font-size:14px; letter-spacing:.04em; border:1px solid var(--line2); color:var(--txt);
    background:rgba(255,255,255,.04)}
  .btn:hover{background:rgba(255,255,255,.09); text-decoration:none}
  .btn.gold{color:#2a1f00; border-color:transparent; font-weight:700;
    background:linear-gradient(100deg,#ffe9a8,#f5c542 60%,#d9a63a)}
  .btn.gold:hover{filter:brightness(1.08)}
  
  /* --- rodapé --------------------------------------------------------------- */
  footer{padding:52px 28px 78px; color:var(--dim); font-size:13px}
  /* ícone em linha própria — o único link do rodapé, login do sistema (m3ca.m3flexor.com.br) */
  footer .brandicon{display:inline-block; line-height:0}
  footer .brandicon img{width:44px}
  footer .brandicon:hover{opacity:.82}
  footer .brandtext{margin:12px 0 0}
  footer a{color:var(--muted)}
  /* "Atualizada em DD/MM/AAAA HH:MM" — escrita por `comercial.py rodape` a partir do
     git log da própria página, dentro do marcador `<!-- RODAPE -->`. Menor e à esquerda de
     propósito: é rodapé de rodapé, procedência técnica — não faz parte do fecho centrado
     (ícone + marca) que o visitante lê. */
  footer .atualizada{display:block; text-align:left; margin-top:10px; font-size:10px;
                     color:var(--mut,var(--dim)); letter-spacing:.02em}
  /* `footer.centrado` — ícone e marca empilhados no eixo da página. É o rodapé de quem NÃO
     tem menu: sem a fileira de links, o bloco encostado à esquerda fica órfão, e centrar é
     o que o faz ler como fecho. A `.atualizada` fica de fora (ver acima). */
  footer.centrado{text-align:center}
}
/* ============================================================= CAMADA: atlas
   O que é exclusivo dos 3 atlas escritos à mão (`constelacao.html`,
   `lataciverso.html`, `cursos_grade.html`). Preenchida na F4 do plano `dashboard`,
   quando os três perderam o `<style>` inline — a terceira cópia da identidade.

   TUDO AQUI É ESCOPADO por `body.atlas` + a classe da página (`.constelacao`,
   `.lataciverso`, `.cursos-grade`), e não por acaso: esta folha é lida pelas 45
   páginas da pasta, e regra de atlas solta vazaria para as 32 de `modulos/`. A
   camada `atlas` é a ÚLTIMA da cascata, então o escopo aqui existe para conter o
   alcance, não para vencer especificidade — quem vence é a ordem da camada.

   O QUE NÃO ENTROU: tudo que os três já tinham igual à vitrine (nav, hero, chips,
   cards, grid, tabelas, `.reflex`, `hr.sep`, footer) saiu por ser duplicata — era
   o ponto da fase. Sobrou aqui o que só existe em atlas: o starfield, os planetas
   e cidades da constelação/LataciVerso, os cinturões de nível, e a grade curricular.

   ACHADO DA F4: o inline da `constelacao.html` estava com os espaços de descendência
   comidos (`nav.brand` em vez de `nav .brand`, `.hero.stardate` em vez de
   `.hero .stardate`) — ~15 regras mortas, a página rendendo meio sem estilo desde
   alguma edição antiga. A migração conserta isso de lado: as regras equivalentes da
   vitrine estão escritas certo. Por isso a página MUDA de aparência nesta fase, e a
   mudança é o conserto.
   -------------------------------------------------------------------------- */
@layer atlas {

  /* --- comum aos atlas espaciais (constelacao + lataciverso) ---------------- */
  body.atlas .starfield{position:fixed; inset:0; width:100vw; height:100vh; z-index:0; pointer-events:none}
  body.atlas .wrap{position:relative; z-index:1}
  body.atlas .tw{animation:tw 3.2s ease-in-out infinite}
  body.atlas .tw2{animation:tw 4.6s ease-in-out infinite reverse}

  body.atlas .mono{font-family:"Cascadia Mono",Consolas,"Courier New",monospace}

  /* o hero dos atlas tem "stardate" e a moeda M3 — a vitrine tem overline e emblema */
  body.atlas .hero .stardate{font-size:12.5px; color:var(--dim); letter-spacing:.28em; text-transform:uppercase}
  body.atlas .hero .coin{display:inline-flex; align-items:center; gap:10px; margin-top:26px;
    padding:8px 18px; border:1px solid rgba(245,197,66,.45); border-radius:999px; color:var(--gold);
    background:rgba(245,197,66,.07); font-size:14px; letter-spacing:.06em}
  body.atlas .coin .c{display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%;
    background:radial-gradient(circle at 32% 28%, #ffe9a8, #d9a63a 62%, #7a5312);
    color:#3a2a00; font-weight:800; font-size:14px}
  body.atlas .chip.veto{border-color:rgba(245,197,66,.55); color:var(--gold); background:rgba(245,197,66,.06)}

  /* mapa orbital: o SVG desenhado à mão, e a legenda embaixo dele */
  body.atlas .mapbox{border:1px solid var(--line); border-radius:20px; overflow:hidden;
    background:radial-gradient(900px 500px at 50% 42%, rgba(30,32,70,.55), rgba(5,7,15,.2) 70%)}
  body.atlas .mapbox svg{display:block; width:100%; height:auto}
  /* cada cluster de planeta é um <a>: só cursor + leve realce no hover (os fill são inline) */
  body.atlas .mapbox svg a{cursor:pointer}
  body.atlas .mapbox svg a:hover{opacity:.85}
  body.atlas .mapcap{text-align:center; color:var(--dim); font-size:13px; padding:10px 0 16px}

  /* "cidade": o card de um mundo — arte à esquerda, texto à direita */
  body.atlas .city{display:grid; grid-template-columns:200px 1fr; gap:26px; margin:0 0 26px;
    background:linear-gradient(180deg, var(--panel), var(--panel2));
    border:1px solid var(--line); border-radius:20px; padding:26px; scroll-margin-top:76px}
  @media(max-width:860px){body.atlas .city{grid-template-columns:1fr}}
  body.atlas .city .art{display:flex; flex-direction:column; align-items:center; gap:12px}
  body.atlas .city .art svg{width:150px; height:150px}
  body.atlas .city h3{margin:0; font-size:24px}
  body.atlas .city h3 a{color:inherit}
  body.atlas .city h3 a:hover{color:var(--cyan); text-decoration:none}
  body.atlas .city .head{display:flex; gap:12px; align-items:baseline; flex-wrap:wrap}
  body.atlas .city .lvlname{color:var(--violet); font-size:14px; margin:3px 0 0; font-weight:600}
  body.atlas .city p.desc{color:var(--muted); font-size:14.5px; margin:12px 0 0}
  body.atlas .city ul.on{margin:12px 0 0; padding:0 0 0 2px; list-style:none; font-size:14px; color:var(--txt)}
  body.atlas .city ul.on li{margin:4px 0; padding-left:20px; position:relative}
  body.atlas .city ul.on li::before{content:"◈"; position:absolute; left:0; color:var(--cyan); font-size:11px; top:3px}

  /* poços de texto do atlas: bloco de comandos e árvore de diretório. O terceiro era o caminho
     UNC no rodapé do lataciverso — saiu com a padronização do rodapé (2026-09-06), e ninguém
     sente falta: era o caminho de quem ABRE o arquivo no Windows, numa página que o cliente lê. */
  body.atlas .cmds,
  body.atlas .tree{background:#070b18; border:1px solid var(--line2); border-radius:12px;
    padding:16px 20px; font-size:13.5px; color:#bcd0f7}
  body.atlas .cmds{line-height:2}
  body.atlas .tree{font-size:13px; line-height:1.75; overflow-x:auto; white-space:pre}
  body.atlas .note{font-size:13px; color:var(--muted)}

  /* etiqueta de módulo/modelo: a cor vem inline (constelação) ou da variante (lataciverso) */
  body.atlas .m{display:inline-block; padding:2px 10px; border-radius:7px; font-size:12px;
    font-weight:700; letter-spacing:.04em; border:1px solid}

  @keyframes tw{0%,100%{opacity:.25}50%{opacity:1}}

  /* --- exclusivo da constelacao.html ---------------------------------------- */
  body.constelacao .tags .t.core{color:var(--gold); border-color:rgba(245,197,66,.45); background:rgba(245,197,66,.06)}
  body.constelacao .tags .t.novo{color:var(--green); border-color:rgba(110,231,183,.45); background:rgba(110,231,183,.06)}

  /* --- exclusivo do lataciverso.html ---------------------------------------- */
  /* paleta dos 5 cinturões de nível + o "danado", e as 3 cores de modelo */
  body.lataciverso{
    --k5:#eab308; --k4:#f97316; --k3:#22c55e; --k2:#3b82f6; --k1:#b45309; --dan:#fbbf24;
    --fable:#c4b5fd; --opus:#7dd3fc; --sonnet:#6ee7b7;
  }
  body.lataciverso .city{grid-template-columns:236px 1fr}
  body.lataciverso .city .art svg{width:200px; height:200px}
  body.lataciverso .city h3{font-size:26px; letter-spacing:.05em}
  body.lataciverso .city .lvlname{font-size:14.5px}

  body.lataciverso .belt{display:inline-flex; align-items:center; gap:7px; padding:3px 11px;
    border-radius:999px; font-size:12px; font-weight:600; border:1px solid; letter-spacing:.03em}
  body.lataciverso .belt .dot{width:9px; height:9px; border-radius:2px; display:inline-block}
  body.lataciverso .b5{color:var(--k5); border-color:var(--k5)} body.lataciverso .b5 .dot{background:var(--k5)}
  body.lataciverso .b4{color:var(--k4); border-color:var(--k4)} body.lataciverso .b4 .dot{background:var(--k4)}
  body.lataciverso .b3{color:var(--k3); border-color:var(--k3)} body.lataciverso .b3 .dot{background:var(--k3)}
  body.lataciverso .b2{color:var(--k2); border-color:var(--k2)} body.lataciverso .b2 .dot{background:var(--k2)}
  body.lataciverso .b1{color:var(--k1); border-color:var(--k1)} body.lataciverso .b1 .dot{background:var(--k1)}
  body.lataciverso .bd{color:var(--dan); border-color:var(--dan); background:rgba(0,0,0,.5)}
  body.lataciverso .bd .dot{background:#0a0a0a; border:1px solid var(--dan)}
  /* variantes de cor do quadradinho FORA do cinto: a legenda de uma tabela e o texto corrido
     usavam o mesmo desenho, mas escreviam `background` inline porque a cor só existia via `.bN`
     do pai. Como modificador direto, os 23 `style=` da página viraram classe. */
  body.lataciverso .dot{width:9px; height:9px; border-radius:2px; display:inline-block; margin-right:6px}
  /* dentro do cinto o espaçamento é o `gap` do flex; a margem da base sobraria. */
  body.lataciverso .belt .dot{margin-right:0}
  body.lataciverso .dot.k5{background:var(--k5)}
  body.lataciverso .dot.k4{background:var(--k4)}
  body.lataciverso .dot.k3{background:var(--k3)}
  body.lataciverso .dot.k2{background:var(--k2)}
  body.lataciverso .dot.k1{background:var(--k1)}
  body.lataciverso .dot.dan{background:var(--dan)}
  /* coluna que ABRE um grupo na tabela larga: o fio é a divisa entre grupos, não a borda da
     célula — por isso vive no <th>/<td> que começa o grupo, e não em toda coluna. */
  body.lataciverso th.divisa, body.lataciverso td.divisa{border-left:1px solid var(--line)}
  body.lataciverso h3.h-card{margin:0 0 6px; font-size:16.5px}
  body.lataciverso h3.h-bloco{margin:0 0 10px; font-size:18px}
  body.lataciverso .note.mini{font-size:10.5px}
  body.lataciverso .beltrow{display:flex; gap:9px; flex-wrap:wrap; justify-content:center; margin:18px 0 0}
  body.lataciverso td .dot{width:9px; height:9px; border-radius:2px; display:inline-block;
    margin-right:8px; vertical-align:baseline}

  /* vitrines do universo: as lojas de cada mundo, e a cadeia econômica */
  body.lataciverso .shops{display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:11px; margin-top:16px}
  body.lataciverso .shop{display:flex; gap:11px; align-items:center; border:1px solid var(--line);
    border-radius:12px; padding:10px 12px; background:rgba(255,255,255,.025)}
  body.lataciverso .shop svg{width:44px; height:44px; flex:none}
  body.lataciverso .shop .nm{font-weight:700; font-size:13.5px}
  body.lataciverso .shop .tp{font-size:11px; color:var(--dim); text-transform:uppercase; letter-spacing:.08em}
  body.lataciverso .shop .ds{font-size:12px; color:var(--muted); margin-top:1px}
  body.lataciverso .shop.ph{border-style:dashed; color:var(--dim); justify-content:center; min-height:66px; font-size:13px}
  body.lataciverso .chain{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:16px;
    font-size:13px; color:var(--muted)}
  body.lataciverso .chain .n{border:1px solid var(--line2); border-radius:9px; padding:5px 11px;
    background:rgba(255,255,255,.03); color:var(--txt)}
  body.lataciverso .chain .a{color:var(--gold)}

  /* as duas tabelas densas de nível cabem sem rolagem: fonte e padding menores */
  body.lataciverso #cursos-niveis table,
  body.lataciverso #desafios-niveis table{min-width:0; font-size:11.5px}
  body.lataciverso #cursos-niveis th,
  body.lataciverso #desafios-niveis th{font-size:10px; letter-spacing:.06em; white-space:nowrap}
  body.lataciverso #cursos-niveis th, body.lataciverso #cursos-niveis td,
  body.lataciverso #desafios-niveis th, body.lataciverso #desafios-niveis td{padding:7px 8px}

  body.lataciverso .m.fable{color:var(--fable); border-color:rgba(196,181,253,.55); background:rgba(196,181,253,.08)}
  body.lataciverso .m.opus{color:var(--opus); border-color:rgba(125,211,252,.5); background:rgba(125,211,252,.07)}
  body.lataciverso .m.sonnet{color:var(--sonnet); border-color:rgba(110,231,183,.5); background:rgba(110,231,183,.07)}
  body.lataciverso .flow svg{display:block; width:100%; height:auto}

  /* --- exclusivo do cursos_grade.html --------------------------------------- */
  /* Página DENSA: é uma grade curricular inteira, não uma peça de vitrine. Tudo
     abaixo aperta a mesma linguagem (nav, hero, chip, footer) para caber tabela —
     é a única das três que sobrepõe medida da vitrine, e de propósito. */
  body.cursos-grade{
    background-image:
      radial-gradient(1100px 700px at 85% -8%, rgba(76,54,140,.34), transparent 62%),
      radial-gradient(900px 650px at -12% 24%, rgba(16,72,120,.30), transparent 58%),
      radial-gradient(1000px 800px at 55% 118%, rgba(30,110,90,.16), transparent 60%);
    line-height:1.5;
  }
  body.cursos-grade .mono{font-family:"Cascadia Mono",Consolas,"Courier New",monospace}
  body.cursos-grade nav{padding:9px 26px; background:rgba(5,7,15,.9)}
  body.cursos-grade nav .mtop{font-size:11.5px; padding:4px 9px; letter-spacing:.03em}
  body.cursos-grade nav .brand{letter-spacing:.16em; font-size:12.5px; margin-right:12px}
  body.cursos-grade nav a{font-size:11.5px; padding:4px 9px; border-radius:7px; letter-spacing:.03em}

  body.cursos-grade .hero{padding:64px 26px 22px; text-align:left}
  body.cursos-grade .hero .overline{font-size:11.5px; letter-spacing:.3em; color:var(--gold); margin:0 0 10px}
  body.cursos-grade .hero h1{margin:0 0 8px; font-size:clamp(30px,5vw,52px); letter-spacing:.04em}
  body.cursos-grade .hero .tag{font-size:15px; max-width:800px; margin:0}
  body.cursos-grade .stats{display:flex; gap:12px; flex-wrap:wrap; margin-top:22px}
  body.cursos-grade .stat{background:linear-gradient(180deg,var(--panel),var(--panel2));
    border:1px solid var(--line); border-radius:13px; padding:13px 18px; min-width:120px}
  body.cursos-grade .stat b{display:block; font-size:24px; color:var(--txt); letter-spacing:.02em}
  body.cursos-grade .stat span{font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em}

  body.cursos-grade main{padding:8px 26px 70px}
  body.cursos-grade .curso{background:linear-gradient(180deg,var(--panel),var(--panel2));
    border:1px solid var(--line); border-radius:16px; padding:22px 22px 8px; margin:20px 0; scroll-margin-top:60px}
  body.cursos-grade .curso-h{display:flex; justify-content:space-between; align-items:flex-start; gap:16px;
    flex-wrap:wrap; border-bottom:1px solid var(--line); padding-bottom:14px; margin-bottom:6px}
  body.cursos-grade .curso-h h2{margin:0; font-size:22px; letter-spacing:.02em}
  body.cursos-grade .ch-l{display:flex; align-items:center; gap:12px}
  body.cursos-grade .ch-meta{display:flex; gap:7px; flex-wrap:wrap; align-items:center}
  body.cursos-grade .csig{font-size:12px; color:var(--gold); border:1px solid rgba(245,197,66,.45);
    background:rgba(245,197,66,.07); border-radius:8px; padding:3px 9px; letter-spacing:.06em}
  body.cursos-grade .mp{font-size:12px; color:var(--muted); border:1px solid var(--line2);
    border-radius:999px; padding:3px 11px; background:rgba(255,255,255,.03)}
  body.cursos-grade .mp.acc{color:var(--cyan); border-color:rgba(103,232,249,.4)}
  body.cursos-grade .mp.status.ok{color:var(--green); border-color:rgba(110,231,183,.4); background:rgba(110,231,183,.06)}
  body.cursos-grade .mp.status.warn{color:var(--gold); border-color:rgba(245,197,66,.4); background:rgba(245,197,66,.06)}

  body.cursos-grade .grade{margin:14px 0 18px}
  body.cursos-grade .grade-h{display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:10px}
  body.cursos-grade .grade-h b{font-size:14.5px; letter-spacing:.02em}
  body.cursos-grade .gsig{font-size:11.5px; color:var(--violet); border:1px solid rgba(167,139,250,.4);
    background:rgba(167,139,250,.08); border-radius:7px; padding:2px 8px}
  body.cursos-grade .chip{display:inline; font-size:11px; color:var(--muted); border:1px solid var(--line2);
    border-radius:999px; padding:2px 9px; background:rgba(255,255,255,.03)}
  body.cursos-grade .chip.on{color:var(--green); border-color:rgba(110,231,183,.4); background:rgba(110,231,183,.06)}
  body.cursos-grade .chip.off{color:var(--dim)}

  body.cursos-grade .periodo{margin:0 0 12px; padding-left:14px; border-left:2px solid var(--line2)}
  body.cursos-grade .per-h{font-size:12px; color:var(--gold); letter-spacing:.06em; text-transform:uppercase;
    font-weight:700; margin:6px 0 6px; display:flex; align-items:center; gap:9px}
  body.cursos-grade .per-n{font-size:10.5px; color:var(--dim); font-weight:500; letter-spacing:.04em; text-transform:none}

  body.cursos-grade table.grade-tbl{width:100%; border-collapse:collapse; font-size:12.5px;
    table-layout:fixed; min-width:0}
  body.cursos-grade .grade-tbl col.c-sig{width:110px}
  body.cursos-grade .grade-tbl col.c-num{width:76px}
  body.cursos-grade .grade-tbl col.c-tn{width:96px}
  body.cursos-grade .grade-tbl thead th{text-align:left; color:var(--dim); font-weight:600; font-size:10.5px;
    text-transform:uppercase; letter-spacing:.06em; padding:2px 10px 6px; border-bottom:1px solid var(--line)}
  body.cursos-grade .grade-tbl th.num, body.cursos-grade .grade-tbl td.num{text-align:right}
  body.cursos-grade .grade-tbl td{padding:5px 10px; border-bottom:1px solid rgba(31,43,74,.5); vertical-align:middle}
  body.cursos-grade .grade-tbl tr:hover td{background:rgba(103,232,249,.04)}
  body.cursos-grade .grade-tbl .sig{color:var(--cyan); font-size:12px; white-space:nowrap}
  body.cursos-grade .grade-tbl .nm{color:var(--txt); overflow:hidden; text-overflow:ellipsis}
  body.cursos-grade .grade-tbl .num{color:var(--muted); white-space:nowrap}
  body.cursos-grade .grade-tbl .tot{color:var(--txt); font-weight:700}
  body.cursos-grade .grade-tbl .tn{color:var(--dim); font-size:11.5px}
  body.cursos-grade .ead{font-size:9.5px; color:var(--violet); border:1px solid rgba(167,139,250,.4);
    border-radius:5px; padding:0 5px; margin-left:5px; vertical-align:1px; letter-spacing:.04em}

  body.cursos-grade footer{max-width:1180px; margin:0 auto; padding:22px 26px 40px; font-size:11.5px;
    border-top:1px solid var(--line)}
  /* A procedência do panorama — de qual JSON ele saiu, e em que data. Morava no rodapé até o
     rodapé virar moldura (2026-09-06); é conteúdo da página, então desceu para o fim do `main`. */
  body.cursos-grade .fonte{max-width:1180px; margin:0 auto; padding:22px 0 0; font-size:11.5px;
    color:var(--dim); border-top:1px solid var(--line)}
  body.cursos-grade .fonte code{background:rgba(255,255,255,.05); padding:1px 6px; border-radius:5px; color:var(--muted)}
}

/* ============================================================= CAMADA: decks
   Os 3 decks de apresentação (`d1_prospect`, `d2_ensino`, `d4_investidor`). Vieram de `_docs/decks/decks.css` na F5a do plano `comercial`, quando
   os 5 decks foram absorvidos pelas duas pastas: a folha racha na MESMA linha do
   corte de audiência — `.m3-deck` é de cliente e ficou aqui; `.bc` do battlecard foi para a forja.

   Tudo aqui é escopado por `.m3-deck`, e é o escopo que permite estas regras conviverem
   com as camadas de cima sem alcançá-las: um deck declara as PRÓPRIAS variáveis
   (`--ground`, `--ink`, `--brass`, `--linha`…) dentro do container, e vários desses
   nomes colidem de propósito com os da camada `tokens`. Hoistar qualquer uma delas
   para `:root` quebraria as outras páginas da pasta na hora. Regra nova entra sempre
   sob o prefixo.

   `decks` é a ÚLTIMA camada da cascata: um deck ocupa a página inteira e não divide
   superfície com nada.
   -------------------------------------------------------------------------- */
@layer decks {
  .m3-deck {
    --ground:      #0d1712;
    --ground-2:    #132019;
    --ground-3:    #1a2a21;
    --ink:         #eef2ea;
    --ink-dim:     #a3b4a8;
    --ink-faint:   #6d8074;
    --verde:       #3fae5c;
    --verde-deep:  #228e3b;
    --verde-glow:  rgba(63,174,92,.14);
    --brass:       #c9a25e;
    --brass-dim:   #8d6f3f;
    --alerta:      #d98f2b;
    --critico:     #c8543f;
    --linha:       rgba(163,180,168,.16);
    --linha-forte: rgba(163,180,168,.30);

    --display: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    --corpo:   ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    /* ABSORÇÃO (F5a do plano `comercial`): era `position: fixed; inset: 0`, de quando o deck
       era um arquivo solto que ocupava a janela inteira. Numa PÁGINA da pasta isso escondia
       por baixo do deck o `<nav>` canônico e o rodapé — as guardas 11 e 14 passavam medindo
       markup que ninguém conseguia ver, e o deck não tinha volta para o índice. Em fluxo
       normal com altura de viewport, o miolo não muda um pixel: `.palco` e `.barra` são
       absolutos DENTRO deste container, e continuam sendo. */
    position: relative; height: 100vh;
    background: var(--ground);
    color: var(--ink);
    font-family: var(--corpo);
    font-size: clamp(15px, 1.15vw, 19px);
    line-height: 1.55;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
  }

  /* fundo: a grade de 6 colunas do hub, quase imperceptível */
  .m3-deck::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image:
      linear-gradient(to right, var(--linha) 1px, transparent 1px),
      radial-gradient(ellipse 70% 55% at 50% 0%, var(--verde-glow), transparent 70%);
    background-size: calc(100% / 6) 100%, 100% 100%;
    opacity: .5;
  }

  /* ── palco ─────────────────────────────────────────────────────────────── */
  .m3-deck .palco { position: absolute; inset: 0 0 62px 0; display: grid; place-items: center; padding: 3.2vh 4.5vw; }

  .m3-deck .slide {
    display: none; width: min(1180px, 100%); max-height: 100%;
    overflow-y: auto; overflow-x: hidden;
    scrollbar-width: thin; scrollbar-color: var(--linha-forte) transparent;
  }
  .m3-deck .slide.ativo { display: block; animation: entra .34s cubic-bezier(.2,.7,.3,1) both; }
  @keyframes entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) { .m3-deck .slide.ativo { animation: none; } }

  /* ── tipografia ────────────────────────────────────────────────────────── */
  .m3-deck .eyebrow {
    font-family: var(--mono); font-size: .68em; letter-spacing: .18em; text-transform: uppercase;
    color: var(--brass); margin: 0 0 1.1em 0; display: flex; align-items: center; gap: .8em;
  }
  .m3-deck .eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--linha); }

  .m3-deck h1 { font-family: var(--display); font-size: clamp(2.6rem, 6.2vw, 5rem); line-height: .98;
       letter-spacing: -.025em; font-weight: 600; margin: 0 0 .38em 0; text-wrap: balance; }
  .m3-deck h2 { font-family: var(--display); font-size: clamp(1.9rem, 3.9vw, 3.1rem); line-height: 1.06;
       letter-spacing: -.02em; font-weight: 600; margin: 0 0 .55em 0; text-wrap: balance; }
  .m3-deck h3 { font-family: var(--corpo); font-size: 1.02em; font-weight: 650; line-height: 1.3;
       margin: 0 0 .4em 0; letter-spacing: -.005em; }
  .m3-deck .lead { font-size: 1.22em; line-height: 1.5; color: var(--ink-dim); max-width: 62ch; margin: 0 0 1.4em 0; }
  .m3-deck p { margin: 0 0 1em 0; max-width: 68ch; }
  .m3-deck p:last-child { margin-bottom: 0; }
  .m3-deck strong { color: var(--ink); font-weight: 650; }
  .m3-deck em { color: var(--brass); font-style: italic; }
  .m3-deck .verde { color: var(--verde); }
  .m3-deck .brass { color: var(--brass); }

  /* ── capa ──────────────────────────────────────────────────────────────── */
  .m3-deck .capa { text-align: left; }
  .m3-deck .capa .marca { font-family: var(--mono); font-size: .72em; letter-spacing: .3em; text-transform: uppercase;
                 color: var(--verde); margin-bottom: 2.4em; display: block; }
  .m3-deck .capa h1 { max-width: 15ch; }
  .m3-deck .capa .sub { font-size: 1.3em; color: var(--ink-dim); max-width: 52ch; margin: 0 0 2.6em 0; line-height: 1.45; }
  .m3-deck .capa .meta { display: flex; flex-wrap: wrap; gap: 2.4em; padding-top: 1.6em; border-top: 1px solid var(--linha);
                font-family: var(--mono); font-size: .74em; color: var(--ink-faint); letter-spacing: .05em; }
  .m3-deck .capa .meta b { display: block; color: var(--ink); font-weight: 500; margin-top: .35em; letter-spacing: 0;
                  font-family: var(--corpo); font-size: 1.25em; }

  /* ── divisória de seção ────────────────────────────────────────────────── */
  .m3-deck .divisoria { text-align: left; }
  .m3-deck .divisoria .num { font-family: var(--mono); font-size: .72em; letter-spacing: .22em; color: var(--brass);
                    text-transform: uppercase; margin-bottom: 1.6em; }
  .m3-deck .divisoria h2 { font-size: clamp(2.3rem, 5.4vw, 4.2rem); max-width: 18ch; }
  .m3-deck .divisoria .lead { font-size: 1.15em; }
  .m3-deck .trilha { display: flex; gap: 6px; margin-top: 2.6em; }
  .m3-deck .trilha i { height: 4px; flex: 1; background: var(--linha); border-radius: 2px; }
  .m3-deck .trilha i.on { background: var(--verde); }

  /* ── grades de cards ───────────────────────────────────────────────────── */
  .m3-deck .grade { display: grid; gap: 14px; }
  .m3-deck .g2 { grid-template-columns: repeat(2, 1fr); }
  .m3-deck .g3 { grid-template-columns: repeat(3, 1fr); }
  .m3-deck .g4 { grid-template-columns: repeat(4, 1fr); }
  @media (max-width: 860px) { .m3-deck .g3, .m3-deck .g4 { grid-template-columns: repeat(2, 1fr); } }

  .m3-deck .card { background: var(--ground-2); border: 1px solid var(--linha); border-radius: 3px;
          padding: 1.15em 1.25em; }
  .m3-deck .card h3 { color: var(--ink); }
  .m3-deck .card p { font-size: .9em; color: var(--ink-dim); max-width: none; }
  .m3-deck .card.destaque { border-color: var(--verde-deep); background: linear-gradient(var(--ground-2), var(--ground-2)) padding-box; }
  .m3-deck .card .tag { font-family: var(--mono); font-size: .66em; letter-spacing: .12em; text-transform: uppercase;
               color: var(--brass); display: block; margin-bottom: .55em; }

  /* ── lista numerada / bullets ──────────────────────────────────────────── */
  .m3-deck .lista { list-style: none; padding: 0; margin: 0; display: grid; gap: .95em; }
  .m3-deck .lista li { display: grid; grid-template-columns: auto 1fr; gap: .9em; align-items: start;
              padding-bottom: .95em; border-bottom: 1px solid var(--linha); }
  .m3-deck .lista li:last-child { border-bottom: 0; padding-bottom: 0; }
  .m3-deck .lista .mk { font-family: var(--mono); font-size: .74em; color: var(--brass); padding-top: .28em;
               min-width: 2.2em; letter-spacing: .06em; }
  .m3-deck .lista .tx { max-width: 72ch; }
  .m3-deck .lista .tx b { display: block; color: var(--ink); font-weight: 650; margin-bottom: .12em; }
  .m3-deck .lista .tx span { color: var(--ink-dim); font-size: .93em; }

  /* ── números ───────────────────────────────────────────────────────────── */
  .m3-deck .numeros { display: grid; gap: 1px; background: var(--linha); border: 1px solid var(--linha); }
  .m3-deck .numeros.n2 { grid-template-columns: repeat(2, 1fr); }
  .m3-deck .numeros.n3 { grid-template-columns: repeat(3, 1fr); }
  .m3-deck .numeros.n4 { grid-template-columns: repeat(4, 1fr); }
  @media (max-width: 860px) { .m3-deck .numeros.n3, .m3-deck .numeros.n4 { grid-template-columns: repeat(2, 1fr); } }
  .m3-deck .numeros div { background: var(--ground); padding: 1.4em 1.2em; }
  .m3-deck .numeros .v { font-family: var(--display); font-size: clamp(2rem, 4.2vw, 3.2rem); line-height: 1;
                color: var(--verde); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
  .m3-deck .numeros .k { font-size: .84em; color: var(--ink-dim); margin-top: .5em; display: block; max-width: 26ch; }

  /* ── moedas: o catálogo de módulos ─────────────────────────────────────── */
  .m3-deck .moedas { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
  @media (max-width: 1000px) { .m3-deck .moedas { grid-template-columns: repeat(4, 1fr); } }
  @media (max-width: 680px)  { .m3-deck .moedas { grid-template-columns: repeat(3, 1fr); } }
  .m3-deck .moeda { text-align: center; padding: .7em .3em; border: 1px solid var(--linha); border-radius: 3px;
           background: var(--ground-2); }
  .m3-deck .moeda .disco {
    width: 40px; height: 40px; margin: 0 auto .5em; border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, #e3c288, var(--brass) 46%, var(--brass-dim) 100%);
    border: 1px solid rgba(227,194,136,.5);
    display: grid; place-items: center;
    font-family: var(--mono); font-size: .58rem; font-weight: 700; color: #3a2c12; letter-spacing: -.02em;
  }
  .m3-deck .moeda b { display: block; font-size: .78em; font-weight: 600; line-height: 1.15; }
  .m3-deck .moeda span { display: block; font-size: .68em; color: var(--ink-faint); margin-top: .2em; }
  .m3-deck .moeda.on { border-color: var(--verde-deep); background: var(--ground-3); }
  .m3-deck .moeda.off { opacity: .38; }

  /* ── tabela ────────────────────────────────────────────────────────────── */
  .m3-deck .rolagem { overflow-x: auto; }
  .m3-deck table { width: 100%; border-collapse: collapse; font-size: .88em; }
  .m3-deck th, .m3-deck td { text-align: left; padding: .68em .8em; border-bottom: 1px solid var(--linha); vertical-align: top; }
  .m3-deck th { font-family: var(--mono); font-size: .76em; letter-spacing: .1em; text-transform: uppercase;
       color: var(--brass); font-weight: 500; white-space: nowrap; }
  .m3-deck td b { color: var(--ink); font-weight: 650; }
  .m3-deck td { color: var(--ink-dim); }
  .m3-deck tbody tr:last-child td { border-bottom: 0; }

  /* ── citação ───────────────────────────────────────────────────────────── */
  .m3-deck .citacao { border-left: 2px solid var(--verde); padding: .3em 0 .3em 1.5em; margin: 0 0 1.4em 0; }
  .m3-deck .citacao p { font-family: var(--display); font-size: clamp(1.35rem, 2.9vw, 2.15rem); line-height: 1.25;
               color: var(--ink); letter-spacing: -.015em; max-width: 26ch; }
  .m3-deck .citacao cite { font-family: var(--mono); font-size: .74em; color: var(--ink-faint); font-style: normal;
                  letter-spacing: .08em; display: block; margin-top: 1em; }

  /* ── aviso / honestidade ───────────────────────────────────────────────── */
  .m3-deck .aviso { border: 1px solid var(--brass-dim); border-left-width: 3px; background: rgba(201,162,94,.06);
           padding: 1em 1.2em; border-radius: 2px; }
  .m3-deck .aviso .tag { font-family: var(--mono); font-size: .68em; letter-spacing: .14em; text-transform: uppercase;
                color: var(--brass); display: block; margin-bottom: .5em; }
  .m3-deck .aviso p { font-size: .93em; color: var(--ink-dim); }

  /* ── barra inferior ────────────────────────────────────────────────────── */
  .m3-deck .barra { position: absolute; left: 0; right: 0; bottom: 0; height: 62px; display: flex; align-items: center;
           gap: 1.4em; padding: 0 4.5vw; border-top: 1px solid var(--linha); background: var(--ground);
           font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; color: var(--ink-faint); }
  .m3-deck .barra .tit { color: var(--ink-dim); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
                white-space: nowrap; letter-spacing: .04em; }
  .m3-deck .barra .rel { color: var(--brass); font-variant-numeric: tabular-nums; }
  .m3-deck .barra .cnt { font-variant-numeric: tabular-nums; }
  .m3-deck .barra button { font: inherit; color: var(--ink-faint); background: transparent; border: 1px solid var(--linha);
                  padding: .38em .7em; border-radius: 2px; cursor: pointer; letter-spacing: .08em; }
  .m3-deck .barra button:hover { color: var(--ink); border-color: var(--linha-forte); }
  .m3-deck .barra button:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }
  .m3-deck .progresso { position: absolute; left: 0; top: -1px; height: 2px; background: var(--verde);
               transition: width .3s cubic-bezier(.2,.7,.3,1); }

  /* ── notas do apresentador ─────────────────────────────────────────────── */
  .m3-deck .notas { position: absolute; right: 0; top: 0; bottom: 62px; width: min(430px, 92vw);
           background: var(--ground-2); border-left: 1px solid var(--linha-forte);
           padding: 2.2em 2em; overflow-y: auto; transform: translateX(100%);
           transition: transform .28s cubic-bezier(.2,.7,.3,1); }
  .m3-deck .notas.aberta { transform: none; }
  @media (prefers-reduced-motion: reduce) { .m3-deck .notas { transition: none; } }
  .m3-deck .notas h4 { font-family: var(--mono); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
              color: var(--brass); margin: 0 0 1.2em 0; font-weight: 500; }
  .m3-deck .notas .bloco { font-size: .9rem; line-height: 1.6; color: var(--ink-dim); }
  .m3-deck .notas .bloco p { max-width: none; margin-bottom: .9em; }
  .m3-deck .notas .bloco b { color: var(--ink); }
  .m3-deck .notas .fala { border-left: 2px solid var(--verde-deep); padding-left: 1em; margin: 0 0 1.2em 0;
                 color: var(--ink); font-style: italic; }
  .m3-deck .notas .crono { font-family: var(--mono); font-size: .72rem; color: var(--brass); letter-spacing: .08em;
                  padding-bottom: 1em; margin-bottom: 1.2em; border-bottom: 1px solid var(--linha); }

  /* ── overview ──────────────────────────────────────────────────────────── */
  .m3-deck .overview { position: absolute; inset: 0 0 62px 0; background: var(--ground); padding: 3vh 4.5vw;
              overflow-y: auto; display: none; }
  .m3-deck .overview.aberta { display: block; }
  .m3-deck .overview .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
  .m3-deck .overview button { text-align: left; background: var(--ground-2); border: 1px solid var(--linha);
                     border-radius: 3px; padding: .9em 1em; cursor: pointer; color: var(--ink-dim);
                     font: inherit; font-size: .82rem; line-height: 1.35; }
  .m3-deck .overview button:hover { border-color: var(--linha-forte); color: var(--ink); }
  .m3-deck .overview button:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }
  .m3-deck .overview button b { display: block; color: var(--ink); font-weight: 600; margin-bottom: .3em; }
  .m3-deck .overview button .n { font-family: var(--mono); font-size: .68rem; color: var(--brass); letter-spacing: .1em; }
  .m3-deck .overview button.atual { border-color: var(--verde); }

}

/* ========================================================== CAMADA: landing
   A home do site: `index.html`. Página única de conversão — o argumento longo mora em
   `detalhes.html`. Tudo escopado por `body.landing`, pelo mesmo motivo da camada `atlas`:
   esta folha é lida pelas 45 páginas da pasta, e regra solta vazaria para elas.
   -------------------------------------------------------------------------- */
@layer landing {

  /* hero em duas colunas: texto à esquerda, a marca à direita */
  body.landing .lp-hero{max-width:1180px; margin:0 auto; padding:84px 28px 40px;
    display:grid; grid-template-columns:1.25fr .75fr; gap:40px; align-items:center}
  body.landing .lp-hero h1{margin:0; font-size:clamp(34px,5.2vw,62px); line-height:1.08;
    font-weight:800; letter-spacing:.01em}
  body.landing .lp-brilho{background:linear-gradient(100deg,#fff 10%, #ffd97a 38%, #a78bfa 72%, #67e8f9 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent}
  body.landing .lp-tag{font-size:clamp(15px,1.9vw,19px); color:var(--muted); max-width:640px;
    margin:18px 0 12px}
  body.landing .lp-arte{display:block; width:100%; max-width:420px; margin:0 auto; border-radius:18px;
    filter:drop-shadow(0 24px 60px rgba(76,54,140,.55))}
  @media(max-width:900px){
    body.landing .lp-hero{grid-template-columns:1fr; text-align:center; padding-top:56px}
    body.landing .lp-tag{margin-left:auto; margin-right:auto}
    body.landing .lp-hero .cta{justify-content:center}
    body.landing .lp-arte{max-width:260px}
  }

  /* faixa de prova logo abaixo do hero — os números que a série mede */
  body.landing .lp-prova{max-width:1180px; margin:0 auto; padding:0 28px}
  body.landing .lp-prova ul{list-style:none; margin:0; padding:18px 0; display:grid;
    grid-template-columns:repeat(4,1fr); gap:12px;
    border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
  body.landing .lp-prova li{text-align:center; color:var(--muted); font-size:13px; letter-spacing:.03em}
  body.landing .lp-prova b{display:block; font-size:clamp(22px,2.6vw,30px); color:var(--txt)}
  @media(max-width:760px){body.landing .lp-prova ul{grid-template-columns:repeat(2,1fr)}}

  body.landing section{padding-top:76px}
  body.landing .lp-centro{text-align:center}
  body.landing .lp-centro .lead{margin-left:auto; margin-right:auto; max-width:780px}
  body.landing .lp-centro .grid{text-align:left}

  /* ilustração no topo do card de problema */
  body.landing .lp-ilustra{display:block; width:100%; border-radius:12px; margin-bottom:16px;
    border:1px solid var(--line2)}

  /* número do card de benefício */
  body.landing .lp-num{display:inline-grid; place-items:center; width:34px; height:34px;
    border-radius:10px; margin-bottom:12px; font-weight:800; color:#2a1f00;
    background:linear-gradient(135deg,#ffe9a8,#f5c542 60%,#d9a63a)}

  /* card de módulo em LINHA: fusão pequena + texto. O `.modcard` da vitrine é vertical e pede
     4 colunas; aqui a grade inteira precisa caber numa rolagem curta. */
  body.landing .lp-modulo{display:flex; gap:14px; align-items:center; color:inherit;
    background:linear-gradient(180deg, var(--panel), var(--panel2));
    border:1px solid var(--line); border-radius:14px; padding:12px 14px;
    transition:border-color .18s, transform .18s}
  body.landing .lp-modulo:hover{border-color:var(--line2); transform:translateY(-2px); text-decoration:none}
  body.landing .lp-modulo .m3-fusao{width:76px; flex:none; border-radius:10px}
  body.landing .lp-modulo h3{font-size:15px; margin:0}
  body.landing .lp-modulo p{color:var(--muted); font-size:13px; margin:3px 0 0; line-height:1.45}

  body.landing .lp-metodos{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:8px}
  body.landing .lp-metodos .chip{font-size:13px; padding:6px 14px; color:var(--txt)}
  body.landing .lp-metodos .chip.wip{color:var(--gold)}

  body.landing .reflex a{font-style:normal}

  /* o fecho: CTA final em caixa própria */
  body.landing .lp-fecho{margin:84px 0 0; padding:48px 40px; border-radius:24px; text-align:center;
    border:1px solid rgba(245,197,66,.35);
    background:
      radial-gradient(600px 300px at 50% 0%, rgba(245,197,66,.14), transparent 70%),
      linear-gradient(180deg, var(--panel), var(--panel2))}
  body.landing .lp-fecho .lead{margin-left:auto; margin-right:auto; max-width:780px}
  body.landing .lp-fecho .cta{justify-content:center}
  @media (prefers-reduced-motion:reduce){body.landing .lp-modulo{transition:none}}
}