/* =========================
   SCROLL REVEAL - INDEX
========================= */

/* =========================
   SCROLL REVEAL
========================= */

.reveal {
    opacity: 0;
    transform: translate3d(0, 38px, 0);
    transition:
        opacity 0.75s ease,
        transform 0.75s ease;
    will-change: opacity, transform;
}

.reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.reveal-left {
    transform: translate3d(-32px, 0, 0);
}

.reveal-right {
    transform: translate3d(32px, 0, 0);
}

.reveal-scale {
    transform: scale(0.96);
}

.reveal-left.is-visible,
.reveal-right.is-visible,
.reveal-scale.is-visible {
    transform: translate3d(0, 0, 0) scale(1);
}

.reveal-delay-1 {
    transition-delay: 0.1s;
}

.reveal-delay-2 {
    transition-delay: 0.2s;
}

.reveal-delay-3 {
    transition-delay: 0.3s;
}

.reveal-delay-4 {
    transition-delay: 0.4s;
}

.whatsapp-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;

    width: 64px;
    height: 64px;

    border-radius: 50%;

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

    background: #25D366;
    color: var(--claro);

    font-size: 28px;
    text-decoration: none;

    z-index: 99999;

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);

    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* hover */
.whatsapp-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 0 25px rgba(37, 211, 102, 0.6);
}

@keyframes whatsappPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6);
    }

    70% {
        box-shadow: 0 0 0 18px rgba(37, 211, 102, 0);
    }

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

.whatsapp-btn {
    animation: whatsappPulse 2s infinite;
}

.whatsapp-btn::after {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: 50%;

    background: radial-gradient(circle,
            rgba(14, 94, 244, 0.753),
            transparent 70%);

    filter: blur(20px);
    z-index: -1;
}

/* En mobile hacemos el efecto más corto para que no rompa */
@media (max-width: 768px) {
    .reveal {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity .65s ease, transform .65s ease;
    }

    .reveal.is-visible {
        opacity: 1;
        transform: translateY(0);
    }

    .reveal-left,
    .reveal-right {
        transform: translateY(24px);
    }

    .reveal-left.is-visible,
    .reveal-right.is-visible {
        transform: translateY(0);
    }

    .whatsapp-btn {
        width: 58px;
        height: 58px;
        font-size: 24px;
        bottom: 100px;
        right: 20px;
    }
}

@media (max-width: 360px) {

    .whatsapp-btn {
        width: 52px;
        height: 52px;
        font-size: 22px;
        bottom: 18px;
        right: 18px;
    }

}