/**
 * Anika "El Pase" — horizontal editorial track (rework 2026-06-18).
 *
 * Reemplaza el antiguo vertical reveal-wipe (height 0→100%) por un TRACK
 * EDITORIAL HORIZONTAL. Concepto "El Pase" (la línea de pase / service line):
 * la sección abre como un lienzo NEGRO PLANO continuo con el hero; la cabecera
 * blanca + hairline dorada cosen intro → paneles (sin imagen tras el título).
 *
 * Desktop (≥1024px, pointer fine, sin prefers-reduced-motion):
 *   El JS (app.js) pinea `.sc-anika-wipe__sticky` durante un runway vertical y
 *   desplaza `.sc-anika-wipe__track` en translateX (la página "se mueve de
 *   lado"). Un rail dorado abajo comunica que el movimiento lateral es
 *   intencional. Los folios (numerales) hacen parallax ~0.85× para dar
 *   profundidad. El scrub posee la curva (ease:'none' en JS); las
 *   micro-entradas usan --ease-out-quart.
 *
 * Mobile (<1024px) / coarse pointer / prefers-reduced-motion:
 *   SIN pin, SIN translateX. El track cae a stack VERTICAL de paneles (~72vh)
 *   con crossfade de opacidad (reveal). El JS no setea height del wrapper.
 *
 * Refinamiento 2026-06-18 (feedback cliente):
 *   A) Lienzo NEGRO PLANO continuo: se eliminó `.sc-anika-wipe__bleed` (la 1ª
 *      imagen tenue tras la cabecera) que creaba una costura visible hero→
 *      sección. La sección abre en --color-dark #000 puro y fluye sin línea
 *      desde el fondo oscuro del hero (cuyo overlay termina en rgba(0,0,0,.78)).
 *   B) Contenido acoplado al scroll: cada panel envuelve su foto en
 *      `.sc-anika-wipe__media` (overflow:hidden) para parallax intra-panel
 *      (la foto deriva en sentido opuesto al track). El JS también acopla
 *      `[data-anika-content]` (título/body/CTA) y el folio al scrub. Solo
 *      transform/opacity, GPU, ease:'none' (lo posee el scrub). Gated igual
 *      que el pin: desactivado en mobile/coarse/reduced-motion.
 *
 * Markup:
 *   .sc-anika-wipe
 *     .sc-anika-wipe__wrapper[data-anika-runway-multiplier="N"]  (JS: height=runway)
 *       .sc-anika-wipe__sticky                                   (JS pin target)
 *         .sc-anika-wipe__viewport                               (overflow:hidden, 100vh)
 *           .sc-anika-wipe__track                                (flex row; JS translateX)
 *             .sc-anika-wipe__intro
 *               .sc-anika-wipe__intro-title
 *               .sc-anika-wipe__spine
 *             .sc-anika-wipe__panel[data-anika-index]  × N
 *               .sc-anika-wipe__media[data-anika-media]  (overflow:hidden)
 *                 .sc-anika-wipe__bg                     (JS: intra-panel parallax)
 *               .sc-anika-wipe__scrim
 *               .sc-anika-wipe__folio                    (JS: parallax)
 *               .sc-anika-wipe__text[data-anika-content] (JS: scroll-coupled reveal)
 *                 .sc-anika-wipe__title
 *                 .sc-anika-wipe__body
 *         .sc-anika-wipe__rail > .sc-anika-wipe__rail-fill
 *
 * Tokens: solo existentes (tokens.css). gold #D99E39, gold-ink #a87410,
 * cream, dark #000, font-serif Merriweather, font-sans Overpass, --space-*,
 * --ease-out-quart. NO se inventan tokens nuevos.
 *
 * @package SmartCateringChild
 */

/* ───────────────────────────────────────────────────────────────────────────
 * Section shell — lienzo negro plano continuo (sin costura con el hero)
 * ─────────────────────────────────────────────────────────────────────────── */

/* Negro plano puro. El hero por encima termina en rgba(0,0,0,0.78) y la sección
 * arranca en #000 sólido: la transición es invisible (sin línea/borde/scrim en
 * el límite). Sin border, sin box-shadow, sin margin que pinte un seam. */
