/* ============================================================
   HOME — secuencia de transformación
   Dos variantes independientes: desktop/tablet (pin + scrub)
   y teléfono (revelado por sección).
   ============================================================ */

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

/* ---------- barra de carga (solo Home) ----------
   Fondo oscuro para empalmar con la portada: cuando se va, no hay
   parpadeo blanco de por medio. */
.preloader {
  position: fixed; inset: 0; z-index: 200; background: var(--dark);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 28px;
  transition: opacity .5s ease, visibility .5s;
  /* Salvavidas: si el JS no corre (error, bloqueado), el propio CSS la
     retira a los 6 s. Nunca debe quedarse tapando la página. */
  animation: preloader-salvavidas 0s linear 6s forwards;
}
.preloader img { width: 180px; height: auto; }
.preloader__bar {
  width: min(220px, 44vw); height: 2px; border-radius: 2px;
  background: rgba(255, 255, 255, .18); overflow: hidden;
}
.preloader__bar span {
  display: block; height: 100%; width: 4%; background: var(--orange);
  animation: preloader-avance 1.8s cubic-bezier(.4, 0, .2, 1) forwards;
}
/* Al terminar de cargar la barra se completa y todo se desvanece. */
.preloader.is-done { opacity: 0; visibility: hidden; }
.preloader.is-done .preloader__bar span { width: 100%; animation: none; transition: width .3s ease; }
@keyframes preloader-avance { 0% { width: 4%; } 55% { width: 62%; } 100% { width: 88%; } }
@keyframes preloader-salvavidas { to { opacity: 0; visibility: hidden; } }

@media (max-width: 767px) { .preloader img { width: 140px; } }

