/* ================================================
   Divisiones header: Loom Casa Productora / Talent / Films
   ================================================ */
.divisiones-header {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 32px;
	align-items: center;
	z-index: 10;
}
.division-link {
	font-family: 'Montserrat', sans-serif;
	text-decoration: none;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	opacity: 1;
	transition: opacity 0.2s;
	line-height: 1;
	gap: 3px;
}
.division-loom-img {
	width: 52px;
	height: auto;
	display: block;
	opacity: 1;
}
.division-sub {
	font-size: 7px;
	font-weight: 200;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--cafesin);
	border-bottom: 1px solid transparent;
	padding-bottom: 1px;
	transition: border-color 0.2s;
}
.division-link:hover .division-sub {
	border-bottom-color: var(--cafesin);
}

/* Logo principal: solo visible cuando el menu esta abierto */
.link-big-logo {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s;
}
.wrapper-menu.on ~ .link-big-logo {
	opacity: 1;
	pointer-events: auto;
}
@media (max-width: 767px) {
	.divisiones-header {
		gap: 16px;
	}
	.division-link {
		font-size: 7px;
	}
}
@media (max-width: 479px) {
	.divisiones-header {
		display: none;
	}
}

.justify{
	text-align: justify;
	text-justify: inter-word;
}

/* ================================================
   Detalle de proyecto
   ================================================ */

/* Header: título izq, cliente der */
.detalle-header-top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	padding: 16px 0;
	border-bottom: 1px solid var(--offwite-new);
	margin-bottom: 16px;
}

.detalle-header-top .titulo-proyecto {
	font-size: 26px !important;
	margin: 0 !important;
	flex: 1;
	max-width: none !important;
}

.detalle-cliente {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
	font-size: 12px;
	color: var(--cafesin);
	letter-spacing: .04em;
	text-transform: uppercase;
}

.detalle-cliente .linea-datos-proyectos {
	width: 20px !important;
	flex-shrink: 0;
}

/* Descripción */
p.detalle-desc {
	font-size: 13px !important;
	line-height: 1.7em !important;
	color: var(--cafesin) !important;
	max-width: 100% !important;
	margin: 0 0 24px !important;
	padding: 0 !important;
}

/* Responsive header */
@media screen and (max-width: 767px) {
	.detalle-header-top {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
}

/* ================================================
   Talents — sección de marcas
   ================================================ */
.talents-brands-section {
	margin: 0 !important;
	padding: 0 !important;
	border-top: 1px solid var(--offwite-new);
}

.talents-brands-label {
	font-size: 11px !important;
	letter-spacing: .18em !important;
	text-transform: uppercase !important;
	color: var(--cafesin) !important;
	margin: 40px 0 24px !important;
	font-weight: 500 !important;
}

/* Client Roster título fuera del grid */
#main_servicios .client-roster-titulo {
	font-size: 40px !important;
	font-weight: 200 !important;
	letter-spacing: -.01em !important;
	text-transform: none !important;
	color: var(--black) !important;
	margin: 28px 0 16px !important;
	cursor: default !important;
}

.talents-brands-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	border-top: 1px solid var(--offwite-new);
	border-left: 1px solid var(--offwite-new);
}

.talents-brand-cell {
	border-right: 1px solid var(--offwite-new);
	border-bottom: 1px solid var(--offwite-new);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 48px 36px;
	transition: background .2s ease;
}

.talents-brand-cell:hover {
	background: var(--black);
}

.talents-brand-cell img {
	width: 100%;
	max-width: 110px;
	max-height: 50px;
	object-fit: contain;
	opacity: .5;
	filter: grayscale(100%);
	transition: opacity .2s ease, filter .2s ease;
}

.talents-brand-cell:hover img {
	opacity: 1;
	filter: grayscale(100%) brightness(10);
}

