diagnostico+metodo en curso

scripts/main.js

@@ -406,6 +406,80 @@ function reiniciarCuestionario() {
   renderizarPregunta();
 }
 
+/* ============================================
+ANIMACIÓN AUTOMÁTICA DE METODOLOGÍA
+============================================ */
+function initMetodologiaAnimation() {
+  const section = document.getElementById('metodologia');
+  if (!section) return;
+
+  const pasos = section.querySelectorAll('.paso-item');
+  if (pasos.length === 0) return;
+
+  let pasoActual = 0;
+  let intervalo;
+  const DURACION_PASO = 2500; // 2.5 segundos por paso
+
+  // Función para actualizar los estados
+  function actualizarEstados() {
+    pasos.forEach((paso, index) => {
+      // Remover todas las clases de estado
+      paso.classList.remove('active', 'previous');
+      
+      // Calcular el índice del paso anterior (con loop)
+      const pasoAnterior = (pasoActual - 1 + pasos.length) % pasos.length;
+      
+      // Asignar estados
+      if (index === pasoActual) {
+        paso.classList.add('active');
+      } else if (index === pasoAnterior) {
+        paso.classList.add('previous');
+      }
+    });
+  }
+
+  // Función para avanzar al siguiente paso
+  function avanzarPaso() {
+    pasoActual = (pasoActual + 1) % pasos.length;
+    actualizarEstados();
+  }
+
+  // Función para iniciar la animación
+  function iniciarAnimacion() {
+    // Inicializar con el primer paso activo
+    actualizarEstados();
+    
+    // Iniciar el intervalo
+    intervalo = setInterval(avanzarPaso, DURACION_PASO);
+  }
+
+  // Función para detener la animación
+  function detenerAnimacion() {
+    clearInterval(intervalo);
+  }
+
+  // IntersectionObserver para detectar cuando la sección es visible
+  const observer = new IntersectionObserver((entries) => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        // La sección está visible: iniciar animación
+        iniciarAnimacion();
+      } else {
+        // La sección no está visible: detener animación
+        detenerAnimacion();
+      }
+    });
+  }, {
+    threshold: 0.3 // Se activa cuando el 30% de la sección es visible
+  });
+
+  // Observar la sección
+  observer.observe(section);
+
+  // Inicializar el primer estado (sin animación aún)
+  actualizarEstados();
+}
+
 // Inicializar cuestionario al cargar la página
 document.addEventListener('DOMContentLoaded', () => {
   // Solo inicializar si estamos en la sección de diagnóstico
@@ -415,4 +489,5 @@ document.addEventListener('DOMContentLoaded', () => {
     // Event listener al botón de reiniciar
     document.getElementById('btn-reiniciar').addEventListener('click', reiniciarCuestionario);
   }
+  initMetodologiaAnimation();
 });