main.container {
     position: relative;
     margin-top: -1.25rem;
     z-index: 2;
 }


 .note-box {
     padding: 1.1rem;
     background: var(--ui-surface);
     border: 1px solid var(--ui-border);
     border-radius: var(--ui-radius-md);
     box-shadow: var(--ui-shadow-1);
 }


 .step-num {
     width: 52px;
     height: 52px;
     display: grid;
     place-items: center;
     border-radius: 1rem;
     background: #1f1c3e;
     color: #fff;
     font-weight: 700;
     font-size: 1.1rem;
 }


 .badge-custom {
     font-size: .8rem;
     font-weight: 700;
     padding: .45rem .75rem;
     border: 1px solid transparent;
 }

 .badge-custom.prep {
     background: rgba(31, 28, 62, 0.08) !important;
     color: var(--navy) !important;
     border-color: rgba(31, 28, 62, 0.12);
 }

 .badge-custom.classe {
     background: rgba(124, 188, 180, 0.18) !important;
     color: #20544e !important;
     border-color: rgba(124, 188, 180, 0.28);
 }

 .badge-custom.async {
     background: rgba(186, 53, 76, 0.10) !important;
     color: #8d2640 !important;
     border-color: rgba(186, 53, 76, 0.18);
 }


 .tag {
     padding: .5rem .85rem;
     border: 1px solid var(--border-soft);
     border-radius: 999px;
     background: #f3f6fa;
     color: #27324b;
 }




 p,
 li,
 dd,
 .lead {
     color: #2a3247;
 }


 .meta-badges {
     display: flex;
     flex-wrap: wrap;
     gap: .6rem;
 }


 /* Mobile */
 @media (max-width: 991.98px) {
     main.container {
         margin-top: 0;
     }

     .topbar::after {
         height: 90px;
         bottom: -50px;
     }
 }

 @media (max-width: 575.98px) {
     .step-num {
         width: 44px;
         height: 44px;
         border-radius: .8rem;
         font-size: 1rem;
     }

     .fact-item,
     .mini-stat,
     .fair-box,
     .note-box {
         border-radius: .9rem;
     }
 }