/*
 * 05_landing.css — BLOCO LANDING
 * ═══════════════════════════════════════════════════════════════════════════
 * As DUAS primeiras telas que alguém vê: `/` no host raiz (a página comercial
 * da Ellévu) e `/` no host do tenant (a porta da empresa cliente).
 *
 * ─── O QUE NÃO ESTÁ AQUI, E ESTÁ DE PROPÓSITO ──────────────────────────────
 *
 * Botão, cartão, aviso, selo, medidor, grade, `.botoes`, `.heroi`, `.porta`,
 * o cabeçalho e o rodapé públicos: TUDO isso é da onda D e está em
 * 10_componentes.css e 20_navegacao.css. Este arquivo não redefine nenhum
 * deles — nem "só a cor", nem "só o padding". O que existe aqui é o que uma
 * landing tem e uma tela de produto não tem: ritmo vertical longo, seção com
 * etiqueta, cartão que abre detalhe, uma arte e uma chamada final.
 *
 * ─── POR QUE TODO BLOCO DAQUI COMEÇA COM `landing-` ────────────────────────
 *
 * Porque a ordem na cascata NÃO protege ninguém, e este arquivo já custou uma
 * tela por acreditar que protegia. O número 05 põe esta folha antes de todas
 * as outras, mas a cascata só arbitra PROPRIEDADE DISPUTADA: se dois arquivos
 * usam o mesmo nome de classe e este declara uma propriedade que o outro não
 * declara, quem vence é este — não importa a ordem.
 *
 * Foi exatamente o que aconteceu. Este arquivo declarava `.passos`, nome que
 * `30_identidade.css` já usava na trilha dos quatro passos do paredão
 * (§13.4, `perfis/completar`). Lá a trilha é `display:flex; flex-wrap:wrap` e
 * nenhum `flex-direction`; o `flex-direction: column` daqui era o único
 * declarante e valia — quatro elos empilhados, 152 px de trilha vertical
 * empurrando o formulário da tela de maior abandono do produto. Nenhum teste
 * pegou: CSS não tem teste de unidade.
 *
 * Daí a regra, sem exceção: TODO bloco que só existe na landing carrega o
 * prefixo `landing-` (ou `arte-`), mesmo quando não há colisão hoje.
 *
 * ─── O HERÓI NÃO USA MAIS `.heroi` ─────────────────────────────────────────
 *
 * A versão anterior herdava `.heroi` da onda D, que é `text-align: center` e
 * `padding: var(--esp-16) 0 var(--esp-12)`. Daí saíram DOIS dos três defeitos
 * que o Sergio mediu na tela: quase uma dobra inteira de espaço morto antes da
 * primeira palavra (4 rem de `.heroi` + 2 rem de `.conteudo--publico`), e um
 * herói centralizado seguido de sete seções à esquerda.
 *
 * O bloco novo `.landing-heroi` é próprio, à ESQUERDA como o resto da página,
 * com respiro de topo curto e duas colunas no desktop. `.heroi` da onda D
 * continua intacto e continua sendo o da porta do tenant.
 *
 * ─── MOBILE-FIRST DE VERDADE ───────────────────────────────────────────────
 *
 * Metade de quem abrir isto abre no celular, porque lê o link no WhatsApp.
 * Toda regra base é a do celular; as media queries (40/48/64rem) só
 * ACRESCENTAM colunas e respiro. Nenhum `min-width` em pixel.
 *
 * ─── MOVIMENTO: LEIA ANTES DE MEXER ────────────────────────────────────────
 *
 * O motor é do bloco MOTOR e mora em `03_movimento.css`, nos controllers
 * `revelar`/`contador`/`modal` e em `movimento_helper.rb`. A landing NÃO
 * reimplementa nada disso — e não é só higiene: a regra nº 1 daquele motor é
 * que o conteúdo NASCE VISÍVEL e só o JS esconde, depois de confirmar que há
 * `IntersectionObserver`. Uma revelação escrita em CSS puro (que esta folha
 * chegou a ter, com `animation-timeline: view()`) não consegue obedecer a
 * isso: ela esconde antes de saber se vai conseguir mostrar.
 *
 * Então a divisão é:
 *
 *   revelação ao rolar ..... helpers `revelar`/`revelar_item` na view
 *   número que conta ....... helper `contar_ate` na view
 *   cartão que levanta ..... `.cartao--acionavel` (folha 03)
 *   ENTRADA DO HERÓI ....... aqui. CSS puro, na carga, sem JS — é a primeira
 *                            dobra, e o motor de propósito não anima o que já
 *                            está na tela (evitar o pisca vale mais).
 *   SEQUÊNCIA DO DIAGRAMA .. aqui. Também CSS puro, na carga.
 *
 * As duas regras duras da marca valem em cada linha do que sobrou: anima-se SÓ
 * `transform` e `opacity`, e TODO quadro `100%` é o estado de repouso. Isso não
 * é estética: `02_base.css` corta toda animação para 0,01 ms sob
 * `prefers-reduced-motion`, e o que fica na tela é exatamente o quadro 100%.
 * Além disso, toda animação desta folha está DENTRO de
 * `@media (prefers-reduced-motion: no-preference)` — quem pediu menos
 * movimento não recebe animação nenhuma para ser cortada. Há teste medindo as
 * três coisas em `test/integration/landing_test.rb`.
 */

/* ═══ RITMO VERTICAL ══════════════════════════════════════════════════════ */

/* A única coisa que a landing tem e nenhuma tela do produto tem: distância
   generosa entre blocos de assunto. `gap` e não `margin` nos filhos — assim
   nenhuma seção precisa saber quem vem antes ou depois dela. */
.landing {
  display: flex;
  flex-direction: column;
  gap: var(--esp-12);
  /* REDE DE BAIXO CONTRA ROLAGEM HORIZONTAL, e ela existiu por um defeito
     medido: a arte do white label entrava com `revelar--esquerda`, que é
     `translate3d(20px,0,0)` — e a borda direita de layout dela, a 390 px de
     janela, já estava em 359. scrollWidth 379 contra clientWidth 375, o
     celular do público-alvo rolando de lado. Pior: só para quem TEM JS, e só
     até a pessoa rolar até a seção, o que fazia a medição feita no fim da
     página dar limpa.

     A causa foi corrigida na view (`:suave` naquela arte). Isto aqui é o que
     impede a próxima: qualquer revelação lateral, qualquer sombra, qualquer
     ::after de um elemento colado na margem para de exportar rolagem.

     `clip` e NÃO `hidden`: `overflow-x: hidden` força o eixo Y a `auto` e
     cria um contêiner de rolagem — o que mataria `position: sticky` de
     qualquer descendente e trocaria o scroll da janela pelo de uma caixa. Os
     13 painéis de detalhe são `position: fixed` e vivem FORA de `.landing`,
     de propósito, então nada aqui os recorta. */
  overflow-x: clip;
}

@media (min-width: 48rem) {
  .landing { gap: var(--esp-16) }
}

/* A etiqueta (o "sobre-título") de cada seção. Caixa alta com espaçamento de
   letra é legível a 12 px; caixa alta SEM espaçamento não é. */
.landing__etiqueta {
  margin: 0 0 var(--esp-3);
  color: var(--cor-marca);
  font-size: var(--texto-xs);
  font-weight: var(--peso-forte);
  letter-spacing: var(--espacamento-etiqueta);
  text-transform: uppercase;
}

/* A ressalva, a letra miúda de parágrafo, o "antes que você pergunte".
   `--texto-suave` e não `--texto-tenue`: isto ainda é para ser LIDO (9,4:1
   contra o fundo, contra os 6,2:1 do tenue, que é rótulo de campo). */
.landing__nota {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-2);
  margin: 0;
  color: var(--texto-suave);
  font-size: var(--texto-sm);
  line-height: var(--altura-solta);
}
.landing__nota-icone { flex: none; margin-top: 0.15rem; color: var(--cor-marca) }

/* O rótulo de botão da onda D é `white-space: nowrap`, e está certo numa barra
   de ações de admin: lá o texto é "Salvar" e quebrar um botão em duas linhas
   estraga a linha da tabela. Na landing é risco MEDIDO — num celular de 360 px
   um rótulo comprido rolava a página na horizontal. A altura do botão é
   `min-height`, então o alvo de toque de 48 px continua de pé em duas linhas:
   é por isso que este afrouxamento é seguro aqui e não seria numa tabela. */
.landing .botao__rotulo { white-space: normal }

/* ═══ HERÓI ═══════════════════════════════════════════════════════════════ */

/* Respiro de topo CURTO: `.conteudo--publico` já dá 2 rem e o cabeçalho é
   transparente. Era aqui que estava a dobra vazia da versão reprovada. */
.landing-heroi {
  display: grid;
  gap: var(--esp-8);
  padding: var(--esp-2) 0 0;
  align-items: center;
}

/* A coluna de texto tem nome PRÓPRIO — `__coluna`, não `__texto`. Ela e o
   parágrafo do herói já dividiram o mesmo nome, e o preço foi invisível na
   revisão e visível na tela: a coluna herdava `color: var(--texto-suave)` e o
   `<h1>` da página comercial saía cinza-claro em vez de branco, além de a
   coluna ganhar o `max-width: 34rem` que era do parágrafo e estreitar a
   grade. Dois elementos com papéis diferentes, dois nomes. */
.landing-heroi__coluna { min-width: 0 }

