/* decisoes.profies.com.br
   Uma folha só, sem framework e sem CDN. As cores e as medidas vêm da régua da
   ProFies; o que não estiver aqui não existe na página.

   ⚠️ SEM ANIMAÇÃO, SEM SOMBRA, SEM GRADIENTE. A página se sustenta em não
   vender urgência: qualquer coisa que pisque ou empurre o leitor contradiz o
   texto no mesmo rolar de tela. */

:root {
  --azul: #4256c8;
  --azul-escuro: #2e3c8c;
  --grafite: #141a3c;
  --tinta: #1b1e2b;
  --tinta-apoio: #565b6e;
  --linha: #e2e4ea;
  --fundo: #ffffff;
  --fundo-suave: #f7f8fb;
  --amarelo: #fff6d6;   /* FED766 clareado: fundo do aviso, com tinta escura por cima */
  --amarelo-borda: #f2d98a;
  --largura: 760px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  /* ⚠️ SÓ FONTE DO PRÓPRIO DISPOSITIVO: nada de CDN, nem Google Fonts. A
     página tem de abrir igual com a rede ruim do celular do aluno. */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.62;
}

/* Dois pesos, e só. Títulos em caixa normal. */
h1, h2, h3 { font-weight: 500; line-height: 1.28; margin: 0; letter-spacing: -0.01em; }
h1 { font-size: 34px; }
h2 { font-size: 25px; }
h3 { font-size: 19px; }
p { margin: 0 0 16px; }
a { color: var(--azul); }

.faixa { padding: 0 24px; }
.miolo { max-width: var(--largura); margin: 0 auto; }

