/* ─────────────────────────────────────────────────────────────
   MASTER GROOVERS — COMPONENTES
   Estructura portada del proyecto de referencia, revestida con la
   marca de MG. Todo lo que se anima es transform/opacity: nada que
   fuerce recálculo de layout.
   ───────────────────────────────────────────────────────────── */

/* ══ NAV ══════════════════════════════════════════════════════ */

/* ── Liquid glass ──
   Tres capas hacen el efecto: el desenfoque saturado del fondo, una luz
   fucsia que se desplaza por detrás, y un borde interior de 1px que
   simula la refracción del canto del cristal. */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 var(--space-gutter);
  height: 68px;
  /* Suficientemente opaco para que el logo blanco y los enlaces
     mantengan contraste sobre cualquier imagen que pase por debajo. */
  background: rgba(8, 7, 10, 0.62);
  backdrop-filter: blur(22px) saturate(165%);
  -webkit-backdrop-filter: blur(22px) saturate(165%);
  border-bottom: 1px solid rgba(244, 240, 245, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    inset 0 -1px 0 rgba(232, 121, 249, 0.10),
    0 8px 32px rgba(0, 0, 0, 0.38);
  transition: height var(--duration-normal) var(--ease-out-expo),
              background-color var(--duration-normal),
              box-shadow var(--duration-normal);
}

/* Al bajar, el cristal se compacta y se vuelve más denso: da la
   sensación de que la barra "se posa" sobre el contenido. */
.nav[data-scrolled="true"] {
  height: 58px;
  background: rgba(8, 7, 10, 0.78);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(232, 121, 249, 0.18),
    0 10px 40px rgba(0, 0, 0, 0.5);
}
.nav[data-scrolled="true"] .nav-logo img { height: 32px; }
.nav[data-scrolled="true"] ~ * .nav-mobile,
.nav[data-scrolled="true"] .nav-mobile { top: 58px; }

/* Reflejo que sigue al puntero. --mx lo actualiza site.js; el valor
   por defecto deja el reflejo centrado si el JS no llega a correr. */
.nav-glass::before {
  --mx: 50%;
}
.nav-reflejo {
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(
    260px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 255, 255, 0.10),
    rgba(232, 121, 249, 0.12) 42%,
    transparent 68%);
  opacity: 0;
  transition: opacity var(--duration-normal) ease;
}
.nav:hover .nav-reflejo { opacity: 1; }

/* Capa propia con overflow oculto: así la luz puede desplazarse sin
   salirse de la barra, y sin recortar el menú desplegable, que es
   hermano de esta capa y no hijo. */
.nav-glass {
  position: absolute; inset: 0;
  overflow: hidden;
  pointer-events: none;
  border-radius: inherit;
}
.nav-glass::before,
.nav-glass::after {
  content: '';
  position: absolute;
  top: -140%; bottom: -140%;
  width: 46%;
  background: radial-gradient(closest-side, rgba(232, 121, 249, 0.42), rgba(232, 121, 249, 0.10) 55%, transparent 78%);
  filter: blur(6px);
  will-change: transform;
}
.nav-glass::before { left: -20%; animation: navLuz 17s var(--ease-out-expo) infinite alternate; }
.nav-glass::after  { left: 45%; width: 34%; opacity: 0.65;
                     animation: navLuz2 23s var(--ease-out-expo) infinite alternate; }

@keyframes navLuz  { from { transform: translateX(0); }    to { transform: translateX(190%); } }
@keyframes navLuz2 { from { transform: translateX(0); }    to { transform: translateX(-150%); } }

/* Un brillo fino recorriendo el canto superior remata el efecto. */
.nav-glass > span {
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  width: 38%;
  animation: navBrillo 11s linear infinite;
}
@keyframes navBrillo { from { transform: translateX(-100%); } to { transform: translateX(365%); } }

/* ── Diez orbes derivando tras el cristal ──
   Son bastante más altos que la barra a propósito: al quedar
   recortados por el overflow solo se ve su panza, que es lo que da
   la lectura de "algo grande moviéndose detrás del vidrio".

   El desenfoque va en el CONTENEDOR, no en cada orbe: diez filtros
   por separado obligarían a diez capas de composición. */
.nav-orbes {
  position: absolute; inset: -260% -12%;
  filter: blur(26px);
  opacity: 0.85;
  pointer-events: none;
}
.nav-orbes i {
  position: absolute;
  top: 50%;
  width: var(--d); height: var(--d);
  margin-top: calc(var(--d) / -2);
  left: var(--x);
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--c), transparent 72%);
  animation: navOrbe var(--t) ease-in-out infinite alternate;
  animation-delay: var(--r);
  will-change: transform;
}
@keyframes navOrbe {
  from { transform: translate3d(0, -14%, 0) scale(0.92); }
  to   { transform: translate3d(90px, 14%, 0) scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
  .nav-orbes i { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-glass::before, .nav-glass::after, .nav-glass span { animation: none; }
}

.nav-logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
/* Alto por CSS, no por style en línea: si va en línea, la regla del
   nav compacto no puede reducirlo. */
.nav-logo img {
  height: 38px; width: auto;
  transition: opacity var(--duration-fast),
              height var(--duration-normal) var(--ease-out-expo);
}
.nav-logo:hover img { opacity: 0.75; }

.nav-links { display: flex; align-items: center; gap: var(--space-md); }
.nav-links a {
  position: relative;
  font-size: var(--text-sm);
  color: var(--hueso-mute);
  text-decoration: none;
  transition: color var(--duration-fast);
  padding: 0.4rem 0;
}
.nav-links a:hover { color: var(--hueso); }

/* La página activa se marca con subrayado, no solo con color:
   el color por sí solo no es un indicador accesible. */
.nav-links a[aria-current="page"] { color: var(--hueso); font-weight: 600; }
.nav-links a[aria-current="page"]::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--fucsia);
}

.nav-btns { display: flex; gap: var(--space-xs); align-items: center; }

.nav-toggle { display: none; padding: 0.5rem; color: var(--hueso); }
.nav-toggle svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 2; }

.nav-mobile {
  display: none;
  position: absolute; top: 68px; left: 0; right: 0;
  background: rgba(8, 7, 10, 0.98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--linea);
  padding: var(--space-md) var(--space-gutter) var(--space-lg);
  flex-direction: column; gap: 0;
  max-height: calc(100vh - 68px);
  overflow-y: auto;
  box-shadow: var(--shadow-card);
}
.nav-mobile[data-open="true"] { display: flex; }
.nav-mobile a {
  font-size: var(--text-lg);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--linea);
  text-decoration: none;
  color: var(--hueso);
}
.nav-mobile a:last-of-type { border-bottom: none; }
.nav-mobile .btn-pill-solid { margin-top: var(--space-md); justify-content: center; border-bottom: none; }

/* ══ BOTONES ══════════════════════════════════════════════════ */

.btn-pill-outline,
.btn-pill-solid,
.btn-pill-wa {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--duration-fast) var(--ease-out-expo),
              background-color var(--duration-fast),
              border-color var(--duration-fast),
              color var(--duration-fast),
              box-shadow var(--duration-fast);
}
.btn-pill-outline:hover,
.btn-pill-solid:hover,
.btn-pill-wa:hover { transform: translateY(-2px); }
.btn-pill-outline:active,
.btn-pill-solid:active,
.btn-pill-wa:active { transform: translateY(0); }

.btn-pill-outline {
  font-weight: 500;
  color: var(--hueso);
  border: 1.5px solid var(--linea-vis);
  padding: 0.5rem 1.3rem;
}
.btn-pill-outline:hover { border-color: var(--fucsia); color: var(--fucsia); }

.btn-pill-solid {
  font-weight: 600;
  color: var(--negro);
  background: var(--fucsia);
  padding: 0.55rem 1.4rem;
}
.btn-pill-solid:hover { background: var(--fucsia-br); box-shadow: var(--shadow-glow); }

.btn-pill-wa {
  font-weight: 600;
  color: #06280f;
  background: var(--whatsapp);
  padding: 0.55rem 1.4rem;
}
.btn-pill-wa:hover { background: #3ddb78; }

.btn-lg { font-size: var(--text-lg); padding: 0.9rem 2rem; }
.btn-sm { font-size: var(--text-xs); padding: 0.4rem 1rem; }
.btn-block { display: flex; width: 100%; justify-content: center; }

/* ══ SECCIONES ════════════════════════════════════════════════ */

.section { padding: var(--space-section) var(--space-gutter); }
.section--line { border-top: 1px solid var(--linea); }
.section--raised { background: var(--negro-2); }
.section-inner { max-width: var(--max-w); margin: 0 auto; }

.s-eyebrow {
  display: flex; align-items: center; gap: var(--space-2xs);
  font-size: var(--text-xs); font-weight: 600;
  letter-spacing: var(--track-wide); text-transform: uppercase;
  color: var(--fucsia);
  margin-bottom: var(--space-sm);
}
.s-eyebrow::before { content: '◆'; font-size: 0.5em; }

.s-title { font-size: var(--text-h2); margin-bottom: var(--space-xs); }
.s-title .accent { color: var(--fucsia); }

.s-sub {
  font-size: var(--text-base);
  color: var(--hueso-dim);
  line-height: var(--lh-loose);
  font-weight: 400;
  max-width: var(--max-w-prose);
}

/* Cabecera de sección: título a la izquierda, enlace a la derecha. */
.s-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: var(--space-md); flex-wrap: wrap;
  margin-bottom: var(--space-lg);
}

/* ══ MIGAS DE PAN ═════════════════════════════════════════════ */

.breadcrumbs {
  padding: calc(68px + var(--space-md)) var(--space-gutter) 0;
  max-width: var(--max-w); margin: 0 auto;
}
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-2xs); align-items: center; }
.breadcrumbs li { display: flex; align-items: center; gap: var(--space-2xs); font-size: var(--text-xs); }
.breadcrumbs li + li::before { content: '/'; color: var(--hueso-dim); opacity: 0.5; }
.breadcrumbs a { color: var(--hueso-dim); text-decoration: none; transition: color var(--duration-fast); }
.breadcrumbs a:hover { color: var(--fucsia); text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--hueso-mute); }

/* ══ TL;DR / KEY TAKEAWAYS ════════════════════════════════════
   Va inmediatamente después del párrafo de intención de búsqueda.
   Responde la consulta sin obligar a leer la página entera — y es
   el bloque que los motores generativos citan textualmente. */

.tldr {
  background: linear-gradient(135deg, rgba(232, 121, 249, 0.09), rgba(18, 16, 22, 0.6));
  border: 1px solid rgba(232, 121, 249, 0.28);
  border-left: 3px solid var(--fucsia);
  border-radius: var(--radius-card);
  padding: var(--space-md);
  margin: var(--space-md) 0;
  max-width: var(--max-w-prose);
}
.tldr-title {
  display: flex; align-items: center; gap: var(--space-2xs);
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: var(--track-wide); text-transform: uppercase;
  color: var(--fucsia);
  margin-bottom: var(--space-xs);
}
.tldr ul { display: flex; flex-direction: column; gap: var(--space-xs); }
.tldr li {
  position: relative; padding-left: 1.4rem;
  font-size: var(--text-sm); line-height: var(--lh-normal);
  color: rgba(244, 240, 245, 0.85);
}
.tldr li::before {
  content: '→'; position: absolute; left: 0;
  color: var(--fucsia); font-weight: 700;
}

/* ══ SCROLLYTELLING ═══════════════════════════════════════════
   Un carril alto con un escenario pegajoso dentro. Cada bloque entra
   con las palabras subiendo desde abajo (efecto slot) y sus capas se
   mueven a distinta velocidad al hacer scroll (parallax).

   Todo lo que se anima es transform y opacity. El progreso lo calcula
   site.js con un único listener de scroll pasivo. */

.scrolly {
  position: relative;
  /* Un viewport de recorrido por bloque, más uno de salida. */
  height: 500vh;
  background: var(--negro);
}
.scrolly-stage {
  position: sticky; top: 0;
  height: 100dvh;
  display: grid; place-items: center;
  overflow: hidden;
  padding: calc(68px + var(--space-lg)) var(--space-gutter) var(--space-lg);
}

/* Halo de fondo que se desplaza: da profundidad al conjunto. */
.scrolly-halo {
  z-index: 1;
  position: absolute; inset: -20%;
  background: radial-gradient(38% 42% at 50% 50%, rgba(232, 121, 249, 0.16), transparent 70%);
  pointer-events: none;
  will-change: transform;
}

.scrolly-step {
  z-index: 2;   /* por delante del bosque (0) y del halo (1) */
  grid-area: 1 / 1;
  /* 68rem y no 60. Con 60rem (960 px) el titular de apertura pedía 963:
     cabía en Chromium por dos píxeles y no cabía en Safari, que compone
     la misma fuente un pelo más ancha, y allí se partía en tres líneas.
     Un titular que depende de dos píxeles no está bien dimensionado, así
     que ahora sobran unos 125 px al tamaño máximo — margen de sobra para
     cualquier diferencia de métricas entre motores. */
  max-width: 68rem;
  text-align: center;
  opacity: 0;
  will-change: transform, opacity;
}
.scrolly-step[data-activo="true"] { opacity: 1; }

