/*
Theme Name:   Portfolio Dev Child - Profletras
Template:     portfolio-dev
Description:  Tema filho do Portfolio Dev, exclusivo do site Profletras. Use este tema (nao o Portfolio Dev direto) para customizacoes proprias deste site — elementos que nao existem na lista do plugin WP Vibe, ajustes de CSS ou secoes personalizadas. Assim o tema-pai continua limpo e reutilizavel em outros sites que usam o mesmo plugin.
Author:       Wyller Freitas
Version:      1.0.0
Text Domain:  portfolio-dev-child
*/

/* CSS especifico do site Profletras entra aqui. O tema-pai ja carrega este
   arquivo por ultimo (via get_stylesheet_uri()), entao qualquer regra aqui
   sobrescreve o Portfolio Dev automaticamente — sem precisar !important. */

/* ================================================
   PALETA DE CORES OFICIAL — PROFLETRAS
   Sobrescreve as variaveis do tema-pai (variables.css).
   ================================================ */
:root {
  /* Cores da marca */
  --cor-primaria:       #066AA9; /* Azul institucional */
  --cor-primaria-hover: #055786; /* Azul institucional, tom mais escuro */
  --cor-secundaria:     #2C2C2C; /* Grafite */
  --cor-acento:         #FDB813; /* Amarelo */

  /* Cores extras da identidade visual, sem equivalente no tema-pai */
  --cor-verde: #517A36;
  --cor-cinza: #58585A;
  --cor-unifap: #013800; /* Verde institucional da UNIFAP — só a barra de topo usa */

  /* Sobrescreve a cor de fundo do tema-pai (#F5F5F7) — unifica o fundo de
     todas as seções que usam var(--cor-fundo) (.secao-sobre,
     .secao-noticias, body, e outras que ainda entrarem) num lugar só. */
  --cor-fundo: #FFFFFF;

  /* Altura da barra de topo (endereço/e-mail + redes sociais), usada
     para empurrar o .site-header (position:fixed) do tema-pai para
     baixo dela. */
  --altura-barra-topo: 3.5rem;

  /* Tipografia: Space Grotesk no lugar da Inter do tema-pai.
     --fonte-mono não é alterada. */
  --fonte-titulo: 'Space Grotesk', 'Inter', 'Segoe UI', system-ui, sans-serif;
  --fonte-corpo:  'Space Grotesk', 'Inter', 'Segoe UI', system-ui, sans-serif;
}

/* ================================================
   AJUSTES GLOBAIS — PROFLETRAS
   Largura do container reduzida (fundo branco já vem de
   --cor-fundo, sobrescrita no :root acima — body usa essa mesma
   variável no reset.css do tema-pai).
   ================================================ */

/* Largura do site reduzida para 90% do valor original do tema-pai.
   O .container do tema-pai não usa um max-width fixo — usa
   min(1500px, 92vw) (ver --container-max em
   portfolio-dev/assets/css/variables.css), pra ter um teto fixo em telas
   grandes E encolher em telas menores. Os 90% foram aplicados aos dois
   lados do min() pra manter esse mesmo comportamento responsivo:
   1500px×0,90 = 1350px · 92vw×0,90 = 82,8vw (arredondado pra 83vw).
   Pedido do cliente, 09/2026. */
.container {
  max-width: min(1350px, 83vw);
}

/* ================================================
   MENU (HEADER) — fundo gelo + texto grafite, pra leitura
   ================================================ */
.site-header.site-header--transparente,
.site-header.site-header--solido {
  background-color: #F4F6F5;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.logo-imagem {
  height: 40px;
  width: auto;
  display: block;
}

.site-header .site-logo__texto,
.site-header .nav-principal__link,
.site-header .nav-principal__link:hover,
.site-header .nav-principal__link.ativo {
  color: #2C2C2C;
}

.site-header .btn-menu-mobile span {
  background-color: #2C2C2C;
}

/* ================================================
   HERO — PROFLETRAS
   Carrossel de imagens prontas (sem texto sobreposto), em formato de
   cartão arredondado com respiro ao redor (referência: Greenland).
   ================================================ */
.hero-profletras,
body.admin-bar .hero-profletras {
  /* O tema-pai define min-height:100vh (e variações com admin bar) pro
     hero de texto original — aqui a altura vem da proporção da imagem
     (.hero-slider), não da viewport. */
  min-height: auto;
}

