/* =========================================================
   BLUE Logística — protótipo institucional
   Paleta medida nas fotografias da frota:
   azul do logotipo e do galpão, ciano da lona, grafite da cabine.
   ========================================================= */

@font-face {
  font-family: "Albert Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../assets/fonts/albert-sans-latin-wght-normal.woff2") format("woff2-variations");
  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: "Albert Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../assets/fonts/albert-sans-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* cor */
  --azul: #0b5c8e;          /* "BLUE" das carretas, galpão */
  --azul-fundo: #084a73;    /* tom abaixo do azul, para campos e hover */
  --azul-claro: #24699a;    /* campos do formulário: texto branco 5.9:1, exemplo 4.7:1 */
  --ciano: #00a7c6;         /* lona das carretas sider */
  --grafite: #1b2025;       /* cabine DAF */
  --grafite-2: #262c32;     /* degrau de tom sobre o grafite */
  --asfalto: #2c3238;
  --ceu: #e8edf1;           /* céu nublado das fotos */
  --branco: #ffffff;
  --tinta: #121619;
  --tinta-suave: #4f5a63;   /* 6.6:1 sobre branco */
  --sobre-escuro: #c8d0d7;  /* texto secundário sobre grafite, 10:1 */
  --amarelo: #f2b33d;       /* Maio Amarelo, só na campanha */
  --marca-texto: #ffe48a;   /* marcação de revisão */

  /* tipo: cinco passos */
  --passo-pequeno: 0.875rem;
  --passo-corpo: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --passo-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --passo-sub: clamp(1.625rem, 1.2rem + 1.8vw, 2.75rem);
  --passo-titulo: clamp(2.25rem, 1.3rem + 3.6vw, 4.75rem);

  /* espaço */
  --margem: clamp(16px, 2.4vw, 36px);
  --respiro: clamp(96px, 12vw, 200px);
  --topo-altura: 72px;

  /* motivo: a inclinação das faixas pintadas nas cabines */
  --inclinacao: 0.45;

  --ease-saida: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 700px) {
  :root { --topo-altura: 60px; }
}
/* no celular a escala também tem cinco passos */
@media (max-width: 760px) {
  :root {
    --passo-corpo: 1.0625rem;
    --passo-lead: 1.25rem;
    --passo-sub: 1.75rem;
    --passo-titulo: 2.75rem;
  }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--topo-altura);
  scrollbar-color: var(--azul) var(--ceu);
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0;
  background: var(--branco);
  color: var(--tinta);
  font-family: "Albert Sans", system-ui, sans-serif;
  font-size: var(--passo-corpo);
  line-height: 1.5;
  font-weight: 400;
  font-kerning: normal;
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  caret-color: var(--azul);
}
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
h1, h2, h3, p, blockquote, ul { margin: 0; }
ul { padding: 0; list-style: none; }
h1, h2 { font-weight: 750; letter-spacing: -0.04em; line-height: 0.98; text-wrap: balance; }
h3 { font-size: var(--passo-lead); font-weight: 650; letter-spacing: -0.015em; line-height: 1.2; }
p { text-wrap: pretty; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 0.08em; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--ciano); color: var(--tinta); }
:focus-visible { outline: 3px solid var(--ciano); outline-offset: 3px; }
.contato :focus-visible, .rodape :focus-visible, .empresa :focus-visible { outline-color: var(--branco); }

.pular {
  position: fixed; left: var(--margem); top: 12px; z-index: 100;
  background: var(--tinta); color: var(--branco); padding: 12px 18px;
  transform: translateY(-160%); transition: transform 0.2s var(--ease-saida);
}
.pular:focus { transform: none; }

.visualmente-oculto {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden; /* taste-skill-ignore: utilitário de leitor de tela, não é linha */
  clip-path: inset(50%); white-space: nowrap;
}

/* marcação de revisão (rascunho) */
mark.revisar {
  background: var(--marca-texto);
  color: var(--tinta);
  padding: 0 0.15em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  cursor: help;
}
.sem-revisao mark.revisar { background: none; color: inherit; padding: 0; cursor: auto; }

