/* =========================================================================
   Veiculares — Design System
   Slate Tech: graphite surfaces, electric cyan accent.

   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. Plate search
     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 {
  /* Surfaces — each step is a deliberate elevation, not an arbitrary tint. */
  --vc-bg:            #0F1620;
  --vc-surface:       #1A2432;
  --vc-surface-2:     #223047;
  --vc-surface-3:     #2B3B54;
  --vc-overlay:       rgba(15, 22, 32, 0.72);

  /* Accent */
  --vc-accent:        #22D3EE;
  --vc-accent-hover:  #06B6D4;
  --vc-accent-soft:   rgba(34, 211, 238, 0.12);
  --vc-accent-line:   rgba(34, 211, 238, 0.28);
  --vc-on-accent:     #04141C;

  /* Semantic */
  --vc-success:       #34D399;
  --vc-success-soft:  rgba(52, 211, 153, 0.14);
  --vc-warning:       #FBBF24;
  --vc-warning-soft:  rgba(251, 191, 36, 0.14);
  --vc-danger:        #F87171;
  --vc-danger-soft:   rgba(248, 113, 113, 0.14);

  /* Text — four steps is enough hierarchy for any page here. */
  --vc-text:          #E8EDF4;
  --vc-text-muted:    #A3B1C6;
  --vc-text-subtle:   #6B7C95;
  --vc-text-on-light: #0F1620;

  /* Lines */
  --vc-border:        rgba(255, 255, 255, 0.09);
  --vc-border-strong: rgba(255, 255, 255, 0.16);

  /* 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;

  /* Elevation — a tight ambient shadow plus a soft cast reads as real depth. */
  --vc-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.28);
  --vc-shadow-2: 0 2px 4px rgba(0, 0, 0, 0.22), 0 8px 20px rgba(0, 0, 0, 0.26);
  --vc-shadow-3: 0 4px 8px rgba(0, 0, 0, 0.24), 0 18px 44px rgba(0, 0, 0, 0.36);
  --vc-shadow-accent: 0 6px 24px rgba(34, 211, 238, 0.26);

  /* 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; }

/*
  A primeira dobra tem a arte da marca ao fundo. Uma sombra discreta garante o
  contraste do texto sobre as áreas mais claras da imagem, sem deixá-lo pesado.
*/
.first-fold h1,
.first-fold .subtitle-line,
.first-fold .subtitle-intro,
.first-fold .trust-item { text-shadow: 0 2px 12px rgba(4, 10, 18, 0.75); }
h2 { font-size: var(--vc-t-xl); }
h3 { font-size: var(--vc-t-lg); }

/* The legacy accent span kept its name so page markup did not have to change. */
h1 span.yellow, .vc-accent-text { color: var(--vc-accent); }

::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;
  background:
    /* Escurece só o miolo, onde ficam a headline e o formulário. */
    radial-gradient(70% 55% at 50% 45%,
      rgba(15, 22, 32, 0.72) 0%,
      rgba(15, 22, 32, 0.42) 60%,
      transparent 100%),
    /* Funde as bordas no grafite da paleta, sem apagar a arte. */
    linear-gradient(to bottom,
      rgba(15, 22, 32, 0.30) 0%,
      rgba(15, 22, 32, 0.22) 45%,
      rgba(15, 22, 32, 0.78) 88%,
      var(--vc-bg) 100%),
    radial-gradient(55% 60% at 18% 5%,  rgba(34, 211, 238, 0.14), transparent 70%),
    radial-gradient(45% 55% at 88% 12%, rgba(56, 189, 248, 0.10), transparent 72%);
}

.bg-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.022) 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%);
}

.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, .logo-img {
  height: clamp(44px, 7.5vw, 62px);
  width: auto;
  max-width: 300px;
  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: rgba(255, 255, 255, 0.06); }

.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: rgba(255, 255, 255, 0.05); }
.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; }

.plate-container {
  background: linear-gradient(180deg, #FFFFFF 0%, #F1F5F9 100%);
  border-radius: var(--vc-r-xl);
  padding: clamp(var(--vc-4), 3vw, var(--vc-6));
  box-shadow: var(--vc-shadow-3), 0 0 0 1px rgba(255, 255, 255, 0.10);
  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(15, 22, 32, 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 rgba(34, 211, 238, 0.20);
}
.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 rgba(34, 211, 238, 0.22);
}

/* 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%, #38BDF8 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 rgba(34, 211, 238, 0.34);
  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), #38BDF8); 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: rgba(255, 255, 255, 0.04);
  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: rgba(255, 255, 255, 0.06);
  border-color: var(--vc-accent);
  box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.16);
}

.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), #38BDF8);
  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), #38BDF8);
  transition: width 420ms var(--vc-ease);
}

.vc-spinner {
  width: 22px; height: 22px;
  border: 2.5px solid rgba(255, 255, 255, 0.16);
  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
   ------------------------------------------------------------------------- */
.footer {
  position: relative;
  z-index: 1;
  background: #0B111A;
  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: rgba(255, 255, 255, 0.04);
  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);
  background: var(--vc-overlay);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--vc-accent-line);
}
.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: rgba(255, 255, 255, 0.05); }

/* -------------------------------------------------------------------------
   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; }
}