/* ===================================================== */
    /* PERF-1 · Crimson Pro self-hosted (OFL)                */
    /* Mismos .woff2 que servía Google Fonts (bytes intactos) */
    /* → render idéntico; se elimina el CSS externo bloqueante*/
    /* y los preconnect a los orígenes externos de fuente.    */
    /* Solo las 5 caras que usa el sitio (verificado en       */
    /* navegador): 300/400/600/700 normal + 400 italic.       */
    /* ===================================================== */
    @font-face {
      font-family: "Crimson Pro";
      font-style: normal;
      font-weight: 300;
      font-display: swap;
      src: url("/_astro/crimson-pro-latin-normal.BHslzmyu.woff2") format("woff2");
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }

    @font-face {
      font-family: "Crimson Pro";
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url("/_astro/crimson-pro-latin-normal.BHslzmyu.woff2") format("woff2");
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }

    @font-face {
      font-family: "Crimson Pro";
      font-style: normal;
      font-weight: 600;
      font-display: swap;
      src: url("/_astro/crimson-pro-latin-normal.BHslzmyu.woff2") format("woff2");
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }

    @font-face {
      font-family: "Crimson Pro";
      font-style: normal;
      font-weight: 700;
      font-display: swap;
      src: url("/_astro/crimson-pro-latin-normal.BHslzmyu.woff2") format("woff2");
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }

    @font-face {
      font-family: "Crimson Pro";
      font-style: italic;
      font-weight: 400;
      font-display: swap;
      src: url("/_astro/crimson-pro-latin-italic.fF4-5HNX.woff2") format("woff2");
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      background: #0a0806;
      font-family: "Crimson Pro", serif;
      color: #f2ece0;
      line-height: 1.5;
      overflow-x: clip;
    }

    html {
      overflow-y: auto;
      overflow-x: hidden;
      scroll-behavior: auto; /* importante: no usar smooth aquí */
    }

    :root {
      --bg-deep: #0a0806;
      --gold-light: #e2b87a;
      --gold-dim: #b8893c;
      --gold-dark: #8b5e2c;
      --text-cream: #f2ece0;
      --text-silver: #cfc6b6;
      --border-fine: rgba(200, 150, 80, 0.35);
    }

    /* PRELOADER */
    .preloader {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #0a0806;
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: opacity 0.6s ease;
      opacity: 1;
      visibility: visible;
    }

    .preloader.hidden {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    .preloader-content {
      text-align: center;
      color: var(--gold-light);
    }

    .preloader-symbol {
      font-size: 3.5rem;
      letter-spacing: 8px;
      margin-bottom: 1rem;
      animation: pulseSymbol 1.8s infinite;
    }

    .preloader-text {
      font-size: 0.8rem;
      letter-spacing: 6px;
      text-transform: uppercase;
      color: var(--gold-dim);
    }

    .preloader-bar {
      width: 200px;
      height: 1px;
      background: rgba(226, 184, 122, 0.2);
      margin-top: 1.5rem;
      position: relative;
      overflow: hidden;
    }

    .preloader-bar::after {
      content: "";
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: var(--gold-light);
      animation: loadingBar 2s infinite;
    }

    .preloader-percent {
      margin-top: 1rem;
      font-size: 0.8rem;
      color: var(--gold-dim);
    }

    @keyframes pulseSymbol {

      0%,
      100% {
        opacity: 0.6;
        transform: scale(0.96);
      }

      50% {
        opacity: 1;
        transform: scale(1.08);
        text-shadow: 0 0 10px rgba(226, 184, 122, 0.6);
      }
    }

    @keyframes loadingBar {
      0% {
        left: -100%;
      }

      100% {
        left: 100%;
      }
    }

    img {
      pointer-events: none;
      user-select: none;
      -webkit-user-drag: none;
    }

    /* SECCIONES */
    /* FASE A · C2: la escena ocupa toda la pantalla pero puede crecer
       si el contenido no cabe. Así nunca se recorta el texto ni el CTA.
       100dvh evita el salto de la barra de Safari/iOS. */
    .scene {
      position: relative;
      min-height: 100vh;
      min-height: 100dvh;
      height: auto;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      padding: 2rem;
    }

    footer {
      min-height: 100vh;
      min-height: 100dvh;
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background: linear-gradient(to bottom, #0a0806, #1a1410);
      border-top: 1px solid var(--border-fine);
      padding: 2rem;
      text-align: center;
      position: relative;
      overflow: hidden;
    }

    /* Fondo sutil para el footer */
    footer::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      /* MIG-REAL FASE 6: ruta RELATIVA al fichero para que Vite emita el asset
         hasheado en /_astro (bytes intactos, igual que las demás imágenes). */
      background: url('/_astro/epi.BVfkJ2ZZ.webp') center/cover no-repeat;
      opacity: 0.06;
      pointer-events: none;
    }

    .footer-content {
      position: relative;
      z-index: 1;
      max-width: 600px;
      margin: 0 auto;
      padding: 1rem;
    }

    .footer-logo {
      font-family: "Crimson Pro", serif;
      font-size: clamp(2.5rem, 6vw, 3.8rem);
      font-weight: 700;
      color: var(--gold-light);
      letter-spacing: 2px;
      line-height: 1.1;
      margin-bottom: 0.5rem;
    }

    .footer-logo .accent {
      color: var(--gold-dim);
      font-weight: 300;
    }

    .footer-divider {
      width: 60px;
      height: 2px;
      background: var(--gold-dim);
      margin: 0.8rem auto 1.2rem auto;
      opacity: 0.5;
    }

    .footer-text {
      font-family: "Crimson Pro", serif;
      color: var(--text-silver);
      font-size: 1rem;
      font-weight: 300;
      max-width: 400px;
      margin: 0 auto 1.5rem auto;
      line-height: 1.6;
      letter-spacing: 1px;
    }

    .footer-links {
      display: flex;
      flex-wrap: wrap;
      /* FASE B: sin row-gap porque cada enlace ya mide 44 px de alto */
      gap: 0 1.6rem;
      justify-content: center;
      margin-bottom: 1.5rem;
    }

    .footer-links a {
      font-family: "Crimson Pro", serif;
      font-size: 0.7rem;
      text-transform: uppercase;
      letter-spacing: 2.5px;
      color: #8a7a6a;
      text-decoration: none;
      transition: color 0.3s ease, transform 0.2s ease;
      cursor: pointer;
      font-weight: 400;
      /* FASE B · objetivo táctil ≥44 px sin cambiar la tipografía visual */
      display: inline-flex;
      align-items: center;
      min-height: 44px;
      min-width: 44px;
      justify-content: center;
      padding: 0 0.35rem;
    }

    .footer-links a:hover {
      color: var(--gold-light);
      transform: translateY(-1px);
    }

    .footer-bottom {
      border-top: 1px solid rgba(255, 255, 255, 0.05);
      padding-top: 1.2rem;
      margin-top: 0.5rem;
      font-family: "Crimson Pro", serif;
      font-size: 0.75rem;
      color: var(--text-silver);
      letter-spacing: 1px;
    }

    .footer-bottom .heart {
      color: #ff0000;
      display: inline-block;
      animation: pulseHeart 2s infinite;
    }

    @keyframes pulseHeart {
      0%,
      100% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.15);
      }
    }

    .img-reveal {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      overflow: hidden;
      /* FIX-2 (contenido fijo): las fotos son visibles SIEMPRE; se eliminó el
         revelado (opacity 0 → 1). La transition se conserva inerte. */
      opacity: 1;
      transition: opacity 0.3s ease-out;
    }

    .scene.loaded.img-ready .img-reveal {
      opacity: 1;
    }

    .img-reveal img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      will-change: transform;
      transform-origin: center center;
    }

    .scene::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom,
          rgba(0, 0, 0, 0.4) 0%,
          rgba(0, 0, 0, 0.6) 50%,
          rgba(0, 0, 0, 0.85) 100%);
      z-index: 1;
      pointer-events: none;
    }

    .scene-top-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 120px;
      background: linear-gradient(to bottom,
          #0a0806 0%,
          rgba(10, 8, 6, 0.4) 60%,
          transparent 100%);
      z-index: 2;
      pointer-events: none;
    }

    .scene::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 120px;
      background: linear-gradient(to top,
          #0a0806 0%,
          rgba(10, 8, 6, 0.4) 60%,
          transparent 100%);
      z-index: 2;
      pointer-events: none;
    }

    .content {
      position: relative;
      z-index: 15;
      max-width: 860px;
      width: 100%;
      text-align: center;
      padding: 1.5rem;
      text-shadow: 0 2px 15px rgba(0, 0, 0, 0.6);
      /* FIX-2 (contenido fijo): el texto ya no entra con fundido/deslizamiento;
         es visible desde el primer pintado y no se mueve con la interacción.
         La transition se conserva inerte. */
      opacity: 1;
      transform: none;
      transition:
        opacity 0.9s ease,
        transform 0.9s ease;
    }

    .scene.loaded .content {
      opacity: 1;
      transform: translateY(0);
    }

    .scene-left .content {
      max-width: 700px;
      margin-left: 0;
      margin-right: auto;
      text-align: left;
    }

    .scene-right .content {
      max-width: 700px;
      margin-left: auto;
      margin-right: 0;
      text-align: right;
    }

    .welcome-text {
      font-size: 0.85rem;
      letter-spacing: 8px;
      text-transform: uppercase;
      color: var(--gold-light);
      margin-bottom: 1rem;
    }

    .hero-title {
      font-size: clamp(2.5rem, 8vw, 5rem);
      font-weight: 700;
      line-height: 1.05;
      margin-bottom: 1rem;
    }

    .hero-sub {
      font-size: clamp(1.1rem, 4vw, 1.6rem);
      font-style: italic;
      color: var(--gold-light);
    }

    .hero-date {
      font-size: 0.9rem;
      letter-spacing: 3px;
      color: var(--gold-dim);
      margin-top: 0.5rem;
    }

    .chapter-number {
      font-size: clamp(2.8rem, 8vw, 5rem);
      font-weight: 300;
      color: var(--gold-light);
      line-height: 1;
      letter-spacing: 6px;
      margin-bottom: 0.25rem;
      word-break: keep-all;
    }

    .chapter-title {
      font-size: clamp(1.6rem, 5vw, 2.6rem);
      font-weight: 600;
      margin-bottom: 0.75rem;
    }

    .chapter-sub {
      font-size: clamp(0.9rem, 3vw, 1.2rem);
      font-style: italic;
      color: var(--gold-light);
      margin-bottom: 1.5rem;
    }

    .chapter-summary {
      font-size: 1rem;
      line-height: 1.7;
      max-width: 700px;
      margin: 0 auto 2rem auto;
      background: rgba(0, 0, 0, 0.45);
      padding: 1rem 1.5rem;
      border-left: 2px solid var(--gold-dim);
      border-radius: 2px;
    }

    .btn-read-more {
      background: transparent;
      border: 1.5px solid var(--gold-dim);
      color: var(--gold-light);
      padding: 0.7rem 2rem;
      min-height: 44px;
      min-width: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 0.85rem;
      font-family: "Crimson Pro", serif;
      font-weight: 600;
      letter-spacing: 2px;
      cursor: pointer;
      transition: all 0.3s ease;
      border-radius: 40px;
      backdrop-filter: blur(2px);
    }

    .btn-read-more:hover {
      background: rgba(226, 184, 122, 0.15);
      border-color: var(--gold-light);
      letter-spacing: 2.5px;
      transform: translateY(-2px);
    }

    .video-full {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      overflow: hidden;
      background: #000;
    }

    .video-caption {
      background: rgba(0, 0, 0, 0.5);
      display: inline-block;
      padding: 0.4rem 1.5rem;
      font-size: 0.7rem;
      letter-spacing: 4px;
      border-left: 3px solid var(--gold-dim);
      margin-bottom: 1.5rem;
      text-transform: uppercase;
    }

    .scene.has-video .content {
      opacity: 1 !important;
      transform: translateY(0) !important;
    }

    .scene.has-video {
      background: #000;
    }

    .scroll-indicator {
      position: absolute;
      bottom: 80px;
      bottom: calc(80px + env(safe-area-inset-bottom, 0px));
      left: 50%;
      transform: translateX(-50%);
      z-index: 20;
      color: var(--gold-light);
      font-size: 1.8rem;
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      animation: bounce 2s infinite;
      opacity: 0.7;
      cursor: pointer;
    }

    @keyframes bounce {

      0%,
      100% {
        transform: translateX(-50%) translateY(0);
      }

      50% {
        transform: translateX(-50%) translateY(10px);
      }
    }

    /* ============================================= */
    /* BARRA LATERAL DERECHA  */
    /* ============================================= */
    .side-nav {
      position: fixed;
      right: 1.5rem;
      right: calc(1.5rem + env(safe-area-inset-right, 0px));
      top: 50%;
      transform: translateY(-50%);
      z-index: 1100;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0;
      background: rgba(10, 8, 6, 0.7);
      backdrop-filter: blur(8px);
      padding: 0.4rem;
      border-radius: 50%;
      border: 1px solid var(--gold-dim);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
      transition: border-radius 0.35s ease, padding 0.35s ease, opacity 0.3s ease, visibility 0.3s ease;
    }

    /* FASE B · M7: el control lateral se retira cuando el footer está a la
       vista, para no tapar ni bloquear sus enlaces. */
    .side-nav.footer-hidden {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    .side-nav.open {
      border-radius: 40px;
      padding: 0.6rem 0.5rem;
    }

    .side-nav-toggle {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 42px;
      height: 42px;
      flex-shrink: 0;
      position: relative;
      border-radius: 50%;
      background: rgba(226, 184, 122, 0.12);
      border: 1px solid var(--gold-dim);
      color: var(--gold-light);
      font-size: 1.1rem;
      cursor: pointer;
      transition: background 0.3s ease;
    }

    /* FASE B · área táctil de 44 px para el botón del menú */
    .side-nav-toggle::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 44px;
      height: 44px;
      border-radius: 50%;
    }

    .side-nav-toggle:hover {
      background: rgba(226, 184, 122, 0.24);
    }

    .side-nav-toggle i {
      transition: transform 0.3s ease;
    }

    .side-nav.open .side-nav-toggle i {
      transform: rotate(90deg);
    }

    .side-nav-links {
      display: flex;
      flex-direction: column;
      gap: 0.7rem;
      overflow: visible;
      max-height: 0;
      opacity: 0;
      margin-top: 0;
      pointer-events: none;
      transition: max-height 0.4s ease, opacity 0.3s ease, margin-top 0.3s ease;
    }

    .side-nav.open .side-nav-links {
      max-height: 620px;
      opacity: 1;
      margin-top: 0.7rem;
      pointer-events: auto;
      overflow: visible;
    }

    .side-nav a {
      position: relative;
      color: var(--gold-dim);
      font-size: 1.2rem;
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      transition: all 0.3s ease;
      text-decoration: none;
    }

    /* FASE B · área táctil de 44 px sin cambiar el círculo visual */
    .side-nav a::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 44px;
      height: 44px;
      border-radius: 50%;
    }

    .side-nav a:hover {
      color: var(--gold-light);
      background: rgba(226, 184, 122, 0.15);
      transform: scale(1.1);
    }

    /* Estilo activo */
    .side-nav a.active {
      color: var(--gold-light);
      background: rgba(226, 184, 122, 0.2);
      box-shadow: 0 0 15px rgba(226, 184, 122, 0.2);
      transform: scale(1.05);
    }

    /* Tooltip personalizado */
    .side-nav a .tooltip {
      position: absolute;
      right: calc(100% + 16px);
      top: 50%;
      transform: translateY(-50%) scale(0.85);
      background: rgba(10, 8, 6, 0.92);
      backdrop-filter: blur(8px);
      border: 1px solid var(--gold-dim);
      color: var(--text-cream);
      padding: 0.25rem 0.9rem;
      border-radius: 20px;
      font-size: 0.75rem;
      font-family: "Crimson Pro", serif;
      letter-spacing: 0.5px;
      white-space: nowrap;
      opacity: 0;
      visibility: hidden;
      transition: all 0.25s ease;
      pointer-events: none;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    }

    .side-nav a:hover .tooltip {
      opacity: 1;
      visibility: visible;
      transform: translateY(-50%) scale(1);
    }

    /* Flechita del tooltip (triángulo) */
    .side-nav a .tooltip::after {
      content: "";
      position: absolute;
      left: calc(100% - 0px);
      top: 50%;
      transform: translateY(-50%);
      border: 6px solid transparent;
      border-left-color: var(--gold-dim);
    }

    /* Responsive: en móviles la barra se reduce y los tooltips se ocultan */
    @media (max-width: 768px) {
      .side-nav {
        right: 0.8rem;
        right: calc(0.8rem + env(safe-area-inset-right, 0px));
      }

      .side-nav-toggle {
        width: 36px;
        height: 36px;
        font-size: 1rem;
      }

      .side-nav a {
        font-size: 1rem;
        width: 30px;
        height: 30px;
      }

      /* FASE B: paso vertical ≥44 px para que el área de 44 px de cada
         enlace no se solape con la de su vecino. */
      .side-nav-links {
        gap: 0.9rem;
      }

      .side-nav a .tooltip {
        display: none;
        /* en móvil no mostramos tooltips para no tapar */
      }
    }

    @media (max-width: 480px) {
      .side-nav {
        right: 0.4rem;
        right: calc(0.4rem + env(safe-area-inset-right, 0px));
      }

      .side-nav-toggle {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
      }

      .side-nav a {
        font-size: 0.85rem;
        width: 26px;
        height: 26px;
      }

      .side-nav-links {
        gap: 1.2rem;
      }
    }

    /* MODALES */
    .modal {
      display: flex;
      align-items: center;
      justify-content: center;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.4);
      backdrop-filter: blur(12px);
      z-index: 2000;
      overflow-y: auto;
      padding: 2rem;
      /* FASE B · safe areas: el modal ocupa toda la pantalla (viewport-fit=cover) */
      padding: calc(2rem + env(safe-area-inset-top, 0px)) calc(2rem + env(safe-area-inset-right, 0px)) calc(2rem + env(safe-area-inset-bottom, 0px)) calc(2rem + env(safe-area-inset-left, 0px));
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 0.25s ease, visibility 0.25s ease;
    }

    .modal.active {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }

    .modal-content {
      max-width: 780px;
      width: 100%;
      background: #14100c;
      border-radius: 16px;
      border-left: 4px solid var(--gold-dim);
      padding: 2rem;
      position: relative;
      max-height: 85vh;
      overflow-y: auto;
      box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
      opacity: 0;
      transform: translateY(20px) scale(0.98);
      transition: opacity 0.25s ease, transform 0.25s ease;
    }

    .modal.active .modal-content {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    .modal-close {
      position: absolute;
      top: 1rem;
      right: 1.2rem;
      font-size: 2rem;
      cursor: pointer;
      color: var(--gold-dim);
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      transition: all 0.3s ease;
      z-index: 10;
      /* FASE F · A3: era un <span>; como <button> hay que anular los
         estilos por defecto del navegador para conservar el aspecto
         (sin forzar line-height: hereda 1,5 igual que antes). */
      background: transparent;
      border: 0;
      padding: 0;
      font-family: inherit;
    }

    /* FASE B · área táctil de 44 px para el cierre del modal */
    .modal-close::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 44px;
      height: 44px;
      border-radius: 50%;
    }

    .modal-close:hover {
      color: var(--gold-light);
      background: rgba(200, 150, 80, 0.2);
      transform: rotate(90deg);
    }

    .modal-title {
      font-size: 1.8rem;
      font-weight: 600;
      color: var(--gold-light);
      margin-bottom: 0.5rem;
      /* FASE B · M8: hueco para que el título envuelto no choque con el ×
         (derecha 1,2rem + área táctil de 44 px + aire). */
      padding-right: 4.5rem;
    }

    .modal-sub {
      font-size: 0.9rem;
      color: var(--text-silver);
      margin-bottom: 1.5rem;
      border-left: 3px solid var(--gold-dim);
      padding-left: 1rem;
    }

    .modal-text {
      font-size: 1rem;
      line-height: 1.7;
      color: #e2d8ca;
    }

    .modal-text p {
      margin-bottom: 1rem;
    }

    /* FASE D · D2: los títulos internos del modal pasan de h2 a h3 (mejor
       jerarquía) conservando exactamente el mismo aspecto: UA h2 = 1.5em y
       el reset global (*{margin:0}) ya anulaba los márgenes por defecto. */
    .modal-text h3 {
      font-size: 1.5em;
      font-weight: 700;
    }

    /* Navegación entre capítulos dentro del modal */
    .modal-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 1.5rem;
      padding-top: 1rem;
      border-top: 1px solid rgba(200, 150, 80, 0.15);
      font-family: "Crimson Pro", serif;
      font-size: 0.85rem;
      color: var(--text-silver);
    }

    .chapter-nav {
      display: flex;
      align-items: center;
      gap: 0.8rem;
    }

    .chapter-nav .nav-btn {
      background: transparent;
      border: 1px solid var(--gold-dim);
      color: var(--gold-light);
      width: 32px;
      height: 32px;
      position: relative;
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
      font-size: 0.8rem;
    }

    /* FASE B · área táctil de 44 px para la navegación de capítulos */
    .chapter-nav .nav-btn::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 44px;
      height: 44px;
      border-radius: 50%;
    }

    .chapter-nav .nav-btn:hover {
      background: rgba(226, 184, 122, 0.15);
      border-color: var(--gold-light);
    }

    .chapter-nav .chapter-counter {
      font-size: 0.8rem;
      color: var(--text-silver);
      min-width: 40px;
      text-align: center;
    }

    @media (max-width: 768px) {
      .modal-content {
        padding: 1.2rem;
      }
      .modal-title {
        font-size: 1.4rem;
      }
      .modal-text {
        font-size: 0.9rem;
      }
      .modal-footer {
        flex-direction: column;
        gap: 0.8rem;
        align-items: stretch;
      }
      .chapter-nav {
        justify-content: center;
      }
    }

    /* Botón flotante de entrevista en YouTube */
    .btn-interview {
      position: fixed;
      bottom: 2rem;
      bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
      left: 2rem;
      left: calc(2rem + env(safe-area-inset-left, 0px));
      z-index: 1100;
      background: rgba(226, 184, 122, 0.95);
      backdrop-filter: blur(8px);
      border: none;
      border-radius: 50px;
      padding: 0.8rem 1.5rem;
      min-height: 44px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 0.6rem;
      font-family: "Crimson Pro", serif;
      font-weight: 600;
      font-size: 0.85rem;
      color: #0a0806;
      transition: all 0.3s ease;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    }

    .btn-interview i {
      font-size: 1.2rem;
      color: #ff0000;
    }

    .btn-interview:hover {
      background: var(--gold-light);
      transform: scale(1.05);
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    }

    @media (max-width: 768px) {
      .btn-interview {
        bottom: 1.5rem;
        bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
        left: 1.5rem;
        left: calc(1.5rem + env(safe-area-inset-left, 0px));
        padding: 0.5rem 1.2rem;
        font-size: 0.875rem;
      }
      .btn-interview i {
        font-size: 1rem;
      }
    }

    /* Modal para el vídeo de entrevista */
    .modal-content-video {
      max-width: 800px;
      padding: 1.5rem;
    }

    .video-wrapper {
      position: relative;
      width: 100%;
      padding-bottom: 56.25%;
      /* Aspect ratio 16:9 */
      height: 0;
      overflow: hidden;
      border-radius: 12px;
      margin-top: 1rem;
    }

    .video-wrapper iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: none;
    }

    @media (max-width: 768px) {
      .video-wrapper iframe {
        height: 100%;
      }

      .modal-content-video {
        padding: 1rem;
      }
    }

    /* Fix para los iframes de YouTube */
    .video-lazy-container iframe {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100%;
      height: 100%;
      transform: translate(-50%, -50%);
      object-fit: cover;
      pointer-events: none;
      border: 0;
    }

    @media (max-width: 768px) {
      .video-lazy-container iframe {
        width: 177.77777778vh;
        height: 100%;
        min-width: 100%;
        min-height: 100%;
      }
    }
