/* ══════════════════════════════════════════════════════════════════
   Umbral · discoteca
   ------------------------------------------------------------------
   Ejemplo de web CON RESERVAS Y PAGOS para meglio.

   Un local de noche no se vende con una web clara y amable: se vende
   con una que dé un poco de respeto. Así que aquí casi todo es negro,
   la letra es enorme y condensada, y solo hay un color, el rojo de la
   puerta. Nada de degradados ni de colorines.

   La pieza que manda es el visor 360°: antes de reservar te pones en
   el sitio y miras. No son cuatro fotos, es una sala de verdad hecha
   en 3D y cuatro posiciones de cámara dentro de ella (ver room.js).

   Las cuatro demos van en registros distintos a propósito:

     meglio      azul noche y ámbar
     Almácigo    papel claro, verde y magenta
     Contrapelo  caoba y latón, una hoja de libro
     Parada 14   mantel de cuadros, rojo y amarillo
     Umbral      hormigón negro y un solo rojo

   Cada apartado es su propia cara. No se recorre bajando.
   ══════════════════════════════════════════════════════════════════ */

/* ─── Los colores y las medidas ─────────────────────────────────────
   Un único rojo para todo lo que se pulsa, y cuatro grises para el
   resto. Cuanto menos color, más pesa el que hay.                   */
:root {
  color-scheme: dark;
  --bg: #101011;
  --panel: #1a1a1c;
  --paper: #f0ede7;
  --muted: #b2aeab;
  --line: #363437;
  --red: #ff594c;
  --red-dark: #cf352d;
  --display: 'Barlow Condensed', sans-serif;
  --body: 'Manrope', sans-serif;
  --out: cubic-bezier(.23, 1, .32, 1);
  --move: cubic-bezier(.77, 0, .175, 1);
  --pad: clamp(20px, 4.4vw, 78px);
}

/* ─── Lo de siempre ─────────────────────────────────────────────── */
* { box-sizing: border-box; }

html { scrollbar-color: #66605e var(--bg); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--paper);
  font: 14px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
}

body.intro-on, body.scene-expanded { overflow: hidden; }

[hidden] { display: none!important; }

button, input, select { font: inherit; }

button, a, input, select, summary { -webkit-tap-highlight-color: transparent; }

button, a { touch-action: manipulation; }

button { cursor: pointer; color: inherit; }

button:disabled { cursor: not-allowed; opacity: .45; }

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

button { border: 0; background: none; }

button:active:not(:disabled) { transform: translateY(1px); }

button, a, summary, input, select { outline-offset: 5px; }

button:focus-visible,
a:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex="0"]:focus-visible {
  outline: 2px solid var(--red);
}

