/* ========= ESTILO GERAIS ======== */
body {
    font-family: Arial, sans-serif; 
    background: linear-gradient(to right, #a8d8ff, #e0f7ff); /* degrade azul clarinho */
    color: #222; 
    margin: 0;
    padding: 0;
}

/* Transição suave para dark mode */
body, header, footer, h2, h3, a, button {
   transition: background-color 0.5 ease, color 0.5s ease;
}

/* ========= HEADER GERAL ======= */
   header {
    background-color: #0077b6; /*azul mais forte */
    color: white;
    padding: 20px;
    text-align: center;
    border-radius: 0 0 20px 20px;
    box-shadow: 0px 4px 8px rgba(0,0,0,0.2);
}
 
   h1 {
    margin: 0;
    font-size: 2.5em;
}

/* ====== MAIN GERAL ======== */
   main {
    padding: 20px;
    text-align: center;
}

/* ======== TÍTULOS ====== */
   h2, h3 {
    color: #005f73;
}
   h2 {
    margin-top: 30px;
}

/* ====== MENU HAMBÚRGUER ======= */

.hamburger {
   display: none; /* só aparece no mobile */
   font-size: 28px;
   color: white;
   cursor: pointer;
   padding: 10px 20px;
}

/* Coitainer dos links */
.menu-links {
   display: flex;
   justify-content: center;
   align-items: center;
}

/* ======= RESPONSIVO ======== */
@media (max-width: 768px) {

   .hamburger {
      display: block;
      text-align: right;
   }

   .menu-links {
      display: none; /* começa fechado */
      flex-direction: column;
      background-color: #0096c7;
      width: 100%;
   }

   .menu-links a {
      margin: 10px 0;
   }

   .menu-links.ativo {
      display: flex;
   }

/* ======= DARK MODE MOBILE ======= */
   body.dark-mode .menu-links {
      background-color: #000; /* fundo preto no mobile */
   }

   body.dark-mode .menu-links a {
      background-color: transparent;
      color: white;
      border: 2px solid white;
      padding: 10px 20px;
      border-radius: 25px;
   }

   body.dark-mode .menu-links a:hover {
      background-color: #333;
      color: #90e0ef;
      transform: scale(1.1);
   }

}

/* ======= LISTAS ======= */
   ul {
    list-style: none;
    padding: 0;
}

   li {
    margin: 10px 0;
}

/* ====== LINKS ====== */

   a {
      text-decoration: none;
      background-color: #0096c7;
      color: white;
      padding: 10px 20px;
      border-radius: 25px;
      transition: 0.3s;
      font-weight: bold;
     
}

   a:hover {
      background-color: #023e8a;
      transform: scale(1.1);
   }

/* ====== Botão ====== */

button {
   padding: 10px 20px;
   background-color: #0096c7;
   color: white;
   font-size: 16px;
   cursor: pointer;
   border-radius: 8px;
   border: none;
   margin: 5px;
   transition: 0.3s;
}

button:hover {
   background-color: #023e8a;
   transform: scale(1.1);
}

/* ====== MENU DARK MODE ====== */
.menu.dark-mode {
   background-color: #000; /* fundo preto */
}

.menu.dark-mode a {
   background-color: transparent;
   color: white;
   border: 2px solid white; /* borda branca */
   padding: 10px 20px;
   border-radius: 25px;
}

.menu.dark-mode a:hover {
   background-color: #333;
   color: #90e0ef;
   transform: scale(1.1);
}


/* ==== DARK MODE ==== */
body.dark-mode {
   background: linear-gradient(to right, #121212, #1e1e1e); /* fundo escuro */
   color: #f1f1f1; /* texto claro */
}

header.dark-mode,
footer.dark-mode {
   background-color: #222; /* header escuro */
   color: #f1f1f1;
   border: 2px solid white; /* borda branca */
}

h2.dark-mode, h3.dark-mode {
   color: #90e0ef; /* títulos com azul suave */
}

a.dark-mode {
   background-color: #333;
   color: #f1f1f1;
   border: 2px solid white;
}

a.dark-mode:hover {
   background-color: #555;
}

button.dark-mode {
   background-color: #333;
   color: #f1f1f1;
   border: 2px solid white;
}

button.dark-mode:hover {
   background-color: #555;
}

footer.dark-mode {
   background-color: #222;
   color: #f1f1f1;
}

/* ======== FOOTER GERAL ====== */

 footer {
   margin-top: 40px;
   padding: 15px;
   text-align: right;
   background-color: #0077b6;
   color: white;
   border-radius: 20px 20px 0 0;
   box-shadow: 0px -4px 8px rgba(0, 0, 0, 0.2);
}