/* ---------- botões: retângulo com a ponta inclinada da pintura ---------- */
.botao {
  --fundo: var(--azul);
  --texto: var(--branco);
  position: relative;
  display: inline-flex; align-items: center; gap: 0.6em;
  min-height: 52px;
  margin-right: 22px;               /* espaço da ponta inclinada */
  padding: 0 0.6em 0 1.25em;
  color: var(--texto);
  background: var(--fundo);
  font-weight: 650; font-size: var(--passo-corpo); letter-spacing: -0.005em;
  text-decoration: none;
  border: 0; cursor: pointer;
  transition: transform 0.25s var(--ease-saida), background-color 0.2s ease;
}
/* a ponta inclinada da pintura das cabines, fora da caixa do foco */
.botao::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: calc(100% - 1px); width: 23px;
  background: inherit;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  transition: clip-path 0.35s var(--ease-saida);
}
.botao:hover::after { clip-path: polygon(0 0, 45% 0, 0 100%); }
.botao:active { transform: translateY(1px) scale(0.985); }
.botao--claro { --fundo: var(--branco); --texto: var(--azul); }
.botao--claro:hover { background-color: var(--ceu); }
.botao--ciano { --fundo: var(--ciano); --texto: var(--tinta); }
.botao--ciano:hover { background-color: #2cbad5; }
.botao--escuro { --fundo: var(--grafite); --texto: var(--branco); }
.botao--escuro:hover { background-color: #000; }

.link-forte {
  font-weight: 650;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
  transition: text-underline-offset 0.2s ease;
}
.link-forte:hover { text-underline-offset: 0.45em; }

/* ---------- topo ---------- */
.topo {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--topo-altura);
  color: var(--tinta);
  background: var(--branco);
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.4s var(--ease-saida);
}
.js .topo:not(.topo--solido) { background: transparent; color: var(--branco); }
.topo--escondido { transform: translateY(-100%); }
.topo__barra {
  height: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 0 var(--margem);
}
.marca { display: inline-flex; align-items: baseline; gap: 0.45em; text-decoration: none; }
.marca__nome { font-weight: 850; font-size: var(--passo-lead); letter-spacing: -0.05em; line-height: 1; }
.marca__linha { font-weight: 500; font-size: var(--passo-pequeno); letter-spacing: 0.01em; }
.topo__links { display: flex; align-items: center; gap: clamp(16px, 2vw, 32px); }
.topo__links a:not(.botao) { text-decoration: none; font-weight: 550; padding: 8px 0; position: relative; }
.topo__links a:not(.botao)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform 0.3s var(--ease-saida);
}
.topo__links a:not(.botao):hover::after { transform: scaleX(1); transform-origin: left; }
.topo__acao { min-height: 44px; font-size: var(--passo-pequeno); }
.topo--solido .topo__acao { --fundo: var(--azul); --texto: var(--branco); }
.topo--solido .topo__acao:hover, .menu-aberto .topo__acao:hover { background-color: var(--azul-fundo); }
.topo__menu {
  display: none;
  min-height: 44px; padding: 0 4px;
  background: none; border: 0; font-weight: 650; cursor: pointer;
}

@media (max-width: 860px) {
  .topo__menu { display: inline-flex; align-items: center; }
  .topo__links {
    position: fixed; inset: var(--topo-altura) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px var(--margem) 24px;
    background: var(--branco); color: var(--tinta);
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity 0.25s ease, transform 0.35s var(--ease-saida), visibility 0s linear 0.35s;
  }
  .topo__links a:not(.botao) { display: block; padding: 14px 0; font-size: var(--passo-lead); }
  .topo__acao-item { margin-top: 12px; }
  .topo__acao { --fundo: var(--azul); --texto: var(--branco); }
  .topo__acao:hover { background-color: var(--azul-fundo); }
  .menu-aberto .topo__links { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .menu-aberto .topo { background: var(--branco); color: var(--tinta); }
  .no-js .topo__menu { display: none; }
  .no-js .topo__links { position: static; opacity: 1; visibility: visible; transform: none; flex-direction: row; padding: 0; background: none; }
  .no-js .topo__links li:not(.topo__acao-item) { display: none; }
}

/* ---------- 1. abertura ---------- */
.abertura {
  position: relative;
  height: 100vh; height: 100svh; /* taste-skill-ignore: 100vh é só o fallback de navegadores antigos */
  min-height: 600px;
  overflow: hidden;
  background: var(--grafite);
  color: var(--branco);
}
.abertura__foto { position: absolute; inset: 0; }
.abertura__foto picture, .abertura__foto img { width: 100%; height: 100%; }
.abertura__foto img { object-fit: cover; object-position: 58% 40%; filter: none; }
.filtros-foto { position: absolute; pointer-events: none; overflow: hidden; }
/* véu neutro só para o menu ler sobre o céu claro */
.abertura::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 180px; z-index: 1;
  background: linear-gradient(to bottom, rgba(10, 14, 18, 0.55), rgba(10, 14, 18, 0)); /* taste-skill-ignore: véu neutro sob o menu, sobre a foto */
  pointer-events: none;
}
/* a faixa azul fica sobre a estrada, abaixo do comboio, e termina
   com a mesma inclinação das barras pintadas nas cabines ( / ) */
