/* =========================================================================
   QUEM ATENDEMOS — a grade de medalhões

   A página mostra DEZ organizações. Cartão inteiro com história, números e
   títulos multiplicado por dez dava uma parede de texto: o leitor não
   conseguia comparar, porque nada tinha o mesmo tamanho — quem tinha três
   números ficava com o cartão do dobro da altura de quem não tinha nenhum.

   O QUE ENTRA: só a FOTO e o NOME na grade. Todas as fichas com a mesma
   silhueta, e a leitura vira reconhecimento — é assim que se lê uma lista de
   perfis. O resto (história, propósito, público, títulos, números, site e
   Instagram) mora na ficha que abre ao clicar.

   O MEDALHÃO é primo do `.s3-selo3d`: mesmo gradiente terracota, mesma crista
   de luz em cima, mesma sombra interna no pé. A diferença é que aqui ele é um
   ARO em volta da foto, e não um disco cheio — e reage ao ponteiro com
   inclinação real em 3D (oscs.js escreve --rx/--ry) e um reflexo que anda
   junto do cursor.

   AS FOTOS SÃO LOGOS, NÃO RETRATOS, e vieram em 150×150 — o tamanho do avatar
   do Instagram. Por isso o medalhão para em 124px: em 150 já começava a
   borrar. Duas não são quadradas (o brasão dos Conferentes, 159×117, e o
   escudo do Hulk Fights, 961×1136) e levam `data-ajuste="conter"`, senão o
   corte redondo decapitava as duas.
   ========================================================================= */

/* ---------------------------------------------------------------- o palco */
.s3-oscs-secao {
  position: relative;
  overflow: hidden;
  padding-block: var(--s3-e-11) var(--s3-e-12);
}
/* aurora quente atrás da grade: dá profundidade ao fundo sem desenhar nada
   que dispute com os medalhões */
.s3-oscs-secao::before {
  content: '';
  position: absolute; inset: -20% -10% auto -10%; height: 620px;
  background:
    radial-gradient(46% 60% at 22% 8%, rgba(166, 67, 43, .13), transparent 70%),
    radial-gradient(40% 54% at 82% 22%, rgba(85, 107, 74, .11), transparent 72%);
  pointer-events: none;
}
.s3-oscs-secao > .s3-container { position: relative; z-index: 1; }

/* --------------------------------------------------------------- filtros */
.s3-oscfiltros {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px;
  margin-bottom: var(--s3-e-11);
}
.s3-oscfiltro {
  appearance: none; cursor: pointer;
  font-family: var(--s3-fonte);
  font-size: 13px; font-weight: var(--s3-peso-forte);
  color: var(--s3-texto-fraco);
  padding: 8px 15px;
  border: 1px solid var(--s3-borda);
  border-radius: var(--s3-raio-pilula);
  background: rgba(251, 248, 243, .72);
  backdrop-filter: blur(6px);
  transition: color 200ms ease, border-color 200ms ease,
              background 200ms ease, box-shadow 240ms var(--s3-curva-saida);
}
.s3-oscfiltro:hover { border-color: var(--s3-laranja); color: var(--s3-laranja-texto); }
.s3-oscfiltro[aria-pressed="true"] {
  color: #fff;
  background: linear-gradient(160deg, #A6432B, #903A27);
  border-color: transparent;
  box-shadow: 0 10px 22px -12px rgba(144, 58, 39, .8);
}
.s3-oscfiltro__n {
  display: inline-block; margin-left: 7px;
  font-family: var(--s3-fonte-mono); font-size: 10.5px;
  opacity: .62;
}

/* ----------------------------------------------------------------- grade */
.s3-oscgrade {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: var(--s3-e-11) var(--s3-e-7);
  justify-items: center;
}
/* NÃO `display: contents`: o item é o alvo do IntersectionObserver da
   revelação, e elemento sem caixa nunca intersecta nada — a grade inteira
   ficaria em opacity 0 para sempre. */
.s3-oscitem { display: flex; justify-content: center; }

/* o botão é o cartão inteiro: foto, nome e categoria. Alvo grande, e o
   teclado alcança tudo com um Tab só por organização. */
.s3-oscbotao {
  appearance: none; border: none; background: none; padding: 0;
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center;
  gap: var(--s3-e-5);
  width: 100%; max-width: 190px;
  text-align: center;
  color: inherit;
  border-radius: 20px;
}
.s3-oscbotao:focus-visible { outline: 2px solid var(--s3-laranja); outline-offset: 8px; }

.s3-oscnome {
  font-family: var(--s3-fonte-display);
  font-size: 15.5px; font-weight: var(--s3-peso-forte);
  line-height: 1.24; color: var(--s3-tinta);
  text-wrap: balance;
  transition: color 220ms ease;
}
.s3-oscbotao:hover .s3-oscnome,
.s3-oscbotao:focus-visible .s3-oscnome { color: var(--s3-laranja-texto); }

/* a categoria só aparece ao apontar: na grade em repouso o que interessa é
   o nome — dez etiquetas repetidas competiam com ele */
.s3-oscarea {
  font-family: var(--s3-fonte-mono);
  font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--s3-texto-tenue);
  margin-top: -6px;
  opacity: 0; translate: 0 -4px;
  transition: opacity 260ms ease, translate 260ms var(--s3-curva-saida);
}
.s3-oscbotao:hover .s3-oscarea,
.s3-oscbotao:focus-visible .s3-oscarea { opacity: 1; translate: 0 0; }

