/* =========================================================================
   Localizar Pessoas — Design System
   Fundo branco, azul-marinho da marca como cor de ação.

   As três cores vêm do logo e foram medidas dele, não escolhidas a olho:

     azul-marinho  #021A50   16,59:1 sobre branco  — texto, botões, ação
     verde         #2A8D43    4,21:1 sobre branco  — confirmação, destaque
     âmbar         #E29E2F    2,29:1 sobre branco  — SÓ grafismo, nunca texto

   O âmbar reprova em qualquer critério de leitura sobre branco. Ele existe no
   losango do logo e vive aqui como traço e moldura; em texto ou ícone
   informativo, use o verde ou o azul-marinho.

   Every public page loads this file and then adds only what is unique to it.
   Class names match the ones the page scripts already query, so behaviour and
   presentation stay decoupled.

   Sections
     1. Tokens
     2. Reset & base
     3. Layout primitives
     4. Header, logo, menu
     5. Busca
     6. Buttons
     7. Forms
     8. Cards, badges, surfaces
     9. Feedback: progress, skeleton, alerts
    10. Footer & cookie banner
    11. Floating actions
    12. Utilities
    13. Motion & accessibility
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Tokens
   Colours are seeded from the brand config the server injects; the fallbacks
   keep the page correct even if that script fails to run.
   ------------------------------------------------------------------------- */
:root {
  /*
   * Superfícies. Branco é a base — decisão do Rafael, e o logo foi feito para
   * ela. Os cinzas não são neutros: puxam para o azul-marinho da marca, senão
   * o cartão cinza ao lado do texto azul lê como sujeira.
   */
  --vc-bg:            #FFFFFF;
  --vc-surface:       #F5F7FB;
  --vc-surface-2:     #EBEFF7;
  --vc-surface-3:     #DCE3F0;
  --vc-overlay:       rgba(2, 26, 80, 0.55);

  /*
   * Acento — o azul-marinho do logo, medido nele: #021A50.
   *
   * `--vc-accent` é sobrescrito em tempo de execução por js/site-config.js, a
   * partir da marca resolvida pelo domínio. Por isso os tons derivados são
   * CALCULADOS a partir dele com color-mix, e não escritos à mão: antes eram
   * literais `rgba(…)` que não acompanhavam a troca de marca, e o site saía
   * numa cor com brilho de outra — divergência que nenhum diff mostra.
   *
   * Sobre branco o azul-marinho dá 16,59:1, então serve para texto, botão e
   * ícone sem ressalva. Em fundo claro os tons suaves precisam ser bem mais
   * fracos do que eram no tema escuro: 12% de azul sobre branco já é um
   * cinza-azulado nítido, onde 12% de ciano sobre grafite era um sussurro.
   */
  --vc-accent:        #021A50;
  --vc-accent-hover:  #0A2C7A;
  --vc-accent-soft:   color-mix(in srgb, var(--vc-accent) 7%, transparent);
  --vc-accent-line:   color-mix(in srgb, var(--vc-accent) 20%, transparent);
  --vc-on-accent:     #FFFFFF;

  /*
   * Semântico. Verde e âmbar são os do losango do logo.
   *
   * O verde (4,21:1) passa em texto grande e em ícone; o âmbar (2,29:1) não
   * passa em nada legível — por isso existe `--vc-warning-text`, escurecido
   * até 4,8:1, para quando a mensagem de aviso for texto de verdade.
   */
  --vc-success:       #2A8D43;
  --vc-success-soft:  rgba(42, 141, 67, 0.12);
  --vc-warning:       #E29E2F;
  --vc-warning-text:  #8A5B00;
  --vc-warning-soft:  rgba(226, 158, 47, 0.16);
  --vc-danger:        #C62828;
  --vc-danger-soft:   rgba(198, 40, 40, 0.10);

  /*
   * Texto — quatro degraus, todos derivados do azul-marinho da marca.
   *
   * Os contrastes abaixo são sobre a superfície MAIS CLARA em que cada um
   * aparece; o `subtle` é o crítico, porque o rodapé (`--vc-surface`) é onde
   * ele mora. A 3,90:1 ele reprovava — medido com o site rodando, varrendo os
   * 79 blocos de texto da home — e por isso escureceu até 4,74:1.
   */
  --vc-text:          #021A50;  /* 16,59:1 sobre branco */
  --vc-text-muted:    #4A5875;  /*  6,95:1 sobre branco */
  --vc-text-subtle:   #606E90;  /*  4,74:1 sobre --vc-surface */
  --vc-text-on-light: #021A50;

  /* Linhas — azul-marinho translúcido, não cinza neutro. */
  --vc-border:        rgba(2, 26, 80, 0.13);
  --vc-border-strong: rgba(2, 26, 80, 0.26);

  /* Spacing — 4px rhythm. */
  --vc-1: 4px;   --vc-2: 8px;   --vc-3: 12px;  --vc-4: 16px;
  --vc-5: 20px;  --vc-6: 24px;  --vc-8: 32px;  --vc-10: 40px;
  --vc-12: 48px; --vc-16: 64px; --vc-20: 80px;

  /* Radii */
  --vc-r-sm: 8px;  --vc-r-md: 12px; --vc-r-lg: 16px;
  --vc-r-xl: 22px; --vc-r-full: 9999px;

  /*
   * Elevação. Em fundo branco a sombra precisa ser bem mais fraca do que no
   * tema escuro — as mesmas opacidades que davam profundidade sobre grafite
   * viram borrão cinza sobre branco. E a sombra é azul-marinho translúcido,
   * não preto: preto sobre branco acinzenta e desbota a página.
   */
  --vc-shadow-1: 0 1px 2px rgba(2, 26, 80, 0.06);
  --vc-shadow-2: 0 2px 4px rgba(2, 26, 80, 0.05), 0 8px 20px rgba(2, 26, 80, 0.07);
  --vc-shadow-3: 0 4px 10px rgba(2, 26, 80, 0.06), 0 18px 44px rgba(2, 26, 80, 0.10);
  --vc-shadow-accent: 0 6px 20px color-mix(in srgb, var(--vc-accent) 22%, transparent);

  /* Type — fluid, so nothing needs a per-breakpoint override. */
  --vc-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --vc-font-mono: "JetBrains Mono", "SF Mono", "Courier New", monospace;

  --vc-t-xs:   clamp(0.70rem, 0.68rem + 0.10vw, 0.76rem);
  --vc-t-sm:   clamp(0.80rem, 0.77rem + 0.15vw, 0.88rem);
  --vc-t-base: clamp(0.92rem, 0.88rem + 0.20vw, 1.02rem);
  --vc-t-md:   clamp(1.02rem, 0.96rem + 0.30vw, 1.18rem);
  --vc-t-lg:   clamp(1.18rem, 1.06rem + 0.55vw, 1.50rem);
  --vc-t-xl:   clamp(1.45rem, 1.20rem + 1.20vw, 2.20rem);
  --vc-t-2xl:  clamp(1.80rem, 1.30rem + 2.40vw, 3.30rem);

  --vc-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --vc-speed: 180ms;

  /* Bridge to the brand config injected by the server. */
  --site-primary:     var(--vc-bg);
  --site-accent:      var(--vc-accent);
  --site-accent-hover:var(--vc-accent-hover);
  --site-bg:          var(--vc-bg);
  --site-btn-text:    var(--vc-on-accent);
}