.abertura__base {
  --S: clamp(64px, 7.4vw, 120px);   /* recuo da ponta inclinada; ~66° com a altura da faixa */
  position: absolute; left: 0; bottom: 0; z-index: 2;
  display: flex; align-items: stretch;
  max-width: 100%;
}
.abertura__bloco {
  flex: 0 1 auto; min-width: 0;
  display: grid; grid-template-columns: auto minmax(13em, 22em); gap: 20px clamp(28px, 3.4vw, 64px);
  align-items: end;
  padding: clamp(28px, 3vw, 44px) calc(var(--S) + 28px) clamp(28px, 3vw, 44px) var(--margem);
  background: var(--azul);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--S)) 100%, 0 100%);
}
.abertura__titulo { font-size: var(--passo-titulo); max-width: 9em; }
.abertura__texto { max-width: 24em; font-size: var(--passo-corpo); line-height: 1.45; }
.abertura__acoes { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.abertura__faixa {
  flex: none;
  width: calc(var(--S) + clamp(28px, 3.2vw, 56px));
  margin-left: calc(var(--S) * -1 + clamp(8px, 0.9vw, 14px));
  clip-path: polygon(var(--S) 0, 100% 0, calc(100% - var(--S)) 100%, 0 100%);
  background: var(--ciano);
}
.abertura__faixa + .abertura__faixa { background: var(--branco); }

@media (max-width: 1100px) and (orientation: landscape) {
  .abertura__bloco { grid-template-columns: minmax(0, 1fr); width: min(84vw, 760px); }
  .abertura__titulo { font-size: var(--passo-titulo); }
  .abertura__texto { display: none; }
  .abertura__acoes { margin-top: 0; }
}
@media (max-width: 1024px) and (orientation: portrait) {
  .abertura { height: auto; min-height: 0; display: flex; flex-direction: column; background: var(--azul); }
  .abertura__foto { position: relative; inset: auto; height: 60svh; min-height: 380px; }
  .abertura__foto img { object-position: 40% 55%; }
  .abertura__base { position: relative; display: block; margin-top: -44px; }
  .abertura__bloco {
    display: block; width: 100%;
    padding: 64px var(--margem) 40px;
    clip-path: polygon(0 44px, 100% 0, 100% 100%, 0 100%);
  }
  .abertura__titulo { max-width: 10em; }
  .abertura__apoio { margin-top: 18px; }
  .abertura__faixa { display: none; }
}
@media (min-width: 701px) and (max-width: 1024px) and (orientation: portrait) {
  .abertura__foto { height: 54svh; }
  .abertura__bloco { padding: 80px var(--margem) 56px; clip-path: polygon(0 56px, 100% 0, 100% 100%, 0 100%); }
  .abertura__base { margin-top: -56px; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .abertura { min-height: 400px; }
  .abertura__bloco { padding-top: 18px; padding-bottom: 18px; }
  .abertura__titulo { font-size: var(--passo-sub); }
  .abertura__texto { display: none; }
  .abertura__acoes { margin-top: 12px; }
}

/* ---------- 2. empresa ---------- */
.empresa { padding: var(--margem); padding-top: clamp(16px, 2.4vw, 36px); }
.empresa__painel {
  position: relative; overflow: hidden;
  background: var(--grafite); color: var(--branco);
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 48px;
  padding: clamp(40px, 4.6vw, 72px) clamp(24px, 4.6vw, 72px) 0;
  min-height: min(100svh, 900px);
}
.empresa__abertura { display: flex; flex-direction: column; justify-content: space-between; gap: 48px; }
.empresa__titulo { font-size: var(--passo-titulo); max-width: 9em; }
.empresa__foto {
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%, 0 33.75%);
}
.empresa__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.empresa__textos {
  display: flex; flex-direction: column; align-items: flex-start; gap: 48px;
  padding-bottom: clamp(40px, 4.6vw, 72px);
  padding-top: clamp(4px, 6vw, 120px);
}
.empresa__bloco { max-width: 26em; }
.empresa__bloco h3 { margin-bottom: 12px; }
.empresa__bloco p { color: var(--sobre-escuro); }
.empresa__bloco mark.revisar { color: var(--tinta); }

@media (max-width: 860px) {
  .empresa { padding: 10px; }
  .empresa__painel { grid-template-columns: 1fr; gap: 0; padding: 40px 20px 0; min-height: 0; }
  .empresa__abertura { display: contents; }
  .empresa__titulo { order: 1; }
  .empresa__textos { order: 2; gap: 32px; padding: 36px 0 48px; }
  .empresa__foto { order: 3; width: 100%; margin-inline: -20px; width: calc(100% + 40px); }
}

/* ---------- faixa da pintura ---------- */
.faixa-pintura {
  display: flex; height: clamp(44px, 7vw, 104px);
  margin-top: var(--respiro);
  overflow: hidden;
}
.faixa-pintura span { flex: 1 1 0; margin-right: -3vw; clip-path: polygon(4vw 0, 100% 0, calc(100% - 4vw) 100%, 0 100%); }
.faixa-pintura span:first-child { clip-path: polygon(0 0, 100% 0, calc(100% - 4vw) 100%, 0 100%); flex-grow: 2.2; background: var(--azul); }
.faixa-pintura span:nth-child(2) { background: var(--ciano); flex-grow: 0.8; }
.faixa-pintura span:nth-child(3) { background: var(--grafite); flex-grow: 0.5; margin-right: 0; clip-path: polygon(4vw 0, 100% 0, 100% 100%, 0 100%); }

/* ---------- 3. a rota: cena do caminhão ----------
   Sem script ou com movimento reduzido: composição estática completa.
   Com script: .rota--animada fixa o palco e o caminhão segue a rolagem. */
.rota { position: relative; background: var(--ceu); }
.rota__palco {
  --chao: 13%;
  --base-galpao: 25%;
  --caminhao-l: min(76vw, 1500px);
  --caminhao-ratio: 2134 / 520;
  position: relative;
  height: 100svh;
  min-height: 0;
  overflow: hidden;
  background: var(--ceu);
}
.rota__ceu { position: absolute; inset: 0; background: var(--ceu); }
.rota__galpao {
  position: absolute; left: 0; right: 0;
  top: 34%; bottom: var(--base-galpao);
  background: var(--azul);
  overflow: hidden;
}
.rota__letreiro {
  position: absolute; left: 0; bottom: -0.12em; display: block;
  font-weight: 850; letter-spacing: -0.06em; line-height: 0.8;
  font-size: clamp(9rem, 34vw, 34rem);
  color: #13689c;
  white-space: nowrap;
  will-change: transform;
  user-select: none;
}
.rota__letreiro::before { content: "BLUE"; }
.rota__chao {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--base-galpao);
  background-color: var(--asfalto);
  background-image: linear-gradient(rgba(34, 40, 46, 0.6), rgba(34, 40, 46, 0.55)), url('../assets/hd/foto-03-3200.webp');
  background-size: 100% 100%, max(100vw, 2200px) auto;
  background-position: center, left bottom;
  background-repeat: no-repeat;
}
/* calçada do galpão: um degrau de tom dá profundidade ao piso */
.rota__chao::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px;
  background: #56616a;
  border-top: 2px solid #66737e;
  box-shadow: 0 3px 5px rgba(7, 13, 18, .28);
}
.rota__faixa-chao {
  position: absolute; left: 0; right: 0; bottom: 20%; height: 5px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='6'%3E%3Crect width='72' height='6' fill='%23e8edf1' fill-opacity='.55'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 140px 6px;
}
.rota__texto {
  position: absolute; z-index: 3;
  left: var(--margem); right: var(--margem);
  top: calc(var(--topo-altura) + clamp(16px, 4vh, 48px));
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px;
  align-items: start;
}
.rota__titulo { font-size: var(--passo-titulo); color: var(--tinta); }
.rota__servicos { position: relative; display: grid; }
.rota__servico { grid-area: 1 / 1; max-width: 30em; }
.rota__servico h3 { font-size: var(--passo-sub); font-weight: 750; letter-spacing: -0.03em; line-height: 1.05; color: var(--azul); }
.rota__servico p { margin-top: 10px; font-size: var(--passo-lead); line-height: 1.35; color: var(--tinta); max-width: 26em; }

