* {
  box-sizing: border-box;
}

body {
  font-family:  Georgia;
 }
/*table {
  /*font-family:  Tahoma;
/*}

header {
  font-family:  Tahoma;
}
button{
  font-family:  Tahoma;
}
footer {
  font-family:  tahoma;
}

/* Style the header */
header {
  background-color: white;
  padding: 20px;
  text-align: center;
  font-size: 35px;
  color: #993366;

}
/* Style the article */
article {
  background-color: white;
  padding: 40px;
  text-align: center;
  font-size: 20px;
  color: black;
}
atalho {
  background-color: white;
  padding: 20px;
  text-align: center;
  font-size: 30px;
  color: black;
}

/* Style the navigation menu */

nav{
 text-align: center;
  font-size: 20px;
  color: white;
  background: #993366;
  padding: 8px;*/barra de botoes

}
button{
  font-size: 18px;

}
/* Style the list inside the menu */
nav ul {

  list-style-type: none;
  padding: 8px;
  text-align: center;
  font-size: 20px;

}


/* Style the footer */
footer {
  
background-color:#993366;
  padding: 2px;
  text-align: center;
  color: white;
  font-size: 20px;

}
/*td, th {
    padding: 10px; 

/* Adiciona 10px de espaço interno em todas as direções */
  }

h {
  background-color: white;
  margin: 100px;
  text-align: center;
  font-size: 20px;
  color: black;
}
h2 {
  text-align: center;
  font-size: 22px;
}
h3 {
  text-align: center;
  font-size: 22px;
color:#993366;
}


table3 {
  background-color: white;
  padding: 20px;
  text-align: center;
  font-size: 20px;
  color: black;
  border-collapse: separate;
  border-spacing: 30px 20px; /* 15px entre colunas, 5px entre linhas */}



table2 {
  background-color: white;
  padding: 10px;
  text-align: center;
  font-size: 20px;
  color: #993366;
  /*border-collapse: separate;*/
  /*border-spacing: 10px 5px; /* 15px entre colunas, 5px entre linhas */

}

/* Estilo padrão para telas grandes (desktop) */
.tabela-responsiva {
  width: 100%;
  max-width: 800px;    /* 1. Define uma largura máxima para a tabela */
  margin: 40px auto;    /* 2. Centraliza a tabela horizontalmente na tela */
  border-collapse: collapse;
}

.tabela-responsiva th {
 padding: 12px;
  border: 1px solid #ddd;
  font-size:24px;
  text-align: center;
color: #993366; 
}
.tabela-responsiva td {
  padding: 12px;
  border: 1px solid #ddd;*/
  text-align: center;
}

/* Regra para telas menores (celulares até 768px) */
@media screen and (max-width: 768px) {
  .tabela-responsiva thead {
    display: none; /* Esconde o cabeçalho original */
  }

  .tabela-responsiva tr {
    display: block;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    background: #f9f9f9;
  }

  .tabela-responsiva td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: none;
    border-bottom: 1px solid #eee;
    padding: 50px;
  }

  /* Cria o rótulo automaticamente usando o atributo data-label */
  .tabela-responsiva td::before {
    content: attr(data-label);
    font-weight: bold;
    color: #333;
    margin-right: 15px;
  }
}

/*PORTFLOIO CSS AI*/
.lista-com-imagens {
  list-style: none; /* Remove as bolinhas da lista */
  padding: 0;
  margin: 20px auto;
  max-width: 900px; /* Define uma largura máxima para a lista ficar bonita */
}

.lista-com-imagens li {
  display: flex;
  justify-content: space-between; /* Empurra o texto para a esquerda e as fotos para a direita */
  align-items: center;           /* Centraliza verticalmente o texto com as fotos */
  padding: 15px;
  margin-bottom: 20px;
  border-bottom: 1px solid #eee; /* Linha sutil separando cada procedimento */
}

/* Estilização do Texto (Substitui os estilos manuais que estavam no HTML) */
.lista-com-imagens .titulo-item {
  font-size: 28px;
  color: #993366;
  font-weight: bold;
  margin-left: 20px;
}

/* Bloco que segura as duas imagens juntas */
.lista-com-imagens .bloco-imagens {
  display: flex;
  gap: 15px; /* Cria um espaço fixo de 15px entre a foto 1 e a foto 2 */
}

/* Controle do tamanho das imagens */
.lista-com-imagens .men-imagem {
  width: 220px;       /* Ajuste a largura ideal para suas fotos */
  height: 220px;      /* Ajuste a altura ideal */
  object-fit: cover;  /* Não deixa a foto distorcer ou esticar */
  border-radius: 8px; /* Deixa os cantos das fotos arredondados */
}

