:root {
	--azul-oscuro: #013763;
	--primario: #0f69b4;
	--bs-link-hover-color: var(--azul-oscuro);
	--enfasis: #EB3C46;
	--secundario: #63C3D1;
	--terciario: #0B4582;
	--suave: #58789A;
	--tiempo: 0.4s;
	--valueGR: 60%;
}


h2,h1 {
	font-weight: bold;
	font-size: 2.5em;
	color: var(--primario);
	margin-bottom: 1em;
	& em {
		color: #333399;
		font-style: normal;
		display: block;
	}
}
h3 {
	color: var(--primario);
}
h4 {
	color: var(--terciario);
}

button {
	border-radius: 10px; 
	border: 1px solid var(--primario);
	color: var(--primario);
	padding: 0.5em 3em;
	background: transparent;
	font-size: 0.9em;
	transition: background var(--tiempo);

	&:hover {
		color: white;
		background: var(--primario);
	}
}

.oscuro {
	& h2 {
		color: white;
		& em {
			color: var(--secundario);
		}
	}
	& button {
		background: #032E5A;
		color: white;
		border: none;
		transition: background var(--tiempo);
		&:hover {
			background: white;
			color: #032E5A;
		}
	}
}

.wrapper {
	--py : 4em;
	padding-top: var(--py) ;
	padding-bottom: var(--py) ;
	& button {
		margin-top: 1em;
	}    
}

.nav-link {
	color: var(--primario);
}

#main-nav {
	/* background-color: white; */
}

.navbar-brand {
	width: 200px;
}

.nav-link:focus, .nav-link:hover {
	color: var(--azul-oscuro);
}

#main-menu {
	.menu-item {
		margin-left: 5px;
		margin-right: 5px;
	}
	& .active {
		position: relative;
		.nav-link {
			color: var(--enfasis);
			font-weight: bold;
		}
		&::before {
			content: " ";
			position: absolute;
			bottom: -25px;
			width: 100%;
			height: 10px;
			background: var(--enfasis);
		}
	}
	.menu-item-214 {
		font-family: "Font Awesome 6 Free";
		font-weight: 600;
	}
}

#wrapper-navbar {
	border-bottom: var(--primario) 10px solid;
	position: relative;
}

