/* ============================================================
   ARTIGOS
   Figma "Site", seção CONTEÚDOS (1278:4969), três quadros:
   ARTIGOS (1278:5624), ARTIGO SÓ TEXTO (1278:6351) e
   ARTIGO COM ELEMENTOS (1278:5372).

   Os dois quadros de artigo são a MESMA página. O que muda entre
   eles é o conteúdo: um tem caixa de fala e lista com ícone, o
   outro não. Por isso aqui existe um molde só, e os blocos extras
   são componentes que aparecem quando o artigo tem.

   Três valores do arquivo foram trocados pelo token equivalente,
   porque a auditoria da fundação já tinha colapsado justamente
   esses pares e voltar atrás recria o ruído que ela tirou:
     #f4f5f5 → --papel     (2 de distância)
     #ecf3f8 → --gelo      (4 de distância)
     #212121 → --ink       o painel do hero e o painel do CTA
                           aparecem na mesma página; dois pretos
                           diferentes a 400px de distância leem
                           como defeito, não como intenção.
   ============================================================ */

/* o corpo do artigo é o único texto de leitura longa do site.
   25,6/16 = 1.6 no arquivo; --lh-solto é 1.65 e a diferença não
   se enxerga, então quem manda é o token */
:root{
  --art-texto:  #34444d;   /* tinta do corpo do artigo */
  /* --r-capa e --h-capa saíram daqui em 18/09: o card de caso usa as
     mesmas medidas e este arquivo não carrega em resultados, mentoria
     nem nas páginas de caso. Agora moram em fundacao.css, com o resto
     dos tokens. */
}

/* ============================================================
   1. HERO DAS PÁGINAS DE CONTEÚDO
   O fundo era o amarelo da marca, espelhado do rodapé. Saiu em
   14/09: cada artigo tem uma capa própria, e o amarelo brigava com
   todas elas. No lugar entrou um brilho frio, que é o --gelo do
   site abrindo para branco, e que deixa a capa ser a cor da dobra.

   A geometria vem da matriz de gradiente do arquivo, convertida:
   uma elipse alta, centrada na horizontal e nascendo acima da
   borda de cima, para a página começar com um toque de cor e
   chegar branca na altura do conteúdo. O rodapé continua amarelo.
   ============================================================ */
/* O brilho frio atras da capa do ARTIGO. Nao e o painel da listagem:
   ali a dobra inteira e o painel e o fundo vem do .painel-luz. Aqui a
   dobra e branca e a capa flutua sobre ela, com esta elipse por tras. */
.art-luz{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse 49.4% 114.4% at 49.4% -35.8%,
             var(--gelo) 7.2%, #fafdff 70%, var(--branco) 100%);
}

/* a altura e o canto vem da regra geral de primeira dobra (v2.css,
   secao 8); aqui fica so a cor do texto. O recuo de 96 do pe saiu: o
   painel tem altura desenhada e a caixa de conteudo e ela inteira. */
.hero--artigos{
  position:relative; overflow:hidden;
  background:var(--branco); color:var(--ink);
}
/* O fundo do painel e os arcos sao os mesmos de Termos, Privacidade e
   das paginas de erro: moram no v2.css, em .painel-luz e .painel-arcos.
   Aqui ficam so as medidas do bloco de texto (Figma 1318:20070): 716 de
   largura, centrado, abrindo a 97 do topo do painel, com o apoio numa
   coluna mais estreita, de 514. */
.art-hero-in{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:var(--e-5);
  text-align:center;
}
.art-hero-in .d-hero{ max-width:716px; color:var(--ink); font-weight:600; }
.art-hero-apoio{
  max-width:514px; font-size:var(--fs-lead); line-height:var(--lh-medio);
  color:var(--ink);
}
.art-hero-in .btn{ margin-top:var(--e-6); }

/* a tag sobre amarelo não tem vidro nem borda: só a palavra */
.tag-seg--claro{
  background:none; border-color:transparent; color:var(--ink);
  padding-left:0; padding-right:0;
}

