body { font-family: 'Barlow', sans-serif; color: #fff; }
    
    .how-it-works-hero {
        background: radial-gradient(circle at 50% 50%, #1a1a1a 0%, #000 100%);
        padding: 100px 0;
        border-bottom: 1px solid #222;
    }

    .doc-sidebar .list-group-item {
        font-size: 0.85rem;
        font-weight: 600;
        letter-spacing: 0.5px;
        background: #0f0f0f !important;
        transition: all 0.2s ease;
        border-color: rgba(255,255,255,0.05) !important;
        padding: 15px 20px;
    }

    .doc-sidebar .list-group-item:hover {
        background: #00ffcc !important;
        color: #000 !important;
        padding-left: 25px;
    }

    .doc-sidebar .list-group-item.active {
        background: #00ffcc !important;
        color: #000 !important;
        border-color: #00ffcc !important;
    }

    .module-doc-card {
        background: rgba(255,255,255,0.02);
        border: 1px solid rgba(255,255,255,0.05);
        padding: 20px;
        border-radius: 8px;
        transition: border 0.3s ease;
    }

    .module-doc-card:hover {
        border-color: #00ffcc;
    }

    .text-info { color: #00ffcc !important; }
    .badge-info { background-color: #00ffcc; color: #000; }
    .badge-outline-info { border: 1px solid #00ffcc; color: #00ffcc; background: transparent; }
    
    h3 { letter-spacing: -0.5px; font-weight: 700; text-transform: uppercase; }
    h4 { font-weight: 700; letter-spacing: -0.5px; }
    
    section p {
        line-height: 1.8;
        color: rgba(255,255,255,0.7);
    }

    .italic { font-style: italic; }
    .x-small { font-size: 0.75rem; }

    /* Scroll behavior */
    html { scroll-behavior: smooth; }

    /* Sticky sidebar adjustment */
    .sticky-top {
        z-index: 5;
    }

    .rm-panel {
        box-shadow: 0 40px 100px rgba(0,0,0,0.8);
    }

    .table th { border-top: none; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 1px; color: #00ffcc; }
    .table td { vertical-align: middle; border-color: #222; }

    /* Animaciones */
    .animated { animation-duration: 0.8s; animation-fill-mode: both; }
    @keyframes fadeInDown {
        from { opacity: 0; transform: translate3d(0, -30px, 0); }
        to { opacity: 1; transform: translate3d(0, 0, 0); }
    }
    .fadeInDown { animation-name: fadeInDown; }
    @keyframes fadeInUp {
        from { opacity: 0; transform: translate3d(0, 30px, 0); }
        to { opacity: 1; transform: translate3d(0, 0, 0); }
    }
    .fadeInUp { animation-name: fadeInUp; }