:root {
   --bg: #0c0f14;
   --panel: #7a151d;
   --txt: #f6f7fa;
   --muted: #dbdde1;
   --acc: #e11d48
 }

 * {
   box-sizing: border-box
 }

 body {
   margin: 0;
   font-family: system-ui, -apple system, Segoe UI, Roboto, Ubuntu, Arial, sans-serif;
   background: var(--bg);
   color: var(--txt);
 }



 body {
   margin: 0;
   font-family: Arial, sans-serif;
   display: flex;
 }

 .sidebar {
   width: 250px;
   min-height: 100vh;
   background: url('menu-bg.jpg') no-repeat center center/cover;
   color: white;
   padding: 20px;
   box-shadow: 2px 0 5px rgba(0, 0, 0, 0.5);
 }

 .sidebar .logo {
   font-size: 2rem;
   font-weight: bold;
   text-align: center;
   margin-bottom: 20px;
   padding: 10px;
   font-weight: bold;
   background-color: #7e1212;
   border: 3px solid #7a151d;
   border-radius: 8px;
   display: inline-block;
 }

 .sidebar ul {
   list-style: none;
   padding: 0;
 }

 .sidebar ul li {
   margin: 15px 0;
 }

 .sidebar ul li a {
   color: white;
   text-decoration: none;
   font-size: 1.2rem;
 }

 .sidebar ul li a:hover {
   text-decoration: underline;
 }

 main {
   flex: 1;
   padding: 20px;
 }

 /* Responsividade */









 .logo {
   margin: 0;
   font-size: 28px;
   letter-spacing: 2px;
   color: #fff
 }

 .menu {
   display: flex;
   flex-direction: column;
   gap: 8px
 }

 .menu a {
   color: var(--muted);
   text-decoration: none;
   padding: 10px 12px;
   border-radius: 12px
 }

 .menu a.active,
 .menu a:hover {
   background: #932f2f;
   color: #fff
 }

 .toggle {
   display: none;
   margin-top: auto;
   border: 1px solid #8c0404;
   background: #cb6f6f;
   color: #fff;
   border-radius: 12px;
   padding: 10px 12px;
   cursor: pointer
 }

 .conteudo {
   margin-left: 300px;
   padding: 28px;
   min-height: 100dvh
 }

 .hero {
   background: #7e1212;
   border: 1px solid #ffffff;
   border-radius: 18px;
   padding:
     24px;
   margin-bottom: 20px
 }

 .cta-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 16px
 }

 .cta {
   display: block;
   background: #111625;
   border: 1px solid #232835;
   border-radius:
     16px;
   padding: 16px;
   color: #fff;
   text-decoration: none
 }

 .cta h4 {
   margin: 0 0 6px 0
 }

 .cta p {
   margin: 0;
   color: var(--muted)
 }

 @media (max-width: 900px) {
   .cta-grid {
     grid-template-columns: repeat(2, 1fr)
   }
 }

 @media (max-width: 600px) {
   .conteudo {
     margin-left: 0;
     padding:
       16px
   }

   .sidebar {
     width: 100%;
     height: auto;
     position: sticky;
     top: 0;
     inset: auto auto auto 0;
     flex-direction: row;
     align-items: center;
     gap: 12px
   }

   .menu {
     flex-direction: row;
     flex-wrap: wrap;
     gap:
       6px;
     display: none
   }

   .menu.open {
     display: flex
   }

   .toggle {
     display: inline-block
   }
 }

 /* Celulares a partir de 320px e orientações */
 @media (max-width: 480px) and (min-width: 320px) {
   .logo {
     font-size: 22px
   }

   .cta grid {
     grid-template-columns: 1fr
   }
 }

 @media (orientation: landscape) and (max-height: 480px) {
   .sidebar {
     padding:
       12px
   }

   .conteudo {
     padding: 12px
   }
 }

 @media not all and (min-width: 320px) {
   .conteudo {
     padding: 10px
   }
 }

  @media (max-width: 768px) {
   body {
     flex-direction: column;
   }

   .sidebar {
     width: 100%;
     min-height: auto;
     text-align: center;
   }
 }

 @media screen and (max-width: 480px) and (orientation: portrait) {
   .sidebar .logo {
     font-size: 1.5rem;
   }

   .sidebar ul li a {
     font-size: 1rem;
   }
 }

 @media screen and (max-width: 480px) and (orientation: landscape) {
   .sidebar {
     display: flex;
     justify-content: space-between;
     align-items: center;
   }

   .sidebar ul {
     display: flex;
     gap: 10px;
   }
 }