/* =========================================================================
   EIXO Z — Engenharia & Locações
   1 variáveis · 2 base · 3 tipografia · 4 marca/topo · 5 mundo · 6 hero
   7 seções · 8 RenderIA · 9 prova/sobre · 10 contato · 11 rodapé
   12 HUD · 13 movimento · 14 degradação
   ========================================================================= */

/* ---------- 1. variáveis ---------- */
:root{
  --verde:#00CE7C;
  --verde-rgb:0,206,124;
  --verde-claro:#7BFFCB;

  --preto:#04060A;
  --preto-2:#080C12;
  --preto-3:#0D131A;

  --texto:#EAF1EE;
  --texto-2:#9DACA6;
  --texto-3:#7E8C87;   /* era #6A7873: media 4,04:1 — reprovava o mínimo 4,5:1 (WCAG 1.4.3 AA).
                          Usada em .rotulo, .tagline, .ficha dt, legendas, placeholder e mais 5. */

  --vidro:rgba(255,255,255,.045);
  --vidro-2:rgba(255,255,255,.078);
  --borda:rgba(255,255,255,.10);
  --borda-2:rgba(255,255,255,.18);
  /* CONTROLE ≠ MOLDURA. A --borda de 10% mede ~1,31:1 contra o fundo: serve
     para separar um cartão, mas é a única fronteira visível de input, select,
     textarea, botão do trilho e cartão de canal — e para COMPONENTE a WCAG
     1.4.11 exige 3:1. Medida desta: ~3,4:1 sobre o fundo dos formulários.
     Não trocar a --borda geral por esta: o site inteiro ficaria quadriculado. */
  --borda-ctrl:rgba(255,255,255,.38);
  /* O nucleo.js reescreve --scrim-rgb na TROCA de capítulo (seis vezes na
     página) com a cor alta daquele capítulo, escurecida. Assim o cartão de
     texto herda a atmosfera da cena em vez de ser uma cor fixa flutuando por
     cima dela. O valor aqui é o de partida e o que vale nos níveis leve e
     estático, onde não há motor para escrever nada. */
  --scrim-rgb:4 8 12;
  --scrim:rgb(var(--scrim-rgb) / 62%);

  /* DUAS famílias, e é de propósito. Texto neutro em Inter, manchete com
     caráter em Space Grotesk. Fonte de sistema em manchete display é o sinal
     nº 1 de "template": até 27/07 o site caía em Segoe UI no Windows, SF Pro
     no Mac e Roboto no Android — nunca a mesma cara duas vezes, e em nenhuma
     delas uma cara autoral. */
  --fonte:"Inter","Segoe UI Variable Text","Segoe UI",system-ui,
          -apple-system,"Helvetica Neue",Arial,sans-serif;
  --fonte-display:"Space Grotesk","Inter","Segoe UI Variable Display",
          "Segoe UI",system-ui,-apple-system,sans-serif;

  --tipo-display:clamp(2.6rem, 7.4vw, 6.4rem);
  --tipo-micro:.6875rem;

  --raio:14px;
  --larg:1240px;
  --gap:clamp(20px,5vw,64px);
  --curva:cubic-bezier(.16,1,.3,1);

  --vel:0;              /* velocidade de rolagem normalizada, escrita pelo JS */
}

/* FONTES VARIÁVEIS, subset latino, hospedadas AQUI — zero CDN, como manda o
   briefing e a CSP do .htaccess. Um arquivo por família cobre toda a faixa de
   peso: 48 KB (Inter) + 22 KB (Space Grotesk) = 70 KB para o site inteiro,
   contra ~60 KB que três arquivos estáticos de UMA família custariam.
   Ambas são SIL Open Font License 1.1 — uso comercial e redistribuição
   liberados; as licenças estão em assets/fonts/LICENSE-FONTES.txt.

   ATENÇÃO: se um destes arquivos sumir, o `ErrorDocument 404` devolve HTML no
   lugar da fonte. Hoje isso é inofensivo (a 404.html tem 2,4 KB e o navegador
   descarta o que não é woff2), mas antes apontava para o index.html de 33 KB
   e eram 3 downloads inúteis por visita. */
@font-face{
  font-family:"Inter";
  src:url("../fonts/inter-var-latin.woff2") format("woff2-variations"),
      url("../fonts/inter-var-latin.woff2") format("woff2");
  font-weight:100 900;font-display:swap;font-style:normal;
}
@font-face{
  font-family:"Space Grotesk";
  src:url("../fonts/space-grotesk-var-latin.woff2") format("woff2-variations"),
      url("../fonts/space-grotesk-var-latin.woff2") format("woff2");
  font-weight:300 700;font-display:swap;font-style:normal;
}

/* ---------- 2. base ---------- */
*,*::before,*::after{box-sizing:border-box}
/* .topo é position:fixed: sem o scroll-padding, toda âncora do menu parava com
   o topo da seção debaixo do cabeçalho. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--preto);
  scroll-padding-top:88px}
body{
  margin:0;background:var(--preto);color:var(--texto);
  font-family:var(--fonte);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit}
p{margin:0}
:focus-visible{outline:2px solid var(--verde);outline-offset:3px;border-radius:4px}

.pular{position:absolute;left:-9999px;top:0;z-index:999;background:var(--verde);
  color:#03150D;padding:12px 20px;font-weight:700;border-radius:0 0 10px 0}
.pular:focus{left:0}

.env{width:100%;max-width:var(--larg);margin-inline:auto;padding-inline:var(--gap)}
.env.estreito{max-width:760px}
.olho{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* ---------- 3. tipografia ---------- */
h1,h2,h3{margin:0}
/* A Space Grotesk é mais estreita e tem altura-x menor que a Inter: no mesmo
   corpo ela lê MENOR e o tracking negativo de -.022em, calibrado para a Inter,
   fechava demais as contraformas. Daí o -.014em e o peso 700 (a Space Grotesk
   não tem 800 — o eixo dela para em 700, e forçar 800 produziria falso-negrito
   sintético, que é justamente a coisa que denuncia amadorismo em manchete). */
.display{
  font-family:var(--fonte-display);
  font-size:var(--tipo-display);
  font-weight:700;letter-spacing:-.014em;line-height:.96;
  text-wrap:balance;color:#fff;text-shadow:none;   /* proibido glow no título */
  margin-bottom:22px;
  font-feature-settings:"ss01" 1;                  /* 'a' e 'g' de caixa única */
}
.display em{font-style:normal;color:var(--verde)}
h3{font-family:var(--fonte-display);font-size:1.24rem;font-weight:700;
  letter-spacing:-.012em;line-height:1.2}

