<!-- ========================================== -->
<!-- BOTÓN FLOTANTE DE WHATSAPP OFICIAL -->
<!-- Pégalo antes de la etiqueta de cierre </body> -->
<!-- ========================================== -->

  .wa-float-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    align-items: center;
  }
  .wa-float-btn {
    width: 60px;
    height: 60px;
    background-color: #25D366;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.4);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
  }
  .wa-float-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.6);
  }
  .wa-float-btn svg {
    width: 32px;
    height: 32px;
    fill: #ffffff;
  }
    /* Efecto de pulso u onda exterior */
    @keyframes waPulse {
      0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
      }
      70% {
        box-shadow: 0 0 0 16px rgba(37, 211, 102, 0);
      }
      100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
      }
    }
    .wa-float-btn {
      animation: waPulse 2s infinite;
    }
    /* Tooltip informativo */
    .wa-tooltip {
      position: absolute;
      right: 70px;
      top: 50%;
      transform: translateY(-50%);
      background-color: #ffffff;
      color: #1e293b;
      padding: 8px 14px;
      border-radius: 10px;
      font-size: 13px;
      font-weight: 500;
      white-space: nowrap;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
      border: 1px solid #f1f5f9;
      pointer-events: none;
      opacity: 0.95;
      transition: opacity 0.3s ease, transform 0.3s ease;
      font-family: system-ui, -apple-system, sans-serif;
    }
    .wa-tooltip::after {
      content: '';
      position: absolute;
      right: -6px;
      top: 50%;
      transform: translateY(-50%);
      border-width: 6px 0 6px 6px;
      border-style: solid;
      border-color: transparent transparent transparent #ffffff;
    }
    @media (max-width: 640px) {
      .wa-tooltip {
        display: none; /* Ocultar tooltip en móviles para no obstruir pantalla */
      }
    }