/* ═══════════════════════════════════════════════════════════════════════
   MONSAI — Pablo Simón. DJ y productor español en Copenhague.
   Hard techno · schranz · neo rave.

   DE DÓNDE SALE ESTO
   La portada la sostiene SU ilustración: un paisaje alienígena con
   astronautas que él mismo usa como imagen de su mundo. No se ha buscado
   una foto de cabina genérica ni se ha generado nada: esa imagen ya era
   suya, y el agua la convierte en algo que se toca.

   EL COLOR no es «negro con un acento». Es el azul-cian de la cabina en la
   que pincha —el de sus propias fotos de club, luces y humo— bañando la
   página entera, contra el negro de sala. El naranja sale de la hoguera de
   su ilustración y solo aparece donde hay que mirar.

   LA TIPOGRAFÍA es Archivo variable, un solo fichero: ancha y del 900 para
   los titulares (que es lo que hace el ruido) y normal del 400 para leer.
   Ni Cormorant ni sus primos, y ninguna de las cinco de Villalba.
   ═══════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Archivo';
  src: url('fonts/archivo.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  /* OSCURO por defecto: es una web de club, y ahi se vive de noche. */
  --negro: #06070a;          /* negro de sala, no negro puro: respira */
  --negro2: #0c0e14;
  --humo: #171c26;
  --tinta: #eef3f8;
  --gris: #98a4b4;
  --cian: #4fd8ff;           /* el de los focos de su cabina */
  --cian-hondo: #17a8d8;
  --fuego: #ff7a2f;          /* la hoguera de su ilustración */
  --violeta: #7b5cff;
  --onda: 1;                 /* 1 = particulas claras sobre negro */
  --sombra-h1: 0 0 90px rgba(6,7,10,0.9), 0 0 30px rgba(6,7,10,0.8);
  --logo-filtro: none;

  --texto: 'Archivo', system-ui, -apple-system, sans-serif;
  --ancho: 1500px;
  --borde: rgba(238, 243, 248, 0.14);
}

/* ── MODO CLARO ───────────────────────────────────────────────────────
   No es el oscuro con los colores dados la vuelta. El cian de los focos,
   que sobre negro brilla, sobre blanco no se lee: en claro pasa a un azul
   hondo con contraste de verdad. Y la onda del hero se dibuja OSCURA
   sobre claro, restando luz en vez de sumandola (ver onda-hero.js): un
   aditivo sobre fondo blanco no se ve, porque ya no hay luz que sumar. */
[data-tema="claro"] {
  --negro: #f4f7fa;
  --negro2: #e6ebf1;
  --humo: #d9e0e9;
  --tinta: #070b11;
  --gris: #4a5568;           /* medido: 6,7 sobre el fondo */
  /* El cian de los focos sobre blanco daba 4,12 de contraste: con letra
     pequeña en versalitas eso NO se lee. Este da 7,1, y el blanco sobre él
     también, así que sirve igual para texto y para fondo de botón. */
  --cian: #05587a;
  --cian-hondo: #033f59;
  --fuego: #b53c06;
  --violeta: #4429c4;
  --borde: rgba(7, 11, 17, 0.20);
  --onda: 0;                 /* 0 = particulas oscuras sobre claro */
  --sombra-h1: none;
  --logo-filtro: invert(1);  /* su logotipo es blanco: en claro se invierte */
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  background: var(--negro);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 1.02rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-stretch: 118%;
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.03em;
  margin: 0;
  text-transform: uppercase;
}

a { color: inherit; }
img { max-width: 100%; }

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

.salta {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--cian); color: var(--negro); padding: 0.7rem 1.1rem; font-weight: 700;
}
.salta:focus { left: 1rem; top: 1rem; }

/* ── CABECERA ─────────────────────────────────────────────────────── */
.cabecera {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1.1rem clamp(1rem, 3vw, 2.4rem);
  /* nada de barra con fondo: la portada se ve entera por debajo */
  background: linear-gradient(to bottom, color-mix(in srgb, var(--negro) 78%, transparent), transparent);
}
.marca { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; }
.marca img { width: 46px; height: auto; display: block; }
.marca span {
  font-weight: 900; font-stretch: 120%; letter-spacing: 0.06em; font-size: 1.05rem;
}
.menu { display: flex; align-items: center; gap: clamp(0.9rem, 2vw, 1.9rem); }
.menu a {
  /* 24 px de alto minimo: con 22 no se acierta con el dedo */
  display: inline-flex; align-items: center; min-height: 26px; white-space: nowrap;
  text-decoration: none; font-size: 0.86rem; font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--gris);
  transition: color 0.2s ease;
}
.menu a:hover { color: var(--tinta); }
.menu__cta {
  color: var(--negro) !important; background: var(--cian);
  padding: 0.6rem 1.1rem; border-radius: 999px; font-weight: 800;
}
.menu__cta:hover { background: var(--cian-hondo); }

/* ── PORTADA ──────────────────────────────────────────────────────
   Negro de sala y la onda de partículas cruzándolo. Nada más: si la onda
   necesitara una foto detrás para sostenerse, no sería el objeto firma. */
.portada {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--negro);
  isolation: isolate;
}
#onda {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; z-index: 1;
  /* el lienzo no intercepta el ratón: los eventos los coge la sección, así
     los botones de encima siguen siendo pulsables */
  pointer-events: none;
}
/* un halo muy tenue detrás del titular, para que el texto tenga dónde
   apoyarse sin ponerle un velo encima (nada de velos: solo las letras) */
.portada__aura {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(58% 42% at 50% 52%, color-mix(in srgb, var(--cian) 13%, transparent), transparent 70%);
}
.portada__texto {
  position: relative; z-index: 3;
  width: 100%; max-width: var(--ancho);
  margin: 0 auto; padding: 0 clamp(1rem, 3vw, 2.4rem);
  text-align: center;
  display: grid; justify-items: center;
}
.antetitulo {
  margin: 0 0 1.1rem; font-size: clamp(0.72rem, 1.1vw, 0.86rem);
  letter-spacing: 0.34em; text-transform: uppercase; font-weight: 700;
  color: var(--cian);
}
/* media pantalla de ancho: si «se lee bien y ya», es pequeño */
.portada h1 {
  font-size: clamp(4.4rem, 17vw, 17rem);
  letter-spacing: -0.045em;
  margin: 0 0 0.5rem;
  text-shadow: var(--sombra-h1);
}
.portada__linea {
  display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap;
  justify-content: center;
  margin: 0 0 2.2rem; font-size: clamp(0.95rem, 1.5vw, 1.22rem);
  letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600;
}
.portada__linea b { color: var(--cian); font-size: 1.4em; line-height: 1; }
.portada__botones { display: flex; gap: 0.7rem; flex-wrap: wrap; justify-content: center; }

