/* ================================================================
   EscapaHoy — Home cinematográfica (prototipo V3-1)
   CSS aislado. No depende de styles.css ni de JS.
   Mobile-first. Estética editorial mediterránea.
================================================================ */

:root {
  --ink:        #0a1c26;   /* azul-verde profundo (fondos oscuros) */
  --ink-2:      #0b2622;   /* verde profundo (imagen gigante) */
  --paper:      #fbf8f2;   /* blanco roto */
  --cream:      #f4ede0;   /* crema */
  --sand:       #e7dcc7;   /* arena */
  --aqua:       #16a3a8;   /* turquesa marca */
  --aqua-deep:  #0e7f86;
  --text:       #17323b;   /* texto sobre claro */
  --text-soft:  #4a5f66;   /* texto secundario sobre claro */
  --light:      #f7f4ee;   /* texto sobre oscuro */
  --light-soft: rgba(247, 244, 238, 0.78);

  --maxw: 1200px;
  --pad:  clamp(1.25rem, 5vw, 4rem);

  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { display: block; max-width: 100%; }

/* ---------------- Tipografía compartida ---------------- */
.display {
  font-family: var(--serif);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin: 0;
}
.display--xl { font-size: clamp(2.4rem, 8vw, 5.2rem); }
.display--l  { font-size: clamp(1.9rem, 5.5vw, 3.4rem); }

.lede {
  font-size: clamp(1rem, 2.4vw, 1.25rem);
  line-height: 1.6;
  color: var(--text-soft);
  margin: 0;
  max-width: 46ch;
}
.lede--light { color: var(--light-soft); }

.eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--aqua-deep);
  margin-bottom: 1rem;
}
.eyebrow--light { color: rgba(255, 255, 255, 0.82); }

/* ---------------- Botones ---------------- */
.actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2rem; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
  will-change: transform;
}
.btn--solid {
  background: var(--aqua);
  color: #fff;
  box-shadow: 0 10px 30px -10px rgba(22, 163, 168, 0.6);
}
.btn--solid:hover { background: var(--aqua-deep); transform: translateY(-2px); }
.btn--ghost {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
}
.btn--ghost:hover { background: rgba(255, 255, 255, 0.12); transform: translateY(-2px); }
.btn--lg { padding: 1.05rem 2rem; font-size: 1.05rem; }

/* ---------------- Escena base ---------------- */
.scene {
  position: relative;
  padding: clamp(4rem, 12vw, 8rem) var(--pad);
  overflow-x: clip;
}
.scene__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}
.scene__scrim { position: absolute; inset: 0; z-index: 1; }

.section-head { max-width: var(--maxw); margin: 0 auto 2.5rem; text-align: center; }
.section-head .lede { margin: 0.6rem auto 0; }

/* ============================================================
   ESCENA 1 — HERO / PORTADA CINEMATOGRÁFICA
============================================================ */
.scene--hero {
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--light);
  overflow: hidden;
}
/* Ken Burns muy sutil al cargar */
.hero__bg { transform-origin: 50% 55%; animation: heroKen 20s ease-out both; will-change: transform, filter; }
@keyframes heroKen { from { transform: scale(1.001); } to { transform: scale(1.09); } }

/* Scrim trabajado: viñeta (centro limpio) + oscurecido superior/inferior */
.scene__scrim--hero {
  background:
    radial-gradient(120% 85% at 50% 42%, rgba(6, 20, 27, 0) 0%, rgba(6, 20, 27, 0.16) 52%, rgba(6, 20, 27, 0.5) 100%),
    linear-gradient(180deg, rgba(6, 20, 27, 0.5) 0%, rgba(6, 20, 27, 0.04) 22%, rgba(6, 20, 27, 0.12) 62%, rgba(6, 20, 27, 0.58) 100%);
}

