/* ============================================================================
   MODOBAR — TOKENS
   ============================================================================ */
:root{
  --black-deep:#050505;
  --black-panel:#0b0b0b;
  --black-panel-2:#131313;
  --black-panel-3:#1c1c1c;
  --white:#FFFFFF;
  --grey-200:#D8D8D8;
  --grey-400:#9A9A9A;
  --grey-600:#6b6b6b;
  --red:#FF3038;
  --red-light:#FF6167;
  --red-dark:#C8171F;
  --line:rgba(255,255,255,0.14);
  --line-strong:rgba(255,255,255,0.28);
  --shadow:rgba(0,0,0,0.6);

  --font-display:'Anton', 'Arial Narrow', sans-serif;
  --font-body:'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;

  --ease-out:cubic-bezier(.16,.84,.44,1);
  --dur-s:220ms;
  --dur-m:520ms;
  --dur-l:900ms;

  --container:78rem;
  --gutter:1.15rem;
  --sticky-bar-h:62px;
  --header-h:76px;
}

@media (min-width:640px){ :root{ --gutter:2rem; --header-h:84px; } }
@media (min-width:1200px){ :root{ --gutter:3rem; } }

/* ============================================================================
   RESET
   ============================================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:auto; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth; } }

body{
  margin:0;
  background:var(--black-deep);
  color:var(--white);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding-bottom:calc(var(--sticky-bar-h) + env(safe-area-inset-bottom));
  overflow-x:hidden;
  position:relative;
}
@media (min-width:900px){ body{ padding-bottom:0; } }

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; margin:0; padding:0; }
h1,h2,h3,blockquote,p,dl,dd,figure{ margin:0; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input{ font:inherit; color:inherit; }
svg{ display:block; }
[hidden]{ display:none !important; }

.skip-link{
  position:absolute; left:1rem; top:-4rem;
  background:var(--red); color:var(--black-deep);
  padding:.7rem 1.2rem; border-radius:2px; z-index:300;
  transition:top var(--dur-s) var(--ease-out);
  font-weight:700;
}
.skip-link:focus{ top:1rem; }

:focus-visible{ outline:2px solid var(--red); outline-offset:3px; }

.container{ max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }

#carta,#happyhour,#destacados,#clubw,#reservas,#ubicacion{ scroll-margin-top:calc(var(--header-h) + .5rem); }

/* Grano cinematográfico sutil sobre toda la página */
@media (min-width:900px){
body::before{
  content:"";
  position:fixed; inset:0; z-index:2; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
}

/* ============================================================================
   TYPOGRAPHY
   ============================================================================ */
h1,h2,h3,.wordmark,.display{ font-family:var(--font-display); font-weight:400; }
h2{
  font-size:clamp(2.2rem, 5vw + 1rem, 3.6rem);
  line-height:.98;
  letter-spacing:.005em;
  color:var(--white);
  text-transform:uppercase;
}
p{ max-width:36rem; color:var(--grey-200); }
.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.72rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--red-light);
}

/* Kicker "MODO 0X" reutilizable con regla animada */
.modo-kicker{
  display:flex; align-items:center; gap:.85rem; margin-bottom:1.1rem;
}
.modo-kicker__rule{
  height:2px; width:0; background:var(--red);
  transition:width var(--dur-l) var(--ease-out);
}
[data-reveal].is-visible .modo-kicker__rule{ width:2.75rem; }
.modo-kicker__label{
  font-family:var(--font-body); font-weight:800; font-size:.72rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--grey-400);
}

/* ============================================================================
   BUTTONS
   ============================================================================ */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; padding:1rem 2rem; border-radius:999px;
  font-family:var(--font-body); font-weight:800; font-size:.92rem;
  letter-spacing:.02em; text-transform:uppercase;
  white-space:nowrap; isolation:isolate;
  transition:color var(--dur-m) var(--ease-out), border-color var(--dur-m) var(--ease-out), transform var(--dur-s) var(--ease-out);
}
.btn::before{
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1;
  transition:transform var(--dur-m) var(--ease-out);
}
.btn--solid{ color:var(--black-deep); border:1px solid var(--red); }
.btn--solid::before{ background:var(--red); transform:scaleX(1); transform-origin:left; }
.btn--solid:hover::before{ background:var(--red-light); }
.btn--outline{ color:var(--white); border:1px solid var(--line-strong); }
.btn--outline::before{ background:var(--white); transform:scaleX(0); transform-origin:left; }
.btn--outline:hover{ color:var(--black-deep); }
.btn--outline:hover::before{ transform:scaleX(1); }
.btn--small{ padding:.7rem 1.35rem; font-size:.78rem; }
@media (prefers-reduced-motion:reduce){ .btn, .btn::before{ transition:none; } }

.link-arrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-weight:800; text-transform:uppercase; letter-spacing:.08em; font-size:.9rem;
  color:var(--white); padding-bottom:.35rem; border-bottom:1px solid var(--line-strong);
  transition:gap var(--dur-s) var(--ease-out), border-color var(--dur-s) var(--ease-out), color var(--dur-s) var(--ease-out);
}
.link-arrow:hover{ gap:1rem; border-color:var(--red); color:var(--red-light); }
.link-arrow svg{ width:16px; height:16px; flex:none; }

/* ============================================================================
   HEADER
   ============================================================================ */