.rotulo{
  display:inline-flex;align-items:center;gap:10px;
  font-size:var(--tipo-micro);font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--texto-3);margin-bottom:22px;
}
.rotulo::before{content:"// ";opacity:.45;color:var(--verde);letter-spacing:0}

.intro{color:var(--texto-2);font-size:clamp(1rem,1.6vw,1.13rem);max-width:56ch;line-height:1.55}

/* revelação palavra a palavra (só nos títulos display).
   Palavra e não linha: quebrar por linha exigiria mover nós para fora do
   <em>, e o verde da marca se perderia no meio da frase. */
/* padding-bottom abre espaço para as pernas do j/g/p/q dentro da caixa que
   o overflow:hidden recorta; a margem negativa devolve o espaço ao layout,
   senão a entrelinha do display abre. */
.ln{display:inline-block;overflow:hidden;vertical-align:bottom;
    padding-bottom:.24em;margin-bottom:-.24em}
.ln>i{display:inline-block;font-style:inherit;transform:translate3d(0,110%,0);
  transition:transform .9s var(--curva);transition-delay:calc(var(--i,0)*55ms)}
.vis .ln>i{transform:none}

/* eco horizontal: carimbo duplo que permanece e resolve */
.eco{position:relative;isolation:isolate}
.eco::before,.eco::after{
  content:attr(data-txt);position:absolute;inset:0;color:#fff;pointer-events:none;
}
.eco::before{transform:translate3d(calc(var(--e,0)*0.018em),0,0);opacity:calc(var(--e,0)*.55)}
.eco::after {transform:translate3d(calc(var(--e,0)*0.042em),0,0);opacity:calc(var(--e,0)*.22)}

/* ---------- 4. marca e topo ---------- */
.marca{display:inline-flex;align-items:center;gap:12px;text-decoration:none}
.marca svg{height:36px;width:auto;flex:none}
.marca .nome{font-size:15px;font-weight:800;letter-spacing:.16em;line-height:1.1}
.marca .sub{display:block;font-size:9.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--texto-3);margin-top:3px}

.topo{
  position:fixed;inset:0 0 auto;z-index:100;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:16px var(--gap);border-bottom:1px solid transparent;
  transition:background .35s var(--curva),border-color .35s var(--curva);
}
.topo.solido{
  background:rgba(4,6,10,.88);
  backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:var(--borda);
}
.menu{display:flex;gap:30px}
.menu a{position:relative;text-decoration:none;color:var(--texto-2);
  font-size:14px;font-weight:600;padding:4px 0;transition:color .2s}
.menu a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--verde);transition:right .3s var(--curva)}
.menu a:hover,.menu a[aria-current="true"]{color:var(--texto)}
.menu a:hover::after,.menu a[aria-current="true"]::after{right:0}
/* botão de menu: só existe abaixo de 900px */
.menu-btn{display:none;background:none;border:1px solid var(--borda);border-radius:10px;
  width:46px;height:46px;padding:0;cursor:pointer;color:var(--texto);flex:none;
  align-items:center;justify-content:center}
.menu-btn-barras{display:grid;gap:5px;width:20px}
.menu-btn-barras i{display:block;height:2px;background:currentColor;border-radius:2px;
  transition:transform .28s var(--curva),opacity .2s}
.topo.menu-aberto .menu-btn-barras i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.topo.menu-aberto .menu-btn-barras i:nth-child(2){opacity:0}
.topo.menu-aberto .menu-btn-barras i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:900px){
  .menu-btn{display:inline-flex}
  .topo .btn{display:none}
  /* painel que desce por trás da barra do topo. Fica sempre no DOM (só
     transladado e visibility:hidden) para a transição existir e para o
     aria-controls apontar para algo real. */
  .menu{
    position:fixed;left:0;right:0;top:0;z-index:-1;
    flex-direction:column;gap:0;padding-top:79px;
    /* opaco de verdade: com rgba(...,.97)+blur o texto do capítulo atrás ainda
       lia através do painel. Menu não é vidro. */
    background:var(--preto);border-bottom:1px solid var(--borda);
    transform:translateY(-101%);visibility:hidden;
    transition:transform .38s var(--curva),visibility .38s;
    max-height:100dvh;overflow-y:auto;
  }
  .menu a{padding:17px var(--gap);font-size:17px;color:var(--texto);
    border-top:1px solid var(--borda)}
  .menu a::after{display:none}
  .topo.menu-aberto .menu{transform:none;visibility:visible}
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 26px;border-radius:12px;border:1px solid transparent;
  font-size:15px;font-weight:700;text-decoration:none;cursor:pointer;font-family:inherit;
  transition:transform .2s var(--curva),box-shadow .25s var(--curva),background .2s;
}
.btn svg{width:18px;height:18px;flex:none}
.btn-1{background:var(--verde);color:#03150D;box-shadow:0 10px 34px -12px rgba(var(--verde-rgb),.8)}
.btn-1:hover{transform:translateY(-2px);box-shadow:0 18px 44px -12px rgba(var(--verde-rgb),.95)}
.btn-2{background:var(--vidro);border-color:var(--borda);color:var(--texto);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.btn-2:hover{transform:translateY(-2px);background:var(--vidro-2);border-color:var(--borda-2)}
.btn-p{padding:11px 20px;font-size:14px}

/* ---------- 5. o mundo ---------- */
/* Nenhum ancestral destes elementos pode ter transform/filter: isso prenderia
   o .zap-fixo dentro de um bloco de contenção e quebraria o backdrop-filter. */
#mundo,#campo{
  position:fixed;inset:0;width:100%;height:100svh;height:100vh;
  z-index:0;pointer-events:none;display:none;
}
html[data-motor="cine"] #mundo{display:block}
html[data-motor="leve"] #campo{display:block}

/* fundo de segurança: existe em TODOS os níveis, atrás do canvas */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;
  background:
    radial-gradient(58% 46% at 50% 34%, rgba(var(--verde-rgb),.16) 0%, transparent 62%),
    radial-gradient(100% 70% at 88% 6%,  rgba(60,120,255,.10) 0%, transparent 60%),
    linear-gradient(175deg,#060910 0%,var(--preto-2) 48%,#04070B 100%);
}
.marca-fallback{
  position:fixed;left:50%;top:34%;z-index:0;transform:translate(-50%,-50%);
  width:min(34vw,210px);aspect-ratio:268.3/336.5;height:auto;
  opacity:0;pointer-events:none;transition:opacity .6s;
}
html[data-motor="estatico"] .marca-fallback{opacity:.9}

main{position:relative;z-index:1}

/* ---------- 6. hero ---------- */
.hero{
  position:relative;min-height:100svh;min-height:100vh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-bottom:clamp(40px,7vw,72px);
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to top,rgba(4,6,10,.92) 0%,rgba(4,6,10,.66) 30%,
             rgba(4,6,10,.04) 62%,rgba(4,6,10,.35) 100%);
}
.hero-txt{position:relative;max-width:820px}
.selo{
  display:inline-flex;align-items:center;gap:10px;padding:7px 15px 7px 11px;margin-bottom:26px;
  border:1px solid var(--borda);border-radius:999px;background:var(--vidro);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  font-size:12px;font-weight:600;letter-spacing:.05em;color:var(--texto-2);
}
.selo i{width:6px;height:6px;border-radius:50%;background:var(--verde);flex:none;
  box-shadow:0 0 0 3px rgba(var(--verde-rgb),.18)}
