:root{
            --cb-violet: #6d28d9; /* violeta sólido principal */
            --cb-violet-deep: rgba(109,40,217,.62);
            --cb-violet-soft: rgba(109,40,217,.22);
            --cb-ink: #0b0b12;
            --cb-line: rgba(255,255,255,.14);
            --cb-white: #fff;
        }

        /* ==== NAVBAR BASE ==== */
        .cb-nav{
            border:0;
            margin:0;

            /* clave: pegado arriba siempre */
            position: sticky;
            top: 0;
            z-index: 1040;

            background: #13042f;
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            box-shadow:
                0 18px 50px rgba(0,0,0,.42),
                0 1px 0 rgba(189, 6, 6, 0.06) inset;

            overflow: hidden;
        }

        /* “Aura” violeta SIN degradé: un overlay sólido con blur */
        .cb-nav::before{
            content:"";
            position:absolute;
            inset:-40px -40px auto -40px;
            height: 120px;
            background: var(--cb-violet);
            opacity: .22;
            filter: blur(32px);
            pointer-events:none;
        }

        /* Borde violeta fino pro */
        .cb-nav::after{
            content:"";
            position:absolute;
            left:0; right:0; bottom:0;
            height:1px;
            background: rgba(109,40,217,.55);
            pointer-events:none;
        }

        .cb-nav .container{
            width:100%;
            max-width: 1220px;
        }

        .cb-nav__row{
            position:relative;
            display:flex;
            align-items:center;
            justify-content:space-between;
            min-height: 74px;
            gap: 14px;
        }

        /* ==== BRAND ==== */
        .cb-brand{
            display:flex;
            align-items:center;
            gap: 12px;
            text-decoration:none !important;
            padding: 10px 0;
        }
        .cb-brand__logo{
            height: 34px;
            width:auto;
            border-radius: 10px;
            box-shadow: 0 12px 22px rgba(0,0,0,.25);
        }

        /* pill de marca, violeta sólido */
        .cb-brand__pill{
            display:inline-flex;
            align-items:center;
            gap: 10px;
            padding: 8px 12px;
            border-radius: 999px;
            background: rgba(109,40,217,.22);
            border: 1px solid rgba(109,40,217,.45);
            box-shadow:
                0 10px 26px rgba(109,40,217,.12),
                0 1px 0 rgba(255,255,255,.06) inset;
        }
        .cb-brand__dot{
            width:10px; height:10px;
            border-radius:999px;
            background: var(--cb-violet);
            box-shadow: 0 0 0 6px rgba(109,40,217,.16);
        }
        .cb-brand__name{
            color: rgba(255,255,255,.94);
            font-weight: 950;
            letter-spacing: -.02em;
            font-size: 12px;
            text-transform: uppercase;
            opacity: .98;
        }

        /* ==== TOGGLE ==== */
        .cb-toggle{
            display:none;
            border: 1px solid rgba(255,255,255,.16);
            background: rgba(255,255,255,.06);
            border-radius: 14px;
            width: 46px;
            height: 44px;
            padding: 0;
            position: relative;
        }

        .cb-toggle__icon,
        .cb-toggle__icon:before,
        .cb-toggle__icon:after{
            content:"";
            position:absolute;
            left: 12px;
            right: 12px;
            height: 2px;
            border-radius: 2px;
            background: rgba(255,255,255,.92);
            transition: transform .18s ease, top .18s ease, opacity .18s ease;
        }
        .cb-toggle__icon{ top: 21px; }
        .cb-toggle__icon:before{ top: -7px; }
        .cb-toggle__icon:after{ top: 7px; }

        .cb-toggle[aria-expanded="true"] .cb-toggle__icon{ opacity:0; }
        .cb-toggle[aria-expanded="true"] .cb-toggle__icon:before{ top:0; transform: rotate(45deg); opacity:1; }
        .cb-toggle[aria-expanded="true"] .cb-toggle__icon:after{ top:0; transform: rotate(-45deg); opacity:1; }

        /* ==== LINKS ==== */
        .cb-collapse{ width:100%; }
        .cb-links{
            margin:0;
            display:flex;
            align-items:center;
            gap: 6px;
        }

        .cb-link{
            color: rgba(255,255,255,.88) !important;
            font-weight: 900;
            letter-spacing: .01em;
            padding: 14px 14px !important;
            border-radius: 14px;
            display:inline-flex !important;
            align-items:center;
            gap:10px;
            position: relative;
            transition: background .16s ease, transform .16s ease, color .16s ease;
        }

        .cb-link i{ opacity:.9; font-size: 15px; }

        .cb-link:hover{
            color: #fff !important;
            background: rgba(255,255,255,.06) !important;
            transform: translateY(-1px);
        }

        /* underline minimalista: violeta sólido */
        .cb-underline{
            position:absolute;
            left:14px; right:14px; bottom:9px;
            height:2px;
            border-radius:999px;
            background: rgba(109,40,217,.95);
            opacity: 0;
            transform: scaleX(.65);
            transform-origin:center;
            transition: opacity .18s ease, transform .18s ease;
        }

        li.active .cb-link{
            background: rgba(109,40,217,.16) !important;
            color:#fff !important;
        }
        li.active .cb-underline{
            opacity: 1;
            transform: scaleX(1);
        }

        /* ==== ACTIONS ==== */
        .cb-actions{
            margin-left:auto;
            display:flex;
            align-items:center;
            gap: 10px;
            padding: 8px 0;
        }

        .cb-btn{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            padding: 10px 14px;
            border-radius: 999px;
            font-weight: 950;
            text-decoration:none !important;
            letter-spacing: .01em;
            border: 1px solid transparent;
            transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
            white-space: nowrap;
        }

        /* ghost */
        .cb-btn--ghost{
            color: rgba(255,255,255,.92) !important;
            background: rgba(255,255,255,.06);
            border-color: rgba(255,255,255,.14);
        }
        .cb-btn--ghost:hover{
            background: rgba(255,255,255,.10);
            transform: translateY(-1px);
        }

        /* primary SOLIDO violeta, sin degradé */
        .cb-btn--primary{
            color: #fff !important;
            background: var(--cb-violet);
            border-color: rgba(109,40,217,.8);
            box-shadow:
                0 16px 30px rgba(109,40,217,.22),
                0 1px 0 rgba(255,255,255,.14) inset;
        }
        .cb-btn--primary:hover{
            transform: translateY(-1px);
            box-shadow:
                0 22px 44px rgba(109,40,217,.28),
                0 1px 0 rgba(255,255,255,.18) inset;
        }

        /* spacer (compensa el alto del navbar) */
        .cb-nav__spacer{ height: 78px; }

        /* focus */
        .cb-nav a:focus,
        .cb-nav button:focus{
            outline:none;
            box-shadow: 0 0 0 3px rgba(109,40,217,.35);
        }

        /* mobile */
        @media (max-width: 991px){
            .cb-nav .container{ padding-left:14px; padding-right:14px; }
            .cb-toggle{ display:inline-block; }
            .cb-nav__row{ flex-wrap: wrap; }

            /* clave: cuando abre el menú en mobile, que siga pegado y con fondo */
            .cb-collapse{
                background: rgba(10,10,16,.95);
                backdrop-filter: blur(16px);
                -webkit-backdrop-filter: blur(16px);
                border-radius: 0 0 18px 18px;
                padding-bottom: 10px;
            }

            .cb-links{ display:block; margin-top:10px; }
            .cb-link{ width:100%; justify-content:flex-start; padding: 14px 12px !important; }
            .cb-underline{ display:none; }

            .cb-actions{
                display:grid;
                grid-template-columns: 1fr;
                gap: 10px;
                margin-top: 10px;
            }
            .cb-btn{ width:100%; }
        }

        /* opcional: efecto “más sólido” al scrollear */
        .cb-nav.is-scrolled{
            background: rgba(10,10,16,.82);
            box-shadow:
                0 18px 60px rgba(0,0,0,.55),
                0 1px 0 rgba(255,255,255,.06) inset;
        }

        /* Fallback: si sticky no existe, lo fijamos */
        .cb-nav.is-fixed-fallback{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
        }