.elementor-838 .elementor-element.elementor-element-2e8cf58d{--display:flex;}/* Start custom CSS for contact-buttons-var-5, class: .elementor-element-e04d540 *//* Mueve todo el widget hacia la izquierda */
.e-contact-buttons{
    right:210px !important;
}


/* Botón */
.e-contact-buttons__chat-button{
    position:relative;
    animation:whatsappPulse 2s infinite;
}


/* Parte superior del mensaje: título + texto (a la derecha del botón) */
.e-contact-buttons__chat-button::after{
    content:"¿Necesitas un servicio?\A Escríbenos ahora.";
    white-space:pre-line;

    position:absolute;
    left:calc(100% + 12px);
    bottom:50%;

    background:#101827;
    color:#fff;

    padding:10px 18px 0px 18px;
    border-radius:12px 12px 0 0;

    min-width:180px;

    font-size:13px;
    font-weight:500;
    line-height:1.5;

    pointer-events:none;
}


/* Parte inferior: ícono + "Atención 24 horas" en línea, alineados verticalmente entre sí */
.e-contact-buttons__chat-button::before{
    content:"Atención 24 horas";
    white-space:nowrap;

    position:absolute;
    left:calc(100% + 12px);
    top:50%;

    display:flex;
    align-items:center;
    gap:8px;

    background:#101827;
    color:#25D366;

    padding:10px 18px;
    border-radius:0 0 12px 12px;

    min-width:180px;

    font-size:11px;
    font-weight:600;

    box-shadow:0 6px 16px rgba(0,0,0,.2);

    pointer-events:none;
}

/* El ícono como pseudo-elemento hijo simulado vía background en un span no es posible en CSS puro con ::before ya ocupado, así que usamos background-image + line-height para centrar */
.e-contact-buttons__chat-button::before{
    background-image:url("https://gruascarcompany.pe/wp-content/uploads/2026/07/tabler_clock-hour-2.svg");
    background-repeat:no-repeat;
    background-position:18px center;
    background-size:14px;
    padding-left:40px;
    line-height:14px;
}


/* Animación */
@keyframes whatsappPulse{
    0%{
        transform:scale(1);
        box-shadow:0 0 0 0 rgba(37,211,102,.45);
    }

    70%{
        transform:scale(1.08);
        box-shadow:0 0 0 16px rgba(37,211,102,0);
    }

    100%{
        transform:scale(1);
        box-shadow:0 0 0 0 rgba(37,211,102,0);
    }
}


/* Tablet y móvil: mensaje solo arriba del botón, en pastilla compacta */
@media(max-width:1024px){

    .e-contact-buttons{
        right:40px !important;
    }

    /* Ocultamos el título/descripción */
    .e-contact-buttons__chat-button::after{
        display:none;
    }

    /* Pastilla arriba del botón, ícono + texto en línea, centrados */
    .e-contact-buttons__chat-button::before{
        left:50%;
        top:auto;
        bottom:calc(100% + 12px);
        transform:translateX(-50%);

        min-width:0;
        width:auto;
        white-space:nowrap;

        padding:8px 16px 8px 30px;
        border-radius:20px;

        font-size:11px;

        background-position:12px center;
        background-size:12px;
        line-height:normal;
    }

}


/* Móvil: pastilla aún más compacta */
@media(max-width:767px){

    .e-contact-buttons{
        right:25px !important;
        bottom:16px !important;
    }

    .e-contact-buttons__chat-button::before{
        padding:6px 12px 6px 24px;
        font-size:10px;
        background-position:9px center;
        background-size:11px;
    }
}/* End custom CSS */