/* ═════════════════════════════════════════════════════════════════
   RIVIO — Quem somos

   FAMÍLIA HOME (DIRETRIZES § 3.5). O herói, o `tell`, a `dark-section`,
   o eyebrow, a `cta-seta`, o Advisory (`altv`) e o card dos fundadores
   vêm da `componentes.css`. Esta folha tem o que é da página:

   · (o BLOCO de leitura — lead 312 + prosa 751 — subiu para a
     `componentes.css` como `.leitura*` quando a página de imprensa
     passou a usá-lo também);
   · o bloco no formato dos cases (`.qs-caso`: §§ 2, 3 e 4, 2026-09-25),
     os cards dos números do § 2 e a ilustração própria do § 3;
   · os antes/depois (§ 6), a régua do § 5, o carrossel de logos e os cards
     dos antes/depois do § 6, os fundadores do § 7 e os investidores
     (o redesenho de 2026-09-24; o fecho é a `.foto-cta`).

   A postura é a da copy: medida, sem enfeite. Nada tem contorno; o que
   separa é espaço, cor e peso.
   ═════════════════════════════════════════════════════════════════ */

/* ── O herói ─────────────────────────────────────────────────────
   A manchete é mais longa que a da home ("Hospitais eficientes salvam
   mais vidas"); a caixa em `em` do componente quebraria em quatro
   linhas. Solta a caixa — e desde 2026-09-25 (teto do título em 52 e
   "no máximo 2 linhas no desktop") ela abre o bastante para DUAS
   linhas, equilibradas pelo `balance`. O texto corrido mede 30em;
   duas linhas pedem ~15,2em cada. */
.qs-hero__titulo { max-width: 16.4em; text-wrap: balance; }
/* Entre 1101 (onde o herói volta a ser linha) e ~1280 a coluna do
   título, ao lado do lede de 347, não dá 16,23em — a medida da segunda
   linha, "nunca deveria ter precisado operar." — e a frase caía em
   três. Nessa faixa o corpo acompanha o espaço livre (≈ 100vw − 450,
   medido: 657 a 1101, 828 a 1280) dividido pela linha; de 1280 para
   cima o `3.9vw`/52 do componente é menor e volta a mandar. */
@media not all and (max-width: 1100px) {
  .qs-hero__titulo {
    font-size: min(clamp(28px, 3.9vw, 52px), calc((100vw - 460px) / 16.3));
  }
}

/* ── Os aros ─────────────────────────────────────────────────────
   O componente `.aros` (o palco do Carreiras) com a frase que era o lede
   do herói. Ela tem 158 caracteres contra 104 lá: na caixa do Carreiras
   (14,889em) dava seis linhas estreitas no meio de um aro que tem espaço
   de sobra — a pessoa mais perto ficava a 137px a 1440. Com 18em são
   cinco linhas.

   No estreito a frase continua mais alta que a do Carreiras (cinco ou
   seis linhas contra quatro), e as pessoas de cima e de baixo pisavam
   nela — 10px a 375 × 667. Elas se afastam na vertical (`--aros-afasta`)
   2,2 corpos da frase. Mora no PALCO porque é lá que
   `--u` existe. */
.qs-aros { --aros-caixa: 18em; }

@media (max-width: 900px) {
  .qs-aros .aros__palco {
    --aros-afasta: calc(min(36px, max(var(--h2), 36 * var(--u))) * 2.2);
  }
}

/* SEM LEDE desde 2026-09-25: a frase virou a seção dos aros. Sozinho na
   coluna, o "Scroll to explore" ficava centrado na altura do título e no
   começo da coluna — solto no meio da foto. Pedido: "deve sempre ficar
   no canto inferior direito" — NO DESKTOP (2026-09-27: "era a respeito
   da versão desktop, versões de telas estreitas como tablet e mobile
   devem ser alinhadas à esquerda"). Em linha (≥ 1101) a linha alinha
   pela BASE e a coluna encosta o hint à direita; empilhado, ele fica
   embaixo do título, à esquerda, como no componente. */
@media not all and (max-width: 1100px) {
  .qs-hero .hero__row { align-items: flex-end; }
  .qs-hero .hero__aside { align-items: flex-end; }
}

/* O véu do componente é 34% embaixo, medido para a foto do laboratório
   da home. Esta foto tem a mesa iluminada pela janela justamente sob o
   lede, e o branco de 16px sobre ela dava 3,1:1. Mais denso na metade
   de baixo — onde o texto mora — e igual em cima. */
.qs-hero .hero__media::after {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.42) 0%,
    rgba(0, 0, 0, 0.22) 30%,
    rgba(0, 0, 0, 0.6) 70%,
    rgba(0, 0, 0, 0.7) 100%
  );
}

/* ── O BLOCO NO FORMATO DOS CASES (`.qs-caso`) ───────────────────
   2026-09-25: "fazer essa seção no formato das seções da página de
   cases", depois "a seção seguinte… o mesmo visual". Os valores do bloco
   "Impacto médio por conta auditada" do Sírio (`case.css`:
   `.case-grade`, `.case-bloco`, `.case-cab`, `.case-h3`, `.case-tag`)
   copiados para cá, como a faixa — a página não carrega o `case.css`.
   Grade 384 + 800 com o conteúdo na coluna da direita e o rótulo, quando
   há, na da esquerda; título de bloco a 22 em Dark-01, parágrafos a 16
   em Dark-03. Fundo branco. Usam: "Por que existimos" (`.qs-por`) e "O
   que a Rivio é" (`.qs-nao`).

   SEM ÓRFÃ NEM VIÚVA (DIRETRIZES § 3.9): no markup, a primeira palavra
   de cada frase, as palavras de uma letra e a última palavra de cada
   parágrafo vão coladas com ` `. */
.qs-caso {
  padding: 120px 0;
  background: #fff;
}

/* Dois blocos SEGUIDOS (o § 3 e o § 4, ambos brancos): o segundo não
   repete o respiro de cima, e abre com a RÉGUA dos cases
   (`.case-sec--regua`: fio de 1px Dark-01 a 12%, dentro da largura de
   1216) — sem ela os dois liam como uma seção só. */
.qs-caso + .qs-caso { padding-top: 0; }

.qs-caso + .qs-caso > .qs-caso__grade {
  border-top: 1px solid rgba(24, 27, 31, 0.12);
  padding-top: 120px;
}

.qs-caso__grade {
  display: grid;
  grid-template-columns: 384fr 800fr;
  column-gap: 32px;
  align-items: start;
  width: min(1216px, calc(100% - 2 * var(--gutter)));
  margin: 0 auto;
}

/* O rótulo da seção na coluna da esquerda, como os "03/ O resultado" dos
   cases — no "Por que existimos" ele É o `h2` ("trazer esse título no
   formato de tag", 2026-09-25). Os 12 em cima são os `padding-block` do
   `.case-tag`: centram a caixa de cap-height na primeira linha do título
   de 22 (33px); onde o bloco abre direto em parágrafo de 18 (27px), o
   `.qs-por` desconta. */
.qs-caso__rotulo {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  padding-top: 12px;
}

.qs-por .qs-caso__rotulo { padding-top: 8px; }

