@import url('https://fonts.bellylabs.es/ntbaumono-regular/ntbaumono-regular.css');
@import url('https://fonts.bellylabs.es/britanica/britanica.css');

:root {
  --bg-color: #05050a;
  --text-primary: #ffffff;
  --text-secondary: #a0a0a0;
  --accent-glow-left: rgba(180, 50, 30, 0.15);
  --accent-glow-right: rgba(100, 100, 120, 0.1);
  --font-display: 'Britanica', sans-serif;
  --font-mono: 'NTBauMono Regular', monospace;
  --font-body: 'Britanica', sans-serif;
  --grid-gap: 16px;
  --header-h: 72px;
  /* Ancho útil alineado con .section-inner--wide (p. ej. index, bloques principales) */
  --content-max-wide: 1200px;
}

html {
  scroll-behavior: smooth;
  /* Evita el flash gris al tocar enlaces/botones en iOS/Android */
  -webkit-tap-highlight-color: transparent;
}

/* Dispositivos táctiles: evita zoom por doble toque sin bloquear meta viewport */
@media (pointer: coarse) {
  html {
    touch-action: manipulation;
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Sin selección de texto en la UI (mejor sensación “app”); formularios siguen editables */
input,
textarea,
select,
[contenteditable='true'],
[contenteditable=''] {
  -webkit-user-select: text;
  user-select: text;
}

/* Imágenes y medios: no arrastrables, sin menú largo pulsación en iOS */
img,
picture,
svg,
video,
canvas {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-touch-callout: none;
}

body {
  -webkit-user-select: none;
  user-select: none;
  background-color: var(--bg-color);
  background-image: url('img/Fondo_Web.jpg');
  background-position: top center;
  background-size: cover;
  background-repeat: no-repeat;
  color: var(--text-primary);
  font-family: var(--font-body);
  position: relative;
  overflow-x: hidden;
}

body:has(#nav-toggle:checked) {
  overflow: hidden;
}

body.is-loading {
  overflow: hidden;
}

/* Contenido bajo el loader: oculto hasta quitar is-loading; el loader (#page-loader) no se atenúa */
body.is-loading > *:not(#page-loader):not(script):not(style) {
  opacity: 0;
  transition: none;
}

body:not(.is-loading):not(.page-exit) > *:not(#page-loader):not(script):not(style) {
  opacity: 1;
  transition: opacity 0.65s ease;
}

body.page-exit > *:not(#page-loader):not(script):not(style) {
  opacity: 0;
  transition: opacity 0.5s ease;
}

body.nightclub-page {
  background-image: url('img/Fondo_Web_2.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* La Sala: mismo asset que el home; al recortar con cover se prioriza la base de la imagen */
body.sala-page {
  background-image: url('img/Fondo_Web.jpg');
  background-position: center bottom;
  background-size: cover;
  background-repeat: no-repeat;
}

.page-loader {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: page-loader-overlay-in 0.65s ease both;
  /* Salida: opacity y transform a 0 de forma progresiva (al añadir .page-loader--done) */
  transition: opacity 1s ease, transform 1s ease, visibility 0s linear 1s;
  background:
    radial-gradient(ellipse at 0% 0%, #932c02c2 0%, transparent 49%),
    radial-gradient(ellipse at 100% 100%, #1a2f3d 0%, transparent 63%),
    #0d0d0d;
}

.page-loader__grid {
  position: absolute;
  inset: 0;
  opacity: 0.75;
  background-image: linear-gradient(rgb(255 255 255 / 4%) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 4%) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}

.page-loader__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 70% 55% at 50% 50%, transparent 30%, rgb(0 0 0 / 55%) 100%);
}

.page-loader__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  isolation: isolate;
}

.page-loader__sweep {
  position: absolute;
  inset: -30% -20%;
  z-index: 0;
  transform: translateZ(0);
  background-image: linear-gradient(
    115deg,
    rgb(255 255 255 / 0%) 0%,
    rgb(255 255 255 / 0%) 42%,
    rgb(255 255 255 / 18%) 50%,
    rgb(255 255 255 / 0%) 58%,
    rgb(255 255 255 / 0%) 100%
  );
  background-repeat: no-repeat;
  background-size: 260% 260%;
  background-position: 100% 0%;
  mix-blend-mode: soft-light;
  animation: page-loader-sweep 2.2s ease-in-out infinite;
  pointer-events: none;
}

.page-loader__card {
  position: relative;
  z-index: 1;
  padding: 32px 40px 28px;
  text-align: center;
  animation: page-loader-card-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.page-loader__logo {
  display: block;
  width: min(200px, 58vw);
  height: auto;
  margin: 0 auto 16px;
  opacity: 0.95;
}

.page-loader__tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--text-secondary);
  text-transform: uppercase;
}

/* Paso 1 salida: quitar animación de entrada y fijar opacidad 1 (el JS añade luego --done para transición 1→0) */
.page-loader.page-loader--done-prep {
  animation: none;
  opacity: 1;
}

.page-loader.page-loader--done {
  opacity: 0;
  transform: scale(1.02);
  visibility: hidden;
  pointer-events: none;
}

@keyframes page-loader-overlay-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes page-loader-sweep {
  0%,
  100% {
    background-position: 100% 0%;
  }

  50% {
    background-position: 0% 100%;
  }
}

@keyframes page-loader-card-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-loader {
    animation: none;
    opacity: 1;
  }

  .page-loader__sweep {
    animation: none;
    opacity: 0.25;
  }

  .page-loader__card {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .page-loader.page-loader--done {
    transform: none;
    transition: opacity 0.35s ease, visibility 0s linear 0.35s;
  }

  body:not(.is-loading):not(.page-exit) > *:not(#page-loader):not(script):not(style),
  body.page-exit > *:not(#page-loader):not(script):not(style) {
    transition-duration: 0.01ms;
  }
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: 12px 20px;
  background: var(--text-primary);
  color: var(--bg-color);
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
}

.skip-link:focus {
  left: 16px;
  top: 16px;
}

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

a:focus-visible {
  outline: 1px solid var(--text-primary);
  outline-offset: 3px;
}

/* Header */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: var(--header-h);
  padding: 20px 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0px;
  font-weight: 300;
}

.header-brand {
  position: absolute;
  left: 32px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
}

.header-logo {
  display: block;
  height: 28px;
  width: auto;
  max-width: min(140px, 28vw);
}

.nav-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.menu-toggle {
  display: none;
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 220;
  width: 40px;
  height: 32px;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  padding: 4px;
}

.menu-toggle span {
  display: block;
  height: 1px;
  background: var(--text-primary);
  transition: transform 0.25s ease, opacity 0.2s ease;
}

#nav-toggle:checked ~ .menu-toggle span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

#nav-toggle:checked ~ .menu-toggle span:nth-child(2) {
  opacity: 0;
}

#nav-toggle:checked ~ .menu-toggle span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

.nav-backdrop {
  display: none;
}

#nav-toggle:checked ~ .nav-backdrop {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 150;
  background: rgb(5 5 10 / 75%);
  cursor: pointer;
}

.site-nav {
  display: flex;
  gap: 48px;
  align-items: center;
}

.site-nav a {
  text-transform: uppercase;
  transition: opacity 0.3s;
}

.site-nav a:hover {
  opacity: 0.7;
}

.nav-btn {
  border: 1px solid var(--text-primary);
  padding: 8px 16px;
  border-radius: 0px;
  display: inline-block;
  background: transparent;
  transition: all 0.3s ease;
}

/* opacity 1 gana a .site-nav a:hover { opacity: 0.7 } */
.site-nav a.nav-btn:hover {
  border: 1px solid var(--text-primary);
  padding: 8px 16px;
  border-radius: 0px;
  display: inline-block;
  background: #ffffff33;
  color: #ffffff;
  opacity: 1;
}

/* Hero Section */
.hero {
  position: relative;
  width: 100%;
  height: 65vh;
  min-height: 500px;
  overflow: hidden;
  background-color: #0c1018;
  background-image: url('img/Recurso_1.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 60px;
}

.hero__bg-video {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 0;
  pointer-events: none;
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgb(5 5 10 / 10%) 0%,
    rgb(5 5 10 / 70%) 80%,
    rgba(5, 5, 10, 1) 100%
  );
}

.hero-categories {
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: center;
  gap: 64px;
  width: 100%;
}

.hero-cat {
  position: relative;
  padding: 5px 10px 10px 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  min-width: 210px;
  color: inherit;
  transition: opacity 0.3s;
}

.hero-cat:hover {
  opacity: 0.85;
}

/* Brackets decoration */
.corners-decorator::before,
.corners-decorator::after,
.corners-decorator .cd-inner::before,
.corners-decorator .cd-inner::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border-color: rgba(255, 255, 255, 0.5);
  border-style: solid;
}

.corners-decorator::before {
  top: 0;
  left: 0;
  border-width: 1px 0 0 1px;
}

.corners-decorator::after {
  top: 0;
  right: 0;
  border-width: 1px 1px 0 0;
}

