/* TR Express v2 — design system
   Skill: ~/.claude/skills/design-agencia (síntese Emil Kowalski + Impeccable + Taste Skill)
   Leitura do brief: site de serviço B2B/B2C (car hauling) para gerentes de concessionária,
   leilões e donos de carro; linguagem industrial-editorial, confiança; tema claro.
   Botões: variação 6 · movimento 5 · densidade 4.
   Regra de raio: botões em pílula; todo o resto 6px.
   Tokens recombinados das referências (ver LEIA-ME-v2.md): escala de tipo e tracking (Rivian),
   escala de espaço 4px e curva de gaveta (Linear), expo-out nas entradas (Uber Freight). */

:root{
  /* cor (v4, tema escuro "industrial"): grafite quase preto + 1 acento, o bordô dos caminhões.
     --brand preenche (botões, linhas); --accent é o bordô clareado para TEXTO sobre fundo escuro. */
  --ink:#eceef1;       /* texto principal: 16:1 sobre --paper */
  --ink-2:#d3d6db;
  --steel:#a4a9b1;     /* texto secundário: 7.9:1 */
  --mute:#8e939b;      /* meta/legenda: 6.1:1 */
  --line:#2a2d33;
  --line-2:#666b74;    /* borda de campo: 3.3:1 */
  --paper:#0e0f12;
  --paper-2:#14161a;
  --surface:#1a1c21;
  --brand:#a51c31;
  --brand-2:#c0233b;
  --brand-tint:#2b1519;
  --accent:#f0808b;    /* 7.6:1 sobre --paper */
  --on-brand:#fbfbfc;
  --ok:#5fc48c;
  --err:#ff8a7a;

  /* tipo: Archivo variável (largura 62–125%) faz display expandido e texto normal */
  --font:"Archivo",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --t-display:clamp(2.75rem,1.2rem + 5.3vw,6rem);   /* 44 → 96 */
  --t-h1:clamp(2.5rem,1.4rem + 3.6vw,4.5rem);       /* 40 → 72 (heróis internos) */
  --t-h2:clamp(2rem,1.3rem + 2.5vw,3.5rem);         /* 32 → 56 */
  --t-h3:clamp(1.25rem,1.05rem + .7vw,1.625rem);    /* 20 → 26 */
  --t-big:clamp(1.625rem,1.1rem + 1.9vw,2.75rem);   /* 26 → 44 (frase de destaque) */
  --t-lead:clamp(1.125rem,1.02rem + .38vw,1.375rem);/* 18 → 22 */
  --t-body:1.0625rem;                               /* 17 */
  --t-small:.875rem;                                /* 14 */
  --track-display:-.025em;
  --track-head:-.02em;

  /* espaço: base 4 */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;
  --section:clamp(4.5rem,2.75rem + 5.6vw,7rem);      /* 72 → 112 */
  --gutter:clamp(20px,3.4vw,48px);
  --wrap:1360px;

  /* forma */
  --r:6px;
  --pill:999px;
  --shadow:0 1px 0 rgb(255 255 255 / .04) inset,0 24px 48px -20px rgb(0 0 0 / .7);

  /* movimento (Emil Kowalski) */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1);
  --ease-reveal:cubic-bezier(.16,1,.3,1);
  --dur-press:160ms; --dur-ui:200ms; --dur-menu:400ms;

  --header-h:72px;
}
@media (max-width:899px){:root{--header-h:64px}}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;scroll-padding-top:calc(var(--header-h) + 16px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;font-family:var(--font);font-size:var(--t-body);line-height:1.6;color:var(--ink);background:var(--paper);font-stretch:100%;font-weight:400;letter-spacing:-.003em;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
html.menu-open{overflow:hidden}
img{max-width:100%;height:auto;display:block}
figure{margin:0}
p{margin:0 0 1em;text-wrap:pretty}
a{color:var(--accent);text-underline-offset:.2em;text-decoration-thickness:1px}
::selection{background:var(--brand);color:var(--on-brand)}
input,textarea{caret-color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.i{width:1.15em;height:1.15em;flex:0 0 auto}

h1,h2,h3{margin:0 0 .5em;font-weight:780;text-wrap:balance;color:var(--ink)}
h1,.display{font-size:var(--t-display);font-stretch:125%;font-weight:820;line-height:.95;letter-spacing:var(--track-display)}
h2{font-size:var(--t-h2);font-stretch:118%;line-height:1;letter-spacing:var(--track-head)}
h3{font-size:var(--t-h3);font-stretch:108%;font-weight:700;line-height:1.15;letter-spacing:-.012em}
.lead{font-size:var(--t-lead);line-height:1.5;color:var(--steel);max-width:58ch}

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gutter)}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--surface);padding:10px 14px;border-radius:var(--r);color:var(--ink)}
.skip:focus{left:12px}
[hidden]{display:none!important}

/* ---------- botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:44px;padding:.7em 1.3em;border-radius:var(--pill);border:1.5px solid transparent;font:inherit;font-size:1rem;font-weight:620;letter-spacing:-.005em;line-height:1.1;text-decoration:none;white-space:nowrap;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation;
  transition:background-color var(--dur-ui) ease,color var(--dur-ui) ease,border-color var(--dur-ui) ease,transform var(--dur-press) var(--ease-out)}
.btn:active{transform:scale(.97)}
.btn .i{transition:transform var(--dur-ui) var(--ease-out)}
.btn-lg{min-height:52px;padding:.85em 1.55em;font-size:1.0625rem}
.btn-primary{background:var(--brand);color:var(--on-brand)}
.btn-line{border-color:color-mix(in srgb,var(--ink) 28%,transparent);color:var(--ink);background:transparent}
.btn-light{background:var(--surface);color:var(--accent)}
.btn-line-light{border-color:rgb(251 251 252 / .55);color:var(--on-brand)}
.btn[disabled]{opacity:.6;cursor:wait}
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{background:var(--brand-2);color:var(--on-brand)}
  .btn-line:hover{border-color:var(--ink);background:var(--ink);color:var(--surface)}
  .btn-light:hover{background:var(--ink);color:var(--surface)}
  .btn-line-light:hover{background:var(--surface);color:var(--accent);border-color:var(--surface)}
  .btn:hover .i,.link-arrow:hover .i{transform:translateX(3px)}
}
.link-arrow{display:inline-flex;align-items:center;gap:.5em;font-weight:650;color:var(--accent);text-decoration:none;min-height:44px}
.link-arrow .i{transition:transform var(--dur-ui) var(--ease-out)}

/* ---------- cabeçalho ---------- */
/* o vidro fica num pseudo-elemento: backdrop-filter no próprio header viraria "containing block"
   do menu fixo do celular e o espremeria dentro do header */
