/* ================================
   RESET & TIPOGRAFÍA BASE
   ================================ */
@font-face {
    font-family: 'Montserrat-Bold';
    src: url(../fonts/Montserrat/static/Montserrat-Bold.ttf) format('truetype');
}

@font-face {
    font-family: 'Montserrat-SemiBold';
    src: url(../fonts/Montserrat/static/Montserrat-SemiBold.ttf) format('truetype');
}

@font-face {
    font-family: 'Montserrat-Medium';
    src: url(../fonts/Montserrat/static/Montserrat-Medium.ttf) format('truetype');
}

@font-face {
    font-family: 'Jakarta-SemiBold';
    src: url(../fonts/Plus_Jakarta_Sans/static/PlusJakartaSans-SemiBold.ttf) format('truetype');
}

@font-face {
    font-family: 'Jakarta-Regular';
    src: url(../fonts/Plus_Jakarta_Sans/static/PlusJakartaSans-Regular.ttf) format('truetype');
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	line-height: 1.5;
	color: #333;
	font-family: "MontserratLocal", system-ui, sans-serif;
	/* TITULARES por defecto */
	padding-top: 100px;
	/* para no tapar el header fijo */
}

/* Titulares */
h1, h2, h3, h4, h5 {
	font-family: "Montserrat-Medium", system-ui, sans-serif;
	font-weight: 600;
	line-height: normal;
	letter-spacing: 0;
	font-style: normal;
}

/* Texto general */
p, a, li, span, small,
label, input, button {
	font-family: "PlusJakartaLocal", system-ui, sans-serif;
	font-weight: 400;
	letter-spacing: 0;
}

p, a, li, span {
	font-size: 18px;
}

