/* ─────────────────────────────────────────────────────────────
   SpeakUp — estilos dos documentos (termos, privacidade)

   Mesmos tokens da landing page, tratamento mais utilitário: texto
   longo para ser lido, não uma peça de marketing. Medida de ~66
   caracteres, hierarquia clara, âncoras navegáveis.
   ───────────────────────────────────────────────────────────── */
:root {
  --ground:      #0E1418;
  --surface:     #161F25;
  --surface-2:   #1D282F;
  --line:        #26343C;
  --text:        #E8EDF0;
  --text-dim:    #93A3AE;
  --text-faint:  #64757F;
  --correct:     #3DD68C;
  --wrong:       #E8654F;
  --gold:        #E5B567;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --measure: 66ch;
  --pad: clamp(1.25rem, 5vw, 2.5rem);
}

@media (prefers-color-scheme: light) {
  :root {
    --ground:      #F5F7F8;
    --surface:     #FFFFFF;
    --surface-2:   #EDF1F3;
    --line:        #D8E0E4;
    --text:        #101A20;
    --text-dim:    #53656F;
    --text-faint:  #7E8F99;
    --correct:     #12805A;
    --wrong:       #C1402B;
    --gold:        #8A5F12;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 2rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 780px; margin-inline: auto; padding-inline: var(--pad); }

/* ── topo ───────────────────────────────────────────────────── */
header.top { border-bottom: 1px solid var(--line); padding-block: 1.4rem; }
.top-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; max-width: 780px; margin-inline: auto; padding-inline: var(--pad); }
.brand { display: flex; align-items: center; gap: .55rem; font-family: var(--serif); font-size: 1.1rem; font-weight: 600; text-decoration: none; color: var(--text); }
.brand svg { width: 22px; height: 22px; flex: none; }
.top-in nav { display: flex; gap: 1.2rem; font-size: .88rem; }
.top-in nav a { color: var(--text-dim); text-decoration: none; }
.top-in nav a:hover, .top-in nav a:focus-visible { color: var(--text); }
.top-in nav a[aria-current="page"] { color: var(--correct); }

/* ── documento ──────────────────────────────────────────────── */
main { padding-block: clamp(2.5rem, 6vw, 4rem) 4rem; }

h1 { font-family: var(--serif); font-size: clamp(1.9rem, 1.4rem + 2vw, 2.7rem); line-height: 1.1; margin: 0 0 .6rem; letter-spacing: -.015em; text-wrap: balance; }
h2 { font-family: var(--serif); font-size: 1.4rem; line-height: 1.25; margin: 2.8rem 0 .7rem; letter-spacing: -.01em; scroll-margin-top: 1.5rem; }
h3 { font-size: 1rem; font-weight: 650; margin: 1.6rem 0 .4rem; }
p, li { max-width: var(--measure); }
p { margin: 0 0 1rem; }
ul, ol { margin: 0 0 1rem; padding-left: 1.4rem; }
li { margin-bottom: .45rem; }
a { color: var(--correct); text-decoration: underline; text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--correct); outline-offset: 3px; border-radius: 3px; }

.meta { font-family: var(--mono); font-size: .78rem; letter-spacing: .04em; color: var(--text-faint); text-transform: uppercase; }
.lead { font-size: 1.12rem; color: var(--text-dim); margin-bottom: 2rem; }

/* Sumário */
nav.toc { border: 1px solid var(--line); border-radius: 12px; padding: 1.2rem 1.4rem; margin: 2rem 0 3rem; background: var(--surface); }
nav.toc p { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 .7rem; }
nav.toc ol { margin: 0; padding-left: 1.3rem; font-size: .95rem; }
nav.toc li { margin-bottom: .3rem; }
nav.toc a { color: var(--text-dim); text-decoration: none; }
nav.toc a:hover, nav.toc a:focus-visible { color: var(--correct); text-decoration: underline; }

/* Caixa de destaque */
.box { border: 1px solid var(--line); border-left: 3px solid var(--correct); border-radius: 8px; background: var(--surface); padding: 1.1rem 1.3rem; margin: 1.5rem 0; }
.box :last-child { margin-bottom: 0; }
.box.aviso { border-left-color: var(--gold); }

/* Placeholder que você precisa preencher — visível de propósito */
.todo {
  background: var(--wrong); color: #fff; font-family: var(--mono);
  font-size: .82em; font-weight: 600; padding: .1em .4em; border-radius: 4px;
  letter-spacing: .02em;
}

/* Tabelas de dados */
.tabela { overflow-x: auto; margin: 1.3rem 0; border: 1px solid var(--line); border-radius: 10px; }
table { border-collapse: collapse; width: 100%; font-size: .93rem; }
th, td { text-align: left; padding: .7rem .9rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 650; background: var(--surface-2); font-size: .85rem; }
tbody tr:last-child td { border-bottom: none; }
td code { font-family: var(--mono); font-size: .88em; color: var(--gold); }

footer { border-top: 1px solid var(--line); padding-block: 2rem; color: var(--text-faint); font-size: .85rem; }
.foot-in { max-width: 780px; margin-inline: auto; padding-inline: var(--pad); display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; justify-content: space-between; }
footer a { color: var(--text-dim); }