/* Estilo das páginas de texto longo (Termos, Privacidade).
   Prioridade única: legibilidade. Sem poeira, sem luz atrás, sem itálico
   decorativo. Quem abre estas páginas está desconfiado ou com um problema, e
   texto bonito e ilegível nessa hora piora a desconfiança em vez de resolver. */

/* CORPO DO DOCUMENTO NA FONTE DO SISTEMA (20/08/2026).
   Termos e privacidade sao os unicos textos do site que a pessoa le de cabo a
   rabo procurando uma informacao especifica, e Cormorant Garamond em paragrafo
   longo cansa: traco fino, altura de x baixa e italico por padrao no tema. Os
   titulos continuam em Cinzel, entao a pagina segue sendo da mesma casa. Texto
   legal nao ganha nada em ser atmosferico; ganha em ser lido ate o fim. */
.doc {
  position: relative; z-index: 2;
  max-width: 640px; margin: 0 auto; padding: 40px 22px 0;
}

.doc h1 {
  font-family: 'Cinzel', serif; font-weight: 500;
  font-size: clamp(26px, 6.4vw, 36px); letter-spacing: .03em; line-height: 1.15;
  margin: 0; color: var(--silver);
}
.doc .atualizado {
  margin: 12px 0 0; font-family: var(--fonte-ui); font-size: 13px; color: var(--silver-dim);
}
.doc .abertura {
  margin: 26px 0 0; padding: 20px 22px; border-radius: 6px;
  border-left: 2px solid oklch(0.86 0.09 285 / .5);
  background: linear-gradient(90deg, oklch(0.86 0.09 285 / .07), transparent 82%);
  font-family: var(--fonte-ui); font-size: 15.5px; line-height: 1.62; color: oklch(0.9 0.03 293);
}

.doc h2 {
  font-family: 'Cinzel', serif; font-weight: 500;
  font-size: 15px; letter-spacing: .1em; line-height: 1.35;
  margin: 44px 0 14px; color: var(--silver);
}

.doc p {
  margin: 0 0 16px;
  font-family: var(--fonte-ui); font-size: 15px; line-height: 1.7; color: oklch(0.85 0.028 293);
}
.doc p b { color: var(--silver); font-weight: 600; }
.doc a { text-decoration: underline; text-underline-offset: 3px; }

/* O parágrafo do arrependimento. É o que mais desarma desconfiança numa página
   de vendas de infoproduto barato, então ele não pode passar despercebido. */
.doc .destaque {
  padding: 20px 22px; border-radius: 6px; margin-bottom: 16px;
  border: 1px solid oklch(0.72 0.16 150 / .38);
  background: linear-gradient(140deg, oklch(0.7 0.15 152 / .1), oklch(0.7 0.15 152 / .03));
  color: oklch(0.92 0.04 150);
}
.doc .destaque b { color: oklch(0.95 0.06 152); }

/* Aviso de saúde e segurança. Cor de alerta, não de erro. */
.doc .atencao {
  padding: 20px 22px; border-radius: 6px;
  border: 1px solid oklch(0.72 0.13 60 / .35);
  background: oklch(0.6 0.12 60 / .07);
  color: oklch(0.9 0.06 78);
}

/* Campo que ainda não tem dado real. Some sozinho quando `lib/empresa.js` for
   preenchido. Fica evidente de propósito: é pendência, não decoração. */
.doc .pendente {
  padding: 16px 18px; border-radius: 6px;
  border: 1px dashed oklch(0.8 0.14 70 / .55);
  background: oklch(0.7 0.14 70 / .09);
  color: oklch(0.9 0.07 78); font-family: var(--fonte-ui); font-size: 14px;
}

.doc ul { margin: 0 0 16px; padding: 0; list-style: none; }
.doc ul li {
  position: relative; padding-left: 26px; margin-bottom: 11px;
  font-family: var(--fonte-ui); font-size: 15px; line-height: 1.62; color: oklch(0.85 0.028 293);
}
.doc ul li::before {
  content: ''; position: absolute; left: 6px; top: .68em;
  width: 6px; height: 6px; transform: rotate(45deg);
  background: var(--spectral); opacity: .75;
}

.rodape-doc {
  margin: 52px 0 0; padding-top: 34px;
  border-top: 1px solid oklch(0.93 0.035 290 / .14);
  text-align: center;
}
.rodape-doc .btn { width: 100%; max-width: 320px; }
.rodape-doc nav { margin-top: 22px; font-family: var(--fonte-ui); font-size: 13.5px; }

@media (min-width: 768px) {
  .doc { padding: 66px 26px 0; }
}