/* ==========================================================================
   Sección: La Carta
   ========================================================================== */
.carta-section {
	background-color: var(--rosa);
	padding: 120px 16px;
	padding-right: 0;
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: visible;
	/* Para que los stickers salgan si es necesario */
}

/* Columna Izquierda (Texto) */
.carta-col-left {
	display: flex;
	justify-content: flex-end;
	gap: 20px;
	padding-right: 0;
	z-index: 2;
}

.carta-title {
	font-family: 'Dolphins', sans-serif;
	font-size: clamp(66px, 12vw, 120px);
	/* Ajusta dinámicamente */
	color: var(--negro);
	line-height: 0.9;
	margin: 0;
}

.carta-desc {
	font-family: Arial, Helvetica, sans-serif;
	/* Fallback tipografía cuerpo */
	font-size: 18px;
	color: var(--negro);
	line-height: 1.5;
	max-width: 400px;
}

.carta-btn-wrapper {
	margin-top: 10px;
}

.carta-btn-wrapper .papachos-btn {
	background-color: transparent !important;
	/* Mantiene el outline del boton global */
}

/* Columna Derecha (Carrusel) */
.carta-col-right {
	position: relative;
	width: 100%;
}

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

/* Sticker 1: Top Left / Center */
.carta-carousel .sticker-item-1 {
	top: -40px;
	left: -30px;
	width: 180px;
	transform: rotate(-10deg);
}

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

/* Sticker 3: Top Left / Center (alternate angle/shift) */
.carta-carousel .sticker-item-3 {
	top: -35px;
	left: -20px;
	width: 170px;
	transform: rotate(-5deg);
}

/* Sticker 4: Top Center (alternate angle/shift) */
.carta-carousel .sticker-item-4 {
	top: -75px;
	left: calc(50% - 85px);
	width: 180px;
	transform: rotate(-8deg);
}

.carta-slide-media {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

/* Splide Carousel */
.carta-carousel {
	padding-bottom: 20px;
	/* Espacio para no cortar la sombra si la hay */
}

.carta-carousel .splide__track {
	padding-top: 100px;
	padding-bottom: 60px;
	margin-top: -100px;
	margin-bottom: -60px;
	-webkit-mask-image: linear-gradient(to right, transparent 0px, var(--rosa) 50px);
	mask-image: linear-gradient(to right, transparent 0px, var(--rosa) 50px);
}

.carta-slide-content {
	position: relative;
	width: 100%;
	aspect-ratio: 0.62;
	/* Proporción vertical tipo carta */
}

.splide__slide {
	min-height: 600px;
}

/* Staggered vertical alignment (Up-Down-Up) */
.splide__slide:nth-child(even) .carta-slide-content {
	transform: translateY(40px);
}

.carta-slide-media img,
.carta-slide-media video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Títulos sobre las imágenes */
.carta-slide-title {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 20px 10px;
	margin: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
	color: var(--blanco);
	font-family: 'GooperCondensed', sans-serif;
	font-size: 32px;
	text-align: center;
	text-transform: uppercase;
	line-height: 1.1;
	z-index: 2;
}

/* Ocultar flechas y paginación de Splide (solo drag según el diseño) */
.carta-carousel .splide__arrows,
.carta-carousel .splide__pagination {
	display: none;
}

/* Mobile & Tablet Layout (< 1024px) */
@media (max-width: 1023px) {
	.carta-section {
		padding: 80px 0 40px 16px;
	}

	.carta-col-left {
		justify-content: flex-start;
		margin-bottom: 60px;
		padding-right: 16px;
	}

	.carta-col-left .carta-content-wrapper {
		display: flex;
		flex-direction: column;
		gap: 20px;
		width: 100%;
	}

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

@media (max-width: 767px) {
	.splide__slide {
		min-height: 480px;
	}

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

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

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

/* Desktop Layout (Desktop-first approach o Mobile-first adaptado) */
@media (min-width: 1024px) {
	.carta-section {
		flex-direction: row;
		align-items: center;
	}

	.carta-col-left {
		width: 38%;
		padding-right: 40px;
	}

	.carta-col-left .carta-content-wrapper {
		width: 100%;
		max-width: 360px;
		display: flex;
		flex-direction: column;
		gap: 40px;
	}

	.carta-col-right {
		width: 62%;
	}


}