.floating-whatsapp {
  --floating-whatsapp-size: 3.65rem;
  --floating-whatsapp-edge: clamp(0.9rem, 3vw, 1.4rem);
  --floating-whatsapp-gap: 0.65rem;
  position: fixed;
  right: calc(var(--floating-whatsapp-edge) + var(--floating-whatsapp-size) + var(--floating-whatsapp-gap));
  bottom: var(--floating-whatsapp-edge);
  z-index: 80;
  display: grid;
  width: var(--floating-whatsapp-size);
  height: var(--floating-whatsapp-size);
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.68);
  border-radius: 50%;
  background: #25d366;
  box-shadow: 0 18px 42px rgba(24, 43, 58, 0.22);
  color: #ffffff;
  text-decoration: none;
  transition: background 180ms ease, box-shadow 180ms ease, opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
}

.floating-whatsapp:hover,
.floating-whatsapp:focus-visible {
  background: #128c58;
  box-shadow: 0 0 0 4px rgba(37, 211, 102, 0.2), 0 18px 42px rgba(24, 43, 58, 0.24);
  outline: none;
  transform: translateY(-2px);
}

.floating-whatsapp img {
  display: block;
  width: 1.9rem;
  height: 1.9rem;
}

.floating-whatsapp__label {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.floating-whatsapp.is-near-footer {
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 0.45rem, 0) scale(0.94);
  visibility: hidden;
}

@media (max-width: 640px) {
  .floating-whatsapp {
    --floating-whatsapp-size: 3.35rem;
    --floating-whatsapp-gap: 0.55rem;
  }

  .floating-whatsapp img {
    width: 1.75rem;
    height: 1.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .floating-whatsapp {
    transition: none;
  }
}