inicio-servicios finish

scripts/main.js

@@ -79,6 +79,70 @@ function closeMenu() {
   }
 }
 
+
+/* ============================================
+   ACORDEÓN DE SERVICIOS
+   ============================================ */
+function initServiciosAccordion() {
+  const accordion = document.getElementById('servicios-accordion');
+  if (!accordion) {
+    console.log('Acordeón no encontrado');
+    return;
+  }
+
+  const items = accordion.querySelectorAll('.servicio-item');
+  console.log('Items encontrados:', items.length);
+
+  // Función para activar un item
+  function activateItem(item) {
+    if (item.classList.contains('is-active')) return;
+    
+    accordion.classList.add('has-active');
+    items.forEach(i => i.classList.remove('is-active'));
+    item.classList.add('is-active');
+  }
+
+  // Función para cerrar (volver al estado inicial)
+  function closeAll() {
+    accordion.classList.remove('has-active');
+    items.forEach(i => i.classList.remove('is-active'));
+  }
+
+  // Click en cada item para expandirlo
+  items.forEach((item, index) => {
+    console.log(`Agregando listener al item ${index}`);
+    
+    item.addEventListener('click', (e) => {
+      console.log('Click en item:', index);
+      
+      // Si el click fue en el botón cerrar o en un botón CTA, no activar
+      if (e.target.closest('.servicio-close')) {
+        console.log('Click en cerrar');
+        return;
+      }
+      if (e.target.closest('.btn')) {
+        console.log('Click en botón CTA');
+        return;
+      }
+      
+      activateItem(item);
+    });
+  });
+
+  // Click en los botones de cerrar
+  const closeButtons = accordion.querySelectorAll('.servicio-close');
+  closeButtons.forEach((btn, index) => {
+    console.log(`Agregando listener al botón cerrar ${index}`);
+    
+    btn.addEventListener('click', (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      console.log('Botón cerrar clicked');
+      closeAll();
+    });
+  });
+}
+
 /* ============================================
    INICIALIZACIÓN
    ============================================ */
@@ -119,4 +183,6 @@ document.addEventListener('DOMContentLoaded', async () => {
   // Año dinámico en el footer
   const yearEl = document.getElementById('current-year');
   if (yearEl) yearEl.textContent = new Date().getFullYear();
+
+  initServiciosAccordion();
 });