/* css/components/testimonials.css · COMPONENTE · testimonios en carrusel · todas las páginas (por si se reutiliza)
   Sección «Testimonios» de la home, con su plantilla «Loop Testimonials» y el contenido de mu-plugins/testimonios.php. Clase raíz: mt-testimonials (+ -title, -subtitle, -name, -quote).
   Tarjetas, flechas del carrusel (hover naranja), comillas y separación. Escala con --u7 (1 u = 1 px del diseño a 1920 px).
*/

/* Sección 7 "Testimonios" (ver scripts/archivo/pixel-seccion7.php): base 1920 x 958, toda la sección cabe en pantalla; sin pasar de su tamaño.
   Carrusel: 3 tarjetas de 550 con 30 de separación y un trozo de las vecinas a cada lado. Swiper reparte el ancho que queda tras el desfase lateral
   (padding del contenedor), así que el desfase es (ancho - 3 tarjetas - 2 separaciones) / 2 = (100% - 1710u) / 2 y las tarjetas miden 550u. */
.mt-testimonials { --u7: min(calc(100vw / 1920), calc(100svh / 958), 1px); }

.mt-testimonials .elementor-widget-loop-carousel {
	--swiper-offset-size: calc((100% - 1710 * var(--u7)) / 2) !important;
	--swiper-slides-gap: calc(30 * var(--u7));
	/* posición de las flechas con las variables del propio widget (su regla tiene más peso que cualquier selector mío): el centro queda a 871,4u del centro */
	--arrow-prev-left-align: 50% !important; --arrow-prev-left-position: calc(-895 * var(--u7)) !important; --arrow-prev-translate-x: 0px !important;
	--arrow-next-right-align: 50% !important; --arrow-next-right-position: calc(-895 * var(--u7)) !important; --arrow-next-translate-x: 0px !important;
	--arrow-prev-top-align: 50% !important; --arrow-next-top-align: 50% !important; --arrow-prev-caption-spacing: 0px !important; --arrow-next-caption-spacing: 0px !important;
	--arrow-prev-top-position: calc(-22.7 * var(--u7)) !important; --arrow-next-top-position: calc(-22.7 * var(--u7)) !important;
	--arrow-prev-translate-y: 0px !important; --arrow-next-translate-y: 0px !important;
}

/* flechas: círculo marrón de 47u centrado en el hueco entre la tarjeta lateral y la primera/última (x = 88,6u del borde), a la altura del centro de las tarjetas;
   el chevron fino se dibuja con una máscara SVG (el icono del tema es mucho más grueso). */
.mt-testimonials .elementor-widget-loop-carousel .elementor-swiper-button {
	width: calc(47 * var(--u7)); height: calc(47 * var(--u7)); padding: 0; border: 0; border-radius: 50%;
	background: #301F15; cursor: pointer; display: flex; align-items: center; justify-content: center;
}

.mt-testimonials .elementor-widget-loop-carousel .elementor-swiper-button > * { display: none; }

.mt-testimonials .elementor-widget-loop-carousel .elementor-swiper-button::before {
	content: ''; width: calc(8 * var(--u7)); height: calc(15 * var(--u7)); background: #fff;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 15'%3E%3Cpath d='M7 1L1.2 7.5L7 14' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 15'%3E%3Cpath d='M7 1L1.2 7.5L7 14' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

.mt-testimonials .elementor-widget-loop-carousel .elementor-swiper-button-next::before { transform: scaleX(-1); }

/* comillas de las tarjetas: images/comillas.svg (del diseño, 31 x 27 u) en lugar del icono del tema */
.mt-testimonials .elementor-widget-icon .elementor-icon { line-height: 0; }

.mt-testimonials .elementor-widget-icon .elementor-icon > * { display: none; }

.mt-testimonials .elementor-widget-icon .elementor-icon::before { content: ''; display: block; width: calc(31 * var(--u7)); height: calc(27 * var(--u7)); background: url(../../images/comillas.svg) center / contain no-repeat; }

.mt-testimonials h3.elementor-heading-title { padding-left: .4em; } /* el espaciado de letras también va tras la última: se compensa para que el antetítulo quede centrado */

/* Flechas del carrusel de testimonios en tablet: con el escalado en vw el círculo medía ~25 px y el chevron ~4 x 8 px (trazo de 0,8 px), invisible.
   Círculo de 36 px y chevron de 9 x 16 px; las posiciones se recalculan para que el centro del círculo no se mueva. */
@media (min-width: 768px) and (max-width: 1024px) {
	.mt-testimonials .elementor-widget-loop-carousel {
		--arrow-prev-left-position: calc(-895 * var(--u7) + (47 * var(--u7) - 36px) / 2) !important;
		--arrow-next-right-position: calc(-895 * var(--u7) + (47 * var(--u7) - 36px) / 2) !important;
		--arrow-prev-top-position: calc(-18px + .8 * var(--u7)) !important; --arrow-next-top-position: calc(-18px + .8 * var(--u7)) !important;
	}
	.mt-testimonials .elementor-widget-loop-carousel .elementor-swiper-button { width: 36px; height: 36px; }
	.mt-testimonials .elementor-widget-loop-carousel .elementor-swiper-button::before { width: 9px; height: 16px; }
}

/* sección 7 (testimonios): en las tarjetas el texto salía a 7,2 px y el nombre a 11 px. Texto 14 px, nombre 18 px, comillas más grandes, y la tarjeta crece con su contenido
   (tenía alto mínimo fijo en u7; Swiper iguala el alto de todas a la más alta). */
@media (min-width: 768px) and (max-width: 1024px) {
	.mt-testimonials .swiper-slide { height: auto !important; }
	.mt-testimonials .e-loop-item > .e-con { min-height: 0 !important; height: 100% !important; padding: 28px 20px 28px !important; }
	.mt-testimonials .mt-testimonials-quote { width: 100% !important; max-width: none !important; }
	.mt-testimonials .mt-testimonials-quote, .mt-testimonials .mt-testimonials-quote .elementor-widget-container { font-size: 14px !important; line-height: 1.5 !important; }
	.mt-testimonials .mt-testimonials-name .elementor-heading-title { font-size: 18px !important; line-height: 1.2 !important; }
	.mt-testimonials .elementor-widget-icon .elementor-icon::before { width: 22px; height: 19px; }
}

/* vertical, sección 7: título "Testimonios" a 40 px, subtítulo a 13 px (mismo espaciado de letras relativo) y 72 px de aire entre las tarjetas y el pie */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
	.mt-testimonials .mt-testimonials-title .elementor-heading-title { font-size: 40px !important; line-height: 1.1 !important; }
	.mt-testimonials .mt-testimonials-subtitle .elementor-heading-title { font-size: 13px !important; line-height: 1.3 !important; letter-spacing: .4em !important; }
	.mt-testimonials { padding-bottom: 72px !important; }
}

