/***********estilo css*************/



body {
  font-family: Arial, sans-serif;
  background: #f5f5f5;
  padding: 0px;
  margin: 0;
}


/* Layout de colunas */
.layout {
  display: flex;
  justify-content: center;
  gap: 20px;
}

/* Colunas laterais */
.div_esq_ads,
.div_dir_ads {
  flex: 1;
  background: #eee;
  border-radius: 8px;
  min-width: 120px;
  max-width: 200px;
  padding: 10px;
}

/* Conteúdo central */
.container {
  flex: 3;
  max-width: 900px;
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  margin-bottom: 90px; /* garante espaço antes do rodapé */
}
/* Responsivo: esconder colunas laterais */
@media (max-width: 900px) {
  .div_esq_ads,
  .div_dir_ads {
    display: none;
  }
}

/* Cabeçalhos e navegação */
h1 { text-align: center; margin-bottom: 20px; }
.capitulos { text-align: center; margin-bottom: 25px; }
.capitulos a {
  display: inline-block;
  margin: 4px;
  padding: 6px 10px;
  border: 1px solid #007BFF;
  border-radius: 5px;
  text-decoration: none;
  color: #007BFF;
}
.capitulos a:hover { background: #007BFF; color: #fff; }

#div_cap { 
margin-top: 20px; 
line-height: 2;
/*background: #007BFF;
width:auto;
height:25px;
color:aliceblue;
border:2px #3366FF solid;
border-radius:5px;
padding:5px;
font-weight:bold;*/



 }