.ficha {
	background-color: white;
	border-radius: 10px;
	font-size: 0.9em;
	border: 1px solid #ccc;
	margin-bottom: 2em;
	& h3 {
		font-size: 1em;
		font-weight: bold;
		margin-bottom: 1em;
	}
	.pre {
		border-radius: inherit;
		position: relative;
		& span {
			position: absolute;
			padding: 0.25em 1.5em;
		}
		--posval: 1.5em;
		.new {
			top: var(--posval);
			left: var(--posval);
			background: var(--enfasis);
			color: white;
			border-radius: 1em;
			padding-left: 1em;
			& i {margin-right: 0.2em;}
		}
		.cat {
			bottom: var(--posval);
			left: var(--posval);
			border-radius: 8px;
			font-size: 0.8em;
			border: 1px solid rgba(255, 255, 255, 0.60);
			background: rgba(12, 25, 58, 0.75);
			color: white;
			background-blend-mode: multiply;
			backdrop-filter: blur(18.5px);
			border: 1px solid #ccc;
		}
		& img {
			border-radius: 10px 10px 0 0;
			background: linear-gradient(5deg, #02308A 3.19%, rgba(40, 77, 164, 0.00) 47.34%), lightgray 50% / cover no-repeat;
			height: 250px;
		    object-fit: cover;
		}
	}
	& hgroup {
		& .tiempo {
			color: #999;
			& span {display: none;}
		}
		& i {
			color: var(--secundario);
			margin-right: 0.2em;
		}
	}
	transition: all var(--tiempo);
	&:hover {
		background: #fbfbfb;
		border: 1px solid #e8e8e8;
		box-shadow: 0px 10px 16px 0px rgb(1 49 88 / 16%);

	}
}

.ficha , .single-curso {
	& a.detalles , a.campus {
		display: block;
		padding: 0.5em;
		background: var(--secundario);
		color: white;
		text-align: center;
		text-decoration: none;
		margin-top: 0.5em;
		border-radius: 5px;
		position: relative;
		transition: background var(--tiempo);
		&:hover {
			background-color: var(--primario);
		}
		& i {
			color: inherit;
			position: absolute;
			right: 10px;
			top:50%;
			transform: translateY(-50%);
		}
	}
}
.page .ficha a.detalles , .single-curso a.campus {
	background: var(--terciario);
	&:hover {
		background: var(--primario);
	}
}




.home {
	#page-wrapper {
		background: linear-gradient(30deg, #E3EEFF 5.75%, rgba(255, 255, 255, 0.00) 92.24%);
		border-bottom: var(--enfasis) 15px solid;
	}
	.wrapper.sub1 {
		background: #0A5191 url(../img/fondo-s2.png) no-repeat center bottom;
		background-size: cover;
		overflow: hidden;
		.pref {
			color: white;
			h2 strong {
				
			}
		}
		.fichas {
			&:hover .ficha {
				box-shadow: none;
			}
		}
		.ficha {
			box-shadow: 0px 50px 50px 0px rgba(1, 49, 88, 0.50);
			transition: transform var(--tiempo) , box-shadow var(--tiempo);;
			z-index: 1;
			&:hover {
				transform: scale(1.1);
				z-index: 2;
				box-shadow: none;
			}
		}
	}
	.wrapper.sub2 {
		background: #DCE8F6;
		.testimonio {
			height: 100%;
			position: relative;
			padding: 30px;
			margin-left: 30px;
			margin-right: 30px;
			color: #414141;
			border-radius: 20px;
			background:linear-gradient(74deg, rgba(255, 255, 255, 0.86) 4.14%, rgba(255, 255, 255, 0.71) 101.04%) , url(../img/stroke.png) no-repeat 200px 40px;
			background-size: 100% , 65px;

			box-shadow: 0px 14px 30px 0px rgba(0, 86, 254, 0.25);
			font-size: 0.9em;
			& img {
				margin-top: -30%;
				border-radius: 100%;
				width: 133px;
				box-shadow: 0 5px 20px rgba(0 0 0 / 10%);
			}
			& hgroup {
				margin-top: 3em;
				& h3 {
					font-size: 1em;
				}
				& div.cargo {
					font-size: 0.9em;
				}
			}
		}
		.splide__slide__container {
			padding-top: 75px;
			padding-bottom: 40px;
			height: 100%;
		}
	}
	.wrapper.sub3 {
		background: var(--terciario);
		color: white;
		padding-bottom: 8em;
		& h2 {
			margin-bottom: 0.5em;
		}
		
		& .esfera {
			width: 222px;
			height: 222px;
			margin: 0 auto;
			border: 10px solid var(--primario);
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			border-radius: 100%;
			outline: 0;
			overflow:hidden;
			background: none;
			z-index: 1;
			position: relative;
			transition: 0.5s ease-in;
			& strong {
				display: block;
				font-size: 3em;
			}
			&:hover {
				color: whitesmoke;
			  }
			  
			  &:before {
				content: "";
				position: absolute;
				background: var(--primario);
				bottom: 0;
				left: -5%;
				right: 0;
				top: 105%;
				z-index: -1;
				width: 110%;
				height: 110%;
				-webkit-transition: top 0.3s ease-in,filter 0.3s ease-in;
				filter: blur(15px);
			}
			
			&:hover:before {
				top: 0;
				filter: blur(0);
			}
			
		}
	}
	.wrapper.sub4 {
		em {
			display: inline-block!important;
		}
		& #enlaces>div:nth-child(-n+4) {
			margin-bottom: 80px;
		}
		& #enlaces img {
			/* padding: 20px; */
			max-width: 200px;
			max-height: 100px;
			transition: transform var(--tiempo);
			&:hover {
				transform: scale(1.08);
			}
		}
	}
}


  
  .gender {
	--size: 222px;
	--bord: 20px;
	--colh: rgb(143, 243, 221);
	--colm: rgb(171, 168, 255);

	width: var(--size);
	height: var(--size);
	margin: 0 auto;
	border-radius: 50%;
	background-image: conic-gradient( var(--colm) var(--valueGR), var(--colh) var(--valueGR));

					/* background-image: conic-gradient(rgb(20, 131, 44) 60%), rgb(163, 24, 117) 60%); */
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	& div.txt {
		position: absolute;
		z-index: 2;
		& strong {
			display: block;
			font-size: 3em;
		}
	}
	/* & span.hombres::before , & span.mujeres::before {
		border-radius: 100%;
		content: "";
		width: 1em;
		height: 1em;
		display: inline-block;
		margin-right: 0.4em;
		position: relative;
		top: 2px;
	} */
	/* & span.hombres::before {
		background: var(--colh);
	}
	& span.mujeres::before {
		background: var(--colm);
	} */
	& span.hombres {
		color: var(--colh);
	}
	& span.mujeres {
		color: var(--colm);
	}

	/* & div.desglose {
		position: absolute;
		bottom: -55px;
		margin-top: 1em;
		text-align: left;
	} */
  }
  
  .gender::after {
	content: "";
	position: absolute;
	z-index: 1;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: calc(100% - var(--bord));
	height: calc(100% - var(--bord));
	background: var(--terciario);
	border-radius: inherit;
  }
  



