/* =========================================================================
   Capitalis — site institucional (sistema de design v2)
   Base: docs/design-system.md (navy #16294D, gold #D4A017, Inter, micro-raio
   0.0625rem, separação por linha). Disciplinas incorporadas da análise de
   referência (PLANO_REDESIGN v1.0):
     · hierarquia por LUMINÂNCIA, não por cor — o dourado só onde significa;
     · display em tracking negativo e leading sub-1;
     · rótulo estrutural e número SEMPRE em mono, texto corrido NUNCA;
     · hairline de 10% como único divisor — zero sombra, raio só o micro-raio;
     · alternância de tema entre seções como respiração;
     · escala de movimento fechada (4 curvas × 6 durações).
   ========================================================================= */

/* Fontes hospedadas no próprio site: sem round-trip a terceiro, sem troca de fonte
   visível durante o carregamento. Subsets latin e latin-ext, licença SIL Open Font.

   · Inter v4 variável (rsms.me/inter), com DOIS eixos: `wght` 100–900 e `opsz` 14–32.
     O eixo óptico é o que o pessoal conhece como "Inter Display": em tamanho grande ele
     estreita a letra, fecha o espacejamento e afina os terminais. Por isso não existe
     arquivo separado aqui — display e texto são o mesmo arquivo em posições diferentes do
     eixo, e o navegador aplica isso sozinho por `font-optical-sizing: auto`.
   · JetBrains Mono variável 400–500, para rótulo e número.

   Baixadas em 2026-08-28 e subsetadas com fonttools (pyftsubset). */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('fonts/jetbrainsmono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('fonts/jetbrainsmono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Marca (canônico) */
  --brand-navy: #16294D;
  --brand-navy-deep: #0f1d38;
  --brand-gold: #D4A017;
  --brand-gold-soft: #e6b94a;

  /* Palco escuro — usado nas seções "dark" em QUALQUER tema.
     A escada é uma só, na matiz 218 da marca, e desce até o chão da página:
     brand-navy (l 19,4) → navy-deep (l 13,9) → ink (l 9,6) → ink-deep (l 6,5).
     `--ink-deep` é o degrau do RODAPÉ. Antes ele usava `--brand-navy-deep`, que
     é mais CLARO que o palco: a página acendia justamente onde deveria assentar
     (apontado pelo Diego em 2026-08-30). Descer também melhora a leitura do
     rodapé — o texto `--on-ink-subtle` sai de 6,58:1 para 7,59:1. */
  --ink: #0b1526;
  --ink-deep: #070e1a;
  --ink-raised: #16294D;

  /* Escada de luminância sobre escuro */
  --on-ink: #F2F5FA;
  --on-ink-muted: #C2CBDA;
  --on-ink-subtle: #97A3B8;
  --on-ink-ghost: #6E7B92;   /* eyebrows, metadados */

  /* Hairlines sobre escuro */
  --line-ink: rgba(242,245,250,.10);
  --line-ink-strong: rgba(242,245,250,.16);

  /* Tema claro (seções "light") */
  --bg: #F7FAFF;
  --surface: #FFFFFF;
  --surface-2: #eef2f8;
  --border: #e2e7f0;
  --line: rgba(22,41,77,.10);
  --line-strong: rgba(22,41,77,.16);
  --text: #1c2430;
  --heading: #16294D;
  --muted: #4d5460;
  --ghost: #6b7789;
  --primary: #2456E0;
  --link: #2456E0;

  /* Espaço (base 4) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 80px;
  --maxw: 1200px;

  /* Geometria — REGRA CANÔNICA (2026-08-29, mesma da plataforma): micro-raio
     adaptável de 0.0625rem (= 1px na raiz de 16px) em toda caixa fechada —
     botões, cartões, prévias, controles. De longe o canto segue lendo como
     vivo; de perto perde a aspereza do pixel. Única fonte do raio: este token.
     Hairlines abertas (border-top/left das grades) não recebem raio — não há
     canto a arredondar. Exceção de marca: o ponto do wordmark (50%). */
  --radius: 0.0625rem;

  /* Movimento — escala fechada */
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(0, 0, .2, 1);
  --ease-expo: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-micro: 150ms; --dur-fast: 200ms; --dur-base: 300ms;
  --dur-slow: 500ms; --dur-reveal: 700ms; --dur-ambient: 1200ms;
}

[data-theme="dark"] {
  /* MESMA FAMÍLIA DO PALCO (matiz 218 da marca), não um cinza-neutro paralelo.
     Medido em 2026-08-30, na emenda que o Diego apontou acima do palco 3D: o chão
     do tema escuro (#10141c, saturação 27%) e o palco (`--ink` #0b1526, saturação
     55%) tinham luminância PRATICAMENTE IGUAL — razão 1,009:1. Sem degrau de brilho,
     o olho não lê "outra seção", lê **mancha**: a única diferença entre os dois lados
     da emenda era croma. Alinhar a saturação mantém a luminância de cada degrau
     (o tema não fica mais claro nem mais escuro) e faz a emenda virar decisão em vez
     de defeito. Contraste conferido: texto 14,1:1 · secundário 8,0:1 · link 6,9:1.
     Em aberto, e é decisão de produto, não de engenharia: se o tema escuro deve
     RECUPERAR a alternância clara/escura (hoje ela não existe — os dois lados têm o
     mesmo brilho), o caminho é levantar este chão ou aprofundar o palco. */
  --bg: #0d131f;
  --surface: #171f2e;
  --surface-2: #1f2939;
  --border: #2a3548;
  --line: rgba(242,245,250,.10);
  --line-strong: rgba(242,245,250,.16);
  --text: #dbe1ea;
  --heading: #ffffff;
  --muted: #9fabbd;
  --ghost: #7d8899;
  --primary: #2E62E8;
  --link: #6E9BFF;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* rem = 18px: a escala inteira do site sobe de uma vez */
html { scroll-behavior: smooth; font-size: 18px; }
/* âncora não some atrás da barra fixa */
section[id], div[id] { scroll-margin-top: 78px; }

body {
  font-family: Inter, 'Segoe UI', system-ui, sans-serif;
  font-optical-sizing: auto;
  font-size: 1.06rem;
  /* Corpo fino, na mesma linha do display. 200 é o piso do legível em texto corrido:
     abaixo disso o traço some no antialiasing e a leitura vira esforço, principalmente
     sobre o palco escuro. Ênfase sobe para 600 para continuar sendo ênfase. */
  font-weight: 200;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Papéis tipográficos (separação dura) ----------
   Display é FINO. O peso alto foi trocado por peso baixo em corpo grande: em títulos
   dessa escala o traço fino lê melhor, dá ar à página e é o que separa uma marca
   financeira sóbria de um anúncio. A força vem do TAMANHO e do espacejamento negativo,
   não da gordura da letra. `opsz` no máximo é o antigo "Inter Display" — sem ele o
   título grande fica largo e mole. Contraste continua alto porque a cor é sólida. */
b, strong { font-weight: 600; }
/* O traço fino depende de fundo claro para manter o contraste percebido. Sobre o palco
   escuro o mesmo peso 200 some, então a prosa dessas seções sobe um degrau. */
.sec-dark, .hero, .pinned, .acesso, .numbers, footer { font-weight: 300; }
h1, h2, h3 { color: var(--heading); }
h1 {
  font-size: clamp(2.6rem, 5.6vw, 4.6rem);
  font-weight: 200;
  font-variation-settings: 'opsz' 32;
  line-height: 1.0;
  letter-spacing: -0.035em;
}
h2 {
  font-size: clamp(2rem, 4.1vw, 3.3rem);
  font-weight: 250;
  font-variation-settings: 'opsz' 32;
  line-height: 1.06;
  letter-spacing: -0.03em;
}
h3 {
  font-size: 1.45rem;
  font-weight: 400;
  font-variation-settings: 'opsz' 24;
  line-height: 1.2;
  letter-spacing: -0.018em;
}

/* Rótulo estrutural: SEMPRE mono, nunca Inter */
.eyebrow {
  display: block;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ghost);
  margin-bottom: var(--s4);
}
.sec-dark .eyebrow { color: var(--on-ink-ghost); }

/* Dado numérico: mono tabular */
.data, .num b {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: 0.02em;
}

p { max-width: 68ch; }
a { color: var(--link); text-decoration: none; transition: color var(--dur-fast) var(--ease-standard); }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s5); }

