/*

Theme Name: SP-360
Description: Landing by Buen Día
Theme URI: https://sp-360.com
Author: Buen-Día
Version: 2.7

*/

/* 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: #eee;
--color-encabezados: #FFB700;
--color-contraste: #101010;

--color-principal: #ffed00;
--color-secundario: #ddd;
--color-complemento: #2660a4;

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

--iconos: 18pt;

/* Padding */
--pad-sec: 8rem;
--pad-boton: 2rem 1rem;
--pad-caja: 4rem;

}

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

h1.display,
h2.display {text-transform: uppercase;font-weight: 700; }
h3.display,
h4.display {text-transform: uppercase;font-weight: 400;}
h1, h2, h3, h4, h5 {margin: 0}
h1 {font-weight: 500; font-size: 2rem; text-transform: none; line-height: 1.2;}
h2 {font-weight: 700; font-size: 2rem; text-transform: none; line-height: 1.2;}
h3 {font-weight: 500; font-size: 1.5rem; line-height: 1.2}
h4 {font-weight: 700; font-size: 1rem; }
h5 {font-weight: 400; font-size: .5rem; }


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

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

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

ul { list-style: none; margin: 0;}
ul.lista {list-style: inherit; display: flex; flex-direction: column; width: 100%; gap: 1rem }
ul.lista li {margin-left: 1rem; width: calc(100% - 1rem)}
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: 14pt; text-align: left; margin: 0}


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



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

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

ul.grid .loader {grid-column: span 6}

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

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


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

/*  HEADER */


header { position: relative; top: 0; left: 0; margin: 0 auto; width: 100%; padding: 0px; min-height: auto; z-index: 4; color: var(--color-contraste); background-color: var(--color-claro); display: flex; align-content: center; justify-content: center; align-items: center}

header .logo {min-height: 80px; min-width: 210px; -webkit-transition: 600ms; -moz-transition: 600ms; -o-transition: 600ms; -ms-transition: 600ms; transition: 600ms;}
header .espacio {padding: 1em 4em; width: min(calc(100% - 8em), 1440px); 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-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;}


nav.menu a {font-size: var(--texto-menu); color: var(--color-contraste); font-weight: 400; padding: .5rem ; border-bottom: 4px solid transparent}
nav.menu a:hover {border-bottom: 4px solid var(--color-principal)}

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



a#scrolldown {cursor: pointer}



nav.redes {display: inline-flex; flex-direction: row; gap: .5em; 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;
}

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; text-align: center; padding: 5px;}
header nav.redes a:hover { background-color: var(--color-principal);}


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



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




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

.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 {padding: 1rem 2rem; border-radius: 1rem;	cursor: pointer; display: inline-flex; flex-wrap: wrap; flex-direction: row; justify-content: center; align-items: center; font-weight: 500;text-transform: uppercase; gap: 1em;
	background-color: var(--color-principal); color: var(--color-contraste); border: 3px solid var(--color-principal); 
	}

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

span.boton.alt a {background-color: var(--color-principal); color: var(--color-contraste); border-color: var(--color-principal);  }
span.boton.alt a:hover {background-color: var(--color-secundario); border-color: var(--color-secundario)}
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: 100%; position:relative; display: inline-flex; flex: 1 1; cursor: pointer; border-radius: .5rem; flex-direction: column; background-color: #fff;
	align-items: center; justify-content: center; gap: 1rem; grid-column: span 2; overflow: hidden;

}


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

ul.grid li a figure.imagen {
	border-radius: .5rem;
	background-size: cover;
	transform: scale(1);
	height: min(480px, 50vh);
	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 {
	transform: scale(1.1);
	-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 a .caja {width: calc(100% - 8rem); padding: 4rem; z-index: 3; position: absolute; height: calc(100% - 8rem); top: 0; color: 0; color: var(--color-claro); text-align: center; gap: .5rem}
ul.grid li a .caja .archivo {background-color: var(--color-principal); font-weight: 700; color: var(--color-contraste); border-radius: .25rem; padding: .5rem; font-size: .75rem}
ul.grid li figure .deg {border-radius: .5rem}

body#inicio ul.grid li:nth-child(4),
body#inicio ul.grid li:nth-child(5) {grid-column: span 3;}

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

ul.grid li h4 {font-size: 12pt; font-weight: 400}
ul.grid li h3 {font-size: 16pt; font-weight: 600;}


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




section#home {min-height: calc(100vh - 112px); color: var(--color-claro); align-content: center; justify-content: center; align-items: center;}


section#home .bloque {
	height: min(50vh, 480px);
    width: min(60vw, 840px);
	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 h2 {font-weight: 400;  font-size: 2rem; line-height: 1.5}
section#home figure.imagenfondo {background-attachment: fixed;}

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#home a {color: var(--color-principal)}

section.aside figure.imagen {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);}


section#about {background-color: var(--color-secundario); color: var(--color-contraste)}
section#about .contenedor {flex-direction: row-reverse;}
section#about.pagina .contenedor {width: min(70vw, 1080px);}
section#about .contenedor .bloque {flex: 0 1 calc(50% - 1rem)}
section#about .contenedor h4 {font-weight: 400}

section#about .contenedor span.boton {flex: 0 1 100%}
section#about figure.fotograma {background-attachment: fixed; color: var(--color-claro)}
section#about figure.fotograma span {position: relative; z-index: 8;}

section#about .slider {border-radius: 1rem; 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);
} 
section#about .columna.image {flex: 0 1 calc(50% - 3rem); width: calc(50% - 3rem)}
section#about .slider figure.imagen {min-width: calc(((100vw - 16rem)/ 2) - 8rem); box-shadow: inherit; backdrop-filter: inherit;}

