/* ════════════════════════════════════════════════════════════════════════
   ARC SCROLL STORY — sección narrativa tipo Teachable
   Vive entre .arc-proof-section y .lp-scroll en index.html.
   Todo encapsulado bajo .arc-scroll-story. No define estilos globales y no
   afecta nav, hero, proof, lp-scroll ni footer.

   Dos modos:
   · BASE (móvil / sin GSAP / reduced-motion): todo apilado, estático, legible.
   · INTERACTIVO (desktop ≥992px, lo activa el JS añadiendo .is-interactive):
     capa sticky, círculo blanco con clip-path y 3 paneles en una sola timeline.
   ════════════════════════════════════════════════════════════════════════ */

.arc-scroll-story {
  --arc-nav-h: 60px;
  --story-pad: clamp(20px, 5vw, 80px);
  /* Receta tipográfica ÚNICA para "Más tiempo para / lo que importa".
     Única fuente de verdad compartida por pilar 1, ghost y h3 del panel 1
     (clase .arc-scroll-story__title-lock) → los tres son idénticos y el morph
     entre ellos es imperceptible. */
  --story-morph-title-size: clamp(1.8rem, 2.75vw, 3.2rem);
  --story-morph-title-lh: 1.06;
  --story-morph-title-ls: -0.01em;
  position: relative;
  background: var(--arc-ink);
  color: var(--arc-paper);
  overflow: hidden;            /* nunca dejar ver fondo fuera de la superficie */
}

/* ─────────────────────────────────────────────────────────────────────────
   BASE / FALLBACK (móvil, tablet, sin JS, prefers-reduced-motion)
   La sección se lee como un hero oscuro + tres bloques editoriales blancos.
   ───────────────────────────────────────────────────────────────────────── */

.arc-scroll-story__track { position: relative; }

.arc-scroll-story__sticky { position: relative; }

/* Fondo: absoluto detrás del intro. Los paneles blancos (opacos, z-index 3)
   lo tapan en su zona, así que cubrir todo el sticky no estorba. */
.arc-scroll-story__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  overflow: hidden;
  background-color: var(--arc-ink);
}
.arc-scroll-story__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background:
    linear-gradient(180deg, rgba(27,30,42,0.55) 0%, rgba(27,30,42,0.78) 100%);
}
.arc-scroll-story__bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  transform: scale(1.1);
  transform-origin: center center;
}

/* Intro (hero oscuro en base) */
.arc-scroll-story__intro {
  position: relative;
  z-index: 2;
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(2rem, 6vh, 4rem);
  padding: clamp(3rem, 8vh, 6rem) var(--story-pad);
  text-align: center;
}
.arc-scroll-story__headline h2 {
  margin: 0 auto;
  max-width: 18ch;
  font-family: var(--arc-font-display);
  font-weight: 500;
  font-size: clamp(1.9rem, 5.2vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--arc-paper);
}
.arc-scroll-story__headline p {
  margin: 1.1rem auto 0;
  max-width: 52ch;
  font-family: var(--arc-font-sans);
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  line-height: 1.6;
  color: rgba(237,238,242,0.78);
}
.arc-scroll-story__pillars {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  align-items: center;
}
.arc-scroll-story__pillar {
  font-family: var(--arc-font-display);
  font-weight: 500;
  font-size: clamp(1.15rem, 2.4vw, 1.55rem);
  line-height: 1.15;
  color: var(--arc-paper);
  text-align: center;
}

/* Capa blanca: en base es sólo un contenedor normal (sin círculo) */
.arc-scroll-story__white {
  position: relative;
  z-index: 3;
  background: var(--arc-paper);
  color: var(--arc-ink);
}
.arc-scroll-story__ghost { display: none; }   /* sólo existe en modo interactivo */

/* ── Título-candado: receta única para "Más tiempo para / lo que importa" ──
   La comparten pilar 1, ghost y h3 del panel 1. Mismo font/size/lh/ls/align en
   todos los estados → la transición es imperceptible. El salto de línea lo
   fuerzan los <span> (display:block), nunca el navegador. */
