/* Recorrido de una consulta: del mensaje del cliente al aviso al vendedor.
   Usa los tokens del tema oscuro (crm-theme.css), no colores propios. */

.journey {
  padding: 64px 0 60px;
  border-top: 1px solid var(--crm-linea, rgba(255, 255, 255, .055));
}

.journey-head {
  max-width: 640px;
  margin: 0 0 34px;
}

.journey-head h2 {
  margin: 12px 0 0;
  font: 700 clamp(28px, 3.4vw, 40px)/1.14 var(--display);
  letter-spacing: -1.4px;
  color: var(--ink, #e8edf2);
  text-wrap: balance;
}

.journey-head h2 span { color: var(--green, #42d6d0); }

/* 5 pasos: 3 + 2 deja huérfanos, así que en escritorio van en una sola fila. */
.journey-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  counter-reset: paso;
}

.journey-step {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 21px 19px 19px;
  border: 1px solid var(--crm-linea-fuerte, rgba(255, 255, 255, .1));
  border-radius: 13px;
  background: var(--crm-card, #0e1116);
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.journey-step:hover {
  background: var(--crm-card-2, #12161c);
  border-color: rgba(66, 214, 208, .32);
  transform: translateY(-2px);
}

/* Flecha de continuidad entre tarjetas (solo escritorio). */
.journey-step::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -11px;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-top: 1.5px solid var(--crm-tinta-3, #555e68);
  border-right: 1.5px solid var(--crm-tinta-3, #555e68);
  transform: rotate(45deg);
  opacity: .55;
}
.journey-step:last-child::after { display: none; }

.journey-no {
  display: block;
  margin-bottom: 13px;
  color: var(--green, #42d6d0);
  font: 800 11px var(--display);
  letter-spacing: .12em;
}

.journey-step h3 {
  margin: 0 0 8px;
  font: 700 15px var(--display);
  letter-spacing: -.2px;
  color: var(--ink, #e8edf2);
}

.journey-step p {
  margin: 0;
  color: var(--crm-tinta-2, #8a929c);
  font-size: 13px;
  line-height: 1.6;
}

/* La cita del cliente se lee como un mensaje, no como descripción. */
.journey-quote {
  color: var(--ink, #e8edf2) !important;
  font-style: italic;
}

/* El último paso cierra el recorrido: es el que importa comercialmente. */
.journey-step-final {
  background: rgba(66, 214, 208, .07);
  border-color: rgba(66, 214, 208, .28);
}
.journey-step-final:hover { background: rgba(66, 214, 208, .1); }

@media (max-width: 1080px) {
  .journey-steps { grid-template-columns: repeat(3, 1fr); }
  /* En 3 columnas la flecha sobra al final de cada fila. */
  .journey-step:nth-child(3)::after { display: none; }
}

@media (max-width: 760px) {
  .journey { padding: 48px 0 44px; }
  .journey-head { margin-bottom: 26px; }
  .journey-steps { grid-template-columns: 1fr; gap: 11px; }
  .journey-step { padding: 17px 16px; }
  .journey-step::after,
  .journey-step:nth-child(3)::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .journey-step { transition: none; }
  .journey-step:hover { transform: none; }
}