/* ═══════════════════════════════════════════════════════════════
   CLM — Sistema de motion
   Se carga DESPUÉS de clm-fase2.css. No cambia layouts, colores,
   tamaños ni contenido: solo estados de entrada y microinteracciones.

   Principios (pocos y reutilizados):
     · reveal        opacity + translateY 24px
     · reveal lateral opacity + translateX 25px
     · producto      opacity + translateY + scale(.97)
     · sin rebotes, sin spring, sin recorridos largos
     · cada entrada se ejecuta UNA vez (el JS deja de observar)
   ═══════════════════════════════════════════════════════════════ */

:root {
  --mo-ease:      cubic-bezier(.22, .61, .36, 1);   /* ease-out suave */
  --mo-ease-soft: cubic-bezier(.33, .00, .20, 1);
  --mo-dur:       620ms;
  --mo-dur-fast:  380ms;
  --mo-dur-quick: 260ms;
  --mo-y:         24px;
  --mo-x:         25px;
  --mo-stagger:   90ms;
}

/* ── 0 · Progressive enhancement ──────────────────────────────────
   clm-style.css aplica `opacity:0` a .animate-on-scroll sin condición.
   Si el JS falla, la web quedaría invisible. Estas reglas devuelven
   todo a su estado final cuando no hay JS. El contenido nunca depende
   de JavaScript para existir. */
html:not(.js) .animate-on-scroll,
html:not(.js) .hero-content > *,
html:not(.js) [class*="crm__"],
html:not(.js) [class*="app__"],
html:not(.js) .flow__card,
html:not(.js) .flow__link i,
html:not(.js) .bub,
html:not(.js) .autoflow__step,
html:not(.js) .autoflow__link,
html:not(.js) .diff__node,
html:not(.js) .diff__arrow,
html:not(.js) .stepline__item,
html:not(.js) .fw-node,
html:not(.js) .fw-arrow {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
}

/* ── 1 · Reveal base (reajuste del sistema existente) ─────────────
   Se conservan los mismos data-animation ya presentes en las
   plantillas; solo se acortan recorridos y se unifica el easing. */
.animate-on-scroll {
  transition: opacity var(--mo-dur) var(--mo-ease),
              transform var(--mo-dur) var(--mo-ease);
}
.animate-on-scroll[data-animation="fade-up"]    { transform: translate3d(0, var(--mo-y), 0); }
.animate-on-scroll[data-animation="fade-down"]  { transform: translate3d(0, calc(var(--mo-y) * -.75), 0); }
.animate-on-scroll[data-animation="fade-left"]  { transform: translate3d(var(--mo-x), 0, 0); }
.animate-on-scroll[data-animation="fade-right"] { transform: translate3d(calc(var(--mo-x) * -1), 0, 0); }
.animate-on-scroll[data-animation="scale-in"]   { transform: scale(.97); }
.animate-on-scroll.is-visible                   { transform: none; }

/* ── 2 · HERO · secuencia de carga ────────────────────────────────
   El contenedor no se mueve: la secuencia la hacen sus hijos, para
   que el vídeo y la maqueta no dependan de una cadena larga. */
html.js .hero-section--tech .hero-content {
  opacity: 1 !important;
  transform: none !important;
  transition: none;
}
html.js .hero-section--tech .hero-content > * {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity 560ms var(--mo-ease), transform 560ms var(--mo-ease);
}
html.js .hero-section--tech .hero-content.is-visible > * {
  opacity: 1;
  transform: none;
}
/* eyebrow → H1 → subtítulo → CTAs → sellos de confianza */
html.js .hero-section--tech .hero-content.is-visible > *:nth-child(1) { transition-delay:  40ms; }
html.js .hero-section--tech .hero-content.is-visible > *:nth-child(2) { transition-delay: 130ms; }
html.js .hero-section--tech .hero-content.is-visible > *:nth-child(3) { transition-delay: 240ms; }
html.js .hero-section--tech .hero-content.is-visible > *:nth-child(4) { transition-delay: 350ms; }
html.js .hero-section--tech .hero-content.is-visible > *:nth-child(5) { transition-delay: 440ms; }

