/* ==========================================================================
   crimesvirtuais.com
   Valores derivados no DESIGN.md (fases 0 e 1). Valor fora daqui é bug.

   Dois temas, escolhidos pelo atributo data-tema do <html>:
   - "cv"      identidade Crimes Virtuais. Escuro fixo, matiz H = 141 (medido
               em #3BFF12), League Spartan no display, canto reto.
   - "projeto" identidade roxa do projeto de extensão. Segue o sistema,
               matiz H = 330 (medido em #764C72), Public Sans, canto suave.

   Compartilhado pelos dois (mesma entrada, mesma saída na derivação):
   Espaço b = 6px, r = 1,5 (inclui b/r = 4px). Tipo de UI r = 1,2.
   Movimento tau = 200ms (uso esporádico, primeira impressão pesa).
   Todos os pares de cor usados foram auditados (WCAG 2.2: 4,5:1 texto,
   3:1 borda e indicador), nos três conjuntos: cv, projeto claro e escuro.
   ========================================================================== */

/* ---------- Fontes (auto-hospedadas, SIL OFL 1.1) ---------- */
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/public-sans-latin.5ed4d31c98.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: "Public Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/public-sans-latin-ext.3a00a32f02.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: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-latin-400.08949f728d.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;
}
/* Fonte do wordmark da identidade Crimes Virtuais, identificada pelo desenho
   das letras nas peças do projeto. Variável de 100 a 900; usamos 700. */
@font-face {
  font-family: "League Spartan";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/league-spartan-latin.7d843a9fa4.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;
}

/* ---------- Tokens compartilhados ---------- */
:root {
  --f-ui: "Public Sans", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --f-display: var(--f-ui);

  /* Tipo. Corpo fluido de 17 a 18px, com termo em rem no meio do clamp (WCAG 1.4.4). */
  --t-xs: 0.8125rem;
  --t-sm: 0.875rem;
  --t-md: clamp(1.0625rem, 1rem + 0.25vw, 1.125rem);
  --t-lg: 1.25rem;
  --t-h3: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);
  --t-h2: clamp(1.625rem, 1.35rem + 1.2vw, 2rem);
  --t-h1: clamp(2.125rem, 1.6rem + 2.2vw, 2.6875rem);
  --t-display: clamp(2.375rem, 1.55rem + 3.6vw, 3.5625rem);

  /* Espaço: b = 6px, r = 1,5 */
  --e0: 0.25rem;
  --e1: 0.375rem;
  --e2: 0.5625rem;
  --e3: 0.875rem;
  --e4: 1.25rem;
  --e5: 1.875rem;
  --e6: 2.875rem;
  --e7: 4.25rem;
  --e8: 6.4375rem;

  /* Forma do tema projeto: canto suave derivado de b */
  --r-caixa: 9px;
  --r-ctrl: 6px;
  --r-mini: 4px;

  /* Movimento: múltiplos de tau */
  --tau: 200ms;
  --d-feedback: var(--tau);
  --d-revela: calc(var(--tau) * 0.9);
  --d-saida: calc(var(--tau) * 1.4 * 0.7);
  --d-escalona: calc(var(--tau) * 0.15);
  /* Curva deliberada, institucional (tema projeto). */
  --ease-entrada: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-saida: cubic-bezier(0.64, 0, 0.78, 0);
  --ease-movimento: cubic-bezier(0.65, 0, 0.35, 1);

  /* Sistema de movimento (DESIGN.md, 1.7). Quatro durações e duas curvas, nos
     dois temas desde que a marca animada entrou nos dois cabeçalhos. Resposta a
     ação direta fica em rápida ou base (até 300 ms); superfície grande que entra
     sozinha, em lenta (até 600 ms). */
  --m-rapida: 160ms;
  --m-base: 240ms;
  --m-media: 420ms;
  --m-lenta: 560ms;
  --m-escalona: 45ms;
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-suave: cubic-bezier(0.33, 1, 0.68, 1);

  /* Layout */
  --largura: 72rem;
  --gut: clamp(1rem, 0.4rem + 2.6vw, 2.5rem);
  --altura-topo: 3.75rem;
  --alvo: 3rem;

  --foco: var(--accent);
  --borda: var(--line);
  --suave: var(--muted);
}

/* ---------- Tema projeto: roxo, segue o sistema ---------- */
:root[data-tema="projeto"] {
  color-scheme: light dark;

  --ground: #FAF7F9;
  --surface: #FEFDFE;
  --recess: #F4EFF3;
  --hover: #F7F2F7;
  --line: #E1DBE0;
  --line-strong: #8C838A;
  --ink: #221C21;
  --ink-2: #463E45;
  --muted: #675F66;
  --accent: #764C72;
  --accent-strong: #62375E;
  --accent-soft: #F6E8F4;
  --on-accent: #FDFBFD;
  --ok-ink: #2E6941;
  --ok-soft: #E3F6E7;
  --warn-ink: #83501C;
  --warn-soft: #FEF0D9;
  --danger: #BA2524;
  --danger-strong: #9E1D1C;
  --on-danger: #FDFBFD;
  --danger-ink: #A92321;
  --danger-soft: #FFEDEB;
  --banda: #2C252B;
  --banda-texto: #FCF9FB;
  --banda-suave: #CEC3CD;
  --banda-acento: #DFB4DA;
  --banda-linha: #544952;
  --banda-linha-forte: #877C86;
  --banda-hover: #383037;
  /* Ponto apagado do símbolo da marca (decorativo). */
  --ponto: #D6CBD4;
  /* Página do projeto: brilho atrás do herói e o celular da conversa
     (decorativo, com texto medido em 4,5:1 ou mais sobre os balões). */
  --brilho: rgb(118 76 114 / 0.1);
  --celular-corpo: #231C22;
  --celular-borda: #E1DBE0;
  --celular-sombra: rgb(34 28 33 / 0.35);
  --celular-cabeca: #FEFDFE;
  --chat-fundo: #F1EAF0;
  --chat-ponto: rgb(118 76 114 / 0.1);
  --bolha-dele: #FEFDFE;
  --bolha-dela: #EEDDEB;
  --bolha-sombra: rgb(34 28 33 / 0.12);
  /* Régua do questionário (DESIGN.md, 2.4): âmbar à esquerda (discordo,
     mito), azul à direita (concordo, verdade), cinza no meio. Sem verde e
     vermelho (certo e errado) e sem azul e rosa (gênero). Toda mistura entre
     o meio e um lado, em OKLab, fica em 5,2:1 ou mais sobre o painel. */
  --regua-esquerda: #8A5300;
  --regua-direita: #2554A8;
  --regua-neutro: #6E656C;
  /* Bola da régua sem resposta (DESIGN.md 2.8): a superfície mais clara do
     tema, com sombra de objeto que se pega. */
  --regua-bola: #FEFDFE;
  --regua-bola-sombra: rgb(34 28 33 / 0.32);
}

@media (prefers-color-scheme: dark) {
  :root[data-tema="projeto"] {
    --ground: #130F13;
    --surface: #1D171C;
    --recess: #272026;
    --hover: #221C22;
    --line: #373036;
    --line-strong: #7B717A;
    --ink: #F0EBEF;
    --ink-2: #D0CACF;
    --muted: #ABA3AA;
    --accent: #D3ACCE;
    --accent-strong: #E5C6E1;
    --accent-soft: #3B2739;
    --on-accent: #171017;
    --ok-ink: #95D2A4;
    --ok-soft: #1E2F22;
    --warn-ink: #ECBF80;
    --warn-soft: #392917;
    --danger: #F38A7F;
    --danger-strong: #FDA297;
    --on-danger: #1B0F0E;
    --danger-ink: #FDA297;
    --danger-soft: #43201C;
    --banda: #2E1C2C;
    --banda-texto: #F0EBEF;
    --banda-suave: #CEC3CD;
    --banda-acento: #E5C0E1;
    --banda-linha: #4F3B4D;
    --banda-linha-forte: #8D798A;
    --banda-hover: #392437;
    --ponto: #433741;
    --brilho: rgb(211 172 206 / 0.07);
    --celular-corpo: #2C232B;
    --celular-borda: #4A3F49;
    --celular-sombra: rgb(0 0 0 / 0.6);
    --celular-cabeca: #1D171C;
    --chat-fundo: #140F14;
    --chat-ponto: rgb(211 172 206 / 0.06);
    --bolha-dele: #272026;
    --bolha-dela: #43293F;
    --bolha-sombra: rgb(0 0 0 / 0.3);
    --regua-esquerda: #E8B565;
    --regua-direita: #9DBBF7;
    --regua-neutro: #A39AA2;
    /* No escuro, o que está mais perto fica mais claro: a bola sobe um tom
       acima do painel. */
    --regua-bola: #352D34;
    --regua-bola-sombra: rgb(0 0 0 / 0.55);
  }
}

/* ---------- Tema cv: identidade Crimes Virtuais, escuro fixo ----------
   Marca: #000000, #3BFF12, #1E5E09, #FFFFFF. A interface não usa o preto e o
   branco puros (halation e smearing em OLED): fundo e texto derivam no mesmo
   matiz verde, com croma mínimo. O neon entra exato, só como acento. */
:root[data-tema="cv"] {
  color-scheme: dark;

  --f-display: "League Spartan", "Public Sans", "Segoe UI", system-ui, sans-serif;

  /* Escala de display com r_disp = 1,414 (1,25 no celular). */
  --t-h2: clamp(1.625rem, 1.2rem + 1.6vw, 2.25rem);
  --t-h1: clamp(2.0625rem, 1.35rem + 2.9vw, 3.1875rem);
  --t-display: clamp(2.625rem, 1.5rem + 4.6vw, 4.5rem);
  --t-heroi: clamp(2.5rem, 1.3rem + 3.9vw, 4.25rem);
  --t-numero: clamp(2rem, 1.45rem + 1.9vw, 3rem);

  /* Canto reto: a marca é bloco e ponto, não pílula. */
  --r-caixa: 2px;
  --r-ctrl: 2px;
  --r-mini: 1px;

  /* Curva de caráter preciso: desaceleração forte e curta, e o espelho na saída. */
  --ease-entrada: cubic-bezier(0.2, 0.9, 0.3, 1);
  --ease-saida: cubic-bezier(0.7, 0, 0.8, 0.1);

  --altura-topo: 4rem;

  --ground: #060906;
  --surface: #0E120D;
  --recess: #161B15;
  --hover: #131712;
  --line: #2B312A;
  --line-strong: #6F776E;
  --ink: #ECF0EB;
  --ink-2: #C8CEC7;
  --muted: #A5ACA3;
  --accent: #3BFF12;
  --accent-strong: #86FF71;
  --accent-soft: #0F210C;
  --on-accent: #060906;
  --ok-ink: #95D2A4;
  --ok-soft: #1E2F22;
  --warn-ink: #F5C076;
  --warn-soft: #392917;
  --danger: #F38A7F;
  --danger-strong: #FDA297;
  --on-danger: #1B0F0E;
  --danger-ink: #FDA297;
  --danger-soft: #43201C;
  --banda: #1E5E09;
  --banda-texto: #ECF0EB;
  --banda-suave: #DDEDDB;
  --banda-acento: #3BFF12;
  --banda-linha: #3C7530;
  --banda-linha-forte: #85B37E;
  --banda-hover: #22680C;

  /* Pontos da matriz: apagado e aceso. */
  --ponto: #194911;
  --ponto-aceso: #3BFF12;

  /* Camada de tecnologia, só decorativa (nunca atrás de texto pequeno sem véu):
     linha da grade técnica, brilho do neon e vidro do cabeçalho. */
  --grade: #121A11;
  --brilho: rgb(59 255 18 / 0.1);
  --brilho-forte: rgb(59 255 18 / 0.5);
  --vidro: rgb(6 9 6 / 0.8);
}

@media (prefers-contrast: more) {
  :root {
    --borda: var(--line-strong);
    --suave: var(--ink-2);
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-block-start: calc(var(--altura-topo) + env(safe-area-inset-top, 0px) + var(--e4));
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-block-size: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--f-ui);
  font-size: var(--t-md);
  font-weight: 400;
  line-height: 1.6;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* O atributo hidden sempre vence: classes com display (flex, grid) não podem reexibir o que o script escondeu. */
[hidden] { display: none !important; }

main { flex: 1 0 auto; }
main:focus { outline: none; }
main:focus-visible { outline: 2px solid var(--foco); outline-offset: -2px; }

h1, h2, h3, p, ul, ol, dl, dd, figure, fieldset, legend { margin: 0; }
ul, ol { padding: 0; }
ul[role="list"], ol[role="list"] { list-style: none; }

h1, h2, h3 {
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); line-height: 1.1; letter-spacing: -0.03em; }
h2 { font-size: var(--t-h2); line-height: 1.2; letter-spacing: -0.02em; }
h3 { font-size: var(--t-h3); line-height: 1.3; letter-spacing: -0.01em; }
p, li, dd { text-wrap: pretty; }

/* League Spartan tem caixa alta alta e desenho largo: leading um degrau mais fechado. */
:root[data-tema="cv"] h1 { line-height: 1.04; letter-spacing: -0.025em; }
:root[data-tema="cv"] h2 { line-height: 1.1; letter-spacing: -0.02em; }
:root[data-tema="cv"] h3 { line-height: 1.22; letter-spacing: -0.01em; }

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
@media (hover: hover) and (pointer: fine) {
  a:hover { text-decoration-thickness: 2px; }
}

strong { font-weight: 700; }

button {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
}

.icone {
  inline-size: 1.25em;
  block-size: 1.25em;
  flex: none;
  vertical-align: -0.25em;
}

.vh {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.largura {
  inline-size: min(var(--largura), 100% - var(--gut) * 2);
  margin-inline: auto;
}

/* Links de pular: invisíveis até receberem foco (o segundo é a saída rápida). */
.pular {
  position: absolute;
  inset-block-start: var(--e1);
  inset-inline-start: var(--e1);
  z-index: 30;
  padding: var(--e2) var(--e3);
  border-radius: var(--r-ctrl);
  background: var(--ink);
  color: var(--ground);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
}
.pular:focus-visible { transform: none; }

/* ---------- Cabeçalho e saída rápida ---------- */
.topo {
  position: sticky;
  inset-block-start: 0;
  z-index: 20;
  padding-block-start: env(safe-area-inset-top, 0px);
  background: var(--ground);
  border-block-end: 1px solid var(--borda);
}
/* Tema cv: vidro escuro com desfoque, o conteúdo passa por baixo sem perder a leitura
   (fundo 80% opaco antes do desfoque). Sem suporte a desfoque, fica o fundo sólido. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root[data-tema="cv"] .topo {
    background: var(--vidro);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    backdrop-filter: blur(14px) saturate(1.3);
  }
}
/* Quem pede menos transparência no sistema recebe superfícies sólidas: sem vidro,
   sem desfoque, no cabeçalho, no selo e nas fichas dos guias. */
@media (prefers-reduced-transparency: reduce) {
  :root[data-tema="cv"] { --vidro: var(--ground); }
  :root[data-tema="cv"] .topo {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
.topo__faixa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  min-block-size: var(--altura-topo);
}
/* Tema cv: no alto da página o topo se funde ao herói (sem borda); ao rolar,
   ganha a borda, a sombra e um fio neon. Sem JavaScript a borda fica sempre. */
:root[data-tema="cv"] .topo {
  transition:
    border-color var(--m-base) var(--ease-suave),
    box-shadow var(--m-base) var(--ease-suave);
}
:root[data-tema="cv"] .topo--alto { border-block-end-color: transparent; }
:root[data-tema="cv"] .topo:not(.topo--alto) { box-shadow: 0 1rem 2rem -1.5rem rgb(0 0 0 / 0.9); }
:root[data-tema="cv"] .topo::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: -1px;
  block-size: 1px;
  background: linear-gradient(90deg, transparent, rgb(59 255 18 / 0.55) 50%, transparent);
  opacity: 0;
  transition: opacity var(--m-media) var(--ease-suave);
  pointer-events: none;
}
:root[data-tema="cv"] .topo:not(.topo--alto)::after { opacity: 1; }
/* Barra de leitura dos guias: acompanha a rolagem do documento (animação ligada
   à rolagem, sem JavaScript). Onde o navegador não tem esse recurso, não aparece.
   Fica na borda de cima: a de baixo é do sublinhado da página atual no menu. */
@supports (animation-timeline: scroll()) {
  .pagina-guia .topo::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-start: 0;
    z-index: 1;
    block-size: 2px;
    background: var(--accent);
    transform-origin: left center;
    transform: scaleX(0);
    animation: leitura linear both;
    animation-timeline: scroll(root block);
    pointer-events: none;
  }
}
@keyframes leitura { to { transform: scaleX(1); } }
.marca {
  display: flex;
  align-items: center;
  gap: var(--e2);
  min-block-size: 2.75rem;
  color: var(--ink);
  text-decoration: none;
  line-height: 1.2;
}
/* A caixa do texto recorta o brilho. A folga de 0,15em (devolvida por margem
   negativa) deixa acentos e cedilha fora do recorte. A cópia do brilho usa a
   mesma caixa, para as letras coincidirem. */
.marca__texto,
.marca__copia {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.15em 0.2em;
}
.marca__texto {
  position: relative;
  overflow: hidden;
  margin: -0.15em -0.2em;
}
/* Cada linha do texto é uma máscara: na abertura a linha sobe de dentro dela. */
.marca__linha {
  display: block;
  overflow: hidden;
  padding-block: 0.12em;
  margin-block: -0.12em;
}
.marca__linha > * { display: block; }

/* Símbolo da marca: matriz de pontos 5 por 5, desenhada em SVG no build
   (site/layout.mjs, simboloDaMarca). Três brilhos, do rastro à cabeça, e um
   halo por coluna na cabeça. Linha e coluna entram como variáveis (--l, --c)
   para os atrasos da abertura. */
.simbolo {
  flex: none;
  inline-size: 1.875rem;
  block-size: 1.875rem;
  overflow: visible;
}
.simbolo circle { transform-box: fill-box; transform-origin: center; }
.simbolo__ponto { fill: var(--ponto); }
.simbolo__aceso { fill: var(--accent); }
.simbolo__aceso--1 { opacity: 0.36; }
.simbolo__aceso--2 { opacity: 0.68; }
.simbolo__aceso--3 { opacity: 1; }
.simbolo__halo { fill: var(--accent); opacity: 0; }
.simbolo .l1 { --l: 1; }
.simbolo .l2 { --l: 2; }
.simbolo .l3 { --l: 3; }
.simbolo .l4 { --l: 4; }
.simbolo .c1 { --c: 1; }
.simbolo .c2 { --c: 2; }
.simbolo .c3 { --c: 3; }
.simbolo .c4 { --c: 4; }
/* Com a saída rápida no topo, em 360px ou menos faltam 16px para símbolo, nome
   e botão numa linha: o símbolo sai. Sem a saída, ele fica. */
@media (max-width: 22.5rem) {
  .topo--saida .simbolo { display: none; }
}
/* Entre 361 e 384px, com a saída no topo, o botão e o vão ficam mais justos
   para o nome do projeto caber numa linha ao lado do símbolo (medido em 375px:
   sem isso o topo quebrava em duas linhas). O alvo continua com 44px de altura. */
@media (max-width: 24rem) {
  .topo--saida .topo__faixa { gap: var(--e2); }
  .topo--saida .saida { gap: var(--e1); padding-inline: var(--e2) var(--e3); }
}

.marca__pre {
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.marca__nome {
  font-weight: 700;
  font-size: var(--t-lg);
  letter-spacing: -0.02em;
}
/* No tema cv, o nome segue o wordmark: League Spartan em caixa alta, fechado
   como nas peças da marca (regra da marca vence a do tracking de caixa alta). */
:root[data-tema="cv"] .marca__nome {
  font-family: var(--f-display);
  font-size: 1.1875rem;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 1;
  padding-block-start: 0.1em;
}
:root[data-tema="cv"] .marca__texto,
:root[data-tema="cv"] .marca__copia { gap: 0.2rem; }
.marca__sub {
  font-size: var(--t-xs);
  color: var(--suave);
  letter-spacing: 0.01em;
}
/* Nome do projeto de extensão (tema projeto): forma curta até 80rem, onde
   divide a linha com a saída rápida ou com o menu; a partir daí, a forma longa
   em duas linhas equilibradas. Numa linha só ela nunca cabe ao lado do menu
   centrado (medido em 1280 e 1440px: invadia o menu em 20px), e em 1024px nem
   em duas (ficava a 10px do menu). O limite subiu de 72rem para 80rem em
   28/09/2026, quando o menu passou a mostrar o nome do projeto: em 1152px a
   forma longa ficava a 2px do menu. */
.marca__sub-longo { display: none; }
@media (min-width: 80rem) {
  .marca__sub-curto { display: none; }
  .marca__sub-longo {
    display: block;
    max-inline-size: 16rem;
    line-height: 1.15;
    text-wrap: balance;
  }
}

/* ---------- Marca animada ----------
   Abertura (html.marca-intro, decidida antes da primeira pintura por
   /assets/marca.js: só quando a visita chega de fora do site). Em 1,4 s:
   a grade apagada acende em onda diagonal; a chuva cai coluna a coluna, cada
   gota passa pelo brilho máximo e assenta no seu nível; a cabeça de cada
   coluna solta um halo ao pousar; as linhas do nome sobem das máscaras; uma
   varredura neon atravessa o nome. Depois, app.js tira a classe e o hover
   repete chuva, halo e varredura. Só transform e opacity; nada em loop. */
@keyframes marca-ponto {
  from { opacity: 0; transform: scale(0.3); }
}
@keyframes marca-gota {
  0% { opacity: 0; transform: translateY(-8px); }
  45% { opacity: 1; }
}
@keyframes marca-halo {
  0% { opacity: 0.45; transform: scale(0.4); }
  100% { opacity: 0; transform: scale(1.7); }
}
/* 140%: a linha parte de baixo da própria máscara com folga (o glifo passa da
   caixa da linha, como no título do herói). */
@keyframes marca-linha {
  from { transform: translateY(140%); }
}
/* Brilho: a janela (45% da largura do texto) vai de fora à esquerda até fora
   à direita; a cópia, com a largura inteira do texto, anda o mesmo tanto ao
   contrário. Posição da cópia = janela + cópia = 0 em todo quadro: as letras no
   acento coincidem com as originais e só a janela se move. Contas em % (da
   janela: -100% a 230%, ou -0,45 a 1,035 da largura W; da cópia: 45% a
   -103,5% de W). Mesma duração e curva nas duas animações. */
@keyframes marca-janela {
  0% { opacity: 0; transform: translateX(-100%); }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translateX(230%); }
}
@keyframes marca-janela-copia {
  0% { transform: translateX(45%); }
  100% { transform: translateX(-103.5%); }
}
.marca__brilho {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 45%;
  overflow: hidden;
  opacity: 0;
  transform: translateX(-100%);
  pointer-events: none;
  user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 55%, #000 80%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 55%, #000 80%, transparent);
}
.marca__copia {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  /* Largura exata do texto inteiro: as porcentagens da translação se referem
     a ela, e qualquer folga desalinha a cópia (medido: 1px de folga dava 1px
     de desvio). */
  inline-size: calc(100% / 0.45);
  /* Par da posição de repouso da janela (-100%): a cópia fica sob as letras
     também fora da animação. */
  transform: translateX(45%);
}
.marca__copia,
.marca__copia * { color: var(--accent); }
/* O arredondamento deixa a cópia até 0,03px mais estreita que o texto, e a
   linha mais larga quebrava dentro dela (medido). A margem negativa dá 1px a
   mais de largura às linhas sem mudar a caixa da cópia, de que depende a conta
   da translação; onde o original quebra de propósito (nome do projeto em 375px),
   a cópia quebra igual. */
.marca__copia > .marca__linha { margin-inline-end: -1px; }

.marca-intro .simbolo__ponto {
  animation: marca-ponto var(--m-media) var(--ease-expo) both;
  animation-delay: calc((var(--l, 0) + var(--c, 0)) * var(--m-escalona) * 0.6);
}
.marca-intro .simbolo__aceso {
  animation: marca-gota var(--m-media) var(--ease-expo) both;
  animation-delay: calc(var(--m-escalona) * (3 + var(--l, 0) * 1.2 + var(--c, 0)));
}
.marca-intro .simbolo__halo {
  animation: marca-halo 480ms var(--ease-suave);
  animation-delay: calc(var(--m-escalona) * (3 + var(--l, 0) * 1.2 + var(--c, 0)) + 190ms);
}
.marca-intro .marca__linha > * { animation: marca-linha var(--m-lenta) var(--ease-expo) both; }
.marca-intro .marca__linha:nth-child(1) > * { animation-delay: 180ms; }
.marca-intro .marca__linha:nth-child(2) > * { animation-delay: 240ms; }
.marca-intro .marca__linha:nth-child(3) > * { animation-delay: 300ms; }
.marca-intro .marca__brilho { animation: marca-janela 640ms var(--ease-suave) 700ms; }
.marca-intro .marca__copia { animation: marca-janela-copia 640ms var(--ease-suave) 700ms; }

/* Hover com mouse: a chuva cai de novo, as cabeças soltam o halo e a varredura
   passa pelo nome, em 0,8 s. O mesmo nome de animação da abertura, de propósito:
   se o ponteiro chega durante a abertura, ela segue sem recomeçar. */
@media (hover: hover) and (pointer: fine) {
  .marca:hover .simbolo__aceso {
    animation: marca-gota var(--m-media) var(--ease-expo) both;
    animation-delay: calc(var(--m-escalona) * (var(--l, 0) * 0.8 + var(--c, 0) * 0.6));
  }
  .marca:hover .simbolo__halo {
    animation: marca-halo 480ms var(--ease-suave);
    animation-delay: calc(var(--m-escalona) * (var(--l, 0) * 0.8 + var(--c, 0) * 0.6) + 190ms);
  }
  .marca:hover .marca__brilho { animation: marca-janela 600ms var(--ease-suave) 60ms; }
  .marca:hover .marca__copia { animation: marca-janela-copia 600ms var(--ease-suave) 60ms; }
}

