/* ══════════════════════════════════════════════════════════════════════════
   SYNERGYK · sk.css · web pública (v1.4)
   Mobile-first. Breakpoints: 480 · 768 · 900 · 1100.
   Paleta: la de las cinco estaciones (Nube, Gota, Tierra, Semilla, Fruto)
   sobre negro. El color aparece cuando algo se mueve.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --negro: #050505;
  --negro-2: #0c0c0f;
  --negro-3: #141418;
  --tinta: #f3f3f5;
  --tinta-2: #c9c9d2;
  --apagado: #9696a0;
  --linea: rgba(255, 255, 255, .12);
  --linea-fuerte: rgba(255, 255, 255, .24);

  --nube: #93dcd5;
  --gota: #3b7ea1;
  --tierra: #e5c47b;
  --semilla: #6b4c8a;
  --fruto: #8e5db5;

  /* El acento cambia con el cursor y con la estación visible (sk.js). */
  --acento: #8e5db5;
  --acento-2: #93dcd5;

  --radio: 22px;
  --radio-grande: 30px;
  --margen: clamp(16px, 5vw, 64px);
  --ancho: 1200px;
  --nav-h: 72px;
  --proxima-h: 0px;
  --pc: #93dcd5;           /* color de la pista que suena (sk.js) */

  --f-titulo: 'Unbounded', system-ui, sans-serif;
  --f-etiqueta: 'Michroma', system-ui, sans-serif;
  --f-texto: 'Manrope', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); overflow-x: clip; -webkit-text-size-adjust: 100%; }
body {
  background: var(--negro);
  color: var(--tinta);
  font: 400 17px/1.65 var(--f-texto);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  /* La barra de la próxima ola reserva su sitio: el final de la página
     nunca queda debajo de ella. */
  padding-bottom: var(--proxima-h);
  transition: padding-bottom .3s;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

.saltar { position: absolute; left: -9999px; top: 8px; z-index: 200; background: var(--tinta); color: #000; padding: 10px 16px; border-radius: 8px; }
.saltar:focus { left: 8px; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--acento-2); outline-offset: 3px; border-radius: 6px; }

.envoltura { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen); }
section { position: relative; padding: clamp(56px, 7.5vw, 104px) 0; }

.etiqueta { font: 400 11px/1.5 var(--f-etiqueta); letter-spacing: .22em; text-transform: uppercase; color: var(--apagado); margin-bottom: 20px; text-wrap: balance; }
h1, h2, h3 { font-family: var(--f-titulo); font-weight: 500; line-height: 1.06; letter-spacing: -.02em; text-wrap: balance; }
h2 { font-size: clamp(34px, 7vw, 84px); }
.h2-medio { font-size: clamp(30px, 5vw, 62px); }
h3 { font-size: clamp(24px, 3vw, 36px); }
.subtitulo { color: var(--tinta-2); max-width: 620px; margin-top: 22px; font-size: clamp(16px, 1.7vw, 19px); }
.texto-grande { color: var(--tinta-2); font-size: clamp(17px, 1.8vw, 20px); line-height: 1.7; margin-top: 24px; }

/* ── Botones ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 26px; border-radius: 999px;
  font: 600 15px/1.2 var(--f-texto); text-decoration: none; text-align: center;
  border: 1px solid var(--tinta); background: none; color: var(--tinta);
  transition: background-color .3s, border-color .3s, color .3s, transform .3s;
}
.btn:active { transform: scale(.98); }
.btn-solido { background: var(--tinta); color: #000; }
.btn-solido:hover { background: var(--acento-2); border-color: var(--acento-2); }
.btn-borde:hover { background: rgba(255, 255, 255, .08); }
.btn-peq { min-height: 44px; padding: 10px 18px; font-size: 14px; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.fila-botones { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.enlace-flecha { display: inline-flex; gap: 8px; margin-top: 30px; color: var(--tinta); text-decoration: none; border-bottom: 1px solid var(--linea-fuerte); padding-bottom: 4px; min-height: 44px; align-items: center; }
.enlace-flecha:hover { border-color: var(--acento-2); }
.enlace-boton { background: none; border: 0; padding: 0; text-align: left; color: var(--apagado); min-height: 32px; }
.enlace-boton:hover { color: var(--tinta); }
.chip { display: inline-block; font: 400 10px/1 var(--f-etiqueta); letter-spacing: .16em; text-transform: uppercase; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--linea-fuerte); color: var(--tinta-2); white-space: nowrap; }
.chip-abierta { border-color: var(--nube); color: var(--nube); }
.chip-completa { border-color: var(--apagado); color: var(--apagado); }

/* ── Navegación ──────────────────────────────────────────────────────── */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 var(--margen); padding-top: env(safe-area-inset-top);
  transition: background-color .4s, backdrop-filter .4s, border-color .4s;
  border-bottom: 1px solid transparent;
}
.nav.con-fondo { background: rgba(5, 5, 5, .72); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-color: var(--linea); }
.nav-logo { position: relative; display: flex; align-items: center; min-height: 44px; isolation: isolate; }
/* Un aliento de color detrás del logo: la paleta gira despacio, muy sutil. */
.nav-logo::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; z-index: -1;
  translate: -50% -50%; border-radius: 50%;
  background: conic-gradient(#93dcd5, #3b7ea1, #8e5db5, #e5c47b, #93dcd5);
  filter: blur(22px); opacity: .32;
}
@media (prefers-reduced-motion: no-preference) { .nav-logo::before { animation: gira 16s linear infinite; } }
.nav-logo img { width: 66px; height: auto; }
/* Con «Manifiesto» son 7 enlaces: a 1100 px (donde aparece el nav) el gap
   de 30 dejaba la fila rozando el botón de Reservar (v4.4). */
.nav-enlaces { display: none; gap: 24px; font: 400 11px var(--f-etiqueta); letter-spacing: .18em; text-transform: uppercase; }
.nav-enlaces a { text-decoration: none; opacity: .78; transition: opacity .3s; padding: 12px 0; }
.nav-enlaces a:hover { opacity: 1; }
.nav-acciones { display: flex; align-items: center; gap: 10px; }
.nav-menu { width: 44px; height: 44px; border: 1px solid var(--linea-fuerte); border-radius: 50%; background: none; display: grid; place-content: center; gap: 4px; }
.nav-menu span { display: block; width: 16px; height: 1.5px; background: var(--tinta); transition: transform .3s, opacity .3s; }
.nav-menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
.menu-movil {
  position: fixed; inset: 0; z-index: 55; background: rgba(5, 5, 5, .96); backdrop-filter: blur(10px);
  display: flex; flex-direction: column; justify-content: center; gap: 36px;
  padding: calc(var(--nav-h) + 20px) var(--margen) 40px;
}
.menu-movil nav { display: flex; flex-direction: column; }
.menu-movil nav a { font: 500 clamp(24px, 7vw, 36px)/1.2 var(--f-titulo); text-decoration: none; padding: 10px 0; border-bottom: 1px solid var(--linea); }
@media (min-width: 1100px) {
  .nav-enlaces { display: flex; }
  .nav-menu { display: none; }
  .menu-movil { display: none !important; }
}

