/*
 * Dra. Adriana - WhatsApp Flutuante
 * Visual e animação reproduzidos da landing page atual.
 */

:root {
	--dra-wa: #25D366;
	--dra-wa-ease: cubic-bezier(.22,.61,.36,1);
}

.wa-float {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 80;

	width: 62px;
	height: 62px;

	border-radius: 50%;
	background: var(--dra-wa);
	color: #fff;

	display: grid;
	place-items: center;

	box-shadow: 0 14px 30px rgba(37, 211, 102, .45);

	transition:
		transform .35s var(--dra-wa-ease),
		box-shadow .35s;

	text-decoration: none;
}

.wa-float:hover,
.wa-float:focus-visible {
	transform: scale(1.08) translateY(-2px);
	box-shadow: 0 18px 38px rgba(37, 211, 102, .55);
	color: #fff;
}

.wa-float:focus-visible {
	outline: 3px solid rgba(37, 211, 102, .30);
	outline-offset: 4px;
}

.wa-float svg {
	display: block;
	width: 30px;
	height: 30px;
	max-width: 30px;
	color: #fff;
	position: relative;
	z-index: 2;
}

.wa-pulse {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid var(--dra-wa);
	animation: dra-wa-pulse 2.4s ease-out infinite;
	pointer-events: none;
}

@keyframes dra-wa-pulse {
	0% {
		transform: scale(1);
		opacity: .7;
	}

	100% {
		transform: scale(1.7);
		opacity: 0;
	}
}

@media (max-width: 720px) {
	.wa-float {
		right: 18px;
		bottom: 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wa-float,
	.wa-pulse {
		animation: none !important;
		transition-duration: .001ms !important;
	}
}