section .slider .slide {overflow: hidden;border-radius: 1rem;}
section .slider .slide figure {transform: scale(1);
-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;}
section .slider figure .caja {z-index: 33; color: #fff; position: relative; width: calc(100% - 4rem); height: calc(100% - 6rem); padding: 2rem 2rem 4rem; align-items: star; justify-content: flex-end; }

section .slider .slide:hover figure {transform: scale(1.02);
-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;}

section#servicios .contenedor {padding: 4rem}

section#servicios.pagina {min-height: auto}
section#servicios.pagina .contenedor {width: min(calc(100% - 8rem), 1440px); gap: 2rem}
section#servicios.pagina figure {border-radius: 1rem; width:calc(((100vh - 122px) - 8rem) * 1.02 ); min-height: calc((100vh - 122px) - 8rem); flex: 0 1 30vw;}
section#servicios.pagina article .encabezado,
section#servicios.pagina article .encabezado h1 {text-align: left}
section#servicios.pagina article .encabezado h4 {text-transform: uppercase; font-weight: 400; margin: 0}

section.pagina article {flex-direction: column; gap: 1rem; justify-content: center; flex: 0 1 50vw}
section.pagina article h1.display {font-size: 2rem; }

section#adicionales .contenedor {padding: 0 4rem 4rem;}
section#adicionales ul {display: inline-flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; width: 100%; margin: 0; gap: 2rem}


section#adicionales 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#adicionales 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#adicionales ul li h2 {display: inline-flex; flex-direction: row; gap: 1rem; align-items: center; width: 100%; justify-content: space-between; cursor: pointer; font-size: 18pt; margin: 0; }
section#adicionales ul li h2 i {font-size: 16pt;}
section#adicionales ul li .texto {display: none; font-size: 12pt;}


section#adicionales.clienteperfil .contenedor {padding: 4rem}
section#adicionales.clienteperfil ul {flex-direction: column}
section#adicionales.clienteperfil article {flex: 0 1 calc(50% - 6rem)}
section#adicionales.clienteperfil ul li {flex: auto;width: calc(100% - 4rem)}
section#adicionales.clienteperfil .tiendas {flex-direction: row; gap: 1rem;}
section#adicionales.clienteperfil .tiendas a {border: 1px solid #ccc; padding: .5rem 1rem; border-radius: 4px;}

section#proyectos {background-color: var(--color-secundario)}
section#proyectos .contenedor {padding: 4rem 8rem 8rem}
section#contacto {color: var(--color-claro); overflow: hidden;}

section#contacto figure.imagenfondo {transform: scale(1);
-webkit-transition: 600ms; -moz-transition: 600ms; -o-transition: 600ms; -ms-transition: 600ms; transition: 600ms;}

section#contacto:hover figure.imagenfondo {transform: scale(1.05);
-webkit-transition: 600ms; -moz-transition: 600ms; -o-transition: 600ms; -ms-transition: 600ms; transition: 600ms;}

form#form_news {
	display: flex; flex-direction: row; gap: 1rem; 
	width: min(100%, 640px);
	padding: 1rem 0 2rem;
	color: var(--color-claro);
	align-items: center;
	justify-content: space-between;
}

form#form_news input {color: var(--color-claro)}


form#form_news input[type="submit" i] {background-color: var(--color-claro); color: var(--color-principal)}

form#form_news input::placeholder {color: var(--color-claro)}



section#portada {width: 100%; min-height: calc(100vh - 112px); 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-claro); background-color: var(--color-principal); min-height: auto}
section.pagina.portada .contenedor {width: min(calc(100% - 8em), 1440px); padding: 2em 4em}

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#clientes {background-color: #fff; color: var(--color-contraste)}
section#clientes .contenedor {padding: 4rem 0; width: min(100%, 1080px)}
section#clientes h1 {color: var(--color-contraste)}
section#clientes .slider {min-height: 90px;}

section#clientes .slider .slick-prev, 
section#clientes .slider .slick-next {top: calc(50% - .75rem)} 
section#clientes .slider .slick-prev:before, 
section#clientes .slider .slick-next:before {color: var(--color-contraste)}
section#clientes .slider .slick-prev {left: -4rem} 
section#clientes .slider .slick-next {right: -4rem}