/* ---------- Shells de seção: alternância como respiração ---------- */
.sec { padding: var(--s8) 0; border-top: 1px solid var(--line); }
.sec-light { background: var(--bg); }
.sec-light.raised { background: var(--surface); }
.sec-dark {
  background: var(--ink);
  color: var(--on-ink-muted);
  border-top: 1px solid var(--line-ink);
}
.sec-dark h1, .sec-dark h2, .sec-dark h3 { color: var(--on-ink); }
.sec-dark p { color: var(--on-ink-muted); }
/* Link em texto corrido sobre o palco escuro. O `:not` existe porque botão não é link
   de texto: sem ele, `.sec-dark a` (0,1,1) vencia `.btn-gold` (0,1,0) por especificidade e
   pintava de azul o rótulo de um botão dourado — ilegível, e foi exatamente o que
   aconteceu no Contato e na faixa de acesso. */
.sec-dark a:not(.btn):not(.entrar):not(.cta) { color: #8fb3ff; }

.sec-head { margin-bottom: var(--s7); }
.sec-head p { margin-top: var(--s4); color: var(--muted); }
.sec-dark .sec-head p { color: var(--on-ink-muted); }

/* ---------- Header ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--ink);
  border-bottom: 1px solid var(--line-ink);
  transition: border-color var(--dur-fast) var(--ease-standard);
}
.topbar-in {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s5);
  height: 62px; display: flex; align-items: center; gap: var(--s5);
}
.logo {
  display: flex; align-items: baseline; gap: 3px;
  color: #fff; font-weight: 800; letter-spacing: .14em; font-size: 16px;
}
.logo:hover { text-decoration: none; }
.logo .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-gold); display: inline-block; }
.nav { display: flex; gap: var(--s5); margin-left: auto; align-items: center; }
.nav a {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: var(--on-ink-subtle); font-size: 12px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
}
.nav a:hover { color: var(--on-ink); text-decoration: none; }
.nav .cta {
  background: var(--brand-gold); color: var(--brand-navy-deep);
  border-radius: var(--radius);
  padding: 10px 18px; font-weight: 700; letter-spacing: .08em;
  transition: background var(--dur-fast) var(--ease-standard);
}
.nav .cta:hover { background: var(--brand-gold-soft); }
.icon-btn {
  background: transparent; border: 1px solid var(--line-ink-strong); color: var(--on-ink-subtle);
  border-radius: var(--radius);
  width: 32px; height: 32px; cursor: pointer; font-size: 14px; line-height: 1;
  transition: color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.icon-btn:hover { color: var(--on-ink); border-color: var(--on-ink-subtle); }
.nav-toggle { display: none; }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background: var(--ink);
  color: var(--on-ink-muted);
  min-height: 88vh; display: flex; align-items: center;
}
/* Poço de luz do hero. Fica no CSS, e não no canvas, porque um fillRect de tela cheia com
   gradiente radial a 2880×1600 são 4,6 milhões de pixels de blend POR QUADRO — a operação
   mais cara da cena. Aqui o compositor pinta uma vez, sobrevive a prefers-reduced-motion e
   continua existindo abaixo de 900px, onde o canvas está desligado. */
.hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(58% 62% at 74% 66%, rgba(86,201,214,.055), rgba(86,201,214,.018) 45%, transparent 72%),
    linear-gradient(180deg, transparent 38%, rgba(4,9,17,.45) 100%);
}
.hero canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none;
  /* A máscara é a guarda que protege o texto, e é ela que cobre as camadas desenhadas em
     lote — nelas o alpha é por lote, não por elemento, então a proteção por coordenada do
     JS não alcança. Medido: com a curva anterior, o canvas alterava pixels sob o H1 em até
     108/255. Com esta, a faixa do título fica abaixo de 30. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.06) 34%, rgba(0,0,0,.24) 58%, #000 76%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.06) 34%, rgba(0,0,0,.24) 58%, #000 76%);
}
.hero-in { position: relative; max-width: var(--maxw); margin: 0 auto; padding: var(--s8) var(--s5); width: 100%; }
.hero h1 {
  color: var(--on-ink); max-width: 15em;
  font-weight: 100;                    /* Inter variável, eixo wght 100–900 */
  text-transform: uppercase;
  letter-spacing: -0.02em;             /* caixa alta pede menos aperto que a caixa mista */
  line-height: 1.02;
}
.hero .type-line {
  display: block; margin-top: var(--s5);
  font-size: clamp(1.45rem, 2.7vw, 2.15rem); font-weight: 300;
  font-variation-settings: 'opsz' 32;
  letter-spacing: -0.015em; line-height: 1.25;
  color: var(--brand-gold-soft);
  min-height: 2.5em;
}
.type-caret {
  display: inline-block; width: 2px; height: .95em; background: var(--brand-gold);
  margin-left: 4px; vertical-align: -0.1em; animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.hero p.lead { margin-top: var(--s5); max-width: 42em; font-size: 1.1rem; color: var(--on-ink-muted); }

/* Segunda linha do hero, digitada uma vez e mantida */
.type-lead {
  display: block; margin-top: var(--s5);
  font-size: clamp(1.15rem, 1.9vw, 1.6rem); font-weight: 300;
  font-variation-settings: 'opsz' 28;
  line-height: 1.35; letter-spacing: -0.01em;
  color: var(--on-ink); min-height: 1.4em; max-width: 30em;
}
.type-lead::after {
  content: ''; display: inline-block; width: 2px; height: 1em;
  margin-left: 4px; vertical-align: -0.12em;
  background: var(--brand-gold); animation: blink 1s steps(1) infinite;
}
.type-lead[data-pronto]::after { display: none; }
.hero-ctas { margin-top: var(--s7); display: flex; gap: var(--s4); flex-wrap: wrap; }
.hero-note {
  margin-top: var(--s5);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--on-ink-ghost);
}

/* ---------- Botões ---------- */
.btn {
  display: inline-block; padding: 15px 28px; font-weight: 700; font-size: 14px;
  border-radius: var(--radius);
  letter-spacing: .04em; cursor: pointer; border: none;
  transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.btn:hover { text-decoration: none; }
.btn-gold { background: var(--brand-gold); color: var(--brand-navy-deep); }
.btn-gold:hover { background: var(--brand-gold-soft); }
.btn-ghost { background: transparent; color: var(--on-ink); border: 1px solid var(--line-ink-strong); }
.btn-ghost:hover { border-color: var(--on-ink); }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: #1c46bd; }

/* ---------- Faixa de prova (marquee) ---------- */
.marquee {
  background: var(--surface); overflow: hidden;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: var(--s5) 0;
}
.marquee-in { display: flex; width: max-content; animation: marquee 44s linear infinite; }
.marquee:hover .marquee-in { animation-play-state: paused; }
.marquee span {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ghost); padding: 0 var(--s5); white-space: nowrap;
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Faixa de números (dígitos rolando) ---------- */
.numbers { background: var(--ink); border-top: 1px solid var(--line-ink); }
.numbers-in {
  max-width: var(--maxw); margin: 0 auto; padding: var(--s6) var(--s5);
  display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s5);
}
.num { border-left: 1px solid var(--line-ink-strong); padding-left: var(--s4); }
.num b { display: block; color: var(--on-ink); font-size: 2.5rem; line-height: 1.1; }
.num > span {   /* só o rótulo: um `.num span` genérico capturaria as colunas de dígitos */
  display: block; margin-top: var(--s2);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: var(--on-ink-ghost); font-size: 12px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
}
/* colunas de dígitos */
.roll { display: inline-flex; height: 1.1em; overflow: hidden; vertical-align: bottom; }
.roll-col { display: flex; flex-direction: column; transition: transform var(--dur-reveal) var(--ease-expo); }
.roll-col i { font-style: normal; height: 1.1em; line-height: 1.1em; }

