/* ========================================
   SCROLL ANIMATIONS - CSS
   ======================================== */

/* Clases base para animaciones */
.animate-on-scroll {
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.animate-on-scroll.animated {
    opacity: 1;
}

/* FADE IN */
.fade-in {
    opacity: 0;
}

.fade-in.animated {
    opacity: 1;
}

/* FADE IN UP */
.fade-in-up {
    opacity: 0;
    transform: translateY(50px);
}

.fade-in-up.animated {
    opacity: 1;
    transform: translateY(0);
}

/* FADE IN DOWN */
.fade-in-down {
    opacity: 0;
    transform: translateY(-50px);
}

.fade-in-down.animated {
    opacity: 1;
    transform: translateY(0);
}

/* FADE IN LEFT */
.fade-in-left {
    opacity: 0;
    transform: translateX(-50px);
}

.fade-in-left.animated {
    opacity: 1;
    transform: translateX(0);
}

/* FADE IN RIGHT */
.fade-in-right {
    opacity: 0;
    transform: translateX(50px);
}

.fade-in-right.animated {
    opacity: 1;
    transform: translateX(0);
}

/* SLIDE UP */
.slide-up {
    opacity: 0;
    transform: translateY(80px);
}

.slide-up.animated {
    opacity: 1;
    transform: translateY(0);
}

/* SLIDE DOWN */
.slide-down {
    opacity: 0;
    transform: translateY(-80px);
}

.slide-down.animated {
    opacity: 1;
    transform: translateY(0);
}

/* SCALE IN */
.scale-in {
    opacity: 0;
    transform: scale(0.8);
}

.scale-in.animated {
    opacity: 1;
    transform: scale(1);
}

/* ZOOM IN */
.zoom-in {
    opacity: 0;
    transform: scale(0.5);
}

.zoom-in.animated {
    opacity: 1;
    transform: scale(1);
}

/* ROTATE IN */
.rotate-in {
    opacity: 0;
    transform: rotate(-45deg) scale(0.8);
}

.rotate-in.animated {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

/* FLIP IN X */
.flip-in-x {
    opacity: 0;
    transform: perspective(400px) rotateX(-90deg);
}

.flip-in-x.animated {
    opacity: 1;
    transform: perspective(400px) rotateX(0deg);
}

/* FLIP IN Y */
.flip-in-y {
    opacity: 0;
    transform: perspective(400px) rotateY(-90deg);
}

.flip-in-y.animated {
    opacity: 1;
    transform: perspective(400px) rotateY(0deg);
}

/* ========================================
   DELAYS PARA ANIMACIONES SECUENCIALES
   ======================================== */

.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }
.delay-400 { transition-delay: 0.4s; }
.delay-500 { transition-delay: 0.5s; }
.delay-600 { transition-delay: 0.6s; }
.delay-700 { transition-delay: 0.7s; }
.delay-800 { transition-delay: 0.8s; }

/* ========================================
   DURACIONES PERSONALIZADAS
   ======================================== */

.duration-fast {
    transition-duration: 0.3s;
}

.duration-normal {
    transition-duration: 0.6s;
}

.duration-slow {
    transition-duration: 1s;
}

.duration-slower {
    transition-duration: 1.5s;
}

/* ========================================
   EASINGS PERSONALIZADOS
   ======================================== */

.ease-smooth {
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.ease-bounce {
    transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.ease-elastic {
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ========================================
   ANIMACIONES ESPECIALES PARA TU SITIO
   ======================================== */

/* Para las pills de servicios */
.pills-stagger .pill {
    opacity: 0;
    transform: translateY(30px) scale(0.9);
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.pills-stagger.animated .pill {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.pills-stagger.animated .pill:nth-child(1) { transition-delay: 0.1s; }
.pills-stagger.animated .pill:nth-child(2) { transition-delay: 0.2s; }
.pills-stagger.animated .pill:nth-child(3) { transition-delay: 0.3s; }
.pills-stagger.animated .pill:nth-child(4) { transition-delay: 0.4s; }
.pills-stagger.animated .pill:nth-child(5) { transition-delay: 0.5s; }
.pills-stagger.animated .pill:nth-child(6) { transition-delay: 0.6s; }

/* Para las cards de planes */
.plans-stagger .plan-card {
    opacity: 0;
    transform: translateY(60px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.plans-stagger.animated .plan-card {
    opacity: 1;
    transform: translateY(0);
}

.plans-stagger.animated .plan-card:nth-child(1) { transition-delay: 0.1s; }
.plans-stagger.animated .plan-card:nth-child(2) { transition-delay: 0.3s; }
.plans-stagger.animated .plan-card:nth-child(3) { transition-delay: 0.5s; }

/* Para el footer info */
.footer-stagger .footer-info > div {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease;
}

.footer-stagger.animated .footer-info > div {
    opacity: 1;
    transform: translateY(0);
}

.footer-stagger.animated .footer-info > div:nth-child(1) { transition-delay: 0.1s; }
.footer-stagger.animated .footer-info > div:nth-child(2) { transition-delay: 0.2s; }

/* ========================================
   UTILIDADES DE VIEWPORT
   ======================================== */

/* Para elementos que deben mantenerse visibles después de animar */
.keep-visible.animated {
    opacity: 1 !important;
    transform: none !important;
}

/* Para resetear animaciones si es necesario */
.reset-animation {
    opacity: 0 !important;
    transform: initial !important;
    transition: none !important;
}