/* Ligante Engenharia e Construcoes - folha de estilo unica.
   Paleta e tipografia herdadas do site original; hierarquia, profundidade e
   estados de interacao refeitos. Sem framework: tudo aqui e CSS de mao. */

@font-face{font-family:'Mulish';src:url('assets/fonts/mulish-latin.woff2') format('woff2');font-weight:200 1000;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Mulish';src:url('assets/fonts/mulish-latin-ext.woff2') format('woff2');font-weight:200 1000;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

:root{
  --navy:#1e2d3b;          /* barra do topo */
  --navy-deep:#16222d;     /* rodape */
  --navy-soft:#3d5975;     /* botoes, titulos de card */
  --cyan:#1eb0e0;          /* acento unico: link ativo, sobrelinha, foco */
  --ink:#3b3a3a;           /* texto corrido */
  --ink-soft:#6b6b6b;
  --band:#c0d2e5;          /* faixa azul clara do "Sobre nos" */
  --field:#f7f7f7;         /* legenda das fotos */
  --paper:#fbfcfd;         /* alternancia sutil entre secoes claras */
  --line:#e6e6e6;
  /* Sombras tingidas de navy: preto puro sobre paleta azul suja a cor. */
  --shadow-sm:0 1px 2px rgba(22,34,45,.06),0 2px 8px rgba(22,34,45,.05);
  --shadow-md:0 4px 10px rgba(22,34,45,.07),0 14px 34px rgba(22,34,45,.11);
  --ease:cubic-bezier(.22,.61,.36,1);
  --header-h:90px;
  --container:1120px;
  --sans:'Mulish','Avenir Next','Segoe UI',Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 12px);-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-weight:800;text-wrap:balance}
p{margin:0 0 1em;text-wrap:pretty}
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 24px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

/* Pular para o conteudo: escondido ate receber foco pelo teclado. Escondido
   para sempre (que e o que .sr-only faz) nao serve a ninguem. */
.skip-link{position:absolute;left:16px;top:-100px;z-index:100;background:#fff;color:var(--navy);
  padding:12px 20px;font-weight:700;text-decoration:none;box-shadow:var(--shadow-md);transition:top .2s var(--ease)}
.skip-link:focus{top:16px}

/* ---------- topo ---------- */
.header{position:fixed;top:0;left:0;right:0;z-index:60;height:var(--header-h);background:var(--navy);display:flex;align-items:stretch;
  transition:height .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease)}
/* Encolhe e ganha sombra depois que a pagina rola: devolve area util e separa
   a barra do conteudo que passa por baixo. */