.cd-inner {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.cd-inner::before {
  bottom: 0;
  left: 0;
  border-width: 0 0 1px 1px;
}

.cd-inner::after {
  bottom: 0;
  right: 0;
  border-width: 0 1px 1px 0;
}

.hero-cat h3 {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  margin-bottom: -5px;
  letter-spacing: -1px;
}

.hero-cat p {
  font-family: var(--font-mono);
  font-size: 14px;
  color: #ffffff;
  letter-spacing: 0px;
  font-weight: 400;
}

/* Section blocks (nightclub, eventos, tickets, contacto) */
.section-block {
  padding: 72px 24px;
}

.section-inner {
  max-width: 720px;
  margin: 0 auto;
}

.section-inner--wide {
  max-width: var(--content-max-wide);
}

.section-heading {
  position: relative;
  display: inline-block;
  padding: 14px 28px;
  margin-bottom: 28px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.section-heading-label {
  position: relative;
  z-index: 1;
}

.section-lead {
  font-family: var(--font-display);
  font-weight: 100;
  font-size: 18px;
  line-height: 1.35;
  color: var(--text-primary);
  margin-bottom: 28px;
  max-width: 560px;
}

.section-kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 32px;
}

.section-list {
  list-style: none;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-secondary);
}

.section-list li {
  margin-bottom: 12px;
  padding-left: 4px;
}

.section-list-tag {
  color: var(--text-primary);
  margin-right: 12px;
}

.section-nightclub {
  padding-top: 48px;
}

.section-eventos {
  padding-top: 40px;
  padding-bottom: 56px;
}

.event-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gap);
}

.event-card {
  position: relative;
  padding: 28px 24px 24px;
  background: rgb(17 17 20 / 85%);
  border: 1px solid rgb(255 255 255 / 8%);
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: border-color 0.25s ease, background 0.25s ease;
}

.event-card:hover {
  border-color: rgb(255 255 255 / 18%);
  background: rgb(22 22 28 / 90%);
}

.event-card .cd-inner {
  z-index: 0;
}

.event-date {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.event-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 1.25;
  margin-bottom: 10px;
  flex-grow: 1;
}

.event-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: 16px;
}

.event-cta {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-bottom: 1px solid rgb(255 255 255 / 40%);
  padding-bottom: 2px;
  transition: opacity 0.2s;
}

.event-cta:hover {
  opacity: 0.75;
}

.section-tickets {
  padding-top: 32px;
  padding-bottom: 80px;
}

.section-inner--split {
  max-width: 1200px;
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 48px;
  align-items: start;
}

.tickets-copy {
  position: relative;
  padding: 32px 28px;
}

.section-heading-inline {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}

.tickets-copy .section-lead {
  position: relative;
  z-index: 1;
  margin-bottom: 24px;
}

.btn-outline {
  position: relative;
  z-index: 1;
  display: inline-block;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: 1px solid var(--text-primary);
  padding: 12px 22px;
  transition: background 0.2s, color 0.2s;
}

.btn-outline:hover {
  background: var(--text-primary);
  color: var(--bg-color);
}

.tickets-aside {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.6;
  padding-top: 40px;
}

.section-contacto {
  padding-bottom: 100px;
}

.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--grid-gap);
  align-items: stretch;
}

.contact-panel {
  position: relative;
  padding: 32px 28px;
  background: rgb(10 10 14 / 90%);
  border: 1px solid rgb(255 255 255 / 8%);
}

.contact-line {
  font-family: var(--font-display);
  font-weight: 100;
  font-size: 15px;
  line-height: 1.45;
  margin-bottom: 20px;
}

.contact-line:last-child {
  margin-bottom: 0;
}

.contact-key {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.contact-map {
  position: relative;
  min-height: 280px;
  background: linear-gradient(160deg, #121820 0%, #0a0e14 45%, #151a24 100%);
  border: 1px solid rgb(255 255 255 / 10%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.contact-map-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgb(255 255 255 / 4%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 4%) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.6;
}

.contact-map-pin {
  position: relative;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: 48px;
  font-weight: 400;
  color: rgb(255 255 255 / 25%);
  line-height: 1;
}

.contact-map-caption {
  position: absolute;
  bottom: 16px;
  left: 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
}

/* About Section */
.about {
  padding: 80px 24px;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.about .main-slogan {
  width: 100%;
  max-width: 500px;
  height: auto;
  margin-bottom: 32px;
}

.about p {
  font-family: "Britanica", sans-serif;
  font-weight: 100;
  font-size: 16px;
  line-height: 1.2;
  color: #ffffff;
}

/* Grid Section */
.grid-container {
  max-width: 1200px;
  margin: 0 auto 100px;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: minmax(150px, 1fr);
  gap: var(--grid-gap);
}

.grid-item {
  position: relative;
  background-color: #111;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  text-transform: uppercase;
}

.grid-item::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: soft-light;
  background-image: linear-gradient(
    115deg,
    rgb(255 255 255 / 0%) 0%,
    rgb(255 255 255 / 0%) 42%,
    rgb(255 255 255 / 40%) 50%,
    rgb(255 255 255 / 0%) 58%,
    rgb(255 255 255 / 0%) 100%
  );
  background-repeat: no-repeat;
  background-size: 260% 260%;
  background-position: 100% 0%;
  transition: background-position 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.grid-item:hover::before {
  background-position: 0% 100%;
}

.grid-item-visual {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.2;
  transform: scale(1);
  transform-origin: center center;
  transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.grid-item:hover .grid-item-visual {
  opacity: 0.5;
  transform: scale(1.08);
}

.grid-item:hover .grid-item-content {
  background-color: transparent;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-4px);
  text-shadow: 0 8px 28px rgb(0 0 0 / 55%);
}

@media (prefers-reduced-motion: reduce) {
  .grid-item::before {
    display: none;
  }

  .grid-item-visual,
  .grid-item:hover .grid-item-visual {
    transition: opacity 0.35s ease;
    transform: none;
  }

  .grid-item:hover .grid-item-content {
    transform: translateY(-4px);
    text-shadow: 0 8px 28px rgb(0 0 0 / 55%);
  }
}

.grid-item-visual--pista {
  background: url('img/Cuadricula_Copernico_1.jpg') center / cover no-repeat;
}

.grid-item-visual--barras {
  background: url('img/Cuadricula_Copernico_2.jpg') center / cover no-repeat;
}

.grid-item-visual--escenario {
  background: url('img/Cuadricula_Copernico_3.jpg') center / cover no-repeat;
}

.grid-item-visual--iluminacion {
  background: url('img/Cuadricula_Copernico_6.jpg') center / cover no-repeat;
}

.grid-item-visual--vip {
  background: url('img/Cuadricula_Copernico_4.jpg') center / cover no-repeat;
}

.grid-item-visual--pantalla {
  background: url('img/Cuadricula_Copernico_5.jpg') center / cover no-repeat;
}

.grid-item-logo {
  position: relative;
  z-index: 2;
  max-width: 78%;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0.88;
  pointer-events: none;
}

.grid-item-content {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: auto;
  height: auto;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1px;
  text-align: center;
  align-content: center;
  padding: 16px 24px;
  line-height: 16px;
  background-color: transparent;
  transform: translateY(0);
  text-shadow: none;
  transition:
    background-color 0.45s ease,
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    text-shadow 0.45s ease;
}

.grid-item-content.cornered {
  padding: 20px 24px;
}

.grid-item-content.cornered::before,
.grid-item-content.cornered::after,
.grid-item-content.cornered .cd-inner::before,
.grid-item-content.cornered .cd-inner::after {
  width: 8px;
  height: 8px;
}

/* Grid placements */
.pista {
  grid-column: span 2;
  grid-row: span 1;
}

.tres-barras {
  grid-column: span 1;
  grid-row: span 1;
}

.escenario {
  grid-column: span 2;
  grid-row: span 1;
}

.camerino {
  grid-column: span 1;
  grid-row: span 1;
  background: #0a0a0a;
}

.acceso {
  grid-column: span 1;
  grid-row: span 1;
  background: #0a0a0a;
}

.red-block {
  grid-column: span 1;
  grid-row: span 1;
  background: linear-gradient(145deg, #2a080c 0%, #120306 100%);
}

.iluminacion {
  grid-column: span 1;
  grid-row: span 2;
  background: #1a0f2e;
}

.sonido {
  grid-column: span 1;
  grid-row: span 1;
  background: #0a0a0a;
}

.zona-vip {
  grid-column: span 2;
  grid-row: span 1;
}

.pantalla {
  grid-column: span 1;
  grid-row: span 1;
}

.y-mucho {
  grid-column: span 1;
  grid-row: span 1;
  background: #0a0a0a;
  text-align: center;
}

/* Sub-grid typography adjustments */
.camerino .grid-item-content,
.acceso .grid-item-content,
.sonido .grid-item-content,
.y-mucho .grid-item-content {
  font-size: 18px;
}

/* Footer Section */
footer {
  position: relative;
  box-sizing: border-box;
  width: calc(100% - 40px);
  max-width: 1200px;
  margin: 0 auto 60px;
  padding: 40px 24px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  font-family: "NTBauMono Regular", monospace;
  font-size: 12px;
  color: var(--text-primary);
  line-height: 1.5;
}

.footer-decorator {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.footer-decorator::before,
.footer-decorator::after,
.footer-decorator .cd-inner::before,
.footer-decorator .cd-inner::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  border-color: rgba(255, 255, 255, 0.4);
  border-style: solid;
}

.footer-decorator::before {
  top: 0;
  left: 0;
  border-width: 1px 0 0 1px;
}

.footer-decorator::after {
  top: 0;
  right: 0;
  border-width: 1px 1px 0 0;
}

.footer-decorator .cd-inner::before {
  bottom: 0;
  left: 0;
  border-width: 0 0 1px 1px;
}

.footer-decorator .cd-inner::after {
  bottom: 0;
  right: 0;
  border-width: 0 1px 1px 0;
}

.footer-left {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.social-handle {
  font-size: 16px;
}

.footer-logo {
  max-width: 170px;
  height: auto;
  display: block;
}

.footer-right {
  text-align: left;
}

.footer-right a {
  display: block;
  color: var(--text-primary);
  transition: opacity 0.3s;
}

.footer-right a:hover {
  opacity: 0.7;
}

/* Responsive */
@media (max-width: 992px) {
  .site-header {
    justify-content: flex-end;
    padding: 16px 20px;
  }

  .header-brand {
    left: 20px;
  }

  .header-logo {
    height: 40px;
  }

  .menu-toggle {
    display: flex;
  }

  /* top+bottom en lugar de 100vh: en móvil el vh cambia al tocar/enfocar y el panel “encoge” */
  .site-nav {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    width: min(320px, 88vw);
    height: auto;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 0;
    padding: max(80px, calc(48px + env(safe-area-inset-top, 0px))) 32px max(40px, env(safe-area-inset-bottom, 0px));
    background: rgb(8 8 12 / 97%);
    border-left: 1px solid rgb(255 255 255 / 10%);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 200;
    box-sizing: border-box;
  }

  .site-nav a {
    padding: 16px 0;
    border-bottom: 1px solid rgb(255 255 255 / 8%);
  }

  .site-nav .nav-btn {
    margin-top: 16px;
    text-align: center;
    border: 1px solid var(--text-primary);
    box-sizing: border-box;
    flex-shrink: 0;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    /* Misma altura en normal / :hover / :active (la regla global usa 8px y encoge el botón al tocar) */
    padding: 16px 16px;
    border-bottom: 1px solid var(--text-primary);
  }

  .site-nav a.nav-btn:hover,
  .site-nav a.nav-btn:active {
    padding: 16px 16px;
  }

  #nav-toggle:checked ~ .site-nav {
    transform: translateX(0);
  }

  .event-grid {
    grid-template-columns: 1fr;
  }

  .section-inner--split {
    grid-template-columns: 1fr;
  }

  .tickets-aside {
    padding-top: 0;
  }

  .contact-layout {
    grid-template-columns: 1fr;
  }

  .contact-map {
    min-height: 220px;
  }

  .grid-container {
    grid-template-columns: repeat(3, 1fr);
  }

  .pista {
    grid-column: span 3;
  }

  .tres-barras {
    grid-column: span 1;
  }

  .escenario {
    grid-column: span 2;
  }

  .camerino {
    grid-column: span 1;
  }

  .acceso {
    grid-column: span 1;
  }

  .red-block {
    grid-column: span 1;
  }

  .iluminacion {
    grid-column: span 1;
    grid-row: span 2;
  }

  .sonido {
    grid-column: span 1;
  }

  .zona-vip {
    grid-column: span 2;
  }

  .pantalla {
    grid-column: span 1;
  }

  .y-mucho {
    grid-column: span 2;
  }
}

@media (max-width: 768px) {
  .hero-categories {
    flex-direction: column;
    gap: 24px;
    align-items: center;
  }

  .hero-cat {
    min-width: unset;
    width: 100%;
    max-width: 320px;
  }

  .section-block {
    padding: 48px 20px;
  }

  .section-heading {
    margin-bottom: 20px;
  }

  .grid-container {
    grid-template-columns: repeat(3, 1fr) !important;
    grid-template-rows: repeat(5, minmax(72px, auto)) !important;
    grid-auto-rows: minmax(72px, auto) !important;
    gap: 8px;
  }

  .grid-container .grid-item-content {
    font-size: 11px;
    letter-spacing: 0.5px;
    padding: 10px 6px;
    line-height: 1.2;
  }

  .grid-container .grid-item-content.cornered {
    padding: 12px 8px;
  }

  .red-block {
    display: none !important;
  }

  .grid-item.zona-vip {
    grid-column: 1 / 2 !important;
    grid-row: 1 / 3 !important;
  }

  .grid-item.camerino {
    grid-column: 2 / 3 !important;
    grid-row: 1 / 2 !important;
  }

  .grid-item.acceso {
    grid-column: 2 / 3 !important;
    grid-row: 2 / 3 !important;
  }

  .grid-item.pista {
    grid-column: 3 / 4 !important;
    grid-row: 1 / 3 !important;
  }

  .grid-item.pantalla {
    grid-column: 1 / 3 !important;
    grid-row: 3 / 4 !important;
  }

  .grid-item.tres-barras {
    grid-column: 3 / 4 !important;
    grid-row: 3 / 4 !important;
  }

  .grid-item.iluminacion {
    grid-column: 1 / 3 !important;
    grid-row: 4 / 5 !important;
  }

  .grid-item.escenario {
    grid-column: 3 / 4 !important;
    grid-row: 4 / 6 !important;
  }

  .grid-item.y-mucho {
    grid-column: 1 / 2 !important;
    grid-row: 5 / 6 !important;
  }

  .grid-item.sonido {
    grid-column: 2 / 3 !important;
    grid-row: 5 / 6 !important;
  }

  footer {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 40px;
  }

  .footer-right {
    text-align: center;
  }
}

@media (max-width: 500px) {
  /* Móvil: scrollWidth > clientWidth en root con html overflow visible (post-fix :has no aplicó en el entorno del usuario) */
  html {
    overflow-x: hidden;
  }

  /* Mapa VIP escalado: evita que el transform desborde el ancho del documento */
  .vip-section {
    overflow-x: clip;
  }

  body.sala-page {
    background-image: url('img/Fondo_Web_2.jpg');
    background-position: center;
  }

  .site-header {
    font-size: 18px;
  }

  .vip-map-container {
    transform: scale(1.3);
  }

  .hero-categories {
    flex-direction: column;
    gap: 15px;
    align-items: center;
  }

  .spotlight-player__lists {
    max-height: 230px;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    justify-items: baseline !important;
  }

  .spotlight-player__side-label {
    font-size: 14px !important;
    letter-spacing: 0.02em !important;
    margin: 16px 0 16px !important;
  }

  .spotlight-track {
    font-size: 20px !important;
  }

  .spotlight-track__num {
    font-size: 12px !important;
  }

  .spotlight-player__eyebrow {
    font-size: 14px !important;
    top: 4px !important;
  }

  .nightclub-hero__stats-line {
    height: 10px;
  }

  .marquee-container {
    margin-top: 20px;
    margin-bottom: 50px;
  }

  .hero-cat h3 {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    margin-bottom: -5px;
    letter-spacing: 0px;
  }

  .hero-cat p {
    font-family: var(--font-mono);
    font-size: 11px;
    color: #ffffff;
    letter-spacing: 0px;
    font-weight: 400;
  }

  .hero-cat {
    min-width: unset;
    width: 100%;
    max-width: 200px;
  }

  .about .main-slogan {
    max-width: 250px;
  }

  .grid-container {
    grid-template-columns: repeat(3, 1fr) !important;
    grid-template-rows: repeat(5, minmax(72px, auto)) !important;
    grid-auto-rows: minmax(72px, auto) !important;
    gap: 8px;
  }

  .grid-container .grid-item-content {
    font-size: 11px;
    letter-spacing: 0.5px;
    padding: 10px 6px;
    line-height: 1.2;
  }

  .grid-container .grid-item-content.cornered {
    padding: 12px 8px;
  }

  .red-block {
    display: none !important;
  }

  .grid-item.zona-vip {
    grid-column: 1 / 2 !important;
    grid-row: 1 / 3 !important;
  }

  .grid-item.camerino {
    grid-column: 2 / 3 !important;
    grid-row: 1 / 2 !important;
  }

  .grid-item.acceso {
    grid-column: 2 / 3 !important;
    grid-row: 2 / 3 !important;
  }

  .grid-item.pista {
    grid-column: 3 / 4 !important;
    grid-row: 1 / 3 !important;
  }

  .grid-item.pantalla {
    grid-column: 1 / 3 !important;
    grid-row: 3 / 4 !important;
  }

  .grid-item.tres-barras {
    grid-column: 3 / 4 !important;
    grid-row: 3 / 4 !important;
  }

  .grid-item.iluminacion {
    grid-column: 1 / 3 !important;
    grid-row: 4 / 5 !important;
  }

  .grid-item.escenario {
    grid-column: 3 / 4 !important;
    grid-row: 4 / 6 !important;
  }

  .grid-item.y-mucho {
    grid-column: 1 / 2 !important;
    grid-row: 5 / 6 !important;
  }

  .grid-item.sonido {
    grid-column: 2 / 3 !important;
    grid-row: 5 / 6 !important;
  }
}

/* Nightclub Page Specific Styles */
.nightclub-hero {
  position: relative;
  width: 100%;
  min-height: min(37vh, 369px);
  padding: calc(var(--header-h) + 24px) 24px 33px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
}

.nightclub-hero__box {
  --nightclub-corner-outset: 10px;
  position: relative;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(37px, 6.15vw, 51px) clamp(32px, 5vw, 56px) clamp(33px, 5.12vw, 51px);
  min-height: 164px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  background-color: rgb(8 8 12);
  background-image: linear-gradient(105deg, rgb(0 0 0 / 66%) 0%, rgb(5 5 12 / 13%) 45%, rgb(0 0 0 / 44%) 100%), url(img/nightclub.jpg);
  background-size: 100% 100%, 100% auto;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  transition: background-size 0.55s ease, filter 0.25s ease, transform 0.25s ease;
  will-change: filter, transform;
}

@keyframes nightclub-hero-glitch {
  0% { filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0)); transform: translate3d(0, 0, 0); }
  10% { filter: drop-shadow(4px 0 0 rgb(0 160 255 / 32%)) drop-shadow(-4px 0 0 rgb(255 60 140 / 30%)); transform: translate3d(1.75px, -0.5px, 0); }
  14% { filter: drop-shadow(-5px 0 0 rgb(0 160 255 / 26%)) drop-shadow(5px 0 0 rgb(255 60 140 / 28%)); transform: translate3d(-2.25px, 0.75px, 0); }
  18% { filter: drop-shadow(3px 0 0 rgb(0 160 255 / 22%)) drop-shadow(-3px 0 0 rgb(255 60 140 / 22%)); transform: translate3d(1.25px, 0.5px, 0); }
  24% { filter: drop-shadow(-6px 0 0 rgb(0 160 255 / 22%)) drop-shadow(6px 0 0 rgb(255 60 140 / 22%)); transform: translate3d(-2.75px, -0.25px, 0); }
  28% { filter: drop-shadow(2px 0 0 rgb(0 160 255 / 16%)) drop-shadow(-2px 0 0 rgb(255 60 140 / 16%)); transform: translate3d(0.75px, 0.25px, 0); }
  100% { filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0)); transform: translate3d(0, 0, 0); }
}

@keyframes nightclub-hero-glitch-scanlines {
  0% { opacity: 0; transform: translate3d(0, 0, 0); background-position: 0 0, 0 0, 0 0; }
  8% { opacity: 0.55; transform: translate3d(1px, 0, 0); background-position: 0 -18px, 0 8px, 0 -6px; }
  16% { opacity: 0.72; transform: translate3d(-1.75px, 0.5px, 0); background-position: 0 22px, 0 -12px, 0 10px; }
  22% { opacity: 0.42; transform: translate3d(0.75px, -0.5px, 0); background-position: 0 -10px, 0 16px, 0 -14px; }
  30% { opacity: 0.14; transform: translate3d(0, 0, 0); background-position: 0 0, 0 0, 0 0; }
  100% { opacity: 0; transform: translate3d(0, 0, 0); background-position: 0 0, 0 0, 0 0; }
}

.nightclub-hero__box:hover {
  /* “Acerca” la imagen de fondo suavemente */
  background-size: 100% 100%, 110% auto;
}

.nightclub-hero__stats::before {
  content: '';
  position: absolute;
  inset: -6px;
  pointer-events: none;
  opacity: 0;
  background:
    repeating-linear-gradient(
      180deg,
      rgb(255 60 140 / 0.00) 0px,
      rgb(255 60 140 / 0.00) 4px,
      rgb(255 60 140 / 0.26) 6px,
      rgb(255 60 140 / 0.00) 7px
    ),
    repeating-linear-gradient(
      180deg,
      rgb(0 160 255 / 0.00) 0px,
      rgb(0 160 255 / 0.00) 3px,
      rgb(0 160 255 / 0.26) 5px,
      rgb(0 160 255 / 0.00) 6px
    ),
    repeating-linear-gradient(
      180deg,
      rgb(255 255 255 / 0.00) 0px,
      rgb(255 255 255 / 0.00) 9px,
      rgb(255 255 255 / 0.22) 10px,
      rgb(255 255 255 / 0.00) 12px
    );
  mix-blend-mode: screen;
  filter: contrast(145%) saturate(130%);
}

.nightclub-hero__box:hover .nightclub-hero__stats {
  animation: nightclub-hero-glitch 520ms steps(2, end) 1 both;
}

.nightclub-hero__box:hover .nightclub-hero__stats::before {
  animation: nightclub-hero-glitch-scanlines 620ms steps(3, end) 1 both;
}

.nightclub-hero__box.corners-decorator::before,
.nightclub-hero__box.corners-decorator::after,
.nightclub-hero__box.corners-decorator .cd-inner::before,
.nightclub-hero__box.corners-decorator .cd-inner::after {
  width: 27px;
  height: 27px;
  border-color: rgb(255 255 255);
}

.nightclub-hero__box.corners-decorator::before {
  top: calc(0px - var(--nightclub-corner-outset));
  left: calc(0px - var(--nightclub-corner-outset));
  border-width: 1.5px 0 0 1.5px;
}

.nightclub-hero__box.corners-decorator::after {
  top: calc(0px - var(--nightclub-corner-outset));
  right: calc(0px - var(--nightclub-corner-outset));
  border-width: 1.5px 1.5px 0 0;
}

.nightclub-hero__box.corners-decorator .cd-inner::before {
  bottom: calc(0px - var(--nightclub-corner-outset));
  left: calc(0px - var(--nightclub-corner-outset));
  border-width: 0 0 1.5px 1.5px;
}

.nightclub-hero__box.corners-decorator .cd-inner::after {
  bottom: calc(0px - var(--nightclub-corner-outset));
  right: calc(0px - var(--nightclub-corner-outset));
  border-width: 0 1.5px 1.5px 0;
}

.nightclub-hero__stats {
  position: absolute;
  top: clamp(14px, 2.56vw, 24px);
  left: clamp(24px, 4vw, 48px);
  z-index: 2;
  font-size: clamp(12px, 1.5vw, 14px);
  letter-spacing: 0.06em;
  color: rgb(255 255 255 / 92%);
  line-height: 0;
  width: min(240px, 42vw);
  font-family: 'Britanica', sans-serif;
  font-weight: 300;
}

.nightclub-hero__stats-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  white-space: nowrap;
}

