/*

Theme Name: Gruas DTM
Description: Landing
Theme URI: https://gruasdetm.com
Author: Buen-Día
Version: 2.6

*/

/* CSS Resets */


html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, img, ins, q, small, strong, sub, sup, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	border: 0;
	padding: 0
}
article, aside, figure, figure img, figcaption, hgroup, footer, header, nav, section, video, object {
	display: block
}
a img {	border: 0}
figure {position: relative; margin: 0; width: 100%}
figure img {width: 100%; height: auto; margin: 40px 0; display: block;}

html { margin: 0 !important;}


:root {
/* Colores */
--color-claro: #f0f0f0;
--color-encabezados: #FFB700;
--color-contraste: rgb(20,20,21);

--color-principal: #FFB700;
--color-secundario: #E6FC00;

/* Tamaños de letra */
--texto-menu: 14pt;
--texto-reg: 14pt;
--texto-desc: 12pt;
--texto-detalle: 10pt;

--iconos: 18pt;

/* Padding */
--pad-sec: 80px 40px;
--pad-boton: 10px 20px;
--pad-caja: 20px;

}

body {
    overflow-x: hidden;
    max-width: 100vw;
    height: 100vh;
	font-family: "Inter", sans-serif;
	font-weight: 400;
    min-height: 100vh;
	line-height: 1.5;
	letter-spacing: 1px;
	background-color: var(--color-contraste);
	margin: 0;
}

.wp-block-heading {color: var(--color-claro);font-family: "DM Serif Text", serif; letter-spacing: 0;}
h1.display, h2.display, h3.display {font-family: "DM Serif Text", serif; letter-spacing: 0;}
h1, h2, h3, h4, h5 {margin: 0}
h1 {font-weight: 900; font-size: 64px; text-transform: none; line-height: 1;}
h2 {font-weight: 700; font-size: 24pt; text-transform: none; line-height: 1.2;}
h3 {font-weight: 700; font-size: 18pt; line-height: 1.2}
h4 {font-weight: 500; font-size: 16pt; color: var(--color-principal) }
h5 {font-weight: 400; font-size: 12pt; }


.flex {display: flex; width: 100%}
.wrap {flex-wrap: wrap;}
.flex.col {flex-direction: column;}
.flex.row {flex-direction: row;}
.flex.rev {flex-direction: row-reverse;}
.flex.center {align-items: center; justify-content: center;}
.flex.start {align-items: start;}
.flex.row.end {align-items: flex-end;}
.flex.row.end {justify-content: flex-end;}
.flex.space {justify-content: space-between;}
.flex.col.space.end {align-items: flex-end;justify-content: space-between; }
.flex.col.center.end {align-items: flex-end; justify-content: center; }

.gmed {gap: .5rem !important}
.g1 {gap: 1rem !important}
.g2 {gap: 2rem !important}
.g3 {gap: 3rem !important}
.g4 {gap: 4rem !important}
.g8 {gap: 8rem !important}

/* Filtros */

.deg {
	background: rgb(0, 0, 0);
	background: -moz-linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.758140756302521) 99%);
	background: -webkit-linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.758140756302521) 99%);
	background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.758140756302521) 99%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="var(--color-contraste)000", endColorstr="var(--color-contraste)000", GradientType=1);
	opacity: .7;
	z-index: 1;
	width: 100%;
	min-height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	-webkit-transition: all 0.3s ease-in;
	-o-transition: all 0.3s ease-in;
	transition: all 0.3s ease-in;
	-ms-transition: all 0.3s ease-in;
}

.deg.rad {
	background: #1c1626;
	background: radial-gradient(circle, rgba(28, 22, 38, 1) 0%, rgba(20, 13, 23, 0) 100%);
	z-index: 2;
}

.deg.dtm {
		background: linear-gradient(135deg, rgba(227, 217, 7, 0.63) 0%, rgb(250, 145, 0) 99%);
	mix-blend-mode: color;
	z-index: 1;
}

