/* ══════════════════════════════════════════════════════════════
   MARCOS TRANSFER — folha única
   Mesma base dos sites anteriores: curva --mola, reveal [data-rv],
   onda diagonal nas grades, brilho de cursor nos botões.
   Paleta azul/marinho puxada da referência de aeroporto.
   ══════════════════════════════════════════════════════════════ */
:root{
 /* Azul amostrado do símbolo da logo (#204070) e âmbar de obra, que é o
    par clássico do setor. O âmbar preenche (botão, faixa, círculo de
    ícone) com texto marinho por cima; o azul cuida de texto e ícone
    sobre branco, onde o âmbar seria ilegível. */
 --ambar:#F2A21C;         /* preenchimento de ação */
 --ambar-cl:#FFB944;      /* hover e brilho */
 --azul:#1E3C6E;          /* marca: texto e ícone sobre branco */
 --azul-cl:#EAF0F9;       /* círculo dos ícones, painéis */
 --marinho:#0F2440;       /* superfícies escuras e texto sobre âmbar */
 --marinho-2:#17355C;
 --ambar-esc:#D98A0B;
 --dourado:#F2A21C;
 --tinta:#0F1C2E;
 --corpo:#5A6474;
 --suave:#8B94A3;
 --bg:#FFFFFF;
 --areia:#F6F8FB;
 --tec:#F2F6FB;        /* fundo das seções com render técnico */
 --linha:#E3E8F0;
 --linha-2:#EEF2F7;
 --verde:#1FA463;
 --sombra:0 1px 2px rgba(15,36,64,.04),0 8px 24px -12px rgba(15,36,64,.14);
 --sombra-alta:0 2px 6px rgba(15,36,64,.06),0 26px 52px -22px rgba(15,36,64,.24);
 --mola:cubic-bezier(.16,1,.3,1);
 --r:14px; --r-g:18px;
 --topo:92px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--corpo);
 font:400 16px/1.65 'Inter','Segoe UI',system-ui,sans-serif;
 -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
/* Todo ícone é <svg><use>. Sem medida o SVG vale 300x150 e estoura o grid. */
svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;
 stroke-linecap:round;stroke-linejoin:round}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{margin:0;color:var(--tinta);font-family:'Inter Tight','Inter',sans-serif;
 font-weight:800;letter-spacing:-.032em;line-height:1.06}
p{margin:0}
.wrap{width:min(1320px,calc(100% - 120px));margin-inline:auto}
.az{color:var(--ambar)}

/* ── rótulo de seção ──────────────────────────────────────────── */
.kicker{display:block;font-size:12px;font-weight:700;letter-spacing:.2em;
 text-transform:uppercase;color:var(--azul);margin-bottom:14px}
.sechd{text-align:center;max-width:680px;margin:0 auto 54px}
.sechd h2{font-size:clamp(28px,3.2vw,42px)}
.sechd .risco{width:56px;height:3px;border-radius:2px;background:var(--ambar);
 margin:20px auto 0}
.sechd p{margin-top:18px;font-size:17px;color:var(--corpo)}
.sechd.esq{text-align:left;margin-inline:0}
.sechd.esq .risco{margin-inline:0}


/* ══ BOTÕES ════════════════════════════════════════════════════
   Âmbar preenchido com texto marinho: branco sobre âmbar daria 2:1
   de contraste e ninguém leria. O brilho que segue o cursor é
   injetado pelo anim.js (.btn-glow). */
.btn,.btn-o{position:relative;display:inline-flex;align-items:center;justify-content:center;
 gap:10px;padding:15px 26px;border-radius:9px;font-weight:700;font-size:15px;
 letter-spacing:.01em;overflow:hidden;white-space:nowrap;
 transition:transform .5s var(--mola),box-shadow .5s var(--mola),
            background .3s ease,color .3s ease,border-color .3s ease}
.btn{background:var(--ambar);color:var(--marinho);
 box-shadow:0 10px 26px -14px rgba(242,162,28,.9)}
.btn:hover{background:var(--ambar-cl);transform:translateY(-2px);
 box-shadow:0 20px 36px -16px rgba(242,162,28,.7)}
.btn-o{background:#fff;color:var(--tinta);border:1px solid var(--linha);font-weight:600}
.btn-o:hover{border-color:var(--azul);color:var(--azul);transform:translateY(-2px);
 box-shadow:var(--sombra)}
.btn .seta,.btn-o .seta{width:17px;height:17px;transition:transform .5s var(--mola)}
.btn:hover .seta,.btn-o:hover .seta{transform:translateX(4px)}
.btn-glow{position:absolute;inset:0;pointer-events:none;opacity:0;
 background:radial-gradient(130px circle at var(--gx,50%) var(--gy,50%),
 rgba(255,255,255,.5),transparent 62%);transition:opacity .35s ease}
.btn-glow.on{opacity:1}
.btn-o .btn-glow{background:radial-gradient(130px circle at var(--gx,50%) var(--gy,50%),
 rgba(30,60,110,.10),transparent 62%)}
.link-t{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--azul);
 font-size:15px;transition:gap .4s var(--mola)}
.link-t svg{width:15px;height:15px}
.link-t:hover{gap:13px}

/* ══ NAV ═══════════════════════════════════════════════════════
   Dois estados: sobre o hero escuro ela é transparente com texto
   claro; passado o hero, .compact (do anim.js) traz o fundo branco
   e o texto escuro. Só as cores mudam — a geometria é a mesma. */
.nav{position:fixed;inset:0 0 auto;z-index:900;background:transparent;
 border-bottom:1px solid transparent;
 transition:background .45s ease,box-shadow .45s ease,border-color .45s ease}
