/* WhatsApp: icon-only floating button */
.wa{position:fixed;z-index:100;right:calc(20px + env(safe-area-inset-right,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px));
  width:64px;height:64px;border-radius:50%;background:var(--wa);color:#fff;display:grid;place-items:center;text-decoration:none;
  border:3px solid #fff;box-shadow:0 10px 28px rgba(37,211,102,.45),0 2px 6px rgba(0,0,0,.2);transition:box-shadow .3s}
.wa svg{width:32px;height:32px;fill:currentColor;transform-origin:50% 60%}
.wa::before{content:"";position:absolute;inset:-3px;border-radius:50%;border:3px solid var(--wa);opacity:0;pointer-events:none}
/* speech bubble that pops out on hover */
.wa .bubble{position:absolute;right:calc(100% + 14px);top:50%;white-space:nowrap;pointer-events:none;
  background:#fff;color:var(--ink);font-weight:700;font-size:14px;padding:10px 16px;border-radius:18px 18px 4px 18px;
  box-shadow:0 8px 22px rgba(0,0,0,.14);opacity:0;transform:translate(12px,-50%) scale(.6);transform-origin:right center;
  transition:opacity .2s,transform .35s cubic-bezier(.3,1.6,.5,1)}
.wa .bubble::after{content:"";position:absolute;right:-6px;bottom:6px;width:12px;height:12px;background:#fff;transform:rotate(45deg);border-radius:2px}
.wa .heart{position:absolute;left:50%;top:0;font-size:14px;opacity:0;pointer-events:none}
.wa:hover .bubble,.wa:focus-visible .bubble{opacity:1;transform:translate(0,-50%) scale(1)}
.wa:hover,.wa:focus-visible{box-shadow:0 14px 34px rgba(37,211,102,.6),0 2px 6px rgba(0,0,0,.2)}
@keyframes pulse{0%{opacity:.8}100%{opacity:0;transform:scale(1.35)}}
@keyframes jelly{0%{transform:scale(1)}25%{transform:scale(1.18,.86) translateY(2px)}45%{transform:scale(.9,1.14) translateY(-8px)}65%{transform:scale(1.06,.96) translateY(-4px)}100%{transform:scale(1.08) translateY(-4px)}}
@keyframes ring{0%,100%{transform:rotate(0)}15%{transform:rotate(-18deg)}30%{transform:rotate(15deg)}45%{transform:rotate(-12deg)}60%{transform:rotate(9deg)}75%{transform:rotate(-4deg)}}
@keyframes float{0%{opacity:0;transform:translate(var(--x,-50%),0) scale(.4)}20%{opacity:1}100%{opacity:0;transform:translate(var(--x,-50%),-58px) scale(1.1) rotate(var(--rot,0deg))}}
@media (prefers-reduced-motion:no-preference){
  .wa::before{animation:pulse 2.4s ease-out infinite}
  .wa:hover,.wa:focus-visible{animation:jelly .7s cubic-bezier(.3,1.5,.5,1) both}
  .wa:hover svg,.wa:focus-visible svg{animation:ring .9s ease-in-out .15s 2}
  .wa:hover .heart,.wa:focus-visible .heart{animation:float 1.2s ease-out forwards}
  .wa .h2{animation-delay:.18s!important}.wa .h3{animation-delay:.36s!important}
  .wa .h1{--x:-160%;--rot:-15deg}.wa .h2{--x:-50%;--rot:5deg}.wa .h3{--x:70%;--rot:18deg}
}
@media (hover:none){.wa .bubble{display:none}}

@media (max-width:560px){
  .wa{width:60px;height:60px}
}