header {
	max-width: 1280px;
	height: 133px;
	margin: auto;
}

.MENU-moviles {
	display: none;
}

.MENU-logo-div {
	display: none;
}

.NAV {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 40px;
	position: relative;
	z-index: 10;
}

.NAV-boton,
.NAV-submenu-boton {
	color: #fff;
	line-height: 35px;
	position: relative;
	display: block;
	text-align: center;
}

.NAV-boton:hover {
	text-decoration: underline;
}

.NAV-boton:first-child {
	border: 1px solid var(--a);
	border-radius: 18px;
	padding: 0 20px;
	position: relative;
	background: var(--p);
	z-index: 6;
}

.NAV-boton:first-child:hover {
	background: #fff;
	color: var(--p);
	text-decoration: none;
}

.NAV-boton:last-child {
	color: var(--p);
	text-decoration: none;
	padding: 0 20px;
}

.NAV-submenu-cont {
	position: relative;
}

.NAV-submenu-boton:hover {
	background: #fff;
	color: var(--p);
}

.NAV-submenu-boton {
	position: absolute;
	width: 100%;
	border-radius: 0 0 10px 10px;
	box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
	border-bottom: 1px solid var(--p);
}

.SUB-residual {
	background: var(--s);
	height: 55px;
	line-height: 70px;
	top: 23px;
	z-index: 4;
	transition: all ease 0.3s;
}

.SUB-industrial {
	background: var(--s);
	height: 50px;
	top: 68px;
	line-height: 60px;
	z-index: 3;
	transition: all ease 0.3s;
}

.SUB-compacta {
	background: var(--s);
	height: 50px;
	line-height: 60px;
	top: 108px;
	z-index: 2;
	transition: all ease 0.3s;
}

.SUB-moviles {
	background: var(--s);
	height: 50px;
	line-height: 60px;
	top: 148px;
	transition: all ease 0.3s;
}

.active {
	width: 100%;
	position: absolute;
	box-shadow: none;
	border-bottom: none;
	line-height: 50px;
	top: 0px;
	z-index: 0;
	overflow: hidden;
	text-align: center;
	height: 50px;
	transition: all ease 0.3s;
}

.NAV-submenu {
	height: 0;
	overflow: hidden;
	transition: all ease 0.3s;
}

.NAV-sub-menu-boton:hover + .NAV-submenu,
.NAV-submenu:hover  {
	overflow: visible;
	height: 200px;
	transition: all ease 0.3s;
}

.BANNER {
	display: flex;
	flex-direction: column;
	justify-content:space-between;
	position: relative;
	padding: 20px 25px 15px 30px;
}

.BANNER-top {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	/* align-items: center; */
}

.BANNER-logo {
	position: relative;
	width: 175px;
}

.BANNER-fondo-div {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	max-width: 100vw;
	overflow: hidden;
}

.FOOTER {
	background: var(--p);
	border-top: 2px solid var(--s)
}

.FOOTER-wrapper {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	max-width: 1280px;
	position: relative;
	height: 50px;
	margin: auto;
	padding: 10px;
}

.DERECHOS {
	font-size: 12px;
	color: #fff;
}

.SOCIAL-cont {
	display: flex;
	flex-direction: row;
	gap: 20px;
	top: 10px;
	right: 10px;
}

.ico-instagram,
.ico-facebook,
.ico-twitter,
.ico-sitemap {
	width: 24px;
	fill: #fff;
	opacity: 0.5;
}

.ico-instagram:hover,
.ico-facebook:hover,
.ico-twitter:hover,
.ico-sitemap:hover {
	width: 24px;
	fill: #fff;
	opacity: 1;
}

/* =================================================*/
/* ============ SUB-MENU DESKTOP HOVER =============*/
/* =================================================*/

@media screen and (min-width: 1116px) and (hover: hover) {
	.NAV-submenu-cont:hover #residuales {
		background: var(--s);
		height: 55px;
		line-height: 70px;
		top: 23px;
		z-index: 4;
	}

	.NAV-submenu-cont:hover #industriales {
		background: var(--s);
		height: 50px;
		top: 68px;
		line-height: 60px;
		z-index: 3;
	}

	.NAV-submenu-cont:hover #compacta {
		background: var(--s);
		height: 50px;
		line-height: 60px;
		top: 108px;
		z-index: 2;
	}

	.NAV-submenu-cont:hover #moviles {
		background: var(--s);
		height: 50px;
		line-height: 60px;
		top: 148px;
	}
}