/* La maqueta del hero entra después del texto, contenida. */
html.js .hero-section--tech .hero-visual--app {
  transform: translate3d(var(--mo-x), 0, 0) scale(.985);
  transition: opacity 700ms var(--mo-ease), transform 700ms var(--mo-ease);
  transition-delay: 260ms;
}
html.js .hero-section--tech .hero-visual--app.is-visible { transform: none; }

/* Parallax decorativo: SOLO la retícula del hero. El vídeo no se toca. */
html.js .hero-section--tech .hero-grid { will-change: transform; }

/* ── 3 · Maquetas de software · "el producto se carga" ────────────
   Un único lenguaje para .crm (Home) y .app (ERP y páginas internas).
   El estado inicial cuelga de `html.js` (existe antes del primer
   pintado, no hay parpadeo); el final, de .is-visible en cualquier ancestro.
   Duración total ~500-900ms. */
html.js :is(.crm__side, .app__side) {
  opacity: 0;
  transform: translate3d(-8px, 0, 0);
  transition: opacity 340ms var(--mo-ease), transform 340ms var(--mo-ease);
  transition-delay: 80ms;
}
html.js :is(.crm__top, .app__top) {
  opacity: 0;
  transform: translate3d(0, -6px, 0);
  transition: opacity 340ms var(--mo-ease), transform 340ms var(--mo-ease);
  transition-delay: 150ms;
}
html.js :is(.crm__head, .app__view) {
  opacity: 0;
  transform: translate3d(0, 6px, 0);
  transition: opacity 340ms var(--mo-ease), transform 340ms var(--mo-ease);
  transition-delay: 210ms;
}
html.js :is(.crm__kpi, .kpi) {
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition: opacity 340ms var(--mo-ease), transform 340ms var(--mo-ease);
}
html.js :is(.crm__kpi, .kpi):nth-child(1) { transition-delay: 250ms; }
html.js :is(.crm__kpi, .kpi):nth-child(2) { transition-delay: 300ms; }
html.js :is(.crm__kpi, .kpi):nth-child(3) { transition-delay: 350ms; }

/* Filas de datos y tarjetas del kanban: stagger corto */
html.js :is(.tbl__row, .crm__card) {
  opacity: 0;
  transform: translate3d(0, 9px, 0);
  transition: opacity 320ms var(--mo-ease), transform 320ms var(--mo-ease);
}
html.js .tbl__row:nth-child(1) { transition-delay: 330ms; }
html.js .tbl__row:nth-child(2) { transition-delay: 380ms; }
html.js .tbl__row:nth-child(3) { transition-delay: 430ms; }
html.js .tbl__row:nth-child(4) { transition-delay: 480ms; }
html.js .tbl__row:nth-child(5) { transition-delay: 530ms; }
html.js .crm__col:nth-child(1) .crm__card { transition-delay: 330ms; }
html.js .crm__col:nth-child(2) .crm__card { transition-delay: 390ms; }
html.js .crm__col:nth-child(3) .crm__card { transition-delay: 450ms; }
html.js .crm__col:nth-child(4) .crm__card { transition-delay: 510ms; }
html.js .crm__card + .crm__card { transition-delay: 560ms; }

/* Badges/estados: aparecen al final, sin desplazamiento */
html.js :is(.pill, .crm__tag) {
  opacity: 0;
  transition: opacity 280ms var(--mo-ease);
  transition-delay: 470ms;
}

/* Barra de progreso: crece hasta EXACTAMENTE su ancho actual.
   Se escala el relleno, así que el valor visual no cambia. */
html.js .prog b {
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 480ms var(--mo-ease-soft);
  transition-delay: 430ms;
}

/* Estado final */
html.js .is-visible :is(
  .crm__side, .app__side, .crm__top, .app__top, .crm__head, .app__view,
  .crm__kpi, .kpi, .tbl__row, .crm__card, .pill, .crm__tag
) {
  opacity: 1;
  transform: none;
}
html.js .is-visible .prog b { transform: scaleX(1); }

/* ── 4 · Flujo del showcase 03 · proceso encadenado ───────────────
   Bloque → conexión → bloque → conexión… Completo en ~1,5s y se queda
   quieto. No hay loop. */
