/* JAH · site institucional
   Marca: laranja #EE5034, azul-marinho #081C31 (cores do logo final, 29/09/2026), cinza #949599.
   Base clara e limpa, com toques modernos na medida: botões e etiquetas em forma de seta (a seta do
   símbolo), títulos na Archivo Expanded, entrada suave das seções, números que contam e a planta azul do projeto.
   Ajustes de layout do designer em 28/09/2026 (documento "Ajustes no layout site JAH" e protótipo no Figma).
   Sem estilo inline em lugar nenhum: a CSP do site proíbe. */

@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/poppins-400.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/poppins-500.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/poppins-600.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/poppins-700.woff2) format('woff2')}
/* Archivo Expanded Black (Google Fonts, licença SIL Open Font License 1.1), escolhida pelo designer:
   só nos títulos grandes e nos números. Servida pelo próprio site, em dois pedaços (o de acentos do português primeiro). */
@font-face{font-family:'Archivo Expanded';font-style:normal;font-weight:900;font-display:swap;src:url(fonts/archivo-expandida-900-latin.woff2) format('woff2');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:'Archivo Expanded';font-style:normal;font-weight:900;font-display:swap;src:url(fonts/archivo-expandida-900-latin-ext.woff2) format('woff2');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{
  --marinho:#081C31;
  --marinho-2:#12283F;
  --marinho-fundo:#07131F;
  --laranja:#EE5034;          /* a cor da marca: detalhes e texto grande */
  --laranja-botao:#D5411F;    /* um tom abaixo: texto branco passa no contraste AA */
  --laranja-botao-hover:#BC3616;
  --laranja-texto:#C73C20;    /* laranja para texto pequeno em fundo claro */
  --aco:#F4F6F9;
  --aco-2:#E3E8EE;
  --aco-3:#CBD3DD;
  --tinta:#0F1B2A;
  --tinta-2:#4B5868;
  --claro-2:#C9D4E0;
  --raio:16px;
  --max:1200px;
  --corte:11px;
  --fonte-titulo:'Archivo Expanded','Arial Black',system-ui,sans-serif;
  --topo:72px;
  --curva:cubic-bezier(.2,.7,.2,1);
  --sombra:0 24px 50px -28px rgba(11,29,49,.35);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--topo) + 28px)}