.saida {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  min-block-size: 2.75rem;
  padding-inline: var(--e3) var(--e4);
  border-radius: var(--r-ctrl);
  background: var(--danger);
  color: var(--on-danger);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--d-feedback) var(--ease-movimento), transform var(--d-feedback) var(--ease-movimento);
}
.saida:active { background: var(--danger-strong); transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) {
  .saida:hover { background: var(--danger-strong); }
}
.saida:focus-visible { outline-color: var(--ink); outline-width: 3px; }
/* Tema cv: a saída continua sendo o elemento mais quente do topo, mas em contorno
   de perigo sobre o vidro, em vez de um bloco salmão fora da paleta.
   Medido: #FDA297 sobre #43201C, 7,38:1; borda #F38A7F sobre o fundo, 8,34:1;
   hover #1B0F0E sobre #F38A7F, 7,81:1. */
:root[data-tema="cv"] .saida {
  background: var(--danger-soft);
  color: var(--danger-ink);
  box-shadow: inset 0 0 0 1px var(--danger);
}
:root[data-tema="cv"] .saida:active { background: var(--danger); color: var(--on-danger); }
@media (hover: hover) and (pointer: fine) {
  :root[data-tema="cv"] .saida:hover { background: var(--danger); color: var(--on-danger); }
}
.saida__atalho { display: none; }
@media (min-width: 64rem) {
  .saida__atalho {
    display: inline-flex;
    align-items: center;
    padding: 0.0625rem var(--e1);
    border: 1px solid currentColor;
    border-radius: var(--r-mini);
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    font-weight: 400;
    line-height: 1.4;
  }
}
.saida__pontos {
  position: absolute;
  inset-block-end: 3px;
  inset-inline: 0;
  display: flex;
  justify-content: center;
  gap: 4px;
  opacity: 0;
  transition: opacity var(--d-revela) var(--ease-entrada);
}
.saida__pontos i {
  inline-size: 5px;
  block-size: 5px;
  border-radius: 50%;
  border: 1px solid currentColor;
}
.saida__pontos i.ativo { background: currentColor; }
.saida__pontos.visiveis { opacity: 1; }

/* Cortina que cobre a página no instante da saída, antes do próximo site carregar. */
.saida-cortina {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: var(--ground);
  color: var(--suave);
  font-size: var(--t-sm);
}
body.saindo > :not(.saida-cortina) { visibility: hidden; }

/* ---------- Navegação do site ----------
   Celular: linha própria abaixo do cabeçalho, que rola com a página, para o
   topo fixo ficar só com a marca e a saída rápida (60px, não 104px).
   Tela larga: a mesma lista sobe para dentro da faixa do topo, fixa junto
   com ela. Um elemento só, sem duplicar a navegação. */
.nav-site {
  border-block-end: 1px solid var(--borda);
}
.nav-site__lista {
  display: flex;
  gap: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
/* Com mais itens do que cabem (celular), a borda do lado em que há item
   escondido esmaece, e a linha abre rolada até a página atual (app.js,
   iniciarMenuRolavel). */
.nav-site__lista--depois { mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent); }
.nav-site__lista--antes { mask-image: linear-gradient(to left, #000 calc(100% - 2.5rem), transparent); }
.nav-site__lista--antes.nav-site__lista--depois {
  mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent);
}
.nav-site__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem;
  padding-inline: var(--e2);
  color: var(--ink-2);
  font-size: var(--t-sm);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--d-feedback) var(--ease-movimento);
}
.nav-site__lista li:first-child .nav-site__link { padding-inline-start: 0; }
.nav-site__link::after {
  content: "";
  position: absolute;
  inset-inline: var(--e2);
  inset-block-end: 0;
  block-size: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--d-feedback) var(--ease-entrada);
}
.nav-site__lista li:first-child .nav-site__link::after { inset-inline-start: 0; }
.nav-site__link[aria-current] { color: var(--ink); }
.nav-site__link[aria-current]::after { transform: scaleX(1); }
.nav-site__link:active { color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .nav-site__link:hover { color: var(--ink); }
  .nav-site__link:hover::after { transform: scaleX(1); }
}
.nav-site__link:focus-visible { outline-offset: -2px; }
.nav-site { position: relative; }
.nav-site__indicador { display: none; }

@media (min-width: 64rem) {
  .nav-site {
    position: sticky;
    inset-block-start: env(safe-area-inset-top, 0px);
    z-index: 21;
    align-self: center;
    margin-block-start: calc(var(--altura-topo) * -1);
    block-size: var(--altura-topo);
    border: 0;
  }
  .nav-site__lista {
    inline-size: auto;
    block-size: 100%;
    overflow: visible;
    gap: var(--e1);
  }
  .nav-site__link {
    min-block-size: var(--altura-topo);
    padding-inline: var(--e3);
  }
  .nav-site__lista li:first-child .nav-site__link { padding-inline-start: var(--e3); }
  .nav-site__link::after,
  .nav-site__lista li:first-child .nav-site__link::after { inset-inline: var(--e3); inset-block-end: -1px; }
}
/* Entre 64rem e 80rem o menu centrado, com o nome do projeto, encostava na
   saída rápida (2px em 1024px): links mais justos devolvem 29px de cada lado. */
@media (min-width: 64rem) and (max-width: 79.99rem) {
  .nav-site__lista { gap: 0; }
  .nav-site__link,
  .nav-site__lista li:first-child .nav-site__link { padding-inline: var(--e2); }
  .nav-site__link::after,
  .nav-site__lista li:first-child .nav-site__link::after { inset-inline: var(--e2); }
}
/* Tema cv, tela larga com mouse: uma placa desliza até o link sob o ponteiro.
   Só transform e opacidade: largura por scaleX sobre uma base de 100px (canto
   de 2px, sem distorção visível). Com a placa ativa, o sublinhado de hover sai
   e fica só o da página atual. */
@media (min-width: 64rem) and (hover: hover) and (pointer: fine) {
  :root[data-tema="cv"] .nav-site__indicador {
    display: block;
    position: absolute;
    inset-block-start: calc(50% - 1.125rem);
    inset-inline-start: 0;
    z-index: -1;
    inline-size: 100px;
    block-size: 2.25rem;
    border-radius: var(--r-ctrl);
    background: rgb(236 240 235 / 0.06);
    transform-origin: left center;
    transform: translateX(var(--ind-x, 0px)) scaleX(var(--ind-s, 1));
    opacity: 0;
    pointer-events: none;
    transition:
      transform var(--m-base) var(--ease-expo),
      opacity var(--m-rapida) var(--ease-suave);
  }
  :root[data-tema="cv"] .nav-site__indicador.ativo { opacity: 1; }
  :root[data-tema="cv"] .nav-site__indicador.sem-transicao { transition: opacity var(--m-rapida) var(--ease-suave); }
  :root[data-tema="cv"] .nav-site--placa .nav-site__link:not([aria-current]):hover::after { transform: scaleX(0); }
}

/* ---------- Botões ---------- */
.acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3);
  align-items: center;
}
.acoes--compactas { gap: var(--e2); margin-block-start: var(--e3); }

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  min-block-size: var(--alvo);
  padding-inline: var(--e4);
  border-radius: var(--r-ctrl);
  border: 1px solid transparent;
  font-family: var(--f-ui);
  font-weight: 700;
  font-size: var(--t-md);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--d-feedback) var(--ease-movimento),
    border-color var(--d-feedback) var(--ease-movimento),
    color var(--d-feedback) var(--ease-movimento),
    transform var(--d-feedback) var(--ease-movimento);
}
.botao:active { transform: translateY(1px); }
.botao__icone { inline-size: 1.125em; block-size: 1.125em; }

.botao--primario {
  background: var(--accent);
  color: var(--on-accent);
}
.botao--primario:active { background: var(--accent-strong); }
@media (hover: hover) and (pointer: fine) {
  .botao--primario:hover { background: var(--accent-strong); }
}

.botao--secundario {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.botao--secundario:active { background: var(--recess); }
.botao--grande { min-block-size: 3.25rem; padding-inline: var(--e5); font-size: var(--t-lg); }
@media (hover: hover) and (pointer: fine) {
  .botao--secundario:hover { background: var(--hover); border-color: var(--ink-2); }
}

.botao[aria-disabled="true"] { cursor: progress; }
.botao--carregando { position: relative; }
.botao--carregando::after {
  content: "";
  inline-size: 1em;
  block-size: 1em;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  animation: girar calc(var(--tau) * 4) linear infinite;
}

.link-botao {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  cursor: pointer;
  min-block-size: 1.5rem;
}

/* Link de ação com seta: o texto diz o destino, a seta anda 2px no hover. */
.link-seta {
  display: inline-flex;
  align-items: center;
  gap: var(--e1);
  min-block-size: 2.75rem;
  font-weight: 700;
  text-decoration: none;
}
.link-seta .icone { transition: transform var(--d-feedback) var(--ease-entrada); }
.link-seta:active .icone { transform: translateX(2px); }
@media (hover: hover) and (pointer: fine) {
  .link-seta:hover { text-decoration: underline; text-decoration-thickness: 1px; }
  .link-seta:hover .icone { transform: translateX(2px); }
}

/* ---------- Texto de apoio ---------- */
.rotulo {
  display: inline-flex;
  align-items: center;
  gap: var(--e1);
  margin-block-end: var(--e3);
  color: var(--accent);
  font-size: var(--t-sm);
  font-weight: 700;
}
.rotulo__icone { inline-size: 1.125rem; block-size: 1.125rem; }

.citacao {
  margin-block-start: var(--e2);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  line-height: 1.5;
  color: var(--suave);
}

.prosa { max-inline-size: 68ch; }
.prosa > * + * { margin-block-start: var(--e3); }
.prosa h2 {
  font-size: var(--t-h3);
  letter-spacing: -0.01em;
  margin-block-start: var(--e6);
}
.prosa h2:first-child { margin-block-start: 0; }
.prosa ul { padding-inline-start: 1.25em; }
.prosa li + li { margin-block-start: var(--e1); }

.aviso {
  display: flex;
  gap: var(--e3);
  align-items: flex-start;
  padding: var(--e3) var(--e4);
  border-radius: var(--r-caixa);
  background: var(--recess);
  color: var(--ink);
}
.aviso__icone { margin-block-start: 0.15em; color: var(--suave); }
.aviso--seguranca { background: var(--warn-soft); }
.aviso--seguranca .aviso__icone { color: var(--warn-ink); }
.aviso--retomada { background: var(--accent-soft); }
.aviso--retomada .aviso__icone { color: var(--accent); }
.aviso--semjs { display: block; margin-block-start: var(--e4); }
/* Urgência: fundo de perigo, ícone e texto. Nunca só a cor. */
.aviso--urgente { background: var(--danger-soft); box-shadow: inset 0 0 0 1px var(--danger-ink); }
.aviso--urgente .aviso__icone { color: var(--danger-ink); }
.aviso p + p { margin-block-start: var(--e1); }

/* ---------- Página do projeto (tema projeto), refeita em 28/09/2026 ----------
   Herói com o celular e os sete sinais: na tela larga o celular fica preso ao
   lado da leitura e a conversa do Lucas se revela sinal a sinal (app.js,
   iniciarConversa); no celular, ela vem inteira, com as marcações, e rola
   dentro do aparelho. Desde 01/10/2026 o celular tem a lista de conversas e
   mais três conversas, que a pessoa abre, rola e fecha (app.js,
   iniciarCelular; DESIGN.md 2.9). Cada sinal traz as próprias mensagens. */
.historia {
  /* No celular, o aparelho tem cara de celular: ocupa a altura visível abaixo
     do cabeçalho do site, menos uma folga de 2rem (com as barras do Safari
     abertas, por isso 100svh), entre 28rem e 44rem. Até 01/10/2026 a folga era
     de 7rem, e no iPhone o aparelho ficava achatado (pedido do Pedro: "ficou
     muito pequeno"). Para rolar a página com o dedo sobre ele, a conversa
     passa o gesto à página quando chega ao fim, e as margens laterais rolam a
     página direto (DESIGN.md 2.9). */
  --celular-alto: clamp(28rem, calc(100svh - var(--altura-topo) - 2rem), 44rem);
  /* Altura da dica abaixo do celular (uma linha de texto pequeno e a folga). */
  --dica-alto: 2.75rem;
  --aparelho-alto: calc(var(--celular-alto) + var(--dica-alto));
  position: relative;
  /* Os pontos atrás do celular passam da coluna; clip não cria rolagem e não
     solta o celular preso (sticky), ao contrário de hidden. */
  overflow-x: clip;
  padding-block: var(--e5) var(--e7);
  background: radial-gradient(56rem 34rem at 88% 0%, var(--brilho), transparent 70%);
}
.historia__grade {
  display: grid;
  grid-template-areas: "heroi" "palco" "sinais";
  gap: var(--e6);
}
.historia__heroi { grid-area: heroi; padding-block-start: var(--e4); }
.historia__palco { grid-area: palco; display: grid; justify-items: center; }
.historia__sinais { grid-area: sinais; padding-block-start: var(--e5); }
.historia__heroi h1 {
  margin-block-start: var(--e3);
  font-size: var(--t-display);
  line-height: 1.02;
  letter-spacing: -0.035em;
}
.historia__apoio {
  margin-block: var(--e4) var(--e5);
  max-inline-size: 40ch;
  font-size: var(--t-lg);
  line-height: 1.5;
  color: var(--ink-2);
}
.historia__nota {
  display: flex;
  align-items: center;
  gap: var(--e1);
  margin-block-start: var(--e4);
  font-size: var(--t-sm);
  color: var(--suave);
}
/* Aparelho: o celular e, embaixo, a dica de que ele se usa (rolar e abrir as
   outras conversas). No celular, até 24rem de largura (a largura toda da
   coluna nos aparelhos comuns); na tela larga, 21rem, e é o aparelho que
   fica preso. */
.historia__aparelho {
  display: grid;
  justify-items: center;
  inline-size: min(24rem, 100%);
}
.historia__dica {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--e1);
  min-block-size: calc(var(--dica-alto) - var(--e3));
  margin-block-start: var(--e3);
  font-size: var(--t-sm);
  line-height: 1.35;
  text-align: center;
  color: var(--suave);
}
.historia__dica .icone { flex: none; inline-size: 1.125rem; block-size: 1.125rem; color: var(--accent); }
/* Tela larga: o palco ocupa as duas linhas da grade, e o celular fica preso
   no meio da área visível enquanto os sinais passam. A folga de cima do palco
   é a mesma do ponto em que ele prende: o celular não salta ao prender. */
@media (min-width: 64rem) {
  .historia {
    --celular-alto: min(44rem, calc(100svh - var(--altura-topo) - var(--e5) * 2 - var(--dica-alto)));
    padding-block: 0 var(--e8);
  }
  .historia__grade {
    grid-template-columns: minmax(0, 1fr) 22rem;
    grid-template-areas: "heroi palco" "sinais palco";
    column-gap: var(--e8);
    row-gap: 0;
  }
  .historia__heroi {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    min-block-size: calc(100svh - var(--altura-topo));
    padding-block: var(--e6);
  }
  .historia__palco {
    display: block;
    padding-block-start: calc((100svh - var(--altura-topo) - var(--aparelho-alto)) / 2);
  }
  .historia__palco .celular::before { inset: -3rem -4.5rem; }
  .historia__aparelho {
    inline-size: min(21rem, 100%);
    position: sticky;
    inset-block-start: calc(var(--altura-topo) + (100svh - var(--altura-topo) - var(--aparelho-alto)) / 2);
  }
}

/* Celular: moldura, tela, cabeçalho da conversa, balões e campo de texto.
   Aplicativo de mensagens genérico, sem marca de terceiro (DESIGN.md, Ativos
   de terceiro). Os pontos atrás repetem a matriz da marca. */
.celular {
  position: relative;
  isolation: isolate;
  inline-size: 100%;
  block-size: var(--celular-alto);
}
.celular::before {
  content: "";
  position: absolute;
  inset: -2rem 0;
  z-index: -1;
  background-image: radial-gradient(circle, var(--ponto) 1.25px, transparent 1.75px);
  background-size: 1.125rem 1.125rem;
  mask-image: radial-gradient(closest-side, #000 35%, transparent);
  pointer-events: none;
}
.celular__corpo {
  block-size: 100%;
  padding: 0.5625rem;
  border-radius: 2.75rem;
  background: var(--celular-corpo);
  box-shadow:
    0 0 0 1px var(--celular-borda),
    0 2.5rem 4rem -2rem var(--celular-sombra),
    0 0.75rem 1.5rem -1rem var(--celular-sombra);
}
.celular__tela {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  block-size: 100%;
  overflow: hidden;
  border-radius: 2.25rem;
  background: var(--chat-fundo);
  color: var(--ink);
}
.celular__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 1.375rem 0.25rem;
  background: var(--celular-cabeca);
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.celular__ilha {
  inline-size: 5.25rem;
  block-size: 1.375rem;
  border-radius: 1rem;
  background: var(--celular-corpo);
}
.celular__sinais { display: flex; gap: 0.25rem; }
.celular__sinais .icone { inline-size: 0.9375rem; block-size: 0.9375rem; }
/* Telas do celular: a lista de conversas e cada conversa ocupam a tela
   inteira, uma sobre a outra; só a ativa aparece (e, durante a troca, a que
   sai). As de fora ficam invisíveis, e não com display: none, para cada
   conversa guardar onde a pessoa parou de rolar. O gesto vertical é da
   conversa e, no fim dela, da página; o horizontal é o deslizar para voltar
   (app.js). */
.celular__paineis {
  position: relative;
  min-block-size: 0;
  overflow: hidden;
}
.celular__painel {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--chat-fundo);
  touch-action: pan-y pinch-zoom;
}
.celular__painel:not(.celular__painel--ativo):not(.celular__painel--visivel) { visibility: hidden; }
/* Conversa por cima da lista, com a sombra da borda enquanto desliza. */
.celular__painel--movendo { box-shadow: -0.75rem 0 1.5rem -0.75rem var(--celular-sombra); }
.celular--arrastando { user-select: none; -webkit-user-select: none; }
.celular__cabeca {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.875rem 0.375rem 0.25rem;
  background: var(--celular-cabeca);
  border-block-end: 1px solid var(--borda);
}
/* Voltar à lista: alvo de 44px, com a contagem das não lidas nas outras
   conversas ao lado da seta, como nos aplicativos de mensagem. */
.celular__voltar {
  display: inline-flex;
  align-items: center;
  flex: none;
  min-inline-size: 2.75rem;
  min-block-size: 2.75rem;
  padding-inline: 0.125rem 0.25rem;
  border-radius: var(--r-mini);
  color: var(--accent);
  text-decoration: none;
}
.celular__voltar .icone { inline-size: 1.25rem; block-size: 1.25rem; }
.celular__contagem {
  min-inline-size: 1.25rem;
  padding-inline: 0.3125rem;
  border-radius: 999px;
  background: var(--accent-soft);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.25rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.celular__contagem[hidden] { display: none; }
.celular__avatar {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 2.125rem;
  block-size: 2.125rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  color: var(--on-accent);
  font-size: 0.9375rem;
  font-weight: 700;
}
.celular__avatar--suave { background: var(--accent-soft); color: var(--accent); }
.celular__avatar .icone { inline-size: 1.25rem; block-size: 1.25rem; }
.celular__contato { display: grid; flex: 1; min-inline-size: 0; font-size: 0.875rem; line-height: 1.2; }
.celular__nome { font-size: 0.875rem; font-weight: 700; line-height: 1.2; letter-spacing: 0; }
.celular__contato > span {
  overflow: hidden;
  font-size: 0.75rem;
  color: var(--suave);
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Vídeo e ligação não fazem nada: sem a cor de ação. */
.celular__acoes { display: flex; gap: 0.875rem; color: var(--suave); }
.celular__acoes .icone { inline-size: 1.25rem; block-size: 1.25rem; }
.celular__escrever {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem 0.875rem;
  background: var(--celular-cabeca);
}
.celular__campo {
  flex: 1;
  padding: 0.4375rem 0.875rem;
  border-radius: 1.25rem;
  border: 1px solid var(--borda);
  background: var(--chat-fundo);
  font-size: 0.8125rem;
  color: var(--suave);
}
.celular__mic {
  display: grid;
  place-items: center;
  inline-size: 2.125rem;
  block-size: 2.125rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
}
.celular__mic .icone { inline-size: 1.125rem; block-size: 1.125rem; }

/* Conversa: a pessoa rola com o dedo, a roda do mouse ou o teclado (a área
   recebe foco). Poucas mensagens assentam embaixo, perto do campo de texto,
   como num aplicativo de verdade (margem automática na lista); quando passam
   da altura, a conversa rola. No fim da rolagem, o gesto segue para a página. */
.chat {
  display: flex;
  flex-direction: column;
  min-block-size: 0;
  overflow-y: auto;
  overscroll-behavior-y: auto;
  padding: 0.75rem 0.6875rem 0.875rem;
  background-color: var(--chat-fundo);
  background-image: radial-gradient(circle, var(--chat-ponto) 1px, transparent 1.4px);
  background-size: 0.875rem 0.875rem;
  background-attachment: local;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in oklab, var(--suave) 45%, transparent) transparent;
  /* A conversa rola por conta própria: o navegador decide o gesto pela regra
     dela, não pela do painel. Só o vertical (e o zoom) é do navegador; o
     horizontal fica para o deslizar de voltar, e nunca vira "voltar página"
     do navegador. */
  touch-action: pan-y pinch-zoom;
  overscroll-behavior-x: none;
}
.chat:focus-visible { outline-offset: -3px; }
.chat__lista {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
  margin-block-start: auto;
}
.chat__dia {
  align-self: center;
  margin-block: 0.25rem 0.375rem;
  padding: 0.125rem 0.625rem;
  border-radius: var(--r-mini);
  background: var(--celular-cabeca);
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--suave);
}
.bolha {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  column-gap: 0.5rem;
  max-inline-size: 82%;
  padding: 0.375rem 0.5625rem 0.3125rem;
  border-radius: 0.875rem;
  box-shadow: 0 1px 1px var(--bolha-sombra);
  font-size: 0.875rem;
  line-height: 1.35;
}
.bolha--dele {
  align-self: flex-start;
  transform-origin: bottom left;
  border-end-start-radius: 0.3125rem;
  background: var(--bolha-dele);
}
.bolha--dela {
  align-self: flex-end;
  transform-origin: bottom right;
  border-end-end-radius: 0.3125rem;
  background: var(--bolha-dela);
}
.bolha__meta {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  margin-inline-start: auto;
  font-size: 0.6875rem;
  color: var(--suave);
  font-variant-numeric: tabular-nums;
}
.bolha__lida { inline-size: 0.875rem; block-size: 0.875rem; color: var(--accent); }
/* Marcação do sinal: em âmbar, a cor de atenção, com ícone e texto (a cor
   nunca é o único sinal). Sem JavaScript e no celular, a primeira mensagem
   dele em cada sinal já vem marcada; na tela larga, só a do sinal em leitura. */
.bolha__sinal {
  display: none;
  flex-basis: 100%;
  align-items: center;
  gap: 0.25rem;
  margin-block-end: 0.1875rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--warn-ink);
}
.bolha__sinal .icone { inline-size: 0.8125rem; block-size: 0.8125rem; }
.historia:not(.historia--viva) .bolha[data-primeira] .bolha__sinal,
.historia--viva .bolha--marcada[data-primeira] .bolha__sinal { display: flex; }
/* Nas outras conversas, a marcação é sempre visível e leva a algum lugar da
   página: o sinal à explicação dele, o apoio aos canais de ajuda. Alvo de
   24px de altura (WCAG 2.5.8). */
.bolha__sinal--link { display: flex; }
.bolha__apoio {
  display: flex;
  flex-basis: 100%;
  align-items: center;
  gap: 0.25rem;
  margin-block-end: 0.1875rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}
.bolha__apoio .icone { inline-size: 0.8125rem; block-size: 0.8125rem; }
a.bolha__sinal,
a.bolha__apoio {
  min-block-size: 1.5rem;
  margin-block-start: -0.1875rem;
  text-decoration: none;
}
.bolha__seta { inline-size: 0.75rem; block-size: 0.75rem; }
@media (hover: hover) and (pointer: fine) {
  a.bolha__sinal:hover,
  a.bolha__apoio:hover { text-decoration: underline; text-underline-offset: 0.2em; }
}
.bolha:has(> .bolha__sinal--link) { box-shadow: 0 0 0 2px var(--warn-ink), 0 1px 1px var(--bolha-sombra); }
.bolha:has(> .bolha__apoio) { box-shadow: 0 0 0 2px var(--accent), 0 1px 1px var(--bolha-sombra); }
/* No grupo, o nome de quem escreve abre o balão. */
.bolha__autor {
  flex-basis: 100%;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--accent);
}
/* Não lidas: a faixa marca onde começam, e as mensagens chegam em sequência
   curta ao abrir a conversa (menos de 1 s no total). */