.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0.85rem 1.7rem;
  background: var(--cian); color: var(--negro);
  border: 1px solid var(--cian); border-radius: 999px;
  font-weight: 800; font-size: 0.94rem; letter-spacing: 0.04em;
  text-decoration: none;
  transition: transform 0.18s ease, background 0.2s ease;
}
.boton:hover { background: var(--cian-hondo); color: var(--negro); transform: translateY(-2px); }
.boton--hueco { background: transparent; color: var(--tinta); border-color: var(--borde); }
.boton--hueco:hover { background: rgba(238, 243, 248, 0.08); border-color: var(--tinta); }

.portada__pista {
  position: absolute; z-index: 3; left: 50%; transform: translateX(-50%);
  bottom: clamp(1.8rem, 5vh, 3.4rem); margin: 0;
  font-size: 0.72rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--gris);
  animation: latir 3.4s ease-in-out infinite;
}
@keyframes latir { 0%, 100% { opacity: 0.35 } 50% { opacity: 0.9 } }

@media (max-width: 720px) {
  .portada__pista { display: none; }
  .portada h1 { font-size: clamp(2.6rem, 16.4vw, 7rem); letter-spacing: -0.05em; }
}

/* ═══════════════════════════════════════════════════════════════════════
   EL RESTO DE LA PÁGINA
   Todo va A SANGRE. La única columna con ancho medido es el texto largo,
   que si se estira no se lee. Y cada sección lleva UN OBJETO CONSTRUIDO,
   no un titular con viñetas debajo: las barras de BPM a escala, el hilo
   con los kilómetros entre sus dos ciudades, la onda dibujada de cada
   set, la línea de tiempo con sus fechas de verdad.
   ═══════════════════════════════════════════════════════════════════════ */

#progreso {
  position: fixed; inset: 0 0 auto 0; z-index: 40; height: 2px;
  background: linear-gradient(90deg, var(--cian), var(--violeta) 62%, var(--fuego));
  transform: scaleX(0); transform-origin: 0 50%;
}

.cabecera { transition: background 0.35s ease, backdrop-filter 0.35s ease; }
.cabecera--pegada {
  background: color-mix(in srgb, var(--negro) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--borde);
}
.marca img { height: clamp(46px, 5.2vw, 62px); width: auto; display: block; filter: var(--logo-filtro); }
.idiomas { display: flex; gap: 1px; background: var(--borde); border-radius: 999px; overflow: hidden; }
.idiomas button {
  min-height: 32px; padding: 0.3rem 0.62rem; border: 0; cursor: pointer;
  background: color-mix(in srgb, var(--negro) 72%, transparent); color: var(--gris);
  font: inherit; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em;
  transition: color 0.2s ease, background 0.2s ease;
}
.idiomas button:hover { color: var(--tinta); }
.idiomas button.activo { background: var(--tinta); color: var(--negro); }

.envoltura { width: 100%; max-width: var(--ancho); margin: 0 auto; padding-inline: clamp(1rem, 3vw, 2.4rem); }
main section { padding-block: clamp(4.5rem, 11vw, 9.5rem); }
main section.portada { padding-block: 0; }

.rotulo {
  margin: 0 0 0.9rem; font-size: 0.74rem; font-weight: 800;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--cian);
}
.cabezal { margin-bottom: clamp(2.4rem, 5vw, 4.2rem); }
.cabezal h2 { font-size: clamp(2.6rem, 7.5vw, 6.6rem); white-space: pre-line; }
.grande { font-size: clamp(1.12rem, 1.8vw, 1.5rem); color: var(--tinta); max-width: 32ch; }

/* el revelado sube 34 px y gira medio grado: el fundido de 8 px es el
   revelado por defecto de internet y no cuenta como movimiento */
.sube {
  opacity: 0; transform: translate3d(0, 34px, 0) rotate(0.5deg);
  transition: opacity 0.75s cubic-bezier(.16,1,.3,1), transform 0.75s cubic-bezier(.16,1,.3,1);
}
.sube.dentro { opacity: 1; transform: none; }

/* ── RESIDENCIAS ─────────────────────────────────────────────────────── */
.paises { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(1rem, 3vw, 2.6rem); align-items: center; }
.pais {
  border: 1px solid var(--borde); border-radius: 20px;
  padding: clamp(1.6rem, 3vw, 2.6rem);
  background: linear-gradient(160deg, color-mix(in srgb, var(--cian) 9%, transparent), transparent 55%);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.pais:hover { border-color: color-mix(in srgb, var(--cian) 55%, transparent);
              box-shadow: 0 24px 60px -40px color-mix(in srgb, var(--cian) 70%, transparent); }
.pais__bandera { font-size: 2rem; line-height: 1; }
.pais h3 { font-size: clamp(2rem, 4.5vw, 3.4rem); margin: 0.7rem 0 0.3rem; }
.pais__que { margin: 0 0 1rem; color: var(--cian); font-size: 0.86rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; }
.pais__texto { margin: 0 0 1.2rem; color: var(--gris); max-width: 34ch; }
.pais__enlace {
  display: inline-flex; align-items: center; min-height: 26px;
  color: var(--tinta); font-weight: 700; text-decoration: none;
  border-bottom: 1px solid var(--cian);
}
.pais__enlace:hover { color: var(--cian); }
.paises__hilo { position: relative; display: grid; place-items: center; min-height: 130px; }
.paises__hilo::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px;
  background: linear-gradient(to bottom, transparent, var(--cian), transparent);
}
.paises__km {
  position: relative; background: var(--negro); padding: 0.5rem 0.7rem;
  font-size: 0.78rem; letter-spacing: 0.14em; color: var(--gris); white-space: nowrap;
}
.paises__km b { color: var(--tinta); font-weight: 800; }

