.botao-contactos {
    position: relative;
    display: inline-block;
    isolation: isolate;
}

.botao-contactos::before,
.botao-contactos::after {
    content: "";
    position: absolute;
    top: calc(50% - 3.5px);
    left: calc(50% + 2.75px);
    z-index: 0;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(255, 255, 255, .78);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(117, 204, 244, .55);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(.55);
}

.botao-contactos .icon-suporte {
    position: relative;
    z-index: 1;
    display: inline-block;
    transform-origin: center;
    animation: contactos-icone-pulso 10s ease-in-out infinite;
}

.botao-contactos::before {
    animation: contactos-halo 10s cubic-bezier(.2, .65, .25, 1) infinite;
}

.botao-contactos::after {
    animation: contactos-halo 10s .35s cubic-bezier(.2, .65, .25, 1) infinite;
}

@keyframes contactos-halo {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(.55);
    }

    3% {
        opacity: .85;
    }

    18%, 100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.5);
    }
}

@keyframes contactos-icone-pulso {
    0%, 2%, 12.5%, 100% {
        transform: scale(1);
    }

    5% {
        transform: scale(1.12);
    }

    8% {
        transform: scale(1.04);
    }
}

@media (prefers-reduced-motion: reduce) {
    .botao-contactos::before,
    .botao-contactos::after,
    .botao-contactos .icon-suporte {
        animation: none;
    }
}