#wrapper-footer {
	background: var(--azul-oscuro);
	padding-bottom: 0;
	.container {
		background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbDpzcGFjZT0icHJlc2VydmUiIHg9IjAiIHk9IjAiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDI3NS42IDMzIj48cGF0aCBkPSJNMCAwaDEzNy44djMzSDB6IiBmaWxsPSIjMGY2OWI0Ii8+PHBhdGggZD0iTTEzNy44IDBoMTM3Ljh2MzNIMTM3Ljh6IiBmaWxsPSIjZmYwMDI0Ii8+PC9zdmc+);
		background-repeat: no-repeat;
		background-size: 68px 8px;
		background-position: 0 100%;
		color: #fff;
		padding-bottom: 50px;
	}
}

.site-info { display: none;}


.page-id-20 .entry-title {
	display:none;
}


.page-cursos , .single-curso {
	& h1 {
		color: #0B4582;
		text-align: center;
		margin-bottom: 2em;
	}
	#page-wrapper , #single-wrapper {
		background: url(../img/fondo-zz.png) no-repeat top center;
		background-size: contain;
	}
	#left-sidebar aside {
		padding: 30px;
		background: #F6F6F6;
		border-radius: 15px;
	}
}

.page-mallas {
	#page-wrapper {
		background: url(../img/fondo-zz2.png) top right no-repeat ,
		linear-gradient(180deg, rgba(95, 182, 255, 0.25) 0%, rgba(255, 255, 255, 0.00) 100%);
		background-size: 55% , auto;
	}
	& p {
		color: var(--primario);
	}
	& h1 {
		margin-bottom: 0.5em;
	}
	.listado {
		margin: 2em 0;
		& ul {
			padding-left: 0;
			list-style-type: none;
			& li {
				& a {
					padding: 0.75em 1.5em;
					display: block;
					text-decoration: none;
					border-radius: 5px;
					font-weight: bold;
				}
				&.active a {
					background: var(--terciario);
					color: white;
					&::after {
						content: "";
						font-family: "Font Awesome 6 Free";
						float: right;
					}
				}
			}
		}
	}
	.wrapper-fichas {
	}
	.ficha-malla {
		padding: 45px 60px;
		border-radius: 42px;
		background-size: 100% 100%;
		background-position: 0px 0px,0px 0px;
		background-image: linear-gradient(180deg, #FFFFFF66 66%, #FFFFFFFF 81%),linear-gradient(0deg, #FFFFFF00 0%, #FFFFFF00 100%);
		box-shadow: 8px 20px 26px 0px rgba(15, 105, 180, 0.15);
		backdrop-filter: blur(3px);
		color: #58789A;
		transition: opacity 0.8s linear , background 0.3s;
		max-height: 100vh;
		min-height: 50vh;
		&:hover {
			background: rgba(255, 255, 255, 0.7);
		}
		&.init {
			display: none;
		}
		
		&.hidden {
			opacity: 0;
			/* position: absolute; */
			height: 0;
			padding: 0;
			position: relative;
			transform: translateX(-30px);
			transition: opacity 0.4s ;
			box-shadow: none;
		}
		&.visible {
			transition: opacity 0.4s , transform 1s , box-shadow 1.2s;
			transform: translateX(0);
			opacity: 1;
  			position: relative;
			}
		& img {
			width: auto;
			height: 75px;
			/* float: left; */
			margin-right: 15px;
			border-radius: 10px;
		}
		& h2 {
			font-size: 1.5em;
		}
		& h3 {
			font-size: 1em;
			& a { text-decoration: none; color: inherit;}
		}
		& span {
		color: var(--suave);

		}
		& i {
			color: var(--secundario);
		}
		.cursos {
			margin: 3em 0 1em;
			overflow-y: auto;
    		max-height: 34vh;
			position: relative;
			padding-right: 5px;
			&::after {
				content: '';
				position: fixed;
				left: 0px;
				right: 0px;
				height: 20px;
				bottom: 60px;
				background: linear-gradient(180deg, rgba(139,167,32,0) 0%, rgba(255,255,255,1) 100%);
				pointer-events: none;
			}
			.curso {
				display: flex;
				margin-bottom: 2em;
				margin-left: 46px;
				position: relative;
				&:last-child {
					margin-bottom: 0;
				}
				&::before {
					content: " ";
					height: 22px;
					width: 22px;
					position: absolute;
					left: -41px;
					border-radius: 15px;
					background-color: var(--primario);
					top: 50%;
   					transform: translateY(-50%);
				}
				&::after {
					content: "";
					width: 2px;
					height: calc(100% + 2.9em);
					background: var(--primario);
					position: absolute;
					top: 56%;
					left: -31px;
					z-index: -1;
				}
				&:last-child{
					padding-bottom: 20px;
					&::after{
						content: none;
					}
				}
			}
		}
	}
}

