/* ==========================================================================
   Colihue Aventura – Widget "Vitrina de categorías"
   Cada categoría es una escena: fondo propio, título gigante y sus productos.
   Las escenas se suceden con una coreografía: el fondo se funde y se acerca, el título
   sube renglón por renglón y las tarjetas entran una detrás de otra. Puntitos abajo.

   Igual que el carrusel de banners: las transiciones van con !important y un selector
   específico para ganarle a la regla de Elementor que las apaga cuando Windows tiene
   "reducir animaciones" (html * { transition-duration: 0s !important }). Todo lo que se
   mueve es transform/opacity: lo compone la placa de video.
   ========================================================================== */
.ca-vit {
	--ca-vit-acento: var(--ca-vit-acento-base, #ff6700);
	--ca-vit-borde: 6px;
	--ca-vit-alto: 400px;
	--ca-vit-max: 1240px;
	--ca-vit-caja-radio: 18px;
	--ca-vit-col-titulo: 25%;
	--ca-vit-oscuro: .55;
	--ca-vit-trama: 1;
	--ca-vit-radio: 13px;
	--ca-vit-tarjeta: #ffffff;
	--ca-vit-foto-prop: 1.25;
	--ca-vit-punto: rgba(255, 255, 255, .5);
	--ca-vit-punto-tam: 10px;
	--ca-vit-puntos-abajo: 16px;
	--ca-vit-flecha: #ffffff;
	--ca-vit-flecha-fondo: rgba(15, 15, 17, .55);
	--ca-vit-velocidad: 1;
	--ca-vit-tiempo: 7000ms;
	--ca-vit-curva: cubic-bezier(.22, 1.12, .36, 1);   /* frena con un rebote mínimo */
	--ca-vit-suave: cubic-bezier(.22, .61, .27, 1);
	position: relative;
	isolation: isolate;
	overflow: hidden;
	box-sizing: border-box;
	width: 100%;
	max-width: var(--ca-vit-max);
	margin-inline: auto;
	border-radius: var(--ca-vit-caja-radio);
	background-color: #111;
	color: #fff;
	-webkit-tap-highlight-color: transparent;
	touch-action: pan-y pinch-zoom;   /* lo vertical scrollea la página; lo horizontal es nuestro (deslizar) */
}
.ca-vit *, .ca-vit *::before, .ca-vit *::after { box-sizing: border-box; }
.ca-vit-aviso {
	padding: 28px;
	border: 2px dashed #ff6700;
	border-radius: 12px;
	background: #fff7f1;
	color: #1d1b19;
	font: 15px/1.5 system-ui, sans-serif;
	text-align: center;
}

/* Las escenas se apilan en la misma celda: el alto lo pone la más alta, sin saltos. */
.ca-vit-escenas { display: grid; }
.ca-vit-escena {
	grid-area: 1 / 1;
	position: relative;
	min-height: var(--ca-vit-alto);
	visibility: hidden;
	pointer-events: none;
	transition: visibility 0s linear calc(.9s * var(--ca-vit-velocidad)) !important;
}
.ca-vit-escena.es-activa { visibility: visible; pointer-events: auto; transition-delay: 0s !important; }
/* Franjas de arriba y abajo, del color de cada categoría: se funden al cambiar. */
.ca-vit-escena::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	border-top: var(--ca-vit-borde) solid var(--ca-vit-acento);
	border-bottom: var(--ca-vit-borde) solid var(--ca-vit-acento);
	opacity: 0;
	pointer-events: none;
	transition: opacity calc(.6s * var(--ca-vit-velocidad)) ease !important;
}
.ca-vit-escena.es-activa::after { opacity: 1; }