.hero-profletras {
  background: none;
  /* Respiro nas laterais/topo/base — a foto vira um "cartão" arredondado
     em vez de ocupar de borda a borda. */
  padding: var(--espaco-6) var(--espaco-6) var(--espaco-8);
}

/* ---- Cartão do carrossel ---- */
.hero-slider {
  position: relative;
  width: 100%;
  aspect-ratio: 2000 / 738;
  max-height: 640px;
  overflow: hidden;
  border-radius: 30px;
  background-color: var(--cor-secundaria);
  border: 1px solid #E7E2D8;
}

.hero-slider__pista {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 550ms ease;
}

.hero-slider__slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- Setas ---- */
.hero-slider__seta {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: none;
  border-radius: var(--raio-full);
  background-color: rgba(255, 255, 255, 0.85);
  color: var(--cor-secundaria);
  cursor: pointer;
  transform: translateY(-50%);
  transition: background-color var(--transicao-rapida), transform var(--transicao-rapida);
}

.hero-slider__seta svg {
  width: 1.1rem;
  height: 1.1rem;
}

.hero-slider__seta:hover {
  background-color: var(--cor-fundo-card);
  transform: translateY(-50%) scale(1.08);
}

.hero-slider__seta--anterior {
  left: var(--espaco-4);
}

.hero-slider__seta--anterior svg {
  transform: rotate(180deg);
}

.hero-slider__seta--proxima {
  right: var(--espaco-4);
}

/* ---- Pontos ---- */
.hero-slider__pontos {
  position: absolute;
  bottom: var(--espaco-4);
  left: 50%;
  z-index: 2;
  display: flex;
  gap: var(--espaco-2);
  transform: translateX(-50%);
}

.hero-slider__ponto {
  width: 0.6rem;
  height: 0.6rem;
  padding: 0;
  border: none;
  border-radius: var(--raio-full);
  background-color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: background-color var(--transicao-rapida), transform var(--transicao-rapida);
}

.hero-slider__ponto.ativo {
  background-color: var(--cor-acento);
  transform: scale(1.2);
}

@media (max-width: 480px) {
  .hero-profletras {
    padding: var(--espaco-4) var(--espaco-3) var(--espaco-6);
  }

  /* Setas somem em telas pequenas — só os pontos ficam, mais limpo e
     sem alvo de toque espremido sobre a imagem. */
  .hero-slider__seta {
    display: none;
  }
}

/* ================================================
   NOTÍCIAS — PROFLETRAS
   Grid dos posts mais recentes do blog, entre o hero e a apresentação.
   Inspirado no grid de serviços de
   https://dev262.kodesolution.com/greenland/service/.
   ================================================ */
.secao-noticias {
  padding: var(--secao-padding-y) 0;
  background-color: var(--cor-fundo);
}

.noticias-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--espaco-8);
}

.noticia-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--cor-fundo-card);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-xl);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform var(--transicao-suave), box-shadow var(--transicao-suave);
}

.noticia-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--sombra-card-hover);
}

.noticia-card__imagem {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  background-color: var(--cor-secundaria);
}

.noticia-card__imagem img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transicao-suave);
}

.noticia-card:hover .noticia-card__imagem img {
  transform: scale(1.04);
}

.noticia-card__imagem-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  color: rgba(255,255,255,0.15);
}

.noticia-card__corpo {
  padding: var(--espaco-6);
  padding-right: var(--espaco-16);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
}

