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



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

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

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

	header .logo {
		height: 2em;
		min-height: 2em;
		width: 2em;
		min-width: 3em;
	}

	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: 32px
	}

	h2 {
		font-size: 24px
	}

	h5 {
		font-size: 12pt
	}
	
	p {font-size: 12pt}

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


	.contenedor,
	section#about .contenedor,
	section.pagina.portada .contenedor,
	section .numeralia.contenedor,
	section.pagina .contenedor,
	footer .espacio {
		width: calc(100% - 4em);
		padding: 6em 2em 4em;
		gap: 2em;
		max-width: calc(100% - 4em);
		margin: 0;
	}

	

	.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;
	}


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

	section#home .bloque .logo {
		min-width: 240px;
		width: 70%
	}

	section#home {
		min-height: 60vh
	}

	section#home video {
		aspect-ratio: 9 / 16;
		max-height: 100vh;
		position: absolute;
	}

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

	section .numeralia.contenedor { flex-direction: column; gap: 2rem; }

	section .numeralia.contenedor .bloque { flex: 0 1 100% }

	section .numeralia.contenedor .bloque.flex.center { justify-content: flex-start }
	section .numeralia .bloquecolor {width: calc(100% - 4rem)}

	section .numeralia.contenedor .bloque h1 { font-size: 32px; }

	

	section .numeralia.contenedor span.boton a { flex-wrap: nowrap }


	section#about .contenedor .bloque {
		flex: inherit;
	}

	

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

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

	section figure.fotograma .caja {padding: 2rem 1rem; width: calc(100% - 2rem)}

	section#catalogo ul.grid li figure {min-height: 33vh;}
	section#catalogo ul.grid li {flex-direction: column; grid-column: span 8;}
	ul.grid.clientes {grid-template-columns: repeat(8, 1fr); gap: 1rem}
	ul.grid.clientes li {grid-column: span 2}
	ul.grid.clientes li figure.logo {background-size: contain; width: 100%; min-height: 80px}
	ul.grid.clientes li.tren-maya {grid-column: span 2;}
	ul.grid.clientes li.tren-maya figure {background-size: 80%}
	ul.grid.clientes li.aeropuerto-internacional-felipe-angeles {grid-column: span 2;}
	ul.grid.clientes li.gobierno-de-texcoco {grid-column: span 4;}
	ul.grid.clientes li.gcp,
	ul.grid.clientes li.pantrans {grid-column: span 2}
	ul.grid.clientes li.ibergruas {grid-column: span 4}
	ul.grid.clientes li.pisa,
	ul.grid.clientes li.maseca,
	ul.grid.clientes li.farmacias-guadalajara {grid-column: span 2}
	ul.grid.clientes li.pisa figure.logo,
	ul.grid.clientes li.maseca figure.logo,
	ul.grid.clientes li.farmacias-guadalajara figure.logo {background-size: 70%}

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

	section#contacto .formulario {max-width: inherit;}
	section.pagina figure.banner {min-height: 40vh; justify-content: start}
	section.pagina figure.banner {background-attachment: inherit}
	section.pagina figure.banner .flex {width: calc(100% - 4rem); padding: 4rem 2rem; max-width: inherit;}
	
	section#servicios.pagina ul.grid li {grid-column: span 6}
	section#servicios.pagina figure.banner {flex-direction: column}
	section#servicios.pagina figure.banner .flex.g2 {padding: 8rem 2rem;}

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

	footer iframe {order: 1; max-width: calc(100vw - 0rem); width: 100%; }

	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)}
	.club #registro form .flex.row {flex-direction: row; flex-wrap:wrap; gap: 1rem;}
	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.catalogo {padding: 0; width: 100%; flex-direction: column; gap: 1rem; max-width: inherit}
	#modalInfo .slider {width: 100%; min-height: 50vh}
	#modalInfo .contenedor figure {min-height: 50vh; height: 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}
	
	form#splash-form .datos .flex.row {flex-direction: row !important}
	body#splash-page section#about .contenedor .bienvenida h4 {text-align: center;}
}


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