/*
 * Testimonios "Años que nos llenan de orgullo": panel rojo grande + lista de personas.
 *
 *   Contenedor sección        → testimonials          (ID de ancla: testimonios)
 *     Contenedor encabezado   → testimonials__head
 *       Título                → testimonials__title
 *       Editor de texto       → testimonials__note    (etiqueta "Testimonios referenciales")
 *     Contenedor cuerpo       → testimonials__body
 *       Contenedor lista      → testimonials__list
 *         Contenedor testimonio (uno por persona) → testimonials__item
 *           Editor de texto   → testimonials__initials   (RM)
 *           Contenedor datos  → testimonials__info
 *             Editor de texto → testimonials__name
 *             Editor de texto → testimonials__role       (cargo · lugar)
 *             Contenedor      → testimonials__bar        (barra de años, la calcula el JS)
 *           Contenedor años   → testimonials__age
 *             Título          → testimonials__age-num    (solo el número: 4)
 *             Editor de texto → testimonials__age-unit   (años)
 *           Editor de texto   → testimonials__quote      (la cita)
 *       Editor de texto       → testimonials__label      (texto bajo la cifra del panel)
 *
 * El panel rojo lo arma testimonials.js con los datos de cada testimonio. En el editor de
 * Elementor, o si el JS no corre, no hay panel: cada testimonio muestra su cita y se edita directo.
 */

.testimonials {
	display: flex;
	flex-direction: column;
	padding: clamp(56px, 6.5vw, 96px) var(--wrap-gutter);
}

.testimonials__head {
	display: flex;
	flex-direction: row !important; /* Elementor fuerza dirección/alineación en sus contenedores */
	flex-wrap: wrap;
	align-items: center !important;
	gap: 14px;
	margin-bottom: clamp(22px, 2.8vw, 36px);
}
.testimonials__head > * { width: auto; }

.testimonials__title .elementor-heading-title {
	font-family: var(--font-display);
	font-size: clamp(30px, 3.8vw, 54px);
	font-weight: 800;
	letter-spacing: -.04em;
	line-height: 1.04;
	color: var(--color-ink);
}
.testimonials__note p { margin: 0; }

.testimonials__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(14px, 2vw, 28px);
	align-items: stretch;
}

/* ---------- Lista ---------- */

.testimonials__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.testimonials__item {
	--item-bg: var(--color-red-soft);
	--item-color: var(--color-brand-red);

	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 14px;
	align-items: center;
	padding: 16px 18px;
	border: 1px solid var(--color-line);
	border-radius: 24px;
	background: #fff;
	text-align: left;
	transition: border-color .3s, box-shadow .3s;
}
.testimonials__item > * { width: auto; }

/* Cuando el JS arma el panel, la lista pasa a ser un selector de pestañas */
.testimonials__item[role="tab"] { flex: 1; cursor: pointer; }
.testimonials__item[role="tab"]:focus-visible { outline: 3px solid var(--color-ink); outline-offset: 3px; }
.testimonials__item[aria-selected="true"] {
	--item-bg: var(--color-brand-red);
	--item-color: #fff;
	border-color: var(--color-brand-red);
	box-shadow: 0 14px 32px rgba(215, 38, 30, .12);
}

.testimonials__initials p {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	margin: 0;
	border-radius: 50%;
	background: var(--item-bg);
	color: var(--item-color);
	font-weight: 800;
	transition: background-color .3s, color .3s;
}

.testimonials__info { display: block; }
.testimonials__name p { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--color-ink); }
.testimonials__role p { margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--color-muted); }

.testimonials__bar {
	height: 4px;
	margin-top: 10px;
	overflow: hidden;
	border-radius: 4px;
	background: var(--color-line);
}
.testimonials__bar::after {
	content: "";
	display: block;
	width: var(--pct, 0%);
	height: 100%;
	border-radius: 4px;
	background: var(--color-brand-red);
	transition: width 1.2s var(--ease-out);
}

.testimonials__age { display: block; text-align: right; }
.testimonials__age-num .elementor-heading-title {
	font-family: var(--font-display);
	font-size: 30px;
	font-weight: 800;
	letter-spacing: -.04em;
	line-height: 1;
	color: var(--color-brand-red);
}
.testimonials__age-unit p {
	margin: 0;
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--color-muted);
}

/* Cita de cada persona: visible en el editor y sin JS; el JS la oculta y la muestra en el panel */
.testimonials__quote { grid-column: 1 / -1; }
.testimonials__quote[hidden] { display: none; }
.testimonials__quote p { margin: 0; font-size: 15px; color: var(--color-ink); }

/* Texto bajo la cifra: sin JS es una nota pequeña; el JS lo lleva al panel */
.testimonials__label p { margin: 0; font-size: 13px; color: var(--color-muted); }

/* ---------- Panel rojo (lo crea el JS) ---------- */

.testimonials__panel {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	gap: 22px;
	min-height: 0;
	padding: clamp(28px, 3.6vw, 56px);
	overflow: hidden;
	border-radius: clamp(26px, 3vw, 40px);
	background: var(--color-brand-red);
	color: #fff;
}
/* Comilla decorativa gigante */
.testimonials__panel::before {
	content: "\201C";
	position: absolute;
	right: .04em;
	bottom: -.42em;
	z-index: -1;
	font-size: clamp(280px, 30vw, 480px);
	font-weight: 800;
	line-height: 1;
	color: rgba(255, 255, 255, .1);
}

.testimonials__panel-years { display: flex; align-items: flex-end; gap: 12px; }
.testimonials__panel-num {
	font-size: clamp(84px, 10vw, 150px);
	font-weight: 800;
	letter-spacing: -.07em;
	line-height: .8;
	font-variant-numeric: tabular-nums;
}

.testimonials__label--panel { padding-bottom: 6px; }
.testimonials__label--panel p {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .08em;
	line-height: 1.25;
	text-transform: uppercase;
	color: #fff;
	opacity: .85;
}

.testimonials__panel-quote {
	flex: 1;
	max-width: 22em;
	margin: 0;
	font-size: clamp(22px, 2.3vw, 32px);
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.25;
}

.testimonials__panel-who { margin: 0; font-size: 15px; color: rgba(255, 255, 255, .85); }
.testimonials__panel-name { margin-right: 6px; font-size: 17px; color: #fff; }

/* Cambio de testimonio: el texto se desvanece y vuelve */
.testimonials__panel-quote,
.testimonials__panel-who,
.testimonials__panel-years {
	transition: opacity .35s, transform .35s;
}
.testimonials__panel--swap .testimonials__panel-quote,
.testimonials__panel--swap .testimonials__panel-who,
.testimonials__panel--swap .testimonials__panel-years {
	opacity: 0;
	transform: translateY(10px);
}

@media (prefers-reduced-motion: reduce) {
	.testimonials__panel-quote,
	.testimonials__panel-who,
	.testimonials__panel-years,
	.testimonials__bar::after { transition: none; }
}

@media (min-width: 768px) {
	.testimonials__panel { min-height: 400px; }
}

@media (min-width: 1025px) {
	.testimonials__body--split { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
}