/* ==========================================================================
   ABITA — Home

   A página não é uma pilha de seções iguais. Cada bloco tem uma forma
   própria e as bordas entre eles são atravessadas de propósito: a imagem
   da dor sai pela direita da tela e atravessa a costura com o escopo.

   Dois momentos em --fs-mega na página inteira: o herói e a declaração.
   Os números da prova são o terceiro peso, e existem só ali.

   Seis seções. A banda do simulador e o cartão do herói saíram em
   19/10/2026, com o simulador. Em 31/08/2026, "Três profundidades" e "Serviços de apoio" viraram um bloco
   de escopo; "Por que a ABITA" saiu.

   Medida em ch vale o corpo do próprio elemento, não o do bloco: teto de
   largura em título vai sempre no h2, nunca no container. No container ele
   resolve contra o corpo de 17px e espreme o display em cinco linhas.
   ========================================================================== */


/* ==========================================================================
   1 · HERÓI
   Cena inteira, texto sentado no rodapé dela e o WhatsApp logo abaixo.
   Até 19/10/2026 o convite do simulador descia sobre a seção seguinte.
   ========================================================================== */

/* A cena cobre a SEÇÃO, não só a área do texto. Presa ao .heroi__cena, a
   foto terminava onde a cena termina e o cartão descia sobre 420px de
   preto chapado, dos quais só 80 eram recuperados pela margem negativa
   da dor. A foto no elemento externo é o que faz o cartão flutuar sobre
   a cena em vez de sobre um buraco.

   `display: flow-root`, e não `overflow: hidden`. Os dois criam contexto
   de formatação, que é o que faz a margem negativa do cartão encurtar
   esta seção em vez de escapar por colapso. A diferença é o recorte:

   com `overflow: hidden` a fotografia inteira sumia, porque a camada de
   z-index negativo se perde no clipe, e o recorte ainda cortaria o
   cartão, que precisa vazar;
   sem contexto nenhum a margem colapsa para fora, a seção não encurta e
   a foto volta a correr até o rodapé do cartão.

   `flow-root` contém sem cortar, que é exatamente o que falta aqui. */
.heroi {
  position: relative;
  isolation: isolate;
  display: flow-root;
  background: var(--tinta);
  color: var(--texto-corpo-inv);
  --linha-cor: var(--linha-inv);
  --texto-cor: var(--papel);
  --meta-cor: var(--texto-meta-inv);
}

/* **A capa é uma sequência de seis cenas que correm para o lado.** Pedido do
   cliente em 15/09/2026: quem abre a página, sai e volta encontra outra
   imagem no fundo.

   **Cada cena entra pela direita e empurra a anterior para a esquerda**, e
   só as duas que se cruzam têm transição. As que esperam ficam à direita,
   escondidas e sem transição, então voltar para a fila não anima nada. Por
   isso a volta da sexta para a primeira continua indo para o mesmo lado, e
   não atravessa as seis de trás para frente.

   O recorte é da camada das cenas, e não do `.heroi`: o herói não pode ter
   `overflow`, pelo motivo escrito acima. */
.heroi__cenas {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}

/* **As que esperam ficam fora da árvore, com `display: none`**, e não só
   escondidas. Com `visibility: hidden` e empurradas 100% para a direita, o
   navegador as lia como perto da tela e baixava as seis no carregamento,
   `lazy` ou não: medido, as cinco novas em 1200 e em 2000px antes de a
   primeira troca acontecer. O script põe `is-pronta` na que vai entrar, e
   só ela volta para a árvore. */
.heroi__slide {
  position: absolute;
  inset: 0;
  display: none;
  transform: translateX(100%);
}

.heroi__slide.is-pronta,
.heroi__slide.is-atual,
.heroi__slide.is-saindo { display: block; }

.heroi__slide.is-atual,
.heroi__slide.is-saindo { transition: transform var(--t-troca) var(--suave); }

.heroi__slide.is-atual { transform: none; }
.heroi__slide.is-saindo { transform: translateX(-100%); }

.heroi__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* O miolo da cena está acima do centro geométrico: centrado, o corte
     come a parede do fundo e sobra piso. */
  object-position: 50% 38%;
}


.heroi__veu {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--veu-heroi);
}

/* A cena reserva a altura em que a promessa senta. Sem o cartão do
   simulador, que saiu em 19/10/2026, ela ocupa a dobra sozinha. */
.heroi__cena {
  position: relative;
  display: grid;
  min-height: clamp(32rem, 88svh, 56rem);
  align-content: end;
  padding-top: calc(var(--cabecalho-h) + var(--e-6));
  padding-bottom: clamp(var(--e-6), 6vw, var(--e-8));
}

