/* =========================================================
   POSTULAX — ACESSO: cadastro e login institucionais
   Account 1.0 · Lote 2 · Institutional Experience 1.0
   ---------------------------------------------------------
   Uma estrutura de autenticação, quatro composições. A origem
   (`<html data-origem>`, marcada por postulax-acesso.js) muda o
   PAINEL e a faixa do celular. O formulário é o mesmo.

   SOLUÇÃO 1 · HORIZONTE (aprovada pelo fundador em 27/09/2026)
   O painel é uma paisagem: o navy institucional no alto, o papel
   do Conhecimento emergindo do chão, e a coruja oficial no
   horizonte. A passagem é um gradiente tonal contínuo —

     navy → azul mineral → taupe quente → marfim

   — e a ÊNFASE é a altura do horizonte:

     finance, produtos   horizonte baixo    o vidro domina
     home                horizonte no meio  equilíbrio da Holding
     conhecimento        horizonte alto     o papel domina

   O QUE NÃO MUDA
   Os cartões de vidro, os dois gráficos (mesmos pontos, mesmos
   degradês) e a marca d'água são os aprovados. Eles continuam
   escritos no HTML de cada página; aqui só muda onde ficam.

   ONDE O GRADIENTE NÃO ENTRA
   Entre bandas de uma página que rola, a passagem é RETA
   (Hotfix 01 §5). Este gradiente vive dentro de um painel.

   Texto só sobre navy pleno ou papel pleno: na zona de passagem
   o contraste cai abaixo de 4,5:1, e por isso nada é escrito ali.

   Prefixo `.pa-`. As classes `.su-*` são as do cadastro aprovado.
   ========================================================= */

:root {
  --pa-serif: Newsreader, Georgia, 'Times New Roman', serif;
  --pa-sans: Manrope, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pa-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --pa-num: Sora, Manrope, system-ui, sans-serif;

  --pa-papel: #F6F3EE;
  --pa-papel-recuo: #F1EDE5;
  --pa-tinta: #101C2A;
  --pa-tinta-2: #4A4941;
  --pa-tinta-3: #5E5B54;
  --pa-rotulo: #63605A;
  --pa-filete: #C9C1B2;
  --pa-filete-2: #E4DED3;
}

/* ═══ TIPOGRAFIA DAS TELAS DE CONTA ═══════════════════════════════
   A voz da Holding é Newsreader leve; a interface é Manrope. Campos,
   botões e espaçamentos ficam com as medidas de antes. */
.pa-tela { font-family: var(--pa-sans); }
.pa-tela input, .pa-tela button, .pa-tela select { font-family: inherit; }
.pa-tela .su-title, .pa-tela .lg-title {
  font-family: var(--pa-serif); font-weight: 300;
  font-size: clamp(34px, 3.2vw, 46px); line-height: 1.06; letter-spacing: -.022em;
  color: #F4F8FC; text-align: left; margin-bottom: 10px;
}
.pa-tela .su-sub, .pa-tela .lg-sub {
  font-weight: 300; font-size: 16.5px; line-height: 1.6; color: #AFC0D2;
  text-align: left; margin-bottom: 22px;
}
.pa-tela .su-brand, .pa-tela .lg-brand {
  font-family: var(--pa-num); font-weight: 800; font-size: 15.2px; letter-spacing: .14em;
  justify-content: flex-start; min-height: 44px; margin-bottom: 22px;
}

/* Alvos de toque: os botões sociais tinham 43px e o olho da senha, 34.
   Só a área muda — o que cada um faz é o mesmo. */
