/* Botón flotante de WhatsApp */
.wa-float{position:fixed;z-index:9000;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));display:inline-flex;align-items:center;gap:12px;height:64px;padding:0 24px 0 8px;border-radius:999px;background:linear-gradient(135deg,#2be573 0%,#25d366 45%,#12a150 100%);color:#fff;font-size:17px;font-weight:800;letter-spacing:-.01em;text-decoration:none;box-shadow:0 14px 36px rgba(18,161,80,.5),0 4px 12px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.4);transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s,padding .35s cubic-bezier(.2,.7,.2,1),gap .35s;-webkit-tap-highlight-color:transparent}
.wa-float .wa-icon{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#fff;color:#12a150;box-shadow:0 4px 12px rgba(0,60,20,.25)}
.wa-float .wa-icon svg{width:30px;height:30px;fill:currentColor}
.wa-float .wa-label{white-space:nowrap;max-width:200px;overflow:hidden;transition:max-width .35s cubic-bezier(.2,.7,.2,1),opacity .25s}
.wa-float::before,.wa-float::after{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid rgba(37,211,102,.55);opacity:0;pointer-events:none}
.wa-float:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 20px 46px rgba(18,161,80,.6),0 4px 12px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.4)}
.wa-float:active{transform:scale(.97)}
.wa-float:focus-visible{outline:3px solid #1d1d1f;outline-offset:4px}
/* Compacto al hacer scroll: solo el círculo */
.wa-float.is-compact{gap:0;padding:0 8px}
.wa-float.is-compact .wa-label{max-width:0;opacity:0}
.wa-float.is-compact:hover,.wa-float.is-compact:focus-visible{gap:12px;padding:0 24px 0 8px}
.wa-float.is-compact:hover .wa-label,.wa-float.is-compact:focus-visible .wa-label{max-width:200px;opacity:1}
@media(prefers-reduced-motion:no-preference){
  .wa-float{animation:wa-in .7s 3s cubic-bezier(.2,.7,.2,1) both}
  .wa-float::before{animation:wa-ring 2.6s 3.6s ease-out infinite}
  .wa-float::after{animation:wa-ring 2.6s 4.9s ease-out infinite}
  @keyframes wa-in{from{opacity:0;transform:translateY(30px) scale(.8)}to{opacity:1;transform:none}}
  @keyframes wa-ring{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(1.5,1.9)}}
}
@media(max-width:760px){
  .wa-float{height:60px;font-size:16px;padding:0 20px 0 6px;right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom))}
  .wa-float .wa-icon{width:48px;height:48px}
  .wa-float.is-compact{padding:0 6px}
}
body.qm-loading .wa-float{visibility:hidden}
