diff --git a/src/App.jsx b/src/App.jsx
index d251b7c..4023d25 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -20,6 +20,7 @@ function App() {
   const [isAppFullyReady, setIsAppFullyReady] = useState(false);
   const [transitionCompleted, setTransitionCompleted] = useState(false);
   const [isTheorySectionReady, setIsTheorySectionReady] = useState(false);
+  const [isTheoryOpen, setIsTheoryOpen] = useState(false);
 
   const {
     isLoading,
@@ -103,6 +104,10 @@ function App() {
     });
   };
 
+  const toggleTheorySection = () => {
+    setIsTheoryOpen(!isTheoryOpen);
+  };
+
   // Renderizar ambos elementos con transiciones CSS
   return (
     <>
@@ -159,17 +164,43 @@ function App() {
             </aside>
           </main>
           
-          {/* Lazy loading de la sección de teoría */}
-          <Suspense fallback={
-            <div className="flex justify-center items-center py-12">
-              <div className="text-gray-500">Cargando contenido teórico...</div>
+          {/* Sección de teoría con botón colapsable */}
+          <div className="mt-8">
+            <div className="text-center mb-4">
+              <button
+                onClick={toggleTheorySection}
+                className="inline-flex items-center gap-2 px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg shadow-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all duration-300 ease-in-out transform hover:scale-105"
+                aria-expanded={isTheoryOpen}
+                aria-label={isTheoryOpen ? "Ocultar explicación teórica" : "Mostrar explicación teórica"}
+              >
+                <span className="text-xl" role="img" aria-hidden="true">
+                  {isTheoryOpen ? "⬆️" : "🧠"}
+                </span>
+                {isTheoryOpen ? "Ocultar explicación" : "¿Cómo funciona esto?"}
+              </button>
+            </div>
+            
+            {/* Contenedor colapsable con Tailwind CSS Grid */}
+            <div className={`grid transition-all duration-300 ease-out ${
+              isTheoryOpen 
+                ? 'grid-rows-[1fr] opacity-100' 
+                : 'grid-rows-[0fr] opacity-0'
+            }`}>
+              <div className="overflow-hidden">
+                {/* Lazy loading de la sección de teoría */}
+                <Suspense fallback={
+                  <div className="flex justify-center items-center py-12">
+                    <div className="text-gray-500">Cargando contenido teórico...</div>
+                  </div>
+                }>
+                  <TheorySection onReady={() => setIsTheorySectionReady(true)} />
+                </Suspense>
+              </div>
             </div>
-          }>
-            <TheorySection onReady={() => setIsTheorySectionReady(true)} />
-          </Suspense>
+          </div>
           
           {/* Footer */}
-          <footer ref={footerRef} className="mt-12 pt-6 border-t border-gray-200 text-center text-gray-500">
+          <footer ref={footerRef} className="mt-4 pt-6 border-t border-gray-200 text-center text-gray-500">
             <p>
               <a 
                 href="https://github.com/opablon/cae"