/* ============================================================
   saude.capital — folha de estilo única do site
   ============================================================
   Extraída de public/index.html na rodada 2 do plano de 50
   rodadas (docs/08). Regras:
   - O bloco de TOKENS abaixo é cópia idêntica de
     brand/tokens/tokens.css (fonte da verdade). Alterou lá,
     replica aqui; alterou aqui, replica lá.
   - Responsividade mobile-first com três breakpoints em
     min-width: 640px (sm) / 760px (md) / 900px (lg). Nenhuma
     regra nova de max-width.
   - Fontes self-hosted em /fonts (docs/02: nunca Google Fonts).
   ============================================================ */

/* ---------- Fontes self-hosted ---------- */
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/inter-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/fonts/inter-500.woff2") format("woff2");
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/fonts/inter-600.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/fonts/spacegrotesk-700.woff2") format("woff2");
}

/* ---------- Tokens ----------
   Cópia idêntica (de `:root{` em diante) de brand/tokens/tokens.css,
   que é a fonte da verdade. Vive aqui para o site não pagar um
   segundo request. Paleta: BRAND.md §3 · tipografia: §4 (display
   Space Grotesk 700, corpo Inter 400/500/600 — o "negrito" é o 600)
   · espaçamento: §5. */
:root{
  color-scheme: light dark;
  --ink:#0E2A47;
  --ink-2:#13355A;
  --teal:#0E7C7B;
  --teal-ink:#085B5A;
  --amber:#B8862F;
  --paper:#FAFBFC;
  --text:#1F2933;
  --muted:#435160;
  --line:#D9E0E6;
  --ok-bg:#E7F5EE; --ok-ink:#14532D;
  --warn-bg:#FDF3E3; --warn-ink:#6B4A0E;
  --crit-bg:#FBEAEA; --crit-ink:#7A1B1B;
  /* Tokens do chip de status das fichas /normas/ — cores próprias
     (herdadas de norma.css), distintas de --ok-ink/--warn-ink/--crit-ink
     usados no resto do site. */
  /* #064E33 sobre o fundo derivado (rgba .1) mede 8,00–8,24:1 nos fundos
     reais do site (--paper/--surface) — a cor anterior (#0B6B47) media
     5,46:1, abaixo do piso AAA de 7:1 (P1-05, laudo 2026-09). */
  --chip-ok:#064E33; --chip-ok-bg:rgba(6,78,51,.1);
  --chip-info:#7A5A14; --chip-info-bg:rgba(184,134,47,.12);
  --chip-crit:#8C2B2B; --chip-crit-bg:rgba(140,43,43,.1);
  /* Botão primário: #fff sobre --teal (#0E7C7B) media 5,01:1 — abaixo do
     piso AAA de 7:1 para texto normal de 19,2 px/600 (P1-04, laudo de R7).
     Fundo próprio, mais escuro que o teal de marca: #fff sobre #0B5F5E
     mede 7,47:1, e o botão ainda se separa do cartão branco por 7,47:1. */
  --btn-bg:#0B5F5E; --btn-fg:#fff; --btn-bg-hover:#084A49;
  --radius:12px;
  --display:"Space Grotesk", "Inter", system-ui, sans-serif;
  --body:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* Variantes derivadas da paleta travada — fallback hex primeiro,
     color-mix depois (degrada limpo em navegador sem suporte). */
  --teal-soft:#EEF7F7;
  --teal-soft:color-mix(in srgb, var(--teal) 6%, white);
  --teal-border:#8FC9C8;
  --teal-border:color-mix(in srgb, var(--teal) 45%, white);
  --teal-glow:rgba(14,124,123,.35);
  --teal-glow:color-mix(in srgb, var(--teal) 35%, transparent);
  --ink-soft:#B7C3CE;
  --ink-soft:color-mix(in srgb, var(--ink) 22%, white);
  --amber-soft:#F1E4CC;
  --amber-soft:color-mix(in srgb, var(--amber) 18%, white);
  /* Superfícies (cartão/entrada/chip) — tokens novos para permitir tema
     escuro sem espalhar hex solto pelo resto da folha de estilo. */
  --surface:#fff;
  --surface-muted:#F1F5F8;
  --surface-input:#FCFDFE;
  --surface-chip:#F0F4F7;
  /* Cor de título/rótulo sobre superfície clara — em modo escuro vira
     clara também. Distinto de --ink, que continua sendo a tinta navy
     usada como FUNDO de header/hero/footer nos dois temas. */
  --heading:#0E2A47;
  /* Escala de espaçamento (BRAND.md §5: 4/8/16/24/32/48/64/96px).
     Em rem, não px: o valor computado é o mesmo no padrão de 16px e
     acompanha quem aumenta a fonte do navegador — requisito AAA. */
  --space-1:.25rem;
  --space-2:.5rem;
  --space-4:1rem;
  --space-6:1.5rem;
  --space-8:2rem;
  --space-12:3rem;
  --space-16:4rem;
  --space-24:6rem;
  /* Breakpoints declarados por extenso porque @media não aceita var().
     Toda regra responsiva do site usa um destes três, em min-width. */
  --bp-sm:640px;
  --bp-md:760px;
  --bp-lg:900px;
  /* Sistema de movimento (R32, docs/08) — duração e curva não dependem
     de tema, por isso vivem só aqui (não precisam repetir nos blocos
     de modo escuro; ver docs/03 § "Movimento"). Três durações:
     --dur-1 micro (hover/foco, cor, chip), --dur-2 troca de estado
     (ficha, resultado, tema), --dur-3 reveal (entrada de seção). Duas
     curvas: --ease-out para o que aparece/avança, --ease-in-out para o
     que alterna (tema, decorativo em loop). */
  --dur-1:120ms;
  --dur-2:200ms;
  --dur-3:400ms;
  --ease-out:ease-out;
  --ease-in-out:ease-in-out;

  /* ---------- Escala tipográfica (R33, docs/08 · docs/03 § "Tipografia
     e ritmo") ----------
     Escala única do site: nenhuma regra de site.css escreve tamanho de
     fonte literal — só `var(--fs-*)`. Não depende de tema (vive só
     aqui, como os tokens de movimento).

     Degraus fixos, razão 16:15 no intervalo de interface e leitura
     (12 → 16 px) e ~1,08 acima do corpo. Valores em rem para
     acompanhar quem aumenta a fonte do navegador (requisito AAA):

       --fs--4   .75rem     12 px   rótulo micro, tecla, código em chip
       --fs--3   .8125rem   13 px   versalete, mini-chip, legenda
       --fs--2   .875rem    14 px   apoio denso: metadado, nota, ação
       --fs--1   .9375rem   15 px   apoio de leitura: ementa, tabela
       --fs-0    1rem       16 px   CORPO (base do site)
       --fs-1    1.0625rem  17 px   lead curto, destaque, h3 de leitura
       --fs-2    1.125rem   18 px   h3 de cartão, botão de destaque
       --fs-3    1.25rem    20 px   h2 de cartão, marca, título de bloco
       --fs-4    1.375rem   22 px   h2 de página legal

     Degraus fluidos (display Space Grotesk 700, só em títulos):
       --fs-lead  lead do hero
       --fs-5     h2 de .conteudo
       --fs-6     h1 de ficha/quadro · h2 de seção da home
       --fs-7     h1 de página legal e de .conteudo
       --fs-8     h1 de perícias · número da barra de prova
       --fs-9     h1 do hero
     Exceções conhecidas (únicos tamanhos não-token do arquivo):
     `--fs-mono-rel` (.9em — código inline precisa acompanhar o pai,
     não a raiz) e o `.75em` do bloco `@media print`. */
  --fs--4:.75rem;
  --fs--3:.8125rem;
  --fs--2:.875rem;
  --fs--1:.9375rem;
  --fs-0:1rem;
  --fs-1:1.0625rem;
  --fs-2:1.125rem;
  --fs-3:1.25rem;
  --fs-4:1.375rem;
  --fs-lead:clamp(1.0625rem,2.4vw,1.25rem);
  --fs-5:clamp(1.375rem,3vw,1.625rem);
  --fs-6:clamp(1.625rem,4vw,2.25rem);
  --fs-7:clamp(1.875rem,4vw,2.5rem);
  --fs-8:clamp(2rem,4.6vw,2.875rem);
  --fs-9:clamp(2rem,5.5vw,3.4rem);
  --fs-mono-rel:.9em;

  /* Alturas de linha — seis degraus, do display ao texto longo.
     --lh-loose é exclusivo das áreas de leitura corrida (páginas
     legais, .conteudo, análises): linha mais alta em texto que se lê
     do começo ao fim, sem alterar o ritmo denso da interface. */
  --lh-display:1.1;
  --lh-tight:1.25;
  --lh-titulo:1.3;
  --lh-ui:1.5;
  --lh-body:1.6;
  --lh-loose:1.75;

  /* Medida de linha (SC 1.4.8 AAA: no máximo 80 caracteres).
     A unidade `ch` é a largura do algarismo "0", mais larga que a
     média das letras: em Inter, 60ch rende ~70 caracteres por linha (máximo 78)
     medidos no navegador — 72ch rendia até 83, acima do piso AAA.
     --medida é o teto de qualquer parágrafo de leitura;
     --medida-estreita vale para lead e resumo, que se leem em bloco.
     Sempre dentro de `min(100%, …)` — nunca estreitam o contêiner em
     tela pequena. Os contêineres de leitura (.legal 68ch,
     .norma-pagina 68ch, .conteudo 76ch) continuam mais largos que
     --medida de propósito: é neles que tabela, grade de cartão e
     bloco de código respiram. O verificador fica fora. */
  --medida:60ch;
  --medida-estreita:56ch;

  /* Ritmo das listas normativas: mesmo recuo do marcador e mesmo
     espaço entre itens em ficha, análise, kit e páginas legais. */
  --lista-recuo:1.5rem;
  --lista-gap:.4rem;

  /* Piso de largura das tabelas antes de a rolagem interna entrar.
     26rem cabe em 320 px menos as margens da .wrap; 34rem é o piso
     das tabelas de 4+ colunas (minuta, comparação). */
  --tabela-min:26rem;
  --tabela-min-larga:34rem;
}

/* ============ MODO ESCURO (prefers-color-scheme + alternador) ============
   Deriva da mesma marca — não a substitui. Só os tokens de "página
   clara" viram escuros; as seções que já são navy (.hero, header,
   footer, .conf) permanecem como estão, porque já leem como "modo
   escuro" hoje.

   Três estados (R14, docs/08 + docs/03):
   - "sistema" (padrão, sem atributo): só a media query decide — o
     bloco abaixo aplica os tokens quando o SO pede escuro, exceto se
     alguém forçou "claro" (:not([data-theme="claro"])).
   - "escuro" forçado (data-theme="escuro" no <html>, gravado pelo
     alternador em public/tema.js): mesmos tokens, fora da media query,
     valem independente do SO.
   - "claro" forçado (data-theme="claro"): a media query é excluída
     pelo :not acima e o bloco data-theme="escuro" nunca casa — sobra só
     o :root claro do topo do arquivo.

   Os dois blocos abaixo (media query e data-theme="escuro") têm o MESMO
   corpo de declarações por construção — evita duplicar de verdade
   seria exigir um pré-processador, que o site não tem (regra 1 do
   CLAUDE.md: sem build step). `scripts/verificar_tema_css.py` garante
   por CI/manualmente que os dois corpos continuam idênticos. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="claro"]){
    color-scheme: dark;
    --paper:#0A1A2C;
    --text:#E7EEF4;
    --muted:#A9BCCC;
    --line:rgba(255,255,255,.16);
    --surface:#122A44;
    --surface-muted:#0E2338;
    --surface-input:#0D2439;
    --surface-chip:#16324F;
    --teal-ink:#7FE0DD;
    --amber:#E0AE5C;
    --ok-bg:#123626; --ok-ink:#8FE6B8;
    --warn-bg:#3A2C10; --warn-ink:#F0C978;
    --crit-bg:#3A1414; --crit-ink:#F5A3A3;
    --chip-ok:#8FE3B8; --chip-ok-bg:rgba(143,227,184,.12);
    --chip-info:#EACB8A; --chip-info-bg:rgba(234,203,138,.12);
    --chip-crit:#F0A8A8; --chip-crit-bg:rgba(240,168,168,.12);
    /* No escuro o cartão do verificador é #122A44: um teal escuro se
       apagaria contra ele (1,95:1 de separação). O botão inverte — fundo
       claro, tinta navy: #0A1A2C sobre #7FE0DD mede 11,37:1, e o botão se
       separa do cartão por 9,45:1. */
    --btn-bg:#7FE0DD; --btn-fg:#0A1A2C; --btn-bg-hover:#A8ECEA;
    --teal-soft:color-mix(in srgb, var(--teal) 22%, var(--surface));
    --teal-border:color-mix(in srgb, var(--teal) 55%, var(--surface));
    --ink-soft:rgba(255,255,255,.22);
    --amber-soft:color-mix(in srgb, var(--amber) 26%, var(--surface));
    --heading:var(--text);
  }
}
:root[data-theme="escuro"]{
  color-scheme: dark;
  --paper:#0A1A2C;
  --text:#E7EEF4;
  --muted:#A9BCCC;
  --line:rgba(255,255,255,.16);
  --surface:#122A44;
  --surface-muted:#0E2338;
  --surface-input:#0D2439;
  --surface-chip:#16324F;
  --teal-ink:#7FE0DD;
  --amber:#E0AE5C;
  --ok-bg:#123626; --ok-ink:#8FE6B8;
  --warn-bg:#3A2C10; --warn-ink:#F0C978;
  --crit-bg:#3A1414; --crit-ink:#F5A3A3;
  --chip-ok:#8FE3B8; --chip-ok-bg:rgba(143,227,184,.12);
  --chip-info:#EACB8A; --chip-info-bg:rgba(234,203,138,.12);
  --chip-crit:#F0A8A8; --chip-crit-bg:rgba(240,168,168,.12);
  /* No escuro o cartão do verificador é #122A44: um teal escuro se
     apagaria contra ele (1,95:1 de separação). O botão inverte — fundo
     claro, tinta navy: #0A1A2C sobre #7FE0DD mede 11,37:1, e o botão se
     separa do cartão por 9,45:1. */
  --btn-bg:#7FE0DD; --btn-fg:#0A1A2C; --btn-bg-hover:#A8ECEA;
  --teal-soft:color-mix(in srgb, var(--teal) 22%, var(--surface));
  --teal-border:color-mix(in srgb, var(--teal) 55%, var(--surface));
  --ink-soft:rgba(255,255,255,.22);
  --amber-soft:color-mix(in srgb, var(--amber) 26%, var(--surface));
  --heading:var(--text);
}
:root[data-theme="claro"]{ color-scheme: light; }

/* ---------- Base ---------- */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  /* A linha acima já cancela toda transition/animation; estas regras
     zeram também o DESLOCAMENTO estático aplicado direto por :hover/
     :active (sem transition, seria um "salto" instantâneo — ainda é
     movimento para quem pediu reduced-motion). Consolidado aqui num
     único bloco (R32, docs/08) — antes vivia solto perto de .chip/.btn. */
  .card:hover, .card:focus-within, .uc:hover, .uc:focus-within,
  .eco-card:hover, .eco-card:focus-within,
  .conf .card:hover, .conf .card:focus-within{ transform:none; }
  .chip:active, .btn:active, .faq-sumario a:active, summary:active{ transform:none; }
}

/* ---------- Ajuste de contraste dependente do tema ----------
   --muted (#A9BCCC) sobre --surface-chip escuro dá 6.71:1 — abaixo do
   piso AAA de 7:1 para texto normal. Só este chip pequeno (rótulo
   "mapeada" do roadmap do corpus) precisa de um tom levemente mais
   claro; o resto do site que usa --muted foi validado contra fundos
   diferentes (--paper/--surface) e já passa em 7:1+. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="claro"]) .status-tag.mapeada{ color:#B7C3CE; }
  /* --muted (#A9BCCC) sobre --teal-soft escuro dá 6,02:1 no cartão
     ".eco-card-self" (fundo mais saturado que os demais .eco-card) —
     mesmo ajuste pontual do .mapeada acima, com tom próprio porque o
     fundo é outro (P1-05, laudo 2026-09). */
  :root:not([data-theme="claro"]) .eco-card.eco-card-self > span{ color:#C6D2DC; }
}
/* Mesmo par de regras, fora da media query, para tema escuro FORÇADO
   (data-theme="escuro") independente do SO — corpo idêntico ao de dentro
   da media query acima; conferido por scripts/verificar_tema_css.py. */