/* ---------- Grades e células (hairline-only) ---------- */
.grid { display: grid; gap: 0; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid > .cell { border-top: 1px solid var(--line); border-left: 1px solid var(--line); padding: var(--s5) var(--s5) var(--s6); }
.grid > .cell:nth-child(3n+1) { border-left: none; }
.grid-2 > .cell:nth-child(2n+1) { border-left: none; }
.sec-dark .grid > .cell { border-color: var(--line-ink); }
.cell h3 { margin-bottom: var(--s3); }

/* ---------- Prévia do módulo (hover/foco no cartão + ampliação) ----------
   O cartão diz o que o módulo faz; a prévia MOSTRA a tela. São capturas reais do
   produto rodando, com dados de demonstração de factorings fictícias — nenhum
   dado de cliente (pré-BETA, regra canônica nº 4).
   Dois tamanhos, de propósito: o popup do hover é grande o bastante para se
   reconhecer a tela (440px), e o clique abre a MESMA imagem quase em tela cheia,
   com um X, para quem quiser ler os números. Aparece no hover e também no FOCO,
   senão o recurso não existe para teclado; some abaixo de 900px, onde não há
   ponteiro e o popup cobriria a própria grade (lá o clique ainda amplia). */
.cell[data-previa] { position: relative; cursor: pointer; }
.cell[data-previa]:focus { outline: 1px solid var(--brand-gold); outline-offset: -1px; }
.cell[data-previa]::after {          /* marca discreta de que há algo a ver */
  content: ''; position: absolute; top: var(--s5); right: var(--s5);
  width: 5px; height: 5px; background: var(--brand-gold); opacity: 0;
  border-radius: var(--radius);
  transition: opacity var(--dur-fast) var(--ease-standard);
}
.cell[data-previa]:hover::after { opacity: .8; }
.previa {
  position: absolute; z-index: 30; left: 50%; top: 100%;
  width: 440px; margin-left: -220px; margin-top: -8px;
  background: var(--brand-navy-deep); border: 1px solid var(--line-ink-strong);
  border-radius: var(--radius);
  padding: var(--s4);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-base) var(--ease-out), visibility var(--dur-base);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .45);
}
.cell[data-previa]:hover .previa,
.cell[data-previa]:focus .previa,
.cell[data-previa]:focus-within .previa {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.previa img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line-ink); background: var(--brand-navy-deep);
  border-radius: var(--radius);
}
.previa b {
  display: block; margin-top: var(--s4);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand-gold);
}
.previa span {
  display: block; margin-top: var(--s2);
  font-size: 0.9rem; line-height: 1.5; color: var(--on-ink-muted); font-weight: 300;
}
/* Convite explícito ao clique — sem ele o popup parece o fim do caminho. */
.previa-lupa {
  display: block; margin-top: var(--s3);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; font-style: normal; letter-spacing: .14em; text-transform: uppercase;
  color: var(--on-ink-muted); opacity: .75;
}
.previa-lupa::before { content: '\002B  '; color: var(--brand-gold); }
/* A última coluna e a última linha empurrariam o popup para fora da tela. */
.grid-3 > .cell[data-previa]:nth-child(3n) .previa { left: auto; right: 0; margin-left: 0; }
.grid-3 > .cell[data-previa]:nth-child(3n+1) .previa { left: 0; margin-left: 0; }
.grid-3 > .cell[data-previa]:nth-last-child(-n+3) .previa {
  top: auto; bottom: 100%; margin-top: 0; margin-bottom: -8px;
}

/* ---------- Ampliação da prévia (lightbox) ----------
   Quase tela cheia, fundo escurecido, X no canto. Fecha no X, no Esc e no
   clique fora da figura — três saídas, porque uma sobreposição sem saída óbvia
   é a forma mais rápida de perder o visitante. */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(6, 12, 24, .93);
  display: grid; grid-template-rows: 1fr; place-items: center;
  padding: clamp(16px, 4vw, 56px);
}
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; max-width: 1400px; width: 100%; }
.lightbox img {
  display: block; width: 100%; height: auto;
  max-height: 78vh; object-fit: contain;
  border: 1px solid var(--line-ink-strong);
  border-radius: var(--radius);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .6);
}
.lightbox figcaption { margin-top: var(--s4); max-width: 70ch; }
.lightbox figcaption b {
  display: block; font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand-gold);
}
.lightbox figcaption span {
  display: block; margin-top: var(--s2);
  font-size: 0.95rem; line-height: 1.6; color: var(--on-ink-muted); font-weight: 300;
}
.lightbox-x {
  position: absolute; top: clamp(10px, 2vw, 22px); right: clamp(10px, 2vw, 22px);
  width: 44px; height: 44px; line-height: 1;
  background: transparent; border: 1px solid var(--line-ink-strong);
  border-radius: var(--radius);
  color: var(--on-ink); font-size: 26px; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.lightbox-x:hover, .lightbox-x:focus { border-color: var(--brand-gold); color: var(--brand-gold); }
/* Trava a rolagem do fundo enquanto a ampliação está aberta. */
body.sem-rolagem { overflow: hidden; }

.cell h3 .mod-dot { color: var(--brand-gold); }
.cell p { font-size: 1rem; line-height: 1.6; color: var(--muted); }
.sec-dark .cell p { color: var(--on-ink-muted); }

/* ---------- Tese: duas colunas com hairline vertical ---------- */
.tese { display: grid; grid-template-columns: 1fr 1fr; margin-top: var(--s7); }
.tese > div { padding: var(--s5) var(--s6) var(--s5) 0; border-top: 1px solid var(--line); }
.tese > div:last-child { padding-left: var(--s6); padding-right: 0; }
.tese > div:first-child { border-right: 1px solid var(--line); }
.sec-dark .tese > div { border-color: var(--line-ink); }
.tese h3 { margin-bottom: var(--s3); }
.tese p { font-size: 1rem; color: var(--muted); }
.sec-dark .tese p { color: var(--on-ink-muted); }

/* ---------- Ferramentas em profundidade (duas colunas, cabeça grudada) ---------- */
.tool {
  display: grid; grid-template-columns: 1fr 1.35fr; gap: var(--s6);
  border-top: 1px solid var(--line); padding: var(--s7) 0;
}
.sec-dark .tool { border-color: var(--line-ink); }
.tool-head { position: sticky; top: 92px; align-self: start; }
.tool-head h3 {
  margin-top: var(--s3);
  font-size: clamp(1.5rem, 2.3vw, 2.05rem); font-weight: 250;
  font-variation-settings: 'opsz' 32;
  line-height: 1.14; letter-spacing: -0.025em;
}
.tool-body > p { color: var(--muted); max-width: 44em; }
.sec-dark .tool-body > p { color: var(--on-ink-muted); }
.tool-body > p + p { margin-top: var(--s4); }
.facts { list-style: none; margin-top: var(--s5); }
.facts li {
  border-top: 1px solid var(--line); padding: var(--s4) 0;
  font-size: 1rem; line-height: 1.6; color: var(--muted);
}
.sec-dark .facts li { border-color: var(--line-ink); color: var(--on-ink-muted); }
.facts li b { color: var(--text); font-weight: 700; }
.sec-dark .facts li b { color: var(--on-ink); }
.facts li code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .86em; letter-spacing: .01em; color: var(--text);
}
.sec-dark .facts li code { color: var(--on-ink); }

/* ---------- Nome técnico (`.tec`) — o jargão sai do texto, não da página ----------
   O texto corrido do site é escrito para quem não é engenheiro: frase curta, palavra do
   dia a dia, nenhum acrônimo no meio da leitura. O termo técnico continua na página, mas
   deslocado para uma linha própria, em mono e em corpo menor — quem veio ler entende sem
   tropeçar, e quem veio auditar acha o nome exato do controle.
   Perder o termo seria perder informação; deixá-lo no meio da frase é perder o leitor.
   O rótulo (`i`) fica separado do valor por hairline, o único divisor do site. */
.tec {
  display: block; margin-top: var(--s3);
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.68rem; font-weight: 500; line-height: 1.6; letter-spacing: 0.04em;
  /* `ghost` sobre o palco claro dá 4.34:1, logo abaixo do AA para texto pequeno. Como esta
     linha carrega prova (o nome do controle que o auditor procura), ela usa `muted`. O que a
     mantém subordinada é o corpo pequeno, a mono e a caixa alta do rótulo, não a lavagem
     da cor. */
  color: var(--muted);
}
.tec i {
  font-style: normal; text-transform: uppercase; letter-spacing: 0.16em;
  margin-right: 10px; padding-right: 10px; border-right: 1px solid var(--line);
  white-space: nowrap;
}
/* Sobre o palco escuro o degrau `ghost` (#6E7B92 sobre #0b1526) dá 3.2:1, abaixo do AA
   para texto pequeno — e o nome técnico é justamente o que o auditor vem ler. Sobe um
   degrau para `subtle` (5.6:1 no navy elevado, 7.2:1 no ink). */