/* -------------------------------------------------------------------------
   2. Reset & base
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--vc-font);
  font-size: var(--vc-t-base);
  line-height: 1.6;
  color: var(--vc-text);
  background: var(--vc-bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }

h1, h2, h3, h4 { line-height: 1.15; letter-spacing: -0.02em; font-weight: 800; }
h1 { font-size: var(--vc-t-2xl); font-weight: 900; }

/*
  Sem sombra no texto da primeira dobra.

  No tema escuro havia `text-shadow: 0 2px 12px rgba(4,10,18,0.75)` aqui, para
  o texto claro sobreviver às áreas claras da arte. Com fundo branco e texto
  azul-marinho essa sombra escura vira borrão sujo em volta de cada letra — e o
  contraste já é 16,59:1, então não há o que resgatar. Quem garante a leitura
  agora é o véu claro de `.bg-overlay::before`.
*/
h2 { font-size: var(--vc-t-xl); }
h3 { font-size: var(--vc-t-lg); }

/*
  A palavra destacada da headline.

  No tema escuro ela era o próprio acento — que agora é o azul-marinho do texto,
  ou seja, destacaria nada. Passa a ser o verde do losango do logo: 4,21:1 sobre
  branco, o que basta para texto grande, e é a cor que a marca já usa para
  "confirmado". O nome da classe (`yellow`) é herança do primeiro projeto da
  família e ficou, para o HTML das 21 páginas não precisar mudar.
*/
h1 span.yellow, .vc-accent-text { color: var(--vc-success); }

::selection { background: var(--vc-accent); color: var(--vc-on-accent); }

/* -------------------------------------------------------------------------
   3. Layout primitives
   ------------------------------------------------------------------------- */
.vc-shell { flex: 1; display: flex; flex-direction: column; }

.container, .vc-container {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: clamp(var(--vc-4), 4vw, var(--vc-8));
}
.vc-container--narrow { max-width: 720px; }
.vc-container--tight  { max-width: 520px; }

.first-fold {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--vc-bg);
  isolation: isolate;
}

/*
  Fundo da primeira dobra: a arte da marca, coberta por um véu que a escurece e
  a puxa para o grafite da paleta. O véu é mais denso no centro, exatamente
  onde fica o formulário — a arte aparece nas bordas e o conteúdo continua
  legível. Tudo aqui é decorativo e transparente ao ponteiro.
*/
.bg-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background-image: url("/img/hero-bg.jpg");
  background-size: cover;
  background-position: 50% 35%;
  background-repeat: no-repeat;
}
@media (max-width: 767px) {
  /* Versão leve: no celular a imagem é cortada de qualquer forma. */
  .bg-overlay { background-image: url("/img/hero-bg-mobile.jpg"); }
}

