/* ==========================================================================
   PASA - Sistema de identidade visual
   --------------------------------------------------------------------------
   Direção: "Linha de Embarque".
   O terminal mede tudo - toneladas, toneladas/hora, anos de expansão. Os
   números aparecem em monoespaçada tabular, como instrumento, e uma régua
   amarela (a linha de embarque) estrutura a página.

   Paleta e amarelo vêm das próprias peças da PASA; o cinza frio é concreto
   e maresia, não creme.

   Carregar SEMPRE depois de style.css e custom.css.
   ========================================================================== */

@import url('../fonts/pasa/fonts.css');

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Cor */
  --p-ink        : #071233;   /* marinho quase preto - texto e fundos escuros */
  --p-navy       : #0E2A6B;   /* marinho da marca */
  --p-navy-600   : #143A8F;
  --p-navy-300   : #3C63C4;
  --p-yellow     : #FFC72C;   /* amarelo PASA - acento único */
  --p-yellow-700 : #8F5F00;   /* âmbar do eyebrow: 5,5:1 no branco, 4,8:1 no concreto */
  --p-concrete   : #EDF0F5;   /* superfície clara fria */
  --p-concrete-2 : #DDE3EC;   /* bordas */
  --p-steel      : #56678A;   /* texto secundário */
  --p-paper      : #FFFFFF;

  --p-ink-rgb    : 7, 18, 51;
  --p-yellow-rgb : 255, 199, 44;

  /* Tipografia */
  --p-display : 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --p-body    : 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --p-mono    : 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Escala fluida */
  --p-t-hero  : clamp(2.5rem, 5.6vw, 5rem);
  --p-t-xl    : clamp(2.125rem, 4.2vw, 3.5rem);
  --p-t-lg    : clamp(1.625rem, 2.8vw, 2.5rem);
  --p-t-md    : clamp(1.25rem, 1.6vw, 1.5rem);
  --p-t-body  : 1.0625rem;
  --p-t-sm    : 0.9375rem;
  --p-t-xs    : 0.8125rem;

  /* Ritmo vertical */
  --p-section   : clamp(4.5rem, 8vw, 8rem);
  --p-section-sm: clamp(3rem, 5vw, 4.5rem);
  --p-gutter    : clamp(1.25rem, 4vw, 3rem);

  --p-maxw      : 1240px;
  --p-radius    : 2px;   /* quase reto - engenharia, não app */
  --p-ease      : cubic-bezier(0.22, 1, 0.36, 1);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
