/************************************************
****     Escrito por O Pequeno Escritor.     ****
****               19/10/2016                ****
************************************************/

@charset "UTF-8";

/*** keyframes ***/
@keyframes pulse-whatsapp {
    from { box-shadow: 0 0 0 0px rgba(40,135,106,1); }
    to { box-shadow: 0 0 0 12px rgba(40,135,106,0); }
}

@-webkit-keyframes pulse-whatsapp {
    from { box-shadow: 0 0 0 0px rgba(40,135,106,1); }
    to { box-shadow: 0 0 0 12px rgba(40,135,106,0); }
}
@keyframes pulse-telefone {
    from { box-shadow: 0 0 0 0px rgba(255,0,0,1); }
    to { box-shadow: 0 0 0 12px rgba(40,135,106,0); }
}

@-webkit-keyframes pulse-telefone {
    from { box-shadow: 0 0 0 0px rgba(255,0,0,1); }
    to { box-shadow: 0 0 0 12px rgba(40,135,106,0); }
}
/*** keyframes ***/

/* animações */
@keyframes menudown {
    from { margin-top: -25px; opacity: 0; }
    to { margin-top: 0px; }
}
/* animações */

* { margin: 0px; padding: 0px; font-family: Arial; transition: color .5s, background .5s, opacity .5s, box-shadow .5s, text-align .5s; }

