/*

Threme Name: Anfiteatro
Description: Catálogo
Threme URI: https://antifeatro.management
Author: Buen-Día
Version: 4.2





/* Catalogo */


body#home header .logo {display: none;}

section ul.grid li.producto {padding: 0 !important; border: 0 !important; position: relative}
ul.grid li.producto,
.producto {flex: auto; flex-direction: column; gap: 0; overflow: hidden; 
height: min(60vh, 540px)
}

.producto .caja {padding: 0; 
	font-size: .75rem; width: 100%; 
	flex-wrap: wrap; min-height: 4rem;
	position: absolute; bottom: 0; left: 0; 
	z-index: 1;
}

.producto .caja .info {position: relative; width: calc(100% - 4rem); padding: 1rem 2rem; }
.producto .caja .info h4 {color: var(--color-contraste)}
.producto .caja .info figure.icon {filter: invert(1)}

.producto:hover a.thumbnail,
.producto:hover .deg {height: calc(100% - 4rem)}
.producto a.thumbnail {overflow: hidden; height: 100%;
position: absolute; 
top: 0; left: 0;
z-index: 2;
}

ul.grid li.producto a.thumbnail figure.imagen,
.producto a.thumbnail figure.imagen {
	transform: scale(1);
	position: relative;
	top: 0; left: 0;
	height: 100%;
	width: 100%;
	background-color: transparent;
-moz-transition: all 0.4s ease-in;
	-webkit-transition: all 0.4s ease-in;
	-o-transition: all 0.4s ease-in;
	transition: all 0.4s ease-in;
	-ms-transition: all 0.4s ease-in;
}

.producto a.thumbnail figure.imagen {height: 80%; align-self:stretch}

ul.grid li.producto:hover a.thumbnail figure.imagen,
.producto:hover figure.imagen {transform: scale(1.05) !important;
-moz-transition: all 0.4s ease-in;
	-webkit-transition: all 0.4s ease-in;
	-o-transition: all 0.4s ease-in;
	transition: all 0.4s ease-in;
	-ms-transition: all 0.4s ease-in;
}



ul.grid figure .deg.rad {opacity: .5}


ul.grid li#jesse-baez.producto a.thumbnail figure.imagen {
	background-position: 50% 0;
}

ul.grid li#alanis-yuki.producto a.thumbnail figure.imagen {
	background-position: 50% 20%;
}



/* Secciones  */


@keyframes fadeIn {
	from {opacity: 0; bottom: -10px;}
	to {opacity: 1; bottom: 0;}
}

@keyframes fadeOut {
	from {opacity: 1;}
	to {opacity: 0;}
}



@keyframes fondoAnimated {
	0%{background-size: 150vh ;}
	50% {background-size: 155vh ;}
	100% {background-size: 150vh ;}
}


@keyframes movingImage {
	0% {bottom: 0}
	50% {bottom: 2%}
	100% {bottom: 0}
}

section#portada {min-height: calc(100vh - 4rem)}

section#portada .contenedor {z-index: 1; width: min(calc(100% - 8rem), 1080px); align-content: center; align-items: center; justify-content: center;}
section#portada a.logo { max-width: inherit; width: 100%; height: min(25vh, 240px); min-height: 240px;opacity: 0;animation: fadeIn 1.5s ease-out .5s forwards;}
section#portada a.logo figure {max-width: 50%; min-height: 240px; background-position: 50% 100%}
section#portada h4.display {opacity: 0;animation: fadeIn 2s ease-out 1s forwards; color: var(--color-claro);}
section#portada a#scrollDown {opacity: 0;animation: fadeIn 2s ease-out .5s forwards; color: var(--color-claro)}

section .fondo.isotipo{background-image: url('assets/img/isotipo_degradado.svg'); background-attachment: fixed;background-repeat: no-repeat; background-position: 100% 50%; opacity: .2}
section#about figure.fotograma {animation: fondoAnimated 10s ease infinite; border-radius: 0 0 60% 10%; min-height: 100vh}


section#catalogo .contenedor {width: min(calc(100% - 8rem), 960px); gap: 2rem}