body.p-site {
  font-family            : var(--p-body);
  font-size              : var(--p-t-body);
  line-height            : 1.65;
  color                  : var(--p-ink);
  background             : var(--p-paper);
  -webkit-font-smoothing : antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.p-site h1, .p-site h2, .p-site h3, .p-site h4 {
  font-family    : var(--p-display);
  font-stretch   : 112%;              /* eixo expandido - sinalização portuária */
  font-weight    : 700;
  line-height    : 1.04;
  letter-spacing : -0.02em;
  color          : var(--p-ink);
  margin         : 0;
  text-wrap      : balance;
}

.p-site p { margin: 0 0 1.15em; color: inherit; }
.p-site p:last-child { margin-bottom: 0; }

.p-site a { color: inherit; text-decoration: none; }

/* Foco visível - piso de qualidade, não decoração */
.p-site a:focus-visible,
.p-site button:focus-visible,
.p-site input:focus-visible,
.p-site textarea:focus-visible,
.p-site select:focus-visible,
.p-site [tabindex]:focus-visible {
  outline        : 3px solid var(--p-yellow);
  outline-offset : 3px;
  border-radius  : var(--p-radius);
}

.p-shell {
  width        : 100%;
  max-width    : var(--p-maxw);
  margin-inline: auto;
  padding-inline: var(--p-gutter);
}

/* --------------------------------------------------------------------------
   3. Assinatura - a linha de embarque
   -------------------------------------------------------------------------- */

/* Eyebrow: tique amarelo + rótulo mono. Marca o início de cada seção. */
.p-site .p-eyebrow,
.p-eyebrow {
  display        : inline-flex;
  align-items    : center;
  gap            : 0.7rem;
  font-family    : var(--p-mono);
  font-size      : var(--p-t-xs);
  font-weight    : 500;
  letter-spacing : 0.16em;
  text-transform : uppercase;
  color          : var(--p-yellow-700);
  margin-bottom  : 1.25rem;
}

.p-eyebrow::before {
  content    : '';
  width      : 28px;
  height     : 3px;
  background : var(--p-yellow);
  flex       : none;
}

/* Sobre fundo escuro o amarelo puro já tem contraste suficiente (11,8:1) */
.p-dark .p-eyebrow,
.p-hero .p-eyebrow,
.p-band .p-eyebrow { color: var(--p-yellow); }

/* Régua: linha contínua que atravessa a página */
.p-rule--hair {
  height     : 1px;
  background : var(--p-concrete-2);
}

.p-dark .p-rule--hair { background: rgba(255, 255, 255, 0.16); }

/* --------------------------------------------------------------------------
   4. Instrumento - os números do terminal
   -------------------------------------------------------------------------- */
.p-gauge {
  /* O respiro interno é o mesmo dos dois lados, e o grid inteiro é puxado para
     a esquerda pela mesma medida. Assim o texto descola da divisória sem que a
     primeira coluna perca o alinhamento com o resto da página - e continua
     certo quando o grid quebra em duas colunas no celular. */
  --gauge-pad          : clamp(1rem, 2vw, 1.5rem);
  display              : grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  border-top           : 3px solid var(--p-yellow);
  margin-left          : calc(-1 * var(--gauge-pad));
  /* Toda coluna desenha a divisória à direita; a da última coluna sobraria como
     um risco solto na borda. Como o auto-fit muda a quantidade de colunas com a
     largura, nenhum :nth-child acerta sempre - então o grid avança 1px e esconde
     essa última divisória no recorte. */
  margin-right         : -1px;
  overflow             : hidden;
}

.p-gauge__item {
  padding     : 1.75rem var(--gauge-pad);
  border-right: 1px solid var(--p-concrete-2);
}

.p-gauge__value {
  font-family     : var(--p-mono);
  font-size       : clamp(2rem, 3.4vw, 2.875rem);
  font-weight     : 600;
  line-height     : 1;
  letter-spacing  : -0.04em;
  color           : var(--p-ink);
  font-variant-numeric: tabular-nums;
  display         : block;
}

.p-gauge__unit {
  font-family    : var(--p-mono);
  font-size      : 0.875rem;
  font-weight    : 500;
  color          : var(--p-yellow-700);
  margin-left    : 0.35rem;
  letter-spacing : 0;
}

.p-gauge__label {
  display        : block;
  margin-top     : 0.75rem;
  font-size      : var(--p-t-sm);
  line-height    : 1.45;
  color          : var(--p-steel);
  max-width      : 22ch;
}

.p-dark .p-gauge { border-top-color: var(--p-yellow); }
.p-dark .p-gauge__item { border-right-color: rgba(255, 255, 255, 0.16); }
.p-dark .p-gauge__value { color: var(--p-paper); }
.p-dark .p-gauge__unit  { color: var(--p-yellow); }
.p-dark .p-gauge__label { color: rgba(255, 255, 255, 0.72); }

@media (max-width: 575px) {
  .p-gauge { grid-template-columns: 1fr 1fr; }
}

/* Tarifa - divulgação obrigatória, deliberadamente contida.
   Não usa .p-gauge (o componente de vitrine): o preço precisa constar por norma,
   não ser vendido. Sem régua amarela, sem número grande, sem negrito e sem
   título de seção - só o eyebrow "Tarifas". O valor tem peso e tamanho de texto
   corrido; o mono e a divisão valor/unidade é que o mantêm legível. */
.p-price {
  display     : flex;
  align-items : baseline;
  flex-wrap   : wrap;
  gap         : 0.15rem 0.5rem;
  margin      : 0;
}

.p-price__value {
  font-family         : var(--p-mono);
  font-size           : var(--p-t-body);
  font-weight         : 400;
  color               : var(--p-ink);
  font-variant-numeric: tabular-nums;
}

.p-price__unit {
  font-family : var(--p-mono);
  font-size   : var(--p-t-sm);
  color       : var(--p-steel);
}

.p-dark .p-price__value { color: var(--p-paper); }
.p-dark .p-price__unit  { color: rgba(255, 255, 255, 0.72); }

/* --------------------------------------------------------------------------
   5. Seções
   -------------------------------------------------------------------------- */
/* O template aplica `section { padding: 130px 0; background: #fff; overflow: hidden }`
   no seletor de elemento. Zeramos aqui para que o ritmo vertical venha só das
   classes .p-section - senão toda seção ganha 130px invisíveis de brinde. */
.p-site main section {
  padding         : 0;
  background-color: transparent;
  overflow        : visible;
}

/* Estas três recortam a própria mídia e precisam do overflow de volta. */
.p-site .p-hero,
.p-site .p-pagehead { overflow: hidden; }

/* O reset acima zera o fundo de toda <section>, inclusive destas duas, que
   têm texto branco. Se a foto não carregar, seria branco sobre branco. */
.p-site .p-hero,
.p-site .p-pagehead { background: var(--p-ink); }

/* Precisam de 2 classes para vencer `.p-site main section` (0,1,2). */
.p-site .p-section     { padding-block: var(--p-section); }
.p-site .p-section--sm { padding-block: var(--p-section-sm); }
.p-site .p-section--flush-top { padding-top: 0; }

 /* 2 classes: precisa vencer `.p-site main section` (0,1,2) do reset acima. */
.p-site .p-dark,
.p-dark {
  background : var(--p-ink);
  color      : rgba(255, 255, 255, 0.78);
}

.p-dark h1, .p-dark h2, .p-dark h3, .p-dark h4 { color: var(--p-paper); }

.p-site .p-tint,
.p-tint { background: var(--p-concrete); }

.p-lead {
  font-size  : clamp(1.0625rem, 1.4vw, 1.25rem);
  line-height: 1.6;
  color      : var(--p-steel);
  max-width  : 62ch;
}

/* Superfícies escuras: além do .p-dark, o cabeçalho de página, o herói e a
   banda também têm fundo marinho e precisam inverter o texto de apoio. */
.p-dark .p-lead,
.p-pagehead .p-lead,
.p-hero .p-lead,
.p-band .p-lead { color: rgba(255, 255, 255, 0.76); }

.p-prose { max-width: 68ch; }
.p-prose p { color: var(--p-steel); }
.p-dark .p-prose p,
.p-pagehead .p-prose p,
.p-hero .p-prose p,
.p-band .p-prose p { color: rgba(255, 255, 255, 0.76); }

/* Cabeçalho de seção */
.p-head { margin-bottom: clamp(2.5rem, 4vw, 3.75rem); }
.p-site .p-head__title { font-size: var(--p-t-xl); margin-bottom: 1.25rem; }
.p-head__lead  { margin-top: 0; }

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.p-hero {
  position   : relative;
  display    : flex;
  align-items: flex-end;
  min-height : min(92vh, 860px);
  background : var(--p-ink);
  color      : var(--p-paper);
}

.p-hero__media {
  position: absolute;
  inset   : 0;
  z-index : 0;
}

.p-hero__media img,
.p-hero__media video {
  width     : 100%;
  height    : 100%;
  object-fit: cover;
  display   : block;
}

/* Véu marinho: escurece o suficiente para o texto sem apagar a foto */
.p-hero__media::after {
  content   : '';
  position  : absolute;
  inset     : 0;
  background: linear-gradient(
    to top,
    rgba(var(--p-ink-rgb), 0.94) 0%,
    rgba(var(--p-ink-rgb), 0.72) 38%,
    rgba(var(--p-ink-rgb), 0.34) 70%,
    rgba(var(--p-ink-rgb), 0.30) 100%
  );
}

.p-hero__inner {
  position      : relative;
  z-index       : 1;
  width         : 100%;
  padding-bottom: clamp(3rem, 6vw, 5.5rem);
  padding-top   : clamp(7rem, 12vw, 10rem);
}

/* Escopado em .p-site: senão `.p-site h1` (0,1,1) vence e o título fica escuro. */
.p-site .p-hero__title {
  font-size  : var(--p-t-hero);
  color      : var(--p-paper);
  max-width  : 20ch;
}

.p-hero__title em {
  font-style        : normal;
  color             : var(--p-yellow);
  /* sublinhado que ecoa a régua */
  box-shadow        : inset 0 -0.14em 0 rgba(var(--p-yellow-rgb), 0.28);
}

.p-site .p-hero__lead {
  margin-top: 2.6rem;   /* folga para o sublinhado do destaque no título */
  max-width : 54ch;
  font-size : clamp(1.0625rem, 1.35vw, 1.25rem);
  color     : rgba(255, 255, 255, 0.84);
}

.p-hero__actions {
  display   : flex;
  flex-wrap : wrap;
  gap       : 0.875rem;
  margin-top: 2.25rem;
}


/* --------------------------------------------------------------------------
   7. Botões
   -------------------------------------------------------------------------- */
.p-btn {
  display        : inline-flex;
  align-items    : center;
  gap            : 0.65rem;
  padding        : 0.95rem 1.6rem;
  font-family    : var(--p-body);
  font-size      : var(--p-t-sm);
  font-weight    : 600;
  letter-spacing : 0.01em;
  border         : 2px solid transparent;
  border-radius  : var(--p-radius);
  cursor         : pointer;
  transition     : background 0.2s var(--p-ease), color 0.2s var(--p-ease),
                   border-color 0.2s var(--p-ease), transform 0.2s var(--p-ease);
}

.p-btn:hover { transform: translateY(-2px); }

.p-site .p-btn--primary {
  background  : var(--p-yellow);
  color       : var(--p-ink);
  border-color: var(--p-yellow);
}

.p-site .p-btn--primary:hover { background: #FFD75E; border-color: #FFD75E; color: var(--p-ink); }

.p-site .p-btn--ghost {
  background  : transparent;
  color       : var(--p-paper);
  border-color: rgba(255, 255, 255, 0.45);
}

.p-site .p-btn--ghost:hover { border-color: var(--p-paper); color: var(--p-paper); background: rgba(255,255,255,0.08); }

.p-site .p-btn--ink {
  background  : var(--p-ink);
  color       : var(--p-paper);
  border-color: var(--p-ink);
}

.p-site .p-btn--ink:hover { background: var(--p-navy-600); border-color: var(--p-navy-600); color: var(--p-paper); }

.p-site .p-site /* Link com seta */
.p-site .p-link {
  display        : inline-flex;
  align-items    : center;
  gap            : 0.5rem;
  font-weight    : 600;
  font-size      : var(--p-t-sm);
  color          : var(--p-ink);
  border-bottom  : 2px solid var(--p-yellow);
  padding-bottom : 2px;
  transition     : gap 0.2s var(--p-ease);
}

.p-site .p-link:hover { gap: 0.85rem; color: var(--p-ink); }
.p-site .p-dark .p-link { color: var(--p-paper); }
.p-site .p-dark .p-link:hover { color: var(--p-paper); }

/* --------------------------------------------------------------------------
   8. Bloco dividido - imagem + texto
   -------------------------------------------------------------------------- */
.p-split {
  display              : grid;
  grid-template-columns: 1fr 1fr;
  gap                  : clamp(2.5rem, 5vw, 5rem);
  align-items          : center;
}

/* min-width:0 impede que uma imagem larga estoure a coluna do grid e
   desequilibre as duas metades. */
.p-split > * { min-width: 0; }

.p-split--top { align-items: start; }

.p-split--reverse .p-split__media { order: 2; }

.p-split__media {
  position: relative;
}

.p-split__media img {
  width        : 100%;
  aspect-ratio : 4 / 3;
  object-fit   : cover;
  display      : block;
  border-radius: var(--p-radius);
}

/* Canto amarelo: recorta a foto com a mesma régua da marca */
.p-split__media::before {
  content   : '';
  position  : absolute;
  top       : -14px;
  left      : -14px;
  width     : 42%;
  height    : 3px;
  background: var(--p-yellow);
  z-index   : 1;
}

.p-split--reverse .p-split__media::before { left: auto; right: -14px; }

.p-site .p-split__title { font-size: var(--p-t-lg); margin-bottom: 1.5rem; }

@media (max-width: 860px) {
  .p-split { grid-template-columns: 1fr; }
  .p-split--reverse .p-split__media { order: 0; }
  .p-split__media::before { left: 0; top: -10px; }
  .p-split--reverse .p-split__media::before { right: auto; left: 0; }
}

/* --------------------------------------------------------------------------
   9. Cards
   -------------------------------------------------------------------------- */
.p-grid {
  display              : grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap                  : clamp(1.25rem, 2.2vw, 1.75rem);
}

.p-grid > * { min-width: 0; }

/* Quatro fases de expansão: sempre 4 / 2 / 1, nunca 3 + órfã. */
.p-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1023px) { .p-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px)  { .p-grid--4 { grid-template-columns: 1fr; } }

.p-card {
  display        : flex;
  flex-direction : column;
  background     : var(--p-paper);
  border         : 1px solid var(--p-concrete-2);
  border-radius  : var(--p-radius);
  overflow       : hidden;
  transition     : border-color 0.25s var(--p-ease), transform 0.25s var(--p-ease);
}

a.p-card:hover { border-color: var(--p-ink); transform: translateY(-4px); }

.p-card__media {
  aspect-ratio: 16 / 10;
  overflow    : hidden;
  background  : var(--p-concrete);
}

.p-card__media img {
  width     : 100%;
  height    : 100%;
  object-fit: cover;
  display   : block;
  transition: transform 0.5s var(--p-ease);
}

a.p-card:hover .p-card__media img { transform: scale(1.04); }

.p-card__body { padding: 1.75rem; flex: 1; display: flex; flex-direction: column; }

.p-site .p-card__title {
  font-size    : 1.25rem;
  margin-bottom: 0.75rem;
}

.p-card__text {
  font-size: var(--p-t-sm);
  color    : var(--p-steel);
  margin   : 0;
  flex     : 1;
}

.p-card__foot { margin-top: 1.5rem; }

/* Card sobre fundo escuro */
.p-dark .p-card {
  background  : rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.14);
}

.p-dark .p-card__text { color: rgba(255, 255, 255, 0.7); }
.p-dark a.p-card:hover { border-color: var(--p-yellow); }

/* --------------------------------------------------------------------------
   10. Cargas - o que passa pelo terminal
   -------------------------------------------------------------------------- */
.p-cargo {
  display              : grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap                  : 1px;
  background           : var(--p-concrete-2);
  border               : 1px solid var(--p-concrete-2);
}

.p-cargo__item {
  background: var(--p-paper);
  padding   : 2rem 1.5rem;
  text-align: center;
}

.p-cargo__name {
  font-family   : var(--p-display);
  font-stretch  : 112%;
  font-weight   : 700;
  font-size     : clamp(1.25rem, 1.9vw, 1.625rem);
  letter-spacing: -0.015em;
  display       : block;
}

.p-cargo__note {
  display    : block;
  margin-top : 0.4rem;
  font-family: var(--p-mono);
  font-size  : var(--p-t-xs);
  color      : var(--p-steel);
}

/* --------------------------------------------------------------------------
   11. Linha do tempo da expansão - a assinatura da Estrutura
   -------------------------------------------------------------------------- */
.p-timeline {
  display    : grid;
  gap        : clamp(2rem, 4vw, 3.5rem);
  border-top : 3px solid var(--p-yellow);
  padding-top: 0;
}

.p-phase {
  display              : grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
  gap                  : clamp(1.5rem, 4vw, 3rem);
  align-items          : start;
  padding-top          : clamp(2rem, 3.5vw, 3rem);
  position             : relative;
}

/* Espinha vertical: liga as fases e dá função à coluna do ano, que antes
   ficava vazia. O tique amarelo marca cada fase. */
.p-phase__mark {
  display      : block;
  position     : relative;
  padding-left : 2rem;
}

.p-phase__mark::before {
  content      : '';
  position     : absolute;
  left         : 0;
  top          : 0.75rem;
  width        : 11px;
  height       : 11px;
  background   : var(--p-yellow);
  border-radius: 50%;
  z-index      : 1;
}

/* A linha precisa cobrir a fase inteira e atravessar o intervalo até a
   próxima, então é ancorada na .p-phase, não no bloco do ano (que é curto). */
