/* RESET & BASE */
* { margin:0; padding:0; font-family: "Bai Jamjuree", sans-serif; }
*, *::before, *::after { box-sizing: border-box; }

a { text-decoration:none; color:#535353; }
img { border:0; display:block; max-width:100%; height:auto; }

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:0;}
.float-left{float:left !important;}
.float-right{float:right !important;}
.img{width:100%; height:auto; display:block;}

.desktop{display: block !important;}
.mobile{display: none !important;}

.radius{border-radius:10px;}
.transition{transition:all .3s;}

.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:12px; padding:10px; position:fixed; right:20px; bottom:20px; background:#01b763; color:#fff; line-height:1.6; font-weight:500; z-index:9999999999; text-decoration:none;}

/* Removido min-width que quebrava o mobile */
html, body { width:100%; height:auto; font-size:14px; font-weight:400; overflow-x:hidden; position: relative; float: left;}
body { background:url(../imagens/bg.png) 0 130px no-repeat fixed; background-size:auto 720px; }

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

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

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

.centralizar{width:100%; padding:0 5%; position:relative; box-sizing: border-box;}

/* TOPO */
.topo{
    width:100%;
    position:fixed;
    top:0;
    left:0;
    z-index:9;
    background:#fff;
}
.logo{
    width:auto;
    height:80px;
    position:relative;
    float:left;
    padding-right:20px;
}
.logo img{
    width:auto;
    height:60px;
    margin:10px 0;
}

    .tradutor-box{
		    position:relative;
    float:right;
      display:flex;
      align-items:center;
      overflow:hidden;
		margin: 16px;
    }

    .tradutor-box button{
      border:0;
      background:transparent;
      padding:0;
      margin:0;
      cursor:pointer;
      width:54px;
      height:48px;
      display:flex;
      align-items:center;
      justify-content:center;
      transition:background 0.2s ease;
    }

    .tradutor-box button:hover{
      background:rgba(255,255,255,0.08);
    }

    .tradutor-box img{
      width:32px;
      height:32px;
      object-fit:cover;
      border-radius:50%;
      display:block;
    }

    #google_translate_element{
      display:none;
    }
    .skiptranslate iframe{
      display:none !important;
    }
    .goog-te-banner-frame.skiptranslate{
      display:none !important;
    }

