fix: mobile-first responsive improvements across all pages

src/pages/bodas-reales.astro

@@ -103,7 +103,7 @@ import MainLayout from '../layouts/MainLayout.astro';
         </p>
       </div>
 
-      <div class="grid-3" style="align-items: start;">
+      <div class="grid-3 arte-mesa-grid" style="align-items: start;">
         <div style="text-align: center;">
           <div class="img-zoom overflow-hidden rounded-lg reveal reveal-scale" style="--reveal-delay: 100; aspect-ratio:4/5;margin-bottom:var(--space-6);">
             <img src="/images/generated/gallery-4.webp" alt="Texturas nobles" style="width:100%;height:100%;object-fit:cover;" loading="lazy" />
@@ -112,7 +112,7 @@ import MainLayout from '../layouts/MainLayout.astro';
           <p class="text-body-sm text-muted">Linos y sedas seleccionados por su caída y tacto excepcional.</p>
         </div>
 
-        <div style="text-align: center; margin-top: var(--space-12);">
+        <div class="arte-stagger" style="text-align: center;">
           <div class="img-zoom overflow-hidden rounded-lg reveal reveal-scale" style="--reveal-delay: 250; aspect-ratio:4/5;margin-bottom:var(--space-6);">
             <img src="/images/foto-canapes.jpg" alt="Canapés premium" style="width:100%;height:100%;object-fit:cover;" loading="lazy" />
           </div>
@@ -120,7 +120,7 @@ import MainLayout from '../layouts/MainLayout.astro';
           <p class="text-body-sm text-muted">Detalles metálicos que aportan un brillo atemporal a su celebración.</p>
         </div>
 
-        <div style="text-align: center; margin-top: var(--space-24);">
+        <div class="arte-stagger-2" style="text-align: center;">
           <div class="img-zoom overflow-hidden rounded-lg reveal reveal-scale" style="--reveal-delay: 400; aspect-ratio:4/5;margin-bottom:var(--space-6);">
             <img src="/images/generated/gallery-3.webp" alt="Platos de autor" style="width:100%;height:100%;object-fit:cover;" loading="lazy" />
           </div>
@@ -190,15 +190,28 @@ import MainLayout from '../layouts/MainLayout.astro';
 <style>
   .bento-grid {
     display: grid;
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: 1fr;
     gap: var(--space-4);
   }
   .bento-large {
     position: relative;
-    min-height: 22rem;
+    min-height: 18rem;
-    grid-column: span 2;
+    grid-column: span 1;
+  }
+  .bento-small { position: relative; min-height: 12rem; }
+
+  /* Staggered art-de-la-mesa cards — remove on mobile */
+  .arte-stagger { margin-top: 0; }
+  .arte-stagger-2 { margin-top: 0; }
+
+  @media (min-width: 40rem) {
+    .bento-grid {
+      grid-template-columns: 1fr 1fr;
+      gap: var(--space-4);
+    }
+    .bento-large { grid-column: span 2; }
+    .bento-small { min-height: 16rem; }
   }
