diff --git a/src/app/page.tsx b/src/app/page.tsx
index 444b7cb..13a572c 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -45,6 +45,7 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroBillboard
+      containerClassName="px-4 sm:px-6 lg:px-8 mx-auto max-w-screen-xl"
       background={{
         variant: "gradient-bars"}}
       title="Gestión y Representación Empresarial Integral"
@@ -98,11 +99,13 @@ export default function LandingPage() {
           label: "Confianza",          value: "Segura"},
       ]}
       metricsAnimation="slide-up"
+      metricsContainerClassName="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"
     />
   </div>
 
   <div id="features" data-section="features">
       <FeatureCardTwentyOne
+      containerClassName="px-4 sm:px-6 lg:px-8 mx-auto max-w-screen-xl"
       useInvertedBackground={true}
       title="Servicios Estratégicos"
       description="Desarrollamos soluciones integrales para el crecimiento corporativo, asegurando cumplimiento y éxito operativo."
@@ -121,6 +124,7 @@ export default function LandingPage() {
 
   <div id="metrics" data-section="metrics">
       <MetricCardSeven
+      containerClassName="px-4 sm:px-6 lg:px-8 mx-auto max-w-screen-xl"
       animationType="slide-up"
       textboxLayout="split"
       useInvertedBackground={false}
@@ -140,11 +144,13 @@ export default function LandingPage() {
       ]}
       title="Resultados en Cifras"
       description="Compromiso inquebrantable con la excelencia y la eficiencia empresarial que su compañía necesita."
+      gridClassName="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
     />
   </div>
 
   <div id="faq" data-section="faq">
       <FaqSplitText
+      containerClassName="px-4 sm:px-6 lg:px-8 mx-auto max-w-screen-xl"
       useInvertedBackground={false}
       faqs={[
         {
@@ -161,6 +167,7 @@ export default function LandingPage() {
 
   <div id="contact" data-section="contact">
       <ContactCenter
+      containerClassName="px-4 sm:px-6 lg:px-8 mx-auto max-w-screen-md"
       useInvertedBackground={true}
       background={{
         variant: "rotated-rays-static"}}
@@ -172,6 +179,7 @@ export default function LandingPage() {
 
   <div id="footer" data-section="footer">
       <FooterBaseReveal
+      containerClassName="px-4 sm:px-6 lg:px-8 mx-auto max-w-screen-xl"
       logoText="GREI"
       columns={[
         {
@@ -192,6 +200,7 @@ export default function LandingPage() {
         },
       ]}
       copyrightText="© 2024 GREI Gestión Empresarial."
+      columnsClassName="flex flex-col sm:flex-row justify-between gap-8"
     />
   </div>
       </ReactLenis>
diff --git a/src/app/styles/variables.css b/src/app/styles/variables.css
index 5c93459..d2dae91 100644
--- a/src/app/styles/variables.css
+++ b/src/app/styles/variables.css
@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #fbfbfb;
+  --background: #f5f5f5;
   --card: #ffffff;
-  --foreground: #0a1526;
-  --primary-cta: #0a1526;
+  --foreground: #333333;
+  --primary-cta: #6b7280;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #c5a059;
+  --secondary-cta: #d1d5db;
   --secondary-cta-text: #ffffff;
-  --accent: #c5a059;
-  --background-accent: #f3eee5;
+  --accent: #9ca3af;
+  --background-accent: #e5e7eb;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);