.mcci-promo-carrusel,
.promociones {
	background: var(--c-bg-1);
	color: var(--c-text);
	padding: clamp(5rem, 10vw, 9rem) 0;
}
.promo-header-row {
	max-width: var(--max-w);
	margin: 0 auto;
	padding: 0 clamp(1.5rem, 4vw, 3rem);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 4vw, 4rem);
	align-items: start;
	margin-bottom: clamp(3rem, 5vw, 4.5rem);
}
.promo-header-left .section-tag { color: var(--c-accent); }
.promo-header-left .section-title { color: var(--c-text); margin-bottom: 0; }
.promo-header-right { display: flex; flex-direction: column; gap: 1rem; }
.promo-promo-desc {
	font-family: var(--f-body);
	font-size: 0.88rem;
	font-weight: 300;
	line-height: 1.75;
	color: var(--c-text-mid);
	max-width: 460px;
}

.promo-hint {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--f-mono);
	font-size: 0.58rem;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--c-text-light);
	padding: 0 clamp(1.5rem, 4vw, 3rem) 1.25rem;
	max-width: var(--max-w);
	margin: 0 auto;
}
.promo-hint svg { width: 20px; height: 12px; stroke: var(--c-accent); fill: none; stroke-width: 1.5; }

.promo-scroll {
	overflow: hidden;
	cursor: grab;
	position: relative;
}
.promo-scroll:active { cursor: grabbing; }

.mcci-promo-carrusel--marquee .promo-track {
	display: flex;
	gap: 1.25rem;
	width: max-content;
	animation: mcci-marquee var(--mcci-marquee-cycle, 60s) linear infinite;
	padding: 0 0.625rem;
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
}
/* will-change permanente en marquee creaba GPU layer eternamente activa.
 * En desktop el coste lo absorbe; en mobile (sumado a otras layers) era el
 * tiro de gracia. marquee.js ya pausa la animación off-screen vía IO. */