.noticia-card__data {
  font-size: var(--texto-xs);
  color: var(--cor-texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.noticia-card__titulo {
  font-size: var(--texto-lg);
  font-weight: var(--peso-bold);
  color: var(--cor-texto);
  line-height: var(--linha-apertada);
  margin: 0;
}

.noticia-card__resumo {
  font-size: var(--texto-sm);
  color: var(--cor-texto-suave);
  line-height: var(--linha-relaxada);
  margin: 0;
}

.noticia-card__seta {
  position: absolute;
  right: var(--espaco-6);
  bottom: var(--espaco-6);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--raio-full);
  background-color: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  color: var(--cor-primaria);
  transition: background-color var(--transicao-rapida), transform var(--transicao-rapida), color var(--transicao-rapida);
}

.noticia-card__seta svg {
  width: 1.1rem;
  height: 1.1rem;
  transform: rotate(-45deg);
}

.noticia-card:hover .noticia-card__seta {
  background-color: var(--cor-primaria);
  border-color: var(--cor-primaria);
  color: var(--cor-texto-invertido);
  transform: scale(1.08);
}

@media (max-width: 1024px) {
  .noticias-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .noticias-grid {
    grid-template-columns: 1fr;
  }
}

/* ================================================
   SOBRE — PROFLETRAS
   A seção reaproveita .sobre-grid/.sobre-imagem/.sobre-texto do
   tema-pai (sections.css) sem alterações; este bloco é só o
   complemento pra imagem de marca vertical, logo depois de onde o
   tema-pai define .sobre-imagem__badge-texto.
   ================================================ */

/* Imagem de marca vertical na seção Sobre — não é foto, não pode ser cortada.
   height:auto é necessário aqui: o <img> tem os atributos width/height
   (700x1008), que o navegador usa como presentational hint pra height
   quando nenhuma regra de CSS a define — sem isso a imagem renderiza
   esticada nos 1008px "crus" do atributo, em vez de escalar com a
   largura. */
.sobre-imagem__foto--card {
  aspect-ratio: auto;
  max-width: 340px;
  height: auto;
  margin-inline: auto;
  display: block;
  object-fit: contain;
  box-shadow: none;
  border: 1px solid #E7E2D8;
}

/* ================================================
   BARRA DE TOPO — PROFLETRAS
   Faixa fina acima do .site-header: endereço/e-mail + redes sociais.
   Fixa junto com o header (que é sobrescrito para começar logo abaixo
   dela, em vez de no topo da viewport).
   ================================================ */
.barra-topo {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-menu);
  height: var(--altura-barra-topo);
  background-color: var(--cor-unifap);
  color: var(--cor-texto-invertido);
}

body.admin-bar .barra-topo {
  top: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar .barra-topo {
    top: 46px;
  }
}

.barra-topo__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-4);
}

.barra-topo__contato {
  display: flex;
  align-items: center;
  gap: var(--espaco-6);
  min-width: 0;
  flex: 1 1 auto;
}

.barra-topo__item {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-2);
  color: inherit;
  text-decoration: none;
  font-size: var(--texto-sm);
  white-space: nowrap;
}

/* O endereço é o único item que deve encolher/truncar (com reticências)
   quando falta espaço — precisa de min-width:0 pro ellipsis funcionar
   dentro de um flex item. E-mail e ícones de redes nunca encolhem. */
.barra-topo__item--endereco {
  min-width: 0;
  flex-shrink: 1;
}

.barra-topo__item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.barra-topo__item--endereco .barra-topo__texto {
  overflow: hidden;
  text-overflow: ellipsis;
}

.barra-topo__link {
  flex-shrink: 0;
  transition: opacity var(--transicao-rapida);
}

.barra-topo__link:hover {
  opacity: 0.75;
}

.barra-topo__redes {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  flex-shrink: 0;
}

.barra-topo__rede {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--raio-full);
  background-color: rgba(255, 255, 255, 0.15);
  color: var(--cor-texto-invertido);
  transition: background-color var(--transicao-rapida), transform var(--transicao-rapida);
}

.barra-topo__rede svg {
  width: 18px;
  height: 18px;
}

.barra-topo__rede:hover {
  background-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

/* Empurra o header do tema-pai (position:fixed; top:0) pra baixo da
   barra de topo — em todos os cenários que o tema-pai já cobre
   (padrão e com admin bar). */
.site-header {
  top: var(--altura-barra-topo);
}

body.admin-bar .site-header {
  top: calc(32px + var(--altura-barra-topo));
}

@media screen and (max-width: 782px) {
  body.admin-bar .site-header {
    top: calc(46px + var(--altura-barra-topo));
  }
}

/* Compensa a altura extra da barra de topo no espaço reservado acima do
   conteúdo. 72px é a altura real do .site-header (medida no navegador:
   16px de padding-top + 16px de padding-bottom + 40px de conteúdo) —
   esse é o mínimo pra só limpar os elementos fixos. O respiro extra
   (calc(7rem + ...), que existia antes pra toda página) agora só entra
   quando o painel do WP Vibe está aberto (body.wpvibe-ativo). */
#conteudo-principal {
  padding-top: calc(72px + var(--altura-barra-topo));
}

