/* ==========================================================
   #enredATE '26 — landing con cuenta regresiva
   Estética basada en el flyer oscuro (img/promo/enredate26-2.jpeg):
   negro verdoso, verde neón, tarjetas redondeadas con borde que brilla,
   tipografía pixel para títulos y redondeada para textos.
   ========================================================== */

:root {
  /* Paleta (verde tomado del logo) */
  --neon: #00f09e;
  --neon-dim: #0c7a55;
  --ink: #000a0a;
  --panel: rgba(1, 18, 15, 0.72);
  --text: #f4fffa;
  --muted: #9fcfbd;

  --glow: 0 0 6px rgba(0, 240, 158, 0.55), 0 0 22px rgba(0, 240, 158, 0.28);
  --glow-strong: 0 0 8px rgba(0, 240, 158, 0.8), 0 0 30px rgba(0, 240, 158, 0.45), 0 0 70px rgba(0, 240, 158, 0.2);

  --font-pixel: "Press Start 2P", ui-monospace, monospace;
  --font-tag: "Jersey 15", ui-monospace, monospace;
  --font-body: "Nunito", system-ui, sans-serif;

  /* Fondo: salón de noche con una luz que falla (img/salon/bg/salon-vacio-09-*).
     Una sola foto (luz apagada); la luz que parpadea es un degradé de CSS
     (ver "Luz que parpadea" más abajo). */
  --bg: url("../assets/img/salon-parpadeo-off.webp");
  --bg-mobile: url("../assets/img/salon-parpadeo-off-960.webp");
  --bg-origin: 52% 16%;       /* punto hacia donde "nos acercamos": la pantalla */
  --bg-filter: saturate(0.9) brightness(1.55);

  --radius: 18px;
  --gutter: clamp(16px, 4vw, 48px);

  color-scheme: dark;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100svh;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 600;
  line-height: 1.4;
  overflow-x: hidden;
}

a { color: inherit; }

[hidden] { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Fondo ---------- */

.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--ink);
}

.bg__img {
  position: absolute;
  inset: 0;
  background: var(--bg) center 38% / cover no-repeat;
  /* El punto de fuga es la pantalla del salón: nos acercamos hacia ahí */
  transform-origin: var(--bg-origin);
  animation: dolly 36s cubic-bezier(0.15, 0.1, 0.85, 0.9) infinite alternate;
  filter: var(--bg-filter);
}

/* Luz adicional: capa "prendida" superpuesta a la base. Al ser hija de
   .bg__img comparte su transformación, así que las dos capas se acercan juntas. */
.bg__img::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Luz que entra de arriba a la derecha: un charco sobre la pared y otro,
     más suave, sobre el piso. Se mezcla con la foto (--luz-modo), así que
     ilumina lo que hay en vez de pintar encima. Valores en "Luz que parpadea". */
  background:
    radial-gradient(ellipse var(--luz-ancho) var(--luz-alto) at var(--luz-x) var(--luz-y),
      rgb(var(--luz-color) / var(--luz-fuerza)),
      rgb(var(--luz-color) / calc(var(--luz-fuerza) * 0.35)) 45%,
      transparent 100%),
    radial-gradient(ellipse var(--luz-piso-ancho) var(--luz-piso-alto) at var(--luz-piso-x) var(--luz-piso-y),
      rgb(var(--luz-color) / calc(var(--luz-fuerza) * var(--luz-piso))),
      transparent 100%);
  mix-blend-mode: var(--luz-modo);
  opacity: 0;
}

@media (max-width: 760px) {
  .bg__img { background-image: var(--bg-mobile); }
}

@keyframes dolly {
  from { transform: scale(1) translateY(0); }
  to   { transform: scale(1.4) translateY(2%); }
}

.bg__shade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 75% 60% at 50% 40%, rgba(0, 10, 10, 0.35), rgba(0, 10, 10, 0.82) 80%),
    linear-gradient(to bottom, rgba(0, 10, 10, 0.5), rgba(0, 10, 10, 0.1) 30%, rgba(0, 10, 10, 0.55) 80%, rgba(0, 10, 10, 0.9)),
    radial-gradient(ellipse 60% 30% at 50% 100%, rgba(0, 240, 158, 0.1), transparent 70%);
  background-color: rgba(0, 8, 8, 0.38);
}

/* Cuadrícula tipo placa de circuito */
.bg__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 240, 158, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 240, 158, 0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, transparent 30%, #000 85%);
}

/* Líneas de barrido muy sutiles, estilo monitor */
.bg__scan {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.18) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
  opacity: 0.6;
}

/* ---------- Etiquetas de esquina ---------- */

.corner {
  position: absolute;
  top: clamp(14px, 3vw, 36px);
  margin: 0;
  font-family: var(--font-tag);
  font-size: clamp(0.8rem, 1.1vw, 1.05rem);
  letter-spacing: 0.14em;
  line-height: 1.55;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.85;
  pointer-events: none;
}
.listo .corner { transition: opacity 2s ease, visibility 2s; }
.corner--tl { left: var(--gutter); transform: rotate(-4deg); transform-origin: left top; }
.corner--tr { right: var(--gutter); text-align: right; transform: rotate(4deg); transform-origin: right top; }