@media screen and (max-width: 991px) {
	.talents-brands-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media screen and (max-width: 767px) {
	.talents-brands-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Área de texto + créditos */
.detalle-texto-area {
	margin-bottom: 28px;
}

.detalle-creditos-bloque {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--offwite-new);
	display: grid;
	grid-template-columns: 160px 1fr;
	gap: 4px 20px;
	max-width: 640px;
}

.detalle-creditos-titulo {
	grid-column: 1 / -1;
	font-size: 11px !important;
	font-weight: 600 !important;
	letter-spacing: .1em !important;
	text-transform: uppercase !important;
	color: var(--black) !important;
	margin: 0 0 8px !important;
}

.detalle-creditos-item {
	font-size: 12px !important;
	line-height: 1.6em !important;
	color: var(--cafesin) !important;
	margin: 0 !important;
}

/* Cuadrícula de videos e imágenes */
.detalle-media-grid .contenido-proyect {
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	align-items: flex-start !important;
	gap: 6px !important;
}

.detalle-media-grid .contenido-proyect > *,
.detalle-media-grid .contenido-proyect .video-wrapper,
.detalle-media-grid .contenido-proyect .imagen-detalle {
	flex: 0 0 calc(33.333% - 6px) !important;
	max-width: calc(33.333% - 6px) !important;
	align-self: flex-start !important;
}

/* Texto dentro de la grid */
.detalle-media-grid .fila-lo-que-hicimos {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	margin-bottom: 0 !important;
	display: block !important;
	align-self: flex-start !important;
}

.detalle-media-grid .contenido-proyect .fila-doble-imagen {
	flex: 0 0 calc(66.666% - 6px) !important;
	max-width: calc(66.666% - 6px) !important;
}

.detalle-media-grid .imagen-detalle {
	width: 100% !important;
	aspect-ratio: 16 / 9 !important;
	object-fit: cover !important;
	display: block !important;
}

.detalle-media-grid .video-wrapper {
	aspect-ratio: 16 / 9 !important;
	position: relative !important;
	overflow: hidden !important;
}

.detalle-media-grid .video-wrapper video {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

.detalle-media-grid .video-poster {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

/* Los bloques de 2 imágenes/videos ocupan 2 columnas */
.detalle-media-grid .fila-doble-imagen {
	grid-column: span 2 !important;
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 6px !important;
}

.detalle-media-grid .fila-doble-imagen .wrapper-col-imagen-doble,
.detalle-media-grid .fila-doble-imagen .col-video {
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.detalle-media-grid .fila-doble-imagen .col-imagen {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

/* Tablet */
@media screen and (max-width: 991px) {
	.detalle-media-grid .contenido-proyect > *,
	.detalle-media-grid .contenido-proyect .video-wrapper,
	.detalle-media-grid .contenido-proyect .imagen-detalle {
		flex: 0 0 calc(50% - 6px) !important;
		max-width: calc(50% - 6px) !important;
	}
	.detalle-media-grid .contenido-proyect .fila-doble-imagen {
		flex: 0 0 100% !important;
		max-width: 100% !important;
	}
}

/* Móvil */
@media screen and (max-width: 479px) {
	.detalle-media-grid .contenido-proyect > *,
	.detalle-media-grid .contenido-proyect .video-wrapper,
	.detalle-media-grid .contenido-proyect .imagen-detalle {
		flex: 0 0 100% !important;
		max-width: 100% !important;
	}
}

.video-wrapper{
	cursor: pointer;
}

.lang-label{
	cursor: pointer;
}

#gt-nvframe{
	display: none !important;
}

body #wpadminbar{
	display: none;
}

body .filtros-proyectos{
	top: 20px;
	right: 20px;
	position: absolute;
}

body .filtros-proyectos .lista-filtros {
	width: auto;
	min-width: 180px;
	white-space: nowrap;
	padding-left: 20px;
	padding-right: 20px;
	text-align: left;
}

::selection{
	background: rgba(0,0,0,.99);
	color: #f6f2ef !important;
}
::-moz-selection{
	background: #f6f2ef;
	color: #000000 !important;
}
.wrapper-perfil{
	overflow-y: scroll;
	overflow-x: hidden;
}
#main_blog, #main_perfil, #main_detalle, #main_detalle_talento, #main_proyectos, #main_servicios, #main_talento, #main_herramientas, #main_escribenos{
	position: fixed;
}

/* Todos los paneles principales ocupan el espacio disponible tras el menú */
.wrapper-blog,
.wrapper-servicios,
.wrapper-talento,
.wrapper-proyectos,
.wrapper-perfil {
	width: calc(100svw - 400px) !important;
	left: calc(-100svw + 400px) !important;
}
.wrapper-blog.on,
.wrapper-servicios.on,
.wrapper-talento.on,
.wrapper-proyectos.on,
.wrapper-perfil.on {
	left: 400px !important;
}

/* Tablet grande — menú 30vw */
@media screen and (max-width: 991px){
	.wrapper-blog,
	.wrapper-servicios,
	.wrapper-talento,
	.wrapper-proyectos,
	.wrapper-perfil {
		width: 70vw !important;
		left: -70vw !important;
	}
	.wrapper-blog.on,
	.wrapper-servicios.on,
	.wrapper-talento.on,
	.wrapper-proyectos.on {
		left: 30vw !important;
	}
}

/* Tablet chica — menú 40vw */
@media screen and (max-width: 767px){
	.wrapper-blog,
	.wrapper-servicios,
	.wrapper-talento,
	.wrapper-proyectos,
	.wrapper-perfil {
		width: 60vw !important;
		left: -60vw !important;
	}
	.wrapper-blog.on,
	.wrapper-servicios.on,
	.wrapper-talento.on,
	.wrapper-proyectos.on {
		left: 40vw !important;
	}
}

/* Móvil — menú 35vw */
@media screen and (max-width: 479px){
	.wrapper-blog,
	.wrapper-servicios,
	.wrapper-talento,
	.wrapper-proyectos,
	.wrapper-perfil {
		width: 65vw !important;
		left: -65vw !important;
	}
	.wrapper-blog.on,
	.wrapper-servicios.on,
	.wrapper-talento.on,
	.wrapper-proyectos.on {
		left: 35vw !important;
	}
}

/* Thumbnails de igual altura */
.proyectos-grid .proyecto-link .interno-video {
	aspect-ratio: 16 / 9 !important;
	overflow: hidden !important;
}
.proyectos-grid .proyecto-link .interno-video img,
.proyectos-grid .proyecto-link .interno-video video {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
}

.extras-contacto{
	margin-top: 6px;
	padding-left: 0px;
}

.extras-contacto .flecha-red{
	left: 3px;
}

.forma-contacto{
    float: left;
    clear: both;
    width: 100%;
}

.link-default{
	color: inherit;
}

body .desc-lo-que-hicimos a{
	color: inherit;
}

body .scrollbar-track{
	background-color: transparent;
}
body .scrollbar-thumb{
	border-radius: 0px;
	background-color: rgba(58,55,53,0.2);
}
body .loader{
	display: block;
}

.full-height{
	height: 100%;
}

body .col-video.video-1080-1920{
	aspect-ratio: 1080/1920;
	position: relative;
}

.video-play{
	cursor: pointer;
}

@-webkit-keyframes rotating /* Safari and Chrome */ {
	from {
		-webkit-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	to {
		-webkit-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
@keyframes rotating {
	from {
		-ms-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	to {
		-ms-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-webkit-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
.rotating {
	-webkit-animation: rotating 2s linear infinite;
	-moz-animation: rotating 2s linear infinite;
	-ms-animation: rotating 2s linear infinite;
	-o-animation: rotating 2s linear infinite;
	animation: rotating 2s linear infinite;
}

body a.col-red-popular{
	text-decoration: none;
}

.video-background{
	pointer-events: none;
}

/* Ocultar flecha "Regresar" responsive en móvil (la que aparece arriba del thumbnail) */
.regresar-resp,
.regresar-resp.w-button{
	display: none !important;
}

/* Redes sociales integradas como filas del listado de atributos del talento */
.fila-datos-talento.fila-red-social .red-social-inline{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	color: inherit;
	transition: opacity .2s ease;
}

.fila-datos-talento.fila-red-social .red-social-inline.sin-link{
	cursor: default;
}

.fila-datos-talento.fila-red-social .red-social-inline:not(.sin-link):hover{
	opacity: .7;
}

.fila-datos-talento.fila-red-social .icono-red{
	filter: brightness(0) saturate(100%);
	width: 18px !important;
	height: auto;
	flex-shrink: 0;
	margin: 0;
}

.fila-datos-talento.fila-red-social .red-social-inline .dato-y-valor-talento{
	margin: 0 !important;
	font-size: 12px !important;
	line-height: 1 !important;
	color: var(--cafesin) !important;
}

/* ================================================
   Sidebar del detalle de talento: apilar contenido
   arriba y permitir scroll cuando excede el viewport.
   Fix para que la sección de Instagram (y demás redes
   sociales) siempre sea visible después de la bio.
   ================================================ */
.apendice-detalle-talento{
	justify-content: flex-start !important;
}

.apendice-detalle-talento .col-info-talento{
	margin-top: 24px;
}

.apendice-detalle-talento .fila-acciones-talento{
	margin-top: 24px !important;
	padding-bottom: 20px;
}

.apendice-detalle-talento .mono-grama{
	margin-top: 20px;
}

/* ================================================
   Encabezado del apartado Servicios
   — Logo LM (mismo SVG que Perfil) + "Loom Producciones"
   ================================================ */
#main_servicios .servicios-header{
	display: flex;
	align-items: center;
	gap: 20px;
	margin-top: 8px;
	margin-bottom: 3vw;
}

#main_servicios .servicios-logo-lm{
	width: 80px;
	height: auto;
	display: block;
	flex-shrink: 0;
}

#main_servicios .servicios-titulo-principal{
	font-size: 22px;
	line-height: 1.1em;
	letter-spacing: -.01em;
	font-weight: 200;
	color: var(--black);
	margin: 0;
}

@media screen and (max-width: 991px){
	#main_servicios .servicios-logo-lm{
		width: 64px;
	}
	#main_servicios .servicios-titulo-principal{
		font-size: 20px;
	}
}

@media screen and (max-width: 767px){
	#main_servicios .servicios-header{
		gap: 14px;
	}
	#main_servicios .servicios-logo-lm{
		width: 54px;
	}
	#main_servicios .servicios-titulo-principal{
		font-size: 18px;
	}
}

