/* Importa a fonte Roboto Mono do Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Aleo&display=swap');


.container_info_topo {
margin: 10px;
padding: 12px;
display: flex;
background-color: #f2f2f2;
border-radius: 5px;
flex-direction: column;
}

.container_info {
display: flex;	
gap: 10px;
}

.container_info_item1 {
margin: 10px;
padding: 12px;
display: flex;	
flex: 1;	
flex-direction: column;
}

.container_info_item2 {
margin: 10px;
padding: 12px;
display: flex;	
background-color: #f2f2f2;
flex: 1;	
flex-direction: column;
}

.container_info_base {
margin: 10px;
padding: 12px;
display: flex;	
/*background-color: #f2f2f2;*/
flex-direction: column;
}

/* Para tablets e telas menores (<= 1024px) */
@media (max-width: 1024px) {
  .container_info {
    flex-direction: column;
  }

  .container_info_item1,
  .container_info_item2 {
    margin: 5px 0;
  }
}

/* Para celulares grandes e médios (<= 768px) */
@media (max-width: 768px) {
  .container_info_topo,
  .container_info_item1,
  .container_info_item2,
  .container_info_base {
    padding: 8px;
    margin: 8px;
  }

  .container_info {
    gap: 8px;
    flex-direction: column;
  }
}

/* Para celulares pequenos (<= 480px) */
@media (max-width: 480px) {
  .container_info_topo,
  .container_info_item1,
  .container_info_item2,
  .container_info_base {
    padding: 6px;
    margin: 6px;
  }

  .container_info {
    gap: 6px;
    flex-direction: column;
  }
}

.tituloh1 h1 {
font-size: 30px;
margin-top: 40px;
margin-bottom: 40px;
}

.tituloh2 h2 {
font-size: 40px;
margin-top: 0px;
margin-bottom: 0px;
}

.titulop p {
font-size: 40px;
margin-top: 0px;
margin-bottom: 0px;
}

.aaa_container-titulo {
border-radius: 5px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 70px;
margin-right: 70px;
width: 70%;
display:flex;
justify-content: center;
flex-direction: column;
}

.aaa_container-acordeao {
border-radius: 5px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 70px;
margin-right: 70px;
display:flex;
flex-direction: column;
}

.accordion {
  width: 100%;
  /*max-width: 400px;*/
  /*margin: auto;*/
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  background: white;
}

.accordion input {
  display: none;
}

.accordion-label {
  display: block;
  padding: 1rem;
  cursor: pointer;
  background: #fff;
  font-weight: bold;
  transition: background 0.3s ease;
}

.accordion-label:hover {
  background: #f0f0f0;
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  padding: 0 1rem;
  background: #fafafa;
}

.accordion input:checked ~ .accordion-content {
  max-height: 100%; /* Ajuste conforme o conteúdo */
  padding: 1rem;
}
	
.aaa_imagem_info img {
  width: auto;
  height: 600px;
  border-radius: 5px;
  
}	

.aaa_container_imagem {
display: flex;
justify-content: center;
}


.aaa_container_texto_imagem {
display: flex;
justify-content: center;
gap: 10px;
width: 50%;
margin: auto;
background-color: #f4f4f4;
border-radius: 10px;
}
.aaa_container_texto_item {
display: flex;
justify-content: center;
flex: 7;
flex-direction: column;
text-align: center;
padding: 20px;
}
.aaa_container_imagem_item {
display: flex;
justify-content: center;
flex: 3;
}

.aaa_container_imagem_item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

.aaa_container_titulo_pagina {
margin-top: 10px;
margin-bottom: 10px;
margin-left: 70px;
margin-right: 70px;
width: 70%;
display:flex;
justify-content: center;
flex-direction: column;
}

.tituloh1_pagina h1 {
font-size: 70px;
margin-top: 0px;
margin-bottom: 0px;
}

.titulop_pagina p {
font-size: 40px;
margin-top: 0px;
margin-bottom: 0px;
}

.container_texto_solution {
display:flex;
flex-direction: column;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 70px;
margin-right: 70px;
}

.teste123 {
display:flex;
flex-direction: column;
margin: 30px;
}


.container_botao button {
padding: 10px 20px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
margin-bottom: 20px;
font-family: 'Roboto Mono', monospace;
}

/* Dispositivos até 768px (tablets e telemóveis em modo retrato) */
@media (max-width: 768px) {

  .tituloh1 h1,
  .tituloh2 h2,
  .titulop p,
  .tituloh1_pagina h1,
  .titulop_pagina p {
    font-size: 24px;
    font-size: 36px;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
  }

  .aaa_container-titulo,
  .aaa_container-acordeao,
  .aaa_container_titulo_pagina,
  .container_texto_solution {
    margin-left: 20px;
    margin-right: 20px;
    width: 90%;
  }

  .aaa_container_texto_imagem {
    flex-direction: column;
    width: 90%;
    gap: 0;
  }

  .aaa_container_texto_item {
    padding: 10px;
    text-align: center;
  }

  .aaa_container_imagem_item {
    width: 100%;
    height: auto;
  }

  .aaa_container_imagem_item img {
    width: 100%;
    height: auto;
    border-top-right-radius: 0;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
  }

  .aaa_imagem_info img {
    height: auto;
    width: 100%;
  }

  .container_botao button {
    font-size: 24px;
    padding: 8px 16px;
    width: 100%;
  }
}

/* Dispositivos até 480px (telemóveis pequenos) */
@media (max-width: 480px) {

  .tituloh1 h1,
  .tituloh2 h2,
  .titulop p,
  .tituloh1_pagina h1,
  .titulop_pagina p {
    font-size: 36px;
  }

  .aaa_container_texto_item {
    padding: 8px;
  }

  .container_botao button {
    font-size: 24px;
    padding: 6px 12px;
  }
}

/* Dispositivos grandes (acima de 1200px) */
@media (min-width: 1200px) {
  .aaa_container-titulo,
  .aaa_container-acordeao,
  .aaa_container_titulo_pagina,
  .container_texto_solution {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }
}

