/* ── Página-ponte do 48º Exame ────────────────────────────────────────────────
   Escopo próprio (.pn-*), carregado DEPOIS de app.css. A ponte reusa o sistema
   (Fraunces + Hanken Grotesk, marfim/grafite/âmbar) e não edita nenhum arquivo dele.

   A peça admite um erro em público. Por isso o visual é uma NOTA, não um lançamento:
   uma coluna de leitura, nenhum card, nenhum selo, nenhum número em destaque e
   nenhuma animação. O âmbar aparece em dois lugares apenas — o sublinhado do link da
   aferição e o anel de foco. O halo dourado do topo (atmosfera padrão do portal) é
   desligado aqui: entusiasmo de fundo contradiz o texto.
   ────────────────────────────────────────────────────────────────────────────── */

.pn-body {
  --pn-shade: #f1eee6;        /* faixa do bloco de captura (marfim um passo mais fundo) */
  --pn-rule: #ddd8cc;         /* filetes e bordas de campo */
  --pn-measure: 34rem;        /* medida de leitura do corpo (~66 caracteres) */
  --pn-column: 43rem;         /* largura do bloco da página em telas grandes */

  background-image: none;     /* sem halo dourado: a peça não celebra nada */
  overflow-x: hidden;
  overflow-x: clip;
}

.pn-body > * { max-width: 100%; min-width: 0; }

.pn-inner {
  width: 100%;
  max-width: var(--pn-column);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5.5vw, 2rem);
}

/* ── Marca ─────────────────────────────────────────────────────────────────── */
/* Sem menu e sem link: a página tem uma ação só, e não há para onde navegar. */
.pn-mark {
  padding-block: clamp(1.75rem, 5vw, 2.75rem) 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  color: var(--legal-black);
}
.pn-mark .dot { color: var(--gold); }

/* ── O documento ───────────────────────────────────────────────────────────── */
.pn-doc { padding-block: clamp(2.25rem, 7vw, 3.5rem) clamp(2.5rem, 8vw, 4rem); }

.pn-headline {
  max-width: 37rem;
  font-size: clamp(1.95rem, 5.4vw, 3rem);
  font-weight: 480;
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--legal-black);
  text-wrap: balance;
}

.pn-lede {
  max-width: var(--pn-measure);
  margin-top: clamp(1.4rem, 3.5vw, 1.9rem);
  font-size: clamp(1.1rem, 2.3vw, 1.26rem);
  line-height: 1.52;
  color: var(--ink);
}

.pn-text { max-width: var(--pn-measure); margin-top: 1.9rem; }
.pn-text > p + p { margin-top: 1.05rem; }
.pn-text > p { line-height: 1.72; }

/* O parágrafo do dado medido. A régua marca "isto é a medição", não decora:
   é o único lugar da página com estrutura à esquerda. */
.pn-measured {
  margin-block: 1.6rem;
  padding-left: clamp(0.95rem, 3vw, 1.25rem);
  border-left: 2px solid var(--line-strong);
  color: var(--legal-black);
}

.pn-aside { max-width: var(--pn-measure); margin-top: 2.1rem; }

.pn-link {
  color: var(--legal-black);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 1px;
  transition: border-color 0.15s var(--ease);
}
.pn-link:hover { border-bottom-color: var(--gold-deep); }

/* ── Captura ───────────────────────────────────────────────────────────────── */
/* Faixa que sangra na largura da tela, com o conteúdo no MESMO eixo do texto acima:
   a ação é a continuação da leitura, não um card colado por cima dela. */
.pn-capture {
  background: var(--pn-shade);
  border-top: 1px solid var(--pn-rule);
  border-bottom: 1px solid var(--pn-rule);
  padding-block: clamp(2.25rem, 7vw, 3.25rem);
}

.pn-capture__lede {
  max-width: var(--pn-measure);
  font-size: clamp(1.06rem, 2.1vw, 1.16rem);
  line-height: 1.6;
  color: var(--legal-black);
}
.pn-capture__ask { max-width: var(--pn-measure); margin-top: 0.9rem; line-height: 1.62; }

.pn-form { max-width: var(--pn-measure); margin-top: 1.5rem; }

.pn-label {
  display: block;
  margin-bottom: 0.45rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--legal-black);
}

.pn-field { display: grid; gap: 0.7rem; }
@media (min-width: 34rem) {
  .pn-field { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
}

.pn-input {
  width: 100%;
  min-width: 0;
  padding: 0.88rem 1rem;
  font-family: var(--font-body);
  font-size: 1.0625rem;          /* ≥16px: o iOS não dá zoom ao focar */
  line-height: 1.3;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--pn-rule);
  border-radius: var(--radius);
}
.pn-input::placeholder { color: var(--ink-faint); }
.pn-input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-color: var(--gold); }
.pn-input[aria-invalid="true"] { border-color: var(--danger); }

.pn-submit {
  padding: 0.9rem 1.45rem;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--paper);
  background: var(--legal-black);
  border: 1px solid var(--legal-black);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 0.15s var(--ease);
}
.pn-submit:hover { background: #000; }
.pn-submit:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.pn-error {
  max-width: var(--pn-measure);
  margin-bottom: 0.9rem;
  padding-left: 0.85rem;
  border-left: 2px solid var(--danger);
  font-size: 0.97rem;
  color: var(--danger);
}

.pn-micro {
  max-width: var(--pn-measure);
  margin-top: 1rem;
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--ink-faint);
}

/* ── Confirmação (tela 2) ──────────────────────────────────────────────────── */
.pn-next { max-width: var(--pn-measure); margin-top: clamp(2rem, 6vw, 2.75rem); }
.pn-next + .pn-next { margin-top: clamp(1.75rem, 5vw, 2.25rem); padding-top: clamp(1.75rem, 5vw, 2.25rem); border-top: 1px solid var(--pn-rule); }
.pn-next p { line-height: 1.68; }

.pn-action {
  display: inline-block;
  margin-top: 1.1rem;
  padding: 0.82rem 1.35rem;
  font-size: 1.0125rem;
  font-weight: 600;
  color: var(--legal-black);
  border: 1px solid var(--legal-black);
  border-radius: var(--radius);
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}
.pn-action:hover { background: var(--legal-black); color: var(--paper); }
.pn-action:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ── Estado operacional (indisponível) ─────────────────────────────────────── */
/* Sem ilustração, sem ícone e sem botão: é uma frase, no mesmo eixo do resto. */
.pn-status { padding-block: clamp(3rem, 12vw, 6rem); }
.pn-status__text {
  max-width: var(--pn-measure);
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 3.2vw, 1.65rem);
  font-weight: 480;
  line-height: 1.35;
  letter-spacing: -0.012em;
  color: var(--legal-black);
}

/* ── Rodapé ────────────────────────────────────────────────────────────────── */
/* Só o indispensável: quem publica e onde estão os textos legais. */
.pn-foot {
  margin-top: auto;
  padding-block: clamp(2.25rem, 6vw, 3rem);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--ink-faint);
}
.pn-foot p + p { margin-top: 0.45rem; }
.pn-foot a { border-bottom: 1px solid var(--line-strong); }
.pn-foot a:hover { border-bottom-color: var(--gold); }
.pn-foot a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .pn-body * { transition-duration: 0.01ms !important; }
}