/* ============================================================================
   MISS LU — main.css · Estilo "VIUZ" (aprobado por cliente)
   Negro + ROJO primario + AZUL eléctrico SECUNDARIO (solo relleno/glow/glitch,
   nunca texto — el rojo es el único acento de TEXTO). Tipografía: Jost fina y
   ancha (aire «EUFONÍA») + Space Mono técnico. Mobile-first. 3 breakpoints.
   NOTA: el uso de azul es una desviación de §4 (acento único) autorizada por el
   cliente el 2026-08-07 tras ver muestras reales.
   ========================================================================== */

@font-face{font-family:Jost;src:url(../fonts/jost-200.woff2) format('woff2');font-weight:200;font-display:swap}
@font-face{font-family:Jost;src:url(../fonts/jost-300.woff2) format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:Jost;src:url(../fonts/jost-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Space Mono';src:url(../fonts/spacemono-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Space Mono';src:url(../fonts/spacemono-700.woff2) format('woff2');font-weight:700;font-display:swap}

:root{
  --bg:#070506;           /* negro casi puro, pizca de rojo */
  --bg-2:#0E0B0C;
  --warm:#F4ECEA;         /* 16.9:1 sobre bg (AAA) */
  --grey:#8A8081;         /* 5.14:1 (AA) */
  --red:#D31E28;          /* acento PRIMARIO — rellenos/botones/display (blanco encima 4.52:1).
                             Como TEXTO sobre --bg da 3.86:1 → NO usar para texto. */
  --red-text:#EA3B46;     /* mismo rojo, +luminosidad. Medido: 5.04:1 sobre --bg y 4.86:1
                             sobre --bg-2 (las tarjetas). Solo texto. */
  --red-ink:#FFFFFF;
  --blue:#3345FF;         /* SECUNDARIO — solo relleno/glow/glitch, NUNCA texto */
  --line:#241D1F;
  --field-line:#77605F;  /* borde de campos de formulario. 3.38:1 contra la tarjeta y
                            3.51:1 contra el propio campo: WCAG 1.4.11 por los dos lados.
                            Con --line (1.19:1) los campos no se veían. */

  --f-display:Jost, system-ui, sans-serif;   /* fina y ancha */
  --f-mono:'Space Mono', ui-monospace, monospace;
  --f-body:system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2.5rem; --s5:4rem; --s6:6rem; --s7:9rem;

  --t-hero:clamp(3.5rem, 13vw, 9rem);
  --t-h2:clamp(2rem, 6vw, 4rem);
  --t-lead:clamp(1.05rem, 1.2rem + .6vw, 1.4rem);
  --t-body:1.0625rem;
  --t-mono:.8rem;

  --wrap:1160px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{margin:0;box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
/* Scroll suave solo tras la primera interacción (ver main.js): el salto
   inicial a un #ancla tiene que ser instantáneo, no un viaje animado. */
@media (prefers-reduced-motion:no-preference){ html.ready{scroll-behavior:smooth} }
/* Fondo con tonos entre el rojo y el azul eléctrico: quita la planitud del negro
   sin competir con las fotos. Fijo al viewport, así se comporta como luz de sala
   y no como una textura que baja con el scroll.
   OJO — verify.mjs lee el contraste del background-COLOR, no de los degradados,
   así que aquí no lo detectaría. Medido a mano en el peor caso (las dos capas
   solapadas al máximo, fondo resultante #1e0e22):
     --warm 15.84:1 · --grey 4.82:1 · --red-text 4.58:1 — todo sigue sobre 4.5.
   Subir las alfas por encima de 0.10 tumba --red-text (a 0.12 da 4.46). */
body{background-color:var(--bg);color:var(--warm);font-family:var(--f-body);
  background-image:
    radial-gradient(80vmax 70vmax at 8% 4%, #D31E2817, transparent 65%),
    radial-gradient(70vmax 70vmax at 96% 40%, #3345FF14, transparent 62%),
    radial-gradient(85vmax 60vmax at 24% 92%, #D31E2812, transparent 66%);
  background-attachment:fixed;background-repeat:no-repeat;
  font-size:var(--t-body);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none;padding:0}
/* Display fina y ancha (el rasgo «EUFONÍA») */
h1,h2,h3{font-family:var(--f-display);font-weight:200;line-height:1;
  letter-spacing:.12em;text-transform:uppercase;text-wrap:balance}
h2{font-weight:300;letter-spacing:.1em}
strong{color:var(--warm);font-weight:700}
em{font-style:normal;color:var(--red-text);font-weight:700}

:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:2px}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--red);
  color:var(--red-ink);padding:.7rem 1.1rem;font-weight:700}
.skip-link:focus{left:0}

/* E3 · Transición entre páginas (landing ↔ legales). Los navegadores que no la
   soportan ignoran la regla y navegan igual. */
@view-transition{navigation:auto}

/* E2 · Barra de progreso de scroll. 0 JS: sin animation-timeline se queda en
   scaleX(0), es decir invisible, nunca a medias. */
body::before{content:"";position:fixed;inset:0 0 auto;height:3px;z-index:150;
  background:linear-gradient(90deg,var(--red),var(--blue));
  transform:scaleX(0);transform-origin:0 50%}
@supports (animation-timeline:scroll()){
  body::before{animation:scroll-progress linear;animation-timeline:scroll(root)}
}
@keyframes scroll-progress{to{transform:scaleX(1)}}

/* Grano de película (global) */
.grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Reveal on scroll (§8.1). Ocultar SOLO con JS activo; la regla que revela
   (0,3,1) supera a la que oculta (0,2,1) → nunca se queda en negro por especificidad. */
html:not(.no-js) [data-reveal]{opacity:0;transform:translateY(20px)}
html:not(.no-js) [data-reveal].is-visible{opacity:1;transform:none;
  transition:opacity .6s var(--ease), transform .6s var(--ease)}
html.no-js [data-reveal]{opacity:1;transform:none}

/* Utilidades */
.overline{font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:.22em;
  color:var(--red-text);text-transform:uppercase;font-weight:700}
.prose{max-width:60ch;color:var(--warm)}
.prose p + p{margin-top:var(--s3)}
.sec__note{margin-top:var(--s3);font-family:var(--f-mono);font-size:.78rem;
  color:var(--grey);letter-spacing:.03em;max-width:52ch}

/* Botones */
.btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--f-mono);
  font-weight:700;font-size:.85rem;letter-spacing:.05em;text-transform:uppercase;
  padding:.85rem 1.2rem;border:1px solid var(--line);border-radius:9px;
  transition:transform .15s var(--ease),box-shadow .2s,background .2s,border-color .2s,color .2s;
  cursor:pointer;line-height:1}
.btn--accent{background:var(--red);color:var(--red-ink);border-color:var(--red)}
.btn--ghost{background:transparent;color:var(--warm)}
.btn--lg{padding:1rem 1.5rem;font-size:.92rem}
@media (hover:hover){
  .btn--accent:hover{transform:translateY(-2px);box-shadow:0 0 0 1px var(--blue),6px 6px 0 -1px var(--blue)}
  .btn--ghost:hover{border-color:var(--warm)}
}

/* Header / Nav */
.hdr{position:sticky;top:0;z-index:100;
  background:color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{max-width:var(--wrap);margin:0 auto;display:flex;align-items:center;gap:var(--s3);padding:var(--s2) var(--s3)}
.brand{font-family:var(--f-display);font-weight:300;text-transform:uppercase;letter-spacing:.14em;font-size:1.15rem}
.nav__list{display:none;gap:var(--s3);margin-left:auto;font-family:var(--f-mono);
  font-size:.78rem;letter-spacing:.06em;text-transform:uppercase}
/* padding vertical: el texto mide 19px de alto y el mínimo táctil son 24px */
.nav__list a{color:var(--grey);transition:color .2s;display:inline-block;padding:.25rem 0}
.nav__list a:hover{color:var(--warm)}
.nav__n{color:var(--red-text);margin-right:.35em}
.nav__cta{margin-left:auto}

/* ---------- HERO estilo VIUZ ---------- */
.hero{position:relative;min-height:92svh;overflow:hidden}
.hero__media{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero__img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;filter:grayscale(.08) contrast(1.07) saturate(1.05)}
@supports (animation-timeline:scroll()){
  .hero__img{height:112%;animation:hero-para linear;animation-timeline:scroll(root);animation-range:0 92vh}
}
@keyframes hero-para{to{transform:translateY(8%) scale(1.05)}}
.hero__wash{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,#070506cc,transparent 32%,#070506ee 78%,var(--bg)),
    linear-gradient(90deg,#3345ff1f,transparent 42%,#d31e281a 62%),
    repeating-linear-gradient(0deg,#d31e2810 0 2px,transparent 2px 7px)}
.hero__grid{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:100% clamp(60px,10vh,92px), clamp(60px,10vw,92px) 100%}
.hero__glitch{position:absolute;left:0;right:0;top:46%;z-index:1;height:10px;opacity:.8;filter:blur(.4px);
  background:linear-gradient(90deg,transparent,var(--blue),var(--red),transparent)}
/* Antes eran tres filas (cabecera, cuerpo, pie). Al quitar los rótulos solo
   queda el cuerpo, así que se centra sin más. */
/* Scrim del texto. Medido sin él: --grey sobre la piel de la foto daba 1,01:1 a
   390px (texto y fondo con la MISMA luminancia: «Medellín» era invisible), el
   claim 2,01:1 y el titular blanco 1,66:1. El --wash de abajo no llega: a la
   altura de la meta (55 % del hero) ya está casi transparente.
   Va a sangre sobre .hero__ui, NO en una caja detrás del texto: un radial
   metido en un ::before con inset se corta contra su propia caja y deja un
   rectángulo oscuro de bordes rectos flotando sobre la foto. Se vio en la
   captura con el contraste ya en verde — por eso se miran las dos cosas. */
.hero__ui{position:absolute;inset:0;z-index:2;display:grid;align-content:center;
  padding:calc(var(--s4) + env(safe-area-inset-top)) var(--s3) var(--s4);
  /* móvil: el texto ocupa todo el ancho, así que la banda es horizontal */
  background:linear-gradient(180deg,transparent 8%,#070506e6 28%,#070506e6 82%,transparent 98%)}
.hero__body{align-self:center;max-width:var(--wrap);width:100%;margin:0 auto}
.hero__title{font-size:var(--t-hero);letter-spacing:.1em;color:#fff;margin-bottom:var(--s3);
  padding-top:.08em}
.hero__title b{font-weight:500}
.hero__claim{font-family:var(--f-mono);font-weight:700;font-size:clamp(.85rem,2.2vw,1rem);
  letter-spacing:.06em;text-transform:uppercase;max-width:40ch;color:var(--warm)}
.hero__meta{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);margin:var(--s3) 0;
  font-family:var(--f-mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
.hero__meta li + li::before{content:"/";margin-right:var(--s3);color:var(--red-text)}
.hero__meta a{display:inline-block;padding:.25rem 0}
.hero__meta a:hover{color:var(--warm)}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}

/* Secciones */
.sec{max-width:var(--wrap);margin:0 auto;padding:var(--s6) var(--s3)}
.sec__head{margin-bottom:var(--s4)}
.sec__head .overline{display:block;margin-bottom:var(--s2)}
.sec__title{font-size:var(--t-h2);overflow-wrap:break-word}

/* Páginas simples (legales, 404). No usan .sec: en ≥900px .sec es un grid de dos
   columnas pensado para la landing y aquí solo hace falta caja, aire y ritmo. */
.page{max-width:var(--wrap);margin:0 auto;padding:var(--s5) var(--s3)}
.page h1{font-size:var(--t-h2);margin:var(--s2) 0 var(--s4)}
.page .overline a{display:inline-block;padding:.25rem 0}   /* mínimo táctil 24px */
.page__actions{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}

/* Música / release · la ficha del single y las plataformas son una sola tarjeta.
   El mismo filo de color que el formulario y el estado vacío de la agenda. */
.release{border:1px solid var(--line);border-radius:14px;padding:var(--s3);background:var(--bg-2);
  position:relative;overflow:hidden}
.release::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--blue),var(--red),transparent)}
/* Texto de entrada, no párrafo de cuerpo: la tarjeta tiene una sola frase y a
   tamaño normal se veía perdida en la caja. */
.release__lead{font-size:var(--t-lead);line-height:1.45;max-width:44ch;color:var(--warm);
  margin-top:var(--s1)}   /* ya no hay línea de meta encima */
.release__label{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--grey);margin-top:var(--s4)}

/* Acceso directo a la música. Listado con filas y filetes, no rejilla de
   botones: cuatro cajas con borde y esquinas redondeadas se leían como un menú
   de navegación. Así se lee como lo que es, dónde está publicada la música. */
.music-links{margin-top:var(--s1);border-top:1px solid var(--line)}
.music-links a{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);
  min-height:58px;padding:var(--s2) var(--s1);border-bottom:1px solid var(--line);
  transition:background .2s;flex-wrap:wrap}
/* El desplazamiento al pasar el ratón va en transform, no en padding: animar
   padding recalcula el layout en cada fotograma. Y va en el nombre, no en la
   fila entera, para que el filete de abajo no se mueva con él. */
.music-links__p{display:flex;align-items:center;gap:.7em;
  font-family:var(--f-display);font-weight:300;text-transform:uppercase;
  letter-spacing:.09em;font-size:1.2rem;line-height:1.1;
  transition:transform .2s var(--ease)}
/* Marcas en monocromo (currentColor): a todo color chocarían con la paleta y
   convertirían el listado en un semáforo. SVG en línea, cero peticiones. */
.music-links__i{flex:0 0 auto;width:1.15em;height:1.15em;opacity:.85}
.music-links__go{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--red-text);white-space:nowrap}
@media (hover:hover){
  /* La fila se ilumina y entra un poco: el filete rojo marca cuál está activa. */
  .music-links a:hover{background:linear-gradient(90deg,#d31e2812,transparent 60%);
    box-shadow:inset 2px 0 0 var(--red)}
  .music-links a:hover .music-links__p{transform:translateX(8px)}
}

/* Vídeos */
/* Una sola columna en todos los anchos: a dos columnas cada vídeo se quedaba
   en ~340px de ancho en escritorio, demasiado pequeño para ver una cabina. */
.videos{display:grid;grid-template-columns:1fr;gap:var(--s4)}
.video{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#000}
.video video{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover;background:#000}
.video__cap{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--grey);padding:var(--s2) var(--s3)}

/* Agenda */
.dates{display:grid;gap:var(--s2)}
.date{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--s3);
  border-bottom:1px solid var(--line);padding:var(--s3) 0}
.date time{display:flex;flex-direction:column;font-family:var(--f-mono);line-height:1}
.date__d{font-size:1.6rem;font-weight:700}
.date__m{color:var(--red-text);letter-spacing:.1em}
.empty{border:1px solid var(--line);border-radius:14px;padding:var(--s5) var(--s4);text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:var(--s3);background:var(--bg-2);position:relative;overflow:hidden}
.empty::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--blue),var(--red),transparent)}
.empty__msg{font-family:var(--f-display);font-weight:300;text-transform:uppercase;
  font-size:clamp(1.3rem,4.5vw,2.2rem);line-height:1.15;letter-spacing:.06em}

