body {
    font-family: system-ui, -apple-system, sans-serif;
    -webkit-tap-highlight-color: transparent;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* --- SISTEMA DE ANIMACIONES --- */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes scaleOut {
    from {
        opacity: 1;
        transform: scale(1);
    }

    to {
        opacity: 0;
        transform: scale(0.95);
    }
}

/* Animación específica para el Modal en Móvil (Slide desde abajo) */
@keyframes slideUpMobile {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes slideDownMobile {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(100%);
    }
}

/* Nuevas Animaciones Fluidas */
@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

@keyframes pulseSoft {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.8;
        transform: scale(0.98);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }

    50% {
        opacity: 1;
        transform: scale(1.05);
    }

    70% {
        transform: scale(0.9);
    }

    100% {
        transform: scale(1);
    }
}

/* Utility Classes */
.animate-fade-in {
    animation: fadeIn 0.3s ease-out forwards;
}

.animate-scale-in {
    animation: scaleIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.animate-fade-out {
    animation: fadeOut 0.2s ease-in forwards;
}

.animate-scale-out {
    animation: scaleOut 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.animate-float {
    animation: float 3s ease-in-out infinite;
}

.animate-pulse-soft {
    animation: pulseSoft 2s ease-in-out infinite;
}

.animate-slide-in-right {
    animation: slideInRight 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-slide-in-left {
    animation: slideInLeft 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-bounce-in {
    animation: bounceIn 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

/* Modal Bottom Sheet Classes */
.mobile-sheet-enter {
    animation: slideUpMobile 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.mobile-sheet-exit {
    animation: slideDownMobile 0.3s ease-in forwards;
}

/* Delays */
.delay-0 {
    animation-delay: 0ms;
}

.delay-100 {
    animation-delay: 100ms;
}

.delay-200 {
    animation-delay: 200ms;
}

.delay-300 {
    animation-delay: 300ms;
}

.delay-500 {
    animation-delay: 500ms;
}

/* Hover Effects */
.hover-float:hover {
    animation: float 2s ease-in-out infinite;
}