/* ---------- barra superior (páginas del sitio) ---------- */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 110;
  transition: background .4s ease, box-shadow .4s ease;
}
.topbar__inner {
  max-width: 1400px; margin: 0 auto; padding: 20px 40px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.topbar__logo {
  position: relative; display: block; line-height: 0;
  transition: opacity .4s ease, visibility .4s;
}
.topbar__logo img { width: 122px; height: auto; transition: opacity .4s ease; }
/* En la portada el logotipo grande ya está en pantalla: el de la barra
   sobra y se leían dos Nissen a la vez. Reaparece a partir de la etapa 2.
   visibility (y no solo opacity) lo saca también del orden de tabulación. */
.topbar.is-hero .topbar__logo { opacity: 0; visibility: hidden; }
/* Se intercambian los dos PNG reales del logo. Invertir con filtro CSS
   distorsionaba el verde de la marca (salía rosa). */
.topbar__logo--dark { position: absolute; inset: 0; opacity: 0; }
.topbar__nav { display: flex; align-items: center; gap: 30px; }

/* Blanco de toque minimo 24x24 px (WCAG 2.2 SC 2.5.8). Los enlaces de menu y
   de pie median 20-23 px de alto: se les da aire vertical sin mover el diseno,
   porque el padding crece dentro de la caja flex, no separa los elementos. */
.topbar__nav a {
  font-size: 15px; color: var(--ink-soft); font-weight: 500;
  padding: 4px 0; transition: color .3s ease;
}
.topbar__nav a:hover { color: var(--ink); }
.topbar__cta {
  padding: 10px 20px; border-radius: 999px; border: 1px solid #d8d4ca;
  color: var(--ink) !important;
}
.topbar__cta:hover { background: var(--ink); color: #fff !important; border-color: var(--ink); }
.topbar__toggle { display: none; width: 40px; height: 40px; border: 0; background: none; cursor: pointer; padding: 9px; }
.topbar__toggle span { display: block; height: 2px; background: var(--ink); margin: 4px 0; border-radius: 2px; }

/* sobre etapas oscuras la barra se invierte */
.topbar.on-dark .topbar__logo--light { opacity: 0; }
.topbar.on-dark .topbar__logo--dark { opacity: 1; }
.topbar.on-dark .topbar__nav a { color: rgba(255,255,255,.72); }
.topbar.on-dark .topbar__nav a:hover { color: #fff; }
.topbar.on-dark .topbar__cta { border-color: rgba(255,255,255,.4); color: #fff !important; }
.topbar.on-dark .topbar__cta:hover { background: #fff; color: var(--ink) !important; }
.topbar.on-dark .topbar__toggle span { background: #fff; }

/* ---------- riel lateral de secciones (campo de gravedad) ---------- */
.rail {
  position: fixed; right: 34px; top: 50%; transform: translateY(-50%);
  z-index: 105; display: flex; flex-direction: column; align-items: flex-end;
  transition: opacity .4s ease;
}
.rail.is-hidden { opacity: 0; pointer-events: none; }
.rail__item {
  position: relative; display: flex; align-items: center; justify-content: flex-end;
  gap: 12px; height: 26px; padding: 0; border: 0; background: none; cursor: pointer;
  transition: transform .45s cubic-bezier(.22,1,.36,1);
}
.rail__dot {
  width: 7px; height: 7px; border-radius: 50%; background: #c3beb2; flex: 0 0 auto;
  transition: transform .45s cubic-bezier(.22,1,.36,1), background .35s ease;
}
.rail__item.is-active .rail__dot { background: var(--orange); }
.rail__item:hover .rail__dot { background: var(--ink-soft); }

.rail__label {
  display: flex; align-items: baseline; gap: 9px; white-space: nowrap;
  font-size: 13px; color: var(--ink); font-weight: 500;
  opacity: 0; transform: translateX(10px);
  transition: opacity .4s ease, transform .45s cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}
.rail__label i {
  font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .12em;
  color: var(--orange-text);
}
.rail__item.is-active .rail__label,
.rail__item:hover .rail__label { opacity: 1; transform: translateX(0); }

/* sobre etapas oscuras */
.rail.on-dark .rail__dot { background: rgba(255,255,255,.42); }
.rail.on-dark .rail__item.is-active .rail__dot { background: var(--orange); }
.rail.on-dark .rail__label { color: #fff; }
.rail.on-dark .rail__label i { color: #f0a36a; }

/* ---------- etapas (común) ---------- */
.stage-visual { overflow: hidden; }
.stage-visual svg { width: 100%; height: 100%; }
.stage-photo { width: 100%; height: 100%; object-fit: cover; }
/* <picture> es inline por defecto: sin esto el height:100% del <img> no tiene
   contra qué resolver y la foto se colapsa. */
.stage-visual picture { display: block; width: 100%; height: 100%; }
/* Las etapas de plano son "hoja blanca": necesitan fondo opaco propio para
   tapar la foto del hero mientras el morph las barre por encima. */
.stage-visual[data-svg] { background: var(--paper); }
.stage-logo { width: 300px; height: auto; margin: 0 auto; }
.stage-tagline {
  font-size: 19px; letter-spacing: .5em; text-transform: uppercase;
  color: var(--ink); font-weight: 600; margin-top: 20px; padding-left: 9px;
}
.stage-copy p.stage-year {
  margin-top: 52px; line-height: 1;
  font-size: 128px; font-weight: 200; color: var(--ink); max-width: none;
}
.stage-copy p.stage-year span {
  display: block; font-size: 17px; letter-spacing: .36em;
  text-transform: uppercase; color: var(--ink-soft); font-weight: 600; margin-bottom: 16px;
}

/* La portada va sobre foto oscura: el bloque de marca se invierte. */
.stage--hero .stage-tagline { color: #fff; }
.stage--hero .stage-copy p.stage-year { color: #fff; }
.stage--hero .stage-copy p.stage-year span { color: rgba(255,255,255,.74); }

.stage-step {
  font-size: 13px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--orange-text); font-weight: 700; margin-bottom: 18px;
}
.stage-copy h2 { font-size: 54px; margin-bottom: 18px; letter-spacing: -.02em; }
.stage-copy p { color: var(--ink-soft); font-size: 21px; line-height: 1.5; max-width: 42ch; }
.stage-copy--on-dark h2 { color: #fff; }
.stage-copy--on-dark p { color: rgba(255,255,255,.86); }
.stage-copy--on-dark .stage-step { color: #f0a36a; }

/* ---------- bifurcación del hero ---------- */
.hero-fork {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  margin-top: 54px; max-width: 460px;
}
.stage-copy--hero .hero-fork { margin-left: auto; margin-right: auto; }
.hero-fork__card {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 22px 16px 18px; border: 1px solid #ded9cf; border-radius: 12px;
  background: rgba(255, 255, 255, .5);
  transition: border-color .35s ease, transform .35s ease, box-shadow .35s ease;
}
.hero-fork__card img { width: 90px; height: auto; }
.hero-fork__track {
  font-size: 10px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--orange-text); font-weight: 700;
}
.hero-fork__card:hover {
  border-color: var(--orange); transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .09);
}

/* Sobre la foto: vidrio esmerilado en vez de tarjeta blanca. */
.stage--hero .hero-fork__card {
  border-color: rgba(255, 255, 255, .26);
  background: rgba(255, 255, 255, .07);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
}
.stage--hero .hero-fork__track { color: #f0a36a; }
.stage--hero .hero-fork__card:hover {
  border-color: var(--orange); background: rgba(255, 255, 255, .14);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .34);
}

/* Las etapas inactivas siguen en el DOM con opacity:0. Sin esto, los
   enlaces del hero seguirían siendo clicables y alcanzables con Tab
   cuando la etapa ya no se ve. */
.stage:not(.is-active) { pointer-events: none; }

/* ---------- bifurcación ---------- */
.fork { padding: 120px 6vw 130px; background: var(--paper-warm); }
.fork-intro { max-width: 760px; margin: 0 auto 60px; text-align: center; }
.eyebrow {
  font-size: 12px; letter-spacing: .32em; text-transform: uppercase;
  color: var(--orange-text); font-weight: 700; margin-bottom: 18px;
}
.fork-intro h2 { font-size: 40px; }
.fork-cards { display: grid; gap: 24px; max-width: 1040px; margin: 0 auto; }
.fork-card {
  display: block; padding: 44px 40px 40px; background: var(--paper);
  border-radius: 16px; box-shadow: 0 2px 18px rgba(0,0,0,.05);
  transition: transform .35s ease, box-shadow .35s ease;
}
.fork-card:hover { transform: translateY(-5px); box-shadow: 0 16px 42px rgba(0,0,0,.12); }
.fork-card__label {
  display: block; font-size: 11px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 700; margin-bottom: 16px;
}
.fork-card h3 { font-size: 30px; margin-bottom: 14px; }
.fork-card p { color: var(--ink-soft); font-size: 17px; line-height: 1.5; margin-bottom: 26px; }
.fork-card__cta {
  color: var(--orange-text); font-weight: 700; font-size: 16px;
  text-decoration: underline; text-underline-offset: 4px;
}

/* ---------- footer ---------- */
.site-footer { background: var(--dark); color: #fff; padding: 80px 6vw 34px; }
.site-footer__inner {
  max-width: 1160px; margin: 0 auto; display: grid; gap: 48px;
}
.site-footer__brand p {
  color: rgba(255,255,255,.6); font-size: 15px; margin-top: 18px; max-width: 34ch; line-height: 1.5;
}
.site-footer__nav { display: grid; gap: 40px; }
.site-footer__nav h2 {
  font-size: 11px; letter-spacing: .28em; text-transform: uppercase;
  color: #f0a36a; font-weight: 700; margin-bottom: 16px;
}
.site-footer__nav a, .site-footer__nav p {
  display: block; color: rgba(255,255,255,.78); font-size: 15px;
  margin-bottom: 6px; padding: 4px 0; line-height: 1.5;
}
.site-footer__nav a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.site-footer__legal {
  max-width: 1160px; margin: 56px auto 0; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.42); font-size: 13px;
}

/* ============================================================
   SECUENCIA — pin + scroll scrub (el MISMO morph en todos los tamaños)
   Solo cambia el acomodo del texto y la dirección del degradado.
   ============================================================ */
/* Alto de cada lámina. Tiene que ser una unidad ESTÁTICA:
   - `dvh` NO (se recalcula en vivo cuando Chrome móvil esconde su barra de
     dirección, y eso movía el suelo a media pasada, descuadrando la secuencia).
   - `vh`/`svh` tampoco: valen el alto CON la barra visible, así que en cuanto
     la barra se esconde la lámina dejaba una franja muerta abajo y ya no
     ocupaba la pantalla completa.
   - `lvh` sí: es el alto con la barra escondida — el estado real mientras se
     scrollea — y es estático, no cambia durante el recorrido.
   El JS ya no escribe esta variable: MIDE el alto real de `.sequence-pin`
   (ver fijarVH), así que CSS y JS no se pueden desincronizar. */
:root { --stage-vh: 100vh; }
@supports (height: 100lvh) { :root { --stage-vh: 100lvh; } }
.sequence { height: calc(var(--stage-vh) * 9); position: relative; }
.sequence-pin { position: sticky; top: 0; height: var(--stage-vh); overflow: hidden; }

.snap-points { position: absolute; inset: 0; pointer-events: none; }
.snap-point { display: block; height: var(--stage-vh); }
.stage {
  position: absolute; inset: 0; opacity: 0; will-change: opacity;
  display: grid; align-items: center;
}
.stage.is-active { opacity: 1; }
.stage .stage-visual { position: absolute; inset: 0; z-index: 0; }
.stage .stage-copy {
  position: relative; z-index: 2; background: none; padding: 0; border-radius: 0;
  will-change: transform, opacity;
}
/* Portada: en vez del degradado lateral/inferior de las demás etapas, un
   oscurecido parejo tipo viñeta. El texto va centrado, así que el punto más
   claro queda al centro y se cierra hacia los bordes. */
.stage[data-stage="0"] .stage-visual::after {
  background: radial-gradient(118% 82% at 50% 45%,
    rgba(12, 11, 10, .42) 0%, rgba(12, 11, 10, .64) 58%, rgba(12, 11, 10, .82) 100%);
}

/* ---- Desktop / tablet: texto a la izquierda, degradado lateral ---- */
@media (min-width: 768px) {
  .stage { grid-template-columns: 1fr 1fr; }
  .stage .stage-visual::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(100deg,
      rgba(255,255,255,.94) 0%, rgba(255,255,255,.86) 26%,
      rgba(255,255,255,.45) 48%, rgba(255,255,255,0) 66%);
  }
  .stage--photo .stage-visual::after {
    background: linear-gradient(100deg,
      rgba(16,15,14,.90) 0%, rgba(16,15,14,.74) 26%,
      rgba(16,15,14,.34) 50%, rgba(16,15,14,0) 70%);
  }
  .stage .stage-copy {
    grid-column: 1; justify-self: start; margin-left: 8vw; max-width: 560px;
  }
  .stage .stage-copy--hero {
    grid-column: 1 / -1; justify-self: center; margin: 0; text-align: center;
  }
  .stage-copy--hero .stage-tagline { padding-left: 9px; }

  .fork-cards { grid-template-columns: 1fr 1fr; gap: 28px; }
  .site-footer__inner { grid-template-columns: 1fr 2fr; gap: 80px; }
  .site-footer__nav { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   TELÉFONO (<768px) — revelado por sección, sin pin
   Composición vertical propia, no una versión encogida.
   ============================================================ */
@media (max-width: 767px) {
  .topbar__inner { padding: 14px 20px; }
  .topbar__logo img { width: 104px; }
  .topbar__toggle { display: block; }
  .topbar__nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0; display: none;
  }
  .topbar__nav.is-open { display: flex; }
  .topbar__nav a { padding: 13px 0; font-size: 17px; }
  .topbar__cta { margin-top: 4px; text-align: left; }

  /* el riel se recoge: solo puntos, sin etiquetas, más pegado al borde */
  .rail { right: 14px; }
  .rail__item { height: 22px; }
  .rail__dot { width: 6px; height: 6px; }
  .rail__label { display: none; }

  /* Mismo morph que desktop: la secuencia queda fija y el scroll la "raspa".
     El texto va abajo sobre un degradado inferior. Solo se ve una franja
     vertical de la imagen (16:9 recortada por cover), y así se busca.
     El alto lo fija --stage-vh desde JS (ver arriba). */

  /* Slides: el compositor del navegador resuelve el aterrizaje,
     aprovechando el momentum del dedo. Un deslice corto = una etapa. */
  html.is-snapping { scroll-snap-type: y mandatory; scroll-behavior: auto; }
  html.is-snapping .snap-point { scroll-snap-align: start; }
  body { overscroll-behavior-y: contain; }
  .stage { display: flex; flex-direction: column; justify-content: flex-end; }
  .stage .stage-visual::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top,
      rgba(255,255,255,.97) 0%, rgba(255,255,255,.82) 20%,
      rgba(255,255,255,.32) 42%, rgba(255,255,255,0) 60%);
  }
  .stage--photo .stage-visual::after {
    background: linear-gradient(to top,
      rgba(16,15,14,.96) 0%, rgba(16,15,14,.7) 22%,
      rgba(16,15,14,.26) 46%, rgba(16,15,14,0) 64%);
  }

  /* Los planos van a sangre igual que las fotos (ver ajustarEncuadreSVG).
     Al recortar, el plano queda ampliado ~3.8x, así que las cotas hay que
     bajarlas de tamaño: a 26px del viewBox salían como titulares. */
  .stage-visual svg .dimtxt-s4 { font-size: 13px; }
  .stage-visual svg .dim-s4 { stroke-width: 1.2px; }
  .stage .stage-copy { margin: 0 22px 42px; max-width: none; }
  /* La lámina mide `lvh` (barra de dirección escondida). Si el usuario
     scrollea hacia arriba, Chrome vuelve a sacar la barra y se come los
     últimos ~90 px: justo donde vive el texto. Se reserva esa diferencia
     exacta para que ningún renglón quede cortado nunca. */
  @supports (height: 100svh) {
    .stage .stage-copy { margin-bottom: calc(42px + (100lvh - 100svh)); }
  }
  /* texto blanco sobre foto; tinta sobre el trazo claro */
  .stage--photo .stage-copy h2 { color: #fff; }
  .stage--photo .stage-copy p { color: rgba(255,255,255,.88); }
  .stage--photo .stage-copy .stage-step { color: #f0a36a; }
  /* tipografía reequilibrada: la grande -10%, la chica +10% */
  .stage-copy h2 { font-size: 30px; }
  .stage-copy p { font-size: 19px; max-width: none; }
  .stage-step { font-size: 13px; margin-bottom: 12px; }

  /* portada centrada, sin degradado */
  .stage[data-stage="0"] { justify-content: center; align-items: center; }
  .stage[data-stage="0"] .stage-copy { text-align: center; margin: 0; }
  .stage-copy--hero .stage-tagline { padding-left: 7px; font-size: 16px; letter-spacing: .4em; }
  .stage-logo { width: 200px; margin: 0 auto; }
  .stage-copy p.stage-year { font-size: 68px; margin-top: 30px; }
  .stage-copy p.stage-year span { font-size: 15px; margin-bottom: 12px; }

  /* Lado a lado también en teléfono, en versión compacta. */
  .hero-fork { margin-top: 32px; gap: 12px; max-width: 330px; }
  .hero-fork__card { padding: 16px 8px 14px; gap: 8px; }
  .hero-fork__card img { width: 68px; }
  .hero-fork__track { font-size: 9px; letter-spacing: .2em; }

  .fork { padding: 76px 20px 84px; }
  .fork-intro { margin-bottom: 38px; }
  .fork-intro h2 { font-size: 28px; }
  .fork-card { padding: 32px 26px 30px; }
  .fork-card h3 { font-size: 24px; }

  .site-footer { padding: 60px 20px 28px; }
  .site-footer__nav { gap: 32px; }
}

/* Respeta usuarios que piden menos animación */
@media (prefers-reduced-motion: reduce) {
  .stage { transition: none !important; }
  .stage-visual svg .draw-path { stroke-dashoffset: 0 !important; }
  html { scroll-behavior: auto; }
}