/* Inicia Home */
section.galeria {min-height: 100vh;}
section.slider.portada {
	width: calc(100% - 0px);
	padding: 0;
	/* border: 20px solid var(--color-claro); */
	margin: 0;
	min-height: 75vh;
}

section.slider .fotograma {min-height: calc(100vh - 12rem);justify-content: center; align-items: end;}

section.slider figure .caja {width: min(calc(100% - 4rem), 80vw); z-index: 10; padding-bottom: 4rem}
section.slider figure h1 {font-size: 64px; color: var(--blanco); text-align: center; letter-spacing: 1px;}
section.slider figure h2 {color: var(--blanco); text-align: center; font-size: 20px; line-height: 1.5; letter-spacing: 2px; text-transform: none;}


section.quote {background-color: var(--color-claro); }
section.quote .contenedor {padding: 0 4rem 8rem; width: calc(100% - 8rem); gap: 8rem;}
section.quote .contenedor figure.fotograma {width: 50%; flex: 0 1 50%; min-height: calc(100vh - 4rem); align-self: stretch; display: flex; align-items: flex-end; justify-content: flex-start;
	border-radius: 0 0 1.5rem 1.5rem;
}

section.quote:nth-child(even) .contenedor figure.fotograma {order: 1;}
section.quote:nth-child(even) .contenedor .cajatexto {order: 2}

section .cajatexto {width: calc(50% - 8rem); flex: 0 1 calc(50% - 8rem); min-height: auto; align-self: stretch; padding: 8rem 0;}
section ul li {border-bottom: 1px solid var(--color-claro); padding-bottom: 1rem; margin-bottom: 1rem; font-size: 1rem}

section.galeria,
section.post {min-height: calc(100vh - 4rem)}

section.aside {min-height: 80vh;}

section.image {min-height: 60vh;}
section.image .encabezado {text-align: center;}
section.image figure.imagenfondo {background-attachment: fixed;}
section.image .contenedor {z-index: 10; width: min(calc(100% - 4rem), 80vw); padding: 8rem 4rem}

section.image .contenedor { text-align: left; align-items: start; justify-content: start; gap: 1rem 4rem}
section.image :is(h5, h3.display, .contenedor){color: var(--color-claro);}
section.image .contenedor h5 {flex: 1 0 100%; text-transform: uppercase;}
section.image .contenedor h3.display {flex: auto; width: 40%; text-align: left;}
section.image .contenedor ul {flex: auto; width: 50%; }
section.image .contenedor ul li {font-size: 1.5rem;font-family: "Matimo Regular";}
section.image .contenedor ul li strong {font-weight: 600;font-family: "Matimo Bold";}

section .slide {width: calc(100% / 3)}

/* section#catalogo ul.grid li:nth-child(5){grid-column: span 12} */


section.post.talento {min-height: 100vh;}
section.post.talento .contenedor {padding: 0; width: 100%; gap: 0; flex: auto; align-self: stretch; min-height: 100vh; flex-direction: row;}
section.post.talento .destacada {width: 50vw; min-height:  auto; justify-content: start; align-items: start; align-self: stretch;}
section.post.talento .destacada figure.fotograma {min-height: 100%; background-attachment: cover; }


section.post ul.galeria {display: flex; flex-direction: column; flex-wrap: wrap; gap: 1rem; width: 10rem; height: 100%; }
section.post.galeria .contenedor {padding: 2rem 0; width: 100%}

section.post ul.galeria li { width: 100%; cursor: pointer; overflow: hidden; flex: 1; border: 0;}

section.post ul.galeria li.is-selected,
section.post ul.galeria li:hover {border-color: var(--color-principal);}

section.post ul.galeria li:hover figure.thumb,
section.post ul.galeria li.is-selected figure.thumb {opacity: .6}

section.post ul.galeria li figure.thumb {height: 100%; width: 100%; border-radius: 0; max-width: inherit; transform: scale(1); max-height: 100%;
-moz-transition: all 0.4s ease-in;
	-webkit-transition: all 0.4s ease-in;
	-o-transition: all 0.4s ease-in;
	transition: all 0.4s ease-in;
	-ms-transition: all 0.4s ease-in;
}