@media (max-width: 760px) {
  .corner { display: none; }
}

/* ---------- Escenario ---------- */

.stage {
  width: min(100%, 1680px);
  min-height: 100svh;
  margin: 0 auto;
  justify-content: center;
  padding: clamp(20px, 4vh, 48px) var(--gutter) 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 2.6vh, 28px);
  text-align: center;
}

/* ---------- Hero ---------- */

.hero { display: grid; justify-items: center; gap: 6px; }

.hero__logo {
  position: relative;
  margin: 0;
  line-height: 0;
  animation: float 6s ease-in-out infinite;
}
.hero__logo img {
  width: min(88vw, 780px, 36vh * 2.06);
  height: auto;
  filter: drop-shadow(0 0 18px rgba(0, 240, 158, 0.28)) drop-shadow(0 8px 30px rgba(0, 0, 0, 0.8));
}
/* Al cambiar de estado (arranca / termina) el logo cambia de tamaño sin saltar.
   Solo con .listo (main.js lo pone después de la primera pintada), para que
   al abrir la página no se anime hasta el tamaño del estado actual. */
.listo .hero__logo img { transition: width 2.4s cubic-bezier(0.22, 1, 0.36, 1), filter 2.4s ease; }

@keyframes float {
  50% { transform: translateY(-6px); }
}

.hero__kicker {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 10px 22px;
  background: rgba(0, 10, 10, 0.85);
  border-radius: 10px;
  font-family: var(--font-tag);
  font-weight: 400;
  font-size: clamp(1rem, 2vw, 1.5rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  box-shadow: 0 0 0 1px rgba(0, 240, 158, 0.25);
}

/* Motivo de píxeles (las "flechitas" del flyer) */
.px {
  --s: 5px;
  display: inline-block;
  width: var(--s);
  height: var(--s);
  margin: 0 calc(var(--s) * 2) 0 0;
  background: var(--neon);
  box-shadow:
    var(--s) var(--s) 0 var(--neon),
    calc(var(--s) * 2) calc(var(--s) * 2) 0 var(--neon),
    0 calc(var(--s) * 2) 0 var(--neon-dim),
    var(--s) calc(var(--s) * -1) 0 var(--neon-dim);
  transform: translateY(calc(var(--s) * -1));
}
.px--flip { transform: translateY(calc(var(--s) * -1)) scaleX(-1); margin: 0 0 0 calc(var(--s) * 2); }

/* ---------- Cuenta regresiva ---------- */

.countdown {
  width: 100%;
  container-type: inline-size;
  display: grid;
  justify-items: center;
  gap: clamp(10px, 2vh, 20px);
}

.countdown__title {
  margin: 0;
  font-family: var(--font-pixel);
  font-weight: 400;
  font-size: clamp(0.85rem, 1.8vw, 1.35rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--neon);
  text-shadow: var(--glow);
}

.countdown__when { display: none; }
.countdown[data-state="antes"] .countdown__when--antes,
.countdown[data-state="previa"] .countdown__when--previa,
.countdown[data-state="vivo"] .countdown__when--vivo,
.countdown[data-state="despues"] .countdown__when--despues { display: inline; }

/* Tamaño del dígito: el reloj y el ancho de la barra de progreso se escalan desde acá
   (cqi = ancho de .countdown) */
.countdown__grid,
.progreso { --digit: clamp(1.8rem, min(5.6cqi, 10vh), 7rem); }

.countdown__grid {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(6px, 1.2cqi, 18px);
}

.unit {
  position: relative;
  display: grid;
  justify-items: center;
  gap: calc(var(--digit) * 0.22);
  padding: calc(var(--digit) * 0.3) calc(var(--digit) * 0.26) calc(var(--digit) * 0.22);
  background: linear-gradient(to bottom, rgba(0, 240, 158, 0.07), transparent 60%), var(--panel);
  border: 2px solid var(--neon);
  border-radius: var(--radius);
  box-shadow: var(--glow), inset 0 0 24px rgba(0, 240, 158, 0.12);
  backdrop-filter: blur(3px);
}

/* Esquinitas pixeladas decorativas */
.unit::before,
.unit::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--neon);
  box-shadow: 8px 0 0 var(--neon-dim), 0 8px 0 var(--neon-dim);
}
.unit::before { top: -12px; left: -12px; }
.unit::after { bottom: -12px; right: -12px; transform: scale(-1); }

.unit__digits {
  display: flex;
  font-family: var(--font-pixel);
  font-size: var(--digit);
  line-height: 1;
  color: var(--neon);
  text-shadow: var(--glow-strong);
}

.d {
  display: inline-block;
  width: 1em;
  text-align: center;
}
.d.is-ticking { animation: tick 0.45s cubic-bezier(0.2, 0.8, 0.3, 1.2); }

@keyframes tick {
  0%   { transform: translateY(-30%); opacity: 0.25; filter: blur(2px); }
  60%  { opacity: 1; filter: none; }
  100% { transform: none; }
}

