desafios en curso

scripts/main.js

@@ -479,6 +479,102 @@ function initMetodologiaAnimation() {
   // Inicializar el primer estado (sin animación aún)
   actualizarEstados();
 }
+/* ============================================
+   EFECTO FOCO EN TARJETAS DE PLANES
+   ============================================ */
+function initPlanesFocusEffect() {
+  const grid = document.getElementById('planes-grid');
+  if (!grid) return;
+
+  const cards = grid.querySelectorAll('.plan-card');
+  if (cards.length === 0) return;
+
+  cards.forEach(card => {
+    card.addEventListener('mouseenter', () => {
+      grid.classList.add('is-hovering');
+      card.classList.add('is-focused');
+    });
+
+    card.addEventListener('mouseleave', () => {
+      grid.classList.remove('is-hovering');
+      card.classList.remove('is-focused');
+    });
+  });
+}
+
+
+/* ============================================
+   CARRUSEL AUTOMÁTICO DE PORTFOLIO
+   ============================================ */
+function initPortfolioCarousel() {
+  const slides = document.querySelectorAll('.carousel-slide');
+  const indicators = document.querySelectorAll('.indicator');
+  
+  if (slides.length === 0) return;
+
+  let currentSlide = 0;
+  const INTERVAL = 4000; // 4 segundos
+  let intervalId;
+
+  function goToSlide(index) {
+    // Remover clase active de todos
+    slides.forEach(slide => slide.classList.remove('active'));
+    indicators.forEach(indicator => indicator.classList.remove('active'));
+    
+    // Activar el slide actual
+    slides[index].classList.add('active');
+    indicators[index].classList.add('active');
+    
+    currentSlide = index;
+  }
+
+  function nextSlide() {
+    const next = (currentSlide + 1) % slides.length;
+    goToSlide(next);
+  }
+
+  function startCarousel() {
+    intervalId = setInterval(nextSlide, INTERVAL);
+  }
+
+  function stopCarousel() {
+    clearInterval(intervalId);
+  }
+
+  // Click en indicadores
+  indicators.forEach((indicator, index) => {
+    indicator.addEventListener('click', () => {
+      stopCarousel();
+      goToSlide(index);
+      startCarousel();
+    });
+  });
+
+  // Iniciar carrusel
+  startCarousel();
+}
+
+/* ============================================
+   TIRA MARQUEE CON HOVER INTERACTIVO
+   ============================================ */
+function initMarqueeHover() {
+  const track = document.getElementById('marquee-track');
+  if (!track) return;
+
+  const icons = track.querySelectorAll('.marquee-icon');
+  if (icons.length === 0) return;
+
+  icons.forEach(icon => {
+    icon.addEventListener('mouseenter', () => {
+      track.classList.add('is-slow');
+    });
+
+    icon.addEventListener('mouseleave', () => {
+      track.classList.remove('is-slow');
+    });
+  });
+}
+
 
 // Inicializar cuestionario al cargar la página
 document.addEventListener('DOMContentLoaded', () => {
@@ -490,4 +586,6 @@ document.addEventListener('DOMContentLoaded', () => {
     document.getElementById('btn-reiniciar').addEventListener('click', reiniciarCuestionario);
   }
   initMetodologiaAnimation();
+  initPlanesFocusEffect();
+  initPortfolioCarousel();
 });