/* =========================================================================
 * ACF Products (Pack / "Qué incluye") for Elementor — estilos
 * Todo el diseño se controla por variables CSS escritas desde los controles
 * del widget. La conmutación cuadrícula ↔ carrusel por dispositivo la hace el
 * JS añadiendo .wcap-mode-grid / .wcap-mode-carousel a .wcap-root.
 * ========================================================================= */

.wcap-root {
	--wcap-cols: 3;
	--wcap-cols-int: 3;
	--wcap-gap: 24px;
	--wcap-ratio: 1 / 1;
	--wcap-fit: cover;
	--wcap-img-scale: 1.06;
	--wcap-img-dur: 500ms;
	--wcap-content-gap: 6px;
	--wcap-arrow-offset: 8px;
	--wcap-arrow-size: 46px;
	--wcap-arrow-gap: 14px;
	--wcap-card-lift: 0px;
	position: relative;
}

.wcap-root *,
.wcap-root *::before,
.wcap-root *::after { box-sizing: border-box; }

/* ----------------------------- Cabecera ----------------------------- */
.wcap-header { margin-bottom: 32px; }
.wcap-header-title { margin: 0 0 .35em; line-height: 1.2; }
.wcap-header-sub { margin: 0; opacity: .8; line-height: 1.5; }

/* Cabecera A LA IZQUIERDA, en línea con la fila de productos (estilo editorial
   "¿Qué incluye?"). La cabecera ocupa la 1ª columna y la stage/dots/total se
   apilan en la 2ª. En móvil se colapsa a apilado (cabecera arriba). */
.wcap-head-left .wcap-root {
	display: grid;
	grid-template-columns: var(--wcap-head-w, 220px) minmax(0, 1fr);
	column-gap: clamp(20px, 5vw, 64px);
	align-items: center;
}
.wcap-head-left .wcap-header {
	grid-column: 1;
	grid-row: 1 / span 3; /* abarca stage + (dots) + (total) en la 2ª columna */
	align-self: center;
	margin-bottom: 0;
}
.wcap-head-left .wcap-stage,
.wcap-head-left .wcap-dots,
.wcap-head-left .wcap-total { grid-column: 2; }

.wcap-head-left .wcap-root.wcap-dev-mobile { display: block; }
.wcap-head-left .wcap-root.wcap-dev-mobile .wcap-header { margin-bottom: 24px; }

/* ----------------------------- Stage / viewport / track ----------------------------- */
.wcap-stage { position: relative; }
.wcap-viewport { overflow: hidden; }