.heroi__texto { max-width: min(100%, 46rem); }

/* O rótulo cai na parte mais clara do véu. Aqui ele é branco rebaixado,
   não cinza: cinza sobre foto clara não se lê. */
.heroi__rotulo {
  margin-bottom: var(--e-5);
  color: var(--meta-sobre-foto);
}

.heroi h1 { color: var(--papel); max-width: 14ch; }

/* Mesmo motivo do rótulo acima: cinza sobre foto clara não se lê. Em
   névoa o subtítulo media 4.46:1 em 360px, abaixo do AA, porque a régua
   do texto muda de faixa entre desktop e celular e cai fora da parte
   fechada do véu. Branco rebaixado resolve nas duas larguras. */
.heroi__sub {
  margin-top: var(--e-4);
  max-width: 42ch;
  color: var(--texto-sobre-foto);
}

.heroi__cta { margin-top: var(--e-6); }

/* ==========================================================================
   2 · A DOR
   Três blocos: o cabeçalho, os seis sintomas em degrau, e o fecho dividindo a
   linha com a aérea, que sai pela direita da tela.

   A foto ficava em cima, ao lado do título, e ali custava 557px de vazio:
   empurrada para baixo pelo cartão, deixava a coluna direita 244px mais
   alta que a esquerda. Desceu para o fecho, que por sua vez desperdiçava
   696px à direita. Os dois vãos se cancelam.
   ========================================================================== */

.dor__intro h2 { max-width: 16ch; }
.dor__rotulo { margin-bottom: var(--e-5); }

.dor__lista {
  margin-top: clamp(var(--e-6), 5vw, var(--e-8));
  display: grid;
  gap: var(--e-6) var(--gap);
}

.dor__item {
  padding-top: var(--e-4);
  border-top: var(--fio) solid var(--linha-inv);
}

.dor__item h3 { margin-top: var(--e-4); color: var(--papel); }
.dor__item p { margin-top: var(--e-2); }

.dor__final {
  grid-column: centro-start / cheia-end;
  margin-top: clamp(var(--e-6), 5vw, var(--e-8));
  display: grid;
  gap: var(--e-7);
}

.dor__fecho { display: grid; gap: var(--e-4); }
.dor__fecho .d2 { max-width: 24ch; color: var(--papel); }
.dor__assina { max-width: 46ch; color: var(--nevoa); }

.dor__fig { aspect-ratio: 16 / 10; }

