/* Lightweight reveal animations for home sections - optimized for performance */
:root{
    --reveal-duration: 560ms;
    --reveal-ease: cubic-bezier(.2,.9,.2,1);
}

/* Base hidden state */
.reveal{
    opacity: 0;
    transform: translateY(18px);
    will-change: transform, opacity;
    transition: opacity var(--reveal-duration) var(--reveal-ease), transform var(--reveal-duration) var(--reveal-ease);
}

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

/* Direction variants */
.reveal--from-left{ transform: translateX(-18px); }
.reveal--from-right{ transform: translateX(18px); }
.reveal--from-left.is-visible,
.reveal--from-right.is-visible{ transform: translateX(0); }

/* Slight scale for image blocks */
.reveal--scale{ transform: scale(.98) translateY(8px); }
.reveal--scale.is-visible{ transform: scale(1) translateY(0); }

/* Subtle float for icons that can loop (low-cost) */
.float-subtle{ animation: float-subtle 6s ease-in-out infinite; transform-origin: center; }
@keyframes float-subtle{ 0%{transform:translateY(0);}50%{transform:translateY(-6px);}100%{transform:translateY(0);} }

/* Apply reveal to main sections on page without changing templates */
.hero-section,
.servicios-section,
.proceso-section,
.proyectos-section,
.partners-section,
.zonas-section,
.faq-section,
.cta-final-section{
    opacity: 1; /* TEMPORAL: deshabilitado para debugging */
}

/* Add reveal class via JS; provide a graceful fallback */

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .reveal,
    .float-subtle{
        transition: none !important;
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Performance notes: use only transform/opacity, avoid layout-triggering properties */