.unit__label {
  font-family: var(--font-tag);
  font-weight: 400;
  font-size: clamp(0.8rem, calc(var(--digit) * 0.21), 1.35rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
}

.sep {
  align-self: flex-start;
  /* centrado sobre los dígitos: padding superior + mitad del espacio libre */
  margin-top: calc(var(--digit) * 0.55 + 2px);
  font-family: var(--font-pixel);
  font-size: calc(var(--digit) * 0.5);
  line-height: 1;
  color: var(--neon);
  text-shadow: var(--glow);
  animation: blink 1s steps(1) infinite;
}

@keyframes blink { 50% { opacity: 0.2; } }

.countdown:not([data-state="antes"]) .countdown__grid { display: none; }

.countdown:not([data-state="antes"]) .countdown__title {
  /* Press Start 2P dibuja mal las mayúsculas acentuadas (Ó, Í): usamos Jersey 15 */
  font-family: var(--font-tag);
  font-weight: 400;
  font-size: clamp(2rem, 6cqi, 4.5rem);
  letter-spacing: 0.04em;
  line-height: 1.1;
}

/* "Estamos por empezar" con cursor de terminal: está cargando */
.countdown__when--previa::after {
  content: "_";
  margin-left: 0.1em;
  animation: blink 1s steps(1) infinite;
}

.live-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ff3b5c;
  box-shadow: 0 0 12px #ff3b5c;
  animation: blink 1.2s steps(1) infinite;
}

/* Celulares: reloj en 2x2, dígitos más grandes */
@media (max-width: 640px) {
  .countdown__grid,
  .progreso { --digit: clamp(2rem, 11cqi, 3.2rem); }
  .countdown__grid {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 22px 18px;
  }
  .sep { display: none; }
}

/* ---------- Barra de preparativos ----------
   Un detalle, no protagonista: línea finita del ancho del reloj y un texto
   chico que va contando "lo que se está haciendo". */

.progreso {
  /* mismo ancho que el reloj: 4 unidades + 3 separadores + huecos */
  width: min(100%, calc(var(--digit) * 11.6 + 6 * clamp(6px, 1.2cqi, 18px) + 16px));
  display: grid;
  /* minmax(0, …): que un mensaje largo no estire la barra */
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin-top: 4px;
}

.progreso__barra {
  position: relative;
  height: 3px;
  border-radius: 2px;
  background: rgba(0, 240, 158, 0.14);
  overflow: hidden;
}
.progreso__relleno {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--progreso, 0%);
  background: var(--neon);
  box-shadow: 0 0 8px rgba(0, 240, 158, 0.7);
  transition: width 1s linear;
}
/* brillo que recorre la parte llena, muy suave */
.progreso__relleno::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  background-size: 40% 100%;
  background-repeat: no-repeat;
  animation: barrido-barra 3.5s linear infinite;
}
@keyframes barrido-barra {
  from { background-position: -40% 0; }
  to   { background-position: 140% 0; }
}

.progreso__texto {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-tag);
  font-size: clamp(0.95rem, 1.3vw, 1.15rem);
  letter-spacing: 0.06em;
  color: var(--muted);
  text-align: left;
}
.progreso__prompt { color: var(--neon); }
.progreso__msg {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.35s ease, transform 0.35s ease, filter 0.35s ease;
}
/* cursor de terminal al final del mensaje */
.progreso__msg::after {
  content: "_";
  margin-left: 2px;
  color: var(--neon);
  animation: blink 1s steps(1) infinite;
}
/* cambio de mensaje: se va hacia arriba difuminado y entra el nuevo */
.progreso__msg.is-saliendo {
  opacity: 0;
  transform: translateY(-6px);
  filter: blur(2px);
}
.progreso__msg.is-entrando {
  opacity: 0;
  transform: translateY(6px);
  filter: blur(2px);
  transition: none;
}
.progreso__pct {
  color: var(--neon);
  font-variant-numeric: tabular-nums;
}

/* Celular: el reloj en 2x2 es angosto; la barra usa un poco más de ancho
   para que los mensajes entren en dos líneas */
@media (max-width: 640px) {
  .progreso { width: min(100%, 340px); }
  /* mensajes en hasta 2 líneas, con el alto reservado para que nada salte */
  .progreso__msg { white-space: normal; min-height: 2.6em; line-height: 1.3; }
}

/* Solo tiene sentido antes del evento */
.countdown:not([data-state="antes"]) .progreso { display: none; }

/* ---------- Claim ---------- */

