/* Site do JUMP3R — mesma identidade do overlay: fundo azul-escuro com luzes, pontinhos e partículas,
   etiquetas amarelas inclinadas, títulos brancos com contorno escuro e sombra azul dura, botões com degrau. */
:root {
  --amarelo: #FFE600; --ciano: #33C1FF; --azul: #0A9BD6; --azul-fundo: #1D4FD8; --tinta: #14101B; --fundo: #0B1420;
  --cartao: rgba(15, 30, 51, .82); --cartao2: #0F1E33; --borda: rgba(51, 193, 255, .28); --txt: #fff; --txt2: rgba(255, 255, 255, .68);
  --vermelho: #FF3B4E; --verde: #2EE59D; --roxo: #9146FF;
  --titulo: 'Lilita One', 'Fredoka', system-ui, sans-serif; --mola: cubic-bezier(.2, 1.6, .4, 1);
  color-scheme: dark;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--fundo); scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; font-family: 'Fredoka', system-ui, sans-serif; color: var(--txt); background: var(--fundo); overflow-x: hidden; line-height: 1.45; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 3px solid var(--amarelo); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--amarelo); color: var(--tinta); }

/* ---------- fundo vivo (igual tela.html / doações) ---------- */
.bg, .particulas { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.bg .luz { position: absolute; border-radius: 50%; will-change: transform; }
.bg .luz1 { width: 80vmax; height: 80vmax; left: -35vmax; top: -45vmax; background: radial-gradient(circle, rgba(10,155,214,.45), rgba(10,155,214,0) 65%); animation: vaga1 26s ease-in-out infinite alternate; }
.bg .luz2 { width: 70vmax; height: 70vmax; right: -30vmax; bottom: -40vmax; background: radial-gradient(circle, rgba(51,193,255,.25), rgba(51,193,255,0) 65%); animation: vaga2 31s ease-in-out infinite alternate; }
.bg .luz3 { width: 55vmax; height: 55vmax; left: 35%; top: 25%; background: radial-gradient(circle, rgba(29,79,216,.22), rgba(29,79,216,0) 65%); animation: vaga1 37s ease-in-out infinite alternate-reverse; }
@keyframes vaga1 { to { transform: translate(12vmax, 10vmax); } }
@keyframes vaga2 { to { transform: translate(-10vmax, -12vmax); } }
.bg .pontos { position: absolute; inset: -60px; background-image: radial-gradient(rgba(255,255,255,.09) 1.4px, transparent 1.7px); background-size: 30px 30px; animation: pontos 30s linear infinite; }
@keyframes pontos { to { transform: translate(30px, 30px); } }
.particulas i { position: absolute; bottom: -30px; width: var(--t); height: var(--t); border: 2px solid var(--c); opacity: 0; border-radius: 3px; animation: subir var(--d) linear var(--atraso) infinite; }
.particulas i.cheio { background: var(--c); border: 0; }
@keyframes subir { 0% { transform: translate(0, 0) rotate(0); opacity: 0; } 10% { opacity: var(--o); } 85% { opacity: var(--o); } 100% { transform: translate(var(--dx), -115vh) rotate(var(--r)); opacity: 0; } }

main, header.topo, footer { position: relative; z-index: 1; }
.caixa { width: min(1180px, 100% - 32px); margin-inline: auto; }

/* ---------- peças da identidade ---------- */
.tag { display: inline-block; background: var(--amarelo); color: var(--tinta); font-weight: 700; letter-spacing: .24em; font-size: 13px; line-height: 1;
  padding: 7px 12px 6px 15px; transform: rotate(-3deg); box-shadow: 4px 4px 0 var(--tinta); white-space: nowrap; position: relative; overflow: hidden; }
.tag::after { content: ''; position: absolute; top: -10px; bottom: -10px; width: 26px; left: -40px; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent); animation: brilhoTag 4.5s ease-in-out 1.2s infinite; }
@keyframes brilhoTag { 0% { left: -40px; } 28%, 100% { left: calc(100% + 30px); } }
.titulo { font-family: var(--titulo); font-weight: 400; line-height: .95; letter-spacing: .02em; color: #fff;
  text-shadow: 5px 6px 0 var(--azul), -2px -2px 0 var(--tinta), 2px -2px 0 var(--tinta), -2px 2px 0 var(--tinta), 2px 2px 0 var(--tinta), 0 3px 0 var(--tinta), 7px 9px 18px rgba(0,0,0,.35); }
.barrinha { width: 76px; height: 6px; border-radius: 99px; background: var(--ciano); box-shadow: 0 0 14px rgba(51,193,255,.8); }
.cab { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 30px; }
.cab .titulo { font-size: clamp(46px, 8vw, 84px); }
.cab p { color: var(--txt2); font-size: 18px; max-width: 560px; }
.cab.centro { align-items: center; text-align: center; }

/* botões com degrau (sombra dura que "afunda" ao clicar) */
.bt { --c: var(--amarelo); --t: var(--tinta); display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--titulo); font-size: 20px; letter-spacing: .04em;
  background: var(--c); color: var(--t); padding: 13px 22px 12px; border-radius: 14px; border: 3px solid var(--tinta); box-shadow: 0 6px 0 var(--tinta), 0 10px 22px rgba(0,0,0,.35);
  transition: transform .15s var(--mola), box-shadow .15s; position: relative; white-space: nowrap; }
