/* Site estático da lista de espera. Sem fonte externa nem framework: cada requisição a
   terceiro é dado do visitante saindo antes do aceite de cookies, e a página tem de abrir
   rápido no 4G de quem chega pelo TikTok. */

:root {
  --fundo: #fbfaf7;
  --superficie: #ffffff;
  --texto: #1d2125;
  --texto-suave: #4d555c;
  --linha: #dcd8d0;
  --destaque: #0f5c4d;
  --destaque-forte: #0a4237;
  --destaque-claro: #e3f0ec;
  --alerta: #fff3c4;
  --alerta-borda: #c9a227;
  --raio: 10px;
  --largura: 44rem;
  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: 1.0625rem;
  line-height: 1.6;
  /* Palavra longa (e-mail, URL, CNPJ) quebra em vez de empurrar a página para o lado no celular. */
  overflow-wrap: anywhere;
}

a { color: var(--destaque); }
a:hover { color: var(--destaque-forte); }

:focus-visible { outline: 3px solid var(--alerta-borda); outline-offset: 2px; }

.pular { position: absolute; left: -999px; }
.pular:focus { left: 1rem; top: 1rem; background: var(--superficie); padding: .5rem 1rem; z-index: 10; }

/* Aviso de independência em toda página, antes de qualquer outra coisa: nome do TJSP e da
   VUNESP aparecem no texto, e o visitante não pode achar que é canal oficial. */
.aviso-independencia {
  margin: 0;
  padding: .5rem 1rem;
  background: var(--texto);
  color: #fff;
  font-size: .875rem;
  text-align: center;
}