.p-phase::before {
  content   : '';
  position  : absolute;
  left      : 5px;
  top       : calc(clamp(2rem, 3.5vw, 3rem) + 0.75rem);
  /* alcança o marcador da fase seguinte: intervalo + padding + offset do ponto */
  bottom    : calc(-1 * (clamp(2rem, 4vw, 3.5rem) + clamp(2rem, 3.5vw, 3rem) + 0.75rem));
  width     : 1px;
  background: var(--p-concrete-2);
}

.p-phase:last-child::before { display: none; }

.p-phase__year {
  font-family         : var(--p-mono);
  font-size           : clamp(2.75rem, 4.6vw, 4.25rem);
  font-weight         : 600;
  line-height         : 0.95;
  letter-spacing      : -0.05em;
  color               : var(--p-ink);
  font-variant-numeric: tabular-nums;
  display             : block;
}

.p-phase__tag {
  display        : inline-block;
  margin-top     : 0.75rem;
  font-family    : var(--p-mono);
  font-size      : var(--p-t-xs);
  letter-spacing : 0.14em;
  text-transform : uppercase;
  color          : var(--p-yellow-700);
}

.p-site .p-phase__title { font-size: var(--p-t-md); margin: 1.25rem 0 0.85rem; }
.p-phase__text  { font-size: var(--p-t-sm); color: var(--p-steel); }

.p-phase__media { margin-top: 0; }

.p-phase__media img {
  width        : 100%;
  aspect-ratio : 16 / 9;
  object-fit   : cover;
  display      : block;
  border-radius: var(--p-radius);
}

@media (max-width: 860px) {
  .p-phase { grid-template-columns: 1fr; }
  /* empilhado, a linha passaria por trás da foto e ficaria picotada;
     os pontos sozinhos já marcam a sequência */
  .p-phase::before { display: none; }
}

/* --------------------------------------------------------------------------
   12. Galeria (certificados, ações sociais)
   -------------------------------------------------------------------------- */
.p-gallery {
  display              : grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap                  : clamp(1rem, 2vw, 1.5rem);
}

.p-gallery > * { min-width: 0; }

.p-gallery--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Documentos digitalizados têm texto miúdo: 3 colunas dão largura suficiente
   para o certificado ser legível, e 5 itens caem como 3+2 em vez de 4+1. */
.p-gallery--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 900px) { .p-gallery--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) {
  .p-gallery--2,
  .p-gallery--3 { grid-template-columns: 1fr; }
}

.p-figure {
  margin       : 0;
  background   : var(--p-paper);
  border       : 1px solid var(--p-concrete-2);
  border-radius: var(--p-radius);
  overflow     : hidden;
  display      : flex;
  flex-direction: column;
}

/* Certificados são documentos: enquadramento uniforme, fundo neutro,
   'contain' para não cortar carimbo nem assinatura. */
.p-figure__media {
  aspect-ratio   : 4 / 3;
  background     : var(--p-concrete);
  display        : flex;
  align-items    : center;
  justify-content: center;
  padding        : 1.25rem;
  /* sem estes dois, uma imagem em retrato ignora o aspect-ratio, estoura a
     caixa e estica a linha inteira do grid */
  min-height     : 0;
  overflow       : hidden;
}

.p-figure__media img {
  max-width : 100%;
  max-height: 100%;
  object-fit: contain;
  display   : block;
}

.p-figure__media--cover { padding: 0; }
.p-figure__media--cover img { width: 100%; height: 100%; object-fit: cover; max-height: none; }

.p-figure figcaption {
  padding    : 1.1rem 1.25rem;
  font-size  : var(--p-t-sm);
  line-height: 1.45;
  color      : var(--p-steel);
  border-top : 1px solid var(--p-concrete-2);
}

.p-figure figcaption strong {
  display    : block;
  color      : var(--p-ink);
  font-weight: 600;
  margin-bottom: 0.2rem;
}

/* --------------------------------------------------------------------------
   13. Lista de compromissos / itens com marcador
   -------------------------------------------------------------------------- */
.p-list { list-style: none; margin: 0; padding: 0; }

.p-list li {
  position     : relative;
  padding-left : 1.85rem;
  margin-bottom: 0.85rem;
  font-size    : var(--p-t-sm);
  color        : var(--p-steel);
  line-height  : 1.6;
}

.p-list li::before {
  content    : '';
  position   : absolute;
  left       : 0;
  top        : 0.62em;
  width      : 12px;
  height     : 2px;
  background : var(--p-yellow);
}

.p-dark .p-list li { color: rgba(255, 255, 255, 0.76); }

/* --------------------------------------------------------------------------
   15. Documentos para download
   -------------------------------------------------------------------------- */
.p-doc {
  display      : flex;
  align-items  : center;
  gap          : 1.25rem;
  padding      : 1.5rem;
  border       : 1px solid var(--p-concrete-2);
  border-radius: var(--p-radius);
  background   : var(--p-paper);
  transition   : border-color 0.2s var(--p-ease), transform 0.2s var(--p-ease);
}

a.p-doc:hover { border-color: var(--p-ink); transform: translateY(-3px); }

.p-doc__mark {
  flex          : none;
  width         : 46px;
  height        : 46px;
  display       : grid;
  place-items   : center;
  background    : var(--p-yellow);
  color         : var(--p-ink);
  font-family   : var(--p-mono);
  font-size     : 0.6875rem;
  font-weight   : 600;
  letter-spacing: 0.04em;
  border-radius : var(--p-radius);
}

/* display:block para título e meta empilharem dentro do <span> agrupador */
.p-doc__title { display: block; font-weight: 600; font-size: var(--p-t-sm); line-height: 1.4; }
.p-doc__meta  { display: block; font-family: var(--p-mono); font-size: var(--p-t-xs); color: var(--p-steel); margin-top: 0.25rem; }

/* pilha de documentos */
.p-docs {
  display              : grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap                  : clamp(1rem, 2vw, 1.25rem);
}

.p-docs > * { min-width: 0; }

/* --------------------------------------------------------------------------
   16. Cabeçalho de página interna
   -------------------------------------------------------------------------- */
.p-pagehead {
  position  : relative;
  background: var(--p-ink);
  color     : var(--p-paper);
}

.p-pagehead__media { position: absolute; inset: 0; z-index: 0; }

.p-pagehead__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

.p-pagehead__media::after {
  content   : '';
  position  : absolute;
  inset     : 0;
  /* precisa segurar também aéreas claras, não só fotos escuras */
  background: linear-gradient(
    100deg,
    rgba(var(--p-ink-rgb), 0.96) 0%,
    rgba(var(--p-ink-rgb), 0.88) 46%,
    rgba(var(--p-ink-rgb), 0.72) 100%
  );
}

.p-pagehead__inner {
  position      : relative;
  z-index       : 1;
  padding-top   : clamp(9rem, 15vw, 12rem);
  padding-bottom: clamp(3.5rem, 6vw, 5.5rem);
}

.p-site .p-pagehead__title { font-size: var(--p-t-xl); color: var(--p-paper); max-width: 20ch; }
.p-site .p-pagehead__lead { margin-top: 1.35rem; max-width: 56ch; color: rgba(255, 255, 255, 0.8); }

/* Migalha de pão */
.p-crumb {
  display       : flex;
  align-items   : center;
  gap           : 0.6rem;
  font-family   : var(--p-mono);
  font-size     : var(--p-t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color         : rgba(255, 255, 255, 0.62);
  margin-bottom : 1.5rem;
}

.p-crumb a:hover { color: var(--p-yellow); }
.p-crumb span[aria-hidden] { color: var(--p-yellow); }

/* --------------------------------------------------------------------------
   17. Acessibilidade / movimento
   -------------------------------------------------------------------------- */
.p-skip {
  position  : absolute;
  left      : -9999px;
  top       : 0;
  z-index   : 100000;
  background: var(--p-yellow);
  color     : var(--p-ink);
  padding   : 0.85rem 1.25rem;
  font-weight: 600;
}

.p-skip:focus { left: 0; }

/* Aditivo de propósito: o conteúdo nasce visível. O JS só "arma" o estado
   inicial quando tem certeza de que consegue revelá-lo depois. Sem JS, ou
   com JS quebrado, nada desaparece. */
.p-reveal {
  transition: opacity 0.7s var(--p-ease), transform 0.7s var(--p-ease);
}

.p-reveal.is-armed { opacity: 0; transform: translateY(18px); }
.p-reveal.is-armed.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .p-site *,
  .p-site *::before,
  .p-site *::after {
    animation-duration  : 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration : 0.001ms !important;
    scroll-behavior     : auto !important;
  }
  .p-reveal.is-armed { opacity: 1; transform: none; }
  .p-hero__media video { display: none; }
}

/* --------------------------------------------------------------------------
   18. Utilidades
   -------------------------------------------------------------------------- */
.p-narrow { max-width: 62ch; }

.p-mt-1 { margin-top: 1rem; }
.p-mt-2 { margin-top: 2rem; }
.p-mt-3 { margin-top: 3rem; }

/* ==========================================================================
   19. Chrome - cabeçalho, navegação e rodapé
   Sobrescreve o template. Mantém o markup Bootstrap (dropdowns funcionam),
   troca a pele.
   ========================================================================== */

/* ---- Navegação --------------------------------------------------------- */
.p-site .header,
.p-site .header.header-transparent {
  z-index: 10000;
}

.p-site .navbar {
  padding-block : 1.15rem;
  transition    : background 0.25s var(--p-ease), padding 0.25s var(--p-ease),
                  box-shadow 0.25s var(--p-ease);
  border-bottom : 1px solid transparent;
}

/* Estado sobre o herói: transparente */
.p-site .header-transparent .navbar:not(.navbar-fixed) {
  background: transparent;
}

/* Estado grudado: marinho sólido + régua amarela */
.p-site .navbar.navbar-fixed {
  background   : var(--p-ink);
  padding-block: 0.75rem;
  border-bottom: 3px solid var(--p-yellow);
  box-shadow   : 0 10px 40px rgba(var(--p-ink-rgb), 0.28);
  animation    : none;
}

