/* -----------------------------------------
   Soulmix - Página de producto individual
   ----------------------------------------- */

.producto {
	padding-top: clamp(32px, calc(32 / 1920 * 100vw), 45px);
}

.page-template-page-espumante-php .producto {
	padding-top: 0;
	margin-top: -24px;
}

.producto__inner {
	display: flex;
	align-items: flex-start;
	gap: clamp(48px, calc(48 / 1920 * 100vw), 67px);
}

.producto__inner--centered {
	justify-content: center;
	margin-top: clamp(24px, calc(40 / 1920 * 100vw), 56px);
}

.producto__image--tall {
	aspect-ratio: 9 / 10;
}

.producto__content {
	flex: 1 1 auto;
	min-width: 0;
	margin-top: clamp(60px, calc(100 / 1920 * 100vw), 140px);
}

.producto__pretitle {
	font-family: var(--font-base);
	font-weight: 500;
	font-size: clamp(15px, calc(15 / 1920 * 100vw), 21px);
}

.producto__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;
	margin-top: clamp(24px, calc(24 / 1920 * 100vw), 34px);
}

.producto__description {
	font-family: var(--font-base);
	font-weight: 400;
	font-size: clamp(18px, calc(24 / 1920 * 100vw), 24px);
	letter-spacing: -0.02em;
	line-height: normal;
	max-width: clamp(440px, calc(440 / 1920 * 100vw), 616px);
	margin-top: clamp(24px, calc(24 / 1920 * 100vw), 34px);
}



.producto__badges {
	display: flex;
	flex-direction: column;
	gap: clamp(12px, calc(12 / 1920 * 100vw), 17px);
	margin-top: clamp(32px, calc(32 / 1920 * 100vw), 45px);
}

.producto__badge-row {
	display: flex;
	flex-wrap: nowrap;
	gap: clamp(12px, calc(12 / 1920 * 100vw), 17px);
}

.producto__badge {
	display: inline-flex;
	align-items: center;
	gap: clamp(8px, calc(8 / 1920 * 100vw), 11px);
	font-family: var(--font-condensed);
	font-weight: 500;
	font-size: clamp(15px, calc(15 / 1920 * 100vw), 21px);
	text-transform: uppercase;
	color: var(--color-btn-secondary-text);
	background-color: var(--color-btn-secondary);
	padding: clamp(10px, calc(10 / 1920 * 100vw), 14px) clamp(16px, calc(16 / 1920 * 100vw), 22px);
	border-radius: 999px;
}

.producto__badge-icon {
	width: clamp(18px, calc(22 / 1920 * 100vw), 22px);
	height: clamp(18px, calc(22 / 1920 * 100vw), 22px);
	flex-shrink: 0;
}

.producto__actions {
	display: flex;
	align-items: center;
	gap: clamp(16px, calc(16 / 1920 * 100vw), 22px);
	margin-top: clamp(12px, calc(12 / 1920 * 100vw), 17px);
}

.producto__cta {
	display: inline-flex;
	align-items: center;
	gap: 0;
	color: var(--color-btn-primary-text);
	padding-right: 10px;
}

.producto__cta-icon {
	position: relative;
	display: block;
	width: 36px;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	margin-block: -14px;
}

.producto__cta-icon-img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}

.producto__cta-icon-img--out {
	transform: translate(0, 0);
}

.producto__cta-icon-img--in {
	transform: translate(-130%, 130%);
}

.producto__cta:hover .producto__cta-icon-img--out {
	transform: translate(130%, -130%);
}

.producto__cta:hover .producto__cta-icon-img--in {
	transform: translate(0, 0);
}

.producto__ficha {
	font-family: var(--font-condensed);
	font-weight: 500;
	font-size: clamp(15px, calc(15 / 1920 * 100vw), 21px);
	text-transform: uppercase;
	text-decoration: underline;
	transition: opacity 0.2s ease;
}

