:root {
            --bg-primary: #0A0F1F;
            --bg-secondary: #10172B;
            --text-primary: #F8F9FA;
            --text-secondary: #A0AEC0;
            --text-tertiary: #6B7280;
            --accent-purple: #7C3AED; /* Usado para Alpha y Pro */
            --accent-cyan: #22D3EE;    /* Usado para Pro */
            --accent-pink: #F472B6;    /* Explorador */
            --accent-green: #10B981;  /* Full */
            --accent-orange: #F59E0B; /* Empresa */
            --border-subtle: rgba(118, 61, 242, 0.15);
            --glass-bg: rgba(16, 23, 43, 0.75);
            --glass-border: rgba(118, 61, 242, 0.2);
            --alpha-overlay-bg: rgba(10, 15, 31, 0.85); /* Fondo del overlay Alpha */
        }

        html { scroll-behavior: smooth; }
        body {
            font-family: 'Space Grotesk', sans-serif;
            background-color: var(--bg-primary);
            color: var(--text-primary);
            overflow-x: hidden;
        }

        ::-webkit-scrollbar { width: 8px; height: 8px; }
        ::-webkit-scrollbar-track { background: rgba(30, 58, 138, 0.1); }
        ::-webkit-scrollbar-thumb { background: rgba(118, 61, 242, 0.6); border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: rgba(39, 222, 242, 0.8); }

        .glass-effect {
            background: var(--glass-bg);
            backdrop-filter: blur(18px); /* Mayor blur */
            border: 1px solid var(--glass-border);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .glass-effect-light {
            background: rgba(16, 23, 43, 0.5); /* Más sutil */
            backdrop-filter: blur(10px);
            border: 1px solid rgba(118, 61, 242, 0.1);
        }
        .glass-effect:hover, .glass-effect-light:hover {
            border-color: rgba(118, 61, 242, 0.45);
            box-shadow: 0 10px 40px rgba(118, 61, 242, 0.18);
        }

        .gradient-text {
            background: linear-gradient(135deg, var(--accent-purple), var(--accent-cyan));
            -webkit-background-clip: text; background-clip: text; color: transparent;
        }
        .gradient-text-alt {
            background: linear-gradient(135deg, var(--accent-pink), var(--accent-purple));
            -webkit-background-clip: text; background-clip: text; color: transparent;
        }
        .gradient-heading { /* Para títulos de sección */
            background: linear-gradient(90deg, var(--text-primary), var(--text-secondary));
            -webkit-background-clip: text; background-clip: text; color: transparent;
            padding-bottom: 0.5rem; /* Espacio para el borde inferior */
            border-bottom: 1px solid var(--border-subtle);
            display: inline-block; /* Para que el borde se ajuste */
        }

        .gradient-border {
            position: relative; background: linear-gradient(90deg, var(--accent-purple), var(--accent-cyan));
            padding: 1.5px; transition: all 0.3s ease; display: inline-block; border-radius: 0.75rem; /* rounded-xl */
        }
        .gradient-border > * {
            background-color: var(--bg-primary); border-radius: calc(0.75rem - 1.5px);
        }
        .gradient-border:hover > *, .gradient-border-alt:hover > *{
            background-color: #10172B; /* Ligeramente más claro */
        }
        .gradient-border:hover, .gradient-border-alt:hover {
            transform: translateY(-3px) scale(1.02); box-shadow: 0 15px 45px rgba(118, 61, 242, 0.4);
        }
        .gradient-border-alt:hover {
            box-shadow: 0 15px 45px rgba(244, 114, 182, 0.3); /* Sombra rosa/púrpura */
        }

        .nav-link {
            position: relative; transition: all 0.3s ease; color: var(--text-secondary); padding: 0.5rem 0.25rem; /* Padding sutil */
        }
        .nav-link:hover { color: var(--text-primary); }
        .nav-link.active { color: var(--text-primary); font-weight: 600; }
        .nav-link::after {
            content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 2px;
            background: linear-gradient(90deg, var(--accent-purple), var(--accent-cyan));
            transform: scaleX(0); transition: transform 0.35s ease; transform-origin: center; /* Origen centrado */
        }
        .nav-link:hover::after { transform: scaleX(0.6); } /* Más sutil */
        .nav-link.active::after, .nav-link:hover::after {
            content: ''; position: absolute; bottom: -6px; left: 50%; width: 6px; height: 6px; /* Círculo indicador */
            background: var(--accent-cyan); border-radius: 50%; transform: translateX(-50%) scale(1);
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .nav-link:not(.active)::after { transform: translateX(-50%) scale(0); }

        .bg-grid-pattern {
            background-image:
                linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
            background-size: 60px 60px; /* Patrón más espaciado */
        }

        @keyframes fadeIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
        .animate-fadeInUp { animation: fadeIn 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
        .animate-fadeInUp-delay-1 { animation: fadeIn 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s forwards; opacity: 0;}
        .animate-fadeInUp-delay-2 { animation: fadeIn 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.4s forwards; opacity: 0;}
        .animate-fadeInUp-delay-base { animation: fadeIn 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; opacity: 0; }
        .animate-fadeInUp-delay-3 { animation-delay: 0.45s; }
        .animate-fadeInUp-delay-4 { animation-delay: 0.6s; }

        .process-step {
            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); /* Smooth transition */
            flex: 1 1 180px; min-width: 180px;
        }
        .process-step:hover {
            transform: translateY(-8px) scale(1.05);
            box-shadow: 0 15px 35px rgba(118, 61, 242, 0.25);
        }
        .process-arrow { color: rgba(118, 61, 242, 0.25); transition: color 0.3s ease; }
        .process-step:hover + .process-arrow, .process-arrow:has(+ .process-step:hover) { /* Difícil sin JS, simplificado */
             /* Idealmente la flecha antes del elemento hover se resaltaría */
        }
        /* Alpha Banner Styles */
        .alpha-banner-container {
            position: relative;
            padding: 3rem 0; /* Espacio arriba y abajo del banner */
            margin-bottom: 2rem; /* Espacio antes de los planes */
        }
        .alpha-banner {
            background: var(--alpha-overlay-bg);
            backdrop-filter: blur(24px); /* Más blur que el glass normal */
            border: 1px solid rgba(118, 61, 242, 0.25);
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
            z-index: 20; /* Asegurar que esté sobre el grid de precios si hay superposición */
        }
        @keyframes pulseGlow {
            0%, 100% { box-shadow: 0 0 15px rgba(124, 58, 237, 0.3), 0 0 30px rgba(124, 58, 237, 0.1); }
            50% { box-shadow: 0 0 30px rgba(124, 58, 237, 0.6), 0 0 60px rgba(124, 58, 237, 0.2); }
        }
        .alpha-glow {
            position: absolute;
            top: -1px; bottom: -1px; left: -1px; right: -1px;
            border-radius: 1.25rem; /* rounded-2xl */
            border: 1px solid transparent; /* Para que el shadow se vea */
            animation: pulseGlow 4s ease-in-out infinite;
             pointer-events: none; /* Para no interferir con el contenido */
             z-index: -1; /* Detrás del contenido del banner */
        }


        /* Área de destaque para pasos centrales */
        .process-highlight-area {
             background: rgba(118, 61, 242, 0.02); /* Fondo casi imperceptible */
             border: 1px solid rgba(118, 61, 242, 0.08);
             border-radius: 1.5rem; /* rounded-3xl */
             padding: 1rem;
             margin: 0 -1rem; /* Compensar padding */
        }

        .genesisx-work-card {
            border: 2px solid transparent; background-clip: padding-box;
            border-image: linear-gradient(145deg, var(--accent-purple), var(--accent-cyan)) 1;
            box-shadow: 0 18px 50px rgba(118, 61, 242, 0.18);
            transition: all 0.45s cubic-bezier(0.165, 0.84, 0.44, 1);
        }
        .genesisx-work-card:hover {
            box-shadow: 0 25px 65px rgba(118, 61, 242, 0.3);
            transform: translateY(-5px);
        }

        /* Estilos "Transforma tus datos" V2 */
        .transform-card {
            background: rgba(14, 21, 44, 0.6); /* Ligeramente diferente al glass principal */
            border: 1px solid rgba(118, 61, 242, 0.15);
            backdrop-filter: blur(10px);
            transition: all 0.35s ease;
        }
        .transform-card:hover {
             background: rgba(14, 21, 44, 0.8);
             border-color: rgba(118, 61, 242, 0.3);
             transform: translateY(-6px);
        }
        .file-item { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); }
        .file-item:hover { background: rgba(255, 255, 255, 0.08); }
        .role-button { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); }
        .role-button.active { background: linear-gradient(135deg, var(--accent-purple), var(--accent-cyan)); color: white; border-color: transparent; }
        .role-button:hover:not(.active) { background: rgba(255, 255, 255, 0.12); }
        .processing-indicator { background: rgba(118, 61, 242, 0.1); border: 1px solid rgba(118, 61, 242, 0.3); }
        .result-metric { background: rgba(39, 222, 242, 0.05); border: 1px solid rgba(39, 222, 242, 0.15); }
        .chart-bar { background: linear-gradient(to top, var(--accent-cyan), var(--accent-purple)); opacity: 0.6; transition: opacity 0.3s ease; }
        .chart-container:hover .chart-bar { opacity: 0.85; }
        .export-button { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); }
        .export-button:hover { background: rgba(39, 222, 242, 0.15); border-color: rgba(39, 222, 242, 0.3); color: var(--accent-cyan); }

        .company-logo {
            filter: brightness(0.6) grayscale(100%); /* Aún más sutil inicialmente */
            opacity: 0.6; transition: all 0.4s ease;
        }
        .company-logo:hover { filter: brightness(1) grayscale(0%); opacity: 1; transform: scale(1.1); }

        h1, h2, h3 { text-shadow: 0 2px 20px rgba(0,0,0,0.2); } /* Sombra sutil a títulos */