header.site{position:sticky;top:0;z-index:50;border-bottom:1px solid transparent;transition:border-color var(--dur-ui) ease}
header.site::before{content:"";position:absolute;inset:0;z-index:-1;background:rgb(14 15 18 / .72);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);transition:background-color var(--dur-ui) ease}
header.site.scrolled{border-bottom-color:var(--line)}
header.site.scrolled::before,.menu-open header.site::before{background:rgb(14 15 18 / .94)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);height:var(--header-h)}
.brand{display:flex;align-items:center;flex:0 0 auto}
.brand img{height:44px;width:auto}
nav.main{display:flex;align-items:center;gap:var(--s6)}
.nav-links{display:flex;gap:var(--s1);list-style:none;margin:0;padding:0}
.nav-links a{display:block;padding:.5em .85em;border-radius:var(--pill);color:var(--ink);text-decoration:none;font-weight:560;transition:background-color var(--dur-ui) ease,color var(--dur-ui) ease}
.nav-links a[aria-current="page"]{color:var(--accent)}
@media (hover:hover) and (pointer:fine){.nav-links a:hover{background:var(--paper-2)}.nav-tel:hover{color:var(--accent)}}
.nav-cta{display:flex;align-items:center;gap:var(--s5)}
.nav-tel{display:inline-flex;align-items:center;gap:.45em;color:var(--ink);text-decoration:none;font-weight:600;font-variant-numeric:tabular-nums;transition:color var(--dur-ui) ease}
.nav-tel .i{color:var(--accent)}
.menu-toggle{display:none;width:44px;height:44px;margin-right:-10px;border:0;background:none;cursor:pointer;position:relative;touch-action:manipulation}
.menu-toggle span{position:absolute;left:11px;right:11px;height:2px;background:var(--ink);border-radius:2px;transition:transform 300ms var(--ease-out)}
.menu-toggle span:first-child{top:17px}.menu-toggle span:last-child{top:25px}
.menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}

@media (max-width:899px){
  .menu-toggle{display:block}
  nav.main{position:fixed;inset:var(--header-h) 0 0 0;z-index:49;flex-direction:column;align-items:stretch;justify-content:space-between;gap:var(--s6);padding:var(--s6) var(--gutter) calc(var(--s6) + env(safe-area-inset-bottom,0px));background:var(--paper);overflow-y:auto;overscroll-behavior:contain;
    opacity:0;visibility:hidden;transform:translateY(-12px);transition:opacity 240ms var(--ease-out),transform var(--dur-menu) var(--ease-drawer),visibility 0s linear var(--dur-menu)}
  nav.main.open{opacity:1;visibility:visible;transform:none;transition-delay:0s}
  .nav-links{flex-direction:column;gap:0}
  .nav-links a{font-size:clamp(2rem,9vw,2.75rem);font-stretch:118%;font-weight:780;letter-spacing:var(--track-head);padding:.3em 0;border-radius:0;border-bottom:1px solid var(--line)}
  .nav-cta{flex-direction:column;align-items:stretch;gap:var(--s4)}
  .nav-cta .btn{min-height:56px;font-size:1.0625rem}
  .nav-tel{justify-content:center;min-height:48px;font-size:1.125rem}
}

/* ---------- herói da home ---------- */
.hero{padding-top:clamp(var(--s6),4vw,var(--s8))}
.hero-title em{font-style:normal;color:var(--accent)}
.hero .display{max-width:15ch;margin-bottom:var(--s6)}
.hero-row{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s5);align-items:end;padding-bottom:clamp(var(--s6),3.5vw,var(--s7))}
.hero-row .lead{grid-column:1 / span 6;margin:0;max-width:40ch}
.hero-row .ctas{grid-column:8 / span 5;justify-self:end}
.ctas{display:flex;flex-wrap:wrap;gap:var(--s3)}
.hero-media{height:clamp(320px,56svh,680px);overflow:hidden;margin-inline:clamp(0px,1.4vw,24px);border-radius:var(--r)}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:50% 24%}
@media (max-width:899px){
  .hero .display{max-width:none;margin-bottom:var(--s5)}
  .hero-row{grid-template-columns:1fr;gap:var(--s5)}
  .hero-row .lead,.hero-row .ctas{grid-column:auto;justify-self:stretch}
  .hero-row .ctas .btn{flex:1 1 auto}
  .hero-media{height:clamp(240px,42svh,420px);margin-inline:0;border-radius:0}
}

/* ---------- frase + fatos ---------- */
.intro{padding-block:var(--section) calc(var(--section) * .75)}
.statement{font-size:var(--t-big);font-stretch:112%;font-weight:700;line-height:1.12;letter-spacing:var(--track-head);max-width:26ch;margin:0 0 var(--s8);text-wrap:balance}
.statement span{color:var(--mute)}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5);margin:0}
.facts>div{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:var(--s2);padding-top:var(--s4);border-top:1px solid var(--ink)}
.facts dd{margin:0;font-size:clamp(2.75rem,1.6rem + 3.4vw,4.5rem);font-stretch:125%;font-weight:800;line-height:1;letter-spacing:var(--track-display);font-variant-numeric:tabular-nums}
.facts dt{color:var(--steel);font-size:.9375rem;max-width:20ch}
.facts-note{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);margin:var(--s6) 0 0;color:var(--steel);font-size:.9375rem}
.facts-note .i{color:var(--accent)}
.facts-note>span{display:inline-flex;align-items:center;gap:var(--s2);white-space:nowrap}
.facts-note .sep{display:inline-block;width:1px;height:1em;background:var(--line);margin-inline:var(--s2)}
@media (max-width:899px){.facts{grid-template-columns:repeat(2,1fr);row-gap:var(--s6)}.statement{margin-bottom:var(--s7)}}

/* ---------- sobre (split com imagens sobrepostas) ---------- */
.about{padding-block:var(--section)}
.about-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s5);align-items:center}
.about-copy{grid-column:1 / span 6}
.about-copy h2{max-width:14ch}
.about-copy .lead{margin-bottom:var(--s5)}
.about-copy>p:not(.lead){color:var(--steel);max-width:60ch}
.about-media{grid-column:8 / span 5;position:relative;padding-bottom:18%}
.about-media figure{overflow:hidden;border-radius:var(--r)}
.about-media img{width:100%;height:100%;object-fit:cover}
.about-media .m1{aspect-ratio:4/5}
.about-media .m2{position:absolute;left:-28%;bottom:0;width:62%;aspect-ratio:4/3;outline:8px solid var(--paper)}
.about-media.single{padding-bottom:0}
.checklist{list-style:none;padding:0;margin:var(--s5) 0 var(--s5);display:grid;gap:var(--s3)}
.checklist li{display:flex;gap:var(--s3);align-items:flex-start}
.checklist .i{color:var(--accent);margin-top:.25em}
@media (max-width:899px){
  .about-copy,.about-media{grid-column:1 / -1}
  .about-media{margin-top:var(--s6);padding-bottom:22%;max-width:560px}
  .about-media .m1{width:82%;margin-left:auto;aspect-ratio:1/1}
  .about-media .m2{left:0;width:56%}
  .about-media.single .m1{width:100%;aspect-ratio:4/3}
}

