/*
 * Serón Pods Carousel — estilos base (estructurales).
 * Los valores configurables desde Elementor (altura, colores, tamaños,
 * espaciados...) se aplican vía los "selectors" de cada control y se
 * generan en el CSS propio de la página. Prefijo seron-pods-carousel
 * en todos los selectores; sin dependencias externas.
 */

.seron-pods-carousel {
	position: relative;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.seron-pods-carousel__viewport {
	position: relative;
	width: 100%;
	/* Altura automática: el contenedor se ajusta a la altura real de la
	   imagen en vez de usar un alto fijo, para no dejar espacio sobrante
	   debajo. El !important es necesario porque el control "Altura del
	   carrusel" de Elementor genera su propio CSS con alta especificidad
	   por instancia (desktop/tablet/mobile); esta regla lo neutraliza en
	   los tres breakpoints sin tener que tocar el control ni el widget. */
	height: auto !important;
	overflow: hidden;
	touch-action: pan-y;
}

.seron-pods-carousel__track {
	display: flex;
	height: auto;
	will-change: transform;
	transition: transform 400ms ease;
}

@media ( prefers-reduced-motion: reduce ) {
	.seron-pods-carousel__track {
		transition-duration: 1ms;
	}
}

.seron-pods-carousel__slide {
	flex: 0 0 100%;
	max-width: 100%;
	height: auto;
	position: relative;
}

.seron-pods-carousel__image {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

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

.seron-pods-carousel__arrow {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid rgba( 255, 255, 255, 0.8 );
	margin: 0;
	cursor: pointer;
	color: #ffffff;
	background-color: rgba( 0, 0, 0, 0.3 );
	padding: 0;
	line-height: 0;
	box-sizing: border-box;
}

.seron-pods-carousel__arrow svg {
	width: 55%;
	height: 55%;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	pointer-events: none;
}

.seron-pods-carousel__arrow:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

.seron-pods-carousel__arrow--prev {
	left: 12px;
}

.seron-pods-carousel__arrow--next {
	right: 12px;
}

/* ---------- Indicadores ---------- */

.seron-pods-carousel__indicators {
	position: absolute;
	top: 18px;
	right: 18px;
	left: auto;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	list-style: none;
	margin: 0;
	padding: 0;
	pointer-events: none;
}

.seron-pods-carousel__indicators li {
	pointer-events: auto;
	line-height: 0;
}

.seron-pods-carousel__indicator {
	display: block;
	border: 0;
	padding: 0;
	cursor: pointer;
	background-color: rgba( 255, 255, 255, 0.6 );
	transition: background-color 200ms ease, opacity 200ms ease, width 200ms ease;
}

.seron-pods-carousel__indicator:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

.seron-pods-carousel__indicator.is-active {
	background-color: #ffffff;
}

/* Cuando solo hay una imagen, no se imprimen flechas ni indicadores en el HTML
   (ver widget PHP), así que no hace falta ocultarlos aquí por CSS. */