.arc-scroll-story__title-lock {
  font-family: var(--arc-font-display);
  font-weight: 500;
  font-size: var(--story-morph-title-size);
  line-height: var(--story-morph-title-lh);
  letter-spacing: var(--story-morph-title-ls);
  text-align: left;
  white-space: normal;            /* el <span> manda; sin nowrap accidental */
}
.arc-scroll-story__title-lock > span { display: block; white-space: nowrap; }

/* ── Receta tipográfica compartida (SÓLO tipografía, sin composición) ──
   Misma fuente de verdad que title-lock: las variables --story-morph-title-*.
   La usan los pilares 2 y 3 para igualar el tamaño/lh/ls/familia del pilar 1,
   PERO conservan su composición (centrado, sus <br>, su movimiento, su caja).
   No define text-align ni nada del morph: eso queda en title-lock. */
.arc-scroll-story__pillar-type {
  font-family: var(--arc-font-display);
  font-weight: 500;
  font-size: var(--story-morph-title-size);
  line-height: var(--story-morph-title-lh);
  letter-spacing: var(--story-morph-title-ls);
}

.arc-scroll-story__panels { display: block; }

.arc-scroll-story__panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(3.5rem, 9vh, 7rem) var(--story-pad);
  border-top: 1px solid var(--arc-cloud);
}
.arc-scroll-story__panel:first-child { border-top: 0; }

.arc-scroll-story__eyebrow {
  display: inline-block;
  font-family: var(--arc-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--arc-vermillion);
  margin-bottom: 1.1rem;
}
.arc-scroll-story__panel-text h3 {
  margin: 0 0 1.1rem;
  font-family: var(--arc-font-display);
  font-weight: 500;
  font-size: clamp(1.8rem, 3.4vw, 2.9rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--arc-ink);
}
.arc-scroll-story__panel-text p {
  margin: 0 0 1.6rem;
  max-width: 46ch;
  font-family: var(--arc-font-sans);
  font-size: clamp(1rem, 1.5vw, 1.13rem);
  line-height: 1.6;
  color: var(--arc-steel);
}
.arc-scroll-story__bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem 1.6rem;
}
.arc-scroll-story__bullets li {
  position: relative;
  padding-left: 1.4rem;
  font-family: var(--arc-font-sans);
  font-size: 0.98rem;
  line-height: 1.4;
  color: var(--arc-ink);
}
.arc-scroll-story__bullets li::before {
  content: "\2192";              /* flecha fina → (reemplaza el punto) */
  position: absolute;
  left: 0;
  top: 0;
  color: var(--arc-vermillion);
  font-family: var(--arc-font-sans);
  font-weight: 500;
  line-height: 1.4;              /* igual que el li → alinea con la 1ª línea */
}

.arc-scroll-story__bullets li::before {
  opacity: 0;
  transform: translateX(-0.5rem);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}
.arc-scroll-story__bullets.is-arrow-visible li::before {
  opacity: 1;
  transform: translateX(0);
}
.arc-scroll-story__bullets.is-arrow-visible li:nth-child(1)::before { transition-delay: 0s; }
.arc-scroll-story__bullets.is-arrow-visible li:nth-child(2)::before { transition-delay: 0.2s; }
.arc-scroll-story__bullets.is-arrow-visible li:nth-child(3)::before { transition-delay: 0.4s; }
.arc-scroll-story__bullets.is-arrow-visible li:nth-child(4)::before { transition-delay: 0.6s; }
.arc-scroll-story__bullets.is-arrow-visible li:nth-child(5)::before { transition-delay: 0.8s; }
.arc-scroll-story__bullets:not(.is-arrow-visible) li::before {
  transition-duration: 0.1s;
  transition-delay: 0s;
}

.arc-scroll-story__panel-media {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: var(--arc-card);
  box-shadow: var(--arc-shadow-md);
  aspect-ratio: 4 / 3;
}
.arc-scroll-story__panel-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Tablet: dos columnas en los paneles base */
@media (min-width: 640px) {
  .arc-scroll-story__panel { grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4rem); }
  .arc-scroll-story__panel--reverse .arc-scroll-story__panel-text  { order: 2; }
  .arc-scroll-story__panel--reverse .arc-scroll-story__panel-media { order: 1; }
}