.bg-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  /*
   * Véu CLARO. A arte da primeira dobra é quase branca, e o texto do herói é
   * o azul-marinho da marca — o mesmo do resto do site. O véu clareia o miolo,
   * para o desenho não disputar com a leitura, e funde a base no branco da
   * página, para a arte não terminar numa linha de corte.
   *
   * Não existe bloco de exceção de cor: a primeira dobra usa os mesmos tokens
   * do corpo. Foi assim que o Rafael pediu ao escolher a arte clara — o logo
   * fica legível sobre ela sem precisar de caixa por trás.
   */
  background:
    /* Clareia o miolo, onde ficam a headline e o formulário. */
    radial-gradient(72% 58% at 50% 42%,
      rgba(255, 255, 255, 0.80) 0%,
      rgba(255, 255, 255, 0.46) 60%,
      transparent 100%),
    /* Funde a base no branco da página. */
    linear-gradient(to bottom,
      rgba(255, 255, 255, 0.12) 0%,
      rgba(255, 255, 255, 0.06) 45%,
      rgba(255, 255, 255, 0.62) 84%,
      var(--vc-bg) 100%);
}

.bg-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Grade fina por cima da arte clara: azul-marinho bem fraco. */
  background-image:
    linear-gradient(rgba(2, 26, 80, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(2, 26, 80, 0.028) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(120% 80% at 50% 0%, #000 25%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 25%, transparent 78%);
}

/*
  NÃO existe bloco de exceção de cor para a primeira dobra.

  Houve um, enquanto a arte era escura: invertia texto, selo e ícones para tons
  claros e punha uma caixa branca atrás do logo. Ao trocar a arte por uma quase
  branca, o Rafael escolheu justamente o contrário — "assim a logo poderá
  permanecer como é original". O bloco inteiro saiu em vez de ficar desativado:
  regra morta em folha de estilo é a que volta a valer sozinha no próximo ajuste.

  A dobra usa os mesmos tokens do corpo. Se um dia a arte voltar a ser escura, o
  bloco está no histórico, em `fda36d9`.
*/

.main-content {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--vc-6) clamp(var(--vc-3), 4vw, var(--vc-6)) var(--vc-10);
  text-align: center;
}
.content-container {
  width: 100%;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.vc-stack   { display: flex; flex-direction: column; gap: var(--vc-4); }
.vc-row     { display: flex; align-items: center; gap: var(--vc-3); }
.vc-grid    { display: grid; gap: var(--vc-4); }
.vc-grid--2 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.vc-grid--3 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.vc-section { padding-block: clamp(var(--vc-12), 8vw, var(--vc-20)); }

/* -------------------------------------------------------------------------
   4. Header, logo, menu
   ------------------------------------------------------------------------- */
.top-bar {
  position: relative;
  z-index: 30;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vc-4);
  padding: var(--vc-4) clamp(var(--vc-4), 4vw, var(--vc-8));
  flex-shrink: 0;
}

/*
  A marca tem o carro acima do texto, então precisa de mais altura que um
  logotipo puramente horizontal para o nome continuar legível no celular.
*/
/*
  Logo 30% maior que no projeto de origem, a pedido do Rafael.
  Antes: clamp(44px, 7.5vw, 62px) / max-width 300px.
  A altura é o que manda; `max-width` só evita que um logotipo largo demais
  empurre o menu numa tela estreita.
*/
.logo, .logo-img {
  height: clamp(57px, 9.75vw, 81px);
  width: auto;
  max-width: 390px;
  object-fit: contain;
}

/* Wordmark used where an image would be overkill (e-mail-like headers, print). */
.vc-wordmark {
  font-weight: 900;
  font-size: var(--vc-t-lg);
  letter-spacing: -0.03em;
  color: var(--vc-text);
}
.vc-wordmark span { color: var(--vc-accent); }

.menu-wrapper { position: relative; }

.menu-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--vc-2);
  background: var(--vc-surface-2);
  color: var(--vc-text);
  font-weight: 650;
  font-size: var(--vc-t-sm);
  letter-spacing: 0.04em;
  padding: 10px var(--vc-4);
  border: 1px solid var(--vc-border-strong);
  border-radius: var(--vc-r-full);
  box-shadow: var(--vc-shadow-1);
  transition: background var(--vc-speed) var(--vc-ease),
              border-color var(--vc-speed) var(--vc-ease),
              transform var(--vc-speed) var(--vc-ease);
}
.menu-btn:hover {
  background: var(--vc-surface-3);
  border-color: var(--vc-accent-line);
  transform: translateY(-1px);
}
.menu-icon { width: 18px; height: 18px; }