body.scc-fase0 .sc-anika-wipe {
  background: var(--color-dark, #000);
  color: #fff;
  position: relative;
  overflow: hidden;
  border: 0;
  box-shadow: none;
  margin-top: 0;
}

body.scc-fase0 .sc-anika-wipe__wrapper {
  position: relative;
  background: var(--color-dark, #000);
  /* En desktop el JS setea height = runway (multiplier × ~90vh) para el pin.
   * En el fallback vertical el wrapper queda height:auto (ver media queries). */
}

body.scc-fase0 .sc-anika-wipe__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  background: var(--color-dark, #000);
  overflow: hidden;
  isolation: isolate;
}

/* ───────────────────────────────────────────────────────────────────────────
 * Viewport + horizontal track
 * ─────────────────────────────────────────────────────────────────────────── */

body.scc-fase0 .sc-anika-wipe__viewport {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
}

body.scc-fase0 .sc-anika-wipe__track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  height: 100%;
  /* JS aplica el translateX vía scrub. ease:'none' lo posee el ScrollTrigger. */
  will-change: transform;
}

/* Pista de salida: aire al final del track para que el ÚLTIMO panel no quede
 * pegado al borde derecho al cerrar el scroll lateral. Scopeado a
 * .is-anika-coupled (la clase la añade el JS justo antes de crear el
 * ScrollTrigger, solo con el pin horizontal activo: desktop, fine pointer y
 * sin reduced-motion). computeDistance() recoge el scrollWidth ya ampliado. */
body.scc-fase0 .sc-anika-wipe__wrapper.is-anika-coupled .sc-anika-wipe__track {
  padding-inline-end: clamp(2rem, 10vw, 10rem);
}

/* ── Intro como panel-overline (sangra del hero, no es un slab suelto) ── */
body.scc-fase0 .sc-anika-wipe__intro {
  position: relative;
  flex: 0 0 auto;
  width: min(40rem, 78vw);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 8vh, 6rem) clamp(1.5rem, 4vw, 3.5rem) clamp(2rem, 8vh, 6rem) clamp(1.5rem, 5vw, 5rem);
}

body.scc-fase0 .sc-anika-wipe__intro-title {
  font-family: var(--font-serif, "Merriweather", serif);
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0;
  max-width: 38rem;
  color: #fff;
  text-wrap: balance;
  /* La cabecera ahora vive sobre negro plano (sin hero-bleed): el AA es total,
   * la sombra solo da peso óptico sutil. */
  text-shadow: 0 1px 24px rgba(0, 0, 0, 0.45);
}

/* Hairline / spine dorado: corre bajo la cabecera y continúa hacia el track,
 * cosiendo intro → paneles. */
body.scc-fase0 .sc-anika-wipe__spine {
  display: block;
  height: 1px;
  width: 100%;
  margin-top: clamp(1.5rem, 3vh, 2.5rem);
  background: linear-gradient(90deg, var(--color-gold, #D99E39) 0%, var(--color-gold, #D99E39) 64%, transparent 100%);
  transform-origin: left center;
}

/* ── Panels: retrato editorial ~72vh, scrim inferior real, folio, texto ── */
body.scc-fase0 .sc-anika-wipe__panel {
  position: relative;
  flex: 0 0 auto;
  width: min(34rem, 86vw);
  height: 72vh;
  margin-inline: clamp(0.75rem, 1.5vw, 1.75rem);
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  border-radius: var(--radius-md, 4px);
}

/* Media wrapper: recorta el sobre-escalado del __bg para que el parallax
 * intra-panel (drift opuesto al track) no muestre bordes. */
body.scc-fase0 .sc-anika-wipe__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

body.scc-fase0 .sc-anika-wipe__bg {
  position: absolute;
  /* Sobre-escala respecto al media (-6% por lado) → margen para el drift sin
   * descubrir el lienzo negro. El JS mueve esto en translateX (parallax). */
  inset: -7% -8%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  will-change: transform;
}

/* Scrim anclado abajo: contraste REAL para el texto (no el viejo overlay
 * diagonal plano). Oscurece el tercio inferior donde vive la copy. */
body.scc-fase0 .sc-anika-wipe__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.88) 0%,
    rgba(0, 0, 0, 0.72) 24%,
    rgba(0, 0, 0, 0.3) 52%,
    transparent 78%
  );
}

