:root {
            --bg-dark: #050505;
            --bg-card: #151515;
            --phantom-blue: #007bff;
            --phantom-green: #00ff88;
            --text-main: #ffffff;
            --text-readable: #e5e7eb; /* Gris claro de alto contraste */
            --text-sub: #9ca3af;
        }

        body {
            background-color: var(--bg-dark);
            color: var(--text-main);
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            overflow-x: hidden;
            font-weight: 300; /* Letra más delgada en general */
        }

        /* ============================================ */
        /* ESTILOS DEL CUSTOM CURSOR PHANTOM */
        /* ============================================ */

        /* 1. Ocultar el puntero por defecto en toda la web y elementos interactivos */
        body, a, button, .btn {
            cursor: none !important;
        }

        /* 2. Estilo del Punto Central (Rápido) */
        .cursor-dot {
            width: 8px;
            height: 8px;
            background-color: var(--phantom-green); /* Verde neón Phantom */
            position: fixed;
            top: 0;
            left: 0;
            border-radius: 50%;
            z-index: 99999; /* Siempre arriba de todo */
            pointer-events: none; /* No interfiere con clics */
            opacity: 0; /* Oculto inicialmente hasta que se mueva el mouse */
            transition: opacity 0.3s ease;
        }

        /* 3. Estilo del Círculo Externo (Laggeado) */
        .cursor-circle {
            width: 40px;
            height: 40px;
            border: 2px solid rgba(0, 255, 136, 0.4); /* Verde neón transparente */
            position: fixed;
            top: 0;
            left: 0;
            border-radius: 50%;
            z-index: 99998; /* Un nivel abajo del punto */
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.3s ease, border-color 0.3s ease, transform 0.15s ease-out; /* Movimiento suave y cambio de color al hacer hover */
        }

        /* 4. Estilo de Feedback al pasar por botones/enlaces (Hover) */
        body.cursor-hovering #cursor-circle {
            transform: scale(1.5); /* Se agranda */
            background-color: rgba(0, 255, 136, 0.1); /* Relleno verde muy suave */
            border-color: var(--phantom-green); /* Borde verde sólido */
        }

        /* Títulos estilo Copilot (Sin negrita, limpios) */
        h1, h2, h3, h4, .font-tech {
            font-family: 'Inter', sans-serif;
            font-weight: 400 !important; /* Quitamos la negrita */
            letter-spacing: -0.02em; /* Junta un poquito las letras, da un toque muy premium */
        }

        /* Navbar Transparente / Blur */
        .navbar-custom {
            background: rgba(5, 5, 5, 0.8);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(255,255,255,0.05);
        }

        /* Hero Section */
        .hero-section {
            min-height: 100vh;
            display: flex;
            align-items: center;
            background: radial-gradient(circle at 50% 0%, rgba(0, 123, 255, 0.1) 0%, transparent 50%);
            padding-top: 80px;
        }

        .hero-title {
            font-size: 4rem;
            line-height: 1.15;
            color: #ffffff;
            margin-bottom: 1.5rem;
        }

        .hero-subtitle {
            color: var(--text-readable);
            font-size: 1.25rem;
            font-weight: 300;
        }

        /* Botones de Impacto */
        .btn-phantom {
            background: var(--phantom-blue);
            color: white;
            padding: 12px 30px;
            border-radius: 30px;
            font-weight: 400;
            border: none;
            transition: all 0.3s ease;
        }
        .btn-phantom:hover {
            background: #0056b3;
            box-shadow: 0 0 20px rgba(0, 123, 255, 0.4);
            color: white;
        }

        .btn-outline-glow {
            border: 1px solid var(--phantom-green);
            color: var(--phantom-green);
            padding: 12px 30px;
            border-radius: 30px;
            font-weight: 400;
            transition: all 0.3s ease;
        }
        .btn-outline-glow:hover {
            background: rgba(0, 255, 136, 0.1);
            color: var(--phantom-green);
        }

        /* Tarjetas de Servicios (Mejoradas) */
        .service-card {
            background: var(--bg-card);
            border: 1px solid #2a2a2a; /* Borde un poco más visible */
            border-radius: 12px;
            padding: 40px 30px;
            height: 100%;
            transition: transform 0.3s ease, border-color 0.3s ease;
        }
        .service-card:hover {
            transform: translateY(-5px);
            border-color: #444;
        }
        .service-card p {
            color: var(--text-readable); /* Aquí arreglamos el contraste */
            font-size: 0.95rem;
            line-height: 1.6;
        }
        .service-icon {
            font-size: 2rem;
            margin-bottom: 20px;
        }

        /* EVD Section */
        .evd-box {
            background: var(--bg-card);
            border-left: 2px solid var(--phantom-blue);
            padding: 30px;
            border-radius: 8px;
            margin-bottom: 20px;
        }
        .evd-box p {
            color: var(--text-readable);
        }

        /* Formulario CoreTickets Demo */
        .demo-form {
            background: var(--bg-card);
            padding: 50px;
            border-radius: 12px;
            border: 1px solid #2a2a2a;
        }
        .form-control-dark {
            background: #0a0a0a;
            border: 1px solid #333;
            color: white;
            font-weight: 300;
        }
        .form-control-dark::placeholder {
            color: #6b7280;
        }
        .form-control-dark:focus {
            background: #111;
            border-color: var(--phantom-blue);
            color: white;
            box-shadow: none;
        }
        /* =========================================
           EFECTO SCROLL MAGNÉTICO (SNAP)
           ========================================= */
        html {
            /* Activa el magnetismo vertical en toda la página */
            scroll-snap-type: y mandatory;
            scroll-behavior: smooth;
        }

        /* Le decimos al navegador qué secciones deben "imantar" hacia el borde superior */
        .hero-section, 
        .ecosystem-block, 
        #evd, 
        #demo {
            scroll-snap-align: start;
            scroll-snap-stop: always; /* Obliga a frenar en cada bloque, para que no se salten ninguno si giran la rueda muy fuerte */
        }

        /* El footer, como es pequeño, lo imantamos hacia el final */
        footer {
            scroll-snap-align: end;
        }
        .dropdown-menu {
            margin-top: 10px !important;
            transition: all 0.3s ease;
            opacity: 0;
            display: block;
            visibility: hidden;
        }
        .dropdown-menu.show {
            opacity: 1;
            visibility: visible;
        }
        /* Ajuste para que el scroll no tape el inicio del bloque */
        [id] {
            scroll-margin-top: 80px; /* Ajusta este valor según el alto de tu navbar */
        }

        /* Efecto hover suave para el dropdown */
        .dropdown-item {
            transition: background 0.3s ease, padding-left 0.3s ease;
        }

        .dropdown-item:hover {
            background-color: rgba(0, 123, 255, 0.15) !important;
            padding-left: 1.5rem;
            color: var(--phantom-green) !important;
        }

        .ecosystem-block {
            min-height: 100vh; /* Hace que cada bloque ocupe exactamente toda la pantalla */
            display: flex;
            align-items: center;
            padding-top: 80px; /* Da espacio para que el menú de navegación no tape el título */
            border-bottom: 1px solid #1a1a1a;
        }
        
        /* Truco para achicar el contenido del Iframe de BI y que quepa entero */
        .iframe-wrapper {
            width: 100%;
            height: 60vh; /* Usa el 60% del alto de la pantalla */
            border-radius: 8px;
            overflow: hidden;
            border: 1px solid #333;
            background: #121212;
        }
        .iframe-wrapper iframe {
            width: 100%;
            height: 100%;
            border: none;
        }

        /* Grilla para las fotos de CoreTickets */
        .coretickets-gallery img {
            border-radius: 8px;
            border: 1px solid #333;
            transition: transform 0.3s ease;
            cursor: pointer;
        }
        .coretickets-gallery img:hover {
            transform: scale(1.05);
            z-index: 10;
        }
        /* ANIMACIÓN PARA LA PASARELA DE ECOMMERCE */
        @keyframes rotateAndPulseGateway {
            0% { transform: perspective(1000px) rotateY(0deg) scale(1); opacity: 0.9; }
            50% { transform: perspective(1000px) rotateY(5deg) scale(1.05); opacity: 1; }
            100% { transform: perspective(1000px) rotateY(0deg) scale(1); opacity: 0.9; }
        }
        
        .animate-gateway {
            animation: rotateAndPulseGateway 5s ease-in-out infinite;
        }

        @keyframes typing { from { width: 0 } to { width: 100% } }
        @keyframes blink-caret { from, to { border-color: transparent } 50% { border-color: #00ff88; } }

        #phantom-chat-wrapper { 
            position: fixed; bottom: 30px; right: 30px; z-index: 9999; font-family: 'Inter', sans-serif; }
        #chat-bubble { 
            width: 60px; height: 60px; border-radius: 50%; background: #007bff; color: white; border: none; cursor: pointer; transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(0,0,0,0.5); }
        #chat-bubble:hover { 
            transform: scale(1.1); }
        #chat-modal { 
            display: none; width: 350px; height: 500px; background: #121212; border-radius: 12px; flex-direction: column; overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,0.5); margin-bottom: 20px; border: 1px solid #333; }
        #chat-header { 
            background: #050505; color: white; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #333; font-weight: 300; }
        .header-info { 
            display: flex; align-items: center; gap: 8px; }
        .dot { 
            width: 8px; height: 8px; background: #00ff88; border-radius: 50%; display: inline-block; box-shadow: 0 0 10px #00ff88; }
        .header-info small { 
            opacity: 0.7; font-size: 11px; display: block; color: #aaa; }
        .close-btn { 
            background: none; border: none; color: white; font-size: 24px; cursor: pointer; }
        #chat-messages { 
            flex: 1; overflow-y: auto; padding: 20px; background: #0a0a0a; display: flex; flex-direction: column; gap: 12px; }
        .msg-user, .msg-bot { 
            padding: 10px 14px; border-radius: 12px; max-width: 80%; font-size: 14px; line-height: 1.4; color: white; font-weight: 300; }
        .msg-user { 
            align-self: flex-end; background: #007bff; border-bottom-right-radius: 2px; }
        .msg-bot { 
            align-self: flex-start; background: #1a1a1a; border-bottom-left-radius: 2px; border: 1px solid #333; }
        #chat-input-area { 
            padding: 15px; background: #121212; border-top: 1px solid #333; display: flex; gap: 10px; }
        #chat-input { 
            flex: 1; border: none; outline: none; font-size: 14px; background: transparent; color: white; font-weight: 300; }
        #chat-input::placeholder { 
            color: #666; }
        #send-btn { 
            background: none; border: none; color: #007bff; cursor: pointer; transition: 0.2s; }
        #send-btn:hover { 
            color: #00ff88; }