/* =========================================================================
   WHATSAPP.CSS — Botón flotante de WhatsApp.
   Solo se renderiza si el filtro impremx_whatsapp_number retorna un número.
   Convención BEM, prefijo imp-.
   ========================================================================= */

.imp-whatsapp {
    position: fixed;
    bottom: var(--space-6);
    right: var(--space-6);
    z-index: var(--z-sticky);

    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-full);

    background-color: #25D366;
    color: #ffffff;
    box-shadow: var(--shadow-lg);
    text-decoration: none;

    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast),
        background-color var(--transition-fast);
}

.imp-whatsapp:hover {
    transform: scale(1.1);
    box-shadow: var(--shadow-xl);
    background-color: #20bd5a;
    color: #ffffff;
}

.imp-whatsapp:active {
    transform: scale(1.05);
}

.imp-whatsapp:focus-visible {
    outline: 3px solid var(--color-primary-400);
    outline-offset: 3px;
}

/* Icono SVG */
.imp-whatsapp__icon {
    width: 28px;
    height: 28px;
    display: block;
}

/* Respetar prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .imp-whatsapp {
        transition: none;
    }

    .imp-whatsapp:hover {
        transform: none;
    }
}

/* Evitar tapar contenido en mobile */
@media (max-width: 767px) {
    .imp-whatsapp {
        bottom: var(--space-4);
        right: var(--space-4);
    }
}