/* ---------- serviços (lista-índice) ---------- */
.services{padding-block:var(--section);background:var(--surface);border-block:1px solid var(--line)}
.sec-head{margin-bottom:var(--s8)}
.sec-head h2{margin-bottom:var(--s3)}
.svc-list{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--line)}
.svc{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s5);padding-block:var(--s7);border-top:1px solid var(--line)}
.svc h3{grid-column:1 / span 5;font-size:clamp(1.625rem,1.1rem + 1.7vw,2.5rem);font-stretch:120%;font-weight:780;letter-spacing:var(--track-head);line-height:1.02;margin:0}
.svc>p{grid-column:6 / span 4;margin:0;color:var(--steel)}
.svc ul{grid-column:10 / span 3;list-style:none;margin:0;padding:0;display:grid;gap:var(--s2);font-size:.9375rem}
.svc ul li{padding-left:var(--s4);position:relative}
.svc ul li::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:1.5px;background:var(--brand)}
@media (max-width:899px){
  .svc{grid-template-columns:1fr;gap:var(--s3);padding-block:var(--s6)}
  .svc h3,.svc>p,.svc ul{grid-column:auto}
  .svc ul{margin-top:var(--s2)}
}

/* ---------- para quem (bento com fotos) ---------- */
.who{padding-block:var(--section)}
.who h2{margin-bottom:var(--s7);max-width:16ch}
.bento{display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(2,clamp(240px,22vw,320px));gap:var(--s4)}
.cell{position:relative;overflow:hidden;border-radius:var(--r);background:var(--ink);color:var(--surface);isolation:isolate}
.cell img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.cell::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgb(14 15 18 / 0) 35%,rgb(14 15 18 / .78) 100%)}
.cap{position:absolute;left:0;right:0;bottom:0;padding:var(--s5)}
.cap h3{color:var(--surface);margin:0 0 .3em;font-stretch:118%}
.cap p{margin:0;color:rgb(251 251 252 / .86);max-width:38ch;font-size:.9875rem;line-height:1.5}
.c-dealer{grid-column:1 / span 6;grid-row:1 / span 2}
.c-auction{grid-column:7 / span 6;grid-row:1}
.c-fleet{grid-column:7 / span 3;grid-row:2}
.c-private{grid-column:10 / span 3;grid-row:2}
.c-dealer img{object-position:50% 60%}
.c-dealer .cap{padding:var(--s6)}
.c-dealer .cap h3{font-size:clamp(1.75rem,1.2rem + 1.6vw,2.5rem)}
@media (max-width:899px){
  .bento{grid-template-columns:1fr;grid-template-rows:none;grid-auto-rows:auto}
  .cell{grid-column:auto!important;grid-row:auto!important;aspect-ratio:4/3}
  .c-dealer{aspect-ratio:4/5}
  .c-dealer .cap{padding:var(--s5)}
}

/* ---------- por que nós (coluna fixa) ---------- */
.why{padding-block:var(--section);background:var(--paper-2)}
.why-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s5);align-items:start}
.why-aside{grid-column:1 / span 5;position:sticky;top:calc(var(--header-h) + var(--s6))}
.why-aside h2{max-width:12ch}
.why-aside figure{margin-top:var(--s6);overflow:hidden;border-radius:var(--r);aspect-ratio:3/2}
.why-aside img{width:100%;height:100%;object-fit:cover;object-position:50% 92%}
.promises{grid-column:7 / span 6;list-style:none;margin:0;padding:0}
.promises li{padding-block:var(--s7);border-top:1px solid var(--line-2)}
.promises li:first-child{border-top:0;padding-top:0}
.promises h3{font-size:clamp(2rem,1.3rem + 2.4vw,3.25rem);font-stretch:122%;font-weight:800;letter-spacing:var(--track-display);line-height:1;margin-bottom:var(--s4)}
.promises p{margin:0;font-size:var(--t-lead);line-height:1.5;color:var(--steel);max-width:40ch}
@media (max-width:899px){
  .why-aside,.promises{grid-column:1 / -1}
  .why-aside{position:static}
  .promises{margin-top:var(--s7)}
  .promises li{padding-block:var(--s6)}
}

/* ---------- como funciona (a rota) ---------- */
.how{padding-block:var(--section);overflow:hidden}
.how h2{margin-bottom:var(--s6)}
.route{position:relative;--truck-w:clamp(280px,34vw,460px)}
.route-track{position:relative;height:2px;background:var(--line);margin-top:calc(var(--truck-w) * .168 + var(--s5))}
.route-fill{position:absolute;inset:0;background:var(--brand);transform-origin:0 50%}
.route-truck{position:absolute;bottom:2px;right:0;width:var(--truck-w);height:auto;pointer-events:none}
.route-stops{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5)}
.route-stops li{position:relative;padding-top:var(--s6)}
.route-stops li::before{content:"";position:absolute;top:-7px;left:0;width:12px;height:12px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 4px var(--paper);transition:background-color 300ms ease,transform 300ms var(--ease-out)}
.route-stops li.pending::before{background:var(--line-2);transform:scale(.8)}
.route-stops h3{margin-bottom:.4em}
.route-stops p{color:var(--steel);margin:0;max-width:30ch}
@media (max-width:899px){
  .route{padding-left:var(--s6)}
  .route-track{position:absolute;left:5px;top:6px;bottom:0;width:2px;height:auto;margin:0}
  .route-fill{transform-origin:50% 0}
  .route-truck{display:none}
  .route-stops{grid-template-columns:1fr;gap:var(--s6)}
  .route-stops li{padding-top:0}
  .route-stops li::before{top:.45em;left:calc(-1 * var(--s6))}
}

