/* ==========================================================================
   Avelloz · Validação de certificado de garantia
   CSS puro, mobile first, sem dependência de JavaScript.
   Breakpoints: 640px (tablet) · 720px (tabela ↔ cartões) · 960px (desktop)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fontes — auto-hospedadas em /garantia/fontes/ (ADR-0018: nada de CDN).
   Único trecho que difere de docs/validacao-certificado/design/css/validacao.css.

   JetBrains Mono (OFL, licença em fontes/OFL-jetbrains-mono.txt): ativa. Subconjunto latin, que
   cobre o alfabeto do código, chassi, placa e OS.

   Museo Sans (licença webfont exljbris): AGUARDANDO LICENÇA (pendência P8). Ao receber os .woff2,
   copie-os para /garantia/fontes/ com os nomes abaixo e descomente o bloco. Até lá vale o fallback
   de --fonte-base (system-ui).

@font-face { font-family: "Museo Sans"; src: url("/garantia/fontes/museo-sans-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Museo Sans"; src: url("/garantia/fontes/museo-sans-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Museo Sans"; src: url("/garantia/fontes/museo-sans-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Museo Sans"; src: url("/garantia/fontes/museo-sans-500-italic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Museo Sans"; src: url("/garantia/fontes/museo-sans-700-italic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Museo Sans"; src: url("/garantia/fontes/museo-sans-900-italic.woff2") format("woff2"); font-weight: 900; font-style: italic; font-display: swap; }
   -------------------------------------------------------------------------- */