.landing-heroi__titulo {
  margin: 0 0 var(--esp-5);
  max-width: 20ch;
  /* ⚠ A MANCHETE ERA MENOR QUE OS TÍTULOS DE SEÇÃO NO CELULAR. O conserto
     anterior das "quatro linhas" encolheu o <h1> para `clamp(1.625rem, 7vw,
     2.25rem)` = 27,3 px a 390, enquanto `.landing-secao__titulo` rende 28 px:
     o h1 perdia a briga para todo h2 da página em qualquer telefone.

     A solução tem duas pontas. A manchete sobe para 2 rem (32 px) e o h2 de
     seção DESCE para `--texto-xl` (22 px) no celular — 1,45× de razão, que é
     hierarquia; 32 contra 28 ainda era empate. E cada sentença fica num bloco
     que quebra onde faz sentido: "Ensine o que a sua operação exige." sai em
     duas linhas equilibradas ("Ensine o que a sua" / "operação exige.") e
     "Prove que ensinou." numa. 32 px é o MAIOR tamanho em que a segunda cabe
     numa linha de 343 px com a DejaVu Sans Bold (338 px medidos por
     `measureText`), a mais larga das pilhas de sistema; a 34 ela quebrava e a
     manchete saía em cinco linhas. Na Roboto e na Segoe UI sobra margem. */
  font-size: 2rem;
  line-height: var(--altura-apertada);
  letter-spacing: var(--espacamento-titulo);
  text-wrap: balance;
}

/* O parágrafo do herói tinha `max-width: var(--largura-leitura)` (38 rem) e
   ficava estreito e mal quebrado no desktop. Aqui a medida é 34 rem no
   empilhado e, no desktop, quem manda é a COLUNA da grade — que é o jeito
   certo: a medida acompanha o layout em vez de brigar com ele. */
.landing-heroi__texto {
  margin: 0 0 var(--esp-6);
  max-width: 34rem;
  color: var(--texto-suave);
  font-size: var(--texto-lg);
  line-height: var(--altura-solta);
}

/* UMA SENTENÇA POR LINHA. A view parte `heroi.titulo` no ponto final e põe
   cada frase aqui dentro; `display: block` é tudo o que falta. Antes disso a
   manchete saía em três linhas de 427/321/340 px, com "coisa. Prove"
   terminando a linha 2 — as duas sentenças atravessando as quebras.

   E é por isso que a coluna de 1,15fr continua de pé: quem precisava de
   627 px era a frase INTEIRA numa linha só; a maior sentença isolada mede
   427 px e cabe folgada nos 529 px da coluna. Os dois botões do herói somam
   509 px e é por eles que a coluna não pode encolher. */
.landing-heroi__frase {
  display: block;
  /* `balance` HERDADO do <h1>, e agora de propósito: a primeira sentença tem
     duas linhas em toda largura, e sem balanceamento ela quebrava em
     "Ensine o que a sua operação" / "exige." — uma palavra órfã na manchete.
     Balanceado, sai "Ensine o que a sua" / "operação exige.". A frase que
     cabe numa linha continua numa linha: balancear nunca acrescenta linha,
     só redistribui as que já existem. */
  text-wrap: balance;
}

/* Botão em cima, elo embaixo, em TODA largura — e não "lado a lado quando
   couber": a 1440 os dois somam 552 px numa coluna de 541 e o elo caía para
   a segunda linha por acidente. Cair de propósito é composição; cair por
   acidente é peça mal fechada. */
.landing-heroi__botoes { flex-direction: column; align-items: flex-start; margin-bottom: var(--esp-6) }

@media (min-width: 48rem) {
  .landing-heroi { padding-top: var(--esp-6) }
  .landing-heroi__titulo { font-size: var(--texto-4xl) }
}

@media (min-width: 64rem) {
  /* A coluna do texto é MAIOR que a da arte, e o número saiu de medição, não
     de gosto: os dois botões do herói somam 509 px com o tamanho `grande` da
     onda D, e uma coluna de 1fr no conteúdo de 64rem dá 492 px — os botões
     quebravam em duas linhas no desktop, que é a cara de peça mal fechada.
     1,15fr entrega 566 px e a barra fica numa linha só. Se um dia o rótulo de
     um botão crescer, é este número que se mexe. */
  .landing-heroi {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: var(--esp-12);
    /* O herói é DONO da primeira dobra. Medido a 1440×900: a "O argumento"
       começava a 590 px, dentro da dobra, disputando com a manchete; e a
       coluna da arte terminava 150 px antes da coluna do texto, deixando um
       canto morto. Com o piso de altura (a dobra menos o cabeçalho e o
       respiro do `.conteudo--publico`) o herói ocupa a dobra inteira e a
       seção seguinte começa abaixo dela — que é o que "rolar para saber
       mais" quer dizer. `svh` e não `vh`: no celular `vh` conta a barra do
       navegador, mas aqui só vale a partir de 64rem, onde não há barra. */
    min-height: calc(100svh - 3.5rem - var(--esp-8) - var(--esp-16) - var(--esp-8));
  }
  /* O elo secundário substituiu o segundo botão grande: a coluna cabe em
     1,1fr e sobra 0,9fr para a arte, que cresce de 391 para ~440 px. */
  /* 40 px, e não os 48 px do `--texto-4xl`. A conta é de MEDIDA, não de gosto:
     a coluna do herói tem 529 px e "Ensine qualquer coisa." mede 577 px a
     48 px — a primeira sentença não cabia numa linha, e era daí que saíam as
     três linhas com as duas frases atravessando as quebras. A 40 px a mesma
     sentença mede 481 px e sobra folga.

     A alternativa era alargar a coluna para ~600 px, e ela cobra da arte: o
     diagrama cairia de 391 para ~340 px de largura, e as notas dele ("medido
     no servidor") são texto de 10 unidades de viewBox — encolher a figura é
     encolher a legenda. 48 px num bloco de 529 px também é tipografia
     apertada: dá 11 caracteres por linha. Entre uma manchete 17% menor e uma
     figura ilegível, a manchete cede. */
  /* 38 px e não 40, MEDIDO: colunas iguais (456 px) partiam "Ensine qualquer
     coisa." em duas linhas até a 38 px na DejaVu Sans Bold, a mais larga das
     pilhas de sistema. Em 1,1fr (537 px) a sentença cabe a 38 com folga para
     qualquer fonte; a 40 cabia só na Roboto. A arte fica com 0,9fr e sem
     `max-width`, que é ~440 px — 50 a mais que a versão anterior. */
  .landing-heroi__titulo { font-size: 2.375rem }
  /* A arte vai para a segunda coluna, mas no DOM ela vem depois do texto —
     que é a ordem de leitura certa e a ordem certa no celular. */
  .landing-heroi__arte { order: 2 }
}

/* ═══ SEÇÃO ═══════════════════════════════════════════════════════════════ */

.landing-secao {
  display: flex;
  flex-direction: column;
  gap: var(--esp-6);
  /* O "Voltar" da ficha manda para `/#catalogo` (e o link reencaminhado no
     WhatsApp chega pela mesma âncora). O cabeçalho público é `sticky` de
     65 px, e sem isto a etiqueta e a primeira linha do título ficavam
     DEBAIXO dele — medido: h2 com top = 30 px depois do Voltar. 6 rem deixa
     o cabeçalho e ~30 px de respiro acima da etiqueta. */
  scroll-margin-top: 6rem;
}
.landing-chamada { scroll-margin-top: 6rem }

/* A medida do cabeçalho é curta de propósito: título e chamada de seção são
   para bater o olho, não para ler parágrafo. Era 46 rem — 736 px medidos, que
   a 18 px dão 75 a 80 caracteres por linha, acima da faixa confortável. 40 rem
   dá 640 px e ~66 caracteres, que é o meio da faixa. */
.landing-secao__cabecalho { max-width: 40rem }

.landing-secao__titulo {
  margin: 0;
  /* `--texto-xl` (22 px) no celular, e não `--texto-2xl` (28): a manchete do
     herói é 32 px, e 28 empatava com ela. A partir de 48rem vai a 36. */
  font-size: var(--texto-xl);
  letter-spacing: var(--espacamento-titulo);
  text-wrap: balance;
}
.landing-secao__chamada {
  margin: var(--esp-4) 0 0;
  color: var(--texto-suave);
  font-size: var(--texto-lg);
  line-height: var(--altura-solta);
}

@media (min-width: 48rem) {
  .landing-secao__titulo { font-size: var(--texto-3xl) }
  .landing-secao { gap: var(--esp-8) }
}

/* O cabeçalho EM PAR: título à esquerda, chamada à direita, a partir de
   64rem. Medido a 1440 no catálogo: o cabeçalho de 40rem deixava 320 px de
   vazio à direita por 218 px de altura — a metade direita da seção morta,
   logo abaixo do argumento. Em par, o mesmo texto ocupa a largura toda e a
   chamada alinha pela base do título. A ordem de leitura (título, depois
   chamada) não muda; no celular continua uma coluna. */
@media (min-width: 64rem) {
  .landing-secao__cabecalho--par {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    column-gap: var(--esp-12);
    align-items: end;
  }
  .landing-secao__cabecalho--par .landing-secao__chamada { margin-top: 0 }
}

/* Texto de um lado, arte do outro — SÓ a partir de 64rem. Abaixo disso é uma
   coluna e a arte vai para o fim: no celular, empurrar 200 px de desenho para
   cima do primeiro parágrafo custa a rolagem inteira da seção. */
.landing-secao--par { display: grid; gap: var(--esp-8); align-items: center }
.landing-secao--par .landing-secao__arte { order: 2 }
.landing-secao--par .landing-secao__texto { display: flex; flex-direction: column; gap: var(--esp-5) }
.landing-secao--par .landing-secao__chamada { margin-top: 0 }

