/* ============ STYLE.CSS — ARCHIVO GENERAL (lo comparten los 3 módulos) ============
   Variables, intro, layout, barra de capítulos y componentes ui-*. Si cambiás algo acá, avisá al equipo. */

/* ============ VARIABLES DE COLOR Y TIPOGRAFÍA ============ */
:root {
  --bg: #07050a;
  --bg-soft: #100a14;
  --panel: #160f1b;
  --panel-border: rgba(255, 182, 206, 0.18);
  --rose: #f7a8c4;
  --rose-strong: #ff6f9c;
  --rose-glow: rgba(255, 120, 160, 0.55);
  --text: #f2e9ee;
  --text-dim: #a99aa6;
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Inter', system-ui, sans-serif;
  /* Colores de los puntos/llamas de las visualizaciones (compartidos por todos los módulos) */
  --dot-off: rgba(255, 255, 255, 0.16); /* punto "apagado" */
  --flame: #ffb35c; /* cáncer detectado (ámbar) */
  --dot-pink: var(--rose-strong); /* detectado gracias a la IA */
}

/* ============ MEDIDAS COMPARTIDAS POR LOS 3 MÓDULOS ============
   --ui-gap-titulo: espacio debajo del título de la tarjeta · --ui-fs-pie: texto del pie (al lado de "Fuente"). */
:root {
  --ui-gap-titulo: 20px; /* antes 14px: Emi pidió más separación */
  --ui-fs-pie: 0.9rem;
}
@media (max-height: 760px) {
  :root {
    --ui-gap-titulo: 14px; /* antes 10px */
  }
}

/* ============ RESET BÁSICO ============ */
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  overflow-x: hidden;
}

/* ============ VIDEO DE FONDO ============ */
.bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
#intro .bg-video {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  /* Centra la vela (no el cuadro del video) en cualquier proporción de ventana;
     scale(1.16) tapa los bordes del corrimiento y los 8vh la alejan del título. */
  transform: translate(calc(0.0435 * max(100vw, 177.78vh)), 26vh) scale(1.06);
  /* Arranca invisible: script.js le agrega .visible a los 10s y aparece con este fade. */
  opacity: 0;
  transition: opacity 1.6s ease;
}
#intro .bg-video.visible {
  opacity: 1;
}

/* ---------- INTRO ---------- */
#intro {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 3vh;
  overflow: hidden;
  background: #000;
  transition:
    opacity 1.1s ease,
    visibility 1.1s ease;
}
#intro.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Todo lo que esté dentro de #intro, menos el video, queda por encima
     de él (el video tiene z-index:0 via .bg-video). */
#intro > *:not(.bg-video) {
  position: relative;
  z-index: 1;
}

.audio-btn {
  position: static;
  transform: none;
  margin-bottom: 1.2rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--text);
  padding: 10px 20px;
  border-radius: 30px;
  font-family: var(--sans);
  font-size: 0.9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  backdrop-filter: blur(4px);
}
.audio-btn:hover {
  border-color: var(--rose);
}

.intro-title {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 6vw, 4.2rem);
  font-weight: 500;
  color: var(--rose);
  text-align: center;
  margin: 2.4rem 0 0.4rem;
  text-shadow: 0 0 30px var(--rose-glow);
}
.intro-sub {
  font-size: clamp(1rem, 2.2vw, 1.4rem);
  color: var(--text);
  text-align: center;
  margin: 0;
}
.intro-note {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 400;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text-dim);
  text-align: center;
  margin-top: 0.6rem;
}

/* ---------- Animación de entrada de la intro ----------
   Título y subtítulos entran uno tras otro con los puntitos rosa; --d = cuándo arranca cada uno. */
.intro-text {
  position: relative;
  display: inline-block;
}
.intro-title,
.intro-sub,
.intro-note {
  opacity: 0;
  animation: introIn 0.5s ease forwards;
  animation-delay: var(--d);
}
.intro-title {
  --d: 0.2s;
}
.intro-sub {
  --d: 0.8s;
}
.intro-note {
  --d: 1.4s;
}
@keyframes introIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
#intro .dot {
  animation: dotPop 1.1s ease forwards;
}
#intro .dot:nth-child(1) {
  animation-delay: calc(var(--d) + 0s);
}
#intro .dot:nth-child(2) {
  animation-delay: calc(var(--d) + 0.08s);
}
#intro .dot:nth-child(3) {
  animation-delay: calc(var(--d) + 0.16s);
}
#intro .dot:nth-child(4) {
  animation-delay: calc(var(--d) + 0.24s);
}
#intro .dot:nth-child(5) {
  animation-delay: calc(var(--d) + 0.32s);
}
#intro .dot:nth-child(6) {
  animation-delay: calc(var(--d) + 0.4s);
}

/* ---------- Mensaje central + botón "Saltear intro" ----------
   Aparecen cuando terminaron los 3 textos (por eso el delay de 2s). */
#intro .intro-start {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  pointer-events: none; /* solo el botón recibe clicks */
  animation: introReveal 0.6s ease 2s both;
}
/* Mensaje de volumen: rosa suave que titila, hasta que arranca el audio */
.intro-volume {
  position: absolute;
  bottom: calc(100% + 1.2rem);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  margin: 0;
  font-size: clamp(0.85rem, 1.5vw, 1rem);
  letter-spacing: 0.08em;
  color: var(--rose);
  text-align: center;
  animation: volumenTitila 2s ease-in-out infinite;
  transition:
    opacity 0.5s ease,
    visibility 0.5s ease;
}
@keyframes volumenTitila {
  0%,
  100% {
    opacity: 0.35;
    text-shadow: none;
  }
  50% {
    opacity: 1;
    text-shadow: 0 0 18px rgba(255, 111, 156, 0.45);
  }
}
#intro.started .intro-volume,
#intro.ended .intro-volume {
  animation: none;
  opacity: 0;
  visibility: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .intro-volume {
    animation: none;
  }
}
#intro.started .intro-volume,
#intro.ended .intro-volume {
  opacity: 0;
  visibility: hidden;
}
#intro.ended .intro-start {
  animation: introReveal 0.5s ease 0s both;
}

