/* ==========================================================================
   Hero Banner Styles (Home)
   ========================================================================== */

.hero-banner {
	position: relative;
	width: 100%;
	height: 100vh;
	min-height: 600px;
	overflow: hidden;
	background-color: var(--negro);
	display: flex;
	align-items: center;
	padding-top: 80px;
}

/* --- Floating Stickers --- */
.hero-sticker {
	position: absolute;
	z-index: 10;
	pointer-events: none;
}

/* Sticker 1: Bottom Left */
.hero-carousel .sticker-item-1 {
	bottom: -30px;
	left: calc(50% - 80px);
	width: 160px;
}

/* Sticker 2: Top Center/Left */
.hero-carousel .sticker-item-2 {
	top: -60px;
	left: calc(50% - 90px);
	width: 180px;
	transform: rotate(-10deg);
}

/* Sticker 3: Bottom Center/Right */
.hero-carousel .sticker-item-3 {
	bottom: -40px;
	right: calc(50% - 85px);
	width: 170px;
}

/* Sticker 4: Top Right */
.hero-carousel .sticker-item-4 {
	top: -60px;
	right: calc(50% - 90px);
	width: 180px;
}

/* --- Carousel Structure --- */
.hero-carousel {
	width: 100%;
	overflow: hidden;
	position: relative;
	z-index: 1;
}

.hero-carousel-track {
	--carousel-gap: 20px;
	display: flex;
	width: max-content;
	height: 100vh;
	gap: var(--carousel-gap);
	animation: scrollCarousel 20s linear infinite;
	align-items: center;
}

.hero-carousel-track:hover {
	/* animation-play-state: paused; */
	/* Opcional: pausar al hacer hover */
}

.carousel-item {
	width: 392px;
	height: 567px;
	flex-shrink: 0;
	transition: transform 0.3s ease;
	position: relative;
}

.carousel-item__media {
	width: 100%;
	height: 100%;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
	position: relative;
	z-index: 1;
}

/* Patrón Arriba-Abajo */
.carousel-item:nth-child(odd) {
	transform: translateY(-30px);
}

.carousel-item:nth-child(even) {
	transform: translateY(30px);
}

.carousel-item__media img,
.carousel-item__media video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* --- Animation --- */
@keyframes scrollCarousel {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(calc(-50% - (var(--carousel-gap) / 2)));
	}
}

/* --- Responsive Adjustments --- */
@media (max-width: 1024px) {
	.hero-carousel-track {
		--carousel-gap: 15px;
	}

	.carousel-item {
		width: calc((100vw - 30px) / 2);
		height: calc(((100vw - 30px) / 2) * 1.44);
		/* Mantener proporción */
	}

	.hero-sticker {
		width: 150px !important;
	}
}

@media (max-width: 767px) {
	.hero-banner {
		min-height: 500px;
	}

	.hero-carousel-track {
		--carousel-gap: 10px;
	}

	.carousel-item {
		width: calc((100vw - 10px));
		height: calc(((100vw - 10px)) * 1.44);
	}

	.carousel-item:nth-child(odd) {
		transform: translateY(-15px);
	}

	.carousel-item:nth-child(even) {
		transform: translateY(15px);
	}

	.hero-sticker {
		width: 130px !important;
	}

	.hero-carousel .sticker-item-1 {
		left: -15px;
	}

	.hero-carousel .sticker-item-4 {
		right: -15px;
	}
}