@font-face { font-family: "JetBrains Mono"; src: url("/garantia/fontes/jetbrains-mono-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  /* Paleta da marca — manual 03.4 */
  --marca-azul-marinho: #082340;
  --marca-laranja: #F04C23;
  --marca-gelo: #DCDDDE;
  --marca-azul-petroleo: #00425C;
  --marca-azul-profundo: #000E21;
  --marca-pessego: #F3703A;
  --marca-telha: #BC3D1E;
  --marca-branco: #FFFFFF;
  --marca-cinza: #B1B3B6;

  /* Papéis de cor */
  --cor-primaria: var(--marca-azul-marinho);
  --cor-primaria-hover: var(--marca-azul-profundo);
  --cor-destaque: var(--marca-laranja);
  --cor-texto: var(--marca-azul-marinho);
  --cor-texto-suave: #4A5869;
  --cor-texto-inverso: #FFFFFF;
  --cor-texto-inverso-suave: var(--marca-gelo);
  --cor-placeholder: #646F7D;
  --cor-fundo: #F3F4F5;
  --cor-superficie: #FFFFFF;
  --cor-superficie-alt: #F7F8F9;
  --cor-borda: var(--marca-gelo);
  --cor-borda-forte: #6E7A88;
  --cor-foco: var(--marca-laranja);
  --cor-link: var(--marca-azul-marinho);
  --cor-link-hover: var(--marca-telha);

  /* Estados (propostos — o manual não cobre cores de alerta) */
  --cor-sucesso: #1B6640;      --cor-sucesso-fundo: #E7F3EC;  --cor-sucesso-borda: #A9D2BA;
  --cor-info: var(--marca-azul-petroleo); --cor-info-fundo: #E2EDF2; --cor-info-borda: #A7C6D3;
  --cor-atencao: #7F4600;      --cor-atencao-fundo: #FDF1DA;  --cor-atencao-borda: #E8C27E;
  --cor-atencao-forte: #A65A00;
  --cor-critico: #A11F17;      --cor-critico-fundo: #FBE8E5;  --cor-critico-borda: #EBB0A8;
  --cor-neutro: #3A4654;       --cor-neutro-fundo: #ECEEF0;   --cor-neutro-borda: #C9CED4;

  /* Tipografia */
  --fonte-base: "Museo Sans", "Mulish", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonte-titulo: var(--fonte-base);
  --fonte-codigo: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --peso-corpo: 300;
  --peso-medio: 500;
  --peso-forte: 700;
  --peso-black: 900;

  --tamanho-legenda: 0.8125rem;   /* 13px */
  --tamanho-pequeno: 0.875rem;    /* 14px */
  --tamanho-texto: 1rem;          /* 16px · 17px no desktop */
  --tamanho-valor: 1.0625rem;     /* 17px · 18px no desktop */
  --tamanho-h2: 0.9375rem;        /* 15px · 16px no desktop (caixa-alta) */
  --tamanho-selo: 1.5rem;         /* 24px · 32px no desktop */
  --tamanho-h1: 1.875rem;         /* 30px · 48px no desktop (título institucional) */
  --tamanho-codigo: 1.125rem;     /* 18px · 24px no desktop */
  --tamanho-campo-codigo: 1.25rem;/* 20px · 26px no desktop */
  --altura-linha: 1.55;

  /* Espaços (base 4px) */
  --espaco-1: 4px;
  --espaco-2: 8px;
  --espaco-3: 12px;
  --espaco-4: 16px;
  --espaco-5: 24px;
  --espaco-6: 32px;
  --espaco-7: 48px;
  --espaco-8: 64px;

  /* Forma */
  --raio: 8px;
  --raio-cartao: 12px;
  --raio-grande: 16px;
  --raio-pilula: 999px;
  --borda-fina: 1px;
  --borda-campo: 2px;

  /* Layout */
  --largura-maxima-conteudo: 1040px;
  --largura-maxima-estreita: 760px;
  --largura-maxima-texto: 62ch;
  --margem-lateral: var(--espaco-4);
  --alvo-toque: 44px;
  --altura-cabecalho: 64px;
}

@media (min-width: 960px) {
  :root {
    --tamanho-texto: 1.0625rem;
    --tamanho-valor: 1.125rem;
    --tamanho-h2: 1rem;
    --tamanho-selo: 2rem;
    --tamanho-h1: 3rem;
    --tamanho-codigo: 1.5rem;
    --tamanho-campo-codigo: 1.625rem;
    --margem-lateral: var(--espaco-6);
    --altura-cabecalho: 80px;
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-base);
  font-weight: var(--peso-corpo);
  font-size: var(--tamanho-texto);
  line-height: var(--altura-linha);
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
p { margin: 0; text-wrap: pretty; }
strong, b { font-weight: var(--peso-forte); }
a { color: var(--cor-link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--cor-link-hover); }
:focus-visible { outline: 3px solid var(--cor-foco); outline-offset: 3px; border-radius: 4px; }

.visualmente-oculto {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.pular-conteudo {
  position: absolute; left: var(--espaco-4); top: -200px; z-index: 10;
  padding: var(--espaco-3) var(--espaco-4); background: var(--cor-superficie); color: var(--cor-texto);
  font-weight: var(--peso-forte); border-radius: var(--raio);
}
.pular-conteudo:focus { top: var(--espaco-3); }

/* ---------- Ícones (SVG em traço, 24×24) ---------- */
.icone {
  width: 24px; height: 24px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.icone--16 { width: 16px; height: 16px; }
.icone--18 { width: 18px; height: 18px; }
.icone--20 { width: 20px; height: 20px; }
.icone--28 { width: 28px; height: 28px; }
.icone--36 { width: 36px; height: 36px; }

/* ---------- Página ---------- */
.pagina { min-height: 100vh; display: flex; flex-direction: column; }
.pagina__principal { flex: 1 0 auto; display: flex; flex-direction: column; }
.pagina__conteudo {
  flex: 1 0 auto; width: 100%;
  max-width: calc(var(--largura-maxima-conteudo) + 2 * var(--margem-lateral));
  margin: 0 auto;
  padding: var(--espaco-5) var(--margem-lateral) var(--espaco-7);
  display: flex; flex-direction: column; gap: var(--espaco-5);
}
.pagina__conteudo--estreito { max-width: calc(var(--largura-maxima-estreita) + 2 * var(--margem-lateral)); }
@media (min-width: 960px) {
  .pagina__conteudo { padding-top: var(--espaco-7); padding-bottom: var(--espaco-8); gap: var(--espaco-6); }
}

/* ---------- Cabeçalho ---------- */
.cabecalho { background: var(--marca-azul-marinho); color: var(--cor-texto-inverso); }
.cabecalho__interno {
  max-width: calc(var(--largura-maxima-conteudo) + 2 * var(--margem-lateral));
  margin: 0 auto; padding: 0 var(--margem-lateral);
  min-height: var(--altura-cabecalho);
  display: flex; align-items: center; gap: var(--espaco-4);
}
.cabecalho__marca { display: flex; align-items: center; min-height: var(--alvo-toque); border-radius: 4px; }
.cabecalho__logo { height: 28px; width: auto; }
.cabecalho__logo--impressao { display: none; }
.cabecalho__divisor { width: 1px; height: 24px; background: rgba(220, 221, 222, 0.4); flex: none; }
.cabecalho__servico {
  margin: 0; color: var(--cor-texto-inverso-suave);
  font-size: var(--tamanho-pequeno); font-style: italic; font-weight: var(--peso-medio); line-height: 1.2;
}
@media (min-width: 960px) {
  .cabecalho__interno { gap: var(--espaco-5); }
  .cabecalho__logo { height: 36px; }
  .cabecalho__divisor { height: 32px; }
  .cabecalho__servico { font-size: 1rem; }
}

/* ---------- Destaque (hero da tela inicial) ---------- */
.destaque { position: relative; overflow: hidden; background: var(--marca-azul-marinho); color: var(--cor-texto-inverso); }
/* Supergráfico 2 (manual 03.5): só no desktop; no mobile viraria um fragmento solto. */
.destaque__grafismo { display: none; position: absolute; color: var(--marca-azul-petroleo); pointer-events: none; }
.destaque__interno {
  position: relative;
  max-width: calc(var(--largura-maxima-conteudo) + 2 * var(--margem-lateral));
  margin: 0 auto;
  padding: var(--espaco-6) var(--margem-lateral) var(--espaco-7);
  display: grid; gap: var(--espaco-5);
}
.destaque__texto { display: flex; flex-direction: column; gap: var(--espaco-4); }
.destaque__descricao { color: var(--cor-texto-inverso-suave); font-size: 1.0625rem; max-width: 34em; }
@media (min-width: 960px) {
  .destaque__grafismo { display: block; top: 0; right: 0; height: 100%; width: auto; aspect-ratio: 1 / 2; }
  .destaque__interno {
    grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
    align-items: center; gap: var(--espaco-8);
    padding-top: 72px; padding-bottom: 80px;
  }
  .destaque__descricao { font-size: 1.1875rem; }
}
.grafismo { fill: none; stroke: currentColor; stroke-width: 80; stroke-linejoin: round; }

/* ---------- Títulos ---------- */
/* Títulos (manual 03.7): Museo Sans 500 Italic + destaque 900 Italic, caixa-alta. */
.titulo-institucional {
  margin: 0; font-family: var(--fonte-titulo);
  font-size: var(--tamanho-h1); line-height: 1.05; font-style: italic; font-weight: var(--peso-medio);
  text-transform: uppercase; color: var(--cor-texto-inverso-suave); text-wrap: balance;
}
.titulo-institucional strong { display: block; font-weight: var(--peso-black); color: var(--cor-texto-inverso); }
/* Rótulo de seção: 700 Italic, caixa-alta. */
.titulo-secao {
  margin: 0; font-size: var(--tamanho-h2); line-height: 1.3;
  font-style: italic; font-weight: var(--peso-forte); text-transform: uppercase; color: var(--cor-texto);
}
/* Subtítulo (manual 03.7): 700 Italic, caixa alta/baixa. */
.subtitulo {
  margin: 0; font-size: 1.125rem; line-height: 1.3; font-style: italic; font-weight: var(--peso-forte); color: var(--cor-texto);
}

/* ---------- Cartão ---------- */
.cartao {
  background: var(--cor-superficie); border: var(--borda-fina) solid var(--cor-borda);
  border-radius: var(--raio-cartao); padding: var(--espaco-4);
  display: flex; flex-direction: column; gap: var(--espaco-4);
}
.cartao__cabecalho { display: flex; flex-direction: column; gap: var(--espaco-2); }
@media (min-width: 640px) { .cartao { padding: var(--espaco-5); } }
@media (min-width: 960px) { .cartao { padding: var(--espaco-6); gap: var(--espaco-5); } }

/* ---------- Pares rótulo/valor ---------- */
.lista-dados { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--espaco-6); }
.lista-dados__item {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--espaco-3) 0; border-bottom: var(--borda-fina) solid var(--cor-borda);
}
.lista-dados__rotulo { font-size: var(--tamanho-pequeno); font-weight: var(--peso-medio); color: var(--cor-texto-suave); line-height: 1.35; }
.lista-dados__valor {
  margin: 0; font-size: var(--tamanho-valor); font-weight: var(--peso-forte); color: var(--cor-texto);
  line-height: 1.35; overflow-wrap: anywhere;
}
.lista-dados__valor--codigo { font-family: var(--fonte-codigo); font-weight: 600; letter-spacing: 0.04em; }
.lista-dados__valor--vazio { color: var(--cor-texto-suave); font-weight: var(--peso-medio); }
@media (min-width: 640px) { .lista-dados { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) {
  .lista-dados--4-colunas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lista-dados--3-colunas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.texto-vazio { color: var(--cor-texto-suave); font-weight: var(--peso-medio); }

/* ---------- Código do certificado ---------- */
.codigo {
  font-family: var(--fonte-codigo); font-weight: 600; font-size: var(--tamanho-codigo);
  letter-spacing: 0.06em; white-space: nowrap; color: var(--cor-texto);
}
.codigo--inline { font-size: 0.95em; letter-spacing: 0.03em; }

/* ---------- Selo de status (bloco grande no topo) ---------- */
.selo-status {
  --tom: var(--cor-neutro); --tom-texto: var(--cor-neutro);
  --tom-fundo: var(--cor-neutro-fundo); --tom-borda: var(--cor-neutro-borda);
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "icone titulo" "corpo corpo";
  align-items: center; column-gap: var(--espaco-4); row-gap: var(--espaco-4);
  padding: var(--espaco-5) var(--espaco-4);
  background: var(--tom-fundo); border: var(--borda-fina) solid var(--tom-borda); border-radius: var(--raio-grande);
}
.selo-status__icone {
  grid-area: icone; width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; background: var(--tom); color: var(--cor-texto-inverso);
}
.selo-status__titulo {
  grid-area: titulo; margin: 0; font-size: var(--tamanho-selo); line-height: 1.15;
  font-style: italic; font-weight: var(--peso-forte); color: var(--tom-texto); text-wrap: balance;
}
.selo-status__corpo { grid-area: corpo; display: flex; flex-direction: column; gap: var(--espaco-4); }
.selo-status__corpo p { max-width: var(--largura-maxima-texto); }
@media (min-width: 640px) { .selo-status { padding: var(--espaco-5); } }
@media (min-width: 960px) {
  .selo-status {
    grid-template-areas: "icone titulo" "icone corpo";
    align-items: start; column-gap: var(--espaco-5); row-gap: var(--espaco-3); padding: var(--espaco-6);
  }
  .selo-status__icone { width: 72px; height: 72px; }
  .selo-status__icone .icone { width: 36px; height: 36px; }
  .selo-status__titulo { padding-top: 14px; }
}
.selo-status--autentico   { --tom: var(--cor-sucesso);  --tom-texto: var(--cor-sucesso);  --tom-fundo: var(--cor-sucesso-fundo);  --tom-borda: var(--cor-sucesso-borda); }
.selo-status--substituido { --tom: var(--cor-info);     --tom-texto: var(--cor-info);     --tom-fundo: var(--cor-info-fundo);     --tom-borda: var(--cor-info-borda); }
.selo-status--formato-invalido { --tom: var(--cor-atencao-forte); --tom-texto: var(--cor-atencao); --tom-fundo: var(--cor-atencao-fundo); --tom-borda: var(--cor-atencao-borda); }
.selo-status--nao-localizado { --tom-texto: var(--cor-texto); }
.selo-status--nao-localizado .selo-status__icone {
  background: var(--cor-superficie); color: var(--cor-texto); box-shadow: inset 0 0 0 2px var(--cor-destaque);
}
.selo-status--erro-tecnico,
.selo-status--muitas-consultas { --tom-texto: var(--cor-neutro); }

/* Metadados do certificado (dentro do selo) */
.meta-certificado {
  margin: 0; display: flex; flex-wrap: wrap; gap: var(--espaco-3) var(--espaco-7);
  padding: var(--espaco-4); background: var(--cor-superficie);
  border: var(--borda-fina) solid var(--tom-borda, var(--cor-borda)); border-radius: var(--raio-cartao);
}
.meta-certificado__item { display: flex; flex-direction: column; gap: 2px; }
.meta-certificado__rotulo { font-size: var(--tamanho-pequeno); font-weight: var(--peso-medio); color: var(--cor-texto-suave); }
.meta-certificado__valor { margin: 0; font-size: var(--tamanho-valor); font-weight: var(--peso-forte); line-height: 1.4; }
.meta-certificado__valor--codigo {
  font-family: var(--fonte-codigo); font-size: var(--tamanho-codigo); font-weight: 600;
  letter-spacing: 0.06em; white-space: nowrap; line-height: 1.3;
}
@media (min-width: 960px) { .meta-certificado { padding: var(--espaco-4) var(--espaco-5); } }

/* Nota discreta */
.nota { display: flex; gap: var(--espaco-2); align-items: flex-start; font-size: var(--tamanho-pequeno); color: var(--cor-texto-suave); }
.nota .icone { margin-top: 1px; }

/* ---------- Badge de situação da garantia (pequeno, dentro da seção) ---------- */
.badge-garantia {
  --tom-texto: var(--cor-neutro); --tom-fundo: var(--cor-neutro-fundo); --tom-borda: var(--cor-neutro-borda);
  display: inline-flex; align-items: center; gap: var(--espaco-2); align-self: flex-start;
  min-height: 36px; padding: 6px 14px 6px 10px;
  border-radius: var(--raio-pilula); border: 1.5px solid var(--tom-borda);
  background: var(--tom-fundo); color: var(--tom-texto);
  font-size: 0.9375rem; font-weight: var(--peso-forte); line-height: 1.2;
}
/* Ativa: dentro do prazo (sucesso)
   Vencida: o prazo acabou, fim normal (neutro)
   Perdida: faltou revisão ou o técnico registrou a perda (crítico)
   Não verificada: faltam dados no sistema para confirmar, ex. venda ou revisões em concessionária sem integração (atenção) */
.badge-garantia--ativa          { --tom-texto: var(--cor-sucesso); --tom-fundo: var(--cor-sucesso-fundo); --tom-borda: var(--cor-sucesso-borda); }
.badge-garantia--vencida        { --tom-texto: var(--cor-neutro);  --tom-fundo: var(--cor-neutro-fundo);  --tom-borda: var(--cor-neutro-borda); }
.badge-garantia--perdida        { --tom-texto: var(--cor-critico); --tom-fundo: var(--cor-critico-fundo); --tom-borda: var(--cor-critico-borda); }
.badge-garantia--nao-verificada { --tom-texto: var(--cor-atencao); --tom-fundo: var(--cor-atencao-fundo); --tom-borda: var(--cor-atencao-borda); }

.situacao-garantia { display: flex; flex-direction: column; gap: var(--espaco-2); margin: 0; }
.situacao-garantia__valor { margin: 0; display: flex; }
.situacao-garantia__rotulo { font-size: var(--tamanho-pequeno); font-weight: var(--peso-medio); color: var(--cor-texto-suave); }

/* ---------- Grade do resultado ---------- */
.grade-resultado { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--espaco-5); }
@media (min-width: 960px) {
  .grade-resultado { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--espaco-6); }
  .grade-resultado__inteira { grid-column: 1 / -1; }
}

/* ---------- Tabela de serviços (desktop) → cartões (mobile) ---------- */
.tabela-servicos { width: 100%; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.4; }
.tabela-servicos th {
  text-align: left; padding: var(--espaco-3) var(--espaco-4);
  font-size: var(--tamanho-legenda); font-weight: var(--peso-forte); text-transform: uppercase; font-style: italic;
  color: var(--cor-texto-suave); border-bottom: 2px solid var(--cor-primaria); white-space: nowrap;
}
.tabela-servicos td {
  padding: var(--espaco-4); vertical-align: top;
  border-bottom: var(--borda-fina) solid var(--cor-borda); color: var(--cor-texto); font-weight: var(--peso-medio);
}
.tabela-servicos th:first-child, .tabela-servicos td:first-child { padding-left: 0; }
.tabela-servicos th:last-child, .tabela-servicos td:last-child { padding-right: 0; }
.tabela-servicos__os { font-family: var(--fonte-codigo); font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; }
.tabela-servicos__numero { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabela-servicos__servico { font-weight: var(--peso-forte) !important; }

@media screen and (max-width: 719.98px) {
  .tabela-servicos thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .tabela-servicos, .tabela-servicos tbody, .tabela-servicos tr, .tabela-servicos td { display: block; width: 100%; }
  .tabela-servicos tbody { display: flex; flex-direction: column; gap: var(--espaco-3); }
  .tabela-servicos tr {
    padding: var(--espaco-3) var(--espaco-4); border: var(--borda-fina) solid var(--cor-borda);
    border-radius: var(--raio); background: var(--cor-superficie-alt);
  }
  .tabela-servicos td,
  .tabela-servicos td:first-child,
  .tabela-servicos td:last-child {
    display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: var(--espaco-3);
    padding: 6px 0; border: 0; text-align: left !important;
  }
  .tabela-servicos td::before {
    content: attr(data-rotulo);
    font-family: var(--fonte-base); font-size: var(--tamanho-pequeno); font-weight: var(--peso-medio);
    letter-spacing: 0; color: var(--cor-texto-suave);
  }
  .tabela-servicos__os, .tabela-servicos__numero { white-space: normal; }
}

/* ---------- Botões e links ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 var(--espaco-5);
  border-radius: var(--raio); border: var(--borda-campo) solid transparent;
  font-family: var(--fonte-base); font-size: 1.0625rem; font-weight: var(--peso-forte); line-height: 1.2;
  text-decoration: none; cursor: pointer; text-align: center;
}
.botao--primario { background: var(--cor-primaria); color: var(--cor-texto-inverso); }
.botao--primario:hover { background: var(--cor-primaria-hover); color: var(--cor-texto-inverso); }
.botao--secundario { background: var(--cor-superficie); color: var(--cor-primaria); border-color: var(--cor-primaria); }
.botao--secundario:hover { background: #EEF1F4; color: var(--cor-primaria); }
.botao--bloco { width: 100%; }
@media (min-width: 960px) { .botao { min-height: 56px; } }

.acoes { display: flex; flex-direction: column; align-items: stretch; gap: var(--espaco-3); margin: 0; }
@media (min-width: 640px) {
  .acoes { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--espaco-4) var(--espaco-5); }
}

.link-acao {
  display: inline-flex; align-items: center; gap: var(--espaco-2); align-self: flex-start;
  min-height: var(--alvo-toque); color: var(--cor-link);
  font-weight: var(--peso-forte); text-decoration: underline; text-underline-offset: 4px;
}

/* ---------- Formulário e campo de código ---------- */
.formulario-consulta { display: flex; flex-direction: column; gap: var(--espaco-4); margin: 0; }
.campo { display: flex; flex-direction: column; gap: var(--espaco-2); }
.campo__rotulo { font-size: 1rem; font-weight: var(--peso-forte); color: var(--cor-texto); }
.campo__ajuda { font-size: 0.9375rem; color: var(--cor-texto-suave); }
.campo-codigo {
  width: 100%; min-height: 56px; padding: 0 14px; margin: 0;
  font-family: var(--fonte-codigo); font-size: var(--tamanho-campo-codigo); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--cor-texto); background: var(--cor-superficie);
  border: var(--borda-campo) solid var(--cor-borda-forte); border-radius: var(--raio);
  appearance: none;
}
.campo-codigo::placeholder { color: var(--cor-placeholder); opacity: 1; font-weight: 500; }
.campo-codigo:hover { border-color: var(--cor-primaria); }
.campo-codigo:focus-visible { outline: 3px solid var(--cor-foco); outline-offset: 2px; border-color: var(--cor-primaria); border-radius: var(--raio); }
.campo-codigo--erro, .campo-codigo--erro:hover { border-color: var(--cor-atencao-forte); background: #FFFBF3; }
.campo__erro { display: flex; gap: var(--espaco-2); align-items: flex-start; color: var(--cor-atencao); font-size: 0.9375rem; font-weight: var(--peso-medio); }
.campo__erro .icone { margin-top: 1px; }
@media (min-width: 960px) { .campo-codigo { min-height: 64px; padding: 0 var(--espaco-4); } }

/* ---------- Alerta (não intrusivo) ---------- */
.alerta {
  --tom-texto: var(--cor-neutro); --tom-fundo: var(--cor-neutro-fundo); --tom-borda: var(--cor-neutro-borda);
  display: flex; gap: var(--espaco-3); align-items: flex-start;
  padding: var(--espaco-3) var(--espaco-4); border-radius: var(--raio);
  background: var(--tom-fundo); border: var(--borda-fina) solid var(--tom-borda);
  color: var(--cor-texto); font-weight: var(--peso-medio); font-size: 0.9375rem;
}
.alerta .icone { color: var(--tom-texto); margin-top: 1px; }
.alerta--atencao { --tom-texto: var(--cor-atencao); --tom-fundo: var(--cor-atencao-fundo); --tom-borda: var(--cor-atencao-borda); }
.alerta--info    { --tom-texto: var(--cor-info);    --tom-fundo: var(--cor-info-fundo);    --tom-borda: var(--cor-info-borda); }

/* ---------- Bloco de download ---------- */
.bloco-download { display: flex; flex-direction: column; gap: var(--espaco-4); }
.bloco-download__apoio { color: var(--cor-texto-suave); font-size: 0.9375rem; max-width: 56ch; }
@media (min-width: 960px) {
  .bloco-download { flex-direction: row; align-items: center; gap: var(--espaco-6); }
  .bloco-download .botao { flex: none; }
}

/* ---------- Ajuda "Onde encontro o código?" ---------- */
.ajuda-codigo { display: grid; gap: var(--espaco-4); align-items: center; }
.ajuda-codigo__texto { display: flex; flex-direction: column; gap: var(--espaco-2); }
.ajuda-codigo__ilustracao { width: 100%; max-width: 300px; height: auto; }
@media (min-width: 960px) {
  .ajuda-codigo { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--espaco-7); }
}
.ilustracao__papel { fill: var(--cor-superficie); stroke: var(--marca-azul-marinho); stroke-width: 2; }
.ilustracao__faixa { fill: var(--marca-azul-marinho); }
.ilustracao__linha { fill: var(--marca-gelo); }
.ilustracao__linha--clara { fill: rgba(220, 221, 222, 0.55); }
.ilustracao__qr { fill: var(--marca-azul-marinho); }
.ilustracao__qr-moldura { fill: none; stroke: var(--marca-azul-marinho); stroke-width: 3; }
.ilustracao__codigo { font-family: var(--fonte-codigo); font-size: 10px; font-weight: 700; fill: var(--marca-azul-marinho); letter-spacing: 0.04em; }
.ilustracao__destaque { fill: rgba(240, 76, 35, 0.08); stroke: var(--marca-laranja); stroke-width: 2.5; }

/* ---------- Passos ---------- */
.passos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--espaco-3); }
.passos__item { display: flex; align-items: center; gap: var(--espaco-4); }
.passos__numero {
  font-size: 2.25rem; line-height: 1; font-style: italic; font-weight: var(--peso-corpo);
  color: var(--cor-destaque); min-width: 2.6ch; font-variant-numeric: tabular-nums;
}
.passos__titulo { font-weight: var(--peso-forte); font-size: 1.0625rem; }
.passos__seta { display: none; color: var(--cor-borda-forte); }
@media (min-width: 960px) {
  .passos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--espaco-5); }
  .passos__seta { display: block; margin-left: auto; }
}