.rota__caminhao {
  position: absolute; z-index: 2;
  left: 0;
  bottom: calc(var(--chao) - var(--caminhao-l) * 11 / 2134);
  width: var(--caminhao-l);
  aspect-ratio: var(--caminhao-ratio);
  transform-origin: 50% 100%;
  will-change: transform;
}
.rota__veiculo { position: absolute; inset: 0; width: 100%; height: 100%; }
/* sombra de contato: escura sob os pneus, difusa sob o chassi */
.rota__sombra { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: blur(.6px); }
  .rota__roda { position: absolute; overflow: visible; pointer-events: none; filter: blur(var(--roda-desfoque, 0px)); }
.rota__roda [data-roda] { will-change: transform; }

/* estado estático (padrão sem script e com movimento reduzido) */
.rota:not(.rota--animada) .rota__palco { height: auto; min-height: 0; display: flex; flex-direction: column; }
.rota:not(.rota--animada) .rota__texto { position: relative; top: auto; left: auto; right: auto; order: 2; padding: 56px var(--margem) var(--respiro); grid-template-columns: 1fr; background: var(--ceu); }
.rota:not(.rota--animada) .rota__servicos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.rota:not(.rota--animada) .rota__servico { grid-area: auto; }
.rota:not(.rota--animada) .rota__ceu,
.rota:not(.rota--animada) .rota__galpao,
.rota:not(.rota--animada) .rota__chao { position: absolute; }
.rota:not(.rota--animada) .rota__palco::before {
  content: ""; display: block; order: 1; height: clamp(320px, 52vw, 640px);
}
.rota:not(.rota--animada) .rota__ceu { height: clamp(320px, 52vw, 640px); }
.rota:not(.rota--animada) .rota__galpao { top: 18%; bottom: auto; height: calc(clamp(320px, 52vw, 640px) * 0.52); }
.rota:not(.rota--animada) .rota__chao { top: calc(clamp(320px, 52vw, 640px) * 0.7); bottom: auto; height: calc(clamp(320px, 52vw, 640px) * 0.3); }
.rota:not(.rota--animada) .rota__caminhao {
  bottom: auto; top: calc(clamp(320px, 52vw, 640px) * 0.79 - var(--caminhao-l) * 520 / 2134);
  left: 50%; transform: translateX(-50%);
}
.rota:not(.rota--animada) .rota__letreiro { left: 4vw; }

