:root {
            --bruki-blue:   #0F2648;
            --bruki-dark:   #0A1628;
            --bruki-mid:    #1a2e4a;
            --bruki-accent: #00C2FF;
            --bruki-light:  #F0F6FF;
            --bruki-gray:   #6B7A99;
            --font-main:    'Sora', sans-serif;
            --font-body:    'Inter', sans-serif;
        }

        body { font-family: var(--font-body); color: #2d3748; }
        h1,h2,h3,h4,h5,h6,
        .navbar-brand,
        .section-title { font-family: var(--font-main); }

        /* ─── TOPBAR ─── */
        .topbar-bruki {
            background: var(--bruki-dark);
            padding: 8px 0;
            font-size: 13px;
            color: #8899BB;
        }
        .topbar-bruki a { color: #8899BB; text-decoration: none; }
        .topbar-bruki a:hover { color: #fff; }
        .topbar-bruki .sep { margin: 0 16px; opacity: .3; }

        /* ─── HEADER BRAND ─── */
        .bruki-header {
            background: #fff;
            padding: 16px 0;
            border-bottom: 1px solid #e8edf5;
        }
        .bruki-logo { font-family: var(--font-main); font-weight: 800; font-size: 28px; color: var(--bruki-blue); text-decoration: none; letter-spacing: -1px; }
        .bruki-logo span { color: var(--bruki-dark); }
        .header-contact-item { font-size: 13px; }
        .header-contact-item .label { color: var(--bruki-gray); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; }
        .header-contact-item .value { font-weight: 600; color: var(--bruki-dark); font-family: var(--font-main); }

        /* ─── NAVBAR ─── */
        .navbar-bruki {
            background: var(--bruki-blue) !important;
            padding: 0 !important;
            font-family: var(--font-main);
        }
        .navbar-bruki .nav-link {
            color: rgba(255,255,255,.85) !important;
            font-size: 14px;
            font-weight: 500;
            padding: 18px 18px !important;
            transition: all .2s;
        }
        .navbar-bruki .nav-link:hover,
        .navbar-bruki .nav-link.active { color: #fff !important; background: rgba(255,255,255,.12); }
        .navbar-bruki .dropdown-menu { border-radius: 8px; border: none; box-shadow: 0 8px 32px rgba(0,87,255,.18); margin-top: 0; }
        .navbar-bruki .dropdown-item:hover { background: var(--bruki-light); color: var(--bruki-blue); }
        .btn-bruki-trial {
            background: #fff !important;
            color: var(--bruki-blue) !important;
            font-family: var(--font-main);
            font-weight: 700;
            font-size: 13px;
            border-radius: 100px !important;
            padding: 8px 22px !important;
            transition: all .2s;
        }
        .btn-bruki-trial:hover { background: var(--bruki-accent) !important; color: #fff !important; }

        /* ─── PAGE HERO ─── */
        .rubro-hero {
            background: linear-gradient(135deg, var(--bruki-dark) 0%, var(--bruki-mid) 60%, #0a2347 100%);
            padding: 70px 0 60px;
            position: relative;
            overflow: hidden;
        }
        .rubro-hero::before {
            content: '';
            position: absolute;
            top: -80px; right: -80px;
            width: 420px; height: 420px;
            border-radius: 50%;
            background: var(--bruki-blue);
            opacity: .07;
        }
        .rubro-hero::after {
            content: '';
            position: absolute;
            bottom: -60px; left: 10%;
            width: 280px; height: 280px;
            border-radius: 50%;
            background: var(--bruki-accent);
            opacity: .06;
        }
        .rubro-badge {
            display: inline-flex; align-items: center; gap: 8px;
            background: rgba(0,194,255,.15);
            color: var(--bruki-accent);
            border: 1px solid rgba(0,194,255,.3);
            border-radius: 100px;
            padding: 6px 16px;
            font-size: 12px;
            font-weight: 600;
            font-family: var(--font-main);
            letter-spacing: .5px;
            margin-bottom: 20px;
        }
        .rubro-hero h1 {
            font-family: var(--font-main);
            font-size: clamp(28px, 4vw, 48px);
            font-weight: 800;
            color: #fff;
            line-height: 1.15;
            letter-spacing: -1px;
            margin-bottom: 20px;
        }
        .rubro-hero h1 .highlight { color: var(--bruki-accent); }
        .rubro-hero p { color: rgba(255,255,255,.7); font-size: 16px; line-height: 1.7; max-width: 520px; }
        .rubro-hero .breadcrumb { background: transparent; padding: 0; margin-top: 28px; }
        .rubro-hero .breadcrumb-item a { color: rgba(255,255,255,.5); font-size: 13px; text-decoration: none; }
        .rubro-hero .breadcrumb-item a:hover { color: #fff; }
        .rubro-hero .breadcrumb-item.active { color: var(--bruki-accent); font-size: 13px; }
        .rubro-hero .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.3); }

        /* ─── STATS STRIP ─── */
        .stats-strip { background: var(--bruki-blue); padding: 0; }
        .stat-item {
            text-align: center;
            padding: 24px 16px;
            border-right: 1px solid rgba(255,255,255,.15);
        }
        .stat-item:last-child { border-right: none; }
        .stat-item .num {
            font-family: var(--font-main);
            font-size: 32px;
            font-weight: 800;
            color: #fff;
            line-height: 1;
        }
        .stat-item .num span { font-size: 20px; }
        .stat-item p { color: rgba(255,255,255,.7); font-size: 12px; margin: 6px 0 0; text-transform: uppercase; letter-spacing: .5px; }

        /* ─── PROBLEMAS / SOLUCIONES ─── */
        .section-label {
            display: inline-block;
            background: var(--bruki-light);
            color: var(--bruki-blue);
            font-family: var(--font-main);
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 1px;
            text-transform: uppercase;
            padding: 6px 16px;
            border-radius: 100px;
            margin-bottom: 16px;
        }
        .problema-card {
            background: #fff;
            border: 1px solid #e8edf5;
            border-radius: 12px;
            padding: 24px;
            height: 100%;
            transition: all .25s;
            position: relative;
        }
        .problema-card:hover { border-color: #ffb3b3; box-shadow: 0 4px 20px rgba(220,38,38,.08); transform: translateY(-2px); }
        .problema-card .icon-wrap {
            width: 44px; height: 44px;
            background: #FFF5F5;
            border-radius: 10px;
            display: flex; align-items: center; justify-content: center;
            margin-bottom: 14px;
            font-size: 20px;
        }
        .problema-card h6 { font-family: var(--font-main); font-weight: 700; font-size: 15px; color: var(--bruki-dark); margin-bottom: 8px; }
        .problema-card p { font-size: 14px; color: var(--bruki-gray); margin: 0; line-height: 1.6; }

        /* ─── FEATURES / SOLUCIONES ─── */
        .feature-pill {
            display: flex;
            align-items: flex-start;
            gap: 16px;
            background: #fff;
            border: 1px solid #e8edf5;
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 14px;
            transition: all .25s;
        }
        .feature-pill:hover { border-color: var(--bruki-blue); box-shadow: 0 4px 20px rgba(0,87,255,.08); }
        .feature-pill .fp-icon {
            width: 42px; height: 42px; min-width: 42px;
            background: var(--bruki-light);
            border-radius: 10px;
            display: flex; align-items: center; justify-content: center;
            color: var(--bruki-blue);
            font-size: 18px;
        }
        .feature-pill h6 { font-family: var(--font-main); font-weight: 700; font-size: 14px; color: var(--bruki-dark); margin-bottom: 4px; }
        .feature-pill p { font-size: 13px; color: var(--bruki-gray); margin: 0; line-height: 1.5; }

        /* ─── IMAGEN PRODUCTO ─── */
        .product-visual {
            background: var(--bruki-light);
            border-radius: 20px;
            padding: 40px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        .product-visual::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%230057FF' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        }
        .product-visual img { max-width: 100%; position: relative; z-index: 1; }
        .plan-badge {
            position: absolute;
            top: 20px; right: 20px;
            background: var(--bruki-blue);
            color: #fff;
            font-family: var(--font-main);
            font-size: 12px;
            font-weight: 700;
            padding: 6px 14px;
            border-radius: 100px;
        }

        /* ─── TESTIMONIAL ─── */
        .testimonial-card {
            background: var(--bruki-dark);
            border-radius: 20px;
            padding: 40px;
            position: relative;
            overflow: hidden;
        }
        .testimonial-card::before {
            content: '"';
            position: absolute;
            top: -20px; left: 24px;
            font-size: 160px;
            font-family: var(--font-main);
            color: var(--bruki-blue);
            opacity: .2;
            line-height: 1;
        }
        .testimonial-card .stars { color: #FBBF24; font-size: 18px; margin-bottom: 16px; }
        .testimonial-card blockquote { color: rgba(255,255,255,.85); font-size: 17px; line-height: 1.7; font-style: italic; margin-bottom: 24px; position: relative; z-index: 1; }
        .testimonial-card .author { display: flex; align-items: center; gap: 14px; }
        .testimonial-card .author-avatar {
            width: 48px; height: 48px; border-radius: 50%;
            background: var(--bruki-blue);
            display: flex; align-items: center; justify-content: center;
            font-family: var(--font-main); font-weight: 800; font-size: 18px; color: #fff;
        }
        .testimonial-card .author-name { font-family: var(--font-main); font-weight: 700; color: #fff; font-size: 15px; }
        .testimonial-card .author-biz { color: rgba(255,255,255,.5); font-size: 13px; }

        /* ─── CTA SECTION ─── */
        .cta-section {
            background: linear-gradient(135deg, var(--bruki-blue), #0040CC);
            border-radius: 20px;
            padding: 50px 40px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        .cta-section::after {
            content: '';
            position: absolute;
            bottom: -40px; right: -40px;
            width: 200px; height: 200px;
            border-radius: 50%;
            background: rgba(255,255,255,.07);
        }
        .cta-section h2 { font-family: var(--font-main); font-size: clamp(22px, 3vw, 34px); font-weight: 800; color: #fff; letter-spacing: -1px; margin-bottom: 12px; }
        .cta-section p { color: rgba(255,255,255,.75); font-size: 16px; margin-bottom: 32px; }
        .btn-cta-primary {
            background: #fff;
            color: var(--bruki-blue);
            font-family: var(--font-main);
            font-weight: 800;
            font-size: 15px;
            padding: 14px 32px;
            border-radius: 100px;
            text-decoration: none;
            display: inline-flex; align-items: center; gap: 8px;
            transition: all .2s;
        }
        .btn-cta-primary:hover { background: var(--bruki-accent); color: #fff; transform: translateY(-2px); }
        .btn-cta-whatsapp {
            background: #25D366;
            color: #fff;
            font-family: var(--font-main);
            font-weight: 700;
            font-size: 15px;
            padding: 14px 32px;
            border-radius: 100px;
            text-decoration: none;
            display: inline-flex; align-items: center; gap: 8px;
            transition: all .2s;
        }
        .btn-cta-whatsapp:hover { background: #1ebe5d; color: #fff; transform: translateY(-2px); }
        .price-tag { color: rgba(255,255,255,.6); font-size: 13px; margin-top: 16px; }
        .price-tag strong { color: #fff; }

        /* ─── OTROS RUBROS ─── */
        .rubro-link-card {
            background: #fff;
            border: 1px solid #e8edf5;
            border-radius: 12px;
            padding: 20px;
            text-align: center;
            text-decoration: none;
            display: block;
            transition: all .25s;
            color: var(--bruki-dark);
        }
        .rubro-link-card:hover { border-color: var(--bruki-blue); box-shadow: 0 4px 20px rgba(0,87,255,.1); color: var(--bruki-blue); transform: translateY(-3px); }
        .rubro-link-card .rl-icon { font-size: 28px; margin-bottom: 10px; display: block; }
        .rubro-link-card span { font-family: var(--font-main); font-size: 13px; font-weight: 600; display: block; }

        /* ─── FOOTER ─── */
        .bruki-footer {
            background: var(--bruki-dark);
            padding: 60px 0 0;
            color: rgba(255,255,255,.55);
            font-size: 14px;
        }
        .bruki-footer h5 { color: #fff; font-family: var(--font-main); font-size: 15px; font-weight: 700; margin-bottom: 20px; }
        .bruki-footer a { color: rgba(255,255,255,.55); text-decoration: none; transition: color .2s; display: block; margin-bottom: 8px; }
        .bruki-footer a:hover { color: var(--bruki-accent); }
        .footer-divider { border-top: 1px solid rgba(255,255,255,.08); margin-top: 40px; padding: 20px 0; font-size: 13px; }

        /* ─── BACK TO TOP ─── */
        .back-to-top { background: var(--bruki-blue) !important; border-color: var(--bruki-blue) !important; }

        /* ─── RESPONSIVE ─── */
        @media (max-width: 768px) {
            .stats-strip .stat-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,.1); }
            .stats-strip .stat-item:last-child { border-bottom: none; }
            .cta-section { padding: 36px 24px; }
        }