/* ========== Versão Mobile ========== */
@media (max-width: 768px) {
    #cabecalho {
      padding: 15px 0;
    }
  
    /* Ajuste do logo */
    #cabecalho .logo img {
      margin-left: 20px;
      height: 60px;
    }
  
    /* Mostrar menu hamburguer */
    #cabecalho .menu-hamburguer {
      display: block;
      width: 30px;
      height: 20px;
      margin-right: 20px;
      transition: 0.3s;
      z-index: 1001;
    }
  
    /* Estilos do menu quando ativo */
    #cabecalho .menu {
      position: fixed;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100vh;
      background-color: #1b1b1be6;
      backdrop-filter: blur(5px);
      padding-top: 100px;
      transition: 0.5s;
    }
  
    #cabecalho .menu.active {
      left: 0;
    }
  
    /* Itens do menu mobile */
    #cabecalho .menu .itens {
      flex-direction: column;
      gap: 25px;
    }
  
    #cabecalho .menu .itens .item {
      padding: 15px;
      font-size: 16px;
      opacity: 0;
      transform: translateX(-20px);
      animation: fadeIn 0.5s ease forwards;
    }
  
    #cabecalho .menu .itens .item.ativo {
      border-bottom: none;
      font-weight: bold;
    }
  
    /* Animação do hamburguer para X */
    #cabecalho .menu-hamburguer.active {
      border-top-color: transparent;
    }
  
    #cabecalho .menu-hamburguer.active::before {
      transform: rotate(45deg) translate(5px, 5px);
    }
  
    #cabecalho .menu-hamburguer.active::after {
      transform: rotate(-45deg) translate(7px, -6px);
    }
  
    #cabecalho .menu-hamburguer::before,
    #cabecalho .menu-hamburguer::after {
      transition: 0.5s;
    }
  }
  
  @keyframes fadeIn {
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  /* Ajuste para tablets */
  @media (min-width: 769px) and (max-width: 1024px) {
    #cabecalho .menu .itens .item {
      padding: 25px;
      font-size: 13px;
    }
    
    #cabecalho .logo img {
      margin-left: 30px;
    }
  }

  /* rodapé */

  @media (max-width: 768px) {
    #rodape {
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding-bottom: 100px;
    }
  
    #rodape .links-rapidos,
    #rodape .sobre-nos,
    #rodape .acompanhe {
      margin: 0;
      max-width: 100%;
    }
  
    #rodape .sobre-nos {
      margin-right: 0;
    }
  
    #rodape .acompanhe {
      margin-right: 0;
      min-width: auto;
    }
  
    #rodape .copyright {
      position: static;
      transform: none;
      margin-top: 30px;
    }
  }
  
  @media (max-width: 480px) {
    #rodape {
      padding: 30px 15px 90px;
    }
  
    #rodape .links-rapidos .links .link,
    #rodape .sobre-nos .itens .item {
      font-size: 14px;
    }
  
    #rodape .acompanhe .redes {
      gap: 15px;
      flex-wrap: wrap;
      justify-content: center;
    }
  
    #rodape .copyright {
      font-size: 10px;
    }
  }

  
  
  /* Corrigir quebra de layout no conteúdo */
  #rodape > div {
    flex: 1 1 200px; /* Permite que os itens cresçam e encolham */
    max-width: 250px;
    margin: 10px;
  }
  
  /* Ajuste específico para a seção de copyright */
  #rodape .copyright {
    position: absolute;
    bottom: 17px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 40px); /* Considera o padding do container */
  }

/* Previne rolagem lateral */
html, body {
  overflow-x: hidden;
}

/* reverse section */

@media (max-width: 1024px) {
  .reverse-container {
      gap: 40px;
  }
  
  .reverse-title {
      font-size: 2rem;
  }
}

@media (max-width: 768px) {
  .reverse-container {
      flex-direction: column;
      gap: 30px;
  }
  
  .image-container {
      width: 100%;
      max-width: 600px;
  }
  
  .reverse-title {
      font-size: 1.75rem;
  }
  
  .section-description {
      font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .reverse-section {
      padding: 40px 15px;
  }
  
  .reverse-title {
      font-size: 1.5rem;
  }
  
  .saiba-mais-btn {
      width: 100%;
      text-align: center;
  }
}

/* simple section */

@media (max-width: 1024px) {
  .simple-container {
      gap: 40px;
  }
  
  .simple-title {
      font-size: 2rem;
  }
}

@media (max-width: 768px) {
  .simple-container {
      flex-direction: column;
      gap: 30px;
  }
  
  .image-container {
      width: 100%;
      max-width: 600px;
      order: -1;
  }
  
  .simple-title {
      font-size: 1.75rem;
      margin-bottom: 30px;
  }
  
  .section-description {
      font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .simple-section {
      padding: 40px 15px;
  }
  
  .simple-title {
      font-size: 1.5rem;
  }
  
  .saiba-mais-btn {
      width: 100%;
      text-align: center;
  }
}

@media (max-width: 768px) {
  /* Centraliza imagens nas duas seções */
  .simple-section .image-container,
  .reverse-section .image-container {
    display: flex;
    justify-content: center;
  }}

/* painel section */ 

@media (max-width: 1024px) {
  .titulo {
      font-size: 2.2rem;
  }
  
  .subtitulo {
      font-size: 1.5rem;
  }
}

@media (max-width: 768px) {
  .conteudo-painel {
      flex-direction: column;
      text-align: center;
      gap: 30px;
  }
  
  .texto-painel {
      text-align: center;
      max-width: 100%;
  }
  
  .titulo {
      font-size: 1.75rem;
      margin-bottom: 1rem;
  }
  
  .subtitulo {
      font-size: 1.25rem;
  }
  
  .logo {
      max-width: 250px;
  }
}

@media (max-width: 480px) {
  #painel {
      padding: 40px 15px;
  }
  
  .titulo {
      font-size: 1.5rem;
  }
  
  .subtitulo {
      font-size: 1.1rem;
  }
}

/* form section */

@media (max-width: 768px) {
  .form-entre-ctt {
      padding: 25px;
      margin: 10px;
  }
  
  .form-columns {
      grid-template-columns: 1fr;
      gap: 15px;
  }
  
  h1 {
      font-size: 1.8em;
  }
}

@media (max-width: 480px) {
  .form-entre-ctt {
      padding: 20px;
  }
  
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  textarea {
      padding: 10px;
  }
}