.topo {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.topo .marca { font-weight: 700; font-size: 1.125rem; color: var(--texto); text-decoration: none; }

main { max-width: var(--largura); margin: 0 auto; padding: 0 1rem 3rem; }

h1, h2, h3 { line-height: 1.25; }
h1 { font-size: clamp(1.75rem, 6vw, 2.5rem); margin: 1rem 0 .75rem; }
h2 { font-size: 1.375rem; margin: 2.5rem 0 .75rem; }
h3 { font-size: 1.125rem; margin: 1.5rem 0 .5rem; }

.chamada { font-size: 1.125rem; color: var(--texto-suave); margin-top: 0; }
.rotulo-topo { font-size: .875rem; font-weight: 600; color: var(--destaque); text-transform: uppercase; letter-spacing: .04em; margin: 1.5rem 0 0; }

.cartao {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 1.25rem;
  margin: 1.25rem 0;
}

.formulario label { display: block; font-weight: 600; margin: .75rem 0 .25rem; }
.formulario input[type="email"], .formulario select {
  width: 100%;
  font: inherit;
  padding: .75rem;
  border: 1px solid var(--texto-suave);
  border-radius: 8px;
  background: #fff;
  color: var(--texto);
  /* 16px ou mais: abaixo disso o Safari do iPhone dá zoom no campo e a página desalinha. */
  font-size: 1rem;
}
.formulario .consentimento { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; font-size: .9375rem; }
.formulario .consentimento input { margin-top: .3rem; width: 1.15rem; height: 1.15rem; flex: none; }
.formulario .miuda { font-size: .875rem; color: var(--texto-suave); margin: .75rem 0 0; }
/* Armadilha para robô (o Brevo descarta envio com este campo preenchido). */
.formulario .robo { position: absolute; left: -5000px; }

.botao {
  display: inline-block;
  width: 100%;
  margin-top: 1rem;
  padding: .85rem 1.25rem;
  border: 0;
  border-radius: 8px;
  background: var(--destaque);
  color: #fff;
  font: inherit;
  font-weight: 700;
  font-size: 1.0625rem;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.botao:hover { background: var(--destaque-forte); color: #fff; }
.botao.secundario { background: transparent; color: var(--texto); border: 2px solid var(--texto); }
.botao.secundario:hover { background: var(--texto); color: #fff; }

.lista-limpa { list-style: none; padding: 0; margin: 0; }
.lista-limpa li { padding: .6rem 0; border-top: 1px solid var(--linha); }
.lista-limpa li:first-child { border-top: 0; }

.regras { display: grid; gap: .75rem; grid-template-columns: 1fr; margin: 1rem 0; }
.regra { background: var(--destaque-claro); border-radius: var(--raio); padding: 1rem; }
.regra strong { display: block; font-size: 1.125rem; }

.linha-do-tempo { list-style: none; padding: 0; margin: 1rem 0; }
.linha-do-tempo li { display: grid; grid-template-columns: 6.5rem 1fr; gap: .75rem; padding: .6rem 0; border-top: 1px solid var(--linha); }
.linha-do-tempo li:first-child { border-top: 0; }
.linha-do-tempo .quando { font-weight: 700; color: var(--destaque); }

details { border-top: 1px solid var(--linha); padding: .75rem 0; }
details summary { cursor: pointer; font-weight: 600; }
details p { margin: .5rem 0 0; }

/* Tabela larga rola dentro da própria caixa; a página nunca rola para o lado. */
.tabela-rolavel { overflow-x: auto; margin: 1rem 0; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie); }
table { border-collapse: collapse; width: 100%; font-size: .9375rem; }
th, td { text-align: left; vertical-align: top; padding: .6rem .75rem; border-top: 1px solid var(--linha); }
thead th { border-top: 0; background: var(--destaque-claro); }
tbody th { font-weight: 600; min-width: 7.5rem; }

/* Tabela de quatro colunas no celular: espremida, quebra palavra no meio ("Envia r o mate
   rial"). Abaixo de 40rem cada linha vira um bloco com o rótulo da coluna antes do valor. */
@media (max-width: 40rem) {
  table.empilhada, table.empilhada tbody, table.empilhada tr, table.empilhada th, table.empilhada td { display: block; }
  table.empilhada thead { display: none; }
  table.empilhada tr { border-top: 1px solid var(--linha); padding: .5rem 0; }
  table.empilhada tr:first-child { border-top: 0; }
  table.empilhada th, table.empilhada td { border: 0; padding: .2rem .75rem; }
  table.empilhada th { font-size: 1rem; }
  table.empilhada td::before { content: attr(data-rotulo) ": "; font-weight: 600; }
}

.nota { font-size: .875rem; color: var(--texto-suave); }

/* Marca de decisão pendente nos rascunhos: tem de saltar aos olhos na revisão, e
   montar-site.mjs --publicar recusa enquanto existir alguma. */
mark.decidir { background: var(--alerta); border: 1px dashed var(--alerta-borda); padding: 0 .2rem; }

.documento h2 { font-size: 1.1875rem; }
.documento .versao { color: var(--texto-suave); font-size: .9375rem; }

.rodape {
  border-top: 1px solid var(--linha);
  background: var(--superficie);
  font-size: .875rem;
  color: var(--texto-suave);
}
.rodape .dentro { max-width: var(--largura); margin: 0 auto; padding: 1.5rem 1rem 6rem; }
.rodape nav { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-bottom: 1rem; }
.rodape nav a, .rodape nav button { color: var(--texto); font: inherit; }
.rodape button.link { background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }
.rodape p { margin: .35rem 0; }

/* Banner de cookies: rejeitar tem o mesmo peso visual que aceitar. O guia de cookies da ANPD
   pede que recusar seja tão fácil quanto aceitar; botão de rejeitar apagado ou escondido
   tira a validade do aceite. */
.banner-cookies {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 20;
  background: var(--superficie);
  border-top: 2px solid var(--texto);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, .12);
  padding: 1rem;
}
.banner-cookies[hidden] { display: none; }
.banner-cookies .dentro { max-width: var(--largura); margin: 0 auto; }
.banner-cookies p { margin: 0 0 .75rem; font-size: .9375rem; }
.banner-cookies .acoes { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.banner-cookies .botao { margin-top: 0; }

@media (min-width: 40rem) {
  .regras { grid-template-columns: repeat(3, 1fr); }
  .botao { width: auto; }
  .banner-cookies .acoes { display: flex; justify-content: flex-end; }
  .banner-cookies .botao { min-width: 10rem; }
}

@media print {
  .aviso-independencia { background: none; color: var(--texto); border-bottom: 1px solid var(--linha); }
  .banner-cookies, .rodape nav { display: none; }
}