/* CSS Document */
*{margin:0px; padding:0px;font-family: "Figtree", sans-serif;}
a{text-decoration:none; color:#535353;}
img{border:0;}
ul{ list-style:none;}
.clear{clear:both;}
.center{text-align:center;}
.left{text-align:left;}
.right{text-align:right;}
.justify{text-align:justify;}
.no-padding{padding:0px;}
.float-left{float:left !important;}
.float-right{float:right !important;}
.img{width:100%; height:auto; display:block;}

.radius{border-radius:10px; -moz-border-radius:10px; -ms-border-radius:10px; -o-border-radius:10px; -webkit-border-radius:10px;}
.transition{transition:all 0.5s; -moz-transition:all 0.5s; -ms-transition:all 0.5s; -o-transition:all 0.5s; -webkit-transition:all 0.5s;}
.gotop{width:58px; height:58px; position:fixed; bottom:90px; right:10px; font-size:20px; background:#1f1f1f; color:#fff; text-align:center; border:0; display:none;}
.btwhats { font-size: 1rem; padding: 10px; position:fixed; right:10px; bottom:60px; width:auto; 
height: auto; vertical-align:middle; background:#01b763; color:#fff; text-align:center; line-height:2.6; font-weight:500; z-index: 9999999999; 
font: 13px Helvetica,Arial,sans-serif; text-decoration: none;}

body{min-width:980px; max-width:100%; overflow-x:hidden; overflow-y:scroll; background: #fff;}
html, body {width:100%; height:100%; font-size:14px; font-weight:400;}

#anchor{width:1px; height:1px; position:absolute; z-index:-999; left:0px; bottom:120px;}
.anchor{width:1px; height:1px; position:absolute; z-index:-999; left:0px; top:-140px;}

.desktop{display: block;}
.mobile{display: none;}
 
.bg_topo, .faixa, .topo, .bg_menu, .bg_banner, .bg_conteudo, .bg_rodape, .direitos{width:100%; height:auto; position:relative; float:left;}
.faixa{z-index: 9; background: #850202;}
.bg_topo{z-index:9; background: #fff;}
.bg_banner{z-index:0; background: #fff; max-height: 800px; overflow: hidden;}
.bg_conteudo{height:auto; z-index:0; background: #fff; box-sizing: border-box; padding: 40px 0;}
.bg_rodape{z-index:0; background: #850202; margin: 0; padding: 40px 0;}
.direitos{z-index:0; background:#fff; padding:10px 0; font-size:16px; color:#535353; font-weight:300;}

.centralizar{width:94%; height:auto; position:relative; float:left; margin:0 3%;}

/*TOPO*/
.flex{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo{width:auto; height:80px; position:relative; display: inline-block; margin: 10px 0;}
.logo img{width:auto; height: 100%; position: relative; float: left;}

.telefones{width: 140px; position:relative; display: inline-block;}
.telefones *{position:relative; float:left; padding:0 5px; font-size: 14px; height: 40px; line-height: 40px !important;}
.telefones i{color: #c00; font-size: 20px;}
.telefones a{color: #242424; font-weight: 600;}
.wts i{background: url(../imagens/bg-whats.png) center center no-repeat; background-size: 100%; color: #242424; font-size: 20px;}

.form_busca{width: 170px; height: auto; position:relative; display: inline-block; margin:10px 0; background: #f1f1f1; border-radius: 10px; border: 1px solid #850202; overflow: hidden;}
.box_busca{width: 80%; height: 40px; box-sizing: border-box; position: relative; float: left;}
.btn_busca{width: 20%; height: 40px; box-sizing: border-box; position: relative; float: left; text-align: center; line-height: 30px !important; border: 0; padding: 5px; background: #850202; color: #fff;}
.form_busca input{width: 100%; height: 40px; box-sizing: border-box; position: relative; float: left; border: 0; padding: 5px; background: none; outline: none;}

.bt_menu, .bt_cmenu{display:none; border:0;}
.bt_menu{width: 100px; height: 50px; position: relative; float: right; background: #fff; border: 1px solid #850202; box-sizing: border-box; line-height: 50px; text-align: center; margin: 25px 10px; cursor: pointer; color: #850202;}
.bt_cmenu button{width:100%; height:auto; position:relative; float:left; margin:0 0 20px 0; text-align:center; padding: 10px; border:0; font-size:16px; color:#fff; background:#850202;}
.bg_menu{max-width: 700px;}
.bg_menu *{box-sizing: border-box;}
.menu{
  display: flex;
  width: 100%;
  justify-content: space-between;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ===== Links do menu ===== */
.menu a,
.menu p{
  display: block;
  width: 100%;
  height: 100%;
  color:#242424;
  font-weight:400;
  font-size:14px;
padding: 5px 10px;
border-radius: 10px;
}

.menu p{ cursor:pointer; }

.menu .ativo{ background:#850202; color: #fff; }

/* ===== Itens de 1º nível ===== */
.menu > li{
text-align: center;
line-height: 40px;
white-space: nowrap;
position: relative;
border-radius: 10px;
}

/* ===== Submenus (1º dropdown) ===== */
.menu ul a{
	color: #069;
}
.menu > li > ul.submenu{
  display:none;
  width:200px;
  background:#850202;
  position:absolute;
  top:100%;
  left:0;
  border:1px solid rgba(0,0,0,0.1);
  z-index:9999;
border-radius: 10px;
}

.menu > li:hover{
	background: rgba(255,255,255,0.1);
}

.menu > li:hover > ul.submenu{
  display:block;
}

/* Itens do submenu */
.submenu > li{
  position:relative;
  width:100%;
  line-height:30px;
  text-align:left;
}

.submenu > li > a{
  font-weight:300;
  font-size:13px;
  padding:6px 10px;
color: #fff;
}

.submenu > li:hover > a{
  background:rgba(0,0,0,0.05);
}

/* ===== Submenu2 (flyout lateral) ===== */
.submenu > li > ul.submenu2{
  display:none;
  width:220px;              /* pode ajustar */
  background:#850202;
  position:absolute;
  top:0;
  left:100%;
  border:1px solid rgba(0,0,0,0.2);
  z-index:10000;
}

.submenu > li:hover > ul.submenu2{
  display:block;
}

/* Itens do submenu2 */
.submenu2 li a{
  font-weight:300;
  font-size:13px;
  padding:6px 10px;
}

.submenu2 li a:hover{
  background:rgba(0,0,0,0.05);
}

/* Efeito Pulsar Botão WhatsApp */
.efeitoPulse { cursor: pointer; box-shadow: 0 0 2px rgba(0,0,0, 0.1); animation: pulse 1s infinite;}
.efeitoPulse:hover { animation: none; }

@-webkit-keyframes pulse {
0% { -webkit-box-shadow: 0 0 0 2px rgba(0,0,0, 0.1);}
70% { -webkit-box-shadow: 0 0 0 10px rgba(0,0,0, 0.1);}
100% { -webkit-box-shadow: 0 0 0 2px rgba(0,0,0, 0.1);}
}
@keyframes pulse {
0% { -moz-box-shadow: 0 0 0 2px rgba(0,0,0, 0.1); box-shadow: 0 0 0 2px rgba(0,0,0, 0.1);}
70% { -moz-box-shadow: 0 0 0 10px rgba(0,0,0, 0.1); box-shadow: 0 0 0 10px rgba(0,0,0, 0.1);}
100% { -moz-box-shadow: 0 0 0 2px rgba(0,0,0, 0.1); box-shadow: 0 0 0 2px rgba(0,0,0, 0.1);}
}

/*BANNER*/
.bg_banner .item{background: #fff; width: 100%; height: auto; position: relative; float: left;}
.bg_banner video{width:100%; height:auto; position:relative; float:left; padding:0; margin:0; z-index: 99;}
.bg_banner .desc{position: absolute; width: 100%; top: 60%; left: 0; z-index: 999; background: rgba(0,0,0,0.2);}
.bg_banner .desc h2{width: 100%; font-size: 24px;}

.bn .slick-prev, .bn .slick-next{ width: 40px !important; height: 40px !important; color:#fff !important; background: rgba(0,0,0,0.4) !important;}
.bn .slick-prev{left:0 !important;}
.bn .slick-next{right:0 !important;}
.bn .slick-prev:before, .bn .slick-next:before{ font-size: 24px !important; color: #fff !important;}

.slick-prev:before{font: var(--fa-font-solid); content: "\f053"; }
.slick-next:before{font: var(--fa-font-solid); content: "\f054"; }
.slick-prev:hover, .slick-next:hover{background: rgba(0,0,0,0.9) !important;}

.slider_clientes .slick-slide{margin: 0 10px;}
.slider_clientes .slick-prev, .slider_clientes .slick-next{ width: 20px !important; height: 20px !important; color:#fff !important; background: rgba(0,0,0,0.4) !important;}
.slider_clientes .slick-prev:before, .slider_clientes .slick-next:before{ font-size: 12px !important; color: #fff !important;}
.slider_clientes .slick-prev{left:-20px !important;}
.slider_clientes .slick-next{right:-20px !important;}

.slider_clientes img{width: 127px !important; height: 73px; box-shadow: 0 0 5px #ccc; background: #fff; padding: 5px;}

/*CONTEUDO*/
.upper{text-transform: uppercase;}
.color1{color:#850202;}
.color2{color:#545454;}
.color3{color:#000;}
.color4{color:#fff;}
.color5{color:#ff0;}

.divisor{width:100%; position:relative; float:left;}
.divisor h2{width: 100%; font-size: 30px;}
.divisor h3{width: 100%; font-size: 24px; font-weight: 400;}

.container {
  display: grid;
  gap: 40px;
}

.reverse .container{
display: flex;
flex-direction: row-reverse;
}

.duas.coluna {
grid-template-columns: repeat(2, 1fr);
gap: 0;
}

.quatro.coluna {
   grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: stretch;
}

.container .item {
  display: flex;
  flex-direction: column; /* empilha imagem, texto e botão */
  flex: 1;
	padding: 10px;
	box-shadow: 0 0 5px #ccc;
	background: #f1f1f1;
}

.produto.item {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.container p{
	font-size: 16px;
	font-weight: 300;
	margin: 10px 0;
}

.saibamais{
  display: inline-block;          /* mantém o tamanho do conteúdo */
  background: #242424;
  color: #fff;
  border-radius: 10px;
  padding: 10px 20px;             /* botão com tamanho proporcional */
  text-decoration: none;
  align-self: flex-start;         /* mantém alinhado à esquerda */
margin-top: auto;
}

.botoes{
display: inline-block;  
align-self: flex-start;         /* mantém alinhado à esquerda */
margin-top: auto;
}

.botoes .bt{
	position: relative;
	float: left;
	padding: 10px 20px;
	background: #850202;
  color: #fff;
  border-radius: 10px;
	margin: 0 10px 0 0;
}

.botoes .bt.btn-whatsapp{
	background: #01b763;
}


.botoes .bt{
	transition:.2s;
}

.botoes .bt:hover{
	filter: brightness(0.9);
	box-shadow: 0 0px 5px rgba(0,0,0,0.15);
}

/* >>>>>>> BLOCO DE MÍDIA COM ZOOM + PLAY (RENOMEADO PARA EVITAR CONFLITO COM .banner .media) */
.coluna.categoria .mediaBox{
	max-height: 400px;
}

.coluna.produto .mediaBox{
	max-width: 50%;
	padding: 0% 25%;
	height: auto;
	max-height: 500px;
	float: right;
	margin: 0;
}

.mediaBox{
  position:relative; max-width:100%; height:auto; max-height: 350px; overflow:hidden; margin-bottom: 10px;
}
.mediaBox .thumb{
  width:100%; height:100%; object-fit:cover;
}

@keyframes zoomIO{
  from{ transform:scale(1); }
  to  { transform:scale(1.25); }
}

.produto .item:nth-child(1){
	background: #fff;
	padding: 0;
}

.container .item:hover{
	box-shadow: 0 0 5px #850202;
}

.produto .item:hover{
	box-shadow: 0 0 0 #fff;
}

.container .item:hover .mediaBox .thumb{
	transform:scale(1); animation:zoomIO 2s ease-in-out infinite alternate; will-change:transform;
}

.container .item:hover .saibamais {
	background: #850202;
}

.descricao {
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
	max-height: 300px;
	overflow: hidden;
	margin-bottom: 10px;
}

/*FORMULARIO*/
.formulario{width:100%; height:auto; position:relative; float:left;}
.formulario .esp_campo{width:100%; height:auto; position:relative; float:left; margin:0px 0px 5px 0px;}
.formulario label{width:100%; height:30px; line-height:30px; position:relative; float:left; font-size:13px; color:#000; font-weight:400;}
.formulario .input, .formulario .select, .formulario .textarea, .formulario .codigo {position:relative; float:left; padding:10px; border:1px solid #ccc; outline:none; box-sizing:border-box; background:#fff; color:#242424;}
.formulario .input, .formulario .select, .formulario .textarea{width:100%; height:auto;}
.formulario .textarea{height:150px;}
.formulario .captcha{width:70px; height:38px !important; position:relative; float:left;}
.formulario .codigo{width:100px; margin:0 10px;}
.formulario .refresh {position:relative; float:left; padding:5px; outline:none; cursor:pointer; box-sizing:border-box;}
.formulario .bt_enviar{position:relative; float:left; width:100%; padding: 10px; outline:none; cursor:pointer; box-sizing:border-box; border: 0; background: #850202; color: #fff;}

.formulario .bt_enviar:hover{
	box-shadow: 0 0 5px #850202;
	background: #338599;
}

.mapa{width: 100%; height: 240px; position: relative; float: left; margin: 20px 0;}

/*RODAPE*/
.rodape .logo{height: 60px;}
.rodape.container {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
	font-size: 16px;
}

.rodape.container .coluna {
	flex: 1 1;
  box-sizing: border-box;
  text-align: left;
  text-decoration: none;
  padding: 10px;
}
.rodape .icone{
	padding: 5px;
	background: rgba(255,255,255,0.1);
	width: 30px;
	height: 30px;
	font-size: 20px;
	line-height: 30px !important;
	text-align: center;
	color: #fff;
}
.rodape p{
	width: 100%; height: auto; margin: 10px 0; position: relative; float: left; line-height: 30px;
}
.rodape a{
font-weight: 300;
}
.rodape img.icon{
	width: auto; height: 40px; position: relative; float: left; margin: 5px;
}
.direitos span{font-weight:300; font-size: 16px;}

@media only screen and (min-width: 996px) and (max-width: 1550px) {
.menu a,
.menu p{
font-size:13px;
padding: 5px;
border-radius: 10px;
}
}

/*TABLET*/
@media only screen and (max-width:995px) {
.bg_menu{width:100%; height:100vh; background:none; position:fixed; top:0; left:-100%; background:#f1f1f1; overflow:scroll; z-index:9999; box-sizing:border-box;}
.bt_menu, .bt_cmenu{display:block;}
.menu{display: block; width: 100%; height: 100%; overflow: auto;}
.menu ul{display: block; width: 100%;}
.menu > li{flex:none; text-align: left; position: relative; float: left; line-height: 40px; width: 100%;}
.menu a, .menu p{position: relative; float: left; padding: 5px;  width: 100%; color: #850202; font-weight: 600;}
.menu > li > ul, .submenu > li > ul{position: relative; float: left; border: 0; background: none;}
.menu > li > ul{top: 0; left: 0;}
.submenu > li > a{background: rgba(0,0,0,0.05); color: #242424;}
.submenu > li > ul{top: 0; left: 0;}
.submenu > li {line-height: 30px; text-align: left;}
.menu > li:hover .submenu{display: block;}
.submenu > li:hover .submenu2{display: block;}
.arrow > li > a::after{content: "\f107";}
	
.home.container, .depoimentos.container, .galeria.container {
  grid-template-columns: 1fr;
}
	
}

@media only screen and (min-width: 768px) and (max-width: 995px) {
body{min-width:768px;}
.logo{height:60px;}
}

/*MOBILE PAISAGEM*/
@media only screen and (max-width: 767px){
.desktop, .faixa, .fones, .carrinho span, .bt_menu span{display: none;}
.mobile{display: block;}
.bg_banner{margin-top: 60px;}
.bg_topo{position: fixed; z-index: 99; border-bottom: 2px solid rgba(0,0,0,0.5);}
.logo {height: 40px;}
.carrinho, .bt_menu{width: 50px; height: 50px; line-height: 50px; margin: 5px;}

.faq-grid{
grid-template-columns: 1fr;
}
.rodape.container .coluna {
flex: 1 1 calc(100% - 15px);  /* 5 itens por linha */
}
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
body{min-width:480px;}
}
/*MOBILE RETRATO*/
@media only screen and (max-width: 479px) {
body{min-width:320px;}
}


/*BREADCRUMB*/
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 10px 15px;
    margin: 0 0 20px 0;
    list-style: none;
    font-size: 15px;
    line-height: 1.5;
    background: #f7f7f7;
    border-radius: 6px;
}

.breadcrumb li {
    position: relative;
    color: #333;
    word-break: break-word;
}

.breadcrumb li:not(:last-child)::after {
    content: ">";
    margin-left: 6px;
    color: #999;
}

.breadcrumb li:last-child {
    color: #b30000;
    font-weight: 600;
}

@media (max-width: 768px) {
    .breadcrumb {
        font-size: 14px;
        padding: 8px 12px;
    }
}

@media (max-width: 480px) {
    .breadcrumb {
        font-size: 13px;
        padding: 8px 10px;
    }
}