/* Macbook */
@media screen and (min-width: 2160px) {

}

/* iMac */
@media screen and (min-width: 1440px) and (max-width: 4800px) {}



/* Celulares */
@media screen and (min-width: 641px) and (max-width: 1280px) {
	
	section#solicitud .formulario form .flex.row {flex-direction: column}
	
}



@media screen and (min-width: 320px) and (max-width: 640px) {
	header {
		width: 100%;
		height: 4em;
		position: absolute;
		background-color: transparent
	}

	header .espacio {
		padding: 1em 2em;
		width: calc(100% - 4em);
		flex-direction: row-reverse
	}

	header nav.menu,
	header .espacio nav.redes {
		display: none;
	}

	header .logo.cuadrado {
		height: 4em;
		min-height: 2em;
		width: 4em;
		min-width: 6em;
		
	}
	


	header .logo figure {
		min-height: 2em
	}

	#verMenu {
		min-width: 2em;
		gap: .45em;
		display: inline-flex
	}

	#verMenu span.linea {
		width: 2em
	}


	header .bloque.der {
		display: none
	}

	header.scroll {
		background-color: #f7f7f7
	}

	header.scroll.act {
		background-color: rgb(0, 0, 0, .8)
	}



	header.act {
		width: 100%;
		min-height: 100vh;
	}

	header.act .bloque.izq .barra {
		width: calc(100% - 4em);
		display: inline-block;
		padding: 0;
		margin: 0 2em
	}

	header.act .bloque.izq .barra a.logo.blanco {
		display: inline-block;
		float: left;
		padding: 1em 0;
		height: 8em;
		width: 8em;
	}

	header.act .bloque.izq .barra a#verMenu {
		float: right;
	}

	header.act .bloque.izq .barra nav.principal {
		width: 100%;
		margin: 4em 0;
		display: inline-block
	}

	header.act nav.principal a {
		width: 100%;
		display: block;
		margin: 0 0 1em;
		font-size: 2em
	}

	header.act .bloque.der {
		display: flex
	}

	header.act #verMenu { padding: 1em 0 }

	h1 { font-size: 1.5rem }
	h2 { font-size: 1.2rem }
	
	section#adicionales ul li h2,
	h5 { font-size: 12pt }

	:is(p,label) {font-size: 10pt}

	span.boton,
	span.boton a {
		font-size: 10pt;
		width: 100%
	}


	.contenedor,
	section#about .contenedor,
	section#servicios .contenedor,
	section#proyectos .contenedor,
	section#clientes .contenedor,
	section#contacto .contenedor,
	footer .espacio {
		width: calc(100% - 4em);
		padding: 6em 2em 4em;
		gap: 1em;
		max-width: calc(100% - 4em)
	}
	


	section#home figure.imagenfondo {background-attachment: inherit; height: 100vh}
		

	.columna.dos,
	.columna.tres,
	section .numeralia.contenedor .columna.numeros,
	.flex.row {
		flex-direction: column;
		width: 100%;
		flex: auto;
	}

	.flex.col.center.end {
		align-items: flex-start;
	}

	span.boton a {font-size: 10pt}


	figure.imagen,
	ul.grid li a figure.imagen {height: min(360px, 30vh);}


	section#home .bloque {
		width: calc(100% - 4em);
		padding: 0 2em
	}

	section#home {
		min-height: 100vh
	}
	section#home h2 {font-size: 1.2rem}
	section#home video {
		aspect-ratio: 9 / 16;
		max-height: 100vh;
		position: absolute;
	}

	section#about figure.fotograma {background-attachment: inherit;}


	section#about .columna.image {width: 100%; flex: auto}
	section#about .contenedor {flex-direction: row; gap: 2rem !important}

	section#clientes .slider {min-height: auto}
	section#clientes .slider .slick-prev {left:0; width: 1.5rem; height: 1.5rem}
	section#clientes .slider .slick-next {right:0; width: 1.5rem; height: 1.5rem}
	
	ul.grid.clientes {gap: 1rem;}
	ul.grid.clientes li {width: calc((100% / 2) - 1rem)}
	
	section#adicionales.clienteperfil .contenedor {padding: 6rem 2rem; }
	
	.clientes figure.logo {min-width: 90px}

	section#solicitud .contenedor {padding: 4rem 2rem; width: calc(100% - 4rem); max-width: inherit}
	section#solicitud form h2.display {margin: 0;}
	section#solicitud .columna.dos {order: 1}
	section#solicitud .columna.dos.formulario {width: calc(100% - 2rem); margin: 0; padding: 2rem 1rem; flex: auto; max-width: inherit; order: 2;}
	section#contacto p {text-align: center;}
	section#solicitud form .flex.col {gap: .5rem}
	
	section#servicios.aside h1 {text-align: center}
	section#servicios.pagina .contenedor {width: calc(100% - 4rem); padding: 6rem 2rem 4rem}
	section#servicios.pagina figure {min-height: 40vh; flex: auto;}
	section.pagina article h1.display {font-size: 1.5rem}
	section.pagina article {flex: auto}
	
	section#adicionales .contenedor {gap: 2rem;}
	section#adicionales ul li {flex: auto; padding: 1rem 2rem;}
	


	ul.grid {
		grid-gap: 1em;
	}

	ul.grid li {
		grid-column: span 6;
		flex-direction: row;
		justify-content: flex-start;
		gap: 2rem
	}

	ul.grid li a h4 {font-size: 10pt}
	ul.grid li a h3.display {font-size: 1rem; font-weight: 400;}
	
	body#inicio ul.grid li:nth-child(4),
	body#inicio ul.grid li:nth-child(5) {grid-column: span 6 }


	.slick-prev:before,
	.slick-next:before {
		font-size: 1rem !important
	}

	
		ul.grid.clientes li.club-premier {
			grid-column: span 4;
		}
	
		ul.grid.clientes li.calvin-klein,
		ul.grid.clientes li.estee-lauder,
		ul.grid.clientes li.tecnologico-de-monterrey,
		ul.grid.clientes li.el-palacio-de-hierro,
		ul.grid.clientes li.crabtree-evelyn,
		ul.grid.clientes li.hyatt-regency {
			grid-column: span 2 !important
		}
	
	
		ul.grid.clientes li.sephora,
		ul.grid.clientes li.nike,
		ul.grid.clientes li.under-armour,
		ul.grid.clientes li.gran-chapur {
			grid-column: span 2 !important
		}
	
	
	
		ul.grid.clientes li.nike figure,
		ul.grid.clientes li.estee-lauder figure,
		ul.grid.clientes li.under-armour figure,
		ul.grid.clientes li.calvin-klein figure,
		ul.grid.clientes li.club-premier figure,
		ul.grid.clientes li.harley-davidson figure,
		ul.grid.clientes li.tecnologico-de-monterrey figure,
		ul.grid.clientes li.sephora figure {
			background-size: 70%
		}
	
		ul.grid.clientes li.grand-chapur figure,
		ul.grid.clientes li.el-palacio-de-hierro figure {
			background-size: 90%
		}
	
		ul.grid.clientes li.hyatt-regency figure,
		ul.grid.clientes li.crabtree-evelyn figure {
			background-size: 100%
		}
	
		ul.grid.clientes li.peony-prestige figure {
			background-size: 150%
		}

	footer {
		height: auto;
		flex-direction: column;
	}

	footer iframe {order: 1;}

	footer .espacio {
		gap: 2em;
		order: 2;
	}

	footer .columna.medio {
		width: 100%;
		justify-content: flex-start;
		min-height: auto;
		height: auto
	}

	footer .columna.medio.contacto {
		align-items: flex-start;
		justify-content: flex-start;
	}



	input, select {flex: 1 0 calc(100% - 4.5rem)}
	form span.req {margin: 0 0 0 .5rem; min-width: 1rem}
	
	form .checkbox input[type="checkbox" i]  {max-width: 2rem; flex: auto;}
	form .checkbox .aviso label {flex: 1}
		
	
	span.cerrarFondo {
		margin: 0;
	}

	section#galeria .contenedor {
		padding: 2em;
	}

	section#galeria.pagina ul.grid {
		flex-direction: column;
	}

	section ul.grid figure.imagen {
		height: min(30vh, 270px);
		width: 100%
	}

	section.contacto span.boton a {
		flex-direction: row;
		font-size: 11pt
	}

	#modalInfo {
		padding: 1em;
		width: calc(100% - 2em);
		min-height: calc(100vh - 2em)
	}

	#modalInfo a#cerrarModal {
		top: 0;
		right: 20px;
	}

	#modalInfo .contenedor {
		width: 100%;
		padding: 4em 0;
		flex: inherit;
		max-width: 100%;
	}

	#modalInfo .contenedor .tarjeta {
		flex-direction: column;
		width: calc(100% - 2em);
		padding: 1em;
		overflow: auto;
		height: 80vh
	}

	#modalInfo.equipo figure.imagen,
	#modalInfo.equipo .info {
		width: 100%
	}

	#modalInfo.equipo figure.imagen {
		min-height: 360px;
		flex: auto;
		border-radius: 8px;
	}

	#modalInfo.equipo .info {
		overflow: scroll
	}

	#modalInfo.equipo .info p {
		height: auto;
	}

	#modalInfo .chimpform {
		padding: 4rem 2rem;
		width: calc(100% - 4rem)
	}

	input[type="submit" i] {
		width: 100%
	}



	article h2 {
		margin-top: 1em
	}

	article h2.wp-block-heading {
		font-size: 24px
	}

	article .bloque p {
		display: inline
	}

	article figure.wp-block-image {
		margin: 1em 0
	}

	:is(figure.fotograma h1, section.post .encabezado) {
		width: calc(100% - 4em)
	}

	section.post article {
		width: calc(100% - 5rem);
		padding: 0 2.5rem 4rem;
	}

	article figure.wp-block-gallery.has-nested-images {
		flex-direction: column;
	}

	article figure.wp-block-gallery figure.wp-block-image {
		width: 100%;
		gap: 1em;
	}


	section.post .contenedor {
		padding: 2em 0 4em;
		width: 100%;
		max-width: 100%;
		gap: .5rem
	}

	section.post .contenedor h1 {
		font-size: 1.5em
	}

	section.post .contenedor h4 {
		font-size: .75em
	}


	section.post .bloque {
		width: 100%;
	}

	section.post figure.portada {
		width: calc(100% - 1em);
		margin: 0 .5em;
		height: min(33vh, 480px)
	}

	section.post article .bloque h2 {
		width: 100%;
	}

	section.post article p,
	section.post article ol,
	section.post article ul {
		font-size: 12pt
	}

	section.post article ol,
	section.post article ul {
		text-align: left;
	}

	article .wp-block-columns {
		flex-direction: column
	}

	article iframe {
		min-height: 270px;
	}

	:is(article h1, ) {
		width: calc(100% - 2em)
	}

	:is(article .wp-block-group) {
		width: calc(100% - 4em);
		margin: 0
	}

	article .wp-block-group {
		font-size: .75em
	}

	article .wp-block-group h2 {
		font-size: 1.5em
	}

	article h3 {
		margin-top: 1em;
		font-size: 1.5em;
		text-align: left;
		width: 100%
	}

	.compartir nav a {
		font-size: .75rem;
		padding: .75rem .5rem
	}
	
	form .flex.checkbox .aviso {flex-direction: row !important}
	
}


/* Celulares muy chiquitos */

@media screen and (min-width: 180px) and (max-width: 320px) {}

/* Tabletas */
@media screen and (min-width: 721px) and (max-width: 1130px) {}

/* 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) {}