.hero .linha{color:var(--texto-2);font-size:clamp(1rem,1.8vw,1.2rem);max-width:54ch;margin-bottom:16px}
.tagline{font-size:13.5px;font-style:italic;color:var(--texto-3);
  border-left:2px solid rgba(var(--verde-rgb),.5);padding-left:14px;margin-bottom:32px}
.acoes{display:flex;flex-wrap:wrap;gap:12px}

/* selo técnico acima da dobra: responde "isso tem engenheiro?" antes do
   primeiro clique, sem competir com os botões. */
.selo-tec{margin-top:20px;font-size:12.5px;line-height:1.7;color:var(--texto-3);max-width:60ch}
.selo-tec b{color:var(--texto-2);font-weight:700}

/* o alvo do "pular para o conteúdo" recebe foco por programação; o anel do
   :focus-visible aqui seria um retângulo em volta da tela inteira. */
[tabindex="-1"]:focus{outline:none}

.dica{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--texto-3)}
.dica span{display:block;width:1px;height:36px;
  background:linear-gradient(to bottom,var(--verde),transparent);animation:desce 2.2s infinite}
@keyframes desce{0%{transform:scaleY(0);transform-origin:top}
  50%{transform:scaleY(1);transform-origin:top}
  51%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}}
@media (max-width:900px){
  .dica{display:none}
  .hero{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
  .hero::after{background:linear-gradient(to top,rgba(4,6,10,.96) 0%,rgba(4,6,10,.90) 46%,
               rgba(4,6,10,.50) 70%,rgba(4,6,10,.18) 90%,rgba(4,6,10,.50) 100%)}
}

/* ---------- 7. seções ---------- */
.secao{position:relative;padding:clamp(84px,13vw,150px) 0}
/* capítulos: no modo cine ganham percurso para a câmera viajar */
html[data-motor="cine"] .cap{min-height:116svh;display:flex;flex-direction:column;justify-content:center}
html[data-motor="cine"] .cap.hero{justify-content:flex-end;min-height:100svh}

/* scrim: todo bloco de texto carrega o próprio contraste, medido contra o
   quadro MAIS CLARO do capítulo, não contra o fundo em repouso */
.scrim{
  background:var(--scrim);
  backdrop-filter:blur(14px) saturate(1.15);-webkit-backdrop-filter:blur(14px) saturate(1.15);
  border:1px solid var(--borda);border-radius:var(--raio);
  padding:clamp(26px,4vw,44px);
}
html[data-motor="cine"] .secao{background:transparent}
/* Cartaz: o bloco de título+intro carrega o próprio contraste. Sem ele, o
   texto branco fica sobre um quadro de luminância média ~110 no capítulo do
   portfólio (medido), o que derruba o contraste para ~5:1. */
.cartaz{max-width:min(100%,780px)}

/* ---------- 7b. ANCORAGEM: o corte de cena ----------
   Até 27/07 as seis seções de conteúdo tinham a caixa de texto na MESMA
   posição e na MESMA largura — medido: 445px de borda e 1240 de largura, seis
   vezes seguidas, todas dentro do mesmo cartão de vidro fosco. O mundo atrás
   trocava de capítulo; a composição na frente nunca trocava, e rolar virava
   metrônomo em vez de montagem. Cinema é CORTE: o enquadramento muda de cena
   para cena. Estas classes existem para isso, e para nada além. */
.bloco{max-width:min(100%,780px)}
.bloco.leitura{max-width:min(100%,620px)}
@media (min-width:901px){
  .ancora-dir > .bloco{margin-left:auto}
  .ancora-esq > .bloco{margin-right:auto}
  .cartaz.leitura{max-width:min(100%,620px)}
}

/* O ÚNICO momento simétrico do percurso, e é #servicos de propósito: é o hub
   da página, onde as quatro frentes se apresentam de uma vez. Depois de dois
   capítulos assimétricos, centrar aqui lê como "pausa e apresentação" — e faz
   os assimétricos ao redor parecerem escolha, não descuido. */
.cartaz.centro{margin-inline:auto;text-align:center}
.cartaz.centro .intro{margin-inline:auto}
.cartaz.centro .rotulo::before{content:""}   /* o "// " descentra o rótulo */

/* O capitulo tecnico (#obras) ja teve tratamento proprio aqui: sem cartao,
   com scrim radial no lugar da caixa. A intencao era quebrar o padrao uma
   vez, e a licenca era medida (e o quadro mais escuro do site). Passou por
   tres versoes -- desvanecimento ate zero, piso de 50%, ::before transbordando
   -- e as tres foram recusadas pelo dono, sempre pelo mesmo motivo: sem a
   moldura, a mancha escura nao le como decisao de composicao, le como sobra
   fora do padrao das outras secoes. REMOVIDO. #obras usa o .cartaz padrao
   como todo mundo; a variedade da pagina vem da ANCORAGEM e da largura
   (secao 7b), nao de tirar a caixa de uma secao. Nao reintroduzir. */
html[data-motor="cine"] .cartaz{
  background:var(--scrim);
  backdrop-filter:blur(18px) saturate(1.15);-webkit-backdrop-filter:blur(18px) saturate(1.15);
  border:1px solid var(--borda);border-radius:var(--raio);
  padding:clamp(24px,3.4vw,40px);
}
html:not([data-motor="cine"]) .servicos{background:linear-gradient(to bottom,var(--preto),var(--preto-2))}
html:not([data-motor="cine"]) .render{background:linear-gradient(to bottom,var(--preto-2),var(--preto-3) 40%,var(--preto-2))}
html:not([data-motor="cine"]) .prova{background:var(--preto)}
html:not([data-motor="cine"]) .sobre{background:linear-gradient(to bottom,var(--preto),var(--preto-2))}

.ficha{display:grid;gap:14px;margin:28px 0 0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr))}
.ficha div{border-left:1px solid var(--borda);padding-left:14px}
.ficha dt{font-size:var(--tipo-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--texto-3)}
.ficha dd{margin:4px 0 0;font-size:15px;font-weight:600}