/* ─────────────────────────────────────────────────────────────────────────
   MODO INTERACTIVO — sólo desktop y sólo cuando el JS añade .is-interactive
   Aquí vive toda la maquinaria sticky + círculo + paneles superpuestos.
   Si el JS no corre, NADA de esto aplica → la base estática queda visible.
   ───────────────────────────────────────────────────────────────────────── */
@media (min-width: 992px) {
  .arc-scroll-story.is-interactive {
    overflow: visible;          /* el sticky necesita contexto de scroll normal */
  }

  .arc-scroll-story.is-interactive .arc-scroll-story__track {
    height: 460vh;              /* recorrido de scroll para toda la narrativa */
  }

  .arc-scroll-story.is-interactive .arc-scroll-story__sticky {
    position: sticky;
    top: var(--arc-nav-h);
    height: calc(100dvh - var(--arc-nav-h));
    overflow: hidden;          /* recorta el fondo bajo el círculo */
    background: var(--arc-ink);
  }

  /* Fondo a pantalla completa dentro del sticky */
  .arc-scroll-story.is-interactive .arc-scroll-story__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    margin: 0;
    min-height: 0;
  }
  .arc-scroll-story.is-interactive .arc-scroll-story__bg::after {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    background:
      linear-gradient(180deg, rgba(27,30,42,0.50) 0%, rgba(27,30,42,0.74) 100%);
  }

  /* Intro centrado, pilares abajo */
  .arc-scroll-story.is-interactive .arc-scroll-story__intro {
    position: absolute;
    inset: 0;
    z-index: 2;
    margin: 0;
    min-height: 0;
    display: block;
    padding: 0;
  }
  /* Bloque principal: izquierda, más bajo y mucho más grande (editorial Teachable).
     El <br> del título define el salto; white-space:nowrap evita líneas extra. */
  .arc-scroll-story.is-interactive .arc-scroll-story__headline {
    position: absolute;
    left: clamp(48px, 8vw, 120px);
    top: 44%;
    transform: translateY(-50%);
    width: min(94vw, 1400px);
    max-width: none;
    text-align: left;
  }
  .arc-scroll-story.is-interactive .arc-scroll-story__headline h2 {
    margin: 0;
    max-width: none;
    text-align: left;
    font-size: clamp(2.4rem, 4.6vw, 4.8rem);
    line-height: 1.02;
    white-space: nowrap;
  }
  .arc-scroll-story.is-interactive .arc-scroll-story__headline p {
    margin: 1.6rem 0 0;
    max-width: 56ch;
    text-align: left;
    font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  }
  /* Pilares grandes y abiertos hacia los lados (protagonistas, no subtítulos).
     pillar1 queda a la izquierda → origen real del círculo (lo mide el JS). */
  .arc-scroll-story.is-interactive .arc-scroll-story__pillars {
    position: absolute;
    left: 0;
    right: 0;
    bottom: clamp(8vh, 12vh, 14vh);
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    /* gap algo más ajustado: los pilares 2 y 3 ahora usan la tipografía grande
       del pilar 1 y necesitan más aire horizontal para no apretarse. NO cambia
       padding (eso movería el pilar 1 = origen del círculo). */
    gap: clamp(1rem, 2.2vw, 2.75rem);
    padding: 0 clamp(48px, 8vw, 120px);
  }
  .arc-scroll-story.is-interactive .arc-scroll-story__pillar {
    flex: 0 1 auto;
    max-width: 12ch;
    font-size: clamp(1.4rem, 2.2vw, 3rem);
    line-height: 1.0;
    will-change: transform, opacity;
  }
  /* Tipografía compartida en interactivo: gana a .arc-scroll-story__pillar
     (font-size/line-height) para que los pilares 2 y 3 igualen al pilar 1.
     No toca text-align → conservan su lectura centrada. */
  .arc-scroll-story.is-interactive .arc-scroll-story__pillar-type {
    font-size: var(--story-morph-title-size);
    line-height: var(--story-morph-title-lh);
    letter-spacing: var(--story-morph-title-ls);
  }
  /* pillar1: la tipografía la da .arc-scroll-story__title-lock (receta única
     compartida con ghost y h3 del panel 1). Los <span> fuerzan las dos líneas.
     Aquí sólo el layout. */
  .arc-scroll-story.is-interactive [data-arc-story-pillar="1"] {
    max-width: none;
  }
  /* pillar2: dos líneas exactas ("Crecimiento empresarial" / "que perdura"). */
  .arc-scroll-story.is-interactive [data-arc-story-pillar="2"] {
    max-width: none;
    white-space: nowrap;
  }
  /* pillar3: dos líneas exactas ("Hecho para adaptarse y" / "evolucionar"). */
  .arc-scroll-story.is-interactive [data-arc-story-pillar="3"] {
    max-width: none;
    white-space: nowrap;
  }

  /* Capa blanca recortada en círculo */
  .arc-scroll-story.is-interactive .arc-scroll-story__white {
    position: absolute;
    inset: 0;
    z-index: 3;
    --circle-x: 50%;
    --circle-y: 80%;
    --circle-r: 0px;
    clip-path: circle(var(--circle-r) at var(--circle-x) var(--circle-y));
    -webkit-clip-path: circle(var(--circle-r) at var(--circle-x) var(--circle-y));
    background: var(--arc-paper);
    color: var(--arc-ink);
    will-change: clip-path;
  }

  /* Título fantasma: copia negra del pilar 1. La tipografía la da title-lock
     (idéntica a pilar 1 y h3). JS lo ancla por su esquina sup-izq: arranca sobre
     pillar1 y viaja hasta la esquina sup-izq del h3 del panel 1. */
  .arc-scroll-story.is-interactive .arc-scroll-story__ghost {
    display: block;
    position: absolute;
    left: 50%;
    top: 80%;
    width: max-content;
    max-width: none;
    margin: 0;
    color: var(--arc-ink);
    will-change: transform, opacity;
    pointer-events: none;
  }

  /* Paneles superpuestos: cada uno ocupa todo el sticky */
  .arc-scroll-story.is-interactive .arc-scroll-story__panels {
    position: absolute;
    inset: 0;
  }
  .arc-scroll-story.is-interactive .arc-scroll-story__panel {
    position: absolute;
    inset: 0;
    max-width: none;
    margin: 0;
    padding: 0 clamp(48px, 7vw, 120px);
    border: 0;
    grid-template-columns: 1.02fr 0.98fr;
    gap: clamp(3rem, 5vw, 6rem);
    align-content: center;
    opacity: 0;
    visibility: hidden;
    will-change: transform, opacity;
  }
  .arc-scroll-story.is-interactive .arc-scroll-story__panel-text {
    max-width: 560px;
    justify-self: end;
    width: 100%;
  }
  .arc-scroll-story.is-interactive .arc-scroll-story__panel--reverse .arc-scroll-story__panel-text {
    justify-self: start;
  }
  .arc-scroll-story.is-interactive .arc-scroll-story__panel-media {
    aspect-ratio: auto;
    height: min(64vh, 560px);
    width: 100%;
    max-width: 600px;
  }
  .arc-scroll-story.is-interactive .arc-scroll-story__panel--reverse .arc-scroll-story__panel-media {
    justify-self: end;
  }
  .arc-scroll-story.is-interactive .arc-scroll-story__panel-text h3 {
    font-size: clamp(2rem, 2.8vw, 3.1rem);
  }

  /* Paneles 2 y 3: bloques COMPACTOS (alto = su contenido ≈ la imagen); NO
     ocupan todo el viewport. El JS (measureStack) los apila justo debajo de la
     imagen del panel 1 con una separación mínima (STACK_GAP) y los sube con el
     scroll. El panel 1 conserva su inset:0 (centrado) para no afectar el círculo
     ni el morph; por eso esta regla excluye al panel 1. */
  .arc-scroll-story.is-interactive [data-arc-story-panel="2"],
  .arc-scroll-story.is-interactive [data-arc-story-panel="3"] {
    inset: auto;
    top: 0;
    left: 0;
    right: 0;
    height: auto;
    align-content: start;
  }

  /* Candado tipográfico: fuerza la receta única (title-lock) en los tres
     estados con especificidad suficiente para ganar a las reglas de arriba.
     Resultado: pilar 1, ghost y h3 del panel 1 son pixel-idénticos en
     font-size / line-height / letter-spacing / alineación. */
  .arc-scroll-story.is-interactive [data-arc-story-pillar="1"].arc-scroll-story__title-lock,
  .arc-scroll-story.is-interactive .arc-scroll-story__ghost.arc-scroll-story__title-lock,
  .arc-scroll-story.is-interactive .arc-scroll-story__panel-text h3.arc-scroll-story__title-lock {
    font-size: var(--story-morph-title-size);
    line-height: var(--story-morph-title-lh);
    letter-spacing: var(--story-morph-title-ls);
    text-align: left;
    white-space: normal;
  }

  /* El JS gestiona opacity/visibility/transform de paneles, bullets y media.
     Estados iniciales para evitar parpadeos antes de que la timeline corra: */
  /* Sólo el panel 1 oculta sus bullets y su media al inicio (su entrada los
     revela con el morph + el rectángulo gris). Los paneles 2 y 3 quedan
     visibles desde el principio: NO usan fade — sólo suben con el scroll,
     apilados debajo del panel 1. */
  .arc-scroll-story.is-interactive [data-arc-story-panel="1"] .arc-scroll-story__bullets li { opacity: 0; }

  /* Panel 1 — la foto entra como un "rectángulo gris" que se abre desde el
     centro hacia los lados (clip-path horizontal, lo anima el JS). El gris que
     se ve mientras se abre es var(--arc-cloud); la imagen sólo aparece cuando
     el rectángulo ya está completamente abierto. No toca el círculo ni el morph. */
  .arc-scroll-story.is-interactive [data-arc-story-panel="1"] .arc-scroll-story__panel-media {
    background: var(--arc-cloud);
    opacity: 0;                  /* oculto hasta que el rectángulo gris se abre (JS) */
  }
  .arc-scroll-story.is-interactive [data-arc-story-panel="1"] .arc-scroll-story__panel-media img {
    opacity: 0;
  }

  /* El grupo de paneles sube en bloque con el scroll (sin fades). */
  .arc-scroll-story.is-interactive .arc-scroll-story__panels { will-change: transform; }
}

