/* -----------------------------------------
   Soulmix - Product Hero (Desktop)
   ----------------------------------------- */

.product-hero {
	padding-top: clamp(120px, calc(120 / 1920 * 100vw), 168px);
}

.product-hero__inner {
	text-align: center;
}

.product-hero__title {
	font-family: var(--font-condensed);
	font-weight: 900;
	font-size: clamp(96px, calc(96 / 1920 * 100vw), 134px);
	line-height: 0.94;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	max-width: clamp(1200px, calc(1200 / 1920 * 100vw), 1680px);
	margin-left: auto;
	margin-right: auto;
}

.product-hero__subtitle {
	font-family: var(--font-base);
	font-weight: 500;
	font-size: clamp(15px, calc(15 / 1920 * 100vw), 21px);
	line-height: normal;
	text-transform: uppercase;
	margin-top: clamp(32px, calc(32 / 1920 * 100vw), 45px);
}

.product-hero__image {
	margin-top: clamp(100px, calc(100 / 1920 * 100vw), 140px);
	height: 100vh;
	border-radius: clamp(20px, calc(20 / 1920 * 100vw), 28px);
	overflow: hidden;
}

/*
 * Parallax suave: la foto es más alta que su marco y se desplaza dentro de
 * él al scrollear, igual que el fondo de la sección de contacto —donde el
 * `background-size: cover` sobre una sección de 100vh produce ese mismo
 * anclaje de la imagen mientras el contenido pasa por delante.
 *
 * Aquí no vale `background-attachment: fixed`, porque el marco tiene
 * `border-radius` + `overflow: hidden` y la imagen es un <img> real (mejor
 * para SEO y para el `alt`). En su lugar se sobredimensiona la imagen un
 * 30% y el JS (main.js) mueve ese excedente con `--parallax-shift` según la
 * posición de la sección en pantalla, así que nunca deja hueco visible.
 */
.product-hero__image img {
	width: 100%;
	height: 130%;
	object-fit: cover;
	object-position: center 90%;
	/*
	 * El desplazamiento se aplica sobre el excedente (ese 30% extra), con
	 * el 0 en el centro del recorrido: así la foto está bien encuadrada
	 * cuando la sección está centrada en pantalla, y le queda margen para
	 * moverse tanto al entrar como al salir.
	 */
	/*
	 * El excedente es el 30% de la altura del marco, así que el recorrido
	 * útil va de 0 (imagen pegada arriba) a -30% (pegada abajo). Se centra
	 * el reposo en -15% y se reparte ±15%, de modo que en los extremos del
	 * scroll la imagen siga cubriendo el marco por completo: pasarse de ahí
	 * dejaba ver el fondo por abajo.
	 */
	transform: translate3d(0, calc(-15% + var(--parallax-shift, 0) * 15%), 0);
	will-change: transform;
}

/*
 * Sin parallax si se pide menos movimiento: la imagen vuelve a llenar
 * exactamente su marco, sin excedente ni desplazamiento.
 */
@media (prefers-reduced-motion: reduce) {
	.product-hero__image img {
		height: 100%;
		transform: none;
	}
}

/* -----------------------------------------
   Product Flavors
   ----------------------------------------- */

.product-flavors {
	padding: clamp(160px, calc(160 / 1920 * 100vw), 224px) 0;
}

.product-flavors__inner {
	text-align: center;
}

.product-flavors__title {
	font-family: var(--font-condensed);
	font-weight: 900;
	font-size: clamp(96px, calc(96 / 1920 * 100vw), 134px);
	line-height: 0.94;
	letter-spacing: -0.01em;
	text-transform: uppercase;
}

.product-flavors__subtitle {
	font-family: var(--font-base);
	font-weight: 400;
	font-size: clamp(15px, calc(15 / 1920 * 100vw), 21px);
	letter-spacing: -0.02em;
	line-height: normal;
	max-width: clamp(440px, calc(440 / 1920 * 100vw), 616px);
	margin: clamp(32px, calc(32 / 1920 * 100vw), 45px) auto 0;
}

.product-flavors__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(12px, calc(12 / 1920 * 100vw), 17px);
	max-width: clamp(820px, calc(820 / 1920 * 100vw), 1148px);
	margin: clamp(72px, calc(72 / 1920 * 100vw), 101px) auto 0;
}

