/* Nereida · Recorrido paso a paso (Core 1.13.0, /desarrollo-a-medida/). Los pasos de un proceso de ejemplo
   con lo que costaba antes y lo que pasa ahora, unidos por una línea, y un total al pie. Al verse, los pasos
   se encienden uno detrás de otro: la línea avanza, lo de antes se tacha y aparece lo de ahora; al final,
   el total. Va en tinta, para el bloque oscuro. Sin JavaScript, sin movimiento o en el editor, se ve todo
   en su estado final. */
.n-ruta {
	--nruta-ink: #EBF8FF;
	--nruta-soft: color-mix(in srgb, var(--nruta-ink) 72%, transparent);
	--nruta-muted: color-mix(in srgb, var(--nruta-ink) 50%, transparent);
	--nruta-line: color-mix(in srgb, var(--nruta-ink) 14%, transparent);
	--nruta-field: color-mix(in srgb, var(--nruta-ink) 8%, transparent);
	--nruta-card: rgba(7, 0, 53, .55);
	--nruta-dark: var(--color-ink, #070035);
	--nruta-accent: #A9E2CF;
	--nruta-ease: var(--ease, cubic-bezier(.22, 1, .36, 1));
	box-sizing: border-box; width: 100%; padding: clamp(16px, 2vw, 28px); border-radius: 28px; background: var(--nruta-card); box-shadow: inset 0 0 0 1px var(--nruta-line); color: var(--nruta-ink);
}
.n-ruta *, .n-ruta *::before, .n-ruta *::after { box-sizing: border-box; }
.n-ruta p, .n-ruta ol, .n-ruta li { margin: 0; }
.n-ruta ol { padding: 0; list-style: none; }
.n-ruta-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; }
.n-ruta-q { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px 0 12px; border-radius: 999px; background: var(--nruta-field); font-size: 14.5px; font-weight: 500; line-height: 1.2; white-space: nowrap; }
.n-ruta-q svg { width: 15px; height: 15px; flex: none; color: var(--nruta-soft); }
.n-ruta-tag { font-size: 11.5px; font-weight: 500; line-height: 1.2; letter-spacing: .04em; text-transform: uppercase; color: var(--nruta-muted); text-align: right; }
.n-ruta-cols, .n-ruta-paso { display: grid; grid-template-columns: 12px minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, .8fr); gap: 14px; }
.n-ruta-cols { padding: 0 14px 10px; border-bottom: 1px solid var(--nruta-line); font-size: 11.5px; font-weight: 500; line-height: 1.2; letter-spacing: .04em; text-transform: uppercase; color: var(--nruta-muted); }

/* Los pasos, unidos por una línea: cada paso dibuja el tramo hasta el siguiente */
.n-ruta-paso { position: relative; align-items: start; padding: 16px 14px; border-bottom: 1px solid var(--nruta-line); font-size: 15px; line-height: 1.4; }
.n-ruta-paso::before, .n-ruta-paso::after { content: ""; position: absolute; left: 19.25px; top: 26.5px; width: 1.5px; height: 100%; background: var(--nruta-line); }
.n-ruta-paso::after { background: var(--nruta-accent); transform-origin: 50% 0; transition: transform .42s linear; }
.n-ruta-paso:last-child::before, .n-ruta-paso:last-child::after { display: none; }
.n-ruta-punto { position: relative; z-index: 1; width: 12px; height: 12px; margin-top: 4.5px; border-radius: 50%; background: var(--nruta-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--nruta-accent) 16%, transparent); transition: background .4s var(--nruta-ease), box-shadow .4s var(--nruta-ease); }
.n-ruta-t { font-weight: 500; color: var(--nruta-ink); }
.n-ruta-antes { font-size: 14px; line-height: 1.5; }
/* Lo de antes, tachado con un trazo que se dibuja (también si ocupa dos líneas) */
.n-ruta-tx { background: linear-gradient(var(--nruta-soft), var(--nruta-soft)) 0 58% / 100% 1.5px no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; color: var(--nruta-muted); transition: background-size .55s var(--nruta-ease), color .55s var(--nruta-ease); }
/* Lo de ahora, en una píldora */
.n-ruta-ahora > span { display: inline-flex; align-items: center; height: 26px; margin-top: -2.5px; padding: 0 11px; border-radius: 999px; background: var(--nruta-accent); color: var(--nruta-dark); font-size: 12.5px; font-weight: 500; line-height: 1; white-space: nowrap; transition: opacity .45s var(--nruta-ease), translate .5s var(--nruta-ease); }

