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

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  background-color: #f5f5f5;
}

header {
  background-color: #f1f1f1;
	height: 200px;
  color: white;
  padding: 1.5rem 1rem 1rem;
  text-align: center;
}



/*::::::  FOTO CÍRCULO  ::::::*/

    .circle {
		
            width: 90px;            /* largura do círculo */
      height: 90px;           /* altura do círculo */      /* tamanho máximo */
      aspect-ratio: 1 / 1;     /* mantém proporção quadrada */
      border-radius: 50%;      /* deixa em círculo */
      overflow: hidden;        /* esconde o excesso da imagem */
      border: 0px solid #ffffff;  /* opcional: borda */
      
		margin: auto;   /* centraliza */
		background-color: #ffffff;
	
		
	
    }

    .circle img {
      width: 100%;
      height: 130%;
		object-fit: cover; 
		object-position: 50% 30%;
	
   
    }





/*::::::  FIM DA FOTO CÍRCULO  ::::::*/



.logo {
/*  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 1rem;*/
	width: 120px;
	height: 120px;
	margin: auto;
	object-position: 10% 10%;
	
	padding-top: 12px;
	
}




/*::::::  menu   ::::::*/

nav {
  position: relative;
	z-index: 1000;
	

	
}

.nav-links {
	
  list-style: none;
  display: flex;
	
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
	
	
	line-height: 30px;
		
	
}

.nav-links a {

	
  color: #1f1f1f;
  text-decoration: none;
  font-size: 0.9rem;
  padding: 0.5rem;
  transition: color 0.3s ease;
	
	
		
}

.nav-links a:hover {
	
  color: #8f5929;
	background-color: none;
	
	
}

.menu-toggle {
	
  display: none;
  font-size: 2rem;
  cursor: pointer;
  color: #1f1f1f;
  margin-bottom: 0.1rem;


}

/*::::::  FIM DO menu   ::::::*/


/*   ——————————————————————————————————————————————  */

main {
  padding: 2rem;
  max-width: 1024px;
  margin: auto;
}

/*   ——————————————————————————————————————————————  */






section {
  padding: 3rem 0;
  border-bottom: 0px solid #f5f5f5;
}

footer {
  text-align: center;
  padding: 1rem;
  background-color: #222;
  color: white;
  margin-top: 2rem;
}






/* formatações das galerias */


.destaque_subdestaque{
		
	
	margin:0;
	padding-bottom: 40px;
	padding-top: 40px;
}



.destaque_subdestaque p{
	font-family: "Helvetica Neue", "sans-serif";
	font-size: 14px;
}



	
	.galeria1{
		
		display:flex;
		column-gap: 20px;
		align-items: center;
		margin: auto;
		justify-content: space-between;
		padding-top: 0px;
		border-top: none;
		margin-bottom: 40px;
		
	
	
		
	}
		
			
	.galeria1 img{
		
			
	width: 302px;
	border-radius: 8px;
	
}	


	.galeria1 p {
		font-family:  "Helvetica Neue", "sans-serif";
		font-size: 14px;
		margin-bottom: 10px;
	}
		



/*  FIM formatações das galerias */
	

.linksrapidos{
	
	
	width: 140px;
	height: 100%;
	background-color: #f5f5f7;
	text-decoration: none;
	color: #1f1f1f;
	padding: 8px;
	padding-right: 3px;
	border: 1.5px solid #1f1f1f;
	border-radius: 16px;
	
	margin-right: 15px;
	
	margin-bottom: 20px;
	
	
}






.subir{
	
	text-align: right;
	margin-bottom: 0px;
	font-size: 10px;
	color: #1f1f1f;
	
	
		}


.subir a:hover{
	color: #d3d3d3;
	text-decoration: none;
	
	transition: 0.3s;
	filter: brightness(60%);
	
}

.topo{
	
	text-decoration: none;
	
		text-align: right;
	margin-bottom: 0px;
	font-size: 10px;
	color: #1f1f1f;
	
}





/*  Página Design Editorial */
	
.foto_editorial
{
		width: 302px;
		border: 0px solid #DFDFDF;
		box-shadow: 0px -0px 12px #d3d3d3;
		border-radius: 8px 8px 8px 8px;
		background-color: #FFFFFF;
		max-width: 100%;

}



.foto_editorial p{
	font-size: 12px;
	padding-left: 20px;
	padding-bottom: 10px;
		
}

.foto_editorial a{
	color: #1f1f1f;
}


.foto_editorial h3{
	font-size: 16px;
	padding-left: 20px;
	
}

.foto_editorial img{
	width: 302px;
	border-radius: 8px 8px 0px 0px;
	
}



/*  ———————————————————————————————————————————————— */




.indesign_capa{
		
width: 100%;
  margin: auto;
	
	
}






/*  ———————————grid da página TELA————————————————— */


.galeria1{
	margin:0;
}


.linha{
	
	line-height: 36px;
	margin-top: 0;
	background-color: #EEEEEE;
	width: 220px;
	border-bottom: 0.3px solid #d3d3d3;
	
	
	
}



.grade a{
	color: #1f1f1f;
	font-size: 14px;
	

}

.grade linha{
	margin-bottom:   0;
	margin-top: 0;
	
	
	
}
	

.linha a{
		text-align: left;
		text-decoration: none;
		margin-bottom: 0px;
		margin-left: 10px;
	}


.diagramamapa_tela{
	width: 100%;
}


/*  ———————————————————————————————————————————————— */





#clique2{
	color:#8f5929;
	font-size: 12px;
	font-weight: 600;
}




/*  ———————————grid da página Papel————————————————— */


.papel img{
	width: 460px;
	
}

	.papel img:hover{
		
	transition: 0.3s;
	filter: brightness(90%);
	}


