/* ============ PULSANTE WHATSAPP FLOTTANTE ============
   Forma presa dal Loggiato (.btn-square): quadrato morbido da 48px, non il
   tondo che fanno tutti — e stesso glifo. I colori invece sono quelli di
   Villa Azalea: al Loggiato il bottone vive nell'header sopra una fotografia
   e può permettersi il contorno bianco su fondo trasparente, qui invece
   scorre sopra crema, bianco, foto e banda scura, e un contorno chiaro su
   crema sparirebbe. Quindi fondo pieno petrolio e icona ghiaccio, che si
   invertono alla pressione.

   Comportamento preso da rossosera.com su mobile (referenza indicata da
   Paolo): non c'è all'inizio, poi entra salendo di 20px mentre sfuma e si
   incolla al bordo. Stessi tempi della referenza: .4s.

   Sta sotto --z-overlay di proposito: quando si apre il menu a tutto
   schermo il pulsante NON deve galleggiarci sopra. */
.wa-float{
  position:fixed; right:24px; bottom:24px; z-index:var(--z-float);
  width:48px; height:48px; border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--ink); color:var(--on-deep);
  box-shadow:0 6px 20px rgba(33,66,74,.28);
  opacity:0; visibility:hidden; transform:translateY(20px);
  transition:opacity .4s, transform .4s, visibility .4s;
}
.wa-float.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }
.wa-float svg{ width:24px; height:24px; display:block; }
.wa-float svg path{ fill:currentColor; }
.wa-float:hover, .wa-float:focus-visible{ background:var(--on-deep); color:var(--ink); }