/* SIN PLANET — el fondo lo pinta el CSS; el hero es el plano de Kling encima. */

:root{
  --negro:      #04000f;
  --violeta:    #0a0226;
  --violeta-2:  #12043a;
  --cian:       #00e5ff;
  --magenta:    #ff4df0;
  --azul:       #2b5cff;
  --texto:      #e8e3ff;
  --texto-mute: #9a90c4;

  --ancho: 1280px;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
/* El menu va fijo: sin esto, al saltar a una seccion su titulo queda debajo. */
main > section[id]{ scroll-margin-top:84px; }
html.sin-suave{ scroll-behavior:auto; }

body{
  margin:0;
  min-height:100%;
  /* Monotono a proposito: cualquier vuelta a un tono mas oscuro se lee como una raya. */
  background:linear-gradient(180deg, var(--negro) 0%, #06011a 38%, var(--violeta) 100%);
  background-attachment:fixed;
  color:var(--texto);
  font-family:'Space Grotesk', system-ui, sans-serif;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ---------- FONDO ---------- */

.fondo{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}

#estrellas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:.85;
}

/* Los bokeh son el "casi nada" del fondo C: manchas grandes, fuera de foco, que derivan. */
.bokeh{
  position:absolute;
  border-radius:50%;
  filter:blur(90px);
  opacity:.5;
  will-change:transform;
}
.b1{
  width:46vw; height:46vw; left:-10vw; top:4vh;
  background:radial-gradient(circle, rgba(43,92,255,.55) 0%, rgba(43,92,255,0) 70%);
  animation:deriva-a 38s ease-in-out infinite alternate;
}
.b2{
  width:52vw; height:52vw; right:-14vw; top:-8vh;
  background:radial-gradient(circle, rgba(255,77,240,.40) 0%, rgba(255,77,240,0) 70%);
  animation:deriva-b 46s ease-in-out infinite alternate;
}
.b3{
  width:38vw; height:38vw; left:22vw; bottom:-14vh;
  background:radial-gradient(circle, rgba(0,229,255,.34) 0%, rgba(0,229,255,0) 70%);
  animation:deriva-c 52s ease-in-out infinite alternate;
}
.b4{
  width:30vw; height:30vw; right:6vw; bottom:-6vh;
  background:radial-gradient(circle, rgba(140,60,255,.40) 0%, rgba(140,60,255,0) 70%);
  animation:deriva-a 44s ease-in-out infinite alternate-reverse;
}
@keyframes deriva-a{ to{ transform:translate3d(6vw,-5vh,0) scale(1.12); } }
@keyframes deriva-b{ to{ transform:translate3d(-7vw,6vh,0) scale(1.08); } }
@keyframes deriva-c{ to{ transform:translate3d(5vw,-7vh,0) scale(1.15); } }

/* Grano: le quita el plástico al degradado y mata el banding. */
.grano{
  position:absolute;
  inset:-50%;
  opacity:.055;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23r)'/%3E%3C/svg%3E");
}

/* ---------- NAV ---------- */

.nav{
  position:fixed;
  inset:0 0 auto 0;
  z-index:30;
  display:flex;
  align-items:center;
  gap:2.5rem;
  padding:1.4rem clamp(1.1rem, 4vw, 3rem);
  background:linear-gradient(180deg, rgba(4,0,15,.82) 0%, rgba(4,0,15,.45) 55%, rgba(4,0,15,0) 100%);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  transition:background .35s ease, border-color .35s ease;
  border-bottom:1px solid transparent;
}
.nav.posado{
  background:rgba(5,0,18,.92);
  border-bottom-color:rgba(232,227,255,.08);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.marca{
  font-size:.78rem;
  font-weight:500;
  letter-spacing:.34em;
  color:var(--texto);
}
.nav nav{
  margin-left:auto;
  display:flex;
  gap:2rem;
}
.nav a{
  color:var(--texto-mute);
  text-decoration:none;
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  transition:color .25s;
}
.nav a:hover{ color:var(--cian); }
.boton-nav{
  padding:.55rem 1.1rem;
  border:1px solid rgba(0,229,255,.35);
  border-radius:100px;
  color:var(--cian) !important;
}
.boton-nav:hover{
  background:rgba(0,229,255,.1);
  box-shadow:0 0 24px rgba(0,229,255,.25);
}

/* ---------- HERO ---------- */

main{ position:relative; z-index:10; }

.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:0 0 clamp(2.4rem, 7vh, 5rem);
}

/* El plano es una BANDA a todo el ancho, pegada arriba, con su propia proporcion.
   Antes llenaba el hero entero con `cover` y eso, en una ventana que no fuera 16:9,
   ampliaba el plano hasta pegarle el logo al menu. Ahora la banda manda:
   - a lo ancho va siempre de borde a borde;
   - de alto, 16:9, topado para que quede sitio al boton sin bajar;
   - el tope nunca baja de 46vw: el logo ocupa el 70% de la altura del plano, asi que
     por debajo de ahi no solo se recorta, es que el logo queda pegado al menu sin un
     dedo de aire. En una ventana muy baja la banda sobresale y hay que bajar un poco:
     es el precio de que el plano sea 16:9 y la ventana no. */
.hero-plano{
  position:relative;
  flex:0 0 auto;
  width:100%;
  aspect-ratio:2.5 / 1;
  max-height:max(74svh, 34vw);   /* 46vw deja aire por arriba y por abajo del logo */
  overflow:hidden;
}
.hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 50%;
  /* Sin mascara: el canto de abajo lo tapa `.divisor`, que es opaco. */
}
/* El menu ya trae su propio fondo con desenfoque: aqui no hace falta oscurecer nada
   mas, y lo que habia le llegaba al borde de arriba del logo. */
