@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i&display=swap');
*{ margin: 0; padding: 0; border:0; text-decoration:none;box-sizing: border-box;list-style:none;}
body {font: 62.5%; font-family: Arial, Helvetica, sans-serif; font-weight:400; font-size:16px;}
img{max-width: 100%;}
.clear{clear:both;}
titulo{ width: 100%; display: block; padding: 10px 0; text-align: center; background: #f4f4f4;}
titulo h1{ font-size: 24px; color: #2E3192; font-weight: 400;}
.zapbox{ position: fixed; z-index: 9999; bottom: 1%; right: 1%; text-align: right; }
.zapbox .btf{ padding: 2px 5px; border-radius: 3px; background: #F00; color: #FFF; display: inline-block; margin: 0 15px 0 0; z-index: 999; position: relative; }
.zapbox .btw{ display: block; margin-top: -15px; }

.boxcook{ position: fixed; z-index: 9999; display: inline-block; width: 1110px; max-width: 100%; height: 95px; bottom: 10%; left: 50%; margin: 0 0 0 -555px ; background: rgba(255, 255, 255, 0.9);border: 1px solid rgba(140, 140, 140, 0.3);box-sizing: border-box;box-shadow: 0px 2px 13px rgba(0, 0, 0, 0.2);border-radius: 10px; text-align: left; padding: 0 10px; }
.boxcook p{vertical-align: middle; display: inline-block; padding: 10px; font-size: 15px;}
.boxcook p strong{ color: #4EBBB2;  font-size: 20px; }
.boxcook a{ color: #3A72C1; text-decoration: underline; font-weight: bold; }
.boxcook a.btp{ padding: 5px 20px; vertical-align: middle; float: right; color: #3A72C1; border: 1px solid #3A72C1; border-radius: 25px; text-decoration: none; margin: 20px 10px; font-size: 18px;}
.boxcook button{ padding: 5px 20px; vertical-align: middle; float: right; color: #3A72C1; border: 1px solid #3A72C1; border-radius: 25px; text-decoration: none; margin: 20px 10px; font-size: 18px; cursor: pointer; }
@media screen and (max-width: 1200px){
	.boxcook{ position: fixed; z-index: 9999; display: inline-block; width: auto; max-width: 90%; height: auto; bottom: 10%; left: 2%; margin: 0; }
}
@media screen and (max-width: 450px){
	.boxcook button{ padding: 5px 20px; float: none;  margin: 5px 10px; font-size: 18px; cursor: pointer; }
.boxcook a.btp{ float: none; margin-bottom: 20px; display: block; text-align: center; font-size: 18px;}
	.boxcook button{ float: none; margin: 20px 10px; display: block; text-align: center; font-size: 18px;}
}

.title{display: block; width: 100%; text-align: center;}
.title h2{ padding: 5px; background: #01ABE6; color: #FFF; margin: 0 auto; font-size: 36px;  font-weight: 400; }
.title h2 span{ color: #2E3192; }
/* ===== TOPO ===== */
.topbar { background:#fff; }
.topbar .container { max-width:1024px; margin:auto; display:flex; align-items:center; justify-content:space-between; padding:10px 20px; flex-wrap:wrap; }
.topbar .logo img { max-width:100%; }
.topbar .search-box { display:flex; align-items:center; border:1px solid #ccc; border-radius:20px; overflow:hidden; }
.topbar .search-box input { border:none; padding:5px 10px; outline:none; }
.topbar .search-box button { background:#333; color:#fff; border:none; padding:5px 10px; cursor:pointer; }
.topbar .contacts a { color:#000; font-size:14px; }
.topbar .contacts i {color: #01ABE6; font-size: 18px; padding: 5px; }
/* ===== MENU PRINCIPAL ===== */
nav {  overflow: hidden;  background-color: #333;  text-align: center; }
nav .topnav {  overflow: hidden;  background-color: #333;  max-width: 1000px;  margin: 0 auto;  text-align: center; }
nav .topnav a {  display: inline-block;  color: #f2f2f2;  text-align: center;  padding: 10px 15px;  text-decoration: none;  font-size: 17px; }
nav .topnav .icon {  display: none;}
nav .dropdown {  display: inline-block;  vertical-align: middle;  overflow: hidden; }
nav .dropdown .dropbtn { font-size: 17px; border: none; outline: none; color: #FFF; padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0; }
nav .dropdown-content { display: none; position: absolute; background-color: #333; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1;}
nav .dropdown-content a { float: none; padding: 12px 16px; text-decoration: none; display: block; text-align: left; }
nav .topnav a:hover, .dropdown:hover .dropbtn { color: #01ABE6; }
nav .dropdown-content a:hover { color: #01ABE6; }
nav .dropdown:hover .dropdown-content { display: block; }
@media screen and (max-width: 600px) {
  nav .topnav a:not(:first-child), .dropdown .dropbtn { display: none; }
  nav .topnav a.icon { float: right; display: block; }
  nav .topnav.responsive {position: relative;}
  nav .topnav.responsive .icon { position: absolute; right: 0; top: 0; }
  nav .topnav.responsive a { float: none; display: block; text-align: left; }
  nav .topnav.responsive .dropdown {float: none; width: 100%;}
  nav .topnav.responsive .dropdown-content {position: relative;}
  nav .dropdown-content { background-color: #333; width: 100%; }
  nav .topnav.responsive .dropdown .dropbtn { display: block; width: 100%; text-align: left; }
}
@media (max-width: 992px) {
    .topbar .search-box {margin:10px auto; text-align: center;}
    .topbar .contacts {width:100%;margin-top:10px; display: none;}
}
@media (max-width: 600px) {
    .topbar .search-box { display: none;}
}

/* --------------------------- BANNER ------------------------------*/
.banner{width:100%; float:left; padding:0; margin:0; text-align:center;}
  /* container das slides ? sua altura ser� ajustada via JS para a imagem ativa */
.banner .slides{ position:relative; width:100%; transition:height 200ms ease; /* mudan�a de altura suave */ }
  /* cada slide fica sobreposto (fade) */
.banner .slide { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; transition: opacity 1s ease-in-out; pointer-events: none; /* desativa clique em slides ocultos */}
.banner .slide.active { opacity: 1; z-index: 1; pointer-events: auto; /* ativo pode ser clicado */ }
.banner .slide img{ width:100%; height:auto; /* altura de acordo com a imagem cadastrada */ display:block; }
.banner .prev,.banner .next{ position:absolute; top:50%; transform:translateY(-50%); background:rgba(0, 0, 0, 0);color:#fff; border:0; padding:10px 12px; cursor:pointer; font-size:20px; border-radius:50%; z-index:10; }
.banner .prev:hover,.banner .next:hover{background:rgba(0,0,0,0.7)}
.banner .prev{left:12px}
.banner .next{right:12px}
.banner .dots{ position:absolute; bottom:90px; left:0; right:0; text-align:center; z-index:10; }
.banner .dot{ display:inline-block; width:12px; height:12px; margin:0 6px; background:rgba(255,255,255,0.5); border-radius:50%; cursor:pointer; transition:background .2s; }
.banner .dot.active{background:#fff}
/* responsivo - reduz controles em telas pequenas */
@media(max-width:600px){
    .banner .prev,.banner .next{display: none;}
}

/* --------------------------- CAROUSEL ------------------------------*/
.listasol{width:100%; float:left; text-align:center; padding: 50px 0;}
.carousel-multi {position: relative;width: 100%;overflow: hidden;margin: auto;}
.carousel-track {display: flex;transition: transform 0.5s ease;}
.carousel-item {flex: 0 0 20%; /* 5 no PC */padding: 15px;text-align: center;}
.carousel-item .box {background: #f4f4f4; padding-bottom: 10px;}
.carousel-item .boximg {width: 100%;height: 250px;}
.carousel-item h3 {font-size: 16px; color: #000; padding: 10px; }
.carousel-item .btn {display: inline-block;padding: 8px 14px;background: #007bff;color: #fff;text-decoration: none;border-radius: 5px;font-size: 14px;transition: background 0.3s; margin-top: 10px;}
.btn:hover {background: #0056b3;}
/* Tablet (3 itens) */
@media (max-width: 1200px) {
    .carousel-item {  flex: 0 0 33.33%;}
}
/* Celular (1 item) */
@media (max-width: 768px) {
    .carousel-item {  flex: 0 0 100%;}
}
.carousel-multi .prev,
.carousel-multi .next {position: absolute;top: 50%;transform: translateY(-50%);background-color: rgba(0,0,0,0.5);color: white;border: none;padding: 12px;cursor: pointer;font-size: 20px;border-radius: 50%;z-index: 10;}
.carousel-multi .prev { left: 10px; }
.carousel-multi .next { right: 10px; }
.carousel-multi .prev:hover,
.carousel-multi .next:hover {background-color: rgba(0,0,0,0.8);}

/* --------------------------- HOME ------------------------------*/
.homeempresa{width:100%; float:left; text-align:center; background: url('../imagens/background_empresa_home.jpg'); }
.homeempresa .meio{max-width:1100px; width: 100%; margin:0 auto; display: inline-block; padding: 50px 10px; text-align: left; color: #FFF;}
.homeempresa a{ padding: 10px; margin: 10px; color: #FFF; background: #01ABE6; border-radius: 10px; }
.homeempresa .texto{ padding: 10px; }
.homeempresa img{ max-width: 100%; }

.homeempresa .imgpc{ display: block; }
.homeempresa .imgmob{ display: none; }

@media screen and (max-width: 600px){
.homeempresa .imgpc{ display: none; }
.homeempresa .imgmob{ display: block; }
}

.homeatuacao{width:100%; float:left; text-align:center; background: url('../imagens/background_area_atuacao_home.jpg'); }
.homeatuacao .meio{max-width:1100px; width: 100%; margin:0 auto; display: inline-block; padding: 50px 10px; text-align: center; min-height: 1100px;  }
.homeatuacao .meio p{ font-size: 20px; padding: 30px 0; }
@media screen and (max-width: 600px){
  .homeatuacao .meio{min-height: auto;  }

}
.hometitle{ width:100%; padding: 50px 0; float:left; text-align:center; background: #333;  }
.hometitle img{ max-width: 90%;}

.paralaxhome{ display: block; width: 100%; height: 400px; text-align: center; background: url('../imagens/paralax.jpg') center fixed;}
.paralaxhome h2{ background:#00000075; color: #FFF; padding: 20px; font-size: 30px; font-weight: 400; display: inline-block; margin-top: 110px; text-align: center; width: 100%; }
.paralaxhome h2 span{ display: inline-block; font-size: 18px; padding: 10px; margin: 10px; color: #FFF; background: #01ABE6; border-radius: 10px; }



/* --------------------------- pagina ------------------------------*/
.pagina{width:100%; float:left; text-align:center; }
.pagina .meio{max-width:1000px; width: 100%; margin:0 auto; display: inline-block; padding: 30px 10px; text-align: left;}
.pagina .meio img{max-width:100%; padding: 10px;}
.pagina .meio p{font-size: 18px;}
.pagina .meio .titulo{ padding: 50px 10px; text-align: center; color: #004180; font-size: 30px; font-weight: 400; }
.pagina .bannerf{ display: block; width: 100%; }
.pagina .bannerm{ display: none; width: 100%; }
@media screen and (max-width: 1000px){
.pagina .bannerf{ display: none; }
.pagina .bannerm{ display: block; }
}

.regioes-container { width: 95%; max-width: 800px; margin: 0 auto; padding: 20px; background-color: #fff; box-shadow: 0 4px 8px rgba(0,0,0,0.1); border-radius: 8px; box-sizing: border-box; }
.regioes-container h1 { color: #003366; text-align: center; margin-bottom: 25px; font-size: 1.8em; }
.regioes-container .estados-abas { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 15px; border-bottom: 1px solid #ddd; padding-bottom: 15px; }
.regioes-container .estado-btn { padding: 10px 25px; border: none; border-radius: 5px; background-color: #003366; color: white; font-size: 16px; font-weight: bold; cursor: pointer; transition: background-color 0.3s ease; }
.regioes-container .estado-btn.active { background-color: #0099ff; }
.regioes-container .estado-btn:not(.active):hover { background-color: #004b8d; }
.regioes-container .cidades-lista { border: 1px solid #e0e0e0; padding: 25px; border-radius: 5px; min-height: 200px; }
.regioes-container .cidades-lista ul { list-style: none; padding: 0; margin: 0; column-count: 1; column-gap: 20px; }
.regioes-container .cidades-lista li { color: #333; padding-bottom: 8px; font-size: 15px; }
.regioes-container .cidades-lista a { text-decoration: none; color: #003366; }
.regioes-container .cidades-lista a:hover { text-decoration: underline; color: #0099ff; }
@media (min-width: 576px) { .regioes-container .cidades-lista ul { column-count: 2; } }
@media (min-width: 768px) { .regioes-container .cidades-lista ul { column-count: 3; } h1 { font-size: 2.2em; } }


.produtos{width:100%; float:left; background:#FFF; padding:20px 0; text-align:center; }
.produtos .meio{max-width:1024px; width: 100%; padding:5px 10px; margin:0 auto;display: inline-block; text-align: left;}
.produtos .meio .boxprod{ width: 33.33%; padding: 25px 15px; display: inline-block; vertical-align: top; text-align: center; }
.produtos .meio .boxprod .box{ width: 100%;display: inline-block; vertical-align: top; text-align: center; background: #f4f4f4; }
.produtos .meio .boxprod .boximg{ width: 100%; height: 200px; display: block; display: inline-block; border: 1px solid #ccc;}
.produtos .meio .boxprod .boximg img{ max-width: 100%; max-height: 100%; display: inline-block; vertical-align: middle;}
.produtos .meio .boxprod h2{ font-size:16px;color:#000; font-weight:700; padding:5px; margin:5px 0; width:100%; min-height: 50px; }
.produtos .meio .boxprod .btn{display: inline-block;padding: 8px 14px;background: #007bff;color: #fff;text-decoration: none;border-radius: 5px;font-size: 14px;transition: background 0.3s; margin: 5px 0;}

@media screen and (max-width: 1000px){
.produtos .meio{ text-align: center;}
}
@media screen and (max-width: 460px){
.produtos .meio .boxprod{ width:100%; }
}
/* --------------------------- CONTATO ------------------------------*/
.contato{width:100%; float:left; padding:0; text-align: center; background: #f4f4f4;}
.contato .scroll{ display: inline-block; background: #01ABE6; color: #FFF; font-weight: 700; padding: 10px 20px; margin: 5px; border-radius: 5px; border: 0; vertical-align: top; cursor: pointer; }
.contato h2{font-weight: 500; padding: 15px; font-size: 30px; color: #FFF; text-align: center;}
.contato .meio{max-width:100%; width: 1020px; padding:40px 10px; margin:0 auto; display: inline-block; text-align: left; }
.contato .meio .box{width: 33.33%; padding:10px; margin:0 auto; display: inline-block; vertical-align: top;}
.contato .meio .logo{width: 30%;}
.contato .meio .social{width: 30%; text-align: center; }
.contato .meio .cont{width: 40%; text-align: center;}
.contato .meio .titulo{font-size:24px; font-weight: 300; padding:5px; margin:0; display: block; }
.contato .meio .titulo img{display: inline-block; vertical-align: bottom; }
.contato .meio h2{font-size:30px; font-weight: 300; padding:0; margin:0; text-align: center; }
.contato .meio p{width:98%; padding:5px; color: #333333;}
.contato .meio a{ padding: 5px; color: #333333; display: inline-block; font-weight: 400;  }
.contato .meio span{ color: #01ABE6; font-size: 24px; display: inline-block; vertical-align: middle;}
.contato .meio input,
.contato .meio textarea{width:98%; border: 1px solid #666; float:left; padding:10px; border-radius: 5px; margin:3px 1%; color:#333;}
.contato .meio img{display: inline-block; max-width: 100%;}
.contato .meio button{display: inline-block; background: #01ABE6; color: #FFF; font-weight: 700; padding: 10px 20px; margin: 5px; border-radius: 5px; border: 0; vertical-align: top; cursor: pointer;}
.contato .meio .google{ display: inline-block; max-width: 70%; padding: 5px;}
.contato .meio button:hover{background:#000;}
.contato .meio .zap{ padding: 5px; border: 1px solid #333; border-radius: 5px; }
.contato .meio .zap span{ font-size: 16px; }

@media screen and (max-width: 1000px){
    .contato .meio .box{max-width:100%; width: 100%; text-align: center; border: 0;}
    .contato .meio .midia{text-align: left; padding: 0 25px;}
    .contato .meio .google{ display: inline-block; max-width: 100%; padding: 5px;}
}
/* --------------------------- RODAPE ------------------------------*/
rodape2{width:100%; float:left; padding:0; text-align: center; }
rodape2 meio{max-width:100%; width: 1020px; padding:10px; margin:0 auto; display: inline-block; text-align: left; }
rodape2 meio box1,
rodape2 meio box2{width: 50%; display: inline-block; padding: 10px; vertical-align: middle;}
rodape2 meio box1{text-align: left;}
rodape2 meio box2{text-align: right;}
rodape2 meio box1 a{ color: #000;}
rodape2 meio box1 a:hover{ text-decoration: underline; }
@media screen and (max-width: 500px){
rodape2 meio box1,
rodape2 meio box2{width: 100%; text-align: center;}
}