.bt svg { width: 22px; height: 22px; fill: currentColor; flex: none; }
.bt:hover { transform: translateY(-3px) rotate(-1deg); box-shadow: 0 9px 0 var(--tinta), 0 14px 26px rgba(0,0,0,.4); }
.bt:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--tinta), 0 4px 10px rgba(0,0,0,.3); transition-duration: .05s; }
.bt.azul { --c: var(--ciano); }
.bt.branco { --c: #fff; }
.bt.roxo { --c: var(--roxo); --t: #fff; }
.bt.vermelho { --c: #FF3B3B; --t: #fff; }
.bt.peq { font-size: 16px; padding: 9px 14px 8px; border-radius: 11px; box-shadow: 0 4px 0 var(--tinta); }
.bt.peq:hover { box-shadow: 0 6px 0 var(--tinta); }

/* cartão escuro com borda azul */
.cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: 20px; box-shadow: 0 14px 34px rgba(0,0,0,.35); }

/* aparece ao rolar: cada bloco entra de um jeito (o app.js escolhe: sobe, esq, dir, giro, zoom) */
.rv { opacity: 0; transform: translateY(46px) scale(.96); transition: opacity .55s ease, transform .9s var(--mola); transition-delay: calc(var(--i, 0) * 80ms); }
.rv.esq { transform: translate(-70px, 20px) rotate(-4deg); }
.rv.dir { transform: translate(70px, 20px) rotate(4deg); }
.rv.giro { transform: translateY(60px) rotate(-8deg) scale(.82); }
.rv.zoom { transform: scale(.86) rotate(-2deg); }
.rv.vis { opacity: 1; transform: none; }
/* título de seção: etiqueta bate, letras pulam uma a uma, barrinha cresce */
.cab.rv { opacity: 1; transform: none; }
.cab .tag { opacity: 0; }
.cab.vis .tag { animation: bate .6s var(--mola) both; }
@keyframes bate { 0% { opacity: 0; transform: rotate(-16deg) scale(1.7); } 60% { opacity: 1; transform: rotate(1deg) scale(.94); } 100% { opacity: 1; transform: rotate(-3deg); } }
.cab .titulo .l { display: inline-block; opacity: 0; transform: translateY(70%) rotate(14deg) scale(.5); }
.cab.vis .titulo .l { animation: letra .7s var(--mola) both; animation-delay: calc(.15s + var(--i) * .045s); }
.cab .titulo .esp { display: inline-block; width: .28em; }
.cab .barrinha { width: 0; transition: width .7s cubic-bezier(.2,.8,.2,1) .45s; }
.cab.vis .barrinha { width: 76px; }
.cab > p { opacity: 0; transform: translateY(14px); transition: opacity .5s ease .5s, transform .6s ease .5s; }
.cab.vis > p { opacity: 1; transform: none; }
/* barra de progresso da rolagem */
.progresso { position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 60; transform-origin: 0 50%; transform: scaleX(0); pointer-events: none;
  background: linear-gradient(90deg, var(--ciano), var(--amarelo)); box-shadow: 0 0 12px rgba(51,193,255,.8); }
.hero .caixa, .faixa { will-change: transform; }

/* ---------- barra do topo ---------- */
header.topo { position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: background .25s, box-shadow .25s, backdrop-filter .25s; }
header.topo.rolou { background: rgba(11,20,32,.86); box-shadow: 0 1px 0 var(--borda), 0 10px 30px rgba(0,0,0,.35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.topo .caixa { display: flex; align-items: center; gap: 18px; height: 68px; }
.marca { display: flex; align-items: center; gap: 10px; font-family: var(--titulo); font-size: 26px; letter-spacing: .03em; }
.marca img { width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--ciano); box-shadow: 2px 3px 0 var(--tinta); }
.marca span { text-shadow: 2px 3px 0 var(--azul), -1px -1px 0 var(--tinta), 1px 1px 0 var(--tinta); }
.menu { display: flex; gap: 4px; margin-left: auto; }
.menu a { font-weight: 600; font-size: 16px; padding: 8px 13px; border-radius: 10px; color: var(--txt2); transition: color .2s, background .2s; position: relative; }
.menu a:hover { color: #fff; background: rgba(51,193,255,.1); }
.menu a.ativo { color: #fff; }
.menu a.ativo::after { content: ''; position: absolute; left: 13px; right: 13px; bottom: 2px; height: 3px; border-radius: 9px; background: var(--ciano); box-shadow: 0 0 10px var(--ciano); }
.topo .bt { margin-left: 6px; }
.hamb { display: none; width: 44px; height: 44px; border-radius: 12px; border: 2px solid var(--borda); place-items: center; margin-left: 8px; }
.hamb i { display: block; width: 20px; height: 2.5px; background: #fff; border-radius: 3px; box-shadow: 0 -6px 0 #fff, 0 6px 0 #fff; transition: transform .25s, box-shadow .25s; }
.aberto .hamb i { transform: rotate(45deg); box-shadow: 0 0 0 #fff, 0 0 0 #fff; }
.aberto .hamb i::after { content: ''; display: block; width: 20px; height: 2.5px; background: #fff; border-radius: 3px; transform: rotate(-90deg); }

/* ---------- topo / apresentação ---------- */
.hero { min-height: min(100svh, 980px); display: flex; align-items: center; padding: 100px 0 70px; position: relative; }
.hero .caixa { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; }
.hero h1 { font-size: clamp(76px, 13vw, 168px); display: flex; margin: 14px 0 8px; padding-right: 8px; }
.hero h1 span { display: inline-block; animation: letra .75s var(--mola) both, onda 3.4s ease-in-out infinite, brilhoLetra 7s ease-in-out infinite;
  animation-delay: calc(.25s + var(--i) * .06s), calc(1.6s + var(--i) * .1s), calc(2.8s + var(--i) * .08s); }
@keyframes letra { 0% { transform: translateY(90px) scale(.4) rotate(18deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes onda { 0%, 100% { transform: none; } 25% { transform: translateY(-8px); } 50% { transform: none; } }
@keyframes brilhoLetra { 0%, 9%, 100% { filter: none; } 4% { filter: brightness(1.2) drop-shadow(0 0 12px rgba(51,193,255,.9)); } }
.hero .tag { font-size: 14px; animation: tagEntra .7s var(--mola) .1s both; }
@keyframes tagEntra { from { transform: rotate(-12deg) translateX(-40px) scale(.6); opacity: 0; } to { transform: rotate(-3deg); opacity: 1; } }
.hero .bio { font-size: clamp(18px, 2.1vw, 22px); font-weight: 500; color: rgba(255,255,255,.82); max-width: 520px; line-height: 1.4; animation: sobe .7s ease .7s both; }
@keyframes sobe { from { opacity: 0; transform: translateY(18px); } }
.hero .botoes { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; animation: sobe .7s ease .85s both; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; animation: sobe .7s ease .78s both; }
.chip { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 15px; padding: 6px 12px; border-radius: 99px; background: rgba(51,193,255,.1); border: 1px solid var(--borda); }
.chip svg { width: 16px; height: 16px; fill: none; stroke: var(--ciano); stroke-width: 2.4; stroke-linecap: round; }

/* avatar com anel girando e etiqueta de status */
.foto { position: relative; justify-self: center; width: min(400px, 80vw); aspect-ratio: 1; animation: popFoto .9s var(--mola) .35s both; }
@keyframes popFoto { from { transform: scale(.3) rotate(-12deg); opacity: 0; } }
.foto .anel { position: absolute; inset: -4%; border-radius: 50%; border: 3px dashed rgba(51,193,255,.55); animation: gira 28s linear infinite; }
.foto .anel2 { position: absolute; inset: 4%; border-radius: 50%; background: conic-gradient(from 0deg, var(--ciano), var(--azul-fundo), var(--amarelo), var(--ciano)); animation: gira 6s linear infinite; filter: blur(.5px); }
@keyframes gira { to { transform: rotate(360deg); } }
.foto img { position: absolute; inset: 7.5%; width: 85%; height: 85%; border-radius: 50%; object-fit: cover; border: 5px solid var(--tinta); box-shadow: 10px 12px 0 var(--azul), 0 30px 60px rgba(0,0,0,.5); }
.foto .status { position: absolute; left: 50%; bottom: 2%; transform: translateX(-50%) rotate(-4deg); font-family: var(--titulo); font-size: 22px; letter-spacing: .06em; padding: 8px 16px 6px;
  background: #fff; color: var(--tinta); border: 3px solid var(--tinta); border-radius: 12px; box-shadow: 4px 5px 0 var(--tinta); display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.foto .status i { width: 12px; height: 12px; border-radius: 50%; background: #8A94A6; }
.foto .status.vivo { background: var(--vermelho); color: #fff; animation: pulsoVivo 1.6s ease-in-out infinite; }
.foto .status.vivo i { background: #fff; animation: pisca 1s steps(2) infinite; }
@keyframes pulsoVivo { 50% { transform: translateX(-50%) rotate(-2deg) scale(1.06); } }
@keyframes pisca { 50% { opacity: .2; } }
.foto .bolha { position: absolute; right: -2%; top: 6%; background: var(--amarelo); color: var(--tinta); font-family: var(--titulo); font-size: 20px; padding: 9px 14px 7px; border: 3px solid var(--tinta);
  border-radius: 16px 16px 16px 4px; box-shadow: 4px 4px 0 var(--tinta); transform: rotate(8deg); animation: balanca 2.6s ease-in-out infinite; }
@keyframes balanca { 0%, 100% { transform: rotate(8deg); } 50% { transform: rotate(2deg) translateY(-6px); } }
.quadradinho { position: absolute; width: 22px; height: 22px; border-radius: 6px; background: rgba(51,193,255,.35); animation: flutua 7s ease-in-out infinite; }
.quadradinho.vazado { background: none; border: 3px solid rgba(255,255,255,.18); }
@keyframes flutua { 0%, 100% { transform: rotate(12deg) translateY(0); } 50% { transform: rotate(40deg) translateY(-18px); } }
.rolar { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); width: 28px; height: 44px; border: 2.5px solid rgba(255,255,255,.4); border-radius: 20px; }
.rolar::after { content: ''; position: absolute; left: 50%; top: 8px; width: 4px; height: 9px; margin-left: -2px; border-radius: 4px; background: var(--ciano); animation: rodinha 1.8s ease-in-out infinite; }
@keyframes rodinha { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }

/* live no ar: player no lugar da foto */
.hero.vivo .caixa { grid-template-columns: .9fr 1.1fr; }
.tela-topo { width: 100%; justify-self: stretch; animation: popFoto .8s var(--mola) both; box-shadow: 10px 12px 0 var(--vermelho), 0 24px 50px rgba(0,0,0,.45); overflow: visible; }
.tela-topo iframe { border-radius: 19px; }
.selo-vivo { position: absolute; top: -16px; left: 18px; z-index: 2; display: flex; align-items: center; gap: 8px; font-family: var(--titulo); font-size: 22px; letter-spacing: .06em;
  padding: 7px 14px 5px; background: var(--vermelho); color: #fff; border: 3px solid var(--tinta); border-radius: 12px; box-shadow: 4px 4px 0 var(--tinta); transform: rotate(-4deg); animation: pulsoSelo 1.6s ease-in-out infinite; }
.selo-vivo i { width: 11px; height: 11px; border-radius: 50%; background: #fff; animation: pisca 1s steps(2) infinite; }
@keyframes pulsoSelo { 50% { transform: rotate(-2deg) scale(1.07); } }
@media (max-width: 980px) {
  .hero.vivo .caixa { grid-template-columns: minmax(0, 1fr); }
  .hero.vivo .tela-topo { order: -1; margin-top: 12px; }
}

/* ---------- faixas que correm ---------- */
.faixas { position: relative; z-index: 2; height: 150px; margin: -10px 0; overflow: hidden; pointer-events: none; }
.faixa { position: absolute; left: -5%; width: 110%; display: flex; overflow: hidden; border-block: 3px solid var(--tinta); box-shadow: 0 6px 0 rgba(0,0,0,.3); }
.faixa.a { top: 34px; background: var(--amarelo); color: var(--tinta); transform: rotate(-3deg); z-index: 2; }
.faixa.b { top: 58px; background: var(--ciano); color: var(--tinta); transform: rotate(2.4deg); }
.faixa div { display: flex; flex: none; gap: 28px; padding: 9px 14px 7px; font-family: var(--titulo); font-size: 26px; letter-spacing: .06em; white-space: nowrap; animation: corre 26s linear infinite; }
.faixa.b div { animation-direction: reverse; animation-duration: 34s; }
.faixa div span::after { content: '★'; margin-left: 28px; font-size: .8em; }
@keyframes corre { to { transform: translateX(-100%); } }

section.sec { padding: 90px 0; position: relative; }

/* ---------- sobre ---------- */
.sobre-grade { display: grid; grid-template-columns: 1.1fr 1fr; gap: 26px; align-items: start; }
.fala { padding: 28px; position: relative; font-size: 20px; }
.fala p + p { margin-top: 12px; }
.fala b { color: var(--amarelo); font-weight: 600; }
.fala::before { content: '"'; position: absolute; top: -34px; right: 20px; font-family: var(--titulo); font-size: 120px; color: var(--amarelo); text-shadow: 4px 4px 0 var(--tinta); line-height: 1; transform: rotate(10deg); }
.estilos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.estilo { padding: 20px 14px 18px; text-align: center; border-radius: 18px; background: var(--cartao2); border: 3px solid var(--tinta); box-shadow: 0 6px 0 var(--tinta);
  transition: transform .3s var(--mola); }
.estilo:hover { transform: translateY(-6px) rotate(-2deg); }
.estilo:nth-child(2):hover { transform: translateY(-6px) rotate(2deg); }
.estilo .ico { width: 64px; height: 64px; margin: 0 auto 10px; border-radius: 16px; background: #fff; display: grid; place-items: center; box-shadow: 3px 4px 0 var(--azul); border: 3px solid var(--tinta); }
.estilo .ico svg { width: 34px; height: 34px; fill: none; stroke: var(--azul-fundo); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.estilo b { font-family: var(--titulo); font-weight: 400; font-size: 22px; display: block; letter-spacing: .03em; }
.estilo small { color: var(--txt2); font-size: 14px; display: block; margin-top: 4px; line-height: 1.3; }
[hidden] { display: none !important; }
.jogos { padding: 18px 20px; }
.capas { display: flex; flex-wrap: wrap; gap: 8px; }
.capas span { font-family: var(--titulo); font-size: 17px; letter-spacing: .02em; padding: 7px 12px 5px; border-radius: 10px; background: #fff; color: var(--tinta); border: 2.5px solid var(--tinta); box-shadow: 2px 3px 0 var(--azul);
  transition: transform .25s var(--mola); }
.capas span:nth-child(3n+1) { transform: rotate(-1.5deg); }
.capas span:nth-child(3n+2) { transform: rotate(1deg); }
.capas span:hover { transform: rotate(-4deg) scale(1.08); background: var(--amarelo); }
.jogos h3, .rola-na-live h3 { font-size: 13px; letter-spacing: .22em; color: var(--ciano); font-weight: 600; margin-bottom: 12px; }
.rola-na-live { margin-top: 16px; padding: 18px 20px; }
.rola-na-live h3 { font-size: 13px; letter-spacing: .22em; color: var(--ciano); font-weight: 600; margin-bottom: 10px; }
.resgates { display: flex; flex-wrap: wrap; gap: 8px; }
.resgates span { font-weight: 600; font-size: 15px; padding: 6px 12px; border-radius: 9px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); transition: transform .2s var(--mola), background .2s; }
.resgates span:hover { transform: rotate(-3deg) scale(1.08); background: var(--amarelo); color: var(--tinta); }
.discord { margin-top: 16px; display: flex; align-items: center; gap: 16px; padding: 18px 20px; background: linear-gradient(120deg, #5865F2, #4752C4); border: 3px solid var(--tinta); border-radius: 18px; box-shadow: 0 6px 0 var(--tinta);
  transition: transform .2s var(--mola); }
.discord:hover { transform: translateY(-4px) rotate(-1deg); }
.discord svg { width: 46px; height: 46px; fill: #fff; flex: none; }
.discord b { font-family: var(--titulo); font-weight: 400; font-size: 24px; display: block; }
.discord small { font-size: 15px; opacity: .9; }
.discord .seta { margin-left: auto; font-family: var(--titulo); font-size: 30px; }

/* ---------- lives / agenda ---------- */
.lives-grade { display: grid; grid-template-columns: 1fr 1.25fr; gap: 26px; align-items: stretch; }
.lives-grade.sem-player { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
.semana { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.dia { border-radius: 14px; padding: 12px 4px 10px; text-align: center; background: rgba(255,255,255,.04); border: 2px solid rgba(255,255,255,.08); position: relative; }
.dia b { display: block; font-family: var(--titulo); font-weight: 400; font-size: 20px; letter-spacing: .04em; color: rgba(255,255,255,.45); }
.dia small { display: block; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.3); margin-top: 2px; }
.dia.tem { background: var(--amarelo); border-color: var(--tinta); box-shadow: 0 5px 0 var(--tinta); transform: rotate(-2deg); }
.dia.tem:nth-child(odd) { transform: rotate(2deg); }
.dia.tem b, .dia.tem small { color: var(--tinta); }
.dia.hoje { outline: 3px solid var(--ciano); outline-offset: 3px; }
.dia.hoje::before { content: 'HOJE'; position: absolute; top: -13px; left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 700; letter-spacing: .14em; background: var(--ciano); color: var(--tinta); padding: 3px 6px 2px; border-radius: 5px; }
.contagem { margin-top: 22px; padding: 22px; text-align: center; }
.contagem h3 { font-size: 13px; letter-spacing: .24em; color: var(--ciano); font-weight: 600; }
.contagem .quando { font-size: 17px; color: var(--txt2); margin-top: 4px; }
.relogio { display: flex; justify-content: center; gap: 10px; margin: 14px 0 6px; }
.relogio div { min-width: 70px; padding: 10px 6px 6px; border-radius: 14px; background: var(--tinta); border: 2px solid var(--borda); }
.relogio b { display: block; font-family: var(--titulo); font-weight: 400; font-size: 40px; line-height: 1; font-variant-numeric: tabular-nums; }
.relogio small { font-size: 11px; letter-spacing: .18em; color: var(--txt2); font-weight: 600; }
.relogio b.troca { animation: troca .35s var(--mola); }
@keyframes troca { from { transform: translateY(-10px) scale(1.15); color: var(--amarelo); } }
.contagem.vivo .relogio { display: none; }
.contagem .agora { display: none; font-family: var(--titulo); font-size: 40px; color: #fff; margin: 12px 0 6px; }
.contagem.vivo .agora { display: block; animation: pulso 1.2s ease-in-out infinite; }
@keyframes pulso { 50% { transform: scale(1.06); color: var(--amarelo); } }
.contagem .bt { margin-top: 14px; }
.tela { position: relative; border-radius: 22px; overflow: hidden; border: 3px solid var(--tinta); box-shadow: 10px 12px 0 var(--azul), 0 24px 50px rgba(0,0,0,.45); aspect-ratio: 16/9; background: #000; }
.tela iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tela .capa { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: url('img/fundo-player.jpg') center/cover; cursor: pointer; }
.tela .capa::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,20,32,0) 40%, rgba(11,20,32,.8)); }
.tela .capa .tag { position: relative; }
.tela .capa .nome { position: relative; font-family: var(--titulo); font-size: clamp(26px, 4vw, 40px); letter-spacing: .03em; text-shadow: 3px 4px 0 var(--azul), -1.5px -1.5px 0 var(--tinta), 1.5px 1.5px 0 var(--tinta); }
.tela .capa .play { position: relative; width: 92px; height: 92px; border-radius: 50%; background: var(--amarelo); border: 4px solid var(--tinta); box-shadow: 0 6px 0 var(--tinta); display: grid; place-items: center; transition: transform .25s var(--mola); }
.tela .capa:hover .play { transform: scale(1.12) rotate(-6deg); }
.tela .capa .play svg { width: 38px; height: 38px; fill: var(--tinta); margin-left: 6px; }
.tela .capa .leg { position: absolute; left: 18px; bottom: 16px; right: 18px; font-weight: 600; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.tela .capa .leg svg { width: 20px; height: 20px; fill: #fff; }

/* ---------- destaques ---------- */
.sub-cab { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin: 0 0 18px; flex-wrap: wrap; }
.sub-cab h3 { font-family: var(--titulo); font-weight: 400; font-size: 32px; letter-spacing: .03em; display: flex; align-items: center; gap: 12px; }
.sub-cab h3 .logo { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; border: 3px solid var(--tinta); box-shadow: 3px 3px 0 var(--tinta); }
.sub-cab h3 .logo svg { width: 24px; height: 24px; fill: #fff; }
.setas { display: flex; gap: 8px; }
.setas button { width: 46px; height: 46px; border-radius: 12px; background: #fff; color: var(--tinta); border: 3px solid var(--tinta); box-shadow: 0 4px 0 var(--tinta); font-family: var(--titulo); font-size: 22px; transition: transform .15s var(--mola); }
.setas button:hover { transform: translateY(-2px); }
.setas button:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--tinta); }
.trilho { display: grid; grid-auto-flow: column; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px 4px 26px; scrollbar-width: none; overscroll-behavior-x: contain; }
.trilho::-webkit-scrollbar { display: none; }
.trilho.shorts { grid-auto-columns: 220px; }
.trilho.clipes { grid-auto-columns: minmax(300px, 360px); }
.video { scroll-snap-align: start; text-align: left; display: block; border-radius: 18px; overflow: hidden; background: var(--cartao2); border: 3px solid var(--tinta); box-shadow: 0 6px 0 var(--tinta);
  transition: transform .3s var(--mola), box-shadow .3s; position: relative; }
.video:hover { transform: translateY(-6px) rotate(-1.2deg); box-shadow: 0 10px 0 var(--tinta), 0 0 0 3px var(--ciano); }
.video:nth-child(even):hover { transform: translateY(-6px) rotate(1.2deg); }
.video .mini { position: relative; overflow: hidden; background: #000; }
.shorts .video .mini { aspect-ratio: 9/14; }
.clipes .video .mini { aspect-ratio: 16/9; }
.video .mini img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.video:hover .mini img { transform: scale(1.07); }
.video .mini::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(11,20,32,.92)); }
.video .play { position: absolute; z-index: 1; left: 50%; top: 45%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: var(--amarelo); border: 3px solid var(--tinta);
  display: grid; place-items: center; box-shadow: 0 4px 0 var(--tinta); transform: scale(0) rotate(-40deg); transition: transform .35s var(--mola); }
.video .play svg { width: 22px; height: 22px; fill: var(--tinta); margin-left: 4px; }
.video:hover .play, .video:focus-visible .play { transform: none; }
.video .info { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: 12px 13px 12px; }
.video .info b { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-weight: 600; font-size: 16px; line-height: 1.22; }
.video .info small { display: flex; gap: 10px; margin-top: 6px; font-size: 13px; color: var(--txt2); font-weight: 500; }
.video .jogo { position: absolute; z-index: 1; top: 10px; left: 10px; font-size: 12px; font-weight: 700; letter-spacing: .06em; background: var(--amarelo); color: var(--tinta); padding: 4px 8px 3px; transform: rotate(-3deg); box-shadow: 2px 2px 0 var(--tinta); }
.video .dur { position: absolute; z-index: 1; top: 10px; right: 10px; font-size: 12px; font-weight: 700; background: rgba(0,0,0,.75); padding: 3px 7px; border-radius: 6px; }
.clipes .video .info b { -webkit-line-clamp: 1; font-family: var(--titulo); font-weight: 400; font-size: 22px; letter-spacing: .02em; }
.mais { display: flex; justify-content: center; margin-top: 4px; }

/* janela do vídeo */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: rgba(5,10,18,.86); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
.modal.on { opacity: 1; visibility: visible; }
.modal .quadro { position: relative; width: min(960px, 100%); aspect-ratio: 16/9; border-radius: 18px; overflow: hidden; border: 3px solid var(--tinta); box-shadow: 10px 12px 0 var(--azul); background: #000;
  transform: scale(.85) rotate(-2deg); transition: transform .4s var(--mola); }
.modal.vertical .quadro { width: auto; height: min(82vh, 760px); aspect-ratio: 9/16; max-width: 100%; }
.modal.on .quadro { transform: none; }
.modal iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.modal .fechar { position: absolute; top: 14px; right: 14px; z-index: 2; width: 50px; height: 50px; border-radius: 14px; background: var(--amarelo); color: var(--tinta); border: 3px solid var(--tinta); box-shadow: 0 4px 0 var(--tinta);
  font-family: var(--titulo); font-size: 26px; line-height: 1; }

/* ---------- comunidade ---------- */
.com-grade { display: grid; grid-template-columns: 1.25fr 1fr; gap: 22px; align-items: start; }
.com-lado { display: grid; gap: 22px; }
#comunidade .cartao h3 { font-size: 13px; letter-spacing: .22em; color: var(--ciano); font-weight: 600; }
.ranking { padding: 24px; position: relative; overflow: hidden; }
.ranking::before { content: ''; position: absolute; width: 420px; height: 420px; left: 50%; top: -180px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(255,230,0,.16), transparent 65%); pointer-events: none; }
.rank-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; position: relative; }
.podio { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 10px; margin: 26px 0 18px; position: relative; }
.degrau { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.degrau .av { position: relative; width: 74px; height: 74px; margin-bottom: 8px; }
.degrau.p1 .av { width: 96px; height: 96px; }
.av img, .av .ini { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 4px solid var(--c, var(--ciano)); box-shadow: 3px 4px 0 var(--tinta); background: var(--cartao2); }
.av .ini { display: grid; place-items: center; font-family: var(--titulo); font-size: 30px; color: #fff; }
.degrau .pos { position: absolute; right: -6px; bottom: -4px; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-family: var(--titulo); font-size: 18px;
  background: var(--c); color: var(--tinta); border: 2.5px solid var(--tinta); transform: rotate(8deg); }
.degrau.p1 .coroa { position: absolute; top: -30px; left: 50%; transform: translateX(-50%) rotate(-8deg); font-size: 34px; color: var(--amarelo); text-shadow: 2px 3px 0 var(--tinta); animation: balanca 2.4s ease-in-out infinite; }
.degrau.p1 { --c: var(--amarelo); } .degrau.p2 { --c: #DDE7F2; } .degrau.p3 { --c: #FF9F43; }
.degrau b { font-family: var(--titulo); font-weight: 400; font-size: 19px; letter-spacing: .02em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.degrau small { color: var(--txt2); font-size: 13px; font-weight: 600; }
.degrau .base { width: 100%; margin-top: 10px; border-radius: 12px 12px 0 0; background: linear-gradient(180deg, var(--c), color-mix(in srgb, var(--c) 55%, #000)); border: 3px solid var(--tinta); border-bottom: 0;
  display: grid; place-items: center; font-family: var(--titulo); font-size: 26px; color: var(--tinta); transform-origin: bottom; transform: scaleY(0); transition: transform .8s var(--mola); }
.degrau.p1 .base { height: 110px; } .degrau.p2 .base { height: 78px; transition-delay: .15s; } .degrau.p3 .base { height: 56px; transition-delay: .3s; }
.ranking.vis .degrau .base { transform: none; }
.lista-rank { list-style: none; counter-reset: r 3; display: grid; gap: 8px; position: relative; }
.lista-rank li { counter-increment: r; display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  transition: transform .25s var(--mola), border-color .2s; }
.lista-rank li:hover { transform: translateX(6px); border-color: var(--ciano); }
.lista-rank li::before { content: counter(r); width: 28px; flex: none; font-family: var(--titulo); font-size: 18px; color: var(--txt2); text-align: center; }
.linha-rank, .linha-p { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; color: inherit; }
.linha-p { gap: 10px; }
a.linha-p:hover span:not(.av):not(.n), a.linha-rank:hover .nome { color: var(--ciano); text-decoration: underline; text-underline-offset: 3px; }
a.degrau { color: inherit; transition: transform .25s var(--mola); }
a.degrau:hover { transform: translateY(-6px); }
a.degrau:hover b { color: var(--ciano); }
.avatares a { transition: transform .2s var(--mola); } .avatares a:hover { transform: translateY(-4px) rotate(-6deg); }
.lista-rank .av { width: 36px; height: 36px; flex: none; }
.lista-rank .av img, .lista-rank .av .ini { border-width: 2.5px; box-shadow: none; font-size: 16px; }
.lista-rank .nome { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista-rank .selos { display: flex; gap: 4px; }
.lista-rank .selos i { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .06em; padding: 2px 6px; border-radius: 5px; background: rgba(51,193,255,.15); color: var(--ciano); }
.lista-rank .selos i.sub { background: rgba(255,230,0,.15); color: var(--amarelo); }
.lista-rank .pts { font-family: var(--titulo); font-size: 18px; color: var(--amarelo); font-variant-numeric: tabular-nums; }
.regras { padding: 22px; }
.regras ul { list-style: none; display: grid; gap: 8px; margin-top: 12px; }
.regras li { display: flex; align-items: center; gap: 12px; font-weight: 500; font-size: 16px; }
.regras li .ic { width: 34px; height: 34px; flex: none; border-radius: 10px; background: #fff; border: 2.5px solid var(--tinta); box-shadow: 2px 2px 0 var(--azul); display: grid; place-items: center; }
.regras li .ic svg { width: 18px; height: 18px; fill: none; stroke: var(--azul-fundo); stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.regras li b { margin-left: auto; font-family: var(--titulo); font-weight: 400; font-size: 18px; background: var(--amarelo); color: var(--tinta); padding: 3px 9px 1px; border-radius: 8px; transform: rotate(-3deg); box-shadow: 2px 2px 0 var(--tinta); }
.nota { color: var(--txt2); font-size: 13px; margin-top: 12px; line-height: 1.35; }
.vazio { color: var(--txt2); font-size: 15px; }
.metas { padding: 22px; }
.metas h3 { margin-bottom: 12px; }
.meta + .meta { margin-top: 14px; }
.meta .topo-m { display: flex; justify-content: space-between; gap: 10px; font-weight: 600; font-size: 15px; }
.meta .topo-m span:last-child { font-family: var(--titulo); font-weight: 400; font-size: 17px; color: var(--amarelo); white-space: nowrap; }
.meta .barra { height: 16px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; margin-top: 6px; border: 2px solid var(--tinta); }
.meta .barra i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--azul), var(--ciano)); transition: width 1.4s cubic-bezier(.2,.8,.2,1); }
.meta.batida .barra i { background: linear-gradient(90deg, #00B37E, #2EE59D); }
.com-tres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 22px; }
.bloco { padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.bloco h3 { display: flex; align-items: center; gap: 8px; }
.bloco h3 .coroa { color: var(--amarelo); font-size: 18px; letter-spacing: 0; }
.bloco h3 .conta { margin-left: auto; font-family: var(--titulo); font-weight: 400; font-size: 26px; letter-spacing: 0; color: #fff; }
.bloco .bt { align-self: flex-start; margin-top: auto; }
.doadores { list-style: none; display: grid; gap: 8px; }
.doadores li:not(.vazio) { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.doadores li:first-child:not(.vazio) { font-family: var(--titulo); font-weight: 400; font-size: 20px; color: var(--amarelo); }
.doadores .av { width: 34px; height: 34px; flex: none; }
.doadores .av img, .doadores .av .ini { border-width: 2.5px; box-shadow: none; font-size: 15px; }
.doadores .n { width: 24px; font-family: var(--titulo); color: var(--txt2); }
.avatares { display: flex; flex-wrap: wrap; gap: 8px; }
.avatares .av { width: 44px; height: 44px; }
.avatares .av img, .avatares .av .ini { border-width: 3px; box-shadow: none; font-size: 18px; }
.seguidores { list-style: none; display: grid; gap: 8px; }
.seguidores li { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; animation: popTag .5s var(--mola) both; animation-delay: calc(var(--i) * 60ms); }
.seguidores .av { width: 32px; height: 32px; flex: none; }
.seguidores .av img, .seguidores .av .ini { border-width: 2px; box-shadow: none; font-size: 14px; }
.seguidores small { margin-left: auto; color: var(--txt2); font-weight: 500; font-size: 13px; white-space: nowrap; }
.atualizado { text-align: center; color: var(--txt2); font-size: 13px; margin-top: 18px; }

/* ---------- setup ---------- */
.maquina { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 34px; align-items: center; padding: 30px; margin-bottom: 26px; position: relative; overflow: hidden; }
.maquina::before { content: ''; position: absolute; width: 520px; height: 520px; left: -140px; top: -120px; border-radius: 50%; background: radial-gradient(circle, rgba(51,193,255,.22), transparent 65%); }
.maquina .palco { position: relative; aspect-ratio: 4/3; display: grid; place-items: center; }
.maquina .palco img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(10px 14px 0 rgba(10,155,214,.55)) drop-shadow(0 20px 30px rgba(0,0,0,.5)); animation: pairar 5s ease-in-out infinite; }
@keyframes pairar { 50% { transform: translateY(-10px) rotate(-1deg); } }
.maquina h3 { font-family: var(--titulo); font-weight: 400; font-size: clamp(34px, 4.6vw, 52px); line-height: 1; margin: 12px 0 18px; }
.specs { display: grid; gap: 10px; }
.spec { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); transition: transform .25s var(--mola), border-color .2s; }
.spec:hover { transform: translateX(6px); border-color: var(--ciano); }
.spec .ic { width: 44px; height: 44px; border-radius: 12px; background: var(--ciano); border: 2.5px solid var(--tinta); box-shadow: 2px 3px 0 var(--tinta); display: grid; place-items: center; flex: none; }
.spec .ic svg { width: 24px; height: 24px; fill: none; stroke: var(--tinta); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.spec small { display: block; font-size: 12px; font-weight: 600; letter-spacing: .16em; color: var(--txt2); text-transform: uppercase; }
.spec b { font-weight: 600; font-size: 18px; }
.equip-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 22px; }
.equip { position: relative; padding: 16px 16px 18px; border-radius: 22px; background: var(--cartao2); border: 3px solid var(--tinta); box-shadow: 0 7px 0 var(--tinta); transition: transform .35s var(--mola), box-shadow .3s; }
.equip:hover { transform: translateY(-8px) rotate(-1.5deg); box-shadow: 0 12px 0 var(--tinta), 0 0 0 3px var(--ciano); }
.equip:nth-child(3n+2):hover { transform: translateY(-8px) rotate(1.5deg); }
.equip .vitrine { aspect-ratio: 1; border-radius: 16px; background: radial-gradient(circle at 50% 40%, #fff 0%, #EAF6FF 70%, #D3ECFF 100%); border: 3px solid var(--tinta); position: relative; overflow: hidden; display: grid; place-items: center; }
.equip .vitrine::after { content: ''; position: absolute; top: -20%; bottom: -20%; width: 40px; left: -70px; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent); }
.equip:hover .vitrine::after { animation: varreVit .7s ease-out; }
@keyframes varreVit { to { left: calc(100% + 40px); } }
.equip .vitrine img { width: 86%; height: 86%; object-fit: contain; transition: transform .45s var(--mola); filter: drop-shadow(0 10px 12px rgba(20,16,27,.22)); }
.equip:hover .vitrine img { transform: scale(1.08) rotate(-3deg); }
.equip .vitrine svg { width: 46%; height: 46%; fill: none; stroke: var(--azul-fundo); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.equip .tag { position: absolute; top: 4px; left: 4px; z-index: 2; font-size: 11px; padding: 6px 10px 5px 12px; box-shadow: 3px 3px 0 var(--tinta); }
.equip h4 { font-family: var(--titulo); font-weight: 400; font-size: 23px; line-height: 1.05; letter-spacing: .02em; margin-top: 14px; }
.equip p { color: var(--txt2); font-size: 15px; margin-top: 4px; line-height: 1.3; }
.equip.piada .vitrine { background: repeating-linear-gradient(-45deg, var(--amarelo) 0 18px, #FFD400 18px 36px); }
.equip.piada .vitrine span { font-family: var(--titulo); font-size: 64px; color: var(--tinta); transform: rotate(-8deg); text-shadow: 3px 3px 0 #fff; }
.equip.piada .pisc { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .08em; margin-top: 8px; padding: 4px 8px; border-radius: 6px; background: rgba(255,230,0,.14); color: var(--amarelo); }
.parceiro { margin-top: 28px; display: flex; align-items: center; gap: 22px; padding: 22px 26px; flex-wrap: wrap; position: relative; overflow: hidden; }
.parceiro img { height: 40px; width: auto; }
.parceiro p { flex: 1; min-width: 220px; color: var(--txt2); font-size: 17px; }
.parceiro p b { color: #fff; }

/* ---------- apoiar ---------- */
.apoiar { position: relative; padding: 60px 0 100px; }
.pix { position: relative; padding: clamp(28px, 5vw, 56px); border-radius: 30px; background: linear-gradient(135deg, #0F2A4A, #0B1420 60%); border: 3px solid var(--tinta);
  box-shadow: 0 10px 0 var(--tinta), 0 0 0 2px var(--borda), 0 30px 70px rgba(0,0,0,.5); overflow: hidden; display: grid; grid-template-columns: 1.1fr .9fr; gap: 34px; align-items: center; }
.pix::before { content: ''; position: absolute; width: 600px; height: 600px; right: -200px; top: -260px; border-radius: 50%; background: radial-gradient(circle, rgba(255,230,0,.2), transparent 65%); }
.pix .titulo { font-size: clamp(52px, 8vw, 100px); margin: 14px 0 12px; }
.pix .titulo em { font-style: normal; color: var(--amarelo); }
.pix .txt { font-size: 19px; color: var(--txt2); max-width: 520px; }
.passos { display: grid; gap: 12px; margin: 24px 0 0; list-style: none; }
.passos li { display: flex; align-items: center; gap: 14px; font-size: 17px; font-weight: 500; }
.passos li b { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: var(--amarelo); color: var(--tinta); font-family: var(--titulo); font-weight: 400; font-size: 20px; box-shadow: 3px 3px 0 var(--tinta); border: 2px solid var(--tinta); }
.lado-doar { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.bt.gigante { font-size: clamp(30px, 4.4vw, 44px); padding: 22px 34px 18px; border-radius: 22px; border-width: 4px; box-shadow: 0 10px 0 var(--tinta), 0 0 0 0 rgba(255,230,0,.6); animation: chama 2.2s ease-in-out infinite; overflow: hidden; }
.bt.gigante svg { width: 40px; height: 40px; }
.bt.gigante:hover { box-shadow: 0 13px 0 var(--tinta), 0 0 0 10px rgba(255,230,0,.18); animation: none; transform: translateY(-4px) rotate(-2deg) scale(1.03); }
.bt.gigante:active { transform: translateY(8px); box-shadow: 0 2px 0 var(--tinta); }
.bt.gigante::after { content: ''; position: absolute; top: -20%; bottom: -20%; width: 50px; left: -80px; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent); animation: brilhoTag 3.2s ease-in-out infinite; }
@keyframes chama { 0%, 100% { transform: none; } 8% { transform: rotate(-3deg) scale(1.04); } 16% { transform: rotate(3deg) scale(1.04); } 24% { transform: none; } }
.lado-doar .url { font-weight: 600; color: var(--txt2); font-size: 15px; letter-spacing: .04em; }
.lado-doar .url b { color: var(--ciano); }
.pix-status { font-size: 15px; font-weight: 600; padding: 8px 14px; border-radius: 99px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); display: inline-flex; align-items: center; gap: 8px; }
.pix-status i { width: 10px; height: 10px; border-radius: 50%; background: #8A94A6; }
.pix-status.on i { background: var(--verde); box-shadow: 0 0 10px var(--verde); animation: pisca 1.2s steps(2) infinite; }
.meta-pix { width: 100%; max-width: 360px; text-align: left; }
.meta-pix .topo-m { display: flex; justify-content: space-between; font-weight: 600; font-size: 15px; }
.meta-pix .barra { height: 14px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; margin-top: 6px; border: 2px solid var(--tinta); }
.meta-pix .barra i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--azul), var(--ciano)); transition: width 1.4s cubic-bezier(.2,.8,.2,1); }
.apoiadores { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 380px; }
.apoiadores small { width: 100%; font-size: 12px; letter-spacing: .2em; color: var(--txt2); font-weight: 600; }
.apoiadores span { font-weight: 600; font-size: 14px; padding: 4px 10px; border-radius: 8px; background: rgba(51,193,255,.12); border: 1px solid var(--borda); animation: popTag .5s var(--mola) both; animation-delay: calc(var(--i) * 80ms); }
@keyframes popTag { from { transform: scale(0) rotate(-20deg); opacity: 0; } }
.outros-apoios { margin-top: 26px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.apoio { display: flex; gap: 14px; align-items: center; padding: 18px 20px; border-radius: 18px; background: var(--cartao2); border: 3px solid var(--tinta); box-shadow: 0 6px 0 var(--tinta); transition: transform .25s var(--mola); }
.apoio:hover { transform: translateY(-5px) rotate(-1deg); }
.apoio .ico { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; flex: none; border: 3px solid var(--tinta); box-shadow: 2px 3px 0 var(--tinta); }
.apoio .ico svg { width: 26px; height: 26px; fill: #fff; }
.apoio b { font-family: var(--titulo); font-weight: 400; font-size: 21px; display: block; line-height: 1.1; }
.apoio small { color: var(--txt2); font-size: 14px; line-height: 1.3; display: block; margin-top: 2px; }

/* ---------- rodapé ---------- */
footer { padding: 46px 0 40px; border-top: 1px solid var(--borda); background: rgba(5,10,18,.5); }
footer .caixa { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: space-between; }
footer .redes { display: flex; gap: 10px; }
footer .redes a { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: rgba(255,255,255,.06); border: 2px solid var(--borda); transition: transform .2s var(--mola), background .2s; }
footer .redes a:hover { transform: translateY(-4px) rotate(-6deg); background: var(--ciano); }
footer .redes a:hover svg { fill: var(--tinta); }
footer .redes svg { width: 22px; height: 22px; fill: #fff; }
footer p { color: var(--txt2); font-size: 14px; width: 100%; text-align: center; margin-top: 10px; }

/* ---------- celular / tablet ---------- */
@media (max-width: 980px) {
  .hero .caixa, .sobre-grade, .lives-grade, .maquina, .pix, .com-grade { grid-template-columns: minmax(0, 1fr); }
  .com-tres { grid-template-columns: minmax(0, 1fr); }
  .hero { padding-top: 92px; min-height: auto; }
  .hero .caixa { gap: 26px; }
  .hero .foto { order: -1; width: min(300px, 72vw); }
  .hero .texto { text-align: center; display: flex; flex-direction: column; align-items: center; }
  .hero .bio { margin-inline: auto; }
  .chips, .hero .botoes { justify-content: center; }
  .rolar { display: none; }
  .outros-apoios { grid-template-columns: 1fr; }
  .lado-doar { padding-top: 6px; }
  .maquina { padding: 22px; }
  .maquina .palco { max-width: 460px; width: 100%; justify-self: center; }
}
@media (max-width: 760px) {
  html { scroll-padding-top: 64px; }
  .topo .caixa { height: 60px; gap: 10px; }
  .marca { font-size: 22px; } .marca img { width: 34px; height: 34px; }
  .hamb { display: grid; }
  .topo .bt { margin-left: auto; }
  .menu { position: fixed; top: 60px; left: 0; right: 0; flex-direction: column; gap: 0; padding: 8px 16px 18px; background: rgba(11,20,32,.97); border-bottom: 1px solid var(--borda);
    transform: translateY(-12px); opacity: 0; visibility: hidden; transition: transform .25s var(--mola), opacity .2s, visibility .2s; }
  .aberto .menu { transform: none; opacity: 1; visibility: visible; }
  .menu a { font-size: 20px; padding: 14px 6px; border-bottom: 1px solid rgba(255,255,255,.06); font-family: var(--titulo); font-weight: 400; color: #fff; letter-spacing: .03em; }
  .menu a.ativo::after { display: none; }
  .aberto header.topo, header.topo.aberto { background: rgba(11,20,32,.97); }
  section.sec { padding: 64px 0; }
  .cab { margin-bottom: 22px; }
  .cab p { font-size: 16px; }
  .hero h1 { margin-top: 10px; }
  .hero .botoes { gap: 12px; }
  .hero .botoes .bt { flex: 1 1 140px; }
  .faixas { height: 120px; }
  .faixa div { font-size: 20px; }
  .faixa.a { top: 26px; } .faixa.b { top: 48px; }
  .fala { font-size: 18px; padding: 22px; }
  .estilos { gap: 10px; }
  .estilo { padding: 16px 8px 14px; }
  .estilo .ico { width: 52px; height: 52px; } .estilo .ico svg { width: 28px; height: 28px; }
  .estilo b { font-size: 18px; }
  .estilo small { font-size: 12px; }
  .semana { gap: 5px; }
  .dia { padding: 10px 2px 8px; border-radius: 10px; }
  .dia b { font-size: 15px; } .dia small { font-size: 11px; }
  .relogio div { min-width: 0; flex: 1; }
  .relogio b { font-size: 32px; }
  .trilho { margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; }
  .trilho.shorts { grid-auto-columns: 46%; }
  .trilho.clipes { grid-auto-columns: 84%; }
  .setas { display: none; }
  .sub-cab h3 { font-size: 26px; }
  .equip-grade { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .tela .capa { gap: 8px; }
  .tela .capa .leg { display: none; }
  .tela .capa .play { width: 64px; height: 64px; }
  .tela .capa .play svg { width: 28px; height: 28px; margin-left: 4px; }
  .tela .capa .nome { font-size: 22px; }
  .capas span { font-size: 15px; }
  .ranking { padding: 18px 14px; }
  .podio { gap: 6px; margin-top: 34px; }
  .degrau .av { width: 58px; height: 58px; } .degrau.p1 .av { width: 76px; height: 76px; }
  .degrau b { font-size: 15px; }
  .degrau .pos { width: 24px; height: 24px; font-size: 14px; }
  .degrau.p1 .base { height: 84px; } .degrau.p2 .base { height: 60px; } .degrau.p3 .base { height: 44px; }
  .lista-rank .selos { display: none; }
  .equip { padding: 10px 10px 14px; border-radius: 18px; }
  .equip h4 { font-size: 18px; margin-top: 10px; }
  .equip p { font-size: 13px; }
  .equip .tag { font-size: 9px; letter-spacing: .16em; padding: 5px 8px 4px 9px; }
  .equip.piada .vitrine span { font-size: 44px; }
  .parceiro { padding: 20px; }
  .pix { border-radius: 24px; }
  .bt.gigante { width: 100%; padding: 20px 18px 16px; }
  .discord b { font-size: 20px; }
  footer .caixa { justify-content: center; text-align: center; }
}
@media (max-width: 380px) {
  .hero h1 { font-size: min(68px, 21vw); }
  .hero .tag { font-size: 11px; letter-spacing: .16em; }
}
@media (max-width: 340px) {
  .marca span { display: none; }
  .equip-grade { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .rv { opacity: 1; transform: none; }
}