.header{
  position:fixed; inset-block-start:0; inset-inline:0; z-index:100;
  height:var(--header-h);
  transition:background var(--dur-m) var(--ease-out), border-color var(--dur-m) var(--ease-out), backdrop-filter var(--dur-m) var(--ease-out);
  border-bottom:1px solid transparent;
}
/* Degradado oscuro bajo la barra mientras está transparente sobre la foto */
.header::before{
  content:""; position:absolute; inset:0 0 -34px; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(5,5,5,.78), rgba(5,5,5,0));
  transition:opacity var(--dur-m) var(--ease-out);
}
.header--solid::before{ opacity:0; }
.header--solid{
  background:rgba(5,5,5,.82);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--line);
}
.header__inner{
  max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter);
  height:100%; display:flex; align-items:center; gap:1rem;
}
.header__logo{ display:flex; align-items:center; height:38px; flex:none; margin-right:auto; }
.header__logo img{ height:100%; width:auto; }
.wordmark{ font-size:1.4rem; text-transform:uppercase; letter-spacing:.01em; }
.wordmark span{ color:var(--red); }

.header__nav-group{ display:none; }
.nav__list{ display:flex; align-items:center; gap:2rem; }
.nav__list a{
  font-size:.85rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  position:relative; padding-block:.3rem;
}
.nav__list a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--red); transform:scaleX(0); transform-origin:right;
  transition:transform var(--dur-s) var(--ease-out);
}
.nav__list a:hover::after{ transform:scaleX(1); transform-origin:left; }

/* Selector de idioma: interruptor visible en la barra, el idioma activo va relleno de rojo */
.langsw{
  display:inline-flex; align-items:center; flex:none;
  border:1px solid var(--line-strong); border-radius:999px; overflow:hidden;
  background:rgba(5,5,5,.38);
}
.langsw__globe{ display:none; flex:none; margin-inline:.7rem .15rem; color:var(--grey-400); }
.langsw__btn{
  min-width:2.4rem; min-height:2.3rem; padding:0 .7rem;
  font-size:.78rem; font-weight:800; letter-spacing:.08em; color:var(--grey-200);
  transition:background var(--dur-s) var(--ease-out), color var(--dur-s) var(--ease-out);
}
.langsw__btn[aria-pressed="true"]{ background:var(--red); color:var(--black-deep); }
@media (hover:hover) and (pointer:fine){ .langsw__btn[aria-pressed="false"]:hover{ background:rgba(255,255,255,.12); color:var(--white); } }

.mobile-toggle{
  display:flex; flex-direction:column; justify-content:center; gap:6px;
  width:40px; height:40px; flex:none;
}
.mobile-toggle__bar{ display:block; height:2px; width:100%; background:var(--white); transition:transform var(--dur-s) var(--ease-out), opacity var(--dur-s) var(--ease-out); }
.mobile-toggle[aria-expanded="true"] .mobile-toggle__bar:first-child{ transform:translateY(4px) rotate(45deg); }
.mobile-toggle[aria-expanded="true"] .mobile-toggle__bar:last-child{ transform:translateY(-4px) rotate(-45deg); }

@media (min-width:900px){
  .header__nav-group{ display:contents; }
  .header__logo{ margin-right:0; }
  .header__inner{ gap:2rem; }
  .nav{ order:1; margin-left:auto; }
  .langsw{ order:2; }
  .header__nav-group > .btn{ order:3; }
  .langsw__globe{ display:block; }
  .mobile-toggle{ display:none; }
}

.mobile-menu{
  position:fixed; inset:0; z-index:150; background:var(--black-deep);
  display:flex; flex-direction:column; justify-content:center; padding:6rem var(--gutter) 3rem;
  transform:translateY(-100%); visibility:hidden; transition:transform var(--dur-m) var(--ease-out), visibility 0s linear var(--dur-m);
}
.mobile-menu.is-open{ transform:translateY(0); visibility:visible; transition-delay:0s; }
@media (min-width:900px){ .mobile-menu{ display:none; } }
.mobile-menu__list{ display:flex; flex-direction:column; gap:.4rem; margin-bottom:1.4rem; }
.mobile-menu__list a{ font-family:var(--font-display); font-size:clamp(2.2rem,10vw,3.2rem); text-transform:uppercase; line-height:1.08; }
.mobile-menu .btn{ align-self:stretch; margin-top:1rem; }

/* Idioma en el menú móvil: dos teselas con foto, la activa va a color con borde rojo */
.langtiles{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem; margin-top:.6rem; }
.langtile{
  position:relative; isolation:isolate; overflow:hidden; display:flex; align-items:flex-end;
  min-height:6rem; padding:.85rem .95rem; border:1px solid var(--line-strong); border-radius:14px;
  color:var(--white); text-align:left;
  transition:border-color var(--dur-s) var(--ease-out);
}
.langtile__bg{
  position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center;
  filter:grayscale(.65) brightness(.42); transition:filter var(--dur-m) var(--ease-out);
}
.langtile--es .langtile__bg{ background-image:url("../assets/gallery-2-lights.webp"); }
.langtile--en .langtile__bg{ background-image:url("../assets/gallery-1-dj.webp"); }
.langtile::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg, rgba(5,5,5,.85), transparent 70%); }
.langtile__code{
  position:absolute; top:.65rem; right:.65rem; padding:.3rem .5rem; border-radius:999px;
  background:rgba(5,5,5,.65); font-size:.66rem; font-weight:800; letter-spacing:.1em;
}
.langtile__label{ font-family:var(--font-display); text-transform:uppercase; font-size:1.9rem; line-height:1; }
.langtile[aria-pressed="true"]{ border-color:var(--red); }
.langtile[aria-pressed="true"] .langtile__bg{ filter:grayscale(0) brightness(.7) saturate(1.1); }
.langtile[aria-pressed="true"] .langtile__code{ background:var(--red); color:var(--black-deep); }