/* ================================================
   Bloque Intro Servicios (desde PDF)
   — QR + contacto a la izquierda, descripción a la derecha
   ================================================ */
#main_servicios .servicios-intro{
	display: grid;
	grid-template-columns: 180px 1fr;
	gap: 40px;
	align-items: start;
	margin: 16px 0 40px;
}

#main_servicios .servicios-intro-izq{
	display: flex;
	flex-direction: column;
	gap: 14px;
}

#main_servicios .servicios-contacto{
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

#main_servicios .servicios-contacto li{
	font-size: 11px;
	letter-spacing: .08em;
	line-height: 1.5em;
	color: var(--cafesin);
	text-transform: uppercase;
}

#main_servicios .servicios-contacto a{
	color: inherit;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: color .2s ease, opacity .2s ease;
}

#main_servicios .servicios-contacto a:hover{
	color: var(--black);
	opacity: .85;
}

#main_servicios .servicios-intro-der{
	display: flex;
	flex-direction: column;
	gap: 14px;
	text-align: justify;
}

#main_servicios .servicios-intro-der p{
	font-size: 14px;
	line-height: 1.55em;
	letter-spacing: .01em;
	color: var(--cafesin);
	margin: 0;
}

/* Responsive — Tablet */
@media screen and (max-width: 991px){
	#main_servicios .servicios-intro{
		grid-template-columns: 160px 1fr;
		gap: 28px;
	}
	#main_servicios .servicios-intro-der p{
		font-size: 13px;
	}
}

