/* ==========================================================================
   El negocio que no estás viendo
   main.css — sistema base. Bloque 1: Escenas 00–03.

   Dirección de color para este bloque: SOLO negro/crema (verdad, pausa).
   El color narrativo (fucsia, azul, coral, verde) empieza en la Escena 05
   y no debe aparecer antes — es deliberado, no un olvido.
   ========================================================================== */

/* DECISIÓN TIPOGRÁFICA DEFINITIVA (Noelia) — la pareja final de la web:
   EB Garamond (voz editorial: titulares, conceptos importantes, frases
   protagonistas, Diferenciación/Conexión/Seducción, cursiva solo con
   función narrativa real) + Montserrat (funcional: narrativa, párrafos,
   preguntas, explicaciones, navegación, botones, etiquetas, pills,
   microcopy). Preferencia Regular 400 en EB Garamond, sin acumular
   pesos; Montserrat en 400 para lectura y 500–600 para lo funcional.
   Ninguna otra familia (Fraunces, Inter, Cormorant Garamond, Playfair)
   queda en la web. */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;1,400&family=Montserrat:wght@400;500;600&display=swap');

:root {
  --ink: #0B0B0C;
  --ink-soft: #16161A;
  --paper: #F5F1E8;
  /* NORMALIZACIÓN DEFINITIVA (Noelia): solo dos colores de texto en toda
     la web — principal (--paper, #F5F1E8) y secundario (--paper-dim,
     rgba(245,241,232,.72)). --paper-faint desaparece: ya no se crea una
     tercera jerarquía de grises/opacidades — todo lo que la usaba pasa
     a --paper-dim. (--line sigue aparte: es un color de borde/línea,
     no de texto). Los colores de acento narrativo (fucsia/azul/dorado
     de Diferenciación/Conexión/Seducción) tampoco cuentan aquí — son
     identidad de Mundo, no jerarquía de lectura. */
  --paper-dim: rgba(245, 241, 232, 0.72);
  --line: rgba(245, 241, 232, 0.18);
  --focus-ring: #F5F1E8;
  /* Noelia: "cambia los tonos rosas de las cookies y del favicon, eran
     de la otra web" — era el fucsia de masqueblablabla.com (#F034D8);
     ahora el fucsia real de ESTA web, el mismo de Diferenciación
     (#D4147A, ver .world--1 y el resto de sitios que ya lo usaban). */
  --brand-fucsia: #D4147A;

  --font-display: 'EB Garamond', serif;
  --font-body: 'Montserrat', sans-serif;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  /* VIGÉSIMA SEGUNDA CORRECCIÓN: --space-5 y --space-6 se reducen (eran
     4rem/6rem) — son los dos valores que casi todas las escenas usan
     como padding-block de arriba/abajo, así que entre dos escenas
     seguidas se sumaban (p.ej. 96px + 96px = 192px de hueco solo por
     el borde de cada una, antes de contar nada de dentro). Al ser
     variables compartidas, esta reducción es automáticamente coherente
     en toda la web — no hay que ajustar escena por escena. */
  /* VIGÉSIMA TERCERA CORRECCIÓN: otra reducción más (Noelia: "los
     espacios libres siguen siendo muchos, se ve demasiado larga la
     web") — mismo criterio que la corrección anterior: variables
     compartidas, así que este recorte es coherente en toda la web sin
     tocar escena por escena. */
  --space-5: 2.25rem;
  --space-6: 2.75rem;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ==========================================================================
     NORMALIZACIÓN TIPOGRÁFICA DEFINITIVA — de 5 niveles a SOLO 4. La
     "frase destacada" intermedia desaparece: los pocos titulares/frases
     protagonista suben al Nivel 2, todo lo demás (el ~80% en Montserrat)
     baja al Nivel 3, un único tamaño de lectura para toda la web.

     Nivel 1 — HERO: 44–48px. Solo el titular del sitio y "Ni idea."
     Nivel 2 — TÍTULO DE SECCIÓN: 30–34px. Titulares reales + las 4-6
       frases protagonista de toda la web (ver comentarios junto a cada
       una) — nunca un tamaño especial suelto fuera de esta variable.
     Nivel 3 — TEXTO NORMAL/DESTACADO: 18–20px. Todo lo demás: preguntas,
       narrativa, explicaciones, listas, transición.
     Nivel 4 — MICROTEXTO: 14px. Botones, pills, etiquetas.
     ========================================================================== */
  --fs-1: clamp(2.75rem, 3.75vw, 3rem);
  --fs-2: clamp(1.875rem, 2.65vw, 2.125rem);
  --fs-3: clamp(1.125rem, 1.5625vw, 1.25rem);
  --fs-4: 0.875rem;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--ink);
}

html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto; }
.lenis.lenis-smooth iframe { pointer-events: none; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  cursor: default;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.02;
  margin: 0;
}

p { margin: 0; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

a { color: inherit; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Layout base ---------- */
.scene {
  position: relative;
  min-height: 100svh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.scene__inner {
  position: relative;
  z-index: 2;
  width: min(100% - 3rem, 1100px);
  margin-inline: auto;
  text-align: center;
}

/* ---------- Cursor ----------
   Se probó un cursor personalizado (anillo + etiqueta de texto) — se
   quitó por incómodo (ver la nota junto al cursor en main.js). El cursor
   nativo del navegador ya vale; todos los <button> llevan cursor:pointer
   por el reset de más abajo. */

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 50px;
  padding: 0.9rem 2rem;
  border: 1px solid var(--paper);
  border-radius: 999px;
  font-family: var(--font-body);
  /* Nivel 5 — microtexto/etiqueta: es un control, no texto de relato. */
  font-size: var(--fs-4);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--paper);
  color: var(--ink);
  transition: background 0.3s var(--ease-out), color 0.3s var(--ease-out), transform 0.2s var(--ease-out);
}

.btn:hover, .btn:focus-visible {
  background: transparent;
  color: var(--paper);
  transform: translateY(-2px);
}

.btn:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

/* ---------- Etiqueta / eyebrow tipo expediente ---------- */
.tag {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-4);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-dim);
}

/* Más visible que un ".tag" normal: letra más grande, más gruesa y en
   blanco en vez del gris tenue por defecto. */
/* Con forma de botón/pastilla (como los .btn de la web) — fondo blanco,
   letra negra — aunque no es clicable, solo destaca como una etiqueta. */
.tag--highlight {
  display: inline-block;
  padding: 0.55rem 1.4rem;
  border-radius: 999px;
  background: var(--paper);
  font-family: var(--font-body);
  font-size: var(--fs-4);
  font-weight: 600;
  color: var(--ink);
}

/* ---------- Marcas de esquina (estética de expediente) ---------- */
.case-marks::before,
.case-marks::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  border: 1px solid var(--line);
  pointer-events: none;
}

.case-marks::before { top: var(--space-3); left: var(--space-3); border-right: none; border-bottom: none; }
.case-marks::after { bottom: var(--space-3); right: var(--space-3); border-left: none; border-top: none; }

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

/* ---------- Progreso de escenas (indicador discreto) ---------- */
.scene-progress {
  position: fixed;
  right: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.scene-progress__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--paper-dim);
  transition: background 0.3s ease, transform 0.3s ease;
}

.scene-progress__dot.is-active {
  background: var(--paper);
  transform: scale(1.6);
}

@media (max-width: 640px) {
  .scene-progress { display: none; }
}

/* ==========================================================================
   TU MAPA — sistema persistente, no una barra de progreso. Se construye
   por completo desde assets/js/tu-mapa.js (contenido dinámico), esto es
   solo el vestido. En desktop: pestaña discreta en el borde. En móvil:
   píldora inferior. El panel es el mismo elemento en ambos casos, solo
   cambia de dónde sale.
   ========================================================================== */
.tu-mapa-tab {
  position: fixed;
  right: var(--space-3);
  bottom: var(--space-3);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 1.15rem 0.5rem 0.5rem;
  border: 1px solid rgba(201, 154, 74, 0.28);
  border-radius: 999px;
  /* Fondo con un punto de calidez (no negro plano) + sombra elevada —
     que se lea como un objeto con cuerpo, apoyado sobre la página, no
     una etiqueta pegada encima. */
  background: linear-gradient(155deg, rgba(26, 20, 14, 0.94), rgba(11, 11, 12, 0.92));
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  color: var(--paper-dim);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease, opacity 0.25s ease;
}

.tu-mapa-tab:hover {
  border-color: rgba(201, 154, 74, 0.55);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transform: translateY(-2px);
}
.tu-mapa-tab:active { transform: translateY(-1px) scale(0.97); }

/* Noelia: "que no llegue hasta esa zona" — la pestaña tapaba los
   enlaces legales del pie al llegar al final del todo (ver
   tu-mapa.js: IntersectionObserver sobre .site-footer__legal). Se
   desvanece justo antes de esa fila en vez de quedarse encima. */
.tu-mapa-tab.is-near-footer {
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
}

/* Noelia: "cambia la brújula por el logo del favicon" — la marca de
   "Tu mapa" ya no es una brújula SVG dibujada a mano, es el mismo icono
   del favicon (assets/img/favicon.png). */
.tu-mapa-tab__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
}

.tu-mapa-tab__icon {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.tu-mapa-tab.is-pulsing .tu-mapa-tab__mark {
  animation: tu-mapa-pulse 0.6s ease-out;
}

@keyframes tu-mapa-pulse {
  0% { box-shadow: 0 0 0 0 rgba(201, 154, 74, 0.55); }
  100% { box-shadow: 0 0 0 11px rgba(201, 154, 74, 0); }
}

.tu-mapa-tab__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* BUG REAL: sin gap, el descendente de la itálica de "mapa" (la "p")
     tocaba la línea del recuento de abajo — se leían casi pegadas. */
  gap: 0.2rem;
  line-height: 1.2;
}

/* Serif itálica — la misma familia de "Tu mapa" en el panel y de los
   demás títulos del sitio, en vez de la etiqueta uppercase genérica de
   antes. Le da identidad propia, no de badge de sistema. */
.tu-mapa-tab__label {
  /* Etiqueta de navegación, no una frase reflexiva — pasa a Montserrat
     (funcional), sin cursiva "por variedad". */
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-4);
  /* Noelia: "cambia el orden, tu mapa mayuscula" — ahora la etiqueta
     lleva las mayúsculas (antes las llevaba el recuento). */
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper);
}

.tu-mapa-tab__count {
  font-family: var(--font-body);
  font-size: var(--fs-4);
  font-weight: 600;
  /* Noelia: "12 descubrimientos minuscula" — ya no fuerza mayúsculas,
     se lee tal cual lo escribe el JS. */
  color: var(--paper-dim);
  font-variant-numeric: tabular-nums;
}

.tu-mapa-tab__count[hidden] { display: none; }

.tu-mapa-overlay {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: rgba(11, 11, 12, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.tu-mapa-overlay.is-open { opacity: 1; pointer-events: auto; }

.tu-mapa-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  width: min(92vw, 400px);
  /* Degradado sutil hacia una esquina más cálida, en vez de un negro
     plano — el mismo lenguaje "cinematográfico" del resto del sitio,
     aquí a muy baja intensidad para no competir con el contenido. */
  background: linear-gradient(165deg, #17110b 0%, var(--ink) 45%);
  border-left: 1px solid var(--line);
  padding: var(--space-4) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transform: translateX(100%);
  transition: transform 0.35s var(--ease-out);
  overflow-y: auto;
}

.tu-mapa-panel.is-open { transform: translateX(0); }

.tu-mapa-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--line);
}

.tu-mapa-panel__heading { display: flex; flex-direction: column; gap: 0.3rem; }

.tu-mapa-panel__eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-4);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent, #C99A4A);
}

.tu-mapa-panel__title {
  /* Segunda limpieza: es microcopy de interfaz (título de un panel de
     navegación), no un titular de escena — Montserrat. */
  font-family: var(--font-body);
  font-size: var(--fs-3);
  color: var(--paper);
}

/* Noelia: "¿el círculo con la X puede ser también el favicon?" —
   se queda con la ✕ (si mostrara el icono del favicon, confundiría con
   el botón que ABRE el panel), pero el círculo lleva ahora el mismo
   anillo dorado del favicon en vez del borde tenue neutro. */
.tu-mapa-panel__close {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border: 1.5px solid rgba(201, 154, 74, 0.55);
  border-radius: 50%;
  color: var(--paper-dim);
  font-family: var(--font-body);
  font-size: var(--fs-4);
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.tu-mapa-panel__close:hover { border-color: var(--accent, #C99A4A); color: var(--paper); transform: rotate(90deg); }

.tu-mapa-panel__hint {
  font-family: var(--font-body);
  font-size: var(--fs-4);
  color: var(--paper-dim);
  line-height: 1.6;
}

.tu-mapa-panel__empty {
  font-family: var(--font-body);
  font-size: var(--fs-4);
  color: var(--paper-dim);
  padding-block: var(--space-3);
}

.tu-mapa-panel__list {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-1);
}

.tu-mapa-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.85rem 0.6rem 0.85rem 1.1rem;
  text-align: left;
  color: var(--paper-dim);
  border-bottom: 1px solid rgba(245, 241, 232, 0.06);
  transition: background 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
}

.tu-mapa-row:last-child { border-bottom: none; }

/* Marca de "página abierta" al pasar el ratón: una franja fina que
   entra desde el borde izquierdo, en vez de solo un cambio de fondo. */
.tu-mapa-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6rem;
  bottom: 0.6rem;
  width: 2px;
  background: transparent;
  transition: background 0.2s ease;
}

.tu-mapa-row:hover { background: rgba(245, 241, 232, 0.05); color: var(--paper); padding-left: 1.35rem; }
.tu-mapa-row:hover::before { background: var(--paper-dim); }

.tu-mapa-row__estado {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.7em;
  height: 1.7em;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: var(--fs-4);
  transition: border-color 0.2s ease, color 0.2s ease;
}