/* ── Portada ─────────────────────────────────────────────────────────── */
.hero {
  display: grid; place-items: center; align-content: center; gap: 24px; text-align: center; overflow: hidden;
  padding: calc(var(--nav-h) + 14px) 0 40px;
}
@media (min-width: 768px) { .hero { min-height: min(100svh, 940px); padding-top: calc(var(--nav-h) + 24px); } }
@media (min-width: 1100px) { .hero { padding-bottom: 110px; } }
.hero-onda { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-brillo {
  position: absolute; left: 50%; top: 46%; width: 90vmax; height: 90vmax; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--acento) 30%, transparent), transparent 58%);
  filter: blur(30px); opacity: calc(.8 + var(--latido, 0) * .3); scale: calc(1 + var(--latido, 0) * .045); pointer-events: none;
}
.hero-contenido { position: relative; padding: 0 var(--margen); max-width: 1240px; }
.hero-marca-caja { position: relative; display: block; width: min(440px, 76vw); margin: 0 auto clamp(34px, 4vw, 56px); }
.hero-marca { width: 100%; height: auto; }
.hero .etiqueta { margin-bottom: clamp(32px, 3.6vw, 52px); }
.hero h1 { font-size: clamp(36px, 6vw, 92px); font-weight: 300; }
.hero h1 em, .resalta { font-style: normal; font-weight: 700; background: linear-gradient(90deg, var(--acento), var(--acento-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-texto { max-width: 580px; margin: clamp(32px, 3vw, 40px) auto clamp(40px, 3.6vw, 48px); color: var(--tinta-2); font-size: clamp(16px, 1.7vw, 19px); }
/* Vídeo de la portada (v3.8). Sin marco: el vídeo trae el fondo a negro y los
   bordes fundidos; «screen» deja ver a través de ese negro el halo y la onda
   de la portada. LA MÁSCARA NO SE QUITA: en Safari (iPhone), un vídeo sin
   máscara va por la vía rápida del compositor, donde la mezcla se ignora y el
   vídeo sale como un bloque negro opaco (pasó en producción el 19/09/2026).
   En el teléfono se amplía con «scale», que no cuenta para la maquetación:
   con un ancho mayor que la pantalla, Safari ensanchaba toda la portada. */
.hero-video { margin: 34px 0 32px; pointer-events: none; }
.hero-video video {
  display: block; width: 100%; height: auto; aspect-ratio: 960 / 506; background: transparent; transform: scale(1.32);
  mix-blend-mode: screen; animation: aparece-video 1.8s ease .2s both;
  -webkit-mask-image: radial-gradient(closest-side, #000 74%, transparent); mask-image: radial-gradient(closest-side, #000 74%, transparent);
}
@keyframes aparece-video { from { opacity: 0; } }
@media (min-width: 600px) {
  .hero-video { width: min(100%, 600px); margin: -40px auto -30px; }
  .hero-video video { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .hero-video video { animation: none; } }
/* Bajo el vídeo, el botón va dentro del margen del texto: en teléfonos
   estrechos se aprieta un poco para no partirse en dos líneas. */
@media (max-width: 400px) { .sonido { padding: 8px 14px; gap: 10px; } .sonido-texto { letter-spacing: .13em; } }
.sonido {
  position: relative; justify-self: center; z-index: 3;
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 18px;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--linea); border-radius: 999px; transition: background-color .3s;
}
.sonido:hover { background: rgba(255, 255, 255, .09); }
@media (max-width: 767px) { .hero .etiqueta { font-size: 10px; letter-spacing: .14em; } }
.sonido-barras { display: flex; align-items: flex-end; gap: 3px; height: 16px; }
.sonido-barras i { width: 3px; height: 4px; border-radius: 2px; background: var(--tinta); transition: height .3s; }
.sonido.activo .sonido-barras i { animation: barra 1.1s ease-in-out infinite alternate; background: var(--acento-2); }
.sonido.activo .sonido-barras i:nth-child(2) { animation-delay: .25s; }
.sonido.activo .sonido-barras i:nth-child(3) { animation-delay: .5s; }
.sonido.activo .sonido-barras i:nth-child(4) { animation-delay: .15s; }
.sonido.activo .sonido-barras i:nth-child(5) { animation-delay: .4s; }
@keyframes barra { from { height: 4px; } to { height: 16px; } }
/* Con el sonido apagado, el botón llama sin gritar (v7.1, Javi 13/10/2026):
   un aro con la paleta que gira despacio, un latido doble cada 3,6 s
   (lub-dub, nada parpadea) y las barras respirando en pequeño. Al activar
   el sonido se apaga todo y mandan las barras de siempre. */
@property --sonido-giro { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.sonido:not(.activo)::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--sonido-giro), var(--acento), var(--acento-2), var(--tierra), var(--acento-2), var(--acento));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .85;
}
@media (prefers-reduced-motion: no-preference) {
  .sonido:not(.activo) { animation: sonido-llama 3.6s ease-out 2.2s infinite; }
  .sonido:not(.activo)::before { animation: sonido-gira 7s linear infinite; }
  .sonido:not(.activo) .sonido-barras i { animation: barra-reposo 1.6s ease-in-out infinite alternate; }
  .sonido:not(.activo) .sonido-barras i:nth-child(2) { animation-delay: .3s; }
  .sonido:not(.activo) .sonido-barras i:nth-child(3) { animation-delay: .6s; }
  .sonido:not(.activo) .sonido-barras i:nth-child(4) { animation-delay: .9s; }
  .sonido:not(.activo) .sonido-barras i:nth-child(5) { animation-delay: 1.2s; }
}
@keyframes sonido-gira { to { --sonido-giro: 360deg; } }
@keyframes sonido-llama {
  0%   { box-shadow: 0 0 0 0 rgb(147 220 213 / .42), 0 0 0 0 rgb(142 93 181 / 0); }
  13%  { box-shadow: 0 0 0 9px rgb(147 220 213 / 0), 0 0 0 0 rgb(142 93 181 / .38); }
  38%, 100% { box-shadow: 0 0 0 9px rgb(147 220 213 / 0), 0 0 0 16px rgb(142 93 181 / 0); }
}
@keyframes barra-reposo { from { height: 4px; } to { height: 9px; } }
.sonido-texto { font: 400 10px var(--f-etiqueta); letter-spacing: .18em; text-transform: uppercase; }
.luz-cursor { opacity: calc(.75 + var(--latido, 0) * .6); position: fixed; z-index: 0; width: 420px; height: 420px; left: -500px; top: -500px; translate: -50% -50%; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, color-mix(in srgb, var(--acento) 14%, transparent), transparent 65%); }
@media (hover: none) { .luz-cursor { display: none; } }

/* ── Manifiesto ──────────────────────────────────────────────────────── */
.manifiesto-texto { font: 300 clamp(27px, 4.6vw, 62px)/1.2 var(--f-titulo); letter-spacing: -.02em; max-width: 1100px; }
.manifiesto-texto .p { opacity: .16; transition: opacity .5s, color .5s; }
.manifiesto-texto .p.luz { opacity: 1; }
.manifiesto-texto .p.fin.luz { color: var(--acento-2); }
.manifiesto-texto .p.afirma.luz { color: color-mix(in srgb, var(--tierra) 88%, #fff); }
/* En cuanto empieza a pintarse «Hay fiesta, sí…», lo leído se funde a negro
   y la frase final queda destacada entera (v3.9). Solo durante la lectura:
   en «leído» y «sellado» mandan sus propias reglas. */
/* En cuanto empieza a pintarse «Hay fiesta, sí…», lo anterior se funde a
   negro del todo (0, no .05): la frase se queda sola desde antes del
   apagón, que es lo que pidió Javi. */
.manifiesto-texto.fin-cerca .p:not(.frase) { opacity: 0; transition: opacity 1.4s ease, color 1.4s ease; }

/* ── La experiencia ──────────────────────────────────────────────────── */
/* El final («Esto es solo un anticipo…») se funde hasta el negro exacto de
   la pausa (#030304): sin salto de color en la costura (Javi, 20/09/2026). */
.experiencia { background: linear-gradient(180deg, var(--negro) 0%, var(--negro-2) 14%, var(--negro-2) 60%, #030304 90%); }
.experiencia-rejilla { display: grid; gap: 10px; }
.sentidos { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 40px; }
.sentidos li { display: flex; flex-direction: column; gap: 18px; padding: 22px; border: 1px solid var(--linea); border-radius: var(--radio); font: 500 17px var(--f-titulo); }
.sentido-icono svg { width: 40px; height: 40px; fill: none; stroke: var(--acento-2); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: stroke .6s, transform .5s cubic-bezier(.2, .8, .2, 1); }
/* Tarjetas vivas (tarjetas.js): el material va en un lienzo detrás del contenido. */
.sentidos li { position: relative; overflow: hidden; isolation: isolate; }
.sentido-lienzo { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.sentido-vivo > :not(.sentido-lienzo), .sentido-juego button > :not(.sentido-lienzo) { position: relative; z-index: 1; }
.sentido-juego button { position: relative; }
.sentido-vivo:not(.sentido-juego) { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.sentido-pista { margin-top: auto; font: 400 9px var(--f-etiqueta); letter-spacing: .16em; text-transform: uppercase; color: var(--apagado); }
[data-efecto="luz"] .sentido-icono svg { filter: drop-shadow(0 0 calc(var(--brillo, 0) * 14px) var(--acento-2)); }
.sentidos-frase { margin-top: 24px; color: var(--tinta-2); font-size: clamp(17px, 2vw, 22px); max-width: 720px; }
@media (min-width: 768px) { .sentidos { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .sentidos { grid-template-columns: repeat(6, 1fr); } }

/* Gusto y Tacto: tarjetas que abren su juego */
.sentidos li.sentido-juego { padding: 0; }
.sentido-juego button {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; height: 100%; padding: 22px; border: 0; border-radius: inherit;
  background: radial-gradient(120% 90% at 0 0, color-mix(in srgb, var(--acento-2) 10%, transparent), transparent 60%); color: var(--tinta);
  font: inherit; text-align: left; cursor: pointer; transition: background .4s, box-shadow .4s;
}
.sentido-juego button:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acento-2) 45%, transparent); }
.sentido-juego .sentido-icono { margin-bottom: 12px; }
.sentido-nombre { font: 500 17px var(--f-titulo); }
.sentido-invita { font: 400 14px/1.4 var(--f-texto); color: var(--tinta-2); }
.sentido-accion { margin-top: auto; padding-top: 8px; font: 400 9px var(--f-etiqueta); letter-spacing: .16em; text-transform: uppercase; color: var(--apagado); }

.glosario { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 26px; }
.glosario div { padding: 14px 16px; border-radius: 16px; border: 1px solid var(--linea); background: rgba(255, 255, 255, .02); }
.glosario dt { font: 400 10px var(--f-etiqueta); letter-spacing: .2em; text-transform: uppercase; color: var(--acento-2); transition: color .6s; }
.glosario dd { margin-top: 6px; font: 400 clamp(15px, 1.6vw, 17px)/1.35 var(--f-texto); color: var(--tinta); }
.sentidos-intro { margin-top: 44px; max-width: 640px; color: var(--tinta-2); font-size: clamp(17px, 2vw, 21px); }
.sentidos-intro + .sentidos { margin-top: 20px; }

/* ── Juegos de los sentidos (diálogos) ── */
.juego { text-align: left; }
.juego-paso { display: grid; gap: 14px; }
.juego-paso[hidden] { display: none; }
.juego .btn { justify-self: start; }
.juego-nota { font-size: 14px; color: var(--apagado); line-height: 1.5; }
.juego-check { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: 16px; cursor: pointer; }
.juego-check input { width: 22px; height: 22px; accent-color: var(--tinta); }
.gusto-forma { width: 100%; aspect-ratio: 1.4; max-height: 42svh; }
.gusto-estado { text-align: center; font: 300 clamp(20px, 3.4vw, 26px) var(--f-titulo); min-height: 1.3em; }
.gusto-opciones { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 520px) { .gusto-opciones { grid-template-columns: repeat(4, 1fr); } }
.gusto-opciones button {
  display: grid; justify-items: center; gap: 8px; min-height: 84px; padding: 14px 8px; border-radius: 18px; border: 1px solid var(--linea-fuerte);
  background: rgba(255, 255, 255, .03); color: var(--tinta); font: 500 15px var(--f-texto); cursor: pointer; transition: background .3s, border-color .3s, opacity .3s;
}
.gusto-opciones svg { width: 30px; height: 30px; fill: none; stroke: rgb(244, 236, 221); stroke-width: 1.3; stroke-linejoin: round; }
.gusto-opciones button:hover:not(:disabled) { border-color: rgba(244, 236, 221, .6); }
.gusto-opciones button:disabled:not(.elegido) { opacity: .35; }
.gusto-opciones button.elegido { background: rgba(244, 236, 221, .12); border-color: rgb(244, 236, 221); }
.juego .pausa-otra { justify-self: center; }
.gusto-resumen { list-style: none; display: grid; gap: 8px; }
.gusto-resumen li { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; align-items: baseline; padding: 12px 16px; border-radius: 16px; border: 1px solid var(--linea); }
.gusto-resumen span { grid-row: span 2; font: 400 9px var(--f-etiqueta); letter-spacing: .16em; text-transform: uppercase; color: var(--apagado); }
.gusto-resumen b { font: 500 17px var(--f-titulo); }
.gusto-resumen small { font-size: 13px; color: var(--tinta-2); }
.gusto-resumen li.igual { border-color: rgba(244, 236, 221, .4); }
.gusto-resumen li.igual b::after { content: ' ✓'; color: rgb(244, 236, 221); }
.gusto-prueba { display: grid; gap: 12px; padding: 16px 18px; border-radius: 18px; background: rgba(255, 255, 255, .04); font-size: 15px; color: var(--tinta-2); }
.gusto-prueba .btn[aria-pressed="true"] { background: var(--tinta); color: #050505; }
/* «¿Cómo funciona?»: una galleta que se abre con tres pasos. */
.como { justify-self: start; border-radius: 18px; border: 1px solid var(--linea); background: rgba(255, 255, 255, .03); }
.como summary { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 16px 8px 10px; cursor: pointer; list-style: none; font: 500 14px var(--f-texto); color: var(--tinta); }
.como summary::-webkit-details-marker { display: none; }
.como summary span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgb(244, 236, 221); color: #050505; font: 700 13px var(--f-texto); }
.como[open] { padding-bottom: 14px; }
.como ol { list-style: none; display: grid; gap: 10px; margin: 4px 16px 0; }
.como li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; font-size: 14px; line-height: 1.45; color: var(--tinta-2); }
.como li b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--linea-fuerte); font: 500 12px var(--f-titulo); color: var(--tinta); }
.como p { margin: 10px 16px 0; font-size: 12px; color: var(--apagado); }
.tacto-piel { width: 100%; aspect-ratio: 1.3; max-height: 40svh; border-radius: 20px; background: radial-gradient(90% 90% at 50% 40%, rgba(244, 236, 221, .06), transparent 70%); }
.tacto-guia { text-align: center; font: 300 clamp(19px, 3.2vw, 24px)/1.3 var(--f-titulo); }
.tacto-mando { display: grid; gap: 8px; }
.tacto-mando input[type="range"] { width: 100%; height: 44px; accent-color: rgb(244, 236, 221); }
.tacto-marcas { display: flex; justify-content: space-between; font: 400 9px var(--f-etiqueta); letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-2); }
.tacto-modos { margin-bottom: 0; }
.tacto-modos[hidden], .tacto-mando[hidden] { display: none; }
@media (min-width: 480px) { .dialogo.juego { width: min(620px, calc(100vw - 24px)); } }
@media (max-width: 479px) { .juego .juego-paso { min-height: calc(100svh - 64px); align-content: center; } }
@media (min-width: 900px) {
  .experiencia-rejilla { grid-template-columns: 1fr 1fr; gap: 70px; align-items: end; }
  .experiencia-rejilla .texto-grande { margin-top: 0; }
}

/* ── Estaciones ──────────────────────────────────────────────────────── */
/* La tarjeta que se lee queda centrada y a plena luz; las vecinas se funden
   hacia los bordes. --foco (0..1) lo pone sk.js en cada tarjeta según su
   distancia al centro, y todo el brillo cuelga de esa variable. */
/* Colchón grande al final: los puntos de desplazamiento quedan lejos del
   ciclo y la luz muere en medio del negro (Javi, 20/09/2026). */
.estaciones { --ancho-est: min(80vw, 390px); padding-bottom: clamp(130px, 17vw, 190px); }
.estaciones-cabecera { display: grid; gap: 18px; margin-bottom: 22px; }
.estaciones-fijo { position: relative; }
.estaciones-fijo > :not(.haces) { position: relative; z-index: 1; }
.estaciones-intro { color: var(--tinta-2); max-width: 460px; }
.curva { padding: 0 var(--margen); max-width: calc(var(--ancho)); margin: 0 auto 14px; }
.curva svg { width: 100%; height: 64px; overflow: visible; }
.curva-etiquetas { display: grid; grid-template-columns: repeat(5, 1fr); font: 400 9px var(--f-etiqueta); letter-spacing: .12em; text-transform: uppercase; color: var(--apagado); margin-top: 6px; }
.curva-etiquetas span { text-align: center; }
#curvaPunto { filter: drop-shadow(0 0 8px #fff); }
@media (max-width: 599px) { .curva-etiquetas { display: none; } }

.escenario {
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
}
/* Móvil y tableta: carrusel nativo con imán al centro. */
.pista {
  display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 18px calc((100% - var(--ancho-est)) / 2) 26px;
  scrollbar-width: none; overscroll-behavior-x: contain; outline: none;
}
.pista::-webkit-scrollbar { display: none; }
.estacion {
  --foco: 1;
  flex: 0 0 var(--ancho-est); scroll-snap-align: center; scroll-snap-stop: always;
  display: flex; flex-direction: column; min-height: 420px; padding: 28px; border-radius: var(--radio-grande);
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--c) calc(8% + 26% * var(--foco)), transparent), transparent 70%),
    var(--negro-3);
  border: 1px solid color-mix(in srgb, var(--c) calc(70% * var(--foco)), rgba(255, 255, 255, .1));
  box-shadow: 0 40px 90px -40px color-mix(in srgb, var(--c) calc(60% * var(--foco)), transparent);
  opacity: calc(.22 + .78 * var(--foco));
  transform: scale(calc(.9 + .1 * var(--foco)));
  transform-origin: center;
}
.estacion-simbolo { width: clamp(128px, 12vw, 156px); height: clamp(128px, 12vw, 156px); margin: -8px 0 auto -10px; }
.estacion-simbolo svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 calc(2px + 6px * var(--foco)) color-mix(in srgb, var(--c) 60%, transparent)); }
/* Animación sutil de los símbolos, solo en la estación activa. */
:is(.estacion, .ciclo-paso.visto, .sesion-hueco) .s-giro { transform-origin: 50px 52px; animation: s-giro 60s linear infinite; }
:is(.estacion, .ciclo-paso.visto, .sesion-hueco) .s-late { transform-box: fill-box; transform-origin: center; animation: s-late 3.4s ease-in-out infinite; }
:is(.estacion, .ciclo-paso.visto, .sesion-hueco) .s-onda { transform-origin: 50px 52px; animation: s-onda 3.6s ease-out infinite; }
:is(.estacion, .ciclo-paso.visto, .sesion-hueco) .s-onda:nth-of-type(3) { animation-delay: -1.2s; }
:is(.estacion, .ciclo-paso.visto, .sesion-hueco) .s-onda:nth-of-type(4) { animation-delay: -2.4s; }
:is(.estacion, .ciclo-paso.visto, .sesion-hueco) .s-caida { animation: s-caida 3.6s ease-in infinite; }
:is(.estacion, .ciclo-paso.visto, .sesion-hueco) .s-brote { stroke-dasharray: 20; animation: s-brote 4.5s ease-in-out infinite; }
:is(.estacion, .ciclo-paso.visto, .sesion-hueco) .s-abre { transform-origin: 50px 52px; animation: s-abre 5s ease-in-out infinite; }
.estacion:not(.activa) .estacion-simbolo * { animation-play-state: paused; }
@keyframes s-giro { to { transform: rotate(360deg); } }
@keyframes s-late { 50% { transform: scale(1.12); } }
@keyframes s-onda { 0% { transform: scale(.55); opacity: 0; } 25% { opacity: .9; } 100% { transform: scale(1.2); opacity: 0; } }
@keyframes s-caida { 0% { transform: translateY(-6px); opacity: 0; } 30% { opacity: 1; } 70%, 100% { transform: translateY(6px); opacity: 0; } }
@keyframes s-brote { 0% { stroke-dashoffset: 20; } 45%, 80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -20; } }
@keyframes s-abre { 0%, 100% { transform: scale(.94); opacity: .8; } 50% { transform: scale(1.04); opacity: 1; } }
.estacion-num { font: 400 10px var(--f-etiqueta); letter-spacing: .18em; text-transform: uppercase; color: var(--c); margin-top: 30px; filter: brightness(1.3); }
.estacion h3 { font-size: clamp(34px, 4vw, 46px); margin: 10px 0 12px; }
.estacion p:last-child { color: var(--tinta-2); font-size: 16px; }
.estacion-ritmo { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--apagado); margin-bottom: 12px; }
.estacion-ritmo span { display: inline-flex; gap: 3px; }
.estacion-ritmo i { width: 14px; height: 4px; border-radius: 2px; background: var(--linea-fuerte); }
.estacion-ritmo i.on { background: var(--c); }
/* Los puntos van PEGADOS a la tarjeta (el padding de la pista queda en
   medio: el margen negativo lo compensa). Sueltos más abajo caían del lado
   apagado de la luz y parecían de la sección siguiente (Javi, 20/09/2026). */
.pista-puntos { display: flex; justify-content: center; gap: 4px; margin-top: -16px; margin-bottom: clamp(14px, 2.5vw, 26px); }
.pista-puntos i { position: relative; width: 7px; height: 7px; margin: 0 2px; border-radius: 50%; background: var(--linea-fuerte); transition: background-color .3s, width .3s; cursor: pointer; }
.pista-puntos i::after { content: ""; position: absolute; inset: -18px -8px; }
.pista-puntos i.activo { width: 22px; border-radius: 4px; background: var(--acento-2); }

/* Teléfono en horizontal (pantalla baja): la tarjeta se compacta para caber
   entera y no cortarse por arriba. */
@media (max-height: 540px) {
  .estaciones { --ancho-est: min(72vw, 420px); }
  .pista { padding-top: 8px; padding-bottom: 14px; }
  .estacion { min-height: 0; padding: 18px 22px; }
  .estacion-simbolo { width: 84px; height: 84px; margin: -4px 0 6px -6px; }
  .estacion h3 { font-size: 26px; margin: 6px 0 8px; }
  .estacion-num { margin-top: 8px; }
}

/* Escritorio: el scroll vertical mueve la pista y cada estación se para
   un momento en el centro antes de dejar paso a la siguiente (sk.js). */
@media (min-width: 900px) and (hover: hover) and (prefers-reduced-motion: no-preference) {
  .estaciones.fijada { padding: 0; --ancho-est: min(480px, 38vw); }
  .estaciones.fijada .estaciones-fijo {
    position: sticky; top: 0; height: 100svh; overflow: hidden;
    display: flex; flex-direction: column; padding: calc(var(--nav-h) + 12px) 0 22px;
  }
  .estaciones.fijada .escenario { flex: 1; min-height: 0; display: flex; align-items: center; }
  .estaciones.fijada .pista { overflow: visible; scroll-snap-type: none; padding: 0; will-change: transform; }
  .estaciones.fijada .estacion { min-height: min(440px, 50svh); }
  .estaciones.fijada .estaciones-cabecera { margin-bottom: 4px; }
  .estaciones.fijada h2 { font-size: clamp(30px, 3.4vw, 50px); }
  .estaciones.fijada .curva svg { height: 52px; }
}
@media (min-width: 900px) {
  .estaciones-cabecera { grid-template-columns: 1fr auto; align-items: end; }
}
@media (prefers-reduced-motion: reduce) {
  .estacion { opacity: 1; transform: none; }
}