.sec-dark .tec, .pinned .tec { color: var(--on-ink-subtle); }
.sec-dark .tec i, .pinned .tec i { border-color: var(--line-ink-strong); }
.facts .tec, .tool-body > .tec { margin-top: var(--s3); }
.tool-body > .tec { padding-top: var(--s4); border-top: 1px solid var(--line); }
.sec-dark .tool-body > .tec { border-color: var(--line-ink); }
/* A segunda linha `.tec` da ferramenta (rótulo `estágio`, RN-13) senta logo abaixo do nome
   técnico, sem repetir a hairline — uma divisória por bloco, não uma por linha. */
.tool-body > .tec + .tec { border-top: none; padding-top: 0; margin-top: var(--s2); }

/* ---------- Faixa de acesso à plataforma ----------
   O RESPIRO VERTICAL É PADDING DA FAIXA, nunca margem do filho. A faixa é um `div`
   solto (não um `.sec`), então não tinha padding: a margem de 48px do painel
   ESCAPAVA por colapso — `border-top` barra o colapso em cima, mas embaixo não havia
   nada que barrasse — e os 48px eram pintados com o fundo do `body`. No tema escuro
   isso abria uma faixa neutra (#10141c) entre dois navys; no claro, uma tira QUASE
   BRANCA cortando o palco escuro logo antes do Contato (Diego, 2026-08-30).
   Padding no pai fecha o bloco para sempre — vale para qualquer filho futuro. */
.acesso { background: var(--ink); border-top: 1px solid var(--line-ink);
  padding: var(--s7) 0; }
@media (max-width: 768px) { .acesso { padding: var(--s6) var(--s5); } }
.acesso-in {
  max-width: var(--maxw); margin: 0 auto; padding: var(--s7) var(--s5);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s6); flex-wrap: wrap;
}
.acesso h2 { color: var(--on-ink); font-size: clamp(1.6rem, 2.6vw, 2.3rem); }
.acesso p { margin-top: var(--s3); color: var(--on-ink-muted); max-width: 40em; }
.acesso .btn { flex: none; }
.nav .entrar {
  border: 1px solid var(--brand-gold); color: var(--brand-gold);
  border-radius: var(--radius);
  padding: 10px 16px; font-weight: 700; letter-spacing: .08em;
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.nav .entrar:hover { background: var(--brand-gold); color: var(--brand-navy-deep); }

/* ---------- A Malha (rede 3D, largura total) ----------
   A faixa não tem texto: nunca houve sobreposição de canvas e tipo aqui, e agora não há nem
   tipo. Fica registrada a lição que ditou esse arranjo, porque ela vale para a próxima faixa
   com cena: máscara de canvas atrás de texto parece resolvida e não está — no hero, medido,
   o canvas alterava em 108 de 255 os pixels sob o H1.
   A névoa que dissolve a malha no topo e na base é gradiente do CSS, não `fillRect` de tela
   cheia por quadro. */
/* A faixa É um palco escuro: leva `.sec-dark` no HTML e herda dele a hairline e a aurora de
   marca da v3. Enquanto ela ainda tinha cabeça, redeclarar cor aqui foi o que apagou o H2 —
   `.sec-head h2` cai em `--heading` (navy) quando nada o cobre, e navy sobre navy não dá
   erro em lugar nenhum, só some. */
.distrito { overflow: hidden; }
/* A faixa é SÓ a cena, por decisão do Diego (2026-08-29): o texto de apoio saiu
   e a conexão 3D fala sozinha. O respiro vertical vem do próprio palco. */
.distrito-palco {
  position: relative;
  height: clamp(340px, 46vw, 620px);
  margin: var(--s6) 0;
}
/* Atmosfera atrás da linha do horizonte. É gradiente do CSS, não um `fillRect` de tela
   cheia por quadro: o mesmo poço de luz do hero, pela mesma razão — pintar a tela inteira
   a 60fps para produzir um brilho estático é gastar orçamento de quadro com algo que não
   muda. */
.distrito-palco::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  /* O poço de luz mora NO HORIZONTE, e o horizonte mudou de lugar: na cena de volumes ele
     ficava embaixo (78%/88% da altura); na malha a câmera mergulha de cima e ele pousa a
     ~10% do topo. Gradiente parado no lugar antigo iluminava o primeiro plano e deixava a
     linha do horizonte apagada — exatamente o contrário do que as referências fazem. */
  background:
    radial-gradient(110% 46% at 50% 12%, rgba(219,225,234,.085), transparent 66%),
    radial-gradient(70% 30% at 46% 8%, rgba(86,201,214,.055), transparent 72%);
}
.distrito-palco canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  /* A máscara some com as duas bordas duras, mas o corte de cima passou a ser cirúrgico:
     em 22% ela apagava o próprio horizonte, que na malha nasce a ~10% do topo — a faixa
     mais fina e mais distante da cena, justamente a que sustenta a profundidade, chegava à
     tela com menos da metade da opacidade. Em 7% a dissolvência ainda mata a borda do
     canvas sem comer a linha do horizonte. Embaixo a malha sangra para fora, como as
     referências, então o corte é mais tardio. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 7%, #000 90%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 7%, #000 90%, transparent 100%);
}

/* ---------- Seção pinada (3 camadas) ---------- */
.pinned { background: var(--ink); color: var(--on-ink-muted); border-top: 1px solid var(--line-ink); }
.pin-track { position: relative; }              /* pai imediato do sticky: bloco puro */
.pin-stage {
  position: sticky; top: 62px; height: calc(100vh - 62px);
  display: flex; align-items: center; overflow: hidden;
}
.pin-visual { position: relative; width: 52%; height: 100%; }
.pin-visual canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pin-copy { position: relative; width: 48%; padding: 0 var(--s6) 0 var(--s5); }
/* O passo entra da direita (o mapa empurra da esquerda para o centro — a cópia
   responde vindo do lado oposto). O -50% vertical é só o centramento. */
.pin-step {
  position: absolute; top: 50%; transform: translateY(-50%) translateX(28px);
  opacity: 0; transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-reveal) var(--ease-expo);
  max-width: 30em;
}
.pin-step.on { opacity: 1; transform: translateY(-50%); }
.pin-step h2 { color: var(--on-ink); margin-bottom: var(--s4); }
.pin-step p { color: var(--on-ink-muted); }
.pin-step ul { list-style: none; margin-top: var(--s5); }
.pin-step li {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--on-ink-ghost); padding: var(--s3) 0; border-top: 1px solid var(--line-ink);
}
.pin-dots {
  position: absolute; right: var(--s5); top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 10px;
}
.pin-dots i {
  display: block; width: 6px; height: 6px; background: var(--line-ink-strong);
  border-radius: var(--radius);
  transition: background var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}
.pin-dots i.on { background: var(--brand-gold); transform: scale(1.35); }

/* ---------- Papéis FaaS ---------- */
.roles { border-top: 1px solid var(--line); }
.roles > div { display: grid; grid-template-columns: 240px 1fr; border-bottom: 1px solid var(--line); }
.roles > div > div { padding: var(--s5); }
.roles > div > div:first-child {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ghost);
  border-right: 1px solid var(--line);
}
.roles .r-head > div { padding-bottom: var(--s3); }

/* ---------- Roadmap de conformidade ---------- */
.roadmap { list-style: none; }
.roadmap li { position: relative; padding: var(--s5) 0 var(--s5) 56px; border-top: 1px solid var(--line); }
.sec-dark .roadmap li { border-color: var(--line-ink); }
.roadmap li .n {
  position: absolute; left: 0; top: var(--s5);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: .1em; color: var(--ghost);
}
.sec-dark .roadmap li .n { color: var(--on-ink-ghost); }
.roadmap li b { display: block; font-size: 1.0625rem; color: var(--heading); }
.sec-dark .roadmap li b { color: var(--on-ink); }
.roadmap li p { font-size: 1rem; color: var(--muted); margin-top: var(--s2); }
.sec-dark .roadmap li p { color: var(--on-ink-muted); }
.status {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ghost); margin-left: var(--s3);
}
.sec-dark .status { color: var(--on-ink-ghost); }

