.nvb-revelar {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.nvb-revelar.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* 2. Botón WhatsApp Flotante con pulso animado */
.nvb-wsp-flotante,
.btn-whatsapp-flotante,
[href*="wa.me"] {
    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes nvb-wsp-pulso {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5);
    }

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

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

/* Si existe el botón flotante en la esquina */
.whatsapp-btn,
.wsp-float,
a[href*="wa.me"].btn-flotante {
    animation: nvb-wsp-pulso 2.4s infinite ease-in-out;
}

/* 3. Elevación suave de tarjetas de producto */
.tarjeta_slider,
.nvcat-tarjeta,
.categoria {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease !important;
}

.tarjeta_slider:hover,
.nvcat-tarjeta:hover {
    transform: translateY(-6px);
}


.btn-agregar,
.nvb-hs__btn--solid,
.btn-confirmar-orden {
    position: relative;
    overflow: hidden;
}

.btn-agregar::after,
.nvb-hs__btn--solid::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(60deg,
            rgba(255, 255, 255, 0) 20%,
            rgba(255, 255, 255, 0.25) 50%,
            rgba(255, 255, 255, 0) 80%);
    transform: rotate(30deg) translateX(-100%);
    transition: transform 0.6s ease;
    pointer-events: none;
}

.btn-agregar:hover::after,
.nvb-hs__btn--solid:hover::after {
    transform: rotate(30deg) translateX(100%);
}