/* El divisor: banda opaca del color de la pagina que TAPA el canto de abajo del plano,
   rematada con una linea de neon y su halo. No es un degradado: el corte es limpio y
   la luz es lo que lo convierte en una pieza en vez de en un recorte. */
.divisor{
  position:absolute;
  left:0; right:0; bottom:0;
  height:clamp(72px, 11%, 140px);
  background:var(--violeta);
  pointer-events:none;
}
/* El filo de luz, cian a magenta, que marca el corte. */
.divisor::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:2px;
  background:linear-gradient(90deg,
    rgba(0,229,255,0) 0%, var(--cian) 22%, #a06bff 50%, var(--magenta) 78%, rgba(255,77,240,0) 100%);
}
/* El halo que ese filo tira hacia arriba, sobre el plano. */
.divisor::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:100%;
  height:clamp(40px, 7vh, 90px);
  background:linear-gradient(180deg,
    rgba(0,229,255,0) 0%, rgba(120,60,255,.16) 62%, rgba(0,229,255,.30) 100%);
  filter:blur(1px);
}
.hero-fundido{ display:none; }

.solo-lectores{
  position:absolute;
  width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip-path:inset(50%);
  overflow:hidden;
  white-space:nowrap;
}

/* --- Texto y botón del hero --- */

.hero-texto{
  position:relative;
  margin:auto 0;          /* centrado en el hueco que deja la banda */
  text-align:center;
}
.sitio{
  margin:0 0 .9rem;
  font-size:.8rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--texto-mute);
}
.sitio .sep{
  font-style:normal;
  margin:0 .7em;
  opacity:.55;
}

/* El efecto del botón trae su propio fondo opaco (su cristal refracta lo que hay detrás,
   así que no puede ser transparente). Se le pone el violeta exacto de la página y se
   coloca donde el fundido del vídeo ya ha llegado a ese mismo violeta: así no se ve caja. */
.entradas{
  display:flex;
  justify-content:center;
}
.entradas-efecto{
  width:min(92vw, 480px);
  height:min(24vw, 140px);
  border:0;
  display:block;
  background:transparent;
  color-scheme:dark;
  /* El efecto trae su propio plato de fondo (su cristal refracta lo que hay detras, asi
     que no puede ser transparente). Se le difumina el borde para que no se vea la caja. */
}

.boton{
  display:inline-block;
  padding:.85rem 1.9rem;
  border:1px solid rgba(232,227,255,.22);
  border-radius:100px;
  color:var(--texto);
  text-decoration:none;
  font-size:.82rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  transition:border-color .3s, box-shadow .3s, background .3s;
}
.boton:hover{
  border-color:rgba(0,229,255,.6);
  background:rgba(0,229,255,.07);
  box-shadow:0 0 30px rgba(0,229,255,.22);
}

.puerta-hero .abrir{
  padding:1.25rem 3.4rem;
  font-size:.98rem;
}
@media (max-width:760px){
  .puerta-hero .abrir{ padding:1.05rem 2.2rem; font-size:.86rem; letter-spacing:.16em; }
}