/* A logo mantém o mesmo tamanho com o menu grudado. Antes ela encolhia para
   60px ao rolar, o que dava a impressão de a marca mudar de tamanho conforme
   a página - só o padding da barra diminui, para não comer tela demais. */
.p-site .navbar-brand img.logo { max-height: 76px; width: auto; }

/* O template separa os itens com margin-right:30px, que somava ao padding do
   link e abria ~60px entre as palavras. O espaçamento vem só do padding. */
.p-site .navbar .navbar-nav > li { margin-right: 0; }

/* Itens */
.p-site .navbar .navbar-nav > li > a,
.p-site .navbar .navbar-nav > li > a.nav-link {
  font-family   : var(--p-body);
  font-size     : 0.9375rem;
  font-weight   : 500;
  letter-spacing: 0.005em;
  color         : rgba(255, 255, 255, 0.86);
  padding       : 0.65rem 0.85rem;
  position      : relative;
  text-transform: none;
}

.p-site .navbar .navbar-nav > li > a:hover,
.p-site .navbar .navbar-nav > li.active > a {
  color: var(--p-paper);
}

/* Marcador amarelo - mesma régua da identidade.
   Desenhado como background do próprio rótulo: fica colado na palavra (o <a>
   do template é bem mais alto que o texto) e, por não mexer em display nem
   em caixa, não reflui a barra. */
.p-site .navbar .navbar-nav > li > a {
  white-space: nowrap;
}

/* O template desenha o próprio sublinhado no ::before do link, solto abaixo
   da barra. O caret do dropdown é ::after, então some só com o ::before. */
.p-site .navbar .navbar-nav > li > a::before {
  content: none;
}

.p-site .navbar .navbar-nav > li > a > span {
  background-image   : linear-gradient(var(--p-yellow), var(--p-yellow));
  background-repeat  : no-repeat;
  background-position : 0 100%;
  background-size    : 0% 2px;
  padding-bottom     : 5px;
  transition         : background-size 0.25s var(--p-ease);
}

.p-site .navbar .navbar-nav > li > a:hover > span,
.p-site .navbar .navbar-nav > li.active > a > span {
  background-size: 100% 2px;
}

/* O caret do dropdown do template */
.p-site .navbar .navbar-nav > li.dropdown > a.dropdown-toggle::before {
  border-top-color: currentColor;
}

/* Menu suspenso */
.p-site .navbar .dropdown-menu {
  background   : var(--p-paper);
  border       : 0;
  border-top   : 3px solid var(--p-yellow);
  border-radius: 0;
  box-shadow   : 0 24px 60px rgba(var(--p-ink-rgb), 0.22);
  padding      : 0.6rem 0;
  min-width    : 232px;
}

.p-site .navbar .dropdown-menu .dropdown-item {
  font-family: var(--p-body);
  font-size  : 0.9375rem;
  font-weight: 500;
  color      : var(--p-ink);
  padding    : 0.7rem 1.4rem;
  transition : background 0.18s var(--p-ease), padding 0.18s var(--p-ease);
}

.p-site .navbar .dropdown-menu .dropdown-item:hover {
  background  : var(--p-concrete);
  padding-left: 1.75rem;
  color       : var(--p-ink);
}

/* Botão de contato no menu */
.p-site .navbar .module-contact .btn,
.p-site .navbar .module-contact .btn--primary {
  width         : auto;
  background    : var(--p-yellow);
  border        : 2px solid var(--p-yellow);
  color         : var(--p-ink);
  font-family   : var(--p-body);
  font-size     : 0.9375rem;
  font-weight   : 600;
  letter-spacing: 0;
  border-radius : var(--p-radius);
  padding       : 0.7rem 1.5rem;
  text-transform: none;
  /* o .btn do template herda line-height alto e joga o rótulo para baixo */
  line-height   : 1.2;
  display       : inline-flex;
  align-items   : center;
}

.p-site .navbar .module-contact .btn:hover {
  background  : #FFD75E;
  border-color: #FFD75E;
  color       : var(--p-ink);
}

/* Hambúrguer */
.p-site .navbar-toggler {
  border       : 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--p-radius);
  padding      : 0.55rem 0.7rem;
}

/* Menu colapsado no mobile */
@media (max-width: 991px) {
  .p-site .navbar { background: var(--p-ink); border-bottom: 3px solid var(--p-yellow); }
  .p-site .navbar .navbar-collapse {
    background : var(--p-ink);
    padding    : 1rem 0 1.5rem;
    margin-top : 1rem;
    border-top : 1px solid rgba(255, 255, 255, 0.12);
  }
  .p-site .navbar .navbar-nav > li > a { padding-inline: 0; }
  .p-site .navbar .dropdown-menu {
    background : transparent;
    border-top : 0;
    box-shadow : none;
    padding    : 0 0 0.5rem 0.9rem;
  }
  .p-site .navbar .dropdown-menu .dropdown-item { color: rgba(255, 255, 255, 0.76); padding-inline: 0; }
  .p-site .navbar .dropdown-menu .dropdown-item:hover { background: transparent; color: var(--p-yellow); padding-left: 0.4rem; }
  .p-site .navbar .module-contact { margin-top: 1.25rem; }
}

/* ---- Rodapé ------------------------------------------------------------ */
.p-site .footer.footer-pasa {
  background: var(--p-ink);
  position  : relative;
  border-top: 3px solid var(--p-yellow);
}

/* neutraliza os ornamentos do template */
.p-site .footer.footer-pasa::before,
.p-site .footer.footer-pasa::after {
  display: none;
}

.p-site .footer.footer-pasa .footer-main {
  padding: clamp(3.5rem, 6vw, 5.5rem) 0 clamp(2rem, 3vw, 3rem);
}

/* Mesma altura da logo do cabeçalho, para a marca não encolher no rodapé. */
.p-site .footer.footer-pasa .footer-brand img { max-height: 76px; width: auto; }

.p-site .footer.footer-pasa .footer-desc {
  font-family: var(--p-body);
  font-size  : var(--p-t-sm);
  line-height: 1.6;
  color      : rgba(255, 255, 255, 0.66);
  max-width  : 38ch;
  margin-top : 1.5rem;
}

.p-site .footer.footer-pasa .footer-title {
  font-family   : var(--p-mono);
  font-size     : var(--p-t-xs);
  font-weight   : 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color         : var(--p-yellow);
  margin-bottom : 1.35rem;
}

.p-site .footer.footer-pasa .footer-title::after { display: none; }

.p-site .footer.footer-pasa .footer-links li,
.p-site .footer.footer-pasa .footer-contact li {
  margin-bottom: 0.7rem;
}

.p-site .footer.footer-pasa .footer-links a,
.p-site .footer.footer-pasa .footer-contact a,
.p-site .footer.footer-pasa .footer-contact span {
  font-family: var(--p-body);
  font-size  : var(--p-t-sm);
  color      : rgba(255, 255, 255, 0.72);
  transition : color 0.2s var(--p-ease);
}

.p-site .footer.footer-pasa .footer-links a:hover,
.p-site .footer.footer-pasa .footer-contact a:hover {
  color: var(--p-yellow);
}

.p-site .footer.footer-pasa .footer-contact li i {
  color: var(--p-yellow);
}

.p-site .footer.footer-pasa .footer-contact small {
  color    : rgba(255, 255, 255, 0.5);
  font-size: var(--p-t-xs);
}

.p-site .footer.footer-pasa .footer-social a {
  border       : 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--p-radius);
  color        : rgba(255, 255, 255, 0.8);
  transition   : background 0.2s var(--p-ease), color 0.2s var(--p-ease), border-color 0.2s var(--p-ease);
}

.p-site .footer.footer-pasa .footer-social a:hover {
  background  : var(--p-yellow);
  border-color: var(--p-yellow);
  color       : var(--p-ink);
}

.p-site .footer.footer-pasa .footer-bottom {
  border-top   : 1px solid rgba(255, 255, 255, 0.12);
  padding-block: 1.5rem;
}

.p-site .footer.footer-pasa .footer-copy,
.p-site .footer.footer-pasa .footer-bottom a {
  font-family: var(--p-mono);
  font-size  : var(--p-t-xs);
  color      : rgba(255, 255, 255, 0.5);
}

.p-site .footer.footer-pasa .footer-bottom a:hover { color: var(--p-yellow); }

/* ==========================================================================
   20. Banda com foto de fundo
   Compõe com .p-dark: <section class="p-band p-dark p-section">.
   O .p-dark cuida de cor e texto; aqui só entra a camada de imagem.
   ========================================================================== */
.p-band { position: relative; }

.p-site .p-band { overflow: hidden; }

.p-band__media {
  position: absolute;
  inset   : 0;
  z-index : 0;
}

.p-band__media img {
  width     : 100%;
  height    : 100%;
  object-fit: cover;
  display   : block;
}

.p-band__media::after {
  content   : '';
  position  : absolute;
  inset     : 0;
  background: linear-gradient(
    100deg,
    rgba(var(--p-ink-rgb), 0.95) 0%,
    rgba(var(--p-ink-rgb), 0.86) 52%,
    rgba(var(--p-ink-rgb), 0.62) 100%
  );
}

.p-band > .p-shell { position: relative; z-index: 1; }

/* ==========================================================================
   21. Declaração - missão, visão, frase de posicionamento
   Para UMA frase que a empresa assina. Não use para texto corrido.
   ========================================================================== */
.p-statement {
  font-family   : var(--p-display);
  font-stretch  : 112%;
  font-weight   : 700;
  font-size     : var(--p-t-lg);
  line-height   : 1.14;
  letter-spacing: -0.02em;
  color         : var(--p-ink);
  max-width     : 26ch;
  border-left   : 3px solid var(--p-yellow);
  padding-left  : clamp(1.25rem, 2.5vw, 2rem);
  margin        : 0;
}

.p-statement__cite {
  display       : block;
  margin-top    : 1.35rem;
  font-family   : var(--p-mono);
  font-size     : var(--p-t-xs);
  font-weight   : 500;
  font-style    : normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color         : var(--p-yellow-700);
}

.p-dark .p-statement { color: var(--p-paper); }
.p-dark .p-statement__cite { color: var(--p-yellow); }

/* ==========================================================================
   22. Conteúdo de terceiro com carregamento sob clique
   Serve vídeo do YouTube e mapa do Google. A prévia é servida do nosso
   domínio; o terceiro só é contatado depois que a pessoa clica. Mesma razão
   pela qual as fontes são auto-hospedadas.
   ========================================================================== */
