@keyframes fadeUp{
    from{ opacity:0; transform:translateY(28px); }
    to{ opacity:1; transform:translateY(0); }
}

@keyframes pulse{
    0%{ box-shadow:0 0 0 0 rgba(46,158,91,.5); }
    70%{ box-shadow:0 0 0 9px rgba(46,158,91,0); }
    100%{ box-shadow:0 0 0 0 rgba(46,158,91,0); }
}

@keyframes grow{
    from{ transform:scaleX(0); }
    to{ transform:scaleX(1); }
}

@keyframes draw{
    from{ transform:scaleX(0); }
    to{ transform:scaleX(1); }
}

.badge{ animation:fadeUp .8s var(--ease) both; }
.hero h1{ animation:fadeUp 1s var(--ease) .08s both; }
.dimension{ animation:fadeUp 1s var(--ease) .2s both; }
.dimension::before{ transform-origin:center; animation:draw 1.1s var(--ease) .35s both; }
.hero-sub{ animation:fadeUp 1s var(--ease) .3s both; }
.hero-buttons{ animation:fadeUp 1s var(--ease) .4s both; }
.gauge{ animation:fadeUp 1s var(--ease) .3s both; }
.results{ animation:fadeUp 1s var(--ease) .55s both; }

/* Aparición al hacer scroll (scroll.js agrega .in) */
.js .reveal{
    opacity:0;
    transform:translateY(26px);
    transition:opacity .8s var(--ease), transform .8s var(--ease);
}

.js .reveal.in{
    opacity:1;
    transform:none;
}

@media (prefers-reduced-motion:reduce){
    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
        scroll-behavior:auto !important;
    }

    .js .reveal{
        opacity:1;
        transform:none;
    }
}