/* ── Formatos ────────────────────────────────────────────────────────── */
.conmutador { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--linea); border-radius: 999px; padding: 5px; margin: 28px 0 30px; max-width: 100%; }
.conmutador button { background: none; border: 0; color: var(--apagado); font: 600 14px var(--f-texto); min-height: 44px; padding: 8px 18px; border-radius: 999px; transition: background-color .3s, color .3s; }
.conmutador button.activo { background: var(--tinta); color: #000; }
.tarjetas { display: grid; gap: 18px; }
.formato { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: clamp(26px, 4vw, 46px); border: 1px solid var(--linea); border-radius: var(--radio-grande); background: var(--negro-2); }
.formato.destacado { background: linear-gradient(155deg, color-mix(in srgb, var(--fruto) 34%, transparent), transparent 55%), var(--negro-2); border-color: color-mix(in srgb, var(--fruto) 55%, transparent); }
.formato-sello { align-self: flex-start; order: -1; margin-bottom: 18px; font: 400 10px var(--f-etiqueta); letter-spacing: .16em; text-transform: uppercase; padding: 7px 12px; border-radius: 999px; background: var(--tierra); color: #000; }
.formato h3 { font-size: clamp(32px, 4vw, 48px); }
.formato-sub { color: var(--apagado); margin: 6px 0 26px; }
.precio { display: grid; grid-template-columns: auto auto; align-items: start; justify-content: start; column-gap: 2px; }
.precio-num { font: 300 clamp(28px, 3vw, 36px)/1 var(--f-titulo); letter-spacing: -.03em; }
.precio-ast { font: 400 16px/1 var(--f-titulo); color: var(--tinta-2); padding-top: 2px; }
.precio small { grid-column: 1 / -1; color: var(--apagado); font-size: 13px; margin-top: 4px; }
.precio small:empty { display: none; }
/* Pie de la tarjeta: el botón y, a su lado, el precio. */
.formato-pie { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; margin-top: auto; padding-top: 30px; }
.formato-pie .btn { margin-top: 0; }
.estructura-carril { margin: 26px 0 8px; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .06); }
.estructura { display: flex; gap: 3px; height: 100%; border-radius: 4px; overflow: hidden; }
.estructura span { display: block; height: 100%; }
.estructura-leyenda { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--apagado); margin-bottom: 4px; }
.estructura-leyenda i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: 0; }
.formato-desc { color: var(--tinta-2); margin-top: 22px; }
.incluye { list-style: none; display: grid; gap: 12px; margin: 24px 0 32px; }
.incluye li { display: flex; gap: 12px; color: var(--tinta-2); font-size: 16px; }
.incluye li::before { content: ""; flex: none; width: 16px; height: 2px; margin-top: 12px; background: var(--acento-2); }
.formato > .btn { margin-top: auto; align-self: flex-start; }
.precio-nota { color: var(--apagado); font-size: 14px; margin-top: 18px; }
@media (min-width: 900px) {
  .tarjetas { grid-template-columns: 1fr 1fr; }
  /* «La más completa» va a la esquina de arriba, en su propia franja: los dos
     títulos quedan a la misma altura y la etiqueta nunca pisa el nombre. */
  .tarjetas .formato { padding-top: clamp(70px, 6.4vw, 90px); }
  .formato-sello { position: absolute; top: 24px; right: 24px; margin: 0; }
}

/* ── Olas ────────────────────────────────────────────────────────────── */
.olas-lista { margin-top: 32px; }
.ola { position: relative; display: grid; grid-template-columns: 74px 1fr; gap: 12px 18px; align-items: center; padding: 30px 0; }
/* Entre onda y onda, un hilo que se funde en los extremos: más elegante que
   una raya de lado a lado (Javi, 20/09/2026). */
.ola + .ola::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--linea) 20%, var(--linea) 80%, transparent); }
/* Con ratón, se ilumina SOLO la onda que se toca: un velo apenas visible y
   su fecha en el color de la paleta. El fondo de la sección no se toca
   (Javi, 20/09/2026: nada de fondos que marquen costuras). */
@media (hover: hover) {
  .ola { margin: 0 -18px; padding-left: 18px; padding-right: 18px; border-radius: 20px; transition: background-color .35s ease; }
  .ola:hover { background: rgba(255, 255, 255, .05); }
  .ola:hover .ola-fecha { color: var(--acento-2); transition: color .35s ease; }
  /* Con ratón, el punto y el «Pronto» descansan apagados y se encienden solo
     en la fila que se toca (Javi, 20/09/2026: nada de encenderse a la vez). */
  .olas-lista .ola-fecha-pronto span { color: var(--apagado); transition: color .35s ease, text-shadow .35s ease; }
  .olas-lista .ola-fecha-pronto small { transition: color .35s ease; }
  .ola:hover .ola-fecha-pronto span { color: var(--acento-2); text-shadow: 0 0 14px var(--acento-2); }
  .ola:hover .ola-fecha-pronto small { color: var(--tinta-2); }
}
.ola-fecha { font: 300 38px/1 var(--f-titulo); text-align: left; }
.ola-fecha small { display: block; font: 400 9px/1.4 var(--f-etiqueta); letter-spacing: .16em; text-transform: uppercase; color: var(--apagado); margin-top: 6px; }
.ola-fecha-pronto span { color: var(--acento-2); }
.ola-info h3 { font-size: clamp(19px, 2.2vw, 24px); }
.ola-info p { color: var(--apagado); font-size: 15px; margin-top: 4px; }
.ola-estado { grid-column: 2; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; color: var(--tinta-2); font-size: 14px; }
.ola-estado .ola-precio { font: 500 18px var(--f-titulo); color: var(--tinta); }
.ola > .btn { grid-column: 2; justify-self: start; }
@media (min-width: 768px) {
  .ola { grid-template-columns: 110px 1fr auto auto; gap: 24px; }
  .ola-fecha { font-size: 46px; }
  .ola-estado, .ola > .btn { grid-column: auto; justify-self: end; }
}

/* ── Empresas ────────────────────────────────────────────────────────── */
.empresas-rejilla { display: grid; gap: 36px; align-items: center; }
/* Las visuales decorativas van sin marco: flotan sobre el fondo de la sección. */
.empresas-visual { aspect-ratio: 1; max-width: 520px; width: 100%; }
.empresas-visual canvas { width: 100%; height: 100%; }
.usos { list-style: none; display: grid; gap: 18px; margin: 32px 0 36px; }
.usos li { padding-left: 20px; border-left: 2px solid var(--acento-2); transition: border-color .6s; }
.usos strong { display: block; font: 500 17px var(--f-titulo); margin-bottom: 4px; }
.usos span { color: var(--tinta-2); font-size: 16px; }
@media (min-width: 900px) { .empresas-rejilla { grid-template-columns: 1fr 1.1fr; gap: 80px; } }

/* ── Quién guía ──────────────────────────────────────────────────────── */
.guia { background: #050505; overflow: hidden; }
.guia-rejilla { display: grid; gap: 32px; align-items: center; }
.guia-foto { overflow: hidden; aspect-ratio: 4 / 5; max-width: 520px; -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 16%, #000 90%, transparent 100%); mask-image: linear-gradient(0deg, transparent 0, #000 16%, #000 90%, transparent 100%); }
.guia-foto img { width: 100%; height: 100%; object-fit: cover; }
/* Escritorio: la foto horizontal ocupa la sección entera; el texto va sobre
   el negro de la izquierda, que es el propio fondo de la foto. */
@media (min-width: 900px) {
  .guia { min-height: min(720px, 86svh); display: flex; align-items: center; }
  .guia-foto {
    position: absolute; top: 0; bottom: 0; right: 0; width: min(78%, 1150px); max-width: none; aspect-ratio: auto;
    border: 0; border-radius: 0;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%, #000 88%, transparent 100%), linear-gradient(0deg, transparent 0, #000 12%, #000 88%, transparent 100%);
    -webkit-mask-composite: source-in; mask-composite: intersect;
    mask-image: linear-gradient(90deg, transparent 0, #000 30%, #000 88%, transparent 100%), linear-gradient(0deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  }
  .guia-foto img { object-position: 70% 30%; }
  .guia-rejilla { width: 100%; }
  .guia-texto { position: relative; z-index: 1; max-width: min(520px, 44%); }
}
/* «¿Quién es Luis Sancho?»: galleta bajo el texto de Quién guía (v7.1). Abre
   #dlgLuis; sin enlace a su web, a propósito. */
.galleta-quien {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 18px; padding: 8px 16px 8px 10px;
  border-radius: 999px; border: 1px solid var(--linea); background: rgba(255, 255, 255, .03);
  font: 500 14px var(--f-texto); color: var(--tinta); transition: background-color .3s, border-color .3s;
}
.galleta-quien span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--acento-2); color: #050505; font: 700 13px/1 var(--f-texto); }
.galleta-quien:hover { background: rgba(255, 255, 255, .08); border-color: var(--acento-2); }
.dialogo-quien .etiqueta { padding-right: 48px; margin-bottom: 14px; }
.quien-hitos { display: grid; gap: 18px; margin-top: 24px; }
.quien-hitos dt { font: 400 11px var(--f-etiqueta); letter-spacing: .14em; text-transform: uppercase; color: var(--acento-2); }
.quien-hitos dd { margin-top: 6px; color: var(--tinta-2); line-height: 1.55; }
.quien-porque { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--linea); font: 300 clamp(18px, 2.6vw, 21px)/1.4 var(--f-titulo); }
.datos { display: flex; flex-wrap: wrap; gap: 26px 44px; margin-top: 36px; }
.datos dt { font: 300 44px/1 var(--f-titulo); }
.datos dd { color: var(--apagado); font-size: 14px; margin-top: 6px; }


/* ── Voces ───────────────────────────────────────────────────────────── */
.voces-lista { display: grid; gap: 18px; margin-top: 36px; }
.voz { border: 1px solid var(--linea); border-radius: var(--radio); padding: 30px; }
.voz blockquote { font: 300 20px/1.45 var(--f-titulo); margin-bottom: 20px; }
.voz figcaption { color: var(--apagado); font-size: 14px; }
@media (min-width: 900px) { .voces-lista { grid-template-columns: repeat(3, 1fr); } }

/* ── FAQ ─────────────────────────────────────────────────────────────── */
.faq-rejilla { display: grid; gap: 28px; }
.faq-lista details { border-bottom: 1px solid var(--linea); }
.faq-lista details:first-child { border-top: 1px solid var(--linea); }
.faq-lista summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; align-items: center; min-height: 64px; padding: 16px 0; font: 500 clamp(17px, 2vw, 21px)/1.3 var(--f-titulo); }
.faq-lista summary::-webkit-details-marker { display: none; }
.faq-lista summary::after { content: "+"; flex: none; font-weight: 300; font-size: 26px; transition: rotate .3s; }
.faq-lista details[open] summary::after { rotate: 45deg; }
.faq-lista details p { color: var(--tinta-2); padding-bottom: 22px; max-width: 720px; }
@media (min-width: 900px) { .faq-rejilla { grid-template-columns: .8fr 1.2fr; gap: 80px; } }

/* ── La Ola ──────────────────────────────────────────────────────────── */
/* A la izquierda, como el resto de los apartados (v6.9, Javi). */
.unete { overflow: hidden; }
.unete h2 { font-size: clamp(38px, 8vw, 110px); font-weight: 300; }
.form-ola { max-width: 540px; margin-top: 40px; }
.form-ola-fila { display: flex; gap: 8px; border: 1px solid var(--linea-fuerte); border-radius: 999px; padding: 6px; }
.form-ola-fila input { flex: 1; min-width: 0; background: none; border: 0; padding: 0 16px; font-size: 16px; outline: none; }
.form-ola .check { margin-top: 16px; }

/* ── Formularios comunes ─────────────────────────────────────────────── */
.formulario { display: grid; gap: 16px; margin-top: 26px; }
.formulario label { display: grid; gap: 6px; font-size: 14px; color: var(--tinta-2); }
.formulario .opcional { color: var(--apagado); font-size: 13px; }
.formulario input:not([type=checkbox]):not([type=radio]), .formulario select, .formulario textarea {
  width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 12px; font-size: 16px;
  background: var(--negro-3); border: 1px solid var(--linea-fuerte); color: var(--tinta);
}
.formulario textarea { resize: vertical; min-height: 110px; }
.formulario input:focus, .formulario select:focus, .formulario textarea:focus { border-color: var(--acento-2); outline: none; }
.formulario-fila { display: grid; gap: 16px; }
@media (min-width: 480px) { .formulario-fila { grid-template-columns: 1fr 1fr; } }
.check { display: flex !important; grid-template-columns: none; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--tinta-2); cursor: pointer; }
.check input { flex: none; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--acento-2); }
.check a { color: var(--tinta); }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-estado { min-height: 22px; font-size: 14px; color: var(--acento-2); }
.form-estado.error { color: #ff8f8f; }
.formulario .btn { justify-self: start; }

/* ── Diálogos ────────────────────────────────────────────────────────── */
.dialogo {
  margin: auto; width: min(560px, calc(100vw - 24px)); max-height: calc(100svh - 24px); overflow-y: auto;
  padding: 34px clamp(20px, 5vw, 38px) 30px; border-radius: 26px; border: 1px solid var(--linea-fuerte);
  background: var(--negro-2); color: var(--tinta); overscroll-behavior: contain;
}
.dialogo::backdrop { background: rgba(0, 0, 0, .7); backdrop-filter: blur(6px); }
.dialogo h2 { font-size: clamp(24px, 4vw, 32px); padding-right: 36px; }
.dialogo-cerrar-form { position: absolute; top: 14px; right: 14px; }
.dialogo-cerrar { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--linea); background: none; font-size: 24px; line-height: 1; }
.dialogo-contexto { margin-top: 12px; color: var(--tinta-2); }
@media (max-width: 479px) {
  .dialogo { width: 100vw; max-width: 100vw; max-height: 100svh; height: 100svh; border-radius: 0; margin: 0; }
}

/* ── Pie ─────────────────────────────────────────────────────────────── */
.pie { border-top: 1px solid var(--linea); padding: 48px 0 32px; color: var(--apagado); font-size: 15px; }
.pie-rejilla { display: grid; gap: 36px; grid-template-columns: 1fr 1fr; }
.pie-marca { grid-column: 1 / -1; }
.pie-marca img { width: min(300px, 70vw); height: auto; margin-bottom: 16px; }
.pie-titulo { font: 400 11px var(--f-etiqueta); letter-spacing: .2em; text-transform: uppercase; color: var(--tinta); margin-bottom: 12px; }
.pie a { display: flex; align-items: center; min-height: 36px; text-decoration: none; }
.pie a:hover { color: var(--tinta); }
.pie-final { margin-top: 32px; font-size: 13px; }
@media (min-width: 900px) { .pie-rejilla { grid-template-columns: 2fr 1fr 1fr 1fr; } .pie-marca { grid-column: auto; } }

