/* Estilos propios de Avalúos HECA.
   El resto del diseño viene del tema de Bootstrap en assets/bootstrap/. */

/* Botón flotante de WhatsApp, fijo en la esquina inferior derecha. */
.float {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: 40px;
    background-color: #25d366;
    color: #fff;
    border-radius: 50%;
    box-shadow: 2px 2px 3px #999;
    z-index: 100;
}

.float:hover,
.float:focus-visible {
    color: #fff;
    background-color: #1fb855;
}

.float svg {
    width: 32px;
    height: 32px;
}

/* Iconos de la sección de contacto. Sustituyen a las fuentes de iconos:
   se usaban cuatro hojas de estilo y tres fuentes completas para pintar
   cuatro glifos. */
.features-icons .features-icons-item .features-icons-icon svg {
    width: 4.5rem;
    height: 4.5rem;
}

.social-icon {
    width: 2em;
    height: 2em;
}

/*
 * Animaciones.
 *
 * Sustituyen a animate.css, de la que solo se usaban dos de sus casi ochenta
 * animaciones. Las clases conservan los nombres originales para no tocar el
 * marcado ni el atributo data-bss-hover-animate.
 */
.animated {
    animation-duration: 1s;
    animation-fill-mode: both;
}

@media (prefers-reduced-motion: reduce) {
    .animated {
        animation: none;
    }
}

@keyframes pulse {
    from,
    to {
        transform: scale3d(1, 1, 1);
    }

    50% {
        transform: scale3d(1.05, 1.05, 1.05);
    }
}

.pulse {
    animation-name: pulse;
}

@keyframes bounce {
    from,
    20%,
    53%,
    to {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        transform: translate3d(0, 0, 0);
    }

    40%,
    43% {
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        transform: translate3d(0, -30px, 0) scaleY(1.1);
    }

    70% {
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        transform: translate3d(0, -15px, 0) scaleY(1.05);
    }

    80% {
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        transform: translate3d(0, 0, 0) scaleY(0.95);
    }

    90% {
        transform: translate3d(0, -4px, 0) scaleY(1.02);
    }
}

.bounce {
    animation-name: bounce;
    transform-origin: center bottom;
}