/* ==========================================================================
   consultas.css — a página pública do MEV Consultas          (v828)
   --------------------------------------------------------------------------
   Identidade azul do MEV, SVG de linha, nada de emoji.
   Movimento: o padrão "premium leve" da casa (padroes/COMPONENTES.md, v745) —
   entrada 220 ms, hover 160 ms, nada acima de 300 ms, nada infinito, só
   transform e opacity.
   ========================================================================== */
:root {
  --consultas-navy: #001e50;
  --consultas-blue: #0a4da6;
  --consultas-blue-soft: #edf4ff;
  --consultas-ink: #14213d;
  --consultas-muted: #5d6f8c;
  --consultas-line: #d8e3f3;
  --consultas-bg: #f4f6fb;
  --consultas-card: #ffffff;
  --consultas-green: #147a44;
  --consultas-radius: 24px;
  --consultas-shadow: 0 14px 34px rgba(0, 30, 80, 0.08);
  --consultas-ease: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* 🔴 ESTA LINHA NÃO É ENFEITE — o teste v828 pegou o defeito que ela conserta.
   `.consultas-filtros` e `.consultas-card` declaram `display:flex`, e um
   `display` declarado GANHA do `display:none` que o navegador dá ao atributo
   `hidden`. Sem esta regra: o bloco de filtros aparecia mesmo sem JavaScript
   (botão morto na tela) e o filtro "escondia" os cards só no papel — o
   atributo entrava, a tela não mudava. */
[hidden] { display: none !important; }

body.consultas-page {
  min-width: 320px;
  margin: 0;
  /* nenhuma rolagem lateral, em nenhuma largura */
  overflow-x: hidden;
  color: var(--consultas-ink);
  background: var(--consultas-bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }

/* o atalho de teclado: invisível até receber foco */
.consultas-pular {
  position: absolute; left: -9999px; top: 0; z-index: 20;
  background: var(--consultas-navy); color: #fff;
  padding: 12px 18px; border-radius: 0 0 12px 0; font-weight: 700; text-decoration: none;
}
.consultas-pular:focus { left: 0; }

.consultas-topo,
.consultas-page main,
.consultas-rodape {
  width: min(1180px, calc(100% - 40px));
  margin-inline: auto;
}

/* ─── topo ──────────────────────────────────────────────────────────────── */
.consultas-topo {
  min-height: 88px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.consultas-marca { display: inline-flex; align-items: center; gap: 12px; color: var(--consultas-navy); text-decoration: none; }
.consultas-marca img { width: 48px; height: 48px; border-radius: 12px; }
.consultas-marca strong, .consultas-marca small { display: block; }
.consultas-marca strong { font-size: 20px; line-height: 1.1; }
.consultas-marca small { margin-top: 3px; color: var(--consultas-muted); font-size: 12px; font-weight: 600; }

.consultas-link-conta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 18px;
  border: 1px solid var(--consultas-line); border-radius: 999px;
  background: var(--consultas-card); color: var(--consultas-navy);
  font-size: 14px; font-weight: 700; text-decoration: none;
  transition: transform .16s var(--consultas-ease), box-shadow .16s var(--consultas-ease), border-color .16s;
}
.consultas-link-conta:hover { transform: translateY(-2px); box-shadow: var(--consultas-shadow); border-color: var(--consultas-blue); }

/* ─── textos comuns ─────────────────────────────────────────────────────── */
.consultas-eyebrow {
  margin: 0 0 10px; color: var(--consultas-blue);
  font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
}
.consultas-page h1 { margin: 0; font-size: clamp(30px, 4.6vw, 46px); line-height: 1.1; letter-spacing: -.02em; color: var(--consultas-navy); }
.consultas-page h2 { margin: 0; font-size: clamp(23px, 3vw, 32px); line-height: 1.18; letter-spacing: -.015em; color: var(--consultas-navy); }
.consultas-lead { margin: 16px 0 0; max-width: 46ch; font-size: 17px; line-height: 1.6; color: var(--consultas-muted); }

/* ─── botões ────────────────────────────────────────────────────────────── */
.consultas-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 0 22px;
  border: 1px solid transparent; border-radius: 999px;
  font: inherit; font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer;
  transition: transform .16s var(--consultas-ease), box-shadow .16s var(--consultas-ease), background .16s, border-color .16s;
}
.consultas-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.consultas-btn-primario { background: var(--consultas-blue); color: #fff; }
.consultas-btn-primario:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(10, 77, 166, .28); }
.consultas-btn-secundario { background: var(--consultas-card); color: var(--consultas-navy); border-color: var(--consultas-line); }
.consultas-btn-secundario:hover { transform: translateY(-2px); box-shadow: var(--consultas-shadow); border-color: var(--consultas-blue); }
.consultas-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

/* foco visível em tudo que recebe teclado */
.consultas-page a:focus-visible,
.consultas-page button:focus-visible,
.consultas-page input:focus-visible {
  outline: 3px solid var(--consultas-blue); outline-offset: 3px; border-radius: 12px;
}

/* ─── hero ──────────────────────────────────────────────────────────────── */
.consultas-hero {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 34px; align-items: start; padding: 26px 0 12px;
}
.consultas-acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.consultas-confianca { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 24px 0 0; padding: 0; list-style: none; }
.consultas-confianca li { display: inline-flex; align-items: center; gap: 8px; color: var(--consultas-muted); font-size: 13.5px; font-weight: 600; }
.consultas-confianca svg { width: 17px; height: 17px; flex: 0 0 auto; fill: none; stroke: var(--consultas-blue); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ─── consulta rápida ───────────────────────────────────────────────────── */
.consultas-placa-cx {
  background: var(--consultas-card); border: 1px solid var(--consultas-line);
  border-radius: var(--consultas-radius); box-shadow: var(--consultas-shadow);
  padding: 22px;
}
.consultas-placa-topo { display: flex; align-items: flex-start; gap: 13px; }
.consultas-placa-topo strong { display: block; font-size: 17px; color: var(--consultas-navy); }
.consultas-placa-topo p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--consultas-muted); }
.consultas-placa-ico {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 13px;
  display: grid; place-items: center; background: var(--consultas-blue-soft);
}
.consultas-placa-ico svg { width: 23px; height: 23px; fill: none; stroke: var(--consultas-blue); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.consultas-placa-lbl { display: block; margin: 20px 0 7px; font-size: 13px; font-weight: 800; color: var(--consultas-navy); }
.consultas-placa-in {
  width: 100%; min-height: 52px; padding: 0 16px;
  border: 1.5px solid var(--consultas-line); border-radius: 14px;
  background: #fbfdff; color: var(--consultas-navy);
  /* 16px é o mínimo que evita o zoom automático do iPhone ao focar */
  font: 700 19px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .12em; text-transform: uppercase;
  transition: border-color .16s, box-shadow .16s;
}
.consultas-placa-in::placeholder { color: #a9b8ce; letter-spacing: .12em; }
.consultas-placa-in:focus { border-color: var(--consultas-blue); box-shadow: 0 0 0 4px rgba(10, 77, 166, .12); outline: none; }
.consultas-placa-ajuda { margin: 9px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--consultas-muted); }
.consultas-placa-bt { width: 100%; margin-top: 16px; }

/* ─── lista ─────────────────────────────────────────────────────────────── */
.consultas-lista { padding: 46px 0 10px; scroll-margin-top: 20px; }
.consultas-secao-titulo p { margin: 12px 0 0; max-width: 60ch; font-size: 16px; line-height: 1.55; color: var(--consultas-muted); }

.consultas-filtros { display: flex; flex-wrap: wrap; gap: 9px; margin: 24px 0 4px; }
.consultas-filtro {
  min-height: 44px; padding: 0 18px;
  border: 1px solid var(--consultas-line); border-radius: 999px;
  background: var(--consultas-card); color: var(--consultas-navy);
  font: 700 14px/1 inherit; cursor: pointer;
  transition: transform .16s var(--consultas-ease), background .16s, border-color .16s, color .16s;
}
.consultas-filtro:hover { transform: translateY(-2px); border-color: var(--consultas-blue); }
/* o estado escolhido não depende só de cor: ganha borda grossa e negrito */
.consultas-filtro[aria-pressed="true"] {
  background: var(--consultas-navy); color: #fff; border-color: var(--consultas-navy); border-width: 2px;
}

.consultas-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 22px; }

