/* ═══════════════════════════════════════════════════════════════════════════
 * arke-panteon.css — o CONSELHO. Só o que a /site/panteon inventa.
 *
 * COR: o Panteon não é um produto do ecossistema — é a inteligência da própria
 * archēLAB olhando a empresa do cliente. Por isso ele fica no DOURADO da marca
 * (nada de tema próprio como ME/ON/FLOW). O que muda por agente é um único
 * token local, `--pa`, com a cor do DOMÍNIO dele — e essas cores vêm da paleta
 * que o admin já usa (lib/admin-paginas-meta.ts · lib/cores-arke.ts), não de
 * escolha estética avulsa.
 *
 * ATMOSFERA: conselho, biblioteca, museu. Retrato grande, tipografia editorial,
 * muito respiro. NADA de card de videogame, seleção de personagem ou avatar.
 *
 * Reaproveita em cheio: .flw-teia/.flw-no (grafo com propagação, de arke-flow),
 * .arq-lentes (abas), .faz-metodo (atos), .arq-chain, .ark-card.
 * ═══════════════════════════════════════════════════════════════════════════ */

.tema-pan {
  --pan-fundo:      #08070A;
  --pan-superficie: #100E13;
  --pan-tinta:      #F2EFE9;
  --pan-tinta-2:    #98928B;
  --pa:             var(--accent, #C4973A);   /* cor do domínio do agente */
  --pa-rgb:         196, 151, 58;
}
.tema-pan .ark-sec--surface { background: var(--pan-superficie); }
.tema-pan .ark-sec--deep, .tema-pan .ark-final { background: var(--pan-fundo); }

/* Cores de DOMÍNIO — derivadas do que o admin já usa por área. */
.pa-meta        { --pa: #C4973A; --pa-rgb: 196, 151, 58; }   /* governança · ouro da marca */
.pa-institucional{ --pa: #D9B36A; --pa-rgb: 217, 179, 106; } /* institucional */
.pa-estrategia  { --pa: #A855C7; --pa-rgb: 168, 85, 199; }   /* biz-setup/estratégia */
.pa-comercial   { --pa: #0EA5E9; --pa-rgb: 14, 165, 233; }   /* comercial · CRM */
.pa-marketing   { --pa: #7C3AED; --pa-rgb: 124, 58, 237; }   /* marketing · conteúdo */
.pa-financeiro  { --pa: #22C55E; --pa-rgb: 34, 197, 94; }    /* financeiro */
.pa-juridico    { --pa: #6366F1; --pa-rgb: 99, 102, 241; }   /* jurídico · risco */
.pa-operacao    { --pa: #06B6D4; --pa-rgb: 6, 182, 212; }    /* operação · fluxo */

/* ═══ §1 · HERO — o conselho reunido ═════════════════════════════════════
   ⚠️ A imagem única do Panteon reunido NÃO existe no repo. Em vez de inventar
   uma, o conselho é COMPOSTO a partir dos 8 retratos institucionais reais,
   dispostos em arco em volta do símbolo archē. Nada de stock, nada de montagem
   fingindo ser foto de grupo.
   ═══════════════════════════════════════════════════════════════════════ */
.pan-hero {
  position: relative; overflow: hidden; background: var(--pan-fundo);
  padding-block: clamp(118px, 14vh, 176px) clamp(56px, 7vh, 92px);
}
.pan-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(52% 46% at 50% 8%, rgba(var(--accent-rgb),.14), transparent 68%),
    radial-gradient(60% 50% at 50% 104%, rgba(var(--accent-rgb),.09), transparent 70%);
}
.pan-hero > .container { position: relative; z-index: 2; }
.pan-hero__t { margin: 0; font-size: clamp(31px, 5vw, 72px); font-weight: 800; line-height: .98; letter-spacing: -.035em; color: var(--pan-tinta); }
.pan-hero__t em {
  display: block; margin-top: .1em; font-style: italic; font-weight: 400;
  font-family: 'Playfair Display', Georgia, serif; color: var(--accent); font-size: .9em; line-height: 1.02;
}

/* o arco de retratos */
.pan-conselho { position: relative; margin-top: clamp(44px, 5vw, 76px); aspect-ratio: 16 / 6.2; }
.pan-conselho__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pan-conselho__l { stroke: rgba(var(--accent-rgb),.16); stroke-width: 1; fill: none; }
.pan-membro {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
  width: var(--s, 110px); display: grid; justify-items: center; gap: 9px;
  background: none; border: 0; padding: 0; cursor: pointer; z-index: 2;
}
.pan-membro__foto {
  position: relative; width: var(--s, 110px); height: var(--s, 110px); border-radius: 50%;
  overflow: hidden; filter: grayscale(1) contrast(1.06) brightness(.82);
  border: 1px solid rgba(242,239,233,.14);
  transition: filter .55s ease, border-color .55s ease, transform .55s cubic-bezier(.16,1,.3,1);
}
.pan-membro__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pan-membro:hover .pan-membro__foto,
.pan-membro:focus-visible .pan-membro__foto,
.pan-membro.is-on .pan-membro__foto {
  filter: grayscale(0) contrast(1) brightness(1);
  border-color: rgba(var(--pa-rgb),.7); transform: translateY(-3px);
}
.pan-membro__n {
  font-family: var(--font-mono, monospace); font-size: 9px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--pan-tinta-2); white-space: nowrap;
  transition: color .45s ease;
}
.pan-membro:hover .pan-membro__n, .pan-membro.is-on .pan-membro__n { color: var(--pa); }
.pan-conselho__centro {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 1; display: grid; justify-items: center; gap: 10px; text-align: center;
}
.pan-conselho__centro .ark-mark { width: clamp(52px, 5vw, 76px); height: auto; color: var(--accent); }
.pan-conselho__k {
  font-family: var(--font-mono, monospace); font-size: 9px; letter-spacing: .2em;
  text-transform: uppercase; color: #5F5A54;
}

/* ═══ §4 e §29 · O GRAFO DA EMPRESA visto por uma lente ══════════════════
   O grafo é SEMPRE o mesmo. O que muda quando o visitante troca de agente é
   o que fica aceso — é a tese da página ("um mesmo problema muda dependendo
   de quem o observa") virando mecânica, e não um segundo grafo por agente. */
.pan-grafo { position: relative; width: 100%; aspect-ratio: 16 / 6.6; min-height: 320px; }
.pan-grafo__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pan-grafo__l { stroke: rgba(242,239,233,.07); stroke-width: 1; fill: none; transition: stroke .5s ease; }
.pan-grafo__l.is-viva { stroke: rgba(var(--pa-rgb),.5); }
.pan-grafo .flw-no {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
  z-index: 2; white-space: nowrap;
}
/* dentro do Panteon o "observed" usa a cor do DOMÍNIO do agente, não o accent */
.pan-grafo .flw-no[data-estado="observed"] { border-color: rgba(var(--pa-rgb),.5); color: var(--pan-tinta); }
.pan-grafo .flw-no[data-estado="observed"] .flw-no__p { background: var(--pa); box-shadow: 0 0 0 3px rgba(var(--pa-rgb),.16); }
.pan-grafo__nucleo {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1;
  display: grid; justify-items: center; gap: 7px; text-align: center;
}
.pan-grafo__nucleo b { font-size: clamp(15px, 1.5vw, 20px); font-weight: 700; letter-spacing: -.01em; color: var(--pan-tinta); }
.pan-grafo__nucleo span { font-family: var(--font-mono, monospace); font-size: 8.5px; letter-spacing: .17em; text-transform: uppercase; color: #5F5A54; }

/* §19 · o grafo NASCENDO — cada nó entra quando a resposta que o originou
   chega. Sem resposta, sem nó: é a regra da página inteira. */
.pan-nasce .flw-no { opacity: 0; transform: translate(-50%, -50%) scale(.86); }
.pan-nasce .flw-no.is-in { opacity: 1; transform: translate(-50%, -50%) scale(1); transition: opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1); }
.pan-nasce .pan-grafo__l { opacity: 0; transition: opacity .55s ease; }
.pan-nasce .pan-grafo__l.is-in { opacity: 1; stroke: rgba(var(--accent-rgb),.3); }
@media (prefers-reduced-motion: reduce) {
  .pan-nasce .flw-no { opacity: 1; transform: translate(-50%, -50%); }
  .pan-nasce .pan-grafo__l { opacity: 1; }
}

/* No celular o grafo não cabe — e forçá-lo vira sopa de retângulo. Vira LISTA:
   o conceito ("cada agente olha um recorte diferente") sobrevive inteiro. */
.pan-grafo-mob { display: none; }
.pan-grafo-mob__cab {
  font-family: var(--font-mono, monospace); font-size: 9.5px; letter-spacing: .15em;
  text-transform: uppercase; color: #5F5A54; margin-bottom: 12px;
}
.pan-grafo-mob__chips { display: flex; flex-wrap: wrap; gap: 7px; }
.pan-grafo-mob__chips span {
  padding: 8px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 500;
  color: var(--pa); background: rgba(var(--pa-rgb),.09); border: 1px solid rgba(var(--pa-rgb),.32);
}
.pan-grafo-mob__resto { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.pan-grafo-mob__resto span {
  padding: 6px 12px; border-radius: 999px; font-size: 11.5px; color: #6B6560;
  border: 1px dashed rgba(242,239,233,.13);
}
@media (max-width: 991px) {
  .pan-grafo { display: none; }
  .pan-grafo-mob { display: block; }
}

/* a barra de agentes que controla a lente */
.pan-lentes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(26px, 3vw, 40px); }
.pan-lente {
  display: flex; align-items: center; gap: 9px; padding: 7px 15px 7px 7px; border-radius: 999px;
  background: rgba(242,239,233,.03); border: 1px solid rgba(242,239,233,.11); cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: var(--pan-tinta-2);
  transition: border-color .35s ease, color .35s ease, background .35s ease;
}
.pan-lente__av { width: 26px; height: 26px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; filter: grayscale(1) brightness(.85); transition: filter .4s ease; }
.pan-lente__av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pan-lente:hover { color: var(--pan-tinta); border-color: rgba(242,239,233,.3); }
.pan-lente.is-on { color: var(--pa); border-color: rgba(var(--pa-rgb),.55); background: rgba(var(--pa-rgb),.08); }
.pan-lente.is-on .pan-lente__av, .pan-lente:hover .pan-lente__av { filter: grayscale(0) brightness(1); }

/* §2 · a anatomia do agente — 7 colunas. NUNCA declarar isso inline: estilo
   inline ganha de media query e a grade trava em 7 colunas no celular. */
.pan-anatomia { grid-template-columns: repeat(7, 1fr); }
.pan-anatomia > div { min-width: 0; }
@media (max-width: 1399px) { .pan-anatomia { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 991px)  { .pan-anatomia { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px)  { .pan-anatomia { grid-template-columns: 1fr; } }

/* ═══ §3 · A ARQUITETURA DO AGENTE — a ficha real ════════════════════════ */
.pan-ficha {
  display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  border: 1px solid rgba(242,239,233,.1); background: #0C0A0F; overflow: hidden;
}
.pan-ficha__retrato { position: relative; min-height: 340px; }
.pan-ficha__retrato img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pan-ficha__retrato::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(12,10,15,.94), rgba(12,10,15,.12) 52%),
              linear-gradient(to right, transparent 70%, rgba(12,10,15,.85));
}
.pan-ficha__id { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 24px; z-index: 2; }
.pan-ficha__nome { margin: 0; font-size: clamp(22px, 2.2vw, 30px); font-weight: 700; letter-spacing: -.02em; color: var(--pan-tinta); }
.pan-ficha__papel {
  display: block; margin-top: 5px; font-family: var(--font-mono, monospace);
  font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--pa);
}
.pan-ficha__corpo { padding: clamp(24px, 2.8vw, 38px); display: grid; gap: clamp(20px, 2.2vw, 30px); }
.pan-ficha__frase {
  margin: 0; font-family: 'Playfair Display', Georgia, serif; font-style: italic;
  font-size: clamp(19px, 1.9vw, 26px); line-height: 1.25; color: var(--pan-tinta);
}
.pan-ficha__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2vw, 30px); }
.pan-bloco > b {
  display: block; font-family: var(--font-mono, monospace); font-size: 9px;
  letter-spacing: .17em; text-transform: uppercase; color: #5F5A54; margin-bottom: 11px;
}
.pan-bloco ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pan-bloco li { position: relative; padding-left: 15px; font-size: 13px; line-height: 1.55; color: var(--pan-tinta-2); }
.pan-bloco li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 1px; background: rgba(var(--pa-rgb),.7); }
.pan-bloco--perg li { color: var(--pan-tinta); font-style: italic; font-family: 'Playfair Display', Georgia, serif; font-size: 14.5px; }
.pan-bloco--perg li::before { top: 10px; }
.pan-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.pan-tags span {
  padding: 5px 11px; border-radius: 4px; font-family: var(--font-mono, monospace);
  font-size: 10px; letter-spacing: .07em; color: var(--pan-tinta-2);
  background: rgba(242,239,233,.035); border: 1px solid rgba(242,239,233,.09);
}
.pan-tags--pa span { color: var(--pa); background: rgba(var(--pa-rgb),.09); border-color: rgba(var(--pa-rgb),.26); }

/* ═══ §6 · OS INTEGRANTES — apresentação editorial, não grade de cards ══ */
.pan-fila { display: grid; gap: 1px; margin-top: clamp(40px, 4.6vw, 68px); background: rgba(242,239,233,.08); border-block: 1px solid rgba(242,239,233,.08); }
.pan-linha {
  display: grid; grid-template-columns: 132px minmax(0, 220px) minmax(0, 1fr) minmax(0, 300px);
  gap: clamp(18px, 2.2vw, 34px); align-items: center;
  background: var(--pan-fundo); padding: clamp(18px, 2vw, 26px) clamp(14px, 1.6vw, 22px);
  transition: background .45s ease;
}
.pan-linha:hover { background: #100D14; }
.pan-linha__foto {
  width: 108px; height: 132px; overflow: hidden; border-radius: 3px;
  filter: grayscale(1) brightness(.86); transition: filter .5s ease;
}
.pan-linha:hover .pan-linha__foto { filter: grayscale(0) brightness(1); }
.pan-linha__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pan-linha__nome { margin: 0; font-size: clamp(19px, 1.9vw, 26px); font-weight: 700; letter-spacing: -.02em; color: var(--pan-tinta); }
.pan-linha__papel {
  display: block; margin-top: 6px; font-family: var(--font-mono, monospace);
  font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--pa);
}
.pan-linha__perg {
  margin: 0; font-family: 'Playfair Display', Georgia, serif; font-style: italic;
  font-size: clamp(15px, 1.5vw, 20px); line-height: 1.35; color: var(--pan-tinta);
}
.pan-linha__fn { display: grid; gap: 5px; }
.pan-linha__fn span { font-size: 12.5px; line-height: 1.5; color: var(--pan-tinta-2); }

/* ═══ §7 · DEPARTAMENTOS — ilustrações reais do sistema ═════════════════ */
.pan-deptos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: clamp(38px, 4.4vw, 62px); }
.pan-depto {
  position: relative; overflow: hidden; border-radius: 5px; min-height: 154px;
  border: 1px solid rgba(242,239,233,.1); display: flex; align-items: flex-end;
  transition: border-color .45s ease, transform .45s cubic-bezier(.16,1,.3,1);
}
.pan-depto:hover { border-color: rgba(var(--pa-rgb),.5); transform: translateY(-2px); }
.pan-depto__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .3; transition: opacity .5s ease; }
.pan-depto:hover .pan-depto__bg { opacity: .48; }
.pan-depto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,7,10,.96), rgba(8,7,10,.5) 55%, rgba(8,7,10,.25));
}
.pan-depto__txt { position: relative; z-index: 2; padding: 14px 15px; }
.pan-depto__txt b { display: block; font-size: 13.5px; font-weight: 650; color: var(--pan-tinta); }
.pan-depto__txt span {
  display: block; margin-top: 4px; font-family: var(--font-mono, monospace);
  font-size: 9px; letter-spacing: .13em; text-transform: uppercase; color: var(--pa);
}
.pan-aviso {
  margin-top: clamp(22px, 2.6vw, 34px); padding: 18px 22px;
  border-left: 2px solid rgba(var(--accent-rgb),.55); background: rgba(242,239,233,.022);
  font-size: 13.5px; line-height: 1.65; color: var(--pan-tinta-2);
}
.pan-aviso strong { color: var(--pan-tinta); font-weight: 600; }

