/* Botón flotante de WhatsApp.
   Sustituye al chatbot embebido de Zapier como punto de entrada para preguntas rápidas.
   Autocontenido: no depende de plugins ni de JavaScript para funcionar; es un enlace. */

.wa-float {
    --wa-green: #25d366;
    --wa-green-dark: #1da851;

    position: fixed;
    right: 25px;
    bottom: 25px;
    z-index: 1030;

    display: inline-flex;
    align-items: center;
    gap: 10px;

    height: 60px;
    padding: 0 18px 0 0;

    border-radius: 30px;
    background-color: var(--wa-green);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .25);

    color: #fff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;

    transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.wa-float:hover,
.wa-float:focus {
    background-color: var(--wa-green-dark);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
}

.wa-float:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

.wa-float__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    flex: 0 0 60px;
}

.wa-float__icon svg {
    width: 32px;
    height: 32px;
    fill: #fff;
}

/* En pantallas chicas se deja solo el círculo, para no tapar contenido. */
@media (max-width: 575.98px) {
    .wa-float {
        right: 16px;
        bottom: 16px;
        padding: 0;
    }

    .wa-float__label {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wa-float {
        transition: none;
    }

    .wa-float:hover,
    .wa-float:focus {
        transform: none;
    }
}