/* ==========================================================================
   About Section Styles (Home)
   ========================================================================== */

.about-section {
	background-color: var(--amarillo);
	padding: 80px 0;
	padding-top: 150px;
	overflow: hidden;
	position: relative;
}

.about-container {
	max-width: 1200px;
	margin: 0 auto;
	text-align: center;
	padding: 0 20px;
	position: relative;
	z-index: 2;
}

.about-header-icon {
	display: block;
	margin: 0 auto 30px;
	max-width: 100px;
	height: auto;
}

.about-top-text {
	font-family: 'HeadingNow', sans-serif;
	font-size: 1.1rem;
	font-weight: 500;
	color: var(--negro);
	margin-bottom: 20px;
}

.about-title {
	font-family: 'GooperCondensed', serif;
	font-size: 4rem;
	font-weight: bold;
	color: var(--negro);
	line-height: 1.3;
	margin-bottom: 60px;
}

.about-carousel {
	width: 100%;
	overflow: hidden;
	position: relative;
	z-index: 1;
	margin-bottom: 20px;
	padding: 40px 0;
	/* Espacio para que los stickers no se corten */
}

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

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

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

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

.about-carousel-item__media {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

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

/* Floating Stickers on about carousel items */
.about-sticker {
	position: absolute;
	z-index: 10;
	pointer-events: none;
}

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

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

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

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

.about-bottom-container {
	max-width: 1024px;
	margin: 0 auto;
	text-align: center;
	padding: 0 20px;
}

.about-desc {
	font-family: 'HeadingNow', sans-serif;
	font-size: 1.2rem;
	color: var(--negro);
	line-height: 1.6;
	margin-bottom: 40px;
}

.about-button-wrapper {
	display: flex;
	justify-content: center;
	padding-bottom: 5px;
}

/* --- Responsive Adjustments --- */
@media (max-width: 1024px) {
	.about-title {
		font-size: 3rem;
	}

	.about-carousel-item {
		width: calc((100vw - 40px) / 2);
		height: calc(((100vw - 40px) / 2) * 1.112);
	}

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

@media (max-width: 767px) {
	.about-section {
		padding: 60px 0;
	}

	.about-title {
		font-size: 2.2rem;
	}

	.about-carousel-item {
		width: 80vw;
		height: calc(80vw * 1.112);
	}

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

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

	.about-desc {
		font-size: 1rem;
	}

	.about-header-icon {
		max-width: 80px;
		margin-bottom: 20px;
	}

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

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

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