/* =========================================================
   RS77 - ANIMATIONS.CSS
   ========================================================= */

@keyframes heroZoom{
    from{opacity:0;transform:scale(1.06)}
    to{opacity:1;transform:scale(1)}
}
@keyframes rise{
    from{opacity:0;transform:translateY(35px)}
    to{opacity:1;transform:translateY(0)}
}
@keyframes pulseGreen{
    0%,100%{box-shadow:0 0 0 0 rgba(0,166,81,.25)}
    50%{box-shadow:0 0 0 12px rgba(0,166,81,0)}
}
@keyframes scrollDot{
    0%{transform:translate(-50%,0);opacity:1}
    70%{transform:translate(-50%,12px);opacity:0}
    100%{transform:translate(-50%,0);opacity:0}
}
.hero{animation:heroZoom 1.1s ease both}
.hero .eyebrow{animation:rise .7s .15s ease both}
.hero h1{animation:rise .8s .25s ease both}
.hero h2{animation:rise .8s .38s ease both}
.hero p{animation:rise .8s .5s ease both}
.hero-buttons{animation:rise .8s .62s ease both}
.scroll-down span{animation:scrollDot 1.8s infinite}
.status-dot{animation:pulseGreen 2s infinite}

.animar,.animar-izquierda,.animar-derecha{
    opacity:0;
    transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1);
}
.animar{transform:translateY(35px)}
.animar-izquierda{transform:translateX(-45px)}
.animar-derecha{transform:translateX(45px)}
.animar.visible,.animar-izquierda.visible,.animar-derecha.visible{opacity:1;transform:none}
.delay-1{transition-delay:.1s!important}
.delay-2{transition-delay:.2s!important}
.delay-3{transition-delay:.3s!important}
.delay-4{transition-delay:.4s!important}
.delay-5{transition-delay:.5s!important}
.delay-6{transition-delay:.6s!important}

.service-card,.process-card,.contact-item{
    transition:transform .45s cubic-bezier(.22,1,.36,1),border-color .35s,box-shadow .35s;
}
.service-card:hover,.process-card:hover{transform:translateY(-9px);border-color:var(--borde-verde);box-shadow:0 20px 45px rgba(0,0,0,.3)}
.contact-item:hover{transform:translateX(7px);border-color:var(--borde-verde)}
.gallery-item:hover img{transform:scale(1.08);filter:brightness(1.08)}
.btn{transition:transform .3s,box-shadow .3s,background .3s}
.btn:hover{transform:translateY(-3px)}
.whatsapp-float{animation:pulseGreen 2.8s infinite}

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

/* LIGHTBOX */
.lightbox{
    position:fixed;inset:0;z-index:9999;
    display:flex;align-items:center;justify-content:center;
    padding:30px;background:rgba(0,0,0,.95);
    backdrop-filter:blur(12px);
    opacity:0;visibility:hidden;
    transition:.3s ease;
}
.lightbox.active{opacity:1;visibility:visible}
.lightbox figure{max-width:min(1100px,88vw);text-align:center}
.lightbox figure img{
    max-width:100%;max-height:78vh;
    border-radius:12px;
    box-shadow:0 30px 80px rgba(0,0,0,.65);
}
.lightbox figcaption{margin-top:12px;color:#bbb;font-size:.75rem}
.lightbox button{
    position:absolute;
    width:48px;height:48px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.15);
    background:#111;color:#fff;
    font-size:2rem;line-height:1;
    cursor:pointer;
}
.lightbox button:hover{background:var(--verde);border-color:var(--verde)}
.lightbox-close{right:25px;top:25px}
.lightbox-prev{left:25px;top:50%;transform:translateY(-50%)}
.lightbox-next{right:25px;top:50%;transform:translateY(-50%)}
@media(max-width:600px){
    .lightbox{padding:15px}
    .lightbox-prev{left:8px}.lightbox-next{right:8px}
    .lightbox-close{right:12px;top:12px}
}