.p-embed {
  position: relative;
}

.p-embed__frame {
  position     : relative;
  aspect-ratio : 16 / 9;
  overflow     : hidden;
  background   : var(--p-ink);
  border-radius: var(--p-radius);
}

.p-embed__frame iframe {
  position: absolute;
  inset   : 0;
  width   : 100%;
  height  : 100%;
  border  : 0;
}

.p-embed__trigger {
  position   : absolute;
  inset      : 0;
  width      : 100%;
  height     : 100%;
  padding    : 0;
  border     : 0;
  background : none;
  cursor     : pointer;
  display    : block;
  color      : var(--p-paper);
}

.p-embed__poster {
  width     : 100%;
  height    : 100%;
  object-fit: cover;
  display   : block;
  transition: transform 0.6s var(--p-ease), opacity 0.3s var(--p-ease);
}

.p-embed__trigger:hover .p-embed__poster { transform: scale(1.03); opacity: 0.85; }

.p-embed__play {
  position       : absolute;
  top            : 50%;
  left           : 50%;
  transform      : translate(-50%, -50%);
  width          : clamp(64px, 7vw, 88px);
  height         : clamp(64px, 7vw, 88px);
  border-radius  : 50%;
  background     : var(--p-yellow);
  display        : grid;
  place-items    : center;
  transition     : transform 0.25s var(--p-ease);
}

.p-embed__trigger:hover .p-embed__play { transform: translate(-50%, -50%) scale(1.08); }

/* triângulo de play, deslocado para parecer centrado */
.p-embed__play::before {
  content      : '';
  width        : 0;
  height       : 0;
  margin-left  : 6px;
  border-top   : 13px solid transparent;
  border-bottom: 13px solid transparent;
  border-left  : 21px solid var(--p-ink);
}

/* no mapa, o gatilho vira alfinete */
.p-embed--map .p-embed__play::before {
  width        : 16px;
  height       : 16px;
  margin-left  : 0;
  border       : 5px solid var(--p-ink);
  border-radius: 50%;
  background   : transparent;
}

/* véu inferior: o rótulo precisa ser legível também sobre prévia clara */
.p-embed__trigger::after {
  content       : '';
  position      : absolute;
  left          : 0;
  right         : 0;
  bottom        : 0;
  height        : 38%;
  background    : linear-gradient(to top, rgba(var(--p-ink-rgb), 0.78), transparent);
  pointer-events: none;
  z-index       : 1;
}

.p-embed__label {
  z-index       : 2;
  position      : absolute;
  left          : clamp(1.25rem, 3vw, 2rem);
  bottom        : clamp(1.25rem, 3vw, 2rem);
  right         : clamp(1.25rem, 3vw, 2rem);
  text-align    : left;
  font-family   : var(--p-mono);
  font-size     : var(--p-t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color         : var(--p-paper);
  text-shadow   : 0 2px 14px rgba(var(--p-ink-rgb), 0.8);
}

.p-site .p-embed__note {
  margin-top : 1rem;
  font-size  : var(--p-t-xs);
  color      : var(--p-steel);
}

.p-dark .p-embed__note { color: rgba(255, 255, 255, 0.6); }

/* ==========================================================================
   23. Dados de contato
   ========================================================================== */
.p-contato {
  display   : grid;
  gap       : 1.75rem;
  margin-top: 2rem;
}

.p-contato__item {
  padding-top: 1.25rem;
  border-top : 1px solid var(--p-concrete-2);
}

.p-contato__rotulo {
  display       : block;
  font-family   : var(--p-mono);
  font-size     : var(--p-t-xs);
  font-weight   : 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color         : var(--p-yellow-700);
  margin-bottom : 0.6rem;
}

.p-site .p-contato__valor {
  margin     : 0;
  font-size  : var(--p-t-body);
  line-height: 1.6;
  color      : var(--p-ink);
}

.p-contato__valor a { border-bottom: 2px solid var(--p-yellow); padding-bottom: 1px; }
.p-contato__valor a:hover { color: var(--p-ink); background: rgba(var(--p-yellow-rgb), 0.18); }

/* ==========================================================================
   24. Formulário
   ========================================================================== */
.p-form { margin-top: 2rem; }

.p-form__campo { margin-bottom: 1.25rem; }

.p-form__linha {
  display              : grid;
  grid-template-columns: 1fr 1fr;
  gap                  : 1.25rem;
}

.p-form__linha > * { min-width: 0; }

@media (max-width: 559px) {
  .p-form__linha { grid-template-columns: 1fr; }
}

.p-form__rotulo {
  display       : block;
  font-family   : var(--p-mono);
  font-size     : var(--p-t-xs);
  font-weight   : 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color         : var(--p-steel);
  margin-bottom : 0.5rem;
}

/* .form-control do template traz borda arredondada e sombra; aqui é reto */
.p-site .p-form__entrada {
  width        : 100%;
  height       : auto;
  padding      : 0.9rem 1rem;
  font-family  : var(--p-body);
  font-size    : var(--p-t-body);
  color        : var(--p-ink);
  background   : var(--p-paper);
  border       : 1px solid var(--p-concrete-2);
  border-radius: var(--p-radius);
  box-shadow   : none;
  transition   : border-color 0.2s var(--p-ease);
}

.p-site .p-form__entrada:focus {
  border-color: var(--p-ink);
  box-shadow  : none;
  outline     : 3px solid var(--p-yellow);
  outline-offset: 2px;
}

.p-site textarea.p-form__entrada { resize: vertical; min-height: 140px; }

.p-site .p-form__entrada::placeholder { color: var(--p-steel); opacity: 0.7; }

/* ==========================================================================
   25. Canal de denúncias
   Página de ação única: as garantias e o botão são o conteúdo inteiro.
   ========================================================================== */
.p-denuncia { max-width: 62ch; }

.p-denuncia__garantias { margin-top: 2rem; }

.p-site .p-denuncia__garantias li {
  font-size    : var(--p-t-body);
  padding-left : 2.1rem;
  margin-bottom: 1rem;
}

.p-denuncia__garantias li::before {
  width : 16px;
  height: 3px;
  top   : 0.72em;
}

.p-site .p-denuncia__nota {
  margin-top: 1.5rem;
  font-size : var(--p-t-sm);
  color     : rgba(255, 255, 255, 0.6);
  max-width : 52ch;
}

/* Botão maior: é a única ação da página */
.p-btn--grande {
  padding  : 1.15rem 2.1rem;
  font-size: var(--p-t-body);
}

/* ==========================================================================
   26. Documento jurídico
   Texto longo e numerado: índice fixo à esquerda, medida de leitura curta
   à direita. A numeração aqui é legítima: as seções são numeradas no
   próprio documento e as pessoas citam "item 5".
   ========================================================================== */
.p-juridico {
  display              : grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap                  : clamp(2rem, 5vw, 4.5rem);
  align-items          : start;
}

.p-indice {
  position : sticky;
  top      : 10.5rem;
  max-height: calc(100vh - 9rem);
  overflow-y: auto;
  padding-top: 1.5rem;
  border-top : 3px solid var(--p-yellow);
}

.p-indice__lista {
  list-style: none;
  margin    : 0;
  padding   : 0;
  counter-reset: none;
}

.p-indice__item { margin-bottom: 0.15rem; }

.p-indice__link {
  display    : grid;
  grid-template-columns: 2.4rem 1fr;
  gap        : 0.35rem;
  padding    : 0.5rem 0.6rem 0.5rem 0;
  align-items: baseline;
  border-radius: var(--p-radius);
  transition : background 0.18s var(--p-ease), color 0.18s var(--p-ease);
}

.p-indice__link:hover { background: var(--p-concrete); }

.p-indice__num {
  font-family         : var(--p-mono);
  font-size           : var(--p-t-xs);
  font-variant-numeric: tabular-nums;
  color               : var(--p-yellow-700);
}

.p-indice__texto {
  font-size  : var(--p-t-sm);
  line-height: 1.4;
  color      : var(--p-steel);
}

.p-indice__link:hover .p-indice__texto { color: var(--p-ink); }

/* Artigo */
.p-artigo {
  padding-top   : clamp(2rem, 3.5vw, 3rem);
  margin-bottom : clamp(2rem, 3.5vw, 3rem);
  border-top    : 1px solid var(--p-concrete-2);
  /* o cabeçalho fixo mede ~148px; menos que isso e ele cobre o número da seção */
  scroll-margin-top: 10.5rem;
}

.p-artigo:first-child { border-top: 0; padding-top: 0; }

.p-site .p-artigo__num {
  font-family         : var(--p-mono);
  font-size           : var(--p-t-xs);
  font-weight         : 500;
  letter-spacing      : 0.16em;
  color               : var(--p-yellow-700);
  font-variant-numeric: tabular-nums;
  margin-bottom       : 0.75rem;
}

.p-site .p-artigo__titulo {
  font-size    : var(--p-t-md);
  margin-bottom: 1.25rem;
  max-width    : 30ch;
}

/* Medida de leitura confortável para texto corrido longo */
.p-artigo p,
.p-artigo li {
  max-width: 68ch;
  color    : var(--p-steel);
}

.p-artigo p { margin-bottom: 1.15em; }

.p-artigo strong { color: var(--p-ink); font-weight: 600; }

.p-artigo ul { margin: 0 0 1.5rem; }

@media (max-width: 900px) {
  .p-juridico { grid-template-columns: 1fr; }
  .p-indice {
    position  : static;
    max-height: none;
    margin-bottom: 2.5rem;
  }
}

/* ==========================================================================
   27. Vagas (Trabalhe Conosco)
   Os nomes de classe vêm do markup gerado em JS (careers.html) e não podem
   mudar: o script escreve `job-card`, `dept-badge` etc. na mão. Aqui só a
   pele é trocada, para os tokens da identidade.
   ========================================================================== */

/* ---- Filtros ---- */
.careers-filters { margin-bottom: clamp(2rem, 4vw, 3rem); }

.filter-row {
  display    : grid;
  /* os rótulos dos filtros são longos ('Todos os departamentos'); a busca
     cede espaço para eles não truncarem */
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 3fr);
  gap        : 1rem;
  align-items: center;
}