.flavor-btn {
	display: inline-block;
	font-family: var(--font-condensed);
	font-weight: 500;
	font-size: clamp(15px, calc(15 / 1920 * 100vw), 21px);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--color-btn-primary-text);
	padding: clamp(10px, calc(10 / 1920 * 100vw), 14px) clamp(20px, calc(20 / 1920 * 100vw), 28px);
	border-radius: 999px;
	transition: opacity 0.2s ease;
}

.flavor-btn:hover {
	opacity: 0.85;
}

/* -----------------------------------------
   Flavor Cards
   ----------------------------------------- */

.flavor-cards {
	padding-bottom: clamp(160px, calc(160 / 1920 * 100vw), 224px);
}

.flavor-cards .container {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.flavor-card {
	max-width: clamp(1380px, calc(1380 / 1920 * 100vw), 1580px);
	width: 100%;
	aspect-ratio: 16 / 8;
	color: inherit;
	text-decoration: none;
}

.flavor-card {
	/* Centrado vertical del sticky en el espacio visible bajo la cabecera:
	   top = altura_header + mitad del hueco restante (viewport - header - card).
	   La altura de la card se estima como max-width/2 (aspect-ratio 16/8),
	   que coincide con su ancho real siempre que el .container sea más ancho
	   que ese max-width (caso habitual en desktop). */
	--flavor-card-height: calc(clamp(1380px, calc(1380 / 1920 * 100vw), 1580px) / 2);
	position: sticky;
	top: calc(var(--header-height) + (100vh - var(--header-height) - var(--flavor-card-height)) / 2 - 40px);
	display: flex;
	background-color: #363633;
	border-radius: clamp(20px, calc(20 / 1920 * 100vw), 28px);
	overflow: hidden;
	scroll-margin-top: clamp(140px, calc(140 / 1920 * 100vw), 196px);
	margin-bottom: clamp(80px, calc(80 / 1920 * 100vw), 112px);
}

.flavor-card__image {
	flex: 1 1 47%;
	min-width: 0;
	height: 100%;
	overflow: hidden;
	border-radius: clamp(20px, calc(20 / 1920 * 100vw), 28px);
}

.flavor-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

.flavor-card:hover .flavor-card__image img {
	transform: scale(1.05);
}

.flavor-card__content {
	flex: 1 1 50%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: clamp(56px, calc(56 / 1920 * 100vw), 78px);
}

.flavor-card__title {
	font-family: var(--font-condensed);
	font-weight: 900;
	font-size: clamp(96px, calc(96 / 1920 * 100vw), 110px);
	line-height: 0.94;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	overflow-wrap: break-word;
	color: var(--color-text);
}

.flavor-card__description {
	font-family: var(--font-condensed);
	font-weight: 400;
	font-size: clamp(24px, calc(24 / 1920 * 100vw), 34px);
	line-height: normal;
	color: var(--color-text);
	margin-top: clamp(16px, calc(16 / 1920 * 100vw), 22px);
	max-width: clamp(420px, calc(420 / 1920 * 100vw), 588px);
}

.flavor-card__footer {
	display: flex;
	align-items: center;
	gap: clamp(16px, calc(16 / 1920 * 100vw), 22px);
	margin-top: clamp(24px, calc(24 / 1920 * 100vw), 34px);
}

.flavor-card__badge {
	position: absolute;
	right: clamp(56px, calc(56 / 1920 * 100vw), 78px);
	bottom: clamp(56px, calc(56 / 1920 * 100vw), 78px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(120px, calc(120 / 1920 * 100vw), 168px);
	height: clamp(120px, calc(120 / 1920 * 100vw), 168px);
	border-radius: 999px;
	border: 1px solid;
	font-family: var(--font-condensed);
	font-weight: 900;
	font-size: clamp(24px, calc(24 / 1920 * 100vw), 34px);
	line-height: 0.9;
	text-align: center;
	text-transform: uppercase;
}

.page-template-page-bases-naturales .site-footer {
	padding-top: clamp(280px, calc(280 / 1920 * 100vw), 392px);
}