.chat__nao-lidas {
  align-self: stretch;
  margin-block: 0.375rem 0.25rem;
  padding: 0.25rem 0.5rem;
  border-radius: var(--r-mini);
  background: var(--celular-cabeca);
  font-size: 0.6875rem;
  font-weight: 700;
  text-align: center;
  color: var(--accent);
}
.bolha--chegando {
  animation: bolha-entra var(--m-base) var(--ease-expo) both;
  animation-delay: calc(var(--m-rapida) + var(--ordem, 0) * var(--m-escalona) * 2);
}
.historia--viva .bolha--marcada { box-shadow: 0 0 0 2px var(--warn-ink), 0 1px 1px var(--bolha-sombra); }
.historia--viva .bolha:not([hidden]) { animation: bolha-entra var(--m-base) var(--ease-expo) both; }
@keyframes bolha-entra {
  from { opacity: 0; transform: translateY(0.5rem) scale(0.96); }
}
/* "Digitando": três pontos, só enquanto o indicador aparece (menos de 1 s);
   três ciclos no máximo, nunca em laço. */
.chat__digitando {
  align-self: flex-start;
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.875rem;
  border-end-start-radius: 0.3125rem;
  background: var(--bolha-dele);
  box-shadow: 0 1px 1px var(--bolha-sombra);
}
.chat__digitando span {
  inline-size: 0.4375rem;
  block-size: 0.4375rem;
  border-radius: 50%;
  background: var(--suave);
  animation: digitando 600ms var(--ease-suave) 3;
}
.chat__digitando span:nth-child(2) { animation-delay: 120ms; }
.chat__digitando span:nth-child(3) { animation-delay: 240ms; }
@keyframes digitando {
  0%, 60%, 100% { opacity: 0.4; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-2px); }
}

/* Botão de descer: aparece quando a pessoa rolou para cima, com a contagem
   de mensagens que chegaram enquanto isso (na tela larga, pela leitura). */
.chat__descer {
  position: absolute;
  inset-inline-end: 0.75rem;
  inset-block-end: 4rem;
  display: grid;
  place-items: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--celular-cabeca);
  color: var(--accent);
  box-shadow: 0 0 0 1px var(--borda), 0 0.375rem 0.875rem -0.25rem var(--celular-sombra);
  cursor: pointer;
  animation: subir var(--m-base) var(--ease-expo) both;
}
.chat__descer[hidden] { display: none; }
.chat__descer .icone { inline-size: 1.125rem; block-size: 1.125rem; }
.chat__descer-contagem {
  position: absolute;
  inset-block-start: -0.375rem;
  inset-inline-end: -0.25rem;
  min-inline-size: 1.125rem;
  padding-inline: 0.25rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.125rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.chat__descer-contagem[hidden] { display: none; }

/* Lista de conversas, como num aplicativo de mensagens: título grande, um
   item por conversa com avatar, nome, hora, prévia em até duas linhas e a
   contagem de não lidas. Cada item é um link para a conversa (sem
   JavaScript, leva até ela; com, abre no lugar). */
.celular__painel--lista {
  grid-template-rows: auto minmax(0, 1fr);
  background: var(--celular-cabeca);
}
.lista-chat__cabeca { padding: 0.375rem 1rem 0.5rem; }
.lista-chat__titulo { font-size: 1.5rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; }
.lista-chat {
  list-style: none;
  overflow-y: auto;
  overscroll-behavior-y: auto;
  overscroll-behavior-x: none;
  scrollbar-width: thin;
  touch-action: pan-y pinch-zoom;
}
.lista-chat__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-inline: 0.875rem 0;
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.lista-chat__item:focus-visible { outline-offset: -3px; }
.lista-chat__item:active { background: var(--hover); }
@media (hover: hover) and (pointer: fine) {
  .lista-chat__item:hover { background: var(--hover); }
}
.lista-chat__item .celular__avatar { inline-size: 2.875rem; block-size: 2.875rem; font-size: 1.0625rem; }
.lista-chat__corpo {
  display: grid;
  flex: 1;
  gap: 0.125rem;
  min-inline-size: 0;
  padding: 0.6875rem 0.875rem 0.6875rem 0;
  border-block-end: 1px solid var(--borda);
}
.lista-chat li:last-child .lista-chat__corpo { border-block-end-color: transparent; }
.lista-chat__linha {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  min-inline-size: 0;
}
.lista-chat__nome {
  overflow: hidden;
  font-size: 0.9375rem;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lista-chat__hora {
  flex: none;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--suave);
  font-variant-numeric: tabular-nums;
}
.lista-chat__item--nao-lida .lista-chat__hora { font-weight: 700; color: var(--accent); }
.lista-chat__previa {
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.8125rem;
  line-height: 1.3;
  color: var(--suave);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.lista-chat__previa--digitando { font-style: italic; color: var(--accent); }
.lista-chat__badge {
  flex: none;
  min-inline-size: 1.25rem;
  padding-inline: 0.375rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.25rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.lista-chat__badge[hidden] { display: none; }

/* No celular, o aparelho tem quase o tamanho da tela de verdade, e o texto
   dele sobe um degrau, perto do de um aplicativo de mensagens. */
@media (max-width: 63.99rem) {
  .bolha { font-size: 0.9375rem; }
  .bolha__meta,
  .chat__dia,
  .chat__nao-lidas,
  .bolha__sinal,
  .bolha__apoio { font-size: 0.75rem; }
  .bolha__autor,
  .celular__contato > span,
  .lista-chat__hora { font-size: 0.8125rem; }
  .celular__nome,
  .celular__contato { font-size: 0.9375rem; }
  .lista-chat__nome { font-size: 1rem; }
  .lista-chat__previa,
  .celular__campo { font-size: 0.875rem; }
}

/* Os sete sinais. Na tela larga, cada um ocupa boa parte da altura da tela,
   para a conversa andar no ritmo da leitura; o sinal em leitura ganha o
   traço e o número no acento (a mudança não depende de opacidade, para o
   texto dos outros manter o contraste). */
.sinais { list-style: none; display: grid; gap: var(--e6); }
.sinal {
  display: grid;
  align-content: start;
  gap: var(--e3);
  padding-inline-start: var(--e5);
  border-inline-start: 2px solid var(--borda);
  transition: border-color var(--m-base) var(--ease-suave);
}
.sinal__cabeca { display: flex; align-items: center; gap: var(--e3); }
.sinal__indice {
  font-family: var(--f-mono);
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
  color: var(--suave);
  transition: color var(--m-base) var(--ease-suave);
}
.sinal__rotulo {
  padding: 0.2em 0.6em;
  border-radius: var(--r-mini);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--t-sm);
  font-weight: 700;
}
.sinal__titulo { font-size: var(--t-h3); line-height: 1.2; }
.sinal__mensagens {
  list-style: none;
  display: grid;
  gap: var(--e1);
  max-inline-size: 30rem;
}
.citacao-chat {
  max-inline-size: 88%;
  padding: var(--e2) var(--e3);
  border-radius: var(--r-caixa);
  line-height: 1.4;
}
.citacao-chat--dele {
  justify-self: start;
  border: 1px solid var(--borda);
  border-end-start-radius: var(--r-mini);
  background: var(--surface);
}
.citacao-chat--dela {
  justify-self: end;
  border-end-end-radius: var(--r-mini);
  background: var(--accent-soft);
}
.citacao-chat__autor {
  display: block;
  margin-block-end: 0.15em;
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--suave);
}
.sinal__texto { max-inline-size: 60ch; color: var(--ink-2); }
.sinal--ativo { border-inline-start-color: var(--accent); }
.sinal--ativo .sinal__indice { color: var(--accent); }
@media (min-width: 64rem) {
  .historia__sinais .secao__cabeca { margin-block-end: 0; }
  .sinais { gap: 0; }
  .sinal { min-block-size: 64svh; align-content: center; }
}

.secao { padding-block: var(--e7); }
@media (min-width: 60rem) {
  .secao { padding-block: var(--e8); }
}
.secao__cabeca { max-inline-size: 44rem; margin-block-end: var(--e6); }
.secao__cabeca p { margin-block-start: var(--e3); color: var(--ink-2); }

/* Faixa de ajuda: destaque sem inverter o brilho no tema escuro.
   No tema cv, a faixa é o verde escuro da marca (#1E5E09). */
.ajuda {
  --foco: var(--banda-acento);
  padding-block: var(--e7);
  background: var(--banda);
  color: var(--banda-texto);
}
@media (min-width: 60rem) {
  .ajuda { padding-block: var(--e8); }
}
.ajuda h2, .ajuda h3 { color: var(--banda-texto); }
.ajuda a { color: var(--banda-acento); }
.ajuda__grade {
  display: grid;
  gap: var(--e6);
}
@media (min-width: 60rem) {
  .ajuda__grade {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas: "intro canais" "seguranca canais";
    align-items: start;
    gap: var(--e5) var(--e7);
  }
  .ajuda__intro { grid-area: intro; }
  .ajuda .canais { grid-area: canais; }
  .ajuda__seguranca { grid-area: seguranca; }
}
.ajuda__intro p { margin-block-start: var(--e3); color: var(--banda-suave); }
.ajuda__seguranca h3 {
  display: flex;
  align-items: center;
  gap: var(--e2);
  font-size: var(--t-lg);
  margin-block-end: var(--e3);
}
.ajuda__seguranca ul { padding-inline-start: 1.25em; color: var(--banda-suave); }
.ajuda__seguranca li + li { margin-block-start: var(--e1); }

/* Canais de ajuda: linha inteira clicável, número grande. */
.canais { list-style: none; display: grid; gap: var(--e2); }
.canal {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  align-items: center;
  gap: var(--e3);
  min-block-size: var(--alvo);
  padding: var(--e3) var(--e4);
  border-radius: var(--r-ctrl);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  text-decoration: none;
  transition: background-color var(--d-feedback) var(--ease-movimento), border-color var(--d-feedback) var(--ease-movimento);
}
.canal:active { background: var(--recess); }
@media (hover: hover) and (pointer: fine) {
  .canal:hover { background: var(--hover); }
}
.canal__numero {
  font-family: var(--f-display);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}
.canal__numero--icone { display: flex; }
.canal__numero--icone .icone { inline-size: 1.75rem; block-size: 1.75rem; }
.canal__corpo { display: grid; gap: var(--e0); }
.canal__nome { font-weight: 700; line-height: 1.3; }
.canal__detalhe { font-size: var(--t-sm); line-height: 1.45; color: var(--suave); }

.ajuda .canal { border-color: var(--banda-linha-forte); color: var(--banda-texto); }
/* Tema cv: pontos da marca na faixa verde e canais em superfície mais funda,
   que só aumenta o contraste do texto claro. */
:root[data-tema="cv"] .ajuda { --pontos-cor: var(--banda-linha); }
:root[data-tema="cv"] .ajuda .canal { background: rgb(6 9 6 / 0.28); }
:root[data-tema="cv"] .ajuda .sobretitulo { color: var(--banda-suave); }
:root[data-tema="cv"] .ajuda .sobretitulo__indice { color: var(--banda-acento); }
:root[data-tema="cv"] .ajuda .sobretitulo__indice::after { background: var(--banda-linha-forte); }
.ajuda .canal:active { background: var(--banda-hover); }
@media (hover: hover) and (pointer: fine) {
  .ajuda .canal:hover { background: var(--banda-hover); }
}
.ajuda .canal__detalhe { color: var(--banda-suave); }
.ajuda .canal--destaque { border-color: var(--banda-acento); border-width: 2px; }
.ajuda .canal--destaque .canal__numero { color: var(--banda-acento); }

.canais--compacta .canal {
  grid-template-columns: 3rem minmax(0, 1fr);
  padding: var(--e2) var(--e3);
  border-color: var(--borda);
}
.canais--compacta .canal__numero { font-size: var(--t-lg); }
.canais--compacta .canal__numero--icone .icone { inline-size: 1.25rem; block-size: 1.25rem; }
.canais--compacta .canal__nome { font-weight: 400; font-size: var(--t-sm); }

/* Casos reais, em linha do tempo. O trilho se preenche no acento conforme a
   lista passa pela tela (animação ligada à rolagem, sem JavaScript); sem o
   recurso ou com movimento reduzido, fica a linha fixa. */
.casos-secao { padding-block: var(--e7); background: var(--recess); }
@media (min-width: 60rem) {
  .casos-secao { padding-block: var(--e8); }
}
.aviso-conteudo {
  display: flex;
  align-items: flex-start;
  gap: var(--e2);
  max-inline-size: 60ch;
  font-size: var(--t-sm);
  color: var(--suave);
}
.secao__cabeca .aviso-conteudo { margin-block-start: var(--e4); color: var(--suave); }
.aviso-conteudo .icone { flex: none; margin-block-start: 0.15em; }
.casos {
  --trilho: 0.5rem;
  --recuo: 1.75rem;
  list-style: none;
  position: relative;
  display: grid;
  gap: var(--e6);
  padding-inline-start: var(--recuo);
}
@media (min-width: 48rem) {
  .casos { --recuo: 2.25rem; }
}
.casos::before,
.casos::after {
  content: "";
  position: absolute;
  inset-block: 0.75rem 0;
  inset-inline-start: calc(var(--trilho) - 1px);
  inline-size: 2px;
  border-radius: 1px;
}
.casos::before { background: var(--line); }
.casos::after { display: none; background: var(--accent); transform-origin: top; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .casos { view-timeline-name: --casos; }
    .casos::after {
      display: block;
      animation: trilho linear both;
      animation-timeline: --casos;
      animation-range: entry 25% cover 70%;
    }
  }
}
@keyframes trilho {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}
.caso { position: relative; display: grid; gap: var(--e3); }
.caso::before {
  content: "";
  position: absolute;
  inset-block-start: 0.5625rem;
  inset-inline-start: calc(var(--trilho) - var(--recuo) - 0.4375rem);
  z-index: 1;
  inline-size: 0.875rem;
  block-size: 0.875rem;
  border-radius: 50%;
  border: 2px solid var(--accent);
  background: var(--recess);
}
@media (min-width: 48rem) {
  .caso { grid-template-columns: 8.5rem minmax(0, 1fr); gap: var(--e5); }
}
.caso__tempo { display: grid; align-content: start; gap: var(--e1); }
.caso__ano {
  font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.caso__ate {
  display: inline-flex;
  align-items: center;
  gap: var(--e1);
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--ink-2);
}
.caso__ate .icone { inline-size: 1em; block-size: 1em; }
.caso__corpo {
  padding: var(--e4);
  border-radius: var(--r-caixa);
  border: 1px solid var(--borda);
  background: var(--surface);
}
@media (min-width: 48rem) {
  .caso__corpo { padding: var(--e5); }
}
@media (min-width: 60rem) {
  .caso__corpo { padding: var(--e6); }
}
.caso__nome { font-size: var(--t-h3); }
.caso__quem { margin-block-start: var(--e0); font-size: var(--t-sm); color: var(--suave); }
.caso__blocos { display: grid; gap: var(--e4); margin-block-start: var(--e4); }
@media (min-width: 60rem) {
  .caso__blocos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e5); align-items: start; }
}
.caso__bloco h4,
.caso__fontes h4 {
  margin-block-end: var(--e2);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--suave);
}
.caso__bloco p { color: var(--ink-2); }
.caso__bloco--lei {
  padding: var(--e3);
  border-radius: var(--r-ctrl);
  background: var(--accent-soft);
}
.caso__bloco--lei p + p { margin-block-start: var(--e2); }
.caso__lei { display: flex; align-items: flex-start; gap: var(--e2); }
.caso__lei .icone { flex: none; margin-block-start: 0.2em; color: var(--accent); }
.caso__lei strong { display: block; color: var(--ink); }
.caso__lei > span > span { display: block; font-size: var(--t-sm); color: var(--ink-2); }
@media (min-width: 48rem) {
  .caso__bloco--lei { padding: var(--e4); }
}
.caso__fontes {
  margin-block-start: var(--e4);
  padding-block-start: var(--e3);
  border-block-start: 1px solid var(--borda);
}
.caso__fontes ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--e1) var(--e4); }
.caso__fontes a {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  min-block-size: 1.5rem;
  font-size: var(--t-sm);
}
.caso__fontes .icone { inline-size: 0.9em; block-size: 0.9em; }

/* Temas do projeto: onze cartões; o de ajuda ocupa duas colunas e leva aos
   canais. Os outros não são links, por isso não têm hover. */
.temas { list-style: none; display: grid; gap: var(--e3); }
@media (min-width: 40rem) {
  .temas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tema--destaque { grid-column: 1 / -1; }
}
@media (min-width: 64rem) {
  .temas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tema--destaque { grid-column: span 2; }
}
.tema,
.tema__link {
  display: grid;
  align-content: start;
  gap: var(--e2);
  padding: var(--e5) var(--e4);
  border-radius: var(--r-caixa);
  border: 1px solid var(--borda);
  background: var(--surface);
}
.tema--destaque { padding: 0; border: 0; background: none; }
.tema__icone {
  display: grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  margin-block-end: var(--e2);
  border-radius: var(--r-ctrl);
  background: var(--accent-soft);
  color: var(--accent);
}
.tema__icone .icone { inline-size: 1.375rem; block-size: 1.375rem; }
.tema__titulo { font-size: var(--t-lg); font-weight: 700; line-height: 1.25; color: var(--ink); }
/* Celular: ícone ao lado do texto, para os onze cartões não virarem uma
   coluna de 2.400px. */
@media (max-width: 39.99rem) {
  .tema,
  .tema__link {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--e3);
    row-gap: var(--e0);
    padding: var(--e4);
  }
  .tema__link { padding-inline-end: calc(var(--e4) * 2 + 1.25rem); }
  .tema__icone { grid-row: span 2; margin-block-end: 0; }
  .tema__seta { inset-block-start: var(--e4); }
}
.tema__frase { color: var(--ink-2); }
.tema__link {
  position: relative;
  block-size: 100%;
  padding-inline-end: calc(var(--e4) * 2 + 1.25rem);
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
  text-decoration: none;
  transition:
    background-color var(--m-rapida) var(--ease-suave),
    transform var(--m-rapida) var(--ease-suave);
}
.tema__link .tema__titulo,
.tema__link .tema__frase { color: var(--on-accent); }
.tema__link .tema__icone {
  background: color-mix(in srgb, var(--on-accent) 16%, transparent);
  color: var(--on-accent);
}
.tema__seta {
  position: absolute;
  inset-block-start: var(--e5);
  inset-inline-end: var(--e4);
  inline-size: 1.25rem;
  block-size: 1.25rem;
  transition: transform var(--m-base) var(--ease-expo);
}
.tema__link:active { transform: translateY(1px); background: var(--accent-strong); }
.tema__link:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .tema__link:hover { background: var(--accent-strong); }
  .tema__link:hover .tema__seta { transform: translateX(3px); }
}

/* Sobre o projeto: ficha curta e o texto. */
.sobre__grade { display: grid; gap: var(--e5); }
@media (min-width: 60rem) {
  .sobre__grade { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--e8); align-items: start; }
}
.fichas { display: grid; gap: var(--e3); margin-block-start: var(--e5); }
.fichas > div { padding-block-start: var(--e3); border-block-start: 1px solid var(--borda); }
.fichas dt {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--suave);
}
.fichas dd { margin: var(--e0) 0 0; }
.sobre .prosa p { color: var(--ink-2); }

.chamada { padding-block: var(--e7); }
.chamada__caixa {
  display: grid;
  gap: var(--e5);
  padding: var(--e5) var(--e4);
  border-radius: var(--r-caixa);
  background: var(--accent-soft);
}
@media (min-width: 48rem) {
  .chamada__caixa {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding: var(--e6);
  }
}
.chamada__caixa p { margin-block-start: var(--e3); color: var(--ink-2); max-inline-size: 56ch; }

/* ==========================================================================
   Identidade Crimes Virtuais (tema cv)
   ========================================================================== */

/* ---------- Camada de tecnologia do tema cv ----------
   Grade técnica com brilho do neon atrás do herói e dos cabeçalhos de guia, e
   campo de pontos (a matriz da marca) nas faixas. Tudo em pseudoelemento, atrás
   do conteúdo, e sempre esmaecido por máscara onde há texto. */