/* Barra de marca sobre el hero (no fija) */
.hero__topbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1rem, 2.4vw, 1.6rem) var(--pad);
}
.hero__logo { width: clamp(126px, 13vw, 152px); height: auto; filter: brightness(0) invert(1); opacity: 0.95; }
.hero__note {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: min(92vw, 880px);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: grid;
  justify-items: center;
  text-shadow: 0 2px 30px rgba(6, 20, 27, 0.5);
}
.hero__eyebrow { margin-bottom: 1.2rem; }
.hero__title {
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(2.5rem, 8.2vw, 6rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0;
}
.hero__sub {
  font-size: clamp(1rem, 2.1vw, 1.3rem);
  line-height: 1.55;
  color: rgba(247, 244, 238, 0.9);
  margin: 1.5rem auto 0;
  max-width: 36ch;
}
.hero__actions { justify-content: center; margin-top: 2.2rem; }

/* Indicador de scroll (línea con destello descendente) */
.hero__scroll {
  position: absolute;
  bottom: clamp(1.2rem, 3.5vh, 2.6rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  width: 1px; height: 48px;
  background: rgba(255, 255, 255, 0.28);
  overflow: hidden;
}
.hero__scroll::after {
  content: "";
  position: absolute; left: 0; top: -60%;
  width: 100%; height: 60%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.95));
  animation: heroScroll 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes heroScroll { 0% { transform: translateY(0); } 55%, 100% { transform: translateY(280%); } }

.giant__content { text-shadow: 0 2px 24px rgba(6, 20, 27, 0.5); }

/* ============================================================
   ESCENA 3 — FOTOS FLOTANTES
============================================================ */
.scene--floats { background: var(--cream); }
.floats__text { max-width: 40ch; margin: 0 auto 2.5rem; text-align: center; }
.floats__text .lede { margin: 0.8rem auto 0; }
.floats__chapter + .floats__chapter { margin-top: 2rem; }

.floats__stage {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.9rem;
  max-width: 640px;
  margin: 0 auto;
}
.float { margin: 0; border-radius: 14px; overflow: hidden; box-shadow: 0 20px 40px -24px rgba(10, 28, 38, 0.55); }
.float img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* ============================================================
   ESCENA 4 — TERRITORIO
============================================================ */
.scene--territory { background: var(--paper); }
.territory__grid {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  gap: 2.5rem;
  align-items: center;
}
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem; padding: 0; margin: 1.8rem 0 0; }
.tag {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--aqua-deep);
  background: rgba(22, 163, 168, 0.1);
  border: 1px solid rgba(22, 163, 168, 0.22);
  padding: 0.45rem 1rem;
  border-radius: 999px;
}
.territory__media { margin: 0; border-radius: 18px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(10, 28, 38, 0.5); }
.territory__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* Cifras de EscapaHoy (contadores discretos, sin estilo dashboard) */
.stats {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.6rem 1.2rem;
  padding: 1.6rem 0 0;
  margin: 1.8rem 0 0;
  border-top: 1px solid rgba(23, 50, 59, 0.12);
}
.stat { display: grid; gap: 0.15rem; }
.stat__num {
  display: block;
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(1.7rem, 3.4vw, 2.3rem);
  color: var(--text);
  line-height: 1;
}
.stat__label {
  font-size: 0.85rem;
  color: var(--text-soft);
  line-height: 1.4;
}
.stat--text { justify-content: center; align-content: center; }
.stat--text .stat__label { font-size: 0.92rem; font-weight: 500; }

/* ============================================================
   ESCENA 5 — CATEGORÍAS
============================================================ */
.scene--categories { background: var(--sand); }
.cat-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.9rem;
}
.cat {
  position: relative;
  display: block;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  text-decoration: none;
  box-shadow: 0 22px 44px -26px rgba(10, 28, 38, 0.6);
}
.cat--wide { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.cat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.cat:hover img { transform: scale(1.06); }
.cat__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6, 20, 27, 0) 40%, rgba(6, 20, 27, 0.72) 100%);
}
.cat__label {
  position: absolute;
  left: 1.1rem;
  bottom: 1rem;
  z-index: 2;
  color: #fff;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.3rem, 3.5vw, 1.8rem);
}

/* ============================================================
   ESCENA 6 — IMAGEN GIGANTE
============================================================ */
.scene--giant {
  min-height: 92svh;
  display: grid;
  align-items: center;
  color: var(--light);
  /* Contiene el desbordamiento vertical del zoom (scale) del fondo: sin esto,
     la imagen se sale por arriba de su propia caja y deja ver el cielo de la
     foto sin oscurecer, encima del scrim. Causa real de la franja clara. */
  overflow-y: clip;
}
/* Margen de seguridad: cubre cualquier hairline de subpíxel del zoom con scroll */
.scene--giant .scene__bg { inset: -2px; }
.scene__scrim--giant {
  background:
    linear-gradient(90deg, rgba(6, 22, 28, 0.86) 0%, rgba(6, 22, 28, 0.5) 45%, rgba(6, 22, 28, 0.15) 100%),
    linear-gradient(180deg, rgba(6, 22, 28, 0.55) 0%, rgba(6, 22, 28, 0.3) 14%, rgba(6, 22, 28, 0.5) 100%);
}
/* Máscara superior fija: oculta cualquier franja clara de la foto (cielo/cresta)
   contra la sección anterior, tanto en el recorrido de scroll como ya fijada. */
