/* KBO Showcase Widget · v4 */

.kbo-sc {
	--kbo-dur: 900ms;
	--kbo-stagger: 120ms;
	--kbo-dist: 44px;
	--kbo-gap: 28px;
	--kbo-rgap: 36px;
	--kbo-cgap: 0px;
	--kbo-cw: 100px;
	--kbo-vx: 46px;
	--kbo-nl: 22px;
	--kbo-lw: 2px;
	--kbo-ls: dashed;
	--kbo-areas: "l kl c kr r";
	--kbo-cols: minmax(0, 1fr) auto auto auto minmax(0, 1fr);
	--kbo-conn-d: block;
	--kbo-l-dir: row-reverse;
	--kbo-l-ta: right;

	/* ----- Tema CLARO (por defecto) ----- */
	--k-bg: transparent;
	--k-title: #06304f;
	--kbo-hl1: #0a84c9;
	--kbo-hl2: #2fb4ff;
	--k-line: rgba(6, 48, 79, .22);
	--k-dvbg: linear-gradient(135deg, #13a5ee, #0a6cc0);
	--k-dvic: #fff;
	--k-card-bg: #fff;
	--k-card-bd: rgba(10, 132, 201, .14);
	--k-card-sh: 0 18px 40px -24px rgba(6, 70, 120, .35), 0 2px 6px rgba(6, 70, 120, .06);
	--k-card-blur: 0px;
	--k-card-bg-h: #fff;
	--k-card-bd-h: rgba(19, 165, 238, .6);
	--k-card-sh-h: 0 28px 55px -22px rgba(19, 140, 230, .55), 0 2px 6px rgba(6, 70, 120, .06);
	--k-it: #06304f;
	--k-it-h: #0a84c9;
	--k-id: #5a7388;
	--kbo-lc: rgba(10, 132, 201, .55);
	--k-glow: rgba(47, 180, 255, .30);
	--k-ground: rgba(6, 48, 79, .30);
	--kbo-amb1: rgba(47, 180, 255, .22);
	--kbo-amb2: rgba(10, 132, 201, .12);
	--kbo-grid: rgba(10, 132, 201, .08);

	position: relative;
	box-sizing: border-box;
	overflow: hidden;
	overflow: clip;
	color: var(--k-title);
	font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	background: var(--k-bg);
}

/* ----- Tema OSCURO ----- */
.kbo-sc.kbo-theme-dark {
	--k-bg: linear-gradient(165deg, #0a84c9 0%, #075c99 34%, #04304f 68%, #03182c 100%);
	--k-title: #fff;
	--kbo-hl1: #2fb4ff;
	--kbo-hl2: #7fe6ff;
	--k-line: rgba(255, 255, 255, .30);
	--k-card-bg: rgba(255, 255, 255, .08);
	--k-card-bd: rgba(255, 255, 255, .18);
	--k-card-sh: 0 18px 40px -22px rgba(0, 15, 40, .6), inset 0 1px 0 rgba(255, 255, 255, .16);
	--k-card-blur: 16px;
	--k-card-bg-h: rgba(255, 255, 255, .14);
	--k-card-bd-h: rgba(111, 227, 255, .65);
	--k-card-sh-h: 0 28px 55px -20px rgba(0, 190, 255, .5), inset 0 1px 0 rgba(255, 255, 255, .3);
	--k-it: #fff;
	--k-it-h: #9be9ff;
	--k-id: rgba(255, 255, 255, .74);
	--kbo-lc: rgba(130, 215, 255, .75);
	--k-glow: rgba(63, 193, 255, .45);
	--k-ground: rgba(0, 10, 30, .55);
	--kbo-amb1: rgba(63, 193, 255, .30);
	--kbo-amb2: rgba(0, 110, 255, .28);
	--kbo-grid: rgba(120, 200, 255, .16);
}

.kbo-sc *,
.kbo-sc *::before,
.kbo-sc *::after { box-sizing: border-box; }

.kbo-no-conn { --kbo-conn-d: none !important; }

@media (max-width: 1024px) {
	.kbo-sc {
		--kbo-areas: "c c" "l r";
		--kbo-cols: minmax(0, 1fr) minmax(0, 1fr);
		--kbo-conn-d: none;
		--kbo-l-dir: row;
		--kbo-l-ta: left;
		--kbo-cgap: 24px;
	}
}
@media (max-width: 767px) {
	.kbo-sc {
		--kbo-areas: "c" "l" "r";
		--kbo-cols: minmax(0, 1fr);
		--kbo-cgap: 0px;
	}
}

/* ---------- Fondo: luces + piso ---------- */
.kbo-sc::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: 0;
	background:
		radial-gradient(48% 52% at 82% 22%, var(--kbo-amb1), transparent 70%),
		radial-gradient(42% 46% at 8% 92%, var(--kbo-amb2), transparent 72%);
}
.kbo-has-amb::before { opacity: 1; }

.kbo-floor {
	display: none;
	position: absolute;
	left: -25%;
	right: -25%;
	bottom: 0;
	height: 48%;
	z-index: 0;
	pointer-events: none;
	background-image:
		linear-gradient(var(--kbo-grid) 1px, transparent 1px),
		linear-gradient(90deg, var(--kbo-grid) 1px, transparent 1px);
	background-size: 52px 52px;
	transform: perspective(520px) rotateX(64deg);
	transform-origin: 50% 100%;
	-webkit-mask-image: linear-gradient(to top, #000 10%, transparent 90%);
	mask-image: linear-gradient(to top, #000 10%, transparent 90%);
}
.kbo-has-grid .kbo-floor { display: block; }

/* OJO: sin z-index ni transform aquí, para que "fusionar fondo blanco" funcione */
.kbo-inner {
	position: relative;
	width: 100%;
	max-width: 1350px;
	margin-inline: auto;
	padding: 80px 40px;
}

/* ---------- Encabezado ---------- */
.kbo-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 22px;
	margin-bottom: 56px;
}

.kbo-title {
	margin: 0;
	padding: 0;
	max-width: 760px;
	color: var(--k-title);
	font-size: 40px;
	font-weight: 700;
	line-height: 1.12em;
	letter-spacing: -1px;
	text-wrap: balance;
}
.kbo-hl {
	background: linear-gradient(95deg, var(--kbo-hl1), var(--kbo-hl2));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.kbo-divider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	max-width: 100%;
}
.kbo-divider__line {
	display: block;
	flex: 0 1 auto;
	width: 160px;
	height: 2px;
	border-radius: 2px;
	background: var(--k-line);
}
.kbo-divider__line:first-child { -webkit-mask-image: linear-gradient(90deg, transparent, #000); mask-image: linear-gradient(90deg, transparent, #000); }
.kbo-divider__line:last-child { -webkit-mask-image: linear-gradient(270deg, transparent, #000); mask-image: linear-gradient(270deg, transparent, #000); }
.kbo-divider__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--k-dvbg);
	color: var(--k-dvic);
	font-size: 15px;
	line-height: 1;
	box-shadow: 0 10px 22px -8px rgba(19, 165, 238, .7), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.kbo-divider__icon i { font-size: inherit; line-height: 1; }
.kbo-divider__icon svg { width: 1em; height: 1em; fill: currentColor; }

/* ---------- Grid ---------- */
.kbo-grid {
	display: grid;
	grid-template-columns: var(--kbo-cols);
	grid-template-areas: var(--kbo-areas);
	align-items: center;
	gap: var(--kbo-rgap) var(--kbo-cgap);
}
.kbo-col {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--kbo-gap);
	min-width: 0;
}
.kbo-col--l { grid-area: l; }
.kbo-col--r { grid-area: r; }
.kbo-conn--l { grid-area: kl; }
.kbo-conn--r { grid-area: kr; }
.kbo-stage { grid-area: c; }

/* ---------- Imagen ---------- */
.kbo-stage {
	position: relative;
	justify-self: center;
	width: 340px;
	max-width: 100%;
	margin: 0;
}

.kbo-glow {
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 150%;
	height: 150%;
	transform: translate(-50%, -50%);
	background: radial-gradient(closest-side, var(--k-glow), transparent 72%);
	pointer-events: none;
	transition: transform .8s cubic-bezier(.22, 1, .36, 1);
}
.kbo-has-glow .kbo-glow { display: block; }
.kbo-has-glow .kbo-stage:hover .kbo-glow { transform: translate(-50%, -50%) scale(1.14); }

.kbo-ground {
	display: none;
	position: absolute;
	left: 50%;
	bottom: -3%;
	width: 78%;
	height: 13%;
	transform: translateX(-50%);
	background: radial-gradient(closest-side, var(--k-ground), transparent 75%);
	filter: blur(5px);
	pointer-events: none;
}
.kbo-has-ground .kbo-ground { display: block; }

.kbo-float-in { position: relative; }
.kbo-media { position: relative; }
.kbo-media img {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	transition: transform .6s cubic-bezier(.22, 1, .36, 1), filter .5s;
}

/* Fusiona el fondo blanco (solo tema claro). El blend va sobre la <img> y ningún
   ancestro crea contexto de apilamiento, por eso se anima con "top" y no con transform. */
.kbo-multiply.kbo-theme-light .kbo-media img { mix-blend-mode: multiply; }

.kbo-imh--zoom .kbo-stage:hover .kbo-media img { transform: scale(1.07); }
.kbo-imh--lift .kbo-stage:hover .kbo-media img { transform: translateY(-12px) scale(1.02); }
.kbo-imh--tilt .kbo-media img { transition: transform .18s ease-out, filter .5s; }
.kbo-imh--tilt .kbo-stage:hover .kbo-media img {
	transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(1.04);
}

.kbo-float .kbo-float-in { animation: kbo-float 6s ease-in-out infinite; }
@keyframes kbo-float {
	0%, 100% { top: 0; }
	50% { top: -12px; }
}

/* ---------- Tarjetas ---------- */
.kbo-it { position: relative; }

.kbo-item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 18px 20px;
	overflow: hidden;
	border: 1px solid var(--k-card-bd);
	border-radius: 22px;
	background-color: var(--k-card-bg);
	-webkit-backdrop-filter: blur(var(--k-card-blur));
	backdrop-filter: blur(var(--k-card-blur));
	box-shadow: var(--k-card-sh);
	transition: transform .5s cubic-bezier(.22, 1, .36, 1), box-shadow .5s, background-color .4s, border-color .4s;
}
.kbo-item::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -60%;
	width: 40%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
	transform: skewX(-18deg);
	opacity: 0;
	pointer-events: none;
}
.kbo-theme-dark .kbo-item::after { background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .22), transparent); }
.kbo-col--l .kbo-item { flex-direction: var(--kbo-l-dir); text-align: var(--kbo-l-ta); }
.kbo-col--r .kbo-item { flex-direction: row; text-align: left; }