.fundo-tecnico {
  position: relative;
  isolation: isolate;
}
.fundo-tecnico::before,
.fundo-tecnico::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.fundo-tecnico::before {
  background-image:
    linear-gradient(var(--grade) 1px, transparent 1px),
    linear-gradient(90deg, var(--grade) 1px, transparent 1px);
  background-size: 3rem 3rem;
  background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 72% 28%, #000 15%, transparent 72%);
  mask-image: radial-gradient(ellipse 85% 75% at 72% 28%, #000 15%, transparent 72%);
}
.fundo-tecnico::after {
  background: radial-gradient(42rem 28rem at 80% 18%, var(--brilho), transparent 70%);
}

.fundo-pontos {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.fundo-pontos::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(circle, var(--pontos-cor, var(--ponto)) 0 1.3px, transparent 1.8px);
  background-size: 1.125rem 1.125rem;
  -webkit-mask-image: linear-gradient(to left, #000, transparent 48%);
  mask-image: linear-gradient(to left, #000, transparent 48%);
}

/* Rótulo técnico acima do h2: índice em neon, traço fino e nome em mono. */
.sobretitulo {
  display: flex;
  align-items: center;
  gap: var(--e2);
  margin-block-end: var(--e3);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.sobretitulo__indice {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  color: var(--accent);
}
.sobretitulo__indice::after {
  content: "";
  inline-size: 1.5rem;
  block-size: 1px;
  background: var(--line-strong);
}

/* Selo de revisão do conteúdo: ponto neon que pulsa três vezes (4,8 s, abaixo dos 5 s da WCAG 2.2.2). */
.selo {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  margin-block-end: var(--e4);
  padding: var(--e1) var(--e3);
  border: 1px solid var(--line);
  border-radius: var(--r-ctrl);
  background: var(--vidro);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.selo__ponto {
  flex: none;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: 50%;
  background: var(--accent);
  animation: pulsar 1.6s var(--ease-entrada) 3;
}
@keyframes pulsar {
  from { box-shadow: 0 0 0 0 var(--brilho-forte); }
  to { box-shadow: 0 0 0 0.55rem transparent; }
}

/* ---------- Herói do início ---------- */
.cv-heroi { padding-block: var(--e6) var(--e5); }
.cv-heroi__grade {
  display: grid;
  gap: var(--e6);
  align-items: center;
}
@media (min-width: 60rem) {
  .cv-heroi { padding-block: var(--e7) var(--e6); }
  .cv-heroi__grade { grid-template-columns: minmax(0, 13fr) minmax(0, 10fr); gap: var(--e6); }
}
.cv-heroi h1 {
  font-size: var(--t-heroi);
  line-height: 0.98;
  letter-spacing: -0.035em;
  max-inline-size: 13ch;
}
.destaque { color: var(--accent); }
.cv-heroi__apoio {
  margin-block: var(--e4) var(--e5);
  max-inline-size: 40ch;
  font-size: var(--t-lg);
  line-height: 1.5;
  color: var(--ink-2);
}

/* Números do herói, contados do conteúdo no build. */
.numeros {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e4) 0;
  margin-block-start: var(--e6);
  padding-block-start: var(--e4);
  border-block-start: 1px solid var(--line);
}
@media (min-width: 48rem) {
  .numeros { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.numeros__item {
  display: grid;
  align-content: start;
  gap: var(--e2);
  padding-inline-end: var(--e3);
}
@media (min-width: 48rem) {
  .numeros__item + .numeros__item {
    padding-inline-start: var(--e4);
    border-inline-start: 1px solid var(--line);
  }
}
.numeros__valor {
  font-family: var(--f-display);
  font-size: var(--t-numero);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.numeros__rotulo {
  max-inline-size: 24ch;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  line-height: 1.45;
  color: var(--muted);
}

/* Arte de marca: a matriz de pontos das peças do projeto, com a assinatura.
   Sem JavaScript fica a grade apagada em CSS; com ele, o canvas acende os
   pontos (site/estatico/js/app.js, iniciarMatriz). */
/* Sem moldura: a matriz se dissolve na página pelas bordas (máscara no canvas),
   com o brilho do neon atrás. A assinatura fica por cima, com véu próprio. */
.matriz {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  aspect-ratio: 1;
  inline-size: 100%;
  max-inline-size: 34rem;
  justify-self: center;
  background-image: radial-gradient(circle at center, var(--ponto) 0 1.5px, transparent 2px);
  background-size: 1.125rem 1.125rem;
  background-position: center;
}
@media (min-width: 60rem) {
  .matriz { justify-self: end; }
}
.matriz::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 55% 40%, var(--brilho), transparent 62%);
  pointer-events: none;
}
.matriz__tela {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  z-index: 0;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 46%, #000 52%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 70% at 50% 46%, #000 52%, transparent 100%);
}
/* Véu por baixo da assinatura, para os pontos não competirem com o texto pequeno. */
.matriz::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, var(--ground) 0 26%, transparent 64%);
  pointer-events: none;
}
/* Com o canvas ativo, ele desenha todos os pontos; a grade de CSS sai para não dobrar. */
.matriz--viva { background-image: none; }
.matriz__assinatura {
  position: absolute;
  inset-inline: var(--e5);
  inset-block-end: var(--e5);
  z-index: 2;
  display: grid;
  gap: var(--e1);
  color: var(--ink);
  font-family: var(--f-display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.92;
}
.matriz__pre { font-size: clamp(1rem, 0.8rem + 0.9vw, 1.375rem); letter-spacing: 0; }
.matriz__nome { font-size: clamp(2.5rem, 1.6rem + 4vw, 4.25rem); letter-spacing: -0.01em; }
.matriz__inst {
  margin-block-start: var(--e2);
  font-family: var(--f-ui);
  font-size: var(--t-sm);
  text-transform: none;
  letter-spacing: 0.01em;
  line-height: 1.2;
  color: var(--ink-2);
}

/* ---------- Seção padrão do tema cv ---------- */
.cv-secao { padding-block: var(--e7); }
@media (min-width: 60rem) {
  .cv-secao { padding-block: var(--e8); }
}
.cv-secao + .cv-secao { border-block-start: 1px solid var(--line); }
.cv-secao__cabeca { max-inline-size: 44rem; margin-block-end: var(--e6); }
.cv-secao__cabeca p { margin-block-start: var(--e3); color: var(--ink-2); }
.cv-secao__mais { margin-block-start: var(--e4); }

/* Brilho que segue o ponteiro (data-luz). O script grava --luz-x e --luz-y;
   só existe com mouse ou caneta, e só enfeita: o estado de hover não depende dele. */
[data-luz] {
  --luz-x: 50%;
  --luz-y: 0%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
@media (hover: hover) and (pointer: fine) {
  [data-luz]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(20rem circle at var(--luz-x) var(--luz-y), var(--brilho), transparent 62%);
    opacity: 0;
    transition: opacity var(--d-revela) var(--ease-entrada);
  }
  [data-luz]:hover::before { opacity: 1; }
}

/* ---------- Triagem por situação ---------- */
.triagem {
  display: grid;
  gap: var(--e3);
}
@media (min-width: 40rem) {
  .triagem { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  .triagem { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* O cartão é um link: o texto em neon "Ver o que fazer" e a seta identificam a
   ação, então a borda pode ser a linha fina da superfície (WCAG 1.4.11 cobre o
   que é necessário para identificar o componente, e aqui é o texto). */
.triagem__item {
  display: flex;
  flex-direction: column;
  gap: var(--e1);
  block-size: 100%;
  padding: var(--e4);
  border: 1px solid var(--line);
  border-radius: var(--r-ctrl);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  transition:
    border-color var(--d-feedback) var(--ease-movimento),
    transform var(--d-feedback) var(--ease-movimento);
}
.triagem__item:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) {
  .triagem__item:hover { border-color: var(--line-strong); }
  .triagem__item:hover .triagem__seta { transform: translateX(3px); }
}
.triagem__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-end: var(--e4);
}
.triagem__icone { inline-size: 1.75rem; block-size: 1.75rem; color: var(--accent); }
.triagem__indice {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  color: var(--muted);
}
.triagem__titulo {
  font-family: var(--f-display);
  font-size: var(--t-lg);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.triagem__detalhe { font-size: var(--t-sm); line-height: 1.5; color: var(--muted); }
.triagem__acao {
  display: inline-flex;
  align-items: center;
  gap: var(--e1);
  margin-block-start: auto;
  padding-block-start: var(--e4);
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--accent);
}
.triagem__seta {
  inline-size: 1.125rem;
  block-size: 1.125rem;
  transition: transform var(--d-feedback) var(--ease-entrada);
}

/* ---------- O que diz a lei: bento com a pena em destaque ---------- */
.leis {
  display: grid;
  gap: var(--e3);
}
@media (min-width: 60rem) {
  .leis {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-rows: auto auto;
  }
  .lei--destaque { grid-row: span 2; }
}
.lei {
  display: flex;
  flex-direction: column;
  gap: var(--e3);
  padding: var(--e5) var(--e4);
  border: 1px solid var(--line);
  border-radius: var(--r-caixa);
  background: var(--surface);
}
@media (min-width: 48rem) {
  .lei { padding: var(--e5); }
}
/* Destaque: o verde escuro da marca, com o campo de pontos só no canto sem texto. */
.lei--destaque { background-color: var(--accent-soft); border-color: var(--line-strong); }
.lei--destaque::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(circle, var(--ponto) 0 1.3px, transparent 1.8px);
  background-size: 1.125rem 1.125rem;
  -webkit-mask-image: radial-gradient(ellipse 55% 45% at 100% 0%, #000, transparent);
  mask-image: radial-gradient(ellipse 55% 45% at 100% 0%, #000, transparent);
}
.lei__artigo {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.lei__numero {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e1) var(--e3);
  margin-block: var(--e1) var(--e2);
}
.lei__valor {
  font-family: var(--f-display);
  font-size: clamp(2.75rem, 2rem + 2.6vw, 4rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.lei--destaque .lei__valor { font-size: clamp(3.5rem, 1.8rem + 6.4vw, 7.5rem); }
/* No destaque, a pena vira o pé do cartão, como num cartaz: a frase fica no topo
   e o número ancora embaixo. O número é aria-hidden, então a ordem visual não
   muda a ordem de leitura. */
@media (min-width: 60rem) {
  .lei--destaque .lei__frase { order: 1; }
  .lei--destaque .lei__numero { order: 2; margin-block: auto var(--e2); padding-block-start: var(--e5); }
  .lei--destaque .lei__rodape { order: 3; margin-block-start: 0; }
}
.lei__unidade {
  font-family: var(--f-mono);
  font-size: var(--t-sm);
  color: var(--ink-2);
}
.lei__frase {
  font-family: var(--f-display);
  font-size: var(--t-h3);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.lei--destaque .lei__frase { font-size: var(--t-h2); line-height: 1.08; }
.lei__rodape {
  margin-block-start: auto;
  padding-block-start: var(--e3);
  border-block-start: 1px solid var(--line);
}
.lei__pena { font-weight: 700; color: var(--accent); }
.lei__pena + .citacao { margin-block-start: var(--e0); }

/* ---------- Cuidados (prévia no início e página de proteção) ---------- */
.cuidados-previa {
  display: grid;
  gap: var(--e5);
}
@media (min-width: 60rem) {
  .cuidados-previa { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--e7); align-items: start; }
}
.cuidados-previa__texto p { margin-block: var(--e3) var(--e4); color: var(--ink-2); max-inline-size: 42ch; }
@media (min-width: 60rem) {
  .cuidados-previa__texto {
    position: sticky;
    inset-block-start: calc(var(--altura-topo) + env(safe-area-inset-top, 0px) + var(--e6));
  }
}

/* Lista numerada: a ordem é a de prioridade; o número vem do <ol> para a leitura em voz. */
.lista-numerada { display: grid; border-block-start: 1px solid var(--line); }
.lista-numerada__item {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: var(--e3);
  padding-block: var(--e4);
  border-block-end: 1px solid var(--line);
}
.lista-numerada__indice {
  padding-block-start: 0.3em;
  font-family: var(--f-mono);
  font-size: var(--t-sm);
  line-height: 1;
  color: var(--accent);
}
.lista-numerada__titulo { font-weight: 700; line-height: 1.35; }
.lista-numerada__texto { margin-block-start: var(--e1); color: var(--ink-2); }

.lista-check {
  display: grid;
  gap: var(--e4);
}
.lista-check__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--e3);
  align-items: start;
}
.lista-check__icone { color: var(--accent); inline-size: 1.5rem; block-size: 1.5rem; margin-block-start: 0.05em; }
.lista-check__titulo { font-weight: 700; line-height: 1.35; }
.lista-check__texto { margin-block-start: var(--e0); color: var(--ink-2); }

/* ---------- Chamada do projeto no início ---------- */
.cv-projeto {
  display: grid;
  gap: var(--e5);
  padding: var(--e5) var(--e4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-caixa);
  background: var(--surface);
}
@media (min-width: 48rem) {
  .cv-projeto {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding: var(--e6);
  }
}
.cv-projeto p { margin-block-start: var(--e3); color: var(--ink-2); max-inline-size: 58ch; }

/* ---------- Guias (crimes, proteção, denúncia) ---------- */
.guia-cabeca {
  padding-block: var(--e6) var(--e5);
  border-block-end: 1px solid var(--line);
}
@media (min-width: 60rem) {
  .guia-cabeca { padding-block: var(--e7) var(--e6); }
}
.guia-cabeca h1 {
  max-inline-size: 20ch;
  font-size: clamp(2.375rem, 1.35rem + 3.4vw, 3.75rem);
  line-height: 1;
  letter-spacing: -0.035em;
}
.guia-cabeca__intro {
  margin-block-start: var(--e4);
  max-inline-size: 60ch;
  font-size: var(--t-lg);
  line-height: 1.5;
  color: var(--ink-2);
}
/* Números do guia em fichas de mono, contados do conteúdo. */
.guia-cabeca__numeros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  margin-block-start: var(--e5);
}
.guia-cabeca__numeros li {
  display: inline-flex;
  align-items: baseline;
  gap: var(--e1);
  padding: var(--e1) var(--e3);
  border: 1px solid var(--line);
  border-radius: var(--r-ctrl);
  background: var(--vidro, var(--surface));
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.guia-cabeca__valor {
  font-family: var(--f-display);
  font-size: var(--t-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.guia-cabeca .aviso { margin-block-start: var(--e5); max-inline-size: 60ch; }
/* Tela larga: o aviso do guia sobe para a coluna da direita, alinhado ao pé do bloco. */
@media (min-width: 64rem) {
  .guia-cabeca > .largura {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--e7);
    align-items: start;
  }
  .guia-cabeca > .largura > * { grid-column: 1; }
  .guia-cabeca > .largura > .selo { justify-self: start; }
  .guia-cabeca > .largura > .aviso {
    grid-column: 2;
    grid-row: 1 / span 4;
    align-self: end;
    margin-block-start: 0;
  }
}

.guia {
  display: grid;
  gap: var(--e6);
  padding-block: var(--e6) var(--e7);
}
@media (min-width: 64rem) {
  .guia {
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: var(--e7);
    align-items: start;
  }
}
.guia__conteudo { min-inline-size: 0; max-inline-size: 46rem; }

/* Sumário da página: âncoras para cada grupo, fixo na tela larga. */
.sumario__titulo {
  margin-block-end: var(--e2);
  font-family: var(--f-ui);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0;
  color: var(--muted);
}
.sumario__lista {
  display: grid;
  border-inline-start: 1px solid var(--line);
}
.sumario__link {
  position: relative;
  display: flex;
  align-items: center;
  min-block-size: 2.25rem;
  padding: var(--e1) var(--e3);
  color: var(--ink-2);
  font-size: var(--t-sm);
  line-height: 1.35;
  text-decoration: none;
  transition: color var(--d-feedback) var(--ease-movimento);
}
.sumario__link::before {
  content: "";
  position: absolute;
  inset-block: var(--e1);
  inset-inline-start: -1px;
  inline-size: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transition: transform var(--d-feedback) var(--ease-entrada);
}
.sumario__link[aria-current]::before { transform: scaleY(1); }
.sumario__link:has(.sumario__conta) { justify-content: space-between; gap: var(--e2); }
.sumario__conta {
  flex: none;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 400;
  color: var(--muted);
}
.sumario__link[aria-current] .sumario__conta { color: var(--accent); }
.sumario__link[aria-current] { color: var(--ink); font-weight: 700; }
.sumario__link:active { color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .sumario__link:hover { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; }
}
@media (min-width: 64rem) {
  .sumario {
    position: sticky;
    inset-block-start: calc(var(--altura-topo) + env(safe-area-inset-top, 0px) + var(--e5));
    max-block-size: calc(100svh - var(--altura-topo) - var(--e6));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

.grupo + .grupo { margin-block-start: var(--e7); }
.grupo__cabeca { display: grid; gap: var(--e3); margin-block-end: var(--e4); }
.grupo__cabeca h2 { display: flex; align-items: center; gap: var(--e2); }
.grupo__icone { color: var(--accent); inline-size: 0.9em; block-size: 0.9em; }
.grupo__cabeca p { color: var(--ink-2); }

/* Um crime: nome, como acontece, ficha legal e o caminho de ação. */
.crime {
  padding-block: var(--e5);
  border-block-start: 1px solid var(--line);
}
.crime h3 { margin-block-end: var(--e2); }
.crime > p { color: var(--ink-2); }
.crime > p + p { margin-block-start: var(--e2); }
.exemplo {
  display: flex;
  gap: var(--e2);
  align-items: flex-start;
  margin-block: var(--e3);
  padding: var(--e3) var(--e4);
  border-radius: var(--r-caixa);
  background: var(--recess);
  color: var(--ink);
  font-size: var(--t-sm);
  line-height: 1.5;
}
.exemplo .icone { color: var(--muted); margin-block-start: 0.1em; }
.ficha {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e0) var(--e4);
  margin-block-start: var(--e3);
  padding-block: var(--e3);
  border-block: 1px solid var(--line);
}
@media (min-width: 40rem) {
  .ficha { grid-template-columns: 7.5rem minmax(0, 1fr); }
}
.ficha dt {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  line-height: 1.9;
  color: var(--muted);
}
.ficha dd { color: var(--ink); }
.ficha dd + dt { margin-block-start: var(--e2); }
@media (min-width: 40rem) {
  .ficha dd + dt { margin-block-start: 0; }
  .ficha dd:not(:last-child) { margin-block-end: var(--e2); }
}
.ficha__pena strong { color: var(--accent); }
.ficha__pena span { color: var(--ink-2); }
.ficha .ficha__base { font-family: var(--f-mono); font-size: var(--t-xs); line-height: 1.9; color: var(--ink-2); }
.crime__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--e5);
  margin-block-start: var(--e2);
}
.link-seta--externo { font-weight: 400; color: var(--ink-2); }
.situacao__crimes { margin-block-start: var(--e1); padding-inline-start: 1.25em; }
.situacao__lei {
  margin-block-start: var(--e5);
  padding: var(--e3) var(--e4);
  border: 1px solid var(--line);
  border-radius: var(--r-caixa);
}
.situacao__lei .citacao { margin-block-start: 0; }
.grupo .passos { margin-block-start: var(--e2); }

/* Tema cv: cada crime é um cartão, e a pena é a linha que salta no cartão. */
:root[data-tema="cv"] .crime {
  padding: var(--e5) var(--e4);
  border: 1px solid var(--line);
  border-radius: var(--r-caixa);
  background: var(--surface);
}
:root[data-tema="cv"] .crime + .crime { margin-block-start: var(--e3); }
@media (min-width: 48rem) {
  :root[data-tema="cv"] .crime { padding: var(--e5); }
}
:root[data-tema="cv"] .ficha { border-block-end: 0; padding-block-end: 0; }
:root[data-tema="cv"] .ficha__pena {
  padding: var(--e2) var(--e3);
  border-inline-start: 2px solid var(--accent);
  border-radius: var(--r-mini);
  background: var(--accent-soft);
}
@media (min-width: 40rem) {
  :root[data-tema="cv"] .ficha dt:first-child { padding-block-start: var(--e2); }
}

/* Tema cv: cuidados e provas em cartões. */
:root[data-tema="cv"] .cuidados,
:root[data-tema="cv"] .provas { gap: var(--e3); }
:root[data-tema="cv"] .cuidados .lista-check__item,
:root[data-tema="cv"] .provas .lista-check__item {
  padding: var(--e4);
  border: 1px solid var(--line);
  border-radius: var(--r-caixa);
  background: var(--surface);
}

/* Passos numerados: a ordem importa, o número vem da lista. */
.passos {
  counter-reset: passo;
  display: grid;
  gap: var(--e5);
}
.passo {
  counter-increment: passo;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--e3);
}
@media (min-width: 48rem) {
  .passo { grid-template-columns: 3.5rem minmax(0, 1fr); gap: var(--e4); }
}
.passo::before {
  content: counter(passo);
  font-family: var(--f-display);
  font-size: var(--t-h2);
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
  padding-block-start: 0.08em;
}
/* Tema cv: linha do tempo. O número vira uma caixa em mono com borda neon, e um
   fio liga um passo ao seguinte; a ordem continua vindo do <ol>. */
:root[data-tema="cv"] .passo { position: relative; }
:root[data-tema="cv"] .passo::before {
  content: counter(passo, decimal-leading-zero);
  display: grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  padding: 0;
  border: 1px solid var(--accent);
  border-radius: var(--r-ctrl);
  background: var(--ground);
  font-family: var(--f-mono);
  font-size: var(--t-sm);
  font-weight: 400;
  color: var(--accent);
}
:root[data-tema="cv"] .passo:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-block: 2.5rem calc(var(--e5) * -1);
  inset-inline-start: calc(1.25rem - 0.5px);
  inline-size: 1px;
  background: var(--line-strong);
}
:root[data-tema="cv"] .passo h3 { padding-block-start: 0.35rem; }
.passo h3 { margin-block-end: var(--e2); }
.passo p { color: var(--ink-2); }
.passo p + p, .passo ul { margin-block-start: var(--e2); }
.passo ul { padding-inline-start: 1.25em; color: var(--ink-2); }
.passo li + li { margin-block-start: var(--e1); }

/* ---------- Página de proteção ---------- */
.cuidados {
  display: grid;
  gap: var(--e5) var(--e6);
}
@media (min-width: 48rem) {
  .cuidados { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   Jogo Golpe ou não? e impacto em números (tema cv), desde 20/10/2026.
   DESIGN.md, 2.11. Uma mensagem por vez: o cartão responde ao arraste e aos
   botões; depois da escolha os trechos dos sinais acendem em sequência e a
   resposta abre ao lado (tela larga) ou abaixo (celular).
   Cores do resultado: perigo (golpe, erro) e sucesso (confiável, acerto), os
   pares já medidos do tema cv (DESIGN.md, 1.3).
   ========================================================================== */

/* ---------- Cabeçalho do jogo ---------- */
.jogo-regras {
  display: grid;
  gap: var(--e2);
  margin-block-start: var(--e4);
  max-inline-size: 52ch;
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--muted);
}
.jogo-regras li { display: flex; align-items: flex-start; gap: var(--e2); }
.jogo-regras .icone { flex: none; inline-size: 1.25rem; block-size: 1.25rem; margin-block-start: 0.05em; color: var(--accent); }
@media (min-width: 64rem) {
  .guia-cabeca > .largura > .jogo-regras {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: end;
    margin-block-start: 0;
  }
}

/* ---------- Palco ---------- */
.jogo-secao { padding-block: var(--e5) var(--e7); }
.jogo {
  display: grid;
  gap: var(--e4);
}
.cenas { display: grid; gap: var(--e6); }

/* Placar: posição, trilha das dez mensagens (vira o histórico de acertos) e acertos. */
.placar-jogo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--e3);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.placar-jogo__posicao [data-placar-atual] { color: var(--ink); }
.placar-jogo__trilha {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 3px;
}
.placar-jogo__passo {
  block-size: 4px;
  background: var(--line);
  transform-origin: left center;
  transition: background-color var(--m-base) var(--ease-suave);
}
.placar-jogo__passo--atual { background: var(--line-strong); }
.placar-jogo__passo--certo { background: var(--ok-ink); animation: passo-enche var(--m-media) var(--ease-expo); }
.placar-jogo__passo--errado { background: var(--danger); animation: passo-enche var(--m-media) var(--ease-expo); }
@keyframes passo-enche { from { transform: scaleX(0); } }
.placar-jogo__acertos [data-placar-acertos] {
  display: inline-block;
  min-inline-size: 1.2ch;
  font-family: var(--f-display);
  font-size: var(--t-lg);
  font-weight: 700;
  letter-spacing: 0;
  text-align: end;
  color: var(--accent);
}
.placar-jogo__acertos--sobe [data-placar-acertos] { animation: acerto-sobe var(--m-base) var(--ease-expo); }
@keyframes acerto-sobe {
  from { transform: translateY(0.6em); opacity: 0; }
}

/* ---------- Aparelho: a mensagem da cena ----------
   Aplicativo genérico, sem marca de terceiro (DESIGN.md, Ativos de terceiro). */
.aparelho {
  position: relative;
  display: grid;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-caixa);
  background: var(--surface);
  box-shadow: 0 1.75rem 3.5rem -2rem rgb(0 0 0 / 0.9);
}
.aparelho__canal {
  display: flex;
  align-items: center;
  gap: var(--e1);
  padding: var(--e2) var(--e3);
  border-block-end: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.aparelho__canal .icone { inline-size: 1rem; block-size: 1rem; color: var(--accent); }
.aparelho__numero { margin-inline-start: auto; }
.aparelho__contexto {
  padding: var(--e3) var(--e3) 0;
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--ink-2);
}
.aparelho__remetente {
  display: flex;
  align-items: center;
  gap: var(--e2);
  padding: var(--e3);
  border-block-end: 1px solid var(--line);
}
.aparelho__avatar {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--recess);
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--ink-2);
}
.aparelho__avatar .icone { inline-size: 1.125rem; block-size: 1.125rem; color: var(--accent); }
.aparelho__nome { display: block; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.aparelho__detalhe { display: block; font-size: var(--t-xs); line-height: 1.4; color: var(--muted); }
.aparelho__tela {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: end;
  gap: var(--e3);
  min-block-size: 13.5rem;
  padding: var(--e4) var(--e3);
  background: var(--ground);
}
.aparelho__tela::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(circle, var(--grade) 0 1px, transparent 1.5px);
  background-size: 0.875rem 0.875rem;
}
.aparelho__mensagens { display: grid; gap: var(--e2); }
.balao {
  justify-self: start;
  max-inline-size: 88%;
  padding: var(--e2) var(--e3);
  border: 1px solid var(--line);
  border-radius: var(--r-ctrl);
  background: var(--recess);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.balao--voce {
  justify-self: end;
  border-color: rgb(59 255 18 / 0.28);
  background: var(--accent-soft);
}
.balao__hora {
  display: block;
  margin-block-start: var(--e0);
  font-family: var(--f-mono);
  font-size: 0.75rem;
  line-height: 1;
  text-align: end;
  color: var(--muted);
}
/* Ligação: a fala do outro lado, em transcrição. */
.aparelho--ligacao .balao { border-inline-start: 3px solid var(--line-strong); }
.aparelho__aviso {
  padding: var(--e2) var(--e3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-ctrl);
  background: var(--surface);
  font-size: var(--t-sm);
  line-height: 1.45;
  box-shadow: 0 0.75rem 1.5rem -1rem rgb(0 0 0 / 0.9);
}
.aparelho__aviso-origem {
  display: flex;
  align-items: center;
  gap: var(--e1);
  margin-block-end: var(--e0);
  font-family: var(--f-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.aparelho__aviso-origem .icone { inline-size: 0.875rem; block-size: 0.875rem; }

/* Carimbo: aparece com o arraste (o script grava --arraste, de -1 a 1) e fica
   depois da escolha, mostrando o lado escolhido. Decorativo: quem diz a
   escolha para a leitura em voz é a região viva do jogo. */
.carimbo {
  position: absolute;
  inset-block-start: 5.5rem;
  padding: var(--e0) var(--e3);
  border: 3px solid currentColor;
  border-radius: var(--r-ctrl);
  background: rgb(6 9 6 / 0.88);
  font-family: var(--f-display);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  pointer-events: none;
  opacity: 0;
}
.carimbo--esquerda { inset-inline-end: var(--e4); color: var(--danger); rotate: 10deg; opacity: clamp(0, calc(var(--arraste, 0) * -1.6), 1); }
.carimbo--direita { inset-inline-start: var(--e4); color: var(--ok-ink); rotate: -10deg; opacity: clamp(0, calc(var(--arraste, 0) * 1.6), 1); }
/* Depois da escolha o carimbo bate (240 ms), fica um instante e sai, para não
   cobrir a mensagem enquanto a pessoa lê os sinais. No arraste ele já está à
   vista e só fica e sai. */
.cena--escolheu-esquerda .carimbo--esquerda,
.cena--escolheu-direita .carimbo--direita {
  opacity: 0;
  animation: carimbo-bate 1.6s var(--ease-expo) both;
}
.cena--por-arraste.cena--escolheu-esquerda .carimbo--esquerda,
.cena--por-arraste.cena--escolheu-direita .carimbo--direita { animation-name: carimbo-fica; }
@keyframes carimbo-bate {
  0% { opacity: 0; scale: 1.35; }
  15%, 70% { opacity: 1; scale: 1; }
  100% { opacity: 0; scale: 1; }
}
@keyframes carimbo-fica {
  0%, 70% { opacity: 1; }
  100% { opacity: 0; }
}

/* Trechos dos sinais: texto comum até a resposta; depois, um a um, o fundo
   varre o trecho da esquerda para a direita e o número do sinal aparece. */
.trecho {
  --cor-trecho: var(--danger);
  --cor-trecho-fundo: rgb(243 138 127 / 0.2);
  --ordem: 0;
  position: relative;
  border-radius: 1px;
  background-image: linear-gradient(var(--cor-trecho-fundo), var(--cor-trecho-fundo));
  background-repeat: no-repeat;
  background-size: 0% 100%;
}
[data-lado="direita"] .trecho {
  --cor-trecho: var(--ok-ink);
  --cor-trecho-fundo: rgb(149 210 164 / 0.2);
}
.trecho[data-sinal="2"] { --ordem: 1; }
.trecho[data-sinal="3"] { --ordem: 2; }
.trecho[data-sinal="4"] { --ordem: 3; }
.trecho__num {
  position: absolute;
  inset-block-start: -0.95em;
  inset-inline-start: -0.35em;
  display: grid;
  place-items: center;
  inline-size: 1rem;
  block-size: 1rem;
  border-radius: 50%;
  background: var(--cor-trecho);
  box-shadow: 0 0 0 2px var(--recess);
  font-family: var(--f-mono);
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ground);
  opacity: 0;
  scale: 0.4;
}
.cena--revelada .trecho,
.cena:has(> .resposta-cena[open]) .trecho {
  background-size: 100% 100%;
  box-shadow: inset 0 -2px 0 var(--cor-trecho);
  transition:
    background-size var(--m-media) var(--ease-expo) calc(120ms + var(--ordem) * 140ms),
    box-shadow var(--m-base) var(--ease-suave) calc(120ms + var(--ordem) * 140ms);
}
.cena--revelada .trecho__num,
.cena:has(> .resposta-cena[open]) .trecho__num {
  opacity: 1;
  scale: 1;
  transition:
    opacity var(--m-rapida) var(--ease-suave) calc(260ms + var(--ordem) * 140ms),
    scale var(--m-base) var(--ease-expo) calc(260ms + var(--ordem) * 140ms);
}

/* ---------- Escolha ---------- */
.cena__palco { display: grid; gap: var(--e3); }
.cena__escolha {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e3);
}
.escolha {
  min-block-size: 3.5rem;
  padding-inline: var(--e3);
  background: transparent;
}
.escolha--esquerda { color: var(--danger-ink); border-color: var(--danger); }
.escolha--direita { color: var(--ok-ink); border-color: var(--ok-ink); }
.escolha--esquerda:active, .escolha--esquerda.escolha--apertada { background: var(--danger-soft); }
.escolha--direita:active, .escolha--direita.escolha--apertada { background: var(--ok-soft); }
@media (hover: hover) and (pointer: fine) {
  .escolha--esquerda:hover { background: var(--danger-soft); }
  .escolha--direita:hover { background: var(--ok-soft); }
  :root[data-tema="cv"] .escolha--esquerda:hover .botao__icone { transform: translateX(-3px); }
}
.cena__dica {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e1);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  color: var(--muted);
}
.cena__dica .icone { inline-size: 1rem; block-size: 1rem; }

/* ---------- Resposta da cena ----------
   Sem JavaScript: details com "Ver a resposta". Com ele, o resumo some e o
   script abre o details depois da escolha. */
.resposta-cena {
  border: 1px solid var(--line);
  border-radius: var(--r-caixa);
  background: var(--surface);
}
.resposta-cena__abrir {
  display: flex;
  align-items: center;
  gap: var(--e2);
  min-block-size: var(--alvo);
  padding: var(--e2) var(--e4);
  font-weight: 700;
  color: var(--accent);
  cursor: pointer;
  list-style: none;
}
.resposta-cena__abrir::-webkit-details-marker { display: none; }
.resposta-cena__abrir .icone { inline-size: 1.25rem; block-size: 1.25rem; }
.resposta-cena[open] > .resposta-cena__abrir { border-block-end: 1px solid var(--line); }
.resposta-cena__corpo {
  display: grid;
  gap: var(--e3);
  padding: var(--e4);
}
.resposta-cena__resultado {
  display: flex;
  align-items: center;
  gap: var(--e2);
  font-family: var(--f-display);
  font-size: var(--t-h3);
  font-weight: 700;
  line-height: 1.1;
}
.resposta-cena__resultado .icone { inline-size: 1.5rem; block-size: 1.5rem; }
.cena--acertou .resposta-cena__resultado { color: var(--ok-ink); }
.cena--errou .resposta-cena__resultado { color: var(--danger-ink); }
.resposta-cena__veredito {
  display: inline-flex;
  align-items: center;
  gap: var(--e1);
  justify-self: start;
  padding: var(--e0) var(--e2);
  border: 1px solid currentColor;
  border-radius: var(--r-ctrl);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.resposta-cena__veredito .icone { inline-size: 1rem; block-size: 1rem; }
[data-lado="esquerda"] .resposta-cena__veredito { color: var(--danger-ink); }
[data-lado="direita"] .resposta-cena__veredito { color: var(--ok-ink); }
.resposta-cena__nome {
  font-family: var(--f-display);
  font-size: var(--t-h3);
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.resposta-cena__nome:focus { outline: none; }
.resposta-cena__nome:focus-visible { outline: 2px solid var(--foco); outline-offset: 4px; }
.resposta-cena__estatistica { display: grid; gap: var(--e1); font-size: var(--t-sm); color: var(--ink-2); }
.resposta-cena__barra {
  display: block;
  block-size: 4px;
  background: var(--line);
  overflow: hidden;
}
.resposta-cena__barra > span {
  display: block;
  block-size: 100%;
  background: var(--accent);
  transform-origin: left center;
  transform: scaleX(var(--parte, 0));
  transition: transform var(--m-lenta) var(--ease-expo) 300ms;
}
.sinais-cena { display: grid; gap: var(--e2); }
.sinais-cena__item { display: flex; align-items: flex-start; gap: var(--e2); line-height: 1.5; }
.sinais-cena__num {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  margin-block-start: 0.05em;
  border-radius: 50%;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--ground);
}
[data-lado="esquerda"] .sinais-cena__num { background: var(--danger); }
[data-lado="direita"] .sinais-cena__num { background: var(--ok-ink); }
.resposta-cena__bloco {
  display: grid;
  gap: var(--e1);
  padding-block-start: var(--e3);
  border-block-start: 1px solid var(--line);
  line-height: 1.5;
  color: var(--ink-2);
}
.resposta-cena__bloco strong { color: var(--ink); }
.resposta-cena__bloco .citacao { margin-block-start: 0; }
.resposta-cena__bloco .link-seta { justify-self: start; }
.resposta-cena__rotulo {
  display: flex;
  align-items: center;
  gap: var(--e1);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.resposta-cena__rotulo .icone { inline-size: 1rem; block-size: 1rem; color: var(--accent); }
.resposta-cena__situacao { justify-self: start; }
.resposta-cena__seguir { padding-block-start: var(--e2); }
.resposta-cena__seguir .botao { inline-size: 100%; }
@media (min-width: 40rem) {
  .resposta-cena__seguir .botao { inline-size: auto; }
}

/* ---------- Jogo ativo (com JavaScript) ----------
   Uma cena por vez. A cena atual fica centrada; depois da escolha, na tela
   larga, o cartão desliza para a esquerda (FLIP no script) e a resposta
   ocupa a direita. */
.jogo--ativo .cenas { gap: 0; }
.jogo--ativo .resposta-cena__abrir { display: none; }
.jogo--ativo .resposta-cena { border-block-start-width: 3px; }
.jogo--ativo .cena--acertou .resposta-cena { border-block-start-color: var(--ok-ink); }
.jogo--ativo .cena--errou .resposta-cena { border-block-start-color: var(--danger); }
.jogo--ativo .resposta-cena:not([open]) { display: none; }
.jogo--ativo .cena {
  display: grid;
  gap: var(--e4);
  justify-items: center;
}
.jogo--ativo .cena__palco {
  position: relative;
  isolation: isolate;
  inline-size: 100%;
  max-inline-size: 28rem;
}
.jogo--ativo .resposta-cena { inline-size: 100%; max-inline-size: 40rem; }
/* Pilha: as próximas mensagens aparecem por baixo da atual. */
.jogo--ativo .cena__cartao { position: relative; }
.jogo--ativo .cena:not(:last-child) .cena__cartao::before,
.jogo--ativo .cena:not(:last-child) .cena__cartao::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 1px solid var(--line);
  border-radius: var(--r-caixa);
  background: var(--surface);
  pointer-events: none;
  transition: opacity var(--m-base) var(--ease-suave);
}
.jogo--ativo .cena:not(:last-child) .cena__cartao::before { transform: translateY(0.75rem) scale(0.955); opacity: 0.7; }
.jogo--ativo .cena:nth-last-child(n+3) .cena__cartao::after { transform: translateY(1.5rem) scale(0.91); opacity: 0.35; }
.jogo--ativo .cena:last-child .cena__cartao::after { display: none; }
.jogo--ativo .cena--revelada .cena__cartao::before,
.jogo--ativo .cena--revelada .cena__cartao::after { opacity: 0; }
.jogo--ativo .cena:not(.cena--revelada) .cena__cartao {
  touch-action: pan-y;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}
.jogo--ativo .cena__cartao > * {
  transition: transform var(--m-media) var(--ease-expo), border-color var(--m-base) var(--ease-suave);
  will-change: transform;
}
.jogo--ativo .cena__cartao--arrastando { cursor: grabbing; }
.jogo--ativo .cena__cartao--arrastando > * { transition: border-color var(--m-base) var(--ease-suave); }
.jogo--ativo .cena--acertou .cena__cartao > * { border-color: var(--ok-ink); }
.jogo--ativo .cena--errou .cena__cartao > * { border-color: var(--danger); }
/* Toque decidido: o cartão inclina para o lado escolhido e volta. */
.cena--escolheu-esquerda .cena__cartao > * { animation: decide-esquerda var(--m-media) var(--ease-expo); }
.cena--escolheu-direita .cena__cartao > * { animation: decide-direita var(--m-media) var(--ease-expo); }
.cena--por-arraste .cena__cartao > * { animation: none; }
@keyframes decide-esquerda { 35% { transform: translateX(-1.25rem) rotate(-2deg); } }
@keyframes decide-direita { 35% { transform: translateX(1.25rem) rotate(2deg); } }

@media (min-width: 64rem) {
  .jogo--ativo .cena--revelada {
    grid-template-columns: minmax(0, 28rem) minmax(0, 1fr);
    align-items: start;
    justify-items: stretch;
    column-gap: var(--e6);
  }
  .jogo--ativo .cena--revelada .resposta-cena { max-inline-size: none; }
}

/* Entrada da resposta: um bloco depois do outro, junto com os trechos. */
.cena--revelada .resposta-cena__corpo > * { animation: subir var(--m-media) var(--ease-expo) both; }
.cena--revelada .resposta-cena__corpo > :nth-child(2) { animation-delay: 60ms; }
.cena--revelada .resposta-cena__corpo > :nth-child(3) { animation-delay: 120ms; }
.cena--revelada .resposta-cena__corpo > :nth-child(4) { animation-delay: 180ms; }
.cena--revelada .resposta-cena__corpo > :nth-child(5) { animation-delay: 240ms; }
.cena--revelada .resposta-cena__corpo > :nth-child(6) { animation-delay: 300ms; }
.cena--revelada .resposta-cena__corpo > :nth-child(7) { animation-delay: 360ms; }
.cena--revelada .resposta-cena__corpo > :nth-child(n+8) { animation-delay: 420ms; }

/* Troca de mensagem: a atual sai para o lado da resposta certa, a próxima sobe da pilha. */
.cena--saindo { pointer-events: none; }
.cena--saindo .cena__palco,
.cena--saindo .resposta-cena { animation: cena-sai var(--m-base) var(--ease-saida) forwards; }
.cena--saindo[data-lado="direita"] .cena__palco,
.cena--saindo[data-lado="direita"] .resposta-cena { animation-name: cena-sai-direita; }
@keyframes cena-sai { to { opacity: 0; transform: translateX(-2.5rem) rotate(-1.5deg); } }
@keyframes cena-sai-direita { to { opacity: 0; transform: translateX(2.5rem) rotate(1.5deg); } }
.cena--entrando .cena__cartao > * { animation: cena-entra var(--m-media) var(--ease-expo) both; }
.cena--entrando .cena__escolha { animation: subir var(--m-media) var(--ease-expo) 120ms both; }
.cena--entrando .balao,
.cena--entrando .aparelho__aviso { animation: subir var(--m-media) var(--ease-expo) both; animation-delay: calc(180ms + var(--i, 0) * 70ms); }
@keyframes cena-entra {
  from { opacity: 0.4; transform: translateY(0.75rem) scale(0.955); }
}

/* ---------- Resultado do jogo ---------- */
.resultado-jogo {
  display: grid;
  gap: var(--e4);
  padding: var(--e5) var(--e4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-caixa);
  background: var(--surface);
}
@media (min-width: 48rem) {
  .resultado-jogo { padding: var(--e6); }
}
.resultado-jogo:focus { outline: none; }
.resultado-jogo .sobretitulo { margin-block-end: 0; }
.resultado-jogo__placar {
  display: flex;
  align-items: baseline;
  gap: var(--e3);
  font-family: var(--f-display);
  font-weight: 700;
  line-height: 0.85;
}
.resultado-jogo__valor {
  font-size: clamp(5rem, 3.4rem + 7vw, 9rem);
  letter-spacing: -0.04em;
  color: var(--accent);
  text-shadow: 0 0 2.5rem rgb(59 255 18 / 0.35);
}
.resultado-jogo__total { font-size: var(--t-h2); color: var(--muted); }
.resultado-jogo__titulo { font-family: var(--f-display); font-size: var(--t-h1); line-height: 1.04; letter-spacing: -0.025em; }
.resultado-jogo__texto { max-inline-size: 56ch; color: var(--ink-2); }
.resultado-jogo__mapa {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--e1);
}
@media (min-width: 40rem) {
  .resultado-jogo__mapa { grid-template-columns: repeat(10, minmax(0, 1fr)); }
}
.resultado-jogo__mapa li {
  display: grid;
  place-items: center;
  gap: var(--e0);
  padding-block: var(--e2);
  border: 1px solid var(--line);
  border-radius: var(--r-ctrl);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  animation: subir var(--m-media) var(--ease-expo) both;
  animation-delay: calc(300ms + var(--i, 0) * 45ms);
}
.resultado-jogo__mapa .icone { inline-size: 1.125rem; block-size: 1.125rem; }
.resultado-jogo__mapa .certo { border-color: var(--ok-ink); background: var(--ok-soft); color: var(--ok-ink); }
.resultado-jogo__mapa .errado { border-color: var(--danger); background: var(--danger-soft); color: var(--danger-ink); }
.resultado-jogo__erros { display: grid; gap: var(--e2); }
.resultado-jogo__erros h3 { font-size: var(--t-lg); }
.resultado-jogo__erros ul { display: grid; gap: var(--e1); color: var(--ink-2); }
.resultado-jogo__erros strong { color: var(--ink); }
.resultado-jogo__mais { display: grid; gap: 0; padding-block-start: var(--e3); border-block-start: 1px solid var(--line); }
/* A entrada roda quando o resultado deixa de estar escondido. */
.resultado-jogo > .sobretitulo,
.resultado-jogo > .resultado-jogo__placar,
.resultado-jogo > .resultado-jogo__titulo,
.resultado-jogo > .resultado-jogo__texto { animation: subir var(--m-lenta) var(--ease-expo) both; }
.resultado-jogo > .resultado-jogo__titulo { animation-delay: 120ms; }
.resultado-jogo > .resultado-jogo__texto { animation-delay: 180ms; }

.aprendi {
  display: grid;
  gap: var(--e1);
  padding: var(--e4);
  border: 1px solid var(--line);
  border-radius: var(--r-ctrl);
  background: var(--accent-soft);
}
.aprendi__pergunta { font-weight: 700; }
.aprendi__obrigado { color: var(--ink-2); }
.aprendi__obrigado:focus { outline: none; }

.compartilhar {
  display: grid;
  gap: var(--e4);
  align-items: start;
  padding: var(--e4);
  border: 1px solid var(--line);
  border-radius: var(--r-ctrl);
  background: var(--recess);
}
@media (min-width: 40rem) {
  .compartilhar { grid-template-columns: 10rem minmax(0, 1fr); }
}
.compartilhar__previa {
  inline-size: 100%;
  max-inline-size: 12rem;
  block-size: auto;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-ctrl);
  animation: subir var(--m-lenta) var(--ease-expo) both;
}
.compartilhar__acoes { display: grid; gap: var(--e3); justify-items: start; color: var(--ink-2); }
.compartilhar__aviso { min-block-size: 1.5em; font-size: var(--t-sm); color: var(--ok-ink); }

