.floating-button{
  position:fixed;
  bottom:max(14px,env(safe-area-inset-bottom));
  width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;text-decoration:none;
  box-shadow:0 10px 24px rgba(0,0,0,.25);
  z-index:1100;
  transition:transform .15s ease,filter .15s ease;
}
.floating-button i{font-size:clamp(1.5rem,2.2vw,2rem);line-height:1;display:inline-flex;align-items:center;justify-content:center}
.floating-button:hover{filter:brightness(1.05);transform:translateY(-1px)}
.whatsapp-btn{left:14px;background:var(--uo-whatsapp)}
.call-btn{right:14px;background:var(--uo-primary)}

.floating-button.attn{animation:heartbeat 2.1s ease-in-out infinite}
.whatsapp-btn.attn{animation-delay:.3s}
.call-btn.attn{animation-delay:.9s}
.floating-button.attn::after{
  content:"";position:absolute;inset:-6px;border-radius:999px;z-index:-1;
  box-shadow:0 0 0 0 rgba(13,110,253,.45);
  animation:pulseRing 2.1s ease-out infinite;
}
.whatsapp-btn.attn::after{box-shadow:0 0 0 0 rgba(37,211,102,.45)}

@keyframes heartbeat{0%,40%,100%{transform:scale(1)}10%,30%{transform:scale(1.12)}20%{transform:scale(1)}}
@keyframes pulseRing{0%{box-shadow:0 0 0 0 rgba(0,0,0,.25)}70%{box-shadow:0 0 0 16px rgba(0,0,0,0)}100%{box-shadow:0 0 0 0 rgba(0,0,0,0)}}

@media (max-width:767.98px){
  .floating-button{width:48px;height:48px;bottom:max(10px,env(safe-area-inset-bottom))}
  .whatsapp-btn{left:10px}
  .call-btn{right:10px}
  .floating-button i{font-size:1.8rem}
}
@media (prefers-reduced-motion:reduce){
  .floating-button.attn,.floating-button.attn::after{animation:none!important}
}