/* Didasteia — páginas institucionais de layout próprio (Sobre, Como traduzimos)
   Usa as variáveis de css/site.css, inclusive no modo escuro. */

.institucional {
  --rubrica: #9a4f05;
  --moldura: #d9c9a8;
  --ouro: #c8913f;
  --botao-fundo: #1e4d7b;
  --botao-texto: #ffffff;
  --grego: "EB Garamond", Georgia, serif;
  display: block;
  font-size: 17px;
  line-height: 1.6;
}
:root[data-theme="dark"] .institucional {
  --rubrica: #e3a15f;
  --moldura: #5a4a2e;
  --botao-fundo: #8dbbe6;
  --botao-texto: #10243a;
}

/* Texto sempre justificado, sem divisão de palavras */
.institucional p,
.institucional figcaption,
.institucional blockquote,
.institucional li {
  text-align: justify;
  hyphens: manual;
  -webkit-hyphens: manual;
}
.institucional .centro,
.institucional .centro p { text-align: center; }

.institucional h1,
.institucional h2,
.institucional h3 { font-family: var(--serif); color: var(--texto); margin: 0; }
.institucional h1 { font-size: clamp(30px, 5vw, 44px); line-height: 1.22; text-wrap: balance; }
.institucional h2 { font-size: clamp(26px, 3.6vw, 34px); line-height: 1.25; text-wrap: balance; }
.institucional p { margin: 0; }

/* ---------- Blocos ---------- */
.inst-secao { padding-top: 88px; padding-bottom: 88px; }
.inst-branca { background: var(--superficie); border-top: 1px solid var(--borda); border-bottom: 1px solid var(--borda); }
.inst-branca + .inst-branca { border-top: 0; }
.inst-pilha { display: flex; flex-direction: column; gap: 32px; }
.inst-cabeca { display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
.rubrica { font-size: 14px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rubrica); }
.inst-apoio { color: var(--texto-2); }

