/* =========================================================================
   SIX STAR TRANSPORTES, Design System
   Estático, zero dependências. Mobile-first.
   Paleta derivada da logo: âmbar #F5AB32 (38°) sobre base grafite.
   ========================================================================= */

/* ---------- 1. TOKENS ---------- */
:root {
  /* Base neutra (grafite quente, não cinza azulado) */
  --grafite-950: #0A0A0B;
  --grafite-900: #111112;
  --grafite-800: #1A1A1C;
  --grafite-700: #26262A;
  --grafite-600: #3A3A40;

  /* Claro (off-white quente, casa com o âmbar) */
  --areia-50:  #FAF9F7;
  --areia-100: #F4F2EE;
  --areia-200: #E5E1D9;
  --areia-300: #CFC9BD;

  /* Acento, DUAS versões. O âmbar que brilha no escuro some no claro. */
  --ambar:        #F5AB32;  /* sobre escuro */
  --ambar-escuro: #8A5D12;  /* sobre claro, contraste AA em texto */
  --ambar-medio:  #C98A1E;  /* bordas/filetes sobre claro */

  /* Texto */
  --tinta-900: #14140F;
  --tinta-600: #55524B;

  /* Tipografia
     Archivo e a letra da propria logo (grotesca larga, peso alto): headline
     e marca passam a falar a mesma lingua. Inter fica no corpo, onde
     legibilidade em tela pequena vale mais que personalidade. */
  --fonte-display: "Archivo", "Archivo Expanded", "Segoe UI", Roboto, sans-serif;
  --fonte-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Ritmo, uma curva e uma duração pro site inteiro */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.7s;

  /* Métrica */
  --max: 1240px;
  --gutter: 20px;
  --card-pad: 22px;
  --radio: 14px;
  --header-h: 68px;
}

@media (min-width: 900px) {
  :root { --gutter: 40px; --card-pad: 30px; --header-h: 84px; }
}

/* ---------- 2. TOM DE SEÇÃO ----------
   Cada seção declara o tom. Todo elemento interno consome a variável,
   nunca a cor literal. O mesmo card funciona nos dois tons de graça. */
.sec {
  position: relative;
  padding: 56px 0;
  background: var(--superficie);
  color: var(--corpo);
}

@media (min-width: 900px) { .sec { padding: 104px 0; } }

.sec--escuro,
.hero {
  --superficie: var(--grafite-950);
  --superficie-2: var(--grafite-900);
  --superficie-3: var(--grafite-800);
  --titulo: #FFFFFF;
  --corpo: #A8A49C;
  --corpo-forte: #D8D4CC;
  --linha: rgba(255, 255, 255, 0.10);
  --linha-forte: rgba(255, 255, 255, 0.18);
  --accent: var(--ambar);
  --accent-suave: rgba(245, 171, 50, 0.14);
  color-scheme: dark;
}

.sec--claro {
  --superficie: var(--areia-100);
  --superficie-2: #FFFFFF;
  --superficie-3: var(--areia-50);
  --titulo: var(--tinta-900);
  --corpo: var(--tinta-600);
  --corpo-forte: #2E2C27;
  --linha: var(--areia-200);
  --linha-forte: var(--areia-300);
  --accent: var(--ambar-escuro);
  --accent-suave: rgba(201, 138, 30, 0.12);
  color-scheme: light;
}

/* A emenda entre seções: gradiente da cor de cima → alfa 0 da MESMA cor.
   Nunca `transparent`, interpolar até rgba(0,0,0,0) cria faixa cinza suja. */
.sec--claro + .sec--escuro::before,
.sec--escuro + .sec--claro::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 56px;
  pointer-events: none;
}
@media (min-width: 900px) {
  .sec--claro + .sec--escuro::before,
  .sec--escuro + .sec--claro::before { height: 104px; }
}
.sec--claro + .sec--escuro::before {
  background: linear-gradient(to bottom, #F4F2EE, rgba(244, 242, 238, 0));
  opacity: 0.06;
}
.sec--escuro + .sec--claro::before {
  background: linear-gradient(to bottom, #0A0A0B, rgba(10, 10, 11, 0));
  opacity: 0.07;
}

/* ---------- 3. RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--fonte-ui);
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: -0.006em;
  background: var(--grafite-950);
  color: #A8A49C;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@media (min-width: 900px) { body { font-size: 17px; } }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, p, figure, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--ambar);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--ambar); color: #0A0A0B; }

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.so-leitor {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.pula-conteudo {
  position: absolute; top: -100px; left: 16px; z-index: 2000;
  background: var(--ambar); color: #0A0A0B;
  padding: 12px 20px; border-radius: 0 0 10px 10px; font-weight: 600;
  transition: top 0.2s var(--ease);
}
.pula-conteudo:focus { top: 0; }

/* ---------- 4. TIPOGRAFIA ---------- */
.display {
  font-family: var(--fonte-display);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--titulo);
  text-wrap: balance;
}

.display--xl { font-size: clamp(2.15rem, 8.6vw, 4.6rem); font-weight: 800; line-height: 1.03; }
.display--lg { font-size: clamp(2rem, 7vw, 3.4rem); font-weight: 800; }
.display--md { font-size: clamp(1.6rem, 5vw, 2.4rem); }

/* Archivo nao tem italico de verdade: a enfase e a cor, nunca a inclinacao
   sintetica que o navegador inventaria. */
.display em { font-style: normal; color: var(--accent); }

.sobretitulo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.lede {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--corpo);
  max-width: 60ch;
}
@media (min-width: 900px) { .lede { font-size: 1.125rem; } }

.cab { max-width: 780px; }
.cab .display { margin-top: 16px; }
.cab .lede { margin-top: 18px; }

.cab--centro { margin-inline: auto; text-align: center; }
.cab--centro .lede { margin-inline: auto; }

