/* ============================================================
   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 */

.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(110px,.7fr) minmax(0,2.1fr) minmax(0,1.1fr) minmax(0,.9fr) auto;
  align-items:center; gap:clamp(.8rem,2.4vw,2rem);
  padding:clamp(1.3rem,3vw,2rem) 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-tit{
  font-family:var(--display);
  font-size:clamp(1.6rem,4.2vw,2.9rem);
  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; font-size:.8rem; color:var(--gris)}
.noche-precio{color:var(--acido)}
.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;
}

@media (max-width:860px){
  .noche{grid-template-columns:1fr auto; row-gap:.5rem}
  .noche-tit{grid-column:1/-1}
  .noche-pie{grid-column:1; flex-direction:row; gap:1rem; flex-wrap:wrap}
  .noche-enlace{grid-column:2; justify-self:end}
  .noche-txt{grid-column:1/-1}
  .noche-destacada::before{left:auto; right:0; top:1.3rem; 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-sala figure:hover img{transform:scale(1.04)}
.galeria-sala figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:1.6rem .9rem .7rem;
  background:linear-gradient(to top,rgba(8,8,10,.92),transparent);
  font-size:.78rem; letter-spacing:.06em; color:#e3e3ea;
}

/* el flyer dentro de una fecha */
.noche-flyer{
  display:block; width:64px; flex:0 0 auto;
  border:1px solid var(--borde);
}
.noche-flyer img{width:100%; aspect-ratio:3/4; object-fit:cover; display:block}
.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}
}