/* ----------------------
   Prevent Horizontal Scroll 
----------------------- */


/* Reset global para evitar rolagem horizontal */
body, html {
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* Esconde rolagem horizontal */
  max-width: 100%; /* Garante que nada ultrapasse a largura da tela */
}

/* Garantir que os elementos respeitem a largura da tela */
* {
  box-sizing: border-box; /* Assegura que padding e border não aumentem o tamanho do elemento */
  max-width: 100%; /* Impede que elementos ultrapassem a largura da tela */
}

/* ----------------------
   HEADER ESTILO APPLE
----------------------- */

nav#header {
  box-sizing: border-box;
  height: 80px; /* Altura padrão da Apple */
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed; /* Fixo no topo */
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.145); /* Fundo preto com 40% de transparência */
  backdrop-filter: blur(10px); /* Efeito de desfoque no fundo */
  -webkit-backdrop-filter: blur(10px); /* Suporte para Safari */
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  z-index: 1001; /* Certifique-se de que está acima do conteúdo */
  pointer-events: auto; /* Garante que eventos de clique funcionem */
  border-bottom: none; /* Remove qualquer borda inferior */
  box-shadow: none; /* Remove qualquer sombra */
}

nav#header.scrolled {
  background: rgba(0, 0, 0, 1); /* Fundo mais escuro ao rolar */
  box-shadow: none !important; /* Remove completamente sombra ao rolar */
  border-bottom: none !important; /* Garante que não há borda */
}

/* ----------------------
   LOGO DO HEADER
----------------------- */
nav#header .logo img {
  width: 108px;
  height: auto;
  display: block;
  cursor: pointer;
  transition: filter 0.3s ease-in-out;
}

nav#header .logo img:hover {
  filter: brightness(1.1); /* Leve brilho no hover */
}

/* Links dentro do header */
nav#header a {
  text-decoration: none;
  outline: none;
  border: none;
  color: #fff; /* Cor padrão do texto */
}

nav#header a:hover {
  color: #FFD700; /* Cor dourada no hover */
}

nav#header a:focus {
  outline: none;
  border: none;
}

/* Ajuste do conteúdo principal */
body {
  margin: 0;
  padding: 0;
  
}

header {
  background: url("/img/fachada/fachadaimpacta.jpg") center/cover no-repeat;
  width: 100%;
  height: 700px;
  position: relative; /* Garante que o conteúdo fique abaixo do header */
  z-index: 0; /* Certifica que está abaixo do #header */
  margin-top: 44px; /* Evita que o conteúdo fique sob o header fixo */
}

/* ----------------------
   RESPONSIVO
----------------------- */
@media (max-width: 768px) {
  header {
    height: 300px;
    background-image: url("../img/fachada/fachadaimpacta.jpg");
  }
}
header .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(91, 91, 91, 0.195); /* cinza semi-transparente */
  z-index: 1;
}



/* ----------------------
   MENU DE NAVEGAÇÃO
----------------------- */
#menu {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 20px; /* Reduzi para aproximar os itens */
  margin: 0;
  padding: 0;
}


#menu li {
  display: inline-block;
}

#menu li a {
  color: #ffffffa9;
  font-size: 14px;
  text-decoration: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  transition: color 0.3s ease-in-out;
  
}

#menu li a:hover {
  color: #ccc;
}

/* ----------------------
   BOTÃO MOBILE
----------------------- */
#btn-mobile {
  display: none;
  background: none;
  border: none;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  align-items: center;
  gap: 5px;
}

#btn-mobile #hamburger {
  display: block;
  width: 25px;
  height: 2px;
  background: #101010;
  margin: 5px 0;
  transition: 0.3s ease-in-out;
  position: relative;
}

#btn-mobile #hamburger::before,
#btn-mobile #hamburger::after {
  content: '';
  display: block;
  width: 25px;
  height: 2px;
  background: #141212;
  position: absolute;
  transition: 0.3s ease-in-out;
}

#btn-mobile #hamburger::before {
  top: -8px;
}

#btn-mobile #hamburger::after {
  top: 8px;
}

/* Responsivo para mobile */
@media (max-width: 768px) {
  #btn-mobile {
    display: flex;
  }

  #menu {
    display: none;
    flex-direction: column;
    background: #333;
    position: absolute;
    top: 60px;
    right: 0;
    width: 100%;
  }

  #menu.active {
    display: flex;
  }
}


/* ========== RESET GERAL ========== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Roboto", sans-serif;
  background-color: #EDEDED; /* Bege Claro */
  color: #4A4A4A; /* Cinza Escuro */
  line-height: 1.6;
}

a {
  text-decoration: none;
  color: #2A4D69; /* Azul Profundo */
}