/* A entrada em cascata é a `[data-revelar]` da casa (componentes.css): o
   item carrega o atributo e o `data-atraso`, e interacoes.js liga
   `data-visivel` quando ele chega à viewport. Não escrevo outra aqui —
   duas transições de opacidade sobre o mesmo elemento brigam. */

/* =========================================================== A FICHA
   CENTRALIZADA, e não uma gaveta na borda. A primeira versão entrava pela
   direita ocupando a altura inteira — desenho de painel de edição, que faz
   sentido quando o conteúdo de trás continua sendo o assunto. Aqui a ficha É
   o assunto: ela centra, com margem folgada, cantos arredondados e entrada
   por escala.

   `inset: 0` mais `margin: auto` é o que centra um <dialog> nos dois eixos —
   e não `top/left: 50%` com `translate`, que brigaria com a animação de
   entrada pelo mesmo `transform`.

   E O CORPO DELA É MONTADO COM OS COMPONENTES DA CASA. Havia aqui seis peças
   próprias, e cinco duplicavam componente que já existia: a etiqueta de
   categoria virou `.s3-selo--marca`, a linha de meta e os títulos viraram
   `.s3-valor__chip--miudo`, os números viraram `.s3-valor__chip` com <b>, os
   botões viraram `.s3-btn`. O que sobrou de próprio é o que é só desta peça:
   a caixa, o topo e o bloco rotulado. */
.s3-ficha {
  --ficha-margem: clamp(16px, 5vw, 64px);
  position: fixed;
  inset: 0;
  margin: auto;                        /* centra nos dois eixos */
  width: min(680px, calc(100% - var(--ficha-margem) * 2));
  max-width: 100%;
  max-height: calc(100% - var(--ficha-margem) * 2);
  padding: 0;
  border: 1px solid var(--s3-borda);
  border-radius: 22px;
  background: var(--s3-papel);
  color: var(--s3-texto);
  box-shadow: 0 40px 90px -30px rgba(67, 33, 25, .55),
              0 8px 20px -12px rgba(67, 33, 25, .3);
  overflow: hidden;
}
.s3-ficha::backdrop {
  background: rgba(50, 24, 17, .5);
  backdrop-filter: blur(4px);
}
@media (prefers-reduced-motion: no-preference) {
  .s3-ficha[open] { animation: s3-ficha-entra 380ms var(--s3-curva-saida); }
  .s3-ficha[open]::backdrop { animation: s3-veu-entra 320ms ease; }
}
/* de dentro para fora, e não da borda para o centro */
@keyframes s3-ficha-entra {
  from { opacity: 0; scale: .96; }
  to   { opacity: 1; scale: 1; }
}
@keyframes s3-veu-entra { from { opacity: 0; } to { opacity: 1; } }

