/* ═════════════════════════════════════════════════════════════════
   RIVIO — Página de produto · refeita em 2026-09-23

   FAMÍLIA HOME (DIRETRIZES § 3.5). O texto que se lê, o eyebrow, a `dark-section`, o CTA, o cartão e o modal de vídeo
   vêm da `componentes.css`; esta folha tem só o que é da página:

   · as primeiras seções do Figma `1313:2398`: o topo claro (`.phead`),
     o filme contido (`.pvideo`), a fita do texto que se lê (`.ptell`)
     e os números em cards (`.pnum`);
   · a CENA DOS CINCO PRODUTOS (`.pcenas`): tela cheia, presa, uma foto
     por produto e os painéis da plataforma soltos na frente, entrando
     um a um — referência alethia.earth, pedida pelo Jefferson;
   · as TELAS (`.pm-*`): os painéis das cinco ilustrações do Figma
     refeitos em HTML;
   · a faixa de logos e o fecho fotográfico.
   ═════════════════════════════════════════════════════════════════ */

/* ═════════════════════════════════════════════════════════════════
   AS PRIMEIRAS SEÇÕES · Figma `1313:2398` ("Produto")
   Topo claro, o filme contido, o texto que se lê e os números em
   cards. Tudo sobre BRANCO (#fff), como no Figma — o corpo da página é
   Light-01.
   ═════════════════════════════════════════════════════════════════ */

/* ── O topo (`1313:2399`) ────────────────────────────────────────
   420 de altura a 1440, conteúdo pela base, 32 de margem. A lavada é a
   do Figma: radial lilás → azul-claro saindo do canto de cima à
   direita, a 30% (os alfas abaixo já estão multiplicados por 0,3). */