.consultas-card {
  position: relative; display: flex; flex-direction: column;
  padding: 22px; background: var(--consultas-card);
  border: 1px solid var(--consultas-line); border-radius: 20px;
  transition: transform .16s var(--consultas-ease), box-shadow .16s var(--consultas-ease), border-color .16s;
}
.consultas-card:hover { transform: translateY(-2px); box-shadow: var(--consultas-shadow); border-color: #bfd4f0; }
.consultas-card:hover .consultas-card-ico svg { transform: scale(1.06); }

.consultas-card-ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--consultas-blue-soft); }
.consultas-card-ico svg { width: 24px; height: 24px; fill: none; stroke: var(--consultas-blue); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .16s var(--consultas-ease); }
.consultas-card h3 { margin: 15px 0 0; font-size: 19px; letter-spacing: -.01em; color: var(--consultas-navy); }

.consultas-card-itens { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.consultas-card-itens li { position: relative; padding-left: 20px; font-size: 14.5px; line-height: 1.5; color: var(--consultas-muted); }
.consultas-card-itens li::before {
  content: ""; position: absolute; left: 2px; top: .55em;
  width: 8px; height: 8px; border-radius: 50%;
  border: 2px solid var(--consultas-blue);
}

/* o CTA é o link — e o ::after estica esse mesmo link por cima do card.
   Um alvo, uma parada de teclado, o card inteiro clicável. */
.consultas-card-cta {
  margin-top: auto; padding-top: 18px;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; color: var(--consultas-blue);
  font-size: 14.5px; font-weight: 800; text-decoration: none;
}
.consultas-card-cta::after { content: ""; position: absolute; inset: 0; border-radius: 20px; }
.consultas-card-cta svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .16s var(--consultas-ease); }
.consultas-card:hover .consultas-card-cta svg { transform: translateX(3px); }