@media (min-width: 760px) {
  .dor__lista { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
  .dor__lista { grid-template-columns: repeat(3, 1fr); }
  /* Degrau: a segunda coluna desce meio passo. Grade reta de seis lê
     como formulário; o degrau devolve a leitura em zigue-zague. */
  .dor__item:nth-child(3n + 2) { transform: translateY(var(--e-6)); }
  /* O fecho e a foto dividem a linha, o fecho no topo. Alinhado pelo
     rodapé ele descia 245px e abria um vão entre os seis sintomas e a
     frase que os amarra, bem no ponto em que a leitura precisa continuar.
     No topo, o vão vai para baixo dele, ancorado pela foto ao lado. */
  .dor__final { grid-template-columns: 1fr 1.25fr; gap: var(--e-9); align-items: start; }
}

/* A aérea atravessa a emenda entre a banda escura e a clara em vez de
   parar antes dela. Sem isso sobravam 106px de preto abaixo da foto e
   212px de vão até o texto claro, com a costura das duas bandas passando
   reta no meio desse vazio. */
@media (min-width: 1000px) {
  /* Quem recua é a seção, não a foto. Com a margem negativa na própria
     foto, a travessia só acontecia quando ela era o item mais alto da
     linha: em 1000px o texto do fecho fica mais alto que ela, a linha
     não encolhia e a foto terminava 88px ANTES da costura, invertendo o
     efeito. Recuando a seção, a travessia vale em qualquer largura. */
  .dor {
    padding-bottom: 0;
    margin-bottom: calc(var(--travessia) * -1);
  }
  /* O fecho não pode vazar junto: texto claro sobre banda clara some.
     O padding o segura dentro da parte visível da banda. */
  .dor__fecho { padding-bottom: var(--travessia); }
  /* A foto assenta no fundo da linha. Sem isso, quando o texto do fecho
     é mais alto que ela, ela termina antes da costura e a travessia
     simplesmente não acontece: em 1000px ficava 87px acima da emenda. */
  .dor__fig { position: relative; z-index: var(--z-flutua); align-self: end; }

  /* O respiro do escopo não precisa esperar a foto passar: ela ocupa a
     coluna direita e o cabeçalho fica na esquerda, sem cruzamento
     horizontal. Somados, os dois empurravam o título 141px abaixo da
     costura enquanto a foto invadia só 71: o texto ficava atrasado em
     relação à imagem em vez de encaixar nela. */
  .escopo { padding-top: var(--secao-curta); }
}

/* O respiro da seção inteira, aqui, é mais curto: a cena ao fundo já
   separa esta banda das vizinhas sem precisar de vazio. */
.metodo > .tela.secao { padding-block: var(--secao-curta); }


/* ==========================================================================
   3 · ESCOPO
   Fusão de "As três profundidades" com "Serviços de apoio". Quatro cards,
   cada um linkando a página interna: foto, nome e uma linha de descrição.

   O briefing §8.3 proíbe "quatro cards iguais lado a lado", e a proibição
   continua de pé: o que ela protege é a escada. Por isso os quatro não
   são iguais. Os três primeiros são profundidade e carregam número e a
   régua de alcance crescente, que é o que diz "cada um contém o anterior"
   sem a página repetir. O quarto é camada, não profundidade, e entra em
   banda invertida, sem número e sem régua.

   Em linha corrida a seção ocupava 1,6 tela no desktop e 2,5 no celular.
   ========================================================================== */

/* Título à esquerda, subtítulo na outra ponta da mesma linha, assentados
   pela base. Empilhado, "O que você precisa hoje" é curto e deixava a
   metade direita da linha vazia. */
/* Fecha com o respiro curto desde 16/09/2026. A nota de duas frases que
   ficava embaixo dos cards saiu, por decisão do cliente, e o respiro de
   seção inteiro que sobrava abaixo dos cards afastava demais esta banda
   da seguinte. */
.escopo { padding-bottom: var(--secao-curta); }

.escopo__cabeca { display: grid; gap: var(--e-4); }
.escopo__cabeca h2 { max-width: 12ch; }
.escopo__rotulo { margin-bottom: var(--e-5); }
.escopo__sub { max-width: 34ch; }

@media (min-width: 900px) {
  .escopo__cabeca {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: end;
    gap: var(--e-9);
  }
  .escopo__sub { justify-self: end; text-align: right; }
}

.escopo__lista {
  margin-top: clamp(var(--e-5), 3.5vw, var(--e-7));
  display: grid;
  gap: var(--gap);
}

.escopo__card { display: flex; }

/* O card inteiro é o alvo, e não um "ver mais" no rodapé. A foto cobre o
   card e o texto assenta sobre ela: sem moldura, sem faixa de legenda
   embaixo, sem duas caixas empilhadas. */
.escopo__alvo {
  position: relative;
  display: flex;
  align-items: flex-end;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--raio-card);
  background: var(--superficie);
  color: var(--texto-corpo-inv);
  isolation: isolate;
  transition: transform var(--t-media) var(--mola),
              box-shadow var(--t-media) var(--suave);
}

.escopo__alvo:hover {
  transform: translateY(calc(var(--e-1) * -1));
  box-shadow: var(--sombra-cartao);
}

/* A foto sai do fluxo e preenche o card. Sem isso ela empurraria o texto
   para fora em vez de ficar por baixo dele. */
.escopo__fig {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background: var(--superficie);
}

.escopo__fig img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Aproximação lenta no hover. O card sobe, a cena avança. */
.escopo__alvo:hover .escopo__fig img { transform: scale(1.04); }
.escopo__fig img { transition: transform var(--t-entrada) var(--mola); }

.escopo__alvo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--veu-card);
}

.escopo__corpo {
  display: grid;
  align-content: end;
  gap: var(--e-2);
  width: 100%;
  padding: clamp(var(--e-4), 2vw, var(--e-5));
}

/* Assenta na base da altura reservada, como o texto de baixo. Nome de uma
   linha só, como Mobiliário e Serviços, ficava no topo de uma caixa de duas
   e aparecia uma linha acima dos nomes de duas linhas: a caixa alinhava, o
   texto não. É o mesmo defeito da última frase do card. */
.escopo__nome {
  display: grid;
  align-content: end;
  font-size: var(--fs-d2-sub);
  line-height: var(--lh-titulo);
  letter-spacing: var(--ls-titulo);
  font-weight: var(--peso-medio);
  color: var(--papel);
  text-wrap: balance;
}

/* Duas linhas, não um parágrafo: a primeira é o escopo, a segunda é o
   caso de uso. Sobre fotografia, as duas são branco rebaixado no alfa,
   nunca cinza: cinza sobre cena clara não se lê. */