-  .bento-small { position: relative; min-height: 14rem; }
 
   @media (min-width: 48rem) {
     .bento-grid {
@@ -214,5 +227,9 @@ import MainLayout from '../layouts/MainLayout.astro';
     .bento-small { min-height: 23rem; }
     .col-5 { grid-column: span 5 !important; }
     .col-7 { grid-column: span 7 !important; }
+
+    /* Art de la mesa stagger only on desktop */
+    .arte-stagger { margin-top: var(--space-12); }
+    .arte-stagger-2 { margin-top: var(--space-24); }
   }
 </style>

src/pages/contacto.astro

@@ -147,13 +147,13 @@ import MainLayout from '../layouts/MainLayout.astro';
 <style>
   /* Hero */
   .contacto-hero {
-    padding-top: calc(var(--nav-h) + var(--space-section));
+    padding-top: calc(var(--nav-h) + var(--space-8));
-    padding-bottom: var(--space-section);
+    padding-bottom: var(--space-8);
   }
 
   .contacto-hero-grid {
     display: grid;
-    gap: var(--space-12);
+    gap: var(--space-8);
   }
 
   .contacto-hero-img {
@@ -163,24 +163,31 @@ import MainLayout from '../layouts/MainLayout.astro';
   /* Contact layout */
   .contacto-grid {
     display: grid;
-    gap: var(--space-16);
+    gap: var(--space-10);
   }
 
   .contacto-info {
     display: flex;
     flex-direction: column;
-    gap: var(--space-10);
+    gap: var(--space-8);
   }
 
   @media (min-width: 48rem) {
+    .contacto-hero {
+      padding-top: calc(var(--nav-h) + var(--space-section));
+      padding-bottom: var(--space-section);
+    }
+
     .contacto-hero-grid {
       grid-template-columns: 7fr 5fr;
       align-items: center;
+      gap: var(--space-12);
     }
 
     .contacto-grid {
       grid-template-columns: 2fr 3fr;
       align-items: start;
+      gap: var(--space-16);
     }
   }
 </style>

src/pages/corporativo-business.astro

@@ -8,31 +8,32 @@ import MainLayout from '../layouts/MainLayout.astro';
   activeNav="corporativo"
 >
 
-  <!-- ─── HERO ─── -->
+<!-- ─── HERO ─── -->
-  <header style="padding-top:calc(var(--nav-h) + var(--space-section));padding-bottom:var(--space-section);overflow:hidden;">
+  <header style="padding-top:calc(var(--nav-h) + var(--space-8));padding-bottom:var(--space-8);overflow:hidden;">
     <div class="page-wrap">
       <div class="grid-12" style="align-items:center;gap:var(--space-8);">
 
         <div style="grid-column:span 12;z-index:10;">
           <p class="section-eyebrow reveal">Excelencia en Eventos</p>
-          <h1 class="text-display reveal" style="--reveal-delay: 150;margin-bottom:var(--space-8);">Corporativo<br />&amp; Business</h1>
+          <h1 class="text-display reveal" style="--reveal-delay: 150;margin-bottom:var(--space-6);">Corporativo<br />&amp; Business</h1>
-          <p class="text-muted reveal" style="--reveal-delay: 250;max-width:32rem;line-height:1.7;margin-bottom:var(--space-10);">
+          <p class="text-muted reveal" style="--reveal-delay: 250;max-width:32rem;line-height:1.7;margin-bottom:var(--space-8);">
             Elevamos la imagen de su empresa a través de experiencias gastronómicas impecables. Desde lanzamientos de marca disruptivos hasta galas institucionales de alto nivel.
           </p>
-          <div style="display:flex;gap:var(--space-6);flex-wrap:wrap;align-items:center;">
+          <div class="corp-hero-actions">
             <a href="https://wa.me/34678171513?text=Hola%20MNQ%2C%20quiero%20propuesta%20corporativa" class="btn btn-primary" target="_blank" rel="noreferrer">Solicitar Propuesta</a>
             <a href="#servicios" class="btn-underline">Ver Servicios</a>
           </div>
         </div>
 
-        <div style="grid-column:span 12;position:relative;height:28rem;" class="reveal" style="--reveal-delay: 350;">
+        <div style="grid-column:span 12;position:relative;" class="reveal" style="--reveal-delay: 350;">
-          <img
+          <div style="aspect-ratio: 16/9;" class="overflow-hidden rounded-lg border-outline-soft">
-            src="/images/foto-corporativo.jpg"
+            <img
-            alt="Eventos corporativos premium — MNQ"
+              src="/images/foto-corporativo.jpg"
-            class="rounded-lg border-outline-soft"
+              alt="Eventos corporativos premium — MNQ"
-            style="width:100%;height:100%;object-fit:cover;object-position:center top;"
+              style="width:100%;height:100%;object-fit:cover;object-position:center top;"
-            loading="eager"
+              loading="eager"
-          />
+            />
+          </div>
         </div>
 
       </div>
@@ -146,7 +147,22 @@ import MainLayout from '../layouts/MainLayout.astro';
     grid-template-columns: 1fr;
     gap: var(--space-4);
   }
-  .corp-wide, .corp-tall { position: relative; min-height: 18rem; }
+  .corp-wide, .corp-tall { position: relative; min-height: 14rem; }
+
+  /* Hero actions stack on mobile */
+  .corp-hero-actions {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-4);
+    align-items: flex-start;
+  }
+
+  @media (min-width: 30rem) {
+    .corp-hero-actions {
+      flex-direction: row;
+      align-items: center;
+    }
+  }
 
   @media (min-width: 48rem) {
     .corp-bento {
@@ -156,7 +172,7 @@ import MainLayout from '../layouts/MainLayout.astro';
     }
     .corp-wide { grid-column: span 2; }
     .corp-tall { grid-row: span 2; min-height: auto; }
+    .corp-wide, .corp-tall { min-height: 20rem; }
     [style*="grid-column:span 12"] { grid-column: span 6 !important; }
-    [style*="height:28rem"] { height: 36rem !important; }
   }
 </style>