@media (min-width: 64rem) {
  .landing-secao--par { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--esp-12) }
}

/* A seção quieta: ressalva não é argumento de venda e não ganha o mesmo peso
   tipográfico do resto da página. */
.landing-secao--quieta .landing-secao__titulo { font-size: var(--texto-lg) }
@media (min-width: 48rem) {
  .landing-secao--quieta .landing-secao__titulo { font-size: var(--texto-2xl) }
}

/* ═══ CARTÃO QUE ABRE DETALHE ═════════════════════════════════════════════
   O padrão CARD → MODAL da marca (§3). O cartão INTEIRO é o alvo — não um
   "saiba mais" de 14 px no rodapé dele: o dedo de quem lê no celular acerta o
   cartão, e quem usa teclado recebe UM tab por cartão em vez de dois.        */

.landing-cartoes { align-items: stretch }

/* A PELE do cartão é `.cartao` (folha 10) e a ELEVAÇÃO ao dedo é
   `.cartao--acionavel` (folha 03, bloco MOTOR) — nenhuma das duas se repete
   aqui. Este bloco só acrescenta o que é da landing: o empilhamento interno, o
   índice decorativo e a linha de ação colada no rodapé do cartão. */
.landing-cartao {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  overflow: hidden;
}

/* ── A COLISÃO DE `transition`, MEDIDA NO NAVEGADOR E CONSERTADA AQUI ─────
   Nove cartões desta página — os 3 do argumento e os 6 do catálogo — entravam
   SEM revelação nenhuma: os seis do catálogo saltavam de opacidade 0 para 1
   em UM quadro (t=404 ms `[0,0,0,0,0,0]`, t=464 ms `[1,1,1,1,1,1]`), sem fade
   e sem cascata, com `--revelar-atraso` calculado pelo controller (0, 60, 120,
   180, 240, 300 ms) e lido por ninguém.

   A causa é de cascata, não de JS. `.revelar` (03_movimento.css) declara a
   SHORTHAND `transition: opacity …, transform …`. `.cartao--acionavel` (mesma
   folha, mais adiante) declara a SHORTHAND `transition: transform, box-shadow,
   border-color` para o hover. Mesma especificidade, e shorthand não compõe:
   a segunda SUBSTITUI a primeira inteira. Some `opacity`, some o atraso.

   Por que só estes nove: em `passos` e em `operacao` quem recebe `.revelar` é
   o `<li>` ou um cartão sem `--acionavel`, e lá não há colisão — os 4 e os 3
   sempre animaram. Medido, e por isso "16 de 19" da crítica é 9 de 19.

   O conserto local é declarar a transição COMPLETA aqui, numa folha que vem
   depois da 03. E a divisão de trabalho entre as propriedades é o que faz as
   duas coisas conviverem sem uma atrapalhar a outra:

     opacity   → é da ENTRADA, e só. Leva a duração longa e, com ela, o
                 `--revelar-atraso` que dá a cascata.
     transform → é do DEDO. Leva a duração de hover e NENHUM atraso — porque
                 `--revelar-atraso` fica na propriedade inline do elemento
                 depois da revelação, e um hover com 300 ms de atraso parece
                 que o cartão não pegou.

   É por isso que as duas grades trocaram `:cresce` por `:suave` na view: sem
   deslocamento nem escala na entrada, `transform` fica livre para o hover e a
   cascata inteira é carregada pela opacidade, que é o que o olho lê.

   ⚠ ISTO É REMENDO LOCAL. A colisão é entre duas classes da folha 03 e vale
   para todo `.cartao--acionavel` revelado do produto, não só para a landing.
   O conserto de verdade é do bloco MOTOR e está no relatório desta onda. */
.landing-cartao,
.landing-passo__cartao {
  transition:
    opacity var(--tempo-lento) var(--curva-entrada) var(--revelar-atraso, 0ms),
    transform var(--tempo-normal) var(--curva-entrada),
    box-shadow var(--tempo-normal) var(--curva-entrada),
    border-color var(--tempo-rapido) var(--curva-padrao);
}

.landing-cartao__titulo { font-size: var(--texto-lg) }
/* O gatilho é o link do título, e é ele que estica o `::after` por cima do
   cartão inteiro (regra da folha 03). Aqui só se tira o sublinhado e se herda
   a cor: o cartão é o alvo, não um link azul no meio do texto. */
.landing-cartao__titulo .cartao__gatilho { color: inherit; text-decoration: none }
.landing-cartao__texto {
  margin: 0;
  color: var(--texto-suave);
  font-size: var(--texto-sm);
  line-height: var(--altura-solta);
}

/* `margin-top: auto` cola a linha de ação no rodapé do cartão, e é o que
   mantém os três (ou seis) cartões de uma fileira com a ação na mesma altura
   mesmo com resumos de tamanhos diferentes. */
.landing-cartao__acao {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  margin-top: auto;
  padding-top: var(--esp-3);
  color: var(--cor-marca);
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
}
.landing-cartao__seta { transition: transform var(--tempo-rapido) var(--curva-saida) }

/* O índice decorativo "01 02 03" SAIU, e a medida é o motivo: ele era
   `position: absolute` no canto de um cartão de 309 px com `--texto-3xl`, e o
   `max-width: calc(100% - 3rem)` que ele impunha ao título deixava 219 px de
   linha — os três títulos do argumento quebravam em duas linhas por causa de
   um enfeite. Três cartões debaixo de "a Ellévu prova em três etapas" já se
   contam sozinhos. */


/* A seta anda quando o cartão inteiro recebe o dedo ou o teclado. `:has` e não
   `:hover` no link: quem acende é o CARTÃO (a área clicável é ele), e o link
   focado por teclado precisa mover a mesma seta. */
@media (hover: hover) {
  .cartao--acionavel:hover .landing-cartao__seta { transform: translateX(0.2rem) }
}
.cartao--acionavel:has(:focus-visible) .landing-cartao__seta { transform: translateX(0.2rem) }

/* "OS TRÊS TETOS DO SISTEMA" moravam aqui e saíram com o bloco: dois eram
   limite de configuração vendido como valor e o terceiro repetia o medidor.
   O fato dos 95% vive em `.arte-medidor__piso`. */

/* ═══ OS QUATRO PASSOS ════════════════════════════════════════════════════ */

/* É `<ol>` na view: a ordem é a informação, e o leitor de tela já anuncia
   "item 3 de 4". O número desenhado é decorativo (`aria-hidden`). */
.landing-passos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--esp-4);
}
@media (min-width: 64rem) {
  .landing-passos { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}

.landing-passo { display: flex }

.landing-passo__cartao {
  flex: 1;
  display: flex;
  /* `stretch`, e o número se desalinha sozinho com `align-self`. Com
     `flex-start` no contêiner o corpo do passo não esticava, o
     `margin-top: auto` do "Ver detalhe" não tinha altura sobrando para empurrar
     nada, e os quatro passos da grade 2×2 fechavam a linha de ação em quatro
     alturas diferentes. Medido no navegador. */
  align-items: stretch;
  gap: var(--esp-4);
}

/* Círculo com o número. `--cor-marca-forte` + `--cor-marca-contraste` é o par
   que a §15.2 garante em 4,5:1 para QUALQUER hex de tenant — o mesmo par do
   botão primário. Pintar o número com `--cor-marca` sobre o preenchimento
   seria a mesma cor sobre ela mesma no dia em que o cliente escolhesse um
   azul claro. */
.landing-passo__numero {
  flex: none;
  align-self: flex-start;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: var(--raio-redondo);
  background: var(--cor-marca-forte);
  color: var(--cor-marca-contraste);
  font-size: var(--texto-lg);
  font-weight: var(--peso-forte);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.landing-passo__corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--esp-2) }
.landing-passo__titulo { font-size: var(--texto-lg) }
.landing-passo__titulo .cartao__gatilho { color: inherit; text-decoration: none }
.landing-passo__texto {
  margin: 0;
  color: var(--texto-suave);
  font-size: var(--texto-sm);
  line-height: var(--altura-solta);
}

/* ═══ LISTA DE CONFERÊNCIA ════════════════════════════════════════════════ */

/* Marcador desenhado (ícone de check) em vez de `list-style`, porque o bullet
   padrão não tem cor de marca nem alinhamento previsível entre navegadores. */
.landing-marcadores {
  list-style: none;
  margin: 0 0 var(--esp-4);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
}
.landing-marcadores li {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-3);
  line-height: var(--altura-normal);
}
.landing-marcadores__icone { flex: none; margin-top: 0.2rem; color: var(--cor-aprovado) }

/* ═══ ENDEREÇO WHITE LABEL ════════════════════════════════════════════════ */

.landing-endereco {
  padding: var(--esp-5);
  background: var(--fundo-cartao);
  border: 1px solid var(--borda);
  border-radius: var(--raio-3);
}
.landing-endereco__rotulo { margin: 0; font-size: var(--texto-sm); font-weight: var(--peso-forte) }
.landing-endereco__barra {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  margin: var(--esp-4) 0 var(--esp-3);
  padding: var(--esp-3) var(--esp-4);
  background: var(--fundo-fundo);
  border: 1px solid var(--borda);
  border-radius: var(--raio-redondo);
  /* O endereço pode passar da largura no celular pequeno; ele ROLA dentro da
     própria barra em vez de alargar a página. A landing nunca rola de lado. */
  overflow-x: auto;
  scrollbar-width: none;
}
.landing-endereco__barra::-webkit-scrollbar { display: none }
.landing-endereco__cadeado { flex: none; color: var(--cor-aprovado) }
.landing-endereco__url { color: var(--texto-suave); font-size: var(--texto-sm); white-space: nowrap }
.landing-endereco__sub { color: var(--cor-marca); font-weight: var(--peso-forte) }
.landing-endereco__nota { margin: 0; color: var(--texto-tenue); font-size: var(--texto-sm) }