.deg.start {
background: #000000;
background: -webkit-linear-gradient(90deg, rgba(0, 0, 0, 0.81) 0%, rgba(0, 0, 0, 0.3) 100%);
background: -moz-linear-gradient(90deg, rgba(0, 0, 0, 0.81) 0%, rgba(0, 0, 0, 0.3) 100%);
background: linear-gradient(90deg, rgba(0, 0, 0, 0.81) 0%, rgba(0, 0, 0, 0.3) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000", endColorstr="#000000", GradientType=1);
}

.deg.end {
background: #000000;
background: -webkit-linear-gradient(-90deg, rgba(0, 0, 0, 0.81) 0%, rgba(0, 0, 0, 0.3) 100%);
background: -moz-linear-gradient(-90deg, rgba(0, 0, 0, 0.81) 0%, rgba(0, 0, 0, 0.3) 100%);
background: linear-gradient(-90deg, rgba(0, 0, 0, 0.81) 0%, rgba(0, 0, 0, 0.3) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000", endColorstr="#000000", GradientType=0);
}

.grayscale {
	filter: none;
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	-webkit-transition: all 0.3s ease-in;
	-o-transition: all 0.3s ease-in;
	transition: all 0.3s ease-in;
	-ms-transition: all 0.3s ease-in;
}


.loader {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid var(--color-principal);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.error {
  color: #ff0000;
  text-align: center;
  padding: 20px;
}


nav a {font-weight: 800; text-transform: uppercase}

ul { list-style: none; margin: 0;}
ol {margin-left: 40px; margin-bottom: 40px;}
ol li {margin-bottom: 20px;}
ul.children { margin-left: 15px;}
ul.children li:last-child {padding: 0 0 0 0 !important;}
a, a:hover { text-decoration: none;
	-webkit-transition: all 0.3s ease-in;
	-o-transition: all 0.3s ease-in;
	transition: all 0.3s ease-in;
	-ms-transition: all 0.3s ease-in;}
a:hover {font-weight: 600}
a, .nav li a { -webkit-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; transition: all 0.3s ease-in; -ms-transition: all 0.3s ease-in; color: #000; }


p {line-height: 1.5; font-weight: 300; font-size: 16pt; text-align: left; margin: 0}



.deg.neg {
	opacity: .75;
background: rgb(0,0,0);
background: -moz-linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 64%, rgba(0,0,0,0.75) 64%, rgba(0,0,0,0) 100%);
background: -webkit-linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 64%, rgba(0,0,0,0.75) 64%, rgba(0,0,0,0) 100%);
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 64%, rgba(0,0,0,0.75) 64%, rgba(0,0,0,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);
	-webkit-transition: all 0.3s ease-in;
	-o-transition: all 0.3s ease-in;
	transition: all 0.3s ease-in;
	-ms-transition: all 0.3s ease-in;
}

.deg.neg.circular {
	background: rgb(0,0,0);
background: -moz-radial-gradient(circle, rgba(0,0,0,0.6853335084033614) 0%, rgba(0,0,0,0.5424763655462185) 20%, rgba(0,0,0,0) 98%);
background: -webkit-radial-gradient(circle, rgba(0,0,0,0.6853335084033614) 0%, rgba(0,0,0,0.5424763655462185) 20%, rgba(0,0,0,0) 98%);
background: radial-gradient(circle, rgba(0,0,0,0.6853335084033614) 0%, rgba(0,0,0,0.5424763655462185) 20%, rgba(0,0,0,0) 98%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);
}


.grayscale { filter: none; -webkit-filter: grayscale(100%); -moz-filter:    grayscale(100%); -ms-filter:     grayscale(100%); -o-filter:      grayscale(100%); -webkit-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; transition: all 0.3s ease-in; -ms-transition: all 0.3s ease-in; }


#preloader {
	position: fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color:#f0f0f0; /* change if the mask should be a color other than white */
	z-index:99; /* makes sure it stays on top */
}

#status {
	width:240px;
	height:240px;
	position:absolute;
	left:50%; /* centers the loading animation horizontally on the screen */
	top:50%; /* centers the loading animation vertically on the screen */
	background-image: url(img/loading.gif); /* path to your loading animation */
	background-size: 100px;
	background-repeat:no-repeat;
	background-position:center;
	margin:-100px 0 0 -100px;
}


.logo {flex: 1 1 auto; min-height: 180px; width: min(100%, 210px); display: inline-flex;}
.logo figure {background-size: contain; height: 100%; align-self: stretch; flex: 1 1; min-height: 180px}
.logo.cuadrado {width: 4rem; min-height: 5rem; flex: 0 1 4rem}
.logo figure.logoplus {min-height: 3rem;}



.whatsapp.fijo {position: fixed; bottom: 2rem; right: 2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 999; height: 5rem; width: 5rem;}
.whatsapp.fijo a {border-radius: 50%; background-color: var(--color-principal); padding: 1rem;  transform: scale(1); text-align: center;}
.whatsapp.fijo a i {font-size: 3rem;color: var(--blanco); max-width: 3rem; max-height: 3rem; min-width: 48px; display: flex; align-items: center; justify-content: center; text-align: center;}
.whatsapp.fijo a:hover {background-color: var(--color-secundario); transform: scale(1.1);}

/*  HEADER */


header { top: 0; left: 0; margin: 0 auto; width: 100%; padding: 0px; min-height: 120px; z-index: 4; color: var(--color-contraste); background-color: transparent;}
body.page header {position: absolute;}
header .logo {min-height: 80px; min-width: 120px; -webkit-transition: 600ms; -moz-transition: 600ms; -o-transition: 600ms; -ms-transition: 600ms; transition: 600ms;}
header .espacio {padding: 1em 4em; width: calc(100% - 8em); display: inline-flex; flex-direction: row; flex-wrap: wrap; justify-content:  space-between; align-items: center; align-content: center}
header .menu {display: inline-flex; flex-direction: row; flex-wrap: wrap; align-items: start; gap: 2em; text-align: left;}

header.scroll {position: fixed}
header.scroll .menu {display: inline-flex}

header.act {
	position: relative;
	background-color: var(--color-principal);
	height:  100vh;
	border: 0;
	width: 30vw;
	display: flex;
	justify-content: center;
	/* -webkit-transition: all 0.5s ease-in;
	-o-transition: all 0.5s ease-in;
	transition: all 0.5s ease-in;
	-ms-transition: all 0.5s ease-in; */
}

header.act .espacio {
	height: 100%;
	padding: 0;
	align-items: flex-start;
	justify-content: space-evenly;
	flex-direction: column;
	background-color: var(--color-oscuro);
	-webkit-transition: all 0.5s ease-in;
	-o-transition: all 0.5s ease-in;
	transition: all 0.5s ease-in;
	-ms-transition: all 0.5s ease-in;
}


