no funcionan ni los botones de idiomas, ni los botones del blog (mitologìa, lectura, música, etimología, idiomas). ¿Puedes arreglarlo?

components/header.js

@@ -241,34 +241,48 @@ class CustomHeader extends HTMLElement {
           </button>
         </div>
       </header>
-
       <script>
-        document.addEventListener('DOMContentLoaded', function() {
-          const languageToggle = this.shadowRoot.getElementById('languageToggle');
-          const languageDropdown = this.shadowRoot.getElementById('languageDropdown');
+        document.addEventListener('DOMContentLoaded', () => {
+          const shadowRoot = this.shadowRoot;
+          const languageToggle = shadowRoot.getElementById('languageToggle');
+          const languageDropdown = shadowRoot.getElementById('languageDropdown');
           
-          languageToggle.addEventListener('click', function() {
+          // Language toggle
+          languageToggle.addEventListener('click', (e) => {
+            e.stopPropagation();
             languageDropdown.classList.toggle('show');
           });
 
-          // Close dropdown when clicking outside
-          document.addEventListener('click', function(event) {
-            if (!event.target.closest('.language-selector')) {
+          // Language selection
+          shadowRoot.querySelectorAll('.lang-option').forEach(option => {
+            option.addEventListener('click', (e) => {
+              e.preventDefault();
+              const lang = option.getAttribute('data-lang');
+              localStorage.setItem('language', lang);
+              document.dispatchEvent(new CustomEvent('languageChange', { detail: lang }));
               languageDropdown.classList.remove('show');
-            }
+            });
+          });
+
+          // Close dropdown when clicking outside
+          document.addEventListener('click', () => {
+            languageDropdown.classList.remove('show');
           });
 
           // Mobile menu toggle
-          const mobileMenuToggle = this.shadowRoot.getElementById('mobileMenuToggle');
-          const mainNav = this.shadowRoot.querySelector('.main-nav');
+          const mobileMenuToggle = shadowRoot.getElementById('mobileMenuToggle');
+          const mainNav = shadowRoot.querySelector('.main-nav');
           
-          mobileMenuToggle.addEventListener('click', function() {
-            mainNav.style.display = mainNav.style.display === 'none' ? 'block' : 'none';
-            languageDropdown.style.display = languageDropdown.style.display === 'none' ? 'block' : 'none';
+          mobileMenuToggle.addEventListener('click', () => {
+            const isHidden = mainNav.style.display === 'none';
+            mainNav.style.display = isHidden ? 'block' : 'none';
+            feather.replace();
           });
+
+          feather.replace();
         });
       </script>
-    `;
+`;
   }
 }
 

index.html

@@ -82,8 +82,8 @@
             </div>
         </section>
         <!-- Blog Section -->
-        <section id="pasiones" class="py-20 bg-gradient-to-b from-amber-50 to-white">
-            <div class="container mx-auto px-4">
+        <section id="blog" class="py-20 bg-gradient-to-b from-amber-50 to-white">
+<div class="container mx-auto px-4">
                 <h2 class="text-4xl md:text-5xl font-playfair font-bold text-center mb-4 text-gray-900" data-i18n="blog_title">
                     Más Allá de las Palabras
                 </h2>

script.js

@@ -1,47 +1,42 @@
+
 document.addEventListener('DOMContentLoaded', function() {
     // Initialize language
     const defaultLanguage = 'es';
     let currentLanguage = localStorage.getItem('language') || defaultLanguage;
     updateLanguage(currentLanguage);
 
-    // Language selector functionality
-    const languageSelectors = document.querySelectorAll('.language-option');
-    languageSelectors.forEach(selector => {
-        selector.addEventListener('click', function() {
-            const selectedLanguage = this.getAttribute('data-lang');
-            currentLanguage = selectedLanguage;
-            localStorage.setItem('language', selectedLanguage);
-            updateLanguage(selectedLanguage);
-        });
+    // Handle language change from any component
+    document.addEventListener('languageChange', (e) => {
+        updateLanguage(e.detail);
     });
-    // Blog filter functionality
-    const blogFilterButtons = document.querySelectorAll('[data-category]');
-    const blogCategoryContents = document.querySelectorAll('[data-category-content]');
-    
-    blogFilterButtons.forEach(button => {
-        button.addEventListener('click', function() {
-            const category = this.getAttribute('data-category');
+
+    // Blog filter functionality with event delegation
+    document.addEventListener('click', function(e) {
+        // Handle blog category buttons
+        if (e.target.closest('[data-category]')) {
+            const button = e.target.closest('[data-category]');
+            const category = button.getAttribute('data-category');
             
-            // Update button states
-            blogFilterButtons.forEach(btn => {
+            // Update all buttons in the document
+            document.querySelectorAll('[data-category]').forEach(btn => {
                 btn.classList.remove('bg-amber-700', 'text-white');
                 btn.classList.add('bg-white', 'text-gray-700');
             });
-            this.classList.remove('bg-white', 'text-gray-700');
-            this.classList.add('bg-amber-700', 'text-white');
             
-            // Show/hide category contents
-            blogCategoryContents.forEach(content => {
-                if(content.getAttribute('data-category-content') === category) {
+            // Update clicked button
+            button.classList.remove('bg-white', 'text-gray-700');
+            button.classList.add('bg-amber-700', 'text-white');
+            
+            // Update category contents
+            document.querySelectorAll('[data-category-content]').forEach(content => {
+                content.classList.add('hidden');
+                if (content.getAttribute('data-category-content') === category) {
                     content.classList.remove('hidden');
-                } else {
-                    content.classList.add('hidden');
                 }
             });
 
-            // Replace feather icons
             feather.replace();
-        });
+        }
     });
 // Form submission handling
     const contactForm = document.getElementById('contact-form');

style.css

@@ -83,9 +83,19 @@ body {
     box-shadow: 0 0 0 3px rgba(180, 83, 9, 0.3);
 }
 /* Blog Section */
-#pasiones {
+#blog {
     scroll-margin-top: 100px;
 }
+
+/* Ensure blog buttons are clickable */
+[data-category] {
+    cursor: pointer;
+    user-select: none;
+}
+
+[data-category-content] {
+    transition: opacity 0.3s ease;
+}
 /* Blog Cards */
 #pasiones .bg-white:hover {
     transform: translateY(-5px);