/* ==========================================================
   amano · artigo
   Complemento de amano.css para a seção ARTIGOS.
   Só define o que não existe no sistema. Tudo que já existe
   — .subhero, .lockbig, .eyebrow, .two, .stats, .media-band,
   .fmt, .pessoa, .escuro, .nota — é reaproveitado como está.
   ========================================================== */

/* ---- grade de leitura ------------------------------------ */
/* Coluna de prosa à esquerda + trilho de navegação à direita.
   O site inteiro é alinhado à esquerda dentro do .wrap; uma coluna
   centrada quebraria essa língua. O trilho ocupa a folga da direita
   com o mesmo índice de seções que os reports usam. */
.artigo-grade{display:grid;grid-template-columns:minmax(0,700px) 1fr;
  gap:clamp(40px,6vw,96px);align-items:start}
@media(max-width:1080px){.artigo-grade{grid-template-columns:1fr}}

.trilho{position:sticky;top:120px;padding-left:22px;border-left:1px solid #D8D3C9}
.trilho .t{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--bronze);margin-bottom:18px}
.trilho ol{list-style:none;margin:0;counter-reset:s}
.trilho li{counter-increment:s;margin-bottom:0}
.trilho a{display:block;padding:9px 0;font-size:13px;line-height:1.42;color:#6E6A62;
  text-decoration:none;transition:color .3s,padding-left .35s var(--ease)}