/* ---------- 5. BOTÕES (alvo de toque ≥ 44px em altura E largura) ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 28px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--fonte-ui);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.008em;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  transition: transform 0.22s var(--ease), background-color 0.22s var(--ease),
              border-color 0.22s var(--ease), color 0.22s var(--ease),
              box-shadow 0.22s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.99); }
.btn[disabled] { opacity: 0.35; pointer-events: none; }
.btn .ico { width: 18px; height: 18px; flex: none; transition: transform 0.28s var(--ease); }
.btn:hover .ico:last-child { transform: translateX(3px); }

.btn--primario {
  background: var(--ambar);
  color: #14100A;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 6px 22px rgba(245, 171, 50, 0.22);
}
.btn--primario:hover { background: #FFC05A; box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 10px 28px rgba(245,171,50,0.3); }

.btn--contorno { border-color: var(--linha-forte); color: var(--titulo); }
.btn--contorno:hover { border-color: var(--accent); color: var(--accent); }

/* Sobre foto: vidro em vez de contorno seco, que some no claro da imagem. */
.btn--vidro {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
  color: #fff;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.btn--vidro:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.4); }

.btn--zap { background: #1FAF54; color: #fff; box-shadow: 0 6px 22px rgba(31, 175, 84, 0.24); }
.btn--zap:hover { background: #25C862; }

.btn--sm { min-height: 46px; padding: 11px 20px; font-size: 0.875rem; }
.btn--bloco { width: 100%; }

/* Botao so de icone: mesma familia dos outros, alvo de 46px. */
.btn-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--linha-forte);
  background: transparent;
  color: var(--titulo);
  cursor: pointer;
  transition: border-color 0.22s var(--ease), background-color 0.22s var(--ease), color 0.22s var(--ease);
}
.btn-icone:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-suave); }
.btn-icone[disabled] { opacity: 0.3; pointer-events: none; }
.btn-icone .ico { width: 18px; height: 18px; }
.ico--espelho { transform: rotate(180deg); }

.acoes { display: flex; flex-wrap: wrap; gap: 12px; }
.acoes > .btn { flex: 1 1 200px; }
@media (min-width: 620px) { .acoes > .btn { flex: 0 0 auto; } }

/* Link com seta que desliza */
.link-seta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent);
}
.link-seta .ico { width: 15px; height: 15px; transition: transform 0.3s var(--ease); }
.link-seta:hover .ico { transform: translateX(5px); }

/* ---------- 6. CARDS, casca + corpo ----------
   A ordem é sempre: marca → título → filete → texto → rodapé.
   Card novo não escolhe espaçamento. */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--superficie-2);
  border: 1px solid var(--linha);
  border-radius: var(--radio);
  overflow: hidden;
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.card:hover { border-color: var(--linha-forte); }
a.card:hover { transform: translateY(-4px); }

.card-corpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--card-pad);
}

.card-marca {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--accent-suave);
  color: var(--accent);
  flex: none;
}
.card-marca .ico { width: 21px; height: 21px; }

.card-numero {
  font-family: var(--fonte-display);
  font-size: 1.75rem;
  line-height: 1;
  color: var(--accent);
}

.card-titulo {
  margin-top: 16px;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--titulo);
}

.card-texto { margin-top: 13px; font-size: 0.875rem; line-height: 1.65; }

.card-rodape { margin-top: auto; padding-top: 14px; }

/* Card com imagem colada nas bordas: o respiro vive no corpo, não na casca. */
.card-figura {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--superficie-3);
}
.card-figura img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}
a.card:hover .card-figura img { transform: scale(1.05); }

/* ---------- 7. GRADES ---------- */
.grade { display: grid; gap: 14px; }
.grade--2 { grid-template-columns: repeat(2, 1fr); }
.grade--3 { grid-template-columns: repeat(2, 1fr); }
.grade--4 { grid-template-columns: repeat(2, 1fr); }