/* Galería · E4 duotono rojo → color al entrar en pantalla.
   El estado inicial en gris solo existe con JS: sin él (o sin .is-visible nunca)
   la foto se ve a color desde el principio. */
/* Móvil: una columna, cada foto con su proporción real. Sin recortes y sin
   miniaturas de 170px, que es lo que salía al forzar dos columnas a 360px. */
.gallery{display:grid;grid-template-columns:1fr;gap:var(--s2)}
.gallery__item{overflow:hidden;border-radius:10px;position:relative}
.gallery__item img{width:100%;height:100%;object-fit:cover;filter:contrast(1.04)}
html:not(.no-js) .gallery__item img{filter:grayscale(1) contrast(1.15);
  transition:filter 1s var(--ease)}
html:not(.no-js) .gallery__item::after{content:"";position:absolute;inset:0;
  background:var(--red);mix-blend-mode:color;pointer-events:none;
  transition:opacity 1s var(--ease)}
html:not(.no-js) .is-visible .gallery__item img{filter:contrast(1.04)}
html:not(.no-js) .is-visible .gallery__item::after{opacity:0}

/* Booking — es el momento de conversión de toda la página, así que se le da
   más presencia que a una sección normal. */
.sec--booking{border-top:1px solid var(--line)}
.booking__grid{display:grid;gap:var(--s4)}
.contact-direct{display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s3);align-items:flex-start}
/* El número de teléfono no se parte: llevaba   en el HTML, pero si la caja
   se estrecha de más queda ilegible igual. */