:root[data-theme="escuro"] .status-tag.mapeada{ color:#B7C3CE; }
:root[data-theme="escuro"] .eco-card.eco-card-self > span{ color:#C6D2DC; }
body{
  margin:0; background:var(--paper); color:var(--text);
  font-family:var(--body); font-size:var(--fs-0); line-height:var(--lh-body);
  -webkit-text-size-adjust:100%;
}
/* Troca curta de cor ao alternar tema (R14) — só a transição em si;
   o bloco `prefers-reduced-motion: reduce` no topo do arquivo já
   desliga TODA transition do site com !important, então isto nunca
   roda sob movimento reduzido mesmo sem o guard explícito abaixo, que
   fica aqui só para documentar a intenção junto da regra. */
@media (prefers-reduced-motion: no-preference){
  body{ transition:background-color var(--dur-1) var(--ease-in-out), color var(--dur-1) var(--ease-in-out); }
}
::selection{ background:var(--amber-soft); color:var(--heading); }
p{ text-wrap:pretty; }
img,svg{ display:block; max-width:100%; }
a{ color:var(--teal-ink); }
a:focus-visible,button:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:3px solid var(--amber); outline-offset:2px; border-radius:4px;
}
.btn:active, .chip:active, .faq-sumario a:active, summary:active{ transform:translateY(1px); }

/* Utilitários — o atributo style="" inline é bloqueado pela CSP em
   produção (style-src não tem 'unsafe-inline'/'unsafe-hashes'; só
   blocos <style> com hash batem). Qualquer ajuste pontual precisa ser
   classe aqui, nunca voltar a ser style="" no HTML — confirmado com
   el.style.length === 0 em produção antes desta correção. */
.mt-1{ margin-top:1.2rem; } .mt-2{ margin-top:var(--space-6); } .mt-3{ margin-top:var(--space-8); } .mt-4{ margin-top:2.5rem; }
.mt-tight{ margin:.4rem 0 0; } .mb-lead{ margin:0 0 var(--space-6); }
.scroll-x{ overflow-x:auto; }
.muted-text{ color:var(--muted); }
.max-46{ max-width:46rem; } .max-42{ max-width:42rem; }
.fs-95{ font-size:var(--fs--1); } .fs-9{ font-size:var(--fs--1); } .fs-85{ font-size:var(--fs--2); }
/* Medida de linha das classes tipográficas de apoio: a partir de 1280 px o
   teto em px da .wrap deixava passar 128–159 caracteres por linha, contra o
   máximo de 80 do SC 1.4.8 (AAA) — P1-06 do laudo de R7. O teto em ch
   acompanha o tamanho da fonte e não afeta telas estreitas. */
p.fs-95, p.fs-9, p.fs-85{ max-width:min(100%, var(--medida)); }
/* R37 — o mesmo teto para a prosa da home que R31 e R33 não alcançaram:
   nem `.checker .sub` nem os `p.mt-1` das seções têm classe de tamanho, e
   medidos no navegador rendiam 128 a 133 caracteres por linha de 1280 px
   para cima (P1-06 do laudo de R7, fechado só em parte). `min(100%, …)`
   mantém o comportamento em cartão e em tela estreita. */
.checker .sub,
section p.mt-1,
p.corpus-linha-rodape, p.corpus-linha-intro, p.corpus-linha-texto,
li.corpus-linha-item,
p.rede-nota, p.fundador-bio, p.email-extenso,
p.muted-text.max-46, p.muted-text.max-42,
section ul:not([class]) > li, section ol:not([class]) > li,
ul.atalhos-lista > li, ol.diagrama-legenda > li,
ul.servico-infra-lista > li, ul.hub-list > li{
  max-width:min(100%, var(--medida));
}
.i0{ --i:0; } .i1{ --i:1; } .i2{ --i:2; } .i3{ --i:3; } .i4{ --i:4; }
.i5{ --i:5; } .i6{ --i:6; } .i7{ --i:7; } .i8{ --i:8; }
/* -90°: com 9 raios a cada 40°, a simetria bilateral exige um raio ao topo. */
.a0{ --a:-90deg; } .a40{ --a:-50deg; } .a80{ --a:-10deg; } .a120{ --a:30deg; }
.a160{ --a:70deg; } .a200{ --a:110deg; } .a240{ --a:150deg; } .a280{ --a:190deg; } .a320{ --a:230deg; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link{
  position:absolute; left:1rem; top:-100px; z-index:50;
  background:var(--ink); color:#fff; padding:.8rem 1.2rem; border-radius:8px;
  text-decoration:none; font-weight:600; transition:top var(--dur-1) var(--ease-out);
}
.skip-link:focus{ top:1rem; }
.wrap{ width:min(1080px, 100% - 2.5rem); margin-inline:auto; }
.eyebrow{ font-size:var(--fs--3); font-weight:600; letter-spacing:.12em; text-transform:uppercase; }

header.site{
  background:var(--ink); color:#fff; position:sticky; top:0; z-index:20;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.site-bar{ display:flex; align-items:center; flex-wrap:wrap; row-gap:var(--space-2); gap:var(--space-4); min-height:64px; padding-block:var(--space-2); }
/* min-height de 44px (SC 2.5.5, AAA): o lockup tem 32px de altura e a
   barra tem 64px de folga vertical — o alvo cresce sem mover nada. */
.brand{ display:flex; align-items:center; text-decoration:none; color:#fff; flex-shrink:0; min-height:44px; }
.brand svg{ height:32px; width:auto; }
/* Até 539px a barra cabia marca + alternador + hambúrguer em uma linha
   só até 319px: de 320 a 430px ela quebrava em duas e o cabeçalho fixo
   ia a 109–121px (14% de um viewport de 844px) — medido em R7 e de novo
   em R37. Sem quebra, com gap menor e o lockup reduzido dentro do mínimo
   do BRAND.md §2 (80px de largura), a barra volta aos 64px em toda a
   faixa; abaixo de ~360px o lockup ainda encolhe por conta própria. */
@media (max-width:539px){
  .site-bar{ flex-wrap:nowrap; gap:.5rem; }
  .brand{ flex-shrink:1; min-width:0; }
  .brand svg{ height:auto; width:min(207px, 100%); }
}
/* gap de 1rem (R3): a nav ganhou Normas e Acompanhamento. Entre 900 e
   ~1040 px marca + nav + CTA ainda não cabem no .wrap; em vez de quebrar o
   header em duas linhas, o CTA "Falar com a equipe" se recolhe (consulta de
   contêiner sobre a barra — não é breakpoint de viewport) e segue
   acessível no menu, no hero e no rodapé. */
nav.main{ margin-left:auto; display:none; gap:1rem; }
nav.main a{ color:#DCEAF3; text-decoration:none; font-size:var(--fs--1); padding:.6rem 0; border-bottom:2px solid transparent; }
nav.main a:hover, nav.main a:active{ color:#fff; text-decoration:underline; }
nav.main a.ativa{ color:#fff; border-bottom-color:var(--teal); }
/* Menu mobile: hambúrguer nativo via <details> — abre/fecha sem JS (o
   script inline só fecha o painel ao navegar/Esc/clique fora). Os links
   do painel são duplicata do nav.main desktop — manter em sincronia. */
/* Especificidade .site-bar de propósito: os estilos genéricos de
   details/summary do FAQ (cartão claro, marcador "+") não podem vazar
   para o menu do header. */
.site-bar .menu-mobile{ margin-left:auto; position:relative; background:none; border:0; padding:0; margin-bottom:0; }
.site-bar .menu-mobile summary{
  list-style:none; cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; min-height:44px; padding:0; border-radius:10px;
  color:#DCEAF3; background:transparent; border:1.5px solid rgba(255,255,255,.35);
}
.site-bar .menu-mobile summary::after{ content:none; }
.site-bar .menu-mobile summary::-webkit-details-marker{ display:none; }
.site-bar .menu-mobile summary:hover, .site-bar .menu-mobile summary:active{ color:#fff; border-color:#fff; background:transparent; }
.site-bar .menu-mobile[open] summary{ background:rgba(255,255,255,.08); }
.menu-mobile .icone-x{ display:none; }
.menu-mobile[open] .icone-x{ display:block; }
.menu-mobile[open] .icone-menu{ display:none; }
.menu-painel{
  position:absolute; right:0; top:calc(100% + .6rem); z-index:30;
  min-width:min(78vw, 300px); background:var(--ink); border:1px solid rgba(255,255,255,.16);
  border-radius:14px; padding:.6rem; box-shadow:0 18px 40px rgba(0,0,0,.4);
  display:flex; flex-direction:column;
}
.menu-painel a{ display:flex; align-items:center; min-height:44px; padding:var(--space-2) .9rem; border-radius:8px; color:#DCEAF3; text-decoration:none; font-size:var(--fs-0); }
.menu-painel a:hover, .menu-painel a:active{ color:#fff; background:rgba(255,255,255,.07); }
.menu-painel .menu-cta{ margin-top:.4rem; border-top:1px solid rgba(255,255,255,.16); padding-top:.6rem; color:#8FE3E1; font-weight:600; }
/* Mobile-first: o botão de contato do header só entra com o nav de
   desktop (lg). Abaixo disso ele vive dentro do painel do hambúrguer. */
.site-bar > .btn{ display:none; }
/* Alternador de tema (R14) — mesmo tratamento visual do hambúrguer
   (44×44, borda translúcida, ícone só) para não competir com ele.
   `margin-left:auto` só entra abaixo de lg (regra em @media min-width:900px
   mais abaixo zera): com o nav de desktop visível, o próprio `margin-left:
   auto` do nav (linha ~213) já empurra nav+CTA+toggle como um grupo para a
   direita — dar auto também ao toggle nesse regime soma um segundo ponto
   de distribuição de espaço livre no mesmo flex line e faz o item quebrar
   para uma segunda linha mesmo sobrando espaço horizontal. Sem o nav (
   mobile), é o único jeito de empurrar o botão para junto do hambúrguer. */
.tema-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; min-height:44px; padding:0; border-radius:10px;
  color:#DCEAF3; background:transparent; border:1.5px solid rgba(255,255,255,.35);
  cursor:pointer; flex-shrink:0; margin-left:auto;
}
.tema-toggle:hover, .tema-toggle:active{ color:#fff; border-color:#fff; }
/* Os três ícones (sistema/claro/escuro) vivem todos no DOM; só o que
   corresponde ao `data-pref` atual (gravado por public/tema.js a partir
   da preferência lida no carregamento) fica visível. Sem `data-pref`
   ainda (JS não rodou) nenhum ícone aparece — janela mínima, o defer
   roda logo após o parse. */
.tema-toggle svg{ display:none; }
.tema-toggle[data-pref="sistema"] svg[data-icone="sistema"],
.tema-toggle[data-pref="claro"] svg[data-icone="claro"],
.tema-toggle[data-pref="escuro"] svg[data-icone="escuro"]{ display:block; }
#progresso-leitura{
  position:absolute; left:0; bottom:-1px; height:2px; width:0%; background:var(--teal);
  transition:width var(--dur-1) linear;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  min-height:48px; padding:.7rem 1.3rem; border-radius:999px;
  font-family:var(--body); font-size:var(--fs-3); font-weight:600;
  text-decoration:none; border:0; cursor:pointer;
}
.btn-primary{ background:var(--btn-bg); color:var(--btn-fg); }
.btn-primary:hover{ background:var(--btn-bg-hover); }
.btn-primary:disabled{ opacity:.6; cursor:default; }
.btn-ghost{ background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.4); }
.btn-ghost:hover{ border-color:#fff; }
header .btn{ margin-left:auto; min-height:44px; font-size:var(--fs--1); flex-shrink:0; white-space:nowrap; }
/* lg: o nav horizontal assume e o hambúrguer sai de cena. Com o
   alternador de tema (R14) somando 44px + 1 gap à barra, o cabeçalho
   com os seis itens de nav + CTA + alternador ultrapassava por ~4px a
   largura máxima de 1080px do .wrap logo ao cruzar este breakpoint —
   reduzir o gap de var(--space-4) (16px) para .75rem (12px) nesta
   faixa (só entre os itens do cabeçalho, o resto do site mantém
   var(--space-4)) recupera esses 4px sem mudar nada visualmente
   perceptível. */
@media (min-width:900px){
  nav.main{ display:flex; }
  header .btn{ margin-left:0; }
  .menu-mobile{ display:none; }
  .site-bar > .btn{ display:inline-flex; }
  .site-bar{ gap:.75rem; }
  .tema-toggle{ margin-left:0; }
}
/* Entre 900 e ~1120 px o nav de seis itens mais o CTA não cabem na
   mesma linha e o cabeçalho dobrava de altura. O CTA recolhe quando o
   próprio container (não o viewport) fica estreito; o contato segue
   acessível no menu e no rodapé. */
header.site > .wrap{ container-type:inline-size; }
@container (width < 1080px){ .site-bar > .btn-ghost{ display:none; } }
/* Exatamente em 900 px (onde o nav horizontal entra e o hambúrguer sai) a
   marca + os seis itens + o alternador somavam 842 px de conteúdo mais
   24 px de gap dentro de uma .wrap de 860 px: o nav caía para a segunda
   linha e o cabeçalho fixo ia a 118 px, nas treze páginas (medido em R37).
   Entre 900 e 1023 px o gap do nav cede 0,3rem — 24 px recuperados. */
@media (min-width:900px) and (max-width:1023px){ nav.main{ gap:.7rem; } }

.hero{
  position:relative; overflow:clip;
  background:linear-gradient(150deg,#0B2138 0%, var(--ink) 48%, #133A5E 100%);
  color:#E8EFF5; padding:3.5rem 0 var(--space-16);
}
/* Gradiente vivo: os glows saem do background e viram uma camada própria
   maior que o hero, movida por transform (compositor-only) — o azul
   profundo respira. Estático sob reduced-motion. */
.hero::before{
  content:""; position:absolute; inset:-30% -30%; z-index:0; pointer-events:none;
  background:
    radial-gradient(60rem 60rem at 78% 8%, rgba(14,124,123,.30), transparent 60%),
    radial-gradient(50rem 50rem at 12% 92%, rgba(184,134,47,.17), transparent 62%);
}
.hero .wrap{ position:relative; z-index:1; }
.hero-fundo{
  position:absolute; right:-8%; top:-15%; width:min(60vw,720px); height:auto;
  opacity:.16; pointer-events:none;
  -webkit-mask-image:linear-gradient(200deg, #000 30%, transparent 72%);
  mask-image:linear-gradient(200deg, #000 30%, transparent 72%);
}
.hero-fundo-esq{
  position:absolute; left:-4%; bottom:-18%; width:min(38vw,420px); height:auto;
  opacity:.13; pointer-events:none;
  -webkit-mask-image:linear-gradient(20deg, #000 30%, transparent 75%);
  mask-image:linear-gradient(20deg, #000 30%, transparent 75%);
}
.cta-final{ position:relative; overflow:clip; }
.cta-final .wrap{ position:relative; }
.cta-fundo{
  position:absolute; right:3%; top:-8%; width:min(42vw,440px); height:auto;
  opacity:.14; pointer-events:none; color:var(--ink);
}
@media (prefers-reduced-motion: no-preference){
  /* rotação quase imperceptível da folha de construção — 360° em 4 min */
  .hero-fundo .geo-lenta{ transform-origin:256px 256px; animation:geo-gira 240s linear infinite; }
  @keyframes geo-gira{ to{ transform:rotate(360deg); } }
  /* os traços sólidos da construção se desenham uma vez, no carregamento
     (pathLength=1 normaliza o comprimento; as guias tracejadas ficam fora) */
  .hero-fundo .desenha{ stroke-dasharray:1; animation:traco-desenha 1.8s ease .35s both; }
  @keyframes traco-desenha{ from{ stroke-dashoffset:1; } to{ stroke-dashoffset:0; } }
  /* constelação: deriva lenta e dessincronizada (compositor-only) +
     pulso de opacidade nos pontos; estática sob reduced-motion */
  .constelacao .deriva-a{ animation:deriva-a 52s ease-in-out infinite alternate; }
  .constelacao .deriva-b{ animation:deriva-b 74s ease-in-out infinite alternate; }
  .constelacao .deriva-c{ animation:deriva-c 88s ease-in-out infinite alternate; }
  @keyframes deriva-a{ to{ transform:translate(9px,-13px); } }
  @keyframes deriva-b{ to{ transform:translate(-12px,8px); } }
  @keyframes deriva-c{ to{ transform:translate(7px,12px); } }
  .constelacao .pulsa{ animation:pulsa-ponto 9s ease-in-out infinite alternate; }
  .constelacao .p2{ animation-delay:3s; }
  .constelacao .p3{ animation-delay:6s; }
  @keyframes pulsa-ponto{ from{ opacity:.3; } to{ opacity:.95; } }
  .hero::before{ animation:respira-fundo 80s ease-in-out infinite alternate; }
  @keyframes respira-fundo{ to{ transform:translate(6%, 4%); } }
}
.hero > .wrap{ position:relative; z-index:1; }
.hero h1{
  font-family:var(--display); font-weight:700; color:#fff;
  font-size:var(--fs-9); line-height:var(--lh-display);
  letter-spacing:-.02em; margin:.6rem 0 .8rem; text-wrap:balance;
}
.hero .eyebrow{ color:#8FD8D6; }
.hero p.lead{ font-size:var(--fs-lead); max-width:44rem; margin:0 0 var(--space-8); color:#C9D9E6; }
.hero .gold{ width:64px; height:3px; background:var(--amber); border-radius:2px; margin:1.6rem 0 0; }
/* Timbre documental (padrão da /pericias): marca em traço + fio de ouro. */
.timbre{ display:flex; align-items:center; gap:.9rem; margin-bottom:1.2rem; }
.timbre-marca{ width:34px; height:34px; flex:0 0 auto; color:var(--teal-ink); }
.hero .timbre-marca{ color:#7FE0DD; }
.timbre-fio{ flex:1; height:2px; border-radius:2px; background:linear-gradient(90deg, var(--amber), transparent 72%); }
/* Fio de ouro curto abrindo cada seção principal (só eyebrows diretos). */
section > .wrap > .eyebrow::before, section > .wrap > .reveal > .eyebrow::before{
  content:""; display:block; width:64px; height:3px; border-radius:2px;
  background:var(--amber); margin-bottom:.7rem;
}

.checker{
  background:var(--surface); color:var(--text); border-radius:var(--radius);
  box-shadow:0 18px 50px rgba(4,16,30,.4);
  padding:1.25rem; margin-top:var(--space-8);
}
.checker h2{ font-family:var(--display); font-weight:700; font-size:var(--fs-3); margin:0; color:var(--heading); }
.checker .sub{ margin:var(--space-1) 0 var(--space-4); color:var(--muted); font-size:var(--fs--1); }
.checker .beta{
  display:inline-block; margin-left:var(--space-2); vertical-align:middle;
  background:var(--warn-bg); color:var(--warn-ink);
  font-size:var(--fs--4); font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  padding:.2rem .55rem; border-radius:999px;
}
.checker label.field-label{ display:block; font-size:var(--fs--2); font-weight:600; color:var(--heading); margin-bottom:.4rem; }
.checker textarea{
  width:100%; min-height:88px; resize:vertical;
  font-family:var(--mono); font-size:var(--fs-0); line-height:var(--lh-ui);
  padding:.85rem var(--space-4); border:1.5px solid var(--line); border-radius:10px;
  color:var(--text); background:var(--surface-input);
}
.checker textarea::placeholder{ color:var(--muted); font-family:var(--body); opacity:.85; }
/* position/z-index: a lista de sugestões (.sugestoes, z-index:5) é
   absolutamente posicionada logo abaixo do campo e pode, em telas baixas,
   se estender por cima do botão "Verificar norma" — sem isso, um clique
   no botão enquanto a lista está aberta acerta a sugestão por baixo, não
   o botão (achado real de auditoria dinâmica, não hipotético). */
.checker-row{ position:relative; z-index:6; display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; margin-top:.9rem; }
.exemplos{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-4); }
.exemplos span{ font-size:var(--fs--2); color:var(--muted); align-self:center; }
.chip{
  font-family:var(--mono); font-size:var(--fs--2); cursor:pointer;
  background:var(--surface-chip); border:1px solid var(--line); border-radius:999px;
  padding:.55rem .9rem; min-height:44px; display:inline-flex; align-items:center;
  color:var(--text);
}
.chip:hover{ border-color:var(--teal); }
.chip.ativo{ background:var(--teal); border-color:var(--teal); color:#fff; }
.aviso{ font-size:var(--fs--2); color:var(--muted); margin:.9rem 0 0; max-width:min(100%, var(--medida)); }
/* Painel "?" discreto dos atalhos de teclado (R13): reaproveita o
   <details>/<summary> global, mas compacto — não é um acordeão de FAQ, é
   uma referência que a maioria nunca abre. */
.atalhos-painel{ margin:.9rem 0 0; font-size:var(--fs--2); }
.atalhos-painel summary{ min-height:44px; padding:.6rem .9rem; font-size:var(--fs--2); font-weight:600; }
.atalhos-lista{ margin:0; padding:0 1.2rem 1rem 2rem; color:var(--muted); list-style:disc; }
.atalhos-lista li{ margin:.3rem 0; }
kbd{
  font-family:var(--mono); font-size:var(--fs--3); background:var(--surface-chip); color:var(--text);
  border:1px solid var(--line); border-bottom-width:2px; border-radius:5px; padding:.05rem .4rem;
}
.recentes, .facetas{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:.75rem; align-items:center; }
.recentes span.rotulo, .facetas span.rotulo{ font-size:var(--fs--2); color:var(--muted); align-self:center; }
.facetas-grupo{ display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; }
.facetas-grupo .rotulo-grupo{ font-size:var(--fs--3); color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin-right:.2rem; }

.resultado-acoes{ display:flex; flex-wrap:wrap; gap:.6rem var(--space-4); align-items:center; margin:var(--space-2) 0 .3rem; }
.resultado-acoes select{
  font-family:var(--body); font-size:var(--fs--2); color:var(--text); background:var(--surface);
  border:1px solid var(--line); border-radius:8px; padding:.4rem .6rem; min-height:36px;
}

.auditoria-colada, .aviso-aproximada{
  background:var(--warn-bg); border:1px solid #E9C98A; border-radius:10px;
  padding:.85rem var(--space-4); font-size:var(--fs--2); color:var(--warn-ink); margin-bottom:.75rem;
}
.auditoria-colada ul{ margin:.4rem 0 0; padding-left:1.2rem; }

.comparar-caixa{ display:flex; align-items:center; gap:.4rem; font-size:var(--fs--3); color:var(--muted); margin-top:var(--space-2); }
.comparar-caixa input{ width:18px; height:18px; }
.comparacao-tabela{
  background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:.9rem var(--space-4) 1.1rem;
  margin-bottom:.9rem; overflow-x:auto;
}
.comparacao-tabela table{ width:100%; border-collapse:collapse; font-size:var(--fs--2); }
.comparacao-tabela th, .comparacao-tabela td{ text-align:left; padding:.45rem .6rem; border-bottom:1px solid var(--line); vertical-align:top; }
.comparacao-tabela th{ color:var(--muted); font-weight:600; white-space:nowrap; }
.relacionadas{ font-size:var(--fs--2); color:var(--muted); margin:var(--space-2) 0 0; }
.relacionadas button{
  font:inherit; background:none; border:0; padding:0; color:var(--teal-ink);
  text-decoration:underline; cursor:pointer;
}

.campo-busca{ position:relative; }
.sugestoes{
  position:absolute; z-index:5; left:0; right:0; top:100%; margin:.3rem 0 0;
  padding:.3rem; list-style:none; background:var(--surface); border:1px solid var(--line);
  border-radius:10px; box-shadow:0 12px 28px rgba(4,16,30,.15); max-height:260px; overflow-y:auto;
}
.sugestao{
  padding:.6rem .7rem; border-radius:7px; font-size:var(--fs--1); color:var(--text); cursor:pointer;
  min-height:44px; display:flex; align-items:center;
}
.sugestao.ativa, .sugestao:hover{ background:var(--teal-soft); }
.contador{ position:absolute; right:.8rem; bottom:.5rem; font-size:var(--fs--4); color:var(--muted); background:rgba(255,255,255,.85); padding:0 .2rem; }

.resultado{ margin-top:var(--space-4); display:grid; gap:.75rem; scroll-margin-top:80px; }
.resultado-status{ font-size:var(--fs--2); color:var(--muted); margin:0; }
.resultado-separador{
  font-size:var(--fs--4); font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); margin:.4rem 0 -.2rem; padding-top:.6rem; border-top:1px dashed var(--line);
}
.ficha{
  border:1px solid var(--line); border-left:4px solid var(--amber);
  border-radius:10px; padding: .9rem var(--space-4); background:var(--surface);
}
.ficha .cite{ font-family:var(--mono); font-size:var(--fs--2); color:var(--muted); font-variant-numeric:tabular-nums; }
.ficha h3{ font-family:var(--display); font-weight:700; font-size:var(--fs-1); margin:.2rem 0 .4rem; color:var(--heading); line-height:var(--lh-titulo); }
.ficha .meta{ display:flex; flex-wrap:wrap; gap:.45rem; align-items:center; font-size:var(--fs--2); }
.status{ font-weight:600; border-radius:999px; padding:.22rem .65rem; display:inline-flex; align-items:center; gap:.3rem; }
.selo-vigencia{ flex:0 0 auto; display:block; }
.status.ok{ background:var(--ok-bg); color:var(--ok-ink); }
.status.info{ background:var(--warn-bg); color:var(--warn-ink); }
.status.crit{ background:var(--crit-bg); color:var(--crit-ink); }

.risco-tabela table{ width:100%; border-collapse:collapse; background:var(--surface); border-radius:12px; overflow:hidden; font-size:var(--fs--1); }
.risco-tabela th, .risco-tabela td{ text-align:left; padding:.7rem .9rem; border-bottom:1px solid var(--line); vertical-align:top; }
.risco-tabela th{ font-family:var(--display); font-weight:700; color:var(--heading); background:var(--surface-muted); }
.risco-tabela tbody tr:last-child td{ border-bottom:0; }
.ficha a{ font-weight:600; }
.ficha .nota{ font-size:var(--fs--2); color:var(--muted); margin:.45rem 0 0; }
.ficha .ementa{ font-size:var(--fs--1); color:var(--text); line-height:var(--lh-ui); margin:.15rem 0 var(--space-2); }
.ficha .forca{ font-size:var(--fs--3); color:var(--muted); margin:.4rem 0 0; font-family:var(--mono); }
.ficha-acoes{ display:flex; flex-wrap:wrap; gap:.4rem var(--space-4); margin-top:.55rem; font-size:var(--fs--2); }
/* Alvo de toque das ações da ficha do verificador — "Ver ficha completa",
   "Compartilhar", "Texto oficial ↗" e "Reportar erro" não são links em texto
   corrido, e por isso valem os 44 px do SC 2.5.5 (R35). */
.ficha-acoes > a, .ficha-acoes > button{ min-height:44px; display:inline-flex; align-items:center; }

/* Anatomia completa da ficha dentro do resultado (R12): as mesmas linhas de
   metadados e os mesmos blocos de citação de /normas/<id>.html, recolhidos
   num <details> para que quatro resultados continuem cabendo numa tela de
   320 px. Reaproveita dl.meta e .citar — a folha é a mesma das fichas. */
/* Neutraliza o cartão de <details> do FAQ (regra genérica acima): dentro de
   uma ficha isso viraria cartão dentro de cartão. Aqui é só um divisor com
   um disparador de texto. */
.ficha-detalhe{
  margin:.7rem 0 0; background:none; border:0; border-top:1px solid var(--line);
  border-radius:0; padding:0;
}
.ficha-detalhe > summary{
  padding:.5rem 0; min-height:44px; border-radius:0; gap:.35rem;
  justify-content:flex-start; font-size:var(--fs--2); font-weight:600; color:var(--teal-ink);
}
.ficha-detalhe > summary:hover{ background:none; text-decoration:underline; }
.ficha-detalhe > summary::after{ content:"▾"; font-family:inherit; font-size:var(--fs--4); transform:none; }
.ficha-detalhe[open] > summary::after{ content:"▴"; transform:none; }
/* display:block anula o `.ficha .meta{display:flex}` dos chips de status —
   mesma classe, dois papéis: lá é a linha de chips, aqui é a tabela de
   definições da ficha. */
.ficha-detalhe dl.meta{ display:block; margin:0 0 1rem; font-size:var(--fs--1); }
.ficha-detalhe dl.meta div{ padding:.5rem 0; grid-template-columns:minmax(8rem,12rem) 1fr; }
@media (max-width:560px){ .ficha-detalhe dl.meta div{ grid-template-columns:1fr; gap:.1rem; } }
.ficha-detalhe dl.meta dt{ font-size:var(--fs--2); }
.ficha-detalhe dl.meta dd{ font-size:var(--fs--1); }
.ficha-detalhe .citar{ margin:0 0 .9rem; padding:.8rem 1rem; font-size:var(--fs--2); }
.ficha-detalhe .citar code{ display:block; font-size:var(--fs--3); }
.ficha-detalhe .citar .link-btn{ margin-top:.6rem; min-height:44px; font-size:var(--fs--2); }
.ficha-detalhe .citar:last-child{ margin-bottom:.2rem; }
.link-btn{
  font:inherit; font-weight:600; color:var(--teal-ink); background:none; border:0; padding:0;
  cursor:pointer; text-decoration:underline; min-height:24px;
}
.vazio{
  border:1.5px dashed var(--line); border-radius:10px; padding:var(--space-4);
  background:var(--surface-input); color:var(--muted); font-size:var(--fs--1);
}

/* ---------- Estados do verificador (R31) ----------
   O cartão mostra um estado por vez — inicial, campo vazio, sem
   correspondência, falha ao carregar o índice — e todos vivem no mesmo
   ponto da página: logo abaixo do campo. A ressalva de cobertura é um
   parágrafo do corpo do estado, nunca um rodapé solto: é ela que qualifica
   o "não encontrada" (regra 4 do CLAUDE.md).
   Contrastes medidos (WCAG): --text sobre --surface-input 14,49:1 (claro) e
   13,50:1 (escuro); --crit-ink sobre --crit-bg 9,03:1 e 8,26:1. */
.estado{
  border:1px solid var(--line); border-left:3px solid var(--teal);
  border-radius:10px; background:var(--surface-input);
  padding:var(--space-4); display:grid; gap:.5rem;
}
.estado p{ margin:0; font-size:var(--fs--1); color:var(--text); max-width:min(100%, var(--medida)); }
.estado .estado-titulo{
  font-family:var(--display); font-weight:700; font-size:var(--fs-0); color:var(--heading);
}
.estado .link-btn{ justify-self:start; min-height:44px; display:inline-flex; align-items:center; }
.estado-erro{ border-left-color:var(--crit-ink); background:var(--crit-bg); }
.estado-erro .estado-titulo{ color:var(--crit-ink); }
.estado-inicial{ margin-top:var(--space-4); }
/* `display:grid`/`display:flex` de classe vencem o `display:none` que o
   navegador dá a [hidden] (mesma especificidade, folha do autor depois) —
   sem estas linhas, `.hidden = true` no JS não esconderia nada. */
.estado[hidden], .recentes[hidden], .facetas[hidden]{ display:none; }

/* O exemplo em destaque fica ao lado do botão — é o único chip acima da
   dobra. Os demais mudaram para dentro do painel recolhido, o que tira 22
   paradas de tabulação de antes do campo (P3-02). */
.chip-exemplo{ font-family:var(--body); }

/* Painel recolhido "Outras formas de consultar": exemplos, recentes,
   facetas e atalhos. Fechado por padrão em qualquer largura — é o que
   impede que a chegada de normas.json empurre o hero (P1-02). */
.checker-mais{ margin-top:var(--space-4); }
.checker-mais-corpo{ padding:0 1.2rem var(--space-4); }
.checker-mais-intro{ margin:0 0 .2rem; font-size:var(--fs--2); color:var(--muted); max-width:min(100%, var(--medida)); }
.checker-mais .atalhos-painel{ margin-top:var(--space-4); }

.cobertura{ background:var(--surface); border-bottom:1px solid var(--line); position:relative; overflow:clip; }
/* A marca d'água do selo é ornamento: fica fora da faixa estreita. */
.cobertura .selo-marca-dagua{
  display:none;
  position:absolute; right:-20px; top:50%; transform:translateY(-50%);
  width:140px; height:140px; color:var(--teal); opacity:.07; pointer-events:none;
}
@media (min-width:640px){ .cobertura .selo-marca-dagua{ display:block; } }
.cobertura .wrap{ padding:1.1rem 0; }
.cobertura-titulo{ font-size:var(--fs--2); font-weight:600; color:var(--heading); margin:0 0 .6rem; }
.cobertura-titulo .cobertura-data{ font-weight:400; color:var(--muted); }
.cobertura-lista{ display:flex; flex-wrap:wrap; gap:var(--space-2); }
.cobertura-lista details{
  background:var(--teal-soft); color:var(--teal-ink); border:1px solid var(--teal-border);
  border-radius:12px; font-size:var(--fs--2); overflow:hidden;
}
.cobertura-lista summary{
  padding:.35rem .8rem; cursor:pointer; list-style:none; min-height:44px;
  display:flex; align-items:center; gap:.3rem;
}
.cobertura-lista summary::-webkit-details-marker{ display:none; }
.cobertura-lista summary::after{ content:"▾"; font-size:var(--fs--4); }
.cobertura-lista details[open] summary::after{ content:"▴"; }
.cobertura-lista .orgao-normas{
  list-style:none; margin:0; padding:.2rem .8rem .7rem; display:grid; gap:.3rem;
}
.cobertura-lista .orgao-normas a,
.cobertura-lista .orgao-normas .link-btn{ color:var(--teal-ink); font-size:var(--fs--3); text-align:left;
  /* SC 2.5.5 (AAA): os itens de uma linha ficavam em 42 px de altura — os
     três últimos alvos abaixo de 44 px que restavam no site (P2-04 do laudo
     de R7, fechado em R35 só para a ficha). */
  min-height:44px; display:flex; align-items:center; }

.prova{ background:var(--ink-2); color:#C9D9E6; }
.prova .wrap{
  display:flex; flex-wrap:wrap; row-gap:1.4rem; padding:2.1rem 0; justify-content:center; text-align:center;
}
.prova-item{
  padding:.4rem 1.6rem; flex:1 1 160px; max-width:215px;
  border-left:1px solid rgba(255,255,255,.14);
}
.prova-item:first-child{ border-left:0; }
.prova-num{
  display:block; font-family:var(--display); font-weight:700; color:#fff;
  font-size:var(--fs-8); line-height:var(--lh-display); font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
}
.prova-label{ display:block; margin-top:.45rem; font-size:var(--fs--2); color:#C9D9E6; line-height:var(--lh-ui); }

section[id]{ scroll-margin-top:80px; }
section{ padding:var(--space-16) 0; }
@media (min-width:900px){ section{ padding:5rem 0; } }
.bg-muted{ background:var(--surface-muted); }
section h2.title{
  font-family:var(--display); font-weight:700; color:var(--heading);
  font-size:var(--fs-6); line-height:var(--lh-tight); margin:.4rem 0 1.4rem;
  letter-spacing:-.015em; text-wrap:balance;
}
section .eyebrow{ color:var(--teal-ink); }
.grid{ display:grid; gap:1.25rem; }
/* minmax(0,1fr), não 1fr: `1fr` é `minmax(auto,1fr)` e a trilha nunca
   encolhe abaixo do min-content do cartão. Com aumento só de fonte a 200 %
   (SC 1.4.4) o min-content cresce, a grade de 4 colunas passava de 1 900 px
   e a home ganhava rolagem horizontal — medido em R37. */
@media (min-width:760px){ .grid.c3{ grid-template-columns:repeat(3,minmax(0,1fr)); } .grid.c2{ grid-template-columns:repeat(2,minmax(0,1fr)); } .grid.c4{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
/* 4 colunas só com folga real — em tablet a grade c4 respira em 2×2. */
@media (min-width:900px){ .grid.c4{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.4rem; display:flex; flex-direction:column;
  transition:transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
/* Fio âmbar estrutural (padrão da /pericias, unificado em 2026-08-12):
   a borda esquerda âmbar é assinatura de card da marca — fio, não acento.
   Ver BRAND.md, regra do âmbar revista. */
.card, .uc, .eco-card, .servico-infra, .fundador{ border-left:4px solid var(--amber); }
/* No hover, o fio âmbar permanece: a elevação realça só sombra e borda
   superior/direita (o border-color do hover não pode apagar o fio). */
.card:hover, .card:focus-within, .uc:hover, .uc:focus-within,
.eco-card:hover, .eco-card:focus-within{ border-left-color:var(--amber); }
/* Gramática de hover — sombra dura em seções claras */
.card:hover, .card:focus-within, .uc:hover, .uc:focus-within{
  transform:translateY(-3px);
  box-shadow:5px 5px 0 0 var(--ink-soft);
  border-color:var(--teal-border);
}
.uc{ transition:transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out); }
.card h3{ font-family:var(--display); font-weight:700; font-size:var(--fs-2); color:var(--heading); margin:.6rem 0 var(--space-2); }
.card p{ margin:0; color:var(--muted); font-size:var(--fs--1); }
/* Cabeçalho dos passos: ícone de linha geométrica (mesma linguagem da
   folha de construção do hero) + numeração em display. */
.passo-cab{ display:flex; align-items:center; gap:.7rem; }
.passo-icone{ width:44px; height:44px; color:var(--teal-ink); flex:0 0 auto; }
.passo-num{ font-family:var(--display); font-weight:700; font-size:var(--fs--1); color:var(--muted); letter-spacing:.06em; }
/* Cabeçalho dos cards de serviço: ícone à esquerda, tag de status à direita. */
.svc-cab{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-bottom:.35rem; }
/* De 900 a 1119 px a .wrap ainda não chegou a 1080 px: a grade de quatro
   colunas dá 200 px por cartão (155 px de conteúdo) e o ícone de 40 px mais
   a tag de 146 px vazavam 22 px, empurrando a página inteira a 902 px de
   largura — o único overflow horizontal medido no site em R37. Nessa faixa
   a tag desce para baixo do ícone nos quatro cartões (não só nos que
   vazam), para que os títulos continuem alinhados entre si. */
@media (min-width:900px) and (max-width:1119px){
  .svc-cab{ flex-direction:column; align-items:flex-start; gap:.45rem; }
}
.svc-icone{ width:40px; height:40px; color:var(--teal-ink); flex:0 0 auto; }
.camada-tag{ font-size:var(--fs--4); font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--teal-ink); }

.status-tag{
  display:inline-flex; align-items:center; gap:.35rem; font-size:var(--fs--4); font-weight:600;
  letter-spacing:.04em; text-transform:uppercase; padding:var(--space-1) .6rem; border-radius:999px;
  margin-bottom:.7rem; width:fit-content;
  max-width:100%; min-width:0;
}
.status-tag.disponivel{ background:var(--ok-bg); color:var(--ok-ink); }
.status-tag.em-breve{ background:var(--warn-bg); color:var(--warn-ink); }
.status-tag.sob-consulta{ background:var(--teal-soft); color:var(--teal-ink); }

.servico-infra{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.4rem 1.6rem;
}
.servico-infra h3{ font-family:var(--display); font-weight:700; font-size:var(--fs-3); color:var(--heading); margin:var(--space-2) 0 0; }
/* CTA de linha única: padding amplia a área tocável a ≥44px e a margem
   negativa preserva o ritmo vertical (sem alvo adjacente — sem sobreposição). */
.link-btn-static{ font-weight:600; color:var(--teal-ink); text-decoration:underline; display:inline-block; padding:.8rem .3rem; margin:-.65rem -.3rem; }
.servico-infra-lista{ list-style:none; margin:var(--space-4) 0 0; padding:0; display:grid; gap:var(--space-2); max-width:46rem; }
.servico-infra-lista li{ display:flex; gap:.6rem; align-items:flex-start; color:var(--muted); font-size:var(--fs--1); }
.servico-infra-lista li::before{ content:""; flex:0 0 auto; width:8px; height:8px; border-radius:50%; background:var(--teal); margin-top:.45rem; }
.servico-infra-rotulo{ font-size:var(--fs--3); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--teal-ink); margin:1.6rem 0 .6rem; }

.status-tag.mapeada{ background:var(--surface-chip); color:var(--muted); }
.status-tag.monitorando{ background:var(--teal-soft); color:var(--teal-ink); }

.corpus-linha{ }
.corpus-linha-intro{ color:var(--muted); max-width:44rem; margin:.3rem 0 0; }
.corpus-linha-lista{ list-style:none; margin:1.4rem 0 0; padding:0; display:grid; gap:1.1rem; max-width:44rem; }
.corpus-linha-item{ display:flex; gap:.9rem; }
.corpus-linha-marca{
  flex:0 0 auto; width:12px; height:12px; border-radius:50%; margin-top:.4rem;
  background:var(--surface); border:2px solid var(--ink-soft);
}
.corpus-linha-item.pronta .corpus-linha-marca{ background:var(--teal); border-color:var(--teal); }
.corpus-linha-titulo{ font-family:var(--display); font-weight:700; color:var(--heading); margin:.3rem 0 .2rem; font-size:var(--fs-0); }
.corpus-linha-texto{ color:var(--muted); margin:0; font-size:var(--fs--1); }
.corpus-linha-rodape{ color:var(--muted); font-size:var(--fs--2); max-width:44rem; margin:1.3rem 0 0; padding-top:.9rem; border-top:1px dashed var(--line); }

.rail-fases{ display:none; }
@media (min-width:760px){
  .rail-fases{
    display:flex; align-items:center; margin:0 0 1.2rem; padding:0 calc(12.5% - 6px);
  }
  .rail-fases .ponto{
    flex:0 0 auto; width:12px; height:12px; border-radius:50%;
    background:var(--surface); border:2px solid var(--ink-soft);
  }
  .rail-fases .ponto.preenchido{ background:var(--teal); border-color:var(--teal); }
  .rail-fases .linha{ flex:1 1 auto; height:2px; background:var(--ink-soft); }
}

/* Teto de 3 colunas: 9 cards fecham um quadrado 3×3 — em 4 colunas o
   nono card ficava órfão numa linha só dele. */
.uc-grid{ display:grid; gap:.75rem; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); }
/* lg: teto de 3 colunas — 9 cards fecham um quadrado 3x3. */
@media (min-width:900px){ .uc-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.uc{
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  padding: .95rem 1.1rem; font-size:var(--fs--1);
}
.uc{ scroll-margin-top:96px; }
/* Cada card é um link para /casos/<slug>.html (R20). Cor herdada e sem
   sublinhado para que o card não vire um bloco teal — o sublinhado aparece
   no título ao passar o ponteiro ou ao receber foco; o anel de foco visível
   vem da regra global `a:focus-visible`. O alvo de toque é o card inteiro,
   muito acima dos 44 px. */
a.uc{ display:block; color:var(--text); text-decoration:none; }
a.uc:hover b, a.uc:focus-visible b{ text-decoration:underline; }
.uc b{ color:var(--heading); display:block; margin-bottom:.15rem; font-family:var(--display); font-weight:700; font-size:var(--fs-0); }
/* A pergunta é a protagonista do card (docs/01) — cor plena, não muted.
   O :not() deixa o chip .uc-codigo fora desta regra genérica: sem ele, a
   especificidade maior de ".uc span" atropela o tamanho e a cor do chip. */
.uc span:not(.uc-codigo){ color:var(--text); font-size:var(--fs--1); }
.uc-codigo{
  display:inline-block; font-family:var(--mono); font-size:var(--fs--4); color:var(--teal-ink);
  background:var(--teal-soft); border-radius:4px; padding:.1rem .4rem; margin-bottom:.35rem;
  transition:background-color var(--dur-1) var(--ease-out);
}
.uc:hover .uc-codigo, .uc:focus-within .uc-codigo{ background:var(--teal-border); }
.uc:target{ outline:3px solid var(--amber); outline-offset:3px; }

.eco-grid{ display:grid; gap:.75rem; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); }
.eco-card{
  position:relative; display:block; background:var(--surface); border:1px solid var(--line); border-radius:10px;
  padding:.9rem 1.05rem; text-decoration:none; color:inherit;
  transition:transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.eco-card:hover, .eco-card:focus-within{
  transform:translateY(-3px); box-shadow:5px 5px 0 0 var(--ink-soft); border-color:var(--teal-border);
}
.eco-card b{ display:block; color:var(--heading); font-family:var(--display); font-weight:700; font-size:var(--fs-0); margin-bottom:var(--space-1); }
.eco-card span{ color:var(--muted); font-size:var(--fs--2); }
.eco-card-self{
  border-color:var(--teal-border); border-width:1.5px;
  background:var(--teal-soft);
}
/* Card com link de UC: o <a> principal não pode envolver outro <a> (HTML
   inválido — o navegador descarta o link interno em silêncio). Em vez
   disso, o <a> principal vira uma camada "esticada" (position:absolute,
   inset:0) atrás do conteúdo, e o link de UC fica por cima (z-index),
   clicável independentemente. */
.eco-card-stretch{ position:absolute; inset:0; z-index:0; }
.eco-uc-link{ position:relative; z-index:1; display:block; margin-top:.35rem; font-family:var(--mono); font-size:var(--fs--3); min-height:24px; }
/* Área tocável ≥44px sem deslocar o layout: o padding amplia a caixa de
   toque e a margem negativa devolve o espaço — o vizinho abaixo é a borda
   do card, não outro alvo, então não há sobreposição de alvos. */
.eco-uc-link a{ color:var(--teal-ink); display:inline-block; padding:.85rem .35rem; margin:-.75rem -.35rem; }

.eco-etapas{
  display:none; flex-wrap:wrap; align-items:center; gap:.4rem;
  font-size:var(--fs--4); font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--muted); margin-bottom:var(--space-8);
}
.eco-etapas .seta{ color:var(--teal-border); font-weight:400; }
/* O ciclo fecha aqui: o estágio do próprio produto ganha o único realce
   do trilho. */
.eco-etapas .etapa-atual{
  color:var(--teal-ink); background:var(--teal-soft);
  border:1px solid var(--teal-border); border-radius:999px; padding:var(--space-1) .65rem;
}
@media (min-width:640px){ .eco-etapas{ display:flex; } }

.eco-estagio{ margin-bottom:1.8rem; }
.eco-estagio-titulo{
  font-size:var(--fs--3); font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--teal-ink); margin:0 0 .6rem;
}

.conf{ background:var(--ink); color:#DCEAF3; position:relative; overflow:clip; }
.conf h2.title{ color:#fff; }
.conf .eyebrow{ color:#8FD8D6; }
.conf .card{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.15); position:relative; }
.conf .card h3{ color:#fff; }
/* Nos cards escuros, o ícone usa o teal claro do tema escuro do hero. */
.conf-icone{ color:#7FE0DD; margin-bottom:.4rem; }
.conf .card p{ color:#B9CBDA; }
/* Gramática de hover — glow em seção escura */
.conf .card{ isolation:isolate; }
.conf .card::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; z-index:-1;
  background:radial-gradient(60% 90% at 30% 0%, var(--teal-glow), transparent 70%);
  filter:blur(14px); opacity:0; transition:opacity var(--dur-2) var(--ease-out);
}
.conf .card:hover, .conf .card:focus-within{
  transform:translateY(-3px); border-color:var(--teal);
  box-shadow:0 14px 34px rgba(14,124,123,.28);
}
.conf .card:hover::before, .conf .card:focus-within::before{ opacity:1; }

/* ── Microinterações (rodada 7): imprensa, tinta e sublinhado ─────────── */
.chip{ transition:border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out); }
.chip:hover{ background:var(--teal-soft); }
.chip:active{ transform:translateY(1px); }
.btn{ transition:background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out); }
.btn:active{ transform:translateY(1px); box-shadow:none; }
/* o ícone do card "entinta" do teal-texto para o teal pleno junto da elevação */
.passo-icone, .svc-icone{ transition:color var(--dur-1) var(--ease-out); }
.card:hover .passo-icone, .card:focus-within .passo-icone,
.card:hover .svc-icone, .card:focus-within .svc-icone{ color:var(--teal); }
/* links de ação: o sublinhado respira no hover */
.link-btn, .link-btn-static, .ficha a{ text-underline-offset:2px; transition:text-underline-offset var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }
.link-btn:hover, .link-btn-static:hover, .ficha a:hover{ text-underline-offset:4px; }
@media (prefers-reduced-motion: no-preference){
  .btn-primary:hover, .btn-ghost:hover{ transform:translateY(-1px); box-shadow:0 4px 14px rgba(4,16,30,.18); }
}
details{
  background:var(--surface); border:1px solid var(--line); border-left:3px solid transparent; border-radius:10px;
  padding:0; margin-bottom:.7rem; transition:border-color var(--dur-2) var(--ease-out);
}
details[open]{ border-left-color:var(--teal); }
summary{
  cursor:pointer; list-style:none; padding:var(--space-4) 1.2rem;
  font-weight:600; color:var(--heading); min-height:48px;
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-4);
  border-radius:10px; transition:background var(--dur-1) var(--ease-out);
}
summary:hover{ background:var(--teal-soft); }
summary::-webkit-details-marker{ display:none; }
summary::after{
  content:"+"; font-family:var(--display); font-size:var(--fs-3); color:var(--teal-ink); flex:none;
  display:inline-block; transition:transform var(--dur-2) var(--ease-out);
}
details[open] summary::after{ transform:rotate(45deg); }
/* Abertura suave dos <details> — aprimoramento progressivo: navegadores
   sem ::details-content/interpolate-size abrem instantâneo, como antes. */
@media (prefers-reduced-motion: no-preference){
  html{ interpolate-size: allow-keywords; }
  details::details-content{
    block-size:0; overflow:clip;
    transition:block-size var(--dur-3) var(--ease-out), content-visibility var(--dur-3) allow-discrete;
  }
  details[open]::details-content{ block-size:auto; }
}
details .a{
  padding:0 1.2rem 1.1rem; color:var(--muted);
  animation:faqin var(--dur-2) var(--ease-out) both;
}
@media (prefers-reduced-motion: no-preference){
  @keyframes faqin{ from{ opacity:0; transform:translateY(-4px);} to{ opacity:1; transform:none;} }
}

.faq-sumario{ display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-4); margin:1.4rem 0 var(--space-8); }
.faq-sumario a{
  font-size:var(--fs--2); font-weight:600; color:var(--teal-ink); text-decoration:none;
  background:var(--teal-soft); border:1px solid var(--teal-border); border-radius:999px;
  padding:var(--space-2) var(--space-4); min-height:44px; display:inline-flex; align-items:center;
}
.faq-sumario a:hover{ background:var(--teal-border); }
.faq-grupo{ margin-bottom:var(--space-8); scroll-margin-top:88px; }
.faq-grupo:last-child{ margin-bottom:0; }
.faq-grupo-titulo{ font-size:var(--fs--3); font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--teal-ink); margin:0 0 .8rem; }
.faq-grupo .grid.c2{ gap:.7rem; }

.cta-final{ text-align:center; }
.cta-final .gold{ width:64px; height:3px; background:var(--amber); border-radius:2px; margin:0 auto 1.4rem; }
.cta-final p{ max-width:38rem; margin:var(--space-2) auto 1.6rem; color:var(--muted); }
.cta-final .btn{ font-size:var(--fs-2); }
.cta-final .email-extenso{ margin-top:var(--space-4); font-size:var(--fs--1); color:var(--muted); }
.cta-final .email-extenso a{ font-weight:600; }

footer.site{
  background:var(--ink); color:#AFC6D8; padding:2.6rem 0 var(--space-8); font-size:var(--fs--1);
}
footer .wrap{ display:grid; gap:1.6rem var(--space-8); grid-template-columns:1fr; }
@media (min-width:760px){ footer .wrap{ grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr); align-items:start; } }
footer .brand{ display:inline-flex; margin-bottom:.6rem; min-height:44px; align-items:center; }
footer .brand svg{ height:26px; }
footer .footer-col p{ margin:.3rem 0; }
footer .footer-corpus{ font-variant-numeric:tabular-nums; color:#8FD8D6; }
footer .footer-nav{ display:flex; flex-direction:column; gap:.45rem; }
footer .footer-nav a{ display:flex; align-items:center; min-height:44px; }
footer .footer-links{ display:flex; flex-wrap:wrap; gap:.4rem var(--space-4); margin-bottom:var(--space-2); }
footer .footer-links a{ display:inline-flex; align-items:center; min-height:44px; }
footer .footer-selos{ color:#C9D9E6; font-size:var(--fs--3); }
footer a{ color:#DCEAF3; }
footer a:hover{ color:#fff; }
footer .disclaimer{ grid-column:1/-1; font-size:var(--fs--3); color:#ABBAC9; border-top:1px solid rgba(255,255,255,.12); padding-top:var(--space-4); margin-top:.4rem; }

@media (prefers-reduced-motion: no-preference){
  /* `rise` anima SÓ transform. A versão anterior começava em opacity:0 e,
     com isso, o elemento maior do hero nascia invisível: o Lighthouse não
     tinha o que medir e devolvia NO_LCP, mascarando LCP de 3,0 s e nota 77
     (P1-01, laudo de R7). Movimento sem apagar o conteúdo — o texto está
     pintado desde o primeiro quadro. */
  .hero .wrap > *{ animation:rise calc(var(--dur-3) * 1.5) var(--ease-out) both; }
  .hero .wrap > *:nth-child(2){ animation-delay:.08s; }
  .hero .wrap > *:nth-child(3){ animation-delay:.14s; }
  .hero .wrap > *:nth-child(4){ animation-delay:.2s; }
  .hero .wrap > *:nth-child(5){ animation-delay:.26s; }
  @keyframes rise{ from{ transform:translateY(14px);} to{ transform:none;} }

  .hero .gold{ width:0; animation:goldgrow calc(var(--dur-3) * 2.25) var(--ease-out) .5s forwards; }
  @keyframes goldgrow{ to{ width:64px; } }

  .ficha{ animation:fichain var(--dur-2) var(--ease-out) both; }
  .ficha:nth-of-type(2){ animation-delay:.05s; }
  .ficha:nth-of-type(3){ animation-delay:.1s; }
  .ficha:nth-of-type(4){ animation-delay:.15s; }
  @keyframes fichain{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none;} }
  .resultado-status{ animation:fichain var(--dur-2) var(--ease-out) both; }

  /* Reveal no scroll — instanciado via JS (IntersectionObserver), com
     guarda dupla: se o JS não rodar por qualquer motivo, o conteúdo
     aparece de qualquer forma após 1.2s (nunca fica preso invisível). */
  .reveal{
    opacity:0; transform:translateY(14px);
    transition:opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
    /* 20ms por item, não os 70ms de antes da R32: com --dur-3 (400ms) de
       transição, o pior caso (.i8) fecha em 560ms — dentro do teto de
       600ms do laudo de movimento (R32, docs/08), sem perder o
       escalonamento entre itens de um mesmo grupo. */
    transition-delay:calc(var(--i,0) * 20ms);
    animation:revealfallback 0s 1.2s forwards;
  }
  /* animation:none cancela o fill do fallback (que venceria qualquer
     transform posterior); o transform final vive em :where() com
     especificidade zero, para o translateY(-3px) do hover dos cards
     poder vencer — sem isso, a elevação morre em todo elemento revelado. */
  .reveal.is-visible{ opacity:1; animation:none; }
  :where(.reveal.is-visible){ transform:none; }
  @keyframes revealfallback{ to{ opacity:1; transform:none; } }
}

/* ============ DIAGRAMAS EM CSS PURO ============ */
#como-funciona .grid.c3{ position:relative; }
@media (min-width:760px){
  #como-funciona .grid.c3::before{
    content:""; position:absolute; top:22px; left:calc(16.66% + 1.5rem); right:calc(16.66% + 1.5rem);
    height:2px;
    background:repeating-linear-gradient(90deg, var(--ink-soft) 0 8px, transparent 8px 14px);
    z-index:0;
  }
}

/* Quem constrói — perfil técnico do fundador */
.fundador{ flex-direction:column; align-items:flex-start; gap:.8rem; max-width:760px; }
@media (min-width:640px){ .fundador{ flex-direction:row; gap:1.3rem; } }
.fundador-marca{ width:56px; height:56px; color:var(--teal-ink); flex:0 0 auto; margin-top:.2rem; }
.fundador-nome{ font-family:var(--display); font-weight:700; font-size:var(--fs-3); color:var(--heading); margin:0; }
.fundador-papel{ font-size:var(--fs--2); color:var(--teal-ink); font-weight:600; margin:.2rem 0 .6rem; }
.fundador-bio{ font-size:var(--fs--1); color:var(--text); margin:0 0 .8rem; }
.fundador-areas{ display:flex; flex-wrap:wrap; gap:.4rem; }
.area-tag{
  font-family:var(--mono); font-size:var(--fs--4); color:var(--teal-ink);
  background:var(--teal-soft); border:1px solid var(--teal-border);
  border-radius:999px; padding:.28rem .65rem;
}
.rede-nota{ font-size:var(--fs--2); color:var(--muted); max-width:760px; margin-top:var(--space-4); }

/* Divisor de arco: marca de compasso entre bandas da página */
.divisor-arco{ display:flex; justify-content:center; padding:1.6rem 0 0; color:var(--ink-soft); }
.divisor-arco svg{ width:96px; height:26px; }
.hub-anel{ color:var(--ink-soft); }
/* Roadmap: estados das marcas — pronta (cheia), mapeada (tracejada),
   em acompanhamento (âmbar pulsante, guardado por reduced-motion) */
.corpus-linha-item .corpus-linha-marca{ border-style:dashed; }
.corpus-linha-item.pronta .corpus-linha-marca{ border-style:solid; }
.corpus-linha-item.acompanhamento .corpus-linha-marca{ border-style:solid; border-color:var(--amber); }
@media (prefers-reduced-motion: no-preference){
  .corpus-linha-item.acompanhamento .corpus-linha-marca{ animation:pulsa-ponto 6s ease-in-out infinite alternate; }
}

/* Fluxo operacional — o caminho de um caso, em nós geométricos ligados */
.fluxo-op{ margin-top:2.6rem; }
.fluxo-op-titulo{
  font-size:var(--fs--3); font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--teal-ink); margin:0 0 1.1rem;
}
.fluxo-op-lista{
  list-style:none; margin:0; padding:0;
  display:grid; gap:var(--space-4); grid-template-columns:1fr;
}
@media (min-width:900px){
  .fluxo-op-lista{ grid-template-columns:repeat(6,minmax(0,1fr)); position:relative; }
  .fluxo-op-lista::before{
    content:""; position:absolute; top:19px; left:calc(8.33% + 22px); right:calc(8.33% + 22px);
    height:2px; background:repeating-linear-gradient(90deg, var(--ink-soft) 0 8px, transparent 8px 14px);
  }
}
.fluxo-op-lista li{ position:relative; text-align:left; }
@media (min-width:900px){ .fluxo-op-lista li{ text-align:center; } }
.fluxo-no{
  width:38px; height:38px; color:var(--teal-ink); display:inline-block;
  background:var(--surface); border:1px solid var(--line); border-radius:50%;
  padding:6px; position:relative; z-index:1;
}
.fluxo-op-lista b{ display:block; font-family:var(--display); font-weight:700; font-size:var(--fs--1); color:var(--heading); margin-top:.35rem; }
.fluxo-op-lista span{ display:block; font-size:var(--fs--3); color:var(--muted); line-height:var(--lh-ui); margin-top:.15rem; }

#plataforma .grid.c3{ position:relative; }
@media (min-width:760px){
  #plataforma .grid.c3::before{
    content:""; position:absolute; top:1.4rem; left:calc(16.66% + 1.5rem); right:calc(16.66% + 1.5rem);
    height:3px; background:var(--teal); border-radius:2px; z-index:0;
  }
}
#plataforma .camada-tag{ position:relative; }
#plataforma .camada-tag::before{
  content:""; display:inline-block; width:8px; height:8px; border-radius:50%;
  background:var(--teal); margin-right:.4rem; vertical-align:middle;
}

/* Hub-and-spoke — painel de nove perspectivas */
.hub-wrap{ display:grid; gap:2.5rem; align-items:start; }
@media (min-width:900px){ .hub-wrap{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; } }
.hub{
  position:relative; aspect-ratio:1/1; max-width:520px; width:100%; margin-inline:auto;
  display:none;
  /* O raio dos rótulos acompanha a largura real do diagrama (unidade de
     contêiner): em duas colunas a 900 px o hub tem ~410 px e um raio fixo
     de 190 px transbordava a página. */
  container-type:inline-size;
  --hub-raio:min(190px, 34cqw); --hub-rotulo:min(132px, 30cqw);
}
@media (min-width:640px){ .hub{ display:block; } }
.hub-center{
  position:absolute; inset:32%; border-radius:50%;
  background:var(--ink); color:#fff; display:grid; place-items:center;
  text-align:center; font-family:var(--display); font-weight:700; font-size:var(--fs--1);
  padding:var(--space-2); box-shadow:0 10px 28px rgba(14,42,71,.35);
}
.hub-raios{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
/* Visível por padrão: o draw-in só existe quando movimento é permitido —
   sem a guarda, quem pede reduced-motion via linhas invisíveis piscando. */
.hub-raios line{ stroke:var(--ink-soft); stroke-width:1; }
@media (prefers-reduced-motion: no-preference){
  .hub-raios line{
    stroke-dasharray:220; stroke-dashoffset:220;
    transition:stroke-dashoffset calc(var(--dur-3) * 2) var(--ease-out), stroke var(--dur-2) var(--ease-out);
  }
  .hub.is-visible .hub-raios line{ stroke-dashoffset:0; }
  /* varredura radial: cada raio se desenha 60ms após o anterior */
  .hub-raios line:nth-of-type(2){ transition-delay:.06s; }
  .hub-raios line:nth-of-type(3){ transition-delay:.12s; }
  .hub-raios line:nth-of-type(4){ transition-delay:.18s; }
  .hub-raios line:nth-of-type(5){ transition-delay:.24s; }
  .hub-raios line:nth-of-type(6){ transition-delay:.3s; }
  .hub-raios line:nth-of-type(7){ transition-delay:.36s; }
  .hub-raios line:nth-of-type(8){ transition-delay:.42s; }
  .hub-raios line:nth-of-type(9){ transition-delay:.48s; }
}
.hub-spoke{
  position:absolute; top:50%; left:50%; width:var(--hub-rotulo); margin:-30px 0 0 calc(var(--hub-rotulo) / -2);
  transform:rotate(var(--a)) translate(var(--hub-raio)) rotate(calc(-1 * var(--a)));
  text-align:center; font-size:var(--fs--3); color:var(--muted); line-height:var(--lh-titulo);
}
.hub-spoke .dot{
  display:block; width:10px; height:10px; border-radius:50%; background:var(--teal);
  margin:0 auto .35rem; border:2px solid var(--teal-border);
}
.hub-list{ display:grid; gap:.6rem; }
/* Acima de 640px o diagrama visual (.hub) assume — mas a lista continua
   no DOM como .sr-only em vez de display:none, porque .hub é
   aria-hidden e sem isso leitor de tela nunca recebe as nove
   perspectivas em telas largas. */
@media (min-width:640px){
  .hub-list:not(:focus-within){
    position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
    clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }
}
.hub-list li{
  background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--teal);
  border-radius:8px; padding:.65rem .9rem; font-size:var(--fs--1); color:var(--muted); list-style:none;
}

/* ============================================================
   R3 (docs/08): todas as páginas passam a consumir esta folha e
   o header/nav/footer da home. Os blocos abaixo trazem o CSS que
   era exclusivo de cada página manual (termos/privacidade/404/
   pericias/parceiros) e das páginas geradas (/normas/, ficha,
   /corpus/mudancas.html — antes em public/normas/norma.css,
   removido nesta rodada). Nav.main/.menu-painel/header/footer já
   existem acima; aqui só o item novo (aria-current de página) e o
   que é específico de cada tipo de página.
   ============================================================ */

/* Item de nav ativo por página (distinto de nav.main a.ativa, que
   é o scrollspy da home) — Normas/Acompanhamento/Parceiros/Perícias
   marcam a própria página com aria-current="page". */
nav.main a[aria-current="page"]{ color:#fff; font-weight:600; border-bottom-color:var(--teal); }
.menu-painel a[aria-current="page"]{ color:#fff; font-weight:600; }

/* Padding comum do <main> das páginas-documento (legais, kit do
   parceiro, fichas/índice de normas, acompanhamento). */
main.doc-pagina{ padding:3rem 0 4rem; }

/* ==== termos / privacidade (R36: mesmo padrão de sumário fixo/recolhível
   da ficha de norma — R35) ====
   `.legal-layout` é o equivalente de `.ficha-layout`: bloco único abaixo de
   1024px (o `.ficha-sumario` vira `<details>` recolhível no fluxo normal),
   grade de duas colunas com o sumário fixo na lateral a partir de 1024px —
   a mecânica de sticky/collapse já vem inteira de `.ficha-sumario` (R35),
   reaproveitada aqui sem duplicar CSS. */
.legal-layout{ display:block; }
@media (min-width:1024px){
  .legal-layout{
    display:grid; grid-template-columns:15rem minmax(0,1fr);
    gap:0 2.5rem; align-items:start;
  }
  .legal-layout > .legal{ margin-inline:0; }
}
.legal{ max-width:68ch; margin-inline:auto; }
.legal h1{ font-family:var(--display); font-weight:700; color:var(--heading); font-size:var(--fs-7); margin-bottom:.3rem; }
.legal .versao{ color:var(--muted); font-size:var(--fs--1); margin-bottom:.4rem; }
.legal .nota-revisao{ margin-bottom:1.6rem; }
.legal .historico-completo{ margin-top:.6rem; }
.legal h2{ font-family:var(--display); font-weight:700; color:var(--heading); font-size:var(--fs-4); margin-top:2.4rem; }
.legal h3{ font-family:var(--display); font-weight:700; color:var(--heading); font-size:var(--fs-2); margin-top:1.4rem; }
.legal p, .legal li{ color:var(--text); font-size:var(--fs-0); }
.legal ul{ padding-left:1.3rem; }
.legal table{ width:100%; border-collapse:collapse; margin:1rem 0; font-size:var(--fs--1); }
.legal th, .legal td{ text-align:left; padding:.5rem .6rem; border-bottom:1px solid var(--line); vertical-align:top; }
.legal th{ color:var(--heading); font-family:var(--display); font-weight:700; }
.legal .resumo{ background:var(--ok-bg); color:var(--ok-ink); border-radius:10px; padding:1.1rem 1.3rem; font-size:var(--fs-1); font-weight:600; margin-bottom:2rem; }
.legal .cross-link{ margin-top:3rem; padding-top:1.5rem; border-top:1px solid var(--line); font-size:var(--fs--1); }
.legal .cross-link a{ display:inline-block; padding:.8rem .3rem; margin:-.65rem -.3rem; }
.legal .sumario{
  background:var(--teal-soft); border:1px solid var(--line); border-radius:10px;
  border-left:4px solid var(--amber); padding:1rem 1.3rem; margin:0 0 2.2rem; font-size:var(--fs--1);
}
.legal .sumario p{ font-weight:600; color:var(--heading); margin:0 0 .5rem; font-size:var(--fs--2); text-transform:uppercase; letter-spacing:.06em; }
.legal .sumario ol{ margin:0; padding-left:1.2rem; columns:1; }
@media (min-width:640px){ .legal .sumario ol{ columns:2; column-gap:1.5rem; } }
.legal .sumario li{ margin-bottom:.25rem; break-inside:avoid; }
.legal .sumario a{ display:flex; align-items:center; min-height:44px; color:var(--text); text-decoration:none; }
.legal .sumario a:hover, .legal .sumario a:active{ color:var(--teal-ink); text-decoration:underline; }
.legal h2[id]{ scroll-margin-top:88px; }
.voltar-topo{ display:inline-flex; align-items:center; min-height:44px; margin-top:1.2rem; font-size:var(--fs--1); }

/* ==== glossário (R18) ==== */
/* Link de glossário na primeira ocorrência do termo: mesma cor do texto
   que o cerca (color:inherit) — não compete com os links de ação, que são
   teal —, marcado só por um pontilhado discreto. Como herda a cor do
   contexto, o contraste é por construção o mesmo do corpo de texto em que
   está: AAA nos dois temas, inclusive sobre o navy do hero e dos cartões
   escuros. O foco visível vem da regra global `a:focus-visible`. */
.gloss{
  color:inherit; text-decoration:underline;
  text-decoration-style:dotted; text-decoration-thickness:1px;
  text-underline-offset:.2em;
}
.gloss:hover, .gloss:active{ text-decoration-style:solid; color:var(--teal-ink); }
/* Sobre fundo navy (hero, cartões escuros) o teal escuro do hover não tem
   contraste; ali o realce é só o sublinhado cheio, mantendo a cor herdada. */
.hero .gloss:hover, .hero .gloss:active,
.conf .gloss:hover, .conf .gloss:active,
.prova .gloss:hover, .prova .gloss:active{ color:inherit; }
.glossario{ max-width:min(100%, var(--medida)); }
.glossario .lead{ font-size:var(--fs-1); color:var(--muted); max-width:min(100%, var(--medida-estreita)); margin:0 0 1.6rem; }
/* Grade de blocos, não de colunas: com `columns` o navegador fatia a
   lista no meio de um grupo e o rótulo do grupo fica ao lado de termos de
   outro. Cada grupo é uma célula inteira. */
.glossario .sumario{ display:grid; gap:0 1.5rem; }
@media (min-width:640px){ .glossario .sumario{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }
.glossario .sumario > p:first-child{ grid-column:1/-1; margin-bottom:.2rem; }
.glossario .sumario-grupo{
  font-weight:600; color:var(--heading); font-size:var(--fs--3);
  text-transform:uppercase; letter-spacing:.06em; margin:.9rem 0 .1rem;
}
.glossario .sumario ul{ margin:0; padding-left:1.2rem; list-style:disc; }
.glossario .sumario li{ margin-bottom:.15rem; }
.glossario .sumario a{ display:flex; align-items:center; min-height:44px; color:var(--text); text-decoration:none; }
.glossario .sumario a:hover, .glossario .sumario a:active{ color:var(--teal-ink); text-decoration:underline; }
.glossario h2.grupo{
  font-size:var(--fs--3); font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); font-family:var(--body);
  margin:2.8rem 0 .6rem; padding-bottom:.4rem; border-bottom:1px solid var(--line);
}
/* padding:0 anula a regra global `section{padding:var(--space-16) 0}`, que
   é das seções da home — aqui `<section>` é o verbete, não uma faixa. */
.glossario .verbete{ margin:0 0 1.8rem; padding:0 0 0 1rem; border-left:3px solid var(--amber); }
.glossario .verbete h3{
  font-family:var(--display); font-weight:700; color:var(--heading);
  font-size:var(--fs-2); margin:0 0 .4rem; scroll-margin-top:88px;
}
.glossario .verbete p{ margin:.4rem 0; }
.glossario .ver-tambem{ font-size:var(--fs--2); color:var(--muted); margin-top:.6rem; }
.glossario .verificado-nota{
  margin-top:2.6rem; padding:1rem 1.2rem; border-radius:10px;
  background:var(--surface-muted); color:var(--muted); font-size:var(--fs--1);
}

/* ==== 404 ==== */
main.pagina-404{ padding:4rem 0 5rem; }
.quadro{ max-width:56ch; border-left:3px solid var(--amber); padding-left:1.5rem; }
.quadro h1{ font-family:var(--display); font-weight:700; color:var(--heading); font-size:var(--fs-6); margin:0 0 .75rem; }
.quadro p{ margin:0 0 1rem; color:var(--muted); }
.quadro ul{ margin:1.25rem 0 0; padding:0; list-style:none; display:grid; gap:.35rem; }
.quadro ul a{ display:inline-flex; align-items:center; min-height:44px; font-weight:600; text-decoration:underline; text-underline-offset:3px; }

/* Busca do verificador embutida na 404 (R36) — campo simples, sem os
   controles avançados do verificador da home (facetas, comparação,
   ordenação); reaproveita `.ficha`/`.status`/`.estado` do verificador para
   os cartões de resultado. */
.busca-404{ max-width:56ch; margin-top:2.5rem; padding-top:2rem; border-top:1px solid var(--line); }
.busca-404 h2{ font-family:var(--display); font-weight:700; color:var(--heading); font-size:var(--fs-4); margin:0 0 .3rem; }
.busca-404 .sub{ margin:0 0 1rem; color:var(--muted); font-size:var(--fs--1); }
.busca-404 .field-label{ display:block; font-size:var(--fs--2); font-weight:600; color:var(--heading); margin-bottom:.4rem; }
.busca-404 #q-404{
  width:100%; min-height:48px; padding:.6rem .9rem; font:inherit; color:var(--text);
  background:var(--paper); border:1.5px solid var(--line); border-radius:10px;
}
.busca-404 #q-404:focus-visible{ outline:3px solid var(--amber); outline-offset:2px; }
.busca-404 #resultado-404{ margin-top:1rem; display:grid; gap:.75rem; }
.busca-404-privacidade{ margin-top:1rem; }

/* ==== pericias ==== */
main.pericias-pagina{ padding:2.6rem 0 4rem; position:relative; overflow:clip; }
.pericias-fundo{
  position:absolute; right:-3%; top:1.5rem; width:min(34vw,380px); height:auto;
  opacity:.09; pointer-events:none; color:var(--ink);
}
.pericias-pagina > .wrap{ position:relative; }
.pericias-pagina section{ padding:2.2rem 0; }
.pericias-pagina h1{
  font-family:var(--display); font-weight:700; color:var(--heading);
  line-height:var(--lh-display); letter-spacing:-.015em; text-wrap:balance; margin:.2rem 0 .8rem;
  font-size:var(--fs-8);
}
.pericias-pagina .lead{ font-size:var(--fs-1); max-width:min(100%, var(--medida-estreita)); color:var(--text); }
.pericias-pagina .card{ padding:1.3rem; }
.pericias-pagina .area-tag{ margin:.2rem .2rem 0 0; }
.nota-honesta{
  background:var(--warn-bg); border:1px solid #E9C98A; border-radius:10px;
  padding:.85rem 1rem; font-size:var(--fs--1); color:var(--warn-ink); margin-top:1rem; max-width:min(100%, var(--medida));
}
.passos{ list-style:none; margin:1rem 0 0; padding:0; display:grid; gap:.9rem; }
@media (min-width:820px){ .passos{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.passos li{ background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:1.1rem; }
.passos b{ display:block; font-family:var(--display); font-weight:700; color:var(--heading); margin:.25rem 0 .3rem; }
.passos p{ font-size:var(--fs--2); color:var(--text); margin:0; }
.triade{ display:grid; gap:1rem; }
@media (min-width:820px){ .triade{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.triade .papel{ background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:1.2rem; }
.triade .papel b{ display:block; font-family:var(--display); font-weight:700; color:var(--heading); margin-bottom:.35rem; }
.triade .papel p{ font-size:var(--fs--1); margin:0; }
.credencial{
  margin-top:1.4rem; background:var(--surface); border:1.5px dashed var(--amber);
  border-radius:12px; padding:1.2rem; max-width:640px;
}
.credencial b{ font-family:var(--display); font-weight:700; color:var(--heading); }
.versao-pagina{ color:var(--muted); font-size:var(--fs--2); max-width:min(100%, var(--medida)); margin-top:2.5rem; border-top:1px solid var(--line); padding-top:1rem; }

/* ==== parceiros (kit do escritório) ==== */
.conteudo{ max-width:76ch; margin-inline:auto; }
.conteudo h1{ font-family:var(--display); font-weight:700; letter-spacing:-0.015em; color:var(--heading); font-size:var(--fs-7); margin:.1rem 0 .6rem; }
.conteudo .lead{ font-size:var(--fs-1); color:var(--muted); max-width:min(100%, var(--medida-estreita)); margin:0 0 1rem; }
.conteudo h2{ font-family:var(--display); font-weight:700; letter-spacing:-0.015em; color:var(--heading); font-size:var(--fs-5); margin:2.8rem 0 .8rem; }
.conteudo h3{ font-family:var(--display); font-weight:700; color:var(--heading); font-size:var(--fs-1); margin:1.6rem 0 .4rem; }
.cartao{
  background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--amber);
  border-radius:12px; padding:1.2rem 1.4rem; margin:0 0 1rem;
}
.cartao h3{ margin-top:0; }
.cartao p{ margin:.4rem 0 0; font-size:var(--fs--1); }
.cartao .meta-linha{ font-family:var(--mono); font-size:var(--fs--3); color:var(--muted); margin-top:.5rem; }
.par{ display:grid; gap:1rem; margin:1.2rem 0; }
@media (min-width:760px){ .par{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }
ul.lista{ padding-left:1.3rem; margin:.6rem 0; }
ul.lista li{ margin-bottom:.4rem; }
/* Código em prosa e blocos de código (R21, /corpus/). Só tokens que já
   invertem no tema escuro (--text sobre --surface-muted mede 13,6:1 no
   claro e 15,9:1 no escuro) — por isso não há par de regras
   @media/[data-theme] a conferir em scripts/verificar_tema_css.py.
   O bloco rola dentro do próprio contêiner: a 320 px o `curl` longo não
   pode empurrar a página inteira para o lado. */
.conteudo code{ font-family:var(--mono); font-size:var(--fs-mono-rel); word-break:break-word; }
/* Tabelas do kit do escritório parceiro (R28) e de qualquer outro Markdown
   emitido em .conteudo: mesmo desenho de .legal table, mas com contêiner
   próprio que rola na horizontal — a tabela de 2 colunas largas do dossiê
   não pode empurrar a página inteira a 320 px. */
.conteudo table{ width:100%; border-collapse:collapse; margin:1rem 0; font-size:var(--fs--1); }
.conteudo th, .conteudo td{ text-align:left; padding:.55rem .6rem; border-bottom:1px solid var(--line); vertical-align:top; }
.conteudo th{ color:var(--heading); font-family:var(--display); font-weight:700; }
.tabela-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:1rem 0; }
.tabela-scroll table{ margin:0; min-width:26rem; }
.bloco-codigo{
  background:var(--surface-muted); border:1px solid var(--line);
  border-radius:var(--radius); padding:.9rem 1rem; margin:1rem 0;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
}
.bloco-codigo code{
  display:block; white-space:pre; word-break:normal;
  font-family:var(--mono); font-size:var(--fs--3); line-height:var(--lh-body); color:var(--text);
}
/* Rolagem por teclado precisa de foco visível — o contêiner é focalizável
   nos navegadores que dão foco a região rolável, e a borda sozinha não
   basta como indicação (WCAG 2.4.7). */
.bloco-codigo:focus-visible{ outline:3px solid var(--teal-ink); outline-offset:2px; }
.aviso-revisao{
  border:1px solid var(--line); border-left:4px solid var(--amber); border-radius:10px;
  padding:.9rem 1.2rem; margin:1.4rem 0; font-size:var(--fs--1); color:var(--muted);
}
.downloads a{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.4rem .8rem;
  padding:1rem .4rem; margin:0 -.4rem; border-bottom:1px solid var(--line);
  text-decoration:none;
}
.downloads a:first-of-type{ border-top:1px solid var(--line); }
.downloads a:hover .dl-titulo{ text-decoration:underline; }
.dl-titulo{ font-weight:600; color:var(--teal-ink); }
.dl-meta{ font-family:var(--mono); font-size:var(--fs--3); color:var(--muted); }
.parceiros-cta{
  background:var(--ink); color:#E7EEF4; border-radius:14px;
  padding:1.8rem 1.6rem; margin-top:2.6rem;
}
.parceiros-cta h2{ color:#fff; margin:0 0 .5rem; }
.parceiros-cta p{ margin:0 0 1.1rem; color:#C9D9E6; max-width:60ch; }
.parceiros-cta .btn{ border-color:rgba(255,255,255,.5); min-height:44px; padding:.65rem 1.2rem; font-size:var(--fs--1); border-radius:999px; border-width:1.5px; border-style:solid; }

/* ==== fichas /normas/ (ficha + índice; antes em public/normas/norma.css) ==== */
.norma-pagina{ max-width:68ch; margin-inline:auto; }
.norma-pagina .cite{ font-family:var(--mono); font-size:var(--fs--2); color:var(--muted); letter-spacing:.02em; margin:0 0 .4rem; }
.norma-pagina h1{ font-family:var(--display); font-weight:700; color:var(--heading); font-size:var(--fs-6); line-height:var(--lh-tight); margin:.1rem 0 .8rem; }
.norma-pagina .chip, .analise-pagina .chip{
  display:inline-block; padding:.28rem .8rem; border-radius:999px;
  font-size:var(--fs--2); font-weight:600; letter-spacing:.01em; margin-bottom:1.4rem;
}
.chip-ok{ color:var(--chip-ok); background:var(--chip-ok-bg); }
.chip-info{ color:var(--chip-info); background:var(--chip-info-bg); }
.chip-crit{ color:var(--chip-crit); background:var(--chip-crit-bg); }
.norma-pagina .ementa{
  border-left:4px solid var(--amber); border-radius:0 8px 8px 0;
  background:var(--teal-soft); padding:.9rem 1.2rem; margin:0 0 1.8rem;
  font-size:var(--fs-1);
}
dl.meta{ margin:0 0 1.8rem; border-top:1px solid var(--line); }
dl.meta div{ display:grid; grid-template-columns:minmax(9rem,14rem) 1fr; gap:.4rem 1rem; padding:.65rem 0; border-bottom:1px solid var(--line); }
@media (max-width:480px){ dl.meta div{ grid-template-columns:1fr; gap:.1rem; } }
dl.meta dt{ font-weight:600; color:var(--heading); font-size:var(--fs--1); }
dl.meta dd{ margin:0; font-size:var(--fs--1); }
.norma-pagina .fonte a, .norma-pagina .acoes a, .analise-pagina .fonte a{ display:inline-block; padding:.7rem .3rem; margin:-.55rem -.3rem; }
.citar{
  border:1px solid var(--line); border-left:4px solid var(--amber); border-radius:10px;
  padding:1rem 1.3rem; margin:0 0 1.6rem; font-size:var(--fs--1);
}
.citar p{ margin:0 0 .5rem; font-weight:600; color:var(--heading); font-size:var(--fs--2); text-transform:uppercase; letter-spacing:.06em; }
.citar code{ font-family:var(--mono); font-size:var(--fs--2); word-break:break-word; }
.citar .citar-nota{ margin:.6rem 0 0; font-weight:400; color:var(--muted); font-size:var(--fs--2); text-transform:none; letter-spacing:normal; }
.norma-pagina .acoes{ margin:0 0 2rem; font-size:var(--fs--1); }
.verificado{ color:var(--muted); font-size:var(--fs--2); border-top:1px solid var(--line); padding-top:1.2rem; }
.norma-pagina .cross-link{ margin-top:2.2rem; font-size:var(--fs--1); }
.norma-pagina .cross-link a{ display:inline-block; padding:.8rem .3rem; margin:-.65rem -.3rem; }
/* ---------- A ficha como página de leitura (R35, docs/03 § "Fichas") ----------
   Uma coluna até 1024 px (sumário recolhível acima do artigo); duas a partir
   daí, com o sumário fixo na lateral. O <details> do sumário nasce ABERTO e
   perde o <summary> no ponto de quebra: CSS não reabre um <details> fechado,
   então o estado que serve às duas larguras é o aberto. */
.ficha-layout{ display:block; }
.ficha-sumario{ max-width:68ch; margin:0 auto 2rem; }
.ficha-sumario details{
  border:1px solid var(--line); border-radius:10px; background:var(--surface);
  padding:.2rem 1rem;
}
.ficha-sumario summary{
  cursor:pointer; list-style:none; display:flex; align-items:center;
  min-height:44px; font-weight:600; color:var(--heading);
  font-size:var(--fs--2); text-transform:uppercase; letter-spacing:.06em;
}
.ficha-sumario summary::-webkit-details-marker{ display:none; }
.ficha-sumario summary::after{
  content:"▾"; margin-left:auto; font-size:var(--fs--1); color:var(--muted);
  transition:transform var(--dur-1) var(--ease-out);
}
.ficha-sumario details[open] summary::after{ transform:rotate(180deg); }
/* padding-left 1.6rem (não 1.2rem) — com `overflow-y:auto` a partir de
   1024px (regra abaixo), a caixa vira contêiner de rolagem e o eixo X
   "visible" passa a computar como "auto" (regra do CSS Overflow Module);
   um marcador de dois dígitos ("10.") desenhado fora da caixa de conteúdo
   (list-style-position padrão, outside) ficava parcialmente à esquerda da
   origem rolável e sem forma de chegar até ele — sumário com 10+ itens
   (Termos de Uso, R36) mostrava "0." em vez de "10.". Mais respiro no
   padding evita a sobra negativa que o navegador corta. */
.ficha-sumario ol{ margin:0 0 .6rem; padding-left:1.6rem; font-size:var(--fs--1); }
.ficha-sumario li{ margin:0; }
.ficha-sumario a{
  display:flex; align-items:center; min-height:44px;
  color:var(--text); text-decoration:none;
}
.ficha-sumario a:hover, .ficha-sumario a:active{ color:var(--teal-ink); text-decoration:underline; }
.ficha-sumario .sumario-sub{ padding-left:1rem; font-size:var(--fs--2); }
@media (min-width:1024px){
  .ficha-layout{
    display:grid; grid-template-columns:15rem minmax(0,1fr);
    gap:0 2.5rem; align-items:start;
  }
  .ficha-layout > .norma-pagina{ margin-inline:0; }
  .ficha-sumario{
    position:sticky; top:5.5rem; max-width:none; margin:0;
    max-height:calc(100dvh - 7rem); overflow-y:auto; z-index:1;
  }
  .ficha-sumario summary{ display:none; }
  .ficha-sumario details{ padding:.8rem 1rem; }
}

/* Títulos de seção da ficha. O deslocamento de âncora é o do cabeçalho
   fixo, como em .legal h2[id]. */
.norma-pagina h2{
  font-family:var(--display); font-weight:700; color:var(--heading);
  font-size:var(--fs-3); line-height:var(--lh-tight);
  margin:2.4rem 0 .8rem; scroll-margin-top:88px;
}
/* Dentro dos cartões de citação e da chamada da análise o h2 é rótulo de
   bloco, não título de página: mantém a caixa alta pequena que o <p>
   ocupava antes da R35. */
.norma-pagina .citar h2, .norma-pagina .analise-chamada h2{
  font-family:var(--body); font-weight:600; font-size:var(--fs--2);
  text-transform:uppercase; letter-spacing:.06em; line-height:var(--lh-ui);
  margin:0 0 .5rem;
}
.norma-pagina .citar h2 a{ color:inherit; }

/* Dispositivos citáveis — só existem quando o corpus declara o campo. */
.dispositivos-nota{ color:var(--muted); font-size:var(--fs--1); margin:0 0 1.2rem; }
ol.dispositivos{ list-style:none; margin:0 0 2rem; padding:0; }
ol.dispositivos > li{
  border-left:4px solid var(--amber); border-radius:0 8px 8px 0;
  background:var(--surface); padding:.9rem 1.2rem; margin:0 0 1rem;
  scroll-margin-top:88px;
}
.disp-ref{ margin:0 0 .3rem; font-weight:600; color:var(--heading); font-size:var(--fs--1); }
.disp-ref .disp-ancora{ display:inline-flex; align-items:center; min-height:44px; color:inherit; text-decoration:none; }
.disp-ref .disp-ancora:hover, .disp-ref .disp-ancora:active{ color:var(--teal-ink); text-decoration:underline; }
.disp-rotulo{ margin:0 0 .6rem; font-size:var(--fs--1); }
ol.dispositivos code{ display:block; font-family:var(--mono); font-size:var(--fs--2); word-break:break-word; }

/* Normas relacionadas — derivadas dos campos indexados, nunca de leitura. */
.relacionadas-nota{ color:var(--muted); font-size:var(--fs--1); margin:0 0 1rem; }
ul.relacionadas{ list-style:none; margin:0 0 2rem; padding:0; }
ul.relacionadas li{ border-bottom:1px solid var(--line); padding:.2rem 0; }
ul.relacionadas a{ display:inline-block; padding:.7rem .3rem; margin-inline:-.3rem; font-size:var(--fs--1); }
.rel-motivo{ display:block; color:var(--muted); font-size:var(--fs--2); padding-bottom:.6rem; }

/* Anterior/próxima na ordem de leitura do índice. O elo ausente (primeira e
   última normas) não é emitido — por isso o alinhamento é por margin-left
   automático no elo seguinte, e não por uma célula vazia de grade. */
.ficha-vizinhas{
  display:flex; flex-wrap:wrap; gap:1rem;
  margin:2.2rem 0 0; padding-top:1.4rem; border-top:1px solid var(--line);
}
.ficha-vizinhas a{
  flex:1 1 14rem; min-height:44px; display:flex; flex-direction:column;
  justify-content:center; gap:.2rem;
  border:1px solid var(--line); border-radius:10px; padding:.7rem 1rem;
  text-decoration:none; color:var(--text);
}
.ficha-vizinhas a:hover, .ficha-vizinhas a:active{ border-color:var(--teal-ink); }
.ficha-vizinhas .viz-prox{ text-align:right; }
.viz-rot{ font-size:var(--fs--2); color:var(--muted); }
.viz-tit{ font-weight:600; color:var(--teal-ink); font-size:var(--fs--1); }

/* Retorno dos botões "Copiar …" (citar.js). Nasce vazio; o texto entra por
   JS num elemento role="status". */
.copiar-aviso, .citar .copiar-aviso, ol.dispositivos .copiar-aviso{
  margin:.5rem 0 0; color:var(--muted); font-size:var(--fs--2);
  text-transform:none; letter-spacing:normal; font-weight:400;
}
/* O <code> da citação ocupa a linha inteira: com ele em linha, o botão de
   copiar colava no fim da URL em vez de começar a própria linha. */
.norma-pagina .citar code{ display:block; }
.norma-pagina .citar .link-btn, ol.dispositivos .link-btn{
  margin-top:.7rem; min-height:44px; display:inline-flex; align-items:center;
  font-size:var(--fs--2);
}

.indice-intro{ color:var(--muted); max-width:60ch; margin:0 0 2rem; }
.grupo-orgao{ font-family:var(--display); font-weight:700; color:var(--heading); font-size:var(--fs-3); margin:2.2rem 0 .4rem; }
ul.lista-normas{ list-style:none; margin:0; padding:0; }
ul.lista-normas li{ border-bottom:1px solid var(--line); }
ul.lista-normas a{ display:block; padding:.9rem .2rem; text-decoration:none; color:var(--text); }
ul.lista-normas a:hover .titulo-norma{ color:var(--teal-ink); text-decoration:underline; }
.titulo-norma{ font-weight:600; color:var(--heading); }
.linha-cite{ display:block; font-family:var(--mono); font-size:var(--fs--3); color:var(--muted); margin-top:.15rem; }
.mini-chip{ display:inline-block; font-size:var(--fs--3); font-weight:600; padding:.1rem .6rem; border-radius:999px; margin-left:.4rem; max-width:100%; }
@media (min-width:640px){ .mini-chip{ white-space:nowrap; } }
#filtro-normas-bloco{ margin:1.5rem 0 .5rem; max-width:34rem; }
/* O bloco nasce [hidden] e /normas/indice.js só o revela depois do primeiro
   quadro (script `defer`): a lista de normas descia de uma vez e o índice
   media CLS 0,144 no Lighthouse desktop, contra a meta de 0,1 — medido em
   R37. Reservar a altura zera o deslocamento sem abrir mão do
   aprimoramento progressivo: com `visibility:hidden` o bloco continua fora
   da árvore de acessibilidade e fora da ordem de tabulação enquanto o
   atributo `hidden` estiver lá. */
#filtro-normas-bloco[hidden]{ display:block; visibility:hidden; }
#filtro-normas-bloco label{ display:block; font-weight:600; color:var(--heading); margin-bottom:.4rem; }
#filtro-normas{
  width:100%; min-height:48px; padding:.6rem .9rem; font:inherit; color:var(--text);
  background:var(--paper); border:1.5px solid var(--line); border-radius:10px;
}
#filtro-normas:focus-visible{ outline:3px solid var(--amber); outline-offset:2px; }
#filtro-normas-contador{ margin:.5rem 0 0; font-size:var(--fs--1); color:var(--muted); }
.filtro-vazio{ border-left:3px solid var(--amber); padding:.4rem 0 .4rem 1rem; color:var(--muted); max-width:56ch; }

/* ==== análises "o que muda" (docs/analises/<id>.md → /normas/<id>/analise.html) ====
   A chamada na ficha usa a tinta teal (ação) e não o âmbar do fio de ouro,
   que já marca os blocos de citação logo abaixo — dois âmbares seguidos
   apagariam a hierarquia da página. */
.analise-chamada{
  border:1px solid var(--line); border-left:4px solid var(--teal);
  border-radius:10px; background:var(--teal-soft);
  padding:1rem 1.3rem; margin:0 0 1.6rem;
}
.analise-chamada p{ margin:0 0 .5rem; color:var(--text); font-size:var(--fs--1); }
.analise-chamada > p:first-of-type{
  font-weight:600; color:var(--heading); font-size:var(--fs--2);
  text-transform:uppercase; letter-spacing:.06em;
}
.analise-chamada .analise-chamada-titulo{ font-size:var(--fs-1); font-weight:600; text-transform:none; letter-spacing:normal; }
.analise-chamada .analise-chamada-titulo a{ display:inline-block; padding:.55rem 0; margin:-.45rem 0; }
.analise-chamada .analise-chamada-meta{ margin-bottom:0; font-size:var(--fs--2); color:var(--muted); }

.analise-pagina .cite{ font-family:var(--mono); font-size:var(--fs--2); color:var(--muted); letter-spacing:.02em; margin:0 0 .4rem; }
.analise-pagina .chip{ margin-bottom:1.2rem; }
.analise-pagina .revisao-nota{
  border-left:4px solid var(--amber); padding:.2rem 0 .2rem 1rem;
  color:var(--muted); font-size:var(--fs--1); margin:0 0 1.6rem;
}
.analise-pagina blockquote{
  margin:1.2rem 0; padding:.2rem 0 .2rem 1.1rem;
  border-left:3px solid var(--teal); color:var(--text);
}
.analise-pagina blockquote p{ margin:0; font-size:var(--fs--1); }
.analise-pagina h2[id], .analise-pagina h3[id]{ scroll-margin-top:88px; }

/* Histórico da ficha (R44): /normas/<id>/historico.html — reaproveita a
   tipografia de .analise-pagina (mesma folha, ver "Histórico da ficha —
   R44" em docs/03) e acrescenta só o que é próprio da página: a lista de
   versões e o diff. */
.historico-intro{ color:var(--text); }
.historico-lista{ list-style:none; margin:0 0 2rem; padding:0; }
.historico-lista > li{ border-top:1px solid var(--line); padding-top:1.6rem; margin-top:1.6rem; }
.historico-lista > li:first-child{ border-top:0; padding-top:0; margin-top:0; }
.historico-lista h2{
  font-family:var(--display); font-weight:700; font-size:var(--fs-2);
  color:var(--heading); margin:0 0 .3rem; line-height:var(--lh-titulo);
}
.historico-versao-titulo{ font-weight:600; color:var(--text); margin:0 0 .7rem; }
.historico-inicial, .historico-sem-mudanca{ color:var(--muted); font-size:var(--fs--1); margin:0; }
/* Diff textual entre duas versões da ficha verificada — mesmo desenho
   rolável/focalizável de .bloco-codigo (R2.4.7: contêiner focalizável
   precisa de indicação de foco própria). Cada linha é um <span> de bloco
   para que a cor de fundo cubra a linha inteira, não só o texto; o
   prefixo "+"/"-"/" " do unified diff continua no texto (nunca só cor). */
.diff{
  background:var(--surface-muted); border:1px solid var(--line);
  border-radius:var(--radius); padding:.9rem 0; margin:1rem 0 1.6rem;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  font-family:var(--mono); font-size:var(--fs--3); line-height:var(--lh-body);
  white-space:pre; word-break:normal;
}
.diff span{ display:block; padding-inline:1rem; min-width:max-content; }
.diff:focus-visible{ outline:3px solid var(--teal-ink); outline-offset:2px; }
/* Contrastes medidos (WCAG, mesmos pares de --ok-*/--crit-* já auditados
   nos estados do verificador — ver comentário em .estado-erro acima):
   --ok-ink sobre --ok-bg e --crit-ink sobre --crit-bg, claro e escuro. */
.diff-add{ background:var(--ok-bg); color:var(--ok-ink); }
.diff-del{ background:var(--crit-bg); color:var(--crit-ink); }
.diff-hunk{ color:var(--teal-ink); font-weight:600; }
.diff-meta{ color:var(--muted); }
.diff-ctx{ color:var(--text); }

/* Ponte discreta do verificador para o modo minuta (R11). O link fica
   DENTRO do card claro do verificador (não sobre o azul do hero): tinta
   teal de corpo, a mesma dos demais links do card. */
.cross-minuta{ margin-top:.6rem; }
.cross-minuta a{ color:var(--teal-ink); font-weight:600; display:inline-block; padding:.6rem 0; }

/* ==== modo minuta (/minuta.html) ==== */
/* A promessa de processamento local é a primeira coisa da página depois do
   lead: vem antes do campo, não depois do resultado. */
.promessa-local{
  background:var(--ok-bg); color:var(--ok-ink); border-radius:10px;
  padding:1rem 1.3rem; margin:1.2rem 0 1.8rem; font-size:var(--fs--1); line-height:var(--lh-ui);
}
.promessa-local code{ font-family:var(--mono); font-size:var(--fs-mono-rel); }
.minuta-campo{ margin:1.5rem 0 0; }
.minuta-campo label{
  display:block; font-family:var(--display); font-weight:700; color:var(--heading);
  font-size:var(--fs-1); margin-bottom:.3rem;
}
.minuta-campo .aviso{ margin:.2rem 0 .6rem; }
.minuta-campo textarea{
  width:100%; box-sizing:border-box; min-height:11rem; resize:vertical;
  /* 1rem (16px) e não menos: abaixo disso o iOS dá zoom automático ao focar
     o campo, e a página inteira sai do lugar na hora de colar a minuta. */
  font-family:var(--mono); font-size:var(--fs-0); line-height:var(--lh-body); color:var(--text);
  background:var(--surface-input); border:1.5px solid var(--line); border-radius:12px;
  padding:.85rem 1rem;
}
.minuta-campo textarea::placeholder{ color:var(--muted); }
.minuta-campo textarea:focus-visible{ border-color:var(--teal); }
.contador-minuta{ font-family:var(--mono); font-size:var(--fs--3); color:var(--muted); margin:.4rem 0 0; }
.minuta-acoes{ display:flex; flex-wrap:wrap; align-items:center; gap:.8rem 1.4rem; margin-top:.9rem; }
.minuta-acoes .link-btn{ min-height:44px; }

.minuta-resumo{
  font-family:var(--mono); font-size:var(--fs--2); color:var(--heading);
  margin:1.6rem 0 .6rem; font-weight:600;
}
.minuta-tabela{
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:.4rem .9rem 1rem; overflow-x:auto;
}
.minuta-tabela table{ width:100%; border-collapse:collapse; font-size:var(--fs--1); min-width:34rem; }
.minuta-tabela caption{
  text-align:left; color:var(--muted); font-size:var(--fs--2); padding:.7rem .5rem .8rem; line-height:var(--lh-ui);
}
.minuta-tabela th, .minuta-tabela td{
  text-align:left; padding:.6rem .5rem; border-bottom:1px solid var(--line); vertical-align:top;
}
.minuta-tabela thead th{ color:var(--muted); font-weight:600; white-space:nowrap; }
.minuta-tabela tbody th{ font-family:var(--mono); font-weight:600; color:var(--text); }
.minuta-tabela tbody tr:last-child th, .minuta-tabela tbody tr:last-child td{ border-bottom:0; }
.minuta-tabela a{ font-weight:600; color:var(--teal-ink); }
.minuta-tabela .status{ font-size:var(--fs--3); white-space:nowrap; }
/* Linha fora da cobertura: destaque NEUTRO (âmbar do fio de ouro), nunca o
   vermelho de erro — não achar uma citação no corpus não é erro de quem
   escreveu a minuta, é limite declarado do recorte. */
.minuta-tabela tr.linha-fora{ background:var(--surface-chip); }
.minuta-tabela tr.linha-fora th{ box-shadow:inset 3px 0 0 var(--amber); padding-left:.8rem; }
.marca-fora{ color:var(--text); font-style:italic; }
.td-vazio{ color:var(--text); }
.minuta-exportar{ display:flex; flex-wrap:wrap; gap:.8rem 1.6rem; margin:.9rem 0 0; }
.minuta-exportar .link-btn{ min-height:44px; }
.minuta-ressalva{
  border:1px solid var(--line); border-left:4px solid var(--amber); border-radius:10px;
  padding:.9rem 1.2rem; margin:1rem 0 0; font-size:var(--fs--1); color:var(--muted); line-height:var(--lh-body);
}
.conteudo .cross-link{ margin-top:2.6rem; padding-top:1.5rem; border-top:1px solid var(--line); font-size:var(--fs--1); line-height:2.4; }
.conteudo .cross-link a{ display:inline-block; padding:.6rem .3rem; margin-inline:-.3rem; }

/* ==== instrumentos locais (/instrumentos/, instrumento.js) — R24 ==== */
/* O aviso de processamento local é o primeiro elemento do instrumento, antes
   de qualquer campo: quem começa a preencher já leu que nada sai daqui.
   Mesmo tratamento visual de .promessa-local do modo minuta. */
.instrumento{ margin:1.6rem 0 0; }
.instrumento-aviso{
  background:var(--ok-bg); color:var(--ok-ink); border-radius:10px;
  padding:1rem 1.3rem; margin:0 0 1.4rem; font-size:var(--fs--1); line-height:var(--lh-ui);
}
.instrumento-progresso{ margin:0 0 1.4rem; }
.instrumento-barra{
  height:10px; border-radius:999px; background:var(--surface-chip);
  border:1px solid var(--line); overflow:hidden;
}
.instrumento-barra-preenchida{
  display:block; height:100%; width:0; background:var(--teal); border-radius:999px;
}
@media (prefers-reduced-motion: no-preference){
  .instrumento-barra-preenchida{ transition:width var(--dur-2) var(--ease-out); }
}
.instrumento-contagem{
  font-family:var(--mono); font-size:var(--fs--3); color:var(--muted); margin:.4rem 0 0;
}
/* padding:0 anula a regra global `section{padding:var(--space-16) 0}`, que
   é para as faixas da home, não para as seções de um instrumento. */
.instrumento-secao{ margin:1.8rem 0 0; padding:0; }
.instrumento-secao h3{
  font-family:var(--display); font-weight:700; color:var(--heading);
  font-size:var(--fs-2); margin:0 0 .8rem;
}
/* <fieldset>/<legend> por item: o enunciado é o rótulo do grupo de radios,
   que é o que leitor de tela anuncia ao entrar no grupo. */
.instrumento-item{
  border:1px solid var(--line); border-radius:12px; background:var(--surface);
  padding:1rem 1.2rem 1.1rem; margin:0 0 1rem; min-inline-size:0;
}
.instrumento-item legend{
  font-weight:600; color:var(--heading); padding:0 .3rem; line-height:var(--lh-ui);
}
.instrumento-fonte{ margin:.3rem 0 .6rem; font-size:var(--fs--2); color:var(--muted); }
.instrumento-fonte a{ font-weight:600; }
.instrumento-opcoes{ display:flex; flex-wrap:wrap; gap:.5rem .7rem; margin:.5rem 0 0; }
/* Alvo de toque: 44 px de altura mínima no rótulo inteiro (não só no radio),
   porque é o rótulo que recebe o toque. */
.instrumento-opcao{
  display:inline-flex; align-items:center; gap:.5rem; min-height:44px;
  padding:.5rem .9rem; border:1.5px solid var(--line); border-radius:999px;
  background:var(--surface-input); cursor:pointer; font-size:var(--fs--1); line-height:var(--lh-titulo);
}
.instrumento-opcao input{ width:20px; height:20px; margin:0; accent-color:var(--teal); flex:0 0 auto; }
.instrumento-opcao:has(input:checked){ border-color:var(--teal); background:var(--teal-soft); }
.instrumento-opcao:focus-within{ outline:3px solid var(--teal); outline-offset:2px; }
/* Sugestões de norma (R27, solicitacao.js): mesma grade de opções da
   biblioteca (.instrumento-opcoes/.instrumento-opcao), mas com checkbox em
   vez de radio — casas independentes, e o container só precisa de espaço
   acima do primeiro item. */
.instrumento-sugestoes{ margin:.4rem 0 0; }
.instrumento-texto, .instrumento-obs{ margin:.7rem 0 0; }
.instrumento-texto label, .instrumento-obs label{
  display:block; font-size:var(--fs--2); font-weight:600; color:var(--muted); margin-bottom:.3rem;
}
.instrumento-texto textarea, .instrumento-obs textarea{
  width:100%; box-sizing:border-box; resize:vertical;
  /* 1rem: abaixo disso o iOS dá zoom automático ao focar o campo. */
  font-family:var(--body); font-size:var(--fs-0); line-height:var(--lh-ui); color:var(--text);
  background:var(--surface-input); border:1.5px solid var(--line); border-radius:10px;
  padding:.6rem .8rem;
}
.instrumento-texto textarea:focus-visible, .instrumento-obs textarea:focus-visible{ border-color:var(--teal); }
.instrumento-acoes{
  display:flex; flex-wrap:wrap; align-items:center; gap:.8rem 1.4rem; margin:1.4rem 0 0;
}
.instrumento-acoes .link-btn, .instrumento-acoes .btn{ min-height:44px; }
.instrumento-acoes .instrumento-email{ display:inline-flex; align-items:center; }
/* Sem href (corpo longo demais para o e-mail): vira texto inerte, não link. */
.instrumento-email[aria-disabled="true"]{ color:var(--muted); text-decoration:line-through; cursor:default; }
/* Segundo clique armado: muda de cor e de rótulo ("Confirmar apagar"),
   sem confirm() nativo — ver o comentário em instrumento.js. */
/* 600, não 700: o "negrito" do corpo do site é o Inter 600 (BRAND.md §4);
   o 700 existe só no Space Grotesk de título. */
.instrumento-apagar[data-armado="sim"]{ color:var(--crit-ink); font-weight:600; }
.instrumento-nota-email{ margin:.6rem 0 0; font-size:var(--fs--1); color:var(--muted); max-width:44rem; }
.instrumento-pendentes{
  border:1px solid var(--line); border-left:4px solid var(--amber); border-radius:10px;
  padding:1rem 1.3rem; margin:1.6rem 0 0;
}
.instrumento-pendentes h3{
  font-family:var(--display); font-weight:700; color:var(--heading);
  font-size:var(--fs-1); margin:0 0 .6rem;
}
.instrumento-pendentes p{ margin:0; color:var(--muted); }
.instrumento-pendentes .lista{ margin:0; padding-left:1.1rem; }
.instrumento-pendentes .lista li{ margin:0 0 .5rem; line-height:var(--lh-ui); }
/* A observação de quem preencheu, ao lado do dispositivo citado: é ela que
   explica o "por quê" do item quando a lista vai a quem assina. */
.instrumento-pend-obs{ color:var(--muted); }
/* Marcação de versão de instrumento ainda sob gate de revisão (R25). */
.versao-nota{
  margin:1.2rem 0 0; font-size:var(--fs--1); color:var(--muted); max-width:44rem;
  border-left:3px solid var(--amber); padding-left:.9rem;
}
/* "em revisão": mesmo desenho dos demais status-tag, em linha no meio de um
   parágrafo de lista (por isso sem a margem inferior dos cards). */
.status-tag.em-revisao{ background:var(--warn-bg); color:var(--warn-ink); margin-bottom:0; vertical-align:middle; }
/* Linha que só existe no papel — ver @media print abaixo. */
.so-impressao{ display:none; }

/* ==== prompts do parceiro (R29, /parceiros/prompts.html) ====
   Cartão por prompt: mesmo desenho de .cartao (borda âmbar à esquerda),
   com o texto do prompt num bloco mono legível e o botão de copiar. */
.prompt-cartao{
  background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--amber);
  border-radius:var(--radius); padding:1.2rem 1.4rem; margin:0 0 1.2rem;
}
.prompt-cab{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.4rem .8rem; }
.prompt-cartao h3{ font-family:var(--display); font-weight:700; color:var(--heading); font-size:var(--fs-1); margin:0; }
.prompt-versao{ font-family:var(--mono); font-size:var(--fs--3); color:var(--muted); }
.prompt-badge{
  display:inline-block; font-size:var(--fs--3); font-weight:600; letter-spacing:.02em;
  border:1px solid var(--line); border-radius:999px; padding:.15rem .7rem; color:var(--muted);
}
.prompt-badge.mcp{ color:var(--teal-ink); border-color:currentColor; }
.prompt-cartao > p{ margin:.5rem 0 0; font-size:var(--fs--1); color:var(--text); }
.prompt-texto{
  font-family:var(--mono); font-size:var(--fs--2); line-height:var(--lh-ui); color:var(--text);
  background:var(--surface-muted); border:1px solid var(--line); border-radius:8px;
  padding:1rem 1.1rem; margin:.8rem 0 0; white-space:pre-wrap; overflow-x:auto;
  /* `pre-wrap` quebra em espaço, mas não dentro de "saude.capital/corpus/
     mudancas.html": a 390 px esse endereço tornava o <pre> rolável, e uma
     região rolável sem foco de teclado reprova a SC 2.1.1 (axe
     `scrollable-region-focusable`, serious — medido em R37). Quebrando
     em qualquer ponto, não há mais rolagem: a região deixa de existir. */
  overflow-wrap:anywhere;
}
.prompt-acoes{ margin-top:.7rem; display:flex; align-items:center; flex-wrap:wrap; gap:.8rem; }
/* Mesmos tokens do botão primário (R31): #fff sobre --teal media 5,01:1,
   abaixo do piso AAA de 7:1 — era a última superfície do site que ainda
   usava o teal de marca como fundo de texto (medido por axe em R37). */
.btn-copiar{
  display:inline-flex; align-items:center; justify-content:center; min-height:44px; min-width:44px;
  padding:.55rem 1.1rem; border-radius:999px; font-family:var(--body); font-weight:600; font-size:var(--fs--1);
  color:var(--btn-fg); background:var(--btn-bg); border:1.5px solid var(--btn-bg); cursor:pointer;
}
.btn-copiar:hover{ background:var(--btn-bg-hover); border-color:var(--btn-bg-hover); }
.btn-copiar:focus-visible{ outline:3px solid var(--amber); outline-offset:2px; }
.prompt-aviso{ font-size:var(--fs--1); color:var(--teal-ink); font-weight:600; }

/* ============ TIPOGRAFIA E RITMO DAS ÁREAS DE LEITURA (R33) ============
   Vem depois de tudo de propósito: é a camada que iguala medida de linha,
   recuo de lista e rolagem de tabela nas seis famílias de página que se
   leem do começo ao fim — páginas legais (.legal, inclusive .glossario),
   documentos em Markdown (.conteudo: casos, kit, instrumentos, minuta),
   fichas de norma (.norma-pagina), análises (.analise-pagina) e perícias
   (.pericias-pagina). Detalhe em docs/03 § "Tipografia e ritmo".

   1. MEDIDA DE LINHA — teto de --medida (60ch) em parágrafo, item de
   lista sem classe e definição. `min(100%, …)` garante que nada estreita
   em tela pequena. Tabelas, grades de cartão, o verificador e as listas
   com classe própria (cartões, grades, sumários em colunas) ficam fora:
   lá a largura é layout, não leitura. */
.legal p, .legal dd,
.conteudo p, .conteudo dd,
.norma-pagina > p, .norma-pagina dd,
.analise-pagina p,
.pericias-pagina p,
.legal ul:not([class]) li, .legal ol:not([class]) li,
.conteudo ul:not([class]) li, .conteudo ol:not([class]) li,
.analise-pagina ul:not([class]) li, .analise-pagina ol:not([class]) li,
/* R37 — `ul.lista`/`ol.lista` são as duas classes de prosa que a R33
   reconhece no recuo (bloco 3 abaixo) mas que `:not([class])` deixava de
   fora da medida: em /corpus/, /instrumentos/ e /quem-assina.html os itens
   corriam a 686–743 px, de 91 a 97 caracteres por linha, contra o teto de
   80 do SC 1.4.8 (AAA). */
ul.lista > li, ol.lista > li, .instrumento-pendentes .lista > li{
  max-width:min(100%, var(--medida));
}
/* O resumo em destaque das páginas legais se lê em bloco: medida menor. */
.legal .resumo{ max-width:min(100%, var(--medida-estreita)); }

/* 2. RITMO VERTICAL — texto longo respira mais que interface. */
.legal p, .legal ul:not([class]) li, .legal ol:not([class]) li,
.conteudo p, .conteudo ul:not([class]) li, .conteudo ol:not([class]) li,
.analise-pagina p{ line-height:var(--lh-loose); }

/* Título display nunca herda a altura de linha do corpo (1,6 abria buracos
   entre as duas linhas de um h1 de 40 px). Seletor de elemento, de
   propósito: preenche só onde não há regra de classe — .hero h1,
   .norma-pagina h1, .ficha h3 e afins mantêm a altura que já declaram. */
h1, h2{ line-height:var(--lh-tight); }
h3, h4, h5, h6{ line-height:var(--lh-titulo); }

/* Ritmo vertical das áreas de leitura: margens de título e de parágrafo
   em múltiplos do passo de espaçamento da marca (BRAND.md §5), em vez de
   valores soltos (2,8rem / 1,6rem / 0,8rem / 0,4rem). */
.legal > h2, .conteudo > h2{ margin-block:var(--space-12) var(--space-4); }
.legal > h3, .conteudo > h3{ margin-block:var(--space-8) var(--space-2); }
.legal > p, .conteudo > p{ margin-block:0 var(--space-4); }

/* 3. LISTAS NORMATIVAS — mesmo recuo e mesmo espaço entre itens em toda
   área de leitura. Só listas sem classe (as que o Markdown emite) e as
   duas classes de prosa (`ul.lista`, `.instrumento-pendentes .lista`);
   listas que são grade ou cartão têm `list-style:none` e recuo zero e
   não são alcançadas por estes seletores. */
.legal ul:not([class]), .legal ol:not([class]),
.conteudo ul:not([class]), .conteudo ol:not([class]),
.norma-pagina ul:not([class]), .norma-pagina ol:not([class]),
.analise-pagina ul:not([class]), .analise-pagina ol:not([class]),
ul.lista, ol.lista, .instrumento-pendentes .lista{
  padding-inline-start:var(--lista-recuo);
  padding-left:var(--lista-recuo); /* fallback p/ navegador sem propriedade lógica */
  margin-block:var(--space-4);
}
.legal ul:not([class]) > li, .legal ol:not([class]) > li,
.conteudo ul:not([class]) > li, .conteudo ol:not([class]) > li,
.norma-pagina ul:not([class]) > li, .norma-pagina ol:not([class]) > li,
.analise-pagina ul:not([class]) > li, .analise-pagina ol:not([class]) > li,
ul.lista > li, ol.lista > li, .instrumento-pendentes .lista > li{
  margin-block-end:var(--lista-gap);
}
/* Marcador alinhado com o texto, não colado no número/bolinha. */
.legal li::marker, .conteudo li::marker,
.norma-pagina li::marker, .analise-pagina li::marker,
ul.lista li::marker, ol.lista li::marker{ color:var(--muted); }
/* Lista aninhada não soma margem em cima da margem do item que a contém. */
.legal li > ul, .legal li > ol,
.conteudo li > ul, .conteudo li > ol,
.analise-pagina li > ul, .analise-pagina li > ol{ margin-block:var(--space-1); }
/* Sumários (TOC das páginas legais e do glossário) adotam o MESMO recuo,
   mas não o espaço entre itens nem a margem de bloco: são navegação
   dentro de uma caixa, não texto corrido. */
.legal .sumario ol, .glossario .sumario ul{
  margin:0; padding-inline-start:var(--lista-recuo); padding-left:var(--lista-recuo);
}
.legal .sumario > ol > li, .glossario .sumario > ul > li{ margin-block-end:0; }

/* 4. TABELAS — um único padrão de rolagem interna. A 320 px a tabela
   rola dentro do próprio contêiner; o <body> nunca rola na horizontal.
   O piso de largura mantém a tabela legível em vez de espremer as
   colunas até a quebra de palavra. */
.tabela-scroll, .scroll-x, .comparacao-tabela, .risco-tabela, .minuta-tabela{
  overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%;
}
.tabela-scroll > table, .scroll-x > table, .comparacao-tabela table{
  min-width:var(--tabela-min);
}
.minuta-tabela table{ min-width:var(--tabela-min-larga); }
/* Rolagem por teclado precisa de foco visível (WCAG 2.4.7) — mesmo
   tratamento de .bloco-codigo. Os contêineres que já recebem
   tabindex/role no HTML (.scroll-x das fichas e da home) passam a ter
   indicação de foco; os demais continuam roláveis por gesto e roda. */
.tabela-scroll:focus-visible, .scroll-x:focus-visible,
.comparacao-tabela:focus-visible, .minuta-tabela:focus-visible{
  outline:3px solid var(--teal-ink); outline-offset:2px;
}
/* Cabeçalho legível e coluna numérica alinhada pelo dígito. */
.legal th, .conteudo th, .comparacao-tabela th,
.risco-tabela th, .minuta-tabela thead th{
  font-size:var(--fs--2); line-height:var(--lh-ui);
}
.legal table, .conteudo table, .comparacao-tabela table,
.risco-tabela table, .minuta-tabela table{ font-variant-numeric:tabular-nums; }

/* ============ DIAGRAMAS SVG INLINE (R34, docs/03 § "Diagramas") ============
   Três diagramas do site — a tríade de assinaturas (/quem-assina.html),
   o caminho do corpus às superfícies públicas (home, § "Como funciona") e
   a máquina de status das normas (/corpus/, § "Status declarado × status
   efetivo"). Um desenho por página, sempre inline no HTML: sem <img>, sem
   arquivo externo, sem script.

   Um SVG só serve os dois temas porque nenhuma cor é escrita aqui — tudo
   sai de token (--surface, --muted, --heading, --teal-ink, --amber e os
   --chip-*), que já invertem nos blocos de modo escuro. Por isso não há
   par @media/[data-theme] a conferir em scripts/verificar_tema_css.py.

   Layout vertical de propósito: o mesmo desenho a 320 px e a 1920 px,
   sem segundo viewBox e sem conteúdo duplicado para leitor de tela. O
   viewBox tem 280 unidades de largura — a largura útil medida na coluna
   de leitura com a viewport no piso de 320 px —, e `max-width` limita a
   ampliação a ~1,26× no desktop; assim o texto do desenho nunca desce de
   13 px renderizados (medido: 13,0 px a 320 px e 16,3 px a partir de
   768 px).

   EXCEÇÃO NOMEADA à escala tipográfica da R33 (as outras duas são
   `--fs-mono-rel` e o `.75em` do @media print): os tamanhos aqui estão em
   px porque, dentro de um viewBox fixo, `rem` faria o texto crescer sem
   que as caixas crescessem junto — quem aumenta a fonte do navegador
   estouraria o desenho. Quem precisa do texto em tamanho próprio tem a
   legenda em HTML logo abaixo de cada diagrama, que é HTML comum e
   acompanha a preferência de fonte. */
.diagrama{ margin:1.6rem 0; }
.diagrama-svg{
  display:block; width:100%; max-width:22rem; height:auto;
  margin:0 auto .9rem;
}
.diagrama-svg .dg-caixa{ fill:var(--surface); stroke:var(--muted); stroke-width:1; }
.diagrama-svg .dg-titulo{
  fill:var(--heading); font-family:var(--display); font-weight:700; font-size:15px;
}
.diagrama-svg .dg-linha{ fill:var(--text); font-size:13px; }
.diagrama-svg .dg-nota{ fill:var(--muted); font-size:13px; font-style:italic; }
.diagrama-svg .dg-seta{ fill:none; stroke:var(--muted); stroke-width:1.4; }
.diagrama-svg .dg-ponta{ fill:var(--muted); stroke:none; }
/* Barras de acento à esquerda de cada caixa — fio estrutural (BRAND.md
   §3, regra revista do âmbar), nunca portador único de informação: o
   mesmo dado está no rótulo em texto e na legenda em HTML. */
.diagrama-svg .dg-fio-teal{ fill:var(--teal-ink); stroke:none; }
.diagrama-svg .dg-fio-amber{ fill:var(--amber); stroke:none; }
.diagrama-svg .dg-fio-ok{ fill:var(--chip-ok); stroke:none; }
.diagrama-svg .dg-fio-info{ fill:var(--chip-info); stroke:none; }
.diagrama-svg .dg-fio-crit{ fill:var(--chip-crit); stroke:none; }
/* Legenda em HTML: o mesmo conteúdo do desenho, em texto de verdade. */
.diagrama-legenda{
  list-style:none; margin:0; padding:0; display:grid; gap:.5rem;
  max-width:min(100%, var(--medida));
}
.diagrama-legenda li{ font-size:var(--fs--2); color:var(--text); margin:0; }
.diagrama-legenda b{ font-weight:600; color:var(--heading); }
.diagrama-fonte{
  font-family:var(--mono); font-size:var(--fs--3); color:var(--muted);
  margin:.6rem 0 0; max-width:min(100%, var(--medida));
}

/* ============ LINHA DO TEMPO DE VIGÊNCIA (R45) ============
   scripts/linha_tempo.py — por norma (/normas/<id>.html#linha-tempo) e
   global (/corpus/#linha-tempo-global). Mesmo regime do bloco DIAGRAMAS
   acima: SVG inline, sem <img>, sem script; texto do SVG em 13px. Só
   tokens EXISTENTES (teal-ink, amber, chip-ok, chip-info, chip-crit) —
   nenhuma cor nova, logo nada a replicar nos blocos de tema escuro.
   A tabela que acompanha cada SVG é a versão acessível e imprimível
   (ver docstring do módulo); o SVG é ilustração. */
.linha-tempo{ margin:1.6rem 0; }
/* max-width perto da largura do viewBox (320 unidades ≈ 20rem): o SVG
   nunca AUMENTA além disso, então também não ENCOLHE abaixo do texto
   nominal de 13px a partir de 320px de viewport — mesma tática de
   .diagrama-svg (R34). Um layout horizontal largo escalaria para baixo em
   tela estreita e furaria o piso de texto; por isso ambos os desenhos
   (svg_norma, svg_global) são verticais, uma linha por marco/norma. */
.linha-tempo-svg{ width:100%; max-width:20rem; height:auto; display:block; margin:0 0 .9rem; }
.linha-tempo-svg text{ font-size:13px; font-family:inherit; }
.lt-eixo{ stroke:var(--muted); stroke-width:1.4; }
.lt-conector{ stroke:var(--muted); stroke-width:1.2; stroke-dasharray:3 3; fill:none; }
.lt-rotulo{ fill:var(--text); font-size:13px; }
.lt-data{ fill:var(--muted); font-size:13px; font-variant-numeric:tabular-nums; }
/* Marcos da linha do tempo por norma — três formas distintas (círculo
   cheio, círculo vazado, losango), nunca só cor. */
.lt-marco-ato{ fill:var(--teal-ink); stroke:none; }
.lt-marco-vigencia{ fill:none; stroke:var(--teal-ink); stroke-width:2; }
.lt-marco-corpus{ fill:var(--amber); stroke:none; }
/* Cor + forma por órgão, na linha do tempo global — cinco tokens já
   existentes no site, cada um com sua forma (círculo, triângulo,
   quadrado, diamante, cruz) definida em scripts/linha_tempo.py. */
.lt-orgao-congresso{ fill:var(--teal-ink); stroke:var(--teal-ink); }
.lt-orgao-cfm{ fill:var(--chip-crit); stroke:var(--chip-crit); }
.lt-orgao-anpd{ fill:var(--amber); stroke:var(--amber); }
.lt-orgao-cns{ fill:var(--chip-ok); stroke:var(--chip-ok); }
.lt-orgao-ms{ fill:var(--chip-info); stroke:var(--chip-info); }
.lt-vazado{ fill:none; stroke-width:2; }
.linha-tempo-legenda{
  list-style:none; margin:.8rem 0 0; padding:0; display:grid; gap:.35rem;
}
.linha-tempo-legenda li{ font-size:var(--fs--2); color:var(--text); display:flex; align-items:center; gap:.5rem; }
.linha-tempo-legenda b{ font-weight:600; color:var(--heading); }
.linha-tempo-amostra{
  display:inline-block; width:12px; height:12px; border-radius:2px;
  background:var(--muted); flex:0 0 auto;
}
.linha-tempo-amostra.lt-orgao-congresso{ background:var(--teal-ink); border-radius:50%; }
.linha-tempo-amostra.lt-orgao-cfm{ background:var(--chip-crit); }
.linha-tempo-amostra.lt-orgao-anpd{ background:var(--amber); }
.linha-tempo-amostra.lt-orgao-cns{ background:var(--chip-ok); }
.linha-tempo-amostra.lt-orgao-ms{ background:var(--chip-info); }
.linha-tempo-amostra.lt-vazado{ background:none; border:2px solid var(--teal-ink); }
.linha-tempo-nota{ font-size:var(--fs--2); color:var(--muted); max-width:min(100%, var(--medida)); }
.linha-tempo-tabela{ width:100%; border-collapse:collapse; font-size:var(--fs--1); font-variant-numeric:tabular-nums; }
.linha-tempo-tabela caption{
  text-align:left; color:var(--muted); font-size:var(--fs--2); padding:0 0 .6rem; line-height:var(--lh-ui);
}
.linha-tempo-tabela th, .linha-tempo-tabela td{
  text-align:left; padding:.5rem .6rem; border-bottom:1px solid var(--line); vertical-align:top;
}
.linha-tempo-tabela thead th{ font-size:var(--fs--2); color:var(--muted); font-weight:600; white-space:nowrap; }
.linha-tempo-tabela a{ font-weight:600; color:var(--teal-ink); }

/* ============ APRESENTAÇÃO (/materiais/<slug>.html, formato deck) — R39 ============
   Um deck que continua sendo uma página: cada slide é uma <section> na
   ordem do documento, e a rolagem normal do navegador percorre tudo sem
   JavaScript (public/materiais/apresentacao.js só acrescenta atalho de
   teclado, contador ao vivo e a barra de controles, que nasce `hidden`).
   Só tokens existentes — nenhuma cor nova, logo nada a replicar nos
   blocos de tema escuro (scripts/verificar_tema_css.py). */

/* O contêiner de rolagem é o documento; o :has() é o que evita ligar o
   snap nas outras páginas do site. Sem suporte a :has(), o deck degrada
   para rolagem comum — que é o comportamento de base de qualquer jeito. */
html:has(.apresentacao){ scroll-snap-type:y proximity; scroll-padding-top:5rem; }
@media (prefers-reduced-motion: reduce){
  html:has(.apresentacao){ scroll-snap-type:none; }
}

.apresentacao{ max-width:76ch; margin-inline:auto; }
.apresentacao-chrome{ padding-bottom:var(--space-6); border-bottom:1px solid var(--line); }
.apresentacao-chrome h1{
  font-family:var(--display); font-weight:700; letter-spacing:-0.015em;
  color:var(--heading); font-size:var(--fs-6); margin:.1rem 0 .6rem;
}
.apresentacao-chrome .lead{
  font-size:var(--fs-1); color:var(--muted); line-height:var(--lh-body);
  max-width:min(100%, var(--medida)); margin:0 0 .8rem;
}
.apresentacao-meta{
  font-family:var(--mono); font-size:var(--fs--3); color:var(--muted);
  margin:0 0 .8rem;
}

.slide{
  /* min-height, nunca height: um slide com muito conteúdo cresce em vez
     de cortar texto — a página vale mais que a metáfora de projeção. */
  min-height:calc(100dvh - 12rem);
  display:flex; flex-direction:column; justify-content:center;
  padding:var(--space-8) 0 var(--space-12);
  border-top:1px solid var(--line);
  scroll-snap-align:start; scroll-margin-top:5rem;
}
.slide:first-child{ border-top:0; }
/* O <section> recebe foco por script (tabindex="-1") para que o leitor de
   tela anuncie o slide inteiro; o anel precisa continuar visível. */
.slide:focus-visible{ outline:3px solid var(--teal-ink); outline-offset:6px; }
.slide-num{
  font-family:var(--mono); font-size:var(--fs--3); color:var(--muted);
  margin:0 0 var(--space-4); letter-spacing:.06em;
}
.slide h2{
  font-family:var(--display); font-weight:700; letter-spacing:-0.015em;
  color:var(--heading); font-size:var(--fs-6); line-height:var(--lh-display);
  margin:0 0 var(--space-6);
}
.slide h3{
  font-family:var(--display); font-weight:700; color:var(--heading);
  font-size:var(--fs-2); margin:var(--space-6) 0 var(--space-2);
}
.slide p, .slide li{
  font-size:var(--fs-1); line-height:var(--lh-body);
  max-width:min(100%, var(--medida));
}
.slide p{ margin:0 0 var(--space-4); }
.slide ul, .slide ol{ margin:0 0 var(--space-4); padding-left:1.2rem; }
.slide li{ margin:0 0 var(--space-2); }
.slide li::marker{ color:var(--teal-ink); }
.slide strong{ font-weight:600; color:var(--heading); }
.slide blockquote{
  margin:var(--space-4) 0; padding:var(--space-2) 0 var(--space-2) var(--space-4);
  border-left:3px solid var(--amber); color:var(--text);
}
.slide table{ width:100%; border-collapse:collapse; margin:var(--space-2) 0 var(--space-4); font-size:var(--fs--1); }
.slide th, .slide td{ text-align:left; padding:.55rem .6rem; border-bottom:1px solid var(--line); vertical-align:top; }
.slide th{ color:var(--heading); font-family:var(--display); font-weight:700; }
.slide a{ color:var(--teal-ink); }

/* Barra de controles: sticky no fim do contêiner, em fluxo — não cobre
   conteúdo em 320 px e não precisa de cálculo de altura de viewport. */
.apresentacao-controles{
  position:sticky; bottom:0; z-index:5;
  /* Mobile-first: o contador ocupa a primeira linha inteira e os dois
     botões dividem a segunda — a 320 px eles não cabem lado a lado com o
     contador no meio sem encolher abaixo do alvo de 44 px (AAA). */
  display:grid; grid-template-columns:1fr 1fr; align-items:center;
  gap:var(--space-2);
  padding:var(--space-2) 0; margin-top:var(--space-4);
  background:var(--paper); border-top:1px solid var(--line);
}
.apresentacao-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; min-width:44px; padding:.6rem 1.1rem;
  border:1.5px solid var(--line); border-radius:999px;
  background:var(--surface); color:var(--heading);
  font-family:var(--body); font-size:var(--fs--1); font-weight:600;
  cursor:pointer;
  transition:border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
}
.apresentacao-btn:hover{ border-color:var(--teal-border); }
.apresentacao-btn:disabled{ color:var(--muted); cursor:default; border-color:var(--line); }
.apresentacao-contador{
  grid-column:1 / -1; order:-1;
  margin:0; font-family:var(--mono); font-size:var(--fs--2); color:var(--text);
  text-align:center;
}
@media (min-width: 640px){
  .apresentacao-controles{ grid-template-columns:auto 1fr auto; }
  .apresentacao-contador{ grid-column:auto; order:0; }
}
.apresentacao-rodape{ padding-top:var(--space-2); }
.apresentacao-rodape .versao-pagina{ margin-top:var(--space-6); }

/* ============ IMPRENSA E MARCA (/imprensa.html — R40) ============
   Duas amostras do lockup — uma sobre papel, outra sobre a tinta
   institucional — para quem baixa a marca conferir de olho a variante
   certa antes de usar (BRAND.md §6, "usar a variante correta para o
   contexto"). As cores aqui são literais de propósito: mostram como o
   logo aparece impresso ou num fundo azul-profundo REAL, não como o tema
   do visitante deixaria a página — por isso não usam --paper/--ink (que
   mudam de valor no escuro) e ficam fora da trava de
   scripts/verificar_tema_css.py, que só compara os dois blocos de tema
   entre si. */
.marca-preview-grid{ display:grid; gap:1rem; margin:1.2rem 0; }
@media (min-width:640px){ .marca-preview-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.marca-preview{
  display:flex; align-items:center; justify-content:center; padding:2rem 1.5rem;
  border-radius:var(--radius); border:1px solid var(--line);
}
.marca-preview img{ width:min(260px,100%); height:auto; }
.marca-preview-clara{ background:#FAFBFC; }
.marca-preview-escura{ background:#0E2A47; }
.marca-preview p{ margin:0; font-size:var(--fs--1); }
.paleta-lista{ display:grid; gap:.7rem; list-style:none; margin:1rem 0; padding:0; }
.paleta-item{ display:flex; align-items:center; gap:.8rem; }
.paleta-swatch{
  display:inline-block; width:28px; height:28px; border-radius:8px; flex-shrink:0;
  border:1px solid var(--line);
}
.descricoes-grid{ display:grid; gap:1.25rem; margin:1.2rem 0; }
@media (min-width:900px){
  /* align-items:start: sem isso, o grid estica as três colunas até a
     altura da maior (a de 300 palavras) — os cartões de 50 e 100 ficam
     com o botão "Copiar" solto no fim de um vão vazio grande. Cada
     cartão passa a ter só a própria altura. */
  .descricoes-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start; }
}
.descricao-cartao p[id^="descricao-"]{ font-size:var(--fs--1); line-height:var(--lh-body); }
.descricao-contagem{ margin:.3rem 0 0; font-size:var(--fs--2); color:var(--muted); }

/* ============ IMPRESSÃO ============ */
@media print{
  header.site, nav.main, .cta-final, .checker-row, .exemplos, .sugestoes,
  .contador, .ficha-acoes button, .hero-fundo, .selo-marca-dagua, footer.site,
  .rail-fases, .gold, #progresso-leitura, .voltar-topo, .pericias-fundo, .acoes,
  /* No papel a ficha vale por inteiro — quem imprime o resultado quer anexar
     os metadados e a referência ABNT. O <details> é aberto antes da
     impressão pelo handler `beforeprint` de index.html; aqui só some o que
     não faz sentido em papel (o disparador e os botões de copiar). */
  .minuta-acoes, .minuta-exportar, .resultado-acoes button,
  /* Instrumentos (R24): no papel somem os controles e a barra de
     progresso; ficam o enunciado, a fonte citada, a resposta e a
     observação — como texto, não como campo de formulário. */
  .instrumento-acoes, .instrumento-progresso, .instrumento-opcoes,
  .instrumento-texto, .instrumento-obs, .instrumento-nota-email,
  .instrumento-sugestoes,
  /* R29: o botão de copiar não faz sentido em papel — o texto do prompt
     já fica visível no .prompt-texto ao lado. */
  .prompt-acoes,
  /* R31: no papel ficam a consulta, o resultado e a ressalva de cobertura.
     O painel "Outras formas de consultar" é navegação (o handler de
     `beforeprint` abre todo <details> fechado, e ele viria junto), e o
     estado inicial só existe enquanto não há resposta — nenhum dos dois
     tem o que dizer numa folha impressa. */
  .checker-mais, .estado-inicial,
  /* R35: no papel a ficha de /normas/ vale pelo conteúdo. O sumário e os
     elos anterior/próxima são navegação; os botões de copiar não têm para
     onde copiar — o texto da citação fica visível no <code> ao lado. */
  .ficha-sumario, .ficha-vizinhas, .norma-pagina .link-btn, .copiar-aviso,
  /* R39: no papel o deck é o conteúdo. A barra Anterior/Próximo é
     navegação de tela e não tem função impressa; o número de cada slide
     fica (é ele que orienta quem segue a projeção pela folha). */
  .apresentacao-controles,
  .ficha-detalhe > summary, .ficha-detalhe .citar .link-btn{ display:none !important; }
  /* Um slide por página: a altura de viewport não existe no papel (min-height
     zerado) e cada slide a partir do segundo abre folha nova — com o chrome
     (timbre, título, versão) viajando junto do primeiro. N slides = N páginas,
     sem folha em branco no fim, que é o que `break-after` deixaria. */
  .apresentacao{ max-width:none; }
  .slide{ min-height:0; display:block; padding:0; border-top:0; break-inside:avoid; }
  .slide + .slide{ break-before:page; }
  .apresentacao-rodape{ break-before:avoid; }
  .so-impressao{ display:block !important; margin:.5rem 0 0; }
  .instrumento-item{ break-inside:avoid; border-color:#999; }
  .instrumento-aviso, .instrumento-pendentes{ border:1px solid #999; background:none; color:#000; }
  body{ background:#fff; color:#000; }
  .hero{ background:none; color:#000; padding:var(--space-4) 0; }
  .ficha{ break-inside:avoid; border-color:#999; }
  .ficha a[href]::after{ content:" (" attr(href) ")"; font-size:.75em; color:#555; }
  details{ break-inside:avoid; }
}