/* animada: o palco fica preso enquanto a viagem acontece */
.rota--animada { height: 240svh; }
.rota--animada .rota__palco { position: sticky; top: 0; }
.rota--animada .rota__caminhao { transform: translate3d(110vw, 0, 0); }

@media (max-width: 1100px) {
  .rota__palco { --caminhao-l: 86vw; }
}
/* retrato (celular e tablet em pé): título no céu, galpão e caminhão no meio, serviços sobre o asfalto */
@media (max-width: 760px), (max-width: 1024px) and (orientation: portrait) {
  .rota__palco { --caminhao-l: 90vw; --chao: 35%; --base-galpao: 44%; height: 100svh; min-height: 560px; }
  .rota__galpao { top: 21%; }
  .rota__letreiro { font-size: 52vw; }
  .rota__faixa-chao { bottom: 65%; height: 4px; background-size: 90px 4px; }
  .rota__servico p { font-size: var(--passo-corpo); }
  .rota--animada .rota__texto {
    top: calc(var(--topo-altura) + 10px); bottom: clamp(20px, 4svh, 36px);
    display: flex; flex-direction: column; justify-content: space-between;
  }
  .rota--animada .rota__titulo { margin-top: 0; }
  .rota--animada .rota__servico h3 { color: var(--branco); }
  .rota--animada .rota__servico p { color: var(--sobre-escuro); }
  .rota:not(.rota--animada) .rota__texto { grid-template-columns: 1fr; gap: 20px; }
  .rota:not(.rota--animada) .rota__servicos { grid-template-columns: 1fr; gap: 28px; }
  .rota--animada { height: 210svh; }
}
@media (max-width: 760px) and (max-height: 640px) {
  .rota__titulo { font-size: var(--passo-sub); }
  .rota__servico h3 { font-size: var(--passo-lead); }
  .rota__servico p { margin-top: 6px; }
}

