/* ============================================================
   OCEANAVAL — Capa de animación de scroll
   Soporte CSS para js/scroll.js. Solo transform/opacity/clip-path.
   El MOVIMIENTO se conserva; los efectos de glow/cian/degradado se
   eliminan y se adaptan al sistema plano de marca (acento azul sutil).
   Estados iniciales bajo .js-anim (activados por JS solo si hay GSAP y
   NO hay prefers-reduced-motion).
   ============================================================ */

/* ---------- Reveals avanzados (estado inicial controlado por JS) ---------- */
.js-anim [data-reveal="clip"] {
  clip-path: inset(0 0 100% 0);
  will-change: clip-path, transform;
}
.js-anim [data-reveal="mask"] > * {
  will-change: transform;
}
.js-anim [data-reveal="line"] {
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
}

/* Líneas que se dibujan: separadores técnicos planos (azul de marca). */
.draw-line {
  height: 2px; width: 100%;
  background: var(--c-blue);
  transform: scaleX(0); transform-origin: left;
  opacity: 1;
}
.js-anim .draw-line { will-change: transform; }

/* Envoltorio de máscara para líneas de texto (overflow oculto) */
.mask-line { display: block; overflow: hidden; }
.mask-line > span { display: block; }

/* ---------- Showcase full-bleed: velo neutro sólido para legibilidad ---------- */
/* Sin degradado de color: velo negro plano y sutil solo en el borde inferior. */
.showcase__media .showcase__scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.45) 100%);
}
.showcase__media .feature-row__badge { z-index: 3; will-change: transform; }
/* Línea técnica que se dibuja en el borde inferior (azul plano). */
.showcase__scanline {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; z-index: 3;
  background: var(--c-blue);
  transform: scaleX(0); transform-origin: center; opacity: 1;
}

/* ---------- Sección de impacto (foto full-bleed) ---------- */
.impact {
  position: relative;
  width: 100vw; margin-left: calc(50% - 50vw);
  min-height: clamp(30rem, 86vh, 56rem);
  display: grid; align-items: end;
  overflow: hidden;
  isolation: isolate;
  background: var(--c-black);
}
.impact__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.impact__media img {
  position: absolute; inset: 0; width: 100%; height: 118%;
  object-fit: cover; object-position: center 35%;
  will-change: transform;
}
/* Velo neutro en degradado: claro arriba (la foto luce) y oscuro abajo a la
   izquierda, donde se apoya el título — sin tinte de color. */
.impact__media::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.32) 50%, rgba(0, 0, 0, 0.72) 100%);
}
.impact__inner {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--maxw); margin-inline: auto;
  padding-inline: var(--gutter);
  padding-bottom: clamp(3rem, 9vh, 7rem); padding-top: clamp(6rem, 16vh, 11rem);
  color: var(--c-white);
}
.impact__kicker { margin-bottom: 1.75rem; color: var(--c-white); }
.impact__kicker::before { background: var(--c-white); }
.impact__title {
  font-family: var(--f-base); font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.1; letter-spacing: -0.02em;
  color: var(--c-white); max-width: 18ch; text-wrap: balance;
}
.impact__title em { font-family: var(--f-base); font-style: normal; font-weight: 700; color: var(--c-blue-sub); }
.impact__sub { margin-top: 1.75rem; max-width: 46ch; color: var(--c-on-dark-muted); font-size: var(--t-lead); }
.impact__hud {
  position: absolute; top: clamp(2rem, 6vh, 4rem); right: var(--gutter); z-index: 2;
  font-family: var(--f-base); font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--c-white);
  display: flex; align-items: center; gap: 0.75rem;
}
.impact__hud::before { content: ""; width: 2rem; height: 2px; background: var(--c-white); }
@media (max-width: 560px) { .impact__hud { display: none; } }

/* ---------- Servicios: índice gigante pinneado (scroll-linked) ---------- */
.svc-list-wrap { position: relative; }
.svc-list { position: relative; z-index: 1; }
.svc-ghost {
  position: absolute; top: 50%; right: 0; transform: translateY(-50%);
  z-index: 0; pointer-events: none;
  font-family: var(--f-base); font-weight: 700;
  font-size: clamp(9rem, 22vw, 18rem); line-height: 0.8;
  color: transparent; -webkit-text-stroke: 1px var(--c-line);
  opacity: 0.6; user-select: none;
  display: none;
}
.svc-ghost.is-on { display: block; }
/* Barra de progreso vertical (azul plano). */
.svc-progress {
  position: absolute; left: calc(-1 * var(--s-3)); top: 0; width: 2px; height: 100%; z-index: 2;
  background: var(--c-line);
  display: none;
}
.svc-progress.is-on { display: block; }
.svc-progress__bar {
  position: absolute; left: 0; top: 0; width: 100%; height: 0%;
  background: var(--c-blue);
  will-change: height;
}

/* ---------- Stats: barra que se dibuja bajo cada cifra (azul) ---------- */
.stat { position: relative; overflow: hidden; }
.stat__rule {
  position: absolute; left: 0; top: 0; height: 2px; width: 100%;
  background: var(--c-blue);
  transform: scaleX(0); transform-origin: left;
}

/* ---------- Imágenes feature: reveal con máscara y zoom-out sutil ---------- */
.js-anim .feature-row__media img,
.js-anim .showcase__media img { will-change: transform; }
.feature-row__media, .showcase__media { isolation: isolate; }

/* ---------- Reduced motion: anula TODO lo de esta capa ---------- */
@media (prefers-reduced-motion: reduce) {
  .js-anim [data-reveal="clip"] { clip-path: none !important; }
  .js-anim [data-reveal="line"], .draw-line, .showcase__scanline, .stat__rule { transform: none !important; }
  .svc-ghost, .svc-progress { display: none !important; }
  .impact__media img { height: 100%; }
}

/* No-anim seguro: si el JS no marca .js-anim, los reveals avanzados quedan visibles */
[data-reveal="clip"]:not(.js-anim *) { clip-path: none; }
[data-reveal="line"]:not(.js-anim *) { transform: none; }

/* ---------- Móvil: simplificar ---------- */
@media (max-width: 900px) {
  .svc-ghost, .svc-progress { display: none !important; }
}