/*

Theme Name: Bravo GNP 2024
Description: Landing
Theme URI: https://bravognp.com
Author: Buen-Día
Version: 2.0.1

*/

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

/* CircularStd Black (peso 900) */
@font-face {
	font-family: 'CircularStd';
	src: url('css/fonts/CircularStd-Black.woff2') format('woff2'),
		url('css/fonts/CircularStd-Black.woff') format('woff'),
		url('css/fonts/CircularStd-Black.otf') format('opentype');
	font-weight: 900;
	font-style: normal;
}

/* CircularStd Bold (peso 700) */
@font-face {
	font-family: 'CircularStd';
	src: url('css/fonts/CircularStd-Bold.woff2') format('woff2'),
		url('css/fonts/CircularStd-Bold.woff') format('woff'),
		url('css/fonts/CircularStd-Bold.otf') format('opentype');
	font-weight: 700;
	font-style: normal;
}

/* CircularStd Book (peso 400) */
@font-face {
	font-family: 'CircularStd';
	src: url('css/fonts/CircularStd-Book.woff2') format('woff2'),
		url('css/fonts/CircularStd-Book.woff') format('woff'),
		url('css/fonts/CircularStd-Book.otf') format('opentype');
	font-weight: 400;
	font-style: normal;
}

:root {
/* Colores */
--color-claro: #efeeee;
--color-encabezados: #7c3cd4;
--color-contraste: rgb(20,20,21);

--color-principal: #fff;
--color-secundario: rgb();

--fondo-club: #162f29;
--fondo-club-alt: #e5c5ca;
--club-claro: #fff0d9 ;

/* 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;
    background-color: #efeeee;
    max-width: 100vw;
    height: 100vh;
	font-family: "Archivo", sans-serif;
  font-optical-sizing: auto;
	font-weight: 400;
    min-height: 100vh;
	line-height: 1.5;
	letter-spacing: 1px;
	background-color: #000;
	margin: 0;
}

body.modalon {overflow: hidden !important;}

h1, h2, h3, h4, h5 {margin: 0}
h1 {font-weight: 900; font-size: 48px; text-transform: uppercase; line-height: 1; color: var(--color-principal)}
h2 {font-weight: 700; font-size: 32pt; text-transform: none; line-height: 1.2;}
h3 {font-weight: 700; font-size: 18pt; line-height: 1.2}
h4 {font-weight: 700; font-size: 16pt; }
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; }

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


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; color: #000; font-weight: 500; font-size: 16pt; text-align: left;}


.deg {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	opacity: .7;
	background-color:hsla(265,63%,53%,1);
background-image:
radial-gradient(at 36% 93%, hsla(265,28%,32%,1) 0px, transparent 50%),
radial-gradient(at 85% 94%, hsla(265,41%,11%,1) 0px, transparent 50%),
radial-gradient(at 80% 100%, hsla(242,100%,70%,1) 0px, transparent 50%),
radial-gradient(at 3% 66%, hsla(263,0%,76%,1) 0px, transparent 50%);
-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.4) 26%, rgba(0,0,0,0.4) 64%, rgba(0,0,0,0) 100%);
background: -webkit-linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 26%, rgba(0,0,0,0.4) 64%, rgba(0,0,0,0) 100%);
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 26%, rgba(0,0,0,0.4) 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;
}


.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: 3rem; flex: 0 1 4rem}
.logo figure.logoplus {min-height: 3rem;}

/*  HEADER */


header { position: fixed; top: 0; left: 0; margin: 0 auto; width: 100%; padding: 0px; min-height: 80px; z-index: 4; color: var(--color-contraste); background-color: transparent;
	mix-blend-mode: difference;

}

header .logo {display: none; min-height: 80px; min-width: 120px; -webkit-transition: 600ms; -moz-transition: 600ms; -o-transition: 600ms; -ms-transition: 600ms; transition: 600ms;}
header .espacio {padding: 2em 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: center; gap: 2em;}

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-claro); font-weight: 400}

header .logo { position: relative; display: inline-flex; min-height: 90px; flex: 0 1 auto; flex-direction: column; display: none;
 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}



