/* ═══ JB ENGENHARIA: base compartilhada ═══
   Extraído do protótipo de Home (v2), arquitetura de referência lucio.com.br.
   Claro, tipografia leve, paleta de três cores, foto no comando.
   Usado por todas as páginas do site, home mantém seus componentes
   próprios (hero-carrossel, trinca, tabs) no próprio arquivo. */
/* ═══ Helvetica Now Display: fonte licenciada (Monotype) ═══
   Os .woff2 NÃO acompanham o repositório (licença paga, não redistribuível).
   Coloque os arquivos em site/fonts/, ver fonts/LEIA-ME.txt.
   Enquanto não estiverem lá, o @font-face falha em silêncio e os títulos
   caem pra Manrope no mesmo peso 300. Nada quebra. */
@font-face{
  font-family:'Helvetica Now Display';
  src:url('../fonts/HelveticaNowDisplay-Light.woff2') format('woff2');
  font-weight:300;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Helvetica Now Display';
  src:url('../fonts/HelveticaNowDisplay-Medium.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Helvetica Now Display';
  src:url('../fonts/HelveticaNowDisplay-Bold.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap;
}
:root{
  --branco:#F2F2F2;
  --suave:#F1F3F2;
  --linha:#DDE2E0;
  --foto:#E4E8E6;
  --cinza:#5E6864;
  --verde:#0F1B18;
  --verde-fundo:#0C1513;
  --ouro:#C9A227;
  --acao-fundo:#E4E8E6;   /* cinza sutil no corpo dos botões de fundo claro */

  --ff:'Manrope',system-ui,sans-serif;
  --ff-titulo:'Helvetica Now Display','Manrope',system-ui,sans-serif;
  --larg:1280px;
  --gut:clamp(22px,5vw,64px);
  --h-topo:68px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--ff);font-weight:400;
  font-size:16px;line-height:1.72;
  color:var(--cinza);background:var(--branco);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.faixa{max-width:var(--larg);margin-inline:auto;padding-inline:var(--gut)}
:focus-visible{outline:2px solid var(--ouro);outline-offset:4px}

.rot{
  font-size:.64rem;font-weight:500;letter-spacing:.5em;
  text-transform:uppercase;color:#9AA5A1;
}
h1,h2{font-family:var(--ff-titulo);font-weight:300;color:var(--verde);line-height:1.14;letter-spacing:-.035em}
h3{font-family:var(--ff-titulo);font-weight:300;color:var(--verde);line-height:1.2;letter-spacing:-.005em}

/* botão quadrado com seta, elemento de ação recorrente.
   Medida única do site: 250×56, quadrado de 56 (a proporção do botão da hero).
   No hover o quadrado atravessa pra direita e o texto troca de lado.
   Trajeto = largura − 2 de borda − 56; o texto desloca 28px, metade do
   quadrado, pra ficar óptico no meio do vão. Tudo por transform (compositor).
   Texto acima de ~150px usa .larga (290px), senão fica sem respiro nas laterais. */
.acao{
  position:relative;overflow:hidden;flex:none;
  --larg-btn:250px;
  display:inline-flex;width:var(--larg-btn);height:56px;
  font-size:.9rem;font-family:var(--ff);color:var(--verde);cursor:pointer;
  background:var(--acao-fundo);border:1px solid transparent;
  transition:border-color .3s ease;
}
.acao b{
  position:absolute;inset:0;z-index:1;
  display:grid;place-items:center;
  font-weight:400;white-space:nowrap;
  transform:translateX(28px);
  transition:transform .46s cubic-bezier(.65,0,.35,1);
}
.acao i{
  position:absolute;left:0;top:0;bottom:0;z-index:2;
  width:56px;
  background:var(--ouro);color:var(--verde);
  display:grid;place-items:center;font-style:normal;font-size:1.05rem;
  transform:translateX(0);
  transition:transform .46s cubic-bezier(.65,0,.35,1),background .25s ease;
}
.acao:hover b,.card-serv:hover .acao b{transform:translateX(-28px)}
.acao:hover i,.card-serv:hover .acao i{transform:translateX(calc(var(--larg-btn) - 58px));background:#B48F1E}
.acao.larga{--larg-btn:290px}
/* versão escura, pra fundo verde ou foto */
.acao.clara{
  color:#fff;
  background-image:linear-gradient(118deg,#1A2E28 0%,#0F1B18 52%,#090F0D 100%);
  border-color:rgba(255,255,255,.16);
}
.acao.clara:hover{border-color:rgba(255,255,255,.32)}

/* marcação de pendência, só em protótipo, sai quando o material real chegar */

/* ═══ CABEÇALHO ═══ */
.topo{
  position:sticky;top:0;z-index:50;
  background:var(--verde);
  border-bottom:1px solid rgba(255,255,255,.13);
}
section[id],.bloco-v{scroll-margin-top:calc(var(--h-topo) + 16px)}
.topo-int{display:flex;align-items:center;justify-content:space-between;gap:30px;height:var(--h-topo)}
.marca{display:flex;align-items:baseline;gap:9px;color:#fff}
.marca b{font-size:1.5rem;font-weight:500;letter-spacing:.02em;color:var(--ouro)}
.marca span{font-size:.62rem;letter-spacing:.34em;text-transform:uppercase;font-weight:400}
.marca-img{
  display:none;height:56px;width:76px;
  object-fit:cover;object-position:center 38%;
  mix-blend-mode:screen;
}
.rodape .marca-img{height:74px;width:100px}
.marca.com-logo .marca-img{display:block}
.marca.com-logo .marca-txt{display:none}
.nav{display:flex;gap:34px;list-style:none;font-size:.92rem;color:#fff}
.nav a{opacity:.9;transition:opacity .2s}
.nav a:hover,.nav a[aria-current="page"]{opacity:1}
.bt-menu{display:none;background:none;border:1px solid rgba(255,255,255,.5);color:#fff;padding:9px 13px;cursor:pointer}

.zap-fixo{
  position:fixed;right:26px;bottom:26px;z-index:60;
  width:60px;height:60px;border-radius:50%;
  /* verde oficial do WhatsApp, botão de WhatsApp mesmo, não peça da identidade */
  background:#25D366;
  display:grid;place-items:center;box-shadow:0 6px 22px rgba(0,0,0,.22);
  transition:transform .2s,background .2s;
}
.zap-fixo:hover{transform:scale(1.06);background:#1DA851}
.zap-fixo svg{width:34px;height:34px;fill:#fff}

/* ═══ HERO DE PÁGINA INTERNA (foto + título curto) ═══ */
.hero-int{position:relative;height:min(56vh,520px);min-height:360px;background:var(--foto);overflow:hidden}
.hero-int-img{position:absolute;inset:0;background:var(--foto) center 55%/cover no-repeat}
.hero-int::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(8,32,31,.80) 0%,rgba(8,32,31,.48) 48%,rgba(8,32,31,.08) 80%);
}
.hero-int-txt{position:absolute;bottom:56px;left:0;right:0;z-index:3}
.hero-int-txt .rot{color:rgba(255,255,255,.82)}
.hero-int h1{color:#fff;font-size:clamp(2.2rem,4.8vw,3.6rem);margin:16px 0 0;max-width:20ch}
.fio-migalha{display:flex;gap:8px;align-items:center;font-size:.78rem;color:rgba(255,255,255,.62);margin-bottom:10px}
.fio-migalha a{opacity:.85}
.fio-migalha a:hover{opacity:1}

/* ═══ BLOCO EDITORIAL: imagem + texto alternado ═══ */
.editorial{padding:96px 0}
.ed-int{display:grid;grid-template-columns:1.05fr .95fr;gap:80px;align-items:center}
.ed-foto{aspect-ratio:4/3;background:var(--foto);overflow:hidden}
.ed-foto img{width:100%;height:100%;object-fit:cover}
.ed-foto span{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:#9AA5A1;text-align:center;padding:0 24px}
.ed-txt h2{font-size:clamp(1.8rem,3.5vw,2.8rem);margin:18px 0 24px;max-width:24ch}
.ed-txt p{margin-bottom:20px;max-width:52ch}
.ed-txt .acao{margin-top:14px}
.invertido .ed-foto{order:2}
.suave{background:var(--suave)}

/* ═══ LISTA ENUMERADA (o que está incluso) ═══ */
.lista-inclusa{list-style:none;margin-top:24px;border-top:1px solid var(--linha);max-width:56ch}
.lista-inclusa li{padding:14px 0;border-bottom:1px solid var(--linha);font-size:.94rem;display:flex;gap:14px;color:var(--cinza)}
.lista-inclusa li::before{content:"";flex:0 0 5px;height:5px;background:var(--ouro);margin-top:11px}

/* ═══ DÚVIDAS (TOFU incorporado: não é FAQ genérico) ═══ */
.duvidas{padding:96px 0}
.duvidas h2{font-size:clamp(2rem,4.1vw,3.25rem);margin-bottom:46px;max-width:22ch}
.duvida{padding:26px 0;border-top:1px solid var(--linha)}
.duvida:last-child{border-bottom:1px solid var(--linha)}
.duvida p.pergunta{font-size:1.05rem;font-weight:500;color:var(--verde);margin-bottom:10px}
.duvida p.resposta{max-width:60ch}

/* ═══ CTA final ═══ */
.cta-final{background:var(--verde);padding:88px 0;text-align:left}
.cta-final .faixa{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:32px}
.cta-final h2{color:#fff;font-size:clamp(1.8rem,3.5vw,2.8rem);max-width:26ch}
.cta-final .rot{color:rgba(255,255,255,.6)}

/* ═══ SERVIÇOS RELACIONADOS (linkagem interna) ═══ */
.relacionados{padding:96px 0}
.relacionados h2{font-size:clamp(1.7rem,3vw,2.3rem);margin-bottom:40px}
.rel-grade{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linha);border:1px solid var(--linha)}
.rel-card{background:#fff;padding:32px 28px;transition:background .2s}
.rel-card:hover{background:var(--suave)}
.rel-card .rot{margin-bottom:14px}
.rel-card h3{font-size:1.15rem;margin-bottom:12px}
.rel-card p{font-size:.88rem;max-width:34ch}

/* ═══ RODAPÉ ═══ */
.rodape{background:var(--verde);color:rgba(255,255,255,.66);padding:96px 0 34px;font-size:.9rem}
.rod-grade{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:52px}
.rodape h4{font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ouro);margin-bottom:22px;font-weight:500}
.rodape ul{list-style:none}
.rodape li{margin-bottom:11px}
.rodape a:hover{color:#fff}
.rodape .marca{margin-bottom:20px}
.rod-tec{margin-top:22px;font-size:.76rem;line-height:2;color:rgba(255,255,255,.45)}
.rod-fim{
  margin-top:66px;padding-top:24px;border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;
  font-size:.74rem;color:rgba(255,255,255,.4);
}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* ═══ RESPONSIVO ═══ */
@media (max-width:1040px){
  .ed-int{grid-template-columns:1fr;gap:52px}
  .invertido .ed-foto{order:0}
  .rel-grade{grid-template-columns:1fr}
  .rod-grade{grid-template-columns:1fr 1fr}
  .nav{display:none}
  .bt-menu{display:block}
  .nav.aberto{
    display:flex;position:fixed;inset:var(--h-topo) 0 auto;flex-direction:column;gap:22px;
    background:var(--verde);padding:30px var(--gut);z-index:55;
  }
}
@media (max-width:680px){
  .editorial,.duvidas,.relacionados{padding:64px 0}
  .cta-final{padding:64px 0}
  .rod-grade{grid-template-columns:1fr}
  .hero-int-txt{bottom:40px}
}