html.js .flow .flow__card {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition: opacity 420ms var(--mo-ease), transform 420ms var(--mo-ease);
}
html.js .flow .flow__link i {
  transform-origin: top center;
  transform: scaleY(0);
  transition: transform 300ms var(--mo-ease-soft);
}
html.js .flow .flow__link--h i {
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 300ms var(--mo-ease-soft);
}
html.js .flow .bub {
  opacity: 0;
  transform: translate3d(0, 6px, 0);
  transition: opacity 300ms var(--mo-ease), transform 300ms var(--mo-ease);
}

html.js .is-visible .flow .flow__card { opacity: 1; transform: none; }
html.js .is-visible .flow .flow__link i { transform: scaleY(1); }
html.js .is-visible .flow .flow__link--h i { transform: scaleX(1); }
html.js .is-visible .flow .bub { opacity: 1; transform: none; }

/* Cadena: conversación → CRM/oportunidad → documento/equipo.
   Se indexa por :nth-child y NO por :nth-of-type, porque este último
   cuenta por etiqueta (div/span) y no por clase: los hijos de .flow son
   1 tarjeta, 2 conexión, 3 fila, 4 conexión, 5 fila. */
html.js .is-visible .flow > *:nth-child(1)   { transition-delay:  60ms; }
html.js .is-visible .flow .bub--in           { transition-delay: 260ms; }
html.js .is-visible .flow .bub--out          { transition-delay: 400ms; }
html.js .is-visible .flow > *:nth-child(2) i { transition-delay: 520ms; }
html.js .is-visible .flow > *:nth-child(3) .flow__card:first-child { transition-delay: 660ms; }
html.js .is-visible .flow > *:nth-child(3) .flow__link--h i        { transition-delay: 820ms; }
html.js .is-visible .flow > *:nth-child(3) .flow__card:last-child  { transition-delay: 930ms; }
html.js .is-visible .flow > *:nth-child(4) i { transition-delay: 1060ms; }
html.js .is-visible .flow > *:nth-child(5) .flow__card:first-child { transition-delay: 1190ms; }
html.js .is-visible .flow > *:nth-child(5) .flow__link--h i        { transition-delay: 1330ms; }
html.js .is-visible .flow > *:nth-child(5) .flow__card:last-child  { transition-delay: 1420ms; }

/* ── 5 · CTA de proyecto · Proceso → Análisis → Sistema ───────────*/
html.js .proyecto-cta .fw-node {
  opacity: 0;
  transform: translate3d(0, 8px, 0) scale(.98);
  transition: opacity 380ms var(--mo-ease), transform 380ms var(--mo-ease);
}
html.js .proyecto-cta .fw-arrow {
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 260ms var(--mo-ease-soft);
}
html.js .proyecto-cta.is-visible .fw-node  { opacity: 1; transform: none; }
html.js .proyecto-cta.is-visible .fw-arrow { transform: scaleX(1); }
html.js .proyecto-cta.is-visible .mock--flow-wide > *:nth-child(1)  { transition-delay: 220ms; }
html.js .proyecto-cta.is-visible .mock--flow-wide > *:nth-child(2) { transition-delay: 420ms; }
html.js .proyecto-cta.is-visible .mock--flow-wide > *:nth-child(3)  { transition-delay: 560ms; }
html.js .proyecto-cta.is-visible .mock--flow-wide > *:nth-child(4) { transition-delay: 740ms; }
html.js .proyecto-cta.is-visible .mock--flow-wide > *:nth-child(5)  { transition-delay: 880ms; }

/* El bloque entra con algo más de presencia que un reveal normal */
html.js .proyecto-cta.animate-on-scroll {
  transform: translate3d(0, var(--mo-y), 0) scale(.985);
  transition: opacity 760ms var(--mo-ease), transform 760ms var(--mo-ease);
}
html.js .proyecto-cta.animate-on-scroll.is-visible { transform: none; }

