/* Estilo das páginas legais (privacidade, termos, exclusão de dados).
 *
 * Existe como arquivo separado — e não embutido em cada página, como faz o
 * build do canvas — porque são três documentos com a MESMA cara e texto longo.
 * Triplicar o CSS à mão garantiria que um dia as três divergissem.
 *
 * A paleta e as fontes são as do site: mesmas cores do canvas do Claude
 * Design, mesmas famílias já carregadas do Google Fonts. */

:root {
  --fundo:        #0b0609;
  --superficie:   #180e14;
  --borda:        #261a22;
  --borda-clara:  #2c1c24;
  --texto:        #f2f0ee;
  --texto-2:      #c9c5bf;
  --texto-3:      #a5a19c;
  --texto-4:      #6f6c68;
  --destaque:     #ff5733;
  --atencao:      #ffc300;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto-2);
  font-family: 'IBM Plex Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--destaque); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Cabeçalho ─────────────────────────────────────────────────────────── */
header.topo {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 16px 32px;
  background: rgba(11, 6, 9, 0.85);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--borda);
}
header.topo .marca {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 800; font-size: 18px; color: var(--texto);
  letter-spacing: -0.02em;
}
header.topo .marca img { width: 28px; height: 28px; }
header.topo .marca span { color: var(--destaque); }
header.topo nav { display: flex; gap: 22px; flex-wrap: wrap; }
header.topo nav a { color: var(--texto-3); font-size: 14px; font-weight: 500; }
header.topo nav a:hover { color: var(--texto); text-decoration: none; }

/* ── Corpo ─────────────────────────────────────────────────────────────── */
main { max-width: 820px; margin: 0 auto; padding: 56px 24px 80px; }

.selo {
  display: inline-block; margin-bottom: 14px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--destaque);
}

h1 {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: clamp(30px, 5vw, 44px); font-weight: 800;
  line-height: 1.12; letter-spacing: -0.03em;
  color: var(--texto); margin: 0 0 10px;
}

.data {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 13px; color: var(--texto-4);
  margin: 0 0 40px; padding-bottom: 22px;
  border-bottom: 1px solid var(--borda);
}

h2 {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 22px; font-weight: 700; letter-spacing: -0.02em;
  color: var(--texto); margin: 48px 0 14px;
}

h3 {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 17px; font-weight: 600;
  color: var(--texto); margin: 30px 0 10px;
}

p, li { color: var(--texto-2); }
p { margin: 0 0 16px; }
ul, ol { margin: 0 0 18px; padding-left: 22px; }
li { margin-bottom: 8px; }
strong { color: var(--texto); font-weight: 600; }

/* ── Blocos de destaque ────────────────────────────────────────────────── */
.caixa {
  background: var(--superficie);
  border: 1px solid var(--borda-clara);
  border-radius: 12px;
  padding: 20px 22px;
  margin: 24px 0;
}
.caixa p:last-child, .caixa ul:last-child { margin-bottom: 0; }
.caixa.aviso { border-left: 3px solid var(--atencao); }
.caixa.acao  { border-left: 3px solid var(--destaque); }

.email {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 15px; color: var(--destaque);
  word-break: break-all;
}

/* ── Tabelas ───────────────────────────────────────────────────────────── */
.rolagem { overflow-x: auto; margin: 22px 0; }
table {
  width: 100%; border-collapse: collapse;
  font-size: 14.5px; min-width: 520px;
}
th, td {
  text-align: left; vertical-align: top;
  padding: 11px 14px;
  border-bottom: 1px solid var(--borda);
}
th {
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 600; color: var(--texto);
  background: var(--superficie);
  white-space: nowrap;
}
td { color: var(--texto-2); }

/* ── Rodapé ────────────────────────────────────────────────────────────── */
footer.base {
  border-top: 1px solid var(--borda);
  padding: 32px 24px 44px;
  text-align: center;
}
footer.base nav { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin-bottom: 14px; }
footer.base nav a { color: var(--texto-3); font-size: 14px; }
footer.base p { color: var(--texto-4); font-size: 13px; margin: 0; }

@media (max-width: 640px) {
  header.topo { padding: 14px 18px; flex-direction: column; align-items: flex-start; gap: 12px; }
  header.topo nav { gap: 16px; }
  main { padding: 36px 20px 60px; }
}