.menu-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + var(--vc-2));
  min-width: 258px;
  background: var(--vc-surface);
  border: 1px solid var(--vc-border-strong);
  border-radius: var(--vc-r-lg);
  box-shadow: var(--vc-shadow-3);
  backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.98);
  transform-origin: top right;
  transition: opacity var(--vc-speed) var(--vc-ease),
              transform var(--vc-speed) var(--vc-ease),
              visibility var(--vc-speed);
  z-index: 100;
  overflow: hidden;
}
.menu-dropdown.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.menu-dropdown nav { padding: var(--vc-2) 0; }

.menu-item {
  display: flex;
  align-items: center;
  gap: var(--vc-3);
  width: 100%;
  padding: 11px var(--vc-4);
  color: var(--vc-text);
  font-size: var(--vc-t-sm);
  font-weight: 550;
  text-align: left;
  transition: background var(--vc-speed) var(--vc-ease);
}
.menu-item:hover { background: color-mix(in srgb, var(--vc-accent) 7%, transparent); }

.menu-item-icon {
  width: 30px; height: 30px;
  border-radius: var(--vc-r-sm);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--vc-accent-soft);
}
.menu-item-icon svg { width: 15px; height: 15px; fill: var(--vc-accent); }

/* Legacy colour modifiers, remapped onto the new semantic palette. */
.menu-item-icon.yellow  { background: var(--vc-accent-soft); }
.menu-item-icon.yellow svg  { fill: var(--vc-accent); }
.menu-item-icon.green   { background: var(--vc-success-soft); }
.menu-item-icon.green svg   { fill: var(--vc-success); }
.menu-item-icon.blue    { background: rgba(96, 165, 250, 0.16); }
.menu-item-icon.blue svg    { fill: #60A5FA; }
.menu-item-icon.purple  { background: rgba(167, 139, 250, 0.16); }
.menu-item-icon.purple svg  { fill: #A78BFA; }

.menu-divider { border-top: 1px solid var(--vc-border); margin: var(--vc-2) 0; }

.menu-item.small { padding: 9px var(--vc-4); color: var(--vc-text-subtle); font-size: var(--vc-t-xs); }
.menu-item.small .menu-item-icon { width: 24px; height: 24px; background: color-mix(in srgb, var(--vc-accent) 6%, transparent); }
.menu-item.small .menu-item-icon svg { width: 12px; height: 12px; fill: var(--vc-text-subtle); }

.menu-item-icon.vc-menu-icon-danger { background: var(--vc-danger-soft); }
.menu-item-icon.vc-menu-icon-danger svg { fill: var(--vc-danger); }

/* Signed-in header inside the dropdown, injected by menu-session.js. */
.vc-menu-user {
  padding: var(--vc-4);
  border-bottom: 1px solid var(--vc-border);
  background: linear-gradient(180deg, var(--vc-accent-soft), transparent);
}
.vc-menu-user-row { display: flex; align-items: center; gap: var(--vc-3); }
.vc-menu-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--vc-accent-soft);
  border: 1px solid var(--vc-accent-line);
  flex-shrink: 0;
}
.vc-menu-avatar svg { width: 19px; height: 19px; fill: none; stroke: var(--vc-accent); stroke-width: 2; }
.vc-menu-name  { font-weight: 700; font-size: var(--vc-t-sm); color: var(--vc-text); }
.vc-menu-email { font-size: var(--vc-t-xs); color: var(--vc-text-subtle); word-break: break-all; }

.vc-menu-balance {
  display: flex;
  align-items: center;
  gap: var(--vc-2);
  margin-top: var(--vc-3);
  padding: 7px var(--vc-3);
  border-radius: var(--vc-r-sm);
  background: var(--vc-success-soft);
  color: var(--vc-success);
  font-size: var(--vc-t-xs);
  font-weight: 650;
}
.vc-menu-balance svg { width: 15px; height: 15px; fill: currentColor; flex-shrink: 0; }
.vc-menu-balance:hover { background: rgba(52, 211, 153, 0.22); }

/* -------------------------------------------------------------------------
   5. Plate search
   The centrepiece of the home page: a light card against the dark field so the
   input reads as a physical plate.
   ------------------------------------------------------------------------- */
.form-box { width: 100%; max-width: 640px; }