.producto__ficha:hover {
	opacity: 0.7;
}

.producto__image {
	flex: 0 0 auto;
	width: 95vh;
	max-width: 100%;
	aspect-ratio: 1 / 1;
	height: 95vh;
	border-radius: clamp(20px, calc(20 / 1920 * 100vw), 28px);
	overflow: hidden;
}

.producto__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* -----------------------------------------
   Producto - Intro (pretítulo / título / subtítulo)
   ----------------------------------------- */

.fruta-intro {
	padding: clamp(64px, calc(96 / 1920 * 100vw), 120px) 0;
	text-align: center;
}

.fruta-intro__inner {
	max-width: clamp(480px, calc(1200 / 1920 * 100vw), 1200px);
	margin-inline: auto;
}

.fruta-intro__pretitle {
	font-family: var(--font-base);
	font-weight: 500;
	font-size: 15px;
}

.fruta-intro__title {
	font-family: var(--font-condensed);
	font-weight: 900;
	font-size: 96px;
	line-height: 0.94;
	text-transform: uppercase;
	margin-top: clamp(24px, calc(24 / 1920 * 100vw), 34px);
}

.fruta-intro__subtitle {
	font-family: var(--font-base);
	font-weight: 400;
	font-size: 15px;
	letter-spacing: -0.025em;
	max-width: clamp(300px, calc(440 / 1920 * 100vw), 440px);
	margin-inline: auto;
	margin-top: clamp(24px, calc(24 / 1920 * 100vw), 34px);
}

/* -----------------------------------------
   Fruta Deshidratada - Grid de variedades
   ----------------------------------------- */

.fruta-grid {
	padding-top: clamp(160px, calc(220 / 1920 * 100vw), 280px);
	padding-bottom: clamp(40px, calc(60 / 1920 * 100vw), 80px);
}

.fruta-grid__inner {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: clamp(24px, calc(24 / 1920 * 100vw), 34px);
	row-gap: clamp(230px, calc(305 / 1920 * 100vw), 380px);
}

.fruta-card {
	display: flex;
	flex-direction: column;
	background-color: #363633;
	border-radius: clamp(20px, calc(20 / 1920 * 100vw), 28px);
}

.fruta-card__media {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: clamp(20px, calc(20 / 1920 * 100vw), 28px);
	overflow: visible;
}

.fruta-card__img {
	position: absolute;
	z-index: 1;
	left: 50%;
	top: -42%;
	width: 68%;
	transform: translateX(-50%);
	object-fit: contain;
	transition: transform 0.4s ease;
}

.fruta-card:hover .fruta-card__img {
	transform: translateX(-50%) scale(1.05);
}

.fruta-card__body {
	border-radius: 0 0 clamp(20px, calc(20 / 1920 * 100vw), 28px) clamp(20px, calc(20 / 1920 * 100vw), 28px);
	padding: clamp(32px, calc(40 / 1920 * 100vw), 56px) clamp(32px, calc(44 / 1920 * 100vw), 62px) clamp(24px, calc(32 / 1920 * 100vw), 45px);
}

.fruta-card__title {
	font-family: var(--font-condensed);
	font-weight: 900;
	font-size: clamp(48px, calc(74 / 1920 * 100vw), 104px);
	line-height: 0.95;
	text-transform: uppercase;
	max-width: 80%;
}

.fruta-card__desc {
	font-family: var(--font-condensed);
	font-weight: 400;
	font-size: clamp(18px, calc(24 / 1920 * 100vw), 24px);
	line-height: normal;
	max-width: 60%;
	margin-top: clamp(12px, calc(16 / 1920 * 100vw), 22px);
}

.fruta-card__badges {
	display: flex;
	flex-direction: column;
	gap: clamp(10px, calc(12 / 1920 * 100vw), 16px);
	margin-top: clamp(20px, calc(24 / 1920 * 100vw), 32px);
}