.header.is-scrolled{height:70px;background:rgba(30,45,59,.97);backdrop-filter:blur(8px);box-shadow:0 6px 24px rgba(22,34,45,.28)}
.header__brand{background:#fff;display:flex;align-items:center;gap:12px;padding:0 26px 0 18px;flex:0 0 auto;text-decoration:none}
.header__brand img{width:121px;height:auto;transition:width .3s var(--ease)}
.header.is-scrolled .header__brand img{width:100px}
.header__brand span{font-size:20px;font-weight:800;color:var(--ink);letter-spacing:.5px;white-space:nowrap}
.nav{flex:1;display:flex;align-items:center;justify-content:flex-end;padding-right:clamp(16px,calc((100vw - var(--container))/2 - 30px),200px)}
.nav__list{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0}
.nav__list a{position:relative;color:#fff;text-decoration:none;font-size:13.5px;font-weight:300;letter-spacing:.6px;white-space:nowrap;padding:6px 0;transition:color .2s var(--ease)}
/* Sublinhado que cresce do centro; no link ativo fica permanente. */
.nav__list a::after{content:'';position:absolute;left:50%;right:50%;bottom:0;height:2px;background:var(--cyan);transition:left .24s var(--ease),right .24s var(--ease)}
.nav__list a:hover::after,.nav__list a.is-active::after{left:0;right:0}
.nav__list a:hover,.nav__list a.is-active{color:var(--cyan)}
/* Denuncias e Portal sao servicos, nao navegacao da pagina: menores, mais
   apagados e atras de um divisor, para nao disputar com o menu principal. */
.nav__list li.util:first-of-type{margin-left:12px;padding-left:24px;border-left:1px solid rgba(255,255,255,.22)}
.nav__list .util a{font-size:12px;color:#a9b8c4;letter-spacing:.8px}
.nav__list .util a:hover{color:#fff}
.nav__list .util a::after{background:rgba(255,255,255,.6)}
.nav__toggle{display:none;background:none;border:0;padding:12px;margin-right:8px;cursor:pointer}
.nav__toggle span{display:block;width:26px;height:2px;background:#fff;margin:5px 0;transition:transform .24s var(--ease),opacity .18s}
.nav__toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- hero ---------- */
/* dvh e nao vh: com vh, a barra do Safari no iPhone recolhe e o layout pula. */
.hero{position:relative;margin-top:var(--header-h);min-height:min(100dvh,860px);display:flex;align-items:center;overflow:hidden}
.hero__bg{position:absolute;inset:0;background:url('assets/hero.webp') center/cover no-repeat;transform:scale(1.04)}
.hero__bg::after{content:'';position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(11,20,28,.86) 0%,rgba(11,20,28,.6) 44%,rgba(11,20,28,.32) 100%)}
/* Grao fino sobre a foto: tira o aspecto de degrade liso demais. */
.hero::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.2;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}
.hero__inner{position:relative;z-index:2;width:100%;max-width:var(--container);margin:0 auto;padding:0 24px}
.hero__eyebrow{display:flex;align-items:center;gap:14px;color:#8fd4f0;font-size:13px;font-weight:600;letter-spacing:3px;text-transform:uppercase;margin-bottom:22px}
.hero__eyebrow::before{content:'';width:44px;height:2px;background:var(--cyan);flex:0 0 auto}
.hero h1{color:#fff;max-width:15ch;font-size:clamp(34px,6vw,68px);line-height:1.08;letter-spacing:-.02em;font-weight:800;
  text-shadow:0 2px 26px rgba(0,0,0,.4)}
.hero__sub{color:#d6e2ec;font-size:clamp(16px,1.7vw,19px);max-width:52ch;margin:24px 0 0;font-weight:300}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}
.hero__arrow{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);z-index:2;display:grid;place-items:center;
  width:52px;height:52px;opacity:.85;animation:flutua 2.6s var(--ease) infinite}
.hero__arrow:hover{opacity:1}
.hero__arrow svg{width:44px;height:26px}
@keyframes flutua{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,9px)}}

/* ---------- botoes ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--navy);color:#fff;border:2px solid var(--navy);
  padding:14px 30px;font:inherit;font-size:15px;font-weight:700;letter-spacing:.3px;text-decoration:none;cursor:pointer;
  transition:background .2s var(--ease),border-color .2s var(--ease),transform .12s var(--ease),box-shadow .2s var(--ease)}
.btn:hover{background:var(--navy-soft);border-color:var(--navy-soft);box-shadow:var(--shadow-md)}
/* Afunda 1px no clique: devolve a sensacao fisica do botao. */
.btn:active{transform:translateY(1px);box-shadow:var(--shadow-sm)}
.btn[disabled]{opacity:.6;cursor:progress;transform:none}
.btn--primario{background:var(--cyan);border-color:var(--cyan);color:#08222e}
.btn--primario:hover{background:#3cc3ef;border-color:#3cc3ef}
.btn--fantasma{background:transparent;border-color:rgba(255,255,255,.55);color:#fff}
.btn--fantasma:hover{background:rgba(255,255,255,.12);border-color:#fff}

/* ---------- titulos de secao ---------- */
.section{padding:112px 0 120px}
.section__head{margin-bottom:60px;max-width:46ch}
.section__head--centro{margin-left:auto;margin-right:auto;text-align:center}
.eyebrow{display:block;color:var(--cyan);font-size:12.5px;font-weight:700;letter-spacing:3px;text-transform:uppercase;margin-bottom:14px}
/* Era #c6c6c6 sobre branco: contraste 1.7:1, ilegivel e reprovado. Navy le. */
.section__head h2{font-size:clamp(30px,4.2vw,46px);color:var(--navy);letter-spacing:-.01em;line-height:1.12}
.section__head h2::after{content:'';display:block;width:74px;height:4px;background:var(--cyan);margin:22px 0 0}
.section__head--centro h2::after{margin-left:auto;margin-right:auto}
.section__head p{margin:22px 0 0;color:var(--ink-soft);font-size:17px;font-weight:300}

/* ---------- servicos ---------- */
.servicos{background:var(--paper)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
.card{background:#fff;display:flex;flex-direction:column;box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
/* overflow:hidden mora aqui: sem ele o zoom da foto vaza a moldura. */
.card__media{overflow:hidden}
.card img{aspect-ratio:4/3;object-fit:cover;width:100%;transition:transform .55s var(--ease)}
.card:hover img{transform:scale(1.06)}
.card__body{padding:30px 26px 34px;display:flex;flex-direction:column;flex:1;border-top:3px solid var(--cyan)}
.card h3{font-size:21px;color:var(--navy);margin-bottom:14px;font-weight:800;line-height:1.25}
.card p{font-size:15.5px;color:var(--ink);margin:0;font-weight:300}

/* ---------- sobre ---------- */
.sobre{background:var(--band)}
.sobre__grid{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;min-height:540px}
.sobre__text{background:#f7f7f7;padding:100px 64px 104px 0;display:flex;align-items:center}
.sobre__text .inner{max-width:480px;margin-left:auto;padding-left:24px}
.sobre__text h2{font-size:clamp(30px,4.2vw,46px);color:var(--navy);letter-spacing:-.01em;line-height:1.12}
.sobre__text h2::after{content:'';display:block;width:74px;height:4px;background:var(--cyan);margin:24px 0 30px}
.sobre__text p{font-size:17px;color:var(--ink);margin:0;font-weight:300;max-width:60ch}
.sobre__img{background:url('assets/sobre.webp') center/cover no-repeat;min-height:380px}

/* ---------- obras ---------- */
.section.obras{background:#fff;padding-top:0}
.obras__rule{height:46px;background:var(--navy)}
.obras__topo{padding-top:104px}
/* auto-fill em vez de 4 colunas fixas: a foto nao vira selo em tela larga
   nem tarja achatada em tela media. */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:16px}
.obra{margin:0;background:#fff;border:0;padding:0;cursor:zoom-in;text-align:left;font:inherit;color:inherit;display:flex;flex-direction:column;
  box-shadow:var(--shadow-sm);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.obra:hover,.obra:focus-visible{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.obra__media{position:relative;overflow:hidden}
.obra img{aspect-ratio:3/2;object-fit:cover;width:100%;background:#eee;transition:transform .55s var(--ease)}
.obra:hover img,.obra:focus-visible img{transform:scale(1.06)}
/* Lupa que so aparece no hover: diz que a foto abre, sem poluir a grade. */
.obra__media::after{content:'';position:absolute;inset:0;opacity:0;transition:opacity .28s var(--ease);
  background:rgba(30,45,59,.34) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='14' cy='14' r='9'/%3E%3Cpath d='M21 21l9 9M14 10v8M10 14h8'/%3E%3C/svg%3E") center/34px no-repeat}
.obra:hover .obra__media::after,.obra:focus-visible .obra__media::after{opacity:1}
.obra figcaption{background:var(--field);padding:13px 15px;min-height:58px;display:flex;flex-direction:column;justify-content:center;flex:1}
.obra figcaption b{font-size:14px;font-weight:700;color:var(--navy);line-height:1.35}
.obra figcaption small{font-size:12.5px;color:var(--ink-soft);line-height:1.35;margin-top:3px}
.obra[hidden]{display:none}
.mais__wrap{display:flex;justify-content:center}
.mais{display:inline-flex;align-items:center;gap:10px;margin:48px 0 0;background:none;border:2px solid var(--navy-soft);color:var(--navy-soft);
  font:inherit;font-size:14px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;cursor:pointer;padding:13px 30px;
  transition:background .2s var(--ease),color .2s var(--ease),transform .12s var(--ease)}
.mais:hover{background:var(--navy-soft);color:#fff}
.mais:active{transform:translateY(1px)}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;z-index:90;background:rgba(10,15,20,.975);display:none;align-items:center;justify-content:center;padding:24px}
.lb.is-open{display:flex;animation:surge .22s var(--ease)}
@keyframes surge{from{opacity:0}to{opacity:1}}
.lb img{max-width:min(1400px,92vw);max-height:80vh;object-fit:contain}
.lb__cap{position:absolute;left:0;right:0;bottom:22px;text-align:center;color:#fff;font-size:14px;padding:0 60px}
.lb__cap small{display:block;color:#b9c4cf;font-size:12.5px;margin-top:4px}
.lb__btn{position:absolute;background:rgba(255,255,255,.1);border:0;color:#fff;font-size:26px;line-height:1;width:48px;height:48px;border-radius:50%;cursor:pointer;display:grid;place-items:center;
  transition:background .2s var(--ease),transform .12s var(--ease)}
.lb__btn:hover{background:rgba(255,255,255,.24)}
.lb__close:active{transform:scale(.94)}
.lb__prev{left:22px;top:50%;transform:translateY(-50%)}
.lb__next{right:22px;top:50%;transform:translateY(-50%)}
.lb__prev:active,.lb__next:active{transform:translateY(-50%) scale(.94)}
.lb__close{right:22px;top:22px}

/* ---------- instagram ---------- */
.instagram{background:#fff}
.instagram[hidden]{display:none}
/* Quadrados: e o formato que o Instagram entrega e o que o olho espera dele. */
.ig-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.ig-item{position:relative;display:block;overflow:hidden;background:#eee;aspect-ratio:1;box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.ig-item:hover,.ig-item:focus-visible{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.ig-item img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)}
.ig-item:hover img,.ig-item:focus-visible img{transform:scale(1.06)}
/* Marca de video no canto: diz que o post e um reel sem precisar de legenda. */
.ig-item__video{position:absolute;top:10px;right:10px;width:22px;height:22px;
  background:rgba(16,24,32,.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23fff'%3E%3Cpath d='M2 1l9 5-9 5z'/%3E%3C/svg%3E") center/11px no-repeat;border-radius:4px}

/* ---------- contato ---------- */
.contato{background:var(--paper)}
.contato__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:64px}
.contato h3{font-size:23px;color:var(--navy);margin-bottom:12px;font-weight:800}
.contato p{font-size:16px;color:var(--ink);font-weight:300}
.form{display:grid;gap:12px;margin-top:26px}
.form input,.form textarea{width:100%;background:#fff;border:1px solid var(--line);border-bottom:2px solid #dfe4e9;padding:14px 15px;font:inherit;font-size:15px;color:var(--ink);border-radius:0;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.form textarea{min-height:140px;resize:vertical}
.form input::placeholder,.form textarea::placeholder{color:#9b9b9b}
.form input:focus,.form textarea:focus{outline:0;border-color:var(--cyan);border-bottom-color:var(--cyan);box-shadow:0 0 0 3px rgba(30,176,224,.16)}
.form__hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form__actions{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:10px;flex-wrap:wrap}
.form__msg{font-size:14px;min-height:20px;flex:1 1 220px}
.form__msg.ok{color:#1d7a4c;font-weight:600}
.form__msg.erro{color:#b3261e}
/* Link de socorro (abre o e-mail do visitante) quando o envio falha. */
.form__msg a{color:inherit;text-decoration:underline;font-weight:700}
.escritorio__bloco{margin-bottom:30px}
.escritorio__rotulo{display:block;font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--cyan);margin-bottom:8px}
.escritorio address{font-style:normal;font-size:16px;color:var(--ink);line-height:1.8;font-weight:300}
.escritorio a{color:var(--navy-soft)}
.social{display:flex;gap:12px;margin-top:6px}
.social a{width:44px;height:44px;display:grid;place-items:center;background:var(--navy-soft);color:#fff;
  transition:background .2s var(--ease),transform .18s var(--ease)}
.social a:hover{background:var(--cyan);transform:translateY(-3px)}
.social svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linejoin:round}

/* ---------- whatsapp flutuante ---------- */
/* Verde do WhatsApp de proposito: aqui reconhecimento vale mais que a paleta.
   z-index abaixo do lightbox (90), para nao flutuar sobre a foto ampliada. */
.whats{position:fixed;right:20px;bottom:20px;z-index:70;width:58px;height:58px;
  display:grid;place-items:center;background:#25d366;color:#fff;border-radius:50%;
  box-shadow:0 6px 20px rgba(22,34,45,.28);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.whats:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 10px 26px rgba(22,34,45,.34)}
.whats:active{transform:translateY(0) scale(.97)}
.whats svg{width:31px;height:31px;fill:currentColor}
@media (max-width:520px){.whats{right:14px;bottom:14px;width:52px;height:52px}.whats svg{width:28px;height:28px}}

/* ---------- consentimento ---------- */
/* Barra no rodape, nao modal: bloquear a leitura do site para pedir permissao
   de MEDICAO seria desproporcional. z-index abaixo do lightbox. */
.cookies{position:fixed;left:0;right:0;bottom:0;z-index:75;
  display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px;
  padding:18px 22px;background:var(--navy);color:#e7eef4;
  box-shadow:0 -6px 24px rgba(22,34,45,.26)}
.cookies[hidden]{display:none}
.cookies__texto{flex:1 1 320px;min-width:0}
.cookies__texto strong{display:block;font-size:15px;margin-bottom:4px;color:#fff}
.cookies__texto p{margin:0;font-size:13.5px;line-height:1.55;color:#c3d0da;font-weight:300;max-width:70ch}
.cookies__texto a{color:var(--cyan)}
.cookies__acoes{display:flex;gap:10px;flex:0 0 auto}
.cookies .btn{padding:11px 22px;font-size:14px}
/* O botao flutuante do WhatsApp sobe enquanto a barra estiver na tela. */
body:has(.cookies:not([hidden])) .whats{bottom:118px}
@media (max-width:560px){
  .cookies{padding:16px}
  .cookies__acoes{width:100%}
  .cookies__acoes .btn{flex:1}
  body:has(.cookies:not([hidden])) .whats{bottom:168px}
}

/* ---------- rodape ---------- */
.footer{background:var(--navy-deep);color:#cdd6de;padding:64px 0 34px;font-size:14px}
.footer__grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:44px;align-items:start}
.footer__brand{background:#fff;display:inline-flex;align-items:center;gap:10px;padding:12px 18px;text-decoration:none}
.footer__brand img{width:110px}
.footer__brand span{font-size:17px;font-weight:800;color:var(--ink)}
.footer__nota{margin:20px 0 0;max-width:34ch;color:#93a2b1;font-size:13.5px;font-weight:300;line-height:1.7}
.footer h4{font-size:13px;letter-spacing:2px;text-transform:uppercase;color:#fff;margin-bottom:16px;font-weight:700}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.footer a{color:#cdd6de;text-decoration:none;transition:color .2s var(--ease)}
.footer a:hover{color:var(--cyan)}
.footer__bottom{border-top:1px solid rgba(255,255,255,.13);margin-top:48px;padding-top:24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:#93a2b1;font-size:13px}

/* ---------- revelacao no scroll ---------- */
/* Entra uma vez so, deslocando no eixo Y. Usa transform/opacity para nao
   disparar layout. Quem pede menos movimento ve tudo ja posicionado (no fim). */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.is-in{opacity:1;transform:none}

/* ---------- responsivo ---------- */
@media (max-width:900px){
  :root{--header-h:74px}
  .nav__toggle{display:block}
  .nav__list{position:fixed;top:var(--header-h);left:0;right:0;background:var(--navy);flex-direction:column;align-items:stretch;gap:0;padding:8px 0 18px;transform:translateY(-130%);transition:transform .3s var(--ease);box-shadow:0 18px 30px rgba(22,34,45,.3)}
  .nav__list.is-open{transform:translateY(0)}
  .nav__list li{border-top:1px solid rgba(255,255,255,.08)}
  .nav__list a{display:block;padding:15px 24px;font-size:15px}
  .nav__list a::after{display:none}
  .nav__list li.util:first-of-type{margin-left:0;padding-left:0;border-left:0}
  .nav__list .util a{font-size:14px}
  .header.is-scrolled{height:var(--header-h)}
  .header__brand{padding:0 16px}
  .header__brand img{width:98px}
  .header.is-scrolled .header__brand img{width:98px}
  .header__brand span{font-size:16px}
  .hero{min-height:min(100dvh,720px)}
  .hero h1{max-width:none}
  .section{padding:78px 0 84px}
  .section__head{margin-bottom:44px}
  .obras__topo{padding-top:78px}
  .cards{grid-template-columns:1fr;gap:22px}
  .sobre__grid{grid-template-columns:1fr}
  .sobre__text{padding:66px 0}
  .sobre__text .inner{max-width:none;margin:0;padding:0 24px}
  .sobre__img{min-height:320px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
  .ig-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
  .contato__grid{grid-template-columns:1fr;gap:48px}
  .footer__grid{grid-template-columns:1fr;gap:34px}
  .lb__prev{left:8px}.lb__next{right:8px}
}
@media (max-width:520px){
  .grid{grid-template-columns:1fr 1fr;gap:10px}
  .header__brand span{display:none}
  .hero__cta{flex-direction:column;align-items:stretch}
  .hero__cta .btn{width:100%}
  .form__actions{justify-content:stretch}
  .form__actions .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
  .reveal{opacity:1;transform:none}
}