/* ---------- Botón de inicio que se convierte en barra de reproducción ----------
   Con .started (script.js) se ensancha y muestra los controles; .player-fill es el avance del audio. */
.player-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  pointer-events: auto;
  transition: transform 0.9s ease;
}
/* Al arrancar el audio la barra baja hasta 3vh del borde, a la altura de "Saltear intro". */
#intro.started .player-wrap,
#intro.ended .player-wrap {
  transform: translateY(calc(47vh - 23px));
}
/* Título y subtítulos: arrancan abajo; con el audio suben arriba del todo */
#intro .intro-head {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% - 3vh);
  transform: translateY(-100%);
  text-align: center;
  pointer-events: none; /* ocupa todo el ancho: sin esto tapaba el botón "Saltear intro" */
  transition:
    top 0.9s ease,
    transform 0.9s ease;
}
#intro.started .intro-head,
#intro.ended .intro-head {
  top: 4vh;
  transform: none;
}
.intro-desc {
  transition:
    opacity 0.5s ease,
    visibility 0.5s ease;
}
#intro.started .intro-desc,
#intro.ended .intro-desc {
  opacity: 0;
  visibility: hidden;
}
.intro-head .intro-title {
  margin: 0 0 0.4rem;
}
.intro-player {
  position: relative;
  overflow: hidden;
  width: 19rem;
  max-width: 90vw;
  height: 46px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(4px);
  transition:
    width 0.6s ease,
    border-color 0.3s ease;
}
.intro-player:hover {
  border-color: var(--rose);
}
#intro.started .intro-player {
  width: min(34rem, 90vw);
}
#intro.ended .intro-player {
  width: 11rem;
}
#intro.ended .player-fill {
  opacity: 0; /* con "Continuar" no hay avance que mostrar */
}
/* Botón redondo de "volver a escuchar": solo con el audio terminado */
#intro .player-replay {
  display: none;
  width: 46px;
  height: 46px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(4px);
}
#intro .player-replay:hover {
  border-color: var(--rose);
}
#intro.ended .player-replay {
  display: grid;
}
#intro.ended.failed .player-replay {
  display: none; /* si el audio no cargó no hay nada para repetir */
}
.player-track {
  position: absolute;
  inset: 0;
  cursor: pointer;
}
.player-fill {
  height: 100%;
  width: 0;
  background: rgba(255, 111, 156, 0.28); /* --rose-strong, medio transparente */
  transition: width 0.3s linear;
  pointer-events: none;
}
#intro .player-start {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 16px;
  justify-content: center;
  background: none;
  border: 0;
  border-radius: 30px;
  backdrop-filter: none;
  font-size: 1rem;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}
#intro.started .player-start {
  opacity: 0;
  visibility: hidden;
}
.player-controls {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 10px;
  pointer-events: none; /* los espacios vacíos dejan pasar el click a la barra */
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.4s ease 0.25s,
    visibility 0.4s ease 0.25s;
}
#intro.started .player-controls {
  opacity: 1;
  visibility: visible;
}
.pbtn {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--text);
  cursor: pointer;
  pointer-events: auto;
}
.pbtn:hover {
  color: var(--rose);
  background: rgba(255, 255, 255, 0.08);
}
.pbtn:focus-visible {
  outline: 2px solid var(--rose-strong);
  outline-offset: 2px;
}
.pbtn[aria-pressed='false'] {
  opacity: 0.45;
}
/* cada botón trae 2 íconos; se ve uno según el estado */
.pbtn .i-pause,
.pbtn .i-muted {
  display: none;
}
.pbtn[data-state='playing'] .i-play,
.pbtn[data-state='muted'] .i-vol {
  display: none;
}
.pbtn[data-state='playing'] .i-pause,
.pbtn[data-state='muted'] .i-muted {
  display: inline;
}
.player-time {
  flex: 1;
  margin-left: 8px;
  font-size: 0.8rem;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Subtítulos: aparecen encima de la barra */
.intro-caption {
  position: absolute;
  bottom: calc(100% + 0.9rem);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: min(90vw, 40rem);
  margin: 0;
  padding: 0.4rem 0.9rem;
  border-radius: 10px;
  background: rgba(7, 5, 10, 0.55);
  color: var(--text);
  font-size: clamp(0.95rem, 1.8vw, 1.2rem);
  text-align: center;
  line-height: 1.35;
}
/* Subtítulos: la frase entra con un fundido lento; cada palabra aparece suave, apenas más grande,
   y vuelve a su tamaño cuando entra la siguiente (--g = tiempo entre palabras, lo pone script.js) */
.intro-caption.cc-entra {
  animation: ccFrase 1s ease both;
}
.cc-w {
  display: inline-block;
  opacity: 0;
  transform-origin: 50% 70%;
  animation:
    ccPalabra 0.6s ease var(--d, 0s) forwards,
    ccAchica 0.6s ease calc(var(--d, 0s) + var(--g, 0.3s)) forwards;
}
@keyframes ccFrase {
  from {
    opacity: 0;
  }
}
@keyframes ccPalabra {
  from {
    opacity: 0;
    transform: translateY(0.2em) scale(1.09);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: scale(1.09);
    filter: none;
  }
}
@keyframes ccAchica {
  from {
    opacity: 1;
    transform: scale(1.09);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .intro-caption.cc-entra,
  .cc-w {
    animation: none;
    opacity: 1;
  }
}
#intro .skip-btn {
  position: absolute;
  right: 3vw;
  bottom: 3vh;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--text);
  padding: 8px 18px;
  border-radius: 30px;
  font-family: var(--sans);
  font-size: 0.85rem;
  cursor: pointer;
  backdrop-filter: blur(4px);
  animation: introReveal 0.6s ease 2s both;
}
#intro .skip-btn:hover {
  border-color: var(--rose);
}
.skip-btn:focus-visible {
  outline: 2px solid var(--rose-strong);
  outline-offset: 3px;
}
@keyframes introReveal {
  from {
    opacity: 0;
    visibility: hidden;
  }
  to {
    opacity: 1;
    visibility: visible;
  }
}
/* Con el audio terminado ("Continuar") saltear ya no tiene sentido */
#intro.ended .skip-btn {
  animation: none;
  opacity: 0;
  visibility: hidden;
}
@media (max-width: 900px) {
  /* en pantallas angostas el botón chocaría con la barra o con el texto:
     antes de empezar va arriba a la derecha; con el audio, centrado sobre la barra */
  #intro .skip-btn {
    top: 1rem;
    right: 1rem;
    bottom: auto;
  }
  #intro.started .skip-btn {
    top: auto;
    right: 50%;
    bottom: calc(3vh + 46px + 0.8rem);
    transform: translateX(50%);
  }
}
@media (hover: none) {
  #intro .skip-btn {
    min-height: 44px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .intro-title,
  .intro-sub,
  .intro-note {
    opacity: 1;
    animation: none;
  }
  #intro .dot {
    animation: none;
  }
}