/* =================================================*/
/* ================ RESPONSIVE =====================*/
/* =================================================*/



@media screen and (max-width: 1280px) { 

	.MAIN {
		padding: 0 20px;
	}
}

@media screen and (max-width: 1116px) { 
	
	.MENU-moviles {
		display: flex;
		align-items: center;
		gap: 30px;
	}
	
	.MENU-ico {
		position: relative;
		font-size: 40px;
		color: #fff;
		z-index: 30;
	}

	#contador-txt {
		color: #fff;
		position: relative;
		z-index: 30;
	}

	.MENU-logo-div {
		width: 100%;
		display: block;
		background: var(--p);
		padding: 40px 40px 0 40px;
	}

	.MENU-logo {
		margin: auto;
	}

	.NAV-boton:first-child {
		border: none;
		border-radius: 0;
		padding: 0;
		background: none;
	}
	
	.NAV {
		position: fixed;
		left: -260px;
		top: 0;
		flex-direction: column;
		gap: 0;
		z-index: 20;
		background: var(--p);
		width: 250px;
		height: 100vh;
		box-shadow: 5px 0 8px var(--somb);
		transition: ease all 0.3s;
	}

	.black {
		display: none;
		backdrop-filter: blur(0px);
		width: 100vw;
		height: 100vh;
		position: fixed;
		transition: ease all 0.3s;
		z-index: 0;
	}

	.black-active {
		display: block;
		backdrop-filter: blur(10px);
		z-index: 5;
		background: var(--somb);
		transition: ease all 0.3s;
	}

	.NAV-active {
		left: 0px;
		transition: ease all 0.3s;
	}

	.NAV-boton,
	.NAV-submenu-boton,
	.NAV-boton:first-child,
	.NAV-boton:last-child {
		background: var(--pl);
		color: #fff;
		line-height: 50px;
		position: relative;
		display: block;
		text-align: center;
		border-radius: 0;
		border-bottom: 1px solid var(--p);
	}

	.NAV-boton:hover,
	.NAV-submenu-boton:hover,
	.NAV-boton:first-child:hover,
	.NAV-boton:last-child:hover {
		background: var(--p);
		color: #fff;
		text-decoration: none;
	}

	.NAV-submenu-boton {
		background: #2690c9;
	}

	.active,
	.NAV-boton {
		position: relative;
		width: 100%;
		line-height: 50px;
		overflow: hidden;
		text-align: center;
		height: 50px;
		transition: all ease 0.3s;
	}

	.BANNER-top {
		align-items: flex-start;
	}

	.BANNER {
		min-height: unset;
	}

	.BANNER-cont-fondo {
		position: absolute;
		top: -50px;
	}

	.BANNER-subtitulo {
		font-size: 24px;
	}

	.BANNER-h1 {
		font-size: 42px;
		line-height: 45px;
	}

	.BANNER-cont-img {
		width: 400px;
		padding-right: 0;
	}

	.BANNER-img {
		width: 100%;
	}
}

@media screen and (max-width: 640px) { 

	.BANNER-grid {
		grid-template-columns: 45% 55%;
		gap: 0;
	}

	.BANNER-cont-img {
		width: 100%;
	}

	.BANNER-h1 {
		font-size: 36px;
		line-height: 38px;
	}

	.BANNER-leyenda {
		right: 20px;
	}

	.BANNER-subtitulo {
		font-size: 20px;
	}

	.BANNER-cont-fondo {
		position: absolute;
		top: -120px;
	}
}

@media screen and (max-width: 480px) { 

	.MAIN {
		padding: 0 15px;
	}

	.BANNER {
		padding: 15px;
	}

	.BANNER-grid {
		display: block;
	}

	.BANNER-subtitulo {
		margin-top: 20px;
	}

	.BANNER-h1 {
		font-size: 30px;
		line-height: 32px;
	}

	.BANNER-cta {
		width: 120px;
		height: 40px;
		font-size: 16px;
	}

	.BANNER-cont-img {
		width: 250px;
		padding-right: 0;
		position: absolute;
		right: 0;
		bottom: -80px;
	}

	.BANNER-leyenda {
		display: none;
	}
}

@media screen and (max-width: 375px) { 

	.BANNER-h1 {
		font-size: 26px;
		line-height: 29px;
	}

	.BANNER-cont-img {
		width: 200px;
		bottom: -60px;
	}
}