/**
 * Mango · carruseles y diapositivas.
 *
 * Base de los carruseles (scroll-snap, flechas, puntos) y del bloque Diapositivas.
 */

/* Carrusel ------------------------------------------------------------- */

.mango-carousel {
	--mango-per-view: 1;
	--mango-carousel-gap: 0px;
	--mango-arrow-offset: 12px;
	position: relative;
}

.mango-carousel-track {
	display: flex;
	gap: var(--mango-carousel-gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.mango-carousel-track::-webkit-scrollbar { display: none; }
.mango-carousel-track:focus-visible { outline: 2px solid var(--mango-color-primary, #2563eb); outline-offset: 4px; }

.mango-carousel-slide {
	flex: 0 0 calc((100% - (var(--mango-per-view) - 1) * var(--mango-carousel-gap)) / var(--mango-per-view));
	min-width: 0;
	scroll-snap-align: start;
}

.mango-carousel-arrow {
	position: absolute;
	z-index: 3;
	top: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: #0f172a;
	box-shadow: 0 6px 20px rgba(15, 23, 42, 0.16);
	cursor: pointer;
	transform: translateY(-50%);
	transition: transform .2s ease, opacity .2s ease, background-color .2s ease;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.mango-carousel-arrow svg { width: 45%; height: 45%; }
.mango-carousel-arrow:hover { transform: translateY(-50%) scale(1.08); }
.mango-carousel-arrow:disabled { opacity: 0; pointer-events: none; }
.mango-carousel-arrow.is-prev { left: var(--mango-arrow-offset); }
.mango-carousel-arrow.is-next { right: var(--mango-arrow-offset); }
.mango-carousel.is-static .mango-carousel-arrow,
.mango-carousel.is-static .mango-carousel-dots { display: none; }

.mango-carousel-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 20px;
}

.mango-carousel.has-dots-inside .mango-carousel-dots {
	position: absolute;
	z-index: 3;
	left: 0;
	right: 0;
	bottom: 18px;
	margin: 0;
}

.mango-carousel-dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(15, 23, 42, 0.22);
	cursor: pointer;
	transition: width .3s ease, background-color .3s ease;
}

.mango-carousel.has-dots-inside .mango-carousel-dot { background: rgba(255, 255, 255, 0.55); }
.mango-carousel-dot.is-active { width: 26px; background: var(--mango-color-primary, #2563eb); }
.mango-carousel.has-dots-inside .mango-carousel-dot.is-active { background: #fff; }

/* Diapositivas ---------------------------------------------------------- */

.mango-slides .mango-carousel-track { border-radius: inherit; }

.mango-slide {
	position: relative;
	display: block;
	height: 440px;
	overflow: hidden;
	color: #fff;
	text-decoration: none;
	isolation: isolate;
}

.mango-slide-bg,
.mango-slide-overlay { position: absolute; inset: 0; }
.mango-slide-bg { z-index: -2; }
.mango-slide-overlay { z-index: -1; }

.mango-slide .mango-slide-bg img { width: 100%; max-width: none; height: 100%; object-fit: cover; }

.mango-slides.has-kenburns .mango-slide-bg img { transition: transform 7s ease-out; transform: scale(1); }
.mango-slides.has-kenburns .mango-slide.is-active .mango-slide-bg img { transform: scale(1.08); }

.mango-slide-inner {
	display: flex;
	align-items: center;
	justify-content: left;
	height: 100%;
	padding: 40px 64px;
}

.mango-slide-content { max-width: 560px; }

.mango-slide-heading {
	margin-bottom: 12px;
	font-size: clamp(28px, 4vw, 48px);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.02em;
}

.mango-slide-description { margin-bottom: 24px; font-size: 18px; line-height: 1.5; opacity: .92; }

.mango-slide-button {
	display: inline-flex;
	align-items: center;
	padding: 14px 28px;
	border-radius: 999px;
	background: #fff;
	color: #0f172a;
	font-weight: 700;
	text-decoration: none;
	transition: transform .2s ease, box-shadow .2s ease;
}

.mango-slide-button:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18); }

.mango-slide .mango-slide-content > * { transition: opacity .6s ease, transform .6s ease; }
.mango-slides[data-mango-ready] .mango-slide:not(.is-active) .mango-slide-content > * { opacity: 0; transform: translateY(14px); }

@media (max-width: 767px) {
	.mango-slide-inner { padding: 28px 24px; }
	.mango-slide-description { font-size: 15px; }

	/* En pantallas táctiles se desliza con el dedo: las flechas solo estorban. */
	.mango-carousel-arrow { display: none; }
}