/* =========================================================
   REI PELÉ CURITIBA — design tokens
   Preto / Dourado / Branco — identidade oficial
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Space+Mono:wght@400;700&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --preto:        #08080a;
  --preto-2:      #131316;
  --preto-3:      #1c1c20;
  --dourado:      #d4af37;
  --dourado-2:    #f3d979;
  --dourado-3:    #8a6a1f;
  --branco:       #f7f4ec;
  --cinza:        #9a978c;
  --linha:        rgba(212,175,55,.18);
  --sombra:       0 20px 50px rgba(0,0,0,.55);

  --display: "Anton", "Arial Narrow", sans-serif;
  --mono:    "Space Mono", "Courier New", monospace;
  --corpo:   "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  --maxw: 1220px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--preto);
  color:var(--branco);
  font-family:var(--corpo);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family:var(--display); font-weight:400; letter-spacing:.01em; margin:0; text-transform:uppercase; }
p{ margin:0; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
::selection{ background:var(--dourado); color:var(--preto); }
:focus-visible{ outline:2px solid var(--dourado-2); outline-offset:3px; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ---------- textures / grass ---------- */
.textura-campo{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 2px, transparent 2px 140px),
    radial-gradient(120% 90% at 50% -10%, rgba(212,175,55,.14), transparent 60%);
}

/* ---------- top nav ---------- */
.topo{
  position:sticky; top:0; z-index:100;
  background:rgba(8,8,10,.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linha);
}
.topo .barra{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px; max-width:var(--maxw); margin:0 auto;
}
.marca{ display:flex; align-items:center; gap:10px; font-family:var(--display); font-size:18px; letter-spacing:.03em; }
.marca .brasao{
  width:36px; height:36px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--dourado-2), var(--dourado) 55%, var(--dourado-3) 100%);
  display:grid; place-items:center; color:var(--preto); font-family:var(--display); font-size:15px;
  box-shadow:0 0 0 2px var(--preto), 0 0 0 3px var(--dourado-3);
}
.marca small{ display:block; font-family:var(--corpo); font-size:9px; color:var(--dourado); letter-spacing:.18em; font-weight:600; }

.nav-desktop{ display:flex; gap:2px; }
.nav-desktop a{
  font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; font-weight:600;
  color:var(--cinza); padding:10px 13px; border-radius:4px; position:relative; transition:color .2s;
}
.nav-desktop a:hover, .nav-desktop a.ativo{ color:var(--branco); }
.nav-desktop a.ativo::after{
  content:""; position:absolute; left:13px; right:13px; bottom:5px; height:2px; background:var(--dourado);
}
.btn-inscreva{
  border:1px solid var(--dourado); color:var(--dourado) !important; padding:9px 16px !important;
  border-radius:3px; margin-left:6px;
}
.btn-inscreva:hover{ background:var(--dourado); color:var(--preto) !important; }

.menu-toggle{
  display:none; background:none; border:1px solid var(--linha); border-radius:4px;
  width:40px; height:36px; color:var(--branco); cursor:pointer; font-size:18px;
}
.nav-mobile{
  display:none; flex-direction:column; background:var(--preto-2); border-top:1px solid var(--linha);
}
.nav-mobile.aberto{ display:flex; }
.nav-mobile a{ padding:14px 24px; border-bottom:1px solid var(--linha); font-size:13px; letter-spacing:.06em; text-transform:uppercase; font-weight:600; color:var(--cinza); }
.nav-mobile a.ativo{ color:var(--dourado); }

@media (max-width:940px){
  .nav-desktop{ display:none; }
  .menu-toggle{ display:block; }
}

/* ---------- hero silhouettes ---------- */
.hero-jogadores{ position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none; }
.jogador-silhueta{
  position:absolute; bottom:-2%; opacity:.16;
  filter:drop-shadow(0 0 26px rgba(212,175,55,.35));
  transform:translateY(0);
  animation:flutuar 9s ease-in-out infinite;
}
.jogador-silhueta svg{ fill:var(--branco); }
.jogador-silhueta.dourado svg{ fill:var(--dourado); opacity:.5; }
@keyframes flutuar{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-16px) rotate(.6deg); }
}

/* ---------- page hero (used on inner pages) ---------- */
.hero-pagina{
  position:relative; padding:120px 0 60px; border-bottom:1px solid var(--linha);
  background:
    radial-gradient(90% 60% at 15% 0%, rgba(212,175,55,.12), transparent 60%),
    linear-gradient(180deg, var(--preto-2), var(--preto));
  overflow:hidden;
}
.eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--dourado); display:flex; align-items:center; gap:10px; margin-bottom:16px;
}
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--dourado); }
.hero-pagina h1{ font-size:clamp(38px,6vw,68px); line-height:.98; position:relative; z-index:1; }
.hero-pagina .lead{ max-width:640px; color:var(--cinza); margin-top:16px; font-size:16px; position:relative; z-index:1; }