.scene--giant::after {
  content: "";
  position: absolute;
  top: -4px;
  left: 0;
  right: 0;
  height: 72px;
  background: linear-gradient(180deg, rgba(6, 22, 28, 0.95) 0%, rgba(6, 22, 28, 0.6) 55%, rgba(6, 22, 28, 0) 100%);
  z-index: 1;
  pointer-events: none;
}
.giant__content {
  position: relative;
  z-index: 2;
  max-width: var(--maxw);
  margin: 0 auto;
  width: 100%;
}
.giant__content .lede { margin-top: 1.4rem; }

/* ============================================================
   ESCENA 7 — CÓMO FUNCIONA
============================================================ */
.scene--steps { background: var(--ink); color: var(--light); }
.scene--steps .eyebrow { color: var(--aqua); }
.steps {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  gap: 1.5rem;
}
.step {
  padding: 2rem 1.75rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
}
.step__num {
  font-family: var(--serif);
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--aqua);
  display: block;
  line-height: 1;
  margin-bottom: 1rem;
}
.step__title { font-size: 1.25rem; margin: 0 0 0.5rem; color: #fff; }
.step__desc { margin: 0; color: var(--light-soft); line-height: 1.6; }

/* ============================================================
   ESCENA 7B — POR QUÉ ESCAPAHOY
============================================================ */
.scene--why { background: var(--cream); }
.why-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  gap: 2.2rem;
}
.why { padding-top: 1.4rem; border-top: 2px solid rgba(23, 50, 59, 0.12); }
.why__label {
  display: block;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--aqua-deep);
  margin-bottom: 0.9rem;
}
.why__title { font-family: var(--serif); font-size: 1.3rem; font-weight: 700; margin: 0 0 0.5rem; color: var(--text); }
.why__desc { margin: 0; color: var(--text-soft); line-height: 1.6; }

/* ============================================================
   ESCENA 8 — GUÍAS
============================================================ */
.scene--guides { background: var(--paper); }
.guide-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.9rem;
}
.guide {
  position: relative;
  display: block;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  text-decoration: none;
  box-shadow: 0 22px 44px -26px rgba(10, 28, 38, 0.55);
}
.guide--wide { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.guide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.guide:hover img { transform: scale(1.05); }
.guide__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6, 20, 27, 0.05) 35%, rgba(6, 20, 27, 0.78) 100%);
}
.guide__body { position: absolute; left: 1.15rem; bottom: 1.05rem; z-index: 2; color: #fff; display: grid; gap: 0.2rem; }
.guide__kicker { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.82); }
.guide__title { font-family: var(--serif); font-weight: 700; font-size: clamp(1.15rem, 3vw, 1.5rem); }

/* ============================================================
   ESCENA 9 — CTA FINAL
============================================================ */
.scene--cta {
  background: radial-gradient(120% 120% at 50% 0%, #123240 0%, var(--ink) 60%, #06141b 100%);
  color: var(--light);
  text-align: center;
}
.cta__content { max-width: 44ch; margin: 0 auto; display: grid; justify-items: center; gap: 1.2rem; }
.cta__content .lede { margin: 0 auto; }
.cta__content .btn { margin-top: 0.6rem; }
.cta__strip {
  max-width: var(--maxw);
  margin: 3rem auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
}
.cta__strip img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; opacity: 0.9; }

/* ============================================================
   CTA COMUNIDAD (mini, previo al footer)
============================================================ */
.cine-cta-mini {
  background: var(--ink);
  padding: clamp(2.2rem, 6vw, 3rem) var(--pad);
}
.cine-cta-mini__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
}
.cine-cta-mini__text {
  margin: 0;
  color: var(--light-soft);
  font-size: 1.05rem;
  max-width: 40ch;
}
.btn--ghost-dark {
  background: transparent;
  color: var(--light);
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  white-space: nowrap;
}
.btn--ghost-dark:hover { background: rgba(255, 255, 255, 0.08); transform: translateY(-2px); }

/* ============================================================
   FOOTER
============================================================ */
.cine-footer {
  background: #06141b;
  color: var(--light-soft);
  padding: clamp(2.6rem, 6vw, 3.6rem) var(--pad) 0;
}
.cine-footer__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  gap: 2.4rem;
  padding-bottom: 2.4rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.cine-footer__brand { display: grid; gap: 0.9rem; justify-items: start; }