.nav.compact{background:rgba(255,255,255,.94);backdrop-filter:blur(16px);
 border-color:var(--linha);box-shadow:0 10px 30px -24px rgba(6,40,44,.55)}
.navin{display:flex;align-items:center;gap:42px;height:var(--topo);
 transition:height .45s var(--mola)}
.nav.compact .navin{height:70px}

.logo{display:flex;align-items:center;gap:13px}
.logo .mk{width:186px;height:auto;flex:none;
 transition:width .45s var(--mola),transform .55s var(--mola)}
.nav.compact .logo .mk{width:158px}
.logo:hover .mk{transform:translateY(-2px) scale(1.04)}
.logo b{font-family:'Inter Tight','Inter',sans-serif;font-size:22px;font-weight:800;
 color:#fff;letter-spacing:-.03em;line-height:1;transition:color .45s ease}
.logo b span{font-weight:500;color:#9DB8DE;transition:color .45s ease}
.logo small{display:block;font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;
 color:rgba(255,255,255,.55);font-weight:600;margin-top:5px;transition:color .45s ease}
.nav.compact .logo b{color:var(--tinta)}
.nav.compact .logo b span{color:var(--suave)}
.nav.compact .logo small{color:var(--suave)}

.navlinks{display:flex;gap:34px;margin-inline:auto;font-size:15.5px;font-weight:500}
.navlinks a{position:relative;padding:7px 0;color:rgba(255,255,255,.74);
 transition:color .3s ease}
.navlinks a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:2px;
 border-radius:2px;background:var(--ambar-cl);transition:right .45s var(--mola)}
.navlinks a:hover,.navlinks a.active{color:#fff}
.navlinks a:hover::after,.navlinks a.active::after{right:0}
.nav.compact .navlinks a{color:var(--corpo)}
.nav.compact .navlinks a:hover,.nav.compact .navlinks a.active{color:var(--tinta)}
.nav.compact .navlinks a::after{background:var(--azul)}

.navright{display:flex;align-items:center;gap:22px}
.navfone{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:15.5px;
 color:#fff;transition:color .3s ease,opacity .3s ease}
.navfone svg{width:19px;height:19px;fill:currentColor;stroke:none}
.navfone:hover{opacity:.8}
.nav.compact .navfone{color:var(--tinta)}
.navright .btn{padding:14px 24px;font-size:14.5px}
.burger{display:none;width:44px;height:44px;border-radius:10px;place-items:center;
 border:1px solid rgba(255,255,255,.32);transition:border-color .45s ease}
.burger span{display:block;width:19px;height:1.8px;background:#fff;border-radius:2px;
 transition:transform .45s var(--mola),opacity .3s ease,background .45s ease}
.burger span+span{margin-top:5px}
.nav.compact .burger{border-color:var(--linha)}
.nav.compact .burger span{background:var(--tinta)}
.nav.aberto .burger span:nth-child(1){transform:translateY(6.8px) rotate(45deg)}
.nav.aberto .burger span:nth-child(2){opacity:0}
.nav.aberto .burger span:nth-child(3){transform:translateY(-6.8px) rotate(-45deg)}

/* ══ 1 · HERO ══════════════════════════════════════════════════
   A foto sangra por trás da nav. O véu são duas camadas: uma escura
   no topo, para a nav ler sobre o céu claro, e outra na horizontal,
   forte à esquerda onde fica o texto e quase nula sobre o carro. */
.hero{position:relative;padding-top:var(--topo);overflow:hidden;background:#04262B;
 min-height:100vh;min-height:100svh}
.hero-foto{position:absolute;inset:0;z-index:0}
.hero-foto img{width:100%;height:100%;object-fit:cover;object-position:55% 62%}
.hero-foto::after{content:'';position:absolute;inset:0;
 background:
  linear-gradient(180deg,rgba(8,18,34,.66) 0%,rgba(8,18,34,.20) 16%,rgba(8,18,34,0) 32%),
  linear-gradient(96deg,rgba(8,20,38,.90) 0%,rgba(8,20,38,.82) 28%,rgba(10,24,44,.54) 45%,
   rgba(10,24,44,.20) 61%,rgba(10,24,44,.04) 78%,rgba(10,24,44,.20) 100%)}
/* A coluna ocupa o que sobra da primeira tela. As duas margens automáticas
   — uma no texto, outra no cartão — dividem a sobra em partes iguais: o
   texto desce para a faixa de cima do meio em vez de ficar grudado na nav,
   e a folga que fica entre ele e o cartão é a mesma que fica acima dele.
   svh evita o pulo quando a barra do navegador do celular recolhe. */
.heroin{position:relative;z-index:3;display:flex;flex-direction:column;
 min-height:calc(100vh - var(--topo));min-height:calc(100svh - var(--topo));
 padding:clamp(26px,4vh,54px) 0 clamp(34px,5.6vh,66px)}
.hcopy{margin-top:auto}
.hcopy{max-width:760px}
.hero .kicker{font-size:14.5px;font-weight:600;color:#9DB8DE;
 letter-spacing:.24em;margin-bottom:18px}
.hcopy h1{font-size:clamp(36px,4.55vw,63px);line-height:1.08;color:#fff;
 letter-spacing:-.035em}
/* cada linha é uma janela: o texto entra deslizando de dentro dela.
   O padding compensa o overflow:hidden, que senão corta a cedilha de
   "começa" e a perna do "q" de "embarque". */
.hcopy h1 .linha{display:block;overflow:hidden;
 padding-bottom:.09em;margin-bottom:-.09em}
.hcopy h1 .linha > span{display:block}
.hcopy h1 .az{color:#FFB944}
.hcopy > p{margin-top:24px;font-size:18.5px;line-height:1.62;color:#C6D2E2}

.hselos{display:flex;margin-top:40px;flex-wrap:wrap;row-gap:20px}
.hselo{display:flex;align-items:center;gap:13px;padding:2px 26px;
 border-left:1px solid rgba(255,255,255,.17)}
.hselo:first-child{padding-left:0;border-left:0}
.hselo > svg{width:29px;height:29px;stroke:#FFB944;stroke-width:1.6;
 transition:transform .5s var(--mola)}
.hselo:hover > svg{transform:translateY(-3px)}
.hselo b{display:block;font-size:17px;font-weight:600;color:#fff;line-height:1.3;
 font-family:inherit;letter-spacing:0;text-shadow:0 1px 12px rgba(6,16,30,.8)}
.hselo > span > span{display:block;font-size:14px;color:#A9B8CB;margin-top:3px;
 text-shadow:0 1px 12px rgba(6,16,30,.85)}

/* ══ ENTRADA DO HERO ═══════════════════════════════════════════
   Keyframes disparados no próprio carregamento, sem classe posta por
   JS. A versão anterior fazia o contrário — escondia tudo no CSS e
   esperava o JS revelar depois de document.fonts.ready — e por isso
   não rodava: a fonte demorava ~900ms, o hero ficava em branco esse
   tempo todo, e qualquer engasgo no caminho (erro de script, aba em
   segundo plano) deixava a primeira tela vazia de vez.

   Aqui o navegador já começa a animação ao ler o CSS. O fill "both"
   segura o primeiro quadro durante o atraso e trava o último no fim,
   então o elemento nunca depende de ninguém para terminar visível.
   Com "reduzir movimento" a regra *{animation:none} lá embaixo zera
   tudo e cada elemento fica no seu estado natural, que já é o final.

   A ordem é a que o olho percorre: a foto fecha o zoom, depois entram
   rótulo, as duas linhas do título saindo de dentro da própria
   máscara, o texto, os selos em cascata e por fim o cartão. */
@keyframes sobe{
 from{opacity:0;transform:translate3d(0,26px,0)}
 to{opacity:1;transform:none}
}
@keyframes desce{
 from{opacity:0;transform:translate3d(0,-18px,0)}
 to{opacity:1;transform:none}
}
@keyframes revela-linha{
 from{transform:translate3d(0,112%,0)}
 to{transform:none}
}
@keyframes aproxima{
 from{transform:scale(1.13)}
 to{transform:none}
}

.nav{animation:desce .9s var(--mola) .05s both}
.hero-foto img{animation:aproxima 2.9s cubic-bezier(.22,1,.26,1) both}
.hero .kicker{animation:sobe .9s var(--mola) .20s both}
.hcopy h1 .linha > span{animation:revela-linha 1.2s cubic-bezier(.19,1,.22,1) both}
.hcopy h1 .linha:nth-child(1) > span{animation-delay:.30s}
.hcopy h1 .linha:nth-child(2) > span{animation-delay:.42s}
.hcopy > p{animation:sobe .95s var(--mola) .60s both}
.hselo{animation:sobe .95s var(--mola) both}
.hselo:nth-child(1){animation-delay:.72s}
.hselo:nth-child(2){animation-delay:.80s}
.hselo:nth-child(3){animation-delay:.88s}
.cota{animation:sobe 1s var(--mola) .96s both}

/* ══ FUNDO TÉCNICO E MOLDURA DAS SEÇÕES ════════════════════════
   "Nosso compromisso" e "Como trabalhamos" passam a dividir a mesma
   moldura: render arquitetônico desbotado ao fundo, textos soltos nas
   margens e uma régua de assinatura no rodapé da seção. */
.por,.como{position:relative;overflow:hidden;isolation:isolate;
 padding:clamp(84px,7.6vw,122px) 0 clamp(72px,7vw,104px);background:var(--tec)}

.secbg{position:absolute;inset:0;z-index:-1;pointer-events:none;
 background:url(img/fundo-tecnico.webp) center center/cover no-repeat}
/* véu claro no miolo: o texto cai exatamente onde a arte é mais vazia,
   mas o véu garante contraste mesmo em telas muito largas */
.secbg::after{content:'';position:absolute;inset:0;
 background:radial-gradient(62% 58% at 50% 45%,rgba(242,246,251,.92) 0%,
 rgba(242,246,251,.55) 55%,rgba(242,246,251,0) 100%)}

/* textos de margem: só quando sobra pista fora do container de 1320px */
.margem{display:none;position:absolute;z-index:1;
 font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
 line-height:2.1;color:var(--suave)}
.m-ce{left:clamp(24px,3.2vw,64px);top:clamp(96px,11vw,150px)}
.m-de{right:clamp(24px,3.2vw,64px);top:clamp(150px,17vw,235px);text-align:right}
.m-de::after{content:'';display:block;width:40px;height:1px;background:var(--linha);
 margin:16px 0 0 auto}
@media (min-width:1500px){ .margem{display:block} }

.por .sechd,.como .sechd{max-width:780px}
.por .sechd .risco,.como .sechd .risco{width:64px;height:3px;background:var(--ambar);
 border-radius:2px;margin-top:22px}
.por .sechd p,.como .sechd p{max-width:720px;margin-inline:auto;
 font-size:clamp(15.5px,1.16vw,17px);line-height:1.72}

/* régua de assinatura no rodapé da seção */
.secfecho{display:flex;align-items:center;justify-content:space-between;
 gap:clamp(20px,3vw,44px);flex-wrap:wrap;
 margin-top:clamp(44px,4.6vw,64px);
 font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
 color:var(--suave)}
.secfecho span,.secfecho b{display:flex;align-items:center;gap:16px;font-weight:600}
.secfecho span::before,.secfecho b::before{content:'';width:clamp(26px,3vw,44px);
 height:1px;flex:none;background:var(--linha)}
.secfecho b::before{background:var(--ambar)}

/* ══ 2 · NOSSO COMPROMISSO ═════════════════════════════════════ */
.porgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,24px)}
.porcard{text-align:center;border-radius:14px;background:#fff;
 padding:clamp(30px,2.8vw,42px) clamp(20px,2vw,28px) clamp(26px,2.6vw,36px);
 border:1px solid var(--linha-2);
 box-shadow:0 20px 44px -34px rgba(15,36,64,.42);
 transition:transform .6s var(--mola),box-shadow .6s var(--mola)}
.porcard:hover{transform:translateY(-8px);box-shadow:0 30px 60px -34px rgba(15,36,64,.48)}
.porcard i{width:clamp(64px,5vw,74px);height:clamp(64px,5vw,74px);border-radius:50%;
 display:grid;place-items:center;background:var(--azul-cl);margin:0 auto 22px;
 transition:background .45s ease,transform .6s var(--mola)}
.porcard:hover i{background:var(--ambar);transform:scale(1.06) rotate(-6deg)}
.porcard i svg{width:30px;height:30px;stroke:var(--azul);stroke-width:1.7;
 transition:stroke .45s ease}
.porcard:hover i svg{stroke:var(--marinho)}
.porcard h3{font-size:clamp(17px,1.35vw,20px);margin:0}
/* fio âmbar entre o título e o texto, como na referência */
.porcard h3::after{content:'';display:block;width:46px;height:3px;border-radius:2px;
 background:var(--ambar);margin:14px auto 18px}
.porcard p{font-size:clamp(14px,1.05vw,15.2px);line-height:1.7;color:var(--corpo)}

/* ── faixa de números ─────────────────────────────────────────── */
.nums{margin-top:76px;display:grid;grid-template-columns:repeat(4,1fr);
 background:var(--marinho);border-radius:var(--r-g);overflow:hidden;
 background-image:radial-gradient(900px 300px at 15% -40%,rgba(242,162,28,.40),transparent 70%)}
.num{padding:42px 26px;text-align:center;border-right:1px solid rgba(255,255,255,.08)}
.num:last-child{border-right:0}
.num b{display:block;font-family:'Inter Tight','Inter',sans-serif;font-size:clamp(30px,3.4vw,42px);
 font-weight:800;color:#fff;letter-spacing:-.03em;line-height:1;
 transition:text-shadow .6s ease,color .6s ease}
.num b.num-glow{color:#fff;text-shadow:0 0 22px rgba(94,231,214,.85)}
.num span{display:block;margin-top:10px;font-size:13.5px;color:rgba(255,255,255,.62);
 letter-spacing:.03em}

/* ══ 3 · CATÁLOGO DE SERVIÇOS ══════════════════════════════════
   Cartão-link inteiro: foto com etiqueta, título, rota, o que inclui e
   o preço na base. O .sin é coluna flex com a lista em flex:1 para que
   a faixa de preço encoste embaixo em todos os cartões, mesmo com
   títulos de uma ou duas linhas — senão os doze preços dançam. */
.serv{padding:110px 0 120px;background:var(--bg)}
.servgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.scard{display:flex;flex-direction:column;background:#fff;border-radius:var(--r-g);
 overflow:hidden;border:1px solid var(--linha-2);color:inherit;
 transition:transform .6s var(--mola),box-shadow .6s var(--mola),border-color .4s ease}
.scard:hover{transform:translateY(-9px);box-shadow:var(--sombra-alta);border-color:transparent}
.scard[hidden]{display:none}
.sfoto{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;flex:none}
.sfoto img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--mola)}
.scard:hover .sfoto img{transform:scale(1.07)}
.stag{position:absolute;z-index:2;left:12px;top:12px;display:inline-flex;align-items:center;
 gap:6px;padding:7px 13px;border-radius:999px;background:rgba(255,255,255,.95);
 backdrop-filter:blur(6px);font-size:11.5px;font-weight:700;color:var(--tinta);
 box-shadow:0 6px 16px -9px rgba(6,40,44,.55)}
.stag svg{width:13px;height:13px;stroke:var(--azul)}
.sin{display:flex;flex-direction:column;flex:1;padding:20px 20px 22px}
.stit{display:block;font-family:'Inter Tight','Inter',sans-serif;font-size:17px;
 font-weight:800;color:var(--tinta);letter-spacing:-.025em;line-height:1.3}
.srota{display:flex;align-items:center;gap:7px;margin-top:9px;font-size:12.5px;
 color:var(--suave);line-height:1.35}
.srota svg{width:14px;height:14px;stroke:var(--azul);flex:none}
.slist{list-style:none;margin:15px 0 0;padding:0;display:grid;gap:8px;align-content:start;flex:1}
.slist li{display:flex;gap:8px;align-items:flex-start;font-size:13.2px;line-height:1.45;
 color:var(--corpo)}
.slist svg{width:14px;height:14px;stroke:var(--verde);stroke-width:2.2;flex:none;margin-top:3px}
.spreco{display:flex;align-items:baseline;gap:8px;margin-top:18px;padding-top:16px;
 border-top:1px solid var(--linha-2)}
.spreco > span:first-child{font-size:12.5px;color:var(--suave)}
.spreco b{font-family:'Inter Tight','Inter',sans-serif;font-size:23px;font-weight:800;
 color:var(--ambar-esc);letter-spacing:-.03em}
.sseta{margin-left:auto;align-self:center;width:32px;height:32px;border-radius:50%;
 background:var(--azul-cl);display:grid;place-items:center;flex:none;
 transition:background .4s ease,transform .5s var(--mola)}
.sseta svg{width:15px;height:15px;stroke:var(--azul);stroke-width:2;
 transition:stroke .4s ease}
.scard:hover .sseta{background:var(--ambar);transform:translateX(3px)}
.scard:hover .sseta svg{stroke:var(--marinho)}
.servnota{max-width:660px;margin:36px auto 0;text-align:center;font-size:13.5px;
 line-height:1.6;color:var(--suave)}

/* ══ 5 · COMO TRABALHAMOS ══════════════════════════════════════ */
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,24px)}
.passo{position:relative;text-align:center;border-radius:14px;background:#fff;
 padding:clamp(30px,2.8vw,40px) clamp(18px,1.9vw,26px) clamp(26px,2.6vw,34px);
 border:1px solid var(--linha-2);
 box-shadow:0 20px 44px -34px rgba(15,36,64,.42);
 transition:transform .6s var(--mola),box-shadow .6s var(--mola)}
.passo:hover{transform:translateY(-7px);box-shadow:0 30px 60px -34px rgba(15,36,64,.48)}
.passo i{width:clamp(66px,5.2vw,78px);height:clamp(66px,5.2vw,78px);border-radius:50%;
 display:grid;place-items:center;background:var(--ambar);margin:0 auto 22px;
 position:relative;z-index:2;
 box-shadow:0 0 0 9px #fff,0 16px 30px -14px rgba(242,162,28,.85);
 transition:transform .6s var(--mola)}
.passo:hover i{transform:translateY(-4px) scale(1.05)}
.passo i svg{width:31px;height:31px;stroke:var(--marinho);stroke-width:1.9}
.passo .et{display:block;font-size:11px;font-weight:700;letter-spacing:.18em;
 text-transform:uppercase;color:var(--suave);margin-bottom:9px}
.passo h3{font-size:clamp(17px,1.35vw,20px);margin-bottom:11px}
.passo p{font-size:clamp(13.8px,1.02vw,15px);line-height:1.68;color:var(--corpo);
 max-width:none;margin:0}

/* tracejado ligando as etapas, atravessando o vão entre os cartões, com
   um ponto âmbar no meio. Fica na altura do centro do círculo. */
.passo::after,.passo::before{content:'';position:absolute;
 top:calc(clamp(30px,2.8vw,40px) + clamp(33px,2.6vw,39px));pointer-events:none}
.passo::after{left:100%;width:clamp(14px,1.6vw,24px);height:2px;
 background-image:linear-gradient(90deg,var(--linha) 55%,transparent 0);
 background-size:8px 2px}
.passo::before{left:100%;margin-left:calc(clamp(14px,1.6vw,24px) / 2 - 3px);
 margin-top:-2px;width:6px;height:6px;border-radius:50%;background:var(--ambar);z-index:1}
.passo:last-child::after,.passo:last-child::before{display:none}

/* ══ 7 · DESTINOS ══════════════════════════════════════════════ */
.dest{padding:110px 0}
.desttop{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;
 margin-bottom:52px}
.desttop .sechd{margin-bottom:0}
.egrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.ecard{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:4/3.4;
 display:block;transition:transform .6s var(--mola),box-shadow .6s var(--mola)}
.ecard:hover{transform:translateY(-8px);box-shadow:var(--sombra-alta)}
.ecard img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--mola)}
.ecard:hover img{transform:scale(1.08)}
.ecard::after{content:'';position:absolute;inset:0;
 background:linear-gradient(180deg,transparent 34%,rgba(8,20,38,.82) 100%)}
.einfo{position:absolute;z-index:2;left:18px;right:18px;bottom:16px;
 display:flex;align-items:flex-end;justify-content:space-between;gap:10px;color:#fff}
.einfo b{display:block;font-size:15px;font-weight:700;line-height:1.25}
.einfo span{display:block;font-size:12.5px;color:rgba(255,255,255,.72);margin-top:3px}
.einfo .sv{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.18);
 backdrop-filter:blur(6px);display:grid;place-items:center;flex:none;
 transition:background .4s ease,transform .5s var(--mola)}
