fix burguer menu

css/styles.css

@@ -308,27 +308,75 @@ h4 { font-size: 1.25rem; }
 }
 
 /* --- Menú Móvil Overlay --- */
-.mobile-menu-drawer {
+/* --- Overlay oscuro detrás del drawer --- */
+.mobile-menu-overlay {
   display: none;
   position: fixed;
-  top: 80px;
+  inset: 0;
-  left: 0;
+  background-color: rgba(10, 24, 32, 0.55);
+  backdrop-filter: blur(3px);
+  -webkit-backdrop-filter: blur(3px);
+  z-index: 998;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.mobile-menu-overlay.is-open {
+  display: block;
+  opacity: 1;
+}
+
+/* --- Drawer lateral derecho --- */
+.mobile-menu-drawer {
+  position: fixed;
+  top: 0;
   right: 0;
   bottom: 0;
+  width: min(320px, 85vw);
   background-color: var(--bg-surface);
+  border-left: 1px solid var(--border-color);
   padding: 2rem 1.5rem;
   overflow-y: auto;
   z-index: 999;
-  border-top: 1px solid var(--border-color);
+  display: flex;
-  transform: translateY(-100%);
+  flex-direction: column;
-  opacity: 0;
+  transform: translateX(100%);
-  transition: transform 0.3s ease, opacity 0.3s ease;
+  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: -8px 0 32px rgba(10, 24, 32, 0.18);
 }
 
 .mobile-menu-drawer.is-open {
-  display: block;
+  transform: translateX(0);
-  transform: translateY(0);
+}
-  opacity: 1;
+
+/* Cabecera del drawer con botón cerrar */
+.drawer-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 2rem;
+  padding-bottom: 1.25rem;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.drawer-close-btn {
+  background: var(--bg-subtle);
+  border: 1px solid var(--border-color);
+  color: var(--text-main);
+  width: 38px;
+  height: 38px;
+  border-radius: var(--radius-full);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  flex-shrink: 0;
+}
+
+.drawer-close-btn:hover {
+  background: var(--border-color);
+  color: var(--ide-accent);
 }
 
 .mobile-nav-links {

includes/header.html

@@ -64,8 +64,23 @@
   </nav>
 </div>
 
-<!-- Menú Desplegable para Móviles -->
+<!-- Overlay oscuro -->
-<div id="mobile-menu-drawer" class="mobile-menu-drawer">
+<div id="mobile-menu-overlay" class="mobile-menu-overlay"></div>
+
+<!-- Drawer lateral -->
+<div id="mobile-menu-drawer" class="mobile-menu-drawer" aria-hidden="true">
+  
+  <div class="drawer-header">
+    <img src="assets/img/logo-on-light.png" alt="IDE Consultores" class="brand-logo-img logo-light-only" style="height:32px;">
+    <img src="assets/img/logo-on-dark.png" alt="IDE Consultores" class="brand-logo-img logo-dark-only" style="height:32px;">
+    <button id="drawer-close-btn" class="drawer-close-btn" aria-label="Cerrar menú">
+      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
+        <line x1="18" y1="6" x2="6" y2="18"></line>
+        <line x1="6" y1="6" x2="18" y2="18"></line>
+      </svg>
+    </button>
+  </div>
+
   <ul class="mobile-nav-links">
     <li><a href="index.html" class="nav-link">Inicio</a></li>
     <li><a href="desafios.html" class="nav-link">Desafíos</a></li>
@@ -74,10 +89,12 @@
     <li><a href="ide-academy.html" class="nav-link">IDE Academy</a></li>
     <li><a href="insights.html" class="nav-link">Insights</a></li>
     <li><a href="somos-ide.html" class="nav-link">Somos IDE</a></li>
-    <li><a href="contacto.html" class="nav-link" style="color: var(--ide-accent);">Contacto Comercial</a></li>
     <li><a href="trabaja-con-nosotros.html" class="nav-link">Trabaja con nosotros</a></li>
+    <li><a href="contacto.html" class="nav-link" style="color: var(--ide-accent);">Contacto Comercial</a></li>
   </ul>
-  <div style="margin-top: 2rem;">
+
-    <a href="contacto.html" class="btn btn-primary w-full" style="width: 100%;">HABLEMOS</a>
+  <div style="margin-top: auto; padding-top: 2rem; border-top: 1px solid var(--border-color);">
+    <a href="contacto.html" class="btn btn-primary" style="width: 100%; justify-content: center;">HABLEMOS</a>
   </div>
+
 </div>

js/main.js

@@ -80,7 +80,7 @@ function highlightActiveNavLink() {
 }
 
 function attachHeaderEvents() {
-  // Switch de Tema: usar clonación para evitar listeners duplicados
+  // Theme toggle
   const themeToggle = document.getElementById('theme-toggle-btn');
   if (themeToggle) {
     const newThemeToggle = themeToggle.cloneNode(true);
@@ -88,25 +88,48 @@ function attachHeaderEvents() {
     newThemeToggle.addEventListener('click', toggleTheme);
   }
 
-  // Botón de menú móvil y cierre del drawer: event delegation global.
+  const drawer  = document.getElementById('mobile-menu-drawer');
-  // Evita depender de un nodo único (el header se inyecta de forma modular),
+  const overlay = document.getElementById('mobile-menu-overlay');
-  // de modo que funcione aunque el botón sea reemplazado por cloneNode.
-  const mobileDrawer = document.getElementById('mobile-menu-drawer');
 
-  document.addEventListener('click', (e) => {
+  function openDrawer() {
-    const toggleClicked = e.target.closest('#mobile-menu-btn');
+    if (!drawer) return;
-    const insideDrawer = mobileDrawer && mobileDrawer.contains(e.target);
+    drawer.classList.add('is-open');
+    drawer.setAttribute('aria-hidden', 'false');
+    if (overlay) overlay.classList.add('is-open');
+    document.body.style.overflow = 'hidden'; // evita scroll del fondo
+    const btn = document.getElementById('mobile-menu-btn');
+    if (btn) btn.setAttribute('aria-expanded', 'true');
+  }
 
-    if (toggleClicked) {
+  function closeDrawer() {
-      if (mobileDrawer) {
+    if (!drawer) return;
-        const isOpen = mobileDrawer.classList.toggle('is-open');
+    drawer.classList.remove('is-open');
-        toggleClicked.setAttribute('aria-expanded', isOpen);
+    drawer.setAttribute('aria-hidden', 'true');
-      }
+    if (overlay) overlay.classList.remove('is-open');
-    } else if (mobileDrawer && mobileDrawer.classList.contains('is-open') && !insideDrawer) {
+    document.body.style.overflow = '';
-      mobileDrawer.classList.remove('is-open');
+    const btn = document.getElementById('mobile-menu-btn');
-      const toggle = document.querySelector('#mobile-menu-btn');
+    if (btn) btn.setAttribute('aria-expanded', 'false');
-      if (toggle) toggle.setAttribute('aria-expanded', 'false');
+  }
-    }
+
+  // Botón hamburguesa abre
+  document.getElementById('mobile-menu-btn')
+    ?.addEventListener('click', openDrawer);
+
+  // Botón X dentro del drawer cierra
+  document.getElementById('drawer-close-btn')
+    ?.addEventListener('click', closeDrawer);
+
+  // Clic en overlay cierra
+  if (overlay) overlay.addEventListener('click', closeDrawer);
+
+  // Clic en cualquier link del drawer cierra
+  drawer?.querySelectorAll('.nav-link').forEach(link => {
+    link.addEventListener('click', closeDrawer);
+  });
+
+  // Tecla ESC cierra
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') closeDrawer();
   });
 
   const currentTheme = document.documentElement.getAttribute('data-theme') || 'light';