/**
 * Carrusel de imágenes de Elementor, corregido.
 *
 * El widget respeta la proporción original de cada foto, así que mezclar
 * verticales y horizontales producía diapositivas de alturas distintas y
 * huecos blancos entre ellas. Aquí se fuerza una proporción común con recorte
 * centrado y se le da a las flechas y los puntos el estilo del sitio.
 *
 * Se carga solo en páginas que contienen un carrusel de imágenes.
 */

.ctudir-carrusel-fix {
	--cf-azul: #002e5b;
	--cf-azul-vivo: #004d9a;
	--cf-rojo: #f51416;
	--cf-radio: 12px;
}

/* --- Diapositivas de altura uniforme ------------------------------------ */

.ctudir-carrusel-fix .elementor-image-carousel .swiper-slide {
	height: auto;
	display: flex;
	align-items: stretch;
}

.ctudir-carrusel-fix .elementor-image-carousel .swiper-slide figure,
.ctudir-carrusel-fix .elementor-image-carousel .swiper-slide-image,
.ctudir-carrusel-fix .elementor-image-carousel .swiper-slide > div {
	width: 100%;
	margin: 0;
}

/* La clave: ALTURA EXPLÍCITA y recorte centrado.
 *
 * Se usa una altura fija en lugar de `aspect-ratio` a propósito: con la
 * proporción, la altura se deriva del ancho de cada diapositiva, y Swiper
 * calcula anchos ligeramente distintos para las copias que crea en el modo
 * infinito. Eso dejaba filas de 240 px junto a otras de 250. Con la altura
 * fijada, todas coinciden exactamente sea cual sea el ancho. */
.ctudir-carrusel-fix .elementor-image-carousel .swiper-slide img {
	display: block;
	width: 100%;
	height: clamp(190px, 20vw, 280px);
	object-fit: cover;
	object-position: center;
	border-radius: var(--cf-radio);
	background: #eef1f5;
	transition: transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.ctudir-carrusel-fix .elementor-image-carousel .swiper-slide a,
.ctudir-carrusel-fix .elementor-image-carousel .swiper-slide figure {
	display: block;
	width: 100%;
	overflow: hidden;
	border-radius: var(--cf-radio);
}

@media (hover: hover) {
	.ctudir-carrusel-fix .elementor-image-carousel .swiper-slide:hover img {
		transform: scale(1.04);
	}
}

/* --- Flechas ------------------------------------------------------------- */

.ctudir-carrusel-fix .elementor-swiper-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 44 px es el mínimo cómodo para el pulgar; las flechas por defecto de
	   Elementor son demasiado pequeñas en móvil. */
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: #fff;
	color: var(--cf-azul);
	font-size: 18px;
	box-shadow: 0 2px 6px rgba(3, 25, 52, 0.12), 0 8px 24px rgba(3, 25, 52, 0.14);
	transition: background-color 200ms ease, color 200ms ease, transform 200ms ease;
}

.ctudir-carrusel-fix .elementor-swiper-button:hover {
	background: var(--cf-rojo);
	color: #fff;
	transform: translateY(-50%) scale(1.06);
}

.ctudir-carrusel-fix .elementor-swiper-button:focus-visible {
	outline: 3px solid var(--cf-azul-vivo);
	outline-offset: 3px;
}

.ctudir-carrusel-fix .elementor-swiper-button svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.ctudir-carrusel-fix .elementor-swiper-button-prev {
	left: 6px;
}

.ctudir-carrusel-fix .elementor-swiper-button-next {
	right: 6px;
}

/* Cuando Swiper deshabilita una flecha (al principio o al final) se atenúa
   en lugar de desaparecer, para que no salte la maquetación. */
.ctudir-carrusel-fix .swiper-button-disabled {
	opacity: 0.35;
	pointer-events: none;
}

/* --- Puntos --------------------------------------------------------------- */

.ctudir-carrusel-fix .swiper-pagination {
	position: static;
	margin-top: 16px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 7px;
}

.ctudir-carrusel-fix .swiper-pagination-bullet {
	width: 8px;
	height: 8px;
	margin: 0 !important;
	border-radius: 999px;
	background: rgba(3, 25, 52, 0.22);
	opacity: 1;
	transition: width 220ms ease, background-color 220ms ease;
}

.ctudir-carrusel-fix .swiper-pagination-bullet-active {
	width: 22px;
	background: var(--cf-rojo);
}

/* --- Ajustes por pantalla -------------------------------------------------- */

@media (max-width: 767px) {
	.ctudir-carrusel-fix .elementor-image-carousel .swiper-slide img {
		/* Más alto en móvil: con dos por fila las fotos son estrechas y una
		   franja baja no deja distinguir lo que sale en ellas. */
		height: clamp(150px, 42vw, 220px);
	}

	.ctudir-carrusel-fix .elementor-swiper-button {
		width: 40px;
		height: 40px;
		font-size: 16px;
	}
}

/* Quien prefiera menos movimiento no debería sufrir el zoom al pasar el ratón. */
@media (prefers-reduced-motion: reduce) {
	.ctudir-carrusel-fix .elementor-image-carousel .swiper-slide img,
	.ctudir-carrusel-fix .elementor-swiper-button {
		transition: none;
	}
}

/* --- Aire alrededor del carrusel ------------------------------------------
   El widget quedaba pegado al pie de página y las flechas rozaban el borde
   de la pantalla. */

.ctudir-carrusel-fix .elementor-widget-image-carousel {
	padding-bottom: clamp(48px, 5vw, 88px);
}

.ctudir-carrusel-fix .elementor-image-carousel-wrapper {
	/* Espacio a los lados para que las flechas no se salgan de la pantalla
	   ni tapen la primera y la última foto. */
	padding-inline: 52px;
}

@media (max-width: 767px) {
	.ctudir-carrusel-fix .elementor-image-carousel-wrapper {
		padding-inline: 44px;
	}
}