::selection { background: var(--red); color: #101011; }

h1, h2, h3, p { margin: 0; }

h1, h2, h3 { font-weight: 600; }

img {
  display: block;
  width: 100%;
  object-fit: cover;
}

svg { display: block; }

/* ─── Iconos y utilidades ───────────────────────────────────────────
   Los iconos viven una vez en el HTML como <symbol> y se usan con
   <use>. Van de trazo, no de relleno, para que hereden el grosor.   */
.icons {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.icon--back { transform: rotate(180deg); }

/* Se lee pero no se ve: para quien navega escuchando la página. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* El salto al contenido solo aparece al tabular. Sin esto, quien usa
   teclado tiene que pasar por toda la cabecera en cada cara. */
.skip {
  position: fixed;
  z-index: 100;
  left: 20px;
  top: 10px;
  padding: 12px;
  background: var(--paper);
  color: #101011;
  transform: translateY(-160%);
}

.skip:focus { transform: none; }

/* ─── El aviso de que esto no existe ────────────────────────────────
   Permanente y arriba del todo. Una web de discoteca con botón de
   pagar sin este aviso acaba con alguien intentando entrar.         */
.demo {
  position: relative;
  z-index: 30;
  min-height: 34px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 7px var(--pad);
  font-size: 11px;
  line-height: 1.5;
  background: #222224;
  color: #d8d4d0;
}

.demo b { font-weight: 600; color: #fff; }

.demo a {
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ─── La marca, la cabecera y el pie ────────────────────────────────
   El punto rojo detrás del nombre es toda la marca: un local de noche
   no necesita más que su nombre y una luz encendida.                */
.wordmark {
  font: 700 31px/.9 var(--display);
  letter-spacing: -.02em;
  display: inline-flex;
  align-items: flex-start;
  gap: 5px;
}

.wordmark__dot {
  height: 5px;
  width: 5px;
  margin-top: 2px;
  background: var(--red);
  border-radius: 50%;
}

.header {
  height: 86px;
  padding: 0 var(--pad);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  gap: 32px;
  position: relative;
  z-index: 20;
}

.nav {
  display: flex;
  align-items: center;
  gap: 34px;
  font-size: 12px;
}

.nav a {
  padding: 11px 0;
  position: relative;
  color: var(--muted);
}

/* El subrayado crece desde la izquierda, no aparece de golpe. */
.nav a::after {
  content: '';
  position: absolute;
  bottom: 3px;
  left: 0;
  height: 2px;
  width: 100%;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s var(--out);
}

.nav a[aria-current=page] { color: var(--paper); }

.nav a[aria-current=page]::after, .nav a:hover::after { transform: scaleX(1); }

.nav__360 {
  font-size: 9px;
  color: var(--red);
  vertical-align: super;
  margin-left: 4px;
}

.header__ticket {
  display: flex;
  gap: 18px;
  align-items: center;
  font-size: 12px;
  padding: 11px 17px;
  border: 1px solid #6b6563;
  transition: background .2s, color .2s;
}

.header__ticket:hover { background: var(--paper); color: var(--bg); }

.header__ticket .icon { width: 16px; height: 16px; }

.footer {
  min-height: 67px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px var(--pad);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 10px;
}

.footer a { text-decoration: underline; text-underline-offset: 3px; }

.footer__divider { margin: 0 12px; color: var(--red); }

.text-button {
  padding: 4px 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: inherit;
}

.text-button .icon { width: 16px; height: 16px; }

/* ─── Botones y enlaces ─────────────────────────────────────────────
   Tres pesos: el lleno para la acción principal, el de contorno para
   la alternativa y el de texto para lo que casi nunca se pulsa.     */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-height: 51px;
  background: var(--red);
  color: #171011;
  padding: 14px 21px;
  font-size: 12px;
  font-weight: 700;
  transition: background .2s, transform .16s;
  position: relative;
  overflow: hidden;
}

.button .icon { transition: transform .25s var(--out); }

.button:hover:not(:disabled) { background: #ff766b; }

.button:hover .icon { transform: translateX(5px); }

.button--ghost {
  background: transparent;
  color: var(--paper);
  border: 1px solid #625b58;
}

.button--ghost:hover:not(:disabled) { background: #2a2524; }

.button--wide { width: 100%; }

.text-link {
  display: inline-flex;
  gap: 14px;
  align-items: center;
  font-size: 12px;
  padding: 10px 0;
  text-align: left;
}

.text-link:hover { color: var(--red); }

.text-link .icon { width: 18px; }

.fine-print {
  font-size: 10px;
  color: var(--muted);
  line-height: 1.7;
}

/* ─── Las caras ─────────────────────────────────────────────────────
   Cada apartado entra con un fundido corto. Es lo que hace que pasar
   de una cara a otra no parezca una recarga.                        */
.page { padding: 42px var(--pad) 46px; min-height: calc(100svh - 188px); }

.page-heading {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  align-items: flex-end;
  margin-bottom: 36px;
}

.page-heading h1, .club h1, .checkout h1, .confirmation h1 {
  font: 600 clamp(48px, 5.5vw, 88px)/.94 var(--display);
  letter-spacing: -.015em;
  text-transform: uppercase;
}

.page-heading>p {
  font-size: 12px;
  color: var(--muted);
  max-width: 340px;
  padding-bottom: 5px;
}

.page-heading--compact h1 { font-size: clamp(42px, 4.4vw, 68px); }

.view { animation: view-in .48s var(--out); }

@keyframes view-in {
  0% { opacity: .3; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ─── La puerta ─────────────────────────────────────────────────────
   La web empieza cerrada: la fachada a pantalla completa y un botón.
   Al entrar, la foto se acerca ocho veces y se apaga, como si la
   puerta te tragara. Es la única animación larga de toda la web.

   Dura 1,9 s en CSS y el JavaScript la remata por reloj a 1,88 s: no
   espera al aviso de fin de animación. Si el navegador no lo manda, o
   la pestaña se va al fondo a mitad, te quedarías fuera para siempre. */

.entrance {
  position: fixed;
  inset: 34px 0 0;
  z-index: 50;
  background: #050505;
  overflow: hidden;
}

.entrance__photo {
  position: absolute;
  width: 100%;
  height: 100%;
  object-position: 50% 54%;
  transform-origin: 50% 54%;
  will-change: transform;
  transition: transform 1.8s var(--move), filter 1.8s var(--move);
}

.entrance__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, .55), transparent 65%), linear-gradient(0deg, rgba(0, 0, 0, .75), transparent 40%);
  transition: opacity .7s;
}

.entrance__top {
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  top: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.entrance__copy {
  position: absolute;
  left: var(--pad);
  top: 28%;
  pointer-events: none;
}

.entrance__copy p {
  font: 600 clamp(65px, 8.6vw, 144px)/.87 var(--display);
  text-transform: uppercase;
  letter-spacing: -.02em;
}

.enter-button {
  position: absolute;
  left: 50%;
  bottom: 12%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 28px;
  background: var(--paper);
  color: #101011;
  padding: 9px 9px 9px 25px;
  white-space: nowrap;
  font-weight: 600;
}

.enter-button:active:not(:disabled) { transform: translateX(-50%); }

.enter-button__icon {
  background: var(--red);
  padding: 14px;
  transition: transform .3s var(--out);
}

.enter-button:hover .enter-button__icon { transform: translateX(3px); }

.entrance__bottom {
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  bottom: 25px;
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: #d6cdca;
}

.entrance__copy, .entrance__top, .enter-button, .entrance__bottom {
  transition: opacity .28s, filter .3s;
}

.entrance.is-entering .entrance__photo { transform: scale(8); filter: brightness(.28); }

.entrance.is-entering .entrance__copy,
.entrance.is-entering .entrance__top,
.entrance.is-entering .enter-button,
.entrance.is-entering .entrance__bottom {
  opacity: 0;
  pointer-events: none;
  filter: blur(4px);
}

.entrance.is-entering { animation: door-fade 1.9s var(--move); }

@keyframes door-fade {
  0%, 70% { opacity: 1; }
  100% { opacity: 0; }
}

/* ─── Inicio ────────────────────────────────────────────────────────
   La portada es una composición, no el principio de una página larga:
   foto a sangre, el nombre enorme abajo y la próxima noche a la
   derecha, que es lo único que hay que decidir.                     */

.hero {
  position: relative;
  min-height: calc(100svh - 187px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 38px var(--pad) 38px;
  isolation: isolate;
}

.hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -3;
  object-position: 50% 45%;
}

.hero__shade {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(0deg, rgba(7, 6, 7, .92) 0%, rgba(7, 6, 7, .16) 55%, rgba(7, 6, 7, .3)), linear-gradient(90deg, rgba(7, 6, 7, .35), transparent 65%);
}

.hero__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  min-height: 180px;
}

.hero__top>p { font-size: 16px; line-height: 1.5; }

.round-link {
  width: 113px;
  height: 113px;
  border: 1px solid #afa39d;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 7px;
  font-size: 11px;
  line-height: 1.45;
  background: rgba(17, 11, 11, .26);
  transition: background .25s, border-color .25s;
}

.round-link .icon { width: 20px; height: 20px; }

.round-link:hover {
  background: var(--red);
  border-color: var(--red);
  color: #151010;
}

.hero__bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 286px;
  gap: 40px;
  align-items: end;
}

.hero h1 {
  font: 600 clamp(100px, 19vw, 300px)/.8 var(--display);
  letter-spacing: -.02em;
  margin-left: -.015em;
}

.hero__brand>p {
  font-size: 12px;
  letter-spacing: .02em;
  margin-top: 26px;
}

.next-night {
  border-top: 1px solid #978783;
  padding-top: 18px;
  position: relative;
  margin-bottom: 1px;
}

.next-night__date {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  font-size: 10px;
  text-transform: uppercase;
  color: #cbc3bd;
}

.next-night h2 {
  font: 600 34px/1.05 var(--display);
  text-transform: uppercase;
  margin: 19px 0 10px;
}

.next-night>p { font-size: 11px; color: #c2b8b3; }

.ticket-link {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 23px;
  padding: 14px 0;
  border-top: 1px solid #60504d;
  font-size: 12px;
}

.ticket-link b {
  font-weight: 500;
  color: var(--red);
  margin-left: 12px;
}

.ticket-link .icon { transition: transform .25s var(--out); }

.ticket-link:hover .icon { transform: translateX(8px); }

/* ─── Las noches ────────────────────────────────────────────────────
   Un cartel que cambia al lado de una agenda de verdad. El cartel es
   lo que se mira; la lista es lo que se usa.                        */

.night-layout {
  display: grid;
  grid-template-columns: minmax(260px, .9fr) minmax(360px, 1.25fr);
  gap: clamp(30px, 7vw, 110px);
}

.event-poster {
  background: #ce3f32;
  color: #201214;
  min-height: 480px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 30px;
  isolation: isolate;
}

.poster__date { font-size: 12px; font-weight: 700; }

.event-poster h2 {
  font: 600 clamp(65px, 6vw, 105px)/.86 var(--display);
  text-transform: uppercase;
  letter-spacing: -.025em;
  position: relative;
  margin: 45px 0 18px;
  max-width: 8ch;
}

.poster__artists { font-size: 12px; max-width: 25ch; }

.poster__footer {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  border-top: 1px solid #6b2525;
  margin-top: 48px;
  padding-top: 14px;
  font-size: 11px;
  font-weight: 700;
}

/* Los dos aros del cartel son los mismos del techo de la sala. La
   misma forma en el sitio y en el papel. */
.poster__orbit {
  position: absolute;
  width: 460px;
  height: 460px;
  border: 55px solid rgba(39, 18, 26, .85);
  border-radius: 50%;
  top: 0;
  right: -250px;
  z-index: -1;
  transform: rotate(-25deg) scaleX(.65);
}

.poster__orbit--two {
  right: -220px;
  top: 65px;
  border-width: 1px;
  border-color: #ffb3a7;
  transform: rotate(-25deg) scaleX(.65);
}

.event-poster[data-poster="1"] { background: #cfccd2; color: #222126; }

.event-poster[data-poster="1"] .poster__orbit {
  border-color: #38343d;
  transform: rotate(40deg) scaleX(.35);
}

.event-poster[data-poster="2"] { background: #323038; color: #f1e9e5; }

.event-poster[data-poster="2"] .poster__orbit {
  border-color: #f24f43;
  transform: rotate(75deg) scaleX(.5);
}

.event-poster.is-changing { animation: poster-change .38s var(--out); }

@keyframes poster-change {
  0% { clip-path: inset(0 0 95% 0); }
  100% { clip-path: inset(0); }
}

.event-list { border-top: 1px solid var(--line); }

.event-choice {
  width: 100%;
  display: grid;
  grid-template-columns: 63px 1fr 24px;
  align-items: center;
  gap: 20px;
  text-align: left;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  transition: color .2s, padding .3s var(--out);
}

.event-choice:hover { padding-left: 9px; }

.event-choice[aria-pressed=true] { color: var(--red); }

.event-choice__date {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.event-choice__date strong { font: 600 40px/.9 var(--display); }

.event-choice__date small {
  font-size: 9px;
  text-transform: uppercase;
  margin-top: 9px;
}

.event-choice__title {
  font: 600 27px/1.1 var(--display);
  text-transform: uppercase;
  display: block;
}

.event-choice__genre {
  color: var(--muted);
  font-size: 10px;
  margin-top: 5px;
  display: block;
}

.event-detail { padding-top: 24px; }

.event-detail>p {
  max-width: 50ch;
  color: var(--muted);
  font-size: 12px;
}

.event-detail dl {
  display: flex;
  gap: 42px;
  margin: 24px 0 30px;
}

dt { font-size: 10px; color: var(--muted); }

dd { margin: 5px 0 0; font-size: 13px; }

.action-pair {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.event-detail .fine-print { margin-top: 20px; font-size: 10px; }

/* ─── Reservados: el visor y el plano ───────────────────────────────
   La cara que vende la web. Tres piezas que dicen lo mismo de tres
   maneras: la lista con precios, el visor 360° y el plano de la sala.
   Tocar cualquiera de las tres mueve las otras dos.                 */

.reserve-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 32px;
}

.reservation-filters {
  display: grid;
  grid-template-columns: 1fr;
  gap: 13px;
  margin-bottom: 20px;
}

label {
  display: grid;
  gap: 7px;
  font-size: 11px;
  color: var(--muted);
}

input, select {
  width: 100%;
  border: 1px solid #655e5b;
  border-radius: 0;
  padding: 12px;
  background: #1a1819;
  color: var(--paper);
  font-size: 12px;
  min-height: 45px;
  caret-color: var(--red);
}

select { padding-right: 8px; }

.booth-list { border-top: 1px solid var(--line); }

.booth-option {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  text-align: left;
  padding: 20px 10px 20px 0;
  border-bottom: 1px solid var(--line);
  transition: background .2s, padding .2s;
}

.booth-option__number {
  font-size: 10px;
  color: var(--muted);
  border: 1px solid #655e5b;
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 50%;
}

.booth-option strong {
  display: block;
  font: 600 25px/1 var(--display);
  text-transform: uppercase;
}

.booth-option small {
  display: block;
  font-size: 10px;
  color: var(--muted);
  margin-top: 8px;
}

.booth-option__price { font-size: 12px; }

.booth-option[aria-pressed=true] {
  background: #292021;
  padding-left: 10px;
  color: var(--red);
}

.booth-option[aria-pressed=true] .booth-option__number {
  background: var(--red);
  border-color: var(--red);
  color: #101011;
}

.reserve-sidebar>.fine-print { margin-top: 17px; }

/* El visor. `isolation` le da su propia capa de apilado para que los
   mandos floten encima del lienzo sin pelearse con el resto. */
.viewer {
  position: relative;
  height: clamp(330px, 33vw, 530px);
  background: #1c1315;
  overflow: hidden;
  isolation: isolate;
}

/* `touch-action: none` es lo que permite arrastrar con el dedo sin que
   el móvil entienda que quieres desplazar la página. */
.viewer__canvas, .viewer__canvas canvas {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  display: block;
  touch-action: none;
  cursor: grab;
}

.viewer__canvas:active { cursor: grabbing; }

.viewer__top, .viewer__bottom {
  position: absolute;
  left: 20px;
  right: 20px;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
}

.viewer__top { top: 16px; }

.viewer__bottom { bottom: 14px; }

.viewer__top button, .viewer__bottom button { pointer-events: auto; }

.viewer__label {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(12, 10, 10, .85);
  padding: 8px 12px;
  font-size: 11px;
}

.viewer__label>span:last-child { color: #c5b6b1; margin-left: 9px; }

.status-dot {
  width: 5px;
  height: 5px;
  background: var(--red);
  border-radius: 50%;
}

.icon-button {
  height: 37px;
  width: 37px;
  display: grid;
  place-items: center;
  background: rgba(15, 11, 12, .85);
  border: 1px solid #726360;
  transition: background .2s;
}

.icon-button:hover { background: #483033; }

.icon-button .icon { width: 18px; height: 18px; }

/* El cartelito de «arrastra para mirar» se retira solo en cuanto
   arrastras una vez. Un aviso que sigue ahí después de hacerle caso
   deja de ser un aviso. */
.viewer__hint {
  position: absolute;
  bottom: 68px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: 9px;
  align-items: center;
  padding: 9px 15px;
  background: rgba(12, 10, 10, .86);
  white-space: nowrap;
  pointer-events: none;
  font-size: 11px;
  transition: opacity .3s;
}

.viewer__hint.is-dismissed { opacity: 0; }

.viewer__hint .icon { width: 18px; height: 18px; }

.viewer__caption {
  font-size: 9px;
  background: rgba(12, 10, 10, .8);
  padding: 5px 9px;
  max-width: 60%;
}

.view-controls { display: flex; gap: 6px; }

/* Qué se ve mientras carga la sala, y qué se ve si no carga. Lo
   segundo importa más: si el 3D falla hay que poder reservar igual. */
.viewer__loading, .viewer__fallback {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: #1c1517;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
  padding: 35px;
}

.viewer__loading { pointer-events: none; }

.viewer__loading p { color: var(--muted); font-size: 12px; }

.viewer__fallback h2 { font: 600 30px var(--display); }

.viewer__fallback p {
  font-size: 12px;
  max-width: 45ch;
  color: var(--muted);
}

.loader {
  width: 32px;
  height: 32px;
  border: 1px solid #71615b;
  border-top-color: var(--red);
  border-radius: 50%;
  animation: loading .65s linear infinite;
}

@keyframes loading {
  to { transform: rotate(360deg); }
}

.viewer.is-expanded {
  position: fixed;
  inset: 0;
  z-index: 90;
  width: 100%;
  height: 100dvh;
}

.reserve-below {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 25px;
  padding-top: 22px;
}

/* El plano, dibujado con cajas colocadas a mano. No hace falta más: es
   un croquis, y un croquis tiene que leerse de un vistazo. Las
   posiciones de los cuatro puntos son las mismas que las cámaras. */
.floorplan {
  position: relative;
  height: 170px;
  background: #1a181a;
  border: 1px solid #5d5556;
  font-size: 7px;
  color: #b2a7a6;
  overflow: hidden;
}

.floorplan__dj {
  position: absolute;
  left: 35%;
  top: 8px;
  width: 30%;
  text-align: center;
  padding: 5px 0;
  background: #3f2d31;
}

.floorplan__dance {
  position: absolute;
  inset: 43px 48px 40px;
  border: 1px dashed #5e5357;
  display: grid;
  place-items: center;
  letter-spacing: 1px;
}

.floorplan__bar {
  position: absolute;
  right: 4px;
  top: 75px;
  writing-mode: vertical-rl;
}

.floorplan__entry {
  position: absolute;
  bottom: 4px;
  left: 39%;
}

.map-spot {
  position: absolute;
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  background: #392a2d;
  color: var(--paper);
  border: 1px solid #8b7773;
  font-size: 10px;
  border-radius: 50%;
  transition: background .2s;
}

.map-spot[aria-pressed=true] {
  background: var(--red);
  color: #160b0a;
  border-color: var(--red);
}

.map-spot[data-id=pista] { left: 12px; top: 59px; }

.map-spot[data-id=cabina] { right: 12px; top: 31px; }

.map-spot[data-id=lateral] { left: 12px; bottom: 18px; }

.map-spot[data-id=altura] { right: 19px; bottom: 18px; }

/* Lo que cuesta y qué incluye, debajo del sitio que estás mirando. */
.booth-detail {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.booth-detail h2 { font: 600 30px/1 var(--display); text-transform: uppercase; }

.booth-detail p {
  font-size: 11px;
  color: var(--muted);
  margin-top: 9px;
  max-width: 65ch;
}

.booth-detail__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-top: 18px;
}

.booth-price { font: 600 35px/1 var(--display); display: block; }

.booth-included {
  font-size: 9px;
  color: var(--muted);
  display: block;
  margin-top: 5px;
}

.booth-detail .reserve-status {
  color: var(--red);
  font-size: 10px;
  min-height: 16px;
  margin-top: 8px;
}

/* ─── La sala ───────────────────────────────────────────────────────
   Lo práctico (horas, edad, qué incluye un reservado) va en su propia
   cara, para no ensuciar el recorrido de reservar.                  */

.club-layout {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(35px, 7vw, 105px);
}

.club-photo {
  position: relative;
  min-height: 580px;
  overflow: hidden;
}

.club-photo img {
  position: absolute;
  height: 100%;
  object-position: 60%;
}

.club-photo>span {
  position: absolute;
  bottom: 20px;
  left: 20px;
  font-size: 10px;
  background: #151212;
  padding: 6px 10px;
}

.club h1 { font-size: clamp(46px, 4.9vw, 75px); }

.club-copy>p {
  color: var(--muted);
  font-size: 12px;
  max-width: 48ch;
  margin: 25px 0 15px;
}

.club-copy>.text-link { color: var(--red); }

.club-facts {
  display: flex;
  gap: 38px;
  padding: 25px 0;
  margin-top: 15px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.club-facts span {
  display: block;
  font-size: 10px;
  color: var(--muted);
}

.club-facts strong { font: 600 32px/1.3 var(--display); }

.questions { margin-top: 22px; }

.questions details { border-bottom: 1px solid var(--line); }

summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  cursor: pointer;
  padding: 14px 0;
  font-size: 12px;
}

summary::-webkit-details-marker { display: none; }

summary .icon {
  height: 14px;
  width: 14px;
  transition: transform .2s;
}

details[open] summary .icon { transform: rotate(90deg); }

details[open] p { animation: view-in .25s var(--out); }

details p {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.8;
  padding-bottom: 20px;
}

/* ─── El pago ───────────────────────────────────────────────────────
   Un total claro y nada más. En una demo no se piden datos de tarjeta
   ni en broma: el formulario solo tiene un nombre inventado.        */

.checkout>.text-link { margin-bottom: 28px; }

.checkout-layout {
  max-width: 1050px;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: clamp(40px, 8vw, 120px);
  align-items: start;
}

.checkout-form>p {
  margin-top: 22px;
  font-size: 12px;
  color: var(--muted);
}

.checkout form { margin-top: 26px; }

.input-help {
  color: var(--muted);
  font-size: 10px;
  margin: 8px 0 24px;
}

.check-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 11px;
  line-height: 1.7;
  color: var(--paper);
}

.check-row input {
  width: 17px;
  height: 17px;
  min-height: 0;
  margin: 2px 0 0;
  accent-color: var(--red);
  flex-shrink: 0;
}

.form-error {
  font-size: 11px;
  color: #ff8b80;
  min-height: 24px;
  margin: 10px 0;
}

.checkout form>.fine-print { margin-top: 15px; }

.quantity-field {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  padding: 15px 0;
  border-block: 1px solid var(--line);
  font-size: 12px;
}

.stepper {
  display: flex;
  align-items: center;
  gap: 18px;
}

.stepper button {
  width: 37px;
  height: 37px;
  background: var(--panel);
  border: 1px solid #655b58;
  font-size: 19px;
}

.stepper output {
  min-width: 15px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.order-ticket {
  background: #222022;
  border: 1px solid #665b58;
  position: relative;
  margin-top: 5px;
}

.order-ticket__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 27px;
}

.order-ticket .wordmark { font-size: 32px; }

.demo-stamp {
  font-size: 10px;
  color: var(--red);
  border: 1px solid var(--red);
  padding: 2px 9px;
  transform: rotate(-8deg);
}

.order-ticket__body { padding: 7px 27px 25px; }

.order-ticket__body>p:first-child { font-size: 11px; color: var(--muted); }

.order-ticket h2 {
  font: 600 39px/.98 var(--display);
  text-transform: uppercase;
  margin: 12px 0 26px;
}

.order-ticket dl>div {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 8px 0;
}

.order-ticket dt { font-size: 11px; }

.order-ticket dd {
  margin: 0;
  font-size: 11px;
  max-width: 60%;
  text-align: right;
}

.order-ticket__total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 17px 0;
  border-top: 1px solid #655957;
  padding-top: 19px;
  font-size: 11px;
}

.order-ticket__total strong { font: 600 44px/1 var(--display); }

.order-ticket__body>p:last-child {
  font-size: 10px;
  color: var(--muted);
  line-height: 1.75;
}

/* La línea de troquelado del resguardo: una raya de puntos y dos
   medias lunas del color del fondo mordiendo los bordes. */
.order-ticket__tear { border-top: 1px dashed #786a65; position: relative; }

.order-ticket__tear:before, .order-ticket__tear:after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  background: var(--bg);
  border-radius: 50%;
  top: -9px;
}

.order-ticket__tear:before { left: -10px; border-right: 1px solid #665b58; }

.order-ticket__tear:after { right: -10px; border-left: 1px solid #665b58; }

.order-ticket__foot {
  text-align: center;
  font-size: 10px;
  letter-spacing: .08em;
  padding: 20px;
}

/* ─── El pase ───────────────────────────────────────────────────────
   Lo único de toda la web que va en rojo lleno. Es el final del
   recorrido y tiene que notarse que has llegado.                    */
.confirmation-layout {
  display: grid;
  grid-template-columns: 1fr 370px;
  gap: 70px;
  align-items: center;
  max-width: 1020px;
  margin: 25px auto;
}

.success-mark {
  width: 42px;
  height: 42px;
  border: 1px solid var(--red);
  color: var(--red);
  display: grid;
  place-items: center;
  border-radius: 50%;
  margin-bottom: 25px;
}

.confirmation-layout>div>p {
  font-size: 12px;
  color: var(--muted);
  margin: 25px 0 30px;
}

.confirmation .text-link { display: flex; margin-top: 15px; }

.final-pass {
  background: var(--red);
  color: #1d1312;
  padding: 30px;
  transform: rotate(3deg);
  box-shadow: 10px 18px 60px #0005;
  animation: pass-in .7s var(--out);
}

@keyframes pass-in {
  0% { transform: translateY(25px) rotate(-4deg); opacity: .4; }
  100% { transform: translateY(0) rotate(3deg); opacity: 1; }
}

.final-pass__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #6d3029;
  padding-bottom: 25px;
  font-size: 10px;
}

.final-pass h2 {
  font: 600 50px/1 var(--display);
  margin-top: 25px;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.final-pass>p { font-size: 12px; margin: 8px 0 22px; }

.final-pass dl>div {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  border-top: 1px solid #bf4237;
  padding: 8px 0;
}

.final-pass dt { color: #57251f; }

.final-pass dd {
  font-size: 11px;
  margin: 0;
  text-align: right;
  max-width: 62%;
}

/* El código de barras es una franja repetida, no una imagen. No
   codifica nada y no debe: es un adorno, y el pase lo dice dos veces. */
.barcode {
  height: 53px;
  margin: 23px 0 12px;
  background: repeating-linear-gradient(90deg, #231615 0 2px, transparent 2px 5px, #231615 5px 9px, transparent 9px 11px, #231615 11px 12px, transparent 12px 16px, #231615 16px 19px, transparent 19px 24px);
}

.final-pass code { font-size: 12px; letter-spacing: .1em; }

.final-pass .pass-warning {
  font-size: 9px;
  margin: 10px 0 0;
  font-weight: 700;
}

/* Sin JavaScript no hay reservas ni sala, y se dice. */
.no-js {
  position: fixed;
  inset: auto 20px 20px;
  z-index: 100;
  background: var(--paper);
  color: #101011;
  padding: 20px;
}

.no-js a { text-decoration: underline; }

/* ─── Medidas ───────────────────────────────────────────────────────
   De grande a pequeño. En el móvil el visor 360° no se recorta: se
   queda con la altura suficiente para que mirar alrededor siga
   teniendo sentido, que es a lo que se viene.                       */
@media(min-width:1600px) {
  .page { max-width: 1800px; margin: auto; }
  .hero { min-height: calc(100svh - 187px); }
  .hero__top { min-height: 240px; }
}

@media(max-width:1100px) {
  .nav { gap: 22px; }
  .hero__bottom { grid-template-columns: minmax(0, 1fr) 255px; gap: 24px; }
  .hero h1 { font-size: 18vw; }
  .reserve-layout { grid-template-columns: 220px minmax(0, 1fr); gap: 22px; }
  .reserve-below { grid-template-columns: 135px minmax(0, 1fr); gap: 16px; }
  .booth-detail__bottom { align-items: flex-start; flex-direction: column; }
  .floorplan__dance { inset: 43px 40px 40px; }
  .night-layout { gap: 35px; }
  .action-pair { flex-direction: column; }
  .action-pair .button { justify-content: space-between; }
  .club-layout { gap: 35px; }
  .club-facts { gap: 26px; }
}

@media(max-width:760px) {
  .demo {
    font-size: 9px;
    padding: 7px 18px;
    min-height: 41px;
    gap: 16px;
  }
  .demo>span { max-width: 230px; }
  .demo a {
    font-size: 9px;
    text-align: right;
    white-space: normal;
    max-width: 90px;
  }
  .header {
    height: auto;
    min-height: 106px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0;
    padding: 19px 20px 0;
  }
  .header>.wordmark { font-size: 29px; }
  .header__ticket {
    grid-column: 2;
    padding: 7px 12px;
    font-size: 11px;
  }
  .header__ticket .icon { width: 15px; height: 15px; }
  .nav {
    grid-row: 2;
    grid-column: 1/-1;
    width: 100%;
    justify-content: space-between;
    gap: 12px;
    padding-top: 11px;
    font-size: 11px;
  }
  .nav a { padding: 11px 0 13px; }
  .nav__360 { font-size: 8px; margin-left: 1px; }
  .nav a::after { bottom: 5px; }
  .footer {
    flex-wrap: wrap;
    gap: 10px;
    min-height: 85px;
    padding: 17px 20px;
    font-size: 9px;
  }
  .footer>span:nth-child(2) { order: 3; flex-basis: 100%; }
  .footer .text-button { margin-left: auto; font-size: 9px; }
  .footer__divider { margin: 0 6px; }
  .page { padding: 28px 20px 32px; min-height: calc(100svh - 232px); }
  .page-heading { display: block; margin-bottom: 25px; }
  .page-heading>p { margin-top: 17px; font-size: 11px; }
  .page-heading br+p { display: none; }
  .hero { padding: 23px 20px 27px; min-height: calc(100svh - 147px); }
  .hero__top { min-height: 190px; }
  .hero__top>p { font-size: 13px; }
  .round-link {
    width: 91px;
    height: 91px;
    font-size: 10px;
  }
  .hero__bottom { grid-template-columns: 1fr; gap: 30px; }
  .hero h1 { font-size: 28vw; }
  .hero__brand>p { margin-top: 17px; font-size: 11px; }
  .next-night {
    padding-top: 12px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0 15px;
    border-color: #70605c;
  }
  .next-night__date {
    grid-column: 1/-1;
    font-size: 9px;
    margin-bottom: 10px;
  }
  .next-night h2 { margin: 0; font-size: 29px; }
  .next-night>p {
    font-size: 10px;
    margin-top: 5px;
    grid-column: 1;
  }
  .ticket-link {
    grid-column: 2;
    grid-row: 2/4;
    margin: 0;
    padding: 10px 0;
    gap: 17px;
    border: 0;
    font-size: 10px;
  }
  .ticket-link b { display: block; margin: 3px 0 0; }
  .hero__photo { object-position: 59% 45%; }
  .entrance { top: 41px; }
  .entrance__photo { object-position: 50% 54%; }
  .entrance__top { top: 25px; }
  .entrance__top .text-button { font-size: 11px; }
  .entrance__copy { top: 16%; }
  .entrance__copy p { font-size: 22vw; }
  .enter-button { bottom: 15%; }
  .entrance__bottom { font-size: 9px; gap: 30px; }
  .entrance__bottom>span { max-width: 43%; }
  .night-layout { grid-template-columns: 1fr; gap: 22px; }
  .event-poster { min-height: 390px; padding: 25px; }
  .event-poster h2 { font-size: 90px; margin-top: 25px; }
  .poster__footer { margin-top: 25px; }
  .event-choice { padding: 17px 0; }
  .event-choice__title { font-size: 27px; }
  .event-choice__date strong { font-size: 35px; }
  .event-detail dl { gap: 40px; }
  .event-detail .action-pair { flex-direction: row; }
  .event-detail .button { flex-grow: 1; justify-content: space-between; }
  .reserve-layout {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .reservation-filters {
    grid-template-columns: 1.5fr 1fr;
    margin-bottom: 15px;
    gap: 12px;
  }
  .reserve-sidebar>.fine-print { display: none; }
  .booth-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 12px;
  }
  .booth-option {
    padding: 14px 5px 14px 0;
    grid-template-columns: 23px 1fr auto;
    gap: 7px;
  }
  .booth-option__number {
    width: 23px;
    height: 23px;
    font-size: 9px;
  }
  .booth-option strong { font-size: 22px; }
  .booth-option small { font-size: 9px; margin-top: 5px; }
  .booth-option__price { font-size: 10px; }
  .booth-option[aria-pressed=true] { padding-left: 7px; }
  .viewer { height: 360px; margin: 0 -20px; }
  .viewer__top { left: 15px; right: 15px; }
  .viewer__bottom { left: 12px; right: 12px; }
  .viewer__hint { font-size: 10px; bottom: 65px; }
  .viewer__caption { font-size: 8px; max-width: 60%; }
  .reserve-below {
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 16px;
    padding-top: 20px;
  }
  .floorplan { height: 155px; }
  .floorplan__dance { inset: 38px 34px 38px; font-size: 6px; }
  .floorplan__bar { font-size: 6px; }
  .map-spot {
    width: 24px;
    height: 24px;
    font-size: 9px;
  }
  .map-spot[data-id=pista] { left: 6px; }
  .map-spot[data-id=cabina] { right: 6px; }
  .map-spot[data-id=lateral] { left: 6px; }
  .map-spot[data-id=altura] { right: 9px; }
  .booth-detail h2 { font-size: 28px; }
  .booth-detail p { font-size: 10px; }
  .booth-detail__bottom { gap: 14px; margin-top: 14px; }
  .booth-detail .button {
    font-size: 10px;
    gap: 12px;
    padding: 11px 12px;
    min-height: 45px;
    width: 100%;
  }
  .booth-price { font-size: 29px; }
  .booth-included { font-size: 8px; }
  .club-layout { grid-template-columns: 1fr; gap: 30px; }
  .club-photo { min-height: 310px; }
  .club h1 { font-size: 55px; }
  .club-copy>p { max-width: none; }
  .club-facts { gap: 45px; }
  .checkout-layout { grid-template-columns: 1fr; gap: 30px; }
  .checkout .order-ticket { order: -1; }
  .checkout .order-ticket__head { padding: 18px 22px; }
  .order-ticket__body { padding: 0 22px 18px; }
  .order-ticket h2 { font-size: 30px; margin: 9px 0 15px; }
  .order-ticket dl>div { padding: 5px 0; }
  .order-ticket__total { margin: 10px 0; padding-top: 13px; }
  .order-ticket__total strong { font-size: 33px; }
  .order-ticket__foot { padding: 12px; }
  .checkout>.text-link { margin-bottom: 20px; }
  .checkout h1 { font-size: 58px; }
  .confirmation-layout {
    grid-template-columns: 1fr;
    gap: 40px;
    margin: 10px 0;
  }
  .confirmation h1 { font-size: 65px; }
  .final-pass {
    max-width: 360px;
    width: calc(100% - 20px);
    justify-self: center;
    margin-bottom: 15px;
  }
  .confirmation .button { font-size: 11px; gap: 15px; }
  .page-heading--compact h1 { font-size: 46px; }
}

@media(max-width:360px) {
  .nav { gap: 8px; font-size: 10px; }
  .reserve-below { grid-template-columns: 90px minmax(0, 1fr); }
  .floorplan__dance { display: none; }
  .booth-option { grid-template-columns: 1fr auto; }
  .booth-option__number { display: none; }
  .next-night h2 { font-size: 25px; }
  .ticket-link { gap: 8px; }
  .hero__top { min-height: 160px; }
}

.viewer.is-expanded { margin: 0; }

.event-poster { container-type: inline-size; }

.event-poster h2 { font-size: clamp(46px, 21cqw, 100px); max-width: 100%; }

@media(max-width:760px) {
  .booth-detail p, .viewer__hint, .fine-print, .event-choice__genre, .input-help {
    font-size: 11px;
  }
  .page-heading>p, .club-copy>p, .event-detail>p, .checkout-form>p, .check-row, .questions p {
    font-size: 12px;
  }
  .reservation-filters label { font-size: 12px; }
  .reservation-filters select { font-size: 12px; }
  .booth-detail .button { font-size: 11px; }
  .booth-option small { font-size: 10px; }
  .viewer.is-expanded .viewer__caption { max-width: 58%; font-size: 9px; }
}

/* ─── Movimiento reducido ───────────────────────────────────────────
   Quien lo pide se salta la puerta, los viajes de cámara y los
   fundidos. La web entera sigue funcionando igual.                  */
@media(prefers-reduced-motion:reduce) {
  *, *::before, *::after {
    animation-duration: .01ms!important;
    animation-iteration-count: 1!important;
    transition-duration: .01ms!important;
    scroll-behavior: auto!important;
  }
  .entrance.is-entering .entrance__photo { transform: none; }
  .final-pass { transform: none; }
}