/*
  O cartão da busca.

  Era um cartão branco sobre fundo grafite: o próprio branco o separava da
  página. Sobre fundo branco isso some — cartão branco em página branca não é
  cartão. O que o define agora é a borda azul-marinho e a sombra; o degradê
  interno inverteu, do cinza claro para o branco, para o campo de digitação
  ficar na parte mais clara.
*/
.plate-container {
  background: linear-gradient(180deg, #FBFCFE 0%, #FFFFFF 100%);
  border-radius: var(--vc-r-xl);
  padding: clamp(var(--vc-4), 3vw, var(--vc-6));
  border: 1px solid var(--vc-border-strong);
  box-shadow: var(--vc-shadow-3);
  text-align: left;
}

.plate-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: var(--vc-3);
  margin-bottom: var(--vc-4);
  border-bottom: 2px solid rgba(12, 22, 38, 0.10);
}
.plate-country {
  display: flex;
  align-items: center;
  gap: var(--vc-2);
  font-weight: 750;
  font-size: var(--vc-t-sm);
  letter-spacing: 0.08em;
  color: var(--vc-text-on-light);
}
.country-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--vc-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vc-accent) 20%, transparent);
}
.flag { width: 34px; height: 24px; border-radius: 3px; overflow: hidden; }
.flag svg { width: 100%; height: 100%; }

.input-row { display: flex; flex-direction: column; gap: var(--vc-3); }
@media (min-width: 520px) { .input-row { flex-direction: row; } }

/* The plate field itself. */
.plate-container input[type="text"] {
  flex: 1;
  min-width: 0;
  border: 2px solid #CBD5E1;
  border-radius: var(--vc-r-md);
  background: #FFFFFF;
  font-family: var(--vc-font-mono);
  font-size: clamp(1.25rem, 1rem + 2vw, 1.75rem);
  font-weight: 700;
  letter-spacing: 0.28em;
  text-align: center;
  text-transform: uppercase;
  color: var(--vc-text-on-light);
  padding: var(--vc-4) var(--vc-3);
  transition: border-color var(--vc-speed) var(--vc-ease),
              box-shadow var(--vc-speed) var(--vc-ease);
}
.plate-container input[type="text"]::placeholder {
  color: #94A3B8;
  letter-spacing: 0.12em;
  font-size: 0.62em;
  font-weight: 500;
}
.plate-container input[type="text"]:focus {
  outline: none;
  border-color: var(--vc-accent-hover);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--vc-accent) 22%, transparent);
}

/* -------------------------------------------------------------------------
   Campo de busca de pessoa.

   Reaproveita a caixa da busca de placa — o mesmo cartão claro sobre a arte
   escura, que é o que dá o contraste da primeira dobra — e desfaz o que era
   específico de placa: monoespaçado, caixa alta, letra espaçada e centralizada.
   Um nome de pessoa escrito assim fica ilegível, e "Maria Antônia" não cabe.
   ------------------------------------------------------------------------- */
.busca-container input[type="text"] {
  font-family: var(--vc-font);
  font-size: clamp(1rem, 0.94rem + 0.4vw, 1.15rem);
  font-weight: 600;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  padding: var(--vc-4);
}
.busca-container input[type="text"]::placeholder {
  letter-spacing: normal;
  font-size: 0.92em;
  font-weight: 500;
}

/* Rótulo do tipo reconhecido: CPF, Nome, Telefone, E-mail. */
.busca-tipo {
  font-size: var(--vc-t-xs);
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vc-accent-hover);
  min-height: 1em;
}
.busca-tipo[data-invalido="1"] { color: #B45309; }

.busca-ajuda {
  margin-top: var(--vc-3);
  font-size: var(--vc-t-sm);
  line-height: 1.5;
  color: #64748B;
}

/* Value propositions under the headline. */
.subtitle-lines {
  width: 100%;
  max-width: 620px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--vc-2);
  margin-bottom: var(--vc-6);
}
.subtitle-line {
  display: flex;
  align-items: center;
  gap: var(--vc-2);
  color: var(--vc-text-muted);
  font-size: var(--vc-t-sm);
  line-height: 1.45;
}
.check-icon { color: var(--vc-success); flex-shrink: 0; font-size: 1em; }

.subtitle-intro {
  color: var(--vc-text-muted);
  font-size: var(--vc-t-md);
  margin-bottom: var(--vc-3);
}

/* Trust strip. */
.trust-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--vc-3) var(--vc-6);
  margin-top: var(--vc-5);
}
.trust-item {
  display: inline-flex;
  align-items: center;
  gap: var(--vc-2);
  color: var(--vc-text-muted);
  font-size: var(--vc-t-sm);
  font-weight: 550;
}
.trust-icon { width: 16px; height: 16px; flex-shrink: 0; }

/* -------------------------------------------------------------------------
   6. Buttons
   One visual contract, reused by every legacy class name in the codebase.
   ------------------------------------------------------------------------- */