/* MENU PRINCIPAL */
.bt_menu, .bt_cmenu{display:none; border:0;}
.bt_menu{width: 100px; height: 50px; position: relative; float: right; background: #fff; border: 1px solid #337FC1; box-sizing: border-box; line-height: 50px; text-align: center; margin: 25px 10px; cursor: pointer; color: #337FC1;}
.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:#337FC1;}

.bg_menu{width: auto; position:relative; float: right; margin:10px 0; z-index: 9;}
.bg_menu *{box-sizing: border-box;}
.bg_menu > ul,
.bg_menu > ul > li{
    display:inline-block;
}
.bg_menu > ul > li{
    position:relative; /* importante pro submenu */
}
/* ===== Links do menu ===== */
.bg_menu ul li a,
.bg_menu ul li p{
    display:block;
    font-size:16px;
    line-height:60px;
    color:#535353;
    font-weight:400;
    white-space:nowrap;
	padding:0 20px;
}

.bg_menu p{ cursor:pointer; }

.bg_menu .ativo{ color:#337FC1; }
.bg_menu ul li a:hover,
.bg_menu ul li p:hover{
    color:#337FC1;
}
/* cor diferente no item ativo (quando passa o mouse e abre submenu) */
.bg_menu ul li:hover > p {
    background: #337FC1;   /* cor de fundo do item ativo */
    color: #f3f3f3;        /* cor do texto */
}
/* SUBMENU (cascata) */
.bg_menu ul li ul{
    position:absolute;
    top:100%;          /* logo abaixo do item pai */
    left:0;
    min-width:180px;
    background:#337FC1;
    display:none;      /* escondido padrão */
    z-index:99;
	max-height: calc(100vh - 120px); /* ajusta 120px conforme altura do topo */
    overflow-y: auto;
	padding: 10px;
}
.bg_menu ul li ul li{
    display:block;
    padding:0;
	border-bottom: 1px solid #fff;
}
.bg_menu ul li ul li a{
    line-height:40px;  /* menor que o menu principal */
    padding:0 15px;
	color: #fff;
}
.bg_menu ul li ul li a:hover{
    background:#f3f3f3;
    color:#337FC1;
}

/* MOSTRAR AO PASSAR O MOUSE */
.bg_menu ul li:hover > ul{
    display:block;
}

/* BANNER */
.banner{
  position:relative; float:left; width:100%; height:100vh; margin:0; background:#000; overflow:hidden;
}
.banner .slide{ position:absolute; inset:0; display:none; }
.banner .slide.active{ display:block; }
.banner .media{ width:100%; height:100%; object-fit:cover; display:block; }

.banner .caption{
  position:absolute; width:30%; left:5%; bottom:50%;
  padding:10px; background:rgba(0,0,0,.45); color:#fff; border-radius:10px;
  font-size:30px; text-transform:uppercase; font-weight:bold;
}

.banner .nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  border:0; background:rgba(0,0,0,.45); color:#fff; width:44px; height:44px;
  border-radius:50%; cursor:pointer; font-size:24px; line-height:44px;
  display: none;
}
.banner .nav:hover{ background:rgba(0,0,0,.6); }
.banner .prev{ left:10px; }
.banner .next{ right:10px; }

.banner .dots{
  position:absolute; left:50%; bottom:10px; transform:translateX(-50%);
  display:flex; gap:8px;
}
.banner .dots .dot{
  width:10px; height:10px; border-radius:999px; border:0;
  background:rgba(255,255,255,.5); cursor:pointer;
}
.banner .dots .dot.on{ background:#fff; }

@supports not (aspect-ratio:1/1){
  .banner{ height:56.25vw; max-height:70vh; }
}

/* CONTEÚDO */
.upper{text-transform:uppercase;}
.color1{color:#000;}
.color2{color:#337FC1;}
.color3{color:#242424;}
.color4{color:#fff;}

.conteudo{
  width:100%; position:relative; float:left; padding:5%; background:#fff;
}
.conteudo:nth-of-type(even){ background:#f1f1f1; } /* alternância de faixas */

.divisor{ width:100%; position:relative; float:left; }
.divisor .titulo{
  position:absolute; padding:10px; background:rgba(0,0,0,.1);
  top:20px; left:20px; z-index:1; border-radius:10px;
}

.divisor .titulo2{
  position:absolute; padding:10px;
  top:35%; right:20px; z-index:1;
}

.home.container{
  display:flex; flex-wrap:nowrap; align-items:center; justify-content:space-between; gap:20px;
}

.titulo_pagina{
align-items: stretch; /* força os filhos a terem mesma altura */
}
.titulo_pagina .item{
height: auto;
margin: 0;
padding: 50px 0;
vertical-align: middle;
flex: 1;
justify-content: center;
}
.titulo_pagina .item:nth-child(1){
background: #337FC1;
}
.titulo_pagina .item:nth-child(2){
	padding: 0;
}

/* Cada item */
.home.container .item{
  flex:1; display:flex; flex-direction:column; position:relative;
}
/* Adiciona a imagem acima do texto */
.logo_titulo::before {
  content: url('../imagens/logo_fermec2.png');
  display: block;
  width: 132px;
  height: 50px;
  margin: 0;
}
/* Imagem padrão dentro do item */
.home.container .item img.img{ width:100%; height:auto; display:block; }

/* >>>>>>> BLOCO DE MÍDIA COM ZOOM + PLAY (RENOMEADO PARA EVITAR CONFLITO COM .banner .media) */
.mediaBox{
  position:relative; width:100%; height:350px; overflow:hidden; border-radius:10px;
}
.mediaBox .thumb{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1); animation:zoomIO 6s ease-in-out infinite alternate; will-change:transform;
}
@keyframes zoomIO{
  from{ transform:scale(1); }
  to  { transform:scale(1.25); }
}
.mediaBox .play{
  position:absolute; inset:0; border:0; background:transparent; cursor:pointer;
  display:grid; place-items:center;
}
.mediaBox .play::before{
  content:""; width:78px; height:78px; border-radius:50%;
  background:rgba(0,0,0,.35); box-shadow:0 4px 20px rgba(0,0,0,.35);
  transition:transform .2s ease, background .2s ease;
}
.mediaBox .play::after{
  content:""; position:absolute; border-style:solid; border-width:14px 0 14px 22px;
  border-color:transparent transparent transparent #fff;
  left:50%; top:50%; transform:translate(-35%, -50%);
}
.mediaBox:hover .thumb{ animation-play-state:paused; transform:scale(1.06); }
.mediaBox .play:hover::before{ background:rgba(0,0,0,.5); transform:scale(1.05); }
/* Foco visível para teclado */
.mediaBox .play:focus-visible{ outline:3px solid #fff; outline-offset:3px; border-radius:50%; }

/* Tipografia */
.home.container h2{ font-size:24px; font-weight:400; font-family: "Bai Jamjuree", sans-serif;}
.home.container h3{ margin:0 20px 20px; font-size:28px; font-weight:bold; font-family: "Bai Jamjuree", sans-serif;}
.home.container p{ margin:0 20px 20px; font-size:20px; font-weight:300; }

/* Botão */
.saibamais{
  display:inline-block; margin:0 20px; background:#337FC1; color:#fff;
  border-radius:10px; padding:10px 20px; text-decoration:none; align-self:flex-start;
}
.saibamais:hover{ background:rgba(0,0,0,.2); color:#337FC1; }

/* ---------- ALTERNÂNCIA NO DESKTOP (inverte colunas nos blocos ímpares) ---------- */
.conteudo.reverse .home.container{
  flex-direction: row-reverse;
}


/* ====== Bloco do produto ====== */
.produto .item{
  background:#fff;
  border:1px solid #e6e6e6;
  padding:24px;
  box-shadow:0 2px 12px rgba(0,0,0,.04);
}

/* Título */
.produto .item h3{
  font-size:28px;
  margin:0 0 14px;
}

/* Texto principal */
.produto .item p{
  font-size:16px;
}

/* Imagem “abraçada” pelo texto */
.produto .item p img{
  float:right;                 /* troque para left se preferir */
  width:360px;                 /* ajuste conforme sua arte */
  max-width:45%;
  height:auto;
  margin:0 0 14px 18px;        /* espaço entre imagem e texto */
  border-radius:10px;
  display:block;
}

/* Subtítulos dentro do texto */
.produto .item p b.color2{
  display:inline-block;
  margin:18px 0 6px;
  font-weight:800;
  letter-spacing:.2px;
}

/* ====== Ícones de materiais ====== */
.icones.container{
	width: 100%;
	position: relative;
	margin: 20px 0;
}
.icone{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin:14px 18px 0 0;        /* espaço entre “cards” */
  vertical-align:top;
}

.icone .letra{
  width:42px; height:42px;
  display:grid; place-items:center;
  color:#fff;
  font-size:18px;
  border-radius:8px;
  text-transform:uppercase;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
}

.icone .legenda{
  font-size:13px;
font-weight: 600;
  max-width:170px;
}

/* Paleta das letras */
.letra.azul{background:#337FC1;}
.letra.amarelo{background:#f0c419;}
.letra.vermelho{background:#d9534f;}
.letra.verde{background:#1faf5b;}
.letra.dourado{background:#C89C43;}
.letra.cinza{background:#8c8f94;}

/* ====== Botão “Solicitar orçamento” ====== */
.orcamento{
  display:inline-block;
  margin-top:22px;
  background:#337FC1;
  color:#fff;
  padding:12px 18px;
  border-radius:10px;
  text-transform:uppercase;
  letter-spacing:.4px;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.orcamento:hover{
  background:#165b98;
  box-shadow:0 6px 18px rgba(0,0,0,.12);
  transform:translateY(-1px);
}

.regiao{ margin: 20px 0;}
.regiao .bt{width: auto; height: auto; padding:10px; margin: 5px; font-size: 12px; display:inline-block; vertical-align:middle; background:#337FC1; color:#fff; border-radius: 10px;}

.pagina_empresa{gap:0px !important;}
.img_empresa{width: 100%; height: auto; max-height: 130px; background: url("../imagens/empresa2.jpg") 0px 0px no-repeat; background-size: cover;}

/*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:5px; 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:30px !important; position:relative; float:left;}
.formulario .codigo{width:100px; margin:0 10px;}
.formulario .bt_enviar,.formulario .refresh {position:relative; float:left; padding:5px; outline:none; cursor:pointer; box-sizing:border-box;}
.formulario .bt_enviar{width:100%;}

.mapa{width: 100%; height: 400px; position: relative; float: left; margin: 10px 0; border: 0;}

/* RODAPÉ */
.rodape{ width:100%; float:left; background:#337FC1; padding:2% 5%; }
.rodape p{ width:100%; margin:10px 0; float:left; }
.rodape a{ font-weight:300; }

.rodape .col{
	width: 50%;
	height: auto;
	position: relative;
	float: left;
}
.rodape .col .mapa{
	width: auto; height: 300px; position: relative; float: right;
}

.rodape .redes img{
	width: 40px; height: 40px; position: relative; float: left; margin: 10px 10px 0 0;
}


.direitos{ width:100%; float:left; background:#fff; padding:0 5%; }
.direitos p{ width:100%; margin:10px 0; float:left; }
.direitos span{ font-weight:300; font-size:16px; }

/* ---------- RESPONSIVO ---------- */
@media (max-width: 1024px){
  .home.container{ gap:16px; }
  .home.container p{ font-size:18px; }
}
@media (max-width: 768px){
  .desktop{display:none !important;}
  .mobile{display:block !important;}
	
.bg_menu{width:100%; height:100%; 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;}
.bg_menu{display: block; width: 100%; height: 100%; overflow: auto;}
.bg_menu ul, .bg_menu ul li ul{display: block !important; width: 100%; position: relative !important; padding: 0;}
.bg_menu ul li, .bg_menu ul li ul li{flex:none; display: block; position: relative; float: left; padding: 0 10px; line-height: 60px; width: 100%;}
.bg_menu a, .bg_menu p{position: relative; float: left; padding: 5px;  width: 100%;}
	
/* BANNER */
.banner{
height:40vh;
}
.banner .caption{
width:90%;
bottom:10%;
font-size:20px;
}

  .home.container{ flex-direction:column; }
  .conteudo:nth-of-type(odd) .home.container, .conteudo:nth-of-type(even) .home.container{ flex-direction:column; } /* imagem primeiro no mobile */

  .home.container .item{ width:100%; }
  .mediaBox{ height:200px; }

  .home.container h2{ font-size:16px; }
  .home.container h3{ margin:0 0 20px 0; font-size:20px; text-align: center;}
  .home.container p{ margin:20px 0; font-size:16px; }

  .saibamais{ margin:0; }
	
.logo_titulo::before {
  margin: 0 auto;
}
}

/* Reduz animações para quem prefere menos movimento */
@media (prefers-reduced-motion: reduce){
  .mediaBox .thumb{ animation:none; transform:none; }
  .transition{ transition:none; }
}