.tu-mapa-row.is-descubierto .tu-mapa-row__estado { border-color: var(--paper-dim); color: var(--paper); }
.tu-mapa-row.is-descubierto .tu-mapa-row__label { color: var(--paper); }
.tu-mapa-row.is-sospecha .tu-mapa-row__estado { border-color: rgba(201, 154, 74, 0.5); color: var(--accent, #C99A4A); }

.tu-mapa-row__label {
  font-family: var(--font-body);
  font-size: var(--fs-4);
  font-weight: 500;
}

/* Los 3 Mundos conservan su color narrativo también aquí — mismo código
   que ya usa el mapa final (fucsia/azul/dorado). Las 9 áreas de La caja
   se quedan neutras a propósito (ver comentario en tu-mapa.js): no
   todo necesita su propio color, solo lo que ya es parte de la
   identidad de cada Mundo. */
.tu-mapa-row[data-key="diferenciacion"].is-descubierto .tu-mapa-row__label,
.tu-mapa-row[data-key="diferenciacion"].is-sospecha .tu-mapa-row__label { color: #D4147A; }
.tu-mapa-row[data-key="diferenciacion"] .tu-mapa-row__estado { border-color: rgba(212, 20, 122, 0.5); color: #D4147A; }
.tu-mapa-row[data-key="diferenciacion"]:hover::before { background: #D4147A; }

.tu-mapa-row[data-key="conexion"].is-descubierto .tu-mapa-row__label,
.tu-mapa-row[data-key="conexion"].is-sospecha .tu-mapa-row__label { color: #0057FF; }
.tu-mapa-row[data-key="conexion"] .tu-mapa-row__estado { border-color: rgba(0, 87, 255, 0.5); color: #0057FF; }
.tu-mapa-row[data-key="conexion"]:hover::before { background: #0057FF; }

.tu-mapa-row[data-key="seduccion"].is-descubierto .tu-mapa-row__label,
.tu-mapa-row[data-key="seduccion"].is-sospecha .tu-mapa-row__label { color: #C99A4A; }
.tu-mapa-row[data-key="seduccion"] .tu-mapa-row__estado { border-color: rgba(201, 154, 74, 0.5); color: #C99A4A; }
.tu-mapa-row[data-key="seduccion"]:hover::before { background: #C99A4A; }

body.tu-mapa-lock-scroll { overflow: hidden; }

@media (max-width: 640px) {
  .tu-mapa-tab {
    left: 50%;
    right: auto;
    bottom: var(--space-2);
    transform: translateX(-50%);
  }
  /* En móvil la pestaña se centra con translateX(-50%) — el hover/active
     de desktop no puede sustituir ese transform entero, solo sumarle su
     propio desplazamiento, o perdería el centrado. */
  .tu-mapa-tab:hover { transform: translateX(-50%) translateY(-2px); }
  .tu-mapa-tab:active { transform: translateX(-50%) translateY(-1px) scale(0.97); }
  .tu-mapa-panel { width: 100vw; border-left: none; border-top: 1px solid var(--line); top: auto; height: 82vh; transform: translateY(100%); }
  .tu-mapa-panel.is-open { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .tu-mapa-panel { transform: none; opacity: 0; pointer-events: none; }
  .tu-mapa-panel.is-open { opacity: 1; pointer-events: auto; }
}

/* ==========================================================================
   ESCENA 00 — El expediente
   ========================================================================== */

.scene-00 {
  background:
    radial-gradient(circle at 50% 20%, rgba(245,241,232,0.05), transparent 55%),
    var(--ink);
}

/* ---------- Pantalla de inicio (antes de la Escena 00) ---------- */
.scene-hook {
  background: var(--ink);
}

.scene-hook__title {
  /* Nivel 1 — HERO: es la primera frase de todo el sitio, el único
     momento que merece este tamaño. */
  font-size: var(--fs-1);
  /* Sin límite de ancho por caracteres (era 16ch, forzaba el salto de
     línea aunque hubiera sitio de sobra): la frase se queda en una sola
     línea en pantallas normales — solo se parte si el contenedor
     (.scene__inner, min(100% - 3rem, 1100px)) no le cabe entera. */
  max-width: none;
  margin: 0 auto var(--space-4);
}

.scene-hook__sub {
  /* Segunda limpieza: texto de transición bajo el titular — Montserrat,
     no EB Garamond (EB Garamond se reserva para titulares/frases
     protagonistas/nombres de Mundos/el cierre). */
  font-family: var(--font-body);
  /* Nivel 3 — TEXTO NORMAL/DESTACADO, sin tamaño propio. */
  font-size: var(--fs-3);
  /* Normalización definitiva: solo --paper/--paper-dim como colores de
     texto — nada de un tercer gris suelto. */
  color: var(--paper-dim);
  /* Igual que el titular: sin límite de ancho por caracteres (era
     32ch), para que la frase quede en una sola línea siempre que el
     contenedor tenga sitio. */
  max-width: none;
  margin: 0 auto;
}

/* Noelia: "debajo del subtitulo... escribe te explico como evitarlo" —
   tercera línea de la pantalla de inicio, más discreta que el
   subtítulo (un escalón por debajo, como el resto de microtexto de
   transición del sitio), para que no compita con el titular/subtítulo. */
.scene-hook__promise {
  font-family: var(--font-body);
  font-size: var(--fs-4);
  color: var(--paper-dim);
  max-width: none;
  margin: var(--space-2) auto 0;
}

.scene-00__file {
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--paper-dim);
  margin-bottom: var(--space-3);
}

.scene-00__title {
  font-size: clamp(3rem, 11vw, 8rem);
  margin-bottom: var(--space-4);
}

.scene-00__status {
  display: inline-flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: var(--space-5);
}

.scene-00__status-label {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--paper-dim);
}

.scene-00__status-value {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.2rem, 2.6vw, 1.6rem);
  color: var(--paper);
}

/* ==========================================================================
   ESCENA 01 — Bla bla bla
   ========================================================================== */

/* Ya no son "pasos" que se sustituyen — una única composición vertical,
   igual que el resto de escenas largas de la web (mismo patrón que
   .world): pregunta → carrusel → pastillas → "La solución:". */
.scene-01 {
  background: var(--ink);
  flex-direction: column;
  gap: var(--space-4);
  padding-block: var(--space-6);
  text-align: center;
  /* Noelia: "pega más Diferenciación a la solución" (segunda vez) — el
     ajuste de padding anterior no bastaba porque ".scene" (clase base)
     trae min-height:100svh + centrado vertical: aunque bajara el
     padding, ese centrado rellenaba el hueco igual con espacio "sobrante"
     de la propia altura de pantalla. Se desactiva aquí, igual que ya
     hace ".world" — ahora el alto de la escena lo decide su contenido de
     verdad, así el padding sí controla el hueco final. */
  min-height: auto;
}

/* Segundo recorte puntual (ver comentario junto a #world-1): el
   padding-bottom de .scene-01 baja solo aquí, sin tocar --space-6
   (comparte con el padding-top de esta misma escena y con el de otras). */
#scene-01 { padding-bottom: 1.5rem; }

.scene-01__question {
  /* Segunda limpieza: las preguntas pasan a Montserrat (evita que la Q
     mayúscula de EB Garamond llame la atención) — reutilizada también por
     la Escena 02. Nivel 2 — TITULAR DE ESCENA. */
  font-family: var(--font-body);
  font-size: var(--fs-3);
  max-width: 34ch;
  margin-inline: auto;
  /* Espacio de ARRIBA y ABAJO reducidos a propósito (Noelia, por pasos):
     el de abajo, hasta el carrusel, ya bajado a 1rem, se quita del todo
     ("pega más la frase al carrusel") — el único aire que queda ahí es
     el gap compartido de .scene-01, sin margen propio ya. */
  margin-block: 1rem 0;
}

/* Nivel 2 — TITULAR/PREGUNTA: esta clase la reutiliza también la
   pregunta de la Escena 02 ("¿Qué crees que necesita tu negocio?", ver
   index.html) — Escena 02 no se toca en esta pasada, así que el tamaño
   nuevo se aplica SOLO a la instancia de la Escena 01, con un selector
   más específico, en vez de cambiar la regla de arriba (que cambiaría
   también la Escena 02). */
/* Nivel 3 — FRASE DESTACADA, igual que .scene-01__conclusion. */
#scene-01 .scene-01__question {
  font-size: var(--fs-3);
  /* Noelia: "ponlas en negrita" — solo esta instancia (la de la
     Escena 01, "¿Por qué deberían elegirte a ti y no a otro?"), no la
     de la Escena 02 que comparte la misma clase. */
  font-weight: 600;
}

/* Noelia: "la pregunta ... de las pastillas hazla un poco mayor" — la
   pregunta que abre la Escena 02 (justo antes de la lluvia de
   pastillas), un escalón por encima del texto normal (--fs-3) pero sin
   tocar la de la Escena 01 de arriba, que se queda igual. */
#scene-02 .scene-01__question {
  font-size: var(--fs-2);
}

.scene-01__options {
  display: flex;
  /* Noelia: "mejor en una linea" — una sola fila. Con el tamaño reducido
     a 1rem (Noelia: "un poco mas pequeños... en la version web") las 7
     caben en una línea desde ~980px de ancho en adelante (medido); por
     debajo de eso no cabe ni reduciendo más el texto sin que se vuelva
     ilegible, así que a partir de ahí se envuelve en 2-3 líneas más
     pequeñas (ver media queries de .scene-01__option). */
  flex-wrap: nowrap;
  gap: 0.5rem;
  justify-content: center;
  max-width: 100%;
  margin-inline: auto;
  /* Recortado otra vez más (Noelia: "únela más y las pastillas también").
     Vuelto a subir después (Noelia: "separa un poco las pastillas de
     debajo del carrusel") — quedaban demasiado pegadas al carrusel. */
  margin-top: 1.25rem;
}

@media (max-width: 980px) {
  .scene-01__options { flex-wrap: wrap; gap: 0.4rem; }
}

/* De lectura, no interactivas (ya no son <button>): la escena avanza
   sola con el scroll, no hace falta tocar ninguna. Prueba (Noelia: "las
   pildoras se ven demasiado grandes... el texto en negrita y mayuscula
   no le favorece"): mismo tratamiento que ".scene-01__conclusion" ("La
   solución:") — Nivel 3, sin negrita ni mayúsculas, en vez del
   microtexto en pastilla que llevaban antes. */
.scene-01__option {
  padding: 0.35rem 0.8rem;
  /* Noelia: "igualalo al tono de 'Todos dicen lo mismo.'" — vuelve a
     var(--paper-dim), esta vez a propósito (antes había pasado por
     aquí, ver DECIMOTERCERA/DECIMOQUINTA más abajo, en la dirección
     contraria). Borde a juego con el texto, ya no blanco pleno.
     Noelia después: "la linea se puede hacer mas fina, las que caen
     tienen el borde mas fino" — en realidad ambas pastillas ya
     compartían 1px/mismo color; la diferencia es óptica (estas son más
     grandes, así que el mismo 1px se lee más grueso). Baja a un grosor
     sub-pixel (fino de verdad en pantallas retina/HiDPI). */
  border: 0.75px solid var(--paper-dim);
  border-radius: 999px;
  font-family: var(--font-body);
  /* Noelia: "un poco mas pequeños al menos en la version web" — ya no es
     --fs-3 completo (18-20px), un punto por debajo. */
  font-size: 1rem;
  font-weight: 400;
  color: var(--paper-dim);
  white-space: nowrap;
}

/* Noelia: "en la version movil se veian grandisimas" — mismo tratamiento
   (sin negrita, sin mayúsculas) pero más pequeño, ya en 2-3 líneas. */
@media (max-width: 980px) {
  .scene-01__option {
    padding: 0.35rem 0.75rem;
    font-size: 0.95rem;
    white-space: normal;
  }
}

/* ---------- Carrusel de pequeñas webs ficticias ----------
   Mismo mecanismo que el carrusel de tarjetas de masqueia (posición
   central + vecinas + lejanas, click/flechas/swipe), reconstruido con la
   estética propia de esta web (negro/crema, Fraunces+Inter, sin color
   narrativo — el color no aparece hasta la Escena 05). Cada tarjeta imita
   una mini-web real (nav + hero + promesas + CTA) de un sector distinto,
   pero repite casi las mismas 4 promesas siempre: esa repetición es el
   punto de la escena. Es lo primero de la composición (ver index.html):
   debajo van las pastillas de palabras, la pregunta y "La solución:". */
.scene-01__carousel {
  position: relative;
  width: 100%;
  height: min(60vh, 420px);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Recortado más (Noelia: "únela más al carrusel") — el margen propio de
     la pregunta ya está a 0, así que el único hueco que quedaba era el
     gap compartido de .scene-01; este negativo tira del carrusel hacia
     arriba sin tocar ese gap (que también separa otros pares de la
     escena). */
  margin-top: -0.75rem;
}

.scene-01__carousel-track {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Cada tarjeta es una captura real de una web completa (nav, hero,
   etiquetas) proporcionada como imagen — pero la captura en sí es solo la
   página, sin ningún marco: sin esta barra no se lee como "una web
   abierta en un ordenador", solo como una foto recortada flotando. La
   barra (.bizcard__chrome) la añade scene-01.js delante de cada <img> —
   3 puntos (DECIMOSEXTA CORRECCIÓN: ahora sí en rojo/amarillo/verde,
   ver más abajo — pedido explícito, antes neutros a propósito) — para
   dar esa lectura de "ventana de navegador" sin depender de que la
   imagen ya traiga su propio marco. */
.bizcard {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(80vw, 480px);
  border-radius: 6px;
  overflow: hidden;
  background: #F5F1E8;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: transform 0.5s var(--ease-out), opacity 0.4s ease;
  will-change: transform, opacity;
}

.bizcard__chrome {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 0.8rem;
  background: var(--ink-soft);
}

.bizcard__chrome span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--paper-dim);
}

/* DECIMOSEXTA CORRECCIÓN: los 3 puntos pasan a los colores clásicos de
   semáforo de macOS (rojo/amarillo/verde), pedido explícito — la
   barra ya imita una ventana de navegador (ver comentario en
   scene-01.js), así que remata esa lectura en vez de quedarse neutra. */
.bizcard__chrome span:nth-child(1) { background: #FF5F57; }
.bizcard__chrome span:nth-child(2) { background: #FEBC2E; }
.bizcard__chrome span:nth-child(3) { background: #28C840; }

.bizcard__img {
  display: block;
  width: 100%;
  height: auto;
}

.bizcard.is-p0 { transform: translate(-50%, -50%) translateX(0) scale(1); opacity: 1; z-index: 5; cursor: default; }
.bizcard.is-p1 { transform: translate(-50%, -50%) translateX(clamp(220px, 34vw, 340px)) scale(0.82); opacity: 0.4; z-index: 3; }
.bizcard.is-pm1 { transform: translate(-50%, -50%) translateX(clamp(-340px, -34vw, -220px)) scale(0.82); opacity: 0.4; z-index: 3; }
.bizcard.is-p2 { transform: translate(-50%, -50%) translateX(clamp(420px, 52vw, 600px)) scale(0.68); opacity: 0; z-index: 1; }
.bizcard.is-pm2 { transform: translate(-50%, -50%) translateX(clamp(-600px, -52vw, -420px)) scale(0.68); opacity: 0; z-index: 1; }
.bizcard.is-phide { transform: translate(-50%, -50%) scale(0.5); opacity: 0; z-index: 0; pointer-events: none; }

.scene-01__carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.6rem;
  height: 2.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 1.4rem;
  color: var(--paper);
  z-index: 6;
  transition: border-color 0.2s ease, opacity 0.2s ease;
}

.scene-01__carousel-arrow:hover { border-color: var(--paper); }
.scene-01__carousel-arrow--prev { left: 0; }
.scene-01__carousel-arrow--next { right: 0; }

.scene-01__carousel-dots {
  position: absolute;
  bottom: -2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
}

.scene-01__carousel-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--paper-dim);
  transition: background 0.2s ease, transform 0.2s ease;
}

.scene-01__carousel-dot.is-active {
  background: var(--paper);
  transform: scale(1.3);
}

/* Observación breve justo antes de "La solución:" — mismo tratamiento
   (Fraunces cursiva, apagada) que ya usan las reflexiones de Mundo 1
   (.world1__story) y el "lead" del formulario final (.interview__lead)
   para una frase corta que antecede a algo más grande. Menos separación
   de la que da el gap de .scene-01 respecto a "La solución:": se leen
   como una pareja (observación → solución), no como dos ideas sueltas. */
.scene-01__insight {
  /* Segunda limpieza: observación de transición ("Todos dicen lo
     mismo.") — Montserrat. */
  font-family: var(--font-body);
  /* Nivel 3 — FRASE DESTACADA */
  font-size: var(--fs-3);
  color: var(--paper-dim);
  margin-bottom: calc(-1 * var(--space-4) + var(--space-2));
}

/* Ya no es un div contenedor con un <p> dentro — la clase vive
   directamente en el <p> ("La solución:"), como el resto de textos
   .reveal-up de esta escena (ver index.html). */
.scene-01__conclusion {
  /* Segunda limpieza: es un texto de transición ("La solución:"),
     no un titular ni una frase protagonista — Montserrat. Nivel 3 —
     FRASE DESTACADA. */
  font-family: var(--font-body);
  font-size: var(--fs-3);
  /* Noelia: "ponlas en negrita". */
  font-weight: 600;
  max-width: 46ch;
  margin-inline: auto;
}

/* ==========================================================================
   DIAGNÓSTICO INICIAL — FASE 1: sacado del recorrido visible (ver nota en
   index.html). Estas reglas se quedan sin usar por ahora, no se borran
   porque el HTML/JS podría reutilizarse más adelante.
   Mismo patrón de "pasos superpuestos" que la Escena 01 (position:absolute
   + .is-active) — fijado en pantalla mientras dura la interacción, por la
   misma razón documentada allí: sin pin, el cambio de paso deja un hueco
   vacío si el scroll ya ha avanzado.
   ========================================================================== */
.scene-diag {
  background: var(--ink);
}

.scene-diag__step {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-3);
  opacity: 0;
  pointer-events: none;
}

.scene-diag__step.is-active {
  opacity: 1;
  pointer-events: auto;
}

.scene-diag__continue {
  margin-top: var(--space-2);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}

.scene-diag__continue.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.scene-diag__eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent-diag, #D9A544);
}

.scene-diag__apertura {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.4rem, 3.4vw, 2.1rem);
  color: var(--paper);
  max-width: 30ch;
  line-height: 1.3;
  white-space: pre-line;
}

.scene-diag__concepto-lead {
  font-size: 0.95rem;
  color: var(--paper-dim);
  margin-top: var(--space-2);
}

.scene-diag__concepto {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5.5vw, 3.4rem);
  color: var(--paper);
  letter-spacing: 0.02em;
  margin-top: 0.3rem;
}

.scene-diag__aviso {
  margin-top: var(--space-3);
  font-size: 0.92rem;
  color: var(--paper-dim);
  line-height: 1.7;
  max-width: 32ch;
  white-space: pre-line;
}

/* ==========================================================================
   ESCENA 02 — La lluvia de herramientas
   ========================================================================== */

.scene-02 {
  flex-direction: column;
  background: var(--ink-soft);
}

.scene-02__prompt-block {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
  pointer-events: none;
}

/* "Parar" salta directo al aftermath para quien no quiera esperar a que
   caigan todas las herramientas (ver scene-02.js). */
.scene-02__stop-btn {
  position: relative;
  z-index: 6;
  margin-top: var(--space-2);
  /* BUG REAL: antes era clicable desde el primer instante (solo la
     opacidad cambiaba al llegar a 12 pastillas) — un toque en esa zona
     antes de que "Parar" apareciera de verdad paraba la lluvia en
     silencio, sin que el botón hubiera llegado a mostrarse pulsando.
     Ahora el hueco existe (para no mover el resto del layout) pero solo
     es clicable una vez visible de verdad. */
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Late latir en cuanto aparece, para que se entienda que es pulsable en
   medio de la lluvia de herramientas cayendo — se para solo al pasar el
   ratón (no compite con la lectura del hover). En dorado (mismo tono que
   el acento de Mundo 3, #C99A4A) en vez del blanco/crema de .btn, para
   que destaque como un aviso/CTA y no como un botón neutro más. */
.scene-02__stop-btn.is-visible {
  pointer-events: auto;
  opacity: 1;
  background: #C99A4A;
  border-color: #C99A4A;
  color: var(--ink);
  animation: stop-btn-pulse 1.6s ease-in-out infinite;
}

.scene-02__stop-btn.is-visible:hover,
.scene-02__stop-btn.is-visible:focus-visible {
  background: transparent;
  color: #C99A4A;
  animation-play-state: paused;
}

@keyframes stop-btn-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(201, 154, 74, 0.55); }
  50% { transform: scale(1.06); box-shadow: 0 0 0 12px rgba(201, 154, 74, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .scene-02__stop-btn.is-visible { animation: none; }
}

/* Noelia: "sigue sin funcionar la version movil... la de web va bien" —
   en dispositivos táctiles (sin ratón, "hover:none") se quita también la
   animación de pulso: ahí no hace falta para avisar de que es pulsable
   (esa señal es para quien pasa el ratón por encima sin querer, algo que
   no existe en táctil) y de paso se elimina cualquier fricción de Safari
   iOS al levantar el dedo sobre un elemento con transform animándose
   (ver también el listener "touchend" añadido en scene-02.js). */
@media (hover: none) {
  .scene-02__stop-btn.is-visible { animation: none; }
}

.scene-02__field {
  position: absolute;
  inset: 0;
  z-index: 3;
}

/* Cada pastilla cae y rebota (ver spawnTool en scene-02.js) — por eso
   position:absolute con top/left en 0 y el resto del posicionamiento por
   transform (más barato de animar). */
.scene-02__tool {
  position: absolute;
  top: 0; left: 0;
  padding: 0.7rem 1.3rem;
  border: 1px solid var(--paper-dim);
  border-radius: 999px;
  background: var(--ink-soft);
  font-family: var(--font-body);
  font-size: var(--fs-4);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper);
  white-space: nowrap;
  will-change: transform;
  cursor: pointer;
}

.scene-02__tool.is-selected {
  border-color: var(--paper);
  background: var(--paper);
  color: var(--ink);
}

.scene-02__aftermath {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  text-align: center;
  opacity: 0;
  pointer-events: none;
}

.scene-02__aftermath.is-visible { opacity: 1; pointer-events: auto; }

.scene-02__aftermath-q {
  font-family: var(--font-body);
  font-size: var(--fs-4);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-dim);
}

.scene-02__aftermath-q--big {
  /* Segunda limpieza: es una pregunta ("¿Qué crees que necesita tu
     negocio?") — Montserrat. Nivel 2 — TITULAR DE ESCENA. */
  font-family: var(--font-body);
  font-size: var(--fs-3);
  color: var(--paper);
}

.scene-02__aftermath-a {
  /* "Ni idea." — remate dramático de la escena. Nivel 1 — HERO. */
  font-family: var(--font-display);
  font-size: var(--fs-1);
}

.scene-02__aftermath-final {
  margin-top: var(--space-3);
  /* Normalización definitiva: fuera de las 4-6 frases protagonista de
     EB Garamond — pasa a Montserrat. Nivel 3 — TEXTO NORMAL/DESTACADO. */
  font-family: var(--font-body);
  font-size: var(--fs-3);
  color: var(--paper);
}


/* ==========================================================================
   ESCENA — La lavadora
   La imagen es una composición ya terminada (texto, lavadora, suelo,
   espacio negativo, encuadre) — esta escena es solo un contenedor negro
   que la muestra COMPLETA, nunca recortada. Sin JS, sin .reveal-up, sin
   marco ni overlay. min-height:auto (anula el 100svh de `.scene`): la
   sección mide lo que mida la imagen, no una pantalla entera forzada —
   si forzara 100svh, la imagen (más ancha que alta) quedaría con aire de
   sobra arriba/abajo en vez de simplemente ocupar el alto que le
   corresponde a su proporción real. */
.scene-lavadora {
  min-height: auto;
  padding-block: var(--space-5);
  background: var(--ink);
}

/* width:100% + height:auto (nunca object-fit:cover) conservan la
   proporción real del archivo en cualquier ancho — en pantallas
   estrechas la imagen simplemente se ve más pequeña, nunca recortada. */
.scene-lavadora__img {
  width: min(94vw, 1600px);
  height: auto;
  display: block;
  object-fit: contain;
  margin-inline: auto;
}

/* Noelia: "la imagen de la lavadora en la version movil se podia ver un
   poco mayor" — 94vw ya era casi todo el ancho; en móvil sube a 100vw
   (a pantalla completa, sin margen lateral) sin tocar el tamaño en
   escritorio. */
@media (max-width: 640px) {
  .scene-lavadora__img {
    width: 100vw;
  }
}

/* ==========================================================================
   ESCENA 03 — La caja
   ========================================================================== */

/* BUG REAL que arregla este overflow: .scene (la clase base compartida
   por todas las escenas) trae overflow:hidden — necesario en otras
   escenas para recortar elementos decorativos, pero aquí rompía el
   position:sticky de cada .scene-03__block: cualquier ancestro con
   overflow distinto de "visible" se convierte en el "contenedor de
   scroll" de referencia para un descendiente sticky, y como .scene-03
   nunca desplaza su propio scroll interno (es el documento el que se
   desplaza), las tarjetas se quedaban clavadas en su posición estática
   de siempre en vez de seguir a la pantalla — confirmado con Playwright
   en la versión original de esta escena (el contador subía con
   normalidad al bajar, pero la pila no se veía en ningún fotograma) y
   sigue aplicando igual ahora que cada oportunidad es su propio bloque
   sticky. */
.scene-03 {
  background: var(--ink);
  min-height: 100svh;
  flex-direction: column;
  gap: var(--space-5);
  padding-top: var(--space-6);
  /* Recortado (Noelia: "acortar el espacio entre Quito ruido. y Cómo dejé
     de intentar meterme donde no cabía.") — junto con el padding-top de
     #scene-04b, mismo motivo. Ya no depende de --space-6 (compartida). */
  padding-bottom: 1rem;
  overflow: visible;
}

/* BUG REAL (encontrado en FASE 5A auditando el recorrido completo): a
   este elemento le faltaba pointer-events:none en su estado base — así
   que, aunque invisible (opacity:0) desde el principio del sitio, seguía
   siendo "position:fixed" y capturaba clics en el centro superior de la
   pantalla EN TODA LA WEB, incluso en escenas que nada tienen que ver con
   La caja. Confirmado con Playwright: un clic en el botón "Mira qué pasa"
   de la Escena 01 (al principio del todo) quedaba interceptado por este
   elemento. */
.scene-03__counter {
  position: fixed;
  top: var(--space-3);
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  z-index: 20;
  padding: 0.6rem 1.2rem;
  border: 1px solid rgba(11, 11, 12, 0.15);
  border-radius: 999px;
  /* Fondo claro en vez de oscuro: el rosa (y el azul del recuadro de
     abajo) se leían débiles sobre negro — sobre todo el azul saturado,
     que da poco contraste de luminosidad en fondos oscuros. Sobre claro
     ambos colores se ven nítidos. */
  background: rgba(245, 241, 232, 0.92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #D4147A;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* pointer-events se queda en "none" también cuando está visible — este
   contador es solo informativo, no tiene ningún listener de clic. */
.scene-03__counter.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

.scene-03__counter strong {
  color: #D4147A;
  font-weight: 700;
  font-size: 1.05rem;
}

/* FASE 21 — se cambia otra vez SOLO la mecánica (nada de diseño nuevo
   aquí: las 9 fichas son imágenes ya terminadas, ver el comentario en
   index.html). "Piensa literalmente en 9 fotografías impresas sobre una
   mesa: voy deslizando una encima de otra y ninguna deja de existir" —
   ninguna versión "abierta"/"cerrada", ningún crossfade, ningún cambio
   de tamaño: el efecto de ficha cerrada es pura OCLUSIÓN física (la
   siguiente tapa casi toda la anterior), no una transformación de la
   ficha en sí.

   100% CSS, sin GSAP — no hace falta: no hay nada que suavizar aparte
   del scroll nativo del navegador (que ya es "suave" por Lenis, como en
   toda la web). Las 9 están en flujo normal desde el principio (nada de
   display:none ni fade-in de entrada) y cada una es su propio
   "position:sticky" con su propio "top" — el mismo mecanismo de la
   primerísima versión de esta escena, muchas fases atrás. */
.scene-03__stack {
  position: relative;
  width: min(1100px, 94vw);
  margin-inline: auto;
  padding-top: var(--space-5);
  /* Colchón tras la última ficha antes de entrar en "sobre mí" — el
     aprieto real entre fichas (ver el "BUG REAL" en .scene-03__block más
     abajo, en margin-bottom) no se arregla aquí.
     Recortado de nuevo (Noelia: "reduce el espacio entre mi foto y las
     oportunidades", dos veces) — ya no depende de --space-6 (compartida),
     para poder bajarlo sin tocar el padding de otras escenas. */
  padding-bottom: 0.5rem;
}

/* FASE 24 — cada trío (01-03, 04-06, 07-09) vive dentro de su propio
   .scene-03__group, para que la 04 no sustituya a la 01 en plena pila
   (reutilizan el mismo top:30px por diseño, para no acumular las 9
   franjas a la vez) — el grupo 01-03 tiene que desengancharse del todo
   antes de que el siguiente empiece a acercarse a esa misma posición.

   FASE 25/26 — el margen en sí (70vh → 12vh → 3vh) se reduce cada vez
   más, solo el ritmo: "no necesito una pausa visual entre grupos, el
   propio cambio de fichas ya crea el respiro". Con que el grupo entero
   se desenganche del todo (aunque sea con muy poco margen) basta para
   que no se sustituyan entre sí — eso lo da tener contenedores
   separados, no el tamaño del margen. */
.scene-03__group {
  position: relative;
}

.scene-03__group:not(:last-child) {
  margin-bottom: 3vh;
}

/* "position:sticky" por ficha — se queda fija en pantalla al llegar
   arriba, sin pin de GSAP y sin retener el scroll en ningún momento (el
   scroll de rueda/trackpad se mueve exactamente igual que siempre). Las
   imágenes ya son rectángulos 16:9 con las esquinas redondeadas y el
   borde de color pintados dentro del propio archivo — por eso aquí no
   hace falta ni radio ni borde aparte.

   FASE 22 — ajuste de tamaño: "las fichas son demasiado grandes... en
   desktop quiero que cada imagen ocupe aprox. 65-70% del ancho
   disponible, con un max-width razonable, centrada — debe verse aire
   negro alrededor". 68% + max-width, con margin-inline:auto para
   centrarla dentro de .scene-03__stack (que ya mide 94vw como mucho, así
   que el aire negro se ve tanto a los lados de la ficha como alrededor
   de todo .scene-03__stack). */
.scene-03__block {
  position: sticky;
  width: 68%;
  max-width: 640px;
  margin-inline: auto;
  line-height: 0; /* evita el hueco fantasma bajo la imagen inline */
  /* BUG REAL evitado con este margen: sin "aire" de sobra entre una
     ficha y la siguiente EN EL FLUJO NORMAL (no solo al final de toda
     la pila), el position:sticky de las fichas centrales se quedaba sin
     recorrido propio en cuanto había unas cuantas por delante — varias
     fichas seguidas se quedaban clavadas en el mismo punto exacto en
     vez de apilarse una a una (confirmado con Playwright:
     getBoundingClientRect() daba el mismo top para 4-6 fichas seguidas
     a partir de la mitad de la pila, mucho antes del final; un padding
     extra solo al final de .scene-03__stack no lo arreglaba, porque el
     aprieto no era "quedarse sin sitio al final", era quedarse sin
     sitio ENTRE cada ficha y la siguiente). Este margen no se nota
     visualmente en la pila ya apilada (una ficha "sticky" ignora su
     propio margen para su posición mientras está fija — solo cuenta
     para el cálculo de cuánto hay que scrollear hasta la siguiente). */
  /* Noelia: "el espacio entre las fichas... que queda libre cuando las
     mueves se puede reducir" — bajado de 65px (probado con margin:0px
     que el "BUG REAL" de más arriba no reaparece hasta un valor mucho
     más bajo; se deja un margen de sobra por seguridad, no al límite). */
  margin-bottom: 35px;
}

/* BUG REAL evitado con "aspect-ratio": sin él, el navegador no reserva
   ningún alto para la imagen hasta que termina de cargar (con
   loading="lazy" eso ocurre bastante después, ya que están muy abajo en
   la página) — mientras tanto cada bloque medía 0px de alto, así que
   TODA la pila se apilaba en apenas un puñado de píxeles y arruinaba el
   posicionado sticky de las siguientes fichas. Con el ratio real
   (1672×941, el tamaño exacto de los 9 PNG) el alto queda reservado
   desde el primer pintado, cargue la imagen cuando cargue. */
.scene-03__block img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1672 / 941;
  /* Noelia: prueba de una nueva oportunidad 06 con proporción distinta
     a las otras 8 (1536×1024 en vez de 1672×941) — object-fit:cover
     recorta en vez de deformar cuando la proporción no coincide exacto
     con la caja. Para las otras 8 (proporción idéntica a la caja) esto
     no cambia nada: cover y el comportamiento por defecto dan el mismo
     resultado cuando ya encajan perfectas. */
  object-fit: cover;
}

/* FASE 22 — franja mucho más fina: "no uses top separados por 140px,
   usa base + índice×franja, base≈30px, franja≈50px" — así, con las
   fichas ya más pequeñas, cada anterior solo deja ver una franja de
   ~50px (el número/borde superior) en vez de un tercio entero de la
   imagen.

   FASE 23 — el "top" ya no crece sin parar por las 9: se repite en
   ciclos de 3 (30px / 80px / 130px, el mismo paso de siempre) — cada
   trío (01-03, 04-06, 07-09) usa exactamente los mismos tres valores.

   FASE 24 — estos 3 valores ahora son POR GRUPO, no globales: como cada
   trío vive dentro de su propio .scene-03__group (ver más arriba, con
   separación de sobra entre uno y el siguiente), la 04 no vuelve a
   alcanzar "top:30px" hasta que el grupo 01-03 entero ha salido ya de la
   pantalla — así que ya no "sustituye" a la 01 en plena pila, sino que
   empieza su propio trío desde cero, exactamente con la misma mecánica
   que ya funcionaba entre 01 y 03. Dentro de cada grupo, el
   comportamiento es idéntico a como ya era: la ficha nueva comparte el
   "top" de la anterior de su mismo puesto y lleva más z-index (siempre
   creciente, sin tocar), así que la tapa del todo — 0px de franja, no un
   fade ni un cambio de opacidad, pura oclusión física. Ninguna ficha
   sale del DOM ni cambia de opacity/display — sigue estando ahí debajo,
   física y permanentemente. */
.scene-03__block[data-piece="01"] { top: 30px; z-index: 1; }
.scene-03__block[data-piece="02"] { top: 80px; z-index: 2; }
.scene-03__block[data-piece="03"] { top: 130px; z-index: 3; }
.scene-03__block[data-piece="04"] { top: 30px; z-index: 4; }
.scene-03__block[data-piece="05"] { top: 80px; z-index: 5; }
.scene-03__block[data-piece="06"] { top: 130px; z-index: 6; }
.scene-03__block[data-piece="07"] { top: 30px; z-index: 7; }
.scene-03__block[data-piece="08"] { top: 80px; z-index: 8; }
.scene-03__block[data-piece="09"] { top: 130px; z-index: 9; }

@media (max-width: 640px) {
  /* El ajuste de tamaño (68% + max-width) es explícitamente "en
     desktop" — en móvil la ficha se queda a (casi) todo el ancho, ya de
     por sí bastante más pequeña que en desktop en términos absolutos.
     Mismo mecanismo de franja fina y mismo ciclo de 3 posiciones, con
     base/paso algo menores (la ficha en sí también mide menos de alto
     en una pantalla estrecha). */
  .scene-03__block {
    width: 92%;
    max-width: none;
    margin-bottom: 46px;
  }
  .scene-03__block[data-piece="01"] { top: 20px; }
  .scene-03__block[data-piece="02"] { top: 64px; }
  .scene-03__block[data-piece="03"] { top: 108px; }
  .scene-03__block[data-piece="04"] { top: 20px; }
  .scene-03__block[data-piece="05"] { top: 64px; }
  .scene-03__block[data-piece="06"] { top: 108px; }
  .scene-03__block[data-piece="07"] { top: 20px; }
  .scene-03__block[data-piece="08"] { top: 64px; }
  .scene-03__block[data-piece="09"] { top: 108px; }
}

.scene-03__outro {
  /* Recortado junto con .scene-03__stack (ver comentario ahí) — ya no
     depende de --space-4 (compartida). */
  padding-top: 0.5rem;
}

/* Dos columnas: foto a la izquierda, texto a la derecha — como en la
   referencia. En pantallas estrechas se apilan. */
.scene-03__bio {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  max-width: 900px;
  margin: var(--space-3) auto 0;
  text-align: left;
}

/* Foto vertical (no cuadrada) + nombre/rol debajo. */
.scene-03__photo {
  flex: 0 0 auto;
  width: min(38vw, 280px);
}

.scene-03__photo-frame {
  aspect-ratio: 3 / 4;
  border-radius: 4px;
  overflow: hidden;
}

.scene-03__photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.scene-03__photo-caption {
  margin-top: var(--space-2);
  text-align: left;
  font-family: var(--font-body);
  /* Nivel 5 — microtexto/etiqueta (nombre + rol bajo la foto) */
  font-size: var(--fs-4);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--paper);
}

.scene-03__photo-caption span {
  display: block;
  margin-top: 0.25rem;
  /* Segunda limpieza: microcopy (rol bajo un nombre) — Montserrat. */
  font-family: var(--font-body);
  font-size: var(--fs-4);
  letter-spacing: 0;
  text-transform: none;
  color: var(--paper-dim);
}

.scene-03__bio-content {
  flex: 1 1 auto;
  min-width: 0;
}

.scene-03__bio-heading {
  /* EB Garamond Regular 400 — límite estricto de la limpieza tipográfica
     (EB Garamond nunca lleva negrita en este sitio). */
  font-family: var(--font-display);
  /* Nivel 3 — FRASE DESTACADA: saludo de apertura de la bio, con
     carácter propio pero sin competir con el titular/pregunta de la
     escena (que aquí no existe: esta es la "gran conclusión" tenue de
     La caja). Noelia: "hazlo un poco mas pequeño" — ya no es el
     --fs-2 completo (30-34px), un escalón por debajo. */
  font-size: clamp(1.5rem, 2.3vw, 1.75rem);
  line-height: 1.15;
  /* El recorte anterior (0.4rem) dejaba "Hola. Esta soy yo..." pegado a
     "Podría haberte enseñado..." — Noelia: "sepáralas, están super
     juntas". Subió a un punto medio (1rem) y luego, con eso todavía
     poco, a esto — Noelia: "separa entre si estas dos frases". Ya no
     depende de --space-3 (compartida). */
  margin: 0 0 2.5rem;
}

.scene-03__bio-line {
  /* Segunda limpieza: es narrativa/explicación ("Podría haberte
     enseñado...") — Montserrat. */
  font-family: var(--font-body);
  /* Nivel 4 — TEXTO NARRATIVO */
  font-size: var(--fs-3);
  line-height: 1.5;
  color: var(--paper);
  /* Noelia: "separa yo primero de la frase de encima" — 0.25rem las
     dejaba prácticamente pegadas a "Yo primero:". */
  margin: 0 0 var(--space-3);
}

.scene-03__bio-italic {
  /* Segunda limpieza: "Yo primero:" es texto de transición antes de la
     lista de verbos — Montserrat. */
  font-family: var(--font-body);
  /* Nivel 3 — FRASE DESTACADA */
  font-size: var(--fs-3);
  color: var(--paper-dim);
  margin: 0 0 0.4rem;
}

.scene-03__bio-verbs {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-3);
}

.scene-03__bio-verbs li {
  /* Segunda limpieza: es una lista (Pregunto/Escucho/...) — Montserrat. */
  font-family: var(--font-body);
  /* Nivel 4 — TEXTO NARRATIVO */
  font-size: var(--fs-3);
  color: var(--paper-dim);
  line-height: 1.7;
}

@media (max-width: 720px) {
  .scene-03__bio { flex-direction: column; text-align: center; }
  .scene-03__photo { width: min(60vw, 280px); margin-inline: auto; }
}

/* ==========================================================================
   ESCENA 04b — Noelia (ver comentario en index.html): las frases se van
   acumulando según bajas, en vez de sustituirse. Sin pin: la sección
   crece tanto como haga falta y cada frase solo usa el scroll-reveal
   genérico de la web (".reveal-up", gestionado en main.js).
   ========================================================================== */

.scene-04b {
  background: var(--ink);
  flex-direction: column;
  gap: var(--space-5);
  /* Arriba, recortado junto con el padding-bottom de .scene-03 (ver
     comentario ahí). Abajo se queda en --space-6, sin tocar. */
  padding-top: 1rem;
  padding-bottom: var(--space-6);
  padding-inline: var(--space-3);
  min-height: 100svh;
}

.scene-04b__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Suficiente aire entre frases para que se revelen una a una al
     scrollear (no todas de golpe) — pero no tanto como para que, una vez
     reveladas, dejen de leerse como un texto seguido.
     VIGÉSIMA SEGUNDA CORRECCIÓN: era 16vh — con las ~19 líneas que tiene
     ahora la escena (antes eran solo 4-5), ese aire se acumulaba en
     muchísimo espacio vacío total. Se reduce a la mitad: sigue
     revelándose una a una sin problema (probado), solo que el
     recorrido pesa mucho menos. */
  gap: 8vh;
  /* width:100% es necesario: sin él, este contenedor se dimensiona al
     ancho "preferido" de su hijo más ancho (la fila de pastillas, que
     preferiría todo su ancho sin partirse) y se sale de la pantalla en
     móvil, aunque esa fila tenga overflow-x propio. Con width:100% se
     ciñe al espacio real disponible, y max-width solo lo limita por
     arriba en pantallas grandes.
     VIGÉSIMA PRIMERA CORRECCIÓN: era max-width:46ch — pero "ch" se
     calcula con el tamaño de letra de ESTE contenedor (16px, el body
     no tiene tamaño propio aquí), no con el de sus hijos más grandes
     (el PD, ~20px) — daba un ancho real (~464px) bastante más estrecho
     de lo que parecía, y ahí es donde "te entiendo." se soltaba solo a
     su línea aunque el propio PD ya llevara max-width de sobra: el
     cuello de botella real era este contenedor padre, no el PD. Un
     valor fijo en rem evita esa trampa de unidades. */
  width: 100%;
  max-width: 40rem;
  margin-inline: auto;
}

