body {
    font-family: Verdana, Helvetica, Arial, sans-serif;
    font-size: medium;
    color: black;
    background-color: #E9F0FB;
    margin: 5px;
}
/*regra do cabeçalho*/
header {
background-color: #adc4f0;
padding-bottom: 5px;
margin: 0;
}
/*regra do navegador, cor de fundo, preenchimento cima e baixo*/
nav {
   background-color: #adc4f0;
   padding-top: 5px;
   padding-bottom: 1px;
   margin: 0;
   
}
 
 /*regra da lista no navegador: itens em linha (horizontal), centralizados, sem bullet points*/
nav ul {
   list-style-type: none;
   padding-left: 0;
   margin: 0;
   text-align: center;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
      
}    
/*regra dos itens da lista do navegador, tamanho da fonte, negrito e margens*/
nav ul li{
   font-size: 100%; 
   line-height: 1.7em;
   margin: 0 18px;
  
} 
 
/*comportamento dos links cor e decoração, antes e depois de clicado*/
nav ul li a:link, nav ul li a:visited {
    color: black;
    text-decoration: none;
}
/*comportamento dos links com o mouse em cima*/
nav ul li a:hover {
    color: yellow;/*#fed958;*/
    text-decoration: none;
}
h1 {
    font-size: 140%;
    color: #367588;
    text-align: center;
    margin-top: 30px;
    margin-bottom: 20px;
    
}
h2 {
    font-size: 115%;
    color: #367588;
    text-align: center;
    line-height: 2em
}
h3 {
    font-size: 110%;
    color: #367588;
    text-align: center;
    line-height: 2em;   
}
 
p {
   font-size: 100%;
   line-height: 2em;
 
}
a:link, a:visited {
 color: #2e446e;
}
a:link, a:hover {
 color: blue;
}
.imagens {
text-align: center;
}
.formula {
 text-align: center;
}
article {
text-align: justify;
 max-width: 800px;
 margin: 0 auto;
}
table {
border: thin solid black;
border-collapse: collapse;
}
th {
border: thin solid black;
text-align: center;
}
td {
border: thin solid black;
text-align: center;
}
ul{
text-align: justify;
list-style-position: inside;
}
ul li {
margin: 18px 0px 18px 0px;
}
.anuncio {
text-align: center;
}

/*painel de produtos com cards (Mercado Livre, Amazon, etc.)*/
.painel-produtos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 25px;
  margin: 20px 0;
}
.produto-card {
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  padding: 18px;
  width: 220px;
  text-align: center;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.produto-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.18);
}
.produto-card img {
  max-width: 100%;
  height: 160px;
  object-fit: contain;
  margin-bottom: 10px;
  margin-top: 10px;
}
.produto-titulo {
  font-size: 95%;
  font-weight: bold;
  color: #2D3277;
  margin: 8px 0 12px 0;
  line-height: 1.4em;
}
.loja-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 75%;
  font-weight: bold;
  padding: 3px 8px;
  border-radius: 4px;
  color: white;
}
.loja-mercadolivre {
  background-color: #2D3277;
}
.loja-amazon {
  background-color: #FF9900;
  color: #131921;
}

/*botão dentro do card de produto (substitui o antigo .mercadolivre solto)*/
.botao-produto {
  display: inline-block;
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-size: 14px;
  padding: 8px 16px;
  border: solid;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s ease;
  letter-spacing: 0.3px;
}
.botao-produto.mercadolivre {
  background-color: #FFE600;
  color: #2D3277;
}
.botao-produto.mercadolivre:hover {
  background-color: #2e39c9;
  color: white;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  transform: translateY(-2px);
}
.botao-produto.amazon {
  background-color: #FF9900;
  color: #131921;
}
.botao-produto.amazon:hover {
  background-color: #131921;
  color: #FF9900;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  transform: translateY(-2px);
}

/*botões de ajuste fino (+/-) ao lado dos inputs range*/
.ajuste-fino {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background-color: #adc4f0;
  color: #2e446e;
  font-size: 18px;
  font-weight: bold;
  border: 1px solid #367588;
  border-radius: 50%;
  cursor: pointer;
  vertical-align: middle;
  margin: 0 8px;
  transition: all 0.2s ease;
}
.ajuste-fino:hover {
  background-color: #367588;
  color: white;
}
.ajuste-fino:active {
  transform: scale(0.92);
}

/*regra do rodapé, cor de fundo, alinhamento e preencimento*/
footer {
    background-color: #adc4f0;
    font-size: 100%;
    text-align: center;
    margin-top: 20px;
    padding-top: 5px;
    padding-bottom: 5px;
    clear: right;
    
}
/*comportamento dos links cor, decoração antes e depois de clicado*/
 a:link,  a:visited {
    text-decoration: none;
    color: black;
}
/*comportamento dos links com o mouse em cima*/
 a:hover {
    text-decoration: none;
    color: yellow;
}
/* formulario*/
#geladeira {
text-align: center;
}
label.textoformulario {
font-size: 120%;
margin:5px;
margin-left:1px;
margin-right:1px;
}
output.textoformulario {
font-size: 120%;
margin:5px;
margin-left:1px;
margin-right:1px;
}
label.resultado {
color: darkblue;
font-size: 180%;
font-weight: bold;
}
output.resultado {
color: darkblue;
font-size: 180%;
font-weight: bold;
}
#chuveiro {
text-align: center;
}
label.textoformulario {
font-size: 120%;
margin:5px;
margin-left:1px;
margin-right:1px;
}
output.textoformulario {
font-size: 120%;
margin:5px;
margin-left:1px;
margin-right:1px;
}
label.resultado {
color: darkblue;
font-size: 180%;
font-weight: bold;
}
output.resultado {
color: darkblue;
font-size: 180%;
font-weight: bold;
}
.contato {
text-align: center;
}
.sobre {
text-align: justify;
}
/*estilos da pagina de blog*/
.lista-blog {
   max-width: 800px;
   margin: 0 auto;
   padding: 0;
   text-align: center;
   list-style-type: none;
}
.lista-blog li {
   background-color: white;
   border-radius: 8px;
   padding: 15px 20px;
   margin: 15px 0;
   box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.lista-blog a {
   font-size: 115%;
   font-weight: bold;
}
/*comportamento dos links cor, decoração antes e depois de clicado*/
 .link-blog:link,  .link-blog:visited {
    text-decoration: none;
    color: black;
}
/*comportamento dos links com o mouse em cima*/
 .link-blog:hover {
    text-decoration: none;
    color: blue;
}
.lista-blog p {
   margin: 5px 0 0 0;
   font-size: 95%;
   color: #444;
}