.qs-caso__bloco {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.qs-caso__cab {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.qs-caso__titulo {
  margin: 0;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.5;
  color: var(--dark-01);
  text-wrap: balance;
}

/* Os parágrafos são PROSA CORRIDA, e seguem a `.case-prosa` dos cases:
   18 / 1,5, peso 300, Dark-03, e UMA LINHA VAZIA entre parágrafos (27 —
   a entrelinha de 18 × 1,5, o valor do Figma). A primeira versão usava o
   `.case-cab p` (16, com 8 entre parágrafos), que nos cases é só a linha
   de leitura sob o título de um gráfico — o Jefferson viu a diferença
   ("tem um espaço entre parágrafos… e o tamanho da fonte"). Do título
   ao primeiro parágrafo continua o 8 do `.case-cab`; entre parágrafos o
   `margin-top` completa os 27. */
.qs-caso__cab p {
  margin: 0;
  font-weight: 300;
  font-size: 18px;
  line-height: 1.5;
  color: var(--dark-03);
  text-wrap: pretty;
}

.qs-caso__cab p + p { margin-top: 20px; }

/* ── § 2 · Por que existimos: os quatro dados em cards ────────────
   Os cards do bloco do Sírio (`.case-cards--alto`): claros, etiqueta
   miúda (aqui com o índice), número de 32 no degradê que apaga e a
   legenda de 12. */
/* ALINHADOS ENTRE SI, e esta é a diferença para os cards do case: lá o
   número assenta pelo `space-between`, e com legendas de duas e de três
   linhas o 97% e o 80 dias ficavam 18px acima do 40 h e do 8%. Aqui
   cada card é um SUBGRID de três faixas — etiqueta, número, legenda —
   que a lista divide por fileira: os números de uma fileira ficam na
   mesma linha, e as legendas começam juntas. O `display: contents` do
   `.qs-dados__dado` põe número e legenda direto no subgrid. */
.qs-dados {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: auto;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.qs-dados > li {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 12px;
  align-items: start;
  padding: 12px;
  border-radius: var(--r-caixa);
  background: var(--light-01);
}

/* O ÍCONE no alto do card, como nos cards dos cases (`.case-cards li >
   img`, 32 × 32): a pastilha branca com o desenho no degradê da marca.
   Eram índices 01–04 — "não é uma sequência de fato… é mais útil os
   ícones" (2026-09-25). Os quatro são os dos cases, reaproveitados (ver
   `docs/ASSETS.md`). */
.qs-dados__ico {
  display: block;
  width: 32px;
  height: 32px;
}

.qs-dados__dado { display: contents; }

.qs-dados__val {
  width: fit-content;
  /* o vão entre o ícone e o número — o card do case tem 190 de altura
     mínima; aqui a altura sai do conteúdo, e 48 a reproduz com o ícone
     de 32 no alto */
  margin: 48px 0 0;
  font-weight: 400;
  font-size: 32px;
  line-height: 1;
  white-space: nowrap;
  background: linear-gradient(180deg, var(--dark-05) 28.947%, rgba(122, 133, 153, 0.14) 285.37%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* `balance`, e as colas (` `) só onde um artigo ou "no" ficaria no
   fim da linha. Até 2026-09-28 era `pretty` com correntes de colas ("um
   command center", "primeira submissão", "que entra"): a corrente não
   quebra, e numa coluna de 132–167 sobrava uma linha curta no meio —
   "operam sem", "já na" ("caminho de rato", disse o cliente). Medido de
   360 a 1920: só a 360 o quarto card vai a quatro linhas, terminando em
   "que entra". */
.qs-dados__leg {
  margin: 0;
  font-weight: 300;
  font-size: 12px;
  line-height: 1.5;
  color: var(--dark-03);
  text-wrap: balance;
}

/* ── A faixa com foto ────────────────────────────────────────────
   A `case-faixa` dos cases (`case.css`, os mesmos valores): a foto de
   borda a borda (1.27 do banco — alguém escrevendo à mesa, à esquerda),
   o véu na metade de baixo e o texto na coluna da direita da grade de
   1216 (384 + 32 de calha), branco a 28, o destaque em âmbar. É a
   citação que antes estava no texto grande. */
.qs-faixa {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 720px;
  padding-block: 60px;
  overflow: clip;
  isolation: isolate;
}

.qs-faixa__foto { position: absolute; inset: 0; z-index: -1; background: var(--dark-01); }
.qs-faixa__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }

.qs-faixa__foto::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Mais denso que o dos cases: a foto é clara (paredes brancas, luz de
     janela), e com o degradê de lá o branco dava 2,2:1 sob o texto. Da
     metade para baixo o véu fecha e, na coluna da direita, onde o texto
     assenta, fecha mais — o homem à esquerda continua à vista. */
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.35) 60%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.1) 35%, rgba(0, 0, 0, 0.72) 70%, rgba(0, 0, 0, 0.86) 100%);
}

.qs-faixa__grade {
  display: grid;
  grid-template-columns: 384fr 800fr;
  column-gap: 32px;
  width: min(1216px, 100% - var(--gutter) * 2);
  margin-inline: auto;
}

.qs-faixa__texto {
  grid-column: 2;
  margin: 0;
  font-weight: 400;
  font-size: 28px;
  line-height: 1.4;
  color: var(--light-01);
}

.qs-faixa__texto em { font-style: normal; color: var(--yellow); }

/* ── A faixa ALTA ─────────────────────────────────────────────────
   A frase de arquitetura (Rivio_1.120.1, o corredor clínico): a mesma
   faixa, mais alta para ter presença — 880 contra 720 no largo, 640
   contra 520 no estreito. Véu próprio: o da faixa de baixo (medido para
   paredes brancas e luz de janela) dava 16,9:1 aqui e deixava o corredor
   turvo; este só fecha na base, onde o texto assenta.

   SEM ÓRFÃ NEM VIÚVA (DIRETRIZES § 3.9): a segunda frase abre linha
   própria (`.qs-faixa__linha`) — solta, o "Tem" ficava sozinho no fim da
   primeira linha a 1440 —, e os ` ` do markup colam a última
   palavra de cada frase à anterior. */
.qs-faixa--alta { min-height: 880px; padding-block: 80px; }

.qs-faixa--alta .qs-faixa__foto::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0.06) 40%, rgba(0, 0, 0, 0.64) 76%, rgba(0, 0, 0, 0.8) 100%);
}

.qs-faixa__linha { display: block; }

.qs-faixa__texto { text-wrap: pretty; }

/* ── A frase-síntese do bloco (`.qs-caso__fecho`) ─────────────────
   Um degrau acima da prosa: 20 / 1,4 em Dark-01. O § 3 fecha com "O
   hospital não compra uma ferramenta…", a última frase da seção na copy.
   (O § 4 também fechava assim com "A visão é simples…", que virou a
   faixa com foto `#visao` em 2026-09-25.) */
.qs-caso__fecho {
  margin: 0;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.4;
  color: var(--dark-01);
  text-wrap: pretty;
}

/* ── § 3 · Os três blocos: os cards de ilustração da home ─────────
   (2026-09-25, "trazer um visual semelhante [aos cards do Financial
   Intelligence da home]… o segundo card tem um mockup do command center
   que podemos reaproveitar"). O card é o componente `.card` do
   `componentes.css` — arte de 292 × 360 remontada em DOM, título 20 /
   descrição 14 — com as mesmas ilustrações: 01 o Command Center, 02 as
   fontes convergindo no núcleo de IA, 03 a pilha de remessas liberadas.
   Aqui só a grade: três colunas de 16 (o vão da home) na coluna da
   direita. As fotos de antes (`nao-{1,2,3}`) saíram do markup. */