header.act #verMenu {position: fixed; top: 0px; left: 40px;
	-webkit-transition: all 0.5s ease-in;
	-o-transition: all 0.5s ease-in;
	transition: all 0.5s ease-in;
	-ms-transition: all 0.5s ease-in;
}
header.act #verMenu span.linea {position: absolute;
	border-bottom-color: var(--color-contraste);
	-webkit-transition: all 0.5s ease-in;
	-o-transition: all 0.5s ease-in;
	transition: all 0.5s ease-in;
	-ms-transition: all 0.5s ease-in;}

header.act #verMenu span.linea:nth-child(1){transform: rotate(45deg);}
header.act #verMenu span.linea:nth-child(2){transform: rotate(-45deg);}
header.act #verMenu span.linea:nth-child(3){display: none}


header.act .menu {display: inline-flex; flex-direction: column; align-items: flex-start;}

nav.menu a {font-size: var(--texto-menu); color: var(--color-claro); font-weight: 700}
body.page nav.menu a {color: var(--color-claro);}
header.act nav.menu a {color: var(--color-contraste)}

header .logo { position: relative; display: inline-flex; min-height: 90px; flex: 0 1 auto; flex-direction: column;
 width: auto; min-height: 90px; min-width: 120px;
-webkit-transition: 600ms; -moz-transition: 600ms; -o-transition: 600ms; -ms-transition: 600ms; transition: 600ms;}
header .logo figure {min-height: 90px}

header figure.logotipo {background-size: contain; background-position: center; background-repeat: no-repeat; display: inline-flex; flex: 1 0;}


body#home header {background-color: transparent; position: absolute}
body#home header.act {background-color: var(--color-principal); position: relative}
body#home header .logo {min-height: 120px; min-width: 180px}
body#home header .logo figure {min-height: 120px;}
body#home header.act .logo {display: inline-flex}

a#scrolldown {cursor: pointer}


header nav.redes a {color: var(--color-contraste); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 30px; height: 30px; background-color: var(--color-principal); text-align: center; padding: 5px}


/*  Botones */

/* Menú Hamburguesa */
#verMenu {min-width: 30px; max-width: 30px;display: none;margin: 0; min-height:3rem; align-items: center; justify-content: center; flex-direction: column; gap: 5px; padding: 0}
#verMenu span.linea {width: 100%; display: block; border-bottom: 3px solid var(--color-claro); height: 1px;}

#verMenu:hover {background-color: inherit; color: inherit}
/* #verMenu:hover
#verMenu:hover span.linea {border-bottom: 1px solid var(--color-oscuro);}
 */

body.mobile {overflow: hidden !important; display: flex; flex-direction: row; flex-wrap: wrap;}
body.mobile main {width: 70%}

main .logo.mobile {display: none;
	-webkit-transition: all 0.2s ease-in;
	-o-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
	-ms-transition: all 0.2s ease-in;
}

header.act {
	position: relative;
	background-color: var(--color-principal);
	height:  100vh;
	border: 0;
	width: 30vw;
	display: flex;
	justify-content: center;
	/* -webkit-transition: all 0.5s ease-in;
	-o-transition: all 0.5s ease-in;
	transition: all 0.5s ease-in;
	-ms-transition: all 0.5s ease-in; */
}

header.act .espacio {
	height: 100%;
	padding: 0;
	align-items: flex-start;
	justify-content: space-evenly;
	flex-direction: column;
	background-color: var(--color-oscuro);
	-webkit-transition: all 0.5s ease-in;
	-o-transition: all 0.5s ease-in;
	transition: all 0.5s ease-in;
	-ms-transition: all 0.5s ease-in;
}

header.act .logo {
	position: relative;
	display: inline-flex;
width: min(100%,240px);
min-height: 120px
}




header.act #verMenu {position: fixed; top: 0px; left: 40px;
	-webkit-transition: all 0.5s ease-in;
	-o-transition: all 0.5s ease-in;
	transition: all 0.5s ease-in;
	-ms-transition: all 0.5s ease-in;
}
header.act #verMenu span.linea {position: absolute;
	border-bottom-color: var(--color-claro);
	-webkit-transition: all 0.5s ease-in;
	-o-transition: all 0.5s ease-in;
	transition: all 0.5s ease-in;
	-ms-transition: all 0.5s ease-in;}
header.act #verMenu span.linea:nth-child(1){transform: rotate(45deg);}
header.act #verMenu span.linea:nth-child(2){transform: rotate(-45deg);}
header.act #verMenu span.linea:nth-child(3){display: none}

header.act .menu {display: inline-flex; flex-direction: column; align-items: flex-start;}

/* header.scroll .logo {display: inline-flex} */
/* header.scroll #verMenu {display: none;} */


nav.redes {display: inline-flex; flex-direction: row; gap: 2em; align-items: center}
nav.redes a {color: var(--color-claro)}
nav.redes .fa-1x {font-size: 20pt}
nav.redes .fa {text-align: center; height: 30px; width: 30px; border-radius: inherit; background-color: inherit; padding: 0; color: var(--color-claro);
	-webkit-transition: 600ms;
	-moz-transition: 600ms;
	-o-transition: 600ms;
	-ms-transition: 600ms;
	transition: 600ms;
}


main {position: relative; width: calc(100% - 0px); display: flex; flex-direction: column; flex-wrap: wrap; z-index: 1; background-color: var(--color-contraste); z-index: 2;}
section {margin: 0 auto; width: 100%; display: flex; flex-direction: column; align-items: center; position: relative; min-height: auto; z-index: 2; overflow: hidden;}

.contenedor {display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; width: min(calc(100% - 16em), 1440px); padding: 8em;gap: 4em;
}

