/* =========================================================================
 * Slideshow for Elementor — estilos
 * Todo el diseño se controla por variables CSS escritas desde los controles.
 * Las clases de posición de miniaturas (.wcss-thumbs-left|right|top|bottom|none)
 * las pone el JS según el dispositivo activo; el resto de clases de estado
 * (.wcss-trans-*, .wcss-arrows-*, etc.) las escribe el render en el propio root.
 * Defaults como FALLBACK dentro de var(--x, def): el único sitio que fija cada
 * variable es el control por-widget (evita pisar instancias entre sí).
 * ========================================================================= */

.wcss-root {
	--wcss-gap: 14px;
	--wcss-ratio: 1 / 1;
	--wcss-fit: cover;
	--wcss-speed: 550ms;
	--wcss-ease: cubic-bezier(.22,.61,.36,1);

	--wcss-thumb-size: 72px;
	--wcss-thumb-ratio: 1 / 1;
	--wcss-thumb-gap: 10px;
	--wcss-thumb-fit: cover;
	--wcss-thumb-op: .55;
	--wcss-thumb-active-bd: #1a1a1a;
	--wcss-thumb-active-bw: 2px;

	--wcss-arrow-size: 44px;
	--wcss-arrow-icon: 18px;
	--wcss-arrow-color: #1a1a1a;
	--wcss-arrow-bg: #fff;
	--wcss-arrow-color-h: #fff;
	--wcss-arrow-bg-h: #1a1a1a;
	--wcss-arrow-offset: 12px;

	--wcss-dot: rgba(0,0,0,.22);
	--wcss-dot-active: #1a1a1a;
	--wcss-dot-size: 8px;
	--wcss-dot-active-w: 26px;
	--wcss-dot-gap: 8px;

	--wcss-sw-size: 26px;
	--wcss-sw-gap: 10px;
	--wcss-sw-ring: #1a1a1a;
	--wcss-sw-ring-w: 2px;

	position: relative;
}

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

/* Neutraliza estilos globales del kit de Elementor / tema sobre los botones del
   widget (de ahí venía el "rosa"): quita el chrome nativo y el anillo de focus
   rosa por defecto, dejando un anillo limpio y SÓLO con teclado (focus-visible).
   Reset mínimo para no pisar fondo/color propios (que son menos específicos). */
.wcss-root button { -webkit-appearance: none; appearance: none; }
.wcss-root button:focus:not(:focus-visible) { outline: none; }
.wcss-root :focus-visible { outline: 2px solid var(--wcss-focus, #1a1a1a); outline-offset: 2px; border-radius: 3px; }

/* ----------------------------- Layout (etapa + miniaturas) ----------------------------- */
.wcss-layout {
	display: flex;
	gap: var(--wcss-gap);
	align-items: stretch;
}
.wcss-stage-wrap {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	min-height: 0;
}

/* Posición de miniaturas (clase puesta por el JS según dispositivo). */
.wcss-thumbs-left .wcss-layout,
.wcss-thumbs-right .wcss-layout { flex-direction: row; }
.wcss-thumbs-top .wcss-layout,
.wcss-thumbs-bottom .wcss-layout { flex-direction: column; }
.wcss-thumbs-left .wcss-thumbs { order: -1; }
.wcss-thumbs-top .wcss-thumbs { order: -1; }
.wcss-thumbs-none .wcss-thumbs,
.wcss-no-thumbs .wcss-thumbs { display: none; }

/* ----------------------------- Etapa / viewport / track / slide ----------------------------- */
.wcss-stage { position: relative; }

.wcss-viewport {
	position: relative;
	overflow: hidden;
	width: 100%;
	aspect-ratio: var(--wcss-ratio, 1 / 1);
	height: var(--wcss-stage-h, auto);
	background: var(--wcss-stage-bg, transparent);
}

.wcss-track {
	position: relative;
	width: 100%;
	height: 100%;
}

.wcss-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
}
.wcss-slide.is-active { opacity: 1; z-index: 2; }

.wcss-media {
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
	text-decoration: none;
	line-height: 0;
}
.wcss-img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: var(--wcss-fit, cover);
	-webkit-user-drag: none;
	user-select: none;
}

