/**
 * Sky Zone — estilos compartidos del carrusel (flechas, puntos, pista).
 * Los usan Sky Hero y Sky Carrusel. Colores por variables:
 * --sz-arrow-bg, --sz-arrow-bg-hover, --sz-arrow-color, --sz-arrow-color-hover,
 * --sz-dot, --sz-dot-active.
 */

.sz-car__track {
	position: relative; /* offsetLeft de las diapositivas relativo a la pista */
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.sz-car__track::-webkit-scrollbar {
	display: none;
}

.sz-car__track > * {
	flex-shrink: 0;
	scroll-snap-align: start;
}

/* ── Flechas ── */
.sz-car__arrow {
	position: absolute;
	top: 50%;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var( --sz-arrow-bg, rgba( 255, 255, 255, 0.92 ) );
	color: var( --sz-arrow-color, #1e2033 );
	box-shadow: 0 6px 18px rgba( 0, 0, 0, 0.18 );
	-webkit-backdrop-filter: blur( 6px );
	backdrop-filter: blur( 6px );
	cursor: pointer;
	transform: translateY( -50% );
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.sz-car--arrows-square .sz-car__arrow {
	border-radius: 8px;
}

.sz-car__arrow svg {
	display: block;
	width: 22px;
	height: 22px;
}

.sz-car__arrow:hover,
.sz-car__arrow:focus-visible {
	background: var( --sz-arrow-bg-hover, var( --sz-arrow-bg, #ff5a00 ) );
	color: var( --sz-arrow-color-hover, var( --sz-arrow-color, #fff ) );
	box-shadow: 0 8px 22px rgba( 0, 0, 0, 0.24 );
	transform: translateY( -50% ) scale( 1.06 );
}

.sz-car__arrow:active {
	transform: translateY( -50% ) scale( 0.96 );
}

.sz-car__arrow:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

.sz-car__arrow[disabled] {
	opacity: 0;
	pointer-events: none;
}

.sz-car__arrow--prev {
	left: 20px;
}

.sz-car__arrow--next {
	right: 20px;
}

/* ── Puntos: el activo se alarga ── */
.sz-car__dots {
	display: flex;
	justify-content: center;
	gap: 8px;
}

.sz-car__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var( --sz-dot, rgba( 255, 255, 255, 0.6 ) );
	box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.12 );
	cursor: pointer;
	transition: width 0.25s ease, background-color 0.25s ease;
}

.sz-car__dot.is-active {
	width: 24px;
	background: var( --sz-dot-active, #fff );
}

/* Todo cabe en pantalla: sin flechas ni puntos */
.sz-car--static .sz-car__arrow,
.sz-car--static .sz-car__dots {
	display: none;
}

@media ( max-width: 1024px ) {
	.sz-car__arrow {
		width: 40px;
		height: 40px;
	}

	.sz-car__arrow--prev {
		left: 12px;
	}

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

@media ( max-width: 767px ) {
	.sz-car--arrows-hide-mobile .sz-car__arrow {
		display: none;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.sz-car__track {
		scroll-behavior: auto;
	}
}