/* ==========================================================================
   New Uthopia 80 · hoja de estilos principal
   Synthwave · neón · VHS · arcade. Mobile first. Sin dependencias.
   ========================================================================== */

/* ---------- Fuentes propias (OFL) ---------- */
@font-face { font-family: 'Sedgwick Ave Display'; src: url('../fonts/SedgwickAveDisplay-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Bebas Neue'; src: url('../fonts/BebasNeue-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('../fonts/SpaceGrotesk-Variable.ttf') format('truetype'); font-weight: 300 700; font-display: swap; }
@font-face { font-family: 'VT323'; src: url('../fonts/VT323-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Monoton'; src: url('../fonts/Monoton-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Neonderthaw'; src: url('../fonts/Neonderthaw-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Orbitron'; src: url('../fonts/Orbitron-Variable.ttf') format('truetype'); font-weight: 400 900; font-display: swap; }
@font-face { font-family: 'Press Start 2P'; src: url('../fonts/PressStart2P-Regular.ttf') format('truetype'); font-display: swap; }
/* Mientras llega VT323 (o si no llega), una monoespaciada del sistema con su mismo ancho: las horas no se salen de la tarjeta */
@font-face { font-family: 'VT323 reserva'; src: local('Courier New'), local('CourierNewPSMT'), local('Courier'), local('Liberation Mono'), local('Cousine'), local('DejaVu Sans Mono'), local('Roboto Mono'), local('Droid Sans Mono'); size-adjust: 67%; }

/* ---------- Tokens ---------- */
:root {
  --bg: #0A0612;
  --bg-2: #120a22;
  --bg-3: #1b0f31;
  --panel: rgba(27, 14, 48, .72);
  --morado: #7B2CBF;
  --morado-2: #9D4EDD;
  --morado-osc: #3C096C;
  --magenta: #FF2E97;
  --magenta-osc: #D1006B;
  --rosa: #FF4FD8;
  --cian: #00E5FF;
  --amarillo: #FFE600;
  --naranja: #FF8A00;
  --verde: #39FF88;
  --texto: #F4EDFF;
  --texto-2: #CDBFE6;
  --texto-3: #A495C2;
  --borde: rgba(199, 125, 255, .26);
  --f-logo: 'Sedgwick Ave Display', 'Permanent Marker', 'Segoe Print', cursive;
  --f-display: 'Bebas Neue', 'Oswald', Impact, 'Arial Narrow', sans-serif;
  --f-body: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-vhs: 'VT323', 'VT323 reserva', ui-monospace, 'Courier New', monospace;
  --f-neon: 'Brush Script MT', cursive; /* Neonderthaw llega con .fuente-neon (ver app.js) */
  --f-num: 'Orbitron', 'Bebas Neue', sans-serif;
  --f-mono: 'Monoton', 'Bebas Neue', sans-serif;
  --f-arcade: 'Press Start 2P', ui-monospace, monospace;
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1240px;
  --nav-h: 68px;
  --radio: 22px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: dark;
}

html.fuente-neon, html.no-js { --f-neon: 'Neonderthaw', 'Brush Script MT', cursive; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 12px); }
html:not(.reduce) { scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; scroll-behavior: auto; }
.lenis.lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent], .lenis [data-lenis-prevent-horizontal] { overscroll-behavior: contain; }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--texto);
  font: 400 1.0625rem/1.6 var(--f-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip; text-rendering: optimizeLegibility;
}
body::before {
  content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(1100px 620px at 85% -8%, rgba(123, 44, 191, .28), transparent 62%),
    radial-gradient(900px 560px at -12% 38%, rgba(255, 46, 151, .12), transparent 62%),
    radial-gradient(800px 520px at 110% 90%, rgba(0, 229, 255, .08), transparent 60%),
    var(--bg);
}
body::after { /* grano de cinta */
  content: ''; position: fixed; inset: -50%; z-index: 9000; pointer-events: none;
  background: url('../img/ruido.png'); opacity: .055; animation: grano 1.2s steps(5) infinite;
}
@keyframes grano { 0% { transform: translate(0, 0); } 20% { transform: translate(-6%, 4%); } 40% { transform: translate(5%, -7%); } 60% { transform: translate(-3%, 8%); } 80% { transform: translate(7%, 2%); } 100% { transform: translate(0, 0); } }
img, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--cian); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #fff; }
p, h1, h2, h3, h4, ul, ol, figure, address { margin: 0; }
address { font-style: normal; }
ul, ol { padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--magenta); color: #fff; }
[hidden] { display: none !important; }
.js .no-js-only { display: none !important; }
.no-js .js-only { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 1.2em; height: 1.2em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.saltar { position: fixed; left: 12px; top: -80px; z-index: 10000; padding: 12px 18px; border-radius: 10px; background: var(--amarillo); color: #1a0b2e; font-weight: 700; text-decoration: none; transition: top .2s; }
.saltar:focus { top: 12px; }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.sec { position: relative; padding-block: clamp(72px, 9vw, 132px); }

/* ---------- Tipografía de sección ---------- */
.sec__cab { display: grid; gap: 14px; justify-items: center; text-align: center; margin-bottom: clamp(36px, 6vw, 72px); }
.sec__cab--izq { justify-items: start; text-align: left; }
.kicker { display: inline-flex; align-items: center; gap: .55em; font: 400 1.35rem/1 var(--f-vhs); letter-spacing: .14em; text-transform: uppercase; color: var(--cian); text-shadow: 0 0 10px rgba(0, 229, 255, .55); }
.kicker::before { content: '▶'; content: '▶' / ''; font-size: .8em; color: var(--rosa); }
.kicker::after { content: ''; width: .55em; height: 1em; background: var(--cian); animation: cursor 1.1s steps(1) infinite; }
@keyframes cursor { 50% { opacity: 0; } }
.h2 {
  font: 400 clamp(3.1rem, 8.2vw, 7.2rem)/.9 var(--f-display); letter-spacing: .01em; text-transform: uppercase;
  padding-top: .16em; margin-top: -.16em; /* deja sitio a las tildes: el relleno degradado solo pinta dentro de la caja */
  background: linear-gradient(180deg, #ffffff 0%, #f6e1ff 40%, #d9a2ff 49%, #8f3fd6 51%, #ff8fe2 78%, #ffffff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 18px rgba(255, 79, 216, .38)) drop-shadow(0 4px 0 rgba(60, 9, 108, .9));
  text-wrap: balance; padding-bottom: .04em;
}
.h2.is-split { background: none; filter: drop-shadow(0 0 18px rgba(255, 79, 216, .38)) drop-shadow(0 4px 0 rgba(60, 9, 108, .9)); perspective: 600px; }
.h2.is-split .ch { background-image: linear-gradient(180deg, #ffffff 0%, #ffffff 18%, #f6e1ff 48%, #d9a2ff 56%, #8f3fd6 58%, #ff8fe2 82%, #ffffff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding: .16em 0 .04em; margin-top: -.16em; }
.arcade .h2.is-split .ch { background: none; color: var(--amarillo); }
.lead { max-width: 60ch; font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--texto-2); text-wrap: pretty; }

/* ---------- Botones ---------- */
.btn {
  --bx: 0px; --by: 0px;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 48px; padding: 0 1.4em; border-radius: 999px; border: 1.5px solid transparent;
  font: 700 .92rem/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  color: #fff; background: transparent; cursor: pointer; isolation: isolate;
  transform: translate(var(--bx), var(--by)); transition: transform .25s var(--ease), box-shadow .3s, background-color .3s, color .3s, border-color .3s, filter .3s;
}
.btn:hover { color: #fff; }
.btn--primary { background: linear-gradient(95deg, var(--magenta-osc), var(--morado)); box-shadow: 0 0 0 1px rgba(255, 79, 216, .55), 0 10px 30px -8px rgba(255, 46, 151, .65), inset 0 1px 0 rgba(255, 255, 255, .25); }
.btn--primary::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(95deg, #ff2e97, #9d4edd); opacity: 0; transition: opacity .3s; }
.btn--primary:hover { box-shadow: 0 0 0 1px rgba(255, 79, 216, .9), 0 0 28px rgba(255, 46, 151, .75), 0 0 70px rgba(123, 44, 191, .5), inset 0 1px 0 rgba(255, 255, 255, .3); }
.btn--primary:hover::after { opacity: .55; }
.btn--ghost { border-color: rgba(0, 229, 255, .65); color: var(--cian); background: rgba(10, 6, 18, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: inset 0 0 14px rgba(0, 229, 255, .12); }
.btn--ghost:hover { color: #0A0612; background: var(--cian); box-shadow: 0 0 26px rgba(0, 229, 255, .65); }
.btn--icon { width: 48px; padding: 0; border-color: rgba(255, 255, 255, .22); color: var(--texto); background: rgba(255, 255, 255, .04); }
.btn--icon:hover { border-color: var(--rosa); color: var(--rosa); box-shadow: 0 0 20px rgba(255, 79, 216, .45); }
.btn--sm { min-height: 40px; padding: 0 1.05em; font-size: .8rem; }
.btn--xl { min-height: 56px; padding: 0 1.7em; font-size: .98rem; }
.btn--ancho { width: 100%; }
.btn:active { transform: translate(var(--bx), var(--by)) scale(.97); }

/* ---------- Intro VHS ---------- */
.intro { display: none; }
.intro-on .intro {
  position: fixed; inset: 0; z-index: 9800; display: grid; place-items: center; overflow: hidden;
  background: #001a9e; color: #fff; font-family: var(--f-vhs); cursor: pointer;
  animation: intro-fondo 1.5s steps(1) forwards, intro-fuera .4s .0s var(--ease) forwards;
  animation-delay: 0s, 1.1s; /* 1,5 s en total (boot.js la quita a los 1,5 s aunque falle algo) */
}
.intro-on body { overflow: hidden; }
@keyframes intro-fondo { 0% { background: #001a9e; } 14% { background: #05030a; } 100% { background: #05030a; } }
@keyframes intro-fuera { 0% { clip-path: inset(0 0 0 0); filter: brightness(1); } 55% { clip-path: inset(49.6% 0 49.6% 0); filter: brightness(2.5); } 100% { clip-path: inset(50% 50% 50% 50%); opacity: 0; visibility: hidden; } }
.intro__ruido { position: absolute; inset: -50%; background: url('../img/ruido.png'); opacity: 0; animation: grano .3s steps(3) infinite, intro-ruido 1.5s forwards; }
@keyframes intro-ruido { 0%, 12% { opacity: 0; } 16% { opacity: .9; } 40% { opacity: .55; } 70% { opacity: .25; } 100% { opacity: .15; } }
.intro__bandas { position: absolute; inset: 0; pointer-events: none; } /* fuera de la rejilla: el logo queda centrado */
.intro__bandas i { position: absolute; top: 0; left: 0; right: 0; height: 14px; will-change: transform; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .55) 40%, rgba(255, 255, 255, .15) 60%, transparent); filter: blur(1px); opacity: 0; animation: banda 1.1s linear .3s infinite; }
.intro__bandas i:nth-child(2) { height: 40px; animation-duration: 1.6s; animation-delay: .45s; opacity: .4; }
.intro__bandas i:nth-child(3) { height: 6px; animation-duration: .8s; animation-delay: .6s; }
@keyframes banda { 0% { transform: translateY(-10vh); opacity: .8; } 100% { transform: translateY(110vh); opacity: .8; } }
.intro__osd { position: absolute; font-size: clamp(1.6rem, 3vw, 2.4rem); letter-spacing: .08em; text-shadow: 2px 2px 0 rgba(0, 0, 0, .5); }
.intro__osd--play { top: 7%; left: 6%; }
.intro__osd--play span { animation: cursor .5s steps(1) infinite; }
.intro__osd--tc { bottom: 8%; left: 6%; }
.intro__saltar { position: absolute; bottom: 8%; right: 6%; font-size: 1.2rem; letter-spacing: .1em; opacity: .7; }
.intro__logo { position: relative; display: flex; align-items: flex-end; gap: .1em; opacity: 0; animation: intro-logo 1s .3s steps(1) forwards; }
.intro__new { position: absolute; left: -.2em; top: -.55em; font: 400 clamp(1.6rem, 4vw, 3rem)/1 var(--f-display); transform: rotate(-12deg); color: #fff; }
.intro__nombre { position: relative; font: 400 clamp(3.6rem, 13vw, 9.5rem)/1 var(--f-logo); color: #d38cff; text-shadow: -3px 0 rgba(255, 0, 80, .85), 3px 0 rgba(0, 229, 255, .85), 0 0 30px rgba(255, 79, 216, .7); animation: rgb 0.18s steps(2) infinite; }
.intro__80 { font: 400 clamp(3.6rem, 13vw, 9.5rem)/1 var(--f-logo); color: #fff; text-shadow: -3px 0 rgba(255, 0, 80, .8), 3px 0 rgba(0, 229, 255, .8); }
@keyframes intro-logo { 0% { opacity: 1; transform: translateX(-8px) skewX(-10deg); } 10% { opacity: .3; transform: translateX(10px); } 18% { opacity: 1; transform: none; } 60% { opacity: 1; transform: none; } 66% { transform: translateX(-14px) skewX(12deg); } 72% { transform: none; } 100% { opacity: 1; } }
@keyframes rgb { 0% { text-shadow: -3px 0 rgba(255, 0, 80, .85), 3px 0 rgba(0, 229, 255, .85), 0 0 30px rgba(255, 79, 216, .7); } 100% { text-shadow: -6px 1px rgba(255, 0, 80, .85), 5px -1px rgba(0, 229, 255, .85), 0 0 30px rgba(255, 79, 216, .7); } }
.intro.intro--fin { animation: intro-fuera .4s var(--ease) forwards !important; }
@media (max-width: 600px) {
  .intro__osd { font-size: 1.35rem; }
  .intro__saltar { left: 6%; right: 6%; bottom: 15%; font-size: 1rem; text-align: center; }
}

/* ---------- Navegación ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 900; height: var(--nav-h);
  display: flex; align-items: center; gap: 16px; padding: 0 var(--gutter);
  transition: background-color .35s, box-shadow .35s, transform .4s var(--ease);
}
.nav--solida { background: rgba(10, 6, 18, .78); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); box-shadow: 0 1px 0 rgba(199, 125, 255, .18), 0 10px 30px -18px rgba(0, 0, 0, .8); }
.nav--oculta { transform: translateY(-110%); }
.nav__marca { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: #fff; margin-right: auto; }
.nav__disco { width: 38px; height: 38px; animation: gira 6s linear infinite; filter: drop-shadow(0 0 8px rgba(255, 79, 216, .55)); }
.nav__nombre { font: 400 1.65rem/1 var(--f-logo); background: linear-gradient(180deg, #fff, #d9a2ff 55%, #ff4fd8); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 8px rgba(255, 79, 216, .5)); }
.nav__80 { font: 400 1.25rem/1 var(--f-display); padding: .15em .35em .05em; border-radius: 6px; background: var(--amarillo); color: #1a0b2e; transform: rotate(-6deg); }
.nav__menu { display: none; }
.nav__lista { list-style: none; display: flex; gap: clamp(10px, 1.6vw, 26px); }
.nav__lista a { position: relative; color: var(--texto); text-decoration: none; font: 600 .86rem/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; padding: 8px 0; }
.nav__lista a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, var(--magenta), var(--cian)); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease); box-shadow: 0 0 8px var(--magenta); }
.nav__lista a:hover::after, .nav__lista a[aria-current='true']::after { transform: scaleX(1); transform-origin: left; }
.nav__lista a[aria-current='true'] { color: #fff; text-shadow: 0 0 10px rgba(255, 79, 216, .8); }
.nav__redes { display: flex; gap: 6px; }
.nav__redes a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--texto); }
.nav__redes a:hover { color: var(--rosa); background: rgba(255, 79, 216, .1); }
.nav__boton { position: relative; width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .25); background: rgba(10, 6, 18, .5); display: grid; place-content: center; gap: 5px; z-index: 2; }
.nav__boton span { display: block; width: 20px; height: 2px; border-radius: 2px; background: #fff; transition: transform .35s var(--ease), opacity .2s; }
.nav--abierta .nav__boton span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav--abierta .nav__boton span:nth-child(2) { opacity: 0; }
.nav--abierta .nav__boton span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav__cta { display: none; }
@media (max-width: 1099.98px) {
  .nav--abierta { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nav--abierta .nav__menu {
    position: fixed; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: center; gap: 32px;
    padding: calc(var(--nav-h) + 20px) var(--gutter) 40px; overflow-y: auto;
    background: radial-gradient(circle at 80% 10%, rgba(255, 46, 151, .25), transparent 50%), radial-gradient(circle at 10% 90%, rgba(0, 229, 255, .15), transparent 50%), #0A0612;
    animation: menu-in .4s var(--ease);
  }
  .nav--abierta .nav__lista { flex-direction: column; gap: 6px; }
  .nav--abierta .nav__lista a { font: 400 clamp(2.4rem, 10vw, 3.6rem)/1.05 var(--f-display); letter-spacing: .03em; }
  .nav--abierta .nav__lista li { opacity: 0; animation: entra .5s var(--ease) forwards; animation-delay: calc(var(--i, 0) * 45ms + 80ms); }
  .nav--abierta .nav__redes a { width: 52px; height: 52px; border: 1px solid var(--borde); }
  .nav--abierta .nav__marca { position: relative; z-index: 2; }
  .no-js .nav__menu { display: block; position: absolute; top: var(--nav-h); left: 0; right: 0; overflow-x: auto; padding: 0 var(--gutter) 8px; }
  .no-js .nav { height: auto; min-height: var(--nav-h); flex-wrap: wrap; }
  .no-js .nav__redes { display: none; }
}
.nav--abierta ~ .walk, .nav--abierta ~ .chat { display: none; }
@keyframes menu-in { from { opacity: 0; clip-path: circle(0 at calc(100% - 40px) 34px); } to { opacity: 1; clip-path: circle(150% at calc(100% - 40px) 34px); } }
@media (min-width: 640px) { .nav__cta { display: inline-flex; } }
@media (min-width: 1100px) {
  .nav__menu { display: flex; align-items: center; gap: 18px; }
  .nav__boton { display: none; }
}

/* ---------- Portada ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100vh; min-height: max(100svh, 640px);
  display: grid; place-items: center; text-align: center;
  padding: calc(var(--nav-h) + 28px) var(--gutter) 150px;
}
.hero__fondo { position: absolute; inset: 0; z-index: -1; background: #12062a; }
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .62; filter: saturate(1.3) contrast(1.06); }
.hero__velo { position: absolute; inset: 0; background:
  radial-gradient(ellipse 70% 55% at 50% 42%, rgba(10, 6, 18, .35), transparent 70%),
  linear-gradient(180deg, rgba(10, 6, 18, .82) 0%, rgba(60, 9, 108, .5) 30%, rgba(60, 9, 108, .3) 52%, rgba(10, 6, 18, .55) 70%, rgba(10, 6, 18, 1) 100%); }
.hero__synth { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 62%; mix-blend-mode: screen; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%); mask-image: linear-gradient(180deg, transparent 0%, #000 18%); }
.hero__scan { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .2) 0 1px, transparent 1px 3px); opacity: .7; }
.hero__osd { position: absolute; left: var(--gutter); bottom: 78px; display: flex; gap: 18px; font: 400 1.4rem/1 var(--f-vhs); letter-spacing: .1em; color: rgba(255, 255, 255, .88); text-shadow: 2px 2px 0 rgba(0, 0, 0, .6); z-index: 2; }
.hero__osd--der { left: auto; right: var(--gutter); }
.osd__rec { color: #ff4646; animation: cursor 1.4s steps(1) infinite; }
.hero__contenido { position: relative; z-index: 2; display: grid; justify-items: center; gap: clamp(14px, 2.4vh, 26px); width: 100%; max-width: 1100px; }
.hero__kicker { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .7em; padding: .55em 1.1em; border-radius: 999px; border: 1px solid rgba(0, 229, 255, .45); background: rgba(10, 6, 18, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font: 400 1.25rem/1 var(--f-vhs); letter-spacing: .14em; text-transform: uppercase; color: var(--cian); }
.hero__sep { color: var(--rosa); }
.hero__lema { max-width: 34ch; font: 500 clamp(1.1rem, 2.2vw, 1.55rem)/1.4 var(--f-body); color: #fff; text-shadow: 0 2px 18px rgba(10, 6, 18, .9); text-wrap: balance; }
.hero__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 4px; }
/* Instagram, TikTok y WhatsApp a la vista en la portada (en el menú de móvil quedaban escondidos). WhatsApp solo sale si hay número. */
.redes-rapidas { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; padding: 0; list-style: none; width: 100%; }
.redes-rapidas > li[hidden], .redes-rapidas a[hidden] { display: none; }
.red-btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 48px; min-width: 132px; padding: .6em 1.2em; border-radius: 999px; color: #fff; text-decoration: none; font-weight: 600; font-size: 1rem; background: rgba(10, 6, 18, .62); border: 1.5px solid var(--rosa); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: box-shadow .3s, background .3s, transform .2s; }
.red-btn .ico { width: 22px; height: 22px; flex: none; }
.red-btn--tt { border-color: var(--cian); }
.red-btn--wa { border-color: var(--verde); }
.red-btn:hover, .red-btn:focus-visible { background: rgba(255, 79, 216, .18); box-shadow: 0 0 22px rgba(255, 79, 216, .45); transform: translateY(-1px); }
.red-btn--tt:hover, .red-btn--tt:focus-visible { background: rgba(0, 229, 255, .16); box-shadow: 0 0 22px rgba(0, 229, 255, .4); }
.red-btn--wa:hover, .red-btn--wa:focus-visible { background: rgba(57, 255, 20, .14); box-shadow: 0 0 22px rgba(57, 255, 20, .35); }
@media (max-width: 700px) { .redes-rapidas .red-btn { flex: 1 1 calc(50% - 10px); min-width: 0; } .redes-rapidas > li { display: contents; } }
.hero__proximo { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6em .8em; max-width: 100%; padding: .7em 1.2em; border-radius: 14px; text-decoration: none; color: var(--texto); background: rgba(10, 6, 18, .55); border: 1px solid rgba(255, 230, 0, .4); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: .95rem; transition: border-color .3s, box-shadow .3s; }
.hero__proximo:hover { color: #fff; border-color: var(--amarillo); box-shadow: 0 0 24px rgba(255, 230, 0, .35); }
.hero__proximo b { font-weight: 600; }
.hero__proximo-k { font: 400 1.2rem/1 var(--f-vhs); letter-spacing: .12em; text-transform: uppercase; color: var(--amarillo); }
.hero__proximo-h { font: 400 1.25rem/1 var(--f-vhs); color: var(--cian); }
.hero__punto { width: 9px; height: 9px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 10px var(--verde); animation: latido 1.4s infinite; }
@keyframes latido { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.6); opacity: .6; } }
.hero__baja { position: absolute; left: 50%; bottom: 26px; z-index: 2; transform: translateX(-50%); display: grid; justify-items: center; gap: 8px; color: #fff; text-decoration: none; font: 400 1.2rem/1 var(--f-vhs); letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.hero__baja i { width: 2px; height: 46px; background: linear-gradient(180deg, var(--rosa), transparent); position: relative; overflow: hidden; }
.hero__baja i::after { content: ''; position: absolute; left: 0; top: -40%; width: 100%; height: 40%; background: #fff; animation: baja 1.8s var(--ease) infinite; }
@keyframes baja { to { top: 110%; } }
@media (max-width: 700px) {
  .hero__osd { display: none; }
  .hero__ctas { width: 100%; }
  .hero__ctas .btn { flex: 1 1 100%; }
  .hero { padding-bottom: 110px; }
}

/* Logo animado: capa blanca con halo (el propio texto), sombra morada (::before) y relleno cromado (::after) */
.logo { position: relative; display: inline-flex; align-items: baseline; justify-content: center; margin: .02em 0 .36em; font-weight: 400; line-height: 1; font-size: clamp(3rem, min(21vw, 21vh), 13rem); }
.logo > span { display: inline-block; }
.logo__new { position: absolute; left: .01em; top: -7%; z-index: 3; font: 400 .27em/1 var(--f-display); letter-spacing: .04em; color: #fff; transform: rotate(-12deg); text-shadow: 0 0 .2em rgba(255, 79, 216, .9), .06em .06em 0 var(--morado-osc); }
.logo__nombre {
  position: relative; z-index: 1; font-family: var(--f-logo); font-size: 1em; padding: 0 .07em;
  color: #fff; -webkit-text-stroke: .1em #fff;
  text-shadow: 0 0 .1em #ff4fd8, 0 0 .3em rgba(255, 79, 216, .75), 0 0 .7em rgba(123, 44, 191, .85);
  animation: neon 7s 2.4s infinite;
}
.logo__nombre::before, .logo__nombre::after { content: attr(data-text); content: attr(data-text) / ''; position: absolute; top: -.12em; bottom: -.45em; left: 0; right: 0; padding: .12em .07em .45em; pointer-events: none; text-shadow: none; }
.logo__nombre::before { z-index: -1; color: #2a0650; -webkit-text-stroke: .1em #2a0650; transform: translate(.045em, .065em); }
.logo__nombre::after {
  z-index: 2; -webkit-text-stroke: 0; color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .95) 50%, transparent 58%), linear-gradient(180deg, #fff2ff 8%, #ebb8ff 26%, #c06cf5 44%, #8a35d0 58%, #ff5fd9 70%, #ffd1f4 100%);
  background-size: 260% 100%, 100% 100%; background-repeat: no-repeat; background-position: 160% 0, 0 0;
  animation: cromo 6.5s 2.8s infinite;
}
@keyframes cromo { 0%, 70% { background-position: 160% 0, 0 0; } 100% { background-position: -60% 0, 0 0; } }
@keyframes neon { 0%, 18%, 22%, 24%, 54%, 56%, 100% { text-shadow: 0 0 .1em #ff4fd8, 0 0 .3em rgba(255, 79, 216, .75), 0 0 .7em rgba(123, 44, 191, .85); } 20%, 23%, 55% { text-shadow: none; } }
.logo__80 { display: inline-flex; align-items: baseline; margin-left: .04em; }
.logo__8 { position: relative; font: 400 .8em/1 var(--f-logo); color: #fff; -webkit-text-stroke: .035em #2a0650; paint-order: stroke fill; text-shadow: 0 0 .15em rgba(0, 229, 255, .8), .05em .06em 0 #2a0650; }
.logo__vinilo { position: relative; display: inline-block; flex: none; width: .6em; height: .6em; margin: 0 0 -.01em .02em; border-radius: 50%; filter: drop-shadow(0 0 .1em rgba(0, 229, 255, .6)); }
.logo__vinilo svg { width: 100%; height: 100%; animation: gira 2.2s linear infinite; }
.logo__vinilo::after { content: ''; position: absolute; inset: 5%; border-radius: 50%; pointer-events: none; background: conic-gradient(from 200deg, transparent 0 7%, rgba(255, 255, 255, .26) 11%, transparent 17%, transparent 57%, rgba(255, 255, 255, .16) 61%, transparent 67%); }
@keyframes gira { to { transform: rotate(360deg); } }

/* Entrada de la portada (CSS puro; la activa boot.js) */
.js .hero [data-in], .js .logo > span { opacity: 0; }
.hero-in .hero [data-in] { animation: entra .9s var(--ease) both; animation-delay: calc(var(--d, 0) * 1ms); }
.hero-in .logo__nombre { animation: nombre-in 1.05s var(--ease) .12s both, cromo 6.5s 2.8s infinite; }
.hero-in .logo__new { animation: new-in .7s cubic-bezier(.3, 1.6, .5, 1) .62s both; }
.hero-in .logo__80 { animation: vinilo-in 1s var(--ease) .5s both; }
@keyframes entra { from { opacity: 0; transform: translateY(26px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes nombre-in { 0% { opacity: 0; clip-path: inset(-40% 100% -40% -20%); transform: skewX(-10deg); } 40% { opacity: 1; } 100% { opacity: 1; clip-path: inset(-40% -20% -40% -20%); transform: none; } }
@keyframes new-in { from { opacity: 0; transform: translateY(-.5em) rotate(-40deg) scale(.4); } to { opacity: 1; transform: rotate(-12deg); } }
@keyframes vinilo-in { from { opacity: 0; transform: translateX(1.2em) rotate(200deg); } to { opacity: 1; transform: none; } }

/* ---------- Cinta de texto ---------- */
.ticker { position: relative; z-index: 3; margin-top: -40px; padding-block: 18px; overflow-x: clip; } /* el ::before mide el 110 %: sin clip ensancha la página en móvil */
.ticker::before { content: ''; position: absolute; left: -5%; right: -5%; top: 50%; height: 54px; transform: translateY(-50%) rotate(2.4deg); background: repeating-linear-gradient(90deg, rgba(0, 229, 255, .9) 0 34px, rgba(0, 229, 255, .7) 34px 68px); box-shadow: 0 0 30px rgba(0, 229, 255, .35); }
.ticker__cinta { position: relative; transform: rotate(-1.6deg); background: linear-gradient(90deg, var(--magenta-osc), var(--morado) 55%, var(--magenta-osc)); border-block: 3px solid var(--amarillo); box-shadow: 0 0 40px rgba(255, 46, 151, .45), 0 14px 40px rgba(0, 0, 0, .5); overflow: hidden; }
.ticker__pista { display: flex; width: max-content; animation: marquesina 42s linear infinite; }
.ticker:hover .ticker__pista { animation-play-state: paused; }
.ticker__grupo { display: flex; align-items: center; flex: none; }
.ticker__item { padding: .5em .7em; font: 400 clamp(1.45rem, 2.6vw, 2.25rem)/1 var(--f-display); letter-spacing: .06em; text-transform: uppercase; color: #fff; white-space: nowrap; text-shadow: 0 2px 0 rgba(60, 9, 108, .8); }
.ticker__sep { color: var(--amarillo); font-size: 1.3rem; text-shadow: 0 0 10px rgba(255, 230, 0, .8); }
@keyframes marquesina { to { transform: translateX(-50%); } }

/* ---------- Eventos ---------- */
.ev-grid { display: grid; gap: clamp(22px, 3vw, 36px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.ev {
  position: relative; display: flex; flex-direction: column; border-radius: var(--radio); overflow: hidden;
  background: linear-gradient(180deg, rgba(34, 17, 62, .92), rgba(15, 8, 28, .96)); border: 1px solid var(--borde);
  box-shadow: 0 30px 60px -32px rgba(0, 0, 0, .9); transition: border-color .35s, box-shadow .35s, transform .35s var(--ease);
}
.ev:hover { border-color: rgba(255, 79, 216, .6); box-shadow: 0 0 0 1px rgba(255, 79, 216, .3), 0 24px 80px -24px rgba(255, 46, 151, .5); }
.ev.is-destello { animation: destello 1.6s var(--ease); }
@keyframes destello { 0%, 100% { box-shadow: 0 30px 60px -32px rgba(0, 0, 0, .9); } 30% { box-shadow: 0 0 0 3px var(--amarillo), 0 0 60px rgba(255, 230, 0, .6); } }
.ev__media { --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #160a2b; transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .5s var(--ease); }
.ev__media.is-tilt { transition: transform .08s linear; }
.ev__media::after { content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, .22), transparent 45%); opacity: 0; transition: opacity .3s; mix-blend-mode: overlay; }
.ev:hover .ev__media::after { opacity: 1; }
.ev__media picture { display: contents; }
.ev__img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.ev:hover .ev__img { transform: scale(1.04); }
.ev__fecha { position: absolute; top: 16px; left: 16px; z-index: 6; display: grid; justify-items: center; width: 72px; padding: 8px 0 9px; border-radius: 14px; background: rgba(10, 6, 18, .8); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1.5px solid var(--cian); box-shadow: 0 0 18px rgba(0, 229, 255, .45), inset 0 0 12px rgba(0, 229, 255, .2); font-family: var(--f-display); line-height: 1; text-transform: uppercase; }
.ev__fecha span { font-size: 1.05rem; letter-spacing: .12em; color: var(--cian); }
.ev__fecha b { font-size: 2.6rem; font-weight: 400; color: #fff; text-shadow: 0 0 10px rgba(0, 229, 255, .8); }
.ev__media--cartel .ev__fecha { display: none; } /* el cartel ya lleva la fecha */
.ev__tipo { position: absolute; top: 18px; right: 16px; z-index: 6; padding: .45em .85em .4em; border-radius: 999px; background: var(--amarillo); color: #1a0b2e; font: 700 .74rem/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; box-shadow: 0 0 18px rgba(255, 230, 0, .5); }
.ev__cuerpo { display: flex; flex-direction: column; gap: 14px; flex: 1; padding: clamp(22px, 3vw, 34px); }
.ev__cuando { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font: 600 .95rem/1.3 var(--f-body); color: var(--cian); }
.ev__horas { font: 400 1.35rem/1 var(--f-vhs); letter-spacing: .06em; color: var(--amarillo); padding: .15em .5em; border: 1px solid rgba(255, 230, 0, .35); border-radius: 6px; }
.ev__titulo { font: 400 clamp(2rem, 3.4vw, 3.1rem)/.95 var(--f-display); letter-spacing: .015em; text-transform: uppercase; color: #fff; text-wrap: balance; }
.ev__desc { color: var(--texto-2); }
.ev__lineup, .ev__extras { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.ev__lineup li { display: inline-flex; align-items: center; gap: 8px; color: var(--texto); }
.ev__lineup .ico { color: var(--rosa); }
.ev__lineup b { font-weight: 600; color: #fff; }
.ev__extras li { display: inline-flex; align-items: center; gap: 6px; padding: .4em .8em; border-radius: 999px; font-size: .88rem; font-weight: 600; color: var(--amarillo); background: rgba(255, 230, 0, .08); border: 1px solid rgba(255, 230, 0, .35); }
.ev__cuenta { font: 400 1.35rem/1 var(--f-vhs); letter-spacing: .08em; color: var(--rosa); min-height: 1em; }
.ev__cuenta:not(:empty)::before { content: '▶ '; content: '▶ ' / ''; }
.ev__cuenta.is-ahora { color: var(--verde); animation: cursor 1.2s steps(1) infinite; }
.ev__acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 6px; }
@media (min-width: 900px) {
  .ev-grid { grid-template-columns: 1fr; }
  .ev { flex-direction: row; }
  .ev .ev__media { flex: 0 0 40%; aspect-ratio: auto; min-height: 420px; }
  .ev .ev__cuerpo { justify-content: center; }
  .ev--destacado .ev__media { flex-basis: min(44%, 520px); aspect-ratio: 4 / 5; min-height: 0; }
  .ev--destacado .ev__cuerpo { padding: clamp(32px, 4vw, 60px); gap: 18px; }
  .ev--destacado .ev__titulo { font-size: clamp(3rem, 5.4vw, 5.2rem); }
  .ev--destacado .ev__desc { font-size: 1.15rem; }
}
@media (min-width: 1180px) {
  .ev-grid { grid-template-columns: 1fr 1fr; }
  .ev--destacado, .ev:not(.ev--destacado):last-child:nth-child(even) { grid-column: 1 / -1; }
  .ev:not(.ev--destacado):last-child:nth-child(even) .ev__media { flex-basis: min(36%, 420px); }
  .ev:not(.ev--destacado):last-child:nth-child(even) .ev__cuerpo { padding: clamp(28px, 3.4vw, 48px); }
}
.glitch { position: relative; display: inline; }
.glitch::before, .glitch::after { content: attr(data-text); content: attr(data-text) / ''; position: absolute; left: 0; top: 0; width: 100%; opacity: 0; pointer-events: none; }
.ev:hover .glitch::before { opacity: .85; color: var(--cian); transform: translate(-3px, 0); animation: glitch-a .45s steps(2) infinite; mix-blend-mode: screen; }
.ev:hover .glitch::after { opacity: .85; color: var(--magenta); transform: translate(3px, 0); animation: glitch-b .55s steps(2) infinite; mix-blend-mode: screen; }
@keyframes glitch-a { 0% { clip-path: inset(8% 0 62% 0); } 25% { clip-path: inset(58% 0 8% 0); } 50% { clip-path: inset(30% 0 42% 0); } 75% { clip-path: inset(78% 0 4% 0); } 100% { clip-path: inset(4% 0 84% 0); } }
@keyframes glitch-b { 0% { clip-path: inset(70% 0 6% 0); } 25% { clip-path: inset(12% 0 70% 0); } 50% { clip-path: inset(44% 0 30% 0); } 75% { clip-path: inset(2% 0 80% 0); } 100% { clip-path: inset(60% 0 22% 0); } }

/* Cartel generado cuando aún no hay cartel del evento */
.ev__poster {
  --c1: #12052a; --c2: #3c096c; --c3: #ff2e97; --c4: #ffb347; --neon: #ff4fd8; --linea: rgba(0, 229, 255, .75);
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
  padding: 24px 24px 22px; overflow: hidden; isolation: isolate; color: #fff;
  background: linear-gradient(180deg, var(--c1) 0%, var(--c2) 36%, var(--c3) 64%, var(--c4) 100%);
}
.ev__poster[data-tema='directo'] { --c1: #070318; --c2: #2a0b5c; --c3: #d1006b; --c4: #ffe600; --neon: #ffe600; }
.ev__poster[data-tema='tardeo'] { --c1: #2a0b4f; --c2: #b8327d; --c3: #ff8a00; --c4: #ffe600; --neon: #fff1a8; --linea: rgba(255, 255, 255, .7); }
.ev__poster[data-tema='halloween'] { --c1: #050208; --c2: #2b0a3d; --c3: #c2410c; --c4: #ff9d00; --neon: #ff8a00; --linea: rgba(255, 138, 0, .8); }
.ev__poster[data-tema='tematica'] { --c1: #06021a; --c2: #10406b; --c3: #7b2cbf; --c4: #ff4fd8; --neon: #00e5ff; }
.ev__poster > span { position: relative; z-index: 3; }
.ev__poster-sol { position: absolute !important; z-index: 0 !important; left: 50%; top: 30%; width: 66%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); background: linear-gradient(180deg, #ffe600 0%, #ff8a00 45%, #ff2e97 100%); -webkit-mask: linear-gradient(#000 0 0) top / 100% 52% no-repeat, repeating-linear-gradient(180deg, #000 0 12px, transparent 12px 18px) bottom / 100% 48% no-repeat; mask: linear-gradient(#000 0 0) top / 100% 52% no-repeat, repeating-linear-gradient(180deg, #000 0 12px, transparent 12px 18px) bottom / 100% 48% no-repeat; opacity: .95; }
.ev__poster[data-tema='halloween'] .ev__poster-sol { background: linear-gradient(180deg, #fff3c4, #ff9d00 60%, #c2410c); }
.ev__poster-rejilla { position: absolute !important; z-index: 1 !important; left: -60%; right: -60%; bottom: -6%; height: 50%; background-image: linear-gradient(var(--linea) 2px, transparent 2px), linear-gradient(90deg, var(--linea) 2px, transparent 2px); background-size: 44px 44px; transform: perspective(280px) rotateX(62deg); transform-origin: 50% 100%; animation: rejilla 2.2s linear infinite; -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%); mask-image: linear-gradient(180deg, transparent, #000 40%); }
@keyframes rejilla { to { background-position: 0 44px, 0 0; } }
.ev__poster::after { content: ''; position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, transparent 40%, rgba(8, 4, 16, .55) 70%, rgba(8, 4, 16, .92) 100%); }
.ev__poster-marca { font: 400 1.15rem/1 var(--f-logo); color: #fff; opacity: .92; text-shadow: 0 0 10px var(--neon); margin-bottom: 4px; }
.ev__poster-dia { display: none; }
.ev__poster-titulo { font: 400 clamp(2.9rem, 7vw, 4.6rem)/.95 var(--f-neon); color: #fff; text-shadow: 0 0 4px #fff, 0 0 14px var(--neon), 0 0 34px var(--neon), 0 0 60px var(--neon); transform: rotate(-5deg); transform-origin: left bottom; margin: 0 0 .1em -.04em; max-width: 100%; overflow-wrap: normal; word-break: keep-all; hyphens: none; text-wrap: balance; }
.ev__poster[data-largo] .ev__poster-titulo { font-size: clamp(2.3rem, 4.6vw, 3.4rem); line-height: 1.05; }
.ev__poster-sub { font: 400 1.6rem/1 var(--f-display); letter-spacing: .05em; text-transform: uppercase; color: var(--amarillo); text-shadow: 0 0 14px rgba(255, 230, 0, .55); }
.ev__poster-pie { margin-top: 10px; font: 400 1.3rem/1 var(--f-vhs); letter-spacing: .1em; text-transform: uppercase; color: #fff; opacity: .92; }
.ev--destacado .ev__poster-titulo { font-size: clamp(3.4rem, 7.5vw, 6.2rem); }
.ev--destacado .ev__poster[data-largo] .ev__poster-titulo { font-size: clamp(2.6rem, 5vw, 4.2rem); }

.ev-vacio, .of-vacio { display: grid; justify-items: center; gap: 10px; padding: clamp(36px, 6vw, 64px) 24px; border-radius: var(--radio); text-align: center; color: var(--texto-2); border: 1.5px dashed var(--borde); background: rgba(27, 14, 48, .45); }
.ev-vacio__t, .of-vacio__t { font: 400 clamp(1.8rem, 3.6vw, 2.6rem)/1 var(--f-display); text-transform: uppercase; color: #fff; }
.of-vacio__ico { width: 46px; height: 46px; color: var(--amarillo); filter: drop-shadow(0 0 10px rgba(255, 230, 0, .6)); }

/* ---------- Ofertas flash ---------- */
.ofertas { overflow: hidden; }
.ofertas__rayos { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5; -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); background:
  radial-gradient(600px 300px at 15% 20%, rgba(255, 230, 0, .12), transparent 70%),
  radial-gradient(700px 400px at 90% 80%, rgba(255, 46, 151, .14), transparent 70%),
  repeating-linear-gradient(115deg, transparent 0 60px, rgba(255, 230, 0, .03) 60px 62px); }
.of-nota { display: block; text-align: center; max-width: 760px; margin: -28px auto 36px; padding: 14px 18px; border-radius: 14px; font-size: .95rem; color: var(--texto); background: rgba(255, 230, 0, .08); border: 1px solid rgba(255, 230, 0, .4); }
.of-nota b { color: var(--amarillo); }
.of-grid { display: grid; gap: 30px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
.of {
  position: relative; display: flex; flex-direction: column; padding: 30px 26px 26px; border-radius: 22px; overflow: hidden;
  background: linear-gradient(160deg, rgba(255, 230, 0, .09), rgba(255, 46, 151, .08) 38%, rgba(16, 8, 30, .96) 72%);
  border: 2px dashed rgba(255, 230, 0, .55); box-shadow: 0 0 0 1px rgba(255, 230, 0, .12), 0 0 44px -14px rgba(255, 230, 0, .4);
  transition: transform .35s var(--ease), box-shadow .35s;
}
.of:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(255, 230, 0, .3), 0 0 60px -10px rgba(255, 230, 0, .55); }
.of::before, .of::after { content: ''; position: absolute; top: 58%; width: 28px; height: 28px; border-radius: 50%; background: var(--bg); border: 2px dashed rgba(255, 230, 0, .55); }
.of::before { left: -16px; }
.of::after { right: -16px; }
.of__cinta { position: absolute; top: 20px; right: -50px; z-index: 3; width: 190px; padding: .5em 0; text-align: center; transform: rotate(35deg); background: var(--amarillo); color: #1a0b2e; font: 700 .76rem/1 var(--f-body); letter-spacing: .26em; text-transform: uppercase; box-shadow: 0 4px 18px rgba(0, 0, 0, .45); }
.of__cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-right: 64px; }
.of__kicker { display: inline-flex; align-items: center; gap: 6px; font: 400 1.3rem/1 var(--f-vhs); letter-spacing: .1em; text-transform: uppercase; color: var(--amarillo); text-shadow: 0 0 10px rgba(255, 230, 0, .6); }
.of__plazas { display: inline-flex; align-items: center; gap: 6px; padding: .35em .75em; border-radius: 999px; font: 700 .78rem/1 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: #fff; background: rgba(255, 46, 151, .22); border: 1px solid rgba(255, 79, 216, .6); }
.of__titulo { margin: 16px 0 8px; font: 400 clamp(1.9rem, 2.8vw, 2.4rem)/1 var(--f-display); letter-spacing: .02em; text-transform: uppercase; color: #fff; text-wrap: balance; }
.of__detalle { color: var(--texto-2); font-size: .98rem; }
.of__estado { margin-top: 18px; font: 400 1.2rem/1 var(--f-vhs); letter-spacing: .12em; text-transform: uppercase; color: var(--texto-3); }
.of__cuenta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 8px 0 12px; }
.of__u { display: grid; justify-items: center; gap: 4px; padding: 11px 0 9px; border-radius: 12px; background: #07040d; border: 1px solid rgba(0, 229, 255, .35); box-shadow: inset 0 0 18px rgba(0, 229, 255, .12); }
.of__n { font: 700 clamp(1.55rem, 2.6vw, 2rem)/1 var(--f-num); color: var(--cian); text-shadow: 0 0 12px rgba(0, 229, 255, .7); font-variant-numeric: tabular-nums; }
.of__u span { font: 400 1rem/1 var(--f-vhs); letter-spacing: .1em; text-transform: uppercase; color: var(--texto-3); }
.of__barra { height: 8px; border-radius: 99px; overflow: hidden; background: rgba(255, 255, 255, .08); }
.of__barra i { display: block; height: 100%; transform-origin: left; transform: scaleX(var(--p, 1)); background: linear-gradient(90deg, var(--magenta), var(--amarillo)); box-shadow: 0 0 14px rgba(255, 230, 0, .6); transition: transform 1s linear; }
.of__cuando { margin-top: 10px; font-size: .9rem; color: var(--texto-3); }
.of__ini { display: none; }
.of--pronto .of__ini { display: inline; }
.of--pronto .of__fin { display: none; }
.of__codigo { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 10px 10px 10px 14px; border-radius: 12px; border: 1.5px dashed rgba(255, 79, 216, .6); background: rgba(255, 79, 216, .06); }
.of__codigo > span { font: 400 1.05rem/1 var(--f-vhs); letter-spacing: .1em; text-transform: uppercase; color: var(--texto-3); }
.of__codigo code { font: 400 1.6rem/1 var(--f-vhs); letter-spacing: .14em; color: var(--rosa); text-shadow: 0 0 10px rgba(255, 79, 216, .6); }
.of__copiar { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255, 79, 216, .6); background: transparent; color: var(--rosa); font: 700 .78rem/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; }
.of__copiar:hover, .of__copiar.is-ok { background: var(--rosa); color: #1a0b2e; }
.of__accion { margin-top: 18px; }
.of__accion .btn { width: 100%; }
.of--fin { animation: of-fin .7s var(--ease) forwards; }
@keyframes of-fin { 0% { filter: none; } 30% { filter: brightness(2) saturate(0); transform: skewX(8deg); } 100% { opacity: 0; transform: scale(.9) skewX(-6deg); filter: blur(6px); } }

/* ---------- Entradas y VIP ---------- */
.vip { background: linear-gradient(180deg, transparent, rgba(60, 9, 108, .22) 30%, rgba(60, 9, 108, .22) 70%, transparent); }
.vip__grid { display: grid; gap: clamp(36px, 5vw, 72px); align-items: start; }
@media (min-width: 980px) { .vip__grid { grid-template-columns: 1fr 1fr; } .vip__caja { position: sticky; top: calc(var(--nav-h) + 24px); } }
.pasos { list-style: none; display: grid; gap: 14px; margin: 0 0 28px; }
.pasos li { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; padding: 18px 20px; border-radius: 18px; background: rgba(27, 14, 48, .55); border: 1px solid var(--borde); }
.pasos__n { font: 400 2.6rem/1 var(--f-mono); color: var(--rosa); text-shadow: 0 0 14px rgba(255, 79, 216, .6); min-width: 2.4ch; }
.pasos h3 { font: 400 1.65rem/1 var(--f-display); letter-spacing: .03em; text-transform: uppercase; margin-bottom: 4px; }
.pasos p { color: var(--texto-2); font-size: .98rem; }
.vip__entrada { display: grid; gap: 12px; padding: 22px; border-radius: 18px; border: 1.5px solid rgba(0, 229, 255, .4); background: linear-gradient(135deg, rgba(0, 229, 255, .08), transparent 60%); }
.vip__entrada h3 { display: flex; align-items: center; gap: 10px; font: 400 1.9rem/1 var(--f-display); letter-spacing: .03em; text-transform: uppercase; color: var(--cian); }
.vip__entrada p { color: var(--texto-2); }
.vip__entrada-cta { margin-top: 4px; }
.vip__caja { position: relative; padding: clamp(24px, 3.4vw, 40px); border-radius: 26px; background: linear-gradient(170deg, rgba(42, 20, 76, .92), rgba(14, 7, 26, .96)); border: 1px solid rgba(255, 79, 216, .4); box-shadow: 0 0 0 1px rgba(255, 79, 216, .12), 0 30px 80px -30px rgba(255, 46, 151, .45); }
.vip__caja::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; background: linear-gradient(135deg, var(--magenta), transparent 30%, transparent 70%, var(--cian)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); pointer-events: none; }
.vip__caja-cab { display: flex; gap: 14px; align-items: center; margin-bottom: 22px; }
.vip__caja-cab > .ico { width: 48px; height: 48px; padding: 10px; border-radius: 14px; color: var(--amarillo); background: rgba(255, 230, 0, .1); border: 1px solid rgba(255, 230, 0, .4); }
.vip__caja-cab h3 { font: 400 2.1rem/1 var(--f-display); letter-spacing: .03em; text-transform: uppercase; }
.vip__caja-cab p { color: var(--texto-3); font-size: .92rem; }
.vip__form { display: grid; gap: 16px; }
.campo { display: grid; gap: 7px; min-width: 0; align-content: start; }
.campo-fila { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
.campo label { font: 400 1.15rem/1 var(--f-vhs); letter-spacing: .12em; text-transform: uppercase; color: var(--cian); }
.opc { color: var(--texto-3); text-transform: none; letter-spacing: .04em; }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 12px; border: 1.5px solid rgba(199, 125, 255, .32);
  background: #0c0716; color: var(--texto); font-size: 1rem; transition: border-color .25s, box-shadow .25s; appearance: none;
}
.campo textarea { resize: vertical; min-height: 76px; }
.campo select { padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300E5FF' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; }
.campo select option { background: #0c0716; color: var(--texto); }
.campo input::placeholder, .campo textarea::placeholder { color: #8676a6; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--cian); box-shadow: 0 0 0 3px rgba(0, 229, 255, .2), 0 0 20px rgba(0, 229, 255, .25); }
.campo input[aria-invalid='true'], .campo select[aria-invalid='true'] { border-color: #ff6b6b; box-shadow: 0 0 0 3px rgba(255, 107, 107, .2); }
.campo input[type='date']::-webkit-calendar-picker-indicator { filter: invert(1) hue-rotate(150deg); }
.check { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; font-size: .9rem; color: var(--texto-2); cursor: pointer; }
.check input { appearance: none; width: 22px; height: 22px; margin: 1px 0 0; border-radius: 6px; border: 1.5px solid rgba(199, 125, 255, .6); background: #0c0716; display: grid; place-items: center; cursor: pointer; }
.check input:checked { background: var(--magenta); border-color: var(--magenta); box-shadow: 0 0 12px rgba(255, 46, 151, .6); }
.check input:checked::after { content: ''; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: translateY(-1px) rotate(45deg); }
.check input[aria-invalid='true'] { border-color: #ff6b6b; }
.vip__aviso { min-height: 1.2em; font-size: .92rem; color: #ffb3b3; }
.vip__aviso.is-ok { color: var(--verde); }
.vip__campos .vip__aviso:empty { min-height: 0; margin-top: -16px; }
.vip__listo { display: grid; gap: 12px; padding: 18px; border-radius: 16px; background: rgba(57, 255, 136, .06); border: 1px solid rgba(57, 255, 136, .45); }
.vip__listo:focus { outline: none; }
.vip__listo-t { display: flex; align-items: center; gap: 8px; font: 400 1.6rem/1 var(--f-display); letter-spacing: .03em; text-transform: uppercase; color: var(--verde); }
.vip__msg { margin: 0; padding: 12px 14px; border-radius: 10px; background: #07040d; border: 1px solid var(--borde); font: 400 1.15rem/1.3 var(--f-vhs); color: var(--texto); white-space: pre-wrap; word-break: break-word; max-height: 220px; overflow: auto; }
.vip__listo-ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.vip__nojs { display: grid; gap: 14px; color: var(--texto-2); }
.vip__listo--aviso { background: rgba(255, 230, 0, .06); border-color: rgba(255, 230, 0, .5); }
.vip__listo--aviso .vip__listo-t { color: var(--amarillo); }
/* Formulario de reservas (assets/js/reserva.js) */
.vip__campos { display: grid; gap: 16px; }
.vip__oblig { margin-top: -6px; font-size: .86rem; color: var(--texto-3); }
.campo__error { display: flex; gap: 6px; align-items: baseline; font-size: .9rem; line-height: 1.35; color: #ffb3b3; }
.campo__error::before { content: '!'; flex: none; display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: #ff6b6b; color: #0A0612; font-weight: 800; font-size: .72rem; }
.campo__ayuda { font-size: .84rem; color: var(--texto-3); }
.campo textarea[aria-invalid='true'] { border-color: #ff6b6b; box-shadow: 0 0 0 3px rgba(255, 107, 107, .2); }
.grupo { display: grid; gap: 9px; min-width: 0; margin: 0; padding: 0; border: 0; }
.grupo legend { padding: 0; margin-bottom: 9px; font: 400 1.15rem/1 var(--f-vhs); letter-spacing: .12em; text-transform: uppercase; color: var(--cian); }
.chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.chip { position: relative; display: flex; min-width: 0; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip span { display: flex; flex: 1; justify-content: center; align-items: center; gap: 8px; min-height: 46px; padding: 10px 16px; border-radius: 999px; border: 1.5px solid rgba(199, 125, 255, .32); background: #0c0716; color: var(--texto-2); font-weight: 600; transition: border-color .2s, background .2s, box-shadow .2s, color .2s; pointer-events: none; }
.chip .ico { width: 18px; height: 18px; color: var(--amarillo); }
.chip:hover span { border-color: var(--rosa); }
.chip input:checked + span { color: #fff; border-color: var(--magenta); background: rgba(255, 46, 151, .18); box-shadow: 0 0 0 1px rgba(255, 46, 151, .5), 0 0 16px rgba(255, 46, 151, .45); }
.chip input:focus-visible + span { outline: 2px solid var(--cian); outline-offset: 3px; }
.chip input[aria-invalid='true'] + span { border-color: #ff6b6b; }
.check a { color: var(--cian); }
.vip__trampa { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.vip__capa { font-size: .8rem; line-height: 1.5; color: var(--texto-3); }
.vip__capa a { color: var(--texto-2); }
.vip__form button[aria-busy='true'] { opacity: .75; cursor: progress; }
.vip__ok { display: grid; gap: 14px; padding: 20px; border-radius: 16px; background: rgba(57, 255, 136, .06); border: 1px solid rgba(57, 255, 136, .45); }
.vip__ok-t { display: flex; align-items: center; gap: 10px; font: 400 1.9rem/1.05 var(--f-display); letter-spacing: .03em; text-transform: uppercase; color: var(--verde); }
.vip__ok-t:focus { outline: none; }
.vip__ok-lista { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; color: var(--texto); }
.vip__ok-lista li { display: grid; grid-template-columns: 1.6em 1fr; gap: 6px; align-items: baseline; overflow-wrap: anywhere; }
.vip__ok-e { text-align: center; }
.vip__ok .btn { justify-self: start; }

/* ---------- Experiencia: tardeos y noches ---------- */
.xp { position: relative; isolation: isolate; overflow: hidden; overflow: clip; padding-block: clamp(88px, 12vw, 160px); }
.xp__cielo { position: absolute; inset: 0; z-index: -1; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 10%, #000 90%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 10%, #000 90%, transparent 100%); background: linear-gradient(180deg, var(--bg) 0%, #2a0b4f 22%, #6b1f8f 46%, #c8327a 66%, #ff7a3d 86%, #ffb000 100%); }
.xp__cielo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, var(--bg) 0%, #12062a 40%, #1d0a3c 75%, #0a0612 100%); opacity: var(--noche, .78); }
.xp__sol { position: absolute; left: 50%; bottom: 8%; width: min(70vw, 640px); aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, var(--sol-y, 30%)); background: linear-gradient(180deg, #ffe600 0%, #ff8a00 45%, #ff2e97 100%); -webkit-mask: linear-gradient(#000 0 0) top / 100% 55% no-repeat, repeating-linear-gradient(180deg, #000 0 18px, transparent 18px 28px) bottom / 100% 45% no-repeat; mask: linear-gradient(#000 0 0) top / 100% 55% no-repeat, repeating-linear-gradient(180deg, #000 0 18px, transparent 18px 28px) bottom / 100% 45% no-repeat; opacity: .55; filter: blur(.3px); }
.xp__estrellas { position: absolute; inset: 0 0 40% 0; opacity: var(--estrellas, .8); background-image: radial-gradient(1.5px 1.5px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 28% 42%, #fff, transparent), radial-gradient(1.5px 1.5px at 46% 12%, #fff, transparent), radial-gradient(1px 1px at 62% 30%, #fff, transparent), radial-gradient(2px 2px at 78% 16%, #fff, transparent), radial-gradient(1px 1px at 88% 44%, #fff, transparent), radial-gradient(1px 1px at 6% 52%, #fff, transparent), radial-gradient(1.5px 1.5px at 38% 60%, #fff, transparent), radial-gradient(1px 1px at 70% 58%, #fff, transparent), radial-gradient(1.2px 1.2px at 94% 8%, #fff, transparent); animation: titila 4s ease-in-out infinite alternate; }
@keyframes titila { to { opacity: calc(var(--estrellas, .8) * .5); } }
.xp__cab { margin-bottom: clamp(30px, 5vw, 56px); }
.xp__pista { display: grid; gap: 22px; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.xp__panel { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: clamp(28px, 4vw, 56px); border-radius: 28px; background: rgba(10, 6, 18, .58); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, .12); overflow: hidden; }
.xp__hora { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; font: 400 1.4rem/1.1 var(--f-vhs); letter-spacing: .1em; text-transform: uppercase; color: var(--amarillo); }
.xp__hora b { font-weight: 400; color: #fff; font-size: 1.15em; }
.xp__provisional { font-size: .8em; letter-spacing: .06em; color: var(--texto-2); }
.xp__neon { margin-bottom: .25em; font: 400 clamp(5.2rem, 15vw, 12rem)/.9 var(--f-neon); color: #fff; text-shadow: 0 0 6px #fff, 0 0 20px #ff8a00, 0 0 44px #ff2e97, 0 0 90px #ff2e97; transform: rotate(-4deg); animation: neon 9s 1s infinite; }
.xp__neon--noche { text-shadow: 0 0 6px #fff, 0 0 20px var(--cian), 0 0 44px var(--morado-2), 0 0 90px var(--morado); }
.xp__txt { max-width: 46ch; font-size: clamp(1.1rem, 1.8vw, 1.4rem); color: var(--texto); }
.xp__txt b { color: var(--rosa); font-weight: 600; }
.xp__panel--tarde { background: linear-gradient(135deg, rgba(255, 138, 0, .22), rgba(10, 6, 18, .6) 60%); border-color: rgba(255, 138, 0, .35); }
.xp__panel--noche { background: linear-gradient(135deg, rgba(0, 229, 255, .14), rgba(10, 6, 18, .66) 60%); border-color: rgba(0, 229, 255, .3); }
.decadas { display: flex; flex-wrap: wrap; gap: .1em .35em; align-items: baseline; font: 400 clamp(5rem, 17vw, 15rem)/.95 var(--f-mono); }
.decadas span:nth-child(1) { color: var(--rosa); text-shadow: 0 0 20px var(--magenta), 0 0 60px var(--magenta); }
.decadas span:nth-child(2) { color: var(--cian); text-shadow: 0 0 20px var(--cian), 0 0 60px rgba(0, 229, 255, .7); }
.decadas span:nth-child(3) { color: var(--amarillo); text-shadow: 0 0 20px var(--naranja), 0 0 60px rgba(255, 230, 0, .6); }
.xp__sub { display: flex; align-items: center; gap: 10px; font: 400 clamp(2rem, 3.6vw, 3rem)/1 var(--f-display); letter-spacing: .02em; text-transform: uppercase; }
.xp__sub .ico { color: var(--rosa); }
.espacios { list-style: none; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.espacio { display: grid; align-content: start; gap: 8px; padding: 20px; border-radius: 18px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); transition: border-color .3s, background-color .3s, transform .3s var(--ease); }
.espacio:hover { border-color: rgba(255, 79, 216, .55); background: rgba(255, 79, 216, .07); transform: translateY(-3px); }
.espacio > .ico, .espacio div > .ico { width: 34px; height: 34px; color: var(--cian); filter: drop-shadow(0 0 8px rgba(0, 229, 255, .6)); }
.espacio h4 { font: 400 1.6rem/1 var(--f-display); letter-spacing: .03em; text-transform: uppercase; }
.espacio p { color: var(--texto-2); font-size: .95rem; line-height: 1.45; }
.espacio--foto { position: relative; display: block; padding: 0; overflow: hidden; min-height: 240px; }
.espacio--foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .8; }
.espacio--foto div { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 8px; padding: 40px 20px 20px; background: linear-gradient(180deg, transparent, rgba(10, 6, 18, .9) 45%); }
.djs { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 14px; }
.djs li { font: 400 clamp(1.6rem, 3vw, 2.4rem)/1 var(--f-display); letter-spacing: .04em; text-transform: uppercase; padding: .3em .55em .22em; border-radius: 10px; border: 1px solid rgba(255, 79, 216, .35); background: rgba(255, 79, 216, .06); transition: color .25s, text-shadow .25s, border-color .25s; }
.djs li:nth-child(3n+2) { border-color: rgba(0, 229, 255, .35); background: rgba(0, 229, 255, .05); }
.djs li:hover { color: #fff; border-color: var(--rosa); text-shadow: 0 0 12px var(--rosa); }
.xp__panel--cabina .btn { align-self: flex-start; }
@media (min-width: 900px) {
  .espacios { grid-template-columns: repeat(4, 1fr); }
  .espacio--foto { grid-row: span 2; }
}
@media (min-width: 1024px) {
  html:not(.xp-h) .xp__pista { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: dense; }
  html:not(.xp-h) .xp__panel--espacios { grid-column: 1 / -1; }
  /* a media columna (sin el modo horizontal: menos movimiento, pantalla baja o sin GSAP) el neón a 12rem se sale del panel */
  html:not(.xp-h) .xp__neon { font-size: clamp(5.2rem, 8vw, 8.5rem); }
}
/* Modo horizontal fijado (lo activa fx.js con GSAP en pantallas grandes) */
.xp-h .xp { padding: 0; }
.xp-h .xp__pin { height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-top: calc(var(--nav-h) * .6); }
.xp-h .xp__cab { margin-bottom: 3vh; }
.xp-h .xp__cab .h2 { font-size: clamp(3rem, 6vw, 5.6rem); }
.xp-h .xp__pista { display: flex; gap: 3vw; width: max-content; max-width: none; margin: 0; padding: 0 8vw; align-items: stretch; will-change: transform; }
.xp-h .xp__panel { flex: none; width: min(62vw, 860px); height: min(64vh, 640px); }
.xp-h .xp__panel--decadas { width: min(80vw, 1180px); }
.xp-h .decadas { flex-wrap: nowrap; font-size: min(12vw, 24vh, 200px); }
.xp-h .xp__panel--espacios { width: min(96vw, 1380px); }
.xp-h .xp__panel--espacios .espacios { flex: 1; min-height: 0; grid-auto-rows: 1fr; }
.xp-h .xp__panel--espacios .espacio { padding: 16px 18px; }
.xp-h .xp__panel--cabina { width: min(70vw, 900px); }

/* ---------- Galería ---------- */
.gal { padding-bottom: clamp(30px, 4vw, 60px); }
.gal__cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: clamp(26px, 4vw, 44px); }
.gal__cab .sec__cab { margin-bottom: 0; }
.gal__flechas { display: flex; gap: 10px; }
.gal__marco {
  position: relative; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scrollbar-width: none; cursor: grab;
  padding: 34px 0; background: #050308; border-block: 1px solid rgba(255, 255, 255, .06);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.gal__marco::-webkit-scrollbar { display: none; }
.gal__marco.is-arrastrando { cursor: grabbing; scroll-snap-type: none; }
.gal__marco.is-arrastrando a { pointer-events: none; }
.gal__marco::before, .gal__marco::after { content: ''; position: sticky; left: 0; display: block; width: 100%; height: 14px; } /* reservado */
.gal__pista { --perfo: repeating-linear-gradient(90deg, transparent 0 10px, rgba(255, 255, 255, .16) 10px 24px, transparent 24px 34px); position: relative; display: flex; gap: 22px; width: max-content; padding: 26px max(var(--gutter), 6vw); list-style: none; }
.gal__pista::before, .gal__pista::after { content: ''; position: absolute; left: 0; right: 0; height: 10px; background: var(--perfo); border-radius: 2px; }
.gal__pista::before { top: 4px; }
.gal__pista::after { bottom: 4px; }
.gal__item { flex: none; scroll-snap-align: center; display: grid; gap: 12px; transform: rotate(var(--r, 0deg)); transition: transform .5s var(--ease); }
.gal__item:nth-child(3n+1) { --r: -1.2deg; }
.gal__item:nth-child(3n+2) { --r: .8deg; }
.gal__item:nth-child(3n) { --r: -.4deg; }
.gal__item:hover { --r: 0deg; transform: rotate(0) translateY(-6px); }
.gal__link { display: block; height: clamp(300px, 44vw, 470px); border-radius: 8px; overflow: hidden; background: #160a2b; box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .08); }
.gal__link img { width: auto; height: 100%; max-width: none; object-fit: cover; transition: transform .7s var(--ease), filter .5s; filter: saturate(1.05); }
.gal__link:hover img { transform: scale(1.05); filter: saturate(1.25); }
.gal__link:focus-visible { outline-offset: 4px; }
.gal__pie { display: flex; gap: 10px; align-items: baseline; font: 400 1.25rem/1 var(--f-vhs); letter-spacing: .06em; color: var(--texto-2); }
.gal__pie b { font-weight: 400; padding: .2em .45em; border-radius: 4px; font-size: .9em; text-transform: uppercase; color: #1a0b2e; background: var(--cian); }
.gal__item--cartel .gal__pie b { background: var(--rosa); }
.gal__vacia { text-align: center; color: var(--texto-2); padding: 40px; }
.lightbox { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; background: rgba(5, 3, 10, .95); color: #fff; }
.lightbox[open] { display: grid; place-items: center; animation: lb-in .3s var(--ease); }
.lightbox::backdrop { background: rgba(5, 3, 10, .8); }
@keyframes lb-in { from { opacity: 0; } }
.lightbox__fig { display: grid; justify-items: center; gap: 14px; padding: 70px 70px 30px; max-width: 100%; }
.lightbox__img { max-width: min(92vw, 1100px); max-height: 78dvh; width: auto; height: auto; border-radius: 8px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 0 80px rgba(123, 44, 191, .45); }
.lightbox__pie { font: 400 1.35rem/1.2 var(--f-vhs); letter-spacing: .05em; color: var(--texto-2); text-align: center; max-width: 60ch; }
.lightbox__btn { position: absolute; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .25); background: rgba(10, 6, 18, .7); color: #fff; }
.lightbox__btn:hover { border-color: var(--rosa); color: var(--rosa); box-shadow: 0 0 20px rgba(255, 79, 216, .5); }
.lightbox__btn--cerrar { top: 16px; right: 16px; }
.lightbox__btn--ant { left: 16px; top: 50%; transform: translateY(-50%); }
.lightbox__btn--sig { right: 16px; top: 50%; transform: translateY(-50%); }
@media (max-width: 640px) { .lightbox__fig { padding: 70px 12px 90px; } .lightbox__btn--ant, .lightbox__btn--sig { top: auto; bottom: 18px; transform: none; } .lightbox__btn--ant { left: calc(50% - 64px); } .lightbox__btn--sig { right: calc(50% - 64px); } }

/* ---------- Tal día como hoy (televisor) ---------- */
.tal__grid { display: grid; gap: clamp(40px, 6vw, 80px); align-items: center; }
@media (min-width: 980px) { .tal__grid { grid-template-columns: .85fr 1.15fr; } }
.tal__texto { display: grid; gap: 18px; justify-items: start; }
.tv { position: relative; width: 100%; max-width: 640px; margin-inline: auto; padding-top: 70px; filter: drop-shadow(0 40px 60px rgba(0, 0, 0, .65)); }
.tv__antena { position: absolute; left: 50%; top: 0; width: 0; height: 80px; }
.tv__antena i { position: absolute; bottom: 0; left: 0; width: 4px; height: 96px; border-radius: 4px; background: linear-gradient(180deg, #e8e8f0, #8a87a0); transform-origin: bottom center; }
.tv__antena i:first-child { transform: rotate(-32deg); }
.tv__antena i:last-child { transform: rotate(28deg); }
.tv__antena i::before { content: ''; position: absolute; top: -6px; left: -4px; width: 12px; height: 12px; border-radius: 50%; background: var(--rosa); box-shadow: 0 0 12px var(--rosa); }
.tv__antena::after { content: ''; position: absolute; left: -36px; bottom: -14px; width: 72px; height: 26px; border-radius: 40px 40px 6px 6px; background: linear-gradient(180deg, #3b1d63, #1b0b30); }
.tv__cuerpo { position: relative; display: grid; grid-template-columns: 1fr; gap: 16px; padding: 18px; border-radius: 30px; background: linear-gradient(160deg, #4a2378 0%, #2a1146 45%, #170828 100%); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .18), inset 0 -8px 0 rgba(0, 0, 0, .35), 0 0 0 2px #0d0619, 0 0 60px rgba(123, 44, 191, .35); }
@media (min-width: 560px) { .tv__cuerpo { grid-template-columns: 1fr 96px; padding: 22px; } }
.tv__pantalla { position: relative; min-height: 300px; border-radius: 26px / 34px; overflow: hidden; background: radial-gradient(ellipse at 50% 45%, #1b2a5c 0%, #0a0f2a 60%, #03040c 100%); box-shadow: inset 0 0 50px rgba(0, 0, 0, .9), 0 0 0 7px #0b0515, 0 0 0 9px rgba(255, 255, 255, .08); }
@media (min-width: 560px) { .tv__pantalla { aspect-ratio: 4 / 3; min-height: 0; } }
.tv__contenido { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 34px 26px 28px; color: #dcfcff; overflow: auto; scrollbar-width: none; }
.tv__canales { list-style: none; }
.tv__canal { display: grid; gap: 8px; text-shadow: 0 0 6px rgba(0, 229, 255, .55); animation: canal-in .45s steps(4); }
@keyframes canal-in { from { opacity: 0; transform: scaleY(.02); filter: brightness(3); } to { opacity: 1; transform: none; filter: none; } }
.tv__fecha { font: 400 clamp(2rem, 4vw, 2.8rem)/1 var(--f-vhs); letter-spacing: .06em; color: #fff; }
.tv__fecha b { font-weight: 400; color: var(--amarillo); text-shadow: 0 0 10px rgba(255, 230, 0, .7); }
.tv__cat { font: 400 1.15rem/1 var(--f-vhs); letter-spacing: .12em; text-transform: uppercase; color: var(--rosa); text-shadow: 0 0 8px rgba(255, 79, 216, .6); }
.tv__titulo { font: 400 clamp(1.6rem, 2.8vw, 2.1rem)/1.05 var(--f-display); letter-spacing: .02em; text-transform: uppercase; color: #fff; }
.tv__dato { font: 400 clamp(1.1rem, 1.6vw, 1.28rem)/1.18 var(--f-vhs); color: #c9f6ff; }
.tv__fuente { justify-self: start; font: 400 1.05rem/1 var(--f-vhs); letter-spacing: .1em; text-transform: uppercase; color: var(--cian); }
.tv__ruido { position: absolute; inset: -20%; z-index: 2; background: url('../img/ruido.png'); background-size: 120px; opacity: 0; mix-blend-mode: screen; pointer-events: none; }
.tv--zap .tv__ruido { opacity: .9; animation: grano .12s steps(3) infinite; }
.tv--zap .tv__contenido { filter: blur(1px) brightness(1.6); }
.tv__vidrio { position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .28) 0 2px, transparent 2px 4px), radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, .14), transparent 40%), radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, .65) 100%); }
.tv__ch { position: absolute; top: 14px; right: 20px; z-index: 4; font: 400 1.5rem/1 var(--f-vhs); color: var(--verde); text-shadow: 0 0 8px var(--verde); }
.tv__panel { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 4px 6px; }
@media (min-width: 560px) { .tv__panel { flex-direction: column; justify-content: flex-start; padding: 14px 0; } }
.tv__marca { font: 400 1.05rem/1 var(--f-logo); color: #fff; opacity: .85; }
.tv__rueda { width: 46px; height: 46px; border-radius: 50%; background: conic-gradient(from 20deg, #2a2733, #8e8aa3, #2a2733, #8e8aa3, #2a2733); box-shadow: 0 4px 0 #0c0616, inset 0 0 0 5px #1b1726; }
.tv__rueda--p { width: 36px; height: 36px; }
.tv__rejilla { flex: 1; width: 100%; min-width: 60px; min-height: 30px; border-radius: 10px; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .55) 0 3px, rgba(255, 255, 255, .06) 3px 6px); }
.tv__patas { display: flex; justify-content: space-between; padding: 0 18%; }
.tv__patas i { width: 16px; height: 26px; background: linear-gradient(180deg, #2a1146, #0d0619); border-radius: 0 0 6px 6px; }
.tv__patas i:first-child { transform: skewX(14deg); }
.tv__patas i:last-child { transform: skewX(-14deg); }

/* ---------- Horario y cómo llegar ---------- */
.hor__grid { display: grid; gap: 26px; }
@media (min-width: 980px) { .hor__grid { grid-template-columns: 1.15fr .85fr; } }
.hor__tarjeta, .donde { padding: clamp(22px, 3vw, 36px); border-radius: 26px; background: var(--panel); border: 1px solid var(--borde); }
.hor__estado { display: inline-flex; align-items: center; gap: 10px; padding: .6em 1.1em; border-radius: 999px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .2); font: 600 .98rem/1.2 var(--f-body); }
.hor__led { width: 10px; height: 10px; flex: none; border-radius: 50%; background: #ff5a5a; box-shadow: 0 0 10px #ff5a5a; }
.hor__estado[data-abierto='1'] { border-color: rgba(57, 255, 136, .5); background: rgba(57, 255, 136, .08); }
.hor__estado[data-abierto='1'] .hor__led { background: var(--verde); box-shadow: 0 0 12px var(--verde); animation: latido 1.4s infinite; }
.hor__lista { list-style: none; display: grid; gap: 6px; margin: 20px 0 8px; }
.hor__dia { position: relative; display: grid; grid-template-columns: 6.6rem minmax(0, 1fr) 8.2rem; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 12px; transition: background-color .3s; }
.hor__dia--hoy { background: linear-gradient(90deg, rgba(255, 46, 151, .2), rgba(123, 44, 191, .12)); box-shadow: inset 0 0 0 1px rgba(255, 79, 216, .55); }
.hor__nombre { display: flex; align-items: center; gap: 8px; font: 400 1.5rem/1 var(--f-display); letter-spacing: .05em; text-transform: uppercase; }
.hor__dia--hoy .hor__nombre { color: #fff; }
/* la etiqueta «Hoy» va sobre el borde de la fila: no ocupa sitio (con «Miércoles» pisaba la barra) */
.hor__dia--hoy .hor__nombre::after { content: 'Hoy'; position: absolute; top: -.9em; left: 12px; padding: .22em .45em .15em; border-radius: 5px; font: 700 .62rem/1 var(--f-body); letter-spacing: .14em; color: #1a0b2e; background: var(--amarillo); }
.hor__barra { position: relative; height: 10px; border-radius: 99px; background: rgba(255, 255, 255, .06); }
.hor__barra i { position: absolute; top: 0; bottom: 0; left: calc(var(--x) * 100%); width: calc(var(--w) * 100%); border-radius: inherit; background: linear-gradient(90deg, var(--amarillo), var(--magenta) 55%, var(--morado-2)); box-shadow: 0 0 12px rgba(255, 46, 151, .55); transform-origin: left; transition: transform 1.1s var(--ease); }
.hor__barra--off { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .08) 0 6px, transparent 6px 12px); }
.hor__tarjeta.armed .hor__barra i { transform: scaleX(0); }
.hor__tarjeta.in .hor__barra i { transform: scaleX(1); }
.hor__horas { font: 400 1.4rem/1 var(--f-vhs); letter-spacing: .04em; text-align: right; color: var(--cian); white-space: nowrap; }
.hor__dia--cerrado .hor__horas, .hor__dia--desconocido .hor__horas { color: var(--texto-3); }
.hor__dia--cerrado .hor__nombre { color: var(--texto-3); }
.hor__escala { display: flex; justify-content: space-between; margin: 0 calc(8.2rem + 26px) 0 calc(6.6rem + 26px); font: 400 1rem/1 var(--f-vhs); color: var(--texto-3); }
.hor__nota { display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--borde); font-size: .92rem; color: var(--texto-2); }
.hor__nota .ico { color: var(--amarillo); margin-top: 2px; flex: none; }
.hor__nota--aviso { color: var(--texto); border-top-color: rgba(255, 230, 0, .45); }
.hor__nota--aviso b { color: var(--amarillo); font-weight: 600; }
.hor__estado[data-abierto='x'] { border-color: rgba(255, 230, 0, .45); background: rgba(255, 230, 0, .07); }
.hor__estado[data-abierto='x'] .hor__led { background: var(--amarillo); box-shadow: 0 0 10px var(--amarillo); }
@media (max-width: 520px) {
  .hor__dia { grid-template-columns: 5.4rem minmax(0, 1fr) 7rem; gap: 8px; padding: 10px; }
  .hor__nombre { font-size: 1.25rem; }
  .hor__dia--hoy .hor__nombre::after { left: 8px; }
  .hor__horas { font-size: 1.2rem; }
  .hor__escala { display: none; }
  .hero__kicker { font-size: 1.05rem; letter-spacing: .1em; gap: .2em .6em; padding: .5em .9em; }
}
.donde { display: grid; gap: 20px; align-content: start; }
.mapa { position: relative; height: 210px; border-radius: 18px; overflow: hidden; background: #070410; border: 1px solid rgba(0, 229, 255, .25); }
.mapa svg { width: 100%; height: 100%; }
.mapa__via { fill: none; stroke: var(--magenta); stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 6px var(--magenta)); stroke-dasharray: 600; stroke-dashoffset: 0; }
.mapa__via--2 { stroke: var(--cian); filter: drop-shadow(0 0 6px var(--cian)); }
.mapa__via--3 { stroke: rgba(255, 230, 0, .8); stroke-width: 2; filter: none; }
.donde.armed .mapa__via { stroke-dashoffset: 600; }
.donde.in .mapa__via { stroke-dashoffset: 0; transition: stroke-dashoffset 2s var(--ease) .2s; }
.mapa__txt { font: 400 15px/1 var(--f-vhs); fill: var(--texto-3); letter-spacing: .1em; }
.mapa__punto { fill: var(--amarillo); filter: drop-shadow(0 0 8px var(--amarillo)); }
.mapa__onda { fill: none; stroke: var(--amarillo); stroke-width: 2; opacity: 0; transform-origin: center; transform-box: fill-box; animation: onda 2.4s ease-out infinite; }
.mapa__onda--2 { animation-delay: 1.2s; }
@keyframes onda { 0% { transform: scale(.3); opacity: .9; } 100% { transform: scale(2.2); opacity: 0; } }
.mapa__etiqueta { position: absolute; left: 50%; top: 50%; transform: translate(-50%, 22px); padding: .3em .6em; border-radius: 6px; background: rgba(10, 6, 18, .85); border: 1px solid rgba(255, 230, 0, .5); font: 400 1.15rem/1 var(--f-vhs); letter-spacing: .08em; color: var(--amarillo); white-space: nowrap; }
.donde__calle { font: 400 clamp(2rem, 3.4vw, 2.6rem)/1 var(--f-display); letter-spacing: .02em; text-transform: uppercase; color: #fff; margin-bottom: 6px; }
.donde__dir p { color: var(--texto-2); }
.donde__ref { margin-top: 6px; color: var(--texto-3) !important; font-size: .95rem; }
.donde__ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.donde__nota { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; color: var(--texto-3); }
.donde__nota .ico { color: var(--cian); margin-top: 2px; }

/* ---------- Preguntas frecuentes ---------- */
.faq__grid { display: grid; gap: clamp(30px, 5vw, 70px); align-items: start; }
@media (min-width: 980px) { .faq__grid { grid-template-columns: .8fr 1.2fr; } .faq__grid .sec__cab { position: sticky; top: calc(var(--nav-h) + 30px); } }
.faq__grid .sec__cab { margin-bottom: 0; }
.faq__lista { display: grid; gap: 10px; }
.faq__item { border-radius: 16px; background: rgba(27, 14, 48, .55); border: 1px solid var(--borde); transition: border-color .3s, background-color .3s; interpolate-size: allow-keywords; }
.faq__item[open] { border-color: rgba(255, 79, 216, .55); background: rgba(42, 20, 76, .65); }
.faq__item summary { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 18px 20px; cursor: pointer; list-style: none; border-radius: 16px; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__n { font: 400 1.2rem/1 var(--f-vhs); color: var(--rosa); }
.faq__p { font: 600 1.05rem/1.3 var(--f-body); color: #fff; }
.faq__mas { position: relative; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid rgba(0, 229, 255, .5); }
.faq__mas::before, .faq__mas::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; background: var(--cian); transform: translate(-50%, -50%); transition: transform .35s var(--ease); }
.faq__mas::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item[open] .faq__mas { border-color: var(--rosa); box-shadow: 0 0 12px rgba(255, 79, 216, .5); }
.faq__item[open] .faq__mas::before, .faq__item[open] .faq__mas::after { background: var(--rosa); transform: translate(-50%, -50%) rotate(180deg); }
.faq__r { display: grid; gap: 10px; padding: 0 20px 20px calc(20px + 2.2rem); color: var(--texto-2); }
.faq__enlace { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.faq__item::details-content { block-size: 0; overflow: hidden; transition: block-size .4s var(--ease), content-visibility .4s allow-discrete; }
.faq__item[open]::details-content { block-size: auto; }
@media (max-width: 520px) { .faq__r { padding-left: 20px; } }

/* ---------- Pie ---------- */
.pie { position: relative; padding: 0 0 110px; border-top: 1px solid var(--borde); background: linear-gradient(180deg, rgba(60, 9, 108, .18), transparent 40%); overflow: hidden; }
.pie__cinta { overflow: hidden; padding: clamp(24px, 4vw, 44px) 0; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.pie__pista { display: flex; gap: .5em; width: max-content; animation: marquesina 30s linear infinite; font: 400 clamp(3.4rem, 10vw, 9rem)/1 var(--f-display); text-transform: uppercase; letter-spacing: .02em; }
.pie__pista span { color: transparent; -webkit-text-stroke: 1.5px var(--rosa); white-space: nowrap; }
.pie__pista span:nth-child(4n+3) { color: var(--rosa); -webkit-text-stroke: 0; text-shadow: 0 0 30px rgba(255, 46, 151, .6); }
.pie__pista span:nth-child(2n) { -webkit-text-stroke: 0; color: var(--amarillo); }
.pie__grid { display: grid; gap: 34px; padding-block: clamp(40px, 6vw, 70px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.pie__marca { display: grid; gap: 10px; justify-items: start; }
.pie__disco { width: 74px; height: 74px; padding: 0; border: 0; background: none; border-radius: 50%; animation: gira 5s linear infinite; }
.pie__disco svg { width: 100%; height: 100%; }
.pie__nombre { font: 400 2rem/1 var(--f-logo); background: linear-gradient(180deg, #fff, #d9a2ff 55%, #ff4fd8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pie__lema { color: var(--texto-2); font-size: .95rem; max-width: 34ch; }
.pie__co { font: 400 1.15rem/1 var(--f-vhs); letter-spacing: .06em; color: var(--texto-3); }
.pie__h { margin-bottom: 14px; font: 400 1.6rem/1 var(--f-display); letter-spacing: .06em; text-transform: uppercase; color: var(--cian); }
.pie__dir { color: var(--texto-2); margin-bottom: 10px; }
.pie__lista { list-style: none; display: grid; gap: 8px; }
.pie__link { display: inline-flex; align-items: center; gap: 8px; color: var(--texto); text-decoration: none; }
.pie__link:hover { color: var(--rosa); }
.pie__base { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: .85rem; color: var(--texto-3); }
.pie__base a { color: var(--texto-2); text-decoration: none; }
.pie__base a:hover { color: var(--rosa); }
.pie__nova { opacity: .85; }
.pie__arriba { display: inline-flex; align-items: center; gap: 6px; }
.pie__konami { font: 400 1rem/1 var(--f-vhs); letter-spacing: .2em; opacity: .35; }

/* ---------- Revelado al hacer scroll (sin librerías) ---------- */
.reveal.armed { opacity: 0; transform: translateY(40px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--k, 0) * 90ms); }
.reveal.armed.in { opacity: 1; transform: none; }
.tv.reveal.armed { transform: perspective(900px) rotateX(18deg) translateY(60px) scale(.94); }
.tv.reveal.armed.in { transform: none; }

/* ---------- Aviso (toast) ---------- */
.aviso { position: fixed; left: 50%; bottom: 26px; z-index: 9700; transform: translate(-50%, 160%); padding: 12px 20px; border-radius: 12px; background: #0c0716; border: 1px solid var(--rosa); box-shadow: 0 0 30px rgba(255, 79, 216, .45); font: 400 1.35rem/1.1 var(--f-vhs); letter-spacing: .06em; color: #fff; opacity: 0; visibility: hidden; transition: transform .45s var(--ease), opacity .3s, visibility 0s .45s; pointer-events: none; max-width: calc(100vw - 32px); text-align: center; }
.aviso:empty { display: none; }
.aviso.is-on { transform: translate(-50%, 0); opacity: 1; visibility: visible; transition: transform .45s var(--ease), opacity .3s, visibility 0s; }

/* ---------- Estela del cursor y modo arcade ---------- */
.estela { position: fixed; inset: 0; z-index: 9600; pointer-events: none; display: none; }
.con-estela .estela { display: block; }
.crt { display: none; }
.arcade .crt { display: block; position: fixed; inset: 0; z-index: 9500; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .3) 0 2px, transparent 2px 4px), repeating-linear-gradient(90deg, rgba(255, 0, 0, .05) 0 1px, rgba(0, 255, 0, .04) 1px 2px, rgba(0, 0, 255, .05) 2px 3px), radial-gradient(ellipse at center, transparent 58%, rgba(0, 0, 0, .7) 100%); animation: crt .14s steps(2) infinite; }
@keyframes crt { 50% { opacity: .92; } }
.arcade main, .arcade .pie { filter: saturate(1.35) contrast(1.08); }
.arcade :is(.h2, .ev__titulo, .of__titulo, .xp__sub, .pasos h3, .vip__caja-cab h3, .tv__titulo, .ticker__item, .donde__calle, .pie__h, .espacio h4, .nav__lista a, .btn, .djs li, .hor__nombre, .ev-vacio__t, .of-vacio__t, .vip__listo-t, .vip__ok-t) { font-family: var(--f-arcade) !important; letter-spacing: 0 !important; line-height: 1.35 !important; }
.arcade .h2 { font-size: clamp(1.5rem, 3.6vw, 3rem); background: none; color: var(--amarillo); filter: none; text-shadow: 4px 4px 0 var(--magenta), 0 0 20px rgba(255, 230, 0, .5); }
.arcade .ev__titulo, .arcade .of__titulo { font-size: clamp(1rem, 1.8vw, 1.5rem); }
.arcade .ev--destacado .ev__titulo { font-size: clamp(1.3rem, 2.4vw, 2rem); }
.arcade .xp__sub, .arcade .vip__caja-cab h3, .arcade .pasos h3, .arcade .donde__calle, .arcade .espacio h4 { font-size: clamp(.9rem, 1.6vw, 1.25rem); }
.arcade .ticker__item { font-size: clamp(.9rem, 1.6vw, 1.3rem); }
.arcade .btn, .arcade .nav__lista a { font-size: .62rem; }
.arcade .djs li, .arcade .hor__nombre, .arcade .tv__titulo { font-size: .85rem; }
.arcade .pie__h { font-size: .9rem; }
.arcade .logo__nombre { font-family: var(--f-arcade); font-size: .38em; letter-spacing: 0; }
.arcade .logo__8 { font-family: var(--f-arcade); font-size: .32em; }

/* ---------- Captura (QA) y movimiento reducido ---------- */
.captura .hero [data-in], .captura .logo > span { opacity: 1 !important; animation: none !important; }
.captura .reveal { opacity: 1 !important; transform: none !important; }
.captura body::after { animation: none; }
.reduce .hero [data-in], .reduce .logo > span { opacity: 1 !important; animation: none !important; }
.reduce .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .hero__video { display: none; }
  .ticker__pista, .pie__pista { animation: none !important; }
  .hero [data-in], .logo > span { opacity: 1 !important; }
}
@media print {
  .nav, .hero__fondo, .ticker, .walk, .chat, .estela, .crt, .intro, body::after { display: none !important; }
  body { background: #fff; color: #000; }
}