/* Clavi – mascota flotante */
.clavi {
	--clavi-blue: #1d5fae;
	--clavi-orange: #f5a01a;
	--clavi-h: 190px;
	position: fixed;
	left: 18px;
	bottom: 12px;
	z-index: 9990;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	pointer-events: none;
	font-family: inherit;
}
.clavi * { box-sizing: border-box; }
.clavi button { font: inherit; }

/* Entrada: sube desde abajo con rebote */
.clavi.is-hidden .clavi__body,
.clavi.is-hidden .clavi__bubble { opacity: 0; }
.clavi.is-entering .clavi__body { animation: clavi-enter 900ms cubic-bezier(.2, 1.4, .4, 1) both; }

/* ---------- Burbuja ---------- */
.clavi__bubble {
	position: relative;
	pointer-events: auto;
	width: 240px;
	max-width: calc(100vw - 24px);
	margin: 0 0 6px calc(var(--clavi-h) * .2);
	padding: 14px 30px 14px 16px;
	background: #fff;
	color: #1f2a3c;
	border: 3px solid var(--clavi-blue);
	border-radius: 18px;
	box-shadow: 0 10px 28px rgba(16, 45, 90, .22);
	font-size: 14.5px;
	line-height: 1.4;
	transform-origin: 15% 100%;
	transition: opacity .3s, transform .35s cubic-bezier(.2, 1.4, .4, 1);
}
.clavi__bubble::after {
	content: "";
	position: absolute;
	left: 34px;
	bottom: -13px;
	width: 20px;
	height: 20px;
	background: #fff;
	border-right: 3px solid var(--clavi-blue);
	border-bottom: 3px solid var(--clavi-blue);
	transform: rotate(45deg);
	border-bottom-right-radius: 4px;
}
.clavi.bubble-off .clavi__bubble {
	opacity: 0;
	transform: scale(.6) translateY(20px);
	pointer-events: none;
}
.clavi__msg { display: none; }
.clavi__msg.is-active { display: block; animation: clavi-pop .35s ease both; }
.clavi__msg p { margin: 0; }
.clavi__msg strong { color: var(--clavi-blue); }
.clavi__cta {
	display: inline-block;
	margin-top: 9px;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--clavi-orange);
	color: #fff !important;
	font-weight: 700;
	font-size: 13.5px;
	text-decoration: none !important;
	transition: background .2s, transform .2s;
}
.clavi__cta:hover,
.clavi__cta:focus-visible { background: var(--clavi-blue); transform: translateY(-1px); }
.clavi__close {
	position: absolute;
	top: 4px;
	right: 6px;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #7a8699;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}
.clavi__close:hover { background: #eef2f8; color: var(--clavi-blue); }

/* ---------- Mascota ---------- */
.clavi__body {
	position: relative;
	pointer-events: auto;
	display: block;
	width: calc(var(--clavi-h) * .64);
	height: var(--clavi-h);
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.clavi__body:focus-visible { outline: 3px dashed var(--clavi-orange); outline-offset: 4px; border-radius: 12px; }
.clavi__shadow {
	position: absolute;
	left: 18%;
	right: 18%;
	bottom: 0;
	height: 12px;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(10, 30, 60, .35), transparent);
	animation: clavi-shadow 3.2s ease-in-out infinite;
}
.clavi__sprite {
	position: absolute;
	inset: 0 0 5px 0;
	transform-origin: 50% 100%;
	animation: clavi-float 3.2s ease-in-out infinite;
}
.clavi__pose {
	position: absolute;
	left: 50%;
	bottom: 0;
	height: 100%;
	width: auto;
	max-width: none;
	/* scaleX(-1): espejado para que mire/señale hacia el contenido desde la izquierda */
	transform: translateX(-50%) scale(-.85, .85);
	opacity: 0;
	transition: opacity .35s ease, transform .45s cubic-bezier(.2, 1.5, .4, 1);
	user-select: none;
	filter: drop-shadow(0 4px 6px rgba(10, 30, 60, .18));
}
.clavi__pose.is-active { opacity: 1; transform: translateX(-50%) scale(-1, 1); }

/* Hover / click: saltito */
.clavi__body:hover .clavi__sprite { animation: clavi-wiggle .7s ease-in-out infinite; }
.clavi.is-hopping .clavi__sprite { animation: clavi-hop .55s cubic-bezier(.3, 1.6, .5, 1); }

/* ---------- Botón para volver a mostrar ---------- */
.clavi__reopen {
	display: none;
	pointer-events: auto;
	width: 58px;
	height: 58px;
	padding: 4px 0 0;
	border: 3px solid var(--clavi-orange);
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 6px 16px rgba(16, 45, 90, .25);
	overflow: hidden;
	cursor: pointer;
	animation: clavi-peek 4s ease-in-out infinite;
}
.clavi__reopen img { width: 40px; height: auto; display: block; margin: 0 auto; }
.clavi.is-minimized .clavi__bubble,
.clavi.is-minimized .clavi__body { display: none; }
.clavi.is-minimized .clavi__reopen { display: block; }

/* ---------- Keyframes ---------- */
@keyframes clavi-float {
	0%, 100% { transform: translateY(0) rotate(-2deg); }
	50%      { transform: translateY(-10px) rotate(2deg); }
}
@keyframes clavi-shadow {
	0%, 100% { transform: scaleX(1);   opacity: 1; }
	50%      { transform: scaleX(.75); opacity: .6; }
}
@keyframes clavi-wiggle {
	0%, 100% { transform: translateY(-6px) rotate(0); }
	25%      { transform: translateY(-8px) rotate(-5deg); }
	75%      { transform: translateY(-8px) rotate(5deg); }
}
@keyframes clavi-hop {
	0%   { transform: translateY(0) scale(1, 1); }
	25%  { transform: translateY(2px) scale(1.08, .9); }
	55%  { transform: translateY(-28px) scale(.95, 1.06); }
	80%  { transform: translateY(0) scale(1.05, .95); }
	100% { transform: translateY(0) scale(1, 1); }
}
@keyframes clavi-enter {
	0%   { transform: translateY(120%) rotate(-12deg); opacity: 0; }
	100% { transform: translateY(0) rotate(0); opacity: 1; }
}
@keyframes clavi-pop {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}
@keyframes clavi-peek {
	0%, 80%, 100% { transform: rotate(0); }
	85% { transform: rotate(-12deg); }
	90% { transform: rotate(10deg); }
	95% { transform: rotate(-6deg); }
}

/* ---------- Responsive ---------- */
@media (max-width: 600px) {
	.clavi { --clavi-h: 118px; left: 8px; bottom: 6px; }
	.clavi__bubble { width: 210px; font-size: 13px; padding: 10px 28px 10px 12px; margin-left: 4px; }
	.clavi__cta { font-size: 12.5px; padding: 5px 10px; margin-top: 7px; }
}

@media (prefers-reduced-motion: reduce) {
	.clavi *,
	.clavi *::after { animation: none !important; transition: opacity .2s !important; }
}