/* ==========================================================
   Diseño "Concierto" · XV años · "Mi era XV · The Tour"
   pase de acceso → apagón + cuenta LED → lightstick → estadio encendido → póster de gira
   Paleta: noche violeta, lila, rosa neón, azul eléctrico, cian y plata holográfica
   ========================================================== */

/* Bungee no está en base.css: se declara aquí (archivos locales, OFL) */
@font-face { font-family: "Bungee"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/bungee-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Bungee"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/bungee-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C4, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --noche: #07040f;
  --noche-2: #120a22;
  --lila: #b98cff;
  --rosa: #ff4fbf;
  --azul: #3d6bff;
  --cian: #45e6ff;
  --plata: #e6e4f5;
  --menta: #5dffc1;
  --tinta: #f3eefe;
  --suave: rgba(243, 238, 254, .7);
  --holo: linear-gradient(110deg, #ffe0f4 0%, #d6c2ff 22%, #b8efff 44%, #fff2c6 62%, #ffc4ea 80%, #d6c2ff 100%);
  --poster: "Bungee", "Arial Black", system-ui, sans-serif;
  --mono: "Space Mono", ui-monospace, monospace;
  --sans: "DM Sans", system-ui, sans-serif;
  --rebote: cubic-bezier(.2, 1.5, .4, 1);
  --curva: cubic-bezier(.22, .7, .18, 1);
  --ls: var(--lila);                      /* color del lightstick (lo cambia el JS) */

  --s-fondo: transparent;
  --s-tinta: var(--tinta);
  --s-suave: var(--suave);
  --s-acento: var(--rosa);
  --s-acento-tinta: #fff;
  --s-tarjeta: rgba(255, 255, 255, .045);
  --s-borde: rgba(185, 140, 255, .26);
  --s-radio: 20px;
  --s-sombra: 0 22px 40px -26px rgba(255, 79, 191, .55);
  --s-fuente: var(--sans);
  --s-titulo: var(--poster);
  --s-titulo-tam: clamp(1.85rem, 8.4vw, 2.5rem);
  --s-titulo-color: #fff;
  --s-etiqueta: var(--mono);
  --s-num: var(--poster);
  --s-num-color: #fff;
  --s-btn-linea-color: #fff;
  color-scheme: dark;
}

body {
  background:
    radial-gradient(70% 40% at 0% 18%, rgba(185, 140, 255, .16), transparent 70%),
    radial-gradient(70% 40% at 100% 62%, rgba(255, 79, 191, .13), transparent 70%),
    radial-gradient(60% 30% at 20% 100%, rgba(61, 107, 255, .14), transparent 70%),
    var(--noche);
  background-attachment: fixed;
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 16px;
}
.amp { font-family: var(--sans); color: var(--rosa); }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ================= ESTADIO (hero) ================= */
.estadio {
  --pw: min(76vw, 46vh, 360px);           /* ancho de la pantalla LED */
  --ptop: calc(env(safe-area-inset-top) + 72px);
  --energia: 0;
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  user-select: none;
  -webkit-user-select: none;
  background:
    radial-gradient(90% 45% at 50% 0%, rgba(120, 70, 220, .45), transparent 70%),
    radial-gradient(60% 40% at 50% 58%, rgba(255, 79, 191, .12), transparent 70%),
    linear-gradient(180deg, #0c0620 0%, var(--noche) 60%, #030207 100%);
}
@supports (height: 1svh) { .estadio { --pw: min(76vw, 46svh, 360px); } }

.estadio__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  opacity: .26;
  filter: hue-rotate(85deg) saturate(1.4) brightness(.7);
  transition: opacity 1.4s ease;
  z-index: 0;
}
.f-apagon .estadio__foto, .f-cuenta .estadio__foto { opacity: .06; }
.f-show .estadio__foto { opacity: .4; }

/* Humo */
.humo { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.humo i {
  position: absolute;
  left: -20%;
  width: 140%;
  height: 46%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(185, 140, 255, .26), transparent);
  animation: deriva 16s ease-in-out infinite alternate;
}
.humo i:nth-child(1) { top: 30%; }
.humo i:nth-child(2) { top: 48%; background: radial-gradient(closest-side, rgba(255, 79, 191, .2), transparent); animation-duration: 21s; animation-delay: -6s; }
.humo i:nth-child(3) { top: 60%; background: radial-gradient(closest-side, rgba(61, 107, 255, .22), transparent); animation-duration: 18s; animation-delay: -11s; }
.humo i:nth-child(4) { top: 12%; height: 30%; background: radial-gradient(closest-side, rgba(255, 255, 255, .07), transparent); animation-duration: 25s; }
@keyframes deriva { from { transform: translateX(-8%) scale(1); } to { transform: translateX(8%) scale(1.12); } }

/* Láseres desde el techo del escenario */
.lasers {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: calc(.22 + var(--energia) * .78);
  transition: opacity .5s ease;
}
.f-apagon .lasers, .f-cuenta .lasers { opacity: 0; }
.f-show .lasers { opacity: .9; }
.lasers i {
  --c: var(--lila);
  --a0: -28deg;
  --a1: 26deg;
  position: absolute;
  top: -2%;
  width: 2px;
  height: 150%;
  transform-origin: 50% 0;
  background: linear-gradient(180deg, var(--c), rgba(255, 255, 255, 0) 80%);
  box-shadow: 0 0 10px 1px var(--c);
  animation: barrido 4.2s ease-in-out infinite alternate;
}
.lasers i:nth-child(1) { left: 6%; --c: var(--rosa); --a0: -40deg; --a1: -8deg; }
.lasers i:nth-child(2) { left: 18%; --c: var(--cian); animation-duration: 3.4s; animation-delay: -1s; }
.lasers i:nth-child(3) { left: 30%; --c: var(--lila); --a0: 30deg; --a1: -22deg; animation-duration: 5s; }
.lasers i:nth-child(4) { left: 44%; --c: var(--rosa); --a0: -18deg; --a1: 18deg; animation-duration: 2.8s; animation-delay: -2s; }
.lasers i:nth-child(5) { left: 56%; --c: var(--azul); --a0: 18deg; --a1: -18deg; animation-duration: 3.1s; }
.lasers i:nth-child(6) { left: 70%; --c: var(--lila); --a0: -26deg; --a1: 30deg; animation-duration: 4.6s; animation-delay: -3s; }
.lasers i:nth-child(7) { left: 82%; --c: var(--cian); --a0: 22deg; --a1: -14deg; animation-duration: 3.7s; }
.lasers i:nth-child(8) { left: 94%; --c: var(--rosa); --a0: 40deg; --a1: 8deg; animation-delay: -1.5s; }
.f-show .lasers i { animation-duration: 1.8s; }
@keyframes barrido { from { transform: rotate(var(--a0)); } to { transform: rotate(var(--a1)); } }

/* Reflectores (solo en el show) */
.focos { position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: screen; }
.focos i {
  position: absolute;
  top: -4%;
  width: 70vw;
  max-width: 560px;
  height: 115%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 78%);
  clip-path: polygon(47% 0, 53% 0, 100% 100%, 0 100%);
  transform-origin: 50% 0;
  opacity: 0;
  transition: opacity 1s ease;
}
.focos i:nth-child(1) { left: -30%; --g0: -24deg; --g1: 4deg; }
.focos i:nth-child(2) { left: 50%; margin-left: min(-35vw, -280px); --g0: -10deg; --g1: 10deg; background: linear-gradient(180deg, rgba(255, 190, 236, .45), transparent 78%); }
.focos i:nth-child(3) { right: -30%; --g0: 24deg; --g1: -4deg; }
.f-show .focos i { opacity: .5; animation: foco 5s ease-in-out infinite alternate; }
.f-show .focos i:nth-child(2) { opacity: .35; animation-duration: 7s; }
@keyframes foco { from { transform: rotate(var(--g0)); } to { transform: rotate(var(--g1)); } }