/* ═══ A LETRA MIÚDA ═══════════════════════════════════════════════════════ */

/* `<dl>`: cada item é "o que não é" → "por quê", que é par termo/definição de
   verdade. Régua à esquerda em vez de cartão — são ressalvas, e ressalva
   dentro de cartão com sombra vira mais um argumento de venda. */
.landing-miudo {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--esp-2);
}
.landing-miudo__titulo {
  margin: 0;
  padding-left: var(--esp-4);
  border-left: 3px solid var(--cor-marca);
  font-size: var(--texto-md);
  font-weight: var(--peso-forte);
}
.landing-miudo__texto {
  /* No celular o par empilha, então a distância ENTRE pares sai daqui: o
     `row-gap` da grade é o respiro de dentro do par e não pode crescer sem
     descolar o título do próprio texto. */
  margin: 0 0 var(--esp-5);
  padding-left: var(--esp-4);
  border-left: 3px solid var(--borda);
  color: var(--texto-suave);
  font-size: var(--texto-sm);
  line-height: var(--altura-solta);
}

@media (min-width: 48rem) {
  .landing-miudo { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); column-gap: var(--esp-8); row-gap: var(--esp-6) }
  .landing-miudo__texto { margin: 0 }
}

/* ═══ A CHAMADA FINAL ═════════════════════════════════════════════════════ */

/* Alinhada à ESQUERDA como o resto da página. A versão anterior centralizava
   esta peça e o herói, e deixava sete seções à esquerda no meio. */
.landing-chamada {
  padding: var(--esp-8) var(--esp-5);
  background: var(--cor-marca-suave);
  border: 1px solid var(--cor-marca-tenue);
  border-radius: var(--raio-4);
}
.landing-chamada__titulo {
  margin: 0 0 var(--esp-3);
  max-width: 24ch;
  font-size: var(--texto-xl);
  letter-spacing: var(--espacamento-titulo);
  text-wrap: balance;
}
.landing-chamada__texto {
  max-width: 42rem;
  margin: 0 0 var(--esp-6);
  color: var(--texto-suave);
  line-height: var(--altura-solta);
}
.landing-chamada__email { margin-top: var(--esp-5) }
/* Botão em cima, elo embaixo, à esquerda — a mesma composição do herói. O
   `.botoes` da onda D vira linha a partir de 30rem; aqui fica coluna sempre. */
.landing-chamada__botoes { flex-direction: column; align-items: flex-start }

@media (min-width: 48rem) {
  .landing-chamada { padding: var(--esp-12) var(--esp-10) }
  .landing-chamada__titulo { font-size: var(--texto-3xl) }
}

/* A METADE DIREITA ESTAVA VAZIA, e lia como "alguma coisa não carregou": a
   caixa mede 926 px e o conteúdo empilhado parava em ~680. Não era falta de
   conteúdo, era falta de COMPOSIÇÃO — texto e ação um debaixo do outro dentro
   de uma caixa larga deixam uma coluna inteira de vazio à direita.

   A partir de 64rem a caixa vira duas colunas: o convite à esquerda, a ação à
   direita, as duas ancoradas no topo. Continua tudo alinhado à ESQUERDA dentro
   da sua coluna — o eixo único da página não muda, o que muda é a caixa deixar
   de ter um lado morto. Abaixo de 64rem empilha, que é o certo no celular. */
@media (min-width: 64rem) {
  .landing-chamada {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    column-gap: var(--esp-10);
    row-gap: var(--esp-4);
    align-items: start;
  }
  /* As quatro peças são colocadas UMA A UMA, e não deixadas ao fluxo
     automático. Com `grid-row: 1 / span 2` na barra de ações, o endereço em
     texto caía numa terceira linha criada depois do parágrafo — 180 px abaixo
     do botão a que ele pertence. Convite à esquerda, ação à direita, cada um
     com duas linhas próprias. */
  /* Duas peças, uma por coluna — o convite (título, texto e os três fatos)
     e as ações (botões, e-mail em texto, conferência em texto). Cada peça é
     um bloco só, então nada cai numa terceira linha por acidente. */
  .landing-chamada__convite { grid-column: 1; grid-row: 1 }
  .landing-chamada__acoes   { grid-column: 2; grid-row: 1 }
  .landing-chamada .botoes { flex-direction: column; align-items: flex-start }
  .landing-chamada .botoes .botao { align-self: stretch }

  /* A medida de 24ch vale para a caixa de uma coluna. Aqui quem manda é a
     coluna da grade, e o cap fazia a manchete quebrar em três linhas dentro de
     um espaço em que ela cabe em duas. */
  .landing-chamada__titulo { max-width: none }
}

/* ═══ CARD → MODAL ════════════════════════════════════════════════════════
   ⚠ AQUI HAVIA 95 LINHAS, E ELAS FORAM APAGADAS.

   O painel de detalhe desta página era um `:target`: `.landing-ficha`
   `position: fixed`, `visibility: hidden`, um fundo escuro que era um link de
   fechar, uma caixa que subia do rodapé no celular e escalava no desktop, e um
   `@media (min-width: 40rem)` para a segunda forma. Noventa e cinco linhas
   para reimplementar — pior — o que o `<dialog>` nativo faz sozinho.

   Hoje a ficha é `detalhe_em_modal`, e o desenho inteiro vem de `12_modal.css`
   (o `<dialog>`, o `::backdrop`, a folha que sobe, o puxador, a saída animada)
   e de `10_componentes.css` (a caixa, o corpo, o título). Junto vieram o Esc, o
   foco preso, o foco devolvido ao cartão e a URL compartilhável, que o
   `:target` não tinha como dar.

   Uma linha das 95 não voltou como CSS e vale registrar por quê: o
   `backdrop-filter` era ligado SÓ no painel aberto, porque treze camadas de
   desfoque do tamanho da janela, ainda que invisíveis, são treze superfícies
   de composição — e a captura de tela do Chromium estourava 30 s de espera.
   O problema não existe mais: agora há UM modal no documento, e só depois de
   alguém clicar.

   O que sobra desta folha para a ficha é o que é CONTEÚDO dela, e não
   invólucro — as duas classes abaixo. O invólucro não é mais assunto da
   landing.                                                                   */

/* O subtítulo de uma lista dentro da ficha ("O que entra numa aula"). Vive
   dentro de `.modal__corpo` ou de `.detalhe__corpo`, que já dão cor e medida;
   daqui sai só o respiro de cima, que é maior que o de um parágrafo porque ele
   abre um assunto novo. */
.landing-ficha__subtitulo {
  margin: var(--esp-6) 0 var(--esp-3);
  color: var(--texto);
  font-size: var(--texto-md);
  font-weight: var(--peso-forte);
}

/* A ressalva do fim de uma ficha — o parágrafo que diz o que a Ellévu NÃO
   garante. Menor e mais apagado de propósito: é honestidade, não argumento. */
.landing-ficha__ressalva { font-size: var(--texto-sm); color: var(--texto-tenue) }

/* ═══ OS TRÊS BLOCOS DA PORTA DO TENANT ═══════════════════════════════════ */

/* O cartão é da onda D; daqui sai só o selo de símbolo no topo. */
.landing-bloco__simbolo {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: var(--esp-3);
  border-radius: var(--raio-2);
  background: var(--cor-marca-suave);
  color: var(--cor-marca);
}

/* `.botoes` da onda D empilha no celular e vira linha a partir de 30rem. No
   herói centralizado da PORTA DO TENANT ela precisa centralizar também — e
   isso a onda D não decide, porque nas telas dela a barra é à esquerda.
   A landing institucional NÃO usa este modificador: lá tudo é à esquerda. */
.botoes--centro { align-items: stretch }
@media (min-width: 30rem) {
  .botoes--centro { justify-content: center; align-items: center }
}

/* ═══ MOVIMENTO ═══════════════════════════════════════════════════════════
   Leia o aviso no topo do arquivo antes de mexer. Regra sem exceção: todo
   quadro `100%` é o estado de REPOUSO, porque é nele que a página fica sob
   `prefers-reduced-motion`.                                                  */

@keyframes landing-sobe {
  from { opacity: 0; transform: translateY(1rem) }
  to   { opacity: 1; transform: none }
}

@keyframes landing-entra-lado {
  from { opacity: 0; transform: translateX(1.25rem) scale(0.98) }
  to   { opacity: 1; transform: none }
}

/* ── 1. A entrada do herói, na carga ──────────────────────────────────────
   Cascata curta (70 ms entre peças) e rápida: isto é o topo da página e o
   texto não pode chegar depois do leitor. O total, do primeiro ao último
   quadro, é meio segundo. */
@media (prefers-reduced-motion: no-preference) {
  .landing-heroi__etiqueta,
  .landing-heroi__titulo,
  .landing-heroi__texto,
  .landing-heroi__botoes {
    animation: landing-sobe var(--tempo-lento) var(--curva-entrada) both;
  }
  .landing-heroi__titulo  { animation-delay: 70ms }
  .landing-heroi__texto   { animation-delay: 140ms }
  .landing-heroi__botoes  { animation-delay: 210ms }

  .landing-heroi__arte {
    animation: landing-entra-lado 520ms var(--curva-entrada) both;
    animation-delay: 180ms;
  }
}