/* Utilidad: texto solo para lectores de pantalla */
.sr-only{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ============================================================================
   HERO — foto exterior real, movimiento sutil de cámara y luces
   ----------------------------------------------------------------------------
   Variables que ajusta tools/prepare-hero.py (bloque HERO-VARS al final del archivo):
   --ar proporción de la foto · --fx/--fy punto focal (0 a 1) · --gv/--gg/--gr
   posición (x, y) y tamaño (s) de los destellos violeta, verde y rojo, en % de la foto.
   ============================================================================ */
.hero{
  --ar:1.7778; --fx:.5; --fy:.5;
  --poster-right:-1vw;                /* escritorio con foto/video vertical: pegado al borde derecho */
  --bh:100svh;
  --ws:max(100vw, calc(var(--bh) * var(--ar)));
  position:relative; isolation:isolate; height:100svh; min-height:36rem;
  display:flex; flex-direction:column; justify-content:flex-end;
  overflow:hidden; padding-top:var(--header-h);
}
@media (max-width:767px){ .hero{ --bh:60svh; } .hero__title{ font-size:clamp(3.4rem,15.5vw,5.2rem); } }
.hero__media{ position:absolute; inset:0; z-index:-2; will-change:transform; }
/* El escenario tiene exactamente la proporción de la foto y la recorta como "cover":
   así los destellos quedan siempre sobre la fachada, en cualquier pantalla. */
.hero__stage{
  position:absolute; width:var(--ws); height:calc(var(--ws) / var(--ar));
  left:clamp(calc(100vw - var(--ws)), calc(50vw - var(--fx) * var(--ws)), 0px);
  top:clamp(calc(var(--bh) - var(--ws) / var(--ar)), calc(var(--bh) / 2 - var(--fy) * var(--ws) / var(--ar)), 0px);
  transform-origin:calc(var(--fx) * 100%) calc(var(--fy) * 100%);
  background:var(--black-deep);
}
.hero__plate{ position:absolute; inset:0; transform-origin:calc(var(--fx) * 100%) calc(var(--fy) * 100%); }
.hero__img{ display:block; width:100%; height:100%; max-width:none; object-fit:cover; }
.hero__video{
  position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; pointer-events:none;
  opacity:0; transition:opacity 1.6s var(--ease-out);
}
.hero__stage.is-playing .hero__video{ opacity:1; }
.hero__stage.is-playing .hero__glow{ display:none; }  /* con video, las luces ya se mueven solas */
.hero__stage.is-fallback{ left:0; top:0; width:100%; height:var(--bh); }
.hero__stage.is-fallback .hero__glow{ display:none; }

/* Luces de neón: capas radiales que solo cambian de opacidad (barato y elegante) */
.hero__glow{
  position:absolute; left:var(--x); top:var(--y); width:var(--s); aspect-ratio:1;
  translate:-50% -50%; border-radius:50%; pointer-events:none; mix-blend-mode:screen; opacity:.5;
}
.hero__glow--violet{ --x:var(--gv-x,30%); --y:var(--gv-y,44%); --s:var(--gv-s,34%);
  background:radial-gradient(closest-side, rgba(176,92,255,.62), rgba(176,92,255,0) 72%); }
.hero__glow--green{ --x:var(--gg-x,72%); --y:var(--gg-y,46%); --s:var(--gg-s,30%);
  background:radial-gradient(closest-side, rgba(46,255,150,.5), rgba(46,255,150,0) 72%); }
.hero__glow--red{ --x:var(--gr-x,50%); --y:var(--gr-y,66%); --s:var(--gr-s,26%);
  background:radial-gradient(closest-side, rgba(255,48,56,.4), rgba(255,48,56,0) 72%); }

.hero__scrim{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(5,5,5,.5) 0%, rgba(5,5,5,.08) 24%, rgba(5,5,5,.16) 46%, rgba(5,5,5,.78) 74%, var(--black-deep) 100%),
    radial-gradient(100% 80% at 50% 40%, rgba(5,5,5,0) 45%, rgba(5,5,5,.5) 100%);
}
@media (max-width:767px){
  /* En móvil la foto ocupa la parte alta y se funde a negro donde empieza el texto */
  .hero__scrim{
    background:
      linear-gradient(180deg, rgba(5,5,5,.5) 0%, rgba(5,5,5,.06) 22%, rgba(5,5,5,.14) 40%, rgba(5,5,5,.82) 60%, var(--black-deep) 72%);
  }
}
@media (min-width:900px){
  .hero__scrim{
    background:
      linear-gradient(90deg, rgba(5,5,5,.72) 0%, rgba(5,5,5,.34) 36%, rgba(5,5,5,0) 66%),
      linear-gradient(180deg, rgba(5,5,5,.5) 0%, rgba(5,5,5,0) 22%, rgba(5,5,5,.1) 55%, var(--black-deep) 100%);
  }
}

.hero__dim{ position:absolute; inset:0; z-index:-1; pointer-events:none; background:var(--black-deep); opacity:calc(var(--hp, 0) * .85); }
.hero__content{
  max-width:var(--container); margin-inline:auto; width:100%; padding:0 var(--gutter) clamp(2.2rem,5.5svh,3.8rem);
  transform:translate3d(0, calc(var(--hp, 0) * -44px), 0); opacity:calc(1 - var(--hp, 0) * 1.15);
}
.hero__kicker{ font-size:.82rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--red-light); margin-bottom:.9rem; }
.hero__title{
  font-family:var(--font-display); text-transform:uppercase;
  font-size:clamp(4rem, 17vw, 9rem); line-height:.84; letter-spacing:.002em;
  text-shadow:0 4px 34px rgba(0,0,0,.45);
}
.hero__title span{ display:block; }
.hero__title .accent{ color:var(--red); text-shadow:0 0 42px rgba(255,48,56,.38); }
.hero__sub{ max-width:30rem; margin-top:1.15rem; font-size:clamp(1rem,2.3vw,1.2rem); line-height:1.5; color:var(--grey-200); }
.hero__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:.9rem; margin-top:1.7rem; }
.hero__link{
  padding:.5rem .2rem; font-size:.82rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--grey-200); border-bottom:1px solid var(--line-strong);
  transition:color var(--dur-s) var(--ease-out), border-color var(--dur-s) var(--ease-out);
}
.hero__link:hover{ color:var(--white); border-color:var(--red); }