.claim {
  margin: clamp(4px, 1vh, 12px) 0 0;
  display: grid;
  gap: 0.15em;
  font-family: var(--font-tag);
  font-weight: 400;
  font-size: clamp(1.6rem, 4vw, 3.1rem);
  letter-spacing: 0.04em;
  line-height: 1.05;
  text-transform: uppercase;
}
.claim__a { color: var(--text); text-shadow: 0 3px 0 #000; }
.claim__b { color: var(--neon); text-shadow: 0 3px 0 #000, var(--glow); }

/* Terminado el evento, la invitación ya no tiene sentido */
body[data-estado="despues"] .claim,
body[data-estado="despues"] .pill { display: none; }

/* ---------- Fecha y lugar ---------- */

.info {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: clamp(14px, 3vw, 36px);
  width: min(100%, 860px);
  padding: 14px clamp(16px, 3vw, 36px);
  border: 2px solid var(--neon);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--glow);
  backdrop-filter: blur(3px);
}

.info__item {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  text-decoration: none;
}
.info__item strong {
  display: block;
  font-weight: 900;
  font-size: clamp(1rem, 2vw, 1.45rem);
  line-height: 1.15;
}
.info__item span {
  color: var(--muted);
  font-size: clamp(0.9rem, 1.5vw, 1.1rem);
}
.info__item--link { border-radius: 10px; transition: transform 0.2s; }
.info__item--link:hover strong { color: var(--neon); }
.info__item--link:hover .info__cta { text-decoration: underline; text-underline-offset: 3px; }

/* Pista de que el recuadro es un link */
.info__cta {
  display: block;
  margin-top: 4px;
  font-weight: 800;
  font-size: clamp(0.8rem, 1.1vw, 0.92rem);
  color: var(--neon);
}
.info__item--link:focus-visible { outline: 2px solid var(--neon); outline-offset: 6px; }

.info__icon {
  flex: none;
  width: clamp(34px, 4vw, 48px);
  height: auto;
  fill: none;
  stroke: var(--neon);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(0, 240, 158, 0.5));
}
.info__icon .fill { fill: var(--neon); stroke: none; }

.info__div { width: 2px; background: rgba(0, 240, 158, 0.35); }

@media (max-width: 640px) {
  .info { flex-direction: column; align-items: flex-start; }
  .info__div { width: 100%; height: 1px; }
}

/* ---------- Pastilla "gratuita" ---------- */

.pill {
  margin: 0;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 14px;
  padding: 8px 8px 8px 8px;
  padding-right: 20px;
  border: 1.5px solid rgba(0, 240, 158, 0.55);
  border-radius: 999px;
  background: rgba(0, 10, 10, 0.7);
  font-size: clamp(0.85rem, 1.5vw, 1.05rem);
}
.pill__free {
  padding: 4px 14px;
  border-radius: 999px;
  background: var(--neon);
  color: var(--ink);
  font-weight: 900;
}

@media (max-width: 640px) {
  .hero__kicker { letter-spacing: 0.02em; padding: 8px 14px; gap: 10px; }
  .pill { border-radius: 16px; padding: 10px 14px; }
}

/* ---------- Accesos directos ----------
   Aparecen cuando arranca el evento. Pensados para la pantalla del salón:
   ícono grande que flota, título y la URL bien legible para tipearla. */

.accesos {
  /* puede ser más ancha que el escenario: queda centrada y aprovecha la pantalla */
  width: min(100vw - 2 * var(--gutter), 1800px);
  margin-top: clamp(8px, 2vh, 24px);
  display: grid;
  gap: clamp(14px, 2.4vh, 26px);
}

.section-title {
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-pixel);
  font-weight: 400;
  font-size: clamp(0.85rem, 1.6vw, 1.25rem);
  text-transform: uppercase;
  color: var(--text);
}

.accesos__grid {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: min(100%, 1640px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 24px);
}
@media (max-width: 1100px) {
  .accesos__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .accesos__grid { grid-template-columns: minmax(0, 1fr); }
}
.accesos__grid > li { display: flex; }
/* Si la última fila queda con una sola tarjeta, va al centro */
@media (min-width: 1101px) {
  .accesos__grid > li:last-child:nth-child(3n + 1) { grid-column: 2; }
}
@media (min-width: 641px) and (max-width: 1100px) {
  .accesos__grid > li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - clamp(12px, 1.4vw, 24px) / 2);
  }
}

/* Tarjeta: ícono a la izquierda, título y URL a la derecha */
.acceso {
  --c: var(--neon);
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(14px, 1.4vw, 24px);
  row-gap: 4px;
  padding: clamp(14px, 2vh, 22px) clamp(16px, 1.6vw, 26px);
  overflow: hidden;
  border: 2px solid var(--c);
  border-radius: var(--radius);
  background: linear-gradient(to bottom, rgba(0, 240, 158, 0.07), transparent 60%), var(--panel);
  box-shadow: var(--glow), inset 0 0 24px rgba(0, 240, 158, 0.1);
  text-align: left;
  text-decoration: none;
  color: var(--text);
  backdrop-filter: blur(3px);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  /* entrada escalonada cuando aparece la sección */
  animation: acceso-entra 0.7s cubic-bezier(0.2, 0.8, 0.3, 1.15) both;
  animation-delay: calc(var(--i, 0) * 120ms);
}
@keyframes acceso-entra {
  from { opacity: 0; transform: translateY(24px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

/* reflejo que cruza la tarjeta cada tanto, cada una a su turno */
.acceso::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(0, 240, 158, 0.12) 50%, transparent 60%);
  background-size: 250% 100%;
  background-position: 120% 0;
  pointer-events: none;
  animation: reflejo 9s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 1.4s + 1s);
}
@keyframes reflejo {
  0%, 70% { background-position: 120% 0; }
  85%, 100% { background-position: -20% 0; }
}

a.acceso:hover,
a.acceso:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--glow-strong);
  outline: none;
}