figure {background-position: center; background-repeat: no-repeat; background-size: cover;}
figure.fotograma {min-height: 75vh; }
figure.imagen {height: min(50vh, 540px); border-radius: 1em}
figure.icono {min-height: 96px; max-width: 96px; background-size: contain;}
figure.imagenfondo {position: absolute; z-index: 0; width: 100%; height: 100%;}


.columna {width: 100%; margin: 0 auto; position: relative; height: auto; flex: 1 1 auto; gap: 1em; display: flex; flex-direction: column;}

.columna.uno {width: calc(100% - 16em); padding: 0em 8em}
.columna.dos {width: calc(50% - 1em); gap: 1em; flex: 0 1 calc(50% - 2em);}
.columna.dos .fotograma {position: relative; display: block; margin: 0 0 40px}
.columna.tres {width: calc((100% / 3) - 2px); }


.cajatexto {width: calc(100% - 4em); padding: 2em; position: relative; display: inline-flex; gap: 2em}
.desc {display: inline-flex; flex-direction: column; flex: 0; gap: 1em; justify-content: flex-start}


.wp-block-button,
span.boton {
		text-align: left;
		padding: 0;
		width: auto;
		display: inline-flex;
		gap: 1em;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		color: var(--color-contraste);
		font-size: var(--texto-menu);
		font-weight: 400;
		
		
		-moz-transition: all 0.2s ease-in;
-webkit-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
-ms-transition: all 0.2s ease-in;
}

.wp-block-button:hover,
span.boton:hover {
	
	-moz-transition: all 0.2s ease-in;
-webkit-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
-ms-transition: all 0.2s ease-in;
}


.wp-block-button a,
span.boton a {color: var(--color-contraste); border: 3px solid var(--color-principal); padding: 10px 1em; border-radius: .5em;	cursor: pointer;
	display: inline-flex; flex-wrap: wrap; flex-direction: row;	    justify-content: center; align-items: center; font-weight: 700; background-color: var(--color-principal);
	    gap: 1em; text-transform: uppercase; font-size: 14pt;
	}

.wp-block-button:hover a,
span.boton:hover a {color: var(--color-principal); background-color: transparent;}

span.boton.alt a {color: var(--color-claro); border: 3px solid var(--color-claro); }
span.boton.alt2 a {background-color: var(--color-claro); border: 0; color: var(--color-encabezados); }
span.boton.alt3 a {background-color: var(--color-principal); border: 0; color: var(--color-claro); }




ul.grid {width: 100%; display: grid; grid-template-columns: repeat(6,1fr); gap: 2em}
ul.grid li {width: calc(100% - 4em); padding: 2em; position:relative; display: inline-flex; flex: 1 1; cursor: pointer; border-radius: 1rem; flex-direction: column; background-color: #fff;
	align-items: center; justify-content: center; gap: 1rem; grid-column: span 2;
}

ul.grid.clientes {grid-template-columns: repeat(12,1fr);}
ul.grid.clientes li {box-shadow: none; backdrop-filter: inherit; padding: 0; width: 100%; background-color: transparent}
ul.grid.clientes li figure {background-size: contain;}

ul.grid li a {display: inline-flex; flex: 1 1; align-self: stretch}

ul.grid li a figure {
	background-size: 34vw;
	background-color: #000;
	-moz-transition: all 0.2s ease-in;
-webkit-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
-ms-transition: all 0.2s ease-in;
}
ul.grid li:hover a figure {background-size: 33vw;
	-moz-transition: all 0.2s ease-in;
-webkit-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
-ms-transition: all 0.2s ease-in;
}

ul.grid > li:hover a figure ~ li a figure{
  opacity: 0.8;
}

.encabezado { position: relative; width: 100%; display: inline-flex; flex-direction: column; z-index: 8; text-align: center;}



/* Secciones  */
blockquote {display: inline-flex; flex: 1 0; flex-direction: column; gap: 2em; margin: 0}


section#home {min-height: calc((100vw * 9) / 16); color: var(--color-claro); align-content: center; justify-content: center; align-items: center;}


section.portada .bloque,
section#home .bloque {
	height: auto;
    width: min(50vw, 720px);
	text-align: center;
	color: var(--color-claro);
	z-index: 88;
	-webkit-transition: 600ms; -moz-transition: 600ms; -o-transition: 600ms; -ms-transition: 600ms; transition: 600ms;}

section#home .bloque h4 {font-weight: 400;}
section.portada .bloque p,
section#home .bloque p{text-align: center; color: var(--color-principal)}
section#home .bloque .logo {height: min(40vh,150px); width: min(100%, 320px); flex: inherit;}

section#home video {
	position: absolute;
	top: 0;
	left: 0;
	min-height: calc((100vw * 9) / 16); 
	min-width: 100vw;
	z-index: 0;
	object-fit: cover;
}

section a#scrolldown {color: var(--color-principal)}


section#about {background-color: var(--color-contraste); color: var(--color-principal)}
section#about .contenedor {flex-direction: row; z-index: 4;  }
section#about .contenedor .bloque {flex: 0 1 calc(50% - 2rem)}
section#about .contenedor h4 {font-weight: 400}
section#about h2.display {color: var(--color-claro)}
section#about p {color: var(--color-principal)}
section#about .contenedor span.boton {flex: 0 1 100%}