/* ---------- Contato ---------- */
/* Duas colunas, não quatro. Endereço de e-mail é uma unidade indivisível: em quatro
   colunas ele não cabia e quebrava no meio do domínio ("…capitalis.c / om.br"), que lê
   como erro de digitação. Com metade da largura por cartão o endereço inteiro cabe numa
   linha, e o `white-space: nowrap` garante que nunca mais quebre — se um dia não couber,
   o cartão rola em vez de partir o endereço. Para o cartão rolar, a coluna precisa poder
   encolher: `1fr` é `minmax(auto, 1fr)`, e o `auto` adota o conteúdo indivisível como piso,
   então em 320px era a PÁGINA que rolava na horizontal, não o cartão. `minmax(0, 1fr)` mais
   `min-width: 0` devolvem o rolamento a quem devia tê-lo. */
.contact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.contact > div { border-top: 1px solid var(--line-ink); border-left: 1px solid var(--line-ink); padding: var(--s5); min-width: 0; }
.contact > div:nth-child(odd) { border-left: none; }
.contact b { display: block; color: var(--on-ink); margin-bottom: var(--s3); font-size: 0.9375rem; }
/* `.end` é o endereço publicado como TEXTO (comercial@, contato@): o caminho de contato
   é o formulário; o endereço fica visível para quem prefere copiar, mas não é um
   `mailto:` — que em webmail abre um programa vazio e não gera lead (CAP-V3-20). Só
   `dpo@` e `seguranca@` seguem como link, por serem canais de obrigação legal. */
.contact a, .contact .end {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.875rem; letter-spacing: -0.01em;
  white-space: nowrap; overflow-x: auto; display: block;
}
.contact .end { color: var(--on-ink-muted); }
.contact p { font-size: 0.9rem; color: var(--on-ink-ghost); margin-top: var(--s3); }

/* ---------- Formulário de contato (`contato.js`) ----------
   O site trocou `mailto:` por formulário em 30/08/2026: `mailto:` só funciona para quem
   tem cliente de e-mail configurado no aparelho, e em webmail (a maioria) o clique abre
   um programa vazio ou não faz nada — o visitante não fala com ninguém e nós não ficamos
   sabendo. Ver design-system §10.4f.

   Vive sobre o palco escuro (`.sec-dark`), então o campo é vidro sobre navy e a hairline
   é a mesma `--line-ink` das grades vizinhas: o formulário não é um bloco estranho no
   fim da página, é a última célula da mesma malha. */