/* Mar de lightsticks (canvas) + siluetas del público */
.publico { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
.multitud {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: clamp(100px, 22vh, 200px);
  z-index: 4;
  pointer-events: none;
}
.multitud__atras { fill: #140b24; stroke: #140b24; }
.multitud__frente { fill: #030206; stroke: #030206; }
.multitud path { fill: none; stroke-linecap: round; }

.destello {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  background: radial-gradient(circle at 50% 38%, #fff 0%, rgba(255, 230, 250, .75) 35%, rgba(255, 255, 255, 0) 75%);
  opacity: 0;
}
.boom .destello { animation: flash 1.1s ease-out both; }
@keyframes flash { 0% { opacity: 0; } 8% { opacity: 1; } 100% { opacity: 0; } }

.apagon {
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  background: #000;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.f-apagon .apagon, .f-cuenta .apagon { opacity: .9; }
.f-agitar .apagon { opacity: calc(.38 - var(--energia) * .3); transition-duration: .6s; }

/* ---------- Medidor de energía ---------- */
.marcador {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 14px);
  left: 50%;
  z-index: 12;
  width: min(calc(100% - 128px), 420px);
  transform: translate(-50%, -12px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s ease, transform .6s var(--curva), visibility 0s .6s;
}
.f-agitar .marcador, .boom .marcador { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.revelado .marcador { opacity: 0; visibility: hidden; transition: opacity .8s ease 1.6s, visibility 0s 2.4s; }
.marcador__t {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 6px;
  font-family: var(--mono);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .8);
}
.marcador__t b { font-family: var(--poster); font-weight: 400; font-size: 1rem; letter-spacing: .02em; color: var(--ls); text-shadow: 0 0 10px var(--ls); }
.marcador__barra {
  position: relative;
  height: 13px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .18);
}
.marcador__nivel {
  position: absolute;
  inset: 0;
  transform-origin: 0 50%;
  transform: scaleX(var(--energia));
  background: linear-gradient(90deg, var(--azul), var(--lila) 40%, var(--rosa) 75%, #fff);
  box-shadow: 0 0 14px var(--rosa);
  transition: transform .18s linear;
}
.marcador__barra::after {                 /* segmentos tipo LED */
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 calc(5% - 2px), rgba(7, 4, 15, .85) calc(5% - 2px) 5%);
}
.marcador__aviso { margin: 6px 0 0; min-height: 1.1em; font-family: var(--poster); font-size: .72rem; text-align: center; color: var(--ls); text-shadow: 0 0 10px var(--ls); }

/* ---------- Pantalla LED gigante ---------- */
.pantalla {
  position: absolute;
  top: var(--ptop);
  left: 50%;
  z-index: 10;
  width: var(--pw);
  aspect-ratio: 4 / 5;
  transform: translateX(-50%);
  pointer-events: none;
}
.pantalla::before {                       /* resplandor del color del público */
  content: "";
  position: absolute;
  inset: -22% -30%;
  background: radial-gradient(closest-side, var(--ls), transparent);
  opacity: calc(.12 + var(--energia) * .4);
  transition: opacity .4s ease;
}
.f-show .pantalla::before { opacity: .5; }
.pantalla__torre {
  position: absolute;
  top: -12%;
  bottom: -60%;
  width: 11px;
  background:
    linear-gradient(90deg, #8f8aa8 0 1.5px, transparent 1.5px calc(100% - 1.5px), #8f8aa8 calc(100% - 1.5px)),
    repeating-linear-gradient(45deg, transparent 0 7px, rgba(180, 175, 205, .55) 7px 8.5px, transparent 8.5px 14px),
    repeating-linear-gradient(-45deg, transparent 0 7px, rgba(180, 175, 205, .4) 7px 8.5px, transparent 8.5px 14px);
  opacity: .55;
}
.pantalla__torre--i { left: -20px; }
.pantalla__torre--d { right: -20px; }
.pantalla__marco {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 6px;
  border-radius: 14px;
  background: linear-gradient(160deg, #3a3550, #0d0b14 40%, #24203a);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 30px 60px -20px rgba(0, 0, 0, .9);
}
.pantalla__led {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 9px;
  background: radial-gradient(120% 80% at 50% 30%, #1c0f38, #05030b 75%);
  container-type: inline-size;
}
.pantalla__led > * { position: absolute; inset: 0; margin: 0; }
.pantalla__puntos {
  z-index: 6;
  pointer-events: none;
  background:
    radial-gradient(circle, transparent 52%, rgba(0, 0, 0, .5) 62%) 0 0 / 4px 4px,
    linear-gradient(180deg, rgba(255, 255, 255, .06), transparent 30%, transparent 70%, rgba(0, 0, 0, .3));
}

/* Contenido "en espera": MI ERA XV · THE TOUR */
.pantalla__idle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
  transition: opacity .6s ease;
}
.f-apagon .pantalla__idle, .f-cuenta .pantalla__idle, .f-agitar .pantalla__idle, .f-show .pantalla__idle { opacity: 0; }
.pantalla__vivo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  padding: 3px 9px;
  border-radius: 4px;
  background: rgba(255, 60, 110, .18);
  border: 1px solid rgba(255, 60, 110, .6);
  font-family: var(--mono);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.pantalla__vivo i { width: 7px; height: 7px; border-radius: 50%; background: #ff3c6e; box-shadow: 0 0 8px #ff3c6e; animation: latido 1.2s ease-in-out infinite; }
@keyframes latido { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.pantalla__era { font-family: var(--poster); font-size: 9cqw; letter-spacing: .14em; padding-left: .14em; color: var(--plata); }
.pantalla__xv {
  font-family: var(--poster);
  font-size: 44cqw;
  line-height: .95;
  background: var(--holo);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 14px rgba(185, 140, 255, .8));
  animation: holo 5s linear infinite;
}
.pantalla__tour { font-family: var(--mono); font-weight: 700; font-size: 6.5cqw; letter-spacing: .5em; padding-left: .5em; color: var(--rosa); text-shadow: 0 0 10px var(--rosa); }
.pantalla__eq { display: flex; align-items: flex-end; gap: 4px; height: 26px; margin-top: 14px; }
.pantalla__eq i { width: 6px; height: 30%; border-radius: 2px; background: linear-gradient(0deg, var(--azul), var(--rosa)); animation: eq .8s ease-in-out infinite alternate; }
.pantalla__eq i:nth-child(2) { animation-delay: -.2s; }
.pantalla__eq i:nth-child(3) { animation-delay: -.5s; }
.pantalla__eq i:nth-child(4) { animation-delay: -.1s; }
.pantalla__eq i:nth-child(5) { animation-delay: -.6s; }
.pantalla__eq i:nth-child(6) { animation-delay: -.35s; }
.pantalla__eq i:nth-child(7) { animation-delay: -.7s; }
@keyframes eq { from { height: 18%; } to { height: 100%; } }
@keyframes holo { from { background-position: 0% 50%; } to { background-position: 200% 50%; } }

.pantalla__luces {
  display: grid;
  place-items: center;
  padding: 0 10%;
  font-family: var(--mono);
  font-size: 6cqw;
  font-weight: 700;
  letter-spacing: .12em;
  text-align: center;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
  opacity: 0;
  transition: opacity .6s ease;
}
.f-apagon .pantalla__luces { opacity: 1; animation: latido 1.4s ease-in-out infinite; }

.pantalla__num {
  display: grid;
  place-items: center;
  font-family: var(--poster);
  font-size: 9rem;
  font-size: 66cqw;
  line-height: 1;
  color: #fff;
  text-shadow: 0 0 18px var(--rosa), 0 0 50px var(--lila);
  opacity: 0;
}
.f-cuenta .pantalla__num { opacity: 1; }
.pantalla__num.late { animation: golpeNum .8s var(--curva) both; }
@keyframes golpeNum {
  0% { transform: scale(1.6); opacity: 0; filter: blur(6px); }
  25% { transform: scale(1); opacity: 1; filter: blur(0); }
  100% { transform: scale(.88); opacity: .75; filter: blur(0); }
}

.pantalla__msg {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 8%;
  text-align: center;
  opacity: 0;
  transition: opacity .5s ease;
}
.f-agitar .pantalla__msg { opacity: 1; }
.pantalla__agita {
  margin: 0;
  font-family: var(--poster);
  font-size: 1.4rem;
  font-size: 9cqw;
  line-height: 1.1;
  overflow-wrap: anywhere;
  color: #fff;
  text-shadow: 0 0 12px var(--ls), 0 0 34px var(--ls);
  animation: parpadeo 1.6s ease-in-out infinite;
}
.pantalla__tip { margin: 0; font-family: var(--mono); font-size: 5cqw; letter-spacing: .08em; color: rgba(255, 255, 255, .78); }
@keyframes parpadeo { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .82; transform: scale(.97); } }

/* Foto + póster de gira */
.pantalla__foto { opacity: 0; transition: opacity .3s ease; }
.f-show .pantalla__foto { opacity: 1; }
.pantalla__foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; transform: scale(1.12); transition: transform 6s var(--curva); }
.revelado .pantalla__foto img { transform: scale(1); }
.poster {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 40% 6% 7%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(180deg, transparent, rgba(12, 5, 30, .55) 45%, rgba(7, 4, 15, .92));
  text-align: center;
}
.poster__tour {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--holo);
  color: #2a1640;
  font-family: var(--mono);
  font-size: .6rem;
  font-size: 4.2cqw;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .6s ease .9s, transform .6s var(--rebote) .9s;
}
.poster__nombre {
  margin: 6px 0 0;
  font-family: var(--poster);
  font-weight: 400;
  font-size: 3rem;
  font-size: 17cqw;
  line-height: .95;
  letter-spacing: .01em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  background: var(--holo);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 12px rgba(255, 79, 191, .7));
  opacity: 0;
  transform: scale(1.4);
  transition: opacity .7s ease 1.05s, transform .9s var(--rebote) 1.05s;
  animation: holo 6s linear infinite;
}
.poster__nombre--largo { font-size: 11cqw; }
.revelado .poster__tour, .revelado .poster__nombre { opacity: 1; transform: none; }

/* Telón LED: tiras que suben en cascada */
.telon-led { z-index: 4; display: flex; pointer-events: none; }
.telon-led i {
  flex: 1;
  height: 100%;
  background:
    radial-gradient(circle, rgba(255, 255, 255, .5) 0 1px, transparent 1.5px) 0 0 / 5px 5px,
    linear-gradient(180deg, var(--ls), #1b0c3a 70%, #090414);
  border-right: 1px solid rgba(0, 0, 0, .5);
  opacity: 0;
}
.boom .telon-led i { opacity: 1; animation: subirTira .9s cubic-bezier(.6, 0, .3, 1) both; }
.boom .telon-led i:nth-child(1) { animation-delay: .32s; }
.boom .telon-led i:nth-child(2) { animation-delay: .38s; }
.boom .telon-led i:nth-child(3) { animation-delay: .26s; }
.boom .telon-led i:nth-child(4) { animation-delay: .44s; }
.boom .telon-led i:nth-child(5) { animation-delay: .2s; }
.boom .telon-led i:nth-child(6) { animation-delay: .2s; }
.boom .telon-led i:nth-child(7) { animation-delay: .44s; }
.boom .telon-led i:nth-child(8) { animation-delay: .26s; }
.boom .telon-led i:nth-child(9) { animation-delay: .38s; }
.boom .telon-led i:nth-child(10) { animation-delay: .32s; }
@keyframes subirTira { from { transform: translateY(0); } to { transform: translateY(-102%); } }
.revelado .telon-led { visibility: hidden; transition: visibility 0s 1.6s; }

/* ---------- Fechas del tour (bajo la pantalla) ---------- */
.gira {
  position: absolute;
  top: calc(var(--ptop) + var(--pw) * 1.25 + 22px);
  left: 50%;
  z-index: 14;
  width: min(calc(100% - 28px), 420px);
  transform: translate(-50%, 16px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .8s ease 1.4s, transform .8s var(--curva) 1.4s, visibility 0s 1.4s;
}
.revelado .gira { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.gira__lema {
  margin: 0 0 6px;
  font-family: var(--mono);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .32em;
  text-align: center;
  text-transform: uppercase;
  background: var(--holo);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.gira__fechas { list-style: none; margin: 0; padding: 0; }
.gira__fila {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 7px 4px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  color: #fff;
  text-decoration: none;
}
.gira__fechas li:last-child .gira__fila { border-bottom: 1px solid rgba(255, 255, 255, .14); }
.gira__fila:focus-visible { outline: 2px solid var(--rosa); outline-offset: 2px; }
.gira__dia { font-family: var(--poster); font-size: 1.35rem; line-height: 1; text-align: center; }
.gira__dia small { display: block; margin-top: 2px; font-family: var(--mono); font-size: .56rem; font-weight: 700; letter-spacing: .14em; color: var(--lila); }
.gira__info { min-width: 0; }
.gira__evento, .gira__lugar { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.gira__evento { font-weight: 700; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; }
.gira__lugar { font-size: .72rem; color: rgba(255, 255, 255, .66); }
.gira__hora { padding: 4px 7px; border: 1px solid var(--rosa); border-radius: 6px; font-family: var(--mono); font-size: .74rem; font-weight: 700; color: var(--rosa); box-shadow: 0 0 10px -3px var(--rosa); }

/* ---------- Zona para agitar + lightstick ---------- */
.zona {
  position: absolute;
  inset: 0;
  z-index: 8;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: grab;
  touch-action: none;
}
.zona:disabled { pointer-events: none; visibility: hidden; }
.zona:active { cursor: grabbing; }
.zona:focus-visible { outline: 3px solid var(--ls); outline-offset: -6px; }

.lightstick {
  --lw: min(30vw, 21vh, 128px);
  position: absolute;
  left: 50%;
  bottom: calc(var(--lw) * -1.1);
  z-index: 11;
  width: var(--lw);
  pointer-events: none;
  transform: translate(-50%, 115%);
  transition: transform 1s var(--rebote);
}
.f-agitar .lightstick { transform: translate(-50%, 0); }
.f-show .lightstick { transform: translate(-50%, 125%); transition: transform .9s cubic-bezier(.5, 0, .7, .3) .2s; }
.lightstick__mueve { position: relative; transform-origin: 50% 88%; will-change: transform; }
.lightstick__halo {
  position: absolute;
  left: 50%;
  top: 22%;
  width: 260%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, var(--ls), transparent);
  opacity: .55;
  pointer-events: none;
}
.ls { position: relative; display: block; width: 100%; height: auto; overflow: visible; }
.ls-luz { fill: var(--ls); transition: fill .35s ease; }
.ls-gema { fill: var(--ls); stroke: #fff; stroke-width: 1.2; transition: fill .35s ease; }
.ls-boton { fill: var(--ls); stroke: rgba(255, 255, 255, .7); stroke-width: 1.2; }
.ls-xv { font-family: var(--poster); font-size: 26px; fill: #fff; opacity: .92; }

/* ---------- Controles del juego ---------- */
.control { position: absolute; inset: 0; z-index: 13; pointer-events: none; }
.control > * { pointer-events: auto; }
.control button { font: inherit; -webkit-tap-highlight-color: transparent; }
.colores, .giro, .btn-auto { opacity: 0; visibility: hidden; transition: opacity .6s ease, transform .6s var(--curva), visibility 0s .6s; }
.f-agitar .colores, .f-agitar .giro, .f-agitar .btn-auto { opacity: 1; visibility: visible; transition-delay: .5s, .5s, 0s; }
.colores {
  position: absolute;
  right: 12px;
  bottom: calc(env(safe-area-inset-bottom) + 84px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 7px;
  border-radius: 999px;
  background: rgba(10, 6, 22, .55);
  border: 1px solid rgba(255, 255, 255, .12);
  transform: translateX(20px);
}
.f-agitar .colores { transform: none; }
.color {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .3);
  cursor: pointer;
  transition: transform .25s var(--rebote), box-shadow .3s, border-color .3s;
}
.color--lila { background: radial-gradient(circle at 35% 30%, #fff, var(--lila) 55%, #6c3fd1); }
.color--rosa { background: radial-gradient(circle at 35% 30%, #fff, var(--rosa) 55%, #b5157f); }
.color--azul { background: radial-gradient(circle at 35% 30%, #fff, var(--azul) 55%, #1c2fa8); }
.color--plata { background: radial-gradient(circle at 35% 30%, #fff, #d9d6ea 50%, #9fd8ff 75%, #f4b8e4); }
.color[aria-pressed="true"] { border-color: #fff; transform: scale(1.15); box-shadow: 0 0 0 3px rgba(255, 255, 255, .15), 0 0 16px 2px var(--ls); }
.color:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.giro {
  position: absolute;
  left: 12px;
  bottom: calc(env(safe-area-inset-bottom) + 84px);
  width: 84px;
  min-height: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 6px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(10, 6, 22, .6);
  color: #fff;
  font-family: var(--mono);
  font-size: .56rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .04em;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  transform: translateX(-20px);
}
.f-agitar .giro { transform: none; }
.giro[aria-pressed="true"] { border-color: var(--menta); color: var(--menta); box-shadow: 0 0 14px -4px var(--menta); }
.giro:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.btn-auto {
  position: absolute;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + 16px);
  max-width: calc(100% - 32px);
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  background:
    linear-gradient(rgba(14, 8, 30, .88), rgba(14, 8, 30, .88)) padding-box,
    var(--holo) border-box;
  color: #fff;
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 0 22px -6px var(--ls);
  transform: translate(-50%, 20px);
}
.f-agitar .btn-auto { transform: translate(-50%, 0); }
.btn-auto svg { color: #ffe27a; }
.btn-auto:active { transform: translate(-50%, 0) scale(.96); }
.btn-auto:disabled { opacity: .5; cursor: default; }
.btn-auto:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ---------- Pase de acceso ---------- */
.acceso {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: calc(env(safe-area-inset-top) + 24px) 16px calc(env(safe-area-inset-bottom) + 24px);
  background: radial-gradient(70% 55% at 50% 45%, rgba(46, 18, 84, .55), rgba(5, 3, 10, .9));
  transition: opacity .8s ease, transform .9s var(--curva), visibility 0s .9s;
}
.entrada .acceso { opacity: 0; transform: translateY(-40px) scale(.94); visibility: hidden; pointer-events: none; }
.acceso__pre {
  margin: 0;
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .28em;
  text-align: center;
  text-transform: uppercase;
  color: var(--lila);
  text-shadow: 0 0 10px rgba(185, 140, 255, .7);
}
.acceso__hint { margin: 0; max-width: 20em; font-family: var(--mono); font-size: .66rem; letter-spacing: .06em; text-align: center; color: rgba(255, 255, 255, .78); }
.acceso__flecha { display: inline-block; animation: bajar 1.3s ease-in-out infinite; }
@keyframes bajar { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(4px); } }

.boleto {
  position: relative;
  width: min(84vw, 330px);
  filter: drop-shadow(0 26px 40px rgba(0, 0, 0, .65)) drop-shadow(0 0 30px rgba(185, 140, 255, .25));
  animation: flotaBoleto 4s ease-in-out infinite alternate;
}
@keyframes flotaBoleto { from { transform: translateY(0) rotate(-1deg); } to { transform: translateY(-6px) rotate(1deg); } }
.boleto__cuerpo {
  position: relative;
  overflow: hidden;
  padding: 18px 20px 16px;
  border-radius: 18px 18px 6px 6px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-bottom: 0;
  background:
    radial-gradient(120% 70% at 100% 0%, rgba(255, 79, 191, .25), transparent 60%),
    radial-gradient(100% 60% at 0% 100%, rgba(61, 107, 255, .25), transparent 60%),
    linear-gradient(160deg, #1d1236, #110a21 60%, #1b0f2f);
}
.boleto__holo {                           /* brillo holográfico que recorre el boleto */
  position: absolute;
  inset: -40%;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 224, 244, .16) 44%, rgba(184, 239, 255, .22) 50%, rgba(214, 194, 255, .16) 56%, transparent 62%);
  animation: brilloHolo 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes brilloHolo { from { transform: translateX(-40%); } to { transform: translateX(40%); } }
.boleto__gira { position: relative; margin: 0; font-family: var(--mono); font-size: .6rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--lila); }
.boleto__artista {
  position: relative;
  margin: 4px 0 10px;
  font-family: var(--poster);
  font-size: clamp(2.1rem, 11vw, 2.8rem);
  line-height: 1;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  background: var(--holo);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: holo 6s linear infinite;
}
.boleto__artista--largo { font-size: clamp(1.4rem, 7vw, 1.9rem); }
.boleto__admite { position: relative; margin: 0 0 12px; }
.boleto__admite span { display: block; font-family: var(--mono); font-size: .56rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.boleto__admite b { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 1.12rem; font-weight: 700; }
.boleto__datos { position: relative; display: grid; grid-template-columns: 1.45fr 1fr 1fr 1fr; gap: 6px; margin: 0 0 10px; padding: 10px 0; border-block: 1px dashed rgba(255, 255, 255, .2); }
.boleto__datos dt { font-family: var(--mono); font-size: .5rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.boleto__datos dd { margin: 2px 0 0; font-family: var(--poster); font-size: .9rem; white-space: nowrap; }
.boleto__zona { position: relative; margin: 0 0 12px; font-family: var(--mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .75); }
.boleto__zona b { color: var(--rosa); }
.boleto__codigo { position: relative; height: 42px; padding: 5px 8px; border-radius: 8px; background: #f5f2ff; overflow: hidden; }
.barras { display: block; width: 100%; height: 100%; fill: #120a21; }
.boleto__laser {
  position: absolute;
  left: 4px;
  right: 4px;
  top: 0;
  height: 2px;
  background: #ff2f74;
  box-shadow: 0 0 8px 2px rgba(255, 47, 116, .8);
  animation: escaneo 1.8s ease-in-out infinite alternate;
}
@keyframes escaneo { from { transform: translateY(2px); } to { transform: translateY(38px); } }
.boleto__sello {
  position: absolute;
  left: 50%;
  top: 46%;
  margin: 0;
  padding: 8px 14px;
  border: 3px solid var(--menta);
  border-radius: 10px;
  font-family: var(--poster);
  font-size: 1.05rem;
  line-height: 1.1;
  letter-spacing: .04em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--menta);
  background: rgba(5, 20, 14, .6);
  box-shadow: 0 0 22px -2px var(--menta), inset 0 0 14px -4px var(--menta);
  text-shadow: 0 0 10px var(--menta);
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-12deg) scale(2.2);
  pointer-events: none;
}
.sellado .boleto__sello { animation: sello .5s var(--rebote) both; }
@keyframes sello {
  from { opacity: 0; transform: translate(-50%, -50%) rotate(-12deg) scale(2.2); }
  to { opacity: 1; transform: translate(-50%, -50%) rotate(-12deg) scale(1); }
}
.sellado .boleto__laser { animation: none; opacity: 0; }

/* Muescas de la perforación */
.boleto__cuerpo::before, .boleto__cuerpo::after {
  content: "";
  position: absolute;
  bottom: -11px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #12081f;
  z-index: 2;
}
.boleto__cuerpo::before { left: -11px; }
.boleto__cuerpo::after { right: -11px; }

.boleto__talon {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 4px 10px;
  width: 100%;
  margin: 0;
  padding: 12px 18px 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-top: 2px dashed rgba(255, 255, 255, .45);
  border-radius: 6px 6px 18px 18px;
  background: linear-gradient(160deg, #26174a, #160c2a);
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: grab;
  touch-action: none;
  animation: tiron 2.6s ease-in-out infinite;
  will-change: transform;
}
.boleto__talon:active { cursor: grabbing; }
.boleto__talon:focus-visible { outline: 2px solid var(--rosa); outline-offset: 3px; }
.boleto__talon::before, .boleto__talon::after {
  content: "";
  position: absolute;
  top: -12px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #12081f;
}
.boleto__talon::before { left: -12px; }
.boleto__talon::after { right: -12px; }
.boleto__talon .barras { grid-column: 1 / -1; height: 22px; fill: rgba(255, 255, 255, .85); }
.boleto__tijera { font-size: 1.1rem; color: var(--rosa); }
.boleto__rasga { font-family: var(--mono); font-size: .66rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.boleto__vip { font-family: var(--poster); font-size: .8rem; color: var(--lila); }
@keyframes tiron { 0%, 70%, 100% { transform: translateY(0) rotate(0); } 78% { transform: translateY(7px) rotate(1.2deg); } 86% { transform: translateY(0) rotate(0); } 92% { transform: translateY(4px) rotate(-.8deg); } }
.boleto__talon.arrastrando { animation: none; transition: none; }
.boleto__talon.vuelve { animation: none; transition: transform .35s var(--rebote); }
.boleto__talon.rasgado { animation: caerTalon 1.1s cubic-bezier(.5, 0, .9, .5) forwards; pointer-events: none; }
@keyframes caerTalon {
  from { transform: translateY(var(--ty, 40px)) rotate(var(--tr, 3deg)); opacity: 1; }
  to { transform: translateY(90vh) rotate(28deg); opacity: 0; }
}

/* Botón de sonido */
.sonido {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 10px);
  right: 10px;
  z-index: 25;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(10, 6, 22, .55);
  color: #fff;
  cursor: pointer;
}
.sonido:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.sonido .son-x { display: none; }
.sonido[aria-pressed="true"] .son-x { display: inline; }
.sonido[aria-pressed="true"] .son-onda { display: none; }

.estadio .desliza-c { z-index: 15; color: #fff; }

/* Sacudida de cámara en la explosión */
.boom .pantalla__marco { animation: sacudida .5s ease-out both; }
@keyframes sacudida {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-5px, 3px); }
  40% { transform: translate(5px, -3px); }
  60% { transform: translate(-3px, 2px); }
  80% { transform: translate(2px, -1px); }
  100% { transform: translate(0, 0); }
}

/* ================= INVITACIÓN ================= */
.contenido { position: relative; }
.s-titulo {
  background: var(--holo);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: .01em;
  text-transform: uppercase;
  filter: drop-shadow(0 0 14px rgba(185, 140, 255, .45));
}
.eyebrow { margin: 0 0 12px; font-family: var(--mono); font-size: .68rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--lila); }

.bienvenida { padding-top: 84px; }
.bienvenida__texto { margin: 0; max-width: 24em; font-size: 1.08rem; line-height: 1.7; color: var(--suave); }
.creditos {
  position: relative;
  width: 100%;
  margin-top: 32px;
  padding: 24px 20px 10px;
  border-radius: var(--s-radio);
  border: 1px solid var(--s-borde);
  background: var(--s-tarjeta);
}
.creditos::before {
  content: "";
  position: absolute;
  left: 20%;
  right: 20%;
  top: -1px;
  height: 2px;
  background: var(--holo);
  border-radius: 2px;
}
.creditos__t { margin: 0; font-family: var(--mono); font-size: .62rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--lila); }
.creditos__n { margin: 4px 0 18px; font-size: 1.15rem; font-weight: 700; }

/* Cuenta regresiva estilo LED */
.s-cuenta__caja {
  background: linear-gradient(180deg, #150c2b, #0a0616);
  border: 1px solid rgba(255, 79, 191, .4);
  box-shadow: inset 0 0 18px rgba(255, 79, 191, .15), 0 0 26px -10px rgba(255, 79, 191, .8);
}
.s-cuenta__num { text-shadow: 0 0 12px var(--rosa); }
.s-cuenta__lbl { color: var(--lila); }
.s-cuenta__fin { font-family: var(--poster); color: var(--rosa); text-shadow: 0 0 14px var(--rosa); }
.s-cuenta__fecha { color: var(--suave); }

/* Fechas del tour */
.s-evento { position: relative; overflow: hidden; background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)); }
.s-evento::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--holo); }
.s-evento__icono { color: var(--cian); border-color: var(--cian); box-shadow: 0 0 16px -4px var(--cian), inset 0 0 10px -4px var(--cian); }
.s-evento__hora { color: var(--rosa); text-shadow: 0 0 12px rgba(255, 79, 191, .6); }
.s-evento__titulo { color: #fff; }

/* Setlist */
.setlist__d { margin: -12px 0 20px; font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; color: var(--suave); }
.setlist__lista {
  list-style: none;
  width: 100%;
  margin: 0;
  padding: 0;
  border-radius: var(--s-radio);
  border: 1px solid var(--s-borde);
  background: rgba(255, 255, 255, .03);
  overflow: hidden;
}
.track {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto 38px;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 60px;
  margin: 0;
  padding: 12px 14px;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .07);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color .3s;
}
.setlist__lista li:first-child .track { border-top: 0; }
.track:hover { background: rgba(255, 255, 255, .04); }
.track:focus-visible { outline: 2px solid var(--rosa); outline-offset: -3px; }
.track__n { font-family: var(--mono); font-size: .8rem; font-weight: 700; color: var(--lila); }
.track__info { min-width: 0; }
.track__t { display: block; font-weight: 700; font-size: .95rem; line-height: 1.3; }
.track__h { display: block; margin-top: 2px; font-family: var(--mono); font-size: .66rem; color: rgba(255, 255, 255, .55); }
.track__eq { display: flex; align-items: flex-end; gap: 2px; height: 16px; opacity: 0; transition: opacity .3s; }
.track__eq i { width: 3px; height: 30%; border-radius: 1px; background: var(--rosa); }
.track__play { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); color: #fff; transition: background-color .3s, border-color .3s; }
.track[aria-pressed="true"] { background: linear-gradient(90deg, rgba(255, 79, 191, .2), rgba(185, 140, 255, .05)); }
.track[aria-pressed="true"] .track__t { color: #fff; text-shadow: 0 0 10px rgba(255, 79, 191, .7); }
.track[aria-pressed="true"] .track__eq { opacity: 1; }
.track[aria-pressed="true"] .track__eq i { animation: eq .5s ease-in-out infinite alternate; }
.track[aria-pressed="true"] .track__eq i:nth-child(2) { animation-delay: -.2s; }
.track[aria-pressed="true"] .track__eq i:nth-child(3) { animation-delay: -.35s; }
.track[aria-pressed="true"] .track__eq i:nth-child(4) { animation-delay: -.1s; }
.track[aria-pressed="true"] .track__play { background: var(--rosa); border-color: var(--rosa); }

/* Backstage */
.s-foto { border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 18px 34px -22px rgba(255, 79, 191, .7); }

/* Dress code */
.s-vestimenta__tipo { font-family: var(--poster); font-size: 1.5rem; color: var(--rosa); text-shadow: 0 0 14px rgba(255, 79, 191, .6); }
.s-paleta li { border-color: rgba(255, 255, 255, .25); }

/* ---------- Pulsera VIP ---------- */
.pulsera-s__d { margin: -10px 0 8px; max-width: 22em; font-size: 1.02rem; line-height: 1.6; color: var(--suave); }
.pulsera {
  position: relative;
  width: min(100%, 420px);
  height: 220px;
  margin: 4px 0 14px;
}
.pulsera::after {                         /* charolita con las cuentas sueltas */
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 6px;
  height: 46px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(185, 140, 255, .22), transparent);
  border-bottom: 1px solid rgba(185, 140, 255, .25);
  transition: opacity .8s ease;
  z-index: 0;
}
.pulsera.cerrada::after { opacity: 0; }
.pulsera__hilo {
  position: absolute;
  left: 4%;
  top: 34px;
  width: 92%;
  height: 64px;
  overflow: visible;
}
.pulsera__hilo path { fill: none; stroke: rgba(255, 255, 255, .7); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.pulsera__cuentas {
  position: absolute;
  left: 7%;
  right: 7%;
  top: 30px;
  height: 28px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cuenta {
  position: relative;
  flex: 0 1 28px;
  min-width: 0;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  container-type: inline-size;
  transition: transform .75s cubic-bezier(.3, 1.35, .5, 1), opacity .4s ease;
}
.cuenta--letra {
  border-radius: 24%;
  background: linear-gradient(145deg, #ffffff, #ece6ff 60%, #d8cff5);
  box-shadow: inset 0 -2px 3px rgba(60, 30, 110, .25), 0 3px 6px rgba(0, 0, 0, .45);
}
.cuenta--letra span { font-family: var(--poster); font-size: .78rem; font-size: 56cqi; line-height: 1; color: #7b3fe0; }
.cuenta--c1 span { color: #e0279f; }
.cuenta--c2 span { color: #2747d6; }
.cuenta--c3 span { color: #1a1130; }
.cuenta--perla { border-radius: 50%; transform-origin: center; background: radial-gradient(circle at 35% 30%, #fff, #e8dcff 40%, #b8efff 70%, #ffc4ea); box-shadow: 0 3px 6px rgba(0, 0, 0, .4); scale: .78; }
.cuenta--deco svg { width: 92%; height: 92%; overflow: visible; }
.cuenta--estrella svg path { fill: #ffe27a; stroke: #fff; stroke-width: 1; }
.cuenta--corazon svg path { fill: var(--rosa); stroke: #fff; stroke-width: 4; }
.cuenta.puesta { z-index: 2; }

.pulsera__broche {
  position: absolute;
  top: 38px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #e6e4f5;
  background: radial-gradient(circle at 35% 30%, #fff, #9a96b5);
  transition: transform .5s var(--rebote), box-shadow .5s;
}
.pulsera__broche--i { left: calc(4% - 6px); }
.pulsera__broche--d { right: calc(4% - 6px); }
.pulsera.cerrada .pulsera__broche { box-shadow: 0 0 12px 3px rgba(255, 226, 122, .8); transform: scale(1.2); }
.pulsera__brillo {
  position: absolute;
  inset: 10px 0 90px;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .55) 50%, transparent 60%) 0 0 / 250% 100% no-repeat;
  background-position: 120% 0;
  opacity: 0;
  mix-blend-mode: screen;
}
.pulsera.cerrada .pulsera__brillo { animation: barrer 1.2s ease-out .1s both; }
@keyframes barrer { from { opacity: 1; background-position: 120% 0; } to { opacity: 0; background-position: -60% 0; } }
.pulsera-s__lista { margin: 14px 0 0; font-family: var(--poster); font-size: 1rem; color: var(--menta); text-shadow: 0 0 12px rgba(93, 255, 193, .6); animation: aparecerTxt .6s var(--rebote) both; }
@keyframes aparecerTxt { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }

.btn-neon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #8a52ff, var(--rosa));
  color: #fff;
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 0 26px -6px rgba(255, 79, 191, .85);
  transition: transform .2s ease, opacity .3s, box-shadow .3s;
}
.btn-neon:active { transform: scale(.96); }
.btn-neon:disabled { opacity: .45; cursor: default; box-shadow: none; }
.btn-neon:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Banda con foto del escenario */
.banda { position: relative; margin: 10px 16px 0; overflow: hidden; border-radius: 24px; border: 1px solid rgba(255, 255, 255, .12); }
.banda img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.banda figcaption {
  position: absolute;
  inset: auto 0 0;
  padding: 50px 22px 22px;
  background: linear-gradient(180deg, transparent, rgba(7, 4, 15, .9));
  font-family: var(--poster);
  font-size: clamp(1.15rem, 5.4vw, 1.5rem);
  line-height: 1.15;
  text-align: center;
  color: #fff;
  text-shadow: 0 0 16px rgba(185, 140, 255, .9);
}

/* Reservar lugar */
.s-rsvp__saludo { font-family: var(--mono); font-size: .95rem; font-weight: 700; letter-spacing: .06em; color: var(--lila); }
.s-rsvp__texto { color: var(--suave); }
.s-rsvp .s-btn--lleno {
  max-width: 100%;
  min-height: 58px;
  padding: 12px 24px;
  background: linear-gradient(90deg, #8a52ff, var(--rosa));
  line-height: 1.3;
  letter-spacing: .08em;
  text-align: center;
  white-space: normal;
  box-shadow: 0 0 30px -6px rgba(255, 79, 191, .9);
  animation: pulsoBtn 2.4s ease-in-out infinite;
}
.s-rsvp .s-btn--lleno svg { flex: none; }
@keyframes pulsoBtn { 0%, 100% { box-shadow: 0 0 22px -8px rgba(255, 79, 191, .9); } 50% { box-shadow: 0 0 36px -2px rgba(255, 79, 191, .95); } }
.s-btn--linea, .s-btn--mini { border-color: var(--rosa); }

/* Pie */
.s-pie__n {
  font-family: var(--poster);
  text-transform: uppercase;
  background: var(--holo);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.s-pie__t { color: var(--lila); }

/* Pantallas bajas: compacta el hero */
@media (max-height: 640px) {
  .estadio { --ptop: calc(env(safe-area-inset-top) + 64px); --pw: min(72vw, 42vh, 360px); }
  @supports (height: 1svh) { .estadio { --pw: min(72vw, 42svh, 360px); } }
  .gira__fila { padding: 5px 4px; }
}
@media (min-width: 700px) {
  .colores { right: max(16px, calc(50% - 300px)); }
  .giro { left: max(16px, calc(50% - 300px)); }
}

@media (prefers-reduced-motion: reduce) {
  .humo i, .lasers i, .focos i, .pantalla__eq i, .pantalla__xv, .poster__nombre, .boleto, .boleto__holo,
  .boleto__laser, .boleto__talon, .acceso__flecha, .pantalla__agita, .pantalla__vivo i, .s-rsvp .s-btn--lleno,
  .boleto__artista, .pantalla__luces { animation: none !important; }
  .boom .pantalla__marco, .boom .destello { animation: none; }
  .boom .telon-led i { animation: none; opacity: 0; }
  .pantalla__foto img { transition: none; transform: none; }
  .lightstick, .acceso, .gira { transition-duration: .3s; }
  .cuenta { transition-duration: .2s; }
  .track[aria-pressed="true"] .track__eq i { animation: none; height: 70%; }
}