.escopo__escopo {
  font-size: var(--fs-sm);
  line-height: var(--lh-titulo);
  color: var(--texto-sobre-foto);
}

/* O texto assenta na base da altura reservada, não no topo dela. É a
   última linha do card, e com a sobra ficando embaixo, quem usa uma linha
   só, como Mobiliário e Serviços, terminava uma linha acima dos outros: os
   títulos alinhavam e o rodapé do texto não. Com a sobra em cima, as duas
   pontas alinham. */
.escopo__contexto {
  display: grid;
  align-content: end;
  font-size: var(--fs-sm);
  line-height: var(--lh-titulo);
  color: var(--meta-sobre-foto);
}

/* Os títulos alinham entre os cinco cards porque cada parte reserva a
   mesma altura em linhas. Com o conteúdo ancorado na base, reservar altura
   é o único jeito de igualar a posição do título sem uma grade compartilhada
   entre cards, que o CSS não dá para irmãos independentes.

   **A reserva segue a largura do card, e por isso ela pergunta ao card e
   não à tela.** A mesma frase quebra em mais pedaços quando o card estreita,
   e a largura do card depende do número de colunas, que muda três vezes.
   Em `@media` isso virava nove faixas de viewport, e cada mudança de grade
   obrigava a refazer todas. Em `@container` a conta é direta: cinco degraus
   de largura de card, medidos, que valem em qualquer arranjo de colunas.

   Foi a entrada da Assinatura, em 08/09/2026, que cobrou isso: com cinco
   colunas o card caiu de 255 para 220px em 1440, o texto passou a quebrar
   mais, e as reservas antigas deixaram 49px de desvio entre os títulos.

   Os degraus saem da medição do pior card em cada largura, com as reservas
   desligadas. Só valem onde os cards ficam lado a lado: em coluna única não
   há o que alinhar, e reservar linha vazia só alongaria a página. */
@media (min-width: 520px) {
  .escopo__card { container-type: inline-size; }

  /* O piso começa em 170 e não em 195 de propósito: em 1280px o card mede
     exatamente 195, e um arredondamento para baixo derrubaria a reserva
     inteira em vez de trocar de degrau. */
  @container (min-width: 170px) {
    .escopo__nome     { min-height: calc(2 * var(--lh-titulo) * 1em); }
    .escopo__escopo   { min-height: calc(4 * var(--lh-titulo) * 1em); }
    .escopo__contexto { min-height: calc(6 * var(--lh-titulo) * 1em); }
  }

  @container (min-width: 195px) {
    .escopo__contexto { min-height: calc(4 * var(--lh-titulo) * 1em); }
  }

  @container (min-width: 240px) {
    .escopo__escopo { min-height: calc(3 * var(--lh-titulo) * 1em); }
  }

  @container (min-width: 260px) {
    .escopo__contexto { min-height: calc(3 * var(--lh-titulo) * 1em); }
  }

  @container (min-width: 300px) {
    .escopo__escopo { min-height: calc(2 * var(--lh-titulo) * 1em); }
  }

  @container (min-width: 320px) {
    .escopo__contexto { min-height: calc(2 * var(--lh-titulo) * 1em); }
  }

  @container (min-width: 340px) {
    .escopo__nome { min-height: calc(1 * var(--lh-titulo) * 1em); }
  }
}

/* A régua vira um fio no rodapé do card, sobre a foto. */
.escopo__regua {
  position: absolute;
  inset: auto 0 0 0;
  height: calc(var(--fio) * 3);
  background: var(--linha-inv);
}

.escopo__regua::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--alcance);
  background: var(--papel);
  transition: width var(--t-entrada) var(--mola);
  transition-delay: var(--atraso, 0ms);
}

.js .escopo__card:not(.visivel) .escopo__regua::after { width: 0; }

/* O alcance é da entrega, não da posição na fileira. Com a ordem
   invertida, quem abre é o escopo maior: a régua desce e continua dizendo
   que um contém o anterior.

   **Reespaçada em 08/09/2026, quando entrou a Assinatura.** Eram três degraus,
   100, 67 e 34; agora são quatro, e o passo tinha de ser refeito, senão o
   quarto card ficaria com régua igual à do terceiro ou com um degrau de
   tamanho diferente dos outros. */
.escopo__card--1 { --alcance: 100%; }
.escopo__card--2 { --alcance: 75%; }
.escopo__card--3 { --alcance: 50%; }
.escopo__card--4 { --alcance: 25%; }

/* Serviços é camada contínua, não a quarta profundidade. Sem régua, e com
   o véu fechado por inteiro: a diferença de natureza aparece antes de
   qualquer palavra. */