/* Nivel 4 — TEXTO NARRATIVO, y en Inter (sans), no en Fraunces: esta es
   una historia para LEER, no una sucesión de titulares — el problema
   real que se corrige aquí era exactamente ese, 17 frases seguidas al
   tamaño/tipografía de "momento importante" se leían como 17 titulares
   consecutivos en vez de un relato. Interlineado 1.55 (dentro del rango
   1.45–1.6 pedido), algo más suelto que el resto de la web porque aquí
   sí es lectura seguida de verdad. */
.scene-04b__line {
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--fs-3);
  line-height: 1.55;
  color: var(--paper-dim);
}

/* "Cómo dejé de intentar meterme donde no cabía." — frase de apertura,
   en blanco pleno (var(--paper)) en vez del gris del resto de líneas
   narrativas, pedido explícito. */
#scene04bOpening {
  /* Mismo tipo de letra que "Hola. Esta soy yo..." (.scene-03__bio-heading)
     — EB Garamond Regular (sin negrita, límite estricto de la limpieza
     tipográfica) — para que se distinga claramente del resto del texto
     narrativo de esta escena, que va en Montserrat. */
  font-family: var(--font-display);
  /* Mismo tamaño que "Hola. Esta soy yo..." también (--fs-3) — completa
     el paralelismo con esa frase, un poco mayor que el resto del texto
     narrativo de esta escena (--fs-4). */
  font-size: var(--fs-2);
  color: var(--paper);
}

