/**
 * Widget "CUME Testimonial".
 *
 * Slider de tarjetas testimoniales (estrellas, cita, comilla decorativa,
 * autor, rol y emblema). Construido sobre los tokens de tema de CUME Core
 * (`--cume-*`), por lo que se adapta a modo claro/oscuro. Slider propio en
 * JS vanilla (sin dependencias): ver cume-testimonial.js.
 *
 * Hover: la tarjeta se eleva ligeramente y se iluminan el borde y la comilla
 * decorativa de fondo. Todos los valores clave son custom properties que los
 * controles de Elementor sobreescriben.
 */

.cume-testimonial {
	--cume-ts-per: 1;
	--cume-ts-gap: 24px;
	--cume-ts-radius: 16px;
	--cume-ts-pad: 40px;
	--cume-ts-lift: 8px;
	--cume-ts-transition: 320ms;

	--cume-ts-surface: var(--cume-surface, #ffffff);
	--cume-ts-border: var(--cume-border, #e6e6ec);
	--cume-ts-hover-border: var(--cume-accent, #ffa800);

	--cume-ts-accent: var(--cume-primary, #26214f); /* nombre del autor */
	--cume-ts-star: var(--cume-accent, #ffa800);

	--cume-ts-quote-color: var(--cume-text, #26214f);
	--cume-ts-role-color: var(--cume-text-muted, #5b5b6e);

	/* Variante "Mensaje destacado". */
	--cume-ts-photo-size: 92px;
	--cume-ts-photo-radius: 50%;
	--cume-ts-photo-ring: #6c63b5;
	--cume-ts-photo-ring-w: 3px;
	--cume-ts-photo-fit: cover;
	--cume-ts-photo-pos: center center;
	--cume-ts-head-gap: 22px;
	--cume-ts-head-align: center;
	--cume-ts-headline-color: var(--cume-primary-light, #6c63b5);
	--cume-ts-closing-color: var(--cume-text, #26214f);

	--cume-ts-mark-size: 96px;
	--cume-ts-mark-color: color-mix(in srgb, var(--cume-text-muted, #5b5b6e) 26%, transparent);
	--cume-ts-mark-hover: var(--cume-accent, #ffa800);

	position: relative;
}

/* Antetítulo sobre la tarjeta (ej. "MENSAJE DEL DECANATO"). */
.cume-testimonial__eyebrow {
	margin: 0 0 var(--cume-ts-eyebrow-mb, 18px);
	color: var(--cume-ts-eyebrow-color, var(--cume-primary-light, #6c63b5));
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-align: center;
	line-height: 1.3;
}

/* Escenario: contiene el viewport y las flechas (referencia de posición). */
.cume-testimonial__stage {
	position: relative;
}

.cume-testimonial__viewport {
	overflow: hidden;
}

.cume-testimonial__track {
	display: flex;
	gap: var(--cume-ts-gap);
	transition: transform var(--cume-ts-transition) ease;
	will-change: transform;
}

.cume-testimonial__slide {
	padding: 10px;
	flex: 0 0 auto; /* el ancho lo fija el JS según ítems por vista */
	box-sizing: border-box;
	height: auto;
}

/* --- Tarjeta --- */
.cume-testimonial__card {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	height: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	padding: var(--cume-ts-pad);
	background: var(--cume-ts-surface);
	border: 1px solid var(--cume-ts-border);
	border-radius: var(--cume-ts-radius);
	box-shadow: var(--cume-shadow-sm, 0 2px 8px rgba(38, 33, 79, 0.06));
	transition: transform var(--cume-ts-transition) cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow var(--cume-ts-transition) ease,
		border-color var(--cume-ts-transition) ease,
		background-color var(--cume-ts-transition) ease;
	will-change: transform;
}

.cume-testimonial__card:hover {
	transform: translateY(calc(-1 * var(--cume-ts-lift)));
	box-shadow: var(--cume-shadow-lg, 0 22px 48px rgba(38, 33, 79, 0.16));
	border-color: var(--cume-ts-hover-border);
}

/* Comilla decorativa de fondo (se ilumina en hover). */
.cume-testimonial__mark {
	position: absolute;
	top: 18px;
	right: 22px;
	z-index: 0;
	width: var(--cume-ts-mark-size);
	height: auto;
	color: var(--cume-ts-mark-color);
	pointer-events: none;
	transition: color var(--cume-ts-transition) ease, transform var(--cume-ts-transition) ease;
}

.cume-testimonial__card:hover .cume-testimonial__mark {
	color: var(--cume-ts-mark-hover);
}

.cume-testimonial__mark svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: currentColor;
}

/* Contenido por encima de la comilla. */
.cume-testimonial__card > *:not(.cume-testimonial__mark) {
	position: relative;
	z-index: 1;
}

/* Pie de la tarjeta (divisor + autor + rol + emblema): anclado al fondo,
 * para que su posición sea constante aunque la cita sea corta o larga. */
.cume-testimonial__footer {
	margin-top: auto;
}

/* --- Estrellas --- */
.cume-testimonial__stars {
	display: inline-flex;
	gap: var(--cume-ts-star-gap, 4px);
	color: var(--cume-ts-star);
	font-size: var(--cume-ts-star-size, 18px);
	margin-bottom: var(--cume-ts-stars-mb, 22px);
}

.cume-testimonial__star {
	display: inline-flex;
	width: 1em;
	height: 1em;
}

.cume-testimonial__star svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.cume-testimonial__star--empty {
	color: color-mix(in srgb, var(--cume-ts-star) 28%, transparent);
}

/* --- Cita ---
 * Es un contenedor: el campo admite varios párrafos, así que los márgenes los
 * llevan los <p> internos y el último no separa del divisor. */
.cume-testimonial__quote {
	margin: 0 0 var(--cume-ts-quote-mb, 28px);
	color: var(--cume-ts-quote-color);
	font-style: italic;
	font-size: 1.25rem;
	line-height: 1.55;
}

.cume-testimonial__quote > p {
	margin: 0 0 0.9em;
	color: inherit;
	font: inherit;
}

.cume-testimonial__quote > :last-child {
	margin-bottom: 0;
}

/* --- Divisor --- */
.cume-testimonial__divider {
	height: 0;
	border: 0;
	border-top: var(--cume-ts-divider-w, 1px) solid var(--cume-ts-divider, var(--cume-border, #e6e6ec));
	margin: var(--cume-ts-divider-mt, 0) 0 var(--cume-ts-divider-mb, 20px);
	width: 100%;
}

/* --- Autor / rol / badge --- */
.cume-testimonial__name {
	margin: 0;
	color: var(--cume-ts-accent);
	font-weight: 700;
	line-height: 1.2;
}

.cume-testimonial__role {
	margin: 4px 0 0;
	color: var(--cume-ts-role-color);
	font-size: 0.95em;
	line-height: 1.3;
}

.cume-testimonial__badge {
	display: inline-block;
	margin-top: 14px;
	padding: 5px 14px;
	border-radius: var(--cume-ts-badge-radius, 999px);
	border: 1px solid var(--cume-ts-badge-border, var(--cume-accent, #ffa800));
	background: var(--cume-ts-badge-bg, transparent);
	color: var(--cume-ts-badge-color, var(--cume-accent, #ffa800));
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	line-height: 1.1;
}

/* =========================================================================
 * VARIANTE "MENSAJE DESTACADO"
 * La clase la inyecta Elementor en el wrapper del widget (prefix_class).
 * Comparte tarjeta, comilla, divisor, nombre y rol con el carrusel; cambia la
 * composición: autor en la cabecera y frase de cierre al pie.
 * ====================================================================== */

.cume-testimonial__head {
	display: flex;
	align-items: var(--cume-ts-head-align);
	gap: var(--cume-ts-head-gap);
	margin-bottom: 28px;
}

.cume-testimonial__photo {
	flex: 0 0 auto;
	box-sizing: border-box;
	width: var(--cume-ts-photo-size);
	height: var(--cume-ts-photo-size);
	padding: var(--cume-ts-photo-ring-w);
	border-radius: var(--cume-ts-photo-radius);
	background: var(--cume-ts-photo-ring);
	line-height: 0; /* evita el hueco del renglón bajo la imagen */
}

/* Se cualifica con la etiqueta y el contenedor para ganar a la regla base de
 * Elementor (`.elementor img { height: auto; border-radius: 0 }`), que de otro
 * modo deja la foto rectangular y desbordada, y anula el punto focal al no
 * haber altura fija sobre la que recortar. */
.cume-testimonial__photo img.cume-testimonial__photo-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	border-radius: inherit;
	/* El encaje y el punto focal son configurables: una foto horizontal
	 * recortada al centro suele dejar la cara descolocada. */
	object-fit: var(--cume-ts-photo-fit, cover);
	object-position: var(--cume-ts-photo-pos, center center);
}

.cume-testimonial__head-text {
	min-width: 0;
}

.cume-testimonial__headline {
	margin: 0 0 10px;
	color: var(--cume-ts-headline-color);
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	line-height: 1.25;
}

/* En esta variante el cuerpo es texto corrido, no una cita en cursiva. */
.cume-testimonial--variant-message .cume-testimonial__quote {
	font-style: normal;
	font-size: 1.05rem;
}

/* El pie solo lleva la frase de cierre: no se ancla al fondo para que quede
 * pegado al texto cuando el mensaje es corto. */
.cume-testimonial--variant-message .cume-testimonial__footer {
	margin-top: 0;
}

.cume-testimonial__closing {
	margin: 0;
	color: var(--cume-ts-closing-color);
	font-size: 1.1rem;
	font-style: italic;
	line-height: 1.5;
}

@media (max-width: 767px) {
	.cume-testimonial__head {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* --- Navegación (flechas) --- */
.cume-testimonial__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--cume-ts-nav-size, 44px);
	height: var(--cume-ts-nav-size, 44px);
	padding: 0;
	border-radius: 50%;
	border: 1px solid var(--cume-ts-nav-border, var(--cume-border, #e6e6ec));
	background: var(--cume-ts-nav-bg, var(--cume-surface, #fff));
	color: var(--cume-ts-nav-color, var(--cume-primary, #26214f));
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.cume-testimonial__nav:hover {
	background: var(--cume-ts-nav-bg-hover, var(--cume-accent, #ffa800));
	color: var(--cume-ts-nav-color-hover, #ffffff);
	border-color: var(--cume-ts-nav-bg-hover, var(--cume-accent, #ffa800));
}

.cume-testimonial__nav svg {
	width: 45%;
	height: 45%;
	fill: currentColor;
}

.cume-testimonial__nav--prev {
	left: var(--cume-ts-nav-offset, 8px);
}
.cume-testimonial__nav--next {
	right: var(--cume-ts-nav-offset, 8px);
}

.cume-testimonial__nav[disabled] {
	opacity: 0.35;
	cursor: default;
}

/* --- Paginación (dots) --- */
.cume-testimonial__dots {
	display: flex;
	justify-content: center;
	gap: var(--cume-ts-dot-gap, 8px);
	margin-top: var(--cume-ts-dots-mt, 24px);
}

.cume-testimonial__dot {
	width: var(--cume-ts-dot-size, 10px);
	height: var(--cume-ts-dot-size, 10px);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--cume-ts-dot, var(--cume-border-strong, #d6d6de));
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.cume-testimonial__dot.is-active {
	background: var(--cume-ts-dot-active, var(--cume-accent, #ffa800));
	transform: scale(1.25);
}

/* Ocultar controles vía clases (toggles de Elementor). */
.cume-testimonial--no-nav .cume-testimonial__nav {
	display: none;
}
.cume-testimonial--no-dots .cume-testimonial__dots {
	display: none;
}

/* Flechas: dentro del contenido (default) vs fuera de las tarjetas. */
.cume-testimonial--arrows-outside .cume-testimonial__stage {
	padding-left: var(--cume-ts-nav-space, 64px);
	padding-right: var(--cume-ts-nav-space, 64px);
}
.cume-testimonial--arrows-outside .cume-testimonial__nav--prev {
	left: 0;
}
.cume-testimonial--arrows-outside .cume-testimonial__nav--next {
	right: 0;
}

/* Sin flechas visibles no hay que reservarles sitio: pasaba con un solo ítem
 * (donde el render las oculta) y estrechaba la tarjeta sin motivo. */
.cume-testimonial--no-nav.cume-testimonial--arrows-outside .cume-testimonial__stage {
	padding-left: 0;
	padding-right: 0;
}

/* En móvil las flechas se superponen a la tarjeta en lugar de robarle ancho:
 * 64 px por lado se comen más de un cuarto de la pantalla. Se declara el
 * padding directamente (no la variable) para que gane al valor del control. */
@media (max-width: 767px) {
	.cume-testimonial--arrows-outside .cume-testimonial__stage {
		padding-left: 0;
		padding-right: 0;
	}
}

/* Paginación: fuera/debajo (default) vs dentro (superpuesta al fondo). */
.cume-testimonial--dots-inside .cume-testimonial__dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: var(--cume-ts-dots-inset, 16px);
	margin-top: 0;
	z-index: 5;
}

@media (prefers-reduced-motion: reduce) {
	.cume-testimonial__track,
	.cume-testimonial__card,
	.cume-testimonial__mark {
		transition: none;
	}
	.cume-testimonial__card:hover {
		transform: none;
	}
}