/* ── 6 · Proceso por pasos (página Software a medida) ─────────────*/
html.js .stepline .stepline__item {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity 420ms var(--mo-ease), transform 420ms var(--mo-ease);
}
html.js .stepline .stepline__item::after {
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 320ms var(--mo-ease-soft);
}
html.js .stepline.is-visible .stepline__item { opacity: 1; transform: none; }
html.js .stepline.is-visible .stepline__item::after { transform: scaleX(1); }
html.js .stepline.is-visible .stepline__item:nth-child(1) { transition-delay:  60ms; }
html.js .stepline.is-visible .stepline__item:nth-child(2) { transition-delay: 260ms; }
html.js .stepline.is-visible .stepline__item:nth-child(3) { transition-delay: 460ms; }
html.js .stepline.is-visible .stepline__item:nth-child(4) { transition-delay: 660ms; }
html.js .stepline.is-visible .stepline__item:nth-child(5) { transition-delay: 860ms; }
html.js .stepline.is-visible .stepline__item:nth-child(6) { transition-delay: 1060ms; }
html.js .stepline.is-visible .stepline__item:nth-child(1)::after { transition-delay: 180ms; }
html.js .stepline.is-visible .stepline__item:nth-child(2)::after { transition-delay: 380ms; }
html.js .stepline.is-visible .stepline__item:nth-child(3)::after { transition-delay: 580ms; }
html.js .stepline.is-visible .stepline__item:nth-child(4)::after { transition-delay: 780ms; }
html.js .stepline.is-visible .stepline__item:nth-child(5)::after { transition-delay: 980ms; }

/* ── 7 · Flujos de automatización (cada tarjeta por separado) ─────*/
html.js .autoflow .autoflow__step {
  opacity: 0;
  transform: translate3d(-10px, 0, 0);
  transition: opacity 340ms var(--mo-ease), transform 340ms var(--mo-ease);
}
html.js .autoflow .autoflow__link {
  transform-origin: top center;
  transform: scaleY(0);
  transition: transform 220ms var(--mo-ease-soft);
}
html.js .autoflow.is-visible .autoflow__step { opacity: 1; transform: none; }
html.js .autoflow.is-visible .autoflow__link { transform: scaleY(1); }
html.js .autoflow.is-visible .autoflow__chain > *:nth-child(1) { transition-delay: 120ms; }
html.js .autoflow.is-visible .autoflow__chain > *:nth-child(2) { transition-delay: 290ms; }
html.js .autoflow.is-visible .autoflow__chain > *:nth-child(3) { transition-delay: 400ms; }
html.js .autoflow.is-visible .autoflow__chain > *:nth-child(4) { transition-delay: 570ms; }
html.js .autoflow.is-visible .autoflow__chain > *:nth-child(5) { transition-delay: 680ms; }
html.js .autoflow.is-visible .autoflow__chain > *:nth-child(6) { transition-delay: 850ms; }
html.js .autoflow.is-visible .autoflow__chain > *:nth-child(7) { transition-delay: 960ms; }
html.js .autoflow.is-visible .autoflow__chain > *:nth-child(8) { transition-delay: 1130ms; }
html.js .autoflow.is-visible .autoflow__chain > *:nth-child(9) { transition-delay: 1240ms; }

/* ── 8 · Diagrama chatbot vs agente conectado (Agentes IA) ────────*/
html.js .diff__panel .diff__node {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition: opacity 380ms var(--mo-ease), transform 380ms var(--mo-ease);
}
html.js .diff__panel .diff__arrow {
  transform-origin: top center;
  transform: scaleY(0);
  transition: transform 240ms var(--mo-ease-soft);
}
html.js .diff__panel .diff__systems {
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition: opacity 380ms var(--mo-ease), transform 380ms var(--mo-ease);
}
html.js .diff__panel .diff__actions li {
  opacity: 0;
  transition: opacity 300ms var(--mo-ease);
}
html.js .diff__panel.is-visible :is(.diff__node, .diff__systems) { opacity: 1; transform: none; }
html.js .diff__panel.is-visible .diff__arrow { transform: scaleY(1); }
html.js .diff__panel.is-visible .diff__actions li { opacity: 1; }
html.js .diff__panel.is-visible .diff__chain > *:nth-child(1) { transition-delay: 100ms; }
html.js .diff__panel.is-visible .diff__chain > *:nth-child(2) { transition-delay: 300ms; }
html.js .diff__panel.is-visible .diff__chain > *:nth-child(3) { transition-delay: 420ms; }
html.js .diff__panel.is-visible .diff__chain > *:nth-child(4) { transition-delay: 640ms; }
html.js .diff__panel.is-visible .diff__chain > *:nth-child(5) { transition-delay: 760ms; }
html.js .diff__panel.is-visible .diff__chain > *:nth-child(6) { transition-delay: 980ms; }
html.js .diff__panel.is-visible .diff__chain > *:nth-child(7) { transition-delay: 1100ms; }
html.js .diff__panel.is-visible .diff__actions li:nth-child(n)   { transition-delay: 1240ms; }
html.js .diff__panel.is-visible .diff__actions li:nth-child(n+3) { transition-delay: 1320ms; }
html.js .diff__panel.is-visible .diff__actions li:nth-child(n+5) { transition-delay: 1400ms; }
html.js .diff__panel.is-visible .diff__actions li:nth-child(n+7) { transition-delay: 1480ms; }

