/* Estilo das páginas de conteúdo (SEO/GEO).
   Mesmos tokens de cor da landing, mas layout de artigo em vez de layout de
   venda: coluna estreita, tipografia de leitura longa, claro e escuro. */

:root {
  --fundo: #FFFFFF;
  --fundo-secao: #F6F8FB;
  --cartao: #FFFFFF;
  --tinta: #1B2330;
  --tinta-suave: #5B6472;
  --linha: rgba(3, 38, 101, 0.12);
  --verde: #2d6a4f;
  --verde-suave: #F0F7F2;
  --azul: #13387F;
  --ambar: #8a6100;
  --ambar-suave: #FFF8E6;
  --sombra: 0 12px 32px rgba(19, 56, 127, 0.10);
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #0E1420; --fundo-secao: #131B29; --cartao: #17202F;
    --tinta: #E8ECF4; --tinta-suave: #9AA5B8; --linha: rgba(232, 236, 244, 0.12);
    --verde: #4CA07A; --verde-suave: #16241D; --azul: #7FA3EA;
    --ambar: #E8C170; --ambar-suave: #241E10;
    --sombra: 0 12px 32px rgba(0, 0, 0, 0.35);
  }
}
:root[data-theme="dark"] {
  --fundo: #0E1420; --fundo-secao: #131B29; --cartao: #17202F;
  --tinta: #E8ECF4; --tinta-suave: #9AA5B8; --linha: rgba(232, 236, 244, 0.12);
  --verde: #4CA07A; --verde-suave: #16241D; --azul: #7FA3EA;
  --ambar: #E8C170; --ambar-suave: #241E10;
}
:root[data-theme="light"] {
  --fundo: #FFFFFF; --fundo-secao: #F6F8FB; --cartao: #FFFFFF;
  --tinta: #1B2330; --tinta-suave: #5B6472; --linha: rgba(3, 38, 101, 0.12);
  --verde: #2d6a4f; --verde-suave: #F0F7F2; --azul: #13387F;
  --ambar: #8a6100; --ambar-suave: #FFF8E6;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.65;
  font-size: 17px;
}
img { max-width: 100%; display: block; }

.topo {
  border-bottom: 1px solid var(--linha);
  background: var(--fundo);
}
.topo .interno {
  max-width: 760px; margin: 0 auto; padding: 16px 24px;
  display: flex; align-items: center; gap: 10px;
}
.topo a { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tinta); font-weight: 800; }
.topo img { width: 32px; height: 32px; border-radius: 8px; }

main { max-width: 760px; margin: 0 auto; padding: 40px 24px 72px; }

.migalha { font-size: 14px; color: var(--tinta-suave); margin-bottom: 20px; }
.migalha a { color: var(--verde); text-decoration: none; }
.migalha a:hover { text-decoration: underline; }

h1 { font-size: 38px; line-height: 1.18; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 16px; }
h2 { font-size: 25px; line-height: 1.25; font-weight: 800; margin: 44px 0 14px; }
h3 { font-size: 19px; font-weight: 700; margin: 30px 0 10px; }
@media (max-width: 720px) { h1 { font-size: 30px; } h2 { font-size: 22px; } body { font-size: 16px; } }

p { margin: 0 0 16px; }
.resumo { font-size: 19px; color: var(--tinta-suave); margin-bottom: 28px; }
main a { color: var(--verde); }

ul, ol { margin: 0 0 18px; padding-left: 22px; }
li { margin-bottom: 8px; }

.caixa {
  background: var(--fundo-secao);
  border: 1px solid var(--linha);
  border-radius: 14px;
  padding: 20px 22px;
  margin: 26px 0;
}
.caixa h3 { margin-top: 0; }
.caixa :last-child { margin-bottom: 0; }

.aviso {
  background: var(--ambar-suave);
  border-left: 4px solid var(--ambar);
  border-radius: 0 10px 10px 0;
  padding: 16px 20px;
  margin: 26px 0;
  font-size: 16px;
}
.aviso strong { color: var(--tinta); }
.aviso :last-child { margin-bottom: 0; }

table { width: 100%; border-collapse: collapse; margin: 22px 0; font-size: 16px; }
th, td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--linha); vertical-align: top; }
th { font-weight: 700; }
.rolagem { overflow-x: auto; }

/* Superfície grande usa o cinza de seção, como a landing faz. O
   --verde-suave da identidade só aparece em elemento pequeno (pílula de
   rótulo, quadradinho de ícone) — esticado num bloco inteiro ele vira um
   verde barrento que não é a marca. O verde entra aqui só no botão. */
.chamada {
  background: var(--fundo-secao);
  border: 1px solid var(--linha);
  border-radius: 16px;
  padding: 26px;
  margin: 40px 0 8px;
  text-align: center;
}
.chamada h2 { margin-top: 0; }
.botao {
  display: inline-block;
  background: var(--verde);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  padding: 14px 26px;
  border-radius: 999px;
  margin-top: 8px;
}
.miudo { font-size: 14px; color: var(--tinta-suave); margin-top: 12px; }

.fontes { font-size: 15px; color: var(--tinta-suave); }
.fontes li { margin-bottom: 6px; }

footer {
  border-top: 1px solid var(--linha);
  background: var(--fundo-secao);
  padding: 32px 24px;
  font-size: 14px;
  color: var(--tinta-suave);
}
footer .interno { max-width: 760px; margin: 0 auto; }
footer a { color: var(--verde); }