body.wpvibe-ativo #conteudo-principal {
  padding-top: calc(7rem + var(--altura-barra-topo));
}

@media (max-width: 768px) {
  .barra-topo__item--endereco {
    display: none;
  }

  .barra-topo__texto--email {
    display: none;
  }
}

/* ================================================
   SUBMENU (DROPDOWN) — PROFLETRAS
   Suporte a um nível de submenu no menu principal (ex: "Processos
   Seletivos" > "Editais 2026"), via PDV_Walker_Nav_Filho.
   ================================================ */

/* Seta que indica item com submenu — rotaciona ao abrir/expandir. O
   espaçamento em relação ao texto vem do gap do link (.tem-submenu > a),
   não daqui, pra não duplicar. */
.icone-submenu {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  transform: rotate(90deg);
  transition: transform var(--transicao-rapida);
}

/* ---- Desktop: painel via hover/foco ---- */
.nav-principal__lista li {
  position: relative;
}

/* O link do tema-pai herda display:inline (sem white-space:nowrap),
   então "Processos Seletivos" quebrava em duas linhas. Com
   inline-flex a seta fica alinhada ao lado do texto, na mesma altura,
   sem quebrar. */
.nav-principal__lista li.tem-submenu > a {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-1);
  white-space: nowrap;
}

.nav-principal__lista li.tem-submenu:hover .icone-submenu,
.nav-principal__lista li.tem-submenu:focus-within .icone-submenu {
  transform: rotate(270deg);
}

.nav-principal__lista .submenu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: calc(var(--z-menu) + 1);
  min-width: 200px;
  margin-top: var(--espaco-2);
  padding: var(--espaco-3);
  list-style: none;
  background-color: var(--cor-fundo-card);
  border-radius: var(--raio-md);
  box-shadow: var(--sombra-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--transicao-rapida), transform var(--transicao-rapida), visibility var(--transicao-rapida);
}

.nav-principal__lista li.tem-submenu:hover .submenu,
.nav-principal__lista li.tem-submenu:focus-within .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-principal__lista .submenu li {
  position: static;
}

.nav-principal__lista .submenu a {
  display: block;
  padding: var(--espaco-2) var(--espaco-3);
  border-radius: var(--raio-sm);
  color: var(--cor-secundaria);
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--transicao-rapida), color var(--transicao-rapida);
}

.nav-principal__lista .submenu a:hover,
.nav-principal__lista .submenu a:focus {
  color: var(--cor-primaria);
  background-color: rgba(6, 106, 169, 0.08);
}

/* ---- Painel "mega menu" — Organização / Repositório / Documentos ----
   Mesma caixa (fundo, raio, sombra) do .submenu padrão, só mais larga e
   com uma descrição de uma linha abaixo de cada link. A faixa colorida
   no topo identifica o grupo (azul/verde/amarelo da marca) — é a mesma
   paleta oficial, não uma cor decorativa arbitrária. */
.nav-principal__lista li.tem-mega > .submenu {
  min-width: 22rem;
  padding: var(--espaco-3);
  border-top: 3px solid var(--mega-cor, var(--cor-primaria));
}

.nav-principal__lista li.mega--azul    { --mega-cor: var(--cor-primaria); }
.nav-principal__lista li.mega--verde   { --mega-cor: var(--cor-verde); }
.nav-principal__lista li.mega--amarelo { --mega-cor: var(--cor-acento); }

.nav-principal__lista li.tem-mega > .submenu li + li {
  border-top: 1px solid var(--cor-borda);
}

.nav-principal__lista li.tem-mega > .submenu a {
  padding: var(--espaco-3) var(--espaco-3) 0;
  font-weight: var(--peso-semibold);
}

.nav-principal__lista li.tem-mega > .submenu .submenu__item-desc {
  display: block;
  padding: 2px var(--espaco-3) var(--espaco-3);
  font-size: var(--texto-xs);
  font-weight: var(--peso-normal);
  color: var(--cor-texto-suave);
  line-height: var(--linha-normal);
}

/* ---- Mobile: painel inline por clique/toque (JS em child.js) ---- */
.menu-mobile__lista li.tem-submenu {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Mesmo princípio do desktop: o link herda display:inline do tema-pai
   e quebrava em duas linhas. O container pai (.tem-submenu) já
   centraliza com align-items:center; aqui só garante texto+seta na
   mesma linha. */
.menu-mobile__lista li.tem-submenu > a {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-1);
  white-space: nowrap;
}