#nosotros section#about figure.fotograma {align-items: flex-start}
section figure.fotograma {background-attachment: fixed; color: var(--color-claro); align-items: flex-end; justify-content: center;}
section figure.fotograma span {position: relative; z-index: 8;}
section figure.fotograma .caja {z-index: 8; width: min(calc(50% - 8rem), 50vw); padding: 0 6rem 0 0}
section figure.fotograma .caja h2 {color: var(--color-principal)}

section .numeralia.contenedor { flex-direction: row;  gap: 4rem !important; align-items: flex-start; justify-content: center; padding: 8rem; width: min(calc(100% - 16rem), 1280px); color: #fff}
section .numeralia.contenedor i {color: var(--color-contraste)}
section .numeralia.contenedor h1 {color: var(--color-claro)}
section .numeralia.contenedor .columna.numeros {flex-direction: row; gap: 2rem; align-items: flex-start}
section .numeralia.contenedor .columna.enlace {flex: 0 1 calc(40% - 2rem)}
section .numeralia.contenedor .columna.dos {align-self:stretch; justify-content: center}
section .numeralia.contenedor .bloque {flex: 0 1 calc(50% - 1rem); text-align: center; width: auto;}
section .numeralia.contenedor .bloque.link { align-self:stretch}
section .numeralia.contenedor .bloque h1 {font-size: 48px;  color: var(--color-contraste)}
section .numeralia.contenedor .bloque h4 {font-weight: 400; color: var(--color-contraste); display: flex; flex-direction: row; gap: 1rem; justify-content: center; align-content: center; align-items: center; min-height: 3rem}
section#proceso figure.icono {border-radius: 50%; height: 4rem; width: 7rem; background-color: var(--color-principal); color: var(--color-oscuro); padding: 1rem}

section .numeralia .bloquecolor {background-color: #FFB70B; color: #000; padding: 2rem; border-radius: 1rem; }

section#proceso figure.icono { padding: .5rem }

	section#proceso figure.icono i { font-size: 3em; color: var(--color-contraste) }
	
section#proceso figure.fotograma .contenedor {z-index: 988; text-align: center; align-items: start}
section#proceso figure.fotograma .contenedor figure.thumb {min-height: 8rem; background-size: contain; }
section#proceso figure.fotograma .contenedor h4 {color: #fff;}


section#portada {width: 100%; min-height: calc(100vh - 122px); display: flex; position: relative; justify-content: center}
section#portada figure.logo {position: absolute; z-index: 88; height: min(40vh,320px); width: min(40vw, 840px);background-size: contain;}
section#portada .slider.portada {
	width: calc(100% - 0px);
	padding: 0;
	/* border: 20px solid #fff; */
	top: 0px;
	min-height: calc(100vh - 122px);
	left: 0;
	margin: 0px;
}

section#portada .slider .fotograma {width: 100%; min-height: calc(100vh - 122px);}
section#portada .slider .slick-prev {left: 60px}
section#portada .slider .slick-next {right: 60px}

section#portada .edicionbg,
section#portada .edicionbg figure.fotograma {position: relative; width: 100%; min-height: calc(100vh - 122px)}

section#portada nav.menu-event {position: absolute; width: min(50vw, 840px); bottom: 0; z-index: 44; background-color: var(--color-claro); display: inline-flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; gap: 1em; border-top-left-radius: 1em; border-top-right-radius: 1em; align-items: flex-end; padding: 2em;}
section#portada nav.menu-event h2 {font-weight: 900; text-transform: uppercase; font-size: 24pt;}
section#portada nav.menu-event span {}
section#portada nav.menu-event span:nth-child(2) {flex: 0 1 35%; align-items: flex-end;}





section#about.portada,
section.pagina.portada {color: var(--color-contraste);  min-height: auto}
section.pagina.portada .contenedor {width: min(calc(100% - 8em), 1440px); padding: 2em 4em}


section#about.portada {justify-content: center}
section#servicios .contenedor {flex-direction: column;}
section#galeria { color: var(--color-claro); min-height: auto}

section ul.grid figure.imagen {height: min(calc(40vw - 1em), 300px); width: min(100%, calc(50vw - 1em))}


section#faqs .contenedor {width: min(calc(100% - 8em), 1080px);}
section#faqs ul {display: inline-flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; width: 100%; margin: 0; gap: 2rem}
section#faqs ul li {background-color: #fff; border-bottom: 4px solid var(--color-principal); flex: 0 1 calc(50% - 5rem); border-radius: 1rem; padding: 2rem; 
	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25), 0px 115px 32px 0px rgba(0, 0, 0, 0.00), 0px 74px 30px 0px rgba(0, 0, 0, 0.01), 0px 42px 25px 0px rgba(0, 0, 0, 0.05), 0px 18px 18px 0px rgba(0, 0, 0, 0.09);
	backdrop-filter: blur(7.800000190734863px);
	-webkit-transition: all 0.3s ease-in;
	-o-transition: all 0.3s ease-in;
	transition: all 0.3s ease-in;
	-ms-transition: all 0.3s ease-in;
}

section#faqs ul li:hover {
	background-color: #f9f9f9;
	-webkit-transition: all 0.3s ease-in;
	-o-transition: all 0.3s ease-in;
	transition: all 0.3s ease-in;
	-ms-transition: all 0.3s ease-in;
	
}

section#faqs ul li h4 {display: inline-flex; flex-direction: row; gap: 1rem; align-items: center; width: 100%; justify-content: space-between; cursor: pointer; font-size: 14pt }
section#faqs ul li h4 i {font-size: 16pt;}
section#faqs ul li p {display: none; font-size: 12pt}
section#faqs ul li p a {font-weight: 700; color: var(--color-principal)}