.cards{display:grid;gap:18px;margin-top:52px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
/* Serviços tem QUATRO frentes. No auto-fit acima, 1280px dá 3 colunas e a
   quarta frente — a RenderIA — ficava sozinha numa segunda linha, com cara
   de sobra. 2x2 equilibra e ainda dá largura para os 4 itens de cada lista. */
@media (min-width:901px){.servicos .cards{grid-template-columns:repeat(2,1fr)}}
.card{
  position:relative;padding:32px 28px 30px;border-radius:var(--raio);
  border:1px solid var(--borda);background:var(--scrim);
  backdrop-filter:blur(16px) saturate(1.15);-webkit-backdrop-filter:blur(16px) saturate(1.15);
  overflow:hidden;transition:transform .35s var(--curva),border-color .35s,background .35s;
}
.card::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(320px 220px at var(--mx,50%) var(--my,0%),rgba(var(--verde-rgb),.16),transparent 68%)}
.card:hover{transform:translateY(-5px);border-color:var(--borda-2)}
.card:hover::before{opacity:1}
.card .ico{width:46px;height:46px;display:grid;place-items:center;border-radius:11px;margin-bottom:22px;
  background:rgba(var(--verde-rgb),.11);border:1px solid rgba(var(--verde-rgb),.24);color:var(--verde)}
.card .ico svg{width:22px;height:22px}
.card h3{margin-bottom:11px}
.card p{color:var(--texto-2);font-size:15px}
.card ul{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:7px}
.card li{position:relative;padding-left:18px;font-size:14px;color:var(--texto-2)}
.card li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;
  background:var(--verde);opacity:.75;clip-path:polygon(0 50%,50% 0,100% 50%,50% 100%)}

/* lista de equipamentos: cada item é um link direto de WhatsApp com o pedido
   já escrito. O preço é "sob consulta" por decisão do dono. */
.equip{margin:20px 0 0;padding:0;list-style:none;display:grid;gap:2px}
.equip li{padding:0}
.equip li::before{display:none}
.equip a{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:11px 2px;font-size:15px;color:var(--texto);text-decoration:none;
  border-bottom:1px solid var(--borda);transition:color .2s,border-color .2s}
.equip li:last-child a{border-bottom:0}
.equip a span{flex:none;font-size:var(--tipo-micro);letter-spacing:.14em;
  text-transform:uppercase;color:var(--texto-3);transition:color .2s}
.equip a:hover,.equip a:focus-visible{color:var(--verde-claro);border-color:rgba(var(--verde-rgb),.42)}
.equip a:hover span,.equip a:focus-visible span{color:var(--verde)}
.equip-nota{margin-top:26px}
/* centralizado: no canto inferior esquerdo mora o HUD (position:fixed,
   z-index:35) e ele passava por cima deste botão durante a rolagem. */
.equip-cta{margin-top:22px;text-align:center}
@media (max-width:900px){.equip-cta{text-align:left}}

/* ---------- 8. RenderIA ---------- */
.render{position:relative;overflow:hidden}
html:not([data-motor="cine"]) .render{border-block:1px solid var(--borda)}
.render .env{position:relative;z-index:2}

.trilho-caixa{margin-top:56px;position:relative}
.trilho{display:flex;gap:20px;padding:34px var(--gap) 42px;margin-inline:calc(var(--gap)*-1);
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  perspective:1400px;scrollbar-width:none}
.trilho::-webkit-scrollbar{display:none}
.peca{position:relative;flex:0 0 min(76vw,392px);aspect-ratio:4/5;scroll-snap-align:center;
  border-radius:18px;overflow:hidden;border:1px solid var(--borda);background:var(--vidro);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transform-style:preserve-3d;
  transition:transform .5s var(--curva),border-color .4s,box-shadow .5s var(--curva);will-change:transform}
.peca:hover{border-color:rgba(var(--verde-rgb),.42);box-shadow:0 30px 70px -30px rgba(var(--verde-rgb),.55)}
.peca img{width:100%;height:100%;object-fit:cover}
.peca .leg{position:absolute;inset:auto 0 0;padding:56px 22px 20px;
  background:linear-gradient(to top,rgba(4,6,10,.96),rgba(4,6,10,.6) 55%,transparent)}
.peca .leg b{display:block;font-size:1.06rem;font-weight:700;letter-spacing:-.01em}
.peca .leg small{color:var(--texto-3);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase}

.trilho-nav{display:flex;align-items:center;gap:12px;margin-top:8px}
.trilho-nav button{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:var(--vidro);border:1px solid var(--borda-ctrl);color:var(--texto);
  transition:background .2s,border-color .2s,transform .2s,opacity .2s}
.trilho-nav button:hover{background:var(--vidro-2);border-color:var(--borda-2);transform:scale(1.06)}
/* o site.js desabilita estes botões nas pontas do trilho e não havia NENHUMA
   regra :disabled no CSS: o botão morto continuava com cara de clicável. */
.trilho-nav button:disabled{opacity:.34;cursor:default;transform:none;
  background:var(--vidro);border-color:var(--borda)}
.trilho-nav button:disabled:hover{transform:none;background:var(--vidro)}
.trilho-nav svg{width:17px;height:17px}
.trilho-nav .barra{flex:1;height:2px;background:var(--borda);border-radius:2px;overflow:hidden}
.trilho-nav .barra i{display:block;height:100%;width:18%;background:var(--verde);
  border-radius:2px;transform-origin:left;transition:transform .15s linear}

/* no modo cine as placas viram objetos de mundo; o trilho continua na árvore
   de acessibilidade e no índice do Google, mas sai da tela */
