/* Recorrido · Moxen, adaptado a los «Cómo funciona» de BKT (29-oct-2026). Tema claro, azul BKT. */
.rr-pasos { --rr-azul: #0059FF; --rr-texto: #0A1130; --rr-suave: #5C687F; --rr-camino: #C9D6F5; --rr-curva: cubic-bezier(.22, 1, .36, 1);
  position: relative; max-width: 1000px; margin: 0 auto; padding: 10px 0 30px; }
.rr-pasos *, .rr-pasos *::before, .rr-pasos *::after { box-sizing: border-box; }

/* el camino: el fondo punteado entero y, encima, el trazo azul hasta donde se lee */
.rr-camino { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.rr-camino path { fill: none; stroke-linecap: round; }
.rr-camino-fondo { stroke: var(--rr-camino); stroke-width: 2; stroke-dasharray: 2 7; }
.rr-camino-trazo { stroke: var(--rr-azul); stroke-width: 2.5; }
.rr-punta { position: absolute; left: 0; top: 0; width: 12px; height: 12px; margin: -6px; border-radius: 50%; background: var(--rr-azul); pointer-events: none; z-index: 2;
  box-shadow: 0 0 0 6px rgba(0, 89, 255, .14), 0 0 22px 4px rgba(0, 89, 255, .35); }

.rr-lista { list-style: none; margin: 0; padding: 0; position: relative; }
.rr-paso { position: relative; display: flex; align-items: center; min-height: 230px; }
.rr-paso:nth-child(odd) { justify-content: flex-end; }
.rr-paso:nth-child(even) { justify-content: flex-start; }
.rr-nodo { position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; margin: -25px; z-index: 3; display: grid; place-items: center; border-radius: 50%;
  font: 800 15px var(--font-heading, "Plus Jakarta Sans", sans-serif); font-variant-numeric: tabular-nums;
  background: #fff; color: var(--rr-suave); box-shadow: inset 0 0 0 1.5px var(--rr-camino);
  transition: background-color .5s var(--rr-curva), color .4s, box-shadow .5s, transform .6s cubic-bezier(.34, 1.56, .64, 1); }
.rr-paso.is-llegado .rr-nodo { background: var(--rr-azul); color: #fff; box-shadow: inset 0 0 0 1.5px var(--rr-azul), 0 0 0 8px rgba(0, 89, 255, .12); transform: scale(1.08); }

/* la tarjeta entra desde su lado */
.rr-tarjeta { width: calc(50% - 64px); padding: 22px 24px; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px #E3E9F7, 0 24px 50px -38px rgba(0, 40, 140, .45);
  opacity: .3; transform: translateX(var(--rr-lado, 26px)) scale(.97); transition: opacity .7s var(--rr-curva), transform .9s var(--rr-curva); }
.rr-paso:nth-child(even) .rr-tarjeta { --rr-lado: -26px; }
.rr-paso.is-llegado .rr-tarjeta { opacity: 1; transform: none; }
.rr-tag { display: inline-block; font: 800 11px "Inter", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--rr-azul); background: #EEF4FF; border-radius: 100px; padding: 5px 11px; }
.rr-tag--acento { background: var(--rr-azul); color: #fff; }
.rr-tarjeta h3 { margin: 12px 0 0; font: 800 1.25rem/1.25 var(--font-heading, "Plus Jakarta Sans", sans-serif); letter-spacing: -.015em; color: var(--rr-texto); }
.rr-tarjeta p { margin: 8px 0 0; color: var(--rr-suave); font-size: .97rem; line-height: 1.55; }
.rr-tarjeta p b { color: var(--rr-texto); }
/* el último paso (el resultado) va resaltado */
.rr-paso.is-final .rr-tarjeta { background: linear-gradient(160deg, #0B5BFF, #0040C8); box-shadow: 0 24px 50px -30px rgba(0, 71, 214, .8); }
.rr-paso.is-final .rr-tarjeta h3, .rr-paso.is-final .rr-tarjeta p, .rr-paso.is-final .rr-tarjeta p b { color: #fff; }
.rr-paso.is-final .rr-tag { background: rgba(255, 255, 255, .18); color: #fff; }

@media (max-width: 760px) {
  .rr-paso, .rr-paso:nth-child(odd), .rr-paso:nth-child(even) { justify-content: flex-end; min-height: 0; padding: 18px 0; }
  .rr-nodo { left: 22px; width: 40px; height: 40px; margin: -20px; font-size: 13px; }
  .rr-tarjeta { width: calc(100% - 54px); }
  .rr-paso:nth-child(even) .rr-tarjeta { --rr-lado: 26px; }
}
/* movimiento reducido: sin camino animado, todo visible */
.rr-pasos.is-quieto .rr-camino-trazo, .rr-pasos.is-quieto .rr-punta { display: none; }
@media (prefers-reduced-motion: reduce) { .rr-tarjeta, .rr-nodo { transition: none; } }