.filter-row > * { min-width: 0; }

/* três selects + o botão Limpar, que no markup é filho deste grupo.
   As colunas seguem o tamanho dos rótulos: "Todos os departamentos" é bem
   mais longo que "Todos os tipos", e colunas iguais truncavam o primeiro. */
.filter-group {
  display              : grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 0.95fr) auto;
  gap                  : 1rem;
}

.filter-search, .filter-select { position: relative; }

.filter-search i {
  position : absolute;
  left     : 1rem;
  top      : 50%;
  transform: translateY(-50%);
  color    : var(--p-yellow-700);
  font-size: 0.875rem;
  pointer-events: none;
}

/* o ícone do select repetia o que o próprio rótulo diz e comia 1,6rem de
   texto, truncando "Todos os departamentos" */
.filter-select i { display: none; }

.p-site .filter-search input,
.p-site .filter-select select {
  width        : 100%;
  height       : auto;
  padding      : 0.9rem 1rem;
  font-family  : var(--p-body);
  font-size    : var(--p-t-sm);
  color        : var(--p-ink);
  background   : var(--p-paper);
  border       : 1px solid var(--p-concrete-2);
  border-radius: var(--p-radius);
  box-shadow   : none;
  appearance   : none;
  -webkit-appearance: none;
}

.p-site .filter-search input { padding-left: 2.6rem; }

/* seta do select nativo, desenhada com gradiente para seguir a paleta */
.p-site .filter-select select {
  padding-right       : 2.4rem;
  background-image    : linear-gradient(45deg, transparent 50%, var(--p-yellow-700) 50%),
                        linear-gradient(135deg, var(--p-yellow-700) 50%, transparent 50%);
  background-position : calc(100% - 1.15rem) center, calc(100% - 0.75rem) center;
  background-size     : 6px 6px, 6px 6px;
  background-repeat   : no-repeat;
}

.p-site .filter-search input:focus,
.p-site .filter-select select:focus {
  border-color  : var(--p-ink);
  outline       : 3px solid var(--p-yellow);
  outline-offset: 2px;
}

.p-site .filter-clear {
  padding      : 0.9rem 1.2rem;
  font-family  : var(--p-body);
  font-size    : var(--p-t-sm);
  font-weight  : 600;
  color        : var(--p-ink);
  background   : transparent;
  border       : 1px solid var(--p-concrete-2);
  border-radius: var(--p-radius);
  cursor       : pointer;
  white-space  : nowrap;
  transition   : border-color 0.2s var(--p-ease);
}

.p-site .filter-clear:hover { border-color: var(--p-ink); }

@media (max-width: 1100px) {
  .filter-row   { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .filter-group { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .filter-group { grid-template-columns: 1fr; }
}

/* ---- Card de vaga ---- */
/* Grid próprio: o .row/.col do Bootstrap não dá espaço entre linhas, então
   com mais de 3 vagas a segunda fileira colava na primeira. */
.jobs-grid {
  display              : grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap                  : clamp(1.25rem, 2.2vw, 1.75rem);
}

.jobs-grid > * { min-width: 0; }

.job-card {
  display       : flex;
  flex-direction: column;
  height        : 100%;
  padding       : 1.75rem;
  background    : var(--p-paper);
  border        : 1px solid var(--p-concrete-2);
  border-radius : var(--p-radius);
  transition    : border-color 0.25s var(--p-ease), transform 0.25s var(--p-ease);
}

.job-card:hover { border-color: var(--p-ink); transform: translateY(-4px); }

.job-card-head {
  display     : flex;
  flex-wrap   : wrap;
  gap         : 0.5rem;
  margin-bottom: 1.1rem;
}

/* O JS injeta --dept-color/--dept-bg por departamento. A identidade tem um
   acento só, então as variáveis são ignoradas de propósito. */
.dept-badge, .type-badge {
  font-family   : var(--p-mono);
  font-size     : var(--p-t-xs);
  font-weight   : 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding       : 0.35rem 0.7rem;
  border-radius : var(--p-radius);
}

.dept-badge { background: rgba(var(--p-yellow-rgb), 0.22); color: var(--p-yellow-700); }
.type-badge { background: var(--p-concrete); color: var(--p-steel); }

.p-site .job-title { font-size: 1.25rem; margin-bottom: 0.85rem; }
.p-site .job-title a { color: var(--p-ink); }
.job-card:hover .job-title a { color: var(--p-ink); }

.job-location {
  display    : flex;
  align-items: center;
  gap        : 0.5rem;
  font-size  : var(--p-t-sm);
  color      : var(--p-steel);
  margin-bottom: 0.85rem;
}

.job-location i { color: var(--p-yellow-700); }

.p-site .job-desc {
  font-size: var(--p-t-sm);
  color    : var(--p-steel);
  flex     : 1;
  margin   : 0 0 1.5rem;
}

.job-card-foot {
  display    : flex;
  flex-wrap  : wrap;
  gap        : 1rem;
  align-items: center;
  padding-top: 1.25rem;
  border-top : 1px solid var(--p-concrete-2);
}

.p-site .job-apply {
  display      : inline-flex;
  align-items  : center;
  gap          : 0.5rem;
  padding      : 0.7rem 1.25rem;
  font-family  : var(--p-body);
  font-size    : var(--p-t-sm);
  font-weight  : 600;
  color        : var(--p-ink);
  background   : var(--p-yellow);
  border       : 2px solid var(--p-yellow);
  border-radius: var(--p-radius);
  cursor       : pointer;
  transition   : background 0.2s var(--p-ease);
}

.p-site .job-apply:hover { background: #FFD75E; border-color: #FFD75E; }

.p-site .job-card-details {
  display      : inline-flex;
  align-items  : center;
  gap          : 0.45rem;
  font-size    : var(--p-t-sm);
  font-weight  : 600;
  color        : var(--p-ink);
  border-bottom: 2px solid var(--p-yellow);
  padding-bottom: 2px;
}

/* ---- Estado vazio ---- */
.p-site #jobsEmpty {
  padding      : clamp(2.5rem, 5vw, 4rem) 1.5rem;
  text-align   : center;
  background   : var(--p-concrete);
  border-radius: var(--p-radius);
}

.p-site #jobsEmpty h4 { font-size: var(--p-t-md); margin-bottom: 0.75rem; }
.p-site #jobsEmpty p  { color: var(--p-steel); max-width: 46ch; margin-inline: auto; }

/* ---- Modal de candidatura ----------------------------------------------
   Base vem do modal do Bootstrap (vendor.min.css); aqui só o miolo. */
.p-site #modalCandidatura .modal-content {
  border       : 0;
  border-radius: var(--p-radius);
  border-top   : 3px solid var(--p-yellow);
  box-shadow   : 0 30px 90px rgba(var(--p-ink-rgb), 0.35);
}

.p-site #modalCandidatura .modal-header {
  display        : flex;
  align-items    : flex-start;
  justify-content: space-between;
  gap            : 1.5rem;
  padding        : 1.75rem 1.75rem 1.25rem;
  border-bottom  : 1px solid var(--p-concrete-2);
}

.modal-header-text { flex: 1; min-width: 0; }

.modal-kicker {
  display       : block;
  font-family   : var(--p-mono);
  font-size     : var(--p-t-xs);
  font-weight   : 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color         : var(--p-yellow-700);
  margin-bottom : 0.5rem;
}

.p-site #modalCandidatura .modal-title {
  font-family : var(--p-display);
  font-stretch: 112%;
  font-weight : 700;
  font-size   : var(--p-t-md);
  color       : var(--p-ink);
}

.modal-meta {
  display    : flex;
  flex-wrap  : wrap;
  align-items: center;
  gap        : 0.6rem;
  margin-top : 0.7rem;
  font-family: var(--p-mono);
  font-size  : var(--p-t-xs);
  color      : var(--p-steel);
}

.meta-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--p-yellow); }

.p-site .modal-close {
  flex         : none;
  width        : 40px;
  height       : 40px;
  display      : grid;
  place-items  : center;
  background   : var(--p-concrete);
  border       : 0;
  border-radius: var(--p-radius);
  color        : var(--p-ink);
  cursor       : pointer;
  transition   : background 0.2s var(--p-ease);
}

.p-site .modal-close:hover { background: var(--p-yellow); }

.p-site #modalCandidatura .modal-body { padding: 1.75rem; }

/* ---- Formulário do modal ---- */
#candidaturaForm .form-row {
  display              : grid;
  grid-template-columns: 1fr 1fr;
  gap                  : 1.25rem;
}

#candidaturaForm .form-row > * { min-width: 0; max-width: 100%; flex: none; padding: 0; }

#candidaturaForm .form-group { margin-bottom: 1.25rem; }

#candidaturaForm label {
  display       : block;
  font-family   : var(--p-mono);
  font-size     : var(--p-t-xs);
  font-weight   : 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color         : var(--p-steel);
  margin-bottom : 0.5rem;
}

#candidaturaForm .req { color: var(--p-yellow-700); }
#candidaturaForm .opt { text-transform: none; letter-spacing: 0; color: var(--p-steel); opacity: 0.8; }

.p-site #candidaturaForm .form-input,
.p-site #candidaturaForm textarea {
  width        : 100%;
  padding      : 0.9rem 1rem;
  font-family  : var(--p-body);
  font-size    : var(--p-t-body);
  color        : var(--p-ink);
  background   : var(--p-paper);
  border       : 1px solid var(--p-concrete-2);
  border-radius: var(--p-radius);
  box-shadow   : none;
}

.p-site #candidaturaForm .form-input:focus,
.p-site #candidaturaForm textarea:focus {
  border-color  : var(--p-ink);
  outline       : 3px solid var(--p-yellow);
  outline-offset: 2px;
}

/* ---- Área de arrastar arquivo ---- */
.file-dropzone {
  padding      : clamp(1.75rem, 4vw, 2.5rem) 1.5rem;
  text-align   : center;
  background   : var(--p-concrete);
  border       : 2px dashed var(--p-concrete-2);
  border-radius: var(--p-radius);
  cursor       : pointer;
  transition   : border-color 0.2s var(--p-ease), background 0.2s var(--p-ease);
}

.file-dropzone:hover,
.file-dropzone.dragover { border-color: var(--p-yellow); background: rgba(var(--p-yellow-rgb), 0.08); }

