/* ============================================================
   Blackstar Club — hoja de estilo
   Colores sacados del propio vídeo de la sala: magenta, cian y
   verde ácido sobre negro.
   ============================================================ */

@font-face{
  font-family:'Anton';
  src:url('/tipos/anton-latin.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2191,U+2192,U+2605,U+20AC;
}
@font-face{
  font-family:'Inter';
  src:url('/tipos/inter-latin.woff2') format('woff2-variations'),
      url('/tipos/inter-latin.woff2') format('woff2');
  font-weight:300 800; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2191,U+2192,U+2605,U+20AC;
}

:root{
  --negro:#08080a;
  --humo:#0f0f13;
  --carbon:#17171d;
  --blanco:#f5f5f7;
  --gris:#9a9aa6;
  --magenta:#ff1e8e;
  --cian:#19e3ff;
  --acido:#c8ff2a;
  --borde:rgba(245,245,247,.14);
  --canal:min(1480px,100%);
  --aire:clamp(1rem,5vw,4.5rem);
  --display:'Anton',Impact,'Haettenschweiler','Arial Narrow',sans-serif;
  --texto:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}

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

html{
  color-scheme:dark;
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
@media (pointer:fine){
  html{overscroll-behavior:none}
}

body{
  margin:0;
  background:var(--negro);
  color:var(--blanco);
  font-family:var(--texto);
  font-size:clamp(1rem,.95rem + .25vw,1.0625rem);
  line-height:1.6;
  font-weight:400;
  overflow-x:hidden;
  touch-action:manipulation;
  -webkit-tap-highlight-color:rgba(255,30,142,.25);
}

img{display:block;max-width:100%;height:auto}

h1,h2,h3{margin:0;font-weight:400;text-wrap:balance}
p{margin:0}

a{color:inherit;text-decoration:none}

:where(a,button,[tabindex]):focus-visible{
  outline:2px solid var(--acido);
  outline-offset:3px;
  border-radius:2px;
}

::selection{background:var(--magenta);color:#fff}

/* ---------- utilidades ---------- */

.saltar{
  position:fixed; top:.5rem; left:.5rem; z-index:90;
  transform:translateY(-200%);
  background:var(--acido); color:#000;
  padding:.6rem 1rem; font-weight:700; font-size:.85rem;
  transition:transform .18s ease;
}
.saltar:focus-visible{transform:translateY(0)}

.rotulo{
  font-size:.72rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.24em;
  color:var(--magenta);
  display:flex; align-items:center; gap:.7rem;
}
.rotulo .num{
  font-family:var(--display);
  font-size:1.5rem; letter-spacing:0; color:var(--blanco);
  line-height:1;
}

.titulazo{
  font-family:var(--display);
  font-size:clamp(2.4rem,6vw,5rem);
  line-height:.95;
  letter-spacing:-.02em;
  text-transform:uppercase;
  margin:.55rem 0 1.4rem;
}

.cifra,.noche-precio,.mesa-precio{font-variant-numeric:tabular-nums}

.boton{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; min-height:48px;
  padding:.85rem 1.6rem;
  border:1px solid var(--borde);
  font-size:.8rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.14em;
  background:rgba(8,8,10,.4);
  backdrop-filter:blur(6px);
  transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;
}
.boton:hover{background:rgba(245,245,247,.1);border-color:var(--blanco);transform:translateY(-2px)}
.boton:active{transform:translateY(0)}
.boton-ppal{background:var(--magenta);border-color:var(--magenta);color:#fff}
.boton-ppal:hover{background:#fff;border-color:#fff;color:#000}

/* ---------- barra superior ---------- */

.barra{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:center; gap:clamp(1rem,4vw,3rem);
  padding:1rem max(var(--aire),env(safe-area-inset-right)) 1rem max(var(--aire),env(safe-area-inset-left));
  background:linear-gradient(to bottom,rgba(8,8,10,.92),rgba(8,8,10,0));
  transition:background-color .25s ease,border-color .25s ease;
  border-bottom:1px solid transparent;
}
.barra[data-pegada="si"]{
  background:rgba(8,8,10,.86);
  backdrop-filter:blur(14px);
  border-bottom-color:var(--borde);
}
.barra-marca{flex:0 0 auto}
.barra-marca img{width:clamp(118px,13vw,168px);height:auto}

.barra-nav{display:flex; gap:clamp(1rem,2.4vw,2.2rem); margin-left:auto}
.barra-nav a{
  position:relative;
  font-size:.74rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.17em;
  color:var(--gris);
  padding:.4rem 0;
  transition:color .2s ease;
}
.barra-nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--magenta);
  transform:scaleX(0); transform-origin:left;
  transition:transform .25s ease;
}
.barra-nav a:hover{color:var(--blanco)}
.barra-nav a:hover::after{transform:scaleX(1)}

.barra-der{display:flex; align-items:center; gap:.75rem}
.barra-der .boton{min-height:42px;padding:.6rem 1.1rem;font-size:.7rem}

.barra-menu{
  display:none;
  width:48px; height:48px;
  background:none; border:1px solid var(--borde);
  cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:6px;
}
.barra-menu span{display:block;width:20px;height:2px;background:var(--blanco)}

@media (max-width:1000px){
  .barra-nav{display:none}
  .barra-menu{display:flex}
  .barra-der .boton{display:none}
}

/* ---------- menú de móvil ---------- */

.menu{
  position:fixed; inset:0; z-index:60;
  background:rgba(8,8,10,.97);
  display:grid; place-items:stretch;
  overscroll-behavior:contain;
}
.menu[hidden]{display:none}
.menu-caja{
  padding:clamp(1.5rem,6vw,3rem);
  padding-top:max(1.5rem,env(safe-area-inset-top));
  display:flex; flex-direction:column; gap:2rem;
  overflow-y:auto;
}
.menu-cerrar{
  align-self:flex-end;
  width:48px; height:48px;
  background:none; border:1px solid var(--borde); color:var(--blanco);
  font-size:1.1rem; cursor:pointer;
}
.menu-nav{display:flex; flex-direction:column}
.menu-nav a{
  font-family:var(--display);
  font-size:clamp(2.4rem,13vw,4rem);
  line-height:1.05; text-transform:uppercase;
  padding:.35rem 0;
  border-bottom:1px solid var(--borde);
  display:flex; align-items:baseline; gap:1rem;
  transition:color .2s ease,padding-left .2s ease;
}
.menu-nav a span{
  font-family:var(--texto); font-size:.7rem; font-weight:700;
  letter-spacing:.2em; color:var(--magenta);
}
.menu-nav a:hover{color:var(--magenta); padding-left:.6rem}
.menu-pie{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}

/* ---------- portada ---------- */

.portada{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(6rem,14vh,9rem) var(--aire) clamp(1.5rem,5vh,3rem);
  padding-bottom:max(clamp(1.5rem,5vh,3rem),env(safe-area-inset-bottom));
  overflow:hidden;
  isolation:isolate;
}
.portada-video{position:absolute;inset:0;z-index:-3;background:#000}
.portada-video video{
  width:100%; height:100%;
  object-fit:cover;
}
.portada-velo{
  position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(120% 90% at 50% 15%,rgba(8,8,10,.25) 0%,rgba(8,8,10,.78) 60%,rgba(8,8,10,.96) 100%),
    linear-gradient(to top,var(--negro) 2%,rgba(8,8,10,0) 42%);
}
.foco{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  opacity:0;
  background:radial-gradient(220px 220px at var(--x,50%) var(--y,50%),rgba(255,30,142,.18),rgba(25,227,255,.06) 45%,transparent 70%);
  transition:opacity .4s ease;
}

.grano{
  position:fixed; inset:0; z-index:40; pointer-events:none;
  opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23r)'/%3E%3C/svg%3E");
}

.portada-cuerpo{max-width:min(980px,100%)}
.portada-tit{margin:1rem 0 1.6rem}
.portada-tit img{width:min(100%,860px);height:auto}
.portada-txt{
  max-width:min(48ch,100%);
  font-size:clamp(1rem,.95rem + .5vw,1.3rem);
  color:#d6d6de;
}
.portada-txt + .portada-txt{margin-top:.9rem}
.portada-txt-ppal{
  font-size:clamp(1.15rem,1rem + .9vw,1.7rem);
  color:var(--blanco);
  font-weight:500;
}
.rayo{color:var(--acido)}
.portada-botones{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.8rem}

.portada-abajo{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:1rem;
  margin-top:clamp(2rem,8vh,4.5rem);
  padding-top:1.1rem;
  border-top:1px solid var(--borde);
}
.bajar{
  font-size:.74rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.2em; color:var(--gris);
  display:inline-flex; align-items:center; gap:.6rem; min-height:44px;
  transition:color .2s ease;
}
.bajar:hover{color:var(--blanco)}
.bajar span{color:var(--magenta)}

.parar{
  display:inline-flex; align-items:center; gap:.6rem;
  min-height:44px; padding:.4rem .9rem;
  background:none; border:1px solid var(--borde); color:var(--gris);
  font-family:var(--texto); font-size:.68rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.16em;
  cursor:pointer;
  transition:color .2s ease,border-color .2s ease;
}
.parar:hover{color:var(--blanco);border-color:var(--blanco)}
.parar-icono{
  width:9px; height:11px;
  border-left:3px solid currentColor; border-right:3px solid currentColor;
}
.parar[aria-pressed="true"] .parar-icono{
  border:none;
  width:0; height:0;
  border-top:6px solid transparent; border-bottom:6px solid transparent;
  border-left:10px solid currentColor;
}

/* ---------- cinta ---------- */

.cinta{
  border-top:1px solid var(--magenta);
  border-bottom:1px solid var(--magenta);
  background:#0c0c10;
  overflow:hidden;
  padding:.55rem 0;
}
.cinta-tren{
  display:flex; width:max-content;
  animation:rodar 34s linear infinite;
}
.cinta-tren span{
  font-family:var(--display);
  font-size:clamp(1.3rem,3.6vw,2.2rem);
  text-transform:uppercase; letter-spacing:.02em;
  white-space:nowrap; padding-right:1.5rem;
  color:#e9e9ef;
}
@keyframes rodar{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- bloques ---------- */

.bloque{
  width:var(--canal); margin-inline:auto;
  padding:clamp(4rem,11vw,9rem) var(--aire);
  scroll-margin-top:5.5rem;
}
.bloque-cab{max-width:62ch}
.bloque-txt{color:#c3c3cd; max-width:56ch; margin-top:1rem}
.bloque-txt-flojo{color:var(--gris); font-style:italic}

/* agenda: una fila por noche, en horizontal */

.noches{list-style:none; margin:3rem 0 0; padding:0; border-top:1px solid var(--borde)}

.noche{
  position:relative;
  display:grid;
  grid-template-columns:minmax(100px,.6fr) minmax(0,1.9fr) minmax(0,.85fr) minmax(0,1.5fr) auto;
  align-items:center; gap:clamp(.8rem,2.2vw,1.8rem);
  padding:clamp(1rem,2.4vw,1.6rem) 0;
  border-bottom:1px solid var(--borde);
  transition:background-color .25s ease,padding-left .25s ease;
}
.noche:hover{background:rgba(255,30,142,.07); padding-left:1rem}

.noche-fecha{
  font-size:.74rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.18em; color:var(--cian);
}

.noche-conflyer{display:flex; align-items:center; gap:clamp(.7rem,1.6vw,1.1rem); min-width:0}

.noche-flyer{
  display:block; width:clamp(74px,8vw,116px); flex:0 0 auto;
  padding:0; background:#06060a; cursor:zoom-in;
  border:1px solid var(--borde);
  transition:border-color .2s ease,transform .25s ease;
}
.noche-flyer img{width:100%; aspect-ratio:1350/1920; object-fit:cover; display:block}
.noche-flyer:hover{border-color:var(--magenta); transform:scale(1.05)}

.noche-tit{
  font-family:var(--display);
  font-size:clamp(1.4rem,3.4vw,2.4rem);
  line-height:1.08; text-transform:uppercase;
  overflow-wrap:break-word; min-width:0;
}
.noche-txt{color:var(--gris); font-size:.9rem; min-width:0}

.noche-pie{display:flex; flex-direction:column; gap:.1rem; font-size:.8rem; color:var(--gris)}
.noche-precio{color:var(--acido); font-weight:600}
.noche-libre{color:var(--cian)}

/* ---------- la cuenta atrás ---------- */

.cuenta{display:block; margin-top:.35rem}
.cuenta-tit{
  display:block; font-size:.58rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.22em; color:var(--flojo);
  margin-bottom:.3rem;
}
.cuenta-marcas{display:inline-flex; align-items:flex-start; gap:.2rem}
.cuenta-trozo{
  display:flex; flex-direction:column; align-items:center;
  min-width:clamp(34px,3.4vw,46px);
}
.cuenta-trozo b{
  display:block; width:100%;
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.35rem,2.5vw,2.1rem); line-height:1.08;
  color:var(--blanco); font-variant-numeric:tabular-nums;
  text-align:center;
  background:linear-gradient(to bottom,#15151c,#0a0a0e);
  border:1px solid var(--borde);
  padding:.1rem .15rem;
  text-shadow:0 0 16px rgba(25,227,255,.35);
}
.cuenta-trozo i{
  font-style:normal; font-size:.5rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.12em; color:var(--flojo);
  margin-top:.25rem;
}
.cuenta-dos{
  font-family:var(--display);
  font-size:clamp(1.1rem,2vw,1.7rem); line-height:1.3;
  color:var(--magenta);
}
.cuenta-seg b{
  color:var(--cian);
  border-color:rgba(25,227,255,.45);
  text-shadow:0 0 20px rgba(25,227,255,.6);
}
/* el golpe de luz de cada segundo */
.cuenta-trozo b.late{animation:golpe .45s ease-out}
@keyframes golpe{
  0%{transform:scale(1.1); filter:brightness(1.9)}
  100%{transform:scale(1); filter:brightness(1)}
}

.cuenta-ya{display:none}
.cuenta[data-abierto="si"] .cuenta-marcas{display:none}
.cuenta[data-abierto="si"] .cuenta-ya{
  display:inline-block;
  font-family:var(--display);
  font-size:clamp(1.1rem,2.2vw,1.7rem); line-height:1.1;
  text-transform:uppercase; color:var(--magenta);
  text-shadow:0 0 22px rgba(255,30,142,.6);
  animation:parpadea-ya 1.2s ease-in-out infinite;
}
/* parpadeo de verdad: que se vea desde lejos que la noche es HOY */
@keyframes parpadea-ya{
  0%,100%{opacity:1}
  50%{opacity:.16}
}

@media (prefers-reduced-motion:reduce){
  .cuenta-trozo b.late{animation:none}
  .cuenta[data-abierto="si"] .cuenta-ya{animation:none}
}

.noche-enlace{
  justify-self:end;
  font-size:.72rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.16em;
  display:inline-flex; align-items:center; gap:.5rem; min-height:44px;
  white-space:nowrap;
}
.noche-enlace span{transition:transform .2s ease; display:inline-block}
.noche-enlace:hover span{transform:translateX(5px)}

.noche-destacada::before{
  content:'★'; position:absolute; left:-1.4rem; top:50%;
  transform:translateY(-50%);
  color:var(--magenta); font-size:.8rem;
}
.noche-sin{display:block; padding:2rem 0; border-bottom:1px solid var(--borde)}

@media (max-width:980px){
  .noche{
    grid-template-columns:minmax(0,1fr) auto;
    row-gap:.5rem; align-items:start;
  }
  .noche-fecha{grid-column:1}
  .noche-enlace{grid-column:2; grid-row:1; justify-self:end}
  .noche-conflyer{grid-column:1/-1}
  .noche-txt{grid-column:1/-1}
  .noche-pie{grid-column:1/-1; flex-direction:row; gap:1rem; flex-wrap:wrap}
  .noche-destacada::before{left:auto; right:0; top:1.1rem; transform:none}
}

/* el club */

.bloque-club{
  display:grid; gap:clamp(2rem,6vw,5rem);
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  align-items:start;
}
.cifras{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px; margin:0; background:var(--borde);
  border:1px solid var(--borde);
}
.cifras div{background:var(--humo); padding:clamp(1.2rem,3vw,2rem)}
.cifras dt{
  font-size:.7rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.18em; color:var(--gris);
}
.cifras dd{
  margin:.4rem 0 0;
  font-family:var(--display); font-size:clamp(2rem,6vw,3.4rem);
  line-height:1; font-variant-numeric:tabular-nums;
}
@media (max-width:860px){
  .bloque-club{grid-template-columns:1fr}
}

/* reservados */

.mesas{
  list-style:none; margin:3rem 0 0; padding:0;
  display:grid; gap:1px; background:var(--borde);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  border:1px solid var(--borde);
}
.mesa{
  background:var(--humo);
  padding:clamp(1.4rem,3vw,2.2rem);
  display:flex; flex-direction:column; gap:.7rem;
  transition:background-color .25s ease;
}
.mesa:hover{background:var(--carbon)}
.mesa-tit{
  font-family:var(--display); font-size:clamp(1.5rem,3.4vw,2.1rem);
  line-height:1.08; text-transform:uppercase;
}
.mesa-txt{color:var(--gris); font-size:.88rem}
.mesa-precio{
  margin-top:auto; font-family:var(--display);
  font-size:clamp(1.6rem,4vw,2.4rem); line-height:1; color:var(--acido);
}
.mesa-precio span{
  display:block; font-family:var(--texto); font-size:.68rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gris);
}
.aviso{
  margin-top:1.4rem; font-size:.82rem; color:var(--gris);
  border-left:2px solid var(--magenta); padding-left:.9rem;
}

/* visítanos */

.bloque-visita{
  display:grid; gap:clamp(2rem,6vw,5rem);
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  align-items:start;
}
.visita-datos{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));
  gap:clamp(1.5rem,4vw,2.5rem);
}
.dato h3{
  font-size:.7rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.2em; color:var(--magenta);
  margin-bottom:.6rem;
}
.dato p{color:#c3c3cd}
.dato a{border-bottom:1px solid var(--borde); transition:border-color .2s ease}
.dato a:hover{border-color:var(--magenta)}
@media (max-width:860px){
  .bloque-visita{grid-template-columns:1fr}
}

/* ---------- pie ---------- */

.pie{
  border-top:1px solid var(--borde);
  padding:clamp(2.5rem,6vw,4rem) var(--aire);
  padding-bottom:max(clamp(2.5rem,6vw,4rem),env(safe-area-inset-bottom));
  width:var(--canal); margin-inline:auto;
  display:flex; flex-wrap:wrap; align-items:center; gap:1.5rem 2.5rem;
}
.pie-logo{width:132px; height:auto; opacity:.65}
.pie-nav{display:flex; flex-wrap:wrap; gap:1.2rem; margin-right:auto}
.pie-nav a{
  font-size:.72rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.16em; color:var(--gris);
  transition:color .2s ease;
}
.pie-nav a:hover{color:var(--blanco)}
.pie-legal{font-size:.74rem; color:#6d6d78; letter-spacing:.06em}

/* ---------- menos movimiento ---------- */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .cinta-tren{animation:none; transform:none}
  .foco{display:none}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

/* ---------- enlaces dentro de texto ---------- */

.enlace{
  color:var(--blanco);
  border-bottom:1px solid var(--magenta);
  transition:background-color .2s ease,color .2s ease;
}
.enlace:hover{background:var(--magenta);color:#fff}

.noche-libre{color:var(--cian)}

/* ---------- promotores ---------- */

.promotores{
  display:grid; gap:clamp(2rem,6vw,4.5rem);
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:start;
}
.incluye{
  list-style:none; margin:2rem 0 0; padding:0;
  border-top:1px solid var(--borde);
}
.incluye li{
  padding:.85rem 0 .85rem 2rem;
  border-bottom:1px solid var(--borde);
  position:relative;
  color:#c3c3cd;
}
.incluye li::before{
  content:'★';
  position:absolute; left:0; top:.85rem;
  color:var(--magenta); font-size:.78rem;
}

/* ---------- formulario ---------- */

.formu{
  background:var(--humo);
  border:1px solid var(--borde);
  padding:clamp(1.3rem,3.5vw,2.4rem);
  display:flex; flex-direction:column; gap:1.1rem;
}
.formu-tit{
  font-family:var(--display);
  font-size:clamp(1.6rem,4vw,2.4rem);
  line-height:1.08; text-transform:uppercase;
  margin-bottom:.4rem;
}
.campo{display:flex; flex-direction:column; gap:.4rem; min-width:0}
.campo-fila{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)); gap:1.1rem}
.campo label{
  font-size:.68rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.18em; color:var(--gris);
  cursor:pointer;
}
.campo input,
.campo textarea{
  width:100%;
  min-height:48px;
  padding:.7rem .85rem;
  background:#06060a;
  color:var(--blanco);
  border:1px solid var(--borde);
  border-radius:0;
  font-family:var(--texto); font-size:1rem;
  transition:border-color .2s ease,background-color .2s ease;
}
.campo textarea{min-height:120px; resize:vertical; line-height:1.5}
.campo input::placeholder,
.campo textarea::placeholder{color:#5d5d68}
.campo input:hover,
.campo textarea:hover{border-color:rgba(245,245,247,.3)}
.campo input:focus-visible,
.campo textarea:focus-visible{border-color:var(--magenta); outline-offset:0}
.campo input[aria-invalid="true"]{border-color:#ff5252}
.campo input[type="date"]{color-scheme:dark}

.formu-error{
  color:#ff7676; font-size:.85rem;
  border-left:2px solid #ff5252; padding-left:.8rem;
}
.formu-enviar{align-self:flex-start; margin-top:.3rem}
.formu-pie{font-size:.78rem; color:var(--gris)}

@media (max-width:900px){
  .promotores{grid-template-columns:1fr}
}

/* ---------- el botón de la música ---------- */

.musica{
  width:48px; height:48px;
  display:flex; align-items:center; justify-content:center; gap:2px;
  background:none; border:1px solid var(--borde); color:var(--gris);
  cursor:pointer; flex:0 0 auto;
  transition:border-color .2s ease,color .2s ease,background-color .2s ease;
}
.musica:hover{border-color:var(--blanco); color:var(--blanco)}
.musica[aria-pressed="true"]{border-color:var(--magenta); color:var(--magenta)}

.musica-barras{display:flex; align-items:flex-end; gap:2px; height:16px}
.musica-barras span{
  width:3px; height:4px;
  background:currentColor;
  transform-origin:bottom;
}
.musica[aria-pressed="true"] .musica-barras span{
  animation:bailar .9s ease-in-out infinite alternate;
}
.musica[aria-pressed="true"] .musica-barras span:nth-child(2){animation-delay:.15s}
.musica[aria-pressed="true"] .musica-barras span:nth-child(3){animation-delay:.3s}
.musica[aria-pressed="true"] .musica-barras span:nth-child(4){animation-delay:.45s}
@keyframes bailar{from{transform:scaleY(1)}to{transform:scaleY(4)}}

/* parada: las barras quietas pero visibles */
.musica[aria-pressed="false"] .musica-barras span:nth-child(1){height:5px}
.musica[aria-pressed="false"] .musica-barras span:nth-child(2){height:11px}
.musica[aria-pressed="false"] .musica-barras span:nth-child(3){height:7px}
.musica[aria-pressed="false"] .musica-barras span:nth-child(4){height:13px}

@media (prefers-reduced-motion:reduce){
  .musica[aria-pressed="true"] .musica-barras span{animation:none; height:10px}
}

/* ---------- la sala en fotos ---------- */

.galeria-bloque[hidden]{display:none}
.galeria-sala{
  display:grid; gap:2px; margin-top:2.5rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  background:var(--borde);
  border:1px solid var(--borde);
}
.galeria-sala figure{margin:0; position:relative; background:#000; overflow:hidden}
.galeria-sala img{
  width:100%; height:100%; aspect-ratio:4/3; object-fit:cover;
  transition:transform .5s ease, opacity .3s ease;
}
.galeria-boton{
  display:block; width:100%; padding:0; border:none;
  background:none; cursor:zoom-in;
}
.galeria-sala figure:hover img{transform:scale(1.05); opacity:.82}
.galeria-boton:focus-visible{outline-offset:-3px}

/* el flyer dentro de una fecha */
.noche-flyer{
  display:block; width:clamp(74px,9vw,128px); flex:0 0 auto;
  padding:0; background:none; cursor:zoom-in;
  border:1px solid var(--borde);
  transition:border-color .2s ease,transform .25s ease;
}
.noche-flyer img{width:100%; aspect-ratio:1350/1920; object-fit:cover; display:block}
.noche-flyer:hover{border-color:var(--magenta); transform:scale(1.04)}
.noche-conflyer{display:flex; align-items:center; gap:.9rem; min-width:0}

/* ---------- redes en el pie ---------- */

.pie-redes{display:flex; flex-wrap:wrap; gap:.9rem; width:100%}
.pie-redes a{
  display:inline-flex; align-items:center; gap:.4rem;
  min-height:40px; padding:.3rem .8rem;
  border:1px solid var(--borde);
  font-size:.68rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.16em; color:var(--gris);
  transition:color .2s ease,border-color .2s ease,background-color .2s ease;
}
.pie-redes a:hover{color:#fff; border-color:var(--magenta); background:var(--magenta)}
.pie-legal a{border-bottom:1px solid var(--borde)}
.pie-legal a:hover{border-color:var(--magenta)}

/* ============================================================
   LA PUERTA — la pantalla de entrada
   ============================================================ */

.puerta{
  position:fixed; inset:0; z-index:80;
  display:grid; place-items:center;
  background:var(--negro);
  overflow:hidden;
  isolation:isolate;
  opacity:1;
  transition:opacity .7s ease;
}
.puerta[hidden]{display:none}
.puerta[data-abriendo="si"]{opacity:0; pointer-events:none}

.puerta-foto{
  position:absolute; inset:-6%;
  z-index:-3;
  background-image:url('/media/puerta-movil.jpg');
  background-size:cover; background-position:center 38%;
  transform:scale(1.06);
  animation:respirar 26s ease-in-out infinite alternate;
  will-change:transform;
}
@media (min-width:760px){
  .puerta-foto{background-image:url('/media/puerta.jpg')}
}
@keyframes respirar{
  from{transform:scale(1.04) translate3d(-1.2%,0.6%,0)}
  to{transform:scale(1.16) translate3d(1.2%,-1%,0)}
}

.puerta-velo{
  position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(120% 85% at 50% 48%,rgba(8,8,10,.1) 0%,rgba(8,8,10,.52) 58%,rgba(8,8,10,.86) 100%),
    linear-gradient(to bottom,rgba(8,8,10,.45),rgba(8,8,10,.08) 38%,rgba(8,8,10,.7));
}

.puerta-cuerpo{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:1.6rem;
  padding:2rem var(--aire);
  padding-bottom:max(2rem,env(safe-area-inset-bottom));
  text-align:center;
  animation:asomar 1.1s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes asomar{
  from{opacity:0; transform:translate3d(0,14px,0)}
  to{opacity:1; transform:none}
}

/* una sombra suave detras del logo y el boton, que la foto tiene mucho lio */
.puerta-cuerpo::before{
  content:''; position:absolute; inset:-45% -40%;
  z-index:-1; pointer-events:none;
  background:radial-gradient(42% 38% at 50% 48%,rgba(8,8,10,.5),rgba(8,8,10,0) 78%);
}

.puerta-logo{width:min(760px,86vw); height:auto}

.puerta-txt{
  text-shadow:0 2px 16px rgba(8,8,10,.9);
  font-size:.74rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.34em;
  color:var(--gris);
  padding-left:.34em;
}

.puerta-bot{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:62px; padding:1rem 3.6rem;
  background:transparent; color:var(--blanco);
  border:1px solid rgba(245,245,247,.5);
  font-family:var(--texto); font-size:.82rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.26em;
  cursor:pointer;
  position:relative; overflow:hidden;
  transition:color .25s ease,border-color .25s ease,transform .25s ease;
}
.puerta-bot::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:var(--magenta);
  transform:scaleY(0); transform-origin:bottom;
  transition:transform .3s cubic-bezier(.2,.7,.2,1);
}
.puerta-bot:hover{border-color:var(--magenta); transform:translateY(-2px)}
.puerta-bot:hover::before{transform:scaleY(1)}
.puerta-bot:active{transform:translateY(0)}
.puerta-bot-sub{
  font-size:.56rem; font-weight:600; letter-spacing:.2em;
  color:var(--acido); text-transform:uppercase;
}
.puerta-bot:hover .puerta-bot-sub{color:#fff}

/* mientras la puerta está puesta, detrás no se mueve nada */
html[data-puerta="si"]{overflow:hidden}
html[data-puerta="si"] body{overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .puerta-foto{animation:none; transform:scale(1.02)}
  .puerta-cuerpo{animation:none}
  .puerta{transition:none}
}

/* las chispas de la puerta */
.puerta-fx{
  position:absolute; inset:0; z-index:-1;
  width:100%; height:100%;
  pointer-events:none;
  mix-blend-mode:screen;
}
@media (prefers-reduced-motion:reduce){
  .puerta-fx{display:none}
}

/* ---------- ¿cómo llegar? ---------- */

.llegar-caja{
  grid-column:1/-1;
  margin-top:clamp(2rem,5vw,3.5rem);
  background:#0b0b10;
  border:1px solid var(--borde);
  padding:clamp(1.3rem,3.5vw,2.4rem);
}
.llegar-tit{
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  font-family:var(--display);
  font-size:clamp(1.8rem,5vw,3rem);
  line-height:1.05; text-transform:none;
  margin-bottom:1.6rem;
}
.llegar-tacos{display:inline-flex; height:clamp(1.4rem,3.4vw,2.1rem)}
.llegar-tacos i{display:block; width:clamp(2.4rem,6vw,3.6rem); height:100%}
.llegar-tacos i:first-child{background:var(--magenta)}
.llegar-tacos i:last-child{background:var(--cian)}

.llegar{list-style:none; margin:0; padding:0; display:grid; gap:1.3rem}
.llegar li{
  display:grid; grid-template-columns:56px minmax(0,1fr);
  gap:clamp(.9rem,2.5vw,1.6rem); align-items:start;
}
.llegar svg{width:48px; height:48px; fill:var(--blanco); flex:0 0 auto}
.llegar p{color:#c7c7d1; line-height:1.55}
.llegar strong{color:var(--blanco); font-weight:700}
@media (max-width:520px){
  .llegar li{grid-template-columns:40px minmax(0,1fr); gap:.9rem}
  .llegar svg{width:34px; height:34px}
}

/* ---------- el botón que late ---------- */

.boton-late{position:relative; isolation:isolate}
.boton-late::after{
  content:''; position:absolute; inset:0; z-index:-1;
  border:1px solid var(--magenta);
  animation:latido 2.4s cubic-bezier(.2,.7,.3,1) infinite;
  pointer-events:none;
}
@keyframes latido{
  0%   {opacity:.85; transform:scale(1)}
  55%  {opacity:0;   transform:scale(1.34)}
  100% {opacity:0;   transform:scale(1.34)}
}
/* al pasar por encima deja de llamar la atención: ya la tiene */
.boton-late:hover::after{animation-play-state:paused; opacity:0}

@media (prefers-reduced-motion:reduce){
  .boton-late::after{animation:none; opacity:0}
}

/* ---------- la cuenta atrás de cada noche ---------- */

.noche-cuenta{
  color:var(--cian);
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
}
.noche-cuenta[data-ya="si"]{color:var(--magenta); font-weight:700}

/* ---------- el flyer, en grande ---------- */

.flyer-fondo{
  position:fixed; inset:0; z-index:70;
  display:grid; place-items:center;
  padding:clamp(1rem,4vw,3rem);
  background:rgba(4,4,6,.93);
  backdrop-filter:blur(6px);
  overscroll-behavior:contain;
  animation:aparecer .22s ease both;
}
@keyframes aparecer{from{opacity:0}to{opacity:1}}
.flyer-caja{margin:0; display:flex; flex-direction:column; align-items:center; gap:.9rem; max-height:100%}
.flyer-caja img{
  max-width:min(92vw,620px); max-height:82vh;
  width:auto; height:auto;
  border:1px solid var(--borde);
  box-shadow:0 30px 90px rgba(0,0,0,.7);
}
.flyer-caja figcaption{
  font-size:.74rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.2em; color:var(--gris);
  text-align:center;
}
.flyer-cerrar{
  position:absolute; top:clamp(.8rem,3vw,1.6rem); right:clamp(.8rem,3vw,1.6rem);
  width:48px; height:48px;
  background:none; border:1px solid var(--borde); color:var(--blanco);
  font-size:1.1rem; cursor:pointer;
  transition:border-color .2s ease,color .2s ease;
}
.flyer-cerrar:hover{border-color:var(--magenta); color:var(--magenta)}

@media (prefers-reduced-motion:reduce){
  .flyer-fondo{animation:none}
  .noche-flyer:hover{transform:none}
}

/* el flyer mirado de pasada: no estorba al ratón ni tapa el fondo entero */
.flyer-paso{
  background:rgba(4,4,6,.72);
  pointer-events:none;
  animation:aparecer .14s ease both;
}
.flyer-paso .flyer-caja img{
  max-width:min(88vw,900px); max-height:80vh;
  border-color:var(--magenta);
}

/* ---------- el mes, encima de sus noches ---------- */

.noche-mes{
  display:flex; align-items:baseline; gap:.6rem;
  padding:clamp(1.6rem,3.5vw,2.6rem) 0 .7rem;
  border-bottom:1px solid var(--magenta);
}
.noche-mes:first-child{padding-top:.4rem}
.noche-mes span{
  font-family:var(--display);
  font-size:clamp(1.5rem,3.4vw,2.4rem);
  line-height:1; text-transform:uppercase;
  color:var(--blanco);
}
.noche-mes i{
  font-style:normal; font-size:.72rem; font-weight:700;
  letter-spacing:.2em; color:var(--magenta);
}

/* ---------- nuestras marcas ---------- */

.marcas-bloque[hidden]{display:none}
.marcas{
  list-style:none; margin:2.5rem 0 0; padding:0;
  display:grid; gap:1px; background:var(--borde);
  border:1px solid var(--borde);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr));
}
.marcas li{background:var(--humo)}
.marcas a,
.marcas .marca{
  display:grid; place-items:center;
  min-height:clamp(96px,11vw,132px);
  padding:1.2rem 1rem;
  transition:background-color .25s ease;
}
.marcas a:hover{background:var(--carbon)}
.marcas img{
  max-width:100%; max-height:clamp(46px,6vw,70px);
  width:auto; height:auto;
  object-fit:contain;
  opacity:.72;
  transition:opacity .25s ease,transform .25s ease;
}
.marcas a:hover img{opacity:1; transform:scale(1.05)}
.marcas-sin{
  grid-column:1/-1; background:var(--humo);
  padding:2rem; text-align:center; color:var(--gris); font-size:.85rem;
}

/* ---------- los eventos de la casa ---------- */
/*  Fichas con el logo del evento. Si el evento tiene pagina propia la
    ficha entera es un enlace; si no, es un cuadro y nada mas.          */
.eventos-bloque[hidden]{display:none}
.eventos-casa{
  list-style:none; margin:2.5rem 0 0; padding:0;
  display:grid; gap:1px; background:var(--borde);
  border:1px solid var(--borde);
  /* auto-fit y no auto-fill: con dos o tres eventos no queda un hueco
     gris al final de la fila */
  grid-template-columns:repeat(auto-fit,minmax(min(100%,268px),1fr));
}
.eventos-casa li{background:var(--humo)}
.fiesta-enl{
  display:grid; grid-template-rows:1fr auto auto;
  gap:.55rem; height:100%;
  padding:clamp(1.3rem,2.4vw,2rem) clamp(1.1rem,2vw,1.6rem);
  transition:background-color .25s ease;
}
a.fiesta-enl:hover{background:var(--carbon)}
.fiesta-logo{
  display:grid; place-items:center;
  min-height:clamp(112px,12vw,166px);
}
.fiesta-logo img{
  max-width:100%; max-height:clamp(84px,9vw,124px);
  width:auto; height:auto; object-fit:contain;
  opacity:.82; transition:opacity .25s ease,transform .25s ease;
}
a.fiesta-enl:hover .fiesta-logo img{opacity:1; transform:scale(1.04)}
/* sin logo todavia: la inicial, que el hueco no quede vacio */
.fiesta-sinlogo{
  font-family:var(--display); font-size:clamp(2.6rem,5vw,3.8rem);
  line-height:1; color:var(--borde);
}
.fiesta-nom{
  font-family:var(--display); font-size:clamp(1.15rem,1.9vw,1.5rem);
  letter-spacing:.01em; text-transform:uppercase; color:var(--blanco);
  display:flex; align-items:baseline; gap:.5rem;
}
.fiesta-nom i{
  font-style:normal; color:var(--magenta);
  font-family:var(--texto); font-size:.8rem; font-weight:700;
  transition:transform .25s ease;
}
a.fiesta-enl:hover .fiesta-nom i{transform:translateX(.25rem)}
.fiesta-pie{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .8rem;
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gris);
}
/* el aviso de los que tienen ficha propia: parpadea despacio, y se
   queda quieto si la persona ha pedido menos movimiento */
.fiesta-mas{
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; font-weight:700;
  color:var(--magenta);
  animation:avisa-ficha 2s ease-in-out infinite;
}
@keyframes avisa-ficha{
  0%,100%{opacity:1}
  50%{opacity:.22}
}
a.fiesta-enl:hover .fiesta-mas{animation:none; opacity:1}
@media (prefers-reduced-motion:reduce){
  .fiesta-mas{animation:none}
}

.fiesta-cuando{
  color:var(--acido);
  border:1px solid rgba(200,255,42,.35);
  border-radius:999px; padding:.2rem .6rem;
  letter-spacing:.08em;
}

/* ---------- la ficha de un evento (/evento/) ---------- */
/*  Aqui no hay portada detras de la barra, asi que la barra va opaca
    desde el principio y el contenido empieza por debajo.              */
.cuerpo-evento{background:var(--negro)}
.barra-quieta{
  background:rgba(8,8,10,.92);
  backdrop-filter:blur(14px);
  border-bottom-color:var(--borde);
}
.cuerpo-evento #principal{padding-top:clamp(5rem,9vw,7rem)}

.ev-cargando{
  width:var(--canal); margin-inline:auto;
  padding:clamp(3rem,8vw,6rem) var(--aire);
  color:var(--gris); font-size:.85rem;
  letter-spacing:.16em; text-transform:uppercase;
}
.ev-sin[hidden],.ev[hidden],.ev-bloque[hidden]{display:none}

.ev-cab{
  width:var(--canal); margin-inline:auto;
  padding:clamp(1rem,3vw,2rem) var(--aire) 0;
}
.ev-volver{color:var(--magenta); letter-spacing:.2em}
.ev-volver:hover{color:var(--blanco)}
.ev-cab-caja{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:clamp(1.4rem,4vw,3rem); margin-top:1.6rem;
}
.ev-logo{
  flex:0 0 auto; display:grid; place-items:center;
  width:clamp(150px,20vw,260px); min-height:clamp(110px,14vw,180px);
  background:var(--humo); border:1px solid var(--borde);
  padding:1.2rem;
}
.ev-logo[hidden]{display:none}
.ev-logo img{max-width:100%; max-height:clamp(84px,11vw,140px); width:auto; height:auto; object-fit:contain}
.ev-cab-txt{min-width:min(100%,18ch)}
.ev-cab .titulazo{font-size:clamp(2.2rem,5.2vw,4.2rem); margin:0}
.ev-quien{
  margin-top:.7rem; color:var(--gris);
  font-size:.78rem; letter-spacing:.18em; text-transform:uppercase;
}
.ev-quien strong{color:var(--blanco); font-weight:700}
.ev-quien[hidden]{display:none}
.ev-texto{margin-top:clamp(1.5rem,3vw,2.4rem)}
.ev-botones{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.8rem}

.ev-bloque{
  width:var(--canal); margin-inline:auto;
  padding:clamp(2.6rem,6vw,4.5rem) var(--aire) 0;
  scroll-margin-top:6rem;
}
.ev-tit{
  font-family:var(--display); text-transform:uppercase;
  font-size:clamp(1.3rem,2.6vw,2rem); letter-spacing:-.01em;
  padding-bottom:.8rem; border-bottom:1px solid var(--borde);
  margin-bottom:1.6rem;
}

/* residentes */
.ev-residentes{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:.6rem;
}
.ev-residentes li{
  border:1px solid var(--borde); background:var(--humo);
  padding:.5rem .9rem;
  font-size:.82rem; letter-spacing:.1em; text-transform:uppercase;
  display:flex; align-items:center; gap:.7rem;
}
/* el que trae foto la lleva redonda a la izquierda */
.ev-residentes li.con-foto{padding:.45rem 1rem .45rem .45rem}
.ev-residentes li.con-foto img{
  width:2.9rem; height:2.9rem; border-radius:50%; object-fit:cover; display:block;
}

/* las proximas citas, con su cartel y su venta */
.ev-citas{list-style:none; margin:0; padding:0; display:grid; gap:1px; background:var(--borde)}
.ev-cita{
  background:var(--humo);
  display:flex; flex-wrap:wrap; gap:clamp(1rem,2.5vw,2rem);
  padding:clamp(1.1rem,2.4vw,1.8rem);
  align-items:flex-start;
}
.ev-cita-flyer{
  flex:0 0 auto; background:none; border:1px solid var(--borde); padding:0;
  cursor:zoom-in; line-height:0;
}
.ev-cita-flyer img{width:clamp(96px,11vw,150px); height:auto; display:block}
.ev-cita-datos{flex:1 1 16rem; min-width:0}
.ev-cita-fecha{
  color:var(--magenta); font-size:.74rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
}
.ev-cita-tit{font-family:var(--display); font-size:clamp(1.2rem,2.2vw,1.7rem); text-transform:uppercase; margin-top:.4rem}
.ev-cita-txt{color:var(--gris); font-size:.88rem; margin-top:.3rem}
.ev-cita-pie{
  display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1rem;
  margin-top:.7rem; color:var(--gris);
  font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
}
.ev-chapa{border:1px solid var(--borde); padding:.2rem .6rem; border-radius:999px; color:var(--blanco)}
.ev-cita .ev-botones{margin-top:1.1rem}

/* videos */
.ev-videos{
  display:grid; gap:1.2rem;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));
}
.ev-video{margin:0; background:#000; border:1px solid var(--borde)}
.ev-video video{width:100%; height:auto; display:block; aspect-ratio:16/9; background:#000}
.ev-video figcaption{padding:.7rem .9rem; color:var(--gris); font-size:.82rem}
.ev-video-fuera{
  display:flex; align-items:center; gap:1rem;
  padding:1.4rem; background:var(--humo);
  font-size:.84rem; letter-spacing:.08em; text-transform:uppercase;
  transition:background-color .25s ease;
}
.ev-video-fuera:hover{background:var(--carbon)}
.ev-video-play{
  display:grid; place-items:center;
  width:2.6rem; height:2.6rem; flex:0 0 auto;
  border-radius:50%; background:var(--magenta); color:#fff; font-size:.8rem;
}
.ev-video-fuera i{font-style:normal; color:var(--magenta)}

.ev-cierre{padding-bottom:clamp(3.5rem,8vw,7rem)}
.ev-cierre .titulazo{margin-top:1.2rem}

/* el cebo del formulario: ni se ve ni se puede enfocar */
.no-mirar{
  position:absolute !important;
  width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
  border:0; padding:0; margin:-1px;
}