.pa-tela .su-social-btn, .pa-tela .lg-social-btn { min-height: 46px; }
.pa-tela .su-pw-toggle {
  min-width: 44px; min-height: 44px; right: 2px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ═══ DUAS COLUNAS ════════════════════════════════════════════════ */
.pa-tela .su-page { min-height: 100vh; min-height: 100svh; align-items: start; }
.pa-tela .su-left { min-height: 100vh; min-height: 100svh; }

/* ── a linha "você volta para…" ── */
.pa-volta {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 20px; padding: 10px 12px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.02);
  font: 400 13px/1.4 var(--pa-sans); color: #AFC0D2;
}
.pa-volta[hidden] { display: none; }
.pa-volta svg { flex: none; color: #8296AC; }
.pa-volta strong { font-weight: 700; color: #F4F8FC; }

/* ═══ O PAINEL ════════════════════════════════════════════════════ */
.pa-tela .su-right {
  /* onde o navy termina e onde o papel começa */
  --pa-h0: 54%;
  --pa-h1: 70%;
  --pa-d: calc(var(--pa-h1) - var(--pa-h0));

  position: sticky; top: 0; align-self: start;
  height: 100vh; height: 100svh; min-height: 640px;
  padding: 0; overflow: hidden; border-left: 1px solid rgba(255,255,255,.06);
  display: block;
  /* o navy do alto é o do painel aprovado: #0A1628 → #0D1B2A */
  background: linear-gradient(180deg,
    #0A1628 0%,
    #0D1B2A var(--pa-h0),
    #15324A calc(var(--pa-h0) + var(--pa-d) * .20),
    #3A5C72 calc(var(--pa-h0) + var(--pa-d) * .38),
    #78868D calc(var(--pa-h0) + var(--pa-d) * .52),
    #A59B8D calc(var(--pa-h0) + var(--pa-d) * .64),
    #D0C7B9 calc(var(--pa-h0) + var(--pa-d) * .78),
    #EBE5DB calc(var(--pa-h0) + var(--pa-d) * .90),
    #F6F3EE var(--pa-h1),
    #F6F3EE 100%);
}
html[data-origem="finance"] .pa-tela .su-right,
html[data-origem="produtos"] .pa-tela .su-right { --pa-h0: 72%; --pa-h1: 86%; }
/* No Conhecimento o céu é uma faixa de altura quase fixa: em tela baixa,
   20% não comportam o cartão e a legenda. O piso em pixels garante que
   nada do céu desça para a zona de passagem. */
html[data-origem="conhecimento"] .pa-tela .su-right {
  --pa-h0: max(20%, 182px);
  --pa-h1: calc(var(--pa-h0) + 15%);
}

/* A coruja oficial, no horizonte. É a mesma marca d'água do painel
   aprovado — o mesmo arquivo —, agora entre os dois chãos. */
.pa-tela .su-watermark {
  position: absolute; left: 50%; right: auto;
  top: calc(var(--pa-h0) + var(--pa-d) / 2);
  transform: translate(-50%, -50%);
  width: clamp(200px, 22vw, 300px); height: auto;
  opacity: .13; filter: none; pointer-events: none; user-select: none;
}

/* ── o céu: navy pleno ── */
.pa-ceu {
  position: absolute; left: 0; right: 0; top: 0; height: var(--pa-h0);
  padding: 40px 48px 10px;
  display: flex; flex-direction: column; justify-content: center;
}
.pa-tela .su-right-inner { max-width: 600px; width: 100%; margin: 0 auto; }
/* ── o chão: papel pleno ── */
.pa-chao {
  position: absolute; left: 0; right: 0; top: var(--pa-h1); bottom: 0;
  padding: 10px 48px 34px; color: var(--pa-tinta);
  display: flex; flex-direction: column; justify-content: center;
}
.pa-chao-in { max-width: 600px; width: 100%; margin: 0 auto; }

/* ── cabeçalhos do céu, um por origem ── */
.pa-cab { display: none; flex-direction: column; gap: 14px; margin-bottom: 22px; }
html:not([data-origem]) .pa-cab--home,
html[data-origem="home"] .pa-cab--home,
html[data-origem="finance"] .pa-cab--finance,
html[data-origem="produtos"] .pa-cab--produtos { display: flex; }

.pa-olho {
  display: flex; align-items: center; gap: 12px;
  font: 500 11px/1 var(--pa-mono); letter-spacing: .2em; text-transform: uppercase; color: #8296AC;
}
.pa-olho::before { content: ""; width: 24px; height: 1px; background: #5B6E84; flex: none; }
.pa-tela .su-right-tag {
  font: 500 11px/1 var(--pa-mono); letter-spacing: .2em; text-transform: uppercase;
  color: #00D9FF; margin-bottom: 0;
}
.pa-tela .su-right-title, .pa-titulo {
  margin: 0; font-family: var(--pa-serif); font-weight: 300;
  font-size: clamp(27px, 2.5vw, 36px); line-height: 1.08; letter-spacing: -.022em; color: #F4F8FC;
}
.pa-titulo em { font-style: italic; color: #AFC0D2; }
.pa-frase { margin: 0; font: 300 15px/1.6 var(--pa-sans); color: #AFC0D2; max-width: 44ch; }

/* ── os cartões aprovados: mesma pele, novo arranjo ── */
.pa-tela .su-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pa-tela .su-card { padding: 16px 18px; min-width: 0; }
.pa-tela .su-card.insight { grid-column: 1 / -1; }
.pa-tela .su-card-name { font-family: var(--pa-sans); }
/* o nome do cartão pode quebrar; a variação, não */
.pa-tela .su-card-head { gap: 8px; align-items: flex-start; }
.pa-tela .su-card-delta { white-space: nowrap; flex: none; }
.pa-tela .su-card-val { font-family: var(--pa-num); font-size: 1.3rem; }
.pa-tela .su-card-sub { font-size: .76rem; }
/* o controle de gastos vem primeiro no HTML aprovado; na Holding e no
   Conhecimento quem fala pelo Finance é o patrimônio */
.pa-tela .su-cards .su-card:nth-child(2) { order: -1; }
html[data-origem="finance"] .pa-tela .su-cards .su-card:nth-child(2) { order: 0; }

html:not([data-origem]) .pa-tela .su-card.insight,
html[data-origem="home"] .pa-tela .su-card.insight,
html[data-origem="conhecimento"] .pa-tela .su-card.insight,
html[data-origem="produtos"] .pa-tela .su-card.insight { display: none; }
html[data-origem="conhecimento"] .pa-tela .su-cards .su-card:nth-child(1),
html[data-origem="produtos"] .pa-tela .su-cards .su-card:nth-child(1) { display: none; }

/* ── Produtos: traço ── */
.pa-traco {
  position: relative; margin-top: 12px; padding: 13px 16px;
  border: 1px dashed rgba(255,255,255,.18); border-radius: 4px;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 24px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap;
}
.pa-traco::before, .pa-traco::after {
  content: ""; position: absolute; width: 10px; height: 10px; pointer-events: none;
}
.pa-traco::before { top: -1px; left: -1px; border-top: 1px solid rgba(217,160,91,.55); border-left: 1px solid rgba(217,160,91,.55); }
.pa-traco::after { bottom: -1px; right: -1px; border-bottom: 1px solid rgba(217,160,91,.55); border-right: 1px solid rgba(217,160,91,.55); }
.pa-traco-txt { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.pa-traco-rot { font: 500 10px/1 var(--pa-mono); letter-spacing: .2em; text-transform: uppercase; color: #AFC0D2; }
.pa-traco-p { font: 300 12.5px/1.5 var(--pa-sans); color: #C9D6E4; }
.pa-selo {
  display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 13px;
  border-radius: 999px; border: 1px solid rgba(217,160,91,.34); background: rgba(217,160,91,.06);
  color: #D9A05B; font: 600 10.5px/1 var(--pa-mono); letter-spacing: .14em; text-transform: uppercase;
  white-space: nowrap; flex: none;
}
.pa-selo::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }

/* no cadastro que veio de Produtos, o traço é a peça principal e vem
   antes do cartão do Finance */
html[data-origem="produtos"] .pa-tela .su-right-inner { display: flex; flex-direction: column; }
html[data-origem="produtos"] .pa-traco { order: 1; margin: 0 0 20px; padding: 22px 20px; }
html[data-origem="produtos"] .pa-mesma { order: 2; display: block; }
html[data-origem="produtos"] .pa-tela .su-cards { order: 3; grid-template-columns: minmax(0, 1fr); max-width: 320px; }
html[data-origem="produtos"] .pa-legenda { order: 4; }
.pa-mesma {
  display: none; margin: 0 0 10px;
  font: 500 10.5px/1 var(--pa-mono); letter-spacing: .2em; text-transform: uppercase; color: #8296AC;
}

.pa-legenda {
  margin: 12px 0 0; font: 500 9.5px/1.5 var(--pa-mono);
  letter-spacing: .12em; text-transform: uppercase; color: #8296AC;
}

/* Conhecimento em destaque: o céu é uma faixa, com o Finance e os
   Produtos lado a lado */
html[data-origem="conhecimento"] .pa-ceu { padding: 22px 48px 6px; justify-content: flex-start; }
html[data-origem="conhecimento"] .pa-tela .su-right-inner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 14px; align-items: stretch;
}
html[data-origem="conhecimento"] .pa-tela .su-cards { grid-template-columns: minmax(0, 1fr); }
html[data-origem="conhecimento"] .pa-tela .su-card { padding: 12px 14px; }
html[data-origem="conhecimento"] .pa-tela .su-card-sub { display: none; }
html[data-origem="conhecimento"] .pa-tela .su-card-val { font-size: 1.05rem; }
html[data-origem="conhecimento"] .pa-tela .su-card-spark { height: 26px; margin-top: 6px; }
html[data-origem="conhecimento"] .pa-traco { margin-top: 0; padding: 12px 14px; align-content: center; }
html[data-origem="conhecimento"] .pa-traco-p { display: none; }
html[data-origem="conhecimento"] .pa-legenda { grid-column: 1 / -1; margin-top: 0; }

/* ── o chão: três formas do Conhecimento ── */
.pa-con-rot {
  font: 700 10.5px/1.2 var(--pa-sans); letter-spacing: .2em;
  text-transform: uppercase; color: var(--pa-rotulo);
}
.pa-con-t { font: 300 25px/1.12 var(--pa-serif); letter-spacing: -.015em; color: var(--pa-tinta); }
.pa-con-s { font: 400 15px/1.5 var(--pa-serif); color: var(--pa-tinta-2); }

/* linha — Finance e Produtos em destaque */
.pa-linha { display: flex; flex-direction: column; gap: 7px; }

/* ficha — Holding */
.pa-ficha { display: none; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--pa-filete); }
.pa-ficha-in { display: grid; grid-template-columns: 62px minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.pa-placa {
  width: 62px; height: 82px; background: var(--pa-papel-recuo); border: 1px solid var(--pa-filete);
  display: flex; align-items: center; justify-content: center;
  font: 300 19px/1 var(--pa-serif); letter-spacing: .02em; color: #A8A196;
}
.pa-ficha-nome { font: 300 25px/1.05 var(--pa-serif); letter-spacing: -.02em; color: var(--pa-tinta); }
.pa-ficha-meta { margin-top: 6px; font: 400 12.5px/1.4 var(--pa-sans); color: var(--pa-tinta-3); }
.pa-mini-rot { font: 700 9.5px/1.2 var(--pa-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--pa-rotulo); }
.pa-obra { margin-top: 5px; font: italic 400 16px/1.25 var(--pa-serif); color: var(--pa-tinta); overflow-wrap: break-word; hyphens: manual; }
.pa-chip {
  display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 999px;
  background: #DFF3F8; border: 1px solid #8FD9EC; color: #025971;
  font: 600 11.5px/1 var(--pa-sans); letter-spacing: .04em; white-space: nowrap;
}
.pa-chip--fio { background: transparent; border-color: #DCD5C9; color: var(--pa-tinta-3); }
.pa-ficha .pa-chip { margin-top: 10px; }
.pa-nota {
  font: 700 9px/1.4 var(--pa-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--pa-rotulo);
}
.pa-ficha .pa-nota { grid-column: 1 / -1; }

html:not([data-origem]) .pa-ficha,
html[data-origem="home"] .pa-ficha { display: block; }

/* editorial — Conhecimento em destaque */
.pa-edit { display: none; flex-direction: column; gap: 16px; }
html[data-origem="conhecimento"] .pa-edit { display: flex; }
html[data-origem="conhecimento"] .pa-linha { display: none; }
.pa-edit-t {
  margin: 0; font: 300 clamp(24px, 2.2vw, 31px)/1.1 var(--pa-serif);
  letter-spacing: -.022em; color: var(--pa-tinta);
}
.pa-edit-t b { font-weight: 500; }
.pa-edit-fio { height: 1px; background: var(--pa-filete); }
.pa-edit-corpo { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 20px; align-items: start; }
.pa-capa-col { display: flex; flex-direction: column; gap: 8px; }
.pa-capa {
  width: 112px; height: 168px; padding: 13px 12px;
  background: var(--pa-papel-recuo); border: 1px solid var(--pa-filete);
  display: flex; flex-direction: column; justify-content: space-between; gap: 14px;
}
/* a capa é estreita: o rótulo fica numa linha só */
.pa-capa .pa-mini-rot { font-size: 9px; letter-spacing: .12em; white-space: nowrap; }
.pa-capa-fio { display: block; width: 30px; height: 1px; background: var(--pa-filete); margin-bottom: 10px; }
.pa-capa-t { font: 400 14px/1.16 var(--pa-serif); color: var(--pa-tinta); overflow-wrap: break-word; hyphens: manual; }
.pa-capa-a { margin-top: 10px; font: 400 10.5px/1.4 var(--pa-sans); color: var(--pa-tinta-3); }
.pa-autor { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pa-autor-nome { font: 300 36px/1 var(--pa-serif); letter-spacing: -.03em; color: var(--pa-tinta); }
.pa-autor-p { margin: 0; font: 400 14.5px/1.5 var(--pa-serif); color: var(--pa-tinta-2); }
.pa-campos { display: flex; flex-direction: column; border-bottom: 1px solid var(--pa-filete-2); }
.pa-campos > div {
  padding: 7px 0; border-top: 1px solid var(--pa-filete-2);
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
}
.pa-campos span:last-child { font: 400 14.5px/1.3 var(--pa-serif); color: var(--pa-tinta); text-align: right; }
.pa-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pa-indice {
  padding-top: 12px; border-top: 1px solid var(--pa-filete);
  display: flex; flex-wrap: wrap; gap: 8px 16px;
  font: 700 10px/1 var(--pa-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--pa-tinta-3);
}

/* ── telas baixas: o painel tem a altura da janela ── */
@media (max-height: 860px) {
  .pa-ceu { padding-top: 28px; }
  .pa-cab { margin-bottom: 16px; gap: 10px; }
  .pa-tela .su-card { padding: 13px 15px; }
  .pa-tela .su-card-sub { display: none; }
  .pa-tela .su-card-spark { height: 30px; margin-top: 8px; }
  .pa-chao { padding-bottom: 24px; }
  .pa-ficha { margin-top: 12px; padding-top: 12px; }
  .pa-indice { display: none; }
  .pa-autor-nome { font-size: 31px; }
  /* a capa encolhe INTEIRA: caixa, margem e letra. Só a caixa, e o
     título transbordava sobre a legenda. */
  .pa-capa { width: 104px; height: 156px; padding: 11px 10px; gap: 10px; }
  .pa-capa-t { font-size: 12.5px; }
  .pa-capa-a { margin-top: 8px; font-size: 10px; }
  .pa-capa-fio { margin-bottom: 8px; }
  .pa-edit-corpo { grid-template-columns: 104px minmax(0, 1fr); gap: 16px; }
  .pa-edit { gap: 12px; }
}
@media (max-height: 740px) {
  html[data-origem="finance"] .pa-traco { display: none; }
  .pa-linha .pa-con-s { display: none; }
  .pa-autor-p { display: none; }
  .pa-chao { padding-top: 6px; padding-bottom: 20px; }
  .pa-ficha { margin-top: 10px; padding-top: 10px; }
  .pa-placa { width: 52px; height: 68px; font-size: 17px; }
  .pa-ficha-in { grid-template-columns: 52px minmax(0, 1fr) minmax(0, 1fr); }
  .pa-ficha-nome { font-size: 22px; }
  .pa-con-t { font-size: 22px; }
}
@media (max-height: 680px) {
  .pa-ceu { padding-top: 18px; }
  .pa-edit .pa-chips { display: none; }
  html:not([data-origem]) .pa-traco-p, html[data-origem="home"] .pa-traco-p { display: none; }
  html:not([data-origem]) .pa-traco, html[data-origem="home"] .pa-traco { padding: 9px 14px; margin-top: 10px; }
  .pa-cab { margin-bottom: 12px; }
}
/* painel estreito: duas colunas de vidro ainda cabem; a ficha empilha */
@media (max-width: 1180px) {
  .pa-ceu, .pa-chao { padding-left: 32px; padding-right: 32px; }
  html[data-origem="conhecimento"] .pa-ceu { padding-left: 32px; padding-right: 32px; }
  /* a obra sai: o autor e o conceito bastam para a ficha ser uma ficha */
  .pa-ficha-in { grid-template-columns: 62px minmax(0, 1fr); }
  .pa-ficha-obra { display: none; }
  .pa-tela .su-card-val { font-size: 1.12rem; }
  .pa-tela .su-card-name { font-size: .7rem; }
  .pa-traco-p { display: none; }
}
@media (max-width: 1180px) and (max-height: 740px) {
  .pa-ficha-in { grid-template-columns: 52px minmax(0, 1fr); }
}

/* ═══ CELULAR: a faixa ════════════════════════════════════════════
   Abaixo de 980px o painel sai, como antes. No lugar dele entra uma
   faixa entre a chamada e o formulário: a mesma paisagem, pequena. */
.pa-faixa { display: none; }
@media (max-width: 980px) {
  .pa-tela .su-right { display: none; }
  .pa-tela .su-left { min-height: 0; justify-content: flex-start; }
  .pa-tela .su-title, .pa-tela .lg-title { font-size: clamp(32px, 9vw, 40px); }
  .pa-tela .su-sub, .pa-tela .lg-sub { font-size: 15.5px; margin-bottom: 18px; }

  .pa-faixa {
    --pa-h0: 46%; --pa-h1: 64%; --pa-d: calc(var(--pa-h1) - var(--pa-h0));
    position: relative; display: block; height: 148px; margin: 0 0 20px;
    border-radius: 12px; border: 1px solid rgba(255,255,255,.08); overflow: hidden;
    background: linear-gradient(180deg,
      #0C1A2C 0%,
      #0C1A2C var(--pa-h0),
      #15324A calc(var(--pa-h0) + var(--pa-d) * .20),
      #3A5C72 calc(var(--pa-h0) + var(--pa-d) * .38),
      #78868D calc(var(--pa-h0) + var(--pa-d) * .52),
      #A59B8D calc(var(--pa-h0) + var(--pa-d) * .64),
      #D0C7B9 calc(var(--pa-h0) + var(--pa-d) * .78),
      #EBE5DB calc(var(--pa-h0) + var(--pa-d) * .90),
      #F6F3EE var(--pa-h1),
      #F6F3EE 100%);
  }
  html[data-origem="finance"] .pa-faixa,
  html[data-origem="produtos"] .pa-faixa { --pa-h0: 58%; --pa-h1: 74%; }
  html[data-origem="conhecimento"] .pa-faixa { --pa-h0: 30%; --pa-h1: 48%; }

  .pa-faixa-ceu {
    position: absolute; left: 14px; right: 14px; top: 0; height: var(--pa-h0);
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center;
  }
  .pa-faixa-rot { font: 700 9.5px/1 var(--pa-sans); letter-spacing: .14em; text-transform: uppercase; color: #00D9FF; }
  .pa-faixa-graf { display: block; width: 100%; height: 30px; }
  .pa-faixa-prod {
    display: inline-flex; align-items: center; gap: 6px;
    font: 600 8.5px/1.2 var(--pa-mono); letter-spacing: .08em; text-transform: uppercase; color: #D9A05B;
  }
  .pa-faixa-prod::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: currentColor; flex: none; }
  .pa-faixa-chao {
    position: absolute; left: 14px; right: 14px; top: var(--pa-h1); bottom: 0;
    display: flex; flex-direction: column; justify-content: center; gap: 4px;
  }
  .pa-faixa-chao .pa-con-rot { font-size: 9.5px; letter-spacing: .14em; }
  .pa-faixa-chao .pa-con-t { font-size: 16px; line-height: 1.12; }
  html[data-origem="conhecimento"] .pa-faixa-graf { height: 20px; }
}
@media (max-width: 360px) {
  .pa-faixa-ceu { left: 12px; right: 12px; gap: 10px; }
  .pa-faixa-chao { left: 12px; right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .pa-tela *, .pa-tela *::before, .pa-tela *::after { transition-duration: 1ms !important; }
}