p {
  font-size: 1.2rem;
}

/* ========== NAV ========== */
nav {
  background-color: #2A4D69; /* Azul Profundo */
  color: #FFFFFF; /* Branco */
  padding: 10px 20px;
}

/* ======================
   SEÇÃO PROJETOS ESTILO APPLE
======================== */
.projetos {
  background-color: #F5F5F7;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* LINHA FLEXBOX */
.projetos .linha {
  display: flex;
  justify-content: flex-start; /* Alinha os elementos horizontalmente */
  align-items: flex-start; /* Alinha os elementos no topo */
  gap: 20px; /* Espaço entre texto e botões */
  margin-bottom: 20px;
}

/* TEXTO À ESQUERDA */
.projetos .texto {
  flex: 0 0 200px; /* Largura fixa para o texto */
  text-align: left;
  font-size: 1rem;
  font-weight: normal;
  color: black;
  margin-top: 5px;
  display: flex;
  justify-content: center; 
}

/* BOTÕES AO LADO DO TEXTO */
.projetos .botoes {
  display: flex;
  flex-wrap: wrap; /* Quebra os botões se não couberem */
  gap: 10px;
  align-items: center; 
}

/* ESTILO DOS BOTÕES */
.projetos .botoes button {
  padding: 8px 12px;
  font-size: 0.9rem;
  color: #ffffff;
  background: rgba(42, 77, 105, 0.9);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.projetos .botoes button:hover {
  background: rgba(42, 77, 105, 1);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* BOTÃO SELECIONADO */
.projetos .botoes button.selecionado {
  background: #FFD700;
  color: #333333;
  font-weight: 600;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 2);
}

/* TÍTULO FINAL */
#tituloEscolhido {
  text-align: center;
  font-size: 1.2rem;
  font-weight: normal;
  margin-top: 20px;
  color: black;
  padding: 10px 0;
  border-top: 1px solid #e0e0e0;
}

/* RESPONSIVIDADE */
@media (max-width: 768px) {
  .projetos .linha {
      flex-direction: column; /* Empilha o texto e os botões */
      align-items: flex;
  }

  .projetos .texto {
      flex: none; /* Largura automática */
      width: 100%;
  }

  .projetos .botoes {
      justify-content: flex; /* Alinhamento à esquerda */
  }

  .projetos .botoes button {
      width: auto;
      text-align: center;
  }

  #tituloEscolhido {
      font-size: 1rem;
  }
}



/* ========== QUADRO ========== */
.quadro {/*Escolher é o primeiro passo para realizar seu sonho */
  padding: 30px;
  text-align: center;
  background-color: #F5F5F7; /* Fundo apple style */
  color: black; /* Texto preto */
  border-bottom: 1px solid #ccc; /* Linha fina cinza clara */
  font-size: 10px; /* Define o tamanho da fonte para 14px (ou ajuste conforme necessário) */
}


.quadro-azul {
  text-align: center;
  background-color: #012169; /* Azul Profundo */
  color: #FFFFFF; /* Branco */
  padding: 30px;
}

.quadro-azul a {
  color: #FFFFFF; /* Branco */
}

/* ========== FILTRO ========== */
#divFiltro {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

#divFiltro button,
#divLargura button {
  width: 120px;
  height: 60px;
  margin: 5px;
  background-color: #012169; /* Verde Oliva */
  color: #FFFFFF; /* Branco */
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;
}

#divFiltro button:hover,
#divLargura button:hover {
  background-color: #2A4D69; /* Azul Profundo */
}

/* ========== CARDS ========== */
.central-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  background-color: #F5F5F7;
}

.cards {
  padding: 10px;
  margin: 10px;
  background-color: #EDEDED; /* Bege Claro */
  width: 320px;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s;
  border: 1px solid #D9D9D9; /* Tom mais claro para borda */
  border-radius: 8px; /* Cantos arredondados delicados */
}

.cards:hover {
  background-color: #D0D0D0; /* Tom mais escuro para hover */
}

.card-1 {
  padding: 10px;
  font-size: 1.1rem;
  display: flex;
  justify-content: center;
  text-align: center;
}

.card-1-esquerda {
  width: 20%;
}

.card-1-direita {
  width: 65%;
}

/* ========== FOOTER ========== */
footer {
  background-color: #012169; /* Cinza Escuro */
  color: #FFFFFF; /* Branco */
  text-align: center;
  padding: 30px;
}

  .central-cards {
    margin-top: 30px;
  }


@media (max-width: 480px) {
  nav {
    text-align: center;
  }

  .projetos button {
    width: 80px;
    height: 35px;
  }

  .cards {
    width: 90%;
  }

  footer {
    font-size: 0.9rem;
  }
}