/* FASE G · A4: regla redundante eliminada (.side-nav a ya tiene
   position: relative y overflow visible por defecto). */

.side-nav a .tooltip {
  position: absolute;
  right: calc(100% + 16px);
  top: 50%;
  transform: translateY(-50%) translateX(8px) scale(0.9);
  pointer-events: none;
  z-index: 50;
}

.side-nav a:hover .tooltip {
  transform: translateY(-50%) translateX(0) scale(1);
}

    /* ===================================================== */
    /* FASE A · C2 — AJUSTES POR ALTURA DE PANTALLA          */
    /* Conservan la composición "una escena = una pantalla"  */
    /* en viewports cortos (móvil pequeño y landscape).      */
    /* Si aun así el contenido no cabe, la escena crece      */
    /* (min-height + height:auto) y nada queda recortado.    */
    /* ===================================================== */
    @media (max-height: 820px) {
      .scene {
        padding: 1.5rem;
      }

      .content {
        padding: 1.25rem;
      }

      .chapter-number {
        font-size: clamp(2.4rem, 7vh + 1vw, 4.4rem);
      }

      .chapter-summary {
        font-size: 0.95rem;
        line-height: 1.6;
        padding: 0.9rem 1.25rem;
        margin-bottom: 1.5rem;
      }

      .btn-read-more {
        padding: 0.6rem 1.7rem;
      }
    }

    @media (max-height: 700px) {
      .scene {
        padding: 1.25rem;
      }

      .content {
        padding: 1rem;
      }

      .chapter-number {
        font-size: clamp(2rem, 6vh + 1vw, 3.4rem);
        letter-spacing: 4px;
        margin-bottom: 0.15rem;
      }

      .chapter-title {
        font-size: clamp(1.35rem, 4.5vh, 2rem);
        margin-bottom: 0.5rem;
      }

      .chapter-sub {
        font-size: clamp(0.85rem, 2.6vh, 1.05rem);
        margin-bottom: 1rem;
      }

      .chapter-summary {
        font-size: 0.9rem;
        line-height: 1.5;
        padding: 0.75rem 1rem;
        margin-bottom: 1.1rem;
        max-width: 640px;
      }

      .btn-read-more {
        padding: 0.5rem 1.4rem;
        font-size: 0.8rem;
      }

      .hero-title {
        font-size: clamp(2rem, 9vh, 3.6rem);
      }

      .hero-sub {
        font-size: clamp(1rem, 3.6vh, 1.35rem);
      }

      .welcome-text {
        font-size: 0.75rem;
        letter-spacing: 6px;
        margin-bottom: 0.8rem;
      }

      .hero-date {
        font-size: 0.8rem;
      }

      .video-caption {
        padding: 0.3rem 1.1rem;
        margin-bottom: 1rem;
        letter-spacing: 3px;
      }

      .scroll-indicator {
        /* FASE B: por encima del botón fijo de entrevista (24 + 44 + 8) */
        bottom: 4.75rem;
        bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
      }

      footer {
        padding: 1.25rem;
      }

      .footer-content {
        padding: 0.75rem;
      }

      .footer-logo {
        font-size: clamp(2rem, 8vh, 3.2rem);
      }

      .footer-text {
        margin-bottom: 1rem;
      }

      .footer-links {
        gap: 0.6rem 1.4rem;
        margin-bottom: 1rem;
      }

      .footer-divider {
        margin: 0.6rem auto 0.9rem;
      }
    }

    @media (max-height: 520px) {
      .scene {
        padding: 1rem;
      }

      .content {
        padding: 0.75rem;
      }

      .chapter-number {
        font-size: clamp(1.6rem, 8vh, 2.4rem);
        letter-spacing: 3px;
      }

      .chapter-title {
        font-size: clamp(1.15rem, 5vh, 1.5rem);
        margin-bottom: 0.3rem;
      }

      .chapter-sub {
        font-size: 0.85rem;
        margin-bottom: 0.5rem;
      }

      .chapter-summary {
        font-size: 0.85rem;
        line-height: 1.4;
        padding: 0.55rem 0.85rem;
        margin-bottom: 0.75rem;
      }

      .btn-read-more {
        padding: 0.45rem 1.1rem;
        font-size: 0.75rem;
      }

      .hero-title {
        font-size: clamp(1.7rem, 11vh, 2.6rem);
      }

      .hero-sub {
        font-size: 0.95rem;
      }

      .welcome-text {
        font-size: 0.65rem;
        letter-spacing: 4px;
        margin-bottom: 0.5rem;
      }

      .hero-date {
        font-size: 0.72rem;
        margin-top: 0.35rem;
      }

      .video-caption {
        margin-bottom: 0.75rem;
        padding: 0.25rem 0.9rem;
        letter-spacing: 2px;
      }

      .scroll-indicator {
        bottom: 4.75rem;
        bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
        font-size: 1.3rem;
      }

      footer {
        padding: 1rem;
      }

      .footer-content {
        padding: 0.5rem;
      }

      .footer-logo {
        font-size: clamp(1.5rem, 10vh, 2.2rem);
        margin-bottom: 0.3rem;
      }

      .footer-divider {
        margin: 0.5rem auto 0.7rem;
      }

      .footer-text {
        font-size: 0.9rem;
        margin-bottom: 0.8rem;
        line-height: 1.4;
      }

      .footer-links {
        gap: 0.4rem 1rem;
        margin-bottom: 0.9rem;
      }

      .footer-links a {
        font-size: 0.65rem;
        letter-spacing: 2px;
      }

      .footer-bottom {
        padding-top: 0.8rem;
        margin-top: 0.3rem;
        font-size: 0.7rem;
      }
    }

    @media (max-width: 360px) {
      .scene {
        padding: 1.1rem;
      }

      .content {
        padding: 1rem;
      }

      .chapter-summary {
        font-size: 0.9rem;
        padding: 0.8rem 1rem;
      }
    }

    /* ===================================================== */
    /* FASE B — RESPONSIVE / MOBILE                          */
    /* ===================================================== */

    /* ===================================================== */
    /* FASE E · REGLA DE TOOLTIPS (regresión detectada)      */
    /*                                                       */
    /* El panel scrolleable recorta los tooltips (van fuera  */
    /* del panel, a la izquierda), por eso desaparecían en    */
    /* ventanas de <=640 px. Restauración del comportamiento */
    /* original de FASE A sin perder el panel desplazable en  */
    /* pantallas estrechas:                                   */
    /*  · ancho <=768 px  -> tooltips ocultos (diseño         */
    /*    original del menú en móvil/tablet estrecho)         */
    /*  · ventana <=583 px -> hace falta scroll y los         */
    /*    objetivos de 44 px no caben sin solape: se mantiene  */
    /*    el panel desplazable y sin tooltips                 */
    /*  · escritorio con ventana 584-640 px -> SIN scroll:    */
    /*    el panel se ajusta (paso 36+8=44 px) para caber y   */
    /*    los tooltips vuelven a mostrarse                    */
    /* ===================================================== */
    /* IMPORTANTE: el scroll se aplica SOLO por altura. Aplicarlo también     */
    /* por anchura convertía el panel en contenedor desplazable en pantallas   */
    /* estrechas y altas (390x844) donde FASE D no lo era, y eso altera el     */
    /* rasterizado del control (diferencia de 436 px medida vs FASE D).        */
    /* ===================================================== */
    @media (max-width: 768px), (max-height: 583px) {
      .side-nav a .tooltip {
        display: none;
      }
    }

    @media (max-height: 583px) {
      .side-nav {
        max-height: calc(100dvh - 1rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
      }
    }

    @media (min-width: 769px) and (max-height: 640px) {
      .side-nav-links {
        gap: 0.5rem;
      }

      .side-nav.open {
        padding: 0.4rem 0.45rem;
      }

      .side-nav.open .side-nav-links {
        margin-top: 0.4rem;
      }
    }

    /* FASE E: el tooltip también se muestra con el foco de teclado */
    .side-nav a:focus-visible .tooltip {
      opacity: 1;
      visibility: visible;
      transform: translateY(-50%) translateX(0) scale(1);
    }

    /* M10 · Legibilidad móvil: textos que quedaban por debajo de 14 px se
        suben a 0.875rem (14 px). ≤900 px para cubrir también los móviles
        en landscape (844×390). Va después de las queries de altura de
        FASE A para que prevalezca. */
    @media (max-width: 900px) {
      .footer-links a {
        font-size: 0.875rem;
      }

      .footer-bottom {
        font-size: 0.875rem;
      }

      .video-caption {
        font-size: 0.875rem;
      }

      .btn-interview {
        font-size: 0.875rem;
      }
    }

    /* ===================================================== */
    /* FASE A · C1 — RED DE SEGURIDAD DEL PRELOADER          */
    /* Si finishLoading() no llega a ejecutarse (JS caído,   */
    /* error o recursos colgados), el preloader se resuelve  */
    /* solo y el contenido principal se hace visible.        */
    /* Solo aplica a partir de los 6 s (fill forwards).      */
    /* ===================================================== */
    .preloader {
      animation: preloaderFailSafe 0s linear 6s forwards;
    }

    .content {
      animation: contentFailSafe 0s linear 6s forwards;
    }

    @keyframes preloaderFailSafe {
      to {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
      }
    }

    @keyframes contentFailSafe {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* ===================================================== */
    /* FASE C · PREFERS-REDUCED-MOTION                        */
    /* Respeta la preferencia del sistema sin alterar la     */
    /* composición: animaciones decorativas (preloader,      */
    /* chevrón, corazón) y transiciones de revelado pasan a  */
    /* instantáneas. El parallax de imágenes, el desplazamiento */
    /* animado y el autoplay de los fondos de vídeo se       */
    /* desactivan desde JavaScript con la misma media query. */
    /* ===================================================== */
    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
    }