.trilho a::before{content:counter(s,decimal-leading-zero);font-size:10px;
  letter-spacing:.14em;color:#B3ACA0;margin-right:10px}
.trilho a:hover{color:var(--ink);padding-left:6px}
.trilho a.aqui{color:var(--bronze)}
.trilho a.aqui::before{color:var(--bronze)}
.trilho .leitura{margin-top:22px;padding-top:16px;border-top:1px solid #D8D3C9;
  font-size:11.5px;color:#8A857C;line-height:1.6}
@media(max-width:1080px){.trilho{display:none}}

/* âncoras não passam por baixo da nav fixa */
.artigo h2[id]{scroll-margin-top:110px}

.artigo{max-width:700px}
.artigo p{max-width:none}
.artigo h2{font-size:clamp(27px,3.9vw,44px);margin:clamp(58px,7vw,86px) 0 26px}
.artigo h2:first-child{margin-top:0}
.artigo h3{margin-top:38px}
.artigo ol,.artigo ul{max-width:none;margin-left:22px}
.artigo li{margin-bottom:15px}

/* ---- linha de crédito ------------------------------------ */
.credito{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;
  font-size:12.5px;letter-spacing:.02em;color:#8A857C;margin-top:clamp(24px,3vw,34px)}
.credito a{color:var(--dourado);text-decoration:none;border-bottom:1px solid #4A422F;padding-bottom:2px}
.credito a:hover{color:var(--creme);border-bottom-color:var(--creme)}
.credito .sep{color:#4A463E}
.credito time{color:#B5AFA3}
.credito .att{color:var(--dourado)}

/* ---- lide definicional ----------------------------------- */
/* Primeiro parágrafo. É ele que os motores de IA extraem: até
   80 palavras, formato "X é Y que Z", com um dado e uma fonte. */
.lide{font-family:var(--serif);font-weight:300;font-size:clamp(21px,2.6vw,29px);
  line-height:1.32;letter-spacing:-.018em;color:var(--ink);margin-bottom:clamp(34px,4vw,48px)}
.lide b{font-weight:400}

/* ---- parágrafo citável ----------------------------------- */
/* Vem logo abaixo de cada H2, 40 a 60 palavras, autossuficiente.
   Visualmente é prosa comum de propósito: caixa destacada e
   blockquote são frequentemente descartados na extração. A marca
   de bronze é discreta e existe só para orientar a revisão. */
.artigo p.citavel{position:relative;padding-left:18px}
.artigo p.citavel::before{content:'';position:absolute;left:0;top:.5em;bottom:.5em;
  width:2px;background:var(--bronze);opacity:.45}
@media(max-width:640px){.artigo p.citavel{padding-left:14px}}

/* ---- figura dentro da prosa ------------------------------ */
figure{margin:clamp(38px,4.5vw,58px) 0}
figure img{width:100%;height:auto;background:var(--areia)}
figure figcaption{font-size:12.5px;line-height:1.62;color:#6E6A62;
  margin-top:14px;padding-left:14px;border-left:1px solid var(--dourado);max-width:56ch}
.escuro figure figcaption{color:#8E8A80}
/* sangria para fora da coluna de leitura, sem estourar o .wrap */
@media(min-width:1000px){figure.sangra{margin-left:-130px;margin-right:-130px}}

/* ---- tabela editorial ------------------------------------ */
.artigo table{width:100%;border-collapse:collapse;margin:clamp(30px,3.6vw,44px) 0;
  font-size:14.5px;line-height:1.6}
.artigo th,.artigo td{text-align:left;padding:15px 14px 15px 0;
  border-bottom:1px solid #D8D3C9;vertical-align:top}
.artigo th{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--bronze);font-weight:400;border-bottom-color:#C6C0B4}
.artigo td:first-child{font-weight:400;color:var(--ink);padding-right:26px}
.artigo td{color:#4A4640}
.escuro .artigo th,.escuro .artigo td{border-bottom-color:#2E2E2E}
.escuro .artigo td{color:#B5AFA3}
.escuro .artigo th{color:var(--dourado)}
@media(max-width:640px){.artigo table{font-size:13.5px}.artigo th,.artigo td{padding:12px 8px 12px 0}}

/* ---- indicadores dentro da coluna de leitura -------------- */
/* .stats do sistema é 3-up e pressupõe a largura do .wrap. Dentro
   dos 700px da coluna cada célula fica com ~150px de texto, o que
   quebra a leitura. Aqui vira faixa: número à esquerda, leitura à
   direita. Mesmo componente, mesma cor, outra disposição. */
.artigo .stats{grid-template-columns:1fr;margin-top:clamp(30px,3.6vw,44px)}
.artigo .stats .stat{display:grid;grid-template-columns:170px minmax(0,1fr);
  gap:clamp(18px,2.6vw,34px);align-items:baseline;padding:clamp(24px,2.8vw,32px) 0}
.artigo .stats .stat .v{margin-bottom:0;font-size:clamp(30px,3.8vw,46px)}
.artigo .stats .stat .d{margin-bottom:10px}
.artigo .stats .stat .f{grid-column:2}
@media(max-width:560px){
  .artigo .stats .stat{grid-template-columns:1fr;gap:10px}
  .artigo .stats .stat .f{grid-column:1}
}

/* ---- nota de fonte --------------------------------------- */
.fonte-linha{font-size:12px;letter-spacing:.02em;color:#6E6A62;margin-top:-18px;line-height:1.6}

/* ---- FAQ -------------------------------------------------- */
/* Perguntas em H3, respostas de 40 a 60 palavras. Espelhado no
   JSON-LD FAQPage. É a maior fonte isolada de citação por IA. */
.faq{border-top:1px solid #D8D3C9;margin-top:clamp(58px,7vw,86px);padding-top:clamp(34px,4vw,48px)}
.escuro .faq{border-top-color:#2E2E2E}
/* ATENÇÃO: não chamar este bloco de .par. `.par` é a classe de parallax do
   site (amano.js) e desloca o elemento conforme o scroll. Usada aqui, embaralhava
   o espaçamento do FAQ e colava a linha divisória na pergunta seguinte.

   O espaçamento é assimétrico de propósito: a pergunta é Fraunces 24px, com caixa
   alta e sem folga interna acima, enquanto acima da linha há texto de 15,5px. */
.faq .qa{padding:clamp(28px,3.2vw,38px) 0 clamp(20px,2.4vw,26px);border-bottom:1px solid #D8D3C9;
  transition:padding-left .4s var(--ease)}
.faq .qa:first-child{padding-top:clamp(16px,1.8vw,22px)}
.faq .eyebrow{margin-bottom:4px}
.faq .qa:hover{padding-left:clamp(6px,1.2vw,14px)}
.escuro .faq .qa{border-bottom-color:#2E2E2E}
.faq .qa h3{font-family:var(--serif);font-weight:400;font-size:clamp(19px,2.1vw,24px);
  letter-spacing:-.012em;margin:0 0 12px}
.faq .qa p{font-size:15.5px;color:#4A4640;margin:0;max-width:60ch}
.escuro .faq .qa p{color:#B5AFA3}

/* ---- box sobre o autor ----------------------------------- */
/* Reaproveita .pessoa do sistema, em disposição horizontal.
   O retrato sai do mesmo arquivo da página de fundadores. */
.autor{display:grid;grid-template-columns:150px 1fr;gap:clamp(24px,3.4vw,44px);
  align-items:start;margin-top:clamp(58px,7vw,84px);
  padding-top:clamp(30px,3.6vw,42px);border-top:1px solid #D8D3C9}
.escuro .autor{border-top-color:#2E2E2E}
.autor .ret{width:100%;aspect-ratio:4/5;background:var(--areia);overflow:hidden;position:relative}
.autor .ret img{width:100%;height:100%;object-fit:cover}
.autor .ret .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#6A655E;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase}
.autor .eyebrow{margin-bottom:14px}
.autor h4{font-family:var(--serif);font-weight:400;font-size:clamp(21px,2.3vw,27px);
  letter-spacing:-.01em;margin:0 0 6px}
.autor .role{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--bronze);margin-bottom:16px}
.escuro .autor .role{color:var(--dourado)}
.autor p{font-size:15px;color:#5A564E;margin:0 0 16px;max-width:58ch}
.escuro .autor p{color:#B5AFA3}
.autor .links{display:flex;flex-wrap:wrap;gap:20px;font-size:12.5px}
.autor .links a{color:var(--bronze);text-decoration:none;border-bottom:1px solid transparent;
  padding-bottom:2px;transition:border-color .3s}
.autor .links a:hover{border-bottom-color:var(--bronze)}
.escuro .autor .links a{color:var(--dourado)}
.escuro .autor .links a:hover{border-bottom-color:var(--dourado)}
@media(max-width:660px){.autor{grid-template-columns:118px 1fr;gap:22px}}
@media(max-width:460px){.autor{grid-template-columns:1fr}.autor .ret{max-width:160px}}

/* ---- fontes ---------------------------------------------- */
.fontes{margin-top:clamp(46px,5.4vw,64px);padding-top:30px;border-top:1px solid #D8D3C9}
.escuro .fontes{border-top-color:#2E2E2E}
.fontes h5{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--bronze);font-weight:400;margin-bottom:18px}
.escuro .fontes h5{color:var(--dourado)}
.fontes ol{margin:0 0 0 18px;max-width:64ch}
.fontes li{font-size:13px;line-height:1.7;color:#6E6A62;margin-bottom:9px}
.fontes a{color:#6E6A62;text-decoration:none;border-bottom:1px solid #CFC9BE}
.fontes a:hover{color:var(--bronze);border-bottom-color:var(--bronze)}

/* ---- filtro de categorias do índice ----------------------- */
.filtros{display:flex;flex-wrap:wrap;gap:10px 8px;margin-top:clamp(40px,5vw,60px)}
.filtros button{font-family:var(--sans);font-weight:300;font-size:12px;letter-spacing:.06em;
  color:#5A564E;background:none;border:1px solid #D8D3C9;padding:9px 18px;cursor:pointer;
  transition:border-color .3s,color .3s,background .3s}
.filtros button:hover{border-color:var(--bronze);color:var(--bronze)}
.filtros button.on{background:var(--ink);border-color:var(--ink);color:var(--creme)}
.filtros .n{color:#B3ACA0;margin-left:7px;font-size:11px}
.filtros button.on .n{color:#8A857C}
.lista-artigos .art[hidden]{display:none}

/* ---- índice de artigos (/artigos) ------------------------ */
.secao-artigos > .wrap{padding-top:clamp(28px,3.4vw,46px)}
.secao-artigos .filtros{margin-top:0}
.lista-artigos{border-top:1px solid #D8D3C9;margin-top:clamp(46px,5.6vw,70px)}
.lista-artigos .art{display:grid;grid-template-columns:minmax(0,.28fr) minmax(0,.72fr);
  gap:clamp(16px,2.8vw,40px);padding:clamp(18px,2.2vw,28px) 0;border-bottom:1px solid #D8D3C9;
  align-items:center;transition:padding-left .4s var(--ease);text-decoration:none;color:inherit}
.lista-artigos .art:hover{padding-left:clamp(6px,1.2vw,16px)}
.lista-artigos .art .capa{width:100%;aspect-ratio:3/2;background:var(--areia);overflow:hidden}
.lista-artigos .art .capa img{width:100%;height:100%;object-fit:cover}
.lista-artigos .art h3{font-family:var(--serif);font-weight:400;
  font-size:clamp(19px,2vw,25px);letter-spacing:-.016em;margin:0 0 7px;line-height:1.14}
.lista-artigos .art p{font-size:14.5px;line-height:1.62;color:#5A564E;margin:0 0 9px;max-width:62ch}
.lista-artigos .art .meta{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--bronze)}
@media(max-width:760px){.lista-artigos .art{grid-template-columns:1fr;gap:16px}}

/* ---- impressão ------------------------------------------- */
@media print{
  nav,#menu,#cur,#prog,.grain,#pre,footer,.autor .links{display:none!important}
  body{background:#fff;font-size:11pt}
  .artigo{max-width:none}
  figure{break-inside:avoid}
}


/* ---- conversa · fim do artigo ----------------------------
   Faixa unica entre a secao "continue" e o rodape: dois rostos,
   uma pergunta, um botao. Curta de proposito — quem chega aqui
   ja gastou a paciencia de ler. */
.conversa{background:var(--areia);padding:clamp(30px,4vw,44px) 0}
.cv-faixa{display:flex;align-items:center;gap:clamp(18px,3vw,38px);flex-wrap:wrap}
.cv-caras{display:flex;flex:0 0 auto}
.cv-caras img{width:64px;height:80px;object-fit:cover;filter:grayscale(1);
  border:2px solid var(--areia)}
.cv-caras img+img{margin-left:-16px}
.cv-dizer{flex:1 1 320px;min-width:0}
.cv-t{font-family:var(--serif);font-weight:300;font-size:clamp(21px,2.6vw,30px);
  line-height:1.18;letter-spacing:-.02em;color:var(--ink)}
.cv-s{font-size:14px;color:#6E6A62;margin-top:6px}
.cv-agir{flex:0 0 auto}
.cv-b{display:inline-flex;align-items:center;gap:12px;font-size:11.5px;
  letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  padding:16px 28px;background:var(--bronze);color:var(--creme);
  border:1px solid var(--bronze);
  transition:background .3s var(--ease),border-color .3s var(--ease)}
.cv-b:hover{background:var(--ink);border-color:var(--ink)}
.cv-b:hover .cv-seta{transform:translateX(4px)}
.cv-seta{width:22px;height:9px;flex:0 0 auto;transition:transform .3s var(--ease)}
.cv-fine{font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:#8A857C;margin-top:10px;text-align:center}
@media(max-width:700px){
  .cv-agir{width:100%}
  .cv-b{width:100%;justify-content:center}
}