@import url('./variables.css');

/*
 =======================================
 INICIO NAVBAR
 Sobreescritura de MDB: SÍ  
 Enfoque: Desktop-First
 =======================================   
*/

#mainNavbar.navbar {
	width: fit-content;
	left: 50% !important;
	top: 16px;
	transform: translateX(-50%);
}

#mainNavbar .logo {
	max-width: 180px;
	min-width: 160px;
	width: 100%;
	height: auto;
}

#mainNavbar.navbar .nav-item .nav-link {
	padding-top: 1rem;
	padding-bottom: 1rem;
	position: relative !important;
	transition: color 0.3s ease;
}

#mainNavbar.navbar .nav-item .nav-link::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 3px;
	background-color: var(--as-secondary);
	transform: scaleX(0);
	transform-origin: left;
	opacity: 0;
	transition: transform 0.3s ease, opacity 0.3s ease;
}

#mainNavbar.navbar .nav-item .nav-link:hover,
#mainNavbar.navbar .nav-item .nav-link.active {
	color: var(--as-secondary);
}

#mainNavbar.navbar .nav-item .nav-link.active::after,
#mainNavbar.navbar .nav-item .nav-link:hover::after {
	transform: scaleX(1);
	opacity: 1;
}

@media (max-width: 767.98px) {
	#mainNavbar.navbar {
		width: 100%;
		max-width: 92vw;
	}

	#mainNavbar.navbar>.container-fluid {
		position: relative;
	}

	#mainNavbar .navbar-collapse {
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		transform: translateY(12px);
		background-color: #fbfbfb;
		padding: 0;
		border-radius: 1.5rem;
		box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
		text-align: center;
	}

	#mainNavbar.navbar .nav-item .nav-link {
		width: 100%;
		display: block;
		padding-top: 0.75rem;
		padding-bottom: 0.75rem;
	}

	#mainNavbar.navbar .nav-item .nav-link::after {
		height: 3px;
		width: 80px;
		left: 50%;
		transform: translateX(-50%) scaleX(0);
		transform-origin: center;
	}

	#mainNavbar.navbar .nav-item .nav-link:hover::after,
	#mainNavbar.navbar .nav-item .nav-link.active::after {
		transform: translateX(-50%) scaleX(1);
	}

	/*.logo {
		max-width: 40px;
		min-width: 30px;
	}*/

	#contenidoHero {
		margin-top: 80px;
	}
}

/*
 =======================================
 FIN NAVBAR
 =======================================   
*/