/* =============================================================
   PRUMO · a página como pranchas
   Por cima de prumo.css e prumo-boost.css: papel creme, tinta preta,
   títulos e texto em serifa (Newsreader), anotações em DM Mono, cantos
   retos e cada seção numa folha (moldura fina e carimbo no canto).
   Cobalto (a IA) e vermelho (o lápis de quem assina) só nas marcas.
   O app (.pr-tela) é o produto, não a prancha: fica com a pele dele.
   ============================================================= */
:root {
  --papel: #eeebe3;
  --cartao: #e5e0d5;
  --branco: #faf8f3;
  --grafite: #171613;
  --grafite-2: #4b4842;
  --grafite-3: #615d56;
  --linha: rgba(23, 22, 19, 0.16);
  --linha-forte: rgba(23, 22, 19, 0.32);
  --f-titulo: "Newsreader", "Iowan Old Style", Georgia, serif;
  --f-corpo: "Newsreader", "Iowan Old Style", Georgia, serif;
}
html {
  font-synthesis-weight: none;
}
body {
  font-size: clamp(17px, 1.15vw, 19px);
  line-height: 1.55;
}
::selection {
  background: var(--grafite);
  color: var(--papel);
}

/* o app e o protótipo: a pele original do produto */
.pr-tela {
  --papel: #f7f8f4;
  --cartao: #e8eae4;
  --branco: #ffffff;
  --grafite: #15181b;
  --grafite-2: #454c52;
  --grafite-3: #5a6268;
  --linha: rgba(21, 24, 27, 0.16);
  --linha-forte: rgba(21, 24, 27, 0.3);
  --f-titulo: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  --f-corpo: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-family: var(--f-corpo);
  font-size: clamp(16px, 1.1vw, 18px);
  line-height: 1.6;
  font-synthesis-weight: auto;
}
.pr-tela ::selection {
  background: #c9d6fb;
  color: #15181b;
}

/* ---------- títulos: serifa, peso de livro, itálico no destaque ---------- */
.pr-h2 {
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.02;
}
.pr-h2 em {
  font-style: italic;
}
.pr-h2 em:not(.pr-verm):not(.pr-azul) {
  color: inherit;
}
.pr-h3 {
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* ---------- topo ---------- */
.pr-topo__marca b {
  font: 400 22px / 1 var(--f-titulo);
  letter-spacing: -0.01em;
}
.pr-topo__voltar {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pr-topo__selo {
  border-radius: 2px;
  font: 500 12px / 1 var(--f-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* telas baixas (celular deitado): topo mais fino, sobra mais prancha */
@media (max-height: 560px) {
  .pr-topo {
    padding-top: 8px;
    padding-bottom: 8px;
  }
}

/* ---------- botões e controles: retângulos de prancha ---------- */
.pr-botao {
  min-height: 44px;
  padding: 0 16px;
  border-width: 1px;
  border-radius: 2px;
  font: 500 12px / 1 var(--f-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pr-botao:hover {
  transform: none;
}
.pr-botao--sec {
  border-color: var(--grafite);
}
.pr-botao--sec:hover {
  background: rgba(23, 22, 19, 0.06);
}

/* cantos retos nos cartões e controles da página (círculos continuam círculos) */
.pr-pular,
.pr-chip,
.pr-seg,
.pr-seg button,
.pr-num,
.pr-num__barras i,
.pr-num__barras b,
.pr-dplanta__quadro,
.pr-dor,
.pr-dor__btn,
.pr-etapa,
.pr-etapa__btn,
.pr-etapa-painel,
.pr-seguir,
.pr-abas button,
.pr-estado,
.pr-ia__quadro,
.pr-ia__chip,
.pr-achado,
.pr-achado__acoes button,
.pr-comp__cam,
.pr-comp__tag,
.pr-a-comp .pr-comp__palco,
.pr-cs--3d .pr-cs__3d,
.pr-cs__painel,
.pr-ctl,
.pr-dec,
.pr-anel,
.pr-licao,
.pr-flut,
.pr-solto,
.pr-mira__txt {
  border-radius: 2px;
}
.pr-janela__barra {
  border-radius: 4px 4px 0 0;
}

/* ---------- cada seção é uma folha: moldura e carimbo ---------- */
.pr-secao,
.pr-processo,
.pr-convite {
  position: relative;
}
.pr-folha {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.pr-folha::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid var(--linha-forte);
}
.pr-folha__carimbo {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  margin: 0;
  border-top: 1px solid var(--linha-forte);
  border-left: 1px solid var(--linha-forte);
  background: var(--papel);
  font: 500 11px / 1 var(--f-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grafite-2);
}
.pr-folha__carimbo span {
  padding: 8px 11px 7px;
}
.pr-folha__carimbo span + span {
  border-left: 1px solid var(--linha-forte);
}
.pr-folha__carimbo span:nth-child(2) {
  color: var(--grafite);
}
/* folhas escuras (cianotipia da IA e o convite em tinta) */
[data-tema="escuro"] .pr-folha::before,
[data-tema="escuro"] .pr-folha__carimbo,
[data-tema="escuro"] .pr-folha__carimbo span + span {
  border-color: rgba(255, 255, 255, 0.34);
}
[data-tema="escuro"] .pr-folha__carimbo {
  background: transparent;
  color: rgba(255, 255, 255, 0.78);
}
[data-tema="escuro"] .pr-folha__carimbo span:nth-child(2) {
  color: #fff;
}
/* o fio de prumo da leitura corre pela direita nas telas largas: o carimbo dá passagem */
@media (min-width: 1100px) and (min-height: 600px) {
  .pr-folha__carimbo {
    right: 52px;
  }
}
.pr-desafio .pr-folha__carimbo {
  background: var(--cartao);
}
@media (max-width: 599px) {
  .pr-folha::before {
    inset: 8px;
  }
  .pr-folha__carimbo {
    right: 8px;
    bottom: 8px;
    font-size: 10px;
  }
  .pr-folha__carimbo span {
    padding: 7px 8px 6px;
  }
  .pr-folha__carimbo span:first-child {
    display: none;
  }
}

/* ---------- tela de carga e rodapé ---------- */
#carga {
  background: var(--papel);
}
.pr-carga__pct {
  color: var(--grafite);
}