/* Las 3 únicas frases de esta escena que se reservan para más nivel —
   los giros/remates reales de la historia, no cualquier frase corta.
   Vuelven a Fraunces (serif) porque SÍ son "conclusiones emocionales":
   el contraste con el resto en Inter es la señal, sin tocar el color
   (se queda en --paper-dim, igual que las demás líneas).

   Tamaño propio, no los niveles genéricos --fs-2/--fs-3.

   SEGUNDA CORRECCIÓN: "Hasta que un día..." baja con el mismo ~27,5%
   que el resto de Niveles 1/2/3 (no está en la lista de excepciones);
   "Eran mis herramientas." y "Veo todo lo que podría llegar a ser."
   bajan aparte, solo ~20%, tal como se pidió explícitamente para esas
   dos frases (no el 25–30% general). */
/* Segunda limpieza: "todo el relato largo debe ser Montserrat, reserva
   EB Garamond para 'Cómo dejé de intentar meterme donde no cabía.' y 'Veo
   todo lo que podría llegar a ser.'" — "Hasta que un día..." no está en
   esa lista de excepciones, pasa a Montserrat. .scene-04b__line--l2
   cubre las dos frases de ese giro final ("Eran mis herramientas."/"Veo
   todo lo que podría llegar a ser.", misma clase, no se puede separar
   sin tocar estructura) — se queda en EB Garamond como frase protagonista
   del cierre. */
