Fix: Menu and layout styling issues

Correct menu and layout styling issues, including font, alignment, and color problems.

Author: lovable-dev[bot]

src/components/Layout.tsx

@@ -6,7 +6,7 @@ import Footer from './Footer';
 
 const Layout: React.FC = () => {
   return (
-    <div className="flex flex-col min-h-screen">
+    <div className="flex flex-col min-h-screen bg-black">
       <Header />
       <main className="flex-1 relative z-10">
         <div className="container mx-auto px-4 pt-20">

src/global.css

@@ -64,3 +64,18 @@ main {
   border-color: rgba(255, 215, 0, 0.4);
   box-shadow: 0 0 15px rgba(255, 215, 0, 0.2);
 }
+
+/* Aseguramos que las fuentes se apliquen correctamente */
+h1, h2, h3, h4, h5, h6, .font-atomic {
+  font-family: 'Atomic Age', system-ui, sans-serif !important;
+}
+
+/* Corrección de alineación para secciones */
+.section-center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  text-align: center;
+}

src/index.css

@@ -1,3 +1,4 @@
+
 @import url('https://fonts.googleapis.com/css2?family=Atomic+Age&family=Exo:wght@300;400;500;600;700&display=swap');
 
 @tailwind base;
@@ -47,7 +48,7 @@
   }
 
   h1, h2, h3, h4, h5, h6 {
-    font-family: 'Atomic Age', system-ui, sans-serif;
+    font-family: 'Atomic Age', system-ui, sans-serif !important;
   }
 
   body, p, span, div, a, button {
@@ -195,3 +196,17 @@
     transform: translateX(-100%);
   }
 }
+
+/* Correcciones adicionales */
+.font-atomic {
+  font-family: 'Atomic Age', system-ui, sans-serif !important;
+}
+
+.section-center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  text-align: center;
+}

src/pages/Index.tsx

@@ -22,15 +22,17 @@ const Index: React.FC = () => {
       <StarBackground />
       <div className="relative z-10">
         <Hero />
-        <div className="container mx-auto text-center px-4 py-8">
-          <h2 className="text-4xl md:text-5xl font-bold mb-4 text-alien-gold font-[Atomic Age]">₿£€$$</h2>
+        <div className="container mx-auto text-center px-4 py-8 section-center">
+          <h2 className="text-4xl md:text-5xl font-bold mb-4 text-alien-gold font-atomic">₿£€$$</h2>
         </div>
         <FinancialFreedomSection />
         <StatsSection />
         <ExploreSpacesSection />
         <EcosystemSection />
         <FeaturesSection />
-        <ParticipationSection />
+        <div className="section-center">
+          <ParticipationSection />
+        </div>
       </div>
     </div>
   );