/* três empresas, três estruturas (§21) */
.pan-tres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: clamp(36px, 4.2vw, 58px); background: rgba(242,239,233,.08); border: 1px solid rgba(242,239,233,.08); }
.pan-tres > div { background: #0C0A0F; padding: clamp(22px, 2.4vw, 32px); }
.pan-tres b { display: block; font-size: 14px; font-weight: 650; color: var(--pan-tinta); }
.pan-tres em {
  display: block; margin: 5px 0 16px; font-style: normal;
  font-family: var(--font-mono, monospace); font-size: 9px; letter-spacing: .15em;
  text-transform: uppercase; color: #5F5A54;
}
.pan-tres ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.pan-tres li { font-size: 13px; color: var(--pan-tinta-2); padding-bottom: 7px; border-bottom: 1px dashed rgba(242,239,233,.07); }
.pan-tres li:last-child { border-bottom: 0; padding-bottom: 0; }

/* ═══ §18 · RESPOSTA → ENTIDADES ═══════════════════════════════════════ */
.pan-vira { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.15fr); gap: clamp(18px, 2.4vw, 36px); align-items: center; margin-top: clamp(38px, 4.4vw, 60px); }
.pan-fala {
  padding: clamp(22px, 2.4vw, 32px); border-radius: 6px;
  background: rgba(242,239,233,.03); border: 1px solid rgba(242,239,233,.1);
}
.pan-fala__quem {
  display: block; font-family: var(--font-mono, monospace); font-size: 9px;
  letter-spacing: .16em; text-transform: uppercase; color: #5F5A54; margin-bottom: 12px;
}
.pan-fala p {
  margin: 0; font-family: 'Playfair Display', Georgia, serif; font-style: italic;
  font-size: clamp(17px, 1.8vw, 23px); line-height: 1.35; color: var(--pan-tinta);
}
.pan-seta { color: rgba(242,239,233,.22); flex: 0 0 auto; }
.pan-saida { display: grid; gap: 8px; }
.pan-item {
  display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; align-items: baseline;
  padding: 12px 16px; border-radius: 5px;
  background: #0C0A0F; border: 1px solid rgba(242,239,233,.1);
  opacity: 0; transform: translateY(9px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.16,1,.3,1), border-color .5s ease;
}
.pan-item.is-in { opacity: 1; transform: none; }
.pan-item b {
  font-family: var(--font-mono, monospace); font-size: 9px; letter-spacing: .15em;
  text-transform: uppercase; color: var(--pa);
}
.pan-item span { font-size: 13px; line-height: 1.5; color: var(--pan-tinta); }
.pan-item i { display: block; font-style: normal; font-size: 12px; color: var(--pan-tinta-2); margin-top: 3px; }

