/* ===================== Base ===================== */
/* Fuente Inter ALOJADA EN LOCAL (sin depender de Google Fonts / internet, que
   bloqueaba el render en servidores sin salida a internet). */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter.woff2') format('woff2');
}
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #0b1020; --bg2: #131a33; --card: #1a2342; --linea: #27325c;
  --txt: #eaf0ff; --txt2: #9fb0d6; --oro: #ffd34d; --plata: #cdd6ef; --bronce: #e6a368;
  --acc: #3f8cff; --acc2: #7c4dff; --ok: #34d399; --mal: #ff6b6b;
  --sombra: 0 10px 40px rgba(0,0,0,.45);
}
html, body { height: 100%; }
body { font-family: 'Inter', system-ui, sans-serif; color: var(--txt); background: var(--bg); -webkit-font-smoothing: antialiased; }
.oculto { display: none !important; }

/* ===================== Acceso (login + selector) ===================== */
.pagina-acceso { display: grid; place-items: center; min-height: 100vh; padding: 24px; position: relative; overflow: auto; }
.fondo-deco { position: fixed; inset: 0; background:
  radial-gradient(60vw 60vw at 15% 10%, rgba(63,140,255,.20), transparent 60%),
  radial-gradient(50vw 50vw at 85% 90%, rgba(124,77,255,.20), transparent 60%),
  linear-gradient(160deg, #0b1020, #0e1530); z-index: -1; }
.tarjeta-acceso { width: 100%; max-width: 400px; background: var(--card); border: 1px solid var(--linea); border-radius: 18px; padding: 30px; box-shadow: var(--sombra); }
.tarjeta-acceso.ancho { max-width: 860px; display: flex; flex-direction: column; max-height: 90vh; }
.logo-acceso { font-size: 22px; font-weight: 800; display: flex; align-items: center; gap: 10px; }
.sub-acceso { color: var(--txt2); margin: 8px 0 22px; text-transform: capitalize; }
form label { display: block; font-size: 13px; color: var(--txt2); margin-bottom: 14px; font-weight: 600; }
form input { width: 100%; margin-top: 6px; padding: 12px 14px; border-radius: 11px; border: 1px solid var(--linea); background: #0f1730; color: var(--txt); font-size: 15px; }
form input:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px rgba(63,140,255,.25); }
button[type=submit], .boton { width: 100%; margin-top: 6px; padding: 13px; border: 0; border-radius: 11px; background: linear-gradient(135deg, var(--acc), var(--acc2)); color: #fff; font-weight: 800; font-size: 15px; cursor: pointer; transition: transform .1s, filter .2s; }
button[type=submit]:hover { filter: brightness(1.08); }
button[type=submit]:active { transform: scale(.98); }
button:disabled { opacity: .6; cursor: default; }
.error { color: var(--mal); font-size: 14px; margin-top: 12px; }
.cab-selector { display: flex; justify-content: space-between; align-items: center; }
.link-salir { background: none; border: 1px solid var(--linea); color: var(--txt2); padding: 7px 14px; border-radius: 9px; cursor: pointer; font-weight: 600; }
.link-salir:hover { color: var(--txt); border-color: var(--acc); }
.filtros { display: flex; gap: 8px; margin: 4px 0 14px; flex-wrap: wrap; }
.chip { background: #0f1730; border: 1px solid var(--linea); color: var(--txt2); padding: 8px 16px; border-radius: 99px; cursor: pointer; font-weight: 700; font-size: 14px; transition: all .15s; }
.chip:hover { color: var(--txt); border-color: var(--acc); }
.chip.activo { background: linear-gradient(135deg, var(--acc), var(--acc2)); color: #fff; border-color: transparent; }
.buscar-campana { flex: 1; min-width: 160px; background: #0f1730; border: 1px solid var(--linea); color: var(--txt); padding: 8px 14px; border-radius: 99px; font-size: 14px; font-weight: 600; }
.buscar-campana:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px rgba(63,140,255,.25); }
.buscar-campana::placeholder { color: var(--txt2); }
.grid-campanas { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin-top: 8px; overflow-y: auto; padding-right: 4px; }
.grid-campanas::-webkit-scrollbar { width: 8px; }
.grid-campanas::-webkit-scrollbar-thumb { background: var(--linea); border-radius: 8px; }
.tarjeta-campana { display: block; text-decoration: none; color: var(--txt); background: #0f1730; border: 1px solid var(--linea); border-radius: 14px; padding: 18px; transition: transform .15s, border-color .2s, box-shadow .2s; }
.tarjeta-campana:hover { transform: translateY(-3px); border-color: var(--acc); box-shadow: 0 10px 30px rgba(63,140,255,.18); }
.cc-nombre { font-weight: 800; font-size: 17px; }
.cc-meta { color: var(--txt2); font-size: 13px; margin-top: 6px; }
.cc-flecha { color: var(--acc); font-weight: 700; margin-top: 14px; font-size: 14px; }
.cargando { color: var(--txt2); padding: 30px; text-align: center; grid-column: 1/-1; }
.tarjeta-prueba { border-style: dashed; border-color: var(--oro); background: linear-gradient(160deg, #2a2412, #1a1730); }
.tarjeta-prueba:hover { border-color: var(--oro); box-shadow: 0 10px 30px rgba(255, 211, 77, .2); }
.tarjeta-prueba .cc-flecha { color: var(--oro); }

/* ===================== Pantalla ===================== */
.pagina-pantalla { overflow: hidden; background: radial-gradient(80vw 60vw at 50% -10%, #16224a, transparent 60%), var(--bg); }
.pantalla { height: 100vh; display: flex; flex-direction: column; padding: clamp(10px, 1.4vw, 22px); gap: clamp(8px, 1.1vw, 16px); overflow: hidden; }

.cab { display: flex; justify-content: space-between; align-items: center; }
.cab-izq { display: flex; align-items: center; gap: 14px; }
.volver { text-decoration: none; color: var(--txt2); font-size: 34px; line-height: 1; width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--linea); border-radius: 12px; }
.volver:hover { color: var(--txt); border-color: var(--acc); }
.cab h1 { font-size: clamp(20px, 2.6vw, 38px); font-weight: 900; letter-spacing: -.5px; }
.cab-fecha { color: var(--txt2); font-size: clamp(12px, 1.1vw, 16px); text-transform: capitalize; }
.cab-der { display: flex; align-items: center; gap: 10px; }
.directo { display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--ok); font-size: clamp(12px, 1.1vw, 15px); letter-spacing: .5px; }
.punto { width: 11px; height: 11px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(52,211,153,.7); animation: latido 1.6s infinite; }
@keyframes latido { 0% { box-shadow: 0 0 0 0 rgba(52,211,153,.7); } 70% { box-shadow: 0 0 0 12px rgba(52,211,153,0); } 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); } }
.boton-icono { width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--linea); background: var(--card); color: var(--txt); font-size: 20px; cursor: pointer; transition: transform .1s, border-color .2s; }
.boton-icono:hover { border-color: var(--acc); }
.boton-icono.activo { border-color: var(--acc); background: rgba(63,140,255,.18); }
.boton-icono:active { transform: scale(.93); }

/* Marcadores */
.marcadores { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(12px, 1.6vw, 22px); }
.marcador { background: linear-gradient(160deg, var(--card), #141d3a); border: 1px solid var(--linea); border-radius: 18px; padding: clamp(8px, 1.1vw, 16px); text-align: center; box-shadow: var(--sombra); }
.marcador.grande { background: linear-gradient(160deg, #1c2c5e, #16224a); border-color: #2f4a8f; }
.m-valor { font-size: clamp(28px, 4vw, 62px); font-weight: 900; line-height: 1; letter-spacing: -2px; }
.marcador.grande .m-valor { color: var(--oro); text-shadow: 0 0 30px rgba(255,211,77,.35); }
.m-etq { color: var(--txt2); font-weight: 700; margin-top: 4px; text-transform: uppercase; font-size: clamp(10px, .9vw, 14px); letter-spacing: 1px; }

/* Ranking */
.ranking { flex: 1; display: flex; flex-direction: column; gap: clamp(5px, .6vw, 9px); overflow: hidden; }
.fila-agente { display: grid; grid-template-columns: clamp(44px,5vw,72px) auto 1fr auto; align-items: center; gap: clamp(10px, 1.4vw, 20px);
  background: linear-gradient(100deg, var(--card), #141d3a); border: 1px solid var(--linea); border-radius: 16px; padding: clamp(4px, .5vw, 9px) clamp(12px, 1.4vw, 22px); flex: 1; min-height: 0; }
.fila-agente.podio { border-color: #3a4a86; background: linear-gradient(100deg, #1d2a55, #15203f); }
.fa-pos { font-size: clamp(22px, 3vw, 46px); font-weight: 900; text-align: center; color: var(--txt2); }
.podio .fa-pos { color: var(--oro); }
.fa-foto { position: relative; width: clamp(36px, 6.4vh, 76px); aspect-ratio: 1; align-self: center; }
.fa-foto img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid var(--linea); background: #0f1730; }
.podio .fa-foto img { border-color: var(--oro); box-shadow: 0 0 20px rgba(255,211,77,.3); }
.fa-llama { position: absolute; bottom: -4px; right: -4px; font-size: clamp(16px, 1.6vw, 24px); display: none; }
.podio .fa-llama { display: block; }
/* La info ocupa toda la altura de la fila y centra el NOMBRE; la barra va al
   fondo y fuera del flujo, así el nombre queda a la misma altura que la foto. */
.fa-info { min-width: 0; position: relative; align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.fa-nombre { font-weight: 800; font-size: clamp(16px, 1.9vw, 30px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fa-barra { position: absolute; left: 0; right: 0; bottom: 14%; height: clamp(6px, .7vw, 10px); background: #0f1730; border-radius: 99px; margin: 0; overflow: hidden; }
.fa-barra span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--acc), var(--acc2)); transition: width .8s cubic-bezier(.2,.8,.2,1); }
.podio .fa-barra span { background: linear-gradient(90deg, var(--oro), #ff9d3c); }
.fa-ventas { text-align: right; }
.fa-ventas b { font-size: clamp(22px, 2.8vw, 48px); font-weight: 900; line-height: 1; }
.fa-ventas small { display: block; color: var(--txt2); font-size: clamp(10px, .9vw, 13px); text-transform: uppercase; letter-spacing: 1px; }
.podio .fa-ventas b { color: var(--oro); }

/* Ping de venta sobre la tarjeta */
.fila-agente.vende { animation: vende .8s ease; }
@keyframes vende { 0% { box-shadow: 0 0 0 0 rgba(52,211,153,0); } 30% { box-shadow: 0 0 0 4px rgba(52,211,153,.6); transform: scale(1.012); } 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); } }
.burbuja-venta { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--ok); color: #04231a; font-weight: 900; font-size: 13px; padding: 3px 9px; border-radius: 99px; animation: subeBurbuja 1.5s ease forwards; white-space: nowrap; }
@keyframes subeBurbuja { 0% { opacity: 0; transform: translate(-50%, 6px); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -38px); } }

.pie { display: flex; justify-content: space-between; color: var(--txt2); font-size: clamp(11px, 1vw, 14px); }
.pie-marca { opacity: .6; }

/* ===================== Capa de animaciones ===================== */
.capa-anim { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; pointer-events: none; overflow: hidden; }
.capa-anim::before { content: ''; position: absolute; inset: 0; background: rgba(6,10,24,.82); backdrop-filter: blur(4px); opacity: 0; transition: opacity .4s; }
.capa-anim.activa::before { opacity: 1; }
.capa-anim.activa .anim { animation: entraAnim .55s cubic-bezier(.18,1.3,.4,1) both; }
.capa-anim.saliendo { opacity: 0; transition: opacity .55s; }
@keyframes entraAnim { 0% { transform: scale(.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

.anim { position: relative; text-align: center; padding: 30px; max-width: 90vw; }
.anim-titulo { font-size: clamp(38px, 7vw, 104px); font-weight: 900; letter-spacing: -2px; line-height: 1; margin-top: 18px;
  background: linear-gradient(90deg, #fff, var(--oro)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 6px 24px rgba(0,0,0,.5)); }
.anim-sub { font-size: clamp(18px, 2.6vw, 36px); font-weight: 700; color: var(--txt); margin-top: 14px; }
.anim-sub b { color: var(--oro); }
.anim-foto { width: clamp(120px, 18vw, 240px); aspect-ratio: 1; border-radius: 50%; object-fit: cover; border: 6px solid #fff; box-shadow: 0 12px 50px rgba(0,0,0,.6); }
.anim-foto.gigante { width: clamp(160px, 24vw, 320px); }
.anim-foto.aro-oro { border-color: var(--oro); box-shadow: 0 0 60px rgba(255,211,77,.6); }
.anim-foto.gris { filter: grayscale(1) brightness(.8); border-color: #6b7280; }
.anim-foto.late { animation: late 1s ease-in-out infinite; }
@keyframes late { 0%,100% { transform: scale(1); } 50% { transform: scale(1.07); } }

/* Adelantamiento (carrera) */
.adelantamiento .rayas { position: absolute; inset: 0; background: repeating-linear-gradient(115deg, transparent 0 40px, rgba(255,255,255,.05) 40px 80px); animation: corre .5s linear infinite; }
@keyframes corre { to { background-position: 160px 0; } }
.anim-duelo { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 3vw, 50px); position: relative; }
.duelo-sube { animation: subeDuelo .7s cubic-bezier(.2,.9,.2,1.3) both; }
.duelo-baja { animation: bajaDuelo .7s ease both; opacity: .75; }
@keyframes subeDuelo { 0% { transform: translateX(-60px) translateY(20px) scale(.7); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes bajaDuelo { 0% { transform: translateY(-14px) scale(1.05); } 100% { transform: translateY(8px) scale(.92); } }
.duelo-nombre { font-weight: 800; margin-top: 10px; font-size: clamp(14px, 1.6vw, 22px); }
.coche { font-size: clamp(40px, 7vw, 90px); animation: vroom 1.1s ease-in-out infinite; }
@keyframes vroom { 0%,100% { transform: translateX(-8px); } 50% { transform: translateX(12px); } }

/* Despertó (destellos) */
.desperto .destellos { position: absolute; inset: -40px; background: radial-gradient(circle, rgba(255,211,77,.25), transparent 60%); animation: pulso 1.2s ease-in-out infinite; }
@keyframes pulso { 0%,100% { transform: scale(.9); opacity: .5; } 50% { transform: scale(1.15); opacity: 1; } }

/* Atascado (zzz) */
.atascado .zzz { font-size: clamp(40px, 6vw, 80px); position: absolute; top: 0; right: 18%; animation: flota 1.8s ease-in-out infinite; }
@keyframes flota { 0% { transform: translateY(10px); opacity: .3; } 50% { opacity: 1; } 100% { transform: translateY(-22px); opacity: 0; } }

/* Confeti */
.confeti { position: fixed; top: -16px; width: 10px; height: 14px; border-radius: 2px; z-index: 60; animation: caeConfeti linear forwards; }
@keyframes caeConfeti { 0% { transform: translateY(-20px) rotate(0); opacity: 1; } 100% { transform: translateY(102vh) rotate(720deg); opacity: .9; } }

/* ===================== Adelantamiento: muñecos corredores ===================== */
.escena-duelo { position: relative; width: min(92vw, 1040px); height: min(46vh, 380px); margin: 6px auto 0; }
.suelo-linea { position: absolute; left: 3%; right: 3%; bottom: 18%; height: 7px; border-radius: 6px;
  background: linear-gradient(90deg, transparent, #46599c, #8aa0e8, #46599c, transparent); box-shadow: 0 0 26px rgba(122,148,224,.7); }

.corredor { position: absolute; bottom: 18%; width: 132px; height: 200px; }
.corredor-nombre { position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-weight: 800; font-size: clamp(13px, 1.4vw, 20px); }
.corredor.pierde { left: 50%; z-index: 3; }
.corredor.gana { left: 5%; z-index: 6; transition: left 2s cubic-bezier(.25, 0, .5, 1); }
.escena-duelo.var-empujon.arranca .corredor.gana { left: 32%; }

.figura { position: absolute; inset: 0; transform-origin: bottom center; animation: bobCorre .33s linear infinite; }
.torso { position: absolute; left: 50%; bottom: 56px; width: 52px; height: 80px; margin-left: -26px; border-radius: 22px 22px 16px 16px; z-index: 3; }
.cabeza { position: absolute; left: 50%; bottom: 118px; width: 90px; height: 90px; margin-left: -45px; border-radius: 50%; overflow: hidden; border: 4px solid #fff; background: #0f1730; z-index: 4; box-shadow: 0 6px 20px rgba(0,0,0,.5); }
.cabeza img { width: 100%; height: 100%; object-fit: cover; }
.brazo { position: absolute; width: 16px; height: 54px; border-radius: 10px; bottom: 90px; transform-origin: top center; }
.brazo.izq { left: 50%; margin-left: -34px; z-index: 2; animation: brazoCA .33s linear infinite; }
.brazo.der { left: 50%; margin-left: 18px; z-index: 5; animation: brazoCB .33s linear infinite; }
.pierna { position: absolute; width: 18px; height: 60px; border-radius: 10px; bottom: 0; transform-origin: top center; z-index: 1; }
.pierna.izq { left: 50%; margin-left: -20px; animation: piernaCA .33s linear infinite; }
.pierna.der { left: 50%; margin-left: 2px; animation: piernaCB .33s linear infinite; }

.gana .torso { background: linear-gradient(#ffd866, #f0a93c); }
.gana .brazo { background: #e89a2c; } .gana .pierna { background: #d98b22; }
.gana .cabeza { border-color: var(--oro); box-shadow: 0 0 28px rgba(255, 211, 77, .6); }
.pierde .torso { background: linear-gradient(#6b7cad, #48588a); }
.pierde .brazo { background: #44527e; } .pierde .pierna { background: #3a4770; }

@keyframes bobCorre { 50% { transform: translateY(-8px); } }
@keyframes piernaCA { 0%, 100% { transform: rotate(32deg); } 50% { transform: rotate(-32deg); } }
@keyframes piernaCB { 0%, 100% { transform: rotate(-32deg); } 50% { transform: rotate(32deg); } }
@keyframes brazoCA { 0%, 100% { transform: rotate(-48deg); } 50% { transform: rotate(48deg); } }
@keyframes brazoCB { 0%, 100% { transform: rotate(48deg); } 50% { transform: rotate(-48deg); } }

/* General al impacto: el perdedor deja de correr (se queda inerte) */
.escena-duelo.impacto .corredor.pierde .figura,
.escena-duelo.impacto .corredor.pierde .brazo,
.escena-duelo.impacto .corredor.pierde .pierna,
.escena-duelo.impacto .corredor.gana .pierna { animation-play-state: paused; }
@keyframes saltoVict { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-42px); } }

/* extras de variante: ocultos por defecto */
.escena-duelo .trampa, .escena-duelo .risa,
.escena-duelo .arbusto { position: absolute; opacity: 0; pointer-events: none; z-index: 9; }

/* Gafas de sol DIBUJADAS sobre la cara (hijas de la figura, a la altura de los
   ojos), para que caigan siempre en su sitio. Ocultas por defecto. */
.figura .gafas-cara { position: absolute; left: 50%; bottom: 152px; width: 60px; height: 20px; margin-left: -30px; opacity: 0; z-index: 6; }
.figura .gafas-cara i { position: absolute; top: 0; width: 25px; height: 18px; border-radius: 8px 8px 7px 7px; background: linear-gradient(#2a2f3a, #05070b); border: 2px solid #0a0c10; box-shadow: 0 1px 2px rgba(255, 255, 255, .25) inset; }
.figura .gafas-cara i:nth-child(1) { left: 0; }
.figura .gafas-cara i:nth-child(2) { right: 0; }
.figura .gafas-cara::after { content: ''; position: absolute; top: 6px; left: 50%; margin-left: -7px; width: 14px; height: 4px; background: #05070b; border-radius: 2px; } /* puente */

/* BRAZO QUE APUNTA: una sola pieza (antebrazo + pistola + fogonazo) que sale
   del hombro hacia la derecha. Al ser hija del personaje, la mano, la pistola y
   el fogonazo SIEMPRE están alineados. Oculto por defecto. */
.corredor .brazo-apunta { position: absolute; left: 54%; bottom: 96px; width: 92px; height: 16px; opacity: 0; z-index: 7; pointer-events: none; }
.corredor .brazo-apunta .antebrazo { position: absolute; left: 0; top: 1px; width: 50px; height: 14px; border-radius: 8px; background: #e89a2c; }
.corredor .brazo-apunta .arma { position: absolute; left: 42px; top: -4px; width: 48px; height: 22px; }
.corredor .brazo-apunta .canon { position: absolute; left: 0; top: 4px; width: 44px; height: 12px; border-radius: 3px; background: linear-gradient(#525a66, #262a31); box-shadow: inset 0 -2px 2px rgba(0, 0, 0, .45); }
.corredor .brazo-apunta .canon::after { content: ''; position: absolute; right: -3px; top: 3px; width: 6px; height: 6px; background: #14161a; border-radius: 2px; } /* boca */
.corredor .brazo-apunta .grip { position: absolute; left: 4px; top: 13px; width: 14px; height: 18px; border-radius: 0 0 4px 6px; background: linear-gradient(#3a3f48, #20232a); transform: skewX(-16deg); }
.corredor .brazo-apunta .cargador { display: none; }
.corredor .brazo-apunta .fogonazo { position: absolute; left: 44px; top: 50%; margin-top: -12px; width: 24px; height: 24px; opacity: 0; border-radius: 50%; transform: scale(0); pointer-events: none;
  background: radial-gradient(circle, #fff 0%, #ffe07a 35%, #ff9d3c 60%, transparent 72%); }
.corredor .brazo-apunta .fogonazo.on { opacity: 1; animation: fogon .12s ease-out; }
@keyframes fogon { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(1.7); opacity: 0; } }
/* subfusil (modo GTA): cañón más largo + cargador, y fogonazo más grande */
.escena-duelo.var-gta .corredor.gana .brazo-apunta { width: 118px; }
.escena-duelo.var-gta .corredor.gana .brazo-apunta .arma { left: 42px; width: 74px; }
.escena-duelo.var-gta .corredor.gana .brazo-apunta .canon { width: 70px; }
.escena-duelo.var-gta .corredor.gana .brazo-apunta .cargador { display: block; position: absolute; left: 20px; top: 15px; width: 11px; height: 22px; border-radius: 0 0 3px 3px; background: linear-gradient(#3a3f48, #20232a); transform: skewX(-8deg); }
.escena-duelo.var-gta .corredor.gana .brazo-apunta .fogonazo { left: 70px; width: 32px; height: 32px; margin-top: -16px; }

/* Mareo: 3 estrellitas dibujadas que ORBITAN sobre la cabeza (hijas de la
   figura, así van con la cabeza esté donde esté). Ocultas por defecto. */
.figura .estrellas { position: absolute; left: 50%; bottom: 178px; width: 58px; height: 58px; margin-left: -29px; opacity: 0; z-index: 11; animation: giraMareo 1.1s linear infinite; }
.figura .estrellas i { position: absolute; background: #ffd34d; filter: drop-shadow(0 0 3px rgba(255, 211, 77, .85));
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.figura .estrellas i:nth-child(1) { width: 18px; height: 18px; top: 0; left: 50%; margin-left: -9px; }
.figura .estrellas i:nth-child(2) { width: 13px; height: 13px; bottom: 4px; left: 2px; }
.figura .estrellas i:nth-child(3) { width: 13px; height: 13px; bottom: 4px; right: 2px; }
@keyframes giraMareo { to { transform: rotate(360deg); } }

/* --- variante EMPUJÓN: lo tira al suelo de lado --- */
.escena-duelo.var-empujon.impacto .corredor.gana .figura { animation: none; transform: rotate(8deg); }
.escena-duelo.var-empujon.impacto .corredor.gana .brazo.der { animation: none; transform: rotate(155deg); }
.escena-duelo.var-empujon.impacto .corredor.gana .brazo.izq { animation: none; transform: rotate(-22deg); }
.escena-duelo.var-empujon.impacto .corredor.gana { animation: saltoVict .5s ease .35s 2; }
.escena-duelo.var-empujon.impacto .corredor.pierde { transform: translateX(165px) translateY(58px) rotate(88deg); transition: transform .6s cubic-bezier(.3, .6, .5, 1.1); z-index: 2; }

/* --- variantes DISPARO y GTA: la otra corre DELANTE; la ganadora QUIETA detrás
   apunta (la pistola mira a la derecha, hacia ella) y dispara; la otra cae y la
   ganadora se pone gafas. GTA = subfusil acribillando + zoom a la cara. --- */
.escena-duelo.var-disparo .corredor.gana, .escena-duelo.var-gta .corredor.gana { left: 9%; transition: none; }
.escena-duelo.var-disparo .corredor.pierde, .escena-duelo.var-gta .corredor.pierde { left: 60%; }
.escena-duelo.var-disparo .corredor.gana .figura, .escena-duelo.var-gta .corredor.gana .figura,
.escena-duelo.var-disparo .corredor.gana .brazo, .escena-duelo.var-gta .corredor.gana .brazo,
.escena-duelo.var-disparo .corredor.gana .pierna, .escena-duelo.var-gta .corredor.gana .pierna { animation: none; }
/* al apuntar: se muestra la pistola (dibujada, en la mano) y el brazo se estira */
/* al apuntar: aparece el brazo-que-apunta (con pistola) y se oculta el brazo normal */
.escena-duelo.var-disparo.apunta .corredor.gana .brazo-apunta, .escena-duelo.var-gta.apunta .corredor.gana .brazo-apunta { opacity: 1; }
.escena-duelo.var-disparo.apunta .corredor.gana .brazo.der, .escena-duelo.var-gta.apunta .corredor.gana .brazo.der { opacity: 0; }
/* la otra cae al recibir los disparos */
.escena-duelo.var-disparo.cae .corredor.pierde, .escena-duelo.var-gta.cae .corredor.pierde {
  transform: translateX(70px) translateY(54px) rotate(-84deg); transition: transform .55s cubic-bezier(.3, .6, .5, 1.1); z-index: 2;
}
/* la perseguida sigue corriendo mientras le disparan; solo se para al caer */
.escena-duelo.var-disparo.impacto .corredor.pierde .figura, .escena-duelo.var-gta.impacto .corredor.pierde .figura,
.escena-duelo.var-disparo.impacto .corredor.pierde .brazo, .escena-duelo.var-gta.impacto .corredor.pierde .brazo,
.escena-duelo.var-disparo.impacto .corredor.pierde .pierna, .escena-duelo.var-gta.impacto .corredor.pierde .pierna { animation-play-state: running; }
.escena-duelo.var-disparo.cae .corredor.pierde .figura, .escena-duelo.var-gta.cae .corredor.pierde .figura,
.escena-duelo.var-disparo.cae .corredor.pierde .brazo, .escena-duelo.var-gta.cae .corredor.pierde .brazo,
.escena-duelo.var-disparo.cae .corredor.pierde .pierna, .escena-duelo.var-gta.cae .corredor.pierde .pierna { animation-play-state: paused; }
/* gafas de sol que caen sobre la cara de la ganadora */
.escena-duelo.chula .corredor.gana .figura .gafas-cara { opacity: 1; animation: caenGafas .45s both; }
@keyframes caenGafas { 0% { transform: translateY(-40px); opacity: 0; } 70% { transform: translateY(2px); opacity: 1; } 100% { transform: translateY(0); opacity: 1; } }
/* GTA: zoom a la cara de la ganadora */
.escena-duelo.var-gta.zoom { transform: scale(1.4); transform-origin: 11% 46%; transition: transform .7s ease; }

/* --- variante TRAMPA: secuencia (sola → pone trampa → se esconde → la otra
   entra corriendo → cae → se ríe) --- */
.escena-duelo.var-trampa .corredor.gana { left: 40%; transition: left .5s ease, transform .4s ease; }
/* la otra NO se ve hasta que entra corriendo (ni de reojo) */
.escena-duelo.var-trampa .corredor.pierde { left: -34%; visibility: hidden; transition: left 1.3s linear; }
.escena-duelo.var-trampa .corredor.gana .figura, .escena-duelo.var-trampa .corredor.gana .pierna { animation: none; }
.escena-duelo.var-trampa.pone-trampa .trampa { opacity: 1; left: 64%; bottom: 16%; font-size: clamp(40px, 5.5vw, 78px); transform: translate(-50%, 0); }
/* se esconde DETRÁS de un arbusto (el arbusto tapa al ganador) */
.escena-duelo.var-trampa.se-esconde .corredor.gana { left: 10%; transform: scale(.8); }
.escena-duelo.var-trampa.se-esconde .arbusto { opacity: 1; left: 10%; bottom: 11%; transform: translateX(-50%); z-index: 8; }
.escena-duelo.var-trampa.viene .corredor.pierde { left: 58%; visibility: visible; }
.escena-duelo.var-trampa.viene .corredor.pierde .figura { animation: bobCorre .33s linear infinite; }
.escena-duelo.var-trampa.impacto .corredor.pierde { left: 62%; transform: translateY(98px) scale(.4) rotate(150deg); opacity: 0; transition: transform .55s ease-in, opacity .55s ease-in; }
.escena-duelo.var-trampa.rie .corredor.gana { left: 20%; transform: scale(1); animation: saltoVict .45s ease 0s 3; }
.escena-duelo.var-trampa.rie .risa { opacity: 1; left: 22%; bottom: 58%; font-size: clamp(34px, 4.6vw, 64px); transform: translate(-50%, 50%); animation: late 1s infinite; }

/* Arbusto dibujado (3 matas verdes) */
.escena-duelo .arbusto { width: clamp(90px, 12vw, 150px); height: clamp(60px, 8vw, 100px); bottom: 11%; }
.escena-duelo .arbusto i { position: absolute; bottom: 0; border-radius: 50% 50% 45% 45%; background: radial-gradient(circle at 40% 32%, #5cc463, #2e7d32); box-shadow: inset -6px -8px 10px rgba(0, 0, 0, .25); }
.escena-duelo .arbusto i:nth-child(1) { left: 0; width: 52%; height: 70%; }
.escena-duelo .arbusto i:nth-child(2) { left: 26%; width: 64%; height: 100%; }
.escena-duelo .arbusto i:nth-child(3) { right: 0; width: 50%; height: 66%; }

/* El mareo aparece cuando el perdedor cae (empujón: .impacto; disparo/gta: .cae) */
.escena-duelo.var-empujon.impacto .corredor.pierde .estrellas,
.escena-duelo.var-disparo.cae .corredor.pierde .estrellas,
.escena-duelo.var-gta.cae .corredor.pierde .estrellas { opacity: 1; }

/* ¡ZAS! del choque */
.pow { position: absolute; left: 38%; bottom: 44%; transform: translate(-50%, 50%); z-index: 8; font-size: clamp(42px, 6vw, 92px); text-align: center; line-height: .9; }
.pow span { display: block; font-size: clamp(20px, 2.6vw, 38px); font-weight: 900; color: var(--oro); -webkit-text-stroke: 2px #8a4a00; }
.pow:not(.oculto) { animation: powBurst .55s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes powBurst { 0% { transform: translate(-50%, 50%) scale(0) rotate(-25deg); } 60% { transform: translate(-50%, 50%) scale(1.3) rotate(8deg); } 100% { transform: translate(-50%, 50%) scale(1) rotate(0); } }

/* Temblor de pantalla en el golpe */
.capa-anim.temblor { animation: temblor .46s linear; }
@keyframes temblor { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-11px, 7px) rotate(-1deg); } 40% { transform: translate(10px, -6px) rotate(1deg); } 60% { transform: translate(-8px, 5px); } 80% { transform: translate(7px, -4px); } }

/* ===================== Cascos de teleoperador ===================== */
.cascos { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.cascos .banda { position: absolute; top: -12%; left: 4%; right: 4%; height: 58%; border: 7px solid #1f2430; border-bottom: none; border-radius: 50% 50% 0 0; }
.cascos .orejera { position: absolute; top: 38%; width: 22%; height: 34%; background: #1f2430; border-radius: 7px; }
.cascos .o-izq { left: -11%; } .cascos .o-der { right: -11%; }
.cascos .mic { position: absolute; bottom: 14%; left: -8%; width: 46%; height: 7px; background: #1f2430; border-radius: 6px; transform: rotate(16deg); transform-origin: left center; }
.cascos .mic::after { content: ''; position: absolute; right: -6px; top: -3px; width: 13px; height: 13px; border-radius: 50%; background: #1f2430; }

/* ===================== Puesto (pupitre + teleoperador) ===================== */
.escena-puesto { position: relative; width: min(88vw, 760px); height: min(46vh, 360px); margin: 10px auto 0; }
.puesto { position: absolute; left: 50%; bottom: 14%; transform: translateX(-50%); width: 260px; height: 230px; }
/* La persona es un bloque; la cabeza va ANCLADA justo encima del torso (antes
   flotaba suelta). transform-origin abajo para desplomarse/estirarse. */
.puesto .persona-s { position: absolute; left: 50%; bottom: 70px; width: 120px; height: 150px; transform: translateX(-50%); transform-origin: bottom center; transition: transform .55s cubic-bezier(.2, .9, .3, 1.2); z-index: 5; }
.puesto .torso-s { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 76px; height: 80px; border-radius: 30px 30px 16px 16px; background: linear-gradient(#3f8cff, #2d62c8); z-index: 1; }
.puesto .cabeza { position: absolute; left: 50%; bottom: 58px; margin-left: 0; transform: translateX(-50%); width: 84px; height: 84px; overflow: visible; z-index: 3; }
.puesto .cabeza img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; border: 4px solid #fff; background: #0f1730; box-shadow: 0 6px 18px rgba(0, 0, 0, .5); }
.puesto .brazo-s { position: absolute; bottom: 4px; width: 16px; height: 56px; border-radius: 10px; background: #2d62c8; transform-origin: top center; z-index: 2; }
.puesto .brazo-s.izq { left: 14px; transform: rotate(14deg); }
.puesto .brazo-s.der { right: 14px; transform: rotate(-14deg); }
/* mesa por delante: tapa el cuerpo de cintura para abajo (parece sentado) */
.puesto .mesa { position: absolute; left: -16px; right: -16px; bottom: 44px; height: 52px; border-radius: 8px; background: linear-gradient(#243152, #1a2440); border: 1px solid #34406a; z-index: 6; box-shadow: 0 12px 26px rgba(0, 0, 0, .45); }
.puesto-nombre { position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-weight: 800; font-size: clamp(14px, 1.6vw, 22px); z-index: 7; }
.puesto .zzz, .puesto .chispas-est { position: absolute; opacity: 0; z-index: 11; }
.puesto .zzz { bottom: 60%; left: 60%; font-size: clamp(34px, 4.4vw, 58px); }
.puesto .chispas-est { bottom: 64%; left: 50%; transform: translateX(-50%); font-size: clamp(34px, 4.4vw, 58px); }

/* DORMIRSE: se desploma hacia delante y la cabeza queda SOBRE la mesa */
.puesto.est-duerme.go .persona-s { transform: translateX(-50%) translateY(14px); }
.puesto.est-duerme.go .cabeza { transform: translate(calc(-50% - 12px), 46px) rotate(14deg); transform-origin: center bottom; z-index: 7; }
.puesto.est-duerme.go .brazo-s.izq { transform: rotate(60deg); transition: transform .5s ease; }
.puesto.est-duerme.go .brazo-s.der { transform: rotate(-60deg); transition: transform .5s ease; }
.puesto.est-duerme.go .zzz { opacity: 1; animation: flota 1.8s ease-in-out infinite; }
/* ESTIRARSE: se levanta y estira los brazos hacia arriba */
.puesto.est-estira.go .persona-s { transform: translateX(-50%) translateY(-30px); }
.puesto.est-estira.go .brazo-s.izq { transform: rotate(168deg); transition: transform .55s ease; }
.puesto.est-estira.go .brazo-s.der { transform: rotate(-168deg); transition: transform .55s ease; }
.puesto.est-estira.go .chispas-est { opacity: 1; animation: pulso 1.2s ease-in-out infinite; }

/* ===================== Escena del DEDO al compañero de abajo ===================== */
.escena-dedo { position: relative; display: flex; align-items: center; justify-content: center; gap: clamp(8px, 4vw, 60px); margin: 10px auto 0; }
.desperto-dedo .anim-foto { width: clamp(120px, 17vw, 220px); }
.anim-foto.chulo { border-color: var(--oro); box-shadow: 0 0 50px rgba(255, 211, 77, .6); animation: chuleo 1.4s ease-in-out infinite; }
@keyframes chuleo { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg) translateY(-6px); } }
.anim-foto.enfadado { filter: saturate(1.3) contrast(1.05); border-color: var(--mal); animation: tiembla 0.25s linear infinite; }
@keyframes tiembla { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-3px, 2px); } 75% { transform: translate(3px, -2px); } }
.mano-dedo { font-size: clamp(50px, 8vw, 120px); transform: scale(0) rotate(-30deg); transition: transform .4s cubic-bezier(.2, 1.6, .4, 1); }
.mano-dedo.go { transform: scale(1) rotate(0); animation: meneo .5s ease-in-out 2 .4s; }
@keyframes meneo { 0%, 100% { transform: scale(1) rotate(-8deg); } 50% { transform: scale(1.1) rotate(8deg); } }

/* ===================== Variante SALTO (homenaje plataformas) ===================== */
/* Disfraces (originales): gorra del héroe y caparazón del enemigo. Ocultos por defecto. */
.corredor .gorra, .corredor .caparazon { position: absolute; opacity: 0; pointer-events: none; }
.corredor .gorra { left: 50%; bottom: 196px; width: 74px; height: 30px; margin-left: -37px; z-index: 5; border-radius: 42px 42px 6px 6px; background: linear-gradient(#ef4434, #b71c1c); }
.corredor .gorra .visera { position: absolute; bottom: -7px; left: 6px; width: 62px; height: 12px; border-radius: 0 0 12px 12px; background: #b71c1c; }
.corredor .caparazon { left: 50%; bottom: 64px; width: 66px; height: 58px; margin-left: -33px; z-index: 5; border-radius: 50% 50% 45% 45%; background: radial-gradient(circle at 38% 30%, #5cc463, #2e7d32); box-shadow: inset -6px -8px 10px rgba(0, 0, 0, .3); }
.corredor .caparazon i { position: absolute; inset: 20%; border-radius: 50%; background: #e8f5e9; opacity: .85; }

.escena-duelo.var-salto .corredor.gana .gorra { opacity: 1; }
.escena-duelo.var-salto .corredor.pierde { transform: scale(.72); transform-origin: bottom center; }
.escena-duelo.var-salto .corredor.pierde .caparazon { opacity: 1; }
.escena-duelo.var-salto .corredor.gana { transition: left .9s ease, transform .35s ease; }
.escena-duelo.var-salto.arranca .corredor.gana { left: 30%; }
.escena-duelo.var-salto.salta .corredor.gana { left: 44%; transform: translateY(-88px); }   /* SALTA */
.escena-duelo.var-salto.salta .corredor.gana .pierna { animation-play-state: paused; }
.escena-duelo.var-salto.impacto .corredor.gana { left: 47%; transform: translateY(0); transition: transform .22s ease-in, left .2s ease; } /* CAE encima */
.escena-duelo.var-salto.impacto .corredor.gana .figura { animation: none; }
.escena-duelo.var-salto.impacto .corredor.pierde { transform: scale(.72) scaleY(.26); }      /* APLASTADO */
.escena-duelo.var-salto.impacto .corredor.pierde .figura,
.escena-duelo.var-salto.impacto .corredor.pierde .brazo,
.escena-duelo.var-salto.impacto .corredor.pierde .pierna { animation-play-state: paused; }

/* ===================== Variante CRIATURA (homenaje monstruos) ===================== */
.escena-duelo .capsula, .escena-duelo .bestia, .escena-duelo .llamarada, .escena-duelo .rayo-elec { position: absolute; opacity: 0; pointer-events: none; }
/* Sprites OPCIONALES: si dejas public/img/bestia.png y public/img/capsula.png se
   usan en vez del dibujo CSS (tú pones las imágenes con tus derechos). */
.escena-duelo .bestia .sprite, .escena-duelo .capsula .sprite { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 4; pointer-events: none; }
.escena-duelo .bestia.con-sprite .b-cuerpo, .escena-duelo .bestia.con-sprite .b-panza, .escena-duelo .bestia.con-sprite .b-ojo, .escena-duelo .bestia.con-sprite .b-cola { display: none; }
.escena-duelo .capsula.con-sprite { background: none; box-shadow: none; }
.escena-duelo .capsula.con-sprite .tapa, .escena-duelo .capsula.con-sprite .boton { display: none; }
/* Cápsula ENERGÉTICA genérica (no la bola roja/blanca) */
.escena-duelo .capsula { left: 16%; bottom: 30%; width: 30px; height: 30px; z-index: 9; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #7c4dff 55%, #3f1d9e); box-shadow: 0 0 14px #7c4dff; }
.escena-duelo .capsula .tapa { position: absolute; left: 4%; right: 4%; top: 46%; height: 3px; background: rgba(255, 255, 255, .8); border-radius: 2px; }
.escena-duelo .capsula .boton { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px #fff; }
.escena-duelo .corredor.gana, .escena-duelo .corredor.pierde { /* no-op para especificidad */ }
/* --- COMÚN a las 3 variantes con bestia (criatura/velocidad/rayo) --- */
.escena-duelo.escena-bestia .corredor.gana { left: 9%; transition: none; }
.escena-duelo.escena-bestia .corredor.pierde { left: 64%; }
.escena-duelo.escena-bestia .corredor.gana .figura, .escena-duelo.escena-bestia .corredor.gana .pierna,
.escena-duelo.escena-bestia .corredor.gana .brazo { animation: none; } /* el entrenador está quieto */
.escena-duelo.escena-bestia.lanza .corredor.gana .brazo.der { animation: none; transform: rotate(120deg); } /* gesto de lanzar */
.escena-duelo.escena-bestia.lanza .capsula { opacity: 1; animation: lanzaCaps .8s ease-out forwards; }
@keyframes lanzaCaps { 0% { left: 16%; bottom: 30%; transform: scale(.6) rotate(0); } 100% { left: 40%; bottom: 18%; transform: scale(1) rotate(720deg); } }
/* al abrir: la cápsula se QUEDA vibrando/brillando mientras suena (no desaparece) */
.escena-duelo.escena-bestia.abre .capsula { left: 40%; bottom: 18%; opacity: 1; animation: capsLatido .45s ease-in-out infinite; }
@keyframes capsLatido { 0%, 100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.18); filter: brightness(1.9); } }
/* cuando APARECE la bestia: la cápsula estalla y desaparece (sincronizado) */
.escena-duelo.escena-bestia.aparece .capsula { animation: abreCaps .4s ease forwards; }
@keyframes abreCaps { 0% { transform: scale(1.1); filter: brightness(1.9); } 55% { transform: scale(1.9); filter: brightness(4.5); } 100% { transform: scale(2.4); opacity: 0; } }
/* Bestia ORIGINAL de relleno (si no hay sprite). Sprite -> con-sprite la tapa. */
.escena-duelo .bestia { left: 40%; bottom: 16%; width: 120px; height: 138px; z-index: 8; transform-origin: bottom center; }
.escena-duelo.escena-bestia.aparece .bestia { opacity: 1; animation: apareceBestia .4s cubic-bezier(.2, 1.5, .4, 1) both; }
@keyframes apareceBestia { 0% { transform: translateX(-50%) scale(0); } 100% { transform: translateX(-50%) scale(1); } }
.bestia .b-cuerpo { position: absolute; left: 50%; bottom: 0; margin-left: -27px; width: 54px; height: 66px; border-radius: 50% 50% 46% 46%; background: linear-gradient(#ffa64d, #f0712a); }
.bestia .b-panza { position: absolute; left: 50%; bottom: 6px; margin-left: -17px; width: 34px; height: 42px; border-radius: 50%; background: #ffe2b0; }
.bestia .b-ojo { position: absolute; top: 16px; width: 8px; height: 10px; border-radius: 50%; background: #222; z-index: 2; }
.bestia .o1 { left: 22px; } .bestia .o2 { right: 22px; }
.bestia .b-cola { position: absolute; right: -12px; bottom: 22px; width: 28px; height: 12px; border-radius: 8px; background: #f0712a; transform: rotate(-28deg); }
.bestia .b-fuego { position: absolute; right: -8px; top: -14px; width: 16px; height: 22px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(circle at 50% 70%, #ffe07a, #ff6b00 70%); animation: late .5s infinite; }
/* Lanzallamas: chorro horizontal de fuego de la boca hacia el de delante */
.escena-duelo .llamarada { left: 47%; bottom: 22%; width: 16%; height: 46px; z-index: 9; }
.escena-duelo.var-criatura.impacto .llamarada { opacity: 1; }
.escena-duelo .llamarada i { position: absolute; top: 50%; left: 0; height: 0; width: 0; transform: translateY(-50%);
  border-style: solid; border-color: transparent; border-left-width: 0; border-right-width: 90px; border-top-width: 22px; border-bottom-width: 22px; filter: blur(1px); }
.escena-duelo.var-criatura.impacto .llamarada i:nth-child(1) { border-right-color: #ff3d00; border-right-width: 100px; border-top-width: 26px; border-bottom-width: 26px; animation: fuegoFlick .12s infinite alternate; }
.escena-duelo.var-criatura.impacto .llamarada i:nth-child(2) { border-right-color: #ff9100; animation: fuegoFlick .1s infinite alternate; }
.escena-duelo.var-criatura.impacto .llamarada i:nth-child(3) { border-right-color: #ffea00; border-right-width: 64px; border-top-width: 14px; border-bottom-width: 14px; animation: fuegoFlick .08s infinite alternate; }
@keyframes fuegoFlick { from { transform: translateY(-50%) scaleX(.92); } to { transform: translateY(-50%) scaleX(1.06); } }
/* El de delante se achicharra y tiembla; la bestia y el ganador celebran */
.escena-duelo.var-criatura.quemado .corredor.pierde { filter: brightness(.35) saturate(.4) sepia(.6); animation: tiembla .12s infinite; }
.escena-duelo.var-criatura.quemado .corredor.pierde .figura, .escena-duelo.var-criatura.quemado .corredor.pierde .brazo, .escena-duelo.var-criatura.quemado .corredor.pierde .pierna { animation-play-state: paused; }
.escena-duelo.var-criatura.quemado .bestia { animation: saltoVict .4s ease 0s 3; }
.escena-duelo.var-criatura.quemado .corredor.gana { animation: saltoVict .4s ease .1s 2; }

/* --- VELOCIDAD: criatura grande (tipo dragón) que embiste -> KO --- */
.escena-duelo.var-velocidad .bestia { width: 240px; height: 260px; bottom: 14%; }
.escena-duelo.var-velocidad.impacto .bestia { animation: embestir .6s linear infinite; } /* embiste en bucle durante el ataque */
.escena-duelo.var-velocidad.quemado .bestia { animation: saltoVict .4s ease 0s 3; }       /* al acabar, celebra (corta la embestida) */
@keyframes embestir {
  0%, 100% { transform: translateX(-50%); }
  8% { transform: translateX(170%); } 17% { transform: translateX(-50%); }
  30% { transform: translateX(170%); } 39% { transform: translateX(-50%); }
  52% { transform: translateX(170%); } 61% { transform: translateX(-50%); }
  74% { transform: translateX(170%); } 83% { transform: translateX(-50%); }
}
.escena-duelo.var-velocidad.impacto .corredor.pierde { animation: sacude .12s 8; }
@keyframes sacude { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-9px) rotate(-3deg); } 75% { transform: translateX(9px) rotate(3deg); } }
.escena-duelo.var-velocidad.quemado .corredor.pierde { transform: translateY(58px) rotate(86deg); transition: transform .5s cubic-bezier(.3, .6, .5, 1.1); }
.escena-duelo.var-velocidad.quemado .corredor.pierde .figura, .escena-duelo.var-velocidad.quemado .corredor.pierde .brazo, .escena-duelo.var-velocidad.quemado .corredor.pierde .pierna { animation-play-state: paused; }
.escena-duelo.var-velocidad.quemado .corredor.pierde .estrellas { opacity: 1; }
.escena-duelo.var-velocidad.quemado .bestia { animation: saltoVict .4s ease 0s 3; }
.escena-duelo.var-velocidad.quemado .corredor.gana { animation: saltoVict .4s ease .1s 2; }

/* --- RAYO: descarga eléctrica -> el rival queda paralizado --- */
.escena-duelo .rayo-elec { left: 46%; bottom: 20%; width: 22%; height: 64px; z-index: 9; }
.escena-duelo.var-rayo.impacto .rayo-elec { opacity: 1; }
.escena-duelo .rayo-elec i { position: absolute; inset: 0; background: #fff200; filter: drop-shadow(0 0 7px #fff200);
  clip-path: polygon(0 45%, 30% 35%, 22% 50%, 55% 38%, 45% 56%, 80% 44%, 70% 60%, 100% 50%, 70% 70%, 80% 62%, 45% 76%, 55% 60%, 22% 72%, 30% 58%, 0 68%); }
.escena-duelo.var-rayo.impacto .rayo-elec i:nth-child(1) { animation: zapazo .08s steps(2) infinite; }
.escena-duelo.var-rayo.impacto .rayo-elec i:nth-child(2) { background: #fff; transform: scaleX(.8); animation: zapazo .06s steps(2) infinite .03s; }
@keyframes zapazo { 0% { opacity: 1; transform: scaleY(1); } 100% { opacity: .45; transform: scaleY(.82); } }
.escena-duelo.var-rayo.impacto .corredor.pierde { animation: electroc .07s infinite; filter: brightness(2.3) contrast(1.6) drop-shadow(0 0 7px #fff200); }
@keyframes electroc { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-6px, 4px); } 75% { transform: translate(6px, -4px); } }
.escena-duelo.var-rayo.quemado .rayo-elec { opacity: 0; } /* se corta la descarga */
.escena-duelo.var-rayo.quemado .corredor.pierde { filter: brightness(1.1) sepia(.35) hue-rotate(15deg); animation: paralisis .25s infinite; }
@keyframes paralisis { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
.escena-duelo.var-rayo.quemado .corredor.pierde .figura, .escena-duelo.var-rayo.quemado .corredor.pierde .brazo, .escena-duelo.var-rayo.quemado .corredor.pierde .pierna { animation-play-state: paused; }
.escena-duelo.var-rayo.quemado .corredor.pierde .estrellas { opacity: 1; }
.escena-duelo.var-rayo.quemado .bestia { animation: saltoVict .4s ease 0s 3; }
.escena-duelo.var-rayo.quemado .corredor.gana { animation: saltoVict .4s ease .1s 2; }

/* === Elementos extra de las variantes moto / espada / among us (ocultos por defecto) === */
.figura .moto, .figura .espadon, .figura .traje-crew, .figura .interrogacion, .figura .tajo { opacity: 0; }
.escena-duelo .espacio { position: absolute; inset: 0; opacity: 0; pointer-events: none; z-index: 0; }
.escena-duelo .espacio i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; box-shadow: 0 0 5px #fff; animation: titila 2.4s ease-in-out infinite; }
.escena-duelo .espacio i:nth-child(1){left:7%;top:16%;animation-delay:0s} .escena-duelo .espacio i:nth-child(2){left:22%;top:38%;animation-delay:.3s}
.escena-duelo .espacio i:nth-child(3){left:38%;top:12%;animation-delay:.6s} .escena-duelo .espacio i:nth-child(4){left:54%;top:30%;animation-delay:.9s}
.escena-duelo .espacio i:nth-child(5){left:70%;top:14%;animation-delay:1.2s} .escena-duelo .espacio i:nth-child(6){left:86%;top:34%;animation-delay:1.5s}
.escena-duelo .espacio i:nth-child(7){left:14%;top:66%;animation-delay:.45s} .escena-duelo .espacio i:nth-child(8){left:44%;top:74%;animation-delay:.75s}
.escena-duelo .espacio i:nth-child(9){left:66%;top:62%;animation-delay:1.05s} .escena-duelo .espacio i:nth-child(10){left:90%;top:70%;animation-delay:1.35s}
@keyframes titila { 0%,100%{opacity:.25;transform:scale(.7)} 50%{opacity:1;transform:scale(1.15)} }
@keyframes meneoSorpresa { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }

/* === MOTO: el ganador adelanta en moto; el otro flipa === */
.figura .moto { position: absolute; left: 50%; bottom: -4px; width: 152px; height: 70px; margin-left: -88px; z-index: 2; }
.figura .moto i { position: absolute; }
.figura .moto .rueda { width: 44px; height: 44px; bottom: 0; border-radius: 50%; background: radial-gradient(circle at 50% 50%, #4a4a4a 36%, #111 38%, #111 70%, #2a2a2a 72%); border: 4px solid #0a0a0a; box-shadow: inset 0 0 0 3px #7b7b7b; }
.figura .moto .rueda::after { content: ''; position: absolute; left: 50%; top: 6px; width: 3px; height: calc(50% - 6px); margin-left: -1.5px; background: #9a9a9a; transform-origin: bottom center; }
.figura .moto .rueda.r1 { left: 0; } .figura .moto .rueda.r2 { right: 0; }
.figura .moto .cuadro { left: 30px; bottom: 22px; width: 92px; height: 18px; border-radius: 10px; background: linear-gradient(#e83b3b, #9c1414); transform: skewX(-12deg); box-shadow: inset 0 -3px 4px rgba(0,0,0,.35); }
.figura .moto .deposito { left: 50px; bottom: 33px; width: 46px; height: 22px; border-radius: 12px 16px 6px 6px; background: linear-gradient(#ff5a5a, #c01d1d); box-shadow: inset 4px 3px 6px rgba(255,255,255,.25); }
.figura .moto .manillar { right: 16px; bottom: 40px; width: 28px; height: 6px; border-radius: 4px; background: #1c1c1c; transform: rotate(-24deg); }
.figura .moto .tubo { left: 4px; bottom: 12px; width: 44px; height: 9px; border-radius: 6px; background: linear-gradient(#d4d4d4, #888); }
.escena-duelo.var-moto .corredor.gana { left: 4%; transition: left 2.1s cubic-bezier(.3,0,.25,1); z-index: 7; }
.escena-duelo.var-moto.arranca .corredor.gana { left: 74%; }
.escena-duelo.var-moto .corredor.gana .moto { opacity: 1; }
.escena-duelo.var-moto.arranca .corredor.gana .moto .rueda::after { animation: ruedaGira .22s linear infinite; }
.escena-duelo.var-moto .corredor.gana .pierna { opacity: 0; }
.escena-duelo.var-moto .corredor.gana .figura { animation: none; transform: rotate(-8deg); transform-origin: bottom center; }
.escena-duelo.var-moto .corredor.gana .brazo { animation: none; }
.escena-duelo.var-moto .corredor.gana .brazo.der { transform: rotate(46deg); }
.escena-duelo.var-moto.quemado .corredor.gana .figura { transform: rotate(-15deg); }
.escena-duelo.var-moto .corredor.pierde { left: 50%; }
.escena-duelo.var-moto .corredor.pierde .figura, .escena-duelo.var-moto .corredor.pierde .brazo, .escena-duelo.var-moto .corredor.pierde .pierna { animation: none; }
.escena-duelo.var-moto.sorprende .corredor.pierde .figura { animation: meneoSorpresa .12s infinite; }
.escena-duelo.var-moto.sorprende .corredor.pierde .interrogacion { opacity: 1; animation: late 1s infinite; }
.figura .interrogacion { position: absolute; left: 50%; bottom: 204px; margin-left: -20px; font-size: 38px; z-index: 12; }
@keyframes ruedaGira { to { transform: rotate(360deg); } }

/* === ESPADA (homenaje RPG): tajo, caída y giros de victoria === */
.figura .espadon { position: absolute; left: 58%; bottom: 58px; width: 26px; height: 150px; z-index: 7; transform-origin: 50% 92%; transform: rotate(34deg); }
.figura .espadon .hoja { position: absolute; left: 50%; margin-left: -11px; top: 0; width: 22px; height: 116px; border-radius: 5px 5px 2px 2px; background: linear-gradient(90deg, #aab4c4 0%, #fff 45%, #aab4c4 56%, #6b7585 100%); clip-path: polygon(22% 0, 78% 0, 100% 7%, 100% 100%, 0 100%, 0 7%); box-shadow: 0 0 10px rgba(180,220,255,.45); }
.figura .espadon .guarda { position: absolute; left: 50%; margin-left: -19px; top: 114px; width: 38px; height: 9px; border-radius: 3px; background: linear-gradient(#dcb74e, #9c7a1e); }
.figura .espadon .mango { position: absolute; left: 50%; margin-left: -4px; top: 122px; width: 8px; height: 28px; border-radius: 0 0 4px 4px; background: linear-gradient(#5a3b1a, #2e1d0c); }
.figura .tajo { position: absolute; left: 66%; bottom: 64px; width: 130px; height: 130px; border: 8px solid #fff; border-radius: 50%; clip-path: polygon(50% 50%, 100% 2%, 100% 98%); filter: drop-shadow(0 0 9px #bfe3ff); z-index: 9; }
.escena-duelo.var-espada .corredor.gana { left: 6%; transition: left .55s cubic-bezier(.4,0,.3,1); z-index: 7; }
.escena-duelo.var-espada.arranca .corredor.gana { left: 32%; }
.escena-duelo.var-espada .corredor.pierde { left: 52%; }
.escena-duelo.var-espada .corredor.gana .figura, .escena-duelo.var-espada .corredor.gana .pierna, .escena-duelo.var-espada .corredor.gana .brazo { animation: none; }
.escena-duelo.var-espada .corredor.pierde .figura, .escena-duelo.var-espada .corredor.pierde .pierna, .escena-duelo.var-espada .corredor.pierde .brazo { animation: none; }
.escena-duelo.var-espada .corredor.gana .espadon { opacity: 1; }
.escena-duelo.var-espada .corredor.gana .brazo.der { opacity: 0; }
.escena-duelo.var-espada.entra .corredor.gana .figura { animation: apareceHeroe .45s ease both; }
@keyframes apareceHeroe { 0% { opacity: 0; transform: translateY(-34px) scale(.82); } 100% { opacity: 1; transform: none; } }
.escena-duelo.var-espada.tajo .corredor.gana .espadon { animation: tajazo .32s ease-out forwards; }
@keyframes tajazo { 0% { transform: rotate(-78deg); } 100% { transform: rotate(82deg); } }
.escena-duelo.var-espada.tajo .corredor.gana .tajo { opacity: 1; animation: brilloTajo .42s ease-out forwards; }
@keyframes brilloTajo { 0% { opacity: 0; transform: rotate(-42deg) scale(.55); } 30% { opacity: 1; } 100% { opacity: 0; transform: rotate(22deg) scale(1.25); } }
.escena-duelo.var-espada.cae .corredor.pierde { transform: translateX(46px) translateY(64px) rotate(90deg); opacity: .85; transition: transform .5s cubic-bezier(.3,.6,.5,1.05); z-index: 2; }
.escena-duelo.var-espada.cae .corredor.pierde .estrellas { opacity: 1; }
.escena-duelo.var-espada.victoria .corredor.gana { animation: saltoVict .5s ease 0s 2; }
.escena-duelo.var-espada.victoria .corredor.gana .espadon { animation: giraEspada .5s linear 3; }
@keyframes giraEspada { to { transform: rotate(394deg); } }

/* === AMONG US (homenaje): tripulantes; se expulsa al impostor al espacio === */
.escena-duelo.var-amongus { background: radial-gradient(circle at 50% 28%, #1a2348, #060912 78%); border-radius: 14px; overflow: hidden; }
.escena-duelo.var-amongus .suelo-linea, .escena-duelo.var-amongus .arbusto { opacity: 0 !important; }
.escena-duelo.var-amongus .espacio { opacity: 1; }
.escena-duelo.var-amongus .corredor.gana { left: 24%; transition: none; }
.escena-duelo.var-amongus .corredor.pierde { left: 56%; }
.escena-duelo.var-amongus .corredor .pierna, .escena-duelo.var-amongus .corredor .brazo, .escena-duelo.var-amongus .corredor .torso { opacity: 0; }
.escena-duelo.var-amongus .corredor .traje-crew { opacity: 1; }
.escena-duelo.var-amongus .corredor .figura { animation: flotaCrew 2.4s ease-in-out infinite; }
@keyframes flotaCrew { 50% { transform: translateY(-10px); } }
.figura .traje-crew { position: absolute; left: 50%; bottom: 66px; width: 86px; height: 98px; margin-left: -43px; z-index: 1; }
.figura .traje-crew .cuerpo { position: absolute; inset: 0; border-radius: 42px 42px 36px 36px / 52px 52px 38px 38px; background: linear-gradient(#ff4d4d, #c01818); box-shadow: inset -11px -8px 16px rgba(0,0,0,.35), inset 9px 7px 12px rgba(255,255,255,.20); }
.figura .traje-crew .mochila { position: absolute; right: -15px; top: 28px; width: 22px; height: 48px; border-radius: 10px; background: linear-gradient(#e03b3b, #9c1414); }
.figura .traje-crew .patita { position: absolute; bottom: -10px; width: 30px; height: 18px; border-radius: 8px 8px 14px 14px; background: linear-gradient(#d83434, #9c1414); }
.figura .traje-crew .patita.pa { left: 9px; } .figura .traje-crew .patita.pb { right: 9px; }
.figura .traje-crew .visor { display: none; }
.escena-duelo.var-amongus .corredor.pierde .traje-crew .cuerpo { background: linear-gradient(#4d8bff, #1846c0); }
.escena-duelo.var-amongus .corredor.pierde .traje-crew .mochila { background: linear-gradient(#3f78e0, #1240ad); }
.escena-duelo.var-amongus .corredor.pierde .traje-crew .patita { background: linear-gradient(#3f78e0, #1240ad); }
.escena-duelo.var-amongus.vota { animation: alarmaRoja .5s ease-in-out 2; }
@keyframes alarmaRoja { 0%,100% { box-shadow: inset 0 0 0 0 rgba(255,0,0,0); } 50% { box-shadow: inset 0 0 90px 12px rgba(255,40,40,.5); } }
.escena-duelo.var-amongus.eyecta .corredor.pierde { animation: eyectado 1.25s ease-in forwards; z-index: 2; }
@keyframes eyectado { 0% { transform: translate(0,0) rotate(0) scale(1); opacity: 1; } 100% { transform: translate(170px,-250px) rotate(430deg) scale(.18); opacity: 0; } }
.escena-duelo.var-amongus.quemado .corredor.gana { animation: saltoVict .5s ease 0s 2; }

@media (max-width: 720px) {
  .marcadores { grid-template-columns: 1fr 1fr; }
  .marcador.grande { grid-column: 1/-1; }
  .fa-info .fa-barra { display: none; }
}