/* =============================================================================
   TO PRO JOGO - home.css: a pagina inicial aberta (toprojogo.com sem login)
   =============================================================================

   So o index.html carrega esta folha. Todo nome comeca com "hp-" (home
   publica), para nunca casar com nada das outras telas. As cores, as fontes,
   os raios e o vidro sao os tokens do app.css e do novo.css (var(--brand),
   var(--ink-800), var(--raio)...): no tema claro e no escuro a pagina troca
   junto com o resto do app, sem regra propria de tema alem das poucas
   marcadas abaixo.

   Diferente das telas do app, esta pagina usa a largura inteira no
   computador: o corpo nao vira a coluna de 480px (.app). O conteudo fica
   numa faixa central de ate 1120px.
   ========================================================================== */

/* ---- Ate o servidor responder se ha sessao, nada aparece ------------------ */
html.hp-checando .hp,
html.hp-checando .hp-pular{ visibility:hidden; }

body.hp-corpo{ padding:0; background:var(--fundo,var(--ink-900)); overflow-x:hidden; }
html.hp-travado, html.hp-travado body{ overflow:hidden; }
html.hp-com-tela, html.hp-com-tela body{ overflow:hidden; }
/* [hidden] tem de vencer o display das classes (.btn e display:block). */
.hp [hidden], .hp-tela [hidden], .hp-trava [hidden], #folhaQuadra [hidden], #folhaEntrar [hidden]{ display:none !important; }

.hp{ min-height:100vh; min-height:100dvh; }
.hp-faixa{ width:100%; max-width:1120px; margin:0 auto; padding:0 16px; }
@media (min-width:720px){ .hp-faixa{ padding:0 24px; } }

