/* iMac */
@media screen and (min-width: 1640px) {
	/* section.pagina {width: calc(100% - 32em); padding: 0 16em} */
	
	section .contenedor {width: inherit; max-width: 1280px !important;}
	section.post .contenedor {align-items: start;}
	section.post.producto .destacada {max-width: calc(640px * 1.06) ;}
	section.post.producto figure.fotograma {min-height: 520px; }
}

/* Macbook */
@media screen and (min-width: 1334px) and (max-width: 1639px) {
	/* section.pagina .contenedor{width: calc(100% - 16em); padding: 0 8em} */
}




/* Laptop */
@media screen and (min-width: 1160px) and (max-width: 1440px) {


}

@media screen and (min-width: 1080px) and (max-width: 1261px) {


}




/* Celulares */
@media screen and (min-width: 231px) and (max-width: 640px) {


}

/* Tabletas */

@media screen and (min-width: 641px) and (max-width: 1079px) {


}



@media screen and (min-width: 231px) and (max-width: 1079px) {
	header {background-color: #fff; height: auto; min-height: 80px; position: sticky; margin: 0;}
	header .espacio {padding: 0 1em; width: calc(100% - 2em); max-width: auto; gap: 0; }
	header .espacio .der,
	header .espacio .izq{flex: 0 1 3rem; gap: .5rem; z-index: 2;}
	header .espacio .izq {gap: 1rem;}
	header .espacio .izq nav.redes a {color: var(--color-claro)}

	
	header a#menu {display: inline-flex; position: fixed;top:1.75rem; left: 1rem; font-size: 1.5rem; color: var(--color-contraste);}
	header nav.redes {display: none;}
	header .logo {width: 100vw; background-color: #fff; min-height: 5rem; position: fixed; top: 0;left: 0; flex: auto; max-width: inherit; z-index: 0; border: 1px solid #eee;
	}
		header .logo figure {min-height: 5rem; background-position: 40% 50%; background-size: 60%}

	body#home header .logo {top: 100vw;}
	body#home header .logo,
	body.proyecto header .logo {filter: invert();}
	
	.topheader {display: none;}
	
	header.act .espacio {gap: 4em; justify-content: space-around; height: calc(100vh - 6em); flex-direction: column; flex-wrap: nowrap}
	header.act a#menu {color: var(--color-principal)}
	header.act .espacio .der {width: 100%; display: none; flex-direction: column; justify-content: start}
	header.act .espacio nav ul li i {display: none}

	header nav.menu {display: none; width: 100%;}
	header nav.menu ul {flex-direction: column; width: 100%; position: relative}
	header .espacio nav>ul>li>ul {display: flex; position: relative; box-shadow: none; top: 0; border-bottom: 1px solid var(--color-principal); background-color: inherit;}
	header nav.menu ul li {width: 100%; padding-bottom: 1rem}
		header .espacio nav>ul>li>ul>li {padding-bottom: .5rem;}
		header .espacio nav>ul>li>ul>li .menuInfo {padding: 0 0 .25rem !important}
	header.act .espacio nav.menu ul li a {font-size: 16pt; padding: .25rem 0 .5rem; font-family: var(--display-font);}
	header.act .espacio nav.menu ul li ul li a {font-family: var(--main-font); padding-bottom: .25rem} 
	header.act .espacio nav.menu {flex: auto; justify-content: start}
	
	
	main {top: -12px; padding-bottom: 0;}
	#cart {right: inherit !important; min-width: 100% !important; top: 80px !important}
º	#cart.hide{right: inherit !important; top: -100vh !important;}
	#cart .flex i {display: inline-flex}

	span.carrito {position: relative; top: 1rem !important; border-radius: 0 !important; right: 1rem !important; font-size: 1.5em !important; color: #fff}
	#cart button.nuevaorden,
	#cart span.boton a {font-size: 8pt !important; padding: 1rem .5rem !important;}
	
	#cart .botones span#seguir a{font-size: 8pt !important}
	span.carrito.empty {}
		span.carrito i {font-size: 1.5rem !important}


	figure.fotograma {min-height: 100vh}
	figure.imagen {height: min(40vh, 270px);}
	section.post.proyecto figure.portada {background-attachment: inherit;}
	
	
	#cart h5 span.carrito {display: none}
	#cart .contenedor {padding: 1em; width: calc(100% - 2em)}
	.pedido .item {padding: 0 0 .5em; gap: .5em}
	
	#cart.hide  .contenedor .pedido {display: none;}
	#cart.hide  .contenedor .flex.row i.fa-chevron-down:before {content: "\f077"}
	#cart.hide h5 {text-align: center; padding: 1em;}
	#cart.hide h5 span.carrito {display: inline-flex; color: var(--color-encabezados)}
	#cart button.nuevaorden {border-radius: 4px !important; order: 2; flex: 0 1 calc(50% - .5rem) !important}
	
	#cart .flex.botones {flex-direction: row !important;}
	
	#cart .botones span.boton {order: 1; flex: 0 1 calc(50% - .5rem) !important;}
	
	
	body#checkout #cart {display: none;}
	
	.whatsapp.fijo {right: 2rem; bottom: 3rem; height: 2rem; width: 2rem; }
	.whatsapp.fijo a {padding: 10px 2px; width: 3rem}
	.whatsapp.fijo a i{font-size: 2rem; }

	h1 {font-size: 1.5em}
	h2 { font-size: 1em; }
	h3 {font-size: 1.5rem}
	h4 {font-size: .75em}


	:is(.producto h6.colores,form .custom-radio) {font-size: 8pt}
	:is(p,section input,	section select,	section button, form .custom-radio.terminos) {font-size: 10pt !important}

	:is(.producto h6){font-size: 10pt; text-align: left;}


		section input,
		section select,
		section button,
		 {font-size: 10pt}

		section form button,
		section form input[type="submit" i],
		section form .cart-action button {font-size: 8pt}

				section#pedido textarea {margin: 0 !important}
				section#pedido form .pago-tarjeta .quarter {width:calc(42% - 42px) !important; flex: inherit;}


	figure.imagen {height: min(20vh, 6rem)}

		ul.grid li.producto a.thumbnail figure.imagen,
		.producto a.thumbnail figure.imagen {height: calc(((100vw - 2rem)/2)*1.02) !important}

	a.thumbnail figure.imagen {height: calc(((100vw - 2rem)/2)*1.02)}

		section#best-sellers .slick-track {gap: .5rem !important}
		section#best-sellers .slick-prev,
		section#best-sellers .slick-next {top: calc(50% - 2rem) !important}

	/* Tarjeta Producto */
	
	.producto h6.display {min-height: 4rem; display: flex;flex-direction: column;align-items: center; justify-content: center; margin-bottom: .5rem;}
	.producto .caja.row.info {flex-direction: column !important; align-items: center !important; padding: .5rem 1rem 1rem; width: calc(100% - 2rem); gap: 0rem !important}

	.producto .caja .flex.col .flex.row.g1.colores {flex-direction: row !important; max-width: 100%;}
	.producto .caja.row .flex {flex-direction: column !important; align-items: start; order: 2; }
	.producto .caja .flex.col.precio {width: 100% !important;}
	
	/* Carrito */
	
	#cart .colores figure {width: 1rem; height: 1.5rem; min-height: 1.5rem}
	
	section#pedido .columna.pedido .fila.tarjeta.act {order: 0;margin-bottom: 2rem;}
	section#pedido .columna.pedido h2,
	section#pedido .columna.pedido .fila,
	section#pedido .columna.pedido .item {order: 1}

	section#pedido form .half span.field-error {font-size: 8px;}
		section#pedido form .full span.field-error {font-size: 10px;}

	section#pedido #tarjetaPreview {width: calc(100% - 4rem) !important; min-height: 2rem !important; order: 2}
	
	
	section#catalogo .contenedor {gap: 2rem; padding: 4rem 1rem 4rem}
	section#catalogo ul.grid {gap: 1rem}
	section#catalogo ul.grid.tres li {grid-column: span 4;}
	section#catalogo .producto .caja.row {flex-direction: column !important; gap: .5rem !important}
	section#catalogo .producto .caja.row .flex {width: 100% !important; flex: auto; gap: 0 !important}
	
	.producto .caja .flex.col.titulo {max-width: 100%; width: 100%;}
	
	section.aside {min-height: auto}
	
	.producto .caja.row .flex.colores,
	section#catalogo .producto .caja.row .flex.colores {flex-direction: row !important; order: 3; gap: .5rem !important; margin: .5rem 0 0 !important; min-height: 3.5rem; max-width: 100%}
	.producto .caja.row .flex.colores .colores.row {flex-direction: row !important;  align-items: center !important; justify-content: center !important;flex-wrap: wrap !important;}
	.producto .colores figure {width: 1.5rem; height: 1.5rem; margin: 0; min-height: 1.5rem; min-width: 1.5rem;}

		section.post.producto .botones {margin: 2rem 0}
		section.post.producto h6.disclaimer {font-size: .75rem}
	
	
	section#catalogo .producto .caja.row .flex.ficha { display: inline-block !important; min-height: 2rem;}
		ul.grid li.producto .caja .ficha a:nth-child(1) {border: 0; padding: 0}
	.producto .caja.row .flex.ficha a {display: inline; flex: inherit !important}
	.producto .caja.row .flex:nth-child(1){order: 1}

	section {}
	.contenedor,
	section.post.proyecto .contenedor,
	section.pagina .contenedor,
	section.image .contenedor,
	section#ocasiones .contenedor{padding: 2rem 1rem; width: calc(100% - 2rem); flex-direction: column; gap: 2rem;}
	
		section#pedido .bloque.orden.contacto {flex-direction: column;}
		section#pedido .bloque.orden.contacto .columna.dos { padding: 0 !important; width: 100% !important}
	

	section#colecciones .contenedor {padding: 2rem 0; width: 100%; gap: 0}
	
	section#best-sellers .contenedor,
	section#ocasiones .contenedor {padding: 2rem 0 0;width: 100%;}
	
	section#best-sellers .contenedor {gap: 2rem; padding-bottom: 1rem;}
	section#best-sellers .slick-track {flex-wrap: inherit;}

	section.slider.portada,
	section.slider .fotograma {min-height: 100vh; justify-content: center; align-items: center;}

	.slick-track {flex-wrap: wrap;}
	.slick-prev,
	.slick-next {top: calc(50% - 2rem) !important; color: transparent !important}
		.slick-prev{left: 1rem !important;}
		.slick-next{right: 1rem !important;}

	section.slider .fotograma .flex.start {gap: 1rem;}
	section.slider figure .caja {padding: 4rem 2rem; width: calc(100% - 4rem); }
	section.slider figure .deg.rad {opacity: .7}
	section.slider figure h1 {font-size: 54px}
	
	
	
	section .encabezado {align-items: center; justify-content: center;}
	section .encabezado :is(h2, p){text-align: center;}
	section .encabezado.row .flex.col a {display: flex; flex-direction: column; gap: 1rem; align-items: center;}
	
	
	
	:is(section.slider figure h2) {font-size: .75rem}
	:is(section .encabezado.row ) {flex-direction: column !important; flex: auto !important}
	:is(section#colecciones .encabezado .flex.col) {width: 100%; flex: auto !important}
	section#colecciones .encabezado .flex.col h2.display {min-height: auto}

	section#colecciones .columna {flex: auto; gap: 0 !important}
	section#colecciones .contenedor .columna .encabezado {padding: 0 2rem 1rem; gap: 1rem !important; max-width: calc(100% - 12rem);}

	section#colecciones .columna .encabezado.row a {align-items: start}
	section#colecciones .columna .encabezado.row a :is(h2,p){text-align: left}

	section#colecciones .columna:nth-child(2) {align-items: end;}
	section#colecciones .columna:nth-child(2) .encabezado.row {width: calc(100% - 4rem); max-width: inherit; padding: 1rem 2rem; align-items: start;}
		section#colecciones .columna:nth-child(2) .encabezado.row .flex.col {max-width: calc(100% - 8rem)}

	section#colecciones .columna a.thumb {width: calc(100% - 2rem)}
	section#colecciones a.thumb figure.fotograma {min-height: calc(100vh - 20rem)}
	
	section#colecciones .columna .encabezado.row span.boton a {align-items: center}

	section#best-sellers .contenedor .encabezado,
	section#ocasiones .contenedor .encabezado {width: calc(100% - 4rem); padding: 0 2rem; flex: inherit;}
	

    #modalInfo .contenedor.cuidados .encabezado {flex: auto;}
    #modalInfo .cuidados .flex.row figure {flex: 0 1 4rem; min-height: 4rem; height: 4rem}
    #modalInfo .contenedor.cuidados h6 {text-align: left; font-size: 8pt;}
    
	section.image {min-height: 100vh;}
	section.image h3 {font-size: 18pt}
	section#latelier figure.imagenfondo {background-size: cover; background-position: 65% 40%}

	section.post article {width: 100%; padding: 0}

		.columna.dos,
		.columna.tres,
		.columna.cuatro,
		section aside {width: 100%; flex: 1 0; gap: 1em; }

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

		span.boton {width: 100%}
		span.boton a {width: 100%; text-align: center; flex: inherit; padding: 1rem; border-radius: 4px; font-size: 10pt}

		section#newsletter .contenedor {padding: 4rem 2rem 0rem; width: calc(100% - 4rem)}
		section#newsletter .encabezado h2.display {font-size: 1.5rem; line-height: 1.2}

		section#newsletter form {gap: .5rem;}
			form#newsletter_form input.half {width: calc(50% - 21px) !important}
			form#newsletter_form :is(input,select,textarea,button) {font-size: 8pt}
				form#newsletter_form #submitContacto {margin: 2rem 0}
			
			
			ul.grid.tres li,
			ul.grid.cuatro li {grid-column: span 8}
			section#ocasiones ul.grid li h4 {width: calc(100% - 5rem); text-align: center}
			
			ul.grid.uno li {flex-direction: column;}
			ul.grid.uno li a {width: 100%}
			
		section.post.galeria ul.grid {gap: 0}
			
		
		section.post.producto .contenedor {padding: 1.5rem 1em; width: calc(100% - 2em); gap: 1em}
		section.post.producto .destacada {overflow: hidden; width: 100%;aspect-ratio: inherit; max-height: inherit;}
		section.post.producto .destacada figure.fotograma {order: 1; min-height: calc((100vw - 2rem) *1.02)}
	
			section.banner.pagina .contenedor span.boton a {padding: .5rem 1rem}
		
		section.post.producto .destacada ul.galeria{order: 2; width: 100%; flex-direction: row;}
				section.post ul.galeria li {min-width: 5rem; min-height: calc(5rem * 1.02); width: auto; flex: 1 0}
				section.post ul.galeria li figure.thumb {max-height: 180px !important;}
		
		section.post.producto article {width: 100%; padding: 0}
		section.post.producto .contenedor article .encabezado {align-items: start !important; justify-content: center;}
			section.post.producto .colores span.flex {gap: .5rem;}


				section#pedido .columna.pedido .item .producto h6.colores figure{width: 1.5rem; height: 1.5rem; min-height: 1.5rem}
				section.post.producto .colores span.flex figure {width: 2rem; height: 2rem; min-height: 2rem}
				section.post.producto .colores span.flex p {font-size: 14px}
				section#pedido span.messages.alerta {font-size: 12px}

                section.post.producto .form-add-to-cart,
                section form .cart-action button {width: auto; margin:0;}
				section.post.producto .form-add-to-cart {width: 100%;}
				section.post.producto .botones {justify-content: space-around}
				section form .cart-action .btn-add-to-cart {font-size: 8pt !important; padding: 1rem}
	
				section#newsletter .encabezado {flex: auto}
				section#newsletter .formulario {max-width: inherit}


	    #cart {position: relative !important; top: 0 !important; min-height: auto !important; width: 100vw !important; z-index: 1 !important;}
		#cart.hide .contenedor {padding: 0 0 !important}
		#cart .contenedor {width: calc(100% - 2rem) !important; padding: 2rem 1rem 4rem!important; min-height: auto !important}
		#cart .flex.g4 {gap: 2rem !important}
			#cart .pedido .item .flex.colores {gap: 1rem}
			#cart .pedido .item h4 {font-family: 'Playfair Display',serif;}
			#cart .item h4.precio {font-family: inherit; font-size: 8pt;}
            .pedido .item .producto h6 {font-size: 10px;}

			/* Filtros */
						section#catalogo .margen {top: 79px; margin-top: 1rem;}
			.act aside#filtros {width: 100%; top: 0; position: relative; order: 1; grid-column: span 12;}
						section#catalogo.act .contenedor ul.grid {order: 2; grid-column: span 12;}
			section#catalogo.act .contenedor{order: 2; gap: 1rem !important}
			.filtros-panel {gap: 2rem !important; padding: 2rem 1rem !important; background-color: #eee}
			.filtro-bloque {flex-direction: row !important; flex-wrap: wrap; gap: .5rem 1rem}
			aside#filtros h5 {flex: 0 1 100%; margin: 0 !important;}
			aside#filtros .btn-pill {padding: 0 0 .25rem !important; flex: auto; width: auto; margin: 0;}

			:is(.filtro-bloque.forma, .filtro-bloque.material) {display: none !important}

			section.post.galeria .contenedor {padding: 0;}
	
	

		section#pedido .contenedor { padding: 0em !important; width: calc(100% - 0rem) !important}
		section#pedido .columna.dos {width: calc(100% - 2rem) !important; padding: 2rem 1rem !important}
		section#pedido .columna.pedido {order:2; width: calc(100% - 4rem) !important; margin: 0 1rem !important; padding: 1rem !important}
		section#pedido .columna.formatos {order:1}

			.formatos section.checkout-step{width: calc(100% - 2rem) !important; gap: 1rem !important; min-height: auto !important; padding: 2rem 1rem !important }
				.btn-pill {padding: 1rem !important; width: 100%}
		
			section#pedido .columna.pedido {padding: 2em 1em; width: calc(100% - 2em); gap: 1em}
			section#pedido .columna.pedido .item h4 {font-size: 10pt}
						section#pedido .columna.pedido .item .producto h4 {font-family: 'Playfair Display',serif;}
							section#pedido .columna.pedido .item .producto h6.colores {gap: .5rem; align-items: center;}

				section.checkout-step h2 {font-size: 1.5rem !important; line-height: 1.2 !important;}
				section.checkout-step .row.firmas {flex-direction: column !important;}
				section.checkout-step button {margin: 0 !important}
				section.checkout-step .next-step {background-color: var(--color-principal);}
				section.checkout-step button.next-step:disabled {background-color: var(--color-claro);}
				section.checkout-step .actions.g2 {gap: 1rem !important}


				section.checkout-step select {min-height: 40px !important}

			section#pedido .columna.pedido span {font-size: .75em}
			section#pedido form {gap: 1em;}
				section#pedido form .half {width: calc(100% - 10px)}

		section.image.banner {min-height: 50vh; overflow: hidden;}
			section.image.banner figure.imagenfondo {display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100%; background-attachment: inherit; background-size: cover}
			section.image.banner figure.imagenfondo .contenedor {align-self: stretch; padding: 0 2em; height: 100%; width: calc(100% - 4em);}
						section#ocasiones ul.grid li h4 {width: calc(100% - 2rem); padding: 1rem}
	

	
	section.pagina.std h1 {font-size: 24pt}
	
	section.pagina.std .contenedor {width: calc(100% - 2rem);padding: 4rem 1rem !important}
	
	section.pagina.std .contenedor .columna {width: 100%}
	
	section.pagina.std ul li {font-size: 12px}
	
	
	footer {min-height: auto;}
		footer .espacio {gap: 1em; width: calc(100% - 4em); padding: 4em 2em 2em}
		footer .columna .logo {width: 80%; max-width: inherit;}
		footer .logopie figure {background-position: center;}

		footer .columna.cuatro {gap: .5rem}

		footer .columna.correo h4,
		footer nav.menu a {font-size: 8pt}
				footer .columna.correo h4.display {font-size: 12pt}
								footer nav.redes i {font-size: 2rem}

		footer .columna.logopie,
		footer .columna.terms {flex: 1 0 100%;}
		footer .columna.contacto {order: 4; flex: 1 0 calc(40% - 1em);}
		footer .columna.correo {flex: 1 0 55%; order: 5; width: 55%; align-items: start;}
		
}



/* iPad Pro */
@media only screen  and (min-device-height: 1024px)  and (max-device-height: 1366px)  and (orientation: portrait)and (-webkit-min-device-pixel-ratio: 1.5) {



}