diff --git a/scale_fix.mjs b/scale_fix.mjs
new file mode 100644
index 0000000..0942d83
--- /dev/null
+++ b/scale_fix.mjs
@@ -0,0 +1,40 @@
+import fs from 'fs';
+import path from 'path';
+
+const dir = 'src/components';
+const files = fs.readdirSync(dir).filter(f => f.endsWith('.tsx'));
+
+for (const file of files) {
+  const filePath = path.join(dir, file);
+  let content = fs.readFileSync(filePath, 'utf8');
+  let original = content;
+
+  // Hero Section
+  if (file === 'HeroSection.tsx') {
+    content = content.replaceAll('text-5xl md:text-7xl lg:text-8xl', 'text-4xl md:text-6xl lg:text-8xl break-words');
+    content = content.replaceAll('text-2xl md:text-4xl font-hero', 'text-xl md:text-3xl lg:text-4xl font-hero');
+  } else {
+    // Normal Sections Big Titles
+    // Replace text-6xl md:text-7xl font-bold pt-4 pb-10 leading-[1.8] text-gradient
+    content = content.replace(/text-6xl md:text-7xl/g, 'text-4xl md:text-5xl lg:text-7xl break-words');
+    content = content.replace(/text-5xl md:text-6xl/g, 'text-3xl md:text-4xl lg:text-6xl break-words');
+    
+    // Smaller sizes
+    content = content.replace(/text-5xl pt-3 pb-6/g, 'text-3xl md:text-4xl lg:text-5xl pt-3 pb-6 break-words');
+    content = content.replace(/text-4xl pt-3 pb-5/g, 'text-2xl md:text-3xl lg:text-4xl pt-3 pb-5');
+    content = content.replace(/text-3xl pt-3 pb-5/g, 'text-xl md:text-2xl lg:text-3xl pt-3 pb-5');
+    
+    // Footer / Nav
+    content = content.replace(/text-4xl py-4/g, 'text-2xl md:text-3xl lg:text-4xl py-4');
+    content = content.replace(/text-4xl py-2/g, 'text-2xl md:text-3xl lg:text-4xl py-2');
+    content = content.replace(/text-2xl py-2/g, 'text-lg md:text-xl lg:text-2xl py-2');
+  }
+
+  // General overflow catch-all: Ensure .container has overflow-hidden just in case? 
+  // No, adding break-words is better.
+
+  if (original !== content) {
+    fs.writeFileSync(filePath, content);
+    console.log(`Fixed responsive sizes in ${file}`);
+  }
+}
diff --git a/src/components/AboutSection.tsx b/src/components/AboutSection.tsx
index 31d025f..e413c79 100644
--- a/src/components/AboutSection.tsx
+++ b/src/components/AboutSection.tsx
@@ -30,7 +30,7 @@ const AboutSection = () => (
           viewport={{ once: false, amount: 0.15 }}
           transition={{ duration: 0.6 }}
         >
-          <h2 className="font-display text-6xl md:text-7xl font-bold pt-4 pb-6 leading-normal mb-6 text-gradient">
+          <h2 className="font-display text-4xl md:text-5xl lg:text-7xl break-words font-bold pt-4 pb-6 leading-normal mb-6 text-gradient">
             {ABOUT_EVENT.title}
           </h2>
           <p className="text-muted-foreground mb-6 leading-relaxed whitespace-pre-line">
diff --git a/src/components/BookingSection.tsx b/src/components/BookingSection.tsx
index 4f2e74a..dbcf333 100644
--- a/src/components/BookingSection.tsx
+++ b/src/components/BookingSection.tsx
@@ -161,7 +161,7 @@ const BookingSection = () => {
           className="max-w-lg mx-auto text-center bg-card rounded-2xl p-10 shadow-elevated"
         >
           <CheckCircle className="w-16 h-16 text-primary mx-auto mb-4" />
-          <h3 className="font-display text-4xl pt-3 pb-5 leading-[1.6] font-bold text-foreground mb-2">
+          <h3 className="font-display text-2xl md:text-3xl lg:text-4xl pt-3 pb-5 leading-[1.6] font-bold text-foreground mb-2">
             ¡Reserva recibida!
           </h3>
           <p className="text-muted-foreground">
@@ -186,7 +186,7 @@ const BookingSection = () => {
           viewport={{ once: false, amount: 0.15 }}
           className="text-center mb-10"
         >
-          <h2 className="font-display text-6xl md:text-7xl font-bold pt-4 pb-10 leading-[1.8] text-gradient">
+          <h2 className="font-display text-4xl md:text-5xl lg:text-7xl break-words font-bold pt-4 pb-10 leading-[1.8] text-gradient">
             Reserva tu pase
           </h2>
           <p className="text-muted-foreground">
diff --git a/src/components/FooterSection.tsx b/src/components/FooterSection.tsx
index 405b34c..adc218b 100644
--- a/src/components/FooterSection.tsx
+++ b/src/components/FooterSection.tsx
@@ -17,7 +17,7 @@ const FooterSection = () => (
       <div className="grid md:grid-cols-3 gap-8 mb-8">
         {/* Brand */}
         <div>
-          <h3 className="font-display text-5xl pt-3 pb-6 leading-[1.6] font-bold mb-2">ZoukLambadaBCN</h3>
+          <h3 className="font-display text-3xl md:text-4xl lg:text-5xl pt-3 pb-6 break-words leading-[1.6] font-bold mb-2">ZoukLambadaBCN</h3>
           <p className="text-primary-foreground/70 text-sm">
             <img src={hacecalor} alt="Hacecalor" className="inline-block w-auto h-12 mr-1" />
             <img src={activat} alt="Activat" className="inline-block w-auto h-12 mr-1" />
@@ -26,7 +26,7 @@ const FooterSection = () => (
 
         {/* Contacto */}
         <div>
-          <h4 className="font-display text-3xl pt-3 pb-5 leading-[1.6] font-semibold mb-2">Contacto</h4>
+          <h4 className="font-display text-xl md:text-2xl lg:text-3xl pt-3 pb-5 leading-[1.6] font-semibold mb-2">Contacto</h4>
           <a
             href={`mailto:${FOOTER.email}`}
             className="flex items-center gap-2 text-sm text-primary-foreground/70 hover:text-primary transition-colors"
@@ -38,7 +38,7 @@ const FooterSection = () => (
 
         {/* Redes */}
         <div>
-          <h4 className="font-display text-3xl pt-3 pb-5 leading-[1.6] font-semibold mb-2">Síguenos</h4>
+          <h4 className="font-display text-xl md:text-2xl lg:text-3xl pt-3 pb-5 leading-[1.6] font-semibold mb-2">Síguenos</h4>
           <div className="flex gap-3">
             {ABOUT_ORG.socials.instagram && (
               <a href={ABOUT_ORG.socials.instagram} target="_blank" rel="noopener noreferrer" aria-label="Instagram"
diff --git a/src/components/GallerySection.tsx b/src/components/GallerySection.tsx
index 2d4a073..a616abf 100644
--- a/src/components/GallerySection.tsx
+++ b/src/components/GallerySection.tsx
@@ -15,7 +15,7 @@ const GallerySection = () => (
         viewport={{ once: false, amount: 0.15 }}
         className="text-center mb-12"
       >
-        <h2 className="font-display text-6xl md:text-7xl font-bold pt-4 pb-10 leading-[1.8] text-gradient">
+        <h2 className="font-display text-4xl md:text-5xl lg:text-7xl break-words font-bold pt-4 pb-10 leading-[1.8] text-gradient">
           Galería
         </h2>
       </motion.div>
diff --git a/src/components/HeroSection.tsx b/src/components/HeroSection.tsx
index d360b76..d5f73b4 100644
--- a/src/components/HeroSection.tsx
+++ b/src/components/HeroSection.tsx
@@ -60,7 +60,7 @@ const HeroSection = () => {
           initial={{ opacity: 0, y: 30 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ delay: 0.4 }}
-          className="font-hero text-5xl md:text-7xl lg:text-8xl font-black text-primary-foreground mb-4 leading-tight"
+          className="font-hero text-4xl md:text-6xl lg:text-8xl break-words font-black text-primary-foreground mb-4 leading-tight"
         >
           {EVENT_INFO.name}
         </motion.h1>
@@ -84,7 +84,7 @@ const HeroSection = () => {
           {countdownItems.map((item) => (
             <div key={item.label} className="text-center">
               <div className="bg-primary-foreground/10 backdrop-blur-sm border border-primary-foreground/20 rounded-lg px-4 py-3 md:px-6 md:py-4 min-w-[60px] md:min-w-[80px]">
-                <span className="text-2xl md:text-4xl font-hero font-bold text-primary-foreground">
+                <span className="text-xl md:text-3xl lg:text-4xl font-hero font-bold text-primary-foreground">
                   {String(item.value).padStart(2, "0")}
                 </span>
               </div>
diff --git a/src/components/HotelSection.tsx b/src/components/HotelSection.tsx
index b10e5f1..05d546b 100644
--- a/src/components/HotelSection.tsx
+++ b/src/components/HotelSection.tsx
@@ -16,7 +16,7 @@ const HotelSection = () => (
         viewport={{ once: false, amount: 0.15 }}
         className="text-center mb-12"
       >
-        <h2 className="font-display text-6xl md:text-7xl font-bold pt-4 pb-10 leading-[1.8] text-gradient">
+        <h2 className="font-display text-4xl md:text-5xl lg:text-7xl break-words font-bold pt-4 pb-10 leading-[1.8] text-gradient">
           Alojamiento
         </h2>
         <p className="text-muted-foreground max-w-2xl mx-auto">
@@ -44,7 +44,7 @@ const HotelSection = () => (
             </div>
 
             <div className="p-5">
-              <h3 className="font-display text-3xl pt-3 pb-5 leading-[1.6] font-bold text-foreground mb-1">
+              <h3 className="font-display text-xl md:text-2xl lg:text-3xl pt-3 pb-5 leading-[1.6] font-bold text-foreground mb-1">
                 {room.name}
               </h3>
               <p className="text-primary font-bold text-xl mb-2">{room.price}</p>
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index b73f3f0..a89fbd3 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -83,7 +83,7 @@ const Navbar = () => {
                 exit={{ opacity: 0, y: 30 }}
                 transition={{ delay: 0.1 * i }}
                 onClick={() => setMenuOpen(false)}
-                className="text-5xl pt-3 pb-6 leading-[1.6] font-display font-medium text-foreground hover:text-primary transition-colors"
+                className="text-3xl md:text-4xl lg:text-5xl pt-3 pb-6 break-words leading-[1.6] font-display font-medium text-foreground hover:text-primary transition-colors"
               >
                 {link.label}
               </motion.a>
diff --git a/src/components/OrgSection.tsx b/src/components/OrgSection.tsx
index e21c64c..4a624e6 100644
--- a/src/components/OrgSection.tsx
+++ b/src/components/OrgSection.tsx
@@ -3,11 +3,11 @@ import { ABOUT_ORG } from "@/data/event-data";
 import communityImg from "@/assets/community.jpg";
 import { Instagram, Facebook, Youtube } from "lucide-react";
 
-const maskStyle = "radial-gradient(491.93px at 50% 660px,#000 99%,#0000 101%) calc(50% - 440px) 0/880px 100%, radial-gradient(491.93px at 50% -440px,#0000 99%,#000 101%) 50% 220px/880px 100% repeat-x";
+const maskStyle = "radial-gradient(196.7px at 50% 264px, rgb(0, 0, 0) 99%, rgba(0, 0, 0, 0) 101%) calc(50% - 176px) 0px / 352px 100%, radial-gradient(196.7px at 50% -176px, rgba(0, 0, 0, 0) 99%, rgb(0, 0, 0) 101%) 50% 78px / 352px 100% repeat-x";
 
 const OrgSection = () => (
   <section 
-    className="section-padding bg-card pb-20 md:pb-28 pt-[200px] md:pt-[240px] -mt-[80px] relative z-20"
+    className="section-padding bg-card pb-20 md:pb-28 pt-[80px] md:pt-[100px] -mt-[32px] relative z-20"
     style={{ WebkitMask: maskStyle, mask: maskStyle }}
   >
     <div className="container mx-auto">
@@ -19,7 +19,7 @@ const OrgSection = () => (
           viewport={{ once: false, amount: 0.15 }}
           transition={{ duration: 0.6 }}
         >
-          <h2 className="font-display text-6xl md:text-7xl font-bold pt-4 pb-6 leading-normal mb-6 text-gradient">
+          <h2 className="font-display text-4xl md:text-5xl lg:text-7xl break-words font-bold pt-4 pb-6 leading-normal mb-6 text-gradient">
             {ABOUT_ORG.title}
           </h2>
           <div className="space-y-4 text-muted-foreground leading-relaxed">
diff --git a/src/components/PracticalSection.tsx b/src/components/PracticalSection.tsx
index 6c94883..450d873 100644
--- a/src/components/PracticalSection.tsx
+++ b/src/components/PracticalSection.tsx
@@ -15,7 +15,7 @@ const PracticalSection = () => (
         viewport={{ once: false, amount: 0.15 }}
         className="text-center mb-12"
       >
-        <h2 className="font-display text-6xl md:text-7xl font-bold pt-4 pb-6 leading-normal text-gradient mb-4">
+        <h2 className="font-display text-4xl md:text-5xl lg:text-7xl break-words font-bold pt-4 pb-6 leading-normal text-gradient mb-4">
           Información Práctica
         </h2>
       </motion.div>
@@ -57,7 +57,7 @@ const PracticalSection = () => (
         >
           {/* Aeropuertos */}
           <div>
-            <h3 className="font-display text-4xl pt-3 pb-5 leading-[1.6] font-bold text-foreground mb-2 flex items-center gap-2">
+            <h3 className="font-display text-2xl md:text-3xl lg:text-4xl pt-3 pb-5 leading-[1.6] font-bold text-foreground mb-2 flex items-center gap-2">
               <Plane className="w-5 h-5 text-primary" /> Aeropuertos Cercanos
             </h3>
             <div className="space-y-3">
@@ -72,7 +72,7 @@ const PracticalSection = () => (
 
           {/* Cómo llegar */}
           <div>
-            <h3 className="font-display text-4xl pt-3 pb-5 leading-[1.6] font-bold text-foreground mb-2 flex items-center gap-2">
+            <h3 className="font-display text-2xl md:text-3xl lg:text-4xl pt-3 pb-5 leading-[1.6] font-bold text-foreground mb-2 flex items-center gap-2">
               <Train className="w-5 h-5 text-primary" /> Cómo Llegar
             </h3>
             <div className="space-y-3">
diff --git a/src/components/ScheduleSection.tsx b/src/components/ScheduleSection.tsx
index 464adda..dd2ceeb 100644
--- a/src/components/ScheduleSection.tsx
+++ b/src/components/ScheduleSection.tsx
@@ -29,7 +29,7 @@ const ScheduleSection = () => (
         viewport={{ once: false, amount: 0.15 }}
         className="text-center mb-12"
       >
-        <h2 className="font-display text-6xl md:text-7xl font-bold pt-4 pb-10 leading-[1.8] text-gradient">
+        <h2 className="font-display text-4xl md:text-5xl lg:text-7xl break-words font-bold pt-4 pb-10 leading-[1.8] text-gradient">
           Programa
         </h2>
         <p className="text-muted-foreground max-w-2xl mx-auto">
@@ -46,7 +46,7 @@ const ScheduleSection = () => (
             viewport={{ once: false, amount: 0.15 }}
             transition={{ delay: di * 0.15 }}
           >
-            <h3 className="font-display text-4xl pt-3 pb-5 leading-[1.6] font-bold text-foreground mb-4 pb-3 border-b-2 border-primary">
+            <h3 className="font-display text-2xl md:text-3xl lg:text-4xl pt-3 pb-5 leading-[1.6] font-bold text-foreground mb-4 pb-3 border-b-2 border-primary">
               {day.day}
             </h3>
             <div className="space-y-3">
diff --git a/src/components/StaffSection.tsx b/src/components/StaffSection.tsx
index ce138d7..5051c0f 100644
--- a/src/components/StaffSection.tsx
+++ b/src/components/StaffSection.tsx
@@ -40,7 +40,7 @@ const StaffSection = () => {
           className="flex items-end justify-between gap-4 mb-6 md:mb-8"
         >
           <div className="text-center md:text-left w-full">
-            <h2 className="font-display text-6xl md:text-7xl font-bold pt-4 pb-6 leading-normal text-gradient mb-2">
+            <h2 className="font-display text-4xl md:text-5xl lg:text-7xl break-words font-bold pt-4 pb-6 leading-normal text-gradient mb-2">
               Staff del Evento
             </h2>
             <p className="text-muted-foreground max-w-2xl mx-auto md:mx-0">
@@ -70,12 +70,12 @@ const StaffSection = () => {
         {/* Carousel scroller */}
         <div className="relative">
           {/* gradient edges */}
-          <div className="pointer-events-none absolute inset-y-0 left-0 w-8 bg-gradient-to-r from-background to-transparent rounded-l-2xl" />
-          <div className="pointer-events-none absolute inset-y-0 right-0 w-8 bg-gradient-to-l from-background to-transparent rounded-r-2xl" />
+          <div className="hidden md:block pointer-events-none absolute inset-y-0 left-0 w-8 bg-gradient-to-r from-background to-transparent rounded-l-2xl z-20" />
+          <div className="hidden md:block pointer-events-none absolute inset-y-0 right-0 w-8 bg-gradient-to-l from-background to-transparent rounded-r-2xl z-20" />
 
           <div
             id="staff-scroller"
-            className="flex gap-6 overflow-x-auto snap-x snap-mandatory scroll-smooth pb-2 -mx-4 px-4 md:mx-0 md:px-0"
+            className="flex gap-6 overflow-x-auto overflow-y-hidden snap-x snap-mandatory scroll-smooth pb-8 pt-6 -mx-4 px-4 md:mx-0 md:px-0"
           >
             {STAFF.map((member, i) => (
               <motion.div
@@ -88,12 +88,12 @@ const StaffSection = () => {
                 className="snap-start shrink-0 w-4/5 sm:w-1/2 lg:w-1/3 xl:w-1/4 bg-card rounded-2xl overflow-hidden shadow-card hover:shadow-elevated transition-shadow group"
               >
                 {/* Foto */}
-                <div className="bg-muted flex items-center justify-center overflow-hidden">
+                <div className="bg-muted flex items-center justify-center overflow-hidden w-full aspect-[4/5]">
                   {member.image ? (
                     <img
                       src={member.image}
                       alt={member.name}
-                      className="w-full h-auto object-contain object-center group-hover:scale-105 transition-transform duration-500 bg-muted"
+                      className="w-full h-full object-cover object-top group-hover:scale-105 transition-transform duration-500 bg-muted"
                     />
                   ) : (
                     <User className="w-16 h-16 text-muted-foreground/40" />
@@ -110,7 +110,7 @@ const StaffSection = () => {
                     {member.role}
                   </span>
 
-                  <h3 className="font-display text-3xl pt-3 pb-5 leading-[1.6] font-bold text-foreground mb-1">
+                  <h3 className="font-display text-xl md:text-2xl lg:text-3xl pt-3 pb-5 leading-[1.6] font-bold text-foreground mb-1">
                     {member.name}
                   </h3>
                   <p className="text-sm text-muted-foreground mb-4">