/**
 * Sky Carrusel — estilos del módulo.
 * Flechas, puntos y pista: assets/css/carousel.css (compartido con el Hero).
 *
 * Ancho de cada diapositiva: (100% − espacios) / cantidad visible.
 * La cantidad cambia por dispositivo con --szc-per (CSS por instancia).
 */

.szc {
	position: relative;
	width: 100%;
}

.szc__viewport {
	position: relative;
}

.szc__track {
	gap: var( --szc-gap, 20px );
}

.szc__slide {
	flex: 0 0 calc( ( 100% - ( var( --szc-per, 3 ) - 1 ) * var( --szc-gap, 20px ) ) / var( --szc-per, 3 ) );
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	padding: var( --szc-pad, 0 );
	border-radius: var( --szc-radius, 0 );
	background: var( --szc-bg, transparent );
}

.szc__link,
.szc__slide picture {
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
	border: 0;
}

.szc__slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: var( --szc-fit, cover );
	transition: transform 0.4s ease;
}

/* Alto por proporción */
.szc--ratio .szc__slide {
	aspect-ratio: var( --szc-ratio, 4 / 3 );
}

/* Alto fijo (con su propio valor en móvil) */
.szc--fixed .szc__slide {
	height: var( --szc-h, 360px );
}

/* Alto de cada imagen tal cual (todas se alinean arriba) */
.szc--natural .szc__track {
	align-items: flex-start;
}

.szc--natural .szc__slide img {
	height: auto;
}

/* Zoom suave al pasar el mouse por diapositivas con enlace */
.szc--zoom .szc__link:hover img,
.szc--zoom .szc__link:focus-visible img {
	transform: scale( 1.04 );
}

.szc__link:focus-visible {
	outline: 3px solid var( --sz-arrow-bg-hover, #ff5a00 );
	outline-offset: -3px;
}

/* Flechas centradas sobre las imágenes, un poco hacia adentro */
.szc .sz-car__arrow--prev {
	left: 12px;
}

.szc .sz-car__arrow--next {
	right: 12px;
}

/* Puntos debajo del carrusel */
.szc__dots {
	margin-top: 18px;
}

.szc__dots:empty {
	display: none;
}

.szc--empty {
	padding: 24px;
	border: 2px dashed #c9ccd6;
	color: #5c6470;
	text-align: center;
}

@media ( prefers-reduced-motion: reduce ) {
	.szc__slide img {
		transition: none;
	}
}