.kbo-item__txt { flex: 1 1 auto; min-width: 0; }

.kbo-item__title {
	margin: 0 0 5px;
	padding: 0;
	color: var(--k-it);
	font-size: 19px;
	font-weight: 600;
	letter-spacing: -.2px;
	line-height: 1.25;
	transition: color .3s;
}
.kbo-item__desc {
	margin: 0;
	color: var(--k-id);
	font-size: 14.5px;
	line-height: 1.6em;
	transition: color .3s;
}

.kbo-item__icon {
	position: relative;
	flex: none;
	display: grid;
	place-items: center;
	isolation: isolate;
	width: 62px;
	height: 62px;
	border-radius: 50%;
	background-color: #0a84c9;
	--kbo-ic: #0a84c9;
	color: #fff;
	font-size: 25px;
	line-height: 1;
	box-shadow: 0 12px 26px -8px var(--kbo-ic), inset 0 1px 0 rgba(255, 255, 255, .55);
	transition: transform .6s cubic-bezier(.34, 1.56, .64, 1), box-shadow .4s;
}
.kbo-item__icon::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(145deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 55%);
	z-index: -1;
}
.kbo-item__icon i { font-size: inherit; line-height: 1; }
.kbo-item__icon svg { width: 1em; height: 1em; fill: currentColor; }

