.nav {
	display: flex;
	align-items: center;
	gap: 8px;
  
	&.nav--open {
	  flex-direction: column; // Cambia la dirección a columna cuando se abra
	  background-color: white; // Fondo blanco para el menú desplegable
	  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
	  position: absolute;
	  top: 60px; // Para no quedar justo al lado del botón hamburguesa
	  right: 16px;
	  padding: 16px;
	  border-radius: 12px;
	  z-index: 1000;
	  width: calc(100% - 32px);
	  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  
	  a {
		margin: 8px 0; // Espaciado entre los enlaces en el menú móvil
		padding: 8px 16px;
		width: 100%;
		text-align: center;
	  }
	}
  }
  
  .nav__mobile-menu-button {
	display: block;
	background: none;
	border: none;
	cursor: pointer;
	font-size: 24px;
	color: var(--text-color);
	margin-left: auto;
	z-index: 1100;
  }
  
  // Ocultar menú cuando no está abierto en móvil
  .nav {
	&.nav--open {
	  display: flex;
	}
	&:not(.nav--open) {
	  display: none;
	}
  }
  
  .nav {
	display: none; // Por defecto no se muestra en móviles
	align-items: center;
	gap: 8px;
  
	&.nav--open {
	  display: flex; // Se muestra cuando el menú está abierto
	  flex-direction: column;
	  position: absolute;
	  top: 60px;
	  right: 16px;
	  background-color: white;
	  padding: 16px;
	  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
	  border-radius: 12px;
	  z-index: 1000;
	}
  }
  
  @media (min-width: 768px) {
	.nav {
	  display: flex !important; // Mostrar siempre en pantallas grandes
	}
	.nav__mobile-menu-button {
	  display: none; // Ocultar botón hamburguesa en pantallas grandes
	}
  }
  