/* recorrido.css · base del modo A de references/recorrido-con-scroll.md (probado en Laurel, 22/10/2026).
   Solo estructura: colores, letra y botones salen de las variables del sitio. */

/* La sección es alta; lo de adentro queda fijo mientras se recorre. */
.recorrido { position: relative; height: var(--alto, 300vh); }
.recorrido__fijo { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.recorrido__poster img, .recorrido video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.recorrido video { opacity: 0; transition: opacity .3s; }
.recorrido.con-video video { opacity: 1; }

/* Degradé abajo para el texto y arriba para el encabezado: el video real tiene zonas claras. */
.recorrido__fijo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(0deg, color-mix(in srgb, var(--fondo, #000) 82%, transparent) 0%, transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--fondo, #000) 60%, transparent) 0%, transparent 18%);
}

.recorrido__paso {
  position: absolute; z-index: 2; left: var(--margen, 24px); right: var(--margen, 24px); bottom: clamp(48px, 12vh, 120px);
  opacity: 0; transform: translateY(14px); transition: opacity .45s, transform .45s;
}
.recorrido__paso.is-on { opacity: 1; transform: none; }
/* El ancho en ch va en el título: se mide con su propia letra, no con la del párrafo. */
.recorrido__paso h1, .recorrido__paso h2 { margin: 0; max-width: 15ch; }
.recorrido__paso p { max-width: 40ch; }

@media (prefers-reduced-motion: reduce) { .recorrido__paso, .recorrido video { transition: none; } }