/* Anel de foco visível em tudo que recebe teclado. */
a:focus-visible, button:focus-visible, input:focus-visible, .cartao:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Abertura ─────────────────────────────────────────────────────────── */
.abertura {
  background: var(--grafite);
  color: #fff;
  padding: 56px 24px 52px;
}
.abertura .chapeu {
  font-size: 14px;
  color: #b9c0dd;
  margin: 0 0 18px;
}
.abertura h1 { color: #fff; max-width: 20ch; }
.abertura p {
  color: #d7dbea;
  margin: 20px 0 0;
  max-width: 62ch;
}
.desde {
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 20px;
  color: #fff;
}

/* ── Busca ────────────────────────────────────────────────────────────── */
.busca { padding: 34px 24px 8px; }
.busca label { display: block; font-size: 14px; color: var(--tinta-apoio); margin-bottom: 8px; }
.busca input {
  width: 100%;
  padding: 13px 15px;
  font-size: 16px;
  font-family: inherit;
  color: var(--tinta);
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: 10px;
}
.busca input::placeholder { color: #6b7189; } /* 4,83:1 sobre branco, medido */
/* ⚠️ NENHUM CONTADOR DE RESULTADOS: decisão do Osório, a página não exibe
   número de decisões em lugar nenhum. Quando a busca não acha nada, o aviso
   abaixo diz isso sem contar o que achou. */
.sem-resultado {
  margin: 26px 0 0;
  color: var(--tinta-apoio);
}

/* ── Lista ────────────────────────────────────────────────────────────── */
.lista { padding: 18px 24px 8px; }
.cartao {
  display: block;
  padding: 24px 0;
  border-bottom: 1px solid var(--linha);
  color: inherit;
  text-decoration: none;
}
.cartao:hover { background: var(--fundo-suave); }
.cartao .alto {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: baseline;
  margin-bottom: 8px;
}
.cartao .tipo { font-weight: 500; }
.cartao .orgao { color: var(--tinta-apoio); font-size: 15px; }
.cartao .quando { color: var(--tinta-apoio); font-size: 15px; }
.cartao .resumo { margin: 0 0 10px; max-width: 68ch; }
.cartao .abrir { color: var(--azul); font-size: 15px; }
.selo-parcial {
  font-size: 13px;
  color: var(--azul-escuro);
  border: 1px solid #c8cfee;
  border-radius: 999px;
  padding: 1px 9px;
}

/* ── Aviso das decisões contrárias ────────────────────────────────────── */
/* ⚠️ EM DESTAQUE, NO MEIO DA PÁGINA, e nunca no rodapé nem em letra menor:
   é o bloco que mais convence, e escondê-lo destrói o argumento. */
.aviso {
  background: var(--amarelo);
  border: 1px solid var(--amarelo-borda);
  border-radius: 14px;
  padding: 30px 28px;
  margin: 46px 24px;
}
.aviso .miolo { max-width: calc(var(--largura) - 56px); }
.aviso h2 { margin-bottom: 14px; }
.aviso p { margin-bottom: 12px; }
.aviso p:last-child { margin-bottom: 0; }

/* ── Blocos de texto ──────────────────────────────────────────────────── */
.bloco { padding: 42px 24px; }
.bloco h2 { margin-bottom: 16px; }
.bloco p { max-width: 66ch; }

.promessas { list-style: none; padding: 0; margin: 8px 0 0; }
.promessas li {
  padding: 18px 0;
  border-top: 1px solid var(--linha);
  max-width: 66ch;
}
.promessas li strong { font-weight: 500; display: block; margin-bottom: 4px; }

.chamada {
  background: var(--fundo-suave);
  border-top: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha);
  padding: 46px 24px;
}
.chamada .contato {
  display: inline-block;
  margin-top: 8px;
  padding: 13px 22px;
  background: var(--grafite);
  color: #fff;
  border-radius: 10px;
  text-decoration: none;
}
.chamada .contato:hover { background: #23294f; }

.rodape {
  padding: 34px 24px 60px;
  color: var(--tinta-apoio);
  font-size: 14px;
}
.rodape p { max-width: 74ch; }

/* ── Página de uma decisão ────────────────────────────────────────────── */
.voltar { display: inline-block; margin: 26px 0 0; font-size: 15px; }
.cabeca { padding: 8px 24px 0; }
.cabeca .linha-tipo { color: var(--tinta-apoio); font-size: 15px; margin-bottom: 10px; }
.cabeca h1 { font-size: 28px; max-width: 30ch; }
.cabeca .orgao { margin-top: 14px; color: var(--tinta-apoio); }

.colunas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  padding: 34px 24px 8px;
}
.colunas h2 { font-size: 16px; color: var(--tinta-apoio); margin-bottom: 8px; }
.colunas p { margin: 0; }

.literal {
  margin: 18px 24px 0;
  padding: 24px 26px;
  background: var(--fundo-suave);
  border-left: 3px solid var(--azul);
  border-radius: 0 10px 10px 0;
}
.literal h2 { font-size: 16px; color: var(--tinta-apoio); margin-bottom: 10px; }
.literal blockquote { margin: 0; font-size: 16px; }

.documento { padding: 34px 24px 8px; }
.documento h2 { font-size: 16px; color: var(--tinta-apoio); margin-bottom: 12px; }
.moldura {
  border: 1px solid var(--linha);
  border-radius: 10px;
  overflow: hidden;
  background: var(--fundo-suave);
  min-height: 320px;
}
.moldura iframe { display: block; width: 100%; height: 78vh; border: 0; background: #fff; }
.moldura .espera { padding: 26px; color: var(--tinta-apoio); font-size: 15px; }
.acoes { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 12px; }
.acoes a {
  display: inline-block;
  padding: 11px 18px;
  border: 1px solid var(--linha);
  border-radius: 10px;
  color: var(--tinta);
  text-decoration: none;
  font-size: 15px;
}
.acoes a:hover { background: var(--fundo-suave); }

.nota {
  margin: 26px 24px 0;
  color: var(--tinta-apoio);
  font-size: 14px;
}
.nota p { max-width: 74ch; }

/* ── Tela estreita ────────────────────────────────────────────────────── */
@media (max-width: 620px) {
  body { font-size: 16px; }
  h1 { font-size: 27px; }
  h2 { font-size: 21px; }
  .abertura { padding: 40px 20px 38px; }
  .faixa, .busca, .lista, .bloco, .chamada, .rodape, .cabeca, .documento { padding-left: 20px; padding-right: 20px; }
  .aviso { margin: 34px 20px; padding: 24px 20px; }
  .colunas { grid-template-columns: 1fr; gap: 22px; padding: 26px 20px 4px; }
  .literal { margin: 16px 20px 0; padding: 20px; }
  .nota { margin: 22px 20px 0; }
  .moldura iframe { height: 62vh; }
  .desde { font-size: 18px; }
}