/* Prototipo: el candado se abre y se despliega en la cadena "De la dirección a la operación".
   Todo lo de este archivo aplica solo cuando el script agrega .is-scrub a la sección.
   Sin JS, con movimiento reducido, en pantallas chicas o bajas, la sección queda estática como antes. */

.span.is-scrub { padding: 0; }
.span.is-scrub .span__pin { position: relative; }
.span.is-scrub .span__stage {
  position: relative;
  height: calc(var(--vh, 100svh) - var(--hdr, 72px));
  display: flex;
  align-items: center;
  overflow: hidden;
}
.span.is-scrub .span__stage > .wrap { position: relative; width: 100%; }

/* Contenido que aparece con el scroll (los valores los escribe el script) */
.span.is-scrub .block__head { margin-bottom: 40px; }
.span.is-scrub .chain__group { opacity: var(--groups, 0); }
.span.is-scrub .chain__node h3,
.span.is-scrub .chain__node p {
  opacity: var(--n, 0);
  transform: translateY(calc((1 - var(--n, 0)) * 14px));
}
.span.is-scrub .chain__loop { opacity: var(--loop, 0); }

/* Los puntos reales los reemplaza el overlay; la línea se dibuja con el scroll */
.span.is-scrub .chain__node::before { opacity: 0; }
.span.is-scrub .chain__list::before { opacity: var(--line, 0); }
.js .span.is-scrub .chain .chain__list::after { transform: scaleX(var(--line, 0)); transition: none; }

/* Overlay con el candado */
.lc { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.lc__shackle { fill: none; stroke: var(--cream-100); stroke-width: 40; }
.lc__body { fill: var(--cream-100); }