.page-tutoriales {
	.ficha {
		& h2 {
			font-size: 1em;
		}
		& img {
			width: 100%;
		}
	}
}

body.single-curso {
	& h1 {
		text-align: left;
		margin: 1.3em 0;
	}
	& h2 {
		font-size: 1.3em;
		margin-bottom: 0.5em;
	}
	& .wp-post-image {
		width: 100%;
		border-radius: 30px;
		max-height: 38%;
    	object-fit: cover;
	}

	& a.campus {
		padding: 0.5em 3em ;
		margin-top: 1em;
		& i {
			position:relative;
			top: auto;
			right: auto;
			margin-left: 0.5em;
			transform: unset;
		}
	}
	.entry-content {
		& a.campus {
			display: inline-block;
		}
		& .grupo {
			border-bottom: 1px solid #ccc;
			margin-bottom: 1.5em;
		}
	
	}
	& aside {
		.container {
			margin: 30% 0 0 15px;
			padding: 45px 30px;
			border-radius: 15px;
			background-color: rgba(255,255,255,0.7);
			font-weight: bold;
			color: #273A60;
			font-size: 1.1em ;
			box-shadow: 0 5px 20px rgba(0,0,0,0.05);
			.fila {
				margin-bottom: 0.5em;
				.url {
					margin-left: 1.9em;
				}
			}
			& span {
				color: #8598AD;
				font-weight: normal;
				&::before {
					margin-right: 0.5em;
					display: inline-block;
					transform: scale(1.1) translateY(3px); 
					transform-origin: 0 0;
					fill: var(--azul-oscuro);
				}
				&.duracion::before {
					content: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="24" height="24" viewBox="0 0 256 256"%3E%3Cpath fill="%23273A60" d="M128 20a108 108 0 1 0 108 108A108.12 108.12 0 0 0 128 20Zm0 192a84 84 0 1 1 84-84a84.09 84.09 0 0 1-84 84Zm68-84a12 12 0 0 1-12 12h-56a12 12 0 0 1-12-12V72a12 12 0 0 1 24 0v44h44a12 12 0 0 1 12 12Z"%2F%3E%3C%2Fsvg%3E');
				}
				&.enlace::before {
					content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23273A60'%3E%3Cpath d='M440-280H280q-83 0-141.5-58.5T80-480q0-83 58.5-141.5T280-680h160v80H280q-50 0-85 35t-35 85q0 50 35 85t85 35h160v80ZM320-440v-80h320v80H320Zm200 160v-80h160q50 0 85-35t35-85q0-50-35-85t-85-35H520v-80h160q83 0 141.5 58.5T880-480q0 83-58.5 141.5T680-280H520Z'/%3E%3C/svg%3E");
				}
				&.categoria::before {
					content: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="24" height="24" viewBox="0 0 24 24"%3E%3Cpath fill="none" stroke="%23273A60" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 19a9 9 0 0 1 9 0a9 9 0 0 1 9 0M3 6a9 9 0 0 1 9 0a9 9 0 0 1 9 0M3 6v13m9-13v13m9-13v13"%2F%3E%3C%2Fsvg%3E');
				}
				&.tipo::before {
					content: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="24" height="24" viewBox="0 0 256 256"%3E%3Cpath fill="%23273A60" d="M208 76h-28V56a52 52 0 0 0-104 0v20H48a20 20 0 0 0-20 20v112a20 20 0 0 0 20 20h160a20 20 0 0 0 20-20V96a20 20 0 0 0-20-20ZM100 56a28 28 0 0 1 56 0v20h-56Zm104 148H52V100h152Zm-60-52a16 16 0 1 1-16-16a16 16 0 0 1 16 16Z"%2F%3E%3C%2Fsvg%3E');
					transform: translateY(5px);
				}
			}
		}
	}
}

