/* Estilos básicos del contenedor */
.hamburguesa-container {
position: relative;
display: flex;
justify-content: flex-end;
padding: 10px;
}
/* El botón de hamburguesa */
.menu-toggle {
background: none;
border: none;
cursor: pointer;
display: flex;
flex-direction: column;
gap: 5px;
z-index: 1001;
}
.bar {
width: 25px;
height: 3px;
background-color: #333; /* Cambia al color de tu marca */
transition: 0.3s;
}
/* Menú oculto por defecto */
.nav-links {
display: none;
flex-direction: column;
position: absolute;
top: 50px;
right: 0;
background-color: #ffffff;
width: 200px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
border-radius: 8px;
overflow: hidden;
z-index: 1000;
}
/* Enlaces del menú */
.nav-links a {
padding: 15px;
text-decoration: none;
color: #333;
font-family: sans-serif;
font-weight: bold;
border-bottom: 1px solid #f0f0f0;
}
/* Estado activo (cuando se hace clic) */
.nav-links.active {
display: flex;
}
/* Animación del icono (opcional) */
.menu-toggle.open .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-toggle.open .bar:nth-child(2) { opacity: 0; }
.menu-toggle.open .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
function toggleMenu() {
const menu = document.getElementById('mobile-menu');
const button = document.querySelector('.menu-toggle');
menu.classList.toggle('active');
button.classList.toggle('open');
}
