/*
Theme Name: Trento Soluções em Construções
Theme URI: https://trentose.com.br
Author: GTW Agência
Author URI: https://gtwagencia.com.br
Description: Tema institucional da Trento Soluções em Construções — construtora atuante em Mato Grosso do Sul desde 1996. Cinco páginas, atendimento por WhatsApp, galeria de obras por área de serviço.
Version: 1.10.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: trento
Tags: construcao, institucional, portfolio, custom-menu, translation-ready
*/

/* ==========================================================================
   TRENTO SOLUÇÕES EM CONSTRUÇÕES
   Layout de validação · CSS
   Direção: "ficha técnica" — hairlines, índices numéricos, tipografia
   engenheirada. Verde da marca (#1D5026) + neutros de concreto + terra do MS.
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root{
  color-scheme: light;

  /* marca */
  --verde-900:#0C2412;
  --verde-800:#123318;
  --verde:#1D5026;          /* extraído do logotipo oficial */
  --verde-600:#2A6B35;
  --verde-400:#5C9268;
  --verde-100:#DCE7DE;
  --verde-50:#EFF4EF;

  /* acento — terra vermelha do MS */
  --terra:#B4552F;
  --terra-50:#FAEFE9;

  /* neutros */
  --areia:#F7F5F1;
  --areia-2:#EFECE5;
  --linha:#DAD5CB;
  --linha-forte:#C3BCAE;
  --tinta:#191B18;
  --tinta-2:#5A5D55;

  --branco:#fff;

  /* tipografia */
  --ff-disp:"Archivo","Archivo Fallback",-apple-system,"Segoe UI",sans-serif;
  --ff-body:"Instrument Sans","Instrument Sans Fallback",-apple-system,"Segoe UI",sans-serif;

  /* medidas */
  --wrap:1240px;
  --gutter:clamp(20px,5vw,56px);
  --sec-y:clamp(72px,9vw,130px);
  --r:2px;                  /* cantos quase retos: linguagem construtiva */

  --sombra:0 1px 2px rgba(25,27,24,.05), 0 12px 32px -12px rgba(25,27,24,.18);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:86px}
body{
  margin:0;
  background:var(--areia);
  color:var(--tinta);
  font-family:var(--ff-body);
  font-size:clamp(15.5px,.55vw + 14px,17px);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--ff-disp);font-weight:700;line-height:1.08;letter-spacing:-.022em;font-variation-settings:"wdth" 108;text-wrap:balance}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
ul,ol{margin:0;padding:0;list-style:none}
::selection{background:var(--verde);color:#fff}

.skip{
  position:absolute;left:12px;top:-60px;z-index:200;
  background:var(--verde);color:#fff;padding:12px 18px;font-weight:600;
  transition:top .2s var(--ease);
}
.skip:focus{top:12px}

:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--terra);outline-offset:3px;border-radius:var(--r);
}

/* ---------- 3. LAYOUT BASE ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--sec-y);position:relative}
.section--alt{background:var(--areia-2)}
.section--dark{background:var(--verde-800);color:#EAF0EA}
.section--dark h2,.section--dark h3,.section--dark h4{color:#fff}

/* olho / eyebrow — o quadrado remete ao enquadramento do logotipo */
.eyebrow{
  display:flex;align-items:center;gap:11px;
  margin:0 0 22px;
  font-family:var(--ff-disp);font-size:.72rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--tinta-2);
}
.eyebrow::before{
  content:"";flex:none;width:9px;height:10px;background:var(--verde);
}
.eyebrow--light{color:rgba(255,255,255,.72)}
.eyebrow--light::before{background:var(--verde-400)}

/* cabeçalho de seção */
.sec-head{max-width:62ch;margin-bottom:clamp(40px,5vw,68px)}
.sec-head__h2{font-size:clamp(1.85rem,3.3vw,3rem);max-width:30ch}
.sec-head__lead{margin-top:20px;font-size:1.05rem;color:var(--tinta-2);max-width:56ch}
.sec-head--light .sec-head__lead{color:rgba(234,240,234,.76)}
.sec-head::after{
  content:"";display:block;width:56px;height:3px;margin-top:26px;background:var(--verde);
}
.sec-head--light::after{background:var(--verde-400)}

/* variante centralizada — para as faixas que têm grade simétrica abaixo
   (pilares e galeria de obras). O título ganha mais largura antes de quebrar. */
.sec-head--centro{max-width:none;text-align:center}
.sec-head--centro .eyebrow{justify-content:center}
.sec-head--centro .sec-head__h2{margin-inline:auto}
.sec-head--centro .sec-head__lead{margin-inline:auto}
.sec-head--centro::after{margin-inline:auto}

.lead{font-size:1.12rem;color:var(--tinta)}
/* o editor do WordPress não aplica classes: o primeiro parágrafo destes
   blocos recebe o tratamento de abertura pela posição */
.empresa__txt>p:first-of-type,
.escopo__txt>p:first-of-type{font-size:1.12rem;color:var(--tinta);font-weight:500}