/* ── Barra «Próxima ola» ─────────────────────────────────────────────── */
.proxima {
  position: fixed; z-index: 50; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; border-radius: 999px;
  background: rgba(20, 20, 24, .82); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid var(--linea);
  translate: 0 calc(100% + 40px); opacity: 0; transition: translate .5s cubic-bezier(.2, .8, .2, 1), opacity .4s, bottom .3s;
  pointer-events: none;
}
.proxima.visible { translate: 0 0; opacity: 1; pointer-events: auto; }
.proxima-cerrar { flex: none; width: 38px; height: 40px; border-radius: 50%; border: 0; background: none; color: var(--apagado); font-size: 21px; line-height: 1; cursor: pointer; }
.proxima-cerrar:hover { color: var(--tinta); }
.proxima-punto { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--acento-2); box-shadow: 0 0 12px var(--acento-2); }
.proxima-texto { flex: 1; min-width: 0; font-size: clamp(12.5px, 3.4vw, 14px); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proxima-texto span { color: var(--apagado); }
@media (min-width: 768px) {
  .proxima { left: 50%; right: auto; translate: -50% calc(100% + 40px); max-width: 620px; }
  .proxima.visible { translate: -50% 0; }
}

/* ── Aviso de cookies: pequeño, abajo y sin tapar nada ───────────────── */
.aviso {
  position: relative; z-index: 3; justify-self: center; width: min(460px, calc(100% - 2 * var(--margen)));
  display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; text-align: left;
  border-radius: 18px; background: var(--negro-3); border: 1px solid var(--linea-fuerte); font-size: 13px; line-height: 1.4; color: var(--tinta-2);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
}
.aviso p { flex: 1 1 auto; min-width: 0; }
.aviso .btn { flex: none; }
.aviso a { color: var(--tinta); }
@media (min-width: 1100px) { .aviso { position: absolute; right: var(--margen); bottom: 24px; width: 380px; } }

/* ── Aparición al hacer scroll ───────────────────────────────────────── */
.js .aparece { opacity: 0; transform: translateY(34px); transition: opacity .9s, transform .9s cubic-bezier(.2, .8, .2, 1); }
.js .aparece.dentro { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .aparece { opacity: 1; transform: none; }
}

/* ── Páginas legales ─────────────────────────────────────────────────── */
.legal { padding: calc(var(--nav-h) + 50px) 0 90px; }
.legal h1 { font-size: clamp(32px, 6vw, 60px); margin-bottom: 14px; }
.legal h2 { font-size: clamp(20px, 3vw, 26px); margin: 44px 0 12px; }
.legal p, .legal li { color: var(--tinta-2); max-width: 760px; }
.legal p + p { margin-top: 12px; }
.legal ul { padding-left: 22px; margin: 10px 0; }
.legal a { color: var(--tinta); }
.legal .envoltura { max-width: 860px; }
.nav-simple .nav-enlaces, .nav-simple .nav-menu { display: none; }

/* ── Páginas legales: índice y datos ─────────────────────────────────── */
.legal-entrada { font-size: clamp(17px, 1.8vw, 19px); margin-top: 6px; }
.legal-indice { display: flex; flex-wrap: wrap; gap: 8px; margin: 30px 0 10px; }
.legal-indice a { font-size: 13px; text-decoration: none; padding: 8px 14px; border: 1px solid var(--linea); border-radius: 999px; color: var(--tinta-2); }
.legal-indice a:hover { border-color: var(--linea-fuerte); color: var(--tinta); }
.legal-bloque { padding: 0; }
.legal-bloque h2 { display: flex; gap: 14px; align-items: baseline; scroll-margin-top: calc(var(--nav-h) + 16px); }
.legal-bloque h2 span { font: 400 12px var(--f-etiqueta); letter-spacing: .16em; color: var(--acento-2); }
.legal-datos, .legal-tabla { display: grid; gap: 1px; margin: 16px 0; border: 1px solid var(--linea); border-radius: 18px; overflow: hidden; max-width: 760px; }
.legal-datos > div, .legal-tabla > div { display: grid; gap: 4px 20px; padding: 14px 18px; background: var(--negro-2); }
.legal-datos dt, .legal-tabla dt { font-size: 13px; color: var(--apagado); }
.legal-tabla dt { color: var(--tinta); font-weight: 600; font-size: 15px; }
.legal-datos dd, .legal-tabla dd { color: var(--tinta-2); }
@media (min-width: 768px) { .legal-datos > div { grid-template-columns: 190px 1fr; } }

/* ── Información básica de protección de datos bajo los formularios ──── */
.info-rgpd { font-size: 12px; line-height: 1.5; color: var(--apagado); margin-top: 4px; }
.info-rgpd a { color: var(--tinta-2); }

/* ── Indicación binaural ──────────────────────────────────────────────── */
.binaural {
  position: fixed; z-index: 80; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); translate: -50% 0;
  width: min(460px, calc(100vw - 24px)); display: flex; align-items: center; gap: 14px; padding: 14px 12px 14px 16px;
  border-radius: 22px; background: rgba(16, 16, 20, .92); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid color-mix(in srgb, var(--acento-2) 45%, transparent); box-shadow: 0 20px 60px rgba(0, 0, 0, .55), 0 0 40px -10px color-mix(in srgb, var(--acento-2) 45%, transparent);
  animation: binaural-entra .6s cubic-bezier(.2, .8, .2, 1);
}
.binaural.sale { opacity: 0; translate: -50% 20px; transition: opacity .5s, translate .5s; }
@keyframes binaural-entra { from { opacity: 0; translate: -50% 24px; } }
.binaural-icono { flex: none; width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; background: color-mix(in srgb, var(--acento-2) 12%, transparent); }
.binaural-icono svg { width: 46px; height: 46px; fill: none; stroke: var(--tinta); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.binaural-icono .icono-cascos { display: none; }
.binaural.cascos .icono-movil { display: none; }
.binaural.cascos .icono-cascos { display: block; }
.binaural .movil { transform-origin: 32px 28px; animation: gira-movil 3.2s ease-in-out infinite; }
.binaural.horizontal .movil { animation: none; transform: rotate(90deg); }
@keyframes gira-movil { 0%, 22% { transform: rotate(0); } 48%, 88% { transform: rotate(90deg); } 100% { transform: rotate(0); } }
.binaural [class^="onda"] { stroke: var(--acento-2); opacity: 0; }
.binaural.horizontal [class^="onda"], .binaural.cascos [class^="onda"] { animation: onda-sonido 1.8s ease-out infinite; }
.binaural [class$="2"] { animation-delay: .35s !important; }
@keyframes onda-sonido { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
.binaural-cuerpo { flex: 1; min-width: 0; }
.binaural-titulo { font: 400 10px var(--f-etiqueta); letter-spacing: .18em; text-transform: uppercase; color: var(--acento-2); margin-bottom: 4px; }
.binaural-texto { font-size: 14px; line-height: 1.45; color: var(--tinta); }
.binaural-cerrar { flex: none; align-self: flex-start; width: 36px; height: 36px; border-radius: 50%; border: 0; background: none; color: var(--apagado); font-size: 22px; line-height: 1; }
.binaural-cerrar:hover { color: var(--tinta); }
@media (prefers-reduced-motion: reduce) { .binaural .movil { transform: rotate(90deg); } }

/* ── Elección de escucha ──────────────────────────────────────────────── */
.dialogo-sonido { width: min(520px, calc(100vw - 24px)); }
.dialogo-sonido::backdrop { background: rgba(0, 0, 0, .78); backdrop-filter: blur(10px); }
.escucha { display: grid; gap: 12px; margin-top: 24px; }
.escucha-opcion {
  display: flex; align-items: center; gap: 16px; width: 100%; min-height: 84px; padding: 14px 16px; text-align: left;
  border-radius: 20px; border: 1px solid var(--linea-fuerte); background: var(--negro-3); color: var(--tinta);
  transition: border-color .3s, background-color .3s, transform .2s;
}
.escucha-opcion:hover { border-color: var(--acento-2); }
.escucha-opcion:active { transform: scale(.985); }
.escucha-opcion.recomendada { border-color: color-mix(in srgb, var(--acento-2) 60%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--acento-2) 16%, transparent), transparent 70%), var(--negro-3); }
.escucha-icono { flex: none; width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: rgba(255, 255, 255, .05); }
.escucha-icono svg { width: 44px; height: 44px; fill: none; stroke: var(--tinta); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.escucha-icono [class^="onda"] { stroke: var(--acento-2); animation: onda-sonido 1.8s ease-out infinite; }
.escucha-icono .onda-d { animation-delay: .9s; }
.escucha-opcion .movil { transform-origin: 32px 28px; animation: gira-movil 3.2s ease-in-out infinite; }
.escucha-texto { display: grid; gap: 3px; }
.escucha-texto strong { font: 500 17px var(--f-titulo); }
.escucha-texto span { font-size: 14px; color: var(--tinta-2); line-height: 1.4; }
@media (max-width: 479px) { .dialogo-sonido { height: auto; max-height: 100svh; align-self: end; margin-bottom: 0; border-radius: 26px 26px 0 0; } }
@media (prefers-reduced-motion: reduce) { .escucha-opcion .movil { transform: rotate(90deg); } }

/* ── Reproductor: la galleta del sonido ──────────────────────────────── */
.repro {
  position: fixed; z-index: 54; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom) + var(--proxima-h));
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 52px; height: 52px; padding: 0;
  border-radius: 999px; border: 1px solid var(--linea-fuerte); color: var(--tinta);
  background: rgba(16, 16, 20, .84); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
  transition: translate .55s cubic-bezier(.2, .8, .2, 1), opacity .45s, bottom .3s, border-color .8s, box-shadow .8s;
}
.repro:hover { border-color: color-mix(in srgb, var(--pc) 70%, transparent); }
.repro.sonando { border-color: color-mix(in srgb, var(--pc) 55%, transparent); box-shadow: 0 12px 40px rgba(0, 0, 0, .5), 0 0 calc(24px + var(--latido, 0) * 22px) -6px var(--pc); }
.repro.apartada { translate: calc(100% - 16px) 0; opacity: .8; }
@media (hover: hover) { .repro.apartada:hover { translate: none; opacity: 1; } }
.repro.apartada:focus-visible { translate: none; opacity: 1; }
.repro.oculta { opacity: 0; translate: 0 calc(100% + 30px); pointer-events: none; }
.repro-barras { display: flex; align-items: flex-end; gap: 3px; height: 16px; }
.repro-barras i { width: 3px; height: 4px; border-radius: 2px; background: var(--tinta-2); transition: background-color .8s; }
.repro.sonando .repro-barras i { background: var(--pc); animation: barra 1.1s ease-in-out infinite alternate; }
.repro.sonando .repro-barras i:nth-child(2) { animation-delay: .25s; }
.repro.sonando .repro-barras i:nth-child(3) { animation-delay: .5s; }
.repro.sonando .repro-barras i:nth-child(4) { animation-delay: .15s; }
.repro.sonando .repro-barras i:nth-child(5) { animation-delay: .4s; }
.repro-etiqueta { display: none; font: 400 10px var(--f-etiqueta); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
@media (min-width: 768px) {
  .repro { right: 20px; bottom: calc(20px + var(--proxima-h)); width: auto; padding: 0 20px 0 18px; }
  .repro-etiqueta { display: block; }
}

.repro-velo { position: fixed; inset: 0; z-index: 89; background: rgba(0, 0, 0, .55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: aparece-velo .35s; }
@keyframes aparece-velo { from { opacity: 0; } }
.repro-panel {
  position: fixed; z-index: 90; left: 0; right: 0; bottom: 0; max-height: 90svh; overflow-y: auto; overscroll-behavior: contain;
  padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); border-radius: 26px 26px 0 0;
  border: 1px solid var(--linea-fuerte); border-bottom: 0; background: rgba(14, 14, 18, .96);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 -20px 70px rgba(0, 0, 0, .6), 0 0 70px -24px var(--pc);
  animation: repro-sube .5s cubic-bezier(.2, .8, .2, 1);
}
@keyframes repro-sube { from { translate: 0 40px; opacity: 0; } }
@media (min-width: 600px) {
  .repro-velo { display: none; }
  .repro-panel {
    left: auto; right: 14px; bottom: calc(80px + env(safe-area-inset-bottom) + var(--proxima-h)); width: 380px;
    max-height: calc(100svh - var(--nav-h) - 110px); padding: 16px 20px 14px; border-radius: 26px; border-bottom: 1px solid var(--linea-fuerte);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 70px -24px var(--pc);
  }
}
@media (min-width: 768px) { .repro-panel { right: 20px; bottom: calc(86px + var(--proxima-h)); } }
.repro-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.repro-cabecera .etiqueta { margin: 0; font-size: 10px; }
.repro-cerrar { flex: none; width: 44px; height: 44px; margin-right: -10px; border-radius: 50%; border: 0; background: none; color: var(--apagado); font-size: 24px; line-height: 1; }
.repro-cerrar:hover { color: var(--tinta); }
.repro-ahora { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 8px 0 18px; }
.repro-orbe {
  width: 56px; height: 56px; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, color-mix(in srgb, var(--pc) 70%, #fff 30%), color-mix(in srgb, var(--pc) 55%, #050505) 48%, #050505 100%);
  box-shadow: 0 0 34px -6px var(--pc); transition: box-shadow .8s;
}
.repro-panel.sonando .repro-orbe { animation: orbe-late 2.6s ease-in-out infinite; }
@keyframes orbe-late { 50% { transform: scale(1.06); box-shadow: 0 0 44px -2px var(--pc); } }
.repro-titulo { font: 500 22px/1.15 var(--f-titulo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.repro-sub { font-size: 13px; line-height: 1.4; color: var(--apagado); margin-top: 3px; }
.repro-play { width: 54px; height: 54px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--tinta); color: #050505; transition: transform .2s, background-color .3s; }
.repro-play:hover { background: color-mix(in srgb, var(--pc) 35%, #fff); }
.repro-play:active { transform: scale(.95); }
.repro-play svg { width: 22px; height: 22px; fill: currentColor; }
.repro-play .i-pausa, .repro-panel.sonando .repro-play .i-play { display: none; }
.repro-panel.sonando .repro-play .i-pausa { display: block; }

.repro-ondas-caja { position: relative; margin: 0 -20px 14px; }
.repro-ondas-titulo { padding: 0 20px 8px; font: 400 9px var(--f-etiqueta); letter-spacing: .18em; text-transform: uppercase; color: var(--apagado); }
.repro-ondas { display: flex; gap: 8px; overflow-x: auto; padding: 2px 20px; scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding: 0 20px; }
.repro-ondas button { scroll-snap-align: start; }
/* Bordes difuminados: dicen que hay más viajes a un lado o al otro. */
.repro-ondas-caja.mas-der .repro-ondas { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 64px), transparent); }
.repro-ondas-caja.mas-izq .repro-ondas { -webkit-mask-image: linear-gradient(90deg, transparent, #000 64px); mask-image: linear-gradient(90deg, transparent, #000 64px); }
.repro-ondas-caja.mas-izq.mas-der .repro-ondas { -webkit-mask-image: linear-gradient(90deg, transparent, #000 64px, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(90deg, transparent, #000 64px, #000 calc(100% - 64px), transparent); }
.repro-flecha {
  position: absolute; bottom: 12px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--linea-fuerte); background: rgba(14, 14, 18, .92); color: var(--tinta); cursor: pointer;
}
.repro-flecha.izq { left: 6px; } .repro-flecha.der { right: 6px; }
.repro-flecha svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.repro-flecha[hidden] { display: none; }
.repro-ambiente { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--linea); color: var(--tinta-2); font-size: 13px; text-decoration: none; transition: border-color .3s; }
.repro-ambiente:hover { border-color: var(--pc, var(--acento-2)); }
.repro-ambiente strong { color: var(--tinta); font-weight: 600; }
.repro-ambiente-luz { flex: none; width: 22px; height: 22px; border-radius: 50%; background: conic-gradient(from 0deg, #93dcd5, #3b7ea1, #e5c47b, #8e5db5, #93dcd5); filter: blur(3px); animation: gira 8s linear infinite; }
@media (prefers-reduced-motion: reduce) { .repro-ambiente-luz { animation: none; } }
.repro-ondas::-webkit-scrollbar { display: none; }
.repro-ondas button {
  flex: none; min-height: 52px; padding: 8px 14px; border-radius: 16px; text-align: left; font-size: 12px; line-height: 1.3;
  border: 1px solid var(--linea); background: var(--negro-3); color: var(--apagado); transition: border-color .3s, color .3s;
}
.repro-ondas button strong { display: block; font: 500 14px var(--f-titulo); color: var(--tinta); }
.repro-ondas button[aria-checked="true"] { border-color: var(--c); box-shadow: 0 0 22px -10px var(--c); color: var(--tinta-2); }

.repro-historia { margin: -4px 0 14px; font-size: 13px; line-height: 1.5; color: var(--apagado); font-style: italic; }
.repro-modos { display: flex; gap: 4px; padding: 4px; margin-bottom: 14px; border: 1px solid var(--linea); border-radius: 999px; }
.repro-modos button { flex: 1; min-height: 44px; border: 0; border-radius: 999px; background: none; color: var(--tinta-2); font: 600 14px var(--f-texto); transition: background-color .3s, color .3s; }
.repro-modos button:hover { color: var(--tinta); }
.repro-modos button[aria-checked="true"] { background: var(--tinta); color: #050505; }
.repro-vista > p { font-size: 14px; line-height: 1.55; color: var(--tinta-2); }
.repro-vista > p.repro-invita, .repro-oferta .repro-invita { font: 500 19px/1.25 var(--f-titulo); color: var(--tinta); margin-bottom: 6px; }

.repro-pistas { list-style: none; margin-top: 12px; border-top: 1px solid var(--linea); }
.repro-pistas button {
  width: 100%; display: grid; grid-template-columns: 10px 24px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  min-height: 50px; padding: 0 4px; border: 0; border-bottom: 1px solid var(--linea); background: none; color: var(--tinta); text-align: left;
  transition: background-color .3s;
}
.repro-pistas button:hover { background: rgba(255, 255, 255, .03); }
.repro-punto { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px -2px var(--c); }
.repro-num { font: 400 10px var(--f-etiqueta); letter-spacing: .14em; color: var(--apagado); }
.repro-nombre { font: 500 16px var(--f-titulo); }
.repro-dur { font-size: 13px; color: var(--apagado); font-variant-numeric: tabular-nums; }
.repro-pistas button[aria-current="true"] .repro-nombre { color: var(--c); }
.repro-panel.sonando .repro-pistas button[aria-current="true"] .repro-punto { animation: punto-late 1.6s ease-in-out infinite; }
@keyframes punto-late { 50% { transform: scale(1.35); box-shadow: 0 0 16px 0 var(--c); } }

.repro-progreso { margin-top: 12px; }
/* La barra de todos los reproductores (barra-tiempo.js, v5.4): bloques con su
   color y, a la vez, cualquier punto con el dedo. El cabezal es el final del
   relleno del bloque que suena; el globo sale al arrastrar (y con ratón, al pasar). */
.barra-t { position: relative; display: flex; gap: 4px; height: 44px; cursor: pointer; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; outline: none; }
.barra-t-bloque { position: relative; flex-basis: 0; min-width: 6px; }
.barra-t-bloque::before, .barra-t-bloque i { content: ""; position: absolute; left: 0; top: 19px; height: 6px; border-radius: 3px; }
.barra-t-bloque::before { right: 0; background: rgba(255, 255, 255, .1); transition: background .3s; }
.barra-t-bloque i { width: calc(var(--lleno, 0) * 100%); background: var(--c); box-shadow: 0 0 12px -2px var(--c); transition: width .9s linear; }
.barra-t.con-bloques .barra-t-bloque.actual i { box-shadow: 0 0 10px var(--c); }
.barra-t-bloque.actual i::after { content: ""; position: absolute; right: -6px; top: -3px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px var(--c); transition: transform .2s; }
.barra-t:hover .barra-t-bloque::before { background: rgba(255, 255, 255, .16); }
.barra-t.con-bloques .barra-t-bloque::before { background: color-mix(in srgb, var(--c) 26%, transparent); }
.barra-t.con-bloques:hover .barra-t-bloque::before { background: color-mix(in srgb, var(--c) 38%, transparent); }
.barra-t.arrastrando .barra-t-bloque i { transition: none; }
.barra-t.arrastrando .barra-t-bloque.actual i::after, .barra-t:focus-visible .barra-t-bloque.actual i::after { transform: scale(1.35); }
.barra-t:focus-visible .barra-t-bloque::before { background: rgba(255, 255, 255, .22); }
.barra-t-globo { position: absolute; bottom: 36px; left: 0; transform: translateX(-50%); padding: 5px 9px; border-radius: 9px; background: rgba(12, 12, 14, .92); border: 1px solid var(--linea); font: 400 11px var(--f-etiqueta); letter-spacing: .08em; color: var(--tinta); white-space: nowrap; font-variant-numeric: tabular-nums; pointer-events: none; opacity: 0; transition: opacity .2s; }
.barra-t.con-globo .barra-t-globo { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .barra-t-bloque i, .barra-t-bloque i::after { transition: none; } }
.repro-tiempo { display: flex; justify-content: space-between; font: 400 10px var(--f-etiqueta); letter-spacing: .12em; color: var(--apagado); font-variant-numeric: tabular-nums; }
.repro-vista .btn { margin-top: 14px; }
.repro-repetir { display: flex; align-items: center; gap: 12px; min-height: 44px; margin-top: 6px; font-size: 14px; color: var(--tinta-2); cursor: pointer; }
.repro-repetir input { flex: none; width: 20px; height: 20px; accent-color: var(--acento-2); }
.repro-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; margin-top: 14px; padding-top: 6px; border-top: 1px solid var(--linea); font-size: 13px; color: var(--apagado); }
.repro-enlace { min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; font-size: 13px; }

.repro-oferta {
  position: fixed; z-index: 56; right: 14px; bottom: calc(78px + env(safe-area-inset-bottom) + var(--proxima-h)); width: min(330px, calc(100vw - 28px));
  padding: 18px 18px 16px; border-radius: 22px; background: rgba(16, 16, 20, .95); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid color-mix(in srgb, var(--pc) 50%, transparent); box-shadow: 0 20px 60px rgba(0, 0, 0, .55), 0 0 40px -12px var(--pc);
  animation: repro-sube .6s cubic-bezier(.2, .8, .2, 1);
}
.repro-oferta p { font-size: 14px; line-height: 1.5; color: var(--tinta-2); }
.repro-oferta-botones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
@media (min-width: 768px) { .repro-oferta { right: 20px; bottom: calc(86px + var(--proxima-h)); } }
/* Desde 1100 px la barra de la próxima onda queda en el centro y no choca. */
@media (min-width: 1100px) { .repro { bottom: 20px; } .repro-panel, .repro-oferta { bottom: 86px; } }

@media (prefers-reduced-motion: reduce) {
  .repro.sonando .repro-barras i, .repro-panel.sonando .repro-orbe, .repro-panel.sonando .repro-pistas button[aria-current="true"] .repro-punto { animation: none; }
  .repro.sonando .repro-barras i { height: 10px; }
}

/* ── Página «Tu entrada» ─────────────────────────────────────────────── */
.entrada { position: relative; overflow: hidden; min-height: 100svh; padding: calc(var(--nav-h) + 50px) 0 80px; }
.entrada-halo {
  position: absolute; left: 50%; top: 0; width: 120vmax; height: 120vmax; translate: -50% -55%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--nube) 16%, transparent), color-mix(in srgb, var(--fruto) 8%, transparent) 35%, transparent 60%);
}
.entrada-envoltura { position: relative; max-width: 720px; }
.entrada h1 { font-size: clamp(34px, 6.5vw, 64px); margin-bottom: 14px; }
.entrada-intro { color: var(--tinta-2); font-size: clamp(16px, 1.8vw, 19px); max-width: 620px; }
.entrada-form { margin-top: 30px; max-width: 520px; }
.entrada-nota { margin-top: 44px; font-size: 13px; line-height: 1.6; color: var(--apagado); max-width: 620px; }
.entrada-nota a { color: var(--tinta-2); }
.entrada-resultado { margin-top: 40px; scroll-margin-top: calc(var(--nav-h) + 20px); }
.codigo { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; letter-spacing: .08em; }

.billete {
  --c: var(--nube);
  position: relative; padding: 24px clamp(20px, 4vw, 34px) 26px; border-radius: var(--radio-grande);
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
  background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--c) 18%, transparent), transparent 60%), var(--negro-2);
  box-shadow: 0 40px 90px -50px color-mix(in srgb, var(--c) 70%, transparent);
  animation: repro-sube .6s cubic-bezier(.2, .8, .2, 1);
}
/* Las muescas de un billete, a la altura de la línea discontinua. */
.billete:not(.hecho)::before, .billete:not(.hecho)::after {
  content: ""; position: absolute; top: 62px; width: 22px; height: 22px; border-radius: 50%; background: var(--negro);
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
}
.billete::before { left: -12px; clip-path: inset(0 0 0 50%); }
.billete::after { right: -12px; clip-path: inset(0 50% 0 0); }
.billete-cabecera { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px dashed var(--linea-fuerte); }
.billete-cabecera .etiqueta { margin: 0; }
.billete-cabecera .codigo { font-size: 15px; color: var(--tinta); }
.billete-onda { font: 500 clamp(22px, 3.4vw, 30px)/1.2 var(--f-titulo); }
.billete-meta { margin-top: 6px; color: var(--tinta-2); font-size: 15px; }
.plazo-estado { display: flex; gap: 10px; align-items: baseline; margin-top: 18px; color: var(--tinta-2); font-size: 15px; line-height: 1.5; }
.plazo-estado > span { flex: 1; min-width: 0; }
.plazo-estado i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--apagado); }
.plazo-estado.dentro i { background: var(--nube); box-shadow: 0 0 12px var(--nube); }
.plazo-estado.fuera i { background: var(--tierra); box-shadow: 0 0 12px var(--tierra); }
.plazo-estado strong { color: var(--tinta); font-weight: 600; }
.plazo-estado a { color: var(--tinta); }