/* ---------- MAIN EXPERIENCE ---------- */
#experience {
  min-height: 100vh;
  min-height: 100dvh;
  padding: 0;
  position: relative;
}
.chapter-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: var(--bg);
}

/* Grid: .main-col ocupa las columnas 1-2, la vela (.chapter-media) la 3.
   (La columna 4 del menú lateral la pisa la barra de abajo, al final del archivo.) */
.layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 200px;
  min-height: 100vh;
  min-height: 100dvh;
  max-width: 1400px;
  margin: 0 auto;
  padding: 22px 32px; /* menos aire arriba/abajo todavía, para ganar los últimos px y evitar el scroll */
  gap: 24px;
}

/* .main-col ocupa las primeras 2 de las 4 columnas del grid (columnas 1 y 2) */
.main-col {
  grid-column: 1 / 3;
  min-width: 0;
}

/* Espaciado compacto, igual para los 3 capítulos. */
/* 20px de margen para que los puntitos del título (.title-dots) no pisen la tarjeta. */
.chapter-header {
  position: relative;
  z-index: 1;
  margin-bottom: 20px;
}
.chapter-eyebrow {
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--rose);
  opacity: 0.75;
  margin: 0 0 2px;
}

/* position:relative + inline-block: para ubicar los puntitos (.title-dots) alrededor del texto. */
.chapter-title {
  position: relative;
  display: inline-block;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  margin: 0 0 4px;
  background: linear-gradient(
      110deg,
      var(--text) 40%,
      var(--rose) 47%,
      var(--rose-strong) 50%,
      var(--rose) 53%,
      var(--text) 60%
    )
    100% 0 / 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: tituloBrillo 6s var(--ease-in-out) infinite;
}
@keyframes tituloBrillo {
  0% {
    background-position: 100% 0;
  }
  35%,
  100% {
    background-position: 0 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .chapter-title {
    animation: none;
  }
}

/* ---------- PUNTITOS ROSA ALREDEDOR DEL TÍTULO ---------- */
/* Capa invisible, un poco más grande que el título, que aloja los puntos */
.title-dots {
  position: absolute;
  inset: -14px -20px;
  pointer-events: none; /* no deben interferir con clicks */
}

.dot {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rose-strong);
  box-shadow: 0 0 8px var(--rose-glow);
  opacity: 0;
  transform: scale(0);
}

/* Posición de cada uno de los 6 puntos alrededor del título */
.dot:nth-child(1) {
  top: 0%;
  left: 5%;
}
.dot:nth-child(2) {
  top: 10%;
  left: 95%;
}
.dot:nth-child(3) {
  top: 50%;
  left: -3%;
}
.dot:nth-child(4) {
  top: 55%;
  left: 102%;
}
.dot:nth-child(5) {
  top: 100%;
  left: 20%;
}
.dot:nth-child(6) {
  top: 95%;
  left: 80%;
}

/* Animación: pop de entrada, sube flotando, se desvanece */
@keyframes dotPop {
  0% {
    opacity: 0;
    transform: scale(0) translateY(0);
  }
  25% {
    opacity: 1;
    transform: scale(1.2) translateY(-4px);
  }
  60% {
    opacity: 1;
    transform: scale(1) translateY(-10px);
  }
  100% {
    opacity: 0;
    transform: scale(0.6) translateY(-18px);
  }
}

/* Se dispara solo dentro del capítulo activo. El JS fuerza el reinicio
     de esta animación cada vez que se cambia de módulo (ver script.js) */
.chapter.active .dot {
  animation: dotPop 1.3s ease forwards;
}
.chapter.active .dot:nth-child(1) {
  animation-delay: 0s;
}
.chapter.active .dot:nth-child(2) {
  animation-delay: 0.08s;
}
.chapter.active .dot:nth-child(3) {
  animation-delay: 0.16s;
}
.chapter.active .dot:nth-child(4) {
  animation-delay: 0.24s;
}
.chapter.active .dot:nth-child(5) {
  animation-delay: 0.32s;
}
.chapter.active .dot:nth-child(6) {
  animation-delay: 0.4s;
}

/* ============ COLUMNA DE VIDEOS ============
   Los videos están apilados acá; solo se ve el .active (lo elige script.js) con un fade de opacidad. */