/* Pulso único y muy contenido al pasar por el nodo de IA. Sin neón. */
@keyframes clm-node-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(30, 111, 255, .34); }
  100% { box-shadow: 0 0 0 12px rgba(30, 111, 255, 0); }
}
html.js .diff__panel.is-visible .diff__node--accent {
  animation: clm-node-pulse 900ms var(--mo-ease-soft) 420ms 1;
}

/* ── 9 · FAQ · apertura fluida ────────────────────────────────────
   La altura la calcula el JS; aquí solo el chevron y el contenido. */
.faq-item__chevron { transition: transform 320ms var(--mo-ease), color 320ms var(--mo-ease); }
html.js .faq-item__answer { overflow: hidden; }
html.js .faq-item.is-animating .faq-item__answer {
  transition: height 320ms var(--mo-ease), opacity 260ms var(--mo-ease);
}
html.js .faq-item:not([open]) .faq-item__answer { opacity: 0; }
html.js .faq-item[open] .faq-item__answer { opacity: 1; }

/* ── 10 · Microinteracciones (coherentes en toda la web) ──────────*/
.btn {
  transition: background-color var(--mo-dur-quick) var(--mo-ease),
              border-color var(--mo-dur-quick) var(--mo-ease),
              color var(--mo-dur-quick) var(--mo-ease),
              box-shadow var(--mo-dur-quick) var(--mo-ease),
              transform var(--mo-dur-quick) var(--mo-ease);
}
.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: translateY(0); transition-duration: 90ms; }

.btn-primary:hover { box-shadow: 0 6px 18px rgba(30, 111, 255, .28); }
.btn-white:hover   { box-shadow: 0 6px 18px rgba(0, 0, 0, .16); }
.btn-green:hover   { box-shadow: 0 6px 18px rgba(25, 195, 125, .26); }

/* Enlaces con flecha: la flecha avanza 3-4px */
.pillar-link svg,
.service-link,
.srv-digital__more,
.xlinks em,
.solutions-cta svg,
.flow__link-cta {
  transition: transform var(--mo-dur-quick) var(--mo-ease);
}
.pillar-card:hover .pillar-link svg,
.solutions-cta a:hover svg { transform: translateX(4px); }
.service-card:hover .service-link,
.srv-digital__card:hover .srv-digital__more,
.xlinks a:hover em { transform: translateX(3px); }

/* Tarjetas clicables: elevación mínima, nunca scale(1.1) */
.cap-card, .chan-card, .srv-tech__card, .srv-digital__card, .xlinks a, .autoflow {
  transition: transform var(--mo-dur-quick) var(--mo-ease),
              box-shadow var(--mo-dur-quick) var(--mo-ease),
              border-color var(--mo-dur-quick) var(--mo-ease);
}

/* Menú: subrayado sutil, sin desplazar el texto */
.header-nav .nav-menu a { transition: color 200ms var(--mo-ease), background-color 200ms var(--mo-ease); }

/* ── 11 · Header · barra de producto ──────────────────────────────
   Transición suave entre reposo y scroll. El auto-ocultar se retira
   en el JS: la barra ya no desaparece al bajar. */
