/* ==========================================================================
   BOTON FLOTANTE DE WHATSAPP — circular, clasico, fijo abajo a la derecha en
   toda pagina que lo incluya. Vive en su propia hoja porque no es parte del
   pie ni de ninguna seccion: flota por encima de todo el contenido normal
   (z-index: --z-overlay) pero por debajo de cualquier modal/dialogo
   (--z-modal), para que un dialogo abierto siempre quede encima.
   ========================================================================== */
.whatsapp-float {
  position: fixed;
  right: 20px;
  bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25D366;
  color: #FFF;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.25);
  transition: transform var(--dur-fast), box-shadow var(--dur-fast), background-color var(--dur-fast);
}
.whatsapp-float svg { width: 30px; height: 30px; }
.whatsapp-float:hover,
.whatsapp-float:focus-visible {
  background: #1EBE5A;
  color: #FFF;
  transform: scale(1.08);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.4);
}
@media (max-width: 640px) {
  .whatsapp-float { right: 16px; width: 52px; height: 52px; }
  .whatsapp-float svg { width: 27px; height: 27px; }
}