/* Ícono en un círculo que flota, con un pulso tipo radar */
.acceso__icono {
  grid-row: span 2;
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(58px, 5vw, 92px);
  aspect-ratio: 1;
  border: 2px solid rgba(0, 240, 158, 0.55);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 240, 158, 0.16), rgba(0, 10, 10, 0.6) 70%);
  animation: flotar 4.5s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -0.9s);
}
.acceso__icono::after {
  content: "";
  position: absolute;
  inset: -2px;
  border: 2px solid var(--c);
  border-radius: 50%;
  opacity: 0;
  animation: radar 4.5s ease-out infinite;
  animation-delay: calc(var(--i, 0) * 0.9s + 0.8s);
}
.acceso__icono svg {
  width: 56%;
  height: auto;
  fill: none;
  stroke: var(--c);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 8px rgba(0, 240, 158, 0.6));
}
.acceso__icono .fill { fill: var(--c); stroke: none; }

@keyframes flotar {
  50% { transform: translateY(-7px); }
}
@keyframes radar {
  0%   { opacity: 0.7; transform: scale(1); }
  45%  { opacity: 0; transform: scale(1.45); }
  100% { opacity: 0; transform: scale(1.45); }
}

.acceso__title {
  font-weight: 900;
  font-size: clamp(1.05rem, 1.35vw, 1.5rem);
  line-height: 1.15;
  text-wrap: balance;
}

.acceso__url {
  font-family: var(--font-tag);
  font-size: clamp(1.1rem, 1.35vw, 1.65rem);
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: var(--neon);
  text-shadow: 0 0 10px rgba(0, 240, 158, 0.45);
}

.acceso__url span { white-space: nowrap; }

.acceso--off {
  --c: #3f6d5e;
  box-shadow: none;
  opacity: 0.75;
  cursor: default;
}
.acceso--off .acceso__icono svg { filter: none; }
.acceso--off .acceso__title { color: var(--muted); }
.acceso__badge {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 3px 7px;
  border-radius: 6px;
  background: rgba(0, 240, 158, 0.12);
  font-family: var(--font-tag);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Evento en vivo: la pantalla es para los accesos ----------
   Sin "Encuentro de Informáticxs" para que el logo crezca; se ocultan claim,
   pastilla, fecha/lugar (se proyecta en el salón) y el Instagram del pie (pasa
   a ser un acceso), y los accesos suben debajo del "¡Ya arrancó!" */
body:not([data-estado="antes"]) .hero__logo img { width: min(84vw, 720px, 31vh * 2.06); }
body:not([data-estado="antes"]) .hero__kicker,
body:not([data-estado="antes"]) .section-title,
body:not([data-estado="antes"]) .claim,
body:not([data-estado="antes"]) .pill,
body:not([data-estado="antes"]) .info,
body:not([data-estado="antes"]) .footer__ig { display: none; }
body:not([data-estado="antes"]) .footer { order: 2; }

/* "Estamos por empezar": logo grande, el título, el QR (arriba a la izquierda)
   y el Instagram, todavía sin accesos */
body[data-estado="previa"] .hero__logo img { width: min(90vw, 900px, 46vh * 2.06); }
body[data-estado="previa"] .countdown__title { font-size: clamp(2.4rem, 7cqi, 5.5rem); }
body[data-estado="previa"] .footer__ig { display: inline-flex; font-size: clamp(1rem, 1.3vw, 1.35rem); padding: 8px 18px; }
body[data-estado="previa"] .footer__ig svg { width: 24px; height: 24px; }
body:not([data-estado="antes"]) .accesos,
body:not([data-estado="antes"]) .despedida { order: 1; }

/* ---------- Durante el evento: cinta "En vivo" y QR ----------
   Las etiquetas de las esquinas se van; arriba a la derecha queda una cinta
   en diagonal (solo con el evento ya arrancado) y arriba a la izquierda el QR
   a la página (desde "Estamos por empezar"). En celular no hacen falta. */

.en-vivo {
  position: fixed;
  top: clamp(26px, 2.6vw, 44px);
  right: clamp(-74px, -4.4vw, -54px);
  z-index: 5;
  width: clamp(240px, 17vw, 330px);
  margin: 0;
  padding: 8px 0;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 12px;
  transform: rotate(45deg);
  background: #e0254a;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15) inset, 0 0 24px rgba(255, 59, 92, 0.5), 0 6px 18px rgba(0, 0, 0, 0.6);
  font-family: var(--font-tag);
  font-size: clamp(1.1rem, 1.5vw, 1.6rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
}
.en-vivo .live-dot { background: #fff; box-shadow: 0 0 10px #fff; }
body[data-estado="vivo"] .en-vivo { display: flex; animation: cinta-entra 0.8s cubic-bezier(0.2, 0.8, 0.3, 1.2) both; }
@keyframes cinta-entra {
  from { opacity: 0; transform: rotate(45deg) translateY(-40px); }
  to   { opacity: 1; transform: rotate(45deg); }
}

.qr {
  position: fixed;
  top: clamp(16px, 2.2vw, 36px);
  left: var(--gutter);
  z-index: 5;
  margin: 0;
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 12px;
  border: 2px solid var(--neon);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--glow);
  animation: acceso-entra 0.8s cubic-bezier(0.2, 0.8, 0.3, 1.15) both;
}
.qr img {
  display: block;
  /* grande para que se lea desde lejos en el proyector */
  width: clamp(150px, min(15vw, 26vh), 300px);
  height: auto;
  border-radius: 8px;
  image-rendering: pixelated;
}
.qr figcaption {
  font-family: var(--font-tag);
  font-size: clamp(0.95rem, 1.1vw, 1.25rem);
  line-height: 1.15;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
  color: var(--text);
}
@media (max-width: 760px) {
  .qr, .en-vivo { display: none !important; }
}

/* ---------- Terminado: despedida ----------
   Logo grande, "¡Gracias!" y unos links chicos. La sala se oscurece de a
   poco, como un teatro que apaga las luces (y la luz que parpadeaba no vuelve). */
body[data-estado="despues"] .hero__logo img {
  width: min(90vw, 900px, 46vh * 2.06);
  /* crece y queda con un brillo un poco más fuerte, como el cartel que queda prendido */
  filter: drop-shadow(0 0 30px rgba(0, 240, 158, 0.45)) drop-shadow(0 8px 30px rgba(0, 0, 0, 0.8));
}
/* Las etiquetas de las esquinas se van cuando termina la cuenta regresiva */
body:not([data-estado="antes"]) .corner { opacity: 0; visibility: hidden; }
body[data-estado="despues"] .countdown__title { font-size: clamp(2.6rem, 9cqi, 6.5rem); }

.bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 70% 60% at 50% 42%, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.95) 75%);
  opacity: 0;
  transition: opacity 6s ease-in-out;
}
body[data-estado="despues"] .bg::after { opacity: 1; }