header {
	width: 100%;
	height: 70px;
	margin-left: 50%;
	transform: translateX(-50%);
	background: linear-gradient(90deg, #ffffffee 80%, #ffffffcc 100%);
	backdrop-filter: blur(3px);
	padding: 0 17px;
	padding-top: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	transition: transform 0.4s ease, background 0.3s ease;
}

header.hidden {
	margin-left: 50%;
	transform: translate(-50%, -120%);
}

.hero-header {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	align-items: start;
	gap: 3rem;
	margin-bottom: 30px;
	background-color: #ffffffee;
}

.header-container {
	display: flex;
	background-color: transparent;
	align-items: center;
	justify-content: space-between;
	height: 100%;
	width: 100%;
	/* max-width: 1180px; */
	margin: 0 auto;
}

.menu-toggle {
	display: none;
}

.header-left {
	display: flex;
	align-items: center;
	justify-content: end;
	height: 100%;
	gap: 20px;
}

.logo {
	display: flex;
	align-items: end;
	justify-content: center;
	height: 100%;
	margin-top: 0px;
}

.logo img {
	width: 55px;
	height: 55px;
	object-fit: contain;
}

.nav-rounded {
	background-color: #fff;
	border: 1px solid #062638;
	border-top: none;
	border-radius: 0 0 30px 30px;
	padding: 0 20px;
	display: flex;
	height: 90%;
	gap: 1.5rem;
	margin-bottom: auto;
}

.nav-rounded a {
	font-family: 'Jakarta-SemiBold', sans-serif;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	color: #333;
	font-weight: 500;
	position: relative;
	transition: color 0.2s;
}

.nav-rounded a.active,
.nav-rounded a:hover {
	color: #0D2435;
}

.btn-login {
	background: #0D2435;
	font-family: "Jakarta-Medium", sans-serif;
	font-size: 16px;
	color: #fff;
	width: 150px;
	height: 50px;
	padding: 0 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 30px;
	text-decoration: none;
	text-wrap: nowrap;
	transition: background 0.2s, color 0.2s;
}

.btn-login:hover {
	background: white;
	color: #0D2435;
	border: 2px solid #0D2435;
	transition: background 0.2s, color 0.2s;
}

.header-right {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* Custom select (usa Montserrat local) */
.custom-select {
	position: relative;
	user-select: none;
	cursor: pointer;
}

.custom-select > div > p {
	font-family: "Jakarta-SemiBold", sans-serif;
	font-size: 16px;
}

.custom-select .selected {
	background: #fff url("data:image/svg+xml,%3Csvg width='10' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") no-repeat right 10px center;
	border: 1px solid #002f47;
	border-radius: 30px;
	width: 150px;
	height: 50px;
	padding: 5px 8px;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
}

.custom-select .selected:hover {
	background-color: #f4f4f4;
}

.custom-select .selected img {
	width: 25px;
	height: 25px;
	border-radius: 50px;
}

.custom-select .options {
	display: none;
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	width: 100%;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 12px;
	overflow: hidden;
	z-index: 100;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	z-index: 9999;
}

.custom-select .options.open {
	display: block;
}

.custom-select .options li {
	padding: 8px 12px;
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	transition: background 0.2s;
}

.custom-select .options li:hover {
	background: #f2f2f2;
}

.custom-select .options img {
	width: 20px;
	height: auto;
}

.custom-select.open .options {
  display: block;
}

/* ================================
   RESPONSIVE DESIGN
   ================================ */

@media (max-width: 1000px) {

	.custom-select .selected {
		width: 40px;
		height: 40px;
		background: #fff;
	}

	.custom-select .selected img {
		margin: 0 auto;
		padding-right: 2px;
	}
	
	.custom-select > div > p {
		display: none;
	}

	.options.open {
		width: 120px;
	}

	.btn-login {
		width: 120px;
		height: 40px;
		font-size: 14px;
	}

	.nav-rounded a {
		font-size: 14px;
	}
}

/* Inkbar (el “gusano”) */
.nav-rounded {
	position: relative;
}

.nav-inkbar {
	position: absolute;
	left: 0;
	bottom: -4px;
	height: 7px;
	width: 0;
	background: #0f3b4a;
	border-radius: 999px;
	z-index: 2;
	transform: translateX(0);
	transition: transform 260ms cubic-bezier(.25, .8, .25, 1),
		width 260ms cubic-bezier(.25, .8, .25, 1),
		opacity 160ms ease;
	opacity: 0;
	pointer-events: none;
}

/* Cuando el nav está listo, mostramos la inkbar */
.nav-inkbar.is-on {
	opacity: 1;
}

@media (max-width: 750px) {
	.nav-inkbar {
		display: none;
	}

	/* Ocultar menú por defecto */
	.nav-rounded {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		width: 100vw;
		height: auto;
		flex-direction: column;
		gap: 1rem;
		padding: 1rem;
		border-radius: 0;
		border: none;
	}

	/* Mostrar menú cuando se active */
	.nav-rounded.active {
		display: flex;
		background-color: #072F47;
		opacity: 0.95;
	}

	.nav-rounded a {
		font-size: 18px;
		text-align: center;
		color: white !important;
		position: relative;
	}

	.nav-rounded a.active,
	.nav-rounded a:hover {
		text-decoration: underline;
		text-decoration-thickness: 2px;
		text-underline-offset: 6px;
	}

	/* Botón hamburguesa */
	.menu-toggle {
		display: block;
		background: none;
		border: none;
		cursor: pointer;
		padding: 0.5rem;
	}

	.menu-toggle span {
		display: block;
		width: 25px; /* Más largo */
		height: 3px;
		background: #333;
		margin: 7px 0; /* Más separación */
		border-radius: 2px;
		transition: all 0.3s ease;
	}

	/* Animación al abrir */
	.menu-toggle.active span:nth-child(1) {
		transform: rotate(45deg) translate(7px, 7px); /* Mueve la X más a la derecha */
		width: 25px;
	}

	.menu-toggle.active span:nth-child(2) {
		opacity: 0;
	}

	.menu-toggle.active span:nth-child(3) {
		transform: rotate(-45deg) translate(7px, -7px); /* Mueve la X más a la derecha */
		width: 25px;
	}

	.header-right {
		gap: 0.5rem;
	}

	.btn-login {
		padding: 0.4rem 0.8rem;
		font-size: 14px;
	}
}