/* Responsividade */
@media (max-width: 900px) {
  nav {display: none;}
  .hero h2 { font-size: 2rem; }
  .hero p { font-size: 1rem; }
  .sobre-container { flex-direction: column; }
  .imagem-sobre, .texto-sobre { max-width: 100%; }
  .bloco-destaque { bottom: 10px; left: 10px; max-width: 90%; }
  .contato-container { flex-direction: column; gap: 30px; }
  .contato { flex-direction: column; gap: 30px; }
  .formulario-contato, .contato-info { flex: 1 1 100%; }
  header img { max-width: 100%;}
  .hero{display: none;}
  header {position: relative; justify-content: center; background-color: var(--cor-fundo-terciario);}
  header img {max-width: 200px; max-height: 30px; margin: 0 auto; display: block;}
  .catalogo-linha{display: flex;flex-direction: column;text-align: center; justify-content: center;}
  .catalogo-info{gap:20px; display: flex; flex-direction:column; align-items:center;text-align:center;width: 100%;}
  .catalogo-info div {display: block; display: flex; flex-direction: column; max-width: 100%;}
}

@media (max-width: 600px) {
  header h1 { font-size: 1.2rem; }
  .hero h2 { font-size: 1.5rem; }
  .hero p { font-size: 0.95rem; }
  .hero button { width: 100%; max-width: 250px; }
  section { padding: 60px 15px; }
  .imagem-sobre img { max-height: 300px; }
  .bloco-azul { width: 90%; height: 90%; }
  .card h4, .projeto-card h4 { font-size: 1rem; }
  .catalogo-header {flex-direction: column;text-align: center;}
}


@media (max-width: 500px) {
  .hero h2 { font-size: 1.4rem; }
  .hero p { font-size: 0.85rem; }
  footer { font-size: 0.85rem; }
  header {position: relative; justify-content: center; background-color: var(--cor-fundo-terciario);}
  header img {max-width: 200px; max-height: 30px; margin: 0 auto; display: block;}
  .hero{display: none;}
  .hero-eficiencia {display: none;}
  .catalogo-linha{display: flex;flex-direction: column;text-align: center; justify-content: center;}
  .catalogo-info{gap:20px; display: flex; flex-direction:column; align-items:center;text-align:center;width: 100%;}
  .catalogo-info div {display: block; display: flex; flex-direction: column; max-width: 100%;}
}

@media (max-width: 768px) {
  .contato-container {flex-direction: column;align-items: center;}
  .formulario, .mapa {max-width: 100%;}
  .catalogo-hero {padding: 80px 20px;}
  .catalogo-hero h2 {font-size: 2rem;}
  .catalogo-container h3 {font-size: 1.6rem;}
}