.wcap-track {
	display: grid;
	grid-template-columns: repeat(var(--wcap-cols-int, 3), minmax(0, 1fr));
	gap: var(--wcap-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* --- Modo CUADRÍCULA --- */
.wcap-mode-grid .wcap-viewport { overflow: visible; }
.wcap-mode-grid .wcap-track {
	display: grid;
	grid-template-columns: repeat(var(--wcap-cols-int, 3), minmax(0, 1fr));
	transform: none !important;
}

/* --- Modo CARRUSEL --- */
.wcap-mode-carousel .wcap-viewport { overflow: hidden; }
.wcap-mode-carousel .wcap-track {
	display: flex;
	flex-wrap: nowrap;
	grid-template-columns: none;
	will-change: transform;
}
.wcap-mode-carousel .wcap-card {
	flex: 0 0 var(--wcap-slide-w, 280px);
	width: var(--wcap-slide-w, 280px);
}
.wcap-grabbable .wcap-track { cursor: grab; }
.wcap-dragging .wcap-track { cursor: grabbing; }
/* Mientras se arrastra, evita que los enlaces capturen el gesto. */
.wcap-dragging .wcap-media,
.wcap-dragging .wcap-title a { pointer-events: none; }

/* ----------------------------- Tarjeta -----------------------------
   La DISPOSICIÓN (imagen arriba/abajo/izquierda/derecha) es responsive: el
   control escribe `flex-direction` por dispositivo (column / column-reverse /
   row / row-reverse). El tamaño de la imagen se controla por `width`, que es la
   dimensión horizontal en CUALQUIER flex-direction, así funciona en todos los casos. */
.wcap-card {
	position: relative;
	display: flex;
	flex-direction: column; /* fallback; el control lo sobrescribe por dispositivo */
	align-items: var(--wcap-card-valign, stretch);
	gap: var(--wcap-h-gap, 0px);
	min-width: 0;
	background: transparent;
	transition: background-color .3s ease, box-shadow .35s ease, border-color .3s ease, translate .35s cubic-bezier(.22,.61,.36,1);
}
.wcap-card:hover { translate: 0 var(--wcap-card-lift, 0px); }

.wcap-eqh-yes .wcap-card { height: 100%; }

.wcap-card-body {
	display: flex;
	flex-direction: column;
	gap: var(--wcap-content-gap);
	flex: 1 1 auto;
	min-width: 0;
}

/* --- Separadores entre productos (líneas verticales DIMENSIONABLES) ---
   Pseudo-elemento (no border) para poder fijar ancho (grosor) Y alto (largo)
   en px/%/vh, además de redondeo y posición vertical. */
.wcap-divided-yes {
	--wcap-divider: #e7e2da;
	--wcap-divider-w: 1px;
	--wcap-divider-h: 100%;
	--wcap-divider-pad: 12px;
	--wcap-divider-radius: 0px;
}
/* La línea se sitúa en el HUECO entre tarjetas (inset negativo), no añade sangría
   al contenido (la imagen queda a ancho completo) y FUNCIONA igual en cuadrícula
   y en carrusel. En el carrusel, el borde izquierdo lo recorta el viewport, así
   que la primera tarjeta visible no muestra línea (que es lo deseable). */
.wcap-divided-yes .wcap-card:not(:first-child)::before {
	content: "";
	position: absolute;
	inset-inline-start: calc(-1 * var(--wcap-divider-pad, 12px));
	top: 50%;
	transform: translateY(-50%);
	width: var(--wcap-divider-w, 1px);
	height: var(--wcap-divider-h, 100%);
	background: var(--wcap-divider, #e7e2da);
	border-radius: var(--wcap-divider-radius, 0);
	pointer-events: none;
}
/* Posición vertical del separador (útil cuando el alto < 100%). */
.wcap-divv-top .wcap-card:not(:first-child)::before { top: 0; transform: none; }
.wcap-divv-bottom .wcap-card:not(:first-child)::before { top: auto; bottom: 0; transform: none; }

/* ----------------------------- Imagen -----------------------------
   `width` es la dimensión horizontal sea cual sea el flex-direction, así que
   --wcap-media-w sirve tanto si la imagen va arriba/abajo (full por defecto) como
   al lado (ancho parcial). flex-shrink:0 evita que el flex la comprima. */
.wcap-media {
	display: block;
	position: relative;
	width: var(--wcap-media-w, 100%);
	flex-shrink: 0;
	aspect-ratio: var(--wcap-ratio);
	overflow: hidden;
	text-decoration: none;
	line-height: 0;
}
.wcap-root[style*="--wcap-ratio: auto"] .wcap-media,
.wcap-media:has(> .wcap-img[src$=".svg"]) { aspect-ratio: auto; }

.wcap-img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: var(--wcap-fit);
	transition: transform var(--wcap-img-dur) cubic-bezier(.22,.61,.36,1), filter var(--wcap-img-dur) ease;
	backface-visibility: hidden;
}

/* Efectos de imagen al hover (clase prefijada en el wrapper de Elementor) */
.wcap-imgfx-zoom-in  .wcap-card:hover .wcap-img { transform: scale(var(--wcap-img-scale)); }
.wcap-imgfx-zoom-out .wcap-img { transform: scale(var(--wcap-img-scale)); }
.wcap-imgfx-zoom-out .wcap-card:hover .wcap-img { transform: scale(1); }
.wcap-imgfx-gray-color .wcap-img { filter: grayscale(1); }
.wcap-imgfx-gray-color .wcap-card:hover .wcap-img { filter: grayscale(0); }
.wcap-imgfx-lift .wcap-card:hover .wcap-img { transform: translateY(-6px) scale(1.02); }

/* ----------------------------- Textos ----------------------------- */
.wcap-eyebrow {
	font-size: .72em;
	letter-spacing: .14em;
	text-transform: uppercase;
	opacity: .7;
	line-height: 1.2;
}
.wcap-title { margin: 0; line-height: 1.25; }
.wcap-title a { text-decoration: none; color: inherit; transition: color .2s ease; }

.wcap-desc {
	margin: 0;
	line-height: 1.55;
	opacity: .85;
}
/* Limitar a N líneas (si --wcap-clamp > 0) */
.wcap-desc {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.wcap-desc { -webkit-line-clamp: var(--wcap-clamp, initial); }
.wcap-desc:not([style*="line-clamp"]) { -webkit-line-clamp: unset; overflow: visible; display: block; }

/* Contenido / medida (200 ml) */
.wcap-content-wrap { line-height: 0; }
.wcap-content {
	display: inline-flex;
	align-items: center;
	line-height: 1.3;
	font-size: .82em;
}
.wcap-content.is-badge {
	background: #f3efe9;
	border-radius: 999px;
	padding: 4px 12px;
}

/* Precio */
.wcap-price { line-height: 1.3; }
.wcap-price .amount { font-weight: 600; }
.wcap-price del { opacity: .6; margin-right: .4em; font-weight: 400; }
.wcap-price ins { text-decoration: none; }

/* Campos extra */
.wcap-extras { margin: 2px 0 0; }
.wcap-ef {
	display: inline-block;
	margin: 3px 4px;
	font-size: .82em;
	line-height: 1.3;
}
.wcap-ef.is-badge {
	background: #f0f0f3;
	border-radius: 999px;
	padding: 3px 10px;
}
.wcap-ef-label { opacity: .7; }
.wcap-ef-value { font-weight: 600; }

/* ----------------------------- Botón ----------------------------- */
.wcap-btn-wrap { margin-top: 14px; line-height: 0; }
.wcap-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	padding: 10px 22px;
	border: 0;
	border-radius: 8px;
	background: #1a1a1a;
	color: #fff;
	font: inherit;
	font-size: .9em;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .15s ease, opacity .2s ease;
}
.wcap-btn:hover { transform: translateY(-1px); }
.wcap-btn:active { transform: translateY(0); }
.wcap-btn-full-yes .wcap-btn { width: 100%; }
.wcap-btn-icon { display: inline-flex; }
.wcap-btn-icon svg { width: 1em; height: 1em; }
.wcap-btn.loading { opacity: .6; pointer-events: none; }
.wcap-btn.added::after { content: " ✓"; }

/* ----------------------------- Total del pack ----------------------------- */
.wcap-total {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 28px;
	padding: 18px 22px;
	background: #faf8f5;
	border-radius: 12px;
}
.wcap-total-info { display: flex; flex-direction: column; line-height: 1.3; }
.wcap-total-label { font-size: .85em; opacity: .7; }
.wcap-total-amount { font-size: 1.4em; font-weight: 700; }
.wcap-total-amount .amount { color: inherit; }

/* ----------------------------- Flechas ----------------------------- */
.wcap-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: #1a1a1a;
	box-shadow: 0 4px 16px rgba(0,0,0,.12);
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, opacity .2s ease, box-shadow .2s ease, transform .2s ease;
}
.wcap-arrow:hover { background: #1a1a1a; color: #fff; }
.wcap-arrow svg { width: 18px; height: 18px; }
.wcap-arrow[disabled] { opacity: .35; cursor: default; pointer-events: none; }

/* Flechas fuera (a los lados): el hueco = tamaño REAL de la flecha + hueco
   configurable (ambos vienen de los controles; sin valores fijos). */
.wcap-arrows-outside .wcap-viewport { margin: 0 calc(var(--wcap-arrow-size, 46px) + var(--wcap-arrow-gap, 14px)); }
.wcap-arrows-outside .wcap-arrow--prev { left: 0; }
.wcap-arrows-outside .wcap-arrow--next { right: 0; }

/* Flechas dentro (sobre la imagen). */
.wcap-arrows-inside .wcap-arrow--prev { left: var(--wcap-arrow-offset); }
.wcap-arrows-inside .wcap-arrow--next { right: var(--wcap-arrow-offset); }

/* Las flechas sólo existen en modo carrusel. */
.wcap-root:not(.wcap-mode-carousel) .wcap-arrow,
.wcap-root:not(.wcap-mode-carousel) .wcap-dots { display: none; }

/* (Las flechas se muestran en TODOS los dispositivos según "Flechas". Si en móvil
   prefieres no reservar ancho, usa la posición "Sobre la imagen".) */

/* ----------------------------- Puntos ----------------------------- */
.wcap-dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: 22px;
	flex-wrap: wrap;
}
.wcap-dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(0,0,0,.18);
	cursor: pointer;
	transition: width .25s ease, background-color .25s ease;
}
.wcap-dot.is-active { width: 26px; background: #1a1a1a; }

/* ----------------------------- Animación de entrada ----------------------------- */
/* Estado inicial (antes de que el JS/GSAP tome el control) para evitar parpadeo. */
.wcap-root[data-anim="1"]:not(.wcap-anim-done) .wcap-card { opacity: 0; }

/* ----------------------------- Accesibilidad / RTL ----------------------------- */
@media (prefers-reduced-motion: reduce) {
	.wcap-root * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

[dir="rtl"] .wcap-arrows-outside .wcap-arrow--prev { left: auto; right: 0; }
[dir="rtl"] .wcap-arrows-outside .wcap-arrow--next { right: auto; left: 0; }

/* Reduce el “salto” en la primera pintura: sin modo aún, oculta flechas/puntos. */
.wcap-root:not(.wcap-mode-grid):not(.wcap-mode-carousel) .wcap-arrow,
.wcap-root:not(.wcap-mode-grid):not(.wcap-mode-carousel) .wcap-dots { display: none; }