.dropzone-icon { font-size: 1.75rem; color: var(--p-yellow-700); margin-bottom: 0.75rem; }

.p-site .dropzone-text { font-size: var(--p-t-sm); color: var(--p-ink); margin-bottom: 0.35rem; }
.p-site .dropzone-text span { font-weight: 600; border-bottom: 2px solid var(--p-yellow); }
.p-site .dropzone-hint { font-family: var(--p-mono); font-size: var(--p-t-xs); color: var(--p-steel); margin: 0; }

.file-selected {
  display      : flex;
  align-items  : center;
  gap          : 1rem;
  padding      : 1rem 1.25rem;
  background   : var(--p-paper);
  border       : 1px solid var(--p-concrete-2);
  border-radius: var(--p-radius);
}

.file-icon { color: var(--p-yellow-700); font-size: 1.25rem; }
.file-info { flex: 1; min-width: 0; }
.file-name { font-size: var(--p-t-sm); font-weight: 600; color: var(--p-ink); word-break: break-all; }
.file-size { font-family: var(--p-mono); font-size: var(--p-t-xs); color: var(--p-steel); }

.p-site .file-remove {
  flex: none; width: 34px; height: 34px;
  display: grid; place-items: center;
  background: var(--p-concrete); border: 0; border-radius: var(--p-radius);
  color: var(--p-ink); cursor: pointer;
}

.p-site .file-remove:hover { background: var(--p-yellow); }

@media (max-width: 575px) {
  #candidaturaForm .form-row { grid-template-columns: 1fr; }
}

/* ---- Cabeçalho da lista de vagas ---- */
.p-vagas-topo {
  display        : flex;
  flex-wrap      : wrap;
  align-items    : end;
  justify-content: space-between;
  gap            : 1.5rem;
  padding-bottom : 1.5rem;
  margin-bottom  : clamp(2rem, 4vw, 3rem);
  border-bottom  : 3px solid var(--p-yellow);
}

.p-vagas-topo .p-prose { margin: 0; max-width: 56ch; }

.p-site .p-vagas-contador {
  margin              : 0;
  font-family         : var(--p-mono);
  font-size           : clamp(1.5rem, 2.4vw, 2rem);
  font-weight         : 600;
  color               : var(--p-ink);
  font-variant-numeric: tabular-nums;
  white-space         : nowrap;
}

.p-vagas-contador__rotulo {
  font-size     : var(--p-t-xs);
  font-weight   : 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color         : var(--p-yellow-700);
}


/* ---- Chamada final e botões do template dentro do conteúdo ---- */
.careers-cta {
  margin-top   : clamp(2.5rem, 5vw, 4rem);
  padding      : clamp(2rem, 4vw, 3rem);
  background   : var(--p-ink);
  border-radius: var(--p-radius);
  border-top   : 3px solid var(--p-yellow);
}

.p-site .careers-cta h3 {
  font-size    : var(--p-t-lg);
  color        : var(--p-paper);
  max-width    : 24ch;
  margin-bottom: 1.25rem;
}

.p-site .careers-cta p { color: rgba(255, 255, 255, 0.72); max-width: 52ch; }
.p-site .careers-cta p strong { color: var(--p-yellow); font-weight: 600; }

/* O markup usa .btn.btn--primary do template em dois pontos do conteúdo
   (chamada final e estado vazio); recebem a mesma pele do .p-btn--primary. */
/* o template fixa `.btn { width: 170px }`, o que cortava "Enviar currículo" */
.p-site main .btn.btn--primary {
  width         : auto;
  white-space   : nowrap;
  display       : inline-flex;
  align-items   : center;
  gap           : 0.6rem;
  padding       : 0.95rem 1.6rem;
  font-family   : var(--p-body);
  font-size     : var(--p-t-sm);
  font-weight   : 600;
  line-height   : 1.2;
  text-transform: none;
  letter-spacing: 0;
  color         : var(--p-ink);
  background    : var(--p-yellow);
  border        : 2px solid var(--p-yellow);
  border-radius : var(--p-radius);
  transition    : background 0.2s var(--p-ease), transform 0.2s var(--p-ease);
}

.p-site main .btn.btn--primary:hover {
  background  : #FFD75E;
  border-color: #FFD75E;
  color       : var(--p-ink);
  transform   : translateY(-2px);
}


/* Campo da vaga: só-leitura quando vem de uma vaga, editável na candidatura
   espontânea. O estado precisa se ver, senão a pessoa não percebe que pode
   escrever. */
.p-site #candidaturaForm .form-input--readonly {
  background: var(--p-concrete);
  color     : var(--p-steel);
  cursor    : default;
}

/* ==========================================================================
   28. Modais acima do cabeçalho
   O header do site está em z-index 10000 (necessário para vencer os cards do
   template, que vêm com 9999). O modal do Bootstrap usa 1050, então o menu
   aparecia por cima dele, com o texto vazando pelo cabeçalho do modal.
   ========================================================================== */
/* Acima também do banner de cookies (99998, no custom.css): ele fica fixo no
   rodapé da janela e cobria justamente o consentimento e o botão de enviar do
   formulário de candidatura, para quem ainda não tinha aceitado os cookies. */
.p-site .modal-backdrop { z-index: 99999; }
.p-site .modal          { z-index: 100000; }

/* ==========================================================================
   29. Caixa de seleção (consentimento)
   ========================================================================== */
.p-site #candidaturaForm .checkbox-label {
  display       : flex;
  align-items   : flex-start;
  gap           : 0.75rem;
  cursor        : pointer;
  /* o rótulo aqui é uma frase, não um nome de campo: sem caixa-alta nem mono */
  font-family   : var(--p-body);
  font-size     : var(--p-t-sm);
  font-weight   : 400;
  letter-spacing: 0;
  text-transform: none;
  color         : var(--p-steel);
  margin        : 0;
}

.p-site #candidaturaForm .checkbox-label input[type="checkbox"] {
  position: absolute;
  opacity : 0;
  width   : 1px;
  height  : 1px;
}

.checkbox-box {
  flex         : none;
  width        : 22px;
  height       : 22px;
  margin-top   : 1px;
  display      : grid;
  place-items  : center;
  background   : var(--p-paper);
  border       : 1px solid var(--p-concrete-2);
  border-radius: var(--p-radius);
  transition   : background 0.15s var(--p-ease), border-color 0.15s var(--p-ease);
}

.checkbox-box i { font-size: 0.7rem; color: var(--p-ink); opacity: 0; transition: opacity 0.15s var(--p-ease); }

.checkbox-label input[type="checkbox"]:checked + .checkbox-box {
  background  : var(--p-yellow);
  border-color: var(--p-yellow);
}

.checkbox-label input[type="checkbox"]:checked + .checkbox-box i { opacity: 1; }

.checkbox-label input[type="checkbox"]:focus-visible + .checkbox-box {
  outline       : 3px solid var(--p-yellow);
  outline-offset: 2px;
}

.checkbox-text { line-height: 1.5; }

/* ---- Modal: centralizado, com rolagem própria -------------------------------
   Sem isto o modal cresce além da janela e a pessoa precisa rolar a PÁGINA
   para achar o rodapé, que fica cortado. O certo é o corpo do modal rolar
   dentro dele, com cabeçalho e rodapé sempre visíveis. */
.p-site #modalCandidatura .modal-dialog {
  display   : flex;
  align-items: center;
  min-height: calc(100% - 3.5rem);
  margin    : 1.75rem auto;
}

.p-site #modalCandidatura .modal-content {
  display   : flex;
  flex-direction: column;
  width     : 100%;
  max-height: calc(100vh - 3.5rem);
  overflow  : hidden;
}

.p-site #modalCandidatura .modal-header,
.p-site #modalCandidatura .modal-footer { flex: none; }

.p-site #modalCandidatura .modal-body {
  flex             : 1 1 auto;
  overflow-y       : auto;
  overscroll-behavior: contain;
}

@media (max-width: 575px) {
  .p-site #modalCandidatura .modal-dialog {
    margin    : 0.75rem;
    min-height: calc(100% - 1.5rem);
  }
  .p-site #modalCandidatura .modal-content { max-height: calc(100vh - 1.5rem); }
}

/* ---- Rodapé do modal ---- */
.p-site #modalCandidatura .modal-footer {
  display        : flex;
  align-items    : center;
  justify-content: flex-end;
  gap            : 0.85rem;
  padding        : 1.25rem 1.75rem;
  background     : var(--p-paper);
  border-top     : 1px solid var(--p-concrete-2);
}

.p-site .btn-cancel {
  padding      : 0.95rem 1.5rem;
  font-family  : var(--p-body);
  font-size    : var(--p-t-sm);
  font-weight  : 600;
  line-height  : 1.2;
  color        : var(--p-ink);
  background   : transparent;
  border       : 2px solid var(--p-concrete-2);
  border-radius: var(--p-radius);
  cursor       : pointer;
  transition   : border-color 0.2s var(--p-ease);
}

.p-site .btn-cancel:hover { border-color: var(--p-ink); }

.p-site .btn-submit {
  display      : inline-flex;
  align-items  : center;
  gap          : 0.6rem;
  padding      : 0.95rem 1.75rem;
  font-family  : var(--p-body);
  font-size    : var(--p-t-sm);
  font-weight  : 600;
  line-height  : 1.2;
  color        : var(--p-ink);
  background   : var(--p-yellow);
  border       : 2px solid var(--p-yellow);
  border-radius: var(--p-radius);
  cursor       : pointer;
  transition   : background 0.2s var(--p-ease);
}

