/* ==========================================================================
   Botón flotante de WhatsApp
   ========================================================================== */

.vts-wa {
	position: fixed;
	bottom: clamp(20px, 3vw, 32px);
	right: clamp(20px, 3vw, 32px);
	z-index: 9999;
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	cursor: pointer;
}

/* ── Ícono ────────────────────────────────────────────────────────────────── */

.vts-wa__icon {
	width: clamp(52px, 5vw, 64px);
	height: clamp(52px, 5vw, 64px);
	flex-shrink: 0;
	border-radius: 50%;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	animation: vts-wa-pulse 2.8s ease-in-out infinite;
}

@keyframes vts-wa-pulse {
	0%, 100% { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25), 0 0 0 0 rgba(37, 211, 102, 0.45); }
	50%       { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25), 0 0 0 10px rgba(37, 211, 102, 0); }
}

/* ── Tooltip ──────────────────────────────────────────────────────────────── */

.vts-wa__tooltip {
	background: #25D366;
	color: #fff;
	font-family: 'Inter Tight', sans-serif;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	padding: 6px 14px;
	border-radius: 4px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
	opacity: 0;
	transform: translateX(8px);
	transition: opacity 0.2s ease, transform 0.2s ease;
	pointer-events: none;
	/* Orden: tooltip a la izquierda del ícono — flex en fila inversa */
	order: -1;
}

.vts-wa:hover .vts-wa__tooltip,
.vts-wa:focus-visible .vts-wa__tooltip {
	opacity: 1;
	transform: translateX(0);
}

/* ── Hover en el ícono ────────────────────────────────────────────────────── */

.vts-wa:hover .vts-wa__icon,
.vts-wa:focus-visible .vts-wa__icon {
	transform: scale(1.1);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
	animation: none;
}

/* ── Reduced motion ───────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.vts-wa__icon {
		animation: none;
	}
}