/* ============================================================ Botón flotante de WhatsApp — Soluciones Aplicativas ------------------------------------------------------------ Uso: Opción A) Pegar este bloque al final de css/style-modern.css Opción B) Linkear este archivo en el de cada página: ============================================================ */ .sa-whatsapp-float { position: fixed; bottom: 24px; right: 24px; width: 60px; height: 60px; border-radius: 50%; background-color: #25D366; display: flex; align-items: center; justify-content: center; z-index: 9999; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22); transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease; text-decoration: none; } .sa-whatsapp-float svg { width: 34px; height: 34px; display: block; } .sa-whatsapp-float:hover, .sa-whatsapp-float:focus { transform: scale(1.08); background-color: #1ebe57; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28); } .sa-whatsapp-float:focus-visible { outline: 3px solid #25D366; outline-offset: 4px; } /* Pulso sutil para llamar la atención */ .sa-whatsapp-float::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background-color: #25D366; opacity: .55; z-index: -1; animation: sa-wa-pulse 2.2s ease-out infinite; } @keyframes sa-wa-pulse { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.7); opacity: 0; } } /* Tooltip opcional al pasar el mouse (escritorio) */ .sa-whatsapp-float::after { content: attr(data-tooltip); position: absolute; right: 72px; top: 50%; transform: translateY(-50%) translateX(8px); background: #222; color: #fff; font-size: 13px; font-family: inherit; padding: 8px 12px; border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; } .sa-whatsapp-float:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); } /* Ajustes para móvil */ @media (max-width: 480px) { .sa-whatsapp-float { width: 54px; height: 54px; bottom: 18px; right: 18px; } .sa-whatsapp-float svg { width: 30px; height: 30px; } /* En móvil ocultar el tooltip — el botón ya es claro */ .sa-whatsapp-float::after { display: none; } } /* Respetar preferencia de movimiento reducido */ @media (prefers-reduced-motion: reduce) { .sa-whatsapp-float::before { animation: none; } .sa-whatsapp-float { transition: none; } } /* No imprimir el botón */ @media print { .sa-whatsapp-float { display: none !important; } }