Quiero que al igual que al darle al boton demitología me aparece su seccion, la darle al resto de botones (lectura, musica, etimologia, idiomas) aparezcan sus secciones. Y todas completas

index.html

@@ -91,41 +91,41 @@
                 <p class="text-center text-lg text-gray-700 mb-12 max-w-2xl mx-auto hovered-element" data-i18n="blog_subtitle">
                     El mundo que me inspira y enriquece mi trabajo como traductora
                 </p>
-<div class="max-w-6xl mx-auto">
-                    <div class="flex flex-wrap justify-center gap-2 mb-8">
-                        <button data-category="mitologia" class="flex items-center gap-2 px-4 py-2 bg-amber-700 text-white rounded-lg font-medium">
-                            <i data-feather="award" class="w-4 h-4"></i>
-                            <span data-i18n="blog_mythology">Mitología</span>
-                        </button>
-                        <button data-category="lectura" class="flex items-center gap-2 px-4 py-2 bg-white text-gray-700 rounded-lg font-medium">
-                            <i data-feather="book-open" class="w-4 h-4"></i>
-                            <span data-i18n="blog_reading">Lectura</span>
-                        </button>
-                        <button data-category="musica" class="flex items-center gap-2 px-4 py-2 bg-white text-gray-700 rounded-lg font-medium">
-                            <i data-feather="music" class="w-4 h-4"></i>
-                            <span data-i18n="blog_music">Música</span>
-                        </button>
-                        <button data-category="etimologia" class="flex items-center gap-2 px-4 py-2 bg-white text-gray-700 rounded-lg font-medium">
-                            <i data-feather="type" class="w-4 h-4"></i>
-                            <span data-i18n="blog_etymology">Etimología</span>
-                        </button>
-                        <button data-category="idiomas" class="flex items-center gap-2 px-4 py-2 bg-white text-gray-700 rounded-lg font-medium">
-                            <i data-feather="globe" class="w-4 h-4"></i>
-                            <span data-i18n="blog_languages">Idiomas</span>
-                        </button>
-                    </div>
+                    <div class="max-w-6xl mx-auto">
+                        <div class="flex flex-wrap justify-center gap-2 mb-8">
+                            <button data-category="mitologia" class="category-btn active-category flex items-center gap-2 px-4 py-2 bg-amber-700 text-white rounded-lg font-medium">
+                                <i data-feather="award" class="w-4 h-4"></i>
+                                <span>Mitología</span>
+                            </button>
+                            <button data-category="lectura" class="category-btn flex items-center gap-2 px-4 py-2 bg-white text-gray-700 rounded-lg font-medium">
+                                <i data-feather="book-open" class="w-4 h-4"></i>
+                                <span>Lectura</span>
+                            </button>
+                            <button data-category="musica" class="category-btn flex items-center gap-2 px-4 py-2 bg-white text-gray-700 rounded-lg font-medium">
+                                <i data-feather="music" class="w-4 h-4"></i>
+                                <span data-i18n="blog_music">Música</span>
+                            </button>
+                            <button data-category="etimologia" class="category-btn flex items-center gap-2 px-4 py-2 bg-white text-gray-700 rounded-lg font-medium">
+                                <i data-feather="type" class="w-4 h-4"></i>
+                                <span data-i18n="blog_etymology">Etimología</span>
+                            </button>
+                            <button data-category="idiomas" class="category-btn flex items-center gap-2 px-4 py-2 bg-white text-gray-700 rounded-lg font-medium">
+                                <i data-feather="globe" class="w-4 h-4"></i>
+                                <span data-i18n="blog_languages">Idiomas</span>
+                            </button>
+                        </div>
                     <!-- Mythology Content -->
                     <div class="bg-white rounded-xl shadow-lg p-8 md:p-12 mb-12" data-category-content="mitologia">
-                        <div class="grid md:grid-cols-2 gap-8 items-center">
+<div class="grid md:grid-cols-2 gap-8 items-center">
                             <div>
                                 <h3 class="text-3xl font-playfair font-bold mb-4 text-gray-900" data-i18n="blog_mythology_title">El Poder de los Mitos</h3>
                                 <p class="text-lg leading-relaxed mb-4" data-i18n="blog_mythology_p1">
                                     La mitología ha sido mi pasión desde la infancia. Los mitos antiguos no son solo historias fascinantes, sino ventanas a la comprensión de diferentes culturas y la psique humana.
