/* =========================================================================
   Central de Ajuda do Projetei
   Design system implementado a partir da entrega do Claude Design
   (docs/design-system/entrega-central-de-ajuda/README.md).
   Temperamento Oceano, e apenas ele. Celular primeiro.
   ========================================================================= */

/* ---------- Fontes ---------- */

@font-face {
  font-family: "Aeonik";
  src: url("../fonts/Aeonik-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aeonik";
  src: url("../fonts/Aeonik-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("../fonts/SpaceMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("../fonts/SpaceMono-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */

:root {
  --pjc-ocean-deep:  #08357F;
  --pjc-ocean-deep-hover: #062A66;
  --pjc-ocean-mid:   #1478D6;
  --pjc-ocean-light: #38C6E8;
  --pjc-ocean-grad:  linear-gradient(135deg, #08357F 0%, #1478D6 55%, #38C6E8 100%);
  --pjc-scrim:       linear-gradient(105deg, rgba(8,53,127,.55) 0%, transparent 62%);

  --pjc-navy:  #0A1A3F;
  --pjc-slate: #3A4874;
  --pjc-mist:  #EAEDF6;
  --pjc-cloud: #F5F7FD;
  --pjc-line:  #DEE3F2;
  --pjc-white: #FFFFFF;

  /* auxiliares do rodapé navy, já verificadas em contraste */
  --pjc-navy-label:  #7FB6E8;
  --pjc-navy-apoio:  #C7DCF3;
  --pjc-navy-borda:  #3A5490;

  /* neutro apagado de estado (ícone de carregamento, letra de amostra) */
  --pjc-dim: #9AA9CF;
  --pjc-hover-borda: #B9C6E6;

  --pjc-font-sans: "Aeonik", system-ui, sans-serif;
  --pjc-font-mono: "Space Mono", ui-monospace, monospace;

  --pjc-s-1: 4px;  --pjc-s-2: 8px;  --pjc-s-3: 12px; --pjc-s-4: 16px;
  --pjc-s-5: 24px; --pjc-s-6: 32px; --pjc-s-7: 48px; --pjc-s-8: 64px;
  --pjc-s-9: 96px;

  --pjc-radius-sm: 6px;
  --pjc-radius-md: 10px;
  --pjc-radius-lg: 14px;
  --pjc-radius-pill: 999px;

  --pjc-shadow-card:   0 1px 2px rgba(10,26,63,.05);
  --pjc-shadow-raised: 0 8px 24px -12px rgba(8,53,127,.35);

  --pjc-focus: 2px solid #1478D6;
  --pjc-focus-halo: 0 0 0 3px rgba(20,120,214,.28);

  --pjc-control-h: 52px;
  --pjc-tap-min: 44px;
  --pjc-measure: 66ch;
  --pjc-page-max: 1120px;

  --pjc-loop-star: 26s linear infinite;
  --pjc-loop-a:    7s ease-in-out infinite;
  --pjc-loop-b:    9.5s ease-in-out infinite;
}

/* ---------- Base ---------- */

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--pjc-cloud);
  color: var(--pjc-navy);
  font-family: var(--pjc-font-sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p { margin: 0; }

h1 {
  font-size: 32px;
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.6px;
  text-wrap: pretty;
}
h2 {
  font-size: 24px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.3px;
  text-wrap: pretty;
}
h3 {
  font-size: 22px;
  line-height: 1.3;
  font-weight: 700;
  text-wrap: pretty;
}

a { color: var(--pjc-ocean-deep); }
a:hover { color: var(--pjc-ocean-deep-hover); text-decoration-thickness: 2px; }

:focus-visible {
  outline: var(--pjc-focus);
  outline-offset: 2px;
}

img { max-width: 100%; }

/* Ícones MDI entregues por sprite SVG inline (decisão do checkpoint 1 de
   design): mesmos desenhos e nomes da família MDI, sem fonte de ícone. */
svg.mdi {
  width: 1em;
  height: 1em;
  fill: currentColor;
  flex: 0 0 auto;
  display: inline-block;
  vertical-align: -0.125em;
}

.pjc-label {
  font-family: var(--pjc-font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pjc-slate);
}

.pjc-apoio {
  font-size: 15px;
  line-height: 1.55;
  color: var(--pjc-slate);
}

.pjc-visivel-leitor {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Marcação editorial de rótulo ainda não conferido em tela. Sem caixa e sem
   superfície, para ninguém confundir com a marcação de módulo. Visível só
   enquanto o html carregar data-homologacao; a publicação apaga o atributo
   e nenhum marcador sobra por esquecimento. */
.pjc-conferir {
  font-family: var(--pjc-font-mono);
  font-size: 11px;
  color: var(--pjc-slate);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  white-space: nowrap;
}
html:not([data-homologacao]) .pjc-conferir { display: none; }

/* ---------- Layout de página ---------- */

.pjc-conteudo {
  width: 100%;
  max-width: var(--pjc-page-max);
  margin: 0 auto;
  padding: 0 20px;
}

main.pjc-conteudo { flex: 1 0 auto; }
main { flex: 1 0 auto; }

@media (min-width: 960px) {
  h1 { font-size: 44px; line-height: 1.08; letter-spacing: -0.8px; }
  h2 { font-size: 30px; line-height: 1.15; }
  .pjc-conteudo { padding: 0 40px; }
}

.pjc-secao { margin-top: 32px; }
.pjc-secao > h2 { margin-bottom: 14px; }

@media (max-width: 959.98px) {
  .pjc-so-desktop { display: none !important; }
}
@media (min-width: 960px) {
  .pjc-so-celular { display: none !important; }
}

/* ---------- Barra de topo ---------- */

.pjc-topo {
  position: sticky;
  top: 0;
  z-index: 40;
  height: 68px;
  background: var(--pjc-white);
  border-bottom: 1px solid var(--pjc-line);
}
.pjc-topo.pjc-topo--rolou { box-shadow: var(--pjc-shadow-raised); }

.pjc-topo-linha {
  max-width: var(--pjc-page-max);
  margin: 0 auto;
  height: 100%;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
@media (min-width: 960px) {
  .pjc-topo-linha { padding: 0 40px; justify-content: flex-start; gap: 40px; }
}

.pjc-topo-marca { display: flex; align-items: center; min-height: 44px; padding: 5px 0; }
.pjc-topo-marca img { height: 33px; width: auto; display: block; }

/* O campo e o botão de busca são inseridos pelo script depois que o índice
   carrega. Sem JavaScript, o contêiner fica vazio e a página segue correta. */
.pjc-topo-busca { display: flex; align-items: center; flex: 0 1 auto; }
@media (min-width: 960px) {
  .pjc-topo-busca { flex: 1 1 auto; max-width: 440px; }
}

.pjc-topo-busca-botao {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--pjc-radius-md);
  background: transparent;
  color: var(--pjc-ocean-deep);
  font-size: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.pjc-topo-busca-botao:hover { background: var(--pjc-mist); }

.pjc-topo-campo {
  width: 100%;
  height: 44px;
  border: 1px solid var(--pjc-line);
  border-radius: var(--pjc-radius-md);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  background: var(--pjc-white);
}
.pjc-topo-campo .mdi { font-size: 20px; color: var(--pjc-ocean-mid); }
.pjc-topo-campo input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--pjc-font-sans);
  font-size: 15px;
  color: var(--pjc-navy);
}
.pjc-topo-campo input::placeholder { color: var(--pjc-slate); opacity: 1; }
.pjc-topo-campo:focus-within {
  border-color: var(--pjc-ocean-mid);
  box-shadow: var(--pjc-focus-halo);
}

/* Painel de busca do celular, aberto pelo botão da barra */
.pjc-topo-painel {
  background: var(--pjc-white);
  border-bottom: 1px solid var(--pjc-line);
  box-shadow: var(--pjc-shadow-raised);
  padding: 12px 16px 16px;
}
.pjc-topo-painel[hidden] { display: none; }

/* ---------- Campo de busca (52 px, páginas de conteúdo) ---------- */

.pjc-busca-campo {
  height: var(--pjc-control-h);
  background: var(--pjc-white);
  border: 1px solid var(--pjc-line);
  border-radius: var(--pjc-radius-md);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
}
.pjc-busca-campo:hover { border-color: var(--pjc-hover-borda); }
.pjc-busca-campo:focus-within {
  border-color: var(--pjc-ocean-mid);
  box-shadow: var(--pjc-focus-halo);
}
.pjc-busca-campo .mdi { font-size: 22px; color: var(--pjc-ocean-mid); }
.pjc-busca-campo input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--pjc-font-sans);
  font-size: 17px;
  color: var(--pjc-navy);
}
.pjc-busca-campo input::placeholder { color: var(--pjc-slate); opacity: 1; }

.pjc-busca-campo--carregando { pointer-events: none; }
.pjc-busca-campo--carregando .mdi { color: var(--pjc-dim); }
.pjc-busca-campo--carregando input::placeholder { color: var(--pjc-slate); }

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.pjc-busca-limpar {
  border: 0;
  background: transparent;
  color: var(--pjc-slate);
  font-size: 22px;
  width: 44px;
  height: 44px;
  margin-right: -12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: var(--pjc-radius-md);
}
.pjc-busca-limpar[hidden] { display: none; }
.pjc-busca-campo .pjc-busca-limpar .mdi { color: var(--pjc-slate); }

/* Painel de sugestões sob o campo */
.pjc-sugestoes {
  background: var(--pjc-white);
  border: 1px solid var(--pjc-line);
  border-radius: var(--pjc-radius-md);
  margin-top: 8px;
  overflow: hidden;
  box-shadow: var(--pjc-shadow-raised);
}
.pjc-sugestoes[hidden] { display: none; }
.pjc-sugestoes-titulo {
  font-family: var(--pjc-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pjc-slate);
  padding: 16px 18px 10px;
}
.pjc-sugestao {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 56px;
  padding: 12px 18px;
  border-top: 1px solid var(--pjc-mist);
  text-decoration: none;
  color: inherit;
}
.pjc-sugestao:hover { background: var(--pjc-cloud); color: inherit; }
.pjc-sugestao strong { font-size: 17px; font-weight: 700; line-height: 1.35; }
.pjc-sugestao span { font-size: 15px; color: var(--pjc-slate); line-height: 1.45; }

/* ---------- Botões ---------- */

.pjc-botao {
  min-height: var(--pjc-control-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 26px;
  border: 0;
  border-radius: var(--pjc-radius-md);
  background: var(--pjc-ocean-deep);
  color: var(--pjc-white);
  font-family: var(--pjc-font-sans);
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.pjc-botao:hover { background: var(--pjc-ocean-deep-hover); color: var(--pjc-white); }
.pjc-botao .mdi { font-size: 20px; }

.pjc-botao--secundario {
  background: var(--pjc-white);
  border: 1px solid var(--pjc-ocean-deep);
  color: var(--pjc-ocean-deep);
}
.pjc-botao--secundario:hover { background: var(--pjc-mist); color: var(--pjc-ocean-deep); }

.pjc-botao--compacto {
  min-height: var(--pjc-tap-min);
  padding: 0 20px;
  font-size: 15px;
}

/* ---------- Marcação de módulo ---------- */

.pjc-modulo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--pjc-mist);
  color: var(--pjc-slate);
  border-radius: var(--pjc-radius-sm);
  padding: 4px 9px;
  font-family: var(--pjc-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pjc-modulo .mdi { font-size: 14px; }

/* ---------- Bloco "Onde fica" ---------- */

.pjc-onde-fica {
  background: var(--pjc-mist);
  border-radius: var(--pjc-radius-md);
  padding: 16px 18px;
}
.pjc-onde-fica-rotulo {
  font-family: var(--pjc-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pjc-slate);
  margin-bottom: 8px;
}
.pjc-onde-fica-caminho {
  font-size: 17px;
  line-height: 1.5;
  font-weight: 700;
  color: var(--pjc-navy);
  overflow-wrap: break-word;
}
.pjc-onde-fica-caminho .pjc-seta {
  color: var(--pjc-ocean-mid);
  font-weight: 400;
}

/* ---------- Linha de formato ---------- */

.pjc-formato {
  font-size: 15px;
  line-height: 1.55;
  color: var(--pjc-slate);
}

/* ---------- Passo numerado ---------- */

.pjc-passos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 26px;
  max-width: 70ch;
}
.pjc-passo {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.pjc-passo-num {
  flex: 0 0 32px;
  height: 32px;
  border-radius: var(--pjc-radius-pill);
  background: var(--pjc-ocean-deep);
  color: var(--pjc-white);
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pjc-passo-corpo { font-size: 17px; line-height: 1.65; min-width: 0; }
.pjc-passo-corpo > p + * { margin-top: 14px; }

@media (min-width: 960px) {
  .pjc-passos { gap: 30px; }
  .pjc-passo { gap: 20px; }
}

/* ---------- Captura de tela: carregando, ok, falhou ---------- */
/* Regra do checkpoint 1: figura sem arquivo não é renderizada nos artigos.
   O figure entra junto com o png. Os estados abaixo cobrem a captura real:
   enquanto carrega, o ícone aparece atrás dela; se falhar, o script troca a
   imagem pelo caminho escrito. */

.pjc-figura {
  margin: 0;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--pjc-mist);
  border: 1px solid var(--pjc-line);
  border-radius: var(--pjc-radius-md);
  overflow: hidden;
}
.pjc-figura img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pjc-figura-carrega {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  color: var(--pjc-dim);
}

/* falhou: o script troca a imagem pelo caminho escrito */
.pjc-figura--falhou img, .pjc-figura--falhou .pjc-figura-carrega { display: none; }
.pjc-figura-falha {
  position: absolute;
  inset: 0;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}
.pjc-figura-falha-rotulo {
  font-family: var(--pjc-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pjc-slate);
}
.pjc-figura-falha-caminho {
  font-size: 17px;
  line-height: 1.4;
  font-weight: 700;
  color: var(--pjc-navy);
}

.pjc-figura-legenda {
  font-size: 15px;
  line-height: 1.5;
  color: var(--pjc-slate);
  margin-top: 10px;
}

/* Na página do mapa da mudança, enquanto a captura não existe, o lugar dela
   é ocupado pelo par de caminhos escritos, que é conteúdo e não marcador. */
.pjc-caminhos-par {
  background: var(--pjc-mist);
  border: 1px solid var(--pjc-line);
  border-radius: var(--pjc-radius-md);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}
.pjc-caminhos-par > div { font-size: 17px; line-height: 1.4; font-weight: 700; color: var(--pjc-navy); }
.pjc-caminhos-par .pjc-antes-depois-rotulo { margin-bottom: 4px; }

/* ---------- Quadro de vídeo ---------- */

.pjc-video { max-width: 70ch; }

.pjc-video-quadro {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--pjc-radius-md);
  overflow: hidden;
  background: var(--pjc-ocean-deep);
}
.pjc-video-quadro video {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--pjc-navy);
}

/* cartaz, antes do play */
.pjc-video-cartaz {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 16px;
  cursor: pointer;
  display: flex;
  align-items: flex-end;
  text-align: left;
  background: var(--pjc-ocean-deep);
  font-family: var(--pjc-font-sans);
}
.pjc-video-cartaz::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--pjc-ocean-grad);
  opacity: 0.55;
}
.pjc-video-cartaz::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--pjc-scrim);
}
.pjc-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: var(--pjc-radius-pill);
  background: var(--pjc-white);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.pjc-video-play .mdi {
  font-size: 34px;
  color: var(--pjc-ocean-deep);
  margin-left: 4px;
}
.pjc-video-cartaz-info {
  position: relative;
  z-index: 1;
  color: var(--pjc-white);
}
.pjc-video-cartaz-titulo { font-size: 17px; font-weight: 700; line-height: 1.3; }
.pjc-video-cartaz-duracao {
  font-family: var(--pjc-font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  margin-top: 4px;
}

/* carregando */
.pjc-video-quadro--carregando {
  background: var(--pjc-mist);
  border: 1px solid var(--pjc-line);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pjc-video-quadro--carregando .mdi { font-size: 44px; color: var(--pjc-dim); }

/* indisponível */
.pjc-video-quadro--indisponivel {
  background: var(--pjc-mist);
  border: 1px solid var(--pjc-line);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}
.pjc-video-indisponivel-titulo { font-size: 17px; line-height: 1.45; font-weight: 700; color: var(--pjc-navy); }
.pjc-video-indisponivel-apoio { font-size: 15px; line-height: 1.55; color: var(--pjc-slate); }

.pjc-video-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.pjc-video-data { font-size: 15px; color: var(--pjc-slate); }

.pjc-ancora-passos {
  min-height: var(--pjc-tap-min);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  border: 1px solid var(--pjc-ocean-deep);
  border-radius: var(--pjc-radius-md);
  color: var(--pjc-ocean-deep);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}
.pjc-ancora-passos:hover { background: var(--pjc-mist); color: var(--pjc-ocean-deep); }
.pjc-ancora-passos .mdi { font-size: 18px; }

/* ---------- Bloco "O que o vídeo mostra" ---------- */

.pjc-video-mostra {
  border-left: 3px solid var(--pjc-ocean-mid);
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 70ch;
  list-style: none;
  margin: 0;
}
.pjc-video-mostra li { font-size: 17px; line-height: 1.55; }

/* ---------- Bloco "Se der errado" ---------- */

.pjc-se-der-errado {
  background: var(--pjc-cloud);
  border: 1px solid var(--pjc-line);
  border-radius: var(--pjc-radius-md);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 70ch;
}
.pjc-se-der-errado > div + div {
  border-top: 1px solid var(--pjc-line);
  padding-top: 16px;
}
.pjc-se-der-errado p { font-size: 17px; line-height: 1.55; }

/* Pré-requisito: sem componente na v1, por decisão do checkpoint 1 de design.
   Quando surgir, é uma linha de corpo iniciada por texto em 700, imediatamente
   acima do passo 1, dentro da coluna dos passos. Sem caixa, sem rótulo. */

/* ---------- Vizinhos "Na mesma trilha" ---------- */
/* Trilha com um único artigo não renderiza o bloco. Ausência por inteiro. */

.pjc-vizinhos {
  background: var(--pjc-white);
  border: 1px solid var(--pjc-line);
  border-radius: var(--pjc-radius-md);
  overflow: hidden;
  max-width: 70ch;
}
.pjc-vizinho {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 56px;
  padding: 14px 18px;
  text-decoration: none;
  color: inherit;
}
.pjc-vizinho + .pjc-vizinho { border-top: 1px solid var(--pjc-mist); }
.pjc-vizinho:hover { background: var(--pjc-cloud); color: inherit; }
.pjc-vizinho strong { font-size: 17px; font-weight: 700; }
.pjc-vizinho span { font-size: 15px; color: var(--pjc-slate); }

/* ---------- Linha de módulo no rodapé do artigo ---------- */

.pjc-linha-modulo {
  background: var(--pjc-cloud);
  border: 1px solid var(--pjc-line);
  border-radius: var(--pjc-radius-md);
  padding: 22px;
  max-width: 70ch;
}
.pjc-linha-modulo p { font-size: 17px; line-height: 1.6; margin-bottom: 18px; }

/* ---------- Cabeçalho de porta de entrada na home ---------- */
/* Duas contas, duas telas de login, dois cartões. O cabeçalho não filtra e não
   esconde: ele diz por qual porta se entra, para ninguém seguir o guia da
   tela que não é a dele. Não é seletor de perfil, que segue vetado até 8
   trilhas (ver docs/experiencia.md, adendo à 2.4). */

.pjc-secao > h2.pjc-titulo-porta { margin-bottom: 6px; }
.pjc-secao-apoio { margin-bottom: 14px; max-width: 62ch; }

/* ---------- Cartão de trilha ---------- */

.pjc-trilhas {
  background: var(--pjc-white);
  border: 1px solid var(--pjc-line);
  border-radius: var(--pjc-radius-lg);
  overflow: hidden;
  box-shadow: var(--pjc-shadow-card);
}
.pjc-trilha {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  min-height: 88px;
  padding: 20px 22px;
  text-decoration: none;
  color: inherit;
}
.pjc-trilha + .pjc-trilha { border-top: 1px solid var(--pjc-mist); }
.pjc-trilha:hover, .pjc-trilha:focus-visible {
  background: var(--pjc-cloud);
  color: inherit;
}
.pjc-trilha:hover .pjc-trilha-nome { color: var(--pjc-ocean-deep); }
.pjc-trilha > .mdi {
  font-size: 24px;
  color: var(--pjc-ocean-mid);
  line-height: 1.2;
  margin-top: 2px;
}
.pjc-trilha-corpo { flex: 1; min-width: 0; }
.pjc-trilha-cabeca {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.pjc-trilha-nome { font-size: 22px; line-height: 1.3; font-weight: 700; }
.pjc-trilha-desc { font-size: 15px; line-height: 1.55; color: var(--pjc-slate); }
.pjc-trilha-seta {
  font-size: 22px;
  color: var(--pjc-ocean-mid);
  margin-top: 6px;
  display: none;
}
@media (min-width: 960px) {
  .pjc-trilha { gap: 18px; padding: 26px 30px; }
  .pjc-trilha > .mdi { font-size: 26px; }
  .pjc-trilha-seta { display: block; }
}

/* ---------- Bloco da 3.0 na home ---------- */

.pjc-bloco-30 {
  background: var(--pjc-white);
  border: 1px solid var(--pjc-line);
  border-radius: var(--pjc-radius-lg);
  overflow: hidden;
}
.pjc-bloco-30-faixa { height: 8px; background: var(--pjc-ocean-grad); }
.pjc-bloco-30-corpo { padding: 26px 22px 20px; }
.pjc-bloco-30-corpo .pjc-label { display: block; margin-bottom: 14px; }
.pjc-bloco-30-titulo {
  font-size: 32px;
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.6px;
  margin-bottom: 12px;
  text-wrap: pretty;
}
.pjc-bloco-30-apoio { font-size: 17px; line-height: 1.6; color: var(--pjc-slate); }
.pjc-bloco-30-areas { border-top: 1px solid var(--pjc-mist); }
.pjc-area-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  padding: 14px 22px;
  text-decoration: none;
  color: inherit;
  font-size: 17px;
  font-weight: 700;
}
.pjc-area-linha + .pjc-area-linha { border-top: 1px solid var(--pjc-mist); }
.pjc-area-linha:hover { background: var(--pjc-cloud); color: inherit; }
.pjc-area-linha .mdi { font-size: 20px; color: var(--pjc-ocean-mid); }
.pjc-area-linha .pjc-modulo { margin-left: auto; }
.pjc-area-linha .pjc-modulo + .mdi { margin-left: 0; }

@media (min-width: 960px) {
  .pjc-bloco-30-desktop {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 56px;
    padding: 44px 44px 46px;
  }
  .pjc-bloco-30-corpo { padding: 0; }
  .pjc-bloco-30-titulo { font-size: 44px; line-height: 1.08; letter-spacing: -0.9px; margin-bottom: 16px; }
  .pjc-bloco-30-apoio { max-width: 44ch; margin-bottom: 28px; }
  .pjc-bloco-30-areas {
    border-top: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-content: start;
  }
  .pjc-area-linha {
    border: 1px solid var(--pjc-line);
    border-radius: var(--pjc-radius-md);
    padding: 12px 18px;
  }
  .pjc-area-linha + .pjc-area-linha { border-top: 1px solid var(--pjc-line); }
}

/* Seletor de perfil: cortado da v1 por decisão do checkpoint 1 de design.
   Com quatro trilhas, reordenar não tem efeito observável. A ordem editorial
   padrão já é a do Operador. Volta quando as trilhas passarem de uma tela
   de celular, na prática oito ou mais. O mockup da Tela 1 é a especificação. */

/* ---------- Aviso de vocabulário (home, sem parâmetro) ---------- */

.pjc-aviso-vocab {
  background: var(--pjc-mist);
  border-bottom: 1px solid var(--pjc-line);
}
.pjc-aviso-vocab[hidden] { display: none; }
.pjc-aviso-vocab-inner {
  max-width: var(--pjc-page-max);
  margin: 0 auto;
  padding: 20px;
}
.pjc-aviso-vocab p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--pjc-navy);
  margin-bottom: 14px;
  max-width: 66ch;
}
@media (min-width: 960px) {
  .pjc-aviso-vocab-inner { padding: 20px 40px; }
}