.vc-btn,
button[type="submit"],
.btn-primary, .btn-pay, .btn-copy, .step-btn, .cta-button,
.next-step-btn, .submit-btn, .loading-next-btn, .btn-comprar,
.package-btn, .btn-ver, .esqueci-btn, .reset-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--vc-2);
  background: linear-gradient(135deg, var(--vc-accent) 0%, var(--vc-accent-hover) 100%);
  color: var(--vc-on-accent);
  font-weight: 750;
  font-size: var(--vc-t-base);
  letter-spacing: 0.01em;
  padding: var(--vc-4) var(--vc-6);
  border: none;
  border-radius: var(--vc-r-md);
  cursor: pointer;
  box-shadow: var(--vc-shadow-accent);
  transition: transform var(--vc-speed) var(--vc-ease),
              box-shadow var(--vc-speed) var(--vc-ease),
              filter var(--vc-speed) var(--vc-ease);
  white-space: nowrap;
}
.vc-btn:hover,
button[type="submit"]:hover,
.btn-primary:hover, .btn-pay:hover, .btn-copy:hover, .step-btn:hover,
.cta-button:hover, .next-step-btn:hover, .submit-btn:hover,
.loading-next-btn:hover, .btn-comprar:hover, .package-btn:hover,
.btn-ver:hover, .esqueci-btn:hover, .reset-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--vc-accent) 34%, transparent);
  filter: brightness(1.05);
}
.vc-btn:active, button[type="submit"]:active, .btn-primary:active { transform: translateY(0); }

.vc-btn:disabled, button[type="submit"]:disabled, .btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  filter: grayscale(0.4);
}

.vc-btn--block, .btn-block { width: 100%; }

.vc-btn--ghost, .btn-secondary, .btn-footer.dark {
  background: var(--vc-surface-2);
  color: var(--vc-text);
  border: 1px solid var(--vc-border-strong);
  box-shadow: none;
}
.vc-btn--ghost:hover, .btn-secondary:hover, .btn-footer.dark:hover {
  background: var(--vc-surface-3);
  border-color: var(--vc-accent-line);
  filter: none;
}

.vc-btn--quiet {
  background: transparent;
  color: var(--vc-text-muted);
  border: 1px solid var(--vc-border);
  box-shadow: none;
}
.vc-btn--quiet:hover { color: var(--vc-text); border-color: var(--vc-border-strong); filter: none; }

.btn-footer.yellow { background: linear-gradient(135deg, var(--vc-accent), var(--vc-accent-hover)); color: var(--vc-on-accent); }

/* -------------------------------------------------------------------------
   7. Forms
   ------------------------------------------------------------------------- */
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--vc-4); }

.form-group label, .vc-label {
  font-size: var(--vc-t-sm);
  font-weight: 600;
  color: var(--vc-text-muted);
}

.vc-input,
.form-group input, .form-group select, .form-group textarea {
  width: 100%;
  background: color-mix(in srgb, var(--vc-accent) 5%, transparent);
  border: 1px solid var(--vc-border-strong);
  border-radius: var(--vc-r-md);
  padding: 13px var(--vc-4);
  color: var(--vc-text);
  font-size: var(--vc-t-base);
  transition: border-color var(--vc-speed) var(--vc-ease),
              box-shadow var(--vc-speed) var(--vc-ease),
              background var(--vc-speed) var(--vc-ease);
}
.vc-input::placeholder,
.form-group input::placeholder, .form-group textarea::placeholder { color: var(--vc-text-subtle); }

.vc-input:focus,
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none;
  background: color-mix(in srgb, var(--vc-accent) 7%, transparent);
  border-color: var(--vc-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--vc-accent) 16%, transparent);
}

.vc-input[aria-invalid="true"], .form-group input.error {
  border-color: var(--vc-danger);
  box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.14);
}

.vc-hint  { font-size: var(--vc-t-xs); color: var(--vc-text-subtle); }
.vc-error { font-size: var(--vc-t-xs); color: var(--vc-danger); font-weight: 600; }

/* Light card context (checkout): keep input text dark and legible. */
.card-form .form-group input {
  background: #FFFFFF;
  color: var(--vc-text-on-light);
  border-color: #CBD5E1;
}

/* -------------------------------------------------------------------------
   8. Cards, badges, surfaces
   ------------------------------------------------------------------------- */
.vc-card, .card, .pacote-card, .info-card {
  background: var(--vc-surface);
  border: 1px solid var(--vc-border);
  border-radius: var(--vc-r-lg);
  padding: clamp(var(--vc-5), 3vw, var(--vc-8));
  box-shadow: var(--vc-shadow-2);
}

/* Raises a card on hover; only for cards that are themselves clickable. */
.vc-card--interactive {
  transition: transform var(--vc-speed) var(--vc-ease),
              border-color var(--vc-speed) var(--vc-ease),
              box-shadow var(--vc-speed) var(--vc-ease);
}
.vc-card--interactive:hover {
  transform: translateY(-3px);
  border-color: var(--vc-accent-line);
  box-shadow: var(--vc-shadow-3);
}

.vc-card--accent {
  border-color: var(--vc-accent-line);
  background:
    linear-gradient(180deg, var(--vc-accent-soft) 0%, transparent 42%),
    var(--vc-surface);
}