.chapter-media {
  grid-column: 3 / 4;
  position: relative;
  border-radius: 16px;
  overflow: hidden; /* recorta las esquinas redondeadas del video */
  align-self: start;
  background: var(--bg-soft); /* se ve un instante mientras carga el 1er video */

  /* Ocupa todo el ancho de su columna; el alto sale del alto de la ventana y el video se ajusta con cover. */
  width: 100%;
  height: 100vh; /* respaldo para navegadores viejos */
  height: clamp(300px, calc(100dvh - 44px), 760px);

  /* Difumina el borde del video: se desvanece hacia transparente en los 4 lados.
     --video-feather controla cuánto (más alto = más difuminado). */
  --video-feather: 20%;
  -webkit-mask-image:
    linear-gradient(
      to right,
      transparent,
      #000 var(--video-feather),
      #000 calc(100% - var(--video-feather)),
      transparent
    ),
    linear-gradient(
      to bottom,
      transparent,
      #000 var(--video-feather),
      #000 calc(100% - var(--video-feather)),
      transparent
    );
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(
      to right,
      transparent,
      #000 var(--video-feather),
      #000 calc(100% - var(--video-feather)),
      transparent
    ),
    linear-gradient(
      to bottom,
      transparent,
      #000 var(--video-feather),
      #000 calc(100% - var(--video-feather)),
      transparent
    );
  mask-composite: intersect;
}
/* object-fit:cover: llena la caja recortando lo que sobre del video. */
.chapter-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease;

  /* Zoom del video dentro de la caja (se recorta lo que sobra); centrado cerca de la llama. */
  transform: scale(var(--video-zoom, 1.3));
  transform-origin: 50% 45%;
  filter: brightness(1.3); /* brillo de los videos: 1 = original, más alto = más claro */
}
.chapter-video.active {
  opacity: 1;
}

/* side nav: ahora ocupa explícitamente la 4ta columna del grid
     (antes era automático porque era la 2da y última columna) */
.side-nav {
  grid-column: 4 / 5;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 50%;
  transform: translateY(-50%);
  height: fit-content;
}
.nav-item {
  font: inherit;
  display: block;
  width: 100%;
  background: var(--panel);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 16px 10px;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s;
  color: var(--text-dim);
}
.nav-item .num {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 8px;
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--text-dim);
}
.nav-item .label {
  font-size: 0.82rem;
  line-height: 1.3;
}
.nav-item.active {
  border-color: var(--rose-strong);
  box-shadow: 0 0 22px rgba(255, 111, 156, 0.25);
}
.nav-item.active .num {
  background: var(--rose-strong);
  color: #1a0510;
}
.nav-item.active .label {
  color: var(--rose);
}
.nav-item:not(.active):hover {
  border-color: rgba(255, 255, 255, 0.25);
  color: var(--text);
}

/* "Volver a la presentación": discreto, debajo de los 3 capítulos */
.nav-back {
  font: inherit;
  font-size: 0.76rem;
  display: block;
  width: 100%;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 9px 10px;
  text-align: center;
  cursor: pointer;
  color: var(--text-dim);
  transition: all 0.25s;
}
.nav-back:hover {
  border-color: rgba(255, 255, 255, 0.25);
  color: var(--text);
}
.nav-back:focus-visible {
  outline: 2px solid var(--rose-strong);
  outline-offset: 3px;
}
/* Cuando termina el módulo 3, "Volver a la presentación" se enciende: fondo claro, letras oscuras y pulso de luz */
.nav-back.nav-back--glow {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
  font-weight: 600;
  animation: navBackGlow 2.2s ease-in-out infinite;
}
@keyframes navBackGlow {
  0%,
  100% {
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.25);
  }
  50% {
    box-shadow: 0 0 26px rgba(255, 255, 255, 0.75);
  }
}
@media (prefers-reduced-motion: reduce) {
  .nav-back.nav-back--glow {
    animation: none;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.6);
  }
}
.nav-back.nav-back--glow:hover {
  background: var(--text);
  color: var(--bg);
}
@keyframes navBackGlow {
  0%,
  100% {
    box-shadow: 0 0 0 rgba(255, 255, 255, 0);
  }
  50% {
    box-shadow:
      0 0 22px rgba(255, 255, 255, 0.55),
      inset 0 0 10px rgba(255, 255, 255, 0.12);
  }
}
@media (prefers-reduced-motion: reduce) {
  .nav-back.nav-back--glow {
    animation: none;
    box-shadow: 0 0 18px rgba(255, 255, 255, 0.5);
  }
}

.chapter {
  display: none;
  position: relative;
  overflow: hidden;
  min-height: 500px;
  border-radius: 6px;
  animation: fadeIn 0.5s ease;
}
.chapter.active {
  display: block;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 900px) {
  .layout {
    grid-template-columns: 1fr;
    padding: 28px 18px;
  }
  /* En 1 columna: flujo normal, y order pone la vela arriba del texto. */
  .main-col {
    grid-column: auto;
  }
  /* A ancho completo la vela saldría altísima: max-height la frena y el resto se recorta con cover. */
  .chapter-media {
    grid-column: auto;
    order: -1;
    height: min(340px, 45vh);
  }
  .side-nav {
    flex-direction: row;
    position: static;
    overflow-x: auto;
    grid-column: auto;
  }
  .nav-item {
    min-width: 110px;
  }
}

:focus-visible {
  outline: 2px solid var(--rose);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .chapter {
    animation: none;
  }
  .dot {
    animation: none !important;
    opacity: 0;
  }
}

/* ============ COMPONENTES COMPARTIDOS (ui-*) ============
   Tarjeta, pestañas, botones, números grandes, "Fuente", leyenda. Usalos para que todo se vea parejo. */
/* ============ MÓDULO "EL FUTURO" — visualización IA (capítulo 3) ============
   Prefijo me-. Objetivo: que entre en una pantalla y que la vela se vea detrás del panel semitransparente. */

/* El módulo ocupa el ancho completo de .main-col (el video tiene su propia columna). */
.ui-wrap {
  position: relative;
  z-index: 1;
  margin-top: 2px;
  width: 100%;
}