.phead {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* 521 (era 420): o vão entre o menu e a etiqueta subiu 50%, de 202
     para 303 ("um espaço um pouco maior entre o começo da seção e o
     menu"). O conteúdo assenta pela base, então é a altura que o dá. */
  min-height: 520px;
  padding: 158px 32px 32px;
}

/* A lavada lilás do canto (o degradê do Figma no `::before`) saiu com a
   malha: "o degradê empobrece o visual, deixa muito cheio de
   informação — quero minimalista, elegante, refinado". */

/* O HERÓI (`.phero`): o topo e o filme num bloco só, branco, com a
   malha atrás dos dois — o filme é parte do herói, não uma segunda
   seção. Menu sem fundo por cima dele e do texto que se lê
   (`data-nav-fundo="limpo"`); o desfoque volta nos números.

   A MALHA QUE RESPIRA (referência: o topo da vertice.one). Pontos
   pequenos numa grade fixa de 10px cuja intensidade varia como nuvem, e a nuvem anda.
   A técnica é a da malha da CTA (`.cta-seta__malha`): o pai é a
   MÁSCARA de pontos, os filhos são o CAMPO — manchas cinza suaves
   maiores que o herói, em duas camadas que andam em sentidos e ritmos
   diferentes (16 e 23 s de ida e volta, por `transform`, sem repintar),
   então a nuvem muda de forma enquanto anda. Cada ponto pega o cinza de
   onde está. A máscara apaga a malha no fim do herói. Parada com
   movimento reduzido. (A primeira versão, só no topo, com pontos a 5px
   e um ciclo de 36 s, "faltou movimentar".) */
.phero {
  position: relative;
  isolation: isolate;
  background: #fff;
}

.phero__malha {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image:
    radial-gradient(circle at center, #000 0.8px, transparent 1.25px),
    linear-gradient(180deg, #000 70%, transparent 100%),
    radial-gradient(var(--malha-r) circle at var(--malha-x) var(--malha-y), transparent 0, transparent 35%, #000 100%);
  -webkit-mask-size: 10px 10px, 100% 100%, 100% 100%;
  -webkit-mask-composite: source-in, source-in;
  mask-image:
    radial-gradient(circle at center, #000 0.8px, transparent 1.25px),
    linear-gradient(180deg, #000 70%, transparent 100%),
    radial-gradient(var(--malha-r) circle at var(--malha-x) var(--malha-y), transparent 0, transparent 35%, #000 100%);
  mask-size: 10px 10px, 100% 100%, 100% 100%;
  mask-composite: intersect, intersect;
  /* A INTENSIDADE tem piso e teto ("onde é muito visível, não mais que
     12%, para não atrapalhar a leitura; nos vãos, um pouquinho — não
     quero áreas em que suma 100%"). O teto é a opacidade da camada
     inteira, 12%: por mais que as manchas se somem, um ponto não passa
     disso. O piso é o fundo da própria camada, que a máscara também
     recorta em pontos: 30% de 12%, ~3,6% em toda parte. As manchas
     levam cada ponto do piso até o teto. */
  opacity: 0.12;
  background: rgba(88, 96, 112, 0.3);
}

.phero__malha i {
  position: absolute;
  inset: -30% -30%;
  will-change: transform;
}

.phero__malha i:nth-child(1) {
  background:
    radial-gradient(26% 29% at 18% 22%, rgba(88, 96, 112, 0.95), transparent 70%),
    radial-gradient(21% 26% at 46% 48%, rgba(88, 96, 112, 0.69), transparent 72%),
    radial-gradient(29% 23% at 76% 20%, rgba(88, 96, 112, 0.84), transparent 70%),
    radial-gradient(23% 29% at 30% 78%, rgba(88, 96, 112, 0.66), transparent 72%);
  animation: phero-nuvem-a 16s ease-in-out infinite alternate;
}

.phero__malha i:nth-child(2) {
  background:
    radial-gradient(23% 26% at 84% 64%, rgba(88, 96, 112, 0.81), transparent 70%),
    radial-gradient(18% 23% at 60% 30%, rgba(88, 96, 112, 0.58), transparent 72%),
    radial-gradient(26% 21% at 12% 56%, rgba(88, 96, 112, 0.69), transparent 70%),
    radial-gradient(21% 26% at 66% 86%, rgba(88, 96, 112, 0.58), transparent 72%);
  animation: phero-nuvem-b 23s ease-in-out infinite alternate;
}

/* O PONTEIRO na malha: onde ele passa, a malha SOME — uma borracha
   macia de ~240px que segue o cursor com atraso (0,55 s) e abre ao
   entrar no herói (`--malha-r`, 0,7 s). É a terceira camada da máscara
   da malha: transparente no centro, cheia na borda. Antes foi uma luz
   (não se via) e uma lente de pontos coloridos ("na verdade é o
   oposto: onde eu passar o mouse, que o pattern fique mais invisível,
   não apareça esse degradê"). As nuvens deslizam um pouco em sentidos
   opostos (`--nx`, `--ny`). `--malha-x/y/r` são registradas como
   comprimento (`@property`, nomes próprios — o registro é global) para
   ter transição. Tudo do `produtos.js` (`initMalha`), ponteiro fino. */
@property --malha-x { syntax: '<length>'; inherits: true; initial-value: -400px; }
@property --malha-y { syntax: '<length>'; inherits: true; initial-value: -400px; }
@property --malha-r { syntax: '<length>'; inherits: true; initial-value: 1px; }

.phero {
  transition:
    --malha-x 0.55s var(--ease-out-soft),
    --malha-y 0.55s var(--ease-out-soft),
    --malha-r 0.7s var(--ease-out-soft);
}

.phero.is-luz { --malha-r: 240px; }

.phero__malha i:nth-child(1) {
  translate: calc(var(--nx, 0) * 28px) calc(var(--ny, 0) * 20px);
  transition: translate 1.4s var(--ease-out-soft);
}

.phero__malha i:nth-child(2) {
  translate: calc(var(--nx, 0) * -22px) calc(var(--ny, 0) * -16px);
  transition: translate 1.8s var(--ease-out-soft);
}

@keyframes phero-nuvem-a {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); }
  30% { transform: translate3d(-9%, 5%, 0) rotate(5deg); }
  65% { transform: translate3d(6%, 9%, 0) rotate(-4deg); }
  100% { transform: translate3d(10%, -6%, 0) rotate(3deg); }
}

@keyframes phero-nuvem-b {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); }
  35% { transform: translate3d(8%, -7%, 0) rotate(-6deg); }
  70% { transform: translate3d(-7%, -3%, 0) rotate(4deg); }
  100% { transform: translate3d(-10%, 8%, 0) rotate(-2deg); }
}

@media (prefers-reduced-motion: reduce) {
  .phero__malha i { animation: none; translate: none; }
}

.phead__inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.phead__texto {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

/* A etiqueta do Figma é Dark-04 e tem 12 de respiro em cima e embaixo
   (a linha de 32). */
.phead__tag {
  padding-block: 12px;
  color: var(--dark-04, #626a7a);
}

/* O título: Funnel Display Light 98 a 1440, entrelinha 1, pintado com o
   "Brand/Gradient/Text" do Figma — Dark-02 que clareia para um
   cinza-azulado no fim da linha. No Figma é uma radial torta que vem de
   fora da caixa; aqui é a MESMA cor, amostrada no render do Figma a
   cada 80px ao longo de "Financial AI Service" (miolo do traço) e
   escrita como paradas em `em` — acompanha o corpo em qualquer
   largura. Desde 2026-09-28 é o token `--texto-degrade`. */
.phead__titulo {
  width: fit-content;
  max-width: 100%;
  font-weight: 300;
  font-size: clamp(48px, 6.806vw, 98px);
  line-height: 1;
  text-wrap: balance;
  background: var(--texto-degrade);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.phead__rolar {
  flex: none;
  padding-block: 8px;
  color: rgba(0, 0, 0, 0.52);
}

/* ── O filme (`1313:2444`) ───────────────────────────────────────── */
.pvideo {
  padding: 0 32px 32px;
}

.pvideo__quadro {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: clip;
  isolation: isolate;
  border-radius: 16px;
  background: #23262c;
}

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

/* O play do Figma: círculo branco a 30%, 81, ícone de 28,7. */
.pvideo__play {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 80px;
  height: 80px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  translate: -50% -50%;
  transition: background-color 0.4s var(--ease-out-soft), transform 0.5s var(--ease-out-expo);
}

.pvideo__play img { width: 28px; height: 28px; }

.pvideo__play:hover { background: rgba(255, 255, 255, 0.42); transform: scale(1.06); }

.pvideo__play:focus-visible {
  outline: 2px solid var(--light-01);
  outline-offset: 4px;
}

/* ── O texto que se lê (`1313:2493`) e a PASSAGEM para os números ──
   O palco da § 2 da home, com a frase que era a manchete. A fita tem
   duas partes além da tela do palco:

   · a LEITURA segue o ritmo da home, que conta CARACTERE: lá o
     parágrafo acende em 158svh ao longo de 124 passos (1,277svh por
     passo). Aqui são 50 caracteres e 71 passos (`n − 1 + 22` de
     rastro): 91svh de leitura, e 118 com o respiro (a mesma proporção
     de 77% do padrão do `tell.js`);
   · a PASSAGEM (`--ptell-cobre`, 100svh): a seção dos números vem por
     cima, com margem negativa do mesmo tamanho, enquanto o palco ainda
     está preso — os cards sobem passando na frente da frase, e a frase
     sobe e se apaga (`--some`, do `produtos.js`). Pedido do Jefferson:
     "os três cards em velocidades diferentes subindo e passando na
     frente do texto de cima, até que o texto vá fazendo movimento ao
     mesmo tempo de ir se apagando".

   A leitura termina ANTES da passagem: de 3% a `data-tell-fim` do curso
   de 218svh = 0,03 + 91/218 = 0,447. (No estreito não há fita: ver
   abaixo.)

   A quebra do Figma é "A inteligência artificial / mais eficiente da
   saúde.": na caixa de 16,667em da home a primeira linha levaria o
   "mais". Medido: de 10,4 a 11,2em a quebra é a do Figma (12,5 ainda
   leva o "mais"); 10,8, no meio da faixa, e em `em` como a da home. */
.ptell { --ptell-leitura: 118; --ptell-cobre: 100; }

.ptell .tell__track {
  height: calc((100 + var(--ptell-leitura) + var(--ptell-cobre)) * 1svh);
}

.ptell .tell__text {
  width: min(10.8em, 100%);
  opacity: calc(1 - var(--some, 0));
  translate: 0 calc(var(--some, 0) * -72px);
}

/* A regra acima é (0,2,0) e a que solta o palco no `componentes.css` é
   (0,1,0) — especificidade vence media query. Sem desfazer aqui, com
   movimento reduzido ou sem JS o texto aceso ficaria numa fita longa.
   (A mesma armadilha do `.carr-tell`.) */
@media (prefers-reduced-motion: reduce), (scripting: none) {
  .ptell .tell__track { height: auto; }
  .ptell .tell__track::after { display: none; }
}

/* ── Os números (`1313:2631`) ────────────────────────────────────
   Três cards Light-01 de 296 numa grade de 1216 com calha de 12. O
   número é Funnel Display 48 com o degradê vertical do Figma — o mesmo
   do `.case-num` (Dark-05 que apaga para 14% de si); o sufixo é menor
   e assenta na base ("M", "K") ou no meio ("+"). */
/* A COBERTURA (`.pcobre`, números + cena dos produtos): sobe sobre a
   última tela da fita do texto (o `--ptell-cobre`, 100). */
.pcobre {
  position: relative;
  margin-top: -100svh;
}

/* Os números ocupam UMA TELA, com os cards no CENTRO dela ("esses cards
   devem subir até o centro da seção"), e ficam PRESOS quando ela chega
   ao topo (`--pnum-topo`, do `produtos.js`: altura da tela − altura da
   seção, 0 quando ela tem uma tela). É o instante em que os cards
   terminam de se alinhar; daí a cena dos produtos sobe por cima
   (`z-index` 2 contra 1) — "quero que eles ainda apareçam como uma
   seção inteira na tela quando terminarem de se alinhar. Aí depois a
   seção de baixo vem cobrindo". O respiro embaixo dos cards (pedido
   antes: "para ela não ficar afogada") é a metade da tela que sobra.

   O fundo e os cards são os do formato `.ganhos` (componentes.css) desde
   2026-09-27 ("mudar essa seção para esse formato"): o degradê cinza
   que desce para o Light-01 e os cards em degrau (`--desce`). A frase
   já se apagou quando a borda da seção chega nela (ver `--some`). */
.pnum {
  position: sticky;
  top: var(--pnum-topo, 0px);
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100svh;
  padding: 32px;
}

.pcobre > .pcenas { z-index: 2; }

/* A velocidade de cada card: no começo da passagem ele está `--vel`svh
   mais baixo que o lugar dele, e chega junto com os outros quando a
   seção prende (`--q` de 0 a 1, do `produtos.js`). Sem JS, `--q` é 1.

   A SAÍDA ("aparecem com paralaxe e deveriam desaparecer com um
   paralaxe"): enquanto a cena dos produtos cobre a tela (`--saida` de 0 a
   1), cada card sobe `--sai`svh e se apaga. As velocidades de saída são
   as de entrada invertidas (42/28/14 contra 14/28/42): o primeiro card,
   que chegou antes, sai antes, e a escada desce para a direita nas duas
   pontas — a onda atravessa a seção. Invertidas também para o estreito,
   onde os cards empilham: o de cima corre mais e eles se afastam, sem
   um passar por cima do outro. */
.pnum .pnum__card {
  translate: 0 calc((1 - var(--q, 1)) * var(--vel, 0) * 1svh - var(--saida, 0) * var(--sai, 0) * 1svh);
  opacity: calc(1 - var(--saida, 0) * 1.6);
}

/* O degrau do formato, também abaixo de 1280 — lá o `.ganhos` põe o
   degrau de duas colunas, e aqui são três. */
.pnum .ganhos__card { margin-top: var(--desce, 0px); }

@media (prefers-reduced-motion: reduce), (scripting: none) {
  .pcobre { margin-top: 0; }
  .pnum { position: relative; top: auto; min-height: 0; padding: 120px 32px; }
  .pnum .pnum__card { translate: none; opacity: 1; }
}

/* NO ESTREITO nada prende: a fita do texto, a passagem e a seção dos
   números tomavam uma tela cada, e o primeiro scroll mostrava o filme
   com uma tela branca embaixo ("é simplesmente horrível chegar na
   primeira seção e ter um espaço absurdo vazio embaixo"; "deixar essa
   seção com altura total no mobile não é uma boa ideia"). Os números
   vêm em seguida, sem sobrepor e sem paralaxe. 860 é o corte do
   `tell.js`.

   O texto: um palco de 44% da tela (e não uma tela), preso no MEIO
   dela por uma PAUSA curta — 45% da tela de rolagem a mais na fita,
   num `::after` (o `sticky` não entra no padding do pai). Na primeira
   versão ele só passava pela tela, e a leitura não cabia: "ficou muito
   compacta no mobile e não deu tempo de executar a animação do texto
   completamente". A leitura vai do palco entrando até o fim da pausa
   (`data-tell-solto-estreito`, `tell.js`). Na primeira tela o texto
   aparece logo abaixo do filme, quase apagado. */
@media (max-width: 860px) {
  /* Branca: o palco menor não cobre a fita, e o fundo da página
     (Light-01, lilás claro) aparecia em faixas acima e abaixo dele. */
  /* O respiro de cima é meia tela menos meia frase: o palco só prende
     quando o herói acabou de sair pelo alto, e prende com a frase no
     CENTRO da tela — a seção é a tela inteira nesse instante ("deixar
     centralizado na seção esse texto: onde começa a seção e onde ela
     termina"). 37px = meia frase de duas linhas (30 × 1,24 × 2 / 2). */
  .ptell .tell__track { height: auto; padding-top: calc(50svh - 36px); background: #fff; }
  .ptell .tell__track::after { content: ''; display: block; height: 45svh; }
  /* O palco tem a altura da FRASE (e não 44% da tela): preso no centro
     da tela, ele fica parado enquanto os números sobem, e solta quando o
     topo deles encosta na base dele — com os 48 do `.pnum`, é o vão
     entre a frase e o primeiro card ("um vão enorme entre o primeiro
     card e o texto; quero no máximo 48"). Antes: ~150 de sobra no palco
     + 64 do topo dos números. */
  .ptell .tell__stage { top: calc(50svh - 36px); height: auto; padding: 0 var(--gutter); }
  .ptell .tell__text { opacity: 1; translate: none; }
  .pcobre { margin-top: 0; }
  .pnum { position: relative; top: auto; min-height: 0; }
  .pnum .pnum__card { translate: none; opacity: 1; }
  .pnum .ganhos__card { margin-top: 0; }
}

/* `width: 100%`: dentro da seção flex (a de uma tela, com os cards no
   centro), `margin: auto` sem largura encolhia a grade para o conteúdo
   — 1000px em vez de 1216. */
.pnum__lista {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
}

/* A aparência do card, a malha e o hover são os do formato `.ganhos`
   (componentes.css), que levou para os outros lugares a microinteração
   que nasceu aqui (2026-09-27). Aqui fica só a passagem, acima. */

/* ═════════════════════════════════════════════════════════════════
   A CENA DOS CINCO PRODUTOS

   Tela larga (≥ 1100 e ≥ 640 de altura) com JS: seção de TELA CHEIA,
   presa. A referência é a alethia.earth, e a correção do Jefferson na
   primeira versão: "algo desconstruído sem o shape atrás da ilustração
   e o texto de conteúdo posicionado no canto da tela". Então:

   · a foto ocupa a tela inteira, sem margem nem caixa;
   · as ilustrações não têm placa nem tela de fundo — só os painéis da
     frente, de vidro sobre a foto, no arranjo exato do Figma, centrados
     nas três colunas do meio da grade do pé e subindo juntos com a
     rolagem;
   · no alto, de borda a borda (34 de margem), a navegação dos cinco;
     no pé, o texto do produto deitado.

   A seção tem `--n + 1` trechos de rolagem: o primeiro é a ABERTURA (o
   título da seção no meio da primeira foto, sem tela nem etiqueta), e cada um dos
   outros é um produto. O `produtos.js` escreve classes (`is-abertura`,
   `is-vista`, `is-ativa`, `is-coberta`, `is-ativo`) e um número (`--p`,
   quanto do trecho já passou); o resto é CSS:

   1. a foto do produto novo SOBE por cima da anterior (`clip-path`,
      1,1 s) e assenta de 1,06 para 1;
   2. só depois os painéis entram, um de cada vez (`--i`), e dentro deles
      as linhas, as barras e a curva (`--k`);
   3. o texto do produto troca, e na navegação um fio mede quanto falta
      para o próximo.

   Sem JS, em tela estreita ou baixa: cada produto vira um card (foto +
   painéis) com o texto embaixo, na ordem do documento — a lista é
   `display: contents` e o `order` intercala card e texto.
   ═════════════════════════════════════════════════════════════════ */
.pcenas {
  --borda-x: max(var(--gutter), (100% - 1216px) / 2);
  position: relative;
  background: var(--dark-01);
}

.pcenas__palco {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 96px var(--gutter) 96px;
}

.pcenas__cabeca {
  order: -1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 640px;
}


.pcenas__titulo {
  font-weight: 300;
  font-size: clamp(28px, 2.6vw, 40px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--light-01);
  text-wrap: balance;
}

/* Sem JS e no estreito: card + texto, intercalados. O índice só existe
   na cena presa. */
.pcenas__pe,
.pcenas__lista { display: contents; }
.pcenas__indice { display: none; }

.pcena {
  order: calc(var(--o) * 2);
  position: relative;
  aspect-ratio: 800 / 614;
  border-radius: var(--r-caixa);
  overflow: clip;
  isolation: isolate;
}

.pprod { order: calc(var(--o) * 2 + 1); }

.pcena__foto {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #2a2c31;
}

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

/* O véu do Figma (preto a 16%). */
.pcena__foto::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.16);
}

/* No card, os painéis ocupam o miolo como no Figma (704 de 800). */
.pcena__area {
  position: absolute;
  inset: 6%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pcena__quadro {
  position: relative;
  width: 100%;
  aspect-ratio: 704 / 528;
  container-type: inline-size;
}

/* FORA DA CENA PRESA (abaixo de 1100 × 640): os painéis EMPILHADOS,
   cada um na largura do card e INTEIRO na vista, na escala do desktop.

   Duas soluções recusadas antes desta. A composição inteira (704u)
   encolhida no card dava 0,5px por unidade — texto de 3 a 4px ("os
   mockups estão minúsculos no mobile"). Uma faixa lateral na escala
   legível cortava o painel largo e escondia o outro ("aumentar o
   mockup para esse tamanho absurdo e a pessoa não conseguir ver todas
   as telas?").

   Aqui a unidade é a que faz 250u caberem no card (1,3px a 390, entre
   1,15 e 1,5 — o desktop usa 1,28), e cada painel tem no máximo a sua
   largura do Figma (`--w`). Os da direita (249,3u) cabem como são. Os da
   esquerda (366,7u) se REORGANIZAM na largura menor: o texto quebra
   linha, as linhas de "rótulo … valor" descem o valor quando não cabe,
   os blocos de altura fixa passam a ter a altura do conteúdo, e os
   cards de indicador da cena 5 põem o gráfico embaixo do número. Numa
   tela maior que isso (tablet), cada painel fica na sua largura do
   Figma, centrado. */
@media not all and (min-width: 1100px) and (min-height: 640px) {
  .pcena { aspect-ratio: auto; }

  .pcena__area {
    position: relative;
    inset: auto;
    display: block;
    padding: 12px;
  }

  .pcena__quadro {
    width: 100%;
    aspect-ratio: auto;
    container-type: normal;
  }

  .pcena__quadro .pm {
    --u: clamp(1.15px, (100vw - 2 * var(--gutter) - 24px) / 250, 1.5px);
    position: relative;
    inset: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(8.8 * var(--u));
  }

  .pcena__quadro .pm-c {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    max-width: calc(var(--w) * var(--u));
    height: auto;
    min-height: calc(var(--h) * var(--u));
  }

  /* O texto quebra linha. As quebras manuais do Figma (`<br>`) eram da
     largura de 366,7u: nos painéis que se reorganizam, saem — cada uma
     tem um espaço depois dela no HTML, que no desktop some no começo da
     linha e aqui separa as palavras. */
  .pcena__quadro .pm-t { white-space: normal; }
  .pcena__quadro .pm-c:not(.pm-pain--b) br { display: none; }

  /* "Rótulo … valor" e "título … etiquetas": o que não cabe desce. */
  .pcena__quadro .pm-c:not(.pm-pain--b) :is(.pm-lado, .pm-motivo__cod, .pm-conta__cols, .pm-legs) {
    flex-wrap: wrap;
    row-gap: calc(6 * var(--u));
    column-gap: calc(10 * var(--u));
  }

  /* Os campos de valor tinham largura fixa (55u): o rótulo quebrava em
     duas linhas. E a linha "Código … Descrição …" vira duas, rótulo e
     valor lado a lado — quebrando solta, o rótulo "Descrição" ficava
     longe do valor dele. */
  .pcena__quadro .pm-c:not(.pm-pain--b) .pm-campo { width: auto; }
  .pcena__quadro .pm-c:not(.pm-pain--b) .pm-campo .pm-rot { white-space: nowrap; }
  .pcena__quadro .pm-motivo__cod {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
  }
  .pcena__quadro .pm-motivo__cod > * { width: auto; }

  /* O Figma dava altura fixa a alguns painéis e nenhum respiro embaixo
     ("Remessa paga"): com a altura do conteúdo, o respiro é o dos lados. */
  .pcena__quadro .pm-c:not(.pm-pain--b) { padding-bottom: calc(14.667 * var(--u)); }

  /* Os blocos de altura fixa do Figma passam a ter a do conteúdo. */
  .pcena__quadro :is(.pm-aj, .pm-sug, .pm-motivo, .pm-rec) { height: auto; }
  .pcena__quadro .pm-aj { padding-bottom: calc(4.4 * var(--u)); }
  .pcena__quadro .pm-motivo { padding-bottom: calc(8.8 * var(--u)); }

  /* O BARALHO (`initBaralho`, `produtos.js`): com JS e movimento, o card
     tem a altura do palco (`--palco-h`) e os painéis, um pouco mais
     compactos (270u no card, 1,2px a 390, e não 250), ficam um sobre o
     outro na mesma posição; o JS os move no tempo. Sem transição: a
     posição é a do quadro. Sem JS ou com movimento reduzido, fica a
     pilha de cima. */
  .pcena.is-baralho { height: var(--palco-h); }

  .pcena.is-baralho .pcena__area {
    position: absolute;
    inset: 0;
    padding: 0;
    overflow: clip;
  }

  .pcena.is-baralho .pcena__quadro { height: 100%; }

  .pcena.is-baralho .pcena__quadro .pm {
    --u: clamp(1.1px, (100vw - 2 * var(--gutter) - 24px) / 270, 1.5px);
    display: block;
    height: 100%;
  }

  .pcena.is-baralho .pcena__quadro .pm-c {
    position: absolute;
    left: 12px;
    right: 12px;
    width: auto;
    /* No tablet, no máximo a largura do painel largo do Figma, centrado. */
    max-width: calc(366.667 * var(--u));
    margin-inline: auto;
    /* A altura do conteúdo, e não a do Figma: sem vão embaixo. */
    min-height: 0;
    transform-origin: 50% 0;
    will-change: transform;
  }

  .js .pcena.is-baralho .pm-c,
  .js .pcena.is-baralho .pm-c > *,
  .js .pcena.is-baralho :is(.pm-aj, .pm-conta, .pm-sug, .pm-acoes, .pm-motivo, .pm-rec) {
    transition: none;
  }

  /* Os gráficos crescem quando o painel POUSA (`is-ativa` no painel):
     sem a espera longa da cena presa, onde a foto entrava antes. */
  .js .pcena.is-baralho .pm-c.is-ativa :is(.pm-seg, .pm-mot__b, .pm-progresso, .pm-tempo > i, .pm-col) {
    transition-delay: calc(0.15s + var(--k, 0) * 0.08s);
  }
  .js .pcena.is-baralho .pm-c.is-ativa .pm-mot { transition-delay: calc(0.1s + var(--k, 0) * 0.06s); }
  .js .pcena.is-baralho .pm-c.is-ativa .pm-curva__linha { transition-delay: 0.15s; }
  .js .pcena.is-baralho .pm-c.is-ativa .pm-curva__area { transition-delay: 0.6s; }
  .js .pcena.is-baralho .pm-c.is-ativa .pm-curva__ponto { transition-delay: 1.5s; }
  .js .pcena.is-baralho .pm-c.is-ativa .pm-curva__halo { transition-delay: 1.6s; }

  /* Os GRÁFICOS na largura do texto: no Figma eles têm largura fixa
     (215,5u na cena 3, 161,3u nos indicadores da cena 5), e no painel
     mais largo sobrava margem à direita — "o gráfico tem que ficar da
     mesma largura do bloco de texto embaixo; a margem direita igual à
     esquerda". A curva escala por inteiro (altura pelo `viewBox`, o
     ponto continua redondo); dias, meses e colunas passam de posições
     em unidade para frações da largura do Figma. */
  .pcena__quadro .pm-curva-caixa .pm-curva { width: 100%; height: auto; margin-left: 0; }
  .pcena__quadro .pm-dias span { width: auto; flex: 2 1 0; }
  .pcena__quadro .pm-dias span:first-child,
  .pcena__quadro .pm-dias span:last-child { flex: 1 1 0; }

  .pcena__quadro .pm-pain--lado .pm-mini { width: 100%; }
  .pcena__quadro .pm-mini__area:has(> .pm-curva) { height: auto; }
  .pcena__quadro .pm-mini .pm-curva { position: relative; left: auto; top: auto; display: block; width: 100%; height: auto; }
  .pcena__quadro .pm-mini__eixo span { left: calc(var(--dx) / 161.333 * 100%); }
  .pcena__quadro .pm-mini .pm-col { left: calc((var(--bx) + 3.22) / 161.333 * 100%); width: calc(11 / 161.333 * 100%); }
  .pcena__quadro .pm-mini__meses { padding-left: calc(10.901 / 161.333 * 100%); }
  .pcena__quadro .pm-mini__meses span { width: calc(23.255 / 161.333 * 100%); }

  /* Os cards de indicador (cena 5): número em cima, gráfico embaixo, na
     largura do Figma (161,3u) — encolher o gráfico desalinharia os dias
     e as colunas, que são posições em unidade. */
  .pcena__quadro .pm-pain--lado {
    flex-direction: column;
    gap: calc(12 * var(--u));
  }
}

/* ── O texto de cada produto ───────────────────────────────────── */
.pprod {
  color: var(--light-01);
  margin-bottom: 24px;
}

/* A TIPOGRAFIA É A DAS LAYERS DA HOME (`.lay__status`, `.lay__titulo`,
   `.lay__desc` no `home.css`): o mesmo bloco de tag, título e texto —
   "a gente já tem tudo isso". Só a cor muda: lá é tinta sobre a barra
   branca, aqui é branco sobre a foto. */
.pprod__cab {
  display: flex;
  gap: var(--tag-gap);
  font-family: var(--font-label);
  font-weight: var(--tag-peso);
  font-size: var(--tag-corpo);
  line-height: 1;
  letter-spacing: var(--tag-track);
  text-transform: uppercase;
  color: var(--light-80);
}

.pprod__num { color: var(--light-48); }

.pprod__frase {
  margin-top: 12px;
  font-weight: 400;
  font-size: clamp(22px, 1.944vw, 28px);
  line-height: 1.2;
  text-wrap: balance;
}

.pprod__desc {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--light-80);
}

/* ═══ A CENA PRESA ═════════════════════════════════════════════════ */
@media (min-width: 1100px) and (min-height: 640px) {
  /* Largura total: 34 de margem, e não a coluna de 1216 do site — "a
     seção deve ser largura total, ainda tô vendo uma margem enorme,
     deveria ser 34px". */
  .js .pcenas {
    --borda-x: 34px;
    --calha: 24px;
    /* A navegação fica no alto, 56 abaixo do menu do site (que tem 56):
       um vão da altura do próprio menu. Com 24 ela se misturava com ele
       ("acaba se mesclando com o menu"). A área dos painéis começa 40
       abaixo dela (a navegação tem ~40 de alto). */
    --nav-topo: 112px;
    --topo: calc(var(--nav-topo) + 80px);
    height: calc((var(--n) + 1) * 90svh + 100svh);
  }

  .js .pcenas__palco {
    position: sticky;
    top: 0;
    height: 100svh;
    display: block;
    padding: 0;
    overflow: clip;
  }

  /* A ABERTURA: o título da seção no meio da primeira foto. Sai subindo
     quando o primeiro produto entra, e volta se a rolagem voltar. */
  .js .pcenas__cabeca {
    position: absolute;
    z-index: 20;
    inset: 0;
    max-width: none;
    align-items: center;
    justify-content: center;
    padding: 0 var(--borda-x);
    text-align: center;
    opacity: 0;
    transform: translateY(-32px);
    pointer-events: none;
    transition: opacity 0.5s var(--ease-out-soft), transform 0.8s var(--ease-out-soft);
  }

  .js .pcenas.is-abertura .pcenas__cabeca {
    opacity: 1;
    transform: none;
    transition: opacity 0.9s var(--ease-out-soft) 0.2s, transform 1.1s var(--ease-out-expo) 0.2s;
  }

  .js .pcenas__titulo {
    max-width: 12em;
    font-size: clamp(40px, 4.167vw, 60px);
    line-height: 1.16;
    letter-spacing: -0.03em;
  }

  /* As cinco cenas empilhadas, em tela cheia. A de índice maior fica
     por cima; a que ainda não chegou está recortada até sumir por
     baixo (`inset(100% 0 0 0)`). */
  .js .pcena {
    position: absolute;
    inset: 0;
    z-index: calc(var(--o) + 1);
    aspect-ratio: auto;
    border-radius: 0;
    clip-path: inset(100% 0 0 0);
    visibility: hidden;
    transition:
      clip-path 1.1s var(--ease-in-out-soft),
      visibility 0s linear 1.1s;
  }

  .js .pcena.is-vista {
    clip-path: inset(0 0 0 0);
    visibility: visible;
    transition: clip-path 1.1s var(--ease-in-out-soft), visibility 0s linear 0s;
  }

  /* Cena coberta por duas outras: já não aparece, não precisa pintar. */
  .js .pcena.is-coberta { visibility: hidden; transition: none; }

  .js .pcena__foto img {
    transform: scale(1.06);
    transition: transform 2.6s var(--ease-out-soft);
  }

  .js .pcena.is-ativa .pcena__foto img { transform: none; }

  /* O véu da tela cheia: por igual, para os painéis brancos se separarem
     das fotos claras; mais denso embaixo, onde correm o texto e a
     navegação, e no alto, onde passa o menu. Na abertura o título fica
     no meio: ali o véu fecha mais. */
  .js .pcena__foto::after {
    background:
      linear-gradient(0deg, rgba(0, 0, 0, 0.74) 0%, rgba(0, 0, 0, 0.6) 30%, rgba(0, 0, 0, 0.3) 44%, rgba(0, 0, 0, 0) 60%),
      linear-gradient(180deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.5) 15%, rgba(0, 0, 0, 0) 30%),
      rgba(0, 0, 0, 0.22);
  }

  .js .pcena__foto::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    transition: opacity 0.8s var(--ease-out-soft);
  }

  .js .pcenas.is-abertura .pcena__foto::before { opacity: 1; }

  /* A área dos painéis: a largura inteira, entre o menu e o pé da seção
     (texto + navegação, cuja altura o `produtos.js` escreve em
     `--pe-h`). Os painéis centrados nela. */
  .js .pcena__area {
    inset: var(--topo) var(--borda-x) calc(var(--pe-h, 260px) + 40px);
    container-type: size;
  }

  /* O quadro RECORTADO: sem a tela de fundo, os painéis de todas as
     cinco ilustrações ficam entre y 96 e y 432 da régua de 704 × 528 —
     o resto era céu vazio. O quadro mostra só essa faixa (704 × 336).

     CENTRADO e ALINHADO À GRADE do pé ("ao centro da tela", pedido do
     Jefferson): a parte visível dos painéis (x 35,2 a 668,8 da régua,
     633,6 de largura — simétrica no quadro) ocupa as três colunas do
     meio, da borda esquerda da 2ª à borda direita da 4ª. Com cinco
     colunas, as três do meio SÃO o centro. Os painéis ficam no arranjo
     exato do Figma — mesmo topo, e um vão de 17,6u entre eles, que a
     1440 dá 22px, a calha da grade (24). Na proporção da grade em
     qualquer largura, sem tomar a tela ("não deixa tudo enorme"). Se a
     altura não deixar, o quadro encolhe e continua centrado. */
  .js .pcena__quadro {
    --qw: min(((100cqw - 4 * var(--calha)) * 3 / 5 + 2 * var(--calha)) * 704 / 633.6, 100cqh * 704 / 336);
    width: var(--qw);
    aspect-ratio: 704 / 336;
  }

  .js .pcena__quadro .pm {
    inset: auto 0;
    top: calc(-96 * var(--u));
    height: calc(528 * var(--u));
  }

  /* O PÉ da seção: o texto do produto, na grade de cinco colunas, de
     borda a borda. (A navegação morava aqui, embaixo dele; subiu para o
     alto da tela a pedido do Jefferson.) */
  .js .pcenas__pe {
    position: absolute;
    z-index: 20;
    left: var(--borda-x);
    right: var(--borda-x);
    bottom: calc(var(--borda-x) + 16px);
    display: block;
    transition: opacity 0.5s var(--ease-out-soft);
  }

  .js .pcenas.is-abertura .pcenas__pe,
  .js .pcenas.is-abertura .pcenas__indice { opacity: 0; pointer-events: none; }

  /* Os cinco textos dividem a mesma célula; só o ativo aparece, e entra
     depois da foto. Deitado: número, nome e frase nas três primeiras
     colunas, o texto nas duas últimas, as duas pontas pela base. */
  .js .pcenas__lista { display: grid; }

  .js .pprod {
    grid-area: 1 / 1;
    align-self: end;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: var(--calha);
    align-items: end;
    margin: 0;
    opacity: 0;
    transform: translateY(20px);
    visibility: hidden;
    transition:
      opacity 0.35s var(--ease-out-soft),
      transform 0.5s var(--ease-out-soft),
      visibility 0s linear 0.5s;
  }

  .js .pprod.is-ativo {
    opacity: 1;
    transform: none;
    visibility: visible;
    transition:
      opacity 0.8s var(--ease-out-soft) 0.55s,
      transform 1s var(--ease-out-expo) 0.55s,
      visibility 0s linear 0s;
  }

  .js .pprod__cab { grid-column: 1 / 4; grid-row: 1; }

  /* A caixa da frase em `em`, e não a das três colunas: a 1920 as
     colunas davam 1100px e a frase longa corria numa linha só ("tem que
     quebrar em duas linhas"). Em 18em a quebra acompanha o corpo e não a
     tela — as três frases longas em duas linhas e as duas curtas numa,
     iguais de 1100 a 2560 (medido). */
  .js .pprod__frase {
    grid-column: 1 / 4;
    grid-row: 2;
    max-width: 18em;
  }

  .js .pprod__desc {
    grid-column: 4 / 6;
    grid-row: 1 / 3;
    margin: 0;
  }

  .js .pprod__num { color: var(--light-64); }

  /* A NAVEGAÇÃO: no ALTO da tela, logo abaixo do menu do site, os cinco
     produtos deitados, um por coluna da mesma grade do texto. Um fio em
     cima de cada item; no ativo ele enche conforme a rolagem avança
     (`--p`, 0 → 1). */
  .js .pcenas__indice {
    position: absolute;
    z-index: 20;
    top: var(--nav-topo);
    left: var(--borda-x);
    right: var(--borda-x);
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: var(--calha);
    transition: opacity 0.5s var(--ease-out-soft);
  }

  .js .pcenas__indice a {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 18px 0 2px;
    font-size: 16px;
    line-height: 1.3;
    color: var(--light-80);
    transition: color 0.4s var(--ease-out-soft);
  }

  .js .pcenas__indice a:hover,
  .js .pcenas__indice a.is-ativo { color: var(--light-01); }

  /* No alto, sobre as janelas e a luz das fotos, nomes e números em 80:
     a 64 os números ficavam em 4,3 no pior trecho (medido cena a cena,
     com o texto escondido). O ativo se distingue pelo branco e pelo fio. */
  .js .pcenas__indice-num {
    font-family: var(--font-label);
    font-weight: var(--tag-peso);
    font-size: 12px;
    letter-spacing: var(--tag-track);
    color: var(--light-80);
  }

  .js .pcenas__fio {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.24);
  }

  .js .pcenas__fio::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--light-01);
    transform: scaleX(0);
    transform-origin: 0 50%;
  }

  .js .pcenas__indice a.is-ativo .pcenas__fio::after { transform: scaleX(var(--p, 0)); }

  /* Ao passar o ponteiro num produto que não está em cena, o fio dele
     acende um trecho curto — a promessa do clique. (No ativo o fio é da
     rolagem e não tem transição: seguiria atrasado.) */
  .js .pcenas__indice a:not(.is-ativo) .pcenas__fio::after {
    transition: transform 0.45s var(--ease-out-soft);
  }

  .js .pcenas__indice a:not(.is-ativo):hover .pcenas__fio::after {
    transform: scaleX(0.14);
    transition-timing-function: var(--ease-out-expo);
  }

  /* O MOVIMENTO: os painéis sobem devagar, TODOS JUNTOS, conforme a
     rolagem atravessa o trecho do produto — 24 unidades da régua no
     trecho inteiro. Velocidades diferentes por painel (uma versão
     anterior) desencontravam os topos: "que alinhamento é esse". É o
     `translate`, e não o `transform`: este é da entrada, e tem transição
     com atraso, que faria o painel seguir a rolagem atrasado. */
  .js .pcena .pm-c {
    translate: 0 calc((0.5 - var(--p, 0.5)) * 24 * var(--u));
  }
}

/* O MENU RECOLHIDO (`initMenuRecolhido`, `produtos.js`): com o palco
   preso, o menu do site sobe e some; volta com o ponteiro na borda de
   cima (`nav-espiada`), e fica enquanto o ponteiro, o foco ou o mega
   menu estiverem nele. As mesmas regras da home (`home.css`,
   `cta-a-frente`), com a transição que lá não faz falta. */
.nav {
  transition:
    color 0.5s var(--ease-out-soft),
    background-color 0.5s var(--ease-out-soft),
    opacity 0.45s var(--ease-out-soft),
    transform 0.6s var(--ease-out-expo);
}

.pcenas-recolhe .nav {
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
}

.pcenas-recolhe.nav-espiada .nav,
.pcenas-recolhe .nav:is(:hover, :focus-within, .is-mega, .is-menu-aberto) {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

@media (min-width: 1100px) and (min-height: 640px) and (max-height: 800px) {
  .js .pcenas { --nav-topo: 92px; --topo: calc(var(--nav-topo) + 68px); }
}

/* ═════════════════════════════════════════════════════════════════
   AS TELAS · `.pm-*`

   As cinco ilustrações do Figma, camada por camada, na régua de 704 ×
   528 do quadro. Uma medida de N no Figma é `calc(N * var(--u))`, e o
   `--u` é 1/704 da largura do quadro (unidade de container, `cqw`): a
   tela inteira escala com o quadro, sem JS e sem perder nitidez.

   As medidas vêm em variáveis SEM unidade no `style` de cada peça
   (`--x`, `--f`, `--pt`…). As genéricas são registradas como NÃO
   herdáveis (`@property`, abaixo): sem isso um `--pt` do painel desceria
   para um filho que não declarou o dele. As das legendas (`--dot`,
   `--dg`) herdam de propósito — a lista declara, cada item usa.

   Gerado a partir do Figma por um script de uso único (registrado no
   HISTÓRICO, 2026-09-23); daqui em diante o HTML é a fonte.
   ═════════════════════════════════════════════════════════════════ */
@property --x { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --y { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --w { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --h { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --i { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --k { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --pt { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --pb { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --px { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --pl { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --pr { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --py { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --g { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --f { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --l { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --f2 { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --r { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --tw { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --iw { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --ih { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --sw { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --bh { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --s { syntax: '<number>'; inherits: false; initial-value: 0; }

.pm {
  --u: calc(100cqw / 704);
  position: absolute;
  inset: 0;
  font-family: 'Funnel Sans', var(--font-display), sans-serif;
  font-weight: 400;
  /* O MATERIAL. Tudo é vidro: o painel e as peças de dentro, cada camada
     um pouco mais clara que a de baixo; a cor fica nos ícones e nos
     gráficos, em tons translúcidos, nunca chapada — referência da Legora
     trazida pelo Jefferson ("nossos cards ainda têm muita cor chapada, o
     que tem transparência é só o fundo"). O texto é BRANCO, e nada
     escuro nas camadas de cima: sobre fotos escurecidas, tinta preta em
     vidro perde contraste ("elementos da cor preta nas camadas
     superiores vão dar problema de contraste"). */
  --pm-tx: #fff;
  --pm-tx2: rgba(255, 255, 255, 0.8);
  --pm-az: #c3d4ff;
  --pm-ma: #fff;
  --pm-linha: rgba(255, 255, 255, 0.16);
  --pm-peca: rgba(255, 255, 255, 0.1);
  --pm-brilho: inset 0 calc(0.8 * var(--u)) 0 rgba(255, 255, 255, 0.28);
  color: var(--pm-tx);
  letter-spacing: 0;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}

.pm *,
.pm *::before,
.pm *::after { box-sizing: border-box; }

.pm p { margin: 0; }
.pm b { font-weight: 500; }
.pm img { display: block; max-width: none; }

/* Uma camada: posição e tamanho do Figma, padding pelas variáveis. */
.pm-c {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow: clip;
  padding:
    calc(max(var(--pt), var(--py)) * var(--u))
    calc(max(var(--pr), var(--px)) * var(--u))
    calc(max(var(--pb), var(--py)) * var(--u))
    calc(max(var(--pl), var(--px)) * var(--u));
}

.pm-pain {
  /* Vidro fosco: um véu branco leve que clareia de cima para baixo,
     desfoque forte, o fundo um pouco apagado (`brightness`, para o texto
     branco ter onde se apoiar) e a cor dele mais viva (`saturate`) — é o
     que faz o vidro parecer vidro e não cinza. Nenhum contorno: a borda
     é só o brilho no topo e a sombra embaixo. */
  border-radius: calc(14.667 * var(--u));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04));
  box-shadow:
    var(--pm-brilho),
    0 calc(24 * var(--u)) calc(56 * var(--u)) rgba(0, 0, 0, 0.2);
  -webkit-backdrop-filter: blur(calc(28 * var(--u))) saturate(1.4) brightness(0.52);
  backdrop-filter: blur(calc(28 * var(--u))) saturate(1.4) brightness(0.52);
}

/* A LUZ: um reflexo que segue o ponteiro sobre o vidro (`--mx`, `--my`,
   escritos pelo `produtos.js` só onde há ponteiro fino). Sem ponteiro,
   fica apagado. */
.pm-pain::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(calc(220 * var(--u)) circle at var(--mx, 50%) var(--my, -30%), rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 70%);
  opacity: var(--luz, 0);
  mix-blend-mode: soft-light;
  pointer-events: none;
  transition: opacity 0.6s var(--ease-out-soft);
}

/* As PEÇAS de dentro: vidro mais claro, com o mesmo brilho no topo. */
.pm-item,
.pm-caixinha,
.pm-etq,
.pm-botao,
.pm-evid {
  background: var(--pm-peca);
  box-shadow: var(--pm-brilho), 0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(0, 0, 0, 0.04);
}

.pm-pain--b { border-radius: calc(15.514 * var(--u)); }

.pm-pain--meio { justify-content: center; }
.pm-pain--lado { flex-direction: row; justify-content: space-between; }

/* ── Texto ── */
.pm-t {
  font-size: calc(var(--f) * var(--u));
  line-height: calc(var(--l) * var(--u));
  white-space: nowrap;
}

.pm-d { font-family: var(--font-display); font-weight: 500; }
.pm-d4 { font-family: var(--font-display); font-weight: 400; }
.pm-m { font-weight: 500; }
.pm-sb { font-weight: 600; }
.pm-cz { color: var(--pm-tx2); }
.pm-az { color: var(--pm-az); }
.pm-ma { color: var(--pm-ma); }
/* O RÓTULO: a fonte de apoio do site (`--font-label`, Bai Jamjuree),
   em caixa alta e no peso e espaçamento das tags (`--tag-peso`,
   `--tag-track` 0,48 a 12 = 0,04em) — "nesses modais a gente não tá
   usando nossa fonte de apoio [...] que a gente usa nas tags, em textos
   pequenos, toda em letra maiúscula". Vai nos NOMES: de campo (Item,
   Valor da glosa, Data…), títulos pequenos de card (Ganho adicional,
   Pendências…), legendas, etiquetas, tipos (Adição, Remoção), eixos dos
   gráficos. Frases, valores e títulos de painel seguem na Funnel. Em
   caixa alta a letra parece maior: 86% do corpo de onde está. */
.pm-rot,
.pm-dias,
.pm-mini__eixo,
.pm-mini__meses {
  font-family: var(--font-label);
  font-weight: var(--tag-peso);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pm-rot { font-size: 0.86em; }

/* O número dos cards da visão geral (cena 5): 15 (21 era "grosseiro,
   números muito grandes"), e a legenda embaixo em rótulo. */
.pm-kpi { letter-spacing: -0.01em; }
.pm-menor { font-size: calc(var(--f2) * var(--u)); line-height: calc(9.696 * var(--u)); }

.pm-lado { display: flex; justify-content: space-between; width: 100%; }
.pm-base { align-items: baseline; }
.pm-topo { align-items: flex-start; }

.pm-pilha {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--g) * var(--u));
  padding-top: calc(var(--pt) * var(--u));
  width: 100%;
}

.pm-recuo {
  padding-top: calc(var(--pt) * var(--u));
  padding-left: calc(var(--pl) * var(--u));
  width: 100%;
}

.pm-ico {
  width: calc(var(--iw) * var(--u));
  height: calc(var(--ih) * var(--u));
  flex: none;
}

.pm-titico { display: flex; align-items: center; gap: calc(5 * var(--u)); }

.pm-leg {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--dg) * var(--u));
  white-space: nowrap;
}

.pm-leg::before {
  content: '';
  flex: none;
  width: calc(var(--dot) * var(--u));
  height: calc(var(--dot) * var(--u));
  border-radius: 50%;
  background: var(--c);
}

/* ── Peças que se repetem ── */
.pm-item {
  width: 100%;
  border-radius: calc(8.8 * var(--u));
}

.pm-div {
  display: block;
  width: calc(0.733 * var(--u));
  height: calc(11 * var(--u));
  border-radius: calc(0.367 * var(--u));
  background: var(--pm-tx2);
}

.pm-legs {
  display: flex;
  align-items: center;
  gap: calc(var(--g) * var(--u));
  padding-top: calc(var(--pt) * var(--u));
  font-size: calc(var(--f) * var(--u));
  line-height: calc(var(--l) * var(--u));
  color: var(--pm-tx2);
}

.pm-legs--forte b { margin-right: calc(1.4 * var(--u)); color: var(--pm-tx); }

.pm-progresso {
  display: block;
  width: 100%;
  height: calc(var(--bh) * var(--u));
  border-radius: calc(var(--bh) * 0.5 * var(--u));
  /* O azul da legenda ("Recuperada", "Valor liberado": as duas barras
     estão em 100%) no vidro dos segmentos — cor a 72% e o brilho no
     topo. Branco liso, ela era a única peça sem o material. */
  background: color-mix(in srgb, #6694ff 72%, transparent);
  box-shadow: var(--pm-brilho);
  transform-origin: 0 50%;
}

.pm-linha {
  display: block;
  width: 100%;
  height: calc(0.554 * var(--u));
  border-radius: calc(0.277 * var(--u));
  background: var(--pm-linha);
}

.pm-selo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: calc(var(--s) * var(--u));
  height: calc(var(--s) * var(--u));
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  box-shadow: var(--pm-brilho);
  color: var(--pm-tx);
  font-weight: 600;
  font-size: calc(var(--f) * var(--u));
  line-height: 1;
}

.pm-campo { display: flex; flex-direction: column; gap: calc(4.107 * var(--u)); width: calc(55 * var(--u)); }
.pm-campo--d { align-items: flex-end; }

.pm-cita { display: flex; gap: calc(6.233 * var(--u)); padding-top: calc(5.427 * var(--u)); width: 100%; }
.pm-cita > i { display: block; flex: none; width: calc(1.1 * var(--u)); height: calc(39.6 * var(--u)); border-radius: calc(0.55 * var(--u)); background: var(--pm-linha); }
.pm-cita > p { padding-top: calc(0.917 * var(--u)); }
.pm-cita--b { gap: calc(5.818 * var(--u)); padding-top: calc(6.095 * var(--u)); }
.pm-cita--b > i { width: calc(0.831 * var(--u)); height: calc(28.812 * var(--u)); }
.pm-cita--b > p { padding-top: calc(1.607 * var(--u)); }

/* Os ícones que o Figma desenhou em tinta (preto, cinza, azul-marinho)
   ficam BRANCOS sobre o vidro: os arquivos continuam os do Figma, quem
   clareia é o filtro. */
.pm-ico[src$="c3-info.svg"],
.pm-ico[src$="c3-util.svg"],
.pm-ico[src$="c3-nao-util.svg"],
.pm-ico[src$="c4-seta.svg"],
.pm-ico[src$="c4-check.svg"] { filter: brightness(0) invert(1); }

/* As CURVAS (cenas 3 e 5). No Figma, a linha corria de laranja a
   lilás a azul sobre uma área cinza-azulada, e a curva tinha quinas
   (alças desencontradas) — recusadas: "esse degradê no gráfico está
   esquisito", "as linhas não estão orgânicas". Refeitas no HTML a
   partir dos MESMOS pontos do Figma (um por dia), numa spline cúbica
   monotônica: passa por todos, sem quina e sem ultrapassar os picos.
   Uma cor só, o azul claro da marca, que ACENDE da esquerda para a
   direita (45% → 100%: o passado apagado, o hoje nítido); embaixo, uma
   névoa azul que some antes da base; no último dia, o ponto branco com
   um halo — o "agora". A grade vira quase nada (6%). */
.pm-curva { display: block; overflow: visible; }
.pm-curva rect { fill: rgba(255, 255, 255, 0.06); }
.pm-curva__ponto { fill: #fff; }
.pm-curva__halo { fill: #6694ff; opacity: 0.28; }

/* ── 01 · Auditoria ── */
.pm-resumo { display: flex; align-items: center; gap: calc(8.067 * var(--u)); }
.pm-resumo span { margin-left: calc(1.6 * var(--u)); }

.pm-aj {
  display: flex;
  gap: calc(7.333 * var(--u));
  height: calc(38.133 * var(--u));
  padding: calc(4.4 * var(--u)) calc(10.267 * var(--u)) 0;
}

.pm-aj__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: calc(10.267 * var(--u));
  height: calc(11.733 * var(--u));
  padding-top: calc(1.467 * var(--u));
}

.pm-aj__txt { display: flex; flex-direction: column; flex: 1; gap: calc(2.2 * var(--u)); min-width: 0; }

.pm-graf,
.pm-grupo { display: flex; flex-direction: column; width: 100%; }
.pm-graf { gap: calc(var(--g) * var(--u)); padding-top: calc(var(--pt) * var(--u)); }
.pm-grupo { gap: calc(4.987 * var(--u)); }

.pm-barra { display: flex; gap: calc(2.216 * var(--u)); height: calc(19.947 * var(--u)); }

.pm-seg {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: none;
  width: calc(var(--sw) * var(--u));
  height: 100%;
  padding-right: calc(4.987 * var(--u));
  overflow: clip;
  border-radius: calc(3.879 * var(--u));
  background: color-mix(in srgb, var(--c) 72%, transparent);
  box-shadow: var(--pm-brilho);
  color: #fff;
  font-weight: 600;
  font-size: calc(5.762 * var(--u));
  line-height: calc(9.004 * var(--u));
  white-space: nowrap;
  transform-origin: 0 50%;
}

.pm-pend-caixa { display: flex; flex: 1; flex-direction: column; min-height: 0; width: 100%; padding-top: calc(var(--pt) * var(--u)); }

.pm-pend {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(8.865 * var(--u)) calc(11.081 * var(--u)) calc(9.004 * var(--u));
  border-radius: calc(9.973 * var(--u));
  background: rgba(255, 190, 120, 0.22);
  box-shadow: var(--pm-brilho), 0 calc(1.108 * var(--u)) calc(1.662 * var(--u)) rgba(0, 0, 0, 0.05);
}

.pm-pend > div { display: flex; flex-direction: column; gap: calc(7.203 * var(--u)); }
.pm-pend > div + div { gap: calc(4.017 * var(--u)); }
.pm-pend__n { color: #ffc58a; }

/* ── 02 · Envio automatizado ── */
.pm-estado { display: flex; align-items: center; gap: calc(10.267 * var(--u)); }
.pm-estado__txt { display: flex; flex-direction: column; gap: calc(4.18 * var(--u)); }

.pm-pasta { position: relative; flex: none; width: calc(47.485 * var(--u)); height: calc(44.1 * var(--u)); }
.pm-pasta > * { position: absolute; }
.pm-pasta__fundo { left: calc(1.69 * var(--u)); top: 0; width: calc(44.1 * var(--u)); height: calc(42.402 * var(--u)); }
/* A pasta é uma INSTÂNCIA do componente "Pasta de status" (1288:2262,
   129,5 × 120,3) reduzida a 36,67%. O MCP do Figma devolve a instância
   com posições, tamanhos, bordas e sombras já na escala, mas os RAIOS
   sem ela: 13,864 e 9,264, que são os do componente. Na escala são 5,083
   (frente) e 3,397 (papel) — com os raios do componente a frente virava
   uma pílula e as quinas do fundo escapavam pelos lados. */
.pm-pasta__papel { left: calc(2.54 * var(--u)); top: calc(6.78 * var(--u)); width: calc(42.402 * var(--u)); height: calc(34.77 * var(--u)); border-radius: calc(3.397 * var(--u)); background: rgba(255, 255, 255, 0.92); }

.pm-pasta__frente {
  left: 0;
  top: calc(8.48 * var(--u));
  width: calc(47.485 * var(--u));
  height: calc(35.62 * var(--u));
  border-radius: calc(5.083 * var(--u));
  background: linear-gradient(143.125deg, var(--c1), var(--c2));
  box-shadow: 0 calc(2.2 * var(--u)) calc(5.867 * var(--u)) rgba(0, 0, 0, 0.1);
}

.pm-pasta__selo {
  display: flex;
  align-items: center;
  justify-content: center;
  left: calc(13.56 * var(--u));
  top: calc(16.11 * var(--u));
  width: calc(20.358 * var(--u));
  height: calc(20.358 * var(--u));
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 calc(1.1 * var(--u)) calc(2.933 * var(--u)) rgba(0, 0, 0, 0.08);
}

.pm-nota { position: absolute; top: calc(15.4 * var(--u)); right: calc(16.285 * var(--u)); text-align: right; }
/* A HIERARQUIA do indicador: o número é a notícia (branco, 27,5); o
   que ele mede, "aceite no primeiro envio", é legenda — na segunda voz
   (80%) e no corpo dos textos dos painéis (9,4; era 13,3), e não no
   azul que o fazia disputar com o número ("não faz o menor sentido
   [...] estar na cor azul se destacando"). O destaque
   secundário vai para a comparação: "4 p.p acima" em branco e peso 600,
   com uma seta de alta no azul claro da marca — o único azul do topo,
   agora onde há um sinal. */
.pm-nota__alta { color: var(--pm-tx); font-weight: 600; white-space: nowrap; }
.pm-nota__alta::before {
  content: '';
  display: inline-block;
  width: calc(4.8 * var(--u));
  height: calc(4.2 * var(--u));
  margin-right: calc(2.2 * var(--u));
  vertical-align: calc(0.2 * var(--u));
  background: var(--pm-az);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

/* 12,6 e não os 7,8 do Figma: a legenda de cima desceu de 13,3 para 9,4 (ver `.pm-nota__alta`) e o vão devolve a altura que ela deixou. */
.pm-abas { display: flex; gap: calc(4.433 * var(--u)); padding-top: calc(12.6 * var(--u)); }

.pm-aba {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(58.732 * var(--u));
  height: calc(16.622 * var(--u));
  border-radius: calc(8.311 * var(--u));
  background: rgba(255, 255, 255, 0.14);
  box-shadow: var(--pm-brilho);
  color: var(--pm-tx);
  font-weight: 500;
  font-size: calc(6.649 * var(--u));
  line-height: calc(8.311 * var(--u));
}

.pm-aba--on { width: calc(47.65 * var(--u)); background: #fff; box-shadow: none; color: #1b1c1f; }

/* O gráfico dos MOTIVOS. No Figma, rótulo à direita numa coluna de
   77,6 e barra ao lado, com 23,5 de vão entre as linhas: no escuro isso
   virou cinco barras brancas soltas num campo vazio ("tá muito pobre
   visualmente [...] precisa preencher melhor os espaços"). Aqui, na
   MESMA altura total (171,6u) e com os MESMOS dados: o rótulo sobe para
   cima da barra, alinhado à esquerda, e a barra corre num TRILHO da
   largura inteira do painel (marcas de escala a cada quarto apareciam
   através do vidro da barra e a cortavam em gomos — saíram). ALTURA e
   raio das barras de progresso da mesma cena (8,067 e 4,033; o vão
   rótulo → barra, 5,28, também é o delas), "para manter a
   consistência" — eram 15,5; o vão entre as linhas cresceu para 16,5 e
   a altura total segue 171,6. As
   larguras são as do Figma na proporção do trilho de lá (129,654u = a
   largura útil menos rótulo e vão). A barra é vidro azul — o da legenda,
   mais denso na ponta — com o brilho do topo; o maior motivo
   (Elegibilidade) acende inteiro e o rótulo dele fica branco, os outros
   ficam a meia força: a leitura do gráfico é qual motivo pesa mais. */
.pm-mots { display: flex; flex-direction: column; gap: calc(16.5 * var(--u)); width: 100%; padding-top: calc(19.947 * var(--u)); }
.pm-mot { display: flex; flex-direction: column; gap: calc(5.28 * var(--u)); }
.pm-mot__trilho {
  position: relative;
  display: block;
  height: calc(8.067 * var(--u));
  border-radius: calc(4.033 * var(--u));
  background: rgba(255, 255, 255, 0.06);
}
.pm-mot__b {
  display: block;
  width: calc(var(--sw) / 129.654 * 100%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, #6694ff 30%, transparent), color-mix(in srgb, #6694ff 55%, transparent));
  box-shadow: var(--pm-brilho);
  transform-origin: 0 50%;
}
.pm-mot--max > p { color: var(--pm-tx); }
.pm-mot--max .pm-mot__b { background: linear-gradient(90deg, color-mix(in srgb, #6694ff 55%, transparent), color-mix(in srgb, #8fb0ff 92%, transparent)); }

/* ── 03 · Aumento de receita ── */
.pm-conta { display: flex; gap: calc(10.267 * var(--u)); padding-top: calc(15.253 * var(--u)); }
.pm-conta .pm-selo { margin-top: calc(2.64 * var(--u)); line-height: calc(9.68 * var(--u)); }
.pm-conta__cols { display: flex; gap: calc(26.4 * var(--u)); }
.pm-conta .pm-campo:last-child { width: auto; }

.pm-sug {
  display: flex;
  flex-direction: column;
  height: calc(108.533 * var(--u));
  margin-top: calc(15.4 * var(--u));
  padding: calc(9.093 * var(--u)) calc(10.267 * var(--u)) calc(7.37 * var(--u));
  border-radius: calc(10.267 * var(--u));
}

.pm-sug__topo { align-items: flex-start; }
.pm-sug__item { display: flex; gap: calc(5.867 * var(--u)); }
.pm-sug__item .pm-selo { margin-top: calc(4.84 * var(--u)); }
.pm-sug__vals { display: flex; gap: calc(11 * var(--u)); }
.pm-sug__vals .pm-campo { width: calc(62.333 * var(--u)); gap: calc(3.373 * var(--u)); }
.pm-tracejado { width: 100%; height: calc(8.8 * var(--u)); }

.pm-acoes { align-items: flex-start; padding-top: calc(10.267 * var(--u)); }
.pm-avaliar { display: flex; gap: calc(4.4 * var(--u)); }

.pm-botao {
  display: inline-flex;
  align-items: center;
  gap: calc(4.4 * var(--u));
  width: calc(68.933 * var(--u));
  height: calc(20.533 * var(--u));
  padding-left: calc(7.333 * var(--u));
  border-radius: calc(10.267 * var(--u));
  font-weight: 500;
  font-size: calc(7.627 * var(--u));
  line-height: calc(9.533 * var(--u));
}

.pm-botao--q { justify-content: center; width: calc(20.533 * var(--u)); padding: 0; border-radius: calc(5.867 * var(--u)); }

.pm-curva-caixa { width: 100%; padding-top: calc(var(--pt) * var(--u)); }
.pm-curva-caixa .pm-curva { width: calc(215.535 * var(--u)); height: calc(85.327 * var(--u)); margin: calc(-0.28 * var(--u)) 0 0 calc(-0.831 * var(--u)); }

.pm-dias { display: flex; width: 100%; padding-top: calc(6.871 * var(--u)); font-size: calc(var(--f) * 0.86 * var(--u)); line-height: calc(var(--l) * var(--u)); color: var(--pm-tx2); }
.pm-dias span { width: calc(35.645 * var(--u)); text-align: center; }
.pm-dias span:first-child { width: calc(17.823 * var(--u)); text-align: left; }
.pm-dias span:last-child { width: calc(17.823 * var(--u)); text-align: right; }

/* ── 04 · Recurso eficiente ── */
.pm-etqs { display: flex; gap: calc(4.4 * var(--u)); padding-top: calc(0.293 * var(--u)); }

.pm-etq {
  display: inline-flex;
  align-items: center;
  gap: calc(4.4 * var(--u));
  height: calc(19.067 * var(--u));
  padding: 0 calc(8.8 * var(--u));
  border-radius: calc(9.533 * var(--u));
  font-weight: 500;
  font-size: calc(7.627 * var(--u));
  line-height: calc(9.533 * var(--u));
  white-space: nowrap;
}

.pm-etq--az { padding-left: calc(7.333 * var(--u)); background: rgba(102, 148, 255, 0.3); color: #fff; }
.pm-etq--br { background: rgba(255, 255, 255, 0.16); }

.pm-motivo {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: calc(77.733 * var(--u));
  margin-top: calc(25.227 * var(--u));
  padding: calc(8.8 * var(--u)) calc(10.267 * var(--u)) 0;
  border-radius: calc(10.267 * var(--u));
  background: rgba(233, 146, 255, 0.2);
  box-shadow: var(--pm-brilho), 0 calc(1.467 * var(--u)) calc(2.2 * var(--u)) rgba(0, 0, 0, 0.05);
}

.pm-motivo > p:first-child { color: #f5d0ff; }
.pm-motivo__meio { align-items: flex-start; padding-top: calc(7.187 * var(--u)); }
.pm-motivo__vals { display: flex; gap: calc(11 * var(--u)); }
.pm-motivo__vals .pm-campo { gap: calc(3.153 * var(--u)); }

.pm-motivo__cod {
  display: flex;
  align-items: baseline;
  padding-top: calc(6.6 * var(--u));
  font-size: calc(7.627 * var(--u));
  line-height: calc(9.533 * var(--u));
}

.pm-motivo__cod span { font-size: calc(6.747 * var(--u)); line-height: calc(8.433 * var(--u)); }
.pm-motivo__cod > :nth-child(1) { width: calc(33.733 * var(--u)); }
.pm-motivo__cod > :nth-child(2) { width: calc(44 * var(--u)); }
.pm-motivo__cod > :nth-child(3) { width: calc(42.533 * var(--u)); }

.pm-rec {
  display: flex;
  flex-direction: column;
  height: calc(136.4 * var(--u));
  margin-top: calc(8.8 * var(--u));
  padding: calc(8.947 * var(--u)) calc(10.267 * var(--u)) calc(10.267 * var(--u));
  border-radius: calc(10.267 * var(--u));
}

.pm-rec__arg { margin-top: calc(7.187 * var(--u)); gap: calc(4.4 * var(--u)); }
.pm-rec__anexos { margin-top: calc(3.923 * var(--u)); }

.pm-evid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: calc(22 * var(--u));
  margin-top: calc(6.893 * var(--u));
  padding: 0 calc(8.8 * var(--u));
  border-radius: calc(7.333 * var(--u));
  font-size: calc(7.627 * var(--u));
  line-height: calc(9.533 * var(--u));
}

.pm-evid__n { display: flex; align-items: center; gap: calc(5.867 * var(--u)); }
.pm-selo--pilula { width: calc(16.133 * var(--u)); height: calc(11.733 * var(--u)); border-radius: calc(5.867 * var(--u)); font-size: calc(6.453 * var(--u)); }

.pm-aprov { display: flex; align-items: flex-start; gap: calc(13.132 * var(--u)); width: 100%; padding-top: calc(14.517 * var(--u)); }
.pm-doc { position: relative; flex: none; width: calc(25.764 * var(--u)); height: calc(27.911 * var(--u)); }
.pm-doc > * { position: absolute; }
.pm-doc__corpo { left: calc(-0.143 * var(--u)); top: calc(-2.772 * var(--u)); width: calc(30.336 * var(--u)); height: calc(36.777 * var(--u)); }
.pm-doc__dobra { left: calc(19.32 * var(--u)); top: calc(0.54 * var(--u)); width: calc(5.904 * var(--u)); height: calc(5.904 * var(--u)); }
.pm-doc > i { left: calc(var(--dl) * var(--u)); top: calc(var(--dt) * var(--u)); width: calc(var(--dw) * var(--u)); height: calc(1.181 * var(--u)); border-radius: calc(2.131 * var(--u)); background: #fff; }

.pm-doc__selo {
  display: flex;
  align-items: center;
  justify-content: center;
  left: 0;
  top: calc(13.42 * var(--u));
  width: calc(11.809 * var(--u));
  height: calc(11.809 * var(--u));
  border-radius: 50%;
  background: #6694ff;
  box-shadow: 0 calc(0.831 * var(--u)) calc(2.216 * var(--u)) rgba(0, 0, 0, 0.08);
}

.pm-doc__selo img { width: calc(5.368 * var(--u)); height: calc(4.392 * var(--u)); }

/* ── 05 · Controle total ── */
.pm-mini { display: flex; flex-direction: column; width: calc(161.333 * var(--u)); }
.pm-mini__area { position: relative; width: 100%; height: calc(46.2 * var(--u)); }
.pm-mini .pm-curva { position: absolute; left: calc(-0.917 * var(--u)); top: calc(-0.367 * var(--u)); width: calc(163.167 * var(--u)); height: calc(46.933 * var(--u)); }
.pm-mini__eixo { position: relative; height: calc(22.147 * var(--u)); font-size: calc(5.55 * var(--u)); line-height: calc(8.067 * var(--u)); color: rgba(255, 255, 255, 0.56); }
.pm-mini__eixo span { position: absolute; top: calc(6.01 * var(--u)); left: calc(var(--dx) * var(--u)); }
.pm-mini__grade { position: absolute; left: 0; top: calc(var(--gy) * var(--u)); width: 100%; height: calc(0.733 * var(--u)); border-radius: calc(0.367 * var(--u)); background: rgba(255, 255, 255, 0.06); }

/* As COLUNAS da automação: o arco-íris por coluna do Figma saiu, pelo
   mesmo motivo da curva. Mais finas (11 de 17,4, no mesmo centro — o
   do mês embaixo) e no vidro azul das barras dos motivos (cena 2): meia
   força, e a maior (Fev) acesa. */
.pm-col {
  position: absolute;
  left: calc((var(--bx) + 3.22) * var(--u));
  top: calc(var(--by) * var(--u));
  width: calc(11 * var(--u));
  height: calc(var(--bh) * var(--u));
  border-radius: calc(4.033 * var(--u)) calc(4.033 * var(--u)) calc(1.4 * var(--u)) calc(1.4 * var(--u));
  background: linear-gradient(0deg, color-mix(in srgb, #6694ff 22%, transparent), color-mix(in srgb, #6694ff 55%, transparent));
  box-shadow: var(--pm-brilho);
  transform-origin: 50% 100%;
}
.pm-col--max { background: linear-gradient(0deg, color-mix(in srgb, #6694ff 45%, transparent), color-mix(in srgb, #8fb0ff 92%, transparent)); }

.pm-mini__meses { display: flex; padding: calc(6.013 * var(--u)) 0 0 calc(10.901 * var(--u)); font-size: calc(5.55 * var(--u)); line-height: calc(8.067 * var(--u)); color: rgba(255, 255, 255, 0.56); }
.pm-mini__meses span { width: calc(23.255 * var(--u)); text-align: center; }

.pm-caixinha {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: calc(10.638 * var(--u)) calc(11.081 * var(--u));
  border-radius: calc(8.865 * var(--u));
}

.pm-caixinha--rec { height: calc(130.207 * var(--u)); margin-top: calc(10.417 * var(--u)); padding-bottom: calc(2.355 * var(--u)); }
.pm-caixinha--tempo { height: calc(84.773 * var(--u)); margin-top: calc(6.649 * var(--u)); padding-bottom: calc(8.422 * var(--u)); }

.pm-barra--perf { height: calc(17.73 * var(--u)); margin-top: calc(8.2 * var(--u)); }
.pm-seg--liso { height: 100%; padding: 0; border: 0; }

.pm-etapas { --dot: 6.095; --dg: 4.433; display: flex; flex-direction: column; width: 100%; padding-top: calc(5.125 * var(--u)); }
.pm-etapa { align-items: center; height: calc(25.764 * var(--u)); border-bottom: calc(0.554 * var(--u)) solid var(--pm-linha); }
.pm-etapa:last-child { border-bottom: 0; }
.pm-etapa .pm-leg { color: var(--pm-tx2); }
.pm-etapa b { font-size: calc(7.535 * var(--u)); line-height: calc(9.419 * var(--u)); }

.pm-tempos { display: flex; gap: calc(6.649 * var(--u)); padding-top: calc(8.2 * var(--u)); }
.pm-tempo { display: flex; flex-direction: column; width: calc(59.471 * var(--u)); }
.pm-tempo > i { display: block; height: calc(3.324 * var(--u)); border-radius: calc(1.662 * var(--u)); background: var(--c); transform-origin: 0 50%; }
.pm-tempo > p:nth-of-type(1) { margin-top: calc(11.192 * var(--u)); }
.pm-tempo > p:nth-of-type(2) { margin-top: calc(3.546 * var(--u)); }

/* ═══ A ENTRADA DAS TELAS ══════════════════════════════════════════
   Estado de partida só com JS (`.js`): sem ele a tela está pronta.
   Quem liga é o `is-ativa` da cena — na cena presa, pela rolagem; no
   estreito, pelo produto entrar na tela. As durações começam DEPOIS da
   foto (0,55 s), e cada painel espera o anterior (`--i`). */
.js .pm-c {
  opacity: 0;
  transform: translateY(calc(26 * var(--u))) scale(0.99);
  transition: opacity 0.3s var(--ease-out-soft), transform 0.4s var(--ease-out-soft);
}

.js .is-ativa .pm-c {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.7s var(--ease-out-soft) calc(0.6s + var(--i) * 0.14s),
    transform 1s var(--ease-out-expo) calc(0.6s + var(--i) * 0.14s);
}

/* Dentro da tela: linhas, barras, curvas. */
.js .pm-aj,
.js .pm-mot { opacity: 0; transform: translateY(calc(4 * var(--u))); transition: opacity 0.2s, transform 0.2s; }

.js .is-ativa .pm-aj,
.js .is-ativa .pm-mot {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.5s var(--ease-out-soft) calc(0.85s + var(--k) * 0.06s),
    transform 0.6s var(--ease-out-expo) calc(0.85s + var(--k) * 0.06s);
}

.js .pm-seg,
.js .pm-mot__b,
.js .pm-progresso,
.js .pm-tempo > i { transform: scaleX(0); transition: transform 0.2s; }

.js .pm-col { transform: scaleY(0); transition: transform 0.2s; }

.js .is-ativa .pm-seg,
.js .is-ativa .pm-mot__b,
.js .is-ativa .pm-progresso,
.js .is-ativa .pm-tempo > i,
.js .is-ativa .pm-col {
  transform: none;
  transition: transform 0.9s var(--ease-out-expo) calc(1.1s + var(--k) * 0.08s);
}

.js .pm-curva__linha { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.2s; }
.js .pm-curva__area { opacity: 0; transition: opacity 0.2s; }
.js .is-ativa .pm-curva__linha { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s var(--ease-in-out-soft) 1.1s; }
.js .is-ativa .pm-curva__area { opacity: 1; transition: opacity 1.2s var(--ease-out-soft) 1.6s; }
.js .pm-curva__ponto,
.js .pm-curva__halo { opacity: 0; transition: opacity 0.2s; }
.js .is-ativa .pm-curva__ponto { opacity: 1; transition: opacity 0.5s var(--ease-out-soft) 2.5s; }
.js .is-ativa .pm-curva__halo { opacity: 0.28; transition: opacity 0.8s var(--ease-out-soft) 2.6s; }

@media (prefers-reduced-motion: reduce) {
  .js .pcena,
  .js .pcena__foto img,
  .js .pm-c,
  .js .pm-aj,
  .js .pm-mot,
  .js .pm-seg,
  .js .pm-mot__b,
  .js .pm-progresso,
  .js .pm-tempo > i,
  .js .pm-col,
  .js .pm-curva__linha,
  .js .pm-curva__area,
  .js .pm-curva__ponto,
  .js .pm-curva__halo,
  .js .pcenas__cabeca,
  .js .pcena__foto::before,
  .js .pprod,
  .js .pcenas__pe,
  .js .pcenas__indice a,
  .js .pm-pain::before,
  .js .pcenas__fio { transition: none !important; }
}

/* ── A prova ─────────────────────────────────────────────────────
   `dark-section` da home com os logos claros num CARROSSEL — "aqui tá
   faltando um carrossel de logo das empresas". É o marquee da home
   (mesmo markup, mesmo `initMarquee`, que duplica a fileira): um trilho
   `max-content` com as duas fileiras lado a lado, transladando −50% —
   ao fim do ciclo a cópia está onde a original começou, e o loop não
   tem emenda. Na home ele só anda no celular (no desktop os oito
   cabem numa linha parada); aqui anda em qualquer largura, e por isso
   o movimento mora nesta folha. Os logos somem nas bordas (máscara), e
   o ponteiro em cima pausa.

   SEM VÃO: cada fileira leva os oito logos DUAS vezes (a segunda leva
   fora do leitor de tela), ~3900px a 56 de altura — mais larga que
   qualquer tela; com uma leva só (~1970px) uma tela maior via o fim do
   trilho. E os logos carregam `eager`: `lazy`, os que entravam pela
   lateral ainda não tinham descido e passavam como buraco. ("Os logos
   têm que ser um carrossel infinito, não pode ter um vão desses".)
   O ciclo dobrou de largura, e a duração dobrou junto (84s) para a
   velocidade não mudar. */
/* A seção CENTRADA e mais alta ("centraliza os textos aqui e deixa os
   logos maiores [...] um pouquinho mais alta também, porque assim ela
   está muito tímida"): a cabeça sai do recuo à esquerda do
   `dark-section` e vai para o meio, e o respiro vertical passa de 120
   para 180. */
.pprova__inner { gap: 80px; padding-block: 180px; }

.pprova .dark-section__head {
  justify-content: center;
  /* `center` também aqui: no celular o componente empilha a cabeça em
     coluna alinhada à esquerda, e o título saía do centro. */
  align-items: center;
  width: min(1216px, calc(100% - 2 * var(--gutter)));
  margin-inline: auto;
}

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

/* Sem etiqueta em cima (a frase dela virou o título): os 24 do
   componente, que separavam os dois, sobram. */
.pprova .dark-section__title { margin-top: 0; }

.pprova__carrossel {
  display: flex;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 96px, #000 calc(100% - 96px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 96px, #000 calc(100% - 96px), transparent 100%);
}

.pprova__carrossel .marquee__track {
  display: flex;
  flex: none;
  width: max-content;
}

.js .pprova__carrossel .marquee__track { animation: pprova-loop 84s linear infinite; }

.pprova__carrossel:hover .marquee__track { animation-play-state: paused; }

.pprova__logos {
  display: flex;
  flex: none;
  align-items: center;
  gap: 112px;
  margin: 0;
  /* metade do vão de cada lado: a emenda entre as duas fileiras tem o
     mesmo respiro do vão de dentro */
  padding: 0 56px;
  list-style: none;
}

/* A cópia só existe com JS (o `initMarquee` a cria). */
.pprova__carrossel .marquee__row--clone { pointer-events: none; }

.pprova__logos li { flex: none; }

/* A largura de cada logo vem em `--lw` e não em `--w` (o nome da home):
   `--w` está registrado nesta folha como NÚMERO para as telas (`.pm-*`,
   `@property`), e "104px" num `<number>` é inválido — o valor caía para
   o inicial, 0, e os oito logos sumiam (largura 0).

   Os logos a 56 de altura (eram 40): o `--lw` é a largura do Figma para
   40, e escala junto (× 1,4) para cada logo manter a proporção. */
.pprova__logos img {
  display: block;
  height: 56px;
  width: calc(var(--lw) * 1.4);
  object-fit: contain;
}

@keyframes pprova-loop {
  to { transform: translateX(-50%); }
}

/* Sem movimento: a fileira parada, quebrando em linhas, sem a cópia. */
@media (prefers-reduced-motion: reduce) {
  .js .pprova__carrossel .marquee__track { animation: none; width: auto; flex: 1; }
  .pprova__carrossel { -webkit-mask-image: none; mask-image: none; }
  .pprova__carrossel .marquee__row--clone { display: none; }
  .pprova__logos { flex-wrap: wrap; gap: 32px 40px; padding: 0; }
}

/* ── O fecho ─────────────────────────────────────────────────────
   O CTA fotográfico dos cases e de carreiras, na mesma medida (740). */
.pcta {
  position: relative;
  display: flex;
  /* a altura do conteúdo com 192 em cima e embaixo — o padrão das CTAs
     fora da home (`--cta-foto-pad`, 2026-09-27; era 740 fixo) */
  padding-block: var(--cta-foto-pad);
  overflow: clip;
  isolation: isolate;
  color: var(--light-01);
}

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

.pcta__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 100%;
}

.pcta__foto::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.24);
}

.pcta__inner {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--cta-foto-gap);
  padding-left: max(clamp(20px, 7.778vw, 112px), (100% - 1216px) / 2);
  padding-right: var(--gutter);
}

/* ── Tablet deitado (901–1100) ──────────────────────────────────
   O convite para rolar ia à direita, na base do título, como no
   desktop. Tela estreita alinha à esquerda (2026-09-27: "versões de
   telas estreitas como tablet e mobile devem ser alinhadas à
   esquerda"): embaixo do título, na calha. Abaixo de 901 ele desce para
   o rodapé do herói (ver o bloco seguinte). */
@media (max-width: 1100px) {
@media not all and (max-width: 900px) {
  .phead__inner { flex-direction: column; align-items: flex-start; }
}
}

/* ── Estreito ─────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* 190: o vão menu → etiqueta foi de 92 a 138 (+50%), a 178 e voltou
     a 146 ("um pouquinho mais para cima o conteúdo da header").
     `position: static` aqui: o convite para rolar se posiciona pelo
     HERÓI inteiro, no rodapé dele, abaixo do filme. */
  .phead { position: static; min-height: 0; padding: 190px var(--gutter) 24px; }
  .phead__inner { flex-direction: column; align-items: flex-start; }
  /* O convite para rolar no RODAPÉ do herói, abaixo do filme, à
     esquerda na calha — "para ficar bem no rodapé dessa seção, ele vai
     ajudar na composição". O filme ganha embaixo o espaço dele. */
  .phead__rolar {
    position: absolute;
    left: var(--gutter);
    bottom: 22px;
  }
  /* 72 embaixo: o lugar do convite para rolar (ver `.phead__rolar`). */
  .pvideo { padding: 0 var(--gutter) 72px; }
  /* Vertical no celular (10:11; era 16:9, depois 4:5 — "um pouco mais
     alongado", e então "um pouquinho mais baixo"). O filme é deitado; o `cover` recorta as laterais
     pelo centro, onde está o prédio. */
  .pvideo__quadro { aspect-ratio: 10 / 11; border-radius: 12px; }
  .pvideo__play { width: 64px; height: 64px; }
  /* 48 em cima: o vão até a frase do texto que se lê (ver `.ptell`). */
  .pnum { padding: 48px var(--gutter) 64px; }
  .pnum__lista { grid-template-columns: minmax(0, 1fr); }

  .pcenas__palco { gap: 20px; padding: 80px var(--gutter) 64px; }
  .pcenas__cabeca { margin-bottom: 16px; }
  .pprod { margin-bottom: 32px; }

  /* O RESPIRO IGUAL em cima e embaixo: o fundo é o mesmo da cena dos
     produtos, então o topo que se vê começa no último texto dela — os
     64 do fim da cena e os 32 do último produto somavam aos 112 daqui
     (208 em cima, 112 embaixo: "o padding superior e inferior não está
     uniforme"). A cena perde os dois no estreito, e o vão entre os logos
     cai de 64 para 40 ("o gap entre os logos está muito grande"). */
  /* (2026-09-24, depois) A REPARTIÇÃO: a seção dos logos ganha um tom
     próprio, um degrau entre Dark-01 e Dark-02 — "dar uma diferençazinha,
     para que fique com a cor diferente da seção de cima; preciso criar
     essa repartição". Com a borda visível, a cena de cima volta a ter o
     respiro dela embaixo (72), e a dos logos tem 120 em cima e embaixo
     ("aumentar um pouquinho o espaço acima"). Vão dos logos 40 → 24. */
  .pcenas__palco { padding-bottom: 72px; }
  .pcenas__lista > .pprod:last-child { margin-bottom: 0; }
  .pprova { background: color-mix(in srgb, var(--dark-01), var(--dark-02) 50%); }
  /* 80 (era 120): "mais compacta mesmo, vai ficar elegante". */
  .pprova__inner { gap: 40px; padding-block: 80px; }
  .pprova__logos { gap: 24px; padding: 0 12px; }
  .pprova__logos img { height: 40px; width: auto; }

  /* No celular, a altura do conteúdo com o mesmo 96 (2026-09-27; os
     92% da tela de 2026-09-24 saíram — ver `--cta-foto-pad`). */
  .pcta__inner { padding-left: var(--gutter); gap: var(--cta-foto-gap-m); }
}