.cine-footer__logo { width: 140px; height: auto; filter: brightness(0) invert(1); opacity: 0.9; }
.cine-footer__tagline { margin: 0; max-width: 32ch; font-size: 0.92rem; color: var(--light-soft); }
.cine-footer__nav { display: grid; gap: 1.8rem; }
.cine-footer__col-title {
  margin: 0 0 0.9rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.cine-footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.65rem; }
.cine-footer__links a { color: var(--light-soft); text-decoration: none; font-size: 0.95rem; transition: color 0.2s ease; }
.cine-footer__links a:hover { color: #fff; }
.cine-footer__bottom { max-width: var(--maxw); margin: 0 auto; padding: 1.4rem 0; }
.cine-footer__legal { font-size: 0.82rem; color: rgba(255, 255, 255, 0.4); margin: 0; }

/* ============================================================
   DESKTOP / TABLET — mejora de composición
============================================================ */
@media (min-width: 720px) {
  .territory__grid { grid-template-columns: 1.1fr 0.9fr; }
  .steps { grid-template-columns: repeat(3, 1fr); }
  /* Categorías y guías: 3 columnas, una card ancha de cabecera, filas de igual altura */
  .cat-grid, .guide-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; }
  .cat, .guide { aspect-ratio: auto; height: 100%; min-height: 260px; }
  .cat--wide, .guide--wide { grid-column: span 2; aspect-ratio: auto; }

  .stats { grid-template-columns: repeat(4, 1fr); }
  .why-grid { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 3rem; }
  .cine-footer__nav { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 960px) {
  .why-grid { grid-template-columns: repeat(4, 1fr); }
  .cine-footer__inner { grid-template-columns: 1fr 2fr; align-items: start; }
}

@media (min-width: 960px) {
  /* Escena 3 — collage flotante asimétrico */
  .scene--floats { min-height: 96svh; display: grid; place-items: center; }
  .floats__text { position: relative; z-index: 3; max-width: 34ch; margin: 0; }
  .floats__stage {
    position: absolute;
    inset: 0;
    max-width: none;
    display: block;
    pointer-events: none;
  }
  .float {
    position: absolute;
    width: clamp(180px, 20vw, 280px);
    pointer-events: auto;
  }
  .float img { aspect-ratio: 3 / 4; }
  /* Distintas profundidades: las grandes "cerca", las pequeñas "lejos"; 3 y 6 solapan hacia el centro */
  .float--1 { top: 6%;  left: 3%;  --rot: -5deg; transform: rotate(var(--rot)); width: clamp(200px, 21vw, 300px); }
  .float--2 { top: 47%; left: 7%;  --rot: 4deg;  transform: rotate(var(--rot)); width: clamp(150px, 15vw, 205px); }
  .float--3 { bottom: 4%; left: 18%; --rot: -3deg; transform: rotate(var(--rot)); width: clamp(158px, 15.5vw, 220px); }
  .float--4 { top: 5%;  right: 4%;  --rot: 4deg;  transform: rotate(var(--rot)); width: clamp(200px, 21vw, 300px); }
  .float--5 { top: 45%; right: 7%;  --rot: -4deg; transform: rotate(var(--rot)); width: clamp(150px, 15vw, 205px); }
  .float--6 { bottom: 5%; right: 16%; --rot: 3deg; transform: rotate(var(--rot)); width: clamp(158px, 15.5vw, 220px); }

  .giant__content { max-width: 52ch; margin-left: max(var(--pad), calc((100vw - var(--maxw)) / 2)); margin-right: auto; }
}

/* ============================================================
   ACCESIBILIDAD — movimiento reducido
============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .cat img, .guide img { transition: none; }
}

/* ================================================================
   MOVIMIENTO CINEMATOGRÁFICO (V3-2)
   Base: todo visible si el JS no corre. El JS añade html.cinematic-ready
   y solo entonces se ocultan/animan los [data-reveal].
================================================================ */
[data-reveal] { opacity: 1; transform: none; }

html.cinematic-ready [data-reveal] {
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
html.cinematic-ready [data-reveal="up"]    { transform: translateY(34px); }
html.cinematic-ready [data-reveal="fade"]  { transform: none; }
html.cinematic-ready [data-reveal="left"]  { transform: translateX(-70px) rotate(var(--rot, 0deg)); }
html.cinematic-ready [data-reveal="right"] { transform: translateX(70px) rotate(var(--rot, 0deg)); }

html.cinematic-ready [data-reveal].is-in {
  opacity: 1;
  transform: translateX(0) translateY(0) rotate(var(--rot, 0deg));
}
html.cinematic-ready [data-reveal].is-in { will-change: auto; }

/* Capa ambiental desenfocada tras el collage (solo desktop) */
.floats__bg { display: none; }

/* Escenas sticky (solo desktop y solo con JS activo) */
@media (min-width: 960px) {
  html.cinematic-ready .sticky-wrap--hero { height: 120vh; position: relative; }
  html.cinematic-ready .sticky-wrap--hero .scene--hero {
    position: sticky; top: 0; height: 100vh; min-height: 0;
  }
  html.cinematic-ready .sticky-wrap--floats { height: 210vh; position: relative; }
  html.cinematic-ready .sticky-wrap--floats .scene--floats {
    position: sticky; top: 0; height: 100vh; min-height: 0; overflow: hidden;
  }
  html.cinematic-ready .sticky-wrap--giant { height: 175vh; position: relative; }
  html.cinematic-ready .sticky-wrap--giant .scene--giant {
    position: sticky; top: 0; height: 100vh; min-height: 0;
  }

  .scene--floats .floats__bg {
    display: block;
    position: absolute;
    inset: -12%;
    z-index: 0;
    /* Misma foto que el hero: continuidad visual al soltar la escena pinneada */
    background: url("../img/planes/arrecife-sirenas/principal.jpg") center / cover no-repeat;
    filter: blur(72px) saturate(1.15);
    opacity: 0.26;
    transform: scale(1.2);
    pointer-events: none;
  }
  .scene--floats .floats__text { z-index: 3; }
  .scene--floats .floats__stage { z-index: 2; }

  .float img { will-change: transform; }

  /* Capítulos dentro de la misma escena pinneada (cross-fade por progreso de scroll) */
  html.cinematic-ready .scene--floats .floats__chapter--2 {
    position: absolute;
    inset: 0;
    opacity: 0;
  }

  /* Entrada tipo mazo de cartas: las fotos ascienden mientras entran en diagonal */
  html.cinematic-ready .scene--floats .float[data-reveal="left"]:not(.is-in) {
    transform: translateY(56px) translateX(-70px) rotate(var(--rot, 0deg));
  }
  html.cinematic-ready .scene--floats .float[data-reveal="right"]:not(.is-in) {
    transform: translateY(56px) translateX(70px) rotate(var(--rot, 0deg));
  }
}

/* Móvil: el collage revela en vertical (sin deslizar en horizontal ni rotar) */
@media (max-width: 959px) {
  html.cinematic-ready .float[data-reveal] { transform: translateY(28px); }
  html.cinematic-ready .float[data-reveal].is-in { transform: none; }
}

/* Móvil: hero más compacto y legible */
@media (max-width: 600px) {
  .hero__note { display: none; }
  .hero__title { font-size: clamp(2.2rem, 11vw, 3.2rem); }
  .hero__sub { font-size: 1.02rem; margin-top: 1.1rem; }
  .hero__actions {
    flex-direction: column;
    width: 100%;
    max-width: 300px;
    margin: 1.8rem auto 0;
    gap: 0.7rem;
  }
  .hero__actions .btn { width: 100%; }
}

/* Movimiento reducido: anular reveals, sticky y parallax; todo visible */
@media (prefers-reduced-motion: reduce) {
  html.cinematic-ready [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  html.cinematic-ready .sticky-wrap--hero,
  html.cinematic-ready .sticky-wrap--floats,
  html.cinematic-ready .sticky-wrap--giant { height: auto; }
  html.cinematic-ready .sticky-wrap--hero .scene--hero,
  html.cinematic-ready .sticky-wrap--floats .scene--floats,
  html.cinematic-ready .sticky-wrap--giant .scene--giant { position: static; height: auto; }
  .float img, .scene--giant .scene__bg { transform: none !important; }
  .hero__bg { animation: none !important; transform: none !important; filter: none !important; }
  .hero__scroll::after { animation: none !important; }
  .hero__content { transform: none !important; opacity: 1 !important; filter: none !important; }
  .hero__actions { opacity: 1 !important; }
  .hero__veil { opacity: 0 !important; }
  .floats__chapter--1, .floats__chapter--2 {
    position: static !important; opacity: 1 !important;
    filter: none !important; transform: none !important;
  }
}

/* ================================================================
   PULIDO CINEMATOGRÁFICO (V3-2C)
================================================================ */

/* B — Velo del hero: lo oscurece la "cámara" al bajar (JS controla opacity) */
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #06141b;
  opacity: 0;
  pointer-events: none;
}
.hero__content { will-change: transform, opacity, filter; }

/* A — Entrada del título con algo más de recorrido y gravedad
   (el transform solo en estado oculto; al entrar vuelve a 0 vía la regla .is-in) */
html.cinematic-ready .hero__title[data-reveal] { transition-duration: 1s; }
html.cinematic-ready .hero__title[data-reveal]:not(.is-in) { transform: translateY(46px); }

/* C — Continuidad hero → escena flotante (lavado cálido al pie del hero) */
.scene--hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 24%;
  z-index: 1;
  background: linear-gradient(180deg, rgba(244, 237, 224, 0) 0%, rgba(244, 237, 224, 0.16) 100%);
  pointer-events: none;
}

/* G-light — Escena 7: números más presentes + línea de acento que entra */
.step__num { font-size: 3.1rem; }
.step { position: relative; overflow: hidden; }
.step::before {
  content: "";
  position: absolute;
  top: 0; left: 1.75rem; right: 1.75rem;
  height: 2px;
  background: linear-gradient(90deg, var(--aqua), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}
html.cinematic-ready .step[data-reveal].is-in::before { transform: scaleX(1); }
.steps .step:nth-child(2)::before { transition-delay: 0.12s; }
.steps .step:nth-child(3)::before { transition-delay: 0.24s; }


/* Reduced-motion: sin línea animada ni entrada extra */
@media (prefers-reduced-motion: reduce) {
  .step::before { transition: none !important; transform: scaleX(1) !important; }
  html.cinematic-ready .hero__title[data-reveal] { transform: none !important; }
}

/* ============================================================
   CABECERA CINEMA
   Sticky sobre el hero. Mobile: details/summary. Desktop ≥720px: nav.
============================================================ */
.cine-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(6, 20, 27, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.cine-header__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.cine-header__logo { display: flex; align-items: center; flex-shrink: 0; }
.cine-header__logo img {
  display: block;
  height: 32px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.95;
}
.cine-header__nav { display: none; }
.cine-header__list {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.cine-header__link {
  display: inline-block;
  padding: 0.45rem 0.75rem;
  color: rgba(247, 244, 238, 0.82);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: 6px;
  transition: color 0.2s, background 0.2s;
}
.cine-header__link:hover,
.cine-header__link:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  outline: none;
}
.cine-header__link--cta {
  background: var(--aqua);
  color: #fff;
  font-weight: 600;
  margin-left: 0.5rem;
}
.cine-header__link--cta:hover,
.cine-header__link--cta:focus-visible {
  background: var(--aqua-deep);
  color: #fff;
}

/* Menú móvil — details/summary sin JS */
.cine-nav-mobile { position: relative; }
.cine-nav-mobile__toggle {
  list-style: none;
  cursor: pointer;
  color: rgba(247, 244, 238, 0.88);
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0.45rem 0.9rem;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  border-radius: 6px;
  user-select: none;
}
.cine-nav-mobile__toggle::-webkit-details-marker { display: none; }
.cine-nav-mobile__toggle::marker { display: none; }
.cine-nav-mobile__panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  background: rgba(6, 20, 27, 0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 0.4rem;
  min-width: 200px;
  z-index: 20;
}
.cine-nav-mobile__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.1rem;
}
.cine-nav-mobile__list a {
  display: block;
  padding: 0.65rem 0.95rem;
  color: rgba(247, 244, 238, 0.82);
  text-decoration: none;
  font-size: 0.92rem;
  border-radius: 8px;
  transition: background 0.15s, color 0.15s;
}
.cine-nav-mobile__list a:hover,
.cine-nav-mobile__list a:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  outline: none;
}

/* Desktop: mostrar nav, ocultar details */
@media (min-width: 720px) {
  .cine-header__nav { display: flex; align-items: center; }
  .cine-nav-mobile { display: none; }

  /* Centrado real: grid de tres zonas (logo | nav | zona vacía
     equivalente) para que el nav quede centrado respecto al viewport
     y no pegado a la derecha por el justify-content anterior. */
  .cine-header__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
  }
  .cine-header__logo { justify-self: start; }
  .cine-header__nav { justify-self: center; }
}

@media (prefers-reduced-motion: reduce) {
  .cine-header__link,
  .cine-nav-mobile__list a { transition: none; }
}