/* ---------- sections / cards ---------- */
section{ position:relative; padding:70px 0; }
.titulo-secao{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:36px; flex-wrap:wrap; }
.titulo-secao h2{ font-size:clamp(28px,4vw,42px); }
.numero-fundo{
  font-family:var(--display); font-size:120px; color:transparent; -webkit-text-stroke:1px var(--linha);
  position:absolute; top:-30px; right:0; z-index:0; line-height:1; user-select:none; pointer-events:none;
}

.cartao{
  background:var(--preto-2); border:1px solid var(--linha); border-radius:8px; padding:24px;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.cartao:hover{ transform:translateY(-4px); border-color:var(--dourado-3); box-shadow:var(--sombra); }

.grade{ display:grid; gap:20px; }
.grade-2{ grid-template-columns:repeat(2,1fr); }
.grade-3{ grid-template-columns:repeat(3,1fr); }
.grade-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ .grade-3,.grade-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .grade-2,.grade-3,.grade-4{ grid-template-columns:1fr; } }

.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.reveal.visivel{ opacity:1; transform:translateY(0); }

/* ---------- botões ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:13px;
  letter-spacing:.05em; text-transform:uppercase; padding:14px 26px; border-radius:3px; cursor:pointer;
  border:1px solid transparent; transition:transform .2s, box-shadow .2s, background .2s, color .2s;
}
.btn-ouro{ background:linear-gradient(135deg, var(--dourado-2), var(--dourado)); color:var(--preto); }
.btn-ouro:hover{ transform:translateY(-2px); box-shadow:0 10px 30px rgba(212,175,55,.35); }
.btn-linha{ border-color:var(--dourado-3); color:var(--branco); }
.btn-linha:hover{ background:rgba(212,175,55,.08); border-color:var(--dourado); }

/* ---------- badge/escudo genérico ---------- */
.escudo{
  width:64px; height:64px; border-radius:50%; flex-shrink:0;
  background:radial-gradient(circle at 35% 30%, var(--dourado-2), var(--dourado) 55%, var(--dourado-3) 100%);
  display:grid; place-items:center; color:var(--preto); font-family:var(--display); font-size:20px;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.25);
}
.escudo.mini{ width:40px; height:40px; font-size:13px; }
.escudo.foto{ background:#fff; overflow:hidden; padding:3px; }
.escudo.foto img{ width:100%; height:100%; object-fit:contain; border-radius:50%; display:block; }
.escudo.vaga{ background:transparent; border:2px dashed var(--dourado-3); color:var(--dourado-3); font-size:11px; box-shadow:none; }
.tag-confirmado{ display:inline-block; background:rgba(212,175,55,.12); color:var(--dourado); font-size:10px; letter-spacing:.08em; text-transform:uppercase; padding:3px 9px; border-radius:20px; border:1px solid var(--dourado-3); margin-top:6px; }

/* ---------- barra de dados rápidos ---------- */
.barra-dados{ background:var(--preto-2); border-top:1px solid var(--linha); border-bottom:1px solid var(--linha); }
.barra-dados .grade{ grid-template-columns:repeat(7,1fr); }
.dado{ text-align:center; padding:26px 10px; border-left:1px solid var(--linha); }
.dado:first-child{ border-left:none; }
.dado .valor{ font-family:var(--mono); font-weight:700; font-size:22px; color:var(--dourado); }
.dado .rotulo{ font-size:10.5px; color:var(--cinza); text-transform:uppercase; letter-spacing:.1em; margin-top:6px; }
@media (max-width:900px){ .barra-dados .grade{ grid-template-columns:repeat(4,1fr);} .dado:nth-child(4n+1){border-left:none;} }
@media (max-width:560px){ .barra-dados .grade{ grid-template-columns:repeat(2,1fr);} .dado:nth-child(odd){border-left:none;} .dado{border-left:1px solid var(--linha);} }

/* ---------- placar / scoreboard (flip digits) ---------- */
.contagem{ display:flex; gap:14px; flex-wrap:wrap; }
.digito-bloco{ text-align:center; }
.digito{
  font-family:var(--mono); font-weight:700; font-size:clamp(30px,4vw,46px); background:var(--preto);
  border:1px solid var(--dourado-3); border-radius:6px; padding:10px 4px; min-width:64px; color:var(--dourado-2);
  box-shadow:inset 0 0 20px rgba(212,175,55,.08);
}
.digito-rotulo{ font-size:10px; letter-spacing:.14em; color:var(--cinza); text-transform:uppercase; margin-top:8px; }

/* ---------- tabela de classificação ---------- */
.tabela-wrap{ overflow-x:auto; border:1px solid var(--linha); border-radius:8px; }
table.classificacao{ width:100%; border-collapse:collapse; min-width:720px; }
table.classificacao th{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--dourado);
  text-align:left; padding:14px 12px; background:var(--preto-2); border-bottom:1px solid var(--linha); position:sticky; top:0;
}
table.classificacao td{ padding:13px 12px; border-bottom:1px solid var(--linha); font-size:14px; }
table.classificacao tr:hover td{ background:rgba(212,175,55,.05); }
table.classificacao tr.zona-g4 td:first-child{ box-shadow:inset 3px 0 0 var(--dourado); }
.time-nome{ display:flex; align-items:center; gap:10px; font-weight:600; }