.vc-badge, .badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: var(--vc-r-full);
  font-size: var(--vc-t-xs);
  font-weight: 700;
  letter-spacing: 0.03em;
  background: var(--vc-accent-soft);
  color: var(--vc-accent);
  border: 1px solid var(--vc-accent-line);
}
.vc-badge--success { background: var(--vc-success-soft); color: var(--vc-success); border-color: rgba(52, 211, 153, 0.3); }
.vc-badge--warning { background: var(--vc-warning-soft); color: var(--vc-warning); border-color: rgba(251, 191, 36, 0.3); }
.vc-badge--danger  { background: var(--vc-danger-soft);  color: var(--vc-danger);  border-color: rgba(248, 113, 113, 0.3); }

.price-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: var(--vc-2) var(--vc-4);
  border-radius: var(--vc-r-full);
  background: linear-gradient(135deg, var(--vc-accent), var(--vc-accent-hover));
  color: var(--vc-on-accent);
  font-weight: 800;
  box-shadow: var(--vc-shadow-accent);
}

/* Section headers on the result page. */
.sh-vehicle, .sh-search, .modelo-header, .consulta-header {
  background: linear-gradient(100deg, var(--vc-surface-2), var(--vc-surface-3));
  border: 1px solid var(--vc-border);
  border-radius: var(--vc-r-md);
  padding: var(--vc-3) var(--vc-4);
  color: var(--vc-text);
  font-weight: 700;
}

/* Masked/locked values before payment. */
.vc-locked {
  filter: blur(6px);
  user-select: none;
  pointer-events: none;
}

/* -------------------------------------------------------------------------
   9. Feedback
   ------------------------------------------------------------------------- */
.progress-bar {
  width: 100%;
  height: 8px;
  background: var(--vc-surface-2);
  border: 1px solid var(--vc-border);
  border-radius: var(--vc-r-full);
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--vc-accent), var(--vc-accent-hover));
  transition: width 420ms var(--vc-ease);
}

.vc-spinner {
  width: 22px; height: 22px;
  border: 2.5px solid color-mix(in srgb, var(--vc-accent) 18%, transparent);
  border-top-color: var(--vc-accent);
  border-radius: 50%;
  animation: vc-spin 720ms linear infinite;
}
@keyframes vc-spin { to { transform: rotate(360deg); } }

.vc-skeleton {
  background: linear-gradient(90deg, var(--vc-surface) 25%, var(--vc-surface-2) 37%, var(--vc-surface) 63%);
  background-size: 400% 100%;
  animation: vc-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--vc-r-sm);
}
@keyframes vc-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

.vc-alert {
  display: flex;
  gap: var(--vc-3);
  padding: var(--vc-4);
  border-radius: var(--vc-r-md);
  border: 1px solid var(--vc-border-strong);
  background: var(--vc-surface);
  font-size: var(--vc-t-sm);
  color: var(--vc-text-muted);
}
.vc-alert--info    { border-color: var(--vc-accent-line);          background: var(--vc-accent-soft); }
.vc-alert--success { border-color: rgba(52, 211, 153, 0.32);       background: var(--vc-success-soft); }
.vc-alert--warning { border-color: rgba(251, 191, 36, 0.32);       background: var(--vc-warning-soft); }
.vc-alert--danger  { border-color: rgba(248, 113, 113, 0.32);      background: var(--vc-danger-soft); }

/* -------------------------------------------------------------------------
   10. Footer & cookie banner
   ------------------------------------------------------------------------- */
/*
  O rodapé era `#0B111A`, quase preto — âncora escura no fim de um site escuro.
  Numa página branca isso vira uma faixa preta com o texto escuro dos tokens por
  cima: 2,65:1 medido no navegador, ilegível. E o pedido foi fundo branco no
  site, não só na primeira dobra.

  Passa a ser a superfície clara da paleta, separada do corpo pela borda. Todo o
  resto do rodapé já usava token e acompanhou sozinho.
*/
.footer {
  position: relative;
  z-index: 1;
  background: var(--vc-surface);
  border-top: 1px solid var(--vc-border);
  padding: clamp(var(--vc-10), 6vw, var(--vc-16)) clamp(var(--vc-4), 4vw, var(--vc-8)) var(--vc-6);
}
.footer-grid {
  max-width: 1120px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--vc-8);
}
.footer-col h3 {
  color: var(--vc-text);
  font-size: var(--vc-t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  margin-bottom: var(--vc-4);
}
.footer-col a {
  display: block;
  color: var(--vc-text-muted);
  font-size: var(--vc-t-sm);
  margin-bottom: var(--vc-2);
  transition: color var(--vc-speed) var(--vc-ease);
}
.footer-col a:hover { color: var(--vc-accent); }
.footer-col p { font-size: var(--vc-t-sm); color: var(--vc-text-muted); margin-bottom: var(--vc-1); }

.footer-bottom {
  max-width: 1120px;
  margin: var(--vc-8) auto 0;
  padding-top: var(--vc-5);
  border-top: 1px solid var(--vc-border);
  text-align: center;
}
.footer-bottom p { font-size: var(--vc-t-xs); color: var(--vc-text-subtle); margin-bottom: var(--vc-1); }

.disclaimer-box {
  display: inline-block;
  margin-top: var(--vc-4);
  padding: var(--vc-2) var(--vc-4);
  background: color-mix(in srgb, var(--vc-accent) 5%, transparent);
  border: 1px solid var(--vc-border);
  border-radius: var(--vc-r-sm);
}
.disclaimer-box p { font-size: var(--vc-t-xs); color: var(--vc-text-subtle); margin: 0; }

.cookie-banner {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 1000;
  display: none;
  padding: var(--vc-4);
  /*
    `--vc-overlay` é azul-marinho translúcido — serve para escurecer o que está
    ATRÁS de um modal, não para ser fundo de texto. Com o site escuro isso não
    aparecia, porque o texto do banner era claro; com o site branco o texto é
    escuro e ficava sobre um véu escuro: 2,33:1 medido no navegador.
    O banner precisa de superfície própria, opaca.
  */
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--vc-accent-line);
  box-shadow: 0 -8px 28px rgba(2, 26, 80, 0.10);
}
.cookie-banner.show { display: block; animation: vc-rise 280ms var(--vc-ease); }
@keyframes vc-rise { from { transform: translateY(100%); } to { transform: translateY(0); } }