/* ── SETS ────────────────────────────────────────────────────────────── */
.lista-sets { list-style: none; margin: 0; padding: 0; }
.set {
  display: grid; grid-template-columns: auto minmax(11rem, 17rem) 1fr auto;
  gap: clamp(1rem, 2.5vw, 2.2rem); align-items: center;
  padding: clamp(1.1rem, 2.4vw, 1.9rem) 0;
  border-top: 1px solid var(--borde);
  transition: background 0.3s ease;
}
.set:last-child { border-bottom: 1px solid var(--borde); }
.set:hover { background: color-mix(in srgb, var(--cian) 8%, transparent); }
.set__n { font-size: 0.8rem; color: var(--gris); font-weight: 800; letter-spacing: 0.14em; }
.set h3 { font-size: clamp(1.15rem, 2.4vw, 1.85rem); }
.set__meta { margin: 0.25rem 0 0; color: var(--gris); font-size: 0.85rem; letter-spacing: 0.06em; }
.set__onda { width: 100%; height: 62px; display: block; }
.set__ir {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 96px; padding: 0.55rem 1.3rem;
  border: 1px solid var(--borde); border-radius: 999px;
  text-decoration: none; font-weight: 800; font-size: 0.84rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.set__ir:hover { background: var(--cian); color: var(--negro); border-color: var(--cian); }

/* ── QUIÉN ES: su retrato a sangre, media pantalla ───────────────────── */
.quien { padding: 0; background: var(--negro2); border-block: 1px solid var(--borde); }
.quien__rejilla { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.quien__foto { position: relative; overflow: hidden; min-height: 62vh; }
.quien__foto img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) contrast(1.12); }
.quien__foto::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 40%, color-mix(in srgb, var(--negro2) 90%, transparent) 100%),
              linear-gradient(0deg, color-mix(in srgb, var(--cian) 20%, transparent), transparent 55%);
}
.quien__texto { padding: clamp(2.4rem, 6vw, 6rem); align-self: center; }
.quien__texto h2 { font-size: clamp(2.6rem, 6vw, 5.4rem); margin-bottom: 1.4rem; }
.quien__texto p { color: var(--gris); max-width: 40ch; }
.cifras { display: flex; flex-wrap: wrap; gap: clamp(1.4rem, 4vw, 3.4rem); margin: 2.4rem 0 0; }
.cifras dt { color: var(--gris); font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase; }
.cifras dd { margin: 0.2rem 0 0; font-size: clamp(2.2rem, 4.5vw, 3.4rem); font-weight: 900; font-stretch: 115%; line-height: 1; }