/* Bajada corta arriba de las pestañas. Margen chico a propósito
     para no consumir alto de pantalla. */
.ui-lede {
  color: var(--text-dim);
  max-width: 68ch;
  margin: 0 0 6px;
  font-size: 0.85rem;
  line-height: 1.28;
}

/* Nota chica al pie de una tarjeta: más tenue que .ui-lede/.ui-sub (la usan los módulos 1 y 3). */
.ui-note {
  font-size: 0.7rem;
  color: var(--text-dim);
  opacity: 0.7;
  line-height: 1.3;
  margin: 10px 0 0;
}

/* ---- Pestañas para elegir qué visualización ver ----
   Muestran un .ui-tabpanel a la vez (lógica en script.js). */
.ui-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.ui-tab {
  font: inherit;
  font-size: 0.8rem;
  font-family: var(--sans);
  text-align: left;
  border: 1px solid var(--panel-border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-dim);
  padding: 5px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
  flex: 1 1 auto;
  min-width: 140px;
}
.ui-tab:hover {
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--text);
}
/* Pestaña activa: la marca script.js poniendo aria-selected="true" */
.ui-tab[aria-selected='true'] {
  background: var(--rose-strong);
  border-color: var(--rose-strong);
  color: #1a0510;
  font-weight: 600;
}

/* ============ .ui-panels: "grid stack" ============
   Los 2 paneles comparten la misma celda, así la tarjeta siempre mide lo del más alto y no salta al cambiar de pestaña. */
.ui-panels {
  display: grid;
}
.ui-tabpanel {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.ui-tabpanel.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Fondo semitransparente + blur, para que la vela se siga viendo a través del panel. */
.ui-panel {
  position: relative; /* contexto para que el popover de "Fuente" se ubique bien */
  background: rgba(22, 15, 27, 0.66);
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  padding: 14px 20px; /* achicado de nuevo para ganar más alto */
  backdrop-filter: blur(6px);
  /* height:100%: llena el alto de la celda del grid, sin hueco abajo. */
  height: 100%;
  display: flex;
  flex-direction: column;
}
/* Título dentro de la tarjeta: cada módulo pone su texto, el tamaño sale de acá para que sea igual en todos. */
.ui-card-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  color: var(--text);
  margin: 0 0 var(--ui-gap-titulo); /* antes 8px fijo: ver "MEDIDAS COMPARTIDAS", arriba de todo */
}
.ui-sub {
  color: var(--text-dim);
  margin: 0 0 6px;
  font-size: 0.84rem;
  line-height: 1.28;
  max-width: 64ch;
}

.ui-seg {
  display: inline-flex;
  justify-content: center;
  flex-wrap: wrap;
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
  margin-bottom: 6px;
}
.ui-seg button {
  font: inherit;
  font-size: 0.82rem;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  padding: 5px 11px;
  border-radius: 999px;
  cursor: pointer;
}
.ui-seg button[aria-pressed='true'] {
  background: var(--rose-strong);
  color: #1a0510;
}

/* El svg escala con viewBox + width:100%: achicar el ancho de la columna también le baja el alto. */
.ui-field {
  position: relative;
  border-radius: 12px;
  overflow-x: auto;
}
.ui-field svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Grilla + números: apilados por defecto; desde 680px van en fila (grilla a la izquierda, números a la derecha). */
.ui-visual {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ui-stats {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ui-stats .ui-legend,
.ui-stats .ui-readout,
.ui-stats .ui-note {
  margin-top: 0;
} /* el gap del flex ya separa */

@media (min-width: 680px) {
  .ui-visual {
    flex-direction: row;
    align-items: center;
    gap: 28px;
  }
  .ui-visual .ui-field {
    flex: 0 0 42%;
    min-width: 0;
  } /* más angosta que antes (56%) => también más baja, porque el svg escala en proporción al ancho */
  .ui-visual .ui-stats {
    flex: 1 1 auto;
    max-width: 320px;
  }
}

.ui-readout {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
  align-items: flex-end;
}
.ui-big {
  font-family: var(--serif);
  font-size: 1.4rem;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.ui-pinktext {
  color: var(--rose-strong);
}
.ui-lab {
  color: var(--text-dim);
  font-size: 0.8rem;
}

/* Es un <details>: solo se ve "Fuente" y el texto se despliega como popover. */
/* position:relative: referencia para el popover de abajo. */
.ui-src {
  position: relative;
  margin-top: 4px;
  text-align: right;
}
/* Salida compartida de "Fuente" (se aclara, sube y se desenfoca); la dispara uiFuenteSalir() en script.js. */
.ui-src {
  transition:
    opacity 0.35s ease,
    transform 0.35s ease,
    filter 0.35s ease;
}
.ui-src.ui-src-out {
  opacity: 0;
  transform: translateY(-10px);
  filter: blur(4px);
  pointer-events: none;
}

/* Etiqueta clickeable: sin la flechita del navegador, con un ▸ propio que gira al abrir. */
.ui-src summary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  cursor: pointer;
  user-select: none;
  font-size: 0.72rem;
  color: var(--text-dim);
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  padding: 3px 10px;
  background: rgba(255, 255, 255, 0.03);
  transition:
    color 0.2s,
    border-color 0.2s;
}
.ui-src summary::-webkit-details-marker {
  display: none;
} /* Chrome/Safari */
.ui-src summary::marker {
  content: '';
} /* Firefox */
.ui-src summary::before {
  content: '▸';
  font-size: 0.65rem;
  transition: transform 0.2s;
}
.ui-src[open] summary::before {
  transform: rotate(90deg);
}
.ui-src summary:hover {
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.3);
}

/* Popover flotante: position:absolute, no empuja nada; queda arriba y alineado a la derecha de la etiqueta. */
.ui-src p {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px); /* 10px de separación respecto a la etiqueta */
  margin: 0;
  width: max(220px, 85%); /* nunca más angosto que 220px, pero se adapta al panel */
  max-width: 320px;
  text-align: left;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
  color: var(--text-dim);
  font-size: 0.72rem;
  line-height: 1.35;
  z-index: 20; /* por encima de la grilla y del resto del panel */
}
/* Fuentes armadas con funcionuiFuente (script.js): cada una en su renglón, con la etiqueta como link*/
.ui-src-item,
.ui-src-nota {
  display: block;
}
.ui-src-item + .ui-src-item {
  margin-top: 4px;
}
.ui-src-nota {
  margin-top: 6px;
  font-style: italic;
}
.ui-src p a {
  color: var(--rose-strong);
  text-decoration: underline;
}
/* Triangulito que apunta hacia la etiqueta, como un globo de diálogo */
.ui-src p::after {
  content: '';
  position: absolute;
  top: 100%;
  right: 14px;
  border: 6px solid transparent;
  border-top-color: var(--panel);
}
.ui-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 0.76rem;
  color: var(--text-dim);
  margin-top: 4px;
}
.ui-legend i {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: -1px;
}