.fruta-card__badge {
	display: inline-flex;
	align-items: center;
	gap: clamp(8px, calc(8 / 1920 * 100vw), 11px);
	width: fit-content;
	font-family: var(--font-condensed);
	font-weight: 500;
	font-size: clamp(15px, calc(15 / 1920 * 100vw), 21px);
	text-transform: uppercase;
	color: var(--color-btn-secondary-text);
	background-color: #1F1E1D;
	padding: clamp(10px, calc(10 / 1920 * 100vw), 14px) clamp(16px, calc(16 / 1920 * 100vw), 22px);
	border-radius: 999px;
}

.fruta-card__badge-icon {
	width: clamp(18px, calc(22 / 1920 * 100vw), 22px);
	height: clamp(18px, calc(22 / 1920 * 100vw), 22px);
	flex-shrink: 0;
}

.fruta-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 0;
	color: var(--color-btn-primary-text);
	padding-right: 10px;
	margin-top: clamp(20px, calc(24 / 1920 * 100vw), 32px);
}

.fruta-card__cta-icon {
	position: relative;
	display: block;
	width: 36px;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	margin-block: -14px;
}

.fruta-card__cta-icon-img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}

.fruta-card__cta-icon-img--out {
	transform: translate(0, 0);
}

.fruta-card__cta-icon-img--in {
	transform: translate(-130%, 130%);
}

.fruta-card__cta:hover .fruta-card__cta-icon-img--out {
	transform: translate(130%, -130%);
}

.fruta-card__cta:hover .fruta-card__cta-icon-img--in {
	transform: translate(0, 0);
}

/* -----------------------------------------
   Producto - Feature (card con botella)
   ----------------------------------------- */

.producto-feature {
	padding: 380px 0 160px;
}

.producto-feature__inner {
	display: flex;
	justify-content: center;
}

.producto-feature__card {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: 890px;
	max-width: 100%;
	min-height: 360px;
	background-color: #363633;
	border-radius: 20px;
	/*
	 * El padding izquierdo reserva sitio para la botella, que va en
	 * `position: absolute` y por tanto NO ocupa espacio en el flex: sin esa
	 * reserva el texto se colocaba ignorándola y quedaba por encima de la
	 * imagen (hasta 392px de solape). La botella arranca en `left: -90px` y
	 * mide 560px, así que sobresale 470px por dentro de la card; se añade un
	 * margen de separación para que el texto no quede pegado al envase.
	 */
	padding: 56px 120px 56px 400px;
	overflow: visible;
}

.producto-feature__bottle {
	position: absolute;
	left: -90px;
	bottom: 0;
	width: 560px;
}

.producto-feature__bottle img {
	width: 100%;
	height: auto;
	display: block;
}

.producto-feature__content {
	flex: 0 1 auto;
	min-width: 0;
}

.producto-feature__title {
	font-family: var(--font-condensed);
	font-weight: 900;
	font-size: 32px;
	line-height: 1.1;
	text-transform: uppercase;
}

.producto-feature__description {
	font-family: var(--font-condensed);
	font-weight: 400;
	font-size: 15px;
	line-height: normal;
	max-width: 370px;
	margin-top: 24px;
}

/* -----------------------------------------
   Producto - Recetas
   ----------------------------------------- */

.producto-recetas {
	padding: 68px 0 48px;
}

.producto-recetas__inner {
	text-align: center;
}

.producto-recetas__title {
	font-family: var(--font-condensed);
	font-weight: 900;
	font-size: 64px;
	line-height: 1.05;
	text-transform: uppercase;
}

.producto-recetas__subtitle {
	font-family: var(--font-condensed);
	font-weight: 400;
	font-size: 16px;
	line-height: normal;
	white-space: nowrap;
	margin: 16px auto 0;
}

.producto-recetas__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	margin-top: 88px;
}

.receta-card {
	display: block;
}