.contact-direct .btn{white-space:nowrap}
/* Iconos de marca en línea (SVG dentro del HTML: cero peticiones, cero librería
   de iconos). currentColor los tiñe solos según el botón. */
.btn__i{flex:0 0 auto;width:1.15em;height:1.15em}

.booking__form{display:grid;grid-template-columns:1fr;gap:var(--s3);background:var(--bg-2);
  border:1px solid var(--line);border-radius:14px;padding:var(--s4);
  position:relative;overflow:hidden;counter-reset:campo}
/* Mismo filo de color que el estado vacío de la agenda: marca dónde se actúa. */
.booking__form::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--blue),var(--red),transparent)}

.field{display:flex;flex-direction:column;gap:.5rem}
.field label{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--grey)}
/* Numeración automática, del mismo palo que el «01 —» del menú. Cero HTML extra. */
.field label::before{counter-increment:campo;
  content:counter(campo,decimal-leading-zero) " ";color:var(--red-text)}

.field input,.field select,.field textarea{background:var(--bg);color:var(--warm);
  border:1px solid var(--field-line);border-radius:8px;padding:.8rem .9rem;
  font-family:inherit;font-size:1rem;transition:border-color .2s,box-shadow .2s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--red);
  box-shadow:0 0 0 3px #3345ff33}
