/* ═══════════════════════════════════════════════════════════════════════
   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;
  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) {
  .menu a:not(.menu__cta) { display: none; }
  .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); }