/* -------------------------------------------------------------------------
 * Carrusel de casos
 *
 * Widget Carousel anidado de Elementor con la clase CSS "carrucel-casos".
 * No es un shortcode: los assets se encolan detectando esa clase.
 *
 * Aqui solo se reestiliza la paginacion. El punto inactivo es un circulo y
 * el activo se estira hasta convertirse en una pildora, ambos del mismo azul.
 * ---------------------------------------------------------------------- */

.elementor-widget.carrucel-casos {
	--gd-casos-punto: #2d3d5d;
	--gd-casos-punto-alto: 9px;
	--gd-casos-punto-ancho: 9px;
	--gd-casos-punto-activo-ancho: 66px;
	--gd-casos-punto-espacio: 5px;
}

/*
 * La paginacion queda fuera del swiper (pagination-position-outside), asi
 * que se puede tratar como una fila normal en vez de pelear con el layout
 * inline que trae swiper por defecto.
 */
.elementor-widget.carrucel-casos .swiper-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--gd-casos-punto-espacio);

	/* Neutraliza las variables de swiper por si alguna regla las lee. */
	--swiper-pagination-color: var(--gd-casos-punto);
	--swiper-pagination-bullet-inactive-color: var(--gd-casos-punto);
	--swiper-pagination-bullet-inactive-opacity: 1;
	--swiper-pagination-bullet-horizontal-gap: 0;
}

.elementor-widget.carrucel-casos .swiper-pagination .swiper-pagination-bullet {
	width: var(--gd-casos-punto-ancho);
	height: var(--gd-casos-punto-alto);
	margin: 0;
	flex: 0 0 auto;
	background: var(--gd-casos-punto);
	opacity: 1;
	border-radius: 999px;
	transition: width 0.35s ease;
}

.elementor-widget.carrucel-casos .swiper-pagination .swiper-pagination-bullet-active {
	width: var(--gd-casos-punto-activo-ancho);
	background: var(--gd-casos-punto);
	opacity: 1;
}

/* El ancho es lo unico que anima: sin transicion no hay salto brusco. */
@media (prefers-reduced-motion: reduce) {

	.elementor-widget.carrucel-casos .swiper-pagination .swiper-pagination-bullet {
		transition: none;
	}
}