.despedida__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 14px;
}
.despedida__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px 8px 14px;
  border: 1.5px solid rgba(0, 240, 158, 0.5);
  border-radius: 999px;
  background: rgba(0, 10, 10, 0.75);
  color: var(--text);
  text-decoration: none;
  font-size: clamp(0.95rem, 1.1vw, 1.15rem);
  /* aparecen de a uno, despacio, mientras baja la luz */
  animation: despedida-entra 1.2s ease both;
}
.despedida__lista li:nth-child(2) .despedida__link { animation-delay: 0.25s; }
.despedida__lista li:nth-child(3) .despedida__link { animation-delay: 0.5s; }
.despedida__lista li:nth-child(4) .despedida__link { animation-delay: 0.75s; }
.despedida__lista li:nth-child(n+5) .despedida__link { animation-delay: 1s; }
@keyframes despedida-entra {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.despedida__link svg {
  width: 22px;
  height: 22px;
  flex: none;
  fill: none;
  stroke: var(--neon);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.despedida__link svg .fill { fill: var(--neon); stroke: none; }
.despedida__link strong { font-weight: 800; }
.despedida__url {
  font-family: var(--font-tag);
  letter-spacing: 0.03em;
  color: var(--neon);
}
.despedida__url span { white-space: nowrap; }
.despedida__link:hover,
.despedida__link:focus-visible { border-color: var(--neon); box-shadow: var(--glow); outline: none; }

/* ---------- Pie ---------- */

.footer {
  margin-top: clamp(16px, 4vh, 44px);
  display: grid;
  justify-items: center;
  gap: 12px;
  color: var(--muted);
}
.footer p { margin: 0; }
.footer__orgs { font-family: var(--font-tag); font-size: 0.9rem; letter-spacing: 0.1em; text-transform: uppercase; }
.footer__ig {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1.5px solid rgba(0, 240, 158, 0.5);
  border-radius: 999px;
  background: rgba(0, 10, 10, 0.7);
  color: var(--text);
  text-decoration: none;
  font-weight: 800;
  font-size: 0.95rem;
}
.footer__ig svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--neon);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.footer__ig svg .fill { fill: var(--neon); stroke: none; }
.footer__ig:hover,
.footer__ig:focus-visible { border-color: var(--neon); box-shadow: var(--glow); outline: none; }

/* ---------- Efecto "sintonizando" ----------
   main.js agrega .sintonizando al <body> cada N segundos (config: sintonizarCada)
   durante ~1.4 s: la señal se pierde, tiembla y "agarra". */

.glitch {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.sintonizando .hero__logo > img:first-child { animation: logo-sint 1.4s steps(1) both; }
.sintonizando .glitch--a { animation: franja-a 1.4s steps(1) both; }
.sintonizando .glitch--b { animation: franja-b 1.4s steps(1) both; }

/* Logo principal: separación de color y saltos, al final un destello */
@keyframes logo-sint {
  0%   { transform: translate(-6px, 0) skewX(-8deg); filter: drop-shadow(-6px 0 rgba(255, 40, 90, 0.8)) drop-shadow(6px 0 rgba(0, 220, 255, 0.8)); opacity: 0.6; }
  8%   { transform: translate(10px, -3px); opacity: 1; }
  14%  { transform: translate(-3px, 2px) skewX(12deg); opacity: 0.3; }
  22%  { transform: translate(4px, 0); filter: drop-shadow(-10px 0 rgba(255, 40, 90, 0.7)) drop-shadow(10px 0 rgba(0, 220, 255, 0.7)); opacity: 1; }
  30%  { transform: translate(-12px, 1px) skewX(-4deg); opacity: 0.8; }
  38%  { transform: translate(0, -2px); opacity: 0.15; }
  46%  { transform: translate(7px, 0) skewX(6deg); filter: drop-shadow(-4px 0 rgba(255, 40, 90, 0.8)) drop-shadow(4px 0 rgba(0, 220, 255, 0.8)); opacity: 1; }
  56%  { transform: translate(-4px, 0); opacity: 0.9; }
  64%  { transform: translate(2px, 0); filter: drop-shadow(-2px 0 rgba(255, 40, 90, 0.6)) drop-shadow(2px 0 rgba(0, 220, 255, 0.6)); opacity: 1; }
  72%  { transform: translate(-1px, 0); }
  /* "agarra": queda firme con un golpe de brillo */
  80%  { transform: none; filter: brightness(1.6) drop-shadow(0 0 26px rgba(0, 240, 158, 0.9)); }
  100% { transform: none; filter: drop-shadow(0 0 18px rgba(0, 240, 158, 0.28)) drop-shadow(0 8px 30px rgba(0, 0, 0, 0.8)); opacity: 1; }
}

/* Franjas horizontales del logo que se corren de lugar */
@keyframes franja-a {
  0%   { opacity: 1; clip-path: inset(10% 0 72% 0); transform: translateX(-28px); filter: drop-shadow(4px 0 rgba(0, 220, 255, 0.9)); }
  10%  { clip-path: inset(55% 0 30% 0); transform: translateX(34px); }
  20%  { clip-path: inset(30% 0 58% 0); transform: translateX(-16px); }
  30%  { clip-path: inset(78% 0 5% 0);  transform: translateX(22px); }
  40%  { clip-path: inset(4% 0 86% 0);  transform: translateX(-40px); }
  50%  { clip-path: inset(62% 0 22% 0); transform: translateX(12px); }
  62%  { clip-path: inset(40% 0 50% 0); transform: translateX(-6px); }
  72%  { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes franja-b {
  0%   { opacity: 1; clip-path: inset(60% 0 25% 0); transform: translateX(24px); filter: drop-shadow(-4px 0 rgba(255, 40, 90, 0.9)); }
  12%  { clip-path: inset(18% 0 66% 0); transform: translateX(-30px); }
  24%  { clip-path: inset(84% 0 2% 0);  transform: translateX(14px); }
  34%  { clip-path: inset(36% 0 44% 0); transform: translateX(-24px); }
  46%  { clip-path: inset(8% 0 80% 0);  transform: translateX(36px); }
  58%  { clip-path: inset(70% 0 18% 0); transform: translateX(-10px); }
  68%  { opacity: 0; }
  100% { opacity: 0; }
}

/* Estática y barrido sobre toda la pantalla */
.tv {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .7  0 0 0 0 1  0 0 0 0 .9  0 0 0 1.4 -.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: screen;
}
.tv::after {
  /* franja de barrido que baja, como el "vertical hold" de una tele vieja */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 18%;
  top: -20%;
  background: linear-gradient(to bottom, transparent, rgba(180, 255, 225, 0.14) 45%, rgba(255, 255, 255, 0.22) 50%, rgba(180, 255, 225, 0.14) 55%, transparent);
}
.sintonizando .tv { animation: estatica 1.4s steps(1) both; }
.sintonizando .tv::after { animation: barrido 1.1s cubic-bezier(0.3, 0, 0.7, 1) both; }

@keyframes estatica {
  0%   { opacity: 0.28; background-position: 0 0; }
  8%   { opacity: 0.14; background-position: -60px 40px; }
  16%  { opacity: 0.24; background-position: 90px -30px; }
  24%  { opacity: 0.1;  background-position: -20px -80px; }
  32%  { opacity: 0.2;  background-position: 50px 70px; }
  42%  { opacity: 0.08; background-position: -100px 10px; }
  52%  { opacity: 0.14; background-position: 30px -50px; }
  62%  { opacity: 0.05; background-position: -40px 90px; }
  72%  { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes barrido {
  from { top: -20%; }
  to   { top: 105%; }
}

/* El resto de la escena tiembla un poco */
.sintonizando .bg { animation: bg-sint 1.4s steps(1) both; }

/* Glitch chico (tecla G): ~0.5 s, solo el logo y un chispazo de estática.
   Pensado para marcar golpes de la música sin tapar la pantalla. */
.glitch-chico .hero__logo > img:first-child { animation: logo-chico 0.5s steps(1) both; }
.glitch-chico .glitch--a { animation: franja-a 0.4s steps(1) both; }
.glitch-chico .glitch--b { animation: franja-b 0.4s steps(1) both; }
.glitch-chico .tv { animation: estatica-chica 0.35s steps(1) both; }

@keyframes logo-chico {
  0%   { transform: translate(-6px, 0) skewX(-6deg); filter: drop-shadow(-6px 0 rgba(255, 40, 90, 0.8)) drop-shadow(6px 0 rgba(0, 220, 255, 0.8)); }
  25%  { transform: translate(5px, -2px); }
  50%  { transform: translate(-2px, 0); filter: drop-shadow(-3px 0 rgba(255, 40, 90, 0.7)) drop-shadow(3px 0 rgba(0, 220, 255, 0.7)); }
  75%  { transform: none; filter: brightness(1.4) drop-shadow(0 0 22px rgba(0, 240, 158, 0.8)); }
  100% { transform: none; filter: drop-shadow(0 0 18px rgba(0, 240, 158, 0.28)) drop-shadow(0 8px 30px rgba(0, 0, 0, 0.8)); }
}
@keyframes estatica-chica {
  0%   { opacity: 0.16; background-position: 0 0; }
  35%  { opacity: 0.08; background-position: 60px -40px; }
  70%  { opacity: 0; }
  100% { opacity: 0; }
}
.sintonizando .countdown__grid,
.sintonizando .countdown__title { animation: temblor 1.1s steps(1) both; }

@keyframes bg-sint {
  0%   { transform: translateX(-8px); filter: contrast(1.4) brightness(1.3) hue-rotate(-20deg); }
  10%  { transform: translateX(10px) skewX(2deg); filter: contrast(1.2) brightness(0.7); }
  22%  { transform: translate(-4px, 3px); filter: contrast(1.5) brightness(1.2) hue-rotate(15deg); }
  34%  { transform: translateX(6px); filter: brightness(0.8); }
  46%  { transform: translateX(-2px) skewX(-1deg); filter: contrast(1.2) brightness(1.1); }
  60%  { transform: translateX(1px); filter: none; }
  72%  { transform: none; filter: none; }
  100% { transform: none; filter: none; }
}
@keyframes temblor {
  0%   { transform: translateX(4px); }
  12%  { transform: translateX(-6px); }
  24%  { transform: translateX(3px) skewX(-3deg); }
  36%  { transform: translateX(-2px); }
  50%  { transform: translateX(1px); }
  64%  { transform: none; }
  100% { transform: none; }
}

/* ---------- Luz que parpadea ----------
   main.js agrega .parpadeo al <body> cada parpadearCada segundos (config):
   la luz (.bg__img::before) da dos golpes y se apaga.

   Para ajustarla: abrí la página con ?luz=on (queda prendida fija) y tocá
   estas variables, en este archivo o en vivo desde las DevTools (elemento <html>). */

:root {
  --luz-x: 100%;            /* de dónde viene: 100% = borde derecho */
  --luz-y: 0%;              /* 0% = arriba */
  --luz-ancho: 48%;         /* tamaño del charco sobre la pared */
  --luz-alto: 80%;
  --luz-color: 245 248 255; /* R G B: blanco neutro; 255 235 200 = cálido */
  --luz-fuerza: 0.75;       /* intensidad (0 a 1) */
  --luz-modo: color-dodge;  /* cómo se mezcla: color-dodge (realista), screen (más "aire"), soft-light (sutil) */

  --luz-piso: 0.7;          /* cuánto llega al piso, relativo a la pared */
  --luz-piso-x: 86%;
  --luz-piso-y: 72%;
  --luz-piso-ancho: 34%;
  --luz-piso-alto: 40%;

  --luz-max: 1;             /* hasta dónde prende en cada destello (0 a 1) */
}

/* ?luz=on: luz fija para ajustar */
.luz-fija .bg__img::before { opacity: var(--luz-max); animation: none !important; }

/* Rampas cortas (~30-50 ms) en vez de cortes secos: se siente como un tubo
   que arranca, no como un flash */
@keyframes destello-doble {
  0%   { opacity: 0; }
  5%   { opacity: var(--luz-max); }
  15%  { opacity: var(--luz-max); }
  20%  { opacity: 0; }
  34%  { opacity: 0; }
  40%  { opacity: var(--luz-max); }
  58%  { opacity: var(--luz-max); }
  66%  { opacity: 0; }
  100% { opacity: 0; }
}

.parpadeo .bg__img::before { animation: destello-doble 0.9s linear both; }

/* ---------- Movimiento reducido ---------- */

@media (prefers-reduced-motion: reduce) {
  .bg__img { animation: none; transform: scale(1.1); }
  .bg__img::before,
  .progreso__relleno::after,
  .progreso__msg::after,
  .acceso,
  .acceso::before,
  .acceso__icono,
  .acceso__icono::after,
  .despedida__link,
  .countdown__when--previa::after,
  .qr { animation: none; }
  body[data-estado="vivo"] .en-vivo { animation: none; }
  .bg::after,
  .listo .hero__logo img,
  .listo .corner { transition: none; }
  .progreso__msg,
  .progreso__relleno { transition: none; }
  .hero__logo,
  .sep,
  .live-dot,
  .d.is-ticking { animation: none; }
}

/* ?quieto en la URL: igual que arriba, para capturas reproducibles */
.quieto .bg__img { animation: none; transform: scale(1.1); }
.quieto .bg__img::before,
.quieto .progreso__relleno::after,
.quieto .progreso__msg::after,
.quieto .acceso,
.quieto .acceso::before,
.quieto .acceso__icono,
.quieto .acceso__icono::after,
.quieto .despedida__link,
.quieto .countdown__when--previa::after,
.quieto .qr { animation: none; }
.quieto body[data-estado="vivo"] .en-vivo { animation: none; }
.quieto .bg::after,
.quieto .listo .hero__logo img,
.quieto .listo .corner { transition: none; }
.quieto .progreso__msg,
.quieto .progreso__relleno { transition: none; }
.quieto .hero__logo,
.quieto .sep,
.quieto .live-dot,
.quieto .d.is-ticking { animation: none; }