/* ── TRAYECTORIA ─────────────────────────────────────────────────────── */
.hitos { list-style: none; margin: 0; padding: 0; }
.hito {
  display: grid; grid-template-columns: 5.5rem 1fr auto; gap: clamp(1rem, 3vw, 2.4rem);
  align-items: baseline; padding: clamp(0.9rem, 2vw, 1.5rem) 0;
  border-top: 1px solid var(--borde);
}
.hito__fecha { color: var(--cian); font-weight: 800; font-size: 0.86rem; letter-spacing: 0.1em; }
.hito b { font-size: clamp(1.05rem, 2.2vw, 1.6rem); font-weight: 800; font-stretch: 110%; }
.hito > span:last-child { color: var(--gris); font-size: 0.9rem; text-align: right; }
/* Monegros es lo más gordo que tiene: se ve que es lo más gordo */
.hito--gordo { border-top-color: var(--fuego); }
.hito--gordo b {
  font-size: clamp(1.4rem, 4.2vw, 3.2rem); font-weight: 900; font-stretch: 120%;
  text-transform: uppercase; letter-spacing: -0.02em;
  background: linear-gradient(90deg, var(--fuego), #ffc46b);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hito--gordo .hito__fecha { color: var(--fuego); }

/* ── BOOKING ─────────────────────────────────────────────────────────── */
.booking { background: var(--negro2); border-top: 1px solid var(--borde); }
.booking__caja { text-align: center; display: grid; justify-items: center; gap: 1.3rem; }
.booking h2 { font-size: clamp(2.6rem, 8vw, 7rem); }
.booking .grande { max-width: 38ch; color: var(--gris); }
.booking__vias { display: flex; gap: 0.7rem; flex-wrap: wrap; justify-content: center; }

/* ── PIE ─────────────────────────────────────────────────────────────── */
.pie { position: relative; overflow: hidden; padding-top: clamp(3.5rem, 8vw, 7rem); background: var(--negro); }
.pie__onda { position: absolute; left: 0; right: 0; bottom: -8%; opacity: 0.055; pointer-events: none; }
.pie__onda img { width: 100%; height: auto; display: block; filter: var(--logo-filtro); }
.pie__rejilla {
  position: relative; display: grid; grid-template-columns: 1.4fr 1fr auto;
  gap: clamp(1.6rem, 4vw, 3.4rem); align-items: start;
  padding-bottom: clamp(2.4rem, 5vw, 4rem);
}
.pie__marca img { height: clamp(96px, 12vw, 150px); width: auto; filter: var(--logo-filtro); }
.pie__marca p { margin: 1rem 0 0; color: var(--gris); font-size: 0.84rem; letter-spacing: 0.16em; text-transform: uppercase; }
.pie__redes { display: grid; gap: 0.5rem; align-content: start; }
.pie__redes a {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 34px;
  text-decoration: none; font-size: clamp(1.1rem, 2.4vw, 1.7rem);
  font-weight: 800; font-stretch: 110%; width: fit-content;
  transition: color 0.25s ease, gap 0.25s ease;
}
.pie__redes a:hover { color: var(--cian); gap: 0.9rem; }
.pie__redes span { font-size: 0.7em; color: var(--cian); }
.pie__donde p { margin: 0 0 0.3rem; color: var(--gris); font-size: 0.9rem; letter-spacing: 0.1em; }
.pie__donde b { color: var(--tinta); font-weight: 800; }
.pie__linea {
  position: relative; display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem;
  justify-content: space-between; border-top: 1px solid var(--borde);
  padding-block: 1.3rem clamp(1.6rem, 3vw, 2.6rem);
  color: var(--gris); font-size: 0.78rem;
}
.pie__linea p { margin: 0; }

/* ── PANTALLAS ESTRECHAS ─────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .paises { grid-template-columns: 1fr; }
  .paises__hilo { min-height: 74px; }
  .quien__rejilla { grid-template-columns: 1fr; }
  .quien__foto { min-height: 52vh; }
  .set { grid-template-columns: auto 1fr auto; }
  .set__onda { grid-column: 1 / -1; height: 46px; }
  .pie__rejilla { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .bpm__lista li { grid-template-columns: 1fr auto; }
  .bpm__lista span { grid-column: 2; }
  .hito { grid-template-columns: 4.4rem 1fr; }
  .hito > span:last-child { grid-column: 2; text-align: left; }
  .pie__rejilla { grid-template-columns: 1fr; }
  .idiomas button { padding: 0.3rem 0.5rem; }
}

/* ── BANDERAS ────────────────────────────────────────────────────────
   Dibujadas con CSS, no con emoji: Windows NO tiene glifos para las
   banderas de país y las pinta como dos letras sueltas («ES», «DK»).
   Se vio en la primera captura y ahí murió el emoji. */
.bandera {
  display: inline-block; width: 1.45em; height: 1em; border-radius: 2px;
  vertical-align: -0.14em; flex: none;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.16);
}
.bandera--gorda { width: 2.9em; height: 2em; border-radius: 3px; }
.bandera--es {
  background: linear-gradient(#aa151b 0 25%, #f1bf00 25% 75%, #aa151b 75% 100%);
}
.bandera--dk { position: relative; background: #c8102e; overflow: hidden; }
.bandera--dk::before, .bandera--dk::after {
  content: ''; position: absolute; background: #fff;
}
.bandera--dk::before { left: 0; right: 0; top: 39%; height: 22%; }
.bandera--dk::after { top: 0; bottom: 0; left: 30%; width: 20%; }

/* ── SUELO DE LEGIBILIDAD EN MÓVIL ───────────────────────────────────
   El suelo de calidad encontró 13 textos por debajo de 12 px. Los rótulos
   en versalitas con mucho tracking son los primeros que se caen: preciosos
   en un monitor, ilegibles en un teléfono. */
@media (max-width: 640px) {
  .rotulo, .antetitulo { font-size: 0.82rem; letter-spacing: 0.22em; }
  .bpm__lista span, .bpm__regla, .set__n, .set__meta, .hito__fecha,
  .hito > span:last-child, .pie__marca p, .pie__donde p, .pie__linea,
  .paises__km, .cifras dt, .set__ir, .idiomas button {
    font-size: 0.82rem;
  }
  .cifras dt { letter-spacing: 0.16em; }
  .pie__marca p { letter-spacing: 0.12em; }
}

/* ── La ilustración generada, reaprovechada al fondo del booking ─────
   Era la portada; al pasar el hero a partículas se movió aquí en vez de
   tirarla, porque le da color a la parte final de la página. */
.booking { position: relative; overflow: hidden; }
.booking__fondo { position: absolute; inset: 0; z-index: 0; }
.booking__fondo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: 0.34; filter: saturate(1.1);
}
.booking::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(75% 65% at 50% 50%, color-mix(in srgb, var(--negro) 76%, transparent), color-mix(in srgb, var(--negro) 96%, transparent) 78%),
    linear-gradient(to bottom, var(--negro2), transparent 22%, transparent 78%, var(--negro));
}
.booking__caja { position: relative; z-index: 2; }

/* ── BOTÓN DE TEMA ───────────────────────────────────────────────────
   La web nace oscura, que es donde vive un club. El claro está por si
   alguien la abre de día o desde una oficina. */
.tema {
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--borde); border-radius: 50%;
  background: transparent; color: var(--tinta); cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.tema:hover { border-color: var(--cian); color: var(--cian); }
.tema svg { width: 19px; height: 19px; }
.tema__sol { display: none; }
[data-tema="claro"] .tema__luna { display: none; }
[data-tema="claro"] .tema__sol { display: block; }

/* ── LOGOS DE LAS REDES EN EL PIE ────────────────────────────────────
   Dibujados en SVG con currentColor, así siguen al tema y no hay que
   servir tres PNG ni pedirle nada a ningún tercero. */
.pie__redes a { gap: 0.7rem; }
.pie__icono {
  display: grid; place-items: center;
  width: 1.6em; height: 1.6em; flex: none;
  border: 1px solid var(--borde); border-radius: 50%;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.pie__icono svg { width: 0.92em; height: 0.92em; display: block; }
.pie__redes a:hover .pie__icono {
  background: var(--cian); color: var(--negro); border-color: var(--cian);
}
.pie__redes b { font-size: 0.7em; color: var(--cian); font-weight: 400; }

/* la ilustración pide menos presencia sobre fondo claro */
[data-tema="claro"] .booking__fondo img { opacity: 0.62; filter: saturate(0.9); }
[data-tema="claro"] .booking::after {
  background:
    radial-gradient(78% 68% at 50% 50%, rgba(242,245,248,0.72), rgba(242,245,248,0.93) 80%),
    linear-gradient(to bottom, var(--negro2), transparent 20%, transparent 80%, var(--negro));
}
[data-tema="claro"] .pie__onda { opacity: 0.10; }
[data-tema="claro"] .quien__foto img { filter: grayscale(1) contrast(1.05) brightness(1.06); }

/* la transición de tema, suave pero sin arrastrar toda la página */
body, .cabecera, .pais, .set, .tema, .idiomas button, .pie__icono {
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}

/* En claro los botones de idioma flotaban sobre un fondo casi transparente y
   el gris se caía. Fondo sólido y tinta de verdad. */
[data-tema="claro"] .idiomas { background: rgba(7, 11, 17, 0.22); }
[data-tema="claro"] .idiomas button { background: #fff; color: var(--gris); }
[data-tema="claro"] .idiomas button.activo { background: var(--tinta); color: #fff; }
[data-tema="claro"] .menu a { color: #3d4859; }
[data-tema="claro"] .menu a:hover { color: var(--tinta); }
[data-tema="claro"] .antetitulo,
[data-tema="claro"] .rotulo { color: var(--cian-hondo); }
[data-tema="claro"] .cabecera { border-bottom: 1px solid transparent; }
[data-tema="claro"] .cabecera--pegada { border-bottom-color: var(--borde); }

/* ── EL HERO ES SIEMPRE OSCURO ───────────────────────────────────────
   La onda son partículas que SUMAN luz: eso solo existe sobre negro. En
   claro se intentó restar y, además del apaño técnico, el resultado era
   más flojo. Así que el hero se queda de noche en los dos temas —MONSAI
   en blanco— y el tema manda del resto de la página hacia abajo. */
.portada,
.cabecera:not(.cabecera--pegada) {
  --negro: #06070a;
  --negro2: #0c0e14;
  --tinta: #eef3f8;
  --gris: #9aa6b6;
  --cian: #4fd8ff;
  --cian-hondo: #17a8d8;
  --borde: rgba(238, 243, 248, 0.18);
  --logo-filtro: none;
}
.portada { background: var(--negro); color: var(--tinta); }
.portada h1 { color: #fff; }

/* La cabecera flotando sobre el hero: se veía lavada. Ahora lleva un velo
   oscuro con desenfoque de verdad, y los enlaces en tinta clara. */
.cabecera:not(.cabecera--pegada) {
  background: linear-gradient(to bottom, rgba(6, 7, 10, 0.88), rgba(6, 7, 10, 0.55) 62%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--tinta);
}
.cabecera:not(.cabecera--pegada) .menu a { color: #cfd8e3; }
.cabecera:not(.cabecera--pegada) .menu a:hover { color: #fff; }
.cabecera:not(.cabecera--pegada) .menu a.menu__cta { color: #06070a; }
.cabecera:not(.cabecera--pegada) .idiomas { background: rgba(238, 243, 248, 0.22); }
.cabecera:not(.cabecera--pegada) .idiomas button { background: rgba(6, 7, 10, 0.86); color: #cfd8e3; }
.cabecera:not(.cabecera--pegada) .idiomas button.activo { background: #eef3f8; color: #06070a; }
.cabecera:not(.cabecera--pegada) .marca img { filter: none; }
.cabecera:not(.cabecera--pegada) .tema { color: #eef3f8; border-color: rgba(238, 243, 248, 0.3); }

/* pegada al contenido, vuelve a mandar el tema */
.cabecera--pegada { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
[data-tema="claro"] .cabecera--pegada { box-shadow: 0 1px 0 var(--borde); }

/* ═══════════════════════════════════════════════════════════════════════
   14-SEP-2026 — LA M, LOS SELLOS, LA GALERÍA Y LOS RELEASES
   ═══════════════════════════════════════════════════════════════════════ */

/* ── LA M ────────────────────────────────────────────────────────────
   La onda-M que Monsai se dibujó de logo. Es provisional, pero es la suya.
   Va en SVG con el cian de la marca, así en claro coge el azul hondo. */
.marca { min-height: 44px; }
.marca__m {
  display: block; width: clamp(58px, 5.4vw, 76px); height: auto; overflow: visible;
  fill: none; stroke: var(--cian); stroke-width: 9;
  stroke-linejoin: miter; stroke-miterlimit: 6;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--cian) 45%, transparent))
          drop-shadow(0 0 16px color-mix(in srgb, var(--cian) 22%, transparent));
}
.marca__m--pie { width: clamp(120px, 14vw, 190px); }
.pie__onda svg {
  width: 100%; height: auto; display: block; overflow: visible;
  fill: none; stroke: var(--tinta); stroke-width: 3; stroke-linejoin: miter; stroke-miterlimit: 6;
}

/* ── LOS SELLOS: cada tarjeta con el logo de su promotora ────────────
   La placa es SIEMPRE negra: los logos son metal y blanco, y sobre claro
   se morían. De las dos residencias baja un hilo a la tercera tarjeta. */
.paises { --hueco: clamp(1rem, 3vw, 2.6rem); gap: var(--hueco); }
.pais { padding: 0; overflow: hidden; }
.pais__logo {
  position: relative;
  height: clamp(150px, 15vw, 210px);
  background:
    radial-gradient(70% 95% at 50% 100%, rgba(79, 216, 255, 0.15), transparent 70%),
    #06070a;
  border-bottom: 1px solid var(--borde);
}
.pais__logo picture { display: contents; }
/* absoluta: así los % de alto se miden contra la placa y el logo no se sale */
.pais__logo img {
  position: absolute; inset: 0; margin: auto;
  width: auto; height: auto; max-width: 74%; max-height: 62%;
  object-fit: contain; display: block;
  transition: transform 0.5s cubic-bezier(.16,1,.3,1);
}
.pais:hover .pais__logo img { transform: scale(1.04); }
.pais__logo--alto { height: clamp(230px, 22vw, 310px); }
.pais__logo--alto img { max-height: 84%; }
.pais__cuerpo { padding: clamp(1.4rem, 2.6vw, 2.2rem); }
.pais h3 { font-size: clamp(1.5rem, 3vw, 2.4rem); margin: 0 0 0.5rem; }
.pais h3 .bandera { font-size: 0.62em; margin-right: 0.45em; vertical-align: 0.12em; }
/* ── EL NEÓN ENTRE LAS TRES TARJETAS ─────────────────────────────────
   Tubos en ángulo recto, como un rótulo de neón de club: núcleo casi blanco
   y el resplandor cian alrededor, que respira despacio (5 s, nada parpadea).
   Es CSS sobre la MISMA rejilla que las tarjetas (subgrid): cada tubo nace
   en el centro exacto de la suya, a cualquier ancho de pantalla. */
.paises { align-items: stretch; }
.paises__union {
  --tubo: 3px;
  --neon: #4fd8ff;
  grid-column: 1 / -1;
  display: grid; grid-template-columns: subgrid;
  height: clamp(76px, 8vw, 124px);
  margin-block: calc(var(--hueco) * -1);
  position: relative; z-index: 1; pointer-events: none;
}
.paises__union > span { position: relative; }
.paises__union > span::before,
.paises__union > span::after {
  content: ''; position: absolute;
  background: #dcf7ff;
  border-radius: var(--tubo);
  box-shadow:
    0 0 1px #fff,
    0 0 5px var(--neon),
    0 0 12px var(--neon),
    0 0 26px rgba(79, 216, 255, 0.55),
    0 0 50px rgba(79, 216, 255, 0.25);
  animation: neon-respira 5s ease-in-out infinite;
}
/* bajan de cada tarjeta hasta la mitad */
.union__izq::before, .union__der::before {
  left: calc(50% - var(--tubo) / 2); top: 0;
  width: var(--tubo); height: calc(50% + var(--tubo) / 2);
}
/* y giran en seco hacia el centro */
.union__izq::after { left: calc(50% - var(--tubo) / 2); right: 0; top: calc(50% - var(--tubo) / 2); height: var(--tubo); }
.union__der::after { left: 0; right: calc(50% - var(--tubo) / 2); top: calc(50% - var(--tubo) / 2); height: var(--tubo); }
/* el centro cruza los huecos de la rejilla y baja a la tercera tarjeta */
.union__centro::after { left: calc(var(--hueco) * -1); right: calc(var(--hueco) * -1); top: calc(50% - var(--tubo) / 2); height: var(--tubo); }
.union__centro::before { left: calc(50% - var(--tubo) / 2); top: calc(50% - var(--tubo) / 2); bottom: 0; width: var(--tubo); }
.union__centro b {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  transform: translate(-50%, -50%);
  padding: 0.4rem 0.9rem; white-space: nowrap;
  font-size: 0.74rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
  color: #e9fbff; background: #06070a;
  border: 1.5px solid #a8edff; border-radius: 999px;
  box-shadow: 0 0 8px rgba(79, 216, 255, 0.8), 0 0 24px rgba(79, 216, 255, 0.45), inset 0 0 10px rgba(79, 216, 255, 0.35);
  text-shadow: 0 0 6px rgba(79, 216, 255, 0.9);
}
@keyframes neon-respira { 0%, 100% { opacity: 1; } 50% { opacity: 0.8; } }
.pais--union { grid-column: 1 / -1; justify-self: center; width: min(100%, calc(50% - 4.5rem)); }
[data-tema="claro"] .union__centro b { background: #f4f7fa; color: #033f59; text-shadow: none; }

/* ── GALERÍA: protagonista y laterales ───────────────────────────────── */
.cabezal--fila { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.galeria__flechas { display: flex; align-items: center; gap: 0.8rem; }
.galeria__flecha {
  display: grid; place-items: center; width: 52px; height: 52px; padding: 0;
  border: 1px solid var(--borde); border-radius: 50%;
  background: transparent; color: var(--tinta); cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.galeria__flecha svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.galeria__flecha:hover { background: var(--cian); color: var(--negro); border-color: var(--cian); }
.galeria__contador {
  margin: 0; min-width: 4.8rem; text-align: center;
  font-size: 0.92rem; font-weight: 700; letter-spacing: 0.12em; color: var(--gris);
  font-variant-numeric: tabular-nums;
}
.galeria__contador b { color: var(--tinta); font-weight: 900; }
.galeria__contador span:first-of-type { margin: 0 0.4em; opacity: 0.5; }

.galeria__escena {
  position: relative; overflow: hidden;
  height: 640px;                      /* la ajusta galeria.js */
  touch-action: pan-y;                /* lo vertical es del navegador; lo horizontal, nuestro */
  cursor: grab; user-select: none; -webkit-user-select: none;
}
.galeria__escena:focus-visible { outline-offset: -3px; }
.galeria__escena--arrastre, .galeria__escena--arrastre .galeria__pieza { cursor: grabbing; }
.galeria__pieza {
  position: absolute; left: 50%; top: 50%; margin: 0;
  border: 1px solid var(--borde); border-radius: 18px; overflow: hidden;
  background: #0c0e14; transform-origin: 50% 50%; will-change: transform;
  box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.9);
  cursor: pointer;
  transition: border-color 0.5s ease, box-shadow 0.5s ease;
}
/* las de los lados se apagan según se alejan (--lejos lo pone el motor) */
.galeria__pieza::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: #06070a; opacity: calc(var(--lejos, 1) * 0.58);
}
.galeria__pieza.es-protagonista {
  cursor: grab; border-color: rgba(79, 216, 255, 0.45);
  box-shadow: 0 0 0 1px rgba(79, 216, 255, 0.2), 0 34px 90px -34px rgba(79, 216, 255, 0.38);
}
.galeria__pieza img, .galeria__pieza video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  pointer-events: none; -webkit-user-drag: none;
}
/* mando de audio: botón de silencio + barra de volumen, en una píldora */
.galeria__audio {
  position: absolute; right: 14px; bottom: 14px; z-index: 3;
  display: flex; align-items: center; gap: 0.55rem;
  padding: 4px 16px 4px 4px; border-radius: 999px;
  background: rgba(6, 7, 10, 0.66); border: 1px solid rgba(255, 255, 255, 0.28);
  opacity: 0; visibility: hidden; cursor: default;
  transition: opacity 0.35s ease, visibility 0.35s;
}
.es-protagonista .galeria__audio { opacity: 1; visibility: visible; }
.galeria__sonido {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 50%;
  background: transparent; color: #fff; cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}
.galeria__volumen {
  --lleno: 0%;
  -webkit-appearance: none; appearance: none;
  width: clamp(80px, 9vw, 120px); height: 24px; margin: 0; background: transparent; cursor: pointer;
}
.galeria__volumen::-webkit-slider-runnable-track {
  height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, #4fd8ff var(--lleno), rgba(255, 255, 255, 0.25) var(--lleno));
}
.galeria__volumen::-moz-range-track { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.25); }
.galeria__volumen::-moz-range-progress { height: 4px; border-radius: 4px; background: #4fd8ff; }
.galeria__volumen::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%;
  background: #fff; border: 0; box-shadow: 0 0 0 3px rgba(79, 216, 255, 0.45), 0 0 10px rgba(79, 216, 255, 0.6);
}
.galeria__volumen::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 0;
  box-shadow: 0 0 0 3px rgba(79, 216, 255, 0.45), 0 0 10px rgba(79, 216, 255, 0.6);
}
.galeria__volumen:focus-visible { outline: 2px solid #4fd8ff; outline-offset: 4px; border-radius: 4px; }
.galeria__sonido:hover { border-color: #4fd8ff; transform: scale(1.06); }
.galeria__sonido svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.galeria__sonido svg path:first-child { fill: currentColor; }
.galeria__sonido[aria-pressed="true"] { background: #4fd8ff; color: #06070a; border-color: #4fd8ff; }

/* ── SETS Y RELEASES, MITAD Y MITAD ──────────────────────────────────── */
.sets__mitades {
  --hueco-mitades: clamp(2.5rem, 5vw, 5.5rem);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--hueco-mitades); align-items: start;
}
.mitad { position: relative; min-width: 0; }
.mitad + .mitad::before {
  content: ''; position: absolute; top: 0; bottom: 0;
  left: calc(var(--hueco-mitades) / -2); width: 1px;
  background: linear-gradient(to bottom, transparent, var(--borde) 18%, var(--borde) 82%, transparent);
}
.sets__mitades .cabezal h2 { font-size: clamp(2.2rem, 4.4vw, 4.6rem); }
.sets__mitades .set { grid-template-columns: auto 1fr auto; gap: 0.7rem clamp(0.9rem, 1.6vw, 1.4rem); }
.sets__mitades .set h3 { font-size: clamp(1.1rem, 1.8vw, 1.5rem); }
.sets__mitades .set__onda { grid-column: 1 / -1; grid-row: 2; height: 46px; }
.sets__mitades .set__ir { grid-column: 3; grid-row: 1; }

/* ── MENÚ DEL MÓVIL ──────────────────────────────────────────────────── */
.menu-boton, .menu-movil { display: none; }
html.sin-scroll { overflow: hidden; }

/* ── PIE ─────────────────────────────────────────────────────────────── */
.pie { padding-top: clamp(4rem, 9vw, 7.5rem); border-top: 1px solid var(--borde); isolation: isolate; }
/* la M de fondo, ENTERA y encuadrada ENTRE LAS DOS RAYAS del pie (vive dentro
   de .pie__rejilla): ocupa el 72 % de ese tramo, así al latir (+30 %) no las toca */
.pie__onda {
  position: absolute; left: 0; right: 0; top: 14%; bottom: 14%;
  display: flex; align-items: center; justify-content: center;
  opacity: 0.05; pointer-events: none; z-index: -1;
}
.pie__onda svg {
  width: auto; height: 100%; max-width: 94%; display: block; overflow: visible;
  fill: none; stroke: var(--tinta); stroke-width: 4; stroke-linejoin: miter; stroke-miterlimit: 6;
  transform-origin: 50% 50%;
}
[data-tema="claro"] .pie__onda { opacity: 0.09; }

.pie__arriba {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap;
  padding-bottom: clamp(2.4rem, 5vw, 3.6rem); border-bottom: 1px solid var(--borde);
}
.pie__marca { display: flex; align-items: center; gap: clamp(1.2rem, 3vw, 2.4rem); }
.marca__m--pie { width: clamp(104px, 11vw, 160px); flex: none; }
.pie__marca .pie__nombre {
  margin: 0; color: var(--tinta); text-transform: none; letter-spacing: -0.03em;
  font-size: clamp(2.2rem, 4.8vw, 3.8rem); font-weight: 900; font-stretch: 120%; line-height: 0.9;
}
.pie__marca .pie__lema {
  margin: 0.6rem 0 0; color: var(--cian);
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.26em; text-transform: uppercase;
}
.pie__marca .pie__donde {
  margin: 0.7rem 0 0; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  color: var(--gris); font-size: 0.9rem; font-weight: 600; letter-spacing: 0.08em; text-transform: none;
}
.pie__marca .pie__donde b { color: var(--cian); font-size: 1.2em; line-height: 1; }
.pie__reserva { min-height: 56px; padding-inline: 2.1rem; font-size: 1rem; }

.pie__rejilla {
  position: relative; display: grid; grid-template-columns: 1.15fr 1.15fr 0.7fr;
  gap: clamp(1.6rem, 4vw, 3.4rem); align-items: start;
  padding-block: clamp(2.4rem, 5vw, 3.6rem);
}
.pie__titulo {
  margin: 0 0 0.9rem; color: var(--cian);
  font-size: 0.74rem; font-weight: 800; letter-spacing: 0.3em; text-transform: uppercase;
}
.pie__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.pie__enlace {
  display: flex; align-items: center; gap: 0.9rem; min-height: 54px;
  margin-left: -0.55rem; padding: 0.4rem 0.7rem 0.4rem 0.55rem; border-radius: 14px;
  text-decoration: none; color: var(--tinta);
  transition: background 0.25s ease;
}
.pie__enlace:hover { background: color-mix(in srgb, var(--cian) 9%, transparent); }
.pie__enlace .pie__icono { width: 42px; height: 42px; font-size: 1rem; color: var(--cian); }
.pie__enlace .pie__icono svg { width: 19px; height: 19px; }
.pie__enlace:hover .pie__icono { background: var(--cian); color: var(--negro); border-color: var(--cian); }
.pie__texto { display: grid; flex: 1; min-width: 0; }
.pie__texto b { font-weight: 800; font-size: 1rem; line-height: 1.25; color: var(--tinta); }
.pie__texto small { color: var(--gris); font-size: 0.84rem; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pie__flecha { color: var(--gris); transition: transform 0.2s ease, color 0.2s ease; }
.pie__enlace:hover .pie__flecha { color: var(--cian); transform: translate(2px, -2px); }
.pie__seccion {
  display: inline-flex; align-items: center; min-height: 42px;
  text-decoration: none; color: var(--tinta);
  font-size: clamp(1.05rem, 1.6vw, 1.35rem); font-weight: 900; font-stretch: 115%;
  text-transform: uppercase; letter-spacing: -0.01em;
  transition: color 0.2s ease, transform 0.25s cubic-bezier(.16,1,.3,1);
}
.pie__seccion:hover { color: var(--cian); transform: translateX(5px); }

/* ── PANTALLAS ESTRECHAS de todo lo de arriba ────────────────────────── */
@media (max-width: 1000px) {
  .paises__union { display: block; height: 84px; }
  .union__izq, .union__der { display: none; }
  .paises__union > .union__centro { position: absolute; inset: 0; }
  .union__centro::after { display: none; }
  .union__centro::before { top: 0; }
  .pais--union { width: 100%; }
  .pie__rejilla { grid-template-columns: 1fr 1fr; }
  .pie__col--web { grid-column: 1 / -1; }
  .pie__col--web ul { grid-template-columns: repeat(3, auto); justify-content: start; column-gap: 2rem; }
}
@media (max-width: 900px) {
  .sets__mitades { grid-template-columns: 1fr; }
  .mitad + .mitad::before { display: none; }
}
/* Los enlaces de la cabecera dejan de caber bastante antes de 720: en espanol
   son «EN DIRECTO», «QUIEN ES» y «DESCARGAS», y con seis se partian a media
   palabra y el boton de contratar se salia por la derecha. Por debajo de 1080
   manda el menu de hamburguesa, que ya estaba hecho. */
@media (max-width: 1080px) {
  .menu a:not(.menu__cta) { display: none; }
  .menu .menu__cta { display: none; }
  .menu-boton {
    display: grid; place-content: center; gap: 6px; flex: none;
    width: 44px; height: 44px; padding: 0;
    border: 1px solid rgba(238, 243, 248, 0.3); border-radius: 50%;
    background: transparent; color: var(--tinta); cursor: pointer;
  }
  .menu-boton span {
    display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor;
    transition: transform 0.4s cubic-bezier(.16,1,.3,1);
  }
  .menu-boton[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
  .menu-boton[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

  .cabecera.cabecera--menu {
    --negro: #06070a; --tinta: #eef3f8; --gris: #9aa6b6; --cian: #4fd8ff; --borde: rgba(238, 243, 248, 0.18);
    background: #06070a; backdrop-filter: none; -webkit-backdrop-filter: none; color: #eef3f8;
  }
  .menu-movil {
    display: flex; flex-direction: column; gap: 1.6rem;
    position: fixed; left: 0; right: 0; bottom: 0; top: var(--alto-cabecera, 76px); z-index: 19;
    padding: 0.6rem 1.25rem calc(1.6rem + env(safe-area-inset-bottom));
    overflow-y: auto; overscroll-behavior: contain;
    background: #06070a; color: #eef3f8;
    opacity: 0; transform: translateY(-12px);
    transition: opacity 0.35s ease, transform 0.5s cubic-bezier(.16,1,.3,1);
  }
  .menu-movil[hidden] { display: none; }
  .menu-movil.abierto { opacity: 1; transform: none; }
  .menu-movil__lista { list-style: none; margin: 0; padding: 0; }
  .menu-movil__lista li {
    opacity: 0; transform: translateY(14px);
    transition: opacity 0.45s ease, transform 0.6s cubic-bezier(.16,1,.3,1);
  }
  .menu-movil.abierto li { opacity: 1; transform: none; }
  .menu-movil.abierto li:nth-child(2) { transition-delay: 0.05s; }
  .menu-movil.abierto li:nth-child(3) { transition-delay: 0.1s; }
  .menu-movil.abierto li:nth-child(4) { transition-delay: 0.15s; }
  .menu-movil.abierto li:nth-child(5) { transition-delay: 0.2s; }
  .menu-movil.abierto li:nth-child(6) { transition-delay: 0.25s; }
  .menu-movil__lista a {
    display: flex; align-items: baseline; gap: 1rem; padding: 0.95rem 0;
    border-bottom: 1px solid rgba(238, 243, 248, 0.12);
    text-decoration: none; color: #eef3f8;
  }
  .menu-movil__lista a:active .menu-movil__txt { color: #4fd8ff; }
  .menu-movil__n { font-size: 0.82rem; font-weight: 800; letter-spacing: 0.14em; color: #4fd8ff; }
  .menu-movil__txt {
    font-size: clamp(2rem, 10.5vw, 2.9rem); font-weight: 900; font-stretch: 118%;
    text-transform: uppercase; letter-spacing: -0.02em; line-height: 1;
  }
  .menu-movil__cta { min-height: 56px; font-size: 1.02rem; background: #4fd8ff; border-color: #4fd8ff; color: #06070a; }
  .menu-movil__redes { display: flex; justify-content: center; gap: 0.9rem; }
  .menu-movil__redes a {
    display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%;
    border: 1px solid rgba(238, 243, 248, 0.2); color: #4fd8ff;
  }
  .menu-movil__redes svg { width: 20px; height: 20px; display: block; }
}
@media (max-width: 640px) {
  .galeria__flecha { width: 46px; height: 46px; }
  .galeria__flechas { gap: 0.5rem; }
  .pie__arriba { flex-direction: column; align-items: stretch; }
  .pie__reserva { width: 100%; }
  .pie__rejilla { grid-template-columns: 1fr; }
  .pie__col--web ul { grid-template-columns: 1fr 1fr; }
  .pie__titulo { font-size: 0.82rem; letter-spacing: 0.22em; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PÁGINA DE ENLACES (/links/) — la del «link in bio» de Instagram
   Siempre de noche: es lo que se abre desde el móvil a la salida de un club.
   La foto va DEBAJO de la portada, sin tocarla, y fundida por los cuatro
   lados: así no se ve nunca el recuadro de la imagen.
   ═══════════════════════════════════════════════════════════════════════ */
.pagina-enlaces {
  --negro: #06070a; --negro2: #0c0e14; --humo: #171c26; --tinta: #eef3f8;
  --gris: #9aa6b6; --cian: #4fd8ff; --cian-hondo: #17a8d8;
  --borde: rgba(238, 243, 248, 0.14); --logo-filtro: none;
  background: var(--negro); color: var(--tinta);
}
.pagina-enlaces .cabecera--pegada { background: rgba(6, 7, 10, 0.88); box-shadow: none; }
.pagina-enlaces .menu a:not(.menu__cta) { display: inline-flex; }

/* El pie de /links/ no lleva columnas de enlaces: la pagina entera ES la lista,
   y repetirla abajo era redundante. Queda la linea legal, centrada, colgando de
   la raya de arriba del pie — sin la suya propia, que harian dos rayas juntas. */
.pie--min { padding-top: 0; }
.pie--min .pie__linea {
  border-top: 0; justify-content: center; text-align: center;
  gap: 0.35rem 1.6rem; padding-block: clamp(1.7rem, 4vw, 2.6rem);
}

.portada--enlaces { min-height: clamp(400px, 64svh, 680px); }
.portada--enlaces .portada__texto { padding-top: 3.5rem; }
.portada__m { width: clamp(84px, 9vw, 116px); margin: 0 auto 1.3rem; }
.portada--enlaces h1 { font-size: clamp(3.6rem, 15vw, 9.5rem); }
.portada--enlaces .portada__linea { margin-bottom: 0; }

main section.enlaces { position: relative; isolation: isolate; padding-block: 24px clamp(4rem, 9vw, 7rem); }
.enlaces__retrato {
  position: absolute; z-index: -1; top: 24px;
  left: 50%; transform: translateX(-50%);
  width: min(96vw, 470px); aspect-ratio: 2 / 3;
  background: url('../img/retrato.webp') center / 100% 100% no-repeat;
  opacity: 0.42; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 44%, #000 40%, transparent 100%);
          mask-image: radial-gradient(ellipse 50% 50% at 50% 44%, #000 40%, transparent 100%);
}
@media (min-width: 900px) {
  .enlaces__retrato { left: calc(50% - 25rem); transform: translateX(-50%); opacity: 0.38; }
}
.enlaces__lista {
  position: relative; list-style: none; margin: 0 auto; padding: 0;
  width: min(100% - 2rem, 34rem); display: grid; gap: 0.75rem;
}
.enlace {
  display: flex; align-items: center; gap: 1rem;
  min-height: 64px; padding: 0.75rem 1.1rem 0.75rem 0.8rem;
  border: 1px solid var(--borde); border-radius: 16px;
  background: rgba(255, 255, 255, 0.025);
  text-decoration: none; color: var(--tinta);
  transition: border-color 0.2s ease, box-shadow 0.25s ease, transform 0.2s ease, background 0.2s ease;
}
.enlace:hover {
  border-color: var(--cian); transform: translateY(-2px);
  background: rgba(79, 216, 255, 0.07);
  box-shadow: 0 0 28px rgba(79, 216, 255, 0.2);
}
.enlace__icono {
  display: grid; place-items: center; flex: none;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--borde); color: var(--cian);
}
.enlace__icono svg { width: 20px; height: 20px; display: block; }
.enlace__texto { flex: 1; min-width: 0; display: grid; gap: 0.1rem; }
.enlace__texto b { font-weight: 800; font-size: 1.02rem; letter-spacing: 0.01em; line-height: 1.25; }
.enlace__texto small { color: var(--gris); font-size: 0.86rem; line-height: 1.3; }
.enlace__flecha { color: var(--gris); font-size: 1.1rem; transition: transform 0.2s ease, color 0.2s ease; }
.enlace:hover .enlace__flecha { color: var(--cian); transform: translate(2px, -2px); }

.enlace--descarga {
  background: linear-gradient(135deg, #4fd8ff, #17a8d8); color: #04121a; border-color: transparent;
  box-shadow: 0 0 34px rgba(79, 216, 255, 0.3);
}
.enlace--descarga:hover { background: linear-gradient(135deg, #6fe0ff, #22b4e4); box-shadow: 0 0 44px rgba(79, 216, 255, 0.42); }
.enlace--descarga .enlace__icono { color: #04121a; border-color: rgba(4, 18, 26, 0.35); }
.enlace--descarga .enlace__texto small, .enlace--descarga .enlace__flecha { color: rgba(4, 18, 26, 0.72); }

.enlaces__web { margin: 1.6rem auto 0; text-align: center; }
.enlaces__web a { display: inline-flex; align-items: center; min-height: 44px; color: var(--gris); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.82rem; text-decoration: none; border-bottom: 1px solid transparent; }
.enlaces__web a:hover { color: var(--cian); border-bottom-color: var(--cian); }
.pie--enlaces { padding-top: 0; }

/* móvil estrecho: la M + idiomas + tema + botón se salían 20 px por la derecha en 390 px */
@media (max-width: 480px) {
  .cabecera { gap: 0.5rem; padding-inline: 0.9rem; }
  .marca__m { width: 46px; }
  .menu { gap: 0.55rem; }
  .menu__cta { padding: 0.55rem 0.8rem; letter-spacing: 0.08em; }
  .tema { width: 38px; height: 38px; }
}