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

.banner h2{
	text-transform: 				uppercase;
}

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

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

.productos .filtros{
	display: 						flex;
	flex-flow: 						row nowrap;
	align-items: 					center;
	gap: 							30px;
}

.productos .filtros > a{
	position: 						relative;
	font-size: 						16px;
	color: 							var(--secondary);
	display: 						flex;
	align-items: 					center;
	gap: 							10px;
	border-bottom: 					2px solid transparent;
	transition: 					all 0.3s ease-in-out;
}

.productos .filtros > a:hover{
	opacity: 						0.8;
	border-bottom: 					2px solid var(--secondary);
}

.productos .filtros > a::after{
	content: 						"";
	width: 							15px;
	height: 						15px;
	background: 					url("../images/closeIcon.svg") center center no-repeat;
	background-size: 				15px;
}

.productos .dropdown-toggle{
	width: 							100%;
	border: 						unset;
	background-color: 				transparent;
	padding: 						0 0 5px;
	border-bottom: 					1px solid rgba(20, 19, 62, 0.15);
	display: 						flex;
	align-items: 					center;
	justify-content: 				space-between;
	margin-bottom: 					50px;
}

.productos .dropdown-toggle::after{
	border: 						unset;
	width: 							12px;
	height: 						7px;
	background: 					url("../images/flechaMenuAbajo.svg") center center no-repeat;
	background-size: 				12px 7px;
	transition: 					all 0.3s ease-in-out;
}

.productos .dropdown-toggle.show::after{
	transform: 						rotate(180deg);
}

.productos .dropdown-menu{
	width: 							110%;
	border: 						unset;
	border-radius: 					10px;
	background: 					#FFFFFF;
	box-shadow: 					5px 4px 50px 0px rgba(91, 119, 220, 0.10);
	padding: 						25px 0;
	transform: 						translate(-10px, 35px) !important;
}

.productos .dropdown-menu > li > a{
	padding: 						2.5px 30px;
	font-family: 					'Noto Sans', sans-serif;
	opacity: 						0.8;
	cursor: 						pointer;
	transition: 					all 0.3s ease-in-out;
}

.productos .dropdown-menu > li > a:hover,
.productos .dropdown-menu > li > a.active{
	font-weight: 					700;
	background-color: 				rgba(102, 142, 246, 0.5);
}

.productos .tituloCategoria{
	text-transform: 				uppercase;
	padding: 						20px 30px;
	border-radius: 					10px;
	margin-bottom: 					10px;
}

.productos .tituloCategoria.active{
	background: 					var(--secondary);
	box-shadow: 					5px 4px 50px 0px rgba(0, 0, 0, 0.10);
	color: 							#FFFFFF;
}

.productos .iconoCategoria{
	width: 							30px;
	height: 						30px;
	object-fit: 					contain;
	object-position: 				center center;
	margin-right: 					15px;
}

.productos ul{
	padding: 						0;
	margin: 						0;
}

.productos ul li{
	list-style: 					none;
	position: 						relative;
	cursor: 						pointer;
}

.productos ul li::after{
	content: 						"";
	width: 							12px;
	height: 						7px;
	background: 					url("../images/flechaMenuAbajo.svg") center center no-repeat;
	background-size: 				12px 7px;
	position: 						absolute;
	top: 							0;
	bottom: 						0;
	right: 							15px;
	margin: 						auto 0;
	transform: 						rotate(-90deg);
	transition: 					all 0.3s ease-in-out;
}

.productos .menuNivel1,
.productos .menuNivel2 {
	max-height: 					0;
	opacity: 						0;
	visibility: 					hidden;
	transition: 					all 0.3s ease-in-out;
}

.productos .menuNivel1.show,
.productos .menuNivel2.show {
	max-height: 					100000px;
	opacity: 						1;
	visibility: 					visible;
}

