/* Cubakilos · badges on the product photo (cubakilos-insignias.php, log 438).
   Kit 8 / V4 variables only. Motion: transform + opacity, nothing moves the layout (CLS 0),
   still with prefers-reduced-motion. */

.ck-ins-foto,
.ck-cross__foto,
.e-div-block:has(> .ck-ins-w) {
	position: relative;
	isolation: isolate;
}
.ck-cross__foto {
	display: block;
}
.elementor-widget.ck-ins-w {
	position: absolute;
	inset: 0;
	margin: 0;
	pointer-events: none;
	z-index: 1;
}

.ck-ins-capa {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
	font-family: var(--ck-fuente), sans-serif;
}

.ck-ins {
	position: absolute;
	display: inline-flex;
	align-items: center;
	gap: var(--ck-s-1);
	max-width: calc(100% - var(--ck-s-4));
	font-size: var(--ck-t-xs);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .01em;
	overflow: hidden;
	box-shadow: 0 2px 6px color-mix(in srgb, var(--ck-texto) 16%, transparent);
}
.ck-ins__txt {
	position: relative;
	z-index: 1;
}
.ck-ins__ico {
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
}

/* Ribbon: attached to the left edge, rounded on the right. */
.ck-ins--cinta {
	top: var(--ck-s-2);
	left: 0;
	padding: var(--ck-s-1) var(--ck-s-3) var(--ck-s-1) var(--ck-s-2);
	border-radius: 0 var(--ck-r-pill) var(--ck-r-pill) 0;
}
/* Offers are good news: green (René, 03/11/2026), like every discount and gift. */
.ck-ins--oferta {
	background: var(--ck-menta);
	color: var(--ck-confianza-texto);
}
.ck-ins--regalo {
	background: var(--ck-menta);
	color: var(--ck-confianza-texto);
}
.ck-ins--top {
	background: var(--ck-accion);
	color: var(--ck-blanco);
}

/* Pill: bottom right. */
.ck-ins--pastilla {
	right: var(--ck-s-2);
	bottom: var(--ck-s-2);
	padding: 2px var(--ck-s-2);
	border-radius: var(--ck-r-pill);
	background: var(--ck-blanco);
	color: var(--ck-naranja);
}

/* Product page: a bigger photo, a bigger badge. */
.ck-ins-capa--ficha .ck-ins {
	font-size: var(--ck-t-sm);
}
.ck-ins-capa--ficha .ck-ins--cinta {
	top: var(--ck-s-4);
	padding: var(--ck-s-1) var(--ck-s-4) var(--ck-s-1) var(--ck-s-3);
}
.ck-ins-capa--ficha .ck-ins--pastilla {
	right: var(--ck-s-4);
	bottom: var(--ck-s-4);
	padding: var(--ck-s-1) var(--ck-s-3);
}
.ck-ins-capa--ficha .ck-ins__ico {
	width: var(--ck-t-sm);
	height: var(--ck-t-sm);
}

@media (max-width: 767px) {
	.ck-ins-capa--tarjeta .ck-ins--cinta,
	.ck-ins-capa--sugerencia .ck-ins--cinta {
		top: var(--ck-s-1);
		padding: 2px var(--ck-s-2) 2px var(--ck-s-1);
	}
	.ck-ins-capa--tarjeta .ck-ins--pastilla,
	.ck-ins-capa--sugerencia .ck-ins--pastilla {
		right: var(--ck-s-1);
		bottom: var(--ck-s-1);
	}
}

/* Motion: the ribbon slides in, and a light sweeps across it once on load and once on hover. */
@media (prefers-reduced-motion: no-preference) {
	.ck-ins {
		animation: ck-ins-entra .35s ease-out both;
	}
	.ck-ins--pastilla {
		animation-delay: .15s;
	}
	.ck-ins--cinta::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--ck-blanco) 70%, transparent) 50%, transparent 70%);
		transform: translateX(-110%);
		animation: ck-ins-brillo .9s ease-in-out .5s 1 both;
	}
	@media (hover: hover) {
		.ck-ins-foto:hover .ck-ins--cinta::after,
		.ck-cross__card:hover .ck-ins--cinta::after,
		.e-loop-item:hover .ck-ins--cinta::after {
			animation-name: ck-ins-brillo-2;
			animation-delay: 0s;
		}
	}
}

@keyframes ck-ins-entra {
	from {
		opacity: 0;
		transform: translateX(-6px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
@keyframes ck-ins-brillo {
	from {
		transform: translateX(-110%);
	}
	to {
		transform: translateX(110%);
	}
}
/* Same sweep under another name: switching the name restarts it on hover. */
@keyframes ck-ins-brillo-2 {
	from {
		transform: translateX(-110%);
	}
	to {
		transform: translateX(110%);
	}
}