:root {
  --verde: #0A7A50;
  --verde-claro: #19B97E;
  --verde-fundo: #EEF8F3;
  --texto: #15241D;
  --texto-suave: #4C5E56;
  --borda: #D7E7DF;
  --fundo: #FFFFFF;
  --amarelo: #F7C846;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--texto);
  background: var(--fundo);
  line-height: 1.6;
}
a { color: var(--verde); }
.topo {
  border-bottom: 1px solid var(--borda);
  background: #fff;
}
.topo .conteudo {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 14px; padding-bottom: 14px;
}
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--texto); font-weight: 800; font-size: 20px; }
.marca img { width: 36px; height: 36px; border-radius: 9px; }
.topo nav a { margin-left: 18px; text-decoration: none; font-weight: 600; font-size: 15px; }
.conteudo { max-width: 860px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }

.hero {
  background: linear-gradient(135deg, var(--verde-claro), #086B46);
  color: #fff;
  padding: 56px 0 64px;
}
.hero .conteudo { display: flex; gap: 32px; align-items: center; }
.hero img { width: 140px; height: 140px; border-radius: 32px; box-shadow: 0 12px 30px rgba(0,0,0,.18); flex-shrink: 0; }
.hero h1 { font-size: 44px; margin: 0 0 8px; line-height: 1.1; }
.hero p { font-size: 20px; margin: 0 0 20px; color: #E3FBEF; }
.botao {
  display: inline-block; background: #fff; color: var(--verde);
  padding: 12px 22px; border-radius: 999px; font-weight: 800; text-decoration: none;
}
.selo { display: inline-block; margin-left: 10px; font-size: 14px; color: #E3FBEF; }

.recursos { padding: 48px 0; }
.recursos h2 { text-align: center; margin: 0 0 28px; font-size: 28px; }
.grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cartao { background: var(--verde-fundo); border-radius: 16px; padding: 20px; }
.cartao h3 { margin: 0 0 6px; font-size: 18px; }
.cartao p { margin: 0; color: var(--texto-suave); font-size: 15px; }

.privacidade-resumo { background: var(--verde-fundo); padding: 40px 0; }
.privacidade-resumo h2 { margin-top: 0; }

.documento { padding: 32px 0 56px; }
.documento h1 { font-size: 32px; margin-bottom: 4px; }
.documento .data { color: var(--texto-suave); margin-top: 0; }
.documento h2 { font-size: 22px; margin-top: 36px; border-top: 1px solid var(--borda); padding-top: 24px; }
.documento h3 { font-size: 17px; margin-bottom: 4px; }
.documento table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 15px; }
.documento th, .documento td { text-align: left; vertical-align: top; padding: 10px; border: 1px solid var(--borda); }
.documento th { background: var(--verde-fundo); }
.tabela-rola { overflow-x: auto; }
.destaque { background: var(--verde-fundo); border-left: 4px solid var(--verde); padding: 14px 16px; border-radius: 8px; }
.indice { background: #F7FAF8; border: 1px solid var(--borda); border-radius: 12px; padding: 14px 20px; }
.indice ol { margin: 6px 0; padding-left: 20px; }

.rodape { border-top: 1px solid var(--borda); padding: 24px 0; color: var(--texto-suave); font-size: 14px; }
.rodape .conteudo { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }

@media (max-width: 680px) {
  .hero .conteudo { flex-direction: column; text-align: center; }
  .hero h1 { font-size: 36px; }
  .hero p { font-size: 18px; }
  .grade { grid-template-columns: 1fr; }
  .topo nav a { margin-left: 12px; font-size: 14px; }
  .selo { display: block; margin: 10px 0 0; }
  .documento h1 { font-size: 26px; }
}