/* ── Fondo ── */
.ca-vit-fondo {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	opacity: 0;
	transition: opacity calc(.9s * var(--ca-vit-velocidad)) var(--ca-vit-suave) !important;
}
.ca-vit-escena.es-activa .ca-vit-fondo { opacity: 1; }
.ca-vit-fondo picture { display: contents; }
.ca-vit-fondo img {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border-radius: 0;
	object-fit: cover;
	transform: scale(1.14);
	will-change: transform;
	transition: transform calc(1.4s * var(--ca-vit-velocidad)) var(--ca-vit-suave) !important;
}
/* mientras la escena está, el fondo sigue acercándose despacio */
.ca-vit-escena.es-activa .ca-vit-fondo img { transform: scale(1.02); transition: transform var(--ca-vit-tiempo) linear !important; }
.ca-vit.ca-vit-sin-acercamiento .ca-vit-fondo img,
.ca-vit.ca-vit-sin-acercamiento .ca-vit-escena.es-activa .ca-vit-fondo img { transform: scale(1.02); }
/* Fondo automático (sin imagen propia): la miniatura del primer producto, estirada. Queda
   desenfocada sola, sin filtro blur, que en pantalla grande es caro de animar. */
.ca-vit-fondo.es-auto img { filter: saturate(1.3); transform: scale(1.5); opacity: .6; }
.ca-vit-escena.es-activa .ca-vit-fondo.es-auto img,
.ca-vit.ca-vit-sin-acercamiento .ca-vit-fondo.es-auto img { transform: scale(1.35); }
/* Trama de puntitos (como el fondo actual del sitio) y degradé para que se lea el título. */
.ca-vit-fondo::before,
.ca-vit-fondo::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.ca-vit-fondo::before {
	z-index: 2;
	background: radial-gradient(rgba(0, 0, 0, .55) 1.1px, transparent 1.7px) 0 0 / 6px 6px;
	opacity: calc(var(--ca-vit-oscuro) * var(--ca-vit-trama));
}
.ca-vit-fondo.es-auto::before { opacity: var(--ca-vit-trama); }
.ca-vit-fondo::after {
	z-index: 1;
	background:
		linear-gradient(90deg, rgba(10, 10, 10, .78) 0%, rgba(10, 10, 10, .35) 38%, rgba(10, 10, 10, .2) 100%),
		radial-gradient(70% 90% at 12% 50%, color-mix(in srgb, var(--ca-vit-acento) 28%, transparent), transparent 70%);
	opacity: var(--ca-vit-oscuro);
}
.ca-vit-fondo.es-auto::after { opacity: 1; }

/* ── Cuerpo: título a la izquierda, productos a la derecha ── */
.ca-vit-cuerpo {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(170px, var(--ca-vit-col-titulo)) minmax(0, 1fr);
	align-items: center;
	gap: clamp(16px, 2.2vw, 36px);
	min-height: var(--ca-vit-alto);
	padding: calc(var(--ca-vit-borde) + 24px) clamp(18px, 3vw, 44px) calc(var(--ca-vit-borde) + var(--ca-vit-puntos-abajo) + 28px);
}
.ca-vit-cab { display: grid; gap: 12px; align-content: center; justify-items: start; min-width: 0; }
.ca-vit .ca-vit-titulo {
	display: block;
	max-width: 100%;
	margin: 0;
	color: #fff;
	font-family: 'Archivo Black', 'Arial Black', Impact, sans-serif;
	font-size: clamp(40px, 5vw, 80px);   /* si no entra en su columna, el JS lo achica lo justo */
	line-height: .86;
	letter-spacing: -.01em;
	text-transform: uppercase;
	text-decoration: none;
	text-shadow: 0 6px 24px rgba(0, 0, 0, .35);
}
.ca-vit .ca-vit-titulo:hover { color: inherit; }
.ca-vit-titulo-img { display: block; width: 100%; max-width: 100%; height: auto; }
/* Cada renglón recorta su texto para que "suba" desde abajo. El relleno de arriba deja
   lugar a las tildes (É, Á): sin él, el recorte se las comía. */