.nightclub-hero__stats span {
  display: inline-block;
  font-variant-numeric: normal;
}

.nightclub-hero__stats-line {
  height: 15px;
  width: 100%;
  margin: 10px 0;
  background: rgb(255 255 255 / 95%);
  top: -1px;
  position: relative;
}

.nightclub-hero__brand {
  position: relative;
  z-index: 2;
  text-align: center;
  padding-top: 8px;
}

.nightclub-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(40px, 9vw, 66px);
  font-weight: 700;
  margin: 0;
  line-height: 0.92;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.nightclub-hero .mono-tag {
  font-family: var(--font-mono);
  font-size: clamp(12px, 4vw, 30px);
  color: rgb(255 255 255 / 95%);
  margin-top: -5px;
  display: block;
  letter-spacing: -0.01em;
}

@media (max-width: 600px) {
  .nightclub-hero__stats {
    position: static;
    width: 100%;
    margin-bottom: 40px;
  }

  .nightclub-hero__box {
    flex-direction: column;
    align-items: stretch;
    padding-top: 24px;
  }

  .nightclub-hero__brand {
    padding-top: 0;
  }
}

.intro-text-section {
  padding: 100px 24px;
  text-align: center;
  max-width: 1000px;
  margin: 0 auto;
}

.intro-text-section p {
  font-family: var(--font-display);
  font-size: clamp(24px, 4vw, 42px);
  font-weight: 100;
  line-height: 1.2;
  letter-spacing: -0.5px;
}

.spotlight-section {
  position: relative;
  overflow: hidden;
  padding: clamp(10px, 2vw, 30px) 24px;
  margin-bottom: 120px;
}

.spotlight-section__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 56px);
  max-width: 1180px;
  margin: 0 auto;
  align-items: center;
}

.spotlight-media {
  --spotlight-reticle-size-base: clamp(48px, 7.5vw, 63px);
  --spotlight-reticle-size: calc(var(--spotlight-reticle-size-base) * 0.9);
  --spotlight-reticle-inset: clamp(2px, 0.55vw, 6px);
  --spotlight-reticle-color: rgb(255 255 255);
  --spotlight-hover-sep: clamp(6px, 1vw, 10px);
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  width: 100%;
  background-color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.spotlight-media__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.spotlight-media--playing .spotlight-media__video {
  opacity: 1;
}

.spotlight-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('img/video_cover_1.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transform: scale(1);
  transition:
    transform 0.35s ease,
    opacity 0.4s ease;
  pointer-events: none;
  z-index: 1;
}

.spotlight-media:hover::after {
  transform: scale(1.05);
}

.spotlight-media--playing::after {
  opacity: 0;
  transform: scale(1);
  pointer-events: none;
}

.spotlight-media--playing:hover::after {
  transform: scale(1);
}

.spotlight-media::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 0%);
  transition: background 0.25s ease;
  pointer-events: none;
  z-index: 2;
}

.spotlight-media:hover::before {
  background: rgb(0 0 0 / 35%);
}

.spotlight-media--playing:hover::before {
  background: rgb(0 0 0 / 0%);
}

.spotlight-reticle-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.spotlight-reticle {
  position: absolute;
  box-sizing: border-box;
  width: var(--spotlight-reticle-size);
  height: var(--spotlight-reticle-size);
  color: var(--spotlight-reticle-color);
  pointer-events: none;
  shape-rendering: geometricPrecision;
  overflow: visible;
  z-index: 3;
  transition: transform 0.25s ease;
}

.spotlight-reticle--tl {
  top: var(--spotlight-reticle-inset);
  left: var(--spotlight-reticle-inset);
}

.spotlight-reticle--tr {
  top: var(--spotlight-reticle-inset);
  right: var(--spotlight-reticle-inset);
}

.spotlight-reticle--bl {
  bottom: var(--spotlight-reticle-inset);
  left: var(--spotlight-reticle-inset);
}

