/* ================================================================
   valordocarro — folha do design system próprio
   ----------------------------------------------------------------
   Substitui o Elite. O Elite é um sistema de painel SaaS: cabeçalho
   de card com gradiente, fio colorido na lateral, ícone redondo no
   título. Isso brigava com a especificação, que pede card branco,
   borda de 1px e sombra discreta. Aqui só existe o que a
   especificação define, nas medidas dela.

   Ordem: tokens, base, layout, componentes, utilidades, responsivo.
   ================================================================ */

:root {
  --noite:        #0b2033;   /* header, footer, cards principais */
  --noite-escuro: #071827;   /* hero, CTA escuro */
  --noite-medio:  #16344d;   /* hover do escuro */
  --noite-texto:  #102a43;   /* títulos */
  --noite-claro:  #eaf2f8;   /* fundos e badges */

  --verde:        #16b364;   /* ação, valorização */
  --verde-escuro: #079455;
  --verde-claro:  #e7f8ef;
  --vermelho:     #e5484d;   /* queda */
  --vermelho-claro:#fdecec;
  --amarelo:      #f4b740;

  --cinza-900: #172b4d;
  --cinza-700: #425466;
  --cinza-500: #718096;
  --cinza-300: #cbd5e1;
  --cinza-200: #e2e8f0;
  --cinza-100: #f1f5f9;
  --papel-site:#f6f8fa;

  --raio-sm: 6px;   /* badges */
  --raio-md: 8px;   /* botões e campos */
  --raio-lg: 12px;  /* cards */
  --raio-xl: 16px;  /* cards grandes e banners */
  --sombra:    0 2px 8px rgba(15,23,42,.04);
  --sombra-md: 0 8px 24px rgba(15,23,42,.08);
  --sombra-lg: 0 20px 50px rgba(15,23,42,.18);
  --medida: 1280px;

  /* nomes usados pelo app.css antigo */
  --tijolo: var(--vermelho);
  --tinta:  var(--noite);
}

/* ---------------------------------------------------- base ----
   As páginas do site carregam o app.css, que já traz o reset e a
   tipografia. Conta, entrada e relatório não carregam: por isso a
   base fica numa classe do <body>, sem vazar para o resto. */