@media (prefers-reduced-motion:no-preference){
  /* Entrada: la foto emerge de la oscuridad y luego se acerca muy despacio (cámara simulada) */
  .hero__stage{ animation:heroIn 1.8s var(--ease-out) both; }
  .hero__plate{ animation:kenburns 38s ease-in-out 1.8s infinite alternate; }
  .hero__glow--violet{ animation:neonA 7s ease-in-out infinite; }
  .hero__glow--green{ animation:neonB 9s ease-in-out -3s infinite; }
  .hero__glow--red{ animation:neonC 11s ease-in-out -5s infinite; }
  .hero__content > *{ animation:heroRise 1.1s var(--ease-out) both; }
  .hero__content > :nth-child(1){ animation-delay:.35s; }
  .hero__content > :nth-child(2){ animation-delay:.5s; }
  .hero__content > :nth-child(3){ animation-delay:.7s; }
  .hero__content > :nth-child(4){ animation-delay:.85s; }
}
@keyframes heroIn{ from{ opacity:0; transform:scale(1.07); } to{ opacity:1; transform:scale(1); } }
@keyframes kenburns{ from{ transform:scale(1); } to{ transform:scale(1.06); } }
@keyframes heroRise{ from{ opacity:0; transform:translateY(20px); } to{ opacity:1; transform:none; } }
@keyframes neonA{ 0%,100%{ opacity:.38; } 22%{ opacity:.62; } 41%{ opacity:.5; } 47%{ opacity:.8; } 53%{ opacity:.54; } 78%{ opacity:.7; } }
@keyframes neonB{ 0%,100%{ opacity:.5; } 30%{ opacity:.34; } 58%{ opacity:.74; } 64%{ opacity:.6; } 82%{ opacity:.4; } }
@keyframes neonC{ 0%,100%{ opacity:.3; } 50%{ opacity:.55; } }

.hero__marquee-band{
  position:relative; z-index:1; background:var(--black-deep); overflow:hidden;
  border-top:1px solid var(--line-strong); border-bottom:1px solid var(--line);
}
.marquee{ display:flex; width:max-content; white-space:nowrap; padding-block:.85rem; animation:marquee 22s linear infinite; }
@media (prefers-reduced-motion:reduce){ .marquee{ animation:none; } }
.marquee__item{
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:.01em;
  font-size:clamp(1rem,2.6vw,1.5rem); color:var(--white); padding-inline:.9rem;
}
.marquee__dot{ color:var(--red); font-size:.7rem; align-self:center; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ============================================================================
   REVEAL UTILITY
   [data-reveal]         el bloque entra (fade + subida lenta)
   [data-reveal-stagger] sus hijos entran en cascada usando --i
   ============================================================================ */
[data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out); }
[data-reveal].is-visible{ opacity:1; transform:translateY(0); }
[data-reveal-stagger] > *{
  opacity:0; transform:translateY(22px);
  transition:opacity 1s var(--ease-out), transform 1s var(--ease-out);
  transition-delay:calc(var(--i, 0) * 110ms);
}
[data-reveal-stagger].is-visible > *{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  [data-reveal], [data-reveal-stagger] > *{ transition:none; opacity:1; transform:none; }
}

/* ============================================================================
   MEDIA PLACEHOLDER (la foto carga de forma perezosa; la etiqueta queda debajo)
   ============================================================================ */
.media-placeholder{
  position:relative; width:100%; height:100%; min-height:12rem;
  display:flex; align-items:center; justify-content:center; text-align:center;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, transparent 2px 14px),
    linear-gradient(160deg, var(--black-panel-3), var(--black-panel));
  border:1px solid var(--line);
  overflow:hidden;
}
.media-placeholder img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .9s var(--ease-out); }
.media-placeholder.is-loaded img{ opacity:1; }
.media-placeholder.is-loaded .media-placeholder__tag{ display:none; }
.media-placeholder__tag{
  font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--grey-400); padding:.4rem .9rem; border:1px solid var(--line-strong); border-radius:999px;
}

/* ============================================================================
   MENU / CARTA
   ============================================================================ */
.menu{ padding-block:5.5rem 6rem; }
.menu__header{ max-width:38rem; margin-bottom:2.2rem; }
.menu__header h2{ margin-bottom:.9rem; font-size:clamp(3rem,8vw + 1rem,5.6rem); }

.menu__controls{ margin-bottom:2rem; display:flex; flex-direction:column; gap:1rem; }
.menu__controls-row{ display:flex; flex-direction:column; gap:1rem; }
@media (min-width:800px){ .menu__controls-row{ flex-direction:row; align-items:center; justify-content:space-between; } }

.menu__search{
  display:flex; align-items:center; gap:.7rem; border-bottom:1px solid var(--line-strong);
  padding-block:.7rem; color:var(--grey-400); max-width:24rem;
}
.menu__search:focus-within{ border-color:var(--red); color:var(--white); }
.menu__search input{
  flex:1; background:none; border:0; color:var(--white); font-size:1rem;
}
.menu__search input::placeholder{ color:var(--grey-400); }
.menu__search input:focus{ outline:none; }

.menu__tabs{ display:flex; gap:.4rem; overflow-x:auto; scrollbar-width:none; padding-bottom:.2rem; }
.menu__tabs::-webkit-scrollbar{ display:none; }
.menu__tabs--sections{ flex:none; }
.menu__tab{
  flex:none; padding:.6rem 1.15rem; border-radius:999px; border:1px solid var(--line);
  font-size:.82rem; font-weight:800; letter-spacing:.03em; text-transform:uppercase;
  color:var(--grey-400); transition:color var(--dur-s) var(--ease-out), border-color var(--dur-s) var(--ease-out), background var(--dur-s) var(--ease-out);
}
.menu__tab--section{ font-size:.86rem; }
.menu__tab[aria-selected="true"]{ color:var(--black-deep); background:var(--white); border-color:var(--white); }
.menu__tabs--categories{ margin-top:.2rem; border-top:1px solid var(--line); padding-top:1rem; }
.menu__tabs--categories .menu__tab[aria-selected="true"]{ background:var(--red); border-color:var(--red); color:var(--black-deep); }

