/* Páginas de guía estáticas (/redacao-enem): mismo tono que el chat, sin JS. Generadas por scripts/gerar-guias.mjs. */
:root {
  --papel: oklch(98.2% 0.006 270);
  --papel-2: oklch(95.3% 0.012 270);
  --superficie: oklch(100% 0 0);
  --ink: oklch(28% 0.035 270);
  --ink-2: oklch(47% 0.03 270);
  --regua: oklch(90.5% 0.014 270);
  --guache: oklch(88.5% 0.135 90);
  --guache-forte: oklch(84% 0.15 87);
  --sobre-guache: oklch(26% 0.045 75);
  --lila: oklch(94.6% 0.032 290);
  --link: oklch(45% 0.12 270);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --papel: oklch(25.5% 0.025 268);
    --papel-2: oklch(30.5% 0.028 268);
    --superficie: oklch(29.5% 0.027 268);
    --ink: oklch(95.5% 0.01 268);
    --ink-2: oklch(80% 0.02 268);
    --regua: oklch(38.5% 0.026 268);
    --lila: oklch(33% 0.04 290);
    --link: oklch(82% 0.09 270);
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--ink);
  font: 17px/1.6 "Nunito", ui-rounded, system-ui, sans-serif;
}
a { color: var(--link); text-underline-offset: 3px; }
.topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 760px;
  margin: 0 auto;
  padding: 14px 16px;
}
.marca { color: var(--ink); font-weight: 800; font-size: 19px; text-decoration: none; }
.cta-mini, .botao {
  display: inline-block;
  background: var(--guache);
  color: var(--sobre-guache);
  font-weight: 800;
  text-decoration: none;
  border-radius: 14px;
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.cta-mini { padding: 8px 14px; font-size: 15px; }
.botao { padding: 14px 22px; font-size: 17px; }
.cta-mini:active, .botao:active { transform: scale(0.97); }
main { max-width: 760px; margin: 0 auto; padding: 0 16px 32px; }
.migalhas { font-size: 14px; color: var(--ink-2); margin: 8px 0 20px; }
h1 { font-size: clamp(28px, 6vw, 38px); line-height: 1.2; margin: 0 0 16px; font-weight: 800; text-wrap: balance; }
h2 { font-size: 23px; line-height: 1.3; margin: 36px 0 12px; font-weight: 800; }
h3 { font-size: 18px; margin: 22px 0 6px; font-weight: 800; }
.lead { font-size: 19px; color: var(--ink); }
p, li { max-width: 68ch; }
li { margin: 6px 0; }
.competencias li, .zeros li { margin: 12px 0; }
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--superficie);
  border: 1px solid var(--regua);
  border-radius: 18px;
  overflow: hidden;
  font-size: 15.5px;
  margin: 12px 0;
}
caption { text-align: left; color: var(--ink-2); font-size: 14px; padding: 10px 14px 0; background: var(--superficie); }
th, td { text-align: left; vertical-align: top; padding: 10px 14px; border-top: 1px solid var(--regua); }
thead th { border-top: 0; background: var(--papel-2); }
tbody th { white-space: nowrap; font-weight: 800; }
.cta {
  margin: 40px 0 0;
  padding: 22px;
  background: var(--lila);
  border-radius: 18px;
}
.cta-titulo { font-size: 21px; font-weight: 800; margin: 0 0 6px; }
.pequeno { font-size: 13.5px; color: var(--ink-2); }
.navega { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 32px; font-weight: 700; }
.rodape { max-width: 760px; margin: 0 auto; padding: 24px 16px 40px; border-top: 1px solid var(--regua); font-size: 14.5px; color: var(--ink-2); }
.rodape nav { line-height: 2; }
@media (max-width: 520px) {
  th, td { padding: 9px 10px; }
  .cta-mini { padding: 7px 11px; font-size: 14px; }
}