/**
 * Naikka | Manzana SKU — componente.
 *
 * UN carrusel de presentaciones. Iconos-bullet arriba, contextos como
 * círculos clickeables abajo (abren popup), texto con min-height para que
 * el botón COMPRAR no salte entre presentaciones de distinta descripción.
 */

.nms-manzana {
	/* Paleta manzana */
	--nms-rosa: #E7367C;
	--nms-rosa-osc: #C21D63;
	--nms-bullet-on: #C21D63;
	--nms-bullet-off: #F3B9D2;

	/* Degradado radial del fondo de botella */
	--nms-grad-centro: #FF84B9;
	--nms-grad-borde: #760D2C;

	/* Iconos-bullet */
	--nms-icono-w: 34px;
	--nms-icono-h: 46px;

	/* Slider */
	--nms-slider-max: 340px;
	--nms-ratio-slide: 693 / 765;
	--nms-radio: 24px;
	/* Ancho de cada slide dentro del carrusel (menor a 100% para que
	   las vecinas asomen a los lados). */
	--nms-slide-w: 86%;

	/* Alto reservado del bloque de texto → evita que COMPRAR salte */
	--nms-info-min: 190px;

	max-width: 620px;
	margin: 0 auto;
	padding: 0 16px;
	font-family: 'GalanoGrotesqueMedium', sans-serif;
}

.nms-manzana *,
.nms-manzana *::before,
.nms-manzana *::after {
	box-sizing: border-box;
}

/* =========================================================
   Iconos-bullet de presentación
   ========================================================= */

.nms-bullets {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 8px;
	width: 100%;
	overflow-x: auto;
	padding-bottom: 6px;
	scrollbar-width: none;
	margin-bottom: 22px;
}

.nms-bullets::-webkit-scrollbar { display: none; }

.nms-bullet {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	padding: 4px;
	background: none;
	border: none;
	cursor: pointer;
	flex: 0 0 auto;
}

.nms-bullet:focus-visible {
	outline: 3px solid var(--nms-bullet-on);
	outline-offset: 2px;
	border-radius: 6px;
}

/* Icono con máscara: el .webp es el molde, el color lo pone el CSS.
   REQUISITO: .webp transparentes (ya lo son). */
.nms-bullet__icono {
	display: block;
	width: calc(var(--nms-icono-w) * var(--escala, 1));
	height: calc(var(--nms-icono-h) * var(--escala, 1));
	background-color: var(--nms-bullet-off);
	-webkit-mask-image: var(--icono);
	mask-image: var(--icono);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center bottom;
	mask-position: center bottom;
	transition: background-color 0.25s ease;
}

.nms-bullet__label {
	font-family: 'SodaFont', sans-serif;
	font-size: 11px;
	color: var(--nms-bullet-off);
	white-space: nowrap;
	transition: color 0.25s ease;
}

.nms-bullet:hover .nms-bullet__icono { background-color: var(--nms-rosa); }
.nms-bullet:hover .nms-bullet__label { color: var(--nms-rosa); }

.nms-bullet.is-active .nms-bullet__icono { background-color: var(--nms-bullet-on); }
.nms-bullet.is-active .nms-bullet__label { color: var(--nms-bullet-on); }

/* =========================================================
   Carrusel de presentaciones
   ========================================================= */

.nms-slider {
	position: relative;
	width: 100%;
	max-width: var(--nms-slider-max);
	margin: 0 auto;
}

/* overflow visible: las slides vecinas se ven fuera de la caja central. */
.nms-swiper {
	overflow: visible;
	width: 100%;
}

.nms-slide {
	width: var(--nms-slide-w);
	transform-origin: center center;
	/* transición de escala/opacity; la duración la fija Swiper por JS. */
	transition-property: transform, opacity;
	position: relative;
	z-index: 1;
}

/* La activa por encima de las vecinas escaladas. */
.swiper-slide-active {
	z-index: 2;
}

/* El fondo es transparente por defecto: las slides inactivas se ven
   como PNG suelto sobre el blanco de la página. */
.nms-slide__bg {
	width: 100%;
	aspect-ratio: var(--nms-ratio-slide);
	border-radius: var(--nms-radio);
	overflow: hidden;
	background: transparent;
	transition: background 0.3s ease;
}

/* El degradado aparece SOLO en la slide activa. */
.swiper-slide-active .nms-slide__bg {
	background: radial-gradient(
		ellipse 75% 65% at 50% 42%,
		var(--nms-grad-centro) 0%,
		var(--nms-grad-borde) 100%
	);
}

.nms-slide__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 8px;
}

/* ---- Flechas ---- */