.form-contato { margin-top: var(--s6); }
.fc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); }
.fc-campo { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
.fc-largo { grid-column: 1 / -1; }
.fc-campo > span {
  font-size: 0.8125rem; font-weight: 500; color: var(--on-ink-muted);
  letter-spacing: 0.02em;
}
.fc-campo > span i { font-style: normal; color: var(--on-ink-ghost); font-weight: 400; }
.fc-campo input, .fc-campo select, .fc-campo textarea {
  width: 100%; font-family: inherit; color: var(--on-ink);
  background: var(--vidro-ink); border: 1px solid var(--vidro-ink-borda);
  border-radius: var(--radius); padding: 0 var(--s4); height: 48px;
  /* 16px é o piso que impede o iOS de dar zoom ao focar um campo (regra canônica nº 2).
     Abaixo disso o Safari amplia a página e o visitante perde o contexto do formulário. */
  font-size: 1rem;
  transition: border-color var(--dur-fast) var(--ease-standard);
}
.fc-campo textarea { height: auto; padding: var(--s4); line-height: 1.55; resize: vertical; }
.fc-campo select {
  appearance: none; cursor: pointer;
  /* `background-COLOR` e não o atalho: o atalho zeraria a seta declarada logo abaixo —
     a armadilha de cascata do design-system §4.34.1. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23C2CBDA' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--s4) center;
  padding-right: var(--s7);
}
.fc-campo select option { background: var(--ink); color: var(--on-ink); }
.fc-campo input::placeholder, .fc-campo textarea::placeholder { color: var(--on-ink-ghost); }
.fc-campo input:focus-visible, .fc-campo select:focus-visible, .fc-campo textarea:focus-visible {
  outline: none; border-color: var(--brand-gold);
  box-shadow: inset 0 0 0 1px var(--brand-gold);
}
.fc-campo .invalido { border-color: #e0777a; box-shadow: inset 0 0 0 1px #e0777a; }

/* Armadilha de robô: fora da tela, mas NUNCA `display:none` nem `hidden` — robô que lê
   o CSS pula campo escondido do jeito óbvio, e leitor de tela ignora este por causa do
   `aria-hidden` no HTML. */
.fc-armadilha {
  position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}

.fc-acoes {
  display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap;
  margin-top: var(--s5);
}
.fc-estado { font-size: 0.9rem; color: var(--on-ink-muted); margin: 0; }
.fc-estado.err { color: #f0a3a5; }
.fc-nota { font-size: 0.85rem; color: var(--on-ink-ghost); margin-top: var(--s4); max-width: 62ch; }

/* Confirmação: substitui o formulário (ver contato.js) — deixar os campos preenchidos
   na tela convida a reenviar a mesma mensagem. */
.fc-ok {
  margin-top: var(--s6); padding: var(--s6);
  border: 1px solid var(--vidro-ink-borda); border-left: 3px solid var(--brand-gold);
  border-radius: var(--radius); background: var(--vidro-ink);
}
.fc-ok b { display: block; color: var(--on-ink); font-size: 1.05rem; }
.fc-ok p {
  margin-top: var(--s3); color: var(--on-ink-muted);
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.875rem;
}

/* Endereços diretos: continuam publicados (dpo@ e seguranca@ são canais de obrigação
   legal — LGPD art. 41 e o `security.txt`), mas recolhidos: o caminho normal é o
   formulário, e uma lista de quatro e-mails ao lado dele competiria com ele. */
.fc-direto { margin-top: var(--s7); }
.fc-direto > summary {
  cursor: pointer; color: var(--on-ink-muted); font-size: 0.9rem;
  padding: var(--s3) 0; list-style: none;
}
.fc-direto > summary::-webkit-details-marker { display: none; }
.fc-direto > summary::before { content: '+ '; color: var(--brand-gold); }
.fc-direto[open] > summary::before { content: '− '; }
.fc-direto > summary:hover { color: var(--on-ink); }
.fc-direto .contact { margin-top: var(--s4); }

@media (max-width: 768px) {
  .fc-grid { grid-template-columns: 1fr; gap: var(--s4); }
  .fc-acoes { flex-direction: column; align-items: stretch; gap: var(--s3); }
  .fc-acoes .btn { width: 100%; text-align: center; }
}

/* ---------- Footer ---------- */
footer { background: var(--ink-deep); color: var(--on-ink-subtle); padding: var(--s8) 0 var(--s6); font-size: 0.95rem; }
footer .wrap { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s6); }
footer h4 {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: var(--on-ink); font-size: 12px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; margin-bottom: var(--s4);
}
footer a { color: var(--on-ink-subtle); display: block; margin-bottom: var(--s2); }
footer a:hover { color: var(--on-ink); }
footer p { color: var(--on-ink-subtle); }
/* Troca de idioma por bandeira, no rodapé. Bandeira é reconhecida antes de ser lida,
   que é o ponto: quem procura a versão em inglês varre a página atrás do símbolo, não da
   sigla. O rótulo continua ao lado porque bandeira sozinha nomeia país, não idioma. */
.idiomas .bandeira {
  display: flex; align-items: center; gap: var(--s3);
  margin-bottom: var(--s3); opacity: .55;
  transition: opacity var(--dur-fast) var(--ease-standard);
}
.idiomas .bandeira:hover { opacity: 1; text-decoration: none; }
.idiomas .bandeira.on { opacity: 1; color: var(--on-ink); }
.idiomas .bandeira svg {
  flex: none; display: block; border: 1px solid var(--line-ink-strong);
  border-radius: var(--radius);
}
.idiomas .bandeira.on svg { border-color: var(--brand-gold); }
.idiomas .bandeira span { font-size: 0.95rem; }
footer .legal {
  grid-column: 1 / -1; border-top: 1px solid var(--line-ink); padding-top: var(--s5); margin-top: var(--s4);
  font-size: 0.8125rem; color: var(--on-ink-ghost);
}

/* ---------- Páginas de texto ---------- */
.doc { padding: var(--s8) 0; }
.doc h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: var(--s4); }
.doc h2 { font-size: 1.6rem; margin: var(--s7) 0 var(--s4); letter-spacing: -0.02em; }
.doc p, .doc li { margin-bottom: var(--s4); }
.doc ul { padding-left: 20px; }
.doc .meta {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px; letter-spacing: .08em; color: var(--ghost); margin-bottom: var(--s6);
  text-transform: none;
}

/* ---------- Tipografia cinética ---------- */
.kinetic .kin-w { display: inline-block; white-space: nowrap; }
.kinetic .kin-l { display: inline-block; transition: font-variation-settings var(--dur-fast) var(--ease-standard); }

/* ---------- Reveal (triggering) ---------- */
.reveal { opacity: 0; transform: translateY(16px); }
/* Variantes direcionais (narrativa de movimento): o elemento entra do lado que a
   composição indica — a coluna esquerda da tese vem da esquerda, a direita da direita.
   O deslocamento inicial sai da conta de rolagem via `overflow-x: clip` no body:
   clip não cria scroll container, então o sticky da topbar e das cabeças segue vivo. */
body { overflow-x: clip; }
.reveal-l { opacity: 0; transform: translateX(-28px); }
.reveal-r { opacity: 0; transform: translateX(28px); }
.reveal.on, .reveal-l.on, .reveal-r.on {
  opacity: 1; transform: none;
  transition: opacity var(--dur-reveal) var(--ease-expo), transform var(--dur-reveal) var(--ease-expo);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal-l, .reveal-r { opacity: 1; transform: none; }
  .pin-visual { transform: none !important; opacity: 1 !important; }
  .progresso { display: none; }
  .type-caret, .type-lead::after { animation: none; }
  .marquee-in { animation: none; }
  /* a seção pinada degrada para blocos empilhados — sem altura fantasma */
  .pin-track { height: auto !important; }
  .pin-stage { position: static; height: auto; display: block; }
  .pin-visual { width: 100%; height: 320px; }
  .pin-copy { width: 100%; padding: 0; }
  .pin-step, .pin-step.on { position: static; opacity: 1; transform: none; padding: var(--s6) 0; }
  .pin-dots { display: none; }
  .roll-col { transition: none; }
  .previa { transition: none; transform: none; }
}

/* ---------- Responsivo (regra canônica nº 2) ---------- */
@media (max-width: 1024px) {
  .numbers-in { grid-template-columns: repeat(3, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 > .cell:nth-child(3n+1) { border-left: 1px solid var(--line); }
  .grid-3 > .cell:nth-child(2n+1) { border-left: none; }
  .sec-dark .grid-3 > .cell:nth-child(3n+1) { border-left-color: var(--line-ink); }
  .contact > div:nth-child(3) { border-left: none; }
}

/* Abaixo de 900px a seção pinada degrada para blocos empilhados */
@media (min-width: 769px) and (max-width: 1200px) {
  /* barra cheia: sete itens + Entrar + CTA. Aperta em vez de quebrar linha. */
  .topbar-in { gap: var(--s4); }
  .nav { gap: var(--s4); }
  .nav a { font-size: 11px; letter-spacing: .08em; }
  .nav .cta { padding: 9px 12px; }
  .nav .entrar { padding: 9px 12px; }
}

@media (max-width: 900px) {
  /* O distrito NÃO desliga como o hero: aqui a cena é o conteúdo da faixa, não o fundo de
     um título. O JS troca o laço a 60fps por um quadro composto (estaticoEmTelaPequena),
     então a imagem continua lá e o custo cai a um desenho. */
  .distrito-palco { height: clamp(260px, 58vw, 380px); margin: var(--s5) 0; }
  /* A cena do hero desliga aqui, não em 768px: entre 768 e 900 o H1 ocupa a coluna inteira
     e a cena vira ruído atrás do título. O JS usa o MESMO limite — antes o CSS escondia em
     768 e o laço só parava em 767, então em 768px exatos o canvas ficava invisível
     desenhando a 60fps. */
  .hero canvas { display: none; }
  .tool { grid-template-columns: 1fr; gap: var(--s5); }
  .tool-head { position: static; }
  .pin-track { height: auto !important; }
  .pin-stage { position: static; height: auto; display: block; }
  .pin-visual { width: 100%; height: 280px; }
  /* o empilhado não tem .wrap: a margem lateral vem daqui */
  .pin-copy { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s5); }
  .pin-step, .pin-step.on {   /* .on tem 2 classes: empatar para anular o translateY */
    position: static; opacity: 1; transform: none; max-width: none;
    padding: var(--s6) 0; border-top: 1px solid var(--line-ink);
  }
  .pin-step:first-child { border-top: none; }
  .pin-dots { display: none; }
}

@media (max-width: 768px) {
  body { font-size: 16px; }
  .nav {
    display: none; position: absolute; top: 62px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--brand-navy-deep); border-bottom: 1px solid var(--line-ink);
    padding: var(--s3) var(--s5) var(--s5);
  }
  .nav.open { display: flex; }
  .nav a { padding: 14px 0; border-bottom: 1px solid var(--line-ink); }
  .nav .cta, .nav .entrar { margin-top: var(--s4); text-align: center; border-bottom: none; }
  .nav .icon-btn { border: none; padding: 14px 0; width: auto; height: auto; text-align: left; }
  .nav-toggle { display: grid; place-items: center; margin-left: auto; }
  /* thin 100 perde contraste percebido em tela pequena: 200 no mobile */
  .hero h1 { font-weight: 200; }
  /* traço fino perde contraste percebido em tela pequena */
  body { font-weight: 300; }
  .hero { min-height: auto; }
  .hero-in { padding: var(--s7) var(--s5); }
  /* Sem ponteiro não há hover: o popup some, mas o cartão continua clicável —
     no toque a prévia abre direto na ampliação. */
  .previa { display: none; }
  /* Uma tela de desktop reduzida a 320px de largura é ilegível. Em vez de encolher
     até virar mancha, a ampliação vira uma janela com ROLAGEM HORIZONTAL própria:
     a imagem mantém largura mínima legível e o dedo percorre a tela. A página
     atrás continua sem rolagem lateral. */
  .lightbox { padding: var(--s4); }
  .lightbox figure { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .lightbox img { min-width: 720px; max-height: none; }
  .lightbox figcaption { position: sticky; left: 0; max-width: 100%; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .tool { grid-template-columns: 1fr; gap: var(--s5); padding: var(--s6) 0; }
  .tool-head { position: static; }
  .acesso-in { flex-direction: column; align-items: flex-start; }
  .acesso .btn { width: 100%; text-align: center; }
  .grid > .cell { border-left: none !important; }
  .tese { grid-template-columns: 1fr; }
  .tese > div:first-child { border-right: none; padding-left: 0; }
  .tese > div { padding: var(--s5) 0; }
  .roles > div { grid-template-columns: 1fr; }
  .roles > div > div:first-child { border-right: none; padding-bottom: 0; }
  .contact { grid-template-columns: minmax(0, 1fr); }
  .contact > div { border-left: none; }
  .contact a { font-size: 0.82rem; }
  footer .wrap { grid-template-columns: 1fr; }
  .sec { padding: var(--s7) 0; }
}

@media (max-width: 480px) {
  .distrito-palco { height: 240px; }
  /* display grande + palavras longas em pt-BR quebram feio em 320px */
  h1 { font-size: 2.15rem; letter-spacing: -0.02em; }
  h2 { font-size: 1.75rem; }
  .hero .type-line { font-size: 1.2rem; }
  .type-lead { font-size: 1.05rem; }
  .numbers-in { grid-template-columns: repeat(2, 1fr); }
  .hero-ctas .btn { width: 100%; text-align: center; }
  .num b { font-size: 1.75rem; }
}

/* =========================================================================
   v3 — NARRATIVA DE MOVIMENTO, VIDRO E ANTI-GRADE (2026-08-29)
   Três disciplinas novas, documentadas em docs/design-system.md §10.8:
     · vidro (glassmorphism da casa): painel translúcido com desfoque de fundo,
       SEMPRE raio zero e hairline própria — o vidro entra no lugar da chapa,
       nunca no lugar da linha;
     · anti-grade: a grade continua existindo por baixo (alinhamento e ritmo),
       mas a composição desloca colunas e sobrepõe painéis para a página fluir
       em vez de empilhar caixas;
     · micro-interação com propósito: cada resposta ao ponteiro diz algo
       ("isto é clicável", "você está aqui", "isto abre") — nada decorativo.
   Tudo dentro da escala de movimento fechada (§10.4) e desligável por
   prefers-reduced-motion.
   ========================================================================= */

:root {
  /* Vidro — pares fundo/borda por palco. O desfoque é caro: só em elementos
     pequenos ou pinados, nunca em chapa de seção inteira. */
  --vidro-claro: rgba(255, 255, 255, .55);
  --vidro-claro-borda: rgba(22, 41, 77, .16);
  --vidro-ink: rgba(16, 29, 54, .44);
  --vidro-ink-denso: rgba(11, 21, 38, .66);
  --vidro-ink-borda: rgba(242, 245, 250, .14);
  --desfoque: 18px;
  --desfoque-leve: 12px;
}
/* Painel de vidro recebe o micro-raio da casa (--radius, §3.4/§10). A hairline
   ABERTA (fio de progresso, sublinhado da navegação, divisor) segue sem raio. */
.pin-step, .acesso-in { border-radius: var(--radius); }

[data-theme="dark"] {
  --vidro-claro: rgba(26, 31, 43, .55);
  --vidro-claro-borda: rgba(242, 245, 250, .12);
}

/* ---------- Aurora: o fundo que dá sentido ao vidro ----------
   Vidro sobre chapa lisa é só cinza. A aurora põe uma luz de marca (azul de
   ação, dourado, ciano) MUITO baixa atrás das seções claras, e é ela que o
   desfoque dos painéis revela. `isolation` cria o contexto de empilhamento
   para o ::before ficar entre o fundo da seção e o conteúdo. Estática por
   desenho: custo zero por quadro. */
.sec-light { position: relative; isolation: isolate; }
.sec-light::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(46% 38% at 10% 6%, rgba(36, 86, 224, .06), transparent 70%),
    radial-gradient(38% 32% at 92% 24%, rgba(212, 160, 23, .05), transparent 70%),
    radial-gradient(44% 40% at 58% 98%, rgba(86, 201, 214, .06), transparent 72%);
}
.sec-dark { position: relative; isolation: isolate; }
.sec-dark::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(50% 42% at 84% 10%, rgba(86, 201, 214, .05), transparent 70%),
    radial-gradient(40% 36% at 8% 86%, rgba(36, 86, 224, .07), transparent 72%);
}

/* ---------- Topbar de vidro + fio de progresso ----------
   A barra deixa de ser chapa: o hero (e depois cada palco) passa desfocado por
   baixo dela — a página inteira ganha profundidade sem uma sombra sequer.
   O fio dourado de 2px na base é a régua de leitura: quanto falta da página.
   Dourado aqui significa "você está aqui" (posição ativa, §10.2). */
.topbar {
  background: var(--vidro-ink-denso);
  -webkit-backdrop-filter: blur(var(--desfoque)) saturate(1.4);
  backdrop-filter: blur(var(--desfoque)) saturate(1.4);
}
/* No TEMA CLARO o vidro raso deixava a seção clara vazar pela barra e o navy
   lia como cinza sujo (apontado pelo Diego em 2026-08-29). A barra sobe para
   navy quase opaco — lê como marca — e o vidro pleno fica para o tema escuro,
   onde escuro sobre escuro só acrescenta profundidade. */
html:not([data-theme="dark"]) .topbar { background: rgba(11, 21, 38, .93); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topbar { background: var(--ink) !important; }
}
.progresso {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--brand-gold);
  transform: scaleX(0); transform-origin: 0 50%;
  pointer-events: none;
}