.site-header {
  transition: background-color 320ms var(--mo-ease),
              padding 320ms var(--mo-ease),
              box-shadow 320ms var(--mo-ease),
              backdrop-filter 320ms var(--mo-ease);
}
.site-header.is-scrolled { box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 6px 24px rgba(4, 12, 26, .28); }

/* ── 12 · Móvil · menos recorrido y menos stagger ─────────────────*/
@media (max-width: 860px) {
  :root {
    --mo-y: 16px;
    --mo-x: 0px;          /* las composiciones entran en vertical */
    --mo-dur: 520ms;
  }
  .animate-on-scroll[data-animation="fade-left"],
  .animate-on-scroll[data-animation="fade-right"] {
    transform: translate3d(0, var(--mo-y), 0);
  }
  html.js .hero-section--tech .hero-visual--app {
    transform: translate3d(0, var(--mo-y), 0) scale(.99);
    transition-delay: 180ms;
  }
  /* Stagger comprimido: las cadenas largas se acortan ~35% */
  html.js .is-visible .flow > *:nth-child(5) .flow__card:last-child { transition-delay: 1020ms; }
  html.js .stepline.is-visible .stepline__item:nth-child(6) { transition-delay: 720ms; }
  html.js .hero-section--tech .hero-grid { transform: none !important; }
}

/* ── 13 · prefers-reduced-motion ──────────────────────────────────
   Todo el contenido se muestra en su estado final. No se oculta nada,
   no hay desplazamientos, ni parallax, ni secuencias. */
@media (prefers-reduced-motion: reduce) {
  html.js .animate-on-scroll,
  html.js .hero-content > *,
  html.js :is(.crm__side, .app__side, .crm__top, .app__top, .crm__head,
                      .app__view, .crm__kpi, .kpi, .tbl__row, .crm__card, .pill, .crm__tag),
  html.js .flow :is(.flow__card, .bub),
  html.js .proyecto-cta .fw-node,
  html.js .stepline .stepline__item,
  html.js .autoflow .autoflow__step,
  html.js .diff__panel :is(.diff__node, .diff__systems),
  html.js .diff__panel .diff__actions li,
  html.js .faq-item__answer {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  html.js .prog b,
  html.js .flow .flow__link i,
  html.js .flow .flow__link--h i,
  html.js .proyecto-cta .fw-arrow,
  html.js .stepline .stepline__item::after,
  html.js .autoflow .autoflow__link,
  html.js .diff__panel .diff__arrow {
    transform: none !important;
    transition: none !important;
  }
  html.js .hero-section--tech .hero-grid { transform: none !important; }
  .btn:hover,
  .pillar-card:hover .pillar-link svg,
  .service-card:hover .service-link,
  .xlinks a:hover em { transform: none; }
  .site-header { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════
   CAPA DE ONDA · cruza el límite entre Agentes IA y Proceso
   Ya no es un bloque intercalado entre dos secciones (eso dejaba dos
   límites geométricos visibles). Ahora es una capa absoluta que vive
   DENTRO de la sección de proceso y se desborda hacia arriba, de modo
   que pinta por encima del fondo de las dos secciones y el corte
   desaparece: no hay ningún borde que la onda no cruce.
   ═══════════════════════════════════════════════════════════════ */

.wave-bridge {
  --wave-up:    96px;   /* nace por debajo del enlace de Agentes IA */
  --wave-down: 196px;   /* y baja hasta rozar el título            */

  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--wave-up) * -1);
  height: calc(var(--wave-up) + var(--wave-down));
  overflow: hidden;     /* recorta el vídeo, nunca la máscara */
  pointer-events: none;

  /* SIN z-index a propósito: un z-index aquí crea un contexto de
     apilamiento que AÍSLA el mix-blend-mode del vídeo, el negro deja de
     fundirse con la página y reaparecen los bordes rectangulares. El
     orden del DOM ya basta: esta capa va después de .process-section-bg
     (queda encima) y antes de .container, que sí lleva z-index. */
}

.wave-bridge__video {
  /* El vídeo ocupa EXACTAMENTE la capa. Es imprescindible: la máscara se
     resuelve en las coordenadas de la caja del vídeo, así que si el vídeo
     fuese más alto, el degradado quedaría fuera de vista y el corte lo
     haría el overflow — un rectángulo duro. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;

  /* El negro se funde con el azul: screen sobre un fondo oscuro deja el
     negro igual que el fondo y solo suma la luz de la cinta. */
  mix-blend-mode: screen;

  /* Casi monocromo ANTES de teñir: así los reflejos naranjas y los verdes
     acaban en el mismo azul y no aparece la mancha morada que salía al
     girar el tono directamente. Contraste y brillo devuelven el volumen. */
  filter: grayscale(.78) sepia(.52) hue-rotate(172deg) saturate(1.85)
          brightness(1.02) contrast(1.1);
  opacity: .88;

  /* Se disuelve por los cuatro lados. Abajo el degradado es largo para
     que la onda se apague antes de llegar al H2. */
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 17%, #000 74%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 36%, #000 58%, transparent 94%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(90deg, transparent 0%, #000 17%, #000 74%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 36%, #000 58%, transparent 94%);
          mask-composite: intersect;
}

/* El texto siempre por encima de la onda. */
.process-section > .container { position: relative; z-index: 2; }

/* Los tintes de fondo de AMBAS secciones se cortaban en seco justo en el
   límite (cada uno lo recorta el overflow de su sección) y eso era la
   línea que se seguía viendo. Se hacen entrar y salir progresivamente,
   de modo que en el encuentro no hay ningún cambio brusco de tono. */
.process-section-bg {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 260px);
          mask-image: linear-gradient(180deg, transparent 0, #000 260px);
}
.agents-section__bg {
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 260px), transparent 100%);
          mask-image: linear-gradient(180deg, #000 calc(100% - 260px), transparent 100%);
}