.primary_color { color: #0084B4; }
.secundary_color {  color: #7C7B7B; }

.bg_primary { background: #0084B4; }
.bg_secundary { background: #F3F3F3; }

.img_aling {  width: 30%; border-radius: 10px; margin: 10px 10px 10px 0px; float: left; }

.center { text-align: center; }
.right { text-align: right; }

h1 { font-size: 35px; font-weight: 600; margin: 10px 0px; color: #0084B4; text-decoration: underline; text-align: center; }
h2 { font-size: 30px; font-weight: 500; margin: 10px 0px; color: #3E3E3E; text-align: left; }
h3 { font-size: 19px; font-weight: 500; margin: 10px 0px; color: #3E3E3E; text-align: left; }
h4 { font-size: 15px; font-weight: 500; margin: 10px 0px; color: #3E3E3E; text-align: left; }

a { color: #666666; text-decoration: none; }
a:hover { color: #0084B4; text-decoration: none; }

p { color: #6E6E6E; margin: 10px; font-size: 15.5px; text-align: justify; }

body { background: #fff; }

section { width: 90%; margin: 50px auto; display: table; }

#up { position: fixed; width: 45px; height: 45px; right: 85px; bottom: 15px; box-shadow: 3px 3px 3px #333; } .up img { width: 100%; }
#up img:hover { opacity: .7; cursor: pointer; }

.separador { width: 100%; display: table; }

/* header */
#topo {width:100%; height:70px; float:left; display:table; top:0px; background-color:#ffffff;}
#logo { width:30%; max-width:300px; height:70px; margin:5px; color: #FFFFFF; display: table; float:left;}
#fone { width:35%; max-width:350px; margin: 30px; color: #000000; display: table; float: right;}
#clientes {width:170px; height:100px; float:left; display:table; margin:5px;}
/* Whatsapp */
.whatsapp { position: fixed; width: 50px; height: 50px; right: 15px; bottom: 15px; border-radius: 100px; background: #33CC33; animation: pulse-whatsapp 1.5s; animation-iteration-count: infinite; z-index: 300; }
.whatsapp img { width: 50%; height: 50%; margin: 25%; }
.whatsapp:hover { background: #5AFF5A; }

.bt_whatsapp { display: inline-block; font-size: 32px; margin: 25px; padding: 10px 25px; border-radius: 30px; background: #33CC33; color: #FFFFFF; font-weight: 600; }
.bt_whatsapp:hover { z-index: 300; background: #5AFF5A; color: #FFFFFF; }
.bt_whatsapp img { width: 25px; margin: 0 5px; }
/* Whatsapp */

/* Telefone */
.telefone { position: fixed; width: 50px; height: 50px; left: 20px; bottom: 20px; border-radius: 100px; background: #ff0000; animation: pulse-telefone 1.5s; animation-iteration-count: infinite; z-index: 300; }
.telefone img { width: 50%; height: 50%; margin: 25%; }
.telefone:hover { background: #ff7474; }

.bt_telefone { display: inline-block; font-size: 32px; margin: 25px; padding: 10px 25px; border-radius: 30px; background: #ff0000; color: #FFFFFF; font-weight: 600; }
.bt_telefone:hover { z-index: 300; background: #ff7474; color: #FFFFFF; }
.bt_telefone img { width: 25px; margin: 0 5px; }
/* Telefone */

/*** Header ***/
header { position: relative; width: 100%; height: auto; display: table; z-index: 100; background: #FFF; }

header .top_info { position: relative; width: 100%; background: #50AE32; display: inline-block; }
header .top_info p { text-align: center; font-size: 18px; margin: 0; padding: 0; }
header .top_info p a { color: #FFFFFF; padding: 0 10px; display: inline-block; }
header .top_info p a img { width: 25px; padding: 5px 5px; display: inline-block; float: left; }
header .top_info p a b { padding: 8.5px 5px; display: inline-block; float: right; }

header .header { width: 90%; padding: 0 5%; }

header .header .logo { width: 25%; float: left; display: inline-block; }
header .header .logo img { width: 100%; margin: 3px 0; }

/* --- Menu PC --- */
.header-menu { font-family: Arial, sans-serif; position: relative; padding: 30px 10px 10px 350px; }
.menu-list { list-style: none; margin: 0; padding: 0; display: flex; }
.menu-list li { position: relative; }
.menu-list a { width: auto; display: block; color: #50AE32;	background-color: #fff;	margin: 1px; padding: 10px 20px; text-decoration: inherit; font-size: 14px; font-weight: 600; transition: background 0.3s; }

/* --- Comportamento para Computador (Desktop) --- */
@media (min-width: 769px) {
.menu-toggle { display: none; /* Esconde o botão no PC */ }
.arrow a { font-size: 15px; }
.menu-list a:hover { background-color: #50AE32; color: #fff; }

.submenu { display: none; position: absolute; top: 100%; left: 0; background-color: #EEE; list-style: none; min-width: 230px; box-shadow: 0px 4px 8px rgba(0,0,0,0.3); padding: 0; margin: 0; z-index: 10; }

/* Hover abre o submenu apenas no PC */
.dropdown:hover .submenu { display: block; }
}
/* --- Menu PC --- */

header .slider { width: 90%; margin: 50px 0%; text-align: center; display: inline-block; }
header .slider h1 { font-size: 38px; color: #F07F1B; }
header .slider p { font-size: 25px; color: #F07F1B; } 
/*** Header ***/

.slider { position: relative; width: 100%; max-width: 1360px; margin: 0px auto; background: #FFFFFF; }
.slider img { width: 100%; }

/*** banner ***/
.banner { background: #50AE32; padding: 50px 0px; text-align: center; margin: 0; }
.banner h1 { text-align: center; color: #ffffff; }
/*** banner ***/

.whats { width: 30.333%; margin: 1.5%; float: left; display: none; }
.bt_whatsapp { display: table; margin: 20px auto; padding: 10px; border-radius: 60px; position: relative; }

.whats2 { width: 18%; margin: 0.1%; float: left; display: table; }
.bt_whatsapp2 { display: table; margin: 20px auto; padding: 20px; border-radius: 10px; position: relative; }

/* center */
center { width: 100%; max-width: 1360px; margin: 0px; padding: 0px; background: #FFFFFF; display: table; }
center .destaque { width: 23%; height: 490px; margin: 10px; float: left; border: 1px solid #ACA8A8; border-radius: 6px; }
center .destaque img { width: 80%; margin: 10%; border-radius: 9%; }
center .destaque img:hover { opacity: .7; box-shadow: 3px 3px 3px #000; }
center .destaque h2 { font-size: 21px; text-align: center; color: #F07F1B; }

center .destaque-n { width: 25%; margin: 27px 0px; float: left; text-align: center; }
center .destaque-n a { width: 90%; height: 390px; margin: 5px auto; display: table; color: #000000; background: #FFFFFF; border-radius: 5px; padding: 5px; border: 1px solid #06B3F1; }
center .destaque-n a:hover { color: #06B3F1; background: #F7F6F3; }
center .destaque-n a img { width: 50%; border-radius: 5px; } 
center .destaque-n a h3 { width: 100%; margin: 25px 0px; font-size: 21px; text-align: center; }

center .destaque-at { width: 23%; height: 390px; margin: 10px; float: left; border: 1px solid #ACA8A8; border-radius: 6px; }
center .destaque-at img { width: 80%; margin: 10%; border-radius: 9%; }
center .destaque-at img:hover { opacity: .7; box-shadow: 3px 3px 3px #000; }
center .destaque-at h2 { font-size: 21px; text-align: center; color: #F07F1B; }

center .destaque-x { width: 100%; margin: 27px 0px; float: left; text-align: center; }
center .destaque-x a img { width: 25%; border-radius: 5px; float: left; } 
center .destaque-x h2 { width: 100%; margin: 25px 0px; font-size: 26px; text-align: center; }
center .destaque-x p { width: 65%; margin: 27px 5px; font-size: 21px; float: left; text-align: left; }

center .galeria img { width: 9%; margin: .5%; display: table; border-radius: 5px; float: left; }
/* center */

.destaque_info { width: 100%; margin: 0px; padding: 25px 0px; font-size: 23px; background: #006A93; color: #ffffff; border-top: solid 2.5px #0084B4; }

/*** cidades de São Paulo ***/
body { font-family: system-ui, -apple-system, sans-serif; background-color: #f8f9fa; margin: 0; padding: 0px; }

.compact-container { max-width: 100%; margin: 0 auto; background: #fff; padding: 12px; border-radius: 6px; box-shadow: 0 1px 4px rgba(0,0,0,0.05); }

/* Menu de abas coladas com rolagem horizontal se necessário */
.tabs-menu { display: flex; gap: 2px; border-bottom: 1px solid #dee2e6; padding-bottom: 5px; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Esconde a barra de rolagem em alguns navegadores para ficar mais limpo */
.tabs-menu::-webkit-scrollbar { height: 4px; }
.tabs-menu::-webkit-scrollbar-thumb { background: #dee2e6; border-radius: 4px; }

.tab-button { padding: 6px 12px; border: 1px solid #dee2e6; background: #f1f3f5; font-size: 13px; font-weight: 500; color: #495057; cursor: pointer; border-radius: 4px 4px 0 0; white-space: nowrap; }

.tab-button:hover { background-color: #e9ecef; }

.tab-button.active { background-color: #fff; color: #007bff; border-bottom-color: #fff; font-weight: 600; }

/* Conteúdo em formato de texto corrido */
.tab-content { display: none; padding-top: 10px; font-size: 13px; line-height: 1.5; color: #333; }

.tab-content.active { display: block; }

/* Pequeno ajuste para organizar múltiplos municípios na mesma aba */
.cidade-linha { margin-bottom: 6px; }
/*** cidades de São Paulo ***/

/*** Center ***/
.atendimento { width:23%; height:auto; display:table; float:left; font-size:23px; text-align: left; }
.atendimento li{ font-size: 14px; }
.atendimento h3{ font-size:19px; color:#A4A3A3; }
/*** Direitos Autorais ***/
.base { width: 100%; margin: 0px auto; padding: 30px 0px; text-align: center; background: #0084B4; color: #fff; }
.base a { color: #fff; }
.base a:hover { color: #000;}
.direitos-autorais { width: 100%; max-width: 1366px; margin: 0 auto; background: #FF0; display: table; }
.direitos-autorais p { height:7px; color: #000; text-align: center; padding: 0px 0px; }
/*** Direitos Autorais ***/

/* footer */
footer { width: 100%; margin: 0px; padding: 0px; background:#07182B center; background-size: 100%; color: #FFFFFF; display: table; }
footer section { width: 90%; display: table; margin: 50px auto; }
footer section p { color: #FFFFFF; }
footer section a { color: #FFFFFF; }
footer section a:hover { color: #0084B4; background: #FFFFFF; }
footer .bg-secundary { background: #07182B; }
footer .menu { width: 100%; margin: auto; }
footer .menu nav ul { list-style: none; display: block; }
footer .menu nav ul li { float: left; display: table; }
footer .menu nav ul li a { color: #FFFFFF; padding: 20px 10px; font-size: 13px; display: block; }
footer .menu nav ul li a:hover { color: #0084B4; background: #FFFFFF; }
footer .left, footer .right { width: 50%; float: left; }
footer .right p { text-align: right; }
/* footer */

/* social */
.social { position: fixed; width: 50px; height: 150px; top: 200px; left: -5px; z-index: 100; }
.social .icon { width: 45px; margin: 2.5px; background: #0084B4; float: left; box-shadow:#000 3px 3px 3px; border-radius:5px; }
.social .icon:hover { background: #93E1FF; }
/* social */

/* responsive */
@media only screen and (max-width: 1000px){
    h1 { font-size: 35px; }
    h2 { font-size: 20px; }
    h3 { font-size: 14px; }
	
	.whats2 { display: none; }
	.bt_whatsapp2 { display: none; }
	
    /*** header ***/
    header .header .logo { width: 100%; }
    header .header .logo img { width: 100%; margin: 20px 0; }

    header .header .menu { width: 100%; } 
    header .header .menu #menu { display: none; }

    header .header .menu #menu { margin: 0px auto; }
    header .header .menu #menu { position: fixed; width: 30%; height: 100%; padding: 0 10%; top: 0; left: 0; background: rgba(0,0,0,.7); display: none; }
    header .header .menu #menu ul { width: auto; float: left; margin: 0px auto; }
    header .header .menu #menu ul li { float: none; }
    header .header .menu #menu ul li a { padding: 30px; margin: 0px; display: block; color: #FFFFFF; }
    header .header .menu #menu ul li a:hover { background: #F07F1B; color: #FFFFFF; }
    header .header .menu #menu ul li:hover ul { animation: none; }

    header .header .menu .menu-mobile { display: block; }
    /*** header ***/
    
    .slider { position: relative; }
    
    center { width: 100%; margin: 0px auto; }
    
    .social { display: none; }
}

@media only screen and (max-width: 700px){
    .img_aling { width: 99%; }
				 header .header .logo { width: 40%; }
    header .header .logo img { width: 100%; margin: 20px 0; }
				
/* --- Comportamento para Celular (Mobile) --- */
  .header-menu {
		padding: 10px 10px 10px 0px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 50px;
  }
.compact-container { max-width: 400px; }
  /* Botão Hambúrguer */
  .menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 20;
  }

  .menu-toggle .bar {
    height: 3px;
    width: 100%;
    background-color: #50AE32;
    transition: 0.3s;
  }
  .arrow a { font-size: 15px; }
  /* Menu escondido por padrão no mobile */
					
  .menu-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #50AE32;
    z-index: 15;
  }

  /* Classe ativada pelo JS para mostrar o menu principal */
  .menu-nav.active {
    display: block;
  }

  .menu-list {
    flex-direction: column;
  }

  .menu-list a { padding: 10px; font-size: 16px; border-bottom: 1px solid #262626;	margin: 1px 3px; }

  /* Submenu no mobile fica embutido na lista */
  .submenu {
    display: none;
    background-color: #262626;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  /* Classe ativada pelo JS para mostrar o submenu no mobile */
  .submenu.active {
    display: block;
  }

  .submenu li a {
    padding-left: 30px; /* Recuo para parecer subitem */
    font-size: 15px;
  }
/* --- Comportamento para Celular (Mobile) --- */

center .destaque { width: 100%; float: left; }
center .destaque-n { width: 100%; margin: 27px 0px; float: left; text-align:center; }
center .destaque-at { width: 100%; margin: 27px 0px; float: left; text-align:center; }
center .destaque-x a img { width: 100%; border-radius: 5px; float: left; }
center .destaque-x p { width: 100%; }
center .galeria img { width: 99%; margin: .5%; display: table; float: left; }

.atendimento { width:95%; }

    footer p { text-align: center; }
    footer section { margin: 10px auto; }
    footer .left, footer .right { width: 100%; float: none; }
    footer .right p { text-align: center; }
    footer .menu { width: auto; margin: auto; display: table; }
    footer .menu ul { width: auto; float: none; display: block; }
}
/* responsive */