/* Navegación (unidad A2): salto con velo de papel (A-09) y el hilo del día (A-08). */

/* ---------- A-09 · Salto con velo ---------- */

.velo.cubre { opacity: 1; }
.velo.cubre, .velo.fuera { will-change: opacity; }
.barra.saltando { z-index: 46; }

/* Filete bajo el enlace tocado (right: el tracking deja aire tras la última letra) */
.barra-nav a { position: relative; }
.barra-nav a::after {
  content: ""; position: absolute; left: 0; right: .22em; bottom: -6px; height: 1px;
  background: var(--terracota); pointer-events: none;
  transform: scaleX(0); transform-origin: 0 50%; transition: transform 500ms var(--pluma);
}
.barra-nav .barra-cta::after { left: 16px; right: calc(16px + .22em); bottom: 8px; }
.barra-nav a.activo::after { transform: scaleX(1); }

/* ---------- A-08 · El hilo del día ---------- */

/* Los renglones quedan encima del hilo, como ya estaban encima de la línea base */
.linea-tiempo li { position: relative; z-index: 1; }
.linea-tiempo::after {
  content: ""; position: absolute; left: 50%; top: 10px; bottom: 10px; width: 1px;
  background: var(--terracota-suave); transform-origin: top; transform: scaleY(var(--hilo, 0));
}
.linea-tiempo.hilo-vivo::after { will-change: transform; }

/* El punto se entinta de adentro hacia afuera; se vacía más rápido */
.lt-punto::before, .lt-punto::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; pointer-events: none; }
.lt-punto::after { background: var(--terracota); transform: scale(0); transition: transform 420ms var(--recoge); }
.alcanzado .lt-punto::after { transform: scale(1); transition: transform 600ms var(--lento); }

/* Un solo anillo tenue, la primera vez */
.lt-punto::before { border: 1px solid var(--terracota); opacity: 0; }
.anillo .lt-punto::before { animation: lt-anillo 1100ms var(--suave); }
@keyframes lt-anillo { from { transform: scale(1); opacity: .35; } to { transform: scale(2.4); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .barra-nav a::after { transition: none; }
  .linea-tiempo::after, .lt-punto::after { transform: none; transition: none; }
  .anillo .lt-punto::before { animation: none; }
}