/* ── 2. A revelação ao rolar: NÃO É DAQUI ─────────────────────────────────
   Enquanto o bloco MOTOR não existia, esta folha revelava as seções sozinha,
   com `animation-timeline: view()` dentro de um `@supports`. O motor chegou, e
   a regra dele é melhor que a minha: `revelar_controller` só esconde o que
   está FORA DA TELA no momento do `connect`, então é impossível o pisca de
   "apareceu, sumiu, apareceu" — e, se o JS não carregar, nada some, porque a
   classe que esconde nunca chega ao CSS.

   A folha de rolagem não sabia fazer nem uma coisa nem outra: escondia pelo
   CSS (logo, sem JS TAMBÉM escondia) e não tinha como não piscar a primeira
   dobra. Saiu inteira. Quem revela agora são os helpers `revelar`/
   `revelar_item` na view, e a folha `03_movimento.css`.

   O que sobrou aqui é só o que o motor não cobre e não depende de JS nenhum:
   a entrada do herói na CARGA (acima, item 1) e a sequência do diagrama
   (abaixo). As duas são CSS puro e nascem do primeiro quadro da página. */

/* ═══ A ARTE DO HERÓI — O FLUXO ═══════════════════════════════════════════
 *
 * assiste → avalia → certificado → e a seta que ninguém mais desenha, a da
 * conferência por terceiro. As cores estão AQUI e não em atributos `fill=` no
 * SVG por um motivo de projeto: atributo de apresentação é valor fixo, e o dia
 * em que o tenant mudar de cor (ou o tema virar claro) o desenho não
 * acompanharia. `style=` também não serve — a CSP põe nonce em `style-src` e
 * nonce não vale para atributo `style`.
 */
.arte-fluxo {
  width: 100%;
  /* 24 rem: a figura é vertical (340×456) e a 34 rem ela mediria 730 px de
     altura no tablet. A 390 px de janela ela sai a 343 px de largura, que é
     escala 1:1 do viewBox — a nota de 13 px é 13 px na tela. */
  max-width: 24rem;
  height: auto;
  display: block;
}

.arte-fluxo__cartao { fill: var(--fundo-cartao); stroke: var(--borda); stroke-width: 1 }
.arte-fluxo__tela { fill: var(--fundo-fundo); stroke: var(--borda); stroke-width: 1 }
.arte-fluxo__play { fill: var(--cor-marca) }
.arte-fluxo__trilho { fill: var(--fundo-fundo); stroke: var(--borda); stroke-width: 0.75 }
.arte-fluxo__barra { fill: var(--cor-marca-forte) }
.arte-fluxo__bolinha { fill: none; stroke: var(--borda-forte); stroke-width: 1.25 }
.arte-fluxo__opcao { fill: var(--texto-tenue); opacity: 0.4 }
.arte-fluxo__bolinha-cheia { fill: var(--cor-aprovado) }
.arte-fluxo__check { fill: none; stroke: var(--cor-aprovado-contraste); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round }
.arte-fluxo__folha { fill: var(--fundo-fundo); stroke: var(--borda); stroke-width: 1 }
.arte-fluxo__linha { fill: var(--texto-tenue); opacity: 0.45 }
.arte-fluxo__qr-fundo { fill: var(--fundo-cartao); stroke: var(--borda-forte); stroke-width: 0.75 }
.arte-fluxo__qr-modulo { fill: var(--texto) }
.arte-fluxo__selo-disco { fill: var(--cor-marca-forte) }
.arte-fluxo__selo-check { fill: none; stroke: var(--cor-marca-contraste); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.arte-fluxo__seta-traco { stroke: var(--borda-forte); stroke-width: 1.5; stroke-linecap: round }
.arte-fluxo__seta-ponta { fill: var(--borda-forte) }
.arte-fluxo__tracejado {
  stroke: var(--cor-marca);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
  stroke-linecap: round;
}
.arte-fluxo__pilula { fill: var(--cor-marca-suave); stroke: var(--cor-marca-tenue); stroke-width: 1 }
.arte-fluxo__lupa { fill: none; stroke: var(--cor-marca); stroke-width: 1.75 }
.arte-fluxo__lupa-cabo { stroke: var(--cor-marca); stroke-width: 1.75; stroke-linecap: round }

/* Texto à direita do ícone, como numa linha de lista: `text-anchor` padrão
   (início). Rótulo 15 e nota 13 — a figura sai em escala ~1 no celular e
   ~1,2 no desktop, então esses são os tamanhos que a pessoa lê (a versão
   horizontal tinha nota de 11 que a 390 px virava 9). */
.arte-fluxo__rotulo {
  fill: var(--texto);
  font-family: var(--fonte);
  font-size: 15px;
  font-weight: 700;
}
.arte-fluxo__nota {
  fill: var(--texto-tenue);
  font-family: var(--fonte);
  font-size: 13px;
}
.arte-fluxo__confere-texto {
  fill: var(--cor-marca);
  font-family: var(--fonte);
  font-size: 15px;
  font-weight: 700;
}

/* ── O movimento do diagrama ──────────────────────────────────────────────
   A sequência É o argumento: a barra enche (o servidor medindo), o check cai
   (a avaliação), o selo fecha (o certificado) e a conferência acende. Roda UMA
   VEZ, na carga — figura que pisca para sempre num herói é a definição de
   animação que atrapalha. `transform-box: fill-box` porque, sem ele, a origem
   de transformação de um nó SVG é o canto do viewBox inteiro e a barra
   cresceria a partir do lugar errado. */
@keyframes arte-fluxo-enche {
  from { transform: scaleX(0) }
  to   { transform: scaleX(1) }
}
@keyframes arte-fluxo-surge {
  from { opacity: 0; transform: scale(0.4) }
  to   { opacity: 1; transform: none }
}
@keyframes arte-fluxo-acende {
  from { opacity: 0 }
  to   { opacity: 1 }
}

/* OS TEMPOS SÃO MEDIDOS, E "MENOS DE 1,8 s" NÃO ERA CONSERTO — ERA O MESMO
   DEFEITO COM UM NÚMERO MENOR. A medição, do início da navegação:

     h1 389 ms · parágrafo 473 ms · botões 539 ms · selo 1356 ms ·
     pílula "Qualquer um confere" 1755 ms

   Ou seja: por ~1,3 segundo o herói dizia "Assiste → Avalia → Certificado",
   que é o que qualquer LMS faz, e A ÚNICA COISA QUE DIFERENCIA A ELLÉVU —
   terceiro confere sem pedir nada a ninguém — chegava por último. Quem rolasse
   no primeiro segundo nunca via. `MARCA.md §2`: a animação nunca atrasa a
   informação, e a informação aqui é a pílula.

   Os tempos abaixo põem a pílula a 520 ms, no mesmo instante em que a barra de
   botões do herói termina de entrar (210 ms de atraso + 420 ms) — que é o que
   a crítica pediu com estas palavras: "junto com os botões". A sequência
   inteira fecha em 860 ms, contra 1.770 ms. O que se perdeu foi meio segundo
   de suspense; o que se ganhou foi o argumento chegar na primeira dobra.

   A ORDEM CONTINUA SENDO O ARGUMENTO (barra enche → check cai → selo fecha →
   conferência acende): ela só ficou apertada de 1,77 s para 0,86 s. Encavalar
   um pouco as etapas é o que permite isso sem a figura parecer um piscar só —
   a barra ainda está enchendo quando a seta 1 acende. */
@media (prefers-reduced-motion: no-preference) {
  .arte-fluxo__barra {
    transform-box: fill-box;
    transform-origin: left center;
    animation: arte-fluxo-enche 520ms var(--curva-entrada) 120ms both;
  }
  .arte-fluxo__seta--1 { animation: arte-fluxo-acende 200ms linear 360ms both }
  .arte-fluxo__bolinha-cheia,
  .arte-fluxo__check {
    transform-box: fill-box;
    transform-origin: center;
    animation: arte-fluxo-surge 300ms var(--curva-elastica) 400ms both;
  }
  .arte-fluxo__seta--2 { animation: arte-fluxo-acende 200ms linear 460ms both }
  .arte-fluxo__qr { animation: arte-fluxo-acende 220ms linear 470ms both }
  .arte-fluxo__selo {
    transform-box: fill-box;
    transform-origin: center;
    animation: arte-fluxo-surge 320ms var(--curva-elastica) 500ms both;
  }
  .arte-fluxo__tracejado { animation: arte-fluxo-acende 240ms linear 500ms both }
  .arte-fluxo__confere { animation: landing-sobe 340ms var(--curva-entrada) 520ms both }
}

/* ═══ A ARTE DO CERTIFICADO ═══════════════════════════════════════════════
 *
 * Esquema do certificado, com os mesmos tokens. É ESQUEMA, NÃO FAC-SÍMILE: o
 * protocolo aparece com os X literais e o quadriculado é decorativo — desenhar
 * documento de aparência real numa peça comercial é fabricar documento.
 */
.arte-certificado {
  width: 100%;
  max-width: 30rem;
  height: auto;
  margin-inline: auto;
  display: block;
}

.arte-certificado__folha { fill: var(--fundo-cartao); stroke: var(--borda); stroke-width: 1.5 }
.arte-certificado__marca { fill: var(--cor-marca) }
/* Texto de verdade no certificado (era barra cinza). Os tamanhos são de
   viewBox: a figura sai a ~1,5× no desktop (30 rem) e ~1,07× a 390 px. */
.arte-certificado__titulo {
  fill: var(--texto-tenue);
  font-family: var(--fonte);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
}
.arte-certificado__nome {
  fill: var(--texto);
  font-family: var(--fonte);
  font-size: 16px;
  font-weight: 700;
}
.arte-certificado__linha {
  fill: var(--texto-suave);
  font-family: var(--fonte);
  font-size: 11px;
}
.arte-certificado__validade {
  fill: var(--texto-tenue);
  font-family: var(--fonte);
  font-size: 10px;
}
.arte-certificado__regua { stroke: var(--borda); stroke-width: 1 }

.arte-certificado__selo { fill: var(--cor-marca-suave); stroke: var(--cor-marca-tenue); stroke-width: 1.5 }
.arte-certificado__selo-interno { fill: none; stroke: var(--cor-marca); stroke-width: 1; opacity: 0.55 }
.arte-certificado__selo-check {
  fill: none;
  stroke: var(--cor-marca);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.arte-certificado__qr-fundo { fill: var(--fundo-fundo) }
.arte-certificado__qr { fill: var(--texto); opacity: 0.85 }
.arte-certificado__qr-vazado { fill: var(--fundo-fundo) }
.arte-certificado__protocolo {
  fill: var(--texto);
  font-family: var(--fonte-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
}

/* ═══ A RODADA DE REFINO ══════════════════════════════════════════════════
   Tudo abaixo entrou na rodada "gostei, melhorou muito, mas dá pra refinar".
   A regra do arquivo continua: prefixo `landing-`/`arte-`, só `transform` e
   `opacity` em movimento, todo quadro final é repouso, e toda `animation`
   dentro de `@media (prefers-reduced-motion: no-preference)`. As três artes
   novas (medidor, ficha, selo) animam por TRANSIÇÃO disparada pela classe do
   motor de revelação — `.revelar--oculto` some, a transição corre — e por
   isso não precisam de uma linha de JS própria e obedecem ao movimento
   reduzido pelo mesmo bloco de `02_base.css` que zera toda transição.      */

/* ─── O cabeçalho: três portas ─────────────────────────────────────────── */
.landing-topo {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  min-width: 0;
}
/* A 390 px a barra tem 358 px para a marca e o que vier aqui. "Validar
   certificado" some do cabeçalho e continua no herói e no rodapé — quem
   chegou com um papel na mão não perde a porta. */
/* Dois seletores porque `.botao` (folha 10, depois desta) declara `display:
   inline-flex` com a mesma especificidade de uma classe só — e venceria. */
.landing-topo .landing-topo__validar { display: none }
@media (min-width: 48rem) {
  .landing-topo { gap: var(--esp-3) }
  .landing-topo .landing-topo__validar { display: inline-flex }
}
/* O botão primário do cabeçalho não quebra em duas linhas: é a única
   exceção ao `white-space: normal` da landing, porque um botão de 2,75 rem em
   duas linhas vira um selo torto. Cabe: "Criar conta grátis" a 14 px mede
   ~115 px, e a barra a 390 px sobra 60 px depois da marca e do "Entrar". */
.landing-topo .botao__rotulo { white-space: nowrap }
/* Alvo de 44 px (WCAG 2.5.8) com a LARGURA do botão pequeno: eram
   `botao--pequeno` de 40 px (rodada R, achado 15). A altura vem do `--alvo`,
   o padding lateral e a fonte continuam os do pequeno para caber a 390 px. */
.landing-topo .botao { min-height: var(--alvo); padding-block: var(--esp-2); padding-inline: var(--esp-3); font-size: var(--texto-sm) }

/* ─── O herói: garantia, pílulas e a arte maior ────────────────────────── */
.landing-heroi__garantia { max-width: 34rem; margin-bottom: var(--esp-6) }
.landing-heroi__exemplos { display: flex; flex-direction: column; gap: var(--esp-3) }
.landing-heroi__exemplos-titulo {
  margin: 0;
  color: var(--texto-tenue);
  font-size: var(--texto-sm);
}
.landing-pilulas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
}
.landing-pilula {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio-redondo);
  background: var(--fundo-cartao);
  color: var(--texto-suave);
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  white-space: nowrap;
  transition: border-color var(--transicao-rapida), color var(--transicao-rapida), background-color var(--transicao-rapida);
}
/* A pílula é um LINK que abre a ficha do tema (card → modal). O padding fica
   no elo, não no `<li>`, para que a área clicável seja a pílula inteira; e a
   altura de toque chega aos 44 px por um `::before` invisível (a pílula
   continua com 2 rem de altura visual — seis delas a 2,75 rem tomariam a
   dobra do celular). */
.landing-pilula__elo {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0 var(--esp-3);
  border-radius: inherit;
  color: inherit;
  text-decoration: none;
}
.landing-pilula__elo::before { content: ""; position: absolute; inset: -0.375rem 0 }
.landing-pilula:hover, .landing-pilula:has(:focus-visible) {
  border-color: var(--cor-marca);
  color: var(--cor-marca);
  background: var(--cor-marca-suave);
}

/* O elo secundário do herói — a porta de quem já tem um papel na mão. Alvo
   de toque de 48 px como todo controle do produto, sem parecer botão. */
.landing-elo-secundario,
.landing-elo-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  min-height: var(--alvo);
  /* Sem recuo lateral: o elo alinha na MESMA margem do botão e do título
     acima dele. Medido: 8 px de padding punham a seta a x=241 numa página
     cujo eixo é x=233 — e um eixo só é a regra da página. */
  padding: 0;
  color: var(--cor-marca);
  font-weight: var(--peso-medio);
  text-decoration: none;
}
.landing-elo-secundario { color: var(--texto-suave) }
.landing-elo-secundario:hover,
.landing-elo-cta:hover { text-decoration: underline; text-underline-offset: 0.2em }
.landing-elo-secundario__seta,
.landing-elo-cta__seta { transition: transform var(--tempo-rapido) var(--curva-saida) }
.landing-elo-secundario:hover .landing-elo-secundario__seta,
.landing-elo-cta:hover .landing-elo-cta__seta { transform: translateX(0.2rem) }

