/* -----------------------------------------
   Soulmix - Hero (Desktop)
   ----------------------------------------- */

.hero {
	padding-top: clamp(120px, calc(120 / 1920 * 100vw), 168px);
}

.hero__inner {
	text-align: center;
}

.hero__pretitle {
	font-size: clamp(15px, calc(15 / 1920 * 100vw), 21px);
	margin-bottom: clamp(16px, calc(16 / 1920 * 100vw), 22px);
}

.hero__title {
	font-family: var(--font-condensed);
	font-weight: 900;
	font-size: clamp(96px, calc(96 / 1920 * 100vw), 134px);
	line-height: 0.94;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	max-width: clamp(1200px, calc(1200 / 1920 * 100vw), 1680px);
	margin-left: auto;
	margin-right: auto;
}

.hero__actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(12px, calc(12 / 1920 * 100vw), 17px);
	margin-top: clamp(16px, calc(16 / 1920 * 100vw), 22px);
}

/* Slider continuo */
.hero-slider {
	margin-top: clamp(96px, calc(96 / 1920 * 100vw), 134px);
	overflow: hidden;
}

.hero-slider__track {
	display: flex;
	width: max-content;
	gap: clamp(32px, calc(32 / 1920 * 100vw), 45px);
	padding: 0 clamp(24px, calc(24 / 1920 * 100vw), 34px);
	animation: hero-slider-scroll 40s linear infinite;
}

.hero-slider__slide {
	flex: 0 0 auto;
	width: clamp(420px, calc(420 / 1920 * 100vw), 588px);
	aspect-ratio: 3 / 4;
	border-radius: clamp(20px, calc(20 / 1920 * 100vw), 28px);
	overflow: hidden;
}

.hero-slider__slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transform: scale(1.05);
}

@keyframes hero-slider-scroll {
	from {
		transform: translateX(0);
	}
	to {
		/* -50% porque el track contiene el set de slides duplicado */
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero-slider__track {
		animation: none;
	}
}