/* ─────────────────────────────────────────────────────────────────────────
   MÓVIL / TABLET (≤991px) — overrides sobre el fallback base.
   El intro oscuro muestra sólo título + subtítulo (los tres pilares ya
   aparecen abajo como títulos de los paneles blancos). La imagen de fondo
   se ve más natural, sin zoom excesivo.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
  .arc-scroll-story {
    min-height: auto;
    position: relative;
    overflow: hidden;
  }

  .arc-scroll-story__sticky {
    display: grid;
  }

  /* No repetir los pilares sobre la imagen: ya están en los paneles blancos */
  .arc-scroll-story__pillars { display: none; }

  /* Caja del intro compacta (estilo Teachable): suficiente para título +
     subtítulo, pero NO tan vertical que obligue a un recorte exagerado de una
     imagen horizontal. clamp acota el alto en pantallas muy altas o muy bajas. */
  .arc-scroll-story__intro {
    grid-area: 1 / 1;
    min-height: auto;
    gap: clamp(1.25rem, 4vh, 2rem);
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .arc-scroll-story__bg {
    position: relative;
    grid-area: 1 / 1;
    inset: auto;
    height: auto;
    min-height: 0;
  }

  .arc-scroll-story__white {
    grid-column: 1;
  }

  /* Fondo con la misma receta visual que Teachable: cover centrado, sin zoom
     extra en tablet/movil y blur menor. */
  .arc-scroll-story__bg-img {
    object-fit: cover;
    object-position: 50% 50%;
    transform: none;
  }

  /* Overlay un poco más claro en móvil: deja respirar la imagen sin perder la
     lectura del título/subtítulo (gradiente más suave que el base 0.55→0.78). */
  .arc-scroll-story__bg::after {
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    background:
      linear-gradient(180deg, rgba(27,30,42,0.48) 0%, rgba(27,30,42,0.66) 100%);
  }
}

@media (max-width: 767px) {
  .arc-scroll-story {
    min-height: auto;
    position: relative;
    top: auto;
  }

  .arc-scroll-story__intro {
    padding-top: 4rem;
    padding-bottom: 4rem;
    text-align: left;
    align-items: flex-start;
  }

  .arc-scroll-story__headline h2,
  .arc-scroll-story__headline p {
    margin-left: 0;
    margin-right: 0;
    text-align: left;
  }
}