section.pagina { min-height: calc(100vh - 0px);}
/* section.pagina {padding: 4em} */


section.pagina h1 { text-align: center;}
section.pagina h4 {margin-top: 2rem;}
section.pagina iframe {min-width: 100%; display: block; min-height: 540px; margin-bottom: 2em; position: relative;
    width: 100%;}
section.pagina .contenedor {padding: 6em 8em}
section.pagina .cajatexto {display: inline-block; width: calc(100% - 80px); min-height: 100%; column-count: 2; column-gap: 80px; background-color: #eee; font-weight: 700; font-size: 14pt; padding: 40px; color: #000}
section.pagina .cajatexto h2 {font-size: 18pt; margin-top: 0}




input,
select,
textarea {border: 2px solid #bbb; color: #0f0f0f; padding: .5rem 1rem; font-size: 1rem; background-color: transparent; border-radius: .5rem; flex: auto}

input[type="submit" i] {font-family: "Inter", sans-serif; font-weight: 700; letter-spacing: 1px; border-radius: .5rem; color: var(--color-principal);  border: 2px solid var(--color-principal); cursor: pointer; text-transform: uppercase; font-size: 14pt; padding: 1rem 2rem}
input[type="submit" i]:hover {background-color: var(--color-principal);
	color: #fff;}

form span.req { font-weight: 800; margin: 0 1rem 0 .5rem; color: var(--color-principal)}

form button:disabled,
form input[type="submit" i].desactivado {color: #222;}

form .flex.checkbox {justify-content: space-between; margin: 2rem 0}
form .flex.checkbox .aviso {flex: 1 0 70%}

/* Blog */

section.post .encabezado {justify-content: center; gap: 1em}
section.post .contenedor {gap: 2rem; padding: 4em}
section.post figure.portada { width: 100%; height: min(70vh, 540px); border-radius: .5em; margin: 0 }
section.post .encabezado {gap: 1rem}
section.post .encabezado h4 {font-weight: 400;}
section.post .encabezado h6 {margin: 0; font-size: 12pt}
section.post .encabezado .autor h6 a {color: var(--color-principal); font-weight: 900; text-decoration: underline;}

section.post article { width: min(100%, 840px); }

article {gap: 0;display: flex; flex-direction: row; align-items: center;justify-content: flex-start; align-items: flex-start; flex-wrap: wrap}
article .bloque {
	display: inline-block;
	/* flex-direction: column; gap: 1em; align-items: flex-start;width: 100%; flex 1 0 1; */
	line-height: 1.6;
	font-weight: 400;
	text-align: left;
	margin: 0 0 1em;
	font-size: 18px;
	color: #000;
}

article .medio.bloque {width: 50%; flex: 1 0}


article .bloque img {width: 100%; height: auto}

article figure.wp-block-image {margin: 2em 0; font-size:  16px; font-style: italic; width: 100%}
article .gallery {gap: 1em;}

article figure.wp-block-image.dos {width:calc(100% / 2)}
article figure.wp-block-image span {text-transform: none; font-size: 14px; font-weight: 400;}

article h2{text-transform: none; font-size: 1.5em; line-height: 1.2; margin: 2em 0 0; width: 100%}
article p {margin-bottom: 1em}
article .has-text-align-center {text-align:center; width: 100%;}
article p,
article ol,
article ul {font-size: 16pt;}

article p a {color: var(--color-principal); font-weight: 700; border-bottom: 2px solid var(--color-principal)}

article ol,
article ul {text-align: justify; text-align-last: left}

article figure img {height: auto}
article .wp-block-embed {width: 100%; margin: 2em auto; display: block;}
	article iframe {width: 100%; min-height: 480px}

article .bloque span, 
article .bloque p span {text-transform: none; line-height: 28px; font-size: 18px;}


article .wp-block-group {
	margin: 2em 0; text-align: left;  color: var(--color-oscuro);
	display: flex; flex-direction: column; align-items: flex-start; flex: 0 1 100%;
	width: 100%;
}

article .wp-block-group .wp-block-group__inner-container{
	background-color: #ddd;
	padding: 4em; width: calc(100% - 8em);
	display: flex; flex-direction: column; align-items: flex-start; gap: 1em; 
	flex: 0 1 50%;
	border-radius: .5em; 
}

artcile .wp-block-group .wp-block-group__inner-container .wp-block-group .wp-block-group__inner-container {
	padding: 0; width: 100%; flex: 0 1 100%;
	border-radius: 0;
}

article .wp-block-group h2 {margin: 0 0 2em}


article .wp-block-group .bloque {width: 100%;justify-content: flex-start; align-items: flex-start; margin: 0 !important}

article .wp-block-group p.has-medium-font-size {color: #162f29; margin: 0; font-weight: 400;}
article .wp-block-group h2 {text-transform: none; margin: 0}
article .wp-block-group h2 a {color: var(--color-principal)}
article .wp-block-group h2.entry-title a strong {font-weight: 700; font-size: 1em}

article .wp-block-group p a {color: var(--link); border-bottom: 2px solid var(--link); padding-bottom: 2px; font-weight: 700;}
	
	.wp-block-group h2{font-size: 1.5em !important}
	.wp-block-group h2 strong {font-size: .75em; font-weight: 400}


article .wp-block-image img { cursor: pointer; -webkit-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; transition: all 0.3s ease-in; -ms-transition: all 0.3s ease-in; margin: 0}
article .wp-block-image img:hover { transform: scale(1.025); -webkit-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; transition: all 0.3s ease-in; -ms-transition: all 0.3s ease-in; }

article .wp-block-gallery {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; width: 100%; gap: .25em}
article figure.wp-block-gallery.has-nested-images {margin: 2em 0 1em; display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; gap: 1em}
article figure.wp-block-gallery figure.wp-block-image{width: calc(50% - .5em); margin: 0; height: 100%; align-self: stretch; display: flex; flex-direction: column; justify-content: flex-start; gap: 1em}
article .wp-element-caption {min-height: 2em}
article .wp-element-caption em {margin: .75em 0;
	display: inline-flex;
	font-size: 16px;}

article .wp-block-columns {display: flex; gap: 4em}

article .wp-block-columns .wp-block-column.is-layout-flow {display: flex; flex-direction: column; gap: 1rem;}

article h2.wp-block-heading {color: var(--color-principal); font-size: 32px}

article .bloque p {font-size: 18px; display: inline;}

article p.has-x-large-font-size {font-size: 3em;}
article p.has-large-font-size {font-size: 2em;}
article p.has-medium-font-size {font-size: 1.25em;}
article p.has-small-font-size {font-size: .75em;}

article ul.wp-block-list {list-style: disc; display: block; width: 100%; margin: 1em 1em 2em}
article ul li { letter-spacing: none; margin-bottom: 16px; text-align: left;}

article .wp-block-button {margin: 2rem auto}




#modalInfo {
	position: fixed;
	background-color: rgba(0,0,0,.6);
	backdrop-filter: blur(5px);
	 -webkit-backdrop-filter: blur(5px);
	display: none;
	top: 0;
	left: 0;
	z-index: 33;
	width: calc(100% - 8em);
	padding: 4em;
	height: calc(100vh - 8em);
}

#modalInfo .contenedor {
	width: min(100%, 1440px);
	display: flex;
	margin: 0;
	flex: 1 1;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex-wrap: nowrap;
	padding: 0;
	width: min(100%, 50vw)}


#modalInfo .contenedor.catalogo {flex-direction: row;color: var(--color-claro); width: calc(100% - 8rem); padding: 0 4rem; flex-wrap: wrap;}
#modalInfo .contenedor .aside {min-width: 20%; flex: 0 1;}
#modalInfo .contenedor figure {background-size: contain; height: min(calc(100vh - 8em), 960px); width: min(100%, 1280px); margin: 0 auto; border-radius: 1rem}
#modalInfo .contenedor .columna {align-items: center;}
a#cerrarModal{
	top: 15px;
    right: 15px;
  position: absolute;
	height: auto;
	color: var(--color-claro) !important;
	padding:0;
	z-index: 8888;
	font-size: 32pt;
	cursor: pointer;
	}


#modalInfo .contenedor .cajatexto {width: 100%; padding: 0;  flex-direction: column; max-height: 80vh; overflow: hidden; overflow-y: auto; }

#modalInfo nav.barragal {
	width: 100%;
	height: 3em;
	background-color: rgba(0,0,0,0.7);
	color: var(--text-alt);
	position: absolute;
	top: 0;
	left: 0;
	justify-content: space-between;
}

#modalInfo nav span {
	text-transform: none;
	font-size: 1em;
}