/* ---------- 4. frota ---------- */
.frota { padding-top: var(--respiro); }
.frota__cabeca {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px;
  align-items: end;
  padding: 0 var(--margem) clamp(40px, 5vw, 72px);
}
.frota__titulo { font-size: var(--passo-titulo); }
.frota__texto { max-width: 30em; }
.frota__vitrine { position: relative; }
.frota__janela {
  position: relative; overflow: hidden;
  aspect-ratio: 21 / 9;
  background: var(--grafite);
}
.frota__foto {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 62%;
  transform-origin: 0 0;
  transition: transform 0.9s var(--ease-saida);
  will-change: transform;
  filter: none;
}
.frota__unidades {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 0 var(--margem);
  background: var(--grafite); color: var(--branco);
}
.frota__unidade {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 18px 16px 22px 0;
  background: none; border: 0; text-align: left; cursor: pointer;
  color: var(--sobre-escuro);
  transition: color 0.2s ease;
}
.frota__numero {
  font-size: var(--passo-sub); font-weight: 750; letter-spacing: -0.04em; line-height: 1;
  color: var(--branco);
  font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: center; gap: 12px;
}
.frota__numero::before {
  content: ""; width: 14px; height: 0.62em;
  background: var(--sobre-escuro);
  clip-path: polygon(55% 0, 100% 0, 45% 100%, 0 100%);
  transition: background-color 0.2s ease, width 0.3s var(--ease-saida);
}
.frota__modelo { font-size: var(--passo-corpo); }
.frota__unidade:hover .frota__numero::before { background: var(--ciano); }
.frota__unidade[aria-pressed="true"] { color: var(--branco); }
.frota__unidade[aria-pressed="true"] .frota__numero::before { background: var(--ciano); width: 26px; }

@media (max-width: 860px) {
  .frota__cabeca { grid-template-columns: 1fr; gap: 20px; }
  .frota__janela { aspect-ratio: 4 / 3; }
  .frota__unidades { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 8px var(--margem) 16px; }
  .frota__unidade { padding: 14px 8px 14px 0; }
}

/* ---------- 5. campanhas ---------- */
.campanhas {
  margin-top: var(--respiro);
  background: var(--grafite); color: var(--branco);
  padding: var(--respiro) var(--margem);
}
.campanhas__cabeca { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: end; margin-bottom: clamp(48px, 6vw, 96px); }
.campanhas__titulo { font-size: var(--passo-titulo); }
.campanhas__texto { max-width: 32em; color: var(--sobre-escuro); }
.campanhas__corpo { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 4vw, 64px); align-items: start; }
.campanhas__lista { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; position: sticky; top: calc(var(--topo-altura) + 24px); }
.campanha__aba {
  --cor: var(--ciano);
  position: relative;
  padding: 10px 0 10px 0;
  background: none; border: 0; cursor: pointer; text-align: left;
  font-size: var(--passo-sub); font-weight: 700; letter-spacing: -0.035em; line-height: 1.08;
  color: #8e99a3; /* 6.0:1 sobre o grafite: inativo legível */
  transition: color 0.24s ease, transform 0.4s var(--ease-saida);
}
.campanha__aba[data-cor="amarelo"] { --cor: var(--amarelo); }
.campanha__aba[data-cor="azul"] { --cor: #4aa3d8; }
.campanha__aba::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 18px; height: 0.6em;
  translate: 0 -50%;
  background: var(--cor);
  clip-path: polygon(55% 0, 100% 0, 45% 100%, 0 100%);
  opacity: 0; scale: 0.4 1; transform-origin: left center;
  transition: opacity 0.24s ease, scale 0.4s var(--ease-saida);
}
.campanha__aba:hover { color: var(--branco); }
.campanha__aba[aria-pressed="true"] { color: var(--branco); transform: translateX(34px); }
.campanha__aba[aria-pressed="true"]::before { opacity: 1; scale: 1 1; translate: -34px -50%; }