.scrolly-step p {
  font-size: clamp(1.8rem, 1rem + 3.6vw, 4rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  /* Peso base medio: los remates en bold contrastan de verdad. */
  font-weight: 500;
  color: var(--hueso);
  text-wrap: balance;
}

/* Composición fijada a mano.

   El titular de apertura tiene un reparto concreto —«Estudio de música
   electrónica» arriba, «en Lima, Perú» abajo— y eso no se puede dejar al
   salto automático. Cada palabra es un inline-block por el efecto slot y
   «Lima, Perú» es una píldora, o sea cajas atómicas que el navegador
   coloca como le cuadra: con `text-wrap: balance` salía «Estudio de
   música / Lima, Perú / electrónica en», tres líneas y con el orden
   descolocado. Envolviendo cada línea en un bloque, el reparto deja de
   depender de anchos de fuente, de si Poppins ya cargó o del ancho de la
   ventana. */
.sc-linea {
  display: block;
  /* Y sin balanceo. El párrafo lo trae heredado (`text-wrap: balance`,
     útil en los pasos que sí reparte el navegador), pero aquí las líneas
     ya están decididas y balancear solo puede estropearlas: el algoritmo
     busca renglones de largo parejo, así que parte «Estudio de música
     electrónica» en dos aunque quepa entera. Chrome lo dejaba pasar y
     Safari no — motivo de más para no dejarlo a criterio del motor.
     Con el reparto normal, cada bloque mete todo lo que cabe y solo
     salta cuando de verdad no entra. */
  text-wrap: wrap;
}

/* Palabras y grupos: la máscara que hace el efecto slot. */
.slot { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.08em; }
.slot > i {
  display: inline-block;
  font-style: normal;
  transform: translateY(110%);
  /* El desenfoque de entrada imita el barrido de un rodillo girando:
     la palabra "aterriza" en foco en vez de aparecer plana. */
  filter: blur(9px);
  opacity: 0;
  will-change: transform, filter, opacity;
}
.scrolly-step[data-activo="true"] .slot > i {
  transform: translateY(0);
  filter: blur(0);
  opacity: 1;
}
.slot > i {
  /* Curva con rebote corto: el remate de muelle es lo que separa una
     animación cara de una que solo se desliza. */
  transition:
    transform 0.86s cubic-bezier(0.22, 1.28, 0.34, 1),
    filter 0.5s ease-out,
    opacity 0.42s ease-out;
  transition-delay: calc(var(--i, 0) * 48ms);
}

/* Resaltes tipográficos. */
.sc-bold   { font-weight: 800; }
.sc-rosa   { color: var(--fucsia); font-weight: 800; }
/* Píldora invertida: fondo fucsia, letra negra. */
.sc-pildora {
  background: var(--fucsia);
  color: var(--negro);
  font-weight: 800;
  padding: 0.04em 0.42em 0.12em;
  border-radius: var(--radius-pill);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Retrato dentro de un bloque. */
.scrolly-retrato {
  display: block;
  width: clamp(84px, 12vw, 148px);
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--fucsia);
  margin: 0 auto var(--space-md);
  will-change: transform;
}

.scrolly-pie {
  margin-top: var(--space-md);
  font-size: var(--text-sm);
  color: var(--hueso-dim);
  letter-spacing: 0.14em; text-transform: uppercase;
}

/* Bosque de fondo. Va DETRÁS del halo y del texto (z-index 0 frente al
   1 del halo), y se apaga hacia arriba con una máscara para que las
   copas no compitan con las palabras. */
.scrolly-arbol {
  z-index: 0;
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to top, #000 40%, rgba(0, 0, 0, 0.55) 72%, transparent 100%);
          mask-image: linear-gradient(to top, #000 40%, rgba(0, 0, 0, 0.55) 72%, transparent 100%);
}

/* Sin JavaScript o con movimiento reducido, los cuatro bloques se leen
   uno detrás de otro como texto normal. */
@media (prefers-reduced-motion: reduce) {
  .scrolly { height: auto; }
  .scrolly-stage { position: static; height: auto; display: block; }
  .scrolly-step { opacity: 1; margin-bottom: var(--space-xl); }
  .slot > i { transform: none; transition: none; }
  .scrolly-halo { display: none; }
}
html:not(.js) .scrolly { height: auto; }
html:not(.js) .scrolly-stage { position: static; height: auto; display: block; }
html:not(.js) .scrolly-step { opacity: 1; margin-bottom: var(--space-xl); }
html:not(.js) .slot > i { transform: none; }
html:not(.js) .scrolly-arbol { display: none; }

@media (max-width: 860px) {
  .scrolly { height: 420vh; }
  .scrolly-stage { padding-top: calc(68px + var(--space-md)); }
  .scrolly-step p { font-size: clamp(1.5rem, 1rem + 4.4vw, 2.4rem); }
}

/* ══ INTRO SONORA ═════════════════════════════════════════════
   Mientras corre la intro, la interfaz se aparta: sin barra, sin CTA
   fija y sin WhatsApp. Todo vuelve al llegar el drop. */

html[data-intro="activa"] .nav,
html[data-intro="activa"] .mobile-cta,
html[data-intro="activa"] .wa-float {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
}
html[data-intro="activa"] .mobile-cta { transform: translateY(100%); }
html[data-intro="activa"] .wa-float { transform: scale(0.7); }

.nav, .mobile-cta, .wa-float {
  transition: opacity var(--duration-slow) var(--ease-out-expo),
              transform var(--duration-slow) var(--ease-out-expo);
}

/* El scrollytelling arranca a pantalla completa, sin el hueco que
   dejaba la barra: durante la intro no hay barra que compensar. */
html[data-intro="activa"] .scrolly-stage { padding-top: var(--space-lg); }

/* ══ NOW PLAYING ══════════════════════════════════════════════
   Píldora curvada SOLO por la izquierda, anclada arriba a la derecha.
   Aparece cuando el scrollytelling queda atrás. */

.nowplaying {
  position: fixed;
  top: calc(68px + var(--space-sm));
  right: 0;
  z-index: var(--z-float);
  display: flex; align-items: center; gap: var(--space-xs);
  padding: 0.45rem 1.1rem 0.45rem 0.45rem;
  /* Solo las esquinas de la izquierda: se lee como una pestaña que
     asoma desde el borde de la pantalla. */
  border-radius: var(--radius-pill) 0 0 var(--radius-pill);
  background: rgba(8, 7, 10, 0.72);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(244, 240, 245, 0.14);
  border-right: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 8px 28px rgba(0, 0, 0, 0.45);
  animation: npEntra 0.6s var(--ease-out-expo) both;
}
.nowplaying[hidden] { display: none; }
@keyframes npEntra { from { transform: translateX(105%); } to { transform: none; } }

.np-disco {
  width: 34px; height: 34px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
  border: 1px solid rgba(244, 240, 245, 0.25);
  background: var(--negro-3);
  padding: 5px;
  animation: npGira 7s linear infinite;
}
@keyframes npGira { to { transform: rotate(360deg); } }
/* Al pausar, el disco se para: es la señal más clara del estado. */
.nowplaying[data-sonando="false"] .np-disco { animation-play-state: paused; }

.np-txt { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.np-k {
  font-size: 0.52rem; font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fucsia);
}
.np-t {
  font-size: var(--text-xs); font-weight: 600; color: var(--hueso);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 12rem;
}
.np-a { font-size: 0.6rem; color: var(--hueso-dim); white-space: nowrap; }

.np-btn {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--fucsia); color: var(--negro);
  transition: transform var(--duration-fast) var(--ease-out-back);
}
.np-btn:hover { transform: scale(1.12); }
.np-btn svg { width: 11px; height: 11px; fill: currentColor; }
.np-btn .ic-pausa { display: none; }
.np-btn[data-sonando="true"] .ic-pausa { display: block; }
.np-btn[data-sonando="true"] .ic-play { display: none; }

@media (max-width: 600px) {
  .nowplaying { top: calc(58px + var(--space-xs)); padding-right: var(--space-sm); }
  .np-t { max-width: 7.5rem; }
  .np-a { display: none; }
}

/* ══ LOGOS CAYENDO ════════════════════════════════════════════
   Banda ancha y corta entre el scrollytelling y los cursos. Los logos
   caen y rotan en profundidades distintas, movidos por el scroll: no
   hay bucle automático, cada fotograma responde a la rueda. */

.caida {
  position: relative;
  height: 54vh;
  min-height: 260px;
  overflow: hidden;
  /* La perspectiva es lo que separa los planos: sin esto, translateZ
     no produce ninguna diferencia de tamaño. */
  perspective: 800px;
  perspective-origin: 50% 40%;
  background: var(--negro);
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
}
.caida-lienzo { position: absolute; inset: 0; width: 100%; height: 100%; }
.caida::before, .caida::after {
  content: ''; position: absolute; left: 0; right: 0; height: 22%;
  pointer-events: none; z-index: 2;
}
.caida::before { top: 0; background: linear-gradient(to bottom, var(--negro), transparent); }
.caida::after { bottom: 0; background: linear-gradient(to top, var(--negro), transparent); }

@media (prefers-reduced-motion: reduce) {
  .caida { height: 0; min-height: 0; border: none; }
}


/* ══ SALAS: TARJETAS DE RESERVA ═══════════════════════════════
   Portado del sistema de venta del deploy: tarjeta por sala, y al
   pulsar se abre un configurador con extras que recalcula el total y
   arma el mensaje de WhatsApp ya redactado. */

.salas { display: flex; gap: var(--space-md); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: var(--space-xs); }
.salas::-webkit-scrollbar { display: none; }

.sala {
  position: relative;
  flex: 0 0 clamp(260px, 30%, 330px);
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  background: var(--negro-2);
  border: 1px solid var(--linea-vis);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: transform var(--duration-normal) var(--ease-out-expo), border-color var(--duration-normal), box-shadow var(--duration-normal);
}
.sala:hover { transform: translateY(-5px); border-color: rgba(232,121,249,.45); box-shadow: 0 16px 44px rgba(232,121,249,.14); }
.sala--pop { border-color: rgba(232,121,249,.42); }
.sala-img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.sala-cuerpo { padding: var(--space-md); display: flex; flex-direction: column; flex: 1; gap: var(--space-2xs); }
.sala-tag { font-size: .58rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--fucsia); }
.sala h3 { font-size: var(--text-h3); }
.sala-gear { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: var(--space-2xs) 0 var(--space-sm); }
.sala-gear span {
  font-size: .62rem; font-weight: 600; letter-spacing: .04em;
  padding: 0.22rem 0.55rem; border-radius: var(--radius-pill);
  background: rgba(244,240,245,.06); border: 1px solid var(--linea-vis); color: var(--hueso-dim);
}
.sala-precio { margin-top: auto; display: flex; align-items: baseline; gap: 0.25rem; }
.sala-precio b { font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; }
.sala-precio span { font-size: var(--text-xs); color: var(--hueso-dim); }
.sala-btn { margin-top: var(--space-sm); }

/* ── Configurador ── */
.reserva { position: fixed; inset: 0; z-index: 9990; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(0,0,0,.7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none; transition: opacity var(--duration-normal) var(--ease-out-expo); }
.reserva.abierta { opacity: 1; pointer-events: auto; }
@media (min-width: 720px) { .reserva { align-items: center; padding: var(--space-md); } }
.reserva-panel {
  width: 100%; max-width: 460px; max-height: 92vh; overflow-y: auto;
  background: var(--negro-2); border: 1px solid var(--linea-vis);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  padding: var(--space-lg) var(--space-md) var(--space-md);
  transform: translateY(20px); transition: transform var(--duration-slow) var(--ease-out-expo);
}
@media (min-width: 720px) { .reserva-panel { border-radius: var(--radius-card); } }
.reserva.abierta .reserva-panel { transform: none; }
.reserva-cerrar { position: absolute; top: var(--space-sm); right: var(--space-sm); width: 34px; height: 34px;
  border-radius: 50%; background: rgba(244,240,245,.1); color: var(--hueso); display: flex; align-items: center; justify-content: center; }
.reserva-cerrar svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.4; }
.reserva h3 { font-size: var(--text-xl); }
.reserva-base { font-size: var(--text-sm); color: var(--hueso-dim); margin-bottom: var(--space-md); }
.reserva-base b { color: var(--fucsia); }

.extra { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) 0; border-bottom: 1px solid var(--linea); cursor: pointer; }
.extra:last-of-type { border-bottom: none; }
.extra input { position: absolute; opacity: 0; width: 0; height: 0; }
.extra-box { flex-shrink: 0; width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--linea-vis);
  display: flex; align-items: center; justify-content: center; transition: background var(--duration-fast), border-color var(--duration-fast); }
.extra-box svg { width: 12px; height: 12px; stroke: var(--negro); fill: none; stroke-width: 3.2; opacity: 0; }
.extra input:checked + .extra-box { background: var(--fucsia); border-color: var(--fucsia); }
.extra input:checked + .extra-box svg { opacity: 1; }
.extra input:focus-visible + .extra-box { outline: 2px solid var(--fucsia); outline-offset: 2px; }
.extra-txt { flex: 1; min-width: 0; }
.extra-txt b { display: block; font-size: var(--text-sm); font-weight: 600; }
.extra-txt small { font-size: var(--text-xs); color: var(--hueso-dim); line-height: 1.3; display: block; }
.extra-precio { font-size: var(--text-sm); font-weight: 700; color: var(--hueso); flex-shrink: 0; }

.contador { display: flex; align-items: center; gap: var(--space-xs); }
.contador button { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--linea-vis); color: var(--hueso); font-weight: 700; line-height: 1; }
.contador button:hover { border-color: var(--fucsia); color: var(--fucsia); }
.contador b { min-width: 1.2rem; text-align: center; font-variant-numeric: tabular-nums; }

.reserva-total { display: flex; align-items: baseline; justify-content: space-between; margin: var(--space-md) 0 var(--space-sm);
  padding-top: var(--space-sm); border-top: 1px solid var(--linea-vis); }
.reserva-total span { font-size: var(--text-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--hueso-dim); }
.reserva-total b { font-size: 2rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.reserva-nota { font-size: var(--text-xs); color: var(--hueso-dim); text-align: center; margin-top: var(--space-xs); }

/* ══ CABECERA CON LOGO GIGANTE ════════════════════════════════
   Solo asoma una franja del icono por arriba: se lee como textura de
   marca, no como un logo pegado. Se desplaza con el scroll. */
.cabecera-logo { position: relative; overflow: hidden; padding-top: clamp(70px, 12vw, 130px); }
.cabecera-logo .marca {
  position: absolute; top: 0; left: 50%;
  width: min(150%, 1500px);
  transform: translate(-50%, -62%);
  opacity: .09;
  pointer-events: none;
  will-change: transform;
}


/* ══ TARJETAS DE DATOS (sustituyen a las tablas) ══════════════
   Una tabla en móvil obliga a hacer scroll lateral dentro de una caja
   y se lee mal. Estas tarjetas dicen lo mismo apilándose. */

.datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--space-sm); margin: var(--space-md) 0; }
.dato {
  background: var(--negro-2);
  border: 1px solid var(--linea-vis);
  border-radius: var(--radius-card);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform var(--duration-normal) var(--ease-out-expo), border-color var(--duration-normal);
}
.dato:hover { transform: translateY(-3px); border-color: rgba(232,121,249,.4); }
.dato-img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.dato-cuerpo { padding: var(--space-md); display: flex; flex-direction: column; gap: var(--space-2xs); flex: 1; }
.dato-k { font-size: .58rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--fucsia); }
.dato h3, .dato h4 { font-size: var(--text-h3); }
.dato p { font-size: var(--text-sm); color: var(--hueso-dim); line-height: var(--lh-snug); }
.dato-precio { margin-top: auto; padding-top: var(--space-xs); display: flex; align-items: baseline; gap: .3rem; }
.dato-precio b { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
.dato-precio span { font-size: var(--text-xs); color: var(--hueso-dim); }

/* ══ BULLETS CON DISCO FUCSIA ═════════════════════════════════
   Círculo relleno y el icono en trazo negro centrado dentro. */

.lista-disco { display: flex; flex-direction: column; gap: var(--space-sm); margin: var(--space-md) 0; }
.lista-disco li { display: flex; gap: var(--space-sm); align-items: flex-start; }
.disco {
  flex-shrink: 0;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--fucsia);
  display: flex; align-items: center; justify-content: center;
  margin-top: 1px;
}
.disco svg { width: 17px; height: 17px; stroke: var(--negro); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.lista-disco b { display: block; font-size: var(--text-base); font-weight: 600; color: var(--hueso); }
.lista-disco p { font-size: var(--text-sm); color: var(--hueso-dim); line-height: var(--lh-normal); margin-top: .1rem; }

/* ══ REPRODUCTOR DE TRACKS ════════════════════════════════════ */

.tracks { display: flex; flex-direction: column; margin-top: var(--space-md); }
.track {
  display: grid; grid-template-columns: 40px 1fr auto;
  gap: var(--space-sm); align-items: center;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  border: none; background: none; width: 100%; text-align: left;
  cursor: pointer; transition: background var(--duration-fast);
}
.track:hover { background: rgba(244,240,245,.06); }
.track[aria-current="true"] { background: rgba(232,121,249,.1); }
.track-n { width: 34px; height: 34px; border-radius: 50%; background: rgba(244,240,245,.08);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background var(--duration-fast); }
.track:hover .track-n, .track[aria-current="true"] .track-n { background: var(--fucsia); }
.track-n svg { width: 13px; height: 13px; fill: var(--hueso); }
.track:hover .track-n svg, .track[aria-current="true"] .track-n svg { fill: var(--negro); }
.track-n .ic-pausa { display: none; }
.track[aria-current="true"][data-son="true"] .ic-pausa { display: block; }
.track[aria-current="true"][data-son="true"] .ic-play { display: none; }
.track-info { min-width: 0; }
.track-t { font-size: var(--text-base); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track[aria-current="true"] .track-t { color: var(--fucsia); }
.track-a { font-size: var(--text-xs); color: var(--hueso-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track-dur { font-size: var(--text-xs); color: var(--hueso-dim); font-variant-numeric: tabular-nums; }

/* ══ HERO SLIDER ══════════════════════════════════════════════
   Cinco banners en un carril con scroll-snap. El scroll nativo es
   quien manda: el JS solo sincroniza puntos y flechas, así que sin
   JavaScript sigue siendo un carrusel deslizable con el dedo. */

.hero { position: relative; padding: calc(68px + var(--space-md)) var(--space-gutter) 0; }
.hero-inner { max-width: var(--max-w); margin: 0 auto; }

.hero-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: var(--radius-card);
}
.hero-track::-webkit-scrollbar { display: none; }

.hero-slide {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: start;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--linea-vis);
  background: var(--negro-2);
  isolation: isolate;
}

/* 21:9 y con tope de altura de viewport. Con 16:9 la sección medía casi
   700px en escritorio, el texto quedaba pegado al borde inferior y había
   que hacer zoom para leerlo. */
.hero-media {
  position: relative;
  aspect-ratio: 21 / 9;
  max-height: 66vh;
  min-height: 26rem;
}

/* El <picture> tiene que salir del flujo y cubrir la caja.
   Si se queda dentro con height:auto, el height:100% del <img> se
   resuelve contra una altura automática, la imagen impone su
   proporción natural y revienta el aspect-ratio del contenedor: los
   banners con imagen cuadrada se volvían cuadrados de 1240px. */
.hero-media picture { position: absolute; inset: 0; display: block; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }

/* Velo en dos capas: un óvalo oscuro detrás del texto para que se lea
   sobre cualquier foto, más un degradado general que asienta la imagen. */
.hero-media::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 62% 68% at 50% 52%, rgba(8, 7, 10, 0.78), transparent 76%),
    linear-gradient(to top, rgba(8, 7, 10, 0.9) 0%, rgba(8, 7, 10, 0.42) 50%, rgba(8, 7, 10, 0.6) 100%);
}