/* Chamada para o outro jogo, no fim da partida. */
.proximo-jogo {
  display: grid;
  gap: var(--e1);
  justify-items: start;
  padding: var(--e4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-ctrl);
  background: linear-gradient(180deg, var(--accent-soft), var(--surface));
}
.proximo-jogo__sobre {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.proximo-jogo__titulo { font-family: var(--f-display); font-size: var(--t-h2); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
.proximo-jogo__texto { max-inline-size: 52ch; color: var(--ink-2); }
.proximo-jogo .botao { margin-block-start: var(--e2); }

/* ---------- Ficha da situação (Isso é crime?) ----------
   A situação como um caso para julgar: o texto grande sobre o fundo de
   pontos do aparelho do Golpe ou não?, o detalhe que decide marcado em
   silêncio até a resposta (sem número, porque é um só) e a pergunta no pé. */
.quiz-ficha {
  position: relative;
  display: grid;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-caixa);
  background: var(--surface);
  box-shadow: 0 1.75rem 3.5rem -2rem rgb(0 0 0 / 0.9);
}
.quiz-ficha__topo {
  display: flex;
  align-items: center;
  gap: var(--e1);
  padding: var(--e2) var(--e3);
  border-block-end: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.quiz-ficha__topo .icone { inline-size: 1rem; block-size: 1rem; color: var(--accent); }
.quiz-ficha__numero { margin-inline-start: auto; }
.quiz-ficha__texto {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: center;
  min-block-size: 12rem;
  padding: var(--e5) var(--e4);
  background: var(--ground);
  font-size: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);
  line-height: 1.55;
  text-wrap: pretty;
}
.quiz-ficha__texto::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(circle, var(--grade) 0 1px, transparent 1.5px);
  background-size: 0.875rem 0.875rem;
}
.quiz-ficha__pergunta {
  padding: var(--e3) var(--e4);
  border-block-start: 1px solid var(--line);
  font-family: var(--f-display);
  font-size: var(--t-h3);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--accent);
}
.quiz-ficha .carimbo { inset-block-start: 4.25rem; }
.cena--entrando .quiz-ficha__texto { animation: subir var(--m-media) var(--ease-expo) 180ms both; }
.resposta-cena__detalhe { font-size: var(--t-sm); color: var(--muted); }

/* ---------- Chamada do jogo na página inicial ---------- */
.jogo-chamada {
  display: grid;
  gap: var(--e6);
  align-items: center;
}
@media (min-width: 60rem) {
  .jogo-chamada { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--e7); }
}
.jogo-chamada__texto p { margin-block: var(--e3) var(--e4); max-inline-size: 46ch; color: var(--ink-2); }
.jogo-chamada__fatos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2) var(--e4);
  margin-block-end: var(--e5);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.jogo-chamada__fatos li { display: inline-flex; align-items: center; gap: var(--e1); }
.jogo-chamada__fatos .icone { inline-size: 1rem; block-size: 1rem; color: var(--accent); }
.jogo-chamada__previa {
  position: relative;
  justify-self: center;
  inline-size: 100%;
  max-inline-size: 26rem;
}
.jogo-chamada__previa .aparelho {
  rotate: 1.5deg;
  transition: rotate var(--m-media) var(--ease-expo), border-color var(--m-base) var(--ease-suave);
}
/* No celular a prévia mostra só o começo da conversa e esmaece: o resto está no jogo. */
@media (max-width: 59.99rem) {
  .jogo-chamada__previa .aparelho {
    max-block-size: 23rem;
    -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent);
    mask-image: linear-gradient(to bottom, #000 62%, transparent);
  }
  .jogo-chamada__previa .aparelho__tela { align-content: start; }
}
@media (hover: hover) and (pointer: fine) {
  .jogo-chamada:hover .jogo-chamada__previa .aparelho { rotate: 0deg; border-color: var(--accent); }
}
.jogo-chamada__legenda {
  margin-block-start: var(--e3);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--muted);
}

/* ---------- Você sabia? (carrossel do início, DESIGN.md 2.13) ----------
   Uma lista que rola na horizontal com encaixe por cartão: sem JavaScript ela
   já funciona com o dedo, o trackpad e o Tab. O script acrescenta os botões,
   a posição, a trilha e o botão de imagem. Nada gira sozinho. No celular o
   trilho vai até a borda da tela, para o cartão seguinte aparecer cortado e
   dizer que há mais. */
.sabia-cabeca {
  display: grid;
  gap: var(--e4);
  align-items: end;
  margin-block-end: var(--e5);
}
.sabia-cabeca .cv-secao__cabeca { margin-block-end: 0; }
@media (min-width: 48rem) {
  .sabia-cabeca { grid-template-columns: minmax(0, 1fr) auto; }
}
.sabia-controles { display: flex; align-items: center; gap: var(--e2); }
.sabia-controles__seta {
  display: grid;
  place-items: center;
  inline-size: var(--alvo);
  block-size: var(--alvo);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-ctrl);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition:
    border-color var(--m-rapida) var(--ease-suave),
    opacity var(--m-rapida) var(--ease-suave),
    transform var(--m-rapida) var(--ease-suave);
}
.sabia-controles__seta .icone { inline-size: 1.25rem; block-size: 1.25rem; }
.sabia-controles__seta:not([aria-disabled="true"]):active { transform: scale(0.96); }
.sabia-controles__seta[aria-disabled="true"] { opacity: 0.45; cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .sabia-controles__seta:not([aria-disabled="true"]):hover { border-color: var(--accent); }
}
.sabia-controles__posicao {
  min-inline-size: 4.5ch;
  font-family: var(--f-mono);
  font-size: var(--t-sm);
  text-align: center;
  color: var(--ink-2);
}
.sabia {
  position: relative;
  display: flex;
  gap: var(--e3);
  margin-inline: calc(var(--gut) * -1);
  padding: var(--e1) var(--gut) var(--e3);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gut);
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.sabia-cartao {
  flex: 0 0 min(19.5rem, 84%);
  display: flex;
  scroll-snap-align: start;
  border: 1px solid var(--line);
  border-radius: var(--r-caixa);
  background: var(--surface);
  transition: border-color var(--m-base) var(--ease-suave), transform var(--m-base) var(--ease-expo);
}
@media (min-width: 48rem) {
  .sabia-cartao { flex-basis: calc((100% - var(--e3)) / 2); }
}
@media (min-width: 64rem) {
  .sabia-cartao { flex-basis: calc((100% - var(--e3) * 2) / 3); }
}
.sabia-cartao:focus-within { border-color: var(--line-strong); }
@media (hover: hover) and (pointer: fine) {
  .sabia-cartao:hover { border-color: var(--line-strong); transform: translateY(-2px); }
}
.sabia-cartao__corpo {
  display: flex;
  flex-direction: column;
  gap: var(--e3);
  inline-size: 100%;
  padding: var(--e4);
}
.sabia-cartao__topo {
  display: flex;
  align-items: center;
  gap: var(--e2);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.sabia-cartao__num { color: var(--accent); }
.sabia-cartao__titulo {
  font-family: var(--f-display);
  font-size: var(--t-h3);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.sabia-cartao__frase { line-height: 1.55; color: var(--ink-2); }
.sabia-cartao__rodape {
  display: grid;
  gap: var(--e0);
  margin-block-start: auto;
  padding-block-start: var(--e3);
  border-block-start: 1px solid var(--line);
}
.sabia-cartao__pena { font-weight: 700; color: var(--accent); }
.sabia-cartao__base { margin-block-start: 0; }
.sabia-cartao__fonte { font-size: var(--t-sm); color: var(--muted); }
.sabia-cartao__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e1) var(--e3);
}
.sabia-cartao__imagem {
  display: inline-flex;
  align-items: center;
  gap: var(--e1);
  min-block-size: var(--alvo);
  padding-inline: var(--e3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-ctrl);
  background: transparent;
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  transition: border-color var(--m-rapida) var(--ease-suave), transform var(--m-rapida) var(--ease-suave);
}
.sabia-cartao__imagem .icone { inline-size: 1.125rem; block-size: 1.125rem; color: var(--accent); }
.sabia-cartao__imagem:active { transform: translateY(1px); }
.sabia-cartao__imagem[aria-disabled="true"] { cursor: progress; opacity: 0.7; }
@media (hover: hover) and (pointer: fine) {
  .sabia-cartao__imagem:hover { border-color: var(--accent); }
}
/* Trilha: um traço por cartão, aceso nos que estão à vista. Decorativa; a
   posição para a leitura em voz é a dos próprios botões e da lista. */
.sabia-trilha {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 3px;
  max-inline-size: 16rem;
  margin-block-start: var(--e2);
}
.sabia-trilha li {
  block-size: 3px;
  background: var(--line);
  transition: background-color var(--m-base) var(--ease-suave);
}
.sabia-trilha .sabia-trilha__passo--visto { background: var(--accent); }
.sabia-secao .compartilhar { margin-block-start: var(--e4); }
.sabia-quiz {
  display: grid;
  gap: var(--e3);
  align-items: center;
  margin-block-start: var(--e5);
  padding-block-start: var(--e5);
  border-block-start: 1px solid var(--line);
}
.sabia-quiz p { max-inline-size: 52ch; color: var(--ink-2); }
.sabia-quiz strong { color: var(--ink); }
@media (min-width: 48rem) {
  .sabia-quiz { grid-template-columns: minmax(0, 1fr) auto; }
}

/* Faixa de impacto na chamada do projeto: só aparece com números publicados. */
.faixa-impacto {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3) var(--e5);
  margin-block: var(--e4) var(--e2);
  font-size: var(--t-sm);
  line-height: 1.35;
  color: var(--ink-2);
}
.faixa-impacto li { max-inline-size: 13rem; }
.faixa-impacto__valor {
  display: block;
  margin-block-end: var(--e0);
  font-family: var(--f-display);
  font-size: var(--t-h2);
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
}