html[data-motor="cine"] .trilho-caixa{
  position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
  margin:0;padding:0;pointer-events:none;
}
/* Mas o trilho e os 2 botões continuam na ordem de tabulação: sem isto o foco
   do teclado desaparecia dentro de uma caixa de 1px. Ao receber foco, a caixa
   volta à página (mesmo padrão do link "pular para o conteúdo"). */
html[data-motor="cine"] .trilho-caixa:focus-within{
  position:static;width:auto;height:auto;overflow:visible;clip-path:none;pointer-events:auto;
}

/* legendas 3D das placas */
/* z-index 0: as legendas ficam sobre a placa (canvas) mas ATRÁS das caixas de
   texto (main, z-index 1). Assim nunca cobrem o título/scrim. */
.legendas{position:fixed;inset:0;z-index:0;pointer-events:none;display:none}
html[data-motor="cine"] .legendas{display:block}
.leg3d{
  position:absolute;top:0;left:0;opacity:0;white-space:nowrap;text-align:center;
  padding:10px 18px;border-radius:999px;
  background:rgba(4,10,14,.72);border:1px solid var(--borda);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:opacity .3s;
}
.leg3d b{display:block;font-size:15px;font-weight:700;letter-spacing:-.01em}
.leg3d small{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--texto-3)}

/* comparador antes/depois */
.comparador{position:relative;margin-top:64px;border-radius:18px;overflow:hidden;
  border:1px solid var(--borda);aspect-ratio:21/9;background:var(--preto-3);touch-action:pan-y}
.comparador .lado{position:absolute;inset:0}
/* MEDIDO EM 30/07/2026, e eram TRÊS defeitos somados no mesmo gesto:
   1. `<img>` é arrastável por padrão. Pressionar e puxar iniciava o
      drag-and-drop NATIVO do navegador — o fantasma da foto colado no cursor e
      o símbolo de proibido. O `user-drag` cobre WebKit/Blink; o atributo
      `draggable="false"` no HTML cobre o resto.
   2. `pointer-events:none` tira as duas imagens do caminho de vez: quem tem de
      receber o gesto é o <input type=range>, e só ele.
   3. `user-select:none` evita a seleção de texto fantasma que aparecia ao
      arrastar rápido para fora da caixa. */
.comparador .lado img{width:100%;height:100%;object-fit:cover;
  pointer-events:none;-webkit-user-drag:none;user-select:none;-webkit-user-select:none}
.comparador .depois{clip-path:inset(0 0 0 var(--corte,50%))}
/* A CAUSA RAIZ DO "TENHO QUE PEGAR NO PIXEL EXATO". O .puxador vem DEPOIS do
   input no DOM, então ficava por cima dele — e com o círculo de 44px do ::after
   ele roubava o ponteiro exatamente onde qualquer pessoa agarra: a alça verde.
   Medido com elementFromPoint no centro da alça: quem recebia era `div.puxador`,
   que não faz nada. Só funcionava agarrando FORA da alça, no vão da imagem.
   Ele é `aria-hidden` e puramente decorativo, então nunca deveria receber
   ponteiro nenhum. Não devolva `pointer-events` a ele. */
.comparador .puxador{position:absolute;top:0;bottom:0;left:var(--corte,50%);width:2px;
  pointer-events:none;
  background:var(--verde);transform:translateX(-1px);box-shadow:0 0 22px rgba(var(--verde-rgb),.85)}
.comparador .puxador::after{content:"";position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;
  background:var(--verde);box-shadow:0 6px 24px rgba(0,0,0,.55)}
.comparador .tag{position:absolute;top:14px;padding:6px 12px;border-radius:999px;font-size:11px;
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  background:rgba(4,6,10,.72);border:1px solid var(--borda);backdrop-filter:blur(8px)}
.comparador .tag.e{left:14px}
.comparador .tag.d{right:14px;color:var(--verde);border-color:rgba(var(--verde-rgb),.4)}
/* `touch-action:pan-y` também AQUI, não só no pai: o input é quem recebe o
   gesto, e sem a declaração própria ele herdava `auto` — no celular o navegador
   ficava indeciso entre rolar a página e mover o controle, e o arraste saía aos
   trancos. Com `pan-y`, o movimento vertical continua rolando a página e o
   horizontal é do comparador, sem disputa. */
.comparador input[type=range]{position:absolute;inset:0;width:100%;height:100%;margin:0;
  opacity:0;cursor:ew-resize;touch-action:pan-y}
.comparador input[type=range]:focus-visible + .puxador{outline:2px solid var(--verde);outline-offset:6px}

/* ---------- 9. prova e sobre ---------- */
.numeros{display:grid;gap:1px;margin-top:52px;background:var(--borda);
  border:1px solid var(--borda);border-radius:var(--raio);overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
.numeros div{background:rgba(4,8,12,.86);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);padding:30px 24px}
.numeros b{display:block;font-size:clamp(1.9rem,4.4vw,2.7rem);font-weight:800;
  letter-spacing:-.03em;line-height:1;margin-bottom:9px}
.numeros span{font-size:13px;color:var(--texto-2)}

/* Credencial logo abaixo da fileira: texto corrido, não estatística. É aqui
   que "CREA-CE 356652" mora sem gerar expectativa de separador de milhar. */
.creditos{margin-top:20px;max-width:none}