/* MUCHOS temas / WooCommerce ponen `img{height:auto !important; max-width:100%}`,
   lo que hace que la imagen salga a su tamaño NATURAL y estire la etapa → el
   object-fit (cover/contain/automático) deja de tener efecto. Forzamos que la
   imagen llene su caja, ganando a ese reset (especificidad + !important). */
.wcss-root .wcss-img,
.wcss-root .wcss-thumb-img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	min-height: 0 !important;
}

/* Antes de inicializar, sin transición (evita parpadeo en la primera pintura). */
.wcss-root:not(.wcss-ready) .wcss-slide { transition: none !important; }

/* ----------------------------- Transiciones ----------------------------- */
/* DESLIZAR: el track es flex y el JS lo translada; los slides van en fila. */
.wcss-trans-slide .wcss-track {
	display: flex;
	flex-wrap: nowrap;
	height: 100%;
	will-change: transform;
}
.wcss-trans-slide .wcss-slide {
	position: relative;
	inset: auto;
	opacity: 1;
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
}
.wcss-grabbable .wcss-trans-slide .wcss-track { cursor: grab; }
.wcss-dragging .wcss-trans-slide .wcss-track { cursor: grabbing; }
.wcss-dragging .wcss-media { pointer-events: none; }

/* FUNDIDO */
.wcss-trans-fade .wcss-slide { transition: opacity var(--wcss-speed) var(--wcss-ease); }

/* ZOOM */
.wcss-trans-zoom .wcss-slide {
	transition: opacity var(--wcss-speed) var(--wcss-ease), transform var(--wcss-speed) var(--wcss-ease);
	transform: scale(1.06);
}
.wcss-trans-zoom .wcss-slide.is-active { transform: scale(1); }

/* VOLTEAR (3D) */
.wcss-trans-flip .wcss-track { perspective: 1200px; }
.wcss-trans-flip .wcss-slide {
	transition: opacity var(--wcss-speed) var(--wcss-ease), transform var(--wcss-speed) var(--wcss-ease);
	transform: rotateY(40deg);
	transform-origin: center;
	backface-visibility: hidden;
}
.wcss-trans-flip .wcss-slide.is-active { transform: rotateY(0); }

/* KEN BURNS (fundido + paneo/zoom ambiental del activo) */
.wcss-trans-kenburns .wcss-slide { transition: opacity var(--wcss-speed) var(--wcss-ease); }
.wcss-trans-kenburns .wcss-slide.is-active .wcss-img { animation: wcss-kb 14s ease-out forwards; }
@keyframes wcss-kb { from { transform: scale(1); } to { transform: scale(1.12); } }

/* ----------------------------- Flechas ----------------------------- */
.wcss-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 6;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--wcss-arrow-size);
	height: var(--wcss-arrow-size);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--wcss-arrow-bg);
	color: var(--wcss-arrow-color);
	box-shadow: 0 4px 16px rgba(0,0,0,.12);
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, opacity .2s ease, transform .2s ease;
}
/* Hover Y focus comparten estilo (oscuro). !important + .wcss-root para ganarle
   sí o sí al fondo/contorno rosa que el kit o el tema ponen en :focus/:hover de
   los <button>. El COLOR sigue saliendo de tus controles (vía las variables). */
.wcss-root .wcss-arrow:hover,
.wcss-root .wcss-arrow:focus {
	background: var(--wcss-arrow-bg-h) !important;
	color: var(--wcss-arrow-color-h) !important;
}
.wcss-arrow svg { width: var(--wcss-arrow-icon); height: var(--wcss-arrow-icon); }
.wcss-arrow[disabled] { opacity: .35; cursor: default; pointer-events: none; }

/* Sobre la imagen (centradas a los lados). */
.wcss-arrows-over .wcss-arrow--prev { left: var(--wcss-arrow-offset); }
.wcss-arrows-over .wcss-arrow--next { right: var(--wcss-arrow-offset); }

