/* ═══════════════════════════════════════════════════════════════════════════
   TU TEMPLO – animations.css v3
═══════════════════════════════════════════════════════════════════════════ */

[data-reveal]{opacity:0;transition:opacity 0.9s cubic-bezier(0.22,0.61,0.36,1),transform 0.9s cubic-bezier(0.22,0.61,0.36,1);}
[data-reveal="up"]{transform:translateY(36px);}
[data-reveal="left"]{transform:translateX(-36px);}
[data-reveal="right"]{transform:translateX(36px);}
[data-reveal].visible{opacity:1;transform:none;}

[data-delay="100"]{transition-delay:0.1s;}
[data-delay="200"]{transition-delay:0.2s;}
[data-delay="300"]{transition-delay:0.3s;}
[data-delay="400"]{transition-delay:0.4s;}

/* Entrada del hero */
.hero-content{animation:heroIn 1.4s cubic-bezier(0.22,0.61,0.36,1) both;animation-delay:0.2s;}
@keyframes heroIn{from{opacity:0;transform:translateY(28px);}to{opacity:1;transform:none;}}

@media(prefers-reduced-motion:reduce){
    [data-reveal],.hero-content{animation:none;opacity:1;transform:none;transition:none;}
}