/* ======================================================================
   Canchita Denk: la página pública (/).
   El diseño salió del tablero "D en vivo" de Claude Design (cerrado el 11/10/2026).
   Pensada para el celular: en una pantalla grande se ve como una columna de celular, centrada.
   ====================================================================== */

/* ---------- Las letras, servidas desde el mismo sitio (solo el alfabeto latino) ---------- */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 900;font-stretch:62% 125%;font-display:swap;src:url("letras/archivo.de2f1fe81758.woff2") format('woff2')}
@font-face{font-family:'Protest Strike';font-style:normal;font-weight:400;font-display:swap;src:url("letras/protest-strike.29940ffc7c00.woff2") format('woff2')}
@font-face{font-family:'Changa One';font-style:italic;font-weight:400;font-display:swap;src:url("letras/changa-one-italica.141119ae119b.woff2") format('woff2')}

/* ---------- Colores por tema. Las secciones .noche son siempre oscuras (portada, foto de la cancha) ---------- */
.noche{--fondo:#0B0A10;--sup:#15131D;--sup2:#1A1724;--tinta:#FFFFFF;--suave:#B8B3C7;--tenue:#8C86A3;--apagado:#827C95;--borde:rgba(255,255,255,.1);--borde2:rgba(255,255,255,.16);--acento-txt:#C9B6FF;--libre-borde:rgba(201,182,255,.35);--cabecera:rgba(11,10,16,.82)}
.dia{--fondo:#F5F1FF;--sup:#FFFFFF;--sup2:#FFFFFF;--tinta:#16112A;--suave:#4E4766;--tenue:#655E7D;--apagado:#6F6888;--borde:rgba(22,17,42,.1);--borde2:rgba(22,17,42,.18);--acento-txt:#6D28D9;--libre-borde:rgba(109,40,217,.35);--cabecera:rgba(245,241,255,.85)}
/* La letra de los títulos y los números: Protest Strike. --esc compensa que es más ancha que la condensada con la que se armaron los tamaños */
.tema{--display:'Protest Strike',sans-serif;--esc:.84;--violeta:#7B3FE4}

html{background:#050409;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:#050409}
a{color:inherit}
button{font-family:inherit}
::selection{background:#7B3FE4;color:#FFFFFF}
:focus-visible{outline:2px solid var(--acento-txt);outline-offset:2px}
.solo-lector{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);margin:0;white-space:nowrap}
[hidden]{display:none!important}

.tema{position:relative;max-width:480px;min-height:100vh;margin:0 auto;overflow-x:clip;background:var(--fondo);color:var(--tinta);font-family:'Archivo',sans-serif;transition:background-color .6s ease,color .6s ease}
@media (min-width:520px){.tema{box-shadow:0 0 80px rgba(0,0,0,.6)}}

/* Los títulos: todos con la misma letra, de distintos tamaños */
.titulo{margin:0 0 18px;font-family:var(--display);font-weight:400;font-size:calc(50px * var(--esc));line-height:1;text-transform:uppercase;text-wrap:balance}
.titulo-68{font-size:calc(68px * var(--esc));margin:0}
.titulo-64{font-size:calc(64px * var(--esc));margin:0}
.titulo-44{font-size:calc(44px * var(--esc));margin:0}
.titulo-34{font-size:calc(34px * var(--esc));margin:0 0 16px}
.bloque{padding:60px 20px 10px}

/* Botones: una sola jerarquía para toda la página */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 18px;box-sizing:border-box;border-radius:14px;font-weight:700;font-size:16px;text-decoration:none;cursor:pointer}
.btn-1{background:#C9B6FF;color:#1A1033;border:0}
.btn-2{background:transparent;color:var(--tinta);border:1px solid var(--borde2)}
.btn-chico{min-height:44px;font-size:14px;padding:0 16px}

.carril{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory}
.carril::-webkit-scrollbar{display:none}
.carril > *{scroll-snap-align:center}

/* ---------- La cabecera: transparente sobre la portada, con fondo cuando se baja ---------- */
.cabecera{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:12px 20px;padding-top:max(12px,env(safe-area-inset-top));background:var(--cabecera);color:var(--tinta);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.logo-mini{display:flex;align-items:center;gap:10px}
.marca-caja{width:34px;height:34px;border-radius:10px;background:var(--violeta);color:#FFFFFF;display:flex;align-items:center;justify-content:center;flex:none}
.marca-grande{width:58px;height:58px;border-radius:16px}
.marca-txt{font-family:var(--display);font-size:calc(22px * var(--esc));letter-spacing:1px;text-transform:uppercase}
.cab-botones{display:flex;gap:8px}
.cab-btn{display:flex;align-items:center;justify-content:center;width:44px;height:44px;box-sizing:border-box;border-radius:12px;border:1px solid color-mix(in srgb,currentColor 25%,transparent);background:transparent;color:inherit;cursor:pointer}
#btnSonido .si-on,#btnSonido[aria-pressed="true"] .si-off{display:none}
#btnSonido[aria-pressed="true"] .si-on{display:block}
.tema.noche #btnModo .si-dia,.tema.dia #btnModo .si-noche{display:none}

/* ---------- Portada ---------- */
.portada{position:relative;height:clamp(640px,100svh,860px);margin-top:-68px;overflow:hidden;background:#07060B;color:#FFFFFF}
/* Lo que está dibujado para un ancho de 390 px (reflectores, líneas de cancha): centrado, y en pantallas más angostas se recorta parejo */
.portada-fija{position:absolute;left:50%;top:0;bottom:0;width:390px;margin-left:-195px;pointer-events:none}
.cancha-lineas{position:absolute;left:0;bottom:0}
.escena{position:absolute;inset:0}
.haz-pie{position:absolute;top:82px;width:140px;height:680px;transform-origin:50% 0}
.haz{width:100%;height:100%;transform-origin:50% 0;clip-path:polygon(44% 0,56% 0,100% 100%,0 100%);filter:blur(5px);animation:hazEntra .7s ease-out both,mecer 5s ease-in-out infinite alternate}
.lampara{position:absolute;top:76px;width:28px;height:9px;border-radius:4px;background:#FFFFFF;box-shadow:0 0 22px 8px rgba(255,255,255,.6);animation:prenderLampara .8s ease-out both}
.niebla{position:absolute;border-radius:50%;filter:blur(38px);background:rgba(201,182,255,.10);animation:niebla 16s ease-in-out infinite alternate}
/* El logo de neón de la cancha: se prende como un cartel (parpadea y queda), y cada tanto "zumba".
   "screen" hace que el gris de fondo de la foto desaparezca sobre el negro y quede solo la luz violeta. */
.neon{position:absolute;left:50%;top:44px;width:350px;height:350px;margin-left:-175px;mix-blend-mode:screen;filter:brightness(.82) contrast(1.75) saturate(1.2);-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 50%,transparent 71%);mask-image:radial-gradient(circle at 50% 50%,#000 50%,transparent 71%);animation:neonPrende 1.8s steps(1,end) .9s both,neonZumba 7s ease-in-out 3.2s infinite}
/* El titular va abajo, pegado al panel de horarios: así no se pisan en ningún alto de pantalla */
.portada-texto{position:absolute;left:20px;right:20px;bottom:262px}
.kicker{display:block;font-size:12px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:#C9B6FF}
/* El titular de la portada va en Changa One, inclinada: es la única letra distinta de la página */
.titular{display:block;margin-top:14px;font-family:'Changa One',sans-serif;font-weight:400;font-style:italic;font-size:74px;line-height:.95;text-transform:uppercase;letter-spacing:-.01em;color:#FFFFFF}
.titular .ln{display:block;overflow:hidden;padding-bottom:.16em;margin-bottom:-.12em}
.titular .ln > span{display:block;animation:lineaSube .9s cubic-bezier(.2,.75,.15,1) both}
.titular .ln:nth-child(1) > span{animation-delay:1.45s}.titular .ln:nth-child(2) > span{animation-delay:1.58s}
.titular .acento{color:#C9B6FF}
.sube{animation:letras .6s cubic-bezier(.2,.8,.2,1) both}

.dock{position:absolute;left:14px;right:14px;bottom:16px;padding:14px;border-radius:24px;background:rgba(21,19,29,.82);border:1px solid rgba(201,182,255,.22);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);animation:subirPanel .6s cubic-bezier(.2,.8,.2,1) 2.1s both}
/* "Hoy quedan 3 horas de noche": sale de los horarios reales; si quedan pocas, el punto late */
.quedan{display:flex;align-items:center;gap:10px;min-height:20px;font-size:14px;line-height:1.3;color:#B8B3C7}
.quedan b{color:#FFFFFF}
.quedan::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:#4ADE80;animation:latido 2s infinite}
.quedan.pocas::before{background:#C9B6FF;animation:pocas 1.4s ease-out infinite}
.quedan.sin-datos::before{background:#8C86A3;animation:none}
.dock-carril{margin:12px -14px 0;padding:0 14px}
.dock-carril:empty{display:none}
.dock-hora{flex:none;min-width:96px;min-height:64px;padding:8px 12px;box-sizing:border-box;border-radius:16px;border:1px solid rgba(201,182,255,.35);background:#1F1B2C;color:#FFFFFF;text-align:left;cursor:pointer;font-family:var(--display);font-size:calc(24px * var(--esc));line-height:1;animation:entrar .45s cubic-bezier(.2,.8,.2,1) both}
.dock-ver{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;margin-top:10px;border-radius:14px;background:#C9B6FF;color:#1A1033;font-weight:700;font-size:15px;text-decoration:none}

/* ---------- Reservar ---------- */
.reservar{padding:40px 20px 30px;scroll-margin-top:60px}
/* El pronóstico del día: nube con gotas si llueve, sol que gira si está lindo */
.clima{display:flex;align-items:center;gap:12px;margin:0 0 14px;padding:12px 14px;border-radius:16px;background:var(--sup);border:1px solid var(--borde);font-size:14px;line-height:1.35;color:var(--suave);animation:aviso .4s ease-out both}
.clima svg{flex:none}
.clima b{color:var(--tinta)}
.clima .gota{animation:gota 1.4s ease-in infinite}
.clima .gota:nth-of-type(2){animation-delay:.45s}.clima .gota:nth-of-type(3){animation-delay:.9s}
.clima .rayos{transform-origin:17px 17px;animation:rayos 12s linear infinite}
.clima .nucleo{transform-origin:17px 17px;animation:solLate 3s ease-in-out infinite}
/* "¿Repetimos?" después de haber pedido */
.repetir{display:flex;align-items:center;gap:12px;width:100%;margin:0 0 16px;padding:12px 14px;border:1px solid rgba(201,182,255,.45);border-radius:16px;background:rgba(123,63,228,.14);color:var(--tinta);text-align:left;cursor:pointer;animation:aviso .4s ease-out both}
.repetir i{flex:none;width:38px;height:38px;border-radius:50%;background:#7B3FE4;color:#FFFFFF;display:grid;place-items:center}
.repetir small{display:block;font-size:12px;color:var(--suave)}
.dias{margin:-9px -20px 0;padding:9px 20px 0}
.dia-btn{position:relative;flex:none;width:58px;padding:8px 0;border-radius:14px;border:1px solid var(--borde);background:var(--sup);color:var(--tinta);cursor:pointer}
.dia-btn[aria-pressed="true"]{border-color:#C9B6FF;background:#C9B6FF;color:#1A1033}
.dia-corto{display:block;font-size:11px;font-weight:700;text-transform:uppercase}
.dia-num{display:block;font-family:var(--display);font-size:calc(26px * var(--esc));line-height:1.05}
.dia-libres{display:block;font-size:10.5px;font-weight:600;opacity:.8}
.chip-promo{position:absolute;top:-8px;left:50%;transform:translateX(-50%);padding:2px 7px;border-radius:999px;background:#7B3FE4;color:#FFFFFF;border:1.5px solid var(--fondo);font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.dia-largo{margin-top:16px;font-weight:700;font-size:16px;min-height:20px}
/* La promo del día, bien a la vista */
.promo-cartel{display:flex;flex-direction:column;gap:4px;margin-top:12px;padding:14px 16px;border-radius:18px;background:#C9B6FF;color:#1A1033;animation:aviso .35s ease-out both}
.promo-tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#4B1FA8}
.promo-precio{font-size:15px;font-weight:600}
.promo-precio b{font-family:var(--display);font-weight:400;font-size:calc(40px * var(--esc));line-height:1;margin-right:4px}
.promo-pie{font-size:13px;color:#3B2470}
.reloj-promo{display:inline-block;padding:2px 8px;border-radius:999px;background:rgba(26,16,51,.12);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
/* Los precios: una sola tarjeta grande arriba de los horarios */
.tarifas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:14px}
.tarifa{display:flex;flex-direction:column;gap:2px;padding:14px 14px 12px;border-radius:18px;background:var(--sup);border:1px solid var(--borde)}
.tarifa.con-luz{background:linear-gradient(180deg,rgba(123,63,228,.32),var(--sup) 78%);border-color:rgba(201,182,255,.35)}
.tarifa-cab{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--suave)}
.tarifa b{margin-top:6px;font-family:var(--display);font-weight:400;font-size:calc(42px * var(--esc));line-height:1;color:var(--tinta);font-variant-numeric:tabular-nums}
.tarifa-pie{font-size:12.5px;color:var(--tenue)}
/* La grilla "el día que pasa": cada casilla un poco más de noche que la anterior, y las de noche con el reflector prendido */
.grilla-t{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:14px}
.turno{position:relative;display:flex;flex-direction:column-reverse;align-items:flex-start;justify-content:space-between;gap:10px;min-height:88px;padding:12px 14px;box-sizing:border-box;border-radius:16px;border:1px solid transparent;color:#FFFFFF;text-align:left;cursor:pointer;font:inherit;animation:entrar .45s cubic-bezier(.2,.8,.2,1) both;transition:transform .15s ease}
.turno:not(.ocup):active{transform:scale(.97)}
.turno-h{font-family:var(--display);font-size:calc(42px * var(--esc));line-height:.9}
.turno-h small{font-size:.42em;margin-left:1px;color:rgba(255,255,255,.62)}
.turno-e{align-self:flex-end;font-size:12.5px;font-weight:700;color:#E9E1FF;text-align:right;white-space:nowrap}
.turno.promo{background:#C9B6FF!important;color:#1A1033}
.turno.promo .turno-e,.turno.promo .turno-h small{color:#3B2470}
.turno.ocup{cursor:default;background:transparent;border-color:var(--borde);color:var(--apagado)}
.turno.ocup .turno-h small,.turno.ocup .turno-e{color:var(--apagado);font-weight:600}
.turno.ocup .turno-e.en-vivo{color:var(--tinta);font-weight:700}
.luz-t{position:absolute;top:13px;left:14px;width:16px;height:5px;border-radius:3px;background:#FFFFFF;box-shadow:0 0 10px 3px rgba(255,255,255,.5)}
.turno.ocup .luz-t{opacity:.3;box-shadow:none}
.dia .turno.ocup .luz-t{background:var(--apagado)}
.grilla-vacia{grid-column:1/-1;margin:0;padding:22px 16px;border-radius:16px;border:1px dashed var(--borde2);text-align:center;font-size:15px;color:var(--suave)}
.esqueleto{min-height:88px;border-radius:16px;background:var(--sup);animation:esqueleto 1.2s ease-in-out infinite alternate}
.horarios-aviso{margin-top:14px;padding:16px;border-radius:16px;background:var(--sup);border:1px solid var(--borde);font-size:15px;line-height:1.45;color:var(--suave)}
.horarios-aviso b{display:block;margin-bottom:4px;color:var(--tinta)}
/* "Jugando ahora": el turno de esta hora, en vivo */
.en-vivo{display:inline-flex;align-items:center;gap:7px;font-weight:700;color:var(--tinta)}
.en-vivo::before{content:"";width:8px;height:8px;border-radius:50%;background:#FF4D5E;animation:vivo 1.3s ease-out infinite}
/* El horario fijo: una línea debajo de los horarios */
.linea-fijo{display:flex;flex-wrap:wrap;align-items:center;column-gap:6px;margin:14px 0 0;font-size:15px;color:var(--suave)}
.linea-fijo a{display:inline-flex;align-items:center;gap:4px;min-height:44px;color:var(--acento-txt);font-weight:700;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}

/* ---------- El momento: el manifiesto en tres filas que se cruzan al bajar, y el contador ---------- */
.momento{padding:60px 0 20px}
.cruce{overflow:hidden;padding:6px 0;display:flex;flex-direction:column;gap:2px}
.cruce div{white-space:nowrap;font-family:var(--display);font-size:calc(64px * var(--esc));line-height:.95;text-transform:uppercase}
.cruce .c1{color:var(--tinta)}
.cruce .c2{color:transparent;-webkit-text-stroke:1.5px var(--acento-txt)}
.cruce .c3{color:#7B3FE4}
.contador-fila{display:flex;align-items:flex-end;gap:14px;padding:30px 20px 0}
.contador{font-family:var(--display);font-size:calc(128px * var(--esc));line-height:.78;color:var(--acento-txt);font-variant-numeric:tabular-nums}
.contador-txt{padding-bottom:6px;font-size:18px;font-weight:600;line-height:1.25}

/* ---------- Llueva o no llueva ---------- */
.lluvia{padding:30px 0 10px;color:#FFFFFF}
.lluvia-marco{position:relative;height:540px;overflow:hidden;background:#0B0A10}
.lluvia-foto{position:absolute;inset:0;left:-18px}
.lluvia-foto img{position:absolute;left:0;top:-80px;width:100%;height:calc(100% + 160px);object-fit:cover;object-position:40% 50%}
.video-andando{animation:zoomLento 8s ease-in-out infinite alternate}
.lluvia-btn{position:absolute;top:12px;right:12px;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(11,10,16,.55);color:#FFFFFF;cursor:pointer}
.lluvia-btn .si-play,.lluvia-btn[aria-pressed="true"] .si-pausa{display:none}
.lluvia-btn[aria-pressed="true"] .si-play{display:block}
.lluvia-sombra{position:absolute;left:0;right:0;bottom:0;height:260px;background:rgba(11,10,16,.55)}
.lluvia-texto{position:absolute;left:20px;right:20px;bottom:26px}
.lluvia-texto p{margin:14px 0 0;font-size:16px;line-height:1.5;color:#DCD7EA}

/* ---------- Recorrido por el predio: tocás un lugar (o se recorre solo) y la "cámara" vuela sobre la maqueta en 3D ---------- */
.escenario{position:relative;height:640px;overflow:hidden;border-radius:26px;background:#0E0C15;perspective:1100px;color:#FFFFFF}
.camara{position:absolute;left:50%;top:50%;width:700px;height:720px;margin:-360px 0 0 -350px;transform-style:preserve-3d;transition:transform 1.3s cubic-bezier(.65,0,.35,1)}
.p0{transform:translateY(40px)  scale(.5)  rotateX(56deg) rotateZ(-28deg) translate(-20px,-40px)}
.p1{transform:translateY(-40px) scale(1.25) rotateX(56deg) rotateZ(-28deg) translate(-250px,-100px)}
.p2{transform:translateY(-40px) scale(1.25) rotateX(56deg) rotateZ(-28deg) translate(-250px,100px)}
.p3{transform:translateY(-40px) scale(1.25) rotateX(56deg) rotateZ(-28deg) translate(145px,-250px)}
.p4{transform:translateY(-40px) scale(1.25) rotateX(56deg) rotateZ(-28deg) translate(10px,-250px)}
.camara *{transform-style:preserve-3d}
.abs{position:absolute}
.piso{position:absolute;inset:0;border-radius:34px;background:#15121E;background-image:linear-gradient(rgba(201,182,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(201,182,255,.05) 1px,transparent 1px);background-size:50px 50px}
.cesped{position:absolute;left:190px;top:90px;width:320px;height:430px;border-radius:6px;background:repeating-linear-gradient(0deg,#1F5A3A 0 43px,#236541 43px 86px);box-shadow:0 0 0 3px rgba(255,255,255,.85) inset}
/* cajas 3D: un techo arriba y cuatro paredes paradas */
.caja{position:absolute}
.caja i{position:absolute;display:block;backface-visibility:visible;transition:background-color .6s ease .5s}
.caja .techo{inset:0;background:#2B2540;border-radius:3px;box-shadow:0 0 0 1px rgba(201,182,255,.35) inset}
.caja .pn,.caja .ps{left:0;width:100%;transform-origin:top;transform:rotateX(90deg);background:#1E1A2D}
.caja .pn{top:0}.caja .ps{top:100%;background:#262036}
.caja .pe,.caja .po{top:0;height:100%;transform-origin:left;transform:rotateY(-90deg);background:#221D33}
.caja .po{left:0}.caja .pe{left:100%;background:#1B1729}
.caja.activa .techo{background:#7B3FE4;box-shadow:0 0 0 1px #C9B6FF inset,0 0 40px rgba(123,63,228,.8)}
.caja.activa .pn,.caja.activa .ps{background:#5B2BB0}
.caja.activa .pe,.caja.activa .po{background:#4E2499}
.arco{position:absolute;left:172px;width:356px;height:120px;transform-origin:top;transform:rotateX(90deg)}
.muro{position:absolute;background:#6B3A2E;transform-origin:top;transform:rotateX(90deg)}
.muroV{position:absolute;background:#5E3328;transform-origin:left;transform:rotateY(-90deg)}
.poste{position:absolute;width:3px;height:130px;background:#8C86A3;transform-origin:top;transform:rotateX(90deg)}
.luz{position:absolute;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:#FFFFFF;box-shadow:0 0 18px 8px rgba(255,255,255,.7)}
.arbol{position:absolute;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:#1E4A30;box-shadow:inset -8px -10px 0 rgba(0,0,0,.25)}
.sombra{position:absolute;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;background:rgba(0,0,0,.4);filter:blur(4px)}
.cartel{position:absolute;margin:-18px 0 0 -60px;width:120px;text-align:center}
.cartel span{display:inline-block;padding:7px 12px;border-radius:999px;background:rgba(14,12,21,.85);border:1px solid rgba(201,182,255,.4);font-weight:700;font-size:15px;white-space:nowrap;transition:background-color .5s ease .5s,color .5s ease .5s}
.cartel.activa span{background:#C9B6FF;color:#1A1033;border-color:#C9B6FF}
.cartel .cartel-entrada{background:transparent;border-color:transparent;color:#B8B3C7;font-size:13px}
.lugares{position:absolute;left:0;right:0;top:12px;z-index:3;display:flex;gap:6px;overflow-x:auto;padding:0 12px;scrollbar-width:none}
.lugares::-webkit-scrollbar{display:none}
.lugares button{flex:none;min-height:44px;padding:0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(14,12,21,.7);color:#FFFFFF;font-weight:700;font-size:14px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);cursor:pointer}
.lugares button[aria-pressed="true"]{background:#C9B6FF;border-color:#C9B6FF;color:#1A1033}
.tarjeta{position:absolute;left:12px;right:12px;bottom:12px;border-radius:22px;overflow:hidden;background:rgba(14,12,21,.88);border:1px solid rgba(201,182,255,.25);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);opacity:0;transform:translateY(30px);transition:opacity .45s ease,transform .45s ease;pointer-events:none}
.tarjeta.visible{opacity:1;transform:none;transition-delay:.7s}
.tarjeta .media{position:relative;height:170px}
.tarjeta .txt{padding:12px 16px 14px}
.tarjeta .num{font-size:11.5px;font-weight:700;letter-spacing:1.5px;color:#C9B6FF}
.tarjeta h3{margin:2px 0 3px;font-family:var(--display);font-weight:400;font-size:calc(32px * var(--esc));line-height:.95;text-transform:uppercase}
.tarjeta p{margin:0;font-size:15px;line-height:1.4;color:#DCD7EA}
.intro-recorrido{position:absolute;left:18px;right:18px;bottom:20px;transition:opacity .4s}
.intro-1{display:block;font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#C9B6FF}
.intro-2{display:block;margin-top:4px;font-size:15px;color:#B8B3C7}
.foto-real{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* ---------- Tres pasos: tarjetas que se apilan al bajar ---------- */
.pasos{display:flex;flex-direction:column;gap:18px}
.paso{position:sticky;min-height:230px;padding:22px;box-sizing:border-box;border-radius:24px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 -8px 24px rgba(0,0,0,.3)}
.paso-n{font-family:var(--display);font-size:calc(84px * var(--esc));line-height:.8}
.paso b{display:block;font-size:22px;line-height:1.15}
.paso b + span{display:block;margin-top:6px;font-size:15px;line-height:1.45}

/* ---------- Cumples y eventos ---------- */
.eventos{margin:60px 20px 0;border-radius:24px;overflow:hidden;background:#7B3FE4;color:#FFFFFF}
.eventos-foto{position:relative;height:190px;overflow:hidden}
.eventos-par{position:absolute;left:0;right:0;top:-60px;bottom:-60px}
.eventos-txt{padding:22px 20px 24px}
.eventos-txt p{margin:10px 0 18px;font-size:15px;line-height:1.5}

/* ---------- Para el grupo: dominadas y sorteo de equipos ---------- */
.pestanas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;padding:4px;border-radius:16px;background:var(--sup);border:1px solid var(--borde)}
.pestanas button{min-height:46px;border:0;border-radius:12px;background:transparent;color:var(--suave);font-weight:700;font-size:15px;cursor:pointer;transition:background-color .2s ease,color .2s ease}
.pestanas button[aria-selected="true"]{background:#C9B6FF;color:#1A1033}
.grupo-txt{margin:18px 0 0;font-size:15px;line-height:1.5;color:var(--suave)}
.juego{position:relative;height:380px;margin-top:20px;border-radius:24px;overflow:hidden;background:#100E17;border:1px solid var(--borde);touch-action:manipulation;user-select:none;-webkit-user-select:none}
.juego-piso{position:absolute;left:0;right:0;bottom:0;height:34px;background:repeating-linear-gradient(90deg,#1F5A3A 0 34px,#236541 34px 68px);box-shadow:0 -2px 0 rgba(255,255,255,.8)}
.juego-cuenta{position:absolute;left:0;right:0;top:22px;text-align:center;font-family:var(--display);font-size:calc(96px * var(--esc));line-height:.8;color:rgba(201,182,255,.9);font-variant-numeric:tabular-nums}
.juego-record{position:absolute;left:0;right:0;top:108px;text-align:center;font-size:13px;color:#8C86A3}
.pelota-juego{position:absolute;left:0;bottom:34px;width:58px;height:58px;padding:0;border:0;background:none;cursor:pointer;touch-action:none;will-change:transform}
.pelota-juego::before{content:"";position:absolute;inset:-14px}
.pelota-juego svg{width:100%;height:100%;filter:drop-shadow(0 6px 10px rgba(0,0,0,.5))}
.juego-aviso{position:absolute;left:20px;right:20px;top:150px;text-align:center;font-size:15px;color:#B8B3C7;pointer-events:none}
.juego-fin{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px;background:rgba(11,10,16,.84);text-align:center;animation:aviso .35s ease-out both}
.juego-fin b{font-family:var(--display);font-weight:400;font-size:calc(44px * var(--esc));line-height:.95;text-transform:uppercase;color:#FFFFFF}
.juego-fin span{color:#B8B3C7}
.juego-fin button{min-height:48px;padding:0 20px;border-radius:999px;border:0;font-weight:700;font-size:15px;cursor:pointer}
.sorteo-in{display:block;width:100%;box-sizing:border-box;min-height:120px;margin-top:14px;padding:12px 14px;border-radius:14px;border:1px solid var(--borde2);background:var(--sup);color:var(--tinta);font:inherit;font-size:16px;line-height:1.45;resize:vertical}
.sorteo-pie{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:6px;font-size:13px;color:var(--tenue)}
.sorteo-pie button{min-height:44px;padding:0 2px;border:0;background:none;color:var(--acento-txt);font-weight:700;font-size:14px;cursor:pointer}
.sorteo-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:54px;margin-top:6px;border:0;border-radius:14px;background:#C9B6FF;color:#1A1033;font-weight:700;font-size:16px;cursor:pointer}
.sorteo-aviso{color:var(--tinta);font-weight:700}
.mazo{position:relative;height:150px;margin-top:18px}
.mazo i{position:absolute;left:50%;top:18px;width:84px;height:112px;margin-left:-42px;box-sizing:border-box;border-radius:12px;background:#7B3FE4;border:2px solid #C9B6FF;box-shadow:0 10px 24px rgba(0,0,0,.4);animation:barajar .26s ease-in-out infinite alternate}
.mazo i:nth-child(2){background:#FFFFFF;border-color:#FFFFFF;animation-direction:alternate-reverse}
.mazo i:nth-child(3){animation-delay:.13s}
.equipos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:18px}
.eq{display:flex;flex-direction:column;gap:6px;padding:14px 12px;border-radius:18px}
.eq b{margin-bottom:4px;font-family:var(--display);font-weight:400;font-size:calc(28px * var(--esc));line-height:1;text-transform:uppercase}
.eq-violeta{background:#7B3FE4;color:#FFFFFF}
.eq-blanco{background:#FFFFFF;color:#16112A;box-shadow:inset 0 0 0 1px var(--borde2)}
.carta{display:block;padding:8px 10px;border-radius:10px;font-weight:700;font-size:15px;overflow-wrap:anywhere}
.eq-violeta .carta{background:rgba(255,255,255,.16);animation:repartirA .45s cubic-bezier(.2,.8,.2,1) both}
.eq-blanco .carta{background:#EFEAFB;animation:repartirB .45s cubic-bezier(.2,.8,.2,1) both}
.sorteo-sobra{margin:10px 0 0;font-size:13.5px;color:var(--suave)}
.btn-compartir{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:52px;margin-top:12px;border-radius:14px;border:1px solid var(--borde2);background:transparent;color:var(--tinta);font-weight:700;font-size:15px;cursor:pointer}

/* ---------- Preguntas, Instagram, mapa, instalar, cierre y pie ---------- */
.pregunta{border-bottom:1px solid var(--borde)}
.pregunta summary{padding:16px 0;font-weight:700;font-size:16px;cursor:pointer;min-height:24px}
.pregunta p{margin:0 0 16px;font-size:15px;line-height:1.5;color:var(--suave)}
.insta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.insta img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px}
.mapa{position:relative;height:260px;border-radius:22px;overflow:hidden;background:var(--sup);border:1px solid var(--borde)}
.mapa iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.direccion{margin:14px 0 12px;font-size:16px}
.instalar-bloque{padding-top:50px;padding-bottom:0}
.instalar{display:flex;align-items:center;gap:16px;padding:18px;border-radius:22px;border:1px dashed var(--libre-borde)}
.instalar-txt{display:flex;flex-direction:column;gap:8px;font-size:15px;line-height:1.4}
.instalar-ayuda{font-size:13.5px;color:var(--suave)}
.cierre{margin:70px 20px 0;padding:34px 22px;border-radius:28px;background:#C9B6FF;color:#1A1033;text-align:center}
.cierre p{margin:12px 0 20px;font-size:16px}
.cierre-btn{min-height:56px;background:#1A1033;color:#FFFFFF;font-size:17px}
.pie{margin-top:50px;padding:30px 20px 110px;border-top:1px solid var(--borde);display:flex;flex-direction:column;gap:14px;overflow:hidden}
.pie-links{display:flex;gap:8px}
.pie-links a{flex:1;display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:14px;border:1px solid var(--borde2);color:var(--tinta);font-weight:600;font-size:14px;text-decoration:none}
.denk{margin-top:16px;font-family:var(--display);font-size:calc(150px * var(--esc));line-height:.8;text-transform:uppercase;color:#7B3FE4}

/* ---------- La barra de abajo: escondida hasta que la grilla de horas queda atrás; se va cuando llega el cierre ---------- */
.flotante{position:fixed;left:max(16px,calc(50% - 224px));right:max(16px,calc(50% - 224px));bottom:max(16px,env(safe-area-inset-bottom));z-index:6;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:62px;padding:8px 8px 8px 20px;box-sizing:border-box;border:0;border-radius:999px;background:#C9B6FF;color:#1A1033;text-align:left;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.35);transform:translateY(140%);opacity:0;transition:transform .4s cubic-bezier(.2,.8,.2,1),opacity .25s ease}
.flotante[data-ver="1"]{transform:none;opacity:1}
.flotante small{display:block;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.7}
.flotante b{display:block;font-size:17px;white-space:nowrap}
.flotante-btn{flex:none;display:flex;align-items:center;gap:6px;min-height:46px;padding:0 16px;border-radius:999px;background:#1A1033;color:#FFFFFF;font-weight:700;font-size:15px}
/* La pelota que baja por el borde a medida que se scrollea */
.pelota-baja{position:fixed;left:max(3px,calc(50% - 237px));top:76px;z-index:6;width:16px;height:16px;pointer-events:none;display:none;filter:drop-shadow(0 0 6px rgba(201,182,255,.75))}

/* ---------- La hoja del pedido ---------- */
.hoja-fondo{position:fixed;inset:0;z-index:10;width:100%;border:0;background:rgba(5,4,10,.6);cursor:pointer;animation:fundido .2s both}
.hoja{position:fixed;left:0;right:0;bottom:0;z-index:11;max-width:480px;max-height:92vh;margin:0 auto;overflow-y:auto;overscroll-behavior:contain;padding:10px 20px max(24px,env(safe-area-inset-bottom));box-sizing:border-box;border-radius:26px 26px 0 0;background:var(--sup);border-top:1px solid var(--libre-borde);color:var(--tinta);animation:subir .28s cubic-bezier(.2,.8,.2,1) both}
.hoja-asa{width:42px;height:5px;margin:0 auto 16px;border-radius:3px;background:var(--borde2)}
.hoja-tit{font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--acento-txt)}
.hoja-fila{display:flex;justify-content:space-between;align-items:baseline;margin-top:4px}
.hoja-hora{font-family:var(--display);font-size:calc(44px * var(--esc));line-height:1;text-transform:uppercase}
.hoja-precio{font-weight:700;font-size:20px}
.hoja-dia{display:block;margin-top:2px;font-size:15px;color:var(--suave)}
/* ¿Cuánto pone cada uno? */
.vaquita{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding:12px 14px;border-radius:14px;background:var(--fondo);border:1px solid var(--borde)}
.vaquita small{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tenue)}
.vaquita b{font-family:var(--display);font-weight:400;font-size:calc(30px * var(--esc));line-height:1}
.contador-j{display:flex;align-items:center;gap:6px}
.contador-j button{width:44px;height:44px;border-radius:12px;border:1px solid var(--borde2);background:var(--sup);color:var(--tinta);font-size:20px;font-weight:700;cursor:pointer}
.contador-j span{min-width:30px;text-align:center;font-family:var(--display);font-size:calc(26px * var(--esc))}
.equipo-lbl{display:block;margin-top:14px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tenue)}
.equipo-in{width:100%;box-sizing:border-box;min-height:46px;margin-top:6px;padding:0 14px;border-radius:12px;border:1px solid var(--borde2);background:var(--fondo);color:var(--tinta);font:inherit;font-size:16px}
/* La figurita del equipo */
.figu-mini{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;align-items:center;margin-top:10px;padding:8px;border-radius:12px;background:#FFFFFF;color:#1A1033;transform:rotate(-1.5deg);box-shadow:0 8px 22px rgba(0,0,0,.35);animation:aviso .3s ease-out both}
.figu-mini img{width:64px;height:76px;object-fit:cover;border-radius:6px;background:#0B0A10}
.figu-mini small{display:block;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#7B3FE4}
.figu-mini b{display:block;font-family:var(--display);font-weight:400;font-size:calc(26px * var(--esc));line-height:.95;text-transform:uppercase;overflow-wrap:anywhere}
.figu-mini span{display:block;margin-top:2px;font-size:12px;color:#4E4766}
.hoja-nota{margin:12px 0 16px;font-size:13.5px;line-height:1.45;color:var(--suave)}
.btn-wa{display:flex;align-items:center;justify-content:center;gap:10px;min-height:56px;border-radius:14px;background:#25D366;color:#0B2A17;font-weight:700;font-size:17px;text-decoration:none}
.btn-texto{display:block;width:100%;min-height:48px;margin-top:8px;border:0;border-radius:14px;background:transparent;color:var(--acento-txt);font-weight:600;font-size:15px;cursor:pointer}
html.con-hoja{overflow:hidden}

/* ---------- ¡GOL! al mandar el pedido ---------- */
.gol{position:fixed;inset:0;z-index:30;pointer-events:none;animation:golFondo 1.9s ease both}
.gol-escena{position:absolute;left:50%;top:50%;width:390px;height:844px;margin:-422px 0 0 -195px}
.gol-arco{position:absolute;left:95px;top:300px;width:200px;height:110px;border:4px solid #FFFFFF;border-bottom:0;box-sizing:border-box;background:repeating-linear-gradient(0deg,rgba(255,255,255,.25) 0 2px,transparent 2px 14px),repeating-linear-gradient(90deg,rgba(255,255,255,.25) 0 2px,transparent 2px 14px);transform-origin:50% 0;animation:red 1.9s ease both}
.gol-pelota{position:absolute;left:180px;top:700px;width:30px;height:30px;animation:tiro .65s cubic-bezier(.3,.1,.4,1) .1s both}
.gol-txt{position:absolute;left:0;right:0;top:430px;text-align:center;font-family:var(--display);font-size:calc(120px * var(--esc));line-height:.8;color:#FFFFFF;text-shadow:0 0 40px rgba(123,63,228,.9);animation:golTxt 1.9s cubic-bezier(.2,1.6,.4,1) both}
.papelito{position:absolute;left:190px;top:360px;width:9px;height:14px;border-radius:2px;animation:1.5s cubic-bezier(.2,.6,.4,1) .55s both}
.pp1{background:#C9B6FF;animation-name:pp1}.pp2{background:#4ADE80;animation-name:pp2}.pp3{background:#FFFFFF;animation-name:pp3}
.pp4{background:#7B3FE4;animation-name:pp4}.pp5{background:#C9B6FF;animation-name:pp5}.pp6{background:#4ADE80;animation-name:pp6}
.pp7{background:#FFFFFF;animation-name:pp7}.pp8{background:#7B3FE4;animation-name:pp8}

/* ---------- Animaciones ---------- */
@keyframes aguaEntra{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:none}}
@keyframes neonPrende{0%{opacity:0}8%{opacity:.75}12%{opacity:.04}20%{opacity:.85}24%{opacity:.12}34%{opacity:.9}38%{opacity:.4}50%,100%{opacity:.66}}
@keyframes neonZumba{0%,46%,54%,100%{opacity:.66}48%{opacity:.34}50%{opacity:.7}52%{opacity:.45}}
@keyframes vivo{0%{box-shadow:0 0 0 0 rgba(255,77,94,.65)}100%{box-shadow:0 0 0 8px rgba(255,77,94,0)}}
@keyframes gota{0%{transform:translateY(-3px);opacity:0}30%{opacity:1}100%{transform:translateY(5px);opacity:0}}
@keyframes rayos{to{transform:rotate(360deg)}}
@keyframes solLate{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes pocas{0%{box-shadow:0 0 0 0 rgba(201,182,255,.7)}100%{box-shadow:0 0 0 8px rgba(201,182,255,0)}}
@keyframes latido{0%,100%{box-shadow:0 0 0 0 rgba(74,222,128,.55)}50%{box-shadow:0 0 0 7px rgba(74,222,128,0)}}
@keyframes barajar{from{transform:translateX(-36px) rotate(-9deg)}to{transform:translateX(36px) rotate(9deg)}}
@keyframes repartirA{from{opacity:0;transform:translate(90px,-120px) rotate(14deg) scale(.8)}to{opacity:1;transform:none}}
@keyframes repartirB{from{opacity:0;transform:translate(-90px,-120px) rotate(-14deg) scale(.8)}to{opacity:1;transform:none}}
@keyframes niebla{from{transform:translateX(-30px) scale(1)}to{transform:translateX(40px) scale(1.2)}}
@keyframes lineaSube{from{transform:translateY(105%)}to{transform:none}}
@keyframes golFondo{0%{background:rgba(9,8,13,0)}15%,75%{background:rgba(9,8,13,.72)}100%{background:rgba(9,8,13,0)}}
@keyframes red{0%,30%{transform:none;opacity:0}35%{opacity:1}45%{transform:scaleY(1.12) scaleX(.97)}55%{transform:scaleY(.96)}65%,85%{transform:none;opacity:1}100%{opacity:0}}
@keyframes tiro{from{transform:translate(0,0) scale(1.4) rotate(0deg)}to{transform:translate(8px,-330px) scale(.7) rotate(720deg)}}
@keyframes golTxt{0%,38%{transform:scale(.2);opacity:0}52%{transform:scale(1.1);opacity:1}70%,85%{transform:scale(1);opacity:1}100%{transform:scale(1.05);opacity:0}}
@keyframes pp1{to{transform:translate(-150px,-170px) rotate(380deg);opacity:0}}
@keyframes pp2{to{transform:translate(140px,-190px) rotate(-420deg);opacity:0}}
@keyframes pp3{to{transform:translate(-90px,-250px) rotate(300deg);opacity:0}}
@keyframes pp4{to{transform:translate(95px,-240px) rotate(-280deg);opacity:0}}
@keyframes pp5{to{transform:translate(-170px,40px) rotate(500deg);opacity:0}}
@keyframes pp6{to{transform:translate(170px,60px) rotate(-460deg);opacity:0}}
@keyframes pp7{to{transform:translate(-40px,-280px) rotate(260deg);opacity:0}}
@keyframes pp8{to{transform:translate(50px,110px) rotate(-340deg);opacity:0}}
@keyframes aviso{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes prenderLampara{0%{opacity:.12;box-shadow:none}30%{opacity:1}45%{opacity:.25;box-shadow:none}60%{opacity:1}100%{opacity:1;box-shadow:0 0 22px 8px rgba(255,255,255,.6)}}
@keyframes hazEntra{from{opacity:0}to{opacity:1}}
@keyframes mecer{from{transform:rotate(-2.5deg)}to{transform:rotate(2.5deg)}}
@keyframes letras{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes subirPanel{from{opacity:0;transform:translateY(70px)}to{opacity:1;transform:none}}
@keyframes alejar{to{transform:translateY(240px) scale(.82);opacity:0}}
@keyframes cabeceraScroll{from{background-color:transparent;color:#FFFFFF}to{background-color:var(--cabecera);color:var(--tinta)}}
@keyframes logoAparece{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes subir{from{transform:translateY(100%)}to{transform:none}}
@keyframes fundido{from{opacity:0}to{opacity:1}}
@keyframes entrar{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
@keyframes zoomLento{from{transform:scale(1.18)}to{transform:scale(1.3)}}
@keyframes aparecer{from{opacity:0;transform:translateY(48px)}to{opacity:1;transform:none}}
@keyframes cortina{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes paralaje{from{transform:translateY(-70px)}to{transform:translateY(70px)}}
@keyframes deslizar{from{transform:translateX(-45%)}to{transform:translateX(0)}}
@keyframes encogerTarjeta{to{transform:scale(.92);filter:brightness(.6)}}
@keyframes esqueleto{from{opacity:.45}to{opacity:.9}}
@keyframes aIzq{from{transform:translateX(5%)}to{transform:translateX(-38%)}}
@keyframes aDer{from{transform:translateX(-42%)}to{transform:translateX(2%)}}
@keyframes rueda{from{transform:translateY(0) rotate(0deg)}to{transform:translateY(calc(100vh - 110px)) rotate(2160deg)}}

/* Lo que se mueve con el scroll (en los navegadores que lo saben hacer; en los otros todo se ve quieto y completo) */
@supports (animation-timeline: view()){
  .rev{animation:aparecer linear both;animation-timeline:view();animation-range:entry 5% cover 28%}
  .cortina{animation:cortina linear both;animation-timeline:view();animation-range:entry 10% cover 35%}
  .par{animation:paralaje linear both;animation-timeline:view();animation-range:cover}
  .escena{animation:alejar linear both;animation-timeline:scroll(root);animation-range:0px 560px}
  .cabecera{animation:cabeceraScroll linear both;animation-timeline:scroll(root);animation-range:640px 760px}
  .logo-mini{animation:logoAparece linear both;animation-timeline:scroll(root);animation-range:560px 700px}
  .denk{animation:deslizar linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
  /* Las palabras que se cruzan: cada fila se mueve para un lado distinto según cuánto bajaste */
  .cruce .c1{animation:aIzq linear both;animation-timeline:view();animation-range:cover}
  .cruce .c2{animation:aDer linear both;animation-timeline:view();animation-range:cover}
  .cruce .c3{animation:aIzq linear both;animation-timeline:view();animation-range:cover}
  .apilar{animation:encogerTarjeta linear both;animation-timeline:view();animation-range:exit-crossing 0% exit-crossing 100%}
  .pelota-baja{display:block;animation:rueda linear both;animation-timeline:scroll(root)}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  html{scroll-behavior:auto}
  .pelota-baja{display:none}
}

/* ---------- Reservar desde la página ---------- */
.horas-elegir{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:14px}
.horas-elegir button{min-height:44px;border-radius:12px;border:1px solid var(--borde2);background:transparent;color:var(--tinta);font-weight:700;font-size:15px;cursor:pointer}
.horas-elegir button[aria-pressed="true"]{background:#C9B6FF;border-color:#C9B6FF;color:#1A1033}
.horas-elegir button:disabled{opacity:.4;cursor:not-allowed}
.trampa{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.hoja-error{margin:0 0 10px;font-size:14.5px;line-height:1.4;font-weight:600;color:#FF8A95}
.hoja-error:empty{display:none}
.dia .hoja-error{color:#B4232F}
.btn-reservar{display:flex;align-items:center;justify-content:center;width:100%;min-height:56px;border:0;border-radius:14px;background:#C9B6FF;color:#1A1033;font-weight:800;font-size:17px;cursor:pointer}
.btn-reservar:disabled{opacity:.6;cursor:progress}
.sena-caja{display:flex;flex-direction:column;gap:8px;margin-top:16px;padding:14px;border-radius:16px;background:var(--fondo);border:1px solid var(--libre-borde);font-size:15px;line-height:1.45}
.sena-caja > b{font-size:16px}
.sena-caja .alias{font-family:ui-monospace,Consolas,monospace;font-size:15px;color:var(--acento-txt)}
.btn-copiar{align-self:flex-start;min-height:44px;padding:0 14px;border-radius:12px;border:1px solid var(--borde2);background:transparent;color:var(--tinta);font-weight:700;cursor:pointer}
.mi-turno{display:flex;flex-direction:column;gap:4px;margin:0 0 16px;padding:14px 16px;border-radius:18px;background:linear-gradient(160deg,rgba(123,63,228,.35),var(--sup) 70%);border:1px solid rgba(201,182,255,.45);animation:aviso .4s ease-out both}
.mi-turno-tit{font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--acento-txt)}
.mi-turno b{font-size:17px}
.mi-turno-ok{font-size:14px;color:#4ADE80}
.dia .mi-turno-ok{color:#15803D}
.mi-turno-falta{font-size:14px;color:var(--suave)}
.mi-turno-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.mi-turno-confirmar{margin-top:8px;padding-top:10px;border-top:1px solid var(--borde);font-size:14px;line-height:1.45;color:var(--suave)}
.mi-turno-confirmar p{margin:0}
.sena-caja .btn-wa{gap:8px;min-height:52px;padding:0 12px;font-size:15px;text-align:center}