/* Fuera (a los lados): el viewport reserva hueco = tamaño flecha + separación. */
.wcss-arrows-outside .wcss-stage { padding-inline: calc(var(--wcss-arrow-size) + var(--wcss-arrow-offset)); }
.wcss-arrows-outside .wcss-arrow--prev { left: 0; }
.wcss-arrows-outside .wcss-arrow--next { right: 0; }

/* Dentro (agrupadas en una esquina, abajo-derecha). */
.wcss-arrows-inside .wcss-arrow { top: auto; bottom: var(--wcss-arrow-offset); transform: none; }
.wcss-arrows-inside .wcss-arrow--prev { left: auto; right: calc(var(--wcss-arrow-offset) + var(--wcss-arrow-size) + 8px); }
.wcss-arrows-inside .wcss-arrow--next { right: var(--wcss-arrow-offset); }

/* ----------------------------- Contador ----------------------------- */
.wcss-counter {
	position: absolute;
	z-index: 6;
	padding: 4px 10px;
	font-size: 13px;
	line-height: 1.2;
	pointer-events: none;
	color: #fff;
	background: rgba(0,0,0,.5);
}
.wcss-counterpos-tl .wcss-counter { top: 12px; left: 12px; }
.wcss-counterpos-tr .wcss-counter { top: 12px; right: 12px; }
.wcss-counterpos-bl .wcss-counter { bottom: 12px; left: 12px; }
.wcss-counterpos-br .wcss-counter { bottom: 12px; right: 12px; }

/* ----------------------------- Barra de progreso ----------------------------- */
.wcss-progress {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 3px;
	background: rgba(0,0,0,.15);
	z-index: 6;
	overflow: hidden;
}
.wcss-progress-bar {
	display: block;
	height: 100%;
	width: 100%;
	transform: scaleX(0);
	transform-origin: left center;
	background: var(--wcss-dot-active, #1a1a1a);
}
.wcss-playing .wcss-progress-bar { animation: wcss-prog var(--wcss-delay, 4500ms) linear forwards; }
.wcss-paused .wcss-progress-bar { animation-play-state: paused; }
@keyframes wcss-prog { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ----------------------------- Puntos ----------------------------- */
.wcss-dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--wcss-dot-gap);
	margin-top: 14px;
	flex-wrap: wrap;
}
.wcss-dots-over .wcss-dots {
	position: absolute;
	left: 0; right: 0; bottom: 12px;
	margin: 0;
	z-index: 7;
}
.wcss-dot {
	width: var(--wcss-dot-size);
	height: var(--wcss-dot-size);
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--wcss-dot);
	cursor: pointer;
	transition: width .25s ease, background-color .25s ease;
}
.wcss-dot.is-active { width: var(--wcss-dot-active-w); background: var(--wcss-dot-active); }
/* Evita el fondo rosa del kit en hover/focus de los puntos. */
.wcss-root .wcss-dot:hover,
.wcss-root .wcss-dot:focus { background: var(--wcss-dot); }
.wcss-root .wcss-dot.is-active:hover,
.wcss-root .wcss-dot.is-active:focus { background: var(--wcss-dot-active); }

/* ----------------------------- Caption (overlay) ----------------------------- */
.wcss-cap {
	position: absolute;
	left: 0; right: 0;
	z-index: 4;
	padding: 14px 16px;
	color: #fff;
	pointer-events: none;
}
.wcss-cappos-over-bottom .wcss-cap { bottom: 0; }
.wcss-cappos-over-top .wcss-cap { top: 0; }
.wcss-cappos-over-center .wcss-cap { top: 50%; transform: translateY(-50%); }
.wcss-cap-title { font-size: 1.1em; font-weight: 600; line-height: 1.25; }
.wcss-cap-sub { opacity: .9; line-height: 1.4; }
.wcss-cap-price { margin-top: 4px; font-weight: 600; }
.wcss-cap-price .amount { color: inherit; }
.wcss-cap a { color: inherit; }