/* Centrado en escritorio, como pediste. */
.hero-body {
  position: absolute; z-index: 2; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: var(--space-lg);
  max-width: 56rem; margin-inline: auto;
}
.hero-body h1, .hero-body h2 {
  /* Un punto por debajo de --text-hero y con ancho acotado: así los
     cinco titulares parten en un número parecido de líneas y el bloque
     queda centrado igual en todas las diapositivas. Con el tamaño
     anterior, el titular más largo empujaba el texto fuera del eje. */
  font-size: clamp(1.9rem, 1.1rem + 3.4vw, 3.5rem);
  max-width: 18ch;
  margin: 0 auto var(--space-sm);
  text-shadow: 0 2px 24px rgba(8, 7, 10, 0.6);
}
.hero-body p {
  font-size: var(--text-xl);
  color: rgba(244, 240, 245, 0.94);
  margin-bottom: var(--space-md);
  font-weight: 400;
  line-height: var(--lh-snug);
  max-width: 44ch;
  text-shadow: 0 1px 16px rgba(8, 7, 10, 0.75);
}
.hero-btns { display: flex; gap: var(--space-xs); flex-wrap: wrap; justify-content: center; }

/* Controles del hero */
.hero-controls {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-sm);
  max-width: var(--max-w); margin: var(--space-sm) auto 0;
}
.hero-dots { display: flex; gap: var(--space-2xs); }
.hero-dot {
  width: 30px; height: 4px; border-radius: var(--radius-pill);
  background: var(--linea-vis);
  transition: background var(--duration-normal), width var(--duration-normal);
  padding: 0;
}
.hero-dot[aria-current="true"] { background: var(--fucsia); width: 46px; }
.hero-dot:hover { background: var(--fucsia-br); }

/* ══ CONTADOR ANIMADO ═════════════════════════════════════════
   Las cifras cuentan hacia arriba al entrar en pantalla. Reservamos
   el ancho con `tabular-nums` para que el número no baile mientras
   sube y arrastre el layout. */

.stat-n { font-variant-numeric: tabular-nums; }

/* ══ ACORDEÓN DE PAQUETES ═════════════════════════════════════
   Escritorio: paneles que se ensanchan al pasar el ratón.
   Móvil: carrusel deslizable. Se anima flex-grow, que sí provoca
   layout — pero solo en 4 elementos y con GPU compositing por el
   will-change, que se retira al terminar. */

.paquetes { display: flex; gap: var(--space-xs); }

.paquete {
  position: relative;
  flex: 1;
  min-width: 0;
  height: clamp(340px, 42vh, 420px);
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--linea-vis);
  text-decoration: none;
  display: block;
  transition: flex-grow var(--duration-slow) var(--ease-out-expo),
              border-color var(--duration-normal);
}
.paquete img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(0.9) brightness(0.75);
  transition: filter var(--duration-slow) var(--ease-out-expo),
              transform var(--duration-slow) var(--ease-out-expo);
}
.paquete::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8, 7, 10, 0.96) 8%, rgba(8, 7, 10, 0.35) 55%, transparent 100%);
}

.paquete-body {
  position: absolute; z-index: 2; bottom: 0; left: 0; right: 0;
  padding: var(--space-sm) var(--space-md) var(--space-md);
}
.paquete-tag {
  display: inline-block;
  font-size: 0.6rem; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fucsia);
  margin-bottom: var(--space-2xs);
}
.paquete h3 {
  font-size: var(--text-h3); color: var(--hueso);
  transition: color var(--duration-fast);
}
.paquete-precio {
  font-size: var(--text-sm); color: var(--fucsia-br);
  font-weight: 600; margin-top: 0.15rem;
}
/* La descripción y el CTA solo aparecen en el panel expandido. */
.paquete-extra {
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height var(--duration-slow) var(--ease-out-expo),
              opacity var(--duration-normal) ease,
              margin-top var(--duration-slow) var(--ease-out-expo);
}
.paquete-extra p {
  font-size: var(--text-sm); color: var(--hueso-dim);
  line-height: var(--lh-normal); margin-bottom: var(--space-sm);
}

@media (hover: hover) and (min-width: 861px) {
  .paquetes:hover .paquete { flex-grow: 0.7; }
  .paquete:hover,
  .paquete:focus-visible {
    flex-grow: 2.6;
    border-color: rgba(232, 121, 249, 0.55);
  }
  .paquete:hover img,
  .paquete:focus-visible img { filter: grayscale(0) brightness(1); transform: scale(1.04); }
  .paquete:hover h3,
  .paquete:focus-visible h3 { color: var(--fucsia-br); }
  .paquete:hover .paquete-extra,
  .paquete:focus-visible .paquete-extra {
    max-height: 12rem; opacity: 1; margin-top: var(--space-sm);
  }
}

/* ══ VIDEOS (fachada: miniatura ahora, iframe al pulsar) ══════
   Un iframe de YouTube arrastra más de 1 MB y varios scripts de
   terceros. Cargamos solo la miniatura y montamos el reproductor
   cuando el visitante decide verlo: el LCP no se entera. */

.video-card {
  background: var(--negro-2);
  border: 1px solid var(--linea-vis);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: transform var(--duration-normal) var(--ease-out-expo), border-color var(--duration-normal);
}
.video-card:hover { transform: translateY(-4px); border-color: rgba(232, 121, 249, 0.4); }

.video-facade {
  position: relative;
  display: block; width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--negro-3);
  cursor: pointer;
  border: 0; padding: 0;
}
.video-facade img { width: 100%; height: 100%; object-fit: cover; }
.video-facade::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(8, 7, 10, 0.25);
  transition: background var(--duration-normal);
}
.video-facade:hover::after { background: rgba(8, 7, 10, 0.05); }
.video-play {
  position: absolute; z-index: 2; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 62px; height: 44px; border-radius: 12px;
  background: rgba(8, 7, 10, 0.72);
  border: 1px solid rgba(244, 240, 245, 0.25);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--duration-normal), transform var(--duration-normal) var(--ease-out-back);
}
.video-facade:hover .video-play { background: var(--fucsia); transform: translate(-50%, -50%) scale(1.08); }
.video-play svg { width: 20px; height: 20px; fill: var(--hueso); }
.video-facade:hover .video-play svg { fill: var(--negro); }
.video-card iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }
.video-meta { padding: var(--space-xs) var(--space-md) var(--space-md); }
.video-artista { font-size: var(--text-h3); font-weight: 700; }
.video-genero {
  font-size: var(--text-xs); color: var(--fucsia);
  text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600;
  margin-bottom: 0.15rem;
}
.video-fecha { font-size: var(--text-xs); color: var(--hueso-dim); margin-top: 0.15rem; }

/* ══ FORMULARIO DE BOLETÍN ════════════════════════════════════ */

.newsletter {
  background: linear-gradient(135deg, rgba(232, 121, 249, 0.1), rgba(18, 16, 22, 0.7));
  border: 1px solid rgba(232, 121, 249, 0.3);
  border-radius: var(--radius-card);
  padding: var(--space-lg);
}
.newsletter h2, .newsletter h3 { font-size: var(--text-h3); margin-bottom: var(--space-2xs); }
.newsletter p { font-size: var(--text-sm); color: var(--hueso-dim); margin-bottom: var(--space-md); }
.nl-form { display: flex; flex-direction: column; gap: var(--space-xs); }
.nl-row { display: flex; gap: var(--space-xs); flex-wrap: wrap; }
/* flex-basis de 14rem para que en escritorio vayan lado a lado, pero
   min-width:0 para que puedan encogerse por debajo de eso. Sin ese
   min-width:0 los campos no bajaban de 224px y ensanchaban la página
   entera en pantallas de 320px. */
.nl-field { flex: 1 1 14rem; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2xs); }
.nl-field input { min-width: 0; }
.nl-field label {
  font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--hueso-dim);
}
.nl-field input {
  background: rgba(8, 7, 10, 0.6);
  border: 1.5px solid var(--linea-vis);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.9rem;
  color: var(--hueso);
  font: inherit; font-size: var(--text-sm);
  transition: border-color var(--duration-fast);
}
.nl-field input::placeholder { color: rgba(244, 240, 245, 0.35); }
.nl-field input:focus { border-color: var(--fucsia); outline: none; }
.nl-field input:user-invalid { border-color: #f87171; }
.nl-error { font-size: var(--text-xs); color: #fca5a5; display: none; }
.nl-field input:user-invalid ~ .nl-error { display: block; }
.nl-legal { font-size: var(--text-xs); color: var(--hueso-dim); line-height: var(--lh-normal); }
.nl-legal a { color: var(--fucsia); }

/* Hero de página interior: sin foto de fondo, tipografía protagonista. */
.hero-txt { padding: calc(68px + var(--space-xl)) var(--space-gutter) var(--space-lg); }
.hero-txt-inner { max-width: var(--max-w); margin: 0 auto; }
.hero-txt h1 { font-size: var(--text-hero); margin-bottom: var(--space-md); max-width: 20ch; }
.hero-txt .lede {
  font-size: var(--text-lg); color: var(--hueso-dim);
  font-weight: 400; line-height: var(--lh-loose);
  max-width: var(--max-w-prose);
}
.hero-txt .accent { color: var(--fucsia); }

/* ── Barra de cifras ──
   Las cuatro celdas comparten la misma estructura de tres filas
   (etiqueta arriba · número · etiqueta abajo) para que las líneas
   queden alineadas entre columnas aunque algunas etiquetas falten. */
.stats-bar {
  /* minmax(0, 1fr) y no 1fr a secas: `1fr` es en realidad
     minmax(auto, 1fr), así que una etiqueta larga ensancha su columna a
     costa de las demás y las líneas divisorias dejan de estar a
     distancias iguales. Con el mínimo en 0, las cuatro columnas miden lo
     mismo pase lo que pase con el texto. */
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--linea-vis);
  border-bottom: 1px solid var(--linea);
  max-width: var(--max-w); margin: var(--space-lg) auto 0;
}
.stat {
  padding: var(--space-md) var(--space-sm);
  border-right: 1px solid var(--linea);
  display: grid;
  grid-template-rows: 1.2em auto 1.4em;
  align-content: center;
  gap: var(--space-2xs);
  text-align: center;
}
.stat:last-child { border-right: none; }
.stat-top {
  font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--hueso);
  align-self: end;
}
.stat-n {
  /* Un 20% por encima de --text-xl. */
  font-size: clamp(1.44rem, 1.32rem + 0.6vw, 1.8rem);
  font-weight: 800; line-height: 1; color: var(--hueso);
  font-variant-numeric: tabular-nums;
}
.stat-l { font-size: var(--text-xs); color: var(--hueso-dim); align-self: start; }

/* ── Ruedas de dígitos (efecto slot) ──
   Cada cifra se parte en columnas de 0-9 que giran hasta dejar arriba
   el dígito correcto. Los caracteres que no son dígitos (comas, «S/»,
   «+», «h») se quedan fijos. */
/* `justify-content` no hace nada mientras esto sea de verdad un
   inline-flex, porque una caja en línea se ajusta a su contenido y no
   sobra espacio que repartir. Importa cuando .odo cae sobre un hijo de
   rejilla —que es justo lo que hace el contador con .stat-n—: ahí el
   navegador convierte el inline-flex en flex, la caja pasa a ocupar toda
   la columna y la disposición flex ignora el `text-align: center` que
   heredaba. Sin esta línea, la cifra se pega a la izquierda en cuanto
   termina de girar, y solo entonces: por eso la barra se ve centrada al
   cargar y descuadrada un segundo después. */
.odo { display: inline-flex; align-items: baseline; justify-content: center; }
.odo-d {
  display: inline-block;
  height: 1em; overflow: hidden;
  vertical-align: baseline;
}
.odo-r {
  display: flex; flex-direction: column;
  line-height: 1;
  transform: translateY(0);
  will-change: transform;
}
.odo-r span { height: 1em; display: block; }
.odo-fijo { display: inline-block; }

/* ══ SLIDER (scroll-snap nativo, sin librería) ════════════════ */

.slider {
  display: flex; gap: var(--space-sm);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 0.25rem 0 var(--space-sm);
  /* Deja respirar la última tarjeta contra el borde de la pantalla. */
  scroll-padding-left: 0;
}
.slider::-webkit-scrollbar { display: none; }
.slider > * { scroll-snap-align: start; flex-shrink: 0; }

.slider-controls {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: var(--space-sm);
}
.slider-hint { font-size: var(--text-xs); color: var(--hueso-dim); }
.slider-arrows { display: flex; gap: var(--space-2xs); }
.slider-arrow {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1.5px solid var(--linea-vis);
  color: var(--hueso);
  display: flex; align-items: center; justify-content: center;
  transition: border-color var(--duration-fast), color var(--duration-fast), transform var(--duration-fast);
}
.slider-arrow:hover { border-color: var(--fucsia); color: var(--fucsia); }
.slider-arrow:active { transform: scale(0.92); }
.slider-arrow[disabled] { opacity: 0.3; cursor: not-allowed; }
.slider-arrow[disabled]:hover { border-color: var(--linea-vis); color: var(--hueso); transform: none; }

/* ══ TARJETAS DE NAVEGACIÓN (foto + título) ═══════════════════ */

.nav-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }

/* Variantes de columnas como CLASE, nunca como style="" en línea:
   un estilo en línea gana a cualquier media query, así que una rejilla
   declarada así jamás colapsaría en móvil. */
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

/* Bloque de la guía: texto + formulario de boletín. */
.guia-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--space-xl); align-items: start; }

/* Ficha de instructor: retrato + biografía. */
.instructor-grid { display: grid; grid-template-columns: 280px 1fr; gap: var(--space-xl); align-items: center; }
@media (max-width: 860px) {
  .instructor-grid { grid-template-columns: 1fr; gap: var(--space-lg); justify-items: center; text-align: center; }
  .instructor-grid .s-eyebrow { justify-content: center; }
}