.spotlight-reticle--br {
  bottom: var(--spotlight-reticle-inset);
  right: var(--spotlight-reticle-inset);
}

.spotlight-media:hover .spotlight-reticle--tl {
  transform: translate(var(--spotlight-hover-sep), var(--spotlight-hover-sep));
}

.spotlight-media:hover .spotlight-reticle--tr {
  transform: translate(calc(var(--spotlight-hover-sep) * -1), var(--spotlight-hover-sep));
}

.spotlight-media:hover .spotlight-reticle--bl {
  transform: translate(var(--spotlight-hover-sep), calc(var(--spotlight-hover-sep) * -1));
}

.spotlight-media:hover .spotlight-reticle--br {
  transform: translate(calc(var(--spotlight-hover-sep) * -1), calc(var(--spotlight-hover-sep) * -1));
}

.spotlight-play {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 12px;
  line-height: 0;
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
  position: relative;
  z-index: 4;
}

.spotlight-media:hover .spotlight-play {
  transform: scale(1.2);
}

.spotlight-media--playing .spotlight-play {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.spotlight-play:hover {
  transform: scale(1.06);
  opacity: 0.92;
}

.spotlight-play:focus-visible {
  outline: 2px solid rgb(255 255 255 / 70%);
  outline-offset: 4px;
}

.spotlight-play__icon {
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: clamp(22px, 4vw, 30px) 0 clamp(22px, 4vw, 30px) clamp(38px, 7vw, 52px);
  border-color: transparent transparent transparent rgb(255 255 255);
  margin-left: clamp(6px, 1.2vw, 10px);
}

.spotlight-content h3 {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 20px);
  margin: clamp(18px, 3vw, 25px) 0;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

.spotlight-content p {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.55vw, 20px);
  font-weight: 300;
  line-height: 1.45;
  color: rgb(255 255 255 / 92%);
  margin: 0 0 clamp(16px, 2.5vw, 22px);
}

.spotlight-content p:last-child {
  margin-bottom: 0;
}

/* La Sala — carrusel horizontal + pie */
.sala-gallery {
  width: 100%;
  max-width: none;
  margin: 0 0 clamp(72px, 11vw, 120px);
  padding: 0;
}

.sala-gallery__viewport {
  width: 100%;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: clamp(16px, 4vw, 24px);
  scrollbar-width: thin;
  scrollbar-color: rgb(255 255 255 / 22%) transparent;
}

.sala-gallery__viewport::-webkit-scrollbar {
  height: 5px;
}

.sala-gallery__viewport::-webkit-scrollbar-track {
  background: rgb(255 255 255 / 6%);
}

.sala-gallery__viewport::-webkit-scrollbar-thumb {
  background: rgb(255 255 255 / 22%);
  border-radius: 3px;
}

.sala-gallery__track {
  display: flex;
  gap: clamp(10px, 1.4vw, 16px);
  padding: 0 clamp(16px, 4vw, 24px) 10px 0;
  box-sizing: border-box;
}

/* Spacer + primera slide (grid: Safari no infla el cluster como con flex + img). */
.sala-gallery__lead-cluster {
  display: grid;
  grid-template-columns: auto minmax(0, min(300px, 78vw));
  align-items: stretch;
  column-gap: clamp(10px, 1.4vw, 16px);
  flex: 0 0 auto;
  scroll-snap-align: start;
}

/* Ancho asignado por JS (.spotlight-section__inner → getBoundingClientRect().left) */
.sala-gallery__spacer {
  min-width: 0;
  align-self: stretch;
  scroll-snap-align: none;
  pointer-events: none;
}

/* Mismo ancho base que .sala-gallery__spacer (JS) con piso de 100px. */
.sala-gallery__tail-spacer {
  flex: 0 0 auto;
  min-width: 100px;
  align-self: stretch;
  scroll-snap-align: none;
  pointer-events: none;
}

.sala-gallery__lead-cluster .sala-gallery__slide {
  scroll-snap-align: none;
}

.sala-gallery__slide {
  position: relative;
  flex: 0 0 min(300px, 78vw);
  min-width: 0;
  aspect-ratio: 3 / 4;
  scroll-snap-align: start;
  overflow: hidden;
  background: #0c0c10;
}

.sala-gallery__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}

.sala-gallery__slide:hover img {
  transform: scale(1.04);
}

/* Contenedor 3/4; vídeo cover (selector + !important para imponer cover frente a reglas que forzaban contain/static en <video>) */
body.nightclub-page .sala-gallery__slide--lead .sala-gallery__lead-media {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

body.nightclub-page .sala-gallery__slide--lead .sala-gallery__lead-media video.sala-gallery__lead-video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  max-height: none;
  object-fit: cover !important;
  object-position: center center !important;
  display: block;
  transition: transform 0.45s ease;
}

body.nightclub-page .sala-gallery__slide--lead:hover .sala-gallery__lead-media video.sala-gallery__lead-video {
  transform: scale(1.04);
}

.sala-gallery__slide--lead::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgb(0 0 0 / 78%) 0%,
    rgb(0 0 0 / 38%) 45%,
    rgb(0 0 0 / 0%) 72%
  );
}

.sala-gallery__play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  transform: translate(-50%, -50%);
  width: clamp(56px, 12vw, 72px);
  height: clamp(56px, 12vw, 72px);
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  line-height: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.sala-gallery__slide--lead .sala-gallery__play {
  z-index: 5;
  width: clamp(72px, 14vw, 96px);
  height: clamp(72px, 14vw, 96px);
}

.sala-gallery__slide--lead .spotlight-play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 5;
  transform: translate(-50%, -50%);
  width: clamp(72px, 14vw, 96px);
  height: clamp(72px, 14vw, 96px);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sala-gallery__slide--lead .spotlight-play__icon {
  margin-left: 0;
}

body.nightclub-page .sala-gallery__slide--lead .spotlight-play.spotlight-play--hidden {
  opacity: 0 !important;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.sala-gallery__play:hover {
  opacity: 0.88;
  transform: translate(-50%, -50%) scale(1.05);
}

.sala-gallery__play:focus-visible {
  outline: 2px solid rgb(255 255 255 / 75%);
  outline-offset: 4px;
}

.sala-gallery__play-icon {
  display: block;
  width: 0;
  height: 0;
  margin: 0 auto;
  border-style: solid;
  border-width: clamp(12px, 2.5vw, 16px) 0 clamp(12px, 2.5vw, 16px) clamp(20px, 4vw, 26px);
  border-color: transparent transparent transparent rgb(255 255 255);
  margin-left: clamp(8px, 1.5vw, 12px);
}

.gallery-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 6;
  pointer-events: none;
}

.sala-gallery__slide--lead .gallery-label {
  z-index: 6;
  padding: clamp(40px, 5vw, 55px) clamp(33px, 4vw, 34px) clamp(31px, 4vw, 43px);
  background: linear-gradient(to top, rgb(0 0 0 / 82%) 0%, rgb(0 0 0 / 42%) 55%, rgb(0 0 0 / 0%) 100%);
}

.sala-gallery__slide--lead .gallery-label::before,
.sala-gallery__slide--lead .gallery-label::after,
.sala-gallery__slide--lead .gallery-label h2::before,
.sala-gallery__slide--lead .gallery-label h2::after {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  border-color: rgb(255 255 255);
  border-style: solid;
  opacity: 0.95;
}

.sala-gallery__slide--lead .gallery-label::before {
  top: clamp(18px, 3.2vw, 28px);
  left: clamp(18px, 3.2vw, 28px);
  border-width: 2px 0 0 2px;
}

.sala-gallery__slide--lead .gallery-label::after {
  top: clamp(18px, 3.2vw, 28px);
  right: clamp(18px, 3.2vw, 28px);
  border-width: 2px 2px 0 0;
}

.sala-gallery__slide--lead .gallery-label h2::before {
  bottom: clamp(18px, 3.2vw, 28px);
  left: clamp(18px, 3.2vw, 28px);
  border-width: 0 0 2px 2px;
}

.sala-gallery__slide--lead .gallery-label h2::after {
  bottom: clamp(18px, 3.2vw, 28px);
  right: clamp(18px, 3.2vw, 28px);
  border-width: 0 2px 2px 0;
}

.gallery-label h2 {
  font-family: var(--font-display);
  font-size: clamp(46px, 8.4vw, 55px);
  font-weight: 700;
  line-height: 0.3;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  text-align: center;
}

.gallery-label p {
  font-family: var(--font-mono);
  font-size: clamp(13px, 1.6vw, 16px);
  margin-top: clamp(10px, 1.5vw, 14px);
  color: rgb(255 255 255 / 90%);
  text-align: center;
}

/* lasala.html: imagen en caja 3/4; nombre centrado debajo, fuera del recorte (sin overlays ni esquinas) */
.sala-page .sala-page-zone,
.events-page .sala-page-zone {
  display: flex;
  flex-direction: column;
  flex: 0 0 min(300px, 78vw);
  min-width: 0;
  scroll-snap-align: start;
  margin: 0;
}

.sala-gallery__lead-cluster .sala-page-zone {
  width: 100%;
  min-height: 0;
  scroll-snap-align: none;
}

.sala-page .sala-page-zone__media,
.events-page .sala-page-zone__media {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #0c0c10;
  flex-shrink: 0;
}

.sala-page .sala-page-zone__media img,
.events-page .sala-page-zone__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}