*, *::before, *::after { box-sizing: border-box; }
.vdc-base {
  margin: 0; background: var(--papel-site); color: var(--cinza-700);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased;
}
.vdc-base h1, .vdc-base h2, .vdc-base h3, .vdc-base h4 { color: var(--noite-texto); margin: 0; }
.vdc-base p { margin: 0 0 12px; }
.vdc-base a { color: inherit; text-decoration: none; }
.vdc-base img { max-width: 100%; }
.vdc-base button, .vdc-base input, .vdc-base select, .vdc-base textarea { font: inherit; }
.vdc-base button { cursor: pointer; }
.vdc-base table { border-collapse: collapse; width: 100%; }
.oculto-visual { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------------------------------------------- base ---- */
.dentro2 { width: 100%; max-width: var(--medida); margin-inline: auto; padding: 0 24px; }
.secao2 { padding: 44px 0 0; }
.secao2-cab { display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; margin-bottom: 18px; }
.secao2-cab h2, .secao2-cab h1 { margin: 0; font-size: 28px; font-weight: 700;
  letter-spacing: -.5px; color: var(--noite-texto); line-height: 1.2; }
.secao2-cab p { margin: 4px 0 0; font-size: 14px; color: var(--cinza-700); }
.secao2-cab a { font-size: 14px; color: var(--verde-escuro); font-weight: 600; text-decoration: none; }
.secao2-cab a:hover { color: var(--verde); }

/* ------------------------------------------------ cabeçalho ---- */
.page-header { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
.page-header-content { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
.page-icon { display: none; }                 /* a especificação não usa ícone no título */
.page-title { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -.5px;
  line-height: 1.2; color: var(--noite-texto); }
.page-subtitle { margin: 6px 0 0; font-size: 14px; color: var(--cinza-700); }
.page-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ----------------------------------------------- breadcrumb ---- */
.breadcrumbs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 13px; color: var(--cinza-500); margin-bottom: 16px; }
.breadcrumbs a { color: var(--cinza-500); text-decoration: none; }
.breadcrumbs a:hover { color: var(--noite-texto); }
.breadcrumbs .separator, .breadcrumbs i { color: var(--cinza-300); font-style: normal; }
.breadcrumbs .current { color: var(--noite-texto); font-weight: 500; }

/* ---------------------------------------------------- cards ---- */
.card { background: #fff; border: 1px solid var(--cinza-200); border-radius: var(--raio-lg);
  box-shadow: var(--sombra); margin-bottom: 20px; overflow: hidden; }
.card-header { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 18px 20px; border-bottom: 1px solid var(--cinza-200); background: #fff; }
.card-title { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--noite-texto); }
.card-body { padding: 20px; }
.card-footer { padding: 14px 20px; border-top: 1px solid var(--cinza-200); background: #fcfdfe; }
.card-link { font-size: 14px; font-weight: 600; color: var(--verde-escuro); text-decoration: none; }
.card-link:hover { color: var(--verde); }
.table-info { font-size: 13px; color: var(--cinza-500); }

/* ------------------------------------------ cartões de número -- */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
.stats-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.stat-card { background: #fff; border: 1px solid var(--cinza-200); border-radius: var(--raio-lg);
  box-shadow: var(--sombra); padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.stat-card.featured { border-color: var(--cinza-300); }
.stat-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.stat-icon { width: 44px; height: 44px; border-radius: var(--raio-lg); display: grid; place-items: center;
  background: var(--noite-claro); color: var(--noite); }
.stat-icon svg { width: 20px; height: 20px; }
.stat-icon.red { background: var(--vermelho-claro); color: var(--vermelho); }
.stat-icon.green { background: var(--verde-claro); color: var(--verde-escuro); }
.stat-icon.blue { background: var(--noite-claro); color: var(--noite); }
.stat-icon.teal { background: var(--verde-claro); color: var(--verde-escuro); }
.stat-icon.orange { background: #fef5e5; color: #b47714; }
.stat-value { font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--noite-texto);
  line-height: 1.1; }
.stat-label { font-size: 13px; color: var(--cinza-500); margin-top: 4px; }
.stat-footer { font-size: 13px; color: var(--cinza-500); padding-top: 12px;
  border-top: 1px solid var(--cinza-200); }
.stat-trend { font-size: 13px; font-weight: 700; padding: 5px 9px; border-radius: var(--raio-sm); }
.stat-trend.up { background: var(--verde-claro); color: var(--verde-escuro); }
.stat-trend.down { background: var(--vermelho-claro); color: var(--vermelho); }

/* --------------------------------------------------- badges ---- */
.badge { display: inline-flex; align-items: center; gap: 4px; border-radius: var(--raio-sm);
  padding: 5px 9px; font-size: 13px; font-weight: 700; background: var(--cinza-100);
  color: var(--cinza-700); }
.badge svg { width: 12px; height: 12px; }
.badge.success { background: var(--verde-claro); color: var(--verde-escuro); }
.badge.danger  { background: var(--vermelho-claro); color: var(--vermelho); }
.badge.warning { background: #fef5e5; color: #b47714; }
.badge.info, .badge.neutral { background: var(--cinza-100); color: var(--cinza-700); }
.badge.purple  { background: #f1eafd; color: #6d43c8; }

/* --------------------------------------------------- botões ---- */
.btn-primary, .btn-outline, .btn-danger, .btn-soft-blue, .btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 24px; border-radius: var(--raio-md); border: 1px solid transparent;
  font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer;
  transition: background .18s, border-color .18s, color .18s;
}
.btn-primary { background: var(--verde); border-color: var(--verde); color: #fff; }
.btn-primary:hover { background: var(--verde-escuro); border-color: var(--verde-escuro); }
.btn-outline, .btn-secondary { background: #fff; color: var(--noite-texto); border-color: var(--cinza-300); }
.btn-outline:hover, .btn-secondary:hover { background: var(--cinza-100); }
.btn-danger { background: var(--vermelho); border-color: var(--vermelho); color: #fff; }
.btn-soft-blue { background: var(--noite-claro); color: var(--noite); height: 36px; padding: 0 14px;
  font-size: 13px; }
.btn-soft-blue:hover { background: #dbe8f3; }
.btn-sm { height: 36px; padding: 0 14px; font-size: 13px; }
.btn-block { width: 100%; }
.btn-primary svg, .btn-outline svg, .btn-danger svg { width: 16px; height: 16px; }
.action-btn { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--cinza-200);
  background: #fff; border-radius: var(--raio-md); color: var(--cinza-500); cursor: pointer; }
.action-btn svg { width: 16px; height: 16px; }
.action-btn.delete:hover { border-color: var(--vermelho); color: var(--vermelho); background: var(--vermelho-claro); }

/* -------------------------------------------------- tabelas ---- */
.table-responsive { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.data-table thead th { background: var(--cinza-100); color: var(--noite-texto); text-align: left;
  font-size: 13px; font-weight: 600; padding: 12px 20px; white-space: nowrap; }
.data-table tbody td { padding: 14px 20px; border-bottom: 1px solid var(--cinza-200);
  color: var(--cinza-700); }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: #edf2f8; }
.data-table tbody tr.selected { background: var(--cinza-100); }
.data-table a { color: var(--noite-texto); text-decoration: none; font-weight: 500; }
.data-table a:hover { color: var(--verde-escuro); }
.data-table .positive { color: var(--verde-escuro); font-weight: 600; }
.data-table .negative { color: var(--vermelho); font-weight: 600; }
.cell-truncate-lg { display: inline-block; max-width: 28rem; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }

/* célula com nome e detalhe */
.entity-cell { display: flex; align-items: center; gap: 12px; }
.entity-avatar { width: 38px; height: 38px; border-radius: var(--raio-md); flex-shrink: 0;
  background: var(--noite-claro); color: var(--noite); display: grid; place-items: center;
  font-size: 12px; font-weight: 700; }
.entity-name, .entity-link { font-weight: 600; color: var(--noite-texto); text-decoration: none; }
.entity-link:hover { color: var(--verde-escuro); }
.entity-meta { font-size: 12.5px; color: var(--cinza-500); margin-top: 2px; }

/* ---------------------------------------------------- avisos --- */
.alert { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px;
  border-radius: var(--raio-md); border: 1px solid var(--cinza-200); background: #fff; }
.alert svg { width: 20px; height: 20px; flex-shrink: 0; }
.alert-title { font-weight: 700; color: var(--noite-texto); font-size: 15px; }
.alert-desc { font-size: 14px; color: var(--cinza-700); line-height: 1.6; }
.alert.info { background: var(--noite-claro); border-color: #d6e4f0; color: var(--noite); }
.alert.success { background: var(--verde-claro); border-color: #c7ecd8; }
.alert.success svg { color: var(--verde-escuro); }
.alert.danger { background: var(--vermelho-claro); border-color: #f6d4d5; }
.alert.danger svg { color: var(--vermelho); }

/* ---------------------------------------------- lista vazia ---- */
.empty-state { padding: 40px 24px; text-align: center; }
.empty-icon { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%;
  background: var(--cinza-100); display: grid; place-items: center; color: var(--cinza-500); }
.empty-icon svg { width: 24px; height: 24px; }
.empty-state h3 { margin: 0 0 8px; font-size: 17px; color: var(--noite-texto); }
.empty-state p { margin: 0 auto 18px; max-width: 52ch; font-size: 14px; color: var(--cinza-700);
  line-height: 1.6; }

/* ------------------------------------------------ formulário --- */
.form-group { display: block; }
.form-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.form-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.col-span-full { grid-column: 1 / -1; }
.form-label { display: block; font-size: 14px; font-weight: 600; color: var(--noite-texto);
  margin-bottom: 6px; }
.form-input, .form-select {
  width: 100%; height: 46px; padding: 0 14px; font-size: 15px; color: var(--noite-texto);
  background: #fff; border: 1px solid var(--cinza-300); border-radius: var(--raio-md); outline: 0;
}
.form-input:focus, .form-select:focus { border-color: var(--verde); box-shadow: 0 0 0 3px var(--verde-claro); }
.form-input::placeholder { color: var(--cinza-500); }
.form-hint { display: block; margin-top: 6px; font-size: 13px; color: var(--cinza-500); line-height: 1.5; }
.form-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }
.form-section { border: 0; padding: 0; margin: 0; }
.checkbox-wrapper { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.checkbox-input { position: absolute; opacity: 0; width: 0; height: 0; }
.checkbox-mark { width: 20px; height: 20px; border: 1px solid var(--cinza-300); border-radius: var(--raio-sm);
  display: grid; place-items: center; background: #fff; flex-shrink: 0; color: transparent; }
.checkbox-mark svg { width: 12px; height: 12px; }
.checkbox-input:checked + .checkbox-mark { background: var(--verde); border-color: var(--verde); color: #fff; }
.checkbox-text { font-size: 14px; color: var(--cinza-700); line-height: 1.5; }

/* ----------------------------------------------- dois blocos --- */
.show-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: 20px; align-items: start; }
.show-main, .show-sidebar { min-width: 0; }
.info-row { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 0; border-bottom: 1px solid var(--cinza-200); font-size: 14px; }
.info-row:last-child { border-bottom: 0; }
.summary-item { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0;
  border-bottom: 1px solid var(--cinza-200); font-size: 14px; }
.summary-value.success { color: var(--verde-escuro); font-weight: 700; }
.summary-value.highlight { color: var(--vermelho); font-weight: 700; }

/* ------------------------------------------------- perguntas --- */
.faq details { border: 1px solid var(--cinza-200); border-radius: var(--raio-md); background: #fff;
  margin-bottom: 8px; padding: 14px 16px; }
.faq summary { font-size: 16px; font-weight: 500; color: var(--noite-texto); cursor: pointer; }

/* ----------------------------------------------- utilidades ---- */
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.d-flex { display: flex; }
.flex-column { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.align-center { align-items: center; }
.align-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; }
.mt-2 { margin-top: 8px; }  .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; }
.mt-5 { margin-top: 20px; } .mt-6 { margin-top: 24px; }
.mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; }
.mb-5 { margin-bottom: 20px; } .mb-6 { margin-bottom: 24px; }
.text-center { text-align: center; }
.text-primary { color: var(--noite-texto); }
.text-secondary { color: var(--cinza-700); }
.text-muted, .text-faint { color: var(--cinza-500); }
.text-success { color: var(--verde-escuro); }
.text-warning { color: #b47714; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-normal { font-weight: 400; }
.positive { color: var(--verde-escuro); font-weight: 600; }
.negative { color: var(--vermelho); font-weight: 600; }
.text-link { color: var(--noite-texto); text-decoration: none; font-weight: 500; }
.text-link:hover { color: var(--verde-escuro); }

/* =============================================================
   Componentes do site
   ============================================================= */

/* ------------------------------------------------- capa home --- */
/* Capa com foto: o véu escuro é o que garante a leitura do texto — sem
   ele o título some no céu claro do pôr do sol. Gradiente mais forte à
   esquerda, onde fica a palavra, e mais leve à direita, onde está o carro. */
.capa2 {
  position: relative; color: #fff; padding: 56px 0 64px;
  background:
    linear-gradient(95deg, rgba(7,24,39,.95) 0%, rgba(7,24,39,.88) 36%, rgba(7,24,39,.5) 62%, rgba(7,24,39,.78) 100%),
    url('/assets/img/capa.webp') center right / cover no-repeat,
    var(--noite-escuro);
}
.capa2-dentro { width: 100%; max-width: var(--medida); margin-inline: auto; padding: 0 24px;
  display: grid; grid-template-columns: 1.35fr .65fr; gap: 40px; align-items: center; }
.capa2 h1 { font-size: clamp(2.125rem, 4.4vw, 3rem); font-weight: 800; line-height: 1.08;
  letter-spacing: -1.5px; margin: 0 0 14px; }
.capa2 h1 em { font-style: normal; color: #4ade80; }
.capa2 p.lead { font-size: 18px; line-height: 1.5; color: #e2e8f0; margin: 0 0 26px; max-width: 600px; }
.busca2 { display: flex; background: #fff; border-radius: 10px; padding: 5px; max-width: 560px; height: 58px; }
.busca2 input { flex: 1; border: 0; outline: 0; font-size: 16px; padding: 0 14px;
  color: var(--cinza-700); background: none; }
.busca2 button { background: var(--verde); color: #fff; border: 0; border-radius: var(--raio-md);
  padding: 0 26px; font-size: 15px; font-weight: 700; cursor: pointer; }
.busca2 button:hover { background: var(--verde-escuro); }
.capa2 .exemplos { margin: 12px 0 0; font-size: 13px; color: #9fb3c4; }
.capa2-lista { display: grid; gap: 18px; }
.capa2-item { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: #dbe6ef;
  background: rgba(7,24,39,.62); border: 1px solid rgba(255,255,255,.08);
  padding: 12px 14px; border-radius: 10px; backdrop-filter: blur(3px); }
.capa2-item i { width: 40px; height: 40px; border-radius: var(--raio-lg); background: rgba(255,255,255,.08);
  display: grid; place-items: center; flex-shrink: 0; }
.capa2-item b { display: block; color: #fff; font-weight: 600; margin-bottom: 2px; }

/* ------------------------------------------- faixa de marcas --- */
.marcas2 { width: 100%; max-width: var(--medida); margin: -28px auto 0; padding: 0 24px;
  position: relative; z-index: 2; }
.marcas2-cx { background: #fff; border: 1px solid var(--cinza-200); border-radius: 10px;
  box-shadow: var(--sombra-md); padding: 16px 10px;
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; }
.marca2 { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 12px 6px; min-height: 62px; border-radius: 10px; text-decoration: none;
  color: var(--cinza-700); font-size: 12.5px; }
.marca2:hover { background: var(--cinza-100); }
.marca2 img { height: 32px; width: auto; max-width: 84px; object-fit: contain; }
.marca2 .sigla { width: 40px; height: 40px; border-radius: 50%; background: var(--noite-claro);
  display: grid; place-items: center; font-weight: 700; color: var(--noite); font-size: 13px; }
.marca2 .nome { font-size: 12.5px; color: var(--cinza-700); }

/* ----------------------------------- cartões de função (home) -- */
.servicos2 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.servico2 { background: #fff; border: 1px solid var(--cinza-200); border-radius: var(--raio-lg);
  box-shadow: var(--sombra); padding: 20px; display: flex; gap: 14px; align-items: flex-start;
  text-decoration: none; }
.servico2:hover { box-shadow: var(--sombra-md); }
.servico2 i { width: 48px; height: 48px; border-radius: var(--raio-lg); display: grid;
  place-items: center; flex-shrink: 0; }
.servico2 b { display: block; color: var(--noite-texto); font-size: 17px; margin-bottom: 3px; }
.servico2 span span { font-size: 14px; color: var(--cinza-700); line-height: 1.55; }
.ic-noite { background: var(--noite); color: #fff; }
.ic-verde { background: var(--verde); color: #fff; }
.ic-ouro  { background: var(--amarelo); color: #fff; }

/* ------------------------------ cartões de veículo, sem foto --- */
.veiculos2 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.veiculo2 { background: #fff; border: 1px solid var(--cinza-200); border-radius: 10px;
  box-shadow: var(--sombra); padding: 16px; text-decoration: none; display: block; }
.veiculo2:hover { box-shadow: var(--sombra-md); }
.veiculo2 .marca { font-size: 12.5px; color: var(--cinza-500); }
.veiculo2 .nome { display: block; font-size: 17px; font-weight: 700; color: var(--noite-texto);
  margin: 2px 0 10px; line-height: 1.35; }
.veiculo2 .preco { font-size: 20px; font-weight: 800; color: var(--noite-texto); letter-spacing: -.02em; }
.veiculo2 .var { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px;
  font-size: 13px; font-weight: 700; padding: 5px 9px; border-radius: var(--raio-sm); }
.var.sobe { background: var(--verde-claro); color: var(--verde-escuro); }
.var.cai  { background: var(--vermelho-claro); color: var(--vermelho); }

/* ------------------------------------------ faixa de números --- */
.numeros2 { display: grid; grid-template-columns: repeat(4, 1fr); background: #fff;
  border: 1px solid var(--cinza-200); border-radius: var(--raio-lg); overflow: hidden;
  box-shadow: var(--sombra); margin-top: 16px; }
.numero2 { padding: 20px 22px; }
.numero2 + .numero2 { border-left: 1px solid var(--cinza-200); }
.numero2 b { display: block; font-size: 20px; color: var(--noite-texto); letter-spacing: -.02em; }
.numero2 span { font-size: 13px; color: var(--cinza-700); }

/* ------------------------------------------- chamada escura ---- */
.chamada2 { margin-top: 40px; background: var(--noite); border-radius: var(--raio-xl);
  padding: 28px 30px; display: flex; align-items: center; gap: 24px; color: #fff; }
.chamada2 h3 { margin: 0 0 6px; font-size: 20px; font-weight: 700; }
.chamada2 p { margin: 0; color: #cbd5df; font-size: 14px; }
.chamada2 .btn-verde { margin-left: auto; background: var(--verde); color: #fff;
  border-radius: var(--raio-md); padding: 13px 22px; font-weight: 700; font-size: 15px;
  text-decoration: none; white-space: nowrap; }
.chamada2 .btn-verde:hover { background: var(--verde-escuro); }

/* ============================================================
   Página do veículo
   ============================================================ */
.abas2 { display: flex; gap: 30px; border-bottom: 1px solid var(--cinza-200);
  margin: 20px 0 22px; overflow-x: auto; }
.abas2 a { padding: 0 0 12px; font-size: 14px; color: var(--cinza-700); text-decoration: none;
  border-bottom: 3px solid transparent; white-space: nowrap; }
.abas2 a:hover { color: var(--noite-texto); }
.abas2 a.ativo { color: var(--verde-escuro); font-weight: 700; border-bottom-color: var(--verde); }

.topo-grade { display: grid; grid-template-columns: 1.3fr 1.5fr .8fr; gap: 16px; margin-bottom: 20px; }
.hero-valor { background: var(--noite); color: #fff; border-radius: var(--raio-lg);
  padding: 24px 22px; display: flex; flex-direction: column; justify-content: center; }
.hero-valor .rot { font-size: 13px; color: #cbd5e1; margin: 0 0 8px; }
.hero-valor .n { font-size: clamp(2.25rem, 5vw, 2.875rem); font-weight: 800;
  letter-spacing: -1.5px; line-height: 1; }
.hero-valor .pil { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--raio-md);
  padding: 6px 11px; font-size: 14px; font-weight: 700; margin-top: 14px; align-self: flex-start; }
.hero-valor .pil.cai { background: var(--vermelho); color: #fff; }
.hero-valor .pil.sobe { background: var(--verde); color: #fff; }
.hero-valor .btn-tab { margin-top: 18px; display: flex; align-items: center; gap: 10px;
  border: 1px solid rgba(255,255,255,.4); border-radius: var(--raio-md); padding: 11px 13px;
  color: #fff; font-size: 13px; font-weight: 600; text-decoration: none; }
.hero-valor .btn-tab:hover { background: rgba(255,255,255,.08); }

.mini-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mini { background: #fff; border: 1px solid var(--cinza-200); border-radius: var(--raio-lg);
  padding: 16px 18px; box-shadow: var(--sombra); }
.mini .rot { display: block; font-size: 12.5px; color: #526a80; line-height: 1.3; }
.mini b { display: block; font-size: 22px; font-weight: 700; color: var(--noite-texto);
  letter-spacing: -.02em; margin-top: 8px; }
.mini b.cai { color: var(--vermelho); }
.mini b.sobe { color: var(--verde-escuro); }
.mini small { display: block; font-size: 12.5px; color: var(--cinza-500); margin-top: 4px; }

.cx-comparar { background: #eaf8f3; border: 1px solid #d4eee3; border-radius: var(--raio-lg);
  padding: 18px; display: flex; flex-direction: column; }
.cx-comparar i { width: 44px; height: 44px; border-radius: var(--raio-lg); background: #d2f0e4;
  color: var(--verde-escuro); display: grid; place-items: center; margin-bottom: 12px; }
.cx-comparar b { color: var(--noite-texto); font-size: 15px; }
.cx-comparar p { font-size: 13px; color: var(--cinza-700); line-height: 1.5; margin: 6px 0 14px; }
.cx-comparar a { margin-top: auto; background: var(--noite); color: #fff; border-radius: var(--raio-md);
  padding: 12px 16px; font-size: 14px; font-weight: 700; text-decoration: none; text-align: center; }
.cx-comparar a:hover { background: var(--noite-medio); }

.insight { display: flex; gap: 10px; align-items: flex-start; font-size: 14px;
  color: var(--cinza-700); line-height: 1.55; margin: 0; }
.insight + .insight { margin-top: 14px; }
.insight i { width: 22px; height: 22px; border-radius: 50%; background: var(--verde);
  color: #fff; font-style: normal; font-size: 12px; font-weight: 800; flex-shrink: 0;
  display: grid; place-items: center; }

/* ============================================================
   Marcas e listas
   ============================================================ */
.marcas-grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.marca-cartao { display: flex; align-items: center; gap: 14px; background: #fff;
  border: 1px solid var(--cinza-200); border-radius: var(--raio-lg); padding: 16px 18px;
  text-decoration: none; box-shadow: var(--sombra); }
.marca-cartao:hover { box-shadow: var(--sombra-md); }
.marca-logo { width: 56px; display: grid; place-items: center; flex-shrink: 0; }
.marca-logo img { max-height: 34px; max-width: 56px; width: auto; object-fit: contain; }
.marca-logo .sigla { width: 40px; height: 40px; border-radius: 50%; background: var(--noite-claro);
  display: grid; place-items: center; font-weight: 700; color: var(--noite); font-size: 13px; }
.marca-txt b { display: block; font-size: 17px; font-weight: 700; color: var(--noite-texto); }
.marca-txt small { font-size: 14px; color: var(--cinza-500); }
.marca-seta { margin-left: auto; color: var(--cinza-300); font-size: 22px; line-height: 1; }

.cab-marca { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; }
.cab-marca-logo { width: 84px; height: 62px; display: grid; place-items: center; background: #fff;
  border: 1px solid var(--cinza-200); border-radius: var(--raio-lg); flex-shrink: 0; box-shadow: var(--sombra); }
.cab-marca-logo img { max-height: 40px; max-width: 64px; width: auto; object-fit: contain; }

.busca-pagina { display: flex; gap: 10px; max-width: 34rem; margin-bottom: 24px; }
.busca-pagina .form-input { height: 48px; }
.busca-pagina .btn-primary { height: 48px; }

/* ============================================================
   Responsivo
   ============================================================ */
@media (max-width: 62rem) {
  .capa2 { padding: 34px 0 40px;
    background:
      linear-gradient(180deg, rgba(7,24,39,.92) 0%, rgba(7,24,39,.86) 55%, rgba(7,24,39,.92) 100%),
      url('/assets/img/capa-celular.webp') center / cover no-repeat,
      var(--noite-escuro); }
  .capa2-dentro { grid-template-columns: 1fr; gap: 26px; }
  .capa2-lista { grid-template-columns: 1fr 1fr; }
  .servicos2, .stats-grid, .stats-grid.cols-3 { grid-template-columns: 1fr 1fr; }
  .veiculos2 { grid-template-columns: repeat(3, 1fr); }
  .numeros2 { grid-template-columns: 1fr 1fr; }
  .numero2:nth-child(3) { border-left: 0; }
  .marcas2-cx { grid-template-columns: repeat(6, 1fr); }
  .marcas-grade, .form-grid.cols-2 { grid-template-columns: 1fr 1fr; }
  .topo-grade, .show-layout, .grid-2, .grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 48rem) {
  .capa2-lista { grid-template-columns: 1fr; }
  .capa2 h1 { font-size: 2.125rem; line-height: 1.1; letter-spacing: -1px; }
  .busca2 { flex-direction: column; height: auto; gap: 8px; background: none; padding: 0; }
  .busca2 input { background: #fff; border-radius: 10px; height: 52px; }
  .busca2 button { width: 100%; height: 50px; }
  .servicos2, .veiculos2, .numeros2, .stats-grid, .stats-grid.cols-3,
  .marcas-grade, .mini-grade, .form-grid.cols-2 { grid-template-columns: 1fr; }
  .numero2 + .numero2 { border-left: 0; border-top: 1px solid var(--cinza-200); }
  .marcas2 { margin-top: -18px; }
  .marcas2-cx { grid-template-columns: repeat(4, 1fr); }
  .chamada2 { flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px; }
  .chamada2 .btn-verde { margin-left: 0; width: 100%; text-align: center; }
  .secao2-cab { flex-direction: column; align-items: flex-start; gap: 8px; }
  .page-actions { width: 100%; }
  .page-actions .btn-primary, .page-actions .btn-outline, .page-actions form { width: 100%; }
  .card-body, .card-header { padding: 16px; }
  .data-table thead th, .data-table tbody td { padding: 12px 14px; }
  .stat-value { font-size: 24px; }
}
html, body { max-width: 100vw; overflow-x: hidden; }

/* ============================================================
   Cabeçalho, rodapé e botões herdados do app.css
   ------------------------------------------------------------
   O app.css ainda desenha a barra, a fita e o rodapé. Aqui só o
   par de cores muda: verde na ação, vermelho reservado à queda.
   ============================================================ */
.topo { background: var(--noite); }
.topo-linha { background: linear-gradient(90deg, var(--verde), #4ade80 60%, var(--noite-medio)); }
.fita { background: #0e2a40; }
.nav a::after { background: var(--verde); }
.nav a[aria-current], .nav a:hover { color: #fff; }
.topo-conta { border-color: rgba(22,179,100,.65); color: #eafff1; }
.topo-conta:hover { background: rgba(22,179,100,.18); border-color: var(--verde); }
.pulso { background: var(--verde); }
.busca-topo { border-color: var(--verde); }
.rodape { background: var(--noite-escuro); border-top: 2px solid var(--verde); }

/* botão base do app.css */
.btn { background: var(--verde); border-color: var(--verde); border-radius: var(--raio-md);
  font-weight: 700; font-size: 15px; }
.btn:hover { background: var(--verde-escuro); border-color: var(--verde-escuro); }
.btn--fraco { background: #fff; color: var(--noite-texto); border: 1px solid var(--cinza-300); }
.btn--fraco:hover { background: var(--cinza-100); }
.btn--laudo { background: var(--noite); border-color: var(--noite); }
.btn--laudo:hover { background: var(--noite-medio); border-color: var(--noite-medio); }

/* chips, pílulas e tabelas antigas que continuam em uso */
.chip { border-radius: 99px; border-color: var(--cinza-300); color: var(--cinza-700); }
.chip:hover { border-color: var(--verde); color: var(--verde-escuro); box-shadow: none; }
.chip[aria-current] { background: var(--noite); border-color: var(--noite); color: #fff; }
.anos thead th { background: var(--cinza-100); color: var(--noite-texto); font-weight: 600; font-size: 13px; }
.anos tbody td { border-bottom: 1px solid var(--cinza-200); }
.anos tbody tr:hover { background: #edf2f8; }
.tabela-envelope { border: 0; box-shadow: none; }
.grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.grade .modelo { background: #fff; border: 1px solid var(--cinza-200); border-radius: var(--raio-lg);
  box-shadow: var(--sombra); padding: 18px; }
.grade .modelo:hover { box-shadow: var(--sombra-md); }
.modelo-nome { font-size: 17px; font-weight: 700; color: var(--noite-texto); }
.modelo-sub { font-size: 14px; color: var(--cinza-500); }
@media (max-width: 62rem) { .grade { grid-template-columns: 1fr 1fr; } }
@media (max-width: 40rem) { .grade { grid-template-columns: 1fr; } }

/* barra do quanto sobrou
   Antes os dois textos ficavam sobrepostos ao trecho escuro quando a
   perda era pequena. Agora são dois blocos de verdade: escuro para o
   que sobrou, vermelho para o que evaporou, letra branca nos dois. */
.barra { margin: 0; }
.barra .trilho { display: flex; height: 46px; border-radius: 10px; overflow: hidden;
  background: var(--vermelho); }
.barra .restou { display: flex; align-items: center; padding: 0 .9rem; min-width: 0;
  background: var(--noite); color: #fff; font-size: 13px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; }
.barra .sumiu { display: flex; align-items: center; justify-content: flex-end; flex: 1;
  padding: 0 .9rem; min-width: 0; color: #fff; font-size: 13px; font-weight: 700;
  white-space: nowrap; overflow: hidden; }
.barra .leg { display: flex; justify-content: space-between; gap: .5rem; margin: .6rem 0 0;
  font-size: 13px; color: var(--cinza-500); }
@media (max-width: 40rem) {
  .barra .trilho { height: 42px; }
  .barra .restou, .barra .sumiu { font-size: 12px; padding: 0 .6rem; }
}

/* aviso de cookies */
.consent .btn, .consent-aceitar { background: var(--verde); border-color: var(--verde); }
.consent .btn:hover { background: var(--verde-escuro); }

/* ------------------------------------------------- correções --- */
/* o .btn do app.css vem depois e pintava de verde os secundários */
.btn.btn-soft-blue { background: var(--noite-claro); color: var(--noite); border-color: transparent; }
.btn.btn-soft-blue:hover { background: #dbe8f3; }
.btn.btn-outline { background: #fff; color: var(--noite-texto); border: 1px solid var(--cinza-300); }
.btn.btn-outline:hover { background: var(--cinza-100); }
.btn.btn-danger { background: var(--vermelho); border-color: var(--vermelho); color: #fff; }
.btn-primary, .btn-outline, .btn-danger, .btn-soft-blue, .btn-secondary, .btn { white-space: nowrap; }

/* valores e datas não quebram no meio */
.data-table td:not(:first-child) { white-space: nowrap; }
.data-table td:first-child { min-width: 14rem; }
@media (max-width: 48rem) {
  .data-table td:first-child, .data-table th:first-child { min-width: 13rem; }
  .entity-cell { gap: 10px; }
  .entity-avatar { width: 32px; height: 32px; font-size: 11px; }
}

/* ------------------------------------------------- gráfico ----- */
/* Linha da tabela em vermelho, como a especificação define para
   desvalorização; a corrigida fica neutra, para não competir. */
.serie-nominal { stroke: var(--vermelho); stroke-width: 2.4; fill: none;
  stroke-linejoin: round; stroke-linecap: round; }
.serie-corrigida { stroke: var(--cinza-500); stroke-width: 1.75; fill: none; stroke-dasharray: 6 4; }
.eixo { stroke: var(--cinza-200); stroke-width: 1; }
.rotulo { fill: var(--cinza-500); font-size: 11px; }
.gr-marca { fill: var(--vermelho); stroke: #fff; stroke-width: 1.6; }
.gr-ponto { fill: var(--vermelho); stroke: #fff; stroke-width: 2; opacity: 0; }
.gr-ponto--c { fill: var(--cinza-500); }
.gr-guia { stroke: var(--cinza-300); stroke-width: 1; opacity: 0; }
.gr-alvo:hover .gr-guia { opacity: .8; }
.gr-alvo:hover .gr-ponto { opacity: 1; }
.gr-tip { border: 1px solid var(--cinza-200); box-shadow: var(--sombra-md);
  border-radius: 8px; background: #fff; }

/* legenda e balão do gráfico */
.chave.n i { background: var(--vermelho); }
.chave.c i { background: var(--cinza-500); }
.chave.p i { background: var(--vermelho); opacity: .18; height: 11px; border-radius: 2px; }
.gr-tip { padding: 10px 12px; min-width: 0; }
.tip-ano { display: block; font-size: 12px; color: var(--cinza-500); }
.tip-valor { display: block; font-size: 17px; font-weight: 800; color: var(--noite-texto);
  letter-spacing: -.02em; margin-top: 2px; white-space: nowrap; }
.tip-linha { display: block; font-size: 12.5px; color: var(--cinza-500); margin-top: 4px; white-space: nowrap; }
.tip-linha b { color: var(--cinza-700); font-weight: 600; }
.tip-perda b { color: var(--vermelho); }

/* ============================================================
   Rodapé
   ============================================================ */
.rodape { background: var(--noite-escuro); border-top: 2px solid var(--verde); color: #cbd5df; }
.rodape .dentro { padding-block: 40px 20px; }
.rodape-grade { display: grid; grid-template-columns: 1.5fr 1fr 1.25fr 1.05fr auto 1.4fr; gap: 28px; }
.rodape-marca .marca img { height: 56px; width: auto; }
.rodape .sobre { font-size: 13.5px; line-height: 1.7; color: #9fb3c4; margin: 14px 0 0; max-width: 34ch; }
.rodape .selo-rodape { display: inline-block; margin-top: 12px; font-size: 11.5px;
  letter-spacing: .06em; text-transform: uppercase; color: #9fb3c4;
  border: 1px solid rgba(255,255,255,.14); border-radius: 99px; padding: 5px 12px; }
.rodape h4 { color: #fff; font-size: 14px; font-weight: 700; margin: 0 0 12px; }
.rodape ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.rodape a { color: #cbd5df; text-decoration: none; font-size: 14px; }
.rodape a:hover { color: var(--verde); }

.rodape-redes { display: flex; gap: 10px; }
.rodape-redes a { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
  background: rgba(255,255,255,.06); color: #cbd5df; }
.rodape-redes a:hover { background: var(--verde); color: #fff; }
.rodape-redes svg { width: 20px; height: 20px; }

.rodape-boletim form { display: flex; background: #fff; border-radius: var(--raio-md); padding: 4px;
  max-width: 24rem; }
.rodape-boletim input { flex: 1; min-width: 0; border: 0; outline: 0; background: none;
  padding: 0 12px; font-size: 14px; color: var(--noite-texto); height: 42px; }
.rodape-boletim button { width: 44px; height: 42px; border: 0; border-radius: 6px;
  background: var(--verde); color: #fff; display: grid; place-items: center; cursor: pointer; }
.rodape-boletim button:hover { background: var(--verde-escuro); }
.rodape-boletim button svg { width: 18px; height: 18px; }
.rodape-nota { font-size: 12.5px; color: #9fb3c4; margin: 10px 0 0; line-height: 1.6; max-width: 32ch; }

.rodape-base { margin-top: 28px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.1);
  display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; }
.rodape-base p { margin: 0; font-size: 12.5px; color: #8ea5b8; }
.rodape-aviso { max-width: 62ch; text-align: right; }

@media (max-width: 62rem) {
  .rodape-grade { grid-template-columns: 1fr 1fr; gap: 28px; }
  .rodape-marca, .rodape-boletim { grid-column: 1 / -1; }
  .rodape-base { flex-direction: column; }
  .rodape-aviso { text-align: left; }
}
@media (max-width: 40rem) {
  .rodape-grade { grid-template-columns: 1fr; }
}
.rodape-grade.sem-redes { grid-template-columns: 1.5fr 1fr 1.25fr 1.05fr 1.4fr; }
@media (max-width: 62rem) { .rodape-grade.sem-redes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 40rem) { .rodape-grade.sem-redes { grid-template-columns: 1fr; } }

/* ============================================================
   Padronização do fundo e das superfícies
   ------------------------------------------------------------
   O app.css ainda pinta a página de creme (--papel). Nas páginas
   do design system o fundo é cinza-azulado e o conteúdo vive em
   cards brancos, como a especificação define.
   ============================================================ */
body { background: var(--papel-site); color: var(--cinza-700); }
.secao, .secao--curta { background: transparent; }

/* superfícies antigas do app.css que ainda aparecem */
.tabela-envelope, .painel, .caso, .indice, .faixas-grade, .pc-bloco, .pc-cartao {
  background: #fff; border-color: var(--cinza-200);
}
.painel { border-radius: var(--raio-lg); box-shadow: var(--sombra); }
.chip { background: #fff; }
.chip[aria-current] { background: var(--noite); border-color: var(--noite); color: #fff; }
.faixas-grade a, .faixa-livre { background: #fff; border-color: var(--cinza-200); }
.conteudo-md, .prosa, .pagina-texto { background: #fff; border: 1px solid var(--cinza-200);
  border-radius: var(--raio-lg); box-shadow: var(--sombra); padding: 28px 30px; }
.destaque, .nota, .aviso-caixa { background: var(--cinza-100); border-color: var(--cinza-200); }

/* linhas destacadas das tabelas: o vermelho cheio competia com os valores */
.anos tbody tr.destaque, .dt tr.destaque { background: var(--vermelho-claro); }
.anos tbody tr.destaque td { color: var(--noite-texto); }

/* variação dentro de tabela antiga */
.anos .sobe, .sobe { color: var(--verde-escuro); }
.anos .desce, .desce { color: var(--vermelho); }

/* bloco "Leitura do mês": era caixa escura com texto branco; agora é
   card claro, então o texto precisa voltar ao azul de título */
.destaque { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center;
  background: #fff; border: 1px solid var(--cinza-200); border-radius: var(--raio-lg);
  box-shadow: var(--sombra); padding: 28px 30px; color: var(--cinza-700); overflow: hidden; }
.destaque::after { display: none; }            /* o halo dourado era do fundo escuro */
@media (max-width: 44rem) { .destaque { grid-template-columns: 1fr; } }
.destaque .rot { color: var(--cinza-500); letter-spacing: .08em; text-transform: uppercase;
  font-size: 12px; margin: 0 0 6px; }
.destaque h3 { color: var(--noite-texto); font-size: 22px; line-height: 1.3; margin: 0 0 10px; }
.destaque p { color: var(--cinza-700); font-size: 15px; line-height: 1.7; margin: 0; }
.destaque b { color: var(--vermelho); }
.destaque .cta { color: var(--verde-escuro); font-weight: 600;
  border-bottom-color: rgba(7,148,85,.35); }
.destaque .medidor .centro b { color: var(--noite-texto); }
.destaque .medidor .centro span { color: var(--cinza-500); }

/* tabelas antigas: o texto encostava na borda do card */
.anos th, .anos td { padding: 13px 20px; }
.anos th:first-child, .anos td:first-child { padding-left: 24px; }
.anos th:last-child, .anos td:last-child { padding-right: 24px; }
@media (max-width: 48rem) {
  .anos th, .anos td { padding: 12px 14px; }
  .anos th:first-child, .anos td:first-child { padding-left: 16px; }
  .anos th:last-child, .anos td:last-child { padding-right: 16px; }
}

/* ============================================================
   Tabela de versões — acerto final
   ------------------------------------------------------------
   As regras do app.css usam "table.anos", que vence as minhas com
   classe só. Repetidas aqui com a mesma especificidade, depois.
   ============================================================ */
table.anos th, table.anos td { padding: 14px 20px; }
table.anos th:first-child, table.anos td:first-child { padding-left: 24px; }
table.anos th:last-child,  table.anos td:last-child  { padding-right: 24px; }
table.anos thead th { background: var(--cinza-100); color: var(--noite-texto);
  font-size: 13px; font-weight: 600; border-bottom: 1px solid var(--cinza-200); }
table.anos thead th:has(.ord--ativa) { background: var(--cinza-200); }
table.anos tbody tr { border-bottom: 1px solid var(--cinza-200); }
table.anos tbody tr:hover { background: #edf2f8; }

/* linha em destaque: fundo suave e um fio na lateral, sem tingir a linha inteira */
table.anos tr.atual { background: var(--noite-claro); }
table.anos tr.forte-alta  { background: var(--verde-claro); }
table.anos tr.forte-baixa { background: var(--vermelho-claro); }
table.anos tr.forte-alta  td:first-child { box-shadow: inset 4px 0 0 var(--verde); padding-left: 24px; }
table.anos tr.forte-baixa td:first-child { box-shadow: inset 4px 0 0 var(--vermelho); padding-left: 24px; }
table.anos tr.forte-alta  td:nth-child(3),
table.anos tr.forte-baixa td:nth-child(3) { color: var(--noite-texto); }
table.anos tr.forte-alta td, table.anos tr.forte-baixa td { border-bottom-color: var(--cinza-200); }

@media (max-width: 48rem) {
  table.anos th, table.anos td { padding: 12px 14px; }
  table.anos th:first-child, table.anos td:first-child,
  table.anos tr.forte-alta td:first-child, table.anos tr.forte-baixa td:first-child { padding-left: 16px; }
  table.anos th:last-child, table.anos td:last-child { padding-right: 16px; }
}

/* ============================================================
   Links
   ------------------------------------------------------------
   O app.css pinta todo link de tijolo, que na paleta nova virou a
   cor da queda de valor. Link vermelho num site de desvalorização
   confunde: o olho lê "caiu". Padrão novo: azul de título, verde
   no hover, sublinhado só onde ele ajuda a identificar o link.
   ============================================================ */
a { color: var(--noite-texto); text-decoration: none; }
a:hover { color: var(--verde-escuro); text-decoration: none; }

/* dentro de texto corrido o sublinhado fica: é o que marca o link */
.texto a, .prosa a, .conteudo-md a, .destaque p a, .faq a, .cdi-nota a, .cdi-ressalva a {
  color: var(--verde-escuro); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(7,148,85,.4);
}
.texto a:hover, .prosa a:hover, .conteudo-md a:hover { text-decoration-color: var(--verde-escuro); }

/* listas e tabelas: nome em azul, some o sublinhado */
.anos a, .dt a, .grade a, .modelo, .rank, .caso, .marca-cartao, .veiculo2 { color: var(--noite-texto); }
.anos a:hover, .dt a:hover, .grade a:hover { color: var(--verde-escuro); text-decoration: none; }
.trilha a, .breadcrumbs a { color: var(--cinza-500); }
.trilha a:hover, .breadcrumbs a:hover { color: var(--noite-texto); }
.comparar-cta a, .mais, .card-link { color: var(--verde-escuro); font-weight: 600; }
.rodape a { color: #cbd5df; }
.rodape a:hover { color: var(--verde); }
.topo a, .nav a, .fita a { color: inherit; }

/* título do veículo: um pouco maior e com a logo da marca ao lado */
.page-title.titulo-veiculo { font-size: clamp(1.75rem, 3.2vw, 2.125rem); line-height: 1.15;
  letter-spacing: -.8px; font-weight: 800; }
.cab-veiculo-logo { width: 74px; height: 56px; flex-shrink: 0; display: grid; place-items: center;
  background: #fff; border: 1px solid var(--cinza-200); border-radius: var(--raio-lg);
  box-shadow: var(--sombra); }
.cab-veiculo-logo img { max-height: 34px; max-width: 56px; width: auto; object-fit: contain; }
@media (max-width: 48rem) {
  .cab-veiculo-logo { width: 58px; height: 46px; }
  .cab-veiculo-logo img { max-height: 26px; max-width: 44px; }
  .page-title.titulo-veiculo { font-size: 1.625rem; }
}

/* ------------------------------------------------- correções --- */
/* Botão é botão, não link: a regra de hover dos links pintava o texto
   de verde sobre o fundo verde. */
a.btn, a.btn-primary, a.btn-outline, a.btn-danger, a.btn-soft-blue, a.btn-secondary,
a.btn-verde, a.cx-comparar-acao { text-decoration: none; }
a.btn-primary, a.btn-primary:hover, a.btn-primary:visited,
a.btn.btn-primary, a.btn.btn-primary:hover { color: #fff; }
a.btn-danger, a.btn-danger:hover { color: #fff; }
a.btn-outline, a.btn-outline:hover, a.btn-secondary, a.btn-secondary:hover { color: var(--noite-texto); }
a.btn-soft-blue, a.btn-soft-blue:hover { color: var(--noite); }
.chamada2 .btn-verde, .chamada2 .btn-verde:hover, .cx-comparar a, .cx-comparar a:hover { color: #fff; }
.hero-valor .btn-tab, .hero-valor .btn-tab:hover { color: #fff; }

/* Conta: mais contraste entre o fundo e os cards */
.vdc-base { background: #eef2f7; }
.conta-conteudo { background: #eef2f7; }
.conta-conteudo .card, .conta-conteudo .stat-card {
  border-color: #dde5ee; box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 6px 18px rgba(15,23,42,.06);
}
.conta-conteudo .card-header { background: #fff; border-bottom-color: var(--cinza-200); }
.conta-conteudo .data-table thead th { background: #f4f7fa; }
.conta-conteudo .stat-card { padding: 22px; }
.conta-conteudo .page-header { padding-bottom: 4px; }

/* Fundo do site um tom mais firme: com #F6F8FA os cards brancos quase
   sumiam. #EEF2F7 é o mesmo da conta, então as duas áreas combinam. */
body { background: #eef2f7; }
.card, .stat-card, .servico2, .veiculo2, .mini, .marca-cartao, .marcas2-cx, .numeros2,
.grade .modelo, .painel, .destaque, .tabela-envelope {
  border-color: #dde5ee;
}

/* grade 1,5fr + 1fr usada na página do veículo; vira coluna única no celular */
.grid-larga { grid-template-columns: 1.5fr 1fr; align-items: start; }
@media (max-width: 62rem) { .grid-larga { grid-template-columns: 1fr; } }

/* Celular: menos aperto dentro dos cards e nos títulos */
@media (max-width: 48rem) {
  .card-header { flex-wrap: wrap; gap: 4px; }
  .card-header .table-info { font-size: 12.5px; }
  .card-title { font-size: 18px; }
  .insight { font-size: 13.5px; }
  .barra .restou, .barra .sumiu { font-size: 12px; }
  .abas2 { gap: 20px; margin: 16px 0 18px; }
  .hero-valor { padding: 20px 18px; }
  .mini { padding: 14px 16px; }
  .compartilhar { flex-wrap: wrap; }
}

/* nome do veículo nas tabelas: duas linhas no máximo, sem picotar */
.data-table td:first-child .entity-name,
.data-table td:first-child .entity-link,
.dt td:first-child { line-height: 1.35; }
.table-responsive { -webkit-overflow-scrolling: touch; }

/* ============================================================
   Conta — barra superior e menu
   ============================================================ */
.conta-topo { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.conta-busca { flex: 1; max-width: 520px; display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--cinza-200); border-radius: var(--raio-md);
  padding: 0 14px; height: 46px; box-shadow: var(--sombra); color: var(--cinza-500); }
.conta-busca svg { width: 18px; height: 18px; flex-shrink: 0; }
.conta-busca input { flex: 1; min-width: 0; border: 0; outline: 0; background: none;
  font-size: 15px; color: var(--noite-texto); }
.conta-usuario { margin-left: auto; display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--cinza-200); border-radius: var(--raio-md);
  padding: 7px 14px 7px 8px; box-shadow: var(--sombra); }
.conta-usuario .av { width: 34px; height: 34px; border-radius: 50%; background: var(--noite);
  color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.conta-usuario-txt b { display: block; font-size: 14px; color: var(--noite-texto); line-height: 1.2; }
.conta-usuario-txt small { font-size: 12px; color: var(--cinza-500); }
.conta-menu-sep { display: block; height: 1px; background: rgba(255,255,255,.1); margin: 10px 12px; }
@media (max-width: 62rem) {
  /* No celular a busca e o botão de tema dividem a primeira linha, e o
     cartão do usuário vem embaixo — antes o botão sozinho ocupava uma
     linha inteira. */
  .conta-topo { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
  .conta-busca { max-width: none; }
  .conta-usuario { grid-column: 1 / -1; margin-left: 0; }
}

/* ---------- conta: cartões e listas da visão geral ---------- */
.stat-topo { display: flex; align-items: flex-start; gap: 14px; }
.stat-de { font-size: 15px; font-weight: 500; color: var(--cinza-500); }
.uso { display: block; height: 6px; border-radius: 99px; background: var(--cinza-200); overflow: hidden;
  min-width: 90px; }
.uso i { display: block; height: 100%; border-radius: 99px; background: var(--verde); }

.lista-acoes { list-style: none; margin: 0; padding: 0; }
.lista-acoes li + li { border-top: 1px solid var(--cinza-200); }
.lista-acoes a { display: flex; align-items: center; gap: 12px; padding: 14px 20px;
  font-size: 14px; color: var(--noite-texto); }
.lista-acoes a:hover { background: #f7fafc; color: var(--verde-escuro); }
.lista-acoes svg { width: 18px; height: 18px; color: var(--verde-escuro); flex-shrink: 0; }
.lista-acoes i { margin-left: auto; font-style: normal; color: var(--cinza-300); font-size: 20px; }

/* ---------- abas numeradas do gráfico da conta ---------- */
.abas-num { display: flex; gap: 6px; }
.aba-num { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--cinza-200);
  background: #fff; color: var(--cinza-700); font-size: 13px; font-weight: 700; cursor: pointer; }
.aba-num:hover { border-color: var(--verde); color: var(--verde-escuro); }
.aba-num.ativo { background: var(--verde); border-color: var(--verde); color: #fff; }
.graf-nome { margin: 0 0 10px; font-size: 13.5px; }
.graf-item .gr-caixa { position: relative; }

/* ---------- gráfico: versões larga e compacta ----------
   Estas regras vivem no app.css, que a conta não carrega; sem elas os
   dois SVGs apareciam um embaixo do outro. */
.gr-caixa { position: relative; margin-top: .25rem; }
.gr-caixa svg { width: 100%; height: auto; display: block; }
.gr-compacta { display: none; }
@media (max-width: 48rem) {
  .gr-larga { display: none; }
  .gr-compacta { display: block; }
}
.gr-tip { position: absolute; z-index: 5; pointer-events: none; background: #fff;
  color: var(--cinza-700); border: 1px solid var(--cinza-200); border-radius: 10px;
  padding: 10px 12px; min-width: 10rem; box-shadow: var(--sombra-md);
  font-size: 13px; line-height: 1.5; transform: translate(-50%, -100%); margin-top: -14px; }
.gr-tip.abaixo { transform: translate(-50%, 0); margin-top: 14px; }

/* ---------- título de card com ícone (conta) ---------- */
.card-title.com-ic { display: flex; align-items: center; gap: 10px; }
.tit-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; }
.tit-ic svg { width: 17px; height: 17px; }
.tit-ic.blue { background: var(--noite-claro); color: var(--noite); }
.tit-ic.green, .tit-ic.teal { background: var(--verde-claro); color: var(--verde-escuro); }
.tit-ic.red { background: var(--vermelho-claro); color: var(--vermelho); }
.tit-ic.amarelo { background: #fef5e5; color: #b47714; }
@media (max-width: 48rem) { .tit-ic { width: 26px; height: 26px; } .tit-ic svg { width: 15px; height: 15px; } }

/* trecho do gráfico pela direção: verde quando sobe, vermelho quando cai */
.serie-nominal { stroke-width: 2.4; fill: none; stroke-linecap: round; }
.serie-nominal.sobe  { stroke: var(--verde); }
.serie-nominal.desce { stroke: var(--vermelho); }
.gr-marca.sobe  { fill: var(--verde); stroke: #fff; stroke-width: 1.6; }
.gr-marca.desce { fill: var(--vermelho); stroke: #fff; stroke-width: 1.6; }

/* ---------- paginação ---------- */
.paginacao { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pag { min-width: 34px; height: 34px; padding: 0 10px; border-radius: var(--raio-md);
  border: 1px solid var(--cinza-200); background: #fff; color: var(--noite-texto);
  display: inline-grid; place-items: center; font-size: 13px; font-weight: 600; text-decoration: none; }
.pag:hover { border-color: var(--verde); color: var(--verde-escuro); }
.pag.ativa { background: var(--verde); border-color: var(--verde); color: #fff; }
.pag-info { margin-left: auto; font-size: 12.5px; color: var(--cinza-500); }

/* ---------- página de planos ---------- */
.planos-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.plano { position: relative; background: #fff; border: 1px solid var(--cinza-200);
  border-radius: var(--raio-lg); box-shadow: var(--sombra); padding: 26px 24px;
  display: flex; flex-direction: column; }
/* "plano--destaque": a classe .destaque sozinha é do bloco da página do veículo e deformava este cartão */
.plano--destaque { border-color: var(--verde); box-shadow: var(--sombra-md); }
.plano-selo { position: absolute; top: -11px; left: 24px; background: var(--verde); color: #fff;
  border-radius: 99px; padding: 4px 12px; font-size: 12px; font-weight: 700; }
.plano h2 { margin: 0 0 8px; font-size: 20px; color: var(--noite-texto); }
.plano-preco { margin: 0 0 6px; font-size: 32px; font-weight: 800; letter-spacing: -.03em;
  color: var(--noite-texto); }
.plano-preco small { font-size: 14px; font-weight: 500; color: var(--cinza-500); }
.plano-desc { margin: 0 0 16px; font-size: 14px; color: var(--cinza-700); line-height: 1.6; }
.plano-itens { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 10px; }
.plano-itens li { position: relative; padding-left: 26px; font-size: 14px; color: var(--cinza-700); }
.plano-itens li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 18px; height: 18px;
  border-radius: 50%; background: var(--verde-claro); color: var(--verde-escuro);
  display: grid; place-items: center; font-size: 11px; font-weight: 800; }
.plano .btn-block { margin-top: auto; }

/* ---------- diálogo ---------- */
.modal { border: 0; padding: 0; border-radius: var(--raio-xl); width: min(560px, 92vw);
  background: #fff; box-shadow: var(--sombra-lg); color: var(--cinza-700); }
.modal::backdrop { background: rgba(7,24,39,.55); }
.modal-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 20px; border-bottom: 1px solid var(--cinza-200); }
.modal-corpo { padding: 20px; }
.modal-pe { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 20px;
  border-top: 1px solid var(--cinza-200); background: #fcfdfe;
  border-radius: 0 0 var(--raio-xl) var(--raio-xl); }
.modal-x { border: 0; background: none; font-size: 24px; line-height: 1; cursor: pointer;
  color: var(--cinza-500); padding: 0 4px; }
.modal-x:hover { color: var(--noite-texto); }

/* ============================================================
   Tema escuro da conta
   ------------------------------------------------------------
   Só a área logada. O site público continua claro: ali o que manda
   é leitura rápida e busca, não conforto de uso prolongado.
   O menu lateral não muda — já era escuro.
   ============================================================ */
.conta-tema { width: 42px; height: 42px; border-radius: var(--raio-md); cursor: pointer;
  background: #fff; border: 1px solid var(--cinza-200); box-shadow: var(--sombra);
  display: grid; place-items: center; color: var(--cinza-700); }
.conta-tema:hover { color: var(--noite-texto); border-color: var(--cinza-300); }
.conta-tema svg { width: 18px; height: 18px; }
.conta-tema .ic-lua { display: none; }
[data-tema="escuro"] .conta-tema .ic-sol { display: none; }
[data-tema="escuro"] .conta-tema .ic-lua { display: block; }

[data-tema="escuro"] {
  --papel-site: #0e1c2c;
  --noite-texto: #e8eef5;      /* títulos passam a ser claros */
  --cinza-900: #f1f5f9;
  --cinza-700: #b9c7d6;
  --cinza-500: #8ba0b5;
  --cinza-300: #33475e;
  --cinza-200: #24384f;
  --cinza-100: #1a2c42;
  --noite-claro: #1c3350;
  --sombra:    0 2px 8px rgba(0,0,0,.30);
  --sombra-md: 0 8px 24px rgba(0,0,0,.38);
  --sombra-lg: 0 20px 50px rgba(0,0,0,.50);
  background: #0e1c2c;
  color: #b9c7d6;
}

/* superfícies */
[data-tema="escuro"] .card,
[data-tema="escuro"] .stat-card,
[data-tema="escuro"] .mini,
[data-tema="escuro"] .conta-busca,
[data-tema="escuro"] .conta-usuario,
[data-tema="escuro"] .conta-tema,
[data-tema="escuro"] .modal,
[data-tema="escuro"] .grade .modelo { background: #152941; border-color: #24384f; }
[data-tema="escuro"] .card-header { background: #152941; border-bottom-color: #24384f; }
[data-tema="escuro"] .card-footer { background: #11243a; border-top-color: #24384f; }
[data-tema="escuro"] .modal-pe { background: #11243a; border-top-color: #24384f; }
[data-tema="escuro"] .modal-cab { border-bottom-color: #24384f; }
[data-tema="escuro"] .conta-conteudo { background: #0e1c2c; }
[data-tema="escuro"] .conta-conteudo .card,
[data-tema="escuro"] .conta-conteudo .stat-card { border-color: #24384f;
  box-shadow: 0 1px 2px rgba(0,0,0,.25), 0 6px 18px rgba(0,0,0,.30); }
[data-tema="escuro"] .conta-conteudo .card-header { background: #152941; }

/* texto */
[data-tema="escuro"] .card-title,
[data-tema="escuro"] .page-title,
[data-tema="escuro"] .stat-value,
[data-tema="escuro"] .entity-name,
[data-tema="escuro"] .entity-link,
[data-tema="escuro"] .text-primary,
[data-tema="escuro"] .font-semibold,
[data-tema="escuro"] .conta-usuario-txt b,
[data-tema="escuro"] h1, [data-tema="escuro"] h2, [data-tema="escuro"] h3 { color: #e8eef5; }
[data-tema="escuro"] .text-muted, [data-tema="escuro"] .form-hint,
[data-tema="escuro"] .stat-label, [data-tema="escuro"] .stat-footer,
[data-tema="escuro"] .entity-meta, [data-tema="escuro"] .table-info { color: #8ba0b5; }
[data-tema="escuro"] .text-secondary, [data-tema="escuro"] .insight { color: #b9c7d6; }

/* tabelas */
[data-tema="escuro"] .data-table thead th,
[data-tema="escuro"] .conta-conteudo .data-table thead th { background: #11243a; color: #d5e0ec; }
[data-tema="escuro"] .data-table tbody td { border-bottom-color: #24384f; color: #b9c7d6; }
[data-tema="escuro"] .data-table tbody tr:hover { background: #1a3050; }
[data-tema="escuro"] .stat-footer, [data-tema="escuro"] .info-row,
[data-tema="escuro"] .summary-item { border-color: #24384f; }

/* controles */
/* campos chapados são do painel da conta; no site público o campo
   tem borda (a regra vazava e sumia com a moldura) */
/* campo chapado é do painel da conta; no site público ele tem moldura
   (a regra vazava e o campo sumia no escuro) */
body:not(.site)[data-tema="escuro"] .form-input,
body:not(.site)[data-tema="escuro"] .form-select,
body:not(.site)[data-tema="escuro"] .conta-busca input { background: transparent; border: 0; color: #e8eef5; }
.site[data-tema="escuro"] .form-input,
.site[data-tema="escuro"] .form-select { border: 1px solid var(--dk-borda); color: #e8eef5; }
[data-tema="escuro"] .form-input::placeholder,
[data-tema="escuro"] .conta-busca input::placeholder { color: #6f869d; }
.site[data-tema="escuro"] .form-label { color: #c9d6e2; }
[data-tema="escuro"] .form-label { color: #d5e0ec; }
[data-tema="escuro"] .btn-outline, [data-tema="escuro"] .btn.btn-outline,
[data-tema="escuro"] .btn--fraco { background: #1a3050; color: #e8eef5; border-color: #2c435c; }
[data-tema="escuro"] .btn-outline:hover, [data-tema="escuro"] .btn.btn-outline:hover { background: #214064; }
[data-tema="escuro"] .btn.btn-soft-blue { background: #1e3b5c; color: #cfe0f2; }
[data-tema="escuro"] .action-btn { background: #1a3050; border-color: #2c435c; color: #8ba0b5; }
[data-tema="escuro"] .pag { background: #1a3050; border-color: #2c435c; color: #e8eef5; }
[data-tema="escuro"] .uso { background: #24384f; }

/* avisos, badges e blocos coloridos: fundo fica translúcido para
   manter o sentido da cor sem estourar contraste no escuro */
[data-tema="escuro"] .badge.success, [data-tema="escuro"] .var.sobe,
[data-tema="escuro"] .stat-trend.up { background: rgba(22,179,100,.18); color: #4ade80; }
[data-tema="escuro"] .badge.danger, [data-tema="escuro"] .var.cai,
[data-tema="escuro"] .stat-trend.down { background: rgba(229,72,77,.18); color: #f98a8d; }
[data-tema="escuro"] .badge.info, [data-tema="escuro"] .badge.neutral,
[data-tema="escuro"] .badge { background: #1e3350; color: #b9c7d6; }
[data-tema="escuro"] .badge.warning { background: rgba(244,183,64,.18); color: #f4b740; }
[data-tema="escuro"] .alert.info { background: #16304d; border-color: #24486f; color: #d5e0ec; }
[data-tema="escuro"] .alert.success { background: rgba(22,179,100,.12); border-color: rgba(22,179,100,.3); }
[data-tema="escuro"] .alert.danger { background: rgba(229,72,77,.12); border-color: rgba(229,72,77,.3); }
[data-tema="escuro"] .tit-ic.blue { background: #1e3350; color: #9fc0e3; }
[data-tema="escuro"] .tit-ic.green, [data-tema="escuro"] .tit-ic.teal { background: rgba(22,179,100,.16); color: #4ade80; }
[data-tema="escuro"] .tit-ic.red { background: rgba(229,72,77,.16); color: #f98a8d; }
[data-tema="escuro"] .tit-ic.amarelo { background: rgba(244,183,64,.16); color: #f4b740; }
[data-tema="escuro"] .stat-icon { background: #1e3350; color: #cfe0f2; }
[data-tema="escuro"] .stat-icon.red { background: rgba(229,72,77,.16); color: #f98a8d; }
[data-tema="escuro"] .stat-icon.green, [data-tema="escuro"] .stat-icon.teal {
  background: rgba(22,179,100,.16); color: #4ade80; }
[data-tema="escuro"] .stat-icon.orange { background: rgba(244,183,64,.16); color: #f4b740; }
[data-tema="escuro"] .empty-icon { background: #1e3350; color: #8ba0b5; }
[data-tema="escuro"] .lista-acoes a:hover { background: #1a3050; }
[data-tema="escuro"] .lista-acoes li + li { border-top-color: #24384f; }
[data-tema="escuro"] .cx-comparar { background: rgba(22,179,100,.10); border-color: rgba(22,179,100,.25); }
[data-tema="escuro"] .cx-comparar p { color: #b9c7d6; }
[data-tema="escuro"] .hero-valor { background: #0a1728; }

/* gráfico: grade e rótulos precisam clarear */
[data-tema="escuro"] .eixo { stroke: #2c435c; }
[data-tema="escuro"] .rotulo { fill: #8ba0b5; }
[data-tema="escuro"] .gr-marca, [data-tema="escuro"] .gr-ponto { stroke: #152941; }
[data-tema="escuro"] .gr-tip { background: #1a3050; border-color: #2c435c; color: #d5e0ec; }
[data-tema="escuro"] .tip-valor { color: #e8eef5; }
[data-tema="escuro"] .aba-num { background: #1a3050; border-color: #2c435c; color: #b9c7d6; }
[data-tema="escuro"] .aba-num.ativo { background: var(--verde); border-color: var(--verde); color: #08221a; }

/* selo da montadora nas listas da conta */
.entity-avatar.com-logo { background: #fff; border: 1px solid var(--cinza-200); padding: 4px; }
.entity-avatar.com-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; display: block; }
[data-tema="escuro"] .entity-avatar { background: #1e3350; color: #cfe0f2; }
[data-tema="escuro"] .entity-avatar.com-logo { background: #f4f7fa; border-color: #2c435c; }

/* display:grid vence o atributo hidden; sem isto, bloco escondido pelo
   JS continuava na tela (aconteceu com os campos de pessoa física) */
[hidden] { display: none !important; }

/* ---------- card recolhível ----------
   Usado quando a seção tem mais de um formulário: dois abertos em
   sequência empurram tudo para fora da tela. */
.card.sanfona { padding: 0; }
.card.sanfona > summary { display: flex; align-items: center; gap: 14px; cursor: pointer;
  padding: 18px 20px; list-style: none; border-bottom: 1px solid transparent; }
.card.sanfona > summary::-webkit-details-marker { display: none; }
.card.sanfona[open] > summary { border-bottom-color: var(--cinza-200); }
.card.sanfona > summary .card-title { margin: 0; }
.sanfona-estado { margin-left: auto; font-size: 13px; color: var(--cinza-500); }
.sanfona-seta { color: var(--cinza-300); font-size: 22px; line-height: 1;
  transition: transform .18s ease; }
.card.sanfona[open] .sanfona-seta { transform: rotate(90deg); }
.card.sanfona > summary:hover .sanfona-seta { color: var(--cinza-500); }
[data-tema="escuro"] .card.sanfona[open] > summary { border-bottom-color: #24384f; }

/* ---------- radar de variação (página do veículo) ---------- */
.radar-grade { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.radar-item { display: flex; flex-direction: column; gap: 4px; padding: 14px 14px 12px;
  border: 1px solid var(--cinza-200); border-radius: var(--raio-md); background: #fff; min-width: 0; }
.radar-rot { font-size: 12.5px; font-weight: 600; color: var(--cinza-700);
  text-transform: uppercase; letter-spacing: .04em; }
.radar-item b { font-size: 22px; font-weight: 700; line-height: 1.15; color: var(--noite-texto); }
.radar-item b.cai, .radar-reais.cai { color: var(--vermelho); }
.radar-item b.sobe, .radar-reais.sobe { color: var(--verde-escuro); }
.radar-reais { font-size: 14px; font-weight: 600; }
.radar-item small { font-size: 12px; color: var(--cinza-500); margin-top: 2px; }
.radar-item.vazio { background: var(--cinza-100); border-style: dashed; }
.radar-item.vazio b { color: var(--cinza-300); }
.radar-nota { margin: 16px 0 0; font-size: 14px; line-height: 1.6; color: var(--cinza-700); }
.radar-tend { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
  border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.radar-tend::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.radar-tend--alta       { background: var(--verde-claro); color: var(--verde-escuro); }
.radar-tend--desacelera { background: #e8f3ee; color: #0f7a4d; }
.radar-tend--estavel    { background: var(--cinza-100); color: var(--cinza-700); }
.radar-tend--acelera,
.radar-tend--virou      { background: var(--vermelho-claro); color: #c93b40; }
@media (max-width: 1100px) { .radar-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .radar-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .radar-item b { font-size: 19px; } .card-header:has(.radar-tend) { flex-wrap: wrap; } }

/* ---------- radar por segmento ---------- */
.seg-h1 { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -.5px; color: var(--noite-texto); }
.seg-trilha { margin: 0 0 8px; font-size: 13px; color: var(--cinza-500); }
.seg-trilha a { color: var(--cinza-700); text-decoration: none; }
.seg-trilha a:hover { color: var(--verde-escuro); }
.seg-intro { max-width: 820px; margin: 4px 0 22px; font-size: 16px; line-height: 1.65; color: var(--cinza-700); }
.seg-intro strong { color: var(--noite-texto); }
.seg-periodos { display: inline-flex; gap: 4px; padding: 4px; margin: 4px 0 18px;
  background: #fff; border: 1px solid var(--cinza-200); border-radius: 999px; }
.seg-periodos a { padding: 7px 16px; border-radius: 999px; font-size: 14px; font-weight: 600;
  color: var(--cinza-700); text-decoration: none; }
.seg-periodos a:hover { background: var(--cinza-100); }
.seg-periodos a[aria-current] { background: var(--noite, #0b2033); color: #fff; }
.seg-duplo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.seg-painel { border-top: 3px solid var(--verde); }
.seg-painel--ruim { border-top-color: var(--vermelho); }
.seg-lista { list-style: none; margin: 0; padding: 6px 0; }
.seg-lista li { display: grid; grid-template-columns: 34px 1fr auto 78px; align-items: center; gap: 10px;
  padding: 11px 20px; border-bottom: 1px solid var(--cinza-100); font-size: 15px; }
.seg-lista li:last-child { border-bottom: 0; }
.seg-lista li:hover { background: #edf2f8; }
.seg-lista a { color: var(--noite-texto); font-weight: 500; text-decoration: none; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seg-lista a:hover { color: var(--verde-escuro); }
.seg-n { font-size: 15px; font-weight: 700; color: var(--cinza-300); text-align: center; }
.seg-anos { font-size: 13px; color: var(--cinza-500); white-space: nowrap; }
.seg-var { text-align: right; font-weight: 700; }
.seg-var.sobe { color: var(--verde-escuro); }
.seg-var.desce { color: var(--vermelho); }
.seg-tabela th.seg-ativa { color: var(--noite-texto); background: #e2e8f0; }
.seg-tabela tr.seg-motor td:first-child a { font-style: italic; }
.seg-nota { margin: 16px 0 0; font-size: 13px; line-height: 1.6; color: var(--cinza-500); max-width: 820px; }
.seg-outros { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.seg-outros a { padding: 7px 14px; border: 1px solid var(--cinza-200); border-radius: 999px; background: #fff;
  font-size: 13.5px; font-weight: 500; color: var(--cinza-700); text-decoration: none; }
.seg-outros a:hover { border-color: var(--verde); color: var(--verde-escuro); }
.seg-outros a[aria-current],
body.site[data-tema="escuro"] .seg-outros a[aria-current] { background: #16b364; border-color: #16b364; color: #fff; }
.link-seg { color: var(--verde-escuro); font-weight: 600; text-decoration: none; }
.link-seg:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) { .seg-duplo { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .seg-lista li { grid-template-columns: 26px 1fr 64px; padding: 11px 14px; }
  .seg-anos { display: none; } .seg-h1 { font-size: 23px; } }
@media (max-width: 700px) { .seg-tabela { min-width: 640px; } }
.seg-filtros { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin: 4px 0 18px; }
.seg-filtros .seg-periodos { margin: 0; }
.seg-tabela td.seg-porte { color: var(--cinza-700); font-size: 14px; }
.seg-tabela .seg-porte { text-align: left; }

/* =====================================================================
   Página do veículo — layout do projeto de design v3 ("vp-")
   ===================================================================== */
.vp { --vp-tx: #0f1b2d; --vp-mut: #55647a; --vp-mut2: #5b6b7f; --vp-borda: #e5eaf1; --vp-div: #eef1f6;
  --vp-verde: #0b7a4f; --vp-verde-bg: #e8f6ef; --vp-verm: #cf3a3f; --vp-verm-tx: #c62f2f; --vp-verm-bg: #fdeaea;
  --vp-ouro: #b7791f; --vp-ouro-bg: #fdf3dc; --vp-ouro-barra: #e2b340;
  --vp-card: #fff; --vp-suave: var(--vp-suave); --vp-tx2: #334155; --vp-tx3: #475569; --vp-trilho: #f1f5f9;
  --vp-chip-cinza: #eef2f7; --vp-borda-forte: #d7dfe9; --vp-lin: #f3f6fa;
  --gx-nom: #cf3a3f; --gx-sobe: #0b7a4f; --gx-corr: #94a3b8; --gx-grade: #eef1f6; --gx-txt: #5b6b7f; --gx-fundo: #fff;
  max-width: 1320px; margin: 0 auto; padding: 22px 24px 64px; color: var(--vp-tx);
  display: flex; flex-direction: column; gap: 20px; }
.vp a { text-decoration: none; }
.vp .mut { color: var(--vp-mut); }
.vp-trilha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px; color: var(--vp-mut2); }
.vp-trilha a { color: var(--vp-mut2); } .vp-trilha a:hover { color: var(--vp-verde); }
.vp-trilha i { font-style: normal; color: #9fb0c2; } .vp-trilha a.atual { color: var(--vp-tx); font-weight: 600; }

.vp-cab { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 18px; }
.vp-cab-txt { display: flex; gap: 16px; align-items: center; min-width: 0; flex: 1 1 440px; }
.vp-logo { flex: 0 0 auto; width: 64px; height: 64px; border-radius: 14px; background: var(--vp-card); border: 1px solid var(--vp-borda);
  display: grid; place-items: center; }
.vp-logo img { max-width: 48px; max-height: 30px; object-fit: contain; }
.vp-cab h1 { margin: 0; font-size: 30px; line-height: 1.2; font-weight: 700; letter-spacing: -.02em; text-wrap: pretty; }
.vp-cab p { margin: 8px 0 0; font-size: 14px; color: var(--vp-mut); }
.vp-acoes { display: flex; gap: 12px; flex-wrap: wrap; }
.vp-btn { display: inline-flex; align-items: center; height: 46px; padding: 0 20px; border-radius: 10px; font-size: 14px; font-weight: 600; }
.vp-btn--linha { border: 1px solid var(--vp-borda-forte); background: var(--vp-card); color: var(--vp-tx); }
.vp-btn--linha:hover { border-color: var(--vp-verde); color: var(--vp-tx); }
.vp-btn--verde { background: var(--vp-verde); color: #fff; box-shadow: 0 2px 6px rgba(11,122,79,.28); }
.vp-btn--verde:hover { background: #08603e; color: #fff; }

.vp-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.vp-kpi { background: var(--vp-card); border: 1px solid var(--vp-borda); border-radius: 14px; padding: 20px 22px 18px;
  box-shadow: 0 1px 2px rgba(15,27,45,.04); }
.vp-kpi-topo { display: flex; align-items: center; gap: 14px; }
.vp-kpi-topo b { display: block; font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.vp-kpi-topo span:not(.vp-chip) { display: block; font-size: 13px; color: var(--vp-mut); margin-top: 2px; }
.vp-kpi-barra { height: 5px; border-radius: 3px; background: var(--vp-div); margin: 16px 0 14px; overflow: hidden; }
.vp-kpi-barra i { display: block; height: 100%; border-radius: 3px; }
.vp-kpi small { font-size: 12.5px; color: var(--vp-mut2); }
.vp-chip { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
  font-size: 15px; font-weight: 700; font-style: normal; }
.vp-kpi--verde .vp-chip, .vp-chip--verde { background: var(--vp-verde-bg); color: var(--vp-verde); }
.vp-kpi--verm .vp-chip,  .vp-chip--verm  { background: var(--vp-verm-bg); color: var(--vp-verm-tx); }
.vp-kpi--cinza .vp-chip, .vp-chip--cinza { background: var(--vp-chip-cinza); color: var(--vp-tx3); }
.vp-kpi--ouro .vp-chip,  .vp-chip--ouro  { background: var(--vp-ouro-bg); color: var(--vp-ouro); }
.vp-kpi--verde .vp-kpi-barra i { background: var(--vp-verde); }
.vp-kpi--verm  .vp-kpi-barra i { background: var(--vp-verm); }
.vp-kpi--cinza .vp-kpi-barra i { background: #94a3b8; }
.vp-kpi--ouro  .vp-kpi-barra i { background: var(--vp-ouro-barra); }
.vp-kpi--verm  .vp-kpi-topo b { color: var(--vp-verm-tx); }

.vp-grade { display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(300px, 1fr); gap: 18px; align-items: start; }
.vp-principal, .vp-lateral { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.vp-card { background: var(--vp-card); border: 1px solid var(--vp-borda); border-radius: 14px; box-shadow: 0 1px 2px rgba(15,27,45,.04); overflow: hidden; }
.vp-card-cab { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 20px 24px 18px; border-bottom: 1px solid var(--vp-div); }
.vp-tit { display: flex; align-items: center; gap: 12px; }
.vp-tit .vp-chip { width: 32px; height: 32px; border-radius: 9px; font-size: 14px; }
.vp-card h2 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.015em; }
.vp-nota { font-size: 13px; color: var(--vp-mut2); }
.vp-corpo { padding: 22px 24px 24px; }

.vp-pil { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 7px;
  font-size: 12.5px; font-weight: 700; font-style: normal; white-space: nowrap; }
.vp-pil--cai { background: var(--vp-verm-bg); color: var(--vp-verm-tx); }
.vp-pil--sobe { background: var(--vp-verde-bg); color: var(--vp-verde); }
.vp-pil--neutra { background: var(--vp-chip-cinza); color: var(--vp-tx3); }
.vp-pil--ponto::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.vp-valor { padding: 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 22px; align-items: center; }
.vp-valor-num { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.vp-valor-num > span { font-size: 44px; font-weight: 800; letter-spacing: -.035em; }
.vp-valor-sub { margin: 8px 0 0; font-size: 13px; color: var(--vp-mut); }
.vp-caixas { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.vp-caixa { background: var(--vp-suave); border: 1px solid var(--vp-div); border-radius: 11px; padding: 13px 14px; }
.vp-caixa span { display: block; font-size: 12px; color: var(--vp-mut2); }
.vp-caixa b { display: block; font-size: 16px; font-weight: 700; margin-top: 5px; }
.vp-sobrou { padding: 0 24px 24px; }
.vp-sobrou-cab, .vp-sobrou-rod { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--vp-mut); }
.vp-sobrou-cab { margin-bottom: 10px; } .vp-sobrou-cab b { font-size: 13px; color: var(--vp-tx2); }
.vp-sobrou-rod { margin-top: 9px; } .vp-sobrou-rod .cai { color: var(--vp-verm-tx); font-weight: 600; }
.vp-sobrou-barra { display: flex; height: 40px; border-radius: 10px; overflow: hidden; border: 1px solid var(--vp-div); }
.vp-sobrou-barra i { font-style: normal; display: flex; align-items: center; min-width: 0; color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; }
.vp-sobrou-barra .ok { background: var(--vp-verde); padding-left: 14px; }
.vp-sobrou-barra .foi { background: var(--vp-verm); justify-content: flex-end; padding-right: 14px; }

.vp-legenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--vp-mut); }
.vp-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.vp-legenda i { width: 14px; height: 0; }
.vp-legenda .l-nom { border-top: 2px solid var(--vp-verm); }
.vp-legenda .l-corr { border-top: 2px dashed #94a3b8; }
.vp-grafico { padding: 18px 24px 4px; }
.vp-tabela { padding: 8px 24px 6px; }
.vp-tab-cab, .vp-tab-lin { display: grid; grid-template-columns: 70px 1fr 1fr 96px; gap: 12px; align-items: center; }
.vp-tab-cab { padding: 10px 0; border-bottom: 1px solid var(--vp-div); font-size: 12.5px; font-weight: 600; color: var(--vp-mut2); }
.vp-tab-cab span:last-child { text-align: right; }
.vp-tab-lin { padding: 12px 0; border-bottom: 1px solid var(--vp-lin); font-size: 13.5px; }
.vp-tab-lin .vp-pil { justify-self: end; }
.vp-rodape { margin: 0; padding: 16px 24px 20px; font-size: 13px; color: var(--vp-tx3); line-height: 1.6; }
.vp-rodape strong { color: var(--vp-tx); }
.vp-assine { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding: 14px 24px;
  border-top: 1px solid var(--vp-div); background: var(--vp-suave); font-size: 13px; color: var(--vp-mut); }
.vp-assine a { color: var(--vp-verde); font-weight: 600; }
/* barra na base do gráfico para quem não tem o mês a mês */
.vp-mensal-barra { display: flex; align-items: center; gap: 14px; margin: 4px 24px 18px; padding: 14px 16px;
  border: 1px solid var(--vp-div); border-radius: 12px; background: var(--vp-suave); }
.vp-mensal-ic { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
  background: var(--vp-verde-bg); color: var(--vp-verde); }
.vp-mensal-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vp-mensal-txt b { font-size: 14.5px; color: var(--vp-tx); }
.vp-mensal-txt small { font-size: 12.5px; color: var(--vp-mut); line-height: 1.4; }
.vp-mensal-barra .chamado-btn { flex: 0 0 auto; height: 40px; padding: 0 16px; font-size: 14px; }
@media (max-width: 640px) {
  .vp-mensal-barra { flex-wrap: wrap; margin: 4px 16px 16px; }
  .vp-mensal-barra .chamado-btn { width: 100%; justify-content: center; }
}

.vp-periodos { padding: 8px 24px 4px; }
.vp-per { display: grid; grid-template-columns: minmax(74px, 90px) minmax(0, 1fr) minmax(96px, auto) minmax(76px, auto);
  gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--vp-lin); font-size: 13.5px; }
.vp-per b { font-weight: 600; }
.vp-per .mut { text-align: right; font-size: 13px; } .vp-per .mut small { font-size: 11px; }
.vp-per .vp-pil { justify-self: end; }
.vp-per-barra { height: 6px; border-radius: 4px; background: var(--vp-trilho); overflow: hidden; display: block; }
.vp-per-barra i { display: block; height: 100%; border-radius: 4px; }
.vp-per-barra i.cai { background: var(--vp-verm); } .vp-per-barra i.sobe { background: var(--vp-verde); }
.vp-per.vazio b { color: #94a3b8; }

.vp-cdi-frase { margin: 0 0 18px; font-size: 15px; } .vp-cdi-frase strong { color: var(--vp-verde); }
.vp-cdi-lin { display: grid; grid-template-columns: 80px 1fr auto; gap: 14px; align-items: center; margin-bottom: 12px; font-size: 13px; }
.vp-cdi-lin > span:first-child { font-weight: 600; color: var(--vp-tx3); }
.vp-cdi-lin .trilho { height: 24px; border-radius: 7px; background: var(--vp-trilho); overflow: hidden; }
.vp-cdi-lin .trilho i { display: block; height: 100%; border-radius: 7px; }
.vp-cdi-lin .vp-cdi-cheio { background: var(--vp-verde); } .vp-cdi-lin .vp-cdi-carro { background: var(--vp-verm); }
.vp-cdi-nota { margin: 6px 0 16px; font-size: 13.5px; color: var(--vp-tx3); }
.vp-ressalva { margin: 0; padding: 14px 16px; border-radius: 10px; background: #fdf8ea; border: 1px solid #f3e3b5;
  font-size: 12.5px; line-height: 1.65; color: #6b5a2e; }

.vp-compartilhar { padding: 6px 12px; }
.vp-compartilhar .compartilhar { margin: 0; box-shadow: none; border: 0; background: transparent; }

.vp-faq { padding: 4px 24px 12px; }
.vp-faq details { border-bottom: 1px solid var(--vp-div); }
.vp-faq details:last-child { border-bottom: 0; }
.vp-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 0; font-size: 15px; font-weight: 600; }
.vp-faq summary::-webkit-details-marker { display: none; }
.vp-faq summary i { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 6px; background: var(--vp-chip-cinza); position: relative; }
.vp-faq summary i::before, .vp-faq summary i::after { content: ""; position: absolute; left: 7px; right: 7px; top: 11px; height: 2px; background: var(--vp-tx2); }
.vp-faq summary i::after { transform: rotate(90deg); }
.vp-faq details[open] summary i::after { display: none; }
.vp-faq details p { margin: 0 0 18px; font-size: 14px; line-height: 1.7; color: var(--vp-tx3); }

.vp-leituras { list-style: none; margin: 0; padding: 18px 24px 20px; display: flex; flex-direction: column; gap: 14px; }
.vp-leituras li { position: relative; padding-left: 30px; font-size: 13.5px; line-height: 1.6; color: var(--vp-tx2); }
.vp-leituras li::before { content: "✓"; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 6px;
  background: var(--vp-verde-bg); color: var(--vp-verde); font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.vp-leituras strong { color: var(--vp-tx); }
.vp-links a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 24px;
  border-bottom: 1px solid var(--vp-div); font-size: 14px; color: var(--vp-tx); }
.vp-links a:last-child { border-bottom: 0; }
.vp-links a::after { content: "›"; color: #94a3b8; font-size: 18px; }
.vp-links a:hover { background: var(--vp-suave); color: var(--vp-verde); }
.vp-ficha { margin: 0; padding: 6px 24px; }
.vp-ficha div { display: flex; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--vp-div); font-size: 13.5px; }
.vp-ficha dt { color: var(--vp-mut); } .vp-ficha dd { margin: 0; font-weight: 700; text-align: right; }
.vp-ficha dd a { color: var(--vp-verde); }
.vp-anos { padding: 14px 24px 20px; }
.vp-anos > span { display: block; font-size: 12.5px; font-weight: 600; color: var(--vp-mut); margin-bottom: 10px; }
.vp-anos > div { display: flex; flex-wrap: wrap; gap: 8px; }
.vp-anos a { padding: 7px 13px; border-radius: 9px; border: 1px solid var(--vp-borda-forte); background: var(--vp-card); font-size: 13px; font-weight: 600; color: var(--vp-tx); }
.vp-anos a:hover { border-color: var(--vp-verde); }
.vp-anos a[aria-current] { background: var(--vp-verde); border-color: var(--vp-verde); color: #fff; }
.vp-vertodas { font-size: 13px; font-weight: 600; color: var(--vp-verde); }
.vp-versoes a { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center;
  padding: 13px 24px; border-bottom: 1px solid var(--vp-div); font-size: 13px; color: var(--vp-tx); }
.vp-versoes a:last-child { border-bottom: 0; }
.vp-versoes a:hover { background: var(--vp-suave); }
.vp-versoes .nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vp-acompanhe { background: #0f1f35 !important; border-color: #0f1f35; color: #fff; padding: 22px 22px 20px; }
.vp-acompanhe h2 { color: #fff; font-size: 17px; }
.vp-acompanhe p { margin: 8px 0 16px; font-size: 13px; line-height: 1.6; color: #b6c4d4; }
.vp-acompanhe button { width: 100%; height: 44px; border: 0; border-radius: 10px; background: var(--vp-verde); color: #fff;
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.vp-acompanhe button:hover { background: #08603e; }
.vp-acompanhe button.ja { background: transparent; border: 1px solid #3a5270; color: #c9d6e2; }
.vp-acompanhe small { display: block; margin-top: 10px; font-size: 12px; color: #8ea2b8; }

@media (max-width: 1000px) {
  .vp-grade { grid-template-columns: 1fr; }
  /* Numa coluna só, as perguntas frequentes vinham no meio (fim da coluna
     principal, antes da lateral). As duas colunas "somem" e os cartões
     viram uma lista única, com as perguntas no fim -- como no desktop. */
  /* align-items: start vem da grade de duas colunas; em coluna única ele
     encolhia cada cartão à largura do conteúdo (tablet e celular com
     "buracos" à direita). Em coluna, tudo estica. */
  .vp-grade { display: flex; flex-direction: column; align-items: stretch; gap: 18px; }
  .vp-grade > *, .vp-principal > *, .vp-lateral > * { width: 100%; }
  .vp-principal, .vp-lateral { display: contents; }
  .vp-grade #perguntas { order: 2; }
}
.vp-outros-seg { margin: 4px 0 0; padding: 0 24px; font-size: 13.5px; color: var(--vp-mut, #55647a); line-height: 1.6; }
.vp-outros-seg span { font-weight: 700; color: var(--vp-tx, #0f1b2d); margin-right: 4px; }
.vp-outros-seg a { color: var(--vp-verde, #0e874e); font-weight: 600; }
@media (max-width: 600px) {
  .vp { padding: 16px 14px 48px; gap: 16px; }
  .vp-cab h1 { font-size: 23px; } .vp-logo { width: 52px; height: 52px; }
  .vp-acoes { width: 100%; } .vp-btn { flex: 1 1 auto; justify-content: center; }
  .vp-valor-num > span { font-size: 36px; }
  .vp-kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
  .vp-kpi { padding: 14px 14px 12px; }
  .vp-kpi-topo { flex-direction: column; align-items: flex-start; gap: 10px; }
  .vp-kpi-topo b { font-size: 19px; }
  .vp-kpi .vp-chip { width: 30px; height: 30px; font-size: 13px; }
  .vp-kpi-barra { margin: 12px 0 10px; }
  .vp-kpi small { font-size: 11.5px; line-height: 1.4; display: block; }
  .vp-card-cab, .vp-valor, .vp-corpo { padding-left: 16px; padding-right: 16px; }
  .vp-grafico, .vp-tabela, .vp-periodos, .vp-sobrou, .vp-faq, .vp-rodape { padding-left: 16px; padding-right: 16px; }
  .vp-tab-cab, .vp-tab-lin { grid-template-columns: 46px 1fr 1fr 78px; gap: 8px; font-size: 12.5px; }
  .vp-per { grid-template-columns: 64px minmax(0, 1fr) auto; }
  .vp-per .mut { display: none; }
}


/* ---------- gráfico interativo ---------- */
.gx { position: relative; }
.gx-barra { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding: 16px 24px 0; }
.gx-series, .gx-periodos { display: flex; flex-wrap: wrap; gap: 6px; }
.gx-series button, .gx-periodos button { font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--vp-borda); background: var(--vp-card); color: var(--vp-mut);
  display: inline-flex; align-items: center; gap: 7px; }
.gx-series button i { width: 14px; height: 0; }
.gx-series button[data-gx-serie="nom"] i { border-top: 3px solid var(--gx-nom); border-radius: 2px; }
.gx-series button[data-gx-serie="corr"] i { border-top: 2px dashed var(--gx-corr); }
.gx-series button[aria-pressed="false"] { opacity: .5; }
.gx-series button[aria-pressed="false"] i { border-top-color: currentColor; }
.gx-periodos { padding: 3px; border-radius: 10px; background: var(--vp-trilho); }
.gx-periodos button { border: 0; background: transparent; height: 28px; }
.gx-periodos button[aria-pressed="true"] { background: var(--vp-card); color: var(--vp-tx); box-shadow: 0 1px 3px rgba(15,27,45,.12); }
.gx-series:not(:has(button)) { display: none; }
.gx:not(.gx--pronto) .gx-series, .gx:not(.gx--pronto) .gx-periodos { visibility: hidden; }
.gx-palco { position: relative; padding: 10px 14px 4px; min-height: 240px; }
.gx-svg { display: block; width: 100%; height: auto; outline: none; touch-action: pan-y; }
.gx-svg:focus-visible { outline: 2px solid var(--vp-verde); outline-offset: 4px; border-radius: 6px; }
.gx-pulso { transform-box: fill-box; transform-origin: center; animation: gxPulso 2.2s ease-out infinite; }
@keyframes gxPulso { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2); opacity: 0; } }
.gx-tip { position: absolute; left: 14px; top: 10px; z-index: 3; min-width: 190px; pointer-events: none;
  padding: 12px 14px; border-radius: 12px; background: var(--vp-card); border: 1px solid var(--vp-borda);
  box-shadow: 0 10px 30px rgba(15,27,45,.16); font-size: 12.5px; color: var(--vp-mut);
  transition: transform .08s linear; display: flex; flex-direction: column; gap: 4px; }
.gx-tip[hidden] { display: none; }
.gx-tip strong { font-size: 18px; color: var(--vp-tx); letter-spacing: -.01em; }
.gx-tip-rot { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.gx-tip-var { font-weight: 700; } .gx-tip-var.cai { color: var(--vp-verm-tx); } .gx-tip-var.sobe { color: var(--vp-verde); }
.gx-tip-lin { display: flex; align-items: center; gap: 7px; margin-top: 2px; }
.gx-tip-lin b { margin-left: auto; color: var(--vp-tx); padding-left: 10px; }
.gx-tip-lin i { width: 10px; height: 10px; border-radius: 3px; }
.gx-tip-lin i.c { border: 2px dashed var(--gx-corr); }
.gx-tip-lin i.p { background: var(--gx-nom); opacity: .35; }
@media (max-width: 600px) { .gx-barra { padding: 14px 16px 0; } .gx-palco { padding: 8px 6px 2px; } }

/* ---------- tema escuro da página do veículo (o mesmo da conta) ---------- */
.vp-tema { width: 46px; height: 46px; border-radius: 10px; border: 1px solid var(--vp-borda-forte); background: var(--vp-card);
  color: var(--vp-tx2); display: grid; place-items: center; cursor: pointer; }
.vp-tema:hover { border-color: var(--vp-verde); }
.vp-tema svg { width: 19px; height: 19px; }
.vp-tema .ic-lua { display: none; }
[data-tema="escuro"] .vp-tema .ic-sol { display: none; }
[data-tema="escuro"] .vp-tema .ic-lua { display: block; }
[data-tema="escuro"] .vp {
  --vp-tx: #e8eef5; --vp-mut: #9fb3c4; --vp-mut2: #8ba0b5; --vp-borda: #22364d; --vp-div: #1c2f45;
  --vp-card: #13253a; --vp-suave: #172b42; --vp-tx2: #c9d6e2; --vp-tx3: #b3c2d1; --vp-trilho: #1b2f46;
  --vp-chip-cinza: #1f3550; --vp-borda-forte: #2a415c; --vp-lin: #1a2d43;
  --vp-verde: #22c27a; --vp-verde-bg: rgba(34,194,122,.14); --vp-verm: #e5484d; --vp-verm-tx: #ff7b7f; --vp-verm-bg: rgba(229,72,77,.16);
  --vp-ouro: #f0c35a; --vp-ouro-bg: rgba(240,195,90,.14);
  --gx-nom: #ff6b70; --gx-sobe: #22c27a; --gx-corr: #7f95ab; --gx-grade: #1f3349; --gx-txt: #8ba0b5; --gx-fundo: #13253a;
}
[data-tema="escuro"] .vp-card, [data-tema="escuro"] .vp-kpi { box-shadow: 0 1px 2px rgba(0,0,0,.3); }
[data-tema="escuro"] .vp-btn--verde { color: #06220f; }
[data-tema="escuro"] .vp-btn--verde:hover { background: #1aa968; color: #06220f; }
[data-tema="escuro"] .vp-ressalva { background: rgba(240,195,90,.08); border-color: rgba(240,195,90,.25); color: #e6d3a3; }
[data-tema="escuro"] .vp-sobrou-barra .ok { color: #06220f; }
[data-tema="escuro"] .vp-logo { background: #fff; }
[data-tema="escuro"] .vp-acompanhe { background: #0b1828 !important; border-color: #22364d; }
[data-tema="escuro"] .gx-tip { box-shadow: 0 10px 30px rgba(0,0,0,.45); }
/* repouso escuro; no hover vale a cor de cada rede (app.css), como no Elite */
[data-tema="escuro"] .vp-compartilhar .cmp:not(:hover):not(.copiado) { background: var(--vp-suave); border-color: var(--vp-borda); color: var(--vp-tx2); }
[data-tema="escuro"] .vp-compartilhar .cmp--copiar:hover { background: var(--vp-verde); border-color: var(--vp-verde); color: #06220f; }
[data-tema="escuro"] .vp-compartilhar .compartilhar-rot { color: var(--vp-mut); }
/* cartão "Comparar" no lugar do quarto indicador */
.vp-kpi--comparar { display: flex; flex-direction: column; color: var(--vp-tx); background: linear-gradient(180deg, var(--vp-verde-bg), var(--vp-card) 70%);
  border-color: color-mix(in srgb, var(--vp-verde) 30%, var(--vp-borda)); transition: border-color .15s, transform .15s; }
.vp-kpi--comparar:hover { border-color: var(--vp-verde); transform: translateY(-1px); color: var(--vp-tx); }
.vp-kpi--comparar .vp-chip { background: var(--vp-verde); color: #fff; }
.vp-kpi--comparar p { margin: 12px 0 10px; font-size: 12.5px; line-height: 1.5; color: var(--vp-mut); }
.vp-kpi-cta { margin-top: auto; font-size: 13px; font-weight: 700; color: var(--vp-verde); }
@media (max-width: 600px) { .vp-kpi--comparar p { display: none; } }

/* três indicadores abaixo do valor: números maiores */
.vp-kpis--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.vp-kpis--3 .vp-kpi-topo b { font-size: 27px; letter-spacing: -.025em; line-height: 1.15; }
.vp-lateral > .vp-kpi--comparar { padding: 20px 22px; }
@media (max-width: 760px) { .vp-kpis--3 { grid-template-columns: 1fr 1fr; } .vp-kpis--3 .vp-kpi:nth-child(3) { grid-column: 1 / -1; } }
@media (max-width: 600px) { .vp-kpis--3 .vp-kpi-topo b { font-size: 21px; } }

/* =====================================================================
   Site público no padrão da página do veículo (cartões, títulos, fundo)
   e modo escuro em todas as páginas. Escopo .site: a conta tem layout
   e tema próprios e não é tocada.
   ===================================================================== */
.topo-tema { flex-shrink: 0; width: 38px; height: 38px; display: grid; place-items: center; cursor: pointer;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: var(--raio, 8px);
  color: #d6dee6; transition: background .18s, border-color .18s, color .18s; }
.topo-tema:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.32); color: #fff; }
.topo-tema .ic-lua { display: none; }
[data-tema="escuro"] .topo-tema .ic-sol { display: none; }
[data-tema="escuro"] .topo-tema .ic-lua { display: block; }

body.site { background: #eef1f6; }
.site .card { border-radius: 14px; border: 1px solid #e5eaf1; box-shadow: 0 1px 2px rgba(15,27,45,.04); overflow: hidden; }
.site .card-header { padding: 20px 24px 18px; border-bottom: 1px solid #eef1f6; }
.site .card-title { font-size: 18px; font-weight: 700; letter-spacing: -.015em; }
.site .page-title { letter-spacing: -.02em; }
.site .tabela-envelope { border-radius: 14px; }
.site table.anos thead th { font-size: 12.5px; font-weight: 600; color: #5b6b7f; background: transparent; border-bottom: 1px solid #eef1f6; }
.site table.anos tbody td { border-bottom: 1px solid #f3f6fa; }

/* ---------- escuro: tokens compartilhados ---------- */
body.site[data-tema="escuro"] {
  --papel-site: #0e1c2c; --papel: #13253a; --branco: #13253a; --linha: #22364d; --texto: #e8eef5; --texto-2: #c9d6e2; --texto-3: #8ba0b5;
  --noite-texto: #e8eef5; --cinza-900: #f1f5f9; --cinza-700: #b9c7d6; --cinza-500: #8ba0b5; --cinza-300: #33475e;
  --cinza-200: #24384f; --cinza-100: #1a2c42;
  --dk-card: #13253a; --dk-suave: #172b42; --dk-borda: #22364d; --dk-div: #1c2f45; --dk-tx: #e8eef5; --dk-tx2: #c9d6e2; --dk-mut: #9fb3c4;
  background: #0e1c2c; color: #b9c7d6;
}
.site[data-tema="escuro"] .card,
.site[data-tema="escuro"] .tabela-envelope { background: var(--dk-card); border-color: var(--dk-borda); box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.site[data-tema="escuro"] .card-header { border-bottom-color: var(--dk-div); background: transparent; }
.site[data-tema="escuro"] .card-title,
.site[data-tema="escuro"] h1, .site[data-tema="escuro"] h2, .site[data-tema="escuro"] h3 { color: var(--dk-tx); }
.site[data-tema="escuro"] table.anos thead th { color: var(--dk-mut); border-bottom-color: var(--dk-div); background: transparent; }
.site[data-tema="escuro"] table.anos tbody td { border-bottom-color: var(--dk-div); color: var(--dk-tx2); }
.site[data-tema="escuro"] table.anos tbody tr:hover { background: #1a3050; }
.site[data-tema="escuro"] table.anos a { color: var(--dk-tx); }
.site[data-tema="escuro"] input, .site[data-tema="escuro"] select, .site[data-tema="escuro"] textarea {
  background: var(--dk-suave); border-color: var(--dk-borda); color: var(--dk-tx); }
.site[data-tema="escuro"] input::placeholder, .site[data-tema="escuro"] textarea::placeholder { color: #6f86a0; }
.site[data-tema="escuro"] .rodape input { background: #fff; color: #0f1b2d; }

/* faixa de preço: o bloco "ou digite os valores" com respiro na borda */
.site .faixa-livre { padding: 18px 22px 20px; }

/* conta: prévia do cabeçalho do relatório com a marca da loja */
.marca-rel-prev { display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 12px 18px; margin-bottom: 18px;
  border-radius: 10px; background: #0b2033; border-bottom: 3px solid #16b364; color: #fff; }
.marca-rel-prev b { font-size: 15px; font-weight: 700; }
.marca-rel-logo { display: grid; place-items: center; background: #fff; border-radius: 8px; padding: 6px 8px; }
.marca-rel-logo img { max-height: 40px; max-width: 150px; display: block; }
.marca-rel-tit { margin-left: auto; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; color: #cfd8e3; }
@media (max-width: 560px) { .marca-rel-tit { display: none; } }

/* gaveta do celular: item ativo no verde da marca (era o tijolo antigo) */
.gaveta-nav a[aria-current] { background: rgba(22,179,100,.16); border-left-color: var(--verde); }
.gaveta-busca:focus-within { border-color: var(--verde); }
.vp-acao-form { display: contents; }
.vp-btn--linha { font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.vp-btn--seguindo { border-color: var(--vp-verde); color: var(--vp-verde); }
.vp-btn--seguindo::before { content: "✓"; margin-right: 7px; font-weight: 700; }

/* Campos de busca no iPhone: o Safari dá ao input[type=search] uma altura
   e um desenho próprios e ignora os nossos — no celular o campo aparecia
   achatado, como se o botão o estivesse cobrindo. */
input[type="search"] { -webkit-appearance: none; appearance: none; }
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
.busca2 input { min-height: 48px; box-sizing: border-box; }
@media (max-width: 720px) {
  .busca2 { gap: 10px; }
  .busca2 input { height: 52px; min-height: 52px; border: 1px solid var(--cinza-200); }
  .busca2 button { height: 52px; }
}
.conta-busca input, .gaveta-busca input, .busca-campo input { min-height: 44px; box-sizing: border-box; }

/* capa no celular: o campo e o botão são blocos separados, então a caixa
   que os envolve não pode ter fundo — no escuro sobrava uma barra branca
   ligando os dois. */
@media (max-width: 720px) {
  .busca2, .site[data-tema="escuro"] .busca2 { background: none; padding: 0; }
}

/* O gráfico interativo também roda na conta, fora do escopo .vp: as cores
   e as medidas que ele usa ficam declaradas no próprio .gx. */
.gx {
  --vp-tx: #0f1b2d; --vp-mut: #55647a; --vp-borda: #e5eaf1; --vp-card: #fff; --vp-trilho: #f1f5f9;
  --vp-verde: #0b7a4f; --vp-verm-tx: #c62f2f;
  --gx-nom: #cf3a3f; --gx-sobe: #0b7a4f; --gx-corr: #94a3b8; --gx-grade: #eef1f6; --gx-txt: #5b6b7f; --gx-fundo: #fff;
}
[data-tema="escuro"] .gx {
  --vp-tx: #e8eef5; --vp-mut: #9fb3c4; --vp-borda: #22364d; --vp-card: #13253a; --vp-trilho: #1b2f46;
  --vp-verde: #22c27a; --vp-verm-tx: #ff7b7f;
  --gx-nom: #ff6b70; --gx-sobe: #22c27a; --gx-corr: #7f95ab; --gx-grade: #1f3349; --gx-txt: #8ba0b5; --gx-fundo: #13253a;
}
/* na conta o gráfico já vem dentro de um cartão: sem moldura dupla */
.conta-grafico .gx-barra { padding: 0 0 6px; }
.conta-grafico .gx-palco { padding: 6px 0 0; }

/* comparador de até quatro carros */
.comp-lados { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 22px; }
/* os cartões do duelo se ajustam à quantidade de carros (2 a 4) */
.comp-cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.comp-cartoes .stat-value span { display: block; margin-top: 4px; }
.comp-graf .comp-a { stroke: #b33a2a; fill: #b33a2a; }
.comp-graf .comp-b { stroke: #1d6fa5; fill: #1d6fa5; }
.comp-graf .comp-c { stroke: #0b7a4f; fill: #0b7a4f; }
.comp-graf .comp-d { stroke: #b7791f; fill: #b7791f; }
.comp-graf .comp-area { stroke: none; }
.k-c { border-top-style: dotted; border-color: #0b7a4f; }
.k-d { border-top-style: dashed; border-color: #b7791f; }
.comp-chave { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
@media (max-width: 900px) { .comp-cartoes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .comp-cartoes { grid-template-columns: 1fr; } }
/* gráfico do comparador: no escuro as linhas de grade e os rótulos usam
   currentColor e ficavam quase invisíveis; o balão sobe menos, para não
   cobrir o título do cartão */
.comp-graf svg { color: var(--cinza-700); }
.site[data-tema="escuro"] .comp-graf svg { color: #c9d6e2; }
.comp-graf .graf-balao { top: 5.4rem; }

/* ---------- simulador de financiamento ---------- */
.fin { padding-top: 28px; }
.fin-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; align-items: end; }
.fin-enviar .vp-btn { width: 100%; justify-content: center; }
.fin-kpis { margin-top: 22px; }
.fin-graf { padding: 10px 20px 0; }
.fin-graf svg { width: 100%; height: auto; color: var(--cinza-700); }
.fin-graf .fin-saldo { stroke: #cf3a3f; }
.fin-graf .fin-valor { stroke: #0b7a4f; }
.fin-graf .comp-chave { margin: 6px 0 14px; font-size: 13px; color: var(--cinza-700); }
.fin-graf .k-a { border-color: #cf3a3f; }
.fin-graf .k-b { border-color: #0b7a4f; border-top-style: dashed; }
.site[data-tema="escuro"] .fin-graf svg { color: #c9d6e2; }
.site[data-tema="escuro"] .fin-graf .fin-saldo { stroke: #ff6b70; }
.site[data-tema="escuro"] .fin-graf .fin-valor { stroke: #22c27a; }
.site[data-tema="escuro"] .fin-graf .k-a { border-color: #ff6b70; }
.site[data-tema="escuro"] .fin-graf .k-b { border-color: #22c27a; }

/* ---------- guias ---------- */
.guias-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.guia-cartao { display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: 14px;
  background: var(--vp-card, #fff); border: 1px solid var(--vp-borda, #e5eaf1); color: var(--vp-tx, #0f1b2d);
  box-shadow: 0 1px 2px rgba(15,27,45,.04); transition: border-color .15s, transform .15s; }
.guia-cartao:hover { border-color: var(--vp-verde, #0b7a4f); transform: translateY(-1px); color: var(--vp-tx, #0f1b2d); }
.guia-cartao b { font-size: 17px; font-weight: 700; letter-spacing: -.015em; line-height: 1.3; }
.guia-cartao span { font-size: 13.5px; line-height: 1.55; color: var(--vp-mut, #55647a); }
.guia-cartao em { margin-top: auto; font-style: normal; font-size: 13px; font-weight: 700; color: var(--vp-verde, #0b7a4f); }
.guia-abertura { max-width: 820px; margin: 4px 0 20px; }
.guia-abertura p { margin: 0 0 10px; font-size: 16px; line-height: 1.7; color: var(--vp-tx2, #334155); }
.guia-abertura small { font-size: 12px; color: var(--vp-mut, #55647a); }
.seg-tabela .guia-nome { text-align: left; }
.guia-pos { width: 46px; color: var(--vp-mut, #55647a); font-variant-numeric: tabular-nums; }
.guia-seg { display: block; font-size: 11.5px; color: var(--vp-mut, #55647a); }

/* ---------- grupo "Ferramentas" no menu do topo ---------- */
.nav-grupo { position: relative; }
.nav-botao { display: inline-flex; align-items: center; gap: 6px; padding: .45rem .75rem; border: 0; border-radius: 6px;
  background: none; color: #aebbc8; font: inherit; font-size: .875rem; cursor: pointer;
  transition: color .18s ease, background .18s ease; }
.nav-botao:hover, .nav-botao[aria-expanded="true"] { color: #fff; background: rgba(255,255,255,.05); }
.nav-botao.ativo { color: #fff; }
.nav-botao svg { transition: transform .18s ease; }
.nav-botao[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-menu { position: absolute; top: calc(100% + 10px); left: 0; z-index: 60; min-width: 234px; padding: 8px;
  border-radius: 12px; background: #13253a; border: 1px solid #22364d; box-shadow: 0 16px 40px rgba(0,0,0,.45); }
.nav-menu[hidden] { display: none; }
.nav-menu a { display: block; padding: 9px 12px; border-radius: 8px; font-size: 14px; color: #e8eef5; }
.nav-menu a small { display: block; font-size: 12px; color: #9fb3c4; margin-top: 2px; }
.nav-menu a:hover { background: rgba(255,255,255,.07); color: #fff; }
.nav-menu a[aria-current] { background: rgba(34,194,122,.14); color: #4ade80; }
.nav-menu a[aria-current] small { color: #8bb9a4; }
/* concorrentes diretos: nome do modelo precisa de espaço, ao contrário
   da coluna "Ano" da tabela de histórico */
.vp-tabela--rivais .vp-tab-cab,
.vp-tabela--rivais .vp-tab-lin { grid-template-columns: minmax(0, 1.7fr) 1fr 1fr 92px; }
@media (max-width: 600px) {
  .vp-tabela--rivais .vp-tab-cab,
  .vp-tabela--rivais .vp-tab-lin { grid-template-columns: minmax(0, 1.4fr) 1fr 78px; }
  .vp-tabela--rivais .vp-tab-cab span:nth-child(3),
  .vp-tabela--rivais .vp-tab-lin .mut { display: none; }
}
.vp-rival { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vp-rival a { color: var(--vp-tx); }
.vp-rival a:hover { color: var(--vp-verde); }

/* ---------- zebra nas listas longas ---------- */
.site table.anos tbody tr:nth-child(even) { background: #f7f9fc; }
.site table.anos tbody tr:hover { background: #edf2f8; }
.site[data-tema="escuro"] table.anos tbody tr:nth-child(even) { background: rgba(255,255,255,.045); }
.site[data-tema="escuro"] table.anos tbody tr:hover { background: #1a3050; }
.vp-tabela .vp-tab-lin:nth-child(odd) { background: var(--vp-suave); }
.vp-tabela .vp-tab-lin:hover { background: var(--vp-trilho); }
.vp-tabela .vp-tab-lin, .vp-tabela .vp-tab-cab { padding-left: 10px; padding-right: 10px;
  border-radius: 8px; }
.seg-lista li:nth-child(even) { background: var(--vp-suave, #f7f9fc); }

/* ---------- pé da capa: chamados, números e blog ---------- */
.capa-chamados { display: grid; grid-template-columns: 1.7fr 1fr; gap: 18px; margin: 36px 0 18px; }
.chamado { display: flex; gap: 16px; align-items: center; padding: 30px; border-radius: 16px;
  border: 1px solid var(--cinza-200); background: #fff; color: var(--noite-texto); }
.chamado b { display: block; font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.chamado span { display: block; margin: 8px 0 16px; font-size: 14.5px; line-height: 1.6; color: var(--cinza-700); }
.chamado em { font-style: normal; font-size: 14px; font-weight: 700; color: var(--verde-escuro); }
.chamado i { flex: 0 0 auto; width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center;
  background: var(--noite-claro); color: var(--noite); }
.chamado--comparar { background: linear-gradient(120deg, #0b2033 0%, #14314c 60%, #1b4463 100%); border-color: #14314c; color: #fff; }
.chamado--comparar span { color: #b6c4d4; }
.chamado--comparar em { display: inline-flex; margin-top: 4px; color: #fff; }
.chamado--simples:hover { border-color: var(--verde); }
.capa-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px;
  padding: 22px 26px; border-radius: 16px; border: 1px solid var(--cinza-200); background: #fff; }
.capa-numeros b { display: block; font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.capa-numeros span { font-size: 13.5px; color: var(--cinza-700); }
.capa-blog { margin-top: 34px; }

/* ---------- cartões de artigo ---------- */
.posts-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.post-cartao { display: flex; flex-direction: column; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--vp-borda, #e5eaf1); background: var(--vp-card, #fff); color: var(--vp-tx, #0f1b2d);
  transition: border-color .15s, transform .15s; }
.post-cartao:hover { border-color: var(--vp-verde, #0b7a4f); transform: translateY(-2px); color: var(--vp-tx, #0f1b2d); }
.post-capa { position: relative; background: var(--capa-fundo); overflow: hidden; }
.post-capa svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.post-tag { position: absolute; left: 14px; bottom: 12px; padding: 4px 10px; border-radius: 6px;
  background: var(--capa-traco); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; }
.post-txt { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; }
.post-txt b { font-size: 16.5px; font-weight: 700; line-height: 1.35; letter-spacing: -.015em; }
.post-txt span { font-size: 13.5px; line-height: 1.6; color: var(--vp-mut, #55647a); }
.post-txt em { font-style: normal; font-size: 12px; color: var(--vp-mut, #55647a); }

/* ---------- leitura do artigo ---------- */
.post { max-width: 760px; }
.post-titulo { font-size: 34px; font-weight: 700; letter-spacing: -.03em; line-height: 1.2; margin: 6px 0 10px; }
.post-meta { font-size: 13px; color: var(--vp-mut, #55647a); margin: 0 0 18px; }
.post .post-capa { border-radius: 14px; margin-bottom: 26px; }
.post-corpo { font-size: 17px; line-height: 1.8; color: var(--vp-tx2, #334155); }
.post-corpo h2 { font-size: 23px; font-weight: 700; letter-spacing: -.02em; margin: 34px 0 12px; color: var(--vp-tx, #0f1b2d); }
.post-corpo h3 { font-size: 18px; font-weight: 700; margin: 26px 0 10px; color: var(--vp-tx, #0f1b2d); }
.post-corpo p { margin: 0 0 16px; }
.post-corpo ul { margin: 0 0 18px; padding-left: 22px; }
.post-corpo li { margin-bottom: 8px; }
.post-corpo a { color: var(--vp-verde, #0b7a4f); font-weight: 600; }
/* artigos da Redação IA: lista numerada, citação, tabela e nota de fonte */
.post-corpo ol { margin: 0 0 18px; padding-left: 24px; }
.post-corpo blockquote { margin: 22px 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--vp-verde, #0b7a4f);
  font-size: 18px; font-weight: 600; line-height: 1.6; color: var(--vp-tx, #0f1b2d); }
.post-corpo blockquote p:last-child { margin-bottom: 0; }
.post-corpo table { width: 100%; border-collapse: collapse; margin: 6px 0 22px; font-size: 15px; line-height: 1.5;
  display: block; overflow-x: auto; }
.post-corpo th, .post-corpo td { padding: 10px 12px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--vp-borda, #e5eaf1); }
.post-corpo th { font-size: 13px; font-weight: 700; color: var(--vp-tx, #0f1b2d); background: var(--vp-suave, #f7f9fc); }
.post-fonte { display: flex; gap: 12px; align-items: flex-start; margin: 28px 0 0; padding: 16px 18px; border-radius: 12px;
  background: var(--vp-suave, #f7f9fc); border: 1px solid var(--vp-borda, #e5eaf1);
  font-size: 13.5px; line-height: 1.6; color: var(--vp-mut, #55647a); }
.post-fonte svg { flex: 0 0 auto; margin-top: 2px; color: var(--vp-verde, #0b7a4f); }
.post-fonte a { color: var(--vp-verde, #0b7a4f); font-weight: 600; }
/* quadros da Ficha do veículo (Redação IA): desenhados pelo site, números vivos */
.post-corpo .qd { margin: 22px 0 26px; padding: 18px 20px; border-radius: 14px; background: var(--vp-suave, #f7f9fc);
  border: 1px solid var(--vp-borda, #e5eaf1); font-size: 15px; line-height: 1.55; }
.post-corpo .qd-tit { margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--vp-mut, #55647a); }
.post-corpo .qd table { margin: 0; display: table; font-size: 14.5px; }
.post-corpo .qd th, .post-corpo .qd td { padding: 9px 10px; }
.post-corpo .qd thead th { background: none; border-bottom: 1px solid var(--vp-borda-forte, #d7dfe9); }
.post-corpo .qd-tab-ficha tbody th { width: 38%; font-weight: 600; color: var(--vp-mut, #55647a); background: none; font-size: 14px; }
.post-corpo .qd td.neg { color: var(--vp-verm-tx, #c62f2f); font-weight: 600; }
.post-corpo .qd td.pos { color: var(--vp-verde, #0b7a4f); font-weight: 600; }
.post-corpo .qd-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.post-corpo .qd-kpi { padding: 12px 14px; border-radius: 10px; background: var(--vp-card, #fff); border: 1px solid var(--vp-borda, #e5eaf1); }
.post-corpo .qd-kpi span { display: block; font-size: 12px; color: var(--vp-mut, #55647a); }
.post-corpo .qd-kpi b { display: block; margin: 4px 0 2px; font-size: 17px; color: var(--vp-tx, #0f1b2d); letter-spacing: -.01em; }
.post-corpo .qd-kpi b.neg { color: var(--vp-verm-tx, #c62f2f); } .post-corpo .qd-kpi b.pos { color: var(--vp-verde, #0b7a4f); }
.post-corpo .qd-kpi small { display: block; font-size: 12px; color: var(--vp-mut, #55647a); }
.post-corpo .qd-sub { margin: 14px 0 6px; font-size: 14px; font-weight: 700; color: var(--vp-tx, #0f1b2d); }
.post-corpo .qd-motor { margin: 16px 0 6px; font-size: 14px; font-weight: 700; color: var(--vp-verde, #0b7a4f); }
.post-corpo .qd ul { margin: 0 0 6px; padding-left: 20px; } .post-corpo .qd li { margin-bottom: 4px; }
.post-corpo .qd-lista-chave { list-style: none; padding-left: 0 !important; }
.post-corpo .qd-nota, .post-corpo .qd-fontes { margin: 12px 0 0; font-size: 12.5px; color: var(--vp-mut, #55647a); }
.post-corpo .qd-fontes a, .post-corpo .qd-nota a { font-weight: 600; }
.vp-ficha-fontes .qd-fontes { margin: 0; padding: 4px 24px 14px; font-size: 12px; color: var(--vp-mut); }
.vp-ficha-fontes .qd-fontes a { color: var(--vp-verde); }
.post-cta { margin: 34px 0; padding: 26px; border-radius: 14px; background: var(--vp-suave, #f7f9fc);
  border: 1px solid var(--vp-borda, #e5eaf1); }
.post-cta b { display: block; font-size: 18px; font-weight: 700; }
.post-cta span { display: block; margin: 6px 0 16px; font-size: 14px; color: var(--vp-mut, #55647a); }
.post-mais { font-size: 20px; font-weight: 700; margin: 36px 0 14px; }
@media (max-width: 860px) { .capa-chamados { grid-template-columns: 1fr; } .post-titulo { font-size: 27px; } }
/* botão do chamado: cor própria, para não depender dos tokens da página
   do veículo (fora dela o verde ficava indefinido e o texto sumia) */
.chamado-btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px;
  border-radius: 10px; background: #0e874e; color: #fff; font-size: 14px; font-weight: 700; font-style: normal; }
.chamado--comparar:hover .chamado-btn { background: #129954; }

/* ---------- leitura do artigo: texto em cartão + lateral útil ---------- */
.post-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 26px; align-items: start; }
.post-layout .post { max-width: none; padding: 34px 38px 38px; border-radius: 16px;
  background: var(--vp-card, #fff); border: 1px solid var(--vp-borda, #e5eaf1); box-shadow: 0 1px 2px rgba(15,27,45,.04); }
.post-lado { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 16px; }
.lado-card { padding: 20px; border-radius: 14px; background: var(--vp-card, #fff);
  border: 1px solid var(--vp-borda, #e5eaf1); }
.lado-card > b { display: block; font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: var(--vp-tx, #0f1b2d); }
.lado-busca span { display: block; margin: 6px 0 14px; font-size: 13px; line-height: 1.55; color: var(--vp-mut, #55647a); }
.lado-busca input { width: 100%; box-sizing: border-box; height: 44px; padding: 0 14px; font-size: 14px;
  border-radius: 10px; border: 1px solid var(--vp-borda-forte, #d7dfe9); background: var(--vp-suave, #f7f9fc);
  color: var(--vp-tx, #0f1b2d); }
.lado-busca button { width: 100%; height: 44px; margin-top: 10px; border: 0; border-radius: 10px;
  background: #0e874e; color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.lado-busca button:hover { background: #129954; }
.lado-indice a { display: block; margin-top: 10px; padding-left: 12px; border-left: 2px solid var(--vp-borda, #e5eaf1);
  font-size: 13.5px; line-height: 1.5; color: var(--vp-mut, #55647a); }
.lado-indice a:hover { border-left-color: var(--vp-verde, #0b7a4f); color: var(--vp-tx, #0f1b2d); }
.lado-links a { display: block; margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--vp-tx, #0f1b2d); }
.lado-links a small { display: block; font-size: 12px; font-weight: 400; color: var(--vp-mut, #55647a); margin-top: 2px; }
.lado-links a:hover { color: var(--vp-verde, #0b7a4f); }
.lado-todos { color: var(--vp-verde, #0b7a4f) !important; font-size: 13px !important; }
@media (max-width: 1000px) {
  .post-layout { grid-template-columns: 1fr; }
  .post-lado { position: static; }
  .post-layout .post { padding: 24px 20px 28px; }
}
/* capa do artigo sempre na proporção 1250x650, em qualquer largura */
.post-capa { aspect-ratio: 1250 / 650; height: auto; }
/* capa com foto: mesma proporção da capa desenhada */
.post-capa--foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* faixa de números: ícone, valor e divisória entre os itens */
.capa-numeros { gap: 0; padding: 22px 8px; }
.capa-numeros > div { display: flex; align-items: center; gap: 14px; padding: 4px 22px; }
.capa-numeros > div + div { border-left: 1px solid var(--cinza-200); }
.capa-numeros i { flex: 0 0 auto; width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center;
  background: #e8f6ef; color: #0b7a4f; }
.capa-numeros .num-txt { display: flex; flex-direction: column; }
.site[data-tema="escuro"] .capa-numeros > div + div { border-left-color: #22364d; }
.site[data-tema="escuro"] .capa-numeros i { background: rgba(34,194,122,.14); color: #4ade80; }
@media (max-width: 900px) {
  .capa-numeros { grid-template-columns: 1fr 1fr; row-gap: 16px; }
  .capa-numeros > div + div { border-left: 0; }
}
.capa-numeros b { color: var(--noite-texto); }

/* ---------- conta: alertas ---------- */
.alertas-lista .alerta-linha { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-top: 1px solid var(--cinza-200); }
.alerta-linha.pausado { opacity: .55; }
.alerta-tipo { flex: 0 0 auto; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 6px; background: var(--noite-claro); color: var(--noite); }
.alerta-txt { flex: 1; min-width: 0; }
.alerta-txt b { display: block; font-size: 14.5px; }
.alerta-txt small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--cinza-500); }
.alerta-acoes { display: flex; gap: 8px; }
.alerta-apagar:hover { border-color: #e5484d; color: #e5484d; }
.alerta-escolhido { margin: 0 0 16px; padding: 12px 14px; border-radius: 10px; background: var(--noite-claro); }
.alerta-escolhido small { display: block; font-size: 12.5px; color: var(--cinza-500); margin-top: 2px; }
.alerta-campos { border: 0; padding: 0; margin: 0; }
.alerta-trava .alerta-campos { opacity: .5; }
[data-tema="escuro"] .alerta-tipo { background: #1f3550; color: #c9d6e2; }
[data-tema="escuro"] .alerta-escolhido { background: #172b42; }
[data-tema="escuro"] .alertas-lista .alerta-linha { border-top-color: #22364d; }
@media (max-width: 640px) { .alertas-lista .alerta-linha { flex-wrap: wrap; } }
.guia-alerta { margin: 4px 0 20px; }

/* ---------- modal (dialog nativo) ---------- */
dialog.modal { padding: 0; border: 0; background: transparent; max-width: 640px; width: calc(100% - 32px); color: inherit; }
dialog.modal::backdrop { background: rgba(8, 15, 26, .6); backdrop-filter: blur(2px); }
.modal-caixa { margin: 0; border-radius: 16px; background: #fff; border: 1px solid #e5eaf1; box-shadow: 0 24px 60px rgba(0,0,0,.3); overflow: hidden; }
.modal-cab { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid #eef1f6; }
.modal-cab h3 { margin: 0; font-size: 18px; font-weight: 700; }
.modal-fechar { width: 34px; height: 34px; border-radius: 8px; border: 0; background: none; font-size: 24px; line-height: 1;
  color: #5b6b7f; cursor: pointer; }
.modal-fechar:hover { background: #f1f5f9; }
.modal-corpo { padding: 20px 22px; max-height: 70vh; overflow-y: auto; }
.modal-pe { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px; border-top: 1px solid #eef1f6; background: #f7f9fc; }
.modal-veic { margin: 0 0 16px; padding: 12px 14px; border-radius: 10px; background: #f1f5f9; font-weight: 600; }
.modal-veic small { display: block; font-weight: 400; font-size: 12.5px; color: #5b6b7f; margin-top: 2px; }
[data-tema="escuro"] .modal-caixa { background: #13253a; border-color: #22364d; }
[data-tema="escuro"] .modal-cab, [data-tema="escuro"] .modal-pe { border-color: #1c2f45; }
[data-tema="escuro"] .modal-pe { background: #0f2033; }
[data-tema="escuro"] .modal-veic { background: #172b42; }
[data-tema="escuro"] .modal-fechar { color: #9fb3c4; }
[data-tema="escuro"] .modal-fechar:hover { background: #1f3550; }

/* ---------- conta: lista de alertas ---------- */
.alertas-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.alertas-topo-acoes { display: flex; gap: 10px; align-items: center; }
.alertas-filtro { width: 240px; }
.alertas-vazio p { margin: 0 0 6px; }
.alerta-ic { width: 36px; height: 36px; display: inline-grid; place-items: center; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--cinza-200); background: transparent; color: var(--cinza-700); }
.alerta-ic svg { width: 17px; height: 17px; }
.alerta-ic:hover { border-color: var(--verde); color: var(--verde-escuro); }
.alerta-ic--perigo:hover { border-color: #e5484d; color: #e5484d; }
.alerta-acoes, .alerta-acoes form { display: flex; gap: 6px; margin: 0; }
[data-tema="escuro"] .alerta-ic { border-color: #2a415c; color: #c9d6e2; }
/* aviso rápido depois de criar alerta pela página do veículo */
.vp-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 80; padding: 12px 18px;
  border-radius: 10px; background: #0b7a4f; color: #fff; font-size: 14px; font-weight: 600;
  box-shadow: 0 10px 30px rgba(0,0,0,.25); animation: vpToast 5s forwards; }
@keyframes vpToast { 0%, 85% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
/* campo com símbolo: "R$" antes do valor, "%" depois */
.campo-sim { position: relative; display: block; }
.campo-sim i { position: absolute; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 14px;
  font-weight: 600; color: var(--cinza-500); pointer-events: none; }
.campo-sim--pre i { left: 14px; }
.campo-sim--pre .form-input { padding-left: 42px; }
.campo-sim--pos i { right: 14px; }
.campo-sim--pos .form-input { padding-right: 36px; }

/* ---------- ferramentas do veículo: cartões com ação ---------- */
.vp-ferr-tit { margin: 6px 0 12px; font-size: 18px; font-weight: 700; letter-spacing: -.015em; color: var(--vp-tx); }
.vp-ferr-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.vp-ferr { --c: #0b7a4f; --cf: #e8f6ef; display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: 14px;
  background: var(--vp-card); border: 1px solid var(--vp-borda); color: var(--vp-tx);
  transition: border-color .15s, transform .15s, box-shadow .15s; }
.vp-ferr:hover { border-color: var(--c); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(15,27,45,.08); color: var(--vp-tx); }
.vp-ferr-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 6px;
  background: var(--cf); color: var(--c); }
.vp-ferr-ic svg { width: 21px; height: 21px; }
.vp-ferr b { font-size: 15.5px; font-weight: 700; }
.vp-ferr-txt { font-size: 13px; line-height: 1.5; color: var(--vp-mut); flex: 1; }
.vp-ferr-btn { margin-top: 8px; font-size: 13.5px; font-weight: 700; color: var(--c); }
.vp-ferr--verde { --c: #0b7a4f; --cf: #e8f6ef; }
.vp-ferr--azul  { --c: #1d6fa5; --cf: #e8f1f9; }
.vp-ferr--ouro  { --c: #b7791f; --cf: #fbf2e1; }
.vp-ferr--noite { --c: #0b2033; --cf: #e9eef4; }
[data-tema="escuro"] .vp-ferr--verde { --c: #22c27a; --cf: rgba(34,194,122,.14); }
[data-tema="escuro"] .vp-ferr--azul  { --c: #60a5fa; --cf: rgba(96,165,250,.14); }
[data-tema="escuro"] .vp-ferr--ouro  { --c: #f0c35a; --cf: rgba(240,195,90,.14); }
[data-tema="escuro"] .vp-ferr--noite { --c: #c9d6e2; --cf: rgba(201,214,226,.12); }
[data-tema="escuro"] .vp-ferr:hover { box-shadow: 0 10px 24px rgba(0,0,0,.3); }
@media (max-width: 900px) { .vp-ferr-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 5 cartões em 2 colunas: o último ocupa a linha inteira em vez de deixar um vão */
  .vp-ferr-grade > .vp-ferr:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (max-width: 480px) { .vp-ferr { padding: 14px; } .vp-ferr-txt { display: none; } }
/* sino aceso: o veículo já tem alerta */
.alerta-ic--ativo { border-color: var(--verde); background: var(--verde-claro, #e8f6ef); color: var(--verde-escuro); }
[data-tema="escuro"] .alerta-ic--ativo { border-color: #22c27a; background: rgba(34,194,122,.14); color: #4ade80; }
.alerta-ic:disabled { opacity: .4; cursor: not-allowed; }

/* ==========================================================================
   Contraste dos botões verdes
   O verde da marca (#16b364) é claro: com texto branco dá 2,7:1 e com texto
   escuro ficava pesado. Superfície com texto passa a usar um verde mais
   fundo (#0e874e, 4,6:1 com branco, dentro do mínimo de acessibilidade) e
   sempre texto branco. O verde claro continua nos detalhes sem texto:
   barras, pontos, sublinhados.
   ========================================================================== */
:root { --verde-acao: #0e874e; --verde-acao-hover: #0b7a4f; }

.btn-primary, .btn:not(.btn-outline):not(.btn-soft-blue):not(.btn-secondary):not(.btn-danger),
.busca2 button, .chamada2 .btn-verde, .consent .btn, .consent-aceitar,
.chamado-btn, .lado-busca button, .plano-selo, .aba-num.ativo, .pag.ativa, .hero-valor .pil.sobe,
.rodape-boletim button {
  background: var(--verde-acao); border-color: var(--verde-acao); color: #fff;
}
/* só os botões verdes: o contorno (btn-outline) e os suaves têm cor própria,
   e herdar texto branco aqui os deixava ilegíveis ao passar o mouse */
.btn-primary:hover, .btn:not(.btn-outline):not(.btn-soft-blue):not(.btn-secondary):not(.btn-danger):hover,
.busca2 button:hover, .chamada2 .btn-verde:hover,
.chamado-btn:hover, .chamado--comparar:hover .chamado-btn, .lado-busca button:hover, .rodape-boletim button:hover {
  background: var(--verde-acao-hover); border-color: var(--verde-acao-hover); color: #fff;
}
.rodape-redes a:hover { background: var(--verde-acao); color: #fff; }

/* tema escuro: os mesmos botões, sem texto escuro sobre verde */
[data-tema="escuro"] .vp-btn--verde,
[data-tema="escuro"] .aba-num.ativo,
[data-tema="escuro"] .vp-compartilhar .cmp--copiar:hover { background: var(--verde-acao); border-color: var(--verde-acao); color: #fff; }
[data-tema="escuro"] .vp-btn--verde:hover { background: var(--verde-acao-hover); color: #fff; }
[data-tema="escuro"] .vp-sobrou-barra .ok { background: var(--verde-acao); color: #fff; }

/* etiqueta da categoria nas capas: fundo mais fechado e texto branco;
   no amarelo (Mercado) o texto escuro é o que tem contraste */
.post-tag { color: #fff; background: color-mix(in srgb, var(--capa-traco) 70%, #000 30%); }
.post-capa[style*="#e2b340"] .post-tag { background: #e2b340; color: #1f1604; }
[data-tema="escuro"] .chamado-btn, [data-tema="escuro"] .post-tag { color: #fff; }
[data-tema="escuro"] .post-capa[style*="#e2b340"] .post-tag { color: #1f1604; }
/* simulador: tabela parcela a parcela */
.fin-parcelas { max-height: 560px; overflow-y: auto; }
.fin-parcelas thead th { position: sticky; top: 0; z-index: 1; background: var(--vp-card, #fff); }
.fin-parcelas td small { font-size: 11px; color: var(--vp-mut); margin-left: 4px; }
.fin-parcelas .fin-marco td { border-bottom: 2px solid var(--vp-borda-forte, #d7dfe9); }
.fin-parcelas .fin-juros { color: var(--vp-verm-tx, #c62f2f); }
.fin-parcelas tfoot td { font-weight: 700; border-top: 2px solid var(--vp-borda-forte, #d7dfe9); background: var(--vp-suave, #f7f9fc); }
.fin-parcelas tr#virada td { background: rgba(14,135,78,.10); }

/* coração: lista de desejos, ao lado dos botões do topo da página do veículo */
.vp-coracao { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--vp-borda-forte, #d7dfe9); background: var(--vp-card, #fff); transition: border-color .15s, transform .15s; }
.vp-coracao svg { width: 22px; height: 22px; fill: none; stroke: #8a97a8; stroke-width: 1.8; stroke-linejoin: round; transition: fill .15s, stroke .15s; }
.vp-coracao:hover { border-color: #e5484d; }
.vp-coracao:hover svg { stroke: #e5484d; }
.vp-coracao.ativo { border-color: #e5484d; background: #fdeaea; }
.vp-coracao.ativo svg { fill: #e5484d; stroke: #e5484d; }
.pulso-coracao { transform: scale(1.12); }
[data-tema="escuro"] .vp-coracao { background: #13253a; border-color: #2a415c; }
[data-tema="escuro"] .vp-coracao.ativo { background: rgba(229,72,77,.16); border-color: #e5484d; }

/* guias: abertura em cartão, com os destaques ao lado */
.guia-topo { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; margin: 4px 0 22px; }
.guia-topo .guia-abertura { max-width: none; margin: 0; padding: 26px 30px; border-radius: 16px;
  background: var(--vp-card, #fff); border: 1px solid var(--vp-borda, #e5eaf1); }
.guia-resumo { margin: 16px 0 0 !important; padding-top: 14px; border-top: 1px solid var(--vp-borda, #e5eaf1); font-size: 15px !important; }
.guia-destaques { padding: 22px; border-radius: 16px; background: var(--vp-card, #fff); border: 1px solid var(--vp-borda, #e5eaf1);
  display: flex; flex-direction: column; gap: 4px; }
.guia-destaques > b { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--vp-mut, #55647a); margin-bottom: 8px; }
.guia-dest { display: flex; align-items: center; gap: 12px; padding: 10px 6px; border-radius: 10px; color: var(--vp-tx, #0f1b2d); }
.guia-dest:hover { background: var(--vp-suave, #f7f9fc); color: var(--vp-tx, #0f1b2d); }
.guia-dest-pos { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: #0b2033; color: #fff; font-size: 13px; font-weight: 700; }
.guia-dest-nome { flex: 1; min-width: 0; font-weight: 600; font-size: 14.5px; }
.guia-dest-nome small { display: block; font-weight: 400; font-size: 12px; color: var(--vp-mut, #55647a); }
.guia-dest-num { font-weight: 700; font-size: 15px; white-space: nowrap; }
.guia-dest-num small { font-weight: 400; font-size: 11px; color: var(--vp-mut, #55647a); }
.guia-dest-num.sobe { color: var(--vp-verde, #0b7a4f); }
.guia-dest-num.desce { color: var(--vp-verm-tx, #c62f2f); }
[data-tema="escuro"] .guia-dest-pos { background: #1f3550; }
@media (max-width: 960px) { .guia-topo { grid-template-columns: 1fr; } }

/* planos: seletor de faixa (Elite 4, 8 e 12 usuários) */
.plano-faixas { display: flex; gap: 4px; padding: 4px; margin: 4px 0 14px; border-radius: 10px; background: var(--cinza-100, #f1f5f9); }
.plano-faixa { flex: 1; padding: 8px 4px; border: 0; border-radius: 7px; background: none; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--cinza-700); white-space: nowrap; }
.plano-faixa.ativa { background: #fff; color: var(--noite-texto); box-shadow: 0 1px 3px rgba(15,27,45,.12); }
[data-tema="escuro"] .plano-faixas { background: #0f2033; }
[data-tema="escuro"] .plano-faixa.ativa { background: #1f3550; color: #fff; }

/* planos: chave mensal/anual e três cartões */
.planos-ciclo { display: flex; width: max-content; margin: 0 auto 22px; padding: 5px; gap: 4px; border-radius: 12px;
  background: var(--cinza-100, #f1f5f9); border: 1px solid var(--cinza-200); }
.ciclo-bt { padding: 10px 22px; border: 0; border-radius: 9px; background: none; cursor: pointer;
  font: inherit; font-size: 14.5px; font-weight: 600; color: var(--cinza-700); }
.ciclo-bt em { font-style: normal; font-size: 11.5px; font-weight: 700; margin-left: 6px; padding: 2px 8px;
  border-radius: 99px; background: #e8f6ef; color: #0b7a4f; }
.ciclo-bt.ativo { background: #fff; color: var(--noite-texto); box-shadow: 0 1px 3px rgba(15,27,45,.12); }
.planos-grade--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
.plano-equivale { margin: -2px 0 8px; font-size: 13px; color: var(--cinza-700); }
.plano-equivale b { color: #0b7a4f; }
.plano-var { display: flex; flex-direction: column; }
[data-tema="escuro"] .planos-ciclo { background: #0f2033; border-color: #22364d; }
[data-tema="escuro"] .ciclo-bt.ativo { background: #1f3550; color: #fff; }
[data-tema="escuro"] .ciclo-bt em { background: rgba(34,194,122,.16); color: #4ade80; }
@media (max-width: 900px) { .planos-grade--3 { grid-template-columns: 1fr; } }
/* planos: recurso prometido que ainda não existe */
.plano-itens .item-breve { color: var(--cinza-500); }
.selo-breve { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 99px; font-size: 11px; font-weight: 700;
  background: #fbf2e1; color: #8a5a10; vertical-align: 1px; }
[data-tema="escuro"] .selo-breve { background: rgba(240,195,90,.16); color: #f0c35a; }

/* ---------- sazonalidade na página do veículo ---------- */
.vp-saz { position: relative; overflow: hidden;
  /* cor de cada mês = cor da barra. No claro, o mesmo tom mais fechado:
     o verde e o ouro das barras não passam de 3:1 como texto em fundo branco */
  --saz-compra: #067a46; --saz-venda: #8a5a10; }
[data-tema="escuro"] .vp-saz { --saz-compra: #16b364; --saz-venda: #e2b340; }
.vp-saz-corpo { padding: 16px 20px 18px; }
.vp-saz-par { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.vp-saz-par div { padding: 10px 12px; border-radius: 10px; background: var(--vp-suave); }
.vp-saz-par span { display: block; font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--vp-mut); }
.vp-saz-par b { display: block; margin-top: 2px; font-size: 14.5px; color: var(--vp-tx); }
.vp-saz-par div:first-child b { color: var(--saz-compra); }
.vp-saz-par div:last-child b { color: var(--saz-venda); }
/* a legenda dos meses fica abaixo da área das barras: antes, a barra mais
   funda cobria a letra do próprio mês */
.vp-saz-barras { display: flex; gap: 4px; height: 90px; align-items: center; margin-bottom: 26px; }
.vp-saz-b { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: center; position: relative; }
.vp-saz-b i { position: absolute; left: 15%; right: 15%; border-radius: 3px; }
.vp-saz-b i.alto { bottom: 50%; background: #e2b340; }
.vp-saz-b i.baixo { top: 50%; background: #16b364; }
.vp-saz-b span { position: absolute; bottom: -20px; left: 0; right: 0; text-align: center; font-size: 11px; font-weight: 700; color: var(--vp-mut); }
.vp-saz-b span.baixo { color: var(--saz-compra); }
.vp-saz-b span.alto  { color: var(--saz-venda); }
.vp-saz-nota { margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: var(--vp-mut); }
/* trancada: os meses ficam borrados e o convite aparece por cima */
.vp-saz--trancada .vp-saz-corpo { filter: blur(6px); user-select: none; pointer-events: none; }
.vp-saz-tranca { position: absolute; inset: 56px 0 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 16px 24px; text-align: center; background: color-mix(in srgb, var(--vp-card, #fff) 55%, transparent); }
.vp-saz-tranca b { font-size: 15px; color: var(--vp-tx); }
/* Variação por período: só as linhas de 1, 3 e 6 meses trancadas */
.vp-per-trancado { position: relative; }
/* ranking: do 5º em diante trancado para quem não tem conta */
.rank-trancado { position: relative; }
.rank-borrao { filter: blur(6px); user-select: none; pointer-events: none; }
.rank-tranca { inset: 0; justify-content: flex-start; padding-top: 48px; background: none; }
.rank-tranca b { color: var(--noite-texto, #0f1b2d); }
.rank-tranca span { color: var(--cinza-700, #475569); }
body.site[data-tema="escuro"] .rank-tranca b { color: #e8eef5; }
body.site[data-tema="escuro"] .rank-tranca span { color: #c9d6e2; }
.vp-per-borrao { filter: blur(6px); user-select: none; pointer-events: none; }
.vp-per-tranca { inset: 0; }
.vp-saz-tranca span { font-size: 13px; color: var(--vp-mut); margin-bottom: 6px; }

/* conta: primeiros passos */
.passos-barra { height: 6px; margin: 16px 20px 0; border-radius: 99px; background: var(--cinza-100, #eef2f6); overflow: hidden; }
.passos-barra i { display: block; height: 100%; background: #16b364; }
.passos-lista { padding: 8px 20px 4px; }
.passo { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--cinza-200); }
.passo:first-child { border-top: 0; }
.passo-n { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font-size: 13px; font-weight: 700; background: var(--noite-claro, #e9eef4); color: var(--noite, #0b2033); }
.passo.feito .passo-n { background: #0e874e; color: #fff; }
.passo-txt { flex: 1; min-width: 0; }
.passo-txt b { display: block; font-size: 14.5px; }
.passo-txt small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--cinza-500); line-height: 1.5; }
.passo.feito .passo-txt b { text-decoration: line-through; color: var(--cinza-500); }
[data-tema="escuro"] .passos-barra { background: #1f3550; }
[data-tema="escuro"] .passo { border-top-color: #22364d; }
[data-tema="escuro"] .passo-n { background: #1f3550; color: #e8eef5; }

.passos .card-footer { display: flex; justify-content: flex-end; }
.passos-dispensar { font-size: 13px !important; color: var(--cinza-500) !important; }
.passos-dispensar:hover { color: var(--noite-texto) !important; text-decoration: underline; }

/* ---------- capa: leitura do mês ---------- */
.leitura2 { background: #fff; border: 1px solid var(--cinza-200); border-radius: 18px; padding: 26px 28px; box-shadow: var(--sombra-sm, 0 1px 3px rgba(15,27,45,.06)); }
.leitura2-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 20px; }
.leitura2-cab .rot { margin: 0 0 4px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--cinza-500); }
.leitura2-cab h3 { margin: 0; font-size: 24px; letter-spacing: -.02em; color: var(--noite-texto); }
.leitura2-cab .cta { white-space: nowrap; }
.leitura2-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.lnum { padding: 16px 18px; border-radius: 14px; background: var(--cinza-100, #f4f6f9); }
.lnum span { display: block; font-size: 12.5px; color: var(--cinza-700); }
.lnum b { display: block; white-space: nowrap; margin: 6px 0 2px; font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--noite-texto); }
.lnum b.sobe { color: #0e874e; }
.lnum b.desce { color: #c62f2f; }
.lnum small { display: block; font-size: 12px; color: var(--cinza-500); }
.lnum--forte.ruim { background: #fdeceb; }
.lnum--forte.ruim b { color: #c62f2f; }
.lnum--forte.bom { background: #e8f6ef; }
.lnum--forte.bom b { color: #0e874e; }
.leitura2-barra { margin-top: 18px; }
.lb-trilho { display: flex; height: 10px; border-radius: 99px; overflow: hidden; background: var(--cinza-100); }
.lb-trilho i { display: block; height: 100%; }
.lb-alta { background: #16b364; }
.lb-queda { background: #e5484d; }
.lb-legenda { display: flex; gap: 18px; margin-top: 8px; font-size: 13px; color: var(--cinza-700); }
.lb-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.lb-legenda i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.lb-legenda b { color: var(--noite-texto); }
[data-tema="escuro"] .leitura2 { background: #13253a; border-color: #22364d; }
[data-tema="escuro"] .leitura2-cab h3, [data-tema="escuro"] .lnum b, [data-tema="escuro"] .lb-legenda b { color: #e8eef5; }
[data-tema="escuro"] .lnum { background: #0f2033; }
[data-tema="escuro"] .lnum span, [data-tema="escuro"] .lb-legenda { color: #9fb3c4; }
[data-tema="escuro"] .lnum b.sobe, [data-tema="escuro"] .lnum--forte.bom b { color: #4ade80; }
[data-tema="escuro"] .lnum b.desce, [data-tema="escuro"] .lnum--forte.ruim b { color: #f87171; }
[data-tema="escuro"] .lnum--forte.ruim { background: rgba(229,72,77,.14); }
[data-tema="escuro"] .lnum--forte.bom { background: rgba(34,194,122,.14); }
[data-tema="escuro"] .lb-trilho { background: #0f2033; }
@media (max-width: 900px) { .leitura2-nums { grid-template-columns: 1fr 1fr; } .leitura2-cab { flex-direction: column; align-items: flex-start; } }
@media (max-width: 520px) { .leitura2 { padding: 20px 16px; } .lnum { padding: 14px; } .lnum b { font-size: 21px; } .leitura2-cab h3 { font-size: 20px; } }

/* ---------- páginas de texto (metodologia, termos, privacidade, cookies,
   quem somos): o texto num cartão branco, como nos artigos do blog ---------- */
.dentro--leitura.texto { background: #fff; border: 1px solid var(--cinza-200); border-radius: 18px;
  box-shadow: var(--sombra-sm, 0 1px 3px rgba(15,27,45,.06));
  padding: 44px 52px 48px; margin-top: 36px; margin-bottom: 56px; }
.dentro--leitura.texto > h1:first-child { margin-top: 0; }
.dentro--leitura.texto h2 { padding-top: 22px; border-top: 1px solid var(--cinza-200); }
.dentro--leitura.texto h1 + .atualizado + h2,
.dentro--leitura.texto h1 + h2 { border-top: 0; padding-top: 0; }
[data-tema="escuro"] .dentro--leitura.texto { background: #13253a; border-color: #22364d; }
[data-tema="escuro"] .dentro--leitura.texto h2 { border-top-color: #22364d; }
@media (max-width: 720px) {
  .dentro--leitura.texto { padding: 26px 20px 30px; margin: 18px 12px 32px; border-radius: 14px; }
}

/* ================================================================
   Capa v3 — corpo da home (aprovado em 24/09/2026, opção A)
   ----------------------------------------------------------------
   Menu, hero e rodapé continuam com as regras de antes. Aqui tudo
   é por variável: o tema escuro troca só as variáveis no fim do
   bloco, e o gerar-escuro.py não precisa conhecer estas classes.
   ================================================================ */
.hm {
  --hm-cartao: #ffffff;      --hm-borda: #e2e8f0;     --hm-borda-2: #eef1f6;
  --hm-suave: #f6f8fa;       --hm-suave-2: #f1f5f9;
  --hm-tinta: #102a43;       --hm-texto: #4a5b70;     --hm-fraco: #5b6b7f;   --hm-n: #8391a4;
  --hm-verde: #16b364;       --hm-verde-tx: #067a46;  --hm-verde-bg: #e7f8ef;
  --hm-verm: #e5484d;        --hm-verm-tx: #b42a31;   --hm-verm-bg: #fdecec;
  --hm-noite: #0b2033;       --hm-noite-2: #071827;
  --hm-spark: #1f4a70;       --hm-sombra: 0 12px 28px -16px rgba(15,23,42,.3);
  color: var(--hm-texto);
}
.hm a { color: inherit; text-decoration: none; }
.hm h2, .hm h3 { margin: 0; }
.hm-dentro { width: 100%; max-width: var(--medida, 1280px); margin-inline: auto; padding: 0 24px; }
.hm-secao { padding: 72px 0 0; }
.hm-secao--primeira { padding-top: 64px; }
.hm-secao--ultima { padding-bottom: 88px; }

/* rótulo de seção: mono, maiúsculas, bolinha verde */
.hm-olho { display: inline-flex; align-items: center; gap: 8px; font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; color: var(--hm-verde-tx); }
.hm-olho::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--hm-verde); flex-shrink: 0; }
.hm-olho--escuro { color: #4ade80; }
.hm-olho--escuro::before { background: #4ade80; }

.hm-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.hm-cab > div { display: flex; flex-direction: column; gap: 8px; }
.hm-cab h2 { font-size: 34px; line-height: 1.12; font-weight: 800; letter-spacing: -.8px; color: var(--hm-tinta); }
.hm-cab p { margin: 0; font-size: 15.5px; color: var(--hm-texto); max-width: 640px; }

.hm-link { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700;
  color: var(--hm-verde-tx) !important; white-space: nowrap; font-style: normal; }
.hm-link:hover { color: var(--hm-verde) !important; }
.hm-btn { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 20px; border-radius: 10px;
  background: var(--hm-verde); color: #ffffff !important; font-size: 15px; font-weight: 700; align-self: flex-start;
  transition: background .15s; }
.hm-btn:hover { background: #079455; }
.hm-btn-contorno { display: inline-flex; align-items: center; height: 46px; padding: 0 20px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.35); color: #ffffff !important; font-size: 15px; font-weight: 700; }
.hm-btn-contorno:hover { border-color: #ffffff; }
.hm-btn--grande { height: 52px; padding: 0 26px; font-size: 16px; }

.hm-tile { background: var(--hm-cartao); border: 1px solid var(--hm-borda); border-radius: 18px;
  transition: border-color .15s, box-shadow .15s, transform .15s; }
.hm-tile:hover { border-color: var(--hm-n); box-shadow: var(--hm-sombra); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .hm-tile, .hm-tile:hover { transform: none; transition: none; } }

.hm-selo { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hm-selo.sobe { background: var(--hm-verde-bg); color: var(--hm-verde-tx); }
.hm-selo.cai  { background: var(--hm-verm-bg);  color: var(--hm-verm-tx); }

/* ---------- minigráfico ---------- */
.hm-spark { display: block; width: 100%; height: 100%; overflow: visible; }
.hm-spark-area { fill: var(--hm-spark); fill-opacity: .07; }
.hm-spark-linha { fill: none; stroke: var(--hm-spark); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.hm-spark--sobe .hm-spark-linha { stroke: var(--hm-verde); }
.hm-spark--cai  .hm-spark-linha { stroke: var(--hm-verm); }
.hm-spark-anel  { stroke: var(--hm-cartao); stroke-width: 13; stroke-linecap: round; }
.hm-spark-ponto { stroke-width: 9; stroke-linecap: round; }
.hm-spark-ponto.sobe { stroke: var(--hm-verde); }
.hm-spark-ponto.cai  { stroke: var(--hm-verm); }

/* ---------- 1. faixa de marcas ---------- */
.hm-marcas { background: var(--hm-cartao); border-bottom: 1px solid var(--hm-borda); }
.hm-marcas-cx { display: flex; align-items: center; gap: 28px; min-height: 116px; }
.hm-marcas-rot { display: flex; flex-direction: column; gap: 2px; width: 150px; flex-shrink: 0; font-size: 14px; color: var(--hm-texto); }
.hm-marcas-grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; flex-grow: 1; }
.hm-marca { height: 76px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; border: 1px solid transparent; transition: border-color .15s, background .15s; }
.hm-marca:hover { border-color: var(--hm-borda); background: var(--hm-suave); }
.hm-marca-logo { height: 32px; max-width: 100%; padding: 0 4px; display: flex; align-items: center; justify-content: center; }
.hm-marca-logo img { max-width: 100%; max-height: 32px; width: auto; height: auto; }
.hm-marca-logo b { font-size: 17px; font-weight: 800; color: var(--hm-tinta); letter-spacing: .5px; }
.hm-marca small { font-size: 11.5px; font-weight: 600; color: var(--hm-fraco); font-variant-numeric: tabular-nums; }
.hm-marca--todas { background: var(--hm-suave-2); font-size: 13px; font-weight: 700; color: var(--hm-tinta);
  text-align: center; line-height: 1.2; padding: 0 6px; }
.hm-marca--todas svg { color: var(--hm-verde-tx); }

/* ---------- 2. termômetro do mês ---------- */
.hm-termo { display: grid; grid-template-columns: 440px minmax(0, 1fr); background: var(--hm-cartao);
  border: 1px solid var(--hm-borda); border-radius: 20px; overflow: hidden; box-shadow: 0 10px 30px -18px rgba(15,23,42,.25); }
.hm-termo-lado { background: var(--hm-noite); color: #ffffff; padding: 36px 36px 32px; display: flex; flex-direction: column; gap: 18px; }
.hm-termo-lado h2 { font-size: 30px; line-height: 1.15; font-weight: 800; letter-spacing: -.6px; color: #ffffff; }
.hm-termo-destaque { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.hm-termo-destaque span { font-size: 14px; color: #cbd5e1; }
.hm-termo-destaque b { font-size: 64px; line-height: 1; font-weight: 800; letter-spacing: -2px; font-variant-numeric: tabular-nums; }
.hm-termo-destaque b.cai { color: #ff8a8e; }
.hm-termo-destaque b.sobe { color: #4ade80; }
/* mostrador em meia-lua do termômetro */
.hm-mostr-cx { display: flex; flex-direction: column; align-items: center; margin: 4px 0 2px; }
.hm-mostr { width: 100%; max-width: 320px; height: auto; display: block; overflow: visible; }
.hm-mostr-arco { fill: none; stroke-width: 16; stroke-linecap: round; }
.hm-mostr-marca { stroke: rgba(255,255,255,.35); stroke-width: 1.5; }
.hm-mostr-marca.grande { stroke: rgba(255,255,255,.7); stroke-width: 2; }
.hm-mostr-rot { font-size: 12px; font-weight: 600; fill: #cbd5e1; font-family: inherit; }
.hm-mostr-ponteiro { stroke-width: 5; stroke-linecap: round; }
.hm-mostr-ponteiro.cai, .hm-mostr-eixo.cai { stroke: #ff8a8e; fill: #ff8a8e; }
.hm-mostr-ponteiro.sobe, .hm-mostr-eixo.sobe { stroke: #4ade80; fill: #4ade80; }
.hm-mostr-eixo { stroke-width: 4; stroke: #0b2033 !important; }
.hm-mostr-valor { margin-top: -6px; font-size: 44px; line-height: 1; font-weight: 800; letter-spacing: -1.5px; font-variant-numeric: tabular-nums; }
.hm-mostr-valor.cai { color: #ff8a8e; } .hm-mostr-valor.sobe { color: #4ade80; }
.hm-mostr-leg { margin-top: 6px; font-size: 13px; color: #cbd5e1; text-align: center; }
.hm-termo-lado p { margin: 0; font-size: 14.5px; line-height: 1.55; color: #cbd5e1; }
.hm-termo-lado .hm-btn { margin-top: auto; }
.hm-termo-corpo { padding: 36px 40px 32px; display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.hm-termo-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hm-termo-nums > div { display: flex; flex-direction: column; gap: 6px; padding: 0 28px; border-left: 1px solid var(--hm-borda); }
.hm-termo-nums > div:first-child { padding-left: 0; border-left: 0; }
.hm-termo-nums span { font-size: 13.5px; font-weight: 600; color: var(--hm-texto); }
.hm-termo-nums b { font-size: 36px; line-height: 1.05; font-weight: 800; letter-spacing: -1px; color: var(--hm-tinta);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.hm-termo-nums b.cai { color: var(--hm-verm-tx); }
.hm-termo-nums b.sobe { color: var(--hm-verde-tx); }
.hm-termo-nums small { font-size: 13px; color: var(--hm-fraco); }
/* soma da variação na tabela inteira, no mês: saldo | subiram | caíram + barra em reais */
.hm-soma { margin-top: 26px; padding: 20px 22px 18px; border-radius: 14px; border: 1px solid var(--hm-borda);
  background: var(--hm-suave, rgba(127,127,127,.06)); }
.hm-soma-grade { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); }
.hm-soma-grade > div { display: flex; flex-direction: column; gap: 5px; padding: 0 22px; border-left: 1px solid var(--hm-borda); min-width: 0; }
.hm-soma-grade > div:first-child { padding-left: 0; border-left: 0; }
.hm-soma-rot { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--hm-fraco); }
.hm-soma-rot i { font-style: normal; font-size: 9px; }
.hm-soma-lado.sobe .hm-soma-rot i { color: var(--hm-verde); } .hm-soma-lado.cai .hm-soma-rot i { color: var(--hm-verm); }
.hm-soma b { font-size: 22px; line-height: 1.15; font-weight: 800; letter-spacing: -.4px; color: var(--hm-tinta); white-space: nowrap; }
.hm-soma-saldo b { font-size: 30px; letter-spacing: -.8px; }
.hm-soma b.cai, .hm-soma-lado.cai b { color: var(--hm-verm-tx); }
.hm-soma b.sobe, .hm-soma-lado.sobe b { color: var(--hm-verde-tx); }
.hm-soma small { font-size: 12.5px; color: var(--hm-fraco); }
.hm-soma-barra { display: flex; height: 8px; margin-top: 18px; border-radius: 99px; overflow: hidden; gap: 3px; }
.hm-soma-barra i { display: block; height: 100%; border-radius: 99px; }
.hm-soma-barra i.sobe { background: var(--hm-verde); } .hm-soma-barra i.cai { flex: 1; background: var(--hm-verm); }
.hm-soma-nota { margin: 8px 0 0; font-size: 12px; color: var(--hm-fraco); }
@media (max-width: 700px) {
  .hm-soma-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 16px; }
  .hm-soma-saldo { grid-column: 1 / -1; padding: 0 0 16px !important; border-bottom: 1px solid var(--hm-borda); }
  .hm-soma-lado.sobe { padding-left: 0 !important; border-left: 0 !important; }
  .hm-soma-saldo b { font-size: 26px; }
}
.hm-termo-barra { display: flex; flex-direction: column; gap: 12px; padding-top: 24px; border-top: 1px solid var(--hm-borda-2); }
.hm-termo-barra-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.hm-termo-barra-cab b { font-size: 15px; color: var(--hm-tinta); }
.hm-termo-barra-cab span { font-size: 13px; color: var(--hm-fraco); }
.hm-trilho { display: flex; height: 14px; border-radius: 999px; overflow: hidden; gap: 3px; }
.hm-trilho i { display: block; }
.hm-trilho i.sobe { background: var(--hm-verde); }
.hm-trilho i.cai { background: var(--hm-verm); flex-grow: 1; }
.hm-trilho-leg { display: flex; align-items: center; gap: 28px; font-size: 14px; color: var(--hm-texto); flex-wrap: wrap; }
.hm-trilho-leg > span { display: inline-flex; align-items: center; gap: 8px; }
.hm-trilho-leg i { width: 10px; height: 10px; border-radius: 3px; }
.hm-trilho-leg i.sobe { background: var(--hm-verde); }
.hm-trilho-leg i.cai { background: var(--hm-verm); }
.hm-trilho-leg b { color: var(--hm-tinta); }
.hm-trilho-leg .hm-link { margin-left: auto; font-size: 14px; }
.hm-termo-mov { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding-top: 24px; border-top: 1px solid var(--hm-borda-2); }
.hm-termo-mov > div { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.hm-termo-mov > div > b { font-size: 13.5px; color: var(--hm-tinta); }
.hm-mov { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; background: var(--hm-suave); }
.hm-mov:hover { background: var(--hm-borda-2); }
.hm-mov > span:first-child { display: flex; flex-direction: column; min-width: 0; flex-grow: 1; }
.hm-mov b { font-size: 14px; color: var(--hm-tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-mov small { font-size: 12.5px; color: var(--hm-fraco); }

/* ---------- 3. ferramentas ---------- */
.hm-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(214px, auto)); gap: 16px; }
.hm-bento-grande { grid-column: span 2; grid-row: span 2; }
/* item de grade encolhe abaixo do texto mais largo (nome de carro sem quebra) */
.hm-bento > *, .hm-pop > *, .hm-duplo > *, .hm-blog > *, .hm-conta-grade > * { min-width: 0; }
.hm-comp-rot > span { min-width: 0; }
.hm-tile--escuro { background: var(--hm-noite); border-color: var(--hm-noite); color: #ffffff; padding: 32px;
  display: flex; flex-direction: column; gap: 14px; }
.hm-tile--escuro:hover { border-color: #16344d; }
.hm-tile-titulo { font-size: 30px; line-height: 1.15; font-weight: 800; letter-spacing: -.6px; color: #ffffff; max-width: 440px; }
.hm-tile-sub { font-size: 15px; color: #cbd5e1; max-width: 460px; }
.hm-comp { margin-top: auto; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 14px;
  padding: 20px 22px; display: flex; flex-direction: column; gap: 16px; }
.hm-comp-linha { display: flex; flex-direction: column; gap: 8px; }
.hm-comp-rot { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: #e2e8f0; }
.hm-comp-rot > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-comp-rot b { color: #ffffff; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hm-comp-trilho { height: 10px; border-radius: 999px; background: rgba(255,255,255,.08); }
.hm-comp-trilho i { display: block; height: 10px; border-radius: 999px; }
.hm-comp-trilho i.cai { background: #ff8a8e; }
.hm-comp-trilho i.sobe { background: #4ade80; }
.hm-comp small { font-size: 12.5px; color: #cbd5e1; }
.hm-ferr { padding: 26px; display: flex; flex-direction: column; gap: 10px; }
.hm-ferr b { margin-top: auto; font-size: 19px; font-weight: 800; letter-spacing: -.3px; color: var(--hm-tinta); }
.hm-ferr > span:last-child { font-size: 14.5px; line-height: 1.45; color: var(--hm-texto); }
.hm-ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; }
.hm-ic--verde { background: #e7f8ef; color: #067a46; }
.hm-ic--noite { background: #eaf2f8; color: #0b2033; }
.hm-ic--ouro  { background: #fdf4e0; color: #8a5a00; }
.hm-ic--anil  { background: #eef0fb; color: #3b4bb3; }

/* ---------- 4. mais consultados ---------- */
.hm-pop { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.hm-carro { padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hm-carro-marca { font-size: 12.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--hm-fraco); }
.hm-carro-nome { font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--hm-tinta); min-height: 44px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hm-carro-graf { display: block; height: 64px; margin: 8px 0 6px; }
.hm-carro-pe { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hm-carro-pe > b { font-size: 24px; font-weight: 800; letter-spacing: -.5px; color: var(--hm-tinta); font-variant-numeric: tabular-nums; }
.hm-carro > small { font-size: 12.5px; color: var(--hm-fraco); }

/* ---------- 5. quem segura x quem derrete ---------- */
.hm-duplo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.hm-rank { background: var(--hm-cartao); border: 1px solid var(--hm-borda); border-radius: 18px; overflow: hidden; }
.hm-rank-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 24px; }
.hm-rank-cab h3 { font-size: 18px; font-weight: 800; }
.hm-rank-cab span { font-size: 13px; font-weight: 600; }
.hm-rank--sobe .hm-rank-cab { background: var(--hm-verde-bg); color: var(--hm-verde-tx); }
.hm-rank--cai  .hm-rank-cab { background: var(--hm-verm-bg);  color: var(--hm-verm-tx); }
.hm-rank-cab h3 { color: inherit; }
.hm-rank-linha { display: flex; align-items: center; gap: 16px; padding: 14px 24px; border-top: 1px solid var(--hm-borda-2); }
.hm-rank-linha:first-of-type { border-top: 0; }
.hm-rank-linha:hover { background: var(--hm-suave); }
.hm-rank-n { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 20px; color: var(--hm-n); width: 30px; flex-shrink: 0; }
.hm-rank-nome { display: flex; flex-direction: column; gap: 2px; flex-grow: 1; min-width: 0; }
.hm-rank-nome b { font-size: 15px; color: var(--hm-tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-rank-nome small { font-size: 13px; color: var(--hm-fraco); }
.hm-rank-graf { width: 110px; height: 34px; flex-shrink: 0; }
.hm-rank-num { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; width: 110px; flex-shrink: 0; }
.hm-rank-num b { font-size: 15px; color: var(--hm-tinta); font-variant-numeric: tabular-nums; }

/* ---------- 6. conta gratuita ---------- */
.hm-conta { margin-top: 80px; padding-top: 64px; color: #ffffff;
  background: radial-gradient(900px 400px at 85% 0%, rgba(22,179,100,.16), transparent 60%), var(--hm-noite-2); }
.hm-conta-grade { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 64px; align-items: center; }
.hm-conta-txt { display: flex; flex-direction: column; gap: 18px; }
.hm-conta-txt h2 { font-size: 38px; line-height: 1.12; font-weight: 800; letter-spacing: -1px; color: #ffffff; }
.hm-conta-txt > p { margin: 0; font-size: 16.5px; line-height: 1.55; color: #cbd5e1; max-width: 560px; }
.hm-conta-txt ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; }
.hm-conta-txt li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.4; color: #e2e8f0; }
.hm-conta-txt li svg { color: #4ade80; flex-shrink: 0; margin-top: 1px; }
.hm-conta-txt li b { display: block; color: #ffffff; }
.hm-conta-acoes { display: flex; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.hm-vitrine { background: var(--hm-cartao); border-radius: 18px; padding: 24px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.55);
  color: var(--hm-tinta); display: flex; flex-direction: column; gap: 14px; }
.hm-vitrine-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.hm-vitrine-cab b { font-size: 15px; font-weight: 800; }
.hm-vitrine-cab span { font-size: 12.5px; font-weight: 700; color: var(--hm-verde-tx); background: var(--hm-verde-bg);
  padding: 4px 10px; border-radius: 999px; }
.hm-vitrine-carro { border: 1px solid var(--hm-borda); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.hm-vitrine-carro .hm-carro-nome { min-height: 0; font-size: 16px; }
.hm-vitrine-carro .hm-carro-graf { height: 70px; margin: 4px 0; }
.hm-vitrine-alerta { display: flex; gap: 10px; align-items: center; background: var(--hm-suave); border-radius: 12px;
  padding: 12px 14px; font-size: 13.5px; color: var(--hm-texto); }
.hm-vitrine-alerta svg { color: var(--hm-tinta); flex-shrink: 0; }
.hm-numeros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 56px; }
.hm-numeros > div { padding: 26px 0 30px 28px; display: flex; flex-direction: column; gap: 4px;
  border-top: 1px solid rgba(255,255,255,.12); border-left: 1px solid rgba(255,255,255,.12); }
.hm-numeros > div:first-child { padding-left: 0; border-left: 0; }
.hm-numeros b { font-size: 28px; font-weight: 800; letter-spacing: -.6px; color: #ffffff; font-variant-numeric: tabular-nums; }
.hm-numeros span { font-size: 14px; color: #cbd5e1; }

/* ---------- 7. guias e análises ---------- */
.hm-blog { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; }
.hm-blog-lista { display: flex; flex-direction: column; gap: 16px; }
.hm-post { padding: 16px; display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 18px; align-items: center; }
.hm-post--destaque { padding: 18px; display: flex; flex-direction: column; gap: 16px; align-items: stretch; }
.hm-post-capa { position: relative; display: block; height: 112px; border-radius: 12px; overflow: hidden; background: var(--capa-fundo, #0b2033); }
.hm-post-capa--grande { height: auto; min-height: 250px; flex-grow: 1; }
/* capa com arte própria (1250x650): mostra inteira, na proporção dela */
.hm-post-capa.tem-foto { height: auto; min-height: 0; flex-grow: 0; aspect-ratio: 1250 / 650; }
.hm-blog-lista > .hm-post { flex-grow: 1; }
.hm-post-capa svg, .hm-post-capa img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hm-post-tag { position: absolute; left: 14px; top: 14px; font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: #ffffff; background: rgba(7,24,39,.55); padding: 4px 10px; border-radius: 999px; }
.hm-post-txt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hm-post-txt b { font-size: 17px; line-height: 1.3; font-weight: 800; color: var(--hm-tinta); }
.hm-post-txt > span { font-size: 14px; line-height: 1.45; color: var(--hm-texto); }
.hm-post--destaque .hm-post-txt { padding: 0 6px 6px; gap: 8px; }
.hm-post--destaque .hm-post-txt b { font-size: 24px; line-height: 1.2; letter-spacing: -.4px; }
.hm-post--destaque .hm-post-txt > span { font-size: 15.5px; line-height: 1.5; }
.hm-post--destaque .hm-link { margin-top: 4px; font-size: 14.5px; }

/* ---------- responsivo ---------- */
@media (max-width: 1180px) {
  .hm-marcas-grade { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .hm-marcas-cx { flex-direction: column; align-items: stretch; gap: 12px; padding-top: 20px; padding-bottom: 16px; }
  .hm-marcas-rot { width: auto; flex-direction: row; align-items: baseline; gap: 12px; }
  .hm-termo { grid-template-columns: minmax(0, 1fr); }
  .hm-termo-lado .hm-btn { margin-top: 6px; }
  .hm-conta-grade { grid-template-columns: minmax(0, 1fr) 400px; gap: 40px; }
}
@media (max-width: 960px) {
  .hm-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
  .hm-ferr { min-height: 190px; }
  .hm-pop { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-duplo, .hm-blog { grid-template-columns: minmax(0, 1fr); }
  .hm-conta-grade { grid-template-columns: minmax(0, 1fr); }
  .hm-vitrine { max-width: 520px; }
  .hm-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-numeros > div:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 640px) {
  .hm-post-capa.tem-foto { height: auto; }
  .hm-secao { padding-top: 52px; }
  .hm-secao--primeira { padding-top: 32px; }
  .hm-dentro { padding: 0 16px; }
  .hm-cab { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
  .hm-cab h2 { font-size: 27px; }
  .hm-marcas-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hm-marca:nth-child(n+8):not(.hm-marca--todas) { display: none; }
  .hm-termo-lado { padding: 28px 22px 24px; }
  .hm-termo-lado h2 { font-size: 25px; }
  .hm-termo-destaque b { font-size: 52px; }
  .hm-termo-corpo { padding: 24px 20px; gap: 22px; }
  .hm-termo-nums { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .hm-termo-nums > div { padding: 0; border-left: 0; }
  .hm-termo-nums b { font-size: 30px; }
  .hm-trilho-leg .hm-link { margin-left: 0; }
  .hm-termo-mov { grid-template-columns: minmax(0, 1fr); }
  .hm-bento { grid-template-columns: minmax(0, 1fr); }
  .hm-bento-grande { grid-column: auto; grid-row: auto; }
  .hm-tile--escuro { padding: 24px 20px; }
  .hm-tile-titulo { font-size: 25px; }
  .hm-ferr { min-height: 0; }
  .hm-pop { grid-template-columns: minmax(0, 1fr); }
  .hm-rank-cab { padding: 16px 18px; flex-direction: column; align-items: flex-start; gap: 2px; }
  .hm-rank-linha { padding: 12px 16px; gap: 12px; }
  .hm-rank-graf { display: none; }
  .hm-conta { margin-top: 56px; padding-top: 44px; }
  .hm-conta-txt h2 { font-size: 29px; }
  .hm-conta-txt ul { grid-template-columns: minmax(0, 1fr); }
  .hm-conta-acoes .hm-btn, .hm-conta-acoes .hm-btn-contorno { flex-grow: 1; justify-content: center; }
  .hm-post { grid-template-columns: 110px minmax(0, 1fr); gap: 14px; padding: 12px; }
  .hm-post-capa { height: 84px; }
  .hm-post-txt > span { display: none; }
  .hm-post--destaque .hm-post-txt > span { display: block; }
  .hm-post-capa--grande { min-height: 180px; }
}

/* ---------- tema escuro: só as variáveis mudam ---------- */
body.site[data-tema="escuro"] .hm {
  --hm-cartao: #13253a;   --hm-borda: #22364d;   --hm-borda-2: #1c2f45;
  --hm-suave: #172b42;    --hm-suave-2: #1a3050;
  --hm-tinta: #e8eef5;    --hm-texto: #c9d6e2;   --hm-fraco: #9fb3c4;   --hm-n: #6f8599;
  --hm-verde-tx: #4ade80; --hm-verde-bg: rgba(22,179,100,.16);
  --hm-verm-tx: #ff8a8e;  --hm-verm-bg: rgba(229,72,77,.18);
  --hm-noite: #0a1828;    --hm-noite-2: #06111d;
  --hm-spark: #9fb3c4;    --hm-sombra: 0 12px 28px -16px rgba(0,0,0,.6);
}
/* logotipos coloridos foram feitos para fundo claro: no escuro, sobre uma pastilha clara */
body.site[data-tema="escuro"] .hm-marca-logo { background: #e8eef5; border-radius: 8px; padding: 4px 8px; height: 40px; }
body.site[data-tema="escuro"] .hm-marca-logo img { max-width: 80px; max-height: 28px; }
body.site[data-tema="escuro"] .hm-marca-logo b { color: #0b2033; }
body.site[data-tema="escuro"] .hm-termo-lado,
body.site[data-tema="escuro"] .hm-tile--escuro { border-right: 1px solid var(--hm-borda); }
body.site[data-tema="escuro"] .hm-tile--escuro { border: 1px solid var(--hm-borda); }
body.site[data-tema="escuro"] .hm-ic--verde { background: rgba(22,179,100,.16); color: #4ade80; }
body.site[data-tema="escuro"] .hm-ic--noite { background: #1a3050; color: #c9d6e2; }
body.site[data-tema="escuro"] .hm-ic--ouro  { background: rgba(232,182,76,.14); color: #e8b64c; }
body.site[data-tema="escuro"] .hm-ic--anil  { background: rgba(120,140,255,.14); color: #a9b5ff; }
body.site[data-tema="escuro"] .hm-conta { border-top: 1px solid var(--hm-borda); }

/* ================================================================
   Relatório de Valor na Data (aprovado em 27/09/2026)
   Usa as variáveis da capa (.hm), então claro e escuro valem juntos.
   ================================================================ */
.vnd { padding: 36px 24px 72px; }
.vnd-cab h1 { margin: 8px 0 8px; font-size: 32px; font-weight: 800; letter-spacing: -.6px; color: var(--hm-tinta); }
.vnd-cab p { margin: 0; max-width: 720px; font-size: 16px; line-height: 1.55; color: var(--hm-texto); }
.vnd-grade { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; margin-top: 26px; align-items: start; }
.vnd-card { background: var(--hm-cartao); border: 1px solid var(--hm-borda); border-radius: 18px; padding: 26px; }
.vnd-card h2 { margin: 0 0 4px; font-size: 18px; color: var(--hm-tinta); }
.vnd-card > p.sub { margin: 0 0 18px; font-size: 14px; color: var(--hm-fraco); }
.vnd-campo { margin: 0 0 18px; border: 0; padding: 0; min-width: 0; }
.vnd-campo > label, .vnd-campo legend { display: block; font-size: 13.5px; font-weight: 700; color: var(--hm-tinta); margin-bottom: 6px; padding: 0; }
.vnd-campo small { display: block; font-size: 12.5px; color: var(--hm-fraco); margin-top: 6px; }
.vnd-campo small b { color: var(--hm-tinta); }
.vnd-opc { font-weight: 400; color: var(--hm-fraco); }
.vnd-in { width: 100%; height: 46px; border-radius: 10px; border: 1px solid var(--hm-borda); background: var(--hm-suave);
  color: var(--hm-tinta); padding: 0 14px; font-size: 15px; font-family: inherit; }
.vnd-in:focus { outline: none; border-color: var(--hm-verde); box-shadow: 0 0 0 3px rgba(22,179,100,.2); }
.vnd-in:disabled { opacity: .55; }
.vnd-tres { display: grid; grid-template-columns: 1fr 1.6fr .8fr; gap: 8px; }
.vnd-dupla { display: grid; grid-template-columns: 220px 1fr; gap: 16px; }
.vnd-ind { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.vnd-ind label { position: relative; border: 1px solid var(--hm-borda); border-radius: 10px; padding: 10px 12px; cursor: pointer; background: var(--hm-suave); margin: 0; }
.vnd-ind input { position: absolute; opacity: 0; pointer-events: none; }
.vnd-ind label:has(input:checked) { border-color: var(--hm-verde); box-shadow: 0 0 0 1px var(--hm-verde) inset; }
.vnd-ind label:has(input:focus-visible) { outline: 2px solid var(--hm-verde); outline-offset: 2px; }
.vnd-ind b { display: block; font-size: 14px; color: var(--hm-tinta); }
.vnd-ind span { font-size: 11.5px; color: var(--hm-fraco); }
.vnd-lado { display: flex; flex-direction: column; gap: 16px; }
.vnd-preco b { display: block; font-size: 30px; font-weight: 800; color: var(--hm-tinta); letter-spacing: -.5px; }
.vnd-preco small { font-size: 13px; color: var(--hm-fraco); }
.vnd-faixas { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 13.5px; }
.vnd-faixas td { padding: 7px 0; border-top: 1px solid var(--hm-borda-2); color: var(--hm-texto); }
.vnd-faixas td:last-child { text-align: right; font-weight: 700; color: var(--hm-tinta); }
.vnd-faixas tr.on td { color: var(--hm-verde-tx); font-weight: 700; }
.vnd-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.vnd-lista li { display: flex; gap: 10px; font-size: 14px; line-height: 1.4; color: var(--hm-texto); }
.vnd-lista li svg { color: var(--hm-verde); flex-shrink: 0; margin-top: 2px; }
.vnd-ok { display: flex; gap: 14px; align-items: center; background: var(--hm-verde-bg); border-radius: 12px; padding: 14px 16px; margin-bottom: 18px; }
.vnd-ok svg { color: var(--hm-verde-tx); flex-shrink: 0; } .vnd-ok b { color: var(--hm-tinta); }
.vnd-ok span { font-size: 13.5px; color: var(--hm-texto); display: block; }
.vnd-res { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.vnd-res div { border: 1px solid var(--hm-borda); border-radius: 12px; padding: 12px 14px; }
.vnd-res span { font-size: 11.5px; letter-spacing: .8px; text-transform: uppercase; font-weight: 700; color: var(--hm-fraco); }
.vnd-res b { display: block; font-size: 17px; color: var(--hm-tinta); margin-top: 6px; }
.vnd-res .borrado { filter: blur(6px); user-select: none; }
.vnd-pag { border-top: 1px solid var(--hm-borda-2); padding-top: 18px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.vnd-pag .de { text-decoration: line-through; color: var(--hm-fraco); font-size: 14px; margin-right: 8px; }
.vnd-pag b { font-size: 26px; color: var(--hm-tinta); }
.vnd-pag small { display: block; font-size: 13px; color: var(--hm-verde-tx); font-weight: 700; }
.vnd-met { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.vnd-met label { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; color: var(--hm-texto); cursor: pointer; }
.vnd-cota { display: flex; align-items: center; gap: 12px; border: 1px dashed var(--hm-verde); border-radius: 12px; padding: 12px 14px; font-size: 14px; color: var(--hm-texto); }
.vnd-cota svg { color: var(--hm-verde); flex-shrink: 0; }
.vnd-aviso { margin-top: 18px; border-radius: 12px; padding: 12px 16px; font-size: 14px; display: flex; gap: 10px; align-items: center; }
.vnd-aviso.ok { background: var(--hm-verde-bg); color: var(--hm-verde-tx); }
.vnd-aviso.erro { background: var(--hm-verm-bg); color: var(--hm-verm-tx); }
.vnd-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.vnd-rolar { overflow-x: auto; }
.vnd-tab { width: 100%; border-collapse: collapse; font-size: 14px; }
.vnd-tab th { text-align: left; font-size: 11.5px; letter-spacing: .8px; text-transform: uppercase; color: var(--hm-fraco); padding: 0 10px 10px; white-space: nowrap; }
.vnd-tab td { padding: 13px 10px; border-top: 1px solid var(--hm-borda-2); color: var(--hm-texto); vertical-align: middle; }
.vnd-tab td b { color: var(--hm-tinta); } .vnd-tab code { font-size: 12.5px; color: var(--hm-tinta); white-space: nowrap; }
.vnd-st { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.vnd-st.ok { background: var(--hm-verde-bg); color: var(--hm-verde-tx); }
.vnd-st.pend { background: rgba(232,182,76,.15); color: #b7791f; }
body.site[data-tema="escuro"] .vnd-st.pend { color: #e8b64c; }
.vnd-mini { font-size: 12.5px; color: var(--hm-fraco); }
.vnd-bt2 { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 9px; border: 1px solid var(--hm-borda);
  color: var(--hm-tinta) !important; font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.vnd-verif { display: flex; gap: 10px; }
.vp-vnd { margin: 10px 0 0; font-size: 13.5px; color: var(--vp-mut, #55647a); }
.vp-vnd a { color: var(--vp-verde, #0e874e); font-weight: 700; }
@media (max-width: 900px) { .vnd-grade { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .vnd { padding: 24px 16px 56px; }
  .vnd-cab h1 { font-size: 25px; }
  .vnd-card { padding: 20px 18px; }
  .vnd-tres, .vnd-dupla, .vnd-res { grid-template-columns: minmax(0, 1fr); }
  .vnd-dupla { gap: 0; }
  .vnd-pag { flex-direction: column; align-items: stretch; }
  .vnd-met .hm-btn { width: 100%; justify-content: center; }
  .vnd-cota { flex-wrap: wrap; } .vnd-cota .hm-btn { margin-left: 0 !important; width: 100%; justify-content: center; }
  .vnd-verif { flex-direction: column; }
}

/* a área da conta usa body.vdc-base: o escuro dela também precisa das variáveis da capa */
body.vdc-base[data-tema="escuro"] .hm {
  --hm-cartao: #13253a;   --hm-borda: #22364d;   --hm-borda-2: #1c2f45;
  --hm-suave: #172b42;    --hm-suave-2: #1a3050;
  --hm-tinta: #e8eef5;    --hm-texto: #c9d6e2;   --hm-fraco: #9fb3c4;   --hm-n: #6f8599;
  --hm-verde-tx: #4ade80; --hm-verde-bg: rgba(22,179,100,.16);
  --hm-verm-tx: #ff8a8e;  --hm-verm-bg: rgba(229,72,77,.18);
  --hm-noite: #0a1828;    --hm-noite-2: #06111d;
  --hm-spark: #9fb3c4;    --hm-sombra: 0 12px 28px -16px rgba(0,0,0,.6);
}

/* Caixa de busca das listas (BuscaSelect) no Valor na Data: mesmo campo e
   mesmo cartão do resto da página, e a lista com cara de menu, não de
   lista nativa. Vale para claro e escuro pelas variáveis da capa. */
.vnd .bsel-campo { height: 46px; border-radius: 10px; border: 1px solid var(--hm-borda); background-color: var(--hm-suave);
  color: var(--hm-tinta); padding: 0 38px 0 14px; font-size: 15px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='7' cy='7' r='4.5' fill='none' stroke='%238391a4' stroke-width='1.6'/><path d='m10.5 10.5 3 3' stroke='%238391a4' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-position: right 13px center; background-size: 15px; }
.vnd .bsel-campo::placeholder { color: var(--hm-fraco); }
.vnd .bsel-campo:hover { border-color: var(--hm-n); }
.vnd .bsel-campo:focus { border-color: var(--hm-verde); box-shadow: 0 0 0 3px rgba(22,179,100,.2); }
.vnd .bsel-campo:disabled { background-color: var(--hm-suave); color: var(--hm-fraco); opacity: .55; }
.vnd .bsel-lista { top: calc(100% + 6px); max-height: 18rem; padding: 6px; background: var(--hm-cartao);
  border: 1px solid var(--hm-borda); border-radius: 12px; box-shadow: 0 18px 40px -12px rgba(0,0,0,.45);
  scrollbar-width: thin; scrollbar-color: var(--hm-borda) transparent; }
.vnd .bsel-lista li { padding: 9px 12px; border-radius: 8px; font-size: 14px; color: var(--hm-texto); }
.vnd .bsel-lista li:hover { background: var(--hm-suave); color: var(--hm-tinta); }
.vnd .bsel-lista li.marcado { background: var(--hm-verde-bg); color: var(--hm-tinta); box-shadow: none; }
.vnd .bsel-vazio { color: var(--hm-fraco); }
.vnd-tres .bsel { min-width: 0; }