.menu-mobile__lista .submenu {
  max-height: 0;
  overflow: hidden;
  list-style: none;
  text-align: center;
  transition: max-height var(--transicao-suave);
}

.menu-mobile__lista li.tem-submenu.aberto .submenu {
  max-height: 20rem;
}

.menu-mobile__lista li.tem-submenu.aberto .icone-submenu {
  transform: rotate(270deg);
}

.menu-mobile__lista .submenu a {
  display: block;
  padding: var(--espaco-2) 0;
  color: var(--cor-texto-invertido);
  font-size: var(--texto-lg);
  font-weight: var(--peso-medio);
  opacity: 0.75;
  text-decoration: none;
  transition: opacity var(--transicao-rapida);
}

.menu-mobile__lista .submenu a:hover {
  opacity: 1;
}

.menu-mobile__lista .submenu__item-desc {
  display: block;
  margin-top: -0.25rem;
  padding-bottom: var(--espaco-2);
  font-size: var(--texto-xs);
  color: var(--cor-texto-invertido);
  opacity: 0.5;
}

/* ================================================
   RODAPÉ / COORDENAÇÃO — PROFLETRAS
   O rodapé é a seção de Coordenação e Contato, fundo verde
   institucional da UNIFAP (mesma cor da barra-topo).
   ================================================ */
.site-footer {
  background-color: var(--cor-unifap);
  color: rgba(255, 255, 255, 0.6);
  padding: var(--espaco-16) 0 var(--espaco-8);
}

.footer-coordenacao {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espaco-3);
}

.footer-coordenacao__brasao {
  width: 4rem;
  height: 4rem;
  margin-bottom: var(--espaco-2);
}

.contato-info__eyebrow {
  display: block;
  font-size: var(--texto-xs);
  font-weight: var(--peso-semibold);
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.contato-info__titulo {
  color: var(--cor-texto-invertido);
  margin: 0 0 var(--espaco-4);
}

.contato-lista {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--espaco-6);
  width: 100%;
  margin: 0 0 var(--espaco-2);
  text-align: left;
}

.contato-lista__item dt {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  font-size: var(--texto-xs);
  font-weight: var(--peso-semibold);
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--espaco-1);
}

.contato-lista__item dt svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.contato-lista__item dd {
  font-size: var(--texto-md);
  color: var(--cor-texto-invertido);
  margin: 0;
}

.contato-lista__item dd a {
  color: var(--cor-texto-invertido);
  text-decoration: none;
  transition: opacity var(--transicao-rapida);
}

.contato-lista__item dd a:hover {
  opacity: 0.75;
}

.footer-rodape {
  margin-top: var(--espaco-6);
  padding-top: var(--espaco-6);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  text-align: center;
  font-size: var(--texto-xs);
}

@media (max-width: 640px) {
  .contato-lista {
    grid-template-columns: 1fr;
  }
}

/* ================================================
   CONTEÚDO PADRÃO — PROFLETRAS
   Usado pelo index.php (páginas novas sem template próprio):
   Apresentação, Coordenação, Processos Seletivos, Editais 2026.
   Container mais estreito, melhor pra texto corrido.
   ================================================ */
.secao-conteudo-padrao {
  padding: var(--secao-padding-y) 0;
}

.secao-conteudo-padrao .conteudo-padrao {
  max-width: 800px;
}

.conteudo-padrao__titulo {
  font-family: var(--fonte-titulo);
  font-size: var(--texto-3xl);
  font-weight: var(--peso-extrabold);
  color: var(--cor-texto);
  line-height: var(--linha-apertada);
  margin-bottom: var(--espaco-6);
}

.conteudo-padrao__corpo {
  font-size: var(--texto-md);
  color: var(--cor-texto-suave);
  line-height: var(--linha-relaxada);
}

.conteudo-padrao__corpo p {
  margin-bottom: var(--espaco-5);
}

/* Subtítulos dentro do conteúdo padrão — usados pelas páginas
   institucionais novas (O Programa, Corpo Discente, Formulários...) pra
   quebrar o conteúdo em blocos, sem precisar de uma classe própria por
   página. */
