/* ==========================================================================
   14 · Opiniones de los pacientes (bloque_testimonios del original)
   Carrusel: fila con scroll-snap (sin JS se desplaza a mano); el JS
   14-testimonios-opiniones-de-los-pacientes.js añade bucle, flechas y autoplay 5 s.
   Medidas del original a 1440: título 47/51.7 margen 0 0 35; slide 1110 con texto a 904
   (margen 43 + padding 60); nombre 20/22 700 MAYÚSCULAS ls 2px; texto 22/33.
   ========================================================================== */
.vf-s14 {
	--vf-s14-text-w: 904px;   /* ancho del texto del testimonio (1024 - 2 x 60) */
	--vf-s14-pad-min: 60px;   /* padding lateral mínimo del slide (≥768px) */
	--vf-s14-arrow-w: 27px;
	--vf-s14-arrow-h: 44px;
	color: var(--wp--preset--color--base);
}

.vf-s14 .vf-title {
	color: var(--wp--preset--color--base);
	margin-bottom: 35px;
}

/* Contenedor del carrusel (referencia de las flechas) */
.vf-s14 .vf-s14-carousel {
	position: relative;
}

.vf-s14 .vf-s14-carousel > .vf-s14-track {
	margin-block: 0;
}

/* Pista: una fila, una diapositiva visible, alto = la diapositiva más alta (como Swiper) */
.vf-s14 .vf-s14-track {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 0;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.45) transparent;
}

/* Con JS (flechas y bucle) la barra de desplazamiento sobra */
.vf-s14 .vf-s14-track.is-enhanced {
	scrollbar-width: none;
}

.vf-s14 .vf-s14-track.is-enhanced::-webkit-scrollbar {
	display: none;
}

.vf-s14 .vf-s14-track:focus-visible {
	outline: 2px solid var(--wp--preset--color--base);
	outline-offset: 4px;
}

.vf-s14 .vf-s14-slide {
	flex: 0 0 100%;
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0 max(var(--vf-s14-pad-min), calc((100% - var(--vf-s14-text-w)) / 2));
	scroll-snap-align: start;
	scroll-snap-stop: always;
	text-align: center;
}

/* Nombre (h3.testimonio-title) */
.vf-s14 .vf-s14-slide .vf-s14-name {
	margin: 20px 0 0;
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--bubbler-one);
	font-size: 20px;
	font-weight: 700;
	line-height: 22px;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-align: center;
}

/* Testimonio (p.testimonio-content): 20 (margen h3) + 5 (padding cabecera) + 22 */
.vf-s14 .vf-s14-slide .vf-s14-text {
	margin: 47px 0 22px;
	color: var(--wp--preset--color--base);
	font-size: 22px;
	line-height: 33px;
	text-align: center;
}

/* Flechas (las crea el JS): swiper-button-prev/next, 27x44 a 10px del borde */
.vf-s14 .vf-s14-arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--vf-s14-arrow-w);
	height: var(--vf-s14-arrow-h);
	margin: calc(var(--vf-s14-arrow-h) / -2) 0 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--wp--preset--color--base);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.vf-s14 .vf-s14-arrow--prev { left: 10px; }
.vf-s14 .vf-s14-arrow--next { right: 10px; }

.vf-s14 .vf-s14-arrow svg {
	display: block;
	flex: none;
	width: 27px;
	height: 44px;
	fill: currentColor;
	stroke: none;
	pointer-events: none;
}

.vf-s14 .vf-s14-arrow:focus-visible {
	outline: 2px solid var(--wp--preset--color--base);
	outline-offset: 2px;
}

/* Aparición AOS «fade» (una vez): título 1000 ms, carrusel 1500 ms; las clases las pone el JS */
.vf-s14 .vf-s14-aos {
	opacity: 0;
	transition-property: opacity;
	transition-timing-function: ease;
}

.vf-s14 .vf-s14-aos--1000 { transition-duration: 1s; }
.vf-s14 .vf-s14-aos--1500 { transition-duration: 1.5s; }

.vf-s14 .vf-s14-aos.is-visible {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce), print {
	.vf-s14 .vf-s14-aos {
		opacity: 1;
		transition: none;
	}
}

/* < 768px: sin flechas, texto a 15px del borde (como el original) */
@media (max-width: 767.98px) {
	.vf-s14 .vf-s14-slide {
		padding: 0 15px;
	}

	.vf-s14 .vf-s14-slide .vf-s14-text {
		margin: 22px 0;
	}

	.vf-s14 .vf-s14-arrow {
		display: none;
	}
}