.ca-vit-linea { display: block; overflow: hidden; padding: .16em 0 .04em; margin-top: -.16em; }
.ca-vit-linea.ca-vit-solo-cel { display: none; }
.ca-vit-linea > span {
	display: block;
	transform: translate3d(0, 105%, 0);
	will-change: transform;
	transition: transform calc(.75s * var(--ca-vit-velocidad)) var(--ca-vit-curva) !important;
}
.ca-vit-escena.es-activa .ca-vit-linea > span { transform: translate3d(0, 0, 0); }
.ca-vit-escena.es-activa .ca-vit-linea:nth-child(2) > span { transition-delay: calc(.08s * var(--ca-vit-velocidad)) !important; }
.ca-vit-escena.es-activa .ca-vit-linea:nth-child(3) > span { transition-delay: calc(.16s * var(--ca-vit-velocidad)) !important; }
.ca-vit-escena.es-activa .ca-vit-linea:nth-child(4) > span { transition-delay: calc(.24s * var(--ca-vit-velocidad)) !important; }
.ca-vit-escena.es-sale .ca-vit-linea > span {
	transform: translate3d(0, -105%, 0);
	transition-duration: calc(.45s * var(--ca-vit-velocidad)) !important;
	transition-timing-function: var(--ca-vit-suave) !important;
}
/* Variante "aparece fundiéndose". */
.ca-vit.ca-vit-entrada-funde .ca-vit-linea > span {
	transform: scale(.96);
	opacity: 0;
	transition: transform calc(.8s * var(--ca-vit-velocidad)) var(--ca-vit-suave), opacity calc(.6s * var(--ca-vit-velocidad)) ease !important;
}
.ca-vit.ca-vit-entrada-funde .ca-vit-escena.es-activa .ca-vit-linea > span { transform: none; opacity: 1; }
.ca-vit.ca-vit-entrada-funde .ca-vit-escena.es-sale .ca-vit-linea > span { transform: none; opacity: 0; }
.ca-vit-titulo-img {
	opacity: 0;
	transform: translate3d(0, 12px, 0) scale(.97);
	transition: opacity calc(.6s * var(--ca-vit-velocidad)) ease, transform calc(.8s * var(--ca-vit-velocidad)) var(--ca-vit-curva) !important;
}
.ca-vit-escena.es-activa .ca-vit-titulo-img { opacity: 1; transform: none; }

