/* quem-somos — estilos exclusivos da página.
   Componentes compartilhados (section-head, card-grid, t-card, t-ico,
   about-prose, ctaband, eyebrow, grad-text) vivem no base.css — aqui só o
   que é específico desta página, sempre lendo os tokens --c-* p/ ficar
   legível tanto em .sec-dark quanto em .sec-light. */

.qs-hero-copy { max-width:760px; }
.qs-hero-copy .h1 { margin:14px 0; }
.qs-hero-copy .lead { max-width:64ch; }

/* VALORES — mesma casca de missão/visão (.t-card + .t-ico + h3), agora com os
   seis princípios DENTRO da caixa. Os itens não ganham cartão próprio: caixa
   dentro de caixa pesa e competiria com os dois cartões de cima. Um filete na
   borda esquerda já separa o suficiente e mantém a leitura em bloco. */
.values-card { margin-top:22px; }           /* = gap do .card-grid, alinha o respiro */

.values-list {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:22px 30px;
  margin:6px 0 0; padding:0; list-style:none;
}
.values-list li { border-left:2px solid var(--c-line2); padding-left:14px; }
.values-list h4 {
  font-size:1.02rem; font-weight:700; letter-spacing:-.01em;
  margin:0 0 6px; color:var(--c-fg);
}
.values-list p { color:var(--c-muted); font-size:.92rem; line-height:1.5; margin:0; }

/* Os @media do .values-list ficam AQUI (mesma folha, depois da regra de topo) —
   o seletor só existe nesta página; ver a regra do @media no CLAUDE.md. */
@media (max-width:960px) { .values-list { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px) { .values-list { grid-template-columns:1fr; } }

/* o grid missão/visão encosta na caixa de valores */
.mvv-grid { margin-bottom:0; }