src/pages/reuniones-familiares.astro

@@ -241,45 +241,51 @@ import MainLayout from '../layouts/MainLayout.astro';
 <style>
   .hero-card-glass {
     width: 100%;
-    max-width: 36rem;
+    background: rgb(255 248 240 / 95%);
-    background: rgb(255 248 240 / 92%);
     backdrop-filter: blur(8px);
-    padding: var(--space-8);
+    padding: var(--space-6);
     border: 1px solid rgb(208 197 175 / 20%);
     border-radius: var(--radius-lg);
     box-shadow: var(--shadow-lg);
   }
 
-  @media (min-width: 48rem) {
-    .hero-card-glass { padding: var(--space-12); }
-  }
-
   .servicios-header {
     display: grid;
-    gap: var(--space-8);
+    gap: var(--space-6);
-    margin-bottom: var(--space-16);
+    margin-bottom: var(--space-12);
   }
 
   .platos-grid {
     display: grid;
-    gap: var(--space-8);
+    gap: var(--space-6);
   }
 
   @media (max-width: 47.9rem) {
     .card-stagger { margin-top: 0 !important; }
   }
 
+  @media (min-width: 30rem) {
+    .hero-card-glass { padding: var(--space-8); }
+  }
+
   @media (min-width: 48rem) {
+    .hero-card-glass {
+      padding: var(--space-12);
+      max-width: 36rem;
+    }
     .card-stagger { margin-top: var(--space-24); }
 
     .servicios-header {
       grid-template-columns: 5fr 7fr;
       align-items: flex-end;
+      gap: var(--space-8);
+      margin-bottom: var(--space-16);
     }
 
     .platos-grid {
       grid-template-columns: 8fr 4fr;
       align-items: start;
+      gap: var(--space-8);
     }
   }
 </style>

src/styles/animations.css

@@ -285,3 +285,10 @@ body.page-ready {
     display: none;
   }
 }
+
+/* Hide on very small screens to save space */
+@media (max-width: 23rem) {
+  .scroll-progress {
+    display: none;
+  }
+}

src/styles/components.css

@@ -462,6 +462,8 @@
   transition: border-color 200ms;
   outline: none;
   appearance: none;
+  /* Ensure min touch target */
+  min-height: 44px;
 }
 
 .form-input:focus,