.linea-plazo { position: relative; margin: 44px 0 40px; }
.linea-barra { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.linea-cortesia { display: block; height: 100%; background: linear-gradient(90deg, color-mix(in srgb, var(--nube) 35%, transparent), var(--nube)); box-shadow: 0 0 14px var(--nube); }
.linea-marca { position: absolute; display: grid; gap: 2px; font-size: 12px; color: var(--apagado); white-space: nowrap; }
.linea-marca b { font: 400 9px var(--f-etiqueta); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-2); }
.linea-marca.hoy { left: 0; top: 16px; }
.linea-marca.onda { right: 0; top: 16px; justify-items: end; }
.linea-marca.limite { bottom: 16px; translate: -50% 0; justify-items: center; }
.linea-marca.limite b { color: var(--nube); }
.linea-marca.limite::after { content: ""; position: absolute; left: 50%; top: calc(100% + 3px); width: 12px; height: 12px; translate: -50% 0; border-radius: 50%; background: var(--negro-2); border: 2px solid var(--nube); }

.opciones h2 { font-size: clamp(22px, 3vw, 28px); margin: 44px 0 16px; }
.opcion { margin-bottom: 12px; border: 1px solid var(--linea); border-radius: 22px; background: var(--negro-2); transition: border-color .3s; }
.opcion[open] { border-color: color-mix(in srgb, var(--acento-2) 55%, transparent); }
.opcion summary { position: relative; display: grid; gap: 4px; min-height: 64px; padding: 18px 56px 18px 22px; list-style: none; cursor: pointer; }
.opcion summary::-webkit-details-marker { display: none; }
.opcion summary::after { content: "+"; position: absolute; right: 22px; top: 50%; translate: 0 -50%; font-size: 26px; font-weight: 300; color: var(--apagado); transition: rotate .3s; }
.opcion[open] summary::after { rotate: 45deg; }
.opcion-titulo { font: 500 18px var(--f-titulo); }
.opcion-sub { font-size: 14px; color: var(--apagado); }
.opcion-suave .opcion-titulo { font-weight: 400; color: var(--tinta-2); }
.opcion-cuerpo { padding: 0 22px 22px; }
.formulario.opcion-cuerpo { margin-top: 0; }
.formulario .onda-opcion span { font-size: 16px; color: var(--tinta); }
.opcion-cuerpo.abierta { padding: 22px; border: 1px solid var(--linea); border-radius: 22px; background: var(--negro-2); }
.opcion-cuerpo p { color: var(--tinta-2); font-size: 15px; }
.ondas-lista { display: grid; gap: 8px; border: 0; }
.ondas-lista legend { margin-bottom: 8px; font-size: 13px; color: var(--apagado); }
.formulario .onda-opcion { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 12px 16px; border: 1px solid var(--linea); border-radius: 16px; cursor: pointer; transition: border-color .3s, background-color .3s; }
.onda-opcion:has(input:checked) { border-color: var(--acento-2); background: color-mix(in srgb, var(--acento-2) 8%, transparent); }
.onda-opcion input { flex: none; width: 20px; height: 20px; accent-color: var(--acento-2); }
.onda-opcion span { display: grid; }
.onda-opcion small { font-size: 13px; color: var(--apagado); }
.billete.hecho h2 { font-size: clamp(26px, 4vw, 38px); margin: 6px 0 12px; }
.billete.hecho p { color: var(--tinta-2); }
.billete.hecho .etiqueta { margin-bottom: 4px; }
.billete.hecho .btn { margin-top: 20px; }
.codigo-grande { margin: 22px 0 4px; padding: 16px 18px; border: 1px dashed var(--linea-fuerte); border-radius: 16px; text-align: center; font-size: clamp(22px, 5vw, 32px); color: var(--tinta) !important; user-select: all; }

/* ══ Luces ═══════════════════════════════════════════════════════════════
   Tres efectos, genéricos (no enseñan la luz de ninguna estación):
   · haces de escenario que barren la portada al cargar y en las estaciones
     toman el color de la estación visible;
   · todo lo que brilla late con el bombo cuando suena la música (--latido);
   · el apagón al terminar el manifiesto.
   Nada parpadea más de 3 veces por segundo, y con «reducir movimiento» las
   luces se quedan quietas. */