#modalInfo .contenedor p {
	width: 100%;
	height: 100%;
}

#modalInfo .contenedor iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	height: max(calc((100% * 9) / 16), 720px);
	max-height: calc((100vh - 8em) - 65px);
}


#modalInfo .indice {padding: 1.5em;}
#modalInfo .indice span {font-size: 1em}
#modalInfo .indice span.cerrarfondo {padding: 5px 1em;}

#modalInfo .slider {background-color: transparent; width: auto; min-width: 70%; margin: 0; min-height: calc(100vh - 8em); flex: 0 1}
#modalInfo .slide {color: var(--color-claro); text-align: center; min-height: calc(100vh - 12em)}
#modalInfo .slick-prev,
#modalInfo .slick-next {border: 0; background-color: transparent;}
#modalInfo .slide .flex {height: 100%; gap: 1em}
#modalInfo .slide .fotograma {height: 100%; min-height: calc(100% - 4em)}
#modalInfo .slide img {height: 100%; width: 100%; margin: 0 auto; object-fit: contain;}

#modalInfo .slide h4 {font-weight: 400; font-size: 1.1em; line-height: 1.2; max-width: 50vw; text-transform: none;}


.compartir {
	position: fixed;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	background-color: var(--color-principal);
	border-top-right-radius: .5rem;
	border-bottom-right-radius: .5rem;
	border: 1px solid var(--color-claro);
	border-left: 0px;
	z-index: 7;
	max-width: 4em;
}

.compartir h4 {
	writing-mode: vertical-lr;
	padding: 1em .5em;
	color: #fff;
	font-weight: 400;
	text-transform: none;
	cursor: default
}

.compartir nav a {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border-top: 1px solid #fff;
	color: #fff;
	font-size: 1.5em;
	padding: .5em
}

.compartir nav a:hover {
	transform: scale(1.25);
}


section#servicios.pagina {background-color: var(--color-contraste)}
#servicios section#galeria.portada figure {background-position: 50% 75%;}
section#servicios.pagina h1{color: var(--color-claro)}
section#servicios.pagina p{font-size: 14pt; margin: 0}
section#servicios.pagina ul.grid {gap: 4rem}
section#servicios.pagina ul.grid li {width: 100%; grid-column: span 3 ; padding: 0; position: relative; flex-direction: row; gap:0; background-color: transparent; color: var(--color-claro); align-items: flex-start; cursor: inherit}
section#servicios.pagina ul.grid li .caja {flex:auto; padding: 0; text-align: left;}


