/* Configuración base */
html {
    background-color: #000000 !important;
}

body {
    font-family: 'Outfit', sans-serif !important;
    background-color: #000000 !important;
    color: #ffffff !important;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

/* Utilidades de animación personalizadas */
.fade-in-section {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    will-change: opacity, transform;
}

.fade-in-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Animación específica para barras de gráficos */
.bar-animate {
    height: 0;
    transition: height 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.is-visible .bar-animate {
    height: var(--target-height);
}

/* Animaciones continuas */
@keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.animate-spin-slow {
    animation: spin-slow 3s linear infinite;
}