.nav-card {
  position: relative;
  display: block;
  /* 4:5 daba tarjetas muy verticales y con mucho aire muerto arriba.
     3:4 equilibra mejor la foto con el bloque de texto. */
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--linea-vis);
  text-decoration: none;
  transition: transform var(--duration-normal) var(--ease-out-expo),
              border-color var(--duration-normal);
}
.nav-card:hover { transform: translateY(-6px); border-color: rgba(232, 121, 249, 0.5); }
.nav-card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out-expo), filter var(--duration-slow);
  filter: grayscale(0.85);
}
.nav-card:hover img { transform: scale(1.06); filter: grayscale(0); }
.nav-card::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8, 7, 10, 0.95) 5%, rgba(8, 7, 10, 0.15) 60%, transparent 100%);
}
.nav-card-body { position: absolute; z-index: 2; bottom: 0; left: 0; right: 0; padding: var(--space-sm) var(--space-md) var(--space-md); }
.nav-card-tag {
  display: inline-block;
  background: var(--fucsia); color: var(--negro);
  font-size: 0.6rem; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.2rem 0.5rem; border-radius: 4px;
  margin-bottom: var(--space-2xs);
}
.nav-card h3 { font-size: var(--text-h3); color: var(--hueso); transition: color var(--duration-fast); }
.nav-card:hover h3 { color: var(--fucsia-br); }
.nav-card p { font-size: var(--text-sm); color: var(--hueso-dim); margin-top: 0.25rem; line-height: var(--lh-snug); }

.nav-card--featured { border-color: rgba(232, 121, 249, 0.5); box-shadow: 0 0 20px rgba(232, 121, 249, 0.15); }

/* ══ TARJETA GENÉRICA ═════════════════════════════════════════ */

.card {
  background: var(--negro-2);
  border: 1px solid var(--linea-vis);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: transform var(--duration-normal) var(--ease-out-expo), border-color var(--duration-normal);
}
.card--hover:hover { transform: translateY(-4px); border-color: rgba(232, 121, 249, 0.4); }
.card-media { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.card-body { padding: var(--space-sm) var(--space-md) var(--space-md); }
.card-body h3 { font-size: var(--text-h3); margin-bottom: var(--space-2xs); }
.card-body p { font-size: var(--text-sm); color: var(--hueso-dim); line-height: var(--lh-snug); margin-top: 0.25rem; }

/* ══ TARJETA DE CABINA (precio en 3 columnas) ═════════════════ */

.booth-card { display: flex; flex-direction: column; }
.booth-card .card-media { aspect-ratio: 16 / 9; }
.booth-body { padding: var(--space-md); display: flex; flex-direction: column; flex: 1; }
.booth-name { font-size: var(--text-h3); color: var(--fucsia-br); }
.booth-gear { font-size: var(--text-sm); color: var(--hueso-dim); margin-bottom: var(--space-md); }
.booth-prices { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2xs); margin-top: auto; }
.price-box {
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--linea-vis);
  border-radius: var(--radius-sm);
  padding: var(--space-xs) 0.3rem;
  text-align: center;
}
.price-box b { display: block; font-size: var(--text-base); font-weight: 700; }
.price-box span { font-size: 0.6rem; color: var(--hueso-dim); }

/* ══ TABLAS ═══════════════════════════════════════════════════
   Con overflow propio: una tabla ancha nunca debe provocar scroll
   horizontal en el body. */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--linea-vis);
  border-radius: var(--radius-card);
  margin: var(--space-md) 0;
  -webkit-overflow-scrolling: touch;
}
.table-wrap table { min-width: 34rem; }
.table-wrap caption {
  text-align: left; padding: var(--space-sm) var(--space-md);
  font-size: var(--text-xs); color: var(--hueso-dim);
  border-bottom: 1px solid var(--linea);
}
.table-wrap th, .table-wrap td {
  padding: var(--space-xs) var(--space-md);
  text-align: left; font-size: var(--text-sm);
  border-bottom: 1px solid var(--linea);
}
.table-wrap th {
  background: var(--negro-3);
  font-weight: 600; color: var(--hueso);
  font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase;
}
.table-wrap tbody tr:last-child td { border-bottom: none; }
.table-wrap tbody tr:hover { background: rgba(232, 121, 249, 0.04); }
.table-wrap td strong { color: var(--fucsia-br); }

/* ══ LISTAS DE CONTENIDO ══════════════════════════════════════ */

.check-list { display: flex; flex-direction: column; gap: var(--space-xs); }
.check-list li {
  position: relative; padding-left: 1.6rem;
  font-size: var(--text-sm); color: rgba(244, 240, 245, 0.82);
  line-height: var(--lh-normal);
}
.check-list li::before {
  content: '✓'; position: absolute; left: 0;
  color: var(--fucsia); font-weight: 700;
}

.prose { max-width: var(--max-w-prose); }
.prose h2 { font-size: var(--text-h2); margin: var(--space-xl) 0 var(--space-sm); }
.prose h3 { font-size: var(--text-h3); margin: var(--space-lg) 0 var(--space-xs); color: var(--fucsia-br); }
.prose p { margin-bottom: var(--space-sm); color: rgba(244, 240, 245, 0.82); line-height: var(--lh-loose); }
.prose ul, .prose ol { margin-bottom: var(--space-sm); display: flex; flex-direction: column; gap: var(--space-xs); }
.prose ul li { position: relative; padding-left: 1.2rem; color: rgba(244, 240, 245, 0.82); }
.prose ul li::before { content: '·'; position: absolute; left: 0.35rem; color: var(--fucsia); font-weight: 700; }
.prose ol { counter-reset: n; }
.prose ol li { position: relative; padding-left: 1.8rem; color: rgba(244, 240, 245, 0.82); counter-increment: n; }
.prose ol li::before {
  content: counter(n); position: absolute; left: 0;
  color: var(--fucsia); font-weight: 700; font-size: var(--text-sm);
}
.prose a { color: var(--fucsia); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--fucsia-br); }
.prose strong { color: var(--hueso); font-weight: 600; }

/* ══ PASOS / MÓDULOS NUMERADOS ════════════════════════════════ */

.steps { display: flex; flex-direction: column; gap: var(--space-sm); }
.step {
  display: flex; gap: var(--space-md); align-items: flex-start;
  background: var(--negro-2);
  border: 1px solid var(--linea-vis);
  border-radius: var(--radius-card);
  padding: var(--space-md);
  transition: transform var(--duration-normal) var(--ease-out-expo), border-color var(--duration-normal);
}
.step:hover { transform: translateY(-3px); border-color: rgba(232, 121, 249, 0.45); }
.step-n {
  flex-shrink: 0;
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--fucsia); color: var(--negro);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-xl); font-weight: 800;
}
.step--muted .step-n { background: var(--negro-3); color: var(--hueso); border: 1px solid var(--linea-vis); }
.step h3 { font-size: var(--text-h3); margin-bottom: 0.15rem; }
.step-meta {
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fucsia); margin-bottom: var(--space-xs);
}
.step p { font-size: var(--text-sm); color: var(--hueso-dim); line-height: var(--lh-normal); }

/* ══ PRECIO DESTACADO ═════════════════════════════════════════ */

.price-hero {
  background: var(--negro-2);
  border: 1px solid var(--linea-vis);
  border-radius: var(--radius-card);
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
  max-width: 34rem; margin: 0 auto;
  transition: border-color var(--duration-normal);
}
.price-hero:hover { border-color: rgba(232, 121, 249, 0.4); }
.price-hero--pop { border-color: var(--fucsia); box-shadow: 0 0 30px rgba(232, 121, 249, 0.12); }
.price-label {
  font-size: var(--text-xs); letter-spacing: var(--track-wide);
  text-transform: uppercase; color: var(--hueso-dim);
  margin-bottom: var(--space-xs);
}
.price-n {
  font-size: clamp(2.6rem, 1.6rem + 4vw, 4.4rem);
  font-weight: 800; line-height: 1; letter-spacing: -0.02em;
}
.price-was {
  font-size: var(--text-base); color: var(--hueso-dim);
  text-decoration: line-through; margin-top: var(--space-2xs);
}
.price-note { color: var(--fucsia); font-size: var(--text-sm); margin-top: var(--space-xs); }

.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); align-items: start; }
.plan {
  background: var(--negro-2);
  border: 1px solid var(--linea-vis);
  border-top: 3px solid var(--linea-vis);
  border-radius: var(--radius-card);
  padding: var(--space-lg) var(--space-md);
  transition: transform var(--duration-normal) var(--ease-out-expo), border-color var(--duration-normal);
}
.plan:hover { transform: translateY(-4px); }
.plan--1 { border-top-color: var(--exito); }
.plan--2 { border-top-color: var(--info); }
.plan--3 { border-top-color: var(--fucsia); }
.plan h3 { font-size: var(--text-xl); margin-bottom: 0.1rem; }
.plan-tag {
  font-size: var(--text-xs); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--hueso-dim);
  margin-bottom: var(--space-md);
}
.plan-goal {
  background: rgba(0, 0, 0, 0.4);
  border-radius: var(--radius-sm);
  padding: var(--space-sm); text-align: center;
  margin-top: var(--space-md);
}
.plan-goal span { display: block; font-size: 0.62rem; color: var(--hueso-dim); text-transform: uppercase; letter-spacing: 0.1em; }
.plan-goal b { font-size: var(--text-sm); }
.plan--1 .plan-goal b { color: var(--exito); }
.plan--2 .plan-goal b { color: var(--info); }
.plan--3 .plan-goal b { color: var(--fucsia); }

/* ══ FAQ (acordeón con <details>: funciona sin JavaScript) ═════ */

.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-xl); margin-top: var(--space-lg); }
.faq-col { display: flex; flex-direction: column; }
.faq-col:first-child { border-right: 1px solid var(--linea-vis); padding-right: var(--space-lg); }

.qi { border-bottom: 1px solid var(--linea); }
.qi summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm);
  padding: var(--space-sm) 0;
  font-size: var(--text-base); font-weight: 500;
  color: var(--hueso); cursor: pointer;
  list-style: none;
  transition: color var(--duration-fast);
}
.qi summary::-webkit-details-marker { display: none; }
.qi summary:hover { color: var(--fucsia); }
.qi summary::after {
  content: '+';
  flex-shrink: 0;
  font-size: var(--text-xl); line-height: 1;
  color: var(--fucsia);
  transition: transform var(--duration-normal) var(--ease-out-expo);
}
.qi[open] summary::after { transform: rotate(45deg); }
.qi-a { padding-bottom: var(--space-sm); }
.qi-a p { font-size: var(--text-sm); color: var(--hueso-dim); line-height: var(--lh-loose); }
.qi-a p + p { margin-top: var(--space-xs); }

/* ══ CTA DE CIERRE ════════════════════════════════════════════ */

.cta-band {
  position: relative;
  padding: var(--space-section) var(--space-gutter);
  text-align: center;
  border-top: 1px solid var(--linea);
  background: radial-gradient(ellipse at 50% 120%, rgba(232, 121, 249, 0.16), transparent 62%);
}
.cta-band-inner { max-width: 44rem; margin: 0 auto; }
.cta-band .s-eyebrow { justify-content: center; }
.cta-band h2 { font-size: var(--text-h2); margin-bottom: var(--space-sm); }
.cta-band p { color: var(--hueso-dim); margin-bottom: var(--space-md); font-weight: 400; }
.cta-btns { display: flex; gap: var(--space-xs); justify-content: center; flex-wrap: wrap; }

/* CTA en línea, el que va justo tras el primer párrafo. */
.cta-inline {
  display: flex; align-items: center; gap: var(--space-sm);
  flex-wrap: wrap;
  margin: var(--space-md) 0;
}
.cta-inline-note { font-size: var(--text-xs); color: var(--hueso-dim); }

/* ══ COMPARTIR ════════════════════════════════════════════════ */

.share-btns {
  display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap;
  padding: var(--space-md) 0;
  border-top: 1px solid var(--linea);
  margin-top: var(--space-lg);
}
.share-label { font-size: var(--text-xs); color: var(--hueso-dim); letter-spacing: 0.08em; text-transform: uppercase; }
.share-btn {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  border: 1.5px solid var(--linea-vis);
  border-radius: var(--radius-pill);
  padding: 0.4rem 0.9rem;
  font-size: var(--text-xs);
  color: var(--hueso); text-decoration: none;
  transition: border-color var(--duration-fast), color var(--duration-fast);
}
.share-btn:hover { border-color: var(--fucsia); color: var(--fucsia); }
.share-btn svg { width: 14px; height: 14px; fill: currentColor; }

/* ══ WHATSAPP FLOTANTE ════════════════════════════════════════ */

.wa-float {
  position: fixed; bottom: var(--space-lg); right: var(--space-lg);
  z-index: var(--z-float);
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--whatsapp);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-card);
  transition: transform var(--duration-fast) var(--ease-out-back);
}
.wa-float:hover { transform: scale(1.1); }
.wa-float svg { width: 26px; height: 26px; fill: #fff; }

/* ══ CTA FIJA EN MÓVIL ════════════════════════════════════════
   Solo bajo 860px. El botón principal siempre a un pulgar de
   distancia, sin tapar el contenido (el body compensa con
   padding-bottom). */

.mobile-cta { display: none; }

/* ══ FOOTER ═══════════════════════════════════════════════════ */

.footer-contact {
  background: var(--fucsia);
  border-radius: var(--radius-card);
  margin: 0 var(--space-gutter) var(--space-md);
  padding: var(--space-xl) var(--space-lg);
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-lg);
  color: var(--negro);
}
.fc-left h2 { font-size: var(--text-h2); color: var(--negro); margin-bottom: var(--space-md); }
.fc-left .s-eyebrow { color: rgba(8, 7, 10, 0.55); }
.fc-item {
  display: flex; align-items: center; gap: var(--space-xs);
  font-size: var(--text-sm); color: rgba(8, 7, 10, 0.78);
  margin-top: var(--space-xs); text-decoration: none;
}
.fc-item:hover { color: var(--negro); text-decoration: underline; }
.fc-item svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; flex-shrink: 0; }
.fc-eyebrow {
  font-size: 0.62rem; font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(8, 7, 10, 0.55); margin-bottom: var(--space-xs);
}
.fc-links { display: flex; flex-direction: column; gap: var(--space-2xs); }
.fc-links a {
  font-size: var(--text-sm); color: rgba(8, 7, 10, 0.78);
  text-decoration: none; transition: color var(--duration-fast);
}
.fc-links a:hover { color: var(--negro); text-decoration: underline; }
.btn-footer {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  background: var(--negro); color: var(--hueso);
  padding: 0.7rem 1.5rem; border-radius: var(--radius-pill);
  font-size: var(--text-sm); font-weight: 600;
  text-decoration: none; margin-top: var(--space-sm);
  transition: transform var(--duration-fast) var(--ease-out-expo);
}
.btn-footer:hover { transform: translateY(-2px); }

.footer-divider { height: 1px; background: var(--linea); margin: 0 var(--space-gutter); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: var(--space-sm);
  padding: var(--space-md) var(--space-gutter);
  max-width: var(--max-w); margin: 0 auto;
}
.footer-logo-txt {
  font-size: var(--text-sm); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(244, 240, 245, 0.3);
}
.footer-socials { display: flex; gap: var(--space-2xs); }
.footer-socials a {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--linea-vis);
  display: flex; align-items: center; justify-content: center;
  color: var(--hueso-dim); text-decoration: none;
  transition: border-color var(--duration-fast), color var(--duration-fast);
}
.footer-socials a:hover { border-color: var(--fucsia); color: var(--fucsia); }
.footer-socials svg { width: 16px; height: 16px; fill: currentColor; }
.footer-copy { font-size: var(--text-xs); color: rgba(244, 240, 245, 0.28); }
.footer-nap { font-size: var(--text-xs); color: rgba(244, 240, 245, 0.28); }

