.whatsapp-float {
    position: fixed;
    right: 20px;           /* distancia desde el borde derecho */
    bottom: 20px;          /* distancia desde el borde inferior */
    z-index: 9999;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: #25D366;   /* color WhatsApp */
    border-radius: 50%;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(0,0,0,0.25);
    transition: transform .18s ease, box-shadow .18s ease;
    cursor: pointer;
    overflow: visible;
  }

  .whatsapp-float svg { display:block; transform: translateY(1px); }

  .whatsapp-float:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 12px 26px rgba(0,0,0,0.28);
  }

  /* Badge pequeño (opcional) */
  .wa-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #ff3b30;
    color: #fff;
    font-size: 11px;
    padding: 3px 6px;
    border-radius: 12px;
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(0,0,0,0.12);
  }

  /* Animación vertical (sube y baja) */
  @keyframes floatY {
    0%   { transform: translateY(0) rotate(-2deg); }
    50%  { transform: translateY(-12px) rotate(6deg); }
    100% { transform: translateY(0) rotate(-2deg); }
  }
  .whatsapp-float {
    animation: floatY 3s ease-in-out infinite;
  }

  /* Animación horizontal alternativa */
  .whatsapp-float.horizontal {
    animation: floatX 3s ease-in-out infinite;
  }
  @keyframes floatX {
    0%   { transform: translateX(0) rotate(-2deg); }
    50%  { transform: translateX(-12px) rotate(6deg); }
    100% { transform: translateX(0) rotate(-2deg); }
  }

  /* Ajustes responsivos */
  @media (max-width: 520px) {
    .whatsapp-float { right: 14px; bottom: 14px; width: 56px; height: 56px; }
    .wa-badge { font-size: 10px; padding: 2px 5px; top: -6px; right: -6px; }
  }