/* Cuenca Vibra · La invasión — línea gráfica de sus reels: arcade retro, lima/teal/morado, letra pixel y Bangers. */
:root {
  --lima: #8DC63F; --teal: #2A93A9; --morado: #2B2766; --noche: #160E25; --amarillo: #F7D23E; --rojo: #D7392E; --azul: #2F6FD1;
  --naranja: #E8752A; --rosa: #F3B6D8; --blanco: #FFFFFF; --gris: #BDBDBD;
  --pix: "Jersey 10", ui-monospace, monospace; --bang: "Bangers", Impact, sans-serif; --txt: "Montserrat", system-ui, sans-serif;
  --gutter: clamp(16px, 4vw, 44px); --ease: cubic-bezier(.2, .7, .2, 1);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--noche); color: var(--blanco); font: 500 16px/1.5 var(--txt); overflow-x: hidden; }
img, video { display: block; max-width: 100%; }
h1, h2, h3, p, ul { margin: 0; } ul { padding: 0; list-style: none; }
a { color: inherit; } button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
section[id] { scroll-margin-top: 64px; }
.cont { max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }
.pix { font-family: var(--pix); letter-spacing: .06em; }
.kicker { font-size: clamp(18px, 2.2vw, 24px); color: var(--lima); }
.titulo { font: 400 clamp(46px, 8vw, 100px)/.9 var(--bang); letter-spacing: .02em; color: var(--amarillo); margin-top: 6px;
  -webkit-text-stroke: 2px var(--noche); text-shadow: 4px 4px 0 var(--rojo), 8px 8px 0 var(--noche); transform: rotate(-2deg); }
.sub { margin-top: 14px; font-weight: 700; color: rgba(255, 255, 255, .8); }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 26px; border-radius: 14px; border: 3px solid var(--noche);
  background: var(--lima); color: var(--noche); text-decoration: none; font: 400 22px/1 var(--bang); letter-spacing: .04em; box-shadow: 0 6px 0 var(--noche);
  transition: transform .12s, box-shadow .12s; }
.btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--noche); }
.btn-xl { min-height: 64px; font-size: 28px; padding: 0 34px; margin-top: 30px; }
.btn-nav { min-height: 40px; font-size: 18px; padding: 0 16px; }

/* ---------- nav ---------- */
.nav { position: fixed; z-index: 40; inset: 0 0 auto 0; display: flex; justify-content: space-between; align-items: center; padding: 10px var(--gutter);
  transition: background .3s; }
