/* ----------------------
   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#nav {
  
  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); /* 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#nav.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#nav .logo img {
  width: 108px;
  height: auto;
  display: block;
  cursor: pointer;
  transition: filter 0.3s ease-in-out;
}

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

/* Links dentro do header */
nav#nav a {
 color: #0f1c29;
  transition: color 0.3s ease;
}

nav#nav.scrolled a {
  color: #0f1c29;
}

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

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

/* Ajuste do conteúdo principal */
body {
  margin: 0;
  padding: 0;
  
}
.hero {
  max-width: 520px;
  padding-left: 80px;
  padding-top: 0px; /* controla a altura geral */
  display: flex;
  flex-direction: column;
  gap: 6px; /* distância entre logo e texto */
}

 .hero h1 {
   margin: 0;
  padding: 0; /* remove o afastamento */
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  letter-spacing: -0.3px;
  font-size: 55px;
  line-height: 1.2;
  color: #0f1c29;
}

.hero h1 span {
  color: #9e6340;
  font-weight: 600;
}

.logo-hero {
  width: 180px;        /* maior e com destaque */
  margin-bottom: 0px;
  display: block;
}

.btn {
  display: inline-block;
  background-color: #0f1c29;
  color: #fff;
  padding: 14px 28px;
  border-radius: 30px;
  font-weight: 600;
  text-decoration: none;
  transition: 0.3s;
}

.btn:hover {
  background-color: #0f1c29;
}


header {
  width: 100%;
  height: 700px;
  display: flex;
  align-items: flex-start; /* NÃO centraliza verticalmente */
  padding-top: 120px; /* controla onde começa o bloco */
  

  background:
    linear-gradient(
      to right,
      #ffffff 0%,
      #ffffff 35%,
      rgb(255, 255, 255) 35%,
      rgba(255,255,255,0.4) 52%,
      rgba(255,255,255,0) 60%
    ),
    url("/img/fachada/fachada-casa-moderna-atras-piscina-shutterstock-1024x602.jpg");

  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
}

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

  .hero {
    padding: 24px 24px 0;
    max-width: 100%;
  }

  .logo-hero {
    width: 110px;
    margin-bottom: 10px;
  }

  .hero-text h1 {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 20px;
    line-height: 1.25;
    letter-spacing: -0.3px;
    color: #0f1c29;

    margin-top: 0;
    margin-bottom: 14px;   /* ⬅️ cria respiro real abaixo do título */
  }

  /* SUBTÍTULO */
  .hero-text p,
  .hero-text .subtitle {
    margin-top: 0;
    margin-bottom: 18px;   /* ⬅️ separa do conteúdo abaixo */
    font-size: 13px;
    line-height: 1.4;
  }

}





/* ----------------------
   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: #0f1c29;
  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: #ffffffa1;
    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; 
  justify-content: 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) */
   font-family: 'Inter', sans-serif;
   font-weight: 600;
}


.quadro-azul {
  text-align: center;
  background-color: #0f1c29; /* 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: #0f1c29; /* 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: #0f1c29; /* 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;
  }
}