/* 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;}

.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;}

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

/* 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;
}

/* MENU PRINCIPAL */
.menu{
    width:auto;
    height:60px;
    position:relative;
    float:right;
    margin:10px 0;
}
.menu > ul,
.menu > ul > li{
    display:inline-block;
}
.menu > ul > li{
    position:relative; /* importante pro submenu */
}
.menu > ul > li{
    margin: 0 10px;;
}
.menu ul li a,
.menu ul li p{
    display:block;
    font-size:16px;
    line-height:60px;
    color:#535353;
    font-weight:400;
    white-space:nowrap;
	padding:0 20px;
}
.menu ul li a:hover,
.menu ul li p:hover{
    color:#337FC1;
}
/* cor diferente no item ativo (quando passa o mouse e abre submenu) */
.menu ul li:hover > p {
    background: #337FC1;   /* cor de fundo do item ativo */
    color: #f3f3f3;        /* cor do texto */
}
/* SUBMENU (cascata) */
.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;
}
.menu ul li ul li{
    display:block;
    padding:0;
	border-bottom: 1px solid #fff;
}
.menu ul li ul li a{
    line-height:40px;  /* menor que o menu principal */
    padding:0 15px;
	color: #fff;
}
.menu ul li ul li a:hover{
    background:#f3f3f3;
    color:#337FC1;
}

/* MOSTRAR AO PASSAR O MOUSE */
.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:nth-of-type(even) .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);
}

/* 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; }

.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;}
  .mobile{display:block;}

  .home.container{ flex-direction:column; }
  .conteudo:nth-of-type(odd) .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; font-size:20px; }
  .home.container p{ margin:20px 0; font-size:16px; }

  .saibamais{ margin:0; }
}

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