.scene-04b__line--l3 {
  font-family: var(--font-body);
  font-size: var(--fs-3);
}

/* Noelia: "ponlas igual que el resto del texto pero en negrita, se ven
   raras" — vuelve a Montserrat, mismo tamaño/color que .scene-04b__line
   (ambas clases están en el mismo elemento, así que solo hace falta
   fijar aquí lo que cambia: el peso). El protagonismo de estas dos
   frases se marca ahora con negrita, no con tamaño/tipografía/cursiva
   distintas. */
.scene-04b__line--l2 {
  font-weight: 600;
}

/* Posdata: tono más íntimo, dirigido directamente a quien lee — más
   pequeña e itálica que el resto del relato (que ya es grande e intenso
   en sus últimas líneas), para que se lea como un aparte, no como una
   frase más del mismo tamaño. En blanco (var(--paper)), no apagada. */
.scene-04b__ps {
  text-align: center;
  /* Segunda limpieza: parte del relato largo — Montserrat (no está en
     la lista de excepciones de esta escena). */
  font-family: var(--font-body);
  /* Nivel 4 — TEXTO NORMAL, algo más pequeña que el relato a propósito
     (aparte íntimo). */
  font-size: var(--fs-3);
  line-height: 1.6;
  color: var(--paper);
  /* VIGÉSIMA CORRECCIÓN: 34ch partía "te entiendo." solo en su propia
     línea (la primera frase, más larga que antes con el nuevo tamaño,
     ya no cabía entera) — sube a 46ch, igual que .scene-04b__text, para
     que esa frase quede en un solo párrafo. */
  max-width: 46ch;
  margin-inline: auto;
}

/* 6 etiquetas (FASE 4C, antes 3) — a propósito NO se encogen para
   intentar que quepan todas: mejor tamaño legible + scroll horizontal
   suave que letra diminuta. El desvanecido de los bordes (mask-image)
   insinúa que hay más etiquetas fuera de vista sin decirlo. */
.scene-04b__orbit {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  /* min-width:0 es necesario: sin él, un hijo flex con overflow-x nunca
     se encoge por debajo del ancho de su contenido — y en vez de
     deslizarse él solo, ensancha TODA la columna (y descentra el resto
     del texto de la escena). */
  justify-content: center;
  gap: 0.6rem;
  min-width: 0;
  /* Recorta el hueco arriba/abajo de las pastillas (Noelia: "hay muchos
     espacios vacíos" ahí) sin tocar el gap de 8vh que separa el resto de
     párrafos de la escena — solo aquí, con un margen negativo. */
  margin-block: -4vh;
  /* "Escapa" del max-width:46ch del texto que la rodea (pensado para
     prosa, no para 6 pastillas en fila) y usa el ancho de pantalla
     completo — si no, en pantallas anchas de sobra le faltaba sitio
     igual que en las estrechas. */
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
  overflow-x: auto;
  padding-block: 0.6rem; /* aire para que el flotado no recorte el borde */
  padding-inline: 6vw; /* deja ver un trozo de la etiqueta siguiente en los bordes */
  /* Desvanece los extremos del carril — la etiqueta que asoma a medias
     se lee "cortada a propósito", no como un error de layout. */
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.scene-04b__label {
  /* Noelia: "dejalas exactamente igual" — mismo padding que
     .scene-01__option (antes 0.4rem/0.9rem, quedaban ~3px más altas). */
  padding: 0.35rem 0.8rem;
  /* Noelia: "ponle el borde un poco mas grueso... para que destaquen
     con el texto" — más grueso que el resto de pastillas de lectura
     del sitio (0.75px), a propósito: estas son blancas (var(--paper)),
     no apagadas como las demás, así que el borde también puede pesar
     un poco más sin desentonar. */
  border: 1.5px solid var(--paper);
  border-radius: 999px;
  font-family: var(--font-body);
  /* Noelia: mismo tratamiento que el resto de pastillas de lectura del
     sitio (".scene-01__option") — sin negrita ni mayúsculas, un pelín
     más pequeñas que el texto normal. */
  font-size: 1rem;
  font-weight: 400;
  white-space: nowrap;
  color: var(--paper);
  flex-shrink: 0;
  /* Flotado asíncrono: sube/baja y gira un poco, sin sincronía entre
     etiquetas (duración y retraso distintos por posición) — se leen como
     que ninguna termina de asentarse, ninguna "es LA respuesta". Puro
     CSS: hereda gratis la regla global que fuerza
     animation-duration:0.01ms bajo prefers-reduced-motion, sin tocar JS. */
  animation: label-float 5s ease-in-out infinite;
}

@keyframes label-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-5px) rotate(-1.2deg); }
}

.scene-04b__label:nth-child(1) { animation-duration: 4.6s; animation-delay: 0s; }
.scene-04b__label:nth-child(2) { animation-duration: 5.4s; animation-delay: -1.1s; }
.scene-04b__label:nth-child(3) { animation-duration: 4.9s; animation-delay: -2.6s; }
.scene-04b__label:nth-child(4) { animation-duration: 5.8s; animation-delay: -0.6s; }
.scene-04b__label:nth-child(5) { animation-duration: 4.3s; animation-delay: -3.4s; }
.scene-04b__label:nth-child(6) { animation-duration: 5.1s; animation-delay: -1.8s; }
.scene-04b__label:nth-child(7) { animation-duration: 4.8s; animation-delay: -2.2s; }

/* ==========================================================================
   ESCENA 05 — LOS CUATRO MUNDOS
   Primera vez que aparece color, a propósito, tras cuatro escenas en
   negro/crema. Cada mundo es su propia sección de pantalla completa con
   su propio acento — el cambio de color ES la transición.
   ========================================================================== */

/* CORRECCIÓN DE NAVEGACIÓN — se probó una versión con .world como PISTA
   alta (hasta 320vh) + .world__scrub sticky por dentro, con el timeline
   de scene-05.js atado a scrub. Noelia: generaba demasiado espacio negro
   y seguía sintiéndose como "esperar a que pase algo". Vuelta al modelo
   natural: .world mide solo su contenido (min-height:auto — el mismo
   "BUG REAL" de siempre: `.scene` fija min-height:100svh a TODAS las
   escenas, bien para las que llenan una pantalla, pero el contenido de
   estos Mundos es mucho más corto; con min-height:auto la escena mide
   justo su contenido + el padding de arriba, igual que la Escena 01) y
   cada frase es su propio ".reveal-up" (mecanismo genérico de main.js):
   aparece sola, permanentemente, en cuanto entra en pantalla al bajar —
   nunca varias a la vez, nunca con espacio vacío de por medio. */
.world {
  flex-direction: column;
  gap: var(--space-4);
  padding-block: var(--space-6);
  text-align: center;
  position: relative;
  min-height: auto;
}

/* CUARTA CORRECCIÓN: fondo negro (var(--ink), el mismo del resto del
   sitio — Escena 03/lavadora) en vez del tinte de color grande que
   llevaba cada Mundo — el color narrativo se queda solo en texto/bordes
   vía --accent, no de fondo. */
.world--1 { --accent: #D4147A; --accent-soft: rgba(212, 20, 122, 0.14); background: var(--ink); }

/* Recortado a propósito (Noelia: "pega más Diferenciación a la
   solución", dos veces) — .scene-01 y este Mundo son <section> distintas,
   así que sus dos padding-block (--space-6 cada una) se suman entre "La
   solución:" y "Diferenciación". Solo el de arriba de este Mundo y el de
   abajo de .scene-01 bajan (ver #scene-01 más abajo), sin tocar la
   variable compartida (que también separa otras muchas cosas). */
#world-1 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.world--2 { --accent: #0057FF; --accent-soft: rgba(0, 87, 255, 0.14); background: var(--ink); }

/* Recorte original entre "Lo que cuentas cuenta..." (fucsia, cierre de
   Mundo 1) y "Somos. Tenemos. Ofrecemos." (Mundo 2) — Noelia: "reduce
   el espacio entre la frase rosa y somos tenemos ofrecemos". Luego,
   con la línea divisoria añadida ahí — Noelia: "aumenta mas el espacio
   y dejala con los mismos espacios encima y debajo que en conexion" —
   el de arriba vuelve a subir, igual que el de #world-3, para que la
   línea quede rodeada del mismo aire en las dos transiciones. */
#world-2 { padding-top: var(--space-4); padding-bottom: 0.5rem; }
.world--3 { --accent: #C99A4A; --accent-soft: rgba(201, 154, 74, 0.14); background: var(--ink); }

/* Ya no es una etiqueta discreta: se revela como respuesta a una acción
   (Mirar dentro, Sal de tu mundo...), así que pesa más que el resto del
   texto — se lee como la pista/solución, no como un rótulo de fondo. */
.world__eyebrow {
  /* Diferenciación/Conexión/Seducción: una única clase compartida —
     misma fuente, peso, cursiva y tamaño en los tres Mundos, solo cambia
     el color (--accent, por .world--N). Nivel 2 — TÍTULO DE SECCIÓN,
     una de las 4-6 frases protagonista de EB Garamond en toda la web.
     Normalización definitiva: "en escritura normal, no todo mayúsculas"
     — se quita el text-transform. Letter-spacing normal (no es una
     etiqueta/botón). */
  font-family: var(--font-display);
  font-size: var(--fs-2);
  font-weight: 400;
  font-style: italic;
  color: var(--accent);
}

/* "Seducción" cierra Mundo 3 dentro de world3RevealText, junto a las 2
   frases de cierre — más separada de "...cómo la percibes." que el gap
   normal entre esas frases, para que se lea claramente como el cierre
   de la escena y no como una línea más de la serie.
   Auditoría de coherencia (Noelia: "creamos una coherencia con los
   espacios de esta parte de la web") — "Conexión" cierra Mundo 2 con
   40px de aire por encima (el gap estándar entre bloques, var(--space-4));
   "Seducción" vive un nivel más adentro (dentro de .world3__reveal-text,
   gap 24px, var(--space-3)), así que este margin-top ya no es "porque sí"
   sino el empujón exacto que le falta para llegar a esos mismos 40px
   (24 + 16 = 40) — antes eran 24 + 24 = 48, un poco más que Conexión sin
   motivo. */
#world3Eyebrow { margin-top: 1rem; }

/* Noelia: "es necesario que se vea que es otra seccion" — marca el
   arranque de Mundo 3 sin usar un icono/logo (eso introduciría un
   elemento nuevo, ajeno al resto de transiciones entre Mundos, que ya
   se distinguen por color narrativo). Una línea corta centrada, en el
   color de este Mundo (--accent = dorado aquí), igual de discreta que
   la del pie de página. */
.world__divider {
  width: 40px;
  height: 1px;
  margin: 0 auto 1.75rem;
  /* Noelia: "dorado siempre" — color fijo en las tres transiciones
     entre Mundos, no el --accent de turno (que aquí sería azul en
     Conexión, fucsia en Diferenciación). Mismo dorado que Seducción. */
  background: #C99A4A;
  opacity: 0.5;
}

.world__question {
  /* Segunda limpieza: es una pregunta (¿Y tu cliente?/¿Cuál te gusta
     más?/las del formulario) — Montserrat, evita la Q mayúscula de
     EB Garamond. Nivel 2 — TITULAR DE ESCENA. */
  font-family: var(--font-body);
  font-size: var(--fs-3);
  max-width: 24ch;
  margin-inline: auto;
}

/* "¿Y tu cliente?" (Mundo 2) se mantiene en el tamaño que tenía antes de
   la pasada anterior — instrucción explícita de "mantener". */
/* OCTAVA CORRECCIÓN: las tres ("La solución:", "¿Y tu cliente?" y
   "¿Cuál te gusta más?") comparten tamaño y tipo — EB Garamond Regular
   400, Nivel 3, sin peso ni cursiva propios (lo fija la base). */
#world-2 .world__question {
  font-size: var(--fs-3);
  /* Noelia: "ponlas en negrita" — solo esta ("¿Y tu cliente?"), no las
     otras dos preguntas de Mundo 1 que comparten la misma clase base. */
  font-weight: 600;
}

/* "¿Cuál te gusta más?" — CUARTA CORRECCIÓN: ahora sí baja, ~17,5%
   (dentro del 15–20% pedido) desde ese mismo tamaño de referencia. */
/* OCTAVA CORRECCIÓN: mismo tamaño que #world-2 .world__question y
   .scene-01__conclusion — ver comentario junto a #world-2. */
#world-3 .world__question {
  font-size: var(--fs-3);
  font-weight: 600;
  /* Noelia: "separa un poco mas 'Cuál te gusta más' de la imagen" — de
     los 40px estándar entre bloques (var(--space-4), el mismo gap del
     resto de la sección) a un poco más, solo aquí. */
  margin-bottom: 1.5rem;
}