section.pagina ul.grid li .caja h2 {color: var(--color-principal); font-weight: 400;}

section#catalogo h1 {color: var(--color-claro)}
section#catalogo .contenedor {padding-top: 2rem}
section#catalogo ul.grid {gap: 2rem}
section#catalogo ul.grid li {width: 100%; grid-column: span 3 ; padding: 0; position: relative; flex-direction: column; gap: 1rem; background-color: transparent; color: var(--color-claro)}
section#catalogo ul.grid li figure {flex: auto; align-self: stretch; height: auto; border-radius: 0; min-height: calc((((100vw - 16rem) - 2rem) / 2)*3/4); border-radius: 1rem;}
section#catalogo ul.grid li .caja {flex: auto; padding: 1rem 0 2rem; text-align: left;}
section#catalogo ul.grid li#103 figure.imagen{background-position: 0% 0%;}

section#galeria.pagina {min-height: 70vh}
section#galeria.portada {min-height: 100vh; justify-content: center; align-items: center;}

section.pagina figure.banner {align-items: center; background-attachment: fixed; min-height: 70vh}
section.pagina figure.banner.end {justify-content: end}
section.pagina figure.banner .flex {z-index: 88; align-items: start; max-width: 50vw; padding: 0 8rem}
section.pagina figure.banner .flex h2 {color: var(--color-principal)}

section#clientes {background-color: var(--color-claro); color: var(--color-contraste)}
section#clientes .contenedor {padding: 8rem 0; width: min(100%, 1080px)}
section#clientes h1 {color: var(--color-contraste)}
ul.grid.clientes {gap: 4rem}
ul.grid.clientes li figure.logo {background-size: contain; width: 100%}

ul.grid.clientes li.tren-maya figure {background-size: 80%}
ul.grid.clientes li.aeropuerto-internacional-felipe-angeles {grid-column: span 3;}
ul.grid.clientes li.gobierno-de-texcoco {grid-column: span 6;}
ul.grid.clientes li.gcp,
ul.grid.clientes li.s,
ul.grid.clientes li.covadonga,
ul.grid.clientes li.extrusiones-metalicas,
ul.grid.clientes li.pisa,
ul.grid.clientes li.farmacias-guadalajara,
ul.grid.clientes li.tren-maya {grid-column: span 3}
ul.grid.clientes li.ingetek,

ul.grid.clientes li.pantrans,
ul.grid.clientes li.ibergruas {grid-column: span 4}

ul.grid.clientes li.maseca {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%}


section#contacto {background-color: var(--color-contraste); color: var(--color-claro)}
section#contacto .contenedor {align-items: flex-start;}
section#contacto h2.display {color: var(--color-principal)}
section#contacto a {color: var(--color-principal)}
section#contacto form h2.display {color: var(--color-contraste); text-align: center; margin-bottom: 2rem}
section#contacto .formulario {background-color: var(--color-claro); border-radius: 1rem; padding: 4rem 2rem; max-width: calc(50% - 8em);flex: auto; color: var(--color-contraste)}
section#contacto form {width: 100%;}
section#contacto input,
section#contacto textarea {background-color: transparent; border-color: var(--color-contraste)}
section#contacto textarea {min-height: 20vh}
section#contacto input[type="submit" i] {background-color: var(--color-principal); border: 0; color: var(--color-contraste)}
section#contacto ::placeholder {color: var(--color-contraste)}
/* Footer */
.break {height: min(50vh,480px);}

footer {background-color: var(--color-contraste); color: var(--color-claro);height: min(50vh, 480px); position: fixed; bottom: 0; display: flex; width: 100%; z-index: 0; justify-content: center;align-items: center}
footer .espacio {position: relative; width: calc(100% - 8em); padding: 4em; max-width: 1440px; display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 4em; flex: 1}
footer iframe {border: 0; height: auto; align-self: stretch; min-height: 40vh; width: 50%}

footer a,
footer h4,
footer nav.menu a {color: var(--color-claro);}


footer .columna.logopie {width: 100%; flex: 1 0 100%}
footer .logo.cuadrado {width: 9rem; min-height: 10rem; margin-bottom: 1rem;}

footer .columna {gap: 1em; flex: auto}
footer .columna p {line-height: 1.5; font-size: 10pt;color: var(--color-claro)}



footer .columna h2 {color: var(--color-principal); font-weight: 700; font-size: 24pt; line-height: 1.2;}
footer .columna.contacto h2 { margin-bottom: 1em; padding-top: .3em}
footer .columna h4 {margin: 0}
footer .columna.contacto {align-items: flex-start; gap: .5em}

footer nav.redes {display: inline-flex; flex-direction: row; gap: 2em}
footer nav.redes a {color: var(--color-principal)}
footer nav.redes .fa-1x {font-size: 24pt}
footer nav.redes .fa {text-align: center; height: 30px; width: 30px; border-radius: inherit; background-color: inherit; padding: 6px 2px 0px 4px; color: var(--color-claro);
	-webkit-transition: 600ms;
	-moz-transition: 600ms;
	-o-transition: 600ms;
	-ms-transition: 600ms;
	transition: 600ms;
}


footer nav.menu {display: flex; flex-direction: column; gap: 1em}