/*--------------------------------------------------------------
# Clientes (solo page-clientes.php)
# El hero usa .edudire-hero + .clientes-hero; valores por defecto en edudire.css.
# Añade aquí solo overrides sin modificar edudire.css.
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Hero (fondo primary-40; título secondary-100; subtítulo secondary-60; CTAs secondary dark + primary dark)
--------------------------------------------------------------*/

.clientes-hero {
	--clientes-hero-bg: var(--primary-40, #d4e5ec);
	background-color: var(--clientes-hero-bg);
	color: var(--secondary-60, #75a7b7);
}

.clientes-hero .edudire-hero__heading {
	color: var(--secondary-100, #196c87);
}

.clientes-hero .edudire-hero__subheading {
	color: var(--secondary-60, #75a7b7);
}

.clientes-hero .edudire-hero__subheading p {
	color: inherit;
}

/*--------------------------------------------------------------
# Intro (ACF `texto_intro` o `intro_text`; misma idea que Binomio / Ciclo de vida)
--------------------------------------------------------------*/

.clientes-seccion--intro .clientes-intro__texto {
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	color: var(--secondary-100, #196c87);
}

.clientes-seccion--intro .clientes-intro__texto > *:first-child {
	margin-top: 0;
}

.clientes-seccion--intro .clientes-intro__texto > *:last-child {
	margin-bottom: 0;
}

/* CTAs del hero: en móvil ancho 100% vía edudire.css (.edudire-hero__actions en max-width 991px). */

/*--------------------------------------------------------------
# Logos (CPT `logo`) — cajas cuadradas (aspect-ratio 1); móvil siempre 2 columnas; hasta 6 en escritorio
--------------------------------------------------------------*/

.clientes-seccion--logos {
	min-width: 0;
	max-width: 100%;
}

.clientes-seccion--logos > .contenedor {
	min-width: 0;
}

.clientes-logos-grid {
	display: grid;
	gap: clamp( 0.75rem, 2vw, 1.25rem );
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	box-sizing: border-box;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}

@media ( min-width: 700px ) {
	.clientes-logos-grid {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}
}

@media ( min-width: 940px ) {
	.clientes-logos-grid {
		grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	}
}

@media ( min-width: 1120px ) {
	.clientes-logos-grid {
		grid-template-columns: repeat( 5, minmax( 0, 1fr ) );
	}
}

@media ( min-width: 1320px ) {
	.clientes-logos-grid {
		grid-template-columns: repeat( 6, minmax( 0, 1fr ) );
	}
}

.clientes-logos-grid__cell {
	display: block;
	width: 100%;
	min-width: 0;
}

/* Revelado al scroll (clientes-logos-reveal.js): sin AOS; --clientes-logo-reveal-delay escala el inicio */
.clientes-seccion--logos.clientes-logos--observe .clientes-logos-grid__cell:not( .is-revealed ) {
	opacity: 0;
	transform: translate3d( 0, 36px, 0 ) scale( 0.94 );
	filter: blur( 4px );
	will-change: opacity, transform, filter;
	pointer-events: none;
}

.clientes-seccion--logos.clientes-logos--observe .clientes-logos-grid__cell.is-revealed {
	opacity: 1;
	transform: translate3d( 0, 0, 0 ) scale( 1 );
	filter: blur( 0 );
	will-change: auto;
	pointer-events: auto;
	transition:
		opacity 0.72s cubic-bezier( 0.22, 1, 0.36, 1 ),
		transform 0.72s cubic-bezier( 0.22, 1, 0.36, 1 ),
		filter 0.55s cubic-bezier( 0.22, 1, 0.36, 1 );
	transition-delay: var( --clientes-logo-reveal-delay, 0ms );
}

@media ( prefers-reduced-motion: reduce ) {
	.clientes-seccion--logos.clientes-logos--observe .clientes-logos-grid__cell:not( .is-revealed ),
	.clientes-seccion--logos.clientes-logos--observe .clientes-logos-grid__cell.is-revealed {
		opacity: 1;
		transform: none;
		filter: none;
		will-change: auto;
		pointer-events: auto;
		transition: none;
	}
}

.clientes-seccion--logos .logo-box {
	width: 100%;
	max-width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	padding: clamp( 10px, 4.5%, 18px );
	box-sizing: border-box;
	background-color: var( --gray-100 );
	border: 0.75px solid var( --primary-40, #d4e5ec );
	border-radius: 12px;
	transition:
		border-color 0.25s ease,
		box-shadow 0.25s ease,
		transform 0.25s ease;
}

@media ( hover: hover ) {
	.clientes-seccion--logos .logo-box:hover {
		border-color: var( --secondary-60, #75a7b7 );
		box-shadow: 0 4px 16px rgba( 25, 108, 135, 0.12 );
		transform: translateY( -3px );
	}
}

.clientes-seccion--logos .logo-item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.clientes-seccion--logos .logo-item img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

/*--------------------------------------------------------------
# Testimonios — card + Swiper (CPT `testimonio`, sin enlaces)
--------------------------------------------------------------*/

.clientes-seccion--testimonios {
	min-width: 0;
	max-width: 100%;
}

/* Misma caja que intro / contenido: max-width y padding vía main.css (.contenedor). */
.clientes-seccion--testimonios > .contenedor {
	min-width: 0;
}

.clientes-seccion--testimonios > .contenedor .clientes-testimonios-panel {
	width: 100%;
	min-width: 0;
}

.clientes-testimonios-panel {
	--testimonios-bg: var( --secondary-80, #47899f );
	--testimonios-text: #fff;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	background-color: var( --testimonios-bg );
	color: var( --testimonios-text );
	border-radius: 24px;
	padding: 36px 72px;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

.clientes-testimonios-panel > .clientes-testimonios-panel__grid {
	flex: 1 1 auto;
	min-height: 0;
	width: 100%;
}

@media ( max-width: 767px ) {
	.clientes-testimonios-panel {
		padding: 16px;
	}
}

.clientes-testimonios-panel__grid {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: clamp( 1.5rem, 3vw, 2.5rem );
	min-width: 0;
	max-width: 100%;
	width: 100%;
}

@media ( min-width: 992px ) {
	.clientes-testimonios-panel__grid {
		flex-direction: row;
		align-items: stretch;
		min-height: 260px;
	}

	.clientes-testimonios-panel__aside {
		flex: 0 0 40%;
		max-width: 40%;
		min-width: 0;
		align-self: stretch;
		min-height: 100%;
	}

	.clientes-testimonios-panel__slider {
		flex: 1 1 0;
		width: 100%;
		min-width: 0;
	}
}

.clientes-testimonios-panel__aside {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 0;
	min-width: 0;
	width: 100%;
	min-height: 0;
}

/* Tipografías: title-M, body-XL, body-M, body-XS (fonts-sizes.css). Aquí solo color / layout. */
.clientes-testimonios-panel__title {
	flex: 0 0 auto;
	align-self: flex-start;
	margin: 0;
	max-width: 100%;
	color: var( --testimonios-text );
	overflow-wrap: break-word;
}

.clientes-testimonios-panel__title > *:first-child {
	margin-top: 0;
}

.clientes-testimonios-panel__title > *:last-child {
	margin-bottom: 0;
}

.clientes-testimonios__fraction--aside {
	flex: 0 0 auto;
	margin-top: auto;
	color: var( --testimonios-text );
}

.clientes-testimonios-panel__aside > .clientes-testimonios__fraction--aside:only-child {
	margin-top: 0;
}

.clientes-testimonios__fraction--dock {
	display: none;
	margin: 0;
	color: var( --testimonios-text );
	text-align: center;
	pointer-events: none;
}

@media ( max-width: 767px ) {
	.clientes-testimonios__fraction--aside {
		display: none !important;
	}

	.clientes-testimonios__fraction--dock {
		display: block;
	}
}

.clientes-testimonios-panel__slider {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 1rem;
	min-width: 0;
	width: 100%;
	position: relative;
}

.clientes-testimonios-swiper {
	flex: 1 1 auto;
	align-self: stretch;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	overflow: hidden;
	box-sizing: border-box;
}

.clientes-testimonios-swiper .swiper-wrapper {
	width: 100%;
	box-sizing: border-box;
}

.clientes-testimonios-swiper .swiper-slide {
	min-width: 0;
	width: 100% !important;
	max-width: 100%;
	box-sizing: border-box;
}

.clientes-testimonio-slide {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	width: 100%;
	height: 100%;
	min-height: 100%;
	min-width: 0;
	max-width: 100%;
	color: var( --testimonios-text );
	box-sizing: border-box;
	--testimonio-body-pad-left: 0.85em;
	/* Un poco más que el padding del cuerpo: la comilla (::before) ocupa espacio y el texto empieza más a la derecha. */
	--testimonio-meta-pad-left: calc( var( --testimonio-body-pad-left ) + 0.4em );
}

.clientes-testimonio-slide__body {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	padding: 0.15em 0 0.35em var( --testimonio-body-pad-left );
	color: inherit;
	max-width: 100%;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

.clientes-testimonio-slide__body::before {
	content: "\201C";
	position: absolute;
	left: 0;
	top: -0.05em;
	font-size: 2.1em;
	line-height: 0.85;
	font-weight: 300;
	color: #fff;
	opacity: 1;
	pointer-events: none;
}

.clientes-testimonio-slide__body > *:first-child {
	margin-top: 0;
}

.clientes-testimonio-slide__body > *:last-child {
	margin-bottom: 0;
}

.clientes-testimonio-slide__body img,
.clientes-testimonio-slide__body video {
	max-width: 100%;
	height: auto;
}

.clientes-testimonio-slide__meta {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-top: auto;
	padding-left: var( --testimonio-meta-pad-left );
	box-sizing: border-box;
}

.clientes-testimonio-slide__avatar {
	flex: 0 0 auto;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	overflow: hidden;
	background: rgba( 255, 255, 255, 0.15 );
}

.clientes-testimonio-slide__avatar-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale( 100% );
}

.clientes-testimonio-slide__who {
	flex: 1 1 auto;
	min-width: 0;
}

.clientes-testimonio-slide__name-line {
	margin: 0 0 0.25rem;
	color: inherit;
}

.clientes-testimonio-slide__empresa {
	margin: 0;
	color: inherit;
}

.clientes-testimonios-nav {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	flex-wrap: nowrap;
	gap: 0.75rem;
	margin-top: auto;
	padding-top: 0.25rem;
	max-width: 100%;
	min-width: 0;
}

@media ( max-width: 767px ) {
	.clientes-testimonios-nav {
		display: grid;
		grid-template-columns: minmax( 0, 1fr ) auto minmax( 0, 1fr );
		align-items: center;
		justify-content: unset;
		width: 100%;
		column-gap: 0.5rem;
		padding-top: 1rem;
	}

	.clientes-testimonios-nav__btn--prev {
		justify-self: start;
	}

	.clientes-testimonios__fraction--dock {
		justify-self: center;
		grid-column: 2;
		max-width: 100%;
		min-width: 0;
	}

	.clientes-testimonios-nav__btn--next {
		justify-self: end;
		grid-column: 3;
	}

	.clientes-testimonios-nav__btn {
		position: relative;
		z-index: 1;
		touch-action: manipulation;
	}
}

.clientes-testimonios-nav__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 80px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid rgba( 255, 255, 255, 0.85 );
	background: transparent;
	color: var( --testimonios-text );
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

@media ( max-width: 767px ) {
	.clientes-testimonios-nav__btn {
		width: 60px;
		height: 60px;
	}

	.clientes-testimonios-nav__icon {
		width: 22px;
		height: 22px;
	}
}

.clientes-testimonios-nav__btn:hover,
.clientes-testimonios-nav__btn:focus-visible {
	background: rgba( 255, 255, 255, 0.12 );
	border-color: #fff;
	outline: none;
}

.clientes-testimonios-nav__btn[hidden] {
	display: none;
}

.clientes-testimonios-nav__btn:focus-visible {
	box-shadow: 0 0 0 2px var( --testimonios-bg ), 0 0 0 4px #fff;
}