/* ============================================================================
   internas-projeto.css

   Extensões do projeto sobre o `internas.css`. O `internas.css` é cópia fiel do
   design aprovado e NÃO deve ser editado — quando o design for atualizado, ele é
   substituído inteiro. Tudo que o site real precisa e a maquete não previu mora aqui.

   Motivo de cada bloco: a maquete desenhou retratos e capas como placeholder de
   iniciais (texto). Com o acervo real vindo do banco, os mesmos slots passam a
   receber <img>. As regras abaixo só ensinam a imagem a preencher o slot que o
   design já definiu — nenhuma medida, cor ou espaçamento do design muda.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   Logo do cabeçalho nas internas no MESMO tamanho da home (37 px, `hero2.css`).
   O design deixou 31 px nas internas: em monitor comum (sem tela retina) o "LDR"
   fino e inclinado virava poucos pixels e o "R" parecia cortado (Vini, 10/11/2026).
   min-width = 37 × 1181/324 ≈ 135, igual à home: o logo nunca encolhe no flex.
   ---------------------------------------------------------------------------- */
.site-header__logo svg {
  height: 37px;
  width: auto;
  min-width: 135px;
  flex-shrink: 0;
}

/* Retrato real no card de diretoria (design: `.team__photo` com iniciais) */
.team__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Retrato real na linha do tempo de presidentes (design: `.timeline__avatar`) */
.timeline__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Os retratos do acervo são verticais (720×1280) com o rosto no terço de cima;
     recorte pelo centro mostrava o peito. O site antigo usava "center top". */
  object-position: 50% 15%;
  border-radius: inherit;
  display: block;
}

/* ----------------------------------------------------------------------------
   Categorias representadas: o design previu uma lista plana de cards. O conteúdo
   real vem em 11 grupos do Ordenamento Sindical, então cada grupo ganha um título.
   Usa o mesmo vocabulário tipográfico de `.doc-group__title`, já do design.
   ---------------------------------------------------------------------------- */
.cat-group + .cat-group { margin-top: 40px; }

.cat-group__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -.01em;
  color: var(--ink-900);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.cat-group__count {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .08em;
  color: var(--ink-500);
  margin-left: 8px;
}

/* Grupo sem nenhum item visível depois da busca sai da tela junto com seu título. */
.cat-group[hidden] { display: none; }

/* ----------------------------------------------------------------------------
   Filtro da Transparência. O design desenhou `.fchip` como <button> com
   aria-pressed; aqui o filtro é navegação no servidor (links com querystring),
   então o estado ativo vem de aria-current. Mesma aparência, semântica correta
   para link.
   ---------------------------------------------------------------------------- */
a.fchip { display: inline-flex; align-items: center; text-decoration: none; }
a.fchip[aria-current="page"] {
  background: var(--ink-900);
  border-color: var(--ink-900);
  color: #fff;
}

/* ----------------------------------------------------------------------------
   Imagens reais nos slots que a maquete desenhou como placeholder de texto.
   Mesma ideia de `.team__photo img`: a imagem preenche o slot que o design já
   dimensionou; nenhuma medida, cor ou espaçamento muda.
   ---------------------------------------------------------------------------- */
.partner__logo img,
.news-card__thumb img,
.article__cover img,
.ep-feature__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Logo de parceiro é marca: cabe inteira, não corta. */
.partner__logo img {
  object-fit: contain;
  padding: 6px;
}

/* A capa da matéria tem legenda opcional sob a imagem. */
.article__cover { display: block; padding: 0; overflow: hidden; }
.article__cover figcaption {
  font-size: 13px;
  color: var(--ink-500);
  padding: 10px 2px 0;
  line-height: 1.5;
}

/* ----------------------------------------------------------------------------
   Paginação. O design nunca desenhou listagem paginada (as maquetes têm 6 a 8
   itens fixos), mas notícias (3.5 mil) e cursos (969) exigem. Construída só com
   botões do design, em linha.
   ---------------------------------------------------------------------------- */
.paginacao {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
  margin-top: 40px;
}