.depos{display:grid;gap:18px;margin-top:22px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.depo{padding:28px;border:1px solid var(--borda);border-radius:var(--raio);background:var(--scrim);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.depo p{color:var(--texto-2);font-size:15px;font-style:italic;margin-bottom:18px}
/* obra-ref: cartão de obra entregue (fato, não citação) — sem itálico de fala */
.depo.obra-ref p{font-style:normal}
.depo.obra-ref footer b{color:var(--verde)}
.depo footer{font-size:13px;color:var(--texto-3)}
.depo footer b{color:var(--texto);font-weight:700;font-style:normal}

.regiao{display:flex;flex-wrap:wrap;gap:10px;margin-top:38px}
.regiao span{padding:9px 17px;border-radius:999px;border:1px solid var(--borda);
  background:var(--scrim);font-size:13px;font-weight:600;color:var(--texto-2)}
.regiao span b{color:var(--verde);font-weight:700}

.sobre-grade{display:grid;gap:clamp(30px,5vw,64px);align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.sobre-grade p{color:var(--texto-2);margin-bottom:16px}
.selo-marca{position:relative;aspect-ratio:1;border-radius:20px;display:grid;place-items:center;
  border:1px solid var(--borda);overflow:hidden;
  background:radial-gradient(70% 70% at 50% 42%,rgba(var(--verde-rgb),.14),transparent 70%),
             linear-gradient(160deg,#0B1219,#070A0F)}
.selo-marca svg{width:44%;filter:drop-shadow(0 0 44px rgba(var(--verde-rgb),.45))}

/* ---------- 10. contato: fundo OPACO, mundo congelado ---------- */
.contato{background:var(--preto-2);border-top:1px solid var(--borda);z-index:3}
html[data-motor="cine"] .contato{background:var(--preto-2)}
.contato-grade{display:grid;gap:clamp(28px,4vw,52px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.canais{display:grid;gap:12px;margin-top:34px;align-content:start}
.canal{display:flex;align-items:center;gap:15px;padding:17px 20px;border-radius:12px;
  border:1px solid var(--borda-ctrl);background:var(--vidro);text-decoration:none;
  transition:border-color .25s,background .25s,transform .25s var(--curva)}
.canal:hover{border-color:rgba(var(--verde-rgb),.4);background:var(--vidro-2);transform:translateX(4px)}
.canal .ico{width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:10px;
  background:rgba(var(--verde-rgb),.11);color:var(--verde)}
.canal .ico svg{width:19px;height:19px}
.canal b{display:block;font-size:14.5px;font-weight:700}
.canal small{color:var(--texto-2);font-size:12.5px}

form{display:grid;gap:14px;padding:clamp(24px,4vw,34px);border-radius:var(--raio);
  border:1px solid var(--borda);background:rgba(255,255,255,.04)}
.campo{display:grid;gap:7px}
.campo label{font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--texto-2)}
.campo label i{color:var(--verde);font-style:normal}
/* 16px fixo: abaixo disso o iOS dá zoom automático no foco e destrói o layout */
input,select,textarea{width:100%;padding:14px 15px;border-radius:10px;font:inherit;font-size:16px;
  background:rgba(0,0,0,.34);border:1px solid var(--borda-ctrl);color:var(--texto);
  transition:border-color .2s,background .2s}
input::placeholder,textarea::placeholder{color:var(--texto-3)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--verde);background:rgba(0,0,0,.5)}
/* O outline:none acima vencia a regra global de :focus-visible e sobrava só a
   borda de 1px — abaixo do mínimo do WCAG 2.4.11 e, no teclado, quase
   impossível saber em que campo se está. O anel volta SÓ para o teclado. */
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--verde);outline-offset:2px}
textarea{resize:vertical;min-height:112px}
select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--texto-2) 50%),
                   linear-gradient(135deg,var(--texto-2) 50%,transparent 50%);
  background-position:calc(100% - 20px) 23px,calc(100% - 15px) 23px;
  background-size:5px 5px;background-repeat:no-repeat}
select option{background:var(--preto-2);color:var(--texto)}
.mel{position:absolute!important;left:-9999px;opacity:0;height:0;width:0;pointer-events:none}
.aviso{font-size:13px;color:var(--texto-3)}
/* era style="margin-top:14px" no HTML. A CSP do .htaccess declara
   style-src 'self' SEM 'unsafe-inline' — o atributo inline é bloqueado no
   navegador que respeita a política, e afrouxar a CSP para acomodar quatro
   margens seria trocar uma qualidade real do site por conveniência. */
.dica-cmp{margin-top:14px}
/* página de retorno do enviar.php (o caminho sem JavaScript) */
.retorno{max-width:620px}
.retorno h2{margin-bottom:16px}
.retorno-cta{margin-top:32px}
.render-cta{margin-top:30px;text-align:center}
@media (max-width:900px){.render-cta{text-align:left}}

/* endereço e CNPJ visíveis, não só no JSON-LD */
.endereco{margin-top:26px;font-style:normal;font-size:13px;line-height:1.75;color:var(--texto-3)}
.endereco b{display:block;color:var(--texto-2);font-size:14px;font-weight:700;margin-bottom:2px}
/* display:none tira o <p role="status" aria-live="polite"> da árvore de
   acessibilidade: quando o JS revelava e escrevia no mesmo tique, a maioria
   dos leitores de tela não anunciava nada. Com visibility o elemento existe
   desde o carregamento e a live region funciona. Sem altura enquanto vazio. */
.recado{border-radius:10px;font-size:14px;
  visibility:hidden;padding:0 16px;height:0;overflow:hidden}
.recado.ok,.recado.erro{visibility:visible;padding:14px 16px;height:auto;overflow:visible}
.recado.ok{background:rgba(var(--verde-rgb),.12);
  border:1px solid rgba(var(--verde-rgb),.4);color:var(--verde-claro)}
