/* BANNER */
.banner{
	padding: 						200px 0 220px;
	background-size: 				cover !important;
	background-blend-mode: 			color, multiply, normal, normal;
	position: 						relative;
	overflow: 						hidden;
}

.banner h2{
	text-transform: 				uppercase;
	color: 							#FFFFFF;
	margin-bottom: 					5px;
}

.banner span{
	color: 							#FFFFFF;
	font-family: 					'Noto Sans', sans-serif;
	opacity: 						0.8;
}

.banner .texturaBanner{
	height: 						100%;
	object-fit: 					contain;
	object-position: 				center center;
	position: 						absolute;
	top: 							0;
	right: 							-65px;
	opacity: 						0.2;
}

/* SOFTWARE */
.programa {
	margin-bottom: 						200px;
}

.programa .title{
	text-transform: 					uppercase;
	margin-bottom:						70px;
	text-align: 						center;
}

.programa .tabsContainer{
	display: 							flex;
	flex-flow: 							row nowrap;
}

.programa nav{
	flex: 								0 0 25%;
}

.programa nav .nav{
	display: 							flex;
	flex-flow:  						column nowrap;
	gap: 								15px;
}

.programa nav .nav .btnTabs{
	padding: 							15px 30px;
	border: 							unset;
	border-radius: 						10px;
	background: 						#FFFFFF;
	box-shadow: 						5px 4px 50px 0px rgba(91, 119, 220, 0.10);
	margin-right: 						10px;
	display: 							flex;
	flex-flow: 							row nowrap;
	align-items: 						center;
	color: 								#000000;
	text-transform: 					uppercase;
	transition: 						all 0.3s ease-in-out;
	text-align: 						start;
}

.programa nav .nav .btnTabs.active{
	border-radius: 						10px 0px 0px 10px;
	background-color: 					#3752A6;
	margin-right: 						0;
	color: 								#FFFFFF;
}

.programa nav .nav .btnTabs .imageTab{
	height: 							50px;
	max-width:  						50px;
	object-fit: 						contain;
	object-position: 					center center;
	transition: 						all 0.3s ease-in-out;
	margin-right: 						15px;
}

.programa nav .nav .btnTabs .imageTabActive{
	height: 							0;
	object-fit: 						contain;
	object-position: 					center center;
	opacity: 							0;
	visibility: 						hidden;
	transition: 						all 0.3s ease-in-out;
}

.programa nav .nav .btnTabs.active .imageTab{
	height: 							0px;
	opacity: 							0;
	visibility: 						hidden;
	margin-right: 						0;
}

.programa nav .nav .btnTabs.active .imageTabActive{
	height: 							50px;
	opacity: 							1;
	visibility: 						visible;
	margin-right: 						15px;
}

.programa .tab-content{
	flex: 								0 0 75%;
	border-radius: 						10px;
	background: 						#FFFFFF;
	box-shadow: 						5px 4px 50px 0px rgba(91, 119, 220, 0.10);
	padding: 							80px 70px 80px 100px;
}

.programa .tab-content .titleTab{
	color:								rgba(20, 19, 62, 0.80);
	font-family: 						"Noto Sans", sans-serif;
	font-size: 							23px;
	margin-bottom: 						10px;
	font-weight: 						700;
}

.programa .tab-content .descripcion{
	color: 								rgba(20, 19, 62, 0.80);
	font-family: 						"Noto Sans", sans-serif;
	font-size: 							16px;
	margin-bottom: 						30px;
}

.programa .tab-content .detalles{
	display: 							flex;
	flex-flow: 							row nowrap;
	gap: 								20px;
	margin-bottom: 						50px;
}

.programa .tab-content .detalles .infoDetalle{
	flex: 								0 0 calc(100% / 2 - (20px * 1 / 2));
	border-radius: 						10px;
	background: 						#FFFFFF;
	box-shadow: 						5px 4px 50px 0px rgba(91, 119, 220, 0.10);
	padding: 							95px 50px 75px;
	text-align: 						center;
	overflow: 							hidden;
	position: 							relative;
}

