/* WhatsApp Flotante */
.waf {
	--waf-color: #25D366;
	--waf-size: 60px;
	--waf-x: 24px;
	--waf-y: 24px;
	--waf-delay: 1s;
	position: fixed;
	bottom: calc(var(--waf-y) + env(safe-area-inset-bottom, 0px));
	z-index: 99990;
	display: flex;
	align-items: center;
	gap: 12px;
	transform-origin: 50% 100%;
	animation: waf-inflate .75s cubic-bezier(.22, 1, .36, 1) var(--waf-delay) both;
}
.waf--right { right: var(--waf-x); flex-direction: row; }
.waf--left  { left: var(--waf-x); flex-direction: row-reverse; }

/* ---------- Botón ---------- */
.waf__btn {
	position: relative;
	display: grid;
	place-items: center;
	width: var(--waf-size);
	height: var(--waf-size);
	border-radius: 50%;
	background: var(--waf-color);
	color: #fff;
	text-decoration: none;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .22), 0 2px 4px rgba(0, 0, 0, .12);
	transition: transform .25s ease, box-shadow .25s ease;
	-webkit-tap-highlight-color: transparent;
}
.waf__btn:hover,
.waf__btn:focus-visible {
	color: #fff;
	transform: scale(1.08);
	box-shadow: 0 10px 26px rgba(0, 0, 0, .26), 0 3px 6px rgba(0, 0, 0, .14);
}
.waf__btn:focus-visible { outline: 3px solid rgba(0, 0, 0, .35); outline-offset: 3px; }

.waf__icon {
	position: relative;
	z-index: 1;
	width: 56%;
	height: 56%;
	display: block;
}

/* Onda que se expande en cada rebote */
.waf__ring {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--waf-color);
	opacity: 0;
	pointer-events: none;
}

/* ---------- Globito de texto ---------- */
.waf__tip {
	position: relative;
	max-width: 220px;
	padding: 8px 14px;
	border-radius: 18px;
	background: #fff;
	color: #1f2933;
	font: 500 14px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	white-space: nowrap;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .15);
	opacity: 0;
	transform: translateX(8px) scale(.9);
	transition: opacity .3s ease, transform .3s cubic-bezier(.22, 1, .36, 1);
	pointer-events: none;
}
.waf--left .waf__tip { transform: translateX(-8px) scale(.9); }
.waf__tip::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 10px;
	height: 10px;
	background: inherit;
	transform: translateY(-50%) rotate(45deg);
}
.waf--right .waf__tip::after { right: -4px; }
.waf--left .waf__tip::after  { left: -4px; }

.waf.is-tip .waf__tip,
.waf:hover .waf__tip {
	opacity: 1;
	transform: none;
}

/* ---------- Animaciones ---------- */

/* Entrada: burbuja que se infla */
@keyframes waf-inflate {
	0%   { opacity: 0; transform: scale(0); }
	45%  { opacity: 1; transform: scale(1.16, 1.12); }
	65%  { transform: scale(.92, .95); }
	82%  { transform: scale(1.04); }
	100% { opacity: 1; transform: scale(1); }
}

/* Rebote periódico con "squash & stretch" */
@keyframes waf-bounce {
	0%   { transform: translateY(0) scale(1); }
	12%  { transform: translateY(0) scale(1.08, .9); }
	32%  { transform: translateY(-18px) scale(.94, 1.06); }
	50%  { transform: translateY(0) scale(1.08, .92); }
	64%  { transform: translateY(-7px) scale(.98, 1.02); }
	80%  { transform: translateY(0) scale(1.02, .98); }
	100% { transform: translateY(0) scale(1); }
}
@keyframes waf-ring {
	0%   { opacity: .55; transform: scale(1); }
	100% { opacity: 0;   transform: scale(1.75); }
}

.waf.is-bounce .waf__btn  { animation: waf-bounce .9s cubic-bezier(.28, .84, .42, 1); }
.waf.is-bounce .waf__ring { animation: waf-ring 1.1s ease-out .35s; }

@media (max-width: 767px) {
	.waf { gap: 8px; }
	.waf__tip { font-size: 13px; max-width: 160px; white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
	.waf { animation: none; }
	.waf.is-bounce .waf__btn,
	.waf.is-bounce .waf__ring { animation: none; }
	.waf__btn, .waf__tip { transition: none; }
}

@media print {
	.waf { display: none !important; }
}