.paginacao__info {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--ink-500);
  margin: 0 8px;
}

.paginacao .btn[aria-current="page"] {
  background: var(--ink-900);
  border-color: var(--ink-900);
  color: #fff;
  pointer-events: none;
}

/* ----------------------------------------------------------------------------
   Ícone de confirmação do formulário.

   O `.form-success` do design é `text-align: center`, mas o `custom.css` tem
   `img, svg { display: block }` na base — e elemento de bloco ignora
   `text-align`, então o check encostava na esquerda enquanto título, texto e
   botões ficavam centralizados. `margin: 0 auto` devolve o alinhamento.

   A cor vem do token semântico de sucesso do design (DESIGN.md §01), em vez do
   grafite herdado: verde é o que diz "deu certo" sem precisar ler.
   ---------------------------------------------------------------------------- */
.form-success__icone {
  margin: 0 auto 12px;
  color: var(--success);
}

/* ----------------------------------------------------------------------------
   Aviso de formulário bloqueado (regra global: nenhum envio falha em silêncio).
   Reaproveita o `notice` do design com a cor semântica de erro.
   ---------------------------------------------------------------------------- */
.form-erro {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--error-bg);
  border: 1px solid var(--error);
  border-radius: var(--r-3);
  padding: 14px 16px;
  margin-bottom: 20px;
  color: var(--error);
  font-size: 14.5px;
  line-height: 1.5;
}

.form-erro[hidden] { display: none; }

/* Vitrine de certificado digital com 4 produtos: regra movida para overrides.css em
   05/10/2026, porque a home passou a usar o mesmo cadastro (e a mesma grade). */

/* ----------------------------------------------------------------------------
   Lacunas do próprio design (conferidas em 21/09/2026): o `cursos.html` e o
   `index.html` do design usam 6 classes que o `courses2.css` nunca definiu.
   Sem elas, o badge de EAD, a etiqueta "Curso novo" e a data de curso com
   período (11-12 Jun) saem sem estilo. Implementadas aqui com os tokens do
   próprio design, no espírito de `.badge--ead` (custom.css §07) e das demais
   `.courses2-row__badge--mode-*`.

   Fica só nas internas: a home carrega outro conjunto de CSS e não é tocada
   por este arquivo (a mesma lacuna na home está registrada em PENDENCIAS.md).
   ---------------------------------------------------------------------------- */

/* EAD: sublinhado amarelo, como `.badge--ead` do design. */
.courses2-row__badge--ead {
  background: transparent;
  color: var(--ink-900);
  border-bottom: 2px solid var(--brand-yellow);
  border-radius: 0;
  padding-bottom: 3px;
}

/* "Curso novo": o amarelo trabalha, não decora (DESIGN.md §12.4). */
.courses2-row__badge--new {
  background: var(--brand-yellow);
  color: var(--ink-950);
}

/* Curso com período de dois dias: 11 / divisor / 12 / Jun / Qua-Qui. */
.courses2-row__day--stacked { line-height: .85; }

.courses2-row__date-divider {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--border-strong);
  margin: 2px 0;
}

.courses2-row__month--stacked { margin-top: 2px; }

.courses2-row__weekday {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-400);
}


/* =============================================================================
   Celular: nada pode ficar mais largo que a tela (auditoria de 05/10/2026)
   -----------------------------------------------------------------------------
   Grade com coluna "1fr"/auto cresce até caber a palavra mais comprida — um e-mail
   ou link do cadastro de convênios esticava o card até 600px numa tela de 390px, e o
   celular reduzia o zoom da página inteira. minmax(0, …) prende a coluna na tela.
   ============================================================================= */
.partner-grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .partner-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .partner-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.partner > div { min-width: 0; }
.partner__name,
.partner__deal { overflow-wrap: anywhere; }

/* Coluna única do .split (abaixo de 900px): o design só usa minmax(0, …) no desktop.
   Sem isso a caixa do reCAPTCHA esticava a coluna — e o texto ao lado — para além da tela. */
@media (max-width: 899px) { .split { grid-template-columns: minmax(0, 1fr); } }

/* Caixa do reCAPTCHA nos formulários de Contato e Associe-se: o Google desenha 304px
   fixos, que não cabem no card abaixo de 400px. Mesma redução do formulário do
   boletim (overrides.css), sem cortar a caixa. */
@media (max-width: 400px) {
  .form-card .g-recaptcha {
    transform: scale(.86);
    transform-origin: left top;
    height: 67px;
  }
}

/* =============================================================================
   Foto que amplia ao clicar (internas.js §5), 05/10/2026 — versão discreta:
   cartão flutuante ao lado da miniatura, sem escurecer a página.
   Galeria de presidentes e diretoria. O botão ocupa o mesmo espaço da foto, sem
   mudar o card; o cursor de lupa avisa que dá para ampliar.
   ============================================================================= */
.foto-ampliar {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  border-radius: inherit;
  overflow: hidden;
  cursor: zoom-in;
}
.foto-ampliar[aria-expanded="true"] { cursor: zoom-out; }
.foto-ampliar img { transition: transform var(--dur) var(--ease); }
.foto-ampliar:hover img { transform: scale(1.04); }
.foto-ampliar:focus-visible { outline: 2px solid var(--brand-yellow); outline-offset: 3px; }

.foto-zoom {
  position: fixed;
  z-index: 200;
  margin: 0;
  padding: 8px 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: scale(.92);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  pointer-events: none;
}
.foto-zoom[hidden] { display: none; }
.foto-zoom.is-visible { opacity: 1; transform: scale(1); pointer-events: auto; }
.foto-zoom__imagem {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--r-3) - 4px);
  background: var(--surface-2);
}
.foto-zoom__legenda {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 8px;
  padding: 0 4px;
  text-align: center;
}
.foto-zoom__nome {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.25;
  color: var(--ink-900);
}
.foto-zoom__detalhe {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--ink-500);
}
.foto-zoom__detalhe[hidden] { display: none; }

/* =============================================================================
   Texto jurídico (Política de Privacidade — /privacidade), 05/10/2026.
   O `.prose` do design só formata parágrafos; aqui entram títulos numerados,
   listas, a tabela de finalidades e links, na largura de leitura.
   ============================================================================= */
.legal { max-width: 780px; }
.legal p { color: var(--ink-700); line-height: 1.7; margin: 0 0 14px; }
.legal h2 {
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 1.25;
  margin: 40px 0 12px;
  color: var(--ink-900);
}
.legal ul { margin: 0 0 16px; padding-left: 20px; color: var(--ink-700); line-height: 1.7; }
.legal li { margin-bottom: 6px; }
.legal a { color: var(--ink-900); text-decoration: underline; text-underline-offset: 3px; }
.legal a:hover { color: var(--teal-700); }
.legal__tabela { overflow-x: auto; margin: 4px 0 16px; }
.legal table { width: 100%; border-collapse: collapse; font-size: 15px; }
.legal th, .legal td {
  text-align: left;
  vertical-align: top;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--ink-700);
}
.page-hero__meta b a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.legal th { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-500); }

/* =============================================================================
   Páginas de certificado digital (/certificacao/*), Monday 13453276281.
   Tabela de opções de compra, textos vindos do editor do painel e localização.
   No celular cada linha da tabela vira um card.
   ============================================================================= */
