@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap');

:root {
	--upcn-dark: #00355f;
	--upcn-light: #53a3cc;
	--upcn-accent: #f0f4f8;
}

body {
	font-family: 'Inter', sans-serif;
	color: #1a202c;
	scroll-behavior: smooth;
}

.bg-upcn-dark { background-color: var(--upcn-dark); }
.bg-upcn-light { background-color: var(--upcn-light); }
.text-upcn-dark { color: var(--upcn-dark); }
.text-upcn-light { color: var(--upcn-light); }

/* Banner principal */
.main-banner {
	width: 100%;
	height: auto;
	min-height: 300px;
	max-height: 600px;
	overflow: hidden;
	display: block;
}

.main-banner img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.nav-link {
	position: relative;
	transition: color 0.3s ease;
}

.nav-link::after {
	content: '';
	position: absolute;
	width: 0;
	height: 2px;
	bottom: -4px;
	left: 0;
	background-color: var(--upcn-light);
	transition: width 0.3s ease;
}

.nav-link:hover::after {
	width: 100%;
}

.custom-shadow {
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

#mobile-menu {
	transition: all 0.3s ease-in-out;
	max-height: 0;
	overflow: hidden;
}
#mobile-menu.active {
	max-height: 400px;
}