.conteudo-padrao__corpo h2 {
  font-family: var(--fonte-titulo);
  font-size: var(--texto-xl);
  font-weight: var(--peso-bold);
  color: var(--cor-texto);
  margin: var(--espaco-8) 0 var(--espaco-3);
}

.conteudo-padrao__corpo h2:first-child {
  margin-top: 0;
}

/* Sub-subtítulo — usado, por exemplo, pelo nome de cada grupo na página
   "Grupos de Pesquisa", um nível abaixo do h2 de cada bloco. */
.conteudo-padrao__corpo h3 {
  font-size: var(--texto-md);
  font-weight: var(--peso-semibold);
  color: var(--cor-texto);
  margin: var(--espaco-5) 0 var(--espaco-1);
}

.conteudo-padrao__corpo ul {
  margin: 0 0 var(--espaco-5);
  padding-left: 1.25em;
}

.conteudo-padrao__corpo ul li {
  margin-bottom: var(--espaco-2);
}

/* ---- Lista "campo: valor" — usada por Defesa e páginas parecidas ---- */
.lista-campos {
  list-style: none;
  margin: 0 0 var(--espaco-5);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--espaco-3);
}

.lista-campos__item {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-2) var(--espaco-4);
  border-bottom: 1px solid var(--cor-borda);
  padding-bottom: var(--espaco-3);
}

.lista-campos__rotulo {
  min-width: 160px;
  font-weight: var(--peso-semibold);
  color: var(--cor-texto);
}

.lista-campos__valor {
  color: var(--cor-texto-suave);
}

/* Sublista (ex: banca examinadora dentro do item "Banca Examinadora") */
.lista-campos__sublista {
  list-style: none;
  width: 100%;
  margin: var(--espaco-2) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--espaco-1);
  color: var(--cor-texto-suave);
  font-size: var(--texto-sm);
}

/* ---- Tabela institucional responsiva — usada por Corpo Docente ---- */
.tabela-institucional__wrap {
  overflow-x: auto;
}

.tabela-institucional {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--espaco-5);
}

.tabela-institucional th,
.tabela-institucional td {
  text-align: left;
  padding: var(--espaco-3);
  border-bottom: 1px solid var(--cor-borda);
  font-size: var(--texto-sm);
  white-space: nowrap;
}

.tabela-institucional th {
  font-weight: var(--peso-semibold);
  color: var(--cor-texto);
}

.tabela-institucional td {
  color: var(--cor-texto-suave);
}

/* Vira "card por linha" no mobile, em vez de rolar a tabela na horizontal */
@media (max-width: 640px) {
  .tabela-institucional thead {
    display: none;
  }
  .tabela-institucional,
  .tabela-institucional tbody,
  .tabela-institucional tr,
  .tabela-institucional td {
    display: block;
    width: 100%;
    white-space: normal;
  }
  .tabela-institucional tr {
    margin-bottom: var(--espaco-4);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-md);
    padding: var(--espaco-3);
  }
  .tabela-institucional td {
    border: none;
    padding: var(--espaco-1) 0;
  }
  .tabela-institucional td::before {
    content: attr(data-rotulo);
    display: block;
    font-size: var(--texto-xs);
    font-weight: var(--peso-semibold);
    color: var(--cor-texto);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
}

/* ---- Acordeão institucional — mesmo princípio <details>/<summary>
   nativo (sem JS) usado antes na seção de FAQ removida ---- */
.acordeao-instit {
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-lg);
  overflow: hidden;
  margin-bottom: var(--espaco-4);
}

.acordeao-instit summary {
  padding: var(--espaco-4) var(--espaco-5);
  background-color: var(--cor-fundo-card);
  color: var(--cor-texto);
  font-weight: var(--peso-semibold);
  cursor: pointer;
  list-style: none;
}

.acordeao-instit summary::-webkit-details-marker {
  display: none;
}

.acordeao-instit[open] summary {
  border-bottom: 1px solid var(--cor-borda);
}

.acordeao-instit__corpo {
  padding: var(--espaco-4) var(--espaco-5);
  font-size: var(--texto-sm);
  color: var(--cor-texto-suave);
}

.acordeao-instit__corpo p {
  margin: 0;
}

/* ---- Formulários agrupados por categoria ---- */
.form-categoria {
  margin-bottom: var(--espaco-8);
}

.form-categoria__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
}

