/* ---
Código html:
--- */
/*
============================================================================
BOTÓN FLOTANTE DE WHATSAPP
============================================================================
Estilos para el botón flotante de WhatsApp con efectos de hover, tooltip y animaciones.
El botón se fija en la esquina inferior derecha de la pantalla.
============================================================================ */
/* Contenedor principal del botón */
.a-Wa-S1 {
/* Posicionamiento */
position: fixed; /* Fijo en la ventana del navegador */
bottom: 1.5rem; /* 24px desde abajo */
right: 1.5rem; /* 24px desde la derecha */
z-index: 1000; /* Asegura que esté por encima de otros elementos */
/* Estilo del enlace */
text-decoration: none; /* Elimina el subrayado */
/* Apariencia */
background: linear-gradient(135deg, #25D366 0%, #128C7E 100%); /* Degradado de WhatsApp */
border-radius: 50%; /* Forma circular */
width: 3.5rem; /* Ancho fijo */
height: 3.5rem; /* Altura fija (igual al ancho para mantener la forma circular) */
/* Centrado del ícono */
display: flex;
justify-content: center;
align-items: center;
/* Efectos visuales */
box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4), /* Sombra verde */
0 2px 8px rgba(0, 0, 0, 0.15); /* Sombra negra sutil */
/* Transiciones */
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Transición suave */
/* Animación */
animation: pulse-whatsapp 2s ease-in-out infinite; /* Efecto de pulso */
/* Interactividad */
cursor: pointer; /* Cambia el cursor a mano al pasar por encima */
}
/* Anillo de pulso detrás del botón */
.a-Wa-S1::before {
content: ''; /* Necesario para que se muestre el pseudo-elemento */
position: absolute; /* Posicionamiento absoluto respecto al botón */
top: 50%; /* Centrado vertical */
left: 50%; /* Centrado horizontal */
transform: translate(-50%, -50%); /* Centrado exacto */
width: 100%; /* Mismo tamaño que el botón */
height: 100%; /* Mismo tamaño que el botón */
border-radius: 50%; /* Forma circular */
background: rgba(37, 211, 102, 0.3); /* Fondo semitransparente */
z-index: -1; /* Detrás del botón */
animation: pulse-ring 2s ease-in-out infinite; /* Animación del anillo */
}
/* Efecto al pasar el ratón */
.a-Wa-S1:hover {
transform: translateY(-5px) scale(1.1); /* Eleva y agranda ligeramente */
box-shadow: 0 8px 25px rgba(37, 211, 102, 0.6), /* Sombra más pronunciada */
0 4px 15px rgba(0, 0, 0, 0.25); /* Sombra negra más oscura */
animation: none; /* Detiene la animación de pulso al hacer hover */
}
/* Efecto al hacer clic */
.a-Wa-S1:active {
transform: translateY(-2px) scale(1.05); /* Efecto de presión más sutil */
box-shadow: 0 4px 12px rgba(37, 211, 102, 0.5); /* Sombra más pequeña */
}
/* Tooltip emergente */
.a-Wa-S1::after {
content: '¿Necesitas ayuda? Chatea con nosotros'; /* Texto del tooltip */
position: absolute; /* Posicionamiento absoluto */
right: calc(100% + 1rem); /* Posición a la izquierda del botón */
top: 50%; /* Centrado vertical */
transform: translateY(-50%) translateX(10px); /* Ajuste fino de posición */
/* Estilo del tooltip */
background-color: #ffffff; /* Fondo blanco */
color: #333333; /* Color de texto oscuro */
padding: 0.6rem 1rem; /* Espaciado interno */
border-radius: 0.5rem; /* Bordes redondeados */
font-size: 0.85rem; /* Tamaño de fuente */
font-weight: 500; /* Peso de la fuente */
white-space: nowrap; /* Evita saltos de línea */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Sombra sutil */
/* Estado inicial (invisible) */
opacity: 0;
visibility: hidden;
pointer-events: none; /* Permite hacer clic a través del tooltip */
/* Transición */
transition: all 0.3s ease;
/* Capa superior */
z-index: 1001;
}
/* Triángulo del tooltip */
.a-Wa-S1::after {
border-left: 8px solid #ffffff; /* Triángulo apuntando a la derecha */
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
}
/* Mostrar tooltip al hacer hover */
.a-Wa-S1:hover::after {
opacity: 1; /* Hace visible el tooltip */
visibility: visible; /* Asegura que sea visible */
transform: translateY(-50%) translateX(0); /* Efecto de deslizamiento */
}
/*
============================================================================
ANIMACIONES
============================================================================
Definición de las animaciones utilizadas
============================================================================ */
@keyframes pulse-whatsapp {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
@keyframes pulse-ring {
0% { transform: translate(-50%, -50%) scale(1); opacity: 0.3; }
70% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
}
/*
============================================================================
ESTILOS DEL ÍCONO DE WHATSAPP
============================================================================
Estilos específicos para el ícono de WhatsApp dentro del botón flotante.
Incluye efectos de hover y soporte para modo oscuro.
============================================================================ */
.Wa-S1 {
font-size: 2rem; /* Tamaño del ícono */
color: #ffffff; /* Color blanco para el ícono */
transition: transform 0.3s ease; /* Transición suave para efectos hover */
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2)); /* Sombra sutil para mejor contraste */
}
/*
============================================================================
EFECTO HOVER - ÍCONO
============================================================================
Efecto de rotación y escala al pasar el ratón sobre el botón
============================================================================ */
.a-Wa-S1:hover .Wa-S1 {
transform: rotate(15deg) scale(1.1); /* Gira 15 grados y agranda ligeramente */
}
/*
============================================================================
ANIMACIÓN DE PULSO
============================================================================
Efecto sutil de pulso para el botón
============================================================================ */
@keyframes pulse-whatsapp {
0%, 100% { /* Estado inicial y final */
transform: scale(1); /* Tamaño normal */
}
50% { /* Punto medio de la animación */
transform: scale(1.05); /* Ligeramente más grande */
}
}
/*
============================================================================
ANIMACIÓN DEL ANILLO
============================================================================
Efecto de onda expansiva alrededor del botón
============================================================================ */
@keyframes pulse-ring {
0% { /* Inicio */
transform: translate(-50%, -50%) scale(1); /* Tamaño inicial */
opacity: 0.5; /* Opacidad media */
}
50% { /* Mitad de la animación */
transform: translate(-50%, -50%) scale(1.3); /* Aumenta de tamaño */
opacity: 0.3; /* Se hace más transparente */
}
100% { /* Final */
transform: translate(-50%, -50%) scale(1.6); /* Tamaño máximo */
opacity: 0; /* Desaparece completamente */
}
}
/*
============================================================================
MODO OSCURO - BOTÓN
============================================================================
Ajustes de color para el modo oscuro
============================================================================ */
body.dark .a-Wa-S1 {
/* Degradado más oscuro para mejor contraste */
background: linear-gradient(135deg, #1EBE57 0%, #0D7A5F 100%);
/* Sombras más pronunciadas */
box-shadow: 0 4px 20px rgba(30, 190, 87, 0.5),
0 2px 10px rgba(0, 0, 0, 0.4);
}
/*
============================================================================
MODO OSCURO - EFECTO HOVER
============================================================================
Ajustes del efecto hover en modo oscuro
============================================================================ */
body.dark .a-Wa-S1:hover {
box-shadow: 0 8px 30px rgba(30, 190, 87, 0.7), /* Brillo más intenso */
0 4px 20px rgba(0, 0, 0, 0.5); /* Sombra más oscura */
}
/*
============================================================================
MODO OSCURO - ANILLO DE PULSO
============================================================================
Ajustes del anillo de pulso en modo oscuro
============================================================================ */
body.dark .a-Wa-S1::before {
background: rgba(30, 190, 87, 0.4); /* Color más intenso para mejor visibilidad */
}
/*
============================================================================
MODO OSCURO - TOOLTIP
============================================================================
Ajustes del tooltip en modo oscuro
============================================================================ */
body.dark .a-Wa-S1::after {
background-color: #1f1f1f; /* Fondo oscuro */
color: #e0e0e0; /* Texto claro para mejor contraste */
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6); /* Sombra más pronunciada */
border-left-color: #1f1f1f; /* Color del triángulo del tooltip */
}
/*
============================================================================
MODO OSCURO - ÍCONO
============================================================================
Ajustes del ícono en modo oscuro
============================================================================ */
body.dark .Wa-S1 {
color: #ffffff; /* Color blanco puro */
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5)); /* Sombra más pronunciada */
}
/*
============================================================================
DISEÑO RESPONSIVE - MÓVILES PEQUEÑOS (≥576px)
============================================================================
Ajustes para dispositivos móviles medianos (ej: teléfonos en orientación horizontal)
============================================================================ */
@media (min-width: 36rem) { /* 576px */
.a-Wa-S1 {
width: 4rem; /* Aumenta el tamaño del botón */
height: 4rem; /* Mantiene la proporción 1:1 */
bottom: 2rem; /* Mayor distancia desde abajo */
right: 2rem; /* Mayor distancia desde la derecha */
}
.Wa-S1 {
font-size: 2.2rem; /* Tamaño de ícono ligeramente mayor */
}
.a-Wa-S1::after {
font-size: 0.9rem; /* Texto ligeramente más grande */
padding: 0.7rem 1.2rem; /* Mayor relleno para mejor legibilidad */
}
}
/*
============================================================================
DISEÑO RESPONSIVE - TABLETS (≥768px)
============================================================================
Ajustes para tablets y dispositivos móviles grandes
============================================================================ */
@media (min-width: 48rem) { /* 768px */
.a-Wa-S1 {
width: 4.5rem; /* Botón aún más grande */
height: 4.5rem; /* Mantiene la proporción 1:1 */
bottom: 2.5rem; /* Mayor distancia desde abajo */
right: 2.5rem; /* Mayor distancia desde la derecha */
}
.Wa-S1 {
font-size: 2.5rem; /* Ícono más grande para pantallas más grandes */
}
.a-Wa-S1::after {
font-size: 0.95rem; /* Texto más grande */
padding: 0.75rem 1.3rem; /* Mayor relleno */
}
}
/*
============================================================================
DISEÑO RESPONSIVE - ESCRITORIO (≥1024px)
============================================================================
Ajustes para pantallas de portátiles y monitores pequeños
============================================================================ */
@media (min-width: 64rem) { /* 1024px */
.a-Wa-S1 {
width: 5rem; /* Tamaño óptimo para escritorio */
height: 5rem; /* Mantiene la proporción 1:1 */
bottom: 3rem; /* Distancia desde abajo */
right: 3rem; /* Distancia desde la derecha */
}
.Wa-S1 {
font-size: 2.8rem; /* Tamaño de ícono para escritorio */
}
.a-Wa-S1::after {
font-size: 1rem; /* Tamaño de texto estándar */
padding: 0.8rem 1.4rem; /* Relleno óptimo para legibilidad */
}
/* Efecto hover más pronunciado en escritorio */
.a-Wa-S1:hover {
transform: translateY(-8px) scale(1.15); /* Mayor elevación y escala */
}
}
/*
============================================================================
DISEÑO RESPONSIVE - PANTALLAS GRANDES (≥1440px)
============================================================================
Ajustes para monitores de alta resolución
============================================================================ */
@media (min-width: 90rem) { /* 1440px */
.a-Wa-S1 {
width: 5.5rem; /* Tamaño máximo del botón */
height: 5.5rem; /* Mantiene la proporción 1:1 */
}
.Wa-S1 {
font-size: 3rem; /* Tamaño máximo del ícono */
}
}
/*
============================================================================
ACCESIBILIDAD - REDUCCIÓN DE MOVIMIENTO
============================================================================
Desactiva animaciones cuando el usuario prefiere movimiento reducido
============================================================================ */
@media (prefers-reduced-motion: reduce) {
.a-Wa-S1,
.a-Wa-S1::before,
.a-Wa-S1::after,
.Wa-S1 {
animation: none; /* Elimina animaciones */
transition: none; /* Elimina transiciones */
}
}
/*
============================================================================
COMPATIBILIDAD - DISPOSITIVOS TÁCTILES
============================================================================
Ajustes para dispositivos que no soportan hover
============================================================================ */
@media (hover: none) {
.a-Wa-S1::after {
display: none; /* Oculta el tooltip en dispositivos táctiles */
}
}
/*
============================================================================
ACCESIBILIDAD - ALTO CONTRASTE
============================================================================
Mejora la visibilidad para usuarios que prefieren alto contraste
============================================================================ */
@media (prefers-contrast: high) {
.a-Wa-S1 {
border: 2px solid #ffffff; /* Borde blanco para mejor visibilidad */
}
/* Ajuste específico para modo oscuro */
body.dark .a-Wa-S1 {
border-color: #000000; /* Borde negro para mejor contraste en modo oscuro */
}
}