.recado.erro{background:rgba(255,90,90,.10);
  border:1px solid rgba(255,90,90,.42);color:#FFB4B4}
.recado a{color:inherit}

/* ---------- 11. rodapé ---------- */
.rodape{position:relative;z-index:3;background:var(--preto);border-top:1px solid var(--borda);
  padding:56px 0 calc(40px + env(safe-area-inset-bottom))}
.rodape-grade{display:flex;flex-wrap:wrap;gap:32px;justify-content:space-between;align-items:flex-start}
.rodape .marca svg{height:52px}
.rodape nav{display:flex;flex-wrap:wrap;gap:22px}
.rodape nav a{color:var(--texto-2);text-decoration:none;font-size:13.5px;transition:color .2s}
.rodape nav a:hover{color:var(--texto)}
/* O diferencial do escoramento com ART, na seção de locação. Filete verde como
   a .tagline, mas SEM itálico e na cor de texto normal: é argumento de venda com
   consequência legal, não epígrafe — itálico e cinza-claro leem como nota de
   rodapé, e esta linha é o motivo de o cliente escolher a Eixo Z. */
.escoramento-art{margin:18px 0 0;padding:12px 0 12px 16px;font-size:15px;
  line-height:1.6;color:var(--texto-2);border-left:2px solid var(--verde)}
.escoramento-art b{color:var(--texto)}

/* SELO BÍBLICO (L-113) — o mesmo versículo do wall da fábrica, trocado a cada 777 s.
   FAIXA FIXA: pedido do dono, "sempre visível". Fica no rodapé da JANELA, não no rodapé
   do documento.

   POR QUE ELA RESERVA ESPAÇO. O `site.js` §12 mede a altura real da faixa e publica em
   `--selo-h`; o `body` desconta essa altura no padding-bottom e o HUD sobe na mesma
   medida. É o mesmo contrato que a `.zap-fixo` já cumpre no celular, e o contrato é
   este, dito sem exagero: **nada fica inalcançável**. Uma barra fixa qualquer passa
   por cima de conteúdo no meio da rolagem — o que a reserva garante é que sempre
   existe rolagem suficiente para trazer qualquer coisa (o botão de enviar o
   orçamento, a última linha do rodapé) para cima da faixa. Sem a reserva, o fim do
   documento ficaria preso atrás dela para sempre.
   Se mexer aqui, confira que `--selo-h` continua batendo com a altura medida.

   A altura é variável de propósito: os versos têm comprimentos diferentes e o layout
   cede quantas linhas precisar. A Palavra não se recorta para caber — é a mesma regra
   que vale no wall da fábrica (nada de reticências, nada de `text-overflow`).

   z-index 40: acima do conteúdo (1) e do HUD (35), abaixo do cabeçalho (100) e da barra
   de WhatsApp (110), que pela regra 2 nunca podem ser cobertos por coisa alguma. */
.selo-verso{
  position:fixed;left:0;right:0;bottom:0;z-index:40;margin:0;
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;
  gap:4px 14px;padding:9px var(--gap);
  padding-bottom:calc(9px + env(safe-area-inset-bottom));
  /* OPACA DE VERDADE, e sem backdrop-filter, por dois motivos já pagos aqui:
     1. o painel do menu do celular provou que a rgba(4,6,10,.97) + blur o texto do
        capítulo atrás AINDA lê através. Esta faixa fica por cima de conteúdo o tempo
        todo, então translucidez vira sujeira permanente, não profundidade.
     2. backdrop-filter permanente sobre o canvas do mundo obriga o navegador a refazer
        o desfoque a cada quadro que o WebGL repinta — custo por frame, para sempre, no
        único elemento que nunca sai da tela. */
  background:var(--preto);border-top:1px solid var(--borda);
}
.selo-verso[hidden]{display:none}
.verso-texto{margin:0;font-size:13px;font-style:italic;line-height:1.5;color:var(--texto-2);
  max-width:88ch;text-align:center}
.verso-ref{font-style:normal;font-size:11.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--verde);white-space:nowrap}
/* A RESERVA. `--selo-h` é escrita pelo site.js §12 com a altura medida da faixa (e volta
   a 0px se ela não subir). Enquanto valer 0px, tudo abaixo se comporta como antes — é o
   que garante que uma falha do selo não mexa no layout de ninguém. */
body{padding-bottom:var(--selo-h,0px)}

.legal{margin-top:38px;padding-top:24px;border-top:1px solid var(--borda);
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:13px;color:var(--texto-2)}

.zap-fixo{
  position:fixed;left:12px;right:12px;bottom:12px;z-index:110;display:none;
  align-items:center;justify-content:center;gap:10px;
  padding:16px;padding-bottom:calc(16px + env(safe-area-inset-bottom));
  border-radius:14px;background:var(--verde);color:#03150D;
  font-weight:800;font-size:16px;text-decoration:none;box-shadow:0 14px 40px -10px rgba(0,0,0,.85);
}
.zap-fixo svg{width:21px;height:21px}
@media (max-width:900px){
  .zap-fixo{display:flex}
  /* a faixa do selo sobe para cima da barra de WhatsApp: pela regra 2 o botão que gera
     o orçamento é o último elemento que pode ser coberto ou empurrado. Aqui ela já não
     encosta na borda da tela, então o safe-area sai do padding (quem paga o entalhe é
     a .zap-fixo, embaixo) — mantê-lo aqui abriria um vão duplo no iPhone. */
  /* 78px = os 12px de folga da .zap-fixo + os 58px de altura dela + 8px de respiro.
     Medido, não estimado: a 68px as duas se tocavam por 2px. */
  .selo-verso{bottom:calc(78px + env(safe-area-inset-bottom));padding:8px var(--gap)}
  /* o verso quebra em 3-4 linhas a 375px; um ponto a menos e entrelinha mais curta
     devolvem ~18px de tela sem chegar perto do limite de legibilidade. */
  .verso-texto{font-size:12px;line-height:1.45}
  .verso-ref{font-size:11px}
  body{padding-bottom:calc(78px + var(--selo-h,0px))}
  .rodape{padding-bottom:86px}

  /* A RESERVA DO HERO — é ela que permite a faixa do versículo ser permanente
     no celular (o site.js não a esconde mais no hero; ver §12 de lá).
     O hero é 100svh com o conteúdo no pé: sem isto os CTAs nasceriam debaixo
     da mobília fixa (barra de WhatsApp, 78px, + faixa do selo, `--selo-h`).
     Com o padding, os botões nascem ACIMA das duas, com qualquer verso do
     acervo — a regra 1 do §8 (nada cobre os CTAs) volta a ser garantida pelo
     layout, que é onde ela sempre deveria ter morado, e não por um observador
     de rolagem. A dica "Role" acompanha, senão fica atrás da faixa. */
  .hero{padding-bottom:calc(clamp(40px,7vw,72px) + 78px + var(--selo-h,0px))}
  .dica{bottom:calc(18px + 78px + var(--selo-h,0px))}
}

/* ---------- 15b. escala do celular ----------
   O `--tipo-display` global tem piso de 2.6rem (41,6px). Numa tela de 393px
   isso rende um h1 de três linhas gigantes e o conteúdo do hero fica MAIS ALTO
   que a janela — o selo da região subia por cima do cabeçalho e o texto
   tampava a marca de partículas (visto no aparelho do dono, 31/07). Abaixo de
   560px a manchete passa a escalar COM a tela (9.2vw): 36px a 393, 29px a 320.
   O teto de 2.6rem garante que, chegando perto dos 560, ela encontra o piso
   da escala global sem degrau visível. O resto encolhe junto, na mesma
   proporção, para o bloco inteiro do hero caber numa tela com folga e a marca
   respirar atrás do texto. */
@media (max-width:560px){
  :root{--tipo-display:clamp(1.85rem,9.2vw,2.6rem)}
  /* Nas telas MENORES (capa de Fold, 320px) o bloco do hero pode ficar mais
     alto que a janela mesmo com a escala reduzida. O hero cresce além dos
     100svh — mas, com justify-end, o conteúdo passa a nascer em y=0, DEBAIXO
     do cabeçalho fixo (79px medidos). O padding-top só age exatamente nesse
     caso de transbordo; quando o conteúdo cabe, quem manda é o justify-end e
     este padding não move nada. */
  .hero{padding-top:calc(92px + env(safe-area-inset-top))}
  .selo{font-size:11px;margin-bottom:14px;padding:6px 12px 6px 9px}
  .display{margin-bottom:14px}
  .hero .linha{font-size:15px;margin-bottom:12px}
  .tagline{font-size:12.5px;margin-bottom:20px}
  .intro{font-size:15px}
  .selo-tec{font-size:11.5px;margin-top:14px}
}