body{
  margin:0;background:#fff;color:var(--tinta);
  font:400 1rem/1.65 'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.02em;line-height:1.15}
p{margin:0}
a{color:inherit}
ul,ol{margin:0}
figure{margin:0}
button,input,select,textarea{font:inherit}
[hidden]{display:none!important}
::selection{background:rgba(239,80,51,.22)}
:focus-visible{outline:3px solid var(--laranja);outline-offset:3px;border-radius:6px}
.nw{white-space:nowrap}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.pular{position:absolute;left:12px;top:-80px;z-index:100;background:var(--laranja-botao);color:#fff;padding:10px 16px;border-radius:10px;font-weight:600;text-decoration:none}
.pular:focus{top:12px}

.ic{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ic-cheio{fill:currentColor;stroke:none}
/* caixa de ícone com os cantos cortados, igual aos botões */
.ic-caixa{width:52px;height:52px;flex:none;display:grid;place-items:center;color:var(--laranja-texto);background:rgba(239,80,51,.1);clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.ic-caixa .ic{width:26px;height:26px}

.container{width:min(100% - 32px,var(--max));margin-inline:auto}
/* overflow clip (e não hidden): corta os desenhos do fundo sem quebrar o position:sticky */
.secao{padding:clamp(60px,9vw,120px) 0;position:relative;overflow-x:clip}
.secao > .container{position:relative;z-index:1}
/* páginas sem abertura (privacidade e 404): o conteúdo começa abaixo do menu, que fica fixo por cima */
main > .secao:first-child{padding-top:calc(var(--topo) + clamp(48px,7vw,96px))}
.secao-aco{background:var(--aco)}
.secao-escura{background:var(--marinho);color:#fff}
.ancora{display:block;height:0}

/* ===== detalhes técnicos no fundo: grade de desenho, pontos e diagramas de automação ===== */
.fundo-grade::before,.fundo-pontos::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none}
/* grade de papel de engenharia, que some aos poucos a partir de um canto */
.fundo-grade::before{
  background-image:linear-gradient(rgba(11,29,49,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(11,29,49,.06) 1px,transparent 1px);
  background-size:44px 44px;background-position:-1px -1px;
  -webkit-mask-image:radial-gradient(ellipse 62% 75% at 100% 0%,#000 8%,transparent 70%);
  mask-image:radial-gradient(ellipse 62% 75% at 100% 0%,#000 8%,transparent 70%);
}
.grade-esquerda::before{-webkit-mask-image:radial-gradient(ellipse 62% 75% at 0% 0%,#000 8%,transparent 70%);mask-image:radial-gradient(ellipse 62% 75% at 0% 0%,#000 8%,transparent 70%)}
.grade-baixo::before{-webkit-mask-image:radial-gradient(ellipse 62% 75% at 100% 100%,#000 8%,transparent 70%);mask-image:radial-gradient(ellipse 62% 75% at 100% 100%,#000 8%,transparent 70%)}
.grade-escura::before{background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px)}
/* pontos de gabarito nas seções cinza */
.fundo-pontos::before{
  background-image:radial-gradient(rgba(11,29,49,.14) 1.1px,transparent 1.5px);background-size:22px 22px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 58%);mask-image:linear-gradient(180deg,#000,transparent 58%);
}
/* ilustração técnica ao lado do título de Serviços */
.cabeca-arte{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:32px clamp(40px,5vw,88px);align-items:center}
.cabeca-arte h2{max-width:20ch}
.cabeca-ilustra{min-width:0}
/* o croqui de processo (P&ID): tanque, bomba, válvula e instrumentos, com um pulso na tubulação */
.pid{display:block;width:100%;max-width:540px;height:auto;margin-left:auto;overflow:visible}
.pid-cano{fill:none;stroke:#CDD6E0;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.pid-fluxo{fill:none;stroke:var(--laranja);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:6 94;animation:corre 6.5s linear infinite}
.pid-equip{fill:#fff;stroke:#A9B6C5;stroke-width:1.6;stroke-linejoin:round}
.pid-haste,.pid-div{fill:none;stroke:#A9B6C5;stroke-width:1.4}
.pid-seta{fill:none;stroke:#A9B6C5;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pid-sinal{fill:none;stroke:#BAC6D3;stroke-width:1.3;stroke-dasharray:3 4}
.pid-vivo{stroke:var(--laranja);opacity:.8;animation:sinal 1.1s linear infinite}
.pid-nivel{fill:none;stroke:var(--laranja);stroke-width:1.4;opacity:.55}
.pid text{font-family:'Poppins',system-ui,sans-serif;font-size:9px;font-weight:600;fill:#8C9AAA;text-anchor:middle;letter-spacing:.02em}
@keyframes corre{to{stroke-dashoffset:-100}}
@keyframes sinal{to{stroke-dashoffset:-14}}
@keyframes pisca{0%,100%{opacity:.25}50%{opacity:1}}

/* ===== Serviços: da primeira ideia ao projeto completo (pedido do João em 29/09/2026) =====
   O croqui aparece sozinho, encolhe para um canto e o fluxograma real da planta surge em volta dele; depois
   volta e recomeça. Só roda com a seção na tela (o site.js pausa fora dela). Sem animação, fica o quadro
   final: a ideia destacada dentro do projeto completo.
   30/09/2026, a pedido do João: a virada começa logo que o quadro aparece (antes esperava 4,5 s e quem rolava
   a tela não via). Ciclo de 10 s: 0,3 s de croqui, 1,3 s de virada, 6,8 s do projeto completo, 0,8 s de volta
   e 0,8 s de croqui antes de recomeçar. */
.evolucao{--ciclo:10s;max-width:560px;margin-left:auto}
.evo-quadro{position:relative;aspect-ratio:1440/1031;overflow:hidden;border-radius:14px;background:#fff;border:1px solid var(--aco-2);box-shadow:0 34px 64px -40px rgba(11,29,49,.5)}
.evo-quadro::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(11,29,49,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(11,29,49,.045) 1px,transparent 1px);background-size:22px 22px}
.evo-planta{position:absolute;inset:0;transform-origin:80% 78%}
.evo-planta img{width:100%;height:100%;object-fit:cover}
/* a ideia: cheia no começo; no fim, encolhida no canto de baixo, dentro da moldura laranja */
.evo-ideia{position:absolute;inset:0;display:grid;place-items:center;padding:6% 7%;transform-origin:93% 90%;transform:scale(.3)}
.evo-ideia .pid{max-width:none;margin:0}
.evolucao .pid-equip,.evolucao .pid-haste,.evolucao .pid-div,.evolucao .pid-seta{stroke:#1B3556}
.evolucao .pid-cano{stroke:#5B7391}
.evo-marca{position:absolute;left:65.2%;top:66%;width:29.6%;height:23.5%;border:1.5px solid var(--laranja);border-radius:8px;background:rgba(255,255,255,.93);box-shadow:0 10px 24px -14px rgba(11,29,49,.5)}
.evo-marca small{position:absolute;left:10px;top:-10px;padding:2px 8px;border-radius:4px;background:var(--laranja-botao);color:#fff;font-size:.62rem;font-weight:600;line-height:1.5;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
/* legenda: 1 A primeira ideia, 2 O projeto completo */
.evo-legenda{display:flex;align-items:center;gap:12px;margin-top:16px;font-size:.82rem;font-weight:600;color:var(--tinta-2)}
.evo-passo{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.evo-passo b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--laranja);background:#fff;color:var(--laranja-texto);font-size:.72rem}
.evo-p2{color:var(--marinho)}
.evo-p2 b{background:var(--laranja-botao);border-color:var(--laranja-botao);color:#fff}
.evo-trilha{position:relative;flex:1;min-width:24px;height:2px;border-radius:2px;background:var(--aco-3);overflow:hidden}
.evo-trilha::after{content:"";position:absolute;inset:0;background:var(--laranja);transform-origin:0 50%}
/* o ciclo */
.evolucao .evo-planta{animation:evo-planta var(--ciclo) cubic-bezier(.45,0,.2,1) infinite}
.evolucao .evo-ideia{animation:evo-ideia var(--ciclo) cubic-bezier(.65,0,.3,1) infinite}
.evolucao .evo-ideia .pid-equip,.evolucao .evo-ideia .pid-haste,.evolucao .evo-ideia .pid-div,.evolucao .evo-ideia .pid-seta{animation:evo-traco var(--ciclo) linear infinite}
.evolucao .evo-ideia .pid-cano{animation:evo-cano var(--ciclo) linear infinite}
.evolucao .evo-marca{animation:evo-marca var(--ciclo) linear infinite}
.evolucao .evo-trilha::after{animation:evo-trilha var(--ciclo) cubic-bezier(.65,0,.3,1) infinite}
.evolucao .evo-p1{animation:evo-p1 var(--ciclo) linear infinite}
.evolucao .evo-p2{animation:evo-p2 var(--ciclo) linear infinite}
.evolucao .evo-p1 b{animation:evo-p1-b var(--ciclo) linear infinite}
.evolucao .evo-p2 b{animation:evo-p2-b var(--ciclo) linear infinite}
@keyframes evo-planta{0%,3%{opacity:0;transform:scale(1.4)}16%,84%{opacity:1;transform:none}92%,100%{opacity:0;transform:scale(1.4)}}
@keyframes evo-ideia{0%,3%{transform:none}15%,84%{transform:scale(.3)}92%,100%{transform:none}}
@keyframes evo-traco{0%,4%{stroke:#A9B6C5}13%,84%{stroke:#1B3556}91%,100%{stroke:#A9B6C5}}
@keyframes evo-cano{0%,4%{stroke:#CDD6E0}13%,84%{stroke:#5B7391}91%,100%{stroke:#CDD6E0}}
@keyframes evo-marca{0%,12%{opacity:0}17%,82%{opacity:1}85%,100%{opacity:0}}
@keyframes evo-trilha{0%,3%{transform:scaleX(0)}15%,84%{transform:scaleX(1)}92%,100%{transform:scaleX(0)}}
@keyframes evo-p1{0%,8%{color:var(--marinho)}12%,88%{color:var(--tinta-2)}92%,100%{color:var(--marinho)}}
@keyframes evo-p2{0%,8%{color:var(--tinta-2)}12%,88%{color:var(--marinho)}92%,100%{color:var(--tinta-2)}}
@keyframes evo-p1-b{0%,8%{background:var(--laranja-botao);border-color:var(--laranja-botao);color:#fff}12%,88%{background:#fff;border-color:var(--laranja);color:var(--laranja-texto)}92%,100%{background:var(--laranja-botao);border-color:var(--laranja-botao);color:#fff}}
@keyframes evo-p2-b{0%,8%{background:#fff;border-color:var(--aco-3);color:var(--tinta-2)}12%,88%{background:var(--laranja-botao);border-color:var(--laranja-botao);color:#fff}92%,100%{background:#fff;border-color:var(--aco-3);color:var(--tinta-2)}}
/* com JavaScript, o ciclo espera o quadro aparecer (e para quando ele sai da tela) */
.js .evolucao:not(.em-cena) *,.js .evolucao:not(.em-cena) *::after{animation-play-state:paused}

/* ===== Automação: lógica de CLP em ladder, no estilo dos programas atuais =====
   Desenhada em vetor a partir da imagem que o João mandou (29/09/2026), sem o nome do programa. O site.js
   simula o ciclo: contatos fecham, o temporizador conta, a bomba liga e a corrente corre nos fios ligados.
   O que está "vivo" fica verde; sem JavaScript, fica o retrato da linha rodando. */
.clp{margin:0 0 clamp(28px,4vw,44px);border-radius:var(--raio);background:#0A1829;border:1px solid rgba(120,170,230,.18);box-shadow:0 40px 80px -52px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.04);overflow:hidden}
.clp-topo{display:flex;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid rgba(120,170,230,.14);font-size:.9rem;font-weight:500;color:#DCE6F2;white-space:nowrap;overflow:hidden}
.clp-topo i{flex:none;width:7px;height:7px;margin:0 4px;border-top:1.5px solid #7F93AA;border-right:1.5px solid #7F93AA;transform:rotate(45deg)}
.clp-led{flex:none;width:11px;height:11px;border-radius:50%;background:#FF4D3A;box-shadow:0 0 10px rgba(255,77,58,.8);animation:pisca 2s ease-in-out infinite}
.clp-corpo{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:rgba(120,170,230,.35) transparent}
.clp-corpo:focus-visible{outline-offset:-3px}
.clp-corpo svg{display:block;width:100%;min-width:760px;height:auto;padding:6px 10px 12px}
.clp text{font-family:'Poppins',system-ui,sans-serif;text-anchor:middle}
.clp .degrau{font-size:15px;font-weight:500;fill:#7F93AA}
.clp .trilho{fill:none;stroke:#8FA8C8;stroke-width:3.5;opacity:.75}
.clp .fio{fill:none;stroke:#8FA8C8;stroke-width:2.6;opacity:.5;transition:stroke .3s,opacity .3s}
.clp .corrente{fill:none;stroke:#8DFFBE;stroke-width:3;stroke-linecap:round;stroke-dasharray:6 26;opacity:0;transition:opacity .3s}
.clp .rede.vivo .fio{stroke:#3DDC84;opacity:1}
.clp .rede.vivo .corrente{opacity:.85;animation:clp-corre .9s linear infinite}
@keyframes clp-corre{to{stroke-dashoffset:-32}}
.clp .k-barra,.clp .b-arco{fill:none;stroke:#3FA2FF;stroke-width:4;stroke-linecap:round;transition:stroke .25s}
.clp .k.vivo .k-barra,.clp .b.vivo .b-arco{stroke:#3DDC84}
.clp .b.vivo .b-arco{stroke-width:4.6}
.clp .alarme .k-barra,.clp .alarme .b-arco{stroke:#FF5A4E}
.clp .k-tag{font-size:17px;font-weight:500;fill:#E3EBF5}
.clp .k-end{font-size:15px;fill:#9FB0C3}
.clp .bl-caixa{fill:#0F2744;stroke:#2F7FE0;stroke-width:2;transition:stroke .3s,fill .3s}
.clp .bl.vivo .bl-caixa{stroke:#5DB0FF;fill:#123056}
.clp .bl-tit{font-size:17px;font-weight:600;fill:#fff}
.clp .bl-div,.clp .bl-pino,.clp .pino-l{fill:none;stroke:#2F7FE0;stroke-width:1.6}
.clp .p-rot,.clp .p-val{font-size:14px;text-anchor:start}
.clp .p-rot{fill:#AFC0D3}
.clp .p-val{fill:#fff}
.clp .p-val.num{fill:#59B6FF}
.clp .pino-t{font-size:14px;fill:#59B6FF;transition:fill .25s}
.clp .pino.vivo .pino-t{fill:#3DDC84}
.dica-clp{display:none}

/* rótulo acima do título: um losango pequeno, sem traço */
.olho{display:inline-flex;align-items:center;gap:10px;font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--laranja-texto)}
.olho::before{content:"";width:7px;height:7px;flex:none;background:var(--laranja);transform:rotate(45deg)}
.secao-escura .olho,.hero .olho{color:var(--laranja)}
.olho-status{gap:10px;padding:7px 14px;border:1px solid rgba(239,80,51,.45);background:rgba(239,80,51,.1);border-radius:999px}
.olho-status::before{display:none}
.ponto{width:8px;height:8px;flex:none;border-radius:50%;background:var(--laranja)}

/* número da seção dentro de uma seta laranja, no lugar do losango (pedido do designer) */
.olho-num{gap:14px}
.olho-num::before{display:none}
.olho-num b{display:inline-grid;place-items:center;min-width:36px;height:27px;padding:1px 14px 0 9px;font:900 .98rem/1 var(--fonte-titulo);letter-spacing:0;color:#fff;background:var(--laranja-botao);clip-path:polygon(0 0,calc(100% - 9px) 0,100% 50%,calc(100% - 9px) 100%,0 100%)}

/* ===== cabeçalhos das seções: à esquerda e em composições diferentes, sem espremer o título ===== */
.cabeca{position:relative;isolation:isolate;margin:0 0 clamp(40px,5vw,64px)}
.cabeca h2,.titulo{margin-top:18px;font-family:var(--fonte-titulo);font-weight:900;font-size:clamp(1.6rem,1rem + 2.2vw,3rem);line-height:1.08;letter-spacing:-.01em;color:var(--marinho);text-wrap:balance}
.secao-escura .cabeca h2,.secao-escura .titulo{color:#fff}
.lead{margin-top:16px;font-size:clamp(1.02rem,.96rem + .3vw,1.15rem);color:var(--tinta-2);max-width:62ch}
.secao-escura .lead{color:var(--claro-2)}
p,li,figcaption{text-wrap:pretty}
/* botão de ação colado ao texto de abertura, como na abertura do site */
.acoes,.acoes-secao{margin-top:28px;display:flex;flex-wrap:wrap;gap:14px}
/* dividido: título à esquerda; texto e botão à direita, alinhados pela base */
.cabeca-dividida{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:24px clamp(40px,6vw,104px);align-items:end}
.cabeca-dividida h2{max-width:20ch}
.cabeca-apoio{padding-bottom:4px}
.cabeca-apoio .lead{margin-top:0}
.cabeca-apoio .acoes-secao{margin-top:24px}
/* linha: título e botão lado a lado */
.cabeca-linha{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 48px}
.cabeca-linha h2{max-width:19ch}
.cabeca-linha .acoes-secao{margin-top:0}
.cabeca-coluna h2{max-width:22ch}
/* número grande e vazado no canto de cima, no espaço que sobra à direita */
.cabeca[data-num]::after{
  content:attr(data-num);position:absolute;right:-.03em;top:-.74em;z-index:-1;pointer-events:none;
  font-size:clamp(5.5rem,3rem + 7.5vw,11rem);font-weight:700;line-height:1;letter-spacing:-.05em;
  color:transparent;-webkit-text-stroke:1.5px rgba(11,29,49,.08);
}
.secao-escura .cabeca[data-num]::after{-webkit-text-stroke-color:rgba(255,255,255,.09)}
/* páginas de texto e 404: centralizado */
.cabeca-centro{max-width:820px;margin-inline:auto;text-align:center}
.cabeca-centro .lead{margin-inline:auto}
.cabeca-centro .acoes{justify-content:center}

/* ===== botões em forma de seta (pedido do designer): ponta à direita e um reflexo de luz ao passar o mouse.
   O botão de contorno que vem logo depois do principal ganha um encaixe à esquerda e os dois formam uma
   corrente de setas. A forma fica nas camadas ::before e ::after, e o botão em si não é cortado. ===== */
.btn{
  --ponta:17px;--entalhe:0px;
  position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 calc(22px + var(--ponta)) 0 calc(24px + var(--entalhe));border:0;background:none;cursor:pointer;
  font-weight:600;font-size:.98rem;line-height:1.2;text-decoration:none;
  transition:transform .3s var(--curva),filter .3s,color .3s;
}
.btn::before,.btn::after{content:"";position:absolute;inset:0;clip-path:polygon(0 0,calc(100% - var(--ponta)) 0,100% 50%,calc(100% - var(--ponta)) 100%,0 100%,var(--entalhe) 50%)}
.btn::before{z-index:-2;transition:background-color .3s}
.btn::after{z-index:-1;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.4) 50%,transparent 65%);background-size:260% 100%;background-position:130% 0;transition:background-position .9s var(--curva)}
.btn:hover{transform:translateY(-2px)}
.btn:hover::after{background-position:-30% 0}
.btn:active{transform:translateY(0)}
.btn .ic{width:20px;height:20px;transition:transform .3s var(--curva)}
.btn:hover .ic-seta{transform:translateX(4px)}
.btn-primario{color:#fff;filter:drop-shadow(0 8px 14px rgba(213,65,31,.22))}
.btn-primario::before{background:var(--laranja-botao)}
.btn-primario:hover::before{background:var(--laranja-botao-hover)}
/* contorno: a camada de baixo é a borda e a de cima, 1,5 px menor, é o preenchimento */
.btn-claro,.btn-contorno{color:var(--marinho)}
.btn-claro::before,.btn-contorno::before{background:var(--aco-3)}
.btn-claro::after,.btn-contorno::after{inset:1.5px;background:#fff;transition:background-color .3s}
.btn-claro:hover,.btn-contorno:hover{color:#fff}
.btn-claro:hover::before,.btn-contorno:hover::before,.btn-claro:hover::after,.btn-contorno:hover::after{background:var(--marinho)}
.hero .btn-claro,.secao-escura .btn-claro{color:#fff}
.hero .btn-claro::before,.secao-escura .btn-claro::before{background:rgba(255,255,255,.5)}
/* preenchimento opaco (um azul um pouco mais claro que o fundo): se fosse transparente, a camada da borda apareceria por baixo */
.hero .btn-claro::after,.secao-escura .btn-claro::after{background:#1A2C41}
.hero .btn-claro:hover::before,.secao-escura .btn-claro:hover::before{background:#fff}
.hero .btn-claro:hover::after,.secao-escura .btn-claro:hover::after{background:#26405C}
/* corrente de setas: o contorno encaixa na ponta do botão principal, com 6 px de folga */
.btn-primario + .btn-claro{--entalhe:var(--ponta);margin-left:calc(6px - var(--ponta) - 14px)}

/* ===== topo ===== */
.progresso{position:fixed;left:0;top:0;z-index:80;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(var(--p,0));background:var(--laranja);pointer-events:none}
/* topo minimalista, de vidro fosco (pedido do designer). Na página inicial ele fica por cima da abertura
   quase transparente (branco a 1%, com desfoque) e com o texto branco. Quando a página rola para fora da
   abertura, o vidro fica mais branco e o texto escuro, para o menu continuar legível sobre qualquer seção. */
.topo{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(255,255,255,.82);-webkit-backdrop-filter:saturate(160%) blur(16px);backdrop-filter:saturate(160%) blur(16px);border-bottom:1px solid rgba(11,29,49,.08);transition:background-color .35s,border-color .35s,box-shadow .35s}
.topo.rolou{box-shadow:0 10px 30px -22px rgba(11,29,49,.4)}
/* com o menu do celular aberto, o topo fica branco sólido, igual à lista que desce dele */
.topo.aberto{background:#fff}
.topo-linha{display:flex;align-items:center;justify-content:space-between;gap:20px;height:var(--topo)}
.marca{display:inline-flex;align-items:center;flex:none}
.marca img{height:28px;width:auto}
.marca .logo-claro{display:none}
.menu{display:flex;align-items:center;gap:2px}
/* cada item fica laranja ao passar o mouse; o da seção em que a pessoa está ganha um traço laranja embaixo */
.menu a{color:var(--tinta-2);text-decoration:none;font-weight:500;font-size:.94rem;padding:10px 12px;white-space:nowrap;transition:color .2s,box-shadow .2s}
.menu a:hover{color:var(--laranja-texto)}
.menu a.atual{color:var(--marinho);box-shadow:inset 0 -2px 0 var(--laranja)}
.menu a.atual:hover{color:var(--laranja-texto)}
.topo-acoes{display:flex;align-items:center;gap:10px}
.topo .btn{--ponta:13px;min-height:44px;padding:0 calc(16px + var(--ponta)) 0 18px;font-size:.92rem}
.menu-botao{display:none;width:44px;height:44px;border-radius:10px;border:1px solid var(--aco-3);background:#fff;color:var(--marinho);cursor:pointer;place-items:center;transition:background-color .35s,border-color .35s,color .35s}
/* por cima da abertura (a classe vem no HTML e o site.js tira ao rolar). Só vale com JavaScript ligado:
   sem ele, o topo fica sempre no vidro claro, que é legível em qualquer parte da página. */
@media (scripting:enabled){
  .topo.na-abertura:not(.aberto){background:rgba(255,255,255,.01);border-bottom-color:rgba(255,255,255,.16);box-shadow:none}
  .topo.na-abertura:not(.aberto) .menu a,.topo.na-abertura:not(.aberto) .menu a.atual{color:#fff}
  .topo.na-abertura:not(.aberto) .menu a:hover{color:var(--laranja)}
  .topo.na-abertura:not(.aberto) .logo-escuro{display:none}
  .topo.na-abertura:not(.aberto) .logo-claro{display:block}
  .topo.na-abertura:not(.aberto) .menu-botao{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.4);color:#fff}
}
.menu-botao .ic{width:24px;height:24px}
.menu-botao .fechar{display:none}
.topo.aberto .menu-botao .abrir{display:none}
.topo.aberto .menu-botao .fechar{display:block}

/* ===== abertura ===== */
/* a abertura começa no topo da página, por baixo do menu de vidro: altura e respiro de cima contam o menu */
.hero{position:relative;overflow:hidden;background:var(--marinho);color:#fff;min-height:min(100svh,calc(860px + var(--topo)));display:flex;align-items:center}
.hero > .container{width:min(100% - 32px,var(--max))}
.hero-foto{position:absolute;inset:-4% 0;will-change:transform}
.hero-foto img{width:100%;height:100%;object-fit:cover;object-position:62% 50%;animation:aproxima 14s var(--curva) both}
.hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(11,29,49,.96) 0%,rgba(11,29,49,.86) 38%,rgba(11,29,49,.5) 68%,rgba(11,29,49,.28) 100%)}
.hero-conteudo{position:relative;z-index:2;padding:calc(var(--topo) + clamp(36px,7vh,88px)) 0 clamp(140px,19vh,190px)}
.hero h1{margin-top:20px;max-width:21ch;font-family:var(--fonte-titulo);font-weight:900;font-size:clamp(2rem,.9rem + 2.8vw,3.2rem);line-height:1.08;letter-spacing:-.01em;color:#fff}
.destaque{color:var(--laranja)}
.hero .lead{max-width:61ch;margin-top:20px;color:#D6DEE8}
.hero-acoes{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.selos{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:32px;padding:0;list-style:none;color:var(--claro-2);font-size:.92rem}
.selos li{display:flex;align-items:center;gap:8px}
.selos .ic{width:19px;height:19px;color:var(--laranja)}

/* ===== TESTE: a abertura nasce como desenho técnico e um feixe laranja revela a fábrica real =====
   "Do projeto à realidade". Liga e desliga em build.py (HERO_VARREDURA); o desenho sai de gera_imagens.py.
   Com JavaScript a varredura espera a foto real carregar (site.js); sem ele, o desenho some sozinho em 6 s. */
.hero-varredura{--pluma:clamp(90px,12vw,190px);--varre:2.4s;--varre-curva:cubic-bezier(.62,0,.28,1)}
.hero-varredura .hero-real,.hero-varredura .hero-planta,.hero-varredura .hero-foto picture{position:absolute;inset:0}
/* o desenho fica por cima da foto e vai sendo apagado atrás do feixe, com a borda esfumada */
.hero-planta{background:#0A2446;
  -webkit-mask-image:linear-gradient(90deg,transparent calc(50% - var(--pluma) / 2),#000 calc(50% + var(--pluma) / 2));
  mask-image:linear-gradient(90deg,transparent calc(50% - var(--pluma) / 2),#000 calc(50% + var(--pluma) / 2));
  -webkit-mask-size:calc(200% + var(--pluma)) 100%;mask-size:calc(200% + var(--pluma)) 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:100% 0;mask-position:100% 0;
  animation:hero-some 0s 6s forwards}
.hero-planta picture{animation:hero-surge 1s ease both}
/* grade de papel de engenharia sobre o desenho */
.hero-planta::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(150,200,255,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(150,200,255,.18) 1px,transparent 1px),
    linear-gradient(rgba(150,200,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(150,200,255,.07) 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px}
/* carimbo de folha de projeto, no canto, acima do quadro de números */
.hero-carimbo{position:absolute;z-index:1;right:max(16px,calc((100% - var(--max)) / 2));bottom:calc(3.7% + 128px);
  display:grid;grid-template-columns:repeat(3,auto);border:1px solid rgba(170,210,255,.6);background:rgba(8,30,60,.55);
  color:#D4E8FF;font:500 .68rem/1.35 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.12em;text-transform:uppercase}
.hero-carimbo > span{padding:7px 12px;border:solid rgba(170,210,255,.4);border-width:0 1px 1px 0}
.hero-carimbo > span:nth-child(n+3){border-bottom:0}
.hero-carimbo > span:last-child,.hero-carimbo .cb-linha{border-right:0}
.hero-carimbo .cb-linha{grid-column:1 / -1}
.hero-carimbo b{font-size:1.3em;font-weight:600;letter-spacing:.08em;color:#fff}
.hero-carimbo small{display:block;font-size:.84em;opacity:.62}
.hero-varredura.revelando .hero-planta{animation:hero-varre var(--varre) var(--varre-curva) forwards}
@keyframes hero-varre{to{-webkit-mask-position:0 0;mask-position:0 0}}
@keyframes hero-some{to{visibility:hidden}}
@keyframes hero-surge{from{opacity:0}}
/* o feixe: linha de luz na borda do desenho, com rastro quente sobre a fábrica que acabou de aparecer */
.hero-feixe{position:absolute;top:0;bottom:0;left:0;z-index:2;width:calc(100% + var(--pluma));pointer-events:none;opacity:0}
.hero-feixe::before{content:"";position:absolute;top:0;bottom:0;left:-1px;width:2px;
  background:linear-gradient(180deg,transparent,#FFC6B6 12%,#FFF4F0 50%,#FFC6B6 88%,transparent);
  box-shadow:0 0 10px 2px rgba(239,80,51,.9),0 0 38px 10px rgba(239,80,51,.45),0 0 120px 36px rgba(239,80,51,.18)}
.hero-feixe::after{content:"";position:absolute;top:0;bottom:0;right:100%;width:min(36vw,460px);background:linear-gradient(90deg,transparent,rgba(239,80,51,.2))}
.hero-varredura.revelando .hero-feixe{animation:hero-feixe var(--varre) var(--varre-curva) forwards}
@keyframes hero-feixe{0%{transform:translateX(0);opacity:0}5%{opacity:1}92%{opacity:1}100%{transform:translateX(100%);opacity:0}}
/* terminada a varredura, as camadas do efeito saem da página */
.hero-varredura.revelado .hero-planta,.hero-varredura.revelado .hero-feixe{display:none}
@media (max-width:960px){.hero-carimbo{display:none}}
@media (max-width:640px){.hero-varredura{--varre:1.9s}}

/* ===== números, sobrepostos ao fim da abertura ===== */
.numeros{position:relative;z-index:3;margin-top:-96px}
.numeros ul{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border-radius:var(--raio);box-shadow:0 30px 70px -34px rgba(11,29,49,.45);overflow:hidden;border-top:4px solid var(--laranja)}
.numeros li{padding:28px 26px 30px;border-left:1px solid var(--aco-2)}
.numeros li:first-child{border-left:0}
.numeros strong{display:block;font-family:var(--fonte-titulo);font-size:clamp(1.8rem,1.35rem + 1.4vw,2.5rem);font-weight:900;letter-spacing:-.01em;line-height:1.05;color:var(--laranja);font-variant-numeric:tabular-nums}
.numeros strong .pre,.numeros strong .suf{color:var(--laranja)}
.numeros p{margin-top:8px;color:var(--tinta-2);font-size:.93rem;line-height:1.45}

/* ===== quem já confia (só aparece com clientes autorizados no build.py) ===== */
.clientes{padding:clamp(48px,6vw,72px) 0 0}
.clientes h2{text-align:center;font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-2)}
.clientes ul{list-style:none;padding:0;margin-top:22px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:20px 48px}
.clientes img{height:40px;width:auto;filter:grayscale(1);opacity:.72;transition:filter .3s,opacity .3s}
.clientes li:hover img{filter:none;opacity:1}
.clientes span{font-weight:600;font-size:1.05rem;color:var(--tinta-2)}

/* ===== cartões: brancos, borda leve, sobem um pouco ao passar o mouse ===== */
.vidro{position:relative;background:#fff;border:1px solid var(--aco-2);transition:border-color .3s,transform .3s var(--curva),box-shadow .3s}
.vidro:hover{border-color:var(--aco-3);transform:translateY(-4px);box-shadow:var(--sombra)}

/* ===== serviços ===== */
.servicos-grade{display:grid;grid-template-columns:repeat(6,1fr);gap:20px}
.servico{grid-column:span 2;display:flex;flex-direction:column;gap:14px;padding:28px;border-radius:var(--raio)}
.servico.destaque{grid-column:span 3;background:var(--marinho);color:#fff;border-color:transparent}
/* os três cartões menores ganham a borda laranja à esquerda, como no protótipo do designer */
.servico:not(.destaque),.servico:not(.destaque):hover{border-left:3px solid var(--laranja)}
.servico.destaque .ic-caixa{background:rgba(239,80,51,.16);color:var(--laranja)}
.servico h3{font-size:1.22rem;color:var(--marinho)}
.servico.destaque h3{color:#fff}
.servico p{color:var(--tinta-2)}
.servico.destaque p{color:var(--claro-2)}
/* o momento da fábrica, ao lado do ícone: o visitante se acha antes de ler o título */
.servico-topo{display:flex;align-items:center;gap:14px}
.quando{font-size:.74rem;font-weight:600;letter-spacing:.1em;line-height:1.4;text-transform:uppercase;color:var(--laranja-texto)}
.servico.destaque .quando{color:var(--laranja)}
.escopo{padding-top:16px;border-top:1px solid rgba(255,255,255,.12)}
.escopo span{font-size:.74rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#9FB0C3}
.escopo ul{list-style:none;padding:0;margin-top:10px;display:grid;grid-template-columns:1fr 1fr;gap:8px 18px}
.escopo li{display:flex;gap:8px;align-items:flex-start;font-size:.93rem;line-height:1.45;color:#E4EAF1}
.escopo .ic{width:18px;height:18px;margin-top:2px;color:var(--laranja);stroke-width:2.4}
.link-wa{margin-top:auto;display:inline-flex;align-items:center;gap:8px;padding-top:6px;font-weight:600;color:var(--laranja-texto);text-decoration:none;transition:gap .3s var(--curva)}
.link-wa:hover{gap:12px}
.servico.destaque .link-wa{color:var(--laranja)}
.link-wa .ic{width:18px;height:18px}

/* ===== soluções ===== */
.solucoes-grade{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.solucao{display:flex;flex-direction:column;border-radius:var(--raio);overflow:hidden}
.solucao figure{position:relative;aspect-ratio:4/3;overflow:hidden;background:#DCE2E9}
.solucao img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--curva)}
.solucao:hover img{transform:scale(1.05)}
.modelo{position:absolute;left:12px;bottom:12px;background:var(--laranja-botao);color:#fff;font-size:.74rem;font-weight:600;letter-spacing:.06em;padding:5px 10px;clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.solucao-corpo{flex:1;display:flex;flex-direction:column;gap:8px;padding:20px 22px 22px}
.solucao h3{font-size:1.08rem;color:var(--marinho)}
.solucao p{color:var(--tinta-2);font-size:.94rem;line-height:1.55}
.solucao .link-wa{padding-top:10px;font-size:.94rem}
.dica-deslize{display:none}
/* botão de ampliar a foto (visor do site.js): cobre a foto, com a lupa no canto. Sem JavaScript, some. */
.ampliar{display:none}
.js .ampliar{position:absolute;inset:0;z-index:2;display:flex;align-items:flex-start;justify-content:flex-end;padding:12px;border:0;background:none;cursor:zoom-in}
.ampliar-ic{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:rgba(11,29,49,.58);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;opacity:0;transform:scale(.85);transition:opacity .3s,transform .3s var(--curva),background-color .2s}
.ampliar-ic .ic{width:22px;height:22px}
.solucao:hover .ampliar-ic,.auto-foto:hover .ampliar-ic,.ampliar:focus-visible .ampliar-ic{opacity:1;transform:none}
.ampliar:hover .ampliar-ic{background:var(--laranja-botao)}
.ampliar:focus-visible{outline-offset:-4px;border-radius:0}
/* na tela de toque não tem "passar o mouse": a lupa fica sempre à vista */
@media (hover:none){.ampliar-ic{opacity:1;transform:none}}
/* outros sistemas que a JAH comercializa: cada um abre o WhatsApp com o pedido pronto */
.outros{position:relative;overflow:hidden;margin-top:clamp(32px,4vw,48px);display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,2.15fr);gap:22px clamp(28px,4vw,56px);align-items:center;padding:clamp(24px,3vw,34px);border-radius:var(--raio);background:var(--marinho);color:#fff}
.outros::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:32px 32px;-webkit-mask-image:linear-gradient(90deg,#000,transparent 60%);mask-image:linear-gradient(90deg,#000,transparent 60%)}
.outros > *{position:relative}
.outros h3{font-family:var(--fonte-titulo);font-weight:900;font-size:clamp(1.12rem,.95rem + .75vw,1.42rem);line-height:1.18;letter-spacing:-.01em}
.outros-cabeca p{margin-top:10px;font-size:.93rem;line-height:1.55;color:var(--claro-2)}
.outros-lista{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.outros-lista a{display:flex;align-items:center;gap:12px;min-height:58px;height:100%;padding:12px 16px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:#fff;font-weight:500;font-size:.95rem;line-height:1.35;text-decoration:none;transition:background-color .25s,border-color .25s,transform .25s var(--curva)}
.outros-lista a:hover{background:rgba(239,80,51,.14);border-color:rgba(239,80,51,.55);transform:translateY(-2px)}
.outros-lista .ic{width:20px;height:20px;color:var(--laranja);stroke-width:2.4}
.outros-lista .ic-seta{margin-left:auto;width:18px;height:18px;color:#9FB0C3;stroke-width:1.8;transition:transform .25s var(--curva),color .25s}
.outros-lista a:hover .ic-seta{transform:translateX(3px);color:#fff}
.chamada{margin-top:clamp(32px,4vw,48px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;padding:24px 28px;border-radius:var(--raio);background:#fff;border:1px solid var(--aco-2);border-left:4px solid var(--laranja)}
.chamada p{font-weight:600;font-size:1.08rem;color:var(--marinho)}
.chamada small{display:block;font-weight:400;font-size:.92rem;color:var(--tinta-2)}

/* ===== automação (faixa escura) ===== */
.secao-escura .vidro{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1);color:#D6DEE8}
.secao-escura .vidro:hover{border-color:rgba(239,80,51,.5);box-shadow:none}
.secao-escura .ic-caixa{background:rgba(239,80,51,.16);color:var(--laranja)}
/* um cartão com foto para cada item: painéis, supervisório e leitor de código de barras */
.mosaico{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.mosaico .cortina{position:relative;overflow:hidden;border-radius:12px;background:#12283F}
.mosaico img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .8s var(--curva)}
.mosaico figure:hover img{transform:scale(1.04)}
.auto-foto figcaption{display:flex;align-items:center;gap:11px;margin-top:14px;font-size:1.03rem;font-weight:600;line-height:1.35;color:#fff}
/* LED de status, como num painel de CLP */
.auto-foto .led{flex:none;width:8px;height:8px;border-radius:50%;background:var(--laranja);animation:led 2.6s ease-in-out infinite;animation-delay:calc(var(--i,0) * .5s)}
@keyframes led{0%,100%{opacity:.55;box-shadow:0 0 0 0 rgba(239,80,51,.5)}50%{opacity:1;box-shadow:0 0 0 6px rgba(239,80,51,0)}}

/* ===== como trabalhamos: fluxograma de cinco estações, com um sinal que corre na linha ===== */
.etapas{--no:58px;--vao:24px;list-style:none;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:var(--vao);position:relative}
.etapas::before,.etapas::after{content:"";position:absolute;top:calc(var(--no) / 2 - 1px);left:calc((100% - 4 * var(--vao)) / 10);right:calc((100% - 4 * var(--vao)) / 10);height:2px;z-index:0}
.etapas::before{background:var(--aco-3)}
.etapas::after{
  background:linear-gradient(90deg,var(--laranja) 0 42%,#FFC6B8 50%,var(--laranja) 58% 100%);background-size:260% 100%;background-position:100% 0;
  transform:scaleX(0);transform-origin:0 50%;transition:transform 1.8s cubic-bezier(.6,0,.2,1) .2s;
}
.etapas.visto::after{transform:scaleX(1);animation:sinal-linha 3.4s linear 2s infinite}
@keyframes sinal-linha{from{background-position:100% 0}to{background-position:-160% 0}}
.etapa{position:relative;z-index:1;text-align:center}
/* cada etapa é uma estação: um círculo na linha, como um instrumento no fluxograma */
.etapa .num{display:inline-grid;place-items:center;width:var(--no);height:var(--no);border-radius:50%;background:#fff;border:2px solid var(--aco-3);font-weight:700;font-size:.95rem;color:var(--marinho);transition:border-color .5s,color .5s,box-shadow .5s;transition-delay:calc(.4s + var(--i,0) * .32s)}
.etapas.visto .etapa .num{border-color:var(--laranja);color:var(--laranja-texto);box-shadow:0 0 0 7px rgba(239,80,51,.1)}
.etapa h3{margin-top:18px;font-size:1.08rem;color:var(--marinho)}
.etapa p{margin-top:6px;font-size:.93rem;line-height:1.55;color:var(--tinta-2)}
.do-projeto{margin-top:clamp(32px,4vw,48px);display:grid;grid-template-columns:1fr 1fr;gap:20px}
.do-projeto figure{border-radius:var(--raio);overflow:hidden;display:flex;flex-direction:column}
.do-projeto img{width:100%;aspect-ratio:4/3;object-fit:cover}
.do-projeto figcaption{padding:14px 18px;font-size:.9rem;color:var(--tinta-2);border-top:1px solid var(--aco-2)}
.do-projeto figcaption strong{color:var(--tinta)}
/* o desenho de engenharia em planta azul (blueprint) */
.planta-azul{background-color:var(--marinho);background-image:linear-gradient(rgba(148,170,196,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(148,170,196,.12) 1px,transparent 1px);background-size:24px 24px}
.planta-azul img{object-fit:contain;padding:14px;filter:invert(1) grayscale(1) contrast(1.35) brightness(1.05);mix-blend-mode:screen}

/* ===== por que a JAH ===== */
.dif-grade{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.dif{padding:28px;border-radius:var(--raio);display:flex;flex-direction:column;gap:14px}
.dif h3{font-size:1.12rem;color:var(--marinho)}
.dif p{color:var(--tinta-2);font-size:.96rem}
.dif-frase{grid-row:span 2;justify-content:space-between;gap:28px;background:var(--marinho);color:#fff;border-top:4px solid var(--laranja)}
.dif-frase blockquote{margin:0;font-size:clamp(1.35rem,1.1rem + 1vw,1.75rem);font-weight:700;line-height:1.3;letter-spacing:-.02em}
.dif-frase blockquote span{color:var(--laranja)}
.dif-frase p{color:var(--claro-2)}

/* ===== sobre ===== */
.sobre-grade{display:grid;grid-template-columns:.88fr 1.12fr;gap:clamp(36px,5vw,88px);align-items:start}
.sobre-texto .cabeca{margin-bottom:30px}
.sobre-foto{position:relative}
.sobre-foto::before{content:"";position:absolute;left:-14px;top:22px;width:44%;height:70%;background:var(--laranja);transform:skewY(-8deg);border-radius:10px}
.sobre-foto .quadro{position:relative;overflow:hidden;border-radius:var(--raio)}
.sobre-foto img{width:100%;aspect-ratio:4/5;object-fit:cover}
.sobre-foto .leitura{position:absolute;right:-14px;bottom:26px;z-index:2;padding:14px 18px;background:#fff;border-radius:12px;box-shadow:var(--sombra);font-size:.74rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-2)}
.sobre-foto .leitura b{display:block;font-size:1.6rem;letter-spacing:-.02em;text-transform:none;color:var(--marinho)}
.sobre-texto > p{margin-top:16px;color:var(--tinta-2)}
.pilares{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;padding:0;list-style:none}
.pilares li{padding:8px 14px;border-radius:999px;background:var(--aco);font-weight:600;font-size:.9rem;color:var(--marinho)}
.fundadores{margin-top:26px}
.fundadores h3{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-2);font-weight:600}
.fundadores ul{list-style:none;padding:0;margin-top:12px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.fundadores li{padding:14px 16px;border-radius:12px}
.fundadores strong{display:block;font-size:.98rem;color:var(--marinho)}
.fundadores span{font-size:.84rem;color:var(--tinta-2)}

/* Sobre em laranja (pedido do designer). O tom é o laranja dos botões, um pouco mais fechado que o da
   marca: com ele o texto branco passa no contraste AA (4,6:1). */
.secao-laranja{background:linear-gradient(135deg,var(--laranja-botao) 0%,#C93C1C 100%);color:#fff}
.secao-laranja.fundo-grade::before{background-image:linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px)}
.secao-laranja .olho{color:#fff}
.secao-laranja .olho-num b{background:#fff;color:var(--laranja-botao)}
.secao-laranja .cabeca h2,.secao-laranja .lead,.secao-laranja .sobre-texto > p{color:#fff}
.secao-laranja .btn-primario{filter:drop-shadow(0 8px 14px rgba(11,29,49,.25))}
.secao-laranja .btn-primario::before{background:var(--marinho)}
.secao-laranja .btn-primario:hover::before{background:#16324F}
.secao-laranja .sobre-foto::before{display:none}
.secao-laranja .fundadores h3{color:#fff}
/* os valores num bloco branco só, com divisórias finas entre eles */
.secao-laranja .pilares{display:inline-flex;gap:0;padding:6px;background:#fff;border-radius:999px;box-shadow:0 14px 30px -18px rgba(11,29,49,.45)}
.secao-laranja .pilares li{position:relative;padding:8px 18px;border-radius:0;background:none}
.secao-laranja .pilares li + li::before{content:"";position:absolute;left:0;top:26%;bottom:26%;width:1px;background:var(--aco-3)}

/* ===== perguntas ===== */
.faq-grade{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:32px clamp(40px,6vw,96px);align-items:start}
.faq-grade .cabeca{position:sticky;top:calc(var(--topo) + 40px);margin-bottom:0}
.faq details{border-bottom:1px solid var(--aco-3)}
.faq details:first-child{border-top:1px solid var(--aco-3)}
.faq summary{list-style:none;cursor:pointer;position:relative;padding:22px 48px 22px 4px;font-weight:600;font-size:1.05rem;line-height:1.4;color:var(--marinho);transition:color .2s}
.faq summary:hover{color:var(--laranja-texto)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:12px;top:50%;width:10px;height:10px;border-right:2.5px solid var(--laranja);border-bottom:2.5px solid var(--laranja);transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--curva)}
.faq details[open] summary::after{transform:translateY(-25%) rotate(-135deg)}
.faq .resposta{padding:0 4px 24px;max-width:70ch}
.faq .resposta p{color:var(--tinta-2)}
.faq .resposta p + p{margin-top:12px}
.faq .resposta strong{color:var(--tinta);font-weight:600}

/* ===== contato (faixa escura, formulário branco) ===== */
.contato-grade{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start}
.contato-lado{display:grid;gap:20px}
.contato-lado .cabeca{margin-bottom:12px}
.contato-form{position:sticky;top:calc(var(--topo) + 32px)}
.canais-painel,.passos-painel{padding:clamp(24px,3vw,36px);border-radius:var(--raio)}
.secao-escura .canais-painel:hover,.secao-escura .passos-painel:hover{transform:none}
.canais-painel h3,.passos-painel h3{font-size:1.25rem;color:#fff}
/* o que acontece depois do clique */
.passos{list-style:none;padding:0;margin-top:20px;display:grid;gap:16px}
.passos li{display:flex;gap:14px;align-items:flex-start}
.passos .num{flex:none;display:grid;place-items:center;width:34px;height:34px;font-weight:700;font-size:.9rem;color:#fff;background:var(--laranja-botao);clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.passos strong{display:block;color:#fff;font-weight:600;line-height:1.4}
.passos p{margin-top:2px;font-size:.92rem;line-height:1.5;color:var(--claro-2)}
.canais{list-style:none;padding:0;margin-top:22px;display:grid;gap:18px}
.canais li{display:flex;gap:14px;align-items:flex-start}
.canais .ic-caixa{width:46px;height:46px}
.canais .ic-caixa .ic{width:22px;height:22px}
.canais small{display:block;font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:#9FB0C3;font-weight:600}
.canais a,.canais span{color:#fff;font-weight:500;text-decoration:none;overflow-wrap:anywhere}
.canais a:hover{text-decoration:underline;text-underline-offset:4px}
/* dois WhatsApp, um embaixo do outro, cada um com o nome do sócio que atende */
.canais .whats a{display:block}
.canais .whats a + a{margin-top:10px}
.canais .quem{display:block;font-size:.84rem;font-weight:400;line-height:1.4;color:#9FB0C3}
.rodape .quem{color:#8C9AAB}
.secao-escura .form{background:#fff;color:var(--tinta);border-color:transparent;box-shadow:0 30px 70px -30px rgba(0,0,0,.55)}
.form{padding:clamp(24px,3vw,36px);border-radius:18px}
.form:hover{transform:none}
.form h3{font-size:1.25rem;color:var(--marinho)}
.form .sub{margin-top:6px;color:var(--tinta-2);font-size:.94rem}
.campo{display:grid;gap:6px;margin-top:16px}
.campo label{font-weight:600;font-size:.9rem;color:var(--tinta)}
.campo label span{font-weight:400;color:var(--tinta-2)}
.campo input,.campo select,.campo textarea{width:100%;min-height:48px;padding:12px 14px;border:1.5px solid var(--aco-3);border-radius:10px;background:#fff;color:var(--tinta);transition:border-color .2s,box-shadow .2s}
.campo textarea{min-height:112px;resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--marinho);box-shadow:0 0 0 3px rgba(239,80,51,.22)}
.duas{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.form .btn{width:100%;margin-top:22px}
.aviso{margin-top:12px;font-size:.82rem;line-height:1.5;color:var(--tinta-2)}
.sem-js{margin-top:24px}

/* ===== página de texto (política de privacidade) ===== */
.texto-legal{max-width:780px}
.texto-legal .cabeca{margin-bottom:40px}
.atualizado{margin-top:14px;font-size:.9rem;color:var(--tinta-2)}
.texto-legal h2{margin-top:48px;font-size:1.3rem;color:var(--marinho);scroll-margin-top:calc(var(--topo) + 24px)}
.texto-legal p,.texto-legal li{color:var(--tinta-2)}
.texto-legal p{margin-top:14px}
.texto-legal ul,.texto-legal ol{margin-top:12px;padding-left:22px;display:grid;gap:8px}
.texto-legal li::marker{color:var(--laranja)}
.texto-legal strong{color:var(--tinta)}
.texto-legal a{color:var(--laranja-texto);text-decoration:underline;text-underline-offset:3px}
.texto-legal a.btn{text-decoration:none}
.texto-legal .btn-primario{color:#fff}
.resumo-legal{padding:24px 28px;border-radius:var(--raio);background:var(--aco);border-left:4px solid var(--laranja)}
.resumo-legal h2,.indice-legal h2{margin-top:0;font-size:1.05rem}
.indice-legal{margin-top:28px;padding:22px 28px;border:1px solid var(--aco-2);border-radius:var(--raio)}
.indice-legal ol{grid-template-columns:repeat(2,1fr);gap:6px 28px}
.texto-legal > .acoes{margin-top:48px}
.aviso a,.rodape-base a{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* ===== redes sociais no rodapé: ícones de canto cortado, laranja ao passar o mouse ===== */
.redes{margin-top:28px}
.rodape .redes p{margin-top:8px;max-width:34ch}
.rodape .redes ul{display:flex;gap:12px;margin-top:16px}
.rede{display:grid;place-items:center;width:48px;height:48px;color:#fff;background:rgba(255,255,255,.08);clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);transition:background-color .25s,transform .25s var(--curva)}
.rodape a.rede{color:#fff}
.rede:hover,.rede:focus-visible{background:var(--laranja-botao);transform:translateY(-2px)}
.rede .ic{width:23px;height:23px}

/* ===== rodapé ===== */
.rodape{background:var(--marinho-fundo);color:#AEBBCB;padding:60px 0 28px;font-size:.92rem}
.rodape-grade{display:grid;grid-template-columns:1.5fr 1fr 1.2fr;gap:36px}
.rodape .marca img{height:30px}
.rodape-grade > div > p{margin-top:16px;max-width:36ch}
.rodape h2{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;font-weight:600}
.rodape ul{list-style:none;padding:0;margin-top:14px;display:grid;gap:8px}
.rodape a{color:#D6DEE8;text-decoration:none}
.rodape a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
.rodape-base{margin-top:44px;padding-top:22px;border-top:1px solid rgba(255,255,255,.08);display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;font-size:.82rem;color:#8C9AAB}

/* ===== WhatsApp flutuante ===== */
.wa-flutuante{position:fixed;right:18px;bottom:18px;z-index:60;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:var(--laranja-botao);color:#fff;box-shadow:0 14px 30px -12px rgba(0,0,0,.45);transition:transform .3s var(--curva),background-color .2s}
.wa-flutuante::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--laranja);animation:onda 3.2s var(--curva) infinite;pointer-events:none}
.wa-flutuante:hover{transform:translateY(-2px);background:var(--laranja-botao-hover)}
.wa-flutuante .ic{width:28px;height:28px}

/* ===== visor de fotos (site.js): a foto inteira, as próximas e o orçamento daquele equipamento ===== */
html{scrollbar-gutter:stable}
html.visor-aberto{overflow:hidden}
.visor{width:min(1180px,100vw - 32px);max-width:none;max-height:calc(100dvh - 32px);padding:0;border:0;border-radius:18px;background:var(--marinho);color:#fff;box-shadow:0 40px 120px -20px rgba(0,0,0,.75);overflow:hidden}
.visor[open]{display:flex;flex-direction:column;animation:visor-entra .35s var(--curva)}
.visor::backdrop{background:rgba(4,11,20,.84);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
@keyframes visor-entra{from{opacity:0;transform:translateY(16px) scale(.985)}}
.visor-foto{position:relative;flex:1 1 auto;min-height:0;display:grid;place-items:center;background:#06111D;touch-action:pan-y pinch-zoom}
.visor-img{display:grid;place-items:center;width:100%;height:100%;min-height:0}
.visor-img picture{display:contents}
.visor-img img{width:auto;height:auto;max-width:100%;max-height:calc(100dvh - 32px - 150px);object-fit:contain;transition:opacity .3s}
.visor-img.carregando img{opacity:0}
.visor-img.carregando::after{content:"";position:absolute;width:34px;height:34px;border-radius:50%;border:3px solid rgba(255,255,255,.18);border-top-color:var(--laranja);animation:gira .8s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
.visor-info{flex:none;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 28px;padding:18px 24px 20px;border-top:1px solid rgba(255,255,255,.08)}
.visor-texto{flex:1 1 320px;min-width:0}
.visor-modelo{display:inline-block;margin-bottom:6px;padding:3px 9px;background:var(--laranja-botao);color:#fff;font-size:.7rem;font-weight:600;letter-spacing:.06em;clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.visor-modelo:empty{display:none}
.visor h2{font-size:1.18rem;line-height:1.3}
.visor-texto p{margin-top:4px;font-size:.92rem;line-height:1.5;color:var(--claro-2)}
.visor-texto p:empty{display:none}
.visor-acoes{display:flex;align-items:center;gap:20px}
.visor-conta{font-size:.86rem;color:#9FB0C3;font-variant-numeric:tabular-nums;white-space:nowrap}
.visor-botao{position:absolute;z-index:2;display:grid;place-items:center;width:46px;height:46px;border:0;border-radius:50%;background:rgba(11,29,49,.62);color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background-color .2s}
.visor-botao:hover{background:var(--laranja-botao)}
.visor-botao .ic{width:22px;height:22px}
.visor-fechar{top:12px;right:12px}
.visor-anterior,.visor-proxima{top:50%;margin-top:-23px}
.visor-anterior{left:12px}
.visor-anterior .ic{transform:rotate(180deg)}
.visor-proxima{right:12px}
.visor-botao[hidden]{display:none}

/* ===== movimento, na medida ===== */
@keyframes aproxima{from{transform:scale(1.1)}to{transform:scale(1)}}
@keyframes onda{0%{transform:scale(1);opacity:.45}70%,100%{transform:scale(1.6);opacity:0}}
@keyframes entra{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* entrada da abertura, em sequência */
.entra{animation:entra .9s var(--curva) both}
.e1{animation-delay:.05s}.e2{animation-delay:.18s}.e3{animation-delay:.32s}.e4{animation-delay:.45s}.e5{animation-delay:.58s}.e6{animation-delay:.7s}

/* seções entram suaves ao rolar (só com JavaScript), uma depois da outra */
.js .revela{opacity:0;transform:translateY(26px);transition:opacity .8s var(--curva),transform .8s var(--curva);transition-delay:calc(var(--i,0) * 90ms)}
.js .revela.visto{opacity:1;transform:none}
/* depois de entrar, o cartão volta a reagir rápido ao mouse */
.js .revela.vidro.pronto{transition:border-color .3s,transform .3s var(--curva),box-shadow .3s;transition-delay:0s}
/* fotos abrem como cortina */
.js .cortina{clip-path:inset(0 0 100% 0);transition:clip-path 1.1s cubic-bezier(.7,0,.2,1);transition-delay:calc(var(--i,0) * 90ms + .1s)}
.js .visto .cortina,.js .cortina.visto{clip-path:inset(0 0 0 0)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .revela{opacity:1;transform:none}
  .js .cortina{clip-path:none}
  .etapas::after{transform:none}
  .pid-fluxo,.clp .corrente{display:none}
  .hero-planta,.hero-feixe{display:none}
}

/* notebook de tela baixa: o botão de orçamento tem que aparecer sem rolar */
@media (min-width:961px) and (max-height:700px){
  .hero-conteudo{padding-top:calc(var(--topo) + 28px)}
  .hero h1{font-size:clamp(2rem,.8rem + 2.6vw,2.9rem)}
  .hero .lead{font-size:1rem;margin-top:16px}
  .hero-acoes{margin-top:24px}
}

/* ===== telas médias ===== */
@media (max-width:1180px){
  .menu a{padding:10px 9px;font-size:.9rem}
}
@media (max-width:1080px){
  .cabeca-dividida,.cabeca-arte{gap:24px 40px}
}
/* tablet e celular: cabeçalhos empilhados, fluxograma na vertical e colunas uma embaixo da outra */
@media (max-width:900px){
  .cabeca-dividida{grid-template-columns:1fr;align-items:start;gap:0}
  .cabeca-dividida h2,.cabeca-linha h2,.cabeca-coluna h2{max-width:22ch}
  .cabeca-apoio{padding-bottom:0}
  .cabeca-apoio .lead{margin-top:16px}
  .cabeca-linha{display:block}
  .cabeca-linha .acoes-secao{margin-top:24px}
  .cabeca-arte{grid-template-columns:1fr;gap:36px}
  .cabeca-arte h2{max-width:22ch}
  .evolucao{max-width:620px;margin-inline:0}
  .outros{grid-template-columns:1fr}
  .etapas{grid-template-columns:1fr;gap:26px}
  .etapas::before,.etapas::after{top:calc(var(--no) / 2);bottom:calc(var(--no) / 2);left:calc(var(--no) / 2 - 1px);right:auto;width:2px;height:auto}
  .etapas::after{background:linear-gradient(180deg,var(--laranja) 0 42%,#FFC6B8 50%,var(--laranja) 58% 100%);background-size:100% 260%;background-position:0 100%;transform:scaleY(0);transform-origin:50% 0}
  .etapas.visto::after{transform:scaleY(1);animation:sinal-linha-v 3.4s linear 2s infinite}
  .etapa{display:grid;grid-template-columns:var(--no) 1fr;column-gap:18px;align-items:start;text-align:left}
  .etapa .num{grid-row:span 2}
  .etapa h3{margin-top:6px}
  .faq-grade{grid-template-columns:1fr}
  .faq-grade .cabeca{position:static;margin-bottom:8px}
  .contato-form{position:static}
}
@keyframes sinal-linha-v{from{background-position:0 100%}to{background-position:0 -160%}}
@media (max-width:960px){
  .menu-botao{display:grid}
  .menu{display:none;position:absolute;left:0;right:0;top:var(--topo);flex-direction:column;align-items:stretch;gap:0;padding:8px 16px 18px;background:#fff;border-bottom:1px solid var(--aco-2);box-shadow:0 20px 40px -24px rgba(11,29,49,.45)}
  .topo.aberto .menu{display:flex}
  .menu a{padding:14px 8px;font-size:1rem;border-bottom:1px solid var(--aco-2);border-radius:0}
  .menu a.atual{box-shadow:none}
  .numeros ul{grid-template-columns:repeat(2,1fr)}
  .numeros li:nth-child(3){border-left:0}
  .numeros li:nth-child(n+3){border-top:1px solid var(--aco-2)}
  .servicos-grade{grid-template-columns:repeat(2,1fr)}
  .servico,.servico.destaque{grid-column:span 1}
  .solucoes-grade{grid-template-columns:repeat(2,1fr)}
  .sobre-grade,.contato-grade{grid-template-columns:1fr}
  .sobre-foto{max-width:520px;margin-inline:auto}
  /* no celular o título vem antes da foto: quem chega pelo menu vê o título e o botão juntos */
  .sobre-texto{order:-1}
  .dif-grade{grid-template-columns:repeat(2,1fr)}
  .dif-frase{grid-row:auto;grid-column:1/-1}
  .rodape-grade{grid-template-columns:1fr 1fr}
  .rodape-grade > div:first-child{grid-column:1/-1}
}
@media (max-width:640px){
  :root{--topo:64px}
  .marca img{height:24px}
  .topo .btn-topo{display:none}
  .hero{min-height:0}
  .hero::after{background:linear-gradient(180deg,rgba(11,29,49,.74) 0%,rgba(11,29,49,.86) 50%,rgba(11,29,49,.95) 100%)}
  .hero-acoes .btn,.acoes .btn,.acoes-secao .btn{width:100%}
  .quebra{display:none}
  .numeros{margin-top:-80px}
  .numeros li{padding:20px 16px 22px}
  .numeros p{font-size:.84rem}
  .servicos-grade,.dif-grade,.do-projeto{grid-template-columns:1fr}
  .escopo ul{grid-template-columns:1fr}
  .indice-legal ol{grid-template-columns:1fr}
  .resumo-legal,.indice-legal{padding:20px}
  .etapas{--no:48px;gap:22px}
  .etapa .num{font-size:.88rem}
  .etapa h3{margin-top:3px;font-size:1.04rem}
  /* celular: cartões um pouco mais enxutos, área de toque maior nos links e espaço para o botão flutuante */
  .servico,.dif{padding:22px}
  .link-wa{padding-block:10px 4px}
  .solucao .link-wa{padding-top:8px}
  /* a lógica do CLP desliza para o lado, com tamanho de leitura */
  .clp{margin-bottom:10px}
  .clp-topo{font-size:.8rem;padding:12px 16px;gap:9px}
  .clp-corpo svg{min-width:1180px}
  .dica-clp{margin:0 0 26px}
  .evo-legenda{font-size:.76rem;gap:9px}
  .outros-lista{grid-template-columns:1fr}
  .outros-lista a{min-height:54px}
  /* visor: tela cheia no celular */
  .visor{width:100vw;max-height:100dvh;height:100dvh;border-radius:0}
  .visor-img img{max-height:calc(100dvh - 190px)}
  .visor-info{padding:14px 16px 18px}
  .visor-acoes{width:100%;justify-content:space-between}
  .visor-acoes .btn{flex:1;max-width:260px}
  .faq summary{padding:18px 40px 18px 2px;font-size:1rem}
  .rodape{padding-bottom:92px}
  .olho{font-size:.74rem;letter-spacing:.14em}
  .olho-num b{min-width:33px;height:25px;font-size:.9rem}
  /* botões empilhados, na largura toda: cada um é uma seta simples, sem o encaixe */
  .btn-primario + .btn-claro{--entalhe:0px;margin-left:0}
  /* valores do Sobre: o bloco branco vira duas colunas, com o último na largura toda */
  .secao-laranja .pilares{display:flex;flex-wrap:wrap;border-radius:16px;padding:4px}
  .secao-laranja .pilares li{flex:1 1 50%;text-align:center;padding:9px 8px;font-size:.88rem}
  .secao-laranja .pilares li:nth-child(n+3){border-top:1px solid var(--aco-2)}
  .secao-laranja .pilares li:nth-child(odd)::before{display:none}
  .secao-laranja .pilares li:last-child{flex-basis:100%}
  /* no celular as galerias deslizam para o lado: a página fica bem mais curta */
  .solucoes-grade,.mosaico{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:-16px;padding:6px 16px 18px;scroll-padding-inline:16px;overscroll-behavior-x:contain;scrollbar-width:thin}
  .solucao{flex:0 0 84%;scroll-snap-align:start}
  .mosaico figure{flex:0 0 84%;scroll-snap-align:start}
  .js .solucoes-grade .revela,.js .mosaico .revela{opacity:1;transform:none;transition:none}
  .js .solucoes-grade .cortina,.js .mosaico .cortina{clip-path:none;transition:none}
  .solucao:hover img,.mosaico figure:hover img{transform:none}
  .dica-deslize{display:flex;align-items:center;justify-content:center;gap:8px;margin:-8px 0 14px;font-size:.86rem;font-weight:500;color:var(--tinta-2)}
  .dica-deslize .ic{width:18px;height:18px;color:var(--laranja-texto)}
  .fundadores ul{grid-template-columns:1fr}
  .duas{grid-template-columns:1fr}
  .chamada .btn{width:100%}
  .rodape-grade{grid-template-columns:1fr}
  .sobre-foto .leitura{right:8px}
  .cabeca[data-num]::after{font-size:5rem;top:-.2em}
  .wa-flutuante{right:14px;bottom:14px;width:54px;height:54px}
}