.campanhas__paineis { display: grid; }
.campanha { grid-area: 1 / 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
.campanha__nome { display: none; }
.campanha__principal {
  grid-column: 1 / -1; grid-row: 1;
  aspect-ratio: 3 / 2; overflow: hidden;
  clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%, 0 33.75%);
}
.campanha__principal img, .campanha__detalhe img { width: 100%; height: 100%; object-fit: cover; }
.campanha__detalhe {
  grid-column: 1 / span 5; grid-row: 2;
  margin-top: -18%;
  margin-left: -9%;
  aspect-ratio: 3 / 2; overflow: hidden;
  border: 8px solid var(--grafite);
  border-left-width: 0; border-bottom-width: 0;
  position: relative; z-index: 1;
}
.campanha__frase { grid-column: 7 / -1; grid-row: 2; padding-top: 32px; }
.campanha__frase p { font-size: var(--passo-lead); font-weight: 600; line-height: 1.3; letter-spacing: -0.02em; }
.campanha__frase footer { margin-top: 14px; color: var(--sobre-escuro); font-size: var(--passo-corpo); }

/* troca com fade: só o painel ativo fica visível e acessível */
.js .campanhas__paineis .campanha { opacity: 0; visibility: hidden; transition: opacity 0.24s ease, visibility 0s linear 0.24s; }
.js .campanhas__paineis .campanha.campanha--ativa { opacity: 1; visibility: visible; transition: opacity 0.24s ease, visibility 0s; }
.js .campanha--ativa .campanha__principal img { animation: aproxima 1.2s var(--ease-saida) both; }
@keyframes aproxima { from { transform: scale(1.06); } to { transform: none; } }

.no-js .campanhas__lista { display: none; }
.no-js .campanhas__corpo { grid-template-columns: 1fr; }
.no-js .campanhas__paineis { gap: 96px; }
.no-js .campanha { grid-area: auto; }
.no-js .campanha__nome { display: block; grid-column: 1 / -1; grid-row: 1; margin-bottom: 20px; font-size: var(--passo-titulo); }
.no-js .campanha__principal { grid-row: 2; }
.no-js .campanha__detalhe, .no-js .campanha__frase { grid-row: 3; }

@media (max-width: 900px) {
  .campanhas__cabeca { grid-template-columns: 1fr; gap: 20px; }
  .campanhas__corpo { grid-template-columns: 1fr; }
  .campanhas__lista { display: none; }
  .campanhas__paineis { gap: 88px; }
  .js .campanhas__paineis .campanha { grid-area: auto; opacity: 1; visibility: visible; }
  .campanha { grid-area: auto; }
  .campanha__nome { display: block; grid-column: 1 / -1; margin-bottom: 20px; font-size: var(--passo-sub); font-weight: 750; letter-spacing: -0.035em; line-height: 1.05; }
  .campanha__principal { grid-row: 2; margin-inline: calc(var(--margem) * -1); }
  .campanha__detalhe { grid-row: 3; grid-column: 1 / span 8; margin-left: calc(var(--margem) * -1); margin-top: -14%; }
  .campanha__frase { grid-row: 4; grid-column: 1 / -1; padding-top: 24px; }
}

/* ---------- 6. contato ---------- */
.contato { background: var(--azul); color: var(--branco); padding: var(--respiro) var(--margem); }
.contato__grade { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px clamp(32px, 5vw, 80px); }
.contato__titulo { font-size: var(--passo-titulo); }
.contato__telefone {
  position: relative;
  display: inline-block; margin-top: clamp(24px, 3vw, 48px);
  font-size: var(--passo-titulo); font-weight: 750; letter-spacing: -0.045em; line-height: 0.95;
  text-decoration: none; font-variant-numeric: tabular-nums; white-space: nowrap;
  padding-bottom: 12px;
}
.contato__telefone::after {
  content: ""; position: absolute; left: 0; right: 0.04em; bottom: 0; height: 6px;
  background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.5s var(--ease-saida);
}
.contato__telefone:hover::after { transform: scaleX(1); transform-origin: left; }
.contato__nota { margin-top: 14px; font-size: var(--passo-lead); }
.contato__email { display: inline-block; margin-top: 28px; font-size: var(--passo-lead); font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; overflow-wrap: anywhere; }
.contato__bases { display: flex; flex-direction: column; gap: 36px; padding-top: 10px; }
.contato__base h3 { margin-bottom: 8px; }
.contato__base p { margin-bottom: 10px; }

