/* ==========================================================================
   Melodiossa — Hero Slider
   Diseño moderno, interactivo y responsive. Identidad: crema / café / rosa.
   HTML:  ver sección .melo-slider en index.html
   JS:    js/melo-slider.js
   ========================================================================== */

.melo-slider {
	/* Paleta de marca (tokens locales del slider) */
	--melo-cream: #efe8df;
	--melo-ink: #4b4342;
	--melo-pink: #ff91a4;
	--melo-pink-dark: #f4718a;
	--melo-white: #fff;
	--melo-radius: 28px;
	--melo-ease: cubic-bezier(0.22, 1, 0.36, 1);

	position: relative;
	height: clamp(460px, 86vh, 760px);
	overflow: hidden;
	background: var(--melo-cream);
	z-index: 1;
	isolation: isolate;
	touch-action: pan-y;
}

/* --------------------------------------------------------- Pista / slides */
.melo-track {
	position: absolute;
	inset: 0;
}

.melo-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.9s var(--melo-ease), visibility 0s linear 0.9s;
}

.melo-slide.is-active {
	opacity: 1;
	visibility: visible;
	z-index: 2;
	transition: opacity 0.9s var(--melo-ease);
}

/* Media + efecto Ken Burns */
.melo-slide__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.melo-slide__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transform: scale(1.06);
	will-change: transform;
}

.melo-slide.is-active .melo-slide__media img {
	animation: meloKenBurns 8s ease-out both;
}

/* Velo degradado para legibilidad del texto */
.melo-slide__overlay {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 90% at 50% 38%, rgba(75, 67, 66, 0) 40%, rgba(75, 67, 66, 0.28) 100%),
		linear-gradient(180deg, rgba(75, 67, 66, 0.12) 0%, rgba(75, 67, 66, 0) 35%);
	pointer-events: none;
}

/* ---------------------------------------------------------------- Caption */
.melo-caption {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 3;
	/* Círculo perfecto: ancho = alto (aspect-ratio 1/1) */
	width: min(30rem, 94%, 80vh);
	aspect-ratio: 1 / 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	text-align: center;
	/* Forma orgánica ondulada (blob) de la plantilla original, en proporción cuadrada */
	padding: 0 118px;
	background: url(../images/main-slider/slider_bg_1.png) center center / 100% 100% no-repeat;
	filter: drop-shadow(0 18px 34px rgba(75, 67, 66, 0.22));
}

.melo-caption__eyebrow {
	display: inline-block;
	margin-bottom: 14px;
	padding: 6px 16px;
	border-radius: 999px;
	background: var(--melo-pink);
	color: #fff;
	font-family: 'ABeeZee', sans-serif;
	font-size: 12px;
	letter-spacing: 2px;
	text-transform: uppercase;
	box-shadow: 0 6px 16px rgba(255, 145, 164, 0.4);
}

.melo-caption__title {
	margin: 0 0 12px;
	color: var(--melo-ink);
	font-family: 'Leckerli One', cursive;
	font-weight: 400;
	font-size: clamp(38px, 6vw, 68px);
	line-height: 0.98;
}

.melo-caption__text {
	margin: 0 auto;
	max-width: 100%;
	color: var(--melo-ink);
	font-family: 'ABeeZee', sans-serif;
	font-size: clamp(14px, 1.6vw, 17px);
	line-height: 1.55;
}

/* ------------------------------------------------------------------- CTAs */
.melo-caption__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
}

.melo-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px 30px;
	border-radius: 999px;
	font-family: 'ABeeZee', sans-serif;
	font-size: 15px;
	letter-spacing: 0.5px;
	text-decoration: none;
	cursor: pointer;
	overflow: hidden;
	transition: transform 0.3s var(--melo-ease), box-shadow 0.3s var(--melo-ease), background-color 0.3s ease, color 0.3s ease;
}

.melo-btn--primary {
	background: var(--melo-pink);
	color: #fff;
	box-shadow: 0 10px 24px rgba(255, 145, 164, 0.45);
}

.melo-btn--primary:hover,
.melo-btn--primary:focus-visible {
	background: var(--melo-pink-dark);
	transform: translateY(-3px);
	box-shadow: 0 14px 30px rgba(244, 113, 138, 0.55);
}

/* Brillo que cruza el botón en hover */
.melo-btn--primary::after {
	content: "";
	position: absolute;
	top: 0;
	left: -120%;
	width: 60%;
	height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
	transform: skewX(-18deg);
}

.melo-btn--primary:hover::after {
	animation: meloShine 0.9s var(--melo-ease);
}

.melo-btn--ghost {
	background: rgba(255, 255, 255, 0.9);
	color: var(--melo-ink);
	box-shadow: 0 8px 20px rgba(75, 67, 66, 0.12);
}