/* ---------- 15c. telas largas ----------
   Pedido do dono (31/07, monitor ultrawide): "as informações ficam
   centralizadas e sobra um espaço gigante nas laterais". O teto de conteúdo
   era fixo em 1240px — num 3440 sobravam 2200px de margem. Aqui o teto passa a
   acompanhar a janela (80vw, até 1880px): a ancoragem por seção (§6b do
   README) já espalha os blocos para bordas opostas, então alargar o trilho é o
   que faz o percurso usar a tela. As quatro frentes de Serviços abrem em UMA
   fileira — é a informação se espalhando na horizontal em vez de empilhar no
   centro. A manchete ganha um teto maior para não parecer selo de correio no
   meio de um mar de pixels. Os blocos de LEITURA (.cartaz, .bloco) mantêm seus
   máximos de 620–780px: linha de texto com 200 caracteres não é largura, é
   fadiga. */
@media (min-width:1680px){
  :root{--larg:min(80vw,1880px);--tipo-display:clamp(2.6rem,5vw,7.4rem)}
  .hero-txt{max-width:960px}
  .servicos .cards{grid-template-columns:repeat(4,1fr)}
  /* A FONTE E A CAIXA SOBEM JUNTAS. O teto de 7.4rem acima foi adicionado sem
     alargar o cartaz, e a palavra mais longa do site vazou do cartão: medido a
     2560, "fotorrealismo." = 783px numa caixa útil de 700 (83px para fora), e
     "responsável." estourava por 1px. 900px de cartaz = 820 úteis, com folga
     para as duas. Os blocos .leitura ficam nos 620: a palavra mais longa deles
     ("comprar.") mede 519px no corpo grande e cabe. Se criar manchete nova com
     palavra mais comprida que "fotorrealismo.", meça — ou confie na rede logo
     abaixo, que degrada quebrando a palavra em vez de vazar do cartão. */
  .cartaz{max-width:min(100%,900px)}
}

/* rede de segurança tipográfica: uma palavra que não cabe na caixa QUEBRA
   dentro dela, em vez de atravessar a borda do cartão por cima do mundo.
   `anywhere` só age quando não existe nenhum outro ponto de quebra — com as
   larguras calibradas acima ela nunca dispara; existe para a manchete que
   ainda não foi escrita. O max-width nos .ln cobre o caminho fatiado (cada
   palavra é um inline-block; sem teto, o bloco inteiro vaza como um tijolo). */
.display{overflow-wrap:anywhere}
.display .ln{max-width:100%}

/* ---------- 12. HUD: roteador de lead ---------- */
.hud{
  /* sobe a altura da faixa do selo: os dois moram no rodapé da janela e o HUD é
     o que cede, porque a faixa é permanente e ele é episódico. */
  position:fixed;left:clamp(16px,3vw,42px);
  bottom:calc(clamp(16px,3vw,42px) + var(--selo-h,0px));z-index:35;
  /* visibility:hidden é o que tira os links do FOCO e do CLIQUE enquanto o HUD
     está apagado. Só opacity:0 deixava os 4 wa.me clicáveis por cima do CTA do
     hero — e para sempre em prefers-reduced-motion, onde .on nunca é posta. */
  pointer-events:none;opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .5s var(--curva),transform .5s var(--curva),visibility .5s;
  padding:16px 22px;border-radius:22px;
  background:rgba(4,10,14,.72);border:1px solid rgba(255,255,255,.09);
  backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);
}
.hud.on{opacity:1;transform:none;visibility:visible}
.hud p{font-size:var(--tipo-micro);font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--texto-3);margin-bottom:10px}
.hud ul{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.hud a{
  pointer-events:auto;display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:600;color:var(--texto-2);text-decoration:none;transition:color .2s;
}
.hud a::before{content:"–";color:var(--texto-3);opacity:.5;transition:color .2s,opacity .2s}
.hud a:hover,.hud a:focus-visible{color:#fff}
.hud a:hover::before,.hud a:focus-visible::before{content:"→";color:var(--verde);opacity:1}
@media (max-width:900px){.hud{display:none}}

/* ---------- 13. movimento ---------- */
.sobe{opacity:0;transform:translateY(26px);
  transition:opacity .8s var(--curva),transform .8s var(--curva)}
.sobe.vis{opacity:1;transform:none}
.sobe:nth-child(2){transition-delay:.07s}
.sobe:nth-child(3){transition-delay:.14s}
.sobe:nth-child(4){transition-delay:.21s}

/* ---------- 14. degradação ---------- */
html[data-motor="leve"] .card,html[data-motor="leve"] .peca,
html[data-motor="leve"] .scrim,html[data-motor="leve"] .canal,
html[data-motor="estatico"] .card,html[data-motor="estatico"] .peca,
html[data-motor="estatico"] .scrim,html[data-motor="estatico"] .canal{
  backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.05);
}
html[data-motor="estatico"] .topo.solido{backdrop-filter:none;background:rgba(4,6,10,.97)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .sobe{opacity:1;transform:none}
  .ln>i{transform:none}
  .dica span{animation:none;height:36px}
}

.sem-js .sobe{opacity:1;transform:none}
.sem-js .ln>i{transform:none}

/* ---------- 15. alto contraste do Windows ----------
   No modo de alto contraste o sistema descarta cor de fundo e sombra. Quem
   for pintado só por `background` some: era o caso do .puxador do comparador
   (um <div> de 2px), da barra de progresso do trilho e do quadradinho do
   .selo. Aqui eles voltam como BORDA, que o modo preserva. */
@media (forced-colors: active) {
  .comparador .puxador{background:CanvasText;forced-color-adjust:none;
    border-left:2px solid Highlight;width:0}
  .comparador .puxador::after{border:2px solid Highlight}
  .trilho-nav .barra{border:1px solid CanvasText;height:4px}
  .trilho-nav .barra i{background:Highlight;forced-color-adjust:none}
  .selo i{border:2px solid Highlight}
  .card,.canal,.peca,.scrim,.cartaz{border:1px solid CanvasText}
  .btn-1,.btn-2{border:2px solid ButtonText}
  .marca-fallback,.selo-marca{forced-color-adjust:none}
}