@charset "utf-8";
/* CSS Document */

        html {
            scroll-behavior: smooth !important;
            scrollbar-width: thin;
            scrollbar-color: #88a90a #e0e0e0;
        }
        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 24;
        }
        body {
            background-color: #f9f9fb;
            color: #1a1c1d;
            font-family: 'Inter', sans-serif;
            font-weight: 300;
        }
        /* Global Bold Removal */
        b, strong, .font-bold, .font-semibold, .font-black, .font-medium {
            font-weight: 300 !important;
        }
        .font-regular {
            font-weight: 400 !important;
        }
        #hero-canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            pointer-events: none;
        }

        /* Scroll Reveal Styles */
        .reveal-item {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 1.2s cubic-bezier(0.21, 0.6, 0.35, 1), transform 1.2s cubic-bezier(0.21, 0.6, 0.35, 1);
            will-change: opacity, transform;
        }
        .reveal-item.is-visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        .delay-100 { transition-delay: 100ms; }
        .delay-200 { transition-delay: 200ms; }
        .delay-300 { transition-delay: 300ms; }
        .delay-400 { transition-delay: 400ms; }
        .delay-500 { transition-delay: 500ms; }
        .delay-600 { transition-delay: 600ms; }
        .service-card {
            transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease !important;
        }
        .service-card:hover {
            border-color: #b1cc25 !important;
            transform: translateY(-4px);
        }
        #servicios, #proyectos, #contacto, #sesaclub {
            scroll-margin-top: 110px;
        }

        .marquee-container {
            overflow: hidden;
            user-select: none;
            display: flex;
            width: 100%;
        }
        .marquee-content {
            display: flex;
            gap: 5rem;
            padding-right: 5rem;
            width: max-content;
        }

        /* Mobile Menu Styles */
        #mobile-menu {
            transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.4s;
        }
        #mobile-menu.hidden-custom {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }
        #mobile-menu.visible-custom {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }
        .menu-link {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        }
        #mobile-menu.visible-custom .menu-link {
            opacity: 1;
            transform: translateY(0);
        }
        
        /* Burger Animation */
        .burger-line {
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s;
        }
        .menu-open .burger-line-1 { transform: translateY(6px) rotate(45deg); }
        .menu-open .burger-line-2 { opacity: 0; }
        .menu-open .burger-line-3 { transform: translateY(-6px) rotate(-45deg); }
    
        .logos-marquee-container {
            overflow: hidden;
            user-select: none;
            -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
        }
        .logos-marquee-content {
            display: flex;
            width: max-content;
            animation: logos-scroll 30s linear infinite;
        }
        .logos-marquee-content:hover { animation-play-state: paused; }
        .logos-list {
            display: flex;
            align-items: center;
            gap: 4rem;
            padding: 0 2rem;
            list-style: none;
            margin: 0;
        }
        .logos-list li {
            display: flex;
            align-items: center;
            flex-shrink: 0;
        }
        .logos-list img {
            height: 48px;
            width: auto;
            object-fit: contain;
            filter: grayscale(0%) opacity(100%);
            transition: filter 0.3s ease;
        }
        .logos-list img:hover {
            filter: grayscale(0%) opacity(100%);
        }
        @keyframes logos-scroll {
            0%   { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }