/* FONTES SELF-HOSTED (26/07/2026) — o CSS do Google custava DNS + TLS + uma
   requisicao encadeada antes de liberar os woff2: 260 ms de FCP medidos, e o
   IP de cada visitante ia para o Google. Subset latin, que cobre a acentuacao
   do portugues. font-display:swap mantido. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../assets/fonts/inter.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: 'Roboto Condensed'; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../assets/fonts/roboto-condensed.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; }

/* ===========================================================================
   DRC — Perfuração Direcional / Método Não Destrutivo · Landing v6 (UX pro)
   Roboto Condensed (display) + Inter (corpo e rótulos técnicos; mono banida)
   Navy industrial · cantos retos · abertura ESCURA (hero+strip navy-ink),
   corpo claro datasheet, fechamento navy · vermelho = SÓ conversão
   Refs: Active Theory (escala/disciplina), igloo.inc (mono HUD),
   Terminal Industries/TLC (blueprint) · motion contido

   ARQUITETURA RESPONSIVA (refactor mobile 07/2026): o CSS base (daqui até a
   "ZONA RESPONSIVA") descreve o DESKTOP. Todas as media queries de layout
   vivem na zona, no fim do arquivo, em ordem DESCENDENTE de largura —
   1400 → 1024 → 900 → 860 → 760 → 720 → 680 → 640 → 600 → 460 → preferências.
   NÃO criar @media fora da zona; regra nova entra na posição ordenada.
   =========================================================================== */

:root{
  /* marca */
  --navy:#012B81; --navy-logo:#012A82;
  --navy-ink:#010D26;                    /* fundo escuro além da marca (abertura/fechamento) */
  --sky:#1E73BE; --sky-soft:#59A5D8;
  --red:#E5342B; --red-deep:#c62b23; --green:#159a52;

  /* tema claro (corpo arejado "Apple-web") */
  --bg:#ffffff; --bg-2:#f4f8fd; --surface:#ffffff; --surface-2:#f7fafe;
  --ink:#0c1a36; --muted:#54627a; --faint:#5f6e87;
  --line:rgba(10,28,64,.10); --line-2:rgba(10,28,64,.05);

  /* tema escuro (hero/strip/stats/footer) */
  --d-text:#f2f6ff; --d-muted:#b8c4de; --d-faint:#8494b8;
  --d-line:rgba(255,255,255,.16); --d-line-2:rgba(255,255,255,.08);

  --font-display:'Roboto Condensed',Arial Narrow,system-ui,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,sans-serif;
  /* sem fonte mono no site (gosto do dono: "fonte de IA") — os rótulos técnicos
     usam a MESMA família do corpo, clássica e confiável; o alias --font-mono
     fica p/ não tocar nos ~30 pontos de uso */
  --font-mono:'Inter',Helvetica,Arial,system-ui,sans-serif;

  --maxw:1320px; --pad:clamp(20px,4vw,72px);
  --sec:clamp(64px,5.4vw,92px);
  --ease:cubic-bezier(.215,.61,.355,1); --ease-out:cubic-bezier(.16,1,.3,1);

  /* ARREDONDAMENTO (linguagem "DRC Precision" — Apple-web, bem arredondado) */
  --r-xs:8px; --r-s:12px; --r-m:16px; --r-l:20px; --r-xl:24px; --r-full:9999px;
  --radius:var(--r-m);   /* alias retrocompat (era 0 = cantos retos; agora 16px) */

  /* ELEVAÇÃO (sombras em matiz navy da marca, nunca cinza puro) */
  --e1:0 1px 2px rgba(10,28,64,.05), 0 2px 6px rgba(10,28,64,.05);
  --e2:0 2px 6px rgba(10,28,64,.06), 0 14px 30px -18px rgba(10,28,64,.30);
  --e3:0 20px 50px -28px rgba(1,43,129,.45);
}

*{box-sizing:border-box; margin:0; padding:0}
html{-webkit-text-size-adjust:100%; background:var(--navy-ink)}  /* overscroll nas pontas mostra navy, nunca branco */
/* rolagem nativa: o Lenis saiu em 26/07 (ver o comentário no topo do main.js).
   scroll-behavior fica no JS, por elemento, para respeitar prefers-reduced-motion */
body{
  background:var(--bg); color:var(--ink); font-family:var(--font-body);
  line-height:1.62; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
html.cursor-custom body{cursor:none}   /* só esconde o cursor nativo quando o cursor custom está ativo (JS confirmou pointer fino) */
a{color:inherit; text-decoration:none}
img,svg,video,canvas{display:block; max-width:100%}
button{font:inherit; color:inherit}
::selection{background:var(--navy); color:#fff}

/* DISPLAY — Roboto Condensed; contraste de escala brutal entre H1 e H2 */
h1,h2,h3{font-family:var(--font-display); font-weight:700; line-height:1.02; letter-spacing:-.01em}
.display{font-size:clamp(2.3rem,4.8vw,4.2rem); font-weight:700; letter-spacing:-.015em; line-height:1.02}
.h2{font-size:clamp(1.55rem,2.9vw,2.4rem); font-weight:700}

/* KICKERS / rótulos */
.kicker{font-family:var(--font-body); font-size:.74rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--sky); font-weight:600;
  display:inline-flex; align-items:center; gap:12px}
.kicker::before{content:""; width:32px; height:1px; background:var(--sky); opacity:.8; order:-1}
.kicker[data-i]::after{content:none}

.wrap{max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad)}

/* SEPARADOR DE SEÇÃO — âncora visual sóbria entre seções de fundo claro:
   hairline na largura do wrap + tick navy à esquerda (alinha com a régua do
   kicker). Guia o olho na transição sem competir com o conteúdo. */
.sec-sep{max-width:var(--maxw); margin:0 auto; padding:0 var(--pad)}
.sec-sep i{display:block; position:relative; height:1px; background:var(--line)}
.sec-sep i::before{content:""; position:absolute; left:0; top:-2px; width:32px; height:5px; background:var(--navy); border-radius:var(--r-full)}
.lead{font-size:clamp(1rem,1.2vw,1.16rem); color:var(--muted); max-width:56ch; line-height:1.62}
.lead b,.lead strong{color:var(--ink); font-weight:600}
section{position:relative}
/* rede de segurança p/ saltos de âncora nativos (Tab, link direto #hash, sem JS) —
   o JS (go() em main.js) já compensa a nav dinamicamente; isto cobre o fallback */
section[id],footer[id]{scroll-margin-top:104px}
.sec{padding:var(--sec) 0 calc(var(--sec) * .62)}
.eyebrow-row{margin-bottom:10px}

/* MARGINALIA — régua técnica vertical na CALHA externa ao wrap (só telas largas,
   onde existe gutter real fora do container de 1320px — senão colide com o conteúdo) */
.marginalia{position:absolute; top:var(--sec); right:calc((100% - var(--maxw)) / 2 - 6px); z-index:1;
  writing-mode:vertical-rl; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--faint); opacity:.5; display:flex; align-items:center; gap:14px}
.marginalia::after{content:""; width:1px; height:72px; background:var(--line)}

/* TICKS "+" de canto (estética prancha técnica) */
.ticks{position:relative}
.ticks::before,.ticks::after{content:"+"; position:absolute; z-index:2; font-family:var(--font-mono);
  font-size:14px; line-height:1; color:var(--sky); opacity:.7; pointer-events:none}
.ticks::before{top:-7px; left:-7px}
.ticks::after{bottom:-7px; right:-7px}

/* CURSOR — contextual: anel padrão · cresce em interação · vira vermelho sobre CTA */
.cursor{position:fixed; top:0; left:0; width:34px; height:34px; border:1px solid var(--navy); border-radius:50%;
  pointer-events:none; z-index:9999; transform:translate(-50%,-50%);
  transition:width .3s var(--ease),height .3s var(--ease),background .3s,border-color .3s,opacity .3s}
.cursor-dot{position:fixed; top:0; left:0; width:5px; height:5px; background:var(--navy); border-radius:50%;
  pointer-events:none; z-index:9999; transform:translate(-50%,-50%); transition:background .3s}
body.hovering .cursor{width:58px; height:58px; background:rgba(1,43,129,.08)}
body.hovering-cta .cursor{width:58px; height:58px; border-color:var(--red); background:rgba(229,52,43,.08)}
body.hovering-cta .cursor-dot{background:var(--red)}
/* sobre campo de texto o anel some e volta o cursor do sistema: sem ele não há
   como ver onde o texto vai entrar, e o anel de 58px cobria o rótulo do campo */
body.typing .cursor,body.typing .cursor-dot{opacity:0}
html.cursor-custom .field input,html.cursor-custom .field textarea{cursor:text}
html.cursor-custom .field select{cursor:pointer}
html:not(.cursor-custom) .cursor,html:not(.cursor-custom) .cursor-dot{display:none}  /* sem JS / pointer grosso: nenhum cursor falso congelado */
html:not(.cursor-custom) .burger,html:not(.cursor-custom) .field input,html:not(.cursor-custom) .field select,html:not(.cursor-custom) .field textarea{cursor:auto}

/* SCROLLBAR — trilho claro, thumb navy; cantos retos */
::-webkit-scrollbar{width:12px}
::-webkit-scrollbar-track{background:var(--bg-2); border-left:1px solid var(--line-2)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--sky),var(--navy)); border:2px solid var(--bg-2)}
::-webkit-scrollbar-thumb:hover{background:var(--navy)}
html{scrollbar-width:thin; scrollbar-color:var(--navy) var(--bg-2)}

/* REVEAL */
/* REVELAÇÃO — o gatilho é o `html.anim`, posto pelo PRÓPRIO main.js como sua
   primeira instrução. Enquanto o script não roda (falhou, foi bloqueado por
   proxy, o navegador engasgou), NADA esconde nada: a página nasce visível.
   Antes era o contrário — `.reveal{opacity:0}` no CSS e o JS revelando — e um
   único GET perdido apagava 68 de 68 blocos, deixando nav, foto e telefone. */
.reveal{transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
html.anim .reveal{opacity:0; transform:translateY(30px)}
html.anim .reveal.in{opacity:1; transform:none}
.reveal[data-d="1"]{transition-delay:.08s}.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}.reveal[data-d="4"]{transition-delay:.32s}
.reveal[data-d="5"]{transition-delay:.4s}
.lines .ln{display:block; overflow:hidden}
.lines .ln > span{display:block; transition:transform .9s var(--ease-out)}
html.anim .lines .ln > span{transform:translateY(106%)}
/* precisa do mesmo prefixo html.anim: sem ele esta regra tem especificidade
   MENOR que a de cima e o título nunca sobe — foi assim que o h1 do hero
   sumiu no desktop ao inverter o gatilho */
html.anim .lines.in .ln > span{transform:none}
.lines.in .ln:nth-child(2) > span{transition-delay:.09s}
.lines.in .ln:nth-child(3) > span{transition-delay:.18s}
.lines.in .ln:nth-child(4) > span{transition-delay:.27s}

/* NAV — barra navy SÓLIDA (logo transparente branca funde em qualquer estado);
   sem backdrop-filter (custo de perf + compõe mal com a logo). Ao rolar só encolhe + ganha sombra */
.nav{position:fixed; inset:0 0 auto 0; z-index:100; padding:18px 0; background:var(--navy-logo);
  border-bottom:1px solid rgba(255,255,255,.1);
  transition:padding .4s var(--ease),box-shadow .4s}
