feat: mobile improvements — hamburger menu, responsive typography, grid fixes

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>