.arcos-whatsapp-float {
  --arcos-whatsapp-green: #13553D;
  --arcos-whatsapp-cream: #FFFDE8;
  --arcos-whatsapp-offset: 1rem;
  position: fixed;
  right: max(var(--arcos-whatsapp-offset), calc(env(safe-area-inset-right, 0px) + var(--arcos-whatsapp-offset)));
  bottom: max(var(--arcos-whatsapp-offset), calc(env(safe-area-inset-bottom, 0px) + var(--arcos-whatsapp-offset)));
  z-index: 980;
  display: grid;
  width: 66px;
  height: 66px;
  place-items: center;
  border: 1px solid rgba(255, 253, 232, .5);
  border-radius: 50%;
  background: var(--arcos-whatsapp-green);
  color: var(--arcos-whatsapp-cream);
  box-shadow: 0 18px 38px rgba(10, 28, 26, .3), 0 0 0 5px rgba(19, 85, 61, .16);
  isolation: isolate;
  text-decoration: none;
  transform: translateZ(0);
  transition: transform .22s cubic-bezier(.22, 1, .36, 1), box-shadow .22s cubic-bezier(.22, 1, .36, 1), background .22s cubic-bezier(.22, 1, .36, 1);
}

.arcos-whatsapp-float::before,
.arcos-whatsapp-float::after {
  position: absolute;
  inset: -9px;
  z-index: -1;
  border: 1px solid rgba(19, 85, 61, .54);
  border-radius: inherit;
  content: '';
  pointer-events: none;
  animation: arcos-whatsapp-pulse 2.8s ease-out infinite;
}

.arcos-whatsapp-float::after {
  inset: -17px;
  border-color: rgba(19, 85, 61, .28);
  animation-delay: 1.4s;
}

.arcos-whatsapp-float__icon {
  width: 33px;
  height: 33px;
  fill: currentColor;
}

.arcos-whatsapp-float:hover {
  background: #0F4632;
  box-shadow: 0 22px 44px rgba(10, 28, 26, .38), 0 0 0 7px rgba(19, 85, 61, .2);
  transform: translateY(-3px) scale(1.04);
}

.arcos-whatsapp-float:active {
  transform: translateY(-1px) scale(.98);
}

.arcos-whatsapp-float:focus-visible {
  outline: 3px solid var(--arcos-whatsapp-cream);
  outline-offset: 4px;
  box-shadow: 0 0 0 7px rgba(10, 28, 26, .72), 0 22px 44px rgba(10, 28, 26, .38);
}

@keyframes arcos-whatsapp-pulse {
  0%, 20% {
    opacity: .65;
    transform: scale(.86);
  }

  72%, 100% {
    opacity: 0;
    transform: scale(1.24);
  }
}

@media (max-width: 680px) {
  .arcos-whatsapp-float {
    --arcos-whatsapp-offset: .875rem;
    width: 58px;
    height: 58px;
  }

  .arcos-whatsapp-float__icon {
    width: 29px;
    height: 29px;
  }

  .arcos-whatsapp-float::before {
    inset: -7px;
  }

  .arcos-whatsapp-float::after {
    inset: -13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .arcos-whatsapp-float,
  .arcos-whatsapp-float::before,
  .arcos-whatsapp-float::after {
    animation: none !important;
    transition: none !important;
  }

  .arcos-whatsapp-float::before,
  .arcos-whatsapp-float::after {
    opacity: .34;
    transform: none;
  }
}