/* ============================================================
   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 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; }
.topbar__logo img { width: 122px; height: auto; transition: opacity .4s ease; }
/* 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; }
.topbar__nav a {
  font-size: 15px; color: var(--ink-soft); font-weight: 500;
  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; }
.stage-visual--blank { 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;
}

.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 ---------- */
.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 h4 {
  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: 10px; 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.
   ============================================================ */
.sequence { height: 900vh; }
.sequence-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.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;
}
.stage[data-stage="0"] .stage-visual::after { background: none; }

/* ---- 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;
    background: #fff; padding: 8px 20px 18px; box-shadow: 0 12px 30px rgba(0,0,0,.12);
  }
  .topbar__nav.is-open { display: flex; }
  .topbar__nav a { padding: 13px 0; border-bottom: 1px solid #f0ede6; font-size: 17px; color: var(--ink); }
  .topbar__cta { margin-top: 12px; text-align: center; border-bottom: 0; }
  /* con el menú abierto la barra siempre va en claro */
  .topbar.on-dark .topbar__nav a { color: var(--ink); }

  /* 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. */
  .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%);
  }
  .stage .stage-copy { margin: 0 22px 42px; max-width: none; }
  /* 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; }
  .stage-copy h2 { font-size: 34px; }
  .stage-copy p { font-size: 17px; max-width: none; }
  .stage-step { font-size: 12px; 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: 15px; letter-spacing: .4em; }
  .stage-logo { width: 200px; margin: 0 auto; }
  .stage-copy p.stage-year { font-size: 76px; margin-top: 30px; }
  .stage-copy p.stage-year span { font-size: 14px; margin-bottom: 12px; }

  .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; }
}