/* ── 03 · Visibilidade financeira: a ilustração PRÓPRIA ────────────
   Na LINGUAGEM DOS GRÁFICOS DOS CASES (`.case-graf`): foto quente com
   véu, painel de vidro (branco a 24%, desfoque forte), grade em branco
   translúcido, barras CHAPADAS — azul da marca no apurado, `#d9dbe0` no
   estimado —, meses em Bai Jamjuree maiúscula e valores em Funnel, tudo
   branco. O conteúdo é o gráfico 2 do case do Sírio, o resultado por mês
   (abril e maio estimados, junho e julho apurados, teto 8, quatro
   divisões), com a foto dele — "quanto vai receber, quando vai
   receber". A primeira versão (um painel branco com linha em degradê)
   foi recusada: "completamente fora do nosso padrão visual".

   Medidas em píxel de design (`--d`, card de 292 × 360): vidro com 18
   de margem (256 × 324 por dentro); linha de base a 280 do topo do
   vidro, 196 de altura útil (49 por divisão) — com a base a 262 sobrava
   um vão vazio sob os meses; quatro barras de 36 com
   16 entre elas, centradas. A barra CRESCE da base na entrada — o
   preenchimento é o `::before`, para o valor e o mês não esticarem. */
.card__arte--vf::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
}

.vf__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vf__vidro {
  position: absolute;
  inset: calc(18 * var(--d));
  z-index: 1;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: calc(8 * var(--d));
  background: rgba(255, 255, 255, 0.24);
  backdrop-filter: blur(calc(24 * var(--d)));
  -webkit-backdrop-filter: blur(calc(24 * var(--d)));
  opacity: 0;
  transform: translateY(calc(12 * var(--d)));
}

.vf__leg {
  position: absolute;
  left: calc(16 * var(--d));
  top: calc(18 * var(--d));
  display: flex;
  gap: calc(12 * var(--d));
  margin: 0;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: calc(7 * var(--d));
  line-height: 1;
  letter-spacing: calc(0.3 * var(--d));
  text-transform: uppercase;
  color: var(--light-01);
}

.vf__leg-item {
  display: flex;
  align-items: center;
  gap: calc(5 * var(--d));
}

.vf__leg-item::before {
  content: '';
  width: calc(5 * var(--d));
  height: calc(5 * var(--d));
  background: var(--blue);
}

.vf__leg-item--estimado::before { background: #d9dbe0; }

.vf__grade i {
  position: absolute;
  left: calc(16 * var(--d));
  right: calc(16 * var(--d));
  height: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.24);
}

.vf__grade i:nth-child(1) { top: calc(280 * var(--d)); }
.vf__grade i:nth-child(2) { top: calc(231 * var(--d)); }
.vf__grade i:nth-child(3) { top: calc(182 * var(--d)); }
.vf__grade i:nth-child(4) { top: calc(133 * var(--d)); }
.vf__grade i:nth-child(5) { top: calc(84 * var(--d)); }

.vf__barras {
  margin: 0;
  padding: 0;
  list-style: none;
}

.vf__barra {
  position: absolute;
  left: calc((32 + var(--i) * 52) * var(--d));
  bottom: calc(44 * var(--d));
  width: calc(36 * var(--d));
  height: calc(var(--v) / 8 * 196 * var(--d));
}

.vf__barra::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--blue);
  transform-origin: 50% 100%;
  transform: scaleY(0);
}

.vf__barra--estimado::before { background: #d9dbe0; }

.vf__valor,
.vf__mes {
  position: absolute;
  left: 50%;
  white-space: nowrap;
  color: var(--light-01);
  transform: translateX(-50%);
}

.vf__valor {
  bottom: calc(100% + 5 * var(--d));
  font-family: var(--font-display);
  font-weight: 500;
  font-size: calc(10 * var(--d));
  line-height: 1;
  opacity: 0;
}

.vf__mes {
  top: calc(100% + 8 * var(--d));
  font-family: var(--font-label);
  font-weight: 600;
  font-size: calc(6.6 * var(--d));
  line-height: 1;
  letter-spacing: calc(0.5 * var(--d));
  text-transform: uppercase;
}

.card.is-vivo .vf__vidro {
  animation: card-sobe calc(0.8s * var(--esc)) var(--ease-out-soft) forwards;
  animation-delay: calc(var(--dentro) + 250ms * var(--esc));
}

.card.is-vivo .vf__barra::before {
  animation: vf-cresce 0.8s var(--ease-out-expo) forwards;
  animation-delay: calc(var(--dentro) + 700ms * var(--esc) + var(--i) * 120ms * var(--esc));
}

.card.is-vivo .vf__valor {
  animation: vf-acende 0.5s var(--ease-out-soft) forwards;
  animation-delay: calc(var(--dentro) + 1100ms * var(--esc) + var(--i) * 120ms * var(--esc));
}

@keyframes vf-cresce { to { transform: scaleY(1); } }
@keyframes vf-acende { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce), (scripting: none) {
  .vf__vidro,
  .vf__valor {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .vf__valor { transform: translateX(-50%); }
  .vf__barra::before { transform: none; animation: none; }
}

/* Os títulos daqui têm três e quatro palavras numa coluna de 256 — na
   home cabem numa linha — e soltos deixavam a última sozinha. `balance`
   e o ` ` do markup, só nesta página. */
.qs-cards .card__titulo { text-wrap: balance; }
.qs-cards .card__desc { text-wrap: pretty; }

/* O invólucro do trilho do celular não gera caixa acima dele. */
.qs-cards-fita,
.qs-cards-palco { display: contents; }

.qs-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

/* O RITMO DA ENTRADA daqui (2026-09-27, "está demorando muito para
   aparecer… tem que ser mais rápida, menos atrasada. Não é para copiar
   a mesma interação da home, lá tem outro contexto"). Na home os cards
   chegam a 280 um do outro e o movimento de dentro espera a fila INTEIRA
   (`--fase2` 1400): é uma vitrine que a pessoa para para olhar. Aqui é
   apoio de leitura — cada card chega a 110 do anterior e o de dentro
   começa 180 depois da chegada DELE, sem esperar ninguém. Com o disparo
   mais cedo (`quem-somos.js`), o painel do primeiro já sobe aos ~0,3s
   e o gráfico termina antes de 1,8s (era ~1,5s só para COMEÇAR). */
.qs-cards .card {
  --passo: 110ms;
  --fase2: 180ms;
  --passo-int: 110ms;
}

/* Mais do mockup no primeiro card ("diminui um pouco o padding lateral
   esquerdo e superior… para mostrar um pouco mais do mockup"): o painel
   do Command Center mora em 28 · 40 do desenho de 292, e não em 48 · 64
   como na home. */
.qs-cards .cc__painel {
  left: calc(28 * var(--d));
  top: calc(40 * var(--d));
}

/* ── § 5 · Como operamos ─────────────────────────────────────────── */
/* Branco puro, como as outras seções claras da página (2026-09-28:
   "a seção Como operamos, o fundo deveria ser branco puro também";
   era o Light-01, que ao lado do branco lê cinza). */
.qs-como {
  padding: 120px 0;
  background: #fff;
}

/* OS TRÊS COMPROMISSOS EM CARDS GRANDES (2026-09-26, "3 big cards… um
   aparece mais aberto e outros 2 semi abertos e abre quando passa o
   mouse em cima"). Eram três linhas de régua, densas de ler. O mecanismo
   é o da garra do Carreiras e das camadas da home: uma fileira de
   painéis com foto, um ABERTO e os outros ESTREITOS; o aberto cresce
   (`flex-grow` 1,7 contra 1) e mostra o texto.

   · A foto do banco em cada card (`docs/ASSETS.md`), com um véu que
     fecha em cima (o dado) e embaixo (o título e o texto); os estreitos
     ganham um véu a mais, para o aberto ser o foco.
   · Fechado, o card mostra SÓ o título. Aberto, entra o texto embaixo
     dele. É a copy palavra por palavra — título e texto; os "dados" da
     régua antiga (120 dias, a escada de autonomia, Garantia Rivio) não
     estavam nela, e o 120 dias voltou para a última frase do bloco 1.
   · Os títulos têm DUAS LINHAS nos três, fechados ou abertos, em
     qualquer largura (2026-09-27, "garantir que todos os títulos desses
     cards tivessem a mesma quantidade de linhas"): a quebra é um `<br>`
     no markup, e a linha mais longa ("ganha autonomia por mérito", 272)
     precisa caber no fechado — por isso 1,7 e não mais 2,6 (com 2,6 o
     fechado tinha 219 por dentro e esse título ia a três linhas).
   · O texto ocupa a LARGURA INTEIRA do card aberto (2026-09-27, "que
     ocupe a largura total do card pra ficar em menos linhas"), mas FIXA:
     a do aberto já crescido, calculada pela largura da lista (`cqw`) — o
     card cresce por baixo dele em vez de o parágrafo ir quebrando linha
     durante a transição.
   · O movimento é sutil e com curva de aceleração (2026-09-27): tudo em
     `--ease-in-out-soft` — sai devagar, acelera e assenta —, em vez do
     `--ease-out-expo`, que dava o salto no começo; a foto aproxima só 2%.
   · Quem abre é o `initCompromissos` (passar o mouse ou focar); o card
     fica aberto depois que o ponteiro sai — sem voltar ao primeiro. Sem
     JS, o `:hover` e o `:focus-within` abrem do mesmo jeito.
   · Abaixo de 1280 e em tela de toque, os três empilham abertos: lá não
     existe passar o mouse, e lado a lado o fechado não comporta o título
     em duas linhas sem espremer o aberto. */
.qs-comp {
  display: flex;
  gap: 16px;
  width: min(1216px, calc(100% - 2 * var(--gutter)));
  height: 560px;
  container-type: inline-size;
  margin: 72px auto 0;
  padding: 0;
  list-style: none;
}

.qs-comp__card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex: 1 1 0;
  min-width: 0;
  padding: 24px;
  border-radius: var(--r-caixa);
  overflow: clip;
  isolation: isolate;
  color: var(--light-01);
  outline: none;
  transition: flex-grow 0.9s var(--ease-in-out-soft);
}

.qs-comp__card.is-aberto,
.qs-comp:not([data-comps-vivo]) .qs-comp__card:hover,
.qs-comp:not([data-comps-vivo]) .qs-comp__card:focus-within { flex-grow: 1.7; }

.qs-comp__card:focus-visible { box-shadow: 0 0 0 2px var(--light-01), 0 0 0 4px var(--blue); }

.qs-comp__foto {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--dark-01);
}

