/* ==========================================================================
   METODOLOGIA.CSS
   Sección "Nuestra Ruta de Optimización" — los 4 pasos de la
   metodología propia (Diagnóstico → Ingeniería de Procesos →
   Sostenibilidad y Cumplimiento → Roadmap de Optimización), tal como
   quedó definida en Fase 3 (obs. 3) y Fase 4.
   ========================================================================== */

.metodologia {
  background-color: var(--qa-navy-950);
  color: var(--color-text-inverse);
}

.metodologia__intro {
  max-width: 640px;
  margin-bottom: var(--space-8);
}

.metodologia__intro .eyebrow {
  color: var(--qa-cyan-300);
}

.metodologia__intro h2 {
  color: var(--color-text-inverse);
}

.metodologia__intro p {
  font-size: var(--text-lg);
  color: var(--qa-steel-200);
  margin-top: var(--space-4);
}

/* --------------------------------------------------------------------
   FILA DE PASOS + CONECTORES
   Flexbox en vez de grid puro: permite intercalar un conector con
   flecha entre cada par de pasos (Entrega 4, obs. 2 — que se lea como
   UN proceso continuo, no cuatro tarjetas independientes). En mobile,
   los conectores rotan a vertical (la flecha apunta hacia abajo).
   -------------------------------------------------------------------- */

.metodologia__steps {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.metodologia__step {
  flex: 1 1 auto;
}

.metodologia__connector {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  color: var(--qa-cyan-300);
  opacity: 0.7;
}

.metodologia__connector .icon {
  width: 1.5rem;
  height: 1.5rem;
  transform: rotate(90deg); /* apunta hacia abajo cuando los pasos están apilados */
}

@media (min-width: 1024px) {
  .metodologia__steps {
    flex-direction: row;
    align-items: stretch;
    gap: 0;
  }

  .metodologia__step {
    flex: 1 1 0;
  }

  .metodologia__connector {
    flex: 0 0 auto;
    width: var(--space-6);
    padding-top: 38px; /* alinea la flecha con el centro del círculo numerado */
  }

  .metodologia__connector .icon {
    transform: none; /* horizontal en escritorio */
  }

  /* Línea conectora continua de fondo — refuerzo visual adicional a
     las flechas, para que la continuidad se perciba incluso antes de
     leer el detalle de cada paso. */
  .metodologia__steps::before {
    content: '';
    position: absolute;
    top: 38px;
    left: 0;
    right: 0;
    border-top: 2px dashed var(--qa-navy-500);
    z-index: 0;
  }
}

.metodologia__step {
  position: relative;
  z-index: 1;
  /* Presencia visual ampliada respecto al padding por defecto de
     .card (--space-6) — pedido explícito: más aire, mejor lectura */
  padding: var(--space-7);
  gap: var(--space-4);
}

.metodologia__step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  color: var(--qa-cyan-300);
  background-color: var(--qa-navy-950);
  border: 1.5px solid var(--qa-navy-500);
  border-radius: 50%;
}

/* El propio ícono de cada paso se apoya dentro de la tarjeta, no
   dentro del círculo numerado (el círculo es solo el marcador de
   secuencia; el ícono comunica el contenido del paso) */
.metodologia__step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-3);
  color: var(--qa-cyan-300);
  background-color: rgba(111, 216, 203, 0.14);
  border-radius: var(--radius-sm);
}

.metodologia__step-icon .icon {
  width: 1.35rem;
  height: 1.35rem;
}

/* El paso 4 (Roadmap de Optimización) es el más nuevo de la
   metodología (incorporado en Fase 3) — se distingue con un badge
   pequeño, sin alterar la estructura visual de los otros 3 */
.metodologia__step--new .card__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------
   STAGGER DE ANIMACIÓN
   Se controla vía [data-delay] (atributo en el HTML), no nth-child:
   al intercalar los conectores entre pasos, nth-child ya no coincide
   de forma confiable con la posición lógica de cada tarjeta.
   -------------------------------------------------------------------- */

.metodologia__step[data-delay="1"] { transition-delay: 0ms; }
.metodologia__step[data-delay="2"] { transition-delay: 90ms; }
.metodologia__step[data-delay="3"] { transition-delay: 180ms; }
.metodologia__step[data-delay="4"] { transition-delay: 270ms; }