.cert-opcoes { border: 1px solid var(--border); border-radius: var(--r-4); overflow: hidden; background: var(--surface); }
.cert-opcoes__tabela { width: 100%; border-collapse: collapse; font-size: 15px; }
.cert-opcoes__tabela th, .cert-opcoes__tabela td {
  text-align: left;
  vertical-align: middle;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  color: var(--ink-700);
}
.cert-opcoes__tabela thead th {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.cert-opcoes__tabela tbody th { color: var(--ink-900); font-weight: 600; }
.cert-opcoes__tabela tbody tr:last-child th,
.cert-opcoes__tabela tbody tr:last-child td { border-bottom: 0; }
.cert-opcoes__acao { text-align: right !important; white-space: nowrap; }
.cert-opcoes__nota { margin: 14px 0 32px; font-size: 13.5px; color: var(--ink-700); }
@media (max-width: 719px) {
  .cert-opcoes__tabela thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .cert-opcoes__tabela tr { display: block; padding: 16px 18px; border-bottom: 1px solid var(--border); }
  .cert-opcoes__tabela tbody tr:last-child { border-bottom: 0; }
  .cert-opcoes__tabela th, .cert-opcoes__tabela td { display: block; padding: 0; border: 0; }
  .cert-opcoes__tabela tbody th { margin-bottom: 6px; }
  .cert-opcoes__tabela td[data-rotulo]::before { content: attr(data-rotulo) ": "; font-weight: 600; }
  .cert-opcoes__acao { margin-top: 12px; text-align: left !important; }
  .cert-opcoes__acao .btn { width: 100%; justify-content: center; }
}
.cert-texto { padding: 0 20px 20px; color: var(--ink-700); font-size: 15px; line-height: 1.6; }
.faq details .cert-texto p { padding: 0; margin: 0 0 12px; }
.cert-texto h3 { margin: 18px 0 8px; font-size: 15px; color: var(--ink-900); }
.cert-texto ul { margin: 0 0 12px; padding-left: 20px; list-style: disc; }
.cert-texto li { margin-bottom: 6px; }
.cert-local__endereco { font-style: normal; font-weight: 600; color: var(--ink-900); margin: 0 0 14px; line-height: 1.6; }
.cert-local__acoes { display: flex; flex-wrap: wrap; gap: 12px; }

/* =============================================================================
   Galeria de Fotos — Cursos e Eventos (álbuns do Flickr), 10/11/2026.
   Lista de álbuns reaproveita o news-card do design; aqui só o que é novo:
   a capa clicável, a grade de fotos do álbum e o visualizador em tela cheia
   (internas.js §6). `is-locked` no <html> trava a rolagem com o visualizador aberto.
   ============================================================================= */
.album-card__thumb { overflow: hidden; }
.album-card__thumb img { transition: transform var(--dur) var(--ease); }
@media (hover: hover) {
  .album-card:hover .album-card__thumb img { transform: scale(1.04); }
}

/* Mosaico em linhas justificadas (pedido do dono em 10/11/2026: "respeitar vertical e
   horizontal, sem cortar a foto"). Cada item cresce na proporção do próprio formato
   (--r = largura/altura, vindo do Flickr): base = --r × altura da linha, crescimento = --r.
   Assim todos da linha terminam com a MESMA altura e cada foto mantém o formato inteiro.
   O ::after "come" a sobra da última linha, para ela não esticar fotos soltas.
   A altura da linha (--linha) muda por faixa de tela (ver media queries no fim do bloco). */
.album-mosaico {
  --linha: 170px;
  --vao: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--vao);
  margin: 0;
  padding: 0;
  list-style: none;
}
.album-mosaico::after { content: ""; flex-grow: 999; }
.album-mosaico__item {
  flex-grow: var(--r, 1.5);
  flex-basis: calc(var(--r, 1.5) * var(--linha));
  aspect-ratio: var(--r, 1.5);
  min-width: 0;
  max-width: 100%;
}
.album-mosaico__item[hidden] { display: none; }
.album-mosaico__botao {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--r-2);
  overflow: hidden;
  background: var(--surface-2);
  cursor: zoom-in;
}
.album-mosaico__botao img {
  display: block;
  width: 100%;
  height: 100%;
  /* A caixa tem o formato da foto, então "cover" não corta (só arredonda subpixel). */
  object-fit: cover;
  transition: transform var(--dur) var(--ease);
}
/* Só com mouse: no iPhone o :hover "gruda" depois do toque e a foto ficaria ampliada. */
@media (hover: hover) {
  .album-mosaico__botao:hover img { transform: scale(1.03); }
}
.album-mosaico__botao { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.album-mosaico__botao:focus-visible { outline: 2px solid var(--brand-yellow); outline-offset: 2px; }

.album-mais {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
}
.album-mais__contador {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.album-mais[hidden] { display: none; }

/* Altura da linha por faixa de tela: ~4 horizontais por linha no computador, 3 no
   tablet, 2 no celular (ou mais verticais), sem nunca virar coluna única.
   Linha baixa = mais fotos por linha = cada uma cresce menos para fechar a linha,
   então as alturas ficam parecidas entre linhas (pedido do dono em 10/11/2026:
   "imagens menores, mosaico o mais coerente e simétrico possível"). */
@media (min-width: 1600px) { .album-mosaico { --linha: 190px; } }
@media (max-width: 1279px) { .album-mosaico { --linha: 150px; } }
@media (max-width: 1023px) { .album-mosaico { --linha: 140px; } }
@media (max-width: 767px)  { .album-mosaico { --linha: 130px; --vao: 6px; } }
@media (max-width: 480px)  { .album-mosaico { --linha: 104px; --vao: 4px; } }
@media (max-width: 360px)  { .album-mosaico { --linha: 92px; } }
/* iPhone SE / telas de 320 px: com 92 px duas horizontais não cabiam e a grade virava
   coluna única (medido no WebKit em 10/11/2026). */
@media (max-width: 340px)  { .album-mosaico { --linha: 80px; } }

/* Trava de rolagem com o visualizador aberto. No iOS só overflow:hidden não basta:
   o body fica fixo, com o top negativo posto pelo internas.js §6. */
html.is-locked { overflow: hidden; }
html.is-locked body { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }

.album-viewer {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(11, 11, 13, .94);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.album-viewer[hidden] { display: none; }
.album-viewer.is-open { opacity: 1; }
.album-viewer__palco {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 64px 88px 24px;
  position: relative;
}
.album-viewer__imagem {
  max-width: 100%;
  max-height: calc(100% - 36px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--r-2);
  transition: opacity var(--dur) var(--ease);
}
.album-viewer.is-loading .album-viewer__imagem { opacity: .35; }
.album-viewer__carregando {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  border: 3px solid rgba(255, 255, 255, .25);
  border-top-color: var(--brand-yellow);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}
.album-viewer.is-loading .album-viewer__carregando { opacity: 1; animation: album-gira .8s linear infinite; }
@keyframes album-gira { to { transform: rotate(360deg); } }
.album-viewer__legenda {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .8);
}
.album-viewer__fechar,
.album-viewer__nav {
  position: absolute;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.album-viewer__fechar,
.album-viewer__nav { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
@media (hover: hover) {
  .album-viewer__fechar:hover,
  .album-viewer__nav:hover:not(:disabled) { background: var(--brand-yellow); color: var(--ink-950); }
}
.album-viewer__fechar:focus-visible,
.album-viewer__nav:focus-visible { outline: 2px solid var(--brand-yellow); outline-offset: 3px; }
.album-viewer__nav:disabled { opacity: .25; cursor: default; background: rgba(255, 255, 255, .1); color: #fff; }
/* Área segura (notch e barra de início do iPhone, inclusive deitado). */
.album-viewer__fechar { top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); }
.album-viewer__nav { top: 50%; transform: translateY(-50%); }
.album-viewer__nav--anterior { left: max(16px, env(safe-area-inset-left)); }
.album-viewer__nav--proxima { right: max(16px, env(safe-area-inset-right)); }

@media (max-width: 768px) {
  .album-viewer__palco { padding: 64px 8px 88px; }
  .album-viewer__nav { top: auto; bottom: max(20px, calc(env(safe-area-inset-bottom) + 8px)); transform: none; }
  .album-viewer__nav--anterior { left: calc(50% - 64px); }
  .album-viewer__nav--proxima { right: calc(50% - 64px); }
}
@media (prefers-reduced-motion: reduce) {
  .album-viewer, .album-viewer__imagem, .album-mosaico__botao img, .album-card__thumb img { transition: none; }
  .album-viewer.is-loading .album-viewer__carregando { animation: none; }
}