/* ---------------------------------------------
----------------Texto---------------------------
--------------------------------------------- */

/* margem das fotos de home */
.item img {
    border: 1px solid #e0e0e0; /* Cinza bem claro */
    padding: 0px;              /* Espaço entre a foto e a borda (opcional) */
    border-radius: 0px;        /* Arredonda levemente os cantos (opcional) */
}


html {
  font-size: 12px; /* Define a fonte BASE para o documento */
  text-align: ;
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

h1 {
  font-size: 2rem; /* 3 * 16px = 48px ---------- ou seja ele multiplica sÃƒÂ³ eu nÃƒÂ£ opreciso mudar todos */
  text-align: center;
} 

p {
  font-size: 1.3rem; /* 1 * 16px = 16px */
}


/* Usando media query para ajustar a fonte base para mobile */
@media (max-width: 1268px) {
  html {
    font-size: font-size: 4.3rem; /* Isso farÃƒÂ¡ com que todos os 'rem' escalem proporcionalmente */
  }     
  
}


/* ----- old ------- */


.copy {
	font-family: Arial;
	font-size: 12px;
	color: #999999;
	font-style: ;
	font-weight: ;	
}

.copy_branco {
	font-family: Arial;
	font-size: 12px;
	color: #999999;
	font-style: ;
	font-weight: ;	
}


.geral_vermelho {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #f00;
	font-style: ;
	font-weight: bolder;	
}


.clientes {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #ffffff;
	font-style: ;
	font-weight: bolder;	
}


.descricao_fotos {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #e5e5e5;
	font-style: ;
	font-weight: bold;	
}


.descricao_fotos_preto {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #000;
	font-style: ;
	font-weight: bold;	
}


.texto_geral {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #ffffff;
	font-style: ;
	font-weight: bolder;	
}


.texto_geral_preto {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	font-style: ;
	font-weight: bolder;	
}

.texto_destaque {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 20px;
	color: #ffffff;
	font-style: ;
	font-weight: bolder;	
}


.titulo_preto {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 20px;
	color: #000;
	font-style: ;
	font-weight: bolder;	
}

.menu {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #ffffff;
	font-style: ;
	font-weight: bolder;	
}


.menu_preto {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000;
	font-style: ;
	font-weight: bolder;	
}


.logobioartes {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 7px;
	color: #cccccc;
	font-style: ;
	font-weight: ;	
}


a {
	font-size: 14px;
	color: #f00;
}
a:visited {
	color: #f00;
}
a:hover {
	color: #f00;
}
a:hover {
	text-decoration: ;
}
a:active {
	color: #000;
}


/* ---------------------------------------------------------------
---------------------- quadros ---------------------------------
--------------------------------------------------------------- */


/* Estilos para Desktop (padrÃƒÂ£o) */
.empresa-texto {
  /* Propriedades de fonte baseadas no <p> e no <html> */
  font-family: Verdana, Arial, Helvetica, sans-serif; /* A mesma do <html> */
  font-size: 1.3rem; /* A mesma do <p> (1.3 * 12px = 15.6px no seu caso) */
  line-height: 1.6; /* EspaÃƒÂ§amento entre linhas para melhor leitura */
  color: #333; /* Cor do texto (um cinza escuro, se quiser a cor padrÃƒÂ£o do navegador pode remover) */

  /* Propriedades de layout e caixa da div */
  max-width: 1000px; /* Largura mÃƒÂ¡xima para a div em telas grandes */
  margin: 20px auto; /* Centraliza a div na pÃƒÂ¡gina com margem superior/inferior */
  padding: 25px; /* EspaÃƒÂ§amento interno dentro da div */
  border: 0px solid #ddd; /* Borda sutil */
  background-color: #f9f9f9; /* Cor de fundo suave */
  text-align: justify; /* Justifica o texto para um visual mais "blocÃƒÂ£o" */
}

---

/* Estilos para Mobile (telas com largura mÃƒÂ¡xima de 768px) */
@media (max-width: 768px) {
  .empresa-texto {
    font-size: 1.2rem; /* Um pouco menor para telas de celular */
    line-height: 1.5; /* Ajuste o espaÃƒÂ§amento de linha */
    margin: 10px; /* Margem menor nas laterais para aproveitar o espaÃƒÂ§o */
    padding: 10px; /* Padding menor */
    text-align: left; /* Em telas pequenas, texto alinhado ÃƒÂ  esquerda ÃƒÂ© geralmente mais legÃƒÂ­vel */
  }
}

/* Estilos para Mobile muito pequeno (telas com largura mÃƒÂ¡xima de 480px) */
@media (max-width: 480px) {
  .empresa-texto {
    font-size: 1.4rem; /* Ainda menor para smartphones muito compactos */
  }
}


/* Seus estilos para Desktop (manter como estÃ¡) */
.galeria {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  padding: 20px;
}

.item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1 1 300px; /* Isso garante que elas fiquem em vÃ¡rias colunas no desktop */
  max-width: 400px;
}

/* Imagens */
.item img {
  width: 100%;
  height: auto;
  border-radius: 0px;
}

---

/* MEDIA QUERY para Mobile (telas menores) */
@media (max-width: 768px) {
  .galeria {
    /* REMOVA OU COMENTE: flex-direction: column; */
    /* Deixaremos o padrÃ£o (row) ou podemos definir explicitamente flex-direction: row; */
    flex-direction: row; /* Garante que os itens tentem ficar lado a lado */
    justify-content: center; /* Centraliza a linha de itens, se houver espaÃ§o */
    align-items: flex-start; /* Alinha os itens ao topo da linha */
    gap: 15px; /* Reduza o espaÃ§amento entre as fotos para que caibam duas */
    padding: 10px; /* Ajuste o padding geral da galeria */
  }

  .item {
    /* flex: 1 1 [valor]; - Permite que os itens cresÃ§am e encolham.
       Para 2 colunas, queremos que cada item ocupe ~50% da largura,
       menos o gap. Por exemplo, 48% ou flex-basis: calc(50% - (gap / 2)).
       Usaremos um valor menor para a base, como 150px, e deixamos crescer atÃ© 50%. */
    flex: 1 1 150px; /* Novo valor para que caibam 2. MÃ­nimo 150px, pode crescer */
    max-width: calc(50% - 15px); /* Garante que nÃ£o exceda 50% menos metade do gap */
    /* Se quiser que eles sejam exatamente 50% (ignorando o gap no cÃ¡lculo),
       pode usar flex: 0 0 calc(50% - 15px); */
  }
}

/* MEDIA QUERY para Mobile MUITO PEQUENO (telas com largura mÃ¡xima de 480px) */
@media (max-width: 480px) {
  .galeria {
    gap: 10px; /* Reduza o gap ainda mais para telas menores */
  }
  .item {
    flex: 1 1 130px; /* Ajusta a base para caberem 2 em telas muito pequenas */
    max-width: calc(50% - 10px); /* Ajusta a max-width com base no novo gap */
  }
}