.nav.solida { background: rgba(22, 14, 37, .82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.nav { pointer-events: none; } .nav a { pointer-events: auto; } /* la barra no se come los toques de la ciudad: solo el logo y «Entradas» */
.marca img { width: clamp(96px, 11vw, 130px); height: auto; }

/* ---------- INTRO ---------- */
.intro { position: fixed; inset: 0; z-index: 100; background: var(--gris); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  color: var(--noche); text-align: center; padding: 0 var(--gutter); transition: opacity .5s, visibility 0s .5s; }
.intro.fuera { opacity: 0; visibility: hidden; pointer-events: none; }
.sin-intro .intro { display: none; }
.intro-chev { font: 400 40px/1 var(--pix); letter-spacing: .2em; animation: chev .5s steps(3) infinite; }
@keyframes chev { 50% { opacity: .3; } }
.intro-preg { position: relative; font: 400 clamp(34px, 7vw, 72px)/1 var(--pix); letter-spacing: .04em; }
.intro-preg::before, .intro-preg::after { content: attr(data-glitch); position: absolute; inset: 0; opacity: .75; }
.intro-preg::before { color: var(--rojo); animation: glitch 1.1s steps(2) infinite; }
.intro-preg::after { color: var(--teal); animation: glitch 1.1s steps(2) infinite reverse; }
@keyframes glitch { 0%, 70%, 100% { transform: none; clip-path: inset(0 0 0 0); } 72% { transform: translate(-4px, 1px); clip-path: inset(10% 0 55% 0); }
  80% { transform: translate(4px, -1px); clip-path: inset(55% 0 10% 0); } 88% { transform: translate(-2px, 0); clip-path: inset(30% 0 40% 0); } }
.intro-num { font: 400 clamp(120px, 30vw, 260px)/1 var(--pix); color: var(--morado); height: 1em; text-shadow: 6px 6px 0 var(--lima); }
.intro-num.pop { animation: pop .42s steps(4); }
@keyframes pop { from { transform: scale(1.6); opacity: 0; } to { transform: none; opacity: 1; } }
.intro-pixeles { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(10, 1fr); grid-auto-rows: 1fr; pointer-events: none; }
.intro-pixeles i { background: var(--morado); transform: scale(0); }
.intro-pixeles.on i { transform: scale(1.02); transition: transform .14s steps(2); transition-delay: var(--d); }
.intro-saltar { position: absolute; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); border: 0; background: none; font: 400 18px var(--pix); letter-spacing: .12em; color: var(--noche); cursor: pointer; }

/* ---------- 1 · CIUDAD ---------- */
.hero { position: relative; height: 100vh; height: 100svh; } /* una sola pantalla con la fiesta completa: al bajar se va (ya no hay recorrido) */
.escenario { position: relative; height: 100%; overflow: hidden; overflow: clip; background: radial-gradient(90vmax 70vmax at 50% 40%, #3a3485, var(--morado) 45%, var(--noche)); }
.rayos { position: absolute; inset: -50%; background: repeating-conic-gradient(from 0deg, rgba(141, 198, 63, .08) 0 8deg, transparent 8deg 22deg); animation: girar 60s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.ciudad-lienzo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ciudad { position: relative; width: 1246px; height: 1661px; }
.ciudad > * { position: absolute; }
.ciudad img { width: 100%; height: 100%; -webkit-user-drag: none; user-select: none; pointer-events: none; }
.m { padding: 0; border: 0; background: none; cursor: pointer; transform-origin: 50% 90%; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.m > img { animation: respira var(--dur, 3.2s) ease-in-out var(--del, 0s) infinite; transform-origin: 50% 90%; }
.m.recorte > img { animation: none; -webkit-mask: radial-gradient(ellipse 46% 48% at var(--mx, 50%) var(--my, 50%), #000 62%, transparent 100%);
  mask: radial-gradient(ellipse 46% 48% at var(--mx, 50%) var(--my, 50%), #000 62%, transparent 100%); }
.m.quieto > img { animation: none; }
@keyframes respira { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-1.6%) scale(1.012); } }
.m:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 2px; border-radius: 8px; }
/* acciones al tocar */
.m.a-gelatina { animation: gelatina .9s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes gelatina { 0% { transform: none; } 15% { transform: scale(1.18, .78); } 32% { transform: scale(.86, 1.16); } 50% { transform: scale(1.08, .93); } 70% { transform: scale(.97, 1.03); } 100% { transform: none; } }
.m.a-salta { animation: salta .8s cubic-bezier(.3, .7, .4, 1); }
@keyframes salta { 0% { transform: none; } 18% { transform: scale(1.12, .86); } 45% { transform: translateY(-38%) scale(.94, 1.08); } 72% { transform: translateY(0) scale(1.1, .9); } 86% { transform: scale(.97, 1.03); } 100% { transform: none; } }
.m.a-baila { animation: baila 1.1s ease-in-out; }
@keyframes baila { 0%, 100% { transform: none; } 15% { transform: rotate(-12deg) translateY(-6%); } 30% { transform: rotate(12deg); } 45% { transform: rotate(-12deg) translateY(-6%); } 60% { transform: rotate(12deg); } 80% { transform: rotate(-5deg) translateY(-3%); } }
.m.a-tiembla { animation: tiembla .7s linear; }
@keyframes tiembla { 0%, 100% { transform: none; } 10%, 30%, 50%, 70%, 90% { transform: translate(-4%, 1%) rotate(-3deg); } 20%, 40%, 60%, 80% { transform: translate(4%, -1%) rotate(3deg); } }
.m.a-gira { animation: gira 1s cubic-bezier(.5, 0, .3, 1); }
@keyframes gira { from { transform: perspective(600px) rotateY(0); } to { transform: perspective(600px) rotateY(720deg); } }
.m.a-pulso { animation: pulso .9s ease-out; }
@keyframes pulso { 0%, 100% { transform: none; } 15%, 45%, 75% { transform: scale(1.14); } 30%, 60%, 90% { transform: scale(.96); } }
.m.a-maneja { animation: maneja 1.6s cubic-bezier(.6, 0, .4, 1); }
@keyframes maneja { 0% { transform: none; } 45% { transform: translate(55%, 32%); opacity: 1; } 50% { transform: translate(60%, 35%); opacity: 0; } 51% { transform: translate(-60%, -35%); opacity: 0; } 56% { opacity: 1; } 100% { transform: none; } }
.m.a-abduce { animation: abduce 1.6s ease-in-out; filter: drop-shadow(0 0 14px #d9ff8a); }
@keyframes abduce { 0%, 100% { transform: none; } 40%, 60% { transform: translateY(-22%) scale(1.06); } }
.m.a-despega { animation: despega 1.5s cubic-bezier(.5, 0, .3, 1); }
@keyframes despega { 0% { transform: none; } 15% { transform: translateY(4%) scale(1.05, .92); } 55% { transform: translateY(-260%) scale(.8); opacity: 0; } 56% { transform: translateY(40%); opacity: 0; } 100% { transform: none; opacity: 1; } }
.m.a-vuela { animation: vuela 1.4s cubic-bezier(.5, 0, .3, 1); }
@keyframes vuela { 0% { transform: none; } 50% { transform: translate(-70%, 55%) rotate(-12deg); opacity: 0; } 51% { transform: translate(70%, -55%); opacity: 0; } 100% { transform: none; opacity: 1; } }
.m.a-saluda { animation: saluda 1s ease-in-out; transform-origin: 50% 100%; }
@keyframes saluda { 0%, 100% { transform: none; } 20%, 60% { transform: rotate(-10deg) translateY(-4%); } 40%, 80% { transform: rotate(10deg) translateY(-4%); } }
.m.a-dispara { animation: dispara .7s ease-out; }
@keyframes dispara { 0%, 100% { transform: none; } 12% { transform: translate(10%, -5%) rotate(8deg); } 30% { transform: translate(-4%, 2%); } }
.m.a-sacude { animation: sacude 1s ease-in-out; transform-origin: 50% 100%; }
@keyframes sacude { 0%, 100% { transform: none; } 15% { transform: rotate(-9deg); } 35% { transform: rotate(8deg) scale(1.04); } 55% { transform: rotate(-6deg); } 75% { transform: rotate(4deg); } }
.m.a-sorpresa { animation: sorpresa .7s cubic-bezier(.3, 1.5, .5, 1); filter: drop-shadow(0 0 16px #F7D23E); }
@keyframes sorpresa { 0%, 100% { transform: none; } 20% { transform: scale(.88, 1.12) translateY(4%); } 45% { transform: scale(1.22) rotate(-6deg); } 65% { transform: scale(1.12) rotate(5deg); } }
/* piezas grandes (Catedral, edificio de la alerta, pista): el mismo efecto pero proporcionado a su tamaño */
.m.quieto.a-tiembla { animation-name: tiemblaG; }
@keyframes tiemblaG { 0%, 100% { transform: none; } 10%, 30%, 50%, 70%, 90% { transform: translate(-1.2%, .4%) rotate(-.8deg); } 20%, 40%, 60%, 80% { transform: translate(1.2%, -.4%) rotate(.8deg); } }
.m.quieto.a-pulso { animation-name: pulsoG; }
@keyframes pulsoG { 0%, 100% { transform: none; } 15%, 45%, 75% { transform: scale(1.04); } 30%, 60%, 90% { transform: scale(.99); } }
/* estallido de pixeles donde se toca un muñeco */
.chispa { position: absolute; width: 7px; height: 7px; margin: -3px 0 0 -3px; pointer-events: none; animation: chispa .6s cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes chispa { from { transform: translate(0, 0) scale(1.3); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }
.disparo { position: absolute; border: 3px solid #9ff3ff; border-radius: 50%; pointer-events: none; box-shadow: 0 0 12px #9ff3ff; animation: onda .7s ease-out forwards; }
@keyframes onda { from { transform: scale(.2); opacity: 1; } to { transform: scale(2.6); opacity: 0; } }
/* globos de diálogo (fuera de la cámara para que el texto siempre se lea) */
.globos { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.globo { position: absolute; transform: translate(-50%, -100%); max-width: min(70vw, 260px); padding: 8px 14px 9px; border-radius: 16px; border: 3px solid var(--noche);
  background: var(--blanco); color: var(--noche); font: 400 clamp(18px, 2.4vw, 24px)/1.05 var(--bang); letter-spacing: .03em; text-align: center;
  box-shadow: 4px 4px 0 var(--noche); animation: globo 1.9s cubic-bezier(.3, 1.5, .5, 1) forwards; }
.globo::after { content: ""; position: absolute; left: 50%; bottom: -11px; width: 16px; height: 16px; background: var(--blanco); border-right: 3px solid var(--noche);
  border-bottom: 3px solid var(--noche); transform: translateX(-50%) rotate(45deg); }
@keyframes globo { 0% { opacity: 0; transform: translate(-50%, -80%) scale(.4); } 14% { opacity: 1; transform: translate(-50%, -100%) scale(1.06); } 22% { transform: translate(-50%, -100%) scale(1); }
  82% { opacity: 1; transform: translate(-50%, -108%); } 100% { opacity: 0; transform: translate(-50%, -125%) scale(.92); } }
/* rótulos de cada nivel del recorrido */
.rotulos { display: none; } /* los rótulos de nivel ya no se usan: la ciudad queda quieta y completa */
.rotulo { position: absolute; left: 0; right: 0; bottom: max(9svh, 64px); text-align: center; padding: 0 var(--gutter); opacity: var(--o, 0); transform: translateY(var(--y, 20px)); }
.rotulo span { display: inline-block; font-size: clamp(18px, 2.4vw, 24px); color: var(--noche); background: var(--lima); padding: 2px 10px 0; }
.rotulo b { display: block; margin-top: 8px; font: 400 clamp(40px, 7.5vw, 92px)/.9 var(--bang); letter-spacing: .02em; color: var(--amarillo); -webkit-text-stroke: 2px var(--noche);
  text-shadow: 4px 4px 0 var(--rojo), 7px 7px 0 var(--noche); transform: rotate(-2deg); }
.pista { position: absolute; left: 50%; bottom: max(4svh, 22px); transform: translateX(-50%); z-index: 3; padding: 6px 14px; border-radius: 999px; background: rgba(22, 14, 37, .75);
  font: 700 14px var(--txt); white-space: nowrap; opacity: var(--o, 1); transition: opacity .4s; }
.pista span { display: inline-block; animation: toque 1.2s ease-in-out infinite; }
@keyframes toque { 50% { transform: translateY(-4px) scale(.9); } }
.desliza { position: absolute; right: 14px; bottom: max(4svh, 22px); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 4px; font: 400 14px var(--pix); letter-spacing: .14em; opacity: var(--o, 1); }
.pista, .desliza { pointer-events: none; } /* son avisos: no se comen los toques de los muñecos */
.desliza i { width: 2px; height: 26px; background: linear-gradient(var(--lima), transparent); animation: gota 1.6s ease infinite; transform-origin: top; }
@keyframes gota { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); opacity: 1; } 100% { opacity: 0; } }

/* ---------- 2 · CUENTA REGRESIVA (máquina arcade) ---------- */
.cuenta { padding: clamp(70px, 11vh, 120px) var(--gutter); background: var(--morado); position: relative; overflow: hidden; }
.cuenta::before { content: ""; position: absolute; inset: -50%; background: repeating-conic-gradient(rgba(255, 255, 255, .05) 0 10deg, transparent 10deg 20deg); animation: girar 80s linear infinite; }
.arcade { position: relative; max-width: 560px; margin: 0 auto; background: var(--lima); border: 4px solid var(--noche); border-radius: 26px 26px 16px 16px; padding: 18px 18px 22px;
  box-shadow: 10px 10px 0 var(--noche), inset 0 -10px 0 rgba(0, 0, 0, .12); }
.arcade-marquesina { background: var(--rojo); border: 4px solid var(--noche); border-radius: 14px; padding: 10px 16px; }
.arcade-marquesina img { width: 100%; height: auto; }
.arcade-pantalla { margin-top: 14px; background: #0b0716; border: 4px solid var(--noche); border-radius: 14px; padding: 18px 12px 16px; text-align: center; color: var(--lima);
  box-shadow: inset 0 0 40px rgba(141, 198, 63, .25); background-image: repeating-linear-gradient(transparent 0 3px, rgba(255, 255, 255, .04) 3px 4px); }
.pantalla-tit { font-size: 26px; color: var(--amarillo); }
.reloj { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 8px; }
.reloj b { display: block; font: 400 clamp(46px, 11vw, 80px)/1 var(--pix); color: var(--lima); text-shadow: 0 0 14px rgba(141, 198, 63, .8); }
.reloj b.tic { animation: tic .3s steps(2); }
@keyframes tic { 50% { color: var(--amarillo); } }
.reloj span { font: 400 16px var(--pix); color: rgba(255, 255, 255, .7); letter-spacing: .1em; }
.pantalla-pie { margin-top: 12px; font-size: 18px; color: rgba(255, 255, 255, .85); }
.arcade-mandos { display: flex; justify-content: space-around; align-items: center; margin-top: 16px; background: var(--azul); border: 4px solid var(--noche); border-radius: 12px; padding: 12px 8px; }
.arcade-mandos i { display: block; border: 3px solid var(--noche); }
.palanca { width: 14px; height: 30px; background: var(--noche); border-radius: 6px; position: relative; }
.palanca::before { content: ""; position: absolute; left: 50%; top: -14px; width: 22px; height: 22px; transform: translateX(-50%); background: var(--rojo); border: 3px solid var(--noche); border-radius: 50%; }
.boton { width: 22px; height: 22px; border-radius: 50%; } .b1 { background: var(--amarillo); } .b2 { background: var(--rojo); } .b3 { background: var(--teal); }
.boton-alien { width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 38% 52%, var(--noche) 0 3px, transparent 4px), radial-gradient(circle at 62% 52%, var(--noche) 0 3px, transparent 4px), var(--lima); }

/* ---------- 3 · AMBIENTES ---------- */
.ambientes { padding: clamp(70px, 11vh, 120px) 0; background: var(--teal); }
.ambientes .kicker { color: var(--noche); }
.amb-grid { max-width: 1200px; margin: 30px auto 0; padding: 0 var(--gutter); display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.amb { --c: var(--lima); position: relative; min-height: 190px; border: 3px solid var(--noche); border-radius: 16px; background: var(--c); color: var(--noche); padding: 12px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; cursor: pointer; box-shadow: 5px 5px 0 var(--noche); -webkit-tap-highlight-color: transparent; }
.amb:nth-child(2) { --c: var(--amarillo); } .amb:nth-child(3) { --c: var(--rosa); } .amb:nth-child(4) { --c: #6ec6d6; } .amb:nth-child(5) { --c: var(--naranja); }
.amb:nth-child(6) { --c: #b6a7ff; } .amb:nth-child(7) { --c: #ff8fa3; } .amb:nth-child(8) { --c: #ffd08a; } .amb:nth-child(9) { --c: var(--lima); } .amb:nth-child(10) { --c: #f5f0ff; }
.amb img { position: absolute; right: -4%; top: 6%; width: 64%; height: 62%; object-fit: contain; transform-origin: 50% 90%; transition: transform .3s; pointer-events: none; }
.amb span { font-size: 18px; }
.amb b { position: relative; font: 400 clamp(22px, 2.2vw, 28px)/.95 var(--bang); letter-spacing: .03em; }
.amb.toc img { animation: salta .8s cubic-bezier(.3, .7, .4, 1); }
@media (max-width: 900px) { .amb-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- 4 · REELS ---------- */
.reels { padding: clamp(70px, 11vh, 120px) 0; background: var(--noche); }
.carril { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 28px var(--gutter) 14px; scrollbar-width: none; }
.carril::-webkit-scrollbar { display: none; }
.clip { position: relative; flex: 0 0 min(58vw, 230px); aspect-ratio: 9 / 16; scroll-snap-align: start; padding: 0; border: 3px solid var(--lima); border-radius: 18px; overflow: hidden; background: #000; cursor: pointer;
  box-shadow: 5px 5px 0 var(--morado); }
.clip img { width: 100%; height: 100%; object-fit: cover; }
.clip i { position: absolute; left: 50%; top: 45%; width: 58px; height: 58px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--lima); border: 3px solid var(--noche); }
.clip i::after { content: ""; position: absolute; left: 56%; top: 50%; transform: translate(-50%, -50%); border-left: 16px solid var(--noche); border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.clip span { position: absolute; left: 10px; right: 10px; bottom: 10px; font: 400 22px/1 var(--bang); letter-spacing: .03em; color: var(--amarillo); -webkit-text-stroke: 1px var(--noche); text-shadow: 2px 2px 0 var(--noche); text-align: left; }

/* ---------- 5 · ENTRADAS ---------- */
.entradas { padding: clamp(70px, 11vh, 120px) 0; background: var(--lima); color: var(--noche); text-align: center; }
.entradas .kicker { color: var(--morado); }
.entradas .titulo { color: var(--blanco); }
.datos { margin: 30px auto 0; max-width: 820px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.datos li { background: var(--blanco); border: 3px solid var(--noche); border-radius: 16px; padding: 14px 10px; box-shadow: 5px 5px 0 var(--noche); }
.datos span { display: block; font-size: 18px; color: var(--morado); }
.datos b { display: block; font: 400 clamp(24px, 3vw, 32px)/1 var(--bang); letter-spacing: .03em; }
.datos a { display: inline-block; margin-top: 6px; font-weight: 800; font-size: 13px; }
.nota { margin-top: 12px; font-size: 13px; opacity: .8; }
@media (max-width: 760px) { .datos { grid-template-columns: 1fr 1fr; } }
.auspicios { background: var(--blanco); color: var(--noche); padding: 26px var(--gutter); text-align: center; }
.auspicios p { font-size: 18px; margin-bottom: 10px; }
.auspicios img { margin: 0 auto; width: min(100%, 1100px); height: auto; }
.pie { padding: 40px var(--gutter) 60px; text-align: center; background: var(--noche); }
.pie img { width: 200px; height: auto; margin: 0 auto 14px; }
.pie a { font-weight: 800; color: var(--lima); }

/* apariciones */
.revela { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .8s var(--ease); }
.revela.visible { opacity: 1; transform: none; }
.titulo.revela.visible { transform: rotate(-2deg); }

/* visor */
.visor { position: fixed; inset: 0; z-index: 90; background: rgba(10, 6, 18, .94); display: grid; place-items: center; padding: 20px; }
.visor video { max-height: 90vh; max-width: min(92vw, 480px); border-radius: 18px; border: 3px solid var(--lima); }
.visor-cerrar { position: absolute; top: 14px; right: 16px; width: 46px; height: 46px; border-radius: 50%; border: 3px solid var(--noche); background: var(--amarillo); color: var(--noche); font-size: 26px; cursor: pointer; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .rayos, .cuenta::before { animation: none; } }
.sin-mov .hero { height: auto; } .sin-mov .escenario { position: relative; height: auto; min-height: 100svh; } .sin-mov .rotulos, .sin-mov .desliza { display: none; }
.sin-mov .revela { opacity: 1; transform: none; }

/* ---------- JUEGOS en la maquinita ---------- */
.juego-panel { position: relative; margin-top: 14px; border-top: 2px dashed rgba(141, 198, 63, .4); padding-top: 12px; }
.juego-puntos { font-size: 17px; color: var(--amarillo); min-height: 1.2em; }
.juego { display: block; width: 100%; max-width: 360px; margin: 8px auto 0; aspect-ratio: 260 / 220; height: auto; border: 2px solid var(--teal); border-radius: 8px; image-rendering: pixelated; touch-action: none; background: #0b0716; }
.juego-elige { display: flex; gap: 8px; justify-content: center; margin-top: 10px; flex-wrap: wrap; }
.juego-elige .btn, .juego-msg .btn { min-height: 42px; font-size: 19px; padding: 0 16px; }
.btn-teal { background: var(--teal); color: var(--blanco); }
.juego-msg { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); width: min(90%, 300px); background: rgba(11, 7, 22, .92); border: 3px solid var(--lima); border-radius: 12px; padding: 14px; display: grid; gap: 8px; justify-items: center; }
.juego-msg b { font-size: 34px; color: var(--amarillo); }
.juego-msg span { font: 600 13px var(--txt); color: var(--blanco); }
.arcade-mandos { justify-content: space-between; padding: 12px 16px; }
.cruceta { display: grid; grid-template-columns: repeat(3, 40px); grid-template-rows: repeat(3, 36px); gap: 2px; }
.cruceta button { border: 3px solid var(--noche); background: var(--noche); color: var(--lima); border-radius: 8px; font-size: 16px; cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent; }
.cruceta button:active { background: var(--lima); color: var(--noche); }
.cu { grid-column: 2; grid-row: 1; } .cl { grid-column: 1; grid-row: 2; } .cr { grid-column: 3; grid-row: 2; } .cd { grid-column: 2; grid-row: 3; }
button.boton-alien { width: 64px; height: 64px; cursor: pointer; touch-action: none; box-shadow: 0 5px 0 var(--noche); -webkit-tap-highlight-color: transparent;
  background: radial-gradient(circle at 36% 50%, var(--noche) 0 5px, transparent 6px), radial-gradient(circle at 64% 50%, var(--noche) 0 5px, transparent 6px), var(--lima); border: 3px solid var(--noche); border-radius: 50%; }
button.boton-alien:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--noche); }

/* ---------- PANTALLA GIGANTE con público ---------- */
.tele { padding: clamp(70px, 11vh, 120px) 0 0; background: radial-gradient(80vmax 60vmax at 50% 30%, #2d2470, var(--noche) 70%); overflow: hidden; }
.escena-tv { position: relative; max-width: 900px; margin: 26px auto 0; padding: 0 var(--gutter); }
.luces { position: absolute; inset: -40px 0 auto; height: 520px; pointer-events: none; }
.luces i { position: absolute; top: 0; width: 120px; height: 520px; transform-origin: 50% 0; background: linear-gradient(rgba(141, 198, 63, .35), transparent 80%); filter: blur(6px); animation: barrido 4s ease-in-out infinite alternate; }
.luces i:nth-child(1) { left: 6%; } .luces i:nth-child(2) { left: 30%; background: linear-gradient(rgba(42, 147, 169, .4), transparent 80%); animation-delay: -1s; }
.luces i:nth-child(3) { right: 30%; background: linear-gradient(rgba(243, 182, 216, .35), transparent 80%); animation-delay: -2s; } .luces i:nth-child(4) { right: 6%; animation-delay: -3s; }
@keyframes barrido { from { transform: rotate(-22deg); } to { transform: rotate(22deg); } }
.truss { position: relative; height: 18px; margin: 0 4%; background: repeating-linear-gradient(45deg, #555 0 3px, transparent 3px 14px), repeating-linear-gradient(-45deg, #555 0 3px, transparent 3px 14px); border-top: 3px solid #666; border-bottom: 3px solid #666; }
.pantallon { position: relative; margin: 0 auto; width: min(100%, 420px); }
.marco-tv { position: relative; aspect-ratio: 9 / 16; max-height: 72vh; margin: 0 auto; border: 10px solid #111; border-radius: 14px; background: #000; overflow: hidden;
  box-shadow: 0 0 0 3px #333, 0 0 60px rgba(141, 198, 63, .35), 0 0 140px rgba(42, 147, 169, .3); }
.marco-tv::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(transparent 0 2px, rgba(0, 0, 0, .18) 2px 3px); }
.marco-tv { background-size: cover; background-position: center; }
.marco-tv video { width: 100%; height: 100%; object-fit: cover; }
.nieve { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; transition: opacity .1s; }
.nieve.on { opacity: 1; }
.osd { position: absolute; left: 10px; top: 10px; z-index: 2; color: var(--lima); font-size: 20px; text-shadow: 2px 2px 0 #000; background: rgba(0, 0, 0, .35); padding: 0 6px; opacity: 0; transition: opacity .3s; }
.osd.on { opacity: 1; }
.sonido { position: absolute; right: 10px; bottom: 10px; z-index: 2; width: 46px; height: 46px; border-radius: 50%; border: 3px solid var(--noche); background: var(--amarillo); font-size: 20px; cursor: pointer; }
.publico { position: relative; z-index: 3; height: 110px; margin: -46px -10% 0; pointer-events: none;
  background:
    radial-gradient(circle at 6% 40%, #0a0614 0 22px, transparent 23px), radial-gradient(circle at 15% 55%, #0a0614 0 26px, transparent 27px), radial-gradient(circle at 25% 35%, #0a0614 0 21px, transparent 22px),
    radial-gradient(circle at 35% 50%, #0a0614 0 25px, transparent 26px), radial-gradient(circle at 46% 38%, #0a0614 0 23px, transparent 24px), radial-gradient(circle at 56% 52%, #0a0614 0 26px, transparent 27px),
    radial-gradient(circle at 66% 36%, #0a0614 0 22px, transparent 23px), radial-gradient(circle at 76% 50%, #0a0614 0 25px, transparent 26px), radial-gradient(circle at 86% 40%, #0a0614 0 22px, transparent 23px),
    radial-gradient(circle at 95% 55%, #0a0614 0 25px, transparent 26px), linear-gradient(transparent 55%, #0a0614 56%); }
.publico::before, .publico::after { content: ""; position: absolute; width: 14px; height: 60px; background: #0a0614; border-radius: 8px; bottom: 60px; transform-origin: 50% 100%; animation: brazo 1.2s ease-in-out infinite alternate; }
.publico::before { left: 21%; } .publico::after { left: 72%; animation-delay: -.6s; }
@keyframes brazo { from { transform: rotate(-18deg); } to { transform: rotate(14deg) translateY(-6px); } }
.control { position: relative; z-index: 4; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 0 auto; padding: 14px 12px 30px; background: #0a0614; }
.control button { border: 3px solid var(--noche); border-radius: 10px; cursor: pointer; font: 400 20px var(--pix); letter-spacing: .06em; box-shadow: 0 4px 0 #000; -webkit-tap-highlight-color: transparent; }
.control button:active { transform: translateY(3px); box-shadow: 0 1px 0 #000; }
.ch { background: var(--lima); color: var(--noche); padding: 8px 14px; }
.nums { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.num { width: 40px; height: 40px; background: #2a2440; color: var(--blanco); }
.num.on { background: var(--amarillo); color: var(--noche); }

/* ---------- AUSPICIANTES: la nave abduce la marca y su spot corre dentro del haz ---------- */
.auspicios { background: var(--noche); color: var(--blanco); padding: clamp(70px, 11vh, 120px) 0 60px; text-align: left; }
.abduccion { --cx: 50%; --arriba: 70px; --alto: 300px; --ancho: 360px; --c1: #8DC63F; --c2: #2A93A9; position: relative; max-width: 1200px; margin: 0 auto; padding: clamp(440px, 74vh, 640px) var(--gutter) 0; } /* escenario alto: el spot de la marca se ve grande */
/* los logos chiquitos en una barra inferior, como la tira de auspiciantes del afiche */
.marcas-grilla { position: relative; z-index: 3; display: flex; gap: 6px; padding: 10px 8px; background: var(--blanco); border: 3px solid var(--noche); border-radius: 14px; box-shadow: 0 0 0 3px var(--lima);
  overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.marcas-grilla::-webkit-scrollbar { display: none; }
.marca-logo { flex: 1 0 64px; min-width: 64px; height: 46px; border: 2px solid transparent; border-radius: 10px; background: var(--blanco); padding: 4px 6px; scroll-snap-align: start; cursor: pointer; display: grid; place-items: center;
  transition: transform .25s var(--ease), border-color .25s, box-shadow .25s; -webkit-tap-highlight-color: transparent; }
.marca-logo img { max-width: 100%; max-height: 34px; width: auto; height: auto; object-fit: contain; }
.marca-logo.on { transform: translateY(-4px) scale(1.08); border-color: var(--lima); box-shadow: 0 0 0 3px var(--noche), 0 0 28px rgba(141, 198, 63, .7); }
.marca-logo.on { animation: levita 1.6s ease-in-out infinite; }
@keyframes levita { 50% { transform: translateY(-4px) scale(1.06) rotate(-2deg); } } /* dentro de la tira: subir más lo recortaría */
@media (hover: hover) { .marca-logo:hover { transform: translateY(-4px) scale(1.08); border-color: var(--lima); box-shadow: 0 0 0 3px var(--noche), 0 0 28px rgba(141, 198, 63, .7); } } /* en el celular el hover se queda pegado */
/* nave */
.nave { position: absolute; z-index: 4; left: var(--cx); top: 0; width: 150px; height: 70px; margin-left: -75px; opacity: 0; transform: translateY(-160px) scale(.6) rotate(-12deg); pointer-events: none;
  transition: transform .55s cubic-bezier(.3, 1.4, .5, 1), opacity .3s, left .5s var(--ease), top .6s cubic-bezier(.3, 1.2, .5, 1); }
.abduccion.on .nave { opacity: 1; transform: none; animation: flota 2.4s ease-in-out .6s infinite; }
/* en reposo (ninguna marca tocada) la nave flota en medio del escenario, así no queda un hueco vacío; al tocar un logo vuela hacia él */
.abduccion:not(.on) .nave { opacity: 1; top: 30%; transform: none; animation: flota 2.4s ease-in-out infinite; }
.abduccion:not(.on) .nave::after { content: "ELIGE UNA MARCA ↓"; position: absolute; top: 86px; left: 50%; translate: -50% 0; white-space: nowrap; font: 22px var(--pix); letter-spacing: .06em; color: var(--lima); animation: parpadeo 1.2s steps(2) infinite; }
@keyframes flota { 50% { transform: translateY(-6px) rotate(2deg); } }
.nave .disco { position: absolute; left: 0; right: 0; bottom: 6px; height: 34px; border-radius: 50%; background: linear-gradient(#cfd3d6, #7d848a); border: 3px solid var(--noche); }
.nave .cupula { position: absolute; left: 40px; width: 70px; height: 46px; top: 0; border-radius: 50% 50% 20% 20%; background: radial-gradient(circle at 38% 35%, #fff 0 6px, transparent 7px), linear-gradient(#bff1ff, #4cc3e6); border: 3px solid var(--noche); }
.nave .luces-nave { position: absolute; left: 14px; right: 14px; bottom: 18px; height: 8px; background: radial-gradient(circle, var(--amarillo) 0 3px, transparent 4px) 0 0 / 20px 8px repeat-x; animation: parpadeo .5s steps(2) infinite; }
@keyframes parpadeo { 50% { filter: hue-rotate(120deg) brightness(1.4); } }
/* haz y spot: el mismo trapecio de luz */
.haz, .spot { position: absolute; z-index: 2; left: var(--cx); top: var(--arriba); width: var(--ancho); height: var(--alto); margin-left: calc(var(--ancho) / -2); transform-origin: 50% 0; transition: left .5s var(--ease); }
.haz { background: linear-gradient(color-mix(in srgb, var(--c1) 80%, #fff), color-mix(in srgb, var(--c2) 55%, transparent) 70%, transparent);
  opacity: 0; transform: scaleY(0); filter: blur(.5px); }
.haz::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(transparent 0 6px, rgba(255, 255, 255, .14) 6px 8px); animation: subeHaz 1s linear infinite; }
@keyframes subeHaz { to { background-position: 0 -16px; } }
.abduccion.luz .haz { opacity: .9; transform: none; transition: transform .45s cubic-bezier(.2, .9, .3, 1), opacity .2s, left .5s var(--ease); }
.spot { display: grid; place-items: center; padding: 26% 9% 5%; opacity: 0; pointer-events: none; text-align: center; color: var(--noche); }
.abduccion.luz .spot { opacity: 1; pointer-events: auto; transition: opacity .3s .25s; }
.esc { grid-area: 1 / 1; display: grid; justify-items: center; gap: 8px; opacity: 0; transform: translateY(14px) scale(.94); filter: blur(4px); transition: opacity .35s, transform .45s var(--ease), filter .35s; pointer-events: none; }
.esc.on { opacity: 1; transform: none; filter: none; pointer-events: auto; }
.esc-logo img { max-width: 70%; max-height: 90px; width: auto; filter: drop-shadow(0 4px 0 rgba(255, 255, 255, .6)); animation: entraLogo .7s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes entraLogo { from { transform: scale(.3) rotate(-14deg); } }
.esc .tag { font-size: 18px; background: var(--noche); color: var(--lima); padding: 2px 8px; max-width: 100%; }
.esc .grande { font: 400 clamp(22px, 3.2vw, 30px)/1.02 var(--bang); letter-spacing: .02em; color: var(--noche); text-shadow: 0 2px 0 rgba(255, 255, 255, .6); }
.esc-dato span, .esc-trago span { font-size: 16px; background: var(--amarillo); color: var(--noche); padding: 1px 8px; }
.esc-dato p { font: 800 15px/1.3 var(--txt); color: var(--noche); max-width: 22ch; }
.esc-fin .btn { min-height: 44px; font-size: 20px; }
.esc-fin .web { font: 800 13px var(--txt); color: var(--noche); }
.esc-fin .legal { font: 600 10.5px var(--txt); color: var(--noche); opacity: .8; }
@media (max-width: 600px) { .abduccion { padding-top: clamp(400px, 70svh, 560px); } .marca-logo { flex-basis: 72px; height: 44px; } }

/* ---------- ZONAS: reproductor tipo historia con el contenido de cada ambiente ---------- */
.zona-visor { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 12px; background: rgba(10, 6, 18, .92); touch-action: none; overscroll-behavior: contain; }
.zona-visor.entra .zona-marco { animation: zonaEntra .45s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes zonaEntra { from { transform: scale(.7) rotate(-3deg); opacity: 0; } }
.zona-marco { position: relative; width: min(94vw, 440px); aspect-ratio: 9 / 16; max-height: 92vh; border-radius: 20px; overflow: hidden; background: #000; border: 3px solid var(--lima); box-shadow: 0 0 0 3px var(--noche), 0 0 60px rgba(141, 198, 63, .45); }
.zona-lienzo, .zona-lienzo video, .zona-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.zona-foto.kb { animation: zonaKb 4.4s ease-in-out forwards; }
@keyframes zonaKb { from { transform: scale(1.02); } to { transform: scale(1.12) translate(-1.5%, -2%); } }
.zona-barras { position: absolute; left: 10px; right: 10px; top: 10px; display: flex; gap: 4px; z-index: 3; }
.zona-barras i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .35); overflow: hidden; }
.zona-barras em { display: block; height: 100%; width: 0; background: var(--blanco); }
.zona-cab { position: absolute; left: 12px; right: 56px; top: 22px; z-index: 3; display: grid; gap: 2px; text-shadow: 0 2px 6px rgba(0, 0, 0, .7); }
.zona-cab b { font: 400 26px/1 var(--bang); letter-spacing: .03em; color: var(--amarillo); -webkit-text-stroke: 1px var(--noche); }
.zona-cab span { font: 700 12px var(--txt); color: var(--blanco); }
.zona-tap { position: absolute; top: 15%; bottom: 18%; z-index: 2; width: 45%; border: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.zona-tap.izq { left: 0; } .zona-tap.der { right: 0; }
.zona-cerrar { position: absolute; top: 18px; right: 10px; z-index: 4; width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--noche); background: var(--amarillo); color: var(--noche); font-size: 24px; line-height: 1; cursor: pointer; }
.zona-sonido { position: absolute; right: 10px; bottom: 74px; z-index: 4; width: 42px; height: 42px; border-radius: 50%; border: 3px solid var(--noche); background: var(--blanco); font-size: 18px; cursor: pointer; }
.zona-ig { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 4; min-height: 42px; font-size: 18px; white-space: nowrap; }

/* ---------- MODO CINE (canal 03 · Misión CV) ---------- */
.cine-pixeles { position: fixed; inset: 0; z-index: 118; display: grid; grid-template-columns: repeat(10, 1fr); grid-auto-rows: 1fr; pointer-events: none; visibility: hidden; }
.cine-pixeles i { background: #05030a; transform: scale(0) rotate(-20deg); }
.cine-pixeles.on { visibility: visible; pointer-events: auto; } /* durante el barrido los toques no pasan a la tele */
.cine-pixeles.on i { transform: scale(1.03); transition: transform .32s cubic-bezier(.5, 0, .3, 1.4); transition-delay: var(--d); }
.cine-pixeles.on.arma i { transform: scale(0) rotate(20deg); transition: transform .3s cubic-bezier(.6, 0, .4, 1); transition-delay: calc(var(--d) * .7); }
body.cine-temblor main { animation: temblor .09s steps(2) infinite; filter: saturate(1.6) hue-rotate(15deg); }
@keyframes temblor { 0% { transform: translate(3px, -2px); } 50% { transform: translate(-3px, 2px) skewX(1deg); } 100% { transform: translate(2px, 1px); } }
.cine { position: fixed; inset: 0; z-index: 120; background: radial-gradient(120vmax 80vmax at 50% 0%, #1c1238, #05030a 60%); overflow: hidden; display: grid; place-items: center; touch-action: none; overscroll-behavior: contain; }
.cine-proyector { position: absolute; left: 50%; top: -10%; width: 140vmax; height: 120vh; transform: translateX(-50%); pointer-events: none; opacity: 0;
  background: conic-gradient(from 180deg at 50% 0%, transparent 160deg, rgba(255, 255, 255, .07) 172deg, rgba(141, 198, 63, .10) 180deg, rgba(255, 255, 255, .07) 188deg, transparent 200deg); }
.cine.abre .cine-proyector { opacity: 1; transition: opacity 1s .3s; animation: titila 3s ease-in-out infinite; }
@keyframes titila { 50% { opacity: .75; } }
.cine-pantalla { position: relative; z-index: 2; height: 100vh; height: 100svh; aspect-ratio: 9 / 16; max-width: 100vw; background: #000; box-shadow: 0 0 0 4px #111, 0 0 90px rgba(141, 198, 63, .35); transform: scale(.4); opacity: 0; }
.cine.abre .cine-pantalla { transform: none; opacity: 1; transition: transform .7s cubic-bezier(.2, .9, .3, 1.05), opacity .3s; }
.cine-pantalla video { width: 100%; height: 100%; object-fit: cover; }
.cine-telon { position: absolute; top: 0; bottom: 0; width: 52vw; z-index: 3; pointer-events: none;
  background: repeating-linear-gradient(90deg, #7a0d12 0 18px, #a3141b 18px 30px, #5c0a0e 30px 44px); box-shadow: inset 0 -40px 60px rgba(0, 0, 0, .6); }
.cine-telon.izq { left: 0; transform-origin: 0 0; } .cine-telon.der { right: 0; transform-origin: 100% 0; }
.cine.abre .cine-telon.izq { transform: translateX(-92%) skewX(-4deg); transition: transform 1.2s cubic-bezier(.6, 0, .2, 1) .25s; }
.cine.abre .cine-telon.der { transform: translateX(92%) skewX(4deg); transition: transform 1.2s cubic-bezier(.6, 0, .2, 1) .25s; }
.cine.cierra .cine-pantalla { transform: scale(.4) rotate(-6deg); opacity: 0; transition: transform .4s ease-in, opacity .4s; }
.cine-bailarines { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.cine-muneco { position: absolute; left: 50%; bottom: calc(2svh + var(--y) * 1svh); height: clamp(90px, 22svh, 220px); width: auto; transform-origin: 50% 100%;
  filter: hue-rotate(var(--h)) saturate(1.3) drop-shadow(0 8px 10px rgba(0, 0, 0, .55)); opacity: 0; translate: -50% 0; scale: 0; }
.cine.abre .cine-muneco { opacity: 1; translate: calc(-50% + var(--x) * 1vw) 0; scale: var(--s); transition: translate .7s cubic-bezier(.3, 1.5, .5, 1) var(--e), scale .5s cubic-bezier(.3, 1.6, .5, 1) var(--e), opacity .2s var(--e); }
.cine-muneco.espejo { --flip: -1; } .cine-muneco { --flip: 1; }
.cine.abre .b-wiggle { animation: bWiggle .6s ease-in-out infinite alternate; }
.cine.abre .b-salto { animation: bSalto .7s cubic-bezier(.3, .7, .4, 1) infinite; }
.cine.abre .b-giro { animation: bGiro 1.2s linear infinite; }
.cine.abre .b-robot { animation: bRobot .8s steps(4) infinite; }
.cine.abre .b-moon { animation: bMoon 2.4s ease-in-out infinite; }
.cine.abre .b-split { animation: bSplit 1s ease-in-out infinite; }
.cine.abre .b-onda { animation: bOnda .9s ease-in-out infinite; }
.cine.abre .b-twist { animation: bTwist .7s ease-in-out infinite alternate; }
@keyframes bWiggle { from { transform: scaleX(var(--flip)) rotate(-14deg); } to { transform: scaleX(var(--flip)) rotate(14deg); } }
@keyframes bSalto { 0%, 100% { transform: scaleX(var(--flip)) translateY(0) scale(1.06, .92); } 45% { transform: scaleX(var(--flip)) translateY(-28%) scale(.95, 1.06); } }
@keyframes bGiro { from { transform: perspective(500px) rotateY(0); } to { transform: perspective(500px) rotateY(360deg); } }
@keyframes bRobot { 0% { transform: scaleX(var(--flip)) rotate(0); } 25% { transform: scaleX(var(--flip)) rotate(-10deg) translateY(-4%); } 50% { transform: scaleX(var(--flip)) rotate(0) translateY(0); } 75% { transform: scaleX(var(--flip)) rotate(10deg) translateY(-4%); } }
@keyframes bMoon { 0%, 100% { transform: scaleX(var(--flip)) translateX(0); } 50% { transform: scaleX(var(--flip)) translateX(-40%); } }
@keyframes bSplit { 0%, 100% { transform: scaleX(var(--flip)) scaleY(1); } 50% { transform: scaleX(calc(var(--flip) * 1.25)) scaleY(.72); } }
@keyframes bOnda { 0%, 100% { transform: scaleX(var(--flip)) skewX(0) translateY(0); } 25% { transform: scaleX(var(--flip)) skewX(12deg) translateY(-6%); } 75% { transform: scaleX(var(--flip)) skewX(-12deg) translateY(-6%); } }
@keyframes bTwist { from { transform: scaleX(var(--flip)) rotate(-6deg) translateX(-6%); } to { transform: scaleX(calc(var(--flip) * -1)) rotate(6deg) translateX(6%); } }
.cine-rotulo { position: absolute; z-index: 5; top: 16px; left: 50%; transform: translateX(-50%); margin: 0; opacity: 0; white-space: nowrap; }
.cine-rotulo span { display: inline-block; font-size: 22px; background: var(--lima); color: var(--noche); padding: 2px 10px 0; }
.cine.abre .cine-rotulo { opacity: 1; transition: opacity .4s 1.2s; }
.cine-cerrar { position: absolute; z-index: 6; top: 12px; right: 14px; width: 46px; height: 46px; border-radius: 50%; border: 3px solid var(--noche); background: var(--amarillo); color: var(--noche); font-size: 26px; cursor: pointer; }
.cine-sonido { position: absolute; z-index: 6; top: 66px; right: 14px; width: 46px; height: 46px; border-radius: 50%; border: 3px solid var(--noche); background: var(--blanco); font-size: 20px; cursor: pointer; }
@media (max-width: 700px) { .cine-muneco { height: clamp(70px, 15svh, 130px); } }
/* contenido real de la marca en Cuenca Vibra dentro del haz */
.esc-media { width: 100%; height: 100%; place-self: stretch; }
.spot .esc-media video, .spot .esc-media img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.spot:has(.esc-media.on) { padding: 4% 0 0; }
.esc-cv span { font-size: 16px; background: var(--noche); color: var(--lima); padding: 1px 8px; }
.esc-cv .grande { font-size: clamp(19px, 2.6vw, 26px); max-width: 22ch; }
/* spot legible: el haz más luminoso y cada escena en una tarjeta clara dentro de la luz */
.haz { background: linear-gradient(color-mix(in srgb, var(--c1) 75%, #fff), color-mix(in srgb, var(--c1) 55%, #fff) 45%, color-mix(in srgb, var(--c2) 60%, transparent)); }
.spot { align-content: start; padding: 22% 6% 4%; }
.esc { width: min(88%, 300px); justify-self: center; background: rgba(255, 255, 255, .92); border: 3px solid var(--noche); border-radius: 16px; padding: 14px 12px 12px; box-shadow: 4px 4px 0 var(--noche); }
.esc-logo img { max-height: 70px; filter: none; }
.esc-media { width: min(78%, 240px); height: auto; aspect-ratio: 4 / 5; padding: 0; overflow: hidden; background: #000; border-color: var(--lima); }
.spot .esc-media video, .spot .esc-media img { border-radius: 0; }
.spot:has(.esc-media.on) { padding: 18% 6% 4%; }
.spot { align-items: start; padding: calc(var(--alto) * .2) 6% 4%; }
.spot:has(.esc-media.on) { padding: calc(var(--alto) * .1) 6% 4%; }
.esc-media { width: auto; height: min(calc(var(--alto) * .8), 520px); max-width: 86%; }

/* ---------------------------------------------------------------- caja sorpresa: la ruleta de la nave (js/ruleta.js) */
.ruleta { position: fixed; inset: 0; z-index: 112; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; display: grid; justify-items: center; align-content: start;
  padding: 0 14px 28px; color: var(--blanco); text-align: center;
  background: radial-gradient(1px 1px at 12% 18%, #fff, transparent 60%), radial-gradient(1.5px 1.5px at 78% 12%, #fff, transparent 60%), radial-gradient(1px 1px at 40% 64%, #fff, transparent 60%),
    radial-gradient(1.5px 1.5px at 88% 70%, #fff, transparent 60%), radial-gradient(1px 1px at 22% 86%, #fff, transparent 60%), radial-gradient(1px 1px at 60% 34%, #fff, transparent 60%),
    radial-gradient(120vmax 90vmax at 50% -10%, #3a1f6e, #0b0716 62%); }
.ru-nave { position: relative; z-index: 3; width: min(62vw, 300px); aspect-ratio: 300 / 120; margin-top: 14px; transform: translateY(-120%) scale(.6); opacity: 0; }
.ruleta.llega .ru-nave { transform: none; opacity: 1; transition: transform .7s cubic-bezier(.3, 1.4, .5, 1), opacity .3s; animation: flota 2.4s ease-in-out .8s infinite; }
.ru-cupula { position: absolute; left: 30%; width: 40%; height: 64%; top: 0; border-radius: 50% 50% 18% 18%; border: 4px solid var(--noche);
  background: radial-gradient(circle at 36% 34%, #fff 0 7%, transparent 8%), radial-gradient(ellipse 22% 26% at 50% 70%, var(--lima) 0 60%, transparent 62%), linear-gradient(#bff1ff, #4cc3e6); }
.ru-disco { position: absolute; left: 0; right: 0; bottom: 6%; height: 48%; border-radius: 50%; background: linear-gradient(#e4e7ea, #7d848a); border: 4px solid var(--noche); }
.ru-luces { position: absolute; left: 9%; right: 9%; bottom: 24%; height: 14%; background: radial-gradient(circle, var(--amarillo) 0 32%, transparent 36%) 0 50% / 12.5% 100% repeat-x; animation: parpadeo .4s steps(2) infinite; }
.ru-haz { position: absolute; z-index: 1; left: 50%; top: calc(14px + min(62vw, 300px) * .34); width: min(118vw, 640px); height: min(130vw, 720px); translate: -50% 0;
  max-height: calc(100% - 14px - min(62vw, 300px) * .34); /* termina en el borde: no agrega scroll vacío */
  clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%); background: linear-gradient(rgba(217, 255, 138, .55), rgba(141, 198, 63, .18) 60%, transparent);
  transform: scaleY(0); transform-origin: 50% 0; pointer-events: none; }
.ruleta.llega .ru-haz { transform: none; transition: transform .5s cubic-bezier(.2, .9, .3, 1) .55s; }
.ru-casino { position: relative; z-index: 2; display: grid; justify-items: center; gap: 10px; margin-top: -6px; transform: translateY(-40%) scale(.2); opacity: 0; }
.ruleta.llega .ru-casino { transform: none; opacity: 1; transition: transform .7s cubic-bezier(.3, 1.35, .5, 1) .8s, opacity .3s .8s; }
.ru-marquesina { margin: 0; padding: 4px 16px 2px; font-size: clamp(24px, 6vw, 34px); color: var(--noche); background: var(--amarillo); border: 3px solid var(--noche); border-radius: 10px;
  box-shadow: 0 0 0 3px var(--rojo), 0 0 26px rgba(247, 210, 62, .7); animation: parpadeo 1.2s steps(2) infinite; }
.ru-rueda { --giro: 0deg; position: relative; width: min(80vw, 50svh, 400px); aspect-ratio: 1; }
.ru-rueda canvas { width: 100%; height: 100%; display: block; border-radius: 50%; rotate: var(--giro); box-shadow: 0 0 0 6px var(--amarillo), 0 0 0 10px var(--noche), 0 0 50px rgba(247, 210, 62, .5); }
.ru-focos { position: absolute; inset: 0; pointer-events: none; }
.ru-focos i { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px; border-radius: 50%; background: #fff6c8; box-shadow: 0 0 10px #fff3a0;
  transform: rotate(calc(var(--i) * 15deg)) translateY(calc(min(80vw, 50svh, 400px) / -2 - 2px)); animation: foco .8s steps(1) infinite; }
.ru-focos i:nth-child(odd) { animation-delay: -.4s; }
@keyframes foco { 50% { background: #5a4a10; box-shadow: none; } }
.ruleta.gira .ru-focos i { animation-duration: .22s; }
.ruleta.gano .ru-focos i { animation: foco .3s steps(1) infinite; background: var(--lima); box-shadow: 0 0 12px var(--lima); }
.ru-puntero { position: absolute; left: 50%; top: -14px; width: 34px; height: 42px; margin-left: -17px; z-index: 2; background: var(--rojo); border: 3px solid var(--noche);
  clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: 50% 20%; }
.ru-puntero.tac { animation: tac .12s ease-out; }
@keyframes tac { 50% { transform: rotate(-16deg); } }
.ru-eje { position: absolute; left: 50%; top: 50%; width: 22%; aspect-ratio: 1; translate: -50% -50%; display: grid; place-items: center; border-radius: 50%; font-size: clamp(22px, 6vw, 34px);
  background: var(--noche); color: var(--lima); border: 4px solid var(--amarillo); box-shadow: 0 0 18px rgba(141, 198, 63, .6); }
.ru-info { margin: 4px 0 0; max-width: 34ch; font: 600 14px/1.35 var(--txt); color: rgba(255, 255, 255, .9); min-height: 2.7em; }
.ru-girar { margin-top: 0; min-width: 220px; }
.ru-girar:disabled { opacity: .6; cursor: default; }
.ru-fin { max-width: 360px; display: grid; justify-items: center; gap: 6px; padding: 14px 16px; border-radius: 16px; background: rgba(11, 7, 22, .88); border: 3px solid var(--lima); animation: pop .45s cubic-bezier(.3, 1.4, .5, 1); }
.ru-titulo { margin: 0; font: 400 clamp(30px, 8vw, 42px)/1 var(--bang); color: var(--amarillo); letter-spacing: .02em; text-shadow: 3px 3px 0 var(--rojo); }
.ru-sub { margin: 0; font: 600 14px/1.35 var(--txt); }
.ru-codigo { margin: 6px 0; padding: 6px 16px 2px; font-size: clamp(34px, 9vw, 46px); color: var(--noche); background: var(--lima); border: 3px dashed var(--noche); border-radius: 10px; user-select: all; }
.ru-dm { min-height: 46px; font-size: 20px; }
.ru-legal { margin: 2px 0 0; font: 500 11px/1.3 var(--txt); opacity: .75; }
.ru-meet { font: 700 14px var(--txt); color: var(--lima); }
.ru-cerrar { position: fixed; z-index: 5; top: 12px; right: 12px; width: 46px; height: 46px; border-radius: 50%; border: 3px solid var(--noche); background: var(--amarillo); color: var(--noche); font-size: 26px; cursor: pointer; }
.ru-confeti { position: fixed; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.ru-confeti i { position: absolute; top: -20px; width: 9px; height: 14px; animation: cae 2.6s cubic-bezier(.3, .6, .5, 1) var(--d) forwards; }
.ru-confeti i.ticket { width: auto; height: auto; font-size: 26px; font-style: normal; }
@keyframes cae { to { transform: translate(var(--x), 110vh) rotate(var(--r)); } }
@media (max-height: 640px) { .ru-rueda { width: min(76vw, 44svh, 400px); } .ru-focos i { transform: rotate(calc(var(--i) * 15deg)) translateY(calc(min(76vw, 44svh, 400px) / -2 - 2px)); } }

/* ---------------------------------------------------------------- firma: vozalma IA en 3D (js/vozalma.js) */
.vozalma { margin: 46px auto 0; padding-top: 30px; border-top: 1px solid rgba(244, 238, 230, .12); display: grid; justify-items: center; gap: 6px; }
.vz-hecho { margin: 0; font: 500 13px/1 Manrope, var(--txt); letter-spacing: .08em; text-transform: uppercase; color: #9d968c; }
.vz-tag { margin: 0; font: 500 14px/1.3 Manrope, var(--txt); letter-spacing: .02em; color: #9d968c; }
.vz { --rx: 0deg; --ry: 0deg; position: relative; display: grid; justify-items: center; gap: 2px; padding: 10px 18px 6px; border: 0; background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent; perspective: 700px; touch-action: manipulation; }
.vz:focus-visible { outline: 3px solid #C1502C; outline-offset: 4px; border-radius: 14px; }
.vz-escena { position: relative; width: 168px; height: 126px; transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .35s var(--ease); }
.vz-3d { position: absolute; inset: 0; transform-style: preserve-3d; animation: vzFlota 5s ease-in-out infinite; }
.vz-capa { position: absolute; inset: 0; transform: translateZ(var(--z)); }
.vz-capa svg { width: 100%; height: 100%; display: block; overflow: visible; }
.vz-capa:last-child svg { filter: drop-shadow(0 10px 18px rgba(193, 80, 44, .35)); }
.vz-capa:last-child .vz-voz { transform-box: fill-box; transform-origin: 50% 80%; animation: vzVoz 2.6s ease-in-out infinite; } /* la «voz» late, como si empezara a hablar */
@keyframes vzFlota { 0%, 100% { transform: rotateY(-24deg) rotateX(6deg) translateY(0); } 50% { transform: rotateY(24deg) rotateX(-4deg) translateY(-7px); } }
@keyframes vzVoz { 0%, 70%, 100% { transform: none; } 78% { transform: scale(1.08, .94); } 86% { transform: scale(.96, 1.05); } }
.vz-marca { display: flex; align-items: baseline; transform: rotateX(calc(var(--rx) * .6)) rotateY(calc(var(--ry) * .6)); transition: transform .35s var(--ease); }
.vz-marca span { display: inline-block; font: 600 clamp(48px, 13vw, 64px)/1 Fraunces, Georgia, serif; font-variation-settings: 'opsz' 36, 'SOFT' 60; letter-spacing: -.02em; color: #F4EEE6;
  text-shadow: 1px 1px 0 #cfc5b6, 2px 2px 0 #b9ad9c, 3px 3px 0 #a39684, 4px 4px 0 #8d806e, 5px 5px 0 #776a59, 6px 6px 14px rgba(0, 0, 0, .55); }
.vz-marca b { display: inline-block; margin-left: 7px; font: 800 clamp(32px, 8.5vw, 42px)/1 Manrope, var(--txt); color: #C1502C; letter-spacing: .02em;
  text-shadow: 1px 1px 0 #a8431f, 2px 2px 0 #8f3a1b, 3px 3px 0 #763017, 4px 4px 0 #5e2612, 5px 5px 12px rgba(0, 0, 0, .55); }
/* al entrar en pantalla: las capas llegan desde el fondo y las letras caen una por una */
.vozalma:not(.vz-on) .vz-escena { opacity: 0; translate: 0 0 -260px; rotate: y -120deg; } /* propiedades sueltas: no chocan con la flotación ni con la inclinación */
.vozalma:not(.vz-on) .vz-marca span, .vozalma:not(.vz-on) .vz-marca b { opacity: 0; transform: translateY(-40px) rotate(-12deg); }
.vozalma.vz-on .vz-escena { transition: opacity .5s, translate 1s cubic-bezier(.2, .9, .3, 1.15), rotate 1s cubic-bezier(.2, .9, .3, 1.15), transform .35s var(--ease); }
.vozalma.vz-on .vz-marca span, .vozalma.vz-on .vz-marca b { transition: opacity .3s calc(.5s + var(--i) * 70ms), transform .6s cubic-bezier(.3, 1.6, .5, 1) calc(.5s + var(--i) * 70ms); }
/* al tocar: giro completo y las letras saltan en ola */
.vz.vz-toca .vz-3d { animation: vzGiro 1s cubic-bezier(.4, 0, .2, 1); }
@keyframes vzGiro { from { transform: rotateY(0) scale(1); } 50% { transform: rotateY(200deg) scale(1.15); } to { transform: rotateY(360deg) scale(1); } }
.vz.vz-toca .vz-marca span, .vz.vz-toca .vz-marca b { animation: vzSalto .55s cubic-bezier(.3, 1.6, .5, 1) calc(var(--i) * 55ms); }
@keyframes vzSalto { 40% { transform: translateY(-16px) rotate(-6deg); } }
@media (prefers-reduced-motion: reduce) { .vz-3d, .vz-capa:last-child .vz-voz { animation: none; } }

/* ---------------------------------------------------------------- auspiciantes v3 (25-oct): logos grandes a color en la barra y
   el logo de la marca fijo y grande arriba del haz, con motion a todo color; el contenido corre debajo */
.marcas-grilla { gap: 8px; padding: 12px 10px; }
.marca-logo { flex: 1 0 104px; min-width: 104px; height: 74px; padding: 6px 8px; }
.marca-logo img { max-height: 58px; }
.marca-logo .tinte, .spot-logo .tinte { display: block; width: 100%; height: 100%; background: linear-gradient(180deg, var(--t1), var(--t2));
  -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
.marca-logo .tinte { height: 58px; }
@media (max-width: 600px) { .marca-logo { flex-basis: 104px; height: 70px; } }
.spot, .spot:has(.esc-media.on) { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 12px; padding: calc(var(--alto) * .05) 5% 4%; }
.spot { --logoH: calc(min(var(--ancho) * .74, 370px) / 2.2); }
.spot-logo { position: relative; flex: none; width: min(74%, 370px); aspect-ratio: 2.2; display: grid; place-items: center; }
.spot-logo .rayos { position: absolute; inset: -55% -22%; border-radius: 50%; pointer-events: none; opacity: .9;
  background: repeating-conic-gradient(from 0deg, var(--c1) 0 9deg, transparent 9deg 18deg, var(--c2) 18deg 27deg, transparent 27deg 36deg);
  -webkit-mask: radial-gradient(closest-side, #000 35%, transparent 100%); mask: radial-gradient(closest-side, #000 35%, transparent 100%); animation: rayosGiran 10s linear infinite; }
@keyframes rayosGiran { to { transform: rotate(360deg); } }
.spot-logo .aro { position: absolute; inset: -6%; border-radius: 24px; border: 3px dashed var(--c1); opacity: .9; animation: aroLate 1.6s ease-in-out infinite; pointer-events: none; }
@keyframes aroLate { 50% { transform: scale(1.05); opacity: .45; } }
.spot-logo .tarjeta { position: relative; width: 100%; height: 100%; display: grid; place-items: center; overflow: hidden; background: var(--blanco); border: 3px solid var(--noche);
  border-radius: 20px; box-shadow: 0 0 0 4px var(--c1), 7px 7px 0 var(--noche), 0 0 46px color-mix(in srgb, var(--c1) 70%, transparent);
  animation: entraLogo .7s cubic-bezier(.3, 1.6, .5, 1), flotaLogo 3.2s ease-in-out .7s infinite; }
@keyframes flotaLogo { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-6px) rotate(1.5deg) scale(1.03); } }
.spot-logo .tarjeta img { position: absolute; left: 8%; top: 12%; width: 84%; height: 76%; max-width: none; max-height: none; object-fit: contain; } /* caja fija: en Safari el max-height en % no se aplica y los logos altos (Schweppes) se salían */
.spot-logo .tarjeta .tinte { width: 84%; height: 76%; }
.spot-logo .brillo { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .9) 50%, transparent 65%);
  transform: translateX(-130%); animation: brilloLogo 2.8s ease-in-out 1s infinite; }
@keyframes brilloLogo { 55%, 100% { transform: translateX(130%); } }
.spot-logo .px { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4px; z-index: 2; pointer-events: none; animation: pxSale .85s cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes pxSale { from { transform: translate(0, 0) scale(1.4); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) scale(.3); opacity: 0; } }
.spot-escenas { position: relative; width: 100%; flex: 1; min-height: 0; display: grid; justify-items: center; align-items: start; }
.spot-escenas .esc { grid-area: 1 / 1; }
.spot-escenas .esc-media { height: min(calc(var(--alto) * .92 - var(--logoH) - 34px), 440px); } /* entra entero entre el logo y la barra */
@media (prefers-reduced-motion: reduce) { .spot-logo .rayos, .spot-logo .aro, .spot-logo .tarjeta, .spot-logo .brillo { animation: none; } }

/* ---------------------------------------------------------------- zoom con dos dedos (cv.js pone .con-zoom): todo quieto y sin desenfoques,
   para que el iPhone no tenga que redibujar las animaciones a 2-3 veces la resolución (se ponía en blanco y se trababa) */
.con-zoom *, .con-zoom *::before, .con-zoom *::after { animation-play-state: paused !important; }
.con-zoom .globo, .con-zoom .chispa { animation-play-state: running !important; } /* lo que sale al tocar (chico y corto) sí se anima con zoom */
.con-zoom .nav.solida { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(22, 14, 37, .96); }

/* ---------------- Ganador de las ruletas: datos + tarjeta (js/premio.js, 31-oct-2026) */
.ru-fin.pr-caja { max-width: 400px; width: min(92vw, 400px); }
.pr-form { width: 100%; display: grid; gap: 10px; text-align: left; }
.pr-campo { display: grid; gap: 4px; font: 700 13px var(--txt); }
.pr-campo input { width: 100%; min-height: 46px; padding: 0 12px; border-radius: 10px; border: 3px solid var(--noche); background: #fff; color: var(--noche); font: 600 17px var(--txt); }
.pr-campo input:focus { outline: 3px solid var(--amarillo); outline-offset: 1px; }
.pr-acepto { display: flex; gap: 8px; align-items: flex-start; font: 500 12px/1.35 var(--txt); }
.pr-acepto input { width: 20px; height: 20px; flex: none; margin: 0; accent-color: var(--lima); }
.pr-error { min-height: 1em; margin: 0; font: 700 13px/1.3 var(--txt); color: #ff8f86; }
.pr-enviar, .pr-bajar { min-height: 50px; font-size: 20px; width: 100%; text-decoration: none; }
.pr-tarjeta { width: min(70vw, 260px); aspect-ratio: 9 / 16; border-radius: 12px; border: 3px solid var(--amarillo); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); animation: pop .45s cubic-bezier(.3, 1.4, .5, 1); }
.pr-compartir { background: none; border: 0; color: var(--lima); font: 700 15px var(--txt); text-decoration: underline; cursor: pointer; padding: 6px; }

/* ---------------- Fraile: «Arma la tabla» + su ruleta con el frailecito (js/fraile.js, 31-oct-2026) */
.spot-juego { flex: none; min-height: 46px; font-size: 18px; padding: 0 16px; background: var(--amarillo); color: var(--noche); pointer-events: auto; animation: pulso 1.6s ease-in-out infinite; }
.fr { position: fixed; inset: 0; z-index: 113; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; display: grid; justify-items: center; align-content: start; gap: 6px;
  padding: 12px 12px 40px; background: radial-gradient(circle at 50% 30%, #7a2a14, #2a120a 70%) #2a120a; color: #fff; text-align: center; }
.fr.llega { animation: zonaEntra .45s cubic-bezier(.3, 1.3, .5, 1); }
.fr-logo { width: min(46vw, 210px); height: auto; margin-top: 4px; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .5)); animation: flota 2.6s ease-in-out infinite; }
.fr-escena { width: min(100%, 560px); display: grid; justify-items: center; gap: 10px; position: relative; }
.fr-titulo { font: 400 clamp(38px, 10vw, 60px)/.95 var(--bang); color: var(--amarillo); letter-spacing: .02em; text-shadow: 3px 3px 0 var(--rojo), 6px 6px 0 #2a120a; }
.fr-sub { max-width: 38ch; font: 600 15px/1.4 var(--txt); }
.fr-estado { max-width: 40ch; font: 700 14px/1.35 var(--txt); color: var(--lima); min-height: 1.4em; }
.fr-muestra { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; width: 100%; }
.fr-muestra img { width: 100%; height: auto; animation: flota 2.2s ease-in-out infinite; }
.fr-muestra img:nth-child(even) { animation-delay: -1.1s; }
.fr-jugar { min-width: 220px; background: var(--amarillo); color: var(--noche); }
.fr .btn-xl.fr-jugar { margin-top: 4px; }
/* la mascota y su globo */
.fr-mascota { position: relative; width: min(38vw, 170px); flex: none; transform-origin: 50% 100%; animation: flota 2.4s ease-in-out infinite; }
.fr-mascota img { width: 100%; height: auto; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .45)); }
.fr-mascota.salta { animation: salta .8s ease-out, flota 2.4s ease-in-out .8s infinite; }
.fr-mascota.anima { animation: baila .5s ease-in-out infinite; }
.fr-mascota.festeja { animation: salta .6s ease-out 4, flota 2.4s ease-in-out 2.4s infinite; }
.fr-mascota.triste { animation: sacude .7s ease-out; filter: saturate(.7); }
.fr-globo { position: absolute; z-index: 2; left: 50%; bottom: 96%; width: max-content; max-width: min(64vw, 260px); padding: 8px 12px; border-radius: 14px; border: 3px solid #2a120a;
  background: #fff; color: #2a120a; font: 800 14px/1.25 var(--txt); translate: -50% 0; opacity: 0; scale: .6; transition: opacity .2s, scale .25s cubic-bezier(.3, 1.5, .5, 1); pointer-events: none; }
.fr-globo::after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -8px; border: 8px solid transparent; border-top-color: #2a120a; }
.fr-globo.on { opacity: 1; scale: 1; }
/* el juego */
.fr-cab { width: 100%; display: grid; gap: 8px; }
.fr-barra { position: relative; height: 26px; border-radius: 13px; border: 3px solid #2a120a; background: #3e2416; overflow: hidden; }
.fr-barra i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--lima), var(--amarillo)); transform-origin: 0 50%; }
.fr-barra.apurado i { background: linear-gradient(90deg, var(--rojo), var(--naranja)); animation: titila .3s steps(2) infinite; }
.fr-barra span { position: relative; font-size: 22px; line-height: 20px; color: #2a120a; }
.fr-ticket { display: grid; grid-template-columns: auto 64px 1fr auto; align-items: center; gap: 10px; padding: 6px 12px; border-radius: 12px; border: 3px dashed #2a120a; background: #FBE7C6; color: #2a120a; }
.fr-ticket.nuevo { animation: pop .3s ease-out; }
.fr-ticket img { width: 64px; height: 50px; object-fit: contain; }
.fr-ticket p { margin: 0; font-size: 30px; text-align: left; }
.fr-ped { font: 900 11px var(--txt); letter-spacing: .12em; writing-mode: vertical-rl; rotate: 180deg; }
.fr-cont { font: 900 18px var(--txt); }
.fr-tabla { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 14px; border-radius: 28px; border: 4px solid #2a120a;
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .08) 0 3px, transparent 3px 22px), linear-gradient(#c68a4e, #9a6233); box-shadow: inset 0 0 0 6px rgba(255, 255, 255, .12), 0 12px 24px rgba(0, 0, 0, .45); }
.fr-tabla.lista { animation: pulsoG .9s ease-in-out 2; box-shadow: inset 0 0 0 6px rgba(255, 255, 255, .2), 0 0 0 4px var(--amarillo), 0 0 40px var(--amarillo); }
.fr-hueco { position: relative; aspect-ratio: 5 / 4; display: grid; place-items: center; border-radius: 14px; border: 2px dashed rgba(42, 18, 10, .55); background: rgba(255, 255, 255, .12); }
.fr-hueco span { font: 800 12px var(--txt); color: rgba(42, 18, 10, .7); }
.fr-hueco img { position: absolute; inset: 4%; width: 92%; height: 92%; object-fit: contain; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .35)); }
.fr-hueco.lleno { border-color: transparent; background: none; }
.fr-hueco.lleno span { visibility: hidden; }
.fr-hueco.cae img { animation: gelatina .4s ease-out; }
.fr-vitrina { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fr-prod { display: grid; justify-items: center; gap: 2px; padding: 6px 4px 4px; border-radius: 14px; border: 3px solid #2a120a; background: #FBE7C6; color: #2a120a; cursor: pointer; font: 800 12px var(--txt); transition: transform .1s; touch-action: manipulation; }
.fr-prod img { width: 100%; aspect-ratio: 5 / 4; object-fit: contain; }
.fr-prod:active { transform: scale(.94); }
.fr-prod.usado { opacity: .25; cursor: default; }
.fr-prod.mal { animation: tiembla .4s; background: #ffb3ab; }
.fr-escena.error .fr-barra { animation: tiembla .3s; }
.fr-vuela { position: fixed; z-index: 120; object-fit: contain; pointer-events: none; transition: transform .4s cubic-bezier(.4, 1.3, .6, 1); }
.fr-juego { padding-bottom: 110px; }
.fr-juego .fr-mascota { position: fixed; left: 6px; bottom: 6px; width: min(24vw, 120px); z-index: 3; }
.fr-juego .fr-globo { left: 0; translate: 0 0; }
.fr-juego .fr-globo::after { left: 30px; }
.fr-fin { width: 100%; max-width: none; }
/* la ruleta Fraile */
.fr-marq { background: var(--rojo); color: #fff; border-color: #2a120a; }
.fr-zona { position: relative; width: 100%; display: grid; justify-items: center; }
.fr-rueda canvas { box-shadow: 0 0 0 6px var(--amarillo), 0 0 0 10px #2a120a, 0 0 50px rgba(247, 210, 62, .45); }
.fr-eje { position: absolute; left: 50%; top: 50%; width: 34%; aspect-ratio: 1; translate: -50% -50%; display: grid; place-items: center; border-radius: 50%; background: #fff; border: 5px solid #2a120a; box-shadow: 0 0 0 4px var(--amarillo); }
.fr-eje img { width: 86%; height: auto; }
.fr-zona .fr-mascota { position: absolute; right: -6px; bottom: -18px; width: min(30vw, 150px); z-index: 3; }
.fr-escena.gano .ru-focos i { animation: foco .3s steps(1) infinite; background: var(--lima); box-shadow: 0 0 12px var(--lima); }
.fr-escena.gira .ru-focos i { animation-duration: .22s; }
.fr-ruleta .ru-fin { width: min(92vw, 400px); }
.fr-resultado .fr-mascota { margin-top: 40px; }
@media (min-width: 700px) { .fr-juego .fr-mascota { left: calc(50% - 420px); width: 150px; } }
.fr-zona .fr-globo { left: auto; right: 6px; translate: 0 0; }
.fr-zona .fr-globo::after { left: auto; right: 40px; }