.nms-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 54px;
	height: 54px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--nms-rosa);
	color: #fff;
	cursor: pointer;
	z-index: 6;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.2s ease, filter 0.2s ease;
}

.nms-arrow:hover { filter: brightness(1.1); }

/* Mobile: el slide es ancho (86%), así que las flechas se meten hacia
   adentro para no desbordar. Desktop las saca (ver media query). */
.nms-arrow--prev { left: 0; transform: translate(-50%, -50%); }
.nms-arrow--next { right: 0; transform: translate(50%, -50%); }
.nms-arrow--prev:active { transform: translate(-50%, -50%) scale(0.92); }
.nms-arrow--next:active { transform: translate(50%, -50%) scale(0.92); }

.nms-arrow.swiper-button-disabled {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

.nms-arrow svg { width: 20px; height: 20px; }

.nms-arrow:focus-visible {
	outline: 3px solid var(--nms-bullet-on);
	outline-offset: 3px;
}

/* =========================================================
   Contextos (círculos clickeables → popup)
   ========================================================= */

.nms-contextos {
	position: relative;
	display: flex;
	justify-content: center;
	margin-top: 18px;
	min-height: 72px;
}

.nms-contextos__grupo[hidden] { display: none; }

.nms-contextos__grupo {
	display: flex;
	gap: 16px;
}

.nms-contexto {
	display: block;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	overflow: hidden;
	border: 3px solid var(--nms-rosa);
	cursor: pointer;
	transition: transform 0.2s ease;
}

.nms-contexto:hover { transform: scale(1.08); }

.nms-contexto:focus-visible {
	outline: 3px solid var(--nms-bullet-on);
	outline-offset: 3px;
}

.nms-contexto__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* =========================================================
   Info (nombre + descripción + COMPRAR)
   ========================================================= */

.nms-info {
	position: relative;
	text-align: center;
	margin-top: 16px;
	min-height: var(--nms-info-min);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
}

.nms-info__grupo[hidden] { display: none; }

.nms-info__grupo {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

.nms-info__titulo {
	font-family: 'GalanoGrotesqueHeavy', sans-serif;
	font-size: 22px;
	color: var(--nms-rosa-osc);
	margin: 0 0 8px;
	line-height: 1.1;
}

.nms-info__desc {
	font-family: 'GalanoGrotesqueMedium', sans-serif;
	font-size: 14px;
	line-height: 1.45;
	color: var(--nms-rosa-osc);
	margin: 0 0 18px;
	max-width: 360px;
}

/* ---- COMPRAR ---- */

.nms-comprar {
	display: inline-block;
	font-family: 'SodaFont', sans-serif;
	font-size: 26px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #fff;
	text-decoration: none;
	background: var(--nms-rosa);
	padding: 14px 60px;
	border-radius: 999px;
	box-shadow: 0 0 0 5px color-mix(in srgb, var(--nms-rosa) 30%, #fff);
	transition: transform 0.2s ease, box-shadow 0.3s ease;
	margin-top: auto;
}

.nms-comprar:hover {
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 0 0 9px color-mix(in srgb, var(--nms-rosa) 20%, #fff);
}

.nms-comprar:focus-visible {
	outline: 3px solid var(--nms-bullet-on);
	outline-offset: 4px;
}

/* =========================================================
   Desktop
   ========================================================= */

@media (min-width: 981px) {
	.nms-manzana {
		--nms-icono-w: 46px;
		--nms-icono-h: 62px;
		--nms-slider-max: 400px;
		--nms-info-min: 210px;
		--nms-slide-w: 85%;
	}

	.nms-arrow--prev { transform: translate(-130%, -50%); }
	.nms-arrow--next { transform: translate(130%, -50%); }
	.nms-arrow--prev:active { transform: translate(-130%, -50%) scale(0.92); }
	.nms-arrow--next:active { transform: translate(130%, -50%) scale(0.92); }

	.nms-bullets {
		gap: 14px;
		overflow: visible;
		margin-bottom: 30px;
	}

	.nms-contexto { width: 72px; height: 72px; }

	.nms-info__titulo { font-size: 28px; }
	.nms-info__desc { font-size: 15px; }

	.nms-comprar {
		font-size: 32px;
		padding: 16px 72px;
	}
}

/* =========================================================
   Lightbox (GLightbox) — más compacto
   ========================================================= */

.glightbox-clean .gslide-media,
.gcontainer .gslide-image img {
	max-width: 420px;
	width: auto;
	max-height: 70vh;
}

/* =========================================================
   Motion reducido
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
	.nms-slide,
	.nms-slide__bg,
	.nms-arrow,
	.nms-comprar,
	.nms-contexto,
	.nms-bullet__icono,
	.nms-bullet__label {
		transition: none;
	}
}