section.post ul.galeria li:hover figure.thumb {transform: scale(1.05);
-moz-transition: all 0.4s ease-in;
	-webkit-transition: all 0.4s ease-in;
	-o-transition: all 0.4s ease-in;
	transition: all 0.4s ease-in;
	-ms-transition: all 0.4s ease-in;
}


section.post article .navegacion-producto {justify-content: end; z-index: 8888}
section.post article .navegacion-producto a {width: auto; }

section.post article {width: calc(50vw - 8rem); display: inline-flex; flex-direction: column; gap: 4rem; padding: 4rem; flex: auto; height: auto; align-self: stretch; position: relative; color: var(--color-contraste)}
section.post article #smartBackButton {color: var(--complemento); font-size: .75rem; z-index: 88; }
section.post article .deg {z-index: 2;}
section.post article .info {z-index: 3; position: relative;flex: 0 1 70%}
section.post article .encabezado {flex: 0 1 30% }
section.post article .encabezado h2 {font-weight: 400; color: var(--color-secundario); line-height: 1.25}
section.post.producto article .flex.row.start {align-items: center; justify-content: start; gap: .25rem !important}

section.post.producto article .desc {margin: 1rem 0;}

section.post.producto {flex-direction: row; min-height: calc(100vh - 12rem); align-items: flex-start;}

section.banner.pagina .contenedor {align-items: center;}
section.banner.pagina .contenedor span.boton {width: auto}


.color-unico { display:flex; align-items:center; gap:.5rem; }
.colores .chip[aria-disabled="true"], .colores .chip.disabled {
  pointer-events: none;
  opacity:1;
  cursor: default;
}

h6.disclaimer {font-size: 12px; text-transform: none;}

section#related {background-color: var(--color-claro); min-height: 80vh;}

section#newsletter {background-color: var(--color-claro)}
section#newsletter.alt {width: 30%;}
section#newsletter .formulario{max-width: 50vw;}
section#newsletter form {display: flex; flex-direction: row; flex-wrap: wrap; gap: 1rem;}
section#newsletter form input[type="submit" i]{margin: 0}

section#newsletter input#correocontacto {flex: 1 1 70%}
form#newsletter_form input.half {max-width: calc(50% - 8px) !important; }
form#newsletter_form input.full {flex: 0 1 100%}



section#about{flex-direction: row;}
section#about figure.fotograma {width: 50%; flex-wrap: wrap; flex-direction: row; min-height: calc(100vh - 200px)}
section#about aside .columna {flex: 0 0; width: min(100%, calc(50vw - 4rem)); padding: 4rem; width: calc(100% - 8rem)}


section#about.pagina {align-items: flex-start}
section#about.pagina .contenedor {padding: 0 4rem}
section#about.pagina aside .columna {padding: 8rem 0rem; width: 100%;}
section#about.pagina figure.fotograma {flex: 1 1 0; min-height: auto; align-self: stretch; display: flex; align-items: flex-end; justify-content: flex-start}

section span.piedefoto{padding: 1rem; color: var(--blanco); }


/* Página Proyectos */


section.image.banner {position: relative; min-height: 60vh;}
section.image.banner .contenedor .encabezado h1 {color: var(--blanco)}
section.image.banner figure.imagenfondo {height: 100%; background-size: cover; background-attachment: fixed;}
section.image.banner h6 {color: var(--blanco)}

section.pagina .cajatexto {display: inline-block; width: calc(100% - 80px); min-height: 100%; font-weight: 700; font-size: 14pt; padding: 40px; color: var(--color-contraste)}
section.pagina .cajatexto h2 {font-size: 18pt; margin-top: 0}




footer .columna.beneficios {width: 50%; gap: 2rem; flex-direction: row; align-self: stretch; align-items: end; text-align: center; justify-content: end;}
footer .columna.beneficios .encabezado {align-self: stretch; justify-content: center; gap: 0}
footer .columna.beneficios ul {min-width: 60%}
footer .columna.beneficios ul li {justify-content: start; align-items: center; align-self: stretch}