/* Páginas institucionais GetNinjas · camada compartilhada (header, rodapé, container, seções, pendências).
   Usa só tokens semânticos do DSNinja (assets/dsninja/dsninja.css). Tokens próprios desta camada levam o prefixo --pi-.
   Tudo que não existe no Kojo está marcado "fora do Kojo · PROPOSTA". */

:root {
  /* Base clara para ilustrações de apoio e logos de terceiros (traço fixo gn-dark-600): branca nos dois temas · fora do Kojo · PROPOSTA */
  --pi-plate: var(--gn-light-100);
  --pi-container: 1120px;               /* grid-web-desktop-large-width */
  --pi-gutter: var(--space-300);        /* 16px no mobile */
  --pi-section-y: var(--space-1000);    /* 48px no mobile; 88px no desktop */
}
@media (min-width: 640px)  { :root { --pi-gutter: var(--space-500); } }
@media (min-width: 992px)  { :root { --pi-section-y: var(--space-1500); } }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, p, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }

.pi-container { width: 100%; max-width: calc(var(--pi-container) + 2 * var(--pi-gutter)); margin: 0 auto; padding: 0 var(--pi-gutter); }
.pi-section { padding: var(--pi-section-y) 0; }
.pi-section--brand  { background: var(--color-bg-brand); color: var(--color-text-on-brand); }
.pi-section--subtle { background: var(--color-bg-subtle); }
.pi-section--brand :is(h1, h2, h3, p) { color: var(--color-text-on-brand); }

.pi-head { max-width: 720px; margin: 0 auto var(--space-900); text-align: center; }
.pi-head p { margin-top: var(--space-200); font-size: var(--text-large); }

/* Link de texto: azul é ação */
.pi-link { color: var(--color-action-primary); font-weight: var(--font-weight-semibold); text-decoration: underline; text-underline-offset: 3px; }
.pi-link:hover { color: var(--color-action-primary-hover); }

/* Foco visível em tudo que é interativo (WCAG 2.4.7) */
:where(a, button):focus-visible { outline: 3px solid var(--color-border-focus); outline-offset: 2px; border-radius: var(--radius-s); }

/* Pular para o conteúdo */
.pi-skip { position: absolute; left: var(--space-300); top: -100px; z-index: 100; padding: var(--space-100) var(--space-300); background: var(--color-bg-default); color: var(--color-action-primary); border-radius: var(--radius-m); }
.pi-skip:focus { top: var(--space-300); }

/* ===== Header ===== */
.pi-header { position: sticky; top: 0; z-index: 50; background: var(--color-bg-default); border-bottom: 1px solid var(--color-border-subtle); }
.pi-header__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-300); min-height: 64px; }
.pi-header__logo { display: inline-flex; padding: var(--space-050) 0; }
.pi-header__logo img { height: 28px; width: auto; }

/* ===== Rodapé ===== */
.pi-footer { background: var(--color-bg-inverse); color: var(--color-text-inverse); padding: var(--space-900) 0; }
.pi-footer__inner { display: grid; gap: var(--space-300); justify-items: start; }
.pi-footer img { height: 24px; width: auto; }
.pi-footer p { font-size: var(--text-small); line-height: var(--line-height-normal); color: var(--color-text-inverse); max-width: 72ch; }
@media (min-width: 992px) { .pi-footer__inner { grid-template-columns: auto 1fr; align-items: center; gap: var(--space-700); } .pi-footer p { justify-self: end; text-align: right; } }

/* ===== Voltar ao topo (.gn-fab do DS em posição fixa) · fora do Kojo · PROPOSTA ===== */
.pi-totop { position: fixed; right: var(--pi-gutter); bottom: var(--space-500); z-index: 40; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .2s, visibility .2s; }
.pi-totop.is-visible { opacity: 1; visibility: visible; transform: none; }
@media (prefers-reduced-motion: reduce) { .pi-totop { transition: none; transform: none; } }
.pi-footer { padding-bottom: calc(var(--space-900) + 64px); } /* o botão não cobre o texto do rodapé no fim da página */
.review .pi-totop { display: none; } /* no modo revisão o painel ocupa o canto */

.pi-nowrap { white-space: nowrap; }

/* Logo: versão preta no claro, branca no escuro (arquivos oficiais de Marca-Get) */
.only-dark { display: none !important; }
[data-mode="dark"] .only-light { display: none !important; }
[data-mode="dark"] .only-dark { display: block !important; }

/* Escuro: os componentes gn-* ainda não mudam no escuro (ADR 0004). O botão secundário usa o azul de texto do tema
   (action-400) para manter 4,5:1 sobre o fundo escuro; no hover ele vira preenchido, como no Kojo · fora do Kojo · PROPOSTA */
[data-mode="dark"] .gn-button--secondary:not(:hover):not(:active) { color: var(--color-action-primary); border-color: var(--color-action-primary); }

/* Card desta camada (fora do Kojo · PROPOSTA; o Card do DS também é fora do Kojo e não é referência).
   Regra do DS: borda OU sombra. Aqui só borda, que funciona igual nos dois temas. */
.pi-card { background: var(--color-bg-default); border: 1px solid var(--color-border-default); border-radius: var(--radius-l); padding: var(--space-500); }
.pi-section--brand .pi-card { border-color: transparent; } /* sobre o amarelo o contraste do fundo já separa a peça */
.pi-section--brand .pi-card :is(h3, p) { color: inherit; }
.pi-section--brand .pi-card { color: var(--color-text-body); }
.pi-section--brand .pi-card h3 { color: var(--color-text-heading); }

/* Base clara de ilustração de apoio (traço escuro fixo): funciona sobre amarelo, branco e escuro */
.pi-plate { display: inline-grid; place-items: center; flex: none; border-radius: var(--radius-circle); background: var(--pi-plate); }
.pi-section--subtle .pi-plate, .pi-section:not(.pi-section--brand) .pi-card .pi-plate { background: var(--color-bg-brand-subtle); }
[data-mode="dark"] .pi-plate { background: var(--pi-plate) !important; }

/* ===== Pendências (modo revisão: ?revisao na URL) ===== */
.pend { display: none; }
.review .pend { display: inline-block; margin: 0 var(--space-050); padding: 0 var(--space-100); border-radius: var(--radius-pill); background: var(--color-feedback-warning-bg); color: var(--color-feedback-warning-on-bg); font-size: var(--text-label); font-weight: var(--font-weight-semibold); line-height: 1.6; vertical-align: middle; font-style: normal; text-transform: none; letter-spacing: 0; }
.review .pend.prop { background: var(--color-highlight-bg); color: var(--color-highlight-text); }
.pi-revpanel { display: none; }
.review .pi-revpanel { display: block; position: fixed; right: var(--space-300); bottom: var(--space-300); z-index: 60; width: min(420px, calc(100vw - 32px)); max-height: 60vh; overflow: auto; padding: var(--space-500); background: var(--color-bg-default); color: var(--color-text-body); border: 1px solid var(--color-border-default); border-radius: var(--radius-l); box-shadow: var(--shadow-bottom-level-3); }
.pi-revpanel h2 { font-size: var(--text-h5); margin-bottom: var(--space-200); color: var(--color-text-heading); }
.pi-revpanel ol { list-style: decimal; padding-left: var(--space-500); display: grid; gap: var(--space-100); font-size: var(--text-small); }
.pi-revpanel button { margin-top: var(--space-300); }