.escopo__card--apoio .escopo__alvo::before {
  background: linear-gradient(180deg,
                rgba(11,11,12,0.55) 0%,
                rgba(11,11,12,0.78) 50%,
                rgba(11,11,12,0.93) 100%);
}


/* Duas colunas já em 520px. Em coluna única os quatro cards em pé
   custariam quatro telas de rolagem sozinhos, então abaixo disso o card
   fica mais baixo que alto. */
@media (max-width: 519px) {
  .escopo__alvo { aspect-ratio: 5 / 4; }
}

@media (min-width: 520px) {
  .escopo__lista { grid-template-columns: repeat(2, 1fr); }
}

/* Cinco cards desde 08/09/2026. A fileira única é o que carrega a escada,
   então ela só abre onde o card ainda tem largura de leitura. Entre 1000 e
   1279 a coluna central não dá isso para cinco, e aí são três mais dois. */
@media (min-width: 1000px) {
  .escopo__lista { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1280px) {
  .escopo__lista { grid-template-columns: repeat(5, 1fr); }
}


/* ==========================================================================
   4 · O MÉTODO
   Cena escura ao fundo, quatro etapas em fileira. O fecho absorve o fato
   dos 30%, que antes vivia em "Por que a ABITA".
   ========================================================================== */

.metodo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.metodo__foto {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.metodo__veu {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--veu-metodo);
}

/* Centrado: o pano vai do grafite ao bege de cima para baixo, e o corte
   central preserva a passagem inteira. */
.metodo__foto { object-position: 50% 50%; }

/* Escala de seção de meio de página, não de herói. Estava em --fs-d1,
   68px, o mesmo corpo dos títulos que abrem a página. */
.metodo__cabeca h2 {
  max-width: 26ch;
  font-size: var(--fs-d2-sub);
  line-height: var(--lh-titulo);
  letter-spacing: var(--ls-titulo);
  font-weight: var(--peso-medio);
  color: var(--papel);
  text-wrap: balance;
}
.metodo__rotulo { margin-bottom: var(--e-5); }

.metodo__lista {
  margin-top: clamp(var(--e-5), 3vw, var(--e-6));
  display: grid;
  gap: var(--e-6) var(--gap);
}

.metodo__etapa {
  padding-top: var(--e-4);
  border-top: var(--fio) solid var(--linha-inv);
}

.metodo__etapa h3 { margin-top: var(--e-4); color: var(--papel); }
.metodo__etapa p { margin-top: var(--e-2); }

/* O fecho subiu. As quatro etapas têm alturas de texto diferentes e a
   linha do grid vale pela maior, então abaixo das curtas já sobra vazio:
   somado a um respiro de 80px, virava uma faixa morta. */
.metodo__fecho {
  margin-top: clamp(var(--e-4), 2.5vw, var(--e-5));
  padding-top: var(--e-4);
  border-top: var(--fio) solid var(--linha-inv);
  max-width: 58ch;
  color: var(--papel);
}

@media (min-width: 700px) {
  .metodo__lista { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
  .metodo__lista { grid-template-columns: repeat(4, 1fr); }
}


/* ==========================================================================
   DECLARAÇÃO
   O momento mais importante da página, agora em banda clara.

   Método, declaração e prova eram três blocos escuros seguidos, e aí o
   preto deixa de ser ênfase e vira base. Invertidas as duas últimas, o
   método volta a ser o único escuro desta parte e recupera o peso.

   Saiu a fotografia por dentro das letras. Vazada, ela virava mancha sem
   imagem reconhecível, e em "estamos" e "projeto" a frase ficava quase
   ilegível. A frase não precisa de tratamento gráfico: precisa de corpo,
   contraste e silêncio em volta.
   ========================================================================== */

.declaracao {
  position: relative;
  display: grid;
  align-content: center;
  overflow: hidden;
  padding-block: clamp(var(--e-7), 6vw, var(--e-9));
}

/* Marca d'água, e só. Dimensionada pela altura e não pela largura: pelo
   lado maior ela estourava a seção e aparecia cortada no topo. Encostada
   à direita, fora da coluna de leitura. */
.declaracao__lambda {
  position: absolute;
  right: var(--goteira);
  top: 50%;
  translate: 0 -50%;
  height: 58%;
  aspect-ratio: 760 / 655;
  background: var(--tinta);
  opacity: 0.05;
  -webkit-mask: var(--lambda) no-repeat center / contain;
  mask: var(--lambda) no-repeat center / contain;
  pointer-events: none;
}

/* Uma linha só, como citação. Em --fs-mega, com teto de 15ch, a frase
   quebrava em três linhas e a seção virava uma dobra inteira. Corrida,
   ela ganha o gesto de fala e ocupa a altura de um parágrafo. */
.declaracao__frase {
  position: relative;
  font-size: var(--fs-citacao);
  line-height: 1.1;
  letter-spacing: var(--ls-mega);
  font-weight: var(--peso-medio);
  color: var(--texto);
}

@media (min-width: 760px) {
  .declaracao__frase { white-space: nowrap; }
}

.declaracao__pe {
  position: relative;
  margin-top: var(--e-4);
  max-width: 62ch;
  font-size: var(--fs-corpo);
  color: var(--texto-corpo);
}


/* ==========================================================================
   5 · PROVA
   O maior peso numérico da página. A recorrência é o argumento central e
   ganha o corpo inteiro: o leitor com medo de errar quer saber se vai se
   arrepender, e cliente que volta responde isso melhor que volume.
   Uma imagem só, ao lado dos números.
   ========================================================================== */

.prova__cabeca h2 { max-width: 14ch; }
.prova__cabeca { margin-bottom: 0; }
.prova__rotulo { margin-bottom: var(--e-5); }

/* O cabeçalho entrou na coluna da esquerda em 03/09/2026. Fora dela, a
   foto começava na altura do primeiro número e a coluna direita nascia um
   terço de tela abaixo do título. Dentro, as duas colunas partem da mesma
   linha e a seção fecha como um retângulo só. */
.prova__coluna {
  display: grid;
  align-content: start;
  gap: clamp(var(--e-5), 3vw, var(--e-6));
}

/* Duas colunas: números à esquerda, constelação de clientes à direita.
   A regra das colunas caiu junto quando a foto foi removida, e sem ela a
   composição passou a ocupar a largura inteira da seção: 1245px em vez de
   480, o que espalhou as logos e criou colisões. */
.prova__palco {
  display: grid;
  gap: clamp(var(--e-5), 3vw, var(--e-7));
}

/* Duas colunas e duas linhas, e as duas frases de fecho na linha de baixo.
   É o que faz os dois fios começarem na mesma altura: em fluxo separado
   cada coluna punha o fio onde sobrava, e a diferença era a altura do
   texto abaixo dele.

   A colocação é explícita porque a ordem do HTML é outra: no HTML a
   amplitude vem logo depois dos números, que é como ela precisa ser lida
   em coluna única no celular. */
@media (min-width: 900px) {
  .prova__palco {
    grid-template-columns: 1fr 1.05fr;
    grid-template-rows: auto auto;
    row-gap: clamp(var(--e-4), 2.4vw, var(--e-5));
  }
  .prova__coluna    { grid-area: 1 / 1; }
  .prova__amplitude { grid-area: 2 / 1; }
  .clientes         { grid-area: 1 / 2; }
  .prova__fecho     { grid-area: 2 / 2; }
}

.prova__dados {
  display: grid;
  gap: clamp(var(--e-4), 2.5vw, var(--e-6));
  align-content: start;
}

/* "Mais de" fica pequeno e "90%" grande: mesma frase, hierarquia dentro
   dela. É o que transforma um dado em imagem. */
.prova__qual {
  display: block;
  font-size: var(--fs-lead);
  line-height: 1.2;
  letter-spacing: var(--ls-lead);
  font-weight: var(--peso-normal);
  /* Em --texto-meta media 4.71:1 sobre a banda morna. Passa no AA por
     pouco, e "Mais de" faz parte do número, não é legenda de apoio. */
  color: var(--texto-corpo);
}

.prova__val {
  display: block;
  margin-top: var(--e-2);
  color: var(--texto);
}

.prova__dado p + p { margin-top: var(--e-2); color: var(--texto-corpo); }

.prova__menores { display: grid; gap: var(--e-4); }

/* A frase de fecho assenta abaixo da fileira de marcas, fechando a coluna
   direita. Ela já esteve no centro da composição de logos, onde competia
   com as marcas, e depois no pé da coluna de números, onde não tinha o que
   rematar. Aqui ela vem logo depois das marcas, que é o que ela comenta. */
.prova__fecho {
  /* Sem margem própria: o respiro para a fileira vem do `row-gap` do palco,
     que é o mesmo da amplitude do outro lado. Com margem aqui, o fio da
     direita descia 30px e os dois deixavam de casar. */
  padding-top: var(--e-4);
  border-top: var(--fio) solid var(--linha);
  font-size: var(--fs-d2-sub);
  line-height: var(--lh-titulo);
  letter-spacing: var(--ls-titulo);
  font-weight: var(--peso-medio);
  color: var(--texto);
}

.prova__amplitude {
  padding-top: var(--e-4);
  border-top: var(--fio) solid var(--linha);
  max-width: 50ch;
}



/* --------------------------------------------------------------------------
   CLIENTES — a coluna direita da Prova
   Uma imagem de ambiente entregue, uma linha de apoio e a fileira de
   marcas. A ordem importa: a foto prova a entrega, a fileira prova a
   recorrência, e a frase costura as duas sem virar título.
   -------------------------------------------------------------------------- */

/* Fora da coluna de texto, o fio corre a coluna inteira. */
.prova__fecho { max-width: none; }

/* Sem `gap`: os três respiros são diferentes de propósito. A linha de
   apoio encosta na foto, e a fileira de marcas fica longe das duas, porque
   é o argumento seguinte e não a legenda da imagem. */
.clientes {
  display: grid;
  align-content: start;
}

/* As duas colunas terminam na mesma linha, e a sobra de altura fica num
   lugar só: acima da fileira de marcas, que é onde o respiro é respiro.

   A foto não estica livre. Esticando, ela chegava a 0.80 de proporção em
   960px, e recortar uma cena larga até o retrato joga fora justamente a
   profundidade que ela mostra. A altura vem de `vw`, e como a coluna
   também cresce com a tela a proporção fica perto de 1.1 em qualquer
   largura.

   `minmax(0, 1fr)` é obrigatório na linha que estica: com `1fr` puro ela
   herda o mínimo de conteúdo e nunca encolhe. E a proporção fixa da
   moldura tem de sair, senão vence a altura, defeito já registrado em
   02/09 no `memoria.md`. */
@media (min-width: 900px) {
  .clientes {
    align-content: stretch;
    grid-template-rows: auto auto minmax(0, 1fr);
  }
  .clientes__moldura {
    aspect-ratio: auto;
    height: clamp(18rem, 40vw, 34rem);
  }
  .faixa { align-self: end; }
}

.clientes__moldura { border-radius: var(--raio-card); }

/* Apoio, não legenda de catálogo: corpo pequeno e cinza de meta, que sobre
   a banda morna mede 4.7:1 e passa no AA. */
.clientes__legenda {
  margin-top: var(--e-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-corpo);
  color: var(--texto-meta);
}


/* --------------------------------------------------------------------------
   FILEIRA DE MARCAS
   Contínua da direita para a esquerda, sem seta, sem parada e sem ponto
   de emenda: a lista aparece duas vezes e a trilha anda exatamente metade
   da própria largura, então a décima terceira marca chega ao lugar da
   primeira no instante em que o ciclo reinicia.

   O destaque do centro não é estado, é fase. A trilha anda em velocidade
   constante, então a marca de posição k cruza o centro sempre no mesmo
   instante do ciclo, e o atraso de cada uma é essa conta. Fosse por
   estado, precisaria de script medindo posição a cada quadro.

   `--centro` é medido em vales, e sai de quantos vales cabem à vista:
   metade da largura menos meia marca. Como as duas pontas da conta são a
   mesma variável usada no tamanho do item, mudar `--faixa-vale` no
   celular reposiciona o destaque junto, sem desalinhar.
   -------------------------------------------------------------------------- */

.faixa {
  margin-top: clamp(var(--e-5), 4.5vw, var(--e-7));
  container-type: inline-size;
  overflow: hidden;
  /* As pontas somem em vez de baterem numa borda reta. A rampa cobre um
     vale inteiro de cada lado: em 15% a marca da ponta ainda aparecia
     legível e cortada ao meio, que é o que se lia como logo defeituosa.
     Em 20% ela já dissolveu antes de a borda cortar. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20%, #000 80%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 20%, #000 80%, transparent 100%);
}

/* O tamanho do item usa `cqw` e não `%`: a trilha é mais larga que a
   caixa, então porcentagem dentro dela mediria a própria trilha e a conta
   se morderia. `cqw` mede a caixa. */
.faixa__trilha {
  --vale: calc(100cqw / var(--faixa-vale));
  --centro: calc(var(--faixa-vale) / 2 - (1 - var(--faixa-vao)) / 2);
  display: flex;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: faixaCorre var(--faixa-volta) linear infinite;
}

/* Respiro por margem e não por `gap`: com `gap` o último item não carrega
   o vão e a metade da trilha deixa de ser doze vales exatos, o que abre
   uma emenda visível a cada volta. */
.faixa__item {
  flex: 0 0 calc(var(--vale) * (1 - var(--faixa-vao)));
  margin-inline-end: calc(var(--vale) * var(--faixa-vao));
  /* Bloco, e não grade. Numa grade a linha é automática, a altura em
     porcentagem do filho fica cíclica e o navegador a descarta: aí a linha
     cresce com a marca e estoura a faixa. Em bloco de altura definida a
     porcentagem resolve direto. */
  height: var(--faixa-alt);
}

/* Bloco de verdade, e não `display: contents`. Com `contents` o `<source>`
   do `<picture>` vira item de grade junto com o `<img>` e abre uma segunda
   linha: aí a altura da linha do `<img>` passa a ser automática, a
   porcentagem dele fica cíclica e o navegador a trata como `auto`. A marca
   crescia até 84px numa faixa de 52 e o `overflow` cortava topo e base.
   Mesma correção de `.fig picture`, pelo mesmo motivo. */
.faixa__item picture { display: block; width: 100%; height: 100%; }

/* A caixa é o item inteiro e o `contain` encaixa a marca dentro dela, sem
   deformação e sem corte. */
.faixa__item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Cinza no repouso, para nenhuma marca disputar com a página, que é
     monocromática. A cor volta à medida que a marca se aproxima do
     centro e chega cheia só no centro, uma de cada vez. */
  filter: grayscale(1) contrast(0.9);
  opacity: 0.36;
  transform: scale(0.58);
  /* Sem `will-change`: são vinte e quatro imagens, e prometer camada
     própria para cada uma estoura a memória de composição. A animação de
     `transform` e `opacity` já roda fora da linha principal. */
  animation: faixaDestaca var(--faixa-volta) linear infinite;
  /* O atraso é o instante em que esta marca cruza o centro, e não o
     contrário: em CSS o tempo local da animação é t menos o atraso. Com o
     sinal invertido o destaque não para no centro, ele pula de posição a
     cada marca.

     As duas voltas descontadas no fim existem para o atraso ser sempre
     negativo. Atraso positivo em CSS é espera: a décima nona marca
     esperaria mais de um minuto parada no tamanho mínimo antes de acender
     pela primeira vez. Como o ciclo é infinito e periódico, descontar
     voltas inteiras não muda a fase, só o começo. */
  animation-delay: calc(
    (var(--k) - var(--centro)) * var(--faixa-volta) / 12 - 2 * var(--faixa-volta)
  );
}

@keyframes faixaCorre {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Um doze avos do ciclo é um vale. Daí a escada: grande no centro,
   média a um vale, pequena a dois. */
@keyframes faixaDestaca {
  0%,
  100%      { transform: scale(1);    opacity: 1;    filter: grayscale(0)    contrast(1); }
  8.333%    { transform: scale(0.74); opacity: 0.62; filter: grayscale(0.62) contrast(0.94); }
  16.667%,
  83.333%   { transform: scale(0.58); opacity: 0.36; filter: grayscale(1)    contrast(0.9); }
  91.667%   { transform: scale(0.74); opacity: 0.62; filter: grayscale(0.62) contrast(0.94); }
}

/* No celular a coluna inteira mede pouco mais de 300px: cinco vales
   deixariam cada marca com 50px de largura. */
@media (max-width: 719px) {
  .faixa__trilha { --faixa-vale: 3; }
}

/* Sem movimento a fileira não existe, então as marcas assentam paradas e
   todas legíveis. É a única posição em que a grade se justifica. */
@media (prefers-reduced-motion: reduce) {
  .faixa {
    -webkit-mask-image: none;
            mask-image: none;
  }
  /* Grade e não flex embrulhado: o respiro do item é margem, e no
     embrulho a margem da última marca da linha conta na conta da largura,
     o que empurra a quinta para a linha de baixo. */
  .faixa__trilha {
    animation: none;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
    gap: var(--e-4);
  }
  .faixa__item { margin-inline-end: 0; }
  .faixa__item:nth-child(n + 13) { display: none; }
  .faixa__item img {
    animation: none;
    transform: scale(0.86);
    opacity: 0.62;
  }
}


/* ==========================================================================
   6 · CTA FINAL
   ========================================================================== */

/* Sem as variáveis de banda escura, o h2 herda --texto (quase preto) e
   some sobre a foto. A seção é clara na aparência e escura na regra. */



.final__texto h2 { max-width: 14ch; }
.final__rotulo { margin-bottom: var(--e-5); }
.final .lead { margin-top: var(--e-4); max-width: 46ch; color: var(--nevoa); }
.final .cta { margin-top: clamp(var(--e-6), 5vw, var(--e-7)); }