biolink+servicios

2026-09-19 18:03:05 -03:00
parent 1e36901fe3
commit c193e4acd9
8 changed files with 1678 additions and 1656 deletions
@@ -0,0 +1,74 @@
+/* ============================================
+   SELECTOR DE SERVICIOS
+   ============================================ */
+function initServiciosSelector() {
+  const tabs = document.querySelectorAll('.servicio-tab');
+  const pills = document.querySelectorAll('.servicio-pill');
+  const panels = document.querySelectorAll('.servicio-panel');
+
+  if (tabs.length === 0 || panels.length === 0) return;
+
+  function activarServicio(servicioId) {
+    // Desactivar todos los tabs y pills
+    tabs.forEach(tab => {
+      tab.classList.remove('active');
+      tab.setAttribute('aria-selected', 'false');
+    });
+    pills.forEach(pill => {
+      pill.classList.remove('active');
+      pill.setAttribute('aria-selected', 'false');
+    });
+
+    // Desactivar todos los panels
+    panels.forEach(panel => panel.classList.remove('active'));
+
+    // Activar el tab y pill correspondientes
+    const tabActivo = document.querySelector(`.servicio-tab[data-servicio="${servicioId}"]`);
+    const pillActivo = document.querySelector(`.servicio-pill[data-servicio="${servicioId}"]`);
+    const panelActivo = document.getElementById(`panel-${servicioId}`);
+
+    if (tabActivo) {
+      tabActivo.classList.add('active');
+      tabActivo.setAttribute('aria-selected', 'true');
+    }
+    if (pillActivo) {
+      pillActivo.classList.add('active');
+      pillActivo.setAttribute('aria-selected', 'true');
+    }
+    if (panelActivo) {
+      panelActivo.classList.add('active');
+    }
+
+    // Scroll suave al panel
+    if (panelActivo) {
+      panelActivo.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+    }
+  }
+
+  // Event listeners para tabs
+  tabs.forEach(tab => {
+    tab.addEventListener('click', () => {
+      const servicioId = tab.dataset.servicio;
+      activarServicio(servicioId);
+    });
+  });
+
+  // Event listeners para pills
+  pills.forEach(pill => {
+    pill.addEventListener('click', () => {
+      const servicioId = pill.dataset.servicio;
+      activarServicio(servicioId);
+    });
+  });
+
+  // Soporte para hash en URL (ej: servicios.html#branding)
+  const hash = window.location.hash.replace('#', '');
+  if (hash && document.getElementById(`panel-${hash}`)) {
+    activarServicio(hash);
+  }
+}
+
+// Inicializar cuando el DOM esté listo
+document.addEventListener('DOMContentLoaded', () => {
+  initServiciosSelector();
+});