/* Móvil — contacto arriba, descripción abajo */
@media screen and (max-width: 767px){
	#main_servicios .servicios-intro{
		grid-template-columns: 1fr;
		gap: 24px;
	}
	#main_servicios .servicios-intro-izq{
		align-items: flex-start;
	}
}

/* ================================================
   Acordeón de Servicios
   — Títulos clickeables, contenido colapsable.
   ================================================ */

/* Títulos como botones */
#main_servicios .fila-servicios-new .titulo-servicios,
#main_servicios .fila-servicios-acordeon .col-dato-servicios{
	cursor: pointer;
	position: relative;
	padding-right: 32px;
	transition: color .2s ease;
	user-select: none;
}

#main_servicios .fila-servicios-new .titulo-servicios:hover,
#main_servicios .fila-servicios-acordeon .col-dato-servicios:hover{
	color: var(--black);
}

/* Igualar estilos del título del acordeón ACF con los títulos hardcoded
   (para que "Servicios" se vea igual que "Filmaciones", "Marketing", etc.) */
#main_servicios .fila-servicios-acordeon{
	display: block !important;
	margin-top: 0 !important;
	width: 100%;
}

#main_servicios .fila-servicios-acordeon .col-dato-servicios{
	width: 100% !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	letter-spacing: .05em !important;
	line-height: 1.3em !important;
	text-transform: uppercase !important;
	color: var(--cafesin) !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* El contenido expandido del acordeón ACF también con mejor layout */
#main_servicios .fila-servicios-acordeon .col-contenido-servicios{
	width: 100%;
}

/* Ajuste del chevron para que esté alineado con títulos grandes */
#main_servicios .fila-servicios-new .titulo-servicios::after,
#main_servicios .fila-servicios-acordeon .col-dato-servicios::after{
	width: 14px;
	height: 14px;
	margin-top: -10px;
	border-width: 2px;
	right: 8px;
}

@media screen and (max-width: 991px){
	#main_servicios .fila-servicios-acordeon .col-dato-servicios{
		font-size: 14px !important;
	}
}

@media screen and (max-width: 767px){
	#main_servicios .fila-servicios-acordeon .col-dato-servicios{
		font-size: 14px !important;
	}
}

/* Chevron indicador que rota al abrir */
#main_servicios .fila-servicios-new .titulo-servicios::after,
#main_servicios .fila-servicios-acordeon .col-dato-servicios::after{
	content: "";
	position: absolute;
	top: 50%;
	right: 4px;
	width: 10px;
	height: 10px;
	margin-top: -8px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	transition: transform .3s ease;
	opacity: .55;
}

#main_servicios .fila-servicios-new.open .titulo-servicios::after,
#main_servicios .fila-servicios-acordeon.open .col-dato-servicios::after{
	transform: rotate(-135deg);
	margin-top: -3px;
	opacity: 1;
}

/* Contenido colapsado por defecto */
#main_servicios .fila-servicios-new .puntos-servicios,
#main_servicios .fila-servicios-acordeon .col-contenido-servicios{
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-height .4s ease, opacity .3s ease, margin .3s ease, padding .3s ease;
	margin-top: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	display: flex !important;
	flex-wrap: wrap;
	gap: 4px 0;
}

#main_servicios .fila-servicios-new .puntos-servicios .p-punto-servicio,
#main_servicios .fila-servicios-acordeon .col-contenido-servicios .p-punto-servicio {
	width: auto !important;
	float: none !important;
	padding-right: 24px;
	white-space: nowrap;
}

/* Contenido abierto */
#main_servicios .fila-servicios-new.open .puntos-servicios,
#main_servicios .fila-servicios-acordeon.open .col-contenido-servicios{
	display: block !important;
	max-height: 1500px;
	opacity: 1;
	margin-top: 12px !important;
	padding-top: 6px !important;
	padding-bottom: 14px !important;
}

/* Separación suave entre items del acordeón */
#main_servicios .fila-servicios-new,
#main_servicios .fila-servicios-acordeon{
	border-bottom: 1px solid rgba(58,55,53,0.12);
	padding-bottom: 14px;
	margin-bottom: 14px;
}

#main_servicios .fila-servicios-new:last-of-type,
#main_servicios .fila-servicios-acordeon:last-of-type{
	border-bottom: none;
}

/* ================================================
   Cuadrícula de Prensa — 2 artículos por fila
   ================================================ */
.prensa-grid{
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	grid-column-gap: 24px !important;
	grid-row-gap: 40px !important;
	align-items: start !important;
	width: 100% !important;
	margin-top: 10px;
}

/* Cada artículo ocupa una celda */
.prensa-grid .thumb-blog-post{
	float: none !important;
	width: 100% !important;
	margin: 0 !important;
	display: block;
	box-sizing: border-box;
	text-decoration: none;
}

/* Thumbnail con proporción 16:9 uniforme */
.prensa-grid .thumb-blog-post .imagen-thumb{
	width: 100% !important;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
	margin-bottom: 14px !important;
	transition: transform .4s ease, filter .4s ease;
}

.prensa-grid .thumb-blog-post:hover .imagen-thumb{
	transform: scale(1.02);
	filter: brightness(1.05);
}

