/* ============================================================
   QUEM SOMOS — label à esquerda, texto grande à direita
   ============================================================ */
.about .wrap{display:grid;grid-template-columns:1fr;gap:clamp(24px,5vw,40px)}
@media(min-width:820px){.about .wrap{grid-template-columns:minmax(120px,180px) 1fr}}
.about__text{font-size:clamp(1.5rem,6vw,2.6rem);line-height:1.2;font-weight:500;letter-spacing:-.02em}
.about__text p+p{margin-top:1em}
.about__text b{font-weight:700}
.about__text .muted{color:var(--ink-soft)}
/* Do 2º parágrafo em diante o corpo cai: o 1º é a TESE e os outros são o
   desdobramento dela. Era `nth-of-type(2)` e virou `n+2` quando a
   /landing-page passou a usar três parágrafos aqui (manchete, o estúdio
   de um homem só, e o porquê disso importar): com a regra antiga o
   terceiro voltava ao corpo de tese e a seção ficava com duas manchetes. */
.about__text p:nth-of-type(n+2){font-size:.72em;line-height:1.35;letter-spacing:-.01em}
/* Link de conversa com seta e sublinhado esmeralda, fechando a seção */
.about__cta{
  display:inline-flex;align-items:center;gap:12px;margin-top:clamp(40px,7vw,64px);
  padding-bottom:8px;border-bottom:2px solid var(--green);
  font-size:clamp(1.1rem,2.6vw,1.5rem);font-weight:600;letter-spacing:0;
  transition:opacity .25s,gap .25s;
}
@media(hover:hover) and (pointer:fine){.about__cta:hover{opacity:.6;gap:18px}}
.about__cta .arrow{color:var(--emerald-dark);font-size:1.15em}

/* —— Mobile: mais ar entre os blocos e texto um ponto maior —— */
@media(max-width:640px){
  .about .wrap{gap:20px}
  .about__text{font-size:clamp(1.55rem,6.8vw,2rem);line-height:1.22}
  .about__text p+p{margin-top:.9em}
}

/* ============================================================
   A FICHA DE QUEM FAZ (só a /landing-page, desde 11/09/2026)

   Eram três parágrafos de tese em Inter grande. O trabalho da seção é
   mostrar quem responde do outro lado, e isso se faz com rosto, nome e
   três dados. Mesma anatomia da ficha dos projetos: foto à esquerda com
   a sombra dura de objeto impresso, e à direita o nome em corpo de
   manchete, uma frase, a régua de dados e o fecho. Vem DEPOIS do
   componente de propósito.
   ============================================================ */
.about--ficha .wrap{grid-template-columns:1fr;gap:clamp(24px,4vw,40px)}
.about__ficha{display:grid;grid-template-columns:1fr;gap:clamp(24px,4vw,48px);align-items:center}
@media(min-width:820px){
  .about__ficha{grid-template-columns:minmax(200px,300px) minmax(0,1fr);column-gap:clamp(40px,6vw,96px)}
}
.about__foto{
  margin:0;width:min(100%,300px);aspect-ratio:4/5;
  border:1.5px solid var(--ink);
  box-shadow:12px 14px 0 var(--paper-2),12px 14px 0 1.5px var(--ink);
  background:var(--paper-2);
}
.about__foto img{display:block;width:100%;height:100%;object-fit:cover}
.about__corpo{max-width:56ch}
.about__nome{
  font-family:var(--font-display);font-stretch:62%;font-weight:900;text-transform:uppercase;
  font-size:clamp(2.4rem,6.4vw,4.4rem);line-height:.9;letter-spacing:-.035em;color:var(--ink);
}
.about__papel{margin-top:14px;font-size:clamp(1.05rem,1.4vw,1.25rem);line-height:1.45;color:var(--ink)}
.about__dados{
  list-style:none;margin:clamp(20px,2.6vw,28px) 0 0;padding:14px 0 0;
  border-top:1.5px dashed var(--green);
  display:flex;flex-wrap:wrap;gap:10px clamp(22px,3.4vw,44px);
}
.about__dados li{display:flex;align-items:baseline;gap:8px;white-space:nowrap}
.about__dados b{
  font-family:var(--font-display);font-stretch:78%;font-weight:900;
  font-size:clamp(1.6rem,3.4vw,2.2rem);line-height:1;letter-spacing:-.02em;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.about__dados span{
  font-family:var(--font-mono);font-weight:700;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--green-dark);
}
.about__fecho{margin-top:clamp(18px,2.4vw,24px);font-size:clamp(.95rem,1.15vw,1.05rem);line-height:1.5;color:var(--ink-soft);max-width:46ch}
.about--ficha .about__cta{margin-top:clamp(24px,3vw,32px);font-size:clamp(1rem,1.3vw,1.2rem)}