/* Responsividade: Se abrir no celular, coloca as imagens abaixo do texto */
@media screen and (max-width: 600px) {
  .lista-com-imagens li {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  
  .lista-com-imagens .titulo-item {
    margin-left: 0;
  }
}

/*especialidades AI

/* Container Geral */
.container5 {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* Ativa o Flexbox para colocar lado a lado no Desktop */
.conteudo-flex {
  display: flex;
  gap: 40px; /* Espaço entre a coluna de texto e a de imagens */
  align-items: flex-start;
}

/* Configuração da coluna de texto */
.coluna-texto {
  flex: 1; /* O texto ocupa o espaço disponível */
}

.coluna-texto p {
  font-size: 16px;
  line-height: 1.6;
  color: #333;
  margin-bottom: 20px;
}

.center {
  text-align: center;
}

.assinatura {
  margin-top: 30px;
  border-top: 1px solid #eee;
  padding-top: 15px;
}

/* Configuração da coluna de imagens */
.coluna-imagens {
  display: flex;
  flex-direction: column;
  gap: 20px; /* Espaço entre uma imagem e outra */
  width: 400px; /* Largura fixa ideal para as imagens no desktop */
}

.coluna-imagens .m-imagem {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 8px; /* Cantos levemente arredondados nas fotos */
  box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Sombra sutil para dar profundidade */
}

/* ---- RESPONSIVIDADE (Telas de Celular) ---- */
@media screen and (max-width: 768px) {
  .conteudo-flex {
    flex-direction: column; /* No celular, as imagens vão para baixo do texto */
  }
  
  .coluna-imagens {
    width: 100%; /* Imagens passam a ocupar a largura total disponível na tela */
  }
}

/* inicio AI*/









/*image-table {
  background-color: white;
  padding: 15px;
  text-align: right;
  font-size: 15px;
  color: black;
}*/

.container1 {  
    display: grid;  
    grid-template-columns: 1fr 1fr 1fr;  /*fração de largura*/
    grid-template-rows: 50px 50px;  
}
.container2 {  
    display: grid;  
    grid-gap: 5px;  
    grid-template-columns: repeat(auto-fit, 100px);
    grid-template-rows: repeat(2, 100px);  
}
.container3 > div > img {  
    width: 100%;  
    height: 100%;  
    object-fit: cover;  
}
.container4 {  
    display: grid;  
    grid-gap: 5px;  
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    grid-template-rows: repeat(2, 100px);  
}

.container5  > div > p > img > {  
    width: 100%; 
    height: 100%;  
    object-fit: cover;  
    
}
/*> div > p > img > d > img > e > img > f > img */

.container6 {  
    display: grid;  
    grid-gap: 5px;  
    grid-template-columns: repeat(auto-fit, 100px);
    grid-template-rows: repeat(2, 100px);  
}


.center {
margin-left: auto;
margin-right: auto;
}
.center:hover {
  transform: scale(1.1);
 /* transform-origin: 70% 90%; */ /* Ajustado aqui */
}

	.m-imagem {
        width: 150%;
        height: auto;
	text-align: center;
transition: transform 0.3s ease, transform-origin 0.3s ease; /* Smooth transition */
}

/* Hover state (Zoom and Pan activates) */
.m-imagem:hover {
  transform: scale(0.9);
 /* transform-origin: 70% 90%; ; */ /* Ajustado aqui precisar fechar o comentário*/
}

.minha-imagem {
        width: 400px;
        height: 250px;
	text-align: center;
transition: transform 0.3s ease, transform-origin 0.3s ease; /* Smooth transition */
}

/* Hover state (Zoom and Pan activates) */
.minha-imagem:hover {
  transform: scale(0.9);
 /* transform-origin: 70% 90%; ; */ /* Ajustado aqui precisar fechar o comentário*/
}

.minh-imagem {
  width: 80%;       /* Ocupa a largura total em telas pequenas (como celular) */
  max-width: 400px;  /* Não deixa a imagem passar de 500px em telas grandes (computador) */
  height: auto;      /* Mantém a proporção da imagem para não distorcer */
  display: block;
  margin: 0 auto;    /* Garante que ela fique centralizada */

}
/* Hover state (Zoom and Pan activates) */
/*.minh-imagem:hover {
 /*transform: scale(1.1);
 /* transform-origin: 70% 90%; ; */ /* Ajustado aqui precisar fechar o comentário*/
*/}


      .min-imagem {
        width: 30px;
        height: 30px;
	text-align: center;
	object-fit: cover;

      }
.mi-imagem {
  width: 100%; /* Faz a imagem ocupar 100% da largura de seu contêiner */
  height: auto;
 aspect-ratio: 17/ 4; /* Define a proporção (largura / altura) */
 object-fit: cover; /* Garante que a imagem cubra todo o contêiner, cortando partes se necessário */
}




  .men-imagem {
        width: 230px;
        height: 230px;
	text-align: center;
	
	display: flex;             /* Ativa o Flexbox */
  justify-content: center;   /* Centraliza as imagens na horizontal */
  align-items: center;       /* Alinha verticalmente (opcional) */
  gap: 15px;                 /* Cria um espaço de 15px entre as duas imagens */

	object-fit: cover;
transition: transform 0.3s ease, transform-origin 0.3s ease; /* Smooth transition */
}
/* Hover state (Zoom and Pan activates) */
.men-imagem:hover {
  transform: scale(0.9);
 /* transform-origin: 70% 90%; ; */ /* Ajustado aqui precisar fechar o comentário*/
}

  .man-imagem {
        width: 100%;
        height: auto;
	text-align: center;
	object-fit: cover;
transition: transform 0.3s ease, transform-origin 0.3s ease; /* Smooth transition */
}

/* Hover state (Zoom and Pan activates) */
.man-imagem:hover {
  transform: scale(0.9);
 /* transform-origin: 70% 90%; ; */ /* Ajustado aqui precisar fechar o comentário*/
}

 .mek-imagem {
        width: 1fr;
        height: auto;
	text-align: center;

	object-fit: cover;
transition: transform 0.3s ease, transform-origin 0.3s ease; /* Smooth transition */
}
/* Hover state (Zoom and Pan activates) */
.mek-imagem:hover {
  transform: scale(0.9);
 /* transform-origin: 70% 90%; ; */ /* Ajustado aqui precisar fechar o comentário*/
}