.melo-btn--ghost:hover,
.melo-btn--ghost:focus-visible {
	transform: translateY(-3px);
	color: var(--melo-pink-dark);
	box-shadow: 0 12px 26px rgba(75, 67, 66, 0.2);
}

/* --------------------------------------------------- Animación de entrada */
.melo-slide.is-active .melo-caption > * {
	animation: meloRise 0.7s var(--melo-ease) both;
}

.melo-slide.is-active .melo-caption__eyebrow { animation-delay: 0.15s; }
.melo-slide.is-active .melo-caption__title   { animation-delay: 0.28s; }
.melo-slide.is-active .melo-caption__text    { animation-delay: 0.40s; }
.melo-slide.is-active .melo-caption__actions { animation-delay: 0.52s; }

/* ------------------------------------------------------------- Flechas nav */
.melo-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 4;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border: 0;
	background: url(../images/main-slider/slider_bg_1.png) center center / 100% 100% no-repeat;
	background: rgba(255, 255, 255, 0.92);
	color: var(--melo-ink);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(75, 67, 66, 0.18);
	transition: transform 0.3s var(--melo-ease), background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.melo-arrow:hover,
.melo-arrow:focus-visible {
	background: var(--melo-pink);
	color: #fff;
	box-shadow: 0 10px 24px rgba(255, 145, 164, 0.5);
}

.melo-arrow--prev { left: 22px; }
.melo-arrow--next { right: 22px; }
.melo-arrow--prev:hover { transform: translateY(-50%) translateX(-3px); }
.melo-arrow--next:hover { transform: translateY(-50%) translateX(3px); }

/* ------------------------------------------------------------ Paginación */
.melo-dots {
	position: absolute;
	left: 50%;
	bottom: 34px;
	transform: translateX(-50%);
	z-index: 4;
	display: flex;
	gap: 10px;
}

.melo-dots button {
	width: 12px;
	height: 12px;
	padding: 0;
	border: 2px solid rgba(255, 255, 255, 0.9);
	background: url(../images/main-slider/slider_bg_1.png) center center / 100% 100% no-repeat;
	background: transparent;
	cursor: pointer;
	transition: background-color 0.3s ease, transform 0.3s var(--melo-ease), width 0.3s var(--melo-ease), border-radius 0.3s var(--melo-ease);
}

.melo-dots button:hover {
	background: rgba(255, 255, 255, 0.6);
}

.melo-dots button.is-active {
	width: 30px;
	border-radius: 999px;
	background: var(--melo-pink);
	border-color: var(--melo-pink);
}

/* ------------------------------------------------------- Barra de progreso */
.melo-progress {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 4;
	width: 100%;
	height: 4px;
	background: rgba(255, 255, 255, 0.35);
}

.melo-progress__bar {
	display: block;
	height: 100%;
	width: 0;
	background: var(--melo-pink);
	transform-origin: left center;
}

.melo-progress__bar.is-running {
	animation: meloProgress linear forwards;
	animation-duration: var(--melo-delay, 6000ms);
}

/* Lectores de pantalla */
.melo-sr-status {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------- Keyframes */
@keyframes meloKenBurns {
	from { transform: scale(1.12); }
	to   { transform: scale(1); }
}

@keyframes meloRise {
	from { opacity: 0; transform: translateY(26px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes meloShine {
	from { left: -120%; }
	to   { left: 130%; }
}

@keyframes meloProgress {
	from { width: 0; }
	to   { width: 100%; }
}

/* ----------------------------------------------------------- Responsive */
@media (max-width: 991px) {
	.melo-caption { padding: 0 118px; }
	.melo-arrow { width: 46px; height: 46px; font-size: 24px; }
	.melo-arrow--prev { left: 14px; }
	.melo-arrow--next { right: 14px; }
}

@media (max-width: 575px) {
	.melo-slider { height: clamp(440px, 78vh, 560px); }
	/* En móvil se navega con gesto táctil + puntos; ocultamos las flechas
	   para que no se superpongan al texto de la tarjeta. */
	.melo-arrow { display: none; }
	.melo-caption {
		top: 50%;
		width: min(380px, 98%, 74vh);
		padding: 0 62px;
	}
	.melo-caption__text { max-width: 100%; }
	.melo-dots { bottom: 24px; }
}

/* ----------------------------------------- Accesibilidad: menos movimiento */
@media (prefers-reduced-motion: reduce) {
	.melo-slide,
	.melo-slide.is-active { transition: opacity 0.4s ease; }
	.melo-slide.is-active .melo-slide__media img,
	.melo-slide.is-active .melo-caption > * {
		animation: none;
	}
	.melo-slide__media img { transform: none; }
	.melo-progress__bar.is-running { animation: none; }
	.melo-btn,
	.melo-arrow { transition: background-color 0.2s ease, color 0.2s ease; }
}