p { margin: 5px 0; margin-bottom:5px; }
.num { font-weight: bold; color: #007BFF; margin-right: 6px; }
.topbar { display:flex; justify-content: space-between; align-items:center; margin-bottom:10px; 
}
.backlink { text-decoration:none; color:#007BFF; }

/* Rodapé fixo */
footer {

  /*position: fixed;*/
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: #333;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
}

/* Botão subir ao topo */
#btnTopo {
  position: fixed;
  bottom: 80px;
  right: 20px;
  background: #007BFF;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  font-size: 18px;
  cursor: pointer;
  display: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
#btnTopo:hover {
  background: #0056b3;
}






/*********estilo header***************/


.box-retangular-logo{

width:220px;
height:70px;
margin:10px 10px 5px 10px;
padding:5px;
float:left;
display: inline-block;
color:aliceblue; 
font-size:40px;



}
@media (max-width: 900px) {
.box-retangular-logo {
font-size:30px;
margin-top:20px

}
}

box-retangular-logo {
  width:220px;
  height: 70px;
  background-color: aqua;
  margin: 10px 10px 5px 10px;
  padding: 5px;
  float: left;
  display: inline-block;
  color: aliceblue;
  font-size: 40px;
}

/* controle direto da imagem dentro da caixa */
.box-retangular-logo img {
  height: 70px;  /* padrão desktop */
  width: auto;   /* mantém proporção */
}

/* versão mobile */
@media (max-width: 900px) {
  .box-retangular-logo {
    font-size: 30px;
    margin-top: 20px;
    height: auto; /* deixa a altura da div se ajustar à imagem */
  }

  .box-retangular-logo img {
    height: 50px; /* reduz tamanho no celular */
  }
}









.box-retangular-contato{

width:60px;
height:auto;
margin:25px 20px 5px 20px;
padding:5px;
font-size:15px;
float:right;
right: 0;
position: absolute;
color: #FFCC00;
text-decoration: none;

}




/***************/


.header {
	width:100%;
	height: 100px;
	background-color:#fff;
	border-radius:1px;  
	text-align:center;  
	cursor:pointer;
	
	top: 0;
	
	/*display: flex;*/
	flex-wrap: wrap;
	box-shadow: -1px 3px 30px 3px rgba(0,0,0,0.30);
	-webkit-box-shadow: -1px 3px 5px 3px rgba(0,0,0,0.30);
	-moz-box-shadow: -1px 3px 20px 3px rgba(0,0,0,0.30);
	
}







.box-retangular-menu{

width:auto;
height:auto;
margin:10px 3px 1px 15px;
padding:1px;
text-align:center;
float:left;



}




.banner {

background-color: #e74c3c;
padding: 20px;
height:2px;
width:80%;
margin-top:150px;
margin-left:auto;
margin-right:auto;


}

/*.container-corpo {
background:var(--card);
background:url('../img/BG-header.png')no-repeat center center;
border-radius:var(--radius);
box-shadow:0 8px 30px rgba(4,30,60,0.06);
 background-size: cover;   /* cobre toda a div 
  
   overflow: hidden; evita que a imagem transborde 
  
}
*/

	.container-corpo-1 {
	
	box-shadow:0 8px 30px rgba(4,30,60,0.06);
	overflow: hidden; /* evita que a imagem transborde */
	height:auto;;
	width:100%;
	background-color:#fff;
	
	}
	
	.Banner-top-logo{
	
	font-size: 18px;
	background: #FFcc00;
	background: -webkit-linear-gradient(to right, #FFcc00 0%, #FFA73D 30%, #FF7C00 60%, #FF7F04 100%);
	background: -moz-linear-gradient(to right, #FFcc00 0%, #FFA73D 30%, #FF7C00 60%, #FF7F04 100%);
	background: linear-gradient(to right, #FFcc00 0%, #FFA73D 30%, #FF7C00 60%, #FF7F04 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-family: Arial, sans-serif;
	animation: animarTexto 2s infinite alternate; /* Define a animação */
	
	
	}

/* Define a animação usando @keyframes */
@keyframes animarTexto {
  0% {
    transform: scale(1); /* Estado inicial */
  }
  60% {
    transform: scale(1.1); /* Estado final */
  }
}

@media (max-width: 900px) {
.div-container {
width: 100%;
}
}




.footer {
 display: flex;
    flex-wrap: wrap; /* Permite que os itens quebrem para a próxima linha */
    justify-content: center; /* Centraliza os itens horizontalmente */
    align-items: flex-start; /* Alinha os itens no topo da linha */
    gap: 20px;
    padding: 30px;
    color:#292929;
    border-top: 5px solid #0668b2; 

}

/* Estilo para cada caixa (item) do rodapé */
.footer-box {
    flex-basis: 250px; /* Largura base para cada item */
    flex-grow: 1; /* Permite que os itens cresçam para preencher o espaço disponível */
    padding: 15px;
    text-align: center; /* Centraliza o texto dentro de cada caixa */
}

/* Estilos de links e texto para o rodapé */
.footer-box a {
    color: #292929;
    text-decoration: none;
    font-weight: bold;
}

.footer-box a:hover {
    text-decoration: underline;
}

.footer-box p {
    margin: 0 0 10px 0;
}

/* --- Media Query para Dispositivos Móveis --- */
@media (max-width: 900px) {
    .footer-box {
        flex-basis: 100%; /* Em telas menores, cada caixa ocupa a largura total */
    }
}
			




.div-left{

width:20%;
border-radius:5px;
margin:15px 10px 10px 10px; 
padding:1px;
height:auto;
float:left;
flex-wrap: wrap;
align-items: center;


}



@media only screen and (max-width: 900px) {
.div-left {
display: none;
}
}



.div-center{
width:55%;
min-height:400px;
border-radius:5px;
margin:15px 5px 15px 5px;
padding:5px;
float:left;
text-align: center;
display: flex; /* Usar flex container */
justify-content: space-between; /* Espaço igual entre elementos */
align-items: center; /* Centralizar verticalmente */




}

@media (max-width: 900px) {
.div-center {
width: 98%;
}
}

.box-1{

width: 280px;
height: 250px;
background-color: #fff; 
border: 3px solid #0668b2; 
border-radius:10px;
font-size:1em;
margin-bottom:10px;
padding:15px;
margin-right:15px;



}

.box-1 a {

text-decoration:none;
color:#292929;



}

.box-1:hover {

background: rgb(6, 104, 178); 
background: linear-gradient(3deg, #0668b2 0%, #044d80 67%);

color: #fff; /* Cor da fonte quando o mouse passa por cima */
border-radius:10px;
border:1px solid #6945B1; 
}

.box-1:hover a {


color: #fff; /* Cor da fonte quando o mouse passa por cima */
}



/* Media query para dispositivos móveis (largura menor que 768px) */
@media screen and (max-width: 768px) {

.div-center {
flex-direction: column; /* Divs abaixo uma da outra */
align-items: center; /* Centralizar verticalmente */


}
.quadra {
margin-bottom: 15px; /* Espaço entre as divs */
}
}





.div-right {

width:20%;
border-radius:5px;
margin:15px 10px 10px 10px; 
padding:1px;
height:auto;
float:left;
align-items: center;
justify-content: center;


}




@media only screen and (max-width: 900px) {
.div-right {
display: none;
}
}





.div-bg-n{
width:80%; 
height:auto; 
background-color:#FFCC66;
margin: 10px; 
border-radius: 5px;
box-shadow: 1px 2px 2px 2px rgba(12,12,12,0.2); 
border:2px #FFCC00 solid;
padding:20px; 
line-height:35px; 
margin-right: auto; 
margin-left: auto;
flex-wrap: wrap;  
display: flex;
justify-content: center;



}

@media (max-width: 900px) {
.div-bg-n{
width:98%;
}
}

.div-coluna-bg {
width:40%;
border-radius:5px;
margin:15px 10px 10px 10px; 
padding:5px 25px 5px 25px;
height:auto;
display: inline-block;  
/** centralizador**/
align-items: center;
justify-content: center;
/** centralizador**/
font-size:18px;
font-family:Arial, Helvetica, sans-serif;


}

@media (max-width: 900px) {
.div-coluna-bg {
width:98%;
}
}



.auto-style2 {
font-size:30px;
font-family:"Courier New", Courier, monospace;
}




.auto-style3 {
font-size: large;
}


	.div-bg-t{
		width:35%; 
		height:auto; 
		padding:10px 30px 15px 30px;; 	
		margin:0 auto;
		margin-bottom:10px;
		background-color:#fff;
		color:#000;

		}
		
		@media (max-width: 900px) {
		.div-bg-t{
		width:90%;
		}
		}



h1{
	color:#0668b2;

}

h2{
	color:#003366;

}


.box-retangular1{
 margin-left:30px; 
 margin-top:10px;  
 width:250px; 

 color:#000;
 text-align: center; 

	
}



/**********Estlo livros***************/



.main-header {
  text-align: center;
  margin-bottom: 20px;
}

.books-container {
 /*display:flex;
  justify-content: center;
  gap:20px;
  flex-wrap: wrap;
  width:60%;*/
  
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  width:50%;
  margin: 0 auto; /* Centraliza o contêiner na página */


  }


/* Estilos para as colunas */
.div_velho,
.div_novo {
  background: #fff;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  flex: 1 1 calc(40% - 10px); 
  min-width: 0;              /* permite encolher bem */
}

@media (max-width: 900px) {
  .books-container {
    width:100%;

  }

  .div_velho,
  .div_novo {
    flex-basis: 100%;
  }
}

@media (max-width: 900px) {
  .div_velho,
  .div_novo {
    width:50px;


  }
}

@media (max-width: 400px) {
  .div_velho,
  .div_novo {
    flex: 1 1 100%; /* aí sim empilha */
  }
}


.book-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.book-list li {
  margin: 5px 0;
}

.book-list a {
  display: block;
  padding: 10px;
  font-size: 16px;
  background: #f9f9f9;
  border-radius: 5px;
  color: #007BFF;
  text-decoration: none;
  transition: all 0.3s ease;
}

.book-list a:hover {
  background: #28a745;
  color: #fff;
}





/*********estilo menu_st*************/


.navbar {
  background-color: #007BFF;
  color: white;
  display: flex;
  justify-content: flex-end;  /* alinha todo conteúdo à direita */
  align-items: center;
  padding:15px;          /* 15px de margem da borda direita */
  height:40px;
  float:right;
  margin-right:15px;
  z-index: 1000;

  border-radius: 5px;
  margin-top:20px;
 
  
}

/* Links visíveis no PC */
.menu-links {
  list-style: none;
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0;
}

.menu-links li a {
  color: white;
  text-decoration: none;
  font-weight: bold;
  transition: 0.3s;
}

.menu-links li a:hover {
  text-decoration: underline;

}

/* Botão sanduíche */
.menu-toggle {
  display: none;
  font-size: 28px;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  margin-left: auto;  
     /* empurra o botão completamente pra direita */

  
}

/* === MODO CELULAR === */
@media (max-width: 900px) {
  .navbar {  background:none;}




/* === MODO CELULAR === */
@media (max-width: 900px) {
  .menu-links {
    display: none;
    flex-direction: column;
    background: #007BFF;
    position: absolute;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);

	float:right;
	margin-top:30px;
	margin-right:10px;
	top: 70px;            /* fica logo abaixo do botão */
	right: 15px;          /* 15px de distância da borda direita */
	width: 200px;         /* largura fixa da caixa suspensa */
	height: auto;         /* altura automática conforme o conteúdo */
	 padding: 15px;
    text-align: right;   /* ← Alinha o texto à direita */

  }

  .menu-links.show {
    display: flex;
    animation: slideDown 0.3s ease;
  }

  @keyframes slideDown {
    from {opacity: 0; transform: translateY(-10px);}
    to {opacity: 1; transform: translateY(0);}
  }

  .menu-links li {
    text-align: right;
    margin: 8px 0;
  }

  .menu-toggle {
    display: block;
  }
}



.menu-toggle img.icone-menu {

  transition: transform 0.2s ease;
}

.menu-toggle img.icone-menu:hover {
  transform: scale(1.1);
}

  .menu-links li a {
    color: #fff;
    text-decoration: none;
    display: block;
    text-align: right;   /* ← garante alinhamento dos links */
    transition: background 0.3s;
  }

  .menu-links li a:hover {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 6px;
  }
}




/***********Cokies***********/

.CookieMessage {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #0066CC;
    border:1px #0066FF solid;
    border-radius:20px;
    color: white;
    padding: 15px 20px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Arial, sans-serif;
    
}

.CookieMessage-content {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    max-width: 1200px;
    width: 80%;
    justify-content: center;
}

.CookieMessage p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}

.CookieMessage a {
    color: #fff;
    text-decoration: underline;
    font-weight: bold;
}

.CookieMessage-button {
    background-color: #5cb85c;
    color: white;
    padding: 8px 15px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.CookieMessage-button:hover {
    background-color: #4cae4c;
}

/********pagina Busca*************/

 .container-busca {
      max-width: 600px;
      margin: auto;
      background: #fff;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    }
    
         
    
    label-busca {
      display: block;
      margin-top: 10px;
      font-weight: bold;
    }
    select, input {
      width: 100%;
      padding: 8px;
      margin-top: 5px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }
    button-busca {
      margin-top: 15px;
      padding: 10px;
      width: 100%;
      background: #007BFF;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
    button:hover {
      background: #0056b3;
    }
    .resultado-busca {
      margin-top: 20px;
      padding: 15px;
      background: #f9f9f9;
      border: 1px solid #ddd;
      border-radius: 5px;
      min-height: 50px;
      background-color:#FF9900
    }


/**************************/

.box_2 {
		width:35%; 
		height:auto; 
		border:1px solid #e5e7eb;
		
		margin:0 auto;
		margin-bottom:10px;
		background-color:#fff;
		color:#666;
		border-radius:12px;
        padding:16px ;


		}
		
		@media (max-width: 900px) {
		.box_2 {
		width:90%;
		}
		}


.btn-acesse {
  display: inline-block;
  padding: 14px 28px;
  background: linear-gradient(45deg, #6a5acd, #8a2be2);
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  border-radius: 10px;
  text-decoration: none;
  transition: 0.3s;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.btn-acesse:hover {
  background: linear-gradient(45deg, #8a2be2, #6a5acd);
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(0,0,0,0.4);
}