/* PortSync V2.5 · recorrido.css — «Del muelle al sensor»: secuencia de cuadros renderizados (Blender) que avanza con el
   scroll en pilote.html. Colores de tokens (pilote-tokens.css / portsync-tokens.css); letra Fraunces + DM Sans. */
.recorrido { position: relative; height: 430vh; background: var(--pl-fondo-3); }
.recorrido__marco {
  position: sticky; top: var(--alto-barra); height: calc(100svh - var(--alto-barra)); min-height: 460px; overflow: hidden; isolation: isolate;
  background: var(--pl-fondo-3);
}
.recorrido__poster, .recorrido__poster img, .recorrido__lienzo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.recorrido__poster img { object-fit: cover; }
.recorrido__lienzo { z-index: 1; }
/* velo para que las tarjetas lean sobre cualquier cuadro */
.recorrido__marco::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(0deg, color-mix(in srgb, var(--pl-fondo-3) 72%, transparent), transparent 42%), linear-gradient(90deg, color-mix(in srgb, var(--pl-fondo-3) 55%, transparent), transparent 46%);
}
.recorrido__texto, .recorrido__demo, .recorrido__ancla, .recorrido__salto, .recorrido__guia { position: absolute; z-index: 3; }
.recorrido__texto {
  left: var(--margen); bottom: clamp(60px, 10vh, 104px); width: min(440px, calc(100% - 2 * var(--margen)));
  padding: 18px 22px 20px; border-radius: 20px; background: var(--pl-vidrio); border: 1px solid var(--pl-vidrio-borde);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); color: var(--ink);
}
.recorrido__kicker { margin: 0 0 8px; display: flex; align-items: center; gap: 10px; font: 500 var(--t-rotulo)/1 var(--f-dato); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.recorrido__paso { font-variant-numeric: tabular-nums; }
.recorrido__titulo { margin: 0; font: 400 clamp(26px, 3vw, 38px)/1.08 var(--f-titulo); letter-spacing: -0.01em; color: var(--ink); }
.recorrido__desc { margin: 10px 0 0; font: 400 var(--t-chico)/1.5 var(--f-texto); color: var(--ink-2); }
.recorrido__demo {
  left: var(--margen); bottom: 16px; right: var(--margen); display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px;
  font: 500 12px/1.35 var(--f-texto); color: var(--ink-2);
}
.recorrido__demo span:last-child { max-width: 62ch; }
.recorrido__guia { right: var(--margen); bottom: 16px; font: 500 12px/1 var(--f-dato); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.recorrido__guia::after { content: " ↓"; }
.recorrido__salto {
  top: 14px; right: var(--margen); padding: 8px 14px; border-radius: var(--r-pill); background: var(--pl-vidrio); border: 1px solid var(--pl-vidrio-borde);
  color: var(--ink); text-decoration: none; font: 500 var(--t-rotulo)/1 var(--f-texto);
}
.recorrido__salto:hover { background: var(--accent-soft); }
.recorrido__salto:focus-visible, .recorrido__estatico a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.recorrido__barra { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 3px; background: var(--pl-vidrio-borde); }
.recorrido__barra i { display: block; height: 100%; width: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); }
/* rótulo sobre la pieza que muestra el cuadro (las anclas vienen del JSON: fracciones 0-1 del cuadro) */
.recorrido__ancla { left: 0; top: 0; display: flex; align-items: center; gap: 10px; pointer-events: none; will-change: transform; }
.recorrido__ancla[hidden] { display: none; }
.recorrido__punto { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 30%, transparent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 22%, transparent); flex: none; }
.recorrido__ancla b { padding: 6px 11px; border-radius: var(--r-pill); background: var(--pl-vidrio); border: 1px solid var(--pl-vidrio-borde); color: var(--ink); font: 600 12.5px/1 var(--f-texto); white-space: nowrap; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.recorrido__ancla.es-izq { flex-direction: row-reverse; }

/* movimiento reducido: sin pegado ni cuadros que avanzan; los momentos clave quedan fijos, cada uno con su texto */
.recorrido--fijo { height: auto; padding: 36px var(--margen) 28px; }
.recorrido--fijo .recorrido__marco, .recorrido--fijo .recorrido__salto { display: none; }
.recorrido__estatico { list-style: none; margin: 0 auto; padding: 0; max-width: 1200px; display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.recorrido__estatico figure { margin: 0; border-radius: 18px; overflow: hidden; border: 1px solid var(--pl-vidrio-borde); background: var(--pl-vidrio); }
.recorrido__estatico img { width: 100%; height: auto; display: block; aspect-ratio: 16 / 9; object-fit: cover; }
.recorrido__estatico figcaption { padding: 14px 18px 18px; }
.recorrido__estatico .recorrido__titulo { font-size: 24px; }
.recorrido__aviso { max-width: 1200px; margin: 0 auto 18px; font: 500 13px/1.4 var(--f-texto); color: var(--ink-2); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

@media (max-width: 760px) {
  .recorrido { height: 380vh; }
  .recorrido__texto, .recorrido__demo { left: 14px; }
  .recorrido__texto { width: calc(100% - 28px); }
  .recorrido__demo { right: 14px; }
  .recorrido__texto { bottom: 76px; padding: 14px 16px 16px; border-radius: 16px; }
  .recorrido__demo { bottom: 12px; }
  .recorrido__guia { display: none; }
  .recorrido__salto { top: 10px; }
}