.n-ruta-total { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 14px; padding: 14px 18px; border-radius: 16px; background: color-mix(in srgb, var(--nruta-accent) 10%, transparent); box-shadow: inset 0 0 0 1.5px var(--nruta-accent); font-size: 15px; font-weight: 500; line-height: 1.35; color: var(--nruta-ink); transition: opacity .6s var(--nruta-ease), translate .7s var(--nruta-ease); }
.n-ruta-total b { display: inline-flex; align-items: baseline; gap: .4em; font-size: clamp(26px, 2.4vw, 34px); font-weight: 500; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.n-ruta-total s { font-size: .5em; font-weight: 450; letter-spacing: 0; color: var(--nruta-muted); text-decoration-thickness: 1.5px; }
.n-ruta p.n-ruta-pie { margin: 16px 4px 0; font-size: var(--font-kicker, 14px); line-height: 1.5; color: var(--nruta-muted); text-wrap: pretty; }

/* La secuencia (solo con JavaScript, que pone .is-js): los pasos entran y se encienden uno detrás de otro */
.n-ruta.is-js .n-ruta-paso { opacity: 0; translate: 0 8px; transition: opacity .5s var(--nruta-ease), translate .6s var(--nruta-ease); transition-delay: calc(var(--d) * .07s); }
.n-ruta.is-js.is-in .n-ruta-paso { opacity: 1; translate: 0 0; }
.n-ruta.is-js .n-ruta-paso:not(.is-on) .n-ruta-punto { background: var(--nruta-dark); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--nruta-ink) 35%, transparent); }
.n-ruta.is-js .n-ruta-paso:not(.is-on)::after { transform: scaleY(0); }
.n-ruta.is-js .n-ruta-paso:not(.is-on) .n-ruta-tx { background-size: 0 1.5px; color: var(--nruta-soft); }
.n-ruta.is-js .n-ruta-paso:not(.is-on) .n-ruta-ahora > span { opacity: 0; translate: -6px 0; }
.n-ruta .n-ruta-paso.is-on .n-ruta-ahora > span { transition-delay: .3s; }
.n-ruta.is-js:not(.is-hecho) .n-ruta-total { opacity: 0; translate: 0 8px; }

/* Lo de ahora como una hora (1.15.0, /mantenimiento-web/): la columna, más estrecha y a la derecha */
.n-ruta--hora .n-ruta-cols, .n-ruta--hora .n-ruta-paso { grid-template-columns: 12px minmax(0, 1.45fr) minmax(0, 1fr) minmax(0, .58fr); }
.n-ruta--hora .n-ruta-cols span:last-child, .n-ruta--hora .n-ruta-ahora { justify-self: end; text-align: right; }
.n-ruta--hora .n-ruta-ahora > span { font-size: 13px; font-variant-numeric: tabular-nums; }

/* Sin tachar (1.21.0, /mantenimiento-web/): la columna del medio es lo que se hace en cada paso, en texto normal */
.n-ruta--sin-tachar .n-ruta-tx { background: none; color: var(--nruta-soft); }

@media (max-width: 640px) {
	.n-ruta-head { flex-direction: column; align-items: flex-start; }
	.n-ruta-tag { text-align: left; }
	.n-ruta-cols { display: none; }
	.n-ruta-pasos { border-top: 1px solid var(--nruta-line); }
	/* El paso arriba; debajo, lo de antes tachado y lo de ahora */
	.n-ruta-paso { grid-template-columns: 12px minmax(0, 1fr) auto; grid-template-areas: "p t t" ". a h"; row-gap: 8px; }
	.n-ruta-punto { grid-area: p; }
	.n-ruta-t { grid-area: t; }
	.n-ruta-antes { grid-area: a; align-self: center; }
	.n-ruta-ahora { grid-area: h; }
	.n-ruta-ahora > span { margin-top: 0; }
	.n-ruta-total { flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 16px; font-size: 14px; }
	/* la hora, al lado del paso; debajo, lo de antes tachado a todo el ancho */
	.n-ruta--hora .n-ruta-paso { grid-template-columns: 12px minmax(0, 1fr) auto; grid-template-areas: "p t h" ". a a"; }
	.n-ruta--hora .n-ruta-antes { align-self: start; }
	.n-ruta--hora .n-ruta-ahora > span { margin-top: -3px; }
}
@media (prefers-reduced-motion: reduce) {
	.n-ruta .n-ruta-paso, .n-ruta-paso::after, .n-ruta-punto, .n-ruta-tx, .n-ruta-ahora > span, .n-ruta-total { transition: none; }
}