/* Folio editorial en la esquina superior-izquierda (sustituye el "División 01"
 * + el numeral suelto). Parallax ~0.85× lo conduce el JS vía translateX. */
body.scc-fase0 .sc-anika-wipe__folio {
  position: absolute;
  top: clamp(1rem, 3vh, 2rem);
  left: clamp(1.25rem, 3vw, 2rem);
  z-index: 2;
  font-family: var(--font-serif, "Merriweather", serif);
  font-size: clamp(3rem, 7vw, 5rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-gold, #D99E39);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);
  will-change: transform;
}

body.scc-fase0 .sc-anika-wipe__text {
  position: relative;
  z-index: 2;
  max-width: 60ch;
  padding: clamp(1.5rem, 4vh, 2.75rem) clamp(1.5rem, 4vw, 2.5rem);
}

body.scc-fase0 .sc-anika-wipe__title {
  font-family: var(--font-serif, "Merriweather", serif);
  font-size: clamp(1.625rem, 3.4vw, 2.4rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 0.75rem;
  color: #fff;
  text-wrap: balance;
}

body.scc-fase0 .sc-anika-wipe__body {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 1.5rem;
  text-wrap: pretty;
}

body.scc-fase0 .sc-anika-wipe__text .sc-button {
  margin-top: 0.25rem;
}

/* ── Contenido acoplado al scroll (Refinamiento B) ──────────────────────────
 * El contenido es VISIBLE por defecto (nunca se gatea su visibilidad en JS).
 * Solo cuando el track horizontal está pineado el JS añade `.is-anika-coupled`
 * al wrapper y conduce transform/opacity de [data-anika-content] vía scrub
 * (entrada al centrarse el panel). Sin pin no hay transform aquí. */
body.scc-fase0 .sc-anika-wipe__text[data-anika-content] {
  will-change: auto;
}
body.scc-fase0 .sc-anika-wipe__wrapper.is-anika-coupled .sc-anika-wipe__text[data-anika-content] {
  will-change: transform, opacity;
}

/* ───────────────────────────────────────────────────────────────────────────
 * Progress rail (gold) — solo durante el pin horizontal en desktop.
 * Oculto por defecto; el gate desktop lo muestra y el JS conduce el fill.
 * ─────────────────────────────────────────────────────────────────────────── */
body.scc-fase0 .sc-anika-wipe__rail {
  display: none;
}

body.scc-fase0 .sc-anika-wipe__rail-fill {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--color-gold, #D99E39);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

/* ───────────────────────────────────────────────────────────────────────────
 * DESKTOP HORIZONTAL GATE — solo aquí el track se comporta como pista lateral.
 * El JS replica este gate (min-width:1024px AND pointer:fine AND !reduced-motion)
 * para decidir si pinea. CSS y JS deben coincidir.
 * ─────────────────────────────────────────────────────────────────────────── */
@media (min-width: 1024px) and (pointer: fine) {
  body.scc-fase0 .sc-anika-wipe__rail {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    height: 3px;
    background: rgba(255, 255, 255, 0.12);
  }
}

/* Reduced motion en desktop fine-pointer: aunque el gate de tamaño aplique,
 * el JS NO pinea; ocultamos el rail (no hay scroll lateral que comunicar). */
@media (min-width: 1024px) and (pointer: fine) and (prefers-reduced-motion: reduce) {
  body.scc-fase0 .sc-anika-wipe__rail {
    display: none;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
 * FALLBACK VERTICAL — <1024px O coarse pointer.
 * Sin pin, sin translateX: paneles apilados verticalmente con crossfade.
 * El JS no setea height del wrapper en estos casos.
 * ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1023.98px), (pointer: coarse) {
  body.scc-fase0 .sc-anika-wipe__wrapper {
    height: auto !important;
  }
  body.scc-fase0 .sc-anika-wipe__sticky {
    position: relative;
    height: auto;
    overflow: visible;
  }
  body.scc-fase0 .sc-anika-wipe__viewport {
    height: auto;
    overflow: visible;
    display: block;
  }
  body.scc-fase0 .sc-anika-wipe__track {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: auto;
    transform: none !important;
    will-change: auto;
  }
  body.scc-fase0 .sc-anika-wipe__intro {
    width: 100%;
    height: auto;
    min-height: 48vh;
    padding: clamp(3.5rem, 10vh, 6rem) var(--container-padding, 1.5rem) clamp(2rem, 5vh, 3.5rem);
  }
  body.scc-fase0 .sc-anika-wipe__intro-title {
    max-width: 32rem;
  }
  body.scc-fase0 .sc-anika-wipe__panel {
    width: 100%;
    height: 72vh;
    min-height: 30rem;
    margin-inline: 0;
    border-radius: 0;
    transform: none !important;
  }
  body.scc-fase0 .sc-anika-wipe__folio {
    transform: none !important;
  }
  /* Refinamiento B desactivado: sin pin no hay scrub que conduzca el contenido.
   * El __bg vuelve a cubrir exacto (sin sobre-escala) y el contenido queda fijo. */
  body.scc-fase0 .sc-anika-wipe__bg {
    inset: 0;
    transform: none !important;
    will-change: auto;
  }
  body.scc-fase0 .sc-anika-wipe__text {
    max-width: none;
    transform: none !important;
    opacity: 1 !important;
    will-change: auto;
  }
  /* El rail no aplica en el fallback (ya está display:none por defecto). */
}

/* ───────────────────────────────────────────────────────────────────────────
 * Reveal crossfade — la entrada por opacidad (Emil: opacity-only, sin layout).
 * Se apoya en el sistema [data-reveal] global (app.js añade .is-revealed).
 * Default VISIBLE; solo oculta cuando <html> tiene .js-reveal-ready (opt-in).
 * ─────────────────────────────────────────────────────────────────────────── */
html.js-reveal-ready body.scc-fase0 .sc-anika-wipe__panel[data-reveal]:not(.is-revealed),
html.js-reveal-ready body.scc-fase0 .sc-anika-wipe__intro[data-reveal]:not(.is-revealed) {
  opacity: 0;
}
body.scc-fase0 .sc-anika-wipe__panel[data-reveal],
body.scc-fase0 .sc-anika-wipe__intro[data-reveal] {
  opacity: 1;
  transition: opacity 0.6s var(--ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1));
}

/* En el track horizontal (desktop pin) NO ocultamos los paneles fuera de
 * viewport por opacidad: el reveal IO no dispara para items que arrancan
 * off-screen horizontalmente, dejándolos en blanco. Forzamos visibles. */
@media (min-width: 1024px) and (pointer: fine) {
  html.js-reveal-ready body.scc-fase0 .sc-anika-wipe__panel[data-reveal]:not(.is-revealed),
  html.js-reveal-ready body.scc-fase0 .sc-anika-wipe__intro[data-reveal]:not(.is-revealed) {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.scc-fase0 .sc-anika-wipe__wrapper {
    height: auto !important;
  }
  body.scc-fase0 .sc-anika-wipe__sticky {
    position: relative;
    height: auto;
    overflow: visible;
  }
  body.scc-fase0 .sc-anika-wipe__viewport {
    height: auto;
    overflow: visible;
    display: block;
  }
  body.scc-fase0 .sc-anika-wipe__track {
    flex-direction: column;
    align-items: stretch;
    height: auto;
    transform: none !important;
    will-change: auto;
  }
  body.scc-fase0 .sc-anika-wipe__intro {
    width: 100%;
    height: auto;
    min-height: 48vh;
  }
  body.scc-fase0 .sc-anika-wipe__panel {
    width: 100%;
    height: 72vh;
    min-height: 30rem;
    margin-inline: 0;
    border-radius: 0;
    transform: none !important;
  }
  body.scc-fase0 .sc-anika-wipe__folio {
    transform: none !important;
  }
  /* Refinamiento B desactivado bajo reduced-motion: sin movimiento de contenido
   * ni parallax de imagen; solo el crossfade de opacidad para comprensión. */
  body.scc-fase0 .sc-anika-wipe__bg {
    inset: 0;
    transform: none !important;
    will-change: auto;
  }
  body.scc-fase0 .sc-anika-wipe__text {
    transform: none !important;
    opacity: 1 !important;
    will-change: auto;
  }
  /* Reduced motion conserva el crossfade (comprensión), elimina movimiento. */
  body.scc-fase0 .sc-anika-wipe__panel[data-reveal],
  body.scc-fase0 .sc-anika-wipe__intro[data-reveal] {
    transition: opacity 0.3s ease;
  }
}