@charset "UTF-8";

/* ═══════════ origem: css/home.css ═══════════ */


/* ═══════════════════════════════════════════════
   PowerComm — HOME dos cases
   Carregada DEPOIS de style.css, que traz tokens, reset, tipografia
   base e header. Aqui só a gramática desta página.

   A regra que rege tudo abaixo: esta página não tem cliente dono.
   Nenhuma declaração pode ler var(--client-*) — o :root serve a paleta
   da Ocyan por ser o case padrão, e usá-la aqui pintaria a página de
   um cliente que não é o assunto (kb/design.md §2, escopo condicional).
   A única cor de cliente na home são os próprios logos.

   Raio: o sistema tem dez valores em uso (drift herdado). Aqui só dois —
   18px, o mais frequente da folha, e 999px nas pills. Não introduzir um
   terceiro sem promovê-lo no kb/design.md.
   ═══════════════════════════════════════════════ */

.home {
  /* ─── Borda de luz da cápsula ───
     Não é uma borda colorida uniforme: é LUZ DE BORDA. O que muda ao longo da
     volta é a OPACIDADE, não só o matiz — forte no canto por onde a luz entra
     (alto à esquerda), quase nada no lado oposto, e um retorno mais fraco no
     canto de baixo, que é o reflexo.

     Uma borda de opacidade constante lê como contorno desenhado; é o
     desnível que faz o olho ler volume. Foi o que a referência mostrou.

     Uma variável e não o valor repetido: a v2 troca o FUNDO da cápsula e
     precisa redeclarar as duas camadas de background juntas — sem isto, o
     gradiente teria de ser copiado nos dois arquivos e sairia de sincronia na
     primeira calibragem. */
  --capsula-borda: linear-gradient(
    138deg,
    rgba(254, 129, 45, .90) 0%,
    rgba(197, 43, 38, .48) 16%,
    rgba(197, 43, 38, .12) 38%,
    rgba(254, 129, 45, .05) 58%,
    rgba(224, 101, 27, .38) 84%,
    rgba(254, 129, 45, .70) 100%
  );

  /* --folga-header mora em css/style.css: a barra descolada virou o padrão
     das duas famílias de página em 28/08, e o valor tem de ser um só. */
  /* Régua vertical da home, na escala de 8. Uma variável e não valores
     soltos: as quatro seções precisam respirar igual, e foi o descasamento
     de três medidas independentes que quebrou o alinhamento do case. */
  --ritmo-secao: clamp(4rem, 9vw, 8rem);   /* 64 → 128px, o degrau de capítulo */
}

/* Wrapper padrão: mesmo shell e mesma margem lateral do header e do case.
   É o que faz a borda esquerda do logo, da manchete e do primeiro card
   caírem na mesma vertical durante o scroll inteiro. */