/* moldura fina — eco do enquadramento do logotipo */
.frame{position:relative}
.frame::after{
  content:"";position:absolute;inset:-14px;border:1px solid var(--linha-forte);
  pointer-events:none;
}

/* ---------- 4. BOTÕES ---------- */
.btn{
  --bg:var(--verde);--fg:#fff;--bd:var(--verde);
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 28px;border:1px solid var(--bd);background:var(--bg);color:var(--fg);
  font-family:var(--ff-disp);font-weight:600;font-size:.92rem;letter-spacing:.02em;
  text-decoration:none;border-radius:var(--r);
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease);
}
.btn:hover{--bg:var(--verde-900);--bd:var(--verde-900);transform:translateY(-2px)}
.btn--ghost{--bg:transparent;--fg:#fff;--bd:rgba(255,255,255,.5)}
.btn--ghost:hover{--bg:#fff;--fg:var(--verde-900);--bd:#fff}
.btn--sm{padding:11px 18px;font-size:.85rem;gap:7px}
.btn--sm svg{width:16px;height:16px;flex:none}
.btn--full{width:100%;padding-block:17px}
/* botão de linha, para navegação secundária dentro do conteúdo */
.btn--linha{--bg:transparent;--fg:var(--verde);--bd:var(--linha-forte);margin-top:34px}
.btn--linha:hover{--bg:var(--verde);--fg:#fff;--bd:var(--verde)}
.btn--linha .chev{width:11px;height:8px;transform:rotate(-90deg)}
/* botão claro, para uso sobre a faixa verde escura */
.btn--claro{--bg:transparent;--fg:#fff;--bd:rgba(255,255,255,.36)}
.btn--claro:hover{--bg:#fff;--fg:var(--verde-900);--bd:#fff}

/* ---------- 5. HEADER ---------- */
.hdr{
  position:fixed;inset:0 0 auto;z-index:100;
  transition:background .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
  border-bottom:1px solid transparent;
}
.hdr__in{display:flex;align-items:center;gap:24px;min-height:78px}

/* Logotipo oficial sozinho, por pedido do cliente. Duas artes sobrepostas:
   a branca vale sobre o topo escuro e sobre o painel do menu; a verde entra
   quando o cabeçalho fica claro na rolagem.
   A assinatura ("Soluções em Construções") não entra aqui — abaixo de ~90px
   ela vira um borrão. Ela aparece no rodapé, com altura para ser lida. */
.brand{position:relative;display:block;margin-right:auto;line-height:0;text-decoration:none}
.brand__logo{display:block;height:58px;width:auto;transition:opacity .3s var(--ease)}
.brand__logo--escuro{position:absolute;top:0;left:0;opacity:0}
.hdr.is-stuck .brand__logo--claro{opacity:0}
.hdr.is-stuck .brand__logo--escuro{opacity:1}
/* menu mobile aberto: o painel é escuro, então a arte branca volta */
.hdr.menu-aberto .brand__logo--claro{opacity:1}
.hdr.menu-aberto .brand__logo--escuro{opacity:0}

.nav{display:flex;align-items:center;gap:clamp(16px,2.2vw,34px)}
.nav__lista{display:flex;gap:clamp(16px,2.2vw,32px)}
.nav .sub{display:block}
.nav a{
  position:relative;text-decoration:none;font-size:.93rem;font-weight:500;
  color:rgba(255,255,255,.86);padding-block:6px;transition:color .2s var(--ease);
}
.nav ul a::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .28s var(--ease);
}
.nav ul a:hover::after,.nav ul a.is-active::after{transform:scaleX(1)}
.nav__cta{--bg:#fff;--fg:var(--verde-900);--bd:#fff}
.nav__cta:hover{--bg:transparent;--fg:#fff;--bd:#fff}
/* `.nav a` (0,1,1) vence `.btn` (0,1,0) na cascata e apagava o rótulo do CTA.
   Estas regras devolvem a cor ao botão em todos os estados do header.        */
.nav a.btn,
.hdr.is-stuck .nav a.btn{color:var(--fg)}

/* estado "rolado" */
.hdr.is-stuck{background:rgba(247,245,241,.94);backdrop-filter:blur(12px);border-bottom-color:var(--linha);box-shadow:0 1px 18px rgba(25,27,24,.06)}
.hdr.is-stuck .nav a{color:var(--tinta)}
.hdr.is-stuck .nav a:hover{color:var(--verde)}
.hdr.is-stuck .nav a.is-active{color:var(--verde)}
.hdr.is-stuck .nav__cta{--bg:var(--verde);--fg:#fff;--bd:var(--verde)}
.hdr.is-stuck .nav__cta:hover{--bg:var(--verde-900);--bd:var(--verde-900);--fg:#fff}
.hdr.is-stuck .burger span{background:var(--verde-900)}

/* com o menu aberto, marca e hambúrguer voltam ao branco sobre o painel escuro */
.hdr.menu-aberto .burger span{background:#fff}

/* hambúrguer */
.burger{display:none;flex-direction:column;justify-content:center;gap:6px;width:44px;height:44px;margin-right:-10px;position:relative;z-index:2}
.burger span{display:block;height:2px;width:24px;margin-inline:auto;background:#fff;transition:transform .3s var(--ease),opacity .2s var(--ease)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ---------- 6. HERO ---------- */
.hero{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:min(94svh,860px);padding-top:130px;isolation:isolate}
.hero__bg{position:absolute;inset:0;z-index:-1;overflow:hidden;background:var(--verde-900)}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.hero__bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(12,36,18,.92) 0%,rgba(12,36,18,.74) 38%,rgba(12,36,18,.28) 70%,rgba(12,36,18,.42) 100%),
    linear-gradient(to top,rgba(12,36,18,.85) 0%,rgba(12,36,18,0) 45%);
}
.hero__in{padding-bottom:clamp(48px,7vw,86px)}
.hero__h1{
  color:#fff;font-size:clamp(2.15rem,5.6vw,4.35rem);letter-spacing:-.03em;
  text-wrap:balance;max-width:17ch;
}
.hero__lead{
  margin-top:26px;max-width:50ch;font-size:clamp(1rem,1.2vw,1.15rem);
  color:rgba(255,255,255,.82);
}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}

/* faixa de ficha técnica */
.ficha{background:rgba(12,36,18,.62);backdrop-filter:blur(10px);border-top:1px solid rgba(255,255,255,.16)}
.ficha__grid{display:grid;grid-template-columns:repeat(4,1fr)}
.ficha__cell{padding:24px 26px;border-left:1px solid rgba(255,255,255,.16)}
.ficha__cell:first-child{border-left:0;padding-left:0}
.ficha__cell strong{
  display:block;font-family:var(--ff-disp);font-size:1.18rem;font-weight:700;
  color:#fff;letter-spacing:-.01em;font-variant-numeric:tabular-nums;
}
.ficha__cell span{display:block;margin-top:5px;font-size:.8rem;line-height:1.45;color:rgba(255,255,255,.68)}

/* ---------- 7. EMPRESA ---------- */
.empresa{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,6vw,86px);align-items:start}
.empresa__txt p{color:var(--tinta-2)}
.empresa__txt .lead{color:var(--tinta);font-weight:500}
.empresa__img{margin:0}
.empresa__img img{width:100%;aspect-ratio:4/3.2;object-fit:cover}

/* faixa do tempo de atuação — rótulo centralizado na altura do número */
.stats{margin:44px 0 0;padding-top:30px;border-top:1px solid var(--linha)}
.stats div{display:flex;align-items:center;gap:clamp(16px,2vw,26px)}
.stats dt{
  flex:none;font-family:var(--ff-disp);font-weight:700;
  font-size:clamp(2.6rem,6vw,4.2rem);line-height:.9;letter-spacing:-.045em;
  color:var(--verde);font-variant-numeric:tabular-nums;
}
.stats dd{margin:0;font-size:.92rem;line-height:1.35;color:var(--tinta-2)}

/* missão / visão / valores */
.mvv{
  display:grid;grid-template-columns:repeat(3,1fr);
  margin-top:clamp(48px,6vw,84px);
  border:1px solid var(--linha);border-right:0;background:var(--branco);
}
.mvv>li{padding:clamp(26px,3vw,38px);border-right:1px solid var(--linha)}
.mvv__k{
  display:block;margin-bottom:14px;font-family:var(--ff-disp);font-size:.72rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--verde);
}
.mvv p{color:var(--tinta-2)}
.mvv__list li{position:relative;padding-left:18px;margin-bottom:8px;font-size:.94rem;color:var(--tinta-2)}
.mvv__list li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;background:var(--terra)}
.mvv__list li:last-child{margin-bottom:0}

/* ---------- 8. ÁREAS DE ATUAÇÃO ---------- */
.area__list{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 26px;
  margin-top:28px;padding-top:26px;border-top:1px solid var(--linha);
}
.area__list li{position:relative;padding-left:20px;font-size:.93rem;line-height:1.45}
.area__list li::before{
  content:"";position:absolute;left:0;top:.45em;width:9px;height:9px;
  border:2px solid var(--verde);
}

/* ---------- 9. PILARES (faixa escura) ---------- */
.pilares{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.pilar{padding:0 clamp(22px,3vw,40px);border-left:1px solid rgba(255,255,255,.14)}
.pilar:first-child{border-left:0;padding-left:0}
.pilar:last-child{padding-right:0}
.pilar h3{font-size:1.18rem;margin-bottom:20px;letter-spacing:0}
.pilar__h3-2{margin-top:34px}
.pilar ul li{
  position:relative;padding-left:24px;margin-bottom:11px;
  font-size:.93rem;line-height:1.5;color:rgba(234,240,234,.78);
}
.pilar ul li::before{
  content:"";position:absolute;left:0;top:.52em;width:10px;height:2px;background:var(--verde-400);
}

/* ---------- 10. OBRAS ---------- */
.filtros{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:34px}
.filtros--centro{justify-content:center}
.chip{
  padding:9px 18px;border:1px solid var(--linha-forte);border-radius:var(--r);
  font-family:var(--ff-disp);font-size:.84rem;font-weight:600;color:var(--tinta-2);
  background:transparent;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.chip:hover{border-color:var(--verde);color:var(--verde)}
.chip.is-on{background:var(--verde);border-color:var(--verde);color:#fff}

.galeria{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px)}

.obra{margin:0;background:var(--branco);border:1px solid var(--linha);display:flex;flex-direction:column;
  animation:pop .4s var(--ease) both}
@keyframes pop{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.obra[hidden]{display:none}
.obra__btn{display:block;width:100%;overflow:hidden;position:relative;padding:0;line-height:0}
.obra__btn img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .6s var(--ease)}
.obra__btn::after{
  content:"⤢";position:absolute;right:12px;bottom:12px;
  width:38px;height:38px;display:grid;place-items:center;
  background:var(--verde);color:#fff;font-size:1rem;line-height:1;
  opacity:0;transform:translateY(8px);transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.obra:hover .obra__btn img{transform:scale(1.06)}
.obra:hover .obra__btn::after{opacity:1;transform:none}
.obra figcaption{padding:20px 22px 22px;display:flex;flex-direction:column;gap:5px;flex:1}
.obra__tag{
  font-family:var(--ff-disp);font-size:.66rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--terra);
}
.obra figcaption strong{font-family:var(--ff-disp);font-size:1.02rem;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.obra__loc{font-size:.83rem;color:var(--tinta-2);margin-top:auto;padding-top:4px}

.galeria__vazio{margin-top:28px;color:var(--tinta-2);font-style:italic}

/* ---------- 11. QUALIDADE ---------- */
.qual{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(46px,6vw,84px);align-items:start}
.qual__quote{margin:0;background:var(--branco);padding:clamp(30px,4vw,46px)}
.qual__quote p{
  font-family:var(--ff-disp);font-size:clamp(1.1rem,1.8vw,1.42rem);font-weight:500;
  line-height:1.45;letter-spacing:-.015em;font-variation-settings:"wdth" 104;
}
.qual__quote em{font-style:normal;color:var(--verde);font-weight:700}
.qual__quote footer{
  display:flex;flex-direction:column;align-items:flex-start;gap:9px;
  margin-top:26px;padding-top:20px;border-top:1px solid var(--linha);
}
.qual__ref{
  display:flex;gap:10px;align-items:center;margin:0;
  font-family:var(--ff-disp);font-size:.72rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tinta-2);
}
.qual__ref span{color:var(--verde)}
.qual__ref span::after{content:" ·";color:var(--linha-forte)}
/* procedência do texto — tom discreto, sem competir com a citação */
.qual__fonte{font-style:normal;font-size:.86rem;line-height:1.4;color:var(--tinta-2)}

.qual__img{margin:0 0 22px}
.qual__img img{width:100%;aspect-ratio:3/2;object-fit:cover}
.selos{display:grid;gap:12px}
.selos li{padding:20px 22px;background:var(--branco);border:1px solid var(--linha);border-left:3px solid var(--verde)}
.selos strong{display:block;font-family:var(--ff-disp);font-size:1rem;letter-spacing:.02em}
.selos span{display:block;margin-top:5px;font-size:.85rem;line-height:1.45;color:var(--tinta-2)}

/* ---------- 12. CLIENTES ---------- */
.grupo-tit{
  font-family:var(--ff-disp);font-size:.74rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--verde);margin-bottom:18px;
}
.grupo-tit:not(:first-of-type){margin-top:72px}
.registro{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
/* borda em cada célula + margem negativa: as linhas se sobrepõem em 1px e a
   área sem itens fica sem fundo e sem borda. */
.registro li{
  padding:22px 24px;background:var(--branco);border:1px solid var(--linha);
  margin:-1px 0 0 -1px;transition:background .2s var(--ease);
}
.registro li:hover{background:var(--verde-50)}
.registro strong{display:block;font-family:var(--ff-disp);font-size:1.02rem;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.registro span{display:block;margin-top:6px;font-size:.82rem;line-height:1.4;color:var(--tinta-2)}

/* ---------- 13. CONTATO ---------- */
.contato{display:grid;grid-template-columns:1fr minmax(300px,.8fr);gap:clamp(40px,6vw,80px);align-items:stretch}

.ficha-tec{margin:0;border-top:1px solid rgba(255,255,255,.16);
  display:flex;flex-direction:column;height:100%}
.ficha-tec>div{
  display:grid;grid-template-columns:minmax(110px,.5fr) 1fr;gap:16px;
  padding:18px 0;border-bottom:1px solid rgba(255,255,255,.16);
  flex:1;align-content:center;
}
.ficha-tec dt{
  font-family:var(--ff-disp);font-size:.7rem;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:rgba(234,240,234,.55);padding-top:3px;
}
.ficha-tec dd{margin:0;font-size:.97rem;line-height:1.5;color:#fff}
.ficha-tec a{text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35);transition:border-color .2s var(--ease)}
.ficha-tec a:hover{border-bottom-color:#fff}

/* cartão de atendimento por WhatsApp */
.wcard{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  padding:clamp(28px,3.6vw,44px);display:flex;flex-direction:column;align-items:flex-start;
  height:100%;
}
.wcard__ico{
  width:54px;height:54px;display:grid;place-items:center;border-radius:50%;
  background:#25D366;color:#0C2412;margin-bottom:24px;
}
.wcard__ico svg{width:31px;height:31px}
.wcard h3{font-size:clamp(1.2rem,1.9vw,1.45rem);margin-bottom:12px}
.wcard>p{color:rgba(234,240,234,.78);max-width:36ch}
.wcard__num{
  display:block;margin:24px 0 26px;text-decoration:none;color:#fff;
  font-family:var(--ff-disp);font-size:clamp(1.65rem,2.7vw,2.15rem);font-weight:700;
  letter-spacing:-.025em;font-variant-numeric:tabular-nums;line-height:1;
  transition:color .2s var(--ease);
}
.wcard__num:hover{color:#25D366}
.wcard .btn{width:100%}
.btn--wpp{--bg:#25D366;--fg:#0A2110;--bd:#25D366}
.btn--wpp:hover{--bg:#fff;--bd:#fff;--fg:var(--verde-900)}
.btn--wpp svg{width:20px;height:20px;flex:none}
.wcard__alt{margin-top:auto;padding-top:20px;font-size:.86rem;color:rgba(234,240,234,.62)}
.wcard__alt a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4)}
.wcard__alt a:hover{border-bottom-color:#fff}

/* ---------- 14. RODAPÉ ---------- */
.rodape{background:var(--verde-900);color:rgba(234,240,234,.72);padding-top:clamp(56px,6vw,80px)}
.rodape__grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:clamp(30px,4vw,54px);padding-bottom:56px}
.rodape__logo{display:block;height:150px;width:auto}
.rodape__desde{margin:22px 0 0;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--verde-400)}
.rodape h4{font-family:var(--ff-disp);font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#fff;margin-bottom:18px}
.rodape__nav li{margin-bottom:10px}
.rodape a{text-decoration:none;font-size:.92rem;transition:color .2s var(--ease)}
.rodape a:hover{color:#fff}
.rodape__contato p{font-size:.92rem;margin-bottom:12px;line-height:1.5}
.rodape__base{
  display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;
  padding-block:22px;border-top:1px solid rgba(255,255,255,.12);
}
.rodape__base p{margin:0;font-size:.79rem;color:rgba(234,240,234,.5)}
.rodape__cred{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.rodape__cred .cora{color:#E8A184;font-size:1.05em;line-height:1}
.rodape__cred a{
  font-size:inherit;color:rgba(234,240,234,.72);text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.28);
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.rodape__cred a:hover{color:#fff;border-bottom-color:#fff}

/* só para leitores de tela */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- 15. FLUTUANTES / TOAST ---------- */
.float{
  position:fixed;right:clamp(16px,2.5vw,28px);z-index:90;
  width:52px;height:52px;display:grid;place-items:center;border-radius:50%;
  color:#fff;box-shadow:0 6px 22px rgba(12,36,18,.32);
  transition:transform .25s var(--ease),opacity .25s var(--ease),background .25s var(--ease);
}
.float svg{width:26px;height:26px}
.float--wpp{bottom:clamp(16px,2.5vw,28px);background:#25D366;text-decoration:none}
.float--wpp:hover{transform:scale(1.08)}
/* some quando a seção de contato está à vista: lá já existe o mesmo CTA */
.float--wpp.is-off{opacity:0;pointer-events:none;transform:scale(.7)}
.float--top{bottom:calc(clamp(16px,2.5vw,28px) + 62px);background:var(--verde);opacity:0;pointer-events:none;transform:translateY(10px)}
.float--top svg{width:20px;height:20px}
.float--top.is-on{opacity:1;pointer-events:auto;transform:none}
.float--top:hover{background:var(--verde-900)}

/* ---------- 16. LIGHTBOX ---------- */
.lbox{position:fixed;inset:0;z-index:160;display:grid;place-items:center;padding:clamp(16px,4vw,48px);
  background:rgba(12,36,18,.95);animation:fade .25s var(--ease)}
@keyframes fade{from{opacity:0}to{opacity:1}}
.lbox[hidden]{display:none}
.lbox__fig{margin:0;max-width:1100px;width:100%;text-align:center}
.lbox__fig img{width:100%;max-height:76svh;object-fit:contain;margin-inline:auto}
.lbox__fig figcaption{margin-top:18px;color:rgba(255,255,255,.85);font-size:.92rem}
.lbox__fig figcaption b{display:block;font-family:var(--ff-disp);font-size:1.1rem;color:#fff;margin-bottom:4px}
.lbox__x{position:absolute;top:clamp(12px,2vw,24px);right:clamp(12px,2vw,24px);
  width:46px;height:46px;font-size:2rem;line-height:1;color:#fff;border:1px solid rgba(255,255,255,.3)}
.lbox__x:hover{background:rgba(255,255,255,.12)}
.lbox__nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:64px;
  font-size:2.4rem;line-height:1;color:#fff;border:1px solid rgba(255,255,255,.25)}
.lbox__nav:hover{background:rgba(255,255,255,.12)}
.lbox__nav--prev{left:clamp(8px,1.6vw,20px)}
.lbox__nav--next{right:clamp(8px,1.6vw,20px)}
body.trava{overflow:hidden}

/* ---------- 17. REVEAL ---------- */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}

/* ---------- 8b. SUBMENU DE SERVIÇOS ---------- */
.nav__lista{display:flex;gap:clamp(16px,2.2vw,32px)}
.tem-sub{position:relative}
.nav__sub{
  display:inline-flex;align-items:center;gap:7px;padding-block:6px;
  font-size:.93rem;font-weight:500;color:rgba(255,255,255,.86);
  transition:color .2s var(--ease);
}
.nav__sub .chev{width:11px;height:8px;flex:none;transition:transform .25s var(--ease)}
.tem-sub.is-aberto .nav__sub .chev{transform:rotate(180deg)}

.sub{
  position:absolute;top:calc(100% + 14px);left:-18px;z-index:5;min-width:270px;
  background:var(--verde-900);border:1px solid rgba(255,255,255,.14);
  padding:6px;border-radius:var(--r);box-shadow:0 18px 40px -18px rgba(12,36,18,.7);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;
}
/* seta invisível cobrindo o vão, para o ponteiro não perder o hover */
.sub::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.sub a{
  display:block;padding:11px 14px;border-radius:var(--r);
  color:rgba(234,240,234,.86);font-size:.92rem;white-space:nowrap;
  transition:background .18s var(--ease),color .18s var(--ease);
}
.sub a::after{display:none}
.sub a:hover,.sub a.is-active{background:rgba(255,255,255,.09);color:#fff}
.tem-sub.is-aberto>.sub{opacity:1;visibility:visible;transform:none}
@media (hover:hover) and (min-width:901px){
  .tem-sub:hover>.sub,.tem-sub:focus-within>.sub{opacity:1;visibility:visible;transform:none}
}
/* o painel do submenu é sempre escuro: os links seguem claros mesmo com o
   header no estado "rolado", que escurece os demais itens do menu */
.hdr.is-stuck .nav .sub a{color:rgba(234,240,234,.86)}
.hdr.is-stuck .nav .sub a:hover,
.hdr.is-stuck .nav .sub a.is-active{color:#fff}
.hdr.is-stuck .nav__sub{color:var(--tinta)}
.hdr.is-stuck .nav__sub:hover,.hdr.is-stuck .tem-sub.is-active .nav__sub{color:var(--verde)}
.tem-sub.is-active>.nav__sub{color:#fff}

/* ---------- 8c. HERO DAS PÁGINAS INTERNAS ---------- */
.hero-int{position:relative;isolation:isolate;padding:calc(78px + clamp(56px,8vw,104px)) 0 clamp(52px,7vw,88px)}
.hero-int__bg{position:absolute;inset:0;z-index:-1;overflow:hidden;background:var(--verde-900)}
.hero-int__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.hero-int__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(96deg,rgba(12,36,18,.94) 0%,rgba(12,36,18,.8) 46%,rgba(12,36,18,.5) 100%);
}
.hero-int__h1{color:#fff;font-size:clamp(1.95rem,4.4vw,3.4rem);letter-spacing:-.03em;max-width:22ch}
.hero-int__lead{margin-top:20px;max-width:56ch;color:rgba(255,255,255,.82);font-size:clamp(1rem,1.15vw,1.1rem)}

.migalhas{margin-bottom:26px}
.migalhas ol{display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-size:.8rem}
.migalhas li{color:rgba(255,255,255,.55)}
.migalhas li+li::before{content:"/";margin-right:9px;color:rgba(255,255,255,.32)}
.migalhas a{color:rgba(255,255,255,.8);text-decoration:none;transition:color .2s var(--ease)}
.migalhas a:hover{color:#fff}
.migalhas [aria-current]{color:#fff}

/* ---------- 8d. CARDS DE ÁREA (home) ---------- */
.cards-area{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.6vw,32px)}
.card-area{
  display:flex;flex-direction:column;background:var(--branco);
  border:1px solid var(--linha);transition:border-color .25s var(--ease),transform .25s var(--ease);
}
.card-area:hover{border-color:var(--verde);transform:translateY(-3px)}
.card-area__img{display:block;overflow:hidden;line-height:0}
.card-area__img img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .6s var(--ease)}
.card-area:hover .card-area__img img{transform:scale(1.05)}
.card-area__body{display:flex;flex-direction:column;flex:1;padding:clamp(24px,2.8vw,34px)}
.card-area__body h3{font-size:clamp(1.3rem,2.1vw,1.75rem);margin-bottom:14px}
.card-area__body h3 a{text-decoration:none}
/* o link do título cobre o card inteiro — um alvo só, sem link aninhado */
.card-area__body h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.card-area{position:relative}
.card-area__body>p{color:var(--tinta-2);font-size:.97rem}
.card-area__lista{
  display:grid;gap:9px;margin:22px 0 26px;padding-top:20px;border-top:1px solid var(--linha);
}
.card-area__lista li{position:relative;padding-left:20px;font-size:.91rem;line-height:1.4;color:var(--tinta-2)}
.card-area__lista li::before{content:"";position:absolute;left:0;top:.42em;width:9px;height:9px;border:2px solid var(--verde)}
.card-area__link{
  display:inline-flex;align-items:center;gap:9px;margin-top:auto;
  font-family:var(--ff-disp);font-size:.86rem;font-weight:600;color:var(--verde);
}
.card-area__link .chev{width:11px;height:8px;transform:rotate(-90deg);transition:transform .25s var(--ease)}
.card-area:hover .card-area__link .chev{transform:rotate(-90deg) translateY(-4px)}

/* ---------- 8e. FAIXA OBRAS INSTITUCIONAL ---------- */
.abrangencia{padding-bottom:clamp(36px,4.5vw,56px);border-bottom:1px solid rgba(255,255,255,.14)}
.abrangencia__k{
  margin:0 0 20px;font-family:var(--ff-disp);font-size:.72rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(234,240,234,.55);text-align:center;
}
.abrangencia__lista{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px 0;
}
.abrangencia__lista li{
  display:flex;align-items:center;
  font-family:var(--ff-disp);font-weight:600;letter-spacing:-.01em;
  font-size:clamp(1rem,1.7vw,1.45rem);color:#fff;padding-inline:clamp(10px,1.2vw,18px);
}
.abrangencia__lista li+li::before{
  content:"";width:5px;height:5px;background:var(--verde-400);
  margin-right:clamp(10px,1.2vw,18px);flex:none;
}

.obras-inst{
  display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(32px,5vw,72px);
  padding-block:0 clamp(38px,4.5vw,58px);
}
.obras-inst__col h3{font-size:1.15rem;margin-bottom:12px}
.obras-inst__col>p{color:rgba(234,240,234,.72);font-size:.95rem;margin-bottom:20px;max-width:44ch}
.obras-inst__col ul li{
  position:relative;padding-left:24px;margin-bottom:11px;
  font-size:.93rem;line-height:1.5;color:rgba(234,240,234,.82);
}
.obras-inst__col ul li::before{content:"";position:absolute;left:0;top:.52em;width:10px;height:2px;background:var(--verde-400)}
.obras-inst__cta{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;padding-top:clamp(20px,3vw,34px);border-top:1px solid rgba(255,255,255,.14)}
.obras-inst__cta .chev{width:11px;height:8px;transform:rotate(-90deg)}

/* ---------- 8f. ESCOPO (páginas de serviço) ---------- */
.escopo{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,6vw,80px);align-items:start}
.escopo__txt p{color:var(--tinta-2)}
.escopo__txt .lead{color:var(--tinta)}
.escopo__lista h2{
  font-size:.74rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--verde);margin-bottom:20px;
}
.escopo__lista .area__list{margin-top:0;padding-top:0;border-top:0}

/* ---------- 8g. FAIXA DE CHAMADA (fim das páginas internas) ---------- */
.cta-faixa{background:var(--verde-800);color:#EAF0EA;padding-block:clamp(46px,6vw,78px)}
.cta-faixa__in{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:clamp(26px,4vw,60px);
}
.cta-faixa__txt{flex:1 1 380px}
.cta-faixa__h2{color:#fff;font-size:clamp(1.55rem,2.8vw,2.35rem)}
.cta-faixa__lead{margin-top:12px;color:rgba(234,240,234,.76);max-width:46ch}
.cta-faixa__acoes{display:flex;flex-wrap:wrap;gap:14px}
.cta-faixa__acoes .chev{width:11px;height:8px;transform:rotate(-90deg)}

/* ---------- 8h. PÁGINA DE CONTATO ---------- */
/* a ficha técnica também roda sobre fundo claro nesta página */
.ficha-tec--claro{border-top-color:var(--linha)}
.ficha-tec--claro>div{border-bottom-color:var(--linha)}
.ficha-tec--claro dt{color:var(--tinta-2)}
.ficha-tec--claro dd{color:var(--tinta)}
.ficha-tec--claro a{border-bottom-color:var(--linha-forte)}
.ficha-tec--claro a:hover{border-bottom-color:var(--verde)}

.wcard--claro{background:var(--verde-800);border-color:var(--verde-800)}
.wcard--claro h3{color:#fff}
.wcard--claro>p{color:rgba(234,240,234,.8)}

.assuntos{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px)}
.assunto{
  position:relative;display:flex;flex-direction:column;
  padding:clamp(24px,2.8vw,34px);background:var(--branco);border:1px solid var(--linha);
  transition:border-color .25s var(--ease),transform .25s var(--ease);
}
.assunto:hover{border-color:var(--verde);transform:translateY(-3px)}
.assunto h3{font-size:1.1rem;margin-bottom:12px}
.assunto p{flex:1;color:var(--tinta-2);font-size:.93rem}
.assunto__link{
  display:inline-flex;align-items:center;gap:9px;margin-top:24px;text-decoration:none;
  font-family:var(--ff-disp);font-size:.86rem;font-weight:600;color:var(--verde);
}
.assunto__link .chev{width:11px;height:8px;transform:rotate(-90deg);transition:transform .25s var(--ease)}
.assunto:hover .assunto__link .chev{transform:rotate(-90deg) translateY(-4px)}
/* o link cobre o cartão inteiro — um alvo só */
.assunto__link::after{content:"";position:absolute;inset:0}

/* ---------- 18. RESPONSIVO ---------- */
@media (max-width:1080px){
  .empresa,.qual,.contato,.escopo{grid-template-columns:1fr}
  .assuntos{grid-template-columns:1fr}
  .cards-area{grid-template-columns:1fr}
  .pilares{grid-template-columns:1fr 1fr}
  .pilar:nth-child(3){grid-column:1/-1;border-left:0;padding-left:0;margin-top:34px;padding-top:34px;border-top:1px solid rgba(255,255,255,.14)}
  .galeria{grid-template-columns:repeat(2,1fr)}
  .rodape__grid{grid-template-columns:1fr 1fr}
}

@media (max-width:900px){
  html{scroll-padding-top:72px}
  .hdr__in{min-height:68px}
  .brand__logo{height:46px}
  .burger{display:flex}
  /* a marca fica acima do painel do menu para não sumir quando ele abre */
  .brand{position:relative;z-index:2}

  .nav{
    position:fixed;inset:0;flex-direction:column;justify-content:center;gap:0;
    background:var(--verde-900);padding:80px var(--gutter) 40px;
    transform:translateX(100%);transition:transform .38s var(--ease);
    visibility:hidden;
  }
  .nav.is-open{transform:none;visibility:visible}
  .nav{overflow-y:auto;justify-content:flex-start}
  .nav__lista{flex-direction:column;gap:0;width:100%}
  .nav__lista>li{border-bottom:1px solid rgba(255,255,255,.12)}
  .nav__lista>li:first-child{border-top:1px solid rgba(255,255,255,.12)}
  .nav__lista>li>a,.nav__sub{
    display:flex;width:100%;padding:19px 0;font-family:var(--ff-disp);
    font-size:1.22rem;font-weight:600;color:#fff;
  }
  .nav__sub{justify-content:space-between;align-items:center}
  .nav a::after{display:none}

  /* submenu vira lista expansível dentro do painel */
  .tem-sub{position:static}
  .nav .sub{
    position:static;display:none;min-width:0;padding:0 0 14px;
    background:none;border:0;box-shadow:none;opacity:1;visibility:visible;transform:none;
  }
  .tem-sub.is-aberto>.sub{display:block}
  .nav .sub::before{display:none}
  .nav .sub a{
    padding:13px 0 13px 18px;font-size:1rem;border-radius:0;
    border-left:2px solid rgba(255,255,255,.18);
  }
  .nav .sub a:hover,.nav .sub a.is-active{background:none;border-left-color:var(--verde-400);color:#fff}
  .nav__cta{margin-top:32px;width:100%;padding-block:16px;font-size:1rem}
  .hdr.is-stuck .nav a,.hdr.is-stuck .nav__sub{color:#fff}
  .obras-inst{grid-template-columns:1fr}
  .hdr.is-stuck .nav__cta{--bg:#fff;--fg:var(--verde-900);--bd:#fff}

  .ficha__grid{grid-template-columns:1fr 1fr}
  .ficha__cell{padding:18px 20px}
  .ficha__cell:nth-child(odd){border-left:0;padding-left:0}
  .ficha__cell:nth-child(n+3){border-top:1px solid rgba(255,255,255,.16)}

  .mvv{grid-template-columns:1fr;border-right:1px solid var(--linha)}
  .mvv>li{border-right:0;border-bottom:1px solid var(--linha)}
  .mvv>li:last-child{border-bottom:0}

  .frame::after{inset:-9px}
}

@media (max-width:640px){
  .hero{min-height:auto;padding-top:110px}
  .hero__in{padding-bottom:44px}
  .hero__cta .btn{flex:1 1 100%}
  .stats dd{max-width:22ch}
  .area__list{grid-template-columns:1fr}
  .pilares{grid-template-columns:1fr}
  .pilar{border-left:0;padding-inline:0}
  .pilar:nth-child(n+2){margin-top:34px;padding-top:34px;border-top:1px solid rgba(255,255,255,.14)}
  .pilar:nth-child(3){margin-top:34px}
  .galeria{grid-template-columns:1fr}
  .rodape__grid{grid-template-columns:1fr;gap:36px}
  .lbox__nav{width:42px;height:52px;font-size:1.8rem}
  .obras-inst__cta .btn,.cta-faixa__acoes .btn{flex:1 1 100%}
  .cta-faixa__acoes{width:100%}
  .abrangencia__lista{gap:8px 0}
  .filtros{gap:6px}
  .chip{padding:8px 14px;font-size:.8rem}
}

/* ---------- 19. MOVIMENTO REDUZIDO / IMPRESSÃO ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  [data-reveal]{opacity:1;transform:none}
}

@media print{
  .hdr,.float,.filtros,.lbox,.skip{display:none!important}
  body{background:#fff}
  .section--dark{background:#fff;color:#000}
  [data-reveal]{opacity:1;transform:none}
}