.menu__search-status{ font-size:.85rem; color:var(--grey-400); margin-bottom:1rem; }

.menu__list{ display:flex; flex-direction:column; }
.menu__item{ padding-block:1.05rem; border-bottom:1px solid var(--line); }
.menu__item:first-child{ border-top:1px solid var(--line); }
.menu__row{ display:flex; align-items:baseline; gap:.6rem; }
.menu__row-name-wrap{ display:flex; align-items:center; gap:.55rem; flex-wrap:wrap; }
.menu__row-name{ font-weight:700; font-size:1.02rem; color:var(--white); }
.menu__row-flag{
  font-size:.62rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--black-deep); background:var(--red-light); padding:.15rem .5rem; border-radius:999px;
}
.menu__row-leader{ flex:1; border-bottom:2px dotted var(--line-strong); min-width:1rem; transform:translateY(-.3em); }
.menu__row-price{
  font-family:var(--font-display); font-size:1.15rem; color:var(--white);
  font-variant-numeric:tabular-nums; flex:none;
}
.menu__row-options{ display:flex; flex-direction:column; align-items:flex-end; gap:.15rem; flex:none; }
.menu__row-option{ font-size:.82rem; color:var(--grey-200); font-weight:700; }
.menu__item-desc{ margin-top:.35rem; font-size:.88rem; color:var(--grey-400); max-width:34rem; }
.menu__item-variants{ margin-top:.35rem; font-size:.82rem; color:var(--grey-400); font-style:italic; }
.menu__item-condition{ margin-top:.35rem; font-size:.78rem; color:var(--red-light); font-weight:700; text-transform:uppercase; letter-spacing:.03em; }
.menu__item--featured .menu__row-name{ color:var(--white); }
@media (hover:hover) and (pointer:fine){ .menu__item:hover .menu__row-name{ color:var(--red-light); } }
.menu__row-name{ transition:color var(--dur-s) var(--ease-out); }

/* Happy Hour: layout propio */
.happy-hour__subhead{ font-size:.78rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--grey-400); margin:1.6rem 0 .9rem; }
.happy-hour__subhead:first-child{ margin-top:0; }
.happy-hour__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem; }
@media (min-width:640px){ .happy-hour__grid{ grid-template-columns:repeat(3,1fr); } }
.happy-hour-card{
  border:1px solid var(--line); border-radius:10px; padding:1rem .9rem;
  display:flex; flex-direction:column; gap:.5rem; background:var(--black-panel);
  transition:border-color var(--dur-s) var(--ease-out), transform var(--dur-s) var(--ease-out);
}
.happy-hour-card:hover{ border-color:var(--line-strong); transform:translateY(-2px); }
.happy-hour-card__name{ font-weight:700; font-size:.92rem; }
.happy-hour-card__price{ font-family:var(--font-display); font-size:1.3rem; color:var(--red-light); }
.happy-hour-card__options{ display:flex; flex-direction:column; gap:.1rem; font-size:.78rem; color:var(--grey-200); font-weight:700; }
.happy-hour-card__until{
  display:flex; align-items:center; gap:.3rem;
  font-size:.7rem; font-weight:700; color:var(--grey-400); margin-top:-.1rem;
}
.happy-hour-card__clock{ flex:none; color:var(--red-light); }
.happy-hour__promos{ display:grid; grid-template-columns:1fr; gap:1rem; }
@media (min-width:640px){ .happy-hour__promos{ grid-template-columns:repeat(2,1fr); } }
.happy-hour-promo{
  position:relative; border-radius:14px; padding:1.4rem; min-height:11rem;
  display:flex; flex-direction:column; justify-content:flex-end; gap:.3rem;
  background:linear-gradient(160deg,var(--black-panel-3),var(--black-panel)); border:1px solid var(--line);
  overflow:hidden; outline:none;
}
.happy-hour-promo--photo{
  background-size:cover; background-position:center;
  aspect-ratio:3/2; min-height:0; height:auto; border:0;
}
.happy-hour-promo--photo::before{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.88) 10%, rgba(0,0,0,.15) 75%); }
.happy-hour-promo > *{ position:relative; z-index:1; }
.happy-hour-promo__top{ position:absolute; top:1.1rem; left:1.1rem; z-index:1; }
.happy-hour-promo__tag{ font-size:.68rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; background:var(--red); color:var(--black-deep); padding:.3rem .7rem; border-radius:999px; }
.happy-hour-promo h3{ font-size:1.4rem; text-transform:uppercase; }
.happy-hour-promo__price{ font-family:var(--font-display); font-size:1.6rem; color:var(--red-light); }
.happy-hour-promo__condition{ display:flex; align-items:center; gap:.4rem; font-size:.78rem; color:var(--grey-200); font-weight:700; }
.happy-hour-promo__clock{ color:var(--red-light); flex:none; }

/* ============================================================================
   HAPPY HOUR — franja roja a sangre, precios reales (HH_BOARD en data.js)
   ============================================================================ */
