/* Reset mínimo */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: radial-gradient(120% 80% at 50% 40%, var(--c-bg) 0%, var(--c-bg-deep) 100%) fixed;
  background-color: var(--c-bg-deep);
  color: var(--c-ink);
  font-family: var(--f-display);
  overflow-x: hidden;
}
a { color: inherit; }

/* Escenario principal */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(0, 2.6fr) minmax(140px, 1fr);
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "brand brand brand"
    "left  stage right"
    "foot  foot  foot";
  min-height: 100svh;
  padding: var(--sp-5) var(--sp-6);
  isolation: isolate;
}

/* Agujero negro en vivo (canvas). Va dentro del hero, no fijo: así la sombra sigue detrás de la cabeza al hacer scroll */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: #000;
  --bg-focus-y: 40%;
}
/* El lienzo cubre solo la primera pantalla (donde está el agujero): en celular la página mide casi dos
   pantallas y calcular el shader en todo ese alto lo volvía demasiado lento. Abajo se funde con el negro */
.hero__hole {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: min(100%, 100svh);
  display: block;
  opacity: 0;
  transition: opacity 1.6s var(--ease-out);
  -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 82%, transparent 100%);
}
.hero__bg.is-live .hero__hole { opacity: 1; }
/* Sin WebGL2: el vórtice en imagen fija */
.hero__bg.is-fallback {
  background: #000 url('../assets/agujero-x-16x9.webp') center var(--bg-focus-y) / cover no-repeat;
}
/* Oscurece arriba y abajo para que los textos se lean sobre la luz del disco */
.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, transparent 20%, transparent 72%, rgba(0, 0, 0, 0.65) 100%);
}

.brand {
  grid-area: brand;
  z-index: 2;
  text-align: center;
  pointer-events: none;
}
.brand__name {
  font-weight: 900;
  font-size: clamp(2.2rem, 7.4vw, 6.4rem);
  letter-spacing: var(--track-wide);
  margin-right: calc(var(--track-wide) * -1);
  line-height: 1;
  text-shadow: 0 0 24px rgba(255, 31, 45, 0.35);
}
.brand__tagline {
  margin-top: var(--sp-3);
  font-weight: 300;
  font-size: clamp(0.7rem, 1.4vw, 1rem);
  letter-spacing: var(--track-wide);
  margin-right: calc(var(--track-wide) * -1);
  text-transform: uppercase;
  color: var(--c-ink);
}

.stage {
  grid-area: stage;
  grid-row: 1 / 3;
  position: relative;
  min-height: 520px;
}
.stage__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: pan-y;
  /* El busto de Meshy termina en un corte plano: se funde con el fondo como en el flyer */
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 96%);
  mask-image: linear-gradient(180deg, #000 72%, transparent 96%);
}
.stage__canvas.is-glitch { animation: glitch var(--glitch-ms) steps(3) 1; }
.stage__status,
.stage__hint {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--c-ink-dim);
}
.stage__status { top: 50%; animation: breathe 1.6s ease-in-out infinite; }
.stage__status.is-hidden { display: none; }
.stage__hint { bottom: var(--sp-2); opacity: 0; transition: opacity 1.2s var(--ease-out) 1.5s; }
.stage.is-ready .stage__hint { opacity: 0.7; }

/* Rieles laterales */
.rail,
.foot,
.brand__tagline {
  /* Sombra densa: el texto cae sobre las líneas blancas del vórtice */
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.9), 0 1px 14px rgba(0, 0, 0, 0.95);
}
.rail {
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-5);
}
.rail--left { grid-area: left; align-items: flex-end; text-align: right; }
.rail--right { grid-area: right; align-items: flex-start; }

.perks { list-style: none; display: grid; gap: var(--sp-5); }
.perk__value {
  display: block;
  font-weight: 900;
  font-size: clamp(1.8rem, 3.2vw, 3rem);
  line-height: 1;
}
.perk:first-child .perk__value { color: var(--c-ink); }
.perk:not(:first-child) .perk__value { color: var(--c-red); }
.perk__label {
  display: block;
  margin-top: var(--sp-1);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ink);
  max-width: 16ch;
  margin-left: auto;
}

.rail__date {
  writing-mode: vertical-rl;
  font-weight: 800;
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
}
.rail__meta {
  writing-mode: vertical-rl;
  font-size: 0.72rem;
  font-weight: 300;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--c-ink-dim);
}

.foot {
  grid-area: foot;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: var(--sp-2);
  padding-top: var(--sp-4);
  text-align: center;
}
.admins {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-4);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.08em;
}
.admins__label {
  font-weight: 900;
  color: var(--c-red);
  text-transform: uppercase;
  letter-spacing: var(--track-mid);
}
.admins a { text-decoration: none; color: var(--c-ink-dim); transition: color 0.2s; }
.admins a:hover { color: var(--c-ink); }
.foot__motto {
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--c-red);
}
.foot__access {
  font-size: 0.7rem;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--c-ink-dim);
}
.cta {
  margin-top: var(--sp-3);
  padding: var(--sp-3) var(--sp-6);
  background: var(--c-red);
  border-radius: var(--radius);
  color: var(--c-ink);
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 0 0 0 rgba(255, 31, 45, 0.5);
  transition: box-shadow 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.cta:hover { box-shadow: 0 0 32px 4px rgba(255, 31, 45, 0.45); transform: translateY(-2px); }
.cta:focus-visible { outline: 2px solid var(--c-cyan); outline-offset: 4px; }

@keyframes glitch {
  0%   { transform: translateX(0);    filter: drop-shadow(-6px 0 var(--c-red)) drop-shadow(6px 0 var(--c-cyan)); }
  33%  { transform: translateX(-4px); filter: drop-shadow(8px 0 var(--c-red)) drop-shadow(-8px 0 var(--c-cyan)); }
  66%  { transform: translateX(3px);  filter: drop-shadow(-3px 0 var(--c-magenta)) drop-shadow(3px 0 var(--c-cyan)); }
  100% { transform: translateX(0);    filter: none; }
}
@keyframes breathe { 50% { opacity: 0.35; } }

/* Teléfono: todo en una columna */
@media (max-width: 760px) {
  .hero {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto auto;
    grid-template-areas: "brand" "stage" "left" "right" "foot";
    padding: var(--sp-5) var(--sp-4) var(--sp-7);
  }
  .brand__name { font-size: clamp(1.7rem, 9vw, 2.4rem); letter-spacing: 0.42em; margin-right: -0.42em; }
  .stage { grid-row: auto; min-height: 0; height: 68svh; margin-top: calc(var(--sp-4) * -1); }
  .hero__bg { --bg-focus-y: 30%; }
  .hero__bg.is-fallback { background-image: url('../assets/agujero-x-9x16.webp'); }
  .rail { align-items: center; text-align: center; }
  .rail--left { padding-top: var(--sp-4); }
  .perks { grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
  .perk__label { margin-inline: auto; font-size: 0.62rem; }
  .rail--right { flex-direction: row; justify-content: center; gap: var(--sp-3); padding-top: var(--sp-5); }
  .rail__date, .rail__meta { writing-mode: horizontal-tb; }
}

@media (prefers-reduced-motion: reduce) {
  .stage__canvas.is-glitch { animation: none; }
  .stage__status { animation: none; }
}