/* -----------------------------------------
   Soulmix - Sección "Nuestras Recetas" (carrusel automático infinito)
   ----------------------------------------- */

.recipes {
	padding: clamp(260px, calc(260 / 1920 * 100vw), 364px) 0 clamp(120px, calc(120 / 1920 * 100vw), 168px);
	overflow: hidden;
}

.recipes__inner {
	text-align: center;
}

.recipes__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;
}

.recipes__subtitle {
	max-width: clamp(560px, calc(560 / 1920 * 100vw), 784px);
	margin: clamp(32px, calc(32 / 1920 * 100vw), 45px) auto 0;
	font-family: var(--font-base);
	font-weight: 400;
	font-size: clamp(15px, calc(15 / 1920 * 100vw), 21px);
	line-height: normal;
}

.recipes__subtitle + .recipes__subtitle {
	margin-top: clamp(16px, calc(16 / 1920 * 100vw), 22px);
}

.recipes__carousel {
	position: relative;
	margin-top: clamp(80px, calc(80 / 1920 * 100vw), 112px);
}

.recipes__carousel::before,
.recipes__carousel::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 30%;
	z-index: 5;
	pointer-events: none;
}

.recipes__carousel::before {
	left: 0;
	background: linear-gradient(to right, var(--color-bg), transparent);
}

.recipes__carousel::after {
	right: 0;
	background: linear-gradient(to left, var(--color-bg), transparent);
}

.recipes__track-wrap {
	overflow: hidden;
}

.recipes__track {
	display: flex;
	align-items: flex-end;
	gap: 20px;
	width: max-content;
	/* Altura fija para que el crecimiento no mueva el CTA de abajo:
	   640px de caja de imagen + 24px de gap + 144px reservados para el título
	   (2 líneas de 64px con algo de holgura: con `line-height: 1` las
	   mayúsculas condensadas desbordan su propia line-box por abajo y el
	   `overflow: hidden` del carrusel las recortaba). */
	height: 808px;
	will-change: transform;
	transition: transform 1s cubic-bezier(0.65, 0, 0.35, 1);
}

/* Reposicionamiento instantáneo (salto invisible del bucle infinito):
   ninguna propiedad animada debe quedar en curso. */
.recipes__track.is-instant,
.recipes__track.is-instant .recipe-card,
.recipes__track.is-instant .recipe-card__media img,
.recipes__track.is-instant .recipe-card__title {
	transition: none !important;
}

/* TODAS las cards ocupan el mismo ancho en el layout, pase lo que pase. El
   tamaño aparente lo da sólo `transform: scale()`, que no toca el layout.
   Antes cada clase de tamaño cambiaba el `width` (260/340/460) y, como el
   `width` no se anima, al empezar cada paso los anchos cambiaban de golpe y
   las cards se reposicionaban horizontalmente de un frame a otro: por eso la
   card de la derecha "saltaba a la izquierda" antes de crecer. */
.recipe-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	flex-shrink: 0;
	/* Debe coincidir con RECIPES_CARD_WIDTH en main.js o el centrado se
	   descuadra. Es la palanca del espacio entre cards: cada card reserva
	   este ancho aunque su imagen esté escalada al 45%. */
	width: 420px;
	transition: transform 1s cubic-bezier(0.65, 0, 0.35, 1);
	will-change: transform;
}

/* Las laterales (`--sm`) se acercan hacia el centro. Va en la card (el
   `scale` va en la imagen, así que no se pisan) y con `translateX`, que no
   toca el layout: usar `gap` o `margin` cambiaría el ancho del track en cada
   paso y devolvería el salto al animar. */
.recipe-card--sm.is-left {
	transform: translateX(60px);
}

.recipe-card--sm.is-right {
	transform: translateX(-60px);
}

/* `min-height` en vez de `height`: reserva el espacio de 2 líneas del título
   grande (2 x 64px) para que el alto total del track no cambie entre cards,
   pero alineado arriba, de modo que el gap con la imagen siga siendo 24px
   fijos aunque el título ocupe 1 sola línea. */
.recipe-card__title-wrap {
	margin-top: 24px;
	min-height: 144px;
}

/* Los PNG están recortados a los límites del contenido (sin transparencia
   sobrante), así que la altura de la caja ES la altura visible del vaso: el
   gap hasta el título es idéntico en todas las cards y tamaños.
   `width: auto` + `max-width: none` para que escale por altura y no lo
   limite el ancho de la card. */
/* La caja reserva SIEMPRE el alto máximo (640px) para que la imagen escalada
   no se salga del `overflow: hidden` del wrap. La imagen en reposo ocupa
   400/640 = 0.625 de ese alto y la card central la lleva a 1. */
.recipe-card__media {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	width: 100%;
	height: 640px;
}

.recipe-card__media img {
	width: auto;
	max-width: none;
	height: 100%;
	display: block;
	/* Crece desde la base para que el pie del vaso quede clavado y el gap
	   hasta el título no cambie durante la animación. */
	transform-origin: center bottom;
	transform: scale(0.45);
	transition: transform 1s cubic-bezier(0.65, 0, 0.35, 1);
	will-change: transform;
}

/* Escalón intermedio: sin esta regla, `--md` heredaba la misma escala que
   `--sm` (0.625), así que las vecinas del centro se veían igual de pequeñas y
   la card central pegaba el salto entero 0.625 -> 1 sin pasar por ningún
   tamaño intermedio. Ése era el "se salta pasos" al agrandarse.
   Escala progresiva y regular: cada paso es ~1.5x el anterior, así el salto
   entre laterales, vecinas y centro se percibe uniforme.
   0.45 (sm) -> 0.66 (md) -> 1 (lg). */
.recipe-card--md .recipe-card__media img {
	transform: scale(0.66);
}

.recipe-card--lg .recipe-card__media img {
	transform: scale(1);
}

.recipe-card__title {
	font-family: var(--font-condensed);
	font-weight: 900;
	font-size: 36px;
	line-height: 1;
	text-transform: uppercase;
	text-align: center;
	transform-origin: center top;
	/* La base es el tamaño de las laterales (`--sm`), proporcional a su
	   escala de imagen: 1.778 x 0.45 = 0.8. */
	transform: scale(0.8);
	transition: transform 1s cubic-bezier(0.65, 0, 0.35, 1);
	will-change: transform;
}

/* Mismo escalón intermedio para el título, proporcional: 1.778 x 0.66. */
.recipe-card--md .recipe-card__title {
	transform: scale(1.17);
}

/* 64 / 36 -> se escala en vez de animar `font-size` (que también relayouta). */
.recipe-card--lg .recipe-card__title {
	transform: scale(1.778);
}

.recipes__cta {
	display: block;
	width: max-content;
	margin: clamp(56px, calc(56 / 1920 * 100vw), 78px) auto 0;
}