.receta-card__media {
	border-radius: 20px;
	overflow: hidden;
	aspect-ratio: 512 / 679;
}

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

.receta-card:hover .receta-card__media img {
	transform: scale(1.05);
}

.receta-card__title-row {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
	margin-top: 20px;
}

.receta-card__title {
	font-family: var(--font-condensed);
	font-weight: 900;
	font-size: 40px;
	line-height: 1;
	text-transform: uppercase;
	transition: opacity 0.2s ease;
}

.receta-card:hover .receta-card__title {
	opacity: 0.7;
}

.receta-card__icon {
	position: relative;
	display: block;
	flex-shrink: 0;
	width: 56px;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	transition: opacity 0.2s ease;
}

.receta-card:hover .receta-card__icon {
	opacity: 0.7;
}

.receta-card__icon-img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}

.receta-card__icon-img--out {
	transform: translate(0, 0);
}

.receta-card__icon-img--in {
	transform: translate(-130%, 130%);
}

.receta-card:hover .receta-card__icon-img--out {
	transform: translate(130%, -130%);
}

.receta-card:hover .receta-card__icon-img--in {
	transform: translate(0, 0);
}

/* -----------------------------------------
   Espumante - Foto fija + cards informativas
   ----------------------------------------- */

.page-template-page-espumante-php .producto__image {
	position: sticky;
	top: calc(var(--header-height) - 24px);
	width: calc(100vh - var(--header-height));
	height: calc(100vh - var(--header-height));
}

.espumante-cards {
	display: flex;
	flex-direction: column;
	gap: clamp(20px, calc(24 / 1920 * 100vw), 34px);
	max-width: clamp(440px, calc(590 / 1920 * 100vw), 590px);
	margin-top: clamp(90px, calc(130 / 1920 * 100vw), 170px);
}

.espumante-card {
	background-color: #363633;
	border-radius: clamp(20px, calc(20 / 1920 * 100vw), 28px);
	padding: clamp(28px, calc(32 / 1920 * 100vw), 45px) clamp(36px, calc(44 / 1920 * 100vw), 56px);
}

.espumante-card__title {
	font-family: var(--font-condensed);
	font-weight: 900;
	font-size: clamp(32px, calc(32 / 1920 * 100vw), 45px);
	line-height: 1.05;
	text-transform: uppercase;
}

.espumante-card__text {
	font-family: var(--font-condensed);
	font-weight: 400;
	font-size: clamp(15px, calc(15 / 1920 * 100vw), 21px);
	line-height: normal;
	margin-top: clamp(12px, calc(16 / 1920 * 100vw), 22px);
}

.espumante-card__list {
	display: flex;
	flex-direction: column;
	gap: clamp(36px, calc(44 / 1920 * 100vw), 56px);
	margin-top: clamp(30px, calc(38 / 1920 * 100vw), 48px);
}

.espumante-card__item {
	display: flex;
	align-items: center;
	gap: clamp(16px, calc(18 / 1920 * 100vw), 24px);
}

.espumante-card__item-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: clamp(52px, calc(60 / 1920 * 100vw), 68px);
	height: clamp(52px, calc(60 / 1920 * 100vw), 68px);
	border-radius: 50%;
	background-color: var(--color-btn-primary);
}

.espumante-card__item > div {
	max-width: 75%;
}

.espumante-card__item-icon img {
	width: 40%;
	height: 40%;
}

.espumante-card__item-title {
	font-family: var(--font-condensed);
	font-weight: 900;
	font-size: clamp(15px, calc(15 / 1920 * 100vw), 21px);
	text-transform: uppercase;
}

.espumante-card__item-text {
	font-family: var(--font-condensed);
	font-weight: 400;
	font-size: clamp(15px, calc(15 / 1920 * 100vw), 21px);
	line-height: normal;
	margin-top: clamp(4px, calc(4 / 1920 * 100vw), 6px);
}