section#clientes .slider .slide {background-color: transparent; margin: 0; cursor: inherit; display: flex; flex-direction: column; flex-wrap: wrap; align-items: center; justify-content: center}


ul.grid.clientes {display: flex; flex-direction: row; flex-wrap: wrap; gap: 2rem; justify-content: center; }
ul.grid.clientes li {width: calc((100% / 5) - 1rem); flex: inherit}
.clientes figure.logo {background-size: contain; width: 100%; align-self: stretch; height: 100%; min-width: 180px; min-height: 90px }

.clientes figure.el-palacio-de-hierro { background-size: 100%;}
.clientes figure.hyatt { background-size: 120%;}

.clientes figure.ferragamo,
.clientes figure.estee-lauder,
.clientes figure.cartier-mexico,
.clientes figure.capa-de-ozono { background-size: 80%; background-position: center;}

.clientes figure.krispy-kreme { background-size: 90%; }

.clientes figure.aruma-mexico,
.clientes figure.starbucks,
.clientes figure.flexi,
.clientes figure.tiendas-chapur { background-size: 70%; }


.clientes figure.christian-louboutin { background-size: 60%; }

.clientes figure.adidas-mexico,
.clientes figure.nike,
.clientes figure.under-armour,
.clientes figure.dolce-gabbana { background-size: 50%;}




section#contacto {background-color: var(--color-principal)}
section#contacto .contenedor {align-items: flex-start;}

section#solicitud {background-color: #fff; color: var(--color-contraste)}
section#solicitud .contenedor {align-items: center;}
section#solicitud h2.display {color: var(--color-principal); font-size: 1.5rem }
section#solicitud a {color: var(--color-principal)}
section#solicitud form h2.display {color: var(--color-contraste); text-align: center; margin-bottom: 2rem}
section#solicitud .formulario {background-color: transparent; border-radius: 1rem; padding: 4rem 2rem; max-width: calc(50% - 8em);flex: 0 1; color: var(--color-contraste); order: 2;}
section#solicitud form {width: 100%;}
section#solicitud input,
section#solicitud textarea {background-color: transparent; border-color: var(--color-contraste)}
section#solicitud textarea {min-height: 20vh; border-radius: .5rem}
section#solicitud input[type="submit" i] {background-color: #2660a4; border: 0; color: #e4e3e2; padding: 1rem 2rem; text-transform: uppercase; font-weight: 400; font-family: "Inter Tight", sans-serif}
section#solicitud ::placeholder {color: var(--color-contraste)}

section#solicitud .columna.dos.texto {background-color: #e4e3e2; color: #2660a4 ; border-radius: 1rem; padding: 4rem 2rem; width: calc(100% - 4rem); order: 1; align-items: start; justify-content: center;}
section#solicitud .columna.dos.texto .flex {gap: 1rem;}
section#solicitud .columna.dos.texto h2.display {color: #2660a4; text-align: left}
section#proyectos.pagina .contenedor {gap: 2rem;}
section#proyectos.pagina .encabezado nav {display: inline-flex; flex-direction: row; gap: 1rem; }
section#proyectos.pagina .encabezado nav a {border: 1px solid var(--color-contraste); color: var(--color-contraste); background-color: transparent; border-radius: .5rem;}


/* Footer */
.break {height: min(50vh,480px);}


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: 4em}
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}


section#galeria.pagina h1 {font-size: 64px}
section#galeria.pagina blockquote {text-align: center;}
section#galeria.pagina ul.grid {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center;}
section#galeria.pagina ul.grid li {padding: 0; background-color: transparent; width: 100%}



#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;
	min-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 .slider {width: min(100%, 1440px); margin: 0}
#modalInfo .contenedor figure {background-size: contain; height: min(calc(100vh - 8em), 960px); width: min(100%, 1280px); margin: 0 auto}
#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: calc(100% - 4em); margin: 0 2em; min-height: calc(100vh - 4em); top: 4em}
#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;}




input,
select {border: 1px 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 Tight", sans-serif; font-weight: 700; letter-spacing: 1px; border-radius: .5rem; color: var(--color-principal);  border: 2px solid var(--color-principal); cursor: pointer;}
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: 12pt;}

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}


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


/* Footer */


footer {background-color: var(--color-contraste); color: var(--color-claro);min-height: 40vh; position: relative; 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; justify-content: flex-start; align-items: flex-start; gap: 0 4em; flex: 1}
footer a,
footer h4,
footer nav.menu a {color: var(--color-claro); }

footer nav.menu a {padding: 0 0 1rem; text-transform: none;}


footer .columna.logopie  {width: 100%; flex: 1 0 100%}
footer .columna.tres {justify-content: flex-start; margin: 0;}
footer .columna.redes {align-items: flex-end; text-align: right;}
footer .columna {gap: 1em; flex: 0 1 calc((100% / 3) - 3rem)}
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: 0 }