.qs-comp__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 1.2s var(--ease-in-out-soft);
}

.qs-comp__card.is-aberto .qs-comp__foto img { transform: scale(1); }

/* O véu: fecha embaixo (título e texto) e um pouco em cima (o ícone);
   o MEIO fica quase limpo, para a foto viver (2026-09-28: "um overlay
   preto… muito exagerado… a fotografia ainda tem que viver"; era
   74 / 30 / 50 / 90%). Medido com o texto escondido, contra o pixel p5
   (os 5% mais claros atrás das letras), com o card do corredor e o da
   leitura abertos: o texto a 80% de branco fica em 4,8 e 5,6:1 (era
   7,6 e 8,2), o título em 3,5–3,7 (mediana 5–8); o meio da foto aberta
   passou de 13 para 25% de brilho (corredor) e de 8 para 16% (leitura). */
.qs-comp__foto::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.48) 0%, rgba(0, 0, 0, 0.12) 26%, rgba(0, 0, 0, 0.2) 52%, rgba(0, 0, 0, 0.82) 100%);
}

/* Os estreitos ficam um tom abaixo do aberto (era 32%). */
.qs-comp__foto::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.18);
  transition: opacity 0.9s var(--ease-in-out-soft);
}

.qs-comp__card.is-aberto .qs-comp__foto::before { opacity: 0; }

/* O ÍCONE no alto do card, aberto ou fechado (2026-09-26, "sentindo
   falta de ícones desses cards"; trocados em 2026-09-27 pelos que o
   Jefferson desenhou para a seção, nó `1348:55773` do Figma — a pessoa no
   globo, o cérebro e o aperto de mãos). Cores do Figma: traço `#C0C0C0`
   de 1px, nós `#292929` com anel branco (ver `docs/ASSETS.md`). Tamanho
   80% do desenho (os `width`/`height` do `<img>`), opacidade 75% e
   `screen` sobre a foto — pedidos do Jefferson no mesmo dia: o traço
   claro fica claro e pega a luz da foto, o miolo escuro dos nós some e
   sobra o anel. O card já é `isolation: isolate`, então o blend só vê a
   foto e o véu dele. O `viewBox` de cada SVG foi recortado no contorno
   do desenho, e a borda esquerda visível cai na margem do texto. */
.qs-comp__ico {
  display: block;
  margin: 0 auto auto 0;
  flex: none;
  opacity: .75;
  mix-blend-mode: screen;
}

.qs-comp__corpo {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 20 / 1,24: o título dos cards da home (`.card__titulo`). A 24 lia
   enorme nos estreitos — quatro linhas num card de 220. */
.qs-comp__titulo {
  margin: 0;
  max-width: 18em;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.24;
  color: var(--light-01);
  text-wrap: balance;
}

/* O texto: largura fixa, e só aparece no aberto. Fechado, ele sai do
   fluxo em altura (`grid-template-rows` 0fr) para o título assentar no
   pé do card; aberto, a linha volta ao tamanho do texto. A largura é a
   de dentro do card aberto: a lista menos os dois vãos (32) e os seis
   respiros (144), na parte 1,7 de 3,7 que cabe ao aberto. */
.qs-comp__texto {
  display: grid;
  grid-template-rows: 0fr;
  margin: 0;
  width: calc((100cqw - 176px) * 1.7 / 3.7);
  font-weight: 300;
  /* 14 (2026-09-26, "quero texto tamanho 14 no parágrafo"); era 16 */
  font-size: 14px;
  line-height: 1.5;
  color: var(--light-80);
  opacity: 0;
  transition: grid-template-rows 0.9s var(--ease-in-out-soft), opacity 0.3s var(--ease-in-out-soft);
  text-wrap: pretty;
}

.qs-comp__texto > span { overflow: hidden; min-height: 0; }

.qs-comp__card.is-aberto .qs-comp__texto,
.qs-comp:not([data-comps-vivo]) .qs-comp__card:hover .qs-comp__texto,
.qs-comp:not([data-comps-vivo]) .qs-comp__card:focus-within .qs-comp__texto {
  grid-template-rows: 1fr;
  opacity: 1;
  transition: grid-template-rows 0.9s var(--ease-in-out-soft), opacity 0.5s var(--ease-in-out-soft) 0.4s;
}

/* Abaixo de 1280 e em tela de toque: os três abertos, empilhados. Lado a
   lado, abaixo de 1280 a lista encolhe e o fechado não comporta mais o
   título em duas linhas (272) sem o aberto ficar do tamanho dele. */
@media (hover: none), not all and (min-width: 1280px) {
  .qs-comp {
    flex-direction: column;
    height: auto;
    margin-top: 40px;
  }
  .qs-comp__card {
    flex: none;
    min-height: 420px;
    gap: 48px;
    padding: 24px;
  }
  .qs-comp__foto::before { opacity: 0; }
  .qs-comp__foto img { transform: none; }
  /* Empilhado, o título começa a 40% da altura e o texto ocupa a metade
     de baixo: o véu abre em cima e fecha a partir dali (era 62 / 55 /
     86% por igual, 2026-09-28). Medido nos três cards a 390: texto p5
     ≥ 5,6:1, título p5 ≥ 4,6:1; o brilho da foto quase dobrou. */
  .qs-comp__foto::after {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.2) 25%, rgba(0, 0, 0, 0.55) 45%, rgba(0, 0, 0, 0.8) 100%);
  }
  .qs-comp__texto {
    grid-template-rows: 1fr;
    width: 100%;
    opacity: 1;
  }
}