@@ -478,16 +480,19 @@
 
 .form-textarea {
   resize: none;
+  /* Taller on mobile for easier typing */
+  min-height: 120px;
 }
 
 .form-grid {
   display: grid;
-  gap: var(--space-12);
+  gap: var(--space-8);
 }
 
 @media (min-width: 48rem) {
   .form-grid {
     grid-template-columns: 1fr 1fr;
+    gap: var(--space-12);
   }
 
   .form-span-full {
@@ -501,24 +506,27 @@
 
 .whatsapp-float {
   position: fixed;
-  right: var(--space-4);
+  right: var(--space-3);
-  bottom: var(--space-4);
+  bottom: var(--space-3);
-  z-index: 60;
+  z-index: 55;
   display: inline-flex;
   align-items: center;
-  gap: var(--space-3);
+  justify-content: center;
   background: var(--color-primary);
   color: var(--color-on-primary);
-  padding: var(--space-3) var(--space-4);
+  padding: var(--space-3);
   border-radius: var(--radius-full);
   box-shadow: var(--shadow-lg);
   font-family: var(--font-sans);
-  font-size: 0.65rem;
+  font-size: 0;
   font-weight: 600;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   text-decoration: none;
   transition: transform 200ms, box-shadow 200ms;
+  /* Ensure minimum 44px touch target */
+  min-width: 48px;
+  min-height: 48px;
 }
 
 .whatsapp-float:hover {
@@ -541,6 +549,32 @@
   flex-shrink: 0;
 }
 
+.whatsapp-float span:first-child {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+}
+
+@media (min-width: 30rem) {
+  .whatsapp-float {
+    font-size: 0.65rem;
+    gap: var(--space-3);
+    padding: var(--space-3) var(--space-4);
+    min-width: unset;
+    min-height: unset;
+  }
+  .whatsapp-float span:first-child {
+    position: static;
+    width: auto;
+    height: auto;
+    overflow: visible;
+    clip: auto;
+    font-size: inherit;
+  }
+}
+
 @media (min-width: 48rem) {
   .whatsapp-float {
     right: var(--space-8);
@@ -568,43 +602,49 @@
 .footer-inner {
   display: flex;
   flex-direction: column;
-  gap: var(--space-8);
+  gap: var(--space-6);
-  padding-block: var(--space-section);
+  padding-block: var(--space-12);
 }
 
-.footer-brand h3 {
+.footer-brand {
-  font-family: var(--font-serif);
-  font-size: var(--text-headline-lg);
-  color: var(--color-on-surface);
-  margin-bottom: var(--space-4);
-}
-
-.footer-brand p {
-  font-size: var(--text-sm);
-  color: var(--color-on-surface-variant);
-  max-width: 20rem;
-}
-
-.footer-links {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--space-16);
-}
-
-.footer-col {
   display: flex;
   flex-direction: column;
   gap: var(--space-4);
 }
 
+.footer-brand img {
+  height: 2.5rem;
+  width: auto;
+}
+
+.footer-brand p {
+  font-size: var(--text-sm);
+  color: var(--color-on-surface-variant);
+  max-width: 100%;
+  line-height: 1.5;
+}
+
+.footer-links {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-6);
+}
+
+.footer-col {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  min-width: 8rem;
+}
+
 .footer-col-title {
   font-family: var(--font-sans);
-  font-size: var(--text-label-caps);
+  font-size: 0.625rem;
   font-weight: 600;
   letter-spacing: 0.15em;
   text-transform: uppercase;
   color: var(--color-primary);
-  margin-bottom: var(--space-2);
+  margin-bottom: var(--space-1);
 }
 
 .footer-link {
@@ -626,11 +666,44 @@
   align-items: flex-start;
 }
 
+.footer-bottom p {
+  font-size: var(--text-sm);
+  color: var(--color-on-surface-variant);
+  opacity: 0.6;
+  line-height: 1.4;
+}
+
 @media (min-width: 48rem) {
   .footer-inner {
     flex-direction: row;
     justify-content: space-between;
     align-items: flex-start;
+    gap: var(--space-16);
+    padding-block: var(--space-section);
+  }
+
+  .footer-brand {
+    max-width: 20rem;
+  }
+
+  .footer-brand img {
+    height: 3.5rem;
+  }
+
+  .footer-brand p {
+    max-width: 20rem;
+  }
+
+  .footer-links {
+    gap: var(--space-16);
+  }
+
+  .footer-col {
+    gap: var(--space-4);
+  }
+
+  .footer-col-title {
+    margin-bottom: var(--space-2);
   }
 
   .footer-bottom {
@@ -648,30 +721,65 @@
   background: var(--color-inverse-surface);
   color: var(--color-inverse-on-surface);
   border-radius: var(--radius-lg);
-  padding: var(--space-16) var(--space-8);
+  padding: var(--space-10) var(--space-6);
   position: relative;
   overflow: hidden;
   text-align: center;
 }
 
+/* Reduce ring sizes on mobile */
+.cta-dark-ring {
+  position: absolute;
+  border: 1px solid rgb(255 224 136 / 8%);
+  border-radius: var(--radius-full);
+  pointer-events: none;
+}
+
+.cta-dark-ring:first-child {
+  width: 10rem;
+  height: 10rem;
+  top: -2rem;
+  left: -2rem;
+}
+
+.cta-dark-ring:last-child {
+  width: 16rem;
+  height: 16rem;
+  bottom: -3rem;
+  right: -3rem;
+}
+
+.cta-gold {
+  background: var(--color-primary);
+  color: var(--color-on-primary);
+  padding: var(--space-10) var(--space-6);
+  text-align: center;
+}
+
 @media (min-width: 48rem) {
   .cta-dark {
     padding: var(--space-24) var(--space-20);
   }
-}
 
-.cta-dark-ring {
+  .cta-dark-ring:first-child {
-  position: absolute;
+    width: 16rem;
-  border: 2px solid rgb(255 224 136 / 10%);
+    height: 16rem;
-  border-radius: var(--radius-full);
+    top: -4rem;
-  pointer-events: none;
+    left: -4rem;
-}
+    border-width: 2px;
+  }
 
-.cta-gold {
+  .cta-dark-ring:last-child {
-  background: var(--color-primary);
+    width: 24rem;
-  color: var(--color-on-primary);
+    height: 24rem;
-  padding: var(--space-16) var(--space-8);
+    bottom: -6rem;
-  text-align: center;
+    right: -6rem;
+    border-width: 2px;
+  }
+
+  .cta-gold {
+    padding: var(--space-16) var(--space-8);
+  }
 }
 
 /* ─────────────────────────────────────────────