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

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--papel);
  color: var(--grafite);
  font-family: var(--f-corpo);
  font-size: var(--t-corpo);
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* O papel quadriculado: uma camada fixa só, contínua na página toda. O topo repete a mesma
   definição (--grade-img) e emenda sem faixa porque as duas nascem no canto da janela. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--grade-img);
  background-size: var(--grade-passo) var(--grade-passo);
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, fieldset { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
img, svg { display: block; max-width: 100%; }
button, input, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; }
b, strong { font-weight: 700; }

[hidden] { display: none !important; }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--grafite);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: rgba(240, 124, 52, .28); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.pular {
  position: fixed;
  top: var(--e3);
  left: var(--e3);
  z-index: 100;
  padding: var(--e3) var(--e4);
  border-radius: var(--r-p);
  background: var(--grafite);
  color: var(--papel);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}
.pular:focus-visible { transform: none; outline-color: var(--papel); }

/* Título de tela: serifa grande e apertada; a palavra em destaque vai em itálico laranja de texto. */
.titulo {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: var(--t-titulo);
  line-height: 1;
  letter-spacing: -.022em;
  text-wrap: balance;
}
.titulo em { font-style: italic; color: var(--laranja-txt); }
.titulo:focus { outline: none; }

.h2 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: var(--t-h2);
  line-height: 1.05;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.h3 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: var(--t-h3);
  line-height: 1.1;
  letter-spacing: -.01em;
}

.lead {
  font-size: var(--t-corpo);
  line-height: 1.55;
  max-width: 34rem;
  text-wrap: pretty;
}

.apoio {
  font-size: var(--t-apoio);
  line-height: 1.5;
  color: var(--grafite-claro);
}

.num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Sombra de papel: fina e neutra, nunca difusa */
.papel {
  background: var(--papel);
  border: 1px solid var(--fio);
  border-radius: var(--r-m);
}

/* Grades de uma coluna: a coluna precisa poder encolher (minmax(0, 1fr)), senão um campo de texto,
   com largura mínima própria, empurra o conteúdo pra fora da tela em 320px. :where() não pesa na cascata:
   qualquer regra de coluna explícita (desktop, placar, chips em grade) continua ganhando. */
:where(
  .tela-cabeca, .tela-corpo, .tela-rodape, .bloco, .bloco-cabeca, .campo, .campos-oferta, .clientes-form,
  .clientes-lista, .estrutura-campos, .custo-campos, .checklist, .sinais, .servicos, .teste-corpo, .teste-linhas,
  .teste-linha, .caminho-detalhe, .caminho-linhas, .mensagens, .mensagem, .bolhas, .placar, .placar-linhas,
  .veredito, .cartoes-nicho, .cartao-nicho-corpo, .pergunta, .bloco-adicionar, .sugestoes, .ficha-corpo,
  .ficha-acoes, .ficha-copias, .ficha-levar, .ficha-secoes, .ficha-secao, .amanha, .amanha-lista, .nomes, .erros,
  .caso, .caso-linhas, .frase, .frase-retorno, .custo-resultado, .contador, .inicio, .inicio-heroi, .inicio-texto,
  .inicio-passos, .modal-corpo, .modal-acoes, .abrir-fechar-bloco, .alternar-texto, .servico-cabeca
) { grid-template-columns: minmax(0, 1fr); }