/* NO CELULAR (2026-09-28: "o texto ocupando muito da imagem… reduzir um
   pouco o padding… aumentar um pouco a altura… reduzir um pouco o
   tamanho do ícone"): respiro de 16 (era 24, e 20 abaixo de 375), 520 de
   altura (era 420) e o ícone a 48 de altura (era 64–66, os 80% do
   desenho). Com 16, "ganha autonomia por mérito" deixa de caber por meio
   pixel a 360: são 280 por dentro. */
@media (max-width: 900px) {
  .qs-comp__card {
    min-height: 520px;
    padding: 16px;
  }
  .qs-comp__ico {
    width: auto;
    height: 48px;
  }
}

/* O EMPILHAMENTO do celular ("quando o primeiro card aparecer, o segundo
   vai subindo por cima dele e o primeiro vai diminuindo um pouquinho").
   Cada card PRENDE no alto — 72 (a nav mais 16) e um degrau de 12 por
   card, para a borda do de baixo aparecer —, e o próximo, que vem depois
   no documento, sobe por cima. O `--pilha` (0 a 1: quanto o próximo já o
   cobriu) vem do `quem-somos.js` e encolhe o card até 92% pelo alto e
   acende o véu dos fechados (18%). Com movimento reduzido, a pilha
   comum. */
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  .qs-comp__card {
    position: sticky;
    top: 72px;
    transform: scale(calc(1 - var(--pilha, 0) * 0.08));
    transform-origin: 50% 0;
  }
  .qs-comp__card:nth-child(2) { top: 84px; }
  .qs-comp__card:nth-child(3) { top: 96px; }
  .qs-comp__foto::before { opacity: var(--pilha, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .qs-comp__card,
  .qs-comp__texto,
  .qs-comp__foto img,
  .qs-comp__foto::before { transition: none; }
}

/* ── § 6 · Escala (escuro) ───────────────────────────────────────── */
.qs-escala__inner { gap: 56px; }

/* Etiqueta e título CENTRADOS (2026-09-30, "para ficar mais
   interessante"), como a prova do Produtos (`.pprova`). A cabeça tem a
   largura e a margem do mural, então o eixo é o das placas. Prefixo
   `.qs-escala` (0,2,0): vence o `.dark-section__head` do componente
   também no celular, onde ele empilha em coluna alinhada à esquerda. */
.qs-escala .dark-section__head {
  justify-content: center;
  align-items: center;
}

.qs-escala .dark-section__titles {
  align-items: center;
  text-align: center;
}

/* Centrado, o guloso deixava a segunda linha curta à vista ("…já operam
   com" / "a Rivio." a 1101). `balance` iguala as linhas sem mudar a
   contagem (§ 6); não há frame do Figma com quebra a respeitar. */
.qs-escala .dark-section__title { text-wrap: balance; }

/* O MURAL dos hospitais (2026-09-27, "tem que ter mais presença
   visual; está muito tímido para falar dos principais clientes"): cada
   logo na sua placa, com os valores da placa da página de cases
   (`.cs-placa__logo`, `cases.css`) — vidro de 6%, proporção 397 × 280,
   raio da caixa —, em 4 × 2 (oito hospitais; ver o markup; sete desde
   2026-09-30, com a Rede D'Or oculta). Era o
   carrossel de produtos, com logos de 48 de altura soltos na faixa. O
   `--w` de cada logo está no markup e vira FRAÇÃO da placa (÷ 307: o
   mais largo, o Sírio, ocupa 70% dela) — o equilíbrio óptico entre eles
   vale em qualquer largura (um teto de 78% igualava todos em 108 no
   celular e o HCor pesava o dobro do Sírio). */
/* Flex e não grade desde 2026-09-30: com a Rede D'Or oculta sobram sete,
   e a linha INCOMPLETA fica centrada (pedido do Jefferson) em vez de
   deixar uma vaga à direita. A placa tem a largura exata de uma coluna
   da grade antiga — `(100% − vãos) ÷ colunas` —, então linha cheia não
   muda nada; com oito, volta a ser 4 × 2 sem mexer aqui. */
.qs-mural {
  --mural-col: 4;
  --mural-gap: 12px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--mural-gap);
  width: min(1216px, calc(100% - 2 * var(--dark-pad)));
  margin: 0 0 0 var(--dark-pad);
  padding: 0;
  list-style: none;
}

.qs-mural li {
  flex: 0 0 calc((100% - (var(--mural-col) - 1) * var(--mural-gap)) / var(--mural-col));
  display: grid;
  place-items: center;
  aspect-ratio: 397 / 280;
  padding: 24px;
  border-radius: var(--r-caixa);
  background: rgba(255, 255, 255, 0.06);
}

.qs-mural img {
  display: block;
  width: calc(var(--w) / 307 * 100%);
  height: auto;
  object-fit: contain;
}

/* De 1100 para baixo a placa encolhe (207 a 1024, 173 a 861) e o logo
   passa a ocupar mais dela — o maior chega a 77%, o teto das placas dos
   cases no celular; a 1024 os logos ficam com ~45 de altura em vez de
   37. As quatro colunas seguem até 861; abaixo, duas (bloco de 860). */
@media (max-width: 1100px) {
  .qs-mural li { padding: 16px; }
  .qs-mural img { width: calc(var(--w) / 280 * 100%); }
}

/* ── § 7 · Quem constrói ─ a constelação ─────────────────────────
   Desde 2026-09-28 é a CONSTELAÇÃO da home (`.constelacao` na
   `componentes.css`; o motor é o `initQuemConstroi` do `quem-somos.js`).
   Foi o formato da Visão da home e, por um dia, o título ao lado de uma
   coluna de texto — "até funciona, mas não estou levando como
   definitiva… talvez igual à constelação": um palco preso numa fita; as
   fotos crescem do centro e, no meio delas, um ato de cada vez — a
   etiqueta e o título, o primeiro parágrafo, o segundo, e o convite para
   as vagas, que fica. As FOTOS trocam a cada ato: quatro `.constelacao`,
   uma por ato, e na troca a que sai orbita e apaga enquanto a próxima
   chega orbitando às mesmas posições. O JS escreve em cada grupo `--s`,
   `--v` e `--g` (escala, opacidade, órbita), e no palco:

     --tO/--tY         título (presença e deslocamento em px)
     --aO/--aY         primeiro parágrafo
     --bO/--bY         segundo parágrafo
     --kO/--kY         o convite

   O palco é BRANCO (seção clara, DIRETRIZES § 4) e mede e posiciona como
   o da home: `--u` é o píxel de design do frame 1440 × 816, descontada a
   nav. */
