figure{ margin:0}
img, picture, video, embed{	border:0; max-width: 100%; /*define a largura máxima em até 100%*/}
A{ text-decoration: none; color:#000;}
A:hover{text-decoration: none;}

body{font-family: 'Montserrat', sans-serif; color:#000; margin:0; padding:0; font-size:15pt;}

.page{ box-sizing: border-box; background-color:#FFF; margin:0; padding:0px;}
.espacador_topo{height:10px}

.sombra{-webkit-box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.60);box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.60);}
.sombra_P{-webkit-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.40);box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.40);}
.redondo_5{-moz-border-radius: 5px; -khtml-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;}
.redondo_10{-moz-border-radius: 10px; -khtml-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;}

.rodape_base{background-color:#000; color:#C1C1C1; border-top: 1px #393a3c solid}
.rodape {box-sizing: border-box; clear:both; background-color:#bef218; border-top:1px solid #999; font-size:8pt; color:#000; text-align:center; padding:10px; margin:0}
.rodape a{color:#000}
/* RODAPÉ BASE */
.rodape_base {
  background-color: #0d0d0f; /* Fundo escuro conforme a imagem */
  width: 100%;
}

.central_roda {
  width: 95%;
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 30px 15px;
  
  /* Flexbox para alinhar todos os elementos */
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

/* LOGO */
.roda_logo {
  box-sizing: border-box;
  text-align: center;
}

.roda_logo_img {
  max-width: 80px;
  height: auto;
  display: block;
}

/* SLOGAN */
.roda_slogan {
  box-sizing: border-box;
  text-align: left;
  font-size: 11pt;
  color: #ffffff;
  line-height: 1.3;
  /* Borda esquerda para imitar a divisória da imagem */
  border-left: 1px solid #444;
  padding-left: 20px;
}

/* REDES SOCIAIS */
.roda_redes {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 12px;
}

.roda_redes .rede {
  max-width: 24px;
  height: auto;
  transition: opacity 0.2s ease;
}

.roda_redes a:hover .rede {
  opacity: 0.8;
}

/* LINK DO SITE */
.roda_site {
  box-sizing: border-box;
  text-align: right;
}

.roda_site a {
  font-size: 14pt;
  font-weight: 600;
  color: #bff219;
  text-decoration: none;
}

.roda_site a:hover {
  text-decoration: underline;
}

/* --- RESPONSIVIDADE (DISPOSITIVOS MÓVEIS / TABLETS) --- */
@media (max-width: 850px) {
  .central_roda {
    flex-direction: column; /* Empilha os elementos no celular */
    text-align: center;
    justify-content: center;
  }

  .roda_slogan {
    border-left: none; /* Remove a linha vertical no mobile */
    border-top: 1px solid #444; /* Adiciona linha horizontal */
    border-bottom: 1px solid #444;
    padding-left: 0;
    padding-top: 15px;
    padding-bottom: 15px;
    text-align: center;
    width: 100%;
  }

  .roda_logo, 
  .roda_redes, 
  .roda_site {
    text-align: center;
  }
}

.subirTopo {text-decoration: none;background: rgba(190,242,24,.9);bottom: 30px; left: 30px;color: #fff;text-align: center;cursor: pointer;padding: 10px;font-size: 10pt;font-weight:600 ;text-transform: uppercase;position: fixed;border: 0;opacity: .8; z-index:99}
.subirTopo:hover {opacity:1;}

.topo_page{ background-color:#5bceeb; clear:both; background-image:url(../images/bg_topo.jpg)}
.lateral_P{box-sizing: border-box; float:right;}
.logo_P{box-sizing: border-box; float:left; text-align:left; padding-top:10px; padding-bottom:10px}

.voltar_base{float:right; padding-right:0px; z-index:9999999; margin-top:30px}
.voltar{color:#000; width:80px; padding:10px; text-align:center; font-size:12pt; margin:auto 0;  z-index:9999999;}

h1 {font-size:28pt;  font-weight:900; margin:0; padding-top:10px; padding-bottom:10px;}
.titulo_linha{ background-color:#bef218; width:20%; height:5px; float:left; box-sizing:border-box; clear:both; margin-bottom:10px; margin-top:0px}
h2 {color:#000; font-weight:900;  font-size:20pt; margin:0; padding-bottom:10px;}
h3 {color:#000; font-size:25pt; margin:0; margin-bottom:20px}



/* Container Principal dos Produtos */
.produtos-container {
  max-width: 1280px;
  padding:5%; padding-top:0; padding-bottom:0;
  margin: 0 auto;
}

/* Grid de Produtos Responsivo (Desktop por padrão) */
.produtos-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  width: 100%;
}

/* Card do Produto */
.produto-card {
  background-color: #ffffff;
  border: 1px solid #c8c8c8;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-decoration: none;
  color: inherit;
}

/* Efeito suave ao passar o mouse */
.produto-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
}

/* Imagem do Produto */
.produto-imagem {
  width: 100%;
  height: 230px;
  background-color: #f9f9f9;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Título / Descrição */
.produto-titulo {
  background-color: #0d0d0f;
  color: #ffffff;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 18px 12px;
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.3;
  margin: 0;
}

.produto-texto {
  padding: 10px;
  font-size: 13px;
  height: 150px;
  overflow: hidden;
  text-align: justify;
  color: #333;
}

/* Botão inferior */
.produto-btn {
  background-color: #ccff00;
  color: #000000;
  text-decoration: none;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 12px 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background-color 0.2s ease;
}

.produto-btn:hover {
  background-color: #b8e600;
}

.produto-btn .seta {
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
}

/* ===================================================
    RESPONSIVIDADE (Media Queries)
=================================================== */

/* Até 900px -> 3 colunas */
@media (max-width: 900px) {
  .produtos-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Até 600px -> 2 colunas */
@media (max-width: 600px) {
  .produtos-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .produto-imagem {
    height: 250px;
  }
}

/* Até 400px -> 1 coluna */
@media (max-width: 500px) {
  .produtos-grid {
    grid-template-columns: 1fr;
  }
}