/* título que só o leitor de tela e o buscador leem. A listagem não
   tem título de seção no arquivo, e sem ele a página vai do H1 do
   hero direto para os H3 dos cards: dois níveis de uma vez, e o
   leitor de tela anuncia uma profundidade que não existe. */
.so-leitor{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}

/* ============================================================
   2. FILTRO DE CATEGORIA
   ============================================================ */
.art-filtros{
  display:flex; justify-content:center; flex-wrap:wrap; gap:var(--e-2);
  margin-bottom:var(--e-9);
}
.art-filtro{
  appearance:none; cursor:pointer;
  padding:11px 21px; border-radius:var(--r-pilula);
  border:1px solid var(--painel); background:none;
  font-family:var(--texto); font-weight:var(--peso-medio);
  font-size:var(--fs-corpo-d); letter-spacing:-.01em;
  text-transform:uppercase; color:var(--painel);
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.art-filtro:hover{ background:rgba(40,56,69,.08); }
.art-filtro.esta-ativo{ background:var(--painel); color:var(--branco); }

/* 25/09, pedido do Renan: busca por termo ao lado das categorias. Mesma
   pilula de contorno dos filtros, para ler como parte da mesma fileira;
   a lupa fica dentro do campo, a esquerda. */
.art-busca{
  position:relative; display:flex; align-items:center;
  width:280px; max-width:100%;
}
.art-busca-lupa{ position:absolute; left:18px; color:var(--painel); pointer-events:none; }
.art-busca-campo{
  appearance:none; width:100%; height:100%; min-height:44px;
  padding:0 18px 0 44px; border-radius:var(--r-pilula);
  border:1px solid var(--painel); background:none;
  font-family:var(--texto); font-size:var(--fs-corpo-d); color:var(--ink);
  transition:background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.art-busca-campo::placeholder{ color:var(--painel); opacity:.7; }
.art-busca-campo:hover{ background:rgba(40,56,69,.04); }
.art-busca-campo:focus{ outline:none; } /* sem anel de foco: pedido do Renan, 25/09 */
.art-busca-campo::-webkit-search-cancel-button{ cursor:pointer; }
@media (max-width:767px){
  .art-busca{ width:100%; order:-1; }
}

/* ============================================================
   3. CARD DE ARTIGO
   Um componente só: serve a listagem e o "leia também" do pé do
   artigo. O arquivo mostra dois cards diferentes ali, mas o de
   baixo é o card de CASE copiado como marcador de lugar, e dois
   cards de artigo na mesma página não se justificam.
   ============================================================ */
.art-grade{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:25px; }

.art-card{
  display:flex; flex-direction:column; gap:var(--card-gap-capa);
  background:var(--papel); border-radius:var(--r-grande); overflow:hidden;
  transition:translate var(--dur) var(--suave), box-shadow var(--dur) var(--ease);
}
/* a elevação sai por `translate`, não por `transform`: o card revelado
   pelo "ver mais artigos" fica com `animation:casoEntra ... both`, e um
   `both` mantém o `transform:none` do último quadro para sempre. Estilo
   de animação vence qualquer declaração do autor, então ali o hover
   subia zero e só a sombra aparecia. `translate` é propriedade separada,
   compõe com o transform da animação e não entra nessa disputa.
   Defeito antigo, achado em 18/09 ao alinhar o card de caso a este. */
.art-card:hover{ translate:0 -4px; box-shadow:0 18px 40px rgba(12,22,27,.10); }
@media (prefers-reduced-motion: reduce){
  .art-card{ transition:none; }
  .art-card:hover{ translate:none; }
}

/* altura fixa e proporção declarada: a caixa já nasce reservada e
   a grade não pula quando a capa carrega */
.art-capa{
  display:block; width:100%; height:var(--h-capa); flex:none;
  object-fit:cover; background:var(--assinatura);
  border-radius:var(--r-capa);
}
/* os números viraram token em 18/09: o card de caso usa o mesmo miolo, e
   token é o único jeito de os dois não desandarem de novo (fundacao.css,
   seção CARD DE LISTAGEM) */
.art-corpo{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:var(--card-gap);
  padding:var(--card-pad-topo) var(--card-pad-lado) var(--card-pad-pe);
  flex:1;
}
.art-cat{
  font-family:var(--display); font-weight:var(--peso-medio);
  font-size:var(--fs-rotulo); letter-spacing:.01em;
  text-transform:uppercase; color:var(--muted);
}
.art-card-texto{ display:flex; flex-direction:column; gap:var(--card-gap-texto); flex:1; }
/* o arquivo dá 66px de altura ao título do card, que são três
   linhas: sem a trava, um título de seis linhas empurra o resumo e
   a fileira inteira perde o ritmo. A entrelinha é 1.0 e não os 0.93
   do arquivo porque em português o ç e o ã descem, e a 0.93 eles
   encostam na linha de baixo. */
.art-card h3{
  font-family:var(--display); font-weight:var(--peso-regular);
  font-size:var(--fs-t3); line-height:1; color:var(--ink);
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;
  overflow:hidden;
}
/* o corte vive também no link, e não só no h3. O h3 sozinho já cortava
   para o olho, mas quem carrega o texto é o <a>, e é a caixa dele que
   qualquer medição do DOM devolve: sem isto, a extração para o Figma
   lê cinco linhas onde a tela mostra três. */
.art-card h3 a{
  color:inherit;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;
  overflow:hidden;
}
.art-card h3 a::after{ content:""; position:absolute; inset:0; }
.art-card p{
  font-size:var(--fs-corpo-s); line-height:1.36; color:var(--muted);
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;
  overflow:hidden;
}
/* o card inteiro é a área de clique, e o link do título é quem
   carrega o destino: um alvo só para o mouse e para o teclado */
.art-card{ position:relative; }
.art-card .btn{ position:relative; z-index:1; pointer-events:none; }

.art-grade .art-card.esta-oculto{ display:none; }

/* ---------- ver mais artigos (Figma 1296:11427) ----------
   Pilula vazada de 181x47: sem preenchimento, contorno de 1 em #435965
   e o rotulo na mesma cor. Some sozinha quando nao sobra artigo para
   mostrar, e o filtro de categoria zera a conta de novo. */
.art-mais{ margin-top:var(--e-8); display:flex; justify-content:center; }
.art-mais[hidden]{ display:none; }
.art-mais-btn{
  appearance:none; cursor:pointer;
  min-width:181px; height:47px; padding:0 24px; border-radius:var(--r-pilula);
  border:1px solid #435965; background:none; color:#435965;
  font-family:var(--texto); font-weight:var(--peso-medio); font-size:14px;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.art-mais-btn:hover{ background:#435965; color:var(--branco); }
/* o card que ainda nao foi revelado sai de cena pelo CSS, e nao do HTML:
   assim o Google continua lendo os 39 sem depender de clique */
.art-grade .art-card.esta-guardado{ display:none; }
.art-grade .art-card.esta-visivel{
  animation:casoEntra .6s var(--suave) both; animation-delay:var(--d, 0s);
}
.art-vazio{ text-align:center; color:var(--muted); padding:var(--e-10) 0; }

/* ============================================================
   4. HERO DO ARTIGO
   A capa do artigo é o painel. Cada artigo tem uma arte própria,
   desenhada no Figma na section "Capa Artigos" (1298:12994), em dois
   tamanhos: 1299x425 para tela grande e 369x465 para celular. A arte
   não traz texto: ela deixa o lado livre, e o título entra por cima,
   como texto de verdade. Isso importa porque o H1 é o que o Google lê
   e o que o leitor de tela anuncia; um hero achatado em imagem
   devolveria uma página sem assunto.

   A medida da capa é 1299 e não a coluna do site, porque é a medida em
   que a arte foi desenhada. Acima de 1728 o --container do v2 vai para
   1511, e esticar a arte até lá seria ampliar 16% um arquivo que só
   existe em 1x. Então a capa fica no tamanho nativo, centrada.

   Artigo sem arte cai no painel escuro de antes, que continua aqui
   embaixo como estado base: hoje são dois dos trinta e nove.
   ============================================================ */
.hero--artigo{
  position:relative; overflow:hidden;
  height:auto; background:var(--branco); padding:0 0 var(--e-10);
}
.art-painel{
  position:relative; z-index:1; isolation:isolate;
  /* a mesma medida da barra do menu, e não os 1299 em que a arte
     foi desenhada: acima de 1728 o --container vai para 1511 e a
     capa ficava 212px mais estreita que o header, logo acima dela.
     A arte é 2598 de largura, então cobre os 1511 com folga.
     Vem do mesmo token que a barra do menu, --linha, para as duas
     medidas nunca sairem de sincronia. */
  width:var(--linha-site);
  min-height:425px;
  /* o vão virou o do site: 24 abaixo da barra do menu, que termina em
     121. Era 58 aqui, de quando a capa tinha regra própria; a
     padronização de 15/09 pôs todas as primeiras dobras no mesmo vao */
  margin:121px auto 0;
  background:var(--capa-base, var(--ink)); border-radius:60px;
  padding:57px 77px;
  display:flex; flex-direction:column; align-items:flex-start;
  overflow:hidden;
}
/* a arte preenche o painel e fica atrás de tudo. object-fit cover
   porque o painel cresce quando o título é longo, e aí a arte
   acompanha em vez de distorcer */
.art-capa-hero{
  position:absolute; inset:0; z-index:-1;
  width:100%; height:100%; object-fit:cover; display:block;
}
/* o canto do site é superelipse, não círculo; onde o navegador não
   entende fica o raio redondo, como no resto das dobras */
/* canto iOS cheio, como no resto do site. A pílula de raio 100 do filtro
   fica de fora: ali o canto já é semicírculo e não há o que suavizar. */
@supports (corner-shape: squircle){
  .art-painel, .art-card, .art-capa, .art-fala, .art-indice,
  .art-item-topo img{ corner-shape:squircle; }
  /* o canto iOS avança um décimo além do raio: sem crescer 10% o card
     LÊ menor do que o do arquivo, que foi o que o Renan apontou em
     18/09. O card de solução já fazia essa conta desde 17/09 e estes
     dois tinham ficado com o número cru do Figma. */
  .art-card{ border-radius:var(--r-grande-ios); }
  .art-capa{ border-radius:var(--r-capa-ios); }
}
.art-painel .tag-seg{ margin-bottom:var(--e-5); }
.art-painel h1{
  max-width:465px; margin:0;
  font-family:var(--display); font-weight:var(--peso-semi);
  font-size:var(--fs-t2); line-height:1; letter-spacing:-.014em;
  color:var(--branco); text-wrap:balance;
}
.art-painel-apoio{
  max-width:458px; margin-top:var(--e-5);
  font-size:var(--fs-corpo); line-height:1.52; color:var(--branco);
}
.art-painel-meta{
  display:flex; flex-wrap:wrap; gap:var(--e-6); margin-top:var(--e-8);
  font-family:var(--display); font-weight:var(--peso-medio);
  font-size:var(--fs-rotulo); letter-spacing:.01em; color:var(--branco);
}
.art-painel-meta time{ color:inherit; }

/* ============================================================
   5. CORPO DO ARTIGO
   Duas colunas: índice à esquerda, leitura à direita. A medida
   de 778px é a do arquivo e dá 70 e poucos caracteres por linha,
   que é a faixa boa de leitura.
   ============================================================ */
.art-leitura{
  width:min(var(--container), 100% - var(--gutter) * 2); margin:0 auto;
  padding:var(--e-11) 0 0;
  /* o par fica centrado com o vão fixo em 85, e não espalhado pelas
     bordas: acima de 1728 o --container do v2 vai para 1511 e um
     space-between abriria 440px de buraco entre o índice e o texto.
     409 + 85 + 778 dá exatamente os 1272 do arquivo. */
  display:grid; grid-template-columns:minmax(0,409px) minmax(0,778px);
  justify-content:center; align-items:start; gap:85px;
}

/* nas paginas de documento a coluna da direita nao para nos 778 do
   artigo: ela toma o que sobra da linha. Em 1440 da exatamente os 778,
   e em tela maior o texto acompanha em vez de deixar buraco. */
.art-leitura--cheia{ grid-template-columns:minmax(0,409px) minmax(0,1fr); }

.art-indice{ position:sticky; top:104px; padding:var(--e-6) 37px; }
.art-indice p{
  font-family:var(--display); font-weight:var(--peso-medio);
  font-size:var(--fs-rotulo); letter-spacing:.01em;
  text-transform:uppercase; color:var(--muted); margin-bottom:var(--e-3);
}
.art-indice ol{ list-style:none; display:flex; flex-direction:column; gap:2px; }
/* dez títulos do acervo antigo são frases inteiras, e um tem 124
   caracteres. Solto, ele enche a coluna e o índice deixa de parecer
   índice. O texto continua inteiro no HTML, para o leitor de tela e
   para quem copia; o que cabe são duas linhas. */
.art-indice a{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden;
  font-size:var(--fs-corpo); line-height:1.6; color:var(--corpo);
  transition:color var(--dur) var(--ease);
}
.art-indice a:hover{ color:var(--apoio); }
.art-indice a.esta-lendo{ color:var(--ink); font-weight:var(--peso-semi); }
/* o subtitulo entra recuado: e o unico sinal de que ele esta dentro
   do titulo de cima, ja que a lista e plana */
.art-indice .e-sub a{ padding-left:var(--e-3); font-size:var(--fs-corpo-d); color:var(--apoio); }

/* o texto vem do editor e chega sem classe: quem desenha é o
   conteudo.css. Aqui só entram os valores que o arquivo pede e
   que diferem do padrão, mais os dois blocos de componente. */
.art-corpo-texto{ color:var(--art-texto); }
.art-corpo-texto > * + *{ margin-top:var(--e-3); }
.art-corpo-texto > * + :is(h2,h3,h4){ margin-top:var(--e-8); }
.art-corpo-texto :is(h2,h3,h4){
  font-family:var(--texto); font-weight:var(--peso-semi);
  letter-spacing:-.014em; line-height:1.2; color:var(--ink);
}
.art-corpo-texto h2{ font-size:var(--fs-t3); }
.art-corpo-texto h3{ font-size:var(--fs-lead); }
.art-corpo-texto h4{ font-size:var(--fs-corpo); }
.art-corpo-texto p{ max-width:none; color:var(--art-texto); }
/* o primeiro parágrafo abre a leitura no corpo do arquivo */
.art-corpo-texto > h2:first-child{ font-size:var(--fs-t2); }
.art-corpo-texto :is(ul,ol){ max-width:none; }
.art-corpo-texto li{ color:var(--art-texto); }
/* no arquivo os itens sao linhas seguidas, sem respiro entre elas.
   Os 8px do conteudo.css servem a lista de paragrafo; aqui, onde o
   item quase sempre tem uma linha so, eles soltam demais */
.art-corpo-texto li + li{ margin-top:var(--e-1); }

/* fala: o que era <blockquote> no editor */
.art-fala{
  display:flex; justify-content:center;
  background:var(--gelo); border-radius:var(--r-medio); padding:27px;
}
.art-fala-in{ display:flex; align-items:flex-start; gap:29px; max-width:504px; }
.art-fala svg{ flex:none; width:32px; height:32px; color:var(--amarelo); }
.art-fala p{ font-style:italic; color:var(--corpo); margin:0; }

/* itens com ícone: o que era imagem de 24px mais título em negrito */
.art-itens{ display:flex; flex-direction:column; gap:var(--e-8); }
.art-item{ display:flex; flex-direction:column; gap:var(--e-3); }
.art-item-topo{ display:flex; align-items:center; gap:11px; }
.art-item-topo img{ width:44px; height:44px; flex:none; object-fit:contain; }
.art-item-topo h3,
.art-item-topo p{
  margin:0; font-family:var(--texto); font-weight:var(--peso-semi);
  font-size:var(--fs-lead); line-height:1.3; color:var(--ink);
}
.art-item > p{ margin:0; }

/* ============================================================
   6. RODAPÉ DO ARTIGO
   ============================================================ */
.art-outros-topo{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--e-8); margin-bottom:var(--e-8); flex-wrap:wrap;
}
.art-outros-topo .chapeu{ margin-bottom:6px; }
.art-outros-topo .d-hero{ max-width:505px; }

/* ============================================================
   7. TELAS MENORES
   ============================================================ */
@media (max-width:1023px){
  .art-hero-in{ padding-top:170px; }
  .art-grade{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .art-painel{ margin-top:120px; padding:var(--e-8); }
  .art-leitura{ grid-template-columns:minmax(0,1fr); gap:var(--e-8); padding-top:var(--e-9); }
  /* sem coluna ao lado o índice não gruda: ele passa a ser uma
     caixa de abertura, antes do texto */
  .art-indice{
    position:static; padding:var(--e-6); background:var(--papel);
    border-radius:var(--r-medio);
  }
  .art-fala{ padding:var(--e-5); }
  .art-fala-in{ max-width:none; gap:var(--e-4); }
}

@media (max-width:767px){
  .hero--artigos{ padding-bottom:var(--e-10); }
  .art-hero-in{ padding-top:148px; gap:var(--e-4); }
  .art-grade{ grid-template-columns:minmax(0,1fr); }
  /* a altura da capa no celular virou token (--h-capa, em styles.css,
     seção BREAKPOINTS), porque o card de caso usa a mesma */
  /* o miolo apertado do celular virou token em 18/09 (styles.css, seção
     BREAKPOINTS), porque o card de caso usa o mesmo */
  /* a arte de celular é 369x465 com a foto em cima: o texto começa
     onde ela abre espaço, a 154px do topo, como no arquivo */
  .art-painel{
    width:var(--linha-site);
    min-height:431px; margin-top:107px;
    /* 40 no celular, como toda primeira dobra do site */
    padding:154px var(--e-7) 36px; border-radius:40px;
  }
  .art-painel:not(:has(.art-capa-hero)){ padding:var(--e-6); min-height:0; }
  /* no celular a elipse do arquivo é mais larga que alta e nasce
     logo acima da borda, não bem longe dela */
  .art-luz{
    background:radial-gradient(ellipse 124% 88.6% at 50.1% -12.2%,
               var(--gelo) 7.2%, #fafdff 70%, var(--branco) 100%);
  }
  /* no celular a arte fica no tamanho natural, presa no topo, e a cor
     da última linha dela continua no fundo do painel: assim um título
     de sete linhas empurra o texto para baixo sem esticar a foto para
     dentro dele */
  .art-capa-hero{ height:auto; bottom:auto; object-fit:fill; }
  .art-painel h1{ max-width:none; }
  .art-painel-apoio{ max-width:none; }
  .art-painel h1{ font-size:var(--fs-t3-g); }
  .art-painel-meta{ gap:var(--e-4); margin-top:var(--e-6); }
  .art-corpo-texto h2,
  .art-corpo-texto > h2:first-child{ font-size:var(--fs-t3); }
  .art-corpo-texto h3{ font-size:var(--fs-corpo); }
  .art-outros-topo{ align-items:flex-start; }
  .art-item-topo img{ width:36px; height:36px; }
}