.cotacao {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px clamp(32px, 5vw, 80px);
  margin-top: clamp(32px, 4vw, 64px);
  padding: clamp(28px, 3.6vw, 56px);
  background: var(--azul-fundo);
}
.cotacao__titulo { margin-bottom: 12px; }
.cotacao__cabeca p { max-width: 24em; }
.cotacao__cabeca strong { font-weight: 600; overflow-wrap: anywhere; }
.cotacao__campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.campo { display: flex; flex-direction: column; gap: 6px; font-weight: 550; font-size: var(--passo-pequeno); }
.campo--largo { grid-column: 1 / -1; }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 52px; padding: 12px 14px;
  background: var(--azul-claro); color: var(--branco);
  border: 2px solid transparent; border-radius: 0;
  font-size: 1rem; font-weight: 400;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.campo select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
.campo select option { color: var(--tinta); background: var(--branco); }
.campo textarea { resize: vertical; min-height: 104px; }
.campo input::placeholder, .campo textarea::placeholder { color: #dce8f1; opacity: 1; }
.campo input:hover, .campo select:hover, .campo textarea:hover { background-color: #2c74a6; }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible { outline: none; border-color: var(--branco); }
.campo [aria-invalid="true"] { border-color: var(--marca-texto); }
.cotacao__erro { grid-column: 2; min-height: 1.5em; color: var(--marca-texto); font-weight: 600; }
.cotacao__erro:empty { min-height: 0; }
.cotacao .botao { grid-column: 2; justify-self: start; }

@media (max-width: 860px) {
  .contato__grade { grid-template-columns: 1fr; }
  .cotacao { grid-template-columns: 1fr; margin-inline: calc(var(--margem) * -1); }
  .cotacao__campos { grid-template-columns: 1fr; }
  .cotacao__erro, .cotacao .botao { grid-column: 1; }
  .contato__telefone { font-size: min(var(--passo-titulo), 11.6vw); }
}

/* ---------- rodapé ---------- */
.rodape { background: var(--grafite); color: var(--branco); padding: clamp(48px, 6vw, 96px) var(--margem) 32px; overflow: hidden; }
.rodape { container-type: inline-size; }
.rodape__marca {
  display: flex;
  font-weight: 850; letter-spacing: -0.05em; line-height: 0.76;
  /* "BLUE" ocupa ~2,36em nesta fonte: preenche a largura útil do rodapé */
  font-size: calc(100cqw / 2.37);
  margin-left: -0.035em;
  color: var(--branco);
  user-select: none;
  white-space: nowrap;
}
.rodape__marca span { display: inline-block; will-change: transform; }
.rodape__grade {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr);
  gap: 32px; margin-top: clamp(48px, 6vw, 96px);
  align-items: start;
}
.rodape__nav { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.rodape__nav a, .rodape__contato a { text-decoration: none; font-weight: 550; padding: 6px 0; display: inline-block; }
.rodape__nav a:hover, .rodape__contato a:hover { text-decoration: underline; }
.rodape__legal { grid-column: 1 / 3; color: var(--sobre-escuro); font-size: var(--passo-pequeno); }
.rodape__revisao {
  justify-self: start;
  background: var(--grafite-2); color: var(--branco); border: 0; cursor: pointer;
  min-height: 44px; padding: 0 16px; font-size: var(--passo-pequeno); font-weight: 600;
}
.rodape__revisao:hover { background: #313840; }

@media (max-width: 860px) {
  .rodape__grade { grid-template-columns: 1fr; }
  .rodape__legal { grid-column: auto; }
}

/* ---------- entradas (só com script; sem script tudo já aparece) ---------- */
.js [data-revela], .js [data-revela-foto] { will-change: transform, opacity; }

/* ---------- movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .campanha__aba[aria-pressed="true"] { transform: none; }
}

/* Rodas fotográficas: projeção elíptica e cubos de tração em primeiro plano. */
.rota__cubo {position:absolute;pointer-events:none;}
.abertura__foto img {object-position:50% 48%;}
.frota__foto {object-position:50% 58%;}