/* O CTA no fim de uma seção que convence: um elo, à esquerda como tudo. */
.landing-secao__cta { margin: 0 }
.landing-elo-cta { font-size: var(--texto-md) }
@media (min-width: 48rem) {
  .landing-elo-cta { font-size: var(--texto-lg) }
}

/* A arte do herói cresce com a coluna e ganha um halo. O halo é um gradiente
   radial num pseudo-elemento — pintado uma vez, custo zero por quadro — e é
   o que tira o "diagrama flutuando no escuro".

   ⚠ A PRIMEIRA VERSÃO DO HALO NÃO RENDIA UM PIXEL, e foi medido: `closest-
   side` num pseudo com `inset: -10% -6%` tem raio = metade do lado menor, e
   o `transparent 72%` caía DENTRO da área que a figura cobre. Pixel a 48 px
   acima da arte = fundo puro. Agora o pseudo é maior que a figura (44% mais
   largo, 32% mais alto) e a elipse ocupa o pseudo inteiro, então o degradê
   existe onde se vê: entre a arte e o texto, e acima e abaixo dela. */
.landing-heroi__arte { position: relative }
.landing-heroi__arte::before {
  content: "";
  position: absolute;
  inset: -16% -22%;
  /* Raios de 50%: a elipse termina DENTRO do pseudo. Com raio maior que a
     caixa o degradê era cortado pela borda dela e aparecia um retângulo
     tênue em volta da arte (visto no print). */
  background: radial-gradient(50% 50% at 50% 50%,
    color-mix(in srgb, var(--cor-marca-forte) 32%, transparent) 0%,
    color-mix(in srgb, var(--cor-marca-forte) 14%, transparent) 42%,
    color-mix(in srgb, var(--cor-marca-forte) 4%, transparent) 76%,
    transparent 100%);
  pointer-events: none;
}
.landing-heroi__arte .arte-fluxo { position: relative }
@media (min-width: 64rem) {
  .arte-fluxo { max-width: none }
}

/* ─── A ficha com pictograma no título e CTA no rodapé ─────────────────── */
/* O ladrilho do cartão dentro do `<h2>` do modal e do `<h1>` da tela cheia:
   o título vira flex, o ladrilho fica numa coluna própria e o texto quebra
   ao lado dele — em linha, a segunda linha do título passava por baixo do
   ladrilho a 390 px ("Segurança do / trabalho e NRs" com o "trabalho"
   colado na margem). */
.modal__titulo:has(.landing-pictograma, .landing-ficha__numero),
.detalhe__titulo:has(.landing-pictograma, .landing-ficha__numero) {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
}
/* Na TELA CHEIA o título é `--texto-3xl` (36 px): a 390 px, com o ladrilho
   ao lado, "Segurança do trabalho e NRs" saía em três linhas numa coluna de
   290. Abaixo de 48rem o ladrilho vai para CIMA do título; a partir daí,
   ao lado, alinhado pela primeira linha. */
.detalhe__titulo:has(.landing-pictograma, .landing-ficha__numero) {
  flex-direction: column;
  align-items: flex-start;
}
@media (min-width: 48rem) {
  .detalhe__titulo:has(.landing-pictograma, .landing-ficha__numero) { flex-direction: row; align-items: flex-start }
  .detalhe__titulo .landing-pictograma,
  .detalhe__titulo .landing-ficha__numero { margin-top: 0.1em }
}
.modal__titulo .landing-pictograma,
.detalhe__titulo .landing-pictograma,
.landing-ficha__numero { margin: 0; align-self: auto }
.landing-ficha__titulo-texto { min-width: 0 }