/* O DIÁLOGO VIRA COLUNA FLEX — e só quando aberto.

   Antes eram `height: max-content` no diálogo e `max-height: 100%` no
   rolador, e isso não funciona: porcentagem de altura só resolve contra um
   pai de altura DEFINIDA, e `max-content` não é comprimento definido. O
   `max-height: 100%` computava para `none`, o rolador crescia até o conteúdo
   inteiro (medido: 857px dentro de um diálogo de 732) e o `overflow: hidden`
   cortava. Não havia barra de rolagem porque não havia transbordo NO ROLADOR
   — o transbordo estava no diálogo, que não rola.

   Flex não depende de altura definida, e resolve.

   O `display: flex` VAI NO `[open]`, e não na regra base: declarar `display`
   no `.s3-ficha` sobrescreveria o `display: none` que o navegador dá a
   `<dialog>` fechado, e a ficha ficaria visível na página o tempo todo. É a
   armadilha clássica do elemento, e ela custa a aparecer porque só se
   manifesta quando o diálogo está fechado. */
.s3-ficha[open] { display: flex; flex-direction: column; }
.s3-ficha__rolagem {
  /* `min-height: 0` NÃO é opcional: item de flex tem `min-height: auto`, que o
     impede de encolher abaixo do próprio conteúdo. Sem esta linha o rolador
     volta a medir a altura inteira e o corte volta, sem nada no CSS parecer
     errado. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.s3-ficha__fechar {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  width: 38px; height: 38px; border-radius: var(--s3-raio-circulo);
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--s3-borda);
  background: rgba(251, 248, 243, .88);
  backdrop-filter: blur(8px);
  color: var(--s3-texto-fraco);
  transition: background 200ms ease, color 200ms ease, transform 220ms var(--s3-curva);
}
.s3-ficha__fechar:hover { background: var(--s3-laranja); color: #fff; transform: rotate(90deg); }
.s3-ficha__fechar:focus-visible { outline: 2px solid var(--s3-laranja); outline-offset: 2px; }

/* topo da ficha: fundo quente, medalhão grande e identificação */
.s3-ficha__topo {
  position: relative;
  padding: var(--s3-e-10) var(--s3-e-9) var(--s3-e-8);
  background:
    radial-gradient(70% 100% at 18% 0%, rgba(166, 67, 43, .16), transparent 68%),
    linear-gradient(180deg, var(--s3-tela-areia), var(--s3-tela-quente));
  border-bottom: 1px solid var(--s3-borda);
}
.s3-ficha__topo .s3-oscmed__palco { justify-items: start; place-items: center start; }
.s3-ficha__topo .s3-oscmed { --d: 96px; }

.s3-ficha__cabeca {
  display: flex; align-items: center; gap: var(--s3-e-7);
  margin-bottom: var(--s3-e-6);
}
.s3-ficha__ident { min-width: 0; }
.s3-ficha__ident .s3-selo { margin-bottom: 9px; }
.s3-ficha__nome {
  font-family: var(--s3-fonte-display);
  font-size: 25px; font-weight: var(--s3-peso-negro); line-height: 1.16;
  color: var(--s3-tinta); margin: 0;
  text-wrap: balance;
}
.s3-ficha__razao {
  font-size: 12.5px; line-height: 1.42; color: var(--s3-texto-fraco);
  margin: 7px 0 0;
}
/* a fileira de pílulas miúdas da casa; aqui só o arranjo */
.s3-ficha__meta { display: flex; flex-wrap: wrap; gap: 7px; }
.s3-ficha__meta .s3-valor__chip { margin: 0; }

.s3-ficha__corpo {
  padding: var(--s3-e-9);
  display: flex; flex-direction: column; gap: var(--s3-e-8);
}
.s3-ficha__hist {
  font-size: 15.5px; line-height: 1.66; color: var(--s3-texto);
  margin: 0;
}

/* BLOCO ROTULADO da casa: filete de 2px em terracota no TOPO, como o
   `faqInterno` das páginas de serviço e o `.s3-metodo__item`. Antes era um
   filete à esquerda, que não existia em nenhum outro lugar do site. */
.s3-ficha__bloco {
  margin: 0;
  border-top: 2px solid var(--s3-laranja);
  padding-top: var(--s3-e-6);
}
.s3-ficha__rot {
  margin: 0 0 var(--s3-e-4);
  font-family: var(--s3-fonte-display);
  font-size: var(--s3-t-cartao); font-weight: var(--s3-peso-negro);
  line-height: 1.2; color: var(--s3-tinta);
}
.s3-ficha__bloco p { margin: 0; }

/* `.s3-valor__chip` nasceu para viver sobre os cartões COLORIDOS de /sobre/ —
   `rgba(255,255,255,.16)`, que sobre fundo claro é invisível. O próprio CSS do
   componente já prevê variação por hospedeiro (`.s3-valor--rosa` sobe para
   .55); esta é a variante da ficha, na mesma lógica. Adaptar a superfície, e
   não clonar o componente. */
.s3-ficha__chips { margin-top: 0; }
.s3-ficha .s3-valor__chip {
  background: var(--s3-tela-quente);
  border: 1px solid var(--s3-borda-suave);
  color: var(--s3-texto-fraco);
}
.s3-ficha .s3-valor__chip b {
  color: var(--s3-laranja-texto);
  font-variant-numeric: tabular-nums;
}

.s3-ficha__links { gap: 10px; }
/* o glifo oficial do Instagram, do próprio icones.js */
.s3-ficha__insta { gap: 9px; }
.s3-ficha__insta svg { flex: 0 0 auto; }

/* quando a organização não tem história verificada, a ficha diz isso em vez
   de mostrar um vazio — e em vez de inventar um parágrafo plausível */
.s3-ficha__sem {
  font-size: 13px; line-height: 1.55; color: var(--s3-texto-tenue);
  border: 1px dashed var(--s3-borda);
  border-radius: var(--s3-raio-medio);
  padding: var(--s3-e-6);
  margin: 0;
}

/* -------------------------------------------------------------- celular */
@media (max-width: 640px) {
  /* a margem encolhe mas a ficha CONTINUA centralizada: virar gaveta de baixo
     só no celular seria manter os dois desenhos vivos, e um deles ia
     envelhecer sem ninguém notar */
  .s3-ficha { --ficha-margem: 12px; border-radius: 18px; }
  .s3-ficha__topo, .s3-ficha__corpo { padding-inline: var(--s3-e-7); }
  .s3-ficha__cabeca { flex-direction: column; align-items: flex-start; gap: var(--s3-e-6); }
  .s3-ficha__nome { font-size: 21px; }
  .s3-oscgrade { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: var(--s3-e-10) var(--s3-e-5); }
  .s3-oscmed { --d: 100px; }
  .s3-oscnome { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .s3-oscmed, .s3-oscmed__foto, .s3-oscmed__halo, .s3-oscbotao {
    transition: none; transform: none; translate: none; scale: none;
  }
}

/* -------------------------------------------------- sem JavaScript
   O <dialog> fechado é `display:none` por padrão do navegador. Sem JS
   ninguém consegue abri-lo, então as fichas viram seções normais, uma
   embaixo da outra — o conteúdo continua alcançável.

   A marca é NEGATIVA (`:not(.s3-com-js)`) de propósito: quem liga a classe é
   um <script> de uma linha no <head>, então a página só entra no modo
   janela se o JavaScript de fato rodou. Fosse o contrário, JS desligado
   deixaria as fichas escondidas para sempre. */
:root:not(.s3-com-js) .s3-ficha {
  position: static; width: auto; height: auto; max-height: none;
  display: block; box-shadow: none;
  border-top: 1px solid var(--s3-borda);
  margin-top: var(--s3-e-10);
}
:root:not(.s3-com-js) .s3-ficha__fechar { display: none; }
:root:not(.s3-com-js) .s3-ficha__conteudo[hidden] { display: block !important; }
:root:not(.s3-com-js) .s3-ficha__conteudo + .s3-ficha__conteudo { border-top: 1px solid var(--s3-borda); }
/* e sem JS a grade não pode ficar presa no estado de entrada */
:root:not(.s3-com-js) .s3-oscitem[data-revelar] { opacity: 1 !important; translate: none !important; }