.header-navigation {
	display: flex;
	flex-wrap: wrap;
}

.header-navigation a,
.header-navigation button {
	font-size: 1.125rem;
	color: inherit;
	margin-left: 1.75rem;
	position: relative;
	font-weight: 500;
}


.header-navigation a {
	display: none;
	font-size: 1.125rem;
	color: inherit;
	text-decoration: none;
}

.header-navigation button {
	border: 0;
	background-color: transparent;
	padding: 0;
}

.header-navigation a:hover:after,
.header-navigation button:hover:after {
	transform: scalex(1);
}

.header-navigation a:after,
.header-navigation button:after {
	transition: 0.25s ease;
	content: "";
	display: block;
	width: 100%;
	height: 2px;
	background-color: currentcolor;
	transform: scalex(0);
	position: absolute;
	bottom: -2px;
	left: 0;
}

.menu-container {
	position: relative;
	display: flex;
	/* Asegura que el botón y el menú estén visibles */
	align-items: center;
}

.menu-button {
	border: 0;
	background-color: #4b6fdd;
	color: #fff;
	padding: 10px 15px;
	border-radius: 5px;
	font-size: 1rem;
	cursor: pointer;
	font-weight: bold;
	display: inline-block;
	/* Asegura que el botón sea visible */
}

.menu-button:hover {
	background-color: #fff;
}


.dropdown-menu {
	position: absolute;
	top: 100%;
	right: 0;
	background-color: #fff;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	border-radius: 8px;
	overflow: hidden;
	margin-top: 10px;
	display: none;
	z-index: 1000;
}

.dropdown-menu.active {
	display: block;
}

.dropdown-menu a {
	display: block;
	padding: 10px 20px;
	text-decoration: none;
	color: #333;
	font-size: 0.9rem;
}

.dropdown-menu a:hover {
	background-color: #f1f1f1;
}

.header-navigation a:hover::after,
.header-navigation button:hover::after {
	transform: scalex(1);
}

.header-navigation a::after,
.header-navigation button::after {
	transition: 0.25s ease;
	content: "";
	display: block;
	width: 100%;
	height: 2px;
	background-color: currentcolor;
	transform: scalex(0);
	position: absolute;
	bottom: -5px;
	left: 0;
}

.dropdown-menu {
	z-index: 1000;
}

@media (min-width: 800px) {
	.header-navigation a {
		display: inline-block;
	}

	.header-navigation button {
		display: inline-block;
		/* Asegura que el botón del menú esté visible */
	}
}