.nav.small{padding:11px 0; box-shadow:0 10px 30px -16px rgba(0,0,0,.7)}
.nav .row{display:flex; align-items:center; gap:24px}
.nav .logo{height:46px; width:auto; transition:height .4s var(--ease); user-select:none; -webkit-user-drag:none}
.nav.small .logo{height:38px}
.nav .links{margin-left:auto; display:flex; align-items:center; gap:26px}
.nav .links a.navlink{font-family:var(--font-mono); font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.82); transition:color .25s; position:relative}
.nav .links a.navlink::after{content:""; position:absolute; left:0; bottom:-6px; width:100%; height:1px; background:var(--sky-soft); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease)}
.nav .links a.navlink:hover{color:#fff}
.nav .links a.navlink:hover::after{transform:scaleX(1)}
.nav .links a.navlink[aria-current="true"]{color:#fff}
.nav .links a.navlink[aria-current="true"]::after{transform:scaleX(1)}
.nav .links a.navbtn{font-family:var(--font-body); background:var(--red); border-color:var(--red); color:#fff}
.nav .links a.navbtn:hover{background:var(--red-deep); border-color:var(--red-deep)}

/* hamburger */
.burger{display:none; margin-left:auto; width:44px; height:44px; border:1px solid rgba(255,255,255,.3); background:transparent; place-items:center; cursor:none}
.burger span{display:block; width:18px; height:2px; background:#fff; position:relative; transition:.3s var(--ease)}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; width:18px; height:2px; background:#fff; transition:.3s var(--ease)}
.burger span::before{top:-6px}.burger span::after{top:6px}
body.menu-open .burger span{background:transparent}
body.menu-open .burger span::before{top:0; transform:rotate(45deg)}
body.menu-open .burger span::after{top:0; transform:rotate(-45deg)}

/* mobile drawer — escuro, coerente com a abertura da página */
.drawer{position:fixed; inset:0; z-index:99; background:var(--navy-ink); display:flex; flex-direction:column;
  justify-content:center; gap:6px; padding:0 var(--pad); opacity:0; pointer-events:none; transform:translateY(-8px);
  transition:opacity .35s var(--ease),transform .35s var(--ease)}
body.menu-open .drawer{opacity:1; pointer-events:auto; transform:none}
body.menu-open{overflow:hidden}   /* trava o scroll do fundo enquanto o menu modal está aberto */
.drawer a{font-family:var(--font-display); font-weight:600; font-size:clamp(1.8rem,7vw,2.6rem); color:var(--d-text); padding:10px 0; border-bottom:1px solid var(--d-line-2)}
.drawer a.navbtn{color:var(--red); border-bottom:0; margin-top:14px}

/* BOTÕES — vermelho = eixo único de conversão (funciona no claro e no navy) */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; font-family:var(--font-body);
  font-weight:600; font-size:1rem; letter-spacing:.005em; padding:15px 28px;
  border:1.5px solid var(--red); background:var(--red); color:#fff; border-radius:var(--r-full);
  position:relative; transition:transform .25s var(--ease),background .25s,border-color .25s,box-shadow .25s}
.btn svg{width:18px; height:18px}
.btn .ar{transition:transform .3s var(--ease)}
.btn:hover{background:var(--red-deep); border-color:var(--red-deep)} .btn:hover .ar{transform:translateX(4px)}
.btn:active{transform:scale(.98)}                 /* micro-press "Apple" */
.btn.big{padding:16px 30px; font-size:1.02rem}
/* secundário: outline navy (padrão Apple "Comprar/Saber mais") — SÓ em superfície clara */
.btn.ghost{background:transparent; border-color:var(--navy); color:var(--navy)}
.btn.ghost:hover{background:rgba(1,43,129,.06); border-color:var(--navy)}
.btn.ghost .ar{color:var(--navy)}
.btn-row{display:flex; gap:16px; flex-wrap:wrap; align-items:center}
.btn:focus-visible,a:focus-visible,summary:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--sky); outline-offset:3px}

/* HERO — cinematográfico: o VÍDEO da obra é o fundo (full-bleed), com scrim
   navy p/ legibilidade AAA do texto branco. Altura contida (~86svh) e
   tipografia um degrau menor: hierarquia por contraste, não por tamanho.
   1 CTA primário vermelho pill + 1 secundário outline branco. */
.hero{position:relative; min-height:min(86svh,860px); display:flex; align-items:center; padding:148px 0 96px; background:var(--navy-ink); overflow:hidden}
.hero-bg{position:absolute; inset:0; z-index:0}
/* o poster fica na caixa e o vídeo entra por cima quando consegue tocar até o
   fim — sem isso a troca poster→vídeo aparecia como um salto */
.hero-bg{background:#0a1526 url("../assets/img/hero-poster.jpg?v=3") center/cover no-repeat}
.hero-bg video{width:100%; height:100%; object-fit:cover; display:block;
  opacity:0; transition:opacity .6s var(--ease-out)}
.hero-bg video.pronto{opacity:1}
.hero-bg::after{content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(1,13,38,.86) 0%,rgba(1,13,38,.62) 44%,rgba(1,13,38,.28) 72%,rgba(1,13,38,.14) 100%),
             linear-gradient(0deg,rgba(1,13,38,.65) 0%,transparent 34%)}
.hero .wrap{position:relative; z-index:2; width:100%}
/* linha vertical guia: agrupa o bloco de texto numa unidade sobre o vídeo
   (Palmer/Rock — conectividade uniforme) e conduz o olho ao CTA (boa
   continuação; eye-tracking de leading lines 2024) */
.hero-text{max-width:640px; position:relative; padding-left:28px}
.hero-text::before{content:""; position:absolute; left:0; top:10px; bottom:10px; width:1px;
  background:linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.28) 60%, rgba(255,255,255,.05) 100%)}
