/* TEXTURA */
.texturaSistemas{
	object-fit: 						contain;
	object-position: 					center center;
	position: 							absolute;
	top: 								0;
	right: 								0;
	z-index: 							-1;
}

/* BANNER */
.banner{
	margin-top: 						100px;
	margin-bottom: 						100px;
}

.banner h2{
	text-transform: 					uppercase;
}

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

/* PROGRAMAS */
.programas{
	margin-bottom: 						200px;
}

.programas .tabs{
	display: 							flex;
	flex-flow: 							row nowrap;
	gap: 								10px;
	justify-content: 					space-between;
}

.programas .tabs nav{
	flex: 								0 0 calc(23% - 5px);
	z-index: 							0;
}

.programas .tabs nav .nav{
	width: 								100%;
	display: 							flex;
	flex-flow: 							column nowrap;
	gap: 								15px;
}

.programas .tabs nav .nav .btnTabs{
	border: 							unset;
	background-color: 					transparent;
	padding: 							20px 30px;
	border-radius: 						10px;
	font-size: 							16px;
	font-weight: 						700;
	text-transform: 					uppercase;
	text-align: 						start;
	display: 							flex;
	align-items: 						center;
	box-shadow: 						5px 4px 50px 0px rgba(91, 119, 220, 0.10);
}

.programas .tabs nav .nav .btnTabs.active{
	width: 								105%;
	background-color: 					var(--secondary);
	color: 								#FFFFFF;
}


.programas .tabs nav .nav .btnTabs > img{
	height: 							50px;
	object-fit: 						contain;
	object-position: 					center center;
	margin-right: 						20px;
	transition: 						all 0.3s ease-in-out;
}

.programas .tabs nav .nav .btnTabs.active img:first-of-type{
	opacity: 							0;
	visibility: 						hidden;
	max-width: 							0;
	margin-right: 						0;
}

.programas .tabs nav .nav .btnTabs.active img:last-of-type{
	opacity: 							1;
	visibility: 						visible;
	max-width: 							unset;
	margin-right: 						20px;
}

.programas .tabs nav .nav .btnTabs img:last-of-type{
	opacity: 							0;
	visibility: 						hidden;
	max-width: 							0;
	margin-right: 						0;
}

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

.programas .tab-content span{
	font-weight: 						500;
	margin-bottom: 						5px;
}

.programas .tab-content ul{
	padding-left: 						25px;
	margin-bottom: 						85px;
}

.programas .tab-content ul:last-of-type{
	margin-bottom: 						0;
}

.programas .tab-content ul > li{
	font-family: 						'Noto Sans', sans-serif;
	opacity: 							0.8;
	margin-bottom: 						10px;
}

.programas .tab-content ul > li::marker{
	font-size: 							10px;
}

@media (max-width: 991px){
	/* TEXTURA */
	.texturaSistemas{
		width: 								100%;
	}

	/* BANNER */
	.banner{
		margin-top: 						30px;
		margin-bottom: 						95px;
	}

	.banner h2{
		font-size: 							28px;
		margin-bottom: 						10px;
	}

	/* PROGRAMAS */
	.programas{
		margin-bottom: 						150px;
	}

	.programas .tabs{
		display: 							flex;
		flex-flow: 							column nowrap;
		gap: 								40px;
	}

	.programas .tabs nav{
		flex: 								1 0 0;
	}

	.programas .tabs nav .nav{
		flex-flow: 							row nowrap;
		gap: 								20px;
		overflow-x: 						auto;
		padding: 							10px 0;
		background-image: 					linear-gradient(to right, #fff, #fff), linear-gradient(to left, #fff, #fff), linear-gradient(to right, rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0)), linear-gradient(to left, rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0));
		background-position: 				left center, right center, left center, right center;
		background-repeat: 					no-repeat;
		background-size: 					40px 100%, 40px 100%, 40px 100%, 40px 100%;
		background-attachment: 				local, local, scroll, scroll;
	}

	.programas .tabs nav .nav .btnTabs{
		padding: 							10px;
		border-radius: 						5px;
		font-size: 							12px;
		flex-shrink: 						0;
	}


	.programas .tabs nav .nav .btnTabs > img{
		width: 								22px;
		height: 							22px;
	}

	.programas .tab-content{
		flex: 								1 0 0;
		border-radius: 						0;
		background: 						unset;
		box-shadow: 						unset;
		padding: 							0 18px;
	}

	.programas .tab-content span{
		font-size: 							16px;
		margin-bottom: 						10px;
	}

	.programas .tab-content ul{
		padding-left: 						20px;
		margin-bottom: 						20px;
	}

	.programas .tab-content ul > li{
		font-size: 							12px;
	}
}