/* Páginas de texto da LP (termos, privacidade, cancelamento, 404): mesmas cores e fontes do index.html, leitura em coluna estreita. */
:root {
  color-scheme: dark;
  --noite: #1b2029;
  --painel: #222935;
  --linha: #2f3846;
  --texto: #eef3f2;
  --texto-suave: #a3afbb;
  --ciano: #12c9c6;
  --verde: #17eb8c;
  --f-display: "Sora", "Segoe UI", system-ui, sans-serif;
  --f-corpo: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --f-dado: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}
* { box-sizing: border-box; }
html { background: var(--noite); }
body { background: var(--noite); color: var(--texto); font-family: var(--f-corpo); font-size: 1rem; line-height: 1.7; margin: 0; }
a { color: var(--verde); }
:focus-visible { outline: 2px solid var(--verde); outline-offset: 3px; border-radius: 4px; }
.envoltorio { max-width: 46rem; margin: 0 auto; padding-inline: 16px; }
@media (min-width: 600px) { .envoltorio { padding-inline: 32px; } }

.topo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.25rem; }
.marca { display: flex; align-items: center; gap: 0.6rem; font-family: var(--f-display); font-weight: 500; font-size: 1.25rem; color: var(--texto); text-decoration: none; }
.marca img { width: 32px; height: 32px; }
.voltar { color: var(--texto-suave); font-size: 0.9375rem; text-decoration: none; }
.voltar:hover { color: var(--texto); }

main { padding-block: 2rem 4rem; }
h1, h2, h3 { font-family: var(--f-display); letter-spacing: -0.02em; text-wrap: balance; }
h1 { font-size: clamp(1.75rem, 5vw, 2.5rem); line-height: 1.15; margin: 0 0 0.75rem; }
h2 { font-size: 1.25rem; margin: 2.5rem 0 0.75rem; padding-top: 1.5rem; border-top: 1px solid var(--linha); }
h3 { font-size: 1.0625rem; margin: 1.5rem 0 0.5rem; }
p, ul, ol { margin: 0 0 1rem; color: var(--texto-suave); }
li { margin-bottom: 0.4rem; }
strong { color: var(--texto); font-weight: 600; }
.versao { font-family: var(--f-dado); font-size: 0.8125rem; color: var(--ciano); margin-bottom: 1.5rem; }
.resumo { background: var(--painel); border: 1px solid var(--linha); border-radius: 10px; padding: 1rem 1.25rem; margin: 1.5rem 0; }
.resumo p:last-child, .resumo ul:last-child { margin-bottom: 0; }
.tabela { width: 100%; border-collapse: collapse; margin: 0 0 1rem; font-size: 0.9375rem; }
.tabela th, .tabela td { text-align: left; vertical-align: top; padding: 0.6rem 0.5rem; border-bottom: 1px solid var(--linha); color: var(--texto-suave); }
.tabela th { color: var(--texto); font-weight: 600; }
.rolagem { overflow-x: auto; }
.sumario { columns: 2 14rem; }

footer { border-top: 1px solid var(--linha); padding-block: 2rem 3rem; color: var(--texto-suave); font-size: 0.875rem; }
footer nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-bottom: 0.75rem; }
footer a { color: var(--texto-suave); }
footer a:hover { color: var(--verde); }