@media (hover: hover) and (pointer: fine) {
	.mcci-promo-carrusel--marquee .promo-track { will-change: transform; }
}
.mcci-promo-carrusel:not(.mcci-promo-carrusel--marquee) .promo-track {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(380px, 78vw), 1fr));
	gap: 1.25rem;
	max-width: var(--max-w);
	margin: 0 auto;
	padding: 0 clamp(1.5rem, 4vw, 3rem);
}
.promo-scroll:hover .promo-track,
.promo-scroll.dragging .promo-track {
	animation-play-state: paused;
}
@keyframes mcci-marquee {
	0%   { transform: translate3d(0, 0, 0); }
	100% { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
	.mcci-promo-carrusel--marquee .promo-track { animation: none; }
}

.promo-progress {
	max-width: var(--max-w);
	margin: 1.5rem auto 0;
	padding: 0 clamp(1.5rem, 4vw, 3rem);
}
.promo-progress-track {
	width: 100%;
	height: 1px;
	background: rgba(18,21,25,0.1);
	position: relative;
	overflow: hidden;
}
.promo-progress-bar { height: 100%; width: 0%; background: var(--c-accent); }

.promo-card {
	flex: 0 0 min(380px, 78vw);
	position: relative;
	overflow: hidden;
	background: #FFFFFF;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--c-border);
	transition: border-color 0.4s ease;
}
.promo-card:hover { border-color: rgba(18,21,25,0.18); }
.promo-card-img-wrap { aspect-ratio: 3/4; overflow: hidden; position: relative; background: #1a1d22; }
.promo-card-img-wrap img {
	transition: transform 0.8s var(--ease);
}
/* will-change + translateZ promueven a compositing layer. Sólo en desktop
 * con hover real — en mobile multiplicaba layers por cada card y agotaba el
 * budget GPU de iOS Safari (causa principal del crash al scrollear). */
@media (hover: hover) and (pointer: fine) {
	.promo-card { transform: translateZ(0); }
	.promo-card-img-wrap img { will-change: transform; }
}
.promo-card:hover .promo-card-img-wrap img { transform: scale(1.06); }

.promo-card-badge {
	position: absolute;
	top: clamp(0.75rem, 1.5vw, 1.25rem);
	left: clamp(0.75rem, 1.5vw, 1.25rem);
	z-index: 3;
	font-family: var(--f-mono);
	font-size: 0.52rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 0.3rem 0.6rem;
	color: var(--c-inverse);
	background: rgba(18,21,25,0.75);
	border: 1px solid rgba(245,243,238,0.2);
}
/* backdrop-filter por badge × N cards × clones del marquee = decenas de
 * snapshot regions en GPU. Es uno de los efectos más caros en iOS Safari.
 * Lo limitamos a desktop. */
@media (hover: hover) and (pointer: fine) {
	.promo-card-badge {
		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px);
		background: rgba(18,21,25,0.55);
	}
}
.promo-card-badge.available { background: var(--c-accent); border-color: var(--c-accent); color: #FFFFFF; }
.promo-card-badge.reserved  { background: rgba(200,168,111,0.9); border-color: rgba(200,168,111,0.9); color: #FFFFFF; }
.promo-card-badge.sold      { background: rgba(18,21,25,0.65); border-color: rgba(245,243,238,0.15); color: rgba(245,243,238,0.7); text-decoration: line-through; }

.promo-card-content {
	padding: clamp(1.25rem, 2vw, 1.5rem);
	display: flex;
	flex-direction: column;
	flex: 1;
}
.promo-card-tipo {
	font-family: var(--f-display);
	font-weight: 800;
	font-stretch: 85%;
	font-size: clamp(1.1rem, 1.4vw, 1.3rem);
	color: var(--c-text);
	letter-spacing: -0.015em;
	margin-bottom: 0.15rem;
}
.promo-card-subtipo {
	font-family: var(--f-mono);
	font-size: 0.58rem;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--c-text-light);
}

@media (max-width: 1024px) { .promo-header-row { grid-template-columns: 1fr; } }

/* ───────────────────────────────────────────────────────────────────
 * Mobile carousel — reemplaza el marquee infinito por scroll-snap nativo.
 *
 * Why: el marquee con animación WAAPI continua + 18 cards × clones × layers
 * GPU saturaba iOS Safari hasta crashear. Además, el touch global del
 * drag-scrub hijackeaba el scroll natural del usuario.
 *
 * Diseño: cards de 78vw con el siguiente peeking ~22vw a la derecha.
 * Padding lateral asimétrico crea el "offset" elegante (primer card
 * indentado del borde, último scrollea al centro con peek). Snap mandatory
 * para que cada card se centre al soltar.
 * ─────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
	.mcci-promo-carrusel--marquee .promo-scroll,
	.mcci-promo-carrusel--marquee .promo-scroll:active {
		overflow-x: auto;
		overflow-y: hidden;
		cursor: default;
		scroll-snap-type: x mandatory;
		scroll-padding-left: 1.25rem;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.mcci-promo-carrusel--marquee .promo-scroll::-webkit-scrollbar { display: none; }

	.mcci-promo-carrusel--marquee .promo-track {
		animation: none !important;
		width: max-content;
		gap: 0.75rem;
		padding: 0 1.25rem;
		transform: none;
		backface-visibility: visible;
	}
	.mcci-promo-carrusel--marquee .promo-card {
		flex: 0 0 78vw;
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}
	/* Padding right en el último card hace que quede centrado al final
	 * (sin esto, el último card se pega al borde y rompe la simetría). */
	.mcci-promo-carrusel--marquee .promo-track > :last-child {
		margin-right: 1.25rem;
	}

	/* Hide progress bar — sin animación continua no representa nada. */
	.mcci-promo-carrusel--marquee .promo-progress { display: none; }

	/* Hint: cambiar texto + suavizar visualmente */
	.mcci-promo-carrusel--marquee .promo-hint {
		opacity: 0.6;
		font-size: 0.55rem;
		padding-bottom: 1rem;
	}
}
@media (max-width: 768px)  { .promo-card { flex: 0 0 85vw; } }