/* ─── O pictograma do cartão ───────────────────────────────────────────── */
.landing-pictograma {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: var(--esp-2);
  border-radius: var(--raio-2);
  background: var(--cor-marca-suave);
  color: var(--cor-marca);
  transition: transform var(--tempo-normal) var(--curva-entrada);
}
@media (hover: hover) {
  .cartao--acionavel:hover .landing-pictograma { transform: translateY(-2px) scale(1.06) }
}

/* ─── A abertura de seção em par: texto + arte ─────────────────────────── */
.landing-abertura { display: grid; gap: var(--esp-8); align-items: center }
.landing-abertura__arte { min-width: 0 }
@media (min-width: 64rem) {
  .landing-abertura {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: var(--esp-12);
  }
}

/* ─── Para quem opera: três fatos + a ficha ────────────────────────────── */
.landing-operacao { display: grid; gap: var(--esp-8); align-items: center }
.landing-operacao__arte { min-width: 0 }
@media (min-width: 64rem) {
  .landing-operacao {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--esp-12);
  }
}
.landing-fatos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--esp-6);
}
.landing-fato { display: flex; gap: var(--esp-4); align-items: flex-start }
.landing-fato .landing-pictograma { margin-bottom: 0 }
.landing-fato__corpo { min-width: 0 }
.landing-fato__titulo { margin: 0 0 var(--esp-1); font-size: var(--texto-lg) }
.landing-fato__texto {
  margin: 0;
  color: var(--texto-suave);
  font-size: var(--texto-sm);
  line-height: var(--altura-solta);
}

/* ─── A chamada final: convite + fatos + ações ─────────────────────────── */
.landing-chamada__convite,
.landing-chamada__acoes { min-width: 0 }
.landing-chamada__fatos { margin: 0 0 var(--esp-6) }
.landing-chamada__fatos li { font-size: var(--texto-sm); color: var(--texto-suave) }
/* Em linha, e não em duas colunas: `.landing__nota` é flex para pôr ícone ao
   lado de texto, e aqui não há ícone — o elo quebrava para uma segunda coluna. */
.landing-chamada__conferir { display: block; margin-top: var(--esp-3) }
.landing-chamada__conferir .elo { margin-left: var(--esp-1) }
.landing-chamada__conferir .elo { color: var(--cor-marca) }
@media (min-width: 64rem) {
  .landing-chamada__fatos { margin-bottom: 0 }
  .landing-chamada__email { margin-top: var(--esp-5) }
}

/* ═══ A ARTE DO MEDIDOR ═══════════════════════════════════════════════════
   Quatro faixas sobre a linha do tempo de uma aula, e um trecho pulado. A
   posição de cada faixa é classe (`--1`…`--4`), porque `style=` inline morre
   na CSP com nonce. O
   MOVIMENTO é transição: com `.revelar--oculto` no ancestral as faixas estão
   em `scaleX(0)` e a pílula sumida; o motor tira a classe, e cada faixa
   enche com o seu atraso. A pílula vem por último — depois do servidor
   medir é que a avaliação abre, e a ordem É o argumento.

   MEDIDO no navegador (amostras a cada 200 ms depois de a seção entrar):
   faixa 1 cheia a ~400 ms, faixa 4 a ~1.050 ms, o número chega a 95 a
   ~1.000 ms e a pílula acende a ~1.200 ms. A sequência inteira fecha em
   1,4 s — o número nunca chega DEPOIS da barra, e a pílula nunca antes.   */
.arte-medidor {
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
  padding: var(--esp-5);
  background: var(--fundo-cartao);
  border: 1px solid var(--borda);
  border-radius: var(--raio-3);
  box-shadow: var(--sombra-1);
}
.arte-medidor__topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--esp-3);
  flex-wrap: wrap;
  font-size: var(--texto-sm);
}
.arte-medidor__aula {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  color: var(--texto);
  font-weight: var(--peso-medio);
}
.arte-medidor__play { color: var(--cor-marca) }
.arte-medidor__legenda { color: var(--texto-tenue); font-size: var(--texto-xs) }
.arte-medidor__trilho {
  position: relative;
  height: 0.75rem;
  border-radius: var(--raio-redondo);
  background: var(--fundo-fundo);
  overflow: hidden;
}
.arte-medidor__faixa {
  position: absolute;
  top: 0;
  bottom: 0;
  /* Sem raio: as faixas FECHAM entre si e o único vão é o pulo. Com raio,
     cada emenda mostrava uma reentrância e a barra parecia fatiada. As
     pontas arredondadas vêm do `overflow: hidden` do trilho. */
  background: var(--cor-marca-forte);
  transform-origin: left center;
  transition: transform 520ms var(--curva-entrada) var(--faixa-atraso, 0ms);
}
/* Quatro faixas que FECHAM entre si (0–24, 24–52, 52–61, 66–100) e UM vão,
   de 61 a 66: o trecho pulado. A versão anterior tinha cinco faixas com 1%
   de vão entre todas e um cursor no fim — lia como barra de progresso
   fatiada, e o cursor como defeito de render. A soma continua 95. */
.arte-medidor__faixa--1 { left: 0%;  width: 24%; --faixa-atraso: 40ms }
.arte-medidor__faixa--2 { left: 24%; width: 28%; --faixa-atraso: 200ms }
.arte-medidor__faixa--3 { left: 52%; width: 9%;  --faixa-atraso: 360ms }
.arte-medidor__faixa--4 { left: 66%; width: 34%; --faixa-atraso: 520ms }
/* O trecho pulado: hachura no vão, que acende depois de as faixas enrolarem
   até ele — o servidor "viu" o pulo quando a faixa seguinte começou. */
.arte-medidor__pulo {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 61%;
  width: 5%;
  background: repeating-linear-gradient(135deg,
    var(--texto-tenue) 0 2px, transparent 2px 5px);
  opacity: 0.7;
  transition: opacity var(--tempo-normal) var(--curva-entrada) 560ms;
}
.revelar--oculto .arte-medidor__pulo { opacity: 0; transition: none }
/* A legenda das duas cores, e o tamanho de amostra de cada uma. */
.arte-medidor__chave {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2) var(--esp-5);
  color: var(--texto-tenue);
  font-size: var(--texto-xs);
}
.arte-medidor__chave li { display: inline-flex; align-items: center; gap: var(--esp-2) }
.arte-medidor__amostra {
  display: inline-block;
  width: 1rem;
  height: 0.5rem;
  border-radius: var(--raio-redondo);
}
.arte-medidor__amostra--faixa { background: var(--cor-marca-forte) }
.arte-medidor__amostra--pulo {
  background: repeating-linear-gradient(135deg,
    var(--texto-tenue) 0 2px, transparent 2px 5px);
  border: 1px solid var(--borda);
}
.arte-medidor__piso { margin: 0; color: var(--texto-tenue); font-size: var(--texto-xs) }
/* `transition: none` no estado escondido, em todas as artes: o motor põe a
   classe DEPOIS do primeiro quadro, e sem isto a faixa encolhia de 1 para 0
   em transição (invisível, fora da tela — mas ainda rodando 1,3 s depois da
   carga, e quem rolasse rápido pegava a figura no meio do caminho). Esconder
   é instantâneo; só MOSTRAR anima. */
.revelar--oculto .arte-medidor__faixa { transform: scaleX(0); transition: none }
.arte-medidor__leitura { display: flex; align-items: baseline; gap: var(--esp-3); flex-wrap: wrap }
.arte-medidor__numero {
  color: var(--cor-marca);
  font-size: var(--texto-3xl);
  font-weight: var(--peso-forte);
  line-height: 1;
}
.arte-medidor__cobertura { color: var(--texto-suave); font-size: var(--texto-sm) }
.arte-medidor__pilula {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: var(--esp-2);
  margin: 0;
  padding: var(--esp-2) var(--esp-4);
  border-radius: var(--raio-redondo);
  background: var(--cor-aprovado-suave);
  color: var(--cor-aprovado);
  font-size: var(--texto-sm);
  font-weight: var(--peso-forte);
  transition:
    opacity var(--tempo-lento) var(--curva-entrada) 960ms,
    transform var(--tempo-lento) var(--curva-elastica) 960ms;
}
.revelar--oculto .arte-medidor__pilula { opacity: 0; transform: translateY(0.5rem) scale(0.92); transition: none }

/* ═══ A ARTE DA FICHA (CARD → MODAL) ══════════════════════════════════════
   A lista do gestor e, saindo da linha destacada, a ficha. Com
   `.revelar--oculto` no ancestral a ficha está encolhida sobre a linha e a
   linha está apagada; o motor tira a classe e a ficha CRESCE dali — é a
   mesma curva de entrada do modal do produto. O medidor dentro dela enche
   depois, e o certificado acende por último.                               */
.arte-ficha {
  position: relative;
  max-width: 30rem;
  margin-inline: auto;
  /* A ficha desce 5 rem abaixo da lista, DE PROPÓSITO: é o modal saindo da
     linha e crescendo para fora dela. O respiro de baixo é o que faz a
     moldura da arte conter a ficha inteira, em vez de ela invadir o que vem
     depois — e o que deixa a PRIMEIRA linha da lista ("Devendo") inteira
     acima do modal, a 390 e a 1440 (medido: o modal começa em y = 819+ a
     390 com a linha terminando em 812). */
  padding-bottom: 5rem;
}
.arte-ficha__lista {
  padding: var(--esp-4);
  background: var(--fundo-cartao);
  border: 1px solid var(--borda);
  border-radius: var(--raio-3);
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
}
.arte-ficha__cabecalho {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  margin: 0 0 var(--esp-2);
  color: var(--texto-tenue);
  font-size: var(--texto-xs);
  font-weight: var(--peso-forte);
  letter-spacing: var(--espacamento-etiqueta);
  text-transform: uppercase;
}
.arte-ficha__linha {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-2) var(--esp-3);
  border-radius: var(--raio-2);
  font-size: var(--texto-sm);
}
/* O destaque da linha ativa é um pseudo-elemento que aparece por OPACIDADE
   — e não `border-color`/`background-color` em transição, que são pintura e
   não compositor (MARCA.md §2: só `transform` e `opacity`). */