@media (hover:hover){
  .field input:hover,.field select:hover,.field textarea:hover{border-color:var(--grey)}
}
.field textarea{resize:vertical;min-height:130px}
/* El envío es la única acción de la tarjeta: que ocupe todo el ancho y no haya duda. */
.booking__form .btn[type=submit]{width:100%;justify-content:center}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.booking__ok{border:1px solid var(--red);border-radius:14px;padding:var(--s4);background:var(--bg-2)}
.booking__ok .overline{margin-bottom:var(--s2)}
.booking__ok a{color:var(--red-text);text-decoration:underline}

/* Footer */
.ftr{max-width:var(--wrap);margin:0 auto;padding:var(--s5) var(--s3) var(--s4);border-top:1px solid var(--line);display:grid;gap:var(--s3)}
.ftr__brand{font-family:var(--f-display);font-weight:300;text-transform:uppercase;font-size:1.6rem;letter-spacing:.14em;line-height:1}
.ftr__tag{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--grey)}
.ftr__nav{display:flex;flex-wrap:wrap;gap:var(--s4);justify-content:space-between}
.ftr__social,.ftr__legal{display:flex;flex-wrap:wrap;gap:var(--s3);font-family:var(--f-mono);
  font-size:.8rem;letter-spacing:.06em;text-transform:uppercase}
