/* public/legal.css — miolo de /termos e /privacidade (legal/pagina.mjs). Cabeçalho, menu e
   rodapé são os da casca (public/index.html, public/estilo.css) e não são tocados aqui: este
   arquivo só estiliza o `<div class="legal-corpo">` com o texto jurídico extraído dos .html
   antigos. Só token do tema "garagem" (public/tema.css) — nenhuma cor literal.

   Plano de design (Skill: frontend-design):
   - Cor: --bg (fundo da página, já pintado pela casca), --surface (nenhum cartão novo — texto
     corrido não precisa de caixa), --text/--text2/--muted (hierarquia de leitura), --line
     (fio fino entre cláusulas), --accent (só no número/título da cláusula) e --info (link).
   - Tipo: o mesmo sans do resto do site pro corpo (nunca uma serifada nova só pra esta
     página — o produto não tem identidade editorial própria, teria sido bitola importada);
     --serif-num (mesma mono já usada em preço/km/data em todo o site) só no selo de versão,
     mantendo a leitura de "isto é um dado", não decoração.
   - Layout: coluna única, alinhada à esquerda, 72ch de largura máxima (o próprio texto já é
     dividido em cláusulas numeradas — "1. O que é…", "2. Links de parceiros…" — então a
     numeração NÃO é adicionada por aqui: já está na prosa. Cada h2 vira o início de uma
     cláusula nova, marcado por um fio fino acima.
   - Assinatura: o selo de versão (data), em mono tabular, ao lado do título — mesma linguagem
     numérica do preço/km do produto, aplicada aqui ao "quando isto foi revisado por último". */

.legal-corpo{
  max-width:72ch;
  margin:0 auto;
  padding:40px 20px 72px;
  color:var(--text2);
}
.legal-corpo h1{
  font-size:28px;
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--text);
  margin:0 0 10px;
  line-height:1.2;
}
.legal-corpo .versao{
  display:inline-block;
  font-family:var(--serif-num, ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace);
  font-size:12.5px;
  color:var(--muted);
  border:1px solid var(--line);
  border-radius:999px;
  padding:3px 11px;
  margin:0 0 30px;
}
.legal-corpo > p:first-of-type{
  font-size:15.5px;
  line-height:1.7;
  color:var(--text2);
  margin:0 0 8px;
}
.legal-corpo h2{
  font-size:16.5px;
  font-weight:800;
  color:var(--accent);
  letter-spacing:-.01em;
  margin:40px 0 12px;
  padding-top:24px;
  border-top:1px solid var(--line);
}
.legal-corpo p{
  font-size:14.5px;
  line-height:1.7;
  color:var(--text2);
  margin:0 0 14px;
}
.legal-corpo ul{
  margin:0 0 16px;
  padding-left:22px;
}
.legal-corpo li{
  font-size:14.5px;
  line-height:1.65;
  color:var(--text2);
  margin-bottom:8px;
}
.legal-corpo strong{color:var(--text);font-weight:700}
.legal-corpo a{color:var(--info);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.legal-corpo a:hover{text-decoration:none}
.legal-corpo a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}

@media (max-width:480px){
  .legal-corpo{padding:28px 16px 56px}
  .legal-corpo h1{font-size:23px}
}

/* Desempate com app.js: ele não conhece /termos nem /privacidade — no boot, sempre esconde
   #ssr e cai em mostrarHome() (mesma nota de analises.css/faq.css). Um seletor por #id vence
   `[hidden]{display:none!important}` de estilo.css mesmo com !important dos dois lados.
   legal/pagina.mjs marca `body.pagina-legal` nesta trilha. */
body.pagina-legal #ssr{display:block!important}
body.pagina-legal #viewHome{display:none!important}
body.pagina-legal #viewModelo{display:none!important}