.productos ul .menuCategorias1.active::after,
.productos ul .menuCategorias2.active::after{
	transform: 						rotate(180deg);
}

.productos ul .menuCategorias1::after,
.productos ul .menuCategorias2::after{
	transform: 						rotate(0deg);
}

.productos .categoria,
.productos .categoria2,
.productos .categoria3{
	display: block;
	width: 							fit-content;
	font-family: 					'Noto Sans', sans-serif;
	padding: 						0 0 0 30px;
	opacity: 						0.8;
	margin-bottom: 					10px;
	cursor: 						pointer;
	position: 						relative;
}

.productos .categoria:hover, .productos .categoria2:hover, .productos .categoria3:hover,
.productos .categoria.active, .productos .categoria2.active, .productos .categoria3.active{
	font-weight: 					700;
}

.productos .categoria2{
	padding-left: 					60px;
}

.productos .categoria3{
	padding-left: 					90px;
}

.productos .productosWrapper{
	display: 						flex;
	flex-flow: 						row wrap;
	column-gap: 					10px;
	row-gap: 						50px;
}

.productos .productosInfo{
	flex: 							0 0 calc(100% / 3 - (10px * 2 / 3));
}

.productos .imageContainer{
	width: 							100%;
	height: 						380px;
	display: 						flex;
	align-items: 					center;
	justify-content: 				center;
	margin-bottom: 					20px;
}

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

.productos .titulo{
	font-weight: 					700;
}

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

@media (max-width: 991px){
	/* BANNER */
	.banner{
		margin-top: 					30px;
		margin-bottom: 					35px;
	}

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

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

	.productos .filtros{
		flex-flow: 						column nowrap;
		gap: 							10px;
		margin-bottom: 					20px;
	}

	.productos .filtros > a{
		font-size: 						14px;
		gap: 							5px;
	}

	.productos .catMobile .dropdown-toggle{
		width: 							100%;
		border: 						unset;
		background-color: 				var(--secondary);
		padding: 						20px 10px 20px 20px;
		display: 						flex;
		align-items: 					center;
		justify-content: 				unset;
		margin-bottom: 					30px;
		border-radius: 					10px;
		color: 							#FFFFFF;
	}

	.productos .catMobile .dropdown-toggle::after{
		border: 						unset;
		width: 							12px;
		height: 						12px;
		background: 					url("../images/flechaMenuAbajoBlanca.svg") center center no-repeat;
		background-size: 				12px 12px;
		transition: 					all 0.3s ease-in-out;
		margin-left: 					auto;
	}

	.productos .catMobile .dropdown-toggle.show::after{
		transform: 						rotate(180deg);
	}

	.productos .catMobile .dropdown-menu{
		width: 							210%;
		border: 						unset;
		border-radius: 					10px;
		background: 					#FFFFFF;
		box-shadow: 					5px 4px 50px 0px rgba(91, 119, 220, 0.10);
		padding: 						25px 0;
		transform: 						translate(0, 70px) !important;
	}

	.productos .catMobile .dropdown-menu > li > a{
		padding: 						2.5px 30px;
		font-family: 					'Noto Sans', sans-serif;
		opacity: 						0.8;
		cursor: 						pointer;
		transition: 					all 0.3s ease-in-out;
	}

	.productos .iconoCategoria{
		width: 							18px;
		height: 						18px;
		object-fit: 					contain;
		object-position: 				center center;
		margin-right: 					10px;
	}

	.productos .productosWrapper{
		column-gap: 					20px;
		row-gap: 						85px;
	}

	.productos .productosInfo{
		flex: 							0 0 calc(100% / 2 - (20px * 1 / 2));
	}

	.productos .imageContainer{
		height: 						200px;
		margin-bottom: 					10px;
	}

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

	.productos .marca{
		font-size: 						12px;
	}
}

@media (max-width: 1199px) and (min-width: 992px){
	.productos ul li::after{
		right: 							0;
	}
}