@media (min-width: 720px) {
  .grade { gap: 18px; }
  .grade--3 { grid-template-columns: repeat(3, 1fr); }
  .grade--4 { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 900px) { .grade { gap: 22px; } }

/* Serviços: 9 cards. Em coluna única no mobile custava 5,8 telas de rolagem.
   Duas colunas compactas resolvem sem esconder conteúdo, um DOM só,
   o layout muda pelo contêiner. */
.grade--servicos { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.grade--servicos .card { --card-pad: 14px; }
.grade--servicos .card-figura { aspect-ratio: 4 / 3; }
.grade--servicos .card-marca { width: 34px; height: 34px; }
.grade--servicos .card-marca .ico { width: 17px; height: 17px; }
.grade--servicos .card-titulo { margin-top: 11px; font-size: 0.875rem; line-height: 1.3; }
.grade--servicos .card-texto {
  margin-top: 9px;
  font-size: 0.75rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.grade--servicos .card-rodape { display: none; }

@media (min-width: 620px) {
  .grade--servicos { gap: 18px; }
  .grade--servicos .card { --card-pad: 22px; }
  .grade--servicos .card-figura { aspect-ratio: 16 / 10; }
  .grade--servicos .card-marca { width: 44px; height: 44px; }
  .grade--servicos .card-marca .ico { width: 21px; height: 21px; }
  .grade--servicos .card-titulo { margin-top: 16px; font-size: 1.0625rem; }
  .grade--servicos .card-texto { font-size: 0.875rem; -webkit-line-clamp: none; line-clamp: none; }
  .grade--servicos .card-rodape { display: block; }
}
@media (min-width: 1000px) {
  .grade--servicos { grid-template-columns: repeat(3, 1fr); }
  .grade--servicos .card { --card-pad: 30px; }
}

.bloco-topo { margin-bottom: 30px; }
@media (min-width: 900px) { .bloco-topo { margin-bottom: 52px; } }

.bloco-topo--linha {
  display: grid;
  gap: 20px;
  align-items: end;
}
/* No mobile a coluna e unica: sem isso o botao esticaria de borda a borda. */
.bloco-topo--linha > .btn { justify-self: start; }
@media (min-width: 900px) {
  .bloco-topo--linha { grid-template-columns: 1fr auto; gap: 40px; }
}

/* ---------- 8. HEADER ---------- */
.topo {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease),
              backdrop-filter 0.35s var(--ease);
  border-bottom: 1px solid transparent;
}
.topo::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 160%;
  background: linear-gradient(to bottom, rgba(10, 10, 11, 0.75), rgba(10, 10, 11, 0));
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.35s var(--ease);
}
.topo.is-colado::before { opacity: 0; }
.topo .wrap { position: relative; }

.topo.is-colado {
  background: rgba(10, 10, 11, 0.86);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: rgba(255, 255, 255, 0.09);
}

.topo .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.marca { display: inline-flex; align-items: center; min-height: 44px; }

/* O simbolo e o PNG transparente ja recortado: a altura declarada e altura
   de marca de verdade, sem vazio em volta. Ao lado so TRANSPORTES, porque
   SIX STAR ja esta desenhado dentro do simbolo. */
.marca-lockup { display: inline-flex; align-items: center; gap: 12px; }
.marca-simbolo { height: 40px; width: auto; }
.marca-palavra {
  font-family: var(--fonte-display);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #8D8981;
  padding-top: 3px;
}
@media (min-width: 900px) {
  .marca-simbolo { height: 50px; }
  .marca-palavra { font-size: 0.75rem; letter-spacing: 0.32em; }
}
/* No header entra so o simbolo: ele ja desenha SIX STAR, e a palavra ao
   lado encostava na navegacao em qualquer largura que coubesse. No rodape
   ela aparece, porque la nao disputa espaco com nada. */
.topo .marca-palavra { display: none; }

/* No rodape a marca pode respirar: nao disputa espaco com nav nem CTA. */
.rodape-marca .marca-simbolo { height: 52px; }
@media (min-width: 900px) { .rodape-marca .marca-simbolo { height: 62px; } }

.nav-desk { display: none; }
@media (min-width: 1000px) {
  .nav-desk { display: flex; align-items: center; gap: 4px; }
  .nav-desk a {
    position: relative;
    display: inline-flex; align-items: center;
    min-height: 44px; padding: 0 15px;
    font-size: 0.875rem; font-weight: 500; color: #B8B4AC;
    white-space: nowrap;
    border-radius: 999px;
    transition: color 0.25s var(--ease), background-color 0.25s var(--ease);
  }
  .nav-desk a:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
  .nav-desk a[aria-current="page"] { color: var(--ambar); }
  .nav-desk a[aria-current="page"]::after {
    content: "";
    position: absolute; left: 15px; right: 15px; bottom: 6px;
    height: 2px; border-radius: 2px; background: currentColor;
  }
}

.topo-acoes { display: flex; align-items: center; gap: 10px; }
.topo-fone {
  display: none;
  align-items: center; gap: 8px;
  min-height: 44px; padding: 0 14px;
  border-radius: 999px;
  font-size: 0.875rem; font-weight: 600; color: #D8D4CC;
  white-space: nowrap;
  transition: color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.topo-fone .ico { width: 16px; height: 16px; color: var(--ambar); }
.topo-fone:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
@media (min-width: 1340px) { .topo-fone { display: inline-flex; } }
.topo-acoes .btn { min-height: 44px; padding: 10px 20px; font-size: 0.875rem; }
.topo-cta { display: none; }
@media (min-width: 620px) { .topo-cta { display: inline-flex; } }

.hamburguer {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  cursor: pointer;
}
.hamburguer .ico { width: 20px; height: 20px; color: #fff; }
.hamburguer .ico--fechar { display: none; }
.hamburguer[aria-expanded="true"] .ico--menu { display: none; }
.hamburguer[aria-expanded="true"] .ico--fechar { display: block; }
@media (min-width: 1000px) { .hamburguer { display: none; } }

/* Menu mobile */
.menu-mob {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 999;
  background: var(--grafite-950);
  padding: 22px var(--gutter) 40px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
}
.menu-mob.is-aberto { opacity: 1; visibility: visible; transform: none; }
@media (min-width: 1000px) { .menu-mob { display: none; } }

.menu-mob a.menu-item {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: 14px;
  min-height: 60px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.menu-num {
  font-family: var(--fonte-display);
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.1em;
  color: #6E6A62;
}
.menu-rotulo {
  font-family: var(--fonte-display);
  font-size: 1.45rem; font-weight: 700;
  letter-spacing: -0.025em;
  color: #fff;
}
.menu-mob a.menu-item[aria-current="page"] .menu-rotulo,
.menu-mob a.menu-item[aria-current="page"] .menu-num { color: var(--ambar); }
.menu-mob a.menu-item .ico { width: 17px; height: 17px; color: var(--ambar); }

/* Pe do menu: CTA, canais diretos e idioma. */
.menu-pe { margin-top: 26px; }
.menu-pe .btn { width: 100%; }
.menu-contato {
  display: flex; align-items: center; gap: 11px;
  min-height: 48px;
  margin-top: 6px;
  font-size: 0.9375rem;
  color: #A8A49C;
}
.menu-contato:first-of-type { margin-top: 16px; }
.menu-contato .ico { width: 17px; height: 17px; color: var(--ambar); flex: none; }
.menu-contato:hover { color: #fff; }

body.is-travado { overflow: hidden; }

/* ---------- 9. HERO ----------
   Duas faixas: o texto ocupa a coluna esquerda e os numeros fecham embaixo
   num painel de vidro que atravessa a largura toda. No mobile a mesma
   estrutura empilha sem mudar uma regra de layout. */
.hero {
  position: relative;
  min-height: 92svh;
  display: flex;
  align-items: flex-end;
  padding-top: calc(var(--header-h) + 40px);
  padding-bottom: 32px;
  background: var(--grafite-950);
  overflow: hidden;
}
@media (min-width: 900px) {
  .hero { min-height: 100svh; padding-bottom: 40px; }
}

.hero-fundo { position: absolute; inset: 0; z-index: 0; }
.hero-fundo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 62% center;
  transform: scale(1.04);
}
/* Tres camadas: base solida embaixo, lateral para segurar o texto e um
   toque quente no canto, que e de onde vem o ambar da marca. */
.hero-fundo::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 85% 15%, rgba(245, 171, 50, 0.13), rgba(10, 10, 11, 0) 60%),
    linear-gradient(to top, #0A0A0B 3%, rgba(10, 10, 11, 0.82) 40%, rgba(10, 10, 11, 0.34) 100%),
    linear-gradient(to right, rgba(10, 10, 11, 0.92) 0%, rgba(10, 10, 11, 0.58) 54%, rgba(10, 10, 11, 0.1) 100%);
}

.hero .wrap { position: relative; z-index: 1; width: 100%; }
.hero-wrap { display: grid; gap: 24px; }
@media (min-width: 900px) { .hero-wrap { gap: 34px; } }
.hero-texto { max-width: 740px; }
.hero .display { margin-top: 16px; }
.hero .lede { margin-top: 16px; max-width: 50ch; font-size: 1rem; color: #C9C5BD; }
.hero .acoes { margin-top: 24px; }
@media (min-width: 900px) {
  .hero .display { margin-top: 20px; }
  .hero .lede { margin-top: 20px; font-size: 1.125rem; }
  .hero .acoes { margin-top: 30px; }
}
/* O sobretitulo do hero e longo: no celular ele so cabe numa linha menor. */
.hero .sobretitulo { font-size: 0.6875rem; letter-spacing: 0.12em; }
@media (min-width: 900px) { .hero .sobretitulo { font-size: 0.75rem; letter-spacing: 0.16em; } }

/* Selos de confianca: a linha que responde "por que voces" antes do scroll. */
.hero-selos {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 20px;
}
@media (min-width: 900px) { .hero-selos { gap: 8px 10px; margin-top: 26px; } }
.hero-selos li {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 0.75rem;
  color: #D8D4CC;
}
@media (min-width: 900px) { .hero-selos li { padding: 8px 14px; font-size: 0.8125rem; } }
.hero-selos .ico { width: 14px; height: 14px; color: var(--ambar); }

/* Painel de numeros no pe do hero */
.hero-provas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: var(--radio);
  overflow: hidden;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
@media (min-width: 720px) { .hero-provas { grid-template-columns: repeat(4, 1fr); } }

.hero-provas li {
  padding: 14px 16px;
  background: rgba(10, 10, 11, 0.62);
}
@media (min-width: 900px) { .hero-provas li { padding: 20px 26px; } }

.hero-provas b {
  display: block;
  font-family: var(--fonte-display);
  font-weight: 800;
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #fff;
}
@media (min-width: 900px) { .hero-provas b { font-size: 2.1rem; } }
.hero-provas span {
  display: block;
  margin-top: 6px;
  font-size: 0.75rem;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: #8D8981;
}

/* ---------- 9b. HERO EM DOIS BANNERS (home) ----------
   Mesma mecanica do carrossel de rotas: scroll-snap nativo, o JS so troca
   o slide e sincroniza os pontos. Cada banner e uma tela cheia; os numeros
   e os pontos ficam no pe, fora da pista. */
.hero--home { display: block; padding: 0; min-height: 0; }

.hero-pista {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.hero-pista::-webkit-scrollbar { display: none; }

.hero-banner {
  position: relative;
  flex: 0 0 100%;
  min-width: 100%;
  scroll-snap-align: start;
  display: flex;
  align-items: flex-end;
  min-height: 74svh;
  padding-top: calc(var(--header-h) + 36px);
  padding-bottom: 28px;
  background: var(--grafite-950);
  overflow: hidden;
}
@media (min-width: 900px) { .hero-banner { min-height: 82svh; padding-bottom: 36px; } }

.hero-pe {
  position: relative;
  z-index: 1;
  padding-top: 18px;
  padding-bottom: 28px;
}
@media (min-width: 900px) { .hero-pe { padding-top: 22px; padding-bottom: 36px; } }
.hero-pe .hero-provas { margin-top: 16px; }

/* Pontos: rotulo visivel no desktop, bolinha no celular. */
.hero-pontos { display: flex; flex-wrap: wrap; gap: 8px; }
.hero-ponto {
  display: inline-flex; align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: #8D8981;
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
}
.hero-ponto[aria-selected="true"] { color: #fff; border-color: var(--ambar); }
@media (max-width: 719px) {
  .hero-ponto { width: 44px; padding: 0; justify-content: center; border: 0; }
  .hero-ponto span {
    display: block; width: 26px; height: 3px; border-radius: 999px;
    overflow: hidden; text-indent: -999em;
    background: rgba(255, 255, 255, 0.24);
  }
  .hero-ponto[aria-selected="true"] span { background: var(--accent); }
}

/* ---------- 10. LOGOS DE CLIENTES ----------
   Os arquivos sao brancos com transparencia. `brightness(0)` pinta tudo de
   preto preservando o alfa, que e o que permite tirar o painel escuro e
   deixar os logos direto sobre a areia. O laco fecha com fita duplicada. */
.sec--confianca { padding-top: 44px; padding-bottom: 44px; }
@media (min-width: 900px) { .sec--confianca { padding-top: 76px; padding-bottom: 76px; } }

.sobretitulo--centro { display: flex; justify-content: center; width: 100%; margin-bottom: 30px; }
.sobretitulo--centro::before { display: none; }

.trilha {
  position: relative;
  overflow: hidden;
  touch-action: pan-x;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.trilha-fita {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 44px;
  animation: correr 42s linear infinite;
}
@media (min-width: 900px) { .trilha-fita { gap: 76px; } }
.trilha:hover .trilha-fita,
.trilha:focus-within .trilha-fita { animation-play-state: paused; }

@keyframes correr { to { transform: translateX(-33.3333%); } }

.trilha-fita img {
  height: 58px;
  width: auto;
  object-fit: contain;
  filter: brightness(0);
  opacity: 0.62;
  transition: opacity 0.3s var(--ease);
}
@media (min-width: 900px) { .trilha-fita img { height: 82px; } }
.trilha-fita img:hover { opacity: 1; }

/* Em seccao escura o mesmo bloco continua funcionando: volta ao branco. */
.sec--escuro .trilha-fita img { filter: brightness(0) invert(1); opacity: 0.7; }

@media (prefers-reduced-motion: reduce) {
  .trilha { overflow-x: auto; }
  .trilha-fita { animation: none; }
}

/* Com JS a fita vira uma pista rolavel: o laco continua sozinho, mas o
   visitante pode arrastar, girar a roda ou deslizar o dedo a qualquer hora.
   Sem JS a animacao CSS acima segue valendo. */
.trilha--arrasta {
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
  cursor: grab;
}
.trilha--arrasta::-webkit-scrollbar { display: none; }
.trilha--arrasta.is-arrastando { cursor: grabbing; }
.trilha--arrasta .trilha-fita { animation: none; }
.trilha--arrasta.is-arrastando .trilha-fita img { pointer-events: none; }

/* ---------- 10b. CARROSSEL DE ROTAS ----------
   scroll-snap nativo: arrasta no dedo sem uma linha de JS e sem lib. Os
   botoes e os pontos sao atalhos, nunca o unico caminho. */
.sec--rotas { overflow: hidden; }
.rotas-setas { display: none; gap: 10px; }
@media (min-width: 900px) { .rotas-setas { display: flex; } }

/* O contentor so limita; quem rola e a pista. */
.rotas { width: 100%; }

.rotas-pista {
  display: flex;
  gap: 14px;
  padding: 0 var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}
.rotas-pista::-webkit-scrollbar { display: none; }
@media (min-width: 900px) {
  .rotas-pista { gap: 22px; padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); }
}

.rota {
  position: relative;
  flex: 0 0 86%;
  scroll-snap-align: center;
  display: flex;
  align-items: flex-end;
  min-height: 420px;
  border-radius: var(--radio);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
@media (min-width: 720px) { .rota { flex-basis: 58%; min-height: 460px; } }
@media (min-width: 1100px) { .rota { flex-basis: 40%; min-height: 500px; } }

.rota-figura { position: absolute; inset: 0; margin: 0; }
.rota-figura img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}
.rota:hover .rota-figura img { transform: scale(1.05); }
.rota-figura::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10, 10, 11, 0.95) 8%, rgba(10, 10, 11, 0.72) 46%, rgba(10, 10, 11, 0.22) 100%);
}

.rota-corpo { position: relative; z-index: 1; padding: 26px var(--card-pad); width: 100%; }
.rota-indice {
  display: inline-block;
  font-family: var(--fonte-display);
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--ambar);
  margin-bottom: 12px;
}
.rota-corpo .display { color: #fff; }
.rota-corpo p {
  margin-top: 12px;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #C9C5BD;
  max-width: 40ch;
}
.rota-corpo .btn { margin-top: 20px; }

.rotas-pontos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.rota-ponto {
  display: inline-flex; align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--linha);
  border-radius: 999px;
  background: transparent;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--corpo);
  cursor: pointer;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.rota-ponto:hover { color: var(--titulo); border-color: var(--linha-forte); }
.rota-ponto[aria-selected="true"] {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-suave);
  font-weight: 600;
}
/* Em tela pequena o rotulo inteiro nao cabe: viram pontos de posicao. */
@media (max-width: 619px) {
  .rotas-pontos { justify-content: center; gap: 10px; }
  .rota-ponto { min-height: 44px; width: 44px; padding: 0; justify-content: center; border: 0; }
  .rota-ponto span {
    width: 100%; height: 3px; border-radius: 3px;
    background: var(--linha-forte);
    overflow: hidden; text-indent: -999em;
    transition: background-color 0.25s var(--ease);
  }
  .rota-ponto[aria-selected="true"] { background: transparent; }
  .rota-ponto[aria-selected="true"] span { background: var(--accent); }
}

/* ---------- 11. NÚMEROS ---------- */
.numeros {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--linha);
  border: 1px solid var(--linha);
  border-radius: var(--radio);
  overflow: hidden;
}
@media (min-width: 900px) { .numeros { grid-template-columns: repeat(4, 1fr); } }

.numeros li { background: var(--superficie-2); padding: 24px var(--card-pad); }
.numeros b {
  display: block;
  font-family: var(--fonte-display);
  font-size: clamp(2.2rem, 8vw, 3.1rem);
  line-height: 1;
  color: var(--titulo);
}
.numeros b span { display: inline; margin: 0; font-size: inherit; line-height: inherit; }
.numeros b .sufixo { color: var(--accent); }
.numeros > li > span {
  display: block;
  margin-top: 8px;
  font-size: 0.8125rem;
  line-height: 1.5;
}

/* ---------- 12. FROTA ---------- */
.frota-lista { display: grid; gap: 16px; }
@media (min-width: 900px) { .frota-lista { grid-template-columns: repeat(3, 1fr); gap: 22px; } }

/* No mobile a foto vertical de 4/5 custava ~940px por card. 5/4 corta o céu
   e preserva o carro e a legenda do modelo no rodapé da imagem. */
.frota-card .card-figura { aspect-ratio: 5 / 4; background: #0E0E10; }
.frota-card .card-figura img { object-fit: cover; object-position: center 82%; }
@media (min-width: 900px) {
  .frota-card .card-figura { aspect-ratio: 4 / 5; }
  .frota-card .card-figura img { object-position: center 72%; }
}



.frota-selo {
  position: absolute;
  top: 14px; left: 14px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(10, 10, 11, 0.7);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ambar);
}
.frota-selo .ico { width: 13px; height: 13px; }

.specs { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.specs li {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px;
  border: 1px solid var(--linha);
  border-radius: 999px;
  font-size: 0.75rem;
  color: var(--corpo-forte);
}
.specs .ico { width: 13px; height: 13px; color: var(--accent); }

.frota-modelos {
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--linha);
  font-size: 0.8125rem;
  line-height: 1.6;
}
.frota-modelos strong {
  display: block;
  font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 5px;
}

/* ---------- 13. SEQUÊNCIA (a ordem É o conteúdo → traço ligando) ---------- */
.passos { display: grid; gap: 0; }
@media (min-width: 900px) { .passos { grid-template-columns: repeat(4, 1fr); gap: 22px; } }

.passo { position: relative; padding: 0 0 26px 58px; }
@media (min-width: 900px) { .passo { padding: 0; } }

.passo-disco {
  position: absolute;
  top: 0; left: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  background: var(--superficie);
  font-family: var(--fonte-display);
  font-size: 1.05rem;
  color: var(--accent);
  z-index: 1;
}
@media (min-width: 900px) { .passo-disco { position: static; margin-bottom: 20px; } }

/* O traço que devolve o significado de sequência */
.passo:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 21px; top: 42px; bottom: 6px;
  width: 1px;
  background: linear-gradient(to bottom, var(--linha-forte), rgba(0, 0, 0, 0));
}
@media (min-width: 900px) {
  .passo:not(:last-child)::after {
    left: 52px; right: -22px; top: 21px; bottom: auto;
    width: auto; height: 1px;
    background: linear-gradient(to right, var(--linha-forte), rgba(0, 0, 0, 0));
  }
}

.passo h3 {
  font-size: 1.0625rem; font-weight: 600;
  letter-spacing: -0.015em; color: var(--titulo);
}
.passo p { margin-top: 9px; font-size: 0.875rem; }

/* ---------- 14. COBERTURA ---------- */
.cobertura {
  display: grid;
  gap: 24px;
}
@media (min-width: 900px) {
  .cobertura { grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: center; }
}

.destinos { display: flex; flex-wrap: wrap; gap: 8px; }
.destinos li {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px;
  padding: 0 15px;
  border: 1px solid var(--linha);
  border-radius: 999px;
  background: var(--superficie-2);
  font-size: 0.8125rem;
  color: var(--corpo-forte);
}
.destinos .ico { width: 13px; height: 13px; color: var(--accent); }
/* Quando a pílula é um link, é o <a> que precisa ser o alvo de toque inteiro. */
.destinos li:has(a) { padding: 0; }
.destinos li a {
  display: flex; align-items: center; gap: 7px;
  min-height: 44px; padding: 0 15px;
}
.destinos li a:hover { color: var(--accent); }
.destinos li.is-base {
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

.moldura {
  position: relative;
  border-radius: var(--radio);
  overflow: hidden;
  border: 1px solid var(--linha);
  aspect-ratio: 4 / 3;
}
.moldura img { width: 100%; height: 100%; object-fit: cover; }

/* Na página da frota a foto aparece inteira, a legenda do modelo faz parte dela. */
.moldura.moldura--frota { aspect-ratio: 662 / 1013; background: #0E0E10; max-height: 76svh; }
.moldura.moldura--frota img { object-fit: contain; }

/* ---------- 15. DIFERENCIAIS (lista, não trilho) ---------- */
.difs { display: grid; gap: 1px; background: var(--linha); border-radius: var(--radio); overflow: hidden; }
@media (min-width: 720px) { .difs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .difs { grid-template-columns: repeat(3, 1fr); } }

.dif {
  display: grid;
  grid-template-columns: 44px 1fr;
  grid-template-areas: "marca titulo" "marca texto";
  column-gap: 15px;
  align-items: start;
  padding: 22px var(--card-pad);
  background: var(--superficie);
}
.dif .card-marca { grid-area: marca; }
.dif h3 { grid-area: titulo; font-size: 1rem; font-weight: 600; color: var(--titulo); align-self: center; }
.dif p { grid-area: texto; margin-top: 7px; font-size: 0.8438rem; }

/* ---------- 16. FAQ (<details> nativo, zero JS) ---------- */
.faq { border-top: 1px solid var(--linha); }
.faq-item { border-bottom: 1px solid var(--linha); }

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 62px;
  padding: 16px 0;
  font-size: 0.9688rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--titulo);
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary .ico {
  width: 18px; height: 18px;
  flex: none;
  color: var(--accent);
  transition: transform 0.3s var(--ease);
}
.faq-item[open] summary .ico { transform: rotate(45deg); }

.faq-resp { padding: 0 0 20px; font-size: 0.9062rem; max-width: 68ch; }

/* ---------- 17. FORMULÁRIO ----------
   Doze campos soltos viram tres grupos numerados. O visitante sabe em que
   parte esta e onde o formulario acaba, que e metade da razao de abandono. */
.form-bloco { display: grid; gap: 28px; }
@media (min-width: 1000px) {
  .form-bloco { grid-template-columns: 0.82fr 1.18fr; gap: 56px; align-items: start; }
  .form-lado { position: sticky; top: calc(var(--header-h) + 28px); }
}

.form-lado .display { margin-top: 16px; }
.form-lado .lede { margin-top: 16px; }

.form-garantias { display: grid; gap: 11px; margin-top: 26px; }
.form-garantias li {
  display: grid; grid-template-columns: 20px 1fr; gap: 11px;
  align-items: start;
  font-size: 0.9375rem;
  color: var(--corpo-forte);
}
.form-garantias .ico { width: 20px; height: 20px; color: var(--accent); margin-top: 2px; }

.form-atalho {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 52px;
  margin-top: 24px;
  padding: 0 20px;
  border: 1px solid var(--linha);
  border-radius: 999px;
  font-size: 0.875rem; font-weight: 600;
  color: var(--titulo);
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.form-atalho:hover { border-color: var(--accent); background: var(--accent-suave); }
.form-atalho .ico { width: 17px; height: 17px; color: var(--accent); }
.form-atalho .ico:last-child { transition: transform 0.28s var(--ease); }
.form-atalho:hover .ico:last-child { transform: translateX(4px); }

.form-caixa {
  background: var(--superficie-2);
  border: 1px solid var(--linha);
  border-radius: var(--radio);
  padding: var(--card-pad);
}
@media (min-width: 900px) { .form-caixa { padding: 34px; } }

.form-grupo { border: 0; margin: 0; padding: 0; }
.form-grupo + .form-grupo { margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--linha); }
.form-grupo .campos { clear: both; }

/* `float` tira a legend do posicionamento especial do fieldset, em que ela
   fica montada em cima da borda de topo e corta o filete no meio. */
.form-grupo legend {
  float: left;
  width: 100%;
  display: flex; align-items: center; gap: 11px;
  padding: 0;
  margin-bottom: 16px;
  font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--titulo);
}
.form-passo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--accent-suave);
  color: var(--accent);
  font-family: var(--fonte-display);
  font-size: 0.8125rem; font-weight: 700;
  letter-spacing: 0;
}

