:root {
  --azul-escuro: #0A2E6E;
  --azul: #1F78DC;
  --azul-claro: #1FA2FF;
  --verde: #39E58C;
  --texto: #1B2433;
  --texto-suave: #5A6578;
  --fundo: #F5F8FC;
  --cartao: #FFFFFF;
  --borda: #E1E7F0;
}
@media (prefers-color-scheme: dark) {
  :root {
    --texto: #E8EDF5;
    --texto-suave: #9AA6B8;
    --fundo: #0B1220;
    --cartao: #131C2E;
    --borda: #22304A;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--fundo);
  color: var(--texto);
  line-height: 1.55;
}
a { color: var(--azul-claro); }
header {
  background: linear-gradient(135deg, var(--azul-escuro), var(--azul-claro));
  color: #fff;
  padding: 20px 16px 64px;
}
.topo { max-width: 1040px; margin: 0 auto; display: flex; align-items: center; gap: 12px; }
.topo img { width: 40px; height: 40px; }
.topo strong { font-size: 20px; letter-spacing: .3px; }
.topo nav { margin-left: auto; display: flex; gap: 18px; font-size: 15px; }
.topo nav a { color: #fff; text-decoration: none; opacity: .9; }
.hero { max-width: 1040px; margin: 48px auto 0; }
.hero h1 { font-size: clamp(28px, 5vw, 44px); line-height: 1.15; margin: 0 0 12px; }
.hero p { font-size: 18px; max-width: 640px; opacity: .92; margin: 0; }
main { max-width: 1040px; margin: -36px auto 48px; padding: 0 16px; }
.grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.cartao {
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 6px 20px rgba(10, 46, 110, .06);
}
.cartao h3 { margin: 0 0 4px; font-size: 18px; }
.cartao p { margin: 0 0 14px; color: var(--texto-suave); font-size: 14px; }
.botao {
  display: inline-block;
  background: var(--azul);
  color: #fff;
  text-decoration: none;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 15px;
}
.botao.desativado { background: var(--borda); color: var(--texto-suave); pointer-events: none; }
section { margin-top: 40px; }
section h2 { font-size: 22px; margin: 0 0 12px; }
ol, ul { padding-left: 20px; }
li { margin-bottom: 6px; }
.selo { display: inline-block; font-size: 12px; background: var(--verde); color: #08351E; border-radius: 99px; padding: 2px 10px; font-weight: 700; }
footer { text-align: center; color: var(--texto-suave); font-size: 13px; padding: 24px 16px 40px; }
.texto { background: var(--cartao); border: 1px solid var(--borda); border-radius: 14px; padding: 24px; }
.texto h2 { margin-top: 28px; }
.texto h2:first-child { margin-top: 0; }
@media (max-width: 560px) {
  .topo nav { gap: 12px; font-size: 14px; }
  .topo strong { display: none; }
}