/* CAUSA REAL de la línea que se seguía viendo: la sección de Agentes IA
   mide una altura FRACCIONARIA (p. ej. 1598,51px). En ese borde a medio
   píxel se transparentaba el fondo del <body>, que es BLANCO, y mezclado
   con el azul daba una fila de rgb(72,87,107) — medido pixel a pixel.
   No era ni el vídeo ni los degradados. Se solapan 1px las dos secciones,
   que comparten color, así que el hueco subpíxel deja de existir. */
.process-section.section-padding { margin-top: -1px; }

/* El espacio lo dan ahora los propios paddings: la onda flota sobre ellos.
   Sigue siendo menor que los 200px de azul vacío que había antes. */
.agents-section.section-padding  { padding-bottom: 96px; }
.process-section.section-padding { padding-top: 92px; }

/* La cabecera de Proceso entra en dos tiempos: primero el rótulo,
   después el H2. Los pasos 01→05 ya escalonan con su data-delay. */
html.js .process-section .section-header > * {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity 520ms var(--mo-ease), transform 520ms var(--mo-ease);
}
html.js .process-section .section-header.is-visible > * { opacity: 1; transform: none; }
html.js .process-section .section-header.is-visible > *:nth-child(1) { transition-delay:  40ms; }
html.js .process-section .section-header.is-visible > *:nth-child(2) { transition-delay: 170ms; }

@media (max-width: 1024px) {
  .wave-bridge { --wave-up: 76px; --wave-down: 164px; }
  .agents-section.section-padding  { padding-bottom: 80px; }
  .process-section.section-padding { padding-top: 78px; }
}

@media (max-width: 767px) {
  .wave-bridge { --wave-up: 44px; --wave-down: 108px; }
  .wave-bridge__video { opacity: .6; }
  .agents-section.section-padding  { padding-bottom: 64px; }
  .process-section.section-padding { padding-top: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  /* Sin vídeo: queda el poster estático, integrado igual. */
  html.js .process-section .section-header > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ── Control de preferencias de cookies en el pie ─────────────────────
   Es un <button> real (accesible por teclado) que imita visualmente al
   resto de enlaces legales del pie. */
.footer-legal .footer-cookie-prefs {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: color var(--mo-dur-quick, .26s) var(--mo-ease, ease);
}
.footer-legal .footer-cookie-prefs:hover { color: var(--clm-white); }
.footer-legal .footer-cookie-prefs:focus-visible {
  outline: 2px solid var(--clm-blue);
  outline-offset: 3px;
  border-radius: 3px;
}