.qs-quem {
  background: #fff;
  color: var(--dark-02);
}

/* Os benefícios (o `.ganhos` da `componentes.css`) descem do cinza para
   o BRANCO aqui, e não para o Light-01 do componente: embaixo deles vem
   o "Quem constrói" em branco. Na Imprensa e em Produtos o componente
   segue como é. */
#beneficios.ganhos {
  background: linear-gradient(180deg, color-mix(in srgb, var(--dark-05) 18%, #fff) 0%, #fff 100%);
}

/* 340svh de fita além da tela: quatro atos com o respiro de cada um
   (ver as frações no `quem-somos.js`). */
.qs-quem__fita {
  height: calc((100 + 340) * 1svh);
}

.qs-quem__palco {
  position: sticky;
  top: 0;
  display: grid;
  place-items: center;
  height: 100svh;
  padding: 32px var(--gutter);
  background: #fff;
  overflow: clip;
  --u: min(0.06944vw, calc((100svh - 56px) / 816));
  --dy-mult: 1;
  --s: 0.32;
  --g: 0;
  --v: 0;
  --tO: 1;
  --tY: 0;
  --aO: 0;
  --aY: 24;
  --bO: 0;
  --bY: 24;
  --kO: 0;
  --kY: 24;
}

/* As fotos a 80% do tamanho da home, nas mesmas posições (2026-09-28:
   "um pouquinho menor, porque está ficando grandão demais"). */
.qs-quem .constelacao__foto {
  width: calc(var(--w) * var(--u) * 0.8);
  height: calc(var(--h) * var(--u) * 0.8);
  border-radius: calc(var(--r) * var(--u) * 0.8);
}

/* O NOME no rodapé da foto, pequeno ("pode colocar o nome das pessoas no
   rodapé pequenininho dentro da fotografia"): a voz e o véu do card dos
   fundadores (`.founders-card`: 500, branco a 80%; o preto sobe de 57%
   da altura a 80% no pé), no corpo do CARGO dele — 10 a 1440, piso de 9
   (era 12, o do nome: "estão muito grandes"). */
.qs-quem .constelacao__foto::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 56.656%, rgba(0, 0, 0, 0.8) 100%);
  pointer-events: none;
}

.qs-quem__nome {
  position: absolute;
  z-index: 1;
  left: calc(8 * var(--u));
  right: calc(8 * var(--u));
  bottom: calc(8 * var(--u));
  font-weight: 500;
  font-size: max(10px, calc(10 * var(--u)));
  line-height: 1.15;
  color: rgba(255, 255, 255, 0.8);
  text-wrap: balance;
}

/* O CENTRO: a etiqueta FIXA, as falas trocando no meio e a assinatura
   dos fundadores FIXA embaixo (2026-09-28). Meia nav para baixo, como o
   grupo de fotos. */
.qs-quem__centro {
  grid-area: 1 / 1;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(24em, 100%);
  font-size: clamp(22px, 1.944vw, 28px);
  text-align: center;
  translate: 0 28px;
}

/* A etiqueta num invólucro: o `p` de dentro faz a ENTRADA (`data-rise`,
   que fixa a opacidade dele em 1) e o de fora APAGA quando o card do
   convite chega — no mesmo elemento, a regra da entrada vencia. */
.qs-quem__tag p { margin: 0; }

/* As falas na MESMA célula: a caixa tem a altura da maior, cada uma
   centrada nela, e a assinatura logo abaixo não pula na troca. 18 da
   etiqueta, o vão da Visão (12 no celular). */
.qs-quem__falas {
  display: grid;
  width: 100%;
  margin-top: 18px;
}

.qs-quem__falas > * {
  grid-area: 1 / 1;
  align-self: center;
  justify-self: center;
  margin: 0;
}

/* TODAS no mesmo corpo ("o tamanho da tipografia tem que ser o mesmo, em
   todas… um meio termo… dentro dos nossos padrões de título"): o título
   de 28 do site — o das camadas da home e dos cards grandes do mosaico,
   `clamp(22px, 1,944vw, 28px)` / 1,24 —, entre o h2 (36) e a prosa
   (18). Na voz do título de seção clara (DIRETRIZES § 4): Dark-02 com a
   lavada azul recortada no texto. A caixa de 24em (672 a 1440) põe a
   maior fala em quatro linhas. */
.qs-quem__fala {
  max-width: 100%;
  font-weight: 400;
  font-size: 1em;
  line-height: 1.24;
  text-wrap: balance;
}

/* A LAVADA mora num elemento que se move INTEIRO: no título é o `span` de
   dentro, que faz a entrada (`data-rise`) enquanto o `h2` cuida da troca
   de falas. Com o recorte no `h2` e a entrada linha a linha, o
   `background-clip: text` pintava as linhas ignorando a máscara de cada
   uma e o título aparecia antes da hora (medido). */