.world__big {
  /* Normalización definitiva: "Ahora me toca mirar a mí." queda fuera
     de las 4-6 frases protagonista — pasa a Montserrat, igual que
     #world1Big/.world2__insight/#world3Line2 más abajo. */
  font-family: var(--font-body);
  font-size: var(--fs-3);
  max-width: 30ch;
  margin-inline: auto;
  opacity: 0;
  transform: translateY(14px);
}

/* Normalización definitiva: se quita la cursiva de aquí — #world1Big y
   #world3Line2 ya la anulaban (ver más abajo, la parte "fuera de
   presupuesto" de esta limpieza), y esta regla también alcanzaba al
   <span> de "Ahora me toca mirar a mí." (formulario final), que ahora
   es Montserrat y no tiene cursiva cargada. El color (--accent) se
   queda: #world1Big/#world3Line2 dependen de él para su fucsia/dorado. */
.world__big span { color: var(--accent); }

/* Limpieza tipográfica global: se retira la excepción de tamaño propio
   que llevaba esta frase (+6% sobre las demás) — "Lo que cuentas
   cuenta..." vuelve a compartir tamaño exacto con .world2__insight y
   #world3Line2 (mismo nivel de "conclusión emocional" en los 3 Mundos),
   Nivel 4 — TEXTO NORMAL, igual que el resto de frases narrativas de los
   Mundos. Conserva su propio color (--accent, fucsia). */
#world1Big {
  /* Segunda limpieza: es narrativa (la "conclusión emocional" de este
     Mundo, en prosa), no un titular — Montserrat, igual que .world__big
     (la clase compartida) tras la normalización definitiva. */
  font-family: var(--font-body);
  font-size: var(--fs-3);
}

/* "Es la misma empresa." — gris apagado (--paper-dim), igual que el
   resto de frases narrativas de los 3 Mundos. Nivel 4 — TEXTO NORMAL. */
#world3Line1 {
  font-family: var(--font-body);
  color: var(--paper-dim);
  font-size: var(--fs-3);
}

/* "Lo que cambia es cómo la percibes." — mismo nivel que #world1Big/
   .world2__insight (ver comentario junto a #world1Big). Conserva su
   propio color (dorado, vía .world__big span). */
#world3Line2 {
  font-family: var(--font-body);
  font-size: var(--fs-3);
}

.world__continue {
  margin-inline: auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  background: transparent;
  border-color: var(--accent);
  color: var(--accent);
}

.world__continue:hover { background: var(--accent); color: var(--ink); }
.world__continue.is-visible { opacity: 1; pointer-events: auto; }

/* ==========================================================================
   SEÑALES DE NAVEGACIÓN (FASE 2)
   Regla: scroll para avanzar, clic solo para descubrir/elegir/provocar
   algo. Donde antes había un botón cuya única función era pasar a la
   siguiente escena, ahora hay esta señal — nunca un <button>, nunca con
   aspecto de pastilla/botón, para que no invite a pulsarla. Aparece SOLO
   cuando todo el contenido narrativo de la escena ya terminó de
   revelarse (nunca a la vez que el último texto, ni antes).
   ========================================================================== */
.nav-hint--scroll {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-4);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-dim);
  opacity: 0;
  pointer-events: none;
  user-select: none;
  transition: opacity 0.5s ease;
}

.nav-hint--scroll.is-visible { opacity: 1; }

.nav-hint--scroll__arrow {
  display: inline-block;
  font-size: 0.9rem;
  animation: nav-hint-bounce 1.8s ease-in-out infinite;
}

@keyframes nav-hint-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

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

.world__reveal-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  opacity: 0;
}

/* ---------- Mundo 1 — Diferenciación ---------- */
.world1__facade {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--paper);
  border-radius: 4px;
  background: rgba(245, 241, 232, 0.03);
}

.world1__facade p {
  font-family: var(--font-body);
  font-size: var(--fs-4);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper-dim);
}

.world1__inside {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  max-width: 640px;
  margin-inline: auto;
}

.world1__story {
  /* Segunda limpieza: narrativa — Montserrat, igual que .world2__grow/
     #world3Line1/.world2__closing. Nivel 4 — TEXTO NORMAL. */
  font-family: var(--font-body);
  font-size: var(--fs-3);
  /* UNDÉCIMA CORRECCIÓN: gris apagado (--paper-dim), igual que
     .world2__grow/.world2__closing — era la diferencia real de color
     entre las 5 frases narrativas, no el peso. */
  color: var(--paper-dim);
  opacity: 0;
  transform: translateY(10px);
}



/* ---------- Mundo 2 — Conexión ---------- */
/* CORRECCIÓN DE NAVEGACIÓN: "lo mío" y "¿Y tu cliente?" ya no se
   superponen en el mismo hueco (cross-fade que exigía fijar la escena) —
   ahora son dos bloques normales, uno debajo del otro, en el flujo del
   documento. .world2__mine ya no lleva animación propia (QUINTA
   CORRECCIÓN: se quitó el efecto de "crecer" — ver scene-05.js), texto
   fijo desde el principio; .world2__client es un ".reveal-up" más, el
   siguiente contenido que se encuentra al seguir bajando. */
.world2__mine {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.world2__client {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.world2__grow {
  /* Ya no crece con scroll (ver scene-05.js) — texto fijo. Segunda
     limpieza: narrativa — Montserrat. Nivel 4 — TEXTO NORMAL. */
  font-family: var(--font-body);
  font-size: var(--fs-3);
  color: var(--paper-dim);
  max-width: 26ch;
}

.world2__questions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  justify-content: center;
  max-width: 620px;
  /* Noelia: "separa tambien la pregunta ¿Y tu cliente? de las
     pastillas" — más aire encima de las pastillas, sobre el gap
     compartido de .world2__client (1.5rem), sin tocar ese valor
     (lo comparte con el hueco de arriba, "lo mío"→"¿Y tu cliente?"). */
  margin-top: 0.75rem;
}

.world2__questions span {
  /* Sin opacity/transform propios: todo el bloque .world2__client (que
     las contiene) ya es un ".reveal-up" — si estos <span> también
     arrancaran en opacity:0, se quedarían invisibles para siempre (la
     opacidad de un hijo se multiplica con la del padre; el padre pasa a
     1, pero el hijo se habría quedado en 0). */
  padding: 0.35rem 0.8rem;
  /* Noelia: "aplica lo mismo a las de conexion" — mismo borde fino
     (0.75px) que las pastillas del carrusel de la Escena 01, se ve más
     discreto. */
  border: 0.75px solid var(--paper-dim);
  border-radius: 999px;
  /* DECIMOTERCERA CORRECCIÓN: font-family explícita (antes heredaba de
     body — mismo Inter en la práctica, pero ahora igual que el resto de
     pastillas de forma explícita, no por herencia). */
  font-family: var(--font-body);
  /* Noelia: mismo tratamiento que el resto de pastillas de lectura del
     sitio (".scene-01__option") — sin negrita ni mayúsculas. */
  font-size: 1rem;
  font-weight: 400;
  /* Noelia: "las veo mas claras" — se había quedado en var(--paper)
     (blanco pleno) al aplicar el borde fino; ahora sí, mismo tono que
     el carrusel de la Escena 01. */
  color: var(--paper-dim);
}

/* Premisa general, entre las 3 preguntas al cliente y el cierre personal
   de .world2__closing (apagado) — en azul, el color propio de este Mundo
   (--accent, ver .world--2). */
.world2__insight {
  /* Segunda limpieza: narrativa — Montserrat. Conserva su propio color
     (--accent, azul). */
  font-family: var(--font-body);
  font-size: var(--fs-3);
  color: var(--accent);
  opacity: 0;
}

.world2__closing {
  /* Segunda limpieza: narrativa — Montserrat, igual que .world1__story/
     .world2__grow/#world3Line1. */
  font-family: var(--font-body);
  font-size: var(--fs-3);
  color: var(--paper-dim);
  opacity: 0;
}

.world2__closing em { color: var(--accent); font-style: italic; }

/* ---------- Mundo 3 — Seducción (FASE 3) ---------- */
/* El padding/gap de esta escena en concreto se reduce respecto al resto
   de Mundos — sin tocar `.world`/`.world--1`/`.world--2`, que siguen
   igual. */
#world-3 {
  /* Arriba: recortado a 0.5rem (Noelia: "acorta también el espacio
     entre conexión y cuál te gusta más"), pero luego, con "Conexión" y
     "¿Cuál te gusta más?" leyéndose ya como un único bloque en vez de
     dos Mundos distintos — Noelia: "separa estas frases entre si son
     dos partes distintas" — vuelve a subir. El de abajo se queda en
     var(--space-4), documentado abajo, porque separa "¿Cuál te gusta
     más?"/"Es la misma empresa." de la fotografía del comparador, algo
     distinto a esto. */
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
  /* DECIMOSÉPTIMA CORRECCIÓN: sube a var(--space-4) (40px, era
     var(--space-3)/24px) — pedido explícito de aún más separación entre
     "¿Cuál te gusta más?"/"Es la misma empresa." y la fotografía del
     comparador, a ambos lados. Afecta a los dos huecos por igual, al
     ser el mismo gap del contenedor. */
  gap: var(--space-4);
}

/* Comparador antes/después con arrastre: las dos imágenes ocupan
   exactamente el mismo hueco (mismo tamaño, misma posición) — una línea
   vertical, controlada por JS (initWorld3 en scene-05.js), revela una y
   oculta la otra vía clip-path sobre la capa "antes", sin deformar ni
   mover ninguna imagen. Mismo criterio de tamaño de siempre para este
   marco: altura de viewport como límite duro, no solo ancho. */
.world3__compare {
  position: relative;
  width: auto;
  max-width: min(90vw, 640px);
  height: min(50vh, 420px);
  aspect-ratio: 3 / 2; /* ratio nativo de reformas-antes/despues.jpg */
  margin-inline: auto;
  border: 1px solid var(--paper-dim);
  border-radius: 4px;
  overflow: hidden;
  background: var(--ink);
  cursor: ew-resize;
  /* Evita que el navegador interprete el arrastre horizontal como un
     scroll táctil vertical mientras se mueve la línea. */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  /* BUG REAL: sin esto, al arrastrar la línea el navegador puede
     interpretar el gesto como el inicio de un "arrastrar imagen" nativo
     (o resaltar texto/selección) — durante ese arrastre fantasma se ve
     un velo de color (el resaltado de selección por defecto) sobre la
     imagen, como si fuera a fallar la carga. */
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

.world3__compare *,
.world3__compare *::selection {
  -webkit-user-select: none;
  user-select: none;
}

.world3__compare-layer {
  position: absolute;
  inset: 0;
}

/* Las dos capturas comparten exactamente las mismas proporciones (1200×800
   los dos, generadas como par), así que object-fit:cover no recorta nada
   distinto entre una y otra — quedan perfectamente alineadas. */
.world3__compare-layer img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none; /* el arrastre lo captura el contenedor entero */
  -webkit-user-drag: none;
  user-drag: none;
}

/* "Antes" se apila encima de "después" y solo se ve hasta donde llega la
   línea — valor absoluto puesto por JS en cada momento, nunca una
   transición propia: si se suelta a mitad de arrastre, se queda
   exactamente ahí. Este inset:0 50% inicial es solo el estado de
   partida antes de que cargue el script. */
.world3__compare-layer--before {
  clip-path: inset(0 50% 0 0);
}

.world3__compare-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: var(--paper);
  transform: translateX(-50%);
  pointer-events: none;
}

.world3__compare-handle::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--paper);
  background: var(--ink);
  transform: translate(-50%, -50%);
}

.world3__compare-handle::after {
  content: "↔";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--paper);
  font-size: var(--fs-4);
}

@media (max-width: 640px) {
  .world3__compare { max-width: min(94vw, 480px); height: min(40vh, 320px); }
}