/* ---------- galeria ---------- */
.gallery{padding-block:var(--section);background:var(--surface);border-block:1px solid var(--line)}
.gallery .sec-head{margin-bottom:var(--s7)}
.gal-scroller{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gutter)}
.gal{columns:5 220px;column-gap:var(--s3)}
.gal-item{display:block;width:100%;margin:0 0 var(--s3);padding:0;border:0;border-radius:var(--r);overflow:hidden;background:var(--paper-2);cursor:zoom-in;break-inside:avoid;position:relative}
.gal-item img{width:100%;height:auto}
.gal-item::after{content:"";position:absolute;inset:0;background:rgb(20 21 24 / 0);transition:background-color var(--dur-ui) ease}
@media (hover:hover) and (pointer:fine){.gal-item:hover::after{background:rgb(20 21 24 / .14)}}
.follow{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);margin-top:var(--s6)}
.follow span{font-weight:650;margin-right:var(--s2)}
@media (max-width:640px){.follow span{flex-basis:100%}}
@media (max-width:899px){
  .gal-scroller{padding-inline:0;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);overscroll-behavior-x:contain;scrollbar-width:none}
  .gal-scroller::-webkit-scrollbar{display:none}
  .gal{columns:auto;display:flex;gap:var(--s3);padding-inline:var(--gutter);width:max-content}
  .gal-item{width:72vw;max-width:340px;height:300px;margin:0;scroll-snap-align:start;flex:0 0 auto}
  .gal-item img{height:100%;object-fit:cover}
}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:200;background:rgb(10 11 13 / .94);display:flex;align-items:center;justify-content:center;opacity:1;transition:opacity 250ms var(--ease-out)}
@starting-style{.lightbox{opacity:0}}
.lightbox img{max-width:min(92vw,1400px);max-height:84vh;border-radius:var(--r);transition:transform 250ms var(--ease-out)}
@starting-style{.lightbox img{transform:scale(.96)}}
.lightbox button{position:absolute;display:grid;place-items:center;width:52px;height:52px;border:0;border-radius:50%;background:rgb(251 251 252 / .1);color:var(--surface);cursor:pointer;transition:background-color var(--dur-ui) ease,transform var(--dur-press) var(--ease-out)}
.lightbox button .i{width:24px;height:24px}
.lightbox button:active{transform:scale(.94)}
@media (hover:hover) and (pointer:fine){.lightbox button:hover{background:rgb(251 251 252 / .22)}}
.lb-close{top:18px;right:18px}.lb-prev{left:18px;top:50%;margin-top:-26px}.lb-next{right:18px;top:50%;margin-top:-26px}
.lb-count{position:absolute;bottom:22px;left:0;right:0;text-align:center;color:#b9bdc3;font-size:.9rem;font-variant-numeric:tabular-nums}
@media (max-width:640px){.lb-prev,.lb-next{top:auto;bottom:12px;margin-top:0}.lb-count{bottom:28px}}

/* ---------- FAQ ---------- */
.faq-sec{padding-block:var(--section)}
.faq-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s5);align-items:start}
.faq-head{grid-column:1 / span 5}
.faq-head h2{max-width:10ch}
.faq{grid-column:7 / span 6;border-top:1px solid var(--line-2)}
.faq details{border-bottom:1px solid var(--line-2)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:var(--s5);min-height:64px;padding-block:var(--s4);cursor:pointer;list-style:none;font-size:1.125rem;font-weight:650;letter-spacing:-.008em}
.faq summary::-webkit-details-marker{display:none}
.faq summary .i{color:var(--accent);width:22px;height:22px;transition:transform var(--dur-ui) var(--ease-out)}
.faq details[open] summary .i{transform:rotate(45deg)}
.faq details p{color:var(--steel);margin:0;padding:0 var(--s8) var(--s5) 0;max-width:62ch}
@media (max-width:899px){.faq-head,.faq{grid-column:1 / -1}.faq{margin-top:var(--s5)}.faq details p{padding-right:0}}

/* ---------- CTA (região de cor da marca) ---------- */
.cta{padding-bottom:var(--section)}
.cta-panel{background:var(--brand);color:var(--on-brand);border-radius:var(--r);padding:clamp(var(--s7),6vw,var(--s9)) clamp(var(--s5),6vw,var(--s9));display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s5);align-items:end}
.cta-panel h2{grid-column:1 / span 8;color:var(--on-brand);font-size:clamp(2.25rem,1.3rem + 3.4vw,4.5rem);font-stretch:125%;font-weight:820;letter-spacing:var(--track-display);line-height:.98;margin:0;max-width:14ch}
.cta-panel p{grid-column:1 / span 6;margin:0;font-size:var(--t-lead);color:rgb(251 251 252 / .86)}
.cta-panel .ctas{grid-column:8 / span 5;justify-self:end}
@media (max-width:899px){.cta-panel{grid-template-columns:1fr}.cta-panel h2,.cta-panel p,.cta-panel .ctas{grid-column:auto;justify-self:stretch}.cta-panel .ctas .btn{flex:1 1 auto}}

/* ---------- rodapé ---------- */
footer.site{background:var(--paper-2);border-top:1px solid var(--line);padding-top:var(--s9);font-size:.9375rem}
.foot-top{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s5)}
.foot-brand{grid-column:1 / span 4}
.foot-brand img{height:52px;width:auto;margin-bottom:var(--s4)}
.foot-brand p{color:var(--steel);max-width:38ch}
.social{display:flex;gap:var(--s2);margin-top:var(--s4)}
.social a{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);color:var(--ink);transition:background-color var(--dur-ui) ease,color var(--dur-ui) ease,border-color var(--dur-ui) ease}
.social .i{width:20px;height:20px}
@media (hover:hover) and (pointer:fine){.social a:hover{background:var(--ink);color:var(--surface);border-color:var(--ink)}footer.site ul a:hover{color:var(--accent)}}
.foot-cols{grid-column:6 / span 7;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.foot-h{font-size:.9375rem;font-stretch:100%;font-weight:700;letter-spacing:0;margin:0 0 var(--s4)}
footer.site ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
footer.site ul a{color:var(--ink);text-decoration:none;transition:color var(--dur-ui) ease}
footer.site li{color:var(--steel)}
.legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s8);padding-block:var(--s5);border-top:1px solid var(--line-2);color:var(--mute);font-size:.875rem}
.legal a{color:var(--ink)}
@media (max-width:899px){.foot-brand,.foot-cols{grid-column:1 / -1}.foot-cols{grid-template-columns:1fr 1fr;margin-top:var(--s5)}.foot-cols>div:last-child{grid-column:1 / -1}}

/* ---------- heróis internos ---------- */
.page-hero{padding-block:clamp(var(--s6),4vw,var(--s8)) var(--s7)}
.page-hero-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s5);align-items:end}
.page-hero-copy{grid-column:1 / span 6;padding-bottom:var(--s2)}
.page-hero h1{font-size:var(--t-h1);line-height:.97}
.page-hero .lead{margin-bottom:var(--s5)}
.page-hero .ctas{margin-top:var(--s2)}
.page-hero-media{grid-column:8 / span 5;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r)}
.page-hero-media img{width:100%;height:100%;object-fit:cover}
@media (max-width:899px){.page-hero-copy,.page-hero-media{grid-column:1 / -1}.page-hero-media{aspect-ratio:16/10;margin-top:var(--s4)}.page-hero .ctas .btn{flex:1 1 auto}}

/* vantagens (careers) */
.perks{padding-block:var(--section);background:var(--surface);border-block:1px solid var(--line)}
.perks h2{margin-bottom:var(--s7)}
.perk-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:0 var(--s7)}
.perk-grid li{padding-block:var(--s6);border-top:1px solid var(--line-2)}
.perk-grid h3{font-size:clamp(1.5rem,1.1rem + 1.3vw,2.25rem);font-stretch:120%;font-weight:780;letter-spacing:var(--track-head);margin-bottom:var(--s2)}
.perk-grid p{margin:0;color:var(--steel);max-width:40ch}
@media (max-width:899px){.perk-grid{grid-template-columns:1fr}}

/* contato: formas de falar */
.ways{padding-block:var(--s4) var(--s8)}
.ways-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-2)}
.ways-list a{display:grid;grid-template-columns:minmax(140px,3fr) 8fr auto;align-items:center;gap:var(--s5);padding-block:var(--s5);border-bottom:1px solid var(--line-2);color:var(--ink);text-decoration:none}
.w-k{color:var(--steel);font-weight:560}
.w-v{font-size:clamp(1.25rem,.95rem + 1.4vw,2.25rem);font-stretch:115%;font-weight:760;letter-spacing:var(--track-head);line-height:1.1;overflow-wrap:anywhere}
.ways-list .i{width:28px;height:28px;color:var(--accent);transition:transform var(--dur-ui) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.ways-list a:hover .i{transform:translateX(4px)}.ways-list a:hover .w-v{color:var(--accent)}}
@media (max-width:640px){.ways-list a{grid-template-columns:1fr auto;gap:var(--s1) var(--s4)}.w-k{grid-column:1 / -1}.w-v{font-size:1.1875rem;font-stretch:100%;overflow-wrap:normal}}