/* Duas colunas ja no mobile: os campos curtos emparelham e o formulario
   encolhe umas 400px sem apertar nome nem e-mail. */
.campos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.campos > .campo { grid-column: span 2; }
.campos > .campo--curto { grid-column: span 1; }
@media (max-width: 619px) { .campos > .campo--par { grid-column: span 2; } }
@media (min-width: 620px) { .campos { gap: 16px; } }
.campo--largo, .campos > .campo--largo { grid-column: 1 / -1; }

.campo { display: flex; flex-direction: column; gap: 7px; }
.campo label {
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--corpo);
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  font-family: inherit;
  font-size: 1rem;          /* 16px reais: abaixo disso o iOS da zoom no foco */
  color: var(--titulo);
  background: var(--superficie-3);
  border: 1px solid var(--linha);
  border-radius: 12px;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background-color 0.2s var(--ease);
  appearance: none;
  -webkit-appearance: none;
}
.campo textarea { min-height: 116px; resize: vertical; line-height: 1.6; }
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--linha-forte); }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-suave);
  outline: none;
}
.campo input::placeholder, .campo textarea::placeholder { color: var(--corpo); opacity: 0.55; }

.campo select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5AB32' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 17px;
  padding-right: 44px;
}
.sec--claro .campo select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A5D12' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

.form-pe { margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--linha); }
.form-nota { margin-top: 15px; font-size: 0.8125rem; line-height: 1.6; }
.form-nota a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* honeypot anti-spam */
.armadilha { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

/* ---------- 18. CTA FINAL ---------- */
.cta-final {
  position: relative;
  border-radius: var(--radio);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 40px var(--card-pad);
  text-align: center;
}
@media (min-width: 900px) { .cta-final { padding: 74px 56px; } }

.cta-final-fundo { position: absolute; inset: 0; z-index: 0; }
.cta-final-fundo img { width: 100%; height: 100%; object-fit: cover; }
.cta-final-fundo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(10, 10, 11, 0.95), rgba(10, 10, 11, 0.88));
}
.cta-final > *:not(.cta-final-fundo) { position: relative; z-index: 1; }
.cta-final .display { margin-top: 16px; }
.cta-final .lede { margin: 16px auto 0; }
.cta-final .acoes { margin-top: 28px; justify-content: center; }