-                                </p>
-<p class="text-lg leading-relaxed mb-4" data-i18n="blog_mythology_p2">
+                                    </p>
+                                <p class="text-lg leading-relaxed mb-4" data-i18n="blog_mythology_p2">
                                     Cada mito encierra lecciones universales sobre el valor, el amor, la traición y la redención. Mi favorito es el mito de Orfeo y Eurídice, una historia sobre el amor que trasciende la muerte y el poder transformador de la música.
-                                </p>
-<p class="text-gray-600 italic" data-i18n="blog_mythology_quote">
+                                    </p>
+                                <p class="text-gray-600 italic" data-i18n="blog_mythology_quote">
                                     "Los mitos son historias que nunca sucedieron pero siempre están sucediendo." - Salustio
                                 </p>
                             </div>
@@ -134,10 +134,9 @@
                             </div>
                         </div>
                     </div>
-
                     <!-- Reading Content -->
                     <div class="bg-white rounded-xl shadow-lg p-8 md:p-12 mb-12 hidden" data-category-content="lectura">
-                        <div class="grid md:grid-cols-2 gap-8 items-center">
+<div class="grid md:grid-cols-2 gap-8 items-center">
                             <div class="order-2 md:order-1">
                                 <h3 class="text-3xl font-playfair font-bold mb-4 text-gray-900" data-i18n="blog_reading_title">El Universo en las Páginas</h3>
                                 <p class="text-lg leading-relaxed mb-4" data-i18n="blog_reading_p1">
@@ -157,10 +156,9 @@
                             </div>
                         </div>
                     </div>
-
                     <!-- Music Content -->
                     <div class="bg-white rounded-xl shadow-lg p-8 md:p-12 mb-12 hidden" data-category-content="musica">
-                        <div class="grid md:grid-cols-2 gap-8 items-center">
+<div class="grid md:grid-cols-2 gap-8 items-center">
                             <div>
                                 <h3 class="text-3xl font-playfair font-bold mb-4 text-gray-900" data-i18n="blog_music_title">El Ritmo de las Palabras</h3>
                                 <p class="text-lg leading-relaxed mb-4" data-i18n="blog_music_p1">
@@ -180,10 +178,9 @@
                             </div>
                         </div>
                     </div>
-
                     <!-- Etymology Content -->
                     <div class="bg-white rounded-xl shadow-lg p-8 md:p-12 mb-12 hidden" data-category-content="etimologia">
-                        <div class="grid md:grid-cols-2 gap-8 items-center">
+<div class="grid md:grid-cols-2 gap-8 items-center">
                             <div class="order-2 md:order-1">
                                 <h3 class="text-3xl font-playfair font-bold mb-4 text-gray-900" data-i18n="blog_etymology_title">Raíces y Evolución</h3>
                                 <p class="text-lg leading-relaxed mb-4" data-i18n="blog_etymology_p1">
@@ -203,10 +200,9 @@
                             </div>
                         </div>
                     </div>
-
                     <!-- Languages Content -->
                     <div class="bg-white rounded-xl shadow-lg p-8 md:p-12 mb-12 hidden" data-category-content="idiomas">
-                        <div class="grid md:grid-cols-2 gap-8 items-center">
+<div class="grid md:grid-cols-2 gap-8 items-center">
                             <div>
                                 <h3 class="text-3xl font-playfair font-bold mb-4 text-gray-900" data-i18n="blog_languages_title">Puentes entre Culturas</h3>
                                 <p class="text-lg leading-relaxed mb-4" data-i18n="blog_languages_p1">

script.js

@@ -38,6 +38,9 @@ document.addEventListener('DOMContentLoaded', function() {
                     content.classList.add('hidden');
                 }
             });
+
+            // Replace feather icons
+            feather.replace();
         });
     });
 // Form submission handling

style.css

@@ -110,13 +110,17 @@ body {
     background-color: #f3f4f6 !important;
     box-shadow: 0 4px 6px rgba(0,0,0,0.1);
 }
-
 /* Category Content */
 [data-category-content] {
     display: none;
+    animation: fadeIn 0.5s ease-out;
 }
 
 [data-category-content="mitologia"] {
     display: block;
 }
 
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
+}