.arte-ficha__linha--ativa::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--cor-marca-tenue);
  border-radius: inherit;
  background: var(--fundo-elevado);
  transition: opacity var(--tempo-normal) var(--curva-padrao) 200ms;
}
.arte-ficha__linha > * { position: relative }
.revelar--oculto .arte-ficha__linha--ativa::before { opacity: 0; transition: none }
/* O avatar é a INICIAL da pessoa — texto, não círculo vazio. */
.arte-ficha__avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--raio-redondo);
  background: var(--cor-marca-suave);
  color: var(--cor-marca);
  font-size: var(--texto-xs);
  font-weight: var(--peso-forte);
  letter-spacing: 0.02em;
}
.arte-ficha__avatar--grande { width: 2.5rem; height: 2.5rem; font-size: var(--texto-sm) }
.arte-ficha__nome {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--texto);
}
.arte-ficha__nome--forte { font-weight: var(--peso-forte) }
.arte-ficha__identidade { display: flex; flex-direction: column; min-width: 0; line-height: var(--altura-normal) }
.arte-ficha__cargo { color: var(--texto-tenue); font-size: var(--texto-xs) }
.arte-ficha__selo { margin-left: auto; white-space: nowrap }
/* O VÉU: o `::backdrop` do modal do produto, desenhado sobre a lista. É o
   que faz a ficha ler como modal, e não como um cartão caído por cima. */
.arte-ficha__veu {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: color-mix(in srgb, var(--fundo) 55%, transparent);
  pointer-events: none;
  transition: opacity var(--tempo-lento) var(--curva-entrada) 320ms;
}
.arte-ficha__lista { position: relative }
.revelar--oculto .arte-ficha__veu { opacity: 0; transition: none }
.arte-ficha__modal {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(80%, 20rem);
  padding: var(--esp-4);
  background: var(--fundo-elevado);
  border: 1px solid var(--cor-marca-tenue);
  border-radius: var(--raio-3);
  box-shadow: var(--sombra-3);
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  transform-origin: 70% 20%;
  transition:
    opacity var(--tempo-lento) var(--curva-entrada) 320ms,
    transform var(--tempo-lento) var(--curva-entrada) 320ms;
}
.revelar--oculto .arte-ficha__modal { opacity: 0; transform: translateY(-1.5rem) scale(0.86); transition: none }
.arte-ficha__modal-titulo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  color: var(--texto-tenue);
  font-size: var(--texto-xs);
  font-weight: var(--peso-forte);
  letter-spacing: var(--espacamento-etiqueta);
  text-transform: uppercase;
}
.arte-ficha__fechar { color: var(--texto-tenue) }
.arte-ficha__pessoa { display: flex; align-items: center; gap: var(--esp-3); min-width: 0 }
.arte-ficha__curso { margin: 0; color: var(--texto); font-size: var(--texto-sm); font-weight: var(--peso-medio) }
.arte-ficha__medidor {
  display: block;
  height: 0.5rem;
  border-radius: var(--raio-redondo);
  background: var(--fundo-fundo);
  overflow: hidden;
}
.arte-ficha__medidor-barra {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: var(--raio-redondo);
  background: var(--cor-aprovado-forte);
  transform-origin: left center;
  transition: transform 700ms var(--curva-entrada) 700ms;
}
.revelar--oculto .arte-ficha__medidor-barra { transform: scaleX(0); transition: none }
.arte-ficha__progresso { margin: 0; color: var(--texto-suave); font-size: var(--texto-xs) }
.arte-ficha__certificado {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  margin: 0;
  padding: var(--esp-2) var(--esp-3);
  border-radius: var(--raio-2);
  background: var(--cor-marca-suave);
  color: var(--cor-marca);
  font-size: var(--texto-xs);
  transition: opacity var(--tempo-lento) var(--curva-entrada) 1250ms,
              transform var(--tempo-lento) var(--curva-elastica) 1250ms;
}
.revelar--oculto .arte-ficha__certificado { opacity: 0; transform: scale(0.94); transition: none }
.arte-ficha__certificado-icone { flex: none }
/* Rótulo em cima, protocolo em mono embaixo — DUAS linhas de propósito. Numa
   linha só, "Certificado ELV-XXXX-XXXX-XXXX" quebrava o protocolo ao meio a
   390 px ("ELV-XXXX-/XXXX-XXXX"), que é a pior quebra possível. */
.arte-ficha__certificado-texto { display: flex; flex-direction: column; line-height: var(--altura-normal) }
.arte-ficha__certificado-rotulo { font-weight: var(--peso-forte) }
.arte-ficha__protocolo { font-family: var(--fonte-mono); letter-spacing: 0.04em; white-space: nowrap }

/* ═══ MOVIMENTO DA RODADA DE REFINO ═══════════════════════════════════════
   As pílulas do herói entram em cascata depois dos botões (CSS puro, na
   carga, como o resto do herói) e o selo do certificado RESPIRA — a única
   animação em laço da página, só em `transform`, e só para quem não pediu
   menos movimento. Todo quadro 100% é repouso.                             */
@keyframes landing-respira {
  0%   { transform: scale(1) }
  50%  { transform: scale(1.04) }
  100% { transform: scale(1) }
}
@media (prefers-reduced-motion: no-preference) {
  .landing-heroi__garantia { animation: landing-sobe var(--tempo-lento) var(--curva-entrada) both; animation-delay: 280ms }
  .landing-heroi__exemplos-titulo { animation: landing-sobe var(--tempo-lento) var(--curva-entrada) both; animation-delay: 340ms }
  .landing-pilula { animation: landing-sobe 360ms var(--curva-entrada) both }
  .landing-pilula--1 { animation-delay: 380ms }
  .landing-pilula--2 { animation-delay: 430ms }
  .landing-pilula--3 { animation-delay: 480ms }
  .landing-pilula--4 { animation-delay: 530ms }
  .landing-pilula--5 { animation-delay: 580ms }
  .landing-pilula--6 { animation-delay: 630ms }
  .arte-certificado__carimbo {
    transform-box: fill-box;
    transform-origin: center;
    animation: landing-respira 3200ms ease-in-out infinite;
  }
}

/* ─── Régua tipográfica do celular ─────────────────────────────────────── */
/* A 390 px a manchete mede 27 px (clamp acima) e o parágrafo do herói, a
   18 px, ficava a 1,5 passo dela — hierarquia achatada. Abaixo de 48rem o
   parágrafo e a chamada de seção descem para o corpo (16 px); a partir de
   48rem, onde a manchete volta a 48 px, os 18 px voltam. */
@media (max-width: 47.99rem) {
  .landing-heroi__texto,
  .landing-secao__chamada { font-size: var(--texto-md) }
  /* Na caixa da chamada final, 32 px de padding do botão grande mais 20 da
     caixa deixavam 269 px para um rótulo de 250: "Criar conta grátis — 7 /
     dias" em duas linhas. Padding lateral do botão para 16 px dentro da
     caixa — o alvo de 56 px de altura não muda. */
  .landing-chamada .botao--grande { padding-inline: var(--esp-4) }
}

/* ─── Movimento reduzido: as artes nascem prontas ──────────────────────── */
/* O motor neutraliza `.revelar--oculto` sob movimento reduzido (03_movimento)
   para que nada fique escondido à espera de uma transição que não vai rodar.
   Os estados "escondidos" das artes acima são regras DESCENDENTES dessa
   classe e escapariam dessa rede — a faixa ficaria em `scaleX(0)` e a ficha
   invisível até a seção entrar na tela. Aqui a mesma neutralização, pelas
   duas portas (a consulta do sistema e o atributo que /estilo usa em teste). */
@media (prefers-reduced-motion: reduce) {
  .revelar--oculto .arte-medidor__faixa,
  .revelar--oculto .arte-ficha__medidor-barra { transform: none }
  .revelar--oculto .arte-medidor__pilula,
  .revelar--oculto .arte-ficha__modal,
  .revelar--oculto .arte-ficha__certificado { opacity: 1; transform: none }
  .revelar--oculto .arte-medidor__pulo { opacity: 0.7 }
  .revelar--oculto .arte-ficha__veu,
  .revelar--oculto .arte-ficha__linha--ativa::before { opacity: 1 }
}
[data-movimento="reduzido"] .revelar--oculto .arte-medidor__faixa,
[data-movimento="reduzido"] .revelar--oculto .arte-ficha__medidor-barra { transform: none !important }
[data-movimento="reduzido"] .revelar--oculto .arte-medidor__pilula,
[data-movimento="reduzido"] .revelar--oculto .arte-ficha__modal,
[data-movimento="reduzido"] .revelar--oculto .arte-ficha__certificado { opacity: 1 !important; transform: none !important }
[data-movimento="reduzido"] .revelar--oculto .arte-medidor__pulo { opacity: 0.7 !important }
[data-movimento="reduzido"] .revelar--oculto .arte-ficha__veu,
[data-movimento="reduzido"] .revelar--oculto .arte-ficha__linha--ativa::before { opacity: 1 !important }