/* ---------- Micro-interações da navegação ---------- */
/* Link do topo: hairline que se desenha da esquerda. Diz "isto navega". */
.nav a:not(.cta):not(.entrar) { position: relative; }
.nav a:not(.cta):not(.entrar)::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -7px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--dur-base) var(--ease-expo);
}
.nav a:not(.cta):not(.entrar):hover::after,
.nav a:not(.cta):not(.entrar):focus-visible::after { transform: scaleX(1); }
/* O alternador de tema inclina na direção do gesto. */
#tema { transition: color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-out); }
#tema:hover { transform: rotate(-14deg); }
/* O ponto da marca pulsa uma vez no hover do logo — "ao vivo", nunca loop. */
.logo:hover .dot { animation: pulso-marca var(--dur-slow) var(--ease-out) 1; }
@keyframes pulso-marca { 40% { transform: scale(1.55); } 100% { transform: scale(1); } }

/* ---------- Micro-interações de botão ---------- */
.btn { position: relative; overflow: hidden; transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), transform var(--dur-micro) var(--ease-standard); }
.btn:active { transform: translateY(1px); }
/* Brilho que varre o CTA dourado uma vez, no hover: "este é O botão". */
.btn-gold::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -45%; width: 34%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
  transform: skewX(-18deg) translateX(0); pointer-events: none;
}
.btn-gold:hover::after { transition: transform var(--dur-slow) var(--ease-expo); transform: skewX(-18deg) translateX(460%); }

/* ---------- Anti-grade: cabeça de seção assimétrica ----------
   O título ancora à esquerda; o parágrafo de apoio desce para a direita,
   pendurado numa hairline — a página respira em diagonal, não em pilha. */
@media (min-width: 901px) {
  .sec-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s4) var(--s7); align-items: end; }
  .sec-head .eyebrow { grid-column: 1 / -1; margin-bottom: 0; }
  .sec-head h2 { grid-column: 1; }
  .sec-head p { grid-column: 2; margin-top: 0; padding-left: var(--s5); padding-bottom: 4px; border-left: 1px solid var(--line); }
  .sec-dark .sec-head p { border-left-color: var(--line-ink); }
}

/* ---------- Anti-grade: grades voltam à malha de hairline ----------
   A "grade fluida" de cartões de vidro em cascata (módulos e segurança) foi
   REVERTIDA por decisão do Diego em 2026-08-29: os deslocamentos quebravam a
   leitura de varredura da grade — o olho não achava a próxima célula. As duas
   grades seguem na malha de hairline compartilhada do v2 (§ acima), e a
   assimetria anti-grade fica na cabeça de seção, na tese, nas ferramentas e
   nos números, onde ela guia em vez de atrapalhar. */

/* ---------- Anti-grade: a tese em painéis desnivelados ----------
   O legado (esquerda) desce; o Capitalis (direita) sobe em vidro por cima da
   mesma linha — a própria composição conta a troca de patamar. */
@media (min-width: 901px) {
  .tese { grid-template-columns: 1fr 1.08fr; gap: var(--s6); align-items: start; }
  .tese > div { border: 1px solid var(--line); padding: var(--s6); border-radius: var(--radius); }
  .tese > div:first-child { border-right: 1px solid var(--line); margin-top: var(--s7); }
  .tese > div:last-child {
    padding: var(--s6); margin-top: 0;
    background: var(--vidro-claro);
    -webkit-backdrop-filter: blur(var(--desfoque-leve));
    backdrop-filter: blur(var(--desfoque-leve));
    border-color: var(--vidro-claro-borda);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
  }
  [data-theme="dark"] .tese > div:last-child { box-shadow: none; }
}

/* ---------- Anti-grade: ferramentas em ziguezague ----------
   As explicações longas alternam o lado da cabeça grudada. O leitor desce em
   S, e cada artigo recomeça do lado oposto — ritmo de revista, não de tabela. */
@media (min-width: 901px) {
  .tool:nth-of-type(even) { grid-template-columns: 1.35fr 1fr; }
  .tool:nth-of-type(even) .tool-head { order: 2; }
  .tool:nth-of-type(even) .tool-body { order: 1; }
}

/* ---------- Anti-grade: números em patamares ---------- */
@media (min-width: 1025px) {
  .num:nth-child(2n) { transform: translateY(12px); }
  .num:nth-child(3)  { transform: translateY(-6px); }
}