/* ═══ §22 · VALIDAÇÃO HUMANA — os quatro graus de certeza ═══════════════ */
.pan-graus { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: clamp(34px, 4vw, 54px); }
.pan-grau { padding: 18px 19px; border-radius: 5px; background: #0C0A0F; border: 1px solid rgba(242,239,233,.1); border-top: 2px solid var(--g, #5F5A54); }
.pan-grau b { display: block; font-family: var(--font-mono, monospace); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--g, #98928B); margin-bottom: 8px; }
.pan-grau span { font-size: 12.5px; line-height: 1.6; color: var(--pan-tinta-2); }
.pan-grau--conf   { --g: #4A7C59; }
.pan-grau--infer  { --g: #C4973A; }
.pan-grau--sug    { --g: #5B7B8A; }
.pan-grau--nao    { --g: #6B6560; }

.pan-escolha { margin-top: clamp(28px, 3.2vw, 42px); padding: clamp(24px, 2.8vw, 36px); border: 1px dashed rgba(var(--accent-rgb),.34); background: rgba(var(--accent-rgb),.03); }
.pan-escolha__p { margin: 0 0 20px; font-size: clamp(15px, 1.5vw, 19px); line-height: 1.5; color: var(--pan-tinta); }
.pan-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pan-opt {
  text-align: left; padding: 15px 17px; border-radius: 5px; cursor: pointer;
  background: rgba(242,239,233,.03); border: 1px solid rgba(242,239,233,.12);
  transition: border-color .35s ease, background .35s ease;
}
.pan-opt:hover, .pan-opt.is-on { border-color: rgba(var(--accent-rgb),.6); background: rgba(var(--accent-rgb),.07); }
.pan-opt b { display: block; font-size: 13px; font-weight: 650; color: var(--pan-tinta); margin-bottom: 5px; }
.pan-opt span { font-size: 12px; line-height: 1.5; color: var(--pan-tinta-2); }
.pan-eco { margin-top: 18px; font-size: 13px; line-height: 1.6; color: var(--accent-text, #D4A94A); min-height: 1.6em; }

/* ═══ §23 · O PRIMEIRO DIAGNÓSTICO — sem número inventado ═══════════════
   Os campos ficam DELIBERADAMENTE vazios: o briefing manda não colocar número
   fake, e a funcionalidade ainda não existe. O vazio aqui é a informação. */
.pan-diag { margin-top: clamp(34px, 4vw, 54px); border: 1px solid rgba(242,239,233,.1); background: #0C0A0F; }
.pan-diag__cab { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 15px 22px; border-bottom: 1px solid rgba(242,239,233,.1); }
.pan-diag__cab b { font-size: 13.5px; font-weight: 650; color: var(--pan-tinta); }
.pan-diag__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(242,239,233,.07); }
.pan-diag__c { background: #0C0A0F; padding: clamp(17px, 1.9vw, 24px); }
.pan-diag__n {
  display: block; font-size: clamp(24px, 2.6vw, 36px); font-weight: 300; line-height: 1;
  color: #3A3630; font-family: 'Playfair Display', Georgia, serif;
}
.pan-diag__c b { display: block; margin-top: 9px; font-size: 12.5px; font-weight: 600; color: var(--pan-tinta); }
.pan-diag__c span { display: block; margin-top: 4px; font-family: var(--font-mono, monospace); font-size: 8.5px; letter-spacing: .13em; text-transform: uppercase; color: #5F5A54; }

/* ═══ §24-26 · PARECERES E CONTRADIÇÃO ═════════════════════════════════ */
.pan-pareceres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: clamp(36px, 4.2vw, 58px); }
.pan-parecer {
  padding: clamp(20px, 2.2vw, 28px); border-radius: 5px; background: #0C0A0F;
  border: 1px solid rgba(242,239,233,.1); border-left: 2px solid var(--pa);
}
.pan-parecer__quem { display: flex; align-items: center; gap: 11px; margin-bottom: 15px; }
.pan-parecer__av { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; filter: grayscale(1) brightness(.9); }
.pan-parecer__av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pan-parecer__quem b { display: block; font-size: 13.5px; font-weight: 650; color: var(--pan-tinta); }
.pan-parecer__quem em { display: block; font-style: normal; font-family: var(--font-mono, monospace); font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--pa); margin-top: 2px; }
.pan-parecer p { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--pan-tinta-2); }
.pan-parecer p strong { color: var(--pan-tinta); font-weight: 600; }

.pan-tensao { display: grid; gap: 10px; margin-top: clamp(34px, 4vw, 54px); }
.pan-voz {
  display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 20px; align-items: baseline;
  padding: 16px 20px; border-radius: 5px; background: rgba(242,239,233,.022);
  border: 1px solid rgba(242,239,233,.09); border-left: 2px solid var(--pa);
}
.pan-voz b { font-family: var(--font-mono, monospace); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--pa); }
.pan-voz p { margin: 0; font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-size: clamp(15px, 1.5vw, 19px); line-height: 1.4; color: var(--pan-tinta); }
.pan-sintese {
  margin-top: 16px; padding: clamp(24px, 2.8vw, 36px); border-radius: 6px;
  background: rgba(var(--accent-rgb),.06); border: 1px solid rgba(var(--accent-rgb),.32);
}
.pan-sintese b { display: block; font-family: var(--font-mono, monospace); font-size: 9.5px; letter-spacing: .17em; text-transform: uppercase; color: var(--accent); margin-bottom: 13px; }
.pan-sintese p { margin: 0; font-size: clamp(16px, 1.7vw, 22px); line-height: 1.45; color: var(--pan-tinta); }

/* ═══ §28 · O ONBOARDING NÃO TERMINA ═══════════════════════════════════ */
.pan-volta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: clamp(36px, 4.2vw, 58px); }
.pan-volta > div { padding: 19px 20px; border-radius: 5px; background: #0C0A0F; border: 1px solid rgba(242,239,233,.1); }
.pan-volta b { display: block; font-family: var(--font-mono, monospace); font-size: 9.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--accent); margin-bottom: 9px; }
.pan-volta p { margin: 0; font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-size: clamp(15px, 1.5vw, 19px); line-height: 1.35; color: var(--pan-tinta); }

/* ═══ §37 · O QUE NÃO É ═══════════════════════════════════════════════ */
.pan-naoe { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: clamp(34px, 4vw, 52px); }
.pan-naoe > div {
  padding: 20px 21px; border-radius: 5px; border: 1px dashed rgba(139,58,58,.4);
  background: rgba(139,58,58,.04); font-size: 13.5px; line-height: 1.5; color: #C9AFAF;
}

/* utilitários — pra não sobrar cor crua no markup (§0 regra 6) */
.pan-errado { border-color: rgba(139,58,58,.4) !important; }
.pan-errado .ark-card__s { color: #C9AFAF; }
.pan-k {
  font-family: var(--font-mono, monospace); font-size: 9.5px; letter-spacing: .15em;
  text-transform: uppercase; color: #5F5A54;
}

/* ═══ §38 · MANIFESTO ═════════════════════════════════════════════════ */
.pan-manifesto { background: #F2EFE9; color: #14110C; padding-block: clamp(92px, 12vw, 168px); text-align: center; }
.pan-manifesto__t {
  margin: 0 auto; max-width: 17ch;
  font-size: clamp(31px, 5.4vw, 82px); font-weight: 800; line-height: .96; letter-spacing: -.04em; color: #14110C;
}
.pan-manifesto__t em { font-style: italic; font-weight: 400; font-family: 'Playfair Display', Georgia, serif; color: #8B6914; }
.pan-toca { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin: clamp(40px, 4.8vw, 70px) auto 0; max-width: 900px; }
.pan-toca span {
  padding: 9px 17px; border-radius: 999px; font-size: 13px; font-weight: 500; color: #46403A;
  background: rgba(20,17,12,.045); border: 1px solid rgba(20,17,12,.12);
}
.pan-toca i { font-style: normal; color: #8B6914; margin: 0 3px; }
.pan-manifesto__f { margin: clamp(40px, 4.8vw, 70px) auto 0; max-width: 20ch; font-size: clamp(20px, 2.4vw, 34px); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: #14110C; }
.pan-manifesto__ass { margin-top: clamp(38px, 4.4vw, 62px); display: grid; gap: 7px; justify-items: center; }
.pan-manifesto__ass b { font-size: clamp(16px, 1.7vw, 21px); font-weight: 700; color: #14110C; }
.pan-manifesto__ass span { font-family: var(--font-mono, monospace); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: #6B6560; }

/* ═══ RESPONSIVO ══════════════════════════════════════════════════════ */
@media (max-width: 1399px) {
  .pan-linha { grid-template-columns: 116px minmax(0, 190px) minmax(0, 1fr) minmax(0, 250px); }
}
@media (max-width: 1199px) {
  .pan-deptos { grid-template-columns: repeat(3, 1fr); }
  .pan-graus, .pan-naoe { grid-template-columns: repeat(2, 1fr); }
  .pan-diag__grid { grid-template-columns: repeat(3, 1fr); }
  .pan-linha { grid-template-columns: 108px minmax(0, 1fr); grid-template-areas: "foto nome" "perg perg" "fn fn"; row-gap: 16px; }
  .pan-linha__foto { grid-area: foto; }
  .pan-linha__id { grid-area: nome; }
  .pan-linha__perg { grid-area: perg; }
  .pan-linha__fn { grid-area: fn; }
}
@media (max-width: 991px) {
  .pan-conselho { display: none; }
  .pan-conselho-mob { display: flex !important; }
  .pan-ficha { grid-template-columns: 1fr; }
  .pan-ficha__retrato { min-height: 260px; }
  .pan-ficha__grid { grid-template-columns: 1fr; }
  .pan-vira { grid-template-columns: 1fr; }
  .pan-seta { transform: rotate(90deg); justify-self: center; }
  .pan-tres { grid-template-columns: 1fr; }
  .pan-pareceres { grid-template-columns: 1fr; }
  .pan-volta { grid-template-columns: 1fr; }
  .pan-voz { grid-template-columns: 1fr; gap: 7px; }
  .pan-opts { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .pan-deptos { grid-template-columns: repeat(2, 1fr); }
  .pan-graus, .pan-naoe { grid-template-columns: 1fr; }
  .pan-diag__grid { grid-template-columns: repeat(2, 1fr); }
  .pan-item { grid-template-columns: 1fr; gap: 5px; }
}

/* o conselho no mobile: fila rolável de retratos, sem grafo */
.pan-conselho-mob { display: none; gap: 12px; overflow-x: auto; padding: 4px 0 14px; margin-top: 34px; -webkit-overflow-scrolling: touch; }
.pan-conselho-mob .pan-membro { position: static; transform: none; flex: 0 0 auto; }

@media (prefers-reduced-motion: reduce) {
  .pan-membro__foto, .pan-item, .pan-depto, .pan-linha__foto { transition: none !important; }
  .pan-item { opacity: 1; transform: none; }
}