/* =====================================================================
   BOLÃO DA COPA 2026 — Estilo base (dark premium esportivo)
   Paleta: azul-noite + ouro + verde-campo
   Sem fontes externas (HostGator bloqueia CDN do Google Fonts)
   ===================================================================== */

:root{
  --bg:        #0b1020;
  --bg-2:      #0e1530;
  --card:      #141b32;
  --card-2:    #18203c;
  --line:      #243056;
  --txt:       #e8edf7;
  --mut:       #8a97b8;
  --ouro:      #f5c542;
  --ouro-2:    #e0a92b;
  --verde:     #16c172;
  --vermelho:  #ef4444;
  --azul:      #3b82f6;
  --raio:      14px;
  --sombra:    0 20px 60px rgba(0,0,0,.45);
  --fonte:     "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --display:   "Arial Narrow", "Segoe UI", system-ui, sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  font-family:var(--fonte);
  color:var(--txt);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(59,130,246,.10), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(245,197,66,.08), transparent 55%),
    var(--bg);
  min-height:100vh;
  line-height:1.55;
}

a{ color:var(--ouro); text-decoration:none; }
a:hover{ color:var(--ouro-2); }

.container{ width:100%; max-width:1080px; margin:0 auto; padding:0 20px; }

/* ----------------------------- HEADER ----------------------------- */
header.topo{
  position:sticky; top:0; z-index:50;
  background:rgba(11,16,32,.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.topo-inner{ display:flex; align-items:center; justify-content:space-between; height:64px; }
.marca{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.05rem; letter-spacing:.5px; color:var(--txt); }
.marca .tro{ font-size:1.4rem; }
.marca b{ color:var(--ouro); }
nav.menu{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
nav.menu a{
  color:var(--txt); font-size:.9rem; font-weight:600;
  padding:8px 14px; border-radius:10px; transition:.15s;
}
nav.menu a:hover{ background:var(--card-2); color:var(--ouro); }
nav.menu a.btn-nav{ background:var(--ouro); color:#0b1020; }
nav.menu a.btn-nav:hover{ background:var(--ouro-2); color:#0b1020; }

/* burger (mobile) */
.burger{ display:none; background:none; border:1px solid var(--line); color:var(--txt); border-radius:10px; padding:8px 12px; cursor:pointer; font-size:1.1rem; }

/* ------------------------------ HERO ------------------------------ */
.hero{ padding:56px 0 28px; text-align:center; }
.hero .selo{ display:inline-block; font-size:.72rem; letter-spacing:2px; text-transform:uppercase; color:var(--ouro); border:1px solid var(--line); padding:6px 14px; border-radius:999px; margin-bottom:18px; }
.hero h1{ font-family:var(--display); font-weight:800; font-size:clamp(2.2rem,6vw,3.6rem); text-transform:uppercase; letter-spacing:1px; line-height:1.05; }
.hero h1 span{ color:var(--ouro); }
.hero p{ color:var(--mut); max-width:560px; margin:14px auto 0; }

/* ------------------------------ CARDS ----------------------------- */
.grid{ display:grid; gap:18px; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }

.card{
  background:linear-gradient(160deg,var(--card),var(--card-2));
  border:1px solid var(--line);
  border-radius:var(--raio);
  padding:24px;
  box-shadow:var(--sombra);
}
.card h2{ font-size:1.15rem; margin-bottom:6px; }
.card .mut{ color:var(--mut); font-size:.9rem; }

.stat{ text-align:center; }
.stat .num{ font-family:var(--display); font-size:2.2rem; font-weight:800; color:var(--ouro); }
.stat .rot{ color:var(--mut); font-size:.8rem; text-transform:uppercase; letter-spacing:1px; }

/* ------------------------------ AUTH ------------------------------ */
.auth-wrap{ min-height:calc(100vh - 64px); display:flex; align-items:center; justify-content:center; padding:40px 20px; }
.auth-card{ width:100%; max-width:440px; }
.auth-card h1{ font-family:var(--display); text-transform:uppercase; font-size:1.8rem; letter-spacing:1px; margin-bottom:4px; }
.auth-card .sub{ color:var(--mut); font-size:.9rem; margin-bottom:22px; }
.auth-foot{ text-align:center; margin-top:18px; color:var(--mut); font-size:.88rem; }

/* ----------------------------- FORMS ------------------------------ */
.campo{ margin-bottom:16px; }
.campo label{ display:block; font-size:.82rem; color:var(--mut); margin-bottom:6px; font-weight:600; }
.campo input, .campo select, .campo textarea{
  width:100%; background:var(--bg-2); border:1px solid var(--line); color:var(--txt);
  border-radius:10px; padding:12px 14px; font-size:.95rem; font-family:inherit; transition:.15s;
}
.campo input:focus, .campo select:focus, .campo textarea:focus{
  outline:none; border-color:var(--ouro); box-shadow:0 0 0 3px rgba(245,197,66,.15);
}
.linha{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:100%; border:none; cursor:pointer; font-family:inherit; font-weight:700;
  font-size:.98rem; padding:13px 18px; border-radius:10px; transition:.15s;
  background:var(--ouro); color:#0b1020;
}
.btn:hover{ background:var(--ouro-2); transform:translateY(-1px); }
.btn-sec{ background:transparent; color:var(--txt); border:1px solid var(--line); }
.btn-sec:hover{ background:var(--card-2); }
.btn-link{ width:auto; background:none; color:var(--ouro); padding:0; }

/* ----------------------------- ALERTAS ---------------------------- */
.alerta{ border-radius:10px; padding:12px 14px; font-size:.9rem; margin-bottom:18px; border:1px solid transparent; }
.alerta ul{ margin:0; padding-left:18px; }
.alerta.erro{ background:rgba(239,68,68,.10); border-color:rgba(239,68,68,.4); color:#fecaca; }
.alerta.ok{ background:rgba(22,193,114,.10); border-color:rgba(22,193,114,.4); color:#bbf7d0; }
.alerta.info{ background:rgba(59,130,246,.10); border-color:rgba(59,130,246,.4); color:#bfdbfe; }

/* ----------------------------- FOOTER ----------------------------- */
footer.rodape{ border-top:1px solid var(--line); margin-top:60px; padding:28px 0; color:var(--mut); font-size:.82rem; text-align:center; }
footer.rodape a{ color:var(--mut); }
footer.rodape a:hover{ color:var(--ouro); }

/* ----------------------------- UTIL ------------------------------- */
.mt{ margin-top:20px; } .center{ text-align:center; } .mut{ color:var(--mut); }
.pill{ display:inline-block; font-size:.72rem; padding:3px 10px; border-radius:999px; background:var(--card-2); border:1px solid var(--line); color:var(--mut); }

/* --------------------------- RESPONSIVO --------------------------- */
@media (max-width:760px){
  .grid-3, .grid-2{ grid-template-columns:1fr; }
  .linha{ grid-template-columns:1fr; }
  nav.menu{ position:absolute; top:64px; right:0; left:0; flex-direction:column; align-items:stretch;
            background:var(--bg-2); border-bottom:1px solid var(--line); padding:12px 20px; display:none; }
  nav.menu.aberto{ display:flex; }
  nav.menu a{ padding:12px 14px; }
  .burger{ display:inline-block; }
}