/* os dois destaques — e são só dois, de propósito */
.consultas-card-destaque { border-color: #bcd4f5; box-shadow: 0 10px 26px rgba(0, 30, 80, .07); }
.consultas-selo {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  margin: 0 0 14px; padding: 5px 11px; border-radius: 999px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
.consultas-selo svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.consultas-selo-escolhida { background: var(--consultas-blue-soft); color: var(--consultas-blue); }
.consultas-selo-completa { background: #e7f6ee; color: var(--consultas-green); }

.consultas-vazio { margin: 26px 0 0; color: var(--consultas-muted); font-size: 15px; }

/* ─── fecho ─────────────────────────────────────────────────────────────── */
.consultas-fecho {
  margin: 46px 0 30px; padding: 40px 30px; text-align: center;
  background: linear-gradient(180deg, #ffffff, var(--consultas-blue-soft));
  border: 1px solid var(--consultas-line); border-radius: var(--consultas-radius);
}
.consultas-fecho p { margin: 12px auto 24px; max-width: 52ch; font-size: 16px; line-height: 1.55; color: var(--consultas-muted); }

/* ─── rodapé ────────────────────────────────────────────────────────────── */
.consultas-rodape {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
  padding: 22px 0 34px; border-top: 1px solid var(--consultas-line);
  color: var(--consultas-muted); font-size: 14px; font-weight: 600;
}
.consultas-rodape a { display: inline-flex; align-items: center; min-height: 44px; color: var(--consultas-blue); font-weight: 800; text-decoration: none; }

/* ─── movimento: entrada "premium leve" ─────────────────────────────────────
   Só acontece com JavaScript (a classe .js entra antes da pintura). Sem ele,
   a página nasce inteira e parada — que é o comportamento pedido. */
html.js [data-ent] { opacity: 0; transform: translateY(7px); }
html.js.consultas-pronta [data-ent] {
  opacity: 1; transform: none;
  transition: opacity .22s var(--consultas-ease), transform .22s var(--consultas-ease);
}
html.js.consultas-pronta [data-ent="1"] { transition-delay: .04s; }
html.js.consultas-pronta [data-ent="2"] { transition-delay: .08s; }
html.js.consultas-pronta [data-ent="3"] { transition-delay: .12s; }

/* a pulsação do card da placa: DUAS vezes e para. Nunca infinita. */
@keyframes consultasPulso {
  0%, 100% { box-shadow: var(--consultas-shadow); }
  50% { box-shadow: 0 0 0 6px rgba(10, 77, 166, .13), var(--consultas-shadow); }
}
html.js.consultas-pronta .consultas-placa-cx { animation: consultasPulso 1.1s var(--consultas-ease) .5s 2; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js [data-ent], html.js.consultas-pronta [data-ent] { opacity: 1; transform: none; transition: none; }
  html.js.consultas-pronta .consultas-placa-cx { animation: none; }
  .consultas-page *, .consultas-page *::before, .consultas-page *::after {
    transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important;
  }
}

/* ─── tablet ────────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .consultas-hero { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .consultas-lead { max-width: none; }
  .consultas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ─── celular ───────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .consultas-topo, .consultas-page main, .consultas-rodape { width: min(100%, calc(100% - 28px)); }
  .consultas-topo { min-height: 74px; gap: 12px; }
  .consultas-marca img { width: 40px; height: 40px; }
  .consultas-marca strong { font-size: 17px; }
  .consultas-hero { padding-top: 14px; }
  .consultas-grid { grid-template-columns: minmax(0, 1fr); }
  .consultas-acoes { flex-direction: column; align-items: stretch; }
  .consultas-acoes .consultas-btn { width: 100%; }
  .consultas-fecho { padding: 30px 20px; }
  .consultas-fecho .consultas-btn { width: 100%; }
  .consultas-rodape { justify-content: center; text-align: center; }
}