/* Direção de arte "A placa, não o banner" (kacio-ui, 25/07/2026).
   Editorial monocromático: régua e filete no lugar de sombra e radius.
   Spec completa: ../../identidade-visual/direcao-de-arte-site.md */
:root {
  /* escala fria (viés azul) calibrada pelas fachadas reais — dossie-idv-ccb-fotos.md §C */
  --tinta-900: #14181b;
  --tinta-700: #333b40;
  --tinta-500: #667079;
  --tinta-300: #9ba6ae;
  --tinta-150: #d8dee2;
  --tinta-050: #f4f5f6;
  --papel: #fbfbfa;
  --branco: #ffffff;
  --tinta-noite: #0a1620;

  --cor-fundo: var(--tinta-050);
  --cor-superficie: var(--papel);
  --cor-texto: var(--tinta-900);
  --cor-texto-secundario: var(--tinta-500);
  --cor-borda: var(--tinta-150);
  --cor-acento: var(--tinta-noite);
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, Helvetica, Arial, sans-serif;
  --transicao: 160ms ease;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
/* base 17px no root: material vira PDF e o público é leigo — TODA a escala rem sobe um degrau */
html { font-size: 106.25%; }
body {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--cor-texto);
  background: var(--cor-fundo);
  -webkit-font-smoothing: antialiased;
}
.pagina { max-width: 720px; margin: 0 auto; padding: 20px 16px 40px; }
.pagina--larga { max-width: 1080px; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--cor-acento); outline-offset: 2px; }

/* ── Placa: moldura dupla real + cantos em L ── */
.placa { background: var(--branco); border: 1px solid var(--tinta-900); margin: 8px 0 32px; }
.placa-inner {
  border: 1px solid var(--tinta-900);
  margin: 5px;
  padding: 32px 20px;
  text-align: center;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(var(--tinta-900), var(--tinta-900)), linear-gradient(var(--tinta-900), var(--tinta-900)),
    linear-gradient(var(--tinta-900), var(--tinta-900)), linear-gradient(var(--tinta-900), var(--tinta-900)),
    linear-gradient(var(--tinta-900), var(--tinta-900)), linear-gradient(var(--tinta-900), var(--tinta-900)),
    linear-gradient(var(--tinta-900), var(--tinta-900)), linear-gradient(var(--tinta-900), var(--tinta-900));
  background-size: 14px 1px, 1px 14px, 14px 1px, 1px 14px, 14px 1px, 1px 14px, 14px 1px, 1px 14px;
  background-position:
    left 4px top 4px, left 4px top 4px,
    right 4px top 4px, right 4px top 4px,
    left 4px bottom 4px, left 4px bottom 4px,
    right 4px bottom 4px, right 4px bottom 4px;
}
.placa h1 {
  font-family: var(--serif);
  font-optical-sizing: auto;
  /* 900 sem tracking largo = a letra pesada aplicada direto na parede, como nos letreiros reais */
  font-weight: 900;
  font-size: 1.375rem;
  line-height: 1.25;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.placa .regua { width: 48px; height: 1px; background: var(--tinta-150); margin: 12px auto; }
.placa .sub {
  font-weight: 700;
  font-size: 0.6875rem;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cor-texto-secundario);
}
@media (min-width: 600px) {
  .placa-inner { padding: 40px 32px; }
  .placa h1 { font-size: 1.625rem; }
}

/* ── Overline + box de finalidade/orientação ── */
.overline {
  display: block;
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cor-texto-secundario);
  margin-bottom: 8px;
}
.finalidade { background: var(--cor-superficie); border: 1px solid var(--cor-borda); padding: 20px 22px; margin: 0 0 24px; }
.finalidade::before { content: ""; display: block; width: 64px; height: 2px; background: var(--cor-acento); margin-bottom: 12px; }
.finalidade p { max-width: 40ch; }

.intro { margin: 0 0 24px; max-width: 55ch; }