.programa .tab-content .detalles .infoDetalle::before{
	content: 							"";
	width: 								150px;
	height: 							25px;
	background-color: 					#2461FE;
	position: 							absolute;
	top: 								30px;
	left: 								-30px;
	transform: 							rotate(-45deg);
}

.programa .tab-content .detalles .infoDetalle .infoImage{
	height: 							130px;
	object-fit: 						contain;
	object-position: 					center center;
	margin-bottom: 						15px;
}

.programa .tab-content .detalles .infoDetalle .infoNivel{
	font-family: 						"Noto Sans", sans-serif;
	font-size: 							23px;
	font-weight: 						800;
	text-transform: 					uppercase;
	letter-spacing: 					2.3px;
	margin-bottom: 						20px;
	background: 						linear-gradient(180deg, #2260FF 0%, #668EF6 100%);
	background-clip:					text;
	-webkit-background-clip: 			text;
	-webkit-text-fill-color: 			transparent;
}

.programa .tab-content .detalles .infoDetalle .textoNegro{
	font-family: 						"Noto Sans", sans-serif;
	font-size: 							25px;
	font-weight: 						700;
	opacity: 							0.8;
	line-height: 						20px;
}

.programa .tab-content .detalles .infoDetalle .textoAzul{
	font-family: 						"Noto Sans", sans-serif;
	font-size: 							16px;
	opacity: 							0.8;
	background: 						linear-gradient(180deg, #2260FF 0%, #668EF6 100%);
	background-clip: 					text;
	-webkit-background-clip: 			text;
	-webkit-text-fill-color: 			transparent;
}

.programa .tab-content .nota{
	width: 								70%;
	color: 								rgba(20, 19, 62, 0.50);
	font-family: 						"Noto Sans", sans-serif;
	font-size: 							14px;
}

.programa .tab-content .detalles2{
	display: 							flex;
	flex-flow: 							row nowrap;
	gap: 								30px;
	margin-bottom: 						50px;
}

.programa .tab-content .detalles2 .infoDetalle{
	flex: 								0 0 calc(100% / 3 - (30px * 2 / 3));
	border-radius: 						10px;
	background: 						#FFFFFF;
	box-shadow: 						5px 4px 50px 0px rgba(91, 119, 220, 0.10);
	padding: 							40px;
	text-align: 						center;
}

.programa .tab-content .detalles2 .infoDetalle .infoImage{
	height: 							70px;
	object-fit: 						contain;
	object-position: 					center center;
	margin-bottom: 						10px;
}

.programa .tab-content .detalles2 .infoDetalle .textoNegro{
	font-family: 						"Noto Sans", sans-serif;
	font-size: 							25px;
	font-weight: 						700;
	opacity: 							0.8;
	line-height: 						20px;
}

.programa .tab-content .detalles2 .infoDetalle .textoAzul{
	font-family: 						"Noto Sans", sans-serif;
	font-size: 							16px;
	opacity: 							0.8;
	background: 						linear-gradient(180deg, #2260FF 0%, #668EF6 100%);
	background-clip: 					text;
	-webkit-background-clip: 			text;
	-webkit-text-fill-color: 			transparent;
}

.programa .tab-content .detalles3{
	display: 							flex;
	flex-flow: 							row nowrap;
	gap: 								10px;
}

.programa .tab-content .detalles3 .infoDetalle{
	flex: 								0 0 calc(100% / 2 - (10px * 1 / 2));
	border-radius: 						10px;
	background: 						#FFFFFF;
	box-shadow: 						5px 4px 50px 0px rgba(91, 119, 220, 0.10);
	padding: 							35px;
	display: 							flex;
	flex-flow: 							row nowrap;
	align-items: 						center;
	gap: 								10px;
}

.programa .tab-content .detalles3 .infoDetalle .infoImage{
	height: 							80px;
	object-fit: 						contain;
	object-position: 					center center;
}

.programa .tab-content .detalles3 .infoDetalle .infoTitle{
	font-family: 						"Noto Sans", sans-serif;
	font-size: 							25px;
	font-weight: 						700;
	opacity: 							0.8;
}

@media (max-width: 991px){
	/* BANNER */
	.banner{
		padding: 						210px 0 215px;
		margin-bottom: 					60px;
	}

	.banner h2{
		text-align: 					center;
		margin-bottom: 					15px;
		font-size: 						32px;
	}

	.banner span{
		font-size: 						16px;
		text-align: 					center;
	}

	.banner .texturaBanner{
		right: 							-35px;
	}

	/* SOFTWARE */
	.programa {
		margin-bottom: 						100px;
	}

	.programa .title{
		font-size: 							32px;
		margin-bottom:						40px;
	}

	.programa .accordion-item{
		border: 							unset;
		margin-bottom: 						20px;
	}

	.programa .accordion-button{
		padding: 							15px 30px;
		border: 							unset;
		border-radius: 						10px;
		background: 						#FFFFFF;
		box-shadow: 						5px 4px 50px 0px rgba(91, 119, 220, 0.10);
		margin-right: 						10px;
		display: 							flex;
		flex-flow: 							row nowrap;
		align-items: 						center;
		color: 								#000000;
		text-transform: 					uppercase;
		transition: 						all 0.3s ease-in-out;
		text-align: 						start;
	}

	.programa .accordion-button::after{
		background-image: 					url("../images/flechaMenuAbajo.svg");
		background-size: 					12px 8px;
		background-position: 				center center;
	}

	.programa .accordion-button:not(.collapsed){
		background-color: 					#3752A6;
		margin-right: 						0;
		color: 								#FFFFFF;
	}

	.programa .accordion-button .imageTab{
		height: 							50px;
		object-fit: 						contain;
		object-position: 					center center;
		transition: 						all 0.3s ease-in-out;
		margin-right: 						15px;
	}

	.programa .accordion-button .imageTabActive{
		height: 							0;
		object-fit: 						contain;
		object-position: 					center center;
		opacity: 							0;
		visibility: 						hidden;
		transition: 						all 0.3s ease-in-out;
	}

	.programa .accordion-button:not(.collapsed) .imageTab{
		height: 							0px;
		opacity: 							0;
		visibility: 						hidden;
		margin-right: 						0;
	}

	.programa .accordion-button:not(.collapsed) .imageTabActive{
		height: 							50px;
		opacity: 							1;
		visibility: 						visible;
		margin-right: 						15px;
	}

	.programa .accordion-body{
		padding: 							20px 0 30px;
		border: 							unset;
	}

	.programa .accordion-body .titleTab{
		width: 								83.33%;
		color:								rgba(20, 19, 62, 0.80);
		font-family: 						"Noto Sans", sans-serif;
		font-size: 							16px;
		margin-bottom: 						10px;
		font-weight: 						700;
		margin: 							0 auto;
	}

	.programa .accordion-body .descripcion{
		width: 								83.33%;
		color: 								rgba(20, 19, 62, 0.80);
		font-family: 						"Noto Sans", sans-serif;
		font-size: 							14px;
		margin: 							0 auto 30px;
	}

	.programa .accordion-body .detalles{
		display: 							flex;
		flex-flow: 							row nowrap;
		gap: 								5px;
		margin-bottom: 						30px;
	}

	.programa .accordion-body .detalles .infoDetalle{
		flex: 								0 0 calc(100% / 2 - (5px * 1 / 2));
		border-radius: 						10px;
		background: 						#FFFFFF;
		box-shadow: 						5px 4px 50px 0px rgba(91, 119, 220, 0.10);
		padding: 							30px 25px;
		text-align: 						center;
		overflow: 							hidden;
		position: 							relative;
	}

	.programa .accordion-body .detalles .infoDetalle::before{
		content: 							"";
		width: 								130px;
		height: 							20px;
		background-color: 					#2461FE;
		position: 							absolute;
		top: 								30px;
		left: 								-50px;
		transform: 							rotate(-45deg);
	}

	.programa .accordion-body .detalles .infoDetalle .infoImage{
		height: 							60px;
		object-fit: 						contain;
		object-position: 					center center;
		margin-bottom: 						5px;
	}

	.programa .accordion-body .detalles .infoDetalle .infoNivel{
		font-family: 						"Noto Sans", sans-serif;
		font-size: 							16px;
		font-weight: 						800;
		text-transform: 					uppercase;
		letter-spacing: 					1.6px;
		margin-bottom: 						10px;
		background: 						linear-gradient(180deg, #2260FF 0%, #668EF6 100%);
		background-clip:					text;
		-webkit-background-clip: 			text;
		-webkit-text-fill-color: 			transparent;
	}

	.programa .accordion-body .detalles .infoDetalle .textoNegro{
		font-family: 						"Noto Sans", sans-serif;
		font-size: 							20px;
		font-weight: 						700;
		opacity: 							0.8;
		line-height: 						normal;
	}

	.programa .accordion-body .detalles .infoDetalle .textoAzul{
		font-family: 						"Noto Sans", sans-serif;
		font-size: 							12px;
		opacity: 							0.8;
		background: 						linear-gradient(180deg, #2260FF 0%, #668EF6 100%);
		background-clip: 					text;
		-webkit-background-clip: 			text;
		-webkit-text-fill-color: 			transparent;
	}

	.programa .accordion-body .nota{
		width: 								83.33%;
		color: 								rgba(20, 19, 62, 0.50);
		font-family: 						"Noto Sans", sans-serif;
		font-size: 							12px;
		margin: 							0 auto;
	}

	.programa .accordion-body .detalles2{
		display: 							flex;
		flex-flow: 							row nowrap;
		gap: 								10px;
		margin-bottom: 						30px;
		overflow-x: 						auto;
		padding: 							10px 5px;
	}

	.programa .accordion-body .detalles2 .infoDetalle{
		flex: 								0 0 calc(100% / 3 - (10px * 2 / 3));
		border-radius: 						10px;
		background: 						#FFFFFF;
		box-shadow: 						5px 4px 50px 0px rgba(91, 119, 220, 0.10);
		padding: 							35px 30px;
		text-align: 						center;
	}

	.programa .accordion-body .detalles2 .infoDetalle .infoImage{
		height: 							50px;
		object-fit: 						contain;
		object-position: 					center center;
		margin-bottom: 						5px;
	}

	.programa .accordion-body .detalles2 .infoDetalle .textoNegro{
		font-family: 						"Noto Sans", sans-serif;
		font-size: 							18px;
		font-weight: 						700;
		opacity: 							0.8;
		line-height: 						normal;
	}

	.programa .accordion-body .detalles2 .infoDetalle .textoAzul{
		font-family: 						"Noto Sans", sans-serif;
		font-size: 							12px;
		opacity: 							0.8;
		background: 						linear-gradient(180deg, #2260FF 0%, #668EF6 100%);
		background-clip: 					text;
		-webkit-background-clip: 			text;
		-webkit-text-fill-color: 			transparent;
	}

	.programa .accordion-body .detalles3{
		display: 							flex;
		flex-flow: 							row nowrap;
		gap: 								5px;
	}

	.programa .accordion-body .detalles3 .infoDetalle{
		flex: 								0 0 calc(100% / 2 - (5px * 1 / 2));
		border-radius: 						10px;
		background: 						#FFFFFF;
		box-shadow: 						5px 4px 50px 0px rgba(91, 119, 220, 0.10);
		padding: 							30px;
		display: 							flex;
		flex-flow: 							column nowrap;
		align-items: 						center;
		justify-content: 					center;
		gap: 								10px;
	}

	.programa .accordion-body .detalles3 .infoDetalle .infoImage{
		height: 							60px;
		object-fit: 						contain;
		object-position: 					center center;
	}

	.programa .accordion-body .detalles3 .infoDetalle .infoTitle{
		font-family: 						"Noto Sans", sans-serif;
		font-size: 							18px;
		font-weight: 						700;
		opacity: 							0.8;
		text-align: 						center;
	}
}