body {
     background: #f5f5f5;
 }

 /* HEADER */
 header {
     height: 60px;
     background: white;
     position: sticky;
     top: 0;
     z-index: 1000;
     border-bottom: 1px solid #ddd;
 }

 /* LAYOUT */
 .layout {
     display: flex;
     align-items: flex-start;
 }

 /* SIDEBAR DESKTOP */
 .barra_lateral {
     width: 100%;
     max-width: 250px;
     background: white;
     padding: 15px;
     border-right: 1px solid #eee;
     height: calc(100vh - 60px);
     position: sticky;
     top: 60px;
     overflow-y: auto;
 }

 /* CONTEÚDO */
 .conteudo {
     flex: 1;
     padding: 20px;
 }

 /* BANNER */
 .banner {
     background: linear-gradient(to right, #C90B0C, #a53c3c);
     border-radius: 12px;
     padding: 20px;
     color: white;
     display: flex;
     gap: 20px;
     align-items: center;
     margin-bottom: 20px;
     flex-wrap: wrap;
 }

 /* CARDS GRID */
 .cards {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
     gap: 20px;
 }

 /* BOTÃO FECHAR — ESCONDIDO NO DESKTOP */
 .sidebar-header button {
     display: none;
 }

 /* OVERLAY DESKTOP DESATIVADO */
 .overlay {
     display: none;
 }

 /* =========================
   MOBILE
========================== */
 @media (max-width:991px) {

     /* BOTÃO ABRIR FILTRO (ABAIXO HEADER) */
     .btn-abrir-filtro {
         display: block;
         width: 100%;
         border-radius: 0;
     }

     /* SIDEBAR MOBILE FULLSCREEN */
     .barra_lateral {
         position: fixed;
         top: 0;
         left: 0;
         width: 100vw;
         height: 100vh;
         max-width: 100vw;
         background: white;
         z-index: 2000;

         transform: translateX(-100%);
         transition: transform .3s ease;

         display: flex;
         flex-direction: column;
         padding: 0;
         border-right: none;
     }

     .barra_lateral.ativa {
         transform: translateX(0);
     }

     /* HEADER INTERNO */
     .sidebar-header {
         display: flex;
         justify-content: space-between;
         align-items: center;
         padding: 15px;
         border-bottom: 1px solid #eee;
         background: white;
         position: sticky;
         top: 0;
         z-index: 10;
     }

     /* BOTÃO FECHAR VISÍVEL NO MOBILE */
     .sidebar-header button {
         display: inline-flex;
     }

     /* CORPO SCROLL */
     .sidebar-body {
         flex: 1;
         overflow-y: auto;
         padding: 15px;
     }

     /* FOOTER FIXO */
     .sidebar-footer {
         padding: 15px;
         border-top: 1px solid #eee;
         background: white;
         position: sticky;
         bottom: 0;
     }

     /* OVERLAY ATIVO NO MOBILE */
     .overlay {
         display: block;
         position: fixed;
         inset: 0;
         background: rgba(0, 0, 0, .45);
         z-index: 1500;

         opacity: 0;
         pointer-events: none;
         transition: opacity .3s ease;
     }

     .overlay.ativo {
         opacity: 1;
         pointer-events: all;
     }

     /* LAYOUT MOBILE */
     .layout {
         display: block;
     }
 }