/* ---------- Rodapé ---------- */
.rodape { background: var(--marca-azul-marinho); color: var(--cor-texto-inverso-suave); }
.rodape__interno {
  max-width: calc(var(--largura-maxima-conteudo) + 2 * var(--margem-lateral));
  margin: 0 auto; padding: var(--espaco-6) var(--margem-lateral);
  display: flex; flex-direction: column; gap: var(--espaco-3); font-size: 0.9375rem;
}
.rodape a { color: var(--cor-texto-inverso); font-weight: var(--peso-forte); }
.rodape a:hover { color: var(--cor-texto-inverso); text-decoration-thickness: 2px; }
.rodape__institucional { font-size: var(--tamanho-legenda); color: var(--cor-texto-inverso-suave); }
@media (min-width: 960px) {
  .rodape__interno { flex-direction: row; justify-content: space-between; align-items: center; gap: var(--espaco-6); }
}

/* ==========================================================================
   Impressão — estado "Certificado autêntico" (A4)
   ========================================================================== */
@media print {
  @page { size: A4; margin: 14mm 14mm 16mm; }
  :root {
    --tamanho-texto: 10.5pt; --tamanho-valor: 11pt; --tamanho-pequeno: 9pt; --tamanho-legenda: 9pt; --tamanho-h2: 9.5pt;
    --tamanho-selo: 18pt; --tamanho-codigo: 14pt; --margem-lateral: 0;
  }
  body { background: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .nao-imprimir, .pular-conteudo, .formulario-consulta, .botao, .link-acao, .alerta, .bloco-download { display: none !important; }
  .cabecalho { background: none; color: var(--cor-texto); border-bottom: 1.5pt solid var(--cor-primaria); }
  .cabecalho__interno { min-height: 0; padding: 0 0 8pt; }
  .cabecalho__logo--tela { display: none; }
  .cabecalho__logo--impressao { display: block; height: 26pt; }
  .cabecalho__divisor { background: var(--cor-borda-forte); }
  .cabecalho__servico { color: var(--cor-texto); }
  .pagina { min-height: 0; }
  .pagina__conteudo { padding: 12pt 0 0; gap: 10pt; max-width: none; }
  .selo-status { padding: 12pt; border-width: 1.5pt; grid-template-areas: "icone titulo" "icone corpo"; row-gap: 6pt; }
  .selo-status__icone { width: 40pt; height: 40pt; }
  .cartao { padding: 10pt 12pt; gap: 6pt; border-color: #B1B3B6; break-inside: avoid; }
  .lista-dados { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lista-dados__item { padding: 5pt 0; }
  .grade-resultado { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 10pt; }
  .grade-resultado__inteira { grid-column: 1 / -1; }
  .lista-dados--3-colunas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tabela-servicos { font-size: 9pt; }
  .tabela-servicos td, .tabela-servicos th { padding: 5pt 8pt; }
  .rodape { background: none; color: var(--cor-texto-suave); border-top: 1pt solid var(--cor-borda); }
  .rodape__interno { padding: 8pt 0 0; flex-direction: row; justify-content: space-between; }
  .rodape a { color: var(--cor-texto); }
}