/* Hover tarjetas */
.kbo-item:hover .kbo-item__title { color: var(--k-it-h); }
.kbo-ihv--lift .kbo-item:hover { transform: translateY(-6px); }
.kbo-ihv--card .kbo-item:hover {
	transform: translateY(-6px);
	background-color: var(--k-card-bg-h);
	border-color: var(--k-card-bd-h);
	box-shadow: var(--k-card-sh-h);
}
.kbo-ihv--card .kbo-item:hover::after {
	opacity: 1;
	left: 130%;
	transition: left .9s cubic-bezier(.22, 1, .36, 1), opacity .2s;
}
.kbo-ihv--slide .kbo-col--l .kbo-item:hover { transform: translateX(10px); }
.kbo-ihv--slide .kbo-col--r .kbo-item:hover { transform: translateX(-10px); }

/* Hover iconos */
.kbo-icn--spin .kbo-item:hover .kbo-item__icon { transform: rotate(360deg) scale(1.08); }
.kbo-icn--pop .kbo-item:hover .kbo-item__icon { transform: scale(1.16) rotate(-6deg); }
.kbo-icn--pulse .kbo-item:hover .kbo-item__icon::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--kbo-ic);
	z-index: -2;
	animation: kbo-ping 1.1s ease-out infinite;
}
@keyframes kbo-ping {
	0% { transform: scale(1); opacity: .6; }
	100% { transform: scale(1.8); opacity: 0; }
}

