/* ════════════════════════════════════════════════════════════════════════════
   SOMA · page-home.css — a landing da empresa (entrega 9)

   A página velha vendia PLATAFORMA. Esta vende EMPRESA. E a estrutura narrativa
   é a alternância dos dois registros do acervo fotográfico:

       escuro  →  a dor      (plantão, urgência, UTI, corredor à noite)
       claro   →  o resultado (alta, família, consultório, retratos)

   Não é decoração. É o argumento: o profissional cuida das pessoas, a SOMA
   cuida dele.

   DEPENDE DE
     styles.css          tokens de cor, tipografia, easing · nav · botões · rodapé
     soma-editorial.css  tokens de espaço (--e-*) e sombra (--s-*) + o movimento

   REGRAS
     · Nenhuma cor literal. Toda cor sai de token, e as translucidezes saem de
       `color-mix()` sobre o mesmo token — não de um rgba escrito à mão.
     · Só `transform`, `opacity` e `clip-path` se movem.
     · `prefers-reduced-motion` desliga tudo; a composição final fica desenhada.
     · Nada de `pin`, nada de `scrub`: o scroll é livre do começo ao fim.
   ════════════════════════════════════════════════════════════════════════════ */

/* ══ 0 · CHÃO COMUM ══════════════════════════════════════════════════════════ */

/* Toda seção da home respira pela mesma medida. É esse token que dá cadência —
   a página velha não tinha nenhum, e por isso cada bloco tinha um ritmo próprio. */
.home-sec {
  padding-block: var(--e-secao);
  position: relative;
}
.home-wrap {
  margin-inline: auto;
  max-width: 1440px;
  padding-inline: var(--e-goteira);
  width: 100%;
}

/* ── o itálico é a assinatura (decisão D-2) ───────────────────────────────
   `styles.css:1885` desliga a serifa em TODO `section h1|h2|h3 .serif` — troca
   Instrument Serif por Inter e o itálico por cor. Foi uma decisão da página
   velha; a D-2 diz o contrário: a tipografia é a da SOMA, e o itálico da
   Instrument Serif é a assinatura da marca.

   Dois seletores de classe (0,2,0) ganham do `section h2 .serif` (0,1,2) da
   casa sem precisar de `!important` e sem tocar no arquivo global. */
.reg-escuro .serif {
  color: var(--c-teal-2);
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.015em;
}

/* ── UM FUNDO SÓ, DA PRIMEIRA À ÚLTIMA SEÇÃO ───────────────────────────────
   A página teve dois figurinos antes deste. Primeiro alternava claro e escuro —
   o escuro era a dor, o claro era o resultado. Depois virou escura inteira, mas
   com DOIS tons de navy revezando de seção em seção, para dar ritmo.

   O revezamento é o que sai agora, e o motivo é simples: cada troca de tom
   desenhava uma linha reta atravessando a tela de ponta a ponta. Em vez de
   ritmo, o que se lia era emenda — a página parecia um empilhado de blocos, e
   não uma superfície.

   O fundo passa a ser UM CAMPO CONTÍNUO, pintado no `body`. Como os gradientes
   ficam no `body` e não em cada seção, as porcentagens se resolvem contra a
   ALTURA DO DOCUMENTO INTEIRO: as poças de luz moram em pontos fixos da página
   e o leitor as atravessa ao rolar. Não há emenda possível, porque não há duas
   superfícies para emendar.

   As seções ficam transparentes. Quem quiser marcar uma delas usa fotografia ou
   luz, como o hero e o `#a-soma` já fazem — nunca um retângulo de outra cor. */
/* ── O PISO ────────────────────────────────────────────────────────────────
   O campo contínuo resolveu a emenda, mas ficou CLARO DEMAIS. Medido: a seção
   do mosaico tinha luminância média 50 num quadro que deveria ser noite, e
   quase nada da página caía abaixo de lum 8. Sem preto de verdade não existe
   luz de verdade — tudo vira o mesmo cinza-azulado, e o olho não tem contra o
   que medir o brilho de uma fotografia.

   Três decisões, nesta ordem:

   1 · O PISO DESCE. `--d-piso` é #02040A, quase quatro passos abaixo do
       `--d-bg` global. Vive AQUI, não em `styles.css`: aquele token veste toda
       a plataforma logada, onde a tela é ferramenta de trabalho e precisa da
       leitura confortável de sempre. Este arquivo é carregado só pela landing e
       pelo contato — a escala do cinema fica onde o cinema acontece.

   2 · O VÉU VERTICAL SAI. Ele existia para assentar o topo e o pé da página.
       Com o piso neste tom, o topo e o pé JÁ são mais escuros do que o véu
       conseguia deixá-los: ele agora só clareava o que queria escurecer.

   3 · AS POÇAS RECUAM PARA O MEIO. Estavam em 12%, 42%, 72% e 94% da altura do
       documento — quer dizer, acesas exatamente sobre o herói e sobre o rodapé,
       os dois lugares que precisam ser fundo puro para a fotografia e o campo
       terem contra o que brilhar. Migram para o miolo (30–70%) e caem de 6–8%
       para 3–4%: ainda dão profundidade ao atravessar, sem virar iluminação.
   ────────────────────────────────────────────────────────────────────────── */
body {
/* ── A ESCALA TIPOGRÁFICA ───────────────────────────────────────────────────
   Nove degraus, e nenhum vizinho a menos de um passo perceptível.

   Antes eram 13 valores fixos e 12 clamps — 23 tamanhos distintos na tela, com
   seis deles espremidos em 2,5 px (9 · 9,5 · 10 · 10,5 · 11 · 11,5) e quatro em
   2 px (13 · 13,5 · 14,5 · 15). Diferença assim não vira hierarquia: vira
   desalinho. O olho não lê "um degrau abaixo", lê "tem coisa torta".

   Cada degrau aqui tem um trabalho, e é por isso que são nove e não vinte. */

  /* A RÉGUA DO MOVIMENTO mudou de casa: vive agora em `soma-premium.css`, que
     é o arquivo que as doze páginas comerciais carregam. Aqui ela alcançava
     duas. Definição em `:root` de lá, consumo em todo lugar. */

  --t-rot:  clamp(8.5px, .62vw, 10.5px);   /* rótulo em espaço apertado */
  --t-mono: 10.5px;                         /* A MEDIDA — a régua mono da casa */
  --t-xs:   13px;                           /* apoio, nota, a dor */
  --t-sm:   14.5px;                         /* corpo secundário */
  --t-md:   16px;                           /* corpo */
  --t-lg:   clamp(1.05rem, 1.5vw, 1.3rem);  /* subtítulo, linha de destaque */
  --t-xl:   clamp(1.2rem, 2.1vw, 1.7rem);   /* título de bloco */
  --t-2xl:  clamp(1.8rem, 3.4vw, 3.1rem);   /* título de seção */
  --t-3xl:  clamp(3.2rem, 9vw, 7.5rem);     /* o herói — único na página */

  /* ── O PISO, O CAMPO E O GRÃO MUDARAM DE CASA ───────────────────────────
     `--d-piso`, `--d-campo`, o `body::before` do campo magnético e o
     `body::after` do grão vivem agora em `soma-premium.css`. A razão que os
     prendia aqui era "este arquivo é carregado só pela landing e pelo
     contato" — e ela expirou no dia em que o fundo passou a ser o mesmo nas
     doze páginas comerciais. Lá é o único arquivo que todas carregam. Aqui
     só se consome. */
}

/* ══ O CAMPO, O GRÃO E O RODAPÉ SEM TOM PRÓPRIO ═════════════════════════════
   Os três saíram deste arquivo e vivem em `soma-premium.css`: o `body::before`
   do campo magnético, o `body::after` do grão e o `.foot { background:
   transparent }` que deixa o campo atravessar o rodapé. Junto foi embora a
   regra `body.sales-page` que existia só para anular o gradiente próprio de
   `solucao.css` — esse gradiente também não existe mais.

   O motivo é um só: o fundo deixou de ser da landing e virou o fundo da área
   comercial inteira. Uma imagem só, constante, sem alternância de tom por
   seção. `soma-premium.css` é o único arquivo que as doze páginas carregam.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── E O LINK DO RODAPÉ CRESCE PARA O DEDO ───────────────────────────────────
   Medido a 375px: os links de coluna tinham **17px** de altura — a caixa da
   linha, nada mais. O mínimo de alvo da WCAG 2.2 é 24, e o dedo pede mais.

   `padding-block` de 5px sobre `display: block` leva a **31px**, e a `gap` cai
   de 8 para 2 para devolver ao rodapé quase todo o espaço que o preenchimento
   tomou. Medido depois: a coluna mais alta foi de 233 para 239px. **Cresce 6px**
   — não zero, e a primeira versão deste comentário dizia que não crescia, o que
   era falso. Seis pixels por coluna em troca de dobrar o alvo é uma boa conta,
   mas é uma conta, não um almoço grátis.

   Mora aqui e não em `styles.css` pelo mesmo motivo de `.foot` acima: o global
   serve doze páginas, e o rodapé delas não passou por esta medição. Quando
   passar, a regra sobe. */
.foot ul       { gap: 2px; }
.foot ul a     { display: block; padding-block: 5px; }

/* `.reg-escuro` deixa de pintar fundo: ele agora só diz que o texto é claro.
   `.reg-escuro-2` foi apagado do CSS e do HTML — o segundo tom era justamente
   a emenda, e uma classe que não pinta nada só espera alguém redefini-la. */
.reg-escuro { color: var(--d-ink); }
.reg-escuro .lead       { color: var(--d-ink-2); }
.reg-escuro .home-nota  { color: var(--d-ink-3); }
.reg-escuro .home-linha { background: var(--d-line); }

.home-linha { border: 0; height: 1px; margin-block: var(--e-7); width: 100%; }

/* cabeça de seção — eyebrow, título e o botão "Animar" na mesma linha de base */
.home-cabeca {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-5);
  justify-content: space-between;
  margin-bottom: var(--e-7);
}
.home-cabeca > div { max-width: 46ch; }
.home-cabeca h2 { margin-top: var(--e-4); }
.home-cabeca .lead { margin-top: var(--e-4); }

.home-nota {
  font-family: var(--f-rotulo);
  font-size: var(--t-mono);
  letter-spacing: 0.06em;
  line-height: 1.6;
  font-weight: 500;
}

/* uma medida de leitura só, em toda a página */
.home-medida { max-width: var(--e-medida); }

/* moldura padrão de foto: cantos, sombra e recorte — sempre a mesma assinatura */
.home-foto {
  border-radius: var(--e-5);
  box-shadow: var(--s-3);
  margin: 0;
  overflow: hidden;
  position: relative;
}
.home-foto img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}
.home-foto figcaption {
  color: var(--d-ink-3);
  font-family: var(--f-rotulo);
  font-size: var(--t-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
}

/* ══ 1 · HERO — a cena sangra no fundo ═══════════════════════════════════════
   A linha cinematográfica da SOMA: a foto ocupa a seção inteira e some dentro
   do navy por dois degradês cruzados. Não é um cartão com a foto dentro — é a
   foto sendo o chão da página, com a frase por cima.

   As três camadas, do fundo para a frente:
     0 · .home-hero-fundo   as quatro cenas, em travessia lenta
     1 · .home-hero-veu     os degradês que fundem a foto ao navy + a aurora
     2 · .home-hero         o texto e as ações                                */
.home-hero-sec {
  display: grid;
  isolation: isolate;
  min-height: min(100svh, 940px);
  overflow: hidden;
  padding-block: 0;
  position: relative;
}

/* Duas coisas aqui, e as duas são sobre empilhamento.

   SEM `z-index`: com valor próprio, esta camada viraria contexto de
   empilhamento e prenderia a navegação por nome — que vive dentro dela —
   embaixo do véu, por mais alto que fosse o z-index dela.

   `isolation: auto` DESFAZ o `isolate` que `[data-soma-slider]` traz do módulo
   editorial. Lá ele existe para o cartão do slider não vazar sombra na página;
   aqui ele criaria o mesmo contexto de empilhamento pelo outro caminho, e o
   sintoma seria idêntico: a navegação sumindo sob o véu. */
/* ── A DISSOLUÇÃO ───────────────────────────────────────────────────────────
   Tirar a cor do véu resolveu um terço. Faltavam duas coisas, e as duas eu só
   vi depois de marcar a base do herói com um fio na tela e fotografar.

   PRIMEIRA: a máscara valia só para a fotografia. O véu tem uma segunda camada,
   horizontal (96deg), que segura `--d-piso` a 94% pela esquerda para dar leito
   ao texto — e essa camada não tinha razão nenhuma para afrouxar embaixo. Ela
   ia chapada até a última linha e parava no `overflow: hidden`. O que se via
   entre o fim da máscara e a base da seção era uma faixa MAIS ESCURA que o
   campo logo abaixo: o degrau tinha mudado de lado, não desaparecido.
   Agora as duas camadas — foto e véu — se dissolvem pela mesma rampa.

   SEGUNDA: 16% de altura (144px) é curto demais. Uma rampa curta não lê como
   dissolução, lê como borda esfumada: o olho acha a linha onde a mudança
   começa. Passou para 40% — 360px de travessia.

   E os degraus não são lineares. Uma rampa reta tem derivada descontínua no
   ponto de partida, e é exatamente ali que o olho crava a borda. Os seis
   valores abaixo desenham um S: sai devagar do opaco, acelera no meio, chega
   devagar no zero. É a mesma razão pela qual não se corta som no talo.

   `no-repeat` explícito: o padrão de `mask-repeat` é `repeat`, e as imagens
   passam 45px da caixa — sem isto a rampa recomeçaria do opaco ali embaixo.

   E são DUAS RAMPAS, não uma. Com a mesma rampa nas duas camadas a emenda
   sumiu, mas a fotografia começava a se dissolver aos 60% e sobrava pouca
   imagem. As duas não têm o mesmo problema: quem fabricava a faixa escura era
   o VÉU, e é ele que precisa afrouxar cedo e devagar — o que ele faz ao soltar
   é parar de escurecer, e ninguém percebe uma sombra indo embora ao longo de
   meio hero. A foto só precisa não terminar em corte, e para isso bastam os
   últimos 216px.

   Os stops estão escritos em posição ABSOLUTA nas duas, e não como um S
   compartilhado. Tentei compartilhar: `linear-gradient(#000 46%, var(--S))` com
   o S em 14/30/52/74% coloca stops MENORES que o anterior, e a regra do CSS é
   prender cada um ao maior à esquerda — os dois primeiros viravam 46% e a
   curva achatava num degrau logo na partida. Exatamente o defeito que a curva
   existia para evitar. */
.home-hero-fundo,
.home-hero-veu {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
/* o véu: 46% → 100%, meio hero de travessia */
.home-hero-veu {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 46%,
    rgba(0,0,0,.96) 54%, rgba(0,0,0,.84) 62%, rgba(0,0,0,.60) 74%,
    rgba(0,0,0,.28) 86%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 46%,
    rgba(0,0,0,.96) 54%, rgba(0,0,0,.84) 62%, rgba(0,0,0,.60) 74%,
    rgba(0,0,0,.28) 86%, transparent 100%);
}
/* a fotografia: 76% → 100%, os últimos 216px */
.home-hero-fundo {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 76%,
    rgba(0,0,0,.96) 79%, rgba(0,0,0,.84) 83%, rgba(0,0,0,.60) 88%,
    rgba(0,0,0,.28) 94%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 76%,
    rgba(0,0,0,.96) 79%, rgba(0,0,0,.84) 83%, rgba(0,0,0,.60) 88%,
    rgba(0,0,0,.28) 94%, transparent 100%);
}
.home-hero-fundo {
  grid-area: 1 / 1;
  inset: 0;
  isolation: auto;
  position: absolute;
}
.home-hero-fundo [data-soma-slides] { height: 100%; }

/* O VÉU — o que faz a foto virar fundo em vez de ilustração.
   Vertical: assenta o topo (onde mora o cabeçalho fixo) e o pé (onde a próxima
   seção encosta). Horizontal: escurece o lado do texto e libera a foto do
   centro para a direita, que é como a home antiga compunha. A aurora por cima
   costura tudo no tom da marca. */
/* O VÉU DESCE PARA O CAMPO, NÃO PARA UM HEXADECIMAL.
   Ele terminava em `color-mix(in srgb, var(--d-piso) 97%, transparent)` — o navy antigo, escrito à mão em seis
   lugares. Quando o piso mudou, o pé do herói continuou fundindo para uma cor
   que não existia mais embaixo dele: duas superfícies encostando num corte
   reto. Foi a emenda mais dura da página, e ela é ÓBVIA na tela porque é onde a
   primeira dobra termina.

   Agora o alvo é `--d-piso`, o mesmo token do campo. O herói funde para o que
   de fato está atrás dele, hoje e no dia em que o tom mudar de novo.

   E o último trecho vai a 100% de opacidade, não 97: três por cento de
   fotografia sobrando na linha de corte são exatamente o degrau que o olho
   pega. */
/* ── O HERÓI NÃO FECHA NUMA COR ─────────────────────────────────────────────
   O véu terminava em `--d-piso` OPACO na base. Logo abaixo dele o campo
   magnético está no `--d-campo` — mais claro e puxado para o teal. Dois tons
   diferentes encostando numa linha reta de ponta a ponta: é a emenda.

   Medido: o herói fecha em y=897 com #030A16 chapado, e o campo continua em
   #071A30. Nenhum ajuste de tom resolveria, porque o campo é fixo à janela e o
   herói rola — a diferença entre os dois muda conforme se desce.

   A saída não é acertar a cor, é NÃO PINTAR. O véu passa a se dissolver na
   base, e o que aparece ali embaixo é o próprio campo, atravessando. Não há
   emenda possível quando os dois lados são a mesma superfície. */
.home-hero-veu {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--d-piso) 82%, transparent) 0%,
      color-mix(in srgb, var(--d-piso) 30%, transparent) 34%,
      color-mix(in srgb, var(--d-piso) 56%, transparent) 70%,
      color-mix(in srgb, var(--d-piso) 62%, transparent) 88%,
      transparent 100%),
    linear-gradient(96deg,
      color-mix(in srgb, var(--d-piso) 94%, transparent) 0%,
      color-mix(in srgb, var(--d-piso) 84%, transparent) 26%,
      color-mix(in srgb, var(--d-piso) 48%, transparent) 52%,
      color-mix(in srgb, var(--d-piso) 10%, transparent) 78%,
      transparent 100%),
    var(--g-aurora);
  grid-area: 1 / 1;
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

/* A camada do texto ocupa a célula inteira da grade para centralizar a frase.
   Isso a faria cobrir a navegação por nome, que está mais abaixo — daí o
   `pointer-events: none` aqui e `auto` no bloco de texto: a coluna da esquerda
   continua clicável, o resto da tela devolve o clique para a navegação. */
.home-hero {
  align-content: center;
  display: grid;
  grid-area: 1 / 1;
  padding-block: calc(var(--topbar-h) + var(--e-8)) var(--e-8);
  pointer-events: none;
  position: relative;
  z-index: 2;
}
.home-hero-texto { max-width: 46rem; pointer-events: auto; }

/* ── A LISTA VERTICAL — a assinatura da home antiga ──────────────────────────
   Nomes alinhados à direita, cada um com o seu ponto, ligados por um fio de luz.
   O ativo cresce, acende e o ponto ganha halo. Não há botão "Animar" no hero: a
   cena troca sozinha, e quem quiser escolher clica no ponto.

   É o mesmo desenho de `.hero-track`/`.hero-step` da base, agora alimentado
   pela navegação que o módulo editorial gera — o comportamento vem de lá
   (troca por clique, seta do teclado, pausa no hover), só a pele é daqui. */
.home-hero-fundo .soma-slider-nav {
  align-items: flex-end;
  bottom: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  left: auto;
  margin: 0;
  padding-inline: 0;
  pointer-events: auto;
  position: absolute;
  right: var(--e-goteira);
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
}
/* o fio que liga os pontos, aceso no meio e apagado nas pontas */
.home-hero-fundo .soma-slider-nav::before {
  background: linear-gradient(180deg, transparent, rgba(127, 231, 235, .45), transparent);
  content: "";
  height: 100%;
  position: absolute;
  right: 4px;
  top: 0;
  width: 1px;
}
/* ── O ÍNDICE DE CENAS ──────────────────────────────────────────────────────
   Estes sete rótulos nomeiam as frentes que passam no herói. Duas coisas
   estavam erradas na tipografia deles.

   1 · MONO NÃO É PARA FRASE. JetBrains Mono é fonte de código, e na casa ela
       tem um trabalho declarado: a régua A MEDIDA — rótulo CURTO, caixa alta,
       espaçado. "Unidade de Terapia Intensiva" em mono, caixa de frase e com
       .08em de espaço vira listagem de terminal: sete linhas largas que o olho
       lê como saída de comando, não como nome de lugar. Passa para Inter, que
       é a voz da interface, e o nome volta a ser nome.

   2 · O TAMANHO MUDAVA DE ESTADO. A aba ativa ia de 13 px para 14,5 e a
       transição animava `font-size` — propriedade de LAYOUT. A cada troca de
       cena a lista inteira reflui e os rótulos escorregam na horizontal. É a
       instabilidade que se vê ao assistir o herói passar sozinho.

       Agora o tamanho é um só em todos os estados. Quem diz qual está ativa é
       a COR e o ponto de luz ao lado — nenhum dos dois mexe em layout, e os
       dois são lidos antes de qualquer variação de corpo.

   O peso também é constante: a Inter aqui é carregada em pesos discretos, e
   trocar de 400 para 600 troca de ARQUIVO — muda a métrica e reflui igual. */
.home-hero-fundo .soma-slider-tab {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--d-ink-3);
  display: flex;
  font-family: var(--f-sans);
  font-size: var(--t-sm);
  font-weight: 500;
  gap: 16px;
  justify-content: flex-end;
  letter-spacing: -.005em;
  min-height: 44px;                       /* alvo de toque, mesmo sem moldura */
  padding: 6px 0;
  text-align: right;
  transition: color var(--m-medio) var(--m-entra);
}
.home-hero-fundo .soma-slider-tab::after {
  background: var(--d-ink-3);
  border-radius: 50%;
  content: "";
  height: 6px;
  margin-right: 0;
  transition: background var(--m-rapido) var(--ease-out), box-shadow var(--m-rapido) var(--ease-out),
              height var(--m-rapido) var(--ease-out), width var(--m-rapido) var(--ease-out),
              margin-right var(--m-rapido) var(--ease-out);
  width: 6px;
}
.home-hero-fundo .soma-slider-tab:hover { color: var(--d-ink); }
/* A ativa vem para o BRANCO, não para o teal. O ponto de luz ao lado já é
   teal e já é o acento — dois acentos na mesma linha competem, e o nome é
   quem tem de ganhar. Branco contra `--d-ink-3` é o maior salto de contraste
   disponível, e não custa um pixel de layout. */
.home-hero-fundo .soma-slider-tab.is-ativo {
  background: none;
  color: var(--d-ink);
}
.home-hero-fundo .soma-slider-tab.is-ativo::after {
  background: var(--c-teal);
  box-shadow: 0 0 14px rgba(2, 212, 220, .8);
  height: 10px;
  margin-right: -2px;
  width: 10px;
}
.home-hero-fundo .soma-slider-tab:focus-visible {
  outline: 2px solid var(--c-teal-2);
  outline-offset: 4px;
}
/* A legenda da cena não aparece no hero. Ela mora DENTRO do slide, que é um
   contexto de empilhamento próprio — ficaria sempre sob o véu, lavada. E o
   hero já tem eyebrow, título, lead, duas ações e a navegação por nome: um
   sexto texto sobre a foto seria ruído. Quem nomeia a cena aqui é a navegação.
   Nos sliders em cartão (as pontas do atendimento) a legenda continua. */
.home-hero-fundo [data-soma-slide] figcaption { display: none; }

.home-hero h1 {
  font-size: var(--t-3xl);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 0.92;
  margin-top: var(--e-5);
}
.home-hero h1 .serif {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.home-hero .lead {
  margin-top: var(--e-6);
  max-width: 44ch;
}
.home-hero-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  margin-top: var(--e-7);
}

/* Em tela estreita a foto perde o lado direito para respirar, então o véu vira
   quase todo vertical: o texto precisa de contraste sobre a imagem inteira. */
/* ══ 2 · O MOSAICO — a largura da casa ═══════════════════════════════════════
   Grade de quadros que entram em onda: fotografia da frente e do bastidor,
   entremeada por blocos chapados da marca e pelo símbolo da SOMA.

   A referência do acervo é uma Lottie de 947 KB com dezessete imagens
   embutidas — imagens que não são nossas, e um player de ~250 KB para tocar.
   O mesmo movimento aqui é `grid` + `transform`: zero KB de JavaScript, a
   nossa fotografia e as nossas cores. */
.mosaico-lead {
  margin-top: var(--e-5);
  max-width: 62ch;
}
/* O palco guarda a medida da grade em duas variáveis, e é só isso que muda nos
   pontos de quebra. A grade, a onda e o selo leem as mesmas duas — assim o
   quadrado que atravessa por cima cai exatamente sobre a célula de baixo, em
   qualquer largura. `clip` corta quem sai de quadro sem criar rolagem. */
.mosaico-palco {
  --mos-cols: 6;
  --mos-gap: var(--e-3);
  margin-top: var(--e-8);
  overflow: clip;
  position: relative;
}
/* `dense` porque dois quadros ocupam duas células (um alto, um largo) e o fluxo
   normal deixaria buraco na linha seguinte. Mosaico com furo não é mosaico. */
.mosaico {
  display: grid;
  gap: var(--mos-gap);
  grid-auto-flow: dense;
  grid-template-columns: repeat(var(--mos-cols), 1fr);
}
.mos-q {
  aspect-ratio: 1;
  border-radius: var(--e-3);
  margin: 0;
  overflow: hidden;
  position: relative;
}
/* Quem ocupa duas células precisa da proporção de duas células, senão vira um
   quadrado gigante de dois por dois. O 2.06 conta a goteira que entra no meio. */
.mos-largo { aspect-ratio: 2.06 / 1; grid-column: span 2; }
.mos-alto  { aspect-ratio: 1 / 2.06; grid-row: span 2; }

/* A FOTO TAMBÉM VIAJA, e pela mesma mecânica das cores: soquete que fica, face
   que anda. O soquete é o `::before` — um retângulo de superfície escura na
   célula —, e a face é o `<picture>`, que é quem recebe o `transform`. Sem essa
   separação a foto ao sair deixaria um buraco preto na grade, e mosaico com
   furo não é mosaico.

   A INTRO NÃO TOCA EM NADA DAQUI. Nem `.mosaico`, nem `.mos-q`, nem `picture`,
   nem `img` recebem `transform`, `filter` ou `opacity` da coreografia: o recuo
   de cor do ato 1 vem de um véu que é IRMÃO da grade, não ancestral. É o que
   deixa a `transition` de hover abaixo funcionando durante e depois da peça —
   e é o que garante que a composição final seja, literalmente, esta. */
/* `overflow: hidden` — e é ele que faz a revelação virar CORTE.
   A tampa desliza opaca e some ao cruzar a borda do próprio quadro, em vez de
   se dissolver por cima da fotografia. Era `visible` porque a face da PAUSA
   (`.mos-cor > i`) precisa sair da célula para atravessar a vizinha — mas isso
   vale para `.mos-cor`, que tem regra própria, não para a fotografia: aqui o
   que se move por baixo é o `<picture>`, e ele só escala. */
.mos-foto {
  background: none;
  overflow: hidden;
}
.mos-foto::before {
  background: color-mix(in srgb, var(--d-surf) 80%, transparent);
  border-radius: inherit;
  content: '';
  inset: 0;
  position: absolute;
}
.mos-foto picture {
  border-radius: inherit;
  display: block;
  inset: 0;
  overflow: hidden;
  position: absolute;
}
.mos-foto img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;

  /* ── O FOCO — cada foto ancorada no PRÓPRIO rosto ─────────────────────────
     `cover` com o padrão `50% 50%` põe o meio do ARQUIVO no meio da CÉLULA, e
     isso só acerta quem está no meio do quadro. Nenhum destes está: a série
     inteira é composta com a pessoa deslocada, que é o desenho dela.

     A célula da farmácia é a mais estreita — 203 × 419, proporção 0,49. Dela
     sobram 456 dos 1672px do arquivo, centrados em 836: a janela vai de 608 a
     1064, e o rosto da farmacêutica está em 1095. Ficava de fora por 31px, e
     era esse o corte que aparecia na tela.

     `--foco` é a FRAÇÃO em que o rosto está no arquivo, medida na conversão
     pelo mesmo detector que escolheu o recorte 4:5 — não é número escolhido a
     olho. Com ele, o rosto cai no mesmo ponto relativo da célula em que está no
     arquivo, e isso o mantém dentro do quadro em QUALQUER proporção de célula,
     da quadrada à de 0,49. As células sem `--foco` continuam em 50%, que é o
     certo para as fotos de equipe, em que não há um rosto a privilegiar. */
  object-position: var(--foco, 50%) 50%;
  /* ── O MOSAICO É O PISO, NÃO O HOLOFOTE ────────────────────────────────
     Medido: esta seção era o objeto mais claro da página — média 43,6 contra
     30,5 do herói. Quem passa o olho pousava aqui, não no herói nem nas
     chamadas. Um contato de doze fotografias não pode ser mais alto do que a
     cena de abertura.

     No repouso as fotos passam a ser matéria de arquivo: baixas, frias,
     quase apagadas. É a folha de contato antes da ampliação — a informação
     está lá, mas ainda não foi escolhida. O que devolve a cor é o gesto de
     quem chega perto. */
  /* ── A LUZ VOLTOU, E O MOTIVO É UM ERRO MEU ────────────────────────────
     A versão anterior levava a foto a `brightness(.39)` para cumprir uma meta
     numérica: luminância média da seção ≤ 18. A meta passou — e o mosaico
     virou uma folha subexposta, com as pessoas mal visíveis.

     Otimizei a MEDIDA em vez da IMAGEM. A luminância baixa era um sintoma que
     eu tinha lido como causa: o problema original nunca foi a fotografia estar
     clara, era o quadrado de cor chapada estar MAIS claro que ela. Escurecer a
     foto resolveu a hierarquia pelo lado errado — nivelou por baixo.

     Agora a fotografia fica exposta para ser vista, com uma gradação leve que
     é temperamento e não apagão: dessatura um toque, segura o branco estourado
     e deixa o contraste respirar. Quem chega perto ainda ganha a cor inteira. */
  filter: saturate(.88) brightness(.84) contrast(1.03);
  transition: filter var(--m-medio) var(--ease-out), transform var(--m-lento) var(--ease-out);
}
.mos-foto:hover img { filter: none; transform: scale(1.05); }

/* ── AS QUATRO PAUSAS ───────────────────────────────────────────────────────
   São doze fotografias para dezesseis células. As quatro que sobram eram
   quadrados chapados da paleta — teal e violeta a plena intensidade —, e
   medidas davam saturação 0,79: o ponto mais saturado da página inteira,
   acima da fotografia, dos títulos e das chamadas.

   Elas deixam de ser blocos e viram PAUSAS: piso, com um filete de 1 px
   marcando onde a célula está. A composição continua com dezesseis lugares;
   quatro deles são silêncio com fronteira, que é diferente de buraco.

   A COR NÃO SOME — MUDA DE LUGAR. Ela sai do repouso e vai para o movimento:
   durante a encenação estes quatro acendem, trocam de célula e voltam a
   apagar. Cor que está sempre ligada é papel de parede; cor que acende no
   gesto é acontecimento. É também o que mantém de pé os "quadrados coloridos
   em movimento" sem que eles dominem a folha parada.

   Cada um é soquete + face. O soquete (`::before`) fica na célula e não sai do
   lugar; a face (`> i`) é a que viaja. Sem essa separação, o quadrado que sai
   deixa um buraco preto na grade — e mosaico com furo não é mosaico. */
.mos-teal    { --grad: linear-gradient(150deg, var(--c-teal), var(--c-teal-d)); }
.mos-teal-2  { --grad: linear-gradient(150deg, var(--c-teal-d), var(--c-navy-2)); }
.mos-violeta { --grad: linear-gradient(150deg, var(--c-violet), #3a2a86); }
.mos-navy    { --grad: linear-gradient(150deg, var(--c-blue), var(--c-navy)); }

.mos-cor {
  background: none;
  overflow: visible;               /* a face precisa poder sair da própria célula */
  z-index: 2;                      /* e passar por cima das fotos vizinhas */
}
.mos-cor::before,
.mos-cor > i {
  background: var(--grad);
  border-radius: inherit;
  content: '';
  display: block;
  inset: 0;
  position: absolute;
}
.mos-cor::before { opacity: .2; }  /* o soquete: a sombra da cor, sempre no lugar */

/* O REPOUSO DAS PAUSAS. A face é o piso — mas não o piso EXATO.
   Medido: em piso puro elas davam L* 1,2, o mesmo valor do fundo em volta, e
   liam como buraco recortado na grade, não como célula vazia. A diferença entre
   pausa e falta é a fronteira: três por cento de branco no piso e um fio um
   pouco mais firme bastam para o olho entender que ali existe um lugar, e que
   ele está vazio de propósito.

   A cor não fica misturada nesta face: mora numa camada própria (`i::after`),
   apagada, para poder ACENDER na encenação sem que ninguém precise animar um
   `background` — o que não interpola. */
/* ── OS QUADRADOS DE COR VOLTAM AO REPOUSO ──────────────────────────────────
   Eu os havia apagado: piso com 3,5% de branco, cor guardada numa camada que
   só acendia durante a peça. A intenção era tirar da folha parada o objeto mais
   saturado da página. O efeito foi outro — as quatro células viraram buracos,
   e a composição perdeu o contratempo que fazia dela um mosaico.

   A cor é ESTRUTURA aqui, não enfeite: são doze fotografias e quatro pausas, e
   é o intervalo colorido que dá ritmo à grade. Sem ele sobra uma lista.

   O que muda em relação ao original: a cor entra um passo abaixo do gradiente
   cheio. Assim ela volta a marcar a grade sem reassumir o posto de coisa mais
   clara da tela — que era o problema de verdade. A fotografia, agora exposta
   como deve, ganha a disputa por presença; o quadrado ganha por ritmo. */
.mos-cor > i {
  background: var(--grad);
  overflow: hidden;
}
.mos-cor > i {
  box-shadow: inset 0 0 0 1px rgba(245, 249, 252, 0.14);
  filter: saturate(.82) brightness(.86);
}
/* a camada de acendimento continua existindo, e agora ela SOBE a cor durante a
   peça em vez de trazê-la do nada: o bloco que atravessa a célula vizinha
   acende, e volta ao tom de repouso quando assenta */
.mos-cor > i::after {
  background: var(--grad);
  border-radius: inherit;
  content: '';
  inset: 0;
  opacity: 0;
  position: absolute;
}
.mos-cor::before { opacity: .2; }   /* o soquete: a sombra da cor, sempre no lugar */

/* ── O FILETE ───────────────────────────────────────────────────────────────
   Uma linha de 1 px em cada célula — foto e pausa, sem exceção. É ela que
   transforma dezesseis retângulos soltos numa GRADE: sem fronteira, a foto
   escura encosta no piso escuro e a composição se desmancha; com fronteira,
   o mesmo escuro vira célula, e o vazio vira intervalo em vez de falta.

   `inset` e não `border`: a borda mudaria a caixa e a grade se remontaria
   inteira por causa de dois pixels.

   Vai em quem está POR CIMA em cada caso — no `<picture>` da foto (que é a
   face que viaja) e na face da pausa. No `<figure>` não adiantaria: a foto
   cobre a figura inteira e engoliria o fio. */
.mosaico { --mos-fio: rgba(245, 249, 252, 0.12); }
.mos-foto picture,
.mos-foto::before { box-shadow: inset 0 0 0 1px var(--mos-fio); }

/* ── O RÓTULO ───────────────────────────────────────────────────────────────
   Cada quadro diz que frente é. Não é legenda decorativa: é o que transforma
   "doze fotos de hospital" em "os doze lugares onde a SOMA está" — que é a
   frase que a seção sempre quis dizer e até agora só dizia no `aria-label`.

   Nomes reais, do léxico do projeto. Nenhum foi inventado para preencher: cada
   um é a frente que aquela fotografia mostra.

   Fica DENTRO da célula, no pé, sobre um degradê curtíssimo que sobe do piso —
   sem esse degradê o texto claro cai em cima de uma foto qualquer e some ou
   estoura, dependendo do quadro.

   Mora no `<figure>` porque `<figcaption>` só pode ser filho de `<figure>` —
   `<picture>` aceita apenas `source` e `img`. Isso o deixa preso à CÉLULA e não
   à face que viaja, o que acaba sendo o certo: a chapa (z-index 3) o esconde no
   ato 1, e ele aparece junto com a fotografia quando ela sai. O rótulo passa a
   ser parte do que é revelado, em vez de um letreiro que já estava lá. */
.mos-rot {
  bottom: 0;
  color: rgba(245, 249, 252, 0.55);
  font-family: var(--f-rotulo);
  font-size: var(--t-rot);
  /* 600 aos 8,5px. O peso cai opticamente com o corpo: o que segura a 10,5
     desaparece a 8,5, e este rótulo ainda mora sobre fotografia, onde o fundo
     não é constante. Era 400 quando a fonte era mono — a haste da Inter é mais
     fina, e sem subir dois degraus a legenda vira sujeira sobre a imagem. */
  font-weight: 600;
  left: 0;
  letter-spacing: 0.14em;
  line-height: 1;
  padding: 0 0 var(--e-2) var(--e-2);
  pointer-events: none;
  position: absolute;
  right: 0;
  text-transform: uppercase;
  z-index: 2;
}
.mos-rot::before {
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--d-piso, #02040A) 88%, transparent));
  content: '';
  height: 240%;
  inset: auto 0 0 0;
  position: absolute;
  z-index: -1;
}
/* quem chega perto lê melhor */
.mos-foto:hover .mos-rot { color: rgba(245, 249, 252, 0.92); }

/* AS PLACAS — sete quadrados da paleta, na mesma grade de baixo.
   `grid-auto-rows: auto` com filho de proporção 1 dá linha da altura exata de
   uma coluna: a célula da placa é a célula do mosaico.

   Elas não viajam mais célula a célula. São matéria parada que a cortina
   descobre e que o nó recolhe — e por isso não carregam um único número no
   `style` além da própria célula. */
.mos-onda {
  align-content: start;
  display: grid;
  gap: var(--mos-gap);
  grid-template-columns: repeat(var(--mos-cols), 1fr);
  inset: 0;
  pointer-events: none;
  position: absolute;
  transform-origin: 50% 50%;       /* o nó do ato 3 fecha no centro do palco */
  z-index: 3;
}
.mos-onda > i {
  aspect-ratio: 1;
  border-radius: var(--e-3);
  display: block;
  opacity: 0;
  width: 100%;
}
.onda-teal    { background: linear-gradient(150deg, var(--c-teal), var(--c-teal-d)); }
.onda-violeta { background: linear-gradient(150deg, var(--c-violet), #3a2a86); }
.onda-azul    { background: linear-gradient(150deg, var(--c-blue), var(--c-navy-2)); }
/* Coluna 5 só existe em seis colunas. Classe PRÓPRIA, e não `.mos-opcional`:
   aquela volta a `display: block` em 640px, e coluna 5 numa grade de três põe a
   placa numa linha implícita fora do quadro. */
.onda-larga { display: none; }
@media (min-width: 1101px) { .onda-larga { display: block; } }

/* ════════════════════════════════════════════════════════════════════════════
   A INTRO DA MARCA — "os lugares onde a SOMA está"

   A peça tem quatro atos e uma ideia só: os blocos de cor não passeiam ao lado
   das fotos, eles estão EM CIMA delas. Cada bloco que sai do lugar DESCOBRE um
   lugar onde a SOMA está. É isso que dá sentido ao movimento — sem a tampa, o
   bloco só se desloca; com ela, o deslocamento revela.

     ato 1 · 0,00–0,30  a grade fechada. Doze tampas coloridas, nenhuma foto.
     ato 2 · 0,30–3,25  a revelação. As tampas saem uma a uma, em diagonal pela
                        grade, e por baixo aparece cada frente do atendimento.
                        Os quatro blocos permanentes trocam de lugar junto.
     ato 3 · 3,25–4,80  o símbolo. As quatro pás entram em ordem horária, sobre
                        o mosaico recolhido.
     ato 4 · 4,80–5,60  o repouso. O símbolo sai, a fotografia volta inteira, e
                        o que fica é a composição estática.

   POR QUE ISSO NÃO É RUÍDO. Duas versões anteriores morreram de ter 26 relógios
   desencontrados. Aqui cada elemento tem hora, mas todas as horas servem à mesma
   frase: descobrir. E nenhuma tampa sai sem entregar uma foto.
   ════════════════════════════════════════════════════════════════════════════ */

/* A TAMPA. Vive no `::after` da própria foto — não na grade — e é isso que a faz
   funcionar em 6, 4 e 3 colunas sem uma linha de ajuste: ela é filha da célula,
   então está sempre exatamente sobre ela, seja qual for o reempacotamento. */
.mos-foto::after {
  background: var(--tampa, linear-gradient(150deg, var(--c-teal), var(--c-teal-d)));
  border-radius: inherit;
  content: '';
  inset: 0;
  position: absolute;
  z-index: 3;
}
/* ── AS TAMPAS SÃO A COR EM MOVIMENTO ───────────────────────────────────────
   Elas são o único lugar da seção onde a cor da marca aparece em quantidade —
   e é de propósito, porque é o único lugar onde ela DURA DOIS SEGUNDOS.

   Eu as tinha rebaixado a 16% do tom, virando chapas quase pretas. O ato 1
   ficava sendo dezesseis retângulos escuros sobre fundo escuro: não havia o
   que revelar, porque não havia o que cobrir. A revelação perdeu o antes.

   Voltam a 66% do tom da marca sobre o piso. Não 100%: a plena intensidade
   fazia uma parede de teal que sobrevivia à animação e virava a memória da
   seção. A 66% a grade fechada é inequivocamente colorida, a saída de cada
   tampa é um acontecimento — e o que fica depois é a fotografia. */
.mos-foto[data-tom="teal"]    { --tampa: linear-gradient(150deg, color-mix(in srgb, var(--c-teal)   66%, var(--d-piso, #02040A)), var(--d-piso, #02040A)); }
.mos-foto[data-tom="teal-d"]  { --tampa: linear-gradient(150deg, color-mix(in srgb, var(--c-teal-d) 70%, var(--d-piso, #02040A)), var(--d-piso, #02040A)); }
.mos-foto[data-tom="violeta"] { --tampa: linear-gradient(150deg, color-mix(in srgb, var(--c-violet) 60%, var(--d-piso, #02040A)), var(--d-piso, #02040A)); }
.mos-foto[data-tom="azul"]    { --tampa: linear-gradient(150deg, color-mix(in srgb, var(--c-blue)   70%, var(--d-piso, #02040A)), var(--d-piso, #02040A)); }

/* EM REPOUSO A TAMPA NÃO EXISTE. Fora da encenação a seção é a composição
   estática — quem chega sem JavaScript, ou com movimento desligado, vê as doze
   fotos, não doze quadrados de cor. A tampa só ganha corpo dentro de `.is-tocando`. */
.mos-foto::after { opacity: 0; }

/* A OPACIDADE MORA AQUI, NÃO NOS QUADROS DA ANIMAÇÃO.
   Ao tirar `opacity` dos keyframes — para a tampa parar de fundir por cima da
   foto — a regra de repouso acima passou a valer o tempo todo e a tampa sumiu
   por completo. `opacity` precisa ser 1 enquanto a peça toca, e como estado do
   `.is-tocando`, não como quadro interpolado.

   Depois que a animação termina ela fica em 1 e deslocada — e invisível assim
   mesmo, porque o `overflow: hidden` do quadro já a recortou fora da célula. */
.is-tocando .mos-foto::after {
  opacity: 1;
  animation: mos-tampa-sai var(--dur) var(--t0) cubic-bezier(.55, .06, .25, 1) both;
}
/* e a foto por baixo sobe no mesmo relógio da tampa que a descobre */
.is-tocando .mos-foto picture {
  animation: mos-foto-revela var(--dur) var(--t0) cubic-bezier(.22, .68, .3, 1) both;
}

/* A tampa fica no lugar, desliza UMA célula e some no caminho. O passo de uma
   célula é o único seguro: a grade se reempacota nos pontos de quebra, e um
   salto maior cairia sobre vizinhos diferentes a cada largura. */
/* ── A TAMPA SAI OPACA, E É RECORTADA ───────────────────────────────────────
   Antes ela FUNDIA enquanto ainda estava sobre a fotografia: `opacity` de 1 a 0
   ao mesmo tempo que o deslocamento. O quadro intermediário era a mistura das
   duas coisas — um quadrado meio transparente com a foto fantasma atrás e a
   borda dela aparecendo por dentro. Nem cor, nem fotografia: as duas ao mesmo
   tempo, e nenhuma legível.

   Agora a opacidade não muda. A tampa DESLIZA inteira, opaca, e o
   `overflow: hidden` do quadro a recorta na saída. A revelação passa a ser um
   corte — em qualquer instante a célula mostra ou cor cheia, ou fotografia,
   nunca a soma das duas.

   Sem `opacity` na animação, some também o custo de compor uma camada
   translúcida por quadro: só `transform`, que o compositor resolve sozinho. */
@keyframes mos-tampa-sai {
  0%       { transform: translate(0, 0); }
  18%      { transform: translate(0, 0); }
  100%     { transform: translate(calc(var(--dx) * (110% + var(--mos-gap))),
                                  calc(var(--dy) * (110% + var(--mos-gap)))); }
}
/* A foto não pisca: ela emerge. Começa um pouco maior e recuada, e assenta —
   o gesto de quem estava debaixo e veio à tona. */
@keyframes mos-foto-revela {
  0%       { opacity: 0; transform: scale(1.06); }
  22%      { opacity: 0; transform: scale(1.06); }
  100%     { opacity: 1; transform: none; }
}

/* ── REVELADA NA LUZ, ASSENTA NO PISO ───────────────────────────────────────
   No instante em que a chapa sai, a fotografia aparece ACESA — cor cheia, como
   quem acende a mesa de luz — e nos milésimos seguintes esfria até o tom baixo
   do repouso. É o mesmo movimento do laboratório: a imagem revela, e depois é
   arquivada.

   `backwards` e não `both`, de propósito. Com `both`, a animação ficaria dona
   do `filter` para sempre e mataria a transição do hover — o mosaico perderia
   a única interação que tem. Com `backwards`, o controle volta ao CSS assim
   que a peça acaba; e como o quadro de 100% é exatamente o valor de repouso, a
   devolução não tem salto. */
.is-tocando .mos-foto img {
  animation: mos-foto-esfria var(--dur) var(--t0) cubic-bezier(.3, .7, .3, 1) backwards;
}
@keyframes mos-foto-esfria {
  0%, 22%  { filter: saturate(1) brightness(1.04) contrast(1); }
  100%     { filter: saturate(.88) brightness(.84) contrast(1.03); }
}

/* ── A TRAVESSIA DAS PLACAS ─────────────────────────────────────────────────
   Elas pareciam paradas, e estavam quase. Medido: a ida acontecia em 38% de
   0,72s — 274ms para sair, 173 de espera, 274 para voltar. Ao lado de tampas
   que deslizam 236px em 640ms, um dardo de 274ms não lê como viagem: lê como
   tremor. O olho registrava "aquele quadrado não se mexe".

   O erro não era a distância, era o TEMPO. A placa percorria uma célula
   inteira — só que rápido demais para que se visse percorrer.

   Agora ela leva 1,4s para o mesmo caminho, e o caminho ganhou as três partes
   que todo movimento observável tem:

     ANTECIPAÇÃO  ela recolhe 3,5% antes de sair — o agachamento antes do salto.
                  Sem isso a partida é um corte, e corte não tem peso.
     TRAVESSIA    atravessa a vizinha ampliada em 2%, acesa, com um halo que a
                  acompanha. Está POR CIMA (z-index 2): a placa passa na frente
                  da fotografia, e é esse cruzamento que faz a grade parecer
                  viva em vez de recortada.
     CHEGADA      pousa e assenta. O último quadro é o repouso exato, então a
                  composição final continua sendo a de sempre.

   E o relógio virou contratempo: as quatro partem em 0,40 · 0,92 · 1,44 ·
   1,96s, no vão entre as tampas, não junto delas. Duas coisas se movendo no
   mesmo instante disputam; alternadas, uma passa a bolha para a outra. */
.is-tocando .mos-cor > i {
  animation: mos-desliza var(--dur) var(--t0) cubic-bezier(.42, .04, .22, 1) both,
             mos-cor-halo var(--dur) var(--t0) cubic-bezier(.42, .04, .22, 1) both;
}
@keyframes mos-desliza {
  0%   { transform: translate(0, 0) scale(1); }
  12%  { transform: translate(0, 0) scale(.965); }
  46%  { transform: translate(calc(var(--dx) * (100% + var(--mos-gap))),
                              calc(var(--dy) * (100% + var(--mos-gap)))) scale(1.02); }
  64%  { transform: translate(calc(var(--dx) * (100% + var(--mos-gap))),
                              calc(var(--dy) * (100% + var(--mos-gap)))) scale(1.02); }
  94%  { transform: translate(0, 0) scale(.994); }
  100% { transform: translate(0, 0) scale(1); }
}

/* O HALO QUE VIAJA JUNTO. A placa em trânsito não é a mesma placa parada: ela
   está acesa, e uma coisa acesa lança luz no que passa por baixo. Sem isto a
   travessia é um retângulo escorregando — com isto é um objeto atravessando um
   campo. `drop-shadow` e não `box-shadow` porque só filtro anima barato, e
   porque ele já é o dono do filtro desta camada (o repouso em 100% repete os
   valores exatos do CSS, então a devolução não tem salto). */
@keyframes mos-cor-halo {
  0%, 100% { filter: saturate(.82) brightness(.86); }
  46%, 64% { filter: saturate(1.06) brightness(1.12)
                     drop-shadow(0 0 28px color-mix(in srgb, var(--c-teal) 34%, transparent)); }
}

/* E ACENDEM ENQUANTO ANDAM. A cor entra com o movimento e sai com ele: a pausa
   sai do piso, atravessa a célula vizinha em cor cheia e volta a se apagar no
   lugar. Fora da peça, nenhum dos quatro está aceso.

   O relógio é o mesmo `--t0`/`--dur` do deslocamento — acender e andar são o
   mesmo gesto, não dois eventos que por acaso coincidem. */
.is-tocando .mos-cor > i::after {
  animation: mos-acende var(--dur) var(--t0) cubic-bezier(.62, .02, .28, 1) both;
}
@keyframes mos-acende {
  0%, 100% { opacity: 0; }
  20%, 80% { opacity: .92; }
}

/* AS PLACAS SOLTAS — os quadrados de cor que não cobrem foto nenhuma. Entram no
   ato 2 como acento e se recolhem quando o símbolo chega: no ato 3 a cor tem de
   estar no símbolo, não espalhada pela grade. */
.is-tocando .mos-onda > i {
  animation: mos-placa 2.40s .60s cubic-bezier(.34, .02, .16, 1) both;
}
@keyframes mos-placa {
  0%   { opacity: 0; transform: scale(.82); }
  22%  { opacity: .95; transform: scale(1); }
  70%  { opacity: .95; transform: scale(1); }
  100% { opacity: 0; transform: scale(.7); }
}

/* O SÍMBOLO — a camada e o desenho.
   Em repouso ele não existe (`opacity: 0`): a seção parada é a fotografia. */
.mos-selo {
  /* a medida do símbolo mora aqui porque o halo depende dela: os dois têm de
     crescer juntos, senão em tela larga o halo vira nuvem e em tela estreita
     some atrás do desenho */
  --sel: clamp(110px, 17vw, 210px);
  align-items: center;
  display: grid;
  inset: 0;
  justify-items: center;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  z-index: 5;
}
/* O HALO É DE LUZ, NÃO DE SOMBRA. Era uma poça navy quase opaca — o símbolo
   chegava sobre uma mancha escura, e a marca lia como recorte pousado num
   buraco. Trocado por branco gelo: agora ele CHEGA ILUMINANDO. O centro é firme
   o bastante para separar as pás do mosaico, e a queda para transparente é
   longa, senão vira um disco branco com borda.

   Duas paradas em vez de uma: a primeira segura o miolo, a segunda alonga o
   esmaecimento. Com um só stop o gradiente cai rápido demais e o halo ganha
   contorno visível. */
.mos-selo::before {
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--d-ink) 82%, transparent) 0%,
    color-mix(in srgb, var(--d-ink) 30%, transparent) 44%,
    color-mix(in srgb, var(--d-ink) 0%, transparent) 100%);
  content: '';
  grid-area: 1 / 1;
  /* 2,1× o símbolo, NÃO uma porcentagem do palco. Amarrado ao palco o halo
     media 663×1063 px para um símbolo de 128 — cinco vezes maior, uma nuvem
     branca lavando o mosaico inteiro. Aqui ele é sempre um pouco maior que o
     desenho, em qualquer largura. */
  height: calc(var(--sel) * 2.1);
  width: calc(var(--sel) * 2.1);
}
.mos-selo svg {
  grid-area: 1 / 1;
  height: auto;
  width: var(--sel);
}
/* Cada pá gira em torno do centro do DESENHO, não do próprio contorno — sem
   isso a montagem vira um florescer por arco em vez de um catavento. */
.mos-selo path {
  transform-box: view-box;
  transform-origin: center;
}

/* Quatro pás, um keyframe, 90ms de intervalo — na ordem horária do catavento:
   topo, direita, base, esquerda. Ele entra quando a última tampa acaba de sair,
   que é o instante em que a grade está inteira e ainda quente.

   A pá chega girando de -24° e crescendo: é montagem, não aparição. Sai
   crescendo mais um pouco, que é o gesto de quem cumpriu o papel e some — não
   um fade, que leria como desligar. */
/* A PÁ EMITE LUZ, não só reflete. Sem `drop-shadow` o símbolo pousa sobre o
   estouro e vira um recorte escuro no meio da luz — o contrário do que se quer.
   O brilho é forte na chegada e decai junto com a grade: a marca acende COM a
   casa, não depois dela.

   `drop-shadow` e não `box-shadow`: o contorno tem de seguir a forma da pá, e
   box-shadow seguiria a caixa retangular do path. */
@keyframes mos-braco {
  0%   { opacity: 0; transform: rotate(-24deg) scale(.44);
         filter: drop-shadow(0 0 0 transparent); }
  16%  { opacity: 1;
         filter: drop-shadow(0 0 18px color-mix(in srgb, var(--d-ink) 90%, transparent)); }
  40%  { opacity: 1; transform: rotate(0deg) scale(1);
         filter: drop-shadow(0 0 26px color-mix(in srgb, var(--d-ink) 76%, transparent)); }
  76%  { opacity: 1; transform: rotate(0deg) scale(1);
         filter: drop-shadow(0 0 10px color-mix(in srgb, var(--c-teal) 44%, transparent)); }
  100% { opacity: 0; transform: rotate(9deg) scale(1.34);
         filter: drop-shadow(0 0 0 transparent); }
}
/* O HALO É O CLARÃO CONCENTRADO. Ele nasce junto com o estouro de luz da grade
   e é o que dá ao símbolo um chão para pousar: sem ele o logo aparece flutuando
   sobre fotografias acesas e some no meio delas.

   Abre rápido, passa do tamanho e volta — o excesso de 1,18 é o que faz a luz
   parecer ter FORÇA. Sem esse ultrapassar, o halo cresce como um balão. */
@keyframes mos-halo {
  0%   { opacity: 0; transform: scale(.34); }
  16%  { opacity: 1; transform: scale(1.18); }
  30%  { opacity: 1; transform: scale(1); }
  66%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.62); }
}

.is-tocando .mos-selo { opacity: 1; }
.is-tocando .mos-selo path { animation: mos-braco 1.72s cubic-bezier(.16, .84, .28, 1) both; }
.is-tocando .mos-selo .mos-b1 { animation-delay: 3.30s; }
.is-tocando .mos-selo .mos-b2 { animation-delay: 3.39s; }
.is-tocando .mos-selo .mos-b3 { animation-delay: 3.48s; }
.is-tocando .mos-selo .mos-b4 { animation-delay: 3.57s; }
/* A ORDEM É A FRASE: primeiro a casa inteira acende, depois a luz se concentra,
   e só então a marca aparece em cima dela.

     3,05s  o clarão — as doze fotografias estouram de luz
     3,10s  o halo   — a luz se junta no centro
     3,30s  as pás   — o símbolo se monta sobre o halo

   Cinquenta milésimos entre o clarão e o halo, duzentos até a primeira pá. É
   pouco no relógio e muito na leitura: o olho registra três acontecimentos em
   sequência, não um piscar. */
.is-tocando .mos-selo::before {
  animation: mos-halo 2.10s 3.10s cubic-bezier(.16, .84, .28, 1) both;
}
/* ── O CLARÃO ───────────────────────────────────────────────────────────────
   Aqui o mosaico ESCURECIA. `saturate(.35) brightness(.62)` mais um recuo de
   escala: a grade apagava para o símbolo brilhar sozinho por contraste.

   Está invertido. Apagar a fotografia para destacar a marca é fazer a marca
   crescer às custas das pessoas — e esta seção existe para mostrar as pessoas.
   Além disso, escurecer doze fotografias já baixas deixava a tela quase morta
   por um segundo e meio.

   Agora TODAS AS IMAGENS ESTOURAM DE LUZ. A grade inteira acende, o símbolo
   aparece em cima do clarão, e tudo volta ao normal junto. A marca não chega
   apagando a casa: chega no auge dela.

   O pico é curto e a volta é longa — é assim que luz se comporta. Um clarão que
   sobe e desce no mesmo tempo lê como piscada de defeito; um que sobe rápido e
   decai devagar lê como flash. */
/* A CONTA DO CLARÃO — e por que a primeira versão não se via.
   As fotografias vivem em `brightness(.39)` no repouso. Um filtro no contêiner
   MULTIPLICA esse valor: `1.52 × 0.39 = 0.59`. Ou seja, o "clarão" levava a
   imagem a 59% do normal — mais escuro que uma foto comum. Eu estava iluminando
   para baixo e chamando de luz.

   Para a foto passar do normal e queimar, o multiplicador tem de desfazer o
   repouso E ultrapassar: `0.39 × 3.2 ≈ 1.25`. É esse 3,2 que faz a grade
   estourar de verdade.

   E o clarão NÃO acontece de uma vez. Ele nasce no centro — onde o símbolo vai
   pousar — e se propaga para as beiradas, célula por célula. Luz que acende
   junto é interruptor; luz que se espalha é acontecimento. A propagação sai de
   `--onda`, um número por célula, sem uma linha de JavaScript. */
.is-tocando .mos-q {
  animation: mos-clarao 1.25s calc(3.00s + var(--onda, 0) * 55ms)
             cubic-bezier(.16, .78, .28, 1) both;
}
@keyframes mos-clarao {
  0%   { filter: none; }
  26%  { filter: brightness(3.2) saturate(1.5) contrast(.94); }
  52%  { filter: brightness(2.4) saturate(1.32) contrast(.96); }
  100% { filter: none; }
}

/* A ONDA. O número cresce do meio da grade para fora — as células centrais
   acendem primeiro, as das pontas por último. Os valores são a distância em
   passos até o centro, contada na ordem do DOM: com `grid-auto-flow: dense` a
   ordem visual não é a do documento, mas a leitura de ONDA se mantém, porque o
   olho registra propagação, não a coordenada exata de cada quadro. */
.mosaico .mos-q:nth-child(1)  { --onda: 5; }
.mosaico .mos-q:nth-child(2)  { --onda: 4; }
.mosaico .mos-q:nth-child(3)  { --onda: 2; }
.mosaico .mos-q:nth-child(4)  { --onda: 1; }
.mosaico .mos-q:nth-child(5)  { --onda: 3; }
.mosaico .mos-q:nth-child(6)  { --onda: 5; }
.mosaico .mos-q:nth-child(7)  { --onda: 4; }
.mosaico .mos-q:nth-child(8)  { --onda: 0; }
.mosaico .mos-q:nth-child(9)  { --onda: 2; }
.mosaico .mos-q:nth-child(10) { --onda: 4; }
.mosaico .mos-q:nth-child(11) { --onda: 5; }
.mosaico .mos-q:nth-child(12) { --onda: 3; }
.mosaico .mos-q:nth-child(13) { --onda: 1; }
.mosaico .mos-q:nth-child(14) { --onda: 2; }
.mosaico .mos-q:nth-child(15) { --onda: 4; }
.mosaico .mos-q:nth-child(16) { --onda: 5; }

/* ── O ESTOURO ──────────────────────────────────────────────────────────────
   Brilho de filtro clareia o que já está no pixel. O que ele NÃO faz é
   acrescentar luz onde não havia — e é isso que separa "foto clara" de "foto
   estourando". Esta camada acrescenta: um disco de luz branca sobre o centro,
   em `screen`, que soma em vez de substituir.

   `screen` e não `overlay`: overlay respeita o tom de baixo e escurece o que já
   é escuro — exatamente o oposto do que se quer num estouro. */
.mosaico-palco::after {
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--d-ink) 92%, transparent) 0%,
    color-mix(in srgb, var(--c-teal) 40%, transparent) 46%,
    transparent 78%);
  content: '';
  height: 150%;
  left: 50%;
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 110%;
  z-index: 4;
}
.is-tocando .mosaico-palco::after,
.mosaico-palco.is-tocando::after {
  animation: mos-estouro 1.5s 3.02s cubic-bezier(.14, .8, .26, 1) both;
}
@keyframes mos-estouro {
  0%   { opacity: 0;   transform: translate(-50%, -50%) scale(.35); }
  18%  { opacity: .85; transform: translate(-50%, -50%) scale(1.05); }
  40%  { opacity: .45; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0;   transform: translate(-50%, -50%) scale(1.35); }
}

/* A entrada das fotos — o ato 1, e o único movimento dele. O módulo editorial já
   escalona em 70ms por item; aqui a grade é grande demais para um passo linear,
   então o atraso cresce em bloco de quatro: o olho lê como onda, não como fila.
   O `nth-child` só ajusta o que o JS já pôs em `transition-delay`. */
.mosaico .mos-q { transition-duration: var(--m-cena); }
.mosaico .mos-q:nth-child(4n+2) { transition-delay: 90ms  !important; }
.mosaico .mos-q:nth-child(4n+3) { transition-delay: 170ms !important; }
.mosaico .mos-q:nth-child(4n)   { transition-delay: 250ms !important; }

/* A conta das células manda no número de colunas. São 18 (16 quadros, e dois
   deles ocupam duas): fecham em 6 e em 3, mas em 4 sobram duas e nasce uma linha
   órfã. Por isso, e só em quatro colunas, dois quadros saem — 16 células, quatro
   linhas cheias. Aos três eles voltam, porque 18 ÷ 3 fecha de novo. */
@media (max-width: 1100px) {
  .mosaico-palco { --mos-cols: 4; }
  .mos-opcional { display: none; }
}
@media (max-width: 640px) {
  .mosaico-palco { --mos-cols: 3; --mos-gap: var(--e-2); }
  .mos-alto { aspect-ratio: 1 / 2.04; }
  .mos-opcional { display: block; }
  /* Em três colunas as placas ocupam 3 linhas de uma grade que tem 6; sem isto
     ficariam todas na metade de cima do palco. */
  .mos-onda { align-content: center; }
}

/* Sem movimento, a grade é a composição final — e o hover deixa de ser a única
   forma de ver a foto em cor, porque ninguém vai passar o mouse por dezesseis.
   Sem véu, sem cinza, sem símbolo: nada disso acontece, e a composição desenhada
   é a mesma que a peça entrega no fim. */
@media (prefers-reduced-motion: reduce) {
  .mos-foto img { filter: saturate(.75) brightness(.9); transition: none; }
  .mosaico .mos-q { transition: none !important; transition-delay: 0s !important; }
  .mos-onda, .mos-selo { display: none; }
  /* a tampa nunca aparece: a foto está descoberta desde o primeiro quadro */
  .mos-foto::after { display: none; }
}

@media (max-width: 860px) {
  .home-hero-sec { min-height: min(100svh, 760px); }
  .home-hero-veu {
    background:
      linear-gradient(180deg,
        color-mix(in srgb, var(--d-piso) 90%, transparent) 0%,
        color-mix(in srgb, var(--d-piso) 62%, transparent) 30%,
        color-mix(in srgb, var(--d-piso) 74%, transparent) 64%,
        color-mix(in srgb, var(--d-piso) 98%, transparent) 100%),
      var(--g-aurora);
  }
  .home-hero-fundo [data-soma-slide] figcaption { display: none; }

  /* Em tela estreita sete nomes na vertical comeriam a foto inteira, e o texto
     do hero passaria por baixo deles. Restam só os PONTOS, colados na borda —
     o nome vive no `aria-label`, e a cena continua escolhível pelo toque. */
  .home-hero-fundo .soma-slider-nav { gap: 0; right: 6px; }
  /* 44px de alvo mesmo sem moldura visível: o ponto é pequeno, o botão não é.
     Sete deles somam 308px, que cabe de sobra na altura do hero. */
  .home-hero-fundo .soma-slider-tab {
    font-size: 0;
    gap: 0;
    letter-spacing: 0;
    min-height: 44px;
    min-width: 44px;
    justify-content: center;
    padding: 0;
  }
  .home-hero-fundo .soma-slider-tab.is-ativo { font-size: 0; }
  .home-hero-fundo .soma-slider-nav::before { right: 50%; transform: translateX(50%); }

  .home-hero {
    align-content: center;
    padding-block: calc(var(--topbar-h) + var(--e-7)) var(--e-8);
    /* 6 da borda + 44 do alvo de toque + 8 de folga = a coluna de pontos nunca
       encosta na caixa de texto */
    padding-right: 58px;
  }
}

/* ══ 2 · A VIRADA — registro claro, largura total ═══════════════════════════
   A foto ocupa a tela e o texto fica AO LADO, não por cima. É o pico emocional
   do acervo e o eixo da campanha: quem cuida também precisa de cuidado. */
.virada {
  align-items: stretch;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  padding-block: 0;
}
/* A FOTO DISSOLVE NAS TRÊS BORDAS QUE ENCOSTAM NO CAMPO.
   Medido: o topo desta fotografia era o degrau mais duro da página depois do
   herói — a luminância do fundo saltava de 9,4 para 38,9 numa linha só, igual
   da esquerda à direita. É a assinatura de uma emenda, e é o que faz a seção
   ler como bloco colado em vez de continuar a página.

   Duas máscaras compostas por interseção: uma verticaI, que apaga topo e pé, e
   uma horizontal, que apaga só a direita — onde a foto encontra a coluna de
   texto. A esquerda fica intacta de propósito: ali ela encosta na borda da
   janela, e ali o corte é moldura, não emenda.

   `mask` e não degradê por cima: um véu pintado teria de acertar a cor do campo
   naquele ponto, e o campo tem poças. A máscara não pinta nada — ela deixa o
   campo aparecer, seja qual for o tom dele ali. */
/* ══ A FOTOGRAFIA COMO CENA — a regra, num lugar só ═════════════════════════
   Este tratamento nasceu aqui, na virada, e depois foi refeito à mão no herói,
   no `#a-soma` e no palco das soluções. Quatro cópias da mesma decisão é como
   uma regra de arte vira quatro dialetos: basta uma delas ficar para trás para
   a página voltar a ter uma emenda.

   Agora é uma regra com QUATRO BOTÕES. A máquina — sem moldura, sem sombra,
   duas rampas cruzadas por `intersect` — fica aqui; cada seção declara só ONDE
   dissolve, porque isso sim muda de lugar para lugar: dissolve a borda que
   encosta no campo, e não a que sai de quadro.

   `intersect` e não a soma: com duas máscaras somadas, o que uma apaga a outra
   devolve, e o resultado é quase tudo opaco. A interseção é o que permite dizer
   "some no topo E na direita" em vez de "some no topo OU na direita".

   0% e 100% desligam um lado: a rampa nasce e morre no mesmo ponto, e ali não
   há dissolução nenhuma. É como uma borda que sai de quadro pede — quem sai de
   quadro não se despede. */
/* ══ POR QUE A RAMPA LINEAR AINDA DEIXAVA VER A EMENDA ══════════════════════
   A dissolução existia e mesmo assim dava para apontar com o dedo onde a foto
   começava. O motivo não é a força da rampa — é a FORMA dela.

   `transparent 0%, #000 21%` é uma reta. Uma reta tem canto nas duas pontas: a
   opacidade sai do zero de repente e chega no um de repente. O olho não enxerga
   valor absoluto, enxerga DERIVADA — e um degrau de derivada vira uma listra
   clara de um lado e escura do outro, na altura exata do canto. É a banda de
   Mach, o mesmo efeito que faz um degradê de céu mostrar anéis. Medido nesta
   página: o corte que se via no pé da virada caía justamente no começo da rampa,
   não na borda da caixa.

   A saída é uma curva SEM canto. Os nove pontos abaixo desenham um smoothstep
   (3t²−2t³): derivada zero nas duas pontas, aceleração no meio. A opacidade sai
   do zero devagar demais para o olho pegar o início, e encosta no um devagar
   demais para o olho pegar o fim. Não há mais onde apontar.

   E a rampa ficou MAIS LONGA, porque comprimento é o outro fator: o que importa
   é quanta luminância a rampa tem de vencer por pixel. Medido: o topo desta
   fotografia marca 48,6 de luminância contra 9,4 do piso e 23,5 do campo — 25 a
   39 níveis para dissolver. Em 14% de uma foto de 300px são 42px de rampa, quase
   um nível por pixel. É gradiente que se vê. Em 24% de rampa a mesma diferença
   se dilui em mais que o dobro do caminho.

   A TERCEIRA MÁSCARA É UMA ELIPSE, e ela existe para tirar a última coisa que
   entrega uma emenda: a RETA. Duas rampas cruzadas só produzem curvas de nível
   horizontais e verticais, e reta perfeita não existe em fotografia — o olho
   acha reta em qualquer lugar. A elipse multiplica por cima e entorta essas
   curvas de nível: a foto passa a sumir mais cedo nos cantos que no meio, que é
   como a luz de fato cai numa sala.

   Uma variável guarda a lista e os dois `mask-image` a consomem: a curva é
   escrita UMA vez, e prefixado e sem prefixo não têm como divergir. */
/* A LISTA DE CONSUMIDORAS mudou com as seis bandas, e a mudança é a que este
   comentário sempre pediu: quem precisa da máquina ENTRA NA LISTA, não copia a
   curva. Saiu `.sol-pilha` — o palco das sete soluções não existe mais. Entrou
   `.cons-foto`, a cena da consultoria, que chegou com as duas listas de paradas
   copiadas dentro do próprio arquivo porque a banda não podia editar este.
   `.plantel-foto` e `.savyme-foto` continuam: as duas classes seguem no HTML,
   agora sobre `.pl-gestor` e sobre as quatro figuras da SAVYME, e é por ELA que
   aquelas peças bebem daqui. Cada uma aperta os quatro botões do seu jeito, na
   folha da sua banda.

   QUEM ENTROU FOI `.cons-foto-quadro`, E NÃO `.cons-foto`. Aquela figura ganhou
   uma legenda — os números do painel na parede pedem a mesma ressalva que o
   painel do Plantel e o cartão da consulta já trazem —, e legenda dentro de
   elemento mascarado sai dissolvida junto com a foto: `--cena-pe: 70%` a
   apagaria. A máscara desce um nível, para um quadro por dentro da figura; a
   figura fica com o layout e com a legenda. É a única das cinco em que a caixa
   da máquina não é a caixa da `<figure>`, e é por isso que este parágrafo
   existe. */
/* `.cons-foto-quadro` SAIU DA LISTA, e a razão é a mesma que a pôs nela: a
   máquina resolve as quatro bordas de um RETÂNGULO de fotografia. A cena da
   consultoria deixou de ser retângulo — o ativo virou recorte com alfa, e o que
   termina a peça é o contorno das pessoas e da mesa. Recorte não tem borda para
   dissolver: tem um corte só, o do pé, e ele se resolve com uma rampa em um eixo,
   escrita na folha daquela banda. Era o quinto consumidor da máquina; ficaram
   quatro. */
.virada-foto,
.plantel-foto,
.savyme-foto {
  --cena-topo: 24%;   /* onde a foto fica cheia, descendo do topo */
  --cena-pe:   76%;   /* onde começa a sumir, indo para o pé */
  --cena-esq:   0%;   /* 0% = não dissolve à esquerda (sai de quadro) */
  --cena-dir: 100%;   /* 100% = não dissolve à direita */
  --cena-mascara:
    linear-gradient(180deg,
      transparent 0%,
      rgba(0,0,0,.044) calc(var(--cena-topo) * .125),
      rgba(0,0,0,.156) calc(var(--cena-topo) * .25),
      rgba(0,0,0,.316) calc(var(--cena-topo) * .375),
      rgba(0,0,0,.5)   calc(var(--cena-topo) * .5),
      rgba(0,0,0,.684) calc(var(--cena-topo) * .625),
      rgba(0,0,0,.844) calc(var(--cena-topo) * .75),
      rgba(0,0,0,.956) calc(var(--cena-topo) * .875),
      #000 var(--cena-topo),
      #000 var(--cena-pe),
      rgba(0,0,0,.956) calc(var(--cena-pe) + (100% - var(--cena-pe)) * .125),
      rgba(0,0,0,.844) calc(var(--cena-pe) + (100% - var(--cena-pe)) * .25),
      rgba(0,0,0,.684) calc(var(--cena-pe) + (100% - var(--cena-pe)) * .375),
      rgba(0,0,0,.5)   calc(var(--cena-pe) + (100% - var(--cena-pe)) * .5),
      rgba(0,0,0,.316) calc(var(--cena-pe) + (100% - var(--cena-pe)) * .625),
      rgba(0,0,0,.156) calc(var(--cena-pe) + (100% - var(--cena-pe)) * .75),
      rgba(0,0,0,.044) calc(var(--cena-pe) + (100% - var(--cena-pe)) * .875),
      transparent 100%),
    linear-gradient(90deg,
      transparent 0%,
      rgba(0,0,0,.044) calc(var(--cena-esq) * .125),
      rgba(0,0,0,.156) calc(var(--cena-esq) * .25),
      rgba(0,0,0,.316) calc(var(--cena-esq) * .375),
      rgba(0,0,0,.5)   calc(var(--cena-esq) * .5),
      rgba(0,0,0,.684) calc(var(--cena-esq) * .625),
      rgba(0,0,0,.844) calc(var(--cena-esq) * .75),
      rgba(0,0,0,.956) calc(var(--cena-esq) * .875),
      #000 var(--cena-esq),
      #000 var(--cena-dir),
      rgba(0,0,0,.956) calc(var(--cena-dir) + (100% - var(--cena-dir)) * .125),
      rgba(0,0,0,.844) calc(var(--cena-dir) + (100% - var(--cena-dir)) * .25),
      rgba(0,0,0,.684) calc(var(--cena-dir) + (100% - var(--cena-dir)) * .375),
      rgba(0,0,0,.5)   calc(var(--cena-dir) + (100% - var(--cena-dir)) * .5),
      rgba(0,0,0,.316) calc(var(--cena-dir) + (100% - var(--cena-dir)) * .625),
      rgba(0,0,0,.156) calc(var(--cena-dir) + (100% - var(--cena-dir)) * .75),
      rgba(0,0,0,.044) calc(var(--cena-dir) + (100% - var(--cena-dir)) * .875),
      transparent 100%),
    radial-gradient(125% 96% at 50% 46%,
      #000 46%, rgba(0,0,0,.72) 78%, rgba(0,0,0,.42) 100%);
  border-radius: 0;
  box-shadow: none;
  -webkit-mask-image: var(--cena-mascara);
  mask-image: var(--cena-mascara);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  position: relative;
}
/* O GRÃO TAMBÉM PASSA POR CIMA DA FOTO.
   O `body::after` já joga uma trama de ruído sobre o campo, mas ele mora em
   `z-index: -1` — atrás do conteúdo. A fotografia entrava sem grão nenhum, e é
   por isso que a emenda sobrevivia mesmo com a rampa certa: de um lado do
   limite havia textura, do outro não, e diferença de TEXTURA se enxerga muito
   antes de diferença de tom. É também o que faz o degradê de 8 bits mostrar
   banda dentro da própria rampa, onde não há nada para disfarçar.

   Mesma trama, mesma frequência, mesma opacidade dos 3,5% do campo: uma película
   só cobrindo os dois. E como o pseudo-elemento é conteúdo da figura, a máscara
   da figura o dissolve junto — o grão da foto acaba exatamente onde a foto
   acaba, e dali para frente quem texturiza é o do campo. */
.virada-foto::after,
.plantel-foto::after,
.savyme-foto::after,
.quem-fala-fundo::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23r)' opacity='.5'/%3E%3C/svg%3E");
  content: '';
  inset: 0;
  mix-blend-mode: overlay;
  opacity: .035;
  pointer-events: none;
  position: absolute;
}

/* a virada: encosta na borda esquerda da janela, dissolve à direita contra o
   texto, e some no topo e no pé */
/* Esta é a maior das quatro e a que encosta em outra fotografia logo abaixo, no
   `#a-soma` — então é a que pode e deve dissolver mais longe. O pé sai de 79%
   para 64%: 36% de altura de rampa contra os 21% de antes, e é ele que resolve o
   corte que se via atravessando o braço de quem abraça. */
.virada-foto {
  --cena-topo: 32%;
  --cena-pe:   64%;
  --cena-dir:  64%;
  min-height: min(78vh, 780px);
}
.virada-texto {
  align-content: center;
  display: grid;
  padding: var(--e-secao) clamp(var(--e-6), 6vw, var(--e-10));
}
.virada-texto h2 {
  font-size: var(--t-2xl);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin-top: var(--e-5);
  max-width: 20ch;
}
.virada-texto .lead { margin-top: var(--e-6); }

/* ══ 3 · QUEM FALA — a equipe de ponta a ponta, sob máscara navy ════════════
   A foto era um cartão na coluna da direita. Agora ela é o CHÃO da seção:
   sangra de borda a borda, sem respiro lateral, e a máscara navy afunda a
   equipe atrás das palavras. O argumento da seção é "quem fala é gente da
   casa" — e a composição passa a dizer isso sozinha, com a equipe presente
   atrás do texto em vez de posada ao lado dele.

   Três camadas, do fundo para a frente, na mesma célula de grade:
     0 · .quem-fala-fundo  a fotografia, cobrindo a seção inteira
     1 · .quem-fala-veu    a máscara navy + a aurora da casa
     2 · .home-wrap        o texto                                             */
/* ══ A SEÇÃO NÃO TEM BORDA: ELA SANGRA ══════════════════════════════════════
   Duas coisas erradas ao mesmo tempo, e a primeira eu mesmo criei.

   1 · O VÉU NÃO TINHA MÁSCARA. Tirar o `grid-area` fez a fotografia cobrir a
   seção inteira — que era o objetivo — mas fez o mesmo com o véu, e ele pinta
   `--d-piso` a 94% da primeira à última linha, sem afrouxar. O resultado foram
   duas linhas retas atravessando a página no topo e no pé da seção: a "troca de
   seção" que se via. As duas camadas passam a compartilhar a MESMA dissolução.

   2 · A FOLGA ACIMA DAS CABEÇAS. Medido: as cabeças caem a 187px do topo da
   seção, e a máscara só entregava a foto opaca aos 220px. Elas nasciam
   exatamente na dobra — sem ar nenhum, que é o que fazia a seção parecer
   apertada mesmo com uma foto de plano aberto.

   A saída resolve as duas de uma vez: a fotografia SAI DA SEÇÃO. Sangra para
   baixo, dentro do vão que separa as seções — então não encosta no conteúdo
   vizinho — e a dissolução inteira acontece nesse sangramento. Quando a borda
   da seção chega, a foto já está cheia. Não existe mais aresta a esconder,
   porque não existe mais borda: o que havia de campo chapado ali agora é
   fotografia se apagando.

   `overflow: clip` com `overflow-clip-margin` e não `hidden`: é o único jeito de
   deixar passar uma quantidade CONTROLADA de transbordo. `hidden` cortaria no
   limite da caixa e ainda voltaria a fazer da seção um contêiner de rolagem —
   o mesmo defeito que travou as animações de `view()`.

   Os degraus são em PIXEL e não em porcentagem: a dissolução tem de medir os
   mesmos 190px em qualquer altura de seção, senão ela encurta junto com a caixa
   e a aresta volta em tela pequena. */
.quem-fala-sec {
  display: grid;
  isolation: isolate;
  overflow: clip;
  overflow-clip-margin: 190px;
  position: relative;
}
/* ── O SANGRAMENTO PARA CIMA MORREU. E ELE NUNCA COUBE ──────────────────────
   O vão de 259px do texto acima não existe: o que separa esta seção da anterior
   é UM `--e-secao` — clamp(64px, 9vw, 144px), 129,6 em tela larga. Sangrar 180
   para cima era pedir mais espaço do que a página tem, em qualquer largura, e o
   que estava logo ali em cima não era campo vazio: era a FOTOGRAFIA DA VIRADA.

   Medido em 1425px: a foto da virada acaba em 3037 e esta começava em 2986. As
   duas se cruzavam por 51px. Não havia respiro entre as duas imagens — havia
   sobreposição, e a página lia como uma fotografia só, emendada. Em 860 e em
   375, onde a virada empilha, a caixa subia para trás do último parágrafo dela.

   Agora o topo não sangra: a caixa começa na borda da seção e o respiro passa a
   ser o mesmo `--e-secao` que separa toda seção da home — a mesma medida que
   dá o ar acima da foto da virada. A regra vira uma frase: uma fotografia
   dissolve em campo, nunca em outra fotografia.

   O PÉ CONTINUA SANGRANDO, e continua certo: embaixo o vizinho é texto sobre
   campo, não imagem. É o único lado onde ainda há para onde ir.

   E o problema 2 lá de cima — a folga acima das cabeças — se resolve sozinho na
   curva nova. Sem o sangramento a rampa de topo mede 190px dentro da própria
   seção, e as cabeças caem aos 144. Numa reta elas nasceriam a 76% de opacidade,
   dentro da bruma. No smoothstep, 144 de 190 é t=0,76 e a opacidade já está em
   0,84 subindo com derivada quase nula — na prática, foto cheia. É a curva que
   compra a folga que a reta cobrava em comprimento. */
.quem-fala-fundo,
.quem-fala-veu,
.qf-camadas {
  inset: 0 0 -180px;
}

/* ══ A FOTO E O VÉU NÃO PODEM DISSOLVER JUNTOS ══════════════════════════════
   Eles compartilhavam UMA máscara, e era isso que desenhava o traço reto no
   alto da seção — o mesmo que sobreviveu ao respiro e à rampa suavizada.

   A foto, quando some, não pinta nada: ela deixa o campo aparecer, seja qual for
   o tom dele ali. O véu faz o contrário — ele PINTA `--d-piso`. Com a mesma
   máscara, no ponto em que a foto está a 30% o véu também está a 30%, e ali ele
   despeja 30% de piso sobre um campo que naquela altura não é piso: é
   `--d-campo` com a poça teal por cima, medido entre 23 e 35 de luminância
   contra os 9,4 do piso. O resultado é uma faixa mais ESCURA que o campo de
   cima e mais escura que a foto de baixo, com começo e fim definidos. A emenda
   não era a fotografia entrando: era o véu pintando onde a foto já tinha ido.

   O próprio arquivo já tinha escrito o risco, lá em cima na virada: "um véu
   pintado teria de acertar a cor do campo naquele ponto, e o campo tem poças".
   Ele não tem como acertar. Então a regra passa a ser outra: O VÉU NUNCA PODE
   IR MAIS LONGE QUE A FOTO. As rampas dele são mais COMPRIDAS que as dela —
   340 contra 190 no topo, 440 contra 300 no pé — e rampa mais comprida, na
   mesma curva, significa opacidade menor em cada ponto da borda. Onde a foto
   ainda tem 30%, o véu tem 6%. Ele acaba muito antes de chegar ao limite, e
   quem encosta no campo é só a fotografia, que não pinta.

   No miolo nada muda: as duas chegam a 100% e o véu segue fazendo o trabalho
   dele, que é escurecer a metade esquerda para a palavra caber em cima. */
/* As lâminas usam a medida DA FOTO, e não a do véu: elas são a cortina fechada
   sobre a fotografia, então têm de terminar exatamente onde ela termina. Com a
   mesma curva, a cortina em repouso não tem aresta — a placa de `--d-piso` some
   na borda junto com a imagem que esconde, e o que se vê antes da cena chegar é
   campo, não um retângulo. Depois ela sobe e a foto está lá. */
.quem-fala-fundo,
.qf-camadas {
  --qf-topo: 190px;
  --qf-pe:   300px;
}
.quem-fala-veu {
  --qf-topo: 340px;
  --qf-pe:   440px;
}
.quem-fala-fundo,
.quem-fala-veu,
.qf-camadas {
  --qf-dissolve: linear-gradient(180deg,
    transparent 0,
    rgba(0,0,0,.044) calc(var(--qf-topo) * .125),
    rgba(0,0,0,.156) calc(var(--qf-topo) * .25),
    rgba(0,0,0,.316) calc(var(--qf-topo) * .375),
    rgba(0,0,0,.5)   calc(var(--qf-topo) * .5),
    rgba(0,0,0,.684) calc(var(--qf-topo) * .625),
    rgba(0,0,0,.844) calc(var(--qf-topo) * .75),
    rgba(0,0,0,.956) calc(var(--qf-topo) * .875),
    #000 var(--qf-topo),
    #000 calc(100% - var(--qf-pe)),
    rgba(0,0,0,.956) calc(100% - var(--qf-pe) * .875),
    rgba(0,0,0,.844) calc(100% - var(--qf-pe) * .75),
    rgba(0,0,0,.684) calc(100% - var(--qf-pe) * .625),
    rgba(0,0,0,.5)   calc(100% - var(--qf-pe) * .5),
    rgba(0,0,0,.316) calc(100% - var(--qf-pe) * .375),
    rgba(0,0,0,.156) calc(100% - var(--qf-pe) * .25),
    rgba(0,0,0,.044) calc(100% - var(--qf-pe) * .125),
    transparent 100%);
  -webkit-mask-image: var(--qf-dissolve);
  mask-image: var(--qf-dissolve);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
/* e a foto ganha a elipse, como as outras quatro: sem ela as curvas de nível da
   dissolução são retas, e reta é o que o olho acha. A cortina acompanha, pelo
   mesmo motivo de antes. O véu fica fora — ele já tem o próprio degradê
   horizontal, e uma elipse por cima abriria clareira justamente na metade
   esquerda, que é onde o texto precisa dele inteiro. */
.quem-fala-fundo,
.qf-camadas {
  --qf-mascara: var(--qf-dissolve),
    radial-gradient(118% 104% at 50% 52%,
      #000 44%, rgba(0,0,0,.74) 80%, rgba(0,0,0,.46) 100%);
  -webkit-mask-image: var(--qf-mascara);
  mask-image: var(--qf-mascara);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
/* ── AS TRÊS CAMADAS COBREM A SEÇÃO INTEIRA ─────────────────────────────────
   Elas eram `position: absolute` COM `grid-area: 1 / 1`, e essa combinação faz
   uma coisa que não parece: para um item posicionado dentro de uma grade, o
   bloco que contém o `inset: 0` deixa de ser a seção e passa a ser a ÁREA DA
   GRADE. Medido: seção de 1425×849, figura de 1425×719 — 130px de altura em
   que a fotografia simplesmente não existia, porque a linha 1 da grade é mais
   baixa que a seção.

   Sem `grid-area`, o `inset: 0` volta a resolver contra a caixa de preenchimento
   da seção, que é o que se quer de uma camada de fundo: de ponta a ponta e de
   cima a baixo. O empilhamento entre foto, véu e lâminas não dependia da grade
   — as três são absolutas e se sobrepõem pelo `inset` e pelo `z-index`. */
.quem-fala-fundo {
  margin: 0;
  position: absolute;

}
.quem-fala-fundo img {
  display: block;
  /* a foto já é fria e o véu é pesado: sem uma mão de luz e contraste, a
     equipe some no navy e sobra uma mancha escura sem leitura */
  filter: brightness(1.18) contrast(1.06);
  height: 100%;
  object-fit: cover;
  /* O 72% ERA DA FOTO ANTIGA, e com a nova ele faz o contrário do que promete.

     Naquela o grupo morava colado na borda direita do arquivo, então empurrar a
     janela para 72% trazia a equipe para a metade que o texto não usa. Mas a
     caixa é mais estreita que a imagem — medido: 990px de caixa para 1508px de
     foto escalada, 518px sobrando —, e panorâmica para a DIREITA da fonte faz o
     que está centrado aparecer mais à ESQUERDA. Com um grupo já encostado na
     borda, o resultado era gente espremida contra o corte, sem ar em volta. É a
     seção "achatada".

     A foto nova é plano aberto com o grupo no meio e folga dos dois lados —
     então o corte pode ser centrado, e o que sobra de cada lado é ar de
     verdade. O 44% na vertical dá o pé do quadro sem decepar cabeça quando a
     seção fica mais alta que o previsto. */
  object-position: 50% 44%;
  width: 100%;
}

/* A MÁSCARA. Dois degradês cruzados mais a aurora, na mesma construção do
   hero — só que mais pesada, porque aqui a foto não pode competir com o texto:
   ela é presença, não assunto. O vertical assenta o topo e o pé nas seções
   vizinhas; o horizontal escurece o lado esquerdo, onde a palavra mora. */
/* O VÉU FICOU SÓ COM O TRABALHO HORIZONTAL. Ele tinha um degradê vertical
   pesado — 92% de navy no topo — que existia para assentar a borda de cima da
   foto. Essa borda não existe mais: quem dissolve agora é a máscara da imagem.
   Mantido, o degradê pintaria uma faixa escura no alto da seção sobre o campo
   contínuo, ou seja, a mesma emenda de volta por outro caminho.

   Sobra o que é dele: escurecer o lado esquerdo, onde a palavra mora, e soltar
   a direita, onde a equipe está. Mais a aurora, que costura tudo no tom da casa. */
.quem-fala-veu {
  background:
    linear-gradient(96deg,
      color-mix(in srgb, var(--d-piso) 94%, transparent) 0%,
      color-mix(in srgb, var(--d-piso) 88%, transparent) 34%,
      color-mix(in srgb, var(--d-piso) 44%, transparent) 62%,
      color-mix(in srgb, var(--d-piso) 10%, transparent) 100%),
    var(--g-aurora);
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.quem-fala {
  grid-area: 1 / 1;
  position: relative;
  z-index: 2;
}
/* O TEXTO CABE NA METADE ESQUERDA, e essa é a conta. Com 58ch ele ocupava 70%
   da largura da seção e atravessava o grupo inteiro — as linhas passavam por
   cima dos rostos. O `min()` prende os dois lados: nunca mais largo que 46
   caracteres, que é a medida de leitura, e nunca mais que a metade da seção,
   que é o que devolve a outra metade à fotografia. */
.quem-fala > div { max-width: min(46ch, 50%); }
.quem-fala h2 {
  font-size: var(--t-2xl);
  font-weight: 500;
  letter-spacing: -0.028em;
  line-height: 1.1;
  margin-top: var(--e-4);
}
.quem-fala p + p { margin-top: var(--e-5); }
.quem-fala .lead { margin-top: var(--e-6); }
/* O PRIMEIRO PARÁGRAFO DESCE. Ele nascia a 32px do título, o mesmo intervalo que
   separa um parágrafo do outro — e com espaçamento igual em todos os degraus, o
   bloco lê como uma coluna de texto só, sem hierarquia. Aqui isso custa mais que
   ritmo: a frase encostava na altura dos ombros do grupo, disputando a metade
   esquerda do quadro justamente onde a fotografia tem gente.

   96px é o mesmo `--e-9` que o resto da página usa para separar assuntos, e leva
   a leitura para a faixa baixa da cena, onde o chão molhado é escuro e uniforme.
   O título ganha o silêncio que um título de seção pede, e o texto ganha fundo.

   Só o PRIMEIRO: `h2 + .lead` tem (0,2,1) e ganha do `.quem-fala .lead` acima
   sem `!important`. O segundo parágrafo mantém os 32px — ele é continuação do
   primeiro, não um novo começo. */
.quem-fala h2 + .lead { margin-top: var(--e-9); }

/* ── OS PARÁGRAFOS DESCEM ATÉ A LINHA DO QUADRIL ─────────────────────────────
   A pedida é de composição: o texto tem de pousar na altura do quadril de quem
   está na frente do grupo. Medido com guias sobre a fotografia, o quadril cai
   em 54% da altura da CAIXA da foto — e é aí que mora o problema, porque essa
   caixa não é a da seção. Ela sangra 180px para baixo, então os 54% dela caem a
   65% da seção, bem abaixo de onde o texto termina.

   POR QUE NÃO É MARGEM. Aumentar `margin-top` empurra o parágrafo E estica a
   seção, que estica a foto, que desce o quadril junto: uma perseguição. A conta
   fecha, mas só aos 350px de margem — a seção passaria de 909 para 1259px e a
   fotografia, que já recorta 510px de largura, passaria a recortar 900. O grupo
   perderia as pontas. Preço alto demais para mover um parágrafo.

   ENTÃO O DESLOCAMENTO É VISUAL. `position: relative` move o que se vê sem
   mexer no fluxo: a seção não cresce, a foto não muda de escala, o quadril fica
   onde está. Vai nos DOIS parágrafos para o intervalo entre eles não abrir.

   A CONTA DO VALOR. O deslocamento necessário não é constante — o bloco de texto
   reflui e a foto muda de altura com a largura da janela. Medido: 140px a 1000,
   154 a 1280, 161 a 1425. É uma reta em `vw`, e é ela que está escrita aqui.
   Erro conferido depois: -1px a 1000, +13 a 1280, -2 a 1425 — dentro da
   tolerância de uma linha que o olho lê como banda, não como fio.

   O QUE ISSO CUSTA, dito na cara: o segundo parágrafo passa a usar a folga de
   pé da seção e, na pior largura, termina 17px além da borda dela. Não há
   colisão — ali embaixo continua a mesma fotografia sangrando e, depois dela,
   os 129px de campo limpo da seção seguinte. A folga de pé desta seção nunca foi
   visível: ela é coberta pela foto.

   Abaixo de 900 a regra não vale. Lá a virada empilha, o texto ocupa a largura
   toda por cima do grupo e a composição é outra — alinhar pelo quadril de uma
   figura que o corte já não mostra inteira não quer dizer nada. */
@media (min-width: 901px) {
  .quem-fala .lead {
    position: relative;
    top: calc(90px + 4.9vw);
  }
}

/* ══ 4 · AS PONTAS DO ATENDIMENTO — a voz dos rótulos ═══════════════════════
   O slider de dez contextos que morava aqui saiu: a seção passou a ser a maquete
   (`maquete.css`), e os retratos viraram os cards do painel. Do bloco antigo
   sobraram estas duas classes — e sobraram de propósito. São a VOZ da seção: o
   rótulo em mono teal e a dor em serifa itálica. Os cards da maquete as reusam,
   ajustando só o corpo. Quem mudar uma delas muda os treze cards. */
.pontas-rotulo {
  color: var(--c-teal-2);
  font-family: var(--f-rotulo);
  font-size: var(--t-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
}
.pontas-linha {
  font-family: var(--f-display);
  font-size: var(--t-xl);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* ── A ÓRBITA ────────────────────────────────────────────────────────────────
   Oito retratos pendurados em braços que giram em torno de um mesmo pivô, longe
   abaixo do quadro. Cada braço tem zero de largura e `--raio` de altura, com o
   pivô no seu pé (`transform-origin: 50% 100%`): girar o braço passeia o cartão
   pelo arco, e o cartão herda a inclinação — que é o que faz o conjunto ler como
   cartaz em órbita, e não como carrossel.
   Ângulos a 15° um do outro, simétricos: −52,5° … +52,5°. */
.orbita {
  --raio: clamp(340px, 40vw, 560px);
  /* A distância entre dois cartões no arco é raio × 15° em radianos ≈ 0,262 ×
     raio. O cartão tem de ser menor que isso, senão o anel vira uma fita
     contínua e some a leitura de "cartazes". 0,268 deixa a fresta. */
  --card: clamp(84px, 9.4vw, 132px);
  --passo: 15deg;
  /* 1 − cos(ângulo do extremo em movimento). Com oito cartões o extremo chega a
     60° e vale 0,5; com seis, chega a 45° e vale 0,3. É o que dá a altura da
     faixa sem sobra nem corte. */
  --queda: 0.5;
  margin-top: var(--e-7);
  padding-bottom: var(--e-4);
  position: relative;
}
.orbita-ceu {
  height: calc(var(--raio) * var(--queda) + var(--card) * 1.25);
  overflow: clip;                       /* quem sai de quadro sai limpo */
  position: relative;
}
.orbita-braco {
  height: var(--raio);
  left: 50%;
  position: absolute;
  top: 0;
  transform: rotate(var(--ang));
  transform-origin: 50% 100%;
  width: 0;
}
.orbita-card {
  aspect-ratio: 4 / 5;
  border: 1px solid color-mix(in srgb, var(--d-ink) 22%, transparent);
  border-radius: var(--e-3);
  box-shadow: var(--s-4);
  left: 50%;
  margin: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  width: var(--card);
}
.orbita-card img {
  display: block;
  filter: saturate(.72) brightness(.9);
  height: 100%;
  object-fit: cover;
  transition: filter var(--m-medio) var(--ease-out);
  width: 100%;
}
.orbita-card:hover img { filter: none; }

/* A frase mora no vão: o arco sobe no meio e cai nas pontas, então o centro
   embaixo é justamente o espaço que a curva abre. O véu radial garante que ela
   se leia mesmo quando um cartão passa por trás. */
.orbita-frase {
  font-size: var(--t-xl);
  line-height: 1.28;
  /* Sobe para dentro do vão: a frase mora no côncavo do arco, não abaixo dele.
     O vão tem exatamente `--queda × --raio` de fundura, então a subida é uma
     fração dele — e acompanha sozinha a mudança de arco nos pontos de quebra. */
  margin: calc(var(--raio) * var(--queda) * -0.68) auto 0;
  max-width: 26ch;
  padding: 0 var(--e-4);
  position: relative;
  text-align: center;
  text-wrap: balance;
  z-index: 2;
}
.orbita-frase::before {
  background: radial-gradient(closest-side, color-mix(in srgb, var(--d-piso) 92%, transparent), transparent);
  content: '';
  inset: -60% -20%;
  position: absolute;
  z-index: -1;
}
.orbita-frase .serif { display: block; }

/* O passo do anel: avança um encaixe de 15°, segura, e volta. Os tempos são os
   da referência — 318 quadros a 60fps, com as viradas em 6, 111, 198, 303 — e
   os 50ms de atraso por cartão são os 3 quadros que separam um do outro.

   A referência sai de 0 e vai a +15°. Aqui o mesmo curso de 15° é dado meio
   passo para cada lado do ângulo de repouso: o percurso é idêntico e a
   composição respira simétrica, em vez de pender sempre para o mesmo lado. */
@keyframes orbita-passo {
  0%,     1.9%  { transform: rotate(calc(var(--ang) - var(--passo) / 2)); }
  34.9%, 62.3%  { transform: rotate(calc(var(--ang) + var(--passo) / 2)); }
  95.3%, 100%   { transform: rotate(calc(var(--ang) - var(--passo) / 2)); }
}
/* A RESPIRAÇÃO SÓ VALE SEM JAVASCRIPT. Com o anel de 22 ligado, quem escreve
   `--ang` é o `orbita.js`, a cada clique — e uma animação em curso ganha de
   `transform` escrito na regra, mesmo pausada. As duas brigariam pela mesma
   propriedade e o anel nunca sairia do lugar. Então a respiração fica só para
   o arco estático de oito, que é o que existe sem JS. */
.orbita:not(.esta-ligada) .orbita-braco {
  animation: orbita-passo 5.3s calc(var(--i) * 50ms) ease-in-out infinite;
}
.orbita:not(.esta-ligada):hover .orbita-braco { animation-play-state: paused; }

/* ── O ANEL QUE DÁ A VOLTA ───────────────────────────────────────────────────
   Cada braço vai para o ângulo que o JS escreve, por transição. Como cada
   retrato tem lugar próprio no anel, o que se vê é o cartão ATRAVESSANDO o
   arco: entra por uma ponta, passa pela frente, sai pela outra. Não há troca
   de `src` no meio do caminho, e por isso não há mais aquela sensação de fotos
   se repetindo — nenhuma foto muda de lugar, o anel é que gira.

   `opacity` acompanha na mesma curva: as pontas entram e saem esmaecendo, e o
   que está fora do arco não pinta. */
.orbita.esta-ligada .orbita-braco {
  transform: rotate(var(--ang));
  transition: transform var(--m-lento) cubic-bezier(.22, .72, .21, 1),
              opacity var(--m-lento) var(--ease-out);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .orbita.esta-ligada .orbita-braco { transition: none; }
}

.orbita-nav {
  align-items: center;
  display: flex;
  gap: var(--e-5);
  justify-content: center;
  margin-top: var(--e-5);
  position: relative;
  z-index: 3;
}

/* ── AS DUAS SETAS ───────────────────────────────────────────────────────────
   Eram dois círculos de contorno com uma contagem no meio — "1–8 de 22". A
   contagem saiu: ela transformava um anel de rostos num paginador, e ninguém
   precisa saber que são vinte e dois. Ficam só as duas setas, uma de cada lado
   da frase.

   O desenho é o mesmo do resto da casa: vidro sobre o campo, fio de luz, e o
   teal entrando só no gesto. O anel de foco cresce de dentro para fora no
   hover — é o detalhe que faz o botão parecer usinado em vez de desenhado. */
.orbita-seta {
  align-items: center;
  background: color-mix(in srgb, var(--d-ink) 5%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid color-mix(in srgb, var(--d-ink) 16%, transparent);
  border-radius: 999px;
  color: var(--d-ink-2);
  cursor: pointer;
  display: flex;
  height: 52px;                        /* alvo de toque: 44 é o piso da casa */
  isolation: isolate;
  justify-content: center;
  overflow: hidden;
  position: relative;
  transition: border-color var(--m-rapido) var(--ease-out), color var(--m-rapido) var(--ease-out),
              transform var(--m-rapido) var(--ease-out);
  width: 52px;
}
/* o disco de luz que cresce do centro — o gesto, não a moldura */
.orbita-seta::before {
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--c-teal) 30%, transparent), transparent);
  border-radius: inherit;
  content: '';
  inset: 0;
  opacity: 0;
  position: absolute;
  transform: scale(.35);
  transition: transform var(--m-medio) var(--ease-out), opacity var(--m-medio) var(--ease-out);
  z-index: -1;
}
.orbita-seta svg { transition: transform var(--m-rapido) var(--ease-out); }
@media (hover: hover) {
  .orbita-seta:hover {
    border-color: color-mix(in srgb, var(--c-teal) 52%, transparent);
    color: var(--d-ink);
  }
  .orbita-seta:hover::before { opacity: 1; transform: scale(1); }
  /* a seta se inclina para onde leva */
  .orbita-seta[data-orbita-ir="1"]:hover svg  { transform: translateX(2.5px); }
  .orbita-seta[data-orbita-ir="-1"]:hover svg { transform: translateX(-2.5px); }
}
.orbita-seta:active { transform: scale(.93); }
.orbita-seta:focus-visible {
  outline: 2px solid var(--c-teal-2);
  outline-offset: 3px;
}

/* Abaixo de 900px o arco de 105° não cabe sem jogar os dois extremos para fora
   do quadro. Recolhe-se para seis cartões — 75° — e o extremo passa a 45°. */
@media (max-width: 900px) {
  .orbita { --raio: clamp(300px, 56vw, 420px); --queda: 0.3; }
  .orbita-braco[style*="52.5deg"] { display: none; }   /* pega os dois extremos */
}
@media (max-width: 640px) {
  .orbita { --raio: clamp(240px, 68vw, 330px); --card: 88px; }
  .orbita-frase { font-size: var(--t-lg); max-width: 22ch; }
}

@media (prefers-reduced-motion: reduce) {
  .orbita-braco { animation: none; }
  .orbita-card img { filter: saturate(.9); transition: none; }
}

/* ══ 5 · AS SETE SOLUÇÕES — a lista e o palco SAÍRAM ═══════════════════════
   Aqui moravam 42 regras: `.sol-cena`, `.sol-lista`, `.sol-item` e os oito
   filhos dele, `.sol-palco`, `.sol-pilha`, `.sol-quadro`, mais os dois blocos
   de estreito e de movimento reduzido. Todas serviam a UMA marcação — a lista
   de sete linhas com a fotografia `sticky` ao lado —, e essa marcação foi
   substituída pelo orbital (banda 06, no fim deste arquivo).

   Nada disso é reaproveitável ali: o orbital não tem lista com linha viva nem
   palco que troca de foto; tem sete satélites e sete painéis na mesma célula.
   CSS de marcação que não existe mais é lixo que o próximo leitor tenta
   entender antes de descobrir que não roda.

   `solucoes.js` saiu do pé do `index.html` pelo mesmo motivo: ele procurava
   `[data-solucoes]`. E `soma-premium.css` ainda traz `.sol-item` e
   `.sol-quadro` em três listas de seletor — não casam mais com nada, e a
   limpeza de lá é de quem manda naquele arquivo.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ══ 6 · PLANTEL MED ══════════════════════════════════════════════════════
   O bloco de duas colunas saiu inteiro — `.plantel-bloco`, `.plantel-bloco h2`,
   `.plantel-bloco .lead`, `.plantel-acoes` e o layout de `.plantel-foto`. Quem
   veste a seção agora é `banda-plantel.css`, no fim deste arquivo.

   DUAS COISAS FICAM, e por razões diferentes.

   `.plantel-ideias` continua porque `contato.html` a usa — este arquivo veste
   as duas páginas, e apagá-la aqui quebraria a outra sem nenhum aviso.

   `.plantel-foto` continua NA LISTA DA MÁQUINA DE CENA lá em cima, e só lá: a
   classe segue no HTML, sobre `.pl-gestor`, e é como aquele recorte consome
   `--cena-mascara`. O que era layout de retângulo — proporção 16/10, sangramento
   de goteira, `--cena-dir: 80%` — sai daqui, porque `.pl-gestor.plantel-foto`
   redeclara os três com duas classes, de propósito, para não depender da ordem
   dos arquivos.
   ═══════════════════════════════════════════════════════════════════════════ */

/* As três ideias do produto, em três colunas. Elas saíram da home — a banda B
   diz o mesmo em régua numerada —, mas `contato.html` continua com o bloco, e é
   por isso que estas três regras não são órfãs. */
.plantel-ideias {
  display: grid;
  gap: var(--e-5);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--e-8);
}
.plantel-ideias h3 {
  color: var(--c-teal-2);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: var(--e-2);
}
.plantel-ideias p {
  color: var(--d-ink-3);
  font-size: var(--t-xs);
  line-height: 1.6;
}

/* ── A GRADE DA ESCALA ──────────────────────────────────────────────────────
   A seção prometia "o que falta aparece" e mostrava uma foto de tela. Aqui a
   promessa vira demonstração: uma semana inteira, e UMA célula vaga.

   TUDO NA TABELA É SILÊNCIO, MENOS A VAGA. Os nomes ficam em cinza baixo, a
   moldura é um fio, o cabeçalho é mono pequeno. A única cor da peça está no
   buraco — e é por isso que o olho vai nele antes de ler a primeira palavra.
   Se qualquer outra célula tivesse cor, a demonstração se perderia.

   `<table>` de verdade, e não uma grade de `<div>`: isto É uma tabela de dados,
   com dias em coluna e modalidades em linha. Leitor de tela anuncia "Emergência,
   sáb, vago" porque os `<th scope>` estão no lugar. */
.pm-grade {
  margin: var(--e-8) 0 0;
  overflow-x: auto;
}
.pm-tabela {
  border-collapse: collapse;
  min-width: 560px;
  width: 100%;
}
.pm-legenda {
  caption-side: top;
  color: var(--d-ink-3);
  font-family: var(--f-rotulo);
  font-size: var(--t-mono);
  letter-spacing: .16em;
  padding-bottom: var(--e-4);
  text-align: left;
  text-transform: uppercase;
 font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.pm-tabela th,
.pm-tabela td {
  border: 1px solid var(--d-line);
  font-size: var(--t-xs);
  padding: var(--e-3) var(--e-3);
  text-align: left;
}
.pm-tabela thead th {
  color: var(--d-ink-3);
  font-family: var(--f-rotulo);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
 font-variant-numeric: tabular-nums;
}
.pm-tabela tbody th {
  color: var(--d-ink-2);
  font-size: var(--t-xs);
  font-weight: 600;
  white-space: nowrap;
}
.pm-tabela td {
  color: var(--d-ink-3);
  font-variant-numeric: tabular-nums;
}
.pm-vazio { visibility: hidden; }   /* segura a largura da coluna sem escrever nada */

/* A VAGA. Único ponto de cor da tabela, e o único que pulsa. A pulsação é lenta
   e de baixa amplitude de propósito: alarme pisca, isto respira. */
.pm-vaga {
  background: color-mix(in srgb, var(--c-teal) 12%, transparent);
  border-color: color-mix(in srgb, var(--c-teal) 46%, transparent) !important;
  position: relative;
}
.pm-vaga span {
  color: var(--c-teal-2);
  font-family: var(--f-rotulo);
  font-size: var(--t-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 500;
}
.pm-vaga::after {
  animation: pm-respira 3.4s var(--ease-out) infinite;
  border: 1px solid var(--c-teal);
  content: '';
  inset: -1px;
  pointer-events: none;
  position: absolute;
}
@keyframes pm-respira {
  0%, 100% { opacity: .25; }
  50%      { opacity: .85; }
}

.pm-grade-nota {
  color: var(--d-ink-3);
  font-size: var(--t-xs);
  line-height: 1.6;
  margin-top: var(--e-4);
  max-width: 54ch;
}
.pm-grade-nota b { color: var(--c-teal-2); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .pm-vaga::after { animation: none; opacity: .7; }
}

/* ══ 7 · SAVYME ═══════════════════════════════════════════════════════════
   Saíram `.savyme-bloco`, `.savyme-bloco h2`, `.savyme-bloco .lead`,
   `.savyme-selo`, os três tempos inteiros (`.sv-tempos`, `.sv-tempo`,
   `.sv-tempo::before`, `.sv-quando`, `.sv-tempo h3`, `.sv-tempo ul`) e a voz
   `.sv-voz`. As bandas C, D e E vestem os três, no fim deste arquivo — e a
   `.sv-voz`, que era uma frase solta no pé do bloco, virou a banda 10 inteira.

   `.savyme-foto` FICA, e não por sobra: a classe segue no HTML das quatro
   figuras da SAVYME. Da regra dela sobrou o que ainda é consumido — a proporção
   16/11, de que `.sv-ciclo-foto` depende para a faixa de foto no pé dos três
   cartões medir o mesmo nos três. O sangramento de goteira e o `--cena-dir: 80%`
   saíram: `.sv-foto` e `.sv-ciclo-foto` redeclaram os dois, cada uma do seu
   jeito, na folha da banda.

   E `soma-premium.css` ainda traz `.sv-tempo` em quatro listas de seletor. Não
   casam mais com nada; a limpeza é de quem manda naquele arquivo.
   ═══════════════════════════════════════════════════════════════════════════ */
.savyme-foto { aspect-ratio: 16 / 11; }

/* ══ 8 · O FECHO ═══════════════════════════════════════════════════════════
   Aqui moravam duas seções que saíram da home.

   `#depois` listava "o que vem depois" — Estruturação Clínica e Jornadas.
   Roteiro não é assunto de site comercial: quem chega para contratar lê "ainda
   não tem" e sai com menos do que entrou. A informação continua no plano.

   `#contato` trazia o formulário inteiro, duplicado do `contato.html`. Dois
   formulários para o mesmo dado são duas fontes de verdade, e a home não
   precisa fechar negócio — precisa levar a ele.

   No lugar dos dois entra UM FECHO: o convite, e o botão. Landing que termina
   sem chamada é landing que simplesmente termina.

   A banda 11 substituiu a marcação deste fecho, e com ela saíram `.fecho-bloco`,
   `.fecho-bloco h2`, `.fecho-bloco .lead` e `.fecho-acoes`. O que continua
   trabalhando por causa do `id` está no fim do arquivo: `#fecho { padding-block }`
   e `#fecho .btn { font-size }`.

   O que sobrou aqui embaixo é o formulário. Ele não é da home: é de
   `contato.html`, que carrega este mesmo arquivo. Ele fica.
   ═══════════════════════════════════════════════════════════════════════════ */
.contato-foto {
  aspect-ratio: 4 / 3;
  margin-top: var(--e-7);
}

/* ── o formulário: as duas ações lado a lado (decisão D-3) ───────────────── */
.form-soma {
  background: var(--l-surf);
  border: 1px solid var(--l-line);
  border-radius: var(--e-5);
  box-shadow: var(--s-2);
  display: grid;
  gap: var(--e-4);
  padding: clamp(var(--e-5), 3vw, var(--e-7));
}
.reg-escuro .form-soma {
  background: var(--d-surf);
  border-color: var(--d-line);
}
.form-soma-titulo {
  font-size: var(--t-lg);
  font-weight: 600;
  letter-spacing: -0.015em;
}
.form-linha {
  display: grid;
  gap: var(--e-4);
  grid-template-columns: 1fr 1fr;
}
.form-campo { display: grid; gap: 6px; }
.form-campo label {
  font-family: var(--f-rotulo);
  font-size: var(--t-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
}
.reg-escuro .form-campo label { color: var(--d-ink-3); }
.form-campo input,
.form-campo textarea {
  border: 1px solid var(--l-line);
  border-radius: var(--e-3);
  font-family: var(--f-sans);
  font-size: var(--t-sm);
  min-height: 48px;
  padding: 12px 14px;
  transition: border-color var(--m-rapido) var(--ease-out), box-shadow var(--m-rapido) var(--ease-out);
  width: 100%;
}
.reg-escuro .form-campo input,
.reg-escuro .form-campo textarea {
  background: var(--d-bg-2);
  border-color: var(--d-line);
  color: var(--d-ink);
}
.form-campo textarea { min-height: 116px; resize: vertical; }
.form-campo input:focus,
.form-campo textarea:focus {
  border-color: var(--c-teal);
  box-shadow: var(--s-teal);
  outline: none;
}
.form-campo input::placeholder,
.form-campo textarea::placeholder { color: var(--l-ink-3); }
.reg-escuro .form-campo input::placeholder,
.reg-escuro .form-campo textarea::placeholder { color: var(--d-ink-4); }

/* honeypot — invisível para gente, visível para robô */
.form-mel {
  height: 0;
  left: -9999px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  width: 0;
}

.form-chips-rotulo {
  font-family: var(--f-rotulo);
  font-size: var(--t-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
}
.reg-escuro .form-chips-rotulo { color: var(--d-ink-3); }
.form-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
}
.form-chip {
  border: 1px solid var(--l-line);
  border-radius: 999px;
  font-size: var(--t-xs);
  min-height: 40px;
  padding: 9px 16px;
  transition: border-color var(--m-rapido) var(--ease-out), background-color var(--m-rapido) var(--ease-out), color var(--m-rapido) var(--ease-out);
}
.reg-escuro .form-chip { background: var(--d-bg-2); border-color: var(--d-line); color: var(--d-ink-3); }
.form-chip:hover { border-color: var(--c-teal); }
.form-chip.is-ativo {
  background: var(--g-cta);
  border-color: transparent;
  box-shadow: var(--s-teal);
  color: var(--d-ink);
}

.form-acoes {
  display: grid;
  gap: var(--e-3);
  grid-template-columns: 1fr 1fr;
  margin-top: var(--e-2);
}
.form-acoes .btn { width: 100%; }

/* estado da entrega — nunca "enviado" falso */
.form-estado {
  border-radius: var(--e-3);
  display: none;
  font-size: var(--t-xs);
  line-height: 1.55;
  padding: var(--e-4);
}
.form-estado.is-visivel { display: block; }
.form-estado.e-erro {
  background: color-mix(in srgb, var(--c-red) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-red) 42%, transparent);
}
.form-estado.e-ok {
  background: color-mix(in srgb, var(--c-emerald) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-emerald) 42%, transparent);
}
.form-estado.e-espera {
  background: color-mix(in srgb, var(--c-teal) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-teal) 34%, transparent);
}
.form-estado a {
  color: var(--c-teal-d);
  font-weight: 600;
  text-decoration: underline;
}
.reg-escuro .form-estado a { color: var(--c-teal-2); }

/* ══ 10 · RODAPÉ — a tagline da empresa ════════════════════════════════════
   A tagline agora é da SOMA. "A IA organiza. O profissional decide." é da
   SAVYME e ficou lá. */
/* `.foot-brand p` da casa é (0,1,1) e vence uma classe só — daí o seletor duplo */
.foot-brand p.foot-tag {
  color: var(--c-teal-2);
  font-family: var(--f-display);
  font-size: var(--t-lg);
  font-style: italic;
  line-height: 1.35;
  margin-top: var(--e-4);
  max-width: 30ch;
}
/* O tamanho dos ícones sociais vivia em `index-v3.css`, que é a folha da
   landing VELHA — sem ela, cada ícone abre no tamanho natural do PNG. A home
   nova não carrega aquela folha, então o dimensionamento vem daqui. */
.foot-social { align-items: center; display: inline-flex; gap: var(--e-3); }
.foot-social a {
  align-items: center;
  display: inline-flex;
  height: 32px;
  justify-content: center;
  transition: transform var(--m-rapido) var(--ease-out);
  width: 32px;
}
.foot-social a:hover { transform: translateY(-2px) scale(1.08); }
.foot-social img { display: block; height: 100%; object-fit: contain; width: 100%; }

/* ══ 11 · RESPONSIVO ═══════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* ── A VÍRGULA PENDURADA, e por que a lista ficou curta ────────────────────
     Esta lista já teve quatro seletores e uma vírgula solta no fim do quarto,
     que emendava a lista inteira na regra de baixo: nenhum erro de sintaxe, e a
     declaração que colapsava as grades simplesmente não existia. Medido a 420px,
     `.plantel-bloco` continuava em duas colunas de 69,8 e 260,2px, com a
     fotografia em 91×57. Duas seções do fim da página quebradas em qualquer
     celular por causa de um caractere.

     Ficam registradas as duas coisas que aquilo ensinou, porque a lista voltou a
     encurtar agora — `.plantel-bloco` e `.savyme-bloco` saíram com as seções:
     lista de seletor termina no seletor, nunca na vírgula; e defeito de estreito
     não se vê sem medir o estreito. */
  .home-hero,
  .virada         { grid-template-columns: minmax(0, 1fr); }

  .home-hero      { min-height: 0; padding-block: calc(var(--topbar-h) + var(--e-7)) var(--e-8); }
  .virada-foto    { min-height: 0; aspect-ratio: 16 / 10; }
  .virada-texto   { padding-inline: var(--e-goteira); }
  .plantel-ideias { grid-template-columns: minmax(0, 1fr); gap: var(--e-4); }
  .contato-foto   { aspect-ratio: 16 / 9; }

  /* A ORDEM INVERTIDA E O SANGRAMENTO DOS DOIS LADOS ficavam aqui, para
     `.plantel-foto` e `.savyme-foto`. Saíram junto com as seções: no lugar
     delas, `.pl-gestor` é um recorte posicionado dentro do palco e as quatro
     figuras da SAVYME resolvem cada uma o seu estreito na folha da banda — a
     `.sv-ciclo-foto` inclusive PRECISAVA anular o `order: -1` daqui, porque
     dentro de um cartão ele fazia a fotografia subir para cima do título. */

  /* Em coluna estreita não há metade livre para dar à fotografia: o texto ocupa
     a largura toda e o grupo fica atrás dele, sem escapatória. Então a foto
     volta ao centro — empurrada para a direita, sobraria só o ombro de quem
     está na ponta — e o véu escurece por igual, na vertical, para o texto se
     ler por cima. A máscara continua dissolvendo o topo e o pé. */
  .quem-fala > div { max-width: none; }
  .quem-fala-fundo img { object-position: 50% 18%; }
  .quem-fala-veu { background:
      linear-gradient(180deg, color-mix(in srgb, var(--d-piso) 86%, transparent) 0%, color-mix(in srgb, var(--d-piso) 72%, transparent) 42%, color-mix(in srgb, var(--d-piso) 92%, transparent) 100%),
      var(--g-aurora); }
}
@media (max-width: 640px) {
  .form-linha    { grid-template-columns: minmax(0, 1fr); }
  .form-acoes    { grid-template-columns: minmax(0, 1fr); }
  .home-hero-acoes .btn { flex: 1 1 100%; justify-content: center; }
}

/* ══ 12 · SEM MOVIMENTO ════════════════════════════════════════════════════
   A composição final, inteira. Inclusive o ponto pulsante do eyebrow, que é o
   único movimento que a casa deixou solto em `styles.css`. */
@media (prefers-reduced-motion: reduce) {
  .eyebrow::before,
  .orbita-card img,
  html { scroll-behavior: auto; }
}

/* ══ O FIM DA PÁGINA — respiro e eixo ══════════════════════════════════════
   Sobrou uma regra de três. As outras duas — a voz da SAVYME alinhada à
   esquerda e o fio acima do `.fecho-bloco` — perderam a marcação: a voz virou
   a banda 10 e o fecho virou a banda 11, que abre com a esfera ao lado e não
   precisa de um filete anunciando que a leitura terminou.

   O que fica é o ar. E ele fica porque o problema que resolve é de escala, não
   de marcação. */

/* ── O AR DO DESFECHO, MEDIDO ───────────────────────────────────────────────
   Este bloco dizia "o fim precisa de MAIS ar". Fazia o contrário.

   Medido a 1440×900:

       miolo (7 seções)   129,6px em cima e embaixo
       #savyme            129,6 em cima ·  81 embaixo
       #fecho              99 em cima  ·  99 embaixo

   O fim tinha MENOS ar que o meio, e a razão é estrutural: o corpo mede o
   respiro numa escala FLUIDA (`--e-secao` = clamp(64px, 9vw, 144px)), e o
   desfecho media numa escala FIXA (`--e-8`/`--e-9`/`--e-10` = 64/96/128px).
   `--e-10` — o TETO do fecho — já nasce menor que os 129,6 do miolo. Em tela
   larga o fim jamais poderia ganhar do meio, por mais que o `clamp` subisse.
   Duas réguas diferentes medindo a mesma coisa não se comparam; uma delas
   tinha de sair.

   Agora o desfecho é uma FRAÇÃO do próprio ritmo da seção. Sendo derivado da
   mesma grandeza, respira 28% mais que o miolo em qualquer largura — não por
   coincidência de viewport, mas por construção.

   E o `#savyme` volta a ser simétrico. O ar extra pertence ao fecho, não à
   seção anterior: quem precisa de moldura é o convite, e uma seção com 129,6
   em cima e 81 embaixo não lê como respiro, lê como desalinho. */
#fecho  { padding-block: calc(var(--e-secao) * 1.28); }

/* ══ #a-soma · AS CAMADAS QUE SOBEM ═════════════════════════════════════════
   A seção tinha fotografia, véu e texto — e nenhum movimento além da entrada
   genérica. A imagem mais forte da página estava parada.

   Três lâminas de navy cobrem a fotografia e sobem em sequência quando a cena
   entra. A equipe emerge do escuro, que é a frase da seção virando imagem:
   "não chegamos de fora com um software: chegamos de dentro".

   POR QUE PELO EDITORIAL E NÃO POR `view()`. A camada dirigida por rolagem
   está no arquivo premium, mas as faixas dela ainda não varrem direito —
   medido: presas no fim do intervalo. Esta entrada é de disparo único e o
   `.is-fora` do editorial é o gatilho já provado nesta página. Usar o que
   funciona hoje vale mais que usar o que é mais novo.

   O `.is-fora` entra aqui só como SINALIZADOR: o visual padrão dele (esmaecer
   e subir) é anulado, e no lugar corre a coreografia das lâminas. */
/* ── AS LÂMINAS EM REPOUSO ESTAVAM PINTANDO FORA DA SEÇÃO ───────────────────
   Esta era a última emenda, e a mais teimosa: sobreviveu ao respiro, à rampa
   suavizada e à separação entre foto e véu. Ela não vinha de nenhum dos três.

   O repouso das lâminas é `translate3d(0, -101%, 0)` — inteirinhas acima da
   própria caixa. Sem recorte, `-101%` não some: continua PINTANDO, e o que elas
   pintam é `--d-piso` chapado, o tom mais fundo da paleta. A seção tem
   `overflow: clip` com 190px de margem, então sobrava exatamente isso: uma placa
   navy morta de 190px de altura, encostada por cima da seção, com aresta reta
   nas duas pontas. Era ela a linha que se via — não a fotografia entrando, mas
   uma cortina fechada esquecida em cena, acima do quadro.

   `overflow: clip` aqui prende as lâminas à caixa delas. Em repouso não pintam
   nada; na entrada sobem e desaparecem na borda de cima, que é o que uma cortina
   faz. A margem de recorte da seção continua sendo o que era: a folga do
   sangramento de baixo da fotografia. */
.qf-camadas {
  overflow: clip;
  pointer-events: none;
  position: absolute;
  z-index: 2;                 /* acima do véu, abaixo do texto */
}
.qf-camadas > i {
  background: var(--d-piso);
  display: block;
  inset: 0;
  position: absolute;
  transform: translate3d(0, -101%, 0);   /* fora de cena, no repouso */
}

/* o estado escondido do editorial é neutralizado: quem esconde aqui são as
   lâminas, não a opacidade do bloco */
.qf-camadas.is-fora { opacity: 1 !important; transform: none !important; }

/* COBERTO enquanto a cena não chegou */
.qf-camadas.is-fora > i { transform: translate3d(0, 0, 0); }

/* e SOBEM quando ela chega — em sequência, não juntas. Juntas seriam uma
   cortina só; em sequência são três, e é a defasagem que dá a sensação de
   profundidade: a de trás ainda está saindo quando a da frente já saiu. */
.qf-camadas > i {
  transition: transform var(--m-cena) cubic-bezier(.62, .04, .22, 1);
}
.qf-camadas > i:nth-child(1) { transition-delay: 0ms;   }
.qf-camadas > i:nth-child(2) { transition-delay: 110ms; background: color-mix(in srgb, var(--d-campo) 92%, var(--d-piso)); }
.qf-camadas > i:nth-child(3) { transition-delay: 220ms; background: color-mix(in srgb, var(--c-blue) 26%, var(--d-piso)); }

/* A FOTOGRAFIA ACOMPANHA. Ela entra um fio maior e assenta enquanto as lâminas
   saem — sem isso a imagem aparece pronta atrás de uma cortina que se abre, e o
   olho lê "cortina", não "emersão". */
.quem-fala-fundo img {
  transition: transform 1.6s cubic-bezier(.22, .68, .3, 1),
              filter     1.6s cubic-bezier(.22, .68, .3, 1);
  transition-delay: 120ms;
}
.qf-camadas.is-fora ~ .home-wrap ~ * ,
.quem-fala-sec:has(.qf-camadas.is-fora) .quem-fala-fundo img {
  transform: scale(1.07);
  filter: saturate(.5) brightness(.72);
}

@media (prefers-reduced-motion: reduce) {
  .qf-camadas > i { display: none; }
  .quem-fala-sec .quem-fala-fundo img { transition: none; transform: none; filter: none; }
}

/* ══ A RÉGUA ALCANÇA O QUE VEM DO GLOBAL ════════════════════════════════════
   Depois de tokenizar `page-home.css` e `maquete.css`, sobraram na tela seis
   tamanhos fora da escala — e todos vinham de `styles.css`:

       11px    .eyebrow          14px   .btn-ghost
       16,6px  .lead             15px   .btn-outline

   `styles.css` é Nível 1 e veste TAMBÉM a plataforma logada, onde a tela é
   ferramenta de trabalho e esses tamanhos estão calibrados para uso diário.
   Mudar lá para consertar a landing seria pagar o conserto com a régua de
   outra casa.

   Então a régua alcança por ESCOPO, não por edição do global: estas regras
   moram aqui, e `page-home.css` só é carregado pela landing e pelo contato. A
   plataforma continua exatamente como está. */
.home-sec .eyebrow,
.quem-fala-sec .eyebrow { font-size: var(--t-mono); }
.home-sec .lead,
.quem-fala-sec .lead    { font-size: var(--t-lg); }
.home-sec .btn,
.home-hero-sec .btn,
#fecho .btn             { font-size: var(--t-sm); }


/* ════════════════════════════════════════════════════════════════════════════
   A METADE DE BAIXO — a fundação e as seis bandas

   Daqui para baixo mora o que veste tudo o que vem depois do `#pontas`: as seis
   bandas que substituíram `#solucoes`, `#plantel`, `#savyme` e `#fecho`, mais a
   fundação de que as seis bebem.

   A ORDEM NÃO É ARBITRÁRIA e não pode ser mexida. Cada folha termina com o seu
   bloco de `prefers-reduced-motion`, que desliga o que aquela folha ligou e vence
   por ORDEM, com especificidade igual e sem um `!important` sequer. A fundação vem
   primeiro porque é ela quem liga o fio, o `.bd-entra` e as transições do vidro;
   regra de banda escrita ANTES do bloco final dela passaria a rodar com o
   movimento desligado. Regra de banda escrita DEPOIS do bloco final da própria
   banda, idem.

   Sete blocos, nesta sequência:

       A · a fundação    o fio de luz, .bd-marca, .bd-vidro, .bd-pilula, .bd-num,
                         .bd-entra — as primitivas que as seis compartilham
       B · banda 06      o orbital das sete frentes
       C · bandas 07 A/B o Plantel Med: o herói e a semana de escala
       D · bandas 08 C/D a SAVYME: a consulta e o ciclo
       E · banda 09      a consultoria de gestão e a técnica
       F · banda 10      menos ruído, mais presença
       G · banda 11      o fecho, e as três correções do rodapé

   Cada bloco chegou como um arquivo em `_qa/_bandas/`. O cabeçalho de cada um
   lista de que tokens ele depende e que regras ele cumpre; o que mudou na junção
   está anotado no lugar em que mudou.
   ════════════════════════════════════════════════════════════════════════════ */


/* ────────────────────────────────────────────────────────────────────────────
   A · A FUNDAÇÃO — o fio de luz e as primitivas
   ──────────────────────────────────────────────────────────────────────────── */


/* ════════════════════════════════════════════════════════════════════════════
   SOMA · _fundacao.css — o fio de luz e as primitivas das oito bandas

   Este arquivo não desenha nenhuma banda. Ele entrega as cinco peças que as
   oito consomem, para que a mesma decisão não seja tomada seis vezes e depois
   divirja em seis dialetos — que é exatamente o que aconteceu com a máscara de
   cena antes de virar `--cena-mascara`, na regra `.virada-foto, .plantel-foto,
   .savyme-foto, .cons-foto` do bloco 2 deste arquivo.

   DEPENDE DE
     styles.css          --c-teal · --c-teal-2 · --d-ink* · --d-line · --d-bg-3
                         --f-sans · --f-mono · --ease-out
     soma-editorial.css  --e-1..--e-10 · --s-3 · --s-4
     soma-premium.css    --m-rapido · --m-medio · --m-entra
     page-home.css       --d-piso · --d-campo · --t-mono · --t-xs · --t-sm
                         (declarados no `body`, portanto herdados aqui)

   REGRAS QUE ESTE ARQUIVO CUMPRE
     · Nenhuma cor literal, nem no CSS nem nas paradas do degradê do SVG — os
       `stop-color` são pintados daqui, por token.
     · Nenhum `!important`. O bloco de `prefers-reduced-motion` no fim vence por
       ORDEM e por especificidade igual. Isso só se sustenta se o arquivo entrar
       INTEIRO e nesta sequência: partir o arquivo em pedaços separados, ou
       inserir regra de banda depois do bloco final, quebra o desligamento.
     · Só `transform`, `opacity` e propriedades registradas por `@property` se
       movem. Nada de `width`, `height`, `top` ou `left`.
     · Nenhum `backdrop-filter`. Todo cartão de vidro desta página é filho de um
       `.bd-entra`, e desfoque de fundo em elemento que anda é o custo pago duas
       vezes por quadro.
   ════════════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════════════
   0 · O CONTRATO DE MARCAÇÃO — o que cada banda precisa escrever

   Uma vez na página, antes da primeira banda. É o único pedaço de markup que
   esta fundação possui, e ele existe porque `stroke: url(#id)` exige um paint
   server de SVG: não há degradê de traço em CSS puro.

     <svg class="soma-fio-defs" aria-hidden="true" focusable="false">
       <defs>
         <linearGradient id="somaFioLuz"
                         gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="1200" y2="0">
           <stop class="fio-p" offset="0"    stop-opacity="0"/>
           <stop class="fio-p" offset=".025" stop-opacity=".16"/>
           <stop class="fio-p" offset=".05"  stop-opacity=".55"/>
           <stop class="fio-p" offset=".08"  stop-opacity="1"/>
           <stop class="fio-c" offset=".5"   stop-opacity="1"/>
           <stop class="fio-p" offset=".92"  stop-opacity="1"/>
           <stop class="fio-p" offset=".95"  stop-opacity=".55"/>
           <stop class="fio-p" offset=".975" stop-opacity=".16"/>
           <stop class="fio-p" offset="1"    stop-opacity="0"/>
         </linearGradient>
       </defs>
     </svg>

   Uma vez por banda, como primeiro filho da banda (que precisa ser
   `position: relative`; o wrapper do conteúdo precisa de `z-index: 1`):

     <svg class="soma-fio" viewBox="0 0 1200 600"
          preserveAspectRatio="none" aria-hidden="true" focusable="false">
       <path class="fio-traco"
             d="M0 470 C 260 470, 380 520, 640 520 S 1020 430, 1200 300"/>
     </svg>
     <i class="soma-fio-no" style="--x:53%; --y:87%" aria-hidden="true"></i>

   AS TRÊS REGRAS DO TRAÇADO, e por que cada uma existe:

   1 · `viewBox="0 0 1200 600"` NAS OITO. Um sistema de coordenadas só é o que
       permite dizer "a banda B começa onde a banda A terminou" sem converter
       nada. Oito viewBox diferentes seriam oito conversões, e a primeira que
       alguém errasse deixaria um degrau na emenda.

   2 · O `d` COMEÇA EM x=0 E TERMINA EM x=1200. O degradê está preso ao sistema
       de coordenadas (`userSpaceOnUse`), não à caixa do traçado: as duas pontas
       transparentes caem exatamente nas bordas da banda. Um traçado que começa
       em −40, como o do protótipo, joga a ponta transparente para fora da tela
       e devolve a emenda que ela existia para apagar.

   3 · O y DE SAÍDA DE UMA BANDA É O y DE ENTRADA DA SEGUINTE. A banda A termina
       em y=300, a banda B nasce em y=300. As alturas em pixel diferem, então a
       INCLINAÇÃO tem um degrau na junta — e é justamente por isso que os 8% de
       cada ponta apagam: o degrau acontece onde já não há luz para mostrá-lo.

   Havia uma quarta — `pathLength="100"` no `<path>`, para normalizar oito
   traçados de comprimentos diferentes numa régua única. Ela SAIU, e a razão está
   escrita inteira na regra `.soma-fio` mais abaixo: `pathLength` normaliza em
   unidades de usuário e `vector-effect: non-scaling-stroke` mede o tracejado em
   pixel de tela, e os dois juntos deixavam o fio parar entre 82% e 89% do
   caminho — medido, banda a banda. Quem corre agora é a máscara do `<svg>`, que
   não depende de comprimento de caminho nenhum.

   O NÓ SAI DO SVG e é HTML. `preserveAspectRatio="none"` estica o sistema de
   coordenadas em x e y por fatores diferentes: um `<circle>` ali vira elipse, e
   a 430px de largura o fator em x é 0,36 — uma elipse deitada. Em HTML,
   posicionado em porcentagem, ele é redondo em qualquer largura.
   ════════════════════════════════════════════════════════════════════════════ */


/* ── As propriedades registradas ──────────────────────────────────────────────
   Custom property não registrada é string: o navegador não sabe interpolar de
   "101" para "0" e o quadro salta no meio. Declarada com sintaxe, ela vira
   número de verdade. É a lição do `css-view-timeline-shine-effect` e a mesma
   que `soma-premium.css:30` já aplica no ângulo do botão.

   O `initial-value` de `--fio-corrida` é 0, que é o fio INTEIRO DESENHADO — o
   estado final é o padrão, e quem chega sem `view()` ou com movimento desligado
   vê a cena pronta sem precisar de uma regra que a devolva.

   `inherits: true` de propósito, e é o que permite UM botão só. As duas formas
   do fio — a curva do desktop e a tira em pé do celular — leem o mesmo número na
   parada da própria máscara. Se cada uma animasse a sua cópia, bastaria uma ser
   afinada sozinha para as duas passarem a correr em velocidades diferentes — que
   é como a máscara de cena virou quatro dialetos antes de virar `--cena-mascara`.
   */
@property --fio-corrida {
  syntax: "<number>";
  initial-value: 0;
  inherits: true;
}
/* O índice do escalonamento. Registrado como inteiro para que o `calc()` do
   `animation-range` receba número e não texto, e para ter um padrão garantido
   sem repetir `var(--bd-i, 0)` em cada uso. */
@property --bd-i {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}


/* ════════════════════════════════════════════════════════════════════════════
   1 · O FIO DE LUZ

   Ele não decora: conduz. É o que faz oito seções empilhadas lerem como uma
   cena só, e é a razão de ser um elemento por banda em vez de um traçado único
   sobreposto à página — um traçado único precisaria saber a altura de todas as
   bandas, e passaria a quebrar toda vez que uma delas mudasse de conteúdo.
   ════════════════════════════════════════════════════════════════════════════ */

/* O bloco dos `<defs>` não desenha nada e não pode desaparecer: `display: none`
   impede o degradê de ser referenciado em parte dos motores. Fica com tamanho
   zero e fora do fluxo, que é o padrão seguro. */
.soma-fio-defs {
  height: 0;
  overflow: hidden;
  position: absolute;
  width: 0;
}
/* As paradas pintadas daqui, e não por atributo, porque atributo não aceita
   `var()`: é isto que mantém a promessa de zero cor literal também dentro do
   SVG, e faz o fio seguir o token se a cor da casa mudar um dia. */
.soma-fio-defs .fio-p { stop-color: var(--c-teal); }
.soma-fio-defs .fio-c { stop-color: var(--c-teal-2); }

.soma-fio {
  display: block;          /* sem isto o SVG é inline e ganha o vão da linha-base */
  inset: 0;
  overflow: visible;       /* o brilho ultrapassa o traçado; cortá-lo seria uma borda */
  pointer-events: none;
  position: absolute;
  user-select: none;
  width: 100%;
  height: 100%;
  z-index: 0;

  /* ── A CABEÇA DA LUZ, e por que ela deixou de ser `stroke-dashoffset` ──────
     O desenho original era um traço tracejado: `pathLength="100"` normalizava as
     oito curvas numa régua única e `stroke-dashoffset` corria de 101 a 0. É a
     técnica clássica, e ela NÃO FUNCIONA junto de `vector-effect:
     non-scaling-stroke` — que é obrigatório aqui, porque sem ele o traço fica
     elíptico no sistema esticado.

     Medido nesta página, banda a banda, a 1425: o traço parava entre 82% e 89%
     da largura da banda com `stroke-dashoffset: 0`, que deveria ser o fio
     INTEIRO. A conta explica: `pathLength` normaliza pelo comprimento em
     unidades de USUÁRIO, e o `non-scaling-stroke` manda o motor medir o tracejado
     em pixel de TELA. Os dois comprimentos diferem pelo fator de esticamento —
     medido de 0,73 (banda estreita e alta, a 890) a 1,72 (a 1920) — e o traço
     acaba antes do caminho por essa mesma razão. Na banda B ainda sobrava um
     toco aceso na borda direita com o deslocamento no máximo: o rabo do
     tracejado, que nunca chegou a caber.

     E não há constante que conserte: o fator muda com a largura da janela E com
     a altura de cada banda. Qualquer número escolhido acerta uma largura e erra
     as outras sete.

     Então a corrida sai do traço e vai para a MÁSCARA — que é, aliás, o que a
     tira do celular já fazia lá embaixo. Uma parada de degradê em X não depende
     de comprimento de caminho nenhum: em `--fio-corrida: 0` ela está em 100% e o
     fio está inteiro, em qualquer banda e em qualquer largura, por construção e
     não por medida. Um valor, dois desenhos, agora com a MESMA mecânica nos dois.

     A rampa de 2,5% existe para a cabeça ser uma cabeça de luz e não um corte: o
     que se cortaria com uma parada dura é o halo do `drop-shadow`, que é largo.
     Ela some no fim porque os últimos 8% do fio já são transparentes pelo próprio
     degradê do traço.

     UM EFEITO COLATERAL, conferido e aceito: `mask` recorta na caixa de borda, e
     o `overflow: visible` logo acima existia para o halo poder sair dela. Medido
     nas oito bandas: o traçado mais alto encosta em y=12 de 600, que são 23px do
     topo na banda mais curta — e o halo, medido em 9px de meia largura nas oito,
     não alcança a borda. Nas laterais não há o que cortar: em x=0 e x=1200 o
     degradê do traço já está em zero. */
  --fio-cabeca: calc(100% - var(--fio-corrida) * 1%);
  -webkit-mask-image: linear-gradient(90deg,
    #000 calc(var(--fio-cabeca) - 2.5%), transparent var(--fio-cabeca));
  mask-image: linear-gradient(90deg,
    #000 calc(var(--fio-cabeca) - 2.5%), transparent var(--fio-cabeca));
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  /* ── O BRILHO MORA AQUI, E NÃO NO TRAÇADO — a segunda metade da mesma lição
     do `non-scaling-stroke` ────────────────────────────────────────────────
     O brilho é em duas camadas e não em uma: uma sombra só desenha um halo de
     borda dura em volta da linha; duas, uma curta e forte e outra logo atrás,
     desenham QUEDA — que é o que a luz faz.

     E ELE SUBIU DO `<path>` PARA O `<svg>`. `filter` num filho de SVG é medido
     no sistema de coordenadas do usuário, que `preserveAspectRatio="none"`
     estica: o mesmo desfoque virava oito halos de espessuras diferentes, uma
     por banda, no fator altura ÷ 600. Medido a 1440×900, halo de 4px com o
     filtro no traçado — meia largura do halo, em px de tela:

         fio 0  22px · Plantel 20 · SAVYME herói 18 · ciclo 10
         consultoria 12 · «Menos ruído» 12 · fecho 13

     É a MESMA falha que o `vector-effect` conserta no traço, um nível acima: a
     luz também tem de ser medida em pixel de tela. No `<svg>`, que é elemento
     de CSS e não de usuário, 2,5px é 2,5px nas oito — 9px de halo em todas.

     A ESPESSURA É O CRITÉRIO, e é perceptual. A cauda gaussiana atravessa os
     níveis de 8 bits um a um, e cada troca de nível é um contorno limpo
     acompanhando o traçado inteiro. Não há como ficar «abaixo de 1 nível»: 1
     nível É o quantum. O que se pode medir e reduzir é quantos PIXELS cada
     nível ocupa — porque um patamar largo o olho integra e lê como linha, e um
     patamar de 2–3px cai dentro do próprio grão do fundo. Medido, mediana de
     px por nível no patamar externo, nas oito bandas:

         9px no traçado   4 a 24px   (é o anel que o dono via)
         4px no traçado   2 a 8px
         2,5px no svg     2 a 3px

     O alfa sobe junto de propósito: cauda mais curta com o mesmo alfa perderia
     brilho, e cauda mais FRACA seria pior — quanto menor a amplitude, mais
     plano o fim da gaussiana e mais largo o patamar. Tenso e forte, não largo e
     fraco. Pico do traçado e largura a meia altura ficam de pé: 2px de núcleo,
     pico entre 148 e 170 níveis, os mesmos de antes. */
  filter:
    drop-shadow(0 0 2px color-mix(in srgb, var(--c-teal) 78%, transparent))
    drop-shadow(0 0 2.5px color-mix(in srgb, var(--c-teal-d) 76%, transparent));
}

.soma-fio .fio-traco {
  fill: none;
  stroke: url(#somaFioLuz);
  stroke-linecap: round;
  stroke-width: 1.4;
  /* A CORREÇÃO QUE O PROTÓTIPO NÃO TEM. Com `preserveAspectRatio="none"` a
     escala em x e a escala em y são diferentes, e um traço de 1,4 sem esta
     linha vira elíptico: mede 1,68px nos trechos verticais e 1,44px nos
     horizontais numa janela de 1440, e 0,50px contra 1,4px a 430. Uma linha que
     muda de peso conforme a direção é uma linha desenhada errado.
     `non-scaling-stroke` mede o traço em pixel de tela, não no sistema
     esticado: 1,4 é 1,4 em qualquer largura e em qualquer inclinação. */
  vector-effect: non-scaling-stroke;
  /* NENHUM `filter` AQUI. Ele morava neste seletor e subiu para o `<svg>`: num
     filho de SVG o desfoque é medido no sistema esticado e virava um halo de
     espessura diferente em cada banda. A conta está na regra `.soma-fio`.
     Nenhum tracejado aqui, e o `pathLength` saiu dos oito `<path>` junto: quem
     revela o fio é a máscara do `<svg>` acima. A explicação inteira está lá. */
}

/* O NÓ — onde o fio encontra o argumento da banda.
   Um por banda, no máximo. Ele marca o ponto do traçado que coincide com a
   peça que a banda quer que se olhe; mais de um vira pisca-pisca. */
.soma-fio-no {
  background: var(--c-teal-2);
  border-radius: 50%;
  /* o halo é `box-shadow` e não `filter`: sombra composita, filtro repinta, e
     este elemento vive dentro de uma banda que rola */
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--c-teal) 16%, transparent),
    0 0 18px 2px color-mix(in srgb, var(--c-teal) 52%, transparent);
  height: 7px;
  width: 7px;
  inset-block-start: var(--y, 50%);
  inset-inline-start: var(--x, 50%);
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 0;
}

/* ── A TIRA EM PÉ — o fio na proporção do celular ────────────────────────────
   A curva está desenhada num quadro deitado de 2:1. A distorção que o
   `preserveAspectRatio="none"` aplica mede 2 × altura ÷ largura da banda: em
   1400 × 620 dá 0,89, ou seja, quase nada. Em 375 × 1100 dá 5,9.

   A 5,9 a curva não fica "mais inclinada": ela vira uma PAREDE. O trecho que no
   desktop corre 300px na horizontal passa a ocupar 50px de largura por 900px de
   altura, e como o degradê apaga por posição em X, esse trecho fica na mesma
   parada do degradê o caminho inteiro — luz de brilho constante, dura, colada
   na coluna de texto. Não é o fio inclinado; é outra coisa.

   Então ali ele TROCA DE FORMA em vez de ser espremido para dentro dela: deixa
   de atravessar e passa a descer pela goteira. É o mesmo gesto — uma linha
   contínua, com as duas pontas transparentes para encontrar a banda seguinte —
   na proporção que a tela tem. A troca acontece em 880px, o mesmo ponto em que
   o layout vira coluna única: antes disso a banda é um quadro deitado, depois
   dela é uma tira em pé.

   Uma linha de 1px de largura não tem como distorcer, o que resolve o problema
   por construção e não por ajuste. E ela roda no MESMO botão: `--fio-cabeca` é a
   mesma parada de máscara das duas formas — aqui virada 90°, descobrindo de cima
   para baixo em vez de da esquerda para a direita. Um valor, uma conta, dois
   desenhos: não há como uma das formas correr diferente da outra. */
@media (max-width: 880px) {
  .soma-fio .fio-traco,
  .soma-fio-no { display: none; }

  .soma-fio {
    background-image: linear-gradient(180deg,
      transparent 0%,
      color-mix(in srgb, var(--c-teal) 55%, transparent) 9%,
      var(--c-teal-2) 50%,
      color-mix(in srgb, var(--c-teal) 55%, transparent) 91%,
      transparent 100%);
    /* sem `--fio-x`: a variável nunca foi declarada em lugar nenhum do
       repositório, e botão sem quem o aperte é uma pergunta a mais para quem
       ler depois. Meia goteira é a posição, e é uma conta que se lê. */
    background-position: calc(var(--e-goteira) * .5) 0;
    background-repeat: no-repeat;
    background-size: 1px 100%;
    /* A MESMA CONTA DA FORMA DEITADA, agora aqui. Este filtro sobrepõe o da
       regra `.soma-fio` lá em cima — abaixo de 880px o traçado está fora de
       cena e quem brilha é a tira. Ele era `5px` a 52%, e tinha exatamente o
       defeito que a banda larga acabou de perder: cauda longa e fraca, patamar
       de 6px por nível (p90 6–7, máximo 12) e halo de 11px, medido a 430×932 em
       três bandas. A 2,5px/70% o patamar cai para 2px e o halo para 6px, com o
       pico do traço intacto — 172→173, 158→159, 146→147 níveis — e o núcleo
       igual. A rampa de 14px da máscara logo abaixo continua contendo o halo
       com folga, agora com mais folga ainda. */
    filter: drop-shadow(0 0 2.5px color-mix(in srgb, var(--c-teal-d) 70%, transparent));
    /* `mask` está na lista curta do que pode animar, junto com transform e
       opacity — e aqui ela custa o preço de uma tira de 1px. A parada é a mesma
       `--fio-cabeca` da forma deitada, só que no eixo do bloco: uma conta, dois
       desenhos.

       E A RAMPA VALE AQUI TAMBÉM. A defesa antiga era que «a tira já é um
       degradê que morre nas pontas» — morre nas pontas DA TIRA, 0% e 100%, e a
       cabeça durante a corrida está no meio, onde o degradê está em
       `--c-teal-2` cheio. `mask` é aplicada DEPOIS de `filter`: uma parada dura
       guilhotinava o halo de 5px do `drop-shadow` num traço reto de ~11px de
       largura — exatamente o corte que a rampa de 2,5% da forma deitada existe
       para não ter. Em px e não em %: a banda no celular passa de 1.100px de
       altura, e 2,5% ali seriam 28px de rampa. 14px contêm o halo com folga e
       continuam curtos o bastante para a cabeça ser uma cabeça. */
    -webkit-mask-image: linear-gradient(180deg,
      #000 calc(var(--fio-cabeca) - 14px), transparent var(--fio-cabeca));
    mask-image: linear-gradient(180deg,
      #000 calc(var(--fio-cabeca) - 14px), transparent var(--fio-cabeca));
  }
}

@supports (animation-timeline: view()) {
  /* A CORRIDA.
     O relógio não é o tempo, é a posição da banda na janela: rolar para frente
     adianta, rolar para trás rebobina. Não há disparo nem "acabou" — o quadro é
     sempre função de onde a banda está.

     O ALCANCE, e por que termina em `cover` e não em `entry`.
     `soma-premium.css:404` mediu isto na própria página: `entry` dura o tamanho
     do elemento sobre janela + elemento, e acontece inteiro na borda de baixo
     da tela, onde ninguém está lendo. Numa banda de 700px em janela de 900,
     `entry` termina com a banda ainda a meio caminho de aparecer.

     E POR QUE ELE NÃO COMEÇA MAIS EM `cover 0%`.
     `cover 0%` é o instante em que a borda de cima da banda ENCOSTA na borda de
     baixo da janela: a banda inteira ainda está fora da tela. A corrida
     acontecia, então, num trecho de rolagem em que não havia nada dela para
     ver — e quando a banda finalmente chegava ao olho, o fio já estava desenhado.
     Medido nesta página, a 1440: a banda do Plantel mede 1157px e a travessia
     mede 2057; entre `cover 0%` e o momento em que o topo dela cruza o topo da
     janela passam 900px de rolagem, 44% do alcance. Com o fim em 50%, a luz
     percorria 88% do caminho antes de a cena existir na tela. O efeito que a
     página vende — a linha que AVANÇA COM VOCÊ — nunca era visto; via-se o
     resultado dele.

     `cover 18% cover 60%` desloca a janela inteira para dentro do campo de
     visão: a 18% a borda de cima da banda já entrou ~370px pela tela, e a 60% ela
     está ~330px acima do topo — a corrida inteira acontece com a cena à vista, e
     termina com a banda assentada. O alcance ficou 16% mais longo de propósito:
     com a mesma velocidade angular num trecho que agora se olha, uma corrida
     curta lê como estalo.

     Os números valem para banda alta e para banda baixa porque `cover` é medido
     em fração da TRAVESSIA (altura da banda + altura da janela), e não em pixel:
     numa banda de 600px a 18% ainda caem com o topo dela a dois terços da tela.

     Os dois limites são variáveis porque a última banda da página pode nunca
     alcançar 60% de travessia se houver pouco documento abaixo dela — ali basta
     encurtar o fim. Se a variável vier inválida, a declaração inteira cai para
     `normal`, que é `cover 0% cover 100%`: mais lento, nunca quebrado.

     A animação mora no `<svg>` e não no traçado porque é o `<svg>` que existe
     nas duas formas — no celular o traçado está fora de cena e quem desenha é
     a máscara da tira. Um elemento animado por banda, dois consumidores. */
  .soma-fio {
    animation: soma-fio-corre linear both;
    animation-timeline: view();
    animation-range: var(--fio-de, cover 18%) var(--fio-ate, cover 60%);
  }
  @keyframes soma-fio-corre {
    from { --fio-corrida: 101; }
    to   { --fio-corrida: 0; }
  }

  /* O nó acende quando a corrida passa por ele. Os padrões supõem um nó por
     volta do meio do traçado; a banda que o puser mais cedo ou mais tarde move
     os dois números junto com o `--x`.

     ELES ANDARAM JUNTO COM A CORRIDA. O nó não tem relógio próprio: ele é uma
     marca SOBRE o fio, e as porcentagens dele só querem dizer alguma coisa
     medidas contra a mesma régua. Com a janela indo de 0→50% para 18→60%, todo
     ponto do traçado passou a acender em `18 + antigo × 0,84`. Os quatro pares
     desta página foram remapeados por essa conta, e não reescolhidos no olho —
     é o que garante que o nó continue acendendo no instante em que a cabeça de
     luz cruza por ele, e não antes nem depois. */
  .soma-fio-no {
    animation: soma-fio-acende linear both;
    animation-timeline: view();
    animation-range: cover var(--no-de, 40%) cover var(--no-ate, 50%);
  }
  @keyframes soma-fio-acende {
    from { opacity: 0; transform: translate(-50%, -50%) scale(.35); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  }
}


/* ════════════════════════════════════════════════════════════════════════════
   2 · .bd-marca — a marca d'água atrás do painel

   É atmosfera, não informação: `aria-hidden` na marcação, sem seleção e sem
   ponteiro aqui. Ela existe para dar ESCALA ao painel que fica na frente — um
   painel de produto sozinho sobre o campo não tem contra o que ser grande.
   ════════════════════════════════════════════════════════════════════════════ */

.bd-marca {
  /* CHAPADA, ELA É UM TIJOLO CINZA. Um bloco de 204px de caixa-alta a 2,8% de
     branco cobre uma área enorme com um valor único, e valor único em área
     grande o olho lê como retângulo, não como marca. Com o degradê ela nasce na
     borda em que está ancorada e morre antes de encostar no texto: some por
     COMPOSIÇÃO, e não por opacidade ainda menor, que só a deixaria suja. */
  background-image: linear-gradient(
    var(--bd-marca-eixo, 270deg),
    color-mix(in srgb, var(--d-ink) 13%, transparent) 0%,
    color-mix(in srgb, var(--d-ink) 6.5%, transparent) 42%,
    color-mix(in srgb, var(--d-ink) 1.6%, transparent) 68%,
    transparent 86%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;

  font-family: var(--f-sans);
  /* Caixa-alta em corpo de display: o espacejamento da Inter é desenhado para
     texto corrido e fica frouxo aqui. −0,035em fecha a palavra sem deixar as
     caixas-altas se tocarem. */
  font-size: clamp(58px, 13.5vw, 204px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: .8;
  text-transform: uppercase;
  white-space: nowrap;

  pointer-events: none;
  position: absolute;
  user-select: none;
  z-index: 0;
  /* Ela sangra para fora da banda de propósito — marca d'água cortada pela
     borda é marca d'água; centrada e inteira é título. Nada rola por causa
     disso: `styles.css` já mantém `overflow-x: clip` na raiz. */
}
.bd-marca--dir {
  --bd-marca-eixo: 270deg;   /* nasce na direita, morre indo para o texto */
  inset-block-start: var(--bd-marca-y, -4%);
  inset-inline-end: -2%;
}
.bd-marca--esq {
  --bd-marca-eixo: 90deg;    /* espelho exato do de cima */
  inset-block-start: var(--bd-marca-y, -2%);
  inset-inline-start: -3%;
}


/* ════════════════════════════════════════════════════════════════════════════
   3 · .bd-vidro — a superfície dos cartões

   Vidro se reconhece por três coisas nesta ordem: a ARESTA acesa, a borda, e só
   então o desfoque. O desfoque é o único dos três que custa caro e o único que
   não pode andar junto com a entrada — por isso ele é opt-in, e a superfície
   padrão se sustenta sem ele.
   ════════════════════════════════════════════════════════════════════════════ */

.bd-vidro {
  --bd-raio: clamp(14px, 1.5vw, 20px);

  background-image: linear-gradient(162deg,
    color-mix(in srgb, var(--d-bg-3) 72%, transparent) 0%,
    color-mix(in srgb, var(--d-piso) 54%, transparent) 100%);
  border: 1px solid var(--d-line);
  border-radius: var(--bd-raio);
  /* A sombra de fora é o token de elevação da casa; a de dentro é a aresta
     superior pegando luz, e ela vai no `inset` porque o `inset` acompanha o
     raio do canto — uma linha desenhada por cima não acompanharia. */
  box-shadow:
    var(--s-4),
    inset 0 1px 0 color-mix(in srgb, var(--d-ink) 8%, transparent);
  isolation: isolate;
  position: relative;
}

/* O FIO DE LUZ NO ALTO. Não é a mesma coisa que a aresta acima: a aresta é o
   volume do vidro, isto é a LUZ que a atravessa — teal, forte no meio, morta
   nas pontas.

   Ele é recuado dos dois lados pelo raio do canto. É a única forma de uma linha
   reta de 1px conviver com um canto arredondado sem cortá-lo: recuada, ela vive
   exatamente sobre o trecho plano da aresta e termina onde a curva começa. */
.bd-vidro::before {
  background-image: linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--c-teal-2) 42%, transparent) 24%,
    color-mix(in srgb, var(--c-teal-2) 64%, transparent) 50%,
    color-mix(in srgb, var(--c-teal-2) 42%, transparent) 76%,
    transparent 100%);
  content: '';
  height: 1px;
  inset-block-start: 0;
  inset-inline: var(--bd-raio);
  pointer-events: none;
  position: absolute;
  transition: opacity var(--m-medio) var(--ease-out);
  z-index: 1;
}

/* O FOSCO NÃO EXISTE, e a própria regra que o governava é o motivo.
   A fundação chegou com um `.bd-vidro--fosco` opt-in e a trava "NUNCA no mesmo
   elemento que `.bd-entra`" — `backdrop-filter` reamostra a árvore inteira que
   está atrás a cada quadro, e num elemento que também anda isso é o custo pago
   duas vezes por quadro. E TODO cartão de vidro desta página anda: os sete
   painéis do orbital e o quadro da grade por `data-soma-item`, o cartão da
   consulta e os três do ciclo por `.bd-entra`. São dois motores e não um — a
   frase antiga dizia `.bd-entra` para os quatro casos e errava em dois —, mas o
   custo é o mesmo nos dois, e a conclusão não muda: o modificador era, por
   construção, inutilizável, e regra sem um único consumidor é uma pergunta a
   mais para quem ler depois. Se um dia entrar um cartão que não anda, a
   declaração são duas linhas. */

/* O cartão responde ao ponteiro, mas NÃO SE MOVE quando é o próprio alvo de
   clique — alvo que se desloca é alvo que se erra. O que muda é a luz: a borda
   sobe de 14% para 40% do teal e o fio do alto acende. */
@media (hover: hover) {
  .bd-vidro {
    transition: border-color var(--m-medio) var(--ease-out);
  }
  a.bd-vidro:hover,
  button.bd-vidro:hover,
  .bd-vidro:focus-within {
    border-color: color-mix(in srgb, var(--c-teal) 40%, transparent);
  }
  a.bd-vidro:hover::before,
  button.bd-vidro:hover::before,
  .bd-vidro:focus-within::before {
    opacity: 1;
  }
  /* O `:has()` fica numa regra SÓ DELE, e não junto dos seletores acima. Lista
     de seletores é tudo ou nada: um navegador que não conheça `:has()` descarta
     a regra inteira, e o `:hover` do cartão-link e o `:focus-within` — que não
     dependem dele — cairiam junto. Isolado, o que falha é só o que ele cobre:
     o cartão que embrulha um link em vez de ser o link. */
  .bd-vidro:has(a:hover, button:hover) {
    border-color: color-mix(in srgb, var(--c-teal) 40%, transparent);
  }
  .bd-vidro:has(a:hover, button:hover)::before { opacity: 1; }
}

/* O foco com dois tons, na mesma lógica do `.maquete-peca:focus-visible`
   (`maquete.css:592`): o teal sozinho é diferença de croma e some em escala de
   cinza; o navy por dentro garante o contraste do anel onde quer que ele caia. */
.bd-vidro:focus-visible {
  outline: 2px solid var(--c-teal-2);
  outline-offset: 3px;
  box-shadow:
    var(--s-4),
    inset 0 1px 0 color-mix(in srgb, var(--d-ink) 8%, transparent),
    0 0 0 5px var(--c-navy);
}


/* ════════════════════════════════════════════════════════════════════════════
   4 · .bd-pilula — o rótulo em cápsula
   ════════════════════════════════════════════════════════════════════════════ */

.bd-pilula {
  align-items: center;
  border: 1px solid var(--d-line);
  border-radius: 999px;
  color: var(--d-ink-2);
  display: inline-flex;
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  font-weight: 500;
  gap: var(--e-2);
  letter-spacing: .14em;
  line-height: 1;
  min-height: 32px;
  /* A CORREÇÃO ÓPTICA. Caixa-alta com espacejamento deixa um vão fantasma
     DEPOIS da última letra — o tracking se aplica também ao final. Com padding
     igual dos dois lados a palavra parece encostada à esquerda. Descontar
     1 em do tracking à direita devolve o centro: a 10,5px, 0,14em são 1,5px. */
  padding-inline: var(--e-3) calc(var(--e-3) - .14em);
  text-transform: uppercase;
  white-space: nowrap;
}
/* Pílula que se clica tem alvo de toque, por construção e não por lembrança:
   o seletor de elemento vence o de classe e ninguém precisa acrescentar nada.

   HOJE NENHUMA É. As quinze `.bd-pilula` da página são `<span>`, `<li>` e um
   `<h3>`; quem o orbital promove a `role="tab"` é o `.orb-satelite`, não a
   pílula. Este bloco fica assim mesmo, e a diferença para o
   `.bd-vidro--fosco` que foi apagado logo acima é a razão: aquele era
   inutilizável por construção — a trava dele proibia o único contexto em que
   existiam cartões —, este é usável e só não está usado. É a rede para o dia
   em que uma pílula virar link, e a rede tem de estar armada ANTES da queda:
   uma cápsula de 32px que vira `<a>` sem passar por aqui é um alvo de toque
   reprovado que ninguém vai lembrar de conferir. */
a.bd-pilula,
button.bd-pilula,
.bd-pilula[role="tab"],
.bd-pilula[role="button"] {
  min-height: 44px;
  padding-block: 0;
  text-decoration: none;
}
a.bd-pilula:focus-visible,
button.bd-pilula:focus-visible {
  outline: 2px solid var(--c-teal-2);
  outline-offset: 3px;
}
@media (hover: hover) {
  a.bd-pilula,
  button.bd-pilula {
    transition: color var(--m-rapido) var(--ease-out),
                border-color var(--m-rapido) var(--ease-out);
  }
  a.bd-pilula:hover,
  button.bd-pilula:hover {
    border-color: color-mix(in srgb, var(--c-teal) 46%, transparent);
    color: var(--d-ink);
  }
}

/* O ponto. Aceso e PARADO: o que pulsa nesta página é o do `.eyebrow`, um por
   seção. Seis pílulas piscando juntas no fecho não são ênfase, são ruído. */
.bd-pilula--ponto::before {
  background: var(--c-teal);
  border-radius: 50%;
  box-shadow: 0 0 8px color-mix(in srgb, var(--c-teal) 72%, transparent);
  content: '';
  flex: none;
  height: 5px;
  width: 5px;
}
/* espelhada: usada na coluna da direita do fecho, onde o ponto olha para dentro */
.bd-pilula--espelho { flex-direction: row-reverse; }


/* ════════════════════════════════════════════════════════════════════════════
   5 · .bd-num — a régua numerada 01 · 02 · 03
   ════════════════════════════════════════════════════════════════════════════ */

/* O NÚMERO SAI DE UM CONTADOR, não do HTML. Reordenar as colunas — o que a
   grade fluida abaixo faz sozinha ao envelopar — nunca deixa a régua marcando
   01 · 03 · 02, e não existe um segundo lugar onde a numeração possa divergir
   do que está na tela.

   Se a régua for `<ol>` ou `<ul>`, o `list-style: none` remove a semântica de
   lista no Safari: a marcação precisa de `role="list"`. */
.bd-num {
  border: 0;
  counter-reset: bd-num;
  display: grid;
  /* `auto-fit` com `min()` no lugar de `repeat(3, 1fr)`: a régua tem três
     degraus na banda B e pode ter quatro na próxima, e uma faixa de 13rem
     decide sozinha quantas cabem sem uma media query por contagem. */
  gap: var(--e-6) clamp(var(--e-5), 2.6vw, var(--e-8));
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.bd-num > * {
  /* O FILETE É DE CADA DEGRAU, não um só no alto do conjunto. Quando a grade
     envelopa no celular, um filete único deixa os degraus de baixo sem régua —
     e a régua é justamente o que diz que aquilo é uma sequência.

     O tique: teal cheio nos primeiros 20px, depois 10px de rampa até o filete
     de 14%. É o traço da régua entrando no traço da régua, e a rampa existe
     para que o encontro não seja um degrau de alfa dentro de uma linha de 1px. */
  background-image: linear-gradient(90deg,
    var(--c-teal) 0 20px,
    var(--d-line) 30px);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  counter-increment: bd-num;
  display: grid;
  gap: var(--e-2);
  padding-block-start: var(--e-4);
}

/* EMPILHADO, e não ao lado do título. Ao lado, o número rouba a primeira linha
   e a coluna estreita do celular quebra o título em duas por causa dele. */
.bd-num > *::before {
  color: var(--c-teal-2);
  content: counter(bd-num, decimal-leading-zero);
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: .16em;
  line-height: 1;
}

/* Padrões de tipografia da régua, na especificidade mais baixa possível: são
   ponto de partida, e qualquer banda os substitui sem precisar competir. */
.bd-num :is(h3, h4) {
  color: var(--d-ink);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 0;
}
.bd-num p {
  color: var(--d-ink-3);
  font-size: var(--t-xs);
  line-height: 1.5;
  margin: 0;
  max-width: 34ch;
}


/* ════════════════════════════════════════════════════════════════════════════
   6 · .bd-entra — o assentamento em sequência

   O terceiro gesto da página, e ele precisava ser DIFERENTE dos dois que já
   existem, senão vira o mesmo movimento com outro nome:

     · subir       — `[data-soma-item]`, 26px em Y (soma-editorial.css:57)
     · endireitar  — `soma-endireita`, 1,6° de rotateX (soma-premium.css:471)
     · assentar    — aqui: vir DE TRÁS, só escala e opacidade, eixo Y nenhum

   A origem fica na base: o cartão cresce a partir de onde vai pousar, e a base
   não desliza. 0,965 → 1 são 3,5% — numa coluna de 400px, 14px de crescimento
   na borda. Suficiente para o olho ler profundidade, pequeno demais para ler
   zoom.
   ════════════════════════════════════════════════════════════════════════════ */

/* O índice, por posição e não por atributo no HTML: uma fileira tem três ou
   quatro cartões, e escrever `style="--bd-i:2"` em cada um é uma numeração a
   mais para sair de sincronia com a ordem real.

   SEIS DEGRAUS PORQUE O CICLO DO FECHO TEM SEIS ETAPAS — e a maior fileira POR
   POSIÇÃO tem quatro (`.sv-ciclo-grade` e `.bde-selos`). Os degraus 4 e 5 são
   alcançados por atribuição e não por `:nth-child`: as seis pílulas do fecho
   estão em duas listas de três porque flanqueiam a esfera, e a folha daquela
   banda continua a contagem da coluna da direita à mão. É o caso que a linha
   seguinte prevê — `--bd-i` escrito de fora, quando a posição no DOM não é a
   posição na leitura. */
.bd-entra > :nth-child(2) { --bd-i: 1; }
.bd-entra > :nth-child(3) { --bd-i: 2; }
.bd-entra > :nth-child(4) { --bd-i: 3; }
.bd-entra > :nth-child(5) { --bd-i: 4; }
.bd-entra > :nth-child(6) { --bd-i: 5; }

@supports (animation-timeline: view()) {
  /* O RELÓGIO É O DO CONTÊINER, e é isto que faz o escalonamento existir.
     Se cada cartão tivesse o seu próprio `view()`, três cartões lado a lado
     estariam sempre na mesma posição da janela e entrariam no mesmo instante —
     não haveria sequência nenhuma. Com um relógio só, nomeado no contêiner, a
     defasagem é uma fatia do alcance de cada um. */
  .bd-entra {
    view-timeline-name: --bd-cena;
    view-timeline-axis: block;
  }
  .bd-entra > * {
    animation: bd-assenta linear both;
    animation-timeline: --bd-cena;
    /* 4,5% de defasagem por cartão. Numa banda de 700px em janela de 900, a
       travessia mede 1600px: 4,5% são 72px de rolagem entre um cartão e o
       seguinte — uma sequência que se lê, e não quatro coisas ao mesmo tempo
       nem uma fila que faz esperar. */
    animation-range:
      cover calc(8% + var(--bd-i) * 4.5%)
      cover calc(44% + var(--bd-i) * 4.5%);
    transform-origin: 50% 100%;
  }
  @keyframes bd-assenta {
    from { opacity: 0; transform: scale(.965); }
    to   { opacity: 1; transform: none; }
  }
}


/* ════════════════════════════════════════════════════════════════════════════
   7 · O BOTÃO SOBRE O CAMPO — a cor do rótulo e o anel de foco

   Duas correções, e as duas valem para os cinco CTA primários das bandas novas
   de uma vez só. Moram aqui, na fundação, e não em cada banda, porque uma delas
   já foi escrita duas vezes em folhas diferentes — e das duas cópias, uma não
   pintava nada.

   ── 1 · O RÓTULO DEIXA DE SER BRANCO ────────────────────────────────────────
   `styles.css:251` dá ao `.btn-primary` `color: #FFFFFF` sobre `--g-cta`, que é
   um degradê de teal claro. Composto contra o pixel real sob a palavra: 1,83:1
   na ponta clara do degradê (#02D4DC), 2,7:1 no meio e 4,27:1 na ponta escura
   (#02888F). O critério da especificação é 4,5:1 medido contra o fundo real
   daquele ponto, e nenhum dos cinco botões passava — nem o do herói, que é o
   primeiro elemento clicável da página.

   `--c-navy` no lugar do branco dá 10,2:1 na ponta clara, 6,9:1 no meio e
   4,37:1 no pior pixel de todos, que é o canto inferior direito do degradê e
   fica longe do rótulo. Texto escuro sobre acento claro é, aliás, como um botão
   de acento se compõe: o branco sobre teal estava lavado, não discreto.

   ESCOPADA EM `.reg-escuro`, e não solta. Este arquivo veste a landing e o
   `contato.html`; `styles.css` veste as doze páginas comerciais e a plataforma
   logada, onde o mesmo botão pousa sobre outros fundos e a conta é outra. É a
   mesma decisão de escopo do `.foot-bot` no fim deste arquivo — e, como lá, as
   outras páginas precisam da mesma medida e isso está anotado no relatório.

   ── 2 · O ANEL DE FOCO EM DOIS TONS, UMA VEZ SÓ ─────────────────────────────
   O anel global da casa é um teal só (`styles.css:141`): sobre um botão que já
   é um degradê de teal ele é diferença de CROMA, e croma some em escala de
   cinza e em boa parte das daltonias. O navy por dentro separa os dois.

   E É `box-shadow`, NÃO `::after`. A folha do fecho tentava o aro com um
   pseudo-elemento em `inset: -2px`; `soma-premium.css:82` dá ao `.btn-primary`
   `overflow: hidden`, e a faixa de 2px mora inteira fora da caixa de recorte —
   medido no navegador, aquele aro nunca foi desenhado, e os dois botões
   vizinhos do fecho tinham anéis diferentes. Sombra do próprio elemento não é
   recortada por ele.

   A GEOMETRIA É A DA CASA: recuo 3px, navy com espalhamento 5 — o mesmo par do
   `.bd-vidro:focus-visible` e do `.orb-satelite:focus-visible`. O navy preenche
   de 0 a 3 e passa por baixo do anel de 3 a 5, e a página inteira passa a ter
   um desenho de foco só.

   A sombra de elevação continua na lista de propósito: trocar o `box-shadow`
   inteiro apagaria o brilho que o botão tem parado, e o foco passaria a
   REMOVER volume do alvo no exato momento em que ele está sendo olhado. */
/* ── E O PÉ DO GRADIENTE SOBE NOVE PONTOS ────────────────────────────────────
   O navy sobre a chapa resolveu a maior parte do problema — de 1,83:1 para
   10,18 no topo do degradê. Mas o degradê tem duas pontas, e a de baixo é a que
   manda: medido, `#02888F` com o navy dá **4,373:1**. Reprova por 0,127 num
   texto de 14px em peso 500, que não é texto grande e não tem a régua frouxa.

   Passar o pé para `#029198` devolve **4,894:1**. São nove pontos de luminância
   no canal verde e oito no azul — a olho nu é a mesma cor, e é a diferença
   entre um botão que cumpre a norma e um que quase cumpre.

   Fica ESCOPADO em `.reg-escuro`, e não no `--g-cta` de `styles.css`, pela mesma
   razão que a cor do texto ficou: o token global serve doze páginas, e ali a
   correção certa é decisão de escopo do dono. Aqui as duas metades do conserto
   — a cor da letra e o pé da chapa — moram uma ao lado da outra, que é como um
   par se lê. */
.reg-escuro .btn-primary {
  /* ── TURQUESA FUNDO COM LETRA BRANCA — a decisão, e a conta que a forçou ───
     O dono pediu letra branca três vezes, em quatro botões. Ela não cabia na
     chapa que existia, e o motivo é aritmético, não de gosto:

       branco sobre #02D4DC (ciano da casa)    1,73:1     reprova
       branco sobre #7FE7EB (turquesa claro)   1,37:1     reprova
       navy   sobre #7FE7EB                   12,92:1     passa

     Branco é branco: não há alfa que o salve, e a régua é 4,5:1 para texto de
     14px em peso 500. Para o branco passar, a ponta MAIS CLARA do degradê tem
     de cair a 0,1704 de luminância — que é exatamente onde `--c-teal-d`
     (#017A80) está. Ou a chapa desce, ou a letra não pode ser branca.

     Perguntado, o dono escolheu descer a chapa. Ela continua turquesa — é o
     mesmo teal da marca, uma oitava abaixo:

       branco sobre #017A80   4,84:1
       branco sobre #015C61   7,33:1

     O QUE MUDA NA PÁGINA. Perde-se o ciano aceso, que era a coisa mais clara
     dela; ganha-se um botão que lê como objeto sólido em vez de etiqueta acesa —
     e a mesma letra branca que o botão do cabeçalho já usava, com o mesmo
     defeito de contraste e sem ninguém ter medido. Agora os dois dizem a mesma
     coisa, e os dois passam.

     Fica ESCOPADO em `.reg-escuro` e não no `--g-cta` de `styles.css` pela razão
     de sempre: o token global serve doze páginas, e ali a correção é decisão de
     escopo do dono. */
  background: linear-gradient(135deg, #017A80 0%, #015C61 100%);
  color: var(--d-ink);
}

.reg-escuro .btn-primary:focus-visible {
  outline: 2px solid var(--c-teal-2);
  outline-offset: 3px;
  box-shadow:
    0 14px 36px -14px color-mix(in srgb, var(--c-teal) 58%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--d-ink) 25%, transparent),
    0 0 0 5px var(--c-navy);
}
/* Os secundários não têm sombra de elevação para preservar: sobra o aro. */
.reg-escuro :is(.btn-outline, .btn-ghost):focus-visible {
  outline: 2px solid var(--c-teal-2);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px var(--c-navy);
}


/* ════════════════════════════════════════════════════════════════════════════
   8 · CORES FORÇADAS — só onde a cor carrega informação

   Em alto contraste o sistema operacional reescreve as cores. Aqui isso é
   bem-vindo em quase tudo: a borda do vidro e a da pílula viram borda do
   sistema sozinhas, porque são borda de verdade e não sombra desenhada.

   Os dois casos que precisam de instrução são os que pintam com degradê — que
   o modo forçado não reescreve, e que sem tratamento viram mancha ou sumiço.
   ════════════════════════════════════════════════════════════════════════════ */
@media (forced-colors: active) {
  /* A marca d'água é atmosfera. Em alto contraste, texto recortado por degradê
     ou some ou vira um bloco chapado sobre o conteúdo — o único desfecho certo
     é ela não estar lá. */
  .bd-marca { display: none; }

  /* O fio e o nó carregam a mesma informação que a composição já dá; forçados,
     virariam duas linhas grossas cruzando o texto. */
  .soma-fio,
  .soma-fio-no { display: none; }

  /* O tique da régua é o que distingue "sequência" de "três parágrafos": ele
     precisa sobreviver, e sobrevive como borda de sistema. */
  .bd-num > * {
    background-image: none;
    border-block-start: 1px solid CanvasText;
  }
  /* O ponto da pílula é decorativo — a palavra basta. */
  .bd-pilula--ponto::before { display: none; }
  /* A aresta de luz do vidro é volume, não conteúdo. */
  .bd-vidro::before { display: none; }
}


/* ════════════════════════════════════════════════════════════════════════════
   9 · SEM MOVIMENTO — a mesma cena, parada e inteira

   Não é degradação. Cada peça acima já tem o estado FINAL como padrão — o fio
   nasce desenhado (`--fio-corrida: 0`), o cartão nasce em escala 1, o nó nasce
   opaco — então desligar é literalmente não deixar a animação sobrescrever.

   Vence por ORDEM e por especificidade igual à do bloco `@supports`, sem um
   `!important` sequer. É por isso que este bloco tem de ser o último do arquivo
   e o arquivo tem de entrar inteiro: regra de banda inserida depois daqui
   passa a rodar com o movimento desligado.
   ════════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  /* zerar `--fio-corrida` aqui resolve as duas formas de uma vez: `--fio-cabeca`
     vai a 100% e as duas máscaras descobrem o desenho inteiro */
  .soma-fio {
    animation: none;
    --fio-corrida: 0;
  }
  .soma-fio-no {
    animation: none;
    opacity: 1;
    transform: translate(-50%, -50%);
  }
  .bd-entra > * {
    animation: none;
    opacity: 1;
    transform: none;
  }
  /* As transições de ponteiro também: o estado de hover continua existindo,
     só chega inteiro em vez de chegar andando. */
  .bd-vidro,
  .bd-vidro::before,
  a.bd-pilula,
  button.bd-pilula {
    transition: none;
  }
}


/* ──── B · BANDA 06 — AS SETE FRENTES, galeria-acordeão ──── */
/* ════════════════════════════════════════════════════════════════════════════
   Sete cartões numa fiada. O escolhido cresce e abre a solução; os outros
   encolhem e ficam com o nome na vertical e o ícone no pé.

   DE ONDE VEM. Porte do `AccordionGallery` do acervo React Bits
   (reactbits.dev), de David Haz — licença MIT + Commons Clause: uso comercial
   DENTRO de um produto é permitido; revender ou redistribuir o componente, não.

   O REACT E O GSAP NÃO VIERAM. Tudo que o GSAP anima ali é `flex-grow`, o
   deslocamento do media, `opacity` e o filtro — e existe UM estado por painel,
   não uma sequência. Isso é transição de CSS, não linha do tempo. A seleção é
   `input[type=radio]` + `<label>`: funciona com o JS desligado e já traz
   navegação por seta no teclado.

   O QUE O MOCKUP MANDOU MUDAR EM RELAÇÃO AO PORTE ANTERIOR, item a item:

   1 · SAI A INCLINAÇÃO. O original gira os vizinhos em `rotateY(±8deg)` sob
       `perspective: 1400px`; no mockup os sete cartões são FRONTAIS, sem
       encurtamento nenhum — dá para conferir medindo: lá as larguras dos
       fechados são iguais entre si, e sob perspectiva elas não seriam. Saíram
       junto as catorze regras de `nth-child` que davam o lado do giro.
   2 · ENTRA O ÍCONE no pé de cada cartão fechado.
   3 · O NOME VERTICAL sobe para dar lugar ao ícone.
   4 · O CARTÃO ABERTO deixa de ancorar o texto no pé: o conteúdo passa a ocupar
       a coluna ESQUERDA, distribuído do topo ao pé, com a foto respirando à
       direita. O véu vira horizontal para isso.
   5 · O LINK ganha a seta e a régua embaixo.
   6 · CANTO de 16px e BORDA de 1px em todos os sete.

   O QUE FICOU do original: o `flex-grow` como motor da abertura (6,5 =
   (0,52 × 6) / (1 − 0,52), a conta do `expandRatio: 0.52` dele), a duração de
   0,6s, o gap de 10px e o parallax do media — este último invisível num mockup
   estático, e por isso mantido.

   A ORDEM DAS REGRAS NÃO É OPCIONAL: o bloco de `:hover` vem DEPOIS do de
   `:checked` porque as duas famílias empatam em especificidade e quem vence é a
   linha de baixo. É isso que faz o hover mandar enquanto o cursor está em cima
   e a seleção voltar a mandar quando ele sai.
   ════════════════════════════════════════════════════════════════════════════ */

.gl-wrap {
  /* As duas variáveis moram AQUI e não na galeria: `.gl-placas` é IRMÃ dela e
     não descendente. Declaradas lá dentro, as placas do pé ficariam sem borda —
     e sem erro nenhum, porque `var()` sem valor e sem fallback simplesmente não
     pinta a propriedade. */
  --gl-borda: color-mix(in srgb, var(--c-teal-2) 16%, transparent);
  --gl-vidro: color-mix(in srgb, var(--c-blue) 9%, var(--d-campo));

  /* o `<svg>` do fio é `position:absolute; inset:0` e a `.home-sec` já é
     `relative`; sem o z-index do conteúdo o traçado pinta por cima do texto.
     Espelho exato do `.pl-wrap` (page-home.css:4169). */
  position: relative;
  z-index: 1;
}

.gl-defs { height: 0; position: absolute; width: 0; }

.gl-cabeca { max-width: 52ch; }
.gl-lead   { margin-block-start: var(--e-5); }

/* A serifa do título é a decisão D-2 (page-home.css:40-47): `.reg-escuro .serif`
   devolve a Instrument Serif itálica que a folha global desliga, e vence por
   ordem de carga. Aqui só se blocifica a segunda linha, para a quebra ser
   escolha de composição e não acidente do `max-width: 52ch` da cabeça. */
.gl-titulo .serif { display: block; }


/* ══ 1 · A FIADA ════════════════════════════════════════════════════════════ */
.gl-galeria {
  /* 39% da largura do pano — a proporção medida no mockup (cartão de 715px de
     altura num quadro de 1856 de pano útil). */
  --gl-alt: clamp(24rem, 39vw, 32rem);
  --gl-curva: cubic-bezier(.22, 1, .36, 1);   /* o power3.out do original */
  --gl-dur: .6s;                              /* duration do original */
  --gl-desl: 4%;                              /* o parallax, ver bloco 2 */

  /* A COLUNA DE TEXTO DO CARTÃO ABERTO, e ela é a medida-mãe deste bloco: o
     `.gl-aberto` tira dela a largura e o `.gl-veu` tira dela onde a rampa
     escura acaba. Uma conta só, dois consumidores, e nunca mais desencontrados.

     `56cqi` é a mesma proporção de antes (56% do cartão) escrita em unidade de
     CONTÊINER — resolve contra o cartão, não contra o quadro —, e é por isso
     que a declaração mora aqui e não no `.gl-cartao`: `cqi` usado no próprio
     contêiner resolveria contra o contêiner de fora. Aqui é só token; a unidade
     só vira pixel quando um descendente do cartão a consome.

     O PISO DE 21rem É O CONSERTO, e o número saiu da medida de linha. A banda
     foi desenhada para 36 caracteres por linha (é o que diz a nota do
     `.gl-aberto`), e 56% entregam isso no cartão de 631px em que ela foi
     desenhada. Abaixo dali os 56% viram 30 caracteres, depois 25, depois 20 —
     a 900 de janela davam 161px de texto útil, sete linhas de descrição, e a
     pilha estourava a altura do cartão em 92px.
     Com piso de 336px a coluna para de encolher e passa a TOMAR do quadro: 65%
     do cartão a 519px, 73% a 463px. A foto cede largura, e cede só onde é
     preciso — no cartão de 631 para cima o piso nem entra em jogo e a
     composição original fica intacta, nos mesmos 56%.
     O teto de 36rem é o de sempre. */
  --gl-col: clamp(21rem, 56cqi, 36rem);

  /* A RAMPA DO CARTÃO ABERTO, como valor e não como declaração — porque quem
     precisa trocá-la é o `@container` do bloco 3-B, e um `@container` escreve
     em `.gl-veu` (0,1,0) contra os sete seletores de (0,7,0) que ligam o estado
     aberto. Variável atravessa esse muro; `background` na mão, não.

     AS PARADAS SEGUEM A COLUNA DE TEXTO e não uma porcentagem fixa do cartão.
     Conferido: no cartão de 631px em que esta rampa foi desenhada, `.58 ×
     --gl-col` dá 32% e `--gl-col + 18cqi` dá 74% — exatamente os dois números
     que estavam escritos aqui antes. O que a conta acrescenta é que eles
     acompanham a coluna quando ela cresce. */
  --gl-veu-aberto:
    linear-gradient(90deg,
      color-mix(in srgb, var(--d-piso) 94%, transparent) 0,
      color-mix(in srgb, var(--d-piso) 88%, transparent) calc(var(--gl-col) * .58),
      transparent calc(var(--gl-col) + 18cqi)),
    linear-gradient(180deg, transparent 58%, color-mix(in srgb, var(--d-piso) 46%, transparent) 100%);

  margin-block-start: var(--e-8);
  position: relative;
}

/* Os sete rádios saem da tela SEM `display:none` e SEM `visibility:hidden`: os
   dois retiram o campo da ordem de foco, e é o foco deles que dá a navegação
   por seta de graça. `clip-path` recorta o pixel e mantém o campo focável. */
.gl-r {
  clip-path: inset(50%);
  height: 1px;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.gl-fiada {
  display: flex;
  gap: 10px;                       /* o gap do original */
  height: var(--gl-alt);
  list-style: none;
  margin: 0;
  padding: 0;
}

.gl-cartao {
  background: var(--gl-vidro);
  border: 1px solid var(--gl-borda);
  border-radius: var(--e-4);
  flex: 1 1 0;
  min-width: 0;
  /* `clip` e nunca `hidden`: `hidden` viraria contêiner de rolagem e mataria o
     `animation-timeline: view()` da fundação (styles.css:103). */
  overflow: clip;
  position: relative;
  transition: flex-grow var(--gl-dur) var(--gl-curva),
              border-color var(--gl-dur) var(--gl-curva);

  /* O CARTÃO É O CONTÊINER DE MEDIDA, e é esta linha que resolve o defeito de
     fundo desta banda: a tipografia do cartão aberto era medida em `vw`, ou
     seja, na JANELA — e quem muda de tamanho aqui não é a janela, é o cartão.
     A 1440 o título de 38px cabia em 273px de coluna; a 900 o mesmo texto
     continuava pedindo 29px numa coluna de 161px, a descrição virava sete
     linhas e a pilha passava por cima do link.

     Com `container-type: inline-size` o `cqi` passa a medir o CARTÃO, e o
     tamanho do texto vira função da largura que ele realmente tem. Fechado, o
     texto é minúsculo (e invisível, `opacity: 0`); enquanto o `flex-grow`
     abre, a mesma unidade cresce quadro a quadro — o texto sobe de tamanho
     JUNTO com o cartão, na proporção, e não em degrau.

     `inline-size` e não `size`: só o eixo horizontal é contido. A altura
     continua vindo de `--gl-alt` na fiada e de `min-height` na coluna. E não
     vira contêiner de rolagem — a ressalva do `overflow: clip` acima segue
     valendo e segue verdadeira. */
  container-name: gl-cartao;
  container-type: inline-size;
}


/* ══ 2 · A FACE — imagem, véu, nome vertical e ícone ════════════════════════
   O MEDIA É O CARTÃO — `inset: 0`, sem largura própria. A versão anterior
   copiava o `usable × expandRatio × 1.22` do original como
   `width: calc((100% - 60px) * .6344)`; no original esse `usable` é a largura
   da FILEIRA, medida em JS, e em CSS o `100%` de um filho absoluto resolve
   contra o CARTÃO — que é justamente a caixa que muda o tempo todo. Medido: o
   cartão fechado de 66px dava media de 4px e o aberto de 419px dava 228px, uma
   faixa boiando no meio. A folga do parallax vem do `scale` na imagem. */
.gl-face {
  cursor: pointer;
  display: block;
  inset: 0;
  position: absolute;
}

.gl-media {
  display: block;
  inset: 0;
  position: absolute;
  transition: filter var(--gl-dur) var(--gl-curva);
  /* dessaturado e escurecido no repouso; o ativo volta ao natural. NÃO é
     `grayscale(1)` como o original: estas imagens são monocromáticas em azul de
     propósito, e tirar o azul tiraria a única cor que a série tem. */
  filter: saturate(.5) brightness(.66);
}

/* A FOLGA DO PARALLAX VEM DO `scale`, E O DESLOCAMENTO É EM PORCENTAGEM — é o
   par que faz o efeito escalar sozinho. `translateX(4%)` mede 4% da própria
   caixa, então num cartão de 66px desloca 2,6px e num de 419px desloca 17px,
   sempre dentro dos 6% de sobra que o `scale(1.12)` cria de cada lado. Um
   deslocamento em px fixo estouraria a sobra no cartão fechado e mostraria a
   borda vazia.

   `object-position` lê `--pos`, que só a auditoria declara: nas outras seis o
   assunto está no centro, e o padrão de 50% serve. */
.gl-media img {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50%) center;
  transform: scale(1.12);
  transition: transform var(--gl-dur) var(--gl-curva);
  user-select: none;
  width: 100%;
  -webkit-user-drag: none;
}

/* O VÉU DO CARTÃO FECHADO. Rampa vertical: o nome e o ícone ficam no pé, e é lá
   que a imagem precisa apagar. O chapado por cima é o `--ag-dim` do original. */
.gl-veu {
  background:
    linear-gradient(180deg, transparent 34%, color-mix(in srgb, var(--d-piso) 92%, transparent) 100%),
    color-mix(in srgb, var(--d-piso) 38%, transparent);
  inset: 0;
  pointer-events: none;
  position: absolute;
  transition: background var(--gl-dur) var(--gl-curva),
              opacity    var(--gl-dur) var(--gl-curva);
}

/* O NOME NA VERTICAL. `writing-mode: vertical-rl` sem mais nada: o Latin gira
   90° no sentido horário por padrão, que é exatamente o do mockup — número
   acima, nome abaixo, lendo de cima para baixo.

   O `bottom` abre espaço para o ícone: 30px de ícone + 24 de respiro + 24 de
   goteira = 78. */
.gl-vertical {
  align-items: center;
  bottom: 78px;
  color: var(--d-ink);
  display: flex;
  font-size: var(--t-sm);
  font-weight: 600;
  gap: var(--e-3);
  left: 50%;
  letter-spacing: -.01em;
  pointer-events: none;
  position: absolute;
  text-shadow: 0 2px 14px rgba(3, 10, 22, .85);
  transform: translateX(-50%);
  transition: opacity calc(var(--gl-dur) * .45) var(--gl-curva);
  white-space: nowrap;
  writing-mode: vertical-rl;
}

.gl-ord {
  color: var(--c-teal-2);
  font-family: var(--f-rotulo);
  font-size: var(--t-mono);
  font-style: normal;
  font-variant-numeric: tabular-nums;
  letter-spacing: .1em;
}

/* O ÍCONE NO PÉ. São os sete `orbFrente0N` recuperados do commit 9496e68, um
   por frente, desenhados para este uso. `currentColor` e não `fill`: os
   símbolos vieram com `stroke="currentColor"`, então a cor entra por herança. */
.gl-icone {
  block-size: 30px;
  bottom: var(--e-5);
  color: var(--c-teal-2);
  inline-size: 30px;
  left: 50%;
  pointer-events: none;
  position: absolute;
  stroke-width: 1.4;
  transform: translateX(-50%);
  transition: opacity calc(var(--gl-dur) * .45) var(--gl-curva);
}


/* ══ 3 · O CARTÃO ABERTO ════════════════════════════════════════════════════
   `space-between` numa caixa que ocupa o cartão inteiro: o eyebrow encosta no
   topo, o link no pé e o miolo fica no meio — que é a distribuição do mockup,
   onde o eyebrow está a 16% da altura do cartão e o link a 83%.

   A LARGURA É 46% E NÃO 100%: no mockup a foto respira à direita do texto, e é
   ela que carrega a banda. Texto atravessando o cartão inteiro cobriria a cena. */
.gl-aberto {
  display: flex;
  flex-direction: column;
  /* O RESPIRO MÍNIMO ENTRE OS TRÊS BLOCOS. O `space-between` distribui a sobra,
     mas quando a sobra é pouca ele encosta um bloco no outro; o `gap` é o piso
     que garante ar mesmo no cartão mais apertado da fiada. Em `cqi` porque num
     cartão de 379px 24 de goteira são caros e 12 bastam. */
  gap: clamp(var(--e-3), 2.5cqi, var(--e-5));
  inset-block: 0;
  inset-inline-start: 0;
  justify-content: space-between;
  opacity: 0;
  /* 40px de teto, e nao os 48 de `--e-7`: com a coluna a 56% de um cartao de
     669px a 1440, 48 de cada lado deixavam 279px de texto — 25 caracteres por
     linha, e a descricao quebrava em seis linhas curtas. A 40 sobram 295px.
     O que mudou foi o meio da conta: era `2.8vw` — a JANELA —, e num cartão de
     379px isso ainda pedia 25px de cada lado de uma coluna de 161. Agora é
     `5cqi`, o cartão, e a goteira encolhe junto com quem a hospeda. */
  padding: clamp(var(--e-4), 5cqi, 40px);
  /* o pai é `<label>`-coberto: sem isto o texto comeria o clique de selecionar.
     Só o `<a>` volta a receber ponteiro. */
  pointer-events: none;
  position: absolute;
  transform: translateY(10px);
  transition: opacity   calc(var(--gl-dur) * .55) var(--gl-curva),
              transform calc(var(--gl-dur) * .55) var(--gl-curva);
  /* A largura é a `--gl-col` da galeria — 56% do cartão com piso de 17rem e
     teto de 36rem, a conta e o porquê estão lá. O `min(100%, …)` é o freio de
     mão: o piso de 17rem não pode transbordar um cartão que ainda seja menor
     que isso, o que só acontece a meio caminho da transição de abertura. */
  width: min(100%, var(--gl-col));
  z-index: 2;
}

/* NENHUM DOS TRÊS ENCOLHE — e esta é a linha que torna a sobreposição
   impossível, não improvável. Item de flex nasce com `flex-shrink: 1`: numa
   caixa de altura fixa como esta, o navegador espremia o `.gl-meio` para baixo
   da altura do próprio conteúdo, e o conteúdo transbordava POR CIMA do link.
   Era exatamente isso que se via — «Ver a consultoria de gestão» escrito em
   cima de «hospital.». Com `flex: 0 0 auto` cada bloco guarda a altura que
   pediu; se um dia faltar espaço, o pé desce, e nunca mais um texto passa
   por baixo de outro. */
.gl-aberto > * { flex: 0 0 auto; }

/* a mesma goteira em `cqi`, pela mesma razão: `--e-4` fixo custava 32px de
   altura num cartão que só tem 384. */
.gl-meio {
  display: flex;
  flex-direction: column;
  gap: clamp(var(--e-3), 2.5cqi, var(--e-4));
  min-height: 0;
}

/* A BARRA do original, que no mockup fica À ESQUERDA do eyebrow e na mesma
   linha — não acima. `inline-flex` no rótulo e a barra como `::before` dele. */
.gl-marca {
  align-items: center;
  color: var(--c-teal-2);
  display: inline-flex;
  font-family: var(--f-rotulo);
  font-size: var(--t-mono);
  gap: var(--e-3);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.gl-marca::before {
  background: var(--c-teal-2);
  block-size: 1.9em;
  border-radius: 3px;
  box-shadow: 0 0 12px color-mix(in srgb, var(--c-teal-2) 55%, transparent);
  content: '';
  flex: 0 0 auto;
  inline-size: 3px;
}

/* O TETO DE 2.375rem (38px) É O DE SEMPRE — o que mudou é o meio da conta.
   `6cqi` reproduz exatamente os 38px no cartão de 631px em que a banda foi
   desenhada (631 × .06 = 37,9) e cede sozinho abaixo disso: 26px no cartão de
   437, 23px no de 379. O piso de 1.125rem existe para o caso patológico —
   cartão a meio da transição — e nunca é atingido em repouso.
   `overflow-wrap` porque «capacitação» a 38px numa coluna estreita é uma
   palavra maior que a linha, e palavra maior que a linha vaza para fora do
   cartão em vez de quebrar. */
.gl-nome {
  font-size: clamp(1.125rem, 6cqi, 2.375rem);
  font-weight: 600;
  letter-spacing: -.024em;
  line-height: 1.08;
  margin: 0;
  overflow-wrap: break-word;
  text-wrap: balance;
}

/* 15px de piso, e não `--t-xs`: a linha desta banda chegou a resolver em 8,5px
   a 1024 e a 390 numa versão anterior — o mesmo valor nas duas, ou seja o clamp
   batia num piso errado. Aqui o piso é o próprio corpo, e ele é intocável: 15px
   é o menor corpo legível da casa, então quem cede quando falta espaço é a
   COLUNA (o piso de 17rem da `--gl-col`), nunca a letra.
   `3cqi` entrega os 17px do teto a partir de 567px de cartão e desce até o piso
   de 15 no cartão de 379 — dois pontos de diferença, não sete. */
.gl-linha {
  color: color-mix(in srgb, var(--d-ink) 86%, transparent);
  font-size: clamp(.9375rem, 3cqi, 1.0625rem);
  line-height: var(--r-nota);
  margin: 0;
  text-wrap: pretty;
}

.gl-etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.gl-etiquetas li {
  border: 1px solid var(--gl-borda);
  color: color-mix(in srgb, var(--d-ink) 74%, transparent);
  font-family: var(--f-rotulo);
  font-size: var(--t-mono);
  letter-spacing: .07em;
  padding: .35em .7em;
  text-transform: uppercase;
}

/* O LINK, com a seta e a régua embaixo — as duas do mockup. A régua é
   `border-bottom` no próprio `<a>` e por isso acompanha a largura do conjunto
   texto + seta, sem número mágico. */
.gl-ir {
  align-items: center;
  align-self: flex-start;
  border-bottom: 1px solid color-mix(in srgb, var(--c-teal-2) 42%, transparent);
  color: var(--c-teal-2);
  display: inline-flex;
  font-size: var(--t-sm);
  font-weight: 600;
  min-height: var(--soma-alvo-toque, 44px);
  padding-block-end: var(--e-3);
  pointer-events: auto;   /* devolve o ponteiro que o `.gl-aberto` tirou */
  text-decoration: none;
  transition: border-color var(--m-rapido) var(--m-sai);
}
.gl-ir:focus-visible { outline: 2px solid var(--c-teal-2); outline-offset: 4px; }

/* A seta: uma régua de 1px com a cabeça em duas bordas giradas 45°. Desenhada e
   não glifo — `→` herda a métrica da fonte e desalinha da linha de base. */
.gl-seta {
  background: currentColor;
  block-size: 1px;
  flex: 0 0 auto;
  inline-size: 34px;
  margin-inline-start: var(--e-4);
  position: relative;
  transition: inline-size var(--m-rapido) var(--m-sai);
}
.gl-seta::after {
  border-block-start: 1px solid currentColor;
  border-inline-end: 1px solid currentColor;
  content: '';
  height: 7px;
  inset-block-start: -3px;
  inset-inline-end: 0;
  position: absolute;
  transform: rotate(45deg);
  width: 7px;
}

@media (hover: hover) and (pointer: fine) {
  .gl-ir:hover { border-bottom-color: var(--c-teal-2); }
  .gl-ir:hover .gl-seta { inline-size: 44px; }
}

/* O aviso de nova aba é conteúdo, não enfeite: `soma-config-global.js:77` mapeia
   a rota da SAVYME para caminho relativo hoje e para URL absoluta quando o
   domínio existir — o destino passa a ser outro site sem este arquivo mudar.
   `position:absolute` e nunca `display:none`, que tiraria o texto do nome
   acessível, que é o defeito que a linha existe para corrigir. */
.gl-oculto {
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}


/* ══ 3-B · O CARTÃO ABERTO QUANDO ELE É ESTREITO ════════════════════════════
   TEXTO AO LADO DA FOTO É UM LUXO DE CARTÃO LARGO. O piso de 21rem da
   `--gl-col` segura a medida de linha enquanto o cartão encolhe — mas ele
   segura tomando da foto, e há um ponto em que o que sobra para a foto deixa
   de ser foto. A 430px de cartão a coluna já é 78% da largura: a faixa que
   resta à direita não mostra cena nenhuma, é uma tira.

   Daí para baixo o texto toma o cartão inteiro e a foto vira CHÃO, com o véu
   deitado. Não é um layout novo: é exatamente o que a coluna abaixo de 880 já
   faz, subindo um degrau para onde ele passou a ser necessário. E o degrau é
   suave por construção — 78% e 100% são vizinhos, não opostos.

   `@container` e não `@media` porque a pergunta é «este cartão é estreito?»,
   e a resposta não está na janela: está no `flex-grow`, que muda com a
   interação — dois cartões abertos ao mesmo tempo passam por aqui numa janela
   larga. É a única ferramenta que responde a isso sem JS. */
@container gl-cartao (max-width: 430px) {
  .gl-aberto { width: 100%; }

  /* a rampa deita junto com o texto. Escura em cima e embaixo, mais aberta no
     meio — é a mesma rampa que o breakpoint de 880 já usa para o cartão em
     coluna, pelo mesmo motivo: com texto de ponta a ponta, o escuro não pode
     ficar só de um lado. Declarada NO PRÓPRIO `.gl-veu`, que é quem a consome:
     valor próprio vence valor herdado, sem disputa de especificidade. */
  .gl-veu {
    --gl-veu-aberto:
      linear-gradient(180deg,
        color-mix(in srgb, var(--d-piso) 92%, transparent)  0%,
        color-mix(in srgb, var(--d-piso) 78%, transparent) 46%,
        color-mix(in srgb, var(--d-piso) 88%, transparent) 100%);
  }
}


/* ══ 4 · O ESTADO ABERTO, POR SELEÇÃO ═══════════════════════════════════════
   `flex-grow: 6.5` é a conta do original com `expandRatio: 0.52`:
   (0,52 × (7 − 1)) / (1 − 0,52) = 3,12 / 0,48 = 6,5. */
.gl-r:nth-of-type(1):checked ~ .gl-fiada .gl-cartao:nth-child(1),
.gl-r:nth-of-type(2):checked ~ .gl-fiada .gl-cartao:nth-child(2),
.gl-r:nth-of-type(3):checked ~ .gl-fiada .gl-cartao:nth-child(3),
.gl-r:nth-of-type(4):checked ~ .gl-fiada .gl-cartao:nth-child(4),
.gl-r:nth-of-type(5):checked ~ .gl-fiada .gl-cartao:nth-child(5),
.gl-r:nth-of-type(6):checked ~ .gl-fiada .gl-cartao:nth-child(6),
.gl-r:nth-of-type(7):checked ~ .gl-fiada .gl-cartao:nth-child(7) {
  border-color: color-mix(in srgb, var(--c-teal-2) 34%, transparent);
  flex-grow: 6.5;
}

.gl-r:nth-of-type(1):checked ~ .gl-fiada .gl-cartao:nth-child(1) .gl-media,
.gl-r:nth-of-type(2):checked ~ .gl-fiada .gl-cartao:nth-child(2) .gl-media,
.gl-r:nth-of-type(3):checked ~ .gl-fiada .gl-cartao:nth-child(3) .gl-media,
.gl-r:nth-of-type(4):checked ~ .gl-fiada .gl-cartao:nth-child(4) .gl-media,
.gl-r:nth-of-type(5):checked ~ .gl-fiada .gl-cartao:nth-child(5) .gl-media,
.gl-r:nth-of-type(6):checked ~ .gl-fiada .gl-cartao:nth-child(6) .gl-media,
.gl-r:nth-of-type(7):checked ~ .gl-fiada .gl-cartao:nth-child(7) .gl-media { filter: none; }

.gl-r:nth-of-type(1):checked ~ .gl-fiada .gl-cartao:nth-child(1) .gl-media img,
.gl-r:nth-of-type(2):checked ~ .gl-fiada .gl-cartao:nth-child(2) .gl-media img,
.gl-r:nth-of-type(3):checked ~ .gl-fiada .gl-cartao:nth-child(3) .gl-media img,
.gl-r:nth-of-type(4):checked ~ .gl-fiada .gl-cartao:nth-child(4) .gl-media img,
.gl-r:nth-of-type(5):checked ~ .gl-fiada .gl-cartao:nth-child(5) .gl-media img,
.gl-r:nth-of-type(6):checked ~ .gl-fiada .gl-cartao:nth-child(6) .gl-media img,
.gl-r:nth-of-type(7):checked ~ .gl-fiada .gl-cartao:nth-child(7) .gl-media img {
  object-position: center;   /* aberto, a cena inteira cabe: o desvio sai */
  transform: scale(1);
}

/* O VÉU DO CARTÃO ABERTO VIRA HORIZONTAL. É a mudança nº 4: o texto ocupa a
   coluna esquerda e a foto respira à direita, então o escuro tem de estar à
   ESQUERDA e abrir para o lado. A rampa de baixo fica em volume menor, só para
   segurar o link contra um fundo claro. */
.gl-r:nth-of-type(1):checked ~ .gl-fiada .gl-cartao:nth-child(1) .gl-veu,
.gl-r:nth-of-type(2):checked ~ .gl-fiada .gl-cartao:nth-child(2) .gl-veu,
.gl-r:nth-of-type(3):checked ~ .gl-fiada .gl-cartao:nth-child(3) .gl-veu,
.gl-r:nth-of-type(4):checked ~ .gl-fiada .gl-cartao:nth-child(4) .gl-veu,
.gl-r:nth-of-type(5):checked ~ .gl-fiada .gl-cartao:nth-child(5) .gl-veu,
.gl-r:nth-of-type(6):checked ~ .gl-fiada .gl-cartao:nth-child(6) .gl-veu,
.gl-r:nth-of-type(7):checked ~ .gl-fiada .gl-cartao:nth-child(7) .gl-veu {
  /* o desenho da rampa mora em `--gl-veu-aberto`, na `.gl-galeria`. Aqui só se
     diz QUANDO ela entra; o QUE ela é depende da largura do cartão, e quem sabe
     isso é o `@container` do bloco 3-B — que não teria como vencer estes sete
     seletores de (0,7,0) escrevendo `background` na mão. */
  background: var(--gl-veu-aberto);
}

.gl-r:nth-of-type(1):checked ~ .gl-fiada .gl-cartao:nth-child(1) .gl-vertical,
.gl-r:nth-of-type(2):checked ~ .gl-fiada .gl-cartao:nth-child(2) .gl-vertical,
.gl-r:nth-of-type(3):checked ~ .gl-fiada .gl-cartao:nth-child(3) .gl-vertical,
.gl-r:nth-of-type(4):checked ~ .gl-fiada .gl-cartao:nth-child(4) .gl-vertical,
.gl-r:nth-of-type(5):checked ~ .gl-fiada .gl-cartao:nth-child(5) .gl-vertical,
.gl-r:nth-of-type(6):checked ~ .gl-fiada .gl-cartao:nth-child(6) .gl-vertical,
.gl-r:nth-of-type(7):checked ~ .gl-fiada .gl-cartao:nth-child(7) .gl-vertical,
.gl-r:nth-of-type(1):checked ~ .gl-fiada .gl-cartao:nth-child(1) .gl-icone,
.gl-r:nth-of-type(2):checked ~ .gl-fiada .gl-cartao:nth-child(2) .gl-icone,
.gl-r:nth-of-type(3):checked ~ .gl-fiada .gl-cartao:nth-child(3) .gl-icone,
.gl-r:nth-of-type(4):checked ~ .gl-fiada .gl-cartao:nth-child(4) .gl-icone,
.gl-r:nth-of-type(5):checked ~ .gl-fiada .gl-cartao:nth-child(5) .gl-icone,
.gl-r:nth-of-type(6):checked ~ .gl-fiada .gl-cartao:nth-child(6) .gl-icone,
.gl-r:nth-of-type(7):checked ~ .gl-fiada .gl-cartao:nth-child(7) .gl-icone { opacity: 0; }

.gl-r:nth-of-type(1):checked ~ .gl-fiada .gl-cartao:nth-child(1) .gl-aberto,
.gl-r:nth-of-type(2):checked ~ .gl-fiada .gl-cartao:nth-child(2) .gl-aberto,
.gl-r:nth-of-type(3):checked ~ .gl-fiada .gl-cartao:nth-child(3) .gl-aberto,
.gl-r:nth-of-type(4):checked ~ .gl-fiada .gl-cartao:nth-child(4) .gl-aberto,
.gl-r:nth-of-type(5):checked ~ .gl-fiada .gl-cartao:nth-child(5) .gl-aberto,
.gl-r:nth-of-type(6):checked ~ .gl-fiada .gl-cartao:nth-child(6) .gl-aberto,
.gl-r:nth-of-type(7):checked ~ .gl-fiada .gl-cartao:nth-child(7) .gl-aberto {
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(var(--gl-dur) * .3);
}

/* O PARALLAX, por lado. Quem está ANTES do aberto desliza para a direita; quem
   está DEPOIS, para a esquerda. É a lei do original («i < active ? … : …»)
   escrita em intervalos de `nth-child` — doze regras, e não quarenta e nove.

   O deslocamento do original é `drift × 0.5 × mediaSize × 0.06` com o drift
   preso em ±1,5, o que dá ±22px no vizinho e ±34px no distante. Aqui é um valor
   só por lado (a média): dois valores exigiriam quatro regras por estado em vez
   de duas, e a diferença entre 22 e 34 num media recortado a 100px de largura
   não é visível. Simplificação declarada, não descuido. */
.gl-r:nth-of-type(2):checked ~ .gl-fiada .gl-cartao:nth-child(-n+1) .gl-media img,
.gl-r:nth-of-type(3):checked ~ .gl-fiada .gl-cartao:nth-child(-n+2) .gl-media img,
.gl-r:nth-of-type(4):checked ~ .gl-fiada .gl-cartao:nth-child(-n+3) .gl-media img,
.gl-r:nth-of-type(5):checked ~ .gl-fiada .gl-cartao:nth-child(-n+4) .gl-media img,
.gl-r:nth-of-type(6):checked ~ .gl-fiada .gl-cartao:nth-child(-n+5) .gl-media img,
.gl-r:nth-of-type(7):checked ~ .gl-fiada .gl-cartao:nth-child(-n+6) .gl-media img {
  transform: scale(1.12) translateX(var(--gl-desl));
}

.gl-r:nth-of-type(1):checked ~ .gl-fiada .gl-cartao:nth-child(n+2) .gl-media img,
.gl-r:nth-of-type(2):checked ~ .gl-fiada .gl-cartao:nth-child(n+3) .gl-media img,
.gl-r:nth-of-type(3):checked ~ .gl-fiada .gl-cartao:nth-child(n+4) .gl-media img,
.gl-r:nth-of-type(4):checked ~ .gl-fiada .gl-cartao:nth-child(n+5) .gl-media img,
.gl-r:nth-of-type(5):checked ~ .gl-fiada .gl-cartao:nth-child(n+6) .gl-media img,
.gl-r:nth-of-type(6):checked ~ .gl-fiada .gl-cartao:nth-child(n+7) .gl-media img {
  transform: scale(1.12) translateX(calc(var(--gl-desl) * -1));
}

/* O foco mora no `<input>`, recortado a 1px — o anel tem de ser desenhado no
   cartão correspondente, senão o teclado navega às cegas. */
.gl-r:nth-of-type(1):focus-visible ~ .gl-fiada .gl-cartao:nth-child(1),
.gl-r:nth-of-type(2):focus-visible ~ .gl-fiada .gl-cartao:nth-child(2),
.gl-r:nth-of-type(3):focus-visible ~ .gl-fiada .gl-cartao:nth-child(3),
.gl-r:nth-of-type(4):focus-visible ~ .gl-fiada .gl-cartao:nth-child(4),
.gl-r:nth-of-type(5):focus-visible ~ .gl-fiada .gl-cartao:nth-child(5),
.gl-r:nth-of-type(6):focus-visible ~ .gl-fiada .gl-cartao:nth-child(6),
.gl-r:nth-of-type(7):focus-visible ~ .gl-fiada .gl-cartao:nth-child(7) {
  outline: 2px solid var(--c-teal-2);
  outline-offset: 2px;
}


/* ══ 5 · O HOVER — DEPOIS DA SELEÇÃO, E É POR ISSO QUE ELE MANDA ════════════
   O original abre no hover. Aqui as duas famílias empatam em especificidade, e
   quem vence é a ordem: por vir depois, o hover manda enquanto o cursor está em
   cima e a seleção volta a mandar quando ele sai.

   `:has()` no lugar de JS. Preso atrás de `(hover: hover) and (pointer: fine)`
   para não disparar em toque, onde não existe sair de cima. */
@media (hover: hover) and (pointer: fine) {

  .gl-fiada:has(.gl-cartao:nth-child(1):hover) .gl-cartao:nth-child(1),
  .gl-fiada:has(.gl-cartao:nth-child(2):hover) .gl-cartao:nth-child(2),
  .gl-fiada:has(.gl-cartao:nth-child(3):hover) .gl-cartao:nth-child(3),
  .gl-fiada:has(.gl-cartao:nth-child(4):hover) .gl-cartao:nth-child(4),
  .gl-fiada:has(.gl-cartao:nth-child(5):hover) .gl-cartao:nth-child(5),
  .gl-fiada:has(.gl-cartao:nth-child(6):hover) .gl-cartao:nth-child(6),
  .gl-fiada:has(.gl-cartao:nth-child(7):hover) .gl-cartao:nth-child(7) {
    border-color: color-mix(in srgb, var(--c-teal-2) 34%, transparent);
    flex-grow: 6.5;
  }

  .gl-fiada:has(.gl-cartao:nth-child(1):hover) .gl-cartao:nth-child(1) .gl-media,
  .gl-fiada:has(.gl-cartao:nth-child(2):hover) .gl-cartao:nth-child(2) .gl-media,
  .gl-fiada:has(.gl-cartao:nth-child(3):hover) .gl-cartao:nth-child(3) .gl-media,
  .gl-fiada:has(.gl-cartao:nth-child(4):hover) .gl-cartao:nth-child(4) .gl-media,
  .gl-fiada:has(.gl-cartao:nth-child(5):hover) .gl-cartao:nth-child(5) .gl-media,
  .gl-fiada:has(.gl-cartao:nth-child(6):hover) .gl-cartao:nth-child(6) .gl-media,
  .gl-fiada:has(.gl-cartao:nth-child(7):hover) .gl-cartao:nth-child(7) .gl-media { filter: none; }

  .gl-fiada:has(.gl-cartao:nth-child(1):hover) .gl-cartao:nth-child(1) .gl-media img,
  .gl-fiada:has(.gl-cartao:nth-child(2):hover) .gl-cartao:nth-child(2) .gl-media img,
  .gl-fiada:has(.gl-cartao:nth-child(3):hover) .gl-cartao:nth-child(3) .gl-media img,
  .gl-fiada:has(.gl-cartao:nth-child(4):hover) .gl-cartao:nth-child(4) .gl-media img,
  .gl-fiada:has(.gl-cartao:nth-child(5):hover) .gl-cartao:nth-child(5) .gl-media img,
  .gl-fiada:has(.gl-cartao:nth-child(6):hover) .gl-cartao:nth-child(6) .gl-media img,
  .gl-fiada:has(.gl-cartao:nth-child(7):hover) .gl-cartao:nth-child(7) .gl-media img {
    object-position: center;
    transform: scale(1);
  }

  .gl-fiada:has(.gl-cartao:nth-child(1):hover) .gl-cartao:nth-child(1) .gl-veu,
  .gl-fiada:has(.gl-cartao:nth-child(2):hover) .gl-cartao:nth-child(2) .gl-veu,
  .gl-fiada:has(.gl-cartao:nth-child(3):hover) .gl-cartao:nth-child(3) .gl-veu,
  .gl-fiada:has(.gl-cartao:nth-child(4):hover) .gl-cartao:nth-child(4) .gl-veu,
  .gl-fiada:has(.gl-cartao:nth-child(5):hover) .gl-cartao:nth-child(5) .gl-veu,
  .gl-fiada:has(.gl-cartao:nth-child(6):hover) .gl-cartao:nth-child(6) .gl-veu,
  .gl-fiada:has(.gl-cartao:nth-child(7):hover) .gl-cartao:nth-child(7) .gl-veu {
    background:
      linear-gradient(90deg,
        color-mix(in srgb, var(--d-piso) 94%, transparent)  0%,
        color-mix(in srgb, var(--d-piso) 88%, transparent) 32%,
        transparent 74%),
      linear-gradient(180deg, transparent 58%, color-mix(in srgb, var(--d-piso) 46%, transparent) 100%);
  }

  .gl-fiada:has(.gl-cartao:nth-child(1):hover) .gl-cartao:nth-child(1) .gl-vertical,
  .gl-fiada:has(.gl-cartao:nth-child(2):hover) .gl-cartao:nth-child(2) .gl-vertical,
  .gl-fiada:has(.gl-cartao:nth-child(3):hover) .gl-cartao:nth-child(3) .gl-vertical,
  .gl-fiada:has(.gl-cartao:nth-child(4):hover) .gl-cartao:nth-child(4) .gl-vertical,
  .gl-fiada:has(.gl-cartao:nth-child(5):hover) .gl-cartao:nth-child(5) .gl-vertical,
  .gl-fiada:has(.gl-cartao:nth-child(6):hover) .gl-cartao:nth-child(6) .gl-vertical,
  .gl-fiada:has(.gl-cartao:nth-child(7):hover) .gl-cartao:nth-child(7) .gl-vertical,
  .gl-fiada:has(.gl-cartao:nth-child(1):hover) .gl-cartao:nth-child(1) .gl-icone,
  .gl-fiada:has(.gl-cartao:nth-child(2):hover) .gl-cartao:nth-child(2) .gl-icone,
  .gl-fiada:has(.gl-cartao:nth-child(3):hover) .gl-cartao:nth-child(3) .gl-icone,
  .gl-fiada:has(.gl-cartao:nth-child(4):hover) .gl-cartao:nth-child(4) .gl-icone,
  .gl-fiada:has(.gl-cartao:nth-child(5):hover) .gl-cartao:nth-child(5) .gl-icone,
  .gl-fiada:has(.gl-cartao:nth-child(6):hover) .gl-cartao:nth-child(6) .gl-icone,
  .gl-fiada:has(.gl-cartao:nth-child(7):hover) .gl-cartao:nth-child(7) .gl-icone { opacity: 0; }

  .gl-fiada:has(.gl-cartao:nth-child(1):hover) .gl-cartao:nth-child(1) .gl-aberto,
  .gl-fiada:has(.gl-cartao:nth-child(2):hover) .gl-cartao:nth-child(2) .gl-aberto,
  .gl-fiada:has(.gl-cartao:nth-child(3):hover) .gl-cartao:nth-child(3) .gl-aberto,
  .gl-fiada:has(.gl-cartao:nth-child(4):hover) .gl-cartao:nth-child(4) .gl-aberto,
  .gl-fiada:has(.gl-cartao:nth-child(5):hover) .gl-cartao:nth-child(5) .gl-aberto,
  .gl-fiada:has(.gl-cartao:nth-child(6):hover) .gl-cartao:nth-child(6) .gl-aberto,
  .gl-fiada:has(.gl-cartao:nth-child(7):hover) .gl-cartao:nth-child(7) .gl-aberto {
    opacity: 1;
    transform: translateY(0);
    transition-delay: calc(var(--gl-dur) * .3);
  }

  /* enquanto o cursor está num cartão, os OUTROS voltam para fechado — inclusive
     o que estava selecionado. Sem estas o selecionado ficaria aberto junto com o
     que está sob o cursor, e a fiada teria dois abertos.

     ── E ERA ISSO QUE ACONTECIA. O bloco existia, escrito como
     `.gl-fiada:has(.gl-cartao:hover) .gl-cartao:not(:hover)`, e NUNCA venceu
     quem devia vencer. A conta:

       fechar (como estava)  .gl-fiada + :has(.gl-cartao:hover) + .gl-cartao
                             + :not(:hover)                        = (0,5,0)
       abrir por seleção     .gl-r + :nth-of-type + :checked + .gl-fiada
                             + .gl-cartao + :nth-child             = (0,6,0)

     `:has()` vale a especificidade do argumento mais específico, e o argumento
     aqui tem duas unidades contra as três de `:nth-of-type():checked`. Dá uma
     unidade de diferença, e a nota do cabeçalho do bloco 5 — «as duas famílias
     empatam em especificidade, e quem vence é a ordem» — valia para o cartão
     SOB o cursor, não para este seletor. Resultado medido a 1440: passar o
     mouse no terceiro cartão deixava o primeiro (o `checked`) aberto junto,
     dois `flex-grow: 6.5` na mesma fiada, 439px de cartão em vez de 631, 165px
     de coluna de texto — e a descrição por cima do link. O print do defeito é
     exatamente esta soma.

     `.gl-galeria:has(…) .gl-fiada` no lugar de `.gl-fiada:has(…)` acrescenta a
     unidade que faltava — (0,6,0), empate — e aí sim a ordem decide, que é o
     que o bloco sempre quis dizer. Não é maquiagem de especificidade: a galeria
     é o escopo real do estado «algum cartão está sob o cursor», e a fiada é o
     caminho até quem responde. Nos descendentes o empate se repete em (0,7,0)
     e em (0,7,1) contra as regras de parallax, que também passam a perder —
     e devem perder: cartão fechado não desliza. */
  .gl-galeria:has(.gl-cartao:hover) .gl-fiada .gl-cartao:not(:hover) {
    border-color: var(--gl-borda);
    flex-grow: 1;
  }
  .gl-galeria:has(.gl-cartao:hover) .gl-fiada .gl-cartao:not(:hover) .gl-media     { filter: saturate(.5) brightness(.66); }
  .gl-galeria:has(.gl-cartao:hover) .gl-fiada .gl-cartao:not(:hover) .gl-media img { transform: scale(1.12); }
  .gl-galeria:has(.gl-cartao:hover) .gl-fiada .gl-cartao:not(:hover) .gl-veu       {
    background:
      linear-gradient(180deg, transparent 34%, color-mix(in srgb, var(--d-piso) 92%, transparent) 100%),
      color-mix(in srgb, var(--d-piso) 38%, transparent);
  }
  .gl-galeria:has(.gl-cartao:hover) .gl-fiada .gl-cartao:not(:hover) .gl-vertical,
  .gl-galeria:has(.gl-cartao:hover) .gl-fiada .gl-cartao:not(:hover) .gl-icone     { opacity: 1; }
  .gl-galeria:has(.gl-cartao:hover) .gl-fiada .gl-cartao:not(:hover) .gl-aberto    {
    opacity: 0;
    transform: translateY(10px);
    transition-delay: 0s;
  }
}


/* ══ 6 · AS PLACAS DO PÉ ════════════════════════════════════════════════════ */
.gl-placas {
  display: grid;
  gap: var(--e-5);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: var(--e-8) 0 0;
  padding: 0;
}

.gl-placa {
  border-block-start: 1px solid var(--gl-borda);
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  padding-block-start: var(--e-4);
}

.gl-placa-rot {
  color: var(--c-teal-2);
  font-family: var(--f-rotulo);
  font-size: var(--t-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.gl-placa-tit { font-size: var(--t-sm); font-weight: 600; letter-spacing: -.012em; }

.gl-placa-frase {
  color: color-mix(in srgb, var(--d-ink) 66%, transparent);
  font-size: var(--t-xs);
  line-height: var(--r-nota);
}


/* ══ 7 · OS BREAKPOINTS ═════════════════════════════════════════════════════
   Abaixo de 880 o acordeão horizontal morre: sete cartões numa fileira dariam
   ~110px cada, e um cartão de 110 × 384 não abre para nada legível. A fiada vira
   coluna e o acordeão passa a ser VERTICAL — mesma mecânica, `flex-grow`
   continua sendo o motor —, o nome do cartão fechado deita, e o ícone vai para
   a ponta oposta da mesma linha. */
@media (max-width: 880px) {
  .gl-fiada {
    flex-direction: column;
    height: auto;
  }

  .gl-cartao { min-height: 5.5rem; }

  .gl-r:nth-of-type(1):checked ~ .gl-fiada .gl-cartao:nth-child(1),
  .gl-r:nth-of-type(2):checked ~ .gl-fiada .gl-cartao:nth-child(2),
  .gl-r:nth-of-type(3):checked ~ .gl-fiada .gl-cartao:nth-child(3),
  .gl-r:nth-of-type(4):checked ~ .gl-fiada .gl-cartao:nth-child(4),
  .gl-r:nth-of-type(5):checked ~ .gl-fiada .gl-cartao:nth-child(5),
  .gl-r:nth-of-type(6):checked ~ .gl-fiada .gl-cartao:nth-child(6),
  .gl-r:nth-of-type(7):checked ~ .gl-fiada .gl-cartao:nth-child(7) {
    flex-grow: 0;
    min-height: 23rem;
  }

  /* Na coluna não há recorte lateral, então não há o que deslizar: a imagem
     assenta e fica. O `scale` sai junto — ampliar sem deslocar só perderia
     nitidez.

     `!important` E NÃO UM SELETOR MAIS LONGO, e a razão é medida: as regras de
     parallax lá em cima são `(0,7,1)` e `@media` não soma especificidade
     nenhuma. Bater aquilo aqui exigiria repetir as doze linhas de `:checked ~ …`
     dentro de cada breakpoint. Medido antes desta linha: a imagem continuava
     deslocada ±28px na vertical, onde o deslocamento não tem função. */
  .gl-media img { transform: none !important; }

  /* o nome deita e o ícone vai para a ponta oposta: numa faixa de 88px de altura
     a vertical não tem para onde subir. */
  .gl-vertical {
    bottom: auto;
    inset-inline-start: var(--e-5);
    left: auto;
    top: 50%;
    transform: translateY(-50%);
    writing-mode: horizontal-tb;
  }

  .gl-icone {
    bottom: auto;
    inset-inline-end: var(--e-5);
    left: auto;
    top: 50%;
    transform: translateY(-50%);
  }

  /* o texto volta a atravessar o cartão: numa coluna estreita não sobra largura
     para a foto respirar ao lado. Com isso o véu do aberto volta a ser vertical
     — e aqui isso vale para QUALQUER largura de cartão, inclusive os 830px que
     ele tem a 880 de janela, onde o `@container` de 560 do bloco 3-B não
     alcança. Uma declaração no lugar das sete linhas de `:checked ~ … .gl-veu`
     que estavam no fim deste bloco, e que só pegavam o cartão selecionado. */
  .gl-galeria {
    --gl-col: 100%;
    --gl-veu-aberto:
      linear-gradient(180deg,
        color-mix(in srgb, var(--d-piso) 92%, transparent)  0%,
        color-mix(in srgb, var(--d-piso) 78%, transparent) 46%,
        color-mix(in srgb, var(--d-piso) 88%, transparent) 100%);
  }
  .gl-aberto { padding: var(--e-5); width: 100%; }
  .gl-meio   { gap: var(--e-4); }

  /* AQUI O CARTÃO NÃO É MAIS A MEDIDA. Na coluna ele ocupa a largura inteira, e
     uma tipografia em `cqi` passaria a crescer com a JANELA por tabela — 38px de
     título a 880, contra os 26,5 desta faixa. Volta a régua de `vw`, que é a
     certa quando o cartão e o quadro têm a mesma largura, e é a que já estava
     medida e conferida em 390, 560 e 880. */
  .gl-nome  { font-size: clamp(1.5rem, 2.1vw + .5rem, 2.375rem); }
  .gl-linha { font-size: clamp(.9375rem, .4vw + .82rem, 1.0625rem); }

  /* As sete linhas de `:checked ~ … .gl-veu` que moravam aqui — só para trocar a
     rampa horizontal pela deitada — saíram. O `@container` do bloco 3-B faz a
     mesma troca, e faz melhor: pega também o cartão sob o ponteiro, que esta
     lista não pegava (era só `:checked`), e o cartão em coluna tem largura de
     janela inteira, então cai no mesmo ramo por definição. */

  .gl-placas { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .gl-aberto { padding: var(--e-4); }
  .gl-nome   { font-size: 1.5rem; }
}


/* ══ 8 · MOVIMENTO REDUZIDO — O ÚLTIMO DO ARQUIVO ═══════════════════════════
   Depois de tudo, sem exceção: `@media` não soma especificidade e estas regras
   empatam com as de `:checked` e as de `:has()` acima — só vencem por vir por
   último.

   A SELEÇÃO CONTINUA FUNCIONANDO: o que sai é a coreografia, não o mecanismo.
   O cartão escolhido ainda cresce e abre; deixa de deslizar e de escalonar. */
@media (prefers-reduced-motion: reduce) {
  .gl-cartao,
  .gl-media,
  .gl-media img,
  .gl-veu,
  .gl-vertical,
  .gl-icone,
  .gl-aberto,
  .gl-ir,
  .gl-seta { transition: none; }

  .gl-media img { transform: none !important; }
  .gl-aberto    { transform: none !important; transition-delay: 0s !important; }
}


/* ────────────────────────────────────────────────────────────────────────────
   C · BANDAS 07 A e B — o Plantel Med
   ──────────────────────────────────────────────────────────────────────────── */


/* ════════════════════════════════════════════════════════════════════════════
   SOMA · banda-plantel.css — as bandas A e B, o Plantel Med

   A: o herói. Marca d'água, painel do produto, os seis papéis.
   B: a semana de escala. Texto, a grade com a vaga, a régua 01·02·03.

   ENTRA DEPOIS de `_fundacao.css` e depois de `page-home.css`. Este arquivo não
   redeclara nada da fundação: consome `.soma-fio`, `.bd-marca`, `.bd-vidro`,
   `.bd-pilula`, `.bd-num` e `.bd-entra`, e só toca nelas por variável. Nenhuma
   regra daqui declara `animation` num seletor da fundação — se declarasse, o
   bloco final de `prefers-reduced-motion` dela, que vence por ordem, passaria a
   perder para este arquivo.

   REAPROVEITA DE `page-home.css`, e de propósito:
     `.plantel-foto`  a máquina `--cena-mascara` do bloco 2. É a única
                      declaração dela no projeto; reescrevê-la aqui seria o
                      quinto dialeto da mesma curva. Na montagem, a regra de
                      LAYOUT da `.plantel-foto` foi apagada e a classe ficou só
                      na lista da máquina — que é o único motivo de ela existir
                      no `.pl-gestor`.
     `.pm-grade` · `.pm-tabela` · `.pm-legenda` · `.pm-vaga` · `.pm-grade-nota`
                      a grade da escala, que já existia e está certa.

   Zero cor literal — só `color-mix()` sobre token, e as palavras-chave de
   sistema dentro de `forced-colors`, que é o jeito prescrito.
   Zero `!important` novo. (A regra `.pm-vaga` da casa já tem um em
   `border-color`; ele continua ganhando de tudo, e por isso a cor da borda da
   vaga não é discutida aqui.)
   ════════════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════════════
   0 · AS DUAS BANDAS — o palco

   O `<svg>` do fio é `position: absolute; inset: 0`, então quem o hospeda tem
   de ser `relative` — `.home-sec` já é. O que falta é o `z-index` do conteúdo:
   sem ele o fio e a marca d'água ficam na mesma camada do texto e a ordem passa
   a depender da ordem no HTML, que é o tipo de acerto que se desfaz sozinho.
   ════════════════════════════════════════════════════════════════════════════ */

.pl-wrap,
.ps-wrap {
  position: relative;
  z-index: 1;
}

/* A marca d'água nasce no alto da banda por padrão (`--bd-marca-y: -4%`), e ali
   ela flutuaria ACIMA do painel, sem nada na frente para dar escala — que é a
   única razão de ela existir. Descida para 12%, a palavra passa por trás do
   terço superior do painel: é a sobreposição que faz o painel ler como grande.
   Medido a 1440: o topo dela cai a 118px do topo da banda, e o painel começa a
   176px. */
.bd-plantel .bd-marca { --bd-marca-y: 12%; }


/* ════════════════════════════════════════════════════════════════════════════
   1 · BANDA A — A CENA

   Duas colunas, e a da esquerda é a menor de propósito: o argumento desta banda
   é a tela do produto, não o parágrafo. 0,92fr contra 1,08fr dá 46/54 depois do
   vão — a foto ganha 8 pontos sem que a coluna de texto caia abaixo dos 46
   caracteres de medida.
   ════════════════════════════════════════════════════════════════════════════ */

.pl-cena {
  align-items: center;
  display: grid;
  gap: clamp(var(--e-6), 4.5vw, var(--e-9));
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
}

.pl-texto h2 {
  font-size: var(--t-2xl);
  font-weight: 500;
  letter-spacing: -0.028em;
  line-height: 1.1;
  margin-top: var(--e-4);
}
.pl-texto .lead { margin-top: var(--e-5); }

.pl-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  margin-top: var(--e-7);
}


/* ── O PALCO ─────────────────────────────────────────────────────────────────
   Dois objetos e duas camadas de luz. A ordem no HTML é a ordem da
   profundidade, e é ela que o `.bd-entra` do contêiner transforma em sequência:
   o PAINEL está atrás e assenta primeiro, o MÉDICO está na frente e assenta
   4,5% de rolagem depois. É o que a palavra "assentar" quer dizer — a pilha se
   monta do fundo para a frente, não do topo para baixo.

   A ORDEM ERA A INVERSA, e trocá-la foi o gesto que mudou a cena. O recorte do
   gestor vinha primeiro e ficava ATRÁS do painel: uma silhueta pequena espiando
   por baixo de uma tela — quem manda na banda era o software, e a pessoa era
   rodapé dele. Invertida, a banda passa a dizer o que o produto de fato diz: o
   médico na frente, a escala atrás dele. E como o `:nth-child` do `.bd-entra` lê
   a posição no DOM, a troca de camada e a troca de tempo acontecem na mesma
   linha — não há um segundo lugar para sair de sincronia. */
.pl-palco {
  position: relative;
}

/* A POÇA. Sem ela o painel FLUTUA: é um objeto recortado, com brilho próprio,
   pousado sobre um campo que não tem nada por baixo dele. A poça não ilumina o
   painel — ela dá chão a ele, e por isso o centro dela fica abaixo do meio da
   peça, e não atrás dela.

   ELA ANDOU PARA A ESQUERDA E ACOMPANHOU A SUBIDA — de 52%/72% para 44%/70%.
   Com o médico no primeiro plano, o chão da cena deixou de ser o pé do painel e
   passou a ser o pé DELE; e quando ele subiu para a altura da tabela, o pé dele
   subiu junto. Poça centrada onde não há mais nada pousado é luz sem objeto —
   valia quando ela estava atrás do painel e voltou a valer 145px mais abaixo.

   Ela é pseudo-elemento e não filho, e isso não é economia de marcação: filho
   entraria na conta do `:nth-child` do `.bd-entra` e a poça assentaria junto com
   o painel. Chão que chega depois do objeto não é chão. */
/* Vazava 7,8% da altura pela BASE e 3,2% da largura pela ESQUERDA, com 3,6% de
   alfa no corte — ~4 níveis. Mesma correção: folga no `inset`, raio e centro
   reescalados pelo inverso, halo idêntico em pixel (centro 0,804 da altura do
   palco abaixo do topo dele, raio 0,607; antes e depois). */
.pl-palco::before {
  background: radial-gradient(57.05% 42.17% at 46.75% 64.17%,
    color-mix(in srgb, var(--c-teal) 19%, transparent) 0%,
    color-mix(in srgb, var(--c-teal-d) 9%, transparent) 46%,
    transparent 78%);
  content: '';
  inset: -12% -8% -32% -14%;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

/* A SOMBRA DE CONTATO — a segunda camada, e a que faz o primeiro plano existir.
   Duas peças que se sobrepõem sem nada entre elas leem como adesivo colado em
   cartaz: o olho recebe "uma na frente da outra" pela ordem de pintura e nada
   mais. O que separa plano de plano na fotografia é a QUEDA DE LUZ atrás do
   objeto da frente — e é isso aqui: uma mancha funda, no tom do piso, sob e
   atrás do recorte, exatamente onde ele cobre o painel.

   Ela fica ENTRE os dois — `z-index: 3`, acima do painel e abaixo do recorte — e
   é deliberadamente maior e mais macia que a silhueta: sombra com borda legível é
   a mesma coisa que borda. E é `::after` e não filho pela mesma razão da poça —
   `:nth-child` do `.bd-entra`.

   O CENTRO DELA É A ÁREA DE SOBREPOSIÇÃO, e é por isso que se moveu três vezes:
   40%/74% quando ele estava no pé do painel, 30%/52% quando subiu para a altura
   da tabela, 27%/44% quando o painel recuou 8% e a área de encontro andou junto.
   Ela não segue o corpo: segue o lugar onde o corpo TAPA o painel. Sombra fora
   da área de contato é mancha.

   E ELA CLAREOU — de 82%/52% para 66%/40%. Era a única camada entre os dois
   planos e carregava sozinha o trabalho de separá-los; agora divide o serviço com
   a névoa aérea do painel, com o foco e com a sombra projetada do recorte. Quatro
   camadas escuras somadas na mesma área não dão mais profundidade: dão um buraco.

   O tom sai de `--d-piso` e não de preto: preto sobre o campo navy suja para o
   cinza, e o que se quer é o campo ficando mais fundo, não perdendo a cor. */
/* Vazava 2,2% da largura pela ESQUERDA. É a mais fraca das três — o corte tem
   6% de alfa de `--d-piso`, que é a própria cor do campo, então sobre navy é
   invisível e só aparece onde o campo está aceso (~2 níveis). Corrigida junto
   por consistência: sombra é da peça, não da caixa. */
.pl-palco::after {
  background: radial-gradient(36.13% 40% at 30.59% 44%,
    color-mix(in srgb, var(--d-piso) 66%, transparent) 0%,
    color-mix(in srgb, var(--d-piso) 40%, transparent) 42%,
    transparent 76%);
  content: '';
  inset: -6% -8% -22% -14%;
  pointer-events: none;
  position: absolute;
  z-index: 3;
}

/* ── O MÉDICO ────────────────────────────────────────────────────────────────
   Ele olha para a direita, e é por isso que fica à esquerda: o recorte já traz
   a direção do olhar, e virá-lo de costas para o painel seria desmontar a única
   coisa que a fotografia diz.

   ELE É O PRIMEIRO PLANO. Estava atrás do painel e a 62% do palco: uma silhueta
   de ~110px de largura visível, que a esta distância não é uma pessoa — é uma
   mancha escura no pé de uma tela. A cena dizia "um software, e alguém ao
   fundo". Agora diz o que o produto diz: alguém na frente, e a escala atrás.

   O QUADRO PASSOU A SER RECORTADO, e essa é a mudança que carrega todas as
   outras. O arquivo é 1440×960 e a pessoa ocupa dele uma faixa estreita — do
   x=6% ao x=56%, com o resto da direita vazio e a MESA atravessando os 19% de
   baixo. Ampliar pela largura da caixa ampliava o vazio e a mesa junto: para
   dobrar a pessoa era preciso uma caixa de ~1370px, quatro vezes o palco, e a
   máquina de máscara — que sempre dissolve da parada até o PÉ DA CAIXA — passava
   a derramar a rampa por cima da mesa dos seis papéis, 300px abaixo.

   Com `object-fit: cover` a caixa deixa de ser a moldura do arquivo e passa a
   ser a moldura da CENA: eu escolho a faixa que aparece (`object-position`) e a
   máscara volta a ramper exatamente sobre o que se vê. A pessoa vai de ~110×160
   para ~310×330 — quase três vezes em cada eixo — sem que a caixa saia do palco.

   A classe `.plantel-foto` está aqui pela MÁQUINA DE MÁSCARA, não pelo layout —
   `--cena-mascara` é a única rampa smoothstep do projeto, e a spec proíbe
   redesenhá-la. O que vem junto com a classe e não serve, sai logo abaixo, com a
   especificidade de duas classes para não depender da ordem dos arquivos.

   OS QUATRO PARÂMETROS, relidos para o quadro novo:
     topo  0% — continua sem corte no alto, e o recorte não mudou isso: o `cover`
                ajusta pela ALTURA, mostra o arquivo inteiro de cima a baixo, e a
                coroa da cabeça encosta na borda de cima do arquivo como sempre
                encostou. O que existe ali é silhueta de cabelo contra o
                transparente, e dissolver silhueta é apagar o recorte. Medido: os
                4% que esta linha chegou a ter são 17px de rampa sobre uma cabeça
                que começa a 13px — o alto do cabelo saía a 75% de opacidade.
     pé   62% — a mesa entra a 81% do quadro. A rampa começa antes dela e leva o
                torso, a mesa e a cadeira para o campo num caminho só: a figura
                não termina, ela se apaga. É o que a poça embaixo espera receber.
     esq  14% — o braço esquerdo sai pela borda da faixa recortada; sem a rampa
                ali ele terminaria em corte reto no meio do movimento.
     dir 100% — à direita não há nada: o recorte já acaba antes da moldura. */
.pl-gestor.plantel-foto {
  --cena-topo: 0%;
  --cena-pe: 62%;
  --cena-esq: 14%;
  --cena-dir: 100%;
  /* A PROPORÇÃO É DA CENA, NÃO DO ARQUIVO. `auto` devolvia os 3:2 do quadro
     inteiro — deitado, que é a proporção de uma paisagem e não a de uma pessoa
     sentada. 7/8 é o retrato em pé que o `cover` recorta de dentro dele. */
  aspect-ratio: 7 / 8;
  /* A ALTURA É A DA TABELA, e não a do pé do palco.
     Ancorado em -28% ele nascia pela borda de baixo da banda e subia até onde
     coubesse: a cabeça caía a 41% da altura do painel, quer dizer, no MEIO da
     grade. Ele lia como alguém passando na frente da tela — atravessando o dado
     que a banda existe para mostrar.

     Medido no ativo do painel, por densidade de célula colorida: a grade ocupa
     de 18% a 64% da altura da imagem, com o corpo da tabela entre 30% e 63%. A
     coroa da cabeça pousa ~32px abaixo da borda de cima do painel — a linha de
     ombro passa a correr junto com as primeiras fileiras, e a grade inteira fica
     à direita dele, em vez de atrás. É a diferença entre alguém NA FRENTE da
     tela e alguém DIANTE dela.

     O NÚMERO É −4% E JÁ FOI 3%, e a diferença não é gosto. Esta âncora conta a
     partir do PÉ DO PALCO, e o palco encolheu quando o painel recuou 8% para
     abrir profundidade: a mesma porcentagem passou a entregar uma altura 32px
     mais alta, e a cabeça subiu sozinha até encostar na borda de cima do painel.
     −4% devolve a altura que a cena tinha — a que foi aprovada. É o preço de
     ancorar pelo pé, e o registro está aqui para que a próxima mudança de
     tamanho do painel não custe a mesma tarde. */
  inset-block-end: -4%;
  inset-inline-start: -9%;
  margin: 0;                    /* anula o sangramento de goteira do retângulo */
  position: absolute;
  width: 56%;
  /* Acima da sombra de contato (3), que por sua vez está acima do painel (2).
     Os três números juntos são a profundidade da cena, e é de propósito que
     estejam em três linhas seguidas no mesmo arquivo. */
  z-index: 4;
}
/* O GRÃO SAI, pelo mesmo motivo da `.sv-foto` e pelo mesmo da `.bde-retrato`,
   que nunca entrou na lista: `.plantel-foto::after` pinta a trama sobre a CAIXA
   da figura, e este ativo é recorte com alfa. Numa chapa a caixa e a foto são a
   mesma coisa; aqui não são. E os dois botões desta peça pioram o desenho: com
   `--cena-topo: 0%` e `--cena-dir: 100%` a caixa não dissolve em dois lados, e
   sobrariam duas retas de textura sobre o campo — a moldura que o recorte
   existe justamente para não ter. Três peças de recorte, três vezes a mesma
   pergunta, agora com a mesma resposta. */
.pl-gestor.plantel-foto::after { content: none; }

/* O RECORTE DENTRO DA CAIXA.
   `height: 100%` e não `auto`: com `auto` a imagem define a altura e o
   `aspect-ratio` da caixa não tem o que governar — `cover` só recorta quando a
   caixa tem as duas medidas.

   `object-position: 12% 50%`. Com a caixa em 7/8 e o arquivo em 3/2, o `cover`
   ajusta pela ALTURA — mostra o quadro inteiro de cima a baixo e sobra largura
   para cortar. 12% escolhe onde esse corte cai: a faixa que aparece vai do x=5%
   ao x=63% do arquivo, e ela contém a pessoa inteira, dos 6% do braço aos 56% do
   ombro direito, com folga dos dois lados para as rampas trabalharem. Empurrar
   para 0% traria moldura vazia à esquerda; para 25%, cortaria o braço.

   A LUZ, em duas sombras que seguem o ALFA e não a caixa — que é a única coisa
   que `drop-shadow` faz e `box-shadow` não. A primeira é a queda do corpo sobre
   o que está atrás: deslocada para baixo e para a esquerda, no tom do piso,
   larga o bastante para não ter borda. A segunda é o contraluz da tela que ele
   está olhando — teal, curta, deslocada para a direita, do lado de onde a luz da
   cena de fato vem. Sem ela o recorte é uma silhueta chapada colada no campo;
   com ela o painel ilumina alguém.

   A SOMBRA ANDOU PARA LONGE, de −10px/16px para −26px/30px, e o borrão de 26
   para 46. É a pista de distância mais literal que existe: sombra colada no
   objeto diz que ele ENCOSTA na superfície; sombra deslocada e macia diz que há
   ar entre os dois. Era ela, mais que o desenho, que dizia "o rosto está na
   tela" — a queda do corpo caía dentro da própria silhueta.

   O CONTRALUZ NÃO SOBE, e é `--cena-topo: 0%` que decide isso. A máscara recorta
   na caixa de borda: com o alto do quadro sem rampa, qualquer deslocamento para
   cima põe halo em cima de uma reta e o corta ali. Zero em Y é o único
   deslocamento que a caixa comporta — e é também o certo, porque a tela que o
   ilumina está ao lado dele, não acima.

   As duas são estáticas: `filter` não entra na lista do que anda por quadro
   nesta página, e este elemento é filho de um `.bd-entra` que já move `transform`
   e `opacity`. */
.pl-gestor img {
  display: block;
  filter:
    drop-shadow(-26px 30px 46px color-mix(in srgb, var(--d-piso) 78%, transparent))
    drop-shadow(10px 0 16px color-mix(in srgb, var(--c-teal) 26%, transparent));
  height: 100%;
  object-fit: cover;
  object-position: 12% 50%;
  width: 100%;
}

/* ── O PAINEL ───────────────────────────────────────────────────────────────
   Sem moldura, sem raio e sem sombra: o ativo já vem recortado, em perspectiva
   e com o brilho próprio da tela. Uma caixa em volta de um objeto que já é um
   objeto o transformaria em figura dentro de quadro — duas molduras.

   ELE RECUOU 8%, E ISSO É PROFUNDIDADE E NÃO LAYOUT.
   Com o médico à altura da tabela, os dois planos encostavam: o rosto dele caía
   a poucos pixels das células, e o olho fundia as duas peças numa só — "o rosto
   colado na tela". Empurrar o recorte para a esquerda não resolvia, porque à
   esquerda dele está a coluna de texto: medido a 1440, a tinta do braço começa
   em x=652 e o parágrafo termina em x=631. Havia 12px de folga, e 12px não são
   uma distância.

   Quem cede é o painel. `margin-inline-start: 8%` tira 53px da borda ESQUERDA
   dele — a borda que estava encostada —, e as células que ficavam junto do rosto
   recuam essa distância inteira. E o efeito colateral é a própria intenção: o
   painel fica 8% menor. Objeto que diminui é objeto que se afasta. As quatro
   pistas desta cena passam a dizer a mesma coisa — mais longe é MENOR (aqui),
   MAIS MACIO (o foco abaixo), MAIS LAVADO (a névoa) e com a SOMBRA DO OUTRO
   longe de si (o deslocamento no recorte). Uma pista sozinha é truque; quatro
   concordando é profundidade. */
.pl-painel {
  margin: 0 0 0 8%;
  position: relative;
  z-index: 2;
}

/* O FOCO. A câmera está no médico, e o que está atrás dele sai do plano focal —
   é a pista mais forte que existe para separar dois planos, e a única que o olho
   não consegue racionalizar.

   0,7px e não mais: medido na exibição a 1440, o painel entrega 604px de largura
   para um ativo cuja menor tipografia já está no limite da legibilidade. O que
   0,7px tiram é o FIO da célula e o contraste de pixel único — exatamente o que
   fazia a grade competir de igual para igual com a pele do rosto ao lado dela. A
   leitura da peça não muda: continua se lendo a semana, as faixas de horário, a
   vaga acesa e o cartão de troca, que é o que a legenda promete.

   A dessaturação e a queda de brilho vêm junto porque distância não tira só
   nitidez: tira contraste e saturação. Só o desfoque deixaria um objeto borrado
   e ainda assim vibrante — que é o desfoque de lente, não o de distância. */
.pl-painel img {
  display: block;
  filter: blur(.7px) saturate(.9) brightness(.93) contrast(.96);
  height: auto;
  width: 100%;
}

/* ── A NÉVOA AÉREA ──────────────────────────────────────────────────────────
   A quarta pista, e a que o campo escuro pedia. Perspectiva aérea é o ar entre
   você e o objeto: quanto mais ar, mais o objeto tende à cor do AMBIENTE. Num
   dia claro isso é o azul do céu lavando a montanha; aqui é o navy do campo
   lavando a tela.

   POR ISSO ELA É `--d-campo` E NÃO `--d-piso`. O piso é quase preto: um véu
   dele escurece a peça, e escurecer não é afastar — é apagar. O campo é o navy
   que a página inteira respira, e é o valor para o qual tudo que está longe
   converge nesta cena.

   ELA É DENSA ONDE ELE ESTÁ. O centro cai em 22%/46% — o terço superior
   esquerdo do painel, que é a área que o recorte cobre e margeia. Névoa uniforme
   sobre a peça inteira só a deixaria opaca; concentrada na zona de encontro, ela
   abre a distância exatamente onde os dois planos se tocavam, e some antes da
   coluna de Atividades, que continua com o contraste cheio.

   Mora no `::before` do próprio painel, e não no palco, porque é atmosfera DELE:
   posicionada, ela pinta depois da imagem e antes de qualquer coisa do palco. E
   como o `figcaption` fica fora do alcance do degradê, a legenda não é velada. */
/* O halo vazava 25,4% da largura pela ESQUERDA e `background` recorta na
   border-box — aresta vertical de ~6 níveis, com 40% de alfa ainda vivo no
   corte. `inset` ganha folga à esquerda e o raio/centro são reescalados pelo
   inverso, então o halo fica idêntico em pixel: centro absoluto 0,22 da largura
   da figura e raio 0,64, antes e depois. Confere: 40 − 0,74×49,23 = 3,6% da
   caixa, dentro. */
.pl-painel::before {
  background: radial-gradient(49.23% 58% at 40% 46%,
    color-mix(in srgb, var(--d-campo) 62%, transparent) 0%,
    color-mix(in srgb, var(--d-campo) 34%, transparent) 44%,
    transparent 74%);
  content: '';
  inset: 0 0 0 -30%;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

/* A nota existe por honestidade e não por estética: a tela do produto traz
   nomes, datas e quatro indicadores dentro da imagem. Nenhum deles é dado de
   cliente, e a página não pode deixar dúvida sobre isso — é a mesma regra da
   legenda "Exemplo ilustrativo" que a grade já usava.

   `--d-ink-3` e não `--d-ink-4`: medido sobre o campo, o de 32% dá 2,8:1 e
   reprova; o de 55% dá 5,7:1.

   ALINHADA À DIREITA, e isto é medida e não gosto: alinhada ao início ela
   começa em x=586 do sistema do fio, e o recorte do gestor vai até x=835 — a
   legenda cairia em cima do ombro dele.

   «ONDE NÃO HÁ MAIS NINGUÉM» VALE ATÉ ~1250, E NÃO EM TODA LARGURA. O corpo da
   legenda é fixo em 10,5px e a caixa encolhe com a janela: a corrida de glifos
   mede sempre 386px, e abaixo de certo ponto ela deixa de caber na folga. Quem
   resolve é a medida da legenda, no bloco de faixa depois do de 900. */
.pl-painel-nota {
  color: var(--d-ink-3);
  font-family: var(--f-rotulo);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1.5;
  margin-top: var(--e-4);
  text-align: end;
  text-transform: uppercase;
}


/* ── OS SEIS PAPÉIS ─────────────────────────────────────────────────────────
   Entram no lugar dos três números sem fonte que a seção trazia. Não é troca de
   decoração: número sem fonte é afirmação que ninguém pode conferir, e os seis
   papéis são a coisa mais verificável que este produto tem — estão no
   `CLAUDE.md`, §4, e qualquer pessoa que abra o Plantel Med os encontra na tela.

   TRÊS COLUNAS FIXAS, e não `auto-fit`. A régua da fundação usa `auto-fit`
   porque uma sequência pode ter três ou quatro degraus. Aqui são seis, sempre,
   e seis em quatro colunas deixam dois órfãos na segunda fileira. A peça inteira
   existe para dizer que os seis estão na MESMA mesa: 3×2 é um retângulo, 4+2 é
   um resto. */
/* O respiro antes da mesa é 9vw e não 7: os 99px que 7vw davam a 1425
   deixavam a faixa livre entre a fileira de botões e o filete com 54 unidades
   do sistema do fio, e o traçado precisa de 68 para correr ali sem encostar em
   nada. O ar a mais também é o que separa o herói da mesa — sem ele os seis
   papéis leem como continuação do parágrafo. */
.pl-papeis {
  border-block-start: 1px solid var(--d-line);
  margin-block-start: clamp(var(--e-8), 9vw, var(--e-10));
  padding-block-start: var(--e-7);
}
/* O ESPACEJAMENTO SAI DAQUI. Ele valia 0,14em porque este `<h3>` era uma
   `.bd-pilula`; virou `.eyebrow`, e a sobrancelha da casa anda em 0,22em. As
   duas regras empatam em (0,1,0) e esta vem depois de `styles.css` — deixar a
   linha de pé seria manter a cápsula vestindo a sobrancelha. Fica só a margem,
   que é desta banda e não do componente. */
.pl-papeis-rot { margin: 0 0 var(--e-6); }
.pl-papeis-lista {
  display: grid;
  gap: var(--e-6) clamp(var(--e-5), 3vw, var(--e-8));
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
}

/* O FILETE É VERTICAL, e o da régua 01·02·03 é horizontal. É a mesma gramática
   girada, e a diferença carrega significado: a régua numera uma SEQUÊNCIA — um
   passo depois do outro, filete por cima de cada degrau. Aqui não há ordem
   nenhuma; são seis lugares lado a lado, e o filete que os separa tem de ser o
   que separa colunas, não o que marca etapas.

   O tique de teal cheio nos primeiros 20px e a rampa até 30px são os mesmos
   números do `.bd-num` da fundação, no eixo trocado: a rampa existe para o
   encontro de duas cores dentro de uma linha de 1px não virar degrau de alfa.
   Estavam em 18 e 26 — 10% mais curtos —, e o tique é justamente a assinatura
   que amarra esta mesa à régua 01·02·03 uma seção abaixo. Duas medidas para a
   mesma marca é a marca deixando de ser uma. */
.pl-papeis-lista > div {
  background-image: linear-gradient(180deg,
    var(--c-teal) 0 20px,
    var(--d-line) 30px);
  background-repeat: no-repeat;
  background-size: 1px 100%;
  padding-inline-start: var(--e-4);
}
.pl-papeis-lista dt {
  color: var(--d-ink);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.pl-papeis-lista dd {
  color: var(--d-ink-3);
  font-size: var(--t-xs);
  line-height: 1.55;
  margin: var(--e-2) 0 0;
  max-width: 34ch;
}


/* ════════════════════════════════════════════════════════════════════════════
   2 · BANDA B — A SEMANA DE ESCALA

   0,74fr contra 1,26fr, e o ponto de quebra a 1320, e os dois números são
   consequência de uma medida só: com os nomes proibidos de quebrar em duas
   linhas, a grade de sete dias mede 632px de largura de conteúdo. 1,26fr
   entrega 652px de área útil a 1321 de janela, 675 a 1366 e 712 a 1440. Abaixo
   de 1321 a coluna deixaria de caber, e em vez de rolar lateralmente numa tela
   larga a banda passa a coluna única, onde a grade tem a página inteira — 1084px
   de área útil a 1280, contra os 632 de que precisa.

   É por isso que esta banda quebra antes da banda A, que quebra a 900: o que
   decide aqui não é a medida do texto, é a largura de uma tabela.
   ════════════════════════════════════════════════════════════════════════════ */

/* CENTRADA NA VERTICAL, e não alinhada pelo topo. Medido a 1425: a coluna de
   texto tem 870px e o cartão da grade tem 490 — alinhados pelo topo, sobram 380
   de nada embaixo da grade, e vazio embaixo de uma tabela lê como peça que não
   terminou de carregar. Centrado, o mesmo vazio se parte em duas folgas iguais
   em volta do cartão, e folga simétrica lê como ar. */
.ps-cena {
  align-items: center;
  display: grid;
  gap: clamp(var(--e-6), 4vw, var(--e-8));
  grid-template-columns: minmax(0, 0.74fr) minmax(0, 1.26fr);
}

.ps-texto h2 {
  font-size: var(--t-2xl);
  font-weight: 500;
  letter-spacing: -0.028em;
  line-height: 1.1;
  margin-top: var(--e-4);
}
.ps-texto .lead { margin-top: var(--e-5); }

/* OS TRÊS ITENS SÃO TIPOGRÁFICOS, sem ícone. O banco da casa
   (`assets/icons/`) é clínico — especialidades e órgãos —, e não tem ícone
   honesto para "cobertura", "regras" ou "comunicação". Desenhar três é
   exatamente o que a régua desta entrega reprova, e ícone genérico de biblioteca
   externa está proibido pelo `CLAUDE.md` §6. Sobra a tipografia, que aqui basta.

   O filete fica ENTRE os itens e não em cada um: três coisas com filete próprio
   leem como três cartões; com filete entre elas, leem como uma lista — que é o
   que são. */
.ps-itens {
  display: grid;
  gap: var(--e-5);
  list-style: none;
  margin: var(--e-7) 0 0;
  padding: 0;
}
.ps-itens li {
  display: grid;
  gap: var(--e-1);
}
.ps-itens li + li {
  border-block-start: 1px solid var(--d-line);
  padding-block-start: var(--e-5);
}
.ps-itens b {
  color: var(--d-ink);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.ps-itens span {
  color: var(--d-ink-3);
  font-size: var(--t-xs);
  line-height: 1.55;
  max-width: 42ch;
}


/* ── A GRADE, SOBRE VIDRO ────────────────────────────────────────────────────
   A tabela não tinha superfície — era um fio de borda sobre o campo. Isso
   funcionava enquanto nada passava por trás dela. Agora passa: o traçado desta
   banda sobe pela direita e cruza a área da grade, e uma curva de luz atrás de
   uma tabela de dados brigaria com a única coisa que a tabela tem acesa, que é a
   célula vaga. O vidro da fundação resolve por oclusão, e de quebra dá à peça o
   peso que ela merece — ela é o argumento da banda.

   Sem desfoque de fundo: `backdrop-filter` reamostra tudo o que está atrás a
   cada quadro, e o que está atrás aqui é um fio animado.

   E o vidro precisou de CHÃO. Só com o degradê do `.bd-vidro` — 72% de
   `--d-bg-3` em cima, 54% de `--d-piso` embaixo — o cartão ficou translúcido o
   bastante para o traçado aparecer inteiro atravessando as linhas da tabela na
   diagonal, e uma risca de luz sobre uma grade de dados não lê como
   profundidade: lê como arranhão. Os 88% de piso por baixo derrubam o que passa
   atrás para um sussurro e não tiram nada do vidro que se vê — a aresta, a
   borda e o fio de luz do alto continuam sendo o que faz a superfície. */
.ps-quadro {
  /* A ALTURA DA LINHA MORA NUM NÚMERO SÓ. Ela é lida em dois lugares — a célula
     e o botão que preenche a célula vaga — e os dois têm de bater exatamente,
     senão sobra uma faixa da célula que acende no ponteiro e não se clica. */
  --ps-linha: 58px;
  background-color: color-mix(in srgb, var(--d-piso) 88%, transparent);
  margin: 0;
  padding: clamp(var(--e-4), 2vw, var(--e-6));
}

/* A rolagem lateral fica no INVÓLUCRO da tabela e não no `<figure>`: a aresta
   de luz do `.bd-vidro` é `position: absolute` no alto do cartão, e num
   contêiner que rola ela rolaria junto — a luz sairia de cena com a tabela. */
.ps-rolagem.pm-grade { margin: 0; }

/* Região que rola na horizontal tem de ser alcançável pelo teclado, senão quem
   não usa mouse não chega às colunas de fora. `tabindex="0"` a torna focável, e
   o foco precisa aparecer: dois tons, como no `.bd-vidro` da fundação — o teal
   sozinho é diferença de croma e some em escala de cinza. */
.ps-rolagem:focus-visible {
  outline: 2px solid var(--c-teal-2);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--c-navy);
}

/* A legenda deixou de ser `<caption>` e virou parágrafo acima da rolagem (o
   porquê está no HTML). Aqui só se desfaz o que a regra da casa supunha sobre
   ela morar dentro de uma tabela. */
.ps-legenda {
  margin: 0;
  padding-bottom: var(--e-4);
}

/* A BARRA DE ROLAGEM É PARTE DO DESENHO quando aparece. Deixada no padrão do
   sistema, ela entra como uma faixa cinza-claro de 15px atravessando um cartão
   escuro — a peça mais clara da banda, e a menos importante. Fina e em teal
   baixo, ela vira o que é: o aviso de que há mais semana à direita. */
.ps-rolagem {
  scrollbar-color: color-mix(in srgb, var(--c-teal) 42%, transparent) transparent;
  scrollbar-width: thin;
}

/* 8px de recuo lateral no lugar dos 12 da regra da casa. A tabela ganhou a
   sexta-feira e mais duas unidades, e passou de oito para dez colunas de
   borda: 4px a menos de cada lado devolvem 80px de largura, que é a diferença
   entre a grade caber na coluna de 1,26fr e pedir rolagem numa tela de 1366. */
.ps-quadro .pm-tabela :is(th, td) { padding-inline: var(--e-2); }

/* NENHUM NOME QUEBRA EM DUAS LINHAS. Sem isto a tabela cede à coluna em vez de
   pedir rolagem: "Marina P." vira "Marina" / "P." e a grade passa a ter linhas
   de uma e de duas alturas, que é a aparência de planilha mal colada — o
   contrário exato do que esta peça precisa demonstrar. Com `nowrap` a largura
   de conteúdo vira um número fixo — 632px medidos — e a decisão passa a ser do
   layout: ou cabe, ou a região rola, e a região rola pelo teclado. */
.ps-quadro .pm-tabela td { white-space: nowrap; }

/* ALTURA IGUAL EM TODAS AS LINHAS. A célula vaga virou um botão com 44px de
   alvo de toque; sem uma altura comum, a linha da Emergência ficaria 14px mais
   alta que as outras duas e a grade passaria a ler como torta. 58px é 44 do
   alvo mais 7 de respiro de cada lado. */
.ps-quadro .pm-tabela tbody :is(th, td) {
  height: var(--ps-linha);
  padding-block: 0;
  vertical-align: middle;
}

/* ── A SEQUÊNCIA DA REVELAÇÃO É DESTA BANDA ─────────────────────────────────
   `soma-premium.css:294` escalona a entrada da grade, e aquela lista foi escrita
   para uma tabela de 3 × 7. Esta é 5 × 8: a sexta-feira caiu em `td:nth-child(8)`,
   que não tem regra nenhuma, e chegava em 0s — ANTES de todas as outras. A
   tabela passou a se revelar de trás para a frente na ponta direita, e as duas
   linhas novas ficaram sem atraso.

   Um índice por coluna resolve, e o seletor que carrega o atraso tem de PESAR
   MAIS que o de lá: `tr:nth-child(n)` é a mesma forma da regra que ele
   substitui, com uma classe a mais — (0,3,3) contra (0,2,3). Empatar não
   bastava, porque `soma-premium.css` é carregado DEPOIS deste arquivo e a
   ordem decidiria por ele. Medido antes da correção: as três primeiras linhas
   continuavam saindo em 120/190/260ms, quer dizer, por LINHA.

   E é isso que faz existir o escalonamento por COLUNA que o comentário de
   premium descreve — «as colunas entram da esquerda para a direita, como quem
   monta a escala dia a dia». Ele nunca existiu: a regra de linha vencia a de
   coluna nas três primeiras, e da quarta em diante não havia regra nenhuma.

   60ms por coluna: as sete fecham em 420ms, dentro dos 440 que a lista antiga
   já gastava. E a vaga continua chegando por último — o `!important` do
   `.pm-vaga` de premium ganha desta regra também, que é o único uso dele que a
   banda quer manter. */
.ps-quadro .pm-tabela tbody tr:nth-child(n) td { transition-delay: calc(var(--ps-col, 0) * 60ms); }
.ps-quadro .pm-tabela tbody td:nth-child(2) { --ps-col: 1; }
.ps-quadro .pm-tabela tbody td:nth-child(3) { --ps-col: 2; }
.ps-quadro .pm-tabela tbody td:nth-child(4) { --ps-col: 3; }
.ps-quadro .pm-tabela tbody td:nth-child(5) { --ps-col: 4; }
.ps-quadro .pm-tabela tbody td:nth-child(6) { --ps-col: 5; }
.ps-quadro .pm-tabela tbody td:nth-child(7) { --ps-col: 6; }
.ps-quadro .pm-tabela tbody td:nth-child(8) { --ps-col: 7; }

.ps-nota { margin-top: var(--e-5); }


/* ── A CÉLULA VAGA ──────────────────────────────────────────────────────────
   Era um `<span>` decorativo. Agora é um controle de verdade: focável pelo
   teclado, com nome acessível completo e com uma coisa real para fazer — abrir
   o cartão que conta o que o Plantel Med faz com um horário em aberto. Botão
   que não faz nada é o que o `CLAUDE.md` §2 chama de botão inerte, e o
   `popover` nativo resolve isso sem uma linha de JavaScript. */
/* O BOTÃO PREENCHE A CÉLULA INTEIRA, e são os 58px da linha e não os 44 do
   mínimo de toque. Duas razões, e a segunda é a que obrigou.
   A primeira: com 44 dentro de 58 sobravam 7px em cima e 7 embaixo que acendiam
   no ponteiro e não se clicavam — a célula prometia mais alvo do que tinha.
   A segunda está no bloco de ponteiro logo abaixo. */
.ps-vaga-alvo {
  align-items: center;
  background: none;
  border: 0;
  border-radius: 6px;
  color: inherit;
  cursor: pointer;
  display: flex;
  font: inherit;
  justify-content: center;
  min-height: var(--ps-linha);
  padding: 0;
  width: 100%;
}
.ps-vaga-alvo:focus-visible {
  outline: 2px solid var(--c-teal-2);
  outline-offset: -3px;
  box-shadow: inset 0 0 0 5px var(--c-navy);
}

/* O REALCE DE PONTEIRO NÃO PODE SER O ANEL, E NÃO PODE SER A CÉLULA.
   O anel é o que a animação de rolagem controla, e valor de animação ativa ganha
   de declaração comum: um `:hover` escrito nele simplesmente não apareceria.

   E a célula está fora de alcance por outro motivo: `soma-premium.css:310` dá ao
   `.pm-vaga` um `transition-delay: 760ms !important`, escrito para que a vaga
   fosse a última a chegar na revelação da grade. O atraso vale para TODA
   propriedade em transição naquele elemento — medido,
   `transition: background-color .24s … .76s`. O único controle da banda levava
   três quartos de segundo para acender no ponteiro e outros três para apagar, o
   que não lê como realce: lê como travamento. Vencer aquilo daqui pediria um
   segundo `!important`, que a especificação proíbe e que só empilharia o
   problema.

   Então quem responde ao ponteiro é o BOTÃO — que ninguém está atrasando, e que
   agora tem exatamente o tamanho da célula. Ele pinta 11% de teal POR CIMA dos
   12% que a célula já tem: 1 − (1−0,12)(1−0,11) = 21,7%, os mesmos ~22% que a
   regra antiga pintava na própria célula. O brilho da palavra continua onde
   estava. */
@media (hover: hover) {
  .ps-vaga-alvo,
  .ps-vaga-alvo > span:first-child {
    transition: background-color var(--m-rapido) var(--ease-out),
                text-shadow var(--m-rapido) var(--ease-out);
  }
  .ps-vaga-alvo:hover,
  .ps-vaga-alvo:focus-visible {
    background: color-mix(in srgb, var(--c-teal) 11%, transparent);
  }
  .ps-vaga-alvo:hover > span:first-child,
  .ps-vaga-alvo:focus-visible > span:first-child {
    text-shadow: 0 0 14px color-mix(in srgb, var(--c-teal) 78%, transparent);
  }
}

/* O texto que só o leitor de tela ouve, e o seletor precisa de DOIS pesos.
   `text-transform` e `letter-spacing` voltam ao normal de propósito: a regra
   `.pm-vaga span` que pinta a palavra "vago" alcança este `<span>` também, e
   caixa-alta com 0,16em de espacejamento faz parte dos leitores soletrarem a
   frase letra a letra — setenta e nove caracteres, um a um.
   Só que `.pm-vaga span` é (0,1,1) e uma classe sozinha é (0,1,0): a regra que
   este comentário descreve PERDIA a cascata, e o nome acessível do único
   controle da banda saía inteiro em caixa-alta. Com o elemento no seletor os
   dois pesos empatam, e este bloco vence por ordem — ele mora depois. */
span.ps-oculto {
  clip-path: inset(50%);
  height: 1px;
  letter-spacing: normal;
  overflow: hidden;
  position: absolute;
  text-transform: none;
  white-space: nowrap;
  width: 1px;
}

/* A PULSAÇÃO — duas vezes, e para.
   O `@keyframes pm-respira` da casa a deixa infinita. Alarme pisca sem parar;
   isto tem de
   respirar duas vezes e ficar quieto, senão a peça mais importante da banda
   vira ruído de fundo enquanto a pessoa lê o resto.

   E o relógio é o da ROLAGEM, não o do tempo. Uma animação cronometrada com
   `iteration-count: 2` dispara no carregamento da página: para uma banda que
   está a três telas de distância, as duas respirações acontecem sem ninguém por
   perto e o argumento se perde. Com `view()` as duas acontecem exatamente
   quando a grade entra em cena — o mesmo relógio do fio de luz, e por isso o
   mesmo gesto.

   O nome da linha do tempo mora no `<figure>`, e não na própria célula: o
   `::after` vive dentro de um contêiner que rola na horizontal, e ancorar o
   relógio a ele seria medir a travessia da coisa errada.

   UM VALOR SÓ DE REPOUSO, E É O DA CASA. O anel tinha três: 0,34 sem suporte a
   `view()`, 0,38 no fim do keyframe e 0,72 com o movimento desligado — quem
   desligou a animação via a vaga duas vezes mais acesa que quem a viu. É o
   mesmo anel, no mesmo estado, com três respostas. Os três passam a ser 0,7,
   que é o que o `prefers-reduced-motion` do `.pm-vaga` da casa
   (`page-home.css` acima) já dizia: acesa e parada. E acesa importa — depois de
   respirar, a vaga continua sendo a única coisa acesa da tabela. */
.ps-quadro .pm-vaga::after {
  animation: none;              /* mata a infinita herdada */
  opacity: .7;
}
@supports (animation-timeline: view()) {
  .ps-quadro {
    view-timeline-name: --ps-quadro;
    view-timeline-axis: block;
  }
  /* `--ease-in-out` E NÃO `linear`. O `linear` é obrigatório quando a CURVA é a
     própria rolagem — é o caso do fio, que tem de avançar na razão exata do
     gesto. Aqui a rolagem é só o RELÓGIO; a curva continua sendo escolha, e uma
     respiração interpolada linearmente é onda triangular: pico em bico. O
     `pm-respira` da casa foi desenhado com `--ease-out` justamente por isso, e
     a troca de relógio herdou o `linear` sem que ninguém decidisse por ele. */
  .ps-quadro .pm-vaga::after {
    animation: ps-vaga-respira var(--ease-in-out) both;
    animation-timeline: --ps-quadro;
    /* 26% a 48% da travessia: começa quando a grade já está inteira na tela e
       termina antes de ela chegar ao meio — as duas respirações cabem no
       intervalo em que a peça está sendo olhada, e não enquanto ela sobe. */
    animation-range: cover 26% cover 48%;
  }
  /* .25 e .85 são a amplitude do `pm-respira` da casa, e voltam a ser: a troca
     para .28/.92 não tinha razão escrita, e amplitude é a diferença entre
     respirar e piscar. O 100% pousa em .7, o repouso único. */
  @keyframes ps-vaga-respira {
    0%   { opacity: .25; }
    25%  { opacity: .85; }
    50%  { opacity: .25; }
    75%  { opacity: .85; }
    100% { opacity: .7;  }
  }
}

.ps-regua { margin-block-start: clamp(var(--e-8), 6vw, var(--e-9)); }


/* ── O CARTÃO DA VAGA ───────────────────────────────────────────────────────
   `popover` nativo: abre no clique, fecha no Esc, fecha no clique fora, devolve
   o foco ao botão. Tudo isso sem JavaScript e sem uma armadilha de foco escrita
   à mão, que é onde este tipo de componente costuma quebrar.

   Ele NÃO é um modal centrado. Um cartão que salta ao meio da tela porque
   alguém tocou numa célula de tabela rouba o lugar da coisa que a pessoa estava
   olhando; encostado na base, ele é uma nota de rodapé que apareceu — a grade
   continua visível, com a célula ainda acesa, atrás dele.

   `display: none` declarado aqui e não em `@supports`: navegador que não
   conhece `:popover-open` descarta a regra que reabre, e o cartão fica
   escondido em vez de aparecer solto no fim da banda. A degradação é o silêncio,
   nunca o vazamento. */
.ps-cartao { display: none; }
.ps-cartao:popover-open {
  /* mesmo motivo do chão da grade, invertido: aberto, o cartão fica na camada
     de topo COM um véu escuro atrás, e o vidro translúcido deixava esse véu
     atravessar — a peça em primeiro plano ficava mais clara e mais lavada que a
     página que ela cobre. Com chão próprio ela volta a ser a coisa da frente. */
  background-color: color-mix(in srgb, var(--d-campo) 94%, transparent);
  display: grid;
  gap: var(--e-4);
  inline-size: min(31rem, calc(100vw - 2 * var(--e-5)));
  inset: auto;
  inset-block-end: clamp(var(--e-5), 5vh, var(--e-8));
  inset-inline-start: 50%;
  margin: 0;
  padding: clamp(var(--e-5), 2.4vw, var(--e-7));
  position: fixed;
  /* `translate` e não `transform`: o `transform` deste elemento pertence a quem
     um dia quiser animá-lo, e as duas propriedades não se atropelam. */
  translate: -50% 0;
}
.ps-cartao::backdrop {
  background: color-mix(in srgb, var(--d-piso) 52%, transparent);
}
.ps-cartao-rot {
  color: var(--c-teal-2);
  font-family: var(--f-rotulo);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: 0.16em;
  margin: 0;
  text-transform: uppercase;
}
.ps-cartao-txt {
  color: var(--d-ink-2);
  font-size: var(--t-sm);
  line-height: 1.6;
  margin: 0;
}
.ps-cartao-pe {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  justify-content: space-between;
}
/* `.btn-sm` da casa tem 42px de altura — 2px abaixo do alvo mínimo de toque.
   Aqui ele sobe para 44 em vez de virar `.btn` de 54, que num cartão deste
   tamanho pesaria mais que o texto. */
.ps-cartao .btn-sm { height: 44px; }
.ps-cartao-fecha {
  background: none;
  border: 0;
  color: var(--d-ink-3);
  cursor: pointer;
  font-family: var(--f-rotulo);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: 0.16em;
  min-height: 44px;
  padding-inline: var(--e-3);
  text-transform: uppercase;
}
.ps-cartao-fecha:focus-visible {
  outline: 2px solid var(--c-teal-2);
  outline-offset: 2px;
}
@media (hover: hover) {
  .ps-cartao-fecha { transition: color var(--m-rapido) var(--ease-out); }
  .ps-cartao-fecha:hover { color: var(--d-ink); }
}


/* ════════════════════════════════════════════════════════════════════════════
   3 · RESPONSIVO — três pontos de quebra, e cada um tem uma causa medida
   ════════════════════════════════════════════════════════════════════════════ */

/* Em coluna única a grade passa a ter a página inteira: 1084px de área útil a
   1280 de janela e 723 a 860, contra os 632 de que ela precisa. A rolagem
   lateral só volta a existir abaixo de ~735px, onde já é o comportamento que se
   espera de uma tabela no celular — e ali a região é focável, rola pelo teclado
   e tem barra própria. */
@media (max-width: 1320px) {
  .ps-cena { grid-template-columns: minmax(0, 1fr); }
  .ps-texto .lead { max-width: 62ch; }

  /* O FILETE NÃO PODE SER MAIS LARGO QUE O QUE ELE SEPARA. Em coluna única o
     `<li>` passa a ter a largura da página — 1136px a 1280 — enquanto o texto
     dentro dele continua com medida de leitura: sobrava um traço de um metro
     debaixo de um parágrafo de um palmo. A medida sai do `<span>` e sobe para a
     lista, que é quem desenha o filete, e assim os dois terminam no mesmo x. */
  .ps-itens { max-width: 46ch; }
  .ps-itens span { max-width: none; }
}

/* A banda A quebra a 900, que é onde `page-home.css` já quebra o resto da
   página. Um terceiro ponto de quebra próprio seria um terceiro lugar para a
   página trocar de forma. */
@media (max-width: 900px) {
  .pl-cena { grid-template-columns: minmax(0, 1fr); }

  /* Em coluna única o palco encolhe para a largura da página e a cena perde a
     profundidade que a tinha: painel e médico passam a disputar a mesma faixa.
     Ele continua na frente — é a leitura da banda —, mas volta a ser um corpo
     recortado no canto e não meia tela: 38% da largura, ancorado à esquerda, com
     a rampa do pé subindo para 54% porque a caixa ficou mais curta e a mesma
     porcentagem de rampa aqui é bem menos caminho em pixel. */
  .pl-gestor.plantel-foto {
    --cena-pe: 54%;
    inset-block-end: -14%;
    inset-inline-start: -6%;
    width: 38%;
  }
  .pl-papeis-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* A LEGENDA DO PAINEL ALCANÇA O RECORTE, E SÓ NESTA FAIXA.
   A legenda tem corpo fixo — 10,5px — e a caixa que a segura encolhe com a
   janela: a corrida de glifos mede 386px em qualquer largura, e a partir de
   certo ponto ela deixa de caber nos «300 últimos pixels» que o comentário dela
   descreve. Medida a sobreposição com a caixa do recorte: 28px a 1425, 85 a
   1200, 136 a 1000.

   SOBREPOR A CAIXA NÃO É O PROBLEMA — sobrepor a TINTA é. Decodificando o alfa
   do ativo na faixa exata da corrida: a 1425 e a 1200 ela cai inteira sobre o
   transparente do recorte e o rótulo mede 5,99:1, que é o valor do campo limpo.
   A 1000 ela alcança a tela do monitor do gestor: o pior pixel compõe 77% de um
   azul de (50,118,181) e o contraste local cai para 3,15:1, com 1,2% da área da
   corrida abaixo dos 4,5:1 da especificação. É pouca área e é reprovação.

   E QUEM CEDE É A MEDIDA DA LEGENDA, não a rampa do recorte. Baixar
   `--cena-pe` de 58% para 46% foi medido primeiro e melhora só até 3,85:1 —
   continua reprovando, e paga com a figura dissolvendo mais cedo numa faixa de
   250px de largura. Com 260px de medida a legenda quebra em duas linhas
   alinhadas à direita, a corrida mais longa passa a 221px, e ela sai INTEIRA de
   cima do recorte: medido, zero sobreposição e nenhuma amostra abaixo de 4,5.
   Duas linhas de rótulo custam 16px de altura; a rampa custaria o gestor. */
@media (min-width: 901px) and (max-width: 1250px) {
  .pl-painel-nota {
    /* `margin-inline-start: auto` é obrigatório: `text-align: end` alinha o
       texto DENTRO da caixa, e uma caixa de 260px sem esta linha nasceria
       encostada à esquerda do painel — que é exatamente onde a legenda não pode
       estar, em cima do ombro. */
    margin-inline-start: auto;
    max-width: 260px;
  }
}

/* 640 e não 560, e é o número que o comentário abaixo sempre disse. O botão de
   largura inteira no estreito é o mesmo gesto do herói, da consultoria e do
   fecho, e a página tinha três números para ele. Um só. */
@media (max-width: 640px) {
  /* Dois botões lado a lado a 375 dão 160px cada — abaixo do que o polegar
     acerta com confiança. */
  .pl-acoes .btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}

@media (max-width: 560px) {
  .pl-papeis-lista { grid-template-columns: minmax(0, 1fr); }
  /* O gestor sai. A 430 de largura ele mediria 130px: uma silhueta pequena
     demais para se reconhecer como pessoa e grande o bastante para sujar a base
     do painel. Uma peça que não cumpre mais o trabalho dela é peso morto de
     download — e o `sizes` da marcação garante que o navegador nem baixe a
     versão grande antes disso. */
  .pl-gestor { display: none; }

  /* e com ele sai a razão de a nota estar à direita: sem ninguém para
     desviar, ela volta ao eixo de leitura da página */
  .pl-painel-nota { text-align: start; }
}


/* ════════════════════════════════════════════════════════════════════════════
   4 · CORES FORÇADAS — só onde a cor carrega informação

   A fundação já cuida da marca d'água, do fio, da régua e da aresta do vidro.
   Ficam dois casos, e os dois pintam com degradê ou com `color-mix`, que o modo
   forçado não reescreve.
   ════════════════════════════════════════════════════════════════════════════ */
@media (forced-colors: active) {
  /* A POÇA E A SOMBRA DE CONTATO SAEM, pelo mesmo argumento das três irmãs — a
     chapa do orbital, a contraluz do retrato e a poça do fecho: atmosfera;
     forçada, ou some ou vira um bloco chapado. A poça estava fora deste bloco, e
     a mesma pergunta respondida de dois jeitos em quatro peças iguais é o que faz
     uma regra de arte virar dialeto.

     A sombra de contato é o caso mais grave dos dois: ela mora ACIMA do painel
     (`z-index: 3`) e é uma mancha larga. Chapada pelo sistema, seria um retângulo
     opaco por cima da tela do produto. */
  .pl-palco::before,
  .pl-palco::after,
  /* A NÉVOA AÉREA SAI PELO MESMO MOTIVO, e é a mais grave das três: ela cobre a
     tela do produto por dentro da caixa dele. */
  .pl-painel::before { display: none; }

  /* E OS FILTROS SAEM COM ELAS. `filter` não é reescrito pelo modo forçado: as
     cores continuam as do autor, e o que era queda de luz sobre um campo navy
     vira borrão colorido sobre a chapa do sistema. O desfoque do painel sai pela
     razão mais dura de todas — quem liga alto contraste está pedindo para
     enxergar, e devolver a peça macia é responder o contrário do pedido. */
  .pl-gestor img,
  .pl-painel img { filter: none; }

  /* O filete vertical dos papéis é desenhado com `background-image`, e fundo o
     sistema apaga. Como borda de verdade ele sobrevive — e é ele que diz que
     aquilo são seis colunas e não um parágrafo de seis frases. */
  .pl-papeis-lista > div {
    background-image: none;
    border-inline-start: 1px solid CanvasText;
  }

  /* A VAGA é o único ponto de informação-por-cor da página inteira. Em alto
     contraste o fundo em `color-mix` some e o anel fica pálido: sem tratamento,
     a célula vaga passa a ser uma célula com a palavra "vago" e nada mais. O
     contorno em `Highlight` devolve o destaque com a cor que o próprio sistema
     escolheu para "isto aqui". */
  .ps-quadro .pm-vaga {
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }
  .ps-quadro .pm-vaga::after {
    animation: none;
    opacity: 1;
  }
}


/* ════════════════════════════════════════════════════════════════════════════
   5 · SEM MOVIMENTO — último bloco do arquivo, pela mesma razão da fundação

   Vence por ORDEM e por especificidade igual à das regras acima, sem um
   `!important`. Regra desta banda escrita depois daqui volta a rodar com o
   movimento desligado.

   O `@media (prefers-reduced-motion)` da `.pm-vaga`, lá em cima, também desliga a
   pulsação da vaga, mas com uma classe só (0,1,0) — e as regras deste arquivo
   têm duas. Sem este bloco, o desligamento da casa perderia para elas.
   ════════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .ps-quadro .pm-vaga::after {
    animation: none;
    opacity: .7;                /* o estado final, e o mesmo dos outros dois */
  }
  .ps-vaga-alvo,
  .ps-vaga-alvo > span,
  .ps-cartao-fecha {
    transition: none;
  }
}


/* ────────────────────────────────────────────────────────────────────────────
   D · BANDAS 08 C e D — a SAVYME
   ──────────────────────────────────────────────────────────────────────────── */


/* ════════════════════════════════════════════════════════════════════════════
   SOMA · banda-savyme.css — as bandas C e D

   C · o herói invertido: a fotografia à esquerda com a marca d'água atrás, o
       cartão da consulta por cima dela, a palavra à direita.
   D · o ciclo: painel de título mais antes, durante e depois.

   ENTRA DEPOIS DE `_fundacao.css`. A fundação termina com o bloco de
   `prefers-reduced-motion`, que vence por ordem — regra de banda inserida
   ANTES dele passaria a rodar com o movimento desligado. Este arquivo repete o
   seu próprio bloco de desligamento no fim, pelo mesmo motivo e pela mesma
   mecânica: estado final como padrão, sem um `!important`.

   ── UMA DEPENDÊNCIA QUE NÃO É RESÍDUO ───────────────────────────────────────
   As quatro fotografias carregam `savyme-foto` no HTML de propósito. Não é
   sobra do `#savyme` antigo: é como se assina o consumo da máquina de
   dissolução, que mora no bloco 2 deste arquivo e é declarada por uma lista de
   seletores — `.virada-foto, .plantel-foto, .savyme-foto, .cons-foto`. É de lá
   que vêm `--cena-mascara` (o smoothstep de nove paradas nos dois eixos mais a
   elipse) e o grão que cobre a foto com a mesma trama do campo.

   A VARREDURA ACONTECEU NA MONTAGEM, e a lista NÃO precisou de dois nomes
   novos: `.savyme-foto` continua nela justamente porque a classe continua no
   HTML. O que saiu da regra dela foi o layout do retângulo antigo — o
   sangramento de goteira e o `--cena-dir: 80%`, que `.sv-foto` e
   `.sv-ciclo-foto` já redeclaravam. Sobrou a proporção 16/11, e ela sobrou
   porque a `.sv-ciclo-foto` DEPENDE dela: é o que faz a faixa de fotografia no
   pé dos três cartões medir o mesmo nos três.
   ════════════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════════════
   0 · O BLOCO DE `<defs>` DO PASSE FRIO

   Mesmo tratamento do `.soma-fio-defs`: não desenha nada e não pode
   desaparecer, porque `display: none` impede o filtro de ser referenciado em
   parte dos motores. Tamanho zero e fora do fluxo.
   ════════════════════════════════════════════════════════════════════════════ */
.sv-defs {
  height: 0;
  overflow: hidden;
  position: absolute;
  width: 0;
}


/* ════════════════════════════════════════════════════════════════════════════
   1 · BANDA C — O HERÓI INVERTIDO
   ════════════════════════════════════════════════════════════════════════════ */

/* A banda é o quadro do fio; o conteúdo sobe uma camada. Sem estes dois a
   marca d'água e o traçado passariam POR CIMA do texto.

   O NÓ ACENDE MAIS CEDO QUE O PADRÃO. A fundação supõe um nó por volta da
   metade do traçado; este mora a 24% do caminho, e a corrida chega nele a 20%
   da travessia — 24% de um alcance que agora vai de 18% a 60%. Com os números de
   fábrica ele acenderia com o fio já passado.

   OS DOIS SUBIRAM COM A CORRIDA, pela mesma conta que a fundação registra —
   `18 + antigo × 0,84`. Eram 10% e 17% quando a corrida ia de 0 a 50%. */
.sv-heroi {
  position: relative;
  --no-de:  26%;
  --no-ate: 32%;
}
.sv-heroi > .home-wrap {
  position: relative;
  z-index: 1;
}

/* A marca nasce mais baixa que o padrão da fundação (−2%): a −2% ela abriria
   acima da fotografia, sobre o campo vazio, e leria como título perdido. A 3%
   a linha de base dela cai dentro do terço alto da foto, que é onde marca
   d'água mora. */
.sv-heroi .bd-marca { --bd-marca-y: 3%; }

/* O PALCO É MAIOR QUE A FOTO, e é isso que dá o degrau: 1,12 contra 1 no eixo
   horizontal. A fotografia é a cena e o texto é a legenda dela — dividir a
   linha em duas metades iguais faria as duas competirem, e a foto perde essa
   disputa porque texto sempre chama primeiro.

   A INVERSÃO É DA GRADE, NÃO DA MARCAÇÃO. No documento o título vem antes da
   ilustração — é a ordem que um leitor de tela ouve e a que o buscador lê, e é
   a certa: primeiro o que a seção diz, depois o que ela mostra. Na tela larga
   a grade troca as duas de coluna, e o herói fica invertido como a composição
   pede. Colocar a foto primeiro na marcação para conseguir isso obrigaria a
   desfazer com `order` no celular — o mesmo resultado com uma mentira a mais
   no meio. */
.sv-heroi-grade {
  align-items: center;
  display: grid;
  gap: clamp(var(--e-7), 5vw, var(--e-9));
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
}
.sv-heroi-grade > .sv-palco { grid-area: 1 / 1; }
.sv-heroi-grade > .sv-dizer { grid-area: 1 / 2; }

/* ── O PALCO ────────────────────────────────────────────────────────────────
   Duas linhas e duas colunas para uma peça só de conteúdo e um cartão que
   cobre parte dela. A fotografia mora na linha 1 inteira; o cartão mora na
   linha 2, coluna 2, e SOBE por margem negativa.

   POR QUE MARGEM NEGATIVA E NÃO `position: absolute`. Com posicionamento
   absoluto o cartão sai do fluxo e o palco passa a ter a altura só da foto —
   o que sobra do cartão vaza para dentro da banda seguinte, e a única saída
   seria um `padding-bottom` em pixel que erra em toda largura que não for
   aquela em que foi medido. Em fluxo, a altura do palco é
   `altura da foto + altura do cartão − sobreposição`: ela se calcula sozinha,
   em qualquer largura, e nada vaza. */
.sv-palco {
  display: grid;
  grid-template-columns: minmax(0, 44%) minmax(0, 56%);
  grid-template-rows: auto auto;
}

/* ── A FOTOGRAFIA ───────────────────────────────────────────────────────────
   Sangra para a goteira à esquerda, como as outras duas fotos do fim da página
   já fazem. `aspect-ratio: auto` desfaz o 16/11 que `.savyme-foto` traz para a
   foto retangular antiga: esta é um RECORTE, e recorte cortado num quadro que
   não é o dele perde justamente o contorno que o faz recorte. */
.sv-foto {
  aspect-ratio: auto;
  grid-area: 1 / 1 / 2 / 3;
  margin: 0 0 0 calc(-1 * var(--e-goteira));

  /* AS QUATRO RAMPAS, MEDIDAS UMA A UMA no alfa do ativo.
     Só a borda de BAIXO é reta: ali o quadro corta o jaleco com 71% de
     cobertura na última linha de pixels. As outras três não têm o que
     dissolver — a cobertura mede 0,000 no topo, na esquerda e na direita, e
     rampa sobre transparência só comeria imagem. Em especial no topo: o cabelo
     do médico começa a 0,8% da altura, e a rampa padrão de 24% apagaria a
     cabeça dele.

     O pé começa em 74% e não antes porque a mão no ombro — o gesto que é o
     assunto da fotografia — vive entre 57% e 72% da altura. A rampa nasce
     depois que ela termina. */
  --cena-topo: 0%;
  --cena-pe:   74%;
  --cena-esq:  0%;
  --cena-dir:  100%;
}
/* O GRÃO SAI, e é o recorte que manda. `.savyme-foto::after` desenha a trama
   sobre a caixa RETANGULAR da figura; aqui 42% dos pixels são transparentes, e
   uma trama a 3,5% sobre o vazio devolveria em ruído a moldura que o recorte
   não tem. A textura que o campo pede continua vindo do `body::after`. */
.sv-foto::after { content: none; }

.sv-foto img {
  display: block;
  height: auto;
  width: 100%;
  /* o passe frio; a matriz e o porquê estão no comentário do `<filter>` */
  filter: url(#somaFrioSavyme);
}

/* ── O CARTÃO DA CONSULTA ───────────────────────────────────────────────────
   POSIÇÃO MEDIDA CONTRA OS DOIS ROSTOS, não a olho.
   Na fotografia, o rosto do médico ocupa x 57–80% e y 2–42%; a cabeça da
   paciente, x 8–40% e y 17–72%. O cartão precisa cair fora dos dois.

   As duas margens negativas são percentuais, e percentual de margem resolve
   contra a largura da ÁREA DE GRADE do próprio cartão — 56% do palco. É o que
   faz a composição ser a mesma em 1440 e em 1000, e não uma medida certa numa
   largura e torta na outra. Medido a 1425:

     −61% da área (218px) sobe o cartão até 54% da altura da foto (rosto acaba em 42%)
      44% de coluna deixa a aresta esquerda dele em 50%           (mão acaba em 47%)

   O −9% à direita empurra o cartão para dentro da goteira entre as colunas:
   32px dos 72px disponíveis a 1440. Sobra folga, e a peça deixa de ser um
   adesivo colado dentro do quadro para virar uma camada em cima da cena. */
.sv-consulta {
  --bd-raio: clamp(16px, 1.6vw, 22px);

  /* ── A MAQUETE TEM A ESCALA DELA, E ELA É DECLARADA ────────────────────────
     Este cartão não é uma peça da landing: é a TELA DE OUTRO PRODUTO desenhada
     em HTML, e a hierarquia interna de uma interface clínica não é a de uma
     página comercial. Ela precisa de dois degraus entre `--t-mono` (10,5) e
     `--t-xs` (13) que a régua da casa não tem — e não vai ter, porque a régua
     existe justamente para a página não ter vinte e três tamanhos.
     Então eles são declarados aqui, uma vez, com nome: dois tokens da maquete,
     não oito números soltos espalhados por trinta regras. Os que COINCIDIAM com
     um token da casa (13 e 10,5) voltaram a ser o token; os dois que estavam
     ABAIXO do piso da escala (8,5 e 9, em caixa-alta) subiram para `--t-mono`,
     que é o piso de legibilidade que este arquivo promete no cabeçalho.
     O `5px` que resta no miolo do cartão é da mesma licença. */
  --sv-t-md: 12.5px;   /* o corpo da maquete: título da barra, rótulo e falas */
  --sv-t-sm: 11.5px;   /* o relógio da barra, um degrau abaixo do corpo */

  grid-area: 2 / 2 / 3 / 3;
  margin: -61% -9% 0 0;
  max-width: 28rem;

  /* A BASE OPACA, e ela é requisito de contraste e não de gosto.
     O vidro da casa é translúcido (72% no alto, 54% no pé) e este cartão pousa
     sobre o jaleco branco, a coisa mais clara da página. Medido sem a base: o
     texto de apoio dava 4,1:1 — reprovado. Com 80% de piso por baixo, o mesmo
     texto dá 9,4:1, e ainda sobram 9% de fotografia atravessando o vidro, que
     é o que impede o cartão de virar um retângulo chapado.

     É também o que dispensa o `backdrop-filter`: reamostrar a árvore inteira a
     cada quadro para 9% de transparência é caro para nada — e a fundação
     proíbe fosco em elemento que entra, que é o caso deste. */
  background-color: color-mix(in srgb, var(--d-piso) 80%, transparent);
  font-size: var(--t-xs);
  overflow: hidden;   /* reserva para quem não conhece `clip` */
  overflow: clip;     /* corta pelo raio sem criar contêiner de rolagem */
}

.sv-cs-barra {
  align-items: center;
  border-block-end: 1px solid color-mix(in srgb, var(--c-teal-2) 10%, transparent);
  display: flex;
  gap: var(--e-2);
  padding: var(--e-3) var(--e-4);
}
.sv-cs-selo {
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--c-teal) 38%, transparent);
  border-radius: 50%;
  color: var(--c-teal-2);
  display: flex;
  flex: none;
  height: 26px;
  justify-content: center;
  width: 26px;
}
/* O TRAÇO E O TAMANHO SÃO DECLARADOS AQUI, não nos `<svg>`, e os dois números
   saem de uma conta só: o que o olho lê é a espessura EM PIXEL DE TELA, que é
   `stroke-width × lado ÷ 24`. A 15px com traço 1,6 estes ícones rendiam 1,00px
   — os mais finos da página, e justamente os menores, quando um ícone pequeno
   precisa de traço proporcionalmente MAIOR e não menor. A 17px com 1,95 rendem
   1,38px, que é a faixa do resto da metade de baixo. Subir o traço sem subir a
   caixa daria o mesmo pixel e um desenho outro: 2,24 num sistema de 24 fecha as
   contraformas do glifo. */
.sv-cs-selo svg,
.sv-fala-chip svg {
  height: 17px;
  stroke-width: 1.95;
  width: 17px;
}
.sv-cs-titulo {
  color: var(--c-teal-2);
  font-size: var(--sv-t-md);
  font-weight: 500;
  letter-spacing: -0.005em;
}
/* O ÚNICO PONTO QUE PULSA no cartão. A pílula "Ao vivo" tem o ponto PARADO,
   por decisão da fundação — dois pontos batendo no mesmo cabeçalho seriam dois
   relógios discordando. Este marca que a sessão está aberta; a onda ao lado já
   diz que há som entrando. */
.sv-cs-ponto {
  background: var(--c-teal);
  border-radius: 50%;
  box-shadow: 0 0 9px color-mix(in srgb, var(--c-teal) 70%, transparent);
  flex: none;
  height: 5px;
  width: 5px;
  animation: sv-bate 2.4s var(--ease-in-out) infinite;
}
@keyframes sv-bate {
  0%, 100% { opacity: .34; }
  50%      { opacity: 1; }
}
.sv-cs-hora {
  color: var(--d-ink-3);
  font-size: var(--sv-t-sm);
  font-variant-numeric: tabular-nums;
  margin-inline-start: auto;
}

.sv-cs-corpo { padding: var(--e-4); }
.sv-cs-bloco {
  border: 1px solid color-mix(in srgb, var(--c-teal-2) 12%, transparent);
  border-radius: calc(var(--bd-raio) - 8px);
  padding: var(--e-3);
}
.sv-cs-cab {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-block-end: var(--e-3);
}
.sv-cs-rotulo {
  color: var(--d-ink);
  font-size: var(--sv-t-md);
  font-weight: 600;
  letter-spacing: -0.01em;
}
/* A onda e a pílula viajam juntas: numa coluna estreita elas quebram para a
   linha de baixo COMO UM PAR, e não a onda embaixo do rótulo com a pílula
   sozinha do lado. `margin-inline-start: auto` só empurra enquanto couber. */
.sv-cs-sinal {
  align-items: center;
  display: flex;
  gap: var(--e-2);
  margin-inline-start: auto;
}

/* A pílula da fundação, na régua do produto e não na da banda.
   Ela nasce com 32px de altura porque lá fora é rótulo de seção; aqui a linha
   inteira do cabeçalho mede 20px, e 32 dentro de 20 não é ênfase, é engano de
   escala. O que muda são três medidas — altura, corpo e respiro; a borda, o
   raio, o ponto e a correção óptica do tracking continuam sendo os dela. */
/* `--t-mono` E NÃO 8,5px. O menor degrau da escala é 10,5px, e 8,5 em caixa-alta
   com 0,14em de espacejamento era o menor corpo de texto da página inteira — e
   não escalava: a 375 o cartão ocupa a coluna toda e a pílula continuava em 8,5.
   Contraste não é o problema (10,65:1 medidos); é o piso de legibilidade.
   A linha do cabeçalho mede 20px e a cápsula tem de caber nela: 10,5 de corpo
   com `--e-1` de respiro de cada lado dão 18,5px, e sobra 1,5. */
.sv-cs-vivo {
  font-size: var(--t-mono);
  gap: var(--e-1);
  min-height: 0;
  padding-block: var(--e-1);
  padding-inline: var(--e-2) calc(var(--e-2) - .14em);
}
.sv-cs-vivo::before { height: 4px; width: 4px; }

/* ── A ONDA DE ÁUDIO ────────────────────────────────────────────────────────
   Barras em CSS: sem imagem, sem canvas, sem um byte de rede.

   O QUE SE MEXE É `scaleY`, NUNCA `height`. Animar altura reflui a linha
   inteira a cada quadro — quatorze barras em cadência dariam quatorze cálculos
   de layout por quadro, e é justamente por isso que a régua da página proíbe.
   Escala é composição pura: mesma imagem, custo de textura.

   Cada barra tem a SUA altura de repouso (`--a`), e a animação oscila em volta
   dela. É por isso que o desenho parado, no fim deste arquivo, ainda é uma
   forma de onda de fala — e não catorze traços do mesmo tamanho. O envelope
   foi escrito à mão em duas sílabas: sobe até a quarta barra, cai, sobe outra
   vez até a oitava e morre. Ruído aleatório não tem sílaba.

   As catorze e o ponto da barra batem desde o carregamento, com a banda longe da
   janela. É a mesma exceção dos anéis do orbital, argumentada no comentário de
   `.orb-aneis`: `transform` e `opacity` compostos na GPU, e um sinal contínuo
   que não tem instante para se perder. */
.sv-onda {
  align-items: center;
  display: flex;
  gap: 2px;
  height: 20px;
}
.sv-onda i {
  background: var(--c-teal-2);
  border-radius: 1px;
  display: block;
  height: 100%;
  opacity: .8;
  transform: scaleY(var(--a));
  width: 2px;
  animation: sv-onda 1.15s var(--ease-in-out) infinite;
  animation-delay: var(--d);
}
@keyframes sv-onda {
  0%, 100% { transform: scaleY(calc(var(--a) * .34)); }
  50%      { transform: scaleY(var(--a)); }
}
.sv-onda i:nth-child(1)  { --a: .30; --d: 0s;   }
.sv-onda i:nth-child(2)  { --a: .52; --d: .07s; }
.sv-onda i:nth-child(3)  { --a: .78; --d: .14s; }
.sv-onda i:nth-child(4)  { --a: .95; --d: .05s; }
.sv-onda i:nth-child(5)  { --a: .62; --d: .19s; }
.sv-onda i:nth-child(6)  { --a: .38; --d: .11s; }
.sv-onda i:nth-child(7)  { --a: .70; --d: .24s; }
.sv-onda i:nth-child(8)  { --a: 1;   --d: .02s; }
.sv-onda i:nth-child(9)  { --a: .84; --d: .16s; }
.sv-onda i:nth-child(10) { --a: .48; --d: .09s; }
.sv-onda i:nth-child(11) { --a: .30; --d: .21s; }
.sv-onda i:nth-child(12) { --a: .58; --d: .13s; }
.sv-onda i:nth-child(13) { --a: .40; --d: .27s; }
.sv-onda i:nth-child(14) { --a: .26; --d: .06s; }

/* ── AS QUATRO FALAS ────────────────────────────────────────────────────────
   `<ol>` e não `<div>`: a ordem É o conteúdo — uma transcrição fora de ordem
   não é uma transcrição. O filete entre as falas é `border-block-start` de
   cada item, e não um separador desenhado, para a primeira nascer sem ele. */
.sv-cs-falas {
  display: grid;
  list-style: none;
  margin: 0;
  padding: 0;
}
.sv-fala {
  align-items: start;
  border-block-start: 1px solid color-mix(in srgb, var(--c-teal-2) 8%, transparent);
  display: flex;
  gap: var(--e-3);
  padding-block: var(--e-3);
}
.sv-fala:first-child { border-block-start: 0; padding-block-start: 0; }
.sv-fala:last-child  { padding-block-end: 0; }
.sv-fala-chip {
  align-items: center;
  background: color-mix(in srgb, var(--c-teal) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-teal-2) 18%, transparent);
  border-radius: 9px;
  color: var(--c-teal-2);
  display: flex;
  flex: none;
  height: 28px;
  justify-content: center;
  width: 28px;
}
.sv-fala-corpo { flex: 1 1 auto; min-width: 0; }
/* `--t-mono` pelo mesmo motivo da pílula acima: 9px em caixa-alta com 0,13em era
   o segundo menor corpo da página e ficava abaixo do piso da escala. «MÉDICO
   (RACIOCÍNIO)», o mais largo dos quatro, mede 140px a 10,5 — cabe na linha da
   fala mesmo no cartão de coluna única a 375. */
.sv-fala-quem {
  color: var(--c-teal-2);
  display: block;
  font-family: var(--f-rotulo);
  font-size: var(--t-mono);
  font-weight: 600;
  letter-spacing: .13em;
  line-height: 1;
  margin-block-end: var(--e-1);
  text-transform: uppercase;
}
.sv-fala-corpo p {
  color: var(--d-ink-2);
  font-size: var(--sv-t-md);
  line-height: 1.45;
  margin: 0;
}
/* `--d-ink-3` e não `--d-ink-4`. Medido sobre o fundo real deste cartão, o
   ink-4 dá 2,8:1 — reprovado. O ink-3 dá 5,4:1. Hora de fala é informação, não
   marca d'água: tem de ser legível para quem lê a tela inteira. */
.sv-fala-hora {
  color: var(--d-ink-3);
  flex: none;
  font-size: var(--t-mono);   /* o literal era exatamente o token */
  font-variant-numeric: tabular-nums;
  margin-inline-start: auto;
  padding-block-start: 1px;
}

/* A legenda ocupa o lugar em que o protótipo punha um botão. O botão saiu
   porque botão que não faz nada é mentira sobre o produto; a legenda entra
   porque maquete sem aviso é mentira sobre a tela. O pé do cartão continua
   fechado, com uma peça honesta no lugar de uma inerte. */
.sv-cs-nota {
  border-block-start: 1px solid color-mix(in srgb, var(--c-teal-2) 8%, transparent);
  color: var(--d-ink-3);
  font-size: var(--t-mono);
  letter-spacing: .01em;
  line-height: 1.5;
  padding: var(--e-3) var(--e-4);
}

/* ── A COLUNA DA PALAVRA ────────────────────────────────────────────────────
   As cinco peças entram SUBINDO, por `data-soma-item`, e não assentando por
   `.bd-entra`. A fundação reserva cada gesto a um tipo de peça: subir é para
   texto, assentar é para objeto que vem de trás. Embrulhado num `.bd-entra`
   este trio recebia `scale(.965)` — e era o único eyebrow → h2 → lead da metade
   de baixo a entrar em escala, entre uma banda acima e uma abaixo cujos títulos
   iguais sobem. Tipografia que escala também reamostra o glifo durante a
   transição.

   Continua valendo a trava de um motor por elemento: nenhuma destas cinco está
   dentro de um `.bd-entra`, e o `.sv-palco` ao lado é que ficou com ele — ali
   são dois objetos, a foto e o cartão. */
.sv-dizer {
  display: grid;
  justify-items: start;
}
.sv-titulo {
  font-size: var(--t-2xl);
  font-weight: 500;
  letter-spacing: -0.028em;
  line-height: 1.08;
  margin-block-start: var(--e-4);
  text-wrap: balance;
}
.sv-dizer .lead { margin-block-start: var(--e-5); }

/* O SELO NÃO É UMA LINHA DE APOIO — é a assinatura da casa, e ganha o corpo de
   um subtítulo por isso. O círculo à esquerda dá a ele um ponto de apoio: uma
   frase em itálico solta no meio de uma coluna flutua. */
.sv-selo {
  align-items: center;
  color: var(--c-teal-2);
  display: flex;
  font-family: var(--f-display);
  font-size: var(--t-xl);
  font-style: italic;
  gap: var(--e-3);
  line-height: 1.25;
  margin-block-start: var(--e-6);
}
.sv-selo-circulo {
  align-items: center;
  /* Luz por dentro e não fundo chapado: o círculo é uma lâmpada fraca atrás do
     símbolo, e é o degradê que faz o anel parecer aceso em vez de desenhado. */
  background-image: radial-gradient(circle at 50% 38%,
    color-mix(in srgb, var(--c-teal) 16%, transparent) 0%,
    transparent 70%);
  border: 1px solid color-mix(in srgb, var(--c-teal) 42%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 22px -8px color-mix(in srgb, var(--c-teal) 70%, transparent);
  display: flex;
  flex: none;
  height: 42px;
  justify-content: center;
  width: 42px;
}
/* 1,7 e não 1,5: a 20px de exibição num sistema de 24, o traço rende 1,42px em
   vez de 1,25 — a mesma faixa dos chips (1,38) e do tique da lista (1,35). */
.sv-selo-circulo svg { height: 20px; stroke-width: 1.7; width: 20px; }
.sv-acoes { margin-block-start: var(--e-6); }

/* O ANEL DE FOCO DESTE BOTÃO SUBIU PARA A FUNDAÇÃO, bloco 7. Ele era um dos
   dois lugares onde a mesma receita foi escrita, e o outro — a folha do fecho —
   escrevia com `::after`, que o `overflow: hidden` do `.btn-primary` recortava
   inteiro. Duas cópias e uma delas quebrada é o motivo de haver uma só. */


/* ════════════════════════════════════════════════════════════════════════════
   2 · BANDA D — O CICLO

   Quatro painéis numa linha: o título e os três tempos. O título é um painel e
   não um cabeçalho acima da fileira porque é assim que ele fica na MESMA régua
   dos três — a frase e os tempos que ela anuncia lado a lado, e não a frase
   por cima de uma prateleira.
   ════════════════════════════════════════════════════════════════════════════ */
/* A ÚNICA BANDA QUE CORRE PARA A ESQUERDA — e a máscara tem de virar junto.
   O traçado entra em x=1200 e sai em x=0: é a volta de linha da página, o único
   momento em que a leitura muda de direção, e a tabela de pontas no HTML a
   declara assim («08D ciclo entra 1200,470 sai 0,520 ← vai da direita»).
   A máscara da fundação descobre sempre da esquerda para a direita (`90deg`),
   porque é o que serve às outras sete. Aqui isso punha a cabeça de luz nascendo
   em x=0 — a ponta em que o fio TERMINA — e correndo até x=1200, que é a ponta
   por onde ele acabou de chegar da banda C. Em movimento, no meio da página: a
   luz sumia na direita da banda de cima e reaparecia na esquerda desta correndo
   de novo para a direita. Mesma conta, eixo invertido.

   SÓ NA FORMA DEITADA. Abaixo de 880 a fundação troca o traçado por uma tira de
   1px na goteira, descoberta de cima para baixo por `180deg`; esta regra é
   (0,2,0) e venceria aquela (0,1,0) — a tira passaria a ter máscara horizontal
   sobre 1px de largura, quer dizer, tudo ou nada.

   E O NÓ FICA ONDE ESTAVA NO TRAÇADO. Ele mora a 37,5% do comprimento
   (x=62,5%), e a conta é a mesma de sempre — o que mudou foi a régua contra a
   qual ela é lida: com a corrida indo de 18% a 60%, `--fio-corrida` passa por
   62,5 aos 33,7% da travessia. Os 32% de partida são os mesmos dois pontos de
   antecedência que a banda C usa. Eram 17% e 24% quando a corrida ia de 0 a 50%,
   e subiram pela conta que a fundação registra: `18 + antigo × 0,84`. */
@media (min-width: 881px) {
  .sv-ciclo .soma-fio {
    -webkit-mask-image: linear-gradient(270deg,
      #000 calc(var(--fio-cabeca) - 2.5%), transparent var(--fio-cabeca));
    mask-image: linear-gradient(270deg,
      #000 calc(var(--fio-cabeca) - 2.5%), transparent var(--fio-cabeca));
  }
}
.sv-ciclo {
  position: relative;
  --no-de:  32%;
  --no-ate: 38%;
}
.sv-ciclo > .home-wrap {
  position: relative;
  z-index: 1;
}

/* 1,04 E NÃO 1, e os nove pixels de diferença são uma linha de título.
   Medido a 1425: "Da recepção ao protocolo." mede 289px. Com quatro colunas
   iguais o painel sai com 300,7 e a frase cabe raspando — até a Instrument
   Serif carregar, quando ela passa e o título vira três linhas de 117,6px de
   altura. Com 1,04 o painel mede 309,7 e o título fecha em duas, 78,4. */
.sv-ciclo-grade {
  display: grid;
  gap: clamp(var(--e-4), 1.8vw, var(--e-6));
  grid-template-columns: minmax(0, 1.04fr) repeat(3, minmax(0, 1fr));
}

/* `align-content: start` NÃO É REDUNDANTE. Este painel é item de uma grade que
   estica todos os quatro à altura do mais alto, e uma grade de trilhas
   automáticas com folga sobrando distribui a folga ENTRE as trilhas. Medido sem
   a linha: a pílula saía com 92px de altura em vez de 32, e o parágrafo
   descolava 90px do título. `start` empurra a folga toda para o pé, que é onde
   ela pertence — o painel é um cabeçalho, e cabeçalho se lê de cima. */
.sv-ciclo-cab {
  align-content: start;
  display: grid;
  justify-items: start;
  /* O ALVO É O RÓTULO DOS TRÊS CARTÕES, E O NÚMERO QUE ESTAVA AQUI ERRAVA ELE.
     A linha que este recuo persegue é a de `.sv-ciclo-quando`, e a conta antiga
     dizia «nasce a 32 do topo do cartão: 32+7 = 39». Medido no navegador: o
     recuo daquele rótulo é `clamp(--e-5, 2vw, --e-6)` — 28,8 a 1440 —, a
     entrelinha dele é 1 sobre 10,5px, e o meio da LINHA cai em 28,8+5,25 =
     34,05. Nunca foram 39. Com a cápsula o meio saía em 38,8: 4,75px de
     desencontro que ninguém tinha medido.

     Agora o recuo é o mesmo clamp do cartão MENOS meia diferença de linha. A
     sobrancelha mede 16,275 de caixa (10,5 × 1,55) contra os 10,5 do rótulo do
     cartão, e metade dessa diferença é 2,89px. Subtraí-los põe os dois meios na
     mesma horizontal em QUALQUER largura, em vez de acertar numa só. */
  padding-block-start: calc(clamp(var(--e-5), 2vw, var(--e-6)) - 2.89px);
  padding-inline-end: clamp(var(--e-3), 1.4vw, var(--e-5));
}
/* SERIFA EM PÉ, não em itálico. O itálico da casa é a assinatura e vale para o
   fecho de uma frase, não para o corpo dela: três linhas inteiras em itálico
   viram cartaz. Aqui a Instrument Serif entra reta e só a última linha —
   "Sem ponto cego." — recebe o itálico, que continua sendo o gesto de fecho. */
.sv-ciclo-titulo {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 2.5vw, 2.15rem);
  font-weight: 400;
  letter-spacing: -0.008em;
  line-height: 1.14;
  margin-block-start: var(--e-5);
  text-wrap: balance;
}
/* `display: block` no lugar de um `<br>`: a última linha continua garantida e a
   primeira continua livre para se acomodar na largura que tiver. O protótipo
   quebrava o título em três com dois `<br>` — uma quebra desenhada numa tela
   só, que em qualquer outra cai no meio errado da frase. */
.sv-ciclo-titulo .serif { display: block; }
.sv-ciclo-lead {
  color: var(--d-ink-3);
  font-size: var(--t-sm);
  line-height: 1.6;
  margin-block-start: var(--e-4);
  max-width: 34ch;
}

.sv-ciclo-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;   /* reserva */
  overflow: clip;     /* a foto encosta no raio do canto sem virar contêiner de rolagem */
}
/* O NÚMERO SAIU. Este rótulo imprimia `01 · Antes`, `02 · Durante` e
   `03 · Depois` por contador de CSS — e era, literalmente, «o card 01, 02, 03»
   que o dono mandou tirar de tudo.

   A ordinalidade era defensável aqui: os três são uma cronologia. Mas quem diz a
   cronologia são as próprias palavras — ANTES, DURANTE, DEPOIS não precisam de
   um número que confirme a ordem em que já estão escritas —, e a página não pode
   ter uma fileira de três com ordinais a uma rolagem de uma fileira de três sem
   nada. Duas gramáticas para a mesma forma é o que faz duas peças diferentes
   lerem como a mesma peça mal-acabada.

   O `counter-reset` da `.sv-ciclo-grade` saiu junto, na mesma mão. */
.sv-ciclo-quando {
  color: var(--c-teal-2);
  display: block;
  font-family: var(--f-rotulo);
  font-size: var(--t-mono);
  font-weight: 600;
  letter-spacing: .17em;
  line-height: 1;
  padding: clamp(var(--e-5), 2vw, var(--e-6)) clamp(var(--e-4), 1.8vw, var(--e-5)) 0;
  text-transform: uppercase;
}
.sv-ciclo-card h3 {
  font-family: var(--f-display);
  font-size: clamp(1.15rem, 1.85vw, 1.6rem);
  font-weight: 400;
  letter-spacing: -0.004em;
  line-height: 1.16;
  padding: var(--e-4) clamp(var(--e-4), 1.8vw, var(--e-5)) 0;
  text-wrap: balance;
}
.sv-ciclo-card p {
  color: var(--d-ink-3);
  font-size: var(--t-xs);
  line-height: 1.6;
  margin: 0;
  padding: var(--e-3) clamp(var(--e-4), 1.8vw, var(--e-5)) clamp(var(--e-5), 2vw, var(--e-6));
}

/* ── A FOTO NO PÉ ───────────────────────────────────────────────────────────
   `margin-block-start: auto` cola a fotografia na base do cartão em vez de
   deixá-la logo abaixo do parágrafo. É o que faz as três lerem como uma faixa
   contínua atravessando a fileira: sem isso, três parágrafos de alturas
   diferentes deixariam as três fotos em três alturas diferentes.

   E ela DISSOLVE NO TOPO. Sem a rampa, a aresta de cima da caixa da imagem
   vira uma reta atravessando o cartão de lado a lado, exatamente onde o
   parágrafo termina. Os 14% são curtos de propósito: medido no ativo do
   "Durante", os olhos do médico caem a 17% da altura — uma rampa de 22% os
   pegaria a 85% de opacidade, e rosto meio apagado não é atmosfera, é defeito.
   A 14% a rampa morre antes deles e só derrete o alto do cabelo. */
.sv-ciclo-foto {
  margin: auto 0 0;
  /* 4% E NAO 14%. A rampa de cima existia para a fotografia nao terminar em
     reta contra o vidro do cartao — e nos dois cartoes de celular ela estava
     comendo o aparelho: o quadro e 16/11 e o alto dele e justamente onde a
     moldura e a tela do telefone comecam. Medido, 14% de 178px de faixa sao
     25px de rampa sobre um aparelho cujo topo aparece nos primeiros 30.
     A 4% sobra rampa para a emenda (7px) e o celular chega inteiro. */
  --cena-topo: 4%;
  --cena-pe:   100%;   /* a base do cartão já corta; rampa aqui seria dupla */
  --cena-esq:  0%;
  --cena-dir:  100%;
  /* `min-height: 0` NÃO É ZELO — é o que faz o 16/11 valer.
     A figura é item de uma coluna flex, e item flex nasce com
     `min-height: auto`: o mínimo dele é o tamanho do CONTEÚDO. Medido sem esta
     linha, o celular do "Antes" impunha os 445px da proporção natural dele e o
     `aspect-ratio` da casa era ignorado — as três fotos saíam em três alturas,
     e a faixa contínua que elas deviam desenhar virava um degrau. */
  min-height: 0;
  /* O ÚNICO PEDAÇO DE `.savyme-foto` QUE NÃO SERVIA AQUI. A regra de estreito da
     casa dava `order: -1` à foto, para que ela subisse antes do texto — o que
     fazia sentido quando a foto era a seção inteira. Dentro de um cartão, não:
     medido a 860, a fotografia pulava para o topo e o rótulo, o título e o
     parágrafo desciam para o pé. O cartão lia de trás para a frente. */
  order: 0;
}
/* `<picture>` é inline por padrão, e altura em porcentagem dentro de caixa
   inline é altura indefinida. Com ele em bloco, a corrente
   figura → picture → img fecha e o `height: 100%` da imagem resolve contra o
   quadro que o `aspect-ratio` desenhou. */
.sv-ciclo-foto picture {
  display: block;
  height: 100%;
}
.sv-ciclo-foto img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}
/* O celular é retrato 2:3 dentro de uma faixa deitada: `cover` mostra 46% da
   altura dele, e onde essa janela cai é escolha. Centrada, ela pega o miolo da
   tela; a 10% pega o alto — a marca do aplicativo e o pedido chegando, que é
   exatamente o que o cartão "Antes" está dizendo em palavras. */
/* ── 0% E NÃO 10%, E A CONTA MOSTRA POR QUE 10 CORTAVA ───────────────────────
   O arquivo é 316 × 475 (retrato 2:3) e a faixa é 286 × 197 (16/11 deitado).
   `cover` ajusta pela LARGURA: escala 0,905, altura projetada 430, sobra 233 de
   transbordo vertical. `object-position: 50% 10%` desce a janela 10% dessa sobra
   — 23px — e a janela passa a mostrar do y=5,4% ao y=51% do arquivo.

   Os 5,4% de cima são exatamente o topo do aparelho: a moldura e o entalhe. Era
   isso que estava cortado, e não a máscara — a rampa já tinha caído para 4%.

   A 0% a janela mostra de 0% a 45,8%: o celular chega inteiro pelo alto, e o que
   sai é o pé dele, que já saía. A intenção do comentário anterior — «pegar o
   alto, a marca do aplicativo e o pedido chegando» — continua valendo, e agora
   pega o alto de verdade em vez de pegar 23px abaixo dele. */
.sv-ciclo-foto--app img { object-position: 50% 0%; }


/* ════════════════════════════════════════════════════════════════════════════
   3 · RESPONSIVO

   Três pontos de virada, e cada um foi medido na peça que ele resolve — não
   herdado de uma régua de dispositivo. O fio troca de forma sozinho aos 880,
   por conta da fundação, e não precisa que nenhuma banda o acompanhe: ele muda
   de DESENHO, não de lugar na página.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 1200 · O CARTÃO DEIXA DE CABER AO LADO DA FOTO ─────────────────────────
   Medido: a coluna do cartão é 56% do palco, e a largura do palco cai junto com
   a janela. A 1425 o cartão sai com 390px e a fala mais longa ocupa duas
   linhas; a 1280, 346px e três linhas; a 1000, 269px e CINCO — o cartão passa
   de 457px de altura para 636 e vira uma torre ao lado de uma foto de 327.

   Abaixo de 1200 ele desce, mas NÃO vira uma faixa: continua com 28rem de
   largura, encostado à direita, sobre a metade de baixo da cena. A composição
   é a mesma — uma camada em cima da fotografia —, só que empilhada.

   A sobreposição sobe de 61% da coluna para 38% da largura inteira porque a
   régua mudou de dono: ali era a área do cartão, aqui é o palco. Nos dois casos
   o resultado é o mesmo — o topo do cartão cai por volta de 48% da altura da
   foto, e os dois rostos acabam em 42%. */
@media (max-width: 1200px) {
  /* A grade solta as duas colunas e as peças voltam à ordem do documento: o
     título primeiro, a ilustração depois. Não é só leitura — é o fio. Medido a
     1000: com o palco em cima, a banda mede 1387px e o traçado, que corre entre
     78% e 87% da altura, atravessava o parágrafo do meio ao fim. Com o texto em
     cima ele volta a passar por trás do cartão, que é onde ele foi desenhado
     para passar. */
  .sv-heroi-grade { grid-template-columns: minmax(0, 1fr); }
  .sv-heroi-grade > .sv-palco,
  .sv-heroi-grade > .sv-dizer { grid-area: auto; }

  /* A marca desce junto. Ela é ancorada à BANDA, e com o texto em cima os 3%
     antigos a punham atrás do título — onde ela deixa de ser atmosfera e vira
     névoa sobre a tipografia. A 36% ela reencontra o alto da fotografia, que é
     o lugar dela: recorte na frente, marca aparecendo pelos vãos. */
  .sv-heroi .bd-marca { --bd-marca-y: 36%; }

  .sv-palco { grid-template-columns: minmax(0, 1fr); }
  /* Em coluna única a fotografia sangra dos DOIS lados. Descontar só a goteira
     da esquerda deixaria a foto encostada num lado e recuada no outro, que lê
     como torta e não como sangramento — a mesma correção que `page-home.css`
     já aplica às irmãs dela. */
  .sv-foto {
    grid-area: 1 / 1 / 2 / 2;
    margin-inline: calc(-1 * var(--e-goteira));
  }
  .sv-consulta {
    grid-area: 2 / 1 / 3 / 2;
    justify-self: end;
    margin: -38% 0 0;
  }
}

/* ── 880 · SEM METADE LIVRE NÃO HÁ CAMADA, HÁ CAPA ──────────────────────────
   O comentário da posição, lá em cima, mede o cartão contra os dois rostos: a
   cabeça da paciente ocupa x 8–40% da fotografia. Só que o cartão tem largura
   FIXA — 28rem — e a foto encolhe com a janela, então a aresta esquerda dele
   anda para dentro da cena sozinha. Medida em porcentagem da foto:

     1000 → 49,4%   folgado
      860 → 41,9%   passa, e por 1,9 ponto
      816 → 39,0%   já dentro da cabeça
      640 → 25,0%   quinze pontos dentro
      430 →  5,1%   atravessa o rosto inteiro

   O critério da especificação é «nenhuma sobreposição de texto sobre rosto na
   foto», e ele quebrava em duas das seis larguras de conferência. Abaixo do
   corte o cartão desce e para de sobrepor: a composição deixa de ser camada em
   cima da cena e passa a ser cartão embaixo dela, que é a leitura honesta
   quando não há mais meia largura para ele ocupar.

   880 E NÃO OS 831 EM QUE A CONTA VIRA. É o número que a página inteira já usa
   — é onde a fundação troca o fio de forma, onde o orbital vira coluna única e
   onde a consultoria empilha —, e a 860 a folga é de 1,9 ponto: margem que
   qualquer mudança de corpo de fonte ou de goteira consome. Um ponto de quebra
   a mais na página valeria menos que os 49px de folga que este devolve.

   `stretch` e não `start`: com `start` o item de grade encolhe até o conteúdo,
   e o cartão passaria a medir menos que a coluna nas telas mais estreitas. Com
   `stretch` ele preenche e o `max-width: 28rem` continua sendo o teto. */
@media (max-width: 880px) {
  .sv-consulta {
    justify-self: stretch;
    margin: var(--e-5) 0 0;
  }
}

/* ── 1200 · A MEDIDA DE LEITURA DO CARTÃO ───────────────────────────────────
   Não é a largura do cartão que decide, é a MEDIDA — quantos caracteres cabem
   numa linha. Medido nos dois lados da fronteira antiga, que ficava em 1080:

     1081, quatro colunas   cartão 223px · medida 182px · 24 caracteres · 4 linhas
     1061, duas colunas     cartão 467px · medida 427px · 55 caracteres · 2 linhas

   Vinte e quatro caracteres é coluna de classificado. Uma frase de 82 vira
   quatro linhas rasgadas, o painel de título abre em quatro linhas de 92px
   contra as duas de 78,4 que ele foi desenhado para ter, e a foto no pé encolhe
   junto. Só que a quebra estava POSTA em 1080 — quer dizer, as quatro colunas
   continuavam de pé exatamente na largura que a medida reprova, de 1081 a 1200.

   1200 é o número da banda C, uma rolagem acima: é onde a SAVYME passa a coluna
   única. Com ele, as duas bandas da SAVYME trocam de forma no mesmo ponto, a
   janela de classificado desaparece, e a página deixa de ter uma fileira de
   quatro colunas de 223px logo abaixo de uma banda já empilhada.

   O painel de título passa a ocupar a fileira inteira: é cabeçalho, e
   cabeçalho de duas colunas não fica dentro de uma delas. */
@media (max-width: 1200px) {
  .sv-ciclo-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv-ciclo-cab {
    grid-column: 1 / -1;
    padding-block-start: 0;
    padding-inline-end: 0;
  }
  .sv-ciclo-lead { max-width: 52ch; }
}

/* ── 640 · O MESMO LIMITE, UMA VOLTA DEPOIS ─────────────────────────────────
   Duas colunas repetem aqui embaixo o aperto que quatro faziam lá em cima.
   Medido nos dois lados:

     650, duas colunas   cartão 285px · medida 251px · 32 caracteres · 3 linhas
     630, uma coluna     cartão 567px · medida 534px · 68 caracteres · 1 linha

   A proporção da faixa de foto NÃO muda aqui, e isso também é medido: 16/11
   sobre o cartão de 387px de um celular devolve 264px de fotografia, e o
   aparelho do "Antes" — retrato 2:3 dentro de um quadro deitado — aparece com
   46% da altura dele. Um quadro mais baixo mostraria MENOS aparelho, não mais,
   e é por isso que a tentação de achatar a faixa no estreito está errada. */
@media (max-width: 640px) {
  .sv-ciclo-grade { grid-template-columns: minmax(0, 1fr); }
}


/* ════════════════════════════════════════════════════════════════════════════
   4 · CORES FORÇADAS

   Em alto contraste o sistema reescreve texto, fundo e borda. O que precisa de
   instrução é só o que pinta com degradê ou com sombra — que o modo forçado
   não reescreve, e que sem tratamento vira mancha ou some.
   ════════════════════════════════════════════════════════════════════════════ */
@media (forced-colors: active) {
  /* O anel do selo é volume; o símbolo dentro dele é que carrega o sentido, e
     ele sobrevive como borda de sistema. O degradê interno sai. */
  .sv-selo-circulo {
    background-image: none;
    box-shadow: none;
  }
  /* A onda é a única peça desta banda cuja informação é a FORMA, e ela pinta
     com `background` — que o modo forçado reescreve para a cor de fundo, ou
     seja, some. `forced-color-adjust: none` devolve a barra ao autor e
     `CanvasText` a pinta com a cor do texto do sistema: catorze traços de
     alturas diferentes, que é o desenho certo sem o brilho na frente. */
  .sv-onda i {
    background: CanvasText;
    forced-color-adjust: none;
    opacity: 1;
  }
  /* (O "01 ·" que vivia a 62% de opacidade nesta régua saiu — ver o comentário
     do `.sv-ciclo-quando`. A regra que o devolvia ao contraste cheio saiu com
     ele: bloco de cores forçadas guardando um elemento que não existe mais é a
     forma mais silenciosa de dívida.) */
  /* O ponto que pulsa vira um ponto parado da cor do texto: a palavra ao lado
     já diz que a consulta está em andamento. */
  .sv-cs-ponto {
    animation: none;
    box-shadow: none;
    forced-color-adjust: none;
    background: CanvasText;
  }
}


/* ════════════════════════════════════════════════════════════════════════════
   5 · SEM MOVIMENTO

   Nada aqui degrada: as duas peças que se mexem já nascem no estado final. A
   onda parada continua sendo uma forma de onda, porque a altura de repouso de
   cada barra é `--a` e não a animação; o ponto parado continua aceso, porque
   opacidade 1 é onde a batida termina. Vence por ordem, sem `!important`.
   ════════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .sv-onda i {
    animation: none;
    transform: scaleY(var(--a));
  }
  .sv-cs-ponto {
    animation: none;
    opacity: 1;
  }
}


/* ────────────────────────────────────────────────────────────────────────────
   E · BANDA 09 — a consultoria
   ──────────────────────────────────────────────────────────────────────────── */


/* ════════════════════════════════════════════════════════════════════════════
   SOMA · banda-consultoria.css — a banda 09, entre o ciclo e o «menos ruído»

   É a única das seis sem antecedente na página, e por isso quase nada aqui é
   invenção: a grade repete a razão das bandas do Plantel e da SAVYME, o título
   usa os mesmos três números daquelas duas, a régua 04/05 é a `.bd-num` da
   fundação e a fotografia aperta os mesmos quatro botões da máquina de cena.
   O que é próprio desta banda são três decisões, e estão comentadas onde moram:
   o traçado do fio, a lista de entregas e o recorte da foto.

   DEPENDE DE
     styles.css          --c-teal · --c-teal-2 · --d-ink* · --d-line · --ease-out
                         .eyebrow · .lead · .btn · .serif
     soma-editorial.css  --e-1..--e-10 · --e-goteira · --e-secao
     soma-premium.css    --m-rapido · --m-medio
     page-home.css       .home-sec · .home-wrap · .reg-escuro · --t-* · --d-piso
     _fundacao.css       .soma-fio · .soma-fio-no · .bd-num · .bd-entra
                         (INTEIRO e ANTES deste arquivo)

   REGRAS QUE ESTE ARQUIVO CUMPRE
     · Zero cor literal. As duas listas de paradas que cumpriam esta regra por
       cópia saíram na montagem: `.cons-foto` entrou na lista da máquina de
       cena, no bloco 2, e na lista do grão logo abaixo dela.
     · Zero `!important`, zero seletor de id.
     · Só `transform` e `opacity` se movem. O bloco de `prefers-reduced-motion`
       no fim desliga o que este arquivo liga, e só isso.
   ════════════════════════════════════════════════════════════════════════════ */


/* ══ 1 · A GRADE ════════════════════════════════════════════════════════════
   Argumento à esquerda, cena à direita — e é a única banda de fotografia da
   página que fica desse lado. A do Plantel e a da SAVYME sangram as duas pela
   ESQUERDA; uma terceira igual, três bandas depois, faria a metade de baixo
   ler como uma coluna de fotos empilhadas. Aqui o eixo vira uma vez.

   1,12 contra 0,88 e não meio a meio: a coluna da esquerda carrega cinco peças,
   uma delas uma grade de duas colunas por dentro; a da direita carrega uma.
   Medido em 1425: 678 para o texto — 315 por frente, com o vão de 37 — contra
   533 de coluna para a foto, que viram 604 quando ela sangra a goteira.
   ═══════════════════════════════════════════════════════════════════════════ */
.cons-wrap {
  align-items: center;
  display: grid;
  gap: clamp(var(--e-7), 5vw, var(--e-9));
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  /* o fio mora em `z-index: 0` dentro da banda; sem esta linha o conteúdo
     dividiria a mesma camada com ele e a ordem passaria a ser a do documento */
  position: relative;
  z-index: 1;
}


/* ══ 2 · O FIO DESTA BANDA ══════════════════════════════════════════════════
   O traçado desta banda tem uma exigência que as outras não têm, e é ela que
   explica o desenho: aqui a coluna de texto ocupa 53% da largura e 70% da
   altura. Um fio de 1,4px em teal cheio passando por baixo dessa coluna baixa o
   fundo local para luminância de teal, e o branco gelo sobre teal mede 2,4:1 —
   um terço do que a tipografia precisa. Então o traçado não passa por baixo do
   texto: ele contorna.

   Medido ponto a ponto, com o traçado amostrado em 1200 posições e comparado
   com as caixas de LINHA de cada peça (não com a caixa do bloco): a distância
   mínima do fio a qualquer letra é de 104px em 1600, 93 em 1425, 72 em 1280,
   39 em 1000 e 34 em 940 — nunca abaixo de 34 em toda a faixa de 881 a 1600.
   A única peça que ele toca é o BOTÃO, que é uma pílula de fundo cheio: ali o
   fio some por trás e reaparece do outro lado, que é o que se espera de uma
   linha que corre atrás da página.

   ENTRA em y=530 e SAI em y=160. A saída cai dentro dos 26% de dissolução do
   alto da fotografia — 227 contra 219 do topo dela em 1425 — e é de propósito:
   a ponta não termina em cima da imagem nem morre atrás dela, atravessa a
   parte em que a foto ainda é meio transparente. Em 1000 e 900, onde a foto é
   menor, a mesma saída passa 43 e 86px acima dela.

   O NÓ cai em x=55%, a costura entre o argumento e a cena — o vão entre as
   duas colunas. Ela é estável porque a goteira da página e o vão da grade são
   ambos 5vw: sobra a razão 1,12/0,88 mandando no resultado, e a costura mede
   55,1% em 1425, 1280, 1000 e 900. Só acima de 1440, onde o `.home-wrap` trava
   em 1440 e a goteira no teto de 72, ela cede para 54,6% — 7px de desvio num
   nó de 7px.

   `--no-de` e `--no-ate` ficam no padrão da fundação porque a conta fecha: o nó
   está a 51,9% do comprimento do traçado, e a corrida (cover 0% → cover 50%)
   chega nele em cover 25,9%. Os 26% de lá acendem logo DEPOIS da passagem, que
   é o que se quer — nó que acende antes da luz chegar é nó que se ligou
   sozinho. */


/* ══ 3 · A COLUNA DO ARGUMENTO ══════════════════════════════════════════════ */

/* Os três números do título são copiados de `.plantel-bloco h2` e
   `.savyme-bloco h2` sem uma casa de diferença. Uma banda nova que chegasse com
   outra escala de título não leria como banda nova: leria como enxerto. */
.cons-texto h2 {
  font-size: var(--t-2xl);
  font-weight: 500;
  letter-spacing: -0.028em;
  line-height: 1.1;
  margin-top: var(--e-4);
  /* SEM `max-width`, e a medida que faltaria aqui não existe. Conferido: em
     1425 a coluna do texto mede 678px e 24ch deste título medem 751 — qualquer
     limite em `ch` que valesse alguma coisa teria de ser MENOR que a coluna, e
     aí passaria a cortar o título em vez de compor com ele. Quem dá a medida é
     a coluna, e ela entrega o que se queria: de 900 a 1600 o título fecha em
     duas linhas, a primeira dor inteira na de cima e a serifa inteira na de
     baixo, sem uma quebra forçada. */
}
.cons-texto .lead { margin-top: var(--e-5); }


/* ══ 4 · AS DUAS FRENTES, EM CARTÃO QUE VIRA ════════════════════════════════
   ESTE BLOCO INVERTE UMA DECISÃO ANTERIOR, e a inversão fica escrita para não
   parecer descuido. O texto que estava aqui dizia: «a régua da fundação, e não
   cartões de vidro — a banda D, imediatamente acima, já é uma fileira de três
   cartões, e repetir a mesma superfície uma rolagem depois transformaria duas
   peças diferentes na mesma peça». O argumento continua correto sobre SUPERFÍCIE
   REPETIDA, e é justamente por isso que estes dois não são os cartões de lá:
   aqueles são painéis parados que mostram tudo de uma vez; estes têm DUAS FACES
   e giram. O que distingue uma peça da outra deixou de ser o material e passou a
   ser o comportamento — e comportamento distingue mais que textura.

   O COMPONENTE É O `tricky-robin-67` DO ACERVO (ElSombrero2, MIT), e ele chega
   com três defeitos registrados pelo próprio catálogo — «blur/backdrop-filter ·
   animação infinita» e «sem prefers-reduced-motion». Os três saem:

     · O `backdrop-filter` do original vai embora. A folha inteira o proíbe em
       peça que anda, e esta gira: reamostrar a árvore de trás a cada quadro de
       uma rotação 3D é o custo pago duas vezes. O vidro aqui é o da casa —
       degradê com alfa —, que compõe sem reler o fundo.
     · A animação infinita do original é um retângulo girando atrás da face para
       simular borda viva. Ela roda para sempre, em duas peças, fora da tela na
       maior parte da visita. Sai. A aresta acesa já existe na casa e é estática.
     · O movimento reduzido e o alto contraste ganham bloco próprio no fim.

   E ENTRA A CORREÇÃO QUE O ACERVO NÃO TEM: O GIRO É PROGRESSIVO.
   O componente vive de `:hover`. Num aparelho de toque não há hover — o cartão
   nunca vira, e metade do conteúdo (a promessa, as três entregas e o link) fica
   inalcançável. Aqui o giro só EXISTE dentro de `@media (hover: hover)`. Sem
   ponteiro, as duas faces empilham no fluxo e o cartão é o que sempre foi: nome,
   promessa, entregas e link, todos visíveis. É melhoria progressiva na direção
   certa — o conteúdo primeiro, o gesto depois.

   O TECLADO TAMBÉM VIRA. O link mora na face de trás; `:focus-within` no cartão
   dispara o mesmo giro que o ponteiro dispara. Quem chega pelo Tab vê o alvo
   antes de acioná-lo, em vez de acionar um link virado de costas.
   ═══════════════════════════════════════════════════════════════════════════ */

.cons-cartas {
  display: grid;
  /* `auto-fit` com faixa de 13rem é a mesma régua da fundação: as duas colunas
     colapsam sozinhas abaixo de ~208px por coluna, e por isso não há media query
     para o empilhamento aqui. */
  gap: clamp(var(--e-4), 1.6vw, var(--e-5));
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  list-style: none;
  margin: var(--e-7) 0 0;
  padding: 0;
}

/* A PERSPECTIVA MORA NO ITEM E NÃO NO EIXO, e a distinção é o que faz o giro
   parecer profundidade em vez de achatamento. `perspective` aplicada ao próprio
   elemento que gira não existe — ela é propriedade do PAI, e a origem dela é o
   centro do pai. 900px é a distância que dá volume sem exagerar a fuga: a 400px
   um cartão de 260px entraria em deformação de grande-angular no meio da volta. */
.cons-carta {
  perspective: 900px;
  position: relative;
}

/* O EIXO. Sem hover ele é só uma pilha: as duas faces em fluxo, uma sob a
   outra, com o vão da casa entre elas. */
.cons-vira {
  display: grid;
  gap: var(--e-3);
  position: relative;
}

/* ── A FACE ─────────────────────────────────────────────────────────────────
   O vidro é o da casa, e não o `#151515` chapado do original: mesmo degradê de
   162° do `.bd-vidro`, mesma borda, mesma aresta acesa por dentro. O que muda é
   a mão do degradê entre as duas faces — a da frente nasce mais clara em cima, a
   de trás é meio ponto mais funda —, porque duas faces idênticas giram e a
   pessoa não tem como saber se o cartão virou ou se voltou. */
.cons-face {
  /* ── A SUPERFÍCIE PREMIUM ─────────────────────────────────────────────────
     Três camadas em vez do degradê único de antes, e cada uma faz uma coisa que
     a de baixo não faz:
       1 · o BRILHO DE QUINA — elipse de 88% × 54% ancorada acima da borda de
           cima. É a luz entrando por onde a página inteira ilumina, e é o que
           tira do cartão o ar de retângulo pintado.
       2 · a POÇA FUNDA no pé à direita, em `--c-teal-d`: dá volume ao vidro
           escurecendo justo onde a luz da quina não chega.
       3 · o CORPO, o mesmo degradê de 162° do `.bd-vidro`, agora um pouco mais
           denso no alto (82% contra 76%) para sustentar as duas camadas acima. */
  background-image:
    radial-gradient(88% 54% at 22% -8%,
      color-mix(in srgb, var(--c-teal-2) 13%, transparent) 0%,
      color-mix(in srgb, var(--c-teal) 5%, transparent) 42%,
      transparent 78%),
    radial-gradient(70% 52% at 96% 104%,
      color-mix(in srgb, var(--c-teal-d) 22%, transparent) 0%,
      transparent 72%),
    linear-gradient(162deg,
      color-mix(in srgb, var(--d-bg-3) 82%, transparent) 0%,
      color-mix(in srgb, var(--d-piso) 62%, transparent) 100%);
  border: 1px solid var(--d-line);
  border-radius: var(--bd-raio);
  box-shadow:
    var(--s-3),
    0 0 30px -10px color-mix(in srgb, var(--c-teal) 30%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--d-ink) 10%, transparent);
  display: grid;
  /* recorta o aro que gira no `::after` abaixo — sem isto ele sai da cápsula */
  overflow: hidden;
  padding: clamp(var(--e-4), 1.5vw, var(--e-5));
  position: relative;
}

/* ── O GLOW QUE CORRE NA BORDA ───────────────────────────────────────────────
   É o gesto do `tricky-robin-67` que faltava. No original ele é um retângulo de
   160 × 160% girando ATRÁS de uma face menor: o que se vê pela fresta de 1% é
   uma luz percorrendo a moldura. A mecânica é boa e a implementação tem dois
   defeitos que o próprio catálogo aponta — roda infinito e o `@keyframes` dele
   está QUEBRADO (as duas paradas são `0%`, então nada gira; o efeito do acervo
   nunca funcionou como anunciado).

   AQUI ELE É UM CONE MASCARADO EM ARO, que é a mesma imagem sem o retângulo
   sobrando: `conic-gradient` com um arco aceso, recortado por uma máscara radial
   que só deixa passar os 2% de fora. Uma camada, uma rotação, nenhum elemento
   extra no HTML.

   E ELE SÓ RODA SOB PONTEIRO. Dois cartões girando para sempre, fora da tela na
   maior parte da visita, é a mesma conta que a folha já fez contra o anel do CTA
   nos seis painéis fechados. Aqui o laço nasce com o `:hover`/`:focus-within` —
   quando o cartão vira, a borda acende e corre; parado, ele é um cartão de vidro
   com a aresta acesa que sempre teve. */
/* O ÂNGULO É PROPRIEDADE REGISTRADA, e é o que faz o cone girar sem o ELEMENTO
   girar. Girar o elemento giraria a máscara junto: o aro deixaria de acompanhar
   a cápsula e viraria um retângulo arredondado rodando dentro dela. Quem anda é
   a luz; a moldura fica parada.

   O PRECEDENTE É DA CASA: `soma-premium.css` já anima `--soma-giro` alimentando
   um `conic-gradient(from …)` no anel do `.btn-primary`. Mesmo padrão, mesma
   mecânica. Sem o registro a propriedade é texto e o motor troca 0deg por 1turn
   de uma vez, no meio — a luz saltaria em vez de correr. */
@property --cons-aro-giro {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* ── O ARO, E O DEFEITO QUE ELE TINHA ────────────────────────────────────────
   A primeira versão recortava o cone com
   `radial-gradient(closest-side, transparent 96,4%, #000 97,8%)`. Duas coisas
   estavam erradas nisso, e as duas juntas produziam a mancha que se via:

     1 · `closest-side` sem forma declarada é uma ELIPSE, e a caixa não é
         quadrada — o recorte não tinha nada a ver com a cápsula.
     2 · pior: além de 100% do raio, um degradê continua com a ÚLTIMA parada.
         A última era `#000`, opaca. Ou seja, tudo o que ficava FORA da elipse
         era revelado — os quatro cantos do cartão, inteiros. O que aparecia não
         era um aro: era o cone cru vazando pelos cantos.

   A CORREÇÃO É A RECEITA DE BORDA-DEGRADÊ, e ela não tem esse problema por
   construção: o cone pinta a caixa de BORDA inteira, a máscara soma duas
   camadas — uma recortada na caixa de preenchimento, outra na de borda — e
   `exclude` deixa passar só a diferença entre as duas, que é exatamente o anel
   da borda. Ele segue o `border-radius` sozinho, em qualquer proporção de caixa,
   porque é o próprio anel da borda e não uma aproximação dele. A espessura passa
   a ser a da borda: 1,5px, o peso de fio desta folha. */
.cons-face::after {
  background-image: conic-gradient(from var(--cons-aro-giro),
    transparent 0deg,
    color-mix(in srgb, var(--c-teal-2) 88%, transparent) 34deg,
    color-mix(in srgb, var(--c-teal) 52%, transparent) 66deg,
    transparent 108deg,
    transparent 360deg);
  background-origin: border-box;
  background-clip: border-box;
  border: 1.5px solid transparent;
  border-radius: inherit;
  content: '';
  inset: 0;
  /* ── ELE CORRE SEMPRE, E NÃO SÓ SOB O CURSOR ──────────────────────────────
     Nasceu preso ao `:hover` pela doutrina desta folha contra laço infinito, e
     o dono corrigiu: a borda viva é o que dá vida à peça PARADA — presa ao
     ponteiro, ela nunca é vista por quem só passa os olhos, que é a maioria.

     O CUSTO FOI MEDIDO ANTES DE ABRIR A EXCEÇÃO. São dois cartões, e o que
     repinta por quadro é o anel de 1,5px: o perímetro de uma face de 327 × 239
     dá ~1.130px de contorno, vezes 1,5 de espessura, vezes dois cartões — cerca
     de 3.400px² por quadro. Para comparação, a trama do orbital repintava a
     caixa inteira de um cartão (390 × 749 = 292.000px²) antes de virar
     translação. Três mil e quatrocentos pixels é ruído.

     6s EM REPOUSO E 3,4s SOB O PONTEIRO. A volta lenta é atmosfera — a luz dá
     uma volta a cada seis segundos e não pede atenção; quando o cartão vira, ela
     acelera junto e passa a acompanhar o gesto. Dois estados do mesmo objeto, e
     não dois objetos. */
  animation: cons-aro-corre 6s linear infinite;
  opacity: .82;
  pointer-events: none;
  position: absolute;
  transition: opacity var(--m-medio) var(--ease-out);
  z-index: 0;
  -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
          mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  -webkit-mask-clip: padding-box, border-box;
          mask-clip: padding-box, border-box;
  -webkit-mask-composite: xor;      /* o nome antigo do mesmo operador */
          mask-composite: exclude;
}
/* o conteúdo das faces sobe um plano: o aro é `::after` e pintaria por cima */
.cons-face > * { position: relative; z-index: 1; }

/* Quem anda é o ÂNGULO do cone, não o elemento — ver o `@property` acima. */
@keyframes cons-aro-corre { to { --cons-aro-giro: 1turn; } }

/* O FIO DE LUZ NO ALTO, recuado pelo raio do canto — a mesma regra e o mesmo
   motivo do `.bd-vidro::before`: é a única forma de uma reta de 1px conviver com
   um canto arredondado sem cortá-lo. */
.cons-face::before {
  background-image: linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--c-teal-2) 38%, transparent) 24%,
    color-mix(in srgb, var(--c-teal-2) 58%, transparent) 50%,
    color-mix(in srgb, var(--c-teal-2) 38%, transparent) 76%,
    transparent 100%);
  content: '';
  height: 1px;
  inset-block-start: 0;
  inset-inline: var(--bd-raio);
  pointer-events: none;
  position: absolute;
}

/* ── A FACE DA FRENTE — quem é a frente ─────────────────────────────────────
   Três linhas e nada mais: a marca, o nome e a dica. É o oposto do cartão de
   vidro da banda de cima, que mostra tudo de uma vez; aqui a face GUARDA, e
   guardar é o que dá sentido a virar. */
.cons-face--frente {
  align-content: start;
  gap: var(--e-4);
  justify-items: start;
}

/* A MARCA É O GLIFO DO ORBITAL, no disco do mesmo desenho do `.orb-selo`. Só a
   dimensão muda: lá ele é o selo do cartão aberto, aqui é a assinatura da
   frente. Um ícone novo seria o segundo desenho da mesma coisa na mesma página. */
.cons-marca {
  align-items: center;
  background-image: radial-gradient(120% 120% at 30% 0%,
    color-mix(in srgb, var(--c-teal) 22%, transparent) 0%,
    color-mix(in srgb, var(--c-teal-d) 10%, transparent) 52%,
    transparent 100%);
  border: 1px solid color-mix(in srgb, var(--c-teal) 32%, transparent);
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--d-ink) 12%, transparent),
    0 0 20px -8px color-mix(in srgb, var(--c-teal) 56%, transparent);
  color: var(--c-teal-2);
  display: inline-flex;
  flex: none;
  height: 46px;
  justify-content: center;
  width: 46px;
}
.cons-marca svg {
  fill: none;
  height: 24px;
  stroke: currentColor;
  stroke-width: 1.5;
  width: 24px;
}

.cons-face--frente h3 {
  color: var(--d-ink);
  font-size: var(--t-lg);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0;
  /* `balance` porque «Consultoria de gestão» quebra em duas linhas na coluna
     estreita, e sem ele a segunda fica com uma palavra sozinha */
  text-wrap: balance;
}

/* A DICA. Ela só faz sentido onde há ponteiro para virar o cartão — sem hover as
   duas faces já estão à vista, e mandar virar seria mandar fazer o que já está
   feito. Nasce escondida; é o bloco de `(hover: hover)` que a acende. */
.cons-dica { display: none; }

/* ── A FACE DE TRÁS — o que a frente entrega ────────────────────────────────
   A promessa em `--d-ink-2`/`--t-sm` e a lista em `--d-ink-3`/`--t-xs`: os
   mesmos dois pares de antes, pela mesma razão medida — a lista tem três linhas
   e a promessa tem uma, e no mesmo tom a lista leria mais forte que a frase que
   a explica. */
.cons-face--verso {
  align-content: start;
  gap: var(--e-4);
}
.cons-face--verso > p {
  color: var(--d-ink-2);
  font-size: var(--t-sm);
  line-height: 1.55;
  margin: 0;
}

/* O QUE CADA FRENTE ENTREGA.
   Um filete contínuo à esquerda, e nenhum ícone. Seis vezes o mesmo tique de
   confirmação não informa nada seis vezes: é ícone usado como marcador de lista.
   O filete diz «estes três pertencem a esta frente», e diz de uma vez em vez de
   três. Contínuo e não por item, porque três filetes separados leriam como três
   coisas soltas e não como uma entrega. */
.cons-entrega {
  border-inline-start: 1px solid var(--d-line);
  color: var(--d-ink-3);
  display: grid;
  font-size: var(--t-xs);
  gap: var(--e-2);
  line-height: 1.5;
  list-style: none;
  margin: 0;
  padding: 0 0 0 var(--e-4);
}

/* O LINK. Ele é o alvo do Tab e o gatilho do `:focus-within` — por isso mora na
   face de trás e não na da frente: o foco tem de VIRAR o cartão, e um link na
   face visível não teria o que virar. `align-self: end` o prende no pé da face,
   que é onde a leitura termina nas duas. */
.cons-link {
  align-items: center;
  align-self: end;
  color: var(--c-teal-2);
  display: inline-flex;
  font-size: var(--t-xs);
  font-weight: 600;
  gap: var(--e-2);
  justify-self: start;
  text-decoration: none;
}

/* a seta é a mesma do `.sol-ir` e do `.btn .arr` — 15px, traço 2,5, ponta
   redonda. Desenhar outra seria uma segunda seta na mesma página. */
.cons-ir { flex: none; }



/* ══ 5 · A AÇÃO ═════════════════════════════════════════════════════════════
   Um botão só. A página inteira leva ao contato — não há plano para assinar —,
   e os dois nomes das frentes já são os links para as âncoras `#gestao` e
   `#tecnica` da página de solução. Um terceiro botão aqui seria a terceira
   forma de dizer a mesma coisa na mesma banda. */
.cons-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  margin-top: var(--e-7);
}


/* ══ 6 · A CENA ═════════════════════════════════════════════════════════════
   A CHAPA VIROU RECORTE, e a peça mudou de categoria.

   O QUE SAIU: `indicadores-apresentacao`, uma fotografia retangular dentro de um
   quadro 16/11, com a máquina `--cena-mascara` dissolvendo as quatro bordas. O
   bloco que estava aqui defendia a escolha por duas medidas — era a única das
   quatro do acervo em que as duas frentes cabiam no mesmo quadro, e a única cuja
   borda esquerda já era escura (64 de luminância contra 122, 128 e 132 das
   outras), que é o que fazia a rampa contra o texto sumir de verdade. As duas
   medidas eram boas e continuam verdadeiras sobre AQUELE arquivo. O que mudou é
   que a banda deixou de precisar de um arquivo com bordas.

   O QUE ENTROU: `equipe-consultoria`, um recorte com canal alfa — quatro
   profissionais caminhando juntos, sem fundo. (Antes daqui esteve
   `mesa-consultoria`, quatro pessoas em volta de uma mesa redonda; a troca é de
   direção de arte e o preparo do arquivo é o mesmo.) Recorte não tem quatro
   bordas para dissolver: tem UM corte, o do pé, onde as pernas terminam na borda
   do arquivo. Então a máquina de cena sai (ela foi retirada da lista no
   bloco 2 deste arquivo, com a nota) e entram três coisas, que são as mesmas
   três do recorte do Plantel porque o problema é o mesmo:

     1 · a RAMPA do pé, em um eixo só, com as nove paradas do smoothstep da casa;
     2 · a POÇA, que dá chão — sem ela o recorte flutua sobre o campo;
     3 · a SOMBRA que segue o alfa, e não a caixa, que é a única coisa que
         `drop-shadow` faz e `box-shadow` não.

   O ARQUIVO FOI PREPARADO, E O PRIMEIRO PREPARO ESTAVA ERRADO — fica escrito
   porque o defeito era invisível no arquivo e gritante na tela.

   O original tem 1800 × 1400 e um VÉU DE ALFA por cima do retângulo inteiro:
   valores de 1 a 20, em 2,1% de todos os pixels — o arquivo anterior tinha o
   mesmo defeito, em 5,9%. É defeito de exportação, e vem de novo a cada arquivo
   novo: quem trocar a imagem precisa refazer o preparo, não só converter. Sozinho ele não se vê — 2 de
   255 sobre campo navy é nada. Mas o `drop-shadow` do bloco abaixo segue o ALFA,
   e alfa 2 é alfa: a sombra que ele desenhava não era a da cena, era a do
   RETÂNGULO inteiro do arquivo, deslocada 22px para baixo e borrada em 34. O
   resultado é uma faixa horizontal no campo, embaixo da foto — a «união» que o
   dono viu, e que não vinha de emenda nenhuma: vinha de uma sombra de moldura.

   O preparo agora põe PISO DURO no alfa (tudo abaixo de 20 vira 0) e remapeia
   20–255 de volta para 0–255, para a borda não ganhar um degrau de vinte níveis
   onde antes era contínua. Conferido depois: a primeira e a última linha do
   recorte têm alfa máximo ZERO, e a área de alfa nulo sobe de 35,1% para 41,0%.
   O redimensionamento para 760 reaplica o piso, porque o LANCZOS reintroduz halo
   de alfa baixo nas bordas.

   Com o alfa limpo, o recorte mede 1254 × 867 (com 6px de respiro). Duas
   larguras, dois formatos: AVIF 57 e 34 KB, WebP 109 e 63 KB — 263 KB no
   conjunto, contra 569 KB do arquivo anterior.

   O SCRIPT DE PREPARO está em `tools/preparar-recorte.py`. Ele faz o piso, o
   remapeamento, o recorte pelo alfa, os dois tamanhos e a conferência de borda
   numa passada — e existe justamente para o próximo recorte não repetir a
   sombra de moldura por esquecimento.
   ═══════════════════════════════════════════════════════════════════════════ */

.cons-cena {
  margin: 0;
  /* até a borda do documento: a goteira do `.home-wrap` é exatamente o que
     separa a cena da beirada, então é ela que se desconta — o espelho do que a
     `.plantel-foto` e a `.savyme-foto` fazem do outro lado */
  margin-inline-end: calc(-1 * var(--e-goteira));
  position: relative;
}

/* A POÇA. Centro em 50%/82%: abaixo do meio da peça, e não atrás dela. Poça
   atrás do objeto ilumina o objeto; poça sob ele dá CHÃO, que é o que um recorte
   sem moldura precisa para não flutuar. O `z-index: -1` a põe atrás da imagem
   sem tirá-la do isolamento da figura. */
/* ── O DITHER, E POR QUE ELE PRECISA EXISTIR ─────────────────────────────────
   A poça abaixo é teal a 17% de alfa sobre o navy do `html` (rgb 3,10,22).
   Medido reconstruindo o composto em canvas, ao longo do raio vertical:

       canal verde   39 → 10        ou seja 29 NÍVEIS de 8 bits
       rampa         147 px
       faixa lisa mais larga        6 px

   Vinte e nove níveis para atravessar 147px dá um degrau de 1/255 a cada ~5px.
   No raio isso é uma faixa de 6px; TANGENCIALMENTE, na barriga achatada da
   elipse, o mesmo contorno se estica por centenas de pixels na horizontal — e é
   isso que se lê como «linha dura» no campo vazio embaixo da cena. Não é emenda
   de imagem: o alfa do recorte servido tem salto máximo de 5,4 em 255 entre
   linhas vizinhas, ou seja, rampa limpa. É banda de Mach de um degrau só.

   Oito bits não têm níveis para gastar aqui, então o conserto não é reescrever
   o gradiente — é DITHER: ruído fino que dissolve o degrau em granulado.

   RUÍDO DE COR COM ALFA CONSTANTE, e não ruído de alfa. Ruído no alfa sobre
   campo escuro só CLAREIA (não há espaço abaixo de zero para escurecer), e o
   que se ganha em quebra de contorno se perde em levantar a média. Aqui a
   `feColorMatrix` varia o RGB entre navy e um teal escuro com alfa fixo em
   .055, e a média do ruído cai em cima da própria rampa. Medido:

       lift médio    +0,14 nível        (nada — o quantum é 1)
       desvio        ±2 níveis          (o bastante para cruzar o degrau)
       degraus na média por linha    95 → 138

   `color-interpolation-filters='sRGB'` é obrigatório: o padrão de filtro SVG é
   linearRGB, e nele os mesmos coeficientes entregam outro ruído.
   `stitchTiles='stitch'` para o ladrilho de 140px não costurar visível.

   A MÁSCARA existe para o ruído não desenhar o retângulo do `::before`. É a
   mesma advertência que o `maquete.css` já registra («qualquer cor opaca aqui
   voltaria a desenhar o retângulo do palco»): +0,14 de média é pouco, mas é uma
   descontinuidade estatística na borda da caixa. A máscara é opaca até 76% —
   exatamente onde o gradiente já morreu — e some até 100%. O gradiente não sente
   nada; só o ruído é aparado. */
.cons-cena::before {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='r' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='.03 0 0 0 0 .20 0 0 0 0 .27 0 0 0 0 0 0 0 0 .055'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23r)'/%3E%3C/svg%3E"),
    radial-gradient(58% 29.62% at 50% 57.82%,
      color-mix(in srgb, var(--c-teal) 17%, transparent) 0%,
      color-mix(in srgb, var(--c-teal-d) 9%, transparent) 44%,
      transparent 76%);
  background-size: 140px 140px, auto;
  content: '';
  inset: 4% -6% -60%;
  -webkit-mask-image: radial-gradient(58% 29.62% at 50% 57.82%, #000 0 76%, transparent 100%);
  mask-image: radial-gradient(58% 29.62% at 50% 57.82%, #000 0 76%, transparent 100%);
  pointer-events: none;
  position: absolute;
  z-index: -1;
}

.cons-cena img {
  display: block;
  height: auto;
  width: 100%;

  /* ── A RAMPA DO PÉ NÃO MORA AQUI: MORA NO ALFA DO ARQUIVO ─────────────────
     Aqui já houve uma máscara CSS com as nove paradas do smoothstep da casa,
     começando em 84% da altura, e o dono viu «a transição aparecendo» logo
     abaixo da cena. Estava certo: era ela. Saiu, e não volta — mas o motivo de
     não voltar mudou de nome, e vale escrever direito.

     NA ÉPOCA o motivo era que o ativo se dissolvia sozinho: `mesa-consultoria`
     tinha cobertura de 79% em y=83% caindo a ZERO em y=95%. A máscara era um
     segundo desvanecimento por cima de um que já existia, e duas dissoluções
     sobrepostas não somam suavidade — a de cima corta a de baixo pela metade e
     o limite entre as duas vira a faixa horizontal que se enxerga.

     HOJE o ativo é `equipe-consultoria`, e ele NÃO se dissolve sozinho: é corte
     seco, com 93–95% de cobertura até y=96%. Precisava de rampa. Ela foi feita
     — e feita NO ARQUIVO, não aqui.

     POR QUE NO ARQUIVO, e esta é a parte que não pode se perder: `filter` é
     aplicado ANTES de `mask` na ordem de renderização. Uma máscara CSS
     dissolveria a IMAGEM e deixaria o `drop-shadow` abaixo ainda seguindo o
     retângulo duro do alfa — quer dizer, devolveria exatamente a faixa
     horizontal que este bloco existe para não ter. Com o desvanecimento no
     canal alfa, a sombra o acompanha de graça, porque é o alfa que ela segue.

     Medido no arquivo servido, alfa médio por altura:
         y=70%  247   ·  y=80%  183  ·  y=85%  124
         y=90%   62   ·  y=95%   13  ·  y=98%    0
     Maior salto entre linhas vizinhas na rampa: 1,91 de 255 — sem quina.

     A REGRA, generalizada: recorte com alfa não tem borda para dissolver AQUI.
     Se o arquivo novo tiver corte seco, quem dissolve é `tools/preparar-recorte.py`,
     antes de o arquivo entrar. Máscara nesta folha, nunca. */

  /* A SOMBRA SEGUE O ALFA. Uma queda funda e deslocada para baixo — o objeto
     está À FRENTE do campo, e sombra colada no objeto diz que ele encosta. E um
     contraluz teal curto, do lado de onde a luz desta banda vem: o fio de luz
     entra pela esquerda baixa e sai pela direita alta, e a cena está à direita.
     As duas são estáticas — `filter` não entra na lista do que anda por quadro
     nesta folha. */
  filter:
    drop-shadow(0 22px 34px color-mix(in srgb, var(--d-piso) 74%, transparent))
    drop-shadow(-8px 0 18px color-mix(in srgb, var(--c-teal) 18%, transparent));
}

/* A LEGENDA. Mesma voz e mesma régua da `.pl-painel-nota`, e encolhida junto com
   o motivo dela: a ressalva de número apontava para o painel de parede da
   fotografia antiga, que trazia percentuais e valores em reais. Neste recorte há
   um tablet e um laptop com gráficos pequenos demais para se ler um número —
   ressalva que aponta para o que não existe é o começo de ninguém ler a próxima.

   ALINHADA AO INÍCIO, e não à direita como a do Plantel. Lá o alinhamento
   desviava do recorte do gestor; aqui não há ninguém para desviar, e ela volta ao
   eixo de leitura da coluna ao lado. O recuo à direita devolve a goteira que a
   figura sangrou: legenda encostada na beirada da janela lê como texto que
   escapou, e não como legenda. */
.cons-cena-nota {
  color: var(--d-ink-3);
  font-family: var(--f-rotulo);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1.5;
  margin-top: var(--e-4);
  padding-inline-end: var(--e-goteira);
  text-transform: uppercase;
}


/* ══ 7 · O PONTEIRO — E O GIRO ══════════════════════════════════════════════
   TUDO O QUE FAZ O CARTÃO VIRAR MORA AQUI DENTRO, e é isso que torna o giro uma
   melhoria progressiva em vez de um requisito. Fora deste bloco não existe
   `preserve-3d`, não existe `backface-visibility` e não existe rotação: quem
   chega sem ponteiro — toque, teclado em aparelho sem mouse, leitor de tela —
   encontra as duas faces empilhadas, todas legíveis, na ordem em que se lê.

   `transform-style: preserve-3d` NO EIXO E NÃO NA FACE. É o eixo que gira, e é
   ele que precisa manter os filhos no espaço 3D; declarado na face, cada uma
   acharia que É o palco e as duas ficariam no mesmo plano.

   `backface-visibility: hidden` NAS DUAS. Sem ela as duas faces são visíveis o
   tempo todo e o giro mostra o verso espelhado da frente por cima do verso de
   verdade — o defeito clássico, e o original do acervo já o resolve assim.

   AS DUAS FACES NA MESMA CÉLULA (`grid-area: 1 / 1`) e o vão do eixo a zero: em
   fluxo elas somavam altura, e o cartão media a soma das duas. Sobrepostas, ele
   mede a MAIOR — que é sempre a de trás, com a promessa, as três entregas e o
   link. A da frente, com três linhas, ganha a folga de graça, e é essa folga que
   faz a face da frente respirar.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (hover: hover) {
  .cons-vira {
    gap: 0;
    transform-style: preserve-3d;
    transition: transform var(--m-lento) var(--m-entra);
  }
  .cons-face {
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    grid-area: 1 / 1;
  }
  /* A face de trás nasce virada; o eixo gira meia volta e ela chega de frente.
     A de trás é meio ponto mais funda que a da frente — duas faces idênticas
     giram e a pessoa não tem como saber se o cartão virou ou voltou. */
  .cons-face--verso {
    background-image: linear-gradient(162deg,
      color-mix(in srgb, var(--d-bg-3) 64%, transparent) 0%,
      color-mix(in srgb, var(--d-piso) 72%, transparent) 100%);
    transform: rotateY(180deg);
  }
  .cons-carta:hover .cons-vira,
  .cons-carta:focus-within .cons-vira { transform: rotateY(180deg); }

  /* O ARO ACELERA E ACENDE quando o cartão vira — ele já estava correndo a 6s
     em repouso (ver o bloco da face). Só a duração e a opacidade mudam, e a
     `animation-name` é a MESMA: trocar só o tempo mantém a fase, então a luz
     acelera de onde está em vez de saltar para o começo do ciclo. */
  .cons-carta:hover .cons-face::after,
  .cons-carta:focus-within .cons-face::after {
    animation-duration: 3.4s;
    opacity: 1;
  }

  /* A DICA APARECE, porque só aqui ela é verdade. Cápsula pequena no pé da face
     da frente, no tom de apoio: ela não é informação, é a instrução mínima que
     um objeto de duas faces deve à pessoa que o encontra parado. */
  .cons-dica {
    align-items: center;
    align-self: end;
    border: 1px solid var(--d-line);
    border-radius: 999px;
    color: var(--d-ink-3);
    display: inline-flex;
    font-family: var(--f-rotulo);
    font-size: var(--t-mono);
    gap: var(--e-2);
    letter-spacing: 0.12em;
    padding: var(--e-2) var(--e-3);
    text-transform: uppercase;
    transition: color var(--m-medio) var(--ease-out),
                border-color var(--m-medio) var(--ease-out);
  }
  .cons-carta:hover .cons-dica {
    border-color: color-mix(in srgb, var(--c-teal) 42%, transparent);
    color: var(--c-teal-2);
  }

  /* a marca acende junto — é a peça que diz QUAL frente está virando */
  .cons-marca { transition: box-shadow var(--m-medio) var(--ease-out); }
  .cons-carta:hover .cons-marca {
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, var(--d-ink) 12%, transparent),
      0 0 26px -6px color-mix(in srgb, var(--c-teal) 78%, transparent);
  }

  .cons-link { transition: color var(--m-rapido) var(--ease-out); }
  .cons-ir   { transition: transform var(--m-medio) var(--ease-out); }
  .cons-link:hover { color: var(--d-ink); }
  .cons-link:hover .cons-ir { transform: translateX(3px); }
}

/* O FOCO DO LINK ANELA O CARTÃO INTEIRO, e não a linha do link. Regra só dela,
   como a fundação faz com o `:has()` do vidro: navegador que não conheça `:has()`
   descarta esta e cai no `*:focus-visible` global, que continua anelando a
   âncora. Dois tons, na lógica da `.bd-vidro:focus-visible`: o teal sozinho é
   diferença de croma e some em escala de cinza; a chapa de navy por baixo dá ao
   anel um fundo próprio. */
.cons-carta:has(.cons-link:focus-visible) {
  border-radius: var(--bd-raio);
  box-shadow: 0 0 0 6px var(--c-navy);
  outline: 2px solid var(--c-teal-2);
  outline-offset: 6px;
}
@supports selector(:has(*)) {
  .cons-link:focus-visible { outline: none; }
}


/* ══ 8 · ESTREITO ═══════════════════════════════════════════════════════════
   880 e não os 900 que o resto da home usa, e é o único número deste arquivo
   que não veio de lá. Motivo: 880 é onde a FUNDAÇÃO troca o fio de forma — a
   curva sai de cena e a luz passa a descer pela goteira como uma tira de 1px.
   Parar a grade em 900 abriria uma janela de 20px em que a banda ainda está em
   duas colunas com uma tira vertical de luz solta na margem esquerda. Dois
   eventos no mesmo ponto leem como uma decisão; em dois pontos, como defeito.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 880px) {
  .cons-wrap { grid-template-columns: minmax(0, 1fr); }

  /* Em coluna única a cena sangra dos DOIS lados: com as duas beiradas na borda
     da tela não há mais texto contra o que dissolver de um lado só. É a mesma
     correção que a `.plantel-foto` e a `.savyme-foto` recebem no bloco de 900. */
  .cons-cena { margin-inline: calc(-1 * var(--e-goteira)); }
  /* a legenda acompanha: com a figura sangrando os dois lados, ela precisa dos
     dois recuos para continuar dentro da coluna de leitura */
  .cons-cena-nota { padding-inline: var(--e-goteira); }
}
@media (max-width: 640px) {
  /* o botão passa a linha inteira, como o do Plantel e o do herói */
  .cons-acoes .btn { flex: 1 1 100%; justify-content: center; }
}


/* ══ 9 · CORES FORÇADAS ═════════════════════════════════════════════════════
   Em alto contraste o campo magnético deixa de existir: o sistema pinta `Canvas`
   chapado atrás de tudo. Um recorte que dissolve no pé passa a dissolver em NADA
   — deixa de ler como cena que continua e passa a ler como imagem estragada. A
   rampa sai e a peça volta inteira.

   A POÇA E AS DUAS SOMBRAS SAEM PELO MESMO ARGUMENTO das irmãs desta página — a
   poça do palco, a do fecho, a contraluz do retrato: são atmosfera, e `filter`
   não é reescrito pelo modo forçado. Chapadas, viram mancha colorida sobre a
   chapa do sistema.

   AS FACES DO CARTÃO PERDEM O DEGRADÊ e ganham borda de sistema — degradê com
   alfa é justamente o que aquele modo não reescreve. E o fio de luz do alto sai:
   ele é decoração de 1px que, chapada, vira um traço branco atravessando o
   cartão. */
@media (forced-colors: active) {
  /* a máscara saiu do desenho (ver o bloco 6); resta desligar as duas sombras,
     que `filter` o modo forçado não reescreve */
  .cons-cena img { filter: none; }
  .cons-cena::before { display: none; }

  .cons-face {
    background-image: none;
    background-color: Canvas;
    border: 1px solid CanvasText;
    box-shadow: none;
  }
  .cons-face::before,
  /* o aro que corre é cone com alfa: chapado pelo sistema vira um quarto de
     disco opaco por cima da face */
  .cons-face::after { display: none; }
  .cons-marca {
    background-image: none;
    border-color: CanvasText;
    box-shadow: none;
  }
}


/* ══ 10 · SEM MOVIMENTO ═════════════════════════════════════════════════════
   Último bloco do arquivo, e ele desliga só o que este arquivo ligou. O fio, o
   nó e o assentamento são da fundação e já foram desligados lá.

   O GIRO PARA E O CARTÃO CONTINUA INTEIRO, que é a régua: `transition: none` no
   eixo tira a volta, mas as duas faces continuam sobrepostas e a de trás
   continua virada — quem desliga movimento receberia um cartão que nunca mostra
   metade do conteúdo. Então aqui o cartão VOLTA A SER PILHA: as faces saem da
   mesma célula, o verso desgira, e as duas ficam à vista, exatamente como no
   aparelho sem ponteiro. Não é degradação — é o mesmo desenho, sem o gesto. */
@media (prefers-reduced-motion: reduce) {
  .cons-vira {
    gap: var(--e-3);
    transform: none;
    transform-style: flat;
    transition: none;
  }
  .cons-face {
    -webkit-backface-visibility: visible;
            backface-visibility: visible;
    grid-area: auto;
  }
  .cons-face--verso { transform: none; }
  .cons-carta:hover .cons-vira,
  .cons-carta:focus-within .cons-vira { transform: none; }
  /* sem giro não há o que anunciar */
  .cons-dica { display: none; }

  .cons-link,
  .cons-ir,
  .cons-marca { transition: none; }

  /* O aro para de correr e some. Ele é o único laço infinito desta banda, e um
     aro aceso parado no meio do percurso seria um arco solto na borda — pior que
     não ter. A aresta acesa do vidro continua fazendo o trabalho.

     `opacity: 0` E NÃO UM ANEL ESTÁTICO: a face já tem o fio de luz do `::before`
     no alto e a borda em `--d-line` em volta. Um terceiro contorno parado seria
     a terceira linha na mesma circunferência. */
  .cons-face::after {
    animation: none;
    opacity: 0;
  }
}


/* ────────────────────────────────────────────────────────────────────────────
   F · BANDA 10 — menos ruído, mais presença
   ──────────────────────────────────────────────────────────────────────────── */


/* ════════════════════════════════════════════════════════════════════════════
   SOMA · banda-menosruido.css — BANDA E · «Menos ruído. Mais presença.»

   No lugar de uma frase solta — a `.sv-voz`, que fechava o bloco da SAVYME e
   saiu deste arquivo junto com ele — entra a banda que
   diz COMO a SOMA trabalha: um retrato à esquerda com a assinatura ao lado, e à
   direita os quatro selos.

   DEPENDE DE
     styles.css          --c-teal · --c-teal-2 · --c-teal-d · --d-ink · --d-ink-2
                         --d-ink-3 · .serif
     soma-editorial.css  --e-2 · --e-4..--e-8
     page-home.css       --t-xs · --t-sm · --t-md · --t-2xl (declarados no `body`,
                         portanto herdados) · .home-sec · .home-wrap
                         .reg-escuro .serif
     _fundacao.css       .soma-fio · .fio-traco · .bd-entra

   ENTRA DEPOIS DE `_fundacao.css`, e é por isso que este arquivo NÃO DECLARA UMA
   SÓ ANIMAÇÃO NEM UMA SÓ TRANSIÇÃO. O bloco de `prefers-reduced-motion` da
   fundação vence por ordem e especificidade igual: qualquer coisa que se mexesse
   escrita aqui embaixo passaria a rodar com o movimento desligado, e precisaria
   do seu próprio desligamento para consertar o que não devia ter quebrado. Todo
   o movimento da banda é o das duas primitivas — o fio e o `.bd-entra` — que já
   são desligados lá.

   REGRAS QUE ESTE ARQUIVO CUMPRE
     · Zero cor literal. Só o `#000` das paradas de máscara, que é alfa puro e é
       exatamente o que `--cena-mascara` faz no bloco 2 deste arquivo.
     · Zero `!important`, zero seletor que colida com regra existente — todo
       nome novo começa em `bde-`.
     · Nada anima. Ver acima.
   ════════════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════════════
   1 · O FIO NESTA BANDA

   O traçado está no HTML, e o `<section>` já é `position: relative` por
   `.home-sec` — a fundação exige as duas coisas e nenhuma precisa ser repetida
   aqui. Falta a terceira: o conteúdo por cima do fio.
   ════════════════════════════════════════════════════════════════════════════ */

/* NÃO HÁ NÓ AQUI, e é decisão. A fundação permite um por banda — «mais de um
   vira pisca-pisca» — e esta banda já tem quatro pontos de luz na tela: os
   quatro discos. O quinto não marcaria nada que os quatro não marquem, e a
   banda inteira argumenta contra ter mais coisa acesa do que o necessário.

   O TRAÇADO PASSA POR BAIXO DA BANDA em vez de atravessá-la, e a conta que levou
   a isso está no comentário do HTML — em resumo: é a banda mais densa das oito, a
   única faixa livre em todas as larguras é a de baixo, e um fio com halo cruzando
   parágrafo de 13px mexe no fundo contra o qual os 4,5:1 são medidos.

   Os dois limites da corrida ficam no padrão da fundação (cover 0% → cover 50%).
   Abaixo desta banda ainda vêm a banda F e o rodapé — documento de sobra para a
   travessia alcançar os 50% sem precisar encurtar o fim. */


/* ════════════════════════════════════════════════════════════════════════════
   2 · A GRADE DA BANDA

   Duas colunas e a da esquerda é 8% mais larga. Não é capricho: a coluna da
   esquerda carrega DUAS coisas na mesma linha (o retrato e o título), a da
   direita carrega uma grade que já se divide sozinha.

   A conta, a 1425: com 1fr e 1fr a coluna do título fica com 299px, e «Menos
   ruído.» em `--t-2xl` (48,4px) mede 268 — 31px de sobra, e 31px é o que separa
   a linha inteira de «Menos / ruído.» no primeiro navegador que arredondar o
   tracking para o outro lado. Com 1,08fr a coluna vai a 323 e a sobra a 55.

   ── 1,28fr, E O RETRATO É QUEM PEDIU ────────────────────────────────────────
   O 1,08 foi calculado para um retrato de 280px. Ele agora ocupa a altura
   inteira da banda, e a coluna da esquerda passou a carregar uma peça de
   ~350px em vez de 280: com 1,08 sobrariam 271px para o título, e «Menos
   ruído.» mede 288 na tinta — a linha quebraria, que é exatamente o defeito
   que este bloco existe para não ter. 1,28 devolve os 350 ao retrato E deixa
   303 para o título.

   A conta refeita a 1425: 1281 de conteúdo menos 64 de vão dá 1217 de trilha;
   1,28/2,28 = 56,1% → 683 para a voz e 534 para os selos. Os selos são 2 × 2 e
   caem de 264 para 249 de largura de cartão, que continua acima do ponto em que
   «Acompanhamento que fica» quebra em três linhas (medido: 232).
   ════════════════════════════════════════════════════════════════════════════ */

.bde-grade {
  /* ── `start` E NÃO `center` ────────────────────────────────────────────────
     As três peças da banda — retrato, título e a grade de selos — nasciam em
     três alturas diferentes: os selos no topo da grade (y=200 a 1440), a voz
     centrada contra eles (y=271). Setenta e um pixels de degrau entre a coluna
     da esquerda e a da direita, numa banda cujo argumento é «menos ruído».

     Centralizar só é a escolha certa quando as duas colunas têm alturas
     PARECIDAS e a diferença é resto de arredondamento. Aqui a diferença é
     estrutural: a direita é uma grade 2 × 2 fixa e a esquerda é um retrato que
     agora vai do topo ao pé da banda. Alinhadas pelo alto, as três leem como
     uma linha de partida; centradas, leem como três blocos soltos que por acaso
     caíram perto. */
  align-items: start;
  display: grid;
  /* em coluna única a voz e os selos são dois blocos distintos e precisam da
     distância de bloco, não da de coluna — mas não de 64px fixos: entre 880 e
     1080 a banda empilha voz e 2 × 2 e é onde ela fica mais alta em relação ao
     próprio respiro, e é justamente ali que a faixa livre do fio se fecha */
  gap: clamp(var(--e-7), 5vw, var(--e-8));
  grid-template-columns: minmax(0, 1fr);
  position: relative;
  z-index: 1;              /* o conteúdo à frente do fio — exigência da fundação */
}

/* 1080 e não 1024: abaixo disso a coluna do título fica com menos de 270px e o
   título em `--t-2xl` passa a disputar a linha com o retrato. */
@media (min-width: 1080px) {
  .bde-grade {
    gap: clamp(var(--e-6), 4.5vw, var(--e-8));
    grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr);
  }
}


/* ════════════════════════════════════════════════════════════════════════════
   3 · A VOZ — o retrato e a assinatura na mesma linha
   ════════════════════════════════════════════════════════════════════════════ */

.bde-voz {
  /* `start` pela mesma razão da grade, e aqui com um segundo efeito: é o que põe
     o alto do retrato na MESMA linha do alto do título. Centrado, o retrato
     descia meio da diferença entre a altura dele e a dos dois parágrafos — e a
     diferença virou grande quando ele cresceu. */
  align-items: start;
  display: grid;
  gap: var(--e-5);
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
}
/* Abaixo de 640 os dois empilham. Lado a lado ali, a coluna do título mediria
   ~200px e «Mais presença.» não caberia em uma linha — e é a quebra dessas duas
   frases que a assinatura é. */
@media (min-width: 640px) {
  .bde-voz {
    gap: clamp(var(--e-5), 2.4vw, var(--e-6));

    /* ── AS DUAS COLUNAS PASSARAM A SER FRAÇÕES, E A DO TÍTULO GANHOU PISO ────
       Era `auto minmax(0, 1fr)`: o retrato mandava (largura em `clamp` de vw) e
       o título ficava com a sobra. Funcionava enquanto o retrato era pequeno.
       Com ele grande, `auto` viraria uma disputa que o título perde sempre — a
       cada largura de janela a sobra muda, e em algum ponto ela cai abaixo dos
       288px de tinta de «Menos ruído.» e a linha quebra.

       Agora as duas são frações — 1,15 contra 1, que é a proporção do croqui —
       e a do título carrega um MÍNIMO ESCRITO EM FUNÇÃO DO PRÓPRIO TÍTULO:

         5,9 × --t-2xl

       5,9 é a medida da linha em ems, e não um pixel escolhido: «Menos ruído.»
       mede 288px quando `--t-2xl` resolve em 48,96px, e 288/48,96 = 5,88. Com
       o mínimo escrito assim ele acompanha o `clamp` da tipografia sozinho — se
       um dia o título crescer, a coluna cresce junto e ninguém precisa lembrar
       de refazer esta conta. Um `min-width` em pixel travaria numa largura de
       janela e mentiria em todas as outras.

       Conferido nos dois extremos: a 1440 o título fica com 303px contra 289 de
       mínimo; a 1080, com 219 contra 216. Os dois passam, e o segundo é o
       apertado — abaixo de 1080 a banda já empilha e a disputa deixa de existir. */
    grid-template-columns:
      minmax(0, 1.15fr)
      minmax(calc(var(--t-2xl) * 5.9), 1fr);
  }
}

/* ── O RETRATO ───────────────────────────────────────────────────────────────
   Este ativo NÃO É UMA CHAPA FOTOGRÁFICA: é um recorte com canal alfa, e é a
   razão de ele não entrar na lista de `--cena-mascara`.
   Aquela máquina resolve três problemas — topo, pé e as duas laterais de um
   retângulo de foto, mais a elipse que entorta as curvas de nível para não
   sobrar reta. Aqui não há retângulo: as bordas do sujeito já são o alfa do
   próprio ativo, e as laterais e o topo do quadro são transparentes. Sobra UM
   corte duro, o do peito, no pé do quadro.

   Então entra a MESMA CURVA em um eixo só. As nove paradas abaixo são as nove
   da máquina, na mesma ordem e nos mesmos valores: smoothstep (3t²−2t³), com
   derivada zero nas duas pontas. Rampa reta aqui devolveria a banda de Mach que
   a página inteira foi corrigida para não ter.

   A MONTAGEM MANTEVE ESTE BLOCO, e não a máquina canônica. `--cena-topo: 0` e
   `--cena-pe: 70%` dariam a mesma rampa vertical, mas a máquina traz junto a
   TERCEIRA máscara — a elipse `125% 96% at 50% 46%`, que apaga os cantos até
   42%. Num retângulo de foto ela é o que tira a reta; num recorte, os cantos
   são o ombro e a manga do avental, e ela os comeria. A regra da casa vale para
   chapa; este ativo não é uma.

   O GRÃO NÃO ENTRA, e é decisão, não esquecimento. `.virada-foto::after` e
   irmãos jogam a trama sobre a CAIXA da figura. Numa chapa, a caixa e a foto são
   a mesma coisa. Num recorte, a caixa é um retângulo de que dois terços são
   transparentes — a trama desenharia justamente o retângulo que o recorte existe
   para não ter. */
.bde-retrato {
  isolation: isolate;      /* para a poça de luz abaixo ficar presa aqui dentro */
  margin: 0;
  position: relative;
  width: clamp(168px, 44vw, 240px);
  /* empilhado, o quadro deitado do arquivo continua sendo o certo: a coluna é a
     página inteira e um retrato em pé ali viraria uma torre */
}
/* 19,5vw e não os 16 do protótipo: o ativo é um quadro 3:2 e a cabeça ocupa 64%
   da altura dele, então a largura do quadro paga 36% de margem transparente
   antes de virar presença. A 190px de quadro a cabeça mede 78px e some ao lado
   de um título de 47px; a 280px mede 115px e sustenta a linha. A conta de folga:
   a 1080 — a largura mais apertada em que a banda ainda é de duas colunas — o
   quadro fica com 211px, a coluna do título com 244 e «Menos ruído.» mede 203. */
/* ── LADO A LADO, O RETRATO PASSA A OCUPAR A COLUNA INTEIRA ──────────────────
   Ele tinha largura própria (`clamp(180px, 19.5vw, 280px)`) e a coluna se
   moldava a ele. Agora é o contrário: a coluna é uma fração da grade e ele a
   preenche. A troca não é de gosto — é o que permite a largura dele crescer sem
   roubar do título, porque o piso do título está escrito na PRÓPRIA coluna do
   título (ver `.bde-voz` acima), e não na sobra do que o retrato deixou.

   7/8 É A PROPORÇÃO DO CROQUI. Medida na marcação do dono: 355 × 404, que dá
   0,879 — 7/8 é 0,875, a fração inteira mais próxima. O arquivo é 3:2 deitado
   (1100 × 733), então a caixa em pé só existe por RECORTE, e é o `object-fit`
   abaixo que o faz.

   A 1440 isso dá 348 × 398 de quadro, contra os 280 × 187 de antes: a peça mais
   que dobra em cada eixo, e a cabeça — que ocupa 41% da largura do arquivo —
   passa de 78px para 145px de tela. Era esse o pedido: uma pessoa que sustenta
   um título de 49px ao lado. */
@media (min-width: 640px) {
  .bde-retrato {
    aspect-ratio: 7 / 8;
    width: 100%;
  }
}

.bde-retrato img {
  /* ── 52% E JÁ FOI 70% ─────────────────────────────────────────────────────
     O 70 era a altura do colarinho, e fazia sentido enquanto a rampa era a
     ÚNICA coisa a dissolver o recorte: começar antes comeria o queixo.

     Agora ela divide o trabalho com a cópia desfocada do `::after` logo abaixo,
     e a ordem inverteu: a camada nítida tem de sair de cena ANTES de o desfoque
     entrar, senão as duas convivem e o ombro fica com um fantasma de si mesmo,
     nítido por dentro do borrão. A 52% ela termina onde o peitoral começa —
     acima do ombro, que é justamente o que o desfoque vai assumir.

     E O ARQUIVO TROCOU, o que refez a conta inteira. O retrato novo é 1024×1409
     — RETRATO, proporção 0,727 — contra o 3:2 deitado do anterior. Numa caixa de
     7/8 o `cover` deixou de ajustar pela altura e passou a ajustar pela LARGURA,
     e a escala caiu de 1,647 (ampliando) para 0,338 (reduzindo).

     ONDE CADA COISA CAI NA CAIXA, medido no alfa do arquivo — o perfil de
     cobertura por linha localiza o pescoço no ponto mais estreito da silhueta:

         pescoço (35% de cobertura)   35% do arquivo  →  42% da caixa
         ombro começa                 45%             →  54%
         torso cheio                  70%             →  84%
         fim da janela visível        83%             → 100%

     62% E NÃO 46%: o dono pediu a transição mais baixa. A 46 ela caía no pescoço
     e o corte comia a gola em V, que é o que dá leitura de «avental» à peça. A
     62 ela cai no meio do peito — o rosto, o pescoço, a gola e a linha dos ombros
     chegam nítidos, e só o baixo do tórax e os braços entram no borrão. É onde o
     arquivo é 100% opaco de margem a margem, quer dizer, onde não há silhueta
     para o desfoque delatar. */
  --bde-pe: 62%;
  --bde-mascara: linear-gradient(180deg,
    #000 0%,
    #000 var(--bde-pe),
    rgba(0,0,0,.956) calc(var(--bde-pe) + (100% - var(--bde-pe)) * .125),
    rgba(0,0,0,.844) calc(var(--bde-pe) + (100% - var(--bde-pe)) * .25),
    rgba(0,0,0,.684) calc(var(--bde-pe) + (100% - var(--bde-pe)) * .375),
    rgba(0,0,0,.5)   calc(var(--bde-pe) + (100% - var(--bde-pe)) * .5),
    rgba(0,0,0,.316) calc(var(--bde-pe) + (100% - var(--bde-pe)) * .625),
    rgba(0,0,0,.156) calc(var(--bde-pe) + (100% - var(--bde-pe)) * .75),
    rgba(0,0,0,.044) calc(var(--bde-pe) + (100% - var(--bde-pe)) * .875),
    transparent 100%);
  display: block;          /* sem isto a imagem é inline e ganha o vão da linha-base */
  height: 100%;
  /* ── O RECORTE ─────────────────────────────────────────────────────────────
     `cover` numa caixa 7/8 sobre um arquivo 3:2 ajusta pela ALTURA: o quadro
     inteiro do arquivo aparece de cima a baixo — inclusive o corte reto do peito
     no pé, que é o que a máscara acima existe para dissolver — e sobra largura
     para cortar. Medido a 1440: a escala fica em 0,543 e a janela mostra 641 dos
     1100px do arquivo, ou 58%.

     `object-position: 54%` E NÃO 50%. O sujeito olha para a direita, e o
     enquadramento tem de deixar espaço na direção do olhar: centrado, ele fica
     encarando a própria borda. Quatro pontos para a direita põem a janela em
     23,5%–81,5% do arquivo — a cabeça (29%–70%) fica inteira, com 5,5 pontos de
     folga atrás da nuca e 11,5 à frente do rosto. É a regra de composição mais
     velha que existe e a única que este ativo pedia.

     `height: 100%` é obrigatório junto: com `auto` a imagem define a altura e o
     `aspect-ratio` da figura não tem o que governar. */
  object-fit: cover;
  /* `0%` NA VERTICAL, E É O QUE SALVA A TOUCA. Com a fonte em pé numa caixa mais
     larga que ela em proporção, o `cover` sobra ALTURA: projeta 476px numa caixa
     de 395 e corta 81. Centrado, ele tiraria 40 de cima — e os 40 de cima são a
     touca, que começa na primeira linha do recorte. Ancorado no topo, os 81 saem
     todos do pé, que é justamente a parte que o borrão dissolve.
     Na horizontal não há o que escolher: o `cover` ajusta POR ela, então a
     largura inteira do arquivo aparece e qualquer valor dá o mesmo resultado. */
  object-position: 50% 0%;
  -webkit-mask-image: var(--bde-mascara);
  mask-image: var(--bde-mascara);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  width: 100%;
}

/* A CONTRALUZ, e ela não é enfeite: sem ela metade da peça não se vê.
   Medido no ativo, decodificando os quatro arquivos para tela e lendo o pixel:
   o rosto marca luminância 64 e o avental do peito marca 25. O campo desta
   página, `--d-campo`, marca 24. Ou seja: a cabeça se destaca sozinha e o CORPO
   TEM UM NÍVEL DE DIFERENÇA EM 255 contra o fundo — não é figura escura sobre
   fundo escuro, é ausência de figura. Um recorte com alfa não tem a moldura que
   resolveria isso por fora.

   A saída é a de qualquer estúdio: luz por trás. Uma poça centrada em 50% × 30%
   do quadro, que é onde a cabeça está, levanta o fundo local o bastante para o
   ombro voltar a ter contra o que ser escuro. Ela sangra para fora da caixa nos
   quatro lados porque fonte de luz que termina dentro do quadro vira forma; fora
   dele, vira luz. E o miolo é `--c-teal` enquanto a saia é `--c-teal-d`: uma cor
   só, esmaecendo, desenharia um oval — duas, com a mais escura por fora,
   desenham queda. */
/* ── OS OMBROS DISSOLVEM POR DESFOQUE, E NÃO SÓ POR OPACIDADE ────────────────
   Uma rampa de máscara sozinha apaga o ombro mantendo-o NÍTIDO até o fim: o que
   se vê é um recorte ficando transparente, e o olho continua lendo a borda dura
   do avental por baixo do esmaecimento. É a diferença entre uma peça que some e
   uma peça que se INTEGRA ao campo — foi o que o dono apontou, circulando os
   dois ombros.

   O QUE NÃO SERVIA, e por quê:
     · `backdrop-filter` numa camada por cima. Seria o caminho elegante — borra o
       que está atrás, ombro e campo juntos — e não funciona aqui: `.bde-retrato`
       é `isolation: isolate` por causa da poça de luz do `::before`, e dentro de
       um contexto isolado o `backdrop-filter` só enxerga o que está no próprio
       contexto. Ele borraria a poça e mais nada.
     · `filter: blur()` na `<img>`. `filter` não é aplicável a PARTE de um
       elemento: borraria o rosto junto.

   ENTÃO SÃO DUAS CÓPIAS DA MESMA IMAGEM, uma nítida e uma borrada, com máscaras
   complementares. A nítida (a `<img>`) sai em 52%; esta entra em 44% e assume
   sozinha a partir de 66%. No cruzamento as duas somam, que é o que faz a
   transição não ter costura.

   O ARQUIVO É O MESMO QUE A `<img>` JÁ BAIXOU — `retrato-cirurgiao-700.webp`,
   conferido no `currentSrc` a 1440 com DPR 1,5. Referenciá-lo aqui é acerto de
   cache, não uma segunda transferência. A 700px de fonte para 348 de caixa, e
   com 14px de borrão por cima, resolução sobra.

   `background-size: cover` e `background-position: 54% 50%` são os MESMOS
   valores do `object-fit`/`object-position` da imagem — as duas cópias têm de
   estar exatamente sobrepostas, e qualquer divergência aqui apareceria como um
   fantasma deslocado.

   14px DE BORRÃO, que são 4% da largura da caixa: o bastante para o tecido
   perder a trama e virar massa de cor, pouco o bastante para o ombro ainda ter
   forma. Acima de uns 20 ele deixa de ser ombro e vira mancha azul. */
.bde-retrato::after {
  /* O ARQUIVO GRANDE, e a troca tem motivo. Ele era o `-700`, escolhido para
     casar com o que a `<img>` baixava. Só que a `<img>` baixava o 700 por causa
     de um `sizes` subdimensionado — ela pedia 25vw quando o `cover` consome
     41vw — e o navegador entregava uma fonte de 467px de altura para uma caixa
     que pede 593 no DPR de 1,5: **1,27× de ampliação**. Era essa a razão de os
     ombros lerem mal, antes de qualquer máscara.

     Com o `sizes` corrigido as duas passam a usar o 1100, e as duas cópias
     voltam a apontar para o mesmo arquivo — que continua sendo acerto de cache
     e não segunda transferência. */
  /* `image-set` COM `type()`, E NAO UMA URL SOLTA — e o que faz esta copia ser
     acerto de cache em vez de segunda transferencia. Medido antes da correcao: o
     `<img>` baixava `-700.avif` (68 KB) e esta camada baixava o `.webp` de 1024
     (222 KB), porque uma URL fixa nao acompanha a negociacao de formato do
     `<picture>`. Sao 222 KB para desenhar uma mancha borrada de 14px.
     Com `image-set`, o navegador escolhe pelo MESMO criterio que escolheu la em
     cima e cai no arquivo que ja esta em memoria. E o `-700` basta: a camada leva
     `blur(14px)`, entao resolucao acima disso e byte jogado fora. */
  background-image: image-set(
    url("assets/landing/retrato-cirurgiao-700.avif") type("image/avif"),
    url("assets/landing/retrato-cirurgiao-700.webp") type("image/webp"));
  /* espelha o `object-position` da <img> acima: as duas copias tem de estar
     exatamente sobrepostas, e qualquer divergencia aqui apareceria como um
     fantasma deslocado dentro do borrao */
  background-position: 50% 0%;
  background-repeat: no-repeat;
  background-size: cover;
  content: '';
  filter: blur(14px);
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;

  /* ── DUAS MÁSCARAS, E A SEGUNDA É QUE MATA O RETÂNGULO ────────────────────
     A primeira versão tinha só a vertical, e o dono viu «a quebra dos
     braços/ombros». Ele estava vendo a CAIXA: `filter: blur()` amostra o que
     está fora do elemento como transparente, então as três bordas por onde o
     assunto é cortado — a esquerda, a direita e o pé — viram um contorno macio
     mas retilíneo. Um borrão retangular sobre um recorte de pessoa é pior que
     não borrar: anuncia a moldura que o recorte existe para não ter.

     O corte lateral é grande e medido: a fonte é 3:2 e a caixa é 7/8, então o
     `cover` ajusta pela ALTURA e sobra largura. A 1440 ele projeta 593px e
     mostra 346 — **247px de imagem cortados**, 124 de cada lado. É por ali que
     as duas verticais entravam.

     A horizontal apaga as duas laterais antes de a máscara vertical chegar
     nelas, e `mask-composite: intersect` faz as duas valerem ao mesmo tempo: só
     passa o que as DUAS deixam passar. O resultado não tem borda reta em lado
     nenhum — o borrão nasce e morre dentro do próprio corpo da figura.

     As paradas são a smoothstep da casa nas quatro pontas: derivada zero,
     senão a banda de Mach aparece na junta. */
  /* A BANDA DESCEU COM A TRANSICAO. Ela entra em 54% — a linha do ombro, onde a
     camada nitida ja esta esmaecendo — e assume sozinha de 70% em diante, que e
     onde o arquivo e opaco de margem a margem. Sai por baixo sem nunca chegar
     cheia na ultima linha: o pe da caixa tem de estar em zero, senao volta a
     borda reta que este par de mascaras existe para nao ter. */
  --bde-borrao-v: linear-gradient(180deg,
    transparent 54%,
    rgba(0,0,0,.156) 58%,
    rgba(0,0,0,.5)   63%,
    rgba(0,0,0,.844) 67%,
    #000 70%,
    #000 82%,
    rgba(0,0,0,.844) 87%,
    rgba(0,0,0,.5)   92%,
    rgba(0,0,0,.156) 96%,
    transparent 100%);
  --bde-borrao-h: linear-gradient(90deg,
    transparent 0%,
    rgba(0,0,0,.156) 5%,
    rgba(0,0,0,.5)   11%,
    rgba(0,0,0,.844) 16%,
    #000 20%,
    #000 80%,
    rgba(0,0,0,.844) 84%,
    rgba(0,0,0,.5)   89%,
    rgba(0,0,0,.156) 95%,
    transparent 100%);
  -webkit-mask-image: var(--bde-borrao-v), var(--bde-borrao-h);
          mask-image: var(--bde-borrao-v), var(--bde-borrao-h);
  -webkit-mask-composite: source-in;   /* o nome antigo do mesmo operador */
          mask-composite: intersect;
}

/* ── O CONTRALUZ DA CABEÇA, E A CAIXA QUE O DECEPAVA ────────────────────────
   Este glow desenhava uma RETA no topo, atravessando a banda. A causa é a mesma
   da poça da `.cons-cena` e vale escrever como padrão, porque já apareceu duas
   vezes: `background` recorta na BORDER-BOX, e um radial cujas paradas caem fora
   da própria caixa é cortado em esquadria — não desvanece, corta.

   A conta do defeito, com `inset: -24% -20% -12%` e raio de 47%:

       caixa        = altura da figura × 1,36
       raio vert.   = 47% × 1,36  = 0,639
       centro y     = 22% × 1,36  = 0,299
       «transparent 78%» alcança    0,499 acima do centro
       topo do glow = 0,299 − 0,499 = −0,199

   Ou seja: subia 20% da altura ACIMA da caixa — 79px na janela de 1440 — e era
   ali que a reta aparecia. Só o topo vazava; embaixo morria em 0,798 da caixa e
   nos lados em 30,7..453,7 de 484,3, ambos dentro.

   O CONSERTO NÃO MEXE NO DESENHO DA LUZ. Estender a caixa sozinho não resolve,
   porque centro e raio são percentuais dela e escalam junto — o mesmo beco da
   `.cons-cena`. Então a caixa sobe para -50% e centro e raio são REESCALADOS
   pelo inverso, o que mantém o glow idêntico em pixel:

       centro absoluto  0,0592 abaixo do topo da figura  (antes e depois)
       raio  absoluto   0,6392 da altura da figura       (antes e depois)
       topo do glow     agora +3,74% da caixa, ou seja 24px DENTRO dela

   Se um dia o `inset` mudar, estes dois números mudam com ele: centro e raio em
   % são sempre (valor absoluto ÷ altura da caixa). */
.bde-retrato::before {
  background-image: radial-gradient(56% 39.46% at 50% 34.52%,
    color-mix(in srgb, var(--c-teal) 21%, transparent) 0%,
    color-mix(in srgb, var(--c-teal) 11%, transparent) 34%,
    color-mix(in srgb, var(--c-teal-d) 9%, transparent) 58%,
    transparent 78%);
  content: '';
  inset: -50% -20% -12%;
  pointer-events: none;
  position: absolute;
  z-index: -1;
}

/* ── A ASSINATURA ────────────────────────────────────────────────────────────
   As duas frases em duas linhas, e não uma quebrando por acaso: «Menos ruído.»
   é o problema e «Mais presença.» é a troca. Uma linha só, com a quebra decidida
   pela largura da coluna, entregaria «Menos ruído. Mais / presença.» — que junta
   as duas metades do argumento e parte a segunda no meio. */
.bde-titulo {
  font-size: var(--t-2xl);
  /* 500 e não os 600 do `h1..h4` de `styles.css:174`: em corpo de display o peso
     600 da Inter fecha as contraformas e a frase fica pesada ao lado de uma
     serifa em 400. É o mesmo 500 que `.virada-texto h2` e `.fecho-bloco h2` já
     usam nesta página. */
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.06;
  margin: 0;
  text-wrap: balance;
}
.bde-titulo .serif { display: block; }

/* A linha de apoio fica em `--t-sm` e não na `.lead` de 16–18px da casa: ela
   divide uma coluna de ~350px com um título de 47px. Em 16px correria cinco
   linhas e teria mais massa que o título que deveria apoiar.

   24px de intervalo e não 16: o salto é de 47px para 14,5px, e um intervalo
   menor que meia altura do título faz a linha de apoio parecer a terceira linha
   dele. Sobra, de brinde, a faixa por onde o fio passa. */
.bde-apoio {
  color: var(--d-ink-2);
  font-size: var(--t-sm);
  line-height: 1.6;
  margin: var(--e-5) 0 0;
  max-width: 36ch;
}


/* ════════════════════════════════════════════════════════════════════════════
   4 · OS QUATRO SELOS

   Sem cartão, sem filete, sem moldura — e isso é o argumento da banda escrito em
   CSS. O que segura os quatro juntos é ALINHAMENTO: dois discos na mesma linha
   de base, dois títulos na mesma, duas descrições na mesma. Uma banda que se
   chama «menos ruído» não pode desenhar quatro caixas para provar que são quatro.

   Pelo mesmo motivo não há `.bd-marca` aqui: a marca d'água dá escala a um
   painel de produto que estaria sozinho no campo. Atrás de quatro afirmações
   curtas, uma palavra de 204px é exatamente o ruído de que a banda fala.
   ════════════════════════════════════════════════════════════════════════════ */

/* O intervalo de LINHA é maior que o de coluna, e não igual. Numa grade 2 × 2 de
   blocos que começam com um disco, o intervalo de coluna separa duas coisas de
   larguras diferentes e o de linha separa duas de alturas iguais — com o mesmo
   número, a fileira de baixo parece colada na de cima. 4vw contra 2,6vw. */
.bde-selos {
  display: grid;
  gap: clamp(var(--e-6), 4vw, var(--e-8)) clamp(var(--e-5), 2.6vw, var(--e-7));
  grid-template-columns: minmax(0, 1fr);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* DUAS COLUNAS, DE 560 PARA CIMA, E SÓ. Nem `auto-fit`, nem uma fileira de
   quatro nas larguras do meio — as duas alternativas foram desenhadas e as duas
   quebram:

   `auto-fit` acerta três colunas em alguma largura e deixa um órfão embaixo, e
   um selo sozinho na quarta posição lê como o mais importante dos quatro.

   A fileira de quatro foi medida a 950: a coluna fica com 197px e «Acompanhamento
   que fica» mede 200 — o segundo título quebra em duas linhas, e como cada selo
   é uma pilha independente, a quebra empurra SÓ o parágrafo dele. A fileira
   perde a linha de base comum, que é justamente o que fazia os quatro lerem
   como um conjunto sem precisar de moldura.

   Em duas colunas o título mais largo cabe em uma linha desde 560 (a coluna
   mede 240 ali) e os quatro mantêm duas linhas de base em vez de quatro. */
@media (min-width: 560px) {
  .bde-selos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.bde-selo {
  display: grid;
  justify-items: start;
}
.bde-selo h3 {
  color: var(--d-ink);
  font-size: var(--t-md);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.22;
  margin: var(--e-4) 0 0;
  /* na coluna única do celular «Acompanhamento que fica» é o único que quebra;
     `balance` reparte as duas linhas em vez de deixar «fica» sozinho */
  text-wrap: balance;
}
.bde-selo p {
  /* `--d-ink-3` a 13px: 5,8:1 sobre `--d-campo` e 5,4:1 sobre o ponto mais claro
     do campo, onde as poças de luz do `body::before` somam 4%. Passa nos dois. */
  color: var(--d-ink-3);
  font-size: var(--t-xs);
  line-height: 1.55;
  margin: var(--e-2) 0 0;
  /* 30ch a 13px são ~234px: a medida em que a descrição corre em duas ou três
     linhas nas duas contagens de coluna, e nunca numa linha só de 400px quando a
     banda é de coluna única e cada selo herda metade de 900px de largura. */
  max-width: 30ch;
}

/* ── O DISCO ─────────────────────────────────────────────────────────────────
   A borda é uma borda de verdade e não uma sombra desenhada — é o que faz o
   disco sobreviver em `forced-colors` sem instrução nenhuma. O degradê interno
   nasce em 34% da altura e não no centro: luz que vem de cima é a única leitura
   de volume que o olho aceita sem pensar, e é de onde vem a luz do resto da
   página. */
/* O DIÂMETRO É UM NÚMERO SÓ, e o ícone é fração DELE. Os dois eram `clamp`
   independentes — `clamp(46px, 3.6vw, 56px)` e `clamp(24px, 1.9vw, 28px)` — com
   patamares em 1278/1556 e 1263/1474, quatro fronteiras diferentes para um par
   aninhado. Medido, o ícone ocupava 52,2% do disco abaixo de 1263, 52,8% entre
   1278 e 1474 e 50,0% acima de 1556: o olho lê isso como o disco respirando em
   volta do ícone conforme a janela muda. Derivado, ele ocupa 50% em qualquer
   largura, e o desenho tem uma medida em vez de duas. */
.bde-disco {
  --bde-d: clamp(46px, 3.6vw, 56px);
  background-image: radial-gradient(circle at 50% 34%,
    color-mix(in srgb, var(--c-teal) 15%, transparent) 0%,
    transparent 68%);
  border: 1px solid color-mix(in srgb, var(--c-teal) 30%, transparent);
  border-radius: 50%;
  /* o halo é `box-shadow` e não `filter`, pelo mesmo motivo do nó do fio:
     sombra composita, filtro repinta — e isto vive numa banda que rola */
  box-shadow:
    0 0 24px -10px color-mix(in srgb, var(--c-teal) 70%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--c-teal-2) 16%, transparent);
  color: var(--c-teal-2);   /* é este `color` que o `currentColor` do ícone lê */
  display: grid;
  height: var(--bde-d);
  place-items: center;
  width: var(--bde-d);
}

/* ── OS ÍCONES ───────────────────────────────────────────────────────────────
   O traço, a espessura, a terminação e a junta são declarados AQUI e não em cada
   `<svg>`: quatro ícones que herdam um número só não têm como divergir, e quatro
   atributos repetidos no HTML têm — é a mesma razão de o degradê do fio ser
   pintado pelo CSS e não por atributo.

   1,4 é o peso do `.fio-traco`. A rima é de propósito: a luz que atravessa a
   página e o desenho dos quatro selos são a mesma espessura de linha, e é o que
   faz os ícones lerem como parte da cena e não como pictogramas colados nela.

   A 28px de caixa, 1,4 no sistema de 24 medem 1,63px de tela. Abaixo de 1,3 a
   linha fica cinzenta em tela não-retina; acima de 1,8 o desenho fecha. Estes
   são os maiores ícones da metade de baixo e por isso os mais pesados: a faixa
   inteira, depois de os outros serem remedidos, vai de 1,35 (o tique da lista) a
   1,63 aqui — 21% de variação acompanhando o tamanho, e não os 58% de antes,
   que iam na direção errada com os menores sendo os mais finos. */
.bde-icone {
  fill: none;
  height: calc(var(--bde-d) * .5);
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.4;
  width: calc(var(--bde-d) * .5);
}
/* A ÚNICA FORMA CHEIA DE CADA ÍCONE. Cheio contra vazado é a distinção que
   sobrevive a tudo — escala de cinza, alto contraste, 24px numa tela ruim — e é
   por isso que ela marca o ponto do argumento em vez de uma segunda cor: uma
   segunda cor seria diferença de croma, e diferença de croma é a primeira coisa
   que some. Raio 1,85 nos quatro. */
.bde-cheio {
  fill: currentColor;
  stroke: none;
}


/* ════════════════════════════════════════════════════════════════════════════
   5 · CORES FORÇADAS

   A fundação já apaga o fio e o nó. Sobram as duas peças desta banda que pintam
   com degradê — e degradê é justamente o que o modo forçado não reescreve.
   ════════════════════════════════════════════════════════════════════════════ */
@media (forced-colors: active) {
  /* A poça de luz é atmosfera: forçada, ela ou some ou vira um bloco chapado por
     cima do retrato. O único desfecho certo é ela não estar lá. */
  .bde-retrato::before { display: none; }

  /* O disco perde o volume e fica só com a borda — que já é borda de sistema, e
     é tudo de que ele precisa para continuar sendo um disco. O halo teria de ser
     reescrito pelo sistema e não é: ficaria uma mancha. */
  .bde-disco {
    background-image: none;
    box-shadow: none;
  }
}


/* ────────────────────────────────────────────────────────────────────────────
   G · BANDA 11 — o fecho, e o rodapé
   ──────────────────────────────────────────────────────────────────────────── */


/* ════════════════════════════════════════════════════════════════════════════
   SOMA · banda-fecho.css — BANDA F, o fecho, e o rodapé

   A página abriu a metade de baixo com a marca no centro das sete frentes e
   fecha com a MESMA marca no centro do ciclo de implantação. É o mesmo ativo
   (`orbital-nucleo`) nas duas pontas: o arco visual se fechando é o argumento
   desta banda, e é por isso que não há globo aqui — dois objetos redondos no
   mesmo fim de página seriam duas conclusões.

   DEPENDE DE
     _fundacao.css   .soma-fio · .soma-fio-no · .bd-pilula · .bd-entra
                     --fio-de/--fio-ate · --no-de/--no-ate · --bd-i
     styles.css      --c-teal · --c-teal-2 · --d-ink* · --d-line · --f-sans
                     .btn · .btn-primary · .btn-outline · .eyebrow · .foot*
     soma-editorial.css  --e-1..--e-10 · --e-secao · --e-goteira
     soma-premium.css    --m-medio · --ease-out
     page-home.css   --t-mono · --t-2xl · --t-lg · --d-piso · --d-campo
                     #fecho { padding-block } e #fecho .btn { font-size },
                     que continuam valendo porque a banda mantém o `id`.

   ENTRA DEPOIS DE `_fundacao.css`. O bloco de `prefers-reduced-motion` do fim
   deste arquivo é o que desliga o que ESTE arquivo move; o da fundação já
   desligou o dela. Nada aqui usa `!important`, e por isso o último bloco
   precisa continuar sendo o último.
   ════════════════════════════════════════════════════════════════════════════ */


/* ══ 1 · A BANDA E A GRADE ═══════════════════════════════════════════════════ */

/* O wrapper sobe uma camada porque o fio mora em `z-index: 0` dentro da seção.
   A seção já é `position: relative` por `.home-sec`. */
.fc-grade {
  align-items: center;
  display: grid;
  gap: clamp(var(--e-6), 3.4vw, var(--e-8));
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  position: relative;
  z-index: 1;
}

/* O NÓ DO FIO. Ele marca o ponto do traçado que cai debaixo do centro da
   esfera: x=852 e y=504 no viewBox de 1200×600, que são 71% e 84% da caixa.

   O trecho do `d` entre x=520 e x=900 é uma RETA HORIZONTAL justamente por
   isso — qualquer x nesse intervalo cai EXATAMENTE sobre o traçado, e é o que
   permite mover o nó para 50% quando a esfera passa a ser centrada, sem que
   ele descole da linha. Curva com barriga no meio não daria essa liberdade.

   E 84% e não 80%: a 80% o traçado passava 20px abaixo da última linha do
   conteúdo, perto demais para ler como linha e perto demais para não ler como
   sublinhado torto. A 84% são 48px em 1425 e 47px em 1280 — folga estável nas
   duas composições, porque as duas centram o conteúdo na mesma caixa. */
/* O NÓ ACOMPANHOU O TRAÇADO. Ele marca o ponto do fio que coincide com o
   argumento da banda, e por isso tem de estar EM CIMA do fio — nó fora da linha
   é um ponto de luz solto. O traçado desceu de 504 para 552 unidades de viewBox
   (ver o comentário na marcação), e 552 ÷ 600 dá os 92% abaixo. O `--x` fica em
   71%: naquela abscissa o traçado ainda está no trecho reto, então a conta do y
   é a altura da reta e nada mais. */
.fc .soma-fio-no {
  --x: 71%;
  --y: 92%;
}

/* O ALCANCE DA CORRIDA, medido. Esta é a última banda: abaixo dela só existe o
   rodapé, e num monitor alto o documento pode acabar antes de a banda alcançar
   `cover 50%`. Pior caso medido — banda de 730px, rodapé de 420px, janela de
   1600px — a travessia máxima possível é 48,7%. O fim fica em 44%, com folga.

   O COMEÇO SUBIU DE 2% PARA 14%, e é a única metade do deslocamento que esta
   banda pode fazer. As outras sete adiaram as duas pontas — 0→18% e 50→60% —,
   mas aqui o fim é um teto medido, não uma escolha: empurrá-lo deixaria a última
   banda da página com o fio pela metade em monitor alto, que é pior do que
   começar cedo. A 14% a borda de cima da banda já entrou ~230px pela tela, e é
   o suficiente para a corrida deixar de acontecer no escuro. */
.fc {
  --fio-de: cover 14%;
  --fio-ate: cover 44%;
  /* O nó acende quando a cabeça da corrida passa por ele. O nó está a ~72% do
     comprimento do traçado; 72% de 14%→44% cai em 36%. */
  --no-de: 34%;
  --no-ate: 41%;
}


/* ══ 2 · A FALA ══════════════════════════════════════════════════════════════ */

/* 34rem é o teto, não a medida: no arranjo lado a lado a grade já entrega
   488px em 1281 e 536 em 1425, medidos, e o teto nunca encosta. Ele só trabalha
   quando a banda empilha e a coluna passa a ser a página inteira — sem ele, o
   título correria os 792px de largura de uma tela de 880. */
.fc-fala { max-width: 34rem; }

.fc-fala h2 {
  font-size: var(--t-2xl);
  font-weight: 500;
  letter-spacing: -0.028em;
  line-height: 1.1;
  margin-top: var(--e-4);
}
.fc-fala .lead { margin-top: var(--e-5); }

.fc-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-4);
  margin-top: var(--e-7);
}

/* A BORDA DO BOTÃO SECUNDÁRIO SOBE DE 32% PARA 46%.
   Medida contra o campo real deste ponto da página (~#0B1B2E), a borda de
   `.btn-outline` dá 2,42:1 — abaixo dos 3:1 que um controle de interface
   precisa. A 46% dá 3,58:1. A correção mora aqui e não em `styles.css` porque
   aquele arquivo veste também a plataforma logada, onde o botão está sobre
   outro fundo e a conta é outra.

   O `:hover` precisa de regra própria: `.fc-acoes .btn-outline` é (0,2,0) e
   ganharia do `.btn-outline:hover` (0,1,1) da casa, apagando o estado.

   E é `.btn-outline` e não `.btn-ghost` porque o ghost carrega
   `backdrop-filter: blur(8px)` — desfoque em elemento que entra animado por
   `[data-soma-item]` é o custo pago duas vezes por quadro. */
.fc-acoes .btn-outline {
  border-color: color-mix(in srgb, var(--c-teal-2) 46%, transparent);
}
.fc-acoes .btn-outline:hover {
  border-color: var(--c-teal-2);
}

/* O FOCO EM DOIS TONS SUBIU PARA A FUNDAÇÃO, bloco 7, e a receita mudou junto.
   O aro de navy era um `::after` em `inset: -2px`, escolhido para não tocar na
   sombra de elevação do primário — o raciocínio estava certo e faltou olhar uma
   linha: `soma-premium.css:82` dá ao `.btn-primary` `overflow: hidden`, e com
   borda zero a caixa de recorte é a de preenchimento. A faixa de 2px morava
   inteira em [−2px, 0], fora do recorte. Nada era desenhado, e o `.btn-outline`
   ao lado — que tem `overflow: visible` — recebia o aro: dois botões vizinhos
   com anéis de foco diferentes. Sombra do próprio elemento não é recortada por
   ele, e é isso que a regra da fundação usa, preservando a elevação na lista. */


/* ══ 3 · A ESFERA ════════════════════════════════════════════════════════════ */

/* Três colunas: rótulos · esfera · rótulos. As duas colunas de rótulo são
   `1fr` IGUAIS e a esfera é `auto` com largura declarada — assim a esfera fica
   exatamente centrada na coluna, sempre, e o que sobra se divide por igual dos
   dois lados. Com `auto 1fr auto` o centro dependeria da largura das palavras,
   e "Acompanhamento" e "Evolução contínua" não têm o mesmo tamanho: a esfera
   ficaria 25px fora do eixo. */
.fc-esfera {
  align-items: center;
  display: grid;
  gap: clamp(var(--e-4), 1.6vw, var(--e-6));
  grid-template-columns: 1fr auto 1fr;
}

/* A conta da largura: 2 × 170px (a pílula mais larga, "EVOLUÇÃO CONTÍNUA" em
   10,5px com 0,14em) + a esfera + dois vãos. Em 1281px a coluna entrega 621px
   e a conta pede 586 — 35px de folga. É essa conta que fixa o 16vw daqui e o
   ponto em que a banda deixa de ser lado a lado. */
.fc-orbe {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  position: relative;
  width: clamp(184px, 16vw, 260px);
}

/* A POÇA. Nasceu para os arcos terem contra o que brilhar; com a esfera orbital
   removida ela passa a ser o chão da marca — sem ela, um SVG branco de 120px
   flutua sobre navy chapado. Estática e em degradê, não custa quadro nenhum.

   O `inset: -26%` fica: ele foi medido contra o raio dos arcos, mas continua
   certo para a marca, que é menor — a poça sobra em volta dela, que é o que
   uma poça tem de fazer. */
.fc-orbe::before {
  background-image: radial-gradient(circle at 50% 50%,
    color-mix(in srgb, var(--c-teal) 11%, transparent) 0%,
    color-mix(in srgb, var(--c-blue) 7%, transparent) 38%,
    transparent 68%);
  content: '';
  inset: -26%;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.fc-orbe .fc-arcos {
  inset: 0;
  overflow: visible;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

/* A MARCA, E ELA É A ÚNICA CAMADA DENTRO DO ORBE AGORA.
   Aqui moravam duas regras que serviam as `<picture>` da esfera orbital: uma
   punha o invólucro em 76% (porque o ativo trazia halo próprio, que morria em
   86,5% do raio, e os 3 pontos de folga até o primeiro anel em 36% impediam o
   desenho de encostar na fotografia) e a outra esticava o `<img>` a 100% dela.
   Com a esfera removida não há mais `<picture>`, e a segunda regra passou a dar
   100% do PALCO à marca — 260px de um SVG que pede 120.

   Uma regra só, e a largura em PORCENTAGEM e não em px: o orbe é
   `clamp(184px, 16vw, 260px)`, então 46% acompanha os três tamanhos sem media
   query própria. A 260 dá 120px, que é o `width` declarado no HTML para
   reservar o espaço e não deixar a banda saltar no carregamento.
   `z-index: 1` a põe acima da poça do `::before`, e o `place-items: center` do
   `.fc-orbe` já a centra — não há o que posicionar à mão. */
.fc-orbe .fc-marca {
  display: block;
  height: auto;
  position: relative;
  width: 46%;
  z-index: 1;
}

/* ── OS ANÉIS ────────────────────────────────────────────────────────────────
   O erro do protótipo era ter três elipses com TRÊS semi-eixos maiores
   diferentes (140, 112 e 96): sem eixo comum elas não pertencem ao mesmo
   corpo, e o conjunto lê como três desenhos empilhados.

   Aqui os três de fora têm semi-eixo maior 138 e semi-eixo menor 138·cos(i):
       cos 72° → 43    inclinação rasa, o anel que se vê de canto
       cos 52° → 85    inclinação média
       o círculo r=138 é o horizonte, a inclinação zero
   Com o eixo maior igual, os três tangenciam o MESMO círculo de raio 138 e o
   conjunto ganha um contorno só. É uma esfera armilar, não três elipses.

   O quarto é de raio menor de propósito: órbita mais baixa, girando ao
   contrário, e é ele que amarra o sistema ao núcleo.

   O traço é medido no sistema do desenho e não em pixel de tela (nada de
   `non-scaling-stroke` aqui): a esfera pequena fica com linha mais fina, que é
   o que acontece quando um desenho é reduzido. De 0,8px a 1,7px na faixa de
   184–300px de palco. */
.fc-arco {
  fill: none;
  stroke-linecap: round;
  /* 101 e não 100, pela mesma razão da fundação: `pathLength` normaliza por
     razão e um arredondamento a menos deixaria meio pixel de ponta por fechar.
     Em anel fechado a sobra cai sobre o próprio começo e não aparece.
     O padrão é 0 — o anel INTEIRO desenhado. Quem chega sem `view()` ou com o
     movimento desligado vê a órbita pronta. */
  stroke-dasharray: 101 101;
  stroke-dashoffset: 0;
}
.fc-arco--horizonte {
  stroke: color-mix(in srgb, var(--c-teal-2) 26%, transparent);
  stroke-width: 1.3;
}
.fc-arco--a {
  stroke: color-mix(in srgb, var(--c-teal-2) 48%, transparent);
  stroke-width: 1.7;
}
.fc-arco--b {
  stroke: color-mix(in srgb, var(--c-teal-2) 32%, transparent);
  stroke-width: 1.4;
}
.fc-arco--interno {
  stroke: color-mix(in srgb, var(--c-teal) 52%, transparent);
  stroke-width: 1.5;
}

/* A CONTA DE LUZ. Uma só. Ela está no vértice do anel raso e é filha do mesmo
   grupo, então não orbita por conta própria: viaja PRESA ao anel, que é o que
   uma conta num aro faz. Duas contas em velocidades diferentes seriam duas
   coisas para acompanhar; uma é o ponteiro do relógio. */
.fc-conta-halo   { fill: color-mix(in srgb, var(--c-teal) 14%, transparent); }
.fc-conta-meio   { fill: color-mix(in srgb, var(--c-teal) 34%, transparent); }
.fc-conta-nucleo { fill: var(--c-teal-2); }


/* ══ 4 · OS SEIS RÓTULOS ═════════════════════════════════════════════════════ */

/* Os pontos das seis pílulas ficam VOLTADOS PARA DENTRO e formam duas colunas
   retas encostadas na esfera — seis pontos de ancoragem, que é o que o ciclo
   diz. E são RETAS de propósito: curvá-las para acompanhar o círculo tiraria o
   contraste que faz o círculo parecer redondo. A sagita medida na altura da
   pílula do meio é de 7,5px num palco de 290 — pequena demais para ler como
   arco e grande o bastante para ler como desalinho. */
.fc-rotulos {
  display: grid;
  gap: var(--e-3);
  list-style: none;
  margin: 0;
  padding: 0;
}
.fc-rotulos--esq { justify-items: end; }
.fc-rotulos--dir { justify-items: start; }

/* A COLUNA DA DIREITA CONTINUA A CONTAGEM DA ESQUERDA. As seis pílulas são um
   ciclo de seis etapas EM ORDEM — é o argumento inteiro desta banda —, e estão
   em duas listas só porque flanqueiam a esfera. O `:nth-child` do `.bd-entra`
   reinicia em cada lista: `--bd-i` saía 0,1,2 dos dois lados, e o ciclo entrava
   em três pares simultâneos. Três coisas ao mesmo tempo é o contrário do que a
   peça diz. Estes três índices são o caso que o comentário da escada prevê —
   `--bd-i` escrito de fora, quando a posição no DOM não é a posição na leitura. */
.fc-rotulos--dir > :nth-child(1) { --bd-i: 3; }
.fc-rotulos--dir > :nth-child(2) { --bd-i: 4; }
.fc-rotulos--dir > :nth-child(3) { --bd-i: 5; }

/* A CORREÇÃO ÓPTICA DA PÍLULA ESPELHADA. `.bd-pilula` desconta 1em de tracking
   do padding da DIREITA, porque é lá que fica o vão fantasma depois da última
   caixa-alta. Com `row-reverse` a última letra deixa de ser a borda direita —
   quem passa a ser é o ponto — e o desconto passa a apertar o lado errado em
   1,5px. Aqui o padding volta a ser igual dos dois lados e o vão fantasma é
   absorvido pelo `gap` entre a palavra e o ponto, onde não se vê. */
.fc-rotulos--esq .bd-pilula { padding-inline: var(--e-3); }


/* ══ 5 · O MOVIMENTO ═════════════════════════════════════════════════════════
   Um relógio só para a banda inteira, e é o MESMO do fio: `--fc-cena` é
   nomeado na seção, e a seção é a caixa que a `.soma-fio` cobre por inteiro.
   Por isso as porcentagens daqui e as de `--fio-de`/`--fio-ate` falam a mesma
   língua — a órbita termina de se desenhar em 39%, e a luz chega em 44%.

   As órbitas se desenham pelo MESMO gesto do fio: a linha que atravessou seis
   bandas chega e vira órbita. É a única coisa que a banda de fecho tinha para
   dizer de movimento, e ela diz uma vez.
   ═══════════════════════════════════════════════════════════════════════════ */
@supports (animation-timeline: view()) {
  .fc {
    view-timeline-name: --fc-cena;
    view-timeline-axis: block;
  }

  .fc-arco {
    animation: fc-orbita linear both;
    animation-timeline: --fc-cena;
    /* 3% de defasagem por anel. Numa banda de 730px em janela de 900, a
       travessia mede 1630px: 3% são 49px de rolagem entre um anel e o
       seguinte — dá para ver a ordem sem ninguém ficar esperando. O último
       fecha em 39%, dentro dos 44% que o documento garante. */
    animation-range:
      cover calc(6% + var(--fc-i, 0) * 3%)
      cover calc(30% + var(--fc-i, 0) * 3%);
  }
  /* O índice por posição, não por atributo: os anéis podem ser reordenados no
     SVG para trocar quem passa na frente sem que ninguém tenha de lembrar de
     renumerar nada. O 4º filho do primeiro grupo é a conta, não um anel — e o
     último filho do `<svg>` passou a ser a agulha de leitura do § 14, que
     também não é anel. Ela é IRMÃ dos dois grupos e não filha de nenhum, então
     não entra em `.fc-gira > .fc-arco` e a contagem daqui continua exata. */
  .fc-gira > .fc-arco:nth-child(2) { --fc-i: 1; }
  .fc-gira > .fc-arco:nth-child(3) { --fc-i: 2; }
  .fc-gira--contra > .fc-arco { --fc-i: 3; }

  @keyframes fc-orbita {
    from { stroke-dashoffset: 101; }
    to   { stroke-dashoffset: 0; }
  }

  /* A conta só acende depois que o aro dela existe. */
  .fc-conta {
    animation: fc-conta-acende linear both;
    animation-timeline: --fc-cena;
    animation-range: cover 26% cover 34%;
  }
  @keyframes fc-conta-acende {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}

/* A ROTAÇÃO é por tempo e não por rolagem: um sistema orbital não para porque
   a página parou. 74s e 103s não têm razão simples entre si — 103 é primo, e o
   par só reencontra a mesma pose a cada 7.622s —, e por isso o desenho nunca
   repete a mesma configuração dentro de uma visita, que é o que separa "gira"
   de "loop".

   ELA COMEÇA NO CARREGAMENTO, com a banda a cinco telas de distância. A exceção
   é a mesma dos anéis do orbital e está argumentada lá, no comentário de
   `.orb-aneis`: `transform` num grupo de SVG a GPU compõe sem repintar, e giro
   contínuo não tem começo nem fim para se assistir — não há argumento a perder
   por acontecer sem plateia, ao contrário da respiração da vaga. */
.fc-gira {
  animation: fc-gira 74s linear infinite;
  transform-box: view-box;
  transform-origin: 50% 50%;
}
.fc-gira--contra {
  animation-direction: reverse;
  animation-duration: 103s;
}
@keyframes fc-gira {
  to { transform: rotate(360deg); }
}


/* ══ 6 · O EMPILHAMENTO ══════════════════════════════════════════════════════
   Dois pontos de quebra, e cada um tem uma conta atrás.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1280px · A ESFERA PERDE AS COLUNAS LATERAIS ─────────────────────────────
   A conta é uma só: cada coluna de rótulo precisa de 170px, que é o que mede
   "EVOLUÇÃO CONTÍNUA" em 10,5px com 0,14em de espacejamento. Medido, a coluna
   entrega 187px em 1281 · 174 em 1200 · 168 em 1150 — quer dizer, o arranjo
   lado a lado só quebra de fato por volta de 1155.

   O corte vem 125px antes, e de propósito: entre 1155 e 1280 ele CABE com 4 a
   17px de folga, e uma cápsula a 4px do sistema de anéis não lê como par de
   rótulos flanqueando uma esfera — lê como colisão que quase aconteceu.

   A BANDA CONTINUA LADO A LADO, e os rótulos é que descem. Duas razões: em
   880px, onde ela de fato empilha, a banda mede 932px de altura, e a última
   seção da página virar uma tira em pé é justamente o que o desfecho não pode
   ser; e o fio. Com a banda deitada, o trecho reto do traçado passa 190px
   abaixo do desenho (medido em 1280 e em 1000). Empilhar a banda aqui subiria
   a esfera para cima da linha. */
@media (max-width: 1280px) {
  /* A COLUNA DA DIREITA DEVOLVE O QUE PEGOU. Os 1,12fr existiam para caber os
     dois rótulos AO LADO da esfera; com eles embaixo, a conta acabou.

     E devolve 1,06 e não 1,00 por uma medida: o par de botões mede 439px
     (222 + 16 + 201). Em 1000px de tela, 1fr/1fr dá 425 de coluna e eles
     empilham por 14px; 1,06/0,94 dá 456 e eles ficam na mesma linha. Abaixo de
     ~960 empilham mesmo, e empilhados continuam certos — alvo inteiro, ordem
     preservada, primário em cima. O que sobra para a esfera nunca aperta: em
     881px, o pior caso, são 358px para um bloco de rótulos de 331. */
  .fc-grade { grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); }

  /* DUAS COLUNAS DO TAMANHO DAS PALAVRAS, centradas — e não duas frações da
     coluna. Com `1fr 1fr` em 1280 as duas listas abrem 252px cada e ficam a
     132px uma da outra: o que era um par vira duas listas soltas. Com `auto` o
     bloco mede exatamente 328px, o conteúdo, e `justify-content: center` o
     alinha com o eixo da esfera sem nenhum número mágico no meio. */
  .fc-esfera {
    gap: var(--e-5) var(--e-4);
    grid-template-columns: auto auto;
    justify-content: center;
  }
  /* A LINHA PRECISA SER DECLARADA, e não só a coluna. Sem `grid-row: 1` o
     autoposicionamento coloca a primeira lista na linha 1, empurra a esfera —
     que pede as duas colunas — para a linha 2, e a segunda lista para a 3:
     três blocos empilhados no lugar de esfera em cima e dois rótulos embaixo.
     Com a linha fixa, as duas listas se acomodam sozinhas na linha 2. */
  .fc-orbe {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: center;
    width: clamp(180px, 22vw, 250px);
  }
  /* De volta ao natural: fora do arranjo espelhado, o ponto das seis lê da
     esquerda para a direita, como qualquer lista, e as cápsulas alinham pela
     borda de início da coluna. O padding volta a descontar o tracking à
     direita, que é onde ele volta a sobrar. */
  .fc-rotulos--esq { justify-items: start; }
  .fc-rotulos--esq .bd-pilula {
    flex-direction: row;
    padding-inline: var(--e-3) calc(var(--e-3) - .14em);
  }

  /* A REDE DE SEGURANÇA DA CÁPSULA. Os 170px de "EVOLUÇÃO CONTÍNUA" são a
     medida da JetBrains Mono; se ela não chegar e a substituta do sistema for
     mais larga, todo o arranjo empilhado passa a pedir mais espaço do que tem —
     e uma cápsula `nowrap` não cede: ela empurra a grade e a página ganha
     rolagem horizontal. Deixando quebrar, a faixa `auto` encolhe até o
     min-content, que com quebra é a palavra mais longa, e a cápsula usa duas
     linhas por dentro. Feio, e é o único dos dois defeitos que não tira nada do
     leitor. O `padding-block` existe para essa segunda linha não sair pela
     tampa da cápsula. */
  .fc-rotulos .bd-pilula {
    padding-block: var(--e-2);
    white-space: normal;
  }
}

/* ── 880px · A BANDA EMPILHA, E É O MESMO PONTO DA FUNDAÇÃO ──────────────────
   880 não é escolha nova: é onde `_fundacao.css` troca o traçado pela tira em
   pé na goteira. Usar o mesmo número mantém uma explicação só para a página
   inteira — antes disso a banda é um quadro deitado, depois é uma tira em pé.

   O nó vai para 50% porque a esfera passa a ser centrada. Como o trecho do
   traçado entre 43% e 75% é reto, 50% continua caindo em cima da linha. */
@media (max-width: 880px) {
  .fc-grade { grid-template-columns: minmax(0, 1fr); }
  .fc-fala { max-width: none; }
  .fc .soma-fio-no { --x: 50%; }

  /* As colunas passam a se contar sozinhas: uma faixa de 10rem cabe duas vezes
     em 430px de conteúdo e uma só em 375px. É o que troca as duas colunas de
     rótulo por uma sem precisar acertar um ponto de quebra contra a largura da
     palavra mais longa — que muda se a fonte mudar.

     O teto de 460px é o que impede o contrário: em 880px de largura o bloco
     herdaria a coluna inteira, 792px, e duas cápsulas de 170px ficariam a mais
     de 200px uma da outra — duas listas, não um par.

     E o teto é `width: min(100%, 460px)`, NÃO `max-width: 460px`. Margem
     automática em item de grade desliga o esticamento e faz a caixa medir pelo
     conteúdo — e aí o `max-width` deixa de ser teto e vira a medida escolhida:
     em 430px de tela, medido, o bloco abria 460px dentro de uma coluna de 387 e
     as duas cápsulas da direita saíam da tela pelo `overflow-x: clip` da raiz,
     sem nem gerar barra de rolagem que denunciasse. Com `width` definido, os
     100% se resolvem contra a coluna e o `min()` escolhe o menor dos dois. */
  .fc-esfera {
    grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
    margin-inline: auto;
    width: min(100%, 460px);
  }
  .fc-orbe { width: min(280px, 62vw); }
}

/* ── 640px · OS DOIS BOTÕES VÃO A LARGURA INTEIRA ───────────────────────────
   O mesmo gesto e o mesmo número do herói, do Plantel e da consultoria. Eram os
   únicos CTA da metade de baixo que não faziam isso: medido a 430, o par ficava
   em 222 e 202px, empilhado, encostado à esquerda e com 20px de diferença de
   largura entre os dois — dois botões que deviam ser um par lendo como dois
   restos. O comentário de 1280 discute o par LADO A LADO a 1000px, que é outra
   largura e outro problema. */
@media (max-width: 640px) {
  .fc-acoes .btn { flex: 1 1 100%; justify-content: center; }
}


/* ══ 7 · CORES FORÇADAS ══════════════════════════════════════════════════════ */
@media (forced-colors: active) {
  /* Os arcos e a poça são atmosfera: nenhum dos dois carrega informação que a
     palavra da pílula já não dê. Forçados, os quatro anéis viram quatro linhas
     opacas cruzando a marca. */
  .fc-arcos,
  .fc-orbe::before { display: none; }
}


/* ══ 8 · O RODAPÉ ════════════════════════════════════════════════════════════
   Só o que a revisão da marcação exigiu. O resto do rodapé continua sendo o de
   `styles.css`.
   ═══════════════════════════════════════════════════════════════════════════ */

/* `.foot-brand img` da casa fixa `height: 28px`. Com os atributos `width` e
   `height` agora presentes — e eles precisam estar, senão o rodapé reflui
   quando o SVG chega — o navegador passaria a derivar a largura da proporção
   declarada. `width: auto` devolve a decisão à imagem que estiver de fato
   carregada: o `onerror` troca o logotipo horizontal (4,651:1) pelo ícone
   quadrado, e sem isto o quadrado sairia esticado a 130px. */
.foot-brand img { width: auto; }

/* A LINHA DE BAIXO DO RODAPÉ ESTAVA EM 2,77:1. `.foot-bot` pinta com
   `--d-ink-4` (32% de branco) em 11px — medido contra o campo real, 2,77:1,
   abaixo dos 4,5:1 de texto pequeno. Subindo um degrau, para `--d-ink-3`, dá
   5,87:1, que é o mesmo valor dos links das colunas logo acima: o pé do rodapé
   passa a ler tão bem quanto o corpo dele, e continua discreto por CORPO e
   espacejamento, que é de onde a discrição devia ter vindo desde o começo.

   A correção mora aqui, e não em `styles.css`, porque aquele arquivo veste as
   doze páginas comerciais e a plataforma logada — o mesmo `.foot-bot` sobre
   outros fundos é outra conta. As outras páginas precisam da mesma medida;
   está anotado no relatório. */
.foot .foot-bot { color: var(--d-ink-3); }

/* A seta de "abre em outra aba" é desenho e não caractere: `↗` herda o peso e
   o espacejamento da Inter e desalinha na linha de base. O SVG alinha pelo
   `currentColor` e pela caixa do texto. */
/* A SETA DE «ABRE EM NOVA ABA» SAIU do link da SAVYME no rodapé, e com ela as
   três regras que a vestiam — `.foot-fora` não tem mais um único consumidor.

   Ela caía para a LINHA DE BAIXO: o `display: inline-flex` desta regra perdia
   para o `display: block` que `.foot ul a` aplica com peso maior, e o `<svg>`
   inline sobrava embaixo da palavra. Não era falta de largura — o item mede
   267px e «SAVYME» ocupa 56.

   Dava para consertar o empilhamento em vez de apagar a seta. O dono pediu para
   tirar, e o que se perde é o aviso VISUAL de que o link abre fora. O aviso para
   leitor de tela não se perde: o `aria-label` continua dizendo «SAVYME — abre em
   nova aba», e é ele que a norma cobra. Fica registrado que a perda é para quem
   enxerga, caso alguém queira devolver a seta um dia — aí o conserto é
   `display: inline-flex` com peso suficiente para vencer o `.foot ul a`. */


/* ════════════════════════════════════════════════════════════════════════════
   9 · SEM MOVIMENTO — a mesma cena, parada e inteira

   Nada aqui é degradação: o anel nasce com `stroke-dashoffset: 0`, que é o anel
   desenhado, e a conta nasce opaca. Desligar é só não deixar a animação
   sobrescrever. Vence por ordem e por especificidade igual, sem `!important`.

   ESTE BLOCO DIZIA SER «O ÚLTIMO DO ARQUIVO», E NÃO É MAIS. Ele é o último do
   LOTE DELE. Depois dele vêm o § 13 (a casca de energia da esfera) e o § 14 (a
   leitura do ciclo), e cada um traz o seu próprio desligamento no fim de si —
   que é a única saída, já que uma regra escrita depois deste bloco voltaria a
   rodar com o movimento desligado. É a regra que o cabeçalho sempre pregou,
   aplicada a ele mesmo: quem desliga tem de vir por último.
   ════════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .fc-gira {
    animation: none;
    transform: none;
  }
  .fc-arco {
    animation: none;
    stroke-dashoffset: 0;
  }
  .fc-conta {
    animation: none;
    opacity: 1;
  }
  .foot-fora svg { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PADRONIZAÇÃO DE TIPOGRAFIA E RITMO — o lote inteiro

   ENTRA NO FIM DO ARQUIVO, E A POSIÇÃO É OBRIGATÓRIA enquanto a limpeza
   listada no § 1 não acontecer: seis das regras que este bloco substitui
   empatam com ele em especificidade (0,1,1), e quem vence um empate é a
   ordem. Mover este bloco para cima devolve as sete divergências de
   título que ele existe para fechar.
   ══════════════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════════════════
   A FOLHA ÚNICA — corpo, ritmo e vão da landing, num lugar só

   CASA: o FIM de `page-home.css`, imediatamente ANTES do último bloco
   `@media (prefers-reduced-motion: reduce)` (hoje linha 13245). O arquivo
   registra em 2740 e em 12704 que o bloco de movimento desligado tem de
   continuar sendo o último, porque vence por ORDEM e sem `!important`. Nada
   daqui declara `transition`, `animation`, `transform`, `opacity` ou
   `clip-path` — a invariante fica de pé, e a nossa também: estas regras têm de
   vir DEPOIS das que substituem.

   POR QUE O FIM, E NÃO O MEIO. Seis das onze regras de título empatam em
   (0,1,1) com o seletor de papel daqui — `.virada-texto h2`, `.quem-fala h2`,
   `.pl-texto h2`, `.cons-texto h2`, `.fc-fala h2` e o próprio `.home-sec h2`.
   Em empate quem decide é a ordem na folha. No meio do arquivo este bloco não
   faria nada, e a conclusão seria que a proposta não funciona.

   ORDEM DE CARGA CONFERIDA (index.html:60-70):
       styles.css → soma-editorial.css → page-home.css → maquete.css → soma-premium.css
   `soma-premium.css` não declara um `font-size` sequer e `maquete.css` só
   alcança o que é dela. A ÚNICA regra deste lote que não pode morar aqui é a de
   `.pontas-linha`, que vive em `maquete.css` — está no § 11, marcada.

   ─────────────────────────────────────────────────────────────────────────────
   AS DUAS LEIS QUE A PÁGINA JÁ OBEDECIA SEM TER ESCRITO

   1 · O PAPEL ESCOLHE O PAR (degrau, ritmo). A régua de CORPO existe e é
       obedecida — 74 consumos de token contra 4 números à mão. A régua de RITMO
       nunca existiu, e é dela que sai o achado mais grave da medição: no estilo
       computado a 1440, `--t-sm` carrega SEIS entrelinhas (1 · 1,30 · 1,45 ·
       1,50 · 1,55 · 1,60), `--t-lg` carrega CINCO e `--t-mono` QUATRO. Onde a
       regra não declarou nada, herdou o 1,55 do `body`; onde declarou, cada
       autor escolheu. Mesmo corpo, batidas diferentes — o olho não nomeia isso,
       lê como descuido.

       Dentro de um papel, o ratio CAI conforme o corpo SOBE: 10,5px pede 1,6 de
       ar relativo e 49px pede 1,08. Não é gosto — é que o vão entre linhas
       cresce em valor absoluto junto com o corpo, e a varredura de retorno do
       olho encurta.

   2 · O FLUIDO MEDE A PÁGINA, O FIXO MEDE O OBJETO. Rastreadas as 66
       declarações de vão da folha: as 52 fixas (`var(--e-*)`) estão TODAS dentro
       de objetos — gap de lista, preenchimento de cartão — e as 14 fluidas
       (`clamp(var(--e-N), Xvw, var(--e-M))`) estão TODAS em contêiner de página.
       Zero exceções dos dois lados. A lei já era obedecida em 100% dos casos e
       nunca foi escrita — e por não estar escrita, o vão de BANDA (que é
       distância de página) foi parar em oito valores diferentes.

   O QUE ESTE LOTE NÃO FAZ, e é decisão, não esquecimento:
     · não toca uma cor. `.bde-apoio` continua em `--d-ink-3` (5,72:1 medido
       sobre o campo, acima do piso de 4,5:1). Subir para `--d-ink-2` foi
       proposto e recusado nesta passada: aquela banda corre sobre um retrato
       recortado, e o contraste real ali é contra outro fundo. Conta a refazer,
       não a supor.
     · não toca `text-wrap`. Quatro dos onze títulos declaram `balance` e sete
       não. Unificar é o passo seguinte — e não este, porque dois deles
       (`.home-cabeca h2` e `.virada-texto h2`) são fatiados em linhas por
       `soma-premium.js:113`, e misturar mudança de quebra com mudança de
       movimento é o jeito de não saber qual das duas quebrou a tela.
     · não mexe em `data-soma-item`, não reordena marcação, não cria contêiner.
       `soma-editorial.js:60` varre `[data-soma-item]` na SEÇÃO inteira, em
       ordem de documento, com atraso `indice * 70ms`. Nenhum índice muda porque
       nenhum elemento muda de lugar.
     · deixa dois valores de intervalo de AÇÕES de pé (48 e 32) e os dois
       `style="margin-top:…"` inline do HTML. É higiene de marcação, não simetria
       de seção. Registrado para uma passada própria.
   ════════════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════════════
   § 0 · OS TOKENS — ETAPA 1. Nenhum pixel muda ao aplicar só este bloco.

   Vai DENTRO do `body` que já abriga a escala de tipo (page-home.css:114-122),
   e não em `:root`, pela mesma razão que a escala mora lá: herda para a página
   inteira e não disputa com `soma-editorial.css`, que continua servindo quem
   mais o carregar.
   ════════════════════════════════════════════════════════════════════════════ */
body {

  /* ── O RITMO GANHA FICHAS — o eixo que faltava ao lado dos nove degraus ────
     Nove fichas para nove papéis, gêmeas dos nove degraus de corpo. O número
     resolvido de cada uma está ao lado, calculado a 1440 contra o degrau que
     ela veste.

     `--r-texto` É 1,55 POR CONSTRUÇÃO E NÃO POR ESCOLHA: é o mesmo valor do
     `body` em `styles.css:118`. Como `line-height` herda como NÚMERO — cada
     elemento recalcula contra o próprio corpo —, tudo o que esta folha não
     nomear já cai na leitura corrida certa sozinho. O token não muda a página:
     ele torna DECLARÁVEL o que hoje é acidente de herança. */
  --r-rotulo:     1;      /* --t-mono 10,5 → 10,50 · cápsula de UMA linha        */
  --r-rotulo-env: 1.45;   /* --t-mono 10,5 → 15,22 · o mesmo rótulo quando ENVELOPA */
  --r-nota:       1.6;    /* --t-xs   13   → 20,80 · nota, legenda, apoio curto  */
  --r-texto:      1.55;   /* --t-sm 14,5 → 22,48 · --t-md 16 → 24,80 · corrido   */
  --r-destaque:   1.45;   /* --t-lg   20,8 → 30,16 · o lead, leitura em destaque */
  --r-cartao:     1.25;   /* --t-lg   20,8 → 26,00 · nome de cartão, promessa    */
  --r-bloco:      1.2;    /* --t-xl   27,2 → 32,64 · cabeçalho de painel         */
  --r-titulo:     1.08;   /* --t-2xl  49   → 52,88 · título de seção             */
  --r-heroi:      0.92;   /* --t-3xl  120  → 110,40 · o herói, único na página   */

  /* ── OS DOIS VÃOS QUE A PÁGINA PRECISAVA NOMEAR ───────────────────────────
     Oito bandas de duas colunas, oito vãos, para a MESMA tarefa de separar o
     texto da imagem: 0 · 32 · 37,44 · 48,96 · 64 · 64,8 · 72 · 72. Quarenta
     pixels entre a menor e a maior. É esse o desalinho que se lê ao rolar —
     cada seção correta por dentro, nenhuma concordando com a vizinha sobre onde
     a coluna de texto termina.

     E o fixo/fluido nunca foi decisão: DOIS desses `clamp` já não são fluidos a
     1440. `.bde-grade` pede `clamp(--e-6, 4.5vw, --e-8)` e 4,5vw dá 64,8 contra
     teto 64 — o navegador devolve o TETO. `.bde-voz` pede `clamp(--e-5, 2.4vw,
     --e-6)` e 34,56 contra teto 32, idem. São números fixos vestidos de clamp.
     No outro extremo, os dois que hoje batem na goteira (`.sv-heroi-grade` e
     `.cons-wrap`, ambos 72) chegam lá por `clamp(--e-7, 5vw, --e-9)`: acima de
     1440 sobem para 96 enquanto a goteira congela em 72, porque 5vw já é o teto
     dela nesta largura. O acerto de hoje é o cruzamento de duas curvas em 1440
     e só em 1440. */

  /* 72 a 1440. O ÚNICO vão fluido da página, e é a própria goteira. A goteira é
     a folga da borda da janela até o texto; o vão de banda é a folga do texto
     até a coluna vizinha. O olho lê as duas como a MESMA distância, e quando
     não são, a coluna parece deslocada dentro da página. Usando o mesmo token,
     a banda inteira aperta junto e para de crescer quando a goteira para. */
  --e-vao-banda: var(--e-goteira);

  /* 32, fixo. Entre peças irmãs de uma fileira — cartão, painel, selo, plaqueta.
     Vão entre irmãs é JUNTA, não medida de leitura: 32px de junta continuam
     lendo como 32px de junta em qualquer tela, e crescer para 43,2 num monitor
     largo só faz a fileira parecer que perdeu um item. A diferença de hoje entre
     23,04 (`.cons-cartas`, fluido) e 24 (`.orb-placas`, fixo) é de 0,96px:
     invisível. Não é decisão de arte, é ruído de duas mãos.

     A terceira junta — a de COMPOSIÇÃO, entre peças que são uma imagem só — não
     ganha token porque já está resolvida e certa: o mosaico roda `--mos-gap:
     var(--e-3)` = 12, e seis colunas de 203,4 com 12 de junta fecham exatamente
     os 1280,7 do wrap a 1440. Token sem consumidor é o defeito que este lote
     está corrigindo, não um a acrescentar. */
  --e-vao-fileira: var(--e-6);

  /* ── A MEDIDA DE LEITURA, E A ARMADILHA DO `ch` ───────────────────────────
     Medido no canvas contra os glifos reais dos nove leads da página:

         1ch em Inter                          = 0,631em   (`ch` é o avanço do zero)
         letra média do texto corrido em pt-BR = 0,495em

     Razão 1,274. Quer dizer: `max-width: 56ch` NÃO entrega 56 caracteres —
     entrega 71. Toda medida em `ch` desta página está 27% acima do número que
     se lê no código, e ninguém percebeu porque `ch` PARECE unidade de caractere
     e é a largura de um algarismo.

     A faixa saudável de 45–75 caracteres, traduzida para esta fonte, é de 35ch a
     59ch. 52ch = 66 caracteres reais (52 × 1,274 = 66,2). 66 e não 75 porque 75
     é o limite do desconfortável, não o alvo — e porque sete dos nove leads já
     vivem entre 44 e 56 caracteres: um teto de 66 fecha a faixa por cima sem
     obrigar nenhum deles a crescer.

     NOME NOVO, E NÃO `--e-medida` REAPONTADO. `--e-medida` existe em
     `soma-editorial.css:33` valendo 68ch — 86 caracteres, quase o dobro da
     faixa, sob a etiqueta «medida de leitura confortável». Está morto: a única
     regra que o consome, `.home-medida` (page-home.css:307), tem zero
     ocorrências no HTML. Reapontá-lo aqui para 52ch deixaria o mesmo nome
     valendo dois números em duas folhas, que é exatamente a armadilha que este
     lote existe para fechar. Ele fica onde está, morto e anotado; quem lê
     `--e-medida-lead` sabe o que a medida mede. */
  --e-medida-lead: 52ch;

  /* O RESPIRO DO DESFECHO. Dez seções em 129,6px (`--e-secao` a 1440) e o
     `#fecho` em 165,9 — `calc(var(--e-secao) * 1.28)`, page-home.css:2635.
     O ar extra NÃO é deriva e o bloco original já prova por quê: antes o fecho
     media numa régua FIXA (`--e-10` = 128) enquanto o miolo media numa FLUIDA,
     e o fim da página tinha MENOS ar que o meio em tela larga.

     O que não se defende é o 1,28: não é degrau de `--e-*`, não é ratio de
     escala nenhuma da casa. 1,25 é — é o `--r-cartao` acima, é o `2.5em` da
     reserva do `.orb-placa-titulo`, é um quarto a mais. Na tela a diferença é
     de 3,9px a 1440 e 1,9px no piso de 64: invisível. Na cabeça de quem mantém,
     é entre «vinte e oito por cento» e «um quarto a mais que o miolo». */
  --e-secao-fim: calc(var(--e-secao) * 1.25);
}


/* ════════════════════════════════════════════════════════════════════════════
   § 1 · TÍTULO DE SEÇÃO — ETAPA 2. Onze peças, um corpo, um ritmo, um
   espacejamento.

   HOJE SÃO QUATRO CORPOS PARA UM PAPEL SÓ:
       24     `#a-casa`               ← NENHUMA regra declara. São os 24px do
                                        `h2 { font-size: 1.5em }` do NAVEGADOR,
                                        com o peso 600 vindo do `h1..h4` de
                                        `styles.css:174`. É o único título de
                                        seção da página que ninguém decidiu.
       34,4   o ciclo                 ← e este NÃO é título de seção: § 4.
       49     sete bandas
       60,8   `#pontas` e `#solucoes` ← `.h-xl` de `styles.css:188`,
                                        `clamp(2rem, 4.4vw, 3.8rem)`. Uma classe
                                        utilitária GLOBAL, Nível 1, que veste as
                                        doze páginas, ocupando um degrau que a
                                        escala desta página não abriu — fica
                                        entre `--t-2xl` (48,96) e `--t-3xl` (120).

   E ENTRE OS SETE QUE JÁ DIVIDEM OS 49 HÁ TRÊS ENTRELINHAS (1,059 · 1,08 ·
   1,10) E DOIS ESPACEJAMENTOS (−0,028 e −0,030). Sobre um corpo de 49px, 1,059
   contra 1,10 são 2px por linha: invisíveis numa banda, visíveis quando duas se
   sucedem na rolagem. 1,08 é a mediana, já é o valor de `.virada-texto h2` e de
   `.sv-titulo`, e é o que move menos peça. Contra as métricas da Inter
   (maiúscula 0,727em, descendente 0,21em → mancha visual de 46,4px a 49), 1,08
   deixa 6,5px entre a descendente de uma linha e a maiúscula da seguinte; a
   1,06 são 5,5 e a 1,10 são 7,5. Os sete títulos são todos de duas linhas, quer
   dizer, todos mostram esse vão. 0,002em de espacejamento a 49px são 0,098px por
   letra — nem um décimo de pixel: não é ajuste ótico, é ruído de digitação.

   DESCER `.h-xl` DE 60,8 PARA 48,96, MEDIDO: `#pontas` continua em 3,12 linhas
   e perde 36px de altura (201 → 165); `#solucoes` continua em 2,03 linhas e
   perde 23px (130 → 107). NENHUMA quebra de linha muda de lugar — os 12px a
   mais só engordavam duas bandas em relação às outras nove. E um degrau existir
   porque uma classe da página velha existe não é hierarquia: é herança. Se a
   direção quiser um posto de ABERTURA, ele nasce como degrau DECLARADO ao lado
   dos outros em page-home.css:114-122 — nunca de volta ao `.h-xl`, que é Nível
   1 e nem sequer declara entrelinha (por isso `#pontas` e `#solucoes` são os
   dois únicos títulos da página cujo ritmo é a herança do `h1..h4`).

   O ALCANCE É POR ESCOPO E NÃO POR EDIÇÃO DO GLOBAL. `.home-sec .h-xl` (0,2,1)
   ganha de `.h-xl` (0,1,0) sem tocar `styles.css`. É o mesmo mecanismo do bloco
   «A RÉGUA ALCANÇA O QUE VEM DO GLOBAL» (page-home.css:2718-2740), que já traz
   `.eyebrow`, `.lead` e `.btn` para cá.

   O `:not(.sv-ciclo-titulo)` É OBRIGATÓRIO. Conferido no HTML: a página tem
   doze `<h2>`, onze de seção e um dentro de `.sv-ciclo-cab`, que é cabeçalho de
   painel e vai para `--t-xl` no § 4. Sem a exclusão, `.home-sec h2` o levaria a
   49 dentro de um cartucho de 290px. A exclusão custa (0,2,1) em vez de (0,1,1),
   o que só reforça a regra contra as seis irmãs de (0,1,1). */
.home-sec h2:not(.sv-ciclo-titulo),
.home-sec .h-xl {
  font-family: var(--f-sans);
  font-size: var(--t-2xl);
  font-weight: 500;
  letter-spacing: -0.028em;
  line-height: var(--r-titulo);
}

/* LIMPEZA QUE ACOMPANHA A ETAPA 2 — não é código novo, é código que SAI. Com a
   regra acima no fim da folha, estas declarações viram ruído, e cada uma é uma
   chance de a próxima pessoa reabrir a divergência. Apagar só as quatro linhas
   de corpo/peso/espacejamento/entrelinha de cada uma; `max-width`, `margin` e
   `text-wrap` FICAM, porque são medida e composição de cada peça e cada um traz
   a medição dele no comentário ao lado:

       page-home.css:1631-1638   .virada-texto h2   (o `max-width: 20ch` fica)
       page-home.css:1877-1882   .quem-fala h2
       page-home.css:9403-9408   .pl-texto h2
       page-home.css:11459-11463 .cons-texto h2     (o comentário do `max-width` fica)
       page-home.css:12487-12495 .bde-titulo        (o `margin: 0` fica)
       page-home.css:12776-12781 .fc-fala h2
       page-home.css:10896-10901 .sv-titulo         (o `text-wrap: balance` fica)

   Enquanto a limpeza não acontecer, a ORDEM deste bloco no fim do arquivo é
   obrigatória: seis dessas regras empatam em (0,1,1) com o seletor acima. */


/* ════════════════════════════════════════════════════════════════════════════
   § 2 · A CABEÇA DE SEÇÃO — ETAPA 3. Os dois intervalos, e o terceiro valor que
   ninguém escreveu.

   Medido: sobrancelha → título dá 16 · 18 · 24, e título → lead dá 16 · 24 · 32
   · 48 · 257. Dos cinco do segundo grupo, dois não são o par: os 257 do
   `#a-soma` e os 48 do `#a-casa`.

   ── O 18 É UM FANTASMA, E ELE É O ACHADO ─────────────────────────────────────
   Ninguém escreveu 18. Oito bandas declaram `--e-4` (16) e umas chegam à tela
   com 16, outras com 18. A causa: `.eyebrow` é `display: inline-flex`
   (styles.css:151). Em pai GRADE (`.sv-dizer`, `.virada-texto`) ela é blocada e
   o vão é exatamente a margem. Em pai BLOCO (`.home-cabeca > div`,
   `.quem-fala > div`, `.pl-texto`, `.cons-texto`, `.orb-texto`, `.fc-fala`,
   `.home-hero-texto`) ela continua sendo caixa EM LINHA e ganha uma linha de
   texto por baixo: com o documento em 16px/1,55 o strut dessa linha desce
   6,59px abaixo da base, enquanto a própria sobrancelha (10,5px/1,55) desce
   4,33px. Sobram 2,26px de entrelinha fantasma que o `margin-top` do título não
   sabe que existem — e 16 chegam à tela como 18,26.

   `display: flex` bloca a sobrancelha e a linha de texto deixa de existir. A
   cápsula NÃO descola do ponto de luz: o `::before` e o texto continuam sendo os
   dois primeiros itens de flex, colados pelo `gap: 10px` da casa, e
   `justify-content` continua no `flex-start` padrão. `.eyebrow` não tem fundo
   nem borda — conferido em styles.css:148-158 —, então virar caixa de bloco de
   largura cheia não desenha nada.

   CONFERIDO NA TELA depois da troca: as dez sobrancelhas da página medem
   [24, 16, 16, 16, 16, 16, 16, 16, 16, 16] até o pixel — o 24 é o herói, que é
   variante declarada, e as outras nove batem no número que sempre estava escrito.

   O par de seletores é o MESMO de page-home.css:2734, que já traz o corpo da
   sobrancelha do global para cá. Uma peça, um lugar. */
.home-sec .eyebrow,
.quem-fala-sec .eyebrow { display: flex; }

/* ── SOBRANCELHA → TÍTULO: 16, e sobra UMA banda para mudar ───────────────────
   Com o fantasma morto, oito das nove bandas com sobrancelha já medem os 16 que
   declaram. A nona é `#a-virada`, que declara 24. Vai para 16 pelo mesmo
   argumento das outras oito: rótulo e título são UMA unidade, e 16px entre um
   mono de 10,5 e um título de 49 é o que os mantém colados sem encostar.

   E é UMA REGRA DIRIGIDA, não um seletor de papel, de propósito: um
   `.home-sec h2 { margin-block-start }` teria de vencer `.home-cabeca h2`
   (0,2,1) e passaria a ser um TERCEIRO lugar declarando o mesmo 16 que outras
   oito regras já declaram. Escrever o número onde ele muda é mais barato que
   reescrevê-lo onde ele já está certo. */
.virada-texto h2 { margin-block-start: var(--e-4); }

/* ── TÍTULO → LEAD: 24, e as duas exceções ficam ─────────────────────────────
   24 é o valor de cinco das nove ocorrências reais do par e é o que o salto
   pede: de 49px de título para 20,8px de lead, 16 fazem o lead ler como a
   TERCEIRA LINHA do título — é o argumento que a própria folha já escreve para
   o `.bde-apoio` (page-home.css:12503) — e 32 já lê como troca de assunto.
   `--e-5` é também o vão que separa parágrafo de parágrafo em `.quem-fala p + p`,
   e título/lead É um par, não dois assuntos.

   Duas mudam: `.orb-lead` sobe de 16 e `.virada-texto .lead` desce de 32.

   FICAM COMO ESTÃO, e nenhuma das duas é esquecimento:
     · `#a-soma`, os 257px. `.quem-fala h2 + .lead` dá 96 (`--e-9`) e o
       `position: relative; top: calc(90px + 4.9vw)` dá 160,56 a 1440. Está
       justificado por escrito em page-home.css:1901-1913: o parágrafo tem de
       pousar na linha do quadril do grupo, e resolver por margem esticaria a
       seção, que estica a foto, que desce o quadril junto — perseguição que só
       fecha aos 350px. Não é o par tratado de outro jeito: é um bloco de texto
       posicionado sobre uma fotografia. O seletor `h2 + .lead` (0,2,1) continua
       vencendo sozinho, e por isso a regra abaixo não o alcança.
     · o herói. `--e-6` (32) sob um título de 120px é outra proporção, não outra
       decisão. Fica declarado como o que é: a variante do único posto de herói
       da página. */
.virada-texto .lead { margin-block-start: var(--e-5); }

/* ── OS 48px DO `#a-casa` NÃO SÃO O PAR — SÃO UM COLAPSO ─────────────────────
   O lead do mosaico vive FORA da `.home-cabeca`, e os 48 medidos são
   `.home-cabeca { margin-bottom: var(--e-7) }` (48) COLAPSANDO com
   `.mosaico-lead { margin-top: var(--e-5) }` (24): max(48, 24) = 48. Quer
   dizer, é o intervalo cabeça → corpo de uma composição de duas colunas, e não
   o par título → lead.

   Zerar o lado do lead não move um pixel: os 48 continuam sendo 48, agora
   escritos num lugar só. O que sai é o MECANISMO INVISÍVEL — hoje quem mexer em
   qualquer um dos dois números mexe no outro sem ver. */
.mosaico-lead { margin-block-start: 0; }


/* ════════════════════════════════════════════════════════════════════════════
   § 3 · O LEAD — ETAPA 3. Um corpo de destaque com ritmo de leitura miúda.

   `.lead` herda `line-height: 1.55` de `styles.css:192`, que é o ratio da
   leitura miúda aplicado a um corpo de 20,8: 32,2px de entrelinha, 11,4px de
   vão entre linhas, e o parágrafo desmancha em linhas avulsas. 1,45 fecha para
   30,2 sem apertar — a medida é longa (o § 9 a fixa em 66 caracteres) e a
   varredura de retorno do olho precisa do ar. Não desce a 1,4 exatamente por
   causa dessa medida.

   É a mesma lei do § 1 vista do outro lado: 13px pedem 1,6, 20,8 pedem 1,45, 49
   pedem 1,08.

   O par de seletores é o de page-home.css:2736, que já traz o CORPO do lead do
   global. Corpo e ritmo do mesmo papel, na mesma dupla de seletores. */
.home-sec .lead,
.quem-fala-sec .lead { line-height: var(--r-destaque); }


/* ════════════════════════════════════════════════════════════════════════════
   § 4 · TÍTULO DE BLOCO — ETAPA 4. `--t-xl` com `--r-bloco`, e a serifa reta
   sai de cena.

   `.sv-ciclo-titulo` está escrito à mão em `clamp(1.5rem, 2.5vw, 2.15rem)` =
   34,4px, em Instrument Serif RETA. A tentação é promovê-lo aos 49 dos outros
   dez títulos. Medido, seria erro: a `.sv-ciclo-cab` tem 310px de largura e é a
   PRIMEIRA CÉLULA de `grid-template-columns: minmax(0,1.04fr) repeat(3,
   minmax(0,1fr))` — senta na mesma fileira, na mesma altura e na mesma caixa
   dos três cartões. Não é título de banda: é cabeçalho de painel. A `--t-2xl`
   num cartucho de 290px dá 3 linhas e 159px de altura.

   E ELE CRESCE, NÃO ENCOLHE — medido no navegador, e escrito porque a conta que
   circulou dizia o contrário. Hoje: 34,4px de Instrument Serif em 278,9px de
   caixa = 75,7px de altura, 1,9 linha. Depois: 27,2px de Inter em 274,8 = 94,5px,
   2,9 linhas. A serifa cabia em menos linhas porque «Da recepção ao protocolo.»
   fechava numa só; em Inter a 27,2 ela pede duas, mais a linha da serifa, que o
   `.sv-ciclo-titulo .serif { display: block }` já isola.

   Os 19px a mais NÃO custam layout: a `.sv-ciclo-cab` é uma das quatro células
   de uma fileira cuja altura é dada pelos cartões, que carregam fotografia e são
   muito mais altos — medido, a célula tem folga de sobra e `align-content: start`
   empurra tudo para o topo. O que se compra com eles é o degrau: 27,2 é o mesmo
   corpo dos sete `.orb-painel-nome`, que é o outro cabeçalho de painel da página,
   e 34,4 era um degrau que a escala não tem.

   E A SERIFA RETA SAI. Das sete regras de Instrument Serif do arquivo, SEIS são
   ITÁLICO — é a decisão D-2, escrita em page-home.css:39-53: «o itálico é a
   assinatura». As duas retas são as duas desta banda, e são as únicas da página.
   O `<span class="serif">Sem ponto cego.</span>` já está no HTML e continua
   carregando a serifa itálica por `.reg-escuro .serif`: a assinatura volta a ser
   assinatura em vez de ser a fonte do parágrafo.

   BÔNUS QUE O § 9 COBRA: o comentário de page-home.css:11000 declara que a
   coluna do ciclo precisa de mais de 300,7px para «Da recepção ao protocolo.»
   fechar em duas linhas DEPOIS que a Instrument Serif carrega. Com o título em
   Inter a 27,2px essa conta some — a linha encolhe muito antes do limite —, e é
   por isso que o vão de fileira do § 9 pode apertar aquela coluna sem risco.

   `.orb-painel-nome`, `.orbita-frase` e `.sv-selo` já estavam em `--t-xl` e
   entram só para receber o ritmo: hoje carregam 1,10 · 1,28 · 1,25 para a mesma
   função — a linha grande que encabeça um bloco. `.sv-selo` é Instrument Serif
   itálico, de altura-x menor que a Inter no mesmo corpo nominal: 1,2 lhe sobra
   ar em vez de faltar. */
.home-sec .sv-ciclo-titulo {
  font-family: var(--f-sans);
  font-size: var(--t-xl);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: var(--r-bloco);
}
.orbita-frase,
.sv-selo { line-height: var(--r-bloco); }


/* ════════════════════════════════════════════════════════════════════════════
   § 5 · NOME DE CARTÃO E PROMESSA — ETAPA 4. `--t-lg` com `--r-cartao`.

   `.sv-ciclo-card h3` está em `clamp(1.15rem, 1.85vw, 1.6rem)` = 25,6px — 1,6px
   ABAIXO de `--t-xl` (27,2). Um degrau e meio pixel não é hierarquia: é o
   defeito que o comentário da própria escala (page-home.css:100-108) diz que ela
   existe para acabar — «seis espremidos em 2,5px… o olho não lê um degrau
   abaixo, lê tem coisa torta». E é a única regra de corpo do arquivo inteiro sem
   um comentário justificando o número: num arquivo onde cada `margin` carrega
   três parágrafos de medição, a ausência é o diagnóstico — deriva, não exceção.

   GANHO MEDIDO ALÉM DA COERÊNCIA: hoje os três títulos saem em 1 · 1 · 2 linhas
   (46 · 46 · 75px) e o terceiro cartão fica 29px mais alto que os vizinhos. Com
   `--t-lg` e `--r-cartao` os três fecham em 65,6px EXATOS — conferido no
   navegador, os três iguais até o décimo. A fileira nivela.
   O peso 600 é o de `.cons-face--frente h3`, que é a outra fileira de nomes de
   cartão da página, no mesmo degrau.

   O PESO DOS OUTROS DOIS NÃO SE UNIFICA NESTA PASSADA, e é decisão medida:
   `.orb-placa-titulo` roda 500 e carrega `min-block-size: 2.5em` — literalmente
   «duas linhas de 1,25» (page-home.css:4287) —, calibrado contra a tinta atual
   de «Cursos, consultoria, projetos e auditoria», 41 caracteres numa medida de
   347,5px. Subir para 600 engrossa a linha sem que ninguém tenha medido se ela
   ainda cabe em duas, e a terceira linha estouraria a reserva que impede a
   fileira de dançar de altura. Ganho zero, risco medido: fica em 500, escrito.

   E É POR ISSO QUE `--r-cartao` NÃO PODE MUDAR sem mexer no `2.5em` na mesma
   edição — os dois números são o mesmo número. */
.home-sec .sv-ciclo-card h3 {
  font-family: var(--f-sans);
  font-size: var(--t-lg);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: var(--r-cartao);
}

/* As outras três peças do degrau já estão no corpo certo e recebem só a ficha
   de ritmo, no lugar dos 1,20 · 1,25 · 1,35 soltos de hoje. `.orb-dor` é a que
   mais se move (1,35 → 1,25): medido nos sete painéis, ela ocupa 4,2 a 5,2
   linhas e as caixas caem de 147/119px para 141/115. */
.cons-face--frente h3 { line-height: var(--r-cartao); }

/* ── ITEM DE LISTA — os quatro selos do «menos ruído» FICAM em `--t-md` ───────
   A simetria pediria `--t-lg` aqui também, e a régua NÃO CABE. Medido: a grade
   é 2×2 com trilhas de 248,1px e o `<h3>` mede 239. O mais longo dos quatro,
   «Acompanhamento que fica», pede 264,3px a `--t-lg` e 204,4px a `--t-md`. A
   `--t-lg` dois dos quatro quebram em duas linhas e dois ficam em uma — fileira
   desigual, que é o defeito que o § 5 acabou de consertar no ciclo.

   Então não é degrau tolerado: é um PAPEL diferente, com nome. Selo é ícone mais
   linha curta mais uma frase, quatro em bloco; nome de cartão é a abertura de um
   cartão inteiro. Só o ritmo entra, para não sobrar um 1,22 solto no meio de
   nove fichas. A saída limpa — abrir a grade 2×2 para coluna única, onde caberia
   — é decisão de layout e está registrada como tal. */
.bde-selo h3 { line-height: var(--r-cartao); }


/* ════════════════════════════════════════════════════════════════════════════
   § 6 · TEXTO CORRIDO E NOTA — ETAPA 4. Aqui a correção é SUBTRAÇÃO.

   O `body` já roda 1,55. As entrelinhas soltas de 1,45, 1,5 e 1,6 espalhadas por
   estas regras são o que fabrica os «mesmos corpos com ritmos diferentes» da
   medição — 14,5px com três, 13px com duas. Voltar todas ao ritmo do papel mexe
   pouco e mexe no lugar certo: sobre 3 linhas de 16px, sair de 1,5 para 1,55 são
   2,4px. Ninguém vê a mudança numa peça; todo mundo vê a bagunça nas trinta.

   `.orb-itens li` entra junto de propósito. Um item de lista de uma ou duas
   linhas não ganha ratio privado: quem separa um item do outro é o
   `gap: var(--e-3)` de 12px do `.orb-itens`, não a entrelinha de dentro. */
.cons-face--verso > p,
.sv-ciclo-lead,
.bde-apoio { line-height: var(--r-texto); }

/* 13px — nota, legenda, apoio curto. Sobe de 1,5/1,55 para 1,6, e é a MESMA lei
   do § 1 lida ao contrário: abaixo de 14px o vão entre linhas precisa crescer em
   proporção, senão a mancha fecha. 20,8px de entrelinha para um corpo de 13. O
   deslocamento máximo é de 0,65px por linha, e 1,6 já era o valor da maioria
   destas regras. */
.bd-num p,
.cons-entrega,
.pl-papeis-lista dd,
.bde-selo p,
.sv-ciclo-card p { line-height: var(--r-nota); }


/* ════════════════════════════════════════════════════════════════════════════
   § 7 · O RÓTULO — ETAPA 5. Dois ritmos que JÁ estavam certos, e uma família
   que a própria casa já tinha decidido.

   As nove cápsulas de uma linha rodam entrelinha 1 (page-home.css:3338) e as
   sete de dentro do `.orb-painel` rodam 1,45 (page-home.css:7464). Isso NÃO era
   defeito, e vale dizê-lo: a regra que as separa existe porque ali a cápsula
   ENVELOPA — o comentário dela explica que sem `white-space: normal` o cartão
   estoura a coluna. Cápsula de uma linha quer a caixa colada ao glifo; de duas
   quer respiro entre elas. O que faltava era o NOME: os números não mudam,
   passam de resto a declaração. As entrelinhas de 1 ficam onde são ESTRUTURA e
   não ritmo — `.bd-pilula` é `inline-flex` com `min-height: 32px`, e a caixa
   dela é a cápsula, não a linha.

   A FAMÍLIA, ESSA, MUDA. `.bd-pilula` (16 peças no HTML) roda `--f-mono`,
   JetBrains Mono, contradizendo a doutrina escrita no Nível 1, em
   `styles.css:69-88`: «--f-mono é uma fonte de EDITOR… Rótulo agora tem token
   com o nome do trabalho que faz, e a fonte é a mesma da casa. O que dava a
   leitura de etiqueta nunca foi a monoespaçação — era o corpo pequeno, a caixa
   alta e o espacejamento aberto». Os três continuam onde estavam: 10,5px,
   caixa-alta, 0,14em. A troca ainda ganha legibilidade de graça — a Inter tem
   altura-x maior que a JetBrains Mono no mesmo corpo, e 10,5px é o piso da
   página. Cor, tamanho e contraste não são tocados.

   MEDIDO: a cápsula mais larga da página cai de ~170px para 158,3px. Isso
   DEVOLVE folga onde a folha mais precisava dela — a conta de `.fc-esfera`
   (page-home.css:12838) é «2 × 170px da pílula mais larga + a esfera + dois
   vãos», e o § 9 aperta aquela grade ao levar o vão de 23,04 para 32. Com a
   Inter as três trilhas medem 191,2 / 230,4 / 191,2 e a pílula ocupa 158,3:
   33px de folga por trilha. Se esta etapa for pulada e a do § 9 não, a folga cai
   para ~21px — ainda passa, e é a razão de as duas serem conferidas juntas. */
.bd-pilula {
  font-family: var(--f-rotulo);
  line-height: var(--r-rotulo);
}
.orb-painel .bd-pilula { line-height: var(--r-rotulo-env); }


/* ════════════════════════════════════════════════════════════════════════════
   § 8 · O `#a-casa` SOBE — ETAPA 6. A única mudança do lote que o dono nota de
   longe, e a única que pede uma linha de HTML.

   Nenhuma regra da cascata declara `font-size` para este `<h2>`. Os 24px são o
   `h2 { font-size: 1.5em }` do NAVEGADOR; o peso 600, a entrelinha 1,06 e os
   −0,024em vêm de `styles.css:174`. É o título da SEGUNDA banda da página
   desenhado no corpo de um subtítulo de cartão. O § 1 já o levou a 48,96 — o que
   falta é a caixa, porque a caixa de hoje foi escrita para 24px.

   A CONTA, medida a 1440 com o texto real:
       linha 1 «Seja na linha de frente ou nos bastidores,»
              a 24,00px ......  454,9px       a 48,96px ......  906,8px  (1,99×)
       `.home-cabeca > div { max-width: 46ch }` .................  464,3px
       conteúdo útil do `.home-wrap` (1440 − 2×72 de goteira) ...  1.280,7px

   Mantido o 46ch, o título sobe para QUATRO linhas e 213px de altura (era 53), e
   o `<br>` do HTML deixa de cair no fim de uma linha e passa a cair no meio da
   frase. Quer dizer: subir sem soltar a caixa quebra o layout em toda largura.

   ── POR QUE O TETO VAI PARA O `<h2>` E EM `ch` ──────────────────────────────
   Em `.home-cabeca > div` o `ch` resolve contra os 16px do `body` — 46ch = 464px
   — e não acompanha o título. No próprio `<h2>` ele resolve contra 48,96px, onde
   1ch = 30,9px, e acompanha o `clamp` da tipografia sozinho em toda largura.
   24ch = 758,5px MEDIDOS no navegador, e o título fecha em DUAS linhas e 111px
   de altura — dentro da faixa dos outros dez (107 a 162px de altura, 275 a 677px
   de largura). Um teto de 32ch (1.011px) também caberia, mas entregaria um
   título de 907px, o mais largo da página e mais largo que o próprio lead dele:
   seria trocar um outlier de corpo por um outlier de largura.

   ── E O MESMO PAR CONSERTA O `#pontas` DE GRAÇA ─────────────────────────────
   `.home-cabeca` veste as duas bandas. Com o 46ch de pé, o título de `#pontas`
   fica em 3,12 linhas e 200,9px dentro de uma coluna de 464px, enquanto
   `#consultoria` faz 2 linhas em 678 — a coluna mais estreita da página
   segurando um dos títulos mais longos. Com a caixa solta e o teto de 24ch, as
   duas bandas passam a compor pela mesma medida: medido, `#pontas` fecha em
   758,5px e 112,3px de altura, 2,12 linhas. Por isso a regra é de CLASSE e não
   de `#a-casa`: um seletor de ID resolveria uma banda e deixaria a outra, e
   obrigaria quem mexer nesta cabeça depois a usar ID também.

   CONFERIDO EM CINCO LARGURAS, com o `<br>` fora e sem uma media query sequer —
   a caixa em `ch` acompanha o `clamp` do corpo sozinha, e em nenhuma delas a
   página ganha rolagem horizontal:

       janela   #a-casa                #pontas
       1440     758w · 111h · 2,1 l    758w · 112h · 2,12 l
       1280     674w ·  98h · 2,1 l    674w ·  99h · 2,1 l
       1024     539w ·  79h · 2,1 l    539w ·  79h · 2,1 l
        430     387w ·  97h · 3,1 l    387w ·  66h · 2,1 l
        360     320w ·  96h · 3,1 l    320w ·  65h · 2,1 l

   ── O `<br>` SAI DO HTML, E É A ÚNICA EDIÇÃO DE MARCAÇÃO DO LOTE ────────────
   Ele foi desenhado para 24px. A 48,96 numa caixa de 758,5 ele força uma quebra
   que a caixa já dá sozinha, e num ponto pior. É o mesmo argumento que a casa já
   escreveu duas vezes neste arquivo: em `.sv-ciclo-titulo .serif`
   (page-home.css:11035) — «um `<br>` é uma quebra desenhada numa tela só, que em
   qualquer outra cai no meio errado da frase» — e em `.cons-texto`
   (index.html:2242), onde a quebra foi deixada solta de propósito. Tirando-o,
   nenhuma media query passa a depender de uma tag do HTML para não quebrar.

   CUSTO, medido: o título do `#a-casa` vai de 53,5px para 111px de altura. A
   `.home-cabeca` cresce 57,5px e o mosaico desce o mesmo tanto. Nada reflui:
   `.mosaico-palco` é grade com margem própria. */
.home-cabeca > div { max-width: none; }
.home-cabeca h2    { max-inline-size: 24ch; }


/* ════════════════════════════════════════════════════════════════════════════
   § 9 · A RÉGUA HORIZONTAL — ETAPA 7. Um vão de banda, um vão de fileira.

   ── O VÃO DE BANDA VIRA A GOTEIRA ───────────────────────────────────────────
   Medido depois da troca, em larguras de coluna a 1440:

       .pl-cena          559,30 / 656,57  →  555,98 / 652,69
       .sv-heroi-grade   638,53 / 570,14  →  inalterada (já estava em 72)
       .cons-wrap        676,84 / 531,82  →  inalterada (já estava em 72)
       .bde-grade        683,03 / 533,64  →  678,54 / 530,13
       .fc-grade         541,95 / 689,76  →  531,81 / 676,85

   Nenhuma perde mais de 13px de coluna, e as duas que já estavam certas não se
   mexem. O que muda não é a largura: é a CONCORDÂNCIA entre as seis.

   `.ps-cena` NÃO entra na lista, e é conferido: `.ps-texto`, `.ps-cena`,
   `.ps-cartao-txt`, `.ps-itens`, `.plantel-ideias` e `.pm-grade-nota` têm ZERO
   ocorrências em `index.html`. O bloco `.ps-*` (page-home.css:9838-10253) é
   órfão de uma seção que saiu. Não apago nada aqui — é limpeza para uma passada
   própria, com git como rede —, mas também não vou vesti-lo. */
.pl-cena,
.sv-heroi-grade,
.cons-wrap,
.bde-grade,
.fc-grade { gap: var(--e-vao-banda); }

/* `#pontas` precisa do id na frente, e não é preciosismo: `.maquete-cena` está
   declarada em `maquete.css`, que o `index.html` carrega DEPOIS de
   `page-home.css`. Um seletor de classe aqui perderia por ordem. `#pontas
   .maquete-cena` (1,1,0) ganha de `.maquete-cena` (0,1,0) em qualquer ordem, e
   evita ter de abrir a folha da maquete para trocar um vão.
   Medido: palco 717,31 → 694,33 · painel 531,35 → 514,33. */
#pontas .maquete-cena { gap: var(--e-vao-banda); }

/* ── A BANDA DE TRÊS COLUNAS É EXCEÇÃO, E A EXCEÇÃO TEM CONTA ────────────────
   Em `.orbital` o vão entra DUAS vezes: 72 ali custaria 144px de conteúdo, e
   custaria da coluna que já é a mais apertada da página. Medido hoje: 384
   (texto) / 453,14 (palco) / 368,66 (cartas) — e o lead entrega 37,4 caracteres,
   o único abaixo do piso de 45 em toda a página.

   Então a lei do vão de banda vale para DUAS colunas; de três em diante vale a
   de fileira, e a folga que sobra vai para o texto pela fração. Medido depois da
   troca: 437,13 / 429,83 / 349,70, contra 384 / 453,14 / 368,66 de hoje.

   E O LEAD CONTINUA CURTO: medido na tela, ele sai de 37,4 para 42,5 caracteres
   — 2,5 abaixo do piso de 45. Fica escrito em vez de escondido. Chegar aos 45
   exigiria 1,32fr, o que tira mais 38px do palco e 31 das cartas, e o conserto
   verdadeiro é tirar o texto da grade de três, que é composição e não régua. A
   coluna melhora 5,1 caracteres; não fica perfeita. */

/* ── O VÃO DE FILEIRA — sete valores viram um ────────────────────────────────
   Medido depois, em larguras de coluna:

       .orb-placas        24     → 32   3 × 410,89 → 3 × 405,56
       .pl-papeis-lista   43,2   → 32   3 × 398,09 → 3 × 405,56
       .cons-cartas       23,04  → 32   2 × 326,91 → 2 × 322,42
       .sv-ciclo-grade    25,92  → 32   309,66/297,75 → 304,96/293,24
       .fc-esfera         23,04  → 32   206,65/230,40/206,66 → 191,2/230,4/191,2

   `.sv-ciclo-grade` era a folga mais apertada desta proposta enquanto o título
   dela era Instrument Serif a 34,4px: o comentário de page-home.css:11000 fixa
   em 300,7px o mínimo para «Da recepção ao protocolo.» fechar em duas linhas
   depois que a serifa carrega, e 32 de vão deixam 304,96. Com o § 4 levando
   aquele título a Inter 27,2 a conta deixa de apertar — é a razão de as duas
   etapas conversarem, e de o § 4 vir antes deste. */
.pl-papeis-lista,
.cons-cartas,
.sv-ciclo-grade,
.fc-esfera { gap: var(--e-vao-fileira); }

/* `.bde-voz` entra dentro da MESMA media query em que a folha a declara
   (page-home.css:12319): abaixo de 640 a banda é uma coluna só e o vão vale 24,
   que é vão entre título e retrato empilhados, não entre irmãs de fileira. Uma
   regra solta no fim do arquivo venceria a media query nas duas pontas e levaria
   o celular junto sem que ninguém tivesse medido o celular. */
@media (min-width: 640px) {
  .bde-voz { gap: var(--e-vao-fileira); }
}

/* `.bde-selos` MANTÉM a linha maior que a coluna, e o argumento original
   continua de pé (page-home.css:12530): numa grade 2×2 de blocos que começam com
   um disco, o vão de coluna separa duas coisas de larguras diferentes e o de
   linha separa duas de alturas iguais — com o mesmo número, a fileira de baixo
   parece colada na de cima. O que muda é só o par cair na régua: 48 contra 32 dá
   razão 1,5, contra o 1,54 de hoje (57,6 / 37,44). O gesto é o mesmo; o número
   passa a ser de token. */
.bde-selos { gap: var(--e-7) var(--e-vao-fileira); }

/* ── A BORDA DIREITA DA BANDA ESPELHADA ──────────────────────────────────────
   Três bandas põem o texto na coluna da DIREITA, e nelas a borda que o leitor
   confere não é a esquerda — é a direita, e ela tem de cair na mesma vertical da
   goteira: 1352,7 a 1440 (1425 de área útil menos 72).

       #pontas    1352,7   ✓
       #savyme    1352,7   ✓
       #a-virada  1338,3   ✗   — 14,7 para dentro

   Os 14,7 não são arredondamento: `.virada-texto` usa `clamp(--e-6, 6vw,
   --e-10)` de padding e 6vw a 1440 dá 86,4 contra os 72 da goteira; 86,4 − 72 =
   14,4, mais 0,3 de sub-pixel. É a única das três que não fecha, e é por isso
   que a seção parece «quase certa»: a diferença é pequena demais para se nomear
   e grande demais para não se ver. A troca alinha a borda E devolve coluna ao
   texto — medido, o lead vai de 489,8px (47,8 caracteres) para 518,6 (50,4). O
   padding vertical não se mexe: continua `--e-secao`, o respiro das outras dez. */
.virada-texto { padding-inline: var(--e-goteira); }

/* ── O TETO DA MEDIDA ────────────────────────────────────────────────────────
   `:where()` NÃO SOMA ESPECIFICIDADE, e é essa a peça inteira desta regra. O
   seletor sai valendo (0,1,0) — o mesmo de `.lead` em `styles.css:192`, que é
   Nível 1 e não se toca — e ganha dele por ORDEM, porque `page-home.css` carrega
   depois. Ao mesmo tempo PERDE para todo teto deliberadamente mais estreito
   escrito antes, e é isso que se quer: um teto é um limite superior, não um
   valor.

   Conferido na tela:
       .home-hero .lead   (0,2,0)         mantém 44ch = 577,4px = 56,1 caracteres,
                                          a medida curta que um lead sobre
                                          fotografia pede
       .quem-fala > div   min(46ch, 50%)  mantém 464,3 — o teto ali é a metade da
                                          seção, para o texto não atravessar os
                                          rostos
       .mosaico-lead      62ch            desce de 813,6 (78,6 car.) para 682,3
                                          (66,3). Era o único teto da página
                                          acima do global, e 62ch em Inter são 79
                                          caracteres. */
:where(.home-sec, .quem-fala-sec) .lead { max-width: var(--e-medida-lead); }
.mosaico-lead { max-width: var(--e-medida-lead); }

/* O respiro do desfecho passa a beber do token do § 0. Ver a conta lá. */
#fecho { padding-block: var(--e-secao-fim); }

/* ── O QUE NÃO ESTÁ AQUI, E POR QUÊ ──────────────────────────────────────────
   `#menos-ruido` abre o `<h2>` em x = 449,8 — 378px adiante da vertical em que
   os outros dez títulos nascem. Não é vão: é ORDEM DE COLUNAS. `.bde-voz`
   (page-home.css:12345) põe o retrato na primeira coluna e o título na segunda,
   então o que nasce na goteira é a fotografia.

   Há duas saídas, e as duas são de composição:
     a) o retrato troca de lado — título na goteira, retrato encostando na borda
        direita. Desfaz o croqui.
     b) o título sai de dentro de `.bde-voz` e vira cabeçalho da banda inteira,
        como `.home-cabeca` já faz em `#a-casa` e em `#pontas`. Preserva o croqui.

   Nenhuma das duas se escreve como ajuste de régua, e por isso nenhuma está
   escrita aqui. É a única decisão deste lote que não é minha para tomar
   sozinho. */


/* ════════════════════════════════════════════════════════════════════════════
   § 10 · ISOLÁVEL — ETAPA 8. A dor do orbital muda de CORPO, e é a única
   declaração do lote que faz isso.

   Medido no navegador, os sete painéis: a caixa da dor mede 303px hoje e 284
   depois do § 9 (a fração de 1,2fr do `.orbital` desloca 19px para a coluna do
   texto), o que dá 255 e 236 de tinta descontados os 48 de preenchimento. A
   20,8px isso são 24,8 caracteres por linha — pouco mais da METADE do piso da
   faixa confortável de leitura, que começa em 45 — e os sete saem em 4,2 a 5,2
   LINHAS, não nas três que a conta de mesa dizia. A folha já tinha reconhecido o
   sintoma e receitado `text-wrap: pretty` (page-home.css:7644) porque três das
   sete frases terminavam em palavra órfã. `pretty` trata a órfã; não trata a
   coluna estreita demais.

   A 16px (`--t-md`) a mesma caixa rende 32,2 caracteres por linha e as sete
   caixas caem de 147/119px para 137/112/87 — de 10 a 32px a menos por painel. A
   dor também para de disputar corpo com o `.orb-painel-nome` de 27,2px logo
   acima dela. Com a medida corrigida ela vira leitura corrida comum e o ritmo
   passa de `--r-cartao` (§ 5) para `--r-texto`.

   FICA POR ÚLTIMO E NUMA DECLARAÇÃO SÓ DE PROPÓSITO: é a única mudança de corpo
   fora do papel «título» em todo o lote, atravessa sete painéis, e a caixa da dor
   pode encolher em altura — o `space-between` do corpo devolve a diferença como
   vão. Se ela não passar na tela, sai daqui sem tocar em mais nada, e o § 5
   continua de pé sozinho com `--r-cartao` no corpo de hoje. */
.orb-dor {
  font-size: var(--t-md);
  line-height: var(--r-texto);
}


/* ════════════════════════════════════════════════════════════════════════════
   § 12 · O QUE FICA MEDIDO E NÃO CONSERTADO — para a próxima mão não achar que
   passou despercebido.

   Estes três números foram lidos no navegador com o lote inteiro aplicado, e
   NENHUM deles é problema de régua. Corrigi-los por tipografia seria reabrir o
   que este lote acabou de fechar.

   1 · `#a-virada` continua em 5,1 LINHAS e 269,6px de altura — 2,5× a média dos
       outros dez cabeçalhos (107 a 162px). O corpo está certo, o ritmo está
       certo, o `max-width: 20ch` está certo. A causa é a frase: 90 caracteres
       num título de display. Ou a frase encurta, ou a medida abre — e mesmo a
       26ch o texto continua fechando em ~490px, porque quem manda são as
       palavras. É decisão de TEXTO, e é o maior desvio de altura que sobra na
       página depois deste lote.

   2 · `#menos-ruido` abre o `<h2>` em x = 449,8 enquanto os outros dez nascem em
       72 ou fecham na goteira espelhada (1352,7). É ORDEM DE COLUNAS, não vão:
       `.bde-voz` põe o retrato na primeira coluna. As duas saídas estão escritas
       no § 9 e as duas mexem no croqui.

   3 · O lead de `#solucoes` fica em 42,5 caracteres, 2,5 abaixo do piso de 45.
       Melhorou 5,1; não fechou. Conta no § 9.

   E fica de pé, também medido e também de propósito: dois valores de intervalo
   de AÇÕES (48 e 32), os dois `style="margin-top:…"` inline do HTML, o
   `text-wrap` declarado em quatro títulos de onze, a cor de `.bde-apoio` em
   `--d-ink-3`, e o bloco `.ps-*` órfão de page-home.css:9838-10253. Cada um é
   uma passada própria, com o motivo escrito onde ele aparece. */


/* ════════════════════════════════════════════════════════════════════════════
   § 12 · A SOBRANCELHA VIRA O PADRÃO ÚNICO DE RÓTULO DE SEÇÃO

   Duas peças da página faziam o trabalho de sobrancelha vestidas de cápsula:
   o `<h3>` de `.pl-papeis` («Quem senta na mesma escala») e o `<span>` de
   `.sv-ciclo-cab` («O ciclo da consulta»). São ABERTURA DE ASSUNTO — o mesmo
   papel de «Consultoria», de «O que a SOMA faz» e das outras nove —, e a casa
   tem um desenho só para esse papel.

   A CÁPSULA NÃO SAI DA PÁGINA, e a divisão é de função, não de gosto. Ficam as
   catorze que são ETIQUETA DENTRO DE UM OBJETO: as sete dos painéis do orbital,
   o distintivo «Ao vivo» da tela da SAVYME e as seis frentes que flanqueiam a
   esfera do fecho. Rótulo de seção abre; etiqueta classifica. Duas funções,
   dois desenhos, nenhum dos dois em dois lugares.

   Entrou junto a décima primeira sobrancelha: `#menos-ruido` era a única banda
   sem rótulo, entre duas que têm.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── A ENTRELINHA DEIXA DE SER HERANÇA ───────────────────────────────────────
   As nove sobrancelhas antigas são `<span>` e mediam 16px de caixa por um
   acidente feliz: 10,5px de corpo herdando o 1,55 do documento. A de
   `.pl-papeis` é `<h3>`, e `h1..h4` de styles.css:174 declara `line-height:
   1.06` — a mesma peça chegaria à tela com 11px, quebrando o alinhamento que o
   recuo de `.sv-ciclo-cab` calcula em cima da altura dela.

   Declarar o 1,55 não move um pixel das nove; move a décima para junto delas e
   apaga a dependência invisível. `--r-texto` é o token que já vale 1,55 — é
   dele que vinha a herança, e escrever o nome é dizer de onde o número veio. */
.home-sec .eyebrow,
.quem-fala-sec .eyebrow { line-height: var(--r-texto); }

/* ── O PONTO PULSA UMA VEZ POR SEÇÃO ─────────────────────────────────────────
   A regra é da fundação e está escrita no bloco 4 dela: «o que pulsa nesta
   página é o do `.eyebrow`, um por seção». `#plantel` passa a ter duas —
   «Solução própria · Plantel MED» no alto e o rótulo dos seis papéis mil pixels
   abaixo —, e as duas piscando na mesma seção são o ruído que aquela regra
   evita. A de baixo fica acesa e parada, que é exatamente o que a
   `.bd-pilula--ponto` já fazia no lugar dela.

   (0,2,0) contra os (0,1,1) de `.eyebrow::before`: vence por contagem de
   classe, sem `!important`. Sob `prefers-reduced-motion` nada muda — o
   interruptor geral de styles.css:1981 já para as duas.) */
.eyebrow--quieto::before { animation: none; }

/* ── SOBRANCELHA → TÍTULO: OS 16 DA CASA, EM MAIS DUAS BANDAS ────────────────
   O § 2 fixou o par em `--e-4` e escreveu o número onde ele mudava. As duas
   bandas deste lote entram na mesma conta:

     `.bde-titulo`      tinha `margin: 0` porque não havia sobrancelha acima
                        dele. Agora há. O pé continua em zero — quem separa o
                        título da linha de apoio são os 24 de `.bde-apoio`.
     `.sv-ciclo-titulo` tinha 24, e 24 era a medida certa CONTRA A CÁPSULA: 32px
                        de altura pedem mais ar embaixo. Contra uma sobrancelha
                        de 16 o par volta a ser o par, e o par da casa é 16. */
.bde-titulo,
.sv-ciclo-titulo { margin-block-start: var(--e-4); }


/* ════════════════════════════════════════════════════════════════════════════
   § 13 · A ESFERA DO FECHO GANHA CORPO — a casca de energia gira

   O dono circulou a esfera e pediu movimento premium. O diagnóstico, medido no
   próprio ativo: dos quatro elementos da peça, três já se moviam — os anéis se
   desenham por rolagem, os dois grupos giram por tempo, a conta de luz acende.
   O QUARTO, que é o que o olho procura primeiro, é um decalque parado:
   `orbital-nucleo.webp` nunca mexeu um pixel.

   ── POR QUE NÃO BASTA GIRAR A IMAGEM ────────────────────────────────────────
   Girar o `<img>` gira a MARCA junto, e marca que roda deixa de ser marca. Mas
   o arquivo não é uma coisa só: o perfil radial dele, medido de 3 em 3 por
   cento de raio, mostra três zonas nítidas.

       r  0–27%   a marca branca      desvio angular de luminância 85–108
       r 28–33%   o corpo escuro polido               desvio 12–21
       r 34–86%   a casca de energia  arcos e faíscas  desvio 25–89
       r 87%+     nada (alfa zero)

   Quer dizer: entre a marca e a casca existe uma FAIXA MORTA, e ela é o lugar
   mais quieto do arquivo inteiro — o desvio cai a 12,2 em r=30–31%, o mínimo
   absoluto. É ali que a emenda pode passar sem ninguém ver.

   Então a imagem entra DUAS VEZES, com máscaras complementares no mesmo raio:
   o `<picture>` que já existia fica com o miolo e não se mexe; um `::after`
   fica com a casca e gira. Marca de pé, energia em movimento.

   ── DUAS CÓPIAS, UM ARQUIVO — E POR QUE UM SEGUNDO `<picture>` E NÃO CSS ────
   A primeira mão desenhou a casca num `::after` com `image-set()` e `type()`,
   que é o truque que o retrato do cirurgião usou para parar de baixar um
   segundo arquivo. Aqui ele falharia, e a razão é a DENSIDADE.

   O `<picture>` escolhe por largura: `srcset` de 340w e 520w contra
   `sizes="213px"` dá 1,6x e 2,44x. Em tela comum ele pega o de 340; em tela
   de retina, o de 520. Um `image-set()` com um arquivo fixo acertaria numa
   densidade e erraria na outra — e errar aqui não é perder nitidez, é BAIXAR
   OS DOIS ARQUIVOS para desenhar a mesma esfera.

   Um segundo `<picture>` com o mesmo `srcset` e o mesmo `sizes` não estima
   nada: ele passa pelo mesmo seletor do navegador, chega à mesma resposta e
   cai na mesma entrada de cache, em toda densidade. Quatro linhas de marcação
   compram uma garantia que o CSS não tem como dar.

   ── OS 47s ──────────────────────────────────────────────────────────────────
   74s e 103s já estão em uso pelos dois grupos de anéis, e a folha explica por
   que eles não têm razão simples entre si. 47 é primo e não divide nenhum dos
   dois: os três períodos só reencontram a mesma pose depois de 47 × 74 × 103 /
   mdc — muito além de qualquer visita.

   E 47 é o MAIS RÁPIDO dos três de propósito. A casca vive entre r=29px e
   r=75px de tela; os anéis, em r=106px. Órbita interna mais rápida que a
   externa é o que Kepler faz — o mesmo argumento que a folha já usa para
   justificar o quarto anel «de raio menor, órbita mais baixa».
   ════════════════════════════════════════════════════════════════════════════ */

/* A faixa de corte: opaco até 28%, transparente a partir de 33%, com a rampa
   caindo inteira dentro da faixa morta. `circle` é obrigatório — sem a palavra,
   `closest-side` desenha uma ELIPSE quando a caixa não é quadrada, e foi assim
   que o aro de luz da consultoria virou uma mancha nos cantos. Aqui a caixa é
   quadrada, mas escrever `circle` é o que garante que ela possa deixar de ser.

   Além de `closest-side` o degradê continua com a ÚLTIMA parada: nos quatro
   cantos da caixa a máscara do miolo é `transparent` e a da casca é `#000`. Nos
   cantos o arquivo já tem alfa zero (a partir de r=87%), então nenhuma das duas
   revela pixel nenhum — mas é a razão de a casca poder usar `#000` no fim sem
   pintar um quadrado. */
/* AS DUAS FICAM NA MESMA CÉLULA. `.fc-orbe` é `display: grid; place-items:
   center`, e dois `<picture>` sem instrução iriam para DUAS FILEIRAS — o palco
   dobraria de altura e a esfera sairia do eixo. `grid-area: 1 / 1` empilha as
   duas na mesma célula, e o `place-items: center` que já estava lá centra as
   duas de uma vez. Nenhuma das duas é `position: absolute`: são itens de grade
   de verdade, e por isso continuam ditando o tamanho do palco. */
.fc-orbe picture { grid-area: 1 / 1; }

/* UMA MÁSCARA SÓ, E ISSO NÃO É ECONOMIA — É A ÚNICA FORMA DE NÃO ABRIR EMENDA.
   A primeira mão deu uma máscara a cada camada, complementares no mesmo raio:
   o miolo caindo de 1 a 0 e a casca subindo de 0 a 1. Parece certo e não é.
   Alfa empilhado não SOMA, compõe:

       resultado = a_cima + a_baixo · (1 − a_cima)

   No cruzamento as duas valem 0,5, e o resultado é 0,5 + 0,5 · 0,5 = 0,75. Um
   anel 25% mais escuro no raio exato da emenda, em toda a volta. Fechar a rampa
   até virar corte seco troca o anel por serrilha.

   A saída é a camada de baixo NÃO TER MÁSCARA. A casca entra inteira; o miolo
   entra por cima opaco até 28% e some até 33%. Onde o miolo é opaco ele tapa a
   marca girada por completo; onde ele desmancha, o que aparece por baixo é o
   corpo escuro polido da cópia que gira — a faixa de desvio 12, a mais parecida
   consigo mesma em qualquer ângulo do arquivo inteiro. A rampa pode ser tão
   macia quanto se queira, e não há um raio em que a soma não feche em 1. */
.fc-miolo {
  --fc-corte: radial-gradient(circle closest-side,
    #000 0 28%, rgba(0,0,0,.72) 30%, rgba(0,0,0,.28) 31.5%, transparent 33%);
  -webkit-mask-image: var(--fc-corte);
          mask-image: var(--fc-corte);
}

.fc-casca { animation: fc-casca-gira 47s linear infinite; }
@keyframes fc-casca-gira {
  to { transform: rotate(360deg); }
}

/* ── SEM MOVIMENTO, E POR QUE ESTE BLOCO MORA AQUI E NÃO LÁ EM CIMA ──────────
   O `@media (prefers-reduced-motion: reduce)` do fecho está em page-home.css,
   § 9 — quer dizer, ANTES deste § 13. Regra escrita depois dele volta a rodar
   com o movimento desligado, que é exatamente o que o cabeçalho daquele bloco
   avisa. Então o desligamento da casca vem junto com a casca.

   Parar é `animation: none` e mais nada: sem a animação o `transform` volta ao
   padrão, que é ângulo zero, que é a imagem exatamente como o arquivo veio. A
   cena parada continua sendo a esfera inteira, com marca e casca no encaixe
   original — não sobra buraco onde havia giro. É a mesma regra da casa: o
   estado final É o padrão. */
@media (prefers-reduced-motion: reduce) {
  .fc-casca { animation: none; }
}

/* ── CORES FORÇADAS ─────────────────────────────────────────────────────────
   O § 7 esconde `.fc-arcos` e a poça porque anéis forçados viram linhas opacas
   cruzando a marca. A casca NÃO entra nessa lista, e a diferença é que ela não
   é desenho vetorial: é a mesma fotografia que o miolo, e o modo forçado não
   reescreve imagem. Escondê-la deixaria a marca sem o halo com que ela foi
   fotografada — um recorte flutuando, que é pior que a peça inteira.

   Fica registrado que ela continua girando em alto contraste. Quem liga alto
   contraste E movimento reduzido — o par mais comum — cai na regra acima e vê
   a esfera parada. */


/* ════════════════════════════════════════════════════════════════════════════
   § 14 · A ESFERA LÊ O CICLO — três gestos, e nenhum relógio novo

   O § 13 tirou o núcleo da imobilidade. Ficava o resto do pedido: a esfera e as
   seis cápsulas dividem a mesma linha e nunca se olham, e a peça não DIZ nada.

   A TESE. A esfera passa a dizer que alguém leu o ciclo inteiro — uma vez, do
   começo ao fim — e que as seis etapas responderam na ordem.

   E A LEITURA NÃO É UM LAÇO. Ela acontece por ROLAGEM, na travessia da banda:
   quem chega dirige a agulha com a própria mão. É o que a linha ao lado promete
   — «a equipe acompanha a virada» —, e acompanhar não é um relógio que roda com
   ou sem plateia. É também o que impede a peça de competir com o botão «Falar
   com a SOMA», que é o objeto mais importante desta banda.

   O ORÇAMENTO, e é o que segura a sobriedade: EM REGIME — o visitante parado,
   lendo os dois botões — mexem-se as MESMAS QUATRO COISAS DE HOJE. `.fc-gira`
   (74s), `.fc-gira--contra` (103s), `.fc-casca` (47s) e o ponto da `.eyebrow`,
   que é o um-pulso-por-seção da fundação. Nem uma a mais. Tudo o que este bloco
   acrescenta ou é ESTÁTICO, ou acontece UMA VEZ na travessia e some.

   A DRAMATURGIA, no relógio `--fc-cena` que a seção já nomeia em 13165:

       6% → 39%   os quatro anéis se desenham        (13176, intacto)
      26% → 34%   a conta acende                     (13196, intacto)
      36% → 46%   ela EMITE, com o pico em 39%
      39% → 52%   a agulha dá a volta
      44%         a luz do fio chega                 (13157, intacto)
      50% → 58%   o núcleo REGISTRA
      40% → 58% (+ i × 4,5%, noutro relógio)  as seis ETAPAS respondem

   39% não é escolha: é onde o último anel fecha, já escrito em 13175. A agulha
   parte exatamente quando a escala que ela vai percorrer termina de existir — e
   é isso que garante que um quadro congelado no meio da travessia mostre quatro
   anéis COMPLETOS com um segmento brilhante por cima, e nunca um anel pela
   metade. Numa banda cujos anéis literalmente se desenham por rolagem, arco
   parcial lê como «ainda carregando».
   ════════════════════════════════════════════════════════════════════════════ */


/* ── 14.1 · O LIMBO — o corpo passa a ter uma fonte de luz ───────────────────
   A CAIXA É O CORPO ÓPTICO DO ATIVO, e não um número escolhido. A imagem mede
   76% do palco (13050) e o halo próprio dela morre a 86,5% do raio (medido no
   alfa, 13043). 0,76 × 0,865 = 65,74% de diâmetro; `inset` = (100 − 65,74)/2.
   O fio de luz cai na borda do corpo por CONSTRUÇÃO, e é por isso que ele
   continua caindo lá nos três arranjos, sem uma media query.

   `circle closest-side` numa caixa quadrada e centrada faz o raio do degradê
   valer METADE DA CAIXA — quer dizer, 100% da parada É a borda óptica. As
   paradas vão a 88–100% do RAIO: confundir fração da caixa com fração do raio
   desenharia um aro de teal atravessando o meio da esfera. `circle` é
   obrigatório pela razão do § 13 — sem a palavra, `closest-side` vira ELIPSE no
   dia em que a caixa deixar de ser quadrada.

   A MÁSCARA CÔNICA É A DIREÇÃO DA LUZ. 0deg é meio-dia e o cone corre no
   sentido horário: o pico em 315° é o alto à esquerda, a posição padrão de uma
   chave em retrato. O arco varre 250°→360°, e nos dois extremos o valor é
   `transparent` — 360° e 0° concordam, então não há emenda na volta.

   ESTÁTICA, E É O PONTO — e o argumento só existe depois do § 13. Com a casca
   girando a 47s, uma fonte de luz PARADA é a única coisa opticamente correta:
   luz não acompanha o corpo que ilumina. Ela devolve ao palco a referência fixa
   que a casca girando tirou. O § 13 pôs a energia em movimento; esta camada diz
   de onde vem a luz que a energia reflete.

   E como não anima, é a única camada nova que SOBREVIVE INTEIRA ao movimento
   desligado: a cena parada deixa de ser um círculo e passa a ser um corpo.

   O TEAL É DECISÃO. A luz do render é mais azul que o teal da casa, e «ponto de
   luz que não é da cor da fonte lê como outro objeto» é um argumento correto.
   Fica `--c-teal-2` mesmo assim: os quatro anéis e a conta já são teal-2, e um
   fio de outro matiz seria a única cor estrangeira da peça. */
.fc-orbe::after {
  background-image: radial-gradient(circle closest-side at 50% 50%,
    transparent 0 88%,
    color-mix(in srgb, var(--c-teal-2) 18%, transparent) 96%,
    color-mix(in srgb, var(--c-teal-2) 26%, transparent) 99%,
    transparent 100%);
  content: "";
  inset: 17.13%;
  pointer-events: none;
  position: absolute;
  z-index: 3;
  --fc-chave: conic-gradient(from 0deg at 50% 50%,
    transparent 0deg 250deg, #000 315deg, transparent 360deg);
  -webkit-mask-image: var(--fc-chave);
          mask-image: var(--fc-chave);
}


/* ── 14.2 · A AGULHA — a leitura que atravessa a escala ─────────────────────
   Um `<g>` IRMÃO dos dois que já giram e ÚLTIMO filho do `<svg>`: a leitura
   passa POR CIMA dos quatro anéis e continua EMBAIXO do corpo (o `<svg>` é
   z-index 1 e as duas `<picture>` são 2). Não chega perto de nada: a agulha
   corre em r=138 do viewBox de 300, e o conteúdo visível do raster morre em 98,6.

   O AFUNILAMENTO SAI DE DOIS `stroke-dasharray` ESTÁTICOS, e não de gradiente
   nem de máscara. `pathLength="100"` normaliza o perímetro, então 10 são 36° de
   cauda e 2,6 são 9,4° de cabeça. `stroke-dashoffset: -7.4` põe a cabeça em
   [7,4 · 10] — a ponta DIANTEIRA da cauda: o caminho de um `<circle>` começa em
   (cx+r, cy) e corre no sentido horário, que é o mesmo sentido do `rotate`. Sem
   o deslocamento a cabeça viajaria de costas. Tracejado parado não custa quadro.

   NÃO É UM COMETA. Sem rastro que se dissolve e sem `mask-composite` — aquele é
   o vocabulário da banda irmã, e esta banda não o repete. É agulha de
   instrumento passando pela escala.

   O TRAÇO É MEDIDO NO SISTEMA DO DESENHO, sem `non-scaling-stroke`, pela regra
   de 13074: 1,6 num viewBox de 300 dá 0,98px no palco mínimo, o mesmo regime
   que `.fc-arco--a` já aceita (1,7 → 1,04px).

   NASCE INVISÍVEL, E É REQUISITO. `opacity: 0` na regra base é o repouso: quem
   chega sem `view()`, quem desliga o movimento e quem já atravessou a banda vê
   a cena de hoje, ao pixel. Marca de índice acesa em repouso seria lida como um
   anel que não terminou de se desenhar. */
.fc-varre {
  opacity: 0;
  transform-box: view-box;
  transform-origin: 50% 50%;
}
.fc-varre > circle {
  fill: none;
  stroke-linecap: round;
}
.fc-varre-cauda {
  stroke: color-mix(in srgb, var(--c-teal-2) 20%, transparent);
  stroke-dasharray: 10 90;
  stroke-width: 1.3;
}
.fc-varre-cabeca {
  stroke: color-mix(in srgb, var(--c-teal-2) 78%, transparent);
  stroke-dasharray: 2.6 97.4;
  stroke-dashoffset: -7.4;
  stroke-width: 1.6;
}


/* ── 14.3 · A CONTA EMITE ───────────────────────────────────────────────────
   VAI NO FILHO, NÃO NO GRUPO. `.fc-conta` já carrega `fc-conta-acende` no mesmo
   relógio (13193); uma segunda animação ali venceria por ordem e o portão de
   rolagem morreria. Escala no halo e opacidade no grupo multiplicam sem se ver.

   `transform-box: fill-box` põe a origem no centro do PRÓPRIO círculo, e não no
   canto do viewBox — nenhuma cópia de 283,9/116,6 em CSS. Fonte única.

   E continua SEM `drop-shadow`, pela razão escrita em 13106: filtro repinta a
   cada quadro e este grupo gira sem parar. O halo CRESCE, não borra. */
.fc-conta-halo {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}


/* ── 14.4 · O ECO DAS SEIS ETAPAS ───────────────────────────────────────────
   O ELO QUE NÃO EXISTE HOJE: a esfera e as seis cápsulas dividem a mesma linha
   e nunca se olham.

   E POR QUE ISTO NÃO CONTRADIZ 3397. Aquela regra tem duas cláusulas: «aceso e
   PARADO — o que pulsa nesta página é o do `.eyebrow`, UM POR SEÇÃO» e «seis
   pílulas piscando juntas não são ênfase, são ruído». O fecho JÁ TEM o seu
   pulso, no `<span class="eyebrow">Fale com a SOMA</span>`. Aqui a primitiva da
   fundação não é tocada: o `::before` das catorze cápsulas da página continua
   aceso e parado, para sempre. O que entra é uma SEGUNDA camada, que nasce
   invisível, floresce UMA vez enquanto a própria cápsula assenta, e morre
   invisível. Em regime — que é sobre o que aquela frase fala — nada nas seis se
   mexe. Não é um pulso: é uma confirmação de chegada.

   `--bd-i` É `inherits: false` (2903), E ISSO DERRUBA A ESCRITA INGÊNUA. Lida
   de dentro do `::after`, ela cairia no `initial-value: 0` SEM ERRO NENHUM, e
   as seis responderiam JUNTAS — o defeito exato que 3397 proíbe, e ele seria
   silencioso. A conta é feita no `<li>`, onde `--bd-i` existe, e guardada numa
   propriedade NÃO registrada, que herda para o pseudo-elemento como token já
   resolvido. Nenhuma numeração nova, nenhum `style` no HTML, um dono só para o
   índice. (Registrar `--fc-eco` tornaria a falha silenciosa em vez de
   impossível.)

   O ECO SENTA EXATAMENTE EM CIMA DO PONTO, e os dois deslocamentos são o
   `padding-inline` da própria cápsula — `var(--e-3)` —, não um número novo. O
   ponto é item de flex a 12px da borda interna, e `inset-*` mede da caixa de
   preenchimento, que começa no mesmo lugar. `align-items: center` (3339) é o
   que faz `inset-block-start: 50%` com meio corpo de recuo cair no centro. */
.fc-rotulos .bd-pilula { position: relative; }
.fc-rotulos .bd-pilula--ponto { --fc-eco: calc(var(--bd-i) * 4.5%); }
.fc-rotulos .bd-pilula--ponto::after {
  background: var(--c-teal-2);
  border-radius: 50%;
  content: "";
  height: 5px;
  inset-block-start: 50%;
  margin-block-start: -2.5px;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  width: 5px;
}
.fc-rotulos--esq .bd-pilula--ponto::after { inset-inline-end: var(--e-3); }
.fc-rotulos--dir .bd-pilula--ponto::after { inset-inline-start: var(--e-3); }


/* ── 14.5 · OS QUATRO MOMENTOS, NO RELÓGIO QUE JÁ EXISTE ────────────────────
   Entra num `@supports` próprio e não dentro do de 13163, porque este bloco
   mora no fim do arquivo pela razão do § 13. Mesma condição, mesmo relógio.

   `linear` É OBRIGATÓRIO na agulha. Cadência constante é o que faz o olho ler
   MEDIDA; qualquer curva de aceleração devolve o gesto para a decoração. E como
   quem move é a rolagem, cadência constante quer dizer uma coisa a mais: a
   agulha responde à mão de quem chegou. É a leitura sendo feita pelo leitor.

   O ECO CORRE EM `--bd-cena`, E É ESTRUTURAL. As seis cápsulas são
   descendentes do `<ul>` que nomeia esse relógio (3527), então o eco lê o MESMO
   tempo que `bd-assenta`: a defasagem de 4,5% por etapa não é copiada, é a
   mesma de 3539. Não há duas contagens para sair de sincronia, e a ordem 1→6 é
   a de `--bd-i`, que a folha já corrige à mão em 13140-13142.

   E ELE NÃO É COMPARADO COM `--fc-cena`. São réguas diferentes — a seção tem
   ~730px e o `<ul>`, ~130px — e comparar `cover` de uma com `cover` da outra é
   aritmética de ficção. O que se afirma aqui é ORDEM E SOBREPOSIÇÃO: a leitura
   passa e as seis respondem no rastro dela. Não é trava de quadro. */
@supports (animation-timeline: view()) {

  .fc-conta-halo {
    animation: fc-conta-emite linear both;
    animation-timeline: --fc-cena;
    animation-range: cover 36% cover 46%;
  }
  /* O ALFA NÃO SOBE: o que abre é o RAIO. Luz nova exigiria medida de
     contraste; raio não. O pico em 30% da faixa cai em 39% — o quadro em que a
     agulha parte. */
  @keyframes fc-conta-emite {
    0%   { transform: scale(1);    }
    30%  { transform: scale(1.55); }
    100% { transform: scale(1);    }
  }

  .fc-varre {
    animation: fc-varre-passa linear both;
    animation-timeline: --fc-cena;
    animation-range: cover 39% cover 52%;
  }
  /* As duas rampas de opacidade escondem a partida e a chegada: o olho nunca vê
     a agulha «ligar». `both` preenche para trás com 0 e para a frente com 0 —
     antes e depois da travessia ela não existe, e não sobra camada pintada. */
  @keyframes fc-varre-passa {
    0%   { opacity: 0; transform: rotate(0deg);   }
    9%   { opacity: 1; }
    86%  { opacity: 1; }
    100% { opacity: 0; transform: rotate(360deg); }
  }

  /* `.fc-miolo` e NÃO `.fc-orbe picture`: aquele seletor é (0,1,1) e a
     abreviada `animation` apagaria em silêncio o `.fc-casca` (0,1,0) do § 13 —
     a resposta que já foi entregue ao mesmo pedido do mesmo dono. `.fc-miolo` é
     o único dos dois que não tem `transform` nenhum. Zero colisão.

     A COSTURA AGUENTA: a máscara do miolo cai entre 28% e 33% do raio, uma
     faixa morta de cinco pontos, e 1,6% de escala move a emenda meio ponto para
     dentro dela. O que aparece por baixo é o corpo escuro polido da cópia que
     gira — a região de desvio 12, a mais parecida consigo mesma em qualquer
     ângulo do arquivo. É o argumento do § 13 usado a favor.

     Recuo rápido (25% da faixa), volta lenta (75%): a assimetria é o que separa
     registro de balanço. 1,6% sobre 198px são 3,2px de diâmetro num contorno
     que é rampa de máscara macia — lê como respiração, e zoom em logotipo é
     defeito. */
  .fc-miolo {
    animation: fc-nucleo-registra linear both;
    animation-timeline: --fc-cena;
    animation-range: cover 50% cover 58%;
  }
  @keyframes fc-nucleo-registra {
    0%   { transform: scale(1);    }
    25%  { transform: scale(.984); }
    100% { transform: scale(1);    }
  }

  .fc-rotulos .bd-pilula--ponto::after {
    animation: fc-eco linear both;
    animation-timeline: --bd-cena;
    animation-range:
      cover calc(40% + var(--fc-eco))
      cover calc(58% + var(--fc-eco));
  }
  /* DISCO QUE FLORESCE E SE DISSIPA, não aro e não anel. Um aro de teal-2 numa
     cápsula seria indistinguível do `outline: 2px solid var(--c-teal-2)` que
     3379 mantém armado para o dia em que uma pílula virar link — e um indicador
     de foco andando sozinho pela lista é a pior leitura possível. O disco é
     concêntrico com o ponto de 5px, cresce a 9px no pico e se dissolve a 13px
     com alfa zero. Luz que se dispersa não retrai.

     O pico em 22% de uma faixa de 18 pontos cai em `cover 44% + i × 4,5%` — o
     quadro exato em que `bd-assenta` (3540) termina e a cápsula pousa. */
  @keyframes fc-eco {
    0%   { opacity: 0;   transform: scale(1);   }
    22%  { opacity: .85; transform: scale(1.8); }
    100% { opacity: 0;   transform: scale(2.6); }
  }
}


/* ── 14.6 · 1280px · O ECO TROCA DE LADO COM O PONTO ────────────────────────
   No arranjo empilhado, 13287 devolve `.fc-rotulos--esq .bd-pilula` a
   `flex-direction: row` e o ponto volta ao início da linha. O eco acompanha,
   pela mesma razão e com o mesmo número — nada aqui é medida nova. Mesma
   especificidade da regra base, e vence por vir depois. */
@media (max-width: 1280px) {
  .fc-rotulos--esq .bd-pilula--ponto::after {
    inset-inline-end: auto;
    inset-inline-start: var(--e-3);
  }
}


/* ── 14.7 · CORES FORÇADAS ──────────────────────────────────────────────────
   `.fc-varre` e `.fc-conta-halo` vivem DENTRO de `.fc-arcos`, que 13360 já
   manda esconder — e animação em subárvore não renderizada não roda. Nenhuma
   linha para elas.

   ENTRAM DUAS. O limbo é a mesma classe de coisa que a poça do § 7: atmosfera,
   sem uma informação que a palavra da cápsula já não dê, e forçado um degradê
   vira chapa de sistema por cima da marca. E o eco é a mesma decoração que o
   ponto irmão, que a fundação já esconde em 3689 pela mesma frase — a ordem das
   seis etapas está na leitura das duas listas, não na luz.

   `.fc-miolo` NÃO entra, pela mesma decisão do § 13: ela não é desenho
   vetorial, é a fotografia da marca, e o modo forçado não reescreve imagem. */
@media (forced-colors: active) {
  .fc-orbe::after,
  .fc-rotulos .bd-pilula--ponto::after { display: none; }
}


/* ── 14.8 · SEM MOVIMENTO — a cena parada é a cena INTEIRA ──────────────────
   Não há uma pose a restaurar, e isso é projeto: os quatro repousos já estão
   escritos nas regras base — `opacity: 0` na agulha, `opacity: 0` no eco, e
   transformação nenhuma no halo e no miolo. Desligar é literalmente não deixar
   a animação sobrescrever. (Os valores estão repetidos aqui pela mesma razão
   que 13418 os repete: documentar a pose no lugar em que ela é cobrada.)

   E O LIMBO FICA. Ele não anima e não pode animar — a direção da luz é a única
   coisa da cena que um observador espera encontrar parada. É por isso que quem
   desliga o movimento não vê uma cena apagada: vê a esfera com o contorno aceso
   do lado que olha para a fonte, os quatro anéis desenhados, a conta acesa e os
   seis pontos acesos e quietos. Dos três gestos, o único permanente é o único
   que sobrevive por completo.

   `.fc-casca` continua desligada pelo § 13; nada aqui a toca e nada a religa. */
@media (prefers-reduced-motion: reduce) {
  .fc-conta-halo { animation: none; transform: none; }
  .fc-varre      { animation: none; opacity: 0; }
  .fc-miolo      { animation: none; transform: none; }
  .fc-rotulos .bd-pilula--ponto::after { animation: none; opacity: 0; }
}


/* ════════════════════════════════════════════════════════════════════════════
   OS CANAIS DIRETOS — `contato.html`

   Estas classes existiam no HTML e NÃO existiam em folha nenhuma do produto:
   varredura em todos os `.css` não achou uma declaração de `.hub-grade` nem de
   `.hub-card`. O bloco descia como `<h3>` e `<p>` soltos, um embaixo do outro,
   sem moldura e sem ícone — era o que o dono apontou. Nasce aqui porque
   `page-home.css` é carregado por exatamente duas páginas, a landing e o
   contato, e este bloco só existe na segunda.

   O DISCO DO ÍCONE NÃO É REDECLARADO: o markup reusa `.bde-disco` e
   `.bde-icone`, que são a primitiva de ícone da casa e já vivem neste arquivo.
   ════════════════════════════════════════════════════════════════════════════ */

/* `auto-fit` com piso de 15rem e não quatro colunas fixas: a quarta cai sozinha
   para a linha de baixo abaixo de ~68rem, e não há media query para manter em
   sincronia com nada. */
.hub-grade {
  display: grid;
  gap: var(--e-5);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin-block-start: var(--e-7);
}

/* `align-content: start` mais `grid-template-rows: auto auto 1fr` põem o link no
   PÉ do card, na mesma altura nos quatro, mesmo com o card da Sede tendo uma
   linha extra. Sem isso o «Abrir conversa» flutuava logo abaixo do e-mail e a
   fiada perdia a linha de base. */
.hub-card {
  align-content: start;
  background: color-mix(in srgb, var(--c-blue) 9%, var(--d-campo));
  border: 1px solid color-mix(in srgb, var(--c-teal-2) 16%, transparent);
  border-radius: var(--e-4);
  color: inherit;
  display: grid;
  gap: var(--e-4);
  grid-template-rows: auto auto 1fr;
  justify-items: start;
  padding: var(--e-5);
  text-decoration: none;
  transition: border-color var(--m-rapido) var(--m-sai),
              background var(--m-rapido) var(--m-sai);
}

.hub-card-corpo { display: grid; gap: var(--e-2); }

.hub-card h3 {
  font-size: var(--t-md, 1.05rem);
  font-weight: 600;
  letter-spacing: -.012em;
  margin: 0;
}

/* O dado de contato é o que a pessoa vai copiar, então é ele que fica claro —
   o título acima só diz de que canal se trata. */
.hub-card-promessa {
  color: color-mix(in srgb, var(--d-ink) 88%, transparent);
  font-size: var(--t-sm);
  line-height: var(--r-nota);
  margin: 0;
}

/* O RÓTULO VIRA BLOCO, E É CONSERTO DE DEFEITO. No HTML antigo estava
   `<b>Atendimento</b>Segunda a sexta…` sem separador nenhum, e a tela mostrava
   «AtendimentoSegunda a sexta». Em bloco, e na régua de rótulo da casa, ele
   passa a ser o que sempre quis ser: a etiqueta de um par. */
.hub-card-nota {
  color: var(--d-ink-3);
  font-size: var(--t-xs);
  line-height: var(--r-nota);
  margin: 0;
}
.hub-card-nota b {
  color: var(--c-teal-2);
  display: block;
  font-family: var(--f-rotulo);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* A régua embaixo é `border-bottom` no próprio texto, então mede a palavra e não
   um número mágico — o mesmo mecanismo do `.gl-ir` da landing.
   `align-self: end` é o que o `1fr` da terceira linha existe para servir. */
.hub-link {
  align-self: end;
  border-bottom: 1px solid color-mix(in srgb, var(--c-teal-2) 42%, transparent);
  color: var(--c-teal-2);
  font-size: var(--t-sm);
  font-weight: 600;
  padding-block-end: 2px;
  transition: border-color var(--m-rapido) var(--m-sai);
}

/* O HOVER NÃO DESLOCA NADA, e é decisão registrada: a seta dos botões acabou de
   parar de andar no ponteiro por desalinhar. Aqui a resposta é de LUZ — a borda
   do card e a régua do link acendem, e o vidro clareia. Nada se move. */
@media (hover: hover) and (pointer: fine) {
  a.hub-card:hover {
    background: color-mix(in srgb, var(--c-blue) 14%, var(--d-campo));
    border-color: color-mix(in srgb, var(--c-teal-2) 34%, transparent);
  }
  a.hub-card:hover .hub-link { border-bottom-color: var(--c-teal-2); }
}

a.hub-card:focus-visible {
  outline: 2px solid var(--c-teal-2);
  outline-offset: 3px;
}