/* ---------- Impacto em números ---------- */
.impacto-grade {
  display: grid;
  gap: var(--e3);
}
@media (min-width: 40rem) {
  .impacto-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .impacto-cartao { min-block-size: 12rem; }
  .impacto-cartao--destaque { min-block-size: 0; }
}
@media (min-width: 64rem) {
  .impacto-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.impacto-cartao {
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  padding: var(--e4);
  border: 1px solid var(--line);
  border-radius: var(--r-ctrl);
  background: var(--surface);
}
.impacto-cartao--destaque {
  grid-column: 1 / -1;
  min-block-size: 0;
  border-color: var(--line-strong);
  background: linear-gradient(180deg, var(--accent-soft), var(--surface));
}
@media (min-width: 64rem) {
  .impacto-cartao--destaque { padding: var(--e5) var(--e6); }
}
.impacto-cartao__valor {
  display: flex;
  align-items: center;
  min-block-size: 3rem;
  font-family: var(--f-display);
  font-size: var(--t-numero);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.impacto-cartao--destaque .impacto-cartao__valor {
  min-block-size: 5rem;
  font-size: clamp(3.5rem, 2rem + 5vw, 6rem);
  color: var(--accent);
}
.impacto-cartao__contando {
  display: inline-flex;
  align-items: center;
  padding: var(--e0) var(--e2);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-ctrl);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.impacto-cartao__rotulo { font-weight: 700; line-height: 1.35; }
.impacto-cartao--destaque .impacto-cartao__rotulo { font-size: var(--t-lg); max-inline-size: 32ch; }
.impacto-cartao__como { margin-block-start: auto; font-size: var(--t-sm); line-height: 1.5; color: var(--muted); }
.impacto-aviso {
  display: flex;
  align-items: flex-start;
  gap: var(--e2);
  margin-block-start: var(--e4);
  max-inline-size: 64ch;
  font-size: var(--t-sm);
  color: var(--muted);
}
.impacto-aviso .icone { flex: none; inline-size: 1.125rem; block-size: 1.125rem; margin-block-start: 0.1em; }
.enganam { display: grid; gap: var(--e2); counter-reset: enganam; }
.enganam__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: baseline;
  gap: var(--e1) var(--e3);
  padding: var(--e3) var(--e4);
  border: 1px solid var(--line);
  border-radius: var(--r-ctrl);
  background: var(--surface);
}
/* No celular o percentual vai para baixo do nome, para o nome nunca espremer. */
@media (min-width: 40rem) {
  .enganam__item { grid-template-columns: minmax(0, 1fr) auto; }
}
.enganam__nome { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e1) var(--e2); font-weight: 700; }
.enganam__tipo {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.enganam__tipo--esquerda { color: var(--danger-ink); }
.enganam__tipo--direita { color: var(--ok-ink); }
.enganam__acerto { font-family: var(--f-mono); font-size: var(--t-sm); color: var(--ink-2); }
.enganam__barra { grid-column: 1 / -1; display: block; block-size: 4px; background: var(--line); overflow: hidden; }
.enganam__barra > span {
  display: block;
  block-size: 100%;
  background: var(--danger);
  transform-origin: left center;
  transform: scaleX(var(--parte, 0));
  transition: transform var(--m-lenta) var(--ease-expo) calc(var(--i, 0) * 60ms);
}
.enganam__vazio { max-inline-size: 60ch; color: var(--ink-2); }
.impacto-como__lista, .alertas-como { display: grid; gap: var(--e4); }
@media (min-width: 60rem) {
  .impacto-como__lista, .alertas-como { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--e6); }
}
:is(.impacto-como__lista, .alertas-como) li { display: flex; align-items: flex-start; gap: var(--e3); line-height: 1.55; color: var(--ink-2); }
:is(.impacto-como__lista, .alertas-como) strong { color: var(--ink); }
:is(.impacto-como__lista, .alertas-como) .icone { flex: none; inline-size: 1.5rem; block-size: 1.5rem; margin-block-start: 0.1em; color: var(--accent); }
.impacto-como__mais { margin-block-start: var(--e5); color: var(--ink-2); }

/* ---------- Alerta de golpe (/alertas/ e aviso no início) ----------
   Severidade de atenção, em amarelo (--warn-ink), nunca em neon: o amarelo
   marca o ícone, o rótulo e o fio da borda; o texto fica na tinta. Sem
   movimento próprio: os cartões entram pela entrada dos blocos (data-revelar). */
/* O respiro de cima é o pé do herói, logo acima. */
.alerta-inicio__caixa {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--e1) var(--e3);
  align-items: start;
  padding: var(--e4);
  border: 1px solid var(--line-strong);
  border-inline-start: 3px solid var(--warn-ink);
  border-radius: var(--r-caixa);
  background: var(--surface);
}
.alerta-inicio__icone { inline-size: 1.5rem; block-size: 1.5rem; margin-block-start: 0.05em; color: var(--warn-ink); }
.alerta-inicio__rotulo {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--warn-ink);
}
.alerta-inicio__titulo {
  margin-block-start: var(--e1);
  font-family: var(--f-display);
  font-size: var(--t-h3);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.alerta-inicio__quando { margin-block-start: var(--e1); font-size: var(--t-sm); color: var(--muted); }
.alerta-inicio__link { grid-column: 2; justify-self: start; }
@media (min-width: 48rem) {
  .alerta-inicio__caixa {
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: var(--e4);
    align-items: center;
    padding: var(--e4) var(--e5);
  }
  .alerta-inicio__icone { align-self: start; }
  .alerta-inicio__link { grid-column: 3; }
}

.alertas { display: grid; gap: var(--e5); max-inline-size: 52rem; }
.alerta {
  padding: var(--e5) var(--e4);
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--warn-ink);
  border-radius: var(--r-caixa);
  background: var(--surface);
}
@media (min-width: 48rem) {
  .alerta { padding: var(--e6); }
}
.alerta__cabeca { display: flex; align-items: flex-start; gap: var(--e2); }
.alerta__icone { inline-size: 1.25rem; block-size: 1.25rem; color: var(--warn-ink); }
.alerta__quando {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.alerta__titulo { margin-block-start: var(--e3); max-inline-size: 30ch; }
.alerta__texto { margin-block-start: var(--e3); max-inline-size: 62ch; color: var(--ink-2); }
.alerta__grade { display: grid; gap: var(--e3); margin-block-start: var(--e5); }
@media (min-width: 48rem) {
  .alerta__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.alerta__bloco {
  padding: var(--e4);
  border: 1px solid var(--line);
  border-radius: var(--r-ctrl);
  background: var(--recess);
}
.alerta__bloco h3 {
  margin-block-end: var(--e3);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.alerta__bloco .lista-check { gap: var(--e3); }
.alerta__bloco .lista-check__icone { color: var(--warn-ink); }
.alerta__bloco .lista-check__texto { margin-block-start: 0; }
.alerta__cuidado { font-weight: 700; line-height: 1.35; }
.alerta__cuidado + p { margin-block-start: var(--e1); color: var(--ink-2); }
.alerta__bloco--cuidado .link-seta { margin-block-start: var(--e2); }
.alerta__fonte { margin-block-start: var(--e4); font-size: var(--t-sm); color: var(--muted); }

/* ---------- Questionário ---------- */
/* A barra de comandos fica presa embaixo: o foco nunca pode ficar atrás dela. */
html:has(.pagina-questionario .comandos:not([hidden])) {
  scroll-padding-block-end: calc(var(--alvo) + var(--e3) * 2 + env(safe-area-inset-bottom, 0px) + var(--e3));
}

.questionario {
  display: grid;
  gap: var(--e6);
  padding-block: var(--e5) var(--e7);
}
/* A tela nova entra deslocada 1,5rem para a direita (tela-frente): no
   celular, isso deixava a página 7 px mais larga que a tela. clip corta sem
   criar rolagem e sem soltar a barra de comandos (sticky); o
   main tem a largura toda, então contorno de foco junto da margem não some. */
.pagina-questionario main { overflow-x: clip; }
@media (min-width: 64rem) {
  .questionario {
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: var(--e7);
    align-items: start;
    padding-block-start: var(--e6);
  }
}
.questionario__principal { min-inline-size: 0; max-inline-size: 44rem; }

.questionario__cabeca h1 { margin-block-end: var(--e4); }
.questionario__cabeca h1:focus { outline: none; }
.questionario__cabeca h1:focus-visible { outline: 2px solid var(--foco); outline-offset: 4px; }
/* Modo foco (pedido do Pedro, 27/09/2026): a tela do questionário mostra só
   o formulário. Menu, coluna de ajuda e, no rodapé, o texto do projeto e os
   links do site saem; ficam a marca, a saída rápida e o botão Ajuda (canais
   num diálogo). O rodapé continua só com os canais de ajuda, abaixo da dobra
   (o main ocupa a altura da tela), porque em todas as páginas a ajuda fecha a
   página, e a WCAG 3.2.6 pede a mesma ordem. No resultado, a página volta
   inteira. Sem JavaScript, sem-js.css devolve tudo, porque aí não há
   formulário para responder. */
.pagina-questionario:not(.questionario-concluido) .nav-site,
.pagina-questionario:not(.questionario-concluido) .apoio,
.pagina-questionario:not(.questionario-concluido) .rodape__projeto,
.pagina-questionario:not(.questionario-concluido) .rodape__nav { display: none; }
.pagina-questionario:not(.questionario-concluido) .rodape__ajuda { grid-column: 1 / -1; }
/* Respondendo (o app.js põe a classe no body da primeira pergunta à revisão),
   o topo fica só com a ajuda e a saída rápida: a marca sai, e o botão Ajuda
   entra no lugar dela, à esquerda (pedido do Pedro, 01/10/2026: nada além do
   necessário na tela). Na abertura e no resultado, a marca volta. */
.topo__ajuda { display: none; }
.pagina-questionario.questionario-respondendo:not(.questionario-concluido) .topo .marca { display: none; }
.pagina-questionario.questionario-respondendo:not(.questionario-concluido) .topo__ajuda {
  display: inline-flex;
  align-items: center;
  gap: var(--e1);
  min-block-size: 2.75rem;
  padding-inline: var(--e3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-ctrl);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--m-rapida) var(--ease-suave);
}
.topo__ajuda:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
.topo__ajuda:active { background: var(--recess); }
@media (hover: hover) and (pointer: fine) {
  .topo__ajuda:hover { background: var(--hover); }
}
.pagina-questionario:not(.questionario-concluido) main {
  min-block-size: calc(100svh - var(--altura-topo) - env(safe-area-inset-top, 0px));
}
@media (min-width: 64rem) {
  /* Sem a coluna de ajuda, o formulário ocupa as duas trilhas e fica no centro,
     na própria largura máxima (44rem); o rodapé acompanha. Grade e base do
     rodapé também são .largura, que já centraliza. */
  .pagina-questionario:not(.questionario-concluido) .questionario__principal {
    grid-column: 1 / -1;
    justify-self: center;
    inline-size: 100%;
  }
  .pagina-questionario:not(.questionario-concluido) .rodape__grade,
  .pagina-questionario:not(.questionario-concluido) .rodape__base { max-inline-size: 44rem; }
}

/* Respondendo: o título da página sai da tela e fica só para o leitor de tela;
   a pergunta é o centro, e a margem de cima, que era do título, encolhe. */
.questionario.respondendo { padding-block-start: var(--e2); }
.respondendo .questionario__cabeca .rotulo { display: none; }
.respondendo .questionario__cabeca h1:not(:focus) {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.abertura__apoio { font-size: var(--t-lg); line-height: 1.5; color: var(--ink-2); max-inline-size: 40ch; }
.fatos {
  display: grid;
  gap: var(--e3);
  margin-block: var(--e5);
}
.fatos li { display: flex; gap: var(--e3); align-items: flex-start; }
.fatos__icone { color: var(--accent); margin-block-start: 0.15em; }
.abertura__publico { font-size: var(--t-sm); color: var(--suave); margin-block-end: var(--e4); }
.abertura .aviso { margin-block-end: var(--e4); }
.abertura .aviso--retomada { margin-block: 0 var(--e5); }
.abertura [data-inicio] { margin-block-start: var(--e5); }
/* Celular: título, promessa e o botão Começar na primeira tela (medido em 360
   por 640 e 390 por 664); antes, o botão ficava a 1.300 px do topo. */
@media (max-width: 30rem) {
  .questionario__cabeca h1 { font-size: 1.75rem; line-height: 1.15; }
  .abertura__apoio { font-size: var(--t-md); }
  .abertura [data-inicio] { margin-block-start: var(--e4); }
}

/* Uma pergunta por tela. A tela nova entra do lado para onde a pessoa vai
   (240 ms, só deslocamento curto e opacidade); a anterior sai na hora, para a
   resposta nunca esperar o fim de uma animação. */
.tela { padding-block-start: var(--e4); }
@keyframes tela-frente {
  from { opacity: 0; transform: translateX(1.5rem); }
}
@keyframes tela-tras {
  from { opacity: 0; transform: translateX(-1.5rem); }
}
.tela--frente { animation: tela-frente var(--m-base) var(--ease-expo) both; }
.tela--tras { animation: tela-tras var(--m-base) var(--ease-expo) both; }

/* Marco: frase de transição acima da primeira pergunta de um bloco (o mito
   ou verdade) e no alto da revisão. Sem número e sem "Parte x de y": nada na
   tela conta perguntas (DESIGN.md 2.5). */
.tela__marco {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--e1) var(--e2);
  margin-block-end: var(--e4);
  font-size: var(--t-sm);
  font-weight: 700;
  line-height: 1.45;
  color: var(--accent);
}
.tela__marco-icone { flex: none; inline-size: 1.125rem; block-size: 1.125rem; margin-block-start: 0.1em; }
.tela__marco-icone + span { flex: 1 1 12rem; }
.tela__marco-rotulo { font-weight: 700; color: var(--accent); }
.tela__marco-rotulo + span { font-weight: 400; color: var(--ink-2); }

.pergunta {
  border: 0;
  margin: 0;
  padding: 0;
  min-inline-size: 0;
}
.pergunta__legenda {
  float: left;
  inline-size: 100%;
  padding: 0;
}
.pergunta__legenda + * { clear: both; }
.pergunta__enunciado {
  margin: 0;
  font-size: var(--t-h2);
  line-height: 1.2;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.pergunta__enunciado:focus { outline: none; }
/* Cena: a situação do dia a dia, em cartão de citação, antes da frase. */
.pergunta__cena {
  display: grid;
  margin-block-end: var(--e4);
  padding: var(--e3) var(--e4);
  border-inline-start: 3px solid var(--accent);
  border-radius: 0 var(--r-caixa) var(--r-caixa) 0;
  background: var(--recess);
  color: var(--ink-2);
  font-size: var(--t-md);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
  text-wrap: pretty;
}
.pergunta__frase { display: block; }

/* Leitura (app.js, lerTela; DESIGN.md 2.6). Na primeira vez que a pergunta
   aparece, a cena chega digitada: o texto verdadeiro fica transparente e uma
   cópia por cima, na mesma célula da grade (mesma largura, mesmas quebras de
   linha), recebe os caracteres um a um, com o cursor no fim. Frase, instrução
   e régua esperam invisíveis, com o espaço reservado (nada pula), e entram em
   sequência quando a digitação acaba ou quando a pessoa toca ou tecla. */
.pergunta__cena-texto,
.digitacao { grid-area: 1 / 1; }
.digitacao { pointer-events: none; }
.tela--digitando .pergunta__cena-texto { color: transparent; }
.digitacao__resto { color: transparent; }
/* Cursor sem largura: não muda nenhuma quebra de linha. */
.digitacao__cursor { position: relative; }
.digitacao__cursor::after {
  content: "";
  position: absolute;
  inset-block: 0.12em;
  inset-inline-start: 0.04em;
  inline-size: 2px;
  border-radius: 1px;
  background: var(--accent);
}
.pergunta__frase,
.pergunta__instrucao,
.tela .opcoes {
  transition:
    opacity var(--m-media) var(--ease-suave),
    transform var(--m-media) var(--ease-expo);
}
.pergunta__instrucao { transition-delay: 90ms; }
.tela .opcoes { transition-delay: 180ms; }
.tela--lendo .pergunta__frase,
.tela--lendo .pergunta__instrucao,
.tela--lendo .opcoes {
  opacity: 0;
  transform: translateY(0.5rem);
  pointer-events: none;
  transition: none;
}
.pergunta__enunciado:focus-visible { outline: 2px solid var(--foco); outline-offset: 4px; }
/* Instrução em texto de apoio: a frase é o centro, e as opções sobem para a
   primeira dobra (em 1440 por 900, as cinco da escala cabem acima da barra). */
.pergunta__instrucao {
  margin-block: var(--e2) var(--e4);
  max-inline-size: 60ch;
  color: var(--ink-2);
  font-size: var(--t-sm);
}

/* Opções em cartão: o cartão inteiro é o alvo (56px), com o controle nativo
   restilizado à esquerda e, com mouse, a letra do atalho à direita. */
.opcoes { display: grid; gap: var(--e2); }
.opcoes__separador {
  margin-block: var(--e1) 0;
  padding-inline-start: var(--e3);
  font-size: var(--t-sm);
  color: var(--suave);
}
.opcao { position: relative; }
.opcao__controle {
  position: absolute;
  inset-inline-start: var(--e4);
  inset-block-start: 50%;
  translate: 0 -50%;
  margin: 0;
  inline-size: 1.375rem;
  block-size: 1.375rem;
  appearance: none;
  display: grid;
  place-content: center;
  background: var(--surface);
  border: 2px solid var(--line-strong);
  cursor: pointer;
  transition: border-color var(--m-rapida) var(--ease-suave), background-color var(--m-rapida) var(--ease-suave);
}
.opcao__controle--radio { border-radius: 50%; }
.opcao__controle--checkbox { border-radius: var(--r-mini); }
.opcao__controle::before {
  content: "";
  inline-size: 0.625rem;
  block-size: 0.625rem;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity var(--m-rapida) var(--ease-suave), transform var(--m-base) var(--ease-expo);
}
.opcao__controle--radio::before { border-radius: 50%; background: var(--accent); }
.opcao__controle--checkbox::before {
  inline-size: 0.75rem;
  block-size: 0.75rem;
  background: var(--on-accent);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
.opcao__controle:checked { border-color: var(--accent); }
.opcao__controle--checkbox:checked { background: var(--accent); }
.opcao__controle:checked::before { opacity: 1; transform: scale(1); }
.opcao__controle:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }

.opcao__rotulo {
  display: flex;
  align-items: center;
  gap: var(--e3);
  min-block-size: 3.5rem;
  padding: var(--e2) var(--e3) var(--e2) calc(var(--e4) * 2 + 1.375rem);
  border-radius: var(--r-ctrl);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--borda);
  line-height: 1.35;
  cursor: pointer;
  transition:
    background-color var(--m-rapida) var(--ease-suave),
    box-shadow var(--m-rapida) var(--ease-suave),
    transform var(--m-rapida) var(--ease-suave);
}
.opcao__texto { flex: 1 1 auto; }
.opcao__tecla { display: none; }
.opcao__controle:checked + .opcao__rotulo {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 2px var(--accent);
}
.opcao:active .opcao__rotulo { transform: scale(0.99); }
.opcao--separada .opcao__rotulo { background: transparent; color: var(--ink-2); }
.opcoes--conhecimento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.opcoes--conhecimento .opcoes__separador,
.opcoes--conhecimento .opcao--separada { grid-column: 1 / -1; }
.opcoes--conhecimento .opcao:not(.opcao--separada) .opcao__rotulo {
  min-block-size: 4.5rem;
  font-size: var(--t-lg);
  font-weight: 700;
}
/* Depois da revelação: a certa em verde e a escolhida errada em vermelho, os
   dois com ícone de texto no rótulo (a cor nunca é o único sinal); as demais
   ficam em segundo plano. As opções estão inertes: não mudam mais. */
.opcao[data-gabarito="correta"] .opcao__rotulo,
.opcao[data-gabarito="correta"] .opcao__controle:checked + .opcao__rotulo {
  background: var(--ok-soft);
  box-shadow: inset 0 0 0 2px var(--ok-ink);
}
.opcao[data-gabarito="errada"] .opcao__rotulo,
.opcao[data-gabarito="errada"] .opcao__controle:checked + .opcao__rotulo {
  background: var(--danger-soft);
  box-shadow: inset 0 0 0 2px var(--danger-ink);
}
.opcao[data-gabarito] .opcao__texto::after {
  display: block;
  margin-block-start: var(--e1);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.opcao[data-gabarito="correta"] .opcao__texto::after { content: "✓ Correta"; color: var(--ok-ink); }
.opcao[data-gabarito="errada"] .opcao__texto::after { content: "✕ Sua escolha"; color: var(--danger-ink); }
.tela--revelada .opcao:not([data-gabarito]) .opcao__rotulo { color: var(--suave); }
.tela--revelada .opcao__tecla { display: none; }
.tela--revelada .opcao__rotulo { cursor: default; }
/* Celular: o controle chega mais perto da borda, para o texto e o selo da
   revelação caberem numa linha no cartão estreito de mito ou verdade (medido
   em 360 e 390 px). Abaixo de 360 px, as duas opções ficam uma sobre a outra. */
@media (max-width: 30rem) {
  .opcao__controle { inset-inline-start: var(--e3); }
  .opcao__rotulo { padding-inline-start: calc(var(--e3) * 2 + 1.375rem); }
}
@media (max-width: 22.4375rem) {
  .opcoes--conhecimento { grid-template-columns: minmax(0, 1fr); }
}

/* Régua de resposta (versão 2026-11, DESIGN.md 2.4, 2.7 e 2.8). Por baixo, os
   mesmos radios: cada um, transparente, sobre o próprio lugar na linha, e o
   toque, o clique e as setas do teclado escolhem como sempre. À vista ficam só
   a linha e uma bola, que começa no meio: desde 01/10/2026 nada desenha um
   ponto por opção, porque os pontos pareciam botões. O app.js acrescenta o
   arraste e escreve uma variável só, --regua-pos (0 na ponta esquerda, 1 na
   direita, 0,5 no meio), a cada quadro, com física de mola; posição da bola,
   preenchimento a partir do meio, cor, tinta do painel e balão saem dela.
   Além das pontas (borda elástica, ricochete), a posição passa de 0 e 1; a
   tendência de cor fica presa entre -1 e 1. A demonstração anima a mesma
   variável pelo CSS, e por isso ela é registrada. */
@property --regua-pos {
  syntax: "<number>";
  inherits: true;
  initial-value: 0.5;
}
/* Quanto a bola está acesa: 0 é a bola apagada, sem resposta; 1 é a bola na cor
   da posição. Registrada para a troca ser uma transição curta, enquanto a cor
   em si acompanha a posição a cada quadro, sem atraso. */
@property --regua-acesa {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
/* Halo da bola agarrada: registrado pelo mesmo motivo, para crescer com
   transição sem atrasar a cor do halo. */
@property --regua-halo {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
.regua {
  --regua-n: 5;
  /* Diâmetro da bola, altura da linha dos radios e centro vertical da linha. */
  --regua-faixa: 3rem;
  --regua-tende: clamp(-1, calc(var(--regua-pos) * 2 - 1), 1);
  --regua-forca: max(var(--regua-tende), -1 * var(--regua-tende));
  /* Reserva para navegador sem porcentagem calculada no color-mix: a régua
     funciona inteira, só sem a mudança de cor. */
  --regua-cor: var(--accent);
  padding: var(--e4) var(--e3) var(--e3);
  border-radius: var(--r-caixa);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--borda);
  /* O painel inteiro é a área do gesto com o dedo: rolagem vertical e zoom
     continuam com o navegador, o arraste lateral é da régua. No Safari do
     iPhone isto não basta (a deriva vertical do dedo vira rolagem e cancela
     o arraste): o app.js trava a direção e cancela o touchmove do gesto
     lateral, e a bola tem touch-action próprio (abaixo). Sem seleção de
     texto nem menu de toque longo. */
  touch-action: pan-y pinch-zoom;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
@supports (color: color-mix(in oklab, red calc(max(0, -1 * 0.5) * 100%), blue)) {
  .regua {
    --regua-cor: color-mix(
      in oklab,
      color-mix(in oklab, var(--regua-neutro), var(--regua-esquerda) calc(max(0, -1 * var(--regua-tende)) * 100%)),
      var(--regua-direita) calc(max(0, var(--regua-tende)) * 100%)
    );
    background: color-mix(in oklab, var(--surface), var(--regua-cor) calc(var(--regua-forca) * 10%));
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--borda), var(--regua-cor) calc(var(--regua-forca) * 70%));
  }
}
.regua--3 { --regua-n: 3; }

/* Leitura: antes da escolha, o convite com as setas ("Arraste a bola para
   responder"); depois, o nome da posição, na cor dela. */
.regua__leitura {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  min-block-size: 1.75rem;
  margin: 0 0 var(--e3);
  text-align: center;
}
.regua__dica {
  flex: none;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  color: var(--accent);
}
.regua--com-valor .regua__dica,
.regua--fora .regua__dica,
.regua--previa .regua__dica { display: none; }
.regua__valor {
  font-size: var(--t-md);
  font-weight: 600;
  color: var(--ink-2);
  line-height: 1.35;
}
.regua--com-valor .regua__valor,
.regua--fora .regua__valor {
  font-size: var(--t-lg);
  font-weight: 700;
  letter-spacing: -0.005em;
}
.regua--com-valor .regua__valor { color: var(--regua-cor); }
.regua--fora .regua__valor { color: var(--ink-2); }
/* Prévia (dedo pressionado, mouse por cima ou foco do teclado numa posição
   ainda não escolhida): o nome da posição, em neutro; arrastando, já na cor
   dela. */
.regua--previa .regua__valor {
  font-size: var(--t-lg);
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--ink-2);
}
.regua--arrastando .regua__valor { color: var(--regua-cor); }
/* Arrastando, o nome viaja no balão sobre o dedo: a leitura de cima some. */
.regua__leitura { transition: opacity var(--m-rapida) var(--ease-suave); }
.regua--arrastando .regua__leitura { opacity: 0; }
/* Escolha nova: a leitura entra com um respiro curto. */
.regua--nova-leitura .regua__valor { animation: regua-leitura var(--m-base) var(--ease-expo); }
@keyframes regua-leitura {
  from { opacity: 0.35; transform: translateY(0.25rem); }
}

.regua__trilho {
  position: relative;
  isolation: isolate;
  padding-block: var(--e1);
  cursor: pointer;
}
.regua--arrastando .regua__trilho { cursor: grabbing; }

/* Curso: do lugar da primeira opção ao da última, na altura da bola. Não
   recebe toque (o toque passa aos radios por baixo), exceto a bola. Sem
   z-index próprio: linha e preenchimento ficam sob os lugares das opções
   (anel do foco e da resposta certa), e a bola, sobre eles. */
.regua__curso {
  position: absolute;
  inset-inline: calc(100% / var(--regua-n) / 2);
  inset-block-start: calc(var(--e1) + var(--regua-faixa) / 2);
  block-size: 0;
  pointer-events: none;
}
.regua__linha,
.regua__preenchimento {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  border-radius: 999px;
  translate: 0 -50%;
}
/* Linha: o espectro inteiro à vista desde o começo (um lado em âmbar, o meio
   em cinza, o outro em azul), para dizer sem palavras que dá para ir de um
   lado ao outro e que a cor muda no caminho. */
.regua__linha {
  z-index: 0;
  block-size: 0.5rem;
  background: linear-gradient(to right, var(--regua-esquerda), var(--regua-neutro) 50%, var(--regua-direita));
  opacity: 0.45;
}
/* Preenchimento: do meio até a bola, na cor da posição. Só com a bola acesa:
   a bola apagada no meio não pinta nada. */
.regua__preenchimento {
  z-index: 0;
  block-size: 0.5rem;
  background: var(--regua-cor);
  transform-origin: left center;
  transform:
    translateX(calc(min(var(--regua-pos), 0.5) * 100%))
    scaleX(calc(max(var(--regua-pos), 0.5) - min(var(--regua-pos), 0.5)));
  opacity: 0;
  transition: opacity var(--m-rapida) var(--ease-suave);
}
.regua--com-valor .regua__preenchimento,
.regua--arrastando .regua__preenchimento,
.regua--demo .regua__preenchimento { opacity: 1; }
/* Guia: caixa da largura do curso, com a bola na ponta direita. Desloca de
   -100% (bola no início) a 0 (no fim); o que passa à esquerda nunca cria
   rolagem. */
.regua__guia {
  position: absolute;
  z-index: 2;
  inset-inline-start: 0;
  inset-block-start: 0;
  inline-size: 100%;
  block-size: 0;
  transform: translateX(calc((var(--regua-pos) - 1) * 100%));
}
/* Bola: o único controle à vista, com as setas para os dois lados. Sem
   resposta, é clara, com borda neutra e sombra de objeto que se pega (como o
   botão de um controle deslizante do sistema); no escuro, um tom acima do
   painel. Arrastada ou com resposta, acende na cor da posição. A borda neutra
   tem contraste de controle (WCAG 1.4.11) sobre o painel nos dois temas. */
.regua__polegar {
  --regua-sombra: var(--regua-bola-sombra);
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--regua-faixa);
  block-size: var(--regua-faixa);
  translate: 50% -50%;
  border: 2px solid var(--regua-neutro);
  border-radius: 50%;
  background: var(--regua-bola);
  color: var(--ink-2);
  box-shadow:
    0 0 0 var(--regua-halo) color-mix(in oklab, var(--regua-cor) 20%, transparent),
    0 0.125rem 0.25rem -0.0625rem var(--regua-sombra),
    0 0.5rem 1.25rem -0.375rem var(--regua-sombra);
  /* Ao ser agarrada, a bola cresce com um leve passo além (curva com
     retorno), como algo que se pega com a mão. */
  transition:
    --regua-acesa var(--m-base) var(--ease-suave),
    --regua-halo var(--m-base) var(--ease-expo),
    scale var(--m-base) cubic-bezier(0.34, 1.56, 0.64, 1);
  /* A bola recebe o toque (o curso, não), e o gesto que começa nela é da
     régua desde o primeiro instante: nem rolagem nem zoom, como o polegar de
     um controle deslizante do sistema. É a garantia que não depende do
     script no Safari do iPhone (DESIGN.md 2.10). O resto do painel continua
     rolando a página. */
  pointer-events: auto;
  touch-action: none;
  cursor: grab;
}
.regua--arrastando .regua__polegar { cursor: grabbing; }
.regua--com-valor .regua__polegar,
.regua--arrastando .regua__polegar,
.regua--demo .regua__polegar { --regua-acesa: 1; }
@supports (color: color-mix(in oklab, red calc(max(0, -1 * 0.5) * 100%), blue)) {
  .regua__polegar {
    --regua-sombra: color-mix(in oklab, var(--regua-bola-sombra), var(--regua-cor) calc(var(--regua-acesa) * 55%));
    border-color: color-mix(in oklab, var(--regua-neutro), var(--surface) calc(var(--regua-acesa) * 100%));
    background: color-mix(in oklab, var(--regua-bola), var(--regua-cor) calc(var(--regua-acesa) * 100%));
    color: color-mix(in oklab, var(--ink-2), var(--surface) calc(var(--regua-acesa) * 100%));
  }
}
@supports not (color: color-mix(in oklab, red calc(max(0, -1 * 0.5) * 100%), blue)) {
  .regua--com-valor .regua__polegar,
  .regua--arrastando .regua__polegar,
  .regua--demo .regua__polegar {
    border-color: var(--surface);
    background: var(--accent);
    color: var(--surface);
  }
}
.regua__seta { flex: none; inline-size: 1rem; block-size: 1rem; margin-inline: -0.0625rem; }
/* Agarrada (dedo sobre ela) ou arrastando: maior, com um halo na cor da
   posição, para o polegar não esconder o que está segurando. */
.regua--agarrado .regua__polegar,
.regua--arrastando .regua__polegar {
  --regua-halo: 0.625rem;
  scale: 1.16;
}
/* Tique: arrastando, cada posição alcançada dá um pulso na bola (no Android,
   junto com a vibração curta). */
.regua--tique .regua__polegar { animation: regua-tique 220ms var(--ease-expo); }
@keyframes regua-tique {
  40% { scale: 1.3; }
}
/* Foco do teclado com a escolha feita: o anel fica na bola, que está sobre o
   radio focado. Sem escolha, o anel aparece no lugar da posição focada (abaixo). */
.regua:has(.regua__controle:checked:focus-visible) .regua__polegar {
  outline: 3px solid var(--foco);
  outline-offset: 3px;
}

/* Balão: durante o arraste, o nome da posição sob o dedo viaja acima da
   bola, na cor dela. Preso dentro do painel nas pontas (--balao-desvio,
   app.js); a ponta do balão continua apontando para a bola. */
.regua__balao {
  position: absolute;
  inset-inline-end: 0;
  inset-block-end: calc(var(--regua-faixa) / 2 + 0.75rem);
  padding: 0.3125rem 0.75rem;
  border-radius: 999px;
  background: var(--regua-cor);
  color: var(--surface);
  font-size: var(--t-sm);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 0.375rem 1rem -0.375rem color-mix(in oklab, var(--regua-cor) 70%, transparent);
  translate: calc(50% + var(--balao-desvio, 0px)) 0;
  transform-origin: 50% 100%;
  opacity: 0;
  scale: 0.85;
  pointer-events: none;
  transition: opacity var(--m-rapida) var(--ease-suave), scale var(--m-base) var(--ease-expo);
}
.regua__balao::after {
  content: "";
  position: absolute;
  inset-block-start: calc(100% - 1px);
  inset-inline-start: calc(50% - var(--balao-desvio, 0px));
  translate: -50% 0;
  border: 0.375rem solid transparent;
  border-block-start-color: var(--regua-cor);
  border-block-end-width: 0;
}
.regua--arrastando .regua__balao { opacity: 1; scale: 1; }

/* Demonstração (app.js, agendarDemonstracao): na primeira régua vazia da
   visita, a própria bola, com a mão sobre ela, vai do meio à ponta esquerda,
   à direita e volta ao meio, acesa e mudando de cor no caminho, e apaga. Uma
   vez só, 2,6 s (abaixo dos 5 s da WCAG 2.2.2), interrompida por qualquer
   toque ou tecla, e termina no meio, sem marcar nada. Nas réguas seguintes,
   um aceno curto da bola apagada, sem a mão (0,9 s). As duas animam
   --regua-pos, e a posição desenhada pelo script volta a valer quando a
   classe sai. */
.regua--demo { animation: regua-demo 2600ms var(--ease-movimento) both; }
@keyframes regua-demo {
  0%, 10% { --regua-pos: 0.5; }
  38% { --regua-pos: 0.08; }
  72% { --regua-pos: 0.92; }
  92%, 100% { --regua-pos: 0.5; }
}
.regua--aceno { animation: regua-aceno 900ms var(--ease-movimento) both; }
@keyframes regua-aceno {
  0%, 100% { --regua-pos: 0.5; }
  35% { --regua-pos: 0.42; }
  70% { --regua-pos: 0.58; }
}
/* A ponta do dedo encosta na metade de baixo da bola. */
.regua__mao {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: 0;
  inline-size: 2rem;
  block-size: 2rem;
  translate: 55% 0;
  color: var(--ink);
  filter: drop-shadow(0 0.125rem 0.25rem rgb(0 0 0 / 0.25));
  opacity: 0;
  visibility: hidden;
}
.regua--demo .regua__mao {
  visibility: visible;
  animation: regua-demo-mao 2600ms var(--ease-movimento) both;
}
@keyframes regua-demo-mao {
  0% { opacity: 0; transform: translateY(0.5rem); }
  10%, 90% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(0.5rem); }
}

