/* Cores do time: mude aqui e o site inteiro acompanha */
:root{
  --fundo:#050d1c; --azul:#0d2a5c; --vidro:rgba(255,255,255,.05); --linha:rgba(255,255,255,.12);
  --ouro:#e2a019; --ouro2:#f6c453; --texto:#f4efe3; --suave:#9fb0cc; --raio:20px; --max:1000px;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{color:var(--texto);font:400 16px/1.6 Montserrat,system-ui,sans-serif;padding-bottom:5.5rem;overflow-x:clip;-webkit-text-size-adjust:100%;
  background:radial-gradient(900px 500px at 50% -10%,#14377a55,transparent 70%),radial-gradient(600px 400px at 100% 40%,#e2a01914,transparent 70%),var(--fundo);background-attachment:fixed}
img{max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--ouro);outline-offset:3px}
h1,h2,h3{font-family:Cinzel,serif;line-height:1.1;text-wrap:balance}
h2{font-size:clamp(1.8rem,6vw,2.6rem);margin-bottom:1.25rem}

/* Topo */
.topo{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  padding:.6rem 1.1rem;background:linear-gradient(#050d1ccc,transparent)}
.marca{display:flex;align-items:center;gap:.6rem;text-decoration:none;font:900 1.05rem Cinzel,serif}
.marca img{width:38px;height:38px;object-fit:contain}
.menu-btn{display:none}
.so-desk{display:none}

/* Menu: barra flutuante no celular, links no topo no computador */
.menu{position:fixed;left:50%;bottom:max(12px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:30;
  display:flex;gap:.15rem;padding:.35rem;width:calc(100% - 24px);max-width:420px;
  background:rgba(10,24,52,.8);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--linha);border-radius:999px}
.menu a{flex:1;text-align:center;white-space:nowrap;padding:.7rem .25rem;border-radius:999px;font-size:clamp(.7rem,3.4vw,.85rem);font-weight:500;text-decoration:none;color:var(--suave);transition:background .25s,color .25s}
.menu a.ativo{background:var(--ouro);color:#07142b;font-weight:700}
.menu a.menu-cta:not(.ativo){color:var(--ouro2)}

/* Início */
.hero{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:5.5rem 1.25rem 6.5rem;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;width:min(110vw,720px);aspect-ratio:1;top:50%;left:50%;translate:-50% -58%;
  background:radial-gradient(circle,#e2a01944,#0d2a5c33 45%,transparent 70%);filter:blur(10px);z-index:-1}
.hero-escudo{width:min(52vw,230px);height:auto;filter:drop-shadow(0 20px 40px #000a);animation:entra 1s cubic-bezier(.2,.8,.2,1) both}
.hero h1{font-size:clamp(2.6rem,12vw,5.5rem);font-weight:900;margin:1.2rem 0 .8rem;max-width:12ch;
  background:linear-gradient(180deg,#fff7d6,var(--ouro) 60%,#b87b00);-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:sobe .9s .15s cubic-bezier(.2,.8,.2,1) both}
.hero-frase{color:var(--suave);max-width:30rem;margin-bottom:1.5rem;animation:sobe .9s .3s both}
.contagem{width:100%;max-width:26rem;padding:1rem;margin-bottom:1.5rem;background:var(--vidro);border:1px solid var(--linha);
  border-radius:var(--raio);backdrop-filter:blur(10px);animation:sobe .9s .45s both}
.contagem small{display:block;color:var(--suave);font-size:.85rem;margin-bottom:.6rem}
.relogio{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}
.relogio span{display:grid;font-size:.72rem;color:var(--suave);background:#0007;border-radius:12px;padding:.5rem 0}
.relogio b{font:900 1.7rem Cinzel,serif;color:var(--ouro2);font-variant-numeric:tabular-nums}
.numeros{list-style:none;padding:0;display:flex;gap:2rem;margin-bottom:1.75rem;animation:sobe .9s .55s both}
.numeros strong{display:block;font:900 1.6rem Cinzel,serif}
.numeros span{font-size:.8rem;color:var(--suave)}
.btn{display:inline-block;background:linear-gradient(135deg,var(--ouro2),var(--ouro));color:#07142b;font:700 1rem Montserrat,sans-serif;
  padding:.95rem 1.8rem;border:0;border-radius:999px;text-decoration:none;cursor:pointer;min-height:48px;
  box-shadow:0 10px 30px #e2a01933;transition:transform .2s,box-shadow .2s;animation:sobe .9s .65s both}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 36px #e2a01955}
@keyframes entra{from{opacity:0;transform:scale(.8) translateY(20px)}}
@keyframes sobe{from{opacity:0;transform:translateY(18px)}}

/* Faixa de resultados em movimento */
.ticker{overflow:hidden;border-block:1px solid var(--linha);background:#0003;padding:.8rem 0}
.ticker-trilho{display:flex;width:max-content;animation:corre 35s linear infinite}
.ticker:hover .ticker-trilho{animation-play-state:paused}
.ticker span{font:700 .9rem Montserrat,sans-serif;white-space:nowrap;display:flex;align-items:center}
.ticker span::after{content:"";width:7px;height:7px;margin:0 1.6rem;background:var(--ouro);rotate:45deg}
@keyframes corre{to{transform:translateX(-25%)}}

/* Seções */
.secao{max-width:var(--max);margin:0 auto;padding:4rem 1.25rem}
.js .secao{opacity:0;transform:translateY(28px);transition:opacity .7s,transform .7s}
.js .secao.visto{opacity:1;transform:none}
.sub{color:var(--suave);margin:-.5rem 0 1.5rem}
.abas{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem}
.abas button{background:var(--vidro);color:var(--suave);border:1px solid var(--linha);border-radius:999px;
  padding:.55rem 1.1rem;font:500 .9rem Montserrat,sans-serif;cursor:pointer;min-height:42px;transition:.2s}
.abas button[aria-selected="true"]{background:var(--ouro);border-color:var(--ouro);color:#07142b;font-weight:700}
.lista{display:grid;gap:1rem}
.vazio{color:var(--suave)}

/* Cartões */
.jogo,.noticia,.atleta{background:var(--vidro);border:1px solid var(--linha);border-radius:var(--raio);
  backdrop-filter:blur(8px);transition:transform .25s,border-color .25s}
.jogo:hover,.noticia:hover,.atleta:hover{transform:translateY(-4px);border-color:var(--ouro)}
.jogo{padding:1.2rem 1.3rem}
.jogo small{color:var(--suave);display:block}
.jogo .vs{font:700 1.2rem Cinzel,serif;margin:.3rem 0}
.jogo .placar{font:900 2.2rem Cinzel,serif;color:var(--ouro2);line-height:1.1}
.jogo .status{display:inline-block;margin-top:.5rem;font-size:.8rem;font-weight:700;color:var(--ouro2)}
.jogo.vitoria{border-color:#e2a01977}

/* Elenco: carrossel que desliza com o dedo */
.grade{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -1.25rem;padding:.25rem 1.25rem 1rem;scrollbar-width:none}
.grade::-webkit-scrollbar{display:none}
.atleta{flex:0 0 68%;max-width:250px;scroll-snap-align:start;overflow:hidden}
.atleta .foto{aspect-ratio:4/5;display:grid;place-items:center;background:linear-gradient(160deg,#14377a,#07142b);
  font:900 6.5rem Cinzel,serif;color:transparent;-webkit-text-stroke:2px var(--ouro)}
.atleta img{width:100%;height:100%;object-fit:cover;display:block}
.atleta .info{padding:.9rem 1rem 1rem}
.atleta h3{font-size:1.05rem}
.atleta p{font-size:.85rem;color:var(--suave)}

/* Notícias */
.noticia{padding:1.3rem}
.noticia small{color:var(--ouro2);font-weight:700}
.noticia h3{font-size:1.25rem;margin:.4rem 0 .5rem}
.noticia p{color:var(--suave);font-size:.95rem}

/* Formulário */
.form{display:grid;gap:1rem;max-width:34rem}
.form label{display:grid;min-width:0;gap:.35rem;font-size:.88rem;color:var(--suave)}
.form input,.form textarea{background:var(--vidro);border:1px solid var(--linha);border-radius:14px;padding:.85rem 1rem;
  color:var(--texto);font:400 1rem Montserrat,sans-serif;width:100%;min-width:0;min-height:3rem;appearance:none;-webkit-appearance:none;transition:border-color .2s}
.form input:focus,.form textarea:focus{border-color:var(--ouro);outline:0}
.form .btn{animation:none;width:100%}
.info{margin-top:1.5rem;color:var(--suave);font-size:.9rem}

/* Rodapé */
.rodape{text-align:center;padding:2rem 1.25rem;border-top:1px solid var(--linha);color:var(--suave);font-size:.85rem}
.redes a{color:var(--ouro2);margin:0 .6rem}

@media (min-width:720px){
  body{padding-bottom:0}
  .topo{padding:.8rem 2rem;background:rgba(5,13,28,.7);backdrop-filter:blur(14px);border-bottom:1px solid var(--linha)}
  .menu{position:static;transform:none;width:auto;padding:0;gap:.25rem;background:none;border:0;backdrop-filter:none;max-width:none}
  .hero{padding-bottom:2.5rem}
  .so-desk{display:inline}
  .form .btn{width:auto;justify-self:start}
  .menu a{flex:none;padding:.5rem 1rem;font-size:.9rem}
  .lista{grid-template-columns:repeat(2,1fr)}
  .atleta{flex-basis:240px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before{animation:none!important;transition:none!important}
  .js .secao{opacity:1;transform:none}
}