.ca-vit-sub, .ca-vit-boton {
	opacity: 0;
	transform: translate3d(0, 14px, 0);
	transition: opacity calc(.5s * var(--ca-vit-velocidad)) ease, transform calc(.6s * var(--ca-vit-velocidad)) var(--ca-vit-curva), background-color .3s ease !important;
}
.ca-vit-escena.es-activa .ca-vit-sub { opacity: 1; transform: none; transition-delay: calc(.3s * var(--ca-vit-velocidad)) !important; }
.ca-vit-escena.es-activa .ca-vit-boton { opacity: 1; transform: none; transition-delay: calc(.38s * var(--ca-vit-velocidad)) !important; }
.ca-vit .ca-vit-sub {
	margin: 0;
	max-width: 30ch;
	font-family: 'Oswald', 'Arial Narrow', Arial, sans-serif;
	font-size: 15px;
	line-height: 1.45;
	letter-spacing: .02em;
	color: rgba(255, 255, 255, .86);
}
.ca-vit .ca-vit-boton {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 0 20px;
	border-radius: 999px;
	background-color: var(--ca-vit-acento);
	color: #fff;
	font-family: 'Oswald', 'Arial Narrow', Arial, sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
	box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--ca-vit-acento) 75%, transparent);
}
.ca-vit .ca-vit-boton:hover { color: #fff; filter: brightness(1.08); }
.ca-vit-boton svg { flex: 0 0 auto; width: 16px; height: 16px; transition: transform .3s var(--ca-vit-curva) !important; }
.ca-vit-boton:hover svg { transform: translateX(4px); }
.ca-vit-boton:focus-visible, .ca-vit-titulo:focus-visible, .ca-vit-prod a:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* ── Productos: una fila; cuántos se ven lo decide la clase ca-vit-mostrar-N. Cada tarjeta
   mide lo mismo en todas las categorías; si una tiene menos productos, van centrados. ── */
.ca-vit-productos {
	--ca-vit-gap: var(--ca-vit-sep, clamp(10px, 1.3vw, 22px));
	--ca-vit-cols: var(--ca-vit-columnas, 4);
	display: flex;
	justify-content: center;
	align-items: stretch;
	gap: var(--ca-vit-gap);
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ca-vit-prod {
	flex: 0 0 calc((100% - (var(--ca-vit-cols) - 1) * var(--ca-vit-gap)) / var(--ca-vit-cols));
	min-width: 0;
	margin: 0;
	padding: 0;
	opacity: 0;
	transform: translate3d(calc(var(--ca-vit-dir, 1) * 60px), 18px, 0) scale(.94);
	will-change: transform, opacity;
	transition: opacity calc(.55s * var(--ca-vit-velocidad)) ease, transform calc(.9s * var(--ca-vit-velocidad)) var(--ca-vit-curva) !important;
}
.ca-vit-prod::before, .ca-vit-prod::marker { content: none; }
.ca-vit-escena.es-activa .ca-vit-prod { opacity: 1; transform: none; transition-delay: calc((.12s + var(--i) * .08s) * var(--ca-vit-velocidad)) !important; }
.ca-vit-escena.es-sale .ca-vit-prod {
	opacity: 0;
	transform: translate3d(calc(var(--ca-vit-dir, 1) * -50px), 0, 0) scale(.96);
	transition: opacity calc(.35s * var(--ca-vit-velocidad)) ease, transform calc(.5s * var(--ca-vit-velocidad)) var(--ca-vit-suave) !important;
	transition-delay: calc(var(--i) * .04s * var(--ca-vit-velocidad)) !important;
}
.ca-vit .ca-vit-prod a {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border-radius: var(--ca-vit-radio);
	background: var(--ca-vit-tarjeta);
	color: #1e1e1e;
	text-decoration: none;
	box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .6);
	transform: translateZ(0);
	transition: transform .45s var(--ca-vit-curva), box-shadow .45s ease !important;
}
@media (hover: hover) {
	.ca-vit .ca-vit-prod a:hover { transform: translate3d(0, -8px, 0); box-shadow: 0 22px 40px -14px rgba(0, 0, 0, .7); }
}
.ca-vit-foto {
	position: relative;
	display: block;
	aspect-ratio: var(--ca-vit-foto-prop);
	overflow: hidden;
	background: #fff;
}
.ca-vit-foto img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border-radius: 0;
	object-fit: contain;
	transition: transform .7s var(--ca-vit-suave), opacity .45s ease !important;
}
.ca-vit-foto img.ca-vit-foto2 { opacity: 0; }
.ca-vit.ca-vit-sin-segunda .ca-vit-foto img.ca-vit-foto2 { display: none; }
@media (hover: hover) {
	.ca-vit-prod a:hover .ca-vit-foto img { transform: scale(1.06); }
	.ca-vit:not(.ca-vit-sin-segunda) .ca-vit-prod a:hover .ca-vit-foto img.ca-vit-foto2 { opacity: 1; }
	.ca-vit:not(.ca-vit-sin-segunda) .ca-vit-prod a:hover .ca-vit-foto.tiene-2 img:first-child { opacity: 0; }
}
.ca-vit-oferta {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	padding: 5px 9px;
	border-radius: 999px;
	background-color: #e3262f;
	color: #fff;
	font: 700 11px/1 'Oswald', 'Arial Narrow', Arial, sans-serif;
	letter-spacing: .06em;
}
.ca-vit-info { display: grid; gap: 5px; padding: 10px clamp(9px, calc(var(--ca-vit-tarjeta-ancho, 200px) * .065), 14px) 12px; }
.ca-vit .ca-vit-nombre {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.5em;
	color: #1e1e1e;
	font-family: 'Oswald', 'Arial Narrow', Arial, sans-serif;
	font-size: clamp(11.5px, calc(var(--ca-vit-tarjeta-ancho, 190px) * .074), 15px);   /* se achica con la tarjeta (el JS mide su ancho) */
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: .01em;
	text-transform: uppercase;
}
.ca-vit-precio { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.ca-vit .ca-vit-precio b {
	color: #d64a00;
	font-family: 'Krona One', 'Arial Black', Arial, sans-serif;
	font-size: clamp(10.5px, calc(var(--ca-vit-tarjeta-ancho, 190px) * .079), 16px);
	font-weight: 400;
	white-space: nowrap;
	line-height: 1.2;
	letter-spacing: -.02em;
}
.ca-vit-precio s { font: 400 11px/1.2 'Krona One', 'Arial Black', Arial, sans-serif; color: #8a8a8a; }
.ca-vit-precio small { font: 500 11px/1 'Oswald', 'Arial Narrow', Arial, sans-serif; text-transform: uppercase; letter-spacing: .08em; color: #6b6b6b; }
.ca-vit-precio .woocommerce-Price-amount, .ca-vit-precio bdi { font: inherit; color: inherit; }

/* Cuántos productos se ven (y en cuántas columnas), por dispositivo. La clase la pone
   Elementor ("Productos por categoría") y cambia al instante en el editor. */
.ca-vit-mostrar-1 { --ca-vit-columnas: 1; } .ca-vit-mostrar-1 .ca-vit-prod:nth-child(n+2) { display: none; }
.ca-vit-mostrar-2 { --ca-vit-columnas: 2; } .ca-vit-mostrar-2 .ca-vit-prod:nth-child(n+3) { display: none; }
.ca-vit-mostrar-3 { --ca-vit-columnas: 3; } .ca-vit-mostrar-3 .ca-vit-prod:nth-child(n+4) { display: none; }
.ca-vit-mostrar-4 { --ca-vit-columnas: 4; } .ca-vit-mostrar-4 .ca-vit-prod:nth-child(n+5) { display: none; }
.ca-vit-mostrar-5 { --ca-vit-columnas: 5; } .ca-vit-mostrar-5 .ca-vit-prod:nth-child(n+6) { display: none; }
.ca-vit-mostrar-6 { --ca-vit-columnas: 6; } .ca-vit-mostrar-6 .ca-vit-prod:nth-child(n+7) { display: none; }
@media (max-width: 1024px) {
	[class*="ca-vit-mostrar-tablet-"] .ca-vit .ca-vit-prod { display: block; }
	.ca-vit-mostrar-tablet-1 .ca-vit { --ca-vit-columnas: 1; } .ca-vit-mostrar-tablet-1 .ca-vit .ca-vit-prod:nth-child(n+2) { display: none; }
	.ca-vit-mostrar-tablet-2 .ca-vit { --ca-vit-columnas: 2; } .ca-vit-mostrar-tablet-2 .ca-vit .ca-vit-prod:nth-child(n+3) { display: none; }
	.ca-vit-mostrar-tablet-3 .ca-vit { --ca-vit-columnas: 3; } .ca-vit-mostrar-tablet-3 .ca-vit .ca-vit-prod:nth-child(n+4) { display: none; }
	.ca-vit-mostrar-tablet-4 .ca-vit { --ca-vit-columnas: 4; } .ca-vit-mostrar-tablet-4 .ca-vit .ca-vit-prod:nth-child(n+5) { display: none; }
	.ca-vit-mostrar-tablet-5 .ca-vit { --ca-vit-columnas: 5; } .ca-vit-mostrar-tablet-5 .ca-vit .ca-vit-prod:nth-child(n+6) { display: none; }
	.ca-vit-mostrar-tablet-6 .ca-vit { --ca-vit-columnas: 6; } .ca-vit-mostrar-tablet-6 .ca-vit .ca-vit-prod:nth-child(n+7) { display: none; }
}
@media (max-width: 767px) {
	[class*="ca-vit-mostrar-mobile-"] .ca-vit .ca-vit-escena .ca-vit-prod { display: block; }
	.ca-vit-mostrar-mobile-1 .ca-vit { --ca-vit-columnas: 1; } .ca-vit-mostrar-mobile-1 .ca-vit .ca-vit-escena .ca-vit-prod:nth-child(n+2) { display: none; }
	.ca-vit-mostrar-mobile-2 .ca-vit { --ca-vit-columnas: 2; } .ca-vit-mostrar-mobile-2 .ca-vit .ca-vit-escena .ca-vit-prod:nth-child(n+3) { display: none; }
	.ca-vit-mostrar-mobile-3 .ca-vit { --ca-vit-columnas: 3; } .ca-vit-mostrar-mobile-3 .ca-vit .ca-vit-escena .ca-vit-prod:nth-child(n+4) { display: none; }
	.ca-vit-mostrar-mobile-4 .ca-vit { --ca-vit-columnas: 4; } .ca-vit-mostrar-mobile-4 .ca-vit .ca-vit-escena .ca-vit-prod:nth-child(n+5) { display: none; }
	.ca-vit-mostrar-mobile-5 .ca-vit { --ca-vit-columnas: 5; } .ca-vit-mostrar-mobile-5 .ca-vit .ca-vit-escena .ca-vit-prod:nth-child(n+6) { display: none; }
	.ca-vit-mostrar-mobile-6 .ca-vit { --ca-vit-columnas: 6; } .ca-vit-mostrar-mobile-6 .ca-vit .ca-vit-escena .ca-vit-prod:nth-child(n+7) { display: none; }
}

/* ── Abajo al centro: flecha · puntitos · flecha ── */
.ca-vit-nav {
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc(var(--ca-vit-borde) + var(--ca-vit-puntos-abajo));
	z-index: 3;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	pointer-events: none;
}
.ca-vit-nav > * { pointer-events: auto; }
.ca-vit.ca-vit-sin-puntitos:not(.ca-vit-con-flechas) .ca-vit-nav { display: none; }

/* ── Puntitos: en qué categoría estás. El actual se alarga y se va llenando con el
   tiempo que falta para pasar a la siguiente (o, a elección, es un punto más grande). ── */
.ca-vit-puntos {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
}
.ca-vit.ca-vit-sin-puntitos .ca-vit-puntos { display: none; }
.ca-vit .ca-vit-punto {
	position: relative;
	display: block;
	flex: 0 0 auto;
	width: calc(var(--ca-vit-punto-tam) + 16px);   /* área para tocar con el dedo; el punto va adentro */
	height: calc(var(--ca-vit-punto-tam) + 16px);
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: none;
	box-shadow: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: width .5s var(--ca-vit-curva) !important;
}
.ca-vit .ca-vit-punto:hover, .ca-vit .ca-vit-punto:focus { background: none; }
.ca-vit-punto::before,
.ca-vit-punto .ca-vit-barra {
	content: "";
	position: absolute;
	top: 50%;
	left: 8px;
	right: 8px;
	height: var(--ca-vit-punto-tam);
	margin-top: calc(var(--ca-vit-punto-tam) / -2);
	border-radius: 999px;
}
.ca-vit-punto::before {
	background: var(--ca-vit-punto);
	box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
	transition: background-color .3s ease, transform .4s var(--ca-vit-curva) !important;
}
.ca-vit-punto:hover::before { background: rgba(255, 255, 255, .85); }
.ca-vit-punto .ca-vit-barra { overflow: hidden; opacity: 0; }
.ca-vit-punto .ca-vit-barra::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--ca-vit-punto-activo, var(--ca-vit-acento));
	transform: scaleX(0);
	transform-origin: left;
}
/* Estilo "barra": se alarga y se llena. */
.ca-vit.ca-vit-puntos-barra .ca-vit-punto.es-activa { width: calc(var(--ca-vit-punto-tam) * 3.6 + 16px); }
.ca-vit.ca-vit-puntos-barra .ca-vit-punto.es-activa::before { background: rgba(255, 255, 255, .38); }
.ca-vit.ca-vit-puntos-barra .ca-vit-punto.es-activa .ca-vit-barra { opacity: 1; }
.ca-vit.ca-vit-puntos-barra .ca-vit-punto.es-activa .ca-vit-barra::after { animation: ca-vit-llenar var(--ca-vit-tiempo) linear forwards !important; }
.ca-vit.en-pausa .ca-vit-punto.es-activa .ca-vit-barra::after { animation-play-state: paused !important; }
.ca-vit.sin-giro .ca-vit-punto.es-activa .ca-vit-barra::after { animation: none !important; transform: none; }
/* Estilo "punto": el actual es más grande y del color de la categoría. */
.ca-vit.ca-vit-puntos-punto .ca-vit-punto.es-activa::before { background: var(--ca-vit-punto-activo, var(--ca-vit-acento)); transform: scale(1.5); }
.ca-vit-punto:focus-visible { outline: 2px solid #fff; outline-offset: 0; }
@keyframes ca-vit-llenar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ── Flechas (opcionales), a los lados de los puntitos ── */
.ca-vit .ca-vit-flecha {
	display: none;
	flex: 0 0 auto;
	place-items: center;
	width: 30px;
	height: 30px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--ca-vit-flecha-fondo);
	color: var(--ca-vit-flecha);
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
	transition: transform .2s ease !important;
}
.ca-vit.ca-vit-con-flechas .ca-vit-flecha { display: grid; }
.ca-vit .ca-vit-flecha:hover, .ca-vit .ca-vit-flecha:focus { transform: scale(1.1); background: var(--ca-vit-flecha-fondo); color: var(--ca-vit-flecha); }
.ca-vit .ca-vit-flecha:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ca-vit .ca-vit-flecha svg { width: 16px; height: 16px; }

/* Caja angosta (columna del tema, sidebar): nunca quedan tarjetas chiquitas. Se muestran
   menos de las elegidas si no entran a unos 150 px cada una. Las clases las pone el JS
   según el ancho real de la caja (con "container queries" la caja, que en Elementor es un
   ítem flex, quedaba con el alto mal calculado en celular: probado). */
.ca-vit.ca-vit-hasta-3 .ca-vit-productos { --ca-vit-cols: min(var(--ca-vit-columnas, 4), 3); }
.ca-vit.ca-vit-hasta-3 .ca-vit-escena .ca-vit-productos .ca-vit-prod:nth-child(n+4) { display: none; }
.ca-vit.ca-vit-hasta-2 .ca-vit-productos { --ca-vit-cols: min(var(--ca-vit-columnas, 4), 2); }
.ca-vit.ca-vit-hasta-2 .ca-vit-escena .ca-vit-productos .ca-vit-prod:nth-child(n+3) { display: none; }
.ca-vit.ca-vit-hasta-1 .ca-vit-productos { --ca-vit-cols: 1; }
.ca-vit.ca-vit-hasta-1 .ca-vit-escena .ca-vit-productos .ca-vit-prod:nth-child(n+2) { display: none; }
/* Caja angosta: el botón se compacta para no partirse. */
.ca-vit.ca-vit-compacta .ca-vit-boton { gap: 7px; padding: 0 14px; letter-spacing: .04em; }
.ca-vit.ca-vit-compacta .ca-vit-sub { font-size: 14px; }

/* Antes de que arranque el JS (o si fallara): la primera categoría, quieta y completa. */
.ca-vit:not(.ca-vit-lista) .ca-vit-escena:first-child { visibility: visible; pointer-events: auto; }
.ca-vit:not(.ca-vit-lista) .ca-vit-escena:first-child::after { opacity: 1; transition: none !important; }
.ca-vit:not(.ca-vit-lista) .ca-vit-escena:first-child .ca-vit-fondo,
.ca-vit:not(.ca-vit-lista) .ca-vit-escena:first-child .ca-vit-sub,
.ca-vit:not(.ca-vit-lista) .ca-vit-escena:first-child .ca-vit-boton,
.ca-vit:not(.ca-vit-lista) .ca-vit-escena:first-child .ca-vit-prod,
.ca-vit:not(.ca-vit-lista) .ca-vit-escena:first-child .ca-vit-titulo-img,
.ca-vit:not(.ca-vit-lista) .ca-vit-escena:first-child .ca-vit-linea > span { opacity: 1; transform: none; transition: none !important; }

/* ── Celular: título arriba y los productos lado a lado (2 por defecto) ── */
@media (max-width: 767px) {
	.ca-vit { --ca-vit-caja-radio: 14px; --ca-vit-borde: 5px; --ca-vit-alto: 0px; --ca-vit-foto-prop: 1; --ca-vit-puntos-abajo: 8px; }
	.ca-vit-cuerpo { grid-template-columns: minmax(0, 1fr); align-items: start; padding: calc(var(--ca-vit-borde) + 14px) 14px calc(var(--ca-vit-borde) + var(--ca-vit-puntos-abajo) + 28px); gap: 14px; }
	.ca-vit-cab { gap: 9px; }
	.ca-vit .ca-vit-titulo { font-size: clamp(28px, 9vw, 52px); }
	.ca-vit-linea.ca-vit-solo-pc { display: none; }
	.ca-vit-linea.ca-vit-solo-cel { display: block; }
	.ca-vit-titulo-img { width: 70%; }
	.ca-vit .ca-vit-sub { font-size: 13.5px; max-width: none; }
	.ca-vit .ca-vit-boton { min-height: 38px; padding: 0 16px; font-size: 12.5px; }
	.ca-vit-productos { gap: 10px; }
	.ca-vit-info { padding: 8px 10px 10px; gap: 4px; }
}