/* Lugares das opções: uma coluna igual para cada uma. O radio fica
   transparente, com alvo do tamanho da bola; nada se desenha ali, a não ser o
   anel do foco do teclado e, depois da revelação, o anel da resposta certa. */
.regua__paradas {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(var(--regua-n), minmax(0, 1fr));
}
.regua__parada {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  min-inline-size: 0;
}
.regua__parada--esquerda-forte { --cor-parada: var(--regua-esquerda); }
.regua__parada--esquerda-leve { --cor-parada: color-mix(in oklab, var(--regua-neutro), var(--regua-esquerda) 50%); }
.regua__parada--centro { --cor-parada: var(--regua-neutro); }
.regua__parada--direita-leve { --cor-parada: color-mix(in oklab, var(--regua-neutro), var(--regua-direita) 50%); }
.regua__parada--direita-forte { --cor-parada: var(--regua-direita); }
.regua__controle {
  position: absolute;
  z-index: 3;
  inset-block-start: 0;
  inset-inline-start: 50%;
  translate: -50% 0;
  inline-size: var(--regua-faixa);
  block-size: var(--regua-faixa);
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.regua__ponto {
  display: grid;
  justify-items: center;
  min-inline-size: 0;
  cursor: pointer;
}
/* Lugar da opção na linha, do tamanho da bola: vazio e invisível. */
.regua__ponto::before {
  content: "";
  inline-size: var(--regua-faixa);
  block-size: var(--regua-faixa);
  border-radius: 50%;
}
.regua__controle:focus-visible + .regua__ponto::before {
  outline: 3px solid var(--foco);
  outline-offset: 3px;
}
/* Nome de cada posição: à vista só no mito ou verdade, embaixo do lugar. */
.regua__nome {
  display: block;
  margin-block-start: var(--e1);
  font-size: var(--t-sm);
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  color: var(--cor-parada);
  overflow-wrap: anywhere;
}
/* Escala de cinco: nome só nas pontas, na linha de baixo (o nome de cada
   posição continua no radio para o leitor de tela, e a leitura mostra a
   posição escolhida). */
.regua--5 .regua__nome {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.regua__extremos {
  display: flex;
  justify-content: space-between;
  gap: var(--e3);
  margin-block-start: var(--e1);
  font-size: var(--t-sm);
  font-weight: 700;
  line-height: 1.25;
}
.regua__extremos span:first-child { color: var(--regua-esquerda); }
.regua__extremos span:last-child { color: var(--regua-direita); text-align: end; }

/* Revelação na régua de mito ou verdade: selo de texto sob o nome (a cor
   nunca é o único sinal) e, quando a escolha foi outra, um anel no lugar da
   resposta certa (acertando, a bola está sobre ele). */
.regua__parada[data-gabarito="correta"] .regua__ponto::before {
  background: var(--ok-soft);
  box-shadow: inset 0 0 0 3px var(--ok-ink);
}
.regua__parada[data-gabarito] .regua__nome::after {
  display: block;
  margin-block-start: var(--e0);
  font-size: var(--t-xs);
  letter-spacing: 0.02em;
}
.regua__parada[data-gabarito="correta"] .regua__nome::after { content: "✓ Correta"; color: var(--ok-ink); }
.regua__parada[data-gabarito="errada"] .regua__nome::after { content: "✕ Sua escolha"; color: var(--danger-ink); }
.tela--revelada .regua__trilho,
.tela--revelada .regua__ponto,
.tela--revelada .regua__controle { cursor: default; }

/* "Prefiro não responder": fora da régua, logo abaixo, no centro. A régua
   ocupa a largura toda, também no mito ou verdade (que em cartões tinha duas
   colunas). */
.opcoes.opcoes--regua { grid-template-columns: minmax(0, 1fr); gap: var(--e2); }
.opcoes--regua .opcoes__separador { padding-inline-start: 0; text-align: center; }
.opcoes--regua .opcao--separada { justify-self: center; }
.opcoes--regua .opcao--separada .opcao__rotulo {
  min-block-size: var(--alvo);
  padding-inline-end: var(--e4);
}

/* Celular: cena, frase e régua cabem sem rolar acima da barra de comandos
   (medido de 360 por 640 a 414 por 715, DESIGN.md 2.5). A frase desce um
   degrau, e cena e instrução ficam mais justas. */
@media (max-width: 30rem) {
  .questionario.respondendo .tela { padding-block-start: var(--e2); }
  .respondendo .tela__marco { margin-block-end: var(--e3); }
  .respondendo .pergunta__cena {
    margin-block-end: var(--e3);
    padding: var(--e2) var(--e3);
    line-height: 1.45;
  }
  .respondendo .pergunta__enunciado { font-size: 1.375rem; }
  .respondendo .pergunta__instrucao { margin-block: var(--e1) var(--e3); }
  .regua { padding-block-start: var(--e3); }
  .regua__leitura { margin-block-end: var(--e1); }
}

@media (hover: hover) and (pointer: fine) {
  .regua__trilho { cursor: grab; }
}

.revelacao {
  margin-block-start: var(--e4);
  padding: var(--e4);
  border-radius: var(--r-caixa);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--borda), 0 1rem 2rem -1.5rem rgb(34 28 33 / 0.35);
}
/* Responde a um toque: 240 ms, abaixo do teto de 300 ms de resposta direta. */
.revelacao:not([hidden]) { animation: revelar var(--m-base) var(--ease-expo) both; }
@keyframes revelar {
  from { opacity: 0; transform: translateY(0.75rem) scale(0.98); }
}
.revelacao:focus { outline: none; }
.revelacao:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; }
.revelacao__veredito {
  display: flex;
  align-items: center;
  gap: var(--e2);
  font-size: var(--t-h3);
  font-weight: 700;
  line-height: 1.2;
}
.revelacao[data-situacao="acertou"] .revelacao__veredito { color: var(--ok-ink); }
.revelacao[data-situacao="errou"] .revelacao__veredito { color: var(--danger-ink); }
.revelacao[data-situacao="nao_sabia"] .revelacao__veredito { color: var(--accent); }
.revelacao__resposta { margin-block: var(--e2) var(--e1); }
.revelacao__resposta strong { color: var(--accent); }
.revelacao__texto { color: var(--ink-2); max-inline-size: 60ch; }
.revelacao .citacao { margin-block-start: var(--e2); }
@media (hover: hover) and (pointer: fine) {
  .opcao:hover .opcao__rotulo { background: var(--hover); box-shadow: inset 0 0 0 1px var(--line-strong); }
  .opcao:hover .opcao__controle:not(:checked) { border-color: var(--ink-2); }
  .opcao:hover .opcao__controle:checked + .opcao__rotulo {
    background: var(--accent-soft);
    box-shadow: inset 0 0 0 2px var(--accent);
  }
  .opcao__tecla {
    display: inline-grid;
    place-items: center;
    flex: none;
    min-inline-size: 1.625rem;
    block-size: 1.625rem;
    padding-inline: 0.3rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-mini);
    font-family: var(--f-mono);
    font-size: var(--t-xs);
    color: var(--ink-2);
    transition: background-color var(--m-rapida) var(--ease-suave), color var(--m-rapida) var(--ease-suave);
  }
  .opcao__controle:checked + .opcao__rotulo .opcao__tecla {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--on-accent);
  }
}

/* Barra de comandos: presa embaixo no celular, na zona do polegar, com a área
   segura do aparelho; o botão principal diz o que vai acontecer. Sem resposta,
   ele vira "Pular" com peso de botão secundário. */
.comandos {
  position: sticky;
  inset-block-end: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: var(--e3);
  margin-block-start: var(--e5);
  padding-block: var(--e3) calc(var(--e3) + env(safe-area-inset-bottom, 0px));
  background: var(--ground);
  border-block-start: 1px solid var(--borda);
}
.comandos__voltar { flex: none; }
.comandos__seguir { flex: 1 1 auto; margin-inline-start: auto; }
.comandos__seguir--pular {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.comandos__seguir--pular:active { background: var(--recess); }
.comandos__dica { display: none; }
@media (hover: hover) and (pointer: fine) {
  .comandos__seguir--pular:hover { background: var(--hover); border-color: var(--ink-2); }
}
@media (min-width: 40rem) {
  .comandos__seguir { flex: 0 0 auto; min-inline-size: 12rem; }
}
/* Celular: o Voltar vira só a seta (o nome "Voltar" continua para o leitor de
   tela) e o botão principal fica com o resto da linha, para "Confirmar
   resposta" e "Próxima pergunta" caberem numa linha (medido de 320 a 414 px;
   abaixo de 360 px, a barra aperta o vão e a margem interna). */
@media (max-width: 22.4375rem) {
  .comandos { gap: var(--e2); }
  .comandos__seguir { padding-inline: var(--e3); }
}
@media (max-width: 30rem) {
  .comandos__voltar { inline-size: var(--alvo); padding-inline: 0; }
  .comandos__voltar > span {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
@media (min-width: 40rem) and (hover: hover) and (pointer: fine) {
  .comandos__dica {
    display: block;
    margin-inline-start: auto;
    font-size: var(--t-xs);
    color: var(--suave);
  }
  .comandos__dica kbd {
    padding: 0.1em 0.4em;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-mini);
    font-family: var(--f-mono);
  }
  .comandos__dica + .comandos__seguir { margin-inline-start: 0; }
}

/* Revisão: o mapa das perguntas, respondidas em cheio e em branco tracejadas
   (a diferença não depende só da cor), cada uma levando à própria tela. */
.revisao__titulo { margin-block: 0 var(--e3); }
.revisao__titulo:focus { outline: none; }
.revisao__titulo:focus-visible { outline: 2px solid var(--foco); outline-offset: 4px; }
.mapa {
  display: grid;
  gap: var(--e4);
  margin-block: var(--e5);
}
.mapa__instrucao { font-size: var(--t-sm); color: var(--ink-2); }
.mapa__titulo {
  margin-block-end: var(--e2);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0;
  color: var(--ink-2);
}
.mapa__lista { display: flex; flex-wrap: wrap; gap: var(--e2); }
.mapa__item {
  inline-size: var(--alvo);
  block-size: var(--alvo);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-ctrl);
  background: transparent;
  color: var(--ink-2);
  font-family: var(--f-mono);
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition:
    background-color var(--m-rapida) var(--ease-suave),
    border-color var(--m-rapida) var(--ease-suave),
    transform var(--m-rapida) var(--ease-suave);
}
.mapa__item--respondida {
  border-style: solid;
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}
.mapa__item:active { transform: scale(0.96); }
.mapa__item:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .mapa__item:hover { border-color: var(--ink-2); background: var(--hover); }
  .mapa__item--respondida:hover { border-color: var(--accent-strong); background: var(--accent-strong); }
}
.mapa__legenda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e2);
  font-size: var(--t-xs);
  color: var(--suave);
}
.mapa__amostra {
  inline-size: 0.875rem;
  block-size: 0.875rem;
  border: 1px dashed var(--line-strong);
  border-radius: 3px;
}
.mapa__amostra:not(:first-child) { margin-inline-start: var(--e3); }
.mapa__amostra--respondida { border-style: solid; border-color: var(--accent); background: var(--accent); }

.navegacao {
  display: flex;
  gap: var(--e3);
  margin-block-start: var(--e6);
  padding-block-start: var(--e4);
  border-block-start: 1px solid var(--borda);
}
.navegacao .botao--primario { flex: 1 1 auto; }
@media (min-width: 40rem) {
  .navegacao { justify-content: space-between; }
  .navegacao .botao--primario { flex: 0 0 auto; min-inline-size: 12rem; }
}

.envio { margin-block-start: var(--e5); }
.envio .navegacao { margin-block-start: var(--e4); }
.envio__resumo {
  padding: var(--e3) var(--e4);
  border-radius: var(--r-caixa);
  background: var(--recess);
  font-weight: 700;
}
.envio__verificacao { margin-block-start: var(--e4); }
.envio__status {
  display: flex;
  gap: var(--e2);
  align-items: flex-start;
  font-size: var(--t-sm);
  color: var(--suave);
}
.envio__status[data-situacao="ok"] { color: var(--ok-ink); }
.envio__status[data-situacao="erro"] { color: var(--danger-ink); }
.envio__widget { margin-block-start: var(--e2); max-inline-size: 100%; }
.envio__widget:empty { display: none; }
.envio__termo { margin-block-start: var(--e4); font-size: var(--t-sm); color: var(--suave); }

.erro-resumo {
  margin-block-start: var(--e4);
  padding: var(--e3) var(--e4);
  border-radius: var(--r-caixa);
  background: var(--danger-soft);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--danger-ink);
}
.erro-resumo:focus { outline: none; }
.erro-resumo:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.erro-resumo__titulo {
  display: flex;
  gap: var(--e2);
  align-items: flex-start;
  font-weight: 700;
  color: var(--danger-ink);
}
.erro-resumo p + p { margin-block-start: var(--e1); }
.erro-resumo .referencia { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--suave); }
.erro-resumo .acoes { margin-block-start: var(--e3); }

/* Diálogo de ajuda: modal nativo (foco preso, Esc fecha, foco volta ao botão). */
.dialogo-ajuda {
  inline-size: min(30rem, calc(100vw - 2rem));
  max-block-size: calc(100svh - 2rem);
  padding: var(--e5);
  border: 0;
  border-radius: var(--r-caixa);
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1.5rem 4rem -1.5rem rgb(0 0 0 / 0.45);
}
.dialogo-ajuda[open] { animation: fundir var(--m-base) var(--ease-suave) both; }
.dialogo-ajuda::backdrop { background: rgb(19 15 19 / 0.55); }
.dialogo-ajuda__cabeca {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--e3);
  margin-block-end: var(--e3);
}
.dialogo-ajuda__titulo { font-size: var(--t-h3); margin: 0; }
.dialogo-ajuda__fechar {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: var(--alvo);
  block-size: var(--alvo);
  border: 0;
  border-radius: var(--r-ctrl);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
}
.dialogo-ajuda__fechar:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .dialogo-ajuda__fechar:hover { background: var(--hover); }
}
.dialogo-ajuda > p { color: var(--ink-2); margin-block-end: var(--e3); font-size: var(--t-sm); }

.apoio__caixa {
  padding: var(--e4);
  border-radius: var(--r-caixa);
  background: var(--recess);
}
@media (min-width: 64rem) {
  .apoio { position: sticky; inset-block-start: calc(var(--altura-topo) + var(--e5)); }
}
.apoio__titulo { font-size: var(--t-lg); margin-block-end: var(--e2); }
.apoio__caixa > p { font-size: var(--t-sm); color: var(--ink-2); margin-block-end: var(--e3); }

/* ---------- Resultado ---------- */
.resultado { padding-block-start: var(--e4); }
.resultado:not([hidden]) { animation: tela-frente var(--m-lenta) var(--ease-expo) both; }
.resultado:focus { outline: none; }
.resultado:focus-visible { outline: 2px solid var(--foco); outline-offset: 4px; }
.resultado__intro { color: var(--ink-2); margin-block: var(--e3) var(--e5); max-inline-size: 60ch; }
.resultado h2 { margin-block-end: 0; }
.resultado h3 { margin-block: var(--e6) var(--e3); }

.placar {
  display: grid;
  gap: var(--e2);
  padding: var(--e4);
  border-radius: var(--r-caixa);
  background: var(--accent-soft);
}
.placar__numero { font-size: var(--t-h1); font-weight: 700; line-height: 1; letter-spacing: -0.03em; }
.placar__numero span { font-size: var(--t-lg); letter-spacing: 0; color: var(--ink-2); }
.placar__texto { color: var(--ink-2); }
.placar__nivel { margin-block-start: var(--e2); font-size: var(--t-lg); font-weight: 700; color: var(--ink); }
.placar__trilha {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 4px;
  list-style: none;
  margin-block-start: var(--e1);
}
.placar__trilha li { block-size: 6px; border-radius: 3px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); }
.placar__trilha li.certa { background: var(--accent); box-shadow: none; }

.gabarito { list-style: none; display: grid; gap: var(--e4); }
.gabarito__item {
  padding: var(--e4);
  border-radius: var(--r-caixa);
  background: var(--surface);
  border: 1px solid var(--borda);
}
.gabarito__situacao {
  display: flex;
  gap: var(--e1);
  align-items: center;
  font-size: var(--t-sm);
  font-weight: 700;
  margin-block-end: var(--e2);
}
.gabarito__situacao--acertou { color: var(--ok-ink); }
.gabarito__situacao--errou { color: var(--danger-ink); }
.gabarito__situacao--nao_sabia { color: var(--warn-ink); }
.gabarito__situacao--sem_resposta { color: var(--suave); }
.gabarito__enunciado { font-weight: 700; line-height: 1.45; }
.gabarito__resposta { margin-block-start: var(--e2); font-size: var(--t-sm); color: var(--ink-2); display: grid; gap: var(--e0); }
.gabarito__explicacao { margin-block-start: var(--e2); color: var(--ink-2); }

.opinioes {
  margin-block-start: var(--e5);
  border-block: 1px solid var(--borda);
}
.opinioes summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  min-block-size: var(--alvo);
  padding-block: var(--e3);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.opinioes summary::-webkit-details-marker { display: none; }