@media (prefers-reduced-motion: reduce) {
  .me-dot,
  .me-glow {
    transition: none;
  }
}

/* ============ BOTONES NUEVOS Y ACCESIBILIDAD ============ */
.nav-item .label {
  display: block;
}
.nav-item:focus-visible,
.audio-btn:focus-visible,
.ui-tab:focus-visible,
.ui-seg button:focus-visible,
.ui-src summary:focus-visible {
  outline: 2px solid var(--rose-strong);
  outline-offset: 3px;
}

/* ============ OTROS DISPOSITIVOS (celular, tablet) ============ */
.layout {
  padding-left: max(32px, env(safe-area-inset-left));
  padding-right: max(32px, env(safe-area-inset-right));
  padding-bottom: max(22px, env(safe-area-inset-bottom));
}
@media (max-width: 900px) {
  .layout {
    padding-left: max(18px, env(safe-area-inset-left));
    padding-right: max(18px, env(safe-area-inset-right));
  }
  /* menú de capítulos fijo abajo, a mano del pulgar */
  .side-nav {
    position: sticky;
    bottom: max(8px, env(safe-area-inset-bottom));
    top: auto;
    transform: none;
    z-index: 5;
    order: 2;
    padding: 6px;
    border-radius: 16px;
    background: rgba(16, 10, 20, 0.82);
    backdrop-filter: blur(8px);
    border: 1px solid var(--panel-border);
    gap: 8px;
  }
  .nav-item {
    flex: 1 0 auto;
    padding: 10px 8px;
  }
  .nav-item .num {
    margin-bottom: 4px;
  }
  .nav-back {
    flex: 0 0 100%;
    order: 5;
  }
}
@media (max-width: 600px) {
  .layout {
    gap: 14px;
    padding-top: 16px;
  }
  /* Sin min-height: la vela ya tiene alto propio en celular. */
  .chapter {
    min-height: 0;
  }
  .nav-item {
    min-width: 88px;
  }
  .nav-item .label {
    font-size: 0.74rem;
  }
}
@media (hover: none) {
  /* pantallas táctiles: botones de al menos 44px */
  .nav-item,
  .nav-back,
  .ui-tab,
  .ui-seg button,
  .audio-btn {
    min-height: 44px;
  }
}

/* ============ PANTALLAS BAJAS (≤760px de alto) ============
   Notebooks tipo 1366x768 o con escalado de Windows: menos aire para que no aparezca scroll. */
@media (max-height: 760px) {
  .layout {
    padding-top: 14px;
    padding-bottom: 14px;
    gap: 16px;
  }
  .chapter-header {
    margin-bottom: 12px;
  } /* nunca 0: si no, los puntitos del título pisan la tarjeta */
  .chapter-title {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
  }
  .chapter {
    min-height: 0;
  } /* el piso fijo de 500px podía por sí solo pasarse del alto disponible */
  .ui-panel {
    padding: 8px 16px;
  }
  .ui-lede {
    margin-bottom: 3px;
  }
}

/* ============ PANTALLAS MUY BAJAS (≤660px de alto, segundo escalón) ============
   Se suma al de 760px: ej. 1366x768 con la barra del navegador (~600px útiles). */
@media (max-height: 660px) {
  .layout {
    padding-top: 6px;
    padding-bottom: 6px;
    gap: 10px;
  }
  .ui-panel {
    padding: 4px 12px;
  }
  .chapter-title {
    font-size: 1.6rem;
    margin-bottom: 0;
  }
  .chapter-eyebrow {
    margin-bottom: 0;
  }
  .chapter-header {
    margin-bottom: 8px;
  } /* pisa el 12px del escalón de 760px: todavía menos aire, pero nunca 0 -- misma razón que ahí */
}

/* ============ BARRA DE CAPÍTULOS (abajo) + ANIMACIÓN DE ENTRADA ============
   Va al final para pisar el menú lateral viejo. --bar-h se suma al padding y se resta a la vela, así no hay scroll. */
:root {
  --bar-h: 60px;
}
@media (max-height: 760px) {
  :root {
    --bar-h: 54px;
  }
}
@media (max-height: 660px) {
  :root {
    --bar-h: 50px;
  }
}

/* Sin la columna 4 (el menú ya no vive ahí): 3 columnas iguales */
.layout {
  grid-template-columns: 1fr 1fr 1fr;
  padding-bottom: calc(max(22px, env(safe-area-inset-bottom)) + var(--bar-h));
}
@media (max-width: 900px) {
  .layout {
    grid-template-columns: 1fr;
  }
}
@media (max-height: 760px) {
  .layout {
    padding-bottom: calc(14px + var(--bar-h));
  }
}
@media (max-height: 660px) {
  .layout {
    padding-bottom: calc(6px + var(--bar-h));
  }
}
@media (min-width: 901px) {
  .chapter-media {
    height: calc(100vh - 44px - var(--bar-h)); /* respaldo */
    height: clamp(300px, calc(100dvh - 44px - var(--bar-h)), 760px);
  }
  /* misma cuenta que modulo1.css (con más especificidad para pisarla sin tocar ese archivo) */
  #experience #chapter-1.active {
    height: calc(100vh - 44px - var(--bar-h)); /* respaldo */
    height: clamp(480px, calc(100dvh - 44px - var(--bar-h)), 760px);
  }
}