/* ── Busca ── */
.busca input {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px 12px 42px;
  font: inherit;
  color: var(--cor-texto);
  border: 1px solid var(--cor-borda);
  border-radius: 2px;
  margin-bottom: 24px;
  background: var(--cor-superficie) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b6e71' stroke-width='1.5'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16' y2='16'/%3E%3C/svg%3E") no-repeat 14px center;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.busca input::placeholder { color: var(--tinta-300); }
.busca input:focus { outline: none; border-color: var(--cor-acento); box-shadow: inset 0 0 0 1px var(--cor-acento); }

/* ── Card de pintor ── */
.card {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 16px;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  padding: 20px;
  margin: 0 0 16px;
  transition: border-color var(--transicao);
}
.card:hover { border-color: var(--tinta-900); }
.card--solo { display: block; }
#cards .card { cursor: pointer; }
.card h2 a { text-decoration: none; }
.card h2 a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.card .num {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--tinta-300);
  font-variant-numeric: tabular-nums;
}
.card h2 { font-family: var(--serif); font-weight: 600; font-size: 1.25rem; line-height: 1.3; letter-spacing: 0.01em; }
.card h2 .apelido { font-family: var(--sans); font-weight: 400; font-size: 1rem; color: var(--cor-texto-secundario); }
.card .funcao { font-weight: 500; font-size: 0.8125rem; letter-spacing: 0.02em; color: var(--cor-texto-secundario); }
.card .comum {
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cor-texto-secundario);
  margin: 2px 0 14px;
}
.card .rotulo { margin-bottom: 8px; }
.card ul { list-style: none; border-left: 2px solid var(--tinta-150); padding-left: 12px; display: grid; gap: 8px; }
.card li { font-weight: 600; line-height: 1.4; }
.card .tel { border-top: 1px solid var(--tinta-150); margin-top: 16px; padding-top: 12px; font-variant-numeric: tabular-nums; }
.card > .tel:only-child { border-top: none; margin-top: 0; padding-top: 0; }
.card .tel a { font-weight: 700; text-decoration-color: var(--tinta-300); text-underline-offset: 3px; }

/* ── Lista de links (pintor.html sem hash) ── */
.lista-links { background: var(--cor-superficie); border: 1px solid var(--cor-borda); }
.lista-links a {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 52px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--tinta-150);
  text-decoration: none;
  font-weight: 600;
  transition: background-color var(--transicao);
}
.lista-links a:last-child { border-bottom: none; }
.lista-links a:hover { background: var(--tinta-050); }
.lista-links .num {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--tinta-300);
  font-variant-numeric: tabular-nums;
  min-width: 2ch;
}
.lista-links .quem { flex: 1; }
.lista-links .onde {
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--cor-texto-secundario);
  text-align: right;
}

/* ── Saudação (página individual) ── */
.saudacao {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: 1.375rem;
  line-height: 1.4;
  text-align: center;
  padding: 24px 0 0;
  margin-bottom: 28px;
}
.saudacao strong { font-weight: 700; color: var(--cor-acento); }
.saudacao::after { content: ""; display: block; width: 48px; height: 1px; background: var(--tinta-150); margin: 20px auto 0; }

/* ── Botão voltar (pintor.html) ── */
.voltar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: fit-content;
  min-height: 48px; /* tap target acessível */
  margin: 32px auto 0;
  padding: 12px 26px;
  border: 1px solid var(--tinta-900);
  background: var(--cor-superficie);
  color: var(--cor-texto);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.8125rem;
  line-height: 1;        /* mata o 1.55 herdado que desalinha texto e ícone */
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;   /* rótulo nunca quebra em duas linhas ao lado do ícone */
  transition: background-color var(--transicao);
}
.voltar svg { flex: none; display: block; }
.voltar:hover { background: var(--tinta-050); }

/* ── Tabela de controle ── */
.aviso {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  padding: 14px 16px;
  margin: 0 0 24px;
  font-size: 0.8125rem;
  color: var(--cor-texto-secundario);
}
.tabela-wrap { overflow-x: auto; background: var(--cor-superficie); border: 1px solid var(--cor-borda); }
table { width: 100%; border-collapse: collapse; font-size: 0.85rem; font-variant-numeric: tabular-nums; }
th {
  background: var(--tinta-900);
  color: var(--branco);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
  padding: 10px 12px;
  white-space: nowrap;
}
td { border-bottom: 1px solid var(--tinta-150); padding: 10px 12px; vertical-align: top; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:nth-child(even) { background: var(--tinta-050); }
td.num { font-weight: 700; font-size: 0.6875rem; letter-spacing: 0.1em; color: var(--tinta-300); padding-top: 13px; }
td .mini { color: var(--cor-texto-secundario); font-size: 0.78rem; }
.pendente { color: var(--tinta-300); text-align: center; }

/* ── Rodapé ── */
.rodape {
  border-top: 1px solid var(--tinta-150);
  margin-top: 40px;
  padding-top: 16px;
  color: var(--cor-texto-secundario);
  font-size: 0.8125rem;
  line-height: 1.6;
  text-align: center;
}
.rodape a { color: var(--cor-texto-secundario); }

/* ── Impressão / exportar PDF ── */
@media print {
  html { font-size: 112.5%; } /* PDF: base 18px, um degrau acima da tela */
  body {
    background: var(--branco);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact; /* garante th preto e zebra no PDF */
  }
  .pagina { max-width: 100%; padding: 0; }
  .busca, .voltar { display: none; } /* busca e botão de navegação não existem em papel */
  .card, tr { break-inside: avoid; }
  .placa { margin-top: 0; }
  a { text-decoration: none; color: inherit; }
  .card:hover { border-color: var(--cor-borda); }
  @page { size: A4; margin: 14mm; }
}