:root {
  --creme: #f6f1e5;
  --papel: #fffdf8;
  /*
   * Texto sobre fundo escuro ou colorido (cabeçalho, hero, faixas, rodapé).
   *
   * Existe separado do --papel de propósito: --papel é cor de SUPERFÍCIE e
   * vira verde-escuro no modo escuro. Usar ele como cor de TEXTO fazia toda
   * faixa escura virar texto escuro sobre fundo escuro — o h1 do hero sumia.
   * Este aqui é claro nos dois temas, porque o feltro e a madeira continuam
   * escuros nos dois.
   */
  --tinta-clara: #f6f1e5;
  --tinta: #1e1a15;
  --tinta-suave: #554c40;
  --feltro-escuro: #0c3222;
  --feltro: #14563a;
  --feltro-claro: #1d6f4a;
  --madeira: #6f4020;
  --madeira-clara: #8b5430;
  --madeira-escura: #40240e;
  --dourado: #c8a02c;
  --copas: #b0261d;
  --borda: #ddd1bb;
  --sombra: 0 1px 2px rgba(30,26,21,.08), 0 6px 18px rgba(30,26,21,.06);
  --raio: 12px;
  --largura: 1120px;
  --serifada: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sansserifa: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--creme);
  color: var(--tinta);
  font-family: var(--sansserifa);
  font-size: 18px;
  line-height: 1.65;
}

/* Alvo grande e foco que aparece de verdade. Teclado e leitor de tela
   dependem disso, e este público usa zoom do navegador com frequência. */
a { color: var(--feltro); text-underline-offset: 3px; }
a:hover { color: var(--feltro-claro); }
:focus-visible {
  outline: 3px solid var(--dourado);
  outline-offset: 3px;
  border-radius: 4px;
}

