.ruta{ list-style:none; margin:clamp(6px,1.2vh,14px) 0 0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); position:relative; }
.ruta::before{ content:""; position:absolute; left:6px; right:calc(25% - 6px); top:6px; height:1.5px; background:var(--oro);
  transform:scaleX(0); transform-origin:left center; transition:transform 2s cubic-bezier(.45,0,.2,1) .3s; }
.ruta.se-traza::before, html:not(.js-traza) .ruta::before{ transform:scaleX(1); }
.ruta__n{ position:relative; padding:24px 12px 0 0; display:flex; flex-direction:column; gap:3px; }
.ruta__punto{ position:absolute; left:0; top:0; width:13px; height:13px; border-radius:50%; background:#fff; border:1.5px solid var(--oro);
  transform:scale(0); transition:transform .5s cubic-bezier(.3,1.6,.5,1) calc(.3s + var(--i,0) * .6s), background .4s ease; }
.ruta.se-traza .ruta__punto, html:not(.js-traza) .ruta__punto{ transform:scale(1); }
.ruta__n--meta .ruta__punto{ background:var(--oro); }
.ruta__t{ font-family:var(--f-display); font-weight:500; font-size:clamp(16px,1.3vw,19px); line-height:1.2; color:var(--tinta); }
.ruta__n--meta .ruta__t{ color:var(--navy); font-weight:600; }
.ruta__a{ font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:rgba(12,31,79,.58); min-height:1.35em; font-variant-numeric:tabular-nums; }
.ruta__nota{ font-size:clamp(12.5px,.95vw,14px); line-height:1.4; color:rgba(12,31,79,.72); }
html.js-traza .ruta:not(.se-traza) .ruta__t, html.js-traza .ruta:not(.se-traza) .ruta__a, html.js-traza .ruta:not(.se-traza) .ruta__nota{ opacity:0; }
.ruta__t, .ruta__a, .ruta__nota{ transition:opacity .6s ease calc(.45s + var(--i,0) * .6s); }
/* con el año tecleado: lo ya cursado se apaga, donde entras se marca, la carrera se enciende */
.ruta__n.es-antes{ opacity:.38; }
.ruta__n.es-aqui .ruta__punto{ background:var(--navy); border-color:var(--navy); }
.ruta__n.es-aqui .ruta__a{ color:var(--navy); }
.ruta__n--meta.es-fecha .ruta__a{ color:var(--oro-texto); font-size:13.5px; }
@media (max-width:900px){
  .ruta{ grid-template-columns:1fr; gap:14px; }
  .ruta::before{ left:6px; right:auto; top:6px; bottom:18px; width:1.5px; height:auto; transform:scaleY(0); transform-origin:center top; }
  .ruta.se-traza::before, html:not(.js-traza) .ruta::before{ transform:scaleY(1); }
  .ruta__n{ padding:0 0 0 28px; }
}