/* ---------- Seletor de vocabulário ---------- */

.pjc-vocab { position: relative; display: inline-block; max-width: 100%; }
.pjc-vocab summary { list-style: none; cursor: pointer; }
.pjc-vocab summary::-webkit-details-marker { display: none; }

.pjc-vocab-atual {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--pjc-tap-min);
  padding: 10px 16px;
  background: var(--pjc-white);
  border: 1px solid var(--pjc-line);
  border-radius: var(--pjc-radius-md);
  font-size: 15px;
  color: var(--pjc-navy);
  max-width: 100%;
}
.pjc-vocab-atual .mdi { font-size: 18px; color: var(--pjc-ocean-mid); }
.pjc-vocab-atual .mdi.mdi-chevron-down { color: var(--pjc-slate); }
/* os termos ficam num único elemento inline: com um filho por termo, o gap
   do flex entraria antes de cada vírgula */
.pjc-vocab-termos { display: inline; min-width: 0; }

.pjc-vocab-lista {
  position: absolute;
  z-index: 30;
  left: 0;
  bottom: calc(100% + 8px);
  min-width: 280px;
  max-width: min(92vw, 360px);
  background: var(--pjc-white);
  border: 1px solid var(--pjc-line);
  border-radius: var(--pjc-radius-md);
  overflow: hidden;
  box-shadow: var(--pjc-shadow-raised);
}
.pjc-vocab--abre-baixo .pjc-vocab-lista { bottom: auto; top: calc(100% + 8px); }
.pjc-vocab-opcao {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: var(--pjc-white);
  padding: 14px 18px;
  font-family: var(--pjc-font-sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--pjc-navy);
  cursor: pointer;
}
.pjc-vocab-opcao + .pjc-vocab-opcao { border-top: 1px solid var(--pjc-mist); }
.pjc-vocab-opcao:hover { background: var(--pjc-cloud); }
.pjc-vocab-opcao strong { display: block; }
.pjc-vocab-opcao span { color: var(--pjc-slate); }
.pjc-vocab-opcao[aria-pressed="true"] { background: var(--pjc-mist); }