.sala-page .sala-page-zone:hover .sala-page-zone__media img,
.events-page .sala-page-zone:hover .sala-page-zone__media img {
  transform: scale(1.04);
}

.sala-page .sala-page-zone__title,
.events-page .sala-page-zone__title {
  font-family: var(--font-mono);
  font-size: clamp(14px, 2.4vw, 20px);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: center;
  color: var(--text-primary);
  margin: clamp(12px, 2vw, 18px) 0 0;
  line-height: 1.25;
}

/* La Sala: ocultar títulos bajo slides (p. ej. «descripción») */
.sala-page .sala-page-zone__title {
  display: none;
}

@media (max-width: 500px) {
  /* Carrusel La Sala: snap centrado en viewport; la zona dentro del lead-cluster sigue sin snap propio */
  .sala-page .sala-gallery__viewport,
  .events-page .sala-gallery__viewport {
    scroll-padding-inline: max(16px, calc(50vw - min(150px, 39vw)));
  }

  /* Mismo criterio que scroll-padding-inline: el aire del track coincide con el centrado snap (evita primera tarjeta “pegada”) */
  .sala-page .sala-gallery__track,
  .events-page .sala-gallery__track {
    padding-left: max(16px, calc(50vw - min(150px, 39vw)));
    padding-right: max(16px, calc(50vw - min(150px, 39vw)));
    padding-bottom: 10px;
    padding-top: 0;
  }

  /* Sin spacer en móvil: el cluster solo contiene la primera tarjeta y hace snap igual que las demás */
  .sala-page .sala-gallery__lead-cluster,
  .events-page .sala-gallery__lead-cluster {
    scroll-snap-align: center;
    grid-template-columns: minmax(0, min(300px, 78vw));
    column-gap: 0;
  }

  .sala-page .sala-gallery__lead-cluster .sala-gallery__spacer,
  .events-page .sala-gallery__lead-cluster .sala-gallery__spacer {
    display: none;
  }

  .sala-page .sala-gallery__track > .sala-page-zone,
  .events-page .sala-gallery__track > .sala-page-zone {
    scroll-snap-align: center;
  }

  /* Nightclub — galería La Sala: mismo móvil que lasala (aire lateral + snap centrado) */
  .nightclub-page .sala-gallery__viewport {
    scroll-padding-inline: max(16px, calc(50vw - min(150px, 39vw)));
  }

  .nightclub-page .sala-gallery__track {
    padding-left: max(16px, calc(50vw - min(150px, 39vw)));
    padding-right: max(16px, calc(50vw - min(150px, 39vw)));
    padding-bottom: 10px;
    padding-top: 0;
  }

  .nightclub-page .sala-gallery__lead-cluster {
    scroll-snap-align: center;
    grid-template-columns: minmax(0, min(300px, 78vw));
    column-gap: 0;
  }

  .nightclub-page .sala-gallery__lead-cluster .sala-gallery__spacer {
    display: none;
  }

  .nightclub-page .sala-gallery__track > .sala-gallery__slide {
    scroll-snap-align: center;
  }
}

.sala-gallery__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 32px);
  margin-top: clamp(36px, 5vw, 56px);
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 clamp(16px, 4vw, 24px);
  box-sizing: border-box;
}

.sala-gallery__copy {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.55vw, 25px);
  font-weight: 100;
  line-height: 1.55;
  color: white;
  max-width: 38em;
  margin: 0;
}

/* Tipografía / borde / hover: .btn-outline--vip (igual que CTA dentro de .vip-content__actions) */
.sala-gallery__btn {
  flex-shrink: 0;
  align-self: center;
}

.marquee-container {
  width: 100%;
  padding: 40px 0;
  background: transparent;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  margin-bottom: 100px;
}

.marquee-content {
  display: flex;
  white-space: nowrap;
  width: max-content;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  animation: marquee 21.5s linear infinite;
}

.marquee-content span {
  font-family: var(--font-display);
  font-size: 24px;
  text-transform: uppercase;
  padding-right: 50px;
  color: var(--text-primary);
}

@keyframes marquee {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

.vip-section {
  width: 100%;
  margin: 0 0 clamp(40px, 8vw, 60px);
  padding: clamp(20px, 5vw, 20px) clamp(24px, 5vw, 64px);
  box-sizing: border-box;
}

.vip-section__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 88px);
  max-width: 1200px;
  margin: 0 auto;
  align-items: center;
}

.vip-map-container {
  position: relative;
}

.vip-map-container img {
  width: 100%;
  height: auto;
}

.vip-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  color: rgb(255 255 255);
}

.vip-content__eyebrow {
  font-family: var(--font-body);
  font-size: clamp(13px, 1.4vw, 15px);
  font-weight: 300;
  letter-spacing: 0.02em;
  margin: 0 0 8px;
  color: rgb(255 255 255 / 92%);
}

.vip-content__title {
  font-family: var(--font-display);
  font-size: clamp(44px, 8vw, 76px);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  margin: 0 0 clamp(20px, 3vw, 28px);
}

.vip-content__lead {
  font-family: var(--font-display);
  font-size: clamp(16px, 1.65vw, 19px);
  font-weight: 300;
  line-height: 1.45;
  margin: 0 0 0;
  max-width: 28em;
  color: rgb(255 255 255 / 95%);
}

.vip-content__actions {
  align-self: flex-end;
  margin-top: clamp(28px, 4vw, 44px);
}

.btn-outline--vip {
  font-family: 'Britanica', sans-serif;
  font-size: clamp(22px, 1.6vw, 24px);
  font-weight: 200;
  letter-spacing: 0.1px;
  text-transform: none;
  padding: 4px 8px;
  border-color: rgb(255 255 255);
  color: rgb(255 255 255);
  background: transparent;
}

.btn-outline--vip:hover {
  background: rgb(255 255 255 / 8%);
  color: rgb(255 255 255);
}

.spotlight-list-footer {
  max-width: 1180px;
  margin: 0 auto 50px;
  padding: clamp(40px, 8vw, 60px) 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Reproductor / tracklist Spotlight */
.spotlight-player {
  border: 1px solid rgb(255 255 255);
  color: rgb(255 255 255);
}

.spotlight-player__top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 0;
}

.spotlight-player__brand {
  padding: clamp(20px, 3vw, 32px) clamp(20px, 3vw, 36px);
  border-right: 1px solid rgb(255 255 255);
  text-align: left;
}

.spotlight-player__eyebrow {
  font-family: var(--font-display);
  font-size: clamp(10px, 2.2vw, 30px);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0 0 0px;
  opacity: 0.95;
  top: 10px;
  position: relative;
}

.spotlight-player__title {
  font-family: var(--font-display);
  font-size: clamp(46px, 7vw, 85px);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  margin: 0 0 0px;
}

.spotlight-player__subtitle {
  font-family: var(--font-mono);
  font-size: clamp(10px, 2vw, 13px);
  letter-spacing: -0.01em;
  margin: 0;
  opacity: 0.9;
  font-weight: 100;
}

.spotlight-player__controls-col {
  padding: clamp(20px, 3vw, 32px) clamp(20px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
}

.spotlight-player__transport {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 4vw, 36px);
}

.spotlight-player__transport-btn {
  background: none;
  border: none;
  padding: 8px;
  color: rgb(255 255 255);
  cursor: pointer;
  line-height: 0;
  transition: opacity 0.2s ease;
}

.spotlight-player__transport-btn:hover {
  opacity: 0.75;
}

.spotlight-player__transport-btn:focus-visible {
  outline: 1px solid rgb(255 255 255);
  outline-offset: 4px;
}

.spotlight-player__transport-btn--play {
  padding: 0;
}

.spotlight-player__play-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(44px, 8vw, 52px);
  height: clamp(44px, 8vw, 52px);
  border-radius: 50%;
  background: rgb(255 255 255);
  color: #000;
  position: relative;
}

.spotlight-player__glyph--pause {
  display: none;
}

.spotlight-player[data-playing='true'] .spotlight-player__glyph--play {
  display: none;
}

.spotlight-player[data-playing='true'] .spotlight-player__glyph--pause {
  display: block;
}

.spotlight-player__progress {
  width: 100%;
  max-width: min(320px, 85%);
}

.spotlight-player__progress-line {
  height: 1px;
  background: rgb(255 255 255 / 35%);
  position: relative;
  cursor: pointer;
}

.spotlight-player__progress-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  background: rgb(255 255 255);
  pointer-events: none;
}

.spotlight-player__hint {
  font-family: var(--font-mono);
  font-size: clamp(10px, 1vw, 11px);
  letter-spacing: 0.04em;
  margin: 0;
  opacity: 0.75;
  max-width: 280px;
  line-height: 1.4;
}

.spotlight-player__row-divider {
  height: 1px;
  background: rgb(255 255 255);
  margin: 0;
}

.spotlight-player__lists {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  padding: clamp(24px, 3vw, 36px) clamp(20px, 3vw, 32px) clamp(28px, 4vw, 40px);
  align-items: start;
  justify-items: center;
}

