/* ===========================================================
   PROCESS-SCRUB — foco que ilumina cada paso
   ===========================================================
   Mismo criterio que css/about-scrub.css: componente aislado que
   depende solo de las variables ya definidas en :root por
   css/style.css. La intensidad de cada paso la controla js/process-scrub.js
   escribiendo la custom property --intensity en cada .process__step.

   El foco (--intensity) se aplica en TODOS los anchos, pero con
   mecánicas distintas (ver js/process-scrub.js):
   - Escritorio (≥1025px): la sección se fija (pin) y el foco avanza
     con el scroll reservado.
   - Móvil (<1025px): SIN pin (el contenido no cabe en una pantalla),
     el scroll es normal y el foco simplemente sigue al paso que está
     más cerca del centro de la pantalla en cada momento. */

@media (min-width: 1025px) {
  /* Alto del "carril" de scroll durante el cual la sección queda
     fijada. Lo fija JS vía --process-scrub-scroll-px (ver
     CONFIG.STEP_SCROLL_PX × 4 pasos); 880px de respaldo si el JS no
     llega a ejecutarse. A diferencia de hero-scrub/about-scrub (que
     usan un múltiplo de la altura del viewport, Nvh), aquí el carril
     es una distancia FIJA en píxeles: la duración pedida es "~2 clics
     de rueda de ratón por paso", algo físico/táctil, no relativo al
     tamaño de pantalla. */
  .process[data-process-scrub] {
    position: relative;
    height: calc(100vh + var(--process-scrub-scroll-px, 880px));
    /* Se anula el padding-block de .process (definido en style.css):
       con la sección fijada, ese espacio se controla desde
       .process-scrub__sticky (padding-top más ajustado) para que el
       contenido aparezca nada más fijarse, sin un hueco previo. */
    padding-block: 0;
  }

  /* Se ancla justo debajo del header, igual que .about-scrub__sticky. */
  .process-scrub__sticky {
    position: sticky;
    top: var(--header-h, 0px);
    height: calc(100svh - var(--header-h, 0px));
    overflow: hidden;
    background: var(--color-bg);
    padding-top: var(--space-3);
  }

  /* Con el botón "Consultoría gratuita" añadido al final, el bloque
     completo (eyebrow + título + subtítulo + pasos + botón) podía
     superar el alto del sticky en ventanas de escritorio más bajas
     (p.ej. ~650-770px de alto de viewport, portátiles con la barra de
     marcadores visible), recortando el botón por el overflow:hidden de
     arriba. Se comprime el padding superior del sticky, el margen
     inferior del subtítulo y el superior del botón (sin tocar el
     tamaño del texto) para que quepa incluso en ventanas bajas (~600px
     de alto), con margen de sobra en las normales. */
  .process[data-process-scrub] .section-subtitle {
    margin-bottom: var(--space-3);
  }
  .process[data-process-scrub] .process__actions {
    margin-top: var(--space-2);
  }

  /* Intensidad de cada paso (número + título + descripción). 1 por
     defecto: si el JS no llega a ejecutarse, se ven todos con
     normalidad en vez de apagados para siempre. El salto entre pasos
     es deliberadamente "duro" (un solo paso activo a la vez, sin
     rampa progresiva) con una transición corta para que no sea un
     corte brusco — la duración de cada paso ya la marca el propio
     scroll, no hace falta suavizarla más.

     Selector reforzado (.process[data-process-scrub] .process__step[data-reveal],
     especificidad 0,4,0): cada paso también es un target del sistema
     de "reveal" de main.js (regla .js-anim [data-reveal].is-visible
     { opacity:1 }, especificidad 0,3,0 en style.css). Una vez un paso
     entra en pantalla queda con is-visible para siempre, así que sin
     este refuerzo esa regla ganaba y el opacity: calc(...) de aquí
     nunca se veía — todos los pasos se quedaban en opacity:1 pasara lo
     que pasara con --intensity. */
  .process[data-process-scrub] .process__step[data-reveal] {
    --intensity: 1;
    opacity: calc(0.45 + var(--intensity) * 0.55);
    transition: opacity 250ms ease;
  }

  /* Con cada paso iluminándose por turnos ya no hace falta el camino de
     puntitos que los conectaba (en móvil ya estaba oculto, ver
     style.css @media max-width:1024px). */
  .process[data-process-scrub] .process__path {
    display: none;
  }
}

@media (min-width: 1025px) and (prefers-reduced-motion: reduce) {
  .process[data-process-scrub] { height: auto; padding-block: var(--space-7); }
  .process-scrub__sticky { position: static; height: auto; overflow: visible; padding-top: 0; }
  .process[data-process-scrub] .process__step[data-reveal] { opacity: 1 !important; }
}

/* Móvil: mismo apagado/encendido que en escritorio (misma especificidad
   reforzada, mismo motivo — ver comentario arriba), pero SIN tocar el
   layout de la sección (sigue fluyendo en su alto natural, sin pin). */
@media (max-width: 1024px) {
  .process[data-process-scrub] .process__step[data-reveal] {
    --intensity: 1;
    opacity: calc(0.45 + var(--intensity) * 0.55);
    transition: opacity 250ms ease;
  }
}

@media (max-width: 1024px) and (prefers-reduced-motion: reduce) {
  .process[data-process-scrub] .process__step[data-reveal] { opacity: 1 !important; }
}