@media only screen and (max-width:1600px){
	
	#header nav {
		flex-direction: column;
		gap: 10px;
	}

	#header nav > div:first-child{
		margin-right: 0;
	}

	#header nav > div:first-child::after{
		display: none;
	}

	#header #locator{
		margin-left: auto;
	}

 	#header .panel{
 		padding-left: 50px;
 	}

	footer .block-1{
		padding: var(--space-30);
		justify-content: start
	}


}

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

	:root {
		--space-200: 50px;
		--space-150: 90px;
		--space-100: 60px;
		--space-90: 50px;
		--space-80: 40px;
		--space-70: 30px;
		--space-60: 30px;
		--space-30: 30px;
	}
	
	.block-1,
	.block-2,
	.block-3 {
		padding-inline: var(--space-30);
	}

	.w-30,
	.w-40,
	.w-50,
	.w-60 {
		width: 50%;
	}

	.home #hero #price-bar {
		height: auto;
	}

	.home #hero #price-bar .panel {
		position: relative;
		width: 50%;
		left: -50px;
		padding-left: 100px;
		padding-right: 0;
	}

	.home #hero #price-bar .swiper {
		padding-left: 80px;
		margin-left: -100px;
	}

	.home #hero #price-bar .swiper-slide {
		flex-direction: column;
		align-items: start;
		padding: 20px;
		gap: 15px;
	}

	.home #hero #price-bar .swiper-slide div,
	.home #hero #price-bar .swiper-slide p {
		justify-content: center;
	}

	footer .block-1 {
		gap: 20px;
	}

}

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

	#header{
		height: fit-content;
	}

	#header > div:first-child {
		padding-top: 10px;
		padding-bottom: 10px;
		padding-left: 15px;
		padding-right: 15px;
		justify-content: center;
	}

	#locator{
		display: none;
	}
	
	#header .block-1 {
		padding-block: 15px;
	}

	#header #logo {
		width: 120px;
		margin-right: 0;
	}

	#header nav > div:first-child {
		margin-bottom: 28px;
	}
		
	#header nav > div:first-child::after {
		width: 100px;
		height: 1px;
		transform: none;
		position: relative;
		display: flex;
		right: 0;
		top: 0;
	}

	#header nav {
		width: 100%;
		height: calc(100% - 118px);
		opacity: 0;
		pointer-events: none;
		background-color: #fff;
		transition: all 320ms ease;
		flex-direction: column;
		position: fixed;
		top: 118px;
		left: 100%;
	}

	#header nav.active {
		opacity: 1;
		pointer-events: all;
		left: 0;
	}

	#header nav a {
		font-size: 18px;
	}

	#header nav div {
		width: 100%;
		flex-direction: column;
	}

	#header .panel {
		display: none;
	}
	
	#header #mobile {
		display: flex;
		margin-left: auto;
	}

	#header #mobile-locator {
		display: flex;
	}

	#header #mobile-locator i {
		width: 20px;
		height: 26px;
		background-image: url('../images/location.svg');
		background-size: cover;
		transform: translateY(1px);
	}

	.block-2.grid-cols-4{
		grid-template-columns: repeat(2, 1fr);
	}

}

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

	:root {

		--size-900: 46px;
		--size-800: 34px;
		--size-700: 28px;
		--size-600: 26px;
		--size-500: 22px;
		--size-400: 16px;

		--space-200: 50px;
		--space-150: 40px;
		--space-120: 40px;
		--space-100: 40px;
		--space-70: 30px;

	}

	.w-10,
	.w-20,
	.w-30,
	.w-33,
	.w-40,
	.w-45,
	.w-50,
	.w-55,
	.w-60,
	.w-66,
	.w-70,
	.w-80 {
		width: 100%;
	}

	.block-1,
	.block-2,
	.block-3,
	.block-4 {
		padding-inline: var(--space-20);
		flex-direction: column;
	}

	hr.puntos {
		margin: 25px 0;
	}

	.estacion section .block-1.flex,
	.estacion section .block-3.flex{
		flex-direction: column;
	}

	#navigation .listStation {
		max-width: none;
	}

	.home #hero > div:first-child {
		padding: 20px;
	}

	.home #hero figure img {
		filter: brightness(0.5);
	}

	.home #hero p {
		width: 100%;
		float: left;
	}

	.home #hero .weight-600 br {
		display: none;
	}

	#services .block-1 {
		flex-direction: column;
	}

	#services a {
		padding: var(--space-30);
	}
	
	#promotions .block-3,
	#promotions > .w-full {
		flex-direction: column;
		gap: var(--space-40);
	}

	#promotions .slider {
		position: static;
	}
	
	#promotions .slider article {
		width: auto;
		max-height: 180px;
		aspect-ratio: 16 / 9;
	}

	#info .block-2 {
		gap: 30px;
		flex-direction: column;
	}

	.cta figure {
		mix-blend-mode: multiply;
		filter: grayscale(1);
		opacity: 0.5;
	}

	.cta .panel {
		display: none;
	}

	#news .block-3 article {
		flex-direction: column;
	}

	#navigation {
		height: auto;
		flex-direction: column;
	}
	
	#navigation nav {
		padding-bottom: var(--space-20);
	}
	
	#navigation figure {
		aspect-ratio: 16 / 9;
	}

	#navigation figure img {
		transform: scale(2);
	}

	.delivery #hero,
	.wash #hero {
		padding: 0;
		flex-direction: column;
		gap: 0;
	}
	
	.delivery #hero h1,
	.wash #hero h1 {
		padding: var(--space-20);
		aspect-ratio: 16 / 9;
		font-size: 28px;
		display: flex;
		align-items: center;
		position: static;
	}
	
	.delivery #hero figure,
	.wash #hero figure {
		border-radius: 0;
		position: absolute;
		inset: 0;
	}

	.delivery #hero .w-60,
	.wash #hero .w-60,
	#hero.interior .w-60 {
		border-radius: 0;
	}

	.delivery #hero .w-40,
	.wash #hero .w-40 {
		padding: var(--space-20);
		background-color: var(--grey-100);
		gap: var(--space-20);
	}

	.delivery section .block-1,
	.wash section .block-1 {
		flex-direction: column;
	}
	
	.delivery section .block-1 figure,
	.wash section .block-1 figure {
		order: 2;
	}
	
	.wash section .mt-70 {
		padding: var(--space-20);
		margin-top: 0;
		display: flex;
		flex-direction: column;
		text-align: center;
	}
	
	.wash section .mt-70 p {
		order: 2;
	}

	.wash section .h-80 {
		height: fit-content;
		gap: var(--space-20);
	}

	.wash section .h-80 figure {
		position: static;
	}

	#ph {
		padding-inline: var(--space-20);
	}

	#timeline .timeline {
		align-items: start;
		gap: 40px;
		padding-left: 20px;
		padding-bottom: 0;
		margin-top: 70px;
		margin-bottom: 50px;
	}

	#timeline .timeline span.size-200.color-alt {
		order: 1;
	}

	#timeline .timeline article mark {
		order: 2;
	}
	
	#timeline .timeline article i {
		order: 3;
		transform: translateY(0px) rotate(0deg) translateX(-30px);
		opacity: 0;
	}

	#timeline .timeline article.active i {
		opacity: 1;
		transform: translateY(1px) rotate(0deg) translateX(0px);
	}

	#timeline .timeline article {
		flex-direction: row;
	}

	#timeline .timeline article .content {
		bottom: 0;
		z-index: 3;
		left: 110px;
		width: 258px;
	}

	#timeline .timeline article .content figure {
		display: none;
	}
	
	#timeline .timeline::after {
		height: 100%;
		width: 7px;
		background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="%23fcdad9"><circle cx="5" cy="5" r="2" fill="%23fcdad9" /></svg>') repeat-y;
		left: 76px;
		right: auto;
		top: 0;
	}

	#hero.interior {
		max-height: 200px;
	}

	#hero.interior h1 {
		padding: 25px;
	}

	#footer .grid {
		grid-template-columns: repeat(2, 1fr);
		display: grid;
	}

	.pd-mv{
		padding: 20px 15px!important;
	}
	.pd-0-mv {
		padding: 0px !important;
	}

	.contador-mv {
		border: none;
	}

	.font-mv {
		font-size: 18px !important;
	}

	.paso-1 {
		grid-template-columns: repeat(1, 1fr);
	}

	.pasos .btn {
		grid-column: 1;
		margin-bottom: 20px;
		margin-left: 0;
	}

}

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

	.home #hero #price-bar .panel {
		left: 0;
		padding: 25px;
		width: 50%;
		transform: none;
		justify-content: start;
	}
	
	.home #hero #price-bar .panel .nowrap{
		white-space: wrap;
	}

	.home #hero #price-bar .swiper-slide {
		justify-content: center;
	}

	.home #hero #price-bar .swiper {
		width: 50%;
		margin-left: 0;
		padding-left: 25px;
	}

	#hero.interior {
		max-height: 150px;
	}

	.block-2.grid-cols-4{
		grid-template-columns: repeat(1, 1fr);
	}

}

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

	.home #hero #price-bar {
		flex-direction: column;
	}

	.home #hero #price-bar .panel {
		width: 100%;
		height: fit-content;
	}

	.home #hero #price-bar .swiper {
		width: 100%;
		height: fit-content;
	}

	.home #hero #price-bar .swiper-slide {
		padding: 10px 0;
	}

	#footer .grid {
		grid-template-columns: repeat(1, 1fr);
	}

}