/*

Threme Name: TSM
Description: Catálogo de Talento
Threme URI: https://tsm.eco 
Author: Buen-Día
Version: 4.4





/* Catalogo */



section ul.grid li {padding: 0 !important; border: 0 !important; position: relative}

ul.grid li.talento {flex: auto; flex-direction: column; gap: 0; overflow: hidden; 
height: min(75vh, 640px);
background-color: var(--color-oscuro);
}

.talento .caja {padding: 0; 
	font-size: .75rem; width: 100%; height: 100%;
	align-self: stretch;
	flex-wrap: wrap; min-height: 4rem;
	position: relative; top: 0; left: 0; 
	z-index: 1;
	opacity: 0;
}

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

.talento:hover a.thumbnail {opacity: .5}
.talento:hover .caja {
	z-index: 3;
	opacity: 1;
}
.talento a.thumbnail {overflow: hidden; height: 100%;
position: absolute; 
top: 0; left: 0;
z-index: 2;
}

.talento a.thumbnail figure.imagen {
		transform: scale(1);
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;

}


.talento a.thumbnail figure.imagen {height: 100%; align-self:stretch}

ul.grid li.talento:hover a.thumbnail figure.imagen {transform: scale(1.05) !important;
filter: none;
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(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;
}



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




/* 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: 100vh; position: sticky; top: 0;}
section#portada h4 {color: var(--color-claro); text-align: center; font-weight: 200;}
section#portada .contenedor {z-index: 4; width:min(100%, 740px); 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#hero {min-height: auto; background-color: var(--color-contraste)}
section#hero .contenedor {padding: 0; width: 100%; gap: 0; flex-direction: row}
section .columna.dos.texto, 
section .columna.dos.imagen {flex: 0 1 50%; width: 50%; position: relative; overflow: hidden;}

section .columna.dos.texto {padding: 8rem 4rem; width: calc(100% - 8rem); flex: 0 1 calc(50% - 8rem); align-items: start; justify-content: center; }
section .columna.dos.imagen {min-height: 70vh;}
section#hero figure.fotograma {animation: fondoAnimated 10s ease infinite; min-height: auto; position:absolute; top: 0; left: 0; height: 100%; width: 100%;}


section#catalogo.gallery{color: var(--color-claro); background-color: var(--color-oscuro)}
section#catalogo.gallery h2.display {color: var(--color-claro)}
section#catalogo.gallery .contenedor {width: 100%; padding: 6rem 0}
section#catalogo.gallery .encabezado {width: min(calc(100% - 16rem), 1080px); padding: 0 8rem; text-align: center;}

/* 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 .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.pagina .contenedor {width: min(calc(100% - 8rem), 1080px); padding: 8rem 4rem 4rem}
section#catalogo.pagina ul.grid {gap: 0 1rem !important}


section.post.talento {min-height: 100vh; background-color: var(--color-claro)}
section.post.talento nav.redes {width: 100%; justify-content: start; gap: 2rem}
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: 40vw; 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 {width: calc(60vw - 8rem); display: inline-flex; flex-direction: column; gap: 4rem; padding: 4rem; flex: auto; height: auto; align-self: stretch; position: relative; color: var(--color-contraste); justify-content: center;}
section.post article .navegacion-producto {justify-content: end; z-index: 8888}
section.post article .navegacion-producto a {width: auto; }
section.post article p {font-size: 1.5rem; font-weight: 400;}
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 {color: var(--color-secundario); line-height: 1.25}


section.banner.pagina {min-height: 100vh;}
section.banner.pagina .deg.rad {mix-blend-mode: hard-light;}
section.banner.pagina figure.imagenfondo {background-attachment: fixed;}
section.banner.pagina .contenedor {align-items: center;}
section.banner.pagina .contenedor span.boton {width: auto}
section.banner.pagina .contenedor h3.display {color: var(--color-claro); font-weight: 400;}
section.banner.pagina .contenedor nav.redes {gap: 2rem}
section.banner.pagina .contenedor nav.redes a {color: var(--color-claro); font-size: 3rem}


section .frases {
display: grid;
grid-template-columns: repeat(4,1fr);
gap: 4rem;
}

section.data.pagina .contenedor {padding: 8rem; width: min(calc(100% - 16rem), 1080px) }

section#quotes blockquote:nth-child(1){font-weight: 800; text-align: center; font-size: 4rem; grid-column: span 4;}
section#quotes blockquote:nth-child(1) p {font-size: 3rem;}
section#quotes blockquote{ grid-column: span 2; font-size: 2rem;}
section#quotes blockquote p {text-align: center; text-align-last: center; text-transform: uppercase; line-height: 1.5; font-size: 1.5rem}
section#quotes blockquote p cite {font-style: inherit; font-weight: 700; text-transform: uppercase;}
section#quotes blockquote p cite:before {
	content: '– ';
}


section#highlights {
	background-color: var(--color-claro);
	color: var(--color-oscuro);
	z-index: 3;
	position: sticky;
}

section#highlights h2:nth-child(1){font-weight: 800; text-align: center; font-size: 4rem; grid-column: span 4;}
section#highlights h2{line-height: 1.2; grid-column: span 2; font-size: 2rem }

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