/* * mobile-menu.css * Menú hamburguesa profesional y responsivo (full-screen, fondo sólido) */ /* Botón hamburguesa - oculto en desktop */ .mobile-menu-toggle { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 48px; height: 48px; background: transparent; border: none; cursor: pointer; padding: 10px; position: absolute; right: 16px; top: 50%; margin-top: -24px; /* Centrado sin transform para evitar conflictos */ z-index: 10002; /* por encima del menú full-screen */ } .mobile-menu-toggle:active { opacity: 0.7; } /* Líneas del hamburguesa */ .hamburger-line { width: 26px; height: 2.5px; background: var(--color-text-primary, #ffffff); border-radius: 2px; transition: transform 0.3s ease, opacity 0.2s ease; transform-origin: center; } /* Animación a X cuando está activo */ .mobile-menu-toggle.active .hamburger-line:nth-child(1) { transform: translateY(7.5px) rotate(45deg); } .mobile-menu-toggle.active .hamburger-line:nth-child(2) { opacity: 0; transform: scaleX(0); } .mobile-menu-toggle.active .hamburger-line:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); } /* ====== Overlay + Contenedor (montados en ) ====== */ /* Overlay: capa de fade detrás del menú */ .mobile-menu-overlay { display: none; position: fixed; inset: 0; background: var(--color-bg, #000000); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; z-index: 9999; pointer-events: none; } /* Contenedor del menú: ocupa toda la pantalla, fondo 100% sólido */ .mobile-menu-container { display: none; position: fixed; inset: 0; width: 100%; height: 100%; height: 100dvh; /* respeta barras del navegador en mobile */ background: var(--color-bg, #000000); padding: calc(env(safe-area-inset-top) + 84px) 1.5rem calc(env(safe-area-inset-bottom) + 2rem); overflow-y: auto; -webkit-overflow-scrolling: touch; transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; z-index: 10000; flex-direction: column; } /* Mobile y Tablet */ @media (max-width: 1023px) { .mobile-menu-toggle { display: flex; } .nav-container { position: relative; padding-right: 64px; /* espacio para la hamburguesa */ } /* Nav siempre arriba; se oculta al bajar y reaparece al subir */ .main-nav { transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); } .main-nav.nav-hidden { transform: translateY(calc(-100% - var(--banner-height, 45px))); } .mobile-menu-overlay { display: block; } .mobile-menu-container { display: flex; } .mobile-menu-overlay.active { opacity: 1; visibility: visible; pointer-events: auto; } .mobile-menu-container.active { transform: translateX(0); } /* Encabezado del menú */ .mobile-menu-header { margin-bottom: 0.5rem; } .mobile-menu-eyebrow { display: inline-block; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--color-accent, #0066CC); padding-bottom: 1rem; } /* Lista de links */ .mobile-menu-container .nav-center { position: static !important; display: flex; flex-direction: column; width: 100% !important; height: auto !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; gap: 0; } .mobile-menu-container .nav-center .nav-link { display: flex; align-items: center; gap: 1rem; width: 100%; padding: 1.15rem 0.75rem; font-size: 1.18rem; font-weight: 600; letter-spacing: -0.01em; color: var(--color-text-secondary, #b3b3b3); border-bottom: 1px solid rgba(255, 255, 255, 0.07); border-radius: 10px; text-decoration: none; transition: color 0.2s ease, background 0.2s ease, padding-left 0.2s ease; } /* Icono dentro de "chip" */ .menu-link-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); color: var(--color-accent, #0066CC); transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease; } .menu-link-icon svg { width: 22px; height: 22px; } .menu-link-text { flex: 1 1 auto; } .menu-link-chevron { display: inline-flex; align-items: center; color: var(--color-text-tertiary, #666); opacity: 0; transform: translateX(-6px); transition: opacity 0.2s ease, transform 0.2s ease; } .menu-link-chevron svg { width: 20px; height: 20px; } /* Hover / activo */ .mobile-menu-container .nav-center .nav-link:hover, .mobile-menu-container .nav-center .nav-link:active, .mobile-menu-container .nav-center .nav-link.active { color: #ffffff; background: rgba(255, 255, 255, 0.05); padding-left: 1rem; } .mobile-menu-container .nav-center .nav-link:hover .menu-link-icon, .mobile-menu-container .nav-center .nav-link:active .menu-link-icon, .mobile-menu-container .nav-center .nav-link.active .menu-link-icon { background: var(--color-accent, #0066CC); color: #ffffff; transform: scale(1.05); } .mobile-menu-container .nav-center .nav-link:hover .menu-link-chevron, .mobile-menu-container .nav-center .nav-link:active .menu-link-chevron, .mobile-menu-container .nav-center .nav-link.active .menu-link-chevron { opacity: 1; transform: translateX(0); } /* CTAs (WhatsApp / Agenda) ocultos en el menú mobile */ .mobile-menu-container .nav-right { display: none !important; } /* Logo más pequeño en mobile */ .nav-left .logo img { max-height: 36px; } /* Ocultar nav-center y nav-right originales (los del nav) en mobile */ .nav-container > .nav-center, .nav-container > .nav-right { display: none !important; } } /* Desktop - todo normal */ @media (min-width: 1024px) { .mobile-menu-toggle { display: none !important; } .mobile-menu-container, .mobile-menu-overlay { display: none !important; } .nav-center, .nav-right { position: static; width: auto; height: auto; padding: 0; overflow: visible; box-shadow: none; background: transparent; } } /* Bloquear scroll del body con el menú abierto. position:fixed (con top:-scrollY puesto por JS) es la ÚNICA forma fiable de evitar que el fondo se mueva en mobile (overflow:hidden no basta en iOS). */ body.menu-open { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; } /* Al abrir el menú ocultamos el banner promo: evita el reacomodo brusco (el nav pasa a top:0 y el banner ya no "salta"). */ body.menu-open .announcement-banner { display: none; } /* Con el menú abierto, el nav (logo + botón X) queda FIJO arriba y SOBRE el menú full-screen, para poder cerrarlo siempre. */ body.menu-open .main-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 10001; transform: none !important; } /* ====== Light mode ====== */ body.light-mode .mobile-menu-overlay, body.light-mode .mobile-menu-container { background: #ffffff; } body.light-mode .hamburger-line { background: #1a202c; } body.light-mode .mobile-menu-container .nav-center .nav-link { color: #4a5568; border-bottom-color: rgba(0, 0, 0, 0.07); } body.light-mode .menu-link-icon { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.08); } body.light-mode .mobile-menu-container .nav-center .nav-link:hover, body.light-mode .mobile-menu-container .nav-center .nav-link:active, body.light-mode .mobile-menu-container .nav-center .nav-link.active { color: #1a202c; background: rgba(0, 102, 204, 0.06); } /* ====== Animación escalonada de entrada ====== */ .mobile-menu-container .nav-link, .mobile-menu-container .nav-btn-secondary, .mobile-menu-container .nav-btn-primary { opacity: 0; } .mobile-menu-container.active .nav-link, .mobile-menu-container.active .nav-btn-secondary, .mobile-menu-container.active .nav-btn-primary { animation: menuItemIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .mobile-menu-container.active .nav-center .nav-link:nth-child(1) { animation-delay: 0.08s; } .mobile-menu-container.active .nav-center .nav-link:nth-child(2) { animation-delay: 0.13s; } .mobile-menu-container.active .nav-center .nav-link:nth-child(3) { animation-delay: 0.18s; } .mobile-menu-container.active .nav-center .nav-link:nth-child(4) { animation-delay: 0.23s; } .mobile-menu-container.active .nav-center .nav-link:nth-child(5) { animation-delay: 0.28s; } .mobile-menu-container.active .nav-center .nav-link:nth-child(6) { animation-delay: 0.33s; } .mobile-menu-container.active .nav-center .nav-link:nth-child(7) { animation-delay: 0.38s; } .mobile-menu-container.active .nav-right .nav-btn-secondary { animation-delay: 0.44s; } .mobile-menu-container.active .nav-right .nav-btn-primary { animation-delay: 0.5s; } @keyframes menuItemIn { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: translateX(0); } } /* Respeta usuarios con reduce-motion */ @media (prefers-reduced-motion: reduce) { .mobile-menu-container, .main-nav, .mobile-menu-container.active .nav-link, .mobile-menu-container.active .nav-btn-secondary, .mobile-menu-container.active .nav-btn-primary { transition: none !important; animation: none !important; opacity: 1 !important; } }