/* ══ ANIMACIÓN DE ENTRADA ═════════════════════════════════════
   Solo opacity + transform. Se activa por IntersectionObserver;
   si el JS no carga, .reveal nunca se oculta (ver site.js). */

.js .reveal { opacity: 0; transform: translateY(24px); }
.js .reveal.is-visible {
  opacity: 1; transform: none;
  transition: opacity var(--duration-slow) var(--ease-out-expo),
              transform var(--duration-slow) var(--ease-out-expo);
}

/* Entrada en cascada: los hijos de un contenedor marcado entran uno
   detrás de otro en vez de todos a la vez. El índice lo pone site.js. */
.js [data-cascada] > * {
  opacity: 0;
  transform: translateY(26px);
}
.js [data-cascada].is-visible > * {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.62s var(--ease-out-expo),
    transform 0.72s cubic-bezier(0.22, 1.18, 0.36, 1);
  transition-delay: calc(var(--n, 0) * 70ms);
}

/* ══ RESPONSIVE ═══════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .nav-cards, .grid-3, .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .plans { grid-template-columns: 1fr; }
  .guia-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  .footer-contact { grid-template-columns: 1fr 1fr; }
  .fc-left { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .nav-links, .nav-btns { display: none; }
  .nav-toggle { display: block; }

  .hero { padding-top: calc(68px + var(--space-sm)); }
  .hero-txt { padding-top: calc(68px + var(--space-lg)); }

  /* CAUSA DEL TEXTO CORTADO EN MÓVIL:
     el .hero-body iba en position:absolute sobre una imagen de altura
     fija, así que cuando el titular ocupaba cuatro líneas el texto se
     salía de la caja y quedaba recortado.

     Arreglo: en móvil el texto vuelve al flujo normal debajo de la
     imagen. La diapositiva crece con su contenido y es imposible que
     recorte, mida lo que mida el titular. */
  .hero-slide {
    display: flex; flex-direction: column;
    /* El mismo negro al que llega el degradado de la imagen. Con
       --negro-2 quedaba una costura visible en la unión. */
    background: var(--negro);
  }
  .hero-media { aspect-ratio: 3 / 2; }
  .hero-media::after {
    background: linear-gradient(to top, var(--negro) 0%, rgba(8, 7, 10, 0.55) 38%, transparent 92%);
  }
  .hero-body {
    position: static;
    padding: var(--space-md);
    margin-top: -3rem;            /* solapa un poco la imagen: da profundidad */
    max-width: none;
  }
  .hero-body h1, .hero-body h2 { font-size: clamp(1.6rem, 1.1rem + 3.2vw, 2.4rem); }
  .hero-body p { font-size: var(--text-base); }

  /* Todas las diapositivas miden lo mismo: si no, el carril salta de
     alto al deslizar entre banners de distinta longitud. */
  .hero-track { align-items: stretch; }
  .hero-slide > .hero-body { flex: 1; display: flex; flex-direction: column; }
  .hero-btns { margin-top: auto; }

  /* Paquetes: en móvil, carrusel deslizable con todo el texto visible. */
  .paquetes {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: var(--space-xs);
  }
  .paquetes::-webkit-scrollbar { display: none; }
  .paquete {
    flex: 0 0 78vw; max-width: 300px;
    height: 400px;
    scroll-snap-align: start;
  }
  .paquete img { filter: grayscale(0) brightness(0.8); }
  .paquete-extra { max-height: none; opacity: 1; margin-top: var(--space-xs); }

  /* En móvil van 2×2, no las cuatro en fila. Antes cabían porque las
     cifras eran cortas («2», «22 h»); con «CDJ-3000X» en una columna de
     80 px habría que bajar la tipografía a un tamaño ilegible para que
     entrase. Dos filas dan el doble de ancho por celda y el texto se lee
     sin encogerlo hasta lo ridículo. */
  .stats-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { padding: var(--space-sm) 0.6rem; gap: 0.2rem; }
  .stat-n { font-size: clamp(1.1rem, 0.7rem + 2.2vw, 1.6rem); }
  .stat-top { font-size: 0.56rem; letter-spacing: 0.08em; }
  .stat-l { font-size: 0.62rem; line-height: 1.3; }
  /* Con dos columnas, el borde derecho solo sobra en la columna de la
     derecha; y la fila de arriba necesita separarse de la de abajo. */
  .stat:nth-child(2n) { border-right: none; }
  .stat:nth-child(-n + 2) { border-bottom: 1px solid var(--linea); }

  .faq-grid { grid-template-columns: 1fr; }
  .faq-col:first-child { border-right: none; padding-right: 0; }

  .step { flex-direction: column; gap: var(--space-sm); }

  /* Barra CTA fija: aparece solo en móvil. */
  .mobile-cta {
    display: flex;
    position: fixed; bottom: 0; left: 0; right: 0;
    z-index: var(--z-mobile-cta);
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    padding-bottom: calc(var(--space-xs) + env(safe-area-inset-bottom));
    background: rgba(8, 7, 10, 0.94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--linea-vis);
  }
  /* min-width:0 es imprescindible: por defecto un ítem flex no se encoge
     por debajo de su contenido, y con white-space:nowrap el botón se salía
     de la pantalla en 320px. */
  .mobile-cta > * { flex: 1; min-width: 0; justify-content: center; padding-inline: 0.6rem; }
  body { padding-bottom: 74px; }

  /* El flotante de WhatsApp sube para no chocar con la barra. */
  .wa-float { bottom: calc(74px + var(--space-sm)); right: var(--space-sm); width: 46px; height: 46px; }
  .wa-float svg { width: 22px; height: 22px; }
}

/* Pantallas muy estrechas (iPhone SE y similares): la barra fija tiene que
   caber en 320px sin recortar ninguna etiqueta. */
@media (max-width: 400px) {
  .mobile-cta > * { font-size: var(--text-xs); padding-inline: 0.4rem; }
}

@media (max-width: 600px) {
  .nav-cards, .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .newsletter { padding: var(--space-md); }
  .footer-contact { grid-template-columns: 1fr; padding: var(--space-lg) var(--space-md); }
  .footer-bottom { flex-direction: column; text-align: center; }
  .booth-prices { grid-template-columns: repeat(3, 1fr); }
  .price-hero { padding: var(--space-lg) var(--space-md); }
}

/* Tarjetas en carrusel dentro del slider: ancho fijo por viewport. */
@media (max-width: 860px) {
  .slider > .card,
  .slider > .nav-card { width: 78vw; max-width: 320px; }
}


/* ══ BANNER CON FOTO DE FONDO ═══════════════════════════════════
   Patrón reutilizable: una sola imagen ocupa toda la sección y el
   texto va encima. Sustituye a los bloques de tabla + párrafo, que
   en móvil se leían como un muro y obligaban a scroll horizontal.

   La legibilidad no se deja al azar: la foto va atenuada y con dos
   gradientes encima, uno vertical y otro radial, de modo que la
   zona donde cae el texto siempre queda por debajo de un 22% de
   luminancia y el contraste del hueso sobre ella supera 7:1. */

.banner-foto {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--radius-card);
  margin-block: var(--space-lg);
}
.banner-foto > picture,
.banner-foto > img {
  position: absolute; inset: 0;
  z-index: -2;
}
.banner-foto picture img,
.banner-foto > img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.62;
}
.banner-foto::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to right, rgba(8, 7, 10, 0.9) 12%, rgba(8, 7, 10, 0.35) 62%, transparent),
    linear-gradient(to top, rgba(8, 7, 10, 0.88), rgba(8, 7, 10, 0.28) 55%, rgba(8, 7, 10, 0.6));
}
.banner-foto-texto {
  position: relative;
  max-width: 46rem;
  padding: clamp(2.5rem, 1.5rem + 5vw, 6rem) var(--space-gutter);
}
.banner-foto-texto p {
  color: var(--hueso-dim);
  font-size: var(--text-lg);
  margin: var(--space-sm) 0 var(--space-lg);
  text-wrap: pretty;
}

/* Variante a sangre completa, sin márgenes ni esquinas redondeadas. */
.banner-foto--full { border-radius: 0; margin-block: 0; }

/* El banner de la guía es esta misma pieza dentro del inicio, pero
   con el texto centrado en vez de alineado a la izquierda. */
.banner-guia {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.banner-guia > picture { position: absolute; inset: 0; z-index: -2; }
.banner-guia picture img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.4;
}
.banner-guia::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 100% at 22% 50%, rgba(8, 7, 10, 0.93), transparent 70%),
    linear-gradient(to top, rgba(8, 7, 10, 0.96), rgba(8, 7, 10, 0.5) 55%, rgba(8, 7, 10, 0.85));
}
.banner-guia-texto {
  position: relative;
  max-width: 44rem;
  margin-inline: auto;
  padding: clamp(3rem, 2rem + 6vw, 7rem) var(--space-gutter);
  text-align: center;
}
.banner-guia-texto p {
  color: var(--hueso-dim);
  font-size: var(--text-lg);
  margin: var(--space-sm) 0 var(--space-lg);
  text-wrap: pretty;
}

/* ══ SLIDER DE VÍDEOS ═══════════════════════════════════════════
   Las tarjetas de set eran una rejilla de tres. En un carril con
   scroll-snap necesitan ancho propio: sin él, flex-shrink:0 las
   dejaría a su ancho intrínseco (el del iframe) y se desbordarían. */

.slider-videos > .video-card { width: clamp(260px, 30vw, 380px); }


/* ══ BANNER DE SESSIONS ═════════════════════════════════════════
   Los propios sets son el fondo. Van al 34% de opacidad y con dos
   gradientes encima, porque a plena luz el texto blanco sobre una
   foto de cabina iluminada no llegaba al 4.5:1 exigido. */

.hero-sets {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: calc(68px + var(--space-xl));
}
.hero-sets-fondo { position: absolute; inset: 0; z-index: -2; }
.sets-fondo-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  /* Un zoom lentísimo mientras está en pantalla: sin él, seis segundos
     sobre una imagen fija se leen como que la página se colgó. */
  transform: scale(1.06);
  transition: opacity 1200ms var(--ease-out-expo), transform 6800ms linear;
}
.sets-fondo-img[data-activo] { opacity: 0.34; transform: scale(1); }
.hero-sets::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(110% 90% at 18% 42%, rgba(8, 7, 10, 0.94), transparent 68%),
    linear-gradient(to top, rgba(8, 7, 10, 0.98) 8%, rgba(8, 7, 10, 0.5) 60%, rgba(8, 7, 10, 0.86));
}
.hero-sets-inner {
  position: relative;
  max-width: var(--max-w);
  margin-inline: auto;
  padding: var(--space-xl) var(--space-gutter) var(--space-2xl);
}
.hero-sets-inner h1 { max-width: 18ch; }
.hero-sets-inner .lede { max-width: 56ch; }
.hero-sets [data-set-nombre] { color: inherit; }

/* Galería horizontal de sets. */
.sets-tira {
  display: flex; gap: var(--space-xs);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  margin-top: var(--space-xl);
  padding-bottom: var(--space-2xs);
}
.sets-tira::-webkit-scrollbar { display: none; }
.sets-tira-item {
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: 148px;
  text-align: left;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: rgba(244, 240, 245, 0.05);
  border: 1px solid var(--linea);
  opacity: 0.55;
  transition: opacity var(--duration-normal), border-color var(--duration-normal), transform var(--duration-fast);
}
.sets-tira-item img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.sets-tira-nombre {
  display: block;
  padding: var(--space-2xs) var(--space-xs) 0;
  font-size: var(--text-sm); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sets-tira-genero {
  display: block;
  padding: 0 var(--space-xs) var(--space-xs);
  font-size: var(--text-xs); color: var(--hueso-dim);
}
.sets-tira-item:hover { opacity: 0.85; transform: translateY(-2px); }
.sets-tira-item[aria-current="true"] {
  opacity: 1;
  border-color: var(--fucsia);
  box-shadow: 0 0 0 1px var(--fucsia);
}

@media (max-width: 640px) {
  .sets-tira-item { width: 126px; }
}

/* ══ TUTORIAL DE DOS PASOS ══════════════════════════════════════ */

.tuto { list-style: none; display: grid; gap: var(--space-2xl); }
.tuto-paso {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: center;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 700ms var(--ease-out-expo), transform 700ms var(--ease-out-expo);
}
.tuto-paso[data-activo="true"],
[data-fin="true"] .tuto-paso { opacity: 1; transform: none; }
/* El segundo paso invierte el orden para que la maqueta no quede
   siempre en la misma columna y el bloque no se lea como una tabla. */
.tuto-paso[data-tuto-paso="2"] .tuto-demo { order: -1; }

.tuto-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--fucsia); color: var(--negro);
  font-weight: 700; font-size: var(--text-sm);
  margin-bottom: var(--space-sm);
}
.tuto-txt h3 { font-size: var(--text-h3); margin-bottom: var(--space-2xs); }
.tuto-txt p { color: var(--hueso-dim); text-wrap: pretty; }

.tuto-demo { display: flex; justify-content: center; }

/* Maqueta de la tarjeta de sala. */
.tuto-card {
  position: relative;
  width: min(300px, 100%);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--superficie);
  border: 1px solid var(--linea-vis);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.tuto-card-foto img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.tuto-card-body { padding: var(--space-sm) var(--space-md) var(--space-md); }
.tuto-card-t { font-weight: 700; font-size: var(--text-lg); }
.tuto-card-p { color: var(--hueso-dim); font-size: var(--text-sm); margin-bottom: var(--space-sm); }
.tuto-card-p i { font-style: normal; opacity: 0.7; }
.tuto-card-btn {
  border-radius: var(--radius-pill);
  background: var(--fucsia); color: var(--negro);
  text-align: center; font-weight: 600; font-size: var(--text-sm);
  padding: 0.6rem 1rem;
  transition: transform var(--duration-fast), filter var(--duration-fast);
}

/* Cursor de mentira que "pulsa" el botón. Solo transform y opacity. */
.tuto-cursor {
  position: absolute; right: 16%; bottom: 8%;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(244, 240, 245, 0.9);
  box-shadow: 0 0 0 6px rgba(232, 121, 249, 0.28);
  opacity: 0;
  pointer-events: none;
}
.tuto-paso[data-activo="true"] .tuto-cursor {
  animation: tutoCursor 2.6s var(--ease-out-expo) 400ms infinite;
}
.tuto-paso[data-activo="true"] .tuto-card-btn {
  animation: tutoPulsa 2.6s var(--ease-out-expo) 400ms infinite;
}
@keyframes tutoCursor {
  0%   { opacity: 0; transform: translate(26px, 26px) scale(1.1); }
  22%  { opacity: 1; transform: translate(0, 0) scale(1); }
  32%  { opacity: 1; transform: translate(0, 0) scale(0.78); }
  42%  { opacity: 1; transform: translate(0, 0) scale(1); }
  75%  { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(26px, 26px) scale(1.1); }
}
@keyframes tutoPulsa {
  0%, 28%, 46%, 100% { transform: scale(1); filter: none; }
  36% { transform: scale(0.95); filter: brightness(1.15); }
}

