/* ==========================================================================
   «Cómo funciona» — el recorrido de un pedido
   Antes: tres tarjetas blancas identicas en fila. Plano y olvidable.
   Ahora: un camino que se dibuja conforme bajas, con los tres hitos
   colgando de el. La forma cuenta lo mismo que el texto: esto es un
   trayecto, no una lista.
   ========================================================================== */

.proceso {
  position: relative;
  background: linear-gradient(180deg, var(--papel) 0%, #f2f1fb 50%, var(--papel) 100%);
}

.proceso__lista {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(2rem, 1.5rem + 3vw, 4rem);
}

/* --- La linea del recorrido --- */

.proceso__lista::before {
  content: '';
  position: absolute;
  left: 27px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: var(--linea);
  border-radius: 2px;
}

/* La parte recorrida, en violeta. Se llena segun bajas: el scroll es el
   que avanza por el camino. */
.proceso__lista::after {
  content: '';
  position: absolute;
  left: 27px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: linear-gradient(180deg, var(--violeta), #6f4ae8 60%, var(--verde));
  border-radius: 2px;
  transform-origin: 50% 0;
  transform: scaleY(0);
}

@supports (animation-timeline: view()) {
  .proceso__lista::after {
    animation: recorrer linear both;
    animation-timeline: view();
    animation-range: entry 20% cover 70%;
  }
  @keyframes recorrer { to { transform: scaleY(1); } }
}

@media (min-width: 900px) {
  .proceso__lista { gap: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
}

/* --- Cada hito --- */

.proceso__item {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: clamp(1.2rem, 1rem + 1vw, 2rem);
  align-items: start;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

@media (min-width: 900px) {
  .proceso__item { grid-template-columns: 56px 1fr minmax(0, 1.1fr); align-items: center; }
  /* Los hitos pares llevan el contenido al otro lado: rompe la columna
     unica y hace que el ojo zigzaguee en vez de deslizarse recto. */
  .proceso__item:nth-child(even) .proceso__cuerpo { order: 3; }
}

.proceso__item::before, .proceso__item::after { content: none; }

/* El numero, anclado a la linea */
.proceso__numero {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0;
  border-radius: 18px;
  background: var(--papel-alto);
  border: 2px solid var(--linea);
  color: var(--violeta);
  font-size: 1.15rem;
  font-weight: 800;
  box-shadow: var(--sombra-baja);
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), border-color .45s, background-color .45s, color .45s;
}

.proceso__item:hover .proceso__numero {
  background: var(--violeta);
  border-color: var(--violeta);
  color: #fff;
  transform: scale(1.08);
}

/* El texto del hito */
.proceso__cuerpo {
  padding: clamp(1.3rem, 1rem + 1vw, 2rem);
  background: var(--papel-alto);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra-baja);
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s, border-color .45s;
}
.proceso__item:hover .proceso__cuerpo {
  transform: translateY(-4px);
  border-color: #c5c2ec;
  box-shadow: var(--sombra-media);
}

.proceso__item h3 { margin-bottom: .55rem; }
.proceso__item p { color: var(--tinta-media); font-size: .97rem; }

/* --- La ilustracion de cada paso: una mini-pantalla --- */

.paso-visual {
  display: none;
  padding: 1rem;
  border-radius: var(--radio);
  background: linear-gradient(150deg, rgba(66, 60, 212, .07), rgba(1, 236, 167, .05));
  border: 1px solid var(--linea);
}
@media (min-width: 900px) { .paso-visual { display: block; } }

.mini {
  background: var(--papel-alto);
  border: 1px solid var(--linea);
  border-radius: 12px;
  padding: .75rem .85rem;
  font-size: .78rem;
  box-shadow: var(--sombra-baja);
}
.mini + .mini { margin-top: .5rem; }

.mini__fila { display: flex; align-items: center; gap: .55rem; }
.mini__punto { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.mini__texto { font-weight: 570; }
.mini__cola { margin-left: auto; font-size: .7rem; color: var(--tinta-suave); }

.mini__marca {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 7px;
  background: #fff;
  border: 1px solid var(--linea);
  flex: 0 0 auto;
}
.mini__marca img { width: 17px; height: 17px; object-fit: contain; }

/* Chip de estado dentro de la mini-pantalla */
.mini__chip {
  margin-left: auto;
  padding: .2rem .5rem;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 640;
  background: rgba(1, 236, 167, .18);
  color: #04795a;
  white-space: nowrap;
}
.mini__chip--violeta { background: rgba(66, 60, 212, .12); color: var(--violeta-hondo); }

@media (prefers-reduced-motion: reduce) {
  .proceso__lista::after { transform: scaleY(1); animation: none !important; }
}