.spotlight-player__side-label {
  font-family: var(--font-mono);
  font-size: clamp(9px, 1vw, 11px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 clamp(16px, 2.5vw, 22px);
  opacity: 0.85;
}

.spotlight-player__tracks {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.spotlight-track {
  display: flex;
  align-items: baseline;
  gap: 3px;
  width: 100%;
  padding: 6px 8px 6px 4px;
  margin: 0;
  border: none;
  background: transparent;
  color: rgb(255 255 255);
  font-family: var(--font-display);
  font-size: clamp(13px, 2.25vw, 28px);
  font-weight: 700;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1;
  cursor: pointer;
  border-radius: 0;
  transition:
    background 0.15s ease,
    opacity 0.15s ease;
}

.spotlight-track:hover {
  background: rgb(255 255 255 / 6%);
}

.spotlight-track:focus-visible {
  outline: 1px solid rgb(255 255 255);
  outline-offset: 2px;
}

.spotlight-track.is-active {
  background: rgb(255 255 255 / 10%);
}

.spotlight-track__play-ico {
  flex-shrink: 0;
  opacity: 0.85;
  top: -1px;
  position: relative;
}

.spotlight-track__play-ico svg {
  display: block;
}

.spotlight-track__num {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: clamp(9px, 1.40vw, 16px);
  font-weight: 400;
  min-width: 1.05em;
  opacity: 0.7;
  top: -2px;
  position: relative;
  text-align: center;
  left: -2px;
}

.spotlight-player__column {
  width: fit-content;
}

.spotlight-track__name small {
  font-family: var(--font-mono);
  font-size: 0.65em;
  font-weight: 400;
  letter-spacing: 0.06em;
  opacity: 0.8;
  margin-left: 0.25em;
}

@media (max-width: 992px) {
  .spotlight-section__inner,
  .vip-section__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .vip-content__actions {
    align-self: flex-start;
  }

  .spotlight-player__top {
    grid-template-columns: 1fr;
  }

  .spotlight-player__brand {
    border-right: none;
    border-bottom: 1px solid rgb(255 255 255);
  }

  .spotlight-player__lists {
    grid-template-columns: 1fr;
  }
  .sala-gallery__footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .sala-gallery__btn {
    align-self: flex-end;
    margin-top: clamp(28px, 4vw, 44px);
  }
}


/* Tickets Page — hero alineado con nightclub (sin bloque stats). Fondo: --tickets-hero-image en .tickets-hero__box */
.tickets-hero {
  position: relative;
  width: 100%;
  min-height: min(37vh, 369px);
  padding: calc(var(--header-h) + 24px) 24px 33px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
}

.tickets-hero__box {
  --tickets-hero-image: url(img/tickets.jpg);
  --tickets-corner-outset: 10px;
  position: relative;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(37px, 6.15vw, 51px) clamp(32px, 5vw, 56px) clamp(33px, 5.12vw, 51px);
  min-height: 164px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  background-color: rgb(8 8 12);
  background-image:
    linear-gradient(105deg, rgb(0 0 0 / 66%) 0%, rgb(5 5 12 / 13%) 45%, rgb(0 0 0 / 44%) 100%),
    var(--tickets-hero-image);
  background-size: 100% 100%, 100% auto;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  transition: background-size 0.55s ease, filter 0.25s ease, transform 0.25s ease;
  will-change: filter, transform;
}

.tickets-hero__box:hover {
  background-size: 100% 100%, 110% auto;
}

.tickets-hero__box.corners-decorator::before,
.tickets-hero__box.corners-decorator::after,
.tickets-hero__box.corners-decorator .cd-inner::before,
.tickets-hero__box.corners-decorator .cd-inner::after {
  width: 27px;
  height: 27px;
  border-color: rgb(255 255 255);
}

.tickets-hero__box.corners-decorator::before {
  top: calc(0px - var(--tickets-corner-outset));
  left: calc(0px - var(--tickets-corner-outset));
  border-width: 1.5px 0 0 1.5px;
}

.tickets-hero__box.corners-decorator::after {
  top: calc(0px - var(--tickets-corner-outset));
  right: calc(0px - var(--tickets-corner-outset));
  border-width: 1.5px 1.5px 0 0;
}

.tickets-hero__box.corners-decorator .cd-inner::before {
  bottom: calc(0px - var(--tickets-corner-outset));
  left: calc(0px - var(--tickets-corner-outset));
  border-width: 0 0 1.5px 1.5px;
}

.tickets-hero__box.corners-decorator .cd-inner::after {
  bottom: calc(0px - var(--tickets-corner-outset));
  right: calc(0px - var(--tickets-corner-outset));
  border-width: 0 1.5px 1.5px 0;
}

.tickets-hero__brand {
  position: relative;
  z-index: 2;
  text-align: center;
  padding-top: 8px;
}

.tickets-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(40px, 9vw, 66px);
  font-weight: 700;
  margin: 0;
  line-height: 0.92;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.tickets-hero .mono-tag {
  font-family: var(--font-mono);
  font-size: clamp(12px, 4vw, 30px);
  color: rgb(255 255 255 / 95%);
  margin-top: -5px;
  display: block;
  letter-spacing: -0.01em;
}

/* Embed Fourvenues: el script inyecta el listado de eventos / iframe */
.tickets-fourvenues {
  width: 100%;
}

.tickets-fourvenues .iframeHolderReservas {
  margin: 15px auto 70px;
  max-width: 100%;
  padding: 0 clamp(16px, 4vw, 24px);
  box-sizing: border-box;
}

.tickets-list-container {
  max-width: 860px;
  margin: 0 auto 100px;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Oculto de momento; el markup se mantiene para eventos destacados futuros. */
.tickets-list-container--reserved {
  display: none;
}

.ticket-card {
  display: flex;
  background: rgba(22, 22, 26, 0.95);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s;
  cursor: pointer;
}

.ticket-card:hover {
  transform: translateY(-4px);
  background: rgba(30, 30, 36, 0.98);
  border-color: rgba(255, 255, 255, 0.1);
}

.ticket-card__img {
  width: 140px;
  min-width: 140px;
  height: 140px;
  background: #111;
  position: relative;
}

.ticket-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ticket-card__body {
  padding: 24px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
}

.ticket-card__meta {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 12px;
}

.ticket-date-tag {
  background: #4a68ff;
  color: white;
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  border-radius: 4px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.ticket-time {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
}

.ticket-card__title {
  font-family: var(--font-display);
  font-size: clamp(18px, 2.5vw, 22px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

@media (max-width: 600px) {
  .ticket-card {
    flex-direction: column;
  }
  .ticket-card__img {
    width: 100%;
    height: 180px;
  }
  .ticket-card__body {
    padding: 20px;
  }
}


/* La Sala Page Specific Styles */
.sala-page-header {
  padding: 100px 32px 40px;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.sala-title-box {
  position: relative;
  display: inline-block;
  padding: 12px 24px;
}

.sala-title-box h1 {
  font-family: var(--font-display);
  font-size: clamp(32px, 6vw, 64px);
  font-weight: 700;
  margin: 0;
  line-height: 1;
}

.sala-nav-controls {
  display: flex;
  gap: 12px;
  margin-bottom: 8px;
}

.sala-nav-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.8);
  background: transparent;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.sala-nav-btn:hover {
  background: white;
  color: black;
}

@media (max-width: 600px) {
  .sala-page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
}


/* Events Page Specific Styles (solo body.events-page / bloques de contenido eventos) */
body.events-page {
  background-color: var(--bg-color);
  background-image: url('img/Fondo_Web_2.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.events-hero {
  padding: calc(var(--header-h) + 48px) 32px 50px;
  text-align: center;
}

.events-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(36px, 8vw, 76px);
  font-weight: 700;
  margin: 0;
  line-height: 1;
}

.events-hero .mono-tag {
  font-family: var(--font-mono);
  font-size: clamp(14px, 2.5vw, 22px);
  margin-top: 15px;
  display: flex;
  justify-content: center;
  gap: 15px;
}

.events-marquee {
  background: transparent;
  padding: 30px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 80px;
}

.events-marquee .marquee-content span {
  font-family: var(--font-mono);
  font-size: 20px;
  text-transform: none;
  font-weight: 300;
}

/*
 * Intro eventos: DOM = media → texto (como nightclub).
 * Escritorio: grid-template-areas "content media" → texto izquierda, imagen derecha.
 * ≤992px: mismas reglas que .spotlight-section__inner global (1 col, gap 40px) + areas "media" "content" → imagen arriba, texto abajo.
 */
.events-page .spotlight-section--events-intro .spotlight-section__inner {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr);
  grid-template-rows: auto;
  grid-template-areas: 'content media';
}

.events-page .spotlight-section--events-intro .spotlight-content {
  grid-area: content;
}

.events-page .spotlight-section--events-intro .spotlight-media {
  grid-area: media;
  width: 80%;
  max-width: 100%;
  margin-inline: auto;
  aspect-ratio: 40 / 27;
}

.events-page .spotlight-section--events-intro .spotlight-media::after {
  background-image: url('img/eventos.jpg');
}

.events-page .spotlight-section--events-intro .spotlight-play {
  display: none;
}

@media (max-width: 992px) {
  .events-page .spotlight-section--events-intro .spotlight-section__inner {
    grid-template-columns: 1fr;
    grid-template-areas:
      'media'
      'content';
    gap: 40px;
    max-width: min(1180px, 100%);
  }

  .events-page .spotlight-section--events-intro .spotlight-media {
    width: 100%;
    margin-inline: 0;
    aspect-ratio: 16 / 9;
  }

  .events-page .spotlight-section--events-intro .spotlight-content {
    max-width: 40rem;
    margin-inline: auto;
    width: 100%;
  }
}

@media (max-width: 480px) {
  .events-page .spotlight-section--events-intro .spotlight-content p {
    font-size: clamp(15px, 3.8vw, 17px);
    line-height: 1.5;
    margin-bottom: clamp(12px, 3vw, 18px);
  }
}

.events-page .events-caps-box {
  max-width: min(520px, 80vw);
  margin: 0 auto clamp(110px, 14vw, 150px);
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: 0;
  text-align: center;
  position: relative;
  border: 1px solid #fff;
  box-sizing: border-box;
}

.events-page .event-cap-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(2px, 0.1vw, 2px);
  padding: clamp(28px, 6vw, 38px) clamp(14px, 3vw, 22px);
  min-height: clamp(125px, 24vw, 130px);
  box-sizing: border-box;
}

.events-page .event-cap-item--full {
  grid-column: 1 / -1;
  border-bottom: 1px solid #fff;
}

.events-page .events-caps-box .event-cap-item:nth-child(2) {
  border-right: 1px solid #fff;
}

.events-page .event-cap-title {
  font-family: var(--font-mono);
  font-size: clamp(26px, 3.2vw, 30px);
  font-weight: 700;
  letter-spacing: 0em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.15;
}

.events-page .event-cap-pax {
  font-family: var(--font-mono);
  font-size: clamp(14px, 1.5vw, 14px);
  font-weight: 400;
  letter-spacing: 0.08em;
  color: #fff;
  text-transform: uppercase;
}

@media (max-width: 500px) {
  .events-page .events-caps-box {
    max-width: min(520px, 80vw) !important;
  }

  .events-page .event-cap-item {
    min-height: clamp(100px, 20vw, 130px) !important;
  }

  .spotlight-section {
    margin-bottom: 70px;
  }

  .events-services-list .event-service-subtext {
    font-size: 15px !important;
    max-width: 230px !important;
  }

  .events-cta-sub {
    font-size: clamp(13.5px, 3vw, 22px);
    line-height: 0;
    margin-bottom: 10px;
  }
}

.events-gallery-header {
  max-width: 1200px;
  margin: 0 auto 40px;
  padding: 0 32px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.events-gallery-title-box {
  position: relative;
  padding: 10px 20px;
}

.events-gallery-title {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
  color: var(--text-primary);
}

.events-gallery-nav {
  margin-bottom: 0;
}

.events-gallery__viewport {
  margin-top: 40px;
}

/* Servicios eventos — acordeón: filas a todo el ancho, contenido en --content-max-wide centrado */
.events-services-list {
  width: 100%;
  max-width: none;
  margin: 0 auto 120px;
  padding: 0;
  color: #fff;
  border-top: 1px solid rgb(255 255 255 / 35%);
}

.events-services-list .event-service-details {
  border-bottom: 1px solid rgb(255 255 255 / 35%);
}

.event-service-summary {
  list-style: none;
  display: block;
  padding: 0;
  cursor: pointer;
  color: #fff;
}

.events-services-list .event-service-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  padding: 30px clamp(22px, 4vw, 32px) 12px;
}

.events-services-list .event-service-panel__inner {
  box-sizing: border-box;
  padding: 0 clamp(22px, 4vw, 32px) 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 0;
}

/* Evitar intrinsic sizing (fit-content) para mejorar rendimiento */
.events-services-list .event-service-panel__text {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  max-width: 100%;
}

.events-services-list .event-service-rule {
  border: 0;
  border-top: 1px solid #fff;
  width: 100%;
  margin: 0 0 clamp(12px, 1.5vw, 18px);
  flex-shrink: 0;
}

.event-service-summary::-webkit-details-marker {
  display: none;
}

.event-service-summary::marker {
  display: none;
}

.events-services-list .event-service-title {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 400;
  text-transform: uppercase;
  color: #fff;
}

.event-service-arrow {
  flex-shrink: 0;
  transition: transform 0.3s ease;
  transform: rotate(90deg);
}

.event-service-details[open] .event-service-arrow {
  transform: rotate(0deg);
}

.event-service-panel {
  padding: 0;
}

/* Animación barata (sin recortar contenido): el height lo maneja <details> nativo */
.events-services-list .event-service-panel__inner {
  opacity: 0;
  transform: translateY(-6px);
}

.event-service-details[open] .event-service-panel__inner {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.18s ease, transform 0.18s ease;
  will-change: opacity, transform;
}

@starting-style {
  .event-service-details[open] .event-service-panel__inner {
    opacity: 0;
    transform: translateY(-6px);
  }
}

.events-services-list .event-service-subtext {
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0.1em;
  line-height: 1.5;
  display: block;
  font-weight: 100;
  color: white;
}

.events-cta-section {
  text-align: center;
  padding: clamp(40px, 11vw, 120px) clamp(24px, 5vw, 40px) clamp(140px, 15vw, 160px);
  color: #fff;
}

.events-cta-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 6vw, 62px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.85;
  margin: 0 auto clamp(25px, 4vw, 35px);
  max-width: 22ch;
  text-wrap: balance;
  color: #fff;
}

.events-cta-lede {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 1.8vw, 16px);
  max-width: 36rem;
  margin: 0 auto;
}

.events-cta-sub {
  font-family: var(--font-mono);
  font-size: clamp(13px, 4vw, 22px);
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.35;
  color: #fff;
}

.events-cta-email {
  font-family: var(--font-mono);
  font-size: clamp(10px, 3.65vw, 24px);
  font-weight: 400;
  letter-spacing: 0.08em;
  display: block;
  margin: 0;
  color: #fff;
  text-decoration: none;
  line-height: 0.35;
}

.events-cta-email:hover {
  opacity: 0.85;
}

/* CTA eventos: mismo botón que Galería La Sala (.btn-outline--vip) */
.events-cta-section .btn-outline.btn-outline--vip.sala-gallery__btn {
  margin-top: clamp(40px, 7vw, 64px);
  text-decoration: none;
}

/* --- CONTACT PAGE REFINEMENTS --- */
.contact-hero {
  padding: 160px 24px 60px;
  text-align: center;
}

.contact-hero h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(60px, 12vw, 120px);
  letter-spacing: -4px;
  line-height: 0.9;
  margin: 0;
  text-transform: uppercase;
}

.contact-location {
  max-width: 1100px;
  margin: 0 auto 100px;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 1fr 1.15fr; /* Slightly wider right side to fit text */
  gap: 80px;
  align-items: center;
}

.contact-map-box {
  position: relative;
  aspect-ratio: 1.1 / 1;
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 16px;
}

.contact-map-placeholder {
  width: 100%;
  height: 100%;
  background: #111;
  overflow: hidden;
  position: relative;
}

.mapHolder {
  width: 100% !important;
  height: 100% !important;
}

/* Corners for map box */
.contact-map-box::before,
.contact-map-box::after,
.contact-map-box .cd-inner::before,
.contact-map-box .cd-inner::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  border-color: #fff;
  border-style: solid;
  z-index: 2;
}