/* ----------------------------- Miniaturas ----------------------------- */
.wcss-thumbs { position: relative; flex: 0 0 auto; }
.wcss-thumbs-viewport { overflow: hidden; scrollbar-width: none; }
.wcss-thumbs-viewport::-webkit-scrollbar { display: none; }
.wcss-thumbs-track { display: flex; gap: var(--wcss-thumb-gap); }

/* Vertical (izquierda / derecha) */
.wcss-thumbs-left .wcss-thumbs,
.wcss-thumbs-right .wcss-thumbs { width: var(--wcss-thumb-size); }
.wcss-thumbs-left .wcss-thumbs-viewport,
.wcss-thumbs-right .wcss-thumbs-viewport { height: 100%; max-height: 100%; overflow-y: auto; }
.wcss-thumbs-left .wcss-thumbs-track,
.wcss-thumbs-right .wcss-thumbs-track { flex-direction: column; }

/* Horizontal (arriba / abajo) */
.wcss-thumbs-top .wcss-thumbs,
.wcss-thumbs-bottom .wcss-thumbs { width: 100%; }
.wcss-thumbs-top .wcss-thumbs-viewport,
.wcss-thumbs-bottom .wcss-thumbs-viewport { overflow-x: auto; }
.wcss-thumbs-top .wcss-thumbs-track,
.wcss-thumbs-bottom .wcss-thumbs-track { flex-direction: row; }