/* Trilha das páginas de serviço */
.trilha-nav { position: relative; z-index: 2; font-size: 0.8125rem; color: #8D8981; margin-bottom: 16px; }
.trilha-nav a, .trilha-nav span { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
.trilha-nav a { color: inherit; }
.trilha-nav a:hover { color: var(--ambar); }
.trilha-nav .atual { color: var(--ambar); }

/* ---------- 19. RODAPÉ ----------
   Tres faixas em vez de quatro colunas: marca e canais, depois os links,
   depois o legal. Nada de informacao saiu, so o espaco entre ela. */
.rodape { background: var(--grafite-900); border-top: 1px solid rgba(255, 255, 255, 0.08); }

.rodape-topo {
  display: grid;
  gap: 26px;
  padding: 44px 0 28px;
}
@media (min-width: 900px) {
  .rodape-topo {
    grid-template-columns: 1.4fr 1fr auto;
    align-items: start;
    gap: 48px;
    padding: 64px 0 34px;
  }
}

.rodape-marca p {
  margin-top: 16px;
  font-size: 0.875rem;
  line-height: 1.65;
  max-width: 42ch;
  color: #8D8981;
}

.rodape-contato { font-style: normal; display: grid; gap: 2px; }
.rodape-canal {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px;
  font-size: 0.9375rem;
  color: #D8D4CC;
  transition: color 0.2s var(--ease);
}
a.rodape-canal:hover { color: var(--ambar); }
.rodape-canal .ico { width: 17px; height: 17px; color: var(--ambar); flex: none; }
.rodape-canal--nota { color: #8D8981; font-size: 0.875rem; }

.sociais { display: flex; gap: 9px; }
.sociais a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 12px;
  color: #C9C5BD;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.sociais a:hover { color: #0A0A0B; background: var(--ambar); border-color: var(--ambar); }
.sociais .ico { width: 19px; height: 19px; }

.rodape-links {
  display: grid;
  gap: 24px 40px;
  padding: 26px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
@media (min-width: 620px) { .rodape-links { grid-template-columns: auto 1fr; gap: 24px 64px; } }

.rodape h4 {
  font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: #767268;
  margin-bottom: 8px;
}
/* Links em linha, quebrando sozinhos: e o que corta a altura do rodape
   sem tirar um unico destino do mapa do site. */
.rodape-links ul { display: flex; flex-wrap: wrap; gap: 0 22px; }
.rodape-links li a {
  display: inline-flex; align-items: center;
  min-height: 44px; min-width: 44px;
  font-size: 0.875rem;
  color: #A8A49C;
  transition: color 0.2s var(--ease);
}
.rodape-links li a:hover { color: var(--ambar); }

.rodape-base {
  display: flex; flex-wrap: wrap; gap: 4px 22px;
  justify-content: space-between; align-items: center;
  padding: 18px 0 82px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 0.75rem;
  color: #767268;
}
@media (min-width: 900px) { .rodape-base { padding-bottom: 26px; } }
.rodape-base ul { display: flex; flex-wrap: wrap; gap: 0 18px; }
.rodape-base li a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.rodape-base a { transition: color 0.2s var(--ease); }
.rodape-base a:hover { color: var(--ambar); }
.rodape-aviso { flex: 1 0 100%; font-size: 0.75rem; color: #767268; }

/* ---------- 20. BARRA FIXA MOBILE (a prioridade é mobile) ---------- */
.barra-mob {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 900;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: rgba(10, 10, 11, 0.9);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  transform: translateY(110%);
  transition: transform 0.35s var(--ease);
}
.barra-mob.is-visivel { transform: none; }
.barra-mob .btn { min-height: 46px; padding: 11px 14px; font-size: 0.875rem; }
@media (min-width: 900px) { .barra-mob { display: none; } }

/* ---------- 21. ANIMAÇÃO, as seções se declaram, não animam ----------
   Um único observer lê os data-* e revela. Sem lib. */
[data-anima] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  will-change: opacity, transform;
}
[data-anima].is-dentro { opacity: 1; transform: none; }

/* cascata: os filhos diretos entram em sequência */
[data-anima="bloco"] { opacity: 1; transform: none; }
[data-anima="bloco"] > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
[data-anima="bloco"].is-dentro > * { opacity: 1; transform: none; }
[data-anima="bloco"].is-dentro > *:nth-child(1) { transition-delay: 0s; }
[data-anima="bloco"].is-dentro > *:nth-child(2) { transition-delay: 0.07s; }
[data-anima="bloco"].is-dentro > *:nth-child(3) { transition-delay: 0.14s; }
[data-anima="bloco"].is-dentro > *:nth-child(4) { transition-delay: 0.21s; }
[data-anima="bloco"].is-dentro > *:nth-child(5) { transition-delay: 0.28s; }
[data-anima="bloco"].is-dentro > *:nth-child(6) { transition-delay: 0.35s; }
[data-anima="bloco"].is-dentro > *:nth-child(7) { transition-delay: 0.42s; }
[data-anima="bloco"].is-dentro > *:nth-child(8) { transition-delay: 0.49s; }
[data-anima="bloco"].is-dentro > *:nth-child(9) { transition-delay: 0.56s; }

/* Anti-flash: sem JS, nada fica invisível. */
.sem-js [data-anima],
.sem-js [data-anima="bloco"] > * { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-anima], [data-anima="bloco"] > * { opacity: 1 !important; transform: none !important; }
}

/* ---------- 22. UTILITÁRIOS ---------- */
.ico { width: 20px; height: 20px; flex: none; stroke-width: 1.6; }
.mt-g { margin-top: 30px; }
@media (min-width: 900px) { .mt-g { margin-top: 52px; } }
.centro { text-align: center; }

/* ---------- 23. DOCUMENTOS LEGAIS ---------- */
.doc { max-width: 760px; }
.doc-selo {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border: 1px solid var(--linha); border-radius: 999px;
  font-size: 0.75rem; color: var(--corpo);
}
.doc-selo .ico { width: 14px; height: 14px; color: var(--accent); }

.prosa > * + * { margin-top: 30px; }
.prosa section > * + * { margin-top: 12px; }
.prosa h2 {
  font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.015em;
  color: var(--titulo);
}
.prosa p { font-size: 0.9375rem; line-height: 1.75; }

.doc-indice {
  background: var(--superficie-2);
  border: 1px solid var(--linha);
  border-radius: var(--radio);
  padding: var(--card-pad);
}
.doc-indice h2 {
  font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 6px;
}
.doc-indice a {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; font-size: 0.875rem;
}
.doc-indice a:hover { color: var(--accent); }
.doc-indice .ico { width: 14px; height: 14px; color: var(--accent); flex: none; }

/* ---------- 24. LISTA COM MARCADOR DE CHECK ---------- */
.lista-check { display: grid; gap: 12px; }
.lista-check li {
  display: grid; grid-template-columns: 21px 1fr; gap: 12px;
  align-items: start; font-size: 0.9375rem; color: var(--corpo-forte);
}
.lista-check .ico { width: 21px; height: 21px; color: var(--accent); margin-top: 2px; }

/* ---------- 25. SELETOR DE IDIOMA ---------- */
.idiomas {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
}
.idiomas a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #8D8981;
  transition: color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.idiomas a:hover { color: #fff; }
.idiomas a[aria-current="true"] { background: rgba(245, 171, 50, 0.16); color: var(--ambar); }

/* No mobile o seletor sai do topo e vive no menu: espaço no header é escasso
   e trocar idioma não é a ação mais frequente. */
.topo-acoes .idiomas { display: none; }
@media (min-width: 620px) { .topo-acoes .idiomas { display: flex; } }

.menu-idioma {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.menu-idioma > span {
  font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ambar);
}
.menu-idioma .idiomas a { min-width: 52px; height: 44px; }
@media (min-width: 620px) { .menu-idioma { display: none; } }

.rodape-aviso {
  padding-bottom: 20px;
  font-size: 0.75rem;
  color: #767268;
}

/* ---------- 26. TIRAS DA GALERIA DE FROTA ---------- */
.galeria-tiras { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.tira {
  display: block;
  width: 62px; height: 62px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--linha);
  border-radius: 10px;
  background: var(--superficie-3);
  cursor: pointer;
  transition: border-color 0.25s var(--ease), opacity 0.25s var(--ease);
  opacity: 0.6;
}
.tira img { width: 100%; height: 100%; object-fit: cover; }
.tira:hover { opacity: 1; }
.tira[aria-current="true"] { border-color: var(--accent); opacity: 1; }

/* Alvo de toque: a tira é 62px, acima do mínimo, mas o <li> não pode encolher. */
.galeria-tiras li { display: flex; }

/* ---------- 27. LINK EM TEXTO CORRIDO ---------- */
.link-texto {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}