/* ---------- Imagens ---------- */
/* Imagens ampliáveis: o visor está em js/comum.js e os estilos dele em css/site.css */
.inst-figura > .ampliar, .ct-heroi-figura > .ampliar { display: block; width: 100%; cursor: zoom-in; border-radius: 6px; }
.inst-figura { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.inst-figura img {
  display: block; width: 100%; height: auto; border-radius: 6px;
  box-shadow: 0 0 0 1px var(--moldura), 0 12px 28px rgba(19, 54, 89, 0.16);
}
.institucional .inst-figura figcaption {
  font-family: var(--serif); font-style: italic; font-size: 15px; line-height: 1.55;
  color: var(--mudo); text-align: center;
}

/* ---------- Sobre: abertura ---------- */
.heroi { display: flex; flex-wrap: wrap; align-items: center; gap: 48px 64px; padding-top: 72px; padding-bottom: 80px; }
.heroi-texto { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.heroi-texto .inst-lead { font-size: 20px; line-height: 1.6; color: var(--texto-2); max-width: 34em; }
.heroi .inst-figura { flex: 1 1 460px; min-width: 0; }
.inst-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 6px; }
.botao-principal {
  min-height: 48px; padding: 0 24px; border-radius: 10px; background: var(--botao-fundo); color: var(--botao-texto);
  font-weight: 700; text-decoration: none; display: inline-flex; align-items: center;
}
.botao-principal:hover { color: var(--botao-texto); filter: brightness(1.1); }
/* Botão dourado: leva ao APOIA.SE */
.botao-ouro {
  min-height: 52px; padding: 0 30px; border-radius: 999px; color: #2b1a04; letter-spacing: 0.01em;
  background: linear-gradient(180deg, #f3d18f 0%, #e0aa55 48%, #c8913f 52%, #b9802f 100%);
  box-shadow: inset 0 1px 0 rgba(255, 246, 225, 0.75), inset 0 -1px 0 rgba(120, 72, 12, 0.35), 0 0 0 1px #a8732b, 0 8px 22px rgba(176, 118, 36, 0.32);
  text-shadow: 0 1px 0 rgba(255, 240, 205, 0.55);
}
.botao-ouro:hover { color: #2b1a04; filter: brightness(1.06) saturate(1.05); }
.botao-ouro:focus-visible { outline: 3px solid #1e4d7b; outline-offset: 3px; }
:root[data-theme="dark"] .botao-ouro { box-shadow: inset 0 1px 0 rgba(255, 246, 225, 0.75), inset 0 -1px 0 rgba(120, 72, 12, 0.35), 0 0 0 1px #d39b4a, 0 8px 22px rgba(0, 0, 0, 0.45); }
.link-seta { min-height: 48px; display: inline-flex; align-items: center; font-weight: 600; }

/* ---------- Sobre: o nome ---------- */
.nome { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 48px 64px; }
.nome .inst-figura { flex: 1 1 300px; max-width: 380px; }
.nome-texto { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.nome-texto > p { max-width: 36em; }
.palavras-gregas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 16px; }
.cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.grego { font-family: var(--grego); font-size: 36px; line-height: 1.1; color: var(--primaria); }
.translit { font-family: var(--grego); font-style: italic; font-size: 19px; color: var(--mudo); }
.institucional .cartao p { margin-top: 4px; color: var(--texto-2); }
.nome-conclusao { font-family: var(--serif); font-size: 19px; line-height: 1.75; color: var(--texto); }

/* ---------- Sobre: faixa da citação (sempre escura) ---------- */
.faixa-citacao {
  background-color: #133659;
  background-image:
    radial-gradient(ellipse 60% 70% at 50% 50%, rgba(13, 38, 64, 0.94) 0%, rgba(13, 38, 64, 0.85) 55%, rgba(13, 38, 64, 0) 100%),
    radial-gradient(circle, #f2a65a 0 1.3px, transparent 1.9px),
    radial-gradient(circle, #f6d4a8 0 0.8px, transparent 1.3px);
  background-size: 100% 100%, 52px 52px, 31px 31px;
  background-position: 0 0, 0 0, 15px 19px;
  color: #ffffff;
}
.faixa-citacao-dentro {
  max-width: 900px; margin: 0 auto; padding: 96px 24px;
  display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center;
}
.institucional .faixa-citacao p { text-align: center; text-wrap: balance; }
.citacao-latim { font-family: var(--grego); font-style: italic; font-weight: 500; font-size: clamp(19px, 2.6vw, 23px); line-height: 1.5; color: #f9e2c2; }
.citacao-pt { font-family: var(--serif); font-weight: 700; font-size: clamp(21px, 3.2vw, 28px); line-height: 1.5; color: #ffffff; }
.citacao-autor { font-size: 17px; font-weight: 700; color: #ffffff; }

/* ---------- Sobre: missão, acervo, princípios, ajuda ---------- */
.tres-colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 32px 40px; }
.coluna-filete { display: flex; flex-direction: column; gap: 10px; border-top: 2px solid var(--primaria); padding-top: 18px; }
.coluna-filete h3 { font-size: 21px; }
.coluna-filete p { color: var(--texto-2); }
.missao-figura { margin-top: 16px; width: 100%; max-width: 640px; align-self: center; }

.seculos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 16px; }
.seculos li { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 22px; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.seculo-num { font-family: var(--serif); font-weight: 700; font-size: 30px; color: var(--primaria); }
.seculo-nome { font-weight: 700; }
.seculo-autores { font-size: 15px; color: var(--mudo); }
.numeros { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 72px; padding-top: 8px; border-top: 1px solid var(--borda); text-align: center; }
.numeros div { display: flex; flex-direction: column; align-items: center; padding-top: 18px; }
.numero { font-family: var(--serif); font-weight: 700; font-size: 34px; color: var(--primaria); }
.numero-rotulo { color: var(--mudo); }

.principios { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 36px 48px; }
.principios > div { display: flex; flex-direction: column; gap: 8px; }
.principios h3 { font-family: var(--sans); font-size: 19px; color: var(--primaria); }
.principios p { color: var(--texto-2); }

.ajuda { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 20px; }
.ajuda .cartao { padding: 26px; gap: 12px; }
.ajuda .cartao h3 { font-size: 21px; }
.institucional .ajuda .cartao p { margin-top: 0; flex: 1 1 auto; }
.ajuda .apoie { align-self: flex-start; min-height: 44px; padding: 0 20px; display: inline-flex; align-items: center; font-weight: 700; }
.ajuda .link-seta { align-self: flex-start; min-height: 44px; font-weight: 700; }
.links-contato { display: flex; flex-wrap: wrap; column-gap: 22px; }
.institucional .creditos { font-size: 14px; color: var(--mudo); }

/* ---------- Como traduzimos ----------
   O ensaio tem uma coluna de leitura (até 680px) e, no computador, uma margem à direita
   (--ct-margem + --ct-vao) onde ficam as figuras .ct-margem. Abaixo de 900px a margem some
   e as figuras entram no texto. */
.ct { --ct-margem: 320px; --ct-vao: 64px; --ct-largura: calc(680px + var(--ct-margem) + var(--ct-vao)); }

/* Abertura: o Evangelho (faixa sempre escura, como a da citação) */
.ct-heroi-grade {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px 72px; align-items: center;
  max-width: calc(var(--ct-largura) + 48px); padding-top: 88px; padding-bottom: 96px;
}
.ct-heroi-figura { grid-column: 1; grid-row: 1; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.ct-heroi-figura img {
  display: block; width: 100%; height: auto; border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(242, 166, 90, 0.55), 0 20px 44px rgba(0, 0, 0, 0.38);
}
.institucional .ct-heroi-figura figcaption { font-family: var(--serif); font-style: italic; font-size: 15px; line-height: 1.55; color: #dccbb2; text-align: center; }
.ct-heroi-texto { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; align-items: center; gap: 28px; }
.institucional .ct-rubrica {
  font-family: var(--sans); font-size: 14px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  line-height: 1.4; color: #f2a65a;
}
.ct-evangelho { margin: 0; display: flex; flex-direction: column; gap: 20px; }
.institucional .ct-evangelho p { text-align: center; text-wrap: balance; }
.ct-pergunta { font-family: var(--serif); font-style: italic; font-size: clamp(18px, 1.9vw, 21px); line-height: 1.6; color: #f9e2c2; }
.ct-resposta { font-family: var(--serif); font-weight: 700; font-size: clamp(29px, 3.5vw, 43px); line-height: 1.3; color: #ffffff; }
.ct-ref { display: flex; align-items: center; gap: 14px; font-size: 17px; font-weight: 700; letter-spacing: 0.06em; color: #f6d4a8; }
.ct-ref::before, .ct-ref::after { content: ""; width: 40px; height: 1px; background: #c8913f; }

/* Espaço reservado para imagem (até a imagem chegar) */
.ct-espaco-imagem {
  aspect-ratio: 4 / 3; border: 1.5px dashed rgba(242, 166, 90, 0.75); border-radius: 6px; background: rgba(255, 255, 255, 0.05);
  display: flex; align-items: center; justify-content: center; padding: 24px; text-align: center;
  font-family: var(--serif); font-style: italic; font-size: 16px; line-height: 1.6; color: #f6d4a8;
}
.ct-espaco-claro { aspect-ratio: 4 / 5; border-color: var(--ouro); background: var(--superficie); color: var(--rubrica); }

/* Ensaio */
.ct-secao { padding: 96px 24px 0; }
.ct-prologo { padding-top: 80px; }
.ct-ultima { padding-bottom: 104px; }
.ct-ensaio {
  box-sizing: content-box; max-width: 680px; margin: 0 auto; padding-right: calc(var(--ct-margem) + var(--ct-vao));
  display: flow-root; font-family: var(--serif); font-size: 18px; line-height: 1.85; color: var(--texto);
}
.ct-ensaio > p, .ct-trecho > p { margin: 0 0 24px; }
.ct-ensaio > p:last-child, .ct-trecho > p:last-child { margin-bottom: 0; }
/* Trecho: grupo de parágrafos que limita até onde a figura da margem acompanha a leitura */
.ct-trecho { display: flow-root; margin-bottom: 24px; }
.ct-trecho:last-child { margin-bottom: 0; }
.ct-cabeca { display: flex; flex-direction: column; gap: 14px; margin-bottom: 36px; }
.ct-numeral { display: flex; align-items: center; gap: 14px; font-family: var(--serif); font-weight: 700; font-size: 15px; letter-spacing: 0.18em; color: var(--rubrica); }
.ct-numeral::after { content: ""; width: 48px; height: 1px; background: var(--ouro); }
.capitular::first-letter { float: left; font-family: var(--serif); font-weight: 700; font-size: 66px; line-height: 0.9; padding: 6px 12px 0 0; color: var(--primaria); }
.vinheta { display: flex; justify-content: center; gap: 14px; padding: 18px 0; }
.vinheta span { width: 8px; height: 8px; background: var(--ouro); transform: rotate(45deg); }

/* Frases em destaque (o texto é o do ensaio, só muda a apresentação) */
.ct-ensaio > .ct-frase { margin: 40px 0; padding-left: 24px; border-left: 3px solid var(--ouro); font-weight: 700; font-size: 22px; line-height: 1.55; color: var(--primaria); }
.ct-ensaio > .ct-frase-grande { font-size: clamp(24px, 2.8vw, 30px); line-height: 1.4; }

/* Figuras na margem */
.ct-margem { float: right; clear: right; width: var(--ct-margem); margin: 8px calc(-1 * (var(--ct-margem) + var(--ct-vao))) 32px 0; }
.ct-margem.inst-figura { align-items: stretch; }
.ct-fixa { position: sticky; top: 112px; }  /* acompanha a leitura até o fim da seção (ou do .ct-trecho) */
/* No computador, o topo da figura coincide com o topo das letras da 1ª linha do parágrafo ao lado
   (texto de 18px com entrelinha 1,85: as letras começam 5px abaixo da caixa da linha), e a figura
   de um .ct-trecho para no fim da última linha do trecho. */
@media (min-width: 901px) {
  .ct-margem.ct-topo-linha { margin-top: 5px; }
  /* 3,6px: diferença entre o pé das letras da legenda e o da linha de 18px */
  .ct-trecho > .ct-margem { margin-bottom: 3.6px; }
}
.ct-p52 img { width: auto; max-width: 250px; }  /* 349 px no original: não ampliar */
.ct-p52 > .ampliar { width: auto; align-self: center; }
/* No computador, o papiro termina na altura da última linha do 2º parágrafo ("…todas as coisas foram feitas.") */
@media (min-width: 1046px) { .ct-p52 img { height: 277px; width: auto; max-width: none; } }
@media (min-width: 901px) and (max-width: 1045px) { .ct-p52 img { height: 310px; width: auto; max-width: none; } }
.institucional .ct-margem figcaption { font-size: 14px; }
.ct-silicio { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.elemento {
  width: 168px; height: 168px; box-sizing: border-box; padding: 12px 14px 14px; border: 2px solid var(--primaria); border-radius: 10px;
  background: var(--superficie); box-shadow: 0 0 0 6px var(--primaria-clara);
  display: grid; grid-template-rows: auto 1fr auto auto; font-family: var(--sans); color: var(--primaria);
}
.el-num { font-size: 18px; font-weight: 700; line-height: 1; }
.el-simbolo { align-self: center; justify-self: center; font-family: var(--serif); font-weight: 700; font-size: 62px; line-height: 1; }
.el-nome { justify-self: center; font-size: 16px; font-weight: 700; line-height: 1.3; }
.el-massa { justify-self: center; font-size: 13px; line-height: 1.3; color: var(--mudo); }
.institucional .ct-legenda { font-family: var(--serif); font-style: italic; font-size: 14px; line-height: 1.55; color: var(--mudo); text-align: center; }

/* Declaração na largura toda (fora do ensaio, para a figura fixa não passar por cima) */
.ct-declaracao { max-width: var(--ct-largura); margin: 56px auto 0; font-family: var(--serif); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.institucional .ct-declaracao p { max-width: 820px; text-align: center; text-wrap: balance; font-size: 21px; line-height: 1.7; color: var(--texto-2); }
.ct-centro { display: block; margin-bottom: 16px; font-weight: 700; font-size: clamp(25px, 3vw, 33px); line-height: 1.4; color: var(--texto); }
.ct-centro strong { color: var(--primaria); }

/* Como funciona, na prática: linha do tempo larga */
.ct-pratica { margin-top: 104px; }
.ct-pratica > .limite { max-width: calc(var(--ct-largura) + 48px); padding-top: 88px; padding-bottom: 88px; }
.ct-pratica-cabeca { margin-bottom: 40px; }
.ct-passos { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.ct-passos li {
  position: relative; display: grid; grid-template-columns: 52px minmax(0, 280px) minmax(0, 1fr); column-gap: 32px; align-items: start;
  padding: 30px 0; border-top: 1px solid var(--borda);
}
.ct-passos li:last-child { border-bottom: 1px solid var(--borda); }
.ct-passo-num {
  width: 50px; height: 50px; border-radius: 50%; border: 1.5px solid var(--ouro); background: var(--superficie);
  display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-weight: 700; font-size: 20px; color: var(--rubrica);
}
.institucional .ct-passos h3 { padding-top: 11px; font-size: 21px; line-height: 1.35; text-align: left; text-wrap: balance; }
.ct-passos p { padding-top: 9px; font-size: 17px; line-height: 1.75; color: var(--texto-2); }

/* Fecho */
.ct-fecho .faixa-citacao-dentro { gap: 24px; }
.institucional .ct-fecho-texto { max-width: 640px; font-family: var(--serif); font-size: 19px; line-height: 1.75; color: #f9e2c2; }
.institucional .ct-fecho-assinatura { margin-top: 8px; font-family: var(--serif); font-style: italic; font-size: 15px; color: #dccbb2; }
.ct-creditos { max-width: calc(var(--ct-largura) + 48px); padding-top: 40px; padding-bottom: 56px; }

/* Tela média: margem mais estreita */
@media (max-width: 1100px) {
  .ct { --ct-margem: 270px; --ct-vao: 48px; }
  .ct-heroi-grade { gap: 40px 48px; }
}

/* Tablet: sem margem; as figuras entram no texto, à direita */
@media (max-width: 900px) {
  .ct-heroi-grade { grid-template-columns: minmax(0, 1fr); padding-top: 64px; padding-bottom: 72px; }
  .ct-heroi-texto { grid-column: 1; grid-row: 1; }
  .ct-heroi-figura { grid-column: 1; grid-row: 2; width: 100%; max-width: 600px; justify-self: center; }
  .ct-ensaio { padding-right: 0; }
  .ct-margem { width: 42%; margin: 8px 0 24px 32px; }
  .ct-fixa { position: static; }
  .ct-ensaio > .ct-frase { text-align: left; text-wrap: balance; }
  .ct-passos li { grid-template-columns: 50px minmax(0, 1fr); row-gap: 4px; }
  .ct-passos h3, .ct-passos p { grid-column: 2; }
  .ct-passo-num { grid-row: 1 / span 2; }
}

/* ---------- Celular ---------- */
@media (max-width: 760px) {
  .inst-secao { padding-top: 56px; padding-bottom: 56px; }
  .heroi { padding-top: 40px; padding-bottom: 48px; gap: 32px; }
  .heroi-texto .inst-lead { font-size: 18px; }
  .faixa-citacao-dentro { padding: 64px 16px; }
  .ct-heroi-grade { padding-top: 48px; padding-bottom: 56px; gap: 36px; }
  .ct-heroi-texto { gap: 22px; }
  .ct-secao { padding: 64px 16px 0; }
  .ct-prologo { padding-top: 48px; }
  .ct-ultima { padding-bottom: 72px; }
  .ct-ensaio { font-size: 17px; line-height: 1.8; }
  .ct-cabeca { margin-bottom: 28px; }
  .ct-ensaio > .ct-frase { margin: 32px 0; padding-left: 18px; font-size: 20px; }
  .ct-declaracao { margin-top: 40px; }
  .institucional .ct-declaracao p { font-size: 18px; }
  .ct-pratica { margin-top: 72px; }
  .ct-pratica > .limite { padding-top: 56px; padding-bottom: 56px; }
  .ct-passos li { grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; padding: 24px 0; }
  .ct-passo-num { width: 40px; height: 40px; font-size: 17px; }
  .institucional .ct-passos h3 { padding-top: 6px; font-size: 19px; }
  .ct-passos p { padding-top: 6px; font-size: 16px; }
  .capitular::first-letter { font-size: 56px; }
  .numeros { gap: 8px 40px; }
}

/* Celular estreito: figuras em largura total */
@media (max-width: 600px) {
  .ct-margem { float: none; width: 100%; margin: 32px 0; }
  .ct-espaco-claro { aspect-ratio: 4 / 3; }
}

/* ---------- Apoiadores (reúne o apoio: meta, níveis, lista, perguntas) ---------- */
/* Meta mensal: faixa escura com o valor dentro de um arco e o que a meta sustenta */
.ap-meta-grade { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 48px 80px; align-items: center; padding-top: 96px; padding-bottom: 96px; }
.ap-arco { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 64px 28px 52px; border: 1.5px solid rgba(242, 166, 90, 0.7); border-radius: 180px 180px 4px 4px; }
.ap-arco::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(242, 166, 90, 0.3); border-radius: 170px 170px 2px 2px; pointer-events: none; }
.ap-arco .chi-rho { margin-bottom: 8px; }
.ap-rubrica { font-size: 14px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #f2a65a; }
.institucional .ap-valor { font-family: var(--serif); font-weight: 700; font-size: clamp(52px, 7vw, 68px); line-height: 1.05; color: #ffffff; text-align: center; white-space: nowrap; }
.ap-valor small { font-family: var(--sans); font-weight: 600; font-size: 20px; color: #f6d4a8; margin-left: 4px; }
.institucional .ap-valor-sub { font-family: var(--serif); font-size: 19px; line-height: 1.5; color: #ffffff; text-align: center; text-wrap: balance; max-width: 15em; }
.institucional .ap-meta .ap-valor-ano { margin-top: 16px; font-family: var(--serif); font-style: italic; font-size: 15px; color: #dccbb2; text-align: center; }
.ap-meta-texto { display: flex; flex-direction: column; gap: 14px; }
.institucional .ap-meta h2 { color: #ffffff; }
.institucional .ap-meta .ap-meta-intro { color: #e9dcc6; max-width: 36em; text-align: left; text-wrap: pretty; }
.ap-custos { list-style: none; margin: 14px 0 0; padding: 0; position: relative; }
.ap-custos::before { content: ""; position: absolute; left: 25px; top: 30px; bottom: 30px; width: 1.5px; background: rgba(242, 166, 90, 0.45); }
.institucional .ap-custos li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 18px; align-items: center; padding: 9px 0; text-align: left; position: relative; }
.ap-no { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #133659; box-shadow: 0 0 0 1.5px rgba(242, 166, 90, 0.7), 0 0 0 6px #10304f; }
.ap-no svg { width: 26px; height: 26px; }
.institucional .ap-custos h3 { font-family: var(--serif); font-size: 18px; color: #ffffff; }
.institucional .ap-meta .ap-custos p { font-size: 16px; line-height: 1.5; color: #e9dcc6; text-align: left; margin-top: 2px; }
.institucional .ap-meta .ap-meta-fim { text-wrap: pretty; margin-top: 10px; padding-top: 18px; border-top: 1px solid rgba(242, 166, 90, 0.35); font-family: var(--serif); font-weight: 700; font-size: 19px; color: #f9e2c2; text-align: left; }

/* Níveis: cartões com imagem histórica */
.ap-niveis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); gap: 28px; }
.ap-nivel { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; display: flex; flex-direction: column; }
.ap-nivel-figura { margin: 0; display: flex; flex-direction: column; }
.ap-nivel-figura > .ampliar { display: block; cursor: zoom-in; }
.ap-nivel-figura img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-bottom: 1px solid var(--borda); }
.institucional .ap-nivel-figura figcaption { min-height: calc(2 * 1.5em + 10px); padding: 10px 26px 0; font-family: var(--serif); font-style: italic; font-size: 13.5px; line-height: 1.5; color: var(--mudo); text-align: center; }
.ap-nivel-corpo { flex: 1 1 auto; display: flex; flex-direction: column; gap: 12px; padding: 18px 28px 26px; }
.institucional .ap-nivel h3 { font-size: 26px; color: var(--primaria); }
.institucional .ap-nivel-corpo > p { color: var(--texto-2); }
.institucional .ap-nivel-recompensa { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--borda); font-size: 15px; font-weight: 700; color: var(--rubrica); text-align: center; display: flex; align-items: center; justify-content: center; gap: 10px; }
.ap-nivel-recompensa::before { content: ""; flex: 0 0 9px; height: 9px; transform: rotate(45deg); background: var(--ouro); }
.ap-acao { display: flex; justify-content: center; }

/* Lista de apoiadores */
.apoiadores-lista { list-style: none; margin: 0; padding: 0; columns: 4 220px; column-gap: 40px; }
.institucional .apoiadores-lista li { break-inside: avoid; padding: 8px 0; border-bottom: 1px solid var(--borda); font-family: var(--serif); font-size: 18px; text-align: left; }
.apoiadores-conta { font-weight: 600; color: var(--texto-2); }
.apoiadores-vazio { padding: 40px 24px; border: 1.5px dashed var(--moldura); border-radius: var(--raio); background: var(--fundo); }
.institucional .apoiadores-vazio p { text-align: center; font-family: var(--serif); font-size: 19px; color: var(--texto-2); }
.institucional .apoiadores-nota { font-size: 15px; line-height: 1.7; color: var(--mudo); text-align: center; }
.apoiadores-grupo { display: flex; flex-direction: column; gap: 14px; }
.institucional h3.apoiadores-nivel { font-family: var(--sans); font-size: 14px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rubrica); padding-bottom: 10px; border-bottom: 2px solid var(--borda); }

/* Perguntas frequentes */
.ap-perguntas { display: flex; flex-direction: column; max-width: 860px; border-top: 1px solid var(--borda); }
.ap-perguntas details { border-bottom: 1px solid var(--borda); }
.ap-perguntas summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 4px; min-height: 48px; font-family: var(--serif); font-weight: 700; font-size: 19px; color: var(--texto); }
.ap-perguntas summary::-webkit-details-marker { display: none; }
.ap-perguntas summary::after { content: ""; flex: 0 0 10px; width: 10px; height: 10px; border-right: 2px solid var(--ouro); border-bottom: 2px solid var(--ouro); transform: translateY(-3px) rotate(45deg); transition: transform 0.15s; }
.ap-perguntas details[open] summary::after { transform: translateY(3px) rotate(-135deg); }
.ap-perguntas summary:hover { color: var(--primaria); }
.institucional .ap-perguntas details p { padding: 0 4px 20px; color: var(--texto-2); max-width: 46em; }

@media (max-width: 900px) {
  .ap-meta-grade { grid-template-columns: minmax(0, 1fr); justify-items: center; padding-top: 72px; padding-bottom: 72px; }
  .ap-arco { width: min(100%, 360px); }
  .ap-meta-texto { width: 100%; max-width: 620px; }
}
@media (max-width: 760px) {
  .institucional .ap-nivel-figura figcaption { min-height: 0; }
  .ap-nivel-corpo { padding: 16px 20px 22px; }
  .institucional .ap-nivel h3 { font-size: 23px; }
  .ap-perguntas summary { font-size: 17.5px; }
}