/* Detalles del post: fecha + título */
.prensa-grid .thumb-blog-post .detalles-post{
	width: 100%;
}

.prensa-grid .thumb-blog-post .fila-dato{
	display: flex;
	flex-flow: column;
	gap: 8px;
	align-items: flex-start;
}

.prensa-grid .thumb-blog-post .col-dato{
	font-size: 12px !important;
	letter-spacing: .05em;
	color: var(--cafesin);
	margin: 0;
	order: 2;
}

.prensa-grid .thumb-blog-post .col-titulo-post{
	width: 100%;
	order: 1;
}

.prensa-grid .thumb-blog-post .titulo-post{
	font-size: 20px !important;
	font-weight: 200 !important;
	line-height: 1.2em !important;
	letter-spacing: -.01em !important;
	margin: 0 !important;
	color: var(--cafesin);
}

/* Responsive — Tablet: 2 cols (sin cambios) */
@media screen and (max-width: 991px){
	.prensa-grid{
		grid-column-gap: 18px !important;
		grid-row-gap: 32px !important;
	}
	.prensa-grid .thumb-blog-post .titulo-post{
		font-size: 18px !important;
	}
}

/* Móvil: 1 columna */
@media screen and (max-width: 767px){
	.prensa-grid{
		grid-template-columns: 1fr !important;
		grid-row-gap: 28px !important;
	}
}

/* Transición suave del hero al abrir/cerrar menú */
.video-background,
.video-background-resp{
	transition: opacity .4s ease;
}

/* Ocultación del hero cuando el body tiene la clase .hero-oculto.
   Usamos display:none para que Webflow slider no pueda re-mostrarlo
   con inline styles (como opacity o visibility). */
body.hero-oculto .video-background,
body.hero-oculto .video-background-resp,
.video-background.is-hidden,
.video-background-resp.is-hidden{
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
	display: none !important;
}

/* ================================================
   Cuadrícula de Proyectos (CSS Grid, 3 columnas)
   — Se usa un wrapper .proyectos-grid dentro del
     contenedor para evitar conflicto con w-clearfix.
   ================================================ */
.proyectos-grid{
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	grid-column-gap: 20px !important;
	grid-row-gap: 40px !important;
	align-items: start !important;
	width: 100% !important;
}

.proyectos-grid .proyecto-link{
	float: none !important;
	width: 100% !important;
	margin: 0 !important;
	box-sizing: border-box !important;
}

.proyectos-grid .proyecto-link.ultimo{
	margin-bottom: 0 !important;
}

.proyectos-grid .proyecto-link .interno-video{
	aspect-ratio: 16 / 9 !important;
	width: 100% !important;
	height: auto !important;
	margin-bottom: 12px !important;
	object-fit: cover;
}

.proyectos-grid .proyecto-link .interno-video video{
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
}

.proyectos-grid .proyecto-link .datos-proyecto{
	flex-flow: column !important;
	align-items: flex-start !important;
}

.proyectos-grid .proyecto-link .titulo-thumb-proyecto{
	width: 100% !important;
	font-size: 16px !important;
	line-height: 1.15em !important;
	margin-bottom: 8px !important;
}

.proyectos-grid .proyecto-link .col-dato-proyecto{
	width: 100% !important;
	justify-content: flex-start !important;
	align-items: center !important;
	grid-column-gap: 8px !important;
	gap: 8px !important;
}

.proyectos-grid .proyecto-link .dato-proyecto,
.proyectos-grid .proyecto-link .dato-proyecto.grande{
	font-size: 13px !important;
	font-weight: 400 !important;
	line-height: 1.4em !important;
}

.proyectos-grid .proyecto-link .dato-proyecto{
	white-space: nowrap;
}

.proyectos-grid .proyecto-link .dato-proyecto.grande{
	white-space: normal;
}

.proyectos-grid .proyecto-link .linea-datos-proyectos{
	width: 14px !important;
	top: 0 !important;
	flex-shrink: 0;
}

/* Tablet grande: 3 columnas */
@media screen and (max-width: 991px){
	.proyectos-grid{
		grid-template-columns: repeat(3, 1fr) !important;
	}
	.proyectos-grid .proyecto-link .titulo-thumb-proyecto{
		font-size: 18px !important;
	}
}

/* Tablet chica: 2 columnas */
@media screen and (max-width: 767px){
	.proyectos-grid{
		grid-template-columns: repeat(2, 1fr) !important;
	}
	.proyectos-grid .proyecto-link .titulo-thumb-proyecto{
		font-size: 15px !important;
	}
}

/* Móvil: 1 columna */
@media screen and (max-width: 479px){
	.proyectos-grid{
		grid-template-columns: 1fr !important;
	}
}

/* ================================================
   Tarjeta "Coming Soon" (placeholder)
   Se muestra solo al filtrar Coming Soon.
   ================================================ */
.proyectos-grid .coming-soon-card{
	width: 100%;
	box-sizing: border-box;
}

.proyectos-grid .coming-soon-card .coming-soon-thumb-img{
	aspect-ratio: 16 / 9;
	width: 100%;
	height: auto;
	margin-bottom: 12px;
	object-fit: cover;
	display: block;
}

.proyectos-grid .coming-soon-card .datos-proyecto{
	display: flex !important;
	flex-flow: column !important;
	align-items: flex-start !important;
}