.cookie-content {
  max-width: 1120px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--vc-3);
}
@media (min-width: 768px) {
  .cookie-content { flex-direction: row; justify-content: space-between; }
  .cookie-text { text-align: left; flex: 1; }
}
.cookie-text { color: var(--vc-text-muted); font-size: var(--vc-t-sm); text-align: center; }
.cookie-text a { color: var(--vc-accent); text-decoration: underline; }
.cookie-buttons { display: flex; gap: var(--vc-2); flex-shrink: 0; }
.cookie-btn {
  padding: 10px var(--vc-5);
  border-radius: var(--vc-r-sm);
  font-weight: 650;
  font-size: var(--vc-t-sm);
  transition: all var(--vc-speed) var(--vc-ease);
}
.cookie-btn.accept { background: var(--vc-accent); color: var(--vc-on-accent); }
.cookie-btn.accept:hover { background: var(--vc-accent-hover); }
.cookie-btn.reject { background: transparent; color: var(--vc-text-muted); border: 1px solid var(--vc-border-strong); }
.cookie-btn.reject:hover { color: var(--vc-text); background: color-mix(in srgb, var(--vc-accent) 6%, transparent); }

/* -------------------------------------------------------------------------
   11. Floating actions
   ------------------------------------------------------------------------- */
.vc-whatsapp {
  position: fixed;
  right: clamp(var(--vc-4), 3vw, var(--vc-6));
  bottom: clamp(var(--vc-4), 3vw, var(--vc-6));
  z-index: 900;
  width: 54px; height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #25D366;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.36);
  transition: transform var(--vc-speed) var(--vc-ease);
}
.vc-whatsapp:hover { transform: scale(1.07); }
.vc-whatsapp svg { width: 28px; height: 28px; fill: #FFFFFF; }

/* Keep the floating button clear of the cookie banner while it is showing. */
.cookie-banner.show ~ .vc-whatsapp { bottom: 110px; }

/*
  O banner fica acima de tudo (z-index 1000). Em telas curtas isso pode cobrir
  o botão de avanço de uma tela que ocupa a viewport inteira — no checkout,
  cobrir o CTA custa venda. Enquanto o banner estiver visível, as telas em
  position:fixed reservam espaço para ele.
*/
body:has(.cookie-banner.show) .step-screen,
body:has(.cookie-banner.show) .vc-fullscreen {
  padding-bottom: 132px;
}

/* -------------------------------------------------------------------------
   12. Utilities
   ------------------------------------------------------------------------- */
.vc-muted   { color: var(--vc-text-muted); }
.vc-subtle  { color: var(--vc-text-subtle); }
.vc-center  { text-align: center; }
.vc-mono    { font-family: var(--vc-font-mono); letter-spacing: 0.04em; }
.vc-hidden  { display: none !important; }

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

.vc-divider { height: 1px; background: var(--vc-border); border: none; margin-block: var(--vc-6); }

/* -------------------------------------------------------------------------
   13. Motion & accessibility
   ------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--vc-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.vc-skip-link {
  position: absolute;
  left: var(--vc-4);
  top: -60px;
  z-index: 2000;
  padding: var(--vc-2) var(--vc-4);
  background: var(--vc-accent);
  color: var(--vc-on-accent);
  border-radius: var(--vc-r-sm);
  font-weight: 700;
  transition: top var(--vc-speed) var(--vc-ease);
}
.vc-skip-link:focus { top: var(--vc-4); }

@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;
  }
}

@media print {
  .top-bar, .cookie-banner, .vc-whatsapp, .footer, .menu-wrapper { display: none !important; }
  body { background: #FFFFFF; color: #000000; }
  .vc-card, .plate-container { box-shadow: none; border: 1px solid #CCCCCC; }
}