/* ---------- Micro-interações de leitura ---------- */
/* Fato apontado: a hairline esquerda acende em dourado — "este é o fato". */
.facts li { transition: box-shadow var(--dur-fast) var(--ease-standard); }
@media (pointer: fine) {
  .facts li:hover { box-shadow: inset 2px 0 0 var(--brand-gold); }
}
/* Roadmap: o índice mono acende no item lido. */
.roadmap li .n { transition: color var(--dur-fast) var(--ease-standard); }
.roadmap li:hover .n { color: var(--brand-gold); }
/* Faixa de prova: a credencial sob o ponteiro sobe um degrau de luminância. */
.marquee span { transition: color var(--dur-fast) var(--ease-standard); }
.marquee span:hover { color: var(--text); }

/* ---------- Vidro nos painéis existentes ---------- */
/* Prévia de módulo: o popup vira vidro denso — a grade passa desfocada atrás.
   Mais denso que o vidro da topbar (84% × 66%): o popup carrega LEGENDA sobre
   um palco claro, e texto atrás de vidro raso disputava leitura com ela. */
.previa {
  background: rgba(11, 21, 38, .84);
  -webkit-backdrop-filter: blur(var(--desfoque));
  backdrop-filter: blur(var(--desfoque)) saturate(1.3);
  border-color: var(--vidro-ink-borda);
}
/* Ampliação: o fundo desfoca em vez de só escurecer — o contexto continua lá. */
.lightbox {
  background: rgba(6, 12, 24, .78);
  -webkit-backdrop-filter: blur(var(--desfoque-leve));
  backdrop-filter: blur(var(--desfoque-leve));
}
/* Faixa de acesso: o convite vira um painel de vidro sobre a aurora do palco. */
.acesso { position: relative; isolation: isolate; }
.acesso::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(46% 60% at 88% 30%, rgba(212, 160, 23, .07), transparent 70%),
    radial-gradient(40% 52% at 10% 80%, rgba(86, 201, 214, .06), transparent 72%);
}
.acesso-in {
  background: var(--vidro-ink);
  -webkit-backdrop-filter: blur(var(--desfoque-leve));
  backdrop-filter: blur(var(--desfoque-leve));
  border: 1px solid var(--vidro-ink-borda);
  /* Mesma geometria do `.wrap`: a BORDA do painel cai na caixa da página (120px em
     1440) e o TEXTO dentro dele cai na coluna de texto (144px) — a mesma de todas as
     outras seções. Antes o painel tinha `max-width: maxw - 2*s5` e padding s6, o que
     punha a borda em 144 e o texto em 177: o convite ficava 33px fora do prumo de
     tudo que vem antes e depois dele. */
  max-width: var(--maxw);
  margin: 0 auto; padding: var(--s6) var(--s5);
}

/* ---------- Narrativa de movimento: o palco pinado ----------
   O mapa entra vindo da esquerda; no meio da Camada 1 → 2 ele desliza para o
   centro do palco e a cópia passa a flutuar POR CIMA dele, num cartão de
   vidro — o desfoque revela o mapa transicionando atrás do texto. A
   coreografia é toda do scroll.js (só transform/opacity); aqui ficam o
   cartão, as camadas e o estado inicial. */
.pin-visual { will-change: transform; }
.pin-copy { z-index: 2; }
@media (min-width: 901px) {
  .pin-step {
    background: var(--vidro-ink);
    -webkit-backdrop-filter: blur(var(--desfoque));
    backdrop-filter: blur(var(--desfoque)) saturate(1.3);
    border: 1px solid var(--vidro-ink-borda);
    padding: var(--s6);
    width: 100%;
  }
}

/* ---------- Navegação mobile em vidro ---------- */
@media (max-width: 768px) {
  .nav {
    background: var(--vidro-ink-denso);
    -webkit-backdrop-filter: blur(var(--desfoque));
    backdrop-filter: blur(var(--desfoque)) saturate(1.4);
  }
  /* mesma correção da topbar: no tema claro o vidro raso lia como cinza */
  html:not([data-theme="dark"]) .nav { background: rgba(11, 21, 38, .95); }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .nav { background: var(--brand-navy-deep) !important; }
  }
}

/* ---------- Guardas de movimento (v3) ---------- */
@media (prefers-reduced-motion: reduce) {
  .btn:active { transform: none; }
  .btn-gold::after { display: none; }
  #tema:hover { transform: none; }
  .logo:hover .dot { animation: none; }
  .num:nth-child(2n), .num:nth-child(3) { transform: none; }
}


/* ---------- Skip link (acessibilidade) ----------
   Primeiro elemento focável da página: quem navega por teclado ou leitor de tela pula
   a barra e cai em `<main id="conteudo" tabindex="-1">`. Fora da tela até receber foco. */
.skip {
  position: absolute; left: var(--s4); top: -100px; z-index: 1000;
  padding: var(--s3) var(--s4); background: var(--brand-gold); color: var(--brand-navy-deep);
  font-weight: 600; border-radius: var(--radius);
}
.skip:focus-visible { top: var(--s4); outline-offset: 2px; }
main:focus { outline: none; }

/* ---------- Estágio (RN-13, honestidade de estágio) ----------
   Um bloco curto, subordinado ao texto que ele qualifica: rótulo em mono e uma hairline
   à esquerda. Não usa dourado — o dourado marca ação e liquidação, não aviso. */
.estagio {
  margin-top: var(--s5); padding: var(--s4) var(--s5);
  border-left: 2px solid var(--line-strong); color: var(--muted);
  font-size: 0.95rem; max-width: 62ch;
}
.estagio b {
  display: block; margin-bottom: var(--s2);
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 500;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ghost);
}
.sec-dark .estagio { border-color: var(--line-ink-strong); color: var(--on-ink-muted); }
.sec-dark .estagio b { color: var(--on-ink-ghost); }

/* ---------- Quem já usa (prova honesta, pré-BETA) ---------- */
.prova { background: var(--ink); border-top: 1px solid var(--line-ink); }
.prova-in {
  max-width: var(--maxw); margin: 0 auto; padding: var(--s6) var(--s5);
  display: grid; grid-template-columns: 220px 1fr; gap: var(--s5); align-items: start;
}
.prova .eyebrow { color: var(--on-ink-ghost); }
.prova p { color: var(--on-ink-muted); max-width: 62ch; }
.prova p b { color: var(--on-ink); font-weight: 600; }

/* ---------- Perguntas frequentes ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; padding: var(--s5) 0;
  font-size: 1.0625rem; font-weight: 600; color: var(--heading);
  display: flex; justify-content: space-between; gap: var(--s4);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; color: var(--brand-gold); flex: none;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 400;
}
.faq details[open] summary::after { content: '−'; }
.faq .faq-r { padding: 0 0 var(--s5); color: var(--muted); max-width: 62ch; }

/* ---------- Status da plataforma (status.html) ----------
   Estado por serviço lido de `/api/status`. As cores de estado são as únicas cores
   "semânticas" do site, e só aparecem aqui: verde = ok, dourado = degradado,
   azul = manutenção declarada, vermelho = fora do ar ou sem resposta. */
.status-geral {
  margin: var(--s6) 0; padding: var(--s5);
  border: 1px solid var(--line); border-left: 3px solid var(--ghost); border-radius: var(--radius);
}
.status-geral[data-estado="ok"] { border-left-color: #2f9e6b; }
.status-geral[data-estado="degradado"] { border-left-color: var(--brand-gold); }
.status-geral[data-estado="manutencao"] { border-left-color: var(--primary); }
.status-geral[data-estado="fora"] { border-left-color: #c9484d; }
.status-geral b { display: block; font-size: 1.25rem; color: var(--heading); }
.status-geral small {
  display: block; margin-top: var(--s2);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ghost);
}
.status-lista { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.status-lista li {
  display: grid; grid-template-columns: 14px 1fr auto; gap: var(--s4); align-items: center;
  padding: var(--s4) 0; margin: 0; border-bottom: 1px solid var(--line);
}
.status-lista .led { width: 10px; height: 10px; border-radius: 50%; background: var(--ghost); }
.status-lista .led.ok { background: #2f9e6b; }
.status-lista .led.falha { background: #c9484d; }
.status-lista .lat {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px; letter-spacing: .06em; color: var(--ghost);
}
.status-manut {
  margin-top: var(--s6); padding: var(--s5);
  border: 1px solid var(--line); border-left: 3px solid var(--primary); border-radius: var(--radius);
}
.status-manut b { display: block; color: var(--heading); margin-bottom: var(--s2); }

@media (max-width: 768px) {
  .prova-in { grid-template-columns: 1fr; gap: var(--s3); }
}