estructura de nosotros y contacto

2026-09-20 08:28:34 -03:00
parent c193e4acd9
commit 2a0cfbde0e
13 changed files with 4194 additions and 1939 deletions
@@ -0,0 +1,74 @@
+/* ============================================
+   SELECTOR DE PLANES
+   ============================================ */
+function initPlanesSelector() {
+  const tabs = document.querySelectorAll('.plan-tab');
+  const pills = document.querySelectorAll('.plan-pill');
+  const panels = document.querySelectorAll('.plan-panel');
+
+  if (tabs.length === 0 || panels.length === 0) return;
+
+  function activarPlan(planId) {
+    // 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(`.plan-tab[data-plan="${planId}"]`);
+    const pillActivo = document.querySelector(`.plan-pill[data-plan="${planId}"]`);
+    const panelActivo = document.getElementById(`panel-${planId}`);
+
+    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 planId = tab.dataset.plan;
+      activarPlan(planId);
+    });
+  });
+
+  // Event listeners para pills
+  pills.forEach(pill => {
+    pill.addEventListener('click', () => {
+      const planId = pill.dataset.plan;
+      activarPlan(planId);
+    });
+  });
+
+  // Soporte para hash en URL (ej: planes.html#premium)
+  const hash = window.location.hash.replace('#', '');
+  if (hash && document.getElementById(`panel-${hash}`)) {
+    activarPlan(hash);
+  }
+}
+
+// Inicializar cuando el DOM esté listo
+document.addEventListener('DOMContentLoaded', () => {
+  initPlanesSelector();
+});