.proyectos-grid .coming-soon-card .titulo-thumb-proyecto{
	width: 100% !important;
	font-size: 20px !important;
	line-height: 1.15em !important;
	margin-bottom: 8px !important;
	color: var(--cafesin);
	font-weight: 200;
	letter-spacing: -0.01em;
}

.proyectos-grid .coming-soon-card .col-dato-proyecto{
	width: 100% !important;
	display: flex;
	justify-content: flex-start !important;
	align-items: center !important;
	gap: 8px !important;
	grid-column-gap: 8px !important;
}

.proyectos-grid .coming-soon-card .dato-proyecto,
.proyectos-grid .coming-soon-card .dato-proyecto.grande{
	font-size: 13px !important;
	font-weight: 400 !important;
	line-height: 1.4em !important;
	color: var(--cafesin);
	letter-spacing: 0.05em;
	margin: 0;
}

.proyectos-grid .coming-soon-card .dato-proyecto{
	white-space: nowrap;
}

.proyectos-grid .coming-soon-card .linea-datos-proyectos{
	width: 14px !important;
	border-bottom: 1px solid #0000004f;
	height: 0;
	flex-shrink: 0;
}

/* Media queries para el título Coming Soon */
@media screen and (max-width: 991px){
	.proyectos-grid .coming-soon-card .titulo-thumb-proyecto{
		font-size: 22px !important;
	}
}

/* ================================================
   Filtro de Talento como menú horizontal
   — Siempre visible, sin dropdown.
   ================================================ */
.lista-filtro-talento{
	width: 100% !important;
	margin-bottom: 30px !important;
	position: relative !important;
}

.lista-filtro-talento .filtros-proyectos.talento{
	position: relative !important;
	top: auto !important;
	right: auto !important;
	left: auto !important;
	float: none !important;
	width: 100% !important;
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
}

/* Ocultar el toggle "Filtrar" con su flecha en el menú de Talento */
.lista-filtro-talento .filtros-proyectos.talento .top-filtro{
	display: none !important;
}

/* Lista de filtros siempre visible, horizontal */
.lista-filtro-talento .filtros-proyectos.talento .lista-filtros{
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	align-items: center !important;
	gap: 28px !important;
	position: static !important;
	top: auto !important;
	right: auto !important;
	width: auto !important;
	height: auto !important;
	background: transparent !important;
	padding: 8px 0 !important;
	margin: 0 !important;
	overflow: visible !important;
	text-align: center !important;
}

/* Cada opción: inline, sin float, con estilo consistente */
.lista-filtro-talento .filtros-proyectos.talento .lista-filtros .link-filtro-option{
	float: none !important;
	display: inline-block !important;
	width: auto !important;
	margin: 0 !important;
	padding: 6px 2px !important;
	font-size: 13px !important;
	letter-spacing: .05em !important;
	white-space: nowrap;
	position: relative;
}

/* Estado activo: subrayado sutil */
.lista-filtro-talento .filtros-proyectos.talento .lista-filtros .link-filtro-option.on{
	color: var(--black) !important;
	border-bottom: 1px solid currentColor;
}

/* Responsive: un poco más compacto en móvil */
@media screen and (max-width: 767px){
	.lista-filtro-talento .filtros-proyectos.talento .lista-filtros{
		gap: 16px !important;
	}
	.lista-filtro-talento .filtros-proyectos.talento .lista-filtros .link-filtro-option{
		font-size: 12px !important;
	}
}

/* ================================================
   Reel central + Cuadrícula de Talentos
   — Video al centro, talentos alrededor.
   ================================================ */
#main_talento .lista-de-talentos{
	display: grid !important;
	grid-template-columns: repeat(6, 1fr) !important;
	grid-column-gap: 16px !important;
	grid-row-gap: 16px !important;
	grid-auto-flow: dense !important;
	width: 100% !important;
	margin-top: 20px;
}

/* Video central: ocupa columnas 2-6 (4 de ancho) y filas 2-3 (2 de alto) */
#main_talento .lista-de-talentos .reel-central{
	grid-column: 2 / 6;
	grid-row: 2 / 4;
	position: relative;
	overflow: hidden;
	background: #000;
	aspect-ratio: 16 / 9;
	align-self: stretch;
	justify-self: stretch;
}

#main_talento .lista-de-talentos .reel-central video{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Cada talento ocupa una celda cuadrada (1x1 del grid) */
#main_talento .lista-de-talentos .team-menber{
	width: 100% !important;
	margin: 0 !important;
	grid-column: span 1 !important;
	grid-row: span 1 !important;
}

/* El nombre debajo del thumbnail se compacta */
#main_talento .lista-de-talentos .team-menber .grupo-headshot{
	margin-bottom: 10px !important;
}

#main_talento .lista-de-talentos .team-menber .fila-team-element{
	margin: 0 !important;
}

#main_talento .lista-de-talentos .team-menber .col-dato{
	font-size: 12px !important;
	line-height: 1.3em !important;
}

/* Eliminar ::before/::after del w-clearfix que estorban al grid */
#main_talento .lista-de-talentos::before,
#main_talento .lista-de-talentos::after{
	display: none !important;
	content: none !important;
}