.hh{
  position:relative; overflow:hidden; background:var(--red); color:var(--black-deep);
  padding-block:clamp(4rem,9vw,7.5rem);
}
.hh p{ color:var(--black-deep); max-width:none; }
.hh :focus-visible{ outline-color:var(--black-deep); }
.modo-kicker--dark .modo-kicker__rule{ background:var(--black-deep); }
.modo-kicker--dark .modo-kicker__label{ color:var(--black-deep); }
.hh__title{
  font-size:clamp(4.6rem,17.5vw,15.5rem); line-height:.8; letter-spacing:-.005em; color:var(--black-deep);
  transform:translate3d(calc((var(--sp, .5) - .5) * -7vw), 0, 0);
}
.hh__until{
  margin-top:clamp(1rem,2vw,1.6rem); padding-bottom:1.2rem; border-bottom:4px solid var(--black-deep);
  font-family:var(--font-display); text-transform:uppercase; font-size:clamp(1.5rem,3.6vw,3rem); line-height:1;
}
.hh__board{ display:grid; grid-template-columns:1fr; column-gap:clamp(2rem,5vw,6rem); margin-top:.3rem; }
@media (min-width:760px){ .hh__board{ grid-template-columns:1fr 1fr; } }
.hh__row{ display:flex; align-items:baseline; gap:.8rem; padding:.95rem 0; border-bottom:2px solid rgba(5,5,5,.25); }
.hh__name,.hh__price{ font-family:var(--font-display); text-transform:uppercase; font-size:clamp(1.5rem,2.6vw,2.4rem); line-height:1; }
.hh__leader{ flex:1; min-width:1rem; border-bottom:3px dotted rgba(5,5,5,.5); transform:translateY(-.25em); }
.hh .link-arrow{ margin-top:2rem; color:var(--black-deep); border-bottom-color:rgba(5,5,5,.5); }
.hh .link-arrow:hover{ color:var(--black-deep); border-color:var(--black-deep); }

/* ============================================================================
   DESTACADOS — tres fotos grandes con nombre y precio reales
   ============================================================================ */
.dest{ padding-block:clamp(4.5rem,8vw,7rem) clamp(2rem,4vw,4rem); }
.dest__header{ max-width:36rem; margin-bottom:2.4rem; }
.dest__header h2{ margin-bottom:.9rem; }
.dest__grid{ display:grid; grid-template-columns:1fr; gap:1rem; }
@media (min-width:800px){ .dest__grid{ grid-template-columns:repeat(3,1fr); gap:1.2rem; } }
.dest__card{
  position:relative; display:block; overflow:hidden; border-radius:16px; aspect-ratio:4/5; isolation:isolate;
  background:var(--black-panel-2);
}
@media (min-width:800px){ .dest__card{ aspect-ratio:3/4.3; } }
.dest__media{ position:absolute; inset:-7% 0; z-index:-2; transform:translate3d(0, var(--py, 0px), 0); will-change:transform; }
.dest__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease-out), filter var(--dur-m) var(--ease-out); filter:saturate(1.05) contrast(1.04); }
.dest__scrim{ position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg, rgba(5,5,5,.94) 0%, rgba(5,5,5,.5) 38%, rgba(5,5,5,0) 68%); }
.dest__info{ position:absolute; inset-inline:0; bottom:0; display:flex; flex-direction:column; gap:.3rem; padding:1.5rem; }
.dest__tag{ font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--red-light); }
.dest__name{ font-family:var(--font-display); text-transform:uppercase; font-size:clamp(1.8rem,3.4vw,2.5rem); line-height:1; }
.dest__row{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem .9rem; }
.dest__price{ font-family:var(--font-display); font-size:1.5rem; color:var(--white); }
.dest__cond{ font-size:.78rem; font-weight:700; color:var(--grey-200); }
.dest__cta{
  display:inline-flex; align-items:center; gap:.5rem; margin-top:.6rem; width:max-content;
  font-size:.78rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--white);
  border-bottom:1px solid var(--line-strong); padding-bottom:.25rem;
  transition:gap var(--dur-s) var(--ease-out), border-color var(--dur-s) var(--ease-out);
}
.dest__cta svg{ width:14px; height:14px; }
@media (hover:hover) and (pointer:fine){
  .dest__card:hover .dest__media img{ transform:scale(1.05); filter:saturate(1.12) contrast(1.06); }
  .dest__card:hover .dest__cta{ gap:.9rem; border-color:var(--red); }
}
@media (prefers-reduced-motion:reduce){ .dest__media{ transform:none; } .dest__media img{ transition:none; } }

/* ============================================================================
   RESERVAS / CTA
   ============================================================================ */
.reservas{ padding-block:clamp(3rem,6vw,5rem) clamp(4rem,7vw,6rem); display:grid; gap:2.6rem; }
@media (min-width:900px){ .reservas{ grid-template-columns:1fr 1fr; gap:3rem; } }
.reservas__text{ max-width:32rem; }
.reservas__text h2{ margin-bottom:1rem; font-size:clamp(2.6rem,6vw+1rem,4.4rem); }
.reservas__text p{ margin-bottom:1.6rem; }
.reservas__actions{ display:flex; flex-wrap:wrap; gap:.8rem; }
.reservas__note{ margin-top:1rem; font-size:.8rem; color:var(--grey-400); }
.reservas__steps{ display:flex; flex-direction:column; }
.reservas__step{ display:flex; gap:1.3rem; padding-block:1.5rem; border-top:1px solid var(--line); }
.reservas__step:last-child{ border-bottom:1px solid var(--line); }
.reservas__step-n{ font-family:var(--font-display); font-size:2.4rem; color:var(--red); line-height:1; flex:none; width:3rem; opacity:.9; }
.reservas__step h3{ font-size:1.05rem; text-transform:uppercase; margin-bottom:.4rem; font-family:var(--font-body); font-weight:800; letter-spacing:.02em; }
.reservas__step p{ font-size:.9rem; margin-bottom:0; }

/* ============================================================================
   UBICACIÓN
   ============================================================================ */