.form-categoria__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-2) var(--espaco-3);
  padding: var(--espaco-3) var(--espaco-4);
  background-color: var(--cor-fundo-card);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
}

.form-categoria__nome {
  color: var(--cor-texto);
  font-size: var(--texto-sm);
}

.form-categoria__status {
  font-size: var(--texto-xs);
  color: var(--cor-texto-suave);
  font-style: italic;
}

/* ---- Cartão de grupo de pesquisa (reaproveita .card do tema-pai) ---- */
.grupo-pesquisa {
  margin-bottom: var(--espaco-5);
}

.grupo-pesquisa:last-child {
  margin-bottom: 0;
}

.grupo-pesquisa h3 {
  margin-top: 0;
}

.grupo-pesquisa .lista-campos {
  margin-bottom: 0;
}

.grupo-pesquisa .lista-campos__item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* ================================================
   QUADRO INSTITUCIONAL — PROFLETRAS
   Lista de pessoas (Coordenação Nacional, Conselho Superior,
   Secretaria Nacional) sem foto real — cada linha usa um monograma
   circular no lugar de retrato, na cor do grupo (--quadro-cor), com a
   mesma lógica de lista com divisórias já usada em .lista-campos (sem
   sombra, sem card).
   ================================================ */
.quadro-lista {
  list-style: none;
  margin: 0 0 var(--espaco-5);
  padding: 0;
  border-top: 1px solid var(--cor-borda);
}

.quadro-lista--azul    { --quadro-cor: var(--cor-primaria); --quadro-cor-texto: #fff; }
.quadro-lista--verde   { --quadro-cor: var(--cor-verde);    --quadro-cor-texto: #fff; }
.quadro-lista--amarelo { --quadro-cor: var(--cor-acento);   --quadro-cor-texto: var(--cor-secundaria); }

.quadro-item {
  display: flex;
  align-items: flex-start;
  gap: var(--espaco-4);
  padding: var(--espaco-5) 0;
  border-bottom: 1px solid var(--cor-borda);
}

.quadro-item__avatar {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: var(--raio-full);
  background-color: var(--quadro-cor);
  color: var(--quadro-cor-texto);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fonte-titulo);
  font-size: var(--texto-sm);
  font-weight: var(--peso-bold);
  letter-spacing: 0.01em;
}

.quadro-item__corpo {
  min-width: 0;
}

.quadro-item__nome {
  margin: 0;
  font-size: var(--texto-md);
  font-weight: var(--peso-semibold);
  color: var(--cor-texto);
}

.quadro-item__papel {
  margin: var(--espaco-1) 0 0;
  font-size: var(--texto-sm);
  color: var(--cor-texto-suave);
  line-height: var(--linha-normal);
}

.quadro-item__contato {
  margin: var(--espaco-2) 0 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--texto-sm);
  color: var(--cor-texto-suave);
}

.quadro-item__contato a {
  color: var(--cor-primaria);
  text-decoration: none;
}

.quadro-item__contato a:hover {
  text-decoration: underline;
}

/* ================================================
   ARQUIVOS — REPOSITÓRIO E DOCUMENTOS — PROFLETRAS
   Lista de itens publicados (mesmo princípio de linhas com divisória
   de .quadro-lista/.lista-campos) e estado vazio.
   ================================================ */
.arquivo-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--cor-borda);
}

.arquivo-item {
  padding: var(--espaco-4) 0;
  border-bottom: 1px solid var(--cor-borda);
}

.arquivo-item__titulo {
  font-size: var(--texto-md);
  font-weight: var(--peso-semibold);
  color: var(--cor-texto);
  text-decoration: none;
}

.arquivo-item__titulo:hover {
  color: var(--cor-primaria);
}

.arquivo-item__resumo {
  margin: var(--espaco-1) 0 0;
  font-size: var(--texto-sm);
  color: var(--cor-texto-suave);
  line-height: var(--linha-normal);
}

.arquivo-item__meta {
  margin: var(--espaco-1) 0 0;
  font-size: var(--texto-xs);
  color: var(--cor-texto-suave);
}

.arquivo-vazio {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--espaco-3);
  padding: var(--espaco-8) 0;
}

.arquivo-vazio__icone {
  width: 2rem;
  height: 2rem;
  color: var(--cor-borda);
}

.arquivo-vazio__texto {
  margin: 0;
  max-width: 46ch;
  color: var(--cor-texto-suave);
}