@charset "utf-8";

/* ==============================
   BOTÓN FLOTANTE WHATSAPP
   ============================== */

body {
    background-color: rgba(175, 204, 172);
}

.container-waboton {
    background-color: #2e6329;
    border: 1px solid #fff;
    position: fixed;
    z-index: 9999;
    border-radius: 50%;

    /* Posición en pantalla */
    bottom: 100px;
    right: 25px;

    /* Tamaño del círculo */
    padding: 12px;

    transition: ease 0.3s;
    animation: efecto 1.2s infinite;
}

.container-waboton:hover {
    transform: scale(1.1);
    transition: 0.3s;
}

.waboton {
    width: 30px;
    height: 30px;
    display: block;
    transition: ease 1s;
}


/* ==============================
   EFECTO DE PULSO
   ============================== */

@keyframes efecto {

    0% {
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.85);
    }

    100% {
        box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
    }

}


/* ==============================
   CELULARES
   ============================== */

@media (max-width: 767px) {

    .container-waboton {
        width: 36px;
        height: 36px;

        padding: 0;

        bottom: 80px;
        right: 15px;

        display: flex;
        align-items: center;
        justify-content: center;
    }

    .container-waboton .waboton {
        width: 28px;
        height: 28px;
    }

}


/*
   NOTAS:

   padding       = tamaño del círculo
   width/height  = tamaño del ícono
   bottom        = distancia desde abajo
   right         = distancia desde la derecha
   10px          = expansión del efecto de pulso
   1.2s          = velocidad del pulso

   Si Avast o el navegador conserva una versión
   anterior del CSS, agregar ?v=4 al enlace:
   
   css/whatsapp.css?v=4
*/