/* Maqueta de la ventana de extras. */
.tuto-pop {
  width: min(340px, 100%);
  border-radius: var(--radius-card);
  background: var(--superficie);
  border: 1px solid var(--linea-vis);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  padding: var(--space-md);
}
.tuto-pop-cab {
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--hueso-dim);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--linea);
  margin-bottom: var(--space-sm);
}
.tuto-opt {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center; gap: var(--space-xs);
  padding: var(--space-2xs) 0;
  font-size: var(--text-sm);
}
.tuto-box {
  width: 22px; height: 22px;
  border-radius: 6px;
  border: 1.5px solid var(--linea-vis);
  display: grid; place-items: center;
  transition: background var(--duration-normal), border-color var(--duration-normal);
}
.tuto-box svg {
  width: 13px; height: 13px;
  fill: none; stroke: var(--negro); stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round;
  /* El trazo se dibuja solo: 30 es de sobra para el largo real del
     check, y stroke-dashoffset sí es animable. */
  stroke-dasharray: 30; stroke-dashoffset: 30;
  transition: stroke-dashoffset 420ms var(--ease-out-expo) 90ms;
}
.tuto-opt[data-marcado="true"] .tuto-box,
[data-fin="true"] .tuto-opt .tuto-box { background: var(--fucsia); border-color: var(--fucsia); }
.tuto-opt[data-marcado="true"] .tuto-box svg,
[data-fin="true"] .tuto-opt .tuto-box svg { stroke-dashoffset: 0; }
.tuto-opt-p { color: var(--hueso-dim); font-variant-numeric: tabular-nums; }
.tuto-total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: var(--space-sm); padding-top: var(--space-sm);
  border-top: 1px solid var(--linea);
  font-size: var(--text-sm); color: var(--hueso-dim);
}
.tuto-total b { font-size: var(--text-h3); color: var(--fucsia); font-variant-numeric: tabular-nums; }

@media (max-width: 860px) {
  .tuto-paso { grid-template-columns: 1fr; gap: var(--space-lg); }
  .tuto-paso[data-tuto-paso="2"] .tuto-demo { order: 0; }
}

/* ══ VÍDEO VERTICAL (TikTok / Reels) ════════════════════════════ */

.video-vertical {
  display: grid;
  grid-template-columns: minmax(0, 300px) 1fr;
  gap: var(--space-xl);
  align-items: center;
}
.video-facade--vertical { aspect-ratio: 9 / 16; }
.video-facade--vertical picture { position: absolute; inset: 0; }
.video-facade--vertical img { width: 100%; height: 100%; object-fit: cover; }
.video-vertical .video-card iframe { aspect-ratio: 9 / 16; }
.video-vertical-txt p { color: var(--hueso-dim); font-size: var(--text-lg); margin-bottom: var(--space-md); text-wrap: pretty; }

@media (max-width: 860px) {
  .video-vertical { grid-template-columns: 1fr; gap: var(--space-lg); }
  .video-vertical .video-card { max-width: 300px; margin-inline: auto; }
}

/* Precio dentro de la tarjeta de nivel. */
.plan-precio {
  display: flex; align-items: baseline; gap: var(--space-2xs);
  margin: var(--space-2xs) 0 var(--space-sm);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--linea);
}
.plan-precio b { font-size: var(--text-h2); color: var(--fucsia); font-variant-numeric: tabular-nums; }
.plan-precio span { font-size: var(--text-xs); color: var(--hueso-dim); }


/* ══ CARRUSEL INFINITO DE SALAS ═════════════════════════════════
   Tres a la vista en escritorio. El ancho de cada tarjeta se calcula
   sobre el contenedor descontando los dos huecos, para que entren
   exactamente tres y la cuarta asome lo justo para insinuar que hay
   más. */

.salas-loop { overflow: hidden; }
.salas-loop-carril {
  display: flex;
  column-gap: var(--space-md);
  will-change: transform;
}
.salas-loop-carril > .sala {
  flex: 0 0 calc((100% - var(--space-md) * 2) / 3);
}

@media (max-width: 860px) {
  .salas-loop-carril > .sala { flex: 0 0 calc((100% - var(--space-md)) / 2); }
}
@media (max-width: 560px) {
  .salas-loop-carril > .sala { flex: 0 0 82%; }
}


/* ══ COMPARATIVA SOBRE FOTO ═════════════════════════════════════
   Sustituye a la rejilla de tarjetas con una imagen cada una. Seis
   fotos distintas para seis filas de dos palabras era ruido: la
   comparación se lee mejor como una lista sobre una única imagen.

   En escritorio son tres columnas —criterio, opción A, opción B—. En
   móvil cada fila se apila y las etiquetas «Controlador» y «CDJ-3000»
   pasan a verse dentro de cada valor, porque una cabecera de tabla
   fuera de pantalla no sirve de nada. */

.compara { padding-block: clamp(1.5rem, 1rem + 2vw, 3rem); }
.compara-inner {
  position: relative;
  max-width: 60rem;
  margin-inline: auto;
  padding-inline: var(--space-md);
}
.compara-cab,
.compara-fila {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap: var(--space-sm);
  align-items: baseline;
  padding: var(--space-sm) 0;
}
.compara-cab {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--hueso-dim);
  border-bottom: 1px solid var(--linea-vis);
}
.compara-cab > :last-child { color: var(--fucsia); }
.compara-fila + .compara-fila,
.compara-cab + .compara-fila { border-top: 1px solid var(--linea); }
.compara-clave { font-weight: 600; }
.compara-a, .compara-b { color: var(--hueso-dim); font-size: var(--text-sm); }
.compara-b { color: var(--hueso); }
.compara-et { display: none; }

@media (max-width: 720px) {
  .compara-cab { display: none; }
  .compara-fila {
    grid-template-columns: 1fr;
    gap: var(--space-2xs);
    padding: var(--space-md) 0;
  }
  .compara-clave { font-size: var(--text-lg); }
  .compara-et {
    display: block;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--track-wide);
    color: var(--hueso-dim);
  }
  .compara-b .compara-et { color: var(--fucsia); }
}


/* ══ CABECERA DE TEXTO CON FOTO ═════════════════════════════════
   Misma pieza que .hero-txt, pero con una imagen de fondo atenuada.
   Se usa donde la página necesita atmósfera antes del primer párrafo
   —la guía, por ejemplo— sin pagar el coste de un slider entero. */

.hero-txt--foto { position: relative; isolation: isolate; overflow: hidden; }
.hero-txt--foto > picture { position: absolute; inset: 0; z-index: -2; }
.hero-txt--foto picture img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.3;
}
.hero-txt--foto::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(110% 95% at 20% 45%, rgba(8, 7, 10, 0.94), transparent 70%),
    linear-gradient(to top, rgba(8, 7, 10, 0.98) 6%, rgba(8, 7, 10, 0.55) 58%, rgba(8, 7, 10, 0.88));
}

/* Cabecera compacta: se usa cuando lo importante viene justo debajo y
   el titular no debe empujarlo fuera del primer pantallazo. */
.hero-txt--corta { padding-bottom: var(--space-md); }
.section--pegada { padding-top: 0; }

/* Sin JavaScript, los pasos del tutorial nacen visibles: la animación
   de entrada no puede ser la única forma de ver el contenido. */
html:not(.js) .tuto-paso { opacity: 1; transform: none; }
html:not(.js) .tuto-box { background: var(--fucsia); border-color: var(--fucsia); }
html:not(.js) .tuto-box svg { stroke-dashoffset: 0; }


/* ══ REJILLA DE DATOS SOBRE UNA SOLA FOTO ═══════════════════════
   Antes cada tarjeta llevaba su propia imagen genérica de archivo.
   Con cuatro u ocho tarjetas eso son cuatro u ocho fotos distintas
   compitiendo entre sí para ilustrar frases de dos palabras: mucho
   ruido, y en móvil —donde se apilan en una columna— peor todavía.

   Ahora la foto es una sola para todo el bloque y las tarjetas se
   vuelven transparentes, así que lo que se lee es el dato. */

.datos-foto { padding: clamp(1.25rem, 1rem + 1.5vw, 2.5rem) 0; }
.datos-foto .datos {
  position: relative;
  margin: 0;
  padding-inline: var(--space-md);
}
.datos-foto .dato {
  background: rgba(8, 7, 10, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-color: rgba(244, 240, 245, 0.14);
}
.datos-foto .dato:hover { background: rgba(8, 7, 10, 0.62); }
/* Sin foto por tarjeta, el cuerpo ya no necesita compensar su altura. */
.datos-foto .dato-cuerpo { padding: var(--space-sm) var(--space-md) var(--space-md); }


/* ══ CÁPSULA DE LOS TRES NIVELES ════════════════════════════════
   Bloque repetido en inicio, curso de DJ, clase demo y el artículo de
   precios. Se genera desde site-data.json, así que precio y duración
   son los mismos en las cuatro páginas por construcción, no por
   disciplina al editar. */

.niveles-capsula { margin-block: var(--space-lg); }
.niveles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
.nivel {
  display: flex; flex-direction: column;
  padding: var(--space-lg) var(--space-md) var(--space-md);
  border-radius: var(--radius-card);
  background: var(--superficie);
  border: 1px solid var(--linea-vis);
  transition: transform var(--duration-normal), border-color var(--duration-normal);
}
.nivel:hover { transform: translateY(-4px); border-color: rgba(232, 121, 249, 0.45); }
/* El nivel destacado se distingue por borde y sombra, no por tamaño:
   escalarlo rompía la alineación de los botones al pie. */
.nivel--pop {
  border-color: var(--fucsia);
  box-shadow: 0 0 0 1px var(--fucsia), 0 22px 60px rgba(232, 121, 249, 0.12);
}
.nivel-n {
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: var(--track-wide); text-transform: uppercase;
  color: var(--fucsia);
  margin-bottom: var(--space-2xs);
}
.nivel h3 { font-size: var(--text-h3); }
.nivel-lema { font-size: var(--text-sm); color: var(--hueso-dim); margin-bottom: var(--space-sm); }
.nivel-precio {
  display: flex; align-items: baseline; gap: 0.35rem;
  padding-bottom: var(--space-2xs);
}
.nivel-precio b {
  font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em;
  color: var(--fucsia); font-variant-numeric: tabular-nums;
}
.nivel-precio span { font-size: var(--text-xs); color: var(--hueso-dim); }

/* Duración: un mes, ocho clases, veintidós horas. Es justo el dato que
   faltaba y que hacía ambiguo el antiguo "por módulo". */
.nivel-dura {
  display: flex; flex-wrap: wrap; gap: var(--space-2xs);
  padding-bottom: var(--space-sm);
  margin-bottom: var(--space-sm);
  border-bottom: 1px solid var(--linea);
}
.nivel-dura span {
  font-size: var(--text-xs);
  padding: 0.18rem 0.5rem;
  border-radius: var(--radius-pill);
  background: rgba(244, 240, 245, 0.07);
  color: var(--hueso-dim);
  white-space: nowrap;
}
.nivel .check-list { flex: 1; margin-bottom: var(--space-md); }

/* Cada tarjeta define su acento y todo lo demás lo consume. Así el color
   se cambia en un sitio y no hay que perseguir seis reglas. */
.nivel { --acento: var(--nivel-1); }
.nivel:nth-child(2) { --acento: var(--nivel-2); }
.nivel:nth-child(3) { --acento: var(--nivel-3); }

/* El acento tiñe todo lo que en la tarjeta iba en fucsia: número de
   nivel, precio y ticks. A medias quedaba peor que sin color — un
   «NIVEL 3» azul sobre un precio fucsia y ticks fucsia se lee como un
   error, no como una decisión. */
.nivel-n { color: var(--acento); }
.nivel .nivel-precio b { color: var(--acento); }
.nivel .check-list li::before { color: var(--acento); }
.nivel:hover { border-color: color-mix(in oklch, var(--acento) 45%, transparent); }
.nivel--pop {
  border-color: var(--acento);
  box-shadow: 0 0 0 1px var(--acento),
              0 22px 60px color-mix(in oklch, var(--acento) 14%, transparent);
}

@media (max-width: 860px) {
  .niveles { grid-template-columns: 1fr; }

  /* Apiladas, la entrada en cascada del contenedor no se ve: cuando el
     contenedor entra en pantalla, las tarjetas 2 y 3 están muy por
     debajo del pliegue y se revelan solas mientras nadie las mira. Para
     cuando el visitante baja hasta ellas ya están puestas. Aquí cada
     tarjeta se dispara por su cuenta (el observador de site.js), y por
     eso hay que anular el retardo escalonado: ya no hay nada que
     escalonar, cada una llega a su momento. */
  .js [data-cascada-suelto].is-visible > .nivel {
    opacity: 0;
    transform: translateY(22px);
    transition-delay: 0s;
  }
  .js [data-cascada-suelto] > .nivel.is-visible {
    opacity: 1;
    transform: none;
  }
}


/* ══ PÁGINA DE CABINAS ══════════════════════════════════════════ */

/* Secciones centradas: el titular y el texto de apoyo van al medio,
   pero las tarjetas conservan su alineación natural a la izquierda —
   centrar también el contenido de una tarjeta hace ilegible el precio
   frente al nombre. */
/* Sin el combinador de hijo directo: los titulares no siempre cuelgan
   de .section-inner —dentro de una cápsula, por ejemplo— y con `>` se
   quedaban alineados a la izquierda sin motivo aparente. */
.seccion--centrada .s-eyebrow { justify-content: center; }
.seccion--centrada .s-title,
.seccion--centrada .s-sub { text-align: center; }
.seccion--centrada .s-sub { margin-inline: auto; max-width: 62ch; }
/* El contenido de las tarjetas conserva su alineación: centrar el cuerpo
   de una tarjeta de precio la hace ilegible. */
.seccion--centrada .nivel,
.seccion--centrada .paso,
.seccion--centrada .tarifa,
.seccion--centrada .qi { text-align: left; }

/* "En resumen" plegable. El <details> arranca cerrado para que la
   página llegue antes a las tarifas, que es lo que se viene a ver. */
.tldr--plegable > summary {
  cursor: pointer;
  list-style: none;
  display: flex; align-items: center; gap: var(--space-2xs);
}
.tldr--plegable > summary::-webkit-details-marker { display: none; }
.tldr--plegable > summary::after {
  content: '';
  width: 8px; height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--duration-normal);
}
.tldr--plegable[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.tldr--plegable[open] > summary { margin-bottom: var(--space-sm); }

/* Tarifas: cada cabina con su foto. */
.tarifas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  text-align: left;
}
.tarifa {
  display: flex; flex-direction: column;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--superficie);
  border: 1px solid var(--linea-vis);
  transition: transform var(--duration-normal), border-color var(--duration-normal);
}
.tarifa:hover { transform: translateY(-4px); border-color: rgba(232, 121, 249, 0.45); }
.tarifa picture { display: block; }
.tarifa img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.tarifa-cuerpo {
  display: flex; flex-direction: column;
  flex: 1;
  padding: var(--space-sm) var(--space-md) var(--space-md);
}
.tarifa h3 { font-size: var(--text-h3); }
.tarifa-equipo { font-size: var(--text-xs); color: var(--hueso-dim); margin-bottom: var(--space-2xs); }
.tarifa-precio { display: flex; align-items: baseline; gap: 0.3rem; }
.tarifa-precio b {
  font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em;
  color: var(--fucsia); font-variant-numeric: tabular-nums;
}
.tarifa-precio span { font-size: var(--text-xs); color: var(--hueso-dim); }
.tarifa-para {
  flex: 1;
  font-size: var(--text-sm); color: var(--hueso-dim);
  line-height: var(--lh-snug);
  margin: var(--space-2xs) 0 var(--space-md);
}

