/* Variables
  **********************************/
@import url("variables.css");
/* ******************************* */

.main-nav {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	padding: 0;
	margin: 0;
}

.main-nav-item {
	list-style: none;
	position: relative;
	font-family: var(--inter);
}

.path-frontpage .inicio {
	display: none;
}

.main-nav-link {
	color: var(--gris-claro);
	background: transparent;
	display: block;
	text-decoration: none;
	font-weight: 500;
	padding: 0.7rem 1.2rem;
	font-size: calc(var(--text-general) - 0.1rem);
	font-weight: var(--medium);
}

.level-1 > .main-nav-link {
	text-align: center;
}

.main-nav-item--expanded > .main-nav-link:hover {
	text-decoration-color: white;
}

.main-nav-link:hover {
	color: black;
	background: var(--amarillo);
}

.main-nav-link.main-nav-link--active {
	position: relative;
}

.main-nav-link.main-nav-link--active::after,
.main-nav-item.main-nav-item--expanded > .main-nav-link.main-nav-link--active::after {
	position: absolute;
	content: "";
	width: 6px;
	border-radius: 6px;
	aspect-ratio: 1/1;
	display: block;
	bottom: -12px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--rojo-base);
	transition: all 0.2s;
}

.main-nav-item.main-nav-item--expanded.main-nav-item--active:hover > .main-nav-link.main-nav-link--active::after {
	bottom: calc(100% - 0.5rem);
	opacity: 0;
}

.main-nav-item:hover > .main-nav-link {
	color: black;
	background: var(--amarillo);
}

.main-nav-item:hover .main-nav-submenu .main-nav-link:hover {
	background: #fff675;
	color: var(--gris);
}

.main-nav-link.main-nav-link--active:hover {
	text-decoration-color: white;
}

.main-nav-submenu {
	padding: 0;
	margin: 0;
	position: absolute;
	top: 2.89rem;
	left: 0;
	min-width: 300px;
	opacity: 0;
	transition: all 0.2s;
	pointer-events: none;
	z-index: -9;
	background: var(--amarillo);
	padding: 0;
}

.main-nav-submenu .main-nav-link {
	display: block;
	text-transform: none;
	text-decoration: none;
	padding: 0.5rem 1.2rem;
	line-height: 1.2em;
	color: var(--gris-medio);
}

.main-nav-item:hover .main-nav-submenu,
.main-nav-item:hover .main-nav-submenu:hover {
	opacity: 1;
	z-index: 9;
	pointer-events: all;
}

.main-nav-submenu .main-nav-link.main-nav-link--active::after {
	display: none;
}

/* Main nav responsive */

#main-nav-toggle {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid white;
	font-size: 0;
	cursor: pointer;
	transition: all 0.2s;
	position: relative;
}

#main-nav-toggle .nav-item,
#main-nav-toggle::before,
#main-nav-toggle::after {
	position: absolute;
	left: 50%;
	width: 50%;
	height: 2px;
	background: white;
}

#main-nav-toggle .nav-item {
	top: 50%;
	transform: translate(-50%, -50%);
}

#main-nav-toggle::before,
#main-nav-toggle::after {
	content: "";
	transform: translateX(-50%);
}

#main-nav-toggle::before {
	top: calc(100% / 3);
}

#main-nav-toggle::after {
	bottom: calc(100% / 3);
}

#main-nav-toggle.nav-toggle-active {
	border: 1px solid white;
	background: transparent;
	z-index: 99;
}

#main-nav-toggle.nav-toggle-active .nav-item {
	opacity: 0;
}

#main-nav-toggle.nav-toggle-active::before {
	top: 50%;
	transform: translate(-50%, -50%) rotate(45deg);
}

#main-nav-toggle.nav-toggle-active::after {
	top: 50%;
	transform: translate(-50%, -50%) rotate(-45deg);
}

.toggle-hidden #main-nav-toggle {
	display: none !important;
}

.overlay {
	position: fixed;
	background: var(--gris-claro);
	inset: 215px 0 0 100%;
	visibility: hidden;
	pointer-events: none;
	opacity: 0;
	z-index: 99;
	overflow: auto;
	transition: inset 0.2s ease, opacity 0.2s ease;
	border-radius: 10px 0 0 0;
	height: calc(100vh - 215px);
}

.overlay.nav-active {
	inset: 215px 0 0 0;
	visibility: visible;
	pointer-events: all;
	opacity: 1;
}