/* ---------- Conectores ---------- */
.kbo-conn {
	display: var(--kbo-conn-d);
	position: relative;
	width: var(--kbo-cw);
	height: 2px;
	align-self: center;
	pointer-events: none;
}
.kbo-node {
	position: absolute;
	top: 50%;
	width: var(--kbo-nl);
	height: 0;
	border-top: var(--kbo-lw) var(--kbo-ls) var(--kbo-lc);
	transform: translateY(-50%);
}
.kbo-node::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 10px;
	height: 10px;
	border: var(--kbo-lw) solid var(--kbo-lc);
	border-radius: 50%;
	box-shadow: 0 0 12px var(--kbo-lc);
	transform: translateY(-50%);
}
.kbo-conn--l .kbo-node { left: var(--kbo-vx); }
.kbo-conn--l .kbo-node::after { right: -10px; }
.kbo-conn--r .kbo-node { right: var(--kbo-vx); }
.kbo-conn--r .kbo-node::after { left: -10px; }

.kbo-arm {
	display: var(--kbo-conn-d);
	position: absolute;
	top: 50%;
	width: var(--kbo-vx);
	height: 0;
	border-top: var(--kbo-lw) var(--kbo-ls) var(--kbo-lc);
	transform: translateY(-50%);
	pointer-events: none;
}
.kbo-arm::before {
	content: "";
	position: absolute;
	top: 50%;
	width: 10px;
	height: 12px;
	background: var(--kbo-lc);
	transform: translateY(-50%);
}
.kbo-col--l .kbo-arm { right: calc(var(--kbo-vx) * -1); }
.kbo-col--l .kbo-arm::before { left: -2px; clip-path: polygon(0 50%, 100% 0, 100% 100%); }
.kbo-col--r .kbo-arm { left: calc(var(--kbo-vx) * -1); }
.kbo-col--r .kbo-arm::before { right: -2px; clip-path: polygon(100% 50%, 0 0, 0 100%); }