.dica_papel img{
	/*border: 0.5px solid #d3d3d3;*/
	}

	.dica_papel img:hover{
		
	transition: 0.3s;
	filter: brightness(90%);
	}






.cartaopostal img{
	width: 460px;
	border-radius: 0;
	border: 0.5px solid #EEEEEE;
	}

	.cartaopostal img:hover{
		
	transition: 0.3s;
	filter: brightness(90%);
	}






.estampa img{
	border: 0.5px solid #EEEEEE;
}

	.estampa img:hover{
		
	transition: 0.3s;
	filter: brightness(90%);
	}






.isometrica img{
	background-color: white;
	margin: auto;
	width: 100%;
	padding: 40px;
	border-radius: 8px;
}

	.isometrica img:hover{
		
	transition: 0.3s;
	filter: brightness(90%);
	}





.diagramamapa img{
		width: 460px;
	border-radius: 0;
	border: 0.5px solid #EEEEEE;
}

	.diagramamapa img:hover{
		
	transition: 0.3s;
	filter: brightness(90%);
	}






.divisor_horizontal{
	border-bottom: 0.5px solid #eeeeee;
	margin-top: 60px;
	
	
}




/*  ———————————————————————————————————————————————— */






/*  ———————————grid da página MOVIMENTO ————————————————— */

.movimento_box iframe{
border-radius: 8px;	
	
}



/*  ———————————————————————————————————————————————— */




/*  ———————————grid da página Inteligência Artificial ————————————————— */



.Iartifical_base  {
	
	padding: 20px;
	width: 460px;
	height: 260px;
	background-color: #ffffff;
	border-radius: 8px;
	/*border: 0.5px solid #eeeeee;*/
}




.Iartifical  {
	
	padding: 20px;
	width: 460px;
	height: 260px;
	background-color: #ffffff;
	border-radius: 8px;
	/*border: 0.5px solid #eeeeee;*/
}



.Iartifical:hover{
/*	color: #246274;*/
	/*border-bottom: 0.5px solid #eeeeee;*/
	background-color: #EEEEEE;
	transition: 0.3s;
	filter: brightness(98%);
	
}



.moldura_cinza{
	margin-bottom: 20px;
		border: 0.5px solid #d3d3d3;
	border-radius: 12px;
	padding: 12px;
	font-size: 12px;
}



/*  ———————————————————————————————————————————————— */

/* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */






/* Responsivo — MOBILE */


	
	
@media (max-width: 768px) {
	
  .menu-toggle {
    display: block;
	  
	   
  }
	
	
	
  .nav-links {
	  gap: 0rem;
    display: none;
    flex-direction: column;
    background-color: #f5f5f5;
    padding-bottom: 20rem;
    	line-height: 30px;
	  margin-top: 10px;
	  	  

  }

	
	
  .nav-links.active {
    display: flex;
  }

  .nav-links a {
    padding: 0.5rem 0;
    font-size: 1rem;
	  border-bottom: 0.5px solid #EFE8E8;
	 

	  
  }
	
	
	
	
	/* formatações das galerias — MOBILE */

	
	.galeria1{
		
		display:block;
		align-items: center;
		margin: auto;
		justify-content:center;
		padding-top: 0px;
		border-top: none;
		
	
	
		
	}
		
			
	.galeria1 img{
	width: 100%;
	border-radius: 8px;
	border: none;
		
				
}
	
	.galeria1 p {
		font-family:  "Helvetica Neue", "sans-serif";
		font-size: 14px;
		margin-bottom: 60px;
	}
		
	
	
	
	
	
	
	
	
	
	
	
	
	
	



/*  Página Design Editorial */
	
.foto_editorial
{
		width: 100%;
		height: auto;
		margin-bottom: 40px;
		border: 0px solid #DFDFDF;
		box-shadow: 0px -0px 12px #d3d3d3;
		border-radius: 8px 8px 8px 8px;
		background-color: #FFFFFF;
		

}



.foto_editorial p{
	padding-left: 20px;
	padding-bottom: 20px;
	margin: 0;
	
	
}

.foto_editorial a{
	color: #1f1f1f;
}


.foto_editorial h3{
	padding-left: 20px;
	
}

.foto_editorial img{
	width: 100%;
	border-radius: 8px 8px 0px 0px;
	
}



/*  ———————————————————————————————————————————————— */
	

/*  ———————————grid da página TELA————————————————— */


.grade{
	margin-bottom: 60px;
	width: 100%;
	column-gap: 10px;
/*	margin-left: 10px;
	margin-right: 10px;*/
	
}




.linha{
	
		line-height: 26px;
	width: 100%;
	border-bottom: 0.3px solid #d3d3d3;
	
	

		
}

.grade a{	
	color: #1f1f1f;
	font-size: 14px;

	
	
}



.grade p{
	margin-bottom: 20px;
}
	



.linha a{
		text-align: left;
		text-decoration: none;
		line-height: 32px;	
	
		
	}

/*  ———————————————————————————————————————————————— */
	




/*  ———————————grid da página Inteligência Artificial ————————————————— */


.Iartifical_base  {
	
	padding: 20px;
	width: 100%;
	height: 100%;
	margin-bottom: 40px;
	background-color: #ffffff;
	border-radius: 8px;
	/*border: 0.5px solid #eeeeee;*/
}
	
	
	
	
	.Iartifical  {
	
	padding: 20px;
	width: 100%;
	height: 100%;
	margin-bottom: 40px;
	background-color: #ffffff;
	border-radius: 8px;
	/*border: 0.5px solid #eeeeee;*/
}
	


/*  ———————————————————————————————————————————————— */

	
	
	
	
	
	.movimento_box iframe{
		width: 100%;
	}
	
	
	
	
	
	
	
	
	
	

}