/* La vela usa el margen real de cada escalón para llegar hasta la barra;
   object-position evita que el recorte suba la llama en pantallas bajas. */
@media (min-width: 901px) and (max-height: 760px) {
  .chapter-media {
    height: calc(100dvh - 28px - var(--bar-h));
  }
  .chapter-video {
    object-position: 50% 20%;
  }
}
@media (min-width: 901px) and (max-height: 660px) {
  .chapter-media {
    height: calc(100dvh - 12px - var(--bar-h));
  }
}
/* La barra */
.side-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  transform: none;
  grid-column: auto;
  z-index: 30;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  height: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px));
  padding: 0 max(24px, calc((100vw - 640px) / 2)) env(safe-area-inset-bottom, 0px);
  overflow: visible;
  background: linear-gradient(to top, rgba(7, 5, 10, 0.95), rgba(7, 5, 10, 0.6));
  backdrop-filter: blur(6px);
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 0;
}
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  width: auto;
  min-width: 0;
  padding: 4px;
  background: none;
  border: 0;
  border-radius: 999px;
  box-shadow: none;
  color: var(--text-dim);
}
.nav-item .num {
  position: relative;
  width: 34px;
  height: 34px;
  margin: 0;
  font-size: calc(0.95rem + 6px);
  background: var(--panel);
  border: 1px solid rgba(255, 255, 255, 0.28);
  transition:
    background 0.35s,
    color 0.35s,
    border-color 0.35s,
    box-shadow 0.35s,
    opacity 0.3s;
}
.nav-item .label {
  font-size: calc(0.8rem + 2px);
  white-space: nowrap;
}
.nav-item:not(.active):hover {
  border-color: transparent;
  color: var(--text);
}
.nav-item:not(.active):hover .num {
  border-color: rgba(255, 255, 255, 0.6);
}
.nav-item.done .num {
  color: var(--rose);
  border-color: var(--rose-strong);
  background: rgba(255, 111, 156, 0.1);
}
.nav-item.active {
  border-color: transparent;
  box-shadow: none;
}
.nav-item.active .num {
  background: var(--rose-strong);
  color: #1a0510;
  border-color: var(--rose);
  box-shadow: 0 0 16px var(--rose-glow);
}
/* bolita que orbita el círculo del capítulo actual */
.nav-item.active .num::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: var(--rose);
  box-shadow: 0 0 8px var(--rose-glow);
  animation: navOrbita 3.2s linear infinite;
}
@keyframes navOrbita {
  from {
    transform: rotate(0) translateX(21px);
  }
  to {
    transform: rotate(360deg) translateX(21px);
  }
}
/* el capítulo que sigue late con un pulso */
@keyframes navPulso {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 111, 156, 0.55);
  }
  60% {
    box-shadow: 0 0 0 9px rgba(255, 111, 156, 0);
  }
}
.nav-item.next .num {
  border-color: var(--rose);
  animation: navPulso 1.8s ease-out infinite 1.5s;
}
/* mientras las bolas salen del círculo, el círculo se apaga */
.nav-item.tr-lift .num {
  opacity: 0;
}

/* Hilo de bolitas entre capítulos: se prenden de a una al avanzar */
.nav-trail {
  flex: 1;
  min-width: 36px;
  margin: 0 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nav-trail i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--dot-off);
  transition:
    background 0.3s,
    box-shadow 0.3s,
    transform 0.3s;
}
.nav-trail.full i {
  background: var(--rose-strong);
  box-shadow: 0 0 6px var(--rose-glow);
  transform: scale(1.15);
  transition-delay: calc(var(--k, 0) * 60ms);
}

/* Silencio de efectos (izquierda) y "Volver a la presentación" (derecha) */
/* Botones de sonido (música y efectos), a la izquierda de la barra */
.nav-sonido {
  position: absolute;
  left: max(12px, env(safe-area-inset-left));
  top: calc(var(--bar-h) / 2);
  transform: translateY(-50%);
  display: flex;
  gap: 8px;
}
.nav-sfx {
  position: relative;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  color: var(--text-dim);
  cursor: pointer;
  transition: all 0.25s;
}
.nav-sfx:hover {
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.4);
}
.nav-sfx:focus-visible {
  outline: 2px solid var(--rose-strong);
  outline-offset: 3px;
}
.nav-sfx .i-off {
  display: none;
}
.nav-sfx[aria-pressed='true'] .i-on {
  display: none;
}
.nav-sfx[aria-pressed='true'] .i-off {
  display: block;
}
.nav-sfx[aria-pressed='true'] {
  opacity: 0.6;
}
/* Cartelito al pasar el mouse (o al llegar con Tab): dice qué es cada botón */
.nav-sfx::after {
  content: attr(data-tip);
  position: absolute;
  left: 0;
  bottom: calc(100% + 10px);
  padding: 5px 10px;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  font-family: var(--sans);
  font-size: 0.75rem;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity var(--dur-fast) ease,
    transform var(--dur-fast) ease;
}
.nav-sfx:hover::after,
.nav-sfx:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}
@media (hover: none) {
  .nav-sfx:hover::after {
    opacity: 0; /* en pantallas táctiles no queda pegado después del toque */
  }
}
.nav-back {
  position: absolute;
  right: max(12px, env(safe-area-inset-right));
  top: calc(var(--bar-h) / 2);
  transform: translateY(-50%);
  width: auto;
  flex: none;
  padding: 6px 12px;
}
@media (max-width: 1100px) {
  .nav-back-txt {
    display: none; /* queda solo la flecha (con tooltip) para no pisar la barra */
  }
}
@media (max-width: 700px) {
  .side-nav {
    padding-left: 84px; /* lugar para los 2 botones de sonido */
    padding-right: 52px;
  }
  .nav-sonido {
    gap: 4px;
  }
  .nav-sfx {
    width: 30px;
    height: 30px;
  }
  .nav-item .label {
    display: none; /* en pantallas angostas solo el capítulo actual muestra su nombre */
  }
  .nav-item.active .label {
    display: block;
  }
  .nav-trail {
    min-width: 12px;
    margin: 0 4px;
  }
}