.ftr__social a,.ftr__legal a{color:var(--grey);display:inline-block;padding:.25rem 0}
.ftr__social a:hover,.ftr__legal a:hover{color:var(--warm)}
.ftr__copy{font-family:var(--f-mono);font-size:.72rem;color:var(--grey)}

/* ===================== BREAKPOINTS (máx 3) ===================== */
@media (min-width:640px){
  .release{padding:var(--s4)}
  .booking__form{grid-template-columns:1fr 1fr}
  .field--wide{grid-column:1 / -1}
  .contact-direct{flex-direction:row;flex-wrap:wrap}
  /* GALERÍA a 2 columnas. Entre 640 y 899px se quedaba a UNA columna a ancho
     completo y cada retrato medía ~900px de alto: a 899px la página entera
     salía de 10 767px, la galería se llevaba 5 099px (47 %) y el booking
     empezaba en el 9 325px — 10,4 pantallas. Un píxel más (900) y la página
     bajaba a 5 582px. No hace falta un cuarto breakpoint: cabe en éste. */
  .gallery{grid-template-columns:repeat(2,1fr)}
  .gallery__item{aspect-ratio:4/5}
  .gallery__item--wide{grid-column:span 2;aspect-ratio:16/9}
}
@media (min-width:900px){
  .nav__list{display:flex}
  .nav__cta{margin-left:0}
  /* Escritorio: el texto vive en la mitad izquierda, así que el scrim es una
     columna y la foto respira entera a la derecha. Sin bordes: muere en
     transparente dentro del propio hero. */
  /* Se llegó a oscurecer hasta el 86 % del ancho persiguiendo un 3,79:1 del
     titular que resultó ser un fallo de la MEDICIÓN, no de la página: se estaba
     midiendo el rectángulo del <h1> (1160px de ancho) en vez de la caja de la
     tinta (las letras acaban a los ~620px), o sea hueco vacío. Medido sobre un
     Range del texto: 16,8:1. Así que el corte se queda donde deja respirar la
     foto. Si tocas esto, mide sobre la tinta. */
  .hero__ui{background:linear-gradient(90deg,#070506f2 0%,#070506ed 34%,#070506b8 54%,transparent 78%)}
  .sec{display:grid;grid-template-columns:minmax(0,360px) 1fr;gap:var(--s5);align-items:start}
  /* La columna del título mide como mucho 360px. «Introspective» es una sola
     palabra: a 4rem ocupa 519px y se salía encima del contenido. Se ata el
     tamaño al ancho REAL de la columna, no al del viewport. */
  .sec__head{margin-bottom:0;position:sticky;top:var(--s6);align-self:start;
    container-type:inline-size}
  .sec__title{font-size:min(var(--t-h2), 11cqw)}
  .sec > :not(.sec__head){grid-column:2}
  /* El booking anidaba otro grid de 2 columnas dentro de la columna 2 del .sec:
     tres columnas efectivas en 1160px, con el aside tan estrecho que el número
     de WhatsApp se partía en tres líneas. display:contents disuelve el grid
     intermedio: el aside acompaña al título en la columna 1 y el formulario se
     queda la columna 2 completa. */
  /* El formulario abarca las dos filas y, sin esto, reparte su altura entre
     ambas: el aside caía 300px por debajo del título. auto/1fr fija la
     primera al alto del título y le da el resto a la segunda. */
  /* GALERÍA · rejilla editorial de 3 columnas a ancho completo.
     Se sale de la columna de contenido del .sec: dejaba el 40% de la página en
     negro al lado de las fotos. El título queda encima, las fotos ocupan todo.
     La altura de fila la marcan los retratos (4:5); las anchas se estiran hasta
     esa altura y object-fit:cover se encarga del recorte. Así ninguna fila
     queda coja y el ritmo es 2+1, 1+2, 1+1+1. */
  .sec--gallery{grid-template-columns:1fr}
  /* Tiene que superar en especificidad a .sec > :not(.sec__head){grid-column:2}
     (0,2,0). Con «> *» se quedaba en (0,1,0) y perdía: la galería caía en una
     columna IMPLÍCITA de ancho automático, o sea 57px hasta que cargaban las
     fotos. El fallo no se veía en las capturas porque el script hace scroll
     antes de capturar y para entonces las imágenes ya han cargado. */
  .sec--gallery > :not(.sec__head){grid-column:1}
  .sec--gallery .sec__head{position:static;margin-bottom:var(--s4)}
  .gallery{grid-template-columns:repeat(3,1fr);gap:var(--s2)}
  .gallery__item:not(.gallery__item--wide){aspect-ratio:4/5}
  /* aspect-ratio:auto deshace el 16/9 que la ancha lleva desde 640px: aquí el
     alto de su fila lo marcan los retratos y la imagen va absoluta (abajo).
     Sin esto la ancha impone su propio alto y la fila vuelve a descuadrarse. */
  .gallery__item--wide{grid-column:span 2;aspect-ratio:auto}
  /* La foto ancha imponía su alto natural (736/1.5 = 491px) y su fila salía
     41px más alta que la de arriba. Sacando la imagen del flujo, el alto de
     TODAS las filas lo marcan los retratos (4:5) y la rejilla queda pareja. */
  .gallery__item--wide img{position:absolute;inset:0}

  .sec--booking{grid-template-rows:auto 1fr}
  .sec--booking .booking__grid{display:contents}
  .sec--booking .booking__aside{grid-column:1;grid-row:2;padding-right:var(--s3)}
  .sec--booking .booking__form{grid-column:2;grid-row:1 / span 2}
  .sec--booking .sec__head{position:static}
}

/* ===================== MOVIMIENTO REDUCIDO =====================
   Va al FINAL a propósito. Estaba arriba y perdía por orden del cascade
   contra reglas posteriores de la misma especificidad: la cinta de clubes
   seguía girando con reduced-motion activo. Aquí gana siempre. */
@media (prefers-reduced-motion:reduce){
  html:not(.no-js) [data-reveal], html:not(.no-js) [data-reveal].is-visible,
  html:not(.no-js) [data-reveal] > *{opacity:1!important;transform:none!important;transition:none!important}
  .hero__img{animation:none!important;height:100%;transform:none}
  /* E2 · sin barra que se mueva */
  body::before{animation:none!important;display:none}
  /* El nombre de la plataforma no se desplaza al pasar el ratón */
  .music-links a:hover .music-links__p{transform:none}
  /* E4 · galería a color directo */
  .gallery__item img{filter:contrast(1.04)!important;transition:none!important}
  .gallery__item::after{display:none}
}