.hero h1{color:#fff; max-width:18ch; text-wrap:balance; text-shadow:0 2px 24px rgba(1,13,38,.45)}
.hero h1 .g{color:var(--sky-soft)}
.hero .lead{margin-top:20px; max-width:50ch; color:rgba(242,246,255,.88)}
.hero .lead b{color:#fff}
.hero .btn-row{margin-top:30px}
.hero .kicker{color:var(--sky-soft)} .hero .kicker::before{background:var(--sky-soft)}
/* secundário sobre o vídeo: outline branco (o ghost navy sumiria no escuro) */
.hero .btn.ghost{border-color:rgba(255,255,255,.75); color:#fff}
.hero .btn.ghost:hover{background:rgba(255,255,255,.12); border-color:#fff}
.hero .btn.ghost .ar{color:#fff}
.hero .trust{margin-top:30px; font-family:var(--font-mono); font-size:.8rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase;
  color:var(--d-muted); display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.hero .trust .dot{width:4px;height:4px;border-radius:50%;background:var(--sky-soft)}
/* destaque estratégico: operação assistida por IA (pill azul, sóbrio mas visível) */
.hero .trust .trust-ia{color:#fff; border:1px solid rgba(89,165,216,.55); background:rgba(89,165,216,.16); padding:6px 12px; border-radius:var(--r-full)}
.hero-textlink{display:inline-flex; align-items:center; gap:8px; font-family:var(--font-body); font-weight:600; font-size:1rem; color:var(--navy); padding:10px 2px; border-bottom:2px solid rgba(1,43,129,.3); transition:color .25s,border-color .25s}
.hero-textlink .ar{transition:transform .3s var(--ease)}
.hero-textlink:hover{border-bottom-color:var(--navy)} .hero-textlink:hover .ar{transform:translateY(3px)}

/* CREDIBILITY STRIP — continua o bloco escuro da abertura; counters ≠ selos */
.strip{background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.strip .wrap{display:grid; grid-template-columns:repeat(4,1fr); gap:0; padding-top:0; padding-bottom:0}
.strip .item{display:flex; flex-direction:column; gap:4px; padding:30px 28px; border-left:1px solid var(--line)}
.strip .item:first-child{border-left:0; padding-left:0}
.strip .item b{font-family:var(--font-display); font-size:2rem; font-weight:700; color:var(--navy); line-height:1; font-variant-numeric:tabular-nums}
.strip .item b.tag{font-family:var(--font-mono); font-size:1.05rem; font-weight:600; letter-spacing:.08em; color:var(--sky); padding-top:8px}
.strip .item span{font-family:var(--font-mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--faint)}

/* === DRILL-PATH (assinatura) === */
.signature{background:var(--bg-2); padding:var(--sec) 0 calc(var(--sec) * .62); overflow:hidden}
.signature .wrap{position:relative; z-index:1}
.sig-head{max-width:60ch; margin-bottom:30px}
.sig-head h2{margin-top:10px}
.sig-stage{position:relative; border:1px solid var(--line); border-radius:var(--r-l); overflow:hidden; box-shadow:var(--e1); background:var(--surface)}
.sig-stage svg{width:100%; height:auto; display:block}
.drill-ground{fill:rgba(10,28,64,.05)}
.drill-surface{stroke:var(--line); stroke-width:1.5; fill:none}
.obstacle{fill:rgba(89,165,216,.06); stroke:rgba(89,165,216,.3); stroke-width:1}
.icon-line{stroke:var(--muted); stroke-width:1.5; fill:none}
.trench{stroke:var(--red); stroke-width:2; stroke-dasharray:5 6; fill:none; opacity:.55}
.bore-guide{stroke:rgba(1,43,129,.1); stroke-width:2; fill:none}
.bore{stroke:var(--sky); stroke-width:3.5; fill:none; stroke-linecap:round}
.duct{stroke:var(--sky-soft); stroke-width:8; fill:none; stroke-linecap:round; opacity:.25}
.bit{fill:var(--sky)}
.bit-ring{fill:none; stroke:var(--sky); stroke-width:1.5; opacity:.6}
.pt{fill:var(--surface); stroke:var(--line); stroke-width:1.5; transition:stroke .4s, fill .4s}
.pt.on{stroke:var(--sky); fill:var(--navy)}
.sig-label{font-family:var(--font-mono); font-size:13px; fill:var(--faint); letter-spacing:.08em}
.sig-label.warn{fill:var(--red)}
.sig-label.on{fill:var(--sky)}
.sig-seal{margin-top:34px; display:flex; flex-wrap:wrap; gap:14px}
.sig-seal .chip{font-family:var(--font-mono); font-size:.74rem; letter-spacing:.04em; color:var(--ink);
  border:1px solid var(--line); border-radius:var(--r-full); padding:11px 18px; display:inline-flex; align-items:center; gap:10px; background:var(--surface-2)}
.sig-seal .chip svg{width:16px; height:16px; color:var(--sky)}

/* MÉTODO (4 passos) */
/* MÉTODO — 25/07/2026, a seção que ele printou com "ESPAÇADO!!".
   Medido em 1440: cada etapa ocupava 227 px, o "01" ficava a 126 px do próprio
   título e a linha da fileira atravessava os 1.320 px do wrap enquanto o texto
   parava aos 830 — 490 px de vazio com o ícone órfão no canto direito.
   A régua fica na medida de leitura e o número volta para perto do que numera. */
.steps{margin-top:40px; border-top:1px solid var(--line); position:relative; max-width:760px}
/* régua vertical costurando os 4 passos (boa continuação — o olho desce pela linha) */
/* a régua vertical passava ENTRE o número e o título que ele numera — as quatro
   hairlines horizontais bastam como divisória */
.step{display:grid; grid-template-columns:30px minmax(0,1fr) 44px; gap:14px; padding:16px 0 22px; border-bottom:1px solid var(--line); align-items:baseline; transition:background .4s}
.step:hover{background:linear-gradient(90deg,rgba(1,43,129,.04),transparent)}
.step .n{font-family:var(--font-mono); font-weight:500; font-size:1.15rem; color:var(--sky); font-variant-numeric:tabular-nums; transition:color .4s,transform .4s var(--ease)}
.step:hover .n{color:var(--navy); transform:translateX(6px)}
.step .b b{font-family:var(--font-display); font-size:clamp(1.2rem,1.9vw,1.45rem); font-weight:600; display:block; margin-bottom:4px; letter-spacing:-.01em}
.step .b p{color:var(--muted); max-width:60ch; font-size:.98rem}
.step .ico{width:40px; height:40px; color:var(--sky); opacity:.55; align-self:start}
.step .ico svg{width:100%; height:100%}

/* NÚMEROS / PROVA — momento tipográfico GIGANTE: +1.000 km herói, 3 coadjuvantes */
.stats-band{background:radial-gradient(120% 140% at 80% 0%,rgba(89,165,216,.2),transparent 60%),var(--navy); overflow:hidden}
.stats-band::before{content:""; position:absolute; inset:0; background:url("../assets/img/rig-urbana.jpg?v=2") center/cover; opacity:.08; z-index:0}
.stats-band .wrap{position:relative; z-index:1}
.stats-band .kicker{color:var(--sky-soft)}
.stats-band .kicker::before{background:var(--sky-soft)}
.stats-band .kicker[data-i]::after{color:rgba(255,255,255,.5)}
.stat-hero{border-bottom:1px solid var(--d-line); padding-bottom:20px; margin-bottom:36px}
.stat-hero .num{font-family:var(--font-display); font-weight:700; font-size:clamp(3.4rem,8vw,7rem); line-height:.92; letter-spacing:-.02em; color:#fff; font-variant-numeric:tabular-nums; white-space:nowrap}
.stat-hero .num .u{color:var(--sky-soft)}
.stat-hero .lb{font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--d-muted); margin-top:14px}
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:28px; text-align:left}
.stat .num{font-family:var(--font-display); font-weight:700; font-size:clamp(2.2rem,4.4vw,3.4rem); color:#fff; line-height:1; font-variant-numeric:tabular-nums; white-space:nowrap}
.stat .num .u{color:var(--sky-soft); font-size:.66em}
.stat .lb{color:var(--d-muted); font-size:.88rem; margin-top:10px; max-width:26ch; line-height:1.45}
.stat{padding-left:22px; border-left:1px solid var(--d-line)}

/* SEGMENTOS — fotos reais protagonistas: scrim mais leve, nº gigante, hover que revela */
.seg-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:54px}
.seg{position:relative; overflow:hidden; border:1px solid var(--line); border-radius:var(--r-l); box-shadow:var(--e1); min-height:340px; display:flex; flex-direction:column; justify-content:flex-end; padding:28px; isolation:isolate}
.seg .bg{position:absolute; inset:0; z-index:-2}
.seg .bg img{width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease),filter .7s var(--ease); filter:brightness(.92)}
.seg::after{content:""; position:absolute; inset:0; z-index:-1; transition:opacity .5s var(--ease);
  background:linear-gradient(0deg,rgba(2,10,30,.88) 4%,rgba(2,10,30,.42) 46%,rgba(2,10,30,.12))}
.seg:hover .bg img{transform:scale(1.05); filter:brightness(1.04)}
.seg .top-rule{position:absolute; top:0; left:0; height:3px; width:0; background:var(--red); transition:width .5s var(--ease)}
.seg:hover .top-rule{width:100%}
.seg .seg-no{position:absolute; top:18px; right:20px; font-family:var(--font-display); font-weight:700; font-size:clamp(2.4rem,3.4vw,3.2rem); line-height:1; color:rgba(255,255,255,.42); transition:color .4s; font-variant-numeric:tabular-nums; text-shadow:0 1px 14px rgba(2,10,30,.55)}
.seg:hover .seg-no{color:rgba(255,255,255,.75)}
.seg h3{font-size:clamp(1.25rem,1.9vw,1.6rem); font-weight:700; color:#fff}
.seg p{color:rgba(255,255,255,.88); font-size:.95rem; margin-top:8px; max-width:40ch}
.seg .go{margin-top:16px; font-family:var(--font-body); font-weight:600; font-size:.84rem; color:#fff; display:inline-flex; gap:8px; align-items:center; opacity:.85; transition:opacity .3s}
.seg:hover .go{opacity:1}
.seg .go .ar{transition:transform .3s var(--ease); color:var(--sky-soft)}
.seg:hover .go .ar{transform:translateX(5px)}

/* OBRA EM DESTAQUE (cine) — min-height (não height fixo) deixa o box crescer se o
   conteúdo precisar; padding-top:104px dá folga estrutural pro título nunca nascer
   colado no topo e ser "comido" pela nav fixa ao rolar até a seção */
.cine{position:relative; min-height:max(640px,84vh); display:flex; align-items:flex-end; overflow:hidden}
.cine .media{position:absolute; inset:0; z-index:0}
.cine .media img{width:100%;height:100%;object-fit:cover}
/* medido pixel a pixel (texto escondido, foto do retangulo dele, WCAG contra o
   fundo real): o rotulo do caso reprovava em 64% da area e o lead em 15%, porque
   o degrade da esquerda ja estava em .58 na metade do texto. O veu fecha onde o
   texto mora, em vez de clarear o texto. */
.cine .media::after{content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(1,13,38,.92) 0%,rgba(1,13,38,.82) 34%,rgba(1,13,38,.52) 58%,rgba(1,13,38,.18) 78%,transparent 92%),
             linear-gradient(0deg,rgba(1,13,38,.72) 0%,transparent 42%)}
.cine .wrap{position:relative; z-index:2; padding-top:104px; padding-bottom:clamp(48px,8vh,96px); width:100%}
.cine .cap{font-family:var(--font-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:#cfe0f5; margin-bottom:16px; border-left:2px solid var(--sky); padding:4px 0 4px 18px; text-shadow:0 1px 8px rgba(2,10,30,.75)}
.cine h2{max-width:22ch; color:#fff; text-wrap:balance; line-height:1.05; letter-spacing:-.01em}
.cine .lead{margin-top:16px; color:rgba(255,255,255,.88); max-width:46ch}
.cine .lead b{color:#fff}

/* FROTA */
.fleet{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(30px,5vw,72px); align-items:center; margin-top:48px}
/* mídia da frota em CARTÃO de proporção FIXA 16:10 (igual ao encode do vídeo —
   o contêiner esticado esmagava o enquadramento) + legenda sobre o véu */
.fleet-photo{position:relative; overflow:hidden; border-radius:var(--r-l); align-self:center; width:100%; aspect-ratio:16/10}
.fleet-photo .fp-cap{position:absolute; left:18px; right:18px; bottom:13px; z-index:2; color:#fff;
  font-size:.84rem; display:flex; align-items:baseline; gap:10px; text-shadow:0 1px 6px rgba(2,10,30,.55)}
.fleet-photo .fp-cap b{text-shadow:0 1px 8px rgba(2,10,30,.8); font-family:var(--font-mono); font-weight:600; font-size:.64rem; letter-spacing:.14em;
  text-transform:uppercase; color:#dbe9fb; white-space:nowrap}
.fleet-photo img,.fleet-photo video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:contrast(1.04)}
/* véu denso só no rodapé do cartão: garante contraste da legenda sem lavar a foto */
.fleet-photo::after{content:""; position:absolute; inset:0; border:1px solid var(--line); pointer-events:none;
  background:linear-gradient(0deg,rgba(2,10,30,.82) 0%,rgba(2,10,30,.45) 22%,transparent 46%)}
.fleet-band{margin-bottom:26px}
.fleet-band .bl{font-family:var(--font-mono); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); padding-bottom:10px; border-bottom:1px solid var(--line); margin-bottom:6px}
.fleet-row{display:flex; flex-wrap:wrap; gap:0}
.fleet-row .m{font-family:var(--font-body); font-size:.92rem; color:var(--ink); padding:11px 16px 11px 0; margin-right:16px; border-bottom:1px solid var(--line-2); display:inline-flex; align-items:center; gap:9px; transition:color .25s}
.fleet-row .m::before{content:""; width:6px; height:6px; background:var(--sky); opacity:.6; flex:0 0 auto}
.fleet-row .m:hover{color:var(--navy)}
/* CTA da frota (o margin era inline no HTML; virou classe p/ o mobile poder compactar) */
.fleet-cta{margin-top:48px}

/* EMPRESA / CONFIANÇA */
.company{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,72px); align-items:start; margin-top:30px}
/* fatos em fileiras com hairline (layer-cake: o essencial legível sem ler prosa) */
.emp-facts{list-style:none; margin-top:26px; border-top:1px solid var(--line)}
.emp-facts li{display:grid; grid-template-columns:168px 1fr; gap:18px; padding:15px 0; border-bottom:1px solid var(--line)}
.emp-facts b{font-family:var(--font-display); font-weight:700; font-size:1.05rem; color:var(--navy); letter-spacing:-.01em; text-align:right}
.emp-facts span{color:var(--muted); font-size:.97rem; line-height:1.5}
/* destaque da IA com linha vertical à esquerda */
.ia-note{margin-top:24px; padding:2px 0 2px 18px; border-left:2px solid var(--sky); color:var(--muted)}
/* cartão da sede (mesmo padrão de mídia da frota) */
.emp-photo{position:relative; overflow:hidden; border-radius:var(--r-l); aspect-ratio:3/2; margin-bottom:16px}
.emp-photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.emp-photo::after{content:""; position:absolute; inset:0; border:1px solid var(--line); pointer-events:none; border-radius:inherit;
  background:linear-gradient(0deg,rgba(2,10,30,.78) 0%,rgba(2,10,30,.4) 20%,transparent 42%)}
.emp-photo .fp-cap{position:absolute; left:18px; right:18px; bottom:13px; z-index:2; color:#fff;
  font-size:.84rem; display:flex; align-items:baseline; gap:10px; text-shadow:0 1px 6px rgba(2,10,30,.55)}
.emp-photo .fp-cap b{text-shadow:0 1px 8px rgba(2,10,30,.8); font-family:var(--font-mono); font-weight:600; font-size:.64rem; letter-spacing:.14em;
  text-transform:uppercase; color:#dbe9fb; white-space:nowrap}
.company .lead{margin-top:22px}
.certs{display:flex; flex-wrap:wrap; gap:14px; margin-top:8px}
.cert{border:1px solid var(--line); border-radius:var(--r-m); padding:16px 20px; display:flex; align-items:center; gap:16px; min-width:150px; background:var(--surface-2)}
.cert b{display:block; font-family:var(--font-display); font-weight:700; font-size:1.15rem}
.cert .lab-s{font-family:var(--font-mono); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:var(--faint)}
/* selos de certificação oficiais — imagens reais sobre tile branco (padrão de credibilidade) */
.seal-tile{background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:var(--r-xs); width:64px; height:64px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; padding:7px}
.seal-tile img{width:100%; height:100%; object-fit:contain; display:block}
.abratt-tile{font-family:var(--font-display); font-weight:700; font-size:.96rem; color:var(--navy); letter-spacing:.03em}

/* FAIXA DE CONTATO DIRETO (pós-hero) — fina: canal imediato (tel/e-mail),
   não repete o CTA do hero; o vermelho segue exclusivo do "Solicitar orçamento" */
.midcta.contact-band .wrap{display:flex; align-items:center; justify-content:center; gap:10px 18px; flex-wrap:wrap; text-align:center; padding-top:16px; padding-bottom:16px}
.contact-band span{color:var(--d-muted); font-size:.86rem; letter-spacing:.04em; text-transform:uppercase; font-weight:500}
.contact-band span.sep{color:var(--sky-soft); text-transform:none}
.contact-band a{color:#fff; font-weight:600; font-size:1.02rem; border-bottom:1.5px solid rgba(255,255,255,.35); padding:2px 0; transition:border-color .25s; min-height:44px; display:inline-flex; align-items:center}
.contact-band a:hover{border-bottom-color:#fff}

/* CTA intermediário */
.midcta{background:var(--navy); position:relative; overflow:hidden}
.midcta::before{content:""; position:absolute; inset:0; background:radial-gradient(120% 140% at 80% 0%,rgba(89,165,216,.2),transparent 60%)}
.midcta .wrap{position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:36px; flex-wrap:wrap; padding-top:clamp(56px,8vh,96px); padding-bottom:clamp(56px,8vh,96px)}
.midcta h2{max-width:18ch; color:#fff}
.midcta .btn-row{flex:0 0 auto}

/* CONTATO / ORÇAMENTO */
.contact{background:var(--bg-2)}
.contact-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(34px,5vw,72px); margin-top:46px; align-items:start}
.form{display:flex; flex-direction:column; gap:16px}
.field{display:flex; flex-direction:column; gap:7px}
.field.row2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.field label{font-family:var(--font-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.field input,.field select,.field textarea{width:100%; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-s);
  padding:14px 16px; color:var(--ink); font-family:var(--font-body); font-size:1rem; cursor:none; transition:border-color .25s,box-shadow .25s}
.field textarea{min-height:110px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--navy); box-shadow:0 0 0 3px rgba(1,43,129,.14)}
.field input.bad,.field select.bad{border-color:var(--red)}
.field select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23012B81' stroke-width='1.6' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center}
.form .btn{justify-content:center; margin-top:4px}
.form-note{font-family:var(--font-mono); font-size:.66rem; letter-spacing:.02em; color:var(--faint); display:flex; gap:8px; align-items:center}
/* regra do "um canal basta", logo abaixo do par e-mail/telefone */
.form-hint{font-size:.82rem; color:var(--muted); margin-top:-6px}
.form-err{color:var(--red); font-size:.86rem; margin-top:-4px}
.form-ok{display:none; border:1px solid var(--green); background:rgba(37,180,106,.1); padding:16px 18px; color:var(--ink); font-size:.95rem}
.form.sent .form-ok{display:block}

.contact-info{display:flex; flex-direction:column; gap:10px}
.ci-card{border:1px solid var(--line); border-radius:var(--r-m); padding:22px 24px; background:var(--surface-2); transition:border-color .25s,background .25s,box-shadow .25s}
a.ci-card:hover{border-color:var(--navy); background:#fff; box-shadow:var(--e2)}
.ci-card .lab{font-family:var(--font-mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin-bottom:8px; display:flex; align-items:center; gap:9px}
.ci-card .lab svg{width:15px; height:15px; color:var(--sky)}
.ci-card .val{font-size:1.08rem; color:var(--ink); line-height:1.5}
.ci-card a.val:hover{color:var(--navy)}
.ci-map{border:1px solid var(--line); border-radius:var(--r-m); overflow:hidden; margin-top:4px}
.ci-map iframe{width:100%; height:220px; border:0; display:block; filter:grayscale(.25) sepia(.16) hue-rotate(185deg) saturate(1.25) brightness(.92)}

/* RODAPÉ — a página fecha em navy (arco cromático completo) */
.foot{padding:72px 0 40px; background:var(--navy-logo); color:var(--d-text); border-top:1px solid var(--d-line-2)}
.foot .top{display:grid; grid-template-columns:1.3fr 1fr 1.05fr 1.05fr 1fr; gap:34px; align-items:start}
.foot .logo{height:40px; margin-bottom:18px}
.foot .pos{color:var(--d-muted); max-width:40ch; font-size:.96rem}
.foot .fcol h4{font-family:var(--font-mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--d-faint); margin-bottom:16px; font-weight:500}
.foot .fcol a,.foot .fcol p{display:block; color:var(--d-muted); font-size:.95rem; padding:5px 0; transition:color .25s}
.foot .fcol a:hover{color:#fff}
.foot .fcerts{display:flex; gap:10px; margin-top:20px; align-items:center; flex-wrap:wrap}
.foot .fcerts .seal-tile{width:76px; height:76px; padding:8px; border:0}
.foot .fcerts .abratt-tile{font-size:1.02rem}
/* dados oficiais do CNPJ (razão social, CNPJ, IE, capital, fundação) ficam SÓ no JSON-LD (SEO) — não exibidos aqui */
.foot .cr{margin-top:48px; padding-top:24px; border-top:1px solid var(--d-line-2); font-family:var(--font-mono); font-size:.68rem; letter-spacing:.04em; color:var(--d-faint); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}

/* floating CTA — vermelho, mesmo eixo de conversão */
.cta-float{position:fixed; z-index:90; left:16px; right:16px; bottom:calc(16px + env(safe-area-inset-bottom));
  display:none; gap:10px; opacity:0; transform:translateY(20px); pointer-events:none;
  transition:opacity .4s var(--ease),transform .4s var(--ease)}
.cta-float a{flex:1; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--font-body); font-weight:600; font-size:.98rem; padding:16px 18px; color:#fff;
  border:1px solid rgba(255,255,255,.5); border-radius:var(--r-full); box-shadow:var(--e3)}
.cta-float .cf-orc{background:var(--red)}
.cta-float .cf-orc:hover{background:var(--red-deep)}
.cta-float.show{opacity:1; transform:none; pointer-events:auto}
/* (a variante desktop ≥861 do cta-float vive na ZONA RESPONSIVA, com as demais queries) */

/* seta de continuidade do hero no mobile (a regra que a usa vive na zona responsiva) */
@keyframes heroCue{0%,100%{transform:rotate(45deg) translate(0,0); opacity:.5} 50%{transform:rotate(45deg) translate(3px,3px); opacity:.95}}

/* skip link */
.skip{position:absolute; left:-999px; top:0; z-index:200; background:var(--navy); color:#fff; padding:10px 16px; font-weight:600}
.skip:focus{left:0}

/* helpers */
.cine .media{will-change:transform}   /* parallax fluido (padrão Krono) */

/* ===== FROTA — datasheet: número + barra ANCORADOS no mesmo eixo ===== */
.fleet-ds{margin-top:40px;border:1px solid var(--line);background:var(--surface-2);border-radius:var(--r-m);overflow:hidden;box-shadow:var(--e1)}
.fleet-ds table{width:100%;border-collapse:collapse;font-size:.92rem}
.fleet-ds caption{caption-side:top;text-align:left;font-family:var(--font-mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);font-weight:500;padding:16px 20px;border-bottom:1px solid var(--line);background:#fff}
.fleet-ds thead th{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--navy);font-weight:600;text-align:left;padding:14px 20px;border-bottom:1px solid var(--line);background:#fff;white-space:nowrap}
.fleet-ds th.num,.fleet-ds td.num{white-space:nowrap}
.fleet-ds tbody td{padding:15px 20px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.fleet-ds tbody tr:last-child td{border-bottom:0}
.fleet-ds tbody tr{position:relative;transition:background .25s;box-shadow:inset 0 0 0 0 var(--navy)}
.fleet-ds tbody tr:hover{background:rgba(1,43,129,.045);box-shadow:inset 3px 0 0 0 var(--navy)}
.ds-eq{font-family:var(--font-display);font-weight:700;font-size:1.18rem;letter-spacing:-.01em;color:var(--ink);line-height:1.1}
.ds-eq small{display:block;font-family:var(--font-mono);font-weight:400;font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.ds-cell{display:flex;align-items:center;gap:14px}
.ds-tf{font-family:var(--font-mono);font-weight:600;font-size:1.24rem;line-height:1;color:var(--navy);font-variant-numeric:tabular-nums;min-width:3.2ch;text-align:right}
.ds-tf span{font-weight:400;font-size:.68rem;color:var(--faint);margin-left:3px}
.ds-app{color:var(--muted);max-width:38ch}
.ds-app b{color:var(--ink);font-weight:600}
.ds-bar{position:relative;display:block;height:5px;border-radius:var(--r-full);background:var(--line-2);width:100%;max-width:180px;overflow:hidden}
.ds-bar i{position:absolute;inset:0 auto 0 0;border-radius:var(--r-full);background:var(--sky);transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease-out) .2s}
.fleet-ds.reveal.in .ds-bar i{transform:none}
.fleet-ds tfoot td{padding:16px 20px;border-top:2px solid var(--line);background:#fff;font-size:.82rem;color:var(--faint)}
.fleet-ds tfoot b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.fleet-ds tfoot .ds-env{display:flex;flex-wrap:wrap;gap:8px 28px;align-items:baseline;font-family:var(--font-mono);font-size:.78rem}
.fleet-ds tfoot .ds-env .k{color:var(--navy);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
.ft-note{font-size:.8rem; color:var(--faint); margin-top:16px; max-width:84ch}
.cap{border-left:2px solid var(--sky); padding:4px 0 4px 18px}

/* comparação vala × MND — semântica por material: ruim dashed/apagado, bom sólido */
/* prova visual antes do argumento: as duas frentes reais, mesmo enquadramento de cartão
   (mesmo padrão de mídia da frota\empresa: foto + véu no rodapé + legenda) */
.cmp-lead{margin-top:22px; max-width:62ch}
.cmp-shots{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:34px}
.cmp-shot{position:relative; overflow:hidden; border-radius:var(--r-m); aspect-ratio:3/2; margin:0}
.cmp-shot img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.cmp-shot::after{content:""; position:absolute; inset:0; border:1px solid var(--line); pointer-events:none; border-radius:inherit;
  background:linear-gradient(0deg,rgba(2,10,30,.8) 0%,rgba(2,10,30,.42) 22%,transparent 46%)}
.cmp-shot .fp-cap{position:absolute; left:18px; right:18px; bottom:13px; z-index:2; color:#fff;
  font-size:.84rem; display:flex; align-items:baseline; gap:10px; text-shadow:0 1px 6px rgba(2,10,30,.55)}
.cmp-shot .fp-cap b{text-shadow:0 1px 8px rgba(2,10,30,.8); font-family:var(--font-mono); font-weight:600; font-size:.64rem; letter-spacing:.14em;
  text-transform:uppercase; color:#dbe9fb; white-space:nowrap}
/* fecho da comparação: as quatro afirmações, cada uma com o fato que a sustenta */
.verdict{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:26px}
.verdict .vi{border:1px solid var(--line); border-radius:var(--r-m); background:var(--surface-2);
  padding:24px 22px 22px; box-shadow:var(--e1); transition:border-color .25s, box-shadow .25s}
.verdict .vi:hover{border-color:rgba(10,28,64,.18); box-shadow:0 2px 4px rgba(10,28,64,.06),0 6px 16px rgba(10,28,64,.06)}
.verdict .vico{display:flex; align-items:center; justify-content:center; width:40px; height:40px;
  border-radius:var(--r-full); background:var(--bg-2); color:var(--navy); margin-bottom:16px}
.verdict .vico svg{width:21px; height:21px}
.verdict .vi > b{display:block; font-family:var(--font-display); font-weight:700;
  font-size:1.34rem; line-height:1.15; color:var(--navy); letter-spacing:.01em}
.verdict .vim{display:block; margin-top:8px; color:var(--muted); font-size:.92rem; line-height:1.55}
.verdict .vipc{font-family:var(--font-display); font-weight:700; font-size:1.1rem; color:var(--ink)}
/* alcance da tecnica (o envelope da frota fica logo acima; nao sao a mesma coisa) */
.tec{margin-top:16px; padding:14px 18px; border:1px solid var(--line); border-left:3px solid var(--navy);
  border-radius:var(--r-s); background:var(--surface-2); color:var(--muted); font-size:.92rem; line-height:1.55; max-width:70ch}
.tec b{color:var(--navy)}
.compare{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:26px}
.compare .col{border:1px solid var(--line); border-radius:var(--r-m); padding:clamp(24px,3vw,34px); background:var(--surface-2)}
.compare .col.bad{background:transparent; border-style:dashed}
.compare .col h3{font-size:1.2rem; margin-bottom:22px; font-weight:600}
.compare .col.bad h3{color:var(--muted)} .compare .col.good h3{color:var(--navy)}
.compare ul{list-style:none; display:flex; flex-direction:column; gap:15px}
.compare li{display:flex; gap:13px; font-size:1.02rem; color:var(--ink); line-height:1.5}
.compare li .i{flex:0 0 auto; margin-top:3px; width:18px; height:18px}
.compare .col.bad li{color:var(--muted)} .compare .col.bad li .i{color:var(--red)}
.compare .col.good li .i{color:var(--sky)}
.compare .col.good{box-shadow:var(--e3)}

/* FAQ — assinado: Q.01–Q.10 em mono navy, resposta deslocada, + vira × */
.faq{margin-top:112px; border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line)}
.qa summary{list-style:none; cursor:pointer; padding:14px 4px 22px; display:flex; gap:20px; align-items:center;
  font-family:var(--font-display); font-weight:600; font-size:clamp(1.1rem,1.9vw,1.45rem); letter-spacing:-.01em}
html.cursor-custom .qa summary{cursor:none}
.qa summary::-webkit-details-marker{display:none}
.qa .qno{flex:0 0 auto; font-family:var(--font-mono); font-weight:500; font-size:.72rem; letter-spacing:.08em; color:var(--navy); min-width:44px; font-variant-numeric:tabular-nums}
/* seta discreta que gira 180° ao abrir (substituiu o "+"→"×" em círculo navy).
   Com JS a rotação segue a classe .is-open (gira JÁ no clique de fechar,
   não só quando o painel termina de recolher). */
.qa .ic{flex:0 0 auto; margin-left:auto; width:20px; height:20px; color:var(--faint);
  transition:transform .42s var(--ease), color .25s ease}
.qa summary:hover .ic{color:var(--navy)}
.qa.is-open .ic, html.no-js .qa[open] .ic{transform:rotate(180deg); color:var(--navy)}
.qa .ans{display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s var(--ease)}
.qa[open] .ans{grid-template-rows:1fr}
.qa .ans>div{overflow:hidden}
/* com JS a altura é animada via WAAPI no main.js — o <details> nativo NÃO anima
   o fechar (some seco); o grid-rows acima fica como fallback sem JS */
html.js .qa .ans{display:block; overflow:hidden; height:0; transition:none}
html.js .qa[open] .ans{height:auto}
.qa .ans p{color:var(--muted); font-size:1.04rem; padding:0 4px 26px 64px; max-width:82ch}

/* CTA na seção drill-path (zona quente sem conversão) */
.sig-cta{margin-top:32px}
/* prova social no form — linha de texto enxuta (selos completos ficam em Empresa + rodapé) */
.form-trust{display:flex; align-items:center; gap:9px; padding:6px 0 2px; font-size:.82rem; color:var(--muted); line-height:1.45}
.form-trust svg{width:15px; height:15px; color:var(--sky); flex:0 0 auto}

/* QW5 — após o envio, some o formulário e fica só a confirmação (evita reenvio/2 conversas) */
.form.sent .field,.form.sent .row2,.form.sent .form-trust,
.form.sent #formSend,.form.sent .form-note,.form.sent .form-err{display:none}
.form.sent{gap:0}

/* ===== ritmo de contraste (tints deliberados nas seções claras irmãs) ===== */
#comparacao,#empresa{background:var(--bg-2)}
.cert,.ci-card{box-shadow:var(--e2)}
/* diferencial: chips de benefício logo abaixo do título, antes do esquema; CTA destacado */
.signature .wrap{display:flex; flex-direction:column; align-items:flex-start}
.signature .sig-head{order:1; margin-bottom:22px}
.signature .sig-seal{order:2; margin-top:0; margin-bottom:30px}
.signature .sig-stage{order:3; align-self:stretch}
.signature .sig-cta{order:4}
.signature .hero-textlink{color:var(--navy); border-bottom-color:rgba(1,43,129,.32)}
.signature .hero-textlink:hover{border-bottom-color:var(--navy)}

/* ===== clientes — mural de LOGOS em grade de LINHAS (Tufte: a linha fina
   substitui a caixa; era a tela de maior densidade de bordas do desktop —
   15 cartões com moldura+sombra viraram fileiras com hairline) ===== */
.clients .h2{max-width:42ch}
.client-grid{list-style:none; display:grid; grid-template-columns:repeat(auto-fill,minmax(185px,1fr)); gap:14px; margin-top:40px}
.client-grid li{display:flex; align-items:center; justify-content:center; text-align:center; min-height:80px; padding:14px 16px;
  color:var(--navy);
  font-family:var(--font-display); font-weight:700; font-size:1.18rem; letter-spacing:.01em}
/* 5 colunas FIXAS: são 15 logos — em auto-fill a tela larga abria 6 colunas e a
   última fileira ficava pela metade (6/6/3). 15 = 3×5 fecha a grade em qualquer largura. */
.client-grid.logos{grid-template-columns:repeat(5,1fr); gap:0; border-top:1px solid var(--line)}
.client-grid.logos li{min-height:88px; padding:16px 20px; border-bottom:1px solid var(--line)}
/* peso óptico igualado por ÁREA, não por altura: com um teto único de 54px a
   Siemens (6,2:1) ocupava ~6× a mancha da Sabesp (0,7:1). --lh = sqrt(A/proporção). */
.client-grid.logos li img{max-width:86%; max-height:var(--lh,34px); width:auto; object-fit:contain; filter:grayscale(1) opacity(.62); transition:filter .35s}
.client-grid.logos li img[src*="sabesp"]{--lh:56px}    /* 0,72:1 — limitado pela altura da fileira */
.client-grid.logos li img[src*="comgas"]{--lh:56px}    /* 1,00:1 */
.client-grid.logos li img[src*="cpfl"]{--lh:52px}      /* 1,36:1 */
.client-grid.logos li img[src*="snef"]{--lh:46px}      /* 1,00:1 — arquivo tem só 50 px, não ampliar além disso */
.client-grid.logos li img[src*="copasa"]{--lh:44px}    /* 2,00:1 */
.client-grid.logos li img[src*="andrade"]{--lh:39px}   /* 2,55:1 */
.client-grid.logos li img[src*="net"]{--lh:37px}       /* 2,75:1 (Claro) */
.client-grid.logos li img[src*="enel"]{--lh:37px}      /* 2,77:1 */
.client-grid.logos li img[src*="vivo"]{--lh:34px}      /* 3,21:1 */
.client-grid.logos li img[src*="metro"]{--lh:32px}     /* 3,79:1 */
.client-grid.logos li img[src*="camargo"]{--lh:28px}   /* 4,74:1 (Mover) */
.client-grid.logos li img[src*="petrobras"]{--lh:27px} /* 5,07:1 */
.client-grid.logos li img[src*="alstom"]{--lh:27px}    /* 5,14:1 */
.client-grid.logos li img[src*="infraero"]{--lh:26px}  /* 5,62:1 */
.client-grid.logos li img[src*="siemens"]{--lh:25px}   /* 6,21:1 */
.client-grid.logos li:hover img{filter:none}

/* ficha de caso (Obra em destaque) sobre fundo escuro */
.cine-spec{list-style:none; display:flex; flex-wrap:wrap; gap:16px 40px; margin-top:26px; max-width:620px; align-items:flex-end}
.cine-spec li{display:flex; flex-direction:column; gap:4px}
.cine-spec b{text-shadow:0 1px 10px rgba(2,10,30,.6); font-family:var(--font-display); font-weight:700; font-size:clamp(1.3rem,2.4vw,1.95rem); color:#fff; line-height:1; font-variant-numeric:tabular-nums}
.cine-spec span{font-family:var(--font-mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.78)}
.cine-spec li.hero-spec{padding-right:40px; border-right:1px solid rgba(255,255,255,.28)}
.cine-spec li.hero-spec b{font-size:clamp(1.7rem,3vw,2.4rem)}
/* CTA da obra em destaque (o margin era inline no HTML; virou classe p/ o mobile compactar) */
.cine-cta{margin-top:30px}

/* defaults desktop de elementos que SÓ existem no mobile */
/* comparação: o summary do acordeão só existe no mobile (desktop = [open], summary oculto) */
.compare details.col > summary,.fleet-fold > summary,.faq-more > summary{display:none}
/* o envelope da frota em texto só existe no mobile (no desktop ele é o tfoot da tabela) */
.ds-envelope{display:none}
/* rail/hint do carrossel de segmentos: só no mobile */
.seg-rail{display:none}
/* sem JS a barra de progresso do carrossel congelaria em 16% (mentira) — some */
html.no-js .seg-prog{display:none}

/* o funil real e contato -> visita -> orcamento, e isso so aparecia dentro de
   uma resposta do FAQ. Sem prazo: a DRC ainda nao confirmou o numero de dias */
.passos{list-style:none; margin:18px 0 4px; padding:14px 0 0; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:8px 22px}
.passos li{color:var(--muted); font-size:var(--d6); display:flex; gap:6px; align-items:baseline}
.passos b{color:var(--navy); font-weight:600}

/* =====================================================================
   ESCALA DE TIPO DO DESKTOP — 26/07/2026
   O celular ganhou sete degraus em 25/07 (bloco 20 da zona). O DESKTOP
   continuava servindo 37 tamanhos distintos em 9.593 caracteres, e oito
   deles cabiam dentro de 2,6 px: 14,7 · 15,2 · 15,4 · 15,5 · 15,7 · 16 ·
   16,3 · 16,8 — 43% do texto da página em degraus que ninguém distingue.
   Havia ainda 1.396 caracteres (14,6%) abaixo de 12 px, o menor a 9,9.
   Mesma lógica do celular, valores de desktop. Este bloco fica na BASE
   (não na zona) e o bloco ≤600, por vir depois, continua vencendo no
   celular. REGRA: nenhum font-size novo fora destas sete variáveis.
   ===================================================================== */
:root{
  --d1:2.4rem;     /* 38,4 — título de seção                */
  --d2:1.5rem;     /* 24   — pergunta do FAQ, título de card */
  --d3:1.2rem;     /* 19,2 — destaque de bloco               */
  --d4:1.1rem;     /* 17,6 — lead, valor de contato          */
  --d5:1rem;       /* 16   — corpo                           */
  --d6:.875rem;    /* 14   — nota, legenda                   */
  --d7:.8rem;      /* 12,8 — piso, só rótulo                 */
}
.h2,.cine .h2{font-size:var(--d1)}
.seg h3,.qa summary{font-size:var(--d2)}
.step .b b,.emp-facts b,.fleet-ds .ds-eq,.compare .col h3,
.contact-info h3,.cert b{font-size:var(--d3)}
.lead,.hero .lead,.cmp-lead,.company .lead,.ci-card .val,
.btn.big,.hero .btn.big{font-size:var(--d4)}
.compare li,.step .b p,.seg p,.emp-facts span,.company p,.qa .ans p,
.foot .fcol a,.foot .fcol p,.fleet-row .m,.stat .lb,.fleet-ds .ds-app,
.seg .go,.ds-envelope,.cta-float a,.btn,.field input,.field select,
.field textarea,.recs .spec,.ia-note{font-size:var(--d5)}
.fleet-photo .fp-cap,.emp-photo .fp-cap,.cmp-shot .fp-cap{font-size:var(--d6)}
.kicker,.hero .kicker,.field label,.foot .fcol h4,.stat-hero .lb,
.cine .cap,.ft-note,.sgi-note,.form-hint,.form-trust,
.client-grid .ft-note,.marginalia,
.compare details.col > summary,.fleet-fold > summary,.faq-more > summary{font-size:var(--d6)}
.cert .lab-s,.ci-card .lab,.fp-cap b,.cmp-shot .fp-cap b,.strip .item span,
.cine-spec span,.fleet-ds caption,.fleet-ds tfoot .ds-env,
.fleet-ds tfoot .ds-env .k,.seg-hint,.form-note,.foot .cr,
.fleet-ds .ds-eq small,.fleet-ds .ds-tf span,.sig-seal .chip,
.seal-tile.abratt-tile,.foot .fcerts .abratt-tile,.qa .qno,
.nav .links a.navlink,.fleet-ds thead th,.fleet-band .bl{font-size:var(--d7)}

/* caixa alta só nas aberturas de seção: no desktop ela vinha somada a corpo
   de 9,9 a 11,8 px em 66 elementos — a combinação que faz informação virar
   letra miúda de contrato */
.cert .lab-s,.ci-card .lab,.field label,.foot .fcol h4,
.fp-cap b,.cmp-shot .fp-cap b,.strip .item span,.cine-spec span,
.fleet-ds caption,.fleet-ds tfoot .ds-env .k,.seg-hint,.stat-hero .lb,.cine .cap,.seal-tile.abratt-tile,
.fleet-band .bl,.fleet-ds thead th{text-transform:none; letter-spacing:0}
.kicker,.hero .kicker{letter-spacing:.08em}

/* a condensada sai de onde há frase: a 23,2 px ela entregava 82,5% da
   largura do Inter, e as dez perguntas do FAQ liam como 19 px */
.qa summary,.step .b b,.emp-facts b,.cert b,.fleet-ds .ds-eq,
.compare .col h3,.ci-card .val{
  font-family:var(--font-body); font-weight:600; letter-spacing:-.005em}

/* =====================================================================
   ZONA RESPONSIVA — TODAS as media queries de layout vivem aqui, em
   ordem DESCENDENTE de largura. O bloco ≤600 (mobile-native, v10) vence
   os anteriores por ORDEM na cascata — isso é proposital: não inserir
   regra responsiva depois dele (exceto ≤460 e as queries de preferência).
   Desktop ≥861px: nada aqui pode alterá-lo.
   ===================================================================== */

@media(min-width:861px){.cta-float{display:flex; left:auto; right:24px; bottom:24px; width:auto}
  .cta-float .cf-tel{display:none}   /* o atalho de ligar é um gesto de celular */
  .cta-float a{flex:0 0 auto; padding:13px 22px}}

@media(max-width:1400px){.marginalia{display:none}}

@media(max-width:1024px){
  .nav .links{display:none}
  .burger{display:grid}
  /* SEM JS o mobile ficaria sem NENHUMA navegação (burger/drawer são JS):
     o drawer vira menu inline sob a barra (margin-top = altura da nav fixa,
     senão nasce coberto por ela), e o burger inerte some */
  html.no-js .burger{display:none}
  html.no-js .drawer{position:static; inset:auto; opacity:1; pointer-events:auto; transform:none; margin-top:84px; padding:10px var(--pad) 18px; gap:0}
  html.no-js .drawer a{font-size:1.05rem; padding:12px 0}
}

@media(max-width:900px){.seg-grid{grid-template-columns:1fr 1fr}}

/* ===== TABLET (≤860): grids de 2 colunas empilham ===== */
@media(max-width:860px){
  .hero{padding:124px 0 64px; align-items:center; min-height:min(78svh,720px)}
  .hero-text{max-width:none}
  .fleet{grid-template-columns:1fr} .fleet-photo{min-height:240px; order:-1}
  .company{grid-template-columns:1fr; gap:30px}
  /* contato: coluna única com os CONTATOS antes do formulário longo (QW4).
     grid-template-columns fica declarado (inerte sob flex) por segurança de cascata */
  .contact-grid{display:flex; flex-direction:column; grid-template-columns:1fr; gap:34px}
  .contact-info{order:1}
  .form{order:2}
  .field.row2{grid-template-columns:1fr}
  /* alvo de toque do tel/e-mail dentro do card: 44px sem inflar o card */
  .ci-card a.val{display:inline-flex; align-items:center; min-height:44px; margin:-10px 0}
  /* barra fixa discreta do celular\tablet: atalho de ligar (ícone) + a ação principal */
  .cta-float{display:flex}
  .cta-float .cf-tel{flex:0 0 auto; width:54px; padding:13px 0; gap:0;
    background:rgba(255,255,255,.94); color:var(--navy); border-color:rgba(1,43,129,.18);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
  .cta-float .cf-tel:hover{background:#fff}
  .cta-float .cf-tel svg{width:20px; height:20px}
  .cta-float .cf-tel .cf-lab{display:none}
  /* Obra: corrige o corte do topo + scrim INVERTIDO (o texto fica no TOPO
     no mobile — o gradiente denso precisa estar em cima, não embaixo) */
  .cine{height:auto; min-height:78svh; align-items:flex-start; overflow:hidden}
  .cine .media img{object-position:22% center}   /* a 70% o recorte do celular pegava só a fachada do prédio */
  .cine .wrap{padding-top:clamp(96px,15vh,140px); padding-bottom:clamp(88px,16vh,120px)}
  .cine .media::after{background:linear-gradient(180deg,rgba(1,13,38,.9) 0%,rgba(1,13,38,.72) 45%,rgba(1,13,38,.3) 78%,rgba(1,13,38,.12) 100%)}
  .cine h2{max-width:none; line-height:1.06}
  .cine .lead{max-width:44ch; font-size:1.02rem; line-height:1.5}
  .cine-spec{display:grid; grid-template-columns:1fr 1fr; gap:18px 24px; max-width:none}
  .cine-spec li.hero-spec{padding-right:0; border-right:0}
  /* clientes: 3 colunas (15 = 5×3, fileiras completas também aqui) */
  .client-grid.logos{grid-template-columns:repeat(3,1fr)}
  /* =====================================================================
     A FAIXA DO TABLET (601-860) usava o layout de coluna única SEM nenhum dos
     mecanismos de encurtamento, que moravam só em ≤600. Resultado medido:
     860px = 14.800 px de página, contra 12.480 em 861 e 11.290 em 600 — um
     pixel de largura custava 2.320 px de altura, e um iPad (768) pegava
     14.964 px, a pior experiência do site inteiro.
     As regras abaixo são CÓPIAS das do bloco ≤600 (duplicadas de propósito:
     mover quebraria a cascata que o ≤600 depende). O JS acompanha —
     `mobileEnhance` passou de 600 para 860.
     ===================================================================== */
  .stp-desc{display:none}
  .m-hide{display:none}
  .compare details.col > summary{
    display:flex; align-items:center; gap:10px; list-style:none; cursor:pointer;
    font-family:var(--font-body); font-size:.92rem; font-weight:600; letter-spacing:0;
    text-transform:none; color:var(--navy); padding:14px 2px; min-height:48px;
    border-top:1px solid var(--line);
  }
  .compare details.col > summary::-webkit-details-marker{display:none}
  .compare details.col > summary .cmp-x{margin-left:auto; font-size:1.35rem; color:var(--sky); transition:transform .3s var(--ease)}
  .compare details.col[open] > summary .cmp-x{transform:rotate(45deg)}
  /* o summary ja diz o nome da coluna: o h3 repetia a linha que a pessoa tocou */
  .compare details.col > h3{display:none}
  .fleet-fold > summary,.faq-more > summary{display:flex; align-items:center; gap:10px; list-style:none; cursor:pointer;
    font-family:var(--font-body); font-size:.92rem; font-weight:600; letter-spacing:0; text-transform:none;
    color:var(--navy); padding:14px 2px; min-height:48px; border-top:1px solid var(--line)}
  .fleet-fold > summary::-webkit-details-marker,.faq-more > summary::-webkit-details-marker{display:none}
  .fleet-fold > summary .cmp-x,.faq-more > summary .cmp-x{margin-left:auto; font-size:1.35rem; color:var(--sky); transition:transform .3s var(--ease)}
  .fleet-fold[open] > summary .cmp-x,.faq-more[open] > summary .cmp-x{transform:rotate(45deg)}
  .faq-more > summary{border-bottom:1px solid var(--line)}
  .fleet-fold.ds-fold > summary{border-top:0}
  .fleet-fold .bl{display:none}
  .ds-envelope{display:block; margin-top:10px; font-size:.84rem; color:var(--muted); line-height:1.7}
  .ds-fold[open] .ds-envelope{display:none}
  .ds-fold .fleet-ds{margin-top:6px}

  /* legenda de mídia EMPILHA quando o cartão estreita: em uma linha só, o rótulo
     em mono (nowrap) comia a largura e espremia a frase numa coluna de 3 palavras */
  .emp-photo .fp-cap,.fleet-photo .fp-cap{flex-direction:column; align-items:flex-start; gap:5px; line-height:1.25}
  .emp-photo .fp-cap b,.fleet-photo .fp-cap b{white-space:normal; line-height:1.2}
  /* duas linhas de legenda precisam de véu mais denso: no cartão estreito a
     legenda sobe até ~35% da altura, onde o gradiente do desktop já é transparente
     (foi assim que "MONUMENTO DO IPIRANGA" caiu sobre grama clara e sumiu) */
  .emp-photo::after{background:linear-gradient(0deg,rgba(2,10,30,.9) 0%,rgba(2,10,30,.66) 26%,rgba(2,10,30,.16) 52%,transparent 68%)}
  .fleet-photo::after{background:linear-gradient(0deg,rgba(2,10,30,.9) 0%,rgba(2,10,30,.66) 28%,rgba(2,10,30,.16) 54%,transparent 70%)}
  /* Obra em destaque: o CTA e a linha de reforço ficam na METADE DE BAIXO da foto,
     onde o scrim invertido já tinha clareado — texto branco sobre asfalto claro.
     O gradiente volta a fechar embaixo. */
  .cine .media::after{background:linear-gradient(180deg,rgba(1,13,38,.92) 0%,rgba(1,13,38,.74) 38%,rgba(1,13,38,.66) 62%,rgba(1,13,38,.78) 100%)}
}

/* ≤768: MESMO breakpoint do JS que troca vídeo→poster — o scrim denso só
   entra quando o fundo é o poster estático (senão sub-expõe o vídeo) */
@media(max-width:768px){
  .hero-bg::after{background:linear-gradient(0deg,rgba(1,13,38,.88) 0%,rgba(1,13,38,.66) 55%,rgba(1,13,38,.38) 100%)}
  /* o celular recebe o take em retrato: o poster de fundo tem de ser o mesmo quadro */
  .hero-bg{background-image:url("../assets/img/hero-poster-mob.jpg?v=1")}
}

@media(max-width:760px){
  .strip .wrap{grid-template-columns:1fr 1fr}
  .strip .item{padding:22px 18px}
  .strip .item:nth-child(odd){border-left:0; padding-left:0}
  .stats{grid-template-columns:1fr; gap:26px} .stat-hero .num{white-space:normal}
  .compare{grid-template-columns:1fr}
  .verdict{grid-template-columns:1fr 1fr; gap:12px; margin-top:20px}
  .verdict .vi{padding:18px 16px 16px}
  .verdict .vico{width:34px; height:34px; margin-bottom:12px}
  .verdict .vico svg{width:18px; height:18px}
  .foot .top{grid-template-columns:1fr 1fr} .foot .fcol.brand{grid-column:1 / -1}
}

/* frota: a tabela vira blocos empilhados */
@media(max-width:720px){
  .fleet-ds thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%)}
  .fleet-ds table,.fleet-ds caption,.fleet-ds tbody,.fleet-ds tfoot,.fleet-ds tr,.fleet-ds td{display:block;width:100%}
  .fleet-ds caption{letter-spacing:.08em}
  .fleet-ds tbody tr{padding:16px 20px;border-bottom:1px solid var(--line)}
  .fleet-ds tbody td{padding:0;border:0}
  .fleet-ds .ds-cell{margin:10px 0 2px}
  .fleet-ds .ds-tf{font-size:1.5rem;text-align:left;min-width:0}
  .fleet-ds .ds-bar{max-width:100%}
  .fleet-ds .ds-app{margin-top:12px;max-width:none}
  .fleet-ds tfoot td{padding:18px 20px}
}

@media(max-width:680px){
  .step{grid-template-columns:28px 1fr; gap:12px; padding:15px 0 24px} .step .ico{display:none} .step .n{font-size:1.1rem}
  .steps::before{left:72px}
  .qa .qno{min-width:34px} .qa .ans p{padding-left:4px}
}

@media(max-width:640px){
  /* CTAs primários full-width + rótulos do SVG legíveis (encolhe ~3x).
     36px rende ~10px em 375px; o aviso "vala aberta" some AQUI (colidiria com
     ENTRADA/SAÍDA — as coords do SVG são p/ fonte 13px) — a vala tracejada
     vermelha permanece no desenho e a seção Comparação repete a mensagem. */
  .hero .btn-row .btn.big,.cine .btn-row .btn.big{width:100%; justify-content:center}
  .sig-label{font-size:36px; letter-spacing:.04em}
  .sig-label.warn{display:none}
}

/* =====================================================================
   MOBILE-NATIVE (≤600) — refactor 07/2026. Sistema único: ritmo, toque
   ≥44px, tipografia fluida e densidade por seção. Substitui o v9.
   ===================================================================== */
@media(max-width:600px){
  /* 1 — RITMO/TIPO: respiro compacto + escalas fluidas (nada de piso travado) */
  :root{--sec:clamp(30px,5.5vh,44px)}
  .eyebrow-row{margin-bottom:14px}
  .display{font-size:clamp(2rem,9.5vw,2.5rem); letter-spacing:-.02em}
  .h2{font-size:clamp(1.35rem,5.8vw,1.8rem)}
  .lead{font-size:1rem; line-height:1.55}
  .kicker{font-size:.78rem; letter-spacing:.12em}
  .kicker::before{width:24px}
  /* micro-rótulos mono saem de 9.9px (ilegível) p/ ~10.9px */
  .strip .item span,.cine-spec span,.ci-card .lab,.seg-hint{font-size:.68rem; letter-spacing:.1em}
  .sig-head{margin-bottom:20px}

  /* touch: burger 48px (WCAG 2.5.8 / Material 3); logo-link ≥44px mesmo com a nav encolhida */
  .burger{width:48px; height:48px}
  .nav .row > a:first-child{display:flex; align-items:center; min-height:44px}

  /* 2 — HERO enxuto: poster de fundo, 1 CTA forte (Hick — o secundário vira
     link de texto), kicker em 1 linha, trust em linha corrida compacta.
     A linha-guia vertical do desktop sai aqui (densidade no limite) */
  .hero{min-height:0; padding:112px 0 48px}
  .hero-text{padding-left:0}
  .hero-text::before{display:none}
  .hero .kicker{font-size:.72rem; letter-spacing:.1em}
  .hero .lead{margin-top:16px}
  .hero .btn-row{margin-top:24px; flex-direction:column; align-items:stretch; gap:4px}
  .hero .btn-row .btn.ghost{width:auto; align-self:center; border:0; background:none; box-shadow:none;
    padding:11px 8px; min-height:44px; font-size:.98rem;
    text-decoration:underline; text-underline-offset:4px; text-decoration-color:rgba(255,255,255,.45)}
  .hero .trust{margin-top:18px; flex-direction:row; flex-wrap:wrap; align-items:center; gap:8px 16px; font-size:.64rem}
  .hero .trust .dot{display:none}

  /* 2b — FAIXA PÓS-HERO: o telefone é o elemento forte (leads por ligação
     convertem 25–40% vs ~2% de formulário — estudo mobile 07/2026) */
  .contact-band a[href^="tel"]{font-size:1.18rem; border-bottom-width:2px}

  /* 3 — STRIP mais denso */
  .strip .item{padding:16px 14px}
  .strip .item b{font-size:1.7rem}

  /* 4 — DIFERENCIAL (drill-path) */
  .signature .sig-seal{margin-bottom:20px; gap:10px}
  .sig-seal .chip{padding:9px 14px; font-size:.7rem}
  .hero-textlink{padding:12px 2px; min-height:44px}

  /* 5 — MÉTODO: passos densos (sem a régua vertical do desktop) */
  .steps{margin-top:20px}
  .steps::before{display:none}
  .step{grid-template-columns:36px 1fr; gap:12px; padding:13px 0}
  .step .n{font-size:1.3rem}
  .step .b b{font-size:1.1rem; margin-bottom:4px}
  .step .b p{font-size:.9rem; line-height:1.45}

  /* 6 — COMPARAÇÃO: as duas fotos ficam LADO A LADO (o contraste é o argumento);
     só o rótulo curto da legenda sobrevive — a frase longa não cabe em ~170px */
  .cmp-lead{margin-top:14px}
  .cmp-shots{gap:10px; margin-top:18px}
  .cmp-shot .fp-cap{left:10px; right:10px; bottom:8px}
  .cmp-shot .fp-cap span{display:none}
  .cmp-shot .fp-cap b{font-size:.58rem; letter-spacing:.08em; white-space:normal}
  .compare{margin-top:20px; gap:12px}
  .verdict{grid-template-columns:1fr 1fr; gap:12px; margin-top:18px}
  .verdict .vi > b{font-size:1.16rem}
  .verdict .vim{font-size:.88rem; margin-top:6px}
  .compare .col{padding:16px}
  .compare .col h3{font-size:1.1rem; margin-bottom:14px}
  .compare ul{gap:9px}
  .compare li{font-size:.95rem; line-height:1.45; gap:10px}
  .compare li .i{width:16px; height:16px; margin-top:2px}
  .compare details.col > summary{
    display:flex; align-items:center; gap:10px; list-style:none; cursor:pointer;
    font-family:var(--font-mono); font-size:.7rem; letter-spacing:.08em;
    text-transform:uppercase; color:var(--muted); padding:13px 0; min-height:44px;
  }
  .compare details.col > summary::-webkit-details-marker{display:none}
  .compare details.col > summary .cmp-x{margin-left:auto; font-size:1rem; transition:transform .3s var(--ease)}
  .compare details.col[open] > summary .cmp-x{transform:rotate(45deg)}
  .compare details.col > h3{display:none}

  /* 6b — OBRA LIMPA: no mobile a prova é a foto; os 3 fatos repetem o que a
     comparação acabou de dizer e custavam ~295px de rolagem */
  #obra-limpa .emp-facts{display:none}
  #obra-limpa .emp-photo{margin-top:18px; margin-bottom:0}

  /* 7 — NÚMEROS: herói ainda gigante, coadjuvantes compactos */
  .stat-hero{padding-bottom:16px; margin-bottom:16px}
  .stat-hero .num{font-size:clamp(3.2rem,13vw,4.2rem)}
  .stats{gap:24px}
  .stat{padding-left:16px}
  .stat .lb{margin-top:6px; font-size:.84rem}

  /* 8 — CLIENTES: 3 colunas em grade de linhas (mesma lógica do desktop) */
  .client-grid.logos{grid-template-columns:repeat(3,1fr); gap:0; margin-top:18px}
  .client-grid.logos li{min-height:52px; padding:10px 8px}
  .client-grid.logos li img{max-height:calc(var(--lh,34px) * .72); max-width:92%}
  .clients .ft-note{margin-top:12px}

  /* 9 — SEGMENTOS: carrossel scroll-snap horizontal full-bleed (peek do próximo) */
  .seg-grid{
    display:flex; grid-template-columns:none; gap:12px; margin-top:20px;
    overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    margin-inline:calc(var(--pad) * -1); padding:4px var(--pad) 8px;
    scroll-padding-left:var(--pad);
  }
  .seg-grid::-webkit-scrollbar{display:none}
  .seg{flex:0 0 84%; min-height:272px; scroll-snap-align:start; padding:18px}
  .seg.reveal{opacity:1; transform:none}         /* cards sempre visíveis no carrossel */
  .seg h3{font-size:1.3rem}
  /* sem hover no toque: scrim mais denso + sombra garantem o contraste do texto */
  .seg::after{background:linear-gradient(0deg,rgba(2,10,30,.92) 0%,rgba(2,10,30,.62) 52%,rgba(2,10,30,.14) 100%)}
  .seg p{text-shadow:0 1px 8px rgba(2,10,30,.5)}
  .seg .go{opacity:1; min-height:44px; align-items:center; margin-top:8px}
  .seg-rail{display:flex; align-items:center; gap:14px; margin-top:14px}
  .seg-hint{font-family:var(--font-mono); letter-spacing:.1em;
    text-transform:uppercase; color:var(--faint); white-space:nowrap}
  .seg-prog{flex:1; height:2px; background:var(--line); position:relative; overflow:hidden}
  .seg-prog i{position:absolute; inset:0 auto 0 0; width:100%; background:var(--sky);
    transform:scaleX(.16); transform-origin:left; transition:transform .15s var(--ease)}

  /* 10 — OBRA: título fluido + paddings mais curtos */
  .cine .wrap{padding-top:clamp(88px,13vh,116px); padding-bottom:clamp(64px,10vh,92px)}
  .cine .h2{font-size:clamp(1.3rem,5.6vw,1.55rem)}

  /* 11 — FROTA: linha vira grid [máquina | tf+barra] + classe de aplicação
     numa 2ª linha compacta (só a prosa longa .ds-desc sai). ~72px/linha
     em vez de ~105px, sem perder a classe de nenhuma máquina. */
  .fleet-ds tbody tr{display:grid; grid-template-columns:1fr auto; align-items:center; column-gap:12px; padding:9px 14px}
  .fleet-ds .ds-eq{font-size:.98rem}
  .fleet-ds .ds-eq small{font-size:.64rem; margin-top:2px}
  .fleet-ds .ds-cell{margin:0; gap:8px; flex-direction:row-reverse}
  .fleet-ds .ds-tf{font-size:1.05rem; text-align:right}
  .fleet-ds .ds-tf span{font-size:.6rem}
  .fleet-ds .ds-bar{width:72px; max-width:72px; height:4px}
  .fleet-ds .ds-app{display:block; grid-column:1 / -1; margin:3px 0 0; font-size:.8rem; line-height:1.35; max-width:none}
  .fleet-ds .ds-app .ds-desc{display:none}
  .fleet-ds caption{padding:12px 14px}
  .fleet-ds tfoot td{padding:12px 14px}
  .fleet-ds tfoot .ds-env{gap:6px 18px; font-size:.72rem}
  .fleet{margin-top:24px}
  .fleet-cta{margin-top:24px}
  .fleet .fleet-band{margin-bottom:14px}
  .fleet .lead{margin-top:14px}
  .fleet-photo{display:none}                    /* foto do operador é secundária no mobile */
  /* equipamentos de apoio = info secundária: colapsa em acordeão (audiência
     qualificada das telas profundas abre se quiser); itens sem sublinhado */
  .fleet-fold > summary,.faq-more > summary{display:flex; align-items:center; gap:10px; list-style:none; cursor:pointer;
    font-family:var(--font-mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase;
    color:var(--muted); padding:12px 0; min-height:44px}
  .fleet-fold > summary::-webkit-details-marker,.faq-more > summary::-webkit-details-marker{display:none}
  .fleet-fold > summary .cmp-x,.faq-more > summary .cmp-x{margin-left:auto; font-size:1rem; transition:transform .3s var(--ease)}
  .fleet-fold[open] > summary .cmp-x,.faq-more[open] > summary .cmp-x{transform:rotate(45deg)}
  .faq-more > summary{border-bottom:1px solid var(--line)}
  .fleet-fold .bl{display:none}
  .fleet-fold .fleet-row{padding-bottom:6px}
  .fleet-row .m{padding:6px 12px 6px 0; margin-right:10px; font-size:.88rem; border-bottom:0}
  .ft-note{font-size:.74rem; margin-top:12px}

  /* 12 — EMPRESA: prosa mais densa (ninguém lê >28% — layer-cake) e
     cartões ISO compactos (maior densidade de bordas da página no baseline) */
  .company{margin-top:4px; gap:22px}
  .company .lead,.company p{line-height:1.52}
  .emp-facts{margin-top:18px}
  .emp-facts li{grid-template-columns:1fr; gap:3px; padding:12px 0}
  .emp-facts b{font-size:1rem}
  .emp-facts span{font-size:.92rem}
  .ia-note{margin-top:18px; padding-left:14px}
  .emp-photo{margin-bottom:12px}
  .certs{gap:8px}
  .cert{min-width:0; flex:1 1 46%; padding:10px 12px; gap:10px}
  .cert b{font-size:1rem}
  .cert .seal-tile{width:40px; height:40px}

  /* 13 — FAQ denso (summary segue alvo ≥44px) */
  .faq{margin-top:58px}
  .qa summary{padding:11px 4px; gap:10px; font-size:1rem; line-height:1.35}
  .qa .qno{min-width:34px}
  .qa .ic{width:18px; height:18px}
  .qa .ans p{font-size:.95rem; padding:0 4px 16px 4px}

  /* 14 — CTA intermediário + flutuante mais discreto */
  .midcta .wrap{gap:18px}
  .cta-float a{padding:13px 18px; font-size:.95rem}

  /* 15 — CONTATO: pares curtos lado a lado, mapa menor, form denso */
  .contact-grid{margin-top:20px; gap:18px}
  .form{gap:10px}
  .field{gap:4px}
  .field.row2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
  .field input,.field select,.field textarea{padding:11px 13px}
  .field textarea{min-height:76px}
  .ci-card{padding:13px 15px}
  .ci-map iframe{height:110px}

  /* 16 — RODAPÉ: links com alvo 44px + folgas compactas + espaço p/ o CTA flutuante.
     Rodapé consumia ~1,2 tela no baseline (telas 5+ recebem ~10% da atenção somadas) */
  .foot{padding:30px 0 88px}
  .foot .top{grid-template-columns:1fr 1fr; gap:16px}   /* nav | contato lado a lado */
  .foot .fcol.brand{grid-column:1 / -1}
  .foot .logo{height:32px; margin-bottom:10px}
  .foot .fcol h4{margin-bottom:6px; font-size:.68rem}
  .foot .fcol a{padding:7px 0; min-height:44px; display:flex; align-items:center; font-size:.88rem}
  .foot .fcol p{padding:2px 0; font-size:.85rem}
  .foot .fcerts{margin-top:12px}
  .foot .fcerts .seal-tile{width:64px; height:64px}
  .foot .fcerts .abratt-tile{font-size:.92rem}
  .foot .cr{margin-top:16px; padding-top:12px}

  /* =====================================================================
     17 — PRIMEIRA DOBRA ENXUTA + LEITURA PROGRESSIVA (25/07/2026)
     Regra da dobra no celular: marca/menu · uma prova curta · headline ·
     uma frase · UM CTA · um visual. Tudo o que competia (selos, números,
     contatos, CTA secundário) continua no site, só que ABAIXO da dobra.
     ===================================================================== */
  /* o hero OCUPA a dobra inteira: nada mais divide a primeira tela com ele */
  .hero{min-height:100svh; padding:92px 0 64px}
  /* seta discreta: sem ela a tela cheia parece o fim da página */
  .hero::after{content:""; position:absolute; left:50%; bottom:22px; width:18px; height:18px; margin-left:-9px;
    border-right:2px solid rgba(255,255,255,.8); border-bottom:2px solid rgba(255,255,255,.8);
    transform:rotate(45deg); animation:heroCue 2.6s var(--ease) infinite; pointer-events:none}
  .hero .eyebrow-row{margin-bottom:14px}
  .hero .kicker .k-long{display:none}         /* em 375px o rótulo longo quebrava em 2 linhas */
  .hero .lead{font-size:1.02rem; line-height:1.55; margin-top:16px; max-width:32ch}
  .hero .lead .lead-long{display:none}        /* a 2ª oração vive no desktop */
  .hero .btn-row{margin-top:24px}
  .hero .btn.big{width:100%; justify-content:center; padding:17px 20px; font-size:1.04rem}
  .hero .btn.big.ghost{display:none}          /* um CTA só disputa nenhuma atenção */
  /* a prova volta para a dobra do celular: os quatro menores corpos da página
     eram justamente +1.000 km, as três ISO e a ABRATT — a única prova de
     terceiro que a dobra tem. Cabe: sobravam 232 px abaixo do CTA em 390. */
  .hero .trust{display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:16px; font-size:.7rem}
  .hero .trust .trust-ia{display:none}       /* o menos verificável dos quatro */

  /* faixa pós-hero: o telefone é a ação; o e-mail já está no rodapé e no formulário */
  .contact-band .sep,.contact-band a[href^="mailto"]{display:none}

  /* método: cada etapa entrega UMA frase; o detalhe técnico fica no desktop */
  .stp-desc{display:none}
  /* trechos de prosa que só o desktop carrega (a frase segue correta sem eles) */
  .m-hide{display:none}

  /* frota: a tabela de 7 máquinas colapsa e sobra o envelope em uma linha */
  .ds-envelope{display:block; margin-top:10px; font-family:var(--font-mono); font-size:.72rem;
    letter-spacing:.04em; color:var(--muted); line-height:1.7}
  .ds-fold[open] .ds-envelope{display:none}
  .ds-fold .fleet-ds{margin-top:6px}

  /* contato: o mapa é decorativo aqui — o endereço está em texto logo acima */
  .ci-map{display:none}
  /* nota do SGI: a prova são os selos; o texto normativo fica no desktop e em /politicas */
  .sgi-note{display:none}

  .cta-float{gap:8px; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom))}

  /* respiro: títulos e leads com mais ar, agora que sobra espaço */
  .h2{line-height:1.12}
  .sec .lead{line-height:1.55}
  .eyebrow-row{margin-bottom:16px}

  /* =====================================================================
     18 — FORMATO MOBILE (25/07/2026, 2ª rodada)
     Diagnóstico do Rafael: "tudo muito colado". Três causas medidas em
     390 px — respiro de seção curto demais, colunas de rótulo comendo a
     largura do texto, e controles que não pareciam controles.
     ===================================================================== */

  /* 18.1 RITMO — o respiro entre seções era clamp(30,5.5vh,44): dois blocos
     de assunto diferente encostavam. Sobe para ~56 px e os títulos ganham ar. */
  :root{--sec:clamp(44px,6.8vh,58px)}
  .sec .lead,.sec > .wrap > .lead{margin-top:14px}
  .h2 + .lead,.lines + .lead{margin-top:14px}

  /* 18.2 STRIP — 2×2 com alturas iguais e rótulo com entrelinha própria
     (em 2 linhas o letter-spacing de .14em colava as linhas) */
  .strip .item{padding:18px 14px; justify-content:flex-start; gap:6px}
  .strip .item span{line-height:1.4}

  /* 18.3 MÉTODO — a etapa respira e a régua de separação some do topo */
  .step{padding:15px 0}
  .step .b p{margin-top:2px}

  /* 18.4 COMPARAÇÃO — as duas fotos SÃO o argumento e vinham com 170×113 px.
     Vão de borda a borda da tela (ganha 40 px) e ficam em retrato 3/4:
     192×256 px cada. O rótulo cresce e o véu fecha embaixo. */
  .cmp-shots{margin-inline:calc(var(--pad) * -1); gap:3px; margin-top:20px}
  .cmp-shot{aspect-ratio:3/4; border-radius:0}
  .cmp-shot::after{border-radius:0;
    background:linear-gradient(0deg,rgba(2,10,30,.86) 0%,rgba(2,10,30,.5) 22%,transparent 46%)}
  .cmp-shot .fp-cap{left:12px; right:12px; bottom:10px}
  .cmp-shot .fp-cap b{font-size:.66rem; letter-spacing:.06em; line-height:1.25}

  /* 18.5 CONTROLES DE ACORDEÃO — eram rótulo cinza minúsculo em caixa alta:
     ninguém lê como botão. Viram linha navy com alvo de 48 px e sinal legível. */
  .compare details.col > summary,.fleet-fold > summary,.faq-more > summary{
    font-family:var(--font-body); font-size:.92rem; letter-spacing:0;
    text-transform:none; font-weight:600; color:var(--navy);
    padding:14px 2px; min-height:48px; border-top:1px solid var(--line)}
  .compare details.col > summary .cmp-x,.fleet-fold > summary .cmp-x,.faq-more > summary .cmp-x{
    font-size:1.35rem; font-weight:400; color:var(--sky); line-height:1}
  .faq-more > summary{border-bottom:1px solid var(--line)}
  .fleet-fold.ds-fold > summary{border-top:0}

  /* 18.6 FAQ — a coluna "Q.01" comia 44 px e jogava TODAS as perguntas para
     duas linhas (foi a tela que o Rafael mandou). A numeração é ornamento:
     sai no celular e a pergunta usa a largura inteira. */
  .qa .qno{display:none}
  .qa summary{padding:15px 2px; gap:14px; font-size:1.02rem; line-height:1.4; min-height:52px}
  .qa .ans p{padding:0 2px 18px 2px}

  /* 18.7 EMPRESA — os quatro selos em flex 46% davam cartões de alturas
     diferentes (ISO 45001 quebra em duas linhas, ABRATT não). Grid iguala. */
  .certs{display:grid; grid-template-columns:1fr 1fr; gap:8px}
  .cert{flex:initial; min-width:0; padding:12px}
  .cert .lab-s{line-height:1.3; display:block}

  /* 18.8 OBRA EM DESTAQUE — a ficha de números em 2 colunas colava linha
     com linha quando o rótulo quebrava */
  .cine-spec{gap:16px 18px}
  .cine-spec li span{line-height:1.35; display:block; margin-top:3px}
  .cine .btn-row{margin-top:24px}

  /* 18.9 SEGMENTOS — sem hover no toque o número ficava em .42 de alfa sobre
     céu claro e sumia (a especificidade tem de bater a de .seg .seg-no) */
  .seg .seg-no{color:rgba(255,255,255,.62); text-shadow:0 2px 12px rgba(2,10,30,.6)}

  /* =====================================================================
     19 — DESCOMPACTAÇÃO (25/07/2026, 3ª rodada)
     "mobile ainda está todo compactado". Causa raiz: os refactors
     anteriores otimizaram ROLAGEM e, para isso, o bloco mobile ENCOLHIA
     o tipo abaixo do tamanho base do site — `.h2` caía de 1,55rem para
     1,35; `.step p` de 0,98 para 0,90; `.compare li` de 1,02 para 0,95.
     Texto menor em tela menor: era isso que fechava a página.
     Aqui a escala volta a CRESCER no celular, e a altura que isso custa
     é o preço da leitura. Não reverter para economizar rolagem.
     ===================================================================== */

  /* 19.1 RITMO — respiro de seção e distância entre título e texto */
  :root{--sec:clamp(56px,8vh,72px); --pad:22px}
  .eyebrow-row,.hero .eyebrow-row{margin-bottom:20px}
  .sec .lead,.sec > .wrap > .lead,.h2 + .lead,.lines + .lead{margin-top:18px}

  /* 19.2 TÍTULOS — o h2 sai de 22,6 px para ~28 px em 390 */
  .h2{font-size:clamp(1.7rem,7.2vw,2.2rem); line-height:1.14}
  .display{font-size:clamp(2.1rem,9.8vw,2.6rem)}
  .cine .h2{font-size:clamp(1.55rem,6.4vw,1.9rem)}
  .kicker{font-size:.76rem}

  /* 19.3 CORPO — nada abaixo do tamanho base; entrelinha mais solta */
  .lead,.hero .lead{font-size:1.06rem; line-height:1.62}
  .step .b b{font-size:1.18rem; margin-bottom:5px}
  .step .b p{font-size:1rem; line-height:1.5}
  .step{padding:18px 0; gap:14px}
  .compare .col{padding:20px 18px}
  .compare .col h3{font-size:1.18rem; margin-bottom:16px}
  .compare li{font-size:1.02rem; line-height:1.52}
  .compare ul{gap:12px}
  .seg{min-height:288px; padding:20px}
  .seg h3{font-size:1.42rem}
  .seg p{font-size:1rem; line-height:1.5}
  .emp-facts li{padding:14px 0}
  .emp-facts b{font-size:1.08rem}
  .emp-facts span{font-size:1rem; line-height:1.55}
  .company .lead,.company p{line-height:1.6}
  .ia-note{padding-left:16px}

  .ft-note{font-size:.82rem; line-height:1.55}

  /* 19.4 LISTAS E CARTÕES — o alvo cresce junto com o texto */
  .qa summary{font-size:1.08rem; padding:12px 2px 18px; min-height:56px; line-height:1.42}
  .qa .ans p{font-size:1rem; line-height:1.6; padding:0 2px 20px 2px}
  .strip .item{padding:22px 16px}
  .strip .item b{font-size:1.9rem}
  .strip .item b.tag{font-size:var(--t4)}
  .strip .item span,.cine-spec span,.ci-card .lab,.seg-hint{font-size:.72rem}
  .stat .lb{font-size:.95rem; line-height:1.5; margin-top:8px}
  .stat-hero .lb{font-size:.76rem; line-height:1.55}
  /* selo em cima, texto embaixo: em linha o rótulo sobrava 89px e quebrava em duas */
  .cert{padding:14px; flex-direction:column; align-items:flex-start; gap:10px}
  .cert b{font-size:1.05rem; white-space:normal}
  .cert .lab-s{line-height:1.35}
  .cert .seal-tile{width:44px; height:44px}
  .cert .seal-tile.abratt-tile{width:auto; min-width:44px; height:36px; padding:0 10px}
  .fleet-ds tbody tr{padding:12px 16px}
  .fleet-ds .ds-eq{font-size:1.06rem}
  .fleet-ds .ds-app{font-size:.88rem; margin-top:4px}
  .fleet-ds .ds-envelope,.ds-envelope{font-size:.78rem}
  .fleet-row .m{font-size:.95rem}

  /* 19.5 CONTATO E RODAPÉ */
  .ci-card{padding:16px 18px}
  .ci-card .val{font-size:1.06rem}
  .field label{font-size:.7rem}
  .field input,.field select,.field textarea{padding:14px 15px}
  .field textarea{min-height:96px}
  .form{gap:14px}
  .foot{padding:38px 0 92px}
  .foot .fcol a,.foot .fcol p{font-size:.96rem}
  .foot .fcol h4{font-size:.72rem; margin-bottom:8px}
  .foot .top{gap:20px}

  /* 19.6 QUEBRAS DE LINHA — os `<span class="ln">` dos títulos foram
     desenhados para a medida do desktop. Com o tipo maior no celular eles
     deixam uma linha cheia até a borda e outra órfã. Aqui o título volta a
     FLUIR: os spans viram inline e a animação de revelação sai (sem opacidade
     envolvida, para não sumir com o texto sem JS). */
  .lines .ln{display:inline; overflow:visible}
  .lines .ln::after{content:" "}
  .lines .ln > span{display:inline; transform:none}
  /* mesma razão para a única quebra em <br> da página */
  #obra-limpa .h2 br{display:none}

  /* =====================================================================
     20 — ESCALA FECHADA (25/07/2026, 4ª rodada — a última de mobile)
     Auditoria: a página servia 34 tamanhos de fonte distintos na mesma tela,
     de 9,9 px a 51,2 px (Stripe usa 13, Linear 10, Apple 5); 23% dos
     caracteres abaixo de 14 px; 42 blocos com "menos de 13 px + CAIXA ALTA
     + tracking", que nenhuma das três referências usa uma única vez.
     Com 34 degraus o olho não aprende a hierarquia e reavalia bloco a bloco
     — é ISSO que se lê como "compactado", e não o corpo do texto, que já
     estava na banda das referências (16-17 px).
     Sete degraus, e cada seletor encaixado em um deles. Fora da regra ficam
     só os números-herói e a navegação em tela cheia, que são imagem.
     REGRA: nenhum font-size novo no celular sem ser uma destas variáveis.
     ===================================================================== */
  :root{
    --t1:1.75rem;    /* 28 — título de seção            */
    --t2:1.375rem;   /* 22 — subtítulo, número de etapa */
    --t3:1.1875rem;  /* 19 — destaque de bloco          */
    --t4:1.0625rem;  /* 17 — lead, pergunta, botão      */
    --t5:1rem;       /* 16 — corpo                      */
    --t6:.875rem;    /* 14 — nota, rótulo de abertura   */
    --t7:.8125rem;   /* 13 — piso                       */
  }

  /* 20.1 — os sete degraus */
  .h2,.cine .h2{font-size:var(--t1)}
  .seg h3,.step .n,.compare details.col > summary .cmp-x,
  .fleet-fold > summary .cmp-x,.faq-more > summary .cmp-x{font-size:var(--t2)}
  .step .b b,.emp-facts b,.fleet-ds .ds-eq,.compare .col h3,
  .contact-info h3{font-size:var(--t3)}
  /* o selo tem 85px de coluna útil: "ISO 14001" em 19px quebrava em duas linhas */
  .cert b{font-size:var(--t5); white-space:nowrap}
  .lead,.hero .lead,.cmp-lead,.company .lead,.qa summary,.ci-card .val,
  .btn.big,.hero .btn.big{font-size:var(--t4)}
  .compare li,.step .b p,.seg p,.emp-facts span,.company p,.qa .ans p,
  .foot .fcol a,.foot .fcol p,.fleet-row .m,.stat .lb,.fleet-ds .ds-app,
  .seg .go,.ds-envelope,.fleet-ds .ds-envelope,.cta-float a,.btn,
  .compare details.col > summary,.fleet-fold > summary,.faq-more > summary,
  .drawer .navbtn{font-size:var(--t5)}
  .kicker,.hero .kicker,.field label,.foot .fcol h4,.stat-hero .lb,
  .cine .cap,.ft-note,.sgi-note,.form-hint,.form-trust,
  .client-grid .ft-note{font-size:var(--t6)}
  .cert .lab-s,.ci-card .lab,.fp-cap b,.cmp-shot .fp-cap b,.strip .item span,
  .cine-spec span,.fleet-ds caption,.fleet-ds tfoot .ds-env,
  .fleet-ds tfoot .ds-env .k,.seg-hint,.form-note,.foot .cr,
  .fleet-ds .ds-eq small,.fleet-ds .ds-tf span,.sig-seal .chip,
  .seal-tile.abratt-tile,.foot .fcerts .abratt-tile,.qa .qno,
  .fleet-ds thead th{font-size:var(--t7)}

  /* 20.2 CAIXA ALTA só nas aberturas de seção (.kicker). Em 42 blocos ela vinha
     somada a corpo minúsculo e tracking — a combinação que faz informação
     virar letra miúda de contrato. */
  .cert .lab-s,.ci-card .lab,.field label,.foot .fcol h4,
  .fp-cap b,.cmp-shot .fp-cap b,.strip .item span,.cine-spec span,
  .fleet-ds caption,.fleet-ds tfoot .ds-env .k,.seg-hint,.stat-hero .lb,.cine .cap,.seal-tile.abratt-tile,
  .compare details.col > summary,.fleet-fold > summary,.faq-more > summary{
    text-transform:none; letter-spacing:0}
  .kicker,.hero .kicker{letter-spacing:.08em}      /* era .14em */

  /* 20.3 A CONDENSADA sai de onde há frase e fica nos títulos e números.
     Roboto Condensed a 17,3 px entrega 82,5% da largura do Inter: as dez
     perguntas do FAQ liam como 15,6 px sem que a medida acusasse. */
  .qa summary,.step .b b,.emp-facts b,.cert b,.fleet-ds .ds-eq,
  .compare .col h3,.ci-card .val{
    font-family:var(--font-body); font-weight:600; letter-spacing:-.005em}
}

/* telas muito estreitas (dobráveis): rodapé em 1 coluna —
   PRECISA vir depois do bloco ≤600 (senão a cascata o mata).
   07/2026: limiar 460→360 — em 375-460px as 2 colunas cabem e poupam ~350px
   de rolagem num rodapé que consumia 1,2 tela */
@media(max-width:360px){.foot .top{grid-template-columns:1fr}}

/* ===== preferências (independem de largura) ===== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important; transition-duration:.01ms !important}
  .reveal{opacity:1 !important; transform:none !important}
  .lines .ln > span{transform:none !important}
  .fleet-ds .ds-bar i{transform:none !important}
  body{cursor:auto}
  .cursor,.cursor-dot{display:none}
  .seg .bg img{transform:none !important}
}
@media(hover:none){
  .cursor,.cursor-dot{display:none}
  .qa summary,.btn,.field input,.field select,.field textarea{cursor:auto}
}

/* ===== despoluição mobile (pedido 23/07) ===== */
@media (max-width:600px){
  #metodo.signature{display:none}
  /* o separador logo após a signature oculta colidiria com a borda da strip */
  #metodo.signature + .sec-sep{display:none}
}