.location{ padding-block:clamp(3rem,6vw,5rem) clamp(4rem,7vw,6rem); display:grid; gap:2rem; }
@media (min-width:900px){ .location{ grid-template-columns:1fr 1.1fr; gap:2.5rem; align-items:stretch; } }
.location__kicker{ font-size:.78rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--red-light); margin-bottom:.8rem; }
.location__details h2{ margin-bottom:1.6rem; }
.location__details dl{ display:flex; flex-direction:column; gap:1.3rem; margin-bottom:1.8rem; }
.location__details dt{ font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--grey-400); margin-bottom:.4rem; }
.location__details dd{ font-size:1.05rem; color:var(--white); font-weight:600; }
.location__hours-row{ display:flex; justify-content:space-between; gap:1rem; max-width:24rem; font-size:1rem; color:var(--white); font-weight:600; padding-block:.15rem; }
.location__hours-days{ color:var(--grey-200); font-weight:500; }
.location__map-wrap{ position:relative; min-height:20rem; border-radius:16px; overflow:hidden; border:1px solid var(--line); }
.location__map{ position:absolute; inset:0; }
.location__map iframe{ width:100%; height:100%; border:0; filter:grayscale(1) invert(.92) contrast(.9) brightness(.95); }
.location__map-label{
  position:absolute; top:1rem; left:1rem; z-index:2;
  background:var(--red); color:var(--black-deep); font-weight:800; font-size:.72rem;
  letter-spacing:.08em; text-transform:uppercase; padding:.4rem .8rem; border-radius:999px;
  pointer-events:none;
}

/* ============================================================================
   CLUB W — el pico. Dos puertas con "Empieza en modo. / Termina en W." se abren y descubren
   la fachada. Scroll nativo: el escenario queda fijo (sticky) mientras la sección avanza.
   ============================================================================ */
.clubw{ --peak-span:2.3; position:relative; height:calc(var(--peak-span) * 100svh); background:#050303; border-top:1px solid var(--line); }
.clubw__stage{ --open:0; --copy:0; position:sticky; top:0; height:100svh; overflow:clip; isolation:isolate; background:#050303; }
.clubw__scene{ position:absolute; inset:0; z-index:0; }
.clubw__window{
  position:absolute; left:0; right:0; top:0; height:74svh; overflow:hidden;
  transform:scale(calc(1.1 - var(--open) * .1)); transform-origin:50% 60%; opacity:calc(.3 + var(--open) * .7);
}
.clubw__window img{ display:block; width:100%; height:100%; object-fit:cover; object-position:34% 64%; }
.clubw__window .hero__glow{ display:none; }
.clubw__scrim{ position:absolute; z-index:1; inset:auto 0 0 0; height:62%; pointer-events:none; background:linear-gradient(0deg, #050303 0%, rgba(5,3,3,.9) 38%, rgba(5,3,3,0) 100%); opacity:var(--copy); }
.clubw__copy{
  position:absolute; z-index:2; left:var(--gutter); right:var(--gutter); bottom:calc(var(--sticky-bar-h) + 4svh);
  opacity:var(--copy); transform:translate3d(0, calc((1 - var(--copy)) * 20px), 0);
}
.clubw__copy:not(.is-live){ visibility:hidden; pointer-events:none; }
.clubw__copy h2{ font-size:clamp(2.2rem,8vw,4.2rem); margin-bottom:.8rem; }
.clubw__body{ margin-bottom:1.4rem; max-width:34rem; }

.clubw__door{
  position:absolute; top:0; bottom:0; width:50%; z-index:3; display:flex; align-items:center; will-change:transform;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 24px),
    linear-gradient(180deg, #130b0b, #070404);
}
.clubw__door--l{ left:0; justify-content:flex-end; transform:translate3d(calc(var(--open) * -101%), 0, 0); box-shadow:inset -1px 0 0 rgba(255,255,255,.12); }
.clubw__door--r{ right:0; justify-content:flex-start; transform:translate3d(calc(var(--open) * 101%), 0, 0); box-shadow:inset 1px 0 0 rgba(255,255,255,.12); }
.clubw__door span{
  display:block; padding-inline:clamp(.9rem,2.6vw,3rem);
  font-family:var(--font-display); text-transform:uppercase; line-height:.9; color:var(--white);
  font-size:clamp(2.4rem,7.2vw,7.4rem);
}
.clubw__door--l span{ text-align:right; }
.clubw__door--r span{ text-align:left; color:var(--red); }
.clubw__seam{
  position:absolute; z-index:4; top:0; bottom:0; left:50%; width:min(12vw,9rem); pointer-events:none; transform:translateX(-50%);
  background:linear-gradient(90deg, transparent, rgba(255,48,56,.5) 47%, #ff3038 50%, rgba(255,48,56,.5) 53%, transparent);
  opacity:clamp(0, calc(1 - var(--open) * 2), 1);
}

@media (min-width:900px){
  .clubw__window{
    left:auto; right:4vw; top:0; width:calc(100svh * var(--ar)); height:100svh;
    -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
            mask-image:linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
  }
  .clubw__window img{ object-position:50% 50%; }
  .clubw__window .hero__glow{ display:block; }
  .clubw__scrim{ display:none; }
  .clubw__copy{ left:var(--gutter); right:auto; bottom:14svh; width:min(34rem,44vw); }
  .clubw__copy h2{ font-size:clamp(2.2rem,3.6vw,3.6rem); }
}

/* Sin movimiento: el cierre es una escena fija y completa, sin puertas */
.clubw.is-static{ height:auto; }
.clubw.is-static .clubw__stage{ position:relative; height:auto; min-height:100svh; display:flex; flex-direction:column; }
.clubw.is-static .clubw__door, .clubw.is-static .clubw__seam{ display:none; }
.clubw.is-static .clubw__scene{ position:relative; flex:1; display:flex; flex-direction:column; }
.clubw.is-static .clubw__window{ position:relative; transform:none; opacity:1; height:62svh; }
.clubw.is-static .clubw__scrim{ opacity:1; }
.clubw.is-static .clubw__copy{ position:relative; left:auto; right:auto; bottom:auto; width:auto; opacity:1; transform:none; visibility:visible; padding:1.4rem var(--gutter) calc(var(--sticky-bar-h) + 1.4rem); }
@media (min-width:900px){
  .clubw.is-static .clubw__stage{ flex-direction:row; align-items:center; }
  .clubw.is-static .clubw__scene{ flex-direction:row-reverse; align-items:center; justify-content:space-between; padding-inline:var(--gutter); }
  .clubw.is-static .clubw__window{ position:relative; right:auto; width:calc(80svh * var(--ar)); height:80svh; flex:none; }
  .clubw.is-static .clubw__copy{ padding:0; width:min(34rem,44vw); }
}

/* ============================================================================
   FOOTER
   ============================================================================ */
.footer{ border-top:1px solid var(--line); padding-block:4.5rem 3rem; }
.footer__cta{
  color:var(--white);
  font-family:var(--font-display); text-transform:uppercase;
  font-size:clamp(2.6rem,9vw,6rem); line-height:.92; margin-bottom:2.4rem;
}
.footer__logo{ display:inline-flex; height:34px; margin-bottom:2.6rem; }
.footer__logo img{ height:100%; width:auto; }
.footer__grid{ margin-bottom:2.2rem; }
.footer__nav{ display:flex; flex-wrap:wrap; gap:1.4rem 2rem; }
.footer__nav a{ font-size:.85rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--grey-200); }
.footer__nav a:hover{ color:var(--white); }
.footer__meta{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.6rem;
  padding-top:1.6rem; border-top:1px solid var(--line);
  font-size:.78rem; color:var(--grey-600);
}
.footer__credit{ margin-top:1rem; display:flex; justify-content:center; max-width:none; }

/* Firma VEXUM — reutilizada en el footer y en la pestaña de idioma */
.vexum{
  display:inline-flex; align-items:center; gap:.6rem;
  color:var(--grey-600); text-decoration:none; opacity:.85;
  transition:opacity var(--dur-s) var(--ease-out), color var(--dur-s) var(--ease-out);
}
.vexum span{ font-size:.72rem; letter-spacing:.03em; }
.vexum-logo{ display:block; width:auto; height:22px; flex:none; }
.vexum:hover, .vexum:focus-visible{ opacity:1; color:var(--grey-200); }

/* ============================================================================
   BARRA FIJA MÓVIL
   ============================================================================ */
.sticky-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:120;
  display:flex; height:var(--sticky-bar-h);
  padding-bottom:env(safe-area-inset-bottom);
  background:rgba(5,5,5,.92);
  backdrop-filter:blur(12px) saturate(140%);
  border-top:1px solid var(--line);
}
.sticky-bar__item{
  flex:1 1 50%; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:.9rem; text-transform:uppercase; letter-spacing:.03em; color:var(--white);
}
.sticky-bar__item + .sticky-bar__item{ border-left:1px solid var(--line); }
.sticky-bar__item--accent{ background:var(--red); color:var(--black-deep); position:relative; overflow:hidden; }
@media (prefers-reduced-motion:no-preference){
  .sticky-bar__item--accent::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.5) 48%, transparent 66%);
    transform:translateX(-120%);
    animation:accentSheen 3.4s ease-in-out infinite;
  }
}
@keyframes accentSheen{ 0%,60%{ transform:translateX(-120%); } 100%{ transform:translateX(120%); } }
@media (min-width:900px){ .sticky-bar{ display:none; } }