/*  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: rgba(0,0,0,0.3);	backdrop-filter: blur(7.800000190734863px);
	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-position: center; background-size: contain; background-repeat: no-repeat; background-attachment: fixed;
}
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% - 8em), 1440px); padding: 8em 4em;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; vertical-align: bottom; 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}



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-encabezados);
		font-size: var(--texto-menu);
		font-weight: 400;
		background-color: transparent;

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

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

span.boton a {color: var(--color-principal); 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;
	    gap: 1em;}
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;
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);
}


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: flex-end; align-items: center;}

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

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


section#about {background-color: var(--color-claro); color: var(--color-principal)}
section#about .contenedor {flex-direction: row; z-index: 4; padding:4em; }
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#portada {width: 100%; min-height: calc(150vh + 15em); display: flex; position: relative; justify-content: space-between; background-position: center; background-attachment: fixed; background-size: contain; background-repeat: no-repeat;}
section#portada figure.logo {position: relative; z-index: 88; height: calc(100vh - 8em); width: calc(100vw - 8em);background-size: contain;}
section#portada a.logotipo {width: 100%; min-height: 150vh; align-self: stretch; display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; flex-direction: column; position: relative; top: 4em; left: 0;}


section#reembolso {background-color: rgba(225,102,89,.8);	backdrop-filter: blur(7.800000190734863px); }
section#reembolso .contenedor {padding: 2em 4em}

section#portada nav.menu-event {position: absolute; width: min(33vw, 480px); bottom: 0; z-index: 44; background-color: rgba(225,102,89,.8);	backdrop-filter: blur(7.800000190734863px); display: inline-flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 1em; border-radius: 1em; cursor: pointer;}
section#portada nav.menu-event:hover {background-color: rgba(225,102,89,1);	}
section#portada nav.menu-event span {padding: 2em; width: 100%; text-align: center}
section#portada nav.menu-event span a {display: inline-flex; flex-direction: row; gap: 1em; align-items: center; justify-content: center; font-size: 16pt; color: #fff}
section#portada nav.menu-event span a:hover {font-weight: 800;letter-spacing: 2px}
section#portada nav.menu-event span:nth-child(2) {flex: 0 1 35%; align-items: flex-end;}

section#ubicacion {}
section#ubicacion .contenedor {gap: 2em; padding: 8em 0; width: 100%}
section#ubicacion .contenedor iframe {width: 100vw; min-height: 60vh}

section#boletos,
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#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#boletos {min-height: auto }
section#boletos .contenedor {align-items: center}
section#boletos h1 {color: var(--color-claro)}
	section#boletos .columna.dos {align-items: center; }
	section#boletos .columna.archivo {max-width: calc((100% / 3) - 4rem); flex: 0 1 calc((100% / 3) - 4rem); text-align: center;}

	section#boletos .columna.dos img {width: 100%;display: inline-flex; height: auto;}
	section#boletos .cajatexto {color: var(--color-principal); display: inline-flex; gap: 2em; justify-content: space-between; flex-direction: row; flex-wrap: nowrap; border-radius: 1em; 
		background-color: var(--color-claro);
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#boletos .cajatexto span.boton {margin-top: 10px}
	section#boletos .cajatexto span.boton a.nohay {cursor: inherit; background-color: #bbb}
	section#boletos .cajatexto h1 {color: var(--color-principal)}
	section#boletos .cajatexto h2 {display: inline-flex; flex-direction: column;}
	section#boletos .cajatexto.agotado h2,
		section#boletos .cajatexto.agotado h3 { text-decoration:line-through}
	section#boletos .cajatexto .bloque:nth-child(2) {flex: 0 1 calc(100% - 12em)}

section#beneficios.nosotros .contenedor.encabezado {padding: 4em; width: min(calc(100% - 8em), 1080px)}
section#beneficios.nosotros .contenedor.encabezado h4 {color: var(--color-contraste); font-weight: 400}
section#beneficios.nosotros {gap: 2rem}
section#beneficios .contenedor {width: min(100%, 1080px)}
section#beneficios.nosotros .contenedor{color: var(--color-principal); padding: 0 0 6em; gap: 2rem}

section#beneficios .contenedor ul.grid li {cursor: inherit;}
section#beneficios .contenedor ul.grid li h3 {text-align: center; font-size: 14pt}
section#beneficios .cajatexto {flex-direction: column; align-items: center; border-radius: 1rem;}
section#beneficios .desc {text-align: center; align-items: center;}


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 {padding-top: 0; min-height: calc(100vh - 0px);}
/* section.pagina {padding: 4em} */


section.pagina h1 {color: var(--color-claro); text-align: center; font-size: 32pt}

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



/* section#eventos.pagina blockquote {padding: 0 } */

/* Footer */


footer {background-color: #000; color: var(--color-claro);min-height: auto; 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: 2em 4em; max-width: 1440px; display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 4em;}
footer a,
footer h4,
footer nav.menu a {color: var(--color-claro);}

footer .logo,
footer .logo figure {min-height: 120px}
footer .columna {gap: 1em; flex: auto; justify-content: center; align-items: center}
footer .columna p {line-height: 1.5; font-size: 10pt;color: var(--color-claro)}

footer .columna h2 {color: var(--color-claro); 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-claro)}
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}