@media (max-width: 1024px) { .tarifas { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .tarifas { grid-template-columns: 1fr; } }

/* "Qué traer": tres puntos en fila. */
.traer > summary { display: none; }
.traer-fila {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  list-style: none;
  text-align: left;
  margin-top: var(--space-lg);
}
.traer-item {
  padding: var(--space-md);
  border-radius: var(--radius-card);
  background: var(--superficie);
  border: 1px solid var(--linea);
}
.traer-ic {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--fucsia);
  margin-bottom: var(--space-sm);
}
.traer-ic svg {
  width: 18px; height: 18px;
  fill: none; stroke: var(--negro); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.traer-item b { display: block; font-size: var(--text-lg); margin-bottom: var(--space-2xs); }
.traer-item p { font-size: var(--text-sm); color: var(--hueso-dim); line-height: var(--lh-snug); }

/* En móvil el bloque se pliega y la fila se desliza en horizontal. */
@media (max-width: 720px) {
  .traer > summary {
    display: flex; align-items: center; justify-content: space-between;
    cursor: pointer; list-style: none;
    margin-top: var(--space-lg);
    padding: var(--space-sm) 0;
    border-top: 1px solid var(--linea-vis);
    border-bottom: 1px solid var(--linea-vis);
    font-weight: 600;
  }
  .traer > summary::-webkit-details-marker { display: none; }
  .traer > summary::after {
    content: '+';
    font-size: 1.3rem; line-height: 1;
    color: var(--fucsia);
  }
  .traer[open] > summary::after { content: '−'; }

  .traer-fila {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    margin-top: var(--space-md);
    padding-bottom: var(--space-2xs);
  }
  .traer-fila::-webkit-scrollbar { display: none; }
  .traer-item { flex: 0 0 78%; scroll-snap-align: start; }
}

/* El texto del scrollytelling no se compone a la vista: hasta que las
   fuentes están resueltas, el bloque entero es invisible. Sin esto, en
   un sistema que no tenga ninguna de las fuentes locales de la reserva,
   el titular se reparte primero en cuatro líneas y se recoloca en dos
   al llegar Poppins. Lo marca site.js con data-fuentes="listas".

   Es solo visibilidad, no display: la altura se reserva igual y no hay
   salto de layout. Y si el JS no corre, html:not(.js) lo deja visible. */
html.js:not([data-fuentes="listas"]) .scrolly-step { visibility: hidden; }

/* La cápsula de niveles apilaba tres espaciados seguidos al final de la
   sección: su propio margin-block, el margen del pie y el padding de la
   sección. En escritorio pasa desapercibido; en un móvil de 390px son
   ~185px de vacío entre el último precio y la sección siguiente. */
.niveles-capsula:last-child { margin-bottom: 0; }

@media (max-width: 860px) {
  .niveles-capsula { margin-block: var(--space-md); }
  /* Y la sección que solo contiene la cápsula no necesita su relleno
     inferior completo: la tarjeta ya tiene el suyo. */
  #niveles { padding-bottom: var(--space-lg); }
}

/* Enlace al tutorial desde la cabecera de tarifas. */
.primera-vez {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  margin: var(--space-md) auto var(--space-lg);
  padding: 0.55rem 1.1rem 0.55rem 0.55rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--linea-vis);
  background: var(--superficie);
  font-size: var(--text-sm);
  transition: border-color var(--duration-fast), transform var(--duration-fast);
}
.primera-vez:hover { border-color: var(--fucsia); transform: translateY(-2px); }
.primera-vez-n {
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--fucsia); color: var(--negro);
  font-weight: 700; font-size: var(--text-xs);
  flex: none;
}
.primera-vez svg {
  width: 15px; height: 15px; flex: none;
  fill: none; stroke: var(--fucsia); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.seccion--centrada .primera-vez { display: inline-flex; }


/* ══ CINTA DE PÍLDORAS ══════════════════════════════════════════
   Avanza sola en horizontal. La lista va duplicada en el HTML y la
   animación recorre exactamente la mitad: al terminar, el fotograma
   final es idéntico al inicial, así que el bucle no tiene costura. */

.cinta {
  overflow: hidden;
  margin: var(--space-lg) 0;
  /* Los bordes se desvanecen: sin esto las píldoras aparecen y
     desaparecen de golpe contra el borde del contenedor. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.cinta-fila {
  display: flex; gap: var(--space-xs);
  list-style: none;
  width: max-content;
  animation: cintaCorre 26s linear infinite;
}
.cinta:hover .cinta-fila { animation-play-state: paused; }
@keyframes cintaCorre { to { transform: translateX(-50%); } }

.pastilla {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  white-space: nowrap;
  padding: 0.5rem 1rem 0.5rem 0.5rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--linea-vis);
  background: var(--superficie);
  font-size: var(--text-sm);
}
.pastilla-ic {
  display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--fucsia);
  flex: none;
}
.pastilla-ic svg {
  width: 15px; height: 15px;
  fill: none; stroke: var(--negro); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

@media (prefers-reduced-motion: reduce) {
  .cinta-fila { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .cinta { -webkit-mask-image: none; mask-image: none; }
  .pastilla[aria-hidden="true"] { display: none; }
}

/* ══ CABECERA CENTRADA ══════════════════════════════════════════ */
.hero-txt--centrada .hero-txt-inner { text-align: center; }
.hero-txt--centrada .s-eyebrow { justify-content: center; }
/* El titular y el párrafo llevan max-width para no estirarse a lo ancho
   de la pantalla. `text-align: center` centra las LÍNEAS dentro de esa
   caja, pero no la caja dentro de su contenedor: sin el margen
   automático se quedan pegados a la izquierda y el titular sale
   descolocado respecto al resto de la cabecera. */
.hero-txt--centrada h1,
.hero-txt--centrada .lede { margin-inline: auto; }
.hero-txt--centrada .cta-inline { justify-content: center; }

/* ══ LOS TRES MOMENTOS DE LA CLASE ══════════════════════════════ */
.pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); text-align: left; }
.paso {
  padding: var(--space-md);
  border-radius: var(--radius-card);
  background: var(--superficie);
  border: 1px solid var(--linea);
}
.paso-ic {
  position: relative;
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(232, 121, 249, 0.14);
  border: 1px solid var(--fucsia);
  margin-bottom: var(--space-sm);
}
.paso-ic svg {
  width: 20px; height: 20px;
  fill: none; stroke: var(--fucsia); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.paso-ic b {
  position: absolute; top: -6px; right: -6px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--fucsia); color: var(--negro);
  font-size: 0.68rem; font-weight: 800;
  display: grid; place-items: center;
}
.paso h3 { font-size: var(--text-h3); margin-bottom: 0.1rem; }
.paso-meta { font-size: var(--text-xs); color: var(--fucsia); margin-bottom: var(--space-2xs); }
.paso p { font-size: var(--text-sm); color: var(--hueso-dim); line-height: var(--lh-snug); }

.slider-controls--movil { display: none; }

@media (max-width: 860px) {
  /* En móvil los tres momentos se deslizan en vez de apilarse. */
  .pasos {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .pasos::-webkit-scrollbar { display: none; }
  .pasos > .paso { flex: 0 0 78%; scroll-snap-align: start; }
  .slider-controls--movil { display: flex; }
}

/* ══ OFERTA CON CUENTA ATRÁS ════════════════════════════════════ */
.oferta {
  margin-top: var(--space-xl);
  padding: var(--space-lg) var(--space-md);
  border-radius: var(--radius-card);
  background: var(--superficie);
  border: 1px solid var(--fucsia);
  box-shadow: 0 0 0 1px var(--fucsia), 0 22px 60px rgba(232, 121, 249, 0.12);
  text-align: center;
}
.oferta-etq {
  font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: var(--track-wide); color: var(--hueso-dim);
}
.oferta-precios {
  display: flex; align-items: baseline; justify-content: center;
  gap: var(--space-sm);
  margin: var(--space-2xs) 0 var(--space-xs);
}
.oferta-antes {
  position: relative;
  font-size: var(--text-h3); color: var(--hueso-dim);
}
/* El tachado se dibuja, no aparece: es lo que cuenta la historia de que
   el precio bajó. Va en un elemento real y no en un ::after porque el
   transform de un pseudoelemento no se puede leer de forma fiable para
   comprobarlo — y lo que no se comprueba, se rompe sin avisar. */
.oferta-tachon {
  position: absolute; left: -4%; right: -4%; top: 52%;
  height: 3px; border-radius: 2px;
  background: var(--fucsia);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}
[data-animado="true"] .oferta-tachon { transform: scaleX(1); }
.oferta-ahora {
  font-size: clamp(2.6rem, 1.6rem + 4vw, 4rem);
  font-weight: 800; letter-spacing: -0.03em;
  color: var(--fucsia);
  font-variant-numeric: tabular-nums;
  opacity: 0; transform: translateY(10px) scale(0.94);
  transition: opacity 460ms var(--ease-out-expo) 380ms,
              transform 620ms cubic-bezier(0.22, 1.3, 0.36, 1) 380ms;
}
[data-animado="true"] .oferta-ahora { opacity: 1; transform: none; }
.oferta-nota { font-size: var(--text-sm); color: var(--hueso-dim); }

.oferta-cuenta {
  display: flex; justify-content: center; gap: var(--space-xs);
  margin-top: var(--space-md);
}
.oferta-cuenta span {
  min-width: 62px;
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-sm);
  background: rgba(244, 240, 245, 0.06);
}
.oferta-cuenta b {
  display: block;
  font-size: var(--text-h3); font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.oferta-cuenta i {
  font-style: normal; font-size: var(--text-xs);
  color: var(--hueso-dim); text-transform: uppercase;
  letter-spacing: 0.08em;
}
.oferta-fin { font-size: var(--text-xs); color: var(--hueso-dim); margin-top: var(--space-xs); }

/* Sin JavaScript la animación nunca se dispara: el bloque nace en su
   estado final para que el precio se lea igual. */
html:not(.js) .oferta-tachon { transform: scaleX(1); }
html:not(.js) .oferta-ahora { opacity: 1; transform: none; }
html:not(.js) .oferta-cuenta { display: none; }

/* Verticales de TikTok en carrusel. */
.slider-verticales > .video-card { width: clamp(200px, 24vw, 260px); }


/* ══ THE MASTER GROOVERS MIXER® ═════════════════════════════════
   Tres columnas: deck A, mezcladora, deck B. En móvil se apila con la
   mezcladora en medio, que es como se usa de verdad. */

.mixer {
  display: grid;
  grid-template-columns: 1fr minmax(210px, 260px) 1fr;
  gap: var(--space-md);
  align-items: start;
  padding: var(--space-md);
  border-radius: var(--radius-card);
  background: #0d0c11;
  border: 1px solid var(--linea-vis);
}

/* ── Deck ── */
.deck {
  display: flex; flex-direction: column; gap: var(--space-sm);
  padding: var(--space-md);
  border-radius: var(--radius-card);
  background: var(--superficie);
  border: 1px solid var(--linea);
  min-width: 0;
}
.deck-cab { display: flex; align-items: center; gap: var(--space-xs); }
.deck-id {
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--fucsia); color: var(--negro);
  font-weight: 800; flex: none;
}
.deck-info { min-width: 0; flex: 1; }
.deck-titulo {
  font-weight: 700; font-size: var(--text-base);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.deck-artista {
  font-size: var(--text-xs); color: var(--hueso-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.deck-bpm { text-align: right; flex: none; }
.deck-bpm b {
  display: block; font-size: 1.25rem; font-weight: 800;
  color: var(--fucsia); font-variant-numeric: tabular-nums;
}
.deck-bpm span { font-size: 0.6rem; letter-spacing: 0.12em; color: var(--hueso-dim); }

.deck-sel select {
  width: 100%;
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius-sm);
  background: #17151d; color: var(--hueso);
  border: 1px solid var(--linea-vis);
  font: inherit; font-size: var(--text-sm);
}

/* Espectro + posición */
.deck-onda {
  position: relative;
  height: 92px;
  border-radius: var(--radius-sm);
  background: #08070a;
  border: 1px solid var(--linea);
  overflow: hidden;
}
.deck-onda canvas { display: block; width: 100%; height: 100%; }
.deck-progreso {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; background: rgba(244, 240, 245, 0.12);
}
.deck-progreso i {
  display: block; height: 100%;
  background: var(--fucsia);
  transform: scaleX(0); transform-origin: left center;
}
.deck-tiempo {
  position: absolute; top: 6px; right: 8px;
  font-size: var(--text-xs); color: var(--hueso-dim);
  font-variant-numeric: tabular-nums;
}

.deck-mandos { display: flex; align-items: center; gap: var(--space-xs); }
.deck-play, .deck-inicio {
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1.5px solid var(--linea-vis);
  flex: none;
  transition: background var(--duration-fast), border-color var(--duration-fast), transform var(--duration-fast);
}
.deck-play svg, .deck-inicio svg { width: 17px; height: 17px; fill: var(--hueso); }
.deck-inicio svg { fill: none; stroke: var(--hueso); stroke-width: 2; stroke-linejoin: round; }
.deck-play:hover, .deck-inicio:hover { border-color: var(--fucsia); transform: scale(1.05); }
.deck-play[data-sonando="true"] { background: var(--fucsia); border-color: var(--fucsia); }
.deck-play[data-sonando="true"] svg { fill: var(--negro); }
.deck-play .ic-pausa { display: none; }
.deck-play[data-sonando="true"] .ic-play { display: none; }
.deck-play[data-sonando="true"] .ic-pausa { display: block; }

.pitch { flex: 1; display: grid; gap: 2px; min-width: 0; }
.pitch-etq, .pitch-val {
  font-size: 0.6rem; letter-spacing: 0.12em; color: var(--hueso-dim);
  font-variant-numeric: tabular-nums;
}
.pitch-val { text-align: right; color: var(--fucsia); }
.pitch input[type="range"] { width: 100%; }

/* ── Mezcladora central ── */
.mezcladora {
  display: flex; flex-direction: column; gap: var(--space-md);
  padding: var(--space-md) var(--space-sm);
  border-radius: var(--radius-card);
  background: #131119;
  border: 1px solid var(--linea-vis);
}
.canales { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
.canal { display: flex; flex-direction: column; align-items: center; gap: var(--space-2xs); }
.canal-id {
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.14em;
  color: var(--hueso-dim);
}

.knob-caja { display: grid; justify-items: center; gap: 3px; }
.knob-caja span { font-size: 0.55rem; letter-spacing: 0.1em; color: var(--hueso-dim); }
.knob {
  position: relative;
  width: 38px; height: 38px; border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #2a2734, #121017 70%);
  border: 1px solid var(--linea-vis);
  cursor: ns-resize;
  touch-action: none;
}
.knob--sm { width: 32px; height: 32px; }
.knob:focus-visible { outline: 2px solid var(--fucsia); outline-offset: 2px; }
/* La muesca marca la posición. Se gira el contenedor de la muesca, no
   el knob entero, para que el degradado del cuerpo no rote con él. */
.knob i {
  position: absolute; inset: 0;
  transform: rotate(var(--giro, 0deg));
}
.knob i::after {
  content: '';
  position: absolute; left: 50%; top: 4px;
  width: 2px; height: 11px; margin-left: -1px;
  border-radius: 1px;
  background: var(--fucsia);
}

.fader {
  -webkit-appearance: slider-vertical;
  appearance: slider-vertical;
  width: 26px; height: 120px;
  margin-top: var(--space-2xs);
}

/* ── Filtro ── */
.filtro {
  display: grid; justify-items: center; gap: var(--space-xs);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--linea);
}
.filtro-sw {
  padding: 0.34rem 0.9rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--linea-vis);
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em;
  color: var(--hueso-dim);
  transition: all var(--duration-fast);
}
.filtro-sw[data-on="true"] {
  border-color: var(--fucsia); color: var(--negro);
  background: var(--fucsia);
}
.filtro-knobs { display: flex; gap: var(--space-md); }
.filtro-nota {
  font-size: 0.62rem; color: var(--hueso-dim);
  text-align: center; line-height: 1.35;
}

.mixer-ayuda {
  margin-top: var(--space-sm);
  font-size: var(--text-xs); color: var(--hueso-dim); text-align: center;
}

@media (max-width: 900px) {
  .mixer { grid-template-columns: 1fr; }
  /* La mezcladora al medio, como en un setup real. */
  .mezcladora { order: 2; }
  .deck[data-deck="a"] { order: 1; }
  .deck[data-deck="b"] { order: 3; }
  .fader { height: 96px; }
}

/* El botón al Mixer lleva su propio icono de faders. */
.btn-mixer { gap: var(--space-2xs); }
.btn-mixer svg { flex: none; }


/* ══ MIXER — rueda, transporte y onda completa ══════════════════ */

.deck-cuerpo {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-md);
  align-items: center;
}