h1, h2, h3 { font-family: var(--serifada); line-height: 1.2; margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: clamp(2rem, 5vw, 3.1rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1rem; max-width: 68ch; }
ul, ol { max-width: 68ch; padding-left: 1.3em; }
li { margin-bottom: .45em; }

.faixa { padding: 3.5rem 1.25rem; }
.recheio { max-width: var(--largura); margin: 0 auto; }
.estreito { max-width: 720px; margin: 0 auto; }

/* ---------------------------------------------------------------- cabeçalho */
.topo {
  background: var(--feltro-escuro);
  border-bottom: 4px solid var(--madeira);
  color: var(--tinta-clara);
}
.topo-recheio {
  max-width: var(--largura);
  margin: 0 auto;
  padding: .75rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.marca {
  font-family: var(--serifada);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--tinta-clara);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: 48px;
}
.marca span { color: var(--dourado); }
.menu { display: flex; gap: .25rem; flex-wrap: wrap; margin-left: auto; align-items: center; }
.menu a {
  color: var(--tinta-clara);
  text-decoration: none;
  padding: .6rem .9rem;
  border-radius: 8px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  font-weight: 600;
}
.menu a:hover { background: rgba(255,255,255,.12); color: var(--tinta-clara); }
.menu a[aria-current="page"] { background: rgba(255,255,255,.16); color: var(--dourado); }

/* ------------------------------------------------------------------- botões */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 56px;
  padding: .85rem 1.6rem;
  border: 0;
  border-radius: 10px;
  font: inherit;
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  cursor: pointer;
  background: var(--dourado);
  color: var(--madeira-escura);
  box-shadow: 0 3px 0 #9c7c16;
}
.botao:hover { background: #d9b03a; color: var(--madeira-escura); }
.botao:active { transform: translateY(2px); box-shadow: 0 1px 0 #9c7c16; }
.botao-vazado {
  background: transparent;
  color: var(--tinta-clara);
  border: 2px solid rgba(255,255,255,.55);
  box-shadow: none;
}
.botao-vazado:hover { background: rgba(255,255,255,.12); color: var(--tinta-clara); }
.botao-escuro { background: var(--feltro); color: var(--tinta-clara); box-shadow: 0 3px 0 var(--feltro-escuro); }
.botao-escuro:hover { background: var(--feltro-claro); color: var(--tinta-clara); }

/* --------------------------------------------------------------------- hero */
.hero {
  background:
    radial-gradient(120% 100% at 50% 0%, var(--feltro-claro) 0%, var(--feltro) 45%, var(--feltro-escuro) 100%);
  color: var(--tinta-clara);
  border-bottom: 6px solid var(--madeira);
  text-align: center;
  padding: 4rem 1.25rem 4.5rem;
}
.hero h1 { color: var(--tinta-clara); margin-bottom: .25em; }
.hero p { color: #e6f0e9; font-size: 1.25rem; margin-left: auto; margin-right: auto; }
.hero .acoes { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem; }
.hero .selo {
  display: inline-block;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 999px;
  padding: .3rem 1rem;
  font-size: .95rem;
  color: var(--dourado);
  font-weight: 600;
  margin-bottom: 1.25rem;
}

/* -------------------------------------------------------------------- cards */
.grade { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.carta {
  background: var(--papel);
  color: var(--tinta);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}
a.carta { text-decoration: none; color: var(--tinta); }
a.carta:hover { border-color: var(--feltro); box-shadow: 0 2px 4px rgba(30,26,21,.1), 0 10px 24px rgba(20,86,58,.14); }
.carta-icone { font-size: 3rem; line-height: 1; margin-bottom: .5rem; color: var(--tinta); }
.carta-icone.vermelha { color: var(--copas); }
.carta h3 { font-size: 1.4rem; margin-bottom: .35rem; }
.carta p { font-size: 1rem; color: var(--tinta-suave); margin-bottom: 1rem; }
.carta .ficha { margin-top: auto; }
.ficha { display: flex; gap: .5rem; flex-wrap: wrap; }
.ficha span {
  font-size: .85rem;
  font-weight: 600;
  background: #eee6d5;
  color: var(--madeira-escura);
  border-radius: 999px;
  padding: .25rem .7rem;
}

.divisao { align-items: flex-start; }
.escudo {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 12px 12px 16px 16px;
  background: var(--cor);
  color: #fff;
  font-family: var(--serifada);
  font-weight: 700;
  font-size: 1.6rem;
  margin-bottom: .75rem;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.25);
}
.passos { list-style: none; padding: 0; counter-reset: passo; display: grid; gap: 1rem; max-width: none; }
.passos li {
  counter-increment: passo;
  background: var(--papel);
  color: var(--tinta);
  border: 1px solid var(--borda);
  border-left: 5px solid var(--dourado);
  border-radius: var(--raio);
  padding: 1rem 1.25rem 1rem 3.4rem;
  position: relative;
}
.passos li::before {
  content: counter(passo);
  position: absolute;
  left: 1rem;
  top: 1rem;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: var(--feltro);
  color: var(--tinta-clara);
  font-weight: 700;
  font-size: .95rem;
  display: grid;
  place-items: center;
}
.passos strong { display: block; font-size: 1.1rem; }

.faixa-madeira {
  background: linear-gradient(180deg, var(--madeira-clara), var(--madeira));
  color: var(--tinta-clara);
  border-top: 4px solid var(--madeira-escura);
  border-bottom: 4px solid var(--madeira-escura);
}
.faixa-madeira h2, .faixa-madeira p { color: var(--tinta-clara); }

.faixa-feltro { background: var(--feltro-escuro); color: var(--tinta-clara); }
.faixa-feltro h2 { color: var(--tinta-clara); }
.faixa-feltro p { color: #dfeae3; }

/* ----------------------------------------------------------------- formulário */
.formulario { background: var(--papel); color: var(--tinta); border: 1px solid var(--borda); border-radius: var(--raio); padding: 1.75rem; box-shadow: var(--sombra); }
.campo { margin-bottom: 1.25rem; }
.campo label { display: block; font-weight: 700; margin-bottom: .35rem; font-size: 1.05rem; color: var(--tinta); }
.campo .dica { display: block; font-weight: 400; font-size: .95rem; color: var(--tinta-suave); margin-bottom: .5rem; }
.campo select {
  width: 100%;
  min-height: 56px;
  padding: .75rem 1rem;
  font: inherit;
  font-size: 1.05rem;
  color: var(--tinta);
  background: #fff;
  border: 2px solid var(--borda);
  border-radius: 10px;
}
.campo select:focus { border-color: var(--feltro); }
.campo input {
  width: 100%;
  min-height: 56px;
  padding: .75rem 1rem;
  font: inherit;
  font-size: 1.05rem;
  color: var(--tinta);
  background: #fff;
  border: 2px solid var(--borda);
  border-radius: 10px;
}
.campo input:focus { border-color: var(--feltro); }
.campo input::placeholder { color: var(--tinta-suave); opacity: 1; }
.prova {
  border-left: 5px solid var(--dourado);
  background: #f0e9d8;
  color: var(--madeira-escura);
  padding: .9rem 1.1rem;
  border-radius: 0 10px 10px 0;
  margin-bottom: 1.5rem;
}
.aviso { border-radius: 10px; padding: 1rem 1.25rem; margin-bottom: 1.25rem; font-weight: 600; }
.aviso-ok { background: #e3f2e8; border: 1px solid #9ec9ad; color: #14563a; }
.aviso-erro { background: #fbe9e7; border: 1px solid #e0a49e; color: #8e1f18; }

details.pergunta {
  background: var(--papel);
  color: var(--tinta);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 0;
  margin-bottom: .75rem;
}
details.pergunta summary {
  cursor: pointer;
  padding: 1.1rem 1.25rem;
  font-weight: 700;
  font-size: 1.1rem;
  min-height: 48px;
  list-style: none;
}
details.pergunta summary::-webkit-details-marker { display: none; }
details.pergunta summary::after { content: " +"; color: var(--feltro); float: right; font-size: 1.4rem; line-height: 1; }
details.pergunta[open] summary::after { content: " –"; }
details.pergunta .resposta { padding: 0 1.25rem 1.25rem; }
details.pergunta .resposta p { margin-bottom: 0; }

/* -------------------------------------------------------------------- rodapé */
.rodape { background: var(--feltro-escuro); color: #cfe0d6; border-top: 6px solid var(--madeira); padding: 3rem 1.25rem 2rem; }
.rodape a { color: var(--tinta-clara); text-decoration: none; }
.rodape a:hover { color: var(--dourado); text-decoration: underline; }
.rodape h3 { color: var(--dourado); font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; font-family: var(--sansserifa); }
.rodape ul { list-style: none; padding: 0; }
.rodape .assinatura { border-top: 1px solid rgba(255,255,255,.15); margin-top: 2rem; padding-top: 1.5rem; font-size: .95rem; }

.rolagem { overflow-x: auto; margin-bottom: 2rem; }
.tabela { border-collapse: collapse; width: 100%; font-size: .95rem; background: var(--papel); }
.tabela th, .tabela td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid var(--borda); white-space: nowrap; }
.tabela th { background: #efe7d6; color: var(--madeira-escura); font-weight: 700; }
.migalha { font-size: .95rem; color: var(--tinta-suave); padding: 1rem 1.25rem 0; max-width: var(--largura); margin: 0 auto; }
.migalha a { color: var(--tinta-suave); }

.pular {
  position: absolute; left: -9999px;
  background: var(--dourado); color: var(--madeira-escura);
  padding: 1rem 1.5rem; font-weight: 700; border-radius: 0 0 8px 0; z-index: 10;
}
.pular:focus { left: 0; top: 0; position: fixed; }

@media (max-width: 640px) {
  body { font-size: 17px; }
  .faixa { padding: 2.5rem 1.1rem; }
  .menu { width: 100%; margin-left: 0; }
  .botao { width: 100%; }
  .hero .acoes .botao { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Modo escuro: o feltro vira o fundo e o creme vira a tinta. Não é inversão
   automática — o verde e a madeira continuam mandando na identidade. */
@media (prefers-color-scheme: dark) {
  :root {
    --creme: #101a15;
    --papel: #17251e;
    --tinta: #ece5d6;
    --tinta-suave: #a9b8ae;
    --borda: #2b3b32;
    --copas: #e2645a;
    --sombra: 0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.3);
  }
  a { color: #7fc9a1; }
  a:hover { color: #a4dcbc; }
  .carta p { color: var(--tinta-suave); }
  .ficha span { background: #23342b; color: #cfe0d6; }
  .campo input, .campo select { background: #0e1712; color: var(--tinta); }
  .botao-escuro { background: var(--feltro-claro); }
  .prova { background: #23342b; color: #e7dcc4; }
  .tabela th { background: #23342b; color: #e7dcc4; }
  .aviso-ok { background: #143323; border-color: #2c6b48; color: #b7e5c8; }
  .aviso-erro { background: #3a1a17; border-color: #7d372f; color: #f0b8b1; }
}