#breadcrumbs {
	& ul.bcl {
		font-size: 0.9em;
		padding: 2em 0;
		margin: 0 22px;
		list-style: none;
		& li {
			display: inline-block;
			color: var(--azul-oscuro);
			& a {
				text-decoration: none;
			}
			&::after {
				content: ">";
				margin: 0 0.5em 0 0.8em;
				color: var(--secundario);
			}
			&:last-child::after {
				content: "";
			}
			&.home a {
				transform: translateY(0.2em);
				display: inline-block;
				overflow: hidden;
				white-space: nowrap;
				width: 16px;
				height: 16px;
				background: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="8" height="16" fill="%230F69B4"/><rect x="8" width="8" height="16" fill="%23EB3C46"/></svg>');
				background-size: 16px;
				text-indent: 100%;
			}
		}
	}
}

.searchandfilter ul>li>ul:not(.children) , .searchandfilter ul {
	padding: 0;
}
.searchandfilter h4 {
	margin-bottom: 1em;
}
#search-filter-form-122 {
	font-size: 14px;
}
#search-filter-form-130 {
	margin-bottom: 2em;
	&>ul {
		position: relative;
	}
	.sf-field-search {
		padding-top: 0;
	}
	.sf-field-search label , .sf-field-search label>input {
		width: 100%;
		&::placeholder {
			color: #ccc;
		}
	}
	.sf-field-search label>input {
		border-radius: 14px;
		border: 2px solid #A1BBD0;
		background: #FFF;
		padding: 0.6em 1.2em;
	}
	.sf-field-submit input {
		font-family: "Font Awesome 5 Free", Tahoma;
		font-weight: 700;
		color: #3185CB	;
		background: none;
		border: none;
	}
	.search-filter-reset {
		font-family: "Font Awesome 5 Free", Tahoma;
		font-weight: 700;
		color: #5f5f5f;
		background: none;
		border: none;
		text-decoration: none;
		color: #999;
	}
	.sf-field-reset {
		right: 3em;
		font-size: 1.3em;
		top: -2px;
	}
	.sf-field-submit {
		top: -5px;
		right: 0.5em;
		font-size: 1.4em;
	}
	.sf-field-submit , .sf-field-reset {
		position: absolute;
	}
}

