/* hecho por r3k1 */
.juegos .info h2{font-family:var(--display);font-weight:700;letter-spacing:.01em;line-height:1;font-size:clamp(38px,5.4vw,68px)}
.juegos .info .num{font-family:var(--display);letter-spacing:.08em}
.juegos .selector b{font-family:var(--display);letter-spacing:.02em}
.juegos .lema{font-style:normal}
.juegos .selector em{display:none;font-family:var(--display);font-style:normal;font-weight:700;font-size:18px}
.juegos .embers{position:absolute;inset:0;width:100%;height:100%;z-index:-1}

.tele{position:absolute;left:4%;top:6%;width:84%;aspect-ratio:16/9;border-radius:16px;padding:8px;background:#0a0a0b;border:1px solid #2c2c2e;
  box-shadow:0 40px 90px -20px color-mix(in srgb,var(--tono) 45%,transparent)}
.tele .vista{position:relative;width:100%;height:100%;border-radius:10px;overflow:hidden;background:#000}
.tele .vista img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:none}
.pase img{opacity:0;animation:pase 16s infinite!important}
.pase img:nth-child(2){animation-delay:4s!important}
.pase img:nth-child(3){animation-delay:8s!important}
.pase img:nth-child(4){animation-delay:12s!important}
@keyframes pase{0%{opacity:0;transform:scale(1.08)}5%,25%{opacity:1}31%,100%{opacity:0;transform:scale(1)}}
.tele .vista::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px);mix-blend-mode:multiply}

.apaisado{position:absolute;right:0;bottom:4%;width:40%;aspect-ratio:19.5/9;border-radius:20px;padding:6px;background:#1c1c1e;border:1px solid #3a3a40;box-shadow:0 30px 60px -10px rgba(0,0,0,.9)}
.apaisado .vista{position:relative;height:100%;border-radius:14px;overflow:hidden;background:#000}
.apaisado img{width:100%;height:100%;object-fit:cover}
.btn-t{position:absolute;bottom:9%;width:15%;aspect-ratio:1;border-radius:50%;border:1.5px solid rgba(255,255,255,.35);background:rgba(255,255,255,.08);display:grid;place-items:center}
.btn-t svg{width:40%;fill:rgba(255,255,255,.85)}
.btn-t.l{left:4%}.btn-t.r{left:21%}
.btn-t.j{right:4%;width:18%;background:rgba(229,36,59,.55);border-color:#ff5a6e;animation:toca 1.6s ease-in-out infinite}
@keyframes toca{0%,70%,100%{transform:none}78%{transform:scale(.86)}}

.jefes{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:center;gap:1.5%}
.jefes img{width:17%;height:auto;filter:drop-shadow(0 8px 16px rgba(0,0,0,.9));animation:acecha 3.2s ease-in-out infinite;animation-delay:calc(var(--j) * -.6s)}
@keyframes acecha{50%{transform:translateY(-9px)}}
.diapo:has(.jefes) .tele{top:0;width:80%;left:10%}

.avance{position:absolute;inset:4% 6%;display:grid;place-items:center;border-radius:20px;overflow:hidden;
  background:radial-gradient(circle at 50% 62%,color-mix(in srgb,var(--tono) 30%,transparent),#000 66%);border:1px solid #2c2c2e}
.avance .tres{font-family:var(--display);font-size:clamp(90px,15vw,190px);font-weight:900;color:#fff;line-height:1;
  text-shadow:0 0 40px rgba(229,36,59,.9),0 0 90px rgba(229,36,59,.5);animation:respira 4s ease-in-out infinite}
@keyframes respira{50%{text-shadow:0 0 20px rgba(229,36,59,.6),0 0 50px rgba(229,36,59,.3);transform:scale(.97)}}
.avance .alma{position:absolute;left:14%;bottom:14%;width:13%;fill:#f5f1e8;filter:drop-shadow(0 0 10px rgba(229,36,59,.8));animation:vaga 6s ease-in-out infinite}
.avance .alma ellipse{fill:#000}
@keyframes vaga{50%{transform:translate(10px,-14px) rotate(4deg)}}
.avance .carga{position:absolute;left:12%;right:12%;bottom:9%;height:4px;border-radius:4px;background:#2c2c2e;overflow:hidden}
.avance .carga::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--red),#f5f1e8);transform-origin:0 50%;animation:carga 5s cubic-bezier(.6,0,.3,1) infinite}
@keyframes carga{0%{transform:scaleX(0)}70%,100%{transform:scaleX(.62)}}
.avance small{position:absolute;right:12%;bottom:calc(9% + 10px);font-size:11px;color:var(--text-2);letter-spacing:.08em;text-transform:uppercase}

.info .ir .link-arrow{font-size:15px;color:var(--text)}

@media (max-width:820px){
  .juegos .info h2{font-size:clamp(32px,9vw,44px)}
  .apaisado{width:46%;bottom:0}
  .juegos .lema{display:none}
  .juegos .selector b{display:none}
  .juegos .selector em{display:block;text-align:center}
  .juegos .selector button{text-align:center}
}
@media (prefers-reduced-motion:reduce){.pase img:first-child{opacity:1}.jefes img,.avance *,.btn-t{animation:none!important}}
.juegos .info .btn::after,.info .btn[href^="/"]::after{content:"›";font-size:20px;line-height:1}