/* ---------- jogo card ---------- */
.jogo{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px; padding:22px; position:relative;
}
.jogo .equipe{ display:flex; align-items:center; gap:12px; }
.jogo .equipe.direita{ flex-direction:row-reverse; text-align:right; }
.jogo .placar{ font-family:var(--mono); font-size:26px; font-weight:700; color:var(--dourado-2); text-align:center; }
.jogo .placar .vs{ font-size:12px; color:var(--cinza); display:block; letter-spacing:.1em; }
.jogo-meta{ display:flex; gap:14px; flex-wrap:wrap; font-size:11.5px; color:var(--cinza); margin-top:16px; padding-top:16px; border-top:1px dashed var(--linha); font-family:var(--mono); text-transform:uppercase; letter-spacing:.04em; }
.status-tag{ font-size:10px; letter-spacing:.1em; text-transform:uppercase; padding:4px 10px; border-radius:20px; border:1px solid var(--dourado-3); color:var(--dourado); position:absolute; top:14px; right:22px; }
.status-tag.ao-vivo{ background:var(--dourado); color:var(--preto); border-color:var(--dourado); animation:pulsar 1.6s infinite; }
@keyframes pulsar{ 0%,100%{ box-shadow:0 0 0 0 rgba(212,175,55,.5);} 50%{ box-shadow:0 0 0 8px rgba(212,175,55,0);} }

/* ---------- jogador card ---------- */
.jogador-card{ position:relative; overflow:hidden; text-align:center; padding:0; }
.jogador-foto{
  height:210px; position:relative; overflow:hidden;
  background:linear-gradient(180deg, var(--preto-3), var(--preto-2));
  display:grid; place-items:end center;
}
.jogador-foto svg{ width:150px; opacity:.9; transition:transform .35s ease; fill:var(--dourado-3); }
.jogador-card:hover .jogador-foto svg{ transform:scale(1.06) translateY(-4px); }
.jogador-foto .num-fundo{
  position:absolute; top:6px; left:10px; font-family:var(--display); font-size:52px; color:rgba(212,175,55,.14);
}
.jogador-info{ padding:16px; }
.jogador-info .nome{ font-family:var(--display); font-size:16px; letter-spacing:.02em; }
.jogador-info .pos{ font-size:11px; color:var(--dourado); text-transform:uppercase; letter-spacing:.1em; margin-top:2px; }
.jogador-stats{ display:flex; justify-content:center; gap:16px; margin-top:12px; font-family:var(--mono); font-size:12px; color:var(--cinza); }
.jogador-stats b{ color:var(--branco); display:block; font-size:15px; }

/* ---------- footer ---------- */
footer{ background:var(--preto-2); border-top:1px solid var(--linha); padding:60px 0 24px; margin-top:40px; }
.rodape-grade{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; }
@media (max-width:800px){ .rodape-grade{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .rodape-grade{ grid-template-columns:1fr; } }
footer h4{ font-size:12px; letter-spacing:.14em; color:var(--dourado); margin-bottom:14px; }
footer ul li{ margin-bottom:9px; }
footer ul a{ color:var(--cinza); font-size:13.5px; }
footer ul a:hover{ color:var(--branco); }
.rodape-base{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-top:44px; padding-top:22px; border-top:1px solid var(--linha); font-size:12px; color:var(--cinza); }

/* ---------- WhatsApp flutuante ---------- */
.zap-flutuante{
  position:fixed; bottom:22px; right:22px; z-index:200; width:56px; height:56px; border-radius:50%;
  background:var(--dourado); color:var(--preto); display:grid; place-items:center; box-shadow:0 10px 30px rgba(0,0,0,.5);
  font-size:26px; transition:transform .2s;
}
.zap-flutuante:hover{ transform:scale(1.08); }

/* ---------- misc utilitários ---------- */
.centro{ text-align:center; }
.mt-lg{ margin-top:48px; }
.tag{
  display:inline-block; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid var(--dourado-3); color:var(--dourado); padding:5px 10px; border-radius:20px;
}
.divisor-ouro{ height:2px; width:64px; background:linear-gradient(90deg, var(--dourado), transparent); margin:18px 0; }


@media (max-width:768px){ .wrap,.container{width:100%!important;padding:12px!important;} .grade,.grade-3,.grade-4{display:grid!important;grid-template-columns:1fr!important;} table{display:block;overflow-x:auto;} input,select,textarea,button{max-width:100%;} }