/* ============================================================================
   WHATSAPP FAB (oculto por defecto vía JS hasta configurarse)
   ============================================================================ */
.whatsapp-fab{
  position:fixed; right:1.1rem; bottom:calc(var(--sticky-bar-h) + env(safe-area-inset-bottom) + 1rem);
  z-index:110; width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#25D366; color:#052; box-shadow:0 8px 22px rgba(0,0,0,.4);
  transition:transform var(--dur-s) var(--ease-out);
}
.whatsapp-fab:hover{ transform:translateY(-3px); }
@media (min-width:900px){ .whatsapp-fab{ bottom:1.4rem; } }

/* ============================================================================
   RESPONSIVE — desktop refinements
   ============================================================================ */
@media (min-width:900px){
  .menu{ display:grid; grid-template-columns:15rem 1fr; gap:3rem; align-items:start; }
  .menu__header{ grid-column:1 / -1; }
  .menu__controls{ position:sticky; top:calc(var(--header-h) + 1rem); align-self:start; }
  .menu__controls-row{ flex-direction:column; align-items:stretch; }
  .menu__tabs--sections{ flex-direction:column; }
  .menu__tab--section{ text-align:left; }
  .menu__panels{ min-width:0; }
}

/* ============================================================================
   PRINT-SAFE / SMALL SCREEN GUARDS
   ============================================================================ */
@media (max-width:359px){
  .hero__title{ font-size:14vw; }
}

/* HERO-VARS:START  (lo reescribe tools/prepare-hero.py; se puede ajustar a mano) */
.hero, .clubw{
  --ar:0.7500; --fx:0.500; --fy:0.660; --gv-x:18.5%; --gv-y:47.6%; --gv-s:35.1%; --gg-x:82.3%; --gg-y:44.0%; --gg-s:30.2%; --gr-x:51.5%; --gr-y:60.7%; --gr-s:30.1%;
}
@media (min-width:900px){
  .hero__stage{
    height:calc(var(--bh) * 1.18); width:calc(var(--bh) * 1.18 * var(--ar)); left:auto; right:var(--poster-right,3vw); top:-10svh;
    -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
            mask-image:linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  }
}
@media (max-width:767px){
.hero, .clubw{
  --ar:0.7500; --fx:0.259; --fy:0.660; --gv-x:18.5%; --gv-y:47.6%; --gv-s:35.1%; --gg-x:82.3%; --gg-y:44.0%; --gg-s:30.2%; --gr-x:51.5%; --gr-y:60.7%; --gr-s:30.1%;
}
}
/* HERO-VARS:END */