/* modules/Steps/frontend/assets/steps.css
 * Geometría del "cómo funciona": grid de pasos con flecha conectora y header centrado.
 * El look (color/tipografía/sombras) vive en el tema (§5). Fondo secundario para despegar
 * la sección de las vecinas (como el componente How del mockup BeFound). */

.lcl-container .lcl-steps.lcl-section {
  background: var(--bg-secondary);
  border-block: 1px solid var(--separator);
}

.lcl-container .lcl-steps__header {
  text-align: center;
  align-items: center;
  max-width: 620px;
  margin-inline: auto;
  margin-bottom: var(--space-7);
}

.lcl-container .lcl-steps__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
}

.lcl-container .lcl-steps__step {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-md);
  padding: var(--space-6);
}

.lcl-container .lcl-steps__n {
  display: block;
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--accent);
}

.lcl-container .lcl-steps__title {
  margin-top: var(--space-3);
  font-size: var(--fs-title-1);
}

.lcl-container .lcl-steps__desc {
  margin-top: var(--space-2);
  color: var(--label-tertiary);
  font-size: var(--fs-callout);
  line-height: var(--lh-relaxed);
}

/* Flecha conectora: círculo flotante sobre el borde derecho, hacia el siguiente paso. */
.lcl-container .lcl-steps__arrow {
  position: absolute;
  top: 50%;
  right: -28px;
  transform: translateY(-50%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--separator);
  color: var(--accent-pressed);
}

.lcl-container .lcl-steps__cta {
  display: flex;
  justify-content: center;
  margin-top: var(--space-7);
}

@media (max-width: 820px) {
  .lcl-container .lcl-steps__grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin-inline: auto;
  }
  .lcl-container .lcl-steps__arrow {
    display: none;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   Variante 'cards' (1:1 mockup): header centrado, cards con el número en pill mono
   (no número gigante), sin flecha conectora. Reveal escalonado.
   ─────────────────────────────────────────────────────────────────────────── */
.lcl-container .lcl-steps--cards .lcl-steps__header {
  text-align: center;
  max-width: 600px;
  margin-inline: auto;
}
.lcl-container .lcl-steps--cards .lcl-steps__step {
  padding: 30px;
}
.lcl-container .lcl-steps--cards .lcl-steps__n {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: var(--fw-medium);
  color: var(--accent-pressed);
  background: var(--accent-bg-soft);
  padding: 5px 11px;
  border-radius: var(--r-sm);
  margin-bottom: 20px;
  line-height: 1;
}
.lcl-container .lcl-steps--cards .lcl-steps__title {
  font-family: var(--font-display);
  font-size: 20px;
  margin: 0 0 8px;
}
.lcl-container .lcl-steps--cards .lcl-steps__step:nth-child(2) { transition-delay: 80ms; }
.lcl-container .lcl-steps--cards .lcl-steps__step:nth-child(3) { transition-delay: 160ms; }