body,
html {
  margin: 0;
  padding: 0;
  background-color: rgb(255, 255, 255);
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
  font-family: "Lexend", sans-serif;
}

/* Esconde a barra de rolagem (mantém scroll) */
html, body { 
  -ms-overflow-style: none; /* IE e Edge */
  scrollbar-width: none;   /* Firefox */
}
html::-webkit-scrollbar,
body::-webkit-scrollbar { 
  display: none; /* Chrome, Safari e Opera */
}

/* Desktop: overlay com título/subtítulo no hover sobre a imagem */
@media (hover: hover) and (pointer: fine) {
  .projeto-item {
    position: relative;
    overflow: hidden;
  }

  .projeto-item:hover {
    background-color: transparent;
  }

  .projeto-item img {
    margin-bottom: 0;
    display: block;
    transition: transform 0.4s ease, filter 0.4s ease;
  }

  .projeto-item h3,
  .projeto-item h2 {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    color: #ffffff !important;
    text-align: center;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 2;
    white-space: nowrap;
    overflow: visible;
    width: 90%;
  }

  .projeto-item h3 {
    top: 45%;
    font-size: 35px !important;
    font-weight: 700;
  }

  .projeto-item h2 {
    top: 66%;
    color: #ffffff !important;
  }

  .projeto-item:hover img {
    filter: blur(3px) brightness(0.6);
    transform: scale(1.04);
  }

  .projeto-item:hover h3,
  .projeto-item:hover h2 {
    opacity: 1;
  }
}

/* Ajustes específicos por item (desktop) para caber o título completo sem quebra */
@media (hover: hover) and (pointer: fine) {
  /* projetos.html ordem dos itens */
  .grid-container .projeto-item:nth-child(1) h3 { /* Escola Teko Porã */
    font-size: 33px !important;
  }
  .grid-container .projeto-item:nth-child(2) h3 { /* Apê Siqueira */
    font-size: 35px !important;
  }
  .grid-container .projeto-item:nth-child(3) h3 { /* Eco Suítes Vila Neblina */
    font-size: 25px !important;
  }
  .grid-container .projeto-item:nth-child(4) h3 { /* Projeto Apartamento Maxhaus */
    font-size: 28px !important;
  }
  .grid-container .projeto-item:nth-child(5) h3 { /* Projeto Domus */
    font-size: 33px !important;
  }
  .grid-container .projeto-item:nth-child(6) h3 { /* Casa Rochedo */
    font-size: 33px !important;
  }
  .grid-container .projeto-item:nth-child(7) h3 { /* Casa Anexo */
    font-size: 35px !important;
  }
  .grid-container .projeto-item:nth-child(8) h3 { /* Ribeirão das Neves */
    font-size: 28px !important;
  }
  .grid-container .projeto-item:nth-child(9) h3 { /* Cervejaria Nostra */
    font-size: 30px !important;
  }
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Estilo geral da seção de projetos */
.projetos {
  padding: 0 20px;
  width: 100%;
  max-width: 100%;
}

/* SubTítulo do projeto */
.projeto-item h2 {
  margin: 0;
  font-size: 12px;
  font-weight: 400 !important;
  color: black;
  text-decoration: none;
  text-transform: uppercase;
  font-family: "Rams W01", "Lexend", sans-serif !important;
  /* Remover sublinhado */
}

/* Container da grade */
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* Definir 3 colunas de tamanho igual */
  gap: 20px;
  /* Espaçamento entre itens da grade */
  width: 100%;
  overflow: hidden;
}


/* Item do projeto (clicável) */
.projeto-item {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  padding: 2px;
  border-radius: 5px;
  transition: background-color 0.3s ease;
  width: 100%;
  max-width: 100%;
}

.projeto-item:hover {
  background-color: #f2f2f2;
  /* Cor de fundo ao passar o mouse */
}

/* Imagem do projeto */
.projeto-item img {
  width: 100%;
  height: 350px !important;
  /* Ajuste a altura máxima da imagem conforme necessário */
  object-fit: cover;
  /* Manter proporção e preencher o espaço disponível */
  margin-bottom: 10px;
  max-width: 100%;
}



/* Título do projeto */
.projeto-item h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 700 !important;
  color: black;
  text-decoration: none;
  text-transform: uppercase;
  font-family: "Rams W01", "Lexend", sans-serif !important;
  /* Remover sublinhado */
}

@media screen and (max-width: 1200px) {
  .projetos {
    padding: 0 10px; /* Reduz padding lateral */
  }

  .grid-container {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .projeto-item img {
    height: 300px !important; /* Altura menor para mobile */
  }

  /* Garante que headers não quebrem layout */
  .projeto-item h3, .projeto-item h2 {
    padding: 0 8px; /* Padding interno para texto */
    word-wrap: break-word; /* Quebra palavras longas */
  }
}

/* Efeito de carregamento suave */
.image-container {
  width: 100%;
  margin-bottom: 10px;
  background: #f0f0f0; /* Cor do placeholder */
  border-radius: 5px;
  overflow: hidden;
}

.aspect-ratio {
  position: relative;
  padding-top: 75%; /* Proporção 4:3 (ajuste conforme suas imagens) */
}

.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.image-container img.loaded {
  opacity: 1;
}

@media screen and (max-width: 1200px) {
  .aspect-ratio {
    padding-top: 100%; /* Proporção 1:1 para mobile */
  }
}

/* projetos.css */
.image-container {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: placeholderShimmer 1.5s infinite linear;
}

@keyframes placeholderShimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}