.haces { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; opacity: calc(.55 + var(--latido, 0) * .45); }
.haces i {
  position: absolute; top: -8vh; left: var(--x); width: 64vh; height: 135vh; translate: -50% 0; transform-origin: 50% 0; rotate: var(--r);
  background: conic-gradient(from 168deg at 50% 0, transparent 0deg, var(--haz) 12deg, transparent 24deg);
  -webkit-mask-image: linear-gradient(#000 10%, rgba(0, 0, 0, .5) 45%, transparent 92%);
  mask-image: linear-gradient(#000 10%, rgba(0, 0, 0, .5) 45%, transparent 92%);
}
.haces i:nth-child(1) { --haz: color-mix(in srgb, var(--acento) 34%, transparent); }
.haces i:nth-child(2) { --haz: rgba(255, 255, 255, .09); }
.haces i:nth-child(3) { --haz: color-mix(in srgb, var(--acento-2) 30%, transparent); }
/* En las estaciones, luz de escenario de verdad: foco en el techo, núcleo
   brillante y cono ancho del color de la estación, sumados como luz (screen). */
.haces-estaciones {
  mix-blend-mode: screen; opacity: calc(.82 + var(--latido, 0) * .18);
  /* El lienzo baja 70 px más que su bloque y la máscara va anclada en
     PÍXELES desde abajo, no en porcentajes: con porcentajes, el punto donde
     muere la luz bailaba con la altura de la sección y en el iPhone los
     puntos de desplazamiento caían del lado apagado (Javi, 20/09/2026).
     Así la luz sigue viva a la altura de los puntos y muere ~70 px más
     abajo, con el colchón negro de la sección aún por delante. */
  inset: 0 0 -70px;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 300px), rgba(0, 0, 0, .4) calc(100% - 90px), transparent 100%); mask-image: linear-gradient(180deg, #000 calc(100% - 300px), rgba(0, 0, 0, .4) calc(100% - 90px), transparent 100%);
}
.haces-estaciones i {
  top: -3vh; width: 86vh; height: 142vh;
  background:
    radial-gradient(ellipse 7vh 4vh at 50% 0, var(--foco), transparent 72%),
    conic-gradient(from 175.5deg at 50% 0, transparent 0deg, var(--nucleo) 4.5deg, transparent 9deg),
    conic-gradient(from 164deg at 50% 0, transparent 0deg, var(--haz) 16deg, transparent 32deg);
  -webkit-mask-image: linear-gradient(#000 0%, rgba(0, 0, 0, .82) 38%, transparent 97%);
  mask-image: linear-gradient(#000 0%, rgba(0, 0, 0, .82) 38%, transparent 97%);
}
.haces-estaciones i:nth-child(1) { --haz: color-mix(in srgb, var(--acento) 46%, transparent); --nucleo: color-mix(in srgb, color-mix(in srgb, var(--acento) 60%, #fff) 50%, transparent); --foco: color-mix(in srgb, var(--acento) 55%, #fff); }
.haces-estaciones i:nth-child(2) { --haz: rgba(255, 255, 255, .11); --nucleo: rgba(255, 255, 255, .3); --foco: rgba(255, 255, 255, .85); }
.haces-estaciones i:nth-child(3) { --haz: color-mix(in srgb, var(--acento-2) 44%, transparent); --nucleo: color-mix(in srgb, color-mix(in srgb, var(--acento-2) 60%, #fff) 50%, transparent); --foco: color-mix(in srgb, var(--acento-2) 55%, #fff); }
@media (prefers-reduced-motion: no-preference) {
  .haces-portada i { animation: haz-entra 2.6s cubic-bezier(.2, .8, .2, 1) var(--d) both, haz-mece var(--m) ease-in-out calc(var(--d) + 2.6s) infinite alternate; }
  /* Un poco más vivos que los de la portada: al mismo ritmo había que
     fijarse para notarlos (Javi, 20/09/2026). */
  .haces-estaciones i { animation: haz-mece calc(var(--m) * .65) ease-in-out infinite alternate; }
}
@keyframes haz-entra { from { rotate: calc(var(--r) - 62deg); opacity: 0; } 35% { opacity: 1; } }
@keyframes haz-mece { from { rotate: var(--r); } to { rotate: calc(var(--r) + 11deg); } }

/* El logo se enciende: un barrido de luz pasa por las letras al cargar
   (y cada vez que se activa el sonido). */
.hero-marca-brillo {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, color-mix(in srgb, var(--acento-2) 55%, #fff) 50%, transparent 62%) 120% 0 / 300% 100% no-repeat;
  /* El mismo logotipo en WebP (16 KB, no 61): así la portada no descarga
     también el PNG, que queda solo de respaldo del <img>. */
  -webkit-mask: url(/assets/img/synergyk-wordmark.webp) center / 100% 100% no-repeat;
  mask: url(/assets/img/synergyk-wordmark.webp) center / 100% 100% no-repeat;
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-marca-brillo { animation: marca-barrido 2.4s cubic-bezier(.45, 0, .2, 1) .9s both; }
  .hero-marca-caja.otra-vez .hero-marca-brillo { animation: marca-barrido-2 2.4s cubic-bezier(.45, 0, .2, 1) both; }
}
@keyframes marca-barrido { 0% { background-position: 120% 0; opacity: 1; } 100% { background-position: -20% 0; opacity: 1; } }
@keyframes marca-barrido-2 { 0% { background-position: 120% 0; opacity: 1; } 100% { background-position: -20% 0; opacity: 1; } }

/* Durante el teatro del apagón, el scroll se capa fijando el body: es lo
   único que mata en seco la inercia del dedo en iOS (ver frenarScroll).
   touch-action: none avisa además al compositor de que un gesto hecho
   durante el teatro no es scroll: sin ello, iOS lo guardaba y soltaba la
   página deslizándose al levantar el freno. */
body.sin-scroll { position: fixed; left: 0; right: 0; overflow: hidden; touch-action: none; }
/* El apagón: la sala se apaga DEL TODO y solo queda encendida la frase.
   Los tres números de aquí son el efecto entero (Javi, 20/09/2026):
   · el telón es negro OPACO, no al 90 %: con un 10 % de transparencia se
     seguía leyendo «Entender no basta» detrás y el teatro no existía;
   · el resto del párrafo se va a 0, no a .06: en la pantalla del iPhone ese
     fantasma se leía entero y parecía que solo estaba «sombreado»;
   · y se apaga en MEDIO SEGUNDO. Antes tardaba 1,4 s y «tu interior.» se
     quedaba solo a los 1,5 s: la frase entera encendida duraba una décima,
     así que esa fase no llegaba a verse nunca. */
.apagon { position: fixed; inset: 0; z-index: 61; background: #000; opacity: 0; pointer-events: none; transition: opacity .9s ease; }
body.apagada .apagon { opacity: 1; transition-duration: .8s; }
.manifiesto-texto { position: relative; }
body.apagada .manifiesto-texto { z-index: 62; }
body.apagada .manifiesto-texto .p:not(.frase) { opacity: 0; transition-duration: .5s; }
body.apagada .manifiesto-texto .p.frase:not(.fin) { opacity: 1; text-shadow: 0 0 22px rgba(255, 255, 255, .25); }
/* Y «Hay fiesta, sí, pero en» se funde a negro del todo para dejar sola a
   «tu interior.», en 0,7 s: con los 1,6 s de antes se comía su fase. */
body.apagada.solo-fin .manifiesto-texto .p.frase:not(.fin) { opacity: 0; text-shadow: none; transition: opacity .7s ease, text-shadow .7s ease; }
/* Si la lectura llega con la inercia del dedo, las últimas palabras pueden
   estar aún a medio encender cuando arranca el apagón, y su transición
   normal (1,6 s con el bloque sellado) se comería el teatro: bajo el
   apagón, la frase se enciende en medio segundo. El fundido de bajada del
   solo-fin no cambia: su regla lleva transición propia y gana. */
body.apagada .manifiesto-texto .p.frase { transition-duration: .5s; }
.manifiesto-texto .p.fin { transition: opacity .5s, color .5s, text-shadow 1.6s; }
/* La onda de despedida del teatro: bajo «tu interior.», una vez, con
   fundido (v4.5). Vive dentro del texto del manifiesto y sube con la
   página; z-index 63 para verse sobre el telón mientras aún está puesto. */
/* La onda va SIEMPRE de borde a borde de la pantalla (Javi, 20/09/2026):
   sale por un lado y se pierde por el otro, nunca encajonada en el ancho del
   texto. Vive dentro del párrafo (sube con la página), así que el JS le pone
   el «left» que la saca del margen y el ancho exacto de la ventana; esto es
   el respaldo por si el JS no llega a medir. En el teléfono y en el
   escritorio, lo que sobresale lo recorta el «overflow-x: clip» del html:
   nunca aparece scroll lateral. */
/* OJO con el «max-width: none»: la regla global «img, svg, canvas
   { max-width: 100% }» encajonaba este lienzo en el ancho del párrafo y la
   onda salía metida en una caja en medio (Javi, 20/09/2026). */
.onda-fin { position: absolute; left: 0; width: 100vw; max-width: none; height: clamp(200px, 15vw, 280px); z-index: 63; pointer-events: none; }
/* Sellado: después del apagón, solo «tu interior.» sigue encendido. */
.manifiesto-texto.sellado .p:not(.fin) { opacity: .1; transition: opacity 1.6s ease; }
.manifiesto-texto.sellado .p.fin { text-shadow: 0 0 24px color-mix(in srgb, var(--acento-2) 45%, transparent); }
/* Leído: al volver, todo el bloque se enciende con un fundido. */
.manifiesto-texto.leido .p { transition: opacity 1.4s ease, color 1.4s ease; }
body.apagada .manifiesto-texto .p.fin { text-shadow: 0 0 28px color-mix(in srgb, var(--acento-2) 70%, transparent), 0 0 70px color-mix(in srgb, var(--acento-2) 35%, transparent); }

/* ══ La tarjeta misterio (Aroma) ══════════════════════════════════════ */
.misterio { position: relative; overflow: hidden; }
.misterio-texto { font: 500 15px/1.35 var(--f-titulo); color: var(--tinta); }
.misterio-velo { display: none; }
.js .misterio .misterio-nombre { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.js .misterio .misterio-velo { display: block; position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; cursor: crosshair; }
.misterio-rotulo { position: absolute; left: 22px; right: 22px; bottom: 22px; display: grid; gap: 6px; pointer-events: none; transition: opacity .7s; }
.misterio-rotulo b { font: 500 17px var(--f-titulo); color: var(--tinta); }
.misterio-rotulo small { font: 400 9px var(--f-etiqueta); letter-spacing: .16em; text-transform: uppercase; color: var(--apagado); }
.misterio.abierta .misterio-rotulo { opacity: 0; }
.misterio-anillo {
  position: absolute; left: 0; top: 0; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; pointer-events: none;
  border: 1.5px solid rgba(236, 232, 255, .6); box-shadow: 0 0 18px rgba(200, 190, 255, .28), inset 0 0 12px rgba(255, 255, 255, .14);
  opacity: 0; transition: opacity .25s; will-change: transform;
}
.misterio-anillo.visible { opacity: 1; }

/* ══ La pausa: viaja sin moverte ══════════════════════════════════════ */
.pausa {
  --recuerdo: #9cc48e;
  position: relative; overflow: hidden; display: grid; align-items: center; min-height: min(100svh, 980px);
  padding: clamp(80px, 12vw, 140px) 0; text-align: center;
  background: linear-gradient(180deg, #030304 0%, #030304 88%, var(--negro) 100%);
}
.pausa-escena { position: absolute; inset: 0; pointer-events: none; }
.pausa-orbe { position: absolute; left: 50%; top: 50%; width: min(92vmin, 820px); aspect-ratio: 1; translate: -50% -50%; scale: .82; transition: scale 1.2s cubic-bezier(.2, .8, .2, 1); }
.pausa-orbe i, .pausa-orbe b { position: absolute; inset: 0; border-radius: 50%; }
.pausa-orbe i:nth-child(1) { background: radial-gradient(circle, color-mix(in srgb, var(--recuerdo) 42%, transparent), transparent 62%); filter: blur(24px); opacity: calc(.75 + var(--latido, 0) * .35); }
.pausa-orbe i:nth-child(2) { inset: 18%; background: radial-gradient(circle at 42% 38%, color-mix(in srgb, var(--recuerdo) 55%, #fff 10%), color-mix(in srgb, var(--recuerdo) 18%, transparent) 55%, transparent 72%); filter: blur(10px); }
.pausa-orbe i:nth-child(3) { inset: 6%; background: conic-gradient(from 0deg, transparent, color-mix(in srgb, var(--recuerdo) 22%, transparent), transparent 40%, color-mix(in srgb, var(--acento-2) 16%, transparent), transparent 75%); filter: blur(30px); }
.pausa-orbe b { inset: 24%; border: 1px solid color-mix(in srgb, var(--recuerdo) 45%, transparent); opacity: .7; }
.pausa.dentro .pausa-orbe { scale: 1; }
@media (prefers-reduced-motion: no-preference) {
  .pausa-orbe i:nth-child(3) { animation: gira 38s linear infinite; }
  .pausa.dentro:not(.respirando) .pausa-orbe { animation: respira-lento 10s ease-in-out infinite; }
  .pausa-orbe b { animation: anillo 10s ease-out infinite; }
  .pausa-motas i { animation: mota var(--t) ease-in-out var(--d) infinite; }
}
@keyframes gira { to { rotate: 360deg; } }
@keyframes respira-lento { 0%, 100% { scale: 1; } 40% { scale: 1.06; } }
@keyframes anillo { 0% { scale: .9; opacity: 0; } 30% { opacity: .7; } 100% { scale: 1.9; opacity: 0; } }
.pausa-motas i { position: absolute; left: var(--x); top: var(--y); width: var(--s, 3px); height: var(--s, 3px); border-radius: 50%; background: color-mix(in srgb, var(--recuerdo) 70%, #fff); box-shadow: 0 0 10px var(--recuerdo); opacity: var(--o, .5); }
@keyframes mota { 0%, 100% { translate: 0 0; opacity: .15; } 50% { translate: 18px -60px; opacity: .8; } }

/* Respirando: la luz crece al inhalar (4 s) y se recoge al soltar (6 s). */
.pausa.respirando .pausa-orbe { animation: none; }
.pausa.inhala .pausa-orbe { scale: 1.32; transition: scale 4s cubic-bezier(.37, 0, .63, 1); }
.pausa.suelta .pausa-orbe { scale: .78; transition: scale 6s cubic-bezier(.37, 0, .63, 1); }
.pausa.respirando .pausa-orbe b { animation: none; opacity: 0; }

/* Contenido: poco texto y mucho aire. El recuerdo manda; lo demás susurra. */
.pausa-contenido { position: relative; z-index: 1; display: grid; justify-items: center; max-width: 880px; }
.pausa h2 { font-size: clamp(36px, 6vw, 72px); font-weight: 200; letter-spacing: -.025em; transition: opacity 1.2s; }
.pausa .etiqueta { transition: opacity 1.2s; }
.pausa-centro { display: grid; justify-items: center; align-content: center; gap: 14px; min-height: clamp(200px, 30svh, 280px); margin-top: clamp(28px, 6svh, 64px); }
.pausa-silueta { width: 50px; height: 50px; margin-bottom: 4px; fill: none; stroke: var(--recuerdo); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--recuerdo) 60%, transparent)); transition: stroke .8s, opacity 1.4s .3s; }
.pausa-silueta path { stroke-dasharray: 1; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) { .pausa-silueta.dibuja path { animation: silueta 2.4s cubic-bezier(.45, 0, .2, 1) both; } }
@keyframes silueta { from { stroke-dashoffset: 1; } }
.js .pausa:not(.dentro) .pausa-silueta, .pausa.cambiando .pausa-silueta { opacity: 0; transition-delay: 0s; }
.pausa.inhala .pausa-motas i { animation-play-state: paused; }
.pausa-invita { font: 400 11px var(--f-etiqueta); letter-spacing: .26em; text-transform: uppercase; color: var(--tinta-2); text-shadow: 0 0 14px rgba(0, 0, 0, .7); }
.pausa-recuerdo {
  max-width: 17em; font: 300 clamp(26px, 4.4vw, 50px)/1.16 var(--f-titulo); letter-spacing: -.015em; text-wrap: balance;
  background: linear-gradient(100deg, #fff 10%, color-mix(in srgb, var(--recuerdo) 80%, #fff) 55%, var(--recuerdo));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 28px color-mix(in srgb, var(--recuerdo) 32%, transparent));
}
.pausa-susurro { min-height: 1.5em; max-width: 30em; font-size: clamp(15px, 1.6vw, 17px); font-style: italic; color: var(--tinta-2); opacity: 0; transition: opacity 1.4s; }
.pausa-susurro.visible { opacity: 1; }
.pausa :is(.pausa-invita, .pausa-recuerdo) { transition: opacity 1.4s .3s, filter 1.4s .3s, translate 1.4s .3s; }
.js .pausa:not(.dentro) :is(.pausa-invita, .pausa-recuerdo) { opacity: 0; filter: blur(12px); translate: 0 16px; }
.pausa.cambiando :is(.pausa-invita, .pausa-recuerdo) { opacity: 0; filter: blur(10px); transition-duration: .5s; transition-delay: 0s; }

.pausa-guia { display: grid; gap: 14px; justify-items: center; }
.pausa-guia span { font: 200 clamp(30px, 5vw, 54px) var(--f-titulo); letter-spacing: -.01em; }
.pausa-puntos { display: flex; gap: 10px; }
.pausa-salir { margin-top: 10px; font: 400 9px var(--f-etiqueta); letter-spacing: .2em; text-transform: uppercase; color: var(--apagado); opacity: .8; }
.pausa.respirando { cursor: pointer; }
.pausa-puntos b { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .22); transition: background .8s, box-shadow .8s; }
.pausa-puntos b.hecho { background: var(--recuerdo); box-shadow: 0 0 10px var(--recuerdo); }
.pausa-final { max-width: 26em; color: var(--tinta-2); font-size: clamp(16px, 1.7vw, 18px); line-height: 1.55; }

.pausa-botones { display: grid; justify-items: center; gap: 6px; margin-top: clamp(30px, 5svh, 56px); transition: opacity .8s; }
.pausa-otra {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border: 0; border-radius: 999px;
  background: none; color: var(--tinta-2); font: 500 14px var(--f-texto); letter-spacing: .01em; cursor: pointer; transition: color .3s, background .3s;
}
.pausa-otra svg { width: 17px; height: 17px; transition: rotate .6s cubic-bezier(.2, .8, .2, 1); }
.pausa-otra:hover { color: var(--tinta); background: rgba(255, 255, 255, .05); }
.pausa-otra:hover svg { rotate: 90deg; }
.pausa-sonido {
  position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 30;
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--linea-fuerte);
  background: rgba(5, 5, 5, .45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--tinta); cursor: pointer;
}
.pausa-sonido svg { width: 22px; height: 22px; }
.pausa-sonido[aria-pressed="true"] .tachado, .pausa-sonido[aria-pressed="false"] .ondas { display: none; }

/* Respirando: queda la luz, la palabra que guía y, a veces, un susurro. */
.pausa.respirando :is(h2, .etiqueta) { opacity: .18; }
.pausa.respirando .pausa-invita { opacity: 0; }
.pausa.respirando .pausa-recuerdo { opacity: .45; transition: opacity 1.5s; }
.pausa.respirando .pausa-botones { opacity: 0; pointer-events: none; }

/* QR de la entrada */
.billete-qr { display: grid; justify-items: center; gap: 10px; margin: 22px 0 6px; text-align: center; }
.billete-qr img { width: min(260px, 72vw); height: auto; padding: 12px; border-radius: 20px; background: #fff; image-rendering: pixelated; }
.billete-qr p { font-size: 14px; color: var(--tinta-2); }
.puerta-billete.dentro { border-color: #5fd3a8; }
.puerta-billete.fuera { border-color: var(--tierra); }
.puerta-billete.mal { border-color: #ff8f8f; }
.puerta-acciones { justify-content: flex-start; margin-top: 18px; }

/* ══ Para casa: banda sonora y Ambiente ══════════════════════════════ */
.casa { padding: clamp(70px, 10vw, 120px) 0; }
.casa h2 { max-width: 14em; font-size: clamp(30px, 4.4vw, 56px); }
.casa-rejilla { display: grid; gap: 12px; margin-top: 36px; }
@media (min-width: 768px) { .casa-rejilla { grid-template-columns: 1fr 1fr; } }
.casa-tarjeta {
  display: grid; align-content: start; gap: 8px; padding: 0 0 22px; border-radius: var(--radio); border: 1px solid var(--linea); overflow: hidden;
  background: var(--negro-2); color: var(--tinta); text-align: left; text-decoration: none; font: inherit; cursor: pointer; transition: border-color .4s, transform .4s cubic-bezier(.2, .8, .2, 1);
}
.casa-tarjeta:hover { border-color: var(--linea-fuerte); transform: translateY(-2px); }
.casa-tarjeta > :not(.casa-vista) { margin: 0 22px; }
.casa-tarjeta strong { margin-top: 14px; font: 500 20px var(--f-titulo); }
.casa-tarjeta > span:not(.casa-vista) { color: var(--tinta-2); font-size: 15px; line-height: 1.5; }
.casa-tarjeta em { margin-top: 6px; font: 400 10px var(--f-etiqueta); font-style: normal; letter-spacing: .16em; text-transform: uppercase; color: var(--acento-2); }
.casa-vista { position: relative; display: block; height: 150px; overflow: hidden; }
/* Banda sonora: barras que respiran. */
.casa-vista-sonido { display: flex; align-items: center; justify-content: center; gap: 8px; background: radial-gradient(60% 90% at 50% 100%, rgba(147, 220, 213, .14), transparent 70%); }
.casa-vista-sonido i { width: 4px; height: 30%; border-radius: 3px; background: linear-gradient(#93dcd5, #3b7ea1); opacity: .8; }
.casa-vista-sonido i:nth-child(2n) { background: linear-gradient(#e5c47b, #8e5db5); }
@media (prefers-reduced-motion: no-preference) {
  .casa-vista-sonido i { animation: casa-barra 2.4s ease-in-out infinite alternate; }
  .casa-vista-sonido i:nth-child(1) { animation-delay: -.3s; } .casa-vista-sonido i:nth-child(2) { animation-delay: -1.1s; }
  .casa-vista-sonido i:nth-child(3) { animation-delay: -.7s; } .casa-vista-sonido i:nth-child(4) { animation-delay: -1.6s; }
  .casa-vista-sonido i:nth-child(5) { animation-delay: -.2s; } .casa-vista-sonido i:nth-child(6) { animation-delay: -1.3s; }
  .casa-vista-sonido i:nth-child(7) { animation-delay: -.9s; }
}
@keyframes casa-barra { to { height: 72%; } }
/* Ambiente: la luz de las ondas, en pequeño. */
.casa-vista-luz { background: #050505; }
.casa-vista-luz::before, .casa-vista-luz::after { content: ''; position: absolute; inset: -40%; filter: blur(28px); }
.casa-vista-luz::before { background: radial-gradient(40% 50% at 30% 40%, #3b7ea1, transparent 70%), radial-gradient(35% 45% at 70% 60%, #8e5db5, transparent 70%), radial-gradient(30% 40% at 55% 30%, #93dcd5, transparent 70%); opacity: .8; }
.casa-vista-luz::after { background: radial-gradient(30% 40% at 40% 70%, #e5c47b, transparent 70%); opacity: .45; mix-blend-mode: screen; }
@media (prefers-reduced-motion: no-preference) {
  .casa-vista-luz::before { animation: casa-luz 14s ease-in-out infinite alternate; }
  .casa-vista-luz::after { animation: casa-luz 10s ease-in-out -4s infinite alternate-reverse; }
}
@keyframes casa-luz { from { transform: translate(-6%, -4%) rotate(0deg) scale(1); } to { transform: translate(6%, 5%) rotate(25deg) scale(1.15); } }

/* ══ El ciclo: al terminar las estaciones, sus símbolos saltan uno tras otro ══ */
.ciclo { padding: clamp(40px, 8vh, 90px) 0 clamp(90px, 14vh, 150px); }
.ciclo-camino { position: relative; max-width: 620px; margin: 0 auto; padding: 0 var(--margen); }
.ciclo-linea { position: absolute; left: 50%; top: 70px; bottom: 140px; width: 1px; translate: -50% 0; background: rgba(255, 255, 255, .06); }
.ciclo-linea i { display: block; height: calc(var(--progreso, 0) * 100%); background: linear-gradient(#93dcd5, #3b7ea1 25%, #e5c47b 50%, #8e5db5 75%, #6b4c8a); box-shadow: 0 0 12px rgba(147, 220, 213, .35); }
.ciclo-lista { list-style: none; display: grid; gap: clamp(80px, 15svh, 160px); }
.ciclo-paso { display: grid; justify-items: center; gap: 16px; }
.ciclo-icono {
  position: relative; width: clamp(124px, 15vw, 164px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, var(--negro) 58%, transparent 72%);
  opacity: 0; transform: translateY(46px) scale(.5); filter: blur(10px) drop-shadow(0 0 0 transparent);
  transition: opacity .7s ease, transform 1.05s cubic-bezier(.18, 1.55, .35, 1), filter .9s ease;
}
.ciclo-icono svg { width: 100%; height: 100%; overflow: visible; }
.ciclo-icono svg :is(circle, path) { stroke-dasharray: 320; stroke-dashoffset: 320; transition: stroke-dashoffset 1.8s cubic-bezier(.45, 0, .2, 1) .15s; }
.ciclo-icono::after { content: ''; position: absolute; inset: 8%; border-radius: 50%; border: 1px solid var(--c); opacity: 0; pointer-events: none; }
.ciclo-paso.visto .ciclo-icono { opacity: 1; transform: none; filter: blur(0) drop-shadow(0 0 16px color-mix(in srgb, var(--c) 55%, transparent)); }
.ciclo-paso.visto .ciclo-icono svg :is(circle, path) { stroke-dashoffset: 0; }
.ciclo-paso.visto .ciclo-icono::after { animation: ciclo-pulso 1.8s ease-out .12s; }
@keyframes ciclo-pulso { 0% { opacity: .9; transform: scale(.55); } 100% { opacity: 0; transform: scale(1.9); } }
.ciclo-nombre { font: 400 11px var(--f-etiqueta); letter-spacing: .26em; text-transform: uppercase; color: var(--c); filter: brightness(1.3); opacity: 0; transform: translateY(10px); transition: opacity .8s ease .35s, transform .8s ease .35s; }
.ciclo-paso.visto .ciclo-nombre { opacity: 1; transform: none; }
.ciclo-cierre { margin-top: clamp(60px, 10svh, 110px); text-align: center; font: 300 clamp(22px, 3vw, 34px)/1.3 var(--f-titulo); color: var(--tinta-2); }
.ciclo-cierre span { display: block; color: var(--tinta); }
@media (prefers-reduced-motion: reduce) {
  .ciclo-icono, .ciclo-nombre, .ciclo-icono svg :is(circle, path) { opacity: 1; transform: none; filter: none; stroke-dashoffset: 0; transition: none; }
}

/* ══ Ambiente SYNERGYK dentro de la web ══ */
.ambiente-capa { position: fixed; inset: 0; z-index: 300; background: #000; opacity: 0; transition: opacity .45s ease; }
.ambiente-capa.abierta { opacity: 1; }
.ambiente-capa iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ══ Para casa: el mosaico (v5.8) ══════════════════════════════════════
   Javi (21/09/2026): en vez de una sábana con cada familia una detrás de
   otra, tarjetas pequeñas; cada una abre su familia debajo, una a la vez
   (iniciarCasa en sk.js). Cada tarjeta lleva el color de su familia en --c.
   La banda sonora se ensancha sola para que las filas cuadren con las
   familias que haya publicadas (sk.js le pone el grid-column). */
.casa-mosaico { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 30px; }
@media (min-width: 640px) { .casa-mosaico { grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 38px; } }
.casa-fam {
  --c: var(--acento-2);
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  min-height: 176px; padding: 16px 16px 14px;
  border-radius: 22px; border: 1px solid var(--linea);
  background:
    radial-gradient(120% 85% at 100% 0%, color-mix(in srgb, var(--c) 15%, transparent), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012));
  color: var(--tinta); font: inherit; text-align: left; text-decoration: none; cursor: pointer;
  transition: border-color .3s ease, box-shadow .3s ease, translate .3s ease, scale .2s ease;
  -webkit-tap-highlight-color: transparent;
}
/* La aparición al hacer scroll (.aparece) usa transform y su propia
   transición: el levantamiento va con translate/scale, que no chocan, y la
   transición se suma aquí con más prioridad que la de .aparece. */
.js .casa-fam.aparece { transition: opacity .9s, transform .9s cubic-bezier(.2, .8, .2, 1), border-color .3s ease, box-shadow .3s ease, translate .3s ease, scale .2s ease; }
@media (hover: hover) { .casa-fam:hover { border-color: color-mix(in srgb, var(--c) 45%, var(--linea)); translate: 0 -2px; } }
.casa-fam:active { scale: .985; }
.casa-fam:focus-visible { outline: 2px solid var(--c); outline-offset: 3px; }
.casa-fam-orbe {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin-bottom: 10px; border-radius: 50%;
  color: var(--c); background: color-mix(in srgb, var(--c) 11%, #09090c);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 32%, transparent), 0 0 28px -8px color-mix(in srgb, var(--c) 75%, transparent);
}
.casa-fam-orbe svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.casa-fam strong { font: 500 16px/1.2 var(--f-titulo); letter-spacing: -.01em; }
.casa-fam-lema { font-size: 13.5px; line-height: 1.45; color: var(--tinta-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.casa-fam-pie { width: 100%; margin-top: auto; padding-top: 12px; display: flex; align-items: center; gap: 8px; }
.casa-fam-meta, .casa-fam-suena { flex: 1; font: 400 9.5px/1.3 var(--f-etiqueta); letter-spacing: .14em; text-transform: uppercase; color: var(--apagado); }
.casa-fam-suena { display: none; color: var(--c); }
.casa-fam-ir {
  display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--linea); color: var(--tinta-2);
  transition: transform .35s cubic-bezier(.2, .7, .2, 1), border-color .3s, color .3s;
}
.casa-fam-ir svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Abierta: la tarjeta se enciende en su color y la flecha se da la vuelta. */
.casa-fam[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--c) 60%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent), 0 20px 44px -26px color-mix(in srgb, var(--c) 70%, transparent);
}
.casa-fam[aria-expanded="true"] .casa-fam-ir { transform: rotate(180deg); color: var(--c); border-color: color-mix(in srgb, var(--c) 50%, transparent); }
/* Sonando: su familia está sonando aunque su bloque esté cerrado. */
.casa-fam-eq { display: none; align-items: flex-end; gap: 2px; height: 14px; flex: none; }
.casa-fam-eq i { width: 3px; height: 40%; border-radius: 2px; background: var(--c); }
.casa-fam.sonando .casa-fam-meta { display: none; }
.casa-fam.sonando .casa-fam-suena { display: block; }
.casa-fam.sonando .casa-fam-eq { display: inline-flex; }
.casa-fam.sonando .casa-fam-orbe { box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent), 0 0 34px -4px color-mix(in srgb, var(--c) 85%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  .casa-fam.sonando .casa-fam-eq i { animation: casa-eq .8s ease-in-out infinite alternate; }
  .casa-fam.sonando .casa-fam-eq i:nth-child(2) { animation-delay: -.5s; }
  .casa-fam.sonando .casa-fam-eq i:nth-child(3) { animation-delay: -.25s; }
}
@keyframes casa-eq { to { height: 100%; } }

/* La banda sonora: el orbe lleva las cinco estaciones y las barras vivas. */
.orbe-bin { position: relative; background: conic-gradient(from 200deg, #93dcd5, #3b7ea1, #6b4c8a, #8e5db5, #e5c47b, #93dcd5); box-shadow: 0 0 30px -8px rgba(147, 220, 213, .7); }
.orbe-bin::before { content: ''; position: absolute; inset: 1.5px; border-radius: 50%; background: #0a0a0d; }
.orbe-bin > span { position: relative; display: flex; align-items: center; gap: 2.5px; height: 18px; }
.orbe-bin i { width: 2.5px; height: 35%; border-radius: 2px; background: linear-gradient(#93dcd5, #3b7ea1); }
.orbe-bin i:nth-child(2n) { background: linear-gradient(#e5c47b, #8e5db5); }
/* Cuando se ensancha, una onda de barras al fondo, a la derecha. */
.bin-onda { display: none; }
.casa-fam.ancha .bin-onda {
  position: absolute; z-index: -1; right: 20px; top: 18px; bottom: 18px; width: 34%;
  display: flex; align-items: center; justify-content: flex-end; gap: 5px; opacity: .55;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 55%); mask-image: linear-gradient(90deg, transparent, #000 55%);
}
.bin-onda i { width: 3px; height: 30%; border-radius: 3px; background: linear-gradient(#93dcd5, #3b7ea1); }
.bin-onda i:nth-child(3n) { background: linear-gradient(#e5c47b, #8e5db5); }
.casa-fam.ancha strong, .casa-fam.ancha .casa-fam-lema { max-width: 64%; }
@media (prefers-reduced-motion: no-preference) {
  .orbe-bin i, .bin-onda i { animation: casa-barra 2.4s ease-in-out infinite alternate; }
  .orbe-bin i:nth-child(2), .bin-onda i:nth-child(4n+2) { animation-delay: -1.1s; }
  .orbe-bin i:nth-child(3), .bin-onda i:nth-child(4n+3) { animation-delay: -.6s; }
  .orbe-bin i:nth-child(4), .bin-onda i:nth-child(4n) { animation-delay: -1.7s; }
  .orbe-bin i:nth-child(5), .bin-onda i:nth-child(5n) { animation-delay: -.3s; }
}

/* El Ambiente: una franja a todo lo ancho, con la luz viva de fondo. */
.casa-fam-ambiente { grid-column: 1 / -1; min-height: 0; flex-direction: row; align-items: center; gap: 14px; padding: 14px 16px; }
.casa-fam-ambiente .casa-fam-orbe { margin: 0; }
.casa-fam-texto { flex: 1; min-width: 0; display: grid; gap: 3px; }
.casa-fam-luz { position: absolute; z-index: -1; inset: 0 0 0 40%; opacity: .5; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%); mask-image: linear-gradient(90deg, transparent, #000 60%); }
.casa-fam-luz::before { content: ''; position: absolute; inset: -40%; filter: blur(26px);
  background: radial-gradient(40% 50% at 30% 40%, #3b7ea1, transparent 70%), radial-gradient(35% 45% at 70% 60%, #8e5db5, transparent 70%), radial-gradient(30% 40% at 55% 30%, #93dcd5, transparent 70%), radial-gradient(30% 40% at 40% 70%, #e5c47b, transparent 70%); }
@media (prefers-reduced-motion: no-preference) { .casa-fam-luz::before { animation: casa-luz 14s ease-in-out infinite alternate; } }

/* Los bloques de cada familia, como paneles: solo el abierto se ve (con JS;
   sin JS se verían todos, como antes). */
#casa .casa-panel { margin-top: clamp(30px, 4vw, 46px); scroll-margin-top: calc(var(--nav-h) + 18px); }
.casa-mosaico { scroll-margin-top: calc(var(--nav-h) + 18px); }
.casa-volver {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; margin-bottom: 18px; padding: 8px 16px 8px 12px;
  border-radius: 999px; border: 1px solid var(--linea); background: none; color: var(--tinta-2); cursor: pointer;
  font: 400 10px var(--f-etiqueta); letter-spacing: .14em; text-transform: uppercase;
  transition: color .25s, border-color .25s;
}
.casa-volver svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .casa-volver:hover { color: var(--tinta); border-color: var(--linea-fuerte); } }
#casa.mosaico-vivo .casa-panel:not(.abierto) { display: none; }
@media (prefers-reduced-motion: no-preference) { #casa .casa-panel.abierto { animation: casa-abre .45s cubic-bezier(.2, .7, .2, 1); } }
@keyframes casa-abre { from { opacity: 0; transform: translateY(14px); } }

/* ══ Sesiones completas, dentro de «Para casa» (sesiones.js) ══════════ */
.casa-sesiones { margin-top: clamp(64px, 9vw, 104px); }
.casa-sesiones-titulo { max-width: 16em; font-size: clamp(26px, 3.4vw, 40px); margin-top: 14px; }
.casa-sesiones .subtitulo { max-width: 40em; margin-top: 12px; color: var(--tinta-2); }
.sesiones-lista { display: grid; gap: 14px; margin-top: 36px; }
@media (min-width: 760px) { .sesiones-lista { grid-template-columns: 1fr 1fr; } }
/* La aclaración: la música de casa acompaña; la sesión presencial va más adentro. */
.casa-sesiones-nota { max-width: 40em; margin-top: 14px; padding-left: 14px; font-size: 14px; line-height: 1.6; color: var(--apagado);
  border-left: 2px solid transparent; border-image: linear-gradient(180deg, #93dcd5, #3b7ea1, #e5c47b, #6b4c8a, #8e5db5) 1; }
/* El hueco de la columna impar: los símbolos de las estaciones se turnan. */
.sesion-hueco { display: none; }
@media (min-width: 760px) { .sesion-hueco { display: grid; place-items: center; min-height: 300px; } }
.sesion-hueco-icono { grid-area: 1 / 1; position: relative; width: clamp(160px, 18vw, 220px); aspect-ratio: 1; opacity: 0; }
.sesion-hueco-icono::before { content: ''; position: absolute; inset: -45%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c) 20%, transparent), transparent 62%); }
.sesion-hueco-icono svg { position: relative; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 12px color-mix(in srgb, var(--c) 55%, transparent)); }
@media (prefers-reduced-motion: no-preference) {
  .sesion-hueco-icono { animation: sesion-hueco 17.5s ease-in-out infinite; animation-delay: calc(var(--i) * 3.5s); }
}
@media (prefers-reduced-motion: reduce) { .sesion-hueco-icono:first-child { opacity: 1; } }
@keyframes sesion-hueco {
  0% { opacity: 0; transform: scale(.94); filter: blur(6px); }
  6%, 18% { opacity: 1; transform: none; filter: blur(0); }
  24%, 100% { opacity: 0; transform: scale(1.04); filter: blur(6px); }
}
.sesion-tarjeta { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding: 0 24px 24px; border-radius: var(--radio); border: 1px solid var(--linea); background: var(--negro-2); }
.sesion-arte { height: 130px; margin: 0 -24px 8px; background: #050505; position: relative; overflow: hidden; }
.sesion-arte::before { content: ''; position: absolute; inset: -40%; filter: blur(26px); opacity: .85;
  background: radial-gradient(35% 45% at 30% 45%, var(--c1), transparent 70%), radial-gradient(30% 40% at 68% 55%, var(--c2), transparent 70%), radial-gradient(28% 36% at 50% 30%, var(--c3), transparent 70%); }
@media (prefers-reduced-motion: no-preference) { .sesion-arte::before { animation: casa-luz 16s ease-in-out infinite alternate; } }
.sesion-meta { font: 400 10px var(--f-etiqueta); letter-spacing: .16em; text-transform: uppercase; color: var(--apagado); }
.sesion-tarjeta h3 { font-size: clamp(24px, 2.6vw, 30px); }
.sesion-lema { color: var(--tinta-2); font-size: 15px; }
.sesion-tarjeta > .btn { align-self: flex-start; margin-top: 6px; }
.sesion-sub { margin-top: 8px; font-size: 13px; color: var(--apagado); }
.sesion-recorrido { margin-top: 6px; font-size: 13px; line-height: 1.6; color: var(--apagado); }
.sesion-ondas { list-style: none; display: grid; gap: 6px; }
.sesion-ondas button { display: grid; grid-template-columns: 12px auto 1fr; align-items: baseline; gap: 10px; width: 100%; min-height: 44px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--linea); background: none; color: var(--tinta); text-align: left; font: inherit; cursor: pointer; transition: border-color .3s; }
.sesion-ondas button:hover { border-color: var(--c); }
.sesion-ondas b { font: 500 15px var(--f-titulo); }
.sesion-ondas small { font-size: 13px; color: var(--apagado); }
.sesion-punto { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); align-self: center; }
/* Lo que suena ahora */
.sesion-ahora { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px 16px; margin-top: 30px; padding: 16px; border-radius: 22px; border: 1px solid color-mix(in srgb, var(--c, #93dcd5) 45%, transparent); background: radial-gradient(90% 120% at 0 0, color-mix(in srgb, var(--c, #93dcd5) 16%, transparent), transparent 60%), var(--negro-2); }
.sesion-ahora[hidden] { display: none; }
.sesion-ahora-portada { width: 72px; height: 72px; border-radius: 14px; object-fit: cover; }
.sesion-ahora-etq { font: 400 9px var(--f-etiqueta); letter-spacing: .16em; text-transform: uppercase; color: var(--apagado); }
.sesion-ahora-titulo { font: 500 clamp(19px, 2.2vw, 24px) var(--f-titulo); margin-top: 4px; }
.sesion-ahora-lema { font-size: 14px; color: var(--tinta-2); }
.sesion-play { position: static; }
.sesion-play .i-pausa, .sesion-ahora.sonando .sesion-play .i-play { display: none; }
.sesion-ahora.sonando .sesion-play .i-pausa { display: block; }
/* La × tiene su propio hueco en la rejilla (arriba a la derecha): cuando iba
   flotando en la esquina caía sobre el botón de reproducir en pantallas
   anchas y sobre el título en el teléfono (Javi, 21/09/2026). 44 px de zona
   táctil, como todo lo que se toca en la web. */
.sesion-cerrar { grid-column: 4; grid-row: 1; align-self: start; width: 44px; height: 44px; margin: -10px -10px 0 -6px; border-radius: 50%; border: 0; background: none; color: var(--apagado); font-size: 22px; line-height: 1; cursor: pointer; transition: color .2s; }
.sesion-cerrar:hover { color: var(--tinta); }
.sesion-barra { grid-column: 1 / -1; }
.sesion-tiempo { grid-column: 1 / -1; display: flex; justify-content: space-between; font: 400 11px var(--f-etiqueta); color: var(--apagado); margin-top: -6px; }
@media (max-width: 479px) { .sesion-ahora { grid-template-columns: auto minmax(0, 1fr) auto; } .sesion-cerrar { grid-column: 3; } .sesion-play { grid-row: 2; grid-column: 1 / -1; justify-self: center; } }

/* ══ Para dormir, dentro de «Para casa» (dormir.js, v3.4) ═════════════
   Tono de noche: lavanda sacado de Fruto. Nada se mueve salvo el símbolo de
   la sesión que suena, y despacio (más lento que la respiración). */
.casa-dormir { --luna: color-mix(in srgb, var(--fruto) 45%, #fff); margin-top: clamp(64px, 9vw, 104px); }
.casa-dormir .subtitulo { max-width: 40em; margin-top: 12px; color: var(--tinta-2); }
.dormir-uso { list-style: none; display: grid; gap: 10px; margin-top: 22px; max-width: 40em; }
.dormir-uso li { display: flex; align-items: center; gap: 12px; font-size: 15px; line-height: 1.45; color: var(--tinta-2); }
.dormir-uso svg { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--luna); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.dormir-duracion { margin-top: 30px; border: 0; padding: 0; min-width: 0; }
.dormir-duracion legend { padding: 0; margin-bottom: 10px; font: 400 10px var(--f-etiqueta); letter-spacing: .16em; text-transform: uppercase; color: var(--apagado); }
.dormir-opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.dormir-opciones label { position: relative; }
.dormir-opciones input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.dormir-opciones span { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--linea-fuerte); font-size: 16px; color: var(--tinta-2); transition: background-color .3s, color .3s, border-color .3s, opacity .3s; }
.dormir-opciones input:hover + span { border-color: var(--luna); }
.dormir-opciones input:checked + span { background: var(--tinta); border-color: var(--tinta); color: #050505; }
.dormir-opciones input:focus-visible + span { outline: 2px solid var(--acento-2); outline-offset: 3px; }
.dormir-opciones input:disabled { cursor: default; }
.dormir-opciones input:disabled + span { opacity: .32; }
/* En el teléfono no caben en una fila: las tres duraciones arriba y «Toda la noche» a lo ancho. */
@media (max-width: 479px) {
  .dormir-opciones { display: grid; grid-template-columns: repeat(3, 1fr); }
  .dormir-opciones label:last-child { grid-column: 1 / -1; }
  .dormir-opciones span { width: 100%; justify-content: center; }
}
.dormir-noche { max-width: 40em; margin-top: 14px; padding-left: 14px; border-left: 2px solid var(--luna); font-size: 14px; line-height: 1.6; color: var(--tinta-2); }
.dormir-noche[hidden] { display: none; }
/* Las tarjetas: símbolo de trazo triple, como el logo, en el color de su sesión. */
.dormir-lista { display: grid; gap: 12px; margin-top: 26px; }
@media (min-width: 760px) { .dormir-lista { grid-template-columns: 1fr 1fr; } }
.dormir-tarjeta {
  --cc: color-mix(in srgb, var(--c) 72%, #fff);
  display: grid; grid-template-columns: 72px 1fr; align-items: center; gap: 4px 18px; width: 100%; min-height: 44px; padding: 18px 20px; border-radius: var(--radio);
  border: 1px solid var(--linea); background: radial-gradient(90% 130% at 0 50%, color-mix(in srgb, var(--c) 11%, transparent), transparent 60%), var(--negro-2);
  color: var(--tinta); text-align: left; font: inherit; cursor: pointer; transition: border-color .4s, transform .4s cubic-bezier(.2, .8, .2, 1);
}
.dormir-tarjeta:hover { border-color: color-mix(in srgb, var(--c) 50%, transparent); transform: translateY(-2px); }
.dormir-tarjeta.sonando { border-color: color-mix(in srgb, var(--c) 75%, transparent); }
.dormir-icono { grid-row: 1 / span 4; width: 72px; height: 72px; }
.dormir-icono svg { width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--cc); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 7px color-mix(in srgb, var(--c) 55%, transparent)); }
.dormir-tarjeta .sesion-meta { grid-column: 2; }
.dormir-tarjeta strong { grid-column: 2; font: 500 22px var(--f-titulo); }
.dormir-lema { grid-column: 2; color: var(--tinta-2); font-size: 14px; line-height: 1.45; }
.dormir-cta { grid-column: 2; margin-top: 6px; font: 400 10px var(--f-etiqueta); font-style: normal; letter-spacing: .16em; text-transform: uppercase; color: var(--cc); }
@media (prefers-reduced-motion: no-preference) {
  .dormir-tarjeta.sonando .d-ola { animation: d-ola 8s ease-in-out infinite; }
  .dormir-tarjeta.sonando .d-ola:nth-child(2) { animation-delay: -2.6s; }
  .dormir-tarjeta.sonando .d-ola:nth-child(3) { animation-delay: -5.2s; }
  .dormir-tarjeta.sonando .d-arco { transform-origin: 50px 72px; animation: d-arco 10s ease-in-out infinite; }
  .dormir-tarjeta.sonando .d-arco:nth-child(2) { animation-delay: -3.3s; }
  .dormir-tarjeta.sonando .d-arco:nth-child(3) { animation-delay: -6.6s; }
  .dormir-tarjeta.sonando .d-anillo { animation: d-anillo 7s ease-out infinite; }
  .dormir-tarjeta.sonando .d-anillo.d-tarde { animation-delay: -3.5s; }
  .dormir-tarjeta.sonando .d-llama { transform-origin: 50px 80px; animation: d-llama 9s ease-in-out infinite; }
}
@keyframes d-ola { 50% { transform: translateY(-2.5px); } }
@keyframes d-arco { 50% { transform: scale(1.045); opacity: .7; } }
@keyframes d-anillo { 0% { transform: translateY(4px); opacity: 0; } 25% { opacity: .9; } 100% { transform: translateY(-9px); opacity: 0; } }
@keyframes d-llama { 25% { transform: rotate(-2.5deg) scaleY(1.02); } 75% { transform: rotate(2deg) scaleY(.97); } }
/* Lo que suena ahora: el mismo reproductor que SYNERGYK Home, con una barra sola. */
.dormir-ahora { margin-top: 24px; }

/* ══ Encuesta del día después (v3.0) ═════════════════════════════════ */
.encuesta-notas { display: flex; gap: 10px; margin: 26px 0 12px; }
.encuesta-notas button { width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--linea); background: var(--negro-2); color: var(--tinta); font: 500 20px var(--f-titulo); cursor: pointer; transition: border-color .25s, background-color .25s, transform .2s; }
.encuesta-notas button:hover { border-color: var(--tinta-2); }
.encuesta-notas button[aria-checked="true"] { background: var(--tinta); color: #050505; border-color: var(--tinta); transform: scale(1.06); }
.encuesta-comentario { margin-top: 22px; }
.encuesta-rgpd { margin-top: 34px; }
@media (max-width: 380px) { .encuesta-notas { gap: 7px; } .encuesta-notas button { width: 50px; height: 50px; } }