.opinioes summary::after {
  content: "";
  inline-size: 0.625rem;
  block-size: 0.625rem;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--d-feedback) var(--ease-movimento);
  flex: none;
}
.opinioes[open] summary::after { transform: rotate(-135deg); }
.opinioes ol { list-style: none; display: grid; gap: var(--e4); padding-block-end: var(--e4); }
.opinioes li + li { padding-block-start: var(--e4); border-block-start: 1px solid var(--borda); }
.opinioes__frase { font-weight: 700; }
.opinioes__sua { font-size: var(--t-sm); color: var(--suave); margin-block-start: var(--e0); }
.opinioes__comentario { margin-block-start: var(--e2); color: var(--ink-2); }

.resultado__ajuda { margin-block-start: var(--e5); }
.resultado .acoes { margin-block-start: var(--e5); }
.resultado__nova { margin-block-start: var(--e4); font-size: var(--t-sm); }
.resultado__aviso { margin-block-start: var(--e2); font-size: var(--t-sm); color: var(--ok-ink); min-block-size: 1.5em; }

/* ---------- Documento (privacidade) e 404 ---------- */
.documento { padding-block: var(--e6) var(--e7); }
.documento__cabeca { max-inline-size: 44rem; margin-block-end: var(--e6); }
.documento__cabeca h1 { margin-block-end: var(--e3); }
.documento__data { color: var(--suave); font-size: var(--t-sm); }
.documento__resumo {
  max-inline-size: 68ch;
  padding: var(--e4);
  border-radius: var(--r-caixa);
  background: var(--accent-soft);
  margin-block-end: var(--e6);
}
:root[data-tema="cv"] .documento__resumo { box-shadow: inset 0 0 0 1px var(--line); }
.documento__resumo h2 { font-size: var(--t-lg); margin-block-end: var(--e2); }
.documento__resumo ul { padding-inline-start: 1.25em; }
.documento__resumo li + li { margin-block-start: var(--e1); }

.vazio { padding-block: var(--e7); max-inline-size: 44rem; }
.vazio h1 { margin-block-end: var(--e3); }
.vazio > p:not(.rotulo) { color: var(--ink-2); margin-block-end: var(--e5); }
.vazio__caminhos { margin-block-start: var(--e6); }
.vazio__caminhos h2 { font-size: var(--t-lg); margin-block-end: var(--e2); }
.vazio__ajuda { margin-block-start: var(--e6); }
.vazio__ajuda h2 { font-size: var(--t-lg); margin-block-end: var(--e3); }

/* ---------- Rodapé ---------- */
.rodape {
  margin-block-start: auto;
  padding-block: var(--e6) calc(var(--e5) + env(safe-area-inset-bottom, 0px));
  background: var(--recess);
  font-size: var(--t-sm);
}
:root[data-tema="cv"] .rodape { background: var(--surface); border-block-start: 1px solid var(--line); }
.rodape__grade { display: grid; gap: var(--e5); }
@media (min-width: 60rem) {
  .rodape__grade { grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); gap: var(--e6); }
}
.rodape__projeto p + p { margin-block-start: var(--e2); }
.rodape__projeto p { color: var(--ink-2); }
.rodape__marca {
  color: var(--ink);
  font-weight: 700;
  font-size: var(--t-lg);
  letter-spacing: -0.02em;
}
:root[data-tema="cv"] .rodape__marca {
  font-family: var(--f-display);
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.rodape__titulo { font-family: var(--f-ui); font-size: var(--t-sm); letter-spacing: 0; margin-block-end: var(--e2); color: var(--ink); }
.rodape__nav ul { list-style: none; display: grid; gap: var(--e0); }
.rodape__nav a {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.25rem;
  color: var(--ink);
}
.rodape__base {
  display: grid;
  gap: var(--e2);
  margin-block-start: var(--e5);
  padding-block-start: var(--e4);
  border-block-start: 1px solid var(--borda);
  color: var(--suave);
}
.rodape__base p { display: flex; gap: var(--e1); align-items: flex-start; }
.rodape__base .icone { margin-block-start: 0.15em; }
/* Assinatura do tema cv: o nome em contorno, grande, fechando a página. Decorativa. */
.rodape__assinatura {
  margin-block-start: var(--e6);
  overflow: hidden;
  font-family: var(--f-display);
  font-size: clamp(2.25rem, 0.3rem + 10.1vw, 9.75rem);
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px var(--line-strong);
  user-select: none;
}

/* ---------- Movimento ---------- */
@keyframes girar { to { transform: rotate(360deg); } }


/* ==========================================================================
   Sistema de movimento do tema cv (DESIGN.md, 1.7)
   Quatro durações (--m-rapida 160, --m-base 240, --m-media 420, --m-lenta
   560 ms), escalonamento de 45 ms e duas curvas: --ease-expo (desaceleração
   longa, para o que entra) e --ease-suave (para estado). Só transform e
   opacity. Movimento reduzido substitui deslocamento por fusão, no fim.
   ========================================================================== */
@keyframes subir {
  from { opacity: 0; transform: translateY(0.75rem); }
}
@keyframes fundir {
  from { opacity: 0; }
}
/* 150%: a palavra parte de baixo da própria máscara com folga. Com entrelinha
   de 0,98 o glifo passa da caixa da linha, e 110% ainda deixava o topo das
   maiúsculas visível na borda de baixo (medido quadro a quadro no Chromium). */
@keyframes palavra {
  from { transform: translateY(150%); }
}

/* Herói do início: coreografia única no carregamento, em CSS (roda sem
   JavaScript e nunca deixa texto invisível). Selo, palavras do título por
   máscara, uma a uma; apoio; botões; arte; números. Termina antes de 1 s. */
.cv-heroi .selo { animation: subir var(--m-lenta) var(--ease-expo) both; }
/* A máscara de cada palavra é a própria caixa com overflow oculto. O
   entrelinha do título é 0,98, menor que a altura do glifo; a folga de
   0,1em em cima e 0,2em embaixo (descendentes de "p") é devolvida por margem
   negativa, e o texto fica no mesmo lugar da versão sem máscara. */
:is(.cv-heroi h1, .titulo-cascata) .palavra {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-block: 0.1em 0.2em;
  margin-block: -0.1em -0.2em;
}
:is(.cv-heroi h1, .titulo-cascata) .palavra > span {
  display: inline-block;
  animation: palavra var(--m-lenta) var(--ease-expo) both;
  animation-delay: calc(80ms + var(--m-escalona) * var(--n, 0));
}
:is(.cv-heroi h1, .titulo-cascata) .palavra:nth-of-type(2) > span { --n: 1; }
:is(.cv-heroi h1, .titulo-cascata) .palavra:nth-of-type(3) > span { --n: 2; }
:is(.cv-heroi h1, .titulo-cascata) .palavra:nth-of-type(4) > span { --n: 3; }
:is(.cv-heroi h1, .titulo-cascata) .palavra:nth-of-type(5) > span { --n: 4; }
:is(.cv-heroi h1, .titulo-cascata) .palavra:nth-of-type(6) > span { --n: 5; }
:is(.cv-heroi h1, .titulo-cascata) .palavra:nth-of-type(7) > span { --n: 6; }
:is(.cv-heroi h1, .titulo-cascata) .palavra:nth-of-type(8) > span { --n: 7; }
:is(.cv-heroi h1, .titulo-cascata) .palavra:nth-of-type(9) > span { --n: 8; }
:is(.cv-heroi h1, .titulo-cascata) .palavra:nth-of-type(10) > span { --n: 9; }
.cv-heroi__apoio { animation: subir var(--m-lenta) var(--ease-expo) 380ms both; }
.cv-heroi .acoes { animation: subir var(--m-lenta) var(--ease-expo) 460ms both; }
.cv-heroi .matriz { animation: fundir var(--m-lenta) var(--ease-suave) 200ms both; }
.numeros__item { animation: subir var(--m-lenta) var(--ease-expo) both; animation-delay: 540ms; }
/* Herói da página do projeto: a mesma coreografia, com o celular no lugar da
   matriz. Rótulo, título palavra a palavra, apoio, botões, nota; o celular
   entra junto, e a conversa começa quando ele termina de entrar (app.js). */
.historia__heroi > .rotulo { animation: subir var(--m-lenta) var(--ease-expo) both; }
.historia__apoio { animation: subir var(--m-lenta) var(--ease-expo) 380ms both; }
.historia__heroi .acoes { animation: subir var(--m-lenta) var(--ease-expo) 460ms both; }
.historia__nota { animation: subir var(--m-lenta) var(--ease-expo) 540ms both; }
.historia__palco .celular { animation: celular-entra var(--m-lenta) var(--ease-expo) 200ms both; }
@keyframes celular-entra {
  from { opacity: 0; transform: translateY(1.5rem) scale(0.985); }
}
.numeros__item:nth-child(2) { animation-delay: calc(540ms + var(--m-escalona)); }
.numeros__item:nth-child(3) { animation-delay: calc(540ms + var(--m-escalona) * 2); }
.numeros__item:nth-child(4) { animation-delay: calc(540ms + var(--m-escalona) * 3); }
/* O número conta até o valor final quando entra na tela (app.js, iniciarContagem).
   O valor final fica escrito numa cópia só para leitura em voz. */
[data-contar] { display: inline-block; }

/* Cabeçalho dos guias: a mesma entrada, mais curta. */
.guia-cabeca > .largura > * { animation: subir var(--m-lenta) var(--ease-expo) both; }
.guia-cabeca > .largura > :nth-child(2) { animation-delay: calc(var(--m-escalona) * 1.5); }
.guia-cabeca > .largura > :nth-child(3) { animation-delay: calc(var(--m-escalona) * 3); }
.guia-cabeca > .largura > :nth-child(4) { animation-delay: calc(var(--m-escalona) * 4.5); }
.guia-cabeca > .largura > :nth-child(5) { animation-delay: calc(var(--m-escalona) * 6); }

/* Entrada dos blocos abaixo da dobra (data-revelar). O script só esconde o que
   ainda não apareceu na tela no carregamento; sem ele, nada fica escondido.
   Superfície grande: --m-lenta (560 ms, dentro do teto de 600 ms), filhos
   escalonados em 60 ms até o sétimo (escalonamento total abaixo de 500 ms). */
.revelar-pronto [data-revelar] > * {
  /* A borda entra na lista porque esta regra vence a transição própria de um
     filho (ficha de lei); sem ela, a borda do hover perderia a transição. */
  transition-property: opacity, transform, border-color;
  transition-duration: var(--m-lenta, 520ms), var(--m-lenta, 520ms), var(--m-base, 200ms);
  transition-timing-function: var(--ease-expo, var(--ease-entrada)), var(--ease-expo, var(--ease-entrada)), var(--ease-suave, var(--ease-entrada));
  transition-delay: calc(var(--i, 0) * 60ms), calc(var(--i, 0) * 60ms), 0s;
}
.revelar-pronto [data-revelar].revelar-oculto > * {
  opacity: 0;
  transform: translateY(1.25rem);
}
/* O traço do rótulo técnico se desenha depois do texto. */
.revelar-pronto [data-revelar] .sobretitulo__indice::after {
  transform-origin: left center;
  transition: transform var(--m-lenta, 520ms) var(--ease-expo, var(--ease-entrada)) 180ms;
}
.revelar-pronto [data-revelar].revelar-oculto .sobretitulo__indice::after { transform: scaleX(0); }
/* Foco de teclado chegando a um bloco ainda escondido: aparece na hora. */
.revelar-pronto [data-revelar].revelar-oculto:focus-within > * {
  opacity: 1;
  transform: none;
  transition: none;
}

/* Microinterações do tema cv: resposta em 160 a 240 ms, nunca acima de 300. */
:root[data-tema="cv"] .botao {
  transition:
    background-color var(--m-rapida) var(--ease-suave),
    border-color var(--m-rapida) var(--ease-suave),
    color var(--m-rapida) var(--ease-suave),
    box-shadow var(--m-base) var(--ease-suave),
    transform var(--m-rapida) var(--ease-suave);
}
:root[data-tema="cv"] .botao:active { transform: scale(0.98); }
:root[data-tema="cv"] .botao__icone { transition: transform var(--m-base) var(--ease-expo); }
@media (hover: hover) and (pointer: fine) {
  :root[data-tema="cv"] .botao--primario:hover {
    box-shadow: 0 0 0 4px var(--brilho), 0 0.75rem 2rem -0.75rem rgb(59 255 18 / 0.5);
  }
  :root[data-tema="cv"] .botao:hover .botao__icone { transform: translateX(3px); }
  :root[data-tema="cv"] .triagem__item {
    transition:
      border-color var(--m-base) var(--ease-suave),
      transform var(--m-base) var(--ease-expo);
  }
  :root[data-tema="cv"] .triagem__item:hover { transform: translateY(-2px); }
  /* :where zera o peso do tema: com a entrada dos blocos ativa, vale a regra de
     revelação, que já inclui a borda. */
  :where(:root[data-tema="cv"]) .lei { transition: border-color var(--m-base) var(--ease-suave); }
  :root[data-tema="cv"] .lei:hover { border-color: var(--line-strong); }
}

/* Troca de página: o cabeçalho e a navegação ficam parados e o conteúdo troca
   por fusão curta (View Transitions entre documentos). Navegador sem o recurso
   troca de página como sempre. */
@view-transition { navigation: auto; }
.topo { view-transition-name: topo; }
.nav-site { view-transition-name: nav-site; }
/* As pseudo-camadas da transição herdam do <html>: no tema cv usam os tokens;
   no tema projeto, que não os define, os mesmos valores entram como reserva. */
::view-transition-old(root) {
  animation: var(--m-rapida, 160ms) var(--ease-suave, cubic-bezier(0.33, 1, 0.68, 1)) both vt-sair;
}
::view-transition-new(root) {
  animation: var(--m-base, 240ms) var(--ease-expo, cubic-bezier(0.16, 1, 0.3, 1)) both vt-entrar;
}
@keyframes vt-sair { to { opacity: 0; } }
@keyframes vt-entrar { from { opacity: 0; transform: translateY(6px); } }

/* Movimento reduzido: substitui deslocamento por fusão, sem desligar o estado. */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .tela--frente, .tela--tras, .resultado:not([hidden]), .revelacao:not([hidden]) { animation-name: fundir; }
  .opcao:active .opcao__rotulo, .mapa__item:active { transform: none; }
  .cv-heroi .selo, .cv-heroi__apoio, .cv-heroi .acoes, .numeros__item,
  .guia-cabeca > .largura > * { animation-name: fundir; }
  :is(.cv-heroi h1, .titulo-cascata) .palavra > span { animation-name: fundir; }
  .historia__heroi > .rotulo, .historia__apoio, .historia__heroi .acoes, .historia__nota,
  .historia__palco .celular, .historia--viva .bolha:not([hidden]), .bolha--chegando, .chat__descer { animation-name: fundir; }
  .chat__digitando span { animation: none; opacity: 1; }
  .tema__link:active { transform: none; }
  /* Marca: a abertura vira fusão curta, sem deslocamento, halo nem varredura;
     o hover não anima. */
  .marca-intro .simbolo__ponto,
  .marca-intro .simbolo__aceso,
  .marca-intro .marca__linha > * {
    animation: fundir var(--m-base) var(--ease-suave) both;
  }
  .marca-intro .simbolo__halo,
  .marca-intro .marca__brilho,
  .marca-intro .marca__copia { animation: none; }
  .botao:active, .saida:active, .triagem__item:active { transform: none; }
  :root[data-tema="cv"] .botao:active { transform: none; }
  @media (hover: hover) and (pointer: fine) {
    .marca:hover .simbolo__aceso,
    .marca:hover .simbolo__halo,
    .marca:hover .marca__brilho,
    .marca:hover .marca__copia { animation: none; }
    :root[data-tema="cv"] .triagem__item:hover,
    :root[data-tema="cv"] .botao:hover .botao__icone,
    .tema__link:hover .tema__seta { transform: none; }
  }
  :root[data-tema="cv"] .nav-site__indicador { transition: opacity var(--m-rapida) var(--ease-suave); }
  .opcao__controle::before { transform: none; }
  .tela--lendo .pergunta__frase,
  .tela--lendo .pergunta__instrucao,
  .tela--lendo .opcoes { transform: none; }
  /* Régua: a bola não cresce nem pulsa e nada demonstra o arraste (o script
     também não agenda); acender e apagar a bola continua, por fusão de cor. */
  .regua--demo, .regua--aceno, .regua--demo .regua__mao { animation: none; }
  .regua__mao { visibility: hidden; }
  .regua__polegar { scale: 1; transition: --regua-acesa var(--m-rapida) var(--ease-suave); }
  .regua--arrastando .regua__polegar,
  .regua--agarrado .regua__polegar { scale: 1; }
  .regua--tique .regua__polegar { animation: none; }
  .regua__balao { scale: 1; transition: opacity var(--m-rapida) var(--ease-suave); }
  .regua--nova-leitura .regua__valor { animation-name: fundir; }
  .link-seta .icone, .triagem__seta { transition: none; }
  .botao--carregando::after { animation-duration: calc(var(--tau) * 8); }
  .selo__ponto { animation: none; }
  .revelar-pronto [data-revelar].revelar-oculto > * { transform: none; }
  .revelar-pronto [data-revelar].revelar-oculto .sobretitulo__indice::after { transform: none; }
  /* Jogo: sem inclinação, varredura nem subida; o cartão não segue o dedo
     (o script também não move), a troca de mensagem e a resposta entram por
     fusão e os trechos acendem por cor. */
  .cena--escolheu-esquerda .cena__cartao > *,
  .cena--escolheu-direita .cena__cartao > * { animation: none; }
  .cena--escolheu-esquerda .carimbo--esquerda,
  .cena--escolheu-direita .carimbo--direita { animation: carimbo-fica 1.6s linear both; }
  .cena--saindo .cena__palco, .cena--saindo .resposta-cena,
  .cena--saindo[data-lado="direita"] .cena__palco,
  .cena--saindo[data-lado="direita"] .resposta-cena { animation-name: fundir-sai; }
  .cena--entrando .cena__cartao > *, .cena--entrando .cena__escolha,
  .cena--entrando .balao, .cena--entrando .aparelho__aviso, .cena--entrando .quiz-ficha__texto,
  .cena--revelada .resposta-cena__corpo > *,
  .resultado-jogo > *, .resultado-jogo__mapa li, .compartilhar__previa { animation-name: fundir; }
  .trecho { background-image: none; transition: background-color var(--m-base) var(--ease-suave) !important; }
  .cena--revelada .trecho, .cena:has(> .resposta-cena[open]) .trecho { background-color: var(--cor-trecho-fundo); }
  .trecho__num { scale: 1; }
  .placar-jogo__passo--certo, .placar-jogo__passo--errado, .placar-jogo__acertos--sobe [data-placar-acertos] { animation: none; }
  .resposta-cena__barra > span, .enganam__barra > span { transition-property: opacity; }
  .jogo-chamada__previa .aparelho { rotate: none; }
  /* Você sabia?: o cartão não sobe no hover e os botões não encolhem; a
     rolagem dos botões é instantânea (o script) e a trilha acende por cor. */
  .sabia-cartao:hover, .sabia-controles__seta:active, .sabia-cartao__imagem:active { transform: none; }
}
@keyframes fundir-sai { to { opacity: 0; } }

/* ---------- Cores forçadas do sistema ---------- */
@media (forced-colors: active) {
  .opcao__controle { appearance: auto; }
  .opcao__controle::before { display: none; }
  .opcao__controle:checked + .opcao__rotulo { outline: 2px solid Highlight; }
  .saida, .botao { border: 2px solid ButtonText; }
  .placar__trilha li.certa { background: Highlight; }
  .nav-site__link[aria-current], .sumario__link[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; }
  .matriz__tela { display: none; }
  .triagem__item, .lei, .cv-projeto, .crime { border: 1px solid CanvasText; }
  .fundo-tecnico::before, .fundo-tecnico::after, .fundo-pontos::before,
  [data-luz]::before, .lei--destaque::after, .rodape__assinatura { display: none; }
  /* Camadas só de movimento: placa do menu, fio neon e barra de leitura. */
  .nav-site__indicador, :root[data-tema="cv"] .topo::after, .pagina-guia .topo::before { display: none; }
  .topo, :root[data-tema="cv"] .topo--alto { border-block-end-color: CanvasText; }
  .simbolo__ponto { fill: GrayText; }
  .simbolo__aceso { fill: CanvasText; }
  .simbolo__halo, .marca__brilho { display: none; }
  .opcao[data-gabarito] .opcao__rotulo { outline: 3px solid CanvasText; }
  .pergunta__cena { border-inline-start-color: CanvasText; }
  .mapa__item--respondida { border-width: 3px; }
  .regua { border: 1px solid CanvasText; }
  .regua__linha { background: CanvasText; opacity: 1; }
  .regua__preenchimento { forced-color-adjust: none; background: Highlight; }
  /* Bola sem resposta: fundo da tela com borda de texto; com resposta ou
     arrastando, na cor de destaque do sistema. */
  .regua__polegar { forced-color-adjust: none; background: Canvas; border-color: CanvasText; color: CanvasText; box-shadow: none; }
  .regua--com-valor .regua__polegar,
  .regua--arrastando .regua__polegar,
  .regua--demo .regua__polegar { background: Highlight; border-color: Canvas; box-shadow: 0 0 0 1px CanvasText; color: HighlightText; }
  .regua__balao { background: Canvas; color: CanvasText; border: 1px solid CanvasText; }
  .regua__balao::after { border-block-start-color: CanvasText; }
  .regua__dica, .tela__marco { color: CanvasText; }
  .regua__valor, .regua__nome, .regua__extremos span { color: CanvasText; }
  .regua__parada[data-gabarito] .regua__ponto::before { outline: 3px solid CanvasText; }
  .passo::before { border: 1px solid CanvasText; }
  .celular__corpo { border: 2px solid CanvasText; }
  .bolha, .citacao-chat, .caso__corpo, .caso__bloco--lei, .tema { border: 1px solid CanvasText; }
  .bolha:has(> .bolha__sinal--link), .bolha:has(> .bolha__apoio) { outline: 2px solid Highlight; }
  .lista-chat__badge, .celular__contagem, .chat__descer-contagem, .chat__descer { border: 1px solid CanvasText; }
  .lista-chat__corpo { border-block-end-color: CanvasText; }
  .historia--viva .bolha--marcada { outline: 2px solid Highlight; }
  .sinal--ativo { border-inline-start-color: Highlight; }
  .celular::before, .casos::after { display: none; }
  .casos::before, .caso::before { background: CanvasText; border-color: CanvasText; }
  /* Jogo e impacto: bordas de texto; trechos dos sinais sublinhados, com o
     número na cor de destaque do sistema. */
  .aparelho, .balao, .aparelho__aviso, .resposta-cena, .resultado-jogo, .impacto-cartao,
  .enganam__item, .aprendi, .compartilhar, .carimbo { border: 1px solid CanvasText; }
  .cena--revelada .trecho, .cena:has(> .resposta-cena[open]) .trecho { text-decoration: underline 2px; text-underline-offset: 0.2em; }
  .trecho__num, .sinais-cena__num { forced-color-adjust: none; background: Highlight; color: HighlightText; box-shadow: none; }
  .placar-jogo__passo { background: GrayText; }
  .placar-jogo__passo--atual, .placar-jogo__passo--certo, .placar-jogo__passo--errado { background: CanvasText; }
  .cena__cartao::before, .cena__cartao::after, .aparelho__tela::before { display: none; }
  .resultado-jogo__mapa li { border: 1px solid CanvasText; }
  .resultado-jogo__mapa .errado { border-width: 3px; }
  .resposta-cena__barra > span, .enganam__barra > span { forced-color-adjust: none; background: Highlight; }
  /* Isso é crime? e Você sabia?: bordas de texto; o passo à vista da trilha na
     cor de destaque do sistema. */
  .quiz-ficha, .proximo-jogo, .sabia-cartao, .sabia-controles__seta, .sabia-cartao__imagem { border: 1px solid CanvasText; }
  .quiz-ficha__texto::before { display: none; }
  .sabia-trilha li { background: GrayText; }
  .sabia-trilha .sabia-trilha__passo--visto { forced-color-adjust: none; background: Highlight; }
}

/* ---------- Impressão ---------- */
@media print {
  :root[data-tema] {
    color-scheme: light;
    --ground: #FFFFFF;
    --surface: #FFFFFF;
    --recess: #F2F2F2;
    --line: #BBBBBB;
    --line-strong: #666666;
    --ink: #111111;
    --ink-2: #333333;
    --muted: #444444;
    --accent: #1E5E09;
    --accent-soft: #FFFFFF;
    --ponto: transparent;
  }
  .topo, .nav-site, .pular, .rodape__base, .navegacao, .envio__verificacao, .matriz, .sumario,
  .rodape__assinatura, .selo, .numeros { display: none; }
  .fundo-tecnico::before, .fundo-tecnico::after, .fundo-pontos::before, .lei--destaque::after { display: none; }
  .revelar-pronto [data-revelar].revelar-oculto > * { opacity: 1; transform: none; }
  /* Papel não tem tempo: tudo no estado final, mesmo se a impressão começar no
     meio de uma entrada. */
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .ajuda { background: none; color: inherit; }
  .guia { display: block; }
  .historia { background: none; }
  .historia__palco, .casos::after { display: none; }
  .cena__escolha, .resposta-cena__seguir, .compartilhar, .placar-jogo { display: none; }
  /* Você sabia? no papel: todos os cartões, um embaixo do outro. */
  .sabia { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; }
  .sabia-cartao { flex-basis: 100%; break-inside: avoid; }
  .sabia-controles, .sabia-trilha, .sabia-cartao__imagem { display: none; }
}