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

	#submenu .submenu_content .imagenes_menu figure:nth-child(n+3){
		display: none;
	}
	
}

@media only screen and (max-width:1350px){
	
	.home section .title figure {
		position: static;
		transform: none;
		margin-left: 0;
	}

	.home #content .title {
		flex-direction: row;
		gap: 20px;
	}

	#hero .step {
		width: 80%;
	}

	#hero [data-step="2"] .brands {
		width: 100%;
		grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	}

	.shop #hero .banner {
		height: 280px;
	}

	.nav-movil{
		display: flex !important;
		z-index: 999;
	}

	#menu-escritorio .menu-principal,
	#menu-escritorio .menu-secundario{
		display: none;
	}

	#menu-escritorio{
		position: relative;
		z-index: 2;
	}

	#menu-movil {
		display: flex;
		width: 100%;
		min-height: 100dvh;
		flex-direction: column;
		background-color: black;
		position: fixed;
		left: 0;
		top: 0;
		padding-left: var(--padding-lateral);
		gap: 30px;
		z-index: 1;
		padding-right: var(--padding-lateral);
		padding-bottom: var(--padding-lateral);
		padding-top: calc(var(--padding-lateral) + 70px);
		transition: transform 350ms ease;
		transform: translateY(-100%);
	}

	#menu-movil.visible {
		transform: translateY(0);
	}

	#menu-movil > div > ul{
		flex-direction: column;
		align-items: start;
		display: flex;
		gap: 8px;
	}

	#menu-movil ul.submenu{
		display: flex;
		gap: 6px;
		flex-direction: column;
		padding: 10px 0;
	}

	#menu-movil ul.submenu a{
		padding-left: 15px;
		text-transform: capitalize;
	}

	#menu-movil .menu-secundario{
		border-top: 1px solid var(--grey);
		padding-top: 30px;
	}

	#submenu .submenu_content .cat-list {
		gap: 10px;
	}

	#submenu {
		padding: 0;
		z-index: 3;
		top: 0;
		min-height: 100dvh;
	}

	#submenu .submenu_content{
		background-color: black;
	}

	#submenu .submenu_content .close{
		display: block;
		color: white;
		position: absolute;
		font-size: 22px;
		right: var(--padding-lateral);
		top: var(--padding-lateral);
	}

	#submenu .submenu_content .cat-list a {
		color: white;
	}

	#submenu .submenu_content .marcas,
	#submenu .submenu_content .imagenes_menu {
		width: 100%;
	}

	#submenu .submenu_content .imagenes_menu{
		flex-direction: column;
	}

	.block-1,
	#footer,
	#patek {
		padding-right: var(--space-40);
		padding-left: var(--space-40);
	}

	#footer .block-1 {
		padding-right: 0px;
		padding-left: 0px;
	}

	#shop-nav #filter,
	#shop-nav #search {
		padding-left: var(--space-20);
		padding-right: var(--space-20);
	}

	#hero button.prev {
		left: var(--space-20);
	}

	#hero button.nav.next {
		right: var(--space-20);
	}

	#hero button.next {
		right: var(--space-20);
	}

	#hero [data-step="2"] .brands {
		max-width: 80%;
	}

	#shop-nav {
		padding-left: var(--space-30);
		padding-right: var(--space-30);
	}

	#shop-nav > div {
		padding-left: 0px;
		padding-right: 0px;
	}

	.blog .grid {
		grid-template-columns: repeat( auto-fit, minmax(350px, 1fr) );
	}

	#entradas-relacionadas .grid {
		grid-template-columns: repeat( auto-fit, minmax(350px, 1fr) );
	}

}

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

	:root {

	--size-900: 26px;	
	--size-800: 26px;
	--size-700: 20px;
	--size-600: 17px;
	--size-500: 15px;
	--size-400: 13px;
	--size-100: 12px;

	--space-200: 150px;
	--space-150: 120px;
	--space-130: 110px;
	--space-100: 100px;
	--space-90: 90px;
	--space-80: 80px;
	--space-70: 70px;
	--space-60: 60px;
	--space-50: 50px;
	--space-40: 40px;
	--space-30: 30px;
	--space-25: 25px;
	--space-20: 20px;
	--space-15: 15px;
	--space-10: 10px;
	--space-5: 5px;

	}

	.block-1,
	#footer,
	#patek {
		padding-left: var(--space-30);
		padding-right: var(--space-30);
	}

	.home #intro .w-80 {
		width: 100%;
	}

	#submenu .submenu_content{
		padding: 40px;
		gap: 40px;
	}

	#submenu .submenu_content .cat-list {
		padding-right: 40px;
	}

	.shop #hero .banner {
		height: 250px;
	}

	#products > div {
		grid-template-columns: repeat(3, 1fr);
	}

	.contact main section {
		padding-left: var(--space-30) ;
		padding-right: var(--space-30) ;
	} 

	.checkout section:nth-child(2) {
		padding: var(--space-30);
	}

	.block-2 {
		padding-right: var(--space-30);
		padding-left: var(--space-30);
	}

	.regular main section {
		padding-left: var(--space-20);
		padding-right: var(--space-20);
	}

}

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

	#header #form-buscar {
		justify-content: start;
	}

	#header #form-buscar > div {
		justify-content: start;
		width: 80%;
	}

	.shop #hero .banner {
		height: 200px;
	}

	#product #add-to-cart .icon > i::before {
		top: 9px;
	}

	#product #info {
		grid-template-columns: 100%;
	}

	#footer .grid {
		grid-template-columns: 1fr 1fr;
	}

	#footer .grid > div:not(:last-child) {
		border-right: none;
	}

	#footer .grid > div:nth-child(odd){
		border-right: 2px solid black;
	}

	#footer .grid > div:nth-child(1),
	#footer .grid > div:nth-child(2){
		border-bottom: 2px solid black;
	}

	#hero [data-step="2"] .brands {
		width: 90%;
	}

	#hero [data-step="2"] .brands > span {
		flex:  0 0 31%;
	}

	#product #add-to-cart > div {
		height: 55px;
	}

	#product #add-to-cart{
		width: 250px;
	}

	#product #add-to-cart > div {
		padding-left: 15px;
		padding-right: 15px;
	}

	#product #add-to-cart .icon,
	#product #add-to-cart .nostock{
		min-width: 55px;
	    max-width: 55px;
	    height: 55px;
	}

	p,li {
		font-size: var(--size-500);
	}

	#club-mmu .links {
		flex-direction: column;
		align-items: start;
		gap: 20px;
	}

	#club-mmu a#ya_pertenezco {
		position: static;
	}

}


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

	.slider-principal .swiper-slide {
		height: fit-content;
	}

	.slider-principal .swiper-slide figure {
		height: 100%;
	}

	#intro > div  {
		flex-direction: column;
	}	

	#intro .w-40,
	#intro .w-60 {
		width: 100%;
	}

	#intro figure.w-60 {
		max-height: 400px;
	}

	#content article .grid{
		grid-template-columns: 100%;
		gap: var(--space-20);
	}

	#content div.products {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	#product article footer .related {
		grid-template-columns: 1fr 1fr;	
	}

	#popup .wpcf7 form .grid{
		grid-template-columns: 100%;
	}

	#popup > div {
		min-width: calc(100% - var(--space-40));
		height: 100%;
		overflow-y: auto;
	}

	.checkout #checkout {
		grid-template-columns: 100%;
	}

	.form-club-mobile{
		min-height: 40vh !important;
	}
	
}

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

	:root {

	--size-900: 22px;	
	--size-800: 22px;
	--size-700: 17px;
	--size-600: 16px;
	--size-500: 14px;
	--size-400: 13px;
	--size-100: 12px;

	--space-200: 60px;
	--space-150: 60px;
	--space-130: 60px;
	--space-100: 60px;
	--space-90: 60px;
	--space-80: 55px;
	--space-70: 50px;
	--space-60: 45px;
	--space-50: 40px;
	--space-40: 30px;
	--space-30: 20px;
	--space-25: 20px;
	--space-20: 20px;
	--space-15: 15px;
	--space-10: 10px;
	--space-5: 5px;

	}

	.tabs .tab .tab-content{
		display: none;
	}

	.hbspt-form .hs-dependent-field{
		width: 100%;
	}
	
	.hbspt-form .inputs-list.multi-container {
	  columns: 1;
	}

	.mobile{display: block}
	.desktop{display: none}

	.slider-principal .swiper-slide .absolute {
		position: relative !important;
		background-color: white !important;
		color: black !important;
		padding: var(--space-30) !important;
		align-items: start !important;
		text-align: left !important;
	}

	.slider-principal .swiper-pagination{
		text-align: right;
		padding-right: var(--space-30);
	}

	.slider-principal .swiper-slide .absolute .btn{
		color: black !important;
	}

	.slider-principal .swiper-slide .absolute h2 {
		font-size: 20px;
		line-height: 26px;
	}

	.w-50 {
		width: 100%;
	}

	#submenu .submenu_content{
		flex-direction: column;
	}

	#submenu .submenu_content > div {
		gap: 20px;
	}

	#submenu .submenu_content .cat-list {
		padding-right: 0;
		border-right: none;
	}

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

	#submenu .submenu_content .logos a {
		width: 100%;
	}

	#magazine > div {
		flex-direction: column;
	}

	#magazine > div .w-40 {
		width: 100%;
	}

	#header .logo {
		display: none
	}

	#header #logo .isotype {
		display: flex;
	}

	#header .patek {
		display: none;
	}

	.patek.mobile {
		padding-bottom: 0;
		display: flex;
	}

	#shop-nav form #filters > div {
		padding-top: 150px; 
	}

	#tools,
	#shop-nav #filters .clean {
		display: none;
	}

	#mobile-filters {
		display: flex;
		top: 70px;
	}

	#mobile-filters > div {
		border-bottom: 2px solid black;
	}

	#mobile-filters .mobile-actions {
		display: grid;
		padding-left: 0px;
		padding-right: 0px;
	}

	#shop-nav {
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, .8);
		position: fixed;
		inset: 0;
		opacity: 0;
		pointer-events: none;
		z-index: 12;
		transition: all 360ms ease;
	}

	#shop-nav.active,
	#shop-nav.search {
		opacity: 1;
		pointer-events: all;
	}

	#shop-nav .actions #filters {
		width: 100%;
		min-height: 100vh;
		display: flex;
		justify-content: flex-end;
		position: fixed;
		inset: 0;
		z-index: 2;
		padding: 0;
		opacity: 0;
		pointer-events: none;
		transition: all 520ms ease;
	}

	#shop-nav #filter {
		width: calc(100% - var(--space-30));
		min-height: 100vh;
		border-bottom: none;
		height: 100%;
		overflow-y: auto;
		display: flex;
		align-items: center;
		position: fixed;
		top: 0;
		left: var(--space-30);
		padding: 150px var(--space-20) var(--space-30);
		background-color: white;
		opacity: 0;
		pointer-events: none;
		transform: translateX(100%);
		transition: all 520ms ease;
	}

	#shop-nav.order #filter {
		top: 0;
		left: var(--space-30);
		opacity: 1;
		transform: translateX(0%);
		pointer-events: all;
	}

	#shop-nav #filter > div {
		width: 100%;
		flex-direction: column;
		align-items: flex-start;
		padding-bottom: 85px;
	}

	#shop-nav #filter > div[data-filter='price'] {
		flex-direction: row;
		align-items: center;
	}

	#shop-nav #filter h4 {
		font-size: var(--size-700);
	}

	#shop-nav.active #filters {
		opacity: 1;
		pointer-events: all;
	}

	#shop-nav form #filters > div {
		width: calc(100% - var(--space-30));
		background-color: white;
		opacity: 0;
		transform: translateX(100%);
		transition: all 520ms ease;
	}

	#shop-nav.filter #filters > div{
		opacity: 1;
		transform: translateX(0);
	}

	#shop-nav #filter.active {
		top: 0;
		transform: translateX(0);
	}

	#shop-nav #filters > div {
		width: 100%;
	}

	#shop-nav #filters span:not(:last-child)::after,
	#shop-nav #filters span::after {
		content: '\f054';
		font-family: "Font Awesome 6 Free"; 
		font-weight: 900;
		font-size: 12px;
		margin: 0;
		transition: all 280ms ease;
		color: var(--grey);
	}

	#shop-nav #filters > div {
		width: 100%;
		height: 100%;
		overflow-y: auto;
		flex-direction: column;
		align-items: center;
		padding: 70px var(--space-20) var(--space-30);
		gap: 0;
	}

	#shop-nav #filters span {
		width: 100%;
		display: flex;
		justify-content: space-between;
		padding-block: 10px;
		padding-top: 10px;
		padding-bottom: 10px;
	}

	#shop-nav #filters span a {
		width: 100%;
		font-size: var(--size-600);
	}

	#shop-nav #filter > div button {
		font-size: var(--size-600);
	}

	#shop-nav #filters span:hover::after {
		color: black;
	}

	#shop-nav form .filter-nav {
		width: calc(100% - var(--space-30));
		height: 55px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-left: var(--space-20);
		padding-right: var(--space-20);
		position: fixed;
		left: var(--space-30);
		top: 0;
		z-index: 9;
		transform: translateX(100%);
		background-color: white;
		/*border-bottom: 1px solid black;*/
		opacity: 0;
		pointer-events: none;
		transition: all 520ms ease;
		padding-top: 100px;	
	}

	#shop-nav.active .filter-nav {
		opacity: 1;
		transform: none;
		pointer-events: all;
	}

	#shop-nav .filter-nav .close {
		display: flex;
	    width: 28px;
	    height: 28px;
		display: flex;
		align-items: center;
	    cursor: pointer;
	}

	#shop-nav .filter-nav .close span {
		width: 0%;
		height: 3px;
		background: black;
		opacity: 0;
		transition: all 280ms ease;
	}

	#shop-nav .filter-nav.back .close span {
		opacity: 1;
		width: 100%;
	}

	#shop-nav .filter-nav .close::before, 
	#shop-nav .filter-nav .close::after {
		content: '';
	    position: absolute;
	    left: 0px;
	    top: 13px;
	    width: 28px;
	    height: 3px;
	    background-color: black;
		transition: all 280ms ease;
	}

	#shop-nav .filter-nav .close::before {
		transform: rotate(45deg);
	}

	#shop-nav .filter-nav .close::after {
		transform: rotate(-45deg);
	}

	#shop-nav .filter-nav.back .close::after {
		width: 50%;
		transform: translate(0px, 5px) rotate(40deg);
	}

	#shop-nav .filter-nav.back .close::before {
		width: 50%;
		transform: translate(0px, -5px) rotate(-40deg);
	}

	#shop-nav #filters .clean-mobile {
		position: fixed;
		opacity: 0;
		pointer-events: none;
	}

	#popup > div {
		min-width: 100%;
		min-height: 100vh;
	}

	#hero [data-step="2"] figure {
		max-width: 100px;
	}

	#product article > div > div:nth-child(2) {
		padding-bottom: var(--space-50)
	}

	#product #info {
		padding-top: var(--space-50);
	}

	#product footer {
		margin-top: var(--space-30)
	}

	#patek .patek {
		margin-bottom: -45px;
	}

	#product article .product-thumbs {
		display: none;
	}

	#booking{
		display: block;
		overflow-y: scroll;
	}

	#booking > div, #login-form > div {
		min-width: auto;
		width: 100%;
	}

	#header .menu a {
		font-size: var(--size-500);
	}

	#product article > div > div:nth-child(2) {
		padding-bottom: 0;
	}

	#product-popup.active > div {
		min-width: 90%;
		width: 90%;
	}

	.edit-post {
		bottom: 10px;
		left: 10px;
	}

	#hero .step {
		max-width: 80%;
	}

	.hbspt-form fieldset {
		flex-direction: column;
		justify-content: start;
		align-items: start;
		gap: 0;
	}

	.hbspt-form .hs-form-field {
		margin-bottom: 10px;
	}
}

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

	.shop #hero .banner {
		height: 140px;
	}

	.slider-principal .swiper-pagination {
		flex-direction: row;
		left: auto;
		height: auto;
		bottom: 0;
		width: 100%;
		gap: 0;
		padding: 0;
	}

	.slider-principal .swiper-pagination-bullet {
		width: 10px;
		height: 10px;
	}

	.slider-principal .swiper-pagination > span{
		background-color: black;
	}

	.slider-principal .swiper-pagination > span.swiper-pagination-bullet-active{
		border-color: black;
	}
	
	#product article .grid-cols-2 {
		grid-template-columns: 100%;
	}

	#product article .grid-cols-2  figure {
		width: 100%
	}

	#hero [data-step="1"] .categories {
		flex-direction: column;
		transform: translateX(0);
	}

	#hero [data-step="1"] .categories span {
		text-align: center;
	}

	#products > div {
		grid-template-columns: 1fr 1fr;
	}

	#product article > div{
		flex-direction: column;
	}

	#product article > .w-50 {
		width: 100%;
	}

	#product article .product-slider {
		padding: 0;
		margin-right: 0;
		margin-bottom: 10px;
	}

	.contact .wpcf7-form {
		grid-template-columns: 100%;
	}

	#hero [data-step="2"] .brands span {
		flex:  0 0 100%;
	}

	#hero [data-step="2"] button.active {
		transform: translate(-50%,200%);
	}

	#product article .grid-cols-2 figure {
		width: fit-content;
	}

	.checkout #checkout .checkout-fields,
	.checkout #checkout #shipping-methods,
	.checkout #checkout .grid.grid-cols-2.billing,
	.checkout #checkout .grid.grid-cols-2.shipping_address {
		grid-template-columns: 100%;
	}

	#checkout #shipping-methods > div > span{
		width: 100%;
	}

	#shops > div:first-child,
	#shops > div {
		flex-direction: column;
	}

	#shops > div figure {
		order: -1;
	}

	#shops .w-40,
	#shops .w-60 {
		width: 100%;
	}

	#hero button.prev {
		left: var(--space-5);
	}

	#hero button.nav.next {
		right: var(--space-5);
	}

	.hbspt-form .form-columns-2,
    .hbspt-form .form-columns-3 {
        grid-template-columns: 1fr;
        gap: 0;
        flex-direction: column;
    }

    .hbspt-form .form-columns-2 > div,
    .hbspt-form .form-columns-3 > div{
        width: 100% !important;
    }

	#club-mmu button::before,
	#club-mmu button::after {
		background-color: #fff;
	}

	#club-mmu.active > div {
		flex-direction: column;
	}
	
	#club-mmu.active > div figure {
		max-height: 150px;
		overflow: hidden;
		position: relative;
	}
	
	#club-mmu.active > div figure::after {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(-135deg, rgb(0 0 0 / 70%), transparent 50%);
	}

	#club-mmu > div .text {
		padding: 20px;
	}

	#club-mmu > div .text a {
		margin-top: 0;
	}

	#footer #whatsapp {
		bottom: 9px;
		right: 75px;
	}

}