/* GestionYa - capa de scroll storytelling (se carga despues de site.css)
   Solo transform / opacity / clip-path. Los estados iniciales los fija
   motion-scroll.js; aqui van la geometria y los colores por variables. */

/* ---------- Progreso de lectura ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; z-index: 41;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
  will-change: transform;
}

/* ---------- Pin del mockup junto a los pasos (>= 1024px) ---------- */
.split--pin { align-items: start; }
.split--pin .split__media { align-self: start; }
.split--pin .split__media .frame { will-change: transform; }

/* ---------- Linea de progreso y pasos encendidos ---------- */
.steps { position: relative; }
.steps__track {
  position: absolute; left: 21px; top: 0; bottom: 0; width: 2px;
  pointer-events: none; z-index: 0;
}
.steps__track-base {
  position: absolute; inset: 0;
  background: var(--border);
  opacity: .9;
}
.band-ink .steps__track-base { background: rgba(243,243,237,.14); opacity: 1; }
.steps__track-fill {
  position: absolute; inset: 0;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top center;
  will-change: transform;
}
.steps__item { position: relative; z-index: 1; }
.steps__item .card-icon {
  transition: background-color .45s var(--ease), color .45s var(--ease), transform .45s var(--ease), box-shadow .45s var(--ease);
}
.steps__item.is-lit .card-icon,
.band-ink .steps__item.is-lit .card-icon {
  background: var(--accent);
  color: var(--accent-ink);
  transform: scale(1.06);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 18%, transparent);
}
/* En pantallas angostas los iconos van encima del texto: la linea cruzaria el texto, se oculta */
@media (max-width: 620px) { .steps__track { display: none; } }

/* ---------- Bandas oscuras: franja de acento que barre el borde superior ---------- */
.band-ink { position: relative; }
.band-sweep {
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
  will-change: transform;
}

/* ---------- CTA final: el fondo de acento se despliega ---------- */
.band-accent { position: relative; }
.js .band-accent.has-bg { background: transparent; }
.band-accent__bg {
  position: absolute; inset: 0; z-index: 0;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top center;
  will-change: transform;
}
.band-accent.has-bg > .wrap { position: relative; z-index: 1; }

/* ---------- Rejilla de modulos: el icono entra con giro (no toca y/opacity de .reveal) ---------- */
.grid-modules .card-icon { will-change: transform; }

/* ---------- Accesibilidad ---------- */
@media (prefers-reduced-motion: reduce) {
  .scroll-progress, .band-sweep, .steps__track { display: none; }
  .steps__track-fill, .band-accent__bg { transform: none; }
  .js .band-accent.has-bg { background: var(--accent); }
  .steps__item.is-lit .card-icon { transform: none; }
}