.wcss-thumb {
	flex: 0 0 auto;
	width: var(--wcss-thumb-size);
	aspect-ratio: var(--wcss-thumb-ratio, 1 / 1);
	padding: 0;
	margin: 0;
	border: 0;
	background: var(--wcss-thumb-bg, transparent) !important;
	cursor: pointer;
	overflow: hidden;
	opacity: var(--wcss-thumb-op, .55);
	transition: opacity .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.wcss-thumb-img {
	width: 100%;
	height: 100%;
	object-fit: var(--wcss-thumb-fit, cover);
	display: block;
}
/* Hover Y focus iguales; mantiene el fondo propio (evita el rosa del kit en :focus). */
.wcss-root .wcss-thumb:hover,
.wcss-root .wcss-thumb:focus { opacity: var(--wcss-thumb-op-h, .85) !important; background: var(--wcss-thumb-bg, transparent) !important; }
.wcss-thumb.is-active {
	opacity: 1;
	box-shadow: inset 0 0 0 var(--wcss-thumb-active-bw, 2px) var(--wcss-thumb-active-bd, #1a1a1a);
}
/* Filtrado por color (swatch manual): se ocultan las que no coinciden. */
.wcss-thumb.wcss-hidden { display: none; }

/* Flechas de las miniaturas (overflow) — el JS las muestra si hace falta. */
.wcss-tnav {
	position: absolute;
	z-index: 5;
	display: none;
	align-items: center;
	justify-content: center;
	border: 0;
	background: var(--wcss-tnav-bg, rgba(255,255,255,.92)) !important;
	color: var(--wcss-tnav-color, #1a1a1a) !important;
	box-shadow: 0 2px 8px rgba(0,0,0,.16);
	cursor: pointer;
}
.wcss-tnav svg { width: var(--wcss-tnav-icon, 16px); height: var(--wcss-tnav-icon, 16px); display: block; flex: 0 0 auto; }
.wcss-tnav i { font-size: var(--wcss-tnav-icon, 16px); line-height: 1; flex: 0 0 auto; }
.wcss-root .wcss-tnav:hover,
.wcss-root .wcss-tnav:focus { background: var(--wcss-tnav-bg-h, #fff) !important; color: var(--wcss-tnav-color-h, #1a1a1a) !important; }
.wcss-tnav.is-shown { display: inline-flex; }
.wcss-thumbs-left .wcss-tnav,
.wcss-thumbs-right .wcss-tnav { left: 0; right: 0; height: var(--wcss-tnav-size, 22px); width: 100%; }
.wcss-thumbs-left .wcss-tnav--prev,
.wcss-thumbs-right .wcss-tnav--prev { top: 0; }
.wcss-thumbs-left .wcss-tnav--next,
.wcss-thumbs-right .wcss-tnav--next { bottom: 0; }
.wcss-thumbs-left .wcss-tnav svg,
.wcss-thumbs-right .wcss-tnav svg,
.wcss-thumbs-left .wcss-tnav i,
.wcss-thumbs-right .wcss-tnav i { transform: rotate(90deg); }
.wcss-thumbs-top .wcss-tnav,
.wcss-thumbs-bottom .wcss-tnav { top: 0; bottom: 0; width: var(--wcss-tnav-size, 22px); height: 100%; }
.wcss-thumbs-top .wcss-tnav--prev,
.wcss-thumbs-bottom .wcss-tnav--prev { left: 0; }
.wcss-thumbs-top .wcss-tnav--next,
.wcss-thumbs-bottom .wcss-tnav--next { right: 0; }

/* ----------------------------- Swatches ----------------------------- */
.wcss-swatches {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wcss-sw-gap);
	margin-bottom: 16px;
}
.wcss-swatch {
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	line-height: 0;
}
.wcss-swatch-dot {
	display: block;
	width: var(--wcss-sw-size);
	height: var(--wcss-sw-size);
	border-radius: 50%;
	background: #ddd;
	box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
	transition: box-shadow .15s ease, transform .15s ease;
}
.wcss-sw-square .wcss-swatch-dot { border-radius: 4px; }
.wcss-swatch:hover .wcss-swatch-dot { transform: scale(1.08); }
.wcss-swatch.is-active .wcss-swatch-dot {
	box-shadow: 0 0 0 2px #fff, 0 0 0 calc(2px + var(--wcss-sw-ring-w, 2px)) var(--wcss-sw-ring, #1a1a1a);
}
.wcss-swatch--all {
	height: var(--wcss-sw-size);
	padding: 0 12px;
	border-radius: 999px;
	background: #f1efea;
	color: #333;
	font-size: 13px;
	line-height: calc(var(--wcss-sw-size) - 2px);
	transition: background-color .15s ease, color .15s ease;
}
.wcss-swatch--all.is-active { background: #1a1a1a; color: #fff; }
/* Estados del botón "Todos" sin el rosa del kit. */
.wcss-root .wcss-swatch--all:hover,
.wcss-root .wcss-swatch--all:focus { background: #e9e6df; color: #333; }
.wcss-root .wcss-swatch--all.is-active:hover,
.wcss-root .wcss-swatch--all.is-active:focus { background: #1a1a1a; color: #fff; }

/* ----------------------------- Animación de entrada ----------------------------- */
.wcss-root[data-anim="1"]:not(.wcss-anim-done) .wcss-layout { opacity: 0; }

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

[dir="rtl"] .wcss-arrows-outside .wcss-arrow--prev { left: auto; right: 0; }
[dir="rtl"] .wcss-arrows-outside .wcss-arrow--next { right: auto; left: 0; }
[dir="rtl"] .wcss-arrows-over .wcss-arrow--prev { left: auto; right: var(--wcss-arrow-offset); }
[dir="rtl"] .wcss-arrows-over .wcss-arrow--next { right: auto; left: var(--wcss-arrow-offset); }

/* ----------------------------- Lightbox (propio) ----------------------------- */
.wcss-lb {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4vmin;
	background: rgba(0,0,0,.88);
	animation: wcss-lb-in .2s ease;
}
@keyframes wcss-lb-in { from { opacity: 0; } to { opacity: 1; } }
.wcss-lb-img {
	max-width: 92vw;
	max-height: 92vh;
	object-fit: contain;
	box-shadow: 0 10px 50px rgba(0,0,0,.5);
	user-select: none;
}
.wcss-lb button {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: rgba(255,255,255,.12);
	color: #fff;
	cursor: pointer;
	transition: background-color .15s ease;
}
.wcss-lb button:hover { background: rgba(255,255,255,.25); }
.wcss-lb-close { top: 16px; right: 16px; width: 44px; height: 44px; border-radius: 50%; font-size: 26px; line-height: 1; }
.wcss-lb-prev, .wcss-lb-next { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; font-size: 22px; }
.wcss-lb-prev { left: 16px; }
.wcss-lb-next { right: 16px; }