/* Estilos para el botón flotante de WhatsApp */
.whatsapp-flotante-btn {
    /* Posicionamiento Flotante */
    position: fixed; 
    bottom: 20px;
    right: 20px;
    z-index: 1000;

    /* Estilo del contenedor (sin fondo, la imagen lo proporciona) */
    display: inline-block;
    
    /* La sombra se aplica al contenedor para dar el efecto 3D */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); 
    border-radius: 50%; /* Es importante para que la sombra se vea circular */
}

/* Efecto al pasar el ratón (opcional) */
.whatsapp-flotante-btn:hover {
    color: #FFF; /* Mantiene el color blanco */
    transform: scale(1.2); /* Agranda ligeramente al pasar el ratón */
    text-decoration: none; /* Quita el subrayado en caso de que exista */
}

/* Este CSS asegura que el icono dentro del círculo se vea blanco */
.whatsapp-icon-img {
    width: 70px; /* Define el tamaño deseado del logo */
    height: 70px;
    vertical-align: middle; /* Para asegurar que la imagen esté bien alineada */
}

/* ---------------------------------------------------------------- */
/* --- MEDIA QUERY: Ajustes específicos para móviles (hasta 768px) --- */
@media (max-width: 768px) {
    
    .whatsapp-flotante-btn {
        /* 1. Ajustar la posición en el móvil (moverlo ligeramente) */
        bottom: 15px; /* Más cerca del borde inferior */
        right: 15px; /* Más cerca del borde derecho */
    }
    
    .whatsapp-icon-img {
        /* 2. Reducir el tamaño del icono para que no ocupe mucho espacio */
        width: 52px; 
        height: 52px;
    }
    
}