.page-formulario-de-entrada {
	#page-wrapper {
		background:  url(../img/linea-zz.png) repeat-y, linear-gradient(180deg, rgba(0, 133, 244, 0.16) 0%, rgba(255, 255, 255, 0.87) 100%) ;
		background-size: 100%;
	}
	.htmove-login-form .htmove-form-control input[type="submit"] {
		height: auto;
	}
}

.page-biblioteca {
	.wrapper.title {
		padding-bottom: 0;
		margin-bottom: 0;
	}
	.wrapper.buscador {
		background: #F0F0F0;
		padding: 2em 0;
		ul {
			display: flex;
			align-items: center;
			li:first-child {
				/* flex: 1; */
				width: 40%;
				min-width: 40%;
			}
			.search-filter-reset  {
				margin-left: 1em;
				text-decoration: none;
			}
		}
		label , .sf-input-text {
			width: 100%;
		}
		.sf-input-text {
			padding: 5px 10px;
			border-radius: 14px;
			border: 1px solid rgba(15, 105, 180, 0.26);
			background: #FDFEFF;
			box-shadow: 0px 4px 12px 0px #CECECE;
		}
	}
	.carpeta {
		margin-bottom: 4em;
		.caption , .fila , .header {
			padding: 10px 20px;
			& span {
				padding: 0 10px;
			}
		}
		.header {
			font-size: 0.9em;
			color: #666;
			padding-bottom: 3px;
			.ico {
				visibility: hidden;
			}
		}
		.caption {
			padding: 20px;
			background: var(--terciario);
			color: white;
			border-radius: 20px 20px 0 0;
		}
		.fila {
			margin: 3px 0;
			background: #F6FAFF;
			display: flex;
    		align-items: center;
			&:last-child {
				border-radius: 0 0 20px 20px;
			}
			&:hover {
				background: #d7dfe6;
			}
		}
		& .filename , & .ico , & .detalle , & .fecha , & .size {
			display: inline-block;
		}
		& .fecha , & .size {
			text-align: center;
		}
		& .ico {
			width: 30px;
		}
		& .filename {
			width: 70%;
		}
		& .detalle {
			width: 40%;
		}
		& .fecha {
			width: 15%;
		}
		& .size {
			width: 10%;
		}

	}
}

@media (max-width: 768px) {
	.navbar-toggler {
		background-color: #00579e;
	}
	.home .wrapper .container>.row {
		min-width: 100%;
	}
	#page > div.wrapper.sub3.oscuro > div > div > div.row.text-center > div {
		margin-bottom: 3em;
	}
	.row {
		justify-content: space-around;
	}
	#page > div.wrapper.sub3.oscuro > div > div > div.row.text-center {
		min-width: 100%;
	}
	.home {
		& .wrapper.sub4 {
			& #enlaces>div {
				margin-bottom: 30px !important;
			}
		}
	}
	.ficha {
		& .pre {
			& img {
				height: 100%;
			}
		}
	}
	.wrapper.sub1 {
		& button {
			margin: 1em 0 2em;
		}
	}
	.page-cursos {
		#left-sidebar {
			margin-bottom: 2em;
		}
	}
	.ficha {
        & .pre {
            & img {
                height: 65px;
                width: 100%;
            }
			.new {
				right: var(--posval);
				left: unset;
			}
        }
	}
	#main-menu {
		& .active {
			&::before {
				display: none;
			}
		}
	}
	#main-menu {
		.menu-item-214 {
			a::after {
				font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
				content: "Salir";
				margin-left: 0.5em;
				font-weight: normal;
			}
		}
	}

}