/* Banner */
.banner{
	margin-top: 						-64px;
	margin-bottom: 						125px;
}

.banner .bannerContainer{
	position: 							relative;
	height: 							810px;
	background-size: 					cover !important;
	background-blend-mode: 				color, multiply, multiply, multiply, normal;
}

.banner h3{
	color: 								#D1D1D1;
	position: 							relative;
	z-index: 							9;
}

.banner h1{
	color: 								#FFFFFF;
	text-transform: 					uppercase;
	margin-bottom: 						35px;
	position: 							relative;
	z-index: 							9;
}

.banner a{
	position: 							relative;
	width: 								fit-content;
	height: 							fit-content;
	color: 								#FFFFFF;
	background-color: 					transparent;
	font-size: 							23px;
	font-weight: 						500;
	border-radius: 						30px;
	border: 							2px solid #FFFFFF;
	padding: 							10px 75px;
	text-align: 						center;
	transition: 						all 1s ease-in-out;
}

.banner a:hover{
	box-shadow: 						inset 0px 0px 0 50px #FFFFFF;
	color: 								var(--primary);
}

.banner a::after{
	content: 							"";
	width: 								15px;
	height: 							15px;
	background: 						url("../images/flechaDerechaBlanca.svg") center center no-repeat;
	background-size: 					15px;
	position: 							absolute;
	top: 								0;
	bottom: 							0;
	margin: 							auto 0;
	right: 								20px;
	transition: 						all 1s ease-in-out;
}

.banner a:hover::after{
	background: 						url("../images/flechaDerechaAzul.svg") center center no-repeat;
	background-size: 					15px;
}

.banner .texturaBanner{
	height: 							100%;
	object-fit: 						cover;
	object-position: 					center center;
	position: 							absolute;
	top: 								0;
	right: 								0;
	mix-blend-mode: 					overlay;
}

.banner .slick-prev,
.banner .slick-next{
	position: 							absolute;
	top: 								0;
	bottom: 							-45%;
	margin: 							auto 0;
	left: 								15.5%;
}

.banner .slick-prev{
	border: 							2px solid #FFFFFF;
}

.banner .slick-next{
	left: 								18.5%;
	background-color: 					#FFFFFF;
}

.banner .slick-prev::before{
	background: 						url("../images/flechaDerechaBlanca.svg") center center no-repeat;
	background-size: 					13px 13px;
}

.banner .slick-next::after{
	background: 						url("../images/flechaDerechaAzul.svg") center center no-repeat;
	background-size: 					13px 13px;
}

/* LIDERES */
.lideres{
	margin-bottom: 						155px;
}

.lideres .titulo{
	text-transform: 					uppercase;
	text-align: 						center;
	margin-bottom: 						5px;
}

.lideres .descripcion{
	font-family: 						'Noto Sans' , sans-serif;
	text-align: 						center;
	font-weight: 						500;
}

.lideres .caracteristicas{
	border-radius: 						10px;
	background: 						#FFFFFF;
	box-shadow: 						5px 4px 50px 0px rgba(91, 119, 220, 0.10);
	padding: 							60px 25px;
	text-align: 						center;
	margin-top: 						65px;
}

.lideres .caracteristicas > img{
	width: 								40px;
	height: 							40px;
	object-fit: 						contain;
	object-position: 					center center;
	margin-bottom: 						15px;
}

.lideres .caracteristicas > p{
	font-weight: 						500;
}

.lideres .caracteristicas > span{
	font-family: 						'Noto Sans', sans-serif;
}

/* PRODUCTOS DESTACADOS */
.productos{
	margin-bottom: 						205px;
}

.productos .titulo{
	text-transform: 					uppercase;
}

.productos .descripcion{
	font-family: 						'Noto Sans', sans-serif;
	margin-bottom: 						50px;
}

.productos .slick-slide{
	margin:  							0 10px;
}

.productos .imagen{
	height: 							380px;
	margin-bottom: 						20px;
	display: 							flex;
	flex-flow: 							row nowrap;
	align-items: 						center;
	justify-content: 					center;
}