/* Animación de entrada de cada módulo (la 1ª vez): canvas de bolas + frase puente */
#trCanvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 35; /* por encima de la barra: las bolas salen del círculo numerado */
  pointer-events: none;
}
.tr-puente {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translateX(-50%);
  z-index: 36;
  width: min(560px, 86vw);
  text-align: center;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  line-height: 1.4;
  color: var(--text-dim);
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.tr-puente.on {
  opacity: 1;
}
/* mientras corre la animación se esconden el título y la tarjeta reales; después entran con fundido */
.chapter.tr-h .chapter-header {
  opacity: 0;
}
.chapter.tr-c .ui-wrap {
  opacity: 0;
}
.chapter.tr-revela .chapter-header,
.chapter.tr-revela .ui-wrap {
  transition: opacity 0.7s ease;
}
@media (prefers-reduced-motion: reduce) {
  .nav-item.active .num::after,
  .nav-item.next .num {
    animation: none;
  }
}

/* ============ MOVIMIENTO COMPARTIDO ============
   Ritmo común y microinteracciones: solo color, sombra y transform, nunca el tamaño. GSAP vive en animacion.js. */
:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* arranca rápido y frena suave: entradas */
  --ease-in-out: cubic-bezier(0.45, 0.05, 0.25, 1); /* cambios de estado */
  --dur-fast: 0.18s; /* hover, clic */
  --dur-med: 0.35s; /* paneles, pestañas */
  --dur-slow: 0.7s; /* entradas grandes */
  --stagger: 60ms; /* separación entre elementos en cascada */
}

/* Antes estas tenían "transition: all" (anima propiedades de más). Ahora solo lo que cambia. */
.ui-tab,
button.em-tab,
.ui-seg button {
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.ui-tab:not([aria-selected='true']):hover,
button.em-tab:not(.active):hover,
.ui-seg button:not([aria-pressed='true']):hover {
  box-shadow: 0 0 14px rgba(255, 111, 156, 0.18);
}
/* Apretar: se "hunde" un poquito (transform no cambia el tamaño del lugar que ocupa) */
.ui-tab:active,
button.em-tab:active,
.ui-seg button:active,
.ui-src summary:active {
  transform: scale(0.97);
}
.nav-item:not(.active):hover {
  box-shadow: 0 0 18px rgba(255, 111, 156, 0.16);
}

/* Entrada en cascada con CSS puro (opcional): poné la clase mov-cascada en el contenedor y
   --i: 0, 1, 2... en cada hijo (style="--i: 2"). Ej.: <ul class="mov-cascada"><li style="--i:0">... */
@keyframes mov-entra {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.mov-cascada > * {
  animation: mov-entra var(--dur-med) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * var(--stagger));
}

@media (prefers-reduced-motion: reduce) {
  .ui-tab,
  button.em-tab,
  .ui-seg button {
    transition: none;
  }
  .ui-tab:active,
  button.em-tab:active,
  .ui-seg button:active,
  .ui-src summary:active {
    transform: none;
  }
  .mov-cascada > * {
    animation: none;
  }
}
/* ============ PRESENTACIÓN INICIAL DE LA BARRA ============
   Al entrar a la experiencia, los botones aparecen grandes en el centro y después vuelven a su lugar (ver presentarBarra en transicion.js). */

/* La vela se oculta mientras dura la presentación y aparece con fundido al terminar. */
.chapter-media {
  transition: opacity 0.8s ease;
}
body.nav-solo .chapter-media {
  opacity: 0;
}

/* Durante la presentación solo se ven los botones 1, 2 y 3: sin fondo, sin franja y sin clicks. */
.side-nav .nav-sonido {
  transition: opacity 0.5s ease;
}
.side-nav.nav-presenta {
  background: none;
  border-top-color: transparent;
  backdrop-filter: none;
  pointer-events: none;
}
.side-nav.nav-presenta .nav-sonido,
.side-nav.nav-presenta .nav-back {
  opacity: 0;
}
/* El círculo del capítulo activo se apaga (tr-lift) cuando arrancan las bolitas, no antes. */
.side-nav.nav-presenta .nav-item.tr-lift .num {
  opacity: 1;
}
/* Presentación inicial: círculos rosas, quietos (sin órbita ni pulso). */
.side-nav.nav-presenta .nav-item .num {
  background: rgba(255, 111, 156, 0.14);
  color: var(--rose);
  border-color: var(--rose-strong);
  box-shadow:
    0 0 14px var(--rose-glow),
    inset 0 0 10px rgba(255, 111, 156, 0.25);
  animation: none;
}
.side-nav.nav-presenta .nav-item .num::after {
  display: none;
}
.side-nav.nav-presenta .nav-item .label {
  color: var(--rose);
}
/* El hilo de bolitas también se ve rosa, más suave */
.side-nav.nav-presenta .nav-trail i {
  background: var(--rose-strong);
  opacity: 0.55;
  box-shadow: 0 0 6px var(--rose-glow);
  transition: none;
}
.side-nav.nav-presenta .nav-item .num::after {
  display: none;
}
.side-nav.nav-presenta .nav-item .label {
  color: var(--text-dim);
}