.world3__reveal-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  /* CUARTA CORRECCIÓN: ya no tira hacia arriba (antes -0.6rem, acercaba
     "Es la misma empresa." a la imagen) — pedido explícito de más aire
     entre el comparador y las frases de después, así que se queda al
     gap normal de #world-3, sin restarle espacio. */
  margin-top: 0;
}

.world3__reveal-text .world__big { opacity: 0; }


/* ==========================================================================
   ESCENA 08 — Una pequeña decisión
   ========================================================================== */

.scene-08 {
  flex-direction: column;
  gap: var(--space-4);
  padding-block: var(--space-6);
  text-align: center;
}

.decision__options {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  max-width: 460px;
  margin-inline: auto;
  width: 100%;
}

.decision__options button {
  padding: 0.9rem 1.4rem;
  border: 1px solid var(--paper);
  border-radius: 999px;
  font-size: 0.9rem;
  color: var(--paper);
  text-align: center;
  transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}

.decision__options button:hover,
.decision__options button.is-chosen {
  border-color: #D9A544;
  color: var(--paper);
  background: rgba(217, 165, 68, 0.08);
}

/* ==========================================================================
   MAPA FINAL
   "Esto es lo que hemos mirado juntos" — FASE 5B: ya no depende de un
   clic ni de .is-visible; el panel es "reveal-up" (clase puesta en
   index.html, animada por main.js), así que aparece con scroll natural
   igual que el resto de piezas reveal-up del sitio. display:flex ahora
   es fijo, no condicional — la opacidad/transform de la entrada la pone
   reveal-up.
   ========================================================================== */
.scene-mapa-final {
  flex-direction: column;
  text-align: center;
  /* Mismo motivo que .world (ver esa nota): el contenido es más corto que
     un viewport entero, y forzar 100svh dejaba un hueco vacío grande
     antes y después. */
  min-height: auto;
  padding-top: var(--space-6);
  /* Abajo, recortado — Noelia sigue viendo mucho hueco entre el botón
     "Quiero que mires mi negocio" y el pie de página. Se suma al
     padding-top de #scene-09 justo después (normalmente oculta, sin
     formulario visible, así que ese padding solo estaba dejando aire
     muerto ahí — se recorta también). */
  padding-bottom: 1rem;
}

.mapa-final__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  max-width: 680px;
  margin-inline: auto;
}

/* Línea de apertura (FASE 4B) — mismo peso visual que .mapa-final__linea
   pero algo más discreta, ya que aquí es la primera frase, no el remate. */
.mapa-final__intro {
  /* Segunda limpieza: "la introducción... debe ser Montserrat" (pedido
     explícito). Nivel 3 — FRASE DESTACADA. */
  font-family: var(--font-body);
  font-size: var(--fs-3);
  color: var(--paper-dim);
}

.mapa-final__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  justify-content: center;
  max-width: 620px;
  margin-block: var(--space-2);
}

/* Los que no se tocaron se quedan tenues — no es una checklist con huecos
   marcados en rojo, es simplemente lo que quedó fuera del recorrido. */
.mapa-final__item {
  /* Segunda limpieza: es una lista (los 9 conceptos + los 3 Mundos, en
     la misma rejilla uniforme) — Montserrat. El nombre de cada Mundo ya
     se lee en EB Garamond en su propio momento (.world__eyebrow); aquí es
     solo su mención dentro de un listado. Nivel 4 — TEXTO NORMAL. */
  font-family: var(--font-body);
  font-size: var(--fs-3);
  color: var(--paper-dim);
  /* Noelia: "pon estas palabras del final de la web en negrita" —
     las 12 (Diferenciación/Conexión/Seducción + las 9 de La caja). */
  font-weight: 600;
}

/* El estado "tocado" se distingue por color (blanco pleno), no por
   cursiva — la cursiva no es para marcar variedad/estado. */
.mapa-final__item.is-tocado {
  color: var(--paper);
}

/* Los 3 mundos, ya explorados, en su propio color de acento (mismo tono
   que Mundo 1/2/3) — el resto de conceptos (mapa-final__grid--rest) se
   queda en .is-tocado normal (blanco), sin código de color.
   DECIMONOVENA CORRECCIÓN: mismo tamaño que las 9 áreas — se quitó el
   tamaño propio (antes ~17,5% mayor) que llevaban solo estos 3. */
.mapa-final__item[data-key="diferenciacion"].is-tocado { color: #D4147A; }
.mapa-final__item[data-key="conexion"].is-tocado { color: #0057FF; }
.mapa-final__item[data-key="seduccion"].is-tocado { color: #C99A4A; }

.mapa-final__linea {
  margin-top: var(--space-3);
  /* "Tu negocio tiene todo esto dentro." — Nivel 3 — FRASE DESTACADA,
     sin tamaño propio. */
  font-family: var(--font-display);
  font-size: var(--fs-2);
  color: var(--paper);
  line-height: 1.35;
}

.mapa-final__pregunta {
  /* "¿Qué estás aprovechando...?" — Nivel 4 — TEXTO NORMAL, sin tamaño
     propio. */
  font-family: var(--font-body);
  font-size: var(--fs-3);
  color: var(--paper-dim);
  line-height: 1.6;
  /* Noelia: "separalo de la pregunta de debajo" (refiriéndose a
     .mapa-final__mas, justo encima) — el gap normal del panel
     (--space-3) se quedaba corto entre las dos frases. */
  margin-top: var(--space-2);
}

.mapa-final__ayuda {
  font-family: var(--font-body);
  font-size: var(--fs-4);
  color: var(--paper-dim);
  margin-top: var(--space-1);
}

/* Noelia: "separa el boton de la pregunta se ve muy pegado" y luego
   "separa mas" — var(--space-2) todavía se quedaba corto. */
#btnMapaFinalContacto {
  margin-top: var(--space-4);
}

/* Noelia: "un boton que dirigiera a" los servicios — enlace secundario
   bajo el CTA principal, discreto (microtexto subrayado, como el resto
   de enlaces de apoyo del sitio) para que "Quiero que mires mi
   negocio" siga siendo la acción protagonista de este bloque. */
.mapa-final__services-link {
  display: inline-block;
  /* Sin margen propio: el gap de .mapa-final__panel (1.5rem) ya separa
     este enlace del botón de encima, igual que separa el resto de
     piezas del bloque. */
  font-family: var(--font-body);
  font-size: var(--fs-3);
  color: var(--paper-dim);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

.mapa-final__services-link:hover,
.mapa-final__services-link:focus-visible {
  color: var(--paper);
}

/* ==========================================================================
   ESCENA 09 — Contacto, como entrevista (FASE 4B)
   Ya no es un formulario de una sola pantalla: 4 pasos + confirmación,
   dentro de la misma escena — mismo patrón "retira el paso anterior,
   revela el siguiente" que ya se probó en la escena de Luis.
   ========================================================================== */

.scene-09 {
  flex-direction: column;
  gap: var(--space-4);
  text-align: center;
  /* BUG REAL que arregla esto (mismo motivo que .world/.scene-mapa-final,
     ver esas notas): forzar 100svh dejaba un hueco vacío enorme cada vez
     que el paso visible del formulario era corto — sobre todo al llegar
     a la confirmación final ("Ya tengo algunas piezas...", ~360px de
     contenido sobre un viewport de 900px), justo lo último que se ve
     antes del final de la página. auto: la escena mide justo el paso que
     toca en cada momento + el padding. */
  min-height: auto;
  /* Abajo, recortado al máximo (Noelia: "acorta también al máximo
     posible el espacio encima del pie de página").
     Arriba, recortado aparte: normalmente esta escena está oculta (sin
     formulario visible hasta pulsar el CTA del mapa final), así que este
     padding-top solo dejaba aire muerto entre ese botón y el pie de
     página — visible en la captura que mandó Noelia. */
  padding-top: 1rem;
  padding-bottom: 0.5rem;
}

.scene09__panel {
  display: none;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 640px;
  width: 100%;
  margin-inline: auto;
  /* BUG REAL en móvil (Noelia: "el primer cuadrado... se coge la
     pantalla de lado a lado", "los apartados para dejar los datos son
     mas grandes que la pantalla"): a diferencia del resto de escenas
     (que usan .scene__inner, con min(100% - 3rem, 1100px) de por
     medio), #scene-09 no tenía NINGÚN margen lateral propio — sus
     campos/pastillas, con max-width propio pero width:100%, se
     estiraban borde a borde del viewport en pantallas más estrechas
     que ese max-width. Mismo aire (1.5rem a cada lado) que el resto
     del sitio. */
  padding-inline: 1.5rem;
}

.scene09__panel.is-visible {
  display: flex;
}

.scene09__field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  text-align: left;
  /* Nivel 5 — microtexto/etiqueta (label del campo) */
  font-size: var(--fs-4);
  color: var(--paper-dim);
  max-width: 440px;
  width: 100%;
  margin-inline: auto;
}

.scene09__field input,
.scene09__field textarea {
  padding: 0.75rem 1rem;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--paper);
  font-family: var(--font-body);
  /* Nivel 5 — microtexto/etiqueta (texto de control) */
  font-size: var(--fs-4);
  resize: vertical;
}

.scene09__field input:focus,
.scene09__field textarea:focus {
  outline: none;
  border-color: var(--paper);
}

/* ---------- Pasos de la entrevista ---------- */
/* Base oculta también en CSS (no solo en JS) — evita el parpadeo de ver
   los 4 pasos apilados un instante antes de que el script los oculte, y
   es el mismo bug de desbordamiento que ya se corrigió en Mundo 3/Luis si
   se deja que ocupen su alto real todos a la vez. */
.interview__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  opacity: 0;
}

#interviewStep2, #interviewStep3, #interviewStep4, #interviewConfirm {
  display: none;
}

.interview__lead {
  /* Segunda limpieza: texto de transición entre pasos del formulario
     ("Cuéntame.", "Ahora tengo algo que mirar."...) — Montserrat. */
  font-family: var(--font-body);
  /* Nivel 3 — FRASE DESTACADA */
  font-size: var(--fs-3);
  color: var(--paper-dim);
}

.interview__textarea-field {
  max-width: 480px;
}

.interview__sr-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Paso 2 — pastillas de frase larga, selección múltiple (aria-pressed, no
   exclusivas entre sí, a diferencia de las pastillas de una sola
   elección que usa el resto del sitio). */
.interview__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  max-width: 560px;
}

.interview__pills button {
  padding: 0.75rem 1.3rem;
  border: 1px solid var(--paper);
  border-radius: 999px;
  /* DECIMOTERCERA CORRECCIÓN: font-family explícita, igual que el
     resto de pastillas del sitio. */
  font-family: var(--font-body);
  /* Nivel 5 — microtexto/etiqueta */
  font-size: var(--fs-4);
  color: var(--paper);
  transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
  /* BUG REAL en móvil (Noelia: "los botones del segundo paso ocupan mas
     del ancho de la pantalla", señalando justo las dos frases más
     largas): la nota anterior decía "sin riesgo de desborde", pero en
     un flex-wrap los ítems no se encogen por debajo de su ancho de
     contenido salvo que se les permita explícitamente (min-width:auto
     es el valor por defecto) — una frase larga ("Estoy haciendo
     demasiadas cosas", "Tengo ideas, pero no las aterrizo") en una
     pantalla estrecha se salía por el lado en vez de partirse. Con
     min-width:0 + max-width:100% el texto envuelve dentro de la propia
     pastilla en vez de desbordar. */
  min-width: 0;
  max-width: 100%;
}

.interview__pills button:hover { border-color: #D9A544; }

.interview__pills button[aria-pressed="true"] {
  background: var(--paper);
  color: var(--ink);
}

/* Paso 3 — piezas de La caja: círculos con el mismo lenguaje visual
   (borde, mayúsculas) que tenían las 9 capas de la Escena 03 cuando
   también eran circulares — se quedan así aquí aunque esa escena haya
   cambiado de presentación (ver scene-03.js), en fila con ajuste de línea
   en vez de radial alrededor de un núcleo. */
.interview__pieces {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  justify-content: center;
  max-width: 560px;
}

.interview__pieces button {
  width: 118px;
  height: 118px;
  border-radius: 50%;
  border: 1px solid var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--paper);
  transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
  /* BUG REAL (cuarta vuelta): partir la palabra (aunque sea en la sílaba
     correcta) seguía leyéndose como "cortada" — Noelia: "que las
     palabras no se dividieran aunque haya que hacerlas más pequeñas".
     Ahora ninguna palabra se parte nunca (white-space:nowrap): el
     círculo crece y la letra se encoge lo justo para que "CONOCIMIENTO"
     (la más larga de las 9) quepa entera en una sola línea. */
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.interview__pieces button[aria-pressed="true"] {
  background: var(--paper);
  color: var(--ink);
}

/* La pista de "elige al menos una" es discreta y permanente (no un error
   hasta que se intente avanzar) — coherente con la regla de no obligar a
   adivinar qué hace falta. Cambia de tono en cuanto se cumple. */
.interview__hint {
  /* Nivel 5 — microtexto/etiqueta */
  font-size: var(--fs-4);
  color: var(--paper-dim);
}

.interview__hint.is-satisfied {
  color: var(--paper-dim);
}

/* Honeypot antispam: presente en el DOM y alcanzable por un bot que
   rellena todo el formulario, pero fuera de pantalla e ignorado por
   personas reales (aria-hidden + tabindex="-1" lo saltan). */
.interview__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.interview__error {
  max-width: 440px;
  margin-inline: auto;
  /* Nivel 5 — microtexto/etiqueta */
  font-size: var(--fs-4);
  color: #D9A544;
  opacity: 0;
  height: 0;
  overflow: hidden;
  transition: opacity 0.3s ease;
}

.interview__error.is-visible {
  opacity: 1;
  height: auto;
}

/* ---------- Confirmación ---------- */
.interview__recap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  max-width: 480px;
  margin-bottom: var(--space-2);
}

