@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;600;800&display=swap');

body { 
    background-color: #0a0a0c; 
    cursor: none; /* Ocultar cursor nativo */
}

/* Cursor Personalizado */
#custom-cursor {
    width: 20px; height: 20px;
    background: #F37A21;
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    mix-blend-mode: difference;
    transition: transform 0.1s ease-out;
}
#cursor-follower {
    width: 40px; height: 40px;
    border: 1px solid #008BCE;
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 9998;
    transition: transform 0.2s ease-out;
}

/* Parallax Hero */
.hero-bg {
    background: linear-gradient(rgba(10, 10, 12, 0.7), rgba(10, 10, 12, 0.9)), 
                url('https://images.unsplash.com/photo-1542744173-8e7e53415bb0?auto=format&fit=crop&q=80&w=2070');
    background-size: cover;
    background-position: center;
    transform: scale(1.1);
}

/* Reveal Animation Helpers */
.reveal-box {
    position: relative;
    overflow: hidden;
}
.reveal-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: #F37A21;
    z-index: 2;
    transform: translateX(-100%);
}

/* Glassmorphism */
.glass-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Service Hover */
.service-card:hover .service-icon {
    transform: scale(1.1) rotate(5deg);
    color: #F37A21;
}

.chart-container {
    position: relative; width: 100%; height: 350px;
}

/* Section Transition */
.reveal-up { opacity: 0; transform: translateY(30px); }

.gsap-title span { 
    display: inline-block; 
}

/* Carousel Helpers */
.projects-overflow { overflow: hidden; width: 100%; }
.projects-track { display: flex; width: max-content; }

.project-item:hover .project-overlay {
    opacity: 1;
}
.project-item img {
    transition: transform 0.5s ease;
}

/* Brands Marquee */
.brands-wrapper {
    mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

.brands-track img {
    max-height: 50px;
    width: auto;
    display: block;
}

@media (max-width: 1024px) {
    #custom-cursor, #cursor-follower { display: none; }
    body { cursor: auto; }
}