From 58eb6dc952285b60873968ca624822b957e55e8d Mon Sep 17 00:00:00 2001
From: Manuel <manuel@pcln>
Date: Fri, 8 May 2026 01:24:57 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20mobile=20improvements=20=E2=80=94=20ham?=
 =?UTF-8?q?burger=20menu,=20responsive=20typography,=20grid=20fixes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/SiteHeader.astro      | 141 ++++++++++++++++++++++++++-
 src/pages/bodas-reales.astro         |  13 ++-
 src/pages/corporativo-business.astro |   8 +-
 src/pages/reuniones-familiares.astro |  11 ++-
 src/styles/components.css            |  33 +++++--
 src/styles/tokens.css                |   6 +-
 6 files changed, 189 insertions(+), 23 deletions(-)

diff --git a/src/components/SiteHeader.astro b/src/components/SiteHeader.astro
index f865193..c8d6c46 100644
--- a/src/components/SiteHeader.astro
+++ b/src/components/SiteHeader.astro
@@ -26,6 +26,7 @@ const links = [
       />
     </a>
 
+    <!-- Desktop nav -->
     <nav class="site-nav" aria-label="Principal">
       {links.map(({ href, label, key }) => (
         <a href={href} class={`nav-link${activeNav === key ? ' active' : ''}`}>
@@ -35,21 +36,70 @@ const links = [
     </nav>
 
     <div class="nav-actions">
+      <!-- WhatsApp solo en desktop -->
       <a
         href="https://wa.me/34678171513?text=Hola%20MNQ%2C%20quiero%20cotizar%20mi%20evento"
-        class="btn btn-pill"
+        class="btn btn-pill nav-wa"
         target="_blank"
         rel="noreferrer"
-        style="font-size: 0.6875rem; padding: 0.625rem 1.25rem;"
       >
         WhatsApp
       </a>
+
+      <!-- Hamburger (mobile) -->
+      <button class="nav-toggle" id="navToggle" aria-label="Abrir menú" aria-expanded="false">
+        <span class="hb-bar"></span>
+        <span class="hb-bar"></span>
+        <span class="hb-bar"></span>
+      </button>
     </div>
 
   </div>
 </header>
 
+<!-- Mobile nav drawer -->
+<div class="mobile-nav" id="mobileNav" aria-hidden="true">
+  {links.map(({ href, label, key }) => (
+    <a href={href} class={`mobile-nav-link${activeNav === key ? ' active' : ''}`}>
+      {label}
+    </a>
+  ))}
+  <a
+    href="https://wa.me/34678171513?text=Hola%20MNQ%2C%20quiero%20cotizar%20mi%20evento"
+    class="btn btn-primary mobile-wa"
+    target="_blank"
+    rel="noreferrer"
+    style="width: 100%; justify-content: center; margin-top: 0.5rem;"
+  >
+    Consultar por WhatsApp
+  </a>
+</div>
+
+<script>
+  const toggle   = document.getElementById('navToggle')!;
+  const mobileNav = document.getElementById('mobileNav')!;
+
+  toggle.addEventListener('click', () => {
+    const open = toggle.getAttribute('aria-expanded') === 'true';
+    toggle.setAttribute('aria-expanded', String(!open));
+    mobileNav.classList.toggle('open', !open);
+    mobileNav.setAttribute('aria-hidden', String(open));
+    document.body.style.overflow = open ? '' : 'hidden';
+  });
+
+  // Cerrar al navegar
+  mobileNav.querySelectorAll('a').forEach(link => {
+    link.addEventListener('click', () => {
+      toggle.setAttribute('aria-expanded', 'false');
+      mobileNav.classList.remove('open');
+      mobileNav.setAttribute('aria-hidden', 'true');
+      document.body.style.overflow = '';
+    });
+  });
+</script>
+
 <style>
+  /* ── Brand ── */
   .site-brand-link {
     display: flex;
     align-items: center;
@@ -57,8 +107,93 @@ const links = [
   }
 
   .site-logo-banner {
-    height: 3.5rem;
+    height: 2.25rem;
     width: auto;
     object-fit: contain;
   }
+
+  /* ── Hamburger ── */
+  .nav-toggle {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 5px;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0.5rem;
+    width: 2.5rem;
+    height: 2.5rem;
+  }
+
+  .hb-bar {
+    display: block;
+    width: 22px;
+    height: 2px;
+    background: var(--color-on-surface);
+    border-radius: 2px;
+    transition: transform 250ms, opacity 200ms;
+  }
+
+  .nav-toggle[aria-expanded="true"] .hb-bar:nth-child(1) {
+    transform: translateY(7px) rotate(45deg);
+  }
+  .nav-toggle[aria-expanded="true"] .hb-bar:nth-child(2) {
+    opacity: 0;
+  }
+  .nav-toggle[aria-expanded="true"] .hb-bar:nth-child(3) {
+    transform: translateY(-7px) rotate(-45deg);
+  }
+
+  /* ── WhatsApp pill — oculto en mobile ── */
+  .nav-wa {
+    display: none;
+    font-size: 0.6875rem;
+    padding: 0.625rem 1.25rem;
+  }
+
+  /* ── Mobile drawer ── */
+  .mobile-nav {
+    display: none;
+    position: fixed;
+    top: var(--nav-h);
+    left: 0;
+    right: 0;
+    z-index: 49;
+    background: var(--color-surface);
+    border-bottom: 1px solid var(--color-outline-variant);
+    padding: var(--space-6) var(--space-page) var(--space-8);
+    flex-direction: column;
+    gap: var(--space-4);
+    box-shadow: 0 8px 24px rgb(0 0 0 / 10%);
+  }
+
+  .mobile-nav.open {
+    display: flex;
+  }
+
+  .mobile-nav-link {
+    font-family: var(--font-sans);
+    font-size: var(--text-sm);
+    font-weight: 600;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    color: var(--color-on-surface);
+    padding: var(--space-3) 0;
+    border-bottom: 1px solid rgb(208 197 175 / 20%);
+    transition: color 200ms;
+  }
+
+  .mobile-nav-link.active,
+  .mobile-nav-link:hover {
+    color: var(--color-primary);
+  }
+
+  /* ── Desktop overrides ── */
+  @media (min-width: 48rem) {
+    .site-logo-banner { height: 3.25rem; }
+    .nav-toggle        { display: none; }
+    .nav-wa            { display: inline-flex; }
+    .mobile-nav        { display: none !important; }
+  }
 </style>
diff --git a/src/pages/bodas-reales.astro b/src/pages/bodas-reales.astro
index b0cb36d..bf878c3 100644
--- a/src/pages/bodas-reales.astro
+++ b/src/pages/bodas-reales.astro
@@ -190,16 +190,21 @@ import MainLayout from '../layouts/MainLayout.astro';
 <style>
   .bento-grid {
     display: grid;
-    grid-template-columns: 1fr;
-    gap: var(--space-8);
+    grid-template-columns: 1fr 1fr;
+    gap: var(--space-4);
   }
-  .bento-large { position: relative; min-height: 28rem; }
-  .bento-small { position: relative; min-height: 20rem; }
+  .bento-large {
+    position: relative;
+    min-height: 22rem;
+    grid-column: span 2;
+  }
+  .bento-small { position: relative; min-height: 14rem; }
 
   @media (min-width: 48rem) {
     .bento-grid {
       grid-template-columns: repeat(3, 1fr);
       grid-template-rows: auto auto;
+      gap: var(--space-8);
     }
     .bento-large {
       grid-column: span 2;
diff --git a/src/pages/corporativo-business.astro b/src/pages/corporativo-business.astro
index 590eb7f..a0a9ff3 100644
--- a/src/pages/corporativo-business.astro
+++ b/src/pages/corporativo-business.astro
@@ -143,17 +143,19 @@ import MainLayout from '../layouts/MainLayout.astro';
 <style>
   .corp-bento {
     display: grid;
-    gap: var(--space-8);
+    grid-template-columns: 1fr;
+    gap: var(--space-4);
   }
-  .corp-wide, .corp-tall { position: relative; min-height: 20rem; }
+  .corp-wide, .corp-tall { position: relative; min-height: 18rem; }
 
   @media (min-width: 48rem) {
     .corp-bento {
       grid-template-columns: repeat(3, 1fr);
       grid-template-rows: 22rem 22rem;
+      gap: var(--space-8);
     }
     .corp-wide { grid-column: span 2; }
-    .corp-tall { grid-row: span 2; }
+    .corp-tall { grid-row: span 2; min-height: auto; }
     [style*="grid-column:span 12"] { grid-column: span 6 !important; }
     [style*="height:28rem"] { height: 36rem !important; }
   }
diff --git a/src/pages/reuniones-familiares.astro b/src/pages/reuniones-familiares.astro
index 7067d8d..6bee83e 100644
--- a/src/pages/reuniones-familiares.astro
+++ b/src/pages/reuniones-familiares.astro
@@ -240,15 +240,20 @@ import MainLayout from '../layouts/MainLayout.astro';
 
 <style>
   .hero-card-glass {
+    width: 100%;
     max-width: 36rem;
     background: rgb(255 248 240 / 92%);
     backdrop-filter: blur(8px);
-    padding: var(--space-12);
+    padding: var(--space-8);
     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);
@@ -260,6 +265,10 @@ import MainLayout from '../layouts/MainLayout.astro';
     gap: var(--space-8);
   }
 
+  @media (max-width: 47.9rem) {
+    .card-stagger { margin-top: 0 !important; }
+  }
+
   @media (min-width: 48rem) {
     .card-stagger { margin-top: var(--space-24); }
 
diff --git a/src/styles/components.css b/src/styles/components.css
index b1f40a1..2f84a79 100644
--- a/src/styles/components.css
+++ b/src/styles/components.css
@@ -501,22 +501,21 @@
 
 .whatsapp-float {
   position: fixed;
-  right: var(--space-8);
-  bottom: var(--space-8);
+  right: var(--space-4);
+  bottom: var(--space-4);
   z-index: 60;
   display: inline-flex;
   align-items: center;
-  gap: var(--space-4);
+  gap: var(--space-3);
   background: var(--color-primary);
   color: var(--color-on-primary);
-  padding: var(--space-4) var(--space-6);
-  padding-left: var(--space-8);
+  padding: var(--space-3) var(--space-4);
   border-radius: var(--radius-full);
   box-shadow: var(--shadow-lg);
   font-family: var(--font-sans);
-  font-size: var(--text-label-caps);
+  font-size: 0.65rem;
   font-weight: 600;
-  letter-spacing: 0.15em;
+  letter-spacing: 0.12em;
   text-transform: uppercase;
   text-decoration: none;
   transition: transform 200ms, box-shadow 200ms;
@@ -532,13 +531,29 @@
 }
 
 .whatsapp-float-icon {
-  width: 2.5rem;
-  height: 2.5rem;
+  width: 2rem;
+  height: 2rem;
   border-radius: var(--radius-full);
   background: rgb(255 255 255 / 15%);
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-shrink: 0;
+}
+
+@media (min-width: 48rem) {
+  .whatsapp-float {
+    right: var(--space-8);
+    bottom: var(--space-8);
+    padding: var(--space-4) var(--space-6);
+    padding-left: var(--space-8);
+    font-size: var(--text-label-caps);
+    gap: var(--space-4);
+  }
+  .whatsapp-float-icon {
+    width: 2.5rem;
+    height: 2.5rem;
+  }
 }
 
 /* ─────────────────────────────────────────────
diff --git a/src/styles/tokens.css b/src/styles/tokens.css
index c6f2bec..f026de2 100644
--- a/src/styles/tokens.css
+++ b/src/styles/tokens.css
@@ -22,9 +22,9 @@
   --font-serif: 'Noto Serif', Georgia, serif;
 
   /* Type scale */
-  --text-display: clamp(2.5rem, 6vw, 4rem);
-  --text-headline-lg: clamp(1.75rem, 4vw, 2.5rem);
-  --text-headline-md: 2rem;
+  --text-display: clamp(1.875rem, 5vw, 4rem);
+  --text-headline-lg: clamp(1.5rem, 4vw, 2.5rem);
+  --text-headline-md: clamp(1.375rem, 3.5vw, 2rem);
   --text-label-caps: 0.75rem;
   --text-base: 1rem;
   --text-sm: 0.875rem;