.bajar{
  position:absolute;
  bottom:.6rem;
  left:50%;
  transform:translateX(-50%);
  width:1px;
  height:46px;
  background:linear-gradient(180deg, rgba(232,227,255,0), rgba(232,227,255,.4));
  overflow:hidden;
}
.bajar span{
  position:absolute;
  inset:0;
  background:var(--cian);
  animation:caer 2.6s ease-in-out infinite;
}
@keyframes caer{
  0%  { transform:translateY(-100%); }
  60%,100%{ transform:translateY(100%); }
}

/* ---------- FOR SINNERS ONLY ---------- */

.aro{
  position:relative;
  overflow:hidden;
  display:grid;
  place-items:center;
  padding:clamp(2rem, 7vh, 6rem) 0;
  background:var(--violeta);
}
/* El efecto dibuja sobre un lienzo de 2962x2160 anclado arriba. Si el iframe no tiene
   ese mismo formato, el aro queda alto y deja un hueco debajo. Dandole la proporcion
   exacta se centra solo, sin tocar nada del renderer. */
.aro-efecto{
  position:relative;
  width:min(100%, 137svh);
  aspect-ratio:2962 / 2160;
  height:auto;
  border:0;
  display:block;
  background:var(--violeta);
}
/* El efecto trae su propio violeta de fondo; estas dos franjas lo cosen con la página. */
.aro::before,
.aro::after{
  content:"";
  position:absolute;
  left:0; right:0;
  height:16%;
  z-index:2;
  pointer-events:none;
}
.aro::before{ top:0;    background:linear-gradient(180deg, #06011a, rgba(6,1,26,0)); }
.aro::after { bottom:0; background:linear-gradient(0deg,   #06011a, rgba(6,1,26,0)); }

/* ---------- ENTRADAS ---------- */

.entradas-zona{
  max-width:980px;
  margin:0 auto;
  padding:0 clamp(1.1rem, 5vw, 3rem);
  text-align:center;
}
.entradas-zona .etiqueta{ margin-bottom:1rem; }
.entradas-zona h2{
  margin:0 0 clamp(1.8rem, 4vh, 3rem);
  font-size:clamp(2rem, 5.4vw, 3.6rem);
  font-weight:400;
  line-height:1.05;
  letter-spacing:-.02em;
}

/* El panel de la ticketera es de ellos: no se le mete la mano por dentro. Lo que se
   hace aqui es darle marco, fondo y luz para que no parezca una pieza pegada. */
/* --- La puerta --- */
/* Patron de Central: el panel de venta no se sirve abierto. Un boton con luz propia
   que se abre al tocarlo vende; un panel desplegado en frio, no. Y ademas es el
   recurso mas pesado de la pagina. */

@property --ang{ syntax:'<angle>'; inherits:false; initial-value:0deg; }

.puerta{
  position:relative;
  display:inline-block;
  border-radius:999px;
  isolation:isolate;
}
.aspas{
  position:absolute;
  inset:-2px;
  border-radius:999px;
  padding:2px;
  background:conic-gradient(from var(--ang),
    rgba(0,229,255,0) 0 48%, var(--cian) 63%, var(--magenta) 78%, rgba(255,77,240,0) 92%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  animation:giro-aspas 5.5s linear infinite;
  z-index:1;
}
@keyframes giro-aspas{ to{ --ang:360deg; } }

.foco{
  position:absolute;
  inset:-70% -24%;
  border-radius:999px;
  background:radial-gradient(closest-side, rgba(0,229,255,.34), rgba(0,229,255,0) 72%);
  filter:blur(22px);
  animation:respira 4.6s ease-in-out infinite alternate;
  z-index:0;
}
@keyframes respira{
  from{ transform:scale(.9);  opacity:.55; }
  to  { transform:scale(1.08); opacity:1; }
}

.abrir{
  position:relative;
  text-decoration:none;
  z-index:2;
  display:block;
  padding:1.15rem 3.1rem;
  border:0;
  border-radius:999px;
  background:#0c0230;
  color:var(--texto);
  font:inherit;
  font-size:.92rem;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .3s, color .3s;
}
.abrir:hover{ background:#140742; color:#fff; }
.abrir:focus-visible{ outline:2px solid var(--cian); outline-offset:6px; }

/* La puerta se retira al abrir. */
.taquilla.abierta .puerta{
  opacity:0;
  transform:scale(.94);
  pointer-events:none;
  height:0;
  margin:0;
  overflow:hidden;
  transition:opacity .35s ease, transform .35s ease;
}

/* --- El panel --- */
/* `grid-template-rows: 0fr -> 1fr` despliega hasta el alto real sin numeros magicos. */
.panel-caja{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .75s cubic-bezier(.22,.61,.36,1);
}
.taquilla.abierta .panel-caja{ grid-template-rows:1fr; }
.panel-dentro{
  overflow:hidden;
  min-height:0;
  padding:clamp(2rem, 6vh, 4rem) 0 clamp(3rem, 9vh, 6rem);
}

/* El panel es de la ticketera y su tema (claro u oscuro) se elige DENTRO de Enterticket,
   por evento, no por parametro de la URL. El de ahora viene en claro, asi que el marco
   se hace de cristal claro para que la tarjeta blanca se lea como la taquilla y no como
   un agujero. Si el evento se configura en oscuro, basta con cambiar este fondo. */
.panel-venta{
  position:relative;
  border-radius:20px;
  overflow:hidden;
  padding:10px;
  background:rgba(236,238,248,.96);
  border:1px solid rgba(0,229,255,.28);
  box-shadow:
    0 26px 70px rgba(0,0,0,.6),
    0 0 90px rgba(0,229,255,.14);
}
.panel-venta:empty{ display:none; }
.venta{
  display:block;
  width:100%;
  height:clamp(560px, 74svh, 880px);
  border:0;
  border-radius:12px;
  background:transparent;
  color-scheme:light dark;
}
.nota-venta{
  margin:1.1rem 0 0;
  font-size:.78rem;
  letter-spacing:.06em;
  color:var(--texto-mute);
}
.nota-venta a{ color:var(--cian); text-decoration:none; border-bottom:1px solid rgba(0,229,255,.3); }
.nota-venta a:hover{ border-bottom-color:var(--cian); }

/* Mientras se compra, la pagina se calla: el iframe de la ticketera sobre un movil ya
   pide bastante memoria sin tres efectos corriendo detras. */
html.comprando .bokeh,
html.comprando .aspas,
html.comprando .foco,
html.comprando .bajar span{ animation:none; }
html.comprando .fondo{ opacity:.5; }

/* ---------- SECCIONES ---------- */

.seccion{
  max-width:var(--ancho);
  margin:0 auto;
  padding:clamp(5rem, 14vh, 11rem) clamp(1.2rem, 5vw, 3rem);
}
.etiqueta{
  margin:0 0 1.4rem;
  font-size:.74rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--cian);
  opacity:.8;
}
.seccion h2{
  margin:0 0 1.4rem;
  max-width:16ch;
  font-size:clamp(2rem, 5.4vw, 3.6rem);
  font-weight:400;
  line-height:1.05;
  letter-spacing:-.02em;
}
.parrafo{
  max-width:52ch;
  margin:0;
  font-size:1.02rem;
  line-height:1.75;
  color:var(--texto-mute);
}

/* ---------- REVELADO AL BAJAR ---------- */

.con-js .revelar{
  opacity:0;
  transform:translate3d(0, 46px, 0);
  transition:opacity .9s cubic-bezier(.22,.61,.36,1),
             transform .9s cubic-bezier(.22,.61,.36,1);
  will-change:opacity, transform;
}
.con-js .revelar.visible{
  opacity:1;
  transform:none;
  /* Una vez revelada, fuera la capa de composicion: dejarla puesta gasta memoria de
     video en cada seccion y ensucia el pintado. */
  will-change:auto;
}

/* ---------- MÓVIL ---------- */

@media (max-width:760px){
  .nav nav{ display:none; }
  .boton-nav{ margin-left:auto; }

  /* En vertical, recortar a pantalla completa se come el logo por los lados. El plano
     sigue yendo de lado a lado y pegado arriba, pero en banda 16:9: entero y a sangre. */
  .hero{
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    padding:0 0 clamp(2rem, 6vh, 3.4rem);
  }
  .hero-plano{
    position:relative;
    inset:auto;
    width:100%;
    aspect-ratio:1 / 1;
  }
  .hero-video{ object-position:50% 48%; }
  .hero-texto{ margin:auto 0; }


  .hero-fundido{
    background:
      linear-gradient(180deg, rgba(4,0,15,.78) 0%, rgba(4,0,15,0) 26%),
      linear-gradient(180deg, rgba(10,2,38,0) 56%, rgba(10,2,38,.85) 76%, var(--violeta) 92%);
  }
  .hero-texto{ bottom:4.5rem; }
  .sitio{ letter-spacing:.2em; font-size:.72rem; }
  .sitio span{ display:block; }
  .sitio .sep{ display:none; }
  .entradas-efecto{ width:94vw; height:50vw; }
  .aro{ padding:2.5rem 0; }
  .venta{ height:clamp(520px, 80svh, 760px); }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
  .con-js .revelar{ opacity:1; transform:none; }
}