.interview__recap-item {
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--paper-dim);
  border-radius: 999px;
  /* DECIMOTERCERA CORRECCIÓN: font-family explícita y mismo tono
     (var(--paper), blanco pleno) que el resto de pastillas del sitio
     — era var(--paper-dim), la única en gris. */
  font-family: var(--font-body);
  font-size: var(--fs-4);
  color: var(--paper);
  /* Mismo arreglo que .interview__pills button — evita que una frase
     larga elegida en el paso 2 se salga por el lado aquí, en el resumen
     final. */
  min-width: 0;
  max-width: 100%;
}

.interview__close-line {
  max-width: 40ch;
  margin-inline: auto;
  color: var(--paper-dim);
  /* Nivel 4 — TEXTO NARRATIVO (no llevaba tamaño propio: heredaba 1rem
     del body; se fija explícitamente para entrar en el sistema). */
  font-size: var(--fs-3);
  line-height: 1.6;
}

@media (max-width: 640px) {
  /* Cuarta vuelta (Noelia: "que las palabras no se dividieran aunque
     haya que hacerlas más pequeñas") — ya no se busca que quepan en 2
     líneas "limpias": ninguna palabra se parte nunca (white-space:nowrap
     en la regla base). Círculo algo más grande que en desktop-pequeño
     era antes + letra más reducida, para que "CONOCIMIENTO" quepa
     entera en una sola línea incluso en el circulo más comprimido. */
  .interview__pieces button {
    width: 104px;
    height: 104px;
    font-size: 0.72rem;
    letter-spacing: 0.01em;
  }
}

/* ==========================================================================
   Reveal genérico (fade+rise) — usado en varias escenas para texto entrante
   ========================================================================== */
.reveal-up,
.js-intro-item {
  opacity: 0;
  transform: translateY(16px);
}

/* ==========================================================================
   Accesibilidad: prefers-reduced-motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

/* ==========================================================================
   Responsive — ajustes de bloque 1 (versión desktop-first;
   la adaptación mobile "propia" por escena llega en una pasada dedicada)
   ========================================================================== */
@media (max-width: 720px) {
  .bizcard.is-p1, .bizcard.is-pm1 { opacity: 0; pointer-events: none; }
  .scene-01__carousel-arrow { width: 2.2rem; height: 2.2rem; font-size: 1.2rem; }
}

/* ==========================================================================
   PIE DE PÁGINA
   Cierre de marca: logo (placeholder) + "Analizar. Descubrir. Construir."
   Mismos 3 colores que ya usaba esa frase en #scene-03 y en la escena de
   Noelia — se conservan aquí igual, sin inventar una paleta nueva.
   ========================================================================== */
.site-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding-block: var(--space-6);
  background: var(--ink);
  text-align: center;
}

/* Logo real (Más que bla bla bla) enlazado a masqueblablabla.com —
   opacidad ligeramente reducida en reposo, plena al pasar el ratón/
   foco, para dar la misma señal de "esto es interactivo" que el resto
   de elementos clicables del sitio. */
.site-footer__logo-link {
  display: inline-block;
  opacity: 0.85;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.site-footer__logo-link:hover,
.site-footer__logo-link:focus-visible {
  opacity: 1;
  transform: translateY(-2px);
}

/* Noelia: "elimina el logo de más que bla bla bla y pon el logo del
   favicon en un tamaño acorde" — era el logotipo horizontal (64px alto,
   bastante ancho); el favicon es una marca cuadrada, así que se queda
   más pequeño para no dominar el pie de página. */
.site-footer__logo {
  height: 52px;
  width: auto;
  display: block;
}

.site-footer__tagline {
  /* Normalización definitiva: fuera de las 4-6 frases protagonista de
     EB Garamond — pasa a Montserrat. */
  font-family: var(--font-body);
  /* Noelia: "en negrita y un poco mayores que diferenciacion conexion y
     seduccion" — comparado con esas mismas tres palabras en "Hemos
     visto:" (.mapa-final__item, --fs-3/600 justo encima), un escalón
     por encima en tamaño y negrita, para que se lea como la firma de
     cierre. clamp() propio en vez de --fs-3 para que ese "poco mayor"
     se mantenga también en móvil, no solo en desktop. */
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 600;
  color: var(--paper);
}

/* Mismo código de color que Diferenciación/Conexión/Seducción, en el
   mismo orden: Analizar=fucsia (Diferenciación), Descubrir=azul
   (Conexión), Construir=dorado (Seducción). */
.site-footer__tagline .c1 { color: #D4147A; }
.site-footer__tagline .c2 { color: #0057FF; }
.site-footer__tagline .c3 { color: #C99A4A; }

.site-footer__name {
  font-family: var(--font-body);
  font-size: var(--fs-4);
  font-weight: 600;
  color: var(--paper);
  margin-top: calc(-1 * var(--space-2));
}

.site-footer__role {
  font-family: var(--font-body);
  font-size: var(--fs-4);
  font-weight: 500;
  color: var(--paper-dim);
  margin-top: calc(-1 * var(--space-3) + 0.2rem);
}

/* Enlaces a las páginas legales — mismo tratamiento discreto que el
   resto de microtexto del sitio (.tag): mayúsculas, tracking amplio,
   apenas visible hasta que se interactúa. */
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  /* Noelia: "separalo un poco del parrafo de encima y colocale una
     linea fina que lo separe" (después: "separa mas") — más aire que
     el gap normal del pie (--space-2) y una línea tenue arriba, mismo
     tono que el resto de bordes discretos del sitio (var(--line)),
     para que se lea como un bloque aparte (legal) del cierre de marca
     (logo + "Analizar. Descubrir. Construir."). */
  margin-top: calc(var(--space-4) + 0.5rem);
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}

/* Noelia: "quita Noelia Delgado / Comunicación estratégica del pie, pon
   mi nombre y 2026 donde está el aviso legal" — copyright discreto,
   mismo tratamiento tipográfico que los enlaces legales (misma fila),
   pero sin comportamiento de enlace. */
.site-footer__copy {
  font-family: var(--font-body);
  /* Noelia: "hazle lo mismo a esa parte tambien" — mismo tratamiento
     que .site-footer__legal a: más pequeño, más oscuro, en minúscula. */
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  color: rgba(245, 241, 232, 0.3);
}

.site-footer__legal a {
  font-family: var(--font-body);
  /* Noelia: "aun mas oscuro, mas pequeños y en minusculas" — ya no
     comparten el tamaño/mayúsculas del © de al lado, se quedan más
     discretos todavía. */
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  color: rgba(245, 241, 232, 0.3);
  transition: color 0.2s ease;
}

.site-footer__legal a:hover,
.site-footer__legal a:focus-visible {
  color: var(--paper);
}

/* ==========================================================================
   BANNER DE COOKIES
   Mismo lenguaje visual que el resto del sitio — nada tomado de
   masqueblablabla.com: fondo --ink, borde superior en el fucsia de
   marca, y los botones reutilizan la forma pastilla de .btn (aceptar
   sólido, solo-necesarias en contorno) en vez de un componente nuevo.
   Oculto por defecto — cookie-banner.js añade/quita "visible" según el
   consentimiento guardado en localStorage.
   ========================================================================== */
/* Noelia: primero pidió la franja fina de siempre con una miniatura;
   luego mandó el mockup completo (foto ancha + texto quemado dentro) y,
   al preguntarle por el tamaño, contestó "banner más grande" — así que
   en desktop el banner ES la foto completa (sin recortar, con sus
   propios márgenes oscuros ya integrados) y encima solo van los
   elementos que tienen que ser reales/clicables: cerrar y los 2
   botones. En móvil esa foto ancha se leería minúscula (no se puede
   redistribuir el texto de una imagen), así que ahí se mantiene la
   franja fina compacta de antes, con texto real. */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 300;
  padding: var(--space-3);
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.4s var(--ease-out), opacity 0.4s var(--ease-out);
}

.cookie-banner.visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .cookie-banner {
    transition: opacity 0.2s linear;
    transform: none;
  }
}

.cookie-banner__inner {
  position: relative;
  /* Noelia: "en la version web quizas se podria hacer tambien un
     poquito mayor" — de 1000px a 1100px, todo escala junto (imagen +
     botones superpuestos, que van en % sobre esta caja). */
  max-width: 1100px;
  margin: 0 auto;
}

/* ---------- Desktop: imagen completa ---------- */
.cookie-banner__hero-img {
  display: block;
  width: 100%;
  border-radius: 14px;
}

.cookie-banner__close {
  position: absolute;
  left: 86.8%;
  top: 23%;
  width: 6%;
  aspect-ratio: 1;
  min-width: 28px;
  min-height: 28px;
  border: none;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  /* El icono "✕" ya está pintado en la propia foto — este botón es
     invisible, solo ocupa el hueco exacto encima para que sea clicable
     de verdad, sin duplicar el dibujo. */
}

.cookie-banner__close:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 50%;
}

/* Zona en blanco de la propia foto (a la derecha del texto) — los 2
   botones reales van ahí, apilados, en vez de los que llevaba el
   mockup quemados en la imagen. BUG REAL (Noelia: "los botones...
   quedan casi encima del texto"): 66%/21% quedaba corto — medido en
   el archivo real (cookie-lavadora-full.jpg, 1400×467px), la línea de
   texto más larga ("...qué partes de la web") llega hasta ~935px
   (66.8%), así que un botón empezando en el 66% ya se montaba encima.
   El hueco en blanco de verdad va de ~955px a ~1310px (antes del
   icono de cerrar) — 68-93%. */
.cookie-banner__btns {
  position: absolute;
  left: 69%;
  top: 36%;
  width: 24%;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* ---------- Móvil: franja compacta de siempre ---------- */
.cookie-banner__photo {
  /* Noelia: "se ve muy pequeña en el móvil, se podría hacer mayor" —
     56px se leía casi como un icono; sube a un tamaño que de verdad se
     reconozca la foto. Segunda vuelta (Noelia: "sigue viendose
     pequeña"): 84px todavía no era suficiente — sube más, a un tamaño
     claramente protagonista dentro de la franja compacta. */
  width: 128px;
  height: 128px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--line);
}

@media (max-width: 640px) {
  .cookie-banner {
    background: var(--ink);
    border-top: 1px solid var(--brand-fucsia);
  }
  .cookie-banner__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    flex-wrap: wrap;
  }
  .cookie-banner__btns {
    position: static;
    width: 100%;
    flex-direction: row;
  }
  .cookie-banner__btn { flex: 1; justify-content: center; }
}

/* Noelia: "podrías diseñar mejor la barra de cookies, mira esta que
   graciosa está" — se queda con la estética del sitio (nada de mascota
   ilustrada ni fondo claro, rompería la identidad), pero gana carácter
   con un eyebrow + un texto que engancha con el propio hilo de la web
   en vez del aviso legal genérico de siempre. Segunda vuelta (Noelia
   adjuntó un mockup nuevo con la lavadora): el chiste pasa de "esto
   también es investigación" a "cookies dentro de la lavadora",
   reutilizando el mismo objeto/broma visual que el resto del sitio. */
.cookie-banner__copy {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  max-width: 640px;
}

.cookie-banner__eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-4);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-fucsia);
  margin: 0;
}

.cookie-banner__text {
  font-family: var(--font-body);
  font-size: var(--fs-4);
  line-height: 1.6;
  color: var(--paper-dim);
  margin: 0;
  max-width: 640px;
}

.cookie-banner__text a {
  color: var(--paper);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Remate del chiste ("Prometemos no meterlas en la lavadora.") — mismo
   texto/tamaño que el resto (Montserrat, sin cursiva: la normalización
   tipográfica del sitio reserva EB Garamond + cursiva para las 4-6
   frases protagonista, esto es solo una línea de más dentro del banner
   de cookies, no una de ellas), solo un poco más apagado. */
.cookie-banner__aside {
  font-family: var(--font-body);
  font-size: var(--fs-4);
  color: var(--paper-dim);
  margin: 0.2rem 0 0;
}

.cookie-banner__btn {
  display: inline-flex;
  align-items: center;
  /* Noelia: "son demasiado grandes" — bajan de 44px/0.7rem 1.5rem a esto. */
  min-height: 34px;
  padding: 0.45rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--paper);
  font-family: var(--font-body);
  font-size: var(--fs-4);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s var(--ease-out), color 0.3s var(--ease-out), border-color 0.3s var(--ease-out), transform 0.2s var(--ease-out);
}

.cookie-banner__btn--accept {
  background: var(--paper);
  color: var(--ink);
}

.cookie-banner__btn--accept:hover,
.cookie-banner__btn--accept:focus-visible {
  background: transparent;
  color: var(--paper);
  transform: translateY(-2px);
}

.cookie-banner__btn--reject {
  background: transparent;
  color: var(--paper-dim);
  border-color: var(--line);
}

.cookie-banner__btn--reject:hover,
.cookie-banner__btn--reject:focus-visible {
  color: var(--paper);
  border-color: var(--paper);
}

.cookie-banner__btn:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

/* En desktop los botones flotan sobre la zona clara de la propia foto
   (el cartón crema del mockup) — los mismos colores que en el resto
   del sitio (pastilla blanca sobre negro) se volverían invisibles ahí,
   así que se invierten solo en este contexto. */
@media (min-width: 641px) {
  .cookie-banner__btn { border-color: var(--ink); }
  .cookie-banner__btn--accept {
    background: var(--ink);
    color: var(--paper);
  }
  .cookie-banner__btn--accept:hover,
  .cookie-banner__btn--accept:focus-visible {
    background: transparent;
    color: var(--ink);
  }
  .cookie-banner__btn--reject {
    background: transparent;
    color: var(--ink-soft, var(--ink));
    border-color: rgba(20, 18, 15, 0.4);
  }
  .cookie-banner__btn--reject:hover,
  .cookie-banner__btn--reject:focus-visible {
    color: var(--ink);
    border-color: var(--ink);
  }
}

/* Interruptor final desktop/móvil — se coloca al final a propósito
   (después de las reglas base de .cookie-banner__copy/__photo más
   arriba) para ganar por orden de aparición sin depender de
   especificidad extra. */
.cookie-banner__hero-img,
.cookie-banner__close { display: none; }

@media (min-width: 641px) {
  .cookie-banner__photo,
  .cookie-banner__copy { display: none; }
  .cookie-banner__hero-img,
  .cookie-banner__close { display: block; }
}