/* Pricing Card Styles */
        .pricing-card {
            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
            border-radius: 1.5rem; /* rounded-3xl */
            display: flex; flex-direction: column;
            border: 1px solid var(--border-subtle);
            position: relative; /* Para z-index */
             z-index: 10;
        }
        .pricing-card:hover {
            transform: translateY(-10px) scale(1.02);
            box-shadow: 0 20px 55px rgba(0, 0, 0, 0.35);
            border-color: rgba(118, 61, 242, 0.4);
        }
        .pricing-card.highlighted {
             transform: scale(1.05);
             border-color: var(--accent-cyan);
        }

        /* Agentes IA Cards */
        .agent-card {
            transition: all 0.45s cubic-bezier(0.165, 0.84, 0.44, 1);
            border-top-width: 4px; /* Borde superior más grueso */
            background: linear-gradient(180deg, rgba(16, 23, 43, 0.85), rgba(16, 23, 43, 0.7)); /* Fondo más oscuro y nítido */
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        }
        .agent-card:hover {
            transform: translateY(-10px) scale(1.03);
            box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
        }
        .agent-card ul { list-style: none; padding-left: 0; }
        .agent-card li {
            position: relative; padding-left: 1.8rem; margin-bottom: 0.9rem;
            font-size: 0.95rem; line-height: 1.65; color: var(--text-secondary);
        }
        .agent-card li::before { /* Bullet más estilizado */
            content: ''; position: absolute; left: 0.5rem; top: 0.4em; width: 6px; height: 6px;
            border-radius: 50%; transition: background-color 0.3s ease;
        }
        .border-c-level { border-color: var(--accent-cyan); }
        .text-c-level { color: var(--accent-cyan); font-weight: 600; }
        .list-c-level li::before { background-color: var(--accent-cyan); box-shadow: 0 0 8px var(--accent-cyan); }

        .border-analista { border-color: var(--accent-pink); }
        .text-analista { color: var(--accent-pink); font-weight: 600; }
        .list-analista li::before { background-color: var(--accent-pink); box-shadow: 0 0 8px var(--accent-pink); }

        .border-operativo { border-color: var(--accent-purple); }
        .text-operativo { color: var(--accent-purple); font-weight: 600; }
        .list-operativo li::before { background-color: var(--accent-purple); box-shadow: 0 0 8px var(--accent-purple); }

        .border-documental { border-color: var(--accent-blue); }
        .text-documental { color: var(--accent-blue); font-weight: 600; }
        .list-documental li::before { background-color: var(--accent-blue); box-shadow: 0 0 8px var(--accent-blue); }

        /* Primary Features Cards (NLQ, Security, Auto-Insight) */
        .primary-feature-card {
            transition: all 0.4s ease;
            background: linear-gradient(145deg, rgba(16, 23, 43, 0.8), rgba(30, 58, 138, 0.3));
        }
        .primary-feature-card:hover {
             transform: translateY(-8px);
             box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
        }
        .primary-feature-icon {
            background: linear-gradient(135deg, var(--accent-purple), var(--accent-cyan));
            transition: all 0.3s ease;
        }
        .primary-feature-card:hover .primary-feature-icon {
            transform: scale(1.1) rotate(-5deg);
             box-shadow: 0 8px 25px rgba(118, 61, 242, 0.4);
        }

        /* Secondary Features Cards */
        .secondary-feature-card {
            transition: all 0.35s ease;
            background: rgba(16, 23, 43, 0.5); /* Más sutil que primary */
        }
        .secondary-feature-card:hover {
             background: rgba(16, 23, 43, 0.7);
             transform: translateY(-5px);
             border-color: rgba(118, 61, 242, 0.3);
        }
        .secondary-feature-icon {
            color: var(--accent-cyan); /* Icono con color cyan */
            background: rgba(34, 211, 238, 0.1); /* Fondo sutil cyan */
            transition: all 0.3s ease;
        }
        .secondary-feature-card:hover .secondary-feature-icon {
             background: rgba(34, 211, 238, 0.15);
             color: white;
             transform: scale(1.05);
        }