.vozes-inner,
.cta-inner {
  max-width: var(--shell-page);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* Os cards são a exceção: eles precisam medir --shell-page CHEIO, não
   --shell-page menos as duas margens. É a mesma correção que o hero já
   carrega (style.css) — teto em `shell + 2×pad` e o padding descontando de
   volta. Sem isso o card nascia --pad mais estreito de cada lado que a
   pílula do header, e as duas bordas verticais não batiam.

   Vale só aqui porque o card é uma SUPERFÍCIE: ele desenha a própria borda,
   e uma superfície mais estreita que a barra acima lê como desalinhamento.
   Vozes e CTA são texto sobre o fundo — lá a margem é respiro, não borda. */
.home-cases {
  max-width: calc(var(--shell-page) + var(--pad) * 2);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* ═══════════ HEADER ═══════════
   A pílula solta era só da home e viveu aqui até 28/08, quando virou o padrão
   das duas famílias de página. Forma, folga e posição estão em css/style.css,
   em um lugar só. Aqui não sobrou nada. */

/* ═══════════ 1. HERO ═══════════
   A frase grande no centro e as seis marcas saindo de dentro dela. */

/* O hero mede MENOS que uma tela de propósito: é a folga que deixa o primeiro
   card espiar na dobra, dizendo que há mais abaixo sem precisar de seta nem
   de "role para ver". Era `min(100svh - 7.5rem, 46rem)`, ou seja, uma tela
   cheia — e a página parecia terminar ali.

   `--hero-alt` é o número a calibrar: menor mostra mais do card, maior dá
   mais ar à frase. */
.hero-frase {
  /* O hero é `place-items: center`, então esta altura decide DUAS coisas ao
     mesmo tempo: onde a frase cai na tela e quanto do mosaico espia na dobra.
     Em 78svh a frase ficava centrada mas abria ~450px de branco até o
     mosaico; em 58 o mosaico subia e a frase colava no header. 70 é o ponto:
     a frase cai perto do centro óptico e as duas primeiras linhas do mosaico
     entram na dobra. */
  /* Cresceu de 70svh porque o hero deixou de ser só a frase: agora ele tem
     dois tempos empilhados, a frase e a rede, e a rede precisa de altura
     para o raio não encostar na manchete. */
  --hero-alt: 88svh;
  min-height: var(--hero-alt);
  position: relative;   /* âncora da malha */
  display: grid;
  grid-template-rows: auto auto;
  align-content: center;
  justify-items: center;
  gap: clamp(1.5rem, 4vh, 3.5rem);
  /* O topo é MENOR que a base de propósito: um bloco geometricamente centrado
     entre duas âncoras lê como baixo, porque o olho pesa a mancha de texto e
     não a caixa que a contém. A diferença é a correção óptica. */
  /* O topo cresceu (26/08): com o hero em 88svh e a rede ocupando o pé, a
     frase subia até encostar na pílula do header. Continua MENOR que a base
     — um bloco geometricamente centrado entre duas âncoras lê como baixo. */
  padding: clamp(4rem, 9vh, 6.5rem) var(--pad) clamp(2rem, 4vh, 3rem);
  background: var(--paper);
  overflow: clip;   /* as cápsulas não empurram a página nas telas estreitas */
}

.hero-fixo {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  width: 100%;
  /* O shell é o que impede a frase de colar na borda quando o hero passa a
     sangrar: a malha é full-bleed, o texto não. */
  max-width: var(--shell-page);
  margin-inline: auto;
}

/* O palco é a área inteira do hero: a frase no meio, as cápsulas em volta.
   --esp e --espv são o espalhamento; cada slot é um múltiplo deles, então
   mexer aqui reposiciona as seis de uma vez. */
/* Mais largo que o shell da página: aqui as marcas vão para os CANTOS, e o
   shell de 1160 as traria de volta para perto do texto. O teto de 90rem
   impede que em monitor ultralargo elas fiquem a meia tela de distância,
   soltas do conjunto. */
.hero-palco {
  --esp: clamp(9rem, 34vw, 30rem);
  --espv: clamp(6rem, 20vh, 14rem);
  position: relative;
  width: 100%;
  max-width: min(100%, 90rem);
  display: grid;
  place-items: center;
}

/* ─── A malha ───
   Referência: Senses. Todo o hero é quadriculado; o texto fica DIRETO sobre
   as células, sem caixa de fundo, e continua legível porque as apagadas são
   quase o papel.

   SEM CLUSTER ACESO desde 26/08: a cor do hero passou a ser o raio da rede,
   e dois focos de laranja na mesma tela disputavam. A malha ficou como
   textura — as regras .mlh/.spk continuam abaixo porque a remoção é do
   MARKUP, não do sistema.

   UM TILE, NÃO 150 DIVS. O rect do SVG tem 92 de 100 unidades, então o sulco
   entre células é sempre 8% do módulo e o raio 20% — as acesas usam as mesmas
   proporções e por isso encaixam no tile em qualquer --cel.

   O MÓDULO É A ÚNICA MEDIDA. --cel manda no tile, na posição e no tamanho das
   acesas e no raio de todas. Mexer nele reescala a malha inteira sem
   desalinhar nada; escrever qualquer um desses valores em px de novo é o que
   quebraria o encaixe. */
.hero-malha {
  --cel: clamp(58px, 6.6vw, 104px);
  --sulco: calc(var(--cel) * .08);
  --raio: calc(var(--cel) * .2);
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Crect x='4' y='4' width='92' height='92' rx='20' fill='%23F1F1F1'/%3E%3C/svg%3E");
  background-size: var(--cel) var(--cel);
  background-position: top right;   /* mesma âncora das acesas */
  opacity: 0;
  /* .55 e não 1: com a rede por cima, a malha em cheio disputava com os fios
     e cada traço passava a cruzar uma borda de célula a cada 90px. Ela é
     fundo agora — o que tem de ler é a rede. */
  animation: malha-acende 1.1s var(--ease-cena) .1s forwards;
}

/* Uma célula acesa. `right` e `top` repetem a conta do tile, e é essa
   repetição que faz a peça cair exatamente sobre um quadrado da malha em vez
   de flutuar entre dois. */
.mlh {
  position: absolute;
  right: calc((var(--c) - 1) * var(--cel) + var(--sulco) / 2);
  top:   calc((var(--r) - 1) * var(--cel) + var(--sulco) / 2);
  width:  calc(var(--cel) - var(--sulco));
  height: calc(var(--cel) - var(--sulco));
  border-radius: var(--raio);
  /* O matiz caminha pelo cluster: --m 0 no vermelho profundo, 1 no laranja. */
  background-color: color-mix(in oklab,
    var(--pc-orange) calc(var(--m) * 100%), var(--pc-deep));
  /* O lustro interno é o que dá volume à célula — sem ele a peça lê como
     adesivo chapado, e é a diferença mais visível para a referência. */
  /* .32 e não .6: o lustro é volume, não névoa. Mais forte que isso ele
     lavava justamente as células de dentro, que são as que precisam ler como
     cor cheia — era a maior diferença para a referência. */
  background-image: linear-gradient(155deg,
    rgba(255,255,255,.32), rgba(255,255,255,0) 58%);
  /* A intensidade é opacidade, não uma segunda cor: assim a borda do cluster
     desbota PARA O PAPEL e as células fracas continuam da mesma família. */
  opacity: var(--n);
  /* O bloom cresce com a intensidade e some nas fracas. */
  box-shadow: 0 0 calc(var(--cel) * var(--n) * .55)
    color-mix(in oklab, var(--pc-orange) calc(var(--m) * 100%), var(--pc-deep));
}

/* O brilho de quatro pontas da referência nasce na JUNÇÃO de quatro células
   fortes — por isso ele fica no canto superior-esquerdo da peça, centrado no
   cruzamento, e não no meio dela. */
.mlh.spk::after {
  content: "";
  position: absolute;
  left: calc(var(--sulco) / -2);
  top:  calc(var(--sulco) / -2);
  width:  calc(var(--cel) * .22);
  height: calc(var(--cel) * .22);
  translate: -50% -50%;
  background: #fff;
  clip-path: polygon(50% 0, 57% 43%, 100% 50%, 57% 57%, 50% 100%, 43% 57%, 0 50%, 43% 43%);
}

@keyframes malha-acende { to { opacity: .55; } }


/* ─── A rede ───
   O SVG é full-bleed e escala inteiro: `preserveAspectRatio` no padrão
   (xMidYMid meet) mantém os fios em ângulo reto de verdade. Trocar por
   `none` esticaria o viewBox e os cantos arredondados virariam elipses. */
.hero-rede {
  position: relative;
  z-index: 1;
  /* A LARGURA É DERIVADA DA ALTURA, e não o contrário. O SVG tem proporção
     fixa (1440/520 = 2.77), então dar-lhe 100% da linha faz a altura ser o
     que sobrar — e foi assim que o raio e a fileira de baixo saíram da
     dobra. Amarrando a largura ao que cabe na vertical, a rede cabe inteira
     em qualquer tela e só encolhe. */
  --rede-alt: 52svh;
  /* A rede é MAIS LARGA QUE O SHELL — ela vai até onde a altura deixar. O
     limite real é vertical: a proporção é fixa, então cada pixel de largura
     custa 1/3.43 de altura, e é a altura que acaba primeiro. Em tela baixa
     ela encolhe e centraliza; só em tela alta chega a encostar nas bordas. */
  --rede-prop: 3.43;   /* 1440/420 — mudou o viewBox, muda aqui */
  /* 100% e não 100vw: `vw` ignora o padding lateral do hero, e como os dois
     blocos dividem a mesma coluna do grid, a rede em 100vw arrastava o
     .hero-fixo junto e a frase passava a medir mais que a margem da página. */
  width: min(100%, calc(var(--rede-alt) * var(--rede-prop)));
  margin-inline: auto;
}
.hero-rede svg { display: block; width: 100%; height: auto; overflow: visible; }

/* O fio se desenha sozinho: --len é o comprimento medido na geração, e o
   offset caminha dele até zero. Sem --len correto o traço nasce cortado. */
.rede-fio {
  stroke: #D6D6D6;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  animation: fio-desenha .85s var(--ease-cena) calc(.45s + var(--i) * .07s) forwards;
}
@keyframes fio-desenha { to { stroke-dashoffset: 0; } }

/* OS NÓS SAÍRAM (26/08). Eram círculos brancos com borda na curva de cada
   fio, como na referência do Index. Com dez fios eles viraram dez pontos
   cinza sem informação, competindo com as próprias cápsulas. */

/* O raio é o primeiro a existir: a rede sai DELE, e vê-la nascer antes do
   objeto inverteria a causa. */
.rede-raio {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: raio-entra .8s var(--ease-cena) .1s forwards;
}
@keyframes raio-entra {
  from { opacity: 0; scale: .82; }
  to   { opacity: 1; scale: 1; }
}

/* A pílula CHEGA NA PONTA do fio, não junto com ele: o delay é o do fio mais
   a duração dele. É essa defasagem que faz a leitura ser "a linha alcança a
   marca" em vez de "as duas coisas apareceram". */
.rede-marca {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: marca-entra .5s var(--ease-cena) calc(1.05s + var(--i) * .07s) forwards;
}
.rede-marca rect {
  fill: var(--paper);
  stroke: var(--bone-2);
  stroke-width: 1;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.07));
}
@keyframes marca-entra {
  from { opacity: 0; scale: .78; }
  to   { opacity: 1; scale: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .rede-fio { stroke-dashoffset: 0; animation: none; }
  .rede-raio, .rede-marca { opacity: 1; animation: none; }
}

/* ─── A frase ───
   Grande, porque é ela que tem de ter presença: as marcas acompanham, não
   disputam. Uma versão anterior encolheu o texto para caber num círculo de
   logos girando, e foi o que o inverteu.

   DUAS TINTAS, e o degradê só na marca (decisão do Thiago, 25/08, sobre a
   referência do Logobook): a primeira oração em tinta cheia, a segunda em
   cinza. Antes a frase INTEIRA era o degradê laranja — com 64px de corpo e
   dezessete caracteres por linha, aquilo era muita cor por muito tempo, e o
   nome da PowerComm não tinha como se destacar dentro dela porque estava
   pintado igual ao resto.

   Invertido, o degradê volta a significar alguma coisa: ele marca o nome da
   marca e mais nada. Um recurso que aparece uma vez por página é ênfase; o
   mesmo recurso aplicado a tudo é textura.

   O cinza é #8C8C8C — 3,36:1 sobre o papel. Passa o critério de TEXTO GRANDE
   (3:1) e só ele: se esta frase um dia encolher abaixo de 24px, o cinza tem
   de escurecer junto, senão a segunda metade da manchete reprova. */
.hero-titulo {
  position: relative;
  z-index: 2;
  font-family: var(--body);
  font-weight: 600;
  /* 4rem = os 64px medidos no inspetor. O clamp mantém o teto ali e só
     encolhe em tela estreita — a 5,6vw ele já bate 64px por volta de 1140px
     de janela, então em desktop o valor é exatamente esse. */
  font-size: clamp(1.875rem, 4vw, 3.5rem);
  /* 1.16 e não 1.08: era aqui que estava a maior diferença para a referência.
     Em títulos deste tamanho a entrelinha apertada faz as linhas se tocarem
     opticamente e o bloco vira uma massa — o Clay respira quase um sexto do
     corpo entre uma linha e outra. */
  line-height: 1.16;
  letter-spacing: -.032em;
  max-width: 18ch;
  text-align: center;
  opacity: 0;
  animation: hero-sobe .9s var(--ease-cena) .15s forwards;
}

/* ─── As quatro linhas ───
   A quebra é escrita no HTML, não decidida pelo `text-wrap: balance`: a
   virada de tinta cai entre a segunda e a terceira linha, e o balance
   moveria esse corte para o meio de uma oração conforme a largura da janela.

   Duas tintas porque a frase tem duas partes — quem faz (as empresas, em
   tinta cheia) e o que consegue (o resultado, em cinza). O degradê aparece
   só no nome da marca: um recurso que aparece uma vez por página é ênfase, o
   mesmo recurso em tudo é textura. */
.lin { display: block; }
.lin-forte { color: var(--ink); }
/* #8C8C8C dá 3,36:1 sobre o papel. Passa o critério de TEXTO GRANDE (3:1) e
   só ele — se esta frase encolher abaixo de 24px, o cinza tem de escurecer
   junto, senão a segunda metade da manchete reprova. */
.lin-eco { color: #8C8C8C; }

/* `inline-block` porque, quebrando entre linhas, cada fragmento receberia seu
   próprio percurso e o degradê reiniciaria no meio do nome.

   O PADDING COM MARGEM NEGATIVA É O QUE SALVA A DESCENDENTE (28/08). Com
   `background-clip: text` o glifo só é pintado onde há caixa por baixo dele,
   e a caixa deste inline-block tem a altura da entrelinha. Onde a entrelinha
   é apertada — a v14 usa .95 — ela fica MENOR que o corpo da fonte, e a
   perna do "j" de "quem já usa" caía fora da área pintada: a letra aparecia
   cortada na base, só ela, porque é a única com descendente.

   Os dois valores se anulam, então a caixa cresce para o degradê e o layout
   não se mexe. Vale para o acento também, que corta pelo mesmo motivo em
   cima. Está no componente e não na v14: quem escolher entrelinha curta
   noutra versão herda a correção em vez de redescobrir o sintoma. */
.lin-marca {
  display: inline-block;
  padding-block: .16em;
  margin-block: -.16em;
  background-image: linear-gradient(
    102deg, #C52B26 0%, #FE812D 30%, #B62A26 60%, #E0651B 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .lin-marca { color: var(--pc-orange); -webkit-text-fill-color: currentColor; }
}

/* ─── As marcas ───
   FORA DO HTML desde 25/08 (ver o comentário do hero em index.html). O CSS
   fica porque a remoção é temporária; nada daqui até o fim desta seção tem
   efeito enquanto a <ul class="hero-orbita"> não voltar. */
.hero-orbita {
  position: absolute;
  inset: 0;
  list-style: none;
  z-index: 1;
}

/* O slot fica NO CENTRO, sobre a frase, e não na posição final. É o ponto e a
   cápsula que percorrem o caminho até --fx/--fy — é isso que faz a marca sair
   de dentro do texto em vez de aparecer pronta no lugar. */
.orb-slot {
  position: absolute;
  top: 50%;
  left: 50%;
  --x: calc(var(--fx) * var(--esp));
  --y: calc(var(--fy) * var(--espv));
  /* Amplitude da flutuação, escalonada para as seis não se moverem juntas. */
  --amp: calc(10px + var(--i) * 1.6px);
}

/* A bolinha: o primeiro sinal de que algo vai sair do texto. Ela viaja do
   centro até o lugar e some por baixo quando a cápsula nasce ali — a
   sobreposição de meio segundo é o que dá a impressão de que uma virou a
   outra, em vez de duas coisas se revezando. */
.orb-ponto {
  position: absolute;
  width: .75rem;
  height: .75rem;
  margin: -.375rem 0 0 -.375rem;
  border-radius: 50%;
  background: var(--pc-orange);
  opacity: 0;
  transform: translate(0, 0) scale(0);
  animation:
    ponto-sai .75s var(--ease-cena) calc(1s + var(--i) * .08s) forwards,
    ponto-some .4s var(--ease-cena) calc(1.95s + var(--i) * .09s) forwards;
}
@keyframes ponto-sai {
  from { opacity: 0; transform: translate(0, 0) scale(0); }
  35%  { opacity: 1; }
  to   { opacity: 1; transform: translate(var(--x), var(--y)) scale(1); }
}
@keyframes ponto-some {
  to { opacity: 0; transform: translate(var(--x), var(--y)) scale(.3); }
}

/* A cápsula nasce onde a bolinha parou. Sempre na horizontal — não há giro
   nenhum aqui, nem no conjunto nem nela. */
.hero-cel {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Largura vinda do conteúdo: o peso ótico já foi igualado NO ARQUIVO
     (scripts/logo_faixa.py), então logo largo ganha cápsula larga sem pesar
     mais que logo estreito. Largura única faria o oposto. */
  /* Altura mínima comum: com o peso igualado, os logos passam a ter alturas
     diferentes de propósito, e sem um piso as cápsulas ficariam de tamanhos
     visivelmente distintos — a caixa é o que dá unidade ao conjunto. */
  min-height: 3rem;
  /* Padding lateral maior que o vertical, e mais folgado que numa caixa de
     canto reto: na pílula as pontas são curvas, e um logo que se aproxima
     delas parece encostar mesmo sem encostar. */
  padding: .5rem 1.375rem;
  border-radius: 999px;

  /* BORDA EM DEGRADÊ. Não existe `border-image` que respeite border-radius,
     então o truque é pintar DUAS camadas de fundo com origens diferentes: a
     de cima, chapada, ocupa só a padding-box; a de baixo, o degradê, ocupa a
     border-box e assoma exatamente na faixa de 1px da borda transparente.
     É por isso que a borda precisa existir e ser `transparent` — ela é o vão
     por onde o degradê aparece.

     As cores são as mesmas do degradê da frase, e pelo mesmo motivo: o creme
     da marca não entra porque some sobre o papel. */
  border: 1px solid transparent;
  background:
    linear-gradient(var(--capsula-fundo, #FBFBFB), var(--capsula-fundo, #FBFBFB)) padding-box,
    var(--capsula-borda) border-box;
  white-space: nowrap;
  opacity: 0;
  transform: translate(var(--x), var(--y)) translate(-50%, -50%) scale(.3);
  /* Duas animações na mesma lista, e a ordem importa: quando as duas atuam
     sobre `transform`, a ÚLTIMA vence. A flutuação está em segundo lugar mas
     tem delay, e animação que ainda não começou não aplica valor nenhum
     (fill-mode `none`) — então até lá quem manda é a entrada, e a partir do
     delay a flutuação assume sem salto, porque o quadro 0% dela é exatamente
     a posição em que a entrada parou.

     Duração e delay variam por --i de propósito. Com valores iguais as seis
     sobem e descem em uníssono, e o conjunto lê como um bloco respirando; com
     períodos diferentes elas se dessincronizam sozinhas e o movimento nunca
     se repete igual. */
  animation:
    cel-chega .65s var(--ease-cena) calc(1.75s + var(--i) * .09s) forwards,
    cel-flutua calc(3.2s + var(--i) * .45s) ease-in-out calc(2.5s + var(--i) * .14s) infinite;
  transition: background .25s var(--ease), scale .3s var(--ease);
}
/* Trajetória em arco, não sobe-e-desce. Quatro pontos em vez de dois: a
   passagem por 25% e 75% com deslocamento lateral desenha uma curva, e é ela
   que torna o movimento PERCEPTÍVEL sem precisar de amplitude grande. Uma
   oscilação puramente vertical de poucos pixels o olho lê como imóvel.

   A amplitude é escalonada por --i: 10 a 18px de subida. Passou por 4-9px,
   que na conferência não se via. */
@keyframes cel-flutua {
  0%, 100% {
    transform: translate(var(--x), var(--y)) translate(-50%, -50%) translate(0, 0);
  }
  25% {
    transform: translate(var(--x), var(--y)) translate(-50%, -50%)
               translate(calc(var(--amp) * .28), calc(var(--amp) * -.55));
  }
  50% {
    transform: translate(var(--x), var(--y)) translate(-50%, -50%)
               translate(0, calc(var(--amp) * -1));
  }
  75% {
    transform: translate(var(--x), var(--y)) translate(-50%, -50%)
               translate(calc(var(--amp) * -.28), calc(var(--amp) * -.55));
  }
}
@keyframes cel-chega {
  from { opacity: 0; transform: translate(var(--x), var(--y)) translate(-50%, -50%) scale(.3); }
  70%  { opacity: 1; transform: translate(var(--x), var(--y)) translate(-50%, -50%) scale(1.06); }
  to   { opacity: 1; transform: translate(var(--x), var(--y)) translate(-50%, -50%) scale(1); }
}

/* ZOOM, e não `height`. Altura fixa era o que estava aqui e desfazia toda a
   normalização: os seis arquivos já saem de scripts/logo_faixa.py com o PESO
   ÓTICO igualado, mas cada um tem uma proporção — na mesma altura de 17px, a
   TIM renderizava 1,35x a área do Sicredi, enquanto a Globo ficava em 0,55x e
   a XP em 0,79x. Foi exatamente o que se viu na tela.

   Com `zoom` os seis são reduzidos pelo MESMO fator a partir do tamanho
   natural, então a relação de peso que o script fechou chega intacta à
   página. A consequência é que as alturas passam a diferir — 15px na TIM,
   27px na Globo —, e é assim que tem de ser: o que se iguala é a mancha, não
   a altura.

   `zoom` e não `transform: scale()`: scale não afeta o layout, então a
   cápsula continuaria dimensionada pelo tamanho original e sobraria caixa
   vazia em volta de cada logo. */
.hero-cel img {
  zoom: var(--zoom, .22);
  width: auto;
  height: auto;
  max-width: none;
  display: block;
}

/* Os SÍMBOLOS um pouco acima da régua (Globo e XP a pedido do Thiago, 25/08;
   Tenda, V.tal e Ocyan pela mesma razão quando entraram): símbolo compacto lê
   menor que palavra de mesma área de tinta, porque não tem extensão
   horizontal para o olho percorrer.

   Os que ficam de fora são os logotipos COM PALAVRA — Sicredi, Gerdau, Vale,
   TIM e MRS. É esse o critério, e não gosto por marca: ao entrar um logo
   novo, a pergunta é se ele é símbolo ou palavra. */
.orb-slot[data-marca="globo"] { --zoom: .25; }
.orb-slot[data-marca="xp"]    { --zoom: .25; }
.orb-slot[data-marca="tenda"] { --zoom: .25; }
.orb-slot[data-marca="vtal"]  { --zoom: .25; }
.orb-slot[data-marca="ocyan"] { --zoom: .25; }

/* O hover cresce por `scale`, propriedade individual, e NÃO por transform:
   com a flutuação rodando, um transform aqui perderia — animação vence
   declaração normal. `scale` é propriedade própria e se compõe com o
   transform da animação em vez de disputar com ele.
   A flutuação também pausa, para o alvo não fugir do ponteiro. */
/* No hover só o fundo escurece um degrau — a borda em degradê fica, porque é
   ela que dá identidade à cápsula. O fundo entra por variável para não
   precisar repetir a dupla camada de background aqui. */
.hero-cel:hover {
  --capsula-fundo: #F4F4F4;
  scale: 1.06;
  animation-play-state: paused;
}

/* ═══════════ 2. O MOSAICO ═══════════
   Referência: OptimAI. Ver o comentário do bloco em index.html para o porquê
   dos três tipos de célula e da ordem de entrada. */
.mosaico {
  background: var(--paper);
  /* Sem respiro no topo: as primeiras células têm de entrar na dobra, como
     dica visual de que há mais abaixo. O ar acima delas já é o do hero. */
  padding-block: 0 clamp(3rem, 7vw, 6rem);
  /* Sobe POR CIMA da folga do hero, em vez de o hero encolher. Encolhendo o
     hero, a manchete subiria junto e sairia do centro óptico onde ela foi
     calibrada — aqui só o mosaico se move, e o texto fica onde está. */
  margin-top: clamp(-7rem, -6vh, -3rem);
}
.mosaico-inner {
  max-width: var(--shell-page);
  margin-inline: auto;
  padding-inline: var(--pad);
  display: grid;
  place-items: center;
}

/* Colunas e linhas de MESMA medida: a célula é quadrada, e é isso que faz o
   conjunto ler como quadriculado e não como grade de cards. A medida é uma
   só (--mos-cel) para as duas dimensões — separá-las abriria a porta para um
   retângulo, que desfaz a leitura. */
.mos-grade {
  /* Célula maior (era 6,5rem de teto): com dez logos de pesos ópticos
     diferentes, a caixa pequena obrigava a reduzir tanto o zoom que os
     logotipos com palavra — Sicredi, Gerdau, Vale — viravam borrão. */
  --mos-cel: clamp(4.25rem, 9.2vw, 8.5rem);
  /* CINCO colunas, não seis. A composição usava só as colunas 2 a 6, então a
     coluna 1 ficava permanentemente vazia e o conjunto nascia deslocado para
     a direita dentro de um grid centrado — a grade estava centrada, o desenho
     não. As colunas foram renumeradas para começar em 1.

     Ao mexer na composição: conferir que a menor coluna é 1, que a menor
     diagonal é 0, que --mos-diags abaixo é a maior, e que as células estão
     REPARTIDAS de forma parecida entre as colunas. Nenhuma das quatro dá
     erro; as duas primeiras descentram, a terceira quebra a revelação, e a
     quarta é a mais traiçoeira — com 5 células numa coluna e 2 na outra, a
     grade continua centrada e o DESENHO pende para o lado cheio. Foi assim
     que o mosaico pareceu deslocado mesmo com as colunas certas. */
  --mos-cols: 5;
  --mos-lins: 7;
  /* Quantas diagonais o mosaico tem, contando de zero: é o maior --d das
     células. Ele divide o progresso em degraus — mudar a composição sem
     acertar este número deixa parte do mosaico sem acender ou acende tudo
     antes do fim. E as diagonais precisam COMEÇAR EM ZERO: se a menor valer
     4, nada aparece antes de um terço da travessia, e a dobra fica vazia. */
  --mos-diags: 9;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--mos-cols), var(--mos-cel));
  grid-auto-rows: var(--mos-cel);
  /* Sem gap: as células se tocam, como no quadriculado da referência. O ar
     entre as marcas vem das células VAZIAS, não de espaçamento — é o que
     permite que dois cartões vizinhos encostem quando a composição pede. */
  gap: 0;
}

/* A CÉLULA carrega o PARALAXE. Sem transition aqui de propósito: `--ms` muda
   a cada quadro de scroll, e suavizar isso faria a peça arrastar atrás do
   dedo em vez de acompanhá-lo.

   `--pf` é a profundidade, em px de curso. Ela cresce da esquerda para a
   direita e de cima para baixo (c e r), então o mosaico não sobe como um
   bloco só — as colunas se descolam umas das outras e o quadriculado ganha
   camadas. A conta é aritmética simples e não aleatório: valores sorteados
   colocam vizinhos em ritmos muito diferentes, e o que era profundidade vira
   tremor.

   O `.5 −` centra o curso: no meio da travessia a peça está no lugar de
   origem, e ela se desloca metade para cada lado. Ancorando em 0, todas
   nasceriam deslocadas e a composição só ficaria correta no fim. */
.mos-cel {
  grid-column: var(--c);
  grid-row: var(--r);
  /* Curso pequeno e igual entre vizinhos de mesma coluna/linha: o parallax
     desloca o quadriculado, não desmancha. Estava em (c×7 + r×4) para os
     blocos e (c×12 + r×7) para os cartões, e a diferença abria um degrau
     visível entre duas células que se tocam — a Tenda descolava do bloco
     cinza ao lado dela. Agora a profundidade varia só entre COLUNAS, que é a
     distância em que o descolamento lê como camada e não como falha de
     alinhamento. */
  --pf: calc(var(--c) * 5px);
  transform: translateY(calc((.5 - var(--ms, .5)) * var(--pf) * -1));
  will-change: transform;
}


/* A PEÇA carrega a ENTRADA, e ela é DIRIGIDA PELO SCROLL — não é uma onda que
   dispara quando a seção entra em cena e roda sozinha até o fim. Cada célula
   aparece quando o progresso do mosaico alcança a diagonal dela, e some de
   volta se o leitor rolar para cima. O gesto dele é o que revela.

   `--on` é o estado desta célula, de 0 a 1: `(progresso × diagonais) − minha
   diagonal`, cortado por clamp. O ×2 encurta a rampa; sem ele cada célula
   leva um degrau inteiro para aparecer e o mosaico fica meio-visível o tempo
   todo, que lê como desfoque em vez de revelação.

   A mesma variável serve à opacidade, ao deslocamento e à escala — as três
   andam juntas por construção, e não por três durações que alguém precisa
   manter em sincronia. Sem `transition`: o valor já vem do scroll, e
   suavizá-lo faria a peça chegar atrasada em relação ao dedo. */
.mos-peca {
  /* DUAS PORTAS, e a peça só aparece quando as duas deixam.

     `--ms` é o scroll: quanto o mosaico já atravessou a tela.
     `--mc` é a CARGA: uma onda que corre uma vez, depois que a manchete
            entrou. Sem ela, as peças que caem dentro da dobra já nasceriam
            prontas — estáticas, antes do título existir, o que inverte a
            ordem de leitura da página.

     `min()` entre as duas: na carga a porta do tempo é a mais restritiva e
     manda; depois que ela abre de vez (--mc chega a 1), quem manda é o
     scroll, para sempre. As duas usam a MESMA conta de diagonal, então a
     onda da carga e a onda do scroll têm o mesmo desenho. */
  /* A RAMPA (1.25, era 2) é quanto do degrau cada peça leva para aparecer.
     Alta, a peça estala — vai de invisível a inteira em pouco mais que um
     quadro, e é isso que fazia a entrada parecer dura. Baixa, ela tem tempo
     de ser vista chegando. */
  /* `--mos-antec` COMPRIME a revelação na primeira metade da travessia.

     Sem ele, a conta usa o progresso cru: a última diagonal só fecha em
     --ms = 1, e --ms = 1 é o instante em que a base do mosaico sai da tela
     POR CIMA. As peças de baixo passavam a vida inteira em opacidade parcial
     e desapareciam antes de ficarem sólidas — era por isso que elas pareciam
     desbotadas e mal se viam.

     Com 1.9, a última diagonal fecha por volta de 53% da travessia, que é
     quando o mosaico está inteiro na tela. Depois disso nada mais muda: o
     clamp já saturou, e o que continua acontecendo é só o parallax — que usa
     `--ms` cru de propósito, porque ele deve responder ao scroll o percurso
     todo. */
  --mos-antec: 1.9;
  /* A RAMPA é o inverso da duração de cada peça: em .45 ela leva pouco mais de
     DOIS degraus para subir. Passou por 2 (estalava), 1.25, .8 e .45.

     Duração de UMA peça e intervalo ENTRE peças são coisas separadas, e foi
     aí que perdi rodadas: a duração da onda (js/home.js) governa o intervalo;
     a rampa governa a subida de cada uma. Aumentar a onda com a rampa alta
     deixa peças rápidas mais espaçadas — que era exatamente o sintoma.

     No scroll a rampa tem um teto: a última peça completa em
     `(maior --d + 1/rampa) / (antec × diags)` da travessia. Com .45 dá 0,72,
     ainda dentro da tela; baixar mais empurra o fecho para fora e as últimas
     peças somem pálidas. */
  --on-scroll: clamp(0, calc((var(--ms, 0) * var(--mos-antec) * var(--mos-diags) - var(--d)) * .45), 1);

  /* A CARGA tem rampa PRÓPRIA, e bem menor. As duas ondas pareciam a mesma
     coisa e eu vinha ajustando uma só — mas elas têm limites diferentes:

     · no scroll, a rampa não pode cair de .45 porque o fecho da última
       diagonal escaparia da tela e as peças de baixo voltariam a sumir
       pálidas (aconteceu);
     · na carga não existe esse teto. O tempo é meu, não do leitor.

     Em .25 cada peça leva QUATRO degraus para subir, contra os pouco mais de
     dois do scroll — a Tenda passou de 360ms de subida para cerca de 800.

     `--mos-diags + 4` no multiplicador, e não `--mos-diags` puro: com rampa
     .25 a última diagonal precisa de quatro degraus ALÉM da própria posição
     para completar, e sem essa folga ela terminaria a carga ainda a meio
     caminho. O 4 é 1/rampa — ao mexer na rampa, este número muda junto. */
  --on-carga: clamp(0, calc((var(--mc, 0) * (var(--mos-diags) + 4) - var(--d)) * .25), 1);
  --on: min(var(--on-scroll), var(--on-carga));
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  /* easeOutCubic escrito à mão — `1−(1−x)³` expandido em `x(3 − 3x + x²)`.
     Era a quadrática, e ela ainda chegava seca no fim; a cúbica freia mais
     longe da chegada. `--on` é linear por natureza (vem de uma divisão), e não
     há `transition` aqui para carregar uma curva — a curva tem de estar na
     conta. */
  opacity: calc(var(--on) * (3 - 3 * var(--on) + var(--on) * var(--on)));
  transform:
    /* Curso maior e escala mais discreta: 18px de deslocamento com scale de
       .92 lia como um POP — a peça crescia mais do que andava. Invertido, ela
       desliza para o lugar. */
    translateY(calc((1 - var(--on)) * 22px))
    scale(calc(.965 + var(--on) * .035));
}

/* O cartão da marca: branco sobre o papel, e por isso precisa de sombra —
   é o único lugar da página que usa elevação. A regra do projeto é não usar
   sombra de UI, e aqui não é UI: é o que separa uma peça POUSADA sobre o
   quadriculado de um retângulo pintado nele. Sem ela o cartão branco some
   contra o papel branco. */
.mos-marca { z-index: 1; }
.mos-marca .mos-peca {
  background: #FFFFFF;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(26, 26, 26, .05),
              0 8px 20px rgba(26, 26, 26, .06);
}
.mos-marca img {
  zoom: .21;
  width: auto;
  height: auto;
  max-width: none;
  display: block;
}
/* Símbolo compacto lê menor que logotipo com palavra de mesma área de tinta —
   a mesma correção que as cápsulas do hero usavam. */
.mos-simbolo img { zoom: .25; }

/* O bloco cinza: sem conteúdo, sem raio, sem sombra. Ele é PARTE DO
   QUADRICULADO, não uma peça sobre ele — daí a diferença de tratamento. */
/* O bloco cinza aparece pela mesma conta, mas chega a .55 e não a 1 — ele é
   fundo, não peça. Multiplicar o próprio --on preserva o escalonamento. */
.mos-vazio .mos-peca {
  background: var(--bone-2);
  opacity: calc(var(--on) * .55);
}

@media (max-width: 760px) {
  /* Seis colunas em tela estreita deixariam a célula com 40px e o logo
     ilegível. Em quatro, a composição reflui: as marcas das colunas 5 e 6
     passam a ocupar 1 e 2, e é por isso que --c precisa ser reescrito. */
  .mos-grade { --mos-cols: 4; }
  .mos-cel[style*="--c: 5"] { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
  /* Sem onda e sem paralaxe: as células nascem no lugar e ficam. As duas
     coisas eram decoração — o mosaico existe parado. O parallax é o caso mais
     claro: movimento contínuo atrelado ao scroll é exatamente do que esta
     preferência tenta escapar. */
  .mos-cel { transform: none; }
  .mos-peca {
    --on-scroll: 1;
    --on-carga: 1;
    transform: none;
  }
  .mos-vazio .mos-peca { opacity: .55; }
}

/* ═══════════ 3. VITRINE ═══════════
   Referência: clay.com/customers. Quatro pílulas num trilho; a ativa se abre
   e mostra o palco inteiro, as outras ficam como fatias cortadas.

   O que faz funcionar é a pílula INATIVA continuar sendo o palco do cliente,
   só que estreito: a fatia de peça em resina é reconhecível e é ela que dá
   vontade de abrir. Uma miniatura cinza no lugar seria só um botão. */
.vitrine {
  padding-block: 2rem 0;
  padding-inline: var(--pad);
}

.vitrine-trilho {
  max-width: var(--shell-page);
  margin-inline: auto;
  display: flex;
  gap: .75rem;
  /* 560px, a altura da referência. Fixa mesmo, sem clamp: a régua das peças
     (escala e desvio por cliente, medidos do arquivo) foi calibrada contra
     esta altura — com altura fluida o mesmo valor entrega tamanhos diferentes
     conforme a janela. Telas curtas são tratadas no responsivo, onde a vitrine
     vira rolagem horizontal. */
  height: 35rem;
}

/* flex-basis animado e não width: com width o item inativo continua
   participando do cálculo pelo tamanho antigo durante a transição, e as
   pílulas tremem umas contra as outras no meio do caminho.
   A curva é a de CENA e não a de UI: isto é troca de quadro, não resposta a
   clique — a diferença está em kb/design.md §10. */
.vitrine-item {
  position: relative;
  flex: 0 0 clamp(3.5rem, 7vw, 5.5rem);
  border-radius: 28px;
  overflow: hidden;
  background: var(--stage);
  cursor: pointer;
  transition: flex-basis .7s var(--ease-cena), flex-grow .7s var(--ease-cena);
}
.vitrine-item.is-ativa {
  flex: 1 1 auto;
  cursor: default;
}

.vitrine-palco { position: absolute; inset: 0; overflow: hidden; }

/* Herda .objeto do style.css (absoluto e centrado) e desmonta a coreografia
   de capa — palco-entra e objeto-entra são sequência do hero do case, e aqui
   rodariam nas quatro ao mesmo tempo, no load.

   O DESLOCAMENTO E A ESCALA SÃO POR CLIENTE, e não é ajuste no olho — é
   correção de três diferenças medidas nos arquivos (tabela adiante):

   1. os quadros têm proporções diferentes: Tenda e MRS são 16:9, a V.tal é
      4:3 e o Ocyan é QUADRADO. Com `contain` numa caixa larga quem manda é a
      altura, então o quadrado renderiza bem mais estreito que o 16:9;
   2. a peça ocupa uma fração diferente do próprio quadro: 78% da altura no
      Ocyan contra 53% na V.tal;
   3. a peça da V.tal não está centrada no arquivo — está 3,8% à direita e
      3,1% abaixo do centro. As outras três estão centradas.

   `translate` em duas etapas: a primeira centra o elemento, a segunda aplica
   a correção. Somar tudo num translate só faz qualquer reajuste virar conta
   de cabeça.

   A peça fica em 72% da altura e senta em 38%, não no meio, e o par fecha
   duas queixas de uma vez: em escala cheia o símbolo virava o assunto do card
   e gritava mais que a frase; centrado, ele descia até a faixa do texto e a
   frase passava POR CIMA da resina. Mexer num dos dois números sem o outro
   reabre uma delas. */
.vitrine-palco .objeto {
  animation: none;
  opacity: 1;
  width: 100%;
  height: 72%;
  max-width: none;
  top: 38%;
  object-fit: contain;
  transform:
    translate(-50%, -50%)
    translate(var(--dx, 0%), var(--dy, 0%))
    scale(var(--escala, .78));
  transition: transform .7s var(--ease-cena);
}

/* Na pílula FECHADA o objeto continua em cena, cortado.

   AQUI O VÍDEO TEM LARGURA PRÓPRIA E QUEM CORTA É O OVERFLOW — não
   `object-fit`. As duas alternativas óbvias falham nas duas pontas:

   · `cover` estica o vídeo até cobrir uma caixa de ~5rem por 35rem; como ele
     é 16:9, isso amplia por um fator enorme e não se reconhece mais nada;
   · `contain` encolhe até caber nos 5rem, e a peça vira uma lasca.

   Com `height` em porcentagem e `width: auto`, o elemento assume a proporção
   natural do arquivo, fica bem mais largo que a pílula e sobra para os lados,
   onde o overflow corta. A peça mantém a escala de render e o que se vê é uma
   FATIA dela em tamanho natural. */
.vitrine-item:not(.is-ativa) .vitrine-palco .objeto {
  height: 62%;
  width: auto;
  max-width: none;
  top: 50%;
  object-fit: contain;
  transform:
    translate(-50%, -50%)
    translate(var(--dx, 0%), 0%)
    scale(var(--escala, .78));
}

/* Logo no alto à esquerda e texto embaixo — as duas pontas da diagonal, com o
   objeto no meio. São os únicos cantos onde texto não disputa espaço com o
   símbolo, que ocupa o centro nos quatro. */
.vitrine-topo {
  position: absolute;
  inset: 0 0 auto 0;
  padding: clamp(1.25rem, 2.4vw, 2rem);
  opacity: 0;
  transform: translateY(-.5rem);
  transition: opacity .45s var(--ease-cena), transform .45s var(--ease-cena);
  pointer-events: none;
}
.vitrine-item.is-ativa .vitrine-topo {
  opacity: 1;
  transform: none;
  transition-delay: .3s;
}

/* Os arquivos `-marca.png` já saem com PESO ÓTICO igualado por
   scripts/logo_faixa.py — altura igual nunca deu peso igual aqui, porque dois
   dos quatro navbar são o logo DENTRO DE UMA CAIXA chapada da marca e dois
   são símbolo solto. A da Tenda foi removida (--tira-fundo); a da V.tal fica,
   porque é o que a marca usa sobre fundo claro.
   O CSS aqui é teto largo, não régua: apertar a altura reescalaria só os
   altos e reabriria a diferença que o script fechou. */
.vitrine-marca {
  height: 2.5rem;
  width: auto;
  max-width: 9rem;
  object-fit: contain;
}

/* Só entra quando a pílula abre. O delay espera a largura acontecer: texto
   que aparece antes da caixa existir sai comprimido e reflui na frente do
   leitor. */
.vitrine-corpo {
  position: absolute;
  inset: auto 0 0 0;
  padding: clamp(1.25rem, 2.4vw, 2rem);
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: .75rem;
  opacity: 0;
  transform: translateY(.75rem);
  transition: opacity .45s var(--ease-cena), transform .45s var(--ease-cena);
  pointer-events: none;
}
.vitrine-item.is-ativa .vitrine-corpo {
  opacity: 1;
  transform: none;
  transition-delay: .3s;
}

/* Manchete curta, do <h1> do próprio case — não o texto do briefing, que
   ficou nos cards da seção seguinte. Texto direto sobre o palco, sem pílula
   de fundo, como na referência.
   A TINTA É POR CASE e é a única saída possível: três palcos são claros e
   pedem a tinta do sistema; o da Tenda é o vermelho da marca, onde #1A1A1A dá
   2,5:1 e reprova, contra 4,97:1 do branco. */
.vitrine-frase {
  font-family: var(--body);
  font-weight: 600;
  font-size: clamp(1.125rem, 2vw, 1.625rem);
  line-height: 1.3;
  letter-spacing: -.026em;
  color: var(--vitrine-tinta, var(--ink));
  max-width: 26ch;
  text-wrap: pretty;
}
.vitrine-frase strong { font-weight: 600; }
.vitrine-item[data-cliente="tenda"] { --vitrine-tinta: #FFFFFF; }

/* Seta de saída, no canto oposto ao texto. Só ela navega; a pílula inteira
   troca o slide.
   Contorno e não superfície cheia: um botão branco sólido sobre o palco vira
   um segundo objeto na cena e disputa com a peça em resina. currentColor
   amarra a borda à tinta do case — na Tenda os dois viram branco juntos. */
.vitrine-ir {
  position: absolute;
  right: clamp(1.25rem, 2.4vw, 2rem);
  bottom: clamp(1.25rem, 2.4vw, 2rem);
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid currentColor;
  background: transparent;
  color: var(--vitrine-tinta, var(--ink));
  font-size: 1.125rem;
  text-decoration: none;
  opacity: 0;
  transition: opacity .45s var(--ease-cena), background .25s var(--ease),
              border-color .25s var(--ease), color .25s var(--ease),
              transform .25s var(--ease);
  pointer-events: none;
}
.vitrine-item.is-ativa .vitrine-ir {
  opacity: 1;
  pointer-events: auto;
  transition-delay: .35s;
}
.vitrine-ir:hover {
  background: var(--pc-orange);
  border-color: var(--pc-orange);
  color: #fff;
  transform: translateY(-2px);
}

/* ═══════════ 4. CASES ═══════════ */
.home-cases {
  /* Nada de padding embaixo, e o motivo não é estético: um elemento sticky
     desliza até o fim do CONTAINING BLOCK, que aqui é esta seção. Com
     respiro no pé dela, a V.tal continuava escorregando por dentro desse
     respiro depois que o Ocyan já tinha parado — e o que aparecia embaixo do
     último card era o pé do penúltimo, ainda grudado.

     Era esse o bug intermitente da faixa amarela: ele dependia de quanto
     padding sobrava, então ia e voltava conforme a altura da janela. Fechado
     o container no pé do último card, nenhum card tem para onde escorregar.
     O respiro até os depoimentos virou margem DAQUELA seção (.home-vozes),
     que está fora desta e não serve de pista para o sticky. */
  /* Topo CURTO de propósito: é o que faz a borda do primeiro card APARECER
     abaixo da manchete, como a faixa amarela do Clay. Com o ritmo cheio de
     seção aqui (até 128px), o hero terminava e vinha campo branco — a página
     parecia acabar na dobra. A base segue em zero pelo motivo acima. */
  padding-block: clamp(.75rem, 2vw, 1.5rem) 0;
  /* block e não grid: o empilhamento vem de `position: sticky` em cada card,
     e num container grid o sticky se prende à célula, não ao fluxo — cada
     card grudaria só dentro da própria linha e nada passaria por cima de
     nada. O espaçamento que era `gap` virou margem no próprio card. */
  display: block;
}

/* Duas colunas de peso quase igual, com uma folga para o texto: a coluna
   de leitura precisa caber a manchete do case em três linhas, e em 1fr
   exato ela quebrava em quatro nos títulos longos (Ocyan e Tenda).
   overflow hidden é o que faz a foto encostar na borda arredondada sem
   raio próprio — o card é uma peça só, não uma caixa com uma imagem
   dentro. */
.home-case {
  /* sticky escalonado: cada card para 1rem mais abaixo que o anterior, então
     o de baixo sobe e cobre o de cima deixando só uma faixa dele à mostra.
     É o mecanismo do Clay — a pilha de cards que se sobrepõem no scroll. O
     z-index cresce junto, senão o card que chega passaria POR BAIXO. */
  position: sticky;
  top: var(--case-top, 5.5rem);
  /* A sobreposição é feita com margem negativa no TOPO do card de baixo, e
     não no pé do de cima (ver a regra `.home-case + .home-case` adiante).
     Encostados, os dois se tocam borda com borda em algum ponto do scroll, e
     essa junção lê como duas caixas empilhadas numa lista — não como uma
     pilha. Puxando o de baixo para dentro do de cima, existe sobreposição em
     TODO momento, inclusive com a página parada. */
  margin-bottom: 0;

  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  /* stretch e não center: com `center` a coluna da arte fica com altura
     automática, e como o palco pede `height: 100%` de um pai sem altura
     definida, a conta fecha em ZERO — a coluna inteira sumia. O texto se
     centraliza sozinho, por dentro (.case-texto). */
  align-items: stretch;
  gap: clamp(1.25rem, 2.4vw, 2.5rem);

  /* O card virou moldura com padding: o palco agora é um BLOCO DENTRO DO
     BLOCO, com raio próprio, e o tint aparece como margem em volta dele.
     Era `overflow: hidden` com o palco sangrando na borda — peça só. */
  padding: var(--case-pad);
  /* A faixa invadida vira PADDING, não conteúdo. Sem isto o card de baixo
     entrava por cima do pé do palco e cortava a peça em resina do de cima —
     e é justamente o palco que não pode ser tocado, porque é onde mora a
     marca do cliente. Com a folga, o que o próximo card cobre é só tint
     vazio, exatamente como no Clay: lá o botão e a imagem terminam bem
     antes da borda de baixo, e a sobra é o que sofre a sobreposição. */
  padding-bottom: calc(var(--case-pad) + var(--case-sobrepor));
  /* A altura sobe junto: a faixa que o card de baixo come sai do pé do de
     cima, e sem compensar isso o palco perderia altura útil. */
  min-height: clamp(27rem, 46vw, 37rem);

  background: var(--tint);
  border: 0;
  border-radius: 28px;
  overflow: visible;
}
/* O ponto de parada, derivado e não digitado: altura da pílula do header
   (64px, fixa em style.css) mais uma folga. O valor solto de antes (5.5rem)
   escondia essa conta — quem mexesse na altura da barra não teria como saber
   que os cards dependiam dela, e a folga sumiria sem aviso.

   A folga existe porque a barra é translúcida com blur: sem ar embaixo dela,
   o card grudado aparece borrado POR TRÁS do header e os dois lêem como uma
   coisa só. É o gap que o Clay tem entre a barra e o card parado. */
.home-cases {
  --header-h: 64px;
  --case-folga: clamp(1.5rem, 2.6vw, 2.25rem);
  --case-degrau: 1rem;   /* quanto cada card para abaixo do anterior */
  /* quanto o card de baixo invade o de cima, em repouso */
  --case-sobrepor: clamp(2.5rem, 5vw, 4.5rem);
  --case-pad: clamp(1.25rem, 2.2vw, 1.75rem);
}
/* O último card: padding simétrico, e nada sobe por cima dele.

   Duas tentativas anteriores falharam, e as duas por motivos opostos:

   · encurtá-lo (padding normal) fez com que terminasse ~4,5rem ACIMA do card
     anterior, que continua grudado atrás — sobrava uma faixa da cor da V.tal
     por baixo do Ocyan;
   · deixar os depoimentos subirem por cima dele cobria a folga, mas o
     chapado escuro cortava o card reto, sem raio, e os dois liam como uma
     emenda em vez de duas peças.

   O que fecha os dois é a correção do containing block (ver .home-cases): com
   a seção terminando no pé deste card, a V.tal não tem mais para onde
   escorregar, e a altura do último deixou de segurar o card anterior no
   lugar. Só então ele pôde voltar a ter padding simétrico — a reserva de
   baixo existia para ser coberta, e aqui não há nada por cima. */
.home-case:last-child {
  padding-bottom: var(--case-pad);
}

/* ─── Por que a margem negativa vive no TOPO e não no pé ───
   Um elemento sticky pode deslizar até que seu retângulo, JÁ SOMADO ÀS
   PRÓPRIAS MARGENS, encoste no pé do containing block. Com `margin-bottom:
   -4,5rem`, a V.tal ganhava exatamente 4,5rem de corda a mais: o pé dela
   podia passar 4,5rem ALÉM do fim da seção, e como o Ocyan termina ali, o
   que sobrava embaixo do último card era a faixa âmbar do penúltimo.

   Era esse o bug que sobreviveu a fechar o padding da seção e a igualar as
   alturas dos cards — nenhuma das duas coisas mexia na corda. Movida para o
   topo do card seguinte, a sobreposição é a mesma e nenhum card ganha folga
   além do container.

   `+` e não `:not(:first-child)`: só há margem onde há um card ANTES para
   invadir. O primeiro encosta no respiro da seção, como deve. */
.home-case + .home-case {
  margin-top: calc(var(--case-sobrepor) * -1);
}

.home-case:nth-child(1) { --case-top: calc(var(--header-h) + var(--case-folga));                            z-index: 1; }
.home-case:nth-child(2) { --case-top: calc(var(--header-h) + var(--case-folga) + var(--case-degrau));       z-index: 2; }
.home-case:nth-child(3) { --case-top: calc(var(--header-h) + var(--case-folga) + var(--case-degrau) * 2);   z-index: 3; }
.home-case:nth-child(4) { --case-top: calc(var(--header-h) + var(--case-folga) + var(--case-degrau) * 3);   z-index: 4; }

/* Alterna o lado da foto. `order` e não `direction`: direction inverteria
   também o alinhamento do texto dentro da coluna. */
.home-case:nth-child(even) .case-arte { order: -1; }

.case-texto {
  padding: clamp(1rem, 2.6vw, 2.5rem);
  display: flex;
  flex-direction: column;
  align-items: start;
  /* O bloco de texto no meio da altura do card — é o que o `align-items:
     center` do grid fazia antes de ser trocado por stretch (que a coluna da
     arte precisa). Feito aqui, cada coluna resolve o próprio alinhamento. */
  justify-content: center;
}

/* Tag de segmento. O briefing mostra em mono; aqui vai na pill de sistema
   (Inter, caixa alta, tracking zero) porque mono + caixa alta + tracking
   é o combo vetado em kb/design.md §7 — é o que dá cara de gerado, e o
   projeto se define por fugir disso. A informação é a mesma. */
/* A tag em duas pílulas sobrepostas: SEGMENTO na frente, em cor cheia, e o
   NOME DO CLIENTE atrás, no tom lavado, entrando por baixo dela. Era um eco
   decorativo (três círculos em box-shadow); virou informação sem mudar de
   forma — o mesmo desenho passou a carregar o dado que faltava no card
   depois que o logo saiu do topo.

   A sobreposição é o mecanismo: a pílula de trás avança 1.15rem por baixo da
   da frente, e é o padding-left extra dela que salva o texto de ser comido.
   Caixa alta nas duas (herdada de .pill) — a segunda é continuação da
   primeira, não um segundo componente. */
.case-tag {
  display: inline-flex;
  align-items: center;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  /* o <p> vira só o trilho das duas pílulas */
  padding: 0;
  background: none;
}
.case-tag-seg,
.case-tag-cli {
  font-size: .6875rem;
  letter-spacing: .14em;
  padding: .5rem 1.125rem;
  line-height: 1;
}
.case-tag-seg {
  position: relative;
  z-index: 1;
  background: var(--acento);
  color: #fff;
}
.case-tag-cli {
  margin-left: -1.15rem;
  padding-left: 2rem;
  background: var(--eco);
  color: var(--tinta);
}

.case-titulo {
  font-size: clamp(1.5rem, 2.9vw, 2.25rem);
  line-height: 1.14;
  letter-spacing: -.028em;
  color: var(--tinta);
  max-width: 20ch;
  text-wrap: balance;
}
/* A virada de cor no meio da manchete: a primeira oração em tinta, a segunda
   no acento do cliente. O corte não é decorativo — cai onde a frase muda de
   sujeito para resultado, que é a parte que o card está vendendo. */
.case-titulo-eco { color: var(--acento); }

/* 8px do título, como manda o ritmo vertical: o texto que o título abre
   fica colado nele e longe do que veio antes. */
.case-desc {
  margin-top: .75rem;
  font-size: .9375rem;
  line-height: 1.65;
  color: var(--corpo);
  max-width: 42ch;
}

/* CTA só na seta diagonal em box, a mesma da vitrine (.vitrine-ir) — box de
   raio 12, contorno em currentColor, ↗. Reusar em vez de desenhar uma
   segunda: é o mesmo gesto ("sair daqui para o case") nos dois lugares da
   home, e duas formas para o mesmo gesto lê como dois componentes.

   Sem rótulo (decisão do Thiago, 25/08): o card inteiro já é sobre um case
   e a manchete diz qual — "Ler história completa" repetia quatro vezes o
   que o contexto entrega. O nome do destino vive no `aria-label`, que é
   onde ele faz falta de verdade: leitor de tela anuncia "Ler o case da
   Tenda", não uma seta muda. */
.case-ir {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  color: var(--acento);
  text-decoration: none;
}

/* O RÓTULO VOLTOU (26/08, pedido do Iago na revisão da v3). A decisão de
   25/08 tirou o texto por repetição — quatro "Ler história completa" numa
   página que já é só sobre cases. O que o Iago apontou é outra coisa: sem
   rótulo, a seta não LÊ como botão, e o alvo de clique fica pequeno demais
   para o gesto mais importante da página.

   O texto é "Ler estudo de caso" e não "Ler história completa": é o mesmo
   nome que o item do menu passa a ter, e o vocabulário do funil B2B — o
   comitê de compras pede "estudo de caso", não "história".

   A ORDEM É SETA E DEPOIS TEXTO (Thiago, 26/08): com o texto na frente, a
   seta virava pontuação no fim da linha; com o box na frente, ele é a
   âncora visual e o rótulo explica o que ele faz.

   Fora do box e não dentro dele: o quadrado de raio 12 com a onda diagonal
   é o mesmo componente da vitrine (.vitrine-ir), e engordá-lo numa pílula
   criaria uma segunda forma para o mesmo gesto. O rótulo se apoia nele. */
.case-ir-rotulo {
  font-family: var(--body);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.01em;

  /* O RÓTULO NÃO SE MEXE NO HOVER (Thiago, 26/08). Tinha um
     `translateX(2px)` aqui, pela ideia de que o texto acompanhasse o
     sentido da seta — mas com quatro cards na pilha o que se vê é a página
     inteira escorregando para a direita a cada passagem do mouse.

     QUEM RESPONDE AO HOVER É O SUBLINHADO, no mesmo mecanismo dos links do
     rail (style.css §rail-facts): gradiente de 1px e não `text-decoration`,
     porque a LARGURA de um text-decoration não anima.

     AQUI ELE ENTRA, ao contrário do rail, onde a linha está no repouso e
     sai (Thiago, 26/08). A diferença é o que cada um precisa provar: no
     rail o sublinhado é a única affordance de um texto solto no meio da
     leitura, então ele tem de estar lá em repouso. Este rótulo já está
     colado num box com contorno e seta — a affordance está desenhada — e a
     linha entra como resposta, não como aviso.

     Cresce da ESQUERDA para a direita (`background-position: 0 100%`), que
     é o mesmo sentido da onda subindo dentro do box ao lado. Os dois
     acontecem lado a lado no mesmo gesto, na mesma duração (.42s) e na
     mesma curva — tempos ou direções diferentes leriam como dois eventos. */
  text-decoration: none;
  padding-bottom: 2px;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: 0 100%;
  transition: background-size .42s var(--ease);
}
.case-ir:hover .case-ir-rotulo,
.case-ir:focus-visible .case-ir-rotulo {
  background-size: 100% 1px;
}
.case-ir-box {
  position: relative;
  z-index: 0;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid currentColor;
  background: transparent;
  font-size: 1.125rem;
  line-height: 1;
  overflow: hidden;
  /* Mesma duração e mesma curva da onda, sem atraso: o glifo clareia NO
     RITMO do preenchimento, não depois dele (pedido do Thiago, 25/08).
     Havia um delay de .16s aqui, para a seta só virar branca depois que a
     onda passasse por baixo — mas isso lia como dois eventos em sequência,
     e o que se quer é um só. Sincronizados, a seta atravessa tons
     intermediários enquanto o fundo sobe atrás dela, e os dois chegam
     juntos. */
  transition: color .42s var(--ease);
}

/* O preenchimento entra NA DIAGONAL, no sentido da própria seta: parte do
   canto inferior esquerdo e sobe para o superior direito. É a mesma leitura
   que o ↗ já faz — o botão se preenche para onde ele aponta.

   Um bloco deslocado por `translate`, e não `background` trocando de cor: a
   troca é instantânea por natureza (é uma cor só) e não tem direção. Aqui a
   direção É o efeito. `inset: -1px` cobre a borda junto, senão sobra um fio
   da cor antiga no canto que a onda alcança por último.

   z-index negativo dentro do stacking context do próprio box: a onda passa
   por cima do fundo e por BAIXO do glifo, sem precisar embrulhar a seta num
   elemento só para ter camada. */
.case-ir-box::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  background: var(--acento);
  transform: translate(-100%, 100%);
  transition: transform .42s var(--ease);
}
.case-ir:hover .case-ir-box,
.case-ir:focus-visible .case-ir-box {
  color: #fff;
  /* A borda acompanha o preenchimento. Sem isto ela seguia currentColor e
     virava branca junto com o glifo — um anel branco por dentro do quadrado
     cheio, que é exatamente o que fazia o botão PARECER encolher no hover. */
  border-color: var(--acento);
}
.case-ir:hover .case-ir-box::before,
.case-ir:focus-visible .case-ir-box::before {
  transform: translate(0, 0);
}

/* ─── O palco do case ───
   O mesmo objeto em resina que abre a página de destino, no mesmo fundo.
   A cor NÃO vem de var(--client-stage): sem data-case no <body>, esse
   token serviria a paleta da Ocyan aos quatro cards. Ela vem de um --stage
   local, declarado por [data-cliente] logo abaixo — assim a cor do cliente
   fica presa dentro do palco, que é o único lugar da home onde a história
   dele já começou. Fora daqui a página segue acromática + laranja.

   Os valores são copiados do CSS do case, que é a fonte de verdade viva —
   três deles divergem da tabela do kb/design.md §2 (V.tal, MRS e Tenda
   foram remedidos e o documento não acompanhou). Ao reamostrar um vídeo,
   os dois lugares mudam juntos. */
.case-arte {
  position: relative;
  min-height: 100%;
  display: flex;
  border-radius: 20px;
}
.palco-card {
  width: 100%;
  /* Agora TEM raio, e menor que o do card (20 contra 28): o palco deixou de
     sangrar na borda e virou uma peça apoiada dentro da moldura de tint. É a
     regra de raio aninhado — o interno menor que o externo, senão o canto
     lê torto. A meia-lua que o comentário antigo temia não acontece porque
     há padding entre os dois; ela só aparece quando os raios se encostam. */
  border-radius: 20px;
  overflow: hidden;
  height: 100%;
  /* Piso próprio: nos cards de descrição curta a coluna de texto não estica
     o suficiente, e sem piso o palco encolhia junto até a peça em resina
     virar um selo. */
  min-height: 20rem;
  /* A entrada coreografada do hero (palco-entra em 1.35s, objeto-entra em
     1.75s) é sequência de CAPA e não se aplica aqui: são quatro palcos ao
     longo do scroll, e todos apareceriam juntos no load, antes de o leitor
     chegar em qualquer um. Desmontar a animação devolve opacidade cheia —
     ver a nota de kb/design.md §7 sobre `forwards` vencer declaração
     posterior. */
  animation: none;
  opacity: 1;
  background: var(--stage);
}
/* contain + scale, e não a largura em % que o hero usa. No hero o palco
   tem proporção fixa (3/2), então dimensionar o objeto pela LARGURA é
   previsível. Aqui a altura do palco vem do texto ao lado — quatro
   descrições de comprimentos diferentes dão quatro caixas diferentes — e
   a mesma régua de largura faria o objeto encolher verticalmente nos
   cards altos, deixando faixas largas de palco vazio em cima e embaixo.
   Com contain o vídeo se encaixa na caixa que houver, e a escala amplia a
   partir daí sem nunca decepar o símbolo. */
/* Mesma régua por cliente da vitrine, e pela mesma razão — ver a tabela de
   medidas adiante. O que muda aqui é o centro: no card não há texto por cima,
   então a peça fica no meio da caixa e só o desvio próprio do arquivo é
   corrigido. A folga em volta é o palco: peça encostando nas quatro bordas
   perde a leitura de objeto sobre um fundo e vira recorte. */
.palco-card .objeto {
  animation: none;
  opacity: 1;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  transform:
    translate(-50%, -50%)
    translate(var(--dx, 0%), 0%)
    scale(var(--escala, .78));
}

/* Os quatro palcos, com a régua de cada peça. Medido em `-card.png`, que é o
   mesmo quadro do vídeo:

     case    quadro       peça (px)      da altura   centro
     Tenda   1200x675     632 x 512        76%       centrado
     MRS     1200x675     872 x 434        64%       centrado
     Ocyan    900x900     704 x 702        78%       centrado
     V.tal   1200x898     708 x 478        53%       +3,8% / +3,1%

   Essa tabela explica como as escalas NASCERAM — inversamente proporcionais
   à fração da altura, normalizadas pelo Ocyan — mas não descreve mais os
   valores em uso. Os quatro foram reajustados a olho pelo Thiago em 25/08,
   já dentro do card grande (Tenda .80→.96, MRS .95→.82, V.tal 1.15→1.32,
   Ocyan .78→.92), e a proporcionalidade original se perdeu aí.

   Ou seja: se um vídeo for reexportado, remedir o bounding box do alpha de
   `-card.png` devolve o valor PROPORCIONAL, que não é o valor certo. O
   caminho é reajustar a olho no card, como foi feito aqui. */
[data-cliente="tenda"] { --stage: #E20721; --escala: .96; }
[data-cliente="mrs"]   { --stage: #BDD7F0; --escala: .82; }
.home-case[data-cliente="ocyan"] { --stage: #B3E0F5; --escala: .92; }
[data-cliente="vtal"]  { --stage: #F9BD1C; --escala: 1.32; --dx: -2.5%; --dy: -9.5%; }

/* ─── A escala de cor de cada cliente ───────────────────────────────────
   (decisão do Thiago, 25/08: os tons de antes estavam lavados demais perto
   do Clay, que trabalha o card inteiro DENTRO da cor — não é cor pontuada
   sobre branco, é uma família inteira, do fundo à tinta do texto.)

   Cinco degraus da mesma matiz, e nada de cinza neutro dentro do card:

     --tint    fundo do card       ~95% de luz, saturado o bastante para ler
                                   como cor e não como branco sujo
     --eco     pílula do cliente   ~85%, o degrau que separa as duas pílulas
     --acento  2ª parte do título, pílula do segmento, seta
     --corpo   a descrição         escuro TINGIDO, não #525252 — cinza neutro
                                   sobre fundo colorido lê como sujeira
     --tinta   1ª parte do título  quase preto da matiz; é o que dá o salto
                                   de contraste que faltava

   `--stage` continua sendo a cor CHEIA da marca, medida do vídeo, e não
   entra nesta escala: ele é o fundo do palco e a liga com a página do case.

   Contrastes medidos sobre --tint (AA pede 4.5 para texto normal, 3 para
   grande): título 12,3–13,5 · acento 4,8–6,0 · corpo 7,0–9,8 · branco sobre
   a pílula do segmento 5,4–6,9. O nome do cliente vai em --tinta e não em
   --acento: em corpo pequeno e caixa alta sobre --eco, o acento ficava em
   4,1–4,3 e não passava. Ao remexer qualquer valor aqui, é essa tabela que
   precisa ser refeita — não o olho.                                      */
.home-case[data-cliente="tenda"] {
  --tint: #FBE9EB; --eco: #F5C9CE; --acento: #C1061C; --corpo: #5C2A30; --tinta: #4A0710;
}
.home-case[data-cliente="mrs"] {
  --tint: #E6F0FB; --eco: #C3DCF4; --acento: #1B5B9E; --corpo: #33506E; --tinta: #0B2A4A;
}
.home-case[data-cliente="vtal"] {
  --tint: #FDF3DA; --eco: #F6E1A6; --acento: #8F6207; --corpo: #5E4715; --tinta: #3D2A05;
}
.home-case[data-cliente="ocyan"] {
  --tint: #E2F2FA; --eco: #BCDFF0; --acento: #0E6C93; --corpo: #2C5567; --tinta: #052F42;
}

/* ═══════════ 4. DEPOIMENTOS ═══════════
   A única superfície não-branca da página. Chapado em --ink, a tinta que
   já existe no sistema — não um cinza novo, e não elevação: o sistema
   segue sem sombra de UI (kb/design.md §6). */
.home-vozes {
  /* Fecha a pilha: sem contexto próprio, a seção subiria por baixo dos cards
     sticky e eles ficariam grudados no topo em cima do chapado escuro. Com
     z-index acima do último card (4), ela cobre a pilha ao chegar — que é o
     mesmo movimento que os cards fazem entre si. */
  position: relative;
  z-index: 5;
  /* O intervalo entre a pilha e o chapado mora aqui, e não no padding da
     seção de cases — ver a nota em .home-cases sobre o alcance do sticky. */
  margin-top: var(--ritmo-secao);
  background: var(--ink);
  color: var(--paper);
  padding-block: var(--ritmo-secao);
}

.vozes-titulo {
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -.028em;
  max-width: 20ch;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  color: var(--paper);
}
/* A serifada em itálico é a voz de destaque do sistema — a mesma do hero
   do case e das citações. É o fio que amarra a home ao registro sem
   repetir o marca-texto, que é do cliente. */
.vozes-titulo em {
  font-family: var(--sans);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.012em;
}

/* Duas colunas com align-items:start — os quatro depoimentos têm de uma a
   cinco linhas, e esticá-los para a altura da linha abriria vão morto
   embaixo dos curtos (Gerdau, Globo). Cada card termina onde o texto
   termina. */
.vozes-grade {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2rem);
  align-items: start;
}

/* Hairline branca a 14%: sobre o chapado escuro a divisória do sistema
   (#E0E0E0) seria clara demais e o card viraria uma caixa desenhada. O
   papel é o mesmo — marcar limite sem virar superfície. */
.voz {
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 18px;
  padding: clamp(1.5rem, 2.6vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Altura fixa e largura livre, pela mesma razão da caixa de marca do card:
   comparar por área de tinta. A da Azul é colorida e as da Gerdau e da
   Ânima são brancas — é o arquivo que existe, e sobre o escuro as três
   convivem. Sobre branco, duas delas sumiriam: é uma das razões de esta
   seção ser escura. */
.voz-logo {
  height: 1.5rem;
  width: auto;
  max-width: 8rem;
  object-fit: contain;
  object-position: left center;
}

.voz blockquote p {
  font-size: .9375rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, .78);
}
.voz blockquote p + p { margin-top: 1rem; }
/* O negrito é do texto original do cliente — ele marca onde o próprio
   depoente pôs o peso. Em branco cheio para o contraste existir. */
.voz blockquote strong {
  font-weight: 600;
  color: var(--paper);
}

/* Empurrado para a base do card: com alturas diferentes entre os quatro,
   a assinatura ancorada embaixo é o que dá uma linha de leitura comum. */
.voz-quem {
  margin-top: auto;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .14);
  display: flex;
  align-items: center;
  gap: .75rem;
}
.voz-quem img {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}
.voz-quem p {
  font-size: .8125rem;
  line-height: 1.4;
}
.voz-quem strong {
  display: block;
  font-weight: 600;
  color: var(--paper);
}
.voz-quem span {
  color: rgba(255, 255, 255, .55);
}

/* ═══════════ 5. FECHAMENTO ═══════════ */
.home-cta {
  padding-block: var(--ritmo-secao);
  text-align: center;
}
.cta-titulo {
  font-size: clamp(1.75rem, 3.6vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -.028em;
  max-width: 24ch;
  margin-inline: auto;
}
.cta-titulo em {
  font-family: var(--sans);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.012em;
}
/* Herda .btn-contato e só cresce: no header o botão tem 36px porque divide
   a barra com a nav; aqui ele é o único elemento de ação da tela e precisa
   do alvo de toque de 44px que kb/design.md §8 exige no mobile. */
.btn-cta {
  margin-top: 2rem;
  height: 48px;
  padding-inline: 1.75rem;
  font-size: 1rem;
  justify-self: center;
}

/* ═══════════ RESPONSIVO ═══════════ */

/* Faixa de logos em duas linhas de três antes de o card quebrar: seis
   slots numa tela média ficam com 90px cada, estreitos demais para um
   logo horizontal. */
@media (max-width: 900px) {
  .vozes-grade { grid-template-columns: minmax(0, 1fr); }
}

/* A vitrine vira rolagem horizontal por gesto. O trilho de pílulas depende de
   largura para a que abre ter onde abrir: abaixo de ~760px a ativa fica menor
   que o próprio texto dela, e as três fechadas viram três riscos de cor. Com
   scroll-snap o leitor arrasta, que é o gesto que ele já espera nessa
   largura. */
@media (max-width: 760px) {
  .vitrine-trilho {
    height: 22rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .vitrine-trilho::-webkit-scrollbar { display: none; }
  .vitrine-item,
  .vitrine-item.is-ativa {
    flex: 0 0 82%;
    scroll-snap-align: center;
  }
  /* Todas mostram a peça: não há mais "fechada" quando todas têm a mesma
     largura, e a fatia sem símbolo passaria a ler como card vazio. */
  .vitrine-item .vitrine-palco .objeto {
    height: 72%;
    width: 100%;
    top: 38%;
    object-fit: contain;
    transform:
      translate(-50%, -50%)
      translate(var(--dx, 0%), var(--dy, 0%))
      scale(var(--escala, .78));
  }
  .vitrine-item .vitrine-topo { opacity: 1; transform: none; }
  .vitrine-item .vitrine-corpo { opacity: 1; transform: none; }
  .vitrine-item .vitrine-ir { opacity: 1; pointer-events: auto; }
}

/* Em coluna estreita não há volta em torno do texto: o espalhamento que não
   cobrisse a frase passaria da largura da tela. As cápsulas viram uma linha
   abaixo dela — mesmas cápsulas, mesma ordem, entrando na mesma cadência, só
   que sem percurso. */
@media (max-width: 760px) {
  /* Em coluna estreita o cluster e a frase ocupariam o mesmo lugar: a malha
     é ancorada à direita e, com a tela dessa largura, "à direita" é em cima
     do texto. O hero vira dois tempos verticais — luz em cima, frase no pé —
     e é para isso que o conteúdo desce para o fim da caixa. */
  .hero-frase { align-items: end; }
  .hero-malha { --cel: clamp(46px, 15vw, 68px); }
  .hero-palco {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2.5rem;
  }
  .hero-orbita {
    position: static;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
  }
  .orb-slot { position: static; }
  .orb-ponto { display: none; }
  .hero-cel {
    position: static;
    transform: scale(.6);
    animation: cel-simples .55s var(--ease-cena) calc(1s + var(--i) * .08s) forwards;
  }
  .hero-cel:hover { scale: 1.06; }
  @keyframes cel-simples {
    from { opacity: 0; transform: scale(.6); }
    to   { opacity: 1; transform: scale(1); }
  }
  .hero-titulo { max-width: 20ch; }
}

/* A vitrine vira rolagem horizontal por gesto. O trilho de pílulas depende de
   largura para a que abre ter onde abrir: abaixo de ~760px a ativa fica menor
   que o próprio texto dela, e as três fechadas viram três riscos de cor. Com
   scroll-snap o leitor arrasta, que é o gesto que ele já espera nessa largura. */
@media (max-width: 760px) {
  .vitrine-trilho {
    height: 22rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .vitrine-trilho::-webkit-scrollbar { display: none; }
  .vitrine-item,
  .vitrine-item.is-ativa {
    flex: 0 0 82%;
    scroll-snap-align: center;
  }
  /* Todas mostram o objeto: não há mais "fechada" quando todas têm a mesma
     largura, e a fatia de cor sem símbolo passaria a ler como card vazio. */
  .vitrine-item .vitrine-palco .objeto {
    object-fit: contain;
    transform:
      translate(-50%, -50%)
      translate(var(--dx, 0%), var(--dy, -9%))
      scale(var(--escala, .78));
  }
  .vitrine-item .vitrine-topo { opacity: 1; transform: none; }
  .vitrine-item .vitrine-corpo { opacity: 1; transform: none; }
  .vitrine-item .vitrine-ir { opacity: 1; pointer-events: auto; }
}

/* O card vira coluna única com a FOTO EM CIMA nos dois sentidos da
   alternância — o `order: -1` dos pares é revogado aqui. Em pilha, a
   alternância não comunica nada (não há lado), e o que sobra dela é um
   card em que o texto vem antes e outro em que vem depois: lê como
   inconsistência, não como ritmo. */
@media (max-width: 760px) {
  /* A pilha sai inteira: em coluna única cada card já tem altura de tela, e
     sticky aqui significaria um card travado no topo por scroll inteiro sem
     nada aparecendo por trás — o efeito depende de ver a borda do de baixo. */
  .home-case {
    position: static;
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    /* o gap volta: sem sobreposição, cards colados viram um bloco só */
    margin-bottom: 0;
    /* e a folga de baixo volta a ser simétrica: sem nada invadindo o pé do
       card, ela seria só vão morto */
    padding-bottom: var(--case-pad);
  }
  .home-case + .home-case { margin-top: 1rem; }
  .home-case:last-child { padding-bottom: var(--case-pad); }
  /* sem sticky, o containing block deixa de importar e o ritmo volta ao
     lugar de sempre */
  .home-cases { padding-block: var(--ritmo-secao); }
  .home-vozes { margin-top: 0; }
  .home-case:nth-child(even) .case-arte { order: 0; }
  /* 3/2, a mesma proporção do .pilha do hero: em pilha o palco volta a ser
     um bloco de largura cheia, que é a condição em que aquela medida foi
     calibrada. */
  .case-arte { min-height: 0; }
  .palco-card { aspect-ratio: 3 / 2; }
  .case-titulo, .case-desc { max-width: none; }
  .case-arte { order: -1 !important; }
}

@media (max-width: 560px) {
  .voz-quem { align-items: start; }
}

/* Sem movimento para quem pediu sem movimento. A home tem pouco — a
   entrada da manchete (herdada de style.css) e o hover do link — mas
   os dois passam por aqui. */
@media (prefers-reduced-motion: reduce) {
  .case-ir-box,
  .case-ir-box::before,
  .case-ir-rotulo { transition: none; }
  /* A pilha também é movimento — cards deslizando por cima uns dos outros é
     exatamente o parallax de que essa preferência tenta escapar. Sem sticky,
     os quatro viram uma lista comum e a informação segue inteira. */
  .home-case {
    position: static;
    margin-bottom: 1rem;
    padding-bottom: var(--case-pad);
  }
  .home-case + .home-case { margin-top: 1rem; }
  .home-case:last-child { padding-bottom: var(--case-pad); }
  /* sem sticky, o containing block deixa de importar e o ritmo volta ao
     lugar de sempre */
  .home-cases { padding-block: var(--ritmo-secao); }
  .home-vozes { margin-top: 0; }
  /* A coreografia de entrada e a flutuação somem inteiras: as cápsulas nascem
     já nos lugares e a frase já está lá. O conteúdo nunca dependeu da animação
     para existir — e a flutuação é justamente o tipo de movimento periférico
     contínuo de que a preferência tenta escapar. */
  .hero-cel {
    animation: none;
    opacity: 1;
    transform: translate(var(--x), var(--y)) translate(-50%, -50%);
  }
  .orb-ponto { display: none; }
  .hero-titulo { animation: none; opacity: 1; }
  /* A esteira é o único movimento autônomo da página — o que roda sem
     ninguém pedir. Para de vez, e não mais devagar: meio-termo aqui ainda
     é movimento periférico contínuo, que é exatamente do que a preferência
     está tentando escapar. */
  .vitrine-item,
  .vitrine-palco .objeto,
  .vitrine-topo,
  .vitrine-corpo,
  .vitrine-ir {
    animation: none;
  }
}

/* ═══════════ origem: css/home-v3.css ═══════════ */


/* ═══════════════════════════════════════════════
   PowerComm — HOME, variante v3: assimétrica em fundo escuro

   Carregada depois de home.css. Diferente da v2, esta variante tem HTML
   próprio: ela muda a ESTRUTURA do hero, não só a superfície. Da vitrine para
   baixo tudo continua vindo da home.css, sem cópia.

   Referência: o hero do Fellow. Três coisas o definem, e as três estão aqui:
   título à esquerda em peso alto, marcas à direita em degraus, e um brilho
   atrás do cluster que separa as duas metades sem divisória nenhuma.
   ═══════════════════════════════════════════════ */

/* A ALTURA DO CAMPO ESCURO É UMA VARIÁVEL porque dois lugares precisam
   concordar sobre ela: o fundo, que é pintado no body, e o hero, que é quem
   ocupa esse espaço. Se divergirem, sobra uma faixa clara embaixo ou o escuro
   invade a vitrine. */
.home-v3 {
  /* ENCOLHEU (26/08) para o primeiro card espiar na dobra. O hero mede
     MENOS que uma tela de propósito: é a folga que diz que há mais página
     abaixo, sem precisar de seta nem de "role para ver".

     Os dois números fazem trabalhos diferentes: o `100svh -` manda em tela
     baixa, o teto em rem manda em monitor alto — sem ele, numa tela de 1200
     o hero viraria um campo vazio de mil pixels com a frase perdida no meio.

     Este valor governa o hero E o campo escuro do ::before ao mesmo tempo,
     que é o motivo de ele existir como variável. */
  --hero-h: min(calc(100svh - 12rem), 41rem);

  /* O CAMPO É UM PSEUDO-ELEMENTO, e não o background do body.

     Ele precisa nascer em y=0: no fluxo o hero começa DEPOIS do header — que
     é sticky e ocupa seus 64px — então um fundo declarado no .hero-v3 deixa
     os primeiros 64px brancos, e a pílula de vidro escuro do header fica
     sobre papel branco. Era isso que fazia sumir tudo menos o botão laranja.

     Era `background-image` no body e virou pseudo para poder ter canto
     arredondado no pé — o canto saiu depois (ver abaixo), mas o ::before
     ficou: ele nasce em y=0, para onde o hero acaba, e é um elemento de
     verdade, então qualquer tratamento de borda ou máscara passa a ser
     possível sem mexer no body.

     EMPILHAMENTO SEM z-index NEGATIVO. Com `z-index: -1` o pseudo cai atrás
     do BACKGROUND DO BODY — o body só criaria um stacking context próprio se
     tivesse z-index, e sem ele o contexto é o do html. O campo escuro
     desaparecia sob o papel e a página inteira ficava branco sobre branco.
     Então o pseudo fica em z-index 0 e são os FILHOS do body que sobem. */
  position: relative;
  background-color: var(--paper);
}

.home-v3::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: calc(64px + var(--hero-h));
  background: #0B0B14;
  /* SEM CANTO NO PÉ (testado e descartado em 26/08). A curva de 28px, a
     mesma dos cards de case, deixava dois cantinhos de papel aparecendo nas
     pontas — e o card rosa que vem logo abaixo já tem raio próprio, então
     eram duas curvas concorrentes a poucos pixels uma da outra. O corte
     reto separa melhor os dois campos. */
  z-index: 0;
}

/* ─── A luz do canto: TESTADA E DESCARTADA (26/08) ───
   Feixes diagonais nascendo no canto superior esquerdo, na referência que o
   Thiago trouxe. Foram construídos aqui em `repeating-linear-gradient` com
   máscara radial e reprovaram: o resultado ficou longe da referência.

   O QUE NÃO SE REPRODUZ COM GRADIENTE: na referência os feixes têm núcleo
   quase branco e borda definida, são poucos e largos, e passam por cima de
   um fundo que já tem volume. O gradiente entrega o oposto — muitos feixes,
   difusos por igual e tingidos de uma cor só. Chegar lá pede uma imagem, não
   CSS.

   Não repropor em CSS sem esse ingrediente novo. O hero é tinta chapado. */

/* O header e o main sobem por cima do campo. Sem isto eles pintam na ordem
   do documento, e o ::before — que vem depois do background mas antes do
   conteúdo — cobriria a manchete.

   O HEADER NÃO ENTRA AQUI. Ele já é `position: sticky; z-index: 100` em
   css/style.css, o que basta para ele ficar acima do campo. Uma regra sua
   aqui com `position: relative` chegou a existir e o transformava em
   estático — a barra sumia no primeiro scroll. */
.home-v3 > main { position: relative; z-index: 1; }

/* Transparente: quem pinta é o body. */
.hero-v3 {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: var(--hero-h);
  display: grid;
  place-items: center;
  /* O TOPO É MAIOR QUE A BASE, e aqui isso DESCE o conteúdo: o hero é
     `place-items: center`, então o bloco se desloca metade da diferença
     entre os dois. Era o contrário (base maior), e o conjunto subia até
     encostar no header. */
  padding: clamp(5rem, 11vh, 8rem) var(--pad) clamp(2.5rem, 5vh, 4rem);
  background: transparent;
}

.hero-v3-grade {
  width: 100%;
  max-width: var(--shell-page);
  /* UMA COLUNA desde 26/08. A grade era 1.05fr / .95fr com o texto à
     esquerda e o cluster à direita; sem o cluster e com a manchete
     centralizada, a segunda coluna não tinha mais o que segurar. */
  display: grid;
  justify-items: center;
  /* SEM gap: ele valia 80px e era o vão entre as duas COLUNAS do layout
     antigo. Em coluna única virou um espaço fantasma somando à margem da
     faixa — quem manda na distância entre manchete e logos é ela, num
     lugar só. */
  gap: 0;
}

/* Branco cheio, sem degradê. O degradê da marca é da v1 e da v2, onde o fundo
   é papel; sobre o tinta ele perderia — as duas cores da marca são escuras o
   bastante para sumir contra o fundo, e clareá-las até funcionar deixaria de
   ser a paleta. Aqui quem carrega a cor é o brilho. */
.hero-v3-titulo {
  font-family: var(--body);
  font-weight: 600;
  /* Mesmas medidas da manchete da index.html — 1.16 de entrelinha e não
     1.08: em títulos deste corpo a linha apertada faz o bloco virar massa. */
  font-size: clamp(1.875rem, 4vw, 3.5rem);
  line-height: 1.16;
  letter-spacing: -.032em;
  max-width: 18ch;
  text-align: center;
  opacity: 0;
  animation: hero-sobe .9s var(--ease-cena) .15s forwards;
}

/* ─── O cluster ─── */
.hero-v3-marcas { display: flex; justify-content: center; }

/* Duas colunas de largura IGUAL, com a da direita descendo meio passo.

   As colunas eram `auto` e alinhadas por `start`, e isso é o que fazia o
   conjunto parecer solto: com larguras diferentes por logo, cada cápsula
   começava num ponto e as sobras viravam buracos irregulares entre elas.
   Colunas iguais dão a régua; a cápsula continua com a largura do seu
   conteúdo, mas centrada dentro da coluna, então o que varia é o contorno e
   não o alinhamento.

   O degrau nos pares é o da referência, e é ele que evita a leitura de tabela
   de parceiros. */
.cl {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.25rem;
  align-items: center;
  justify-items: center;
}
.cl-cel:nth-child(even) { margin-top: 2.5rem; }

.cl-cel {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.75rem;
  padding: .75rem 1.75rem;
  /* Raio moderado e não pílula: na referência a cápsula é retangular de canto
     macio. A pílula é a forma da v1, onde ela pousa sobre papel; sobre o
     tinta, com brilho por trás, o canto reto segura melhor a borda de luz —
     numa curva contínua a luz não tem onde virar. */
  border-radius: 14px;
  /* Vidro escuro com borda de luz: a mesma dupla camada de background da
     cápsula clara, com o fundo trocado. A borda usa --capsula-borda, que vive
     na home.css — o gradiente não é copiado aqui. */
  border: 1px solid transparent;
  background:
    linear-gradient(var(--cel-fundo, rgba(255, 255, 255, .07)),
                    var(--cel-fundo, rgba(255, 255, 255, .07))) padding-box,
    var(--capsula-borda) border-box;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(1.25rem) scale(.9);
  animation: cl-entra .7s var(--ease-cena) calc(.7s + var(--i) * .11s) forwards;
  transition: background .25s var(--ease), scale .3s var(--ease);
}
@keyframes cl-entra {
  from { opacity: 0; transform: translateY(1.25rem) scale(.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.cl-cel:hover {
  --cel-fundo: rgba(255, 255, 255, .13);
  scale: 1.05;
}

/* Zoom e não altura, pelo mesmo motivo da v1: os arquivos já saem com o peso
   ótico igualado, e altura fixa desfaria isso — na mesma altura a TIM
   renderiza 1,35x a área do Sicredi. Globo e XP levam um degrau a mais por
   serem os dois únicos símbolos do lote. */
.cl-cel img {
  zoom: .26;
  width: auto;
  height: auto;
  max-width: none;
  display: block;
}
.cl-cel:nth-child(4) img,   /* Globo */
.cl-cel:nth-child(5) img {  /* XP */
  zoom: .30;
}

/* ─── Header sobre o tinta ─── */
/* TODO ESTE BLOCO VALE SÓ DENTRO DO HERO, e é isso que o `:not(.pos-hero)`
   faz. Passado o campo escuro, a página volta a ser papel e o header em
   vidro claro sobre branco some — restava só o botão laranja flutuando.
   Sem a classe, o header volta sozinho ao estilo da index.html, que já vive
   em css/style.css: aqui não se redeclara o header claro, só se para de
   pintar o escuro.

   Quem põe e tira `.pos-hero` é js/home-v3.js. */
.home-v3:not(.pos-hero) .header-pill {
  background: rgba(255, 255, 255, .06);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
          backdrop-filter: blur(20px) saturate(150%);
  border-color: rgba(255, 255, 255, .14);
  box-shadow: none;
}
.home-v3:not(.pos-hero) .site-nav a { color: var(--paper); }

/* O CARD DO TELEFONE, NA HOME, E ESCURO (28/08). Sobre o hero a pagina e
   tinta, e um painel branco ali seria a unica superficie clara da dobra. O
   `.98` e o mesmo fundo do hero: o card le como parte dele, nao como algo
   colado por cima.

   A PILULA NAO MUDA — segue com o vidro a 6% da regra acima. Ela chegou a
   ficar solida quando o botao hamburguer era uma peca separada; com tudo de
   volta numa barra so, o card opaco basta. */
@media (max-width: 760px) {
  .home-v3:not(.pos-hero) .site-nav.is-open {
    background: rgba(11, 11, 20, .98);
    border-color: rgba(255, 255, 255, .14);
  }
  .home-v3:not(.pos-hero) .site-nav.is-open a { color: var(--paper); }
  .home-v3:not(.pos-hero) .site-nav.is-open a:active { background: rgba(255, 255, 255, .08); }
}
.home-v3:not(.pos-hero) .nav-toggle span { background: var(--paper); }

/* A troca é uma TRANSIÇÃO e não um corte: o header é sticky e a virada
   acontece no meio do gesto de rolar — trocado de uma vez, ele pisca. */
.home-v3 .header-pill { transition: background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); }
.home-v3 .site-nav a  { transition: color .3s var(--ease); }
.home-v3 .brand img   { transition: opacity .3s var(--ease); }

/* Os dois logos ocupam a mesma célula da grade — trocar por `display` faria a
   barra saltar de largura, porque o arquivo branco e o preto não têm
   exatamente a mesma proporção renderizada. */
.home-v3 .brand { display: grid; }
.home-v3 .brand img { grid-area: 1 / 1; }
.home-v3:not(.pos-hero) .brand-escuro { opacity: 0; }
.home-v3:not(.pos-hero) .brand-claro  { opacity: 1; }
.home-v3.pos-hero .brand-escuro { opacity: 1; }
.home-v3.pos-hero .brand-claro  { opacity: 0; }

/* ─── Responsivo ─── */
@media (max-width: 860px) {
  .hero-v3-grade {
    grid-template-columns: minmax(0, 1fr);
    gap: 3rem;
    justify-items: center;
    text-align: center;
  }
  .hero-v3-titulo { max-width: 20ch; }
  /* O brilho em coluna saiu junto com o do desktop (26/08) — este bloco
     existia só para reposicioná-lo quando o cluster descia. */
}

@media (max-width: 560px) {
  .cl { grid-template-columns: auto; justify-items: center; }
  .cl-cel:nth-child(even) { margin-top: 0; }
  .cl-cel:nth-child(4n) { justify-self: center; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-v3-titulo { animation: none; opacity: 1; }
  .cl-cel { animation: none; opacity: 1; transform: none; }
}

/* ─── As tintas sobre o tinta ───
   A manchete tem as mesmas duas partes da v1 — quem faz e o que consegue —
   mas invertidas para o fundo escuro: branco cheio na primeira, branco
   rebaixado na segunda. O .lin-eco da home é #8C8C8C, calibrado para
   3,36:1 SOBRE PAPEL; o mesmo cinza sobre #0B0B14 daria 4,6:1 mas leria como
   sujeira, não como hierarquia. O branco a 58% dá ~6:1 e continua sendo a
   mesma tinta da linha de cima, só com menos presença. */
.home-v3 .hero-v3-titulo .lin-forte { color: #FFFFFF; }
.home-v3 .hero-v3-titulo .lin-eco   { color: rgba(255, 255, 255, .58); }

/* O DEGRADÊ DA MARCA CLAREIA AQUI, e não é preferência: o percurso da home
   começa em #C52B26, que sobre este fundo dá 3,3:1 — passa raspando o
   critério de texto grande e some no primeiro terço do nome. Subindo a
   entrada para #E0651B e fechando em #FFB067, o degradê continua sendo o da
   marca e o nome inteiro fica legível. */
.home-v3 .hero-v3-titulo .lin-marca {
  background-image: linear-gradient(
    102deg, #E0651B 0%, #FE812D 38%, #FFB067 72%, #FE812D 100%);
}

/* ─── A faixa de marcas ───
   Uma caixa por marca: quadrada, canto arredondado, contorno de um fio só.
   O fio é branco a 10% e não uma cor fixa — sobre o tinta ele lê como aresta
   de vidro, e qualquer cinza opaco viraria um retângulo desenhado. */
.hero-v3-faixa {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(.75rem, 1.4vw, 1.25rem);
  /* Encolheu (26/08): o vão entre a manchete e a faixa era MAIOR que o que
     separava a manchete do header, então os dois liam como blocos
     independentes em vez de um grupo. Dentro de um grupo o espaço tem de ser
     menor que o das bordas — é a única coisa que diz que eles são a mesma
     coisa. */
  margin-top: clamp(3rem, 7vh, 5rem);

  /* O RITMO DO FIO MORA AQUI, num lugar só.

     --volta é quanto o degradê leva para dar uma volta completa numa caixa.

     UMA ACESA POR VEZ: --passo é igual à volta. Ele já foi menor, para a
     próxima entrar antes de a atual terminar, e o resultado foram três
     caixas acesas ao mesmo tempo — onda, não fio.

     A CONTINUIDADE VEM DO PONTO DE PARTIDA, não da sobreposição. A volta
     nasce e morre no CANTO SUPERIOR DIREITO (ver o keyframe): a caixa
     entrega o traço exatamente ali, e a seguinte — que está à direita — o
     pega no mesmo canto. Nascendo no topo, a entrega caía no meio da
     fileira e a passagem não apontava para lado nenhum. */
  --volta: 2.4s;
  --passo: var(--volta);
  --marcas: 6;
}

.fx-cel {
  /* Quadrada de verdade: é o formato da referência, e é ele que faz seis
     marcas de proporções muito diferentes (Sicredi 4:1, Globo 1:1) ocuparem
     o mesmo peso na fileira. */
  position: relative;   /* âncora do fio que dá a volta */
  width: clamp(4.5rem, 7.5vw, 6.5rem);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: clamp(.9rem, 1.6vw, 1.35rem);
  border-radius: clamp(1rem, 1.6vw, 1.4rem);

  /* ─── A borda iluminada por cima ───
     O fio não tem a mesma força nos quatro lados: ele acende no topo e se
     apaga antes de chegar ao pé, como se a caixa pegasse uma luz vinda de
     cima. É o que faz a peça ler como superfície com volume e não como
     retângulo desenhado.

     COMO: `border` não aceita gradiente, então a borda vira TRANSPARENTE e
     quem pinta são duas camadas de background com origens diferentes — o
     miolo em `padding-box`, o gradiente em `border-box`. A área que sobra
     entre as duas é exatamente a moldura de 1px.

     O MIOLO PRECISA SER OPACO. Com o fundo semitransparente que estava aqui,
     o gradiente da camada de baixo aparecia POR DENTRO da caixa e virava um
     borrão claro no topo do quadrado, em vez de um fio. #101018 é o tinta do
     hero um passo acima — a caixa continua existindo como superfície. */
  border: 1px solid transparent;
  background:
    linear-gradient(#101018, #101018) padding-box,
    linear-gradient(
      170deg,
      rgba(255, 255, 255, .38) 0%,
      rgba(255, 255, 255, .12) 34%,
      rgba(255, 255, 255, .04) 62%,
      rgba(255, 255, 255, .02) 100%) border-box;
  opacity: 0;
  /* Entram depois da manchete, em passo largo. O ritmo é o do Thiago:
     efeito lento lê como intenção, efeito rápido lê como carregamento. */
  animation: fx-entra .8s var(--ease-cena) calc(1.1s + var(--i) * .13s) forwards;
}

/* O logo se ajusta pela CAIXA, não pela largura: com `contain` o de 4:1 e o
   de 1:1 chegam ao mesmo limite ótico dentro do mesmo quadrado. */
.fx-cel img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* A peça monocromática é entregue em PRETO chapado e vira branca aqui. O
   `invert` funciona porque o arquivo é de uma cor só: num logo colorido ele
   devolveria o negativo, não o branco da marca. */
.fx-mono img { filter: invert(1); }

/* ─── A Globo entra JÁ BRANCA (26/08) ───
   O arquivo é `globo-branco.svg`, o mesmo desenho do `globo-2.svg` com o
   fill trocado para #FFFFFF por `sed`. Ele dispensa a classe `.fx-mono`: não
   há inversão nenhuma acontecendo, é vetor branco desenhado como vetor
   branco.

   As duas alternativas foram descartadas na tela, nesta ordem:

     filter: invert(1)   a borda da esfera serrilhava — o filtro obriga o
                         navegador a RASTERIZAR o elemento antes de inverter,
                         e o vetor se perde nesse passo
     mask-image          vetorial de verdade, mas a peça não renderizou na
                         página e não valia a caça ao motivo

   Trocar o desenho da Globo quer dizer gerar o branco de novo:
     sed 's/fill:#000000/fill:#FFFFFF/g' globo-2.svg > globo-branco.svg   */

/* ─── Ajuste óptico da Globo ───
   Ela é o único logo QUADRADO do conjunto: as outras cinco são deitadas e
   param na largura da caixa, enquanto a esfera para na ALTURA — e com o
   mesmo `contain` acaba com quase o dobro de área de tinta das vizinhas.

   O ajuste é por `scale`, como o das outras marcas da fileira: a caixa
   continua do mesmo tamanho e só a arte encolhe. O seletor é o arquivo, de
   propósito — trocar o SVG da Globo deve invalidar o ajuste, não herdá-lo em
   silêncio. */
.fx-cel img[src*="globo"] { transform: scale(.8); }

/* Os outros dois acertos ópticos da fileira (Thiago, 26/08). Aqui é `scale`
   e não padding porque um deles precisa CRESCER, e padding só encolhe — o
   efeito na tela é o mesmo, a caixa não se mexe nos dois casos.

   Gerdau: o arquivo traz o bloco do "GG" e a palavra numa faixa larga, e
   dentro dela o desenho ocupa pouco — chegava ótico menor que as vizinhas.
   TIM: três barras e três letras num arquivo curto, quase sem margem
   interna, então ele chegava maior. */
.fx-cel img[src*="gerdau"]  { transform: scale(1.09); }
.fx-cel img[src*="sicredi"] { transform: scale(1.05); }
.fx-cel img[src*="vale"]    { transform: scale(1.05); }
.fx-cel img[src*="xp-inc"]  { transform: scale(1.05); }
/* A TIM subiu de .92 para .97: ela ainda é a mais cheia dos arquivos
   deitados, mas com as vizinhas crescendo o recuo antigo passou a ler como
   buraco na fileira. */
.fx-cel img[src*="tim"]     { transform: scale(.97); }

/* O `.fx-xp` SAIU EM 28/08. Ele existia porque o wordmark da XP era o unico
   sem canal alpha — na verdade um JPEG renomeado para .png, desenho preto
   sobre fundo cinza claro — e `invert(1)` + `mix-blend-mode: screen` era o
   jeito de vazar o fundo sem editar o arquivo. O proprio comentario daqui
   previa a saida: "se algum dia entrar um xp-inc com alpha, esta regra sai
   junto".

   O arquivo agora e PNG RGBA de verdade, branco vazado como os outros cinco.
   A opacidade de cada pixel veio de quanto ele era escuro, entao as curvas do
   "p" e o ponto final mantiveram o antialiasing. */


/* ─── O fio que dá a volta ───
   O degradê da marca — o mesmo do nome PowerComm — percorre a borda de uma
   caixa por vez, na ordem da fileira, e recomeça na primeira quando acaba a
   última.

   UM ARCO NUM CÔNICO, E É O ÂNGULO QUE ANIMA. O gradiente cônico tem um
   trecho aceso e o resto transparente; girar `--ang` de 0 a 1 volta faz esse
   trecho passear pelos quatro lados. A alternativa óbvia — rotacionar o
   próprio pseudo-elemento — não serve: a máscara giraria junto e o anel
   sairia de cima do quadrado arredondado.

   O ANEL É FEITO DE MÁSCARA, não de borda: duas camadas iguais, uma limitada
   ao content-box, subtraídas uma da outra. O que sobra é a moldura de 1px.

   A SEQUÊNCIA É FEITA DE DELAY: o ciclo dura --passo × --marcas e cada caixa
   entra --passo depois da anterior, na ordem da leitura.

   AO MUDAR --passo OU O NÚMERO DE MARCAS, a fatia do keyframe muda junto —
   ela vale --volta dividido pelo ciclo. As variáveis ajustam duração e
   atraso sozinhas, mas o keyframe é fixo e não sabe fazer essa conta. */
@property --ang {
  syntax: "<angle>";
  initial-value: 0turn;
  inherits: false;
}

.fx-cel::before {
  content: "";
  position: absolute;
  /* -1px porque `inset: 0` para no PADDING box, ou seja, por dentro da borda
     transparente da caixa — o fio nasceria 1px para dentro do contorno. */
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  /* O PICO FICA EM 18% — é ele que o keyframe alinha com o canto. O resto
     das paradas é rastro: a cauda sai em alfa por uma faixa larga, em vez de
     cortar em transparente. Antes ela morria em 8% de volta e a luz parecia
     ter uma ponta reta; agora desbota por 25%, que é o que faz o fio ler
     como brilho e não como traço desenhado. */
  background: conic-gradient(
    from var(--ang),
    transparent 0%,
    rgba(224, 101, 27, .18) 6%,
    rgba(224, 101, 27, .65) 11%,
    #FE812D 15%,
    #FFB067 18%,
    #FE812D 22%,
    rgba(224, 101, 27, .55) 28%,
    rgba(224, 101, 27, .22) 36%,
    rgba(224, 101, 27, .06) 45%,
    transparent 55%,
    transparent 100%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;

  /* PAUSADO (26/08, a pedido do Thiago). Basta descomentar para voltar — o
     efeito inteiro continua montado: o cônico acima, o keyframe abaixo e as
     variáveis de ritmo em .hero-v3-faixa.

     Sem a animação o fio não aparece porque `opacity` já nasce em 0, então
     não é preciso desligar mais nada. */
  /* animation: fx-volta calc(var(--passo) * var(--marcas)) linear
                calc(var(--i) * var(--passo)) infinite; */
}

/* O ALVO É .125turn — o canto SUPERIOR direito, 1/8 da volta, que corre no
   sentido horário a partir do topo. Mas o número escrito aqui é .945, e a
   diferença é a armadilha deste efeito:

   --ang NÃO É ONDE O FIO BRILHA. Ele marca o início do gradiente cônico, e o
   trecho mais claro (#FFB067) está a 18% dele — o arco tem corpo, não é um
   ponto. Alinhar --ang com o canto deixa a CAUDA lá e o brilho um oitavo
   antes, que foi o primeiro erro. Por isso .125 − .18 = −.055, e a volta vai
   de −.055 a .945.

   AO MEXER NAS PARADAS DO GRADIENTE, este número muda junto: se o pico sair
   dos 18%, o fio deixa de terminar no canto.

   16,66% é --volta dentro do ciclo — um sexto, porque são seis marcas em
   revezamento. Este número é a tradução do --passo lá em cima: mexeu num,
   mexe no outro. */
/* A OPACIDADE ENTRA E SAI EM RAMPA. Ela ia de 0 a 1 num quadro só, nos dois
   extremos, e era isso que fazia a luz aparecer e sumir com estalo. As
   rampas são curtas — cerca de dois décimos de segundo cada — para o fio
   ainda chegar aceso ao canto de entrega; alongá-las mais faz o brilho
   apagar antes de chegar lá. */
@keyframes fx-volta {
  0%      { --ang: -.055turn; opacity: 0; }
  1.2%    { opacity: 1; }
  15.4%   { opacity: 1; }
  16.66%  { --ang:  .945turn; opacity: 0; }
  100%    { --ang:  .945turn; opacity: 0; }
}

/* Sem `@property` o navegador não sabe interpolar um ângulo e `--ang` fica
   travado no valor inicial: o arco pararia num canto e piscaria ali. Melhor
   não ter o efeito do que ter um pisca. */
@supports not (background: conic-gradient(from var(--ang), red, blue)) {
  .fx-cel::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fx-cel::before { animation: none; opacity: 0; }
}

@keyframes fx-entra {
  from { opacity: 0; transform: translateY(14px) scale(.92); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fx-cel { opacity: 1; animation: none; }
}

/* ─── A emenda do hero com os cases ───
   O dobro do respiro que a home principal usa. Lá o topo desta seção é curto
   de propósito: a borda do primeiro card precisa APARECER abaixo da manchete,
   dizendo que há mais página. Aqui não é preciso — o campo escuro já termina
   com um corte reto de borda a borda, e essa linha sozinha diz que uma coisa
   acabou e outra começou. Com o respiro curto, o card ficava colado no corte.

   ESCOPADO NA V3 de propósito: `.home-cases` mora em css/home.css e serve as
   duas páginas. Mexer lá mudaria a dobra da index.html junto. */
.home-v3 .home-cases {
  padding-block: clamp(1.5rem, 4vw, 3rem) 0;
}

/* ─── A manchete escrita a máquina: TESTADA E DESCARTADA (26/08) ───
   A frase era digitada palavra a palavra, com um cursor laranja piscando na
   última escrita, em js/home-v3.js. Funcionava — sem pulo de layout, com o
   degradê da marca preservado — e mesmo assim reprovou no olho.

   A manchete voltou a aparecer pronta, com o fade de `hero-sobe` que vem de
   css/style.css. Markup e script estão no histórico:

     git log --oneline -- js/home-v3.js css/home-v3.css                    */

/* ═══════════ OS DEPOIMENTOS — O MOSAICO (26/08) ═══════════
   Terceira forma no mesmo dia, e a razão de cada troca está no decisions.md:
   card com hairline sobre escuro (do index.html) → balão solto no papel →
   este mosaico. O feedback do Iago sobre a v3 foi que a seção lia como peças
   desconectadas; a referência que o Thiago trouxe para resolver isso foi a
   página de customers do Clay.

   O MECANISMO CENTRAL DA REFERÊNCIA É A DESIGUALDADE. Quatro cards iguais
   pedem quatro conteúdos equivalentes, e o nosso acervo não tem isso: só
   Azul e Ânima têm foto, só a Gerdau tem número com lastro, e as falas vão
   de um a dois parágrafos. No formato antigo essa diferença aparecia como
   defeito — cards de alturas tortas. Aqui ela é o que dá o ritmo.

   AS SUPERFÍCIES SÃO AS TRÊS QUE O SISTEMA JÁ TEM: papel, tinta e laranja.
   A paleta de cinco tons do Clay não foi copiada — seriam cores novas na
   marca, e isso é decisão do Iago, não da página. O laranja fica no card do
   número: é o único ponto da home onde "laranja = onde a PowerComm agiu"
   tem o que marcar.

   DUAS COLUNAS COM UM CARD ALTO E UM LARGO, e não masonry: a Azul ocupa as
   duas linhas da esquerda porque a foto pede vertical (o arquivo é 650×900),
   e a Ânima ocupa a largura inteira embaixo porque é o texto mais longo.
   Grade explícita e não `auto-flow: dense` — com quatro itens, deixar o
   navegador decidir a ordem é abrir mão do controle de vizinhança que a
   seção de cases já mostrou que importa. */
/* A SEÇÃO É PAPEL, revertendo o chapado escuro de css/home.css. Lá o escuro
   existia para os logos brancos (Gerdau e Ânima) terem onde pousar; aqui
   quem dá superfície é o card, e a página deixa de ter dois campos escuros
   — o hero e ela — com o miolo claro no meio. */
.home-v3 .home-vozes {
  background: var(--paper);
  color: var(--ink);
}
.home-v3 .vozes-titulo { color: var(--ink); }

.home-v3 .vozes-grade {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.4vw, 1.75rem);
  max-width: none;
  align-items: stretch;
}
.home-v3 .voz-alta  { grid-column: 1; grid-row: 1 / span 2; }
.home-v3 .voz-num   { grid-column: 2; grid-row: 1; }
.home-v3 .voz-fala  { grid-column: 2; grid-row: 2; }
.home-v3 .voz-larga { grid-column: 1 / -1; grid-row: 3; }

/* ─── O card ───
   Chapado sem contorno, como na referência: a cor É a borda. O raio 20 é o
   do balão que saiu — a única medida daquela rodada que sobreviveu, porque
   ela é do sistema e não do formato. */
.home-v3 .voz {
  border: 0;
  border-radius: 20px;
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;

}

/* A MALHA DE LINHAS SAIU (Thiago, 26/08). Ela chegou nos quatro cards,
   recuou para só o laranja e agora sai de vez: mesmo num card só, a textura
   competia com o número — que é o único conteúdo daquele bloco e vive de
   ler limpo. O código dela está no histórico:

     git log -p -- css/home-v3.css | grep -n "cel-voz"                     */

/* As três superfícies. A tinta é #242424 e não --ink (#1A1A1A): é a mesma
   escolhida para o balão, um grau acima do preto do texto para o card não
   ler como buraco na página. */
.home-v3 .voz-alta  { background-color: var(--bone); color: var(--ink); }
.home-v3 .voz-larga { background-color: var(--bone); color: var(--ink); }
.home-v3 .voz-fala  { background-color: #242424;     color: var(--paper); }

/* ─── O card da Gerdau ───
   VOLTA O LARANJA NO CAMPO E O LOGO EM PRETO (Thiago, 26/08). O laranja
   chegou a sair do card e virar só a cor do número, com o card em cinza e o
   logo na cor da marca: resolvia a vibração entre o azul-marinho e o
   laranja, mas **a seção perdia o ritmo** — com os quatro cards em cinza, a
   única variação de superfície virava o escuro da Globo, e o mosaico deixava
   de ser mosaico.

   Então o custo se inverte: a vibração do logo é um detalhe de um card, o
   ritmo é a seção inteira. Fica o campo laranja.

   O logo é o arquivo `-escuro` (branco vazado no acervo) INVERTIDO, que dá o
   preto — ~8,9:1 sobre o laranja, contra os 4,4:1 do azul-marinho original.
   O "GG" fica vazado e deixa passar a cor do card, que é o mesmo desenho que
   a referência do Clay faz nos cards de cor.

   As outras quatro tentativas, para não voltarem: branco (afundava),
   dessaturado (único logo fora da cor da marca), original puro (a vibração)
   e base branca sob o logo (virava etiqueta colada no card). */
.home-v3 .voz-num { background-color: var(--pc-orange); color: var(--ink); }
/* O LOGO DA GERDAU É O PRETO — o arquivo branco (`-escuro`) invertido.
   Fechado depois de rodar as seis versões na tela (Thiago, 26/08):

     branco vazado       o que o site institucional usa. Sobre o laranja
                         afunda: ~2,2:1, e o logo some antes do número
     original azul       ~4,4:1, passa na régua de 3:1 mas vibra com o
                         laranja — os dois matizes brigam
     dessaturado         resolve, mas vira o único logo fora da cor da marca
     base branca         o logo lê como etiqueta colada no card
     card em cinza       resolve tudo e a SEÇÃO perde o ritmo: quatro cards
                         claros, e o mosaico deixa de ser mosaico
     preto invertido     ~8,9:1. O bloco pesa, e é o preço aceito

   O "GG" fica vazado, deixando passar o laranja — que é o mesmo desenho dos
   cards de cor da referência. */
.home-v3 .voz-num .voz-logo { filter: invert(1); }
/* ─── A fala ───
   Corpo grande, como na referência — é ele que faz o depoimento ser o
   assunto do card em vez de legenda dentro dele. */
.home-v3 .voz blockquote {
  background: none;
  border-radius: 0;
  padding: 0;
}
.home-v3 .voz blockquote p {
  font-family: var(--body);
  font-size: clamp(1.0625rem, 1.5vw, 1.375rem);
  line-height: 1.4;
  letter-spacing: -.015em;
  color: currentColor;
}
.home-v3 .voz blockquote p + p { margin-top: .75em; }

/* O NEGRITO PERDE O PESO E VIRA COR CHEIA. Ele existe porque marca onde o
   próprio depoente pôs ênfase (verbatim do site), e isso não se mexe — mas
   em corpo 22px um trecho em 600 dentro de uma frase já grande vira segundo
   destaque disputando com o primeiro. Nas superfícies escuras ele sobe para
   branco cheio; nas claras, para a tinta. */
.home-v3 .voz blockquote strong { font-weight: 500; }
.home-v3 .voz-fala blockquote p { color: rgba(255, 255, 255, .82); }
.home-v3 .voz-fala blockquote strong { color: #FFFFFF; }
.home-v3 .voz-alta blockquote strong,
.home-v3 .voz-larga blockquote strong { color: var(--ink); }

/* ─── O card alto ───
   Ele não tem corpo próprio: a fala da Azul usa a mesma escala dos outros.

   CHEGOU A TER (26/08). Enquanto o card carregava a frase curta do site, o
   texto subia um degrau para sustentar duas linhas de grade sozinho. Com o
   verbatim do briefing de volta — dois parágrafos — o degrau viraria parede
   de texto: o que preenche a altura agora é o conteúdo, não a escala. */

/* ─── O palco do avião ───
   O CARD CONTINUA CINZA E A COR VIVE NUM BLOCO DENTRO DELE (Thiago, 26/08).
   O azul chegou a ser o fundo do card inteiro e voltou: pintar a peça toda
   dava um quarto card de cor numa seção que já tem o laranja e a tinta, e o
   texto do depoimento passava a ser lido sobre cor de cliente — que, pela
   regra de 25/08, é da história dele e não da fala.

   Num bloco, a cor faz só o que tem de fazer: ser o céu atrás do avião. É o
   mesmo desenho do palco no hero dos cases — retângulo de cor, raio menor
   que o do card, objeto flutuando dentro.

   O raio é 14 contra os 20 do card: palco com o mesmo raio do pai encosta
   nos cantos e lê como recorte do card, não como peça dentro dele. */
.home-v3 .voz-palco {
  flex: 1;
  min-height: 11rem;
  margin-top: clamp(1rem, 2vw, 1.5rem);
  border-radius: 14px;
  /* O CÉU É UMA IMAGEM, não mais um chapado (26/08). Gerado no Magnific no
     mesmo material das peças — nuvens em resina, poucas e nas bordas, com o
     centro do quadro deliberadamente vazio, que é onde o avião pousa.

     A cor chapada continua declarada por baixo: ela é o que se vê enquanto o
     JPG carrega, e é dela que vêm as bordas se a proporção do palco fugir da
     do arquivo (3:2). Amostrada do próprio céu — se trocar o arquivo,
     reamostrar, senão aparece um retângulo de tom diferente atrás. */
  background-color: #C3D8E5;
  background-image: url("../assets/clientes/azul/objeto/palco-ceu.jpg");
  background-size: cover;
  background-position: center;
  display: grid;
  place-items: center;
  overflow: hidden;
}
/* `contain` e não `cover`: a silhueta do avião é o assunto, e cortar asa ou
   cauda desmonta o objeto. A escala em 108% deixa ele encostar de leve nas
   bordas do palco, como no hero — objeto pequeno demais dentro de um campo
   de cor lê como selo, não como cena. */
.home-v3 .voz-objeto {
  display: block;
  width: 108%;
  height: 108%;
  object-fit: contain;
  object-position: center;
}

/* ─── O card-número ───
   Número grande, régua pontilhada, legenda em duas linhas — a estrutura do
   card do Pendo, apontada pelo Thiago.

   O DADO TEM LASTRO: "3 minutos" está na fala da própria Vanessa. A régua
   pontilhada é o único traço decorativo da seção e ela ganha isso por ser o
   único card cujo conteúdo é um dado. */
.home-v3 .voz-dado {
  font-family: var(--body);
  font-size: clamp(2rem, 3.4vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: 1;
  margin-top: clamp(1.25rem, 2.4vw, 2rem);
}
/* O numeral sozinho num degrau acima: é ele que se lê de longe, e "minutos"
   é a unidade. Sem isso a linha inteira vira um bloco de peso uniforme e o
   número deixa de ser o assunto. */
.home-v3 .voz-dado-n {
  font-size: 1.9em;
  letter-spacing: -.05em;
}
/* O SELETOR CARREGA `blockquote` DE PROPÓSITO. A legenda virou um
   <blockquote> quando passou a ser a fala verbatim da Vanessa, e
   `.home-v3 .voz blockquote { padding: 0 }` (0,2,1) vencia
   `.home-v3 .voz-dado-legenda` (0,2,0): o padding de baixo simplesmente não
   existia, e nenhum valor escrito aqui mudava a tela. Com o elemento no
   seletor a conta vira 0,3,1 e a regra passa a valer. */
.home-v3 .voz blockquote.voz-dado-legenda {
  background: none;
  border-radius: 0;
  /* O VÃO É O MESMO DOS DOIS LADOS DA RÉGUA (Thiago, 26/08). Era o mesmo
     valor nominal em cima e embaixo e não lia como tal: o `3` sobe a 1,9em
     dentro de uma caixa de linha de 1em, então o glifo transborda para
     baixo e come parte do vão de cima — o de baixo parecia menor por
     comparação. O acerto é óptico, e por isso o de baixo é maior no
     código: são os dois vãos VISTOS que têm de bater, não os declarados. */
  margin-top: 1.25rem;
  padding: 1.5rem 0 0;
  border-top: 1px dashed color-mix(in srgb, currentColor 45%, transparent);
  /* SEM max-width (26/08): tinha 34ch aqui e o bloco parava a meia altura da
     coluna, com a régua pontilhada morrendo no meio do card. Num card que já
     é estreito, a medida de leitura vem da própria coluna — limitar de novo
     é medir duas vezes. */
}
/* Corpo menor que o das outras falas: aqui quem é o assunto é o número, e a
   fala explica de onde ele veio. É a inversão de hierarquia que o card do
   Pendo faz — dado grande, linha de apoio miúda. */
.home-v3 .voz-dado-legenda p {
  font-size: .875rem;
  line-height: 1.55;
  letter-spacing: 0;
}

/* ─── A assinatura ───
   O RITMO É O DA REFERÊNCIA (Thiago, 26/08): avatar grande, nome em peso
   médio e cargo em CAIXA ALTA MIÚDA com tracking aberto. O contraste de
   escala entre a fala (22px) e o cargo (11px) é o que faz o rodapé ler como
   assinatura e não como mais uma linha de texto.

   Sem divisória: o card já é uma superfície fechada, e a régua que existia
   aqui era a costura de um card que tinha contorno. */
.home-v3 .voz-quem {
  margin-top: auto;
  padding-top: clamp(1.75rem, 3vw, 2.5rem);
  padding-left: 0;
  border-top: 0;
  gap: .875rem;
}
.home-v3 .voz-quem img {
  width: 3.5rem;
  height: 3.5rem;
}
.home-v3 .voz-quem p { font-size: .9375rem; }
.home-v3 .voz-quem strong {
  font-weight: 600;
  color: currentColor;
  margin-bottom: .125rem;
}
.home-v3 .voz-quem span {
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: color-mix(in srgb, currentColor 62%, transparent);
}

/* ─── Os logos ───
   Maiores que os 34px do formato anterior: na referência o logotipo abre o
   card com presença, e num card chapado ele é o que identifica a empresa
   antes da leitura. O ajuste óptico por arquivo continua no fim deste
   arquivo — ele é proporcional à faixa, então acompanha a altura nova. */
.home-v3 .voz-logo {
  display: block;
  width: auto;
  height: 2.5rem;
  max-width: 10.5rem;
  margin-bottom: clamp(1rem, 1.8vw, 1.5rem);
  object-fit: contain;
  object-position: left center;
}
.home-v3 .voz-logo-inverte { filter: invert(1); }

@media (max-width: 860px) {
  /* Uma coluna: a grade explícita precisa ser desfeita item a item, senão
     as regras de linha acima continuam valendo e o card da Azul segue
     tentando ocupar duas linhas que já não existem. */
  .home-v3 .vozes-grade { grid-template-columns: minmax(0, 1fr); }
  .home-v3 .voz-alta,
  .home-v3 .voz-num,
  .home-v3 .voz-fala,
  .home-v3 .voz-larga { grid-column: 1; grid-row: auto; }
}

/* ─── A largura da seção ───
   Os balões mediam --shell-page MENOS as duas margens, e ficavam 40px para
   dentro do header e dos cards de case — o mesmo desencontro que os cards já
   tinham corrigido em css/home.css. Pai com `padding-inline`, filho com
   `max-width` cheio: assim a borda do balão cai exatamente na borda do card
   de cima. */
.home-v3 .vozes-inner {
  max-width: calc(var(--shell-page) + var(--pad) * 2);
}

/* ─── Ajuste óptico, marca a marca ───
   Uma altura só não iguala quatro logotipos: o que o olho compara é ÁREA DE
   TINTA, e cada arquivo tem uma quantidade diferente de desenho dentro da
   mesma caixa. Os valores abaixo são calibrados um a um, contra o corpo do
   nome da pessoa ao lado — não há fórmula que os derive.

   O seletor é o próprio arquivo, e isso é de propósito: trocar o PNG de um
   cliente deve invalidar o ajuste dele, não herdá-lo em silêncio. */

/* O AJUSTE É POR PADDING, NÃO POR ALTURA. A caixa tem 34px em todos, senão o
   balão começa numa linha diferente em cada card; o padding encolhe a área
   de conteúdo e a arte encolhe junto, sem mexer no espaço que a peça ocupa.
   O valor é a metade da diferença entre 34 e a altura ótica desejada. */

/* Selo + palavra, sem tagline: é o mais cheio dos quatro. Arte em 24px. */
.home-v3 .voz-logo[src*="gerdau"] { padding-block: .3125rem; }

/* Palavra grande e símbolo colorido — a segunda mais pesada. Arte em 26px. */
.home-v3 .voz-logo[src*="azul"] { padding-block: .25rem; }

/* A esfera é o único símbolo QUADRADO do conjunto: na mesma altura das
   deitadas ela tem um terço da área delas, então quase não recua — e ganha
   respiro à direita, porque um objeto estreito colado no texto lê como
   desalinhado. Arte em 32px. */
.home-v3 .voz-logo[src*="globo"] {
  padding-block: .0625rem;
  margin-right: .375rem;
}

/* A Ânima carrega "EDUCAÇÃO" em corpo minúsculo dentro do arquivo, então o
   nome da marca ocupa pouco mais da metade da caixa: ela usa a faixa
   inteira. */
.home-v3 .voz-logo[src*="anima"] { padding-block: 0; }

/* A assinatura EMPILHADA foi testada e descartada em 26/08: igualava a
   silhueta dos quatro blocos, mas virava três andares embaixo de um balão
   que já é alto, e o cargo passava a correr a coluna inteira. Voltou a ser
   uma linha — avatar, nome, cargo. */

/* ─── As cores das empresas: FORA DE USO desde 26/08 ───
   Ficam registradas porque a decisão pode voltar — mas só com cor oficial de
   Globo e Ânima, que hoje não existe no acervo. Ver a nota no balão.

   --voz-tint   fundo do balão   ~95% de luz, saturado o bastante para ler
   --voz-tinta  corpo da fala    escura da mesma matiz, não preto neutro
   --voz-forte  o negrito        o salto dentro da própria matiz

   Contraste medido sobre --voz-tint: todos acima de 9:1, com folga sobre o
   4,5 que o corpo pede. */
.home-v3 .voz[data-cliente="azul"] {
  --voz-tint: #E8F1FB; --voz-tinta: #123A61; --voz-forte: #06284A;
}
.home-v3 .voz[data-cliente="gerdau"] {
  --voz-tint: #E9EFF6; --voz-tinta: #14395E; --voz-forte: #052642;
}
/* Derivada: o violeta que domina a esfera. */
.home-v3 .voz[data-cliente="globo"] {
  --voz-tint: #EFEBF8; --voz-tinta: #3A2D63; --voz-forte: #241A45;
}
/* Derivada: bege neutro quente, já que a marca só existe em preto. */
.home-v3 .voz[data-cliente="anima"] {
  --voz-tint: #F2EFE9; --voz-tinta: #40382C; --voz-forte: #27211A;
}

/* ─── O ritmo entre seções ───
   160px, e num lugar só. O vão vinha somado de dois: a margem da seção de
   vozes mais o padding dela, 90 + 90 = 180 — mexer em um deles dava metade
   do efeito e a conta ficava invisível para quem lesse qualquer um dos dois
   isolado.

   Na home principal a margem existe porque aquela seção é chapado ESCURO e a
   margem é papel entre dois campos. Aqui as duas são brancas, então a
   separação pode viver inteira no padding — e o `sticky` dos cards não se
   importa: o alcance dele termina no container deles, que é .home-cases. */
.home-v3 {
  --vao-secao: 160px;
}
.home-v3 .home-vozes {
  margin-top: 0;
  padding-block: var(--vao-secao);
}

/* ─── O vão entre o título e o primeiro depoimento ───
   O `home.css` traz `clamp(2.5rem, 5vw, 4rem)`, que chega a 64px em tela
   larga. Com a seção em papel claro e o logo do cliente abrindo o bloco, esse
   respiro passou a ler como buraco: o título perde a ligação com o que ele
   anuncia. Fixo em 48px — não é clamp de propósito, o valor foi escolhido
   olhando a tela grande, que é onde o vão incomodava. */
.home-v3 .vozes-titulo { margin-bottom: 3rem; }

/* ═══ Da largura de 761px para cima ═══

   Tudo daqui para baixo governa a PILHA STICKY dos cases, e só faz sentido
   onde ela existe. Em 760px o `home.css` desliga o sticky (`position: static`,
   `min-height: 0`, margens zeradas) porque em coluna única cada card já ocupa
   a tela e não há borda do de baixo para aparecer.

   Sem esta media query as regras abaixo vazavam para o telefone e DESFAZIAM
   esse desligamento — elas carregam depois e têm especificidade maior, então
   venciam o breakpoint. Medido em 390px: as alturas voltavam a 753/802/830/805
   e a compensação, que depende de altura igual, deixava de valer. */
@media (min-width: 761px) {

  /* ─── O degrau entre o último case e os depoimentos ───
     O `home.css` empilha DUAS medidas aqui: `margin-top: --ritmo-secao` mais
     `padding-block: --ritmo-secao` no topo. Em tela larga são 128 + 128 = 256px,
     e como as duas vêm do mesmo token nenhuma delas parece grande sozinha —
     o vão só aparece somado, na tela.

     Aqui vira UMA medida: margem zero, respiro no padding. Mexer numa só e
     deixar a outra teria repetido o problema em metade do tamanho. */
  .home-v3 .home-vozes {
    margin-top: 0;
    /* 120px MENOS os 16px de margem de compensação do último card (um degrau),
       que ficam abaixo dele no fluxo. O vão que o olho vê é a soma dos dois. */
    padding-top: 6.5rem;
  }

  /* ─── A folga entre o header e o card parado ───
     `--case-folga` é a distância em que o card sticky trava abaixo do header.
     Ela vinha de `home.css` em clamp(1.5rem, 2.6vw, 2.25rem) — 24 a 36px — e
     o card encostava demais no menu quando parava.

     Aumentar SÓ este token é seguro: os quatro `--case-top` são calculados a
     partir dele, então o degrau entre os cards não muda, a pilha inteira só
     desce junto. */
  .home-v3 .home-cases { --case-folga: clamp(2rem, 3.6vw, 3rem); }

  /* ─── O fim da pilha: todos param na mesma linha de base ───

   Um sticky solta quando não pode mais deslizar dentro do pai, e o instante
   disso é `fundo do pai − (top + altura + margem)`. Essa soma era DIFERENTE em
   cada card — tops escalonados pelo degrau, alturas ditadas pelo conteúdo — e
   por isso eles soltavam em ordens diferentes: o Tenda saía ~17px antes do
   Ocyan e subia por trás dele, aparecendo como faixa rosa acima do azul.

   A correção é fazer `top + altura` constante: CADA CARD ENCOLHE EXATAMENTE O
   DEGRAU QUE DESCEU. O primeiro trava mais alto e é o mais alto; o terceiro
   trava 32px mais baixo e é 32px mais baixo. Travados, os quatro terminam na
   mesma linha — nada assoma em cima nem embaixo — e como a soma é igual, eles
   soltam no mesmo pixel sem precisar de nenhuma compensação de margem.

   O ÚLTIMO VOLTA AO TOP DO PRIMEIRO. Dar a ele o top do terceiro não bastava:
   sobravam as bordas do primeiro e do segundo, que travam mais alto. O baralho
   se monta nos três primeiros e se fecha quando o último chega, cobrindo tudo.

   Tentativa anterior, descartada: alongar o ÚLTIMO em vez de encolher os de
   trás. Dava o mesmo alinhamento, mas deixava o último 32px mais alto que os
   outros e exigia margens de compensação em todos os quatro para reacertar o
   destrave. Encolher os cobertos é o mesmo número com metade das peças. */

.home-v3 .home-cases {
  /* DEGRAU DE 8px, não 16.

     O degrau é o que empurra a base para cima: o terceiro card encolhe dois
     degraus e não pode ficar menor que o próprio texto, então a base fica
     presa em `maior conteúdo + 2 × degrau`. O maior conteúdo da pilha é o
     Tenda/MRS, com 609px — com degrau de 16 a base ia a 641 e o último card
     ficava 32px mais alto que o terceiro.

     Pela metade, a variação de altura cai para 16px e o baralho continua, só
     com a borda visível mais fina. */
  --case-degrau: .5rem;

  /* acima de 609 + dois degraus (625), com folga para o texto crescer */
  --case-alt: 40rem;
}
.home-v3 .home-case:nth-child(1) { min-height: var(--case-alt); }
.home-v3 .home-case:nth-child(2) { min-height: calc(var(--case-alt) - var(--case-degrau)); }
.home-v3 .home-case:nth-child(3) { min-height: calc(var(--case-alt) - var(--case-degrau) * 2); }
.home-v3 .home-case:nth-child(4) {
  min-height: var(--case-alt);
  --case-top: calc(var(--header-h) + var(--case-folga));
}

.home-v3 .home-cases::after {
    content: "";
    display: block;
    height: clamp(16rem, 38vh, 24rem);
  }

}

/* ═══════════ origem: css/home-v5.css ═══════════ */


/* ═══════════════════════════════════════════════
   PowerComm — HOME, variante v5: o hero em camadas

   CARREGADA DEPOIS DA v3, E DEPENDE DELA. Aqui não há campo escuro, header
   sobre o tinta nem caixa de marca: tudo isso continua em css/home-v3.css e
   segue valendo, porque o <body> mantém a classe .home-v3. O que esta folha
   faz é sobrescrever o MIOLO do hero.

   O QUE MUDA EM RELAÇÃO À v3, e por quê (Thiago, 27/08):

   A v3 tinha manchete de quatro linhas e uma faixa de logos. Um bloco só de
   texto fazendo o trabalho de título E de descrição, e uma prova social muda
   embaixo. As duas referências que o Thiago trouxe — o hero escuro do
   `.design` e o do Deflexai — resolvem o mesmo problema com CINCO camadas em
   vez de duas:

     pílula curta → título de duas linhas → descrição → ação → prova

   É essa sequência que está aqui. A prova é a camada nova: três números com
   dono e um bloco de rostos, que é o "500K worldwide users" da primeira
   referência com o conteúdo que este projeto tem.

   REGRA DE CONTEÚDO, e ela é estrutural: TODO NÚMERO DO HERO É ATRIBUÍDO.
   Cada dado carrega o nome do cliente que o declarou, porque nenhum deles é
   agregado — somar clientes para chegar a um número maior inventaria um dado
   que ninguém disse. O lastro dos três está em content/.
   ═══════════════════════════════════════════════ */

/* O CAMPO ESCURO CRESCEU, e tinha de crescer: a v3 media 41rem com duas
   camadas dentro, e a v5 tem cinco. Mantido o desenho do valor da v3 — um
   `100svh -` que manda em tela baixa e um teto em rem que manda em monitor
   alto —, só com os dois números maiores.

   O hero continua medindo MENOS que uma tela de propósito: é a folga que diz
   que há página abaixo sem precisar de seta. */
.home-v5 { --hero-h: min(calc(100svh - 6rem), 52rem); }

/* Menos respiro no topo que a v3: lá o bloco era curto e precisava descer
   para não encostar no header; aqui ele já ocupa a altura. */
.home-v5 .hero-v3 { padding-top: clamp(4rem, 8vh, 6rem); }

/* ─── O RAIO EM RESINA NO HERO: TESTADO E DESCARTADO (Thiago, 27/08) ───
   O `raio-resina-3q.png` entrou sangrando pela borda direita, a 55% de
   opacidade e com um halo laranja em radial atrás, para ser a luz que separa
   as duas metades do quadro. Reprovou na tela.

   O HALO SAIU JUNTO, e não por tabela: sem o objeto, ele é exatamente o
   brilho em gradiente que a v3 já tinha descartado. Manter só o halo seria
   repropor o que está vetado duas folhas acima.

   O QUE ISSO FECHA: o hero da v5 é tinta chapado, e a composição se resolve
   pelas cinco camadas de conteúdo — pílula, título, subtítulo, ação, prova.
   Antes de trazer qualquer objeto para o fundo aqui, ler este parágrafo e o
   veto dos feixes de luz em css/home-v3.css: as duas tentativas foram pelo
   mesmo motivo, e as duas custaram uma rodada. */

/* ─── 1. A pílula ───
   Contorno de um fio, sem preenchimento chapado: sobre o tinta, uma cápsula
   sólida vira um botão, e este elemento não é clicável. A tag laranja dentro
   dela é o único acento de marca do hero — o degradê do <h1> é da mesma
   família, e dois vermelhos disputando na mesma dobra tiram o peso dos dois.
   Por isso a tag é a cor CHEIA e o resto do texto é branco rebaixado. */
.hp-pilula {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .85rem .35rem .4rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .05);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  font-size: .8125rem;
  line-height: 1;
  letter-spacing: -.005em;
  color: rgba(255, 255, 255, .72);
  margin-bottom: clamp(1.25rem, 2.5vh, 1.75rem);
  opacity: 0;
  animation: hero-sobe .9s var(--ease-cena) .1s forwards;
}
.hp-pilula-tag {
  padding: .3rem .6rem;
  border-radius: 999px;
  background: var(--pc-orange);
  color: #1A1A1A;         /* sobre o laranja, tinta e não branco: o branco dá 2,4:1 */
  font-weight: 600;
  font-size: .75rem;
  letter-spacing: .01em;
}

/* ─── 2. A manchete ───
   Duas linhas e não quatro. O corpo SOBE em relação à v3 (3.5rem → 4rem no
   teto) porque um título curto aguenta mais peso: era a quantidade de linhas
   que limitava o tamanho lá, não a largura da coluna.

   `max-width` em ch e não em px: a quebra é escrita à mão em dois <span>, e o
   limite aqui existe só para impedir que uma tela muito larga junte as duas
   numa linha só. */
.hp-titulo {
  font-size: clamp(2rem, 4.6vw, 4rem);
  line-height: 1.1;
  /* SUBIU DE 20ch PARA 27ch (27/08) junto com a copy do Iago: a linha mais
     longa passou a ser "Como grandes empresas usam", de 26 caracteres. Com o
     limite antigo o <span> quebrava sozinho e a manchete voltava a ter quatro
     linhas — a quebra desta manchete é escrita à mão, e o `max-width` existe
     só para impedir que uma tela larga junte as duas numa linha só. */
  max-width: 27ch;
  margin: 0;
}
/* As duas linhas são brancas cheias. O `.lin-eco` da v3 pintava a metade que
   virou parágrafo — dentro de um título de duas linhas ele deixaria a
   segunda parecendo apagada, e não subordinada. */
.home-v5 .hp-titulo .lin-eco { color: #FFFFFF; }

/* ─── 3. A descrição ───
   O degrau de hierarquia que o `.lin-eco` fazia na v3 acontece aqui, e agora
   por três coisas ao mesmo tempo: corpo menor, peso normal e branco a 62%.
   `max-width` em ch porque é texto de LEITURA — a manchete se mede pela
   composição, o parágrafo pela linha confortável. */
.hp-descricao {
  margin: clamp(1rem, 2.2vh, 1.5rem) 0 0;
  max-width: 54ch;
  text-align: center;
  font-size: clamp(1rem, 1.35vw, 1.1875rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, .62);
  opacity: 0;
  animation: hero-sobe .9s var(--ease-cena) .35s forwards;
}

/* ─── 4. As ações ───
   Botão claro e link nu, a dupla das duas referências. O botão é BRANCO e
   não laranja: o laranja já está na pílula, e sobre o tinta o branco chapado
   é o elemento de maior contraste da tela — que é o que um CTA primário
   deve ser. */
.hp-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 2vw, 1.75rem);
  margin-top: clamp(1.75rem, 3.5vh, 2.5rem);
  opacity: 0;
  animation: hero-sobe .9s var(--ease-cena) .5s forwards;
}
.hp-btn {
  display: inline-flex;
  align-items: center;
  padding: .875rem 1.6rem;
  border-radius: 999px;
  background: #FFFFFF;
  color: #1A1A1A;
  font-weight: 600;
  font-size: .9375rem;
  letter-spacing: -.005em;
  text-decoration: none;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.hp-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .45);
}
.hp-link {
  color: rgba(255, 255, 255, .72);
  font-size: .9375rem;
  text-decoration: none;
  /* Sublinhado afastado e fino: sobre o tinta, o sublinhado colado engrossa a
     linha de base e o texto parece riscado. */
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .28);
  text-underline-offset: .3em;
  transition: color .3s var(--ease), text-decoration-color .3s var(--ease);
}
.hp-link:hover { color: #FFFFFF; text-decoration-color: rgba(255, 255, 255, .6); }

/* ─── 5. A camada de prova ───
   Números à esquerda, rostos à direita, com um fio vertical entre os dois
   grupos. O fio existe porque são DUAS COISAS diferentes — dado declarado e
   gente que fala — e sem ele os quatro blocos lêem como uma fileira só de
   quatro estatísticas, uma delas com fotos. */
.hp-prova {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 3vw, 2.75rem);
  margin-top: clamp(2.25rem, 5vh, 3.25rem);
  opacity: 0;
  animation: hero-sobe 1s var(--ease-cena) .7s forwards;
}

.hp-dados {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.25rem, 3vw, 2.75rem);
  margin: 0;
  padding: 0;
}
/* O separador entre os dados é um fio de 1px em `border-left`, e não um gap
   maior: com três números de larguras muito diferentes ("+1 milhão" contra
   "90%") só o espaço não dá régua nenhuma, e os três parecem tortos. */
.hp-dado + .hp-dado {
  border-left: 1px solid rgba(255, 255, 255, .12);
  padding-left: clamp(1.25rem, 3vw, 2.75rem);
}
.hp-dado p { margin: 0; }
.hp-dado-n {
  font-size: clamp(1.5rem, 2.6vw, 2.125rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.03em;
  color: #FFFFFF;
}
.hp-dado .hp-dado-t {
  margin-top: .3rem;
  font-size: .8125rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, .58);
  max-width: 18ch;
}
/* O NOME DO CLIENTE é a parte que não pode sumir: é ele que faz o número ser
   um dado declarado e não uma promessa da PowerComm. Vai em caixa alta e
   corpo pequeno para ficar claro que é assinatura, não legenda. */
.hp-dado .hp-dado-c {
  margin-top: .45rem;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .38);
}

/* O bloco de rostos: a anatomia do "500K worldwide users" da referência. */
.hp-vozes {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding-left: clamp(1.25rem, 3vw, 2.75rem);
  border-left: 1px solid rgba(255, 255, 255, .12);
  text-decoration: none;
  transition: opacity .3s var(--ease);
}
.hp-vozes:hover { opacity: .82; }

/* A SOBREPOSIÇÃO É O ELEMENTO, não um detalhe: rostos empilhados lêem como
   grupo, enfileirados lêem como lista de autores. O anel escuro em `border`
   é o que separa um do outro — sem ele, quatro recortes redondos encostados
   viram uma mancha só. A cor do anel é o tinta do hero, para o anel
   desaparecer no fundo e restar só a silhueta. */
.hp-avatares { display: flex; }
.hp-avatares img {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #0B0B14;
  background: #101018;
}
.hp-avatares img + img { margin-left: -.7rem; }

.hp-vozes-txt {
  display: flex;
  flex-direction: column;
  font-size: .8125rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, .58);
}
.hp-vozes-txt strong {
  font-size: .9375rem;
  font-weight: 600;
  color: #FFFFFF;
}

/* ─── 6. A faixa, agora fechando o hero ───
   Ela era a única prova da v3 e vinha logo abaixo da manchete, em caixa
   grande. Aqui vem por último, depois dos números, e por isso encolhe: o
   papel dela deixou de ser "a prova" e passou a ser o rodapé do hero — a
   mesma fileira de logos que fecha a segunda referência.

   O ATRASO DA ANIMAÇÃO SOBE JUNTO. Na v3 as caixas entravam em 1.1s, quando
   só a manchete vinha antes delas; com quatro camadas pela frente, entrar
   nesse tempo faria a fileira aparecer no meio da sequência. */
/* A FAIXA FICA DENTRO DO CAMPO ESCURO, DESCOLADA DA BASE (Thiago, 27/08).

   FOI TESTADA A CAVALO NO CORTE e reprovou: as caixas atravessavam a emenda
   entre o tinta e o papel, com metade em cada campo. A ideia era costurar os
   dois; o que se via era o fundo das caixas sendo cortado por uma linha reta
   no meio — e como o miolo delas é opaco, o corte lia como falha de
   renderização, não como sobreposição. Não repropor sem mudar o ingrediente:
   com caixa opaca sobre corte reto, a emenda sempre vai aparecer como um
   traço no meio do logo.

   O QUE FICOU é a outra saída da mesma conversa: mais respiro embaixo. A
   fileira estava encostada na base e lia como coisa que sobrou no fim do
   espaço; com a folga ela vira o rodapé do hero, que é o papel dela desde que
   os números assumiram a prova. */

/* ─── O CAMPO ESCURO PASSA A SER DO HERO ───
   Na v3 quem pinta o tinta é `.home-v3::before`, um pseudo do BODY com altura
   declarada: `64px + --hero-h`. Isso funciona enquanto o hero mede exatamente
   --hero-h — e ele é `min-height`, não `height`.

   NA v5 O HERO PASSA DESSA MEDIDA: são cinco camadas mais o recuo da fileira.
   Quando passa, o campo acaba ANTES do fim do hero e sobra uma faixa de papel
   sob a fileira de logos. Os dois números tinham de concordar e não havia
   nada obrigando isso.

   A CORREÇÃO É ACOPLAR: o campo vira um pseudo DO PRÓPRIO HERO, que se
   estende 64px para cima para cobrir a faixa do header sticky. A emenda passa
   a ser a base do hero por definição, meça ele o que medir.

   O `z-index: -1` é seguro aqui, e só aqui: `.hero-v3` tem
   `isolation: isolate`, então o pseudo cai atrás do conteúdo DO HERO e não
   atrás do papel da página — que é a armadilha registrada na v3, onde o mesmo
   valor num pseudo do body sumia sob o background do html. */
.home-v5::before { display: none; }
.home-v5 .hero-v3::before {
  content: "";
  position: absolute;
  /* SOBE MUITO ALÉM DO NECESSÁRIO, e é de propósito.

     ERA -64px, o número que a v3 usa, e deixou uma FAIXA BRANCA no topo com
     o header cortado ao meio: 64px é a altura da pílula, não a da barra —
     ela ainda tem o próprio padding em volta, e a soma varia com o clamp da
     largura da tela. Qualquer número exato aqui é um valor que precisa
     concordar com outro arquivo sem nada obrigando isso, que é o mesmo erro
     que o pseudo do body cometia com a altura do hero.

     ACIMA DO HERO NÃO EXISTE MAIS NADA além do header — ele é o primeiro
     filho do <main>. Então o excesso não cobre nada que devesse aparecer, e
     o header segue por cima porque é `z-index: 100` fora deste elemento. */
  top: -30rem;
  left: 0;
  right: 0;
  bottom: 0;
  background: #0B0B14;
  z-index: -1;
}

/* O RESPIRO É MAIOR EMBAIXO QUE EM CIMA, e é de propósito: acima da fileira
   vem a camada de prova, que é do mesmo grupo; abaixo dela vem o fim do
   campo. Dentro de um grupo o espaço tem de ser menor que o das bordas — a
   mesma regra que encolheu o vão entre manchete e faixa na v3. */
.home-v5 .hero-v3 {
  /* O `overflow: hidden` DA v3 TEM DE SAIR, e o motivo é o pseudo acima: ele
     nasce 30rem para cima do hero para cobrir a barra do header, e o corte
     ceifava tudo isso — o campo escuro começava na linha do topo do hero e o
     header ficava sobre uma faixa branca, com a pílula cortada ao meio.

     Ele existia na v3 por causa do brilho que ficava atrás do cluster de
     marcas, e o brilho saiu em 26/08. Não há mais nada no hero que precise
     ser cortado.

     JÁ CUSTOU DUAS VEZES: a primeira quando a fileira de logos foi ancorada
     fora do hero, a segunda quando esta linha veio junto na reversão daquele
     teste. Ao mexer no hero da v5, é a primeira coisa a conferir. */
  overflow: visible;
  padding-bottom: clamp(3.5rem, 8vh, 5.5rem);
}

.hp-faixa { margin-top: clamp(2.25rem, 5vh, 3.25rem); }
.hp-faixa .fx-cel {
  width: clamp(3.5rem, 5.4vw, 4.75rem);
  padding: clamp(.7rem, 1.1vw, .95rem);
  border-radius: clamp(.75rem, 1.1vw, 1rem);
  animation-delay: calc(1.5s + var(--i) * .13s);
}

/* ─── Responsivo ─── */
@media (max-width: 860px) {
  /* O FIO VERTICAL SOME antes de qualquer outra coisa: com o conjunto
     quebrando em duas fileiras, o `border-left` do primeiro item de cada
     fileira vira um traço solto no começo da linha. */
  .hp-dado + .hp-dado,
  .hp-vozes {
    border-left: 0;
    padding-left: 0;
  }
  .hp-dados { gap: 1.5rem 2rem; }
  .hp-dado-t { max-width: 16ch; }
}

@media (max-width: 560px) {
  /* Em coluna estreita os três dados viram uma grade de duas colunas e não
     uma pilha: empilhados, a camada de prova sozinha mede mais que a
     manchete e empurra a faixa para fora da dobra. */
  .hp-dados {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    width: 100%;
    text-align: center;
    justify-items: center;
  }
  .hp-dado-t { max-width: 14ch; }
  .hp-acoes { flex-direction: column; gap: .875rem; }
  .hp-btn { width: 100%; justify-content: center; }
  .hp-pilula { font-size: .75rem; }

}

@media (prefers-reduced-motion: reduce) {
  .hp-pilula,
  .hp-descricao,
  .hp-acoes,
  .hp-prova { animation: none; opacity: 1; }
}

/* ═══════════ origem: css/home-v6.css ═══════════ */


/* ═══════════════════════════════════════════════
   PowerComm — HOME, variante v6: o hero sem pílula e sem CTA

   CARREGADA DEPOIS DA v5 E DEPENDE DELA. Todo o hero continua lá — as
   camadas, os números, a fileira. Esta folha só reacomoda o espaço que a
   remoção dos dois elementos abriu, e é por isso que ela é curta.

   O QUE SAIU, e por quê, está no comentário do <body> em index-v6.html.
   Aqui interessa a consequência de layout: o hero perdeu duas camadas de
   quatro. Repetir as medidas da v5 depois disso deixaria um campo escuro
   grande com o conteúdo boiando no meio.
   ═══════════════════════════════════════════════ */

/* O CAMPO ENCOLHE JUNTO COM O CONTEÚDO — de 52rem para 44rem. A v5 media 52
   porque tinha pílula, título, subtítulo, botões, números e fileira; com dois
   blocos a menos, o mesmo teto vira ar.

   O DESENHO DO VALOR É O DA v3 e não muda: o `100svh -` manda em tela baixa,
   o teto em rem manda em monitor alto. E o hero continua medindo MENOS que
   uma tela de propósito — é a folga que diz que há página abaixo, sem seta
   nem "role para ver". */
.home-v6 { --hero-h: min(calc(100svh - 8rem), 44rem); }

/* SEM A PÍLULA, O TÍTULO É O PRIMEIRO ELEMENTO do hero, e ele precisa de mais
   ar acima: a pílula ocupava esse lugar e dava o respiro contra o header. */
.home-v6 .hero-v3 { padding-top: clamp(5rem, 10vh, 7.5rem); }

/* O VÃO ENTRE O SUBTÍTULO E OS NÚMEROS ERA DOS BOTÕES.

   Na v5 há três distâncias em sequência — subtítulo → botões → números — e
   cada uma é menor que a soma das duas. Removidos os botões, as duas margens
   que sobraram somam um vão pequeno demais para separar dois grupos
   diferentes: o parágrafo lê como legenda dos números.

   O valor aqui não é a soma das duas antigas, é maior: sem elemento nenhum no
   meio, é só o espaço que precisa dizer que ali termina o texto e começa a
   prova. */
.home-v6 .hp-prova { margin-top: clamp(3rem, 7vh, 4.5rem); }

/* O subtítulo respira um pouco mais do título pelo mesmo motivo: com menos
   camadas na tela, cada vão pesa mais na leitura do conjunto. */
.home-v6 .hp-descricao { margin-top: clamp(1.25rem, 2.8vh, 1.75rem); }

/* A ENTRADA REESCALONA. Os atrasos da v5 contam com seis elementos entrando
   em fila (.1s pílula, .35s subtítulo, .5s ações, .7s prova, 1.5s fileira);
   com dois fora, a sequência ficaria com dois buracos e a fileira entraria
   quase um segundo depois de tudo já estar parado. */
.home-v6 .hp-descricao { animation-delay: .3s; }
.home-v6 .hp-prova     { animation-delay: .5s; }
.home-v6 .hp-faixa .fx-cel { animation-delay: calc(1.1s + var(--i) * .13s); }

@media (max-width: 560px) {
  /* Em coluna estreita o hero volta a ser medido pelo conteúdo: com os
     números em duas colunas e a fileira quebrando em duas linhas, um teto em
     rem só criaria rolagem dentro do campo. */
  .home-v6 { --hero-h: auto; }
  .home-v6 .hero-v3 { padding-top: clamp(4rem, 9vh, 6rem); }
}

/* ─── O RAIO NO HERO: DESCARTADO DUAS VEZES (Thiago, 27/08) ───
   Primeiro em laranja, na v5, com um halo radial atrás. Depois em grafite,
   aqui, gerado por `scripts/troca_cor.py --alvo 3A3A48` — a cor foi medida
   contra o fundo (mediana 59 de luminância contra 11,6 do tinta) e o relevo
   sobreviveu à conversão. Reprovou do mesmo jeito.

   O QUE ISSO FECHA: não é a cor do objeto, e não é a qualidade do arquivo. O
   hero da v6 tem quatro camadas de conteúdo centralizadas, e qualquer peça
   grande na borda direita desequilibra o eixo em vez de compor com ele. Uma
   próxima tentativa precisa mudar a COMPOSIÇÃO — texto fora do centro, como
   na referência do Fellow — e não o objeto.

   Some com o veto dos feixes de luz em css/home-v3.css: são três tentativas
   de dar volume ao fundo deste hero, e as três custaram uma rodada.

   O `raio-grafite.png` fica em assets/powercomm/icones/ — é asset válido,
   gerado pelo método do projeto, e não precisa ser refeito se voltar. */

/* ═══════════ origem: css/home-v14-2.css ═══════════ */


/* ═══════════════════════════════════════════════
   PowerComm — HOME, variante v8: a órbita de marcas

   CARREGADA DEPOIS DA v6 E DEPENDE DELA — não da v7. Aquela folha põe números
   e marcas nas pontas de uma linha de rodapé, e aqui essa linha não existe
   mais: as marcas foram para a órbita e os números fecham o hero sozinhos.

   O DESENHO:

     ┌────────────────────────────────────┐
     │  título                    ◜ ▢  ◝  │
     │  subtítulo               ▢    ●   ▢│
     │  4 ●●●● times de CI        ◟ ▢  ◞  │
     │                                    │
     │      +1 milhão  90%  ~80%          │
     └────────────────────────────────────┘

   Texto à esquerda (herdado da v7 em espírito, redeclarado aqui), marcas
   girando à direita, números centrados na base.
   ═══════════════════════════════════════════════ */

/* ENCOLHEU DE 46rem PARA 42 (Thiago, 27/08). O campo tinha sido dimensionado
   quando o hero era uma pilha centralizada de cinco camadas; em duas colunas,
   o conteúdo mais alto passou a ser o próprio círculo, e o resto virou ar em
   cima e embaixo.

   O DESENHO DO VALOR É O DA v3 e não muda: o `100svh -` manda em tela baixa,
   o teto em rem manda em monitor alto. E o hero continua medindo MENOS que
   uma tela de propósito — é a folga que diz que há página abaixo.

   ATENÇÃO AO PISO: a órbita tem 35rem e as caixas ficam a 42% do diâmetro do
   centro. O campo não pode encolher a ponto de a metade dele (21rem) chegar
   perto das 14,7rem das caixas mais a altura de uma delas, senão elas voltam
   a bater no header e no painel de números. */
.home-v14 { --hero-h: min(calc(100svh - 6rem), 42rem); }

/* ═══ A GRADE DO HERO ═══
   DUAS COLUNAS, e é esta a mudança estrutural da versão (Thiago, 27/08).

   O QUE ESTAVA ERRADO ANTES DELA: a órbita era `position: absolute` com
   `left` e `top` em porcentagem da TELA, enquanto o texto vivia no shell de
   1160px. Dois sistemas de medida para dois elementos que precisavam se
   alinhar — e por isso a relação entre eles mudava a cada largura de janela.
   Nenhum ajuste de valor resolve isso; foram quatro rodadas de aproximação
   até ficar claro que o problema era o sistema, não o número.

   AGORA OS DOIS SÃO COLUNAS DO MESMO GRID: mesma origem, mesmo vão no meio,
   e `align-items: center` dá o eixo horizontal comum — o centro do círculo
   cai na mesma linha do centro do bloco de texto, em qualquer altura. */
.home-v14 .hero-v3-grade {
  /* ═══ A GRADE OCUPA O SHELL INTEIRO ═══

     DUAS COISAS ERRADAS FORAM CORRIGIDAS AQUI, e a segunda foi criada
     tentando resolver a primeira:

     1. `1.15fr / .85fr` — a coluna de texto era maior que o texto (que para
        em 24ch por medida de leitura), e a sobra dentro dela virava distância
        entre os blocos. Foi o que fez o vão parecer intransponível por ajuste
        de `gap`.

     2. `max-content` + `justify-content: start` — a correção da 1 que abriu um
        buraco: com as duas colunas medindo conteúdo, o par encolheu, encostou
        na esquerda e deixou um terço da tela vazio à direita. Composição não
        se resolve deixando campo morto.

     O CERTO É O MEIO-TERMO: a primeira coluna tem largura FIXA — a medida do
     título quebrado, nem mais — e a segunda leva `1fr`, ficando com todo o
     resto. A grade volta a preencher os 1160px do shell, e a órbita se
     resolve DENTRO da coluna dela, centrada no espaço que sobrou.

     É `justify-self: center` na órbita que fecha a conta: ela não cola no
     texto (o que reabriria o buraco do outro lado) nem se encosta na borda —
     fica no centro ótico da metade direita, com folga igual dos dois lados. */
  grid-template-columns: minmax(0, 30rem) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 3vw, 2.5rem);

  justify-items: stretch;
  text-align: left;

  /* ─── O RECUO DO HEADER, REPETIDO AQUI (Thiago, 27/08) ───
     A manchete começava na borda do shell; o logo PowerComm começa no shell
     MAIS o padding interno da pílula. Os dois estavam a 32px um do outro na
     mesma vertical — perto o bastante para o olho ver que não batem, e é o
     tipo de desalinho que faz a página parecer montada em pedaços.

     O VALOR É O MESMO DE `.header-pill` em css/style.css, copiado à letra e
     não arredondado para 2rem: a pílula usa um clamp, então em tela média o
     recuo dela é menor que 32px e um valor fixo aqui desalinharia de novo,
     só que em outro tamanho de janela.

     ISTO É UMA DEPENDÊNCIA ENTRE ARQUIVOS, e não dá erro se quebrar: mudou o
     padding da pílula, muda aqui junto. */
  padding-inline: clamp(1.25rem, 2.6vw, 2rem);
}

/* A coluna de texto. `justify-items: start` faz cada bloco medir o próprio
   conteúdo em vez de esticar — é o que mantém o link dos rostos do tamanho
   dele e não da coluna inteira. */
.hp-coluna {
  display: grid;
  justify-items: start;
}
/* O CORPO DO TÍTULO SOBE de 4rem para 4.75rem no teto (Thiago, 27/08). A
   coluna cresceu junto, algumas regras acima — os dois têm de andar juntos,
   senão a manchete passa a quebrar em três linhas. */
.home-v14 .hp-titulo { font-size: clamp(2.25rem, 5vw, 4.75rem); }

.home-v14 .hp-titulo,
.home-v14 .hp-descricao {
  text-align: left;
  margin-left: 0;
  /* O LIMITE AGORA É EM `ch`, e só. A largura da caixa quem dá é a coluna;
     este valor cuida só da MEDIDA DE LEITURA — quantos caracteres cabem numa
     linha antes de o olho se perder na volta. Era uma porcentagem da grade,
     que é o mesmo trabalho feito duas vezes e em dois sistemas. */
  max-width: 24ch;
}
.home-v14 .hp-descricao {
  /* `pretty` E NÃO `balance`: os dois evitam a viúva, mas o balance reparte o
     texto em linhas de comprimento igual — num parágrafo de três linhas isso
     encurta a primeira e o bloco perde a borda reta contra a manchete. O
     `pretty` só cuida das duas últimas. */
  text-wrap: pretty;
  max-width: 30ch;
  /* O parágrafo acompanha em menor grau: ele é texto de leitura, e crescer
     junto com a manchete o tiraria da medida confortável. */
  font-size: clamp(1.0625rem, 1.5vw, 1.3125rem);
}

/* ═══ A ÓRBITA ═══

   O CENTRO FICA FORA DA TELA, à direita. É isso que faz as marcas
   ENTRAREM e SAÍREM do quadro em vez de darem uma volta inteira à vista: o
   arco visível é só o pedaço esquerdo do círculo, e cada caixa passa por ele,
   sai pela borda e volta depois.

   E o conjunto sangra por baixo da dobra, que era o pedido — a órbita não
   termina no fim do hero, ela continua atrás do corte para o papel. */
.hp-orbita {
  /* ─── DENTRO DA GRADE, e não mais por cima dela ───
     A órbita é a segunda coluna: ela mede 100% do que a grade lhe dá e é
     quadrada por `aspect-ratio`. O `max-width` é o único limite duro, e ele
     existe por causa da ALTURA — o círculo tem de caber no campo escuro sem
     encostar no header em cima nem no painel de números embaixo.

     O TETO SAIU DE UMA CONTA, não de tentativa: o hero mede 46rem e o anel
     das marcas fica a 42% do diâmetro do centro. Em 28rem — o valor depois de
     o Thiago pedir o conjunto menor, 27/08 — as caixas ficam a 11,8rem do
     centro, contra as 23rem que a metade do campo oferece.

     `container-type: size` LIGA AS UNIDADES `cq*` PARA OS FILHOS. É o que
     permite o raio das marcas ser uma fração da órbita em vez de um valor em
     rem que teria de ser mantido em sincronia com ela à mão. */
  position: relative;
  /* LARGURA PRÓPRIA, e não `100%`: a coluna agora é `max-content`, então ela
     mede o que estiver dentro — um `width: 100%` aqui vira uma referência
     circular e o quadrado colapsa.

     35rem é o terceiro degrau (28 → 31 → 35, Thiago, 27/08). O `46vw` segura
     o valor em telas médias, onde 35rem passaria a ser metade da janela.

     O TETO ESTÁ PERTO: o campo escuro mede 46rem e as caixas ficam a 42% do
     diâmetro do centro — em 35rem elas param a 14,7rem, contra as 23rem que a
     metade do campo oferece. As 8rem restantes são a folga que separa a caixa
     de cima do header e a de baixo do painel de números, e uma delas ainda
     precisa caber a própria caixa. Crescer muito mais pede encolher o raio
     das marcas na mesma proporção. */
  width: min(35rem, 46vw);
  aspect-ratio: 1;
  /* CENTRADA NA PRÓPRIA COLUNA. Colada à esquerda ela empurrava todo o vão
     para a direita e deixava a borda do shell vazia; colada à direita, o vão
     volta para o meio. No centro, a folga se divide e o conjunto fica em pé
     nos dois lados. */
  justify-self: center;
  container-type: size;

  /* Uma volta inteira. 90s é lento de propósito: a órbita é cenário, e
     cenário que se mexe rápido vira o assunto da tela. */
  --orb-volta: 90s;

  /* A COR DO FIO, num lugar só. Os anéis e as bolinhas do anel de dentro são
     a MESMA COR por definição, e não por dois valores parecidos escritos em
     lugares diferentes (Thiago, 27/08) — as bolinhas estavam um degrau acima
     e liam como conteúdo, não como parte do desenho. */
  --orb-fio: rgba(255, 255, 255, .07);

  pointer-events: none;

  /* O CONJUNTO SOME NAS BORDAS por máscara, e não por um degradê pintado por
     cima: pintar exigiria uma cor sólida igual à do fundo, e o fundo do hero
     já é o pseudo escuro da v5 — duas superfícies para casar. A máscara apaga
     o próprio elemento, e continua funcionando se o fundo mudar.
     O corte começa em 88% do raio: as marcas andam a 84% dele (42cqmin, e a
     máscara mede pela metade), então elas ficam inteiras na parte opaca. Só o
     anel de fora atravessa a zona de fade — e é o que o faz desaparecer nas
     pontas em vez de terminar num traço seco. */
  -webkit-mask-image: radial-gradient(closest-side, #000 88%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 88%, transparent 100%);
}

/* Os três fios. Um só faz as marcas parecerem penduradas num arame; três
   concêntricos dão profundidade ao campo. O do meio é o que carrega as
   marcas — por isso ele é o único com o raio do anel, e os outros dois são
   desenho puro. */
.orb-anel {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  border-radius: 50%;
  border: 1px solid var(--orb-fio);
}
/* O ANEL DO MEIO É O DAS MARCAS: 84% de largura é o dobro dos 42cqmin que
   cada caixa anda a partir do centro. Os dois números são a mesma medida
   escrita de duas formas — se um mudar sem o outro, as caixas passam a
   flutuar ao lado do fio em vez de andar sobre ele. */
/* ─── O ANEL DE DENTRO E SUAS QUATRO BOLINHAS ───
   Os pontos são BACKGROUND deste elemento, e não filhos posicionados. A
   diferença importa: como `background-position` trabalha em porcentagem da
   caixa, eles caem nos quatro pontos cardeais do próprio anel sem depender de
   `transform`, de `cqmin` nem de concordância com nenhum outro valor. O anel
   e os pontos passam a ser a mesma peça — se um existe, o outro existe.

   Cada gradiente é um disco de 6px de raio dentro de um sprite de 12px, e as
   posições 0%/50%, 50%/0%, 100%/50% e 50%/100% são esquerda, topo, direita e
   base. Com `background-origin: border-box` o sprite se alinha pela borda, e
   o ponto fica sobre o fio.

   A COR É A DO PRÓPRIO FIO (`--orb-fio`), literalmente a mesma variável. Os
   pontos são o anel, não coisas em cima dele — e por isso não podem estar um
   degrau acima dele em contraste. */
.orb-anel-1 {
  width: 52%;
  height: 52%;
  background-image:
    radial-gradient(circle, var(--orb-fio) 0 5px, transparent 5px),
    radial-gradient(circle, var(--orb-fio) 0 5px, transparent 5px),
    radial-gradient(circle, var(--orb-fio) 0 5px, transparent 5px),
    radial-gradient(circle, var(--orb-fio) 0 5px, transparent 5px);
  background-size: 12px 12px;
  background-repeat: no-repeat;
  background-origin: border-box;
  background-position: 0% 50%, 50% 0%, 100% 50%, 50% 100%;
  /* GIRA AO CONTRÁRIO E MAIS DEVAGAR que as marcas (110s contra 90s): mesmo
     sentido e mesmo tempo fariam os dois anéis lerem como um disco só. Aqui
     quem gira é o anel inteiro — o círculo é simétrico, então rodá-lo só move
     os pontos, que é o efeito desejado. */
  animation: orb-gira 110s linear infinite reverse;
}
.orb-anel-2 {
  width: 84%;
  height: 84%;
  border-color: var(--orb-fio);
}
/* O de fora fecha o campo. Ele chegou a ser rebaixado para .045 quando
   cruzava a manchete — sem isso, um fio claro em cima da tipografia vira uma
   risca. Com o círculo de volta ao lado direito, ele não cruza mais nada e
   volta ao tom dos outros. */
.orb-anel-3 { width: 100%; height: 100%; }

/* QUEM GIRA É A LISTA, não cada caixa: uma animação só para as seis mantém
   os ângulos entre elas exatos. Seis animações independentes acumulam
   diferença de subpixel e o espaçamento se desfaz ao longo dos minutos. */
.orb-lista {
  position: absolute;
  inset: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  animation: orb-gira var(--orb-volta) linear infinite;
}
@keyframes orb-gira {
  to { rotate: 360deg; }
}

/* A CAIXA É POSICIONADA PELO ÂNGULO, na fórmula de sempre: gira o ponto de
   origem, anda o raio, e volta o giro para a peça ficar de pé. O terceiro
   passo resolve a posição estática; o movimento contínuo do pai é desfeito
   pela animação reversa abaixo. */
.orb-cel {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  transform:
    translate(-50%, -50%)
    rotate(var(--a))
    translateX(42cqmin)
    rotate(calc(-1 * var(--a)));
  /* Herda o desenho da caixa da v3 (.fx-cel) — vidro escuro, fio de luz no
     topo, canto macio. Só o tamanho muda: na órbita elas competem com o texto
     e precisam ser menores que na fileira. */
  width: clamp(3.25rem, 4.6vw, 4.25rem);
  padding: clamp(.65rem, 1vw, .85rem);
  border-radius: clamp(.7rem, 1vw, .95rem);
  /* A entrada em cascata da v3 não vale aqui: as seis já nascem espalhadas
     pelo anel, e a fileira de atrasos faria elas piscarem em sequência num
     lugar onde não há sequência para ler. */
  /* `opacity: 1` EXPLÍCITO: a `.fx-cel` da v3 nasce em 0 e conta com a
     animação `fx-entra`, que tem `forwards`. Trocando a animação sem trocar
     o repouso, as caixas apareciam e sumiam de novo ao fim da entrada. */
  opacity: 1;
  animation: orb-entra 1.2s var(--ease-cena) .5s backwards;
}
@keyframes orb-entra {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ─── OS QUATRO CASES NO ANEL DE DENTRO: TESTADO E REMOVIDO (Thiago, 27/08) ───
   V.tal, Tenda, Ocyan e MRS entraram num segundo anel, a 26cqmin do centro,
   em caixa clara (os arquivos deles têm a cor dentro do desenho — chapar de
   branco apaga as letras do MRS) e girando ao contrário do anel de fora.

   Saiu no mesmo dia. Fica o registro de que a decisão de 25/08 continua de
   pé por outro caminho: os dois conjuntos não convivem no hero. Seis marcas
   de prova social e quatro de case na mesma peça são dez logos disputando, e
   a hierarquia por raio não foi suficiente para desfazer isso. */

/* ─── A CONTRA-ROTAÇÃO É DO LOGO, E FICA ONDE ESTAVA ───
   Ela deixa o LOGO de pé enquanto a CAIXA acompanha o giro do anel — a peça
   passa inclinada, como um objeto pousado numa roda.

   FOI TESTADO PÔR A CONTRA-ROTAÇÃO NA CAIXA (27/08), para a peça inteira
   andar reta. Reprovou na tela: sem a inclinação, as seis viram ícones
   deslizando em volta de um círculo, e o movimento perde a leitura de órbita.
   O que parecia um defeito é o efeito. Não repropor. */
.orb-cel img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: orb-gira var(--orb-volta) linear infinite reverse;
}

/* ─── O bloco de rostos, na anatomia do "500K" ─── */
/* ─── O bloco de rostos ───
   O "4" saiu de elemento à parte e voltou para dentro da frase (Thiago,
   27/08). O que sobra é uma linha: rostos, e ao lado o que eles são.

   ROSTO GRANDE, TEXTO NORMAL. Na referência quem carrega o bloco é o número,
   porque "500K" se lê à distância; aqui o número é 4 e não tem essa escala.
   Então o peso passa para os avatares — eles crescem de 2,25rem para 3,25rem
   e viram o elemento visual do canto inferior da coluna. */
.hp-vozes-grande {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: clamp(2rem, 4.5vh, 3rem);
  border-left: 0;
  padding-left: 0;
}
.hp-vozes-grande .hp-avatares img {
  /* DESCERAM DE 3,25rem PARA 2,5rem (Thiago, 27/08). Eles cresceram quando o
     número "4" saiu de elemento à parte e o bloco ficou sem peso; com o
     título maior e o círculo maior, o mesmo tamanho passou a competir — quatro
     rostos coloridos são a única cor da coluna, e por isso puxam mais atenção
     que a área que ocupam. */
  width: 2.5rem;
  height: 2.5rem;
  /* O anel acompanha: em disco menor, 3px viram uma moldura grossa. */
  border-width: 2px;
}
.hp-vozes-grande .hp-avatares img + img { margin-left: -.75rem; }
/* O TEXTO DESCE UM DEGRAU (Thiago, 27/08). Ele estava em 1rem no forte e
   .875 na segunda linha, e nesse tamanho o bloco disputava com o subtítulo
   logo acima — dois textos de peso parecido em sequência, e o de baixo com
   negrito, faziam o olho parar nele antes de terminar o parágrafo.

   ELE É A ASSINATURA DO TÍTULO, não uma terceira frase: tem de se ler depois
   dos outros dois, não junto. O tamanho é o mesmo da atribuição de cliente
   nos números do painel, que faz o mesmo papel lá embaixo. */
.hp-vozes-grande .hp-vozes-txt { font-size: .8125rem; }
.hp-vozes-grande .hp-vozes-txt strong { font-size: .875rem; }

/* ─── Os números, centrados na base ───
   Saem da coluna de texto e da órbita. Centrados, eles atravessam a largura
   inteira e fecham o campo escuro — é a última coisa antes do corte para o
   papel. */
/* OS TRÊS CARDS-PASTA SAÍRAM (Thiago, 27/08). Eram os três números — "+1
   milhão" da V.tal, "90%" de visualização no Teams e "~80%" de abertura da
   MRS — em cards com aba no topo, ancorados no pé do hero e cruzando a emenda
   para o papel com 72% do corpo abaixo do corte.

   O que ia junto deles e saiu na mesma passada: o recuo que o hero abria por
   dentro para não passar por baixo do bloco, e a margem extra da seção de
   cases logo abaixo — ela existia só porque o painel invadia o papel.

/* A MARGEM DA SEÇÃO DE CASES SAIU com os cards-pasta: ela existia só para o
   primeiro card não começar em cima do painel que invadia o papel. Sem o
   painel, ela era um vão morto de até 9rem entre o hero e o primeiro case. */

/* ─── OS RECUOS DO HERO, E POR QUE ELES SÃO A ALTURA ───
   O `--hero-h` é `min-height`: ele só manda enquanto o conteúdo couber dentro
   dele. Aqui não cabia — a órbita sozinha tem 35rem, e os recuos de cima e de
   baixo somavam quase 15rem em volta dela. O hero media perto de 50rem
   enquanto o campo pedia 42, e mexer no `--hero-h` não movia nada.

   ENTÃO É AQUI QUE A ALTURA ENCOLHE. O recuo de baixo já teve 9rem para o
   painel de números caber, depois caiu quando o painel passou a mostrar só a
   aba na dobra — e com os cards-pasta removidos (27/08) o valor de hoje é
   respiro do campo escuro, não folga para peça nenhuma.

   AO MEXER NA ALTURA DESTA VERSÃO, é este par que se olha primeiro — o
   `--hero-h` é o teto, não a medida. */
.home-v14 .hero-v3 {
  padding-top: clamp(2.5rem, 5vh, 4rem);
  padding-bottom: clamp(3rem, 6vh, 4.5rem);
}

@media (max-width: 860px) {
  /* UMA COLUNA. Duas colunas só funcionam enquanto cada uma tem largura para
     respirar; abaixo disto o círculo vira um disco espremido ao lado de um
     parágrafo de quatro palavras por linha. Empilhado, o texto volta a mandar
     e a órbita passa a fechar o bloco. */
  .home-v14 .hero-v3-grade {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2.5rem, 6vh, 4rem);
  }
  .hp-orbita { max-width: 26rem; opacity: .8; }
  .home-v14 .hp-titulo { max-width: 22ch; }
  .home-v14 .hp-descricao { max-width: 42ch; }
}

@media (max-width: 560px) {
  /* SAI EM TELEFONE. Não há vão à direita para ela ocupar, e atrás do texto
     ela vira ruído sob a leitura. */
  .hp-orbita { display: none; }
  .home-v14 .hero-v3-grade { justify-items: center; text-align: center; }
  .home-v14 .hp-titulo,
  .home-v14 .hp-descricao { text-align: center; margin-inline: auto; max-width: 100%; }
  .hp-vozes-grande { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  /* O GIRO PARA, mas a órbita fica: ela é composição, não animação. As
     marcas continuam distribuídas no anel, paradas. */
  .orb-lista,
  .orb-anel-1,
  .orb-cel img { animation: none; }
  .orb-cel { animation: none; opacity: 1; }
}


/* ═══ A TIPOGRAFIA DA MANCHETE — A RECEITA DA v4 (Thiago, 27/08) ═══
   A v8 herdava a manchete da v3 (Inter larga, peso 600, aperto de -.032em) e
   passa a usar a tipografia que a v4 fechou em 26/08. Ela não foi escolhida
   por gosto: a queixa do Iago sobre a home ("achei um pouquinho meio diferente
   da home que já existe") foi MEDIDA no site institucional da PowerComm, que
   usa Inter Tight, peso 300, 120px no h1.

   São três mudanças, e as três andam juntas:

   1. FAMÍLIA — Inter Tight, a dos títulos da PowerComm. O arquivo entra pelo
      mesmo <link> do Google Fonts, na faixa 200..700.

   2. PESO 300 — o site usa o leve em corpo grande, e é ele que dá o ar de
      manchete em vez de rótulo de interface. Peso alto em display grande
      fecha os contraformas e o bloco vira massa branca.

   3. APERTO MENOR — de -.032em para -.018em. A Tight já é estreita por
      desenho; manter o aperto da Inter larga colava as letras.

   O CORPO NÃO MUDA: a v8 já está em clamp(2.25rem, 5vw, 4.75rem), acima dos
   60px da v4, e o leve pede tamanho — em corpo médio ele lê como texto
   desbotado e não como manchete.

   `--display` é declarado aqui, e não copiado para dentro da regra: se um dia
   o subtítulo ou outro elemento da v8 precisar da mesma família, o nome da
   fonte continua escrito num lugar só. Foi assim que a v4 registrou o
   cuidado — "Inter Tight" repetido no arquivo é como uma medida se descola da
   outra. */
.home-v14 {
  --display: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
}
.home-v14 .hp-titulo {
  font-family: var(--display);
  font-weight: 300;
  letter-spacing: -.018em;
}


/* ═══════════════════════════════════════════════
   A v14 — OS TRILHOS DA v13 NO HERO DA v8 (Thiago, 27/08)

   Tudo acima é `home-v8.css` copiada — a folha não importa a v8, ela a carrega
   por dentro, como a v13 fez. Mexer numa não mexe na outra.

   ESTA FOLHA É GERADA por scripts/monta-v14.py, que junta a v8, o mecanismo de
   trilhos da v13 e os dois blocos escritos à mão em scripts/v14-*.css. Editar
   o arquivo montado funciona até alguém rodar o script de novo.

   O QUE MUDA É SÓ O OBJETO. A v8 punha as seis marcas numa órbita FECHADA na
   coluna direita; aqui elas correm sobre as CURVAS ABERTAS da v13.

   O QUE NÃO MUDA É A COMPOSIÇÃO. Na v13 os trilhos vieram com um texto
   centralizado, porque lá o círculo era concêntrico e a manchete ficava no
   meio dele. Aqui a manchete continua à ESQUERDA, como na v8 — é o que separa
   esta versão daquela.

   ─── 1. A COLUNA DIREITA DEIXA DE EXISTIR ───
   A grade de duas colunas da v8 só existia para acomodar o círculo AO LADO do
   texto. Sem ele, a segunda coluna vira campo morto — e campo morto foi
   exatamente o que a v8 registrou como erro a não repetir. Sobra uma coluna,
   com a mesma medida de 30rem que o texto já tinha: o bloco fica onde estava e
   os trilhos passam por ele.

   `position: relative` e `isolation: isolate` no hero dão às camadas da órbita
   um contexto de empilhamento próprio — sem isolar, o `z-index: 2` da camada
   da frente competiria com o header sticky da página. */
.home-v14 .hero-v3 {
  position: relative;
  isolation: isolate;
}
.home-v14 .hero-v3-grade {
  grid-template-columns: minmax(0, 30rem);
  justify-items: start;
  /* A coluna do texto sobe de plano para ficar ENTRE as duas órbitas: 1 na
     frente da camada de trás, atrás da camada da frente (que está em 2). */
  position: relative;
  z-index: 1;
}

/* ─── 2. O SUBTÍTULO EM 20px (Thiago, 27/08) ───
   Valor pedido, e fixo de propósito: a v8 o deixava num clamp de 17 a 21px
   por vw, e a diferença entre os extremos dessa faixa não muda a leitura —
   o que ela faz é o corpo do parágrafo variar com a largura da janela num
   bloco que já tem a medida travada em 30ch. Uma medida só, em todas. */
.home-v14 .hp-descricao { font-size: 1.25rem; }

/* ─── 3. A MANCHETE EM LINE-HEIGHT 95% (Thiago, 27/08) ───
   Passou por 1.1 (herdado), depois 1, e agora .95: as duas linhas encaixam uma
   na outra, e numa manchete de 72px o que se lê é o BLOCO, não duas linhas
   empilhadas.

   ISSO MEXE NO RESPIRO DO TOPO, e é a razão de estar escrito aqui: parte do
   que se vê como espaço acima do "H" é meio-entrelinhamento, não padding. Com
   a entrelinha abaixo de 1 esse meio vira NEGATIVO — a caixa fica menor que o
   glifo — e o texto sobe. A correção fixa do `padding-top` no §9 foi remedida
   na tela por causa disto; mudar este valor pede remedir de novo. */
.home-v14 .hp-titulo { line-height: .95; }

/* ─── 3. A ENTRELINHA DO SUBTÍTULO EM 140% (Thiago, 27/08) ───
   Vinha de 1.55 da v5, calibrado para o hero centralizado daquela versão, em
   que o parágrafo era uma faixa larga no meio da tela e precisava de ar entre
   as linhas para não virar bloco. Aqui ele é uma coluna estreita de 30ch ao
   lado de um campo com movimento: com 140% as três linhas se juntam num
   parágrafo só, que é o que separa ele do bloco de rostos logo abaixo. */
.home-v14 .hp-descricao { line-height: 1.4; }

/* ─── 2. OS TRILHOS ───
   A v8 punha as marcas numa órbita fechada ao lado do texto. Aqui elas correm
   sobre CURVAS ABERTAS E HORIZONTAIS de amplitude alta: entram por uma lateral
   do quadro, sobem e descem centenas de pixels envolvendo a manchete, e saem
   pela outra.

   DIREÇÃO E AMPLITUDE SÃO DUAS COISAS, e foi confundi-las que custou duas
   rodadas. As primeiras curvas eram horizontais e RASAS; ao pedir "movimentos
   mais acentuados", o que se fez foi virá-las de pé — o que corrigiu a
   amplitude e quebrou a direção. O certo é o par: direção horizontal, para a
   marca atravessar o quadro de lado a lado, e amplitude vertical grande, para
   ela envolver o texto em vez de passar reto ao lado dele.

   O PALCO TEM TAMANHO FIXO EM PIXELS, e isso é deliberado. `offset-path:
   path()` trabalha em coordenadas absolutas — ele NÃO escala com o container,
   e não existe hoje em CSS uma divisão entre comprimentos que permita derivar
   um fator de escala de `100cqw / 1280px`. Com o palco em 1280×640 as
   coordenadas do `d` e as do `viewBox` do SVG são a mesma régua, e o que
   acontece em telas mais estreitas é o que a referência já faz: as curvas
   SANGRAM pelas laterais. Um trilho cortado na borda lê como continuando fora
   do quadro; um trilho reescalado leria como um desenho encolhido.

   O RECORTE NÃO PODE MORAR NO HERO. O palco largo precisa ser cortado para não
   abrir rolagem horizontal, mas o campo escuro desta cadeia é um pseudo DO
   PRÓPRIO HERO que nasce 30rem acima dele, para cobrir a barra do header — e
   `overflow: hidden` no <section> corta esse pseudo junto, deixando uma faixa
   branca no topo com o header partido ao meio.

   Não é a primeira vez: `home-v5.css` removeu o `overflow` que a v3 tinha pelo
   mesmo motivo, e está escrito lá. Quem recorta é o wrapper abaixo, que mede o
   hero por dentro. */
.home-v14 .orb-recorte {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
/* O wrapper herda a camada de quem está dentro dele: sem isto, os dois
   recortes empilhariam pela ordem do DOM e a camada da frente ficaria atrás do
   texto. `z-index` do filho não atravessa um pai que já criou contexto. */
.home-v14 .orb-recorte:has(.orb-tras)   { z-index: 0; }
.home-v14 .orb-recorte:has(.orb-frente) { z-index: 2; }
.home-v14 .hp-orbita {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 1600px;
  /* 800px, MAIS ALTO QUE O HERO de propósito — e 1600 de largura, mais largo
     que o shell. As curvas precisam entrar e sair
     do quadro pelas pontas, e o `viewBox` corta tudo que passa dele — então em
     vez de desenhar para fora, o palco inteiro é maior que o campo visível e o
     `.orb-recorte` corta as pontas. O que se vê é uma curva que continua além
     da dobra, que é o que a referência mostra. */
  height: 800px;
  max-width: none;
  aspect-ratio: auto;
  justify-self: initial;
  container-type: normal;
  opacity: 1;
  pointer-events: none;

  /* OS QUATRO TRILHOS, ESCRITOS UMA VEZ SÓ. O mesmo `d` alimenta o `<path>` do
     SVG e o `offset-path` da marca — se os dois divergirem, a peça anda ao
     lado da linha em vez de sobre ela. Aqui eles são variáveis, e o HTML só
     aponta qual trilho cada marca usa. */
  --t1: path("M -100 640 C 250 640, 380 170, 800 170 S 1350 660, 1700 600");
  --t2: path("M -100 170 C 260 170, 400 650, 800 650 S 1360 150, 1700 210");
  --t3: path("M -100 390 C 300 190, 560 570, 900 350 S 1400 290, 1700 430");
  --t4: path("M -100 730 C 380 700, 620 400, 1010 500 S 1430 710, 1700 650");

  /* AS CURVAS PROPRIAS DAS CAIXAS FORAM REMOVIDAS (Iago, 28/08).

     Elas existiram por meio dia: tres curvas desenhadas dentro da faixa que o
     texto deixa livre, para a marca nunca cruzar a manchete. Resolviam a
     colisao e custavam o essencial — a peca corria ao lado das linhas, nao
     sobre elas, e o fio deixava de ligar uma marca a outra.

     O que substitui a solucao e o `--orb-ini`. Ver o bloco do percurso mais
     abaixo: os quatro trilhos do fundo entram na area livre entre 49.7% e
     51.3%, e a marca so comeca a ser desenhada em 52%. O mesmo resultado, sem
     inventar caminho.

     Se precisarem voltar, estao no git: procurar por `--c1: path` no historico
     de 28/08. */

  /* Uma travessia inteira. O percurso é longo — 1800px de largura mais a
     amplitude vertical de cada onda — e 88s deixa a marca andando devagar o
     bastante para ser cenário. Cenário que se mexe rápido vira o assunto da
     tela. */
  --orb-volta: 88s;
  --orb-fio: rgba(255, 255, 255, .07);
}

/* O desenho das linhas. `vector-effect` mantém o fio com 1px reais mesmo se o
   SVG for escalado um dia — o traço não engorda junto com a caixa. */
.home-v14 .orb-trilhos {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.home-v14 .orb-trilhos path {
  stroke: var(--orb-fio);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  fill: none;
}
/* O EIXO TRACEJADO não carrega marca: na referência ele é o que impede as
   quatro curvas de lerem como um desenho simétrico. Fora da vertical por 32px
   ao longo dos 1800 de largura — inclinação suficiente para o olho ver que ele
   não é um fio de grade, e pequena o bastante para não virar uma diagonal. */
.home-v14 .orb-fio-tracejado {
  stroke-dasharray: 5 9;
  opacity: .85;
}

/* ─── AS MARCAS SOBRE O TRILHO ───
   `offset-path` põe a peça na curva e `offset-distance` a move. A animação é
   uma só, com `--atraso` NEGATIVO em cada marca: um atraso negativo não espera,
   ele começa a animação já adiantada naquele tanto. É o que espalha as seis
   pelos trilhos desde o primeiro quadro, em vez de fazê-las entrarem em fila
   pela borda esquerda nos primeiros segundos.

   `offset-rotate: 0deg` mantém a caixa DE PÉ. O padrão é `auto`, que gira a
   peça conforme a inclinação da curva — na órbita da v8 essa inclinação era o
   efeito desejado, aqui ela faria as marcas tombarem ao subir e descer. */
/* A NEVOA DE ENTRADA E DE SAIDA (Thiago, 28/08).

   As paradas estao em coordenadas de TELA, e nao do palco: `50% - 50vw` e a
   borda esquerda da janela vista de dentro da lista (que tem 1600px fixos e
   fica centrada), `50% + 50vw` e a direita. Assim a nevoa fica no mesmo lugar
   da tela em qualquer largura — foi o que permitiu apagar as duas faixas de
   `--orb-fim` por breakpoint.

   ONDE CADA PARADA CAI, numa janela de 1470:
     · 50% - 20px — alfa zero ate aqui. A ENTRADA E ANCORADA NO TEXTO, e nao
                em px de tela: o shell tem 1160 e fica centrado, entao a
                manchete termina SEMPRE 68px a esquerda do centro da janela,
                em qualquer largura (667 numa de 1470, 572 numa de 1280).
                Presa em px, a nevoa desperdicava 118px de campo em 1280 e a
                faixa cheia caia para 420. A REGRA DOS 68px VALE ENQUANTO O
                SHELL ESTIVER NO TETO: perto de 1160 ele comeca a encolher e o
                texto avanca em relacao ao centro — medido, em 1180 a manchete
                termina em 546 contra os 522 que a formula preveria. Dai os
                20px e nao 68: a folga que sobra e de 24px na largura mais
                apertada e de 48px numa de 1470. Ela garante que
                NENHUMA coluna de pixel da caixa seja pintada sobre o texto —
                e e por coluna que a mascara age: a peca emerge pela lateral
                direita da nevoa, faixa vertical por faixa vertical, em vez
                de acender inteira
     · 50% + 40px — plenamente visivel. A RAMPA E CURTA DE PROPOSITO (60px,
                menos que os 68 da caixa): com 200px de rampa a marca so
                ficava cheia em 56% da largura da tela, e lia como se
                estivesse "comecando quase na ponta direita". Com 60 ela
                fecha em 52% — no meio, que e onde ele espera ver a peca
                inteira. A parada transparente NAO acompanhou: continua em
                50% - 20px porque e ela que protege o texto, e ali a folga
                ja e de so 17px na largura mais apertada
     · borda - 150px — comeca a se dissolver. Passou por 60 e por 34 antes de
                chegar aqui, e o 34 foi um erro: sobrou uma rampa de 30px
                para uma caixa de 68: a marca sumia numa distancia menor que
                ela mesma e colada na borda, o que le como corte e nao como
                fade. Foi reportado de fora ("quando vai pro lado direito a
                logo so some, nao tem aquele fadeout"), e a comparacao e o
                melhor argumento: a ENTRADA tinha 60px de rampa e a saida 30.
                O gesto era assimetrico
     · borda - 30px — invisivel. A rampa de saida agora tem 120px, o dobro da
                de entrada, e nao e por simetria: a peca chega ali no trecho
                RAPIDO do percurso, entao precisa de mais distancia para
                gastar o mesmo tempo dissolvendo. Medido, os dois fades levam
                por volta de 1s cada.

                O "terminar mais rapido" que motivou o 34px continua atendido
                pela VELOCIDADE (a volta caiu de 29s para 10s), que e a
                alavanca certa para aquilo — encurtar a mascara nao acelerava
                a saida, so cortava o fade

   A entrada e mais larga que a saida (200px contra 160) porque ali a peca
   emerge de tras do texto: uma transicao curta naquele ponto leria como a
   marca saltando da borda da manchete.

   A MASCARA VAI NA LISTA, e nao no `.orb-recorte`: o recorte de tras carrega o
   SVG das linhas, e mascara-lo comeria as pontas das curvas — foi o que
   aconteceu numa tentativa anterior. A lista e irma do SVG, entao pega so as
   marcas. */
@media (min-width: 1161px) {
  .home-v14 .orb-lista {
    -webkit-mask-image: linear-gradient(to right,
      transparent calc(50% - 20px),
      #000        calc(50% + 40px),
      #000        calc(50% + 50vw - 150px),
      transparent calc(50% + 50vw - 30px));
    mask-image: linear-gradient(to right,
      transparent calc(50% - 20px),
      #000        calc(50% + 40px),
      #000        calc(50% + 50vw - 150px),
      transparent calc(50% + 50vw - 30px));
  }
}

.home-v14 .orb-lista {
  position: absolute;
  inset: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  animation: none;
}


/* O TRECHO QUE A MARCA PERCORRE. 52% ate 92%, e os 52% sao medidos.

   Os quatro trilhos foram amostrados por comprimento de arco para achar, em
   cada um, a fracao em que ele passa de x=820 no palco. De onde vem o 820: o
   palco tem 1600 e o shell 1160, ambos centrados, entao a coluna de texto
   (30rem) termina sempre em x=700 -- nao depende da largura da janela. Os
   120px restantes sao folga de meia caixa mais respiro. t1, t2 e t4 cruzam em
   51.3%, t3 em 49.7%; 52% cobre os quatro.

   49% E NAO 52% (Iago, 28/08): a folga caiu de 120px para 70. O texto termina
   em x=700 e a caixa tem 68 de lado, entao o minimo absoluto — a borda dela
   encostando na ultima letra — seria x=734. Em x=770 sobram 36px de respiro, e
   a marca entra em cena visivelmente mais perto do texto, que era o vazio
   apontado. As fracoes medidas para esse alvo vao de 46.9% a 48.9%; 49% cobre
   os quatro trilhos.

   ESTA REGRA JA SUMIU UMA VEZ, em 28/08, engolida por uma edicao que recortou
   o bloco vizinho. Sem ela `--orb-ini` fica indefinido, `offset-distance:
   var(--orb-ini)` vira invalido e cai para 0% -- a marca passa a percorrer o
   TRILHO INTEIRO, entrando pela esquerda por cima da manchete. Se as caixas
   voltarem a cruzar o texto, conferir primeiro se esta linha existe:
     getComputedStyle($('.orb-cel')).getPropertyValue('--orb-ini')
   devolve vazio quando ela sumiu.

   A VOLTA ANDA JUNTO: o passo e 45% de trilho em 29s, e 40% dao 26s. */
.home-v14 .hp-orbita { --orb-volta: 10s; --orb-ini: 46%; --orb-fim: 90%; }

/* A VOLTA CONTINUA EM 29s, E ISSO FOI TESTADO. A curva de aceleracao faz a
   peca gastar boa parte do ciclo no trecho lento — que cai dentro da nevoa,
   invisivel — e o campo caiu de 4.6 para 3.3 marcas cheias de media. A
   tentativa obvia foi encurtar a volta para 24s; medido, o campo foi de 3.2
   para 3.3. Praticamente nada, e a razao e simples: encurtar a volta acelera
   tudo por igual e nao muda ONDE as pecas estao, so quao rapido passam.
   Densidade e funcao do numero de marcas e do tamanho do percurso, nao da
   velocidade.

   29s -> 20s -> 12s (Thiago, 28/08 — "esta levando muitos segundos pros seis
   aparecerem, por que nao esta dando pra acelerar?").

   A resposta e que dava, e o freio era so conservadorismo meu. O TEMPO ATE O
   CAMPO ENCHER E UMA VOLTA, por definicao: as marcas estao espacadas 1/7 de
   volta, entao a ultima entra em cena um ciclo depois da primeira. Nao ha
   nada estrutural a contornar — encurtar a volta encurta o enchimento na
   mesma proporcao. Com 12s e o adiantamento de 3/7, o campo fecha em ~7s.

   O 29s vinha da epoca do percurso longo. A curva de aceleracao ja distribui rapido/devagar DENTRO do
   percurso; o que faltava era o patamar geral, e e isso que a volta define.
   A densidade nao muda com ela, como o paragrafo acima registra. */

/* POR QUE 41% E NAO 49% (Thiago, 28/08 — "tem logo comecando do meio pra
   frente, nao e legal").

   MEDIDO, com os quatro trilhos amostrados por comprimento de arco: com
   `--orb-ini: 49%` as SETE marcas nasciam entre x=708 e x=743 na tela. Uma
   coluna de 35px de largura, no meio de uma janela de 1470 — 48% dela. Toda
   peca materializava no mesmo ponto, em campo aberto, sem borda nenhuma de
   onde vir. O mesmo do outro lado: todas morriam entre x=1396 e x=1432.

   Nenhum valor de `--orb-ini` conserta isso, e foi por isso que as rodadas de
   calibragem nao saiam do lugar: o problema nao era QUANDO a peca acende, era
   ONDE. O 49% existia para a marca nao cruzar a manchete, que termina em
   x=667 — o fade temporal estava tapando um problema espacial.

   A TROCA: o fade saiu do tempo e foi para o ESPACO. A `.orb-lista` ganhou uma
   mascara em coluna (logo abaixo), e a peca agora ATRAVESSA a nevoa em vez de
   acender parada dentro dela. Com a mascara cuidando de esconder o que corre
   sobre o texto, o percurso pode comecar antes: 41% e o ponto em que os
   trilhos passam por x=690 na tela — o comeco da nevoa, onde o alfa ainda e
   zero —, e 90% e o ponto em x=1440, onde ela ja se apagou. O percurso agora
   COINCIDE com a nevoa: a peca nasce e morre invisivel, dentro dela.

   O TRECHO E CURTO DE PROPOSITO. Medindo com um trecho mais largo (41%-92%),
   o campo caia para 2.9 marcas plenamente visiveis de media — as sete se
   espalhavam por mais x do que a faixa opaca. Agrupando-as em 44% do arco,
   todas ficam dentro da area que se ve. A volta acompanhou (26s -> 29s) para
   a velocidade em px/s nao mudar.

   AS FAIXAS POR LARGURA DE JANELA SAIRAM. Elas encurtavam `--orb-fim` em
   telas menores porque o palco tem 1600px fixos e centrados, entao a borda
   direita da tela caia mais cedo no percurso. A mascara e ancorada na
   viewport (`50% +/- 50vw`), nao no palco, entao ela acompanha qualquer
   largura sozinha. */

.home-v14 .orb-cel {
  position: absolute;
  top: 0;
  left: 0;
  transform: none;
  
/* `opacity: 1` EXPLÍCITO. A `.fx-cel` da v3 — que é de onde vem o desenho do
     quadradinho de vidro — nasce em 0 e conta com a animação `fx-entra`, que
     tem `forwards`. Trocando a animação por `orb-corre` sem trocar o repouso,
     as seis caixas ficavam invisíveis. A v8 já tinha tropeçado nisso. */
  opacity: 1;
  offset-path: var(--trilho);
  offset-rotate: 0deg;
  offset-anchor: 50% 50%;
  animation: orb-corre var(--orb-volta) linear var(--atraso, 0s) infinite;
}
/* O PERCURSO NAO E O TRILHO INTEIRO. Vai de `--orb-ini` a `--orb-fim`, e nao
   de 0% a 100%: o comeco do trilho passa por cima da manchete e do subtitulo,
   e o fim sai pela borda direita.

   ESTA DEFINICAO JA FOI PERDIDA UMA VEZ, em 28/08, quando uma edicao recortou
   o bloco vizinho e levou junto a versao com as variaveis -- sobrou a antiga,
   de 0% a 100%, e as dez marcas voltaram a atravessar o texto inteiro. Se o
   sintoma reaparecer, medir o `offsetDistance` no momento do toque: valor
   abaixo de `--orb-ini` significa que este keyframe voltou a ser o generico.

   A ENTRADA LEVA 16% DO TRECHO, e nao 3%. Os 3% vinham de quando a marca
   comecava fora da tela, atras da mascara lateral: ali ela podia acender de
   uma vez, porque ninguem via o momento. Comecando em 52% ela nasce no meio
   da tela, em campo aberto, e um fade curto ali lia como a caixa pipocando do
   nada.

   A SAIDA FICA EM 86%: acontece rente a borda, onde a mascara lateral ja esta
   apagando. Alongar as duas pontas deixaria a marca cheia em menos da metade
   do percurso. */
/* O FADE DE PONTA E O `scale` SAIRAM DAQUI (28/08). Os dois comentarios
   longos que ocupavam este lugar explicavam calibragens de `opacity` e de
   `scale` dentro do keyframe — 8% contra 24% de entrada, a peca chegando a
   86% do tamanho — e nada disso existe mais. Eram tentativas de resolver no
   TEMPO uma coisa que era de LUGAR, e a mascara da `.orb-lista` as tornou
   desnecessarias. O historico esta no git, em 28/08. */
@keyframes orb-corre {
  /* SO O PERCURSO. O `opacity` e o `scale` que moravam aqui foram embora:
     eram um fade de TEMPO tentando resolver um problema de LUGAR, e o que se
     via era a caixa acendendo parada no meio da tela. Quem faz o fade agora e
     a mascara da `.orb-lista`. */
  from { offset-distance: var(--orb-ini); }
  to   { offset-distance: var(--orb-fim); }
}

/* O LOGO NAO CONTRA-GIRA (Thiago, 28/08 — "nao e pra girar o logo").

   Esta regra ja existia, e mesmo assim as marcas voltaram a girar por meia
   hora. A causa nao era ela: o corte do keyframe acima deixou uma CHAVE
   ORFA logo antes daqui, e um `}` solto no topo do arquivo faz o parser
   descartar a regra seguinte enquanto se recupera. A vitima foi exatamente
   esta linha — e sem ela valia o `.orb-cel img { animation: orb-gira ...
   reverse }` la de cima, herdado da v8, onde a LISTA girava e a imagem
   contra-girava para o logo ficar de pe. Na v14 a lista esta parada, entao a
   contra-rotacao sozinha vira rotacao.

   Fica o registro do sintoma: quando algo "volta" sem ninguem ter mexido,
   procurar chave desbalanceada antes de procurar cascata. */
.home-v14 .orb-cel img { animation: none; }

/* ─── AS DUAS CAMADAS ───
   A divisão agora é por MARCA, e não por metade do quadro. Numa órbita fechada
   dava para trocar a mesma peça de plano no meio do caminho, com um crossfade
   no eixo vertical; num trilho aberto essa fronteira cairia justamente sobre a
   manchete, que é onde ela não pode aparecer.

   Três marcas correm atrás do texto e três por cima — e como cada trilho cruza
   o bloco de texto em altura diferente, o que se lê é o que ele pediu: umas
   passam por trás, outras por frente. */
.home-v14 .orb-tras   { z-index: 0; }
/* Ela passa POR CIMA do texto — nada nela pode interceptar clique, e o link
   dos rostos fica embaixo dela em boa parte do percurso. */
.home-v14 .orb-frente { z-index: 2; pointer-events: none; }

/* A MÁSCARA RADIAL DA v8 NÃO VALE MAIS AQUI: ela apagava as pontas dos anéis
   para eles não terminarem num traço seco no vazio, e um trilho aberto TEM de
   chegar à borda — é o corte na lateral que o faz ler como continuando fora do
   quadro. */
.home-v14 .hp-orbita { -webkit-mask-image: none; mask-image: none; }


/* ─── 3. AS LINHAS SÓ NA CAMADA DE TRÁS ───
   Um fio branco por cima da tipografia vira uma risca cortando a manchete — a
   v8 já tinha registrado isso quando o anel de fora cruzava o texto e teve de
   ser rebaixado para .045. Aqui a saída não é rebaixar, é ficar atrás: a
   camada da frente carrega só as marcas.

   O HTML da camada da frente já não tem o SVG; esta regra é a trava para quem
   copiar o bloco de novo sem perceber. */
.home-v14 .orb-frente .orb-trilhos { display: none; }

/* ─── 4. AS CAIXAS SOBRE O TEXTO ───
   Passando por cima da manchete, a caixa de vidro precisa de um miolo OPACO —
   o `#101018` que ela já tem — senão a letra aparece por dentro dela e as duas
   se embaralham. É o mesmo motivo que a v3 registrou para o miolo do quadrado
   não ser semitransparente, agora por uma segunda razão.

   E ganha sombra, que na v8 não existia: sobre o campo vazio a caixa se
   separava sozinha; sobre a manchete branca ela precisa de um degrau de
   profundidade para ler como estando NA FRENTE, e não colada no mesmo plano. */
.home-v14 .orb-cel {
  box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .45);
}

@media (max-width: 1160px) {
  /* AS MARCAS SAEM EM 1160px, que e o proprio --shell-page (Thiago, 28/08).

     O limite tem uma razao geometrica, nao e um numero escolhido a olho:
     enquanto o shell de 1160 CABE na janela, o texto ocupa sempre as mesmas
     coordenadas dentro do palco de 1600 — os dois sao centrados e de largura
     fixa, entao a faixa livre onde as tres curvas foram desenhadas e sempre a
     mesma. Abaixo de 1160 o shell encolhe junto com a janela, mas o PALCO
     NAO: o texto passa a ocupar proporcionalmente mais dele, e a faixa livre
     encolhe ate sumir.

     Medido em 960x700: o titulo, que em 1440 termina em x=732 do palco, vai a
     826; a area livre cai para 410px de largura e as curvas passam a cruzar a
     manchete. Nao ha valor de trilho que sirva para as duas larguras, porque
     o palco nao acompanha.

     Estava em 860px, que e onde o hero vira uma coluna. Entre 860 e 1160 as
     marcas corriam por cima do titulo.

     AS LINHAS FICAM: sao cenario, atravessam a tela inteira e nao competem
     com a leitura.

     E AS MARCAS TAMBEM FICAM, desde 28/08 — mas em outro formato. So a camada
     de TRAS e apagada aqui; a da frente vira uma faixa horizontal no pe do
     hero, no bloco do fim do arquivo. Era ela ou perder as dez marcas em
     telefone, que e onde o material mais circula. */
  .home-v14 .orb-tras .orb-lista { display: none; }
  .home-v14 .orb-trilhos { opacity: .7; }
}

@media (prefers-reduced-motion: reduce) {
  /* As marcas param ONDE ESTÃO no trilho, e não empilhadas na origem: os
     atrasos negativos entram como `offset-distance` fixo, um por marca. Sem
     isto, `animation: none` devolveria as seis para 0% — todas amontoadas na
     borda esquerda. */
  .home-v14 .orb-cel { animation: none; }
  .home-v14 .orb-tras   .orb-cel:nth-child(1) { offset-distance: 56%; opacity: 1; }
  .home-v14 .orb-frente .orb-cel:nth-child(1) { offset-distance: 61%; opacity: 1; }
  .home-v14 .orb-frente .orb-cel:nth-child(2) { offset-distance: 66%; opacity: 1; }
  .home-v14 .orb-frente .orb-cel:nth-child(3) { offset-distance: 71%; opacity: 1; }
  .home-v14 .orb-frente .orb-cel:nth-child(4) { offset-distance: 76%; opacity: 1; }
  .home-v14 .orb-frente .orb-cel:nth-child(5) { offset-distance: 81%; opacity: 1; }
  .home-v14 .orb-frente .orb-cel:nth-child(6) { offset-distance: 86%; opacity: 1; }
}

/* ─── 8. O ANEL QUE SEPARA UMA CAIXA DA OUTRA (Thiago, 27/08) ───
   O "corte" que aparecia em algumas caixas não era corte: eram DUAS CAIXAS
   sobrepostas. Medido no navegador ao longo de 20s, em 14% dos quadros havia
   um par se cruzando, e no pior caso a área comum era de 18×66px — quase um
   terço de uma delas.

   Elas se cruzam porque os quatro trilhos se cruzam, e é isso que dá
   profundidade ao campo: uma passa na frente, outra atrás. O que faltava era o
   olho PODER VER isso. As duas têm o mesmo miolo `#101018`, então a de cima
   comia um pedaço da de baixo sem nenhuma emenda — e o que se lia era uma
   caixa com a metade faltando e o contorno interrompido no meio do nada.

   O ANEL É DA COR DO CAMPO e não uma borda clara: ele não desenha contorno
   nenhum sobre o fundo — some nele — e só aparece quando há outra caixa atrás,
   separando as duas. É o mesmo mecanismo dos avatares do bloco de rostos e das
   tags dos dados, que empilham pelo mesmo motivo.

   VEM ANTES DA SOMBRA na lista: `box-shadow` pinta de trás para a frente, e o
   anel precisa estar por dentro da sombra de profundidade, colado na caixa. */
.home-v14 .orb-cel {
  box-shadow: 0 0 0 2px #0B0B14, 0 .75rem 2rem rgba(0, 0, 0, .45);
}


/* ─── 9. ONDE O PERCURSO COMEÇA TAMBÉM DEPENDE DA LARGURA ───
   O corte que aparecia em algumas caixas — reto, horizontal, comendo a metade
   de baixo — não era corte nem sobreposição entre marcas: era a marca passando
   ATRÁS de um elemento opaco do bloco de texto. Os avatares (`#101018`) e as
   tags dos dados (`#191920`) são quase da cor do campo e estão na camada da
   frente do texto (`z-index: 1`); uma marca da camada de trás cruzando por ali
   fica escondida atrás de um retângulo que o olho não vê como retângulo.

   POR QUE ISSO SÓ ACONTECE EM JANELA ESTREITA. Enquanto o shell de 1160px
   cabe na tela, o fim da coluna de texto cai SEMPRE em x=732 do palco — o
   palco tem 1600 fixos e os dois são centrados, então a conta se cancela e os
   47% (x≈730–770) passam raspando à direita do texto em qualquer largura.
   Abaixo de 1160px o shell encolhe e a coluna passa a nascer na margem: o fim
   do texto vira `1312 − largura/2` em coordenadas do palco, e cresce conforme
   a janela diminui — 762 em 1100px, 812 em 1000, 862 em 900. É o texto que
   avança sobre a faixa das marcas, não o contrário.

   Daí os três degraus abaixo: cada um empurra a ENTRADA da marca para depois
   do texto naquela largura. Junto com `--orb-fim`, que já cuidava da borda
   direita, o trecho inteiro passa a ser função da janela — que é o que ele
   tem de ser, porque o palco não escala e o texto sim. */
/* OS TRES DEGRAUS DE `--orb-ini` POR BREAKPOINT SAIRAM (28/08). Eles
   empurravam a partida da marca conforme a janela estreitava — 51%, 53%,
   56%, depois remedidos para 57%, 59%, 64% — e cada rodada de ajuste exigia
   remedir os tres. Era o mesmo trabalho da mascara calculada acima, feito a
   mao e em tres lugares, e um deles chegou a virar um RECUO sem ninguem
   notar: 51% e menos que os 52% da base.

   A mascara da lista cobre todas as larguras de uma vez, inclusive as que
   nunca teriam breakpoint proprio. O que sobra aqui e so o encurtamento do
   percurso pela borda direita, que e outra coisa. */

/* ─── 10. OS FIOS EM DEGRADÊ (Thiago, 27/08) ───
   Os trilhos eram um branco chapado a 7% de ponta a ponta. Chapado, o fio tem
   a mesma presença onde há marca e onde não há — e como ele atravessa a tela
   inteira, o que se via era uma grade fina de fundo, não um percurso.

   O DEGRADÊ DÁ CENTRO AO CAMPO: nasce em transparente na borda esquerda, sobe
   ao pico na faixa das marcas e volta a sumir na direita.

   O PICO ANDOU PARA A DIREITA (Thiago, 27/08). Ele estava em 55% do palco e,
   mesmo fraco, o fio ainda se via atrás da manchete e do subtítulo — texto e
   linha disputando a mesma área. Agora as curvas ficam praticamente pretas até
   40% (a coluna de texto acaba em 46%) e só acendem depois disso, em cima da
   metade em que as marcas correm. O que era cenário no lugar errado virou
   cenário só onde há o que mostrar. É quase o dobro do
   valor antigo no ponto mais forte e zero nas pontas — mais linha onde ela é
   percurso, nenhuma onde ela só sangraria.

   ELE SUBSTITUI PARTE DO TRABALHO DA MÁSCARA. A máscara lateral do §8 continua
   ali por causa das CAIXAS, que não podem ser cortadas ao meio pela borda; o
   fio agora chega apagado por conta própria antes mesmo dela.

   O TRACEJADO ENTRA JUNTO (Thiago, 27/08). Ele é o eixo do desenho, vem da
   v13 e não carrega marca nenhuma — a primeira versão deste bloco o deixou de
   fora, chapado, para não perder a única linha que atravessa reto. Só que uma
   linha chapada no meio de quatro em degradê é a linha que se vê: ela passou a
   parecer um elemento novo, acrescentado. Com o mesmo degradê das outras, ela
   volta a ser o que é — o eixo, e não um traço por cima do desenho. */
.home-v14 .orb-trilhos path { stroke: url(#v14-fio); }


/* ─── 11. DUAS DAS QUATRO LINHAS PUXAM O DEGRADÊ (Thiago, 27/08) ───
   Com as quatro no mesmo fio, o campo fica plano: quatro curvas de igual peso
   se cruzando lêem como grade, e nenhuma delas é o caminho — são todas fundo.
   O que faltava era hierarquia dentro do próprio desenho.

   DUAS GANHAM O DEGRADÊ FORTE — a 1ª, que sobe da base até o alto do quadro, e
   a 4ª, que corre baixa pelo pé. Uma em cada metade: assim o destaque
   atravessa o campo inteiro e as outras duas ficam como eco entre elas. O pico
   é 40% de branco contra 20% das outras, no mesmo ponto do percurso — as duas
   famílias sobem e descem juntas, então o campo tem um centro só.

   NENHUMA LINHA NOVA. São os mesmos quatro `d` de sempre; o que muda é de que
   gradiente cada uma bebe. Uma quinta curva só para "ter uma linha bonita"
   seria desenho a mais num campo que já tem quatro — e a v13 já registrou que
   linha sem marca em cima vira risco cortando a tela.

   O LARANJA DA MARCA PASSOU POR AQUI E SAIU (Thiago, 27/08). A curva que sobe
   chegou a levar `brand/orange` virando o tijolo `brand/orange-hover` na
   descida, e funcionava enquanto o único outro laranja da dobra era o botão do
   header. Quando "quem já usa" ganhou o degradê da marca no <h1>, passaram a
   ser três — e o da linha é o único dos três que é CENÁRIO: o botão é ação e o
   título é o argumento da página. Por kb/design.md §1 a cor tem dono e marca
   onde a PowerComm agiu; uma curva de fundo não é lugar dela.

   O gradiente `#v14-fio-forte` continua definido no SVG, em laranja, para o
   caso de a decisão voltar. Nada aponta para ele hoje. */
.home-v14 .orb-trilhos path:nth-of-type(1),
.home-v14 .orb-trilhos path:nth-of-type(4) {
  stroke: url(#v14-fio-claro);
}

/* ─── 12. A MARCA ENTRA RÁPIDO E FREIA NO FIM (Thiago, 27/08) ───
   O percurso era `linear`, e linear em movimento contínuo é o que deixa a
   dobra monótona: a marca atravessa o quadro na mesma velocidade do primeiro
   ao último pixel, e oito peças fazendo isso ao mesmo tempo lêem como esteira
   mecânica. Nada ali muda de estado — só de posição.

   A CURVA É PRÓPRIA, E NÃO UMA DAS DO SISTEMA. A primeira tentativa usou a
   `--ease` de UI, `cubic-bezier(.22, 1, .36, 1)`: ela parte a 4,5× da média e
   chega a ZERO no fim — medido na tela, a marca andava 110px no primeiro
   segundo e 26 no sétimo. Rápido demais na entrada e quase parada na saída, o
   que troca a monotonia de velocidade constante por uma marca que parece ter
   travado (Thiago, 27/08). As curvas do sistema são para percursos de menos de
   um segundo; aqui o gesto dura meio minuto, e a mesma curva vira outra coisa.

   `cubic-bezier(.3, .42, .8, .84)` é a proporção que sobrou: começa a ~1,4× a
   velocidade média e termina a ~0,8×. A tentativa anterior ia a 0,6× no fim e
   ainda lia como TRAVAMENTO (Thiago, 27/08) — e o motivo não é só a
   velocidade: numa curva que desacelera, as marcas se ACUMULAM onde andam
   devagar, então o fim do trecho junta peças lentas e a leitura vira "elas
   pararam ali". Menos freio resolve metade; a outra metade é o fade abaixo. A conta que dá esses números é a tangente da bezier nas pontas
   — `y1/x1` na entrada e `(1-y2)/(1-x2)` na saída —, e é por ali que se
   calibra: subir `y1` acelera a entrada, aproximar `y2` de 1 faz a saída
   morrer.

   O QUE ISSO FAZ NA TELA: a marca entra já andando, cobre a primeira metade do
   trecho mais rápido e vai assentando até o fim, onde o fade a apaga ainda em
   movimento. Como as oito estão defasadas em 3,6s, em qualquer instante há
   marca acelerando e marca assentando — é essa diferença de velocidade entre
   elas que tira a leitura de esteira.

   `infinite` COM CURVA REPETE A CURVA A CADA VOLTA, e é isso que se quer: cada
   travessia é um gesto com começo e fim, não um trecho de um movimento
   infinito. A emenda entre uma volta e a seguinte cai dentro do fade das
   pontas, então o salto de velocidade não aparece. */
.home-v14 .orb-cel {
  animation-timing-function: cubic-bezier(.3, .42, .8, .84);
}


/* ═══ 8. O HERO TERMINA ARREDONDADO (Thiago, 27/08) ═══
   Referência dele: o bloco escuro não vai até a beirada da próxima seção — ele
   fecha com os cantos inferiores arredondados. O que isso muda na leitura é que
   o hero passa a ser uma PEÇA POUSADA na página, e não a primeira faixa de uma
   pilha de faixas.

   A REFERÊNCIA TINHA UMA FAIXA CLARA DE LOGOS logo abaixo, encaixada no canto
   arredondado, e ela foi feita e removida na mesma sessão (Thiago, 27/08):
   primeiro os logos, que sobre superfície clara chegavam com o próprio bloco
   de fundo — V.tal em grafite, XP em preto, Tenda em vermelho —, e depois a
   faixa vazia junto. O que fica da referência é só o canto.

   QUEM ARREDONDA É O PSEUDO, e não a <section>. O campo escuro desta cadeia é
   `.home-v5 .hero-v3::before` — um pseudo que nasce 30rem ACIMA do hero para
   cobrir a barra do header. A <section> em si é transparente; pôr raio nela
   não arredondaria nada, e `overflow: hidden` nela cortaria o pseudo no topo,
   que é o erro que a v5 já corrigiu uma vez e está registrado lá.

   O RAIO É O `2xl` DA ESCALA (32px) COM FOLGA PARA CRESCER até 40 em tela
   larga: numa superfície da largura da janela, 32px lê como canto quebrado e
   não como forma. O piso continua sendo o valor do sistema.

   O RECORTE DA ÓRBITA GANHA O MESMO RAIO. Ele é `inset: 0` do hero e é quem
   corta as marcas; sem isto, uma caixa passando baixo à direita apareceria
   inteira por cima do canto que o campo já arredondou. */
.home-v14 {
  --v14-raio: clamp(2rem, 2.6vw, 2.5rem);
}
.home-v14 .hero-v3::before,
.home-v14 .orb-recorte {
  border-radius: 0 0 var(--v14-raio) var(--v14-raio);
}


/* ═══ 9. OS BIG NUMBERS DA v13, NO PÉ DO HERO (Thiago, 27/08) ═══
   Trazidos inteiros — a folha da v13 e esta não se falam, então o bloco é
   copiado e não herdado, do mesmo jeito que a v8 foi.

   O HERO GANHA A SEGUNDA LINHA. Ele já é `display: grid`; passa a ter `1fr`
   para o bloco de texto e `auto` para a faixa. É estrutura e não posição — a
   v13 registra as duas tentativas erradas que vieram antes (margem maior, que
   desalinha o texto todo; e absoluto com `bottom`, que caiu em cima do
   subtítulo porque `box-sizing: border-box` faz o padding encolher a área de
   conteúdo em vez de crescer a seção). As camadas da órbita são absolutas e
   não entram na conta das linhas. */
.home-v14 .hero-v3 {
  grid-template-rows: 1fr auto;
}

/* ─── A FAIXA ───
   Segunda linha do grid do hero. A primeira (`1fr`) leva o bloco de texto e
   esta (`auto`) mede o próprio conteúdo — é o que garante que uma nunca cubra
   a outra, ao contrário de um painel absoluto com `bottom`.

   `align-items: start` e não `center`: as três descrições têm alturas
   diferentes (uma quebra em duas linhas, outra não), e centradas os três
   números ficariam em alturas diferentes. Presos pelo topo, a linha dos
   números é uma só. */
.home-v14 .n13-faixa {
  list-style: none;
  width: min(100% - var(--pad) * 2, var(--shell-page));
  margin: 0;
  padding: 0 clamp(1.25rem, 2.6vw, 2rem);
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: clamp(1.5rem, 4vw, 3rem);
  opacity: 0;
  animation: hero-sobe 1s var(--ease-cena) .85s forwards;
}

/* ─── O DADO ───
   A tag fica ACIMA do número e não ao lado dele. Na faixa horizontal cada
   bloco tem uma coluna estreita, e a tag ao lado comeria metade dela — o que
   sobrava para o número era um vão. Empilhada, ela abre o bloco: quem, e
   depois o quê. */
.home-v14 .n13-dado {
  display: grid;
  justify-items: start;
  gap: clamp(.75rem, 1.6vh, 1rem);
}
.home-v14 .n13-txt {
  display: grid;
  gap: .25rem;
  text-align: left;
  font-size: .8125rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, .58);
}

/* O NÚMERO. Aqui ele pode voltar ao corpo de dado — não divide mais espaço
   com uma tag na horizontal, e é o elemento que a faixa existe para mostrar. */
.home-v14 .n13-txt strong.n13-num {
  font-size: clamp(1.5rem, 2.6vw, 2.125rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.03em;
  color: #FFFFFF;
}

/* ─── AS TAGS ───
   Sobrepostas quando são duas, no mesmo mecanismo das duas pílulas da tag de
   case (`.case-tag-cli` em home.css): a de trás avança por baixo da da frente,
   e o `padding-left` extra dela salva o texto de ser comido.

   O FUNDO É OPACO por causa disso. Ele era branco a 5% sobre o tinta;
   sobreposto, a de baixo apareceria através da de cima e a emenda viraria uma
   mancha clara. #191920 é aquele mesmo 5% já composto sobre #0B0B14 — a cor na
   tela não muda, o que muda é ela ser chapada.

   O ANEL É DA COR DO CAMPO e não uma borda clara: separa uma tag da outra sem
   desenhar um contorno que apareça. Mesma solução dos avatares. */
.home-v14 .n13-marcas { display: flex; }
.home-v14 .n13-marca {
  position: relative;
  background: #191920;
  color: rgba(255, 255, 255, .52);
  letter-spacing: .08em;
  box-shadow: 0 0 0 2px #0B0B14;
}
/* A primeira por cima: com a ordem invertida, a segunda cobriria o começo da
   primeira — e é o começo do nome que se lê. */
.home-v14 .n13-marca:first-child { z-index: 1; }
.home-v14 .n13-marca + .n13-marca {
  margin-left: -.9rem;
  padding-left: 1.375rem;
}

@media (max-width: 720px) {
  /* Três colunas viram uma: com a descrição em duas linhas e o número em corpo
     de dado, abaixo disto cada bloco fica com três palavras por linha.
     (Sobrescrita mais abaixo — ver o bloco do telefone no fim do arquivo.) */
  .home-v14 .n13-faixa { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
}

/* ─── MAIS JUNTOS E MENORES (Thiago, 27/08) ───
   Na v13 a faixa era `repeat(3, 1fr)` sobre o shell inteiro, e ali isso estava
   certo: o texto era centralizado e ocupava a largura toda, então os três
   números repartiam a mesma régua. Aqui a coluna de texto para em 30rem e o
   resto do quadro é da órbita — os três esticados até a borda direita ficavam
   longe uns dos outros e ainda entravam por baixo das marcas.

   AS COLUNAS PASSAM A MEDIR O CONTEÚDO. `max-content` mais `justify-content:
   start` agrupa os três à esquerda, encostados no bloco de texto que está
   acima deles; o vão vira o gap e não sobra dentro de cada coluna. O da
   direita é a descrição mais longa — "Abertura média dos comunicados" — e é
   ela que dá a largura do grupo.

   O NÚMERO DESCE UM DEGRAU, de 2.125rem para 1.625rem no teto. Ele não é a
   manchete da dobra: a manchete é a manchete, e um dado do tamanho dela
   disputa a leitura com ela. Menor, o grupo lê como assinatura do bloco de
   texto — que é onde ele está.

   O QUE ENCOLHEU FOI SÓ ESTE BLOCO, e é a diferença que importa. Uma rodada
   tentou dar ritmo baixando a manchete, o subtítulo, os rostos e a altura do
   campo junto — e o resultado foi a dobra inteira comprimida (Thiago, 27/08).
   O respiro entre os elementos da coluna é o que estava certo; o que estava
   fora de escala era o tamanho dos dados. */
.home-v14 .n13-faixa {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  justify-content: start;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.home-v14 .n13-txt strong.n13-num {
  font-size: clamp(1.25rem, 1.9vw, 1.625rem);
}
@media (max-width: 720px) {
  /* Empilhado, a coluna volta a ser uma e as três medem a linha. */
  .home-v14 .n13-faixa {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    gap: 1.25rem;
  }
}

/* ─── A DESCRIÇÃO QUEBRA EM DUAS LINHAS (Thiago, 27/08) ───
   Em linha única as três descrições têm larguras muito diferentes — de
   "Visualização no Teams" a "Abertura média dos comunicados" — e como a coluna
   media o conteúdo (`max-content`), cada bloco ficava com uma largura, o
   espaçamento entre eles variava e a leitura perdia o ritmo. O grupo lia como
   três frases soltas na horizontal.

   A COLUNA PASSA A TER LARGURA FIXA e a descrição quebra dentro dela. Os três
   blocos ficam do mesmo tamanho, o vão entre eles é sempre o mesmo, e a
   descrição vira um bloco de duas linhas sob o número — que é a anatomia que a
   v13 registra, agora com a proporção certa.

   `balance` E NÃO `pretty` aqui: são frases de três a quatro palavras, e o
   `pretty` só cuida das duas últimas linhas — num texto de duas linhas ele não
   faz nada. O `balance` reparte as palavras entre as duas, que é o que evita
   uma linha cheia e outra com uma palavra sozinha. */
.home-v14 .n13-faixa {
  grid-auto-columns: 10.5rem;
}
.home-v14 .n13-txt span {
  text-wrap: balance;
}

@media (max-width: 720px) {
  /* Em coluna única a largura fixa vira uma medida estreita no meio da tela. */
  .home-v14 .n13-faixa { grid-auto-columns: auto; }
}

/* ─── MAIS UM DEGRAU PARA BAIXO, SÓ NO GRUPO (Thiago, 27/08) ───
   Segunda redução dos dados, e de novo sem tocar no resto da coluna — a rodada
   que mexeu na manchete e no campo junto está registrada acima como o que não
   fazer. Aqui encolhe o bloco inteiro em proporção: número, descrição, tag e a
   largura da coluna que as três dividem.

   A TAG PRECISA ENCOLHER JUNTO. Ela é a `.pill` do sistema, dimensionada para
   rótulo de seção; ao lado de um número de 1.375rem ela ficava do tamanho da
   descrição e o bloco lia com dois pesos iguais em cima. O anel de 2px do
   campo continua — é ele que separa as duas tags sobrepostas do V.tal/Ocyan. */
/* OS TRÊS VOLTAM A SE ENCOSTAR (Thiago, 27/08). A coluna de 9.25rem era mais
   larga que qualquer uma das descrições — elas param em 16ch, uns 104px — e a
   sobra dentro de cada célula somava ao gap: o que se via entre os dados não
   eram os 32px do `gap`, eram quase 80. Com a coluna medindo perto do
   conteúdo e o gap menor, o grupo volta a ler como um bloco só.

   A COLUNA NÃO PODE ENCOLHER ALÉM DA DESCRIÇÃO: abaixo de ~7rem o `max-width:
   16ch` deixa de mandar na quebra e as três descrições passam a quebrar em
   lugares diferentes — que é o desalinho que o §"duas linhas" resolveu. */
.home-v14 .n13-faixa {
  grid-auto-columns: 7.75rem;
  gap: clamp(.875rem, 1.6vw, 1.25rem);
}
.home-v14 .n13-txt strong.n13-num {
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
}
.home-v14 .n13-txt {
  font-size: .75rem;
}
.home-v14 .n13-marca {
  font-size: .5625rem;
  padding: .3125rem .625rem;
}
.home-v14 .n13-marca + .n13-marca {
  margin-left: -.75rem;
  padding-left: 1.125rem;
}
.home-v14 .n13-dado {
  gap: clamp(.5rem, 1.2vh, .8125rem);
}

@media (max-width: 720px) {
  .home-v14 .n13-faixa { grid-auto-columns: auto; }
}

/* ─── O RESPIRO ACIMA DA FAIXA, E O DO CAMPO (Thiago, 27/08) ───
   Duas medidas, e as duas foram MEDIDAS na tela e não estimadas — num hero que
   é grid com uma linha `1fr` centralizada, mudar um padding move três
   distâncias ao mesmo tempo.

   1. A FAIXA SE AFASTA DOS ROSTOS. Ela é outro grupo: o bloco de texto termina
      no link dos rostos, e os dados são a assinatura dele. Colados, os dois
      liam como uma lista de quatro linhas.

   2. O CAMPO FICA SIMÉTRICO. O respiro de cima era maior que o de baixo por
      herança da v3, onde o topo maior servia para DESCER um conteúdo que ficava
      encostado no header. Aqui embaixo tem a faixa, e o desequilíbrio aparece:
      medido, eram 76px acima da manchete contra 52 abaixo dos dados.

   O PADDING DE CIMA CARREGA A BARRA. O header flutua SOBRE o hero e come 24px
   do topo dele — por isso os dois valores não são iguais no CSS: o de cima é o
   de baixo mais a altura que a barra cobre. */
/* ─── OS TRÊS BLOCOS DA COLUNA, COM O MESMO VÃO (Thiago, 27/08) ───
   A coluna tem TRÊS blocos de informação e não cinco elementos soltos:

     1. manchete + subtítulo   (o que a página diz)
     2. os rostos + a frase    (quem conta)
     3. os três dados          (o que mudou)

   Dentro do bloco 1 o espaço é de 25px — é ele que amarra a manchete ao
   subtítulo. ENTRE os blocos o vão tem de ser bem maior que isso, senão os
   três lêem como uma lista de cinco linhas; e tem de ser o MESMO nos dois
   lugares, senão um dos blocos parece pertencer ao vizinho mais próximo.

   `--v14-grupo` é esse vão, escrito uma vez e usado nos dois. Ele vale cerca
   de duas vezes e meia o espaço interno — 64px contra 25 —, que é a proporção
   que faz três grupos lerem como três.

   PASSOU POR 49px ANTES DESTE VALOR, e a lição vale o registro: 49 já era o
   dobro do espaço interno e, na régua, "correto" — mas na tela a diferença
   entre 41 e 49 não se vê. Separação de grupo não se resolve no limite; ou o
   salto é evidente, ou o leitor continua lendo uma lista só. */
/* A variável mora no HERO e não na grade: a faixa de dados é irmã da grade,
   não filha dela — declarada lá, `var(--v14-grupo)` não chegava na faixa, a
   margem virava inválida e o vão que sobrava era a folga do grid. Foi assim
   que os dois vãos ficaram em 49 e 29 com a mesma linha de CSS. */
.home-v14 .hero-v3 { --v14-grupo: clamp(2.75rem, 7vh, 4rem); }
.home-v14 .hp-vozes  { margin-top: var(--v14-grupo); }
.home-v14 .n13-faixa { margin-top: var(--v14-grupo); }

/* OS DOIS RESPIROS SAEM DO MESMO VALOR (Thiago, 27/08).
   A primeira tentativa deu dois clamps diferentes — 11vh em cima, 6.85vh
   embaixo — e eles só coincidiam na altura de janela em que foram medidos.
   Medido em quatro alturas, batiam em 950, 1100 e 1300 e erravam 17px em 800:
   duas curvas de vh que se cruzam num ponto, não uma regra.

   AGORA É UM VALOR SÓ e duas correções fixas em px sobre ele — porque o que
   separa o respiro do CSS do respiro que se VÊ não escala com a janela:

     · em cima, a barra do header flutua sobre o hero e come 24px dele; e a
       linha da manchete tem meio-entrelinhamento acima do glifo, uns 12px,
       que já é respiro. Sobram +20px de padding, medidos na tela.
     · embaixo, a última linha desce uns 5px abaixo do texto.

   E O BLOCO DE TEXTO ENCOSTA NO TOPO da própria célula. Com ele centrado, a
   sobra da linha `1fr` se repartia entre o topo e o vão até a faixa, e cada
   altura de janela dava uma divisão diferente — era essa a outra metade do
   problema. Preso pelo topo, o padding manda sozinho; a sobra toda vai para o
   vão entre os rostos e os dados, que é onde ela não muda nada. */
.home-v14 .hero-v3 {
  /* O ALVO É 80px DOS DOIS LADOS (Thiago, 27/08) — o respiro que se vê, do
     pé da barra ao topo do "H" e da última linha dos dados ao fim do campo.
     As duas correções são medidas na tela: 16,5px em cima (a barra que cobre
     o hero, menos o que o glifo já ganha da linha) e +0,5px embaixo. O de baixo
     mudou de sinal quando a tag desceu para o fim do bloco: antes o último
     elemento era uma linha de texto, que desce alguns pixels abaixo do que se
     vê; agora é uma pílula, cuja borda inferior é exatamente o que o olho
     mede.

     MEDIR O TOPO EXIGE OLHAR SÓ A COLUNA DE TEXTO. A primeira leitura varria
     a faixa até 800px de x e dava 80px certinhos — mas o primeiro pixel claro
     ali não era o "H", era um logo da órbita passando alto. Com a varredura
     presa em 172–540, o valor real apareceu: 93px, que é o que ele viu na
     tela. Os 13px de diferença saíram daqui.

     O VALOR É FIXO, E NÃO UM vh (Thiago, 27/08). Com `8.42vh` ele dava os 80px
     na janela de 950 em que foi medido e 60 numa de 800 — o respiro do rodapé
     mudava de tamanho conforme a altura do monitor de quem abre a página, que
     é o oposto de uma medida. 5rem é 80px em qualquer janela.

     A EXCEÇÃO É TELA BAIXA: abaixo de 760px de altura o campo inteiro é
     medido pelo `100svh` e 80px em cima e embaixo passam a ser um terço dele.
     Ali os dois caem juntos para 52 — continuam iguais entre si, que é a
     regra que não pode quebrar. */
  --v14-respiro: 5rem;
  padding-top: calc(var(--v14-respiro) + 16.5px);
  padding-bottom: calc(var(--v14-respiro) + .5px);
}
.home-v14 .hero-v3-grade { align-self: start; }

@media (max-height: 760px) {
  .home-v14 .hero-v3 { --v14-respiro: 3.25rem; }
}

/* ─── A TAG VAI PARA O FIM, E AS TRÊS DESCRIÇÕES QUEBRAM IGUAL (Thiago, 27/08) ───

   1. A ORDEM. O número é o que a faixa existe para mostrar e passa a abrir o
      bloco; a descrição explica; a tag, que é atribuição, fecha. Ela estava em
      cima por herança da rodada das notificações, onde cada dado era um card e
      a tag era o remetente. Aqui não é card: o primeiro peso da leitura tem de
      ser o dado.

      É `order` e não HTML remontado — a ordem do documento continua sendo
      cliente → número → descrição, que é como um leitor de tela deve receber:
      quem, quanto, do quê.

   2. AS DUAS LINHAS. "Visualização no Teams" cabia numa linha só enquanto as
      outras duas quebravam, e o desalinhamento aparecia justamente onde os
      três deveriam ler como um conjunto. A saída não foi reescrever o texto —
      cada descrição tem lastro em content/ e mexer nelas por causa de layout é
      inventar dado. É a MEDIDA que passa a decidir: com a descrição limitada a
      16ch, as três quebram em duas linhas, e o `balance` reparte as palavras
      entre elas em vez de deixar uma sozinha embaixo. */
.home-v14 .n13-dado {
  grid-template-columns: minmax(0, 1fr);
}
.home-v14 .n13-marcas {
  order: 2;
  margin-top: .125rem;
}
.home-v14 .n13-txt span {
  max-width: 16ch;
}

/* ═══ 12. O BLOCO INTEIRO DESCE UM DEGRAU (Thiago, 27/08) ═══
   Não é remontar a escala tipográfica: é tirar uns 8% de cada peça do bloco de
   conteúdo, para ele ocupar menos presença dentro do campo sem mudar a relação
   entre as partes. Manchete, subtítulo, rostos e dados caem juntos e na mesma
   proporção — o que muda é o peso do conjunto contra o campo escuro e as
   marcas correndo, não a hierarquia interna.

   OS VÃOS ENTRE OS TRÊS BLOCOS FICAM ONDE ESTÃO. Eles foram calibrados na tela
   e valem 63px contra 25 de espaço interno; encolher o conteúdo e manter o vão
   AUMENTA a separação dos grupos, que é o efeito desejado — o bloco fica menor
   e mais arejado ao mesmo tempo.

   E A ALTURA DO CAMPO TAMBÉM NÃO MUDA: o hero segue em 40rem com 80px de
   respiro em cima e embaixo. A sobra que este corte abre vai para o vão entre
   os rostos e os dados, que é onde ela não desalinha nada. Uma rodada anterior
   encolheu tipografia E campo juntos, e o resultado foi a dobra comprimida —
   está registrado no §"mais um degrau para baixo". */
.home-v14 .hp-titulo    { font-size: clamp(2.125rem, 4.6vw, 4.375rem); }
.home-v14 .hp-descricao { font-size: 1.1875rem; }

/* 2.3125rem, e nao 2.0625 (Thiago, 28/08). A v14 tinha encolhido os rostos
   junto com o resto do bloco de assinatura; com o texto ao lado ja alinhado a
   esquerda, a pilha estava pequena demais para segurar a linha. */
.home-v14 .hp-avatares img { width: 2.3125rem; height: 2.3125rem; }
.home-v14 .hp-vozes-txt        { font-size: .75rem; }
/* .9375rem (Thiago, 28/08): a linha forte da assinatura subiu um degrau junto
   com os rostos. Continua abaixo do subtitulo, que e quem manda na dobra. */
.home-v14 .hp-vozes-txt strong { font-size: .9375rem; }

.home-v14 .n13-txt strong.n13-num { font-size: clamp(1.0625rem, 1.5vw, 1.25rem); }
.home-v14 .n13-txt                { font-size: .6875rem; }
.home-v14 .n13-marca              { font-size: .5rem; padding: .28125rem .5625rem; }
.home-v14 .n13-marca + .n13-marca { margin-left: -.6875rem; padding-left: 1rem; }


/* ═══ 10. OS ROSTOS ENTRAM UM POR VEZ, E O TEXTO DEPOIS (Thiago, 27/08) ═══
   Até aqui o bloco inteiro subia de uma vez, no `hero-sobe` que a v5 dá a
   todas as camadas do hero — quatro rostos e duas linhas de texto chegando
   juntos como um objeto só. Agora a entrada CONTA a informação na ordem em que
   ela é lida: primeiro as pessoas, uma a uma, e só quando as quatro estão lá é
   que a frase que fala delas aparece.

   O CONTAINER PARA DE ANIMAR. Ele tinha `opacity: 0` e o próprio `hero-sobe`;
   animar os filhos por dentro de um pai invisível não adianta — quem manda no
   que se vê é o pai. Ele passa a nascer visível e cada filho traz a sua.

   A CADÊNCIA É O PASSO, NÃO A DURAÇÃO. Cada rosto leva 620ms para entrar, e o
   seguinte começa 200ms depois do anterior — os movimentos se sobrepõem, que é
   o que faz a sequência ler como um grupo se formando em vez de quatro
   entradas separadas.

   O MOVIMENTO É LATERAL, DA DIREITA PARA A ESQUERDA (Thiago, 27/08), e não a
   subida do `hero-sobe` que o resto da dobra usa. A razão é o próprio
   componente: os quatro se sobrepõem por uma margem negativa, cada um cobrindo
   um pedaço do anterior — o eixo em que eles existem é o horizontal. Vindo de
   baixo, quatro discos apareciam em lugares fixos; vindo da direita, cada um
   desliza para o seu lugar e encaixa por cima do que já está lá, que é o que a
   pilha diz que aconteceu.

   OS 18px SÃO UM POUCO MAIS QUE A SOBREPOSIÇÃO (11,2px, a margem de -.7rem):
   o percurso cobre o encaixe inteiro e sobra um pouco. Sem escala nenhuma —
   `scale` junto de translação lateral lê como o rosto vindo de longe, e o que
   ele faz é vir de fora do grupo, não de fora da tela.

   A LINHA DO TEMPO DA DOBRA CONTINUA SENDO UMA SÓ. A v5 já tinha manchete em
   .1s, subtítulo em .35s e este bloco em .7s. Os rostos ocupam de .70s a
   1.92s — o quarto começa em 1.30 e leva os 620ms dele —, a frase entra em
   1.92s, quando o último acabou de assentar, e a faixa de dados em 2.25s. A
   faixa entrava em .85s, calculada quando o bloco de rostos era uma entrada
   só; ali no meio, ela roubava a sequência.

   O TEXTO ESPERA DE VERDADE. Uma primeira versão o pôs em 1.55s e ele começava
   com o quarto rosto ainda em 90% — medido no navegador, não no papel. Se a
   promessa é "os rostos, e depois a frase", 300ms de sobreposição desfazem
   justamente o que a sequência existe para dizer. */
.home-v14 .hp-vozes {
  opacity: 1;
  animation: none;
}

@keyframes v14-rosto {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: none; }
}

.home-v14 .hp-avatares img {
  opacity: 0;
  animation: v14-rosto .62s var(--ease-cena) forwards;
}
.home-v14 .hp-avatares img:nth-child(1) { animation-delay: .70s; }
.home-v14 .hp-avatares img:nth-child(2) { animation-delay: .90s; }
.home-v14 .hp-avatares img:nth-child(3) { animation-delay: 1.10s; }
.home-v14 .hp-avatares img:nth-child(4) { animation-delay: 1.30s; }

/* O texto ENTRA NO MESMO PASSO DAS QUATRO, e pelo mesmo lado (Thiago, 27/08).

   Ele esperava o último rosto assentar por inteiro — 1.92s — e entre o quarto
   avatar e a frase abria uma pausa de meio segundo que lia como duas
   animações, não como uma. Agora ele é o QUINTO ITEM da fila: entra 200ms
   depois do quarto rosto começar, que é o mesmo passo entre um avatar e o
   seguinte. A frase sai de trás dos rostos enquanto o último ainda está
   chegando, e o conjunto lê como um gesto só.
   Ele chegou a usar o `hero-sobe` das outras camadas do hero, subindo — e com
   os rostos vindo da direita, o par fazia dois movimentos diferentes ao mesmo
   tempo no mesmo bloco. A frase é a continuação da fileira: ela sai de trás
   dos rostos, no mesmo eixo, como se o grupo empurrasse o texto para fora.

   O PERCURSO É MAIOR — 26px contra 18 dos rostos — porque a peça é maior. Um
   bloco de duas linhas andando os mesmos 18px de um disco de 36px lê como
   ajuste, não como entrada. */
@keyframes v14-lado {
  from { opacity: 0; transform: translateX(26px); }
  to   { opacity: 1; transform: none; }
}

.home-v14 .hp-vozes-txt {
  opacity: 0;
  animation: v14-lado .9s var(--ease-cena) 1.5s forwards;
}

/* ─── OS TRÊS DADOS TAMBÉM ENTRAM UM POR VEZ (Thiago, 27/08) ───
   Mesmo princípio dos rostos, e pela mesma razão: são três informações
   diferentes, não um painel. Entrando juntas, a dobra termina num bloco que
   aparece; entrando em fila, ela termina lendo três coisas.

   QUEM ANIMA É O <li> E NÃO A FAIXA. O <ul> tinha o `hero-sobe` com o atraso
   da versão anterior — e um pai que sobe carregando os três filhos torna
   qualquer atraso dentro dele invisível, o mesmo que aconteceu com o container
   dos rostos. A faixa nasce visível; cada dado traz a sua entrada.

   O PASSO É O DOS ROSTOS — 200ms —, e por isso a fila inteira lê como uma
   sequência só: quatro rostos (.70 a 1.30), a frase (1.50) e os três dados
   (1.70, 1.90, 2.10), todos na mesma cadência, sem pausa entre grupos.
   A duração é a das camadas de texto (`hero-sobe .9s`), porque é isso que cada
   dado é. */
.home-v14 .n13-faixa {
  opacity: 1;
  animation: none;
}
.home-v14 .n13-dado {
  opacity: 0;
  animation: hero-sobe .9s var(--ease-cena) forwards;
}
.home-v14 .n13-dado:nth-child(1) { animation-delay: 1.7s; }
.home-v14 .n13-dado:nth-child(2) { animation-delay: 1.9s; }
.home-v14 .n13-dado:nth-child(3) { animation-delay: 2.1s; }

@media (prefers-reduced-motion: reduce) {
  /* Quatro entradas encadeadas são exatamente o tipo de coreografia de que
     esta preferência tenta escapar. O bloco nasce pronto — a informação nunca
     dependeu da animação para existir. */
  .home-v14 .hp-avatares img,
  .home-v14 .hp-vozes-txt,
  .home-v14 .n13-faixa,
  .home-v14 .n13-dado {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ─── O PRIMEIRO CASE ESPIA NA DOBRA, E ENTRA SUBINDO (Thiago, 27/08) ───
   Duas coisas, e só a segunda é animação.

   1. O CAMPO ENCOLHE 2rem, de 42 para 40. `css/home.css` já mantém o topo da
      seção de cases curto de propósito — "é o que faz a borda do primeiro card
      APARECER abaixo da manchete, como a faixa amarela do Clay" —, mas aquele
      padding já está no mínimo; quem manda no quanto sobra da dobra é a altura
      do hero. E ela sai daqui, não de home.css: mexer lá mudaria a index.html
      junto.

      Duas rem e não mais: o respiro de 80px em cima e embaixo é fixo, então o
      que encolhe é o vão entre os rostos e a faixa de dados — o único lugar da
      coluna onde ainda havia folga.

   2. ELE ENTRA SUBINDO, no fim da sequência. O card já tem `position: sticky`,
      e transform em elemento sticky é seguro enquanto o transform é NELE e não
      num ancestral — um ancestral transformado viraria o containing block e o
      sticky pararia de grudar. Como a animação termina em `transform: none`, o
      empilhamento dos quatro cards segue intacto depois dela.

      ELE FECHA A SEQUÊNCIA, em 4.2s, depois de a última marca acender — e com
      um percurso PRÓPRIO, de 56px, contra os 20px do `hero-sobe` das camadas
      do hero (Thiago, 27/08). Vindo no meio da dobra e com o mesmo percurso
      curto das outras peças, ele passava despercebido: é um card de largura
      cheia entrando na borda da tela, e a distância que faz um bloco de 36px
      ler como entrada não faz nada num objeto daquele tamanho. Peça grande
      pede percurso grande. */
@keyframes v14-card-sobe {
  from { opacity: 0; transform: translateY(56px); }
  to   { opacity: 1; transform: none; }
}
.home-v14 { --hero-h: min(calc(100svh - 6rem), 40rem); }

.home-v14 .home-case:nth-child(1) {
  opacity: 0;
  animation: v14-card-sobe 1.1s var(--ease-cena) 4.2s forwards;
}

@media (prefers-reduced-motion: reduce) {
  .home-v14 .home-case:nth-child(1) { animation: none; opacity: 1; transform: none; }
}

/* ═══ 11. O CAMPO TAMBÉM ENTRA: AS LINHAS SE DESENHAM E AS MARCAS ACENDEM ═══
   (Thiago, 27/08)

   Tudo na dobra tinha entrada — manchete, subtítulo, rostos, frase, dados — e
   o campo atrás deles não: no primeiro quadro as quatro curvas já estavam
   traçadas e as oito marcas já espalhadas por elas. Recarregando, a página
   começava com o cenário pronto e o conteúdo chegando por cima, que é o
   contrário da ordem em que ela é lida.

   ─── AS LINHAS SE TRAÇAM, DA ESQUERDA PARA A DIREITA ───
   `stroke-dasharray: 1` com `stroke-dashoffset` indo de 1 a 0 — em frações do
   percurso, porque o HTML leva `pathLength="1"` em cada trilho. Como os quatro
   `d` começam em x=-100 e terminam em 1700, desenhar do começo do path é
   desenhar da esquerda para a direita, que é o sentido em que as marcas depois
   correm.

   O `vector-effect` SAI, E É ELE QUE QUEBRAVA TUDO (Thiago, 27/08). A v13
   pusera `non-scaling-stroke` nos trilhos para o fio manter 1px reais se o SVG
   fosse escalado um dia. Com ele ligado, o navegador mede o `stroke-dasharray`
   em PIXELS DE TELA e ignora o `pathLength` — o "1" que deveria ser o percurso
   inteiro virava 1px de traço e 1px de vão, e as quatro curvas apareciam
   picotadas em vez de contínuas.

   Desligar não muda a espessura aqui: o palco tem 1600px e o `viewBox` tem
   1600 unidades, ou seja escala 1:1, e o fio continua em 1px. O efeito só
   faria diferença se o SVG passasse a ser redimensionado — e se isso
   acontecer, quem precisa mudar é o dash, não o traço.

   ELAS COMEÇAM ANTES DO TEXTO e TERMINAM ANTES DAS MARCAS. O traço parte com
   a manchete (0.15s), cada linha leva 1.6s e a última fecha em 2.14s; só então
   as marcas acendem.

   O TEMPO DO TRAÇO É UM EQUILÍBRIO, e passou por 1.35s, 2.1s e este 1.6s: mais
   rápido, o efeito de desenhar não se vê; mais lento, TUDO o que vem depois é
   empurrado para frente — e o que vem depois são oito marcas acendendo uma a
   uma, que precisam de mais de um segundo só para elas (Thiago, 27/08).
   A primeira versão levava 1.8s por linha com o último traço começando em
   .75s — a última curva só fechava em 2.55s, e as marcas já estavam correndo
   em cima de linhas pela metade (Thiago, 27/08). O trilho é o caminho: ele
   precisa existir inteiro antes de alguém andar nele.

   O AJUSTE FOI NO TRAÇO E NÃO NAS MARCAS: encurtar a linha para 1.35s e juntar
   os atrasos (.15 a .60) mantém o campo se formando durante a entrada do
   texto. Atrasar as marcas até 2.55s teria deixado um vão morto entre o fim da
   sequência de conteúdo e o começo do movimento.

   ─── AS MARCAS ACENDEM DEPOIS ───
   Quem recebe o fade é a LISTA e não cada marca: a animação `orb-corre` já
   controla o `opacity` de cada célula — é ela que faz o fade nas pontas do
   trecho — e uma segunda animação sobre a mesma propriedade no mesmo elemento
   sobrescreveria aquilo. No pai, os dois convivem: a lista revela o conjunto,
   cada célula continua acendendo e apagando no seu percurso.

   As duas camadas acendem separadas por 200ms, o passo da dobra — 2.0s e 2.2s,
   logo depois de a última linha fechar: as de trás primeiro, as da frente logo
   atrás. E acendem JÁ EM MOVIMENTO, porque os
   atrasos negativos nunca pararam de correr — o que se vê não é um grupo
   surgindo parado, é um campo que já estava andando ficando visível. */
@keyframes v14-traca {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}
@keyframes v14-acende {
  from { filter: opacity(0); }
  to   { filter: opacity(1); }
}

/* O TRACO DOBROU: 3.2s por linha, e os atrasos abriram de 130ms para 250ms
   (Thiago, 28/08). Em 1.6s, com as quatro partindo quase juntas, o que se via
   nao era uma linha sendo desenhada — era o campo aparecendo. A curva tem
   1800 unidades de comprimento e atravessa a tela inteira; percurso longo
   pede tempo longo, senao o gesto vira um flash.

   Os atrasos mais abertos importam tanto quanto a duracao: com 130ms entre
   elas as quatro corriam praticamente sobrepostas, e quatro tracos simultaneos
   leem como um so. Em 250ms da para ver uma comecar depois da outra.

   O CUSTO ESTA REGISTRADO LOGO ABAIXO: tudo o que vem depois foi empurrado.
   A ultima linha agora fecha em 4.10s, contra 2.14s. */
.home-v14 .orb-trilhos path {
  vector-effect: none;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: v14-traca 2s var(--ease-cena) forwards;
}
/* A PRIMEIRA LINHA PARTE EM ZERO (Thiago, 28/08). Ela esperava .15s, e as
   outras vinham de 250 em 250ms — a ultima so comecava a ser desenhada com
   .90s de pagina. Somando os 3.2s do traco, o campo levava 4.1s para existir,
   e a espera era sentida antes de qualquer coisa aparecer.

   Partindo de zero e com o passo em 180ms, a ultima fecha em 3.74s. O
   escalonamento continua: e ele que faz as quatro lerem como quatro, e nao
   como um bloco. */
.home-v14 .orb-trilhos path:nth-of-type(1) { animation-delay: 0s; }
.home-v14 .orb-trilhos path:nth-of-type(2) { animation-delay: .12s; }
.home-v14 .orb-trilhos path:nth-of-type(3) { animation-delay: .24s; }
.home-v14 .orb-trilhos path:nth-of-type(4) { animation-delay: .36s; }

/* A IMAGEM NAO GIRA (Thiago, 28/08 — "os logos estao girando", "nao e pra
   girar o logo").

   O `.orb-cel img` la em cima carrega `animation: orb-gira ... reverse`, e ela
   fazia sentido na v8: a LISTA girava, e a contra-rotacao mantinha o logo de
   pe dentro de uma orbita que rodava. Na v14 a lista tem `animation: none` —
   as marcas correm em trilho, nao em circulo — e a contra-rotacao ficou orfa,
   girando a imagem sozinha, uma volta inteira a cada `--orb-volta`.

   Nao basta o `offset-rotate: 0deg` da celula: ele impede a CAIXA de tombar
   com a inclinacao da curva, e a rotacao que sobrou estava um nivel abaixo,
   na imagem. */
.home-v14 .orb-cel img { animation: none; }

.home-v14 .orb-cel {
  filter: opacity(0);
  animation-name: orb-corre, v14-acende;
  animation-duration: var(--orb-volta), .55s;
  /* LINEAR NO PERCURSO (Thiago, 28/08). A bezier de antes desacelerava no
     fim, e com o trecho comecando no meio da tela isso empilhava as marcas na
     ponta direita: medido, 62% do tempo na ultima das quatro colunas do
     campo. A desaceleracao fazia sentido quando a peca vinha de longe e
     "chegava"; num trecho curto ela so amontoa. Linear distribui as dez pelo
     caminho inteiro, que e o que faz o campo parecer povoado. */
  /* A MARCA ACELERA DO MEIO PARA A FRENTE (Iago, 28/08).

     Com `linear` a peca cruzava o trecho em velocidade constante, e como as
     sete estao igualmente espacadas NO TEMPO, elas se distribuiam igualmente
     no ESPACO — o que deixava a entrada do trecho tao vazia quanto o resto, e
     a espera pela proxima marca a aparecer era sempre a mesma.

     Com a curva de aceleracao, a peca demora mais no comeco e sai rapido no
     fim: passa mais tempo onde nasce, entao ha quase sempre alguem chegando, e
     o pedaco final — que e o que sai da tela — e vencido depressa.

     NAO E A BEZIER ANTIGA. A `.3 .42 .8 .84` que estava aqui fazia o
     contrario: desacelerava no fim, e as marcas se amontoavam na ponta
     direita — 62% do tempo na ultima das quatro colunas do campo, medido. */
  /* A CURVA FOI CALIBRADA EM DUAS RODADAS (Iago, 28/08). A primeira tentativa
     de acelerar no fim usou `.35 .05 .85 .6`, que quase para no comeco — a
     peca ficava arrastada logo depois de nascer, e o que se ganhava em
     ocupacao se perdia em ritmo. Esta parte com velocidade e despeja o resto
     do percurso na saida: o pedaco final e o que sai da tela, entao vence-lo
     depressa nao custa nada e libera o trecho para a proxima marca. */
  /* ACELERACAO CONTINUA, DO COMECO AO FIM (Thiago, 28/08 — "comecar devagar e
     aumentando a velocidade, pode ser um movimento continuo").

     A `.5 .22 .7 1` que estava aqui NAO fazia isso, apesar do comentario
     acima: com o ultimo ponto de controle em y=1, a inclinacao no fim e zero
     — ela acelerava no miolo e FREAVA na saida. Era o mesmo defeito que a
     `.3 .42 .8 .84` de antes, so que menos visivel.

     A PRIMEIRA TENTATIVA (.55 0 .9 .45) EXAGEROU NA PARTIDA: com o primeiro
     controle em y=0 a peca saia praticamente parada, e como a nevoa acaba
     logo depois do inicio do percurso, esse arrasto era quase todo VISIVEL —
     14 px/s medidos contra 134 na saida. Reprovou na tela ("o inicio ficou
     muito lento").

     A SEGUNDA (.35 .1 .95 .5) TIROU O ARRASTO MAS QUEBROU A LEITURA DE
     CONJUNTO. Medido nas quatro faixas de x da area visivel, ela ia de 22
     para 76 px/s — quatro vezes. Como as sete marcas estao espalhadas pelo
     percurso, num mesmo instante uma andava a 22 e outra a 76 na mesma tela,
     e o campo passou a ler como pecas descoordenadas ("parece que nao tem um
     padrao, tem uns que iniciam muito rapido e outros muito devagar"). Vale
     registrar o que a medicao descartou de saida: os quatro TRILHOS estavam
     consistentes entre si (22/19/22/23 na primeira faixa, 76/71/74/75 na
     ultima) — nenhum era o culpado, a diferenca era de fase, nao de curva.

     ACELERACAO E CAMPO POVOADO PUXAM PARA LADOS OPOSTOS: quanto mais forte a
     curva, mais diferentes ficam entre si as pecas que se veem ao mesmo
     tempo. Esta bezier fica na razao de ~2x — inclinacao .7 na partida, 1.4
     na chegada. Da para ver que a marca ganha velocidade, e as que dividem a
     tela ainda parecem do mesmo conjunto. Nao aumentar sem olhar as duas
     coisas juntas.

     A TRANSICAO ACONTECE CEDO, E NAO AO LONGO DE TODO O PERCURSO (Thiago,
     28/08 — "a transicao de velocidade precisa ser mais rapida"). A
     `.4 .22 .75 .4` distribuia a aceleracao pelo caminho inteiro: 21, 28,
     38, 51 px/s nas quatro faixas, uma rampa continua e mansa. O pedido e
     outro — sair da lentidao depressa e depois seguir rapido.

     ONDE POR O JOELHO E O PONTO INTEIRO. Com x=.15 a arrancada acontecia
     ANTES da area visivel — a peca acelerava escondida dentro da nevoa e
     entrava em cena ja em cruzeiro. Medido: 42, 43, 42, 43 px/s nas quatro
     faixas, razao 1x, aceleracao nenhuma para quem olha.

     Com x=.3 o joelho cai logo depois da peca aparecer: ela entra devagar,
     arranca em cena e dai em diante corre quase constante (de t=.6 a t=1 a
     bezier e praticamente uma reta). E a leitura de "arrancou", que e o
     pedido, em vez de "vem acelerando o tempo todo" da rampa mansa.

     CALIBRAR PELA RAZAO MEDIDA, E NAO PELA DA BEZIER. As duas nao batem, e a
     diferenca e grande: a area visivel comeca em 46% e acaba em 90% do
     percurso, ou seja o MIOLO da curva de tempo — as inclinacoes extremas,
     que ficam em t=0 e t=1, caem dentro da nevoa e nunca sao vistas. Uma
     bezier de razao 2 (.3 .21 .7 .58) entregou 1.3x na tela, quase linear;
     esta, de razao ~4.4, entrega os 2x que se queria ver. Ao mexer aqui,
     medir nas quatro faixas de x da area visivel, nao confiar na conta.

     O SALTO DO REINICIO NAO SE VE. Uma curva de aceleracao em loop tem
     descontinuidade de velocidade quando volta ao inicio; aqui isso acontece
     em `--orb-ini`, que cai dentro da nevoa, onde o alfa e zero. */
  animation-timing-function: cubic-bezier(.3, .06, .6, .55), var(--ease-cena);
  animation-iteration-count: infinite, 1;
  animation-fill-mode: none, forwards;
}
/* O `--atraso` do percurso é o do HTML e não muda; o segundo valor é a hora de
   a peça acender — 2.20s a 4.02s, passo de 260ms, camadas alternadas para não
   entrarem duas seguidas do mesmo plano.

   ESCRITOS EM ORDEM E DE UMA VEZ, e não editados um a um: numa rodada os oito
   valores foram trocados por substituição de texto, um de cada vez, e como o
   novo valor de uma linha era o valor antigo de outra, a segunda substituição
   pegou o resultado da primeira. A fila saiu embaralhada — 3.50, 3.76, 4.02,
   2.98… — e o que se via era um bloco acendendo tarde. */
/* PASSO DE 150ms E NÃO 260ms (Thiago, 28/08), começando em 1.90s: a fila
   inteira fechava em 4.02s, e como a última a acender é também a mais
   adiantada no ciclo, ela aparecia e sumia quase junto. O campo levava mais
   de quatro segundos para existir por inteiro, e nunca chegava a estar
   cheio. Agora fecha em 2.95s.

   Continua depois do traço das linhas (a última fecha em 2.14s): o trilho
   tem de existir antes de alguém andar nele. As duas primeiras acendem
   enquanto a última linha fecha, e é só isso que se sobrepõe. */
/* SAO SETE MARCAS: SEIS na camada da frente, UMA na de tras.

   Eram onze celulas para sete clientes — Vale, Gerdau, Sicredi e Globo
   duplicadas —, e com o campo cheio dava para ver o mesmo logo em dois pontos
   da tela ao mesmo tempo. A repeticao vinha de quando as marcas percorriam o
   trilho inteiro; correndo so no trecho a direita do texto, sete povoam o
   campo sem se repetir.

   A DIVISAO NAO E SIMETRICA e tem uma razao de telefone: abaixo de 1160px so a
   camada da FRENTE aparece, virando a fila horizontal — a de tras e apagada
   porque carrega o SVG das linhas. Entao tudo o que precisa aparecer no
   telefone mora nela. A Anima e a setima, a que sobra da fila, e por isso e a
   que fica atras.

   OS ATRASOS SAO POSITIVOS (Thiago, 28/08 — "recarreguei a pagina e os logos
   ja estavam ali", com print mostrando marcas na ponta direita, na altura do
   menu).

   Eles eram NEGATIVOS, de 0 a -.917 da volta. Um atraso negativo comeca a
   animacao ja corrida: a ultima marca nascia em 91.7% do ciclo, ou seja
   colada na borda direita, no primeiro quadro da pagina. Isso existia para o
   campo aparecer povoado desde o load — e o preco era exatamente o do print,
   pecas materializando na direita sem nunca terem atravessado a tela.

   SEM ADIANTAMENTO NENHUM: TODAS NASCEM NO MESMO PONTO (Thiago, 28/08 —
   "os logos tem que comecar dessa marca aqui, logo depois dos textos; agora
   tem logo comecando la na direita e ja acelerado, nao comecando lento").

   O deslocamento de -3/7 foi uma tentativa de ter as duas coisas — campo
   povoado no load E ninguem nascendo na ponta — e ela nao serve, porque
   QUALQUER adiantamento poe alguma marca ja corrida no primeiro quadro. Com
   -3/7 a mais adiantada acendia em 78% da largura e ja em velocidade de
   cruzeiro, tendo pulado justamente o trecho lento que da a leitura de
   partida. O pedido e categorico: toda peca nasce no mesmo lugar, logo
   depois da coluna de texto, e acelera dali.

   Entao os atrasos sao positivos puros, de 0 a 6/7 da volta. O ponto de
   nascimento passa a ser o mesmo para as sete — `--orb-ini`, atras da nevoa —
   e cada uma percorre o trecho lento inteiro antes de aparecer.

   O CUSTO CONTINUA SENDO O ENCHIMENTO, e a unica alavanca e a volta: o campo
   fecha em uma volta, sempre. Por isso ela caiu para 10s. Mais curta que
   isso o movimento comeca a ficar apressado; mais longa e o hero passa tempo
   demais ralo. Se for preciso escolher de novo, e entre essas duas coisas —
   nao ha terceira.

   A TERCEIRA E A QUARTA SAO A EXCECAO AO PASSO (Thiago, 29/08 — "adianta um
   pouco a 3a marca e a 4a", e depois "adianta a marca 4"). Elas saem de .286
   e .429 para .22 e .29, ou seja entram ~0.7s e ~1.4s mais cedo numa volta de
   10s. A quarta foi adiantada em tres rodadas: .429 -> .35 -> .29 -> .25.
   Em .25 ela esta a 0.3s da terceira (.22) — praticamente colada. Nao ha
   muito mais para tirar dali sem as duas virarem um par.

   ISSO CUSTA UNIFORMIDADE, E O CUSTO E PERMANENTE: os atrasos nao valem so
   para a entrada da pagina, eles definem a fase de cada marca no ciclo para
   sempre. Adiantar duas abre um vao maior entre a quarta e a quinta, que
   passa a ser o maior intervalo do campo. Foi medido e o vao ficou dentro do
   aceitavel, mas e a razao de nao mexer nos outros cinco: cada adiantamento
   novo tira de um lugar para por no outro.

   A PRIMEIRA TAMBEM SAIU DO PASSO (Thiago, 29/08 — "adianta mais a marca 1").
   Ela tinha `--atraso: 0s`, foi para -.055 e voltou para -.025 ("atrasa um
   pouco a marca 1"). Somado aos -1.3s da base, da ~1.55s de adiantamento.
   Em -.055 ela surgia em 0.05s, colada no primeiro quadro; em -.025 sai por
   volta de 0.35s, com um respiro antes de aparecer.

   ESSE E O TETO, E O TETO E GEOMETRICO: 1.85s e exatamente o tempo que a peca
   leva para ir de `--orb-ini` ate sair da nevoa. Adiantar mais faz ela estar
   JA FORA da nevoa no primeiro quadro, ou seja visivel a direita do ponto de
   nascimento — o defeito que gerou toda a rodada de 28/08. Se for preciso
   adiantar mais, o caminho nao e este numero: e mover `--orb-ini` para mais
   perto da nevoa, ou encurtar a rampa da mascara.

   A SEGUNDA SAIU DE .143 PARA .09 ("adianta a 2"). Nesta altura as quatro
   primeiras foram todas ajustadas a mao e o passo de 1/7 so vale da quinta em
   diante — o que sobrou dele esta registrado abaixo, mas a abertura hoje e
   uma sequencia calibrada no olho, nao uma progressao.

   FORA AS QUATRO PRIMEIRAS, O PASSO E DE 1/7 DA VOLTA, e nao um numero menor "para encher mais
   rapido": o espacamento no tempo E o espacamento no percurso. Um passo de
   1.2s agruparia as sete em 42% do ciclo e deixaria 58% vazio, para sempre.

   SAO FRACAO DA VOLTA, e nao segundos, para que trocar `--orb-volta` nao
   desalinhe nada — foi o que aconteceu quando eram fixos e a volta mudou de
   29s para 26s.

   O ACENDIMENTO E FIXO EM 3.8s, E NAO SEGUE O ATRASO (Thiago, 28/08 — "tenho
   dois logos aparecendo antes das linhas terminarem", com print).

   Este e o efeito colateral do adiantamento: uma peca com atraso de -3/7 da
   volta ja esta correndo ha segundos no primeiro quadro, e se o acendimento
   usa o MESMO atraso ela tambem ja esta acesa — antes de existir trilho
   debaixo dela. As linhas fecham em 3.74s (3.2s de traco mais .54s de
   escalonamento), entao o campo so pode acender depois disso.

   Sao coisas distintas e agora estao separadas: a primeira animacao
   (`orb-corre`) leva o atraso, porque e ela que define a FASE de cada marca
   no ciclo; a segunda (`v14-acende`) leva 3.8s fixo para todas, porque o
   campo inteiro fica visivel de uma vez, quando o desenho esta pronto. As
   que ja estao adiantadas aparecem onde estiverem — no meio, medido.

   O ACENDIMENTO ANTES SEGUIA O MESMO ATRASO, numa linha so. Antes era uma
   coreografia a parte (2.30s … 3.20s, em ordem invertida) que acendia as
   marcas onde quer que estivessem; com a entrada em fila isso perde o
   sentido — a peca acende quando comeca a andar.

   AS BASES SAO -1.3s (movimento) E 0s (acendimento) — a marca ENTRA ANTES DAS
   LINHAS FECHAREM (Thiago, 29/08 — "pode adiantar para 3s antes de as linhas
   fecharem").

   TRES SEGUNDOS NAO CABEM: com o traco encurtado, as linhas fecham em 2.3s,
   entao 3s antes cai em tempo negativo — a sequencia inteira dura menos que o
   adiantamento pedido. O maximo util e a marca surgir logo no comeco da
   pagina, e e isso que o -1.3s faz.

   O ADIANTAMENTO E SEGURO PORQUE E PEQUENO E A NEVOA CONTINUA MANDANDO. Ele
   nao repete o erro do -3/7 de volta, que punha a peca ja em cruzeiro na
   direita: 1.3s de uma volta de 10s e adiantamento suficiente so para ela
   nascer perto do fim da nevoa, ainda invisivel, e sair de la no ponto de
   sempre. Medido, as sete continuam nascendo no mesmo x.

   AS BASES ERAM 0s E 0.5s, e antes disso 0.6s/3.35s e 1.1s/3.8s — a marca NAO
   ESPERA MAIS PELAS LINHAS (Thiago, 29/08 — "encurtar esse tempo, as vezes nao precisa
   nem esperar as linhas todas terminarem").

   O QUE A MEDICAO ACHOU: os ultimos 10% de cada linha levam 1.05s. Com
   `--ease-cena` a saida do traco e lenta, entao a linha chega a 90% aos
   2.55s e so fecha aos 3.60s. Aos olhos ela esta pronta no primeiro numero,
   e prender a marca ao segundo criava um segundo inteiro de tela parada. Era
   esse o "um segundo pra primeira logo aparecer" — nao um atraso mal
   calibrado, e sim a cauda da propria curva do traco.

   A ESPERA AGORA E GEOMETRICA, E NAO CRONOMETRADA. O acendimento virou 0.5s,
   quase imediato, e serve so para a peca nao piscar no primeiro quadro. Quem
   define quando ela e vista passou a ser a NEVOA: ela nasce atras dela e leva
   o tempo que levar para atravessar. Isso amarra a entrada ao percurso em vez
   de a um cronometro, e some o risco de os dois numeros descolarem quando a
   volta mudar.

   O TRACO TAMBEM ENCURTOU, de 3.2s para 2s, com os atrasos de .18/.36/.54
   para .12/.24/.36. A ultima linha fecha em 2.36s contra 3.60s.

   AS BASES ERAM 0.6s E 3.35s, antecipadas de 1.1s/3.8s (Thiago, 29/08 — "assim que a linha estiver
   terminando ja e pra aparecer o primeiro").

   O vao era real, so que menor do que parecia: medido, o traco fechava em
   3.60s e a primeira marca acendia em 3.90s. Os 0.3s de diferenca viravam
   quase um segundo aos olhos porque o `v14-acende` leva mais .55s para
   completar o fade — a peca so fica cheia por volta de 4.45s, e e esse o
   momento que se percebe como "apareceu".

   As duas bases andam JUNTAS: mexer so no acendimento faria a marca acender
   num ponto diferente do percurso. Antecipando as duas em .5s, ela chega ao
   mesmo x de antes (~797), meio segundo mais cedo, e o fade fecha junto com
   a ultima linha em vez de depois dela.

   A BASE ERA 1.1s E ANTES DISSO 2.3s. Ela era a espera pelas linhas (o trilho tem de
   existir antes de alguem andar nele), e com os atrasos negativos isso
   bastava: a marca ja nascia adiantada e aparecia no ato. Em fila ela nasce
   em `--orb-ini`, ANTES da nevoa, e ainda precisa atravessar a rampa para ser
   vista — medido, 3.3s so nesse trecho, porque e onde a curva de aceleracao
   e mais lenta. Com 2.3s de base a primeira marca so entrava em cena aos
   5.6s, com o hero parado esse tempo todo. Com 1.1s ela chega em ~4.4s,
   junto do fim do traco das linhas (3.74s), que e a leitura certa: o trilho
   fecha e alguem comeca a andar nele. */
.home-v14 .orb-tras   .orb-cel:nth-child(1) { --atraso: calc(var(--orb-volta) * -.025); }
.home-v14 .orb-frente .orb-cel:nth-child(1) { --atraso: calc(var(--orb-volta) * .09); }
.home-v14 .orb-frente .orb-cel:nth-child(2) { --atraso: calc(var(--orb-volta) * .22); }
.home-v14 .orb-frente .orb-cel:nth-child(3) { --atraso: calc(var(--orb-volta) * .25); }
.home-v14 .orb-frente .orb-cel:nth-child(4) { --atraso: calc(var(--orb-volta) * .571); }
.home-v14 .orb-frente .orb-cel:nth-child(5) { --atraso: calc(var(--orb-volta) * .714); }
.home-v14 .orb-frente .orb-cel:nth-child(6) { --atraso: calc(var(--orb-volta) * .857); }

/* A ORDEM DE ACENDER E A INVERSA DA FASE (Iago, 28/08).

   A hora de acender e um evento da entrada da pagina, medido do load — mas a
   ORDEM importa. Ela seguia a mesma sequencia dos atrasos: acendia primeiro a
   peca que estava no comeco do trecho e por ultimo a que estava em 92%, ou
   seja, ja saindo de cena. O que se via era uma marca aparecer no fim do
   percurso, praticamente na borda, como se tivesse nascido ali.

   Invertida, a sequencia termina com a peca que esta ENTRANDO: a mais
   avancada acende primeiro — ela ja estaria ali ha algum tempo se a pagina
   estivesse aberta —, e a ultima a acender e a que acabou de comecar. A
   leitura vira "o campo estava rodando e voce chegou agora".

   Passo de 150ms a partir de 2.30s; as sete fecham em 3.20s, junto com o
   traco das linhas. */
.home-v14 .orb-cel { animation-delay: calc(-1.3s + var(--atraso)), var(--atraso); }


@media (prefers-reduced-motion: reduce) {
  /* O campo nasce pronto: o traço é movimento e o acender também. */
  .home-v14 .orb-trilhos path {
    animation: none;
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }
  .home-v14 .orb-cel { filter: none; }
}

/* ═══ DEGRAU DA PILHA ENQUANTO SÃO DOIS CARDS ═══ (28/08)

   O .5rem que a v3 fixa não foi escolhido por estética: com quatro cards o
   terceiro encolhia DOIS degraus e não podia ficar menor que o próprio texto,
   então a base da pilha ficava presa em "maior conteúdo + 2 × degrau". Metade
   do degrau era o que mantinha a variação de altura em 16px.

   Com a MRS e a Tenda ocultas até a aprovação, o máximo virou UM degrau — o
   teto que justificava o .5rem sumiu junto com os dois cards. E o efeito
   precisa dele: a 8px a borda do card de baixo quase não aparece, e dois
   cards que se cobrem sem borda visível param de ler como baralho.

   QUANDO OS DOIS VOLTAREM, apagar este bloco: com quatro cards ele devolve o
   problema de altura que o .5rem resolveu. */
.home-v14 .home-cases { --case-degrau: 1rem; }

/* ═══ O VÃO DO FIM DA PÁGINA ═══ (Thiago, 28/08)

   A v3 dá 160px em CIMA E EMBAIXO da seção de depoimentos (--vao-secao), e
   os dois lados faziam o mesmo trabalho: separar dois campos. Só que o
   fechamento saiu da home em 26/08, e o padding de baixo deixou de separar
   coisa alguma — virou o vão morto entre o último depoimento e o fim da
   página, sem nada depois dele para justificar a espera.

   Fica em 80px, metade do de cima: ainda é respiro, e a assimetria é o que
   diz que a página acabou ali em vez de continuar.

   SE O FECHAMENTO VOLTAR, apagar este bloco — com uma seção depois, os dois
   lados voltam a separar campos e a simetria da v3 é a certa. */
.home-v14 .home-vozes { padding-bottom: 80px; }

/* ═══ O VAO ENTRE A PILHA E OS DEPOIMENTOS, NO TELEFONE ═══ (Thiago, 28/08)

   A v3 da 160px de padding em cima da secao de depoimentos, e no desktop e o
   que separa dois campos. No telefone o mesmo valor vira um terco de tela em
   branco: medido em 390x844, sao 160px de nada entre o fim do ultimo card e o
   titulo "Quem ja usa conta o que mudou".

   72px mantem a separacao sem abrir buraco — e a mesma proporcao do desktop
   em relacao a altura da tela. O padding de BAIXO ja tinha sido resolvido em
   28/08 (bloco do fim da pagina, acima); este e o de cima. */
@media (max-width: 720px) {
  .home-v14 .home-vozes { padding-top: 72px; }

  /* OS DOIS NUMEROS LADO A LADO, e nao empilhados (Thiago, 28/08).

     A regra de empilhar vinha da v13, quando eram TRES numeros: em coluna
     estreita, tres blocos com descricao de duas linhas ficavam com tres
     palavras por linha, e empilhar era o certo. Sobraram dois — o terceiro
     saiu junto com a MRS —, e medido em 390px cada bloco ocupa 111px numa
     faixa de 326: cabem lado a lado com folga, e empilhados abriam 100px de
     vao morto no meio do hero.

     ESTA REGRA MORA NO FIM DO ARQUIVO DE PROPOSITO. A faixa tem uma
     declaracao SEM media query mais acima (`grid-template-columns: none` com
     `grid-auto-columns`), que e o que a v14 usa para agrupar os numeros a
     esquerda no desktop — e ela vence qualquer @media escrito antes dela.
     A primeira tentativa desta correcao ficou junto das outras regras de
     720px e nao teve efeito nenhum: medido, os numeros continuaram em y=527 e
     y=629.

     Precisa dos TRES valores: `none` no template deixaria o auto-flow mandar,
     e `grid-auto-columns` ainda esta em `auto` no bloco acima. */
  /* AS DUAS COLUNAS MEDEM O CONTEUDO, e o par fica centrado. Com `1fr 1fr`
     elas repartiam a largura toda: os dois blocos encostavam na margem
     esquerda e sobrava um vao morto a direita, porque o texto de cada um e bem
     mais curto que meia tela. Em `max-content` o par mede o que tem e o
     `justify-content` o centraliza — sem mexer no alinhamento DENTRO de cada
     bloco, que segue a esquerda. */
  .home-v14 .n13-faixa {
    grid-template-columns: repeat(2, max-content);
    justify-content: center;
    grid-auto-columns: initial;
    grid-auto-flow: row;
    gap: 1.75rem;
  }
}

/* ═══ AS MARCAS NO TELEFONE: UMA FAIXA, NAO UM CAMPO ═══ (Thiago, 28/08)

   O campo com trilhos precisa de uma area livre ao lado do texto, e abaixo de
   1160px essa area nao existe — o texto ocupa a largura toda. A saida ate aqui
   era apagar as marcas, o que custava caro: o telefone e justamente onde este
   material mais circula, e a prova social sumia.

   ENTAO O MESMO COMPONENTE MUDA DE ARRANJO. As caixas sao as mesmas — mesmo
   preto, mesmo raio, mesmo contorno —, mas em vez de correrem numa curva elas
   se alinham numa fila, no pe do hero, logo abaixo dos numeros.

   QUEM VIRA FAIXA E A CAMADA DA FRENTE, e a escolha nao e indiferente: o SVG
   das quatro curvas mora dentro da camada de TRAS. Transformando aquela em
   fila, as linhas de fundo iriam junto e o cenario do hero se perderia. A da
   frente nao tem SVG e traz cinco marcas distintas — Vale, TIM, XP, Gerdau e
   Sicredi —, enquanto a de tras repete tres delas.

   ONDE A FILA CAI: esta camada nao e filha do hero, e sim de
   `.hero-v3-grade` — o `order: 1` a joga para o fim da grade, depois do
   titulo, do subtitulo e dos rostos. A faixa de numeros e filha do hero e vem
   na linha seguinte, entao a ordem final no telefone e: texto, rostos,
   marcas, numeros. Sem o `order` a fila apareceria acima da manchete, porque
   no HTML ela vem antes.

   Cada peca aqui desfaz uma da versao de campo — `position`, `offset-path`,
   as duas animacoes. Sao todas necessarias: sem zerar o `offset-path`, a
   caixa continua presa a curva e ignora o flex. */
@media (max-width: 1160px) {
  .home-v14 .orb-recorte:has(.orb-frente) {
    position: static;
    order: 1;
    overflow: visible;
    -webkit-mask-image: none;
            mask-image: none;
    border-radius: 0;
    width: 100%;
    z-index: auto;
  }
  .home-v14 .orb-frente {
    /* `display` EXPLICITO: a v14 apaga `.hp-orbita` inteira abaixo de 560px
       (era a regra "sai em telefone", de quando nao havia faixa). Sem
       reafirmar aqui, a fila some justamente no tamanho para o qual ela foi
       feita — medido, as cinco caixas vinham com largura zero. */
    display: block;
    position: static;
    width: 100%;
    height: auto;
    max-width: none;
    translate: none;
    opacity: 1;
    /* a camada da frente carregava um plano proprio para passar sobre o texto;
       na fila ela e conteudo como qualquer outro */
    z-index: auto;
    pointer-events: auto;
  }
  .home-v14 .orb-frente .orb-lista {
    position: static;
    inset: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .625rem;
  }
  .home-v14 .orb-frente .orb-cel {
    position: static;
    offset-path: none;
    offset-distance: 0%;
    /* so a entrada; o percurso nao existe mais neste arranjo */
    animation: v14-acende .5s var(--ease-cena) forwards;
    filter: opacity(0);
  }
  /* A fila acende da esquerda para a direita, no mesmo passo de 150ms do
     campo. Comeca em 1.5s: aqui nao ha traco de linha para esperar — as
     curvas ficam no fundo, mas nao sao o assunto deste arranjo.

     SAO SEIS LINHAS, uma por marca. A lista tinha cinco quando a camada da
     frente tinha cinco pecas; ao entrar a sexta (a XP), ela ficou sem
     `animation-delay` proprio, herdou o zero e aparecia JA ACESA no primeiro
     quadro, enquanto as outras cinco ainda entravam. Se entrar uma setima,
     e aqui que se soma 150ms. */
  .home-v14 .orb-frente .orb-cel:nth-child(1) { animation-delay: 1.50s; }
  .home-v14 .orb-frente .orb-cel:nth-child(2) { animation-delay: 1.65s; }
  .home-v14 .orb-frente .orb-cel:nth-child(3) { animation-delay: 1.80s; }
  .home-v14 .orb-frente .orb-cel:nth-child(4) { animation-delay: 1.95s; }
  .home-v14 .orb-frente .orb-cel:nth-child(5) { animation-delay: 2.10s; }
  .home-v14 .orb-frente .orb-cel:nth-child(6) { animation-delay: 2.25s; }
}

/* AS CINCO DIVIDEM A LARGURA, em vez de terem um tamanho fixo (Thiago,
   28/08). Com largura fixa a fila media 244px numa coluna de 318 e sobravam
   74px de vao morto nas pontas — e o tamanho tinha de ser calibrado por
   breakpoint para nao quebrar linha no aparelho mais estreito.

   `flex: 1 1 0` faz as cinco repartirem o que existe, sempre em uma linha:
   ~49px em 360, ~57px em 390, ~65px em 430. O `max-width` segura o caso
   contrario, em tablet, onde cinco caixas esticadas virariam retangulos.

   `aspect-ratio: 1` porque a altura vinha do conteudo: com a caixa crescendo
   na horizontal, sem ele os logos mais largos achatariam a peca. */
@media (max-width: 1160px) {
  .home-v14 .orb-frente .orb-cel {
    flex: 1 1 0;
    min-width: 0;
    max-width: 5rem;
    width: auto;
    aspect-ratio: 1;
    padding: .5625rem;
  }
}

@media (max-width: 1160px) and (prefers-reduced-motion: reduce) {
  .home-v14 .orb-frente .orb-cel { animation: none; filter: none; }
}

/* ═══ O VAO ENTRE O TITULO DOS DEPOIMENTOS E OS CARDS ═══ (Thiago, 28/08)

   48px e a medida do desktop, onde o titulo tem duas vozes na mesma linha e
   os cards abrem em mosaico. No telefone os cards viram uma coluna so, e o
   mesmo vao passa a separar o titulo do unico card que vem abaixo dele —
   parece que o titulo pertence a outra coisa.

   24px mantem os dois no mesmo bloco. */
@media (max-width: 720px) {
  .home-v14 .vozes-titulo { margin-bottom: 1.5rem; }
}

/* ═══ DOIS ALINHAMENTOS DO TELEFONE ═══ (Thiago, 28/08)

   No telefone o hero inteiro e centrado — manchete, subtitulo, fila de marcas.
   Estes dois blocos tinham ficado de fora e eram os unicos alinhados de outro
   jeito, o que aparece como desalinho justamente por serem os ultimos da
   dobra.

   OS NUMEROS: cada bloco fica numa coluna de `1fr`, mas o conteudo dentro dela
   encostava a esquerda. Centrando o texto, os dois numeros ficam simetricos em
   relacao ao eixo da tela, como tudo o que esta acima deles.

   O BLOCO DE ROSTOS e o contrario: o CONJUNTO ja e centrado (avatares mais
   texto), mas o texto dentro dele estava centrado tambem — e as duas linhas
   tem larguras muito diferentes, entao a segunda ficava boiando no meio da
   primeira, longe dos avatares. Alinhado a esquerda, ele encosta na pilha de
   rostos e o par volta a ler como um bloco so. */
@media (max-width: 720px) {
  /* TUDO A ESQUERDA DENTRO DA COLUNA (Thiago, 28/08). A primeira versao
     centrou os tres — numero, descricao e tag — no eixo da coluna, e na tela
     isso DESALINHOU: as tres larguras sao muito diferentes ("+1 milhao",
     "Comunicados internos por ano", "V.TAL"), entao centradas cada uma comeca
     num x proprio. A esquerda, as tres partem da mesma margem. */
  .home-v14 .n13-dado { text-align: left; justify-items: start; }
  .home-v14 .n13-marcas { justify-content: flex-start; }
  .home-v14 .hp-vozes-txt { text-align: left; }

  /* A FILA PRECISA DE AR. Medido em 390px, ela comecava em y=615 e a faixa de
     numeros terminava em y=615 — encostadas, sem um pixel entre as duas, o
     que le como sobreposicao. O `order` resolve a ordem, nao a distancia.
     O VALOR QUE VALE esta no bloco do hero compacto, mais abaixo: esta regra
     e sobrescrita por ele. */
}

/* ═══ O HERO CABE NA TELA DO TELEFONE ═══ (Thiago, 28/08)

   Medido em 390x844: o hero fechava em 725px e terminava em y=789 — dentro da
   janela no papel, mas atras da barra do navegador na pratica, entao o fim
   dele (a fila de marcas) nunca aparecia sem rolar.

   Os vaos eram 24 / 59 / 59 / 28 entre os cinco blocos, e os 59 vinham do
   `gap` da grade, calibrado para o desktop. Aqui eles somam mais que a altura
   de um bloco inteiro.

   TRES CORTES, e nenhum na manchete — ela e o assunto:
   · a descricao desce de 19px para 17.5px, com a entrelinha acompanhando;
   · o gap da grade cai de 50 para 34, o que encurta os dois vaos de 59;
   · o padding do hero cede 24px em cima e 20 embaixo. */
@media (max-width: 720px) {
  .home-v14 .hp-descricao { font-size: 1.09375rem; line-height: 1.45; }
  /* A LINHA FORTE DA ASSINATURA VOLTA A ENCOLHER no telefone. Ela subiu para
     .9375rem hoje e no desktop e a medida certa; aqui, ao lado dos rostos e
     numa coluna de 318px, "Times de comunicacao interna" quebrava em duas
     linhas e o bloco virava tres linhas de altura. */
  /* 12px: com os avatares em 37px, sobram 191px para o texto, e
     "Times de comunicacao interna" em 13px pedia ~200 — quebrava em duas
     linhas e o bloco virava tres linhas de altura. */
  .home-v14 .hp-vozes-txt strong { font-size: .75rem; }
  .home-v14 .hp-vozes-txt { font-size: .6875rem; }

  /* OS VAOS DE 59px NAO ERAM O `gap` DA GRADE, e sim `margin-top` proprio dos
     dois blocos — por isso encurtar o gap para 34 nao mudou nada na medicao.
     Sao eles que empurravam o fim do hero para fora da tela. */
  .home-v14 .hp-vozes-grande { margin-top: 2.25rem; }
  .home-v14 .n13-faixa { margin-top: 2.25rem; }
  .home-v14 .hero-v3-grade { gap: 2.125rem; }
  .home-v14 .hero-v3 { padding-top: 4.5rem; padding-bottom: 3.75rem; }

  /* A ALTURA PASSA A SEGUIR O CONTEUDO. `--hero-h` trava o hero em 40rem, e
     como ele e um grid com `place-items: center`, encolher os blocos NAO
     encolhia a secao: o espaco que sobrava virava vao. Medido, o vao entre os
     rostos e os numeros saltou de 59px para 100 depois que as margens
     cairam — o oposto do que a mudanca pretendia.

     Solto, o hero mede o que tem dentro e os vaos ficam onde foram postos. */
  .home-v14 { --hero-h: auto; }
  .home-v14 .hero-v3 { min-height: 0; }
  /* A FOLGA ENTRE OS NUMEROS E A FILA: 40px (Thiago, 28/08). Ela ja foi 20 —
     encolhida junto com o resto quando o hero foi compactado — e nessa medida
     as caixas ficavam coladas nos numeros, sem separar os dois blocos. E o
     unico vao da dobra que separa dois assuntos diferentes, entao pode ser
     maior que os outros. */
  .home-v14 .orb-recorte:has(.orb-frente) { margin-top: 2.5rem; }

  /* O RAIO DO HERO NO TELEFONE E 28px, O MESMO DOS CARDS DE CASE.

     O clamp da regra base vai de 2rem a 2.5rem por vw, e o piso de 32px foi
     calibrado em tela larga — numa dobra de 390px ele come o canto inteiro.
     Passou por 20px antes de fechar em 28: 20 e o raio da ARTE dentro do card
     (`.case-arte`, `.palco`), e o hero e a peca de fora, do mesmo nivel do
     card que vem logo abaixo dele na rolagem. Com os dois em 28 a emenda
     entre as duas secoes deixa de ter dois arredondamentos diferentes. */
  .home-v14 { --v14-raio: 1.75rem; }

  /* E O CARD DE DEPOIMENTO ACOMPANHA. Ele estava em 20px — a medida da v3, de
     quando o mosaico tinha quatro cards menores lado a lado. No telefone eles
     viram uma coluna so, do mesmo tamanho dos cards de case, entao o
     arredondamento tem de ser o mesmo: tres secoes seguidas na rolagem, tres
     cantos iguais. */
  .home-v14 .voz { border-radius: 1.75rem; }
}