/* ============================================================
   Widget: Destinos Slider — se-dest-slider
   ============================================================ */

.se-dest-slider {
	position: relative;
}

.se-dest-slider__viewport {
	overflow: hidden;
	height: 480px;
}

/* Movement is continuous: JS writes transform (and each slide's wave
   height) on every animation frame, so neither one carries a CSS
   transition — one would fight the per-frame updates and lag behind. */
.se-dest-slider__track {
	display: flex;
	align-items: center;
	height: 100%;
	list-style: none;
	margin: 0;
	padding: 0;
	will-change: transform;
}

.se-dest-slider__slide {
	flex: 0 0 var(--se-dest-slide-width, 33.333%);
	min-width: 0;
	box-sizing: border-box;
	height: 95%;
}

/* ============================================================
   Card
   ============================================================ */
.se-dest-slider__card {
	height: 100%;
}

.se-dest-slider__figure {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: 12px;
	text-decoration: none;
}

.se-dest-slider__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.se-dest-slider__figure:hover .se-dest-slider__img {
	transform: scale(1.04);
}

/* Per-item colour overlay — background set by the Elementor repeater
   control via .elementor-repeater-item-{id}; transparent by default. */
.se-dest-slider__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.se-dest-slider__content {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	text-align: center;
}

.se-dest-slider__title {
	margin: 0;
	color: #ffffff;
	font-family: var(--font-primary, 'Avenir Next Cyr', sans-serif);
	font-size: 48px;
	font-weight: 400;
	line-height: 1.1;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

/* ============================================================
   Responsive
   ----------------------------------------------------------
   El número de slides visibles (ancho de cada slide) lo controla
   el JS vía --se-dest-slide-width según los data-cols-* del widget.
   En mobile se anula el patrón de alturas: todas al 100%.
   ============================================================ */
@media (max-width: 767px) {
	/* !important: JS sets each slide's wave height inline every frame;
	   only an !important stylesheet rule outranks that on mobile. */
	.se-dest-slider__slide {
		height: 100% !important;
	}
}

/* ============================================================
   Reducción de movimiento
   ----------------------------------------------------------
   El JS ya detecta prefers-reduced-motion y detiene el scroll
   continuo; aquí solo se anula la animación del hover de la imagen.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	.se-dest-slider__figure:hover .se-dest-slider__img {
		transform: none;
	}
}