/* texto corrido / 404 */
.prose-sec{padding-block:var(--s8) var(--section)}
.prose{max-width:760px}
.prose h1{font-size:var(--t-h1)}
.prose h2{font-size:var(--t-h3);font-stretch:108%;margin-top:var(--s6)}
.prose p{color:var(--steel)}
.nf{padding-block:var(--section)}
.nf .lead{margin-bottom:var(--s6)}

/* ---------- formulários ---------- */
.form-sec{padding-block:var(--s7) var(--section)}
.form-title{margin-bottom:var(--s6)}
.form-shell{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--s6);align-items:start}
@media (max-width:1023px){.form-shell{grid-template-columns:1fr}}
.form-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(var(--s5),3.4vw,var(--s7))}
.side-card{position:sticky;top:calc(var(--header-h) + var(--s5));border-top:2px solid var(--ink);padding-top:var(--s5)}
@media (max-width:1023px){.side-card{position:static}}
.side-h{font-size:var(--t-h3);font-stretch:112%;margin-bottom:.3em}
.side-card>p{color:var(--steel)}
.side-list{list-style:none;margin:var(--s5) 0 0;padding:0;display:grid;gap:var(--s4)}
.side-list li{display:flex;gap:var(--s3);align-items:flex-start;overflow-wrap:anywhere}
.side-list .i{color:var(--accent);width:20px;height:20px;margin-top:.15em}
.side-list a{color:var(--ink)}
fieldset{border:0;padding:0;margin:0 0 var(--s7);min-width:0}
legend{display:flex;align-items:center;gap:var(--s3);padding:0;margin-bottom:var(--s2);font-size:clamp(1.375rem,1.1rem + .8vw,1.75rem);font-stretch:118%;font-weight:780;letter-spacing:var(--track-head)}
legend .n{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--brand);color:var(--accent);font-size:.875rem;font-stretch:100%;font-weight:700;letter-spacing:0;font-variant-numeric:tabular-nums}
.hint{color:var(--steel);font-size:.9375rem;margin:0 0 var(--s4)}
.fields{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s4)}
.f{grid-column:span 6;display:flex;flex-direction:column;min-width:0}
.f.s3{grid-column:span 3}.f.s2{grid-column:span 2}.f.s4{grid-column:span 4}
@media (max-width:640px){.f.s3,.f.s2,.f.s4{grid-column:span 6}}
label{font-weight:600;font-size:.9375rem;margin-bottom:6px}
label .req{color:var(--accent)}
label .opt{color:var(--mute);font-weight:400}
input,select,textarea{font:inherit;font-size:16px;line-height:1.4;min-height:48px;padding:.7em .85em;border:1.5px solid var(--line-2);border-radius:var(--r);background:var(--surface);color:var(--ink);width:100%;transition:border-color var(--dur-ui) ease,box-shadow var(--dur-ui) ease}
input::placeholder,textarea::placeholder{color:#6b7078}
textarea{min-height:128px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgb(240 128 139 / .22)}
.f.invalid input,.f.invalid select,.f.invalid textarea{border-color:var(--err);background:#2a1517}
.err-msg{color:var(--err);font-size:.875rem;margin-top:6px}
.err-msg:empty{display:none}
.choice{display:flex;gap:var(--s3);flex-wrap:wrap}
.choice label{font-weight:500;display:flex;align-items:center;gap:var(--s2);min-height:48px;border:1.5px solid var(--line-2);border-radius:var(--r);padding:.6em 1em;cursor:pointer;margin:0;background:var(--surface);transition:border-color var(--dur-ui) ease,background-color var(--dur-ui) ease}
.choice input{width:auto;min-height:0;margin:0;accent-color:var(--accent)}
.choice label:has(input:checked){border-color:var(--accent);background:var(--brand-tint)}
.vehicle{border:1px solid var(--line);border-radius:var(--r);padding:var(--s5);margin-bottom:var(--s4);background:var(--paper)}
.vehicle .vh{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--s4)}
.vehicle .vh strong{font-size:1rem;font-stretch:112%;font-weight:750}
.link-btn{display:inline-flex;align-items:center;gap:.4em;min-height:44px;background:none;border:0;color:var(--accent);font:inherit;font-weight:650;font-size:.9375rem;cursor:pointer;padding:4px 0;touch-action:manipulation}
@media (hover:hover) and (pointer:fine){.link-btn:hover{text-decoration:underline}}
.consent{display:flex;gap:var(--s3);align-items:flex-start;font-weight:500;font-size:.9375rem;color:var(--steel)}
.consent input{width:20px;min-height:0;height:20px;margin-top:2px;flex:0 0 auto;accent-color:var(--accent)}
.hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
.form-actions{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;margin-top:var(--s2)}
.form-actions small{color:var(--mute)}
.alert{border-radius:var(--r);padding:var(--s4) var(--s5);margin-bottom:var(--s5);font-size:.9375rem}
.alert.err{background:#fef3f2;border:1px solid #fecdca;color:var(--err)}
.alert.ok{background:#ecfdf3;border:1px solid #abefc6;color:var(--ok)}
.success{text-align:center;padding:var(--s6) var(--s2)}
.success .big{width:72px;height:72px;border-radius:50%;background:#ecfdf3;color:var(--ok);display:grid;place-items:center;margin:0 auto var(--s4)}
.success .big svg{width:36px;height:36px}
.success h2{font-size:var(--t-h3)}
.success .lead{margin-inline:auto}
.file-drop{border:1.5px dashed var(--line-2);border-radius:var(--r);padding:var(--s5);text-align:center;background:var(--paper);cursor:pointer;transition:border-color var(--dur-ui) ease}
@media (hover:hover) and (pointer:fine){.file-drop:hover{border-color:var(--accent)}}
.file-drop input{display:none}
.file-drop .pick{color:var(--accent);font-weight:700}
.file-drop .fn{font-weight:600;color:var(--ink);margin-top:6px}

/* ---------- movimento ---------- */
.motion-pending [data-hero-anim]{visibility:hidden}
[data-hero-media] img{will-change:transform}
/* menos movimento = sem deslocamento, mas cor e opacidade continuam suaves */
@media (prefers-reduced-motion:reduce){
  .btn:active,.lightbox button:active{transform:none}
  .btn:hover .i,.link-arrow:hover .i,.ways-list a:hover .i{transform:none}
  nav.main{transform:none!important}
  .lightbox img{transition:none}
  .route-stops li::before{transition:background-color 200ms ease}
}

/* =====================================================================
   v3: padrão dos sites de car hauler (Montway/Sherpa: herói com foto e cotação rápida;
   Passport: faixa escura com os números da frota; ACERTUS: "quem atendemos"; rodapé escuro)
   ===================================================================== */
:root{--night:#08090b;--night-2:#14161a;--on-night:#eef0f2;--on-night-2:#a9aeb6}

/* faixa escura da frota */
.fleet{background:var(--night);color:var(--on-night);padding-block:var(--section)}
.fleet .statement{color:var(--on-night)}
.fleet .statement span{color:var(--on-night-2)}
.fleet .facts>div{border-top-color:rgb(238 240 242 / .35)}
.fleet .facts dd{color:var(--on-night)}
.fleet .facts dt{color:var(--on-night-2)}
.fleet .fact-txt dd{font-size:clamp(1.5rem,1.1rem + 1.2vw,2.125rem);font-stretch:118%;line-height:1.05;letter-spacing:var(--track-head);max-width:12ch}

/* "quem atendemos": cabeçalho com texto */
.who .sec-head{margin-bottom:var(--s7)}
.who .sec-head h2{margin-bottom:var(--s4)}

/* rotas */
.lanes{padding-block:var(--section);background:var(--surface);border-block:1px solid var(--line)}
.lanes-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s5);align-items:center}
.lanes-copy{grid-column:1 / span 6}
.lanes-copy .lead{margin-bottom:var(--s6)}
.lane-list{list-style:none;margin:0;padding:0}
.lane-list li{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4);flex-wrap:wrap;padding-block:var(--s4);border-top:1px solid var(--line)}
.lane-list li:last-child{border-bottom:1px solid var(--line)}
.lane-list strong{font-size:var(--t-h3);font-stretch:112%;font-weight:760;letter-spacing:-.012em;line-height:1.2}
.lane-list span{color:var(--steel);font-size:.9375rem}
.lanes-map{grid-column:8 / span 5}
.lanes-map svg{width:100%;height:auto;display:block;overflow:visible}
.lanes-map .ln{fill:none;stroke:var(--brand);stroke-width:3;stroke-linecap:round;stroke-dasharray:2 9}
.lanes-map .nd{fill:var(--surface);stroke:var(--ink);stroke-width:3}
.lanes-map .nd.home{fill:var(--brand);stroke:var(--brand)}
.lanes-map .lb{font-family:var(--font);font-size:14px;fill:var(--steel)}
.lanes-map .lb.strong{font-size:20px;font-weight:760;fill:var(--ink)}
@media (max-width:899px){.lanes-copy,.lanes-map{grid-column:1 / -1}.lanes-map{max-width:420px;margin-top:var(--s6)}}

/* "em toda load": títulos menores que os da v2 (eram palavras soltas gigantes) */
.promises h3{font-size:clamp(1.5rem,1.1rem + 1.4vw,2.25rem);font-stretch:116%}

/* recrutamento */
.drive{padding-block:var(--section) 0}
.drive-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s5);align-items:center}
.drive-media{grid-column:1 / span 5;overflow:hidden;border-radius:var(--r);aspect-ratio:4/3}
.drive-media img{width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.drive-copy{grid-column:7 / span 6}
.drive-copy .lead{margin-bottom:var(--s6)}
.cta{padding-top:var(--section)}
@media (max-width:899px){.drive-media,.drive-copy{grid-column:1 / -1}.drive-copy{margin-top:var(--s5)}}

/* rodapé escuro, como no setor */
footer.site{background:var(--night);border-top:0;color:var(--on-night)}
footer.site .foot-brand p,footer.site li,.legal{color:var(--on-night-2)}
footer.site a{color:var(--on-night)}
.foot-h{color:var(--on-night)}
footer.site .social a{border-color:rgb(238 240 242 / .3);color:var(--on-night)}
footer.site .legal{border-top-color:rgb(238 240 242 / .18)}
@media (hover:hover) and (pointer:fine){footer.site ul a:hover{color:#e7a3ad}footer.site .social a:hover{background:var(--on-night);color:var(--night);border-color:var(--on-night)}}
footer.site ul a,footer.site .legal a{color:var(--on-night)}


/* =====================================================================
   v4: tema escuro industrial (Tesla/Rivian), tudo derivado do assunto: rota, despacho, frota
   ===================================================================== */
html{color-scheme:dark}
.btn-light{background:var(--on-brand);color:var(--brand)}
.btn-line{border-color:rgb(236 238 241 / .3)}
@media (hover:hover) and (pointer:fine){
  .btn-line:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
  .btn-light:hover{background:var(--paper);color:var(--ink)}
  .nav-links a:hover{background:var(--surface)}
}
header.site.scrolled{border-bottom-color:var(--line)}
.hero-title em{color:var(--accent)}
.fleet{border-block:1px solid var(--line)}
.lanes{background:var(--paper-2);border-color:var(--line)}
.why{background:var(--paper)}
.services{background:var(--paper-2)}
input,select,textarea{color-scheme:dark}
footer.site{border-top:1px solid var(--line)}
.cta-panel{background:var(--brand)}

/* quadro de rotas: letreiro de despacho (tipo painel de partidas), as letras viram UMA vez */
.board{margin:0;padding:0;list-style:none;border:1px solid var(--line);border-radius:var(--r);background:var(--night);overflow:hidden}
.board-head,.board li{display:grid;grid-template-columns:1.3fr 1fr 1.1fr;gap:var(--s4);padding:var(--s4) var(--s5);align-items:center}
.board-head{font-size:.75rem;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);border-bottom:1px solid var(--line)}
.board li+li{border-top:1px solid var(--line)}
.flap{display:flex;flex-wrap:wrap;gap:2px;font-size:clamp(.8125rem,.7rem + .35vw,1rem);font-weight:700;font-stretch:100%;text-transform:uppercase;font-variant-numeric:tabular-nums}
.flap .w{display:inline-flex;gap:2px;white-space:nowrap}
.flap i{font-style:normal;display:inline-grid;place-items:center;min-width:1.05em;height:1.6em;padding-inline:.08em;background:#1c1f24;border-radius:2px;color:var(--ink);box-shadow:inset 0 -1px 0 rgb(0 0 0 / .6),inset 0 .8em 0 rgb(255 255 255 / .025)}
.flap i.sp{background:none;box-shadow:none;min-width:.5em}
.board .st{color:var(--accent)}
.board .st i{color:var(--accent)}
@media (max-width:899px){
  .board-head{display:none}
  .board li{grid-template-columns:1fr;gap:var(--s2)}
}

/* mapa de pontos */
.lanes-grid{align-items:start}
.lanes-copy{grid-column:1 / span 5}
.lanes-map{grid-column:6 / span 7}
.lanes-map svg{overflow:visible}
.lanes-map .dots{fill:none;stroke:#3a3e45;stroke-width:4.2;stroke-linecap:round}
.lanes-map .ln{fill:none;stroke:var(--brand-2);stroke-width:3.5;stroke-linecap:round;stroke-dasharray:none}
.lanes-map .nd{fill:var(--paper-2);stroke:var(--ink);stroke-width:3}
.lanes-map .nd.home{fill:var(--brand-2);stroke:var(--ink)}
.lanes-map .lb{font-size:17px;fill:var(--steel)}
.lanes-map .lb.strong{font-size:22px;font-weight:760;fill:var(--ink)}
.lanes .board{margin-top:var(--s7)}
@media (max-width:899px){.lanes-copy,.lanes-map{grid-column:1 / -1}.lanes-map{max-width:none;margin-top:var(--s6)}}
.cap h3{color:var(--on-brand)}
.lanes-map .dots{stroke:#4b5058}
.flap{font-size:clamp(.875rem,.72rem + .45vw,1.125rem)}
.cell{background:var(--surface)}
@media (hover:hover) and (pointer:fine){.btn-line-light:hover{background:var(--on-brand);color:var(--brand);border-color:var(--on-brand)}}
@media (max-width:899px){.lanes-map .lb{font-size:26px}.lanes-map .lb.strong{font-size:32px}.lanes-map .dots{stroke-width:5}}

/* logo novo (06/10): wordmark largo; cabeçalho sem a frase, rodapé com a frase */
.brand img{height:36px;width:auto}
@media (max-width:899px){.brand img{height:30px}}
.foot-brand img{height:auto;width:min(360px,100%)}

/* área de atendimento (06/10): estados atendidos em bordô, resto em grafite */
.lanes-map .area{fill:rgb(165 28 49 / .22);stroke:rgb(240 128 139 / .45);stroke-width:1;stroke-linejoin:round}
.lanes-map .dots.on{stroke:var(--brand-2)}
.lanes-map .dots{stroke-width:3.6}
.lanes-map .lb.strong{paint-order:stroke;stroke:var(--paper-2);stroke-width:5px;stroke-linejoin:round}
.area-states{margin-top:var(--s5);color:var(--steel);font-size:.9375rem;line-height:1.6;max-width:52ch}
.area-states strong{display:block;color:var(--ink);font-weight:700;margin-bottom:var(--s1)}
@media (max-width:899px){.lanes-map .dots{stroke-width:4.4}}

/* =====================================================================
   barra de abas no topo (06/10, pedido do André; referência: No Boundaries Transport)
   linha 1: logo + telefone + cotação · linha 2: abas em faixa bordô, aba ativa clara.
   Celular: nada escondido em menu; as abas deslizam para o lado (scroll-snap).
   ===================================================================== */
:root{--tabs-h:48px;--header-total:calc(var(--header-h) + var(--tabs-h))}
@media (max-width:899px){:root{--tabs-h:46px}}
html{scroll-padding-top:calc(var(--header-total) + 12px)}
.menu-toggle{display:none!important}
.bar-cta{display:flex;align-items:center;gap:var(--s5)}
.lbl-short{display:none}
.tabs{position:relative;background:linear-gradient(180deg,var(--brand-2) 0%,var(--brand) 55%,#7d1424 100%);box-shadow:inset 0 1px 0 rgb(255 255 255 / .14)}
.tab-list{display:flex;gap:2px;list-style:none;margin:0;padding:0;height:var(--tabs-h);overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tab-list::-webkit-scrollbar{display:none}
.tab-list li{flex:0 0 auto;scroll-snap-align:start;display:flex}
.tab-list a{display:flex;align-items:center;padding:0 var(--s4);color:var(--on-brand);text-decoration:none;font-weight:600;font-size:.9688rem;white-space:nowrap;transition:background-color var(--dur-ui) ease,color var(--dur-ui) ease}
.tab-list a[aria-current="page"],.tab-list a.is-active{background:var(--ink);color:var(--paper)}
.tab-list a:focus-visible{outline:2px solid var(--on-brand);outline-offset:-4px;border-radius:0}
@media (hover:hover) and (pointer:fine){.tab-list a:not([aria-current]):not(.is-active):hover{background:rgb(0 0 0 / .22)}}
@media (max-width:899px){
  .tabs-wrap{padding-inline:0}
  .tab-list{padding-inline:calc(var(--gutter) - var(--s3));mask-image:linear-gradient(90deg,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .tab-list a{padding:0 var(--s3);font-size:.9375rem}
  .bar-cta{gap:var(--s2)}
  .nav-tel{width:44px;height:44px;justify-content:center;border:1px solid var(--line-2);border-radius:50%}
  .nav-tel span{display:none}
  .nav-tel .i{width:20px;height:20px}
  .bar-cta .btn{min-height:44px;padding:.6em 1em;font-size:.9375rem}
  .lbl-long{display:none}.lbl-short{display:inline}
  .brand img{height:26px}
}
@media (max-width:899px) and (min-width:480px){.lbl-long{display:inline}.lbl-short{display:none}.brand img{height:30px}}
/* Dealer portal (ClearPathTMS): botão no cabeçalho; no celular vira "Portal" e, abaixo de 420 px, a última aba */
.tab-portal{display:none!important}
@media (max-width:899px){.btn-portal .lbl-long{display:none}.btn-portal .lbl-short{display:inline}}
@media (max-width:419px){.btn-portal{display:none}.tab-portal{display:flex!important}}

/* Car manufacturers primeiro no "Who we haul for" (5 cartões) */
.bento{grid-template-rows:repeat(3,clamp(220px,19vw,290px))}
.c-mfr{grid-column:1 / span 6;grid-row:1 / span 2}
.c-mfr img{object-position:34% 55%}
.c-mfr .cap{padding:var(--s6)}
.c-mfr .cap h3{font-size:clamp(1.75rem,1.2rem + 1.6vw,2.5rem)}
.c-auction{grid-column:7 / span 6;grid-row:1}
.c-dealer{grid-column:7 / span 6;grid-row:2}
.c-dealer .cap{padding:var(--s5)}
.c-dealer .cap h3{font-size:var(--t-h3)}
.c-dealer img{object-position:50% 70%}
.c-fleet{grid-column:1 / span 6;grid-row:3}
.c-private{grid-column:7 / span 6;grid-row:3}
@media (max-width:899px){.c-mfr{aspect-ratio:4/5}.c-mfr .cap{padding:var(--s5)}.c-dealer{aspect-ratio:4/3}}

/* Partners: grade de logos monocromáticos */
.partners{padding-block:var(--section);border-top:1px solid var(--line)}
.partners .sec-head{margin-bottom:var(--s7)}
.brand-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.brand-grid li{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s3);padding:var(--s6) var(--s4);border-right:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--ink-2)}
.brand-grid svg{width:clamp(40px,4.4vw,60px);height:clamp(40px,4.4vw,60px);fill:currentColor}
.brand-grid span{font-size:.8125rem;color:var(--mute);letter-spacing:.02em}
@media (max-width:899px){.brand-grid{grid-template-columns:repeat(3,1fr)}.brand-grid li{padding:var(--s5) var(--s2)}}
@media (max-width:899px){.bento{grid-template-rows:none;grid-auto-rows:auto}}

/* =====================================================================
   herói v4.1 (06/10, ref. No Boundaries Transport): logo TR grande no centro, sobre chapa de
   metal perfurado (grade de caminhão) com a foto da cegonha atrás; corte em V com fio bordô.
   Embaixo: h1, texto e cotação rápida em barra.
   ===================================================================== */
.hero-x{position:relative;color:var(--ink)}
.hx-edge{position:relative;background:var(--brand-2);clip-path:polygon(0 0,100% 0,100% 84%,50% 100%,0 84%);padding-bottom:5px}
.hx-band{position:relative;isolation:isolate;overflow:hidden;min-height:clamp(380px,62svh,640px);display:grid;place-items:center;
  clip-path:polygon(0 0,100% 0,100% 84%,50% 100%,0 84%);background:#07080a}
.hx-media{position:absolute;inset:0;z-index:-3}
.hx-media img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;filter:grayscale(.35) brightness(.7)}
/* chapa perfurada: metal escuro com furos redondos por onde a foto aparece */
.hx-mesh{position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(circle at 50% 50%,transparent 0 2.3px,rgb(8 9 11 / .9) 2.9px) 0 0 / 9px 9px,
    radial-gradient(circle at 46% 44%,rgb(255 255 255 / .08) 0 1px,transparent 1.6px) 0 0 / 9px 9px}
.hx-band::after{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(ellipse 60% 55% at 50% 46%,rgb(7 8 10 / .82) 0%,rgb(7 8 10 / .35) 60%,transparent 100%),
             linear-gradient(180deg,rgb(7 8 10 / .55) 0%,transparent 30%,transparent 70%,rgb(7 8 10 / .6) 100%)}
.hx-center{text-align:center;padding-block:var(--s8) clamp(var(--s9),9vw,140px)}
.hx-logo{width:min(820px,88vw);height:auto;margin-inline:auto;filter:drop-shadow(0 18px 30px rgb(0 0 0 / .55))}

.hx-intro{text-align:center;padding-top:clamp(var(--s7),5vw,var(--s8));padding-bottom:var(--s8)}
.hero-x .display{font-size:clamp(2rem,1.2rem + 2.8vw,3.75rem);max-width:22ch;margin:0 auto var(--s4);color:var(--ink)}
.hero-x .lead{margin:0 auto var(--s7);max-width:56ch;color:var(--steel)}

/* cotação rápida em barra */
.qq{max-width:1080px;margin:0 auto;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:var(--s5);box-shadow:var(--shadow);
  display:grid;grid-template-columns:1.4fr 1.4fr .7fr .8fr auto;gap:var(--s3);align-items:end}
.qq-h{grid-column:1 / -1;font-size:1.25rem;font-stretch:112%;font-weight:780;letter-spacing:var(--track-head);line-height:1.1;margin:0 0 var(--s1)}
.qq-row{display:contents}
.qq-f{display:grid;gap:6px}
.qq-f label{font-size:.875rem;font-weight:600;color:var(--ink-2)}
.qq input,.qq select{width:100%;height:48px;min-height:48px;font:inherit;font-size:1rem;color:var(--ink);background-color:var(--paper);border:1.5px solid var(--line-2);border-radius:var(--r);padding:0 var(--s3)}
.qq .btn{width:auto;margin:0;height:48px;min-height:48px;white-space:nowrap}
.qq small{grid-column:1 / -1;color:var(--mute);font-size:.8125rem}
.hx-tel{display:inline-flex;align-items:center;gap:var(--s3);margin-top:var(--s5);color:var(--ink);text-decoration:none;min-height:44px}
.hx-tel .i{width:20px;height:20px;color:var(--accent)}
.hx-tel strong{font-weight:700;margin-left:.25em;border-bottom:1.5px solid var(--accent)}
@media (max-width:899px){
  .hx-band{min-height:clamp(260px,42svh,360px)}
  .hx-center{padding-block:var(--s6) var(--s8)}
  .hx-mesh{background-size:7px 7px,7px 7px}
  .qq{grid-template-columns:1fr 1fr;padding:var(--s5)}
  .qq-f:nth-of-type(1),.qq-f:nth-of-type(2){grid-column:1 / -1}
  .qq .btn{grid-column:1 / -1;width:100%}
  .hx-intro{padding-top:var(--s6)}
}

/* selects iguais em todo navegador (o Safari achatava os nativos) */
select{-webkit-appearance:none;appearance:none;padding-right:2.4em!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23a4a9b1'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .8em center;background-size:16px}
.hx-media{overflow:hidden}
.hx-media img{position:absolute;left:0;top:-8%;height:116%}
.hx-media img{filter:grayscale(.2) brightness(.95) contrast(1.05)}
.hx-mesh{background:
    radial-gradient(circle at 50% 50%,transparent 0 2.5px,rgb(8 9 11 / .78) 3px) 0 0 / 9px 9px,
    radial-gradient(circle at 46% 44%,rgb(255 255 255 / .07) 0 1px,transparent 1.6px) 0 0 / 9px 9px}
.hx-band::after{background:radial-gradient(ellipse 52% 42% at 50% 46%,rgb(7 8 10 / .78) 0%,rgb(7 8 10 / .3) 65%,transparent 100%),
  linear-gradient(180deg,rgb(7 8 10 / .45) 0%,transparent 28%,transparent 72%,rgb(7 8 10 / .5) 100%)}
.hx-tel strong{white-space:nowrap}
@media (max-width:899px){
  .qq-f:nth-of-type(1),.qq-f:nth-of-type(2){grid-column:auto}
  .qq-wide{grid-column:1 / -1!important}
  .hx-mesh{background-size:7px 7px,7px 7px}
}
/* logo limpo: sem sombra projetada; menos escurecimento atrás para o caminhão aparecer */
.hx-logo{filter:none}
.hx-band::after{background:radial-gradient(ellipse 46% 34% at 50% 46%,rgb(7 8 10 / .45) 0%,rgb(7 8 10 / .15) 70%,transparent 100%),
  linear-gradient(180deg,rgb(7 8 10 / .4) 0%,transparent 28%,transparent 72%,rgb(7 8 10 / .45) 100%)}
/* foto de fundo: cegonha vermelha da TR no pôr do sol (WhatsApp 06/10), cores originais */
.hx-media img{filter:saturate(1.05) brightness(.9);object-position:50% 52%}
.hx-mesh{background:
    radial-gradient(circle at 50% 50%,transparent 0 2.7px,rgb(8 9 11 / .66) 3.2px) 0 0 / 9px 9px,
    radial-gradient(circle at 46% 44%,rgb(255 255 255 / .06) 0 1px,transparent 1.6px) 0 0 / 9px 9px}
@media (max-width:899px){.hx-mesh{background-size:7px 7px,7px 7px}.hx-media img{object-position:30% 55%}}
/* fotos em pé do WhatsApp (9:16): o ladrilho da galeria corta em até 4:5; o visualizador mostra inteira */
.gal-item img{width:100%;aspect-ratio:auto;max-height:min(440px,125vw);object-fit:cover;object-position:50% 70%}
.gal-item img{max-height:none}
.gal-item img.tall{aspect-ratio:4/5;height:auto;object-fit:cover;object-position:50% 72%}

/* crédito do autor do site (discreto, no rodapé legal) */
.legal-links{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s5)}
.legal .credit{color:var(--on-night-2);opacity:.75}
.legal .credit a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.legal .credit a:hover{color:var(--on-night)}