/* horizontal, sección 7: aire entre las tarjetas (ahora más altas) y el pie, como en vertical */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
	.mt-testimonials { padding-bottom: 72px !important; }
}

/* Sección 7 (testimonios) en móvil: una tarjeta con un trozo de las vecinas a cada lado (margen lateral 28 px, separación 12 px en js/global.js), la tarjeta crece con su texto y las flechas van a los lados, en el hueco entre tarjetas. */
@media (max-width: 767px) {
	.mt-testimonials { padding: 48px 0 72px !important; }
	.mt-testimonials .mt-testimonials-title .elementor-heading-title { font-size: 34px !important; line-height: 1.1 !important; }
	.mt-testimonials .mt-testimonials-subtitle { width: 100% !important; max-width: 100% !important; }
	.mt-testimonials .mt-testimonials-subtitle .elementor-heading-title { font-size: 11px !important; line-height: 1.5 !important; letter-spacing: .3em !important; text-align: center; text-wrap: balance; padding: 0 24px; }
	.mt-testimonials .elementor-widget-loop-carousel { --swiper-offset-size: 28px !important; --swiper-slides-gap: 12px; margin-top: 24px; }
	.mt-testimonials .swiper-slide { height: auto !important; }
	.mt-testimonials .e-loop-item > .e-con { min-height: 0 !important; height: 100% !important; padding: 28px 22px 28px !important; }
	.mt-testimonials .mt-testimonials-quote { width: 100% !important; max-width: none !important; }
	.mt-testimonials .mt-testimonials-quote, .mt-testimonials .mt-testimonials-quote .elementor-widget-container { font-size: 14px !important; line-height: 1.5 !important; }
	.mt-testimonials .mt-testimonials-name .elementor-heading-title { font-size: 18px !important; line-height: 1.2 !important; }
	.mt-testimonials .elementor-widget-icon .elementor-icon::before { width: 22px; height: 19px; }
	/* flechas: círculos de 36 px a cada lado, centrados en el hueco de 12 px entre la tarjeta y la vecina (centro a 22 px del borde de pantalla) y a media altura */
	.mt-testimonials .elementor-widget-loop-carousel {
		--arrow-prev-left-align: 0% !important; --arrow-prev-left-position: 4px !important;
		--arrow-next-right-align: 0% !important; --arrow-next-right-position: 4px !important;
		--arrow-prev-top-align: 50% !important; --arrow-next-top-align: 50% !important;
		--arrow-prev-top-position: -18px !important; --arrow-next-top-position: -18px !important;
	}
	.mt-testimonials .elementor-widget-loop-carousel .elementor-swiper-button { width: 36px; height: 36px; }
	.mt-testimonials .elementor-widget-loop-carousel .elementor-swiper-button::before { width: 9px; height: 16px; }
}

/* Flechas del carrusel de testimonios (PC, tablet y móvil): hover sencillo (el círculo pasa al naranja del sitio y crece un poco) y feedback al pulsar (se encoge). La propiedad scale va aparte de transform, que Elementor usa para posicionarlas. */
.mt-testimonials .elementor-widget-loop-carousel .elementor-swiper-button { transition: background-color .3s ease, scale .3s ease; }

.mt-testimonials .elementor-widget-loop-carousel .elementor-swiper-button:not(.swiper-button-disabled):is(:hover, :focus-visible) { background: #D35822; scale: 1.1; outline: 0; }

.mt-testimonials .elementor-widget-loop-carousel .elementor-swiper-button:not(.swiper-button-disabled):active { scale: .94; }

@media (prefers-reduced-motion: reduce) {
	.mt-testimonials .elementor-widget-loop-carousel .elementor-swiper-button { transition: none; }
}