/* Estilos para casos de uso añadidos desde casos_de_uso.html */

.gradient-text-alt {
    background: linear-gradient(135deg, var(--accent-pink), var(--accent-purple));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

.gradient-heading {
    background: linear-gradient(90deg, var(--text-primary) 80%, var(--text-secondary)); /* Más blanco */
    -webkit-background-clip: text; background-clip: text; color: transparent;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--border-subtle);
    display: inline-block;
}

/* Filter Buttons */
.filter-button {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}
.filter-button:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(118, 61, 242, 0.3);
    color: var(--text-primary);
}
.filter-button.active {
    background: linear-gradient(135deg, var(--accent-purple), var(--accent-cyan));
    color: white;
    font-weight: 600;
    border-color: transparent;
}

/* Use Case Item Styling */
.use-case-item {
    display: block; /* Make the whole thing clickable */
    position: relative;
    border-radius: 1rem; /* rounded-2xl */
    overflow: hidden;
    background-color: var(--bg-secondary);
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.05); /* Borde muy sutil */
}
.use-case-item:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
.use-case-image {
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.use-case-item:hover .use-case-image {
    transform: scale(1.05);
}
.use-case-content {
    position: relative; /* Para asegurar que esté sobre el gradiente */
    z-index: 10;
}
.use-case-overlay { /* Gradiente sobre la imagen */
     position: absolute;
     inset: 0;
     background: linear-gradient(to top, rgba(10, 15, 31, 0.95) 0%, rgba(10, 15, 31, 0.7) 30%, rgba(10, 15, 31, 0.1) 60%, transparent 100%);
     z-index: 5;
}
.use-case-tag {
    display: inline-block;
    padding: 0.25rem 0.75rem; /* py-1 px-3 */
    font-size: 0.75rem; /* text-xs */
    font-weight: 500; /* medium */
    border-radius: 9999px; /* rounded-full */
    border: 1px solid;
    backdrop-filter: blur(5px);
}

/* Colores específicos para tags */
.tag-retail { background-color: rgba(244, 114, 182, 0.1); border-color: rgba(244, 114, 182, 0.3); color: var(--accent-pink); }
.tag-fintech { background-color: rgba(34, 211, 238, 0.1); border-color: rgba(34, 211, 238, 0.3); color: var(--accent-cyan); }
.tag-logistica { background-color: rgba(59, 130, 246, 0.1); border-color: rgba(59, 130, 246, 0.3); color: var(--accent-blue); }
.tag-salud { background-color: rgba(16, 185, 129, 0.1); border-color: rgba(16, 185, 129, 0.3); color: var(--accent-green); }
.tag-marketing { background-color: rgba(245, 158, 11, 0.1); border-color: rgba(245, 158, 11, 0.3); color: var(--accent-orange); }
.tag-operaciones { background-color: rgba(124, 58, 237, 0.1); border-color: rgba(124, 58, 237, 0.3); color: var(--accent-purple); }