/* Tablet grande: 5 columnas */
@media screen and (max-width: 1199px){
	#main_talento .lista-de-talentos{
		grid-template-columns: repeat(5, 1fr) !important;
	}
	#main_talento .lista-de-talentos .reel-central{
		grid-column: 2 / 5;
		grid-row: 2 / 4;
		aspect-ratio: 16 / 9;
	}
}

/* Tablet: 4 columnas, reel ancho completo */
@media screen and (max-width: 991px){
	#main_talento .lista-de-talentos{
		grid-template-columns: repeat(4, 1fr) !important;
	}
	#main_talento .lista-de-talentos .reel-central{
		grid-column: 1 / -1;
		grid-row: auto;
		aspect-ratio: 16 / 9;
	}
}

/* Móvil: 2 columnas, reel ancho completo */
@media screen and (max-width: 767px){
	#main_talento .lista-de-talentos{
		grid-template-columns: repeat(2, 1fr) !important;
	}
	#main_talento .lista-de-talentos .reel-central{
		grid-column: 1 / -1;
		grid-row: auto;
	}
}

/* ================================================
   Perfil: logo/título más chico y más arriba
   ================================================ */
#main_perfil.wrapper-perfil{
	padding-top: 8px !important;
}

#main_perfil.wrapper-perfil .titulo-nosotros{
	font-size: 22px !important;
	line-height: 1.1em !important;
	max-width: 480px;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* Reduce el espacio arriba del primer bloque de contenido
   para que el título quede visualmente arriba */
#main_perfil.wrapper-perfil .fila-dato-nosotros{
	margin-top: 3vw !important;
}

/* Ocultar el bloque original de imagen_oficina (ya se muestra arriba junto a "Perfil") */
#main_perfil.wrapper-perfil .fila-imagen-oculta{
	display: none !important;
}

/* Fila de datos con logo a la izquierda */
#main_perfil.wrapper-perfil .fila-dato-perfil-con-logo{
	display: flex !important;
	flex-flow: row nowrap !important;
	align-items: flex-start !important;
	gap: 24px !important;
	margin-top: 3vw !important;
}

/* Columna del logo: compacta a la izquierda */
#main_perfil.wrapper-perfil .col-logo-perfil{
	flex: 0 0 auto;
	width: 90px;
	display: flex;
	align-items: center;
	justify-content: center;
}

#main_perfil.wrapper-perfil .logo-perfil-lm{
	width: 100%;
	height: auto;
	display: block;
}

/* "Perfil" label queda en su columna normal */
#main_perfil.wrapper-perfil .fila-dato-perfil-con-logo .col-dato-perfil{
	flex: 0 0 auto;
	width: 100px;
	margin: 0;
	padding-top: 10px;
}

/* Descripción ocupa el resto */
#main_perfil.wrapper-perfil .fila-dato-perfil-con-logo .col-titulo-post{
	flex: 1 1 auto;
	min-width: 0;
}

/* Responsive — Tablet grande */
@media screen and (max-width: 1199px){
	#main_perfil.wrapper-perfil .col-logo-perfil{
		width: 75px;
	}
	#main_perfil.wrapper-perfil .fila-dato-perfil-con-logo .col-dato-perfil{
		width: 85px;
	}
}

/* Responsive — Tablet */
@media screen and (max-width: 991px){
	#main_perfil.wrapper-perfil .titulo-nosotros{
		font-size: 20px !important;
	}
	#main_perfil.wrapper-perfil .col-logo-perfil{
		width: 64px;
	}
	#main_perfil.wrapper-perfil .fila-dato-perfil-con-logo{
		gap: 16px !important;
	}
	#main_perfil.wrapper-perfil .fila-dato-perfil-con-logo .col-dato-perfil{
		width: 80px;
	}
}

/* Responsive — Móvil: logo arriba, texto abajo */
@media screen and (max-width: 767px){
	#main_perfil.wrapper-perfil .titulo-nosotros{
		font-size: 18px !important;
	}
	#main_perfil.wrapper-perfil .fila-dato-perfil-con-logo{
		flex-flow: row wrap !important;
		gap: 12px !important;
	}
	#main_perfil.wrapper-perfil .col-logo-perfil{
		width: 54px;
	}
	#main_perfil.wrapper-perfil .fila-dato-perfil-con-logo .col-dato-perfil{
		width: auto;
		flex: 1 1 auto;
		padding-top: 6px;
	}
	#main_perfil.wrapper-perfil .fila-dato-perfil-con-logo .col-titulo-post{
		flex: 1 1 100%;
	}
}

/* ================================================
   Cuadrícula de Comerciales del Talento
   — Foto del talento al centro, videos alrededor.
     Aparece al tope de .contenido-proyecto cuando
     el talento tiene al menos un video_grande o
     dos_videos_en_una_fila en contenido_detalle.
   ================================================ */
.contenido-proyecto .comerciales-grid{
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	grid-column-gap: 12px !important;
	grid-row-gap: 12px !important;
	grid-auto-flow: dense !important;
	width: 100% !important;
	margin-bottom: 2vw;
}

/* Foto del talento: centro, spans 2x2 celdas */
.contenido-proyecto .comerciales-grid .foto-talento-central{
	grid-column: 2 / 4;
	grid-row: 1 / 3;
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: #1a1a1a;
}

.contenido-proyecto .comerciales-grid .foto-talento-central img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Encuadre superior para preservar la cara del talento */
	object-position: center 20%;
	display: block;
}

/* Cada video comercial */
.contenido-proyecto .comerciales-grid .comercial-item{
	aspect-ratio: 16 / 9;
	overflow: hidden;
	position: relative;
	background: #111;
}

.contenido-proyecto .comerciales-grid .comercial-item video{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	background-size: cover;
	background-position: center;
}

/* Eliminar pseudo-elementos de w-clearfix que puedan estorbar */
.contenido-proyecto .comerciales-grid::before,
.contenido-proyecto .comerciales-grid::after{
	display: none !important;
	content: none !important;
}

/* Responsive — Tablet grande: 3 columnas, foto ocupa full-width */
@media screen and (max-width: 1199px){
	.contenido-proyecto .comerciales-grid{
		grid-template-columns: repeat(3, 1fr) !important;
	}
	.contenido-proyecto .comerciales-grid .foto-talento-central{
		grid-column: 1 / -1;
		grid-row: auto;
		aspect-ratio: 16 / 9;
	}
}

/* Tablet: 2 columnas */
@media screen and (max-width: 991px){
	.contenido-proyecto .comerciales-grid{
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

/* Móvil: 1 columna */
@media screen and (max-width: 767px){
	.contenido-proyecto .comerciales-grid{
		grid-template-columns: 1fr !important;
	}
}

/* Hover sobre cada comercial para indicar que es clickable */
.contenido-proyecto .comerciales-grid .comercial-item{
	cursor: pointer;
	transition: transform .3s ease, box-shadow .3s ease;
}
.contenido-proyecto .comerciales-grid .comercial-item:hover{
	transform: scale(1.02);
	box-shadow: 0 6px 20px rgba(0,0,0,.25);
}

/* Overlay con texto "▶ Ver video" en hover */
.contenido-proyecto .comerciales-grid .comercial-item::after{
	content: "▶  Ver video";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0,0,0,.45);
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	opacity: 0;
	transition: opacity .3s ease;
	pointer-events: none;
	text-align: center;
	padding: 10px;
}
.contenido-proyecto .comerciales-grid .comercial-item:hover::after{
	opacity: 1;
}

/* En móvil el hover no aplica — mostrar el CTA siempre, discreto abajo-derecha */
@media (hover: none){
	.contenido-proyecto .comerciales-grid .comercial-item::after{
		content: "▶";
		inset: auto 8px 8px auto;
		width: 32px;
		height: 32px;
		border-radius: 50%;
		background: rgba(0,0,0,.7);
		font-size: 12px;
		padding: 0;
		opacity: 1;
		letter-spacing: 0;
	}
}

/* ================================================
   Modal de reproducción de comerciales
   ================================================ */
.comercial-modal-overlay{
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.92);
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 20px;
	animation: comercialModalFadeIn .25s ease;
}

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

.comercial-modal-content{
	width: 100%;
	max-width: 1200px;
	max-height: 85vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.comercial-modal-content video{
	width: 100%;
	height: auto;
	max-height: 85vh;
	display: block;
	background: #000;
	outline: none;
}

.comercial-modal-close{
	position: fixed;
	top: 18px;
	right: 24px;
	width: 44px;
	height: 44px;
	background: transparent;
	border: none;
	color: #fff;
	font-size: 36px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	z-index: 100000;
	transition: opacity .2s ease, transform .2s ease;
	font-family: inherit;
}
.comercial-modal-close:hover{
	opacity: .7;
	transform: scale(1.1);
}

/* Client Roster — grid de logos */
#main_servicios .lista-de-logos {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 0 !important;
	margin: 0 !important;
	border-left: 1px solid rgba(58,55,53,0.12);
}

#main_servicios .lista-de-logos .logo-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 28px;
	border-right: 1px solid rgba(58,55,53,0.12);
	border-bottom: 1px solid rgba(58,55,53,0.12);
	transition: background .2s ease;
	background: transparent;
}

#main_servicios .lista-de-logos .logo-wrapper:hover {
	background: var(--black);
}

#main_servicios .lista-de-logos .logo-wrapper .logo-informacion {
	width: 100% !important;
	max-height: 80px;
	object-fit: contain;
	object-position: center center;
	filter: grayscale(100%);
	opacity: 0.5;
	transition: opacity .2s ease, filter .2s ease;
}

#main_servicios .lista-de-logos .logo-wrapper:hover .logo-informacion {
	opacity: 1;
	filter: grayscale(100%) brightness(10);
}

@media screen and (max-width: 767px){
	#main_servicios .lista-de-logos {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

/* Bloquea scroll del body mientras el modal está abierto */
body.comercial-modal-open{
	overflow: hidden;
}

/* Responsive del modal */
@media screen and (max-width: 767px){
	.comercial-modal-overlay{
		padding: 60px 12px 20px;
	}
	.comercial-modal-close{
		top: 10px;
		right: 12px;
		font-size: 32px;
	}
}

/* Leyenda filtro Niños */
.leyenda-ninos {
	width: 100%;
	padding: 40px 0 20px;
}

.leyenda-ninos p {
	font-size: 13px;
	letter-spacing: .03em;
	color: var(--cafesin);
	margin: 0;
	line-height: 1.6em;
}

.leyenda-ninos a {
	color: var(--black);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}