.overlay.nav-active a {
	pointer-events: auto;
}

/* Nav footer */

.nav-footer {
}

.nav-column .main-nav {
	flex-direction: column;
	align-items: flex-end;
	gap: 0.3rem;
}

.nav-footer .main-nav-link {
	color: white;
	background: transparent;
	padding: 0;
	font-size: calc(var(--text-general) - 0.3rem);
	text-decoration: none;
}

.nav-footer .main-nav-link:hover {
	color: var(--gris-claro);
	background: transparent;
	text-decoration: none;
}

.nav-footer .main-nav-link::after {
	display: none;
}

/* Nav Clean & Nav Expand */

.nav-expand .main-nav {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.nav-expand .main-nav-item {
	display: none;
}

.nav-expand .main-nav-item--expanded,
.nav-expand .main-nav-item--expanded .main-nav-item {
	display: block;
	width: 100%;
}

.nav-expand .main-nav-link {
	color: var(--gris);
	background: transparent;
	border-bottom: 2px solid #dce2de;
	padding: 1rem;
	border-radius: 0;
	text-align: left;
}

.nav-expand .main-nav-link:hover {
	background: transparent !important;
	color: var(--rojo-base) !important;
}

/* .nav-expand .level-1 .main-nav-link.main-nav-link--active::after,
.nav-expand .level-1 .main-nav-link.main-nav-item--expanded>.main-nav-link.main-nav-link--active::after, */
.nav-expand .main-nav-link.main-nav-link--active::after,
.nav-expand .main-nav-link.main-nav-item--expanded > .main-nav-link.main-nav-link--active::after {
	position: absolute;
	content: "";
	width: 6px;
	border-radius: 6px;
	aspect-ratio: 1 / 1;
	display: block;
	top: 1.5rem;
	left: -1.5rem;
	bottom: inherit;
	transform: none;
	background: #dce2de;
	transition: all 0.2s;
}

.nav-expand .level-1 .main-nav-link.main-nav-link--active::after,
.nav-expand .level-1 .main-nav-link.main-nav-item--expanded > .main-nav-link.main-nav-link--active::after {
	background: #dce2de;
	display: none;
}

.nav-expand .level-1:hover > .main-nav-link {
	background: transparent !important;
}

.nav-expand .level-2 .main-nav-link.main-nav-link--active::after {
	display: block;
}

.nav-expand .main-nav-submenu {
	position: relative;
	top: inherit;
	left: 0;
	opacity: 1;
	pointer-events: all;
	z-index: inherit;
	min-width: auto;
	background: transparent;
}

.nav-expand .main-nav-submenu .main-nav-link {
	background: transparent;
}

.nav-clean .main-nav-link {
	color: white;
	background: transparent;
}

.nav-clean .main-nav-item > .main-nav-link {
	font-weight: var(--bold);
	font-size: calc(var(--text-general) - 0.2rem);
}

.nav-clean .main-nav-item:hover > .main-nav-link {
	color: white;
	background: transparent;
}

.nav-clean .main-nav-submenu .main-nav-link {
	font-size: calc(var(--text-general) - 0.2rem);
	font-weight: var(--medium);
}

.nav-clean .main-nav-item .main-nav-link:hover,
.nav-clean .main-nav-submenu .main-nav-link:hover {
	background: rgba(255, 255, 255, 0.1) !important;
}

/* Nav legal */

.nav-legal ul:not(.contextual-links) {
	display: flex;
	flex-wrap: nowrap;
	gap: 1rem;
}

/* Programa nivel 1 */

.nav-grid {
	padding-block: var(--pm-blend-block);
}

.nav-grid .main-nav {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	justify-content: space-between;
	align-items: stretch;
	gap: 3rem;
	counter-reset: section;
}

.nav-grid .main-nav .main-nav-item {
	margin-bottom: 0;
}

.nav-grid .main-nav .main-nav-item .main-nav-link {
	border: 1px solid var(--gris);
	border-radius: 10px;
	text-decoration: none;
	font-size: var(--text-general);
	padding: var(--pm-blend-block);
	font-weight: var(--bold);
	height: 100%;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 6rem;
	color: var(--gris);
}

.nav-grid .main-nav .main-nav-item .main-nav-link::before {
	position: absolute;
	top: 1rem;
	left: 1rem;
	counter-increment: section;
	content: counter(section);
	font-size: var(--text-general);
	font-weight: var(--bold);
	border: 1px solid #e0e4e1;
	color: var(--gris);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 30px;
	width: 30px;
	aspect-ratio: 1 / 1;
}

.nav-grid .main-nav .main-nav-item .main-nav-link:hover::before {
	background: white;
	border-color: white;
}

.nav-grid .main-nav .main-nav-item .main-nav-link:hover {
	border: 1px solid var(--rojo-base);
	background: var(--rojo-base);
	color: var(--gris-claro);
}

/* Responsive */

@media all and (max-width: 900px) {
	.nav-grid .main-nav {
		display: flex !important;
		flex-direction: column;
		gap: 1rem !important;
	}

	#block-nav-programa .main-nav .main-nav-item .main-nav-link {
		font-size: var(--text-general);
	}

	#template-two-programa,
	#header-template-two {
		display: flex !important;
		flex-direction: column;
		align-items: flex-start !important;
		justify-content: flex-start;
		grid-gap: 1rem !important;
	}

	#main-nav-toggle {
		display: block !important;
	}

	.nav-expand #main-nav-toggle {
		display: none !important;
	}

	.main-nav .main-nav-link {
		/* color: white; */
		background-color: rgba(255, 255, 255, 0);
	}

	.main-nav.nav-active {
		display: block;
		padding: 2rem 0 100px 1rem;
	}

	.main-nav.nav-active > .main-nav-item {
		border-bottom: 1px solid rgba(0, 0, 0, 0.5);
	}

	.main-nav.nav-active > .main-nav-item:not(.level-1.nav-item-1) {
		padding-block-start: 1rem;
	}

	.main-nav.nav-active .main-nav-item:hover > .main-nav-link,
	.main-nav.nav-active .main-nav-link {
		color: var(--gris);
		text-decoration: none;
		background: transparent;
	}

	.main-nav.nav-active .main-nav-link {
		-webkit-tap-highlight-color: transparent;
		/* quita el resaltado azul de iOS */
		touch-action: manipulation;
		/* mejora la respuesta táctil */
		background-color: rgba(255, 255, 255, 0);
		transition: background-color 0.2s ease, transform 0.2s ease;
		font-size: calc(var(--text-general) + 0.3rem);
		padding: 0.8rem 1rem;
	}

	.main-nav.nav-active .main-nav-link:hover,
	.main-nav.nav-active .main-nav-link:focus,
	.main-nav.nav-active .main-nav-link:active {
		background: var(--gris-claro) !important;
		border-radius: 15px 0 0 15px;
	}

	.overlay .main-nav-link.main-nav-link--active.is-active {
		background: var(--gris-claro) !important;
		border-radius: 15px 0 0 15px;
	}

	.main-nav.nav-active .main-nav-submenu {
		position: relative;
		top: inherit;
		left: 0;
		opacity: 1;
		pointer-events: all;
		z-index: inherit;
		min-width: auto;
		padding: 1rem 0 1rem 1rem;
		/* width: 100vw; */
		background: var(--gris-claro);
	}

	.main-nav.nav-active .main-nav-submenu .main-nav-link {
		font-size: var(--text-general);
		padding-right: 2em;
		padding-left: 0;
	}

	.main-nav-link.main-nav-link--active::after,
	.main-nav-item.main-nav-item--expanded > .main-nav-link.main-nav-link--active::after {
		display: none;
	}
}

@media all and (max-width: 1460px) {
}

@media all and (max-width: 1024px) {
	.nav-icons ul {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media all and (max-width: 780px) {
	.has-sidebar-first #main-wrap {
		display: flex;
		flex-direction: column;
		gap: 0;
	}
	#block-cytf-navegacionprincipal-2 {
		display: none !important;
	}
	.nav-icons ul {
		display: flex;
		flex-direction: column;
		gap: 1rem;
	}

	.main-nav-link {
		text-align: left;
	}

	.level-1 > .main-nav-link {
		text-align: left;
	}

	.title-page-header {
		top: var(--pm-blend-block);
		bottom: inherit;
	}

	.title-page-header,
	.cenefa-general-titulo {
		max-inline-size: 90%;
	}
}

@media all and (max-width: 480px) {
	/* #block-nav-programa-nivel-1-iconos.nav-icons ul li:last-child,
	#block-nav-programa-nivel-1-iconos.nav-icons ul li:last-child .enlace-icono,
	#block-nav-programa-nivel-1-iconos.nav-icons ul li:last-child .enlace-icono a {
		aspect-ratio: inherit;
	} */
}