/* ============================================================
   LEOSTUDIO — sections/proceso.css
   Sección PROCESO: 4 pasos con línea conectora (horizontal en
   desktop, vertical en mobile) + CTA de diagnóstico.
   Mobile-first. Depende de: tokens.css, base.css, animations.css.
   ============================================================ */

/* === SECCIÓN === */

.ls-proceso {
  padding-block: clamp(var(--space-2xl), 8vw, var(--space-3xl));
}

.ls-proceso__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  max-width: 600px;
  margin-inline: auto;
  margin-bottom: var(--space-xl);
  text-align: center;
}

.ls-proceso__title {
  font-size: clamp(2rem, 4vw, 2.75rem);
}

/* === GRID DE PASOS === */

.ls-proceso__steps {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

/* Línea conectora vertical (mobile): corre por el centro
   de los círculos de los números */
.ls-proceso__steps::before {
  content: '';
  position: absolute;
  top: 28px;
  bottom: 28px;
  left: 27px;
  width: 2px;
  background: linear-gradient(180deg,
    var(--blue-deep) 0%,
    var(--purple) 33%,
    var(--magenta) 66%,
    var(--green) 100%);
  z-index: 0;
}

/* Pulso de luz: oculto por defecto; solo se activa en desktop */
.ls-proceso__pulse {
  display: none;
}

/* Tablet: 2x2 (la timeline horizontal no aplica, solo nodos) */
@media (min-width: 768px) {
  .ls-proceso__steps {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }

  .ls-proceso__steps::before {
    display: none;
  }
}

/* Desktop: 4 en fila con línea conectora horizontal + pulso */
@media (min-width: 1024px) {
  .ls-proceso__steps {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
  }

  /* Línea conectora horizontal: gradiente de los 4 acentos, a la
     altura del centro de los números, por detrás de los círculos */
  .ls-proceso__steps::after {
    content: '';
    position: absolute;
    top: 27px;
    left: 28px;
    right: 28px;
    height: 2px;
    background: linear-gradient(90deg,
      var(--blue-deep) 0%,
      var(--purple) 33%,
      var(--magenta) 66%,
      var(--green) 100%);
    z-index: 0;
  }

  /* Pulso de luz viajando por la línea en loop */
  .ls-proceso__pulse {
    display: block;
    position: absolute;
    top: 25px;
    width: 60px;
    height: 6px;
    border-radius: var(--radius-pill);
    background: radial-gradient(ellipse, rgba(250, 250, 251, 0.95) 0%, transparent 70%);
    filter: blur(2px);
    z-index: 1; /* sobre la línea; los círculos (z-index del paso) lo ocluyen */
    pointer-events: none;
    animation: ls-proceso-pulse 4s linear infinite;
  }
}

/* === PASO === */

/* Cada paso define su acento vía custom properties locales */
.ls-proceso__step {
  --accent: var(--blue-deep);
  --accent-tint: var(--tint-blue);

  position: relative;
  z-index: 1;
  display: flex;
  gap: var(--space-md);
}

@media (min-width: 768px) {
  .ls-proceso__step {
    flex-direction: column;
    gap: 0;
  }
}

.ls-proceso__step--blue {
  --accent: var(--blue-deep);
  --accent-tint: var(--tint-blue);
}

.ls-proceso__step--purple {
  --accent: var(--purple);
  --accent-tint: var(--tint-purple);
}

.ls-proceso__step--magenta {
  --accent: var(--magenta);
  --accent-tint: var(--tint-magenta);
}

.ls-proceso__step--green {
  --accent: var(--green);
  --accent-tint: var(--tint-green);
}

/* Número con círculo de acento detrás */
.ls-proceso__num {
  position: relative;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
}

/* El círculo lleva el fondo de la sección debajo del tinte
   para ocluir la línea conectora que pasa por detrás */
.ls-proceso__circle {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 50%;
  background: linear-gradient(var(--accent-tint), var(--accent-tint)), var(--bg-alt);
}

.ls-proceso__number {
  position: relative;
  z-index: 1;
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  font-weight: 800;
  line-height: 1;
  color: var(--accent);
  opacity: 0.15; /* tenue, decorativo */
}

/* Nodo: badge circular del acento con ícono Tabler blanco, anclado a la
   línea. Anillo del color de fondo de sección + glow del acento. */
.ls-proceso__node {
  position: absolute;
  top: -2px;            /* apoyado justo arriba del número, sin taparlo */
  left: 50%;
  transform: translate(-50%, -100%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--text-on-dark); /* ícono en blanco */
  font-size: 20px;
  box-shadow: 0 0 12px var(--accent);
}

/* Contenido del paso */
.ls-proceso__step-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-top: var(--space-sm);
}

.ls-proceso__desc {
  margin-top: var(--space-xs);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.ls-proceso__duration {
  align-self: flex-start;
  margin-top: var(--space-sm);
  background: var(--accent-tint);
  color: var(--accent);
}

.ls-proceso__body {
  display: flex;
  flex-direction: column;
}

@media (max-width: 767px) {
  /* En mobile el título alinea con el número, sin margen superior */
  .ls-proceso__step-title {
    margin-top: calc(var(--space-xs) * 0.5);
  }
}

/* === CTA FINAL === */

.ls-proceso__cta {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  text-align: center;
}

/* Conector vertical que desciende de la timeline hacia el cierre */
.ls-proceso__cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 32px;
  background: linear-gradient(180deg, rgba(123, 63, 228, 0.4), transparent);
}

.ls-proceso__cta-title {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
}

/* Mismo estilo que el CTA primario del hero */
.ls-proceso__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-btn);
  background: var(--gradient-primary);
  color: var(--text-on-dark);
  font-weight: 600;
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-base),
              box-shadow var(--transition-base);
}

.ls-proceso__btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}

/* === REDUCED MOTION === */

@media (prefers-reduced-motion: reduce) {
  /* El pulso loopea infinito: se oculta del todo, no solo se acelera */
  .ls-proceso__pulse {
    display: none;
  }
}