*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Barlow', sans-serif; background: #f0f7f0; color: #1a2e1a; min-height: 100vh; }

/* ── Topbar fixa ── */
.topbar-site {
  position: fixed; top: 0; left: 0; right: 0; z-index: 999;
  background: #1a3a2a;
  border-bottom: 3px solid #FFCC00;
  padding: .55rem 1.5rem;
  display: flex; align-items: center; justify-content: center; gap: .6rem;
}
.topbar-site span { font-size: .82rem; color: rgba(255,255,255,.8); }
.topbar-site strong { color: #FFCC00; }

/* ── Hero (creme claro) ── */
.hero {
  background: linear-gradient(180deg, #FFF8E7 0%, #FFEFD0 100%);
  text-align: center;
  padding: 6rem 1rem 3.5rem;
  position: relative; overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg,transparent,transparent 48px,rgba(0,0,0,.025) 48px,rgba(0,0,0,.025) 50px),
              repeating-linear-gradient(90deg,transparent,transparent 48px,rgba(0,0,0,.025) 48px,rgba(0,0,0,.025) 50px);
  pointer-events: none;
}
.hero-ball { font-size: 4rem; display: block; margin-bottom: .75rem; animation: quicar 2s ease-in-out infinite; }
@keyframes quicar { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }

.hero-titulo { display:flex; align-items:center; justify-content:center; gap:3rem; flex-wrap:wrap; }
.bandeira-flag { height: clamp(6rem, 22vw, 13rem); border-radius: 6px; box-shadow: 0 3px 10px rgba(0,0,0,.22); }

.hero h1 { font-family:'Bebas Neue',sans-serif; font-size:clamp(2.5rem,6vw,4.5rem); letter-spacing:.08em; color:#1a3a2a; line-height:1; }
.hero h1 span { color:#00793d; }
.hero-sub { font-size:1.05rem; color:#4a5a4a; margin-top:.75rem; margin-bottom:2rem; }
.hero-btns { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.btn-hero { padding:.85rem 2rem; border-radius:10px; font-family:'Bebas Neue',sans-serif; font-size:1.15rem; letter-spacing:.08em; text-decoration:none; border:none; cursor:pointer; transition:transform .15s,opacity .15s; }
.btn-hero:hover { transform:translateY(-2px); opacity:.92; }
.btn-hero.primary   { background:#00A550; color:#fff; }
.btn-hero.secondary { background:transparent; color:#1a3a2a; border:2px solid rgba(26,58,42,.35); }

/* ── Seções ── */
.section { max-width:1000px; margin:0 auto; padding:2.5rem 1.5rem; }

.section-title {
  font-family:'Bebas Neue',sans-serif; font-size:1.7rem; letter-spacing:.06em;
  color:#1a3a2a; text-align:center; margin-bottom:1.5rem;
  padding-bottom:.5rem; border-bottom:3px solid #FFCC00; display:inline-block;
  width:100%;
}

/* ── Steps ── */
.steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1rem; margin-bottom:2.5rem; }
.step {
  text-align:center; padding:1.4rem 1rem;
  background:#fff; border:1px solid #c8e6c9; border-radius:12px;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.step-num {
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%;
  background:#1a3a2a; color:#FFCC00;
  font-family:'Bebas Neue',sans-serif; font-size:1.2rem;
  margin-bottom:.65rem;
}
.step-titulo { font-weight:700; font-size:.95rem; color:#1a3a2a; margin-bottom:.35rem; }
.step-texto  { font-size:.83rem; color:#4a5a4a; line-height:1.55; }
.step-texto strong { color:#00793d; }

/* ── Cards info ── */
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1rem; margin-bottom:2.5rem; }
.card-info {
  background:#fff; border:1px solid #c8e6c9; border-radius:14px;
  padding:1.4rem 1.2rem; box-shadow:0 2px 8px rgba(0,0,0,.06);
  transition:transform .2s,box-shadow .2s;
}
.card-info:hover { transform:translateY(-3px); box-shadow:0 6px 18px rgba(0,0,0,.1); }
.card-icon  { font-size:2.2rem; display:block; margin-bottom:.65rem; }
.card-titulo{ font-family:'Bebas Neue',sans-serif; font-size:1.1rem; letter-spacing:.04em; color:#1a3a2a; margin-bottom:.45rem; }
.card-texto { font-size:.87rem; color:#4a5a4a; line-height:1.6; }
.card-texto strong { color:#00793d; }

/* ── Tabela pontuação ── */
.pontuacao-wrap {
  background:#fff; border:1px solid #c8e6c9; border-radius:14px;
  overflow:hidden; margin-bottom:1.5rem;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.pont-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:.9rem 1.4rem; border-bottom:1px solid #e8f5e8;
  gap:1rem;
}
.pont-row:last-child { border-bottom:none; }
.pont-row:hover { background:#f5fbf5; }
.pont-desc { font-weight:600; font-size:.92rem; color:#1a3a2a; }
.pont-ex   { font-size:.78rem; color:#6a8a6a; margin-top:.2rem; }
.pont-pts  { font-family:'Bebas Neue',sans-serif; font-size:1.5rem; padding:.1rem .7rem; border-radius:8px; min-width:60px; text-align:center; flex-shrink:0; }
.pts-10 { background:#d4edda; color:#155724; }
.pts-8  { background:#cce5ff; color:#004085; }
.pts-6  { background:#fff3cd; color:#856404; }
.pts-4  { background:#ffe5b4; color:#7a4000; }
.pts-0  { background:#f8d7da; color:#721c24; }
.pts-bonus { background:#e0f2f1; color:#00695c; }
.pts-none  { background:#f1f3f5; color:#6c757d; font-size:1.05rem; }
.pts-25 { background:#fff8e1; color:#7a5c00; }
.pts-15 { background:#e8eaf6; color:#283593; }

.pont-subtitulo {
  font-family:'Bebas Neue',sans-serif; font-size:1.1rem; letter-spacing:.05em;
  color:#1a3a2a; margin:2rem 0 .75rem; text-align:center;
}
.pont-subtitulo:first-of-type { margin-top:0; }
.pont-nota {
  font-size:.8rem; color:#4a5a4a; line-height:1.55;
  padding:.9rem 1.4rem; background:#f5fbf5; border-top:1px solid #e8f5e8;
}
.pont-nota strong { color:#00793d; }

/* ── CTA final ── */
.cta {
  text-align:center;
  background:linear-gradient(135deg,#1a3a2a 0%,#00A550 100%);
  border-radius:16px; padding:2.5rem 1.5rem; margin-bottom:2.5rem;
}
.cta h2 { font-family:'Bebas Neue',sans-serif; font-size:2rem; letter-spacing:.06em; color:#fff; margin-bottom:.5rem; }
.cta p  { color:rgba(255,255,255,.8); margin-bottom:1.5rem; font-size:.95rem; }

/* ── Rodapé ── */
footer { text-align:center; padding:1.5rem; font-size:.8rem; color:#6a8a6a; border-top:1px solid #c8e6c9; background:#e8f5e8; }

/* ── Modal overlay ── */
#modal-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.7); z-index:1000;
  align-items:center; justify-content:center; padding:1rem;
}
#modal-overlay.aberto { display:flex; }
.modal-close {
  position:absolute; top:-36px; right:0;
  background:none; border:none; color:#fff; font-size:1.5rem; cursor:pointer;
}

/* Estilos do modal de login */
.auth-card {
  background: #fff;
  border-radius: 20px;
  padding: 1.8rem;
  box-shadow: 0 20px 35px -10px rgba(0,0,0,0.3);
  width: 100%;
  max-width: 420px;
}
.auth-header {
  text-align: center;
  margin-bottom: 1.5rem;
}
.logo-icon { font-size: 2.5rem; display: block; margin-bottom: 0.5rem; }
.auth-header h1 { font-family: 'Bebas Neue', sans-serif; font-size: 1.8rem; letter-spacing: .06em; color: #1a3a2a; }
.auth-header p { font-size: 0.85rem; color: #6a8a6a; }
.auth-tabs {
  display: flex;
  gap: 0.5rem;
  background: #e8f5e8;
  border-radius: 12px;
  padding: 0.3rem;
  margin-bottom: 1.5rem;
}
.auth-tab {
  flex: 1;
  padding: 0.6rem;
  border: none;
  background: transparent;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.auth-tab.active {
  background: #fff;
  color: #1a3a2a;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.auth-panel { display: none; }
.auth-panel.active { display: block; }
.form-group {
  margin-bottom: 1.2rem;
}
.form-group label {
  display: block;
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 0.3rem;
  color: #1a3a2a;
}
.form-group input {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1px solid #c8e6c9;
  border-radius: 10px;
  font-size: 0.9rem;
}
.btn-primary {
  width: 100%;
  background: #00A550;
  color: #fff;
  border: none;
  padding: 0.8rem;
  border-radius: 10px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-primary:hover { background: #008a43; }
.link-esqueci-senha {
  display: block;
  text-align: center;
  margin-top: 0.9rem;
  font-size: 0.82rem;
  color: #6c757d;
  text-decoration: underline;
}
.link-esqueci-senha:hover { color: #003087; }
.alert {
  padding: 0.7rem;
  border-radius: 10px;
  margin-bottom: 1rem;
  font-size: 0.85rem;
  display: none;
}
.alert.sucesso { background: #d4edda; color: #155724; display: block; }
.alert.erro { background: #f8d7da; color: #721c24; display: block; }
.field-erro {
  display: none;
  font-size: 0.75rem;
  color: #dc3545;
  margin-top: 0.2rem;
}
.aviso-pagamento {
  display: none;
  background: #fff3cd;
  border-left: 4px solid #ffc107;
  padding: 0.8rem;
  border-radius: 8px;
  margin-top: 1rem;
  font-size: 0.8rem;
}
.auth-footer {
  text-align: center;
  font-size: 0.7rem;
  color: #6a8a6a;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid #e8f5e8;
}