.qs-quem__lavada {
  display: block;
  background-image: radial-gradient(
      540px 470px at 366px -190px,
      #dde7ff 0%,
      rgba(221, 231, 255, 0) 100%
    ),
    linear-gradient(90deg, var(--dark-02), var(--dark-02));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.qs-quem__ato--titulo { opacity: var(--tO); transform: translateY(calc(var(--tY) * 1px)); }
.qs-quem__ato--p1 { opacity: var(--aO); transform: translateY(calc(var(--aY) * 1px)); }
.qs-quem__ato--p2 { opacity: var(--bO); transform: translateY(calc(var(--bY) * 1px)); }

/* Quando o card do convite chega, a etiqueta e a assinatura APAGAM — ele
   fica sozinho no meio ("oculta a tag, o nome dos sócios, e deixa só o
   card… mais focado nele"). */
.qs-quem__tag,
.qs-quem__assina { opacity: calc(1 - var(--kO)); }

/* O CONVITE: o card, no meio exato do palco (a mesma célula do centro,
   com a mesma meia nav para baixo). */
.qs-quem__ato--cta {
  grid-area: 1 / 1;
  position: relative;
  z-index: 2;
  translate: 0 28px;
  opacity: var(--kO);
  transform: translateY(calc(var(--kY) * 1px));
}

/* sem presença, o convite não é clicável nem focável (o JS põe `inert`) */
.qs-quem__ato--cta[inert] { pointer-events: none; }

/* O CARD é o `cta-seta` com corpo de card: o hover inteiro do botão —
   a seta que voa e troca na elipse, as letras que acendem uma a uma, o
   halo com o degradê da marca e a malha de pontos que deriva — agora
   sobre uma superfície. CLARA (2026-09-28: "esse card não fosse escuro,
   fosse mais claro"): o Light-01 sobre o palco branco, e as cores da
   variante `--escura` do botão, a de seção clara — texto Dark-03 que
   escurece ao acender, elipse sólida, pontos cinza que ganham as cores da
   marca perto dela, e o halo da marca atrás dela, sutil. O TEXTO no canto de baixo à esquerda e a SETA no de
   cima à direita ("o texto no canto inferior esquerdo e a seta no canto
   superior direito"). Raio de 16, o DOBRO do `--r-caixa` — pedido do
   cliente para este card ("aumentasse um pouco o border radius"). Sem
   contorno. O texto no corpo das falas (28). */
.qs-quem__card {
  --cta-elipse: 44px;
  --cta-voa: 22px;
  /* o halo atrás da elipse, SUTIL (2026-09-28: "menos chamativa, menos
     opaca"; era 180 a 34%) */
  --cta-luz: 150px;
  --cta-luz-forca: 0.18;
  --cta-malha-passo: 8px;
  --cta-malha-raio: 0.8px;
  --cta-malha-borda: 1px;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
  width: min(360px, calc(100vw - 2 * var(--gutter)));
  min-height: 220px;
  padding: 28px;
  border-radius: 16px;
  overflow: clip;
  isolation: isolate;
  background: var(--light-01);
  font-size: clamp(22px, 1.944vw, 28px);
  font-weight: 400;
  line-height: 1.24;
  text-transform: none;
  text-align: left;
  text-decoration: none;
}

.qs-quem__card .cta-seta__elipse { align-self: flex-end; }

/* a malha cobre o card e se revela em diagonal até a elipse, no canto
   de cima à direita — o véu do botão, virado para ela */
.qs-quem__card .cta-seta__malha {
  inset: 0;
  border-radius: 0;
  transform: translate(10px, -10px);
  -webkit-mask-image: linear-gradient(to top right, transparent 25%, #000 100%);
  mask-image: linear-gradient(to top right, transparent 25%, #000 100%);
}

.qs-quem__card:hover .cta-seta__malha { transform: none; }

/* o halo nasce atrás da elipse, no canto de cima */
.qs-quem__card .cta-seta__luz {
  top: calc(28px + var(--cta-elipse) / 2);
  right: calc(28px + var(--cta-elipse) / 2);
  translate: 50% -50%;
}

.qs-quem__card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(102, 148, 255, 0.6);
}

/* A ASSINATURA: os dois fundadores com um avatar redondo pequeno cada
   (recorte do rosto a partir dos originais, `docs/ASSETS.md`), o nome e
   o cargo — a voz do `.founders-card` (nome 500, cargo menor) em tinta
   escura, porque aqui o fundo é branco. Os dois AVATARES no centro, um
   ao lado do outro; o Silvio com nome e cargo à esquerda, alinhados à
   direita, e o Ricardo à direita, alinhados à esquerda (2026-09-28: "a
   foto deles sempre no centro, uma do lado da outra… o nome do Silvio e
   o cargo alinhados à direita e os do Ricardo à esquerda, para ficar
   centralizado"). Duas colunas iguais: o eixo da página passa entre os
   dois avatares, seja qual for o comprimento de cada nome. */
.qs-quem__assina {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 8px;
  width: 100%;
  margin-top: 32px;
}

.qs-quem__fundador {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 12px;
  line-height: 1.3;
  color: var(--dark-05);
  text-align: left;
}

.qs-quem__fundador:first-child {
  flex-direction: row-reverse;
  justify-self: end;
  text-align: right;
}

.qs-quem__fundador:last-child { justify-self: start; }

.qs-quem__fundador b {
  display: block;
  font-weight: 500;
  color: var(--dark-02);
}

.qs-quem__avatar {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

/* A ENTRADA do centro (2026-09-28: "surgir primeiro a tag, depois o
   título, depois o avatarzinho dos fundadores, depois os textos dos
   fundadores vindo da direita para a esquerda, no caso do Ricardo, da
   esquerda para a direita, no caso do Silvio… depois aparece a
   constelação em volta"). Temporizada, pelo `data-rise` do site
   (`entrada.css`, disparado pelo `initRise` ao entrar em cena) — motion
   de entrada é relógio, não scroll (DIRETRIZES § 5.1). As demoras: a
   etiqueta a 0, o título a 150, os avatares a 650 e 720, os textos a
   900. A constelação nasce depois, também no relógio (o `quem-somos.js`
   a faz crescer de 1,3s a 2,3s após a etiqueta aparecer).
   Aqui só o que muda do `data-rise` padrão, que sobe 18px: o avatar
   nasce de 60% do tamanho, e os textos correm na horizontal em direção
   ao avatar. A especificidade é alta de propósito — tem de vencer o
   `transform` do estado escondido e o do revelado. */
.js .qs-quem__assina .qs-quem__avatar[data-rise] { transform: scale(0.6); }
.js .qs-quem__assina .qs-quem__fundador:first-child > span[data-rise] { transform: translateX(-24px); }
.js .qs-quem__assina .qs-quem__fundador:last-child > span[data-rise] { transform: translateX(24px); }

.js .qs-quem__assina .qs-quem__avatar[data-rise].is-seen,
.js .qs-quem__assina .qs-quem__fundador > span[data-rise].is-seen { transform: none; }

/* Sem palco preso (sem JS ou com movimento reduzido), o palco é o quadro
   final parado: as falas empilhadas, todas visíveis, com a etiqueta em
   cima, a assinatura embaixo e o card do convite depois. */
@media (prefers-reduced-motion: reduce), (scripting: none) {
  .qs-quem__fita { height: auto; }
  .qs-quem__palco {
    position: relative;
    height: auto;
    --s: 1;
    --v: 1;
    --tO: 1; --tY: 0; --aO: 1; --aY: 0; --bO: 1; --bY: 0; --kO: 1; --kY: 0;
  }
  .qs-quem__falas { gap: 24px; }
  .qs-quem__falas > * { grid-area: auto; }
  /* parado, a etiqueta e a assinatura ficam, e o card vem depois do centro */
  .qs-quem__tag,
  .qs-quem__assina { opacity: 1; }
  .qs-quem__ato--cta { grid-area: auto; translate: none; }
  .qs-quem__palco { row-gap: 40px; }
}

/* Parado, as falas empilhadas, a assinatura e o card ocupam a tela e as
   fotos cairiam em cima deles (medido a 1440 e a 390): fica só o
   conteúdo — as fotos são atmosfera. */
@media (prefers-reduced-motion: reduce), (scripting: none) {
  .qs-quem .constelacao { display: none; }
  .qs-quem__palco { min-height: 0; padding-block: 120px; }
}

@media (prefers-reduced-motion: reduce) and (max-width: 900px), (scripting: none) and (max-width: 900px) {
  .qs-quem__palco { padding-block: 80px; }
}

/* Logo acima do celular a constelação já encolheu com a largura e o
   texto ainda não (22px de piso): de 901 a ~940 uma foto encostava no 1º
   e no 2º parágrafo (medido). Ali elas se afastam um pouco na vertical. */
@media (max-width: 960px) {
@media not all and (max-width: 900px) {
  .qs-quem__palco { --dy-mult: 1.25; }
}
}

/* No celular a composição se afasta na vertical — 3,6 e não os 2,8 da
   home: aqui o centro tem a fala mais longa em sete linhas E a
   assinatura embaixo, e a 2,8 as fotos de baixo caíam em cima dela
   (medido a 390). O nome das fotos sai — a foto tem ~30px ali. As falas
   sem a lavada (a nota da Visão da home: numa caixa estreita a parte
   clara cai sobre as linhas de baixo). */
@media (max-width: 900px) {
  /* A CONSTELAÇÃO DO CELULAR é HORIZONTAL e COMPACTA (2026-09-28: "mais
     horizontal… não pode ficar muito longe verticalmente… mais
     compacta"; antes, multiplicar o `--dy` do desktop espalhava as fotos
     para o alto e para baixo da tela). Duas fileiras de três, coladas no
     centro: acima dele, esquerda · meio · direita; abaixo, o mesmo. Na
     vertical cada foto fica a `--centro-meia` (a metade da altura da
     etiqueta + fala + assinatura, do `quem-somos.js`) mais um respiro —
     e acompanha o texto quando ele cresce ou encolhe. O do meio vai um
     pouco mais longe que os dos cantos, o arco da constelação. O respiro
     é de 76 a 96 (o cliente pediu mais 32 em cima e embaixo sobre os
     44–64 da primeira versão). Na
     horizontal as dos cantos vão até perto do recuo: a de |dx| 457,5
     (a maior) cai a 24 dele. */
  .qs-quem__palco {
    --dx-u: calc((50vw - var(--gutter) - 24px) / 460);
  }
  .qs-quem .constelacao__foto:nth-child(4) { --dy-px: calc(-1 * var(--centro-meia, 180px) - 80px); }
  .qs-quem .constelacao__foto:nth-child(3) { --dy-px: calc(-1 * var(--centro-meia, 180px) - 96px); }
  .qs-quem .constelacao__foto:nth-child(2) { --dy-px: calc(-1 * var(--centro-meia, 180px) - 76px); }
  .qs-quem .constelacao__foto:nth-child(5) { --dy-px: calc(var(--centro-meia, 180px) + 80px); }
  .qs-quem .constelacao__foto:nth-child(1) { --dy-px: calc(var(--centro-meia, 180px) + 96px); }
  .qs-quem .constelacao__foto:nth-child(6) { --dy-px: calc(var(--centro-meia, 180px) + 84px); }
  .qs-quem__nome,
  .qs-quem .constelacao__foto::after { display: none; }
  .qs-quem__falas { margin-top: 12px; }
  .qs-quem__lavada {
    background-image: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: var(--dark-02);
  }
  .qs-quem__assina { margin-top: 24px; }

  /* 2026-09-28, no celular: "reduzir um pouquinho o tamanho do texto…
     tem parágrafos muito longos". 20 e não os 22 do piso do título. */
  .qs-quem__centro { font-size: 20px; }

  /* A caixa das falas com a altura da fala que está na tela (o
     `--falas-h` do `quem-somos.js`): a etiqueta e a assinatura acompanham
     o texto, sem o vão da fala mais longa. A linha da grade cede à caixa
     (`minmax(0, 1fr)`) e as falas apagadas transbordam dela sem ocupar
     lugar. Sem o JS (ou parado), a variável não existe e a caixa volta a
     ser `auto`. */
  .js .qs-quem__falas {
    height: var(--falas-h, auto);
    grid-template-rows: minmax(0, 1fr);
  }

  /* O card do convite BEM menor ("está enorme quando ele aparece"): de
     350 × 220 para 240 × 144, respiro de 20, corpo 18 e elipse de 36. */
  .qs-quem__card {
    --cta-elipse: 36px;
    --cta-voa: 18px;
    --cta-luz: 120px;
    gap: 24px;
    width: 240px;
    min-height: 144px;
    padding: 20px;
    font-size: 18px;
  }
}

/* ── § 10 · O fecho ─ a `.foto-cta` da `componentes.css`, a da home. */

/* ── Médio ─────────────────────────────────────────────────────── */
@media (max-width: 1160px) {
  .qs-dados { grid-template-columns: repeat(2, minmax(0, 1fr)); }



}

/* ── Estreito ─────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .qs-hero__titulo { max-width: none; }

  /* 640 para todas desde 2026-09-28 (as comuns tinham 520): na da frase
     longa ("Por décadas…", 280 de texto) sobravam 200px de foto acima
     dele — "claustrofóbico, deixar a imagem um pouco mais alta". Agora
     são 320, e as três faixas da página têm a mesma altura. */
  .qs-faixa { min-height: 640px; padding-block: 40px; }
  /* o recorte de retrato fica com o fundo do corredor */
  .qs-faixa--alta .qs-faixa__foto img { object-position: 60% 50%; }
  .qs-faixa__grade { grid-template-columns: minmax(0, 1fr); }
  .qs-faixa__texto { grid-column: 1; font-size: 20px; }
  /* No celular a foto é mais alta que larga: o homem à esquerda fica no
     quadro. */
  .qs-faixa__foto img { object-position: 20% 50%; }
  /* O texto ocupa a metade de baixo inteira: o véu fecha mais cedo (o
     âmbar dava 3,1:1). */
  .qs-faixa__foto::after {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.3) 25%, rgba(0, 0, 0, 0.82) 55%, rgba(0, 0, 0, 0.9) 100%);
  }

  .qs-como { padding: 80px 0; }

  /* Uma coluna, como os cases abaixo de 900; o texto no corpo de
     celular do site. Os cards ficam em DUAS colunas e não em uma (o
     padrão dos cases): são quatro dados curtos, e empilhados um por
     linha eles ocupavam uma tela para dizer quatro números — a exceção
     que os cases fazem para o card de score. */
  .qs-caso { padding: 80px 0; }
  .qs-caso__grade { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .qs-caso + .qs-caso > .qs-caso__grade { padding-top: 80px; }
  .qs-caso__rotulo { grid-column: 1; grid-row: 1; padding-top: 0; }
  .qs-caso__bloco { grid-column: 1; grid-row: auto; }
  /* a `.case-prosa` do celular: corpo do site e 21 entre parágrafos */
  .qs-caso__cab p { font-size: var(--p-mobile); }
  .qs-caso__cab p + p { margin-top: 12px; }
  .qs-caso__titulo { font-size: 18px; }
  .qs-dados { gap: 8px; }
  .qs-dados > li { row-gap: 12px; }
  .qs-dados__val { margin-top: 24px; }

  .qs-caso__fecho { font-size: 16px; }

  /* Os cards em fila que rola de lado, como o trilho da home abaixo de
     1100 (`min(292px, 74vw)`), a próxima aparecendo na borda; a fila
     sangra até as bordas da tela, saindo da coluna. */
  .qs-cards {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(292px, 74vw);
    margin: 8px calc(-1 * var(--gutter)) 0;
    padding-inline: var(--gutter);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .qs-cards::-webkit-scrollbar { display: none; }

  /* A FILA PRESA AO SCROLL (2026-09-28, o padrão do trilho da home,
     `cards.js`): com o `is-trilho` do `initQsTrilho`, o palco prende no
     meio da tela, abaixo da nav, e a rolagem da página leva a fila para
     a esquerda até o último card aparecer inteiro — aí a fita acaba e a
     página volta a descer. O palco tem a altura da fila (`--palco-h`) e a
     fita, essa altura mais o percurso lateral × 1,25 (`--percurso`), as
     duas medidas pelo JS. Sem o JS, ou com movimento reduzido, fica a
     fila que rola com o dedo, acima. */
  .qs-cards-fita.is-trilho {
    display: block;
    height: calc(var(--palco-h, 0px) + var(--percurso, 0px) * 1.25);
  }
  .qs-cards-fita.is-trilho .qs-cards-palco {
    display: block;
    position: sticky;
    top: var(--palco-top, 64px);
    overflow-x: clip;
    margin-inline: calc(-1 * var(--gutter));
  }
  .qs-cards-fita.is-trilho .qs-cards {
    margin-inline: 0;
    overflow: visible;
    scroll-snap-type: none;
    transform: translateX(var(--cx, 0px));
  }



  .qs-escala__inner { gap: 40px; }
  .qs-mural { --mural-col: 2; --mural-gap: 8px; }


}