.contact-map-box::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
.contact-map-box::after { top: -1px; right: -1px; border-width: 1px 1px 0 0; }
.contact-map-box .cd-inner::before { bottom: -1px; left: -1px; border-width: 0 0 1px 1px; }
.contact-map-box .cd-inner::after { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }

.contact-info-content h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 32px;
  letter-spacing: 2px;
  margin-bottom: 32px;
  text-transform: uppercase;
}

.contact-info-list {
  margin-bottom: 40px;
}

.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 28px;
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.2;
  color: var(--text-primary);
  font-weight: 100;
}

.contact-info-icon {
  flex-shrink: 0;
  margin-top: 4px;
  opacity: 1;
}

.contact-methods {
  padding: 80px 24px 140px;
  text-align: center;
}

.contact-methods-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(25px, 6vw, 48px);
  max-width: 850px;
  margin: 0 auto 100px;
  line-height: 1.1;
  letter-spacing: -1px;
  text-transform: uppercase;
}

.contact-work {
  padding: 0 24px 120px;
  text-align: center;
}

.contact-work__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 5vw, 40px);
  max-width: 900px;
  margin: 0 auto 28px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.contact-work__cta {
  display: inline-block;
}

.contact-grid {
  display: flex;
  justify-content: center;
  gap: clamp(40px, 10vw, 160px);
  max-width: 1200px;
  margin: 0 auto;
}

.contact-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-decoration: none;
  color: #fff;
}

.contact-icon-circle {
  width: 96px;
  height: 96px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.contact-item:hover .contact-icon-circle {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.1);
  transform: scale(1.05);
}

.contact-item-label {
  font-family: 'Britanica', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
}

.contact-item-value {
  font-family: 'Britanica', sans-serif;
  font-size: 14px;
  color: #fff;
  font-weight: 100;
  margin-top: -24px;
}

@media (max-width: 1024px) {
  .contact-grid {
    gap: 60px;
  }
}

@media (max-width: 900px) {
  .contact-hero {
    padding-top: 120px;
  }
  
  .contact-location {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 0 24px;
    text-align: center;
  }
  
  .contact-info-item {
    justify-content: center;
    text-align: center;
  }
  
  .contact-map-box {
    max-width: 500px;
    margin: initial;
  }
  
  .contact-grid {
    flex-direction: column;
    gap: 40px;
  }
  
  .contact-methods-title {
    margin-bottom: 60px;
  }
}

@media (max-width: 500px) {
  .contact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 14px;
    justify-items: center;
    align-items: start;
  }

  .contact-item {
    width: 100%;
    max-width: 100%;
  }

  .contact-item-value {
    text-align: center;
    word-break: break-word;
    hyphens: auto;
  }
}