.einfo .sv svg{width:15px;height:15px;stroke:#fff;stroke-width:2}
.ecard:hover .sv{background:var(--ambar);transform:translateX(3px)}
.ecard:hover .sv svg{stroke:var(--marinho)}

/* ══ 8 · FAIXA DE CONTATO ══════════════════════════════════════ */
.faixa{background:var(--ambar);color:var(--marinho);
 background-image:radial-gradient(700px 240px at 8% 0%,rgba(255,255,255,.35),transparent 65%)}
.faixain{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:34px 0}
.fx{display:flex;align-items:center;gap:16px;color:var(--marinho);justify-content:center}
.fx i{width:50px;height:50px;border-radius:13px;background:rgba(15,36,64,.10);
 display:grid;place-items:center;flex:none;
 transition:background .4s ease,transform .55s var(--mola)}
.fx:hover i{background:rgba(15,36,64,.18);transform:translateY(-3px)}
.fx i svg{width:22px;height:22px;stroke:var(--marinho)}
.fx span{display:block;font-size:12.5px;color:rgba(15,36,64,.72)}
.fx b{display:block;font-size:17px;font-weight:700;margin-top:2px}

/* ══ 9 · RODAPÉ ════════════════════════════════════════════════ */
.rod{background:var(--marinho);color:rgba(255,255,255,.6);padding:76px 0 0;
 background-image:radial-gradient(900px 400px at 85% 0%,rgba(242,162,28,.26),transparent 66%)}
.rodgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1.15fr;gap:40px;
 padding-bottom:58px}