/* La rueda: buscar arrastrando, como el plato. */
.rueda {
  position: relative;
  width: 132px; height: 132px; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 34%, #2b2836, #131019 62%),
    var(--superficie);
  border: 2px solid var(--linea-vis);
  cursor: grab;
  touch-action: none;
  flex: none;
  display: grid; place-items: center;
}
.rueda[data-activo="true"] { cursor: grabbing; border-color: var(--fucsia); }
.rueda:focus-visible { outline: 2px solid var(--fucsia); outline-offset: 3px; }
/* Capa que rota: la marca da la sensación de plato girando y frena al
   pausar, que es la señal visual de que el track está detenido. */
.rueda-giro { position: absolute; inset: 8px; border-radius: 50%; }
.rueda-giro::after {
  content: '';
  position: absolute; left: 50%; top: 6px;
  width: 3px; height: 20px; margin-left: -1.5px;
  border-radius: 2px;
  background: var(--fucsia);
}
.rueda-centro {
  position: relative;
  width: 74px; height: 74px; border-radius: 50%;
  background: #08070a;
  border: 1px solid var(--linea);
  display: grid; place-content: center; text-align: center;
  pointer-events: none;
}
.rueda-centro b {
  display: block; font-size: 0.9rem; font-weight: 800;
  color: var(--fucsia); font-variant-numeric: tabular-nums;
}
.rueda-centro span { font-size: 0.5rem; letter-spacing: 0.14em; color: var(--hueso-dim); }

.deck-controles { display: grid; gap: var(--space-xs); min-width: 0; }
.deck-transporte { display: flex; gap: var(--space-xs); }

.btn-cue, .btn-play {
  flex: 1;
  height: 46px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--linea-vis);
  display: grid; place-items: center;
  font-weight: 800; font-size: 0.72rem; letter-spacing: 0.12em;
  transition: background var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast);
}
.btn-cue { color: #ffc107; border-color: rgba(255, 193, 7, 0.5); }
.btn-cue[data-activo="true"] { background: #ffc107; color: var(--negro); }
.btn-play svg { width: 17px; height: 17px; fill: var(--hueso); }
.btn-play[data-sonando="true"] { background: var(--fucsia); border-color: var(--fucsia); }
.btn-play[data-sonando="true"] svg { fill: var(--negro); }
.btn-play .ic-pausa { display: none; }
.btn-play[data-sonando="true"] .ic-play { display: none; }
.btn-play[data-sonando="true"] .ic-pausa { display: block; }

.deck-fila { display: flex; align-items: center; gap: var(--space-xs); }
.deck-etq {
  font-size: 0.56rem; letter-spacing: 0.14em; color: var(--hueso-dim);
  width: 46px; flex: none;
}
.deck-par { display: flex; gap: 4px; flex: 1; }
.deck-par button {
  flex: 1;
  height: 34px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--linea-vis);
  color: var(--hueso);
  font-size: 0.95rem; font-weight: 700;
  transition: background var(--duration-fast), border-color var(--duration-fast), transform 90ms;
}
.deck-par button:hover { border-color: var(--fucsia); }
.deck-par button[data-activo="true"],
.deck-par button:active { background: var(--fucsia); color: var(--negro); transform: scale(0.96); }

/* Onda completa del track. */
.deck-onda { height: 76px; }
.deck-onda canvas { cursor: pointer; }
.deck-cargando {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: var(--text-xs); color: var(--hueso-dim);
  pointer-events: none;
  opacity: 0;
}
[data-cargando-onda="true"] .deck-cargando { opacity: 1; }
[data-sin-onda="true"] .deck-cargando { opacity: 1; }
[data-sin-onda="true"] .deck-cargando::after { content: 'La onda no se pudo cargar'; }
[data-sin-onda="true"] .deck-cargando { font-size: 0; }
[data-sin-onda="true"] .deck-cargando::after { font-size: 0.75rem; }

/* Filtro horizontal, como en la mixer de referencia. */
.filtro {
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--linea);
}
.mixer-ayuda { margin-top: var(--space-md); display: grid; gap: var(--space-2xs); }
.mixer-ayuda p {
  font-size: var(--text-xs); color: var(--hueso-dim);
  text-align: center; line-height: 1.5;
  max-width: 68ch; margin-inline: auto;
}

@media (max-width: 560px) {
  .deck-cuerpo { grid-template-columns: 1fr; justify-items: center; }
  .deck-controles { width: 100%; }
}


/* ══ MIXER — obligar a horizontal en móvil ══════════════════════
   En vertical el layout apila deck A / mezcladora / deck B, y para
   cargar el segundo track hay que hacer scroll justo cuando hay que
   estar mirando los dos. Antes que dejar usarlo mal, se pide girar. */

.gira-el-movil { display: none; }

@media (max-width: 900px) and (orientation: portrait) {
  [data-mixer] { display: none; }
  .mixer-ayuda { display: none; }

  .gira-el-movil {
    display: grid; justify-items: center; gap: var(--space-sm);
    padding: var(--space-2xl) var(--space-md);
    border-radius: var(--radius-card);
    background: var(--superficie);
    border: 1px solid var(--linea-vis);
    text-align: center;
  }
  .gira-el-movil svg {
    width: 54px; height: 54px;
    fill: none; stroke: var(--fucsia); stroke-width: 1.6;
    stroke-linecap: round; stroke-linejoin: round;
    animation: giraAviso 2.4s ease-in-out infinite;
  }
  .gira-el-movil b { font-size: var(--text-h3); }
  .gira-el-movil span {
    font-size: var(--text-sm); color: var(--hueso-dim);
    max-width: 34ch; line-height: var(--lh-snug);
  }
  @keyframes giraAviso {
    0%, 55%, 100% { transform: rotate(0deg); }
    75%, 92%      { transform: rotate(-90deg); }
  }
}

/* En horizontal la mesa entera cabe sin scroll: se comprimen las piezas
   en vez de dejar que el visitante persiga los controles. */
@media (max-width: 1000px) and (orientation: landscape) {
  .hero-txt--corta { padding-block: var(--space-xs); }
  .hero-txt--corta h1 { font-size: clamp(1.4rem, 1rem + 2vw, 2rem); }
  .hero-txt--corta .lede { display: none; }
  .hero-txt--corta .s-eyebrow { display: none; }

  .mixer {
    grid-template-columns: 1fr minmax(150px, 190px) 1fr;
    gap: var(--space-xs);
    padding: var(--space-xs);
  }
  .deck { padding: var(--space-xs); gap: var(--space-2xs); }
  .deck-onda { height: 42px; }
  .deck-cab { gap: 6px; }
  .deck-id { width: 22px; height: 22px; font-size: 0.7rem; }
  .deck-titulo { font-size: 0.78rem; }
  .deck-artista { font-size: 0.6rem; }
  .deck-bpm b { font-size: 0.95rem; }
  .deck-sel select { padding: 0.3rem 0.45rem; font-size: 0.68rem; }

  .deck-cuerpo { gap: var(--space-xs); }
  .rueda { width: 84px; height: 84px; }
  .rueda-centro { width: 48px; height: 48px; }
  .rueda-centro b { font-size: 0.62rem; }
  .rueda-centro span { font-size: 0.38rem; }

  .btn-cue, .btn-play { height: 32px; font-size: 0.6rem; }
  .deck-par button { height: 26px; font-size: 0.78rem; }
  .deck-etq { width: 38px; font-size: 0.46rem; }

  .mezcladora { padding: var(--space-xs) 6px; gap: var(--space-xs); }
  .knob { width: 28px; height: 28px; }
  .knob--sm { width: 24px; height: 24px; }
  .knob-caja span { font-size: 0.44rem; }
  .fader { height: 62px; width: 20px; }
  .filtro { gap: var(--space-sm); padding-top: var(--space-2xs); }
  .filtro-sw { padding: 0.24rem 0.5rem; font-size: 0.54rem; }

  .mixer-ayuda { display: none; }
  /* Los CTA de abajo tampoco deben empujar la mesa fuera de pantalla. */
  .section--pegada + * , .cta-btns { margin-top: var(--space-sm); }
}


/* ══ REPRODUCTOR DE MUSIC ═══════════════════════════════════════
   Estructura de app: saludo, filtros, destacados y lista. Sin usuario
   real, así que el avatar es la marca y el saludo nombra al canal. */

.pl-saludo { display: flex; align-items: center; gap: var(--space-sm); }
.pl-avatar {
  display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--superficie);
  border: 1px solid var(--linea-vis);
  flex: none; overflow: hidden;
}
.pl-avatar img { width: 34px; height: auto; }
.pl-hola { font-size: var(--text-xs); color: var(--hueso-dim); letter-spacing: var(--track-wide); text-transform: uppercase; }
.pl-titulo { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.4rem); font-weight: 800; letter-spacing: -0.02em; }

/* Filtros. Deslizan en horizontal antes que apilarse. */
.pl-chips {
  display: flex; gap: var(--space-2xs);
  overflow-x: auto; scrollbar-width: none;
  margin: var(--space-lg) 0 var(--space-md);
  padding-bottom: 2px;
}
.pl-chips::-webkit-scrollbar { display: none; }
.pl-chip {
  flex: none;
  padding: 0.5rem 1.05rem;
  border-radius: var(--radius-pill);
  background: var(--superficie);
  border: 1px solid var(--linea);
  font-size: var(--text-sm);
  color: var(--hueso-dim);
  white-space: nowrap;
  transition: all var(--duration-fast);
}
.pl-chip:hover { border-color: var(--fucsia); color: var(--hueso); }
.pl-chip[aria-pressed="true"] { background: var(--fucsia); color: var(--negro); border-color: var(--fucsia); font-weight: 600; }

.pl-seccion { font-size: var(--text-h3); font-weight: 800; letter-spacing: -0.015em; }
.pl-cab { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); margin-top: var(--space-xl); }
.pl-vertodo { font-size: var(--text-sm); color: var(--hueso-dim); }
.pl-vertodo:hover { color: var(--fucsia); }

/* Tarjetas destacadas, en carril horizontal como en la referencia. */
.pl-destacadas {
  display: flex; gap: var(--space-md);
  overflow-x: auto; scrollbar-width: none;
  margin-top: var(--space-sm);
  padding-bottom: var(--space-2xs);
  scroll-snap-type: x proximity;
}
.pl-destacadas::-webkit-scrollbar { display: none; }
.pl-destacada {
  position: relative;
  flex: 0 0 min(500px, 86%);
  scroll-snap-align: start;
  overflow: hidden;
  padding: var(--space-lg);
  border-radius: var(--radius-card);
  /* Degradado de marca en vez de foto: sin portadas reales, un color
     sólido y bien elegido envejece mejor que una imagen de archivo. */
  background: linear-gradient(135deg, #e879f9, #a855f7 55%, #6d28d9);
  color: #12091a;
}
.pl-destacada--alt { background: linear-gradient(135deg, #c4f542, #7fd80f 55%, #3f8f00); }
.pl-destacada h3 { font-size: var(--text-h2); font-weight: 800; letter-spacing: -0.02em; }
.pl-destacada p { font-size: var(--text-sm); opacity: 0.82; margin: var(--space-2xs) 0 var(--space-md); max-width: 34ch; }
.pl-destacada-acciones { display: flex; align-items: center; gap: var(--space-sm); }
.pl-big-play {
  display: grid; place-items: center;
  width: 54px; height: 54px; border-radius: 50%;
  background: #2a0f3d; color: #fff;
  flex: none;
  transition: transform var(--duration-fast);
}
.pl-destacada--alt .pl-big-play { background: #14300a; }
.pl-big-play:hover { transform: scale(1.07); }
.pl-big-play svg { width: 22px; height: 22px; fill: currentColor; }
.pl-destacada--alt .pl-big-play svg { fill: none; }
.pl-meta { font-size: var(--text-sm); font-weight: 600; opacity: 0.75; }
.pl-destacada-marca {
  position: absolute; right: -18px; bottom: -14px;
  opacity: 0.24; pointer-events: none;
}
.pl-destacada-marca img { width: 168px; height: auto; }

/* Lista de tracks. */
.pl-lista { margin-top: var(--space-sm); gap: 2px; }
.pl-fila {
  display: grid;
  grid-template-columns: 52px 1fr auto auto;
  align-items: center; gap: var(--space-sm);
  padding: var(--space-2xs) var(--space-2xs);
  border-radius: var(--radius-sm);
  text-align: left;
  transition: background var(--duration-fast);
}
.pl-fila:hover { background: rgba(244, 240, 245, 0.05); }
.pl-fila[aria-current="true"] { background: rgba(232, 121, 249, 0.1); }
.pl-arte {
  display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: var(--radius-sm);
  overflow: hidden; flex: none;
}
/* Seis tintes de marca rotando: da variedad sin necesitar portadas. */
.pl-arte[data-arte="0"] { background: linear-gradient(135deg, #e879f9, #6d28d9); }
.pl-arte[data-arte="1"] { background: linear-gradient(135deg, #22d3ee, #2563eb); }
.pl-arte[data-arte="2"] { background: linear-gradient(135deg, #c4f542, #3f8f00); }
.pl-arte[data-arte="3"] { background: linear-gradient(135deg, #fb7185, #7c2d12); }
.pl-arte[data-arte="4"] { background: linear-gradient(135deg, #fbbf24, #b45309); }
.pl-arte[data-arte="5"] { background: linear-gradient(135deg, #a78bfa, #1e1b4b); }
.pl-arte img { width: 30px; height: auto; opacity: 0.9; }
.pl-txt { min-width: 0; display: grid; }
.pl-t { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-a { font-size: var(--text-xs); color: var(--hueso-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-dur { font-size: var(--text-xs); color: var(--hueso-dim); font-variant-numeric: tabular-nums; }
.pl-play {
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(244, 240, 245, 0.08);
  flex: none;
}
.pl-play svg { width: 13px; height: 13px; fill: var(--hueso); }
.pl-fila:hover .pl-play, .pl-fila[aria-current="true"] .pl-play { background: var(--fucsia); }
.pl-fila:hover .pl-play svg, .pl-fila[aria-current="true"] .pl-play svg { fill: var(--negro); }
.pl-play .ic-pausa { display: none; }
.pl-fila[aria-current="true"][data-son="true"] .ic-play { display: none; }
.pl-fila[aria-current="true"][data-son="true"] .ic-pausa { display: block; }

@media (max-width: 560px) {
  .pl-destacada { flex-basis: 88%; padding: var(--space-md); }
  .pl-fila { grid-template-columns: 46px 1fr auto; }
  .pl-dur { display: none; }
  .pl-arte { width: 46px; height: 46px; }
}