.kbo-it::before {
	content: "";
	display: var(--kbo-conn-d);
	position: absolute;
	top: calc(var(--kbo-gap) / -2);
	bottom: calc(var(--kbo-gap) / -2);
	width: 0;
	border-left: var(--kbo-lw) var(--kbo-ls) var(--kbo-lc);
	pointer-events: none;
}
.kbo-it:first-child::before { top: 50%; }
.kbo-it:last-child::before { bottom: 50%; }
.kbo-col--l .kbo-it::before { right: calc(var(--kbo-vx) * -1); }
.kbo-col--r .kbo-it::before { left: calc(var(--kbo-vx) * -1); }

/* ---------- Botón ---------- */
.kbo-cta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 52px;
}

.kbo-btn {
	--kbo-b1a: #13a5ee;
	--kbo-b1b: #0a6cc0;
	--kbo-b1g: rgba(19, 165, 238, .55);
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	overflow: hidden;
	isolation: isolate;
	padding: 16px 30px;
	border: 0;
	border-radius: 16px;
	color: #fff;
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	background: linear-gradient(135deg, var(--kbo-b1a), var(--kbo-b1b));
	box-shadow: 0 16px 34px -14px var(--kbo-b1g), inset 0 1px 0 rgba(255, 255, 255, .35);
	transition: transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .45s, color .3s;
}
.kbo-btn::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -70%;
	width: 50%;
	z-index: -1;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
	transform: skewX(-20deg);
}
.kbo-btn:hover,
.kbo-btn:focus-visible {
	color: #fff;
	text-decoration: none;
	transform: translateY(-4px);
	box-shadow: 0 24px 44px -14px var(--kbo-b1g), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.kbo-btn:hover::before { left: 130%; transition: left .8s cubic-bezier(.22, 1, .36, 1); }
.kbo-btn:focus-visible { outline: 2px solid #2fb4ff; outline-offset: 3px; }
.kbo-btn__icon { display: inline-flex; font-size: 1.05em; line-height: 1; transition: transform .4s cubic-bezier(.22, 1, .36, 1); }
.kbo-btn__icon svg { width: 1em; height: 1em; fill: currentColor; }
.kbo-btn:hover .kbo-btn__icon { transform: rotate(-12deg) scale(1.12); }

/* ---------- Animación de entrada ---------- */
.kbo-a {
	transition:
		opacity var(--kbo-dur) cubic-bezier(.22, 1, .36, 1) calc(var(--i, 0) * var(--kbo-stagger)),
		transform var(--kbo-dur) cubic-bezier(.22, 1, .36, 1) calc(var(--i, 0) * var(--kbo-stagger));
}
.kbo-sc.is-armed:not(.is-in) .kbo-a {
	opacity: 0;
	transform: var(--kbo-t, none);
}
.kbo-anim--slide .kbo-a--l { --kbo-t: translateX(calc(var(--kbo-dist) * -1)); }
.kbo-anim--slide .kbo-a--r { --kbo-t: translateX(var(--kbo-dist)); }
.kbo-anim--slide .kbo-a--c { --kbo-t: scale(.82); }
.kbo-anim--slide .kbo-a--u { --kbo-t: translateY(calc(var(--kbo-dist) * .6)); }
.kbo-anim--slide .kbo-a--k { --kbo-t: scale(.4); }
.kbo-anim--up .kbo-a { --kbo-t: translateY(var(--kbo-dist)); }
.kbo-anim--zoom .kbo-a { --kbo-t: scale(.85); }

/* ---------- Accesibilidad ---------- */
@media (prefers-reduced-motion: reduce) {
	.kbo-sc .kbo-a,
	.kbo-sc .kbo-media img,
	.kbo-sc .kbo-item,
	.kbo-sc .kbo-item__icon,
	.kbo-sc .kbo-btn { transition-duration: .01ms !important; transition-delay: 0s !important; }
	.kbo-float .kbo-float-in,
	.kbo-icn--pulse .kbo-item:hover .kbo-item__icon::after { animation: none; }
}