/* ========================================
ANIMACIÓN FADE UP
======================================== */

.fade-up{

opacity:0;

transform:translateY(40px);

transition:opacity .8s ease, transform .8s ease;

will-change:transform, opacity;

}

.fade-up.show{

opacity:1;

transform:translateY(0);

}

/* ========================================
ANIMACIÓN FADE LEFT
======================================== */

.fade-left{

opacity:0;

transform:translateX(-40px);

transition:opacity .8s ease, transform .8s ease;

will-change:transform, opacity;

}

.fade-left.show{

opacity:1;

transform:translateX(0);

}

/* ========================================
ANIMACIÓN FADE RIGHT
======================================== */

.fade-right{

opacity:0;

transform:translateX(40px);

transition:opacity .8s ease, transform .8s ease;

will-change:transform, opacity;

}

.fade-right.show{

opacity:1;

transform:translateX(0);

}

/* ========================================
ANIMACIÓN ZOOM
======================================== */

.zoom{

opacity:0;

transform:scale(.85);

transition:opacity .7s ease, transform .7s ease;

will-change:transform, opacity;

}

.zoom.show{

opacity:1;

transform:scale(1);

}

/* ========================================
ANIMACIÓN BOTÓN
======================================== */

.btn-principal{

animation:fadeButton 1.2s ease forwards;

}

@keyframes fadeButton{

0%{

opacity:0;

transform:translateY(20px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

/* ========================================
ANIMACIÓN HERO TEXTO
======================================== */

.hero-content h1{

animation:heroTitle 1s ease forwards;

}

@keyframes heroTitle{

0%{

opacity:0;

transform:translateY(40px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

/* ========================================
EFECTO HOVER ICONOS REDES
======================================== */

.social a{

transition:transform .3s ease, color .3s ease;

}

.social a:hover{

transform:translateY(-3px) scale(1.1);

}

/* ========================================
EFECTO TARJETAS SERVICIO
======================================== */

.card-servicio{

transition:transform .35s ease, box-shadow .35s ease;

}

/* ========================================
ACCESIBILIDAD (reduce motion)
======================================== */

@media (prefers-reduced-motion: reduce){

.fade-up,
.fade-left,
.fade-right,
.zoom{

transition:none;
transform:none;
opacity:1;

}

.btn-principal{

animation:none;

}

.hero-content h1{

animation:none;

}

}