@import url('0-base/reset.css');
@import url('animations.css');
@import url('1-layout/navbar.css');
@import url('2-sections/hero.css');
@import url('2-sections/services.css');
@import url('2-sections/productos.css');
@import url('2-sections/exclusivos.css');
@import url('2-sections/modales.css');
@import url('2-sections/nosotros.css');
@import url('2-sections/casos-exito.css');
@import url('2-sections/faq.css');
@import url('2-sections/footer.css');
@import url('2-sections/chat.css');
@import url('3-components/buttons.css');

section[id] {
    scroll-margin-top: 80px; /* Ajusta este número al alto de tu Navbar */
}

/* ==================================================
   CORRECCIÓN FINAL: ANIMACIÓN DE PRODUCTOS
   ================================================== */
   
/* Forzamos que los productos respeten la animación de entrada 
   sin perder su efecto de expansión (width) */
.product-item.reveal-up {
    transition: opacity 0.8s ease-out, transform 0.8s ease-out, width 0.4s ease !important;
    opacity: 0; /* Aseguramos que empiecen invisibles */
}

/* Estado cuando ya aparecieron */
.product-item.reveal-up.active {
    opacity: 1 !important;
    transform: translateY(0);
}