.productos .imagen > img{
	width: 								100%;
	height: 							100%;
	object-fit: 						contain;
	object-position: 					center center;
}

.productos .tituloProducto{
	font-family: 						'Noto Sans', sans-serif;
	font-weight: 						700;
	color: 								var(--primary);
}

.productos .descripcionProducto{
	font-family: 						'Noto Sans', sans-serif;
	font-weight: 						700;
	color: 								var(--secondary);
}

.productos .slick-prev,
.productos .slick-next{
	position: 							absolute;
	top: 								0;
	bottom: 							0;
	margin: 							auto 0;
	right: 								1%;
}

.productos .slick-next{
	right: 								-3.3%;
}

/* DISTRIBUIDORES */
.distribuidores{
	margin-bottom: 						145px;
}

.distribuidores h2{
	text-align: 						center;
	text-transform: 					uppercase;
	margin-bottom: 						50px;
}

.distribuidores img{
	width: 								100%;
	height: 							85px;
	object-fit: 						contain;
	object-position:  					center center;
	margin-bottom: 						20px;
	filter: 							grayscale(100%);
	transition: 						all 0.3s ease-in-out;
}

.distribuidores img:hover{
	filter: 							grayscale(0);
}

@media (max-width: 991px){
	/* Banner */
	.banner{
		margin-top: 						0;
		margin-bottom: 						120px;
	}

	.banner .bannerContainer{
		height: 							360px;
	}

	.banner h3{
		text-align: 						center;
	}

	.banner h1{
		text-align: 						center;
		margin-bottom: 						15px;
	}

	.banner a{
		font-size: 							12px;
		padding: 							10px 30px 10px 25px;
		margin: 							0 auto;
		z-index: 							9;
	}

	.banner a::after{
		width: 								10px;
		height: 							10px;
		background-size: 					10px;
		right: 								10px;
	}

	.banner .texturaBanner{
		width:	 							100%;
	}

	.banner .slick-prev,
	.banner .slick-next{
		position: 							absolute;
		top: 								0;
		bottom: 							-70%;
		margin: 							auto;
		left: 								0;
		right: 								0;
	}

	.banner .slick-prev{
		left: 								-10%;
	}

	.banner .slick-next{
		right: 								-10%;
	}

	.banner .slick-prev::before{
		background-size: 					8px 8px;
	}

	.banner .slick-next::after{
		background-size: 					8px 8px;
	}

	/* LIDERES */
	.lideres{
		margin-bottom: 						120px;
	}

	.lideres .sistemas{
		flex-flow: 							row nowrap;
		overflow-x: 						auto;
		gap: 								20px;
		padding: 							25px 8.33%;

		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;
	}

	.lideres .sistemas > div{
		z-index: 							-1;
	}

	.lideres .caracteristicas{
		padding: 							60px 25px;
		margin-top: 						0;
	}

	/* PRODUCTOS DESTACADOS */
	.productos{
		margin-bottom: 						65px;
	}

	.productos .titulo{
		font-size: 							18px;
	}

	.productos .imagen{
		height: 							265px;
	}

	.productos .slick-prev,
	.productos .slick-next{
		top: 								-80px;
		bottom: 							unset;
		margin: 							unset;
		right: 								3%;

	}

	.productos .slick-prev{
		right: 								13%;
	}

	/* DISTRIBUIDORES */
	.distribuidores{
		margin-bottom: 						80px;
	}

	.distribuidores h2{
		margin-bottom: 						30px;
	}

	.distribuidores .marcas{
		position: 							relative;
		height: 							300px;
		flex-flow: 							column wrap;
		overflow-x: 						auto;
		padding: 							0 8.33%;

		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;
	}

	.distribuidores img{
		position: 							relative;
		height: 							85px;
		margin-bottom: 						15px;
		z-index: 							-1;
	}
}

@media (max-width: 1399px) and (min-width: 992px){
	.banner .slick-prev,
	.banner .slick-next{
		bottom: 							-50%;
		left: 								14.5%;
	}

	.banner .slick-next{
		left: 								19.5%;
	}
}