.rodmarca .logo b{color:#fff}
.rodmarca .logo b span{color:rgba(255,255,255,.45)}
.rodmarca .logo small{color:rgba(255,255,255,.42)}
.rodmarca p{margin-top:22px;font-size:14.5px;line-height:1.7;max-width:290px}
.social{display:flex;gap:10px;margin-top:24px}
.social a{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.08);
 display:grid;place-items:center;
 transition:background .35s ease,transform .5s var(--mola)}
.social a:hover{background:var(--ambar);transform:translateY(-3px)}
.social a:hover svg{stroke:var(--marinho)}
.social svg{width:17px;height:17px;stroke:#fff;stroke-width:1.7}
.rodcol h4{color:#fff;font-size:15px;font-weight:700;margin-bottom:20px;
 letter-spacing:-.01em}
.rodcol ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.rodcol a{font-size:14.2px;color:rgba(255,255,255,.58);
 transition:color .3s ease,padding-left .4s var(--mola)}
.rodcol a:hover{color:#fff;padding-left:5px}
.rodcol .linha-c{display:flex;gap:11px;font-size:14.2px;line-height:1.55;
 color:rgba(255,255,255,.58)}
.rodcol .linha-c svg{width:16px;height:16px;stroke:var(--ambar-cl);margin-top:3px}
.rodbase{border-top:1px solid rgba(255,255,255,.09);padding:22px 0;text-align:center;
 font-size:13px;color:rgba(255,255,255,.4)}

/* ══ BOTÃO FLUTUANTE DO WHATSAPP ═══════════════════════════════ */
.wa{position:fixed;right:24px;bottom:24px;z-index:950;width:58px;height:58px;
 border-radius:50%;background:#25D366;display:grid;place-items:center;
 box-shadow:0 14px 30px -10px rgba(37,211,102,.75);
 transition:transform .55s var(--mola),box-shadow .55s var(--mola)}
.wa:hover{transform:scale(1.08) translateY(-2px);
 box-shadow:0 20px 38px -12px rgba(37,211,102,.85)}
.wa svg{width:29px;height:29px;fill:#fff;stroke:none}
.wa::before{content:'';position:absolute;inset:0;border-radius:50%;
 border:2px solid rgba(37,211,102,.55);animation:pulso 2.6s ease-out infinite}
@keyframes pulso{0%{transform:scale(1);opacity:.8}70%{transform:scale(1.5);opacity:0}
 100%{opacity:0}}

/* ══ REVEAL — mesmo sistema [data-rv] dos sites anteriores ══════ */
.anim [data-rv]{opacity:0;transform:translate3d(0,26px,0);
 transition:opacity .85s var(--mola) var(--d,0s),transform .95s var(--mola) var(--d,0s)}
.anim [data-rv="left"]{transform:translate3d(-34px,0,0)}
.anim [data-rv="right"]{transform:translate3d(34px,0,0)}
.anim [data-rv="zoom"]{transform:scale(.94)}
.anim [data-rv].in{opacity:1;transform:none}

/* onda diagonal das grades — o atraso --wd vem do anim.js */
.anim .porgrid .porcard[data-wave],
.anim .servgrid .scard[data-wave],
.anim .fgrid .fcard[data-wave],
.anim .rgrid .rcard[data-wave],
.anim .pgrid .passo[data-wave],
.anim .dgrid .dcard[data-wave],
.anim .egrid .ecard[data-wave]{
 opacity:0;transform:translate3d(0,34px,0) scale(.97);
 transition:opacity 1s var(--mola) var(--wd,0s),transform 1s var(--mola) var(--wd,0s)}
.anim .porgrid .porcard[data-wave].wv-in,
.anim .servgrid .scard[data-wave].wv-in,
.anim .fgrid .fcard[data-wave].wv-in,
.anim .rgrid .rcard[data-wave].wv-in,
.anim .pgrid .passo[data-wave].wv-in,
.anim .dgrid .dcard[data-wave].wv-in,
.anim .egrid .ecard[data-wave].wv-in{opacity:1;transform:none}

/* cursor do título datilografado */
.cursor{display:inline-block;width:2px;height:.82em;background:currentColor;
 margin-left:3px;vertical-align:-1px;animation:pisca 1s steps(1) infinite}
@keyframes pisca{50%{opacity:0}}
.cursor.off{display:none}

@media (prefers-reduced-motion:reduce){
 *{animation:none!important;transition-duration:.01ms!important}
 html{scroll-behavior:auto}
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVO
   O hero é uma foto de fundo, então ele não precisa reorganizar peça
   nenhuma ao estreitar: o que muda é o véu (fica vertical, para o
   texto não cair em cima do carro) e a barra de cotação, que passa de
   uma linha para campos empilhados.
   ══════════════════════════════════════════════════════════════ */
@media (max-width:1240px){
 .wrap{width:min(1320px,calc(100% - 72px))}
 .navlinks{gap:26px;font-size:15px}
 .servgrid{grid-template-columns:repeat(3,1fr)}
 .navin{gap:28px}
 .rotapanel{padding:44px}
}
@media (max-width:1080px){
 .navfone{display:none}
 .fgrid,.egrid{grid-template-columns:repeat(3,1fr)}
 .rotapanel{grid-template-columns:1fr;gap:34px}
 .rotacopy p{max-width:none}
 .cotaform{grid-template-columns:1fr 1fr;gap:22px 0}
 .campo{padding:0 22px 14px 0;border-right:0;
  border-bottom:1px solid rgba(255,255,255,.13)}
 .cotaform .btn{grid-column:1/-1;margin-left:0;margin-top:10px}
}
@media (max-width:980px){
 .porgrid{grid-template-columns:repeat(2,1fr)}
 .nums{grid-template-columns:repeat(2,1fr)}
 .num:nth-child(2){border-right:0}
 .num:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.08)}
 .pgrid{grid-template-columns:repeat(2,1fr);gap:46px 0}
 .passo:nth-child(2)::after{display:none}
 .dgrid{grid-template-columns:1fr;max-width:560px;margin-inline:auto}
 .rodgrid{grid-template-columns:1fr 1fr 1fr;gap:38px}
 .rodmarca{grid-column:1/-1}
 .rodmarca p{max-width:460px}
}
@media (max-width:900px){
 :root{--topo:74px}
 .wrap{width:calc(100% - 44px)}
 .burger{display:grid}
 /* menu em painel deslizante — a nav vira coluna quando .aberto */
 .navlinks{position:fixed;inset:var(--topo) 0 auto;flex-direction:column;gap:0;
  background:#fff;border-bottom:1px solid var(--linha);padding:8px 22px 20px;
  margin:0;transform:translateY(-14px);opacity:0;pointer-events:none;
  box-shadow:0 22px 40px -26px rgba(6,40,44,.55);
  transition:transform .5s var(--mola),opacity .4s ease}
 .nav.aberto .navlinks{transform:none;opacity:1;pointer-events:auto}
 .navlinks a{padding:14px 0;border-bottom:1px solid var(--linha-2);font-size:16px}
 .navlinks a::after{display:none}
 .navright{margin-left:auto}
 .navright .btn{padding:12px 18px;font-size:14px}
 /* o painel do menu é branco, então a nav assume o tema claro enquanto
    estiver aberta, mesmo parada no topo sobre o hero escuro */
 .nav.aberto{background:rgba(255,255,255,.96);border-color:var(--linha)}
 .nav.aberto .logo b{color:var(--tinta)}
 .nav.aberto .logo b span,.nav.aberto .logo small{color:var(--suave)}
 .nav.aberto .navfone{color:var(--tinta)}
 .nav.aberto .burger{border-color:var(--linha)}
 .nav.aberto .burger span{background:var(--tinta)}
 .nav.aberto .navlinks a{color:var(--corpo)}
 /* véu na vertical: o texto ocupa a largura toda e o carro fica embaixo */
 .hero-foto img{object-position:70% 62%}
 .hero-foto::after{background:
  linear-gradient(180deg,rgba(8,18,34,.92) 0%,rgba(8,18,34,.88) 42%,
   rgba(4,30,34,.72) 64%,rgba(4,30,34,.58) 82%,rgba(4,30,34,.66) 100%)}
 .heroin{min-height:0;padding:44px 0 40px}
 .hcopy{margin-top:0}
 .cota{margin-top:36px}
 .hcopy{max-width:none}
 .hcopy > p{max-width:540px}
 .hcopy > p br{display:none}
 .cota{margin-top:40px;padding:22px 20px 24px}
 .por{padding:110px 0 90px}
 .frota,.como,.dep,.dest,.serv{padding:84px 0}
 .servgrid{grid-template-columns:repeat(2,1fr);gap:16px}
 .frotanota{text-align:left;max-width:none}
 .frotatop,.desttop{flex-direction:column;align-items:flex-start;gap:20px}
 .faixain{grid-template-columns:1fr;gap:22px;padding:30px 0}
 .fx{justify-content:flex-start}
}
@media (max-width:680px){
 .fgrid,.egrid{grid-template-columns:repeat(2,1fr)}

 .hselos{margin-top:32px}
 .hselo{padding:0 20px}
 .cotaform{grid-template-columns:1fr}
 .sechd{margin-bottom:38px}
 .rodgrid{grid-template-columns:1fr 1fr}
 .rodcol:last-child{grid-column:1/-1}
 .wa{right:16px;bottom:16px;width:54px;height:54px}
}
@media (max-width:600px){
 /* logo + CTA + hambúrguer não cabem lado a lado: o CTA sai e a conversa
    continua pelo botão flutuante do WhatsApp e pelo formulário do hero */
 .navright .btn{display:none}
 /* sem divisórias verticais quando os selos empilham */
 .hselos{display:grid;grid-template-columns:1fr 1fr;gap:20px 16px;margin-top:30px}
 .hselo{padding:0;border-left:0;gap:11px}
 .hselo > svg{width:25px;height:25px}
 .hselo b{font-size:15px}
 .hselo > span > span{font-size:12.5px}
}
@media (max-width:480px){
 .hcopy h1{font-size:33px}
 .hcopy > p{font-size:16.5px}
 .hselos{grid-template-columns:1fr}
 .cotahd{flex-direction:column;gap:4px}
 .porgrid{grid-template-columns:1fr;max-width:420px;margin-inline:auto}
 .nums{grid-template-columns:1fr}
 .num{border-right:0;border-bottom:1px solid rgba(255,255,255,.08)}
 .num:last-child{border-bottom:0}
 .pgrid{grid-template-columns:1fr;gap:38px}
 .passo::after{display:none}
 .passo p{max-width:none}
 .fgrid{grid-template-columns:1fr;max-width:340px;margin-inline:auto}
 .egrid{grid-template-columns:1fr;max-width:340px;margin-inline:auto}
 .servgrid{grid-template-columns:1fr;max-width:400px;margin-inline:auto}
 .chip{padding:10px 18px;font-size:14px}
 .logo small{display:none}
}

/* ══ PILARES — as quatro frentes, apoiadas na base do hero ═══════
   Mesmo papel que a barra de cotação tinha no site anterior: fecha a
   primeira tela com informação útil em vez de espaço morto. */
.pilares{position:relative;z-index:4;margin-top:auto;display:grid;
 grid-template-columns:repeat(4,1fr);border-radius:var(--r-g);overflow:hidden;
 background:rgba(11,28,52,.80);backdrop-filter:blur(14px);
 border:1px solid rgba(255,255,255,.13);box-shadow:0 34px 64px -34px rgba(0,0,0,.85)}
.pilar{display:flex;align-items:flex-start;gap:14px;padding:24px 24px 26px;color:#fff;
 border-right:1px solid rgba(255,255,255,.12);transition:background .4s ease}
.pilar:last-child{border-right:0}
.pilar:hover{background:rgba(255,255,255,.06)}
.pilar > svg{width:28px;height:28px;stroke:var(--ambar);flex:none;margin-top:2px;
 transition:transform .5s var(--mola)}
.pilar:hover > svg{transform:translateY(-3px)}
.pilar b{display:block;font-size:16px;font-weight:600;line-height:1.3}
.pilar > span > span{display:block;margin-top:5px;font-size:13.5px;line-height:1.5;
 color:#A9B8CB}

/* ══ cartão de serviço sem preço: o título leva o ícone ══════════ */
.stit{display:flex;align-items:center;gap:10px;font-family:'Inter Tight','Inter',sans-serif;
 font-size:18px;font-weight:800;color:var(--tinta);letter-spacing:-.025em;line-height:1.3}
.stit svg{width:21px;height:21px;stroke:var(--azul);flex:none}
.scard p{margin-top:11px;font-size:14.6px;line-height:1.65;color:var(--corpo);flex:1}
.scard .slist{margin-top:16px;padding-top:15px;border-top:1px solid var(--linha-2)}

.rodlogo{width:200px;height:auto;filter:brightness(0) invert(1);opacity:.95}
.rodmarca p{margin-top:20px}

/* ══ LOGO NA NAV ════════════════════════════════════════════════
   A marca tem o "GRID" em cinza-escuro, que some sobre a foto do
   hero. Sobre o escuro ela entra monocromática em branco; quando a
   nav fica branca (.compact), volta ao azul e cinza originais. */
.nav .logo .mk{filter:brightness(0) invert(1);transition:filter .45s ease,width .45s var(--mola)}
.nav.compact .logo .mk,.nav.aberto .logo .mk{filter:none}

@media (max-width:1080px){
 .pilares{grid-template-columns:repeat(2,1fr)}
 /* com duas colunas, a divisória da direita bate na borda do painel */
 .pilar:nth-child(2n){border-right:0}
 .pilar:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.12)}
}
@media (max-width:560px){
 .pilares{grid-template-columns:1fr}
 .pilar{border-right:0;border-bottom:1px solid rgba(255,255,255,.12);padding:18px 20px}
 .pilar:last-child{border-bottom:0}
}

/* ══ NAV NO CELULAR ═════════════════════════════════════════════
   Sem hambúrguer: no lugar dele fica a chamada de ação. A página é
   uma só e todas as seções são alcançadas rolando, então o menu
   escondido custava um toque e não entregava nada que a rolagem já
   não desse. Os selos do hero também saem — no estreito eles
   empurravam o cartão de frentes de trabalho para fora da tela. */
.so-mob{display:none}
@media (max-width:900px){
 .burger{display:none!important}
 .navlinks{display:none}
 .so-desk{display:none}
 .so-mob{display:inline}
 .navright{margin-left:auto}
 .navright .btn{display:inline-flex;padding:12px 18px;font-size:14.5px}
 .nav .logo .mk{width:150px}
 .nav.compact .logo .mk{width:132px}
 .hselos{display:none}
 .hcopy > p{margin-bottom:6px}
}

/* ══ ETIQUETA DE WHATSAPP QUE SEGUE O CURSOR ═══════════════════
   Mesma mecânica do site do Valença & Morais: sobre um cartão de
   serviço o cursor some e no lugar entra uma pílula verde que
   persegue o ponteiro com inércia. O elemento é criado pelo anim.js
   e só em ponteiro fino — no toque não existe hover e ele nunca
   aparece. Medidas em px (no original eram vw e encolhiam demais
   em tela pequena). */
.kvfollow{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;
 display:flex;align-items:center;gap:8px;white-space:nowrap;
 padding:11px 18px;border-radius:999px;
 background:linear-gradient(160deg,rgba(47,191,91,.97),rgba(18,146,74,.97));
 border:1px solid rgba(255,255,255,.35);color:#fff;
 font:700 11px/1 'Inter',sans-serif;letter-spacing:.14em;text-transform:uppercase;
 box-shadow:0 14px 30px -12px rgba(18,146,74,.55),0 0 22px rgba(47,191,91,.35);
 opacity:0;transform:translate(-50%,-50%) scale(.6);
 transition:opacity .3s ease,transform .35s var(--mola)}
.kvfollow.active{opacity:1;transform:translate(-50%,-50%) scale(1)}
.kvfollow svg{width:15px;height:15px;fill:#fff;stroke:none;flex:none}
/* o cartão esconde o cursor só quando a etiqueta existe de fato */
body.tem-kv .scard,body.tem-kv .scard *{cursor:none}

@media (prefers-reduced-motion:reduce){
 .kvfollow{transition:opacity .01ms}
}