.p-site .btn-submit:hover:not(:disabled) { background: #FFD75E; border-color: #FFD75E; }
.p-site .btn-submit:disabled { opacity: 0.65; cursor: default; }

/* Os dois estados vivem no HTML; o script alterna com .is-loading.
   Sem esta regra, "Enviar Candidatura" e "Enviando..." apareciam juntos. */
.p-site .btn-submit .btn-content { display: inline-flex; align-items: center; gap: 0.6rem; }
.p-site .btn-submit .btn-loader  { display: none; align-items: center; gap: 0.6rem; }

.p-site .btn-submit.is-loading .btn-content { display: none; }
.p-site .btn-submit.is-loading .btn-loader  { display: inline-flex; }

/* ==========================================================================
   30. Notícias
   Os cards são gerados em JS (blog-grid.html); os nomes de classe vêm de lá
   e não podem mudar.
   ========================================================================== */
.news-grid {
  display              : grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap                  : clamp(1.5rem, 2.5vw, 2rem);
}

.news-grid > * { min-width: 0; }

.news-card {
  display       : flex;
  flex-direction: column;
  background    : var(--p-paper);
  border        : 1px solid var(--p-concrete-2);
  border-radius : var(--p-radius);
  overflow      : hidden;
  transition    : border-color 0.25s var(--p-ease), transform 0.25s var(--p-ease);
}

.news-card:hover { border-color: var(--p-ink); transform: translateY(-4px); }

.news-card-media {
  position    : relative;
  display     : block;
  aspect-ratio: 16 / 10;
  overflow    : hidden;
  background  : var(--p-concrete);
}

.news-card-media img {
  width     : 100%;
  height    : 100%;
  object-fit: cover;
  display   : block;
  transition: transform 0.5s var(--p-ease);
}

.news-card:hover .news-card-media img { transform: scale(1.04); }

.news-card-category {
  position      : absolute;
  left          : 1rem;
  bottom        : 1rem;
  padding       : 0.35rem 0.7rem;
  font-family   : var(--p-mono);
  font-size     : var(--p-t-xs);
  font-weight   : 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color         : var(--p-ink);
  background    : var(--p-yellow);
  border-radius : var(--p-radius);
}

.news-card-body {
  display       : flex;
  flex-direction: column;
  flex          : 1;
  padding       : 1.6rem;
}

.news-card-date {
  display       : block;
  font-family   : var(--p-mono);
  font-size     : var(--p-t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color         : var(--p-yellow-700);
  margin-bottom : 0.75rem;
}

.p-site .news-card-title { font-size: 1.25rem; margin-bottom: 0.75rem; }
.p-site .news-card-title a { color: var(--p-ink); }

.p-site .news-card-excerpt {
  font-size: var(--p-t-sm);
  color    : var(--p-steel);
  flex     : 1;
  margin   : 0 0 1.35rem;
}

.p-site .news-card-link {
  display      : inline-flex;
  align-items  : center;
  gap          : 0.5rem;
  align-self   : flex-start;
  font-size    : var(--p-t-sm);
  font-weight  : 600;
  color        : var(--p-ink);
  border-bottom: 2px solid var(--p-yellow);
  padding-bottom: 2px;
  transition   : gap 0.2s var(--p-ease);
}

.p-site .news-card-link:hover { gap: 0.85rem; }

/* ---- Carregando e vazio ---- */
.news-loading,
.news-empty {
  padding      : clamp(2.5rem, 5vw, 4rem) 1.5rem;
  text-align   : center;
  background   : var(--p-concrete);
  border-radius: var(--p-radius);
}

.p-site .news-loading p,
.p-site .news-empty p { color: var(--p-steel); margin: 0; }


/* ---- Paginação ---- */
.news-pagination { margin-top: clamp(2.5rem, 4vw, 3.5rem); }

.news-pagination ul {
  display        : flex;
  flex-wrap      : wrap;
  justify-content: center;
  gap            : 0.5rem;
  list-style     : none;
  margin         : 0;
  padding        : 0;
}

.p-site .news-pagination a {
  display      : grid;
  place-items  : center;
  min-width    : 44px;
  height       : 44px;
  padding      : 0 0.75rem;
  font-family  : var(--p-mono);
  font-size    : var(--p-t-sm);
  color        : var(--p-ink);
  border       : 1px solid var(--p-concrete-2);
  border-radius: var(--p-radius);
  transition   : border-color 0.2s var(--p-ease), background 0.2s var(--p-ease);
}

.p-site .news-pagination a:hover { border-color: var(--p-ink); }

.p-site .news-pagination li.active a {
  background  : var(--p-yellow);
  border-color: var(--p-yellow);
  font-weight : 600;
}

/* ==========================================================================
   31. Notícia individual (blog-post.php)
   ========================================================================== */
.p-post { max-width: 74ch; margin-inline: auto; }

.p-site .p-post__voltar { margin-bottom: 2rem; }

.p-post__capa {
  margin       : 0 0 2rem;
  border-radius: var(--p-radius);
  overflow     : hidden;
}

.p-post__capa img {
  width       : 100%;
  aspect-ratio: 16 / 9;
  object-fit  : cover;
  display     : block;
}

.p-site .p-post__meta {
  display      : flex;
  flex-wrap    : wrap;
  align-items  : center;
  gap          : 1rem;
  margin-bottom: 2.25rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--p-concrete-2);
  font-family  : var(--p-mono);
  font-size    : var(--p-t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color        : var(--p-steel);
}

.p-post__categoria {
  padding      : 0.35rem 0.7rem;
  font-weight  : 500;
  color        : var(--p-ink);
  background   : var(--p-yellow);
  border-radius: var(--p-radius);
}

/* Texto do post: medida e ritmo de leitura */
.p-site .p-post__texto p {
  font-size    : 1.0625rem;
  line-height  : 1.75;
  color        : var(--p-steel);
  margin-bottom: 1.4em;
}

.p-site .p-post__texto p:last-child { margin-bottom: 0; }
.p-post__texto strong { color: var(--p-ink); font-weight: 600; }

/* ==========================================================================
   32. Detalhe da vaga (job.php)
   ========================================================================== */
.p-vaga { max-width: 78ch; margin-inline: auto; }

/* No detalhe da vaga o instrumento carrega rótulos, não números: a mono
   tabular continua, mas sem o tamanho de leitura numérica. */
.p-gauge__value--texto {
  font-size     : clamp(1.05rem, 1.5vw, 1.25rem);
  letter-spacing: 0;
  line-height   : 1.3;
}

.p-vaga__cta {
  display        : flex;
  flex-wrap      : wrap;
  align-items    : center;
  justify-content: space-between;
  gap            : 1.75rem;
  margin-top     : clamp(2.5rem, 4vw, 3.5rem);
  padding        : clamp(1.75rem, 3vw, 2.5rem);
  background     : var(--p-ink);
  border-radius  : var(--p-radius);
  border-top     : 3px solid var(--p-yellow);
}

.p-site .p-vaga__cta .p-head__title {
  font-size    : var(--p-t-lg);
  color        : var(--p-paper);
  margin-bottom: 0.75rem;
  max-width    : 20ch;
}

.p-site .p-vaga__cta p { color: rgba(255, 255, 255, 0.72); max-width: 44ch; margin: 0; }

.p-site .p-vaga__publicada {
  margin-top : 2rem;
  font-family: var(--p-mono);
  font-size  : var(--p-t-xs);
  color      : var(--p-steel);
}

/* ==========================================================================
   33. Destaque dentro de texto jurídico (.callout)
   A classe vem do conteúdo migrado do WordPress. Guarda o contato do
   Encarregado de Proteção de Dados: é a informação mais acionável da
   Política de Privacidade e precisa saltar do texto corrido.
   ========================================================================== */
.p-site .callout {
  margin       : 2rem 0;
  padding      : clamp(1.5rem, 3vw, 2rem);
  background   : var(--p-concrete);
  border-left  : 3px solid var(--p-yellow);
  border-radius: var(--p-radius);
}

.p-site .callout p {
  margin     : 0;
  font-size  : var(--p-t-body);
  line-height: 1.7;
  color      : var(--p-ink);
}

.p-site .callout strong {
  display       : block;
  margin-bottom : 0.4rem;
  font-family   : var(--p-mono);
  font-size     : var(--p-t-sm);
  letter-spacing: 0.06em;
  color         : var(--p-ink);
}

/* ==========================================================================
   34. Voltar ao topo
   O template estiliza por ID (#back-to-top), com o azul antigo #102694.
   Seletor de ID vence qualquer classe, então a correção também usa o ID.
   ========================================================================== */
.p-site #back-to-top {
  background   : var(--p-ink);
  color        : var(--p-paper);
  border       : 2px solid var(--p-ink);
  border-radius: var(--p-radius);
  transition   : background 0.2s var(--p-ease), border-color 0.2s var(--p-ease), color 0.2s var(--p-ease);
}

.p-site #back-to-top:hover {
  background  : var(--p-yellow);
  border-color: var(--p-yellow);
  color       : var(--p-ink);
}

/* ==========================================================================
   35. Item ativo do menu suspenso
   O custom.css pinta `.dropdown-item.active` com o azul antigo (--brand,
   #102694) e o Bootstrap com #007bff. Nos dois casos sobra fundo azul com
   texto escuro por cima. Aqui o ativo fica igual ao hover: só o fundo claro.
   Quem indica a seção atual é o sublinhado amarelo do item do topo.
   ========================================================================== */
.p-site .navbar .dropdown-item.active,
.p-site .navbar .dropdown-item:active,
.p-site .navbar .dropdown-item:focus {
  background   : var(--p-concrete);
  color        : var(--p-ink);
  padding-left : 1.75rem;
}

/* ==========================================================================
   36. Alerta do modal de candidatura
   Escrito por showAlert() em careers.html e job.php. Sem estas regras a
   mensagem de erro saía como texto solto, sem caixa nem cor.
   ========================================================================== */
.modal-alert {
  display      : flex;
  align-items  : flex-start;
  gap          : 0.75rem;
  padding      : 1rem 1.15rem;
  margin-bottom: 1.5rem;
  border-radius: var(--p-radius);
  font-size    : var(--p-t-sm);
  line-height  : 1.5;
}

.modal-alert i { flex: none; margin-top: 0.15rem; font-size: 1rem; }

.modal-alert.alert-error {
  background : #FEF2F2;
  color      : #991B1B;
  border-left: 3px solid #B91C1C;
}

.modal-alert.alert-success {
  background : #F0FDF4;
  color      : #14532D;
  border-left: 3px solid #15803D;
}

/* Área de anexo em falta: o formulário não envia sem currículo, então o
   estado precisa se ver junto com a mensagem no topo do modal. */
.file-dropzone.is-invalid {
  border-color: #B91C1C;
  background  : #FEF2F2;
}

.file-dropzone.is-invalid .dropzone-icon,
.file-dropzone.is-invalid .dropzone-hint { color: #B91C1C; }