.hp-pular{ position:absolute; left:12px; top:-60px; z-index:100; background:var(--brand); color:var(--sobre-brand,#1a0d05);
  padding:10px 14px; border-radius:12px; font-weight:700; }
.hp-pular:focus{ top:12px; }

.hp :focus-visible, .hp-tela :focus-visible, .hp-trava :focus-visible{
  outline:2px solid var(--brand); outline-offset:3px; border-radius:10px; }

/* ---- Barra de cima ---------------------------------------------------------- */
.appbar.hp-topo{ padding-left:max(16px, calc((100% - 1120px) / 2 + 16px));
  padding-right:max(16px, calc((100% - 1120px) / 2 + 16px)); }
@media (min-width:720px){
  .appbar.hp-topo{ padding-left:max(24px, calc((100% - 1120px) / 2 + 24px));
    padding-right:max(24px, calc((100% - 1120px) / 2 + 24px)); }
}
.hp-logo{ flex:1; text-align:left; font-size:18px; color:var(--txt); }
.hp-topo .hp-logo{ flex:1; }
.hp-menu{ display:none; gap:4px; }
.hp .hp-topo .hp-menu a{ color:var(--txt); font-size:14px; font-weight:600; letter-spacing:-.01em;
  padding:8px 12px; border-radius:999px; opacity:.82; }
.hp-menu a:hover{ opacity:1; background:var(--ink-700); }
@media (min-width:880px){ .hp-menu{ display:flex; } .hp-topo .hp-logo{ flex:0 0 auto; margin-right:auto; } }
.btn.sm.hp-entrar{ width:auto; flex:none; padding:9px 18px; border-radius:999px; }

/* ---- Heroi ------------------------------------------------------------------ */
.hp-heroi{ position:relative; overflow:hidden; overflow:clip; padding:28px 0 36px; }
.hp-heroi-luz{ position:absolute; inset:-30% -20% auto auto; width:90vw; height:90vw; max-width:900px; max-height:900px;
  background:radial-gradient(closest-side, rgba(var(--brand-rgb,255,122,46),.32), rgba(var(--brand-rgb,255,122,46),0));
  pointer-events:none; }
.hp-heroi-grade{ position:relative; display:grid; grid-template-columns:minmax(0,1fr); gap:30px; align-items:center; }
.hp-heroi-grade > *, .hp-times-grade > *, .hp-arena > *, .hp-rodape-grade > *{ min-width:0; }
@media (min-width:900px){ .hp-heroi{ padding:56px 0 64px; } .hp-heroi-grade{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:40px; } }

.hp-selo-topo{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; color:var(--dim);
  background:var(--ink-800); border-radius:999px; padding:7px 12px; box-shadow:var(--sombra-leve,none); }
.hp-selo-topo i{ width:7px; height:7px; border-radius:50%; background:var(--brand); box-shadow:0 0 10px var(--brand); }

.hp-titulo{ margin:16px 0 14px; font-size:clamp(38px, 9vw, 68px); line-height:1.02; font-weight:800; letter-spacing:-.045em; color:var(--txt); }
.hp-titulo b{ display:block; margin-top:8px; font-size:clamp(22px, 4.4vw, 34px); line-height:1.12; letter-spacing:-.035em;
  background:linear-gradient(100deg, var(--brand-lt) 0%, var(--brand) 45%, var(--moment,#FF375F) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.hp-lead{ font-size:16.5px; line-height:1.6; color:var(--dim); max-width:560px; }
.hp-acoes{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.hp-acoes .btn{ width:auto; flex:1 1 220px; }
@media (min-width:560px){ .hp-acoes .btn{ flex:0 0 auto; padding-left:26px; padding-right:26px; } }

.hp-numeros{ display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); gap:10px; margin-top:26px; max-width:560px; }
.hp-numeros[hidden]{ display:none; }
.hp-num{ background:var(--ink-800); border-radius:18px; padding:14px 14px 12px; box-shadow:var(--sombra-leve,none); }
.hp-num b{ display:block; font-size:28px; font-weight:800; letter-spacing:-.04em; color:var(--txt); font-variant-numeric:tabular-nums; }
.hp-num span{ display:block; font-size:12.5px; color:var(--dim); margin-top:2px; line-height:1.35; }
.hp-numeros .hp-fonte{ grid-column:1 / -1; margin-top:2px; }

/* O celular do heroi: o lance mais recente em laco, mudo. */
.hp-heroi-tela{ display:flex; justify-content:center; }
/* A moldura de celular generica (estilo iPhone, sem marca nenhuma): cantos
   bem arredondados, borda escura fina e a ilha discreta no alto. Desenho
   proprio em CSS, o mesmo do celular do heroi, e e ela que veste TODO video
   e lance da pagina: o heroi, os cartoes do FeedPlay, a live das quadras
   (deitada) e, no computador, o FeedPlay em tela cheia. A tela de dentro
   (.hp-moldura-tela) recorta o conteudo com o raio de dentro. */
.hp-moldura{ --hp-borda:7px; --hp-raio:36px; position:relative; display:block; padding:var(--hp-borda); border-radius:var(--hp-raio);
  background:linear-gradient(160deg,#2B2B30,#0B0B0C); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), 0 18px 40px -24px rgba(0,0,0,.7); }
.hp-moldura::before{ content:""; position:absolute; z-index:4; top:calc(var(--hp-borda) + 7px); left:50%; transform:translateX(-50%);
  width:28%; max-width:86px; aspect-ratio:7 / 2; border-radius:999px; background:#000;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07); pointer-events:none; }
.hp-moldura-tela{ position:relative; display:block; width:100%; height:100%; border-radius:calc(var(--hp-raio) - var(--hp-borda));
  overflow:hidden; background:#000; isolation:isolate; }
/* Deitada (a live, em 16:9): a ilha vai para a lateral esquerda. */
.hp-moldura-deitada{ --hp-raio:30px; }
.hp-moldura-deitada::before{ top:50%; left:calc(var(--hp-borda) + 6px); transform:translateY(-50%); width:auto; height:26%; max-width:none; aspect-ratio:2 / 7; }

.hp-celular{ --hp-borda:9px; --hp-raio:42px; position:relative; width:min(270px, 72vw); aspect-ratio:9 / 18.5; border-radius:42px; padding:9px;
  background:linear-gradient(160deg,#2B2B30,#0B0B0C); box-shadow:0 40px 80px -30px rgba(var(--brand-rgb,255,122,46),.55),
  inset 0 0 0 1px rgba(255,255,255,.08); }
.hp-celular-tela{ position:relative; width:100%; height:100%; border-radius:34px; overflow:hidden; background:#000; }
.hp-celular-tela video, .hp-celular-tela img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.hp-celular-vazio{ position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:10px; color:#F5F5F7;
  text-align:center; padding:18px; background:radial-gradient(120% 80% at 80% 0%, rgba(255,122,46,.45), rgba(255,122,46,0) 60%), #0B0B0C; }
.hp-celular-vazio b{ font-size:18px; letter-spacing:-.03em; }
.hp-celular-vazio small{ font-size:12px; color:#AEAEB2; }
.hp-celular-legenda{ position:absolute; left:20px; right:20px; bottom:24px; color:#fff; font-size:12.5px; line-height:1.4;
  text-shadow:0 1px 8px rgba(0,0,0,.8); pointer-events:none; }
.hp-celular-legenda b{ display:block; font-size:13.5px; }
.hp-celular-legenda .tag{ margin-bottom:6px; display:inline-block; }

/* O brasao em CSS (mesmo desenho do assets/img/brasao.svg, como imagem). */
.hp-brasao{ display:block; width:64px; height:64px; background:url("../img/brasao.svg?v=brasao-r11") center / contain no-repeat; }

/* ---- Secoes ----------------------------------------------------------------- */
.hp-secao{ padding:48px 0; }
.hp-secao-escura{ background:var(--ink-800); }
@media (min-width:900px){ .hp-secao{ padding:72px 0; } }
.hp-sobre{ font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--brand-txt,var(--brand)); margin-bottom:8px; }
.hp-sobre .tag{ font-size:10px; }
.hp-h2{ font-size:clamp(26px, 5.4vw, 40px); line-height:1.08; font-weight:800; letter-spacing:-.04em; color:var(--txt); }
.hp-sub{ font-size:15px; line-height:1.6; color:var(--dim); margin-top:10px; max-width:640px; }
.hp-sec-cab{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:22px; }
.hp-fonte{ font-size:11px; line-height:1.55; color:var(--dim); margin-top:14px; }
.hp-fonte[hidden]{ display:none; }

/* ---- Como funciona ---------------------------------------------------------- */
.hp-passos{ list-style:none; display:grid; gap:12px; margin-top:24px; counter-reset:none; padding:0; }
@media (min-width:760px){ .hp-passos{ grid-template-columns:repeat(3, 1fr); gap:16px; } }
.hp-passo{ position:relative; background:var(--ink-800); border-radius:var(--raio,22px); padding:22px 20px 20px; box-shadow:var(--sombra-leve,none); overflow:hidden; }
.hp-passo-n{ position:absolute; right:14px; top:2px; font-size:84px; font-weight:800; letter-spacing:-.06em; line-height:1;
  color:var(--ink-700); pointer-events:none; }
.hp-passo-ico{ position:relative; width:46px; height:46px; border-radius:14px; display:grid; place-items:center;
  background:rgba(var(--brand-rgb,255,122,46),.16); color:var(--brand-txt,var(--brand)); margin-bottom:14px; }
.hp-passo-ico svg{ width:22px; height:22px; }
.hp-passo h3{ position:relative; font-size:20px; font-weight:800; letter-spacing:-.03em; color:var(--txt); margin-bottom:6px; }
.hp-passo p{ position:relative; font-size:14px; line-height:1.55; color:var(--dim); }

/* ---- FeedPlay: a faixa de lances -------------------------------------------- */
.hp-feed{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(200px, 62%); gap:12px; overflow-x:auto;
  scroll-snap-type:x mandatory; padding-bottom:18px; scrollbar-width:none; justify-items:center; }
.hp-feed::-webkit-scrollbar{ display:none; }
@media (min-width:640px){ .hp-feed{ grid-auto-columns:minmax(220px, 1fr); grid-auto-flow:column; } }
@media (min-width:900px){ .hp-feed{ grid-auto-flow:row; grid-template-columns:repeat(3, 1fr); overflow:visible; } }
/* Cada cartao e um celular (.hp-moldura): o botao e a moldura, e a
   .hp-moldura-tela de dentro guarda a capa, o play e a legenda. */
.hp-lance{ position:relative; scroll-snap-align:start; aspect-ratio:9 / 18.5; max-width:300px;
  border:0; cursor:pointer; color:#fff; text-align:left; font:inherit; width:100%; }
.hp-lance img, .hp-lance video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.hp-lance-sem-capa{ position:absolute; inset:0; background:radial-gradient(120% 80% at 80% 0%, rgba(255,122,46,.5), rgba(255,122,46,0) 62%), #121214; }
/* A tela sai do fluxo (absoluta, na medida da borda): assim a altura do
   cartao vem so da proporcao, igual ao esqueleto, nos dois motores (o
   WebKit somava a altura do conteudo de um <button> a do aspect-ratio). */
.hp-lance .hp-moldura-tela{ position:absolute; inset:var(--hp-borda); width:auto; height:auto; background:#0B0B0C; }
.hp-lance .hp-moldura-tela::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.78) 100%); }
.hp-lance-play{ position:absolute; z-index:2; left:50%; top:50%; transform:translate(-50%,-50%); width:58px; height:58px; border-radius:50%;
  display:grid; place-items:center; background:rgba(28,28,30,.55); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); }
.hp-lance-play::before{ content:""; margin-left:4px; border-style:solid; border-width:10px 0 10px 16px; border-color:transparent transparent transparent #fff; }
.hp-lance-info{ display:block; position:absolute; z-index:2; left:14px; right:14px; bottom:14px; font-size:12.5px; line-height:1.4; }
.hp-lance-info b{ display:block; font-size:14px; font-weight:700; }
.hp-lance-info span{ display:block; color:rgba(255,255,255,.78); }
.hp-lance.hp-bloqueado img, .hp-lance.hp-bloqueado .hp-lance-sem-capa{ filter:blur(14px) saturate(1.2); transform:scale(1.15); }
.hp-lance-cadeado{ position:absolute; z-index:3; inset:0; display:grid; place-content:center; justify-items:center; gap:10px; text-align:center; padding:18px; }
.hp-lance-cadeado svg{ width:34px; height:34px; }
.hp-lance-cadeado b{ font-size:16px; letter-spacing:-.02em; }
.hp-lance-cadeado small{ font-size:12px; color:rgba(255,255,255,.8); }
.hp-esqueleto-feed{ display:contents; }
.hp-esqueleto-feed i{ width:100%; max-width:300px; aspect-ratio:9 / 18.5; border-radius:36px; background:linear-gradient(90deg,var(--ink-700) 25%,var(--ink-600) 50%,var(--ink-700) 75%);
  background-size:200% 100%; animation:hpBrilho 1.4s ease-in-out infinite; }
@keyframes hpBrilho{ from{ background-position:200% 0; } to{ background-position:-200% 0; } }

/* ---- FeedPlay em tela cheia ------------------------------------------------- */
.hp-tela{ position:fixed; inset:0; z-index:860; background:#000; color:#fff; }
.hp-tela[hidden]{ display:none; }
.hp-tela-lista{ position:absolute; inset:0; overflow-y:auto; scroll-snap-type:y mandatory; overscroll-behavior:contain; scrollbar-width:none; }
.hp-tela-lista::-webkit-scrollbar{ display:none; }
.hp-cartao{ position:relative; height:100%; min-height:100%; scroll-snap-align:start; scroll-snap-stop:always; overflow:hidden; }
.hp-cartao video, .hp-cartao img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#000; }
.hp-cartao-info{ position:absolute; left:16px; right:16px; bottom:calc(22px + env(safe-area-inset-bottom)); z-index:2; font-size:14px; line-height:1.45;
  text-shadow:0 1px 10px rgba(0,0,0,.85); }
.hp-cartao-info b{ display:block; font-size:16px; }
.hp-cartao-info p{ margin-top:6px; color:rgba(255,255,255,.86); }
.hp-cartao-num{ display:flex; gap:14px; margin-top:8px; font-size:12.5px; color:rgba(255,255,255,.82); }
.hp-cartao-trava{ background:radial-gradient(120% 80% at 80% 0%, rgba(255,122,46,.4), rgba(255,122,46,0) 60%), #0B0B0C; }
.hp-cartao-trava img{ filter:blur(18px); transform:scale(1.2); opacity:.7; }
.hp-tela-fechar, .hp-tela-som{ position:absolute; z-index:5; top:calc(12px + env(safe-area-inset-top)); width:42px; height:42px; border-radius:50%;
  border:0; color:#fff; font-size:24px; line-height:1; display:grid; place-items:center; cursor:pointer;
  background:rgba(28,28,30,.6); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); }
.hp-tela-fechar{ left:12px; }
.hp-tela-som{ right:12px; }
.hp-tela-som svg{ width:20px; height:20px; }
@media (min-width:720px){
  .hp-tela-lista{ left:50%; width:min(480px, 100%); transform:translateX(-50%); }
}
/* No computador o FeedPlay em tela cheia tambem vem dentro do celular (no
   celular de verdade a tela cheia ja e o proprio aparelho). A coluna vira a
   tela da moldura: borda escura fina, cantos de celular e a ilha no alto. */
@media (min-width:720px) and (min-height:560px){
  .hp-tela-lista{ top:24px; bottom:auto; height:calc(100vh - 48px); height:calc(100dvh - 48px);
    width:calc((100vh - 48px) * 9 / 19.5); width:calc((100dvh - 48px) * 9 / 19.5); max-width:calc(100vw - 48px);
    border:10px solid #1C1C1E; border-radius:54px; background:#000;
    box-shadow:0 0 0 1px rgba(255,255,255,.12), 0 40px 90px -30px rgba(var(--brand-rgb,255,122,46),.45); }
  .hp-tela::after{ content:""; position:absolute; z-index:4; top:42px; left:50%; transform:translateX(-50%);
    width:92px; height:26px; border-radius:999px; background:#000; box-shadow:inset 0 0 0 1px rgba(255,255,255,.07); pointer-events:none; }
}

/* ---- A trava (fixa, sem fechar) --------------------------------------------- */
.hp-trava{ position:fixed; inset:0; z-index:880; display:grid; place-items:center; padding:20px;
  background:rgba(0,0,0,.62); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.hp-trava[hidden]{ display:none; }
.hp-trava-caixa{ width:100%; max-width:380px; background:var(--folha,var(--ink-800)); color:var(--txt); border-radius:30px; padding:26px 22px 22px;
  text-align:center; box-shadow:0 30px 80px -20px rgba(0,0,0,.7); animation:hpSobe .32s cubic-bezier(.2,.9,.3,1); }
.hp-trava-brasao{ margin:0 auto 14px; width:58px; height:58px; }
.hp-trava-caixa h2{ font-size:22px; line-height:1.18; font-weight:800; letter-spacing:-.035em; }
.hp-trava-caixa p{ font-size:14.5px; line-height:1.55; color:var(--dim); margin:10px 0 18px; }
.hp-trava-caixa .btn + .btn{ margin-top:10px; }
@keyframes hpSobe{ from{ transform:translateY(18px); opacity:0; } to{ transform:none; opacity:1; } }

/* ---- Ao vivo ---------------------------------------------------------------- */
/* Duas ou mais lives: linhas de --hp-col cartoes (home.js escolhe pela
   quantidade), e quem sobra na ultima linha estica, sem buraco. Uma live so:
   .hp-vivo-destaque, abaixo. */
.hp-vivos{ display:flex; flex-wrap:wrap; gap:16px; }
.hp-vivo{ flex:1 1 100%; min-width:0; background:var(--ink-800); border-radius:var(--raio,22px); overflow:hidden; box-shadow:var(--sombra-leve,none); }
@media (min-width:760px){ .hp-vivos > .hp-vivo{ flex:1 1 calc(50% - 8px); } .hp-vivos-um > .hp-vivo{ flex-basis:100%; } }
@media (min-width:1020px){ .hp-vivos > .hp-vivo{ flex-basis:calc((100% - (var(--hp-col, 2) - 1) * 16px) / var(--hp-col, 2)); } .hp-vivos-um > .hp-vivo{ flex-basis:100%; } }

/* Uma live: o cartao da largura da secao, com o mesmo peso do aviso de
   "nenhuma quadra" (raio 28px, a mesma sombra). No computador o player 16:9
   grande a esquerda e as informacoes a direita; no celular, uma embaixo da
   outra. */
.hp-vivo-destaque{ display:grid; grid-template-columns:minmax(0, 1fr); border-radius:28px;
  background:radial-gradient(80% 90% at 100% 0%, rgba(255,69,58,.10), rgba(255,69,58,0) 60%), var(--ink-800); }
.hp-vivo.hp-vivo-destaque .hp-moldura{ margin:14px 14px 0; }
.hp-vivo-info{ padding:16px 18px 20px; min-width:0; }
.hp-vivo-k{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:12.5px; font-weight:700; color:var(--dim); }
.hp-vivo-info h3{ margin-top:10px; font-size:22px; line-height:1.15; font-weight:800; letter-spacing:-.035em; color:var(--txt); overflow-wrap:anywhere; }
.hp-vivo-onde{ margin-top:4px; font-size:14px; font-weight:600; color:var(--dim); }
.hp-vivo-txt{ margin-top:12px; font-size:14px; line-height:1.55; color:var(--dim); }
.hp-vivo-info .hp-acoes{ margin-top:16px; }
@media (min-width:760px){
  .hp-vivo-destaque{ grid-template-columns:minmax(0, 1.75fr) minmax(250px, 1fr); align-items:center; }
  .hp-vivo.hp-vivo-destaque .hp-moldura{ margin:18px 0 18px 18px; }
  .hp-vivo-info{ padding:24px 30px 24px 28px; }
  .hp-vivo-info h3{ font-size:clamp(22px, 2.4vw, 30px); }
  .hp-vivo-info .hp-acoes .btn{ flex:0 0 auto; }
}

/* Tela cheia (ui.js): a tela de dentro do celular deitado vira a tela toda. */
.hp-vivo .aovivo-tela.tc-on{ border-radius:0; }
.hp-vivo .hp-moldura{ margin:14px 14px 0; }
.hp-vivo .aovivo-tela{ border-radius:calc(var(--hp-raio) - var(--hp-borda)); overflow:hidden; height:auto; }
.hp-vivo-capa{ position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:12px; color:#fff; text-align:center;
  background:radial-gradient(90% 90% at 50% 40%, rgba(255,69,58,.28), rgba(255,69,58,0) 70%), #0B0B0C; }
.hp-vivo-capa .btn{ width:auto; padding:11px 22px; border-radius:999px; }
.hp-vivo-pe{ padding:14px 16px 16px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.hp-vivo-pe b{ display:block; font-size:16px; font-weight:800; letter-spacing:-.02em; color:var(--txt); }
.hp-vivo-pe span{ font-size:12.5px; color:var(--dim); }

.hp-sem-vivo{ position:relative; overflow:hidden; border-radius:28px; padding:34px 22px; text-align:center; background:var(--ink-800);
  box-shadow:var(--sombra-leve,none); }
.hp-radar{ position:relative; width:92px; height:92px; margin:0 auto 18px; }
.hp-radar i{ position:absolute; inset:0; border-radius:50%; border:2px solid rgba(255,69,58,.45); animation:hpRadar 2.6s ease-out infinite; }
.hp-radar i:nth-child(2){ animation-delay:.85s; }
.hp-radar i:nth-child(3){ animation-delay:1.7s; }
.hp-radar b{ position:absolute; inset:30px; border-radius:50%; background:var(--ink-700); display:grid; place-items:center; }
.hp-radar b::after{ content:""; width:12px; height:12px; border-radius:50%; background:var(--dim); }
@keyframes hpRadar{ from{ transform:scale(.4); opacity:1; } to{ transform:scale(1.15); opacity:0; } }
.hp-sem-vivo h3{ font-size:22px; font-weight:800; letter-spacing:-.03em; color:var(--txt); }
.hp-sem-vivo p{ font-size:14.5px; line-height:1.6; color:var(--dim); max-width:460px; margin:10px auto 18px; }
.hp-sem-vivo .hp-acoes{ justify-content:center; margin-top:0; }

/* ---- Quadras ---------------------------------------------------------------- */
.hp-chips{ padding-left:0; padding-right:0; margin-bottom:6px; }
.hp-chips .chip{ border:0; cursor:pointer; }
.hp-quadras{ display:grid; gap:14px; }
@media (min-width:640px){ .hp-quadras{ grid-template-columns:repeat(2, 1fr); } }
@media (min-width:980px){ .hp-quadras{ grid-template-columns:repeat(3, 1fr); } }
.hp-quadra{ display:block; width:100%; text-align:left; font:inherit; color:inherit; border:0; padding:0; cursor:pointer;
  background:var(--ink-800); border-radius:var(--raio,22px); overflow:hidden; box-shadow:var(--sombra-leve,none);
  transition:transform .42s var(--mola,ease); }
.hp-quadra:active{ transform:scale(.98); }
.hp-quadra-img{ display:block; position:relative; aspect-ratio:16 / 10; background:var(--ink-700); overflow:hidden; }
.hp-quadra-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.hp-quadra-img .tag{ position:absolute; top:10px; left:10px; }
.hp-quadra-corpo{ display:block; padding:14px 16px 16px; }
.hp-quadra-corpo .hp-quadra-nome{ display:block; font-size:17px; font-weight:800; letter-spacing:-.025em; color:var(--txt); }
.hp-quadra-corpo .hp-quadra-onde{ display:block; font-size:13px; color:var(--dim); margin-top:3px; }
.hp-quadra-pe{ display:flex; align-items:flex-end; justify-content:space-between; gap:10px; margin-top:12px; }
.hp-quadra-mods{ display:flex; flex-wrap:wrap; gap:5px; }
.hp-quadra-mods span{ font-size:11.5px; font-weight:600; padding:4px 9px; border-radius:999px; background:var(--ink-700); color:var(--txt); }
.hp-preco{ font-size:18px; font-weight:800; letter-spacing:-.03em; color:var(--brand-txt,var(--brand)); white-space:nowrap; }
.hp-preco small{ font-size:12px; color:var(--dim); font-weight:600; }
.hp-vazio{ background:var(--ink-800); border-radius:var(--raio,22px); padding:22px; color:var(--dim); font-size:14.5px; line-height:1.6; }

/* A ficha da quadra */
.hp-folha-quadra{ max-width:560px; }
.hp-fq-titulo{ min-width:0; }
.hp-fq-titulo h3{ overflow:hidden; text-overflow:ellipsis; }
.hp-fq-capa{ border-radius:18px; overflow:hidden; aspect-ratio:16 / 9; background:var(--ink-700); margin-bottom:14px; }
.hp-fq-capa{ position:relative; }
.hp-fq-capa img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.hp-fq-desc{ font-size:14px; line-height:1.6; color:var(--dim); margin-bottom:14px; }
.hp-fq-marcar{ position:sticky; bottom:calc(-22px - env(safe-area-inset-bottom)); margin:0 -16px calc(-22px - env(safe-area-inset-bottom)); padding:12px 16px calc(16px + env(safe-area-inset-bottom));
  background:var(--folha,var(--ink-800)); box-shadow:0 -10px 24px -14px rgba(0,0,0,.45); }
.hp-fq-dica{ font-size:12.5px; color:var(--dim); text-align:center; margin-top:8px; }
.hp-folha-quadra .slot.hp-escolhido{ background:var(--brand); color:var(--sobre-brand,#1a0d05); border-color:var(--brand); }
.hp-folha-quadra .slot.hp-escolhido small{ color:inherit; opacity:.75; }
.hp-mapa-link{ display:inline-block; font-size:13px; font-weight:700; margin:2px 0 14px; color:var(--brand-txt,var(--brand)); }

/* ---- Times ------------------------------------------------------------------ */
.hp-times-grade{ display:grid; grid-template-columns:minmax(0,1fr); gap:28px; align-items:center; }
@media (min-width:860px){ .hp-times-grade{ grid-template-columns:1.1fr .9fr; } }
.hp-times-num{ display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); gap:10px; margin:22px 0; }
.hp-times-num:empty{ display:none; }
.hp-times-num .hp-num{ background:var(--ink-900); }
.hp-times-num .hp-fonte{ grid-column:1 / -1; margin-top:0; }
.btn.hp-cta-curto{ width:auto; display:inline-block; padding-left:26px; padding-right:26px; margin-top:6px; }
.hp-escudos{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; width:100%; max-width:360px; margin:0 auto; }
.hp-escudo{ display:block; aspect-ratio:5 / 6; background:var(--c); background:linear-gradient(160deg, var(--c), color-mix(in srgb, var(--c) 45%, #000));
  clip-path:polygon(50% 0, 100% 12%, 100% 55%, 50% 100%, 0 55%, 0 12%); animation:hpFlutua 5s ease-in-out infinite; opacity:.95; }
.hp-escudo:nth-child(2){ animation-delay:-1s; } .hp-escudo:nth-child(3){ animation-delay:-2s; }
.hp-escudo:nth-child(4){ animation-delay:-3s; } .hp-escudo:nth-child(5){ animation-delay:-4s; } .hp-escudo:nth-child(6){ animation-delay:-2.5s; }
@keyframes hpFlutua{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }

/* ---- Em breve ---------------------------------------------------------------- */
.hp-breve{ position:relative; overflow:hidden; border-radius:30px; padding:30px 22px; background:var(--hero, var(--ink-800)); color:#F5F5F7; }
.hp-breve .hp-h2{ color:#F5F5F7; margin-top:12px; }
.hp-breve .hp-sub{ color:#C7C7CC; }
.hp-breve::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.09) 45%, rgba(255,255,255,0) 60%);
  background-size:250% 100%; animation:hpReflexo 4.5s ease-in-out infinite; }
@keyframes hpReflexo{ from{ background-position:150% 0; } to{ background-position:-100% 0; } }
.hp-breve-selo{ display:inline-block; font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; padding:6px 11px;
  border-radius:999px; background:rgba(255,255,255,.12); box-shadow:inset 0 0 0 1px rgba(255,255,255,.2); }
.hp-breve-lista{ list-style:none; padding:0; display:grid; gap:10px; margin-top:22px; }
@media (min-width:760px){ .hp-breve-lista{ grid-template-columns:repeat(3, 1fr); } .hp-breve{ padding:44px 40px; } }
.hp-breve-lista li{ display:grid; grid-template-columns:auto 1fr; column-gap:12px; align-items:center; padding:14px; border-radius:18px;
  background:rgba(0,0,0,.28); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
.hp-breve-lista b{ font-size:15px; letter-spacing:-.02em; }
.hp-breve-lista small{ grid-column:2; font-size:12.5px; color:#C7C7CC; }
.hp-breve-ico{ grid-row:span 2; width:38px; height:38px; border-radius:12px; display:grid; place-items:center; font-weight:800;
  background:rgba(255,122,46,.22); color:#FFB27A; }
.hp-breve-pe{ font-size:13px; color:#C7C7CC; margin-top:18px; }
.hp-breve-topo{ display:grid; grid-template-columns:minmax(0,1fr); justify-items:start; gap:16px; }
.hp-breve-topo .hp-sub{ color:#FFF3EA; text-shadow:0 1px 10px rgba(60,20,0,.35); }
.hp-breve-ficha{ display:block; width:88px; height:88px; flex:none; filter:drop-shadow(0 8px 18px rgba(255,180,60,.35)); animation:hpFicha 7s ease-in-out infinite; }
@keyframes hpFicha{ 0%,62%,100%{ transform:rotateY(0) translateY(0); } 31%{ transform:rotateY(180deg) translateY(-4px); } 50%{ transform:rotateY(360deg) translateY(0); } }
.hp-breve-chamada{ font-size:16px; font-weight:700; letter-spacing:-.02em; line-height:1.4; margin-top:20px; color:#F5F5F7; max-width:560px; }
@media (min-width:760px){ .hp-breve-topo{ grid-template-columns:auto minmax(0,1fr); align-items:center; gap:28px; } .hp-breve-ficha{ width:128px; height:128px; } .hp-breve-chamada{ font-size:18px; } }

/* ---- Para arenas ------------------------------------------------------------- */
.hp-arena{ display:grid; grid-template-columns:minmax(0,1fr); gap:22px; background:var(--ink-800); border-radius:30px; padding:28px 22px; box-shadow:var(--sombra-leve,none); }
@media (min-width:860px){ .hp-arena{ grid-template-columns:1.3fr .7fr; align-items:center; padding:40px; } }
.hp-arena-lista{ list-style:none; padding:0; display:grid; gap:10px; margin-top:16px; }
.hp-arena-lista li{ font-size:14.5px; line-height:1.55; color:var(--dim); padding-left:24px; position:relative; }
.hp-arena-lista li::before{ content:""; position:absolute; left:2px; top:8px; width:10px; height:10px; border-radius:3px; background:var(--brand); }
.hp-arena-lista b{ color:var(--txt); }
.hp-arena-cta p{ font-size:15px; line-height:1.55; color:var(--txt); margin-bottom:12px; }

/* ---- Rodape ------------------------------------------------------------------ */
.hp-rodape{ padding:40px 0 calc(32px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); }
.hp-rodape-grade{ display:grid; grid-template-columns:minmax(0,1fr); gap:20px; }
@media (min-width:760px){ .hp-rodape-grade{ grid-template-columns:1fr 1fr; } }
.hp-rodape-texto{ font-size:13.5px; color:var(--dim); margin-top:8px; line-height:1.55; max-width:360px; }
.hp-rodape-links{ display:flex; flex-wrap:wrap; gap:6px 18px; align-content:flex-start; }
.hp-link{ background:none; border:0; padding:4px 0; font:inherit; font-size:14px; font-weight:600; color:var(--txt); cursor:pointer; }
.hp-link:hover{ color:var(--brand-txt,var(--brand)); }
.hp-rodape-pe{ grid-column:1 / -1; font-size:12px; color:var(--dim); line-height:1.6; }

/* ---- A folha de entrar -------------------------------------------------------- */
.hp-folha-entrar{ max-width:440px; }
.hp-entrar-rodape{ font-size:11.5px; color:var(--dim); line-height:1.6; text-align:center; margin-top:16px; }

/* =============================================================================
   BOTAO LARANJA DA HOME: TEXTO BRANCO MESMO SEM O NOVO.CSS NOVO (01/10/2026)
   =============================================================================
   A regra de verdade mora no novo.css (bloco "BOTAO LARANJA"): fundo #C2410C
   e texto branco, 5,2:1. Ela e repetida aqui, so para a pagina inicial,
   porque no iPhone do Alex a home apareceu com o laranja e o texto escuro de
   antes (o novo.css da versao anterior, guardado em cache). Com a regra
   tambem nesta folha, basta UMA das duas chegar nova para o botao sair certo.
   Os botoes cinza (.gh), brancos (.wh), de momento (.mom) e de perigo
   (.perigo) ficam de fora, como no novo.css. O hover continua o do app
   (brilho 1,07: 4,6:1). */
html .btn:not(.gh):not(.wh):not(.mom):not(.perigo){ --brand:#C2410C; --brand-rgb:194,65,12; --sobre-brand:#FFFFFF;
  background:#C2410C; color:#FFFFFF; }

/* =============================================================================
   CELULAR (ate 559 px): proporcoes da home no aparelho (01/10/2026)
   =============================================================================
   O computador e o tablet ficam como estao (aprovados). Aqui so o que, no
   celular, ficava grande demais ou sozinho:
     1. Numeros do heroi e dos times: todos numa linha so, cartoes compactos.
        Um cartao sozinho vira uma pilula deitada (numero ao lado do texto),
        em vez de um bloco largo.
     2. Escudos dos times: uma faixa baixa de escudos pequenos, em linha,
        como enfeite acima do titulo (e nao seis escudos do tamanho da tela).
     3. O celular do heroi um pouco menor, para caber melhor na tela.
     4. A ficha do "Em breve" no canto de cima, pequena, ao lado do selo. */
@media (max-width:559px){
  /* 1. Numeros */
  .hp-numeros, .hp-times-num{ display:flex; flex-wrap:nowrap; align-items:stretch; gap:8px; max-width:none; }
  .hp-times-num{ flex-wrap:wrap; margin:18px 0; }
  .hp-numeros{ margin-top:22px; }
  .hp-numeros .hp-num, .hp-times-num .hp-num{ flex:1 1 0; min-width:0; max-width:calc(50% - 4px); padding:11px 10px 10px; border-radius:16px; }
  .hp-numeros .hp-num:only-of-type, .hp-times-num .hp-num:only-of-type{ flex:0 1 auto; max-width:100%; display:flex; align-items:center; gap:10px; padding:10px 16px 10px 14px; }
  .hp-numeros .hp-num b, .hp-times-num .hp-num b{ font-size:22px; line-height:1.05; }
  .hp-numeros .hp-num span, .hp-times-num .hp-num span{ font-size:11.5px; line-height:1.3; margin-top:3px; }
  .hp-numeros .hp-num:only-of-type span, .hp-times-num .hp-num:only-of-type span{ margin-top:0; font-size:13px; }
  .hp-numeros .hp-fonte, .hp-times-num .hp-fonte{ flex:0 0 100%; margin-top:0; }

  /* 2. Escudos */
  .hp-times-grade{ gap:0; }
  .hp-escudos{ order:-1; display:flex; justify-content:flex-start; align-items:center; gap:8px; max-width:none; height:52px;
    margin:0 0 14px; }
  .hp-escudo{ flex:none; width:34px; }

  /* 3. Celular do heroi */
  .hp-celular{ width:min(236px, 62vw); }

  /* 4. Ficha do "Em breve" */
  .hp-breve{ padding:26px 20px; }
  .hp-breve-topo{ position:relative; gap:0; }
  .hp-breve-ficha{ position:absolute; top:-6px; right:-4px; width:58px; height:58px; }
  .hp-breve-selo{ margin-top:12px; }
  .hp-breve .hp-h2{ margin-top:18px; }
  .hp-breve-chamada{ margin-top:16px; }
}

@media (prefers-reduced-motion:reduce){
  .hp-radar i, .hp-escudo, .hp-breve::after, .hp-breve-ficha, .hp-esqueleto-feed i, .hp-trava-caixa{ animation:none; }
}

/* ---- Menu: a secao para logo abaixo da barra de cima ------------------------
   O home.js rola ate a secao (sem carregar a pagina de novo); a barra e
   fixa no topo, entao a secao para um pouco abaixo dela. */
.hp-main > section[id], #conteudo{ scroll-margin-top:64px; }
.hp-main > section[id]:focus, #conteudo:focus{ outline:none; }

/* ---- Animacoes leves ----------------------------------------------------------
   So transform e opacity (nada de layout: a rolagem nao trava) e so com
   prefers-reduced-motion: no-preference. Com movimento reduzido nada aqui
   vale, e o home.js nem liga a classe html.hp-anima.

     1. Entrada das secoes: o home.js marca .hp-revelar e, quando a secao
        chega na tela (IntersectionObserver), .hp-visto.
     2. Cartoes e botoes sobem um pouco no hover (so em aparelho com mouse).
     3. O selo LIVE da secao Ao vivo pulsa um brilho suave.
     4. O celular do heroi flutua.
     5. Os numeros do heroi contam ate o valor (home.js, contarNumeros). */
@media (prefers-reduced-motion:no-preference){
  html.hp-anima .hp-revelar{ opacity:0; transform:translate3d(0, 22px, 0);
    transition:opacity .7s cubic-bezier(.2,.8,.25,1), transform .7s cubic-bezier(.2,.8,.25,1);
    transition-delay:var(--hp-atraso, 0s); }
  html.hp-anima .hp-revelar.hp-visto{ opacity:1; transform:none; }

  .hp-celular{ animation:hpCelular 6.5s ease-in-out infinite; will-change:transform; }
  @keyframes hpCelular{ 0%,100%{ transform:translate3d(0, 0, 0); } 50%{ transform:translate3d(0, -10px, 0); } }

  #aovivo .tag.lv{ position:relative; }
  #aovivo .tag.lv::after{ content:""; position:absolute; inset:-3px; border-radius:inherit; pointer-events:none;
    box-shadow:0 0 0 2px rgba(255,69,58,.45), 0 0 16px 2px rgba(255,69,58,.55); opacity:0;
    animation:hpLive 2.4s ease-in-out infinite; }
  @keyframes hpLive{ 0%,100%{ opacity:0; } 50%{ opacity:1; } }

  .hp-passo, .hp-lance, .hp-vivo, .hp-num, .hp-breve-lista li, .hp-arena,
  .hp .btn, .hp-tela .btn, .hp-trava .btn{ transition:transform .28s cubic-bezier(.2,.8,.25,1); }
  .hp-quadra{ transition:transform .28s cubic-bezier(.2,.8,.25,1); }
  @media (hover:hover){
    .hp-passo:hover, .hp-vivo:hover, .hp-num:hover, .hp-breve-lista li:hover{ transform:translate3d(0, -4px, 0); }
    .hp-lance:hover, .hp-quadra:hover{ transform:translate3d(0, -6px, 0); }
    .hp .btn:hover:not(:disabled), .hp-trava .btn:hover{ transform:translate3d(0, -2px, 0); }
    .hp-lance:not(.hp-bloqueado) img, .hp-quadra-img img{ transition:transform .6s cubic-bezier(.2,.8,.25,1); }
    .hp-lance:not(.hp-bloqueado):hover img, .hp-quadra:hover .hp-quadra-img img{ transform:scale(1.04); }
  }
  .hp-quadra:active{ transform:scale(.98); }
}