/* no rodapé navy o seletor inverte as cores */
.pjc-rodape .pjc-vocab-atual {
  background: transparent;
  border-color: var(--pjc-navy-borda);
  color: var(--pjc-white);
}
.pjc-rodape .pjc-vocab-atual .mdi { color: var(--pjc-navy-label); }

/* ---------- Rodapé ---------- */

.pjc-rodape {
  background: var(--pjc-navy);
  color: var(--pjc-white);
  position: relative;
  margin-top: 48px;
  flex-shrink: 0;
}
/* A estrela decorativa sangra pelo canto de propósito, por isso precisa de
   recorte. Esse recorte fica isolado num contêiner do tamanho do rodapé,
   nunca no rodapé inteiro, porque o rodapé também hospeda o seletor de
   vocabulário, que abre para cima e precisa poder ultrapassar essa borda. */
.pjc-rodape-decoracao {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.pjc-rodape-inner {
  max-width: var(--pjc-page-max);
  margin: 0 auto;
  padding: 32px 20px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.pjc-rodape .pjc-label { color: var(--pjc-navy-label); margin-bottom: 10px; display: block; }
.pjc-rodape-marca img { height: 33px; width: auto; display: block; margin-bottom: 16px; }
.pjc-rodape-frase { font-size: 15px; line-height: 1.6; color: var(--pjc-navy-apoio); }
.pjc-rodape-texto { font-size: 17px; line-height: 1.6; color: var(--pjc-white); }

.pjc-rodape-estrela {
  position: absolute;
  right: -90px;
  bottom: -110px;
  width: 240px;
  height: 240px;
  opacity: 0.1;
  pointer-events: none;
}
@media (min-width: 960px) {
  .pjc-rodape-inner {
    padding: 48px 40px;
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 48px;
  }
  .pjc-rodape-estrela { right: 80px; bottom: -200px; width: 420px; height: 420px; }
}

/* ---------- Animação da marca ---------- */
/* Definida no CSS, disparada pelo script com .pjc-anima no html depois que a
   página está pronta. Sem script, tudo fica no quadro de repouso. */

@keyframes pjcStarSpin { from { transform: rotate(12deg); } to { transform: rotate(372deg); } }
@keyframes pjcPulseA { 0% { opacity: .35; } 50% { opacity: .9; } 100% { opacity: .35; } }
@keyframes pjcPulseB { 0% { opacity: .9; } 50% { opacity: .35; } 100% { opacity: .9; } }

.pjc-star-spin { transform: rotate(12deg); transform-origin: center; }
.pjc-star-pulse { opacity: 0.9; }
.pjc-anima .pjc-star-spin { animation: pjcStarSpin var(--pjc-loop-star); }
.pjc-anima .pjc-star-pulse-a { animation: pjcPulseA var(--pjc-loop-a); }
.pjc-anima .pjc-star-pulse-b { animation: pjcPulseB var(--pjc-loop-b); }

@media (prefers-reduced-motion: reduce) {
  .pjc-anima .pjc-star-spin,
  .pjc-anima .pjc-star-pulse-a,
  .pjc-anima .pjc-star-pulse-b { animation: none; }
}

/* ---------- Página "O que mudou" ---------- */

.pjc-indice-areas {
  position: sticky;
  top: 68px;
  z-index: 20;
  background: var(--pjc-white);
  border-bottom: 1px solid var(--pjc-line);
}
.pjc-indice-areas-inner {
  max-width: var(--pjc-page-max);
  margin: 0 auto;
  display: flex;
  gap: 8px;
  padding: 14px 20px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.pjc-indice-chip {
  flex: 0 0 auto;
  min-height: var(--pjc-tap-min);
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  border: 1px solid var(--pjc-line);
  border-radius: var(--pjc-radius-pill);
  font-family: var(--pjc-font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pjc-slate);
  text-decoration: none;
  white-space: nowrap;
}
.pjc-indice-chip:hover { border-color: var(--pjc-ocean-mid); color: var(--pjc-ocean-deep); }
.pjc-indice-chip--ativo {
  background: var(--pjc-ocean-deep);
  border-color: var(--pjc-ocean-deep);
  color: var(--pjc-white);
}
.pjc-indice-chip--ativo:hover { color: var(--pjc-white); }
@media (min-width: 960px) {
  .pjc-indice-areas-inner { flex-wrap: wrap; overflow: visible; padding: 14px 40px 20px; }
}

.pjc-mudanca-area {
  scroll-margin-top: var(--pjc-ancora, 190px);
  padding-top: 32px;
}
.pjc-mudanca-area-titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.pjc-mudanca {
  background: var(--pjc-white);
  border: 1px solid var(--pjc-line);
  border-radius: var(--pjc-radius-lg);
  padding: 22px;
  margin-bottom: 14px;
  scroll-margin-top: var(--pjc-ancora, 190px);
}
.pjc-mudanca-tipo {
  font-family: var(--pjc-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pjc-slate);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.pjc-mudanca-titulo { font-size: 22px; line-height: 1.3; font-weight: 700; margin-bottom: 10px; max-width: var(--pjc-measure); }
.pjc-mudanca-texto { font-size: 17px; line-height: 1.6; color: var(--pjc-navy); max-width: var(--pjc-measure); }
.pjc-mudanca-texto + .pjc-mudanca-texto { margin-top: 12px; }
.pjc-mudanca .pjc-onde-fica { margin-top: 18px; max-width: var(--pjc-measure); }

.pjc-antes-depois {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pjc-antes-depois-rotulo {
  font-family: var(--pjc-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pjc-slate);
  margin-bottom: 8px;
}
.pjc-antes-depois-rotulo--agora { color: var(--pjc-ocean-deep); }

@media (min-width: 960px) {
  .pjc-mudanca { padding: 32px; margin-bottom: 20px; scroll-margin-top: var(--pjc-ancora, 230px); }
  .pjc-mudanca--duas-colunas {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 44px;
    align-items: start;
  }
  .pjc-antes-depois { flex-direction: row; }
  .pjc-antes-depois > div { flex: 1; }
}

/* ---------- Artigo ---------- */

.pjc-artigo-topo { padding-top: 28px; }
.pjc-artigo-trilha {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.pjc-artigo-trilha a { text-decoration: none; }
.pjc-artigo h1 { margin-bottom: 20px; }
.pjc-artigo .pjc-onde-fica { margin-bottom: 12px; max-width: 66ch; }
.pjc-artigo .pjc-formato { margin-bottom: 24px; }

.pjc-artigo-secao { padding-top: 32px; }
.pjc-artigo-secao h2 {
  font-size: 22px;
  line-height: 1.3;
  margin-bottom: 16px;
  letter-spacing: 0;
}

.pjc-artigo-rodape-bloco { padding-top: 32px; }
.pjc-artigo-rodape-bloco .pjc-label { display: block; margin-bottom: 12px; }

/* sumário de artigo longo */
.pjc-sumario-mobile {
  border: 1px solid var(--pjc-line);
  border-radius: var(--pjc-radius-md);
  background: var(--pjc-white);
  margin-bottom: 8px;
  max-width: 70ch;
}
.pjc-sumario-mobile summary {
  list-style: none;
  cursor: pointer;
  min-height: var(--pjc-control-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  font-family: var(--pjc-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pjc-slate);
}
.pjc-sumario-mobile summary::-webkit-details-marker { display: none; }
.pjc-sumario-mobile summary .mdi { font-size: 22px; color: var(--pjc-slate); }
.pjc-sumario-mobile[open] summary .mdi-chevron-down { display: none; }
.pjc-sumario-mobile:not([open]) summary .mdi-chevron-up { display: none; }
.pjc-sumario-lista {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 18px 18px;
}
.pjc-sumario-lista a {
  font-size: 15px;
  line-height: 1.4;
  color: var(--pjc-slate);
  text-decoration: none;
}
.pjc-sumario-lista a:hover { color: var(--pjc-ocean-deep); }
.pjc-sumario-lista a.pjc-sumario-ativo { color: var(--pjc-ocean-deep); font-weight: 700; }
.pjc-sumario-divisor { height: 1px; background: var(--pjc-mist); margin: 4px 0; }

.pjc-sumario-lateral { display: none; }

@media (min-width: 960px) {
  .pjc-artigo-colunas {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 64px;
    align-items: start;
  }
  .pjc-sumario-mobile { display: none; }
  .pjc-sumario-lateral {
    display: block;
    position: sticky;
    top: 92px;
    border: 1px solid var(--pjc-line);
    border-radius: var(--pjc-radius-md);
    padding: 22px 20px;
    background: var(--pjc-white);
  }
  .pjc-sumario-lateral .pjc-label { display: block; margin-bottom: 14px; font-size: 11px; }
}

.pjc-passo-alvo { scroll-margin-top: 92px; }

/* ---------- Busca (página) ---------- */

.pjc-resultados {
  background: var(--pjc-white);
  border: 1px solid var(--pjc-line);
  border-radius: var(--pjc-radius-md);
  overflow: hidden;
}
.pjc-resultado {
  display: block;
  padding: 18px;
  text-decoration: none;
  color: inherit;
}
.pjc-resultado + .pjc-resultado { border-top: 1px solid var(--pjc-mist); }
.pjc-resultado:hover { background: var(--pjc-cloud); color: inherit; }
.pjc-resultado-trilha {
  font-family: var(--pjc-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pjc-slate);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.pjc-resultado-titulo { display: block; font-size: 17px; font-weight: 700; line-height: 1.35; margin-bottom: 6px; }
.pjc-resultado-caminho, .pjc-resultado-formato {
  display: block;
  font-size: 15px;
  color: var(--pjc-slate);
  line-height: 1.45;
}
@media (min-width: 960px) {
  .pjc-resultado { padding: 24px 26px; }
  .pjc-resultado-titulo { font-size: 22px; line-height: 1.3; margin-bottom: 8px; }
}

.pjc-atendimento-cartao {
  background: var(--pjc-white);
  border: 1px solid var(--pjc-line);
  border-radius: var(--pjc-radius-md);
  padding: 22px;
}
.pjc-atendimento-cartao p { font-size: 17px; line-height: 1.6; margin-bottom: 18px; }
@media (min-width: 960px) {
  .pjc-atendimento-cartao {
    padding: 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
  }
  .pjc-atendimento-cartao p { margin-bottom: 0; flex: 1 1 320px; }
}

/* ---------- Impressão ---------- */
/* Vale para as três variantes. Ficam no papel: título, "Onde fica", linha de
   formato, passos, capturas e "Se der errado". O quadro de vídeo vira a linha
   escrita do bloco .pjc-print-only, junto com o endereço do artigo. */

@media print {
  .pjc-topo, .pjc-rodape, .pjc-indice-areas, .pjc-sumario-mobile,
  .pjc-sumario-lateral, .pjc-video-quadro, .pjc-video-rodape,
  .pjc-ancora-passos, .pjc-vocab, .pjc-aviso-vocab, .pjc-botao,
  .pjc-artigo-vizinhos, .pjc-sugestoes, .pjc-folga-cauda {
    display: none !important;
  }
  body { background: #FFFFFF; }
  .pjc-artigo-colunas { display: block; }
  .pjc-passo, .pjc-se-der-errado > div, .pjc-mudanca { break-inside: avoid; }
  .pjc-print-only { display: block !important; }
  a { color: var(--pjc-navy); text-decoration: none; }
}
.pjc-print-only {
  display: none;
  border-top: 1px solid var(--pjc-line);
  margin-top: 24px;
  padding-top: 16px;
  font-size: 15px;
  color: var(--pjc-slate);
}

/* ---------- Classes de apoio (substituem estilos inline) ---------- */

.pjc-label--compacto { font-size: 11px; }
.pjc-bloco-rotulo { display: block; margin-bottom: 12px; }
.pjc-rotulo-pagina { display: block; margin-bottom: 16px; }

.pjc-topo-campo-molde { position: relative; flex: 1; max-width: 440px; }
.pjc-sugestoes--topo {
  position: absolute;
  z-index: 50;
  left: 0;
  right: 0;
  min-width: 320px;
}

.pjc-busca-resultados-area { margin-top: 24px; }
.pjc-busca-contagem { margin-bottom: 14px; }
.pjc-busca-sem-resultado { font-size: 22px; line-height: 1.35; letter-spacing: 0; margin-bottom: 10px; }
.pjc-busca-talvez { margin-bottom: 20px; }
.pjc-atendimento-cartao--busca { margin-top: 26px; }

.pjc-bloco-30-rodape { padding: 8px 22px 22px; }
.pjc-botao--bloco { width: 100%; }

/* ---------- Captura de guia: proporção da tela, não do vídeo ---------- */
/* As capturas dos guias saem em 1440x900, e o `.pjc-figura` base é 16/9 com
   `object-fit: cover`. Cortar 10% da altura de uma captura com realce é cortar
   justamente o que o passo manda olhar, porque o realce costuma estar no topo
   ou no rodapé da tela. Aqui a moldura assume a proporção da captura e a imagem
   entra inteira. */
.pjc-figura--tela { aspect-ratio: 1440 / 900; }
.pjc-figura--tela img { object-fit: contain; }

/* A trilha do funcionário captura no portal mobile (retrato 390x844), não no
   painel administrativo (1440x900). Sem isto, a moldura larga do desktop
   deixa a captura retrato pequena no meio de uma tarja cinza enorme. O
   seletor lê a pasta por audiência que o gerador já usa para não colidir
   nome de arquivo entre trilhas (ver `assets/img/guias/funcionario/`), então
   nenhuma classe nova precisa nascer na página gerada. */
.pjc-figura--tela:has(img[src*="/guias/funcionario/"]) { aspect-ratio: 780 / 1688; }

/* Duas capturas da aula 01 são do quadro de assinatura, que só existe girado:
   a mesma tela do portal, mas em paisagem. */
.pjc-figura--tela:has(img[src$="01-passo-07.png"]),
.pjc-figura--tela:has(img[src$="01-passo-08.png"]) { aspect-ratio: 844 / 390; }

/* A frase de abertura do artigo: o resumo de uma linha que o guia traz em
   "Em uma frase", lido antes de qualquer passo. */
.pjc-artigo-frase {
  font-size: 19px;
  line-height: 1.55;
  color: var(--pjc-slate);
  margin: 0 0 24px;
  padding-left: 16px;
  border-left: 3px solid var(--pjc-line);
}

/* Parágrafos de seção de texto corrido ("Antes de começar", "Para lembrar").
   Sem isso os parágrafos encostam e a seção lê como um bloco só. */
.pjc-artigo-secao p + p,
.pjc-artigo-secao p + ul,
.pjc-artigo-secao ul + p { margin-top: 14px; }

/* Nome de área na home é título, e título começa com maiúscula. O vocabulário
   dinâmico entrega "alunos" em caixa baixa porque na maior parte do texto o
   termo aparece no meio da frase; aqui ele é o título do cartão. */
.pjc-trilha-nome [data-t] { text-transform: capitalize; }

/* ---------- Captura ampliável: moldura, legenda e visor ---------- */
/* A captura de interface é pequena demais para se ler dentro do artigo. A
   moldura vira botão, e o clique abre a imagem no tamanho que a tela permitir.
   Sem biblioteca e sem sobreposição própria: `<dialog>` nativo, que já entrega
   Esc, foco preso e fundo inerte. */

.pjc-figura-bloco { margin: 0; }

/* A moldura é um <button>. Zera o que o navegador põe e mantém a aparência que
   a figura já tinha. */
button.pjc-figura {
  appearance: none;
  -webkit-appearance: none;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: zoom-in;
  transition: border-color .16s ease, box-shadow .16s ease;
}
button.pjc-figura:hover { border-color: var(--pjc-ocean-mid); }
button.pjc-figura:focus-visible {
  outline: 3px solid var(--pjc-ocean-mid);
  outline-offset: 3px;
}

/* Marca de ampliar: aparece no hover e no foco, e some no toque, onde hover não
   existe e o gesto já é evidente. */
button.pjc-figura::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(8, 53, 127, .82) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14M10 7h-1v2H7v1h2v2h1v-2h2V9h-2z'/%3E%3C/svg%3E") center / 20px no-repeat;
  opacity: 0;
  transform: scale(.9);
  transition: opacity .16s ease, transform .16s ease;
  pointer-events: none;
}
button.pjc-figura:hover::after,
button.pjc-figura:focus-visible::after { opacity: 1; transform: scale(1); }
@media (hover: none) { button.pjc-figura::after { display: none; } }

.pjc-figura-legenda { margin-top: 10px; }

/* ---- O visor ---- */

.pjc-visor {
  border: 0;
  padding: 0;
  max-width: min(1240px, 94vw);
  /* 88vh mais a folga do botão de fechar (que mora fora da moldura, acima
     dela) cabem dentro de 100vh com sobra, então a margem automática nos
     dois eixos centraliza o visor de verdade, em vez de prendê-lo no topo. */
  max-height: min(88vh, calc(100vh - 64px));
  margin: auto;
  background: transparent;
  overflow: visible;
}
.pjc-visor::backdrop {
  background: rgba(6, 26, 63, .72);
  backdrop-filter: blur(6px);
}
.pjc-visor-figura {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pjc-visor img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 78vh;
  object-fit: contain;
  border-radius: var(--pjc-radius-md);
  background: var(--pjc-white);
  box-shadow: 0 30px 80px rgba(6, 26, 63, .45);
}
.pjc-visor figcaption {
  color: #fff;
  font-size: 16px;
  line-height: 1.5;
  text-align: center;
  text-wrap: balance;
}
.pjc-visor figcaption strong { color: #fff; }

.pjc-visor-fechar {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: #fff;
  color: var(--pjc-navy);
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 20px rgba(6, 26, 63, .35);
}
.pjc-visor-fechar:focus-visible { outline: 3px solid var(--pjc-ocean-light); outline-offset: 2px; }
.pjc-visor-fechar .mdi { width: 20px; height: 20px; fill: currentColor; }

@media (max-width: 640px) {
  .pjc-visor { max-width: 94vw; }
  .pjc-visor-fechar { top: -12px; right: 0; }
}

/* A transição de abertura é o morph da própria imagem, quando o navegador
   suporta. Onde não suporta, o visor simplesmente aparece: nada quebra. */
::view-transition-old(pjc-captura),
::view-transition-new(pjc-captura) {
  animation-duration: .28s;
  animation-timing-function: cubic-bezier(.2, .8, .2, 1);
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(pjc-captura),
  ::view-transition-new(pjc-captura) { animation: none; }
}

/* ---------- Área com mais de uma tarefa: abre e mostra ---------- */
/* `<details>` nativo. Sem script, o navegador já abre e fecha, com teclado e
   com leitor de tela; a lista fechada continua encontrável pelo Ctrl+F. */

.pjc-trilha-grupo + .pjc-trilha,
.pjc-trilha + .pjc-trilha-grupo,
.pjc-trilha-grupo + .pjc-trilha-grupo { border-top: 1px solid var(--pjc-mist); }

summary.pjc-trilha {
  cursor: pointer;
  list-style: none;
  align-items: center;
}
summary.pjc-trilha::-webkit-details-marker { display: none; }

/* Quantas tarefas a área tem. Responde antes do clique se vale abrir. */
.pjc-trilha-conta {
  flex-shrink: 0;
  font-family: var(--pjc-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pjc-slate);
  background: var(--pjc-mist);
  border-radius: 999px;
  padding: 5px 10px;
  margin-left: auto;
}
summary.pjc-trilha .pjc-trilha-seta {
  margin-left: 10px;
  transition: transform .2s ease;
}
.pjc-trilha-grupo[open] summary.pjc-trilha .pjc-trilha-seta { transform: rotate(180deg); }
.pjc-trilha-grupo[open] summary.pjc-trilha { background: var(--pjc-cloud); }

.pjc-trilha-itens {
  padding: 4px 22px 16px 60px;
  background: var(--pjc-cloud);
  display: flex;
  flex-direction: column;
}
.pjc-trilha-item {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 11px 12px;
  border-radius: var(--pjc-radius-sm, 8px);
  text-decoration: none;
  color: inherit;
}
.pjc-trilha-item:hover { background: var(--pjc-white); color: inherit; }
.pjc-trilha-item:hover strong { color: var(--pjc-ocean-deep); }
.pjc-trilha-item-num {
  flex-shrink: 0;
  font-family: var(--pjc-font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--pjc-dim);
  min-width: 14px;
}
.pjc-trilha-item-corpo { display: flex; flex-direction: column; gap: 2px; }
.pjc-trilha-item strong { font-size: 16px; font-weight: 700; }
.pjc-trilha-item span { font-size: 14px; color: var(--pjc-slate); }

@media (min-width: 960px) {
  .pjc-trilha-itens { padding-left: 74px; }
}
@media (max-width: 600px) {
  .pjc-trilha-itens { padding-left: 24px; }
  .pjc-trilha-conta { display: none; }
}

/* A abertura anima onde o navegador sabe interpolar altura automática. Onde não
   sabe, abre na hora: o conteúdo é o mesmo. */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .pjc-trilha-grupo::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size .26s ease, content-visibility .26s allow-discrete;
  }
  .pjc-trilha-grupo[open]::details-content { block-size: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .pjc-trilha-grupo::details-content { transition: none; }
  summary.pjc-trilha .pjc-trilha-seta { transition: none; }
}

/* ---------- Continuidade: o próximo passo tem prioridade ---------- */
/* Quem termina um artigo precisa saber qual é o seguinte. O próximo da trilha
   vem antes dos irmãos de área, e é o único com peso visual. */

.pjc-vizinho--proximo {
  background: var(--pjc-mist);
  border-left: 3px solid var(--pjc-ocean-mid);
}
.pjc-vizinho--proximo strong { color: var(--pjc-ocean-deep); }
.pjc-vizinho--proximo:hover { background: var(--pjc-cloud); }