/* =========================================================================
   Athlete's Hub, página low ticket da plataforma (GPS)
   Direção "Transmissão", forma da 2ª rodada (placa arredondada).
   Duas variantes no mesmo bundle: index.html (assinatura) e gratis.html.
   Só LAYOUT. Cor, tipo, espaço, raio e movimento vêm de tokens.css.
   Mobile-first: o CSS base é a régua pequena.

   A DIAGRAMAÇÃO EM UMA FRASE: a página é um chão claro com placas
   arredondadas apoiadas nele. Cada placa é um assunto, tem uma cabeça
   (rótulo, título, uma linha de apoio) e um corpo, sempre na mesma ordem e
   com o mesmo respiro. Nada encosta na borda da tela.
   ========================================================================= */

/* .ah-numero, .ah-dado, .ah-indice e .ah-ficha__escola não zeram a margem do
   <p> no sistema, e a margem padrão do navegador desmonta as pilhas curtas.
   >>> Levar para componentes.css na próxima rodada do DS. <<< */
.ah-numero, .ah-dado, .ah-indice, .ah-ficha__escola { margin: 0; }


/* -------------------------------------------------------------------------
   O CHÃO E O EMPILHAMENTO DAS PLACAS

   >>> rev. 05/08, 3ª rodada (pedido do Patrick) <<<
   Ele olhou a 2ª rodada e disse que "tá tudo separado em box" e que a
   primeira seção precisava ficar SOLTA. A regra nova, e ela é do sistema,
   não só desta página:

     A CENA SANGRA. A PLACA SE APOIA.

   Ou seja: quando a linguagem é CENA (foto em tela cheia), a seção vai de
   borda a borda, sem canto arredondado e sem margem. As outras três
   linguagens continuam em placa. Isso troca "sete caixas iguais" por um
   ritmo: abre solto, respira em placa, solta de novo na virada.
   ------------------------------------------------------------------------- */
body {
  background: var(--cor-fundo);
  /* sem respiro no topo: a cena começa colada no alto da tela */
  padding-block: 0 var(--esp-margem);
}
.pg-placas {
  display: flex;
  flex-direction: column;
  gap: var(--esp-margem);
}
/* a barra do topo é fixa, então todo alvo de âncora precisa desviar dela */
[id] { scroll-margin-top: var(--esp-9); }

/* as duas CENAS sangram: nem margem, nem canto, nem placa */
.pg-cena--hero,
.pg-cena--curta {
  margin-inline: 0;
  border-radius: var(--raio-0);
}
.pg-cena--hero { min-height: 100svh; }

/* -------------------------------------------------------------------------
   A CABEÇA DE PLACA. Rótulo, título e uma linha de apoio, nesta ordem e com
   este respiro, em toda seção que tem cabeça. É a regra que faz a página
   parecer uma coisa só em vez de sete blocos diferentes.
   ------------------------------------------------------------------------- */
.pg-cabeca {
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
  max-width: 46rem;
}
/* quando a cabeça divide a linha com uma peça (o carimbo de prova) */
.pg-cabeca-linha {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--esp-6);
}
.pg-cabeca .ah-lead { margin-top: calc(var(--esp-1) * -1); }
/* o corpo da seção começa depois de um respiro maior que o interno da cabeça:
   é o que separa "assunto" de "conteúdo do assunto" */
.pg-corpo { margin-top: var(--esp-7); }

/* pilha padrão de conteúdo dentro da placa */
.ah-secao--leitura > .ah-medida,
.ah-parede > .ah-medida,
.ah-placa > .ah-medida,
.ah-dobra__bloco {
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
}

/* -------------------------------------------------------------------------
   BARRA DE NAVEGAÇÃO

   >>> rev. 05/08, 3ª rodada <<< A pílula flutuante da 2ª rodada caiu. O
   Patrick a chamou de "menu recibo", e o diagnóstico é literal: um retângulo
   branco, vazio no meio, com um botão laranja pendurado na ponta direita.
   O que faz um menu não parecer recibo é ele TER CONTEÚDO. Então:

   1. os três atalhos da página entram no meio e o vazio deixa de existir;
   2. a barra encosta no topo da tela em vez de flutuar, porque agora a cena
      sangra e não existe mais placa para ela pousar em cima;
   3. dois estados: sobre a CENA ela é transparente e a foto passa por
      baixo (logo na versão clara); passada a cena, ela ganha chão de vidro
      e um filete. O estado padrão, sem JS, é o com chão, que é o legível
      em qualquer fundo.
   ------------------------------------------------------------------------- */
.pg-nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 30;
  background: var(--cor-fundo);
  border-bottom: var(--linha-fina) solid var(--cor-linha);
  transition:
    background var(--dur-padrao) var(--ease-padrao),
    border-color var(--dur-padrao) var(--ease-padrao);
}
.pg-nav__interno {
  display: flex;
  align-items: center;
  gap: var(--esp-5);
  min-height: calc(var(--esp-8) + var(--esp-2));
  /* a medida da barra é a da CENA, não a da placa: assim o logo nasce na
     mesma vertical da manchete em vez de 32px para dentro dela */
  max-width: calc(var(--largura-pagina) + var(--esp-painel) * 2);
  margin-inline: auto;
  padding-inline: var(--esp-painel);
}
/* o logo é link para o topo, então é alvo de toque: o raio-x de celular
   (mobile-scan) achou 58x32, abaixo dos 44px de altura mínima. O ar entra por
   fora, sem mexer no tamanho do desenho. */
.pg-nav__marca {
  display: flex;
  align-items: center;
  min-height: var(--esp-7);
  flex: none;
  margin-right: auto;
}
.pg-logo { height: var(--esp-6); width: auto; display: block; }
/* o par de logos: um por estado, para a tinta nunca competir com o fundo */
.pg-logo--sobre-foto { display: none; }

/* os atalhos: caixa alta miúda, a mesma voz do rótulo, sem virar botão */
.pg-nav__links { display: none; gap: var(--esp-5); }
.pg-nav__links a {
  font-family: var(--fonte-texto);
  font-size: var(--tipo-rotulo);
  font-weight: var(--peso-forte);
  letter-spacing: var(--letra-dado);
  text-transform: uppercase;
  color: var(--cor-texto-secundario);
  text-decoration: none;
  padding-block: var(--esp-2);
  border-bottom: var(--linha-grossa) solid transparent;
  transition: color var(--dur-padrao) var(--ease-padrao),
              border-color var(--dur-padrao) var(--ease-padrao);
}
.pg-nav__links a:hover {
  color: var(--cor-texto);
  border-bottom-color: var(--cor-acento);
}
.pg-nav__acao { display: none; flex: none; }

/* ESTADO 1: sobre a cena. Sem chão, sem filete, tinta clara. */
.pg-nav--sobre-foto {
  background: transparent;
  border-bottom-color: transparent;
}
.pg-nav--sobre-foto .pg-logo--sobre-foto { display: block; }
.pg-nav--sobre-foto .pg-logo--claro { display: none; }
.pg-nav--sobre-foto .pg-nav__links a { color: var(--marca-vidro); }
.pg-nav--sobre-foto .pg-nav__links a:hover { color: var(--marca-branco); }

/* -------------------------------------------------------------------------
   CENA. A foto é a placa. O conteúdo acompanha a medida da página nas telas
   largas em vez de colar na borda do monitor.
   ------------------------------------------------------------------------- */
.ah-dobra__topo,
.ah-dobra__bloco {
  width: 100%;
  max-width: var(--largura-pagina);
  margin-inline: auto;
}
/* na dobra principal quem faz o topo é a barra flutuante */
.pg-cena--hero .ah-dobra__bloco { padding-top: var(--esp-8); }
/* o enquadramento das fotos verticais: o atleta fica na faixa de cima, que é
   onde o scrim é mais fraco e a imagem precisa aparecer. Cada foto tem o seu,
   porque cada atleta está numa altura diferente do quadro. */
.pg-dobra__foto { object-position: 50% 22%; }

/* -------------------------------------------------------------------------
   O REVEZAMENTO DO HERO

   >>> rev. 05/08, 3ª rodada <<< Pedido do Patrick: "as imagens do hero têm
   que ficar mudando". Três fotos, uma por esporte, na mesma ideia que já
   rege a parede: a página passeia pelos esportes em vez de mostrar um.

   Como funciona: as três ficam empilhadas no mesmo lugar (a foto da cena já é
   absoluta) e só a opacidade muda. Ciclo de 24s, 8s por foto, 1,2s de
   travessia. O atraso NEGATIVO na primeira é o truque que evita o pisca de
   abertura: ela já entra no meio da própria entrada, ou seja, visível no
   primeiro quadro, sem fundo navy aparecendo antes.

   Sem CSS de movimento (prefers-reduced-motion) a primeira foto fica parada.
   ------------------------------------------------------------------------- */
.pg-revezar {
  opacity: 0;
  animation: pg-revezar 24s var(--ease-padrao) infinite both;
}
.pg-revezar--1 { animation-delay: -1.2s; }
.pg-revezar--2 { animation-delay: 6.8s; }
.pg-revezar--3 { animation-delay: 14.8s; }
/* cada atleta ocupa uma altura diferente do quadro vertical, então o recorte
   da faixa é medido um a um e não herdado */
.pg-revezar--2 { object-position: 50% 28%; }
.pg-revezar--3 { object-position: 50% 16%; }
@keyframes pg-revezar {
  0%     { opacity: 0; }
  5%     { opacity: 1; }
  33.33% { opacity: 1; }
  38.33% { opacity: 0; }
  100%   { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pg-revezar { animation: none; opacity: 0; }
  .pg-revezar--1 { opacity: 1; }
}
/* a segunda cena é uma virada, não uma abertura: não ocupa a tela inteira.
   >>> rev. 05/08 <<< Ela subiu de 62svh para 80svh porque, sangrando de
   borda a borda, a janela ficou larga demais para uma foto vertical: o
   recorte pegava só uma faixa de fundo e a atleta sumia atrás do scrim.
   >>> rev. 05/08, 2ª passada: o enquadramento subiu de 30% para 16%. Em 30%
   a atleta entrava decapitada, o rosto ficava acima da borda e sobrava
   tronco. Em 16% ela aparece inteira do ombro para cima e olhando para o
   lado do texto, que é o que faz a cena funcionar. <<< */
.pg-cena--curta { min-height: clamp(30rem, 80svh, 46rem); }
.pg-cena--curta .pg-dobra__foto { object-position: 50% 16%; }

.pg-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3);
  margin-top: var(--esp-2);
}
.pg-reforco {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
}
.pg-reforco::before {
  content: "";
  width: var(--esp-2);
  height: var(--esp-2);
  border-radius: var(--raio-selo);
  background: var(--cor-sucesso);
  flex: none;
}

/* A regra da .pg-prova-dobra viveu algumas horas em 06/08: a linha de nomes
   voltou para a primeira tela e o Patrick mandou tirar de novo no mesmo dia.
   Saiu do CSS junto com o HTML, para não deixar classe órfã.
   Se um dia ela voltar: filete laranja na frente, nomes sem foto e sem
   movimento, largura máxima em 46ch e a cor de texto sobre foto. */

/* -------------------------------------------------------------------------
   PROCESSO. Quatro etapas reais em régua, não grade de card.
   ------------------------------------------------------------------------- */
.pg-etapas {
  display: flex;
  flex-direction: column;
}

/* -------------------------------------------------------------------------
   PAREDE DE APROVAÇÕES

   >>> rev. 05/08, 3ª rodada <<< A barra de números e o quadro de linhas
   SAÍRAM. O pedido do Patrick foi "deixa só as fotos dos atletas e tira as
   outras informações que estão acima". Ele está certo pelo que a seção é:
   a prova aqui é o rosto, e o rosto já vem com nome, esporte e escola na
   legenda. O número e a linha de tabela repetiam a mesma informação em duas
   linguagens mais fracas e enchiam a seção de caixa dentro de caixa.

   Os três números de produto (200+ escolas, 6 pilares, 0 a 100) não foram
   levados para outro lugar porque o COMO FUNCIONA já dizia os três, nas
   etapas 01 e 03: eram repetição em caixa. A lacuna do quadro (aprovações
   anteriores e ano de entrada) virou a nota abaixo da parede.

   A ORDEM DAS FOTOS É POR ESPORTE, não por nome: tênis, futsal, vôlei,
   basquete, futsal. A parede passeia pelos esportes em vez de listar gente.
   ------------------------------------------------------------------------- */
.pg-carimbo {
  display: none;
  transform: rotate(-7deg);
  flex: none;
}
/* a parede é a prova: seis fotos grandes valem mais que seis selos numa
   fileira só. A grade é fixa porque o número de vagas é conhecido.

   >>> BUG achado na régua de 390px em 05/08 <<< Em duas colunas o card fica
   com 190px e a prova QUEBRA: "Bernardo Bensoussan" era cortado no meio,
   "João e Marcos Lobo" caía em três linhas e o convite laranja estourava a
   caixa. O nome e a escola são exatamente o que esta seção existe para
   mostrar, então no telefone ela vira UMA coluna. Duas colunas só a partir
   de 30rem, que é onde o nome mais longo cabe em uma linha. */
/* >>> rev. 06/08 <<< Ela tinha virado UMA coluna em 05/08 porque o nome do
   atleta era cortado em duas. Voltou a duas a pedido do Patrick, e agora cabe:
   a escala do telefone diminuiu nesta mesma sessão (o nome caiu de 22 para
   19px) e o nome mais longo entra em duas linhas sem estourar a caixa.
   >>> Se um nome novo voltar a cortar, é aqui que se resolve, e a saída é
   diminuir o nome na parede, não voltar para uma coluna. <<< */
.ah-parede__fichas { grid-template-columns: repeat(2, 1fr); }

/* >>> rev. 06/08 <<< O convite não é uma foto, é uma conversa: numa coluna de
   duas, no celular grande (a partir de 30rem, onde a parede vira duas), ele
   ficava com 200px e tudo quebrava, o rótulo em duas linhas, a frase em
   quatro e o botão em duas. Abaixo de 48rem ele passa a ocupar a fileira
   inteira, embaixo das fotos. No desktop volta a ser a sexta vaga da grade,
   que é onde a ideia da "vaga que sobrou" funciona. */
/* >>> rev. 06/08, 3ª volta na parede do celular <<< Duas tentativas caíram
   antes desta e o registro importa para ninguém repetir:
   1. o convite ocupando a fileira inteira: resolveu o texto espremido, mas
      tirou a peça da grade e ela deixou de ler como "a vaga que falta";
   2. a última foto ocupando a fileira junto, para tapar o buraco que sobrava:
      virou uma faixa larga no meio de retratos e quebrou o ritmo da parede.
   O que ficou, e é o pedido do Patrick: **o convite continua na grade, do lado
   do último atleta**, com a mesma altura das fotos, dizendo só que a vaga
   existe. O que não cabe numa coluna estreita (a linha de apoio e o botão)
   sai de dentro dele e vira uma faixa de ação embaixo da grade. */
/* a faixa de ação: só existe no telefone, porque no desktop o botão mora
   dentro do próprio convite. A regra base vem ANTES da media query, senão a
   ordem do arquivo faz o `display: none` ganhar do `display: flex`. */
.pg-parede__acao {
  display: none;
  flex-direction: column;
  gap: var(--esp-4);
  /* centrada, para casar com o convite logo acima, que também é centrado */
  align-items: center;
  text-align: center;
  margin-top: var(--esp-5);
}
@media (max-width: 48rem) {
  /* no telefone a peça carrega uma frase só, então o rótulo do alto sai junto
     com a linha de apoio e o botão: sobra o convite, centrado nos dois eixos.
     No desktop o rótulo fica, porque lá a peça tem a anatomia inteira. */
  .ah-ficha-foto--convite .ah-rotulo,
  .ah-ficha-foto--convite .ah-corpo,
  .ah-ficha-foto--convite .ah-botao { display: none; }
  .ah-ficha-foto--convite {
    align-items: center;
    text-align: center;
  }
  .pg-parede__acao { display: flex; }
}
/* de 30rem a 48rem a parede tem DUAS colunas, e aí o convite volta a ter a
   proporção das fotos: é o que faz ele ocupar a vaga da fileira em vez de
   virar uma tarja curta ao lado de um retrato alto. */
@media (min-width: 30rem) and (max-width: 48rem) {
  .ah-ficha-foto--convite { aspect-ratio: var(--img-retrato); }
}

/* A SEXTA VAGA É O CONVITE. Era um selo de lacuna vazio.

   >>> rev. 05/08, 2ª passada <<< A primeira montagem copiou a anatomia da
   ficha de foto: tudo empilhado no pé da peça, porque numa foto a legenda
   mora lá embaixo. Sem foto atrás, isso deixou dois terços de laranja vazio
   em cima e o texto amontoado no rodapé. O Patrick reprovou, com razão.

   A correção: o convite não é legenda, é uma PEÇA DE CONVERSA. Então ele
   ocupa a altura de propósito, com o rótulo no alto, a frase no meio e o
   botão no pé. E o botão virou botão de verdade (a forma que a marca usa
   para ação) no lugar do link com setinha, que lia como legenda inacabada. */
.ah-ficha-foto--convite {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--esp-5);
  padding: var(--esp-6);
  background: var(--cor-fundo);
  color: var(--cor-texto);
  text-decoration: none;
  transition: filter var(--dur-padrao) var(--ease-padrao);
}
.ah-ficha-foto--convite:hover { filter: brightness(1.05); }
.ah-ficha-foto--convite::after { content: none; }
/* o miolo: a frase e a linha de apoio andam juntas, coladas no botão */
.pg-convite__miolo {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  margin-top: auto;
}
/* a frase é a manchete da peça, mas em escala de subtítulo: aqui a força já
   vem da superfície laranja, e manchete grande em caixa pequena vira grito */
/* o botão acompanha o próprio texto: esticado na coluna inteira ele quebra
   em duas linhas e vira uma barra, não um botão */
.ah-ficha-foto--convite .ah-botao { align-self: flex-start; }
.ah-ficha-foto--convite .pg-convite__frase {
  font-family: var(--fonte-display);
  font-weight: var(--peso-manchete);
  text-transform: uppercase;
  font-size: var(--tipo-subtitulo);
  line-height: var(--linha-compacta);
  letter-spacing: var(--letra-titulo);
  color: var(--cor-texto);
  margin: 0;
  text-wrap: balance;
}
/* >>> rev. 05/08, 3ª passada <<< A grade e a nota entraram DENTRO do
   `.ah-medida` da cabeça. Antes eram irmãs da medida, penduradas direto na
   placa, então em tela larga elas começavam no recuo da placa enquanto o
   título e o texto começavam na medida centrada: 72px de diferença na coluna
   da esquerda em 1440px. O Patrick viu isso no computador. Se algum dia a
   parede precisar sangrar mais que o texto, isso volta a ser uma decisão, não
   um acidente. */
.pg-parede__grupo {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  margin-top: var(--esp-6);
  max-width: var(--largura-texto);
}
/* a nota de lacuna da parede: fora da grade, alinhada com ela, discreta e
   declarada. */
.pg-parede__nota {
  max-width: var(--largura-texto);
  margin: var(--esp-5) 0 0;
}
/* o selo corre na linha do texto: flex quebraria em duas linhas e a nota
   discreta viraria um bloco */
.pg-parede__nota .ah-selo-lacuna {
  margin-right: var(--esp-3);
  vertical-align: middle;
}

/* -------------------------------------------------------------------------
   DEPOIMENTOS EM VÍDEO.

   >>> rev. 06/08 <<< O Patrick apontou duas coisas: o vídeo estava "seco",
   sem identificação nenhuma, e dois players lado a lado não fazem seção.
   Ele mandou assistir, e o que faltava estava dentro do próprio vídeo: os
   dois são ATLETAS na SPIRE Academy (ela de futebol, ele de basquete), e
   cada um diz uma frase que vale como prova. Transcrição por whisper,
   moletom "SPIRE BASKETBALL" e o plano aéreo "The SPIRE" conferidos no olho.

   A forma virou faixa de transmissão: a peça é vídeo mais TARJA navy colada
   no pé (nome, esporte, escola), e ao lado a fala grande com os pontos que a
   pessoa levanta. As duas faixas se espelham, para a seção ter ritmo em vez
   de duas colunas iguais.
   ------------------------------------------------------------------------- */
.pg-depos {
  display: flex;
  flex-direction: column;
  gap: var(--esp-7);
}
.pg-depo {
  display: grid;
  gap: var(--esp-5);
  align-items: center;
}
/* vídeo e tarja são um objeto só, com o raio de foto de prova. 19rem é a
   medida que o desenho previa: solto na coluna inteira, um vídeo vertical
   vira um retângulo de 700px e pesa mais que a prova da parede. */
.pg-depo__peca {
  overflow: hidden;
  width: 100%;
  max-width: 19rem;
  margin: 0 auto;
  border-radius: var(--raio-g);
  background: var(--marca-navy-fundo);
}
/* os arquivos são 720x960, cortados em 3:4 de propósito, que é o
   `--img-retrato` do sistema: moldura e vídeo casam sem tarja preta. */
.pg-depo__tela {
  position: relative;
  aspect-ratio: var(--img-retrato);
}
.pg-depo__tela video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* A TARJA. Fica FORA do quadro, colada no pé, e não sobreposta: a barra de
   controles nativa nasce exatamente ali quando o vídeo toca. */
.pg-tarja {
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
  padding: var(--esp-4);
  background: var(--cor-fundo);
  color: var(--cor-texto);
}
.pg-tarja__nome {
  font-family: var(--fonte-display);
  font-weight: var(--peso-manchete);
  text-transform: uppercase;
  font-size: var(--tipo-subtitulo);
  line-height: var(--linha-compacta);
  letter-spacing: var(--letra-titulo);
  margin: 0;
}
.pg-tarja__linha {
  font-family: var(--fonte-texto);
  font-size: var(--tipo-rotulo);
  font-weight: var(--peso-manchete);
  letter-spacing: var(--letra-dado);
  text-transform: uppercase;
  color: var(--cor-realce-texto);
  margin: 0;
}
.pg-depo__texto {
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
  align-items: flex-start;
}
/* a fala é o objeto da seção, então ela entra na escala de subtítulo, com a
   régua fina do depoimento do sistema em vez de aspas decorativas */
.pg-depo__fala {
  font-family: var(--fonte-display);
  font-weight: var(--peso-medio);
  font-size: var(--tipo-subtitulo);
  line-height: var(--linha-compacta);
  letter-spacing: var(--letra-titulo);
  color: var(--cor-texto);
  border-left: var(--linha-grossa) solid var(--cor-acento);
  padding-left: var(--esp-4);
  margin: 0;
}
.pg-depo__marcas {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pg-depo__marcas li {
  position: relative;
  padding-left: var(--esp-4);
  font-size: var(--tipo-corpo);
  color: var(--cor-texto-secundario);
}
.pg-depo__marcas li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: var(--esp-2);
  height: var(--linha-grossa);
  background: var(--cor-acento);
}
.pg-depo__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-3);
}

/* -------------------------------------------------------------------------
   BLOCO DE MARCA. A força vem da superfície, então o texto só se organiza.
   ------------------------------------------------------------------------- */
.pg-bloco__texto {
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
}

/* -------------------------------------------------------------------------
   TABELA DE COMPARAÇÃO. Rolagem própria no telefone, sem estourar a página.
   ------------------------------------------------------------------------- */
.pg-tabela-rolagem {
  overflow-x: auto;
  border-radius: var(--raio-g);
  background: var(--cor-fundo);
}
.pg-tabela-rolagem .ah-tabela { min-width: 34rem; }
.pg-tabela__legenda {
  text-align: left;
  padding: var(--esp-4) var(--esp-5);
}
.ah-tabela th,
.ah-tabela td { padding-inline: var(--esp-5); }
.pg-nota-tabela {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-3);
  margin-top: var(--esp-5);
}

/* -------------------------------------------------------------------------
   QUEM CONDUZ

   >>> rev. 05/08, 2ª passada <<< O Patrick reprovou a seção e estava certa a
   reclamação: o rosto do Felipe era uma miniatura dentro de uma fichinha
   presa no alto de uma coluna vazia, e o resto da coluna era ocupado por
   dois selos de lacuna pedindo texto. Ou seja, a seção que promete "do outro
   lado da conta tem gente" mostrava um wireframe.

   Duas correções: o retrato virou RETRATO, do tamanho da coluna, com nome e
   cargo por cima da foto no pé; e o texto deixou de ser placeholder, com o
   conteúdo real vindo do site do próprio cliente. A lacuna que sobrou é uma
   só, e é a verdadeira: falta o número.
   ------------------------------------------------------------------------- */
.pg-conduz {
  display: grid;
  gap: var(--esp-5);
  align-items: start;
}
.pg-conduz__texto {
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
  align-items: flex-start;
}
.pg-conduz__lista { margin-block: var(--esp-1); }

.pg-retrato {
  position: relative;
  overflow: hidden;
  margin: 0;
  border-radius: var(--raio-g);
  aspect-ratio: var(--img-retrato);
  background: var(--marca-navy-fundo);
}
.pg-retrato img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* o Felipe está na metade de cima do quadro */
  object-position: 50% 18%;
}
.pg-retrato figcaption {
  position: absolute;
  z-index: 1;
  inset-inline: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
  padding: var(--esp-5);
  color: var(--cor-sobre-foto);
  background: var(--scrim-base);
}
.pg-retrato__nome {
  font-family: var(--fonte-display);
  font-weight: var(--peso-manchete);
  text-transform: uppercase;
  font-size: var(--tipo-subtitulo);
  line-height: var(--linha-compacta);
  letter-spacing: var(--letra-titulo);
  margin: 0;
}
/* a FAQ é outro assunto dentro da mesma placa: ganha o respiro de uma placa
   nova, com um filete no lugar da borda */
.pg-duvidas {
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
  margin-top: var(--esp-9);
  padding-top: var(--esp-7);
  border-top: var(--linha-fina) solid var(--cor-linha);
}

/* -------------------------------------------------------------------------
   OFERTA E FECHO
   ------------------------------------------------------------------------- */
/* >>> rev. 06/08 <<< era `align-items: start`, o que fazia sentido quando os
   dois cards só tinham texto. Com o botão dentro de cada plano, as duas peças
   precisam ter a mesma altura e a ação precisa pousar na mesma linha, senão
   um botão flutua no meio da coluna e o outro no pé. */
.pg-planos {
  display: grid;
  gap: var(--esp-4);
  align-items: stretch;
}
/* a ação desce para o pé do card, seja qual for o tamanho da lista */
.pg-plano__acao { margin-top: auto; }
.pg-plano__preco {
  display: flex;
  align-items: baseline;
  gap: var(--esp-2);
  flex-wrap: wrap;
}
.pg-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
}
.pg-lista li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--esp-3);
  align-items: baseline;
}
/* marcador quadrado, não filete deitado: filete deitado lê como travessão.
   >>> rev. 06/08 <<< era `align-self: center`, que centraliza o ponto na
   ALTURA DO ITEM: com duas ou três linhas ele descia para o meio do parágrafo
   e parecia solto. Agora ele mora na primeira linha, deslocado meia linha para
   baixo para ficar na altura da letra. Ficou visível quando a escala do
   telefone diminuiu. */
.pg-lista li::before {
  content: "";
  width: var(--esp-2);
  height: var(--esp-2);
  border-radius: var(--raio-selo);
  background: var(--cor-acento);
  align-self: start;
  margin-top: 0.57em;
}
/* A JANELA (rev. 06/08). A urgência da página, e ela é verdadeira: a
   candidatura tem faixa de idade e fecha. Painel recuado dentro da placa, com
   o mesmo raio dos cards e o filete laranja que a página já usa para marcar
   fala (a régua do depoimento e a prova da dobra). Não é caixa de alerta:
   alerta em página de venda lê como pressão, e aqui o fato basta. */
.pg-janela {
  padding: var(--esp-5);
  border-radius: var(--raio-g);
  border-left: var(--linha-grossa) solid var(--cor-acento);
  background: var(--cor-fundo-recuado);
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
}
/* a frase de prazo é o assunto da peça: escala de destaque e a largura toda,
   porque ela é curta o bastante para não virar linha longa de leitura */
.pg-janela__frase {
  font-family: var(--fonte-display);
  font-weight: var(--peso-forte);
  font-size: var(--tipo-destaque);
  line-height: var(--linha-compacta);
  letter-spacing: var(--letra-titulo);
  color: var(--cor-texto);
  margin: 0;
}
/* os dois lados da conta. Em coluna única o painel ficava com metade da caixa
   vazia à direita, porque o parágrafo parava na medida de leitura. */
.pg-janela__par {
  display: grid;
  gap: var(--esp-5);
  padding-top: var(--esp-4);
  border-top: var(--linha-fina) solid var(--cor-linha);
}
.pg-janela__lado {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
}

/* O FECHO SEM FORMULÁRIO (rev. 06/08). O campo de e-mail saiu das duas
   variantes: o botão da página inteira promete começar, e um campo de e-mail
   é outra mecânica. O que sobrou é a ação e uma linha de apoio.
   As regras de .pg-form e .pg-form-linha foram removidas junto, porque não
   existe mais formulário nesta página. Se voltar, elas vivem no design
   system (.ah-form e .ah-campo), não aqui. */
.pg-plano__acao { align-self: flex-start; }
.pg-fecho__acao {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--esp-3);
}
.pg-fecho__nota { max-width: var(--largura-texto); }

/* -------------------------------------------------------------------------
   RODAPÉ. Fora da placa: ele é a assinatura do chão, não um bloco.
   ------------------------------------------------------------------------- */
.pg-rodape {
  padding-block: var(--esp-7) var(--esp-5);
}
.pg-rodape__interno {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--esp-4);
  align-items: center;
}

/* -------------------------------------------------------------------------
   BARRA FIXA DE AÇÃO NO TELEFONE. Ponto de CTA sempre à mão.
   ------------------------------------------------------------------------- */
/* >>> rev. 06/08 <<< Ela flutuava a uma margem inteira do pé da tela e era uma
   pílula (`--raio-botao`, 999px), o que a fazia competir com o próprio botão
   que carrega dentro. O Patrick pediu ela mais para baixo e só levemente
   arredondada: agora encosta no pé, com a folga mínima, e usa o raio de card.
   O `safe-area-inset-bottom` é o que impede a barra de ficar embaixo da faixa
   de gestos do iPhone quando a folga é pequena. */
.pg-barra-fixa {
  position: fixed;
  inset-inline: var(--esp-2);
  bottom: calc(var(--esp-2) + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-3) var(--esp-3) var(--esp-4);
  border-radius: var(--raio-m);
  background: var(--cor-fundo);
  border: var(--linha-fina) solid var(--cor-linha);
}
/* enquanto a primeira cena está na tela a barra não existe: o hero já tem os
   próprios botões. Ela entra deslizando de baixo quando a cena sai. */
.pg-barra-fixa {
  transition: transform var(--dur-entrada) var(--ease-padrao),
              opacity var(--dur-padrao) var(--ease-padrao);
}
.pg-barra-fixa--escondida {
  transform: translateY(calc(100% + var(--esp-5)));
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .pg-barra-fixa { transition: none; }
}
.pg-barra-fixa__oferta {
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
  min-width: 0;
}

/* -------------------------------------------------------------------------
   UTILITÁRIOS
   ------------------------------------------------------------------------- */
.pg-nota-lacuna {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  align-items: flex-start;
  padding: var(--esp-5);
  border-radius: var(--raio-g);
  background: var(--cor-fundo-recuado);
}
.pg-pular {
  position: absolute;
  left: -100vw;
}
.pg-pular:focus {
  position: static;
  display: inline-flex;
  margin: var(--esp-3);
}

/* -------------------------------------------------------------------------
   RESPONSIVO
   ------------------------------------------------------------------------- */
@media (max-width: 47.99rem) {
  /* >>> A ESCALA DE TEXTO DO TELEFONE (rev. 06/08) <<< O Patrick leu a página
     no celular e achou o corpo e os subtítulos grandes demais. A correção é
     nos TOKENS e não peça por peça: assim tudo que herda a escala (lead,
     corpo, apoio, miúdo, subtítulo e as listas) desce junto e o sistema
     continua sendo um só. A manchete e o título ficam como estão, porque ele
     disse que o título está certo, e eles já são clamp com mínimo próprio.
     O corpo para em 1rem, que é o piso de leitura confortável. */
  :root {
    --tipo-subtitulo: 1.1875rem;  /* era 1.375  (22px -> 19px) */
    --tipo-destaque: 1.0625rem;   /* era 1.1875 (19px -> 17px) */
    --tipo-corpo: 1rem;           /* era 1.0625 (17px -> 16px) */
    --tipo-apoio: 0.8125rem;      /* era 0.875  (14px -> 13px) */
    --tipo-miudo: 0.75rem;        /* era 0.8125 (13px -> 12px) */
  }

  /* a barra fixa do telefone não pode cobrir o fim da página. A altura real
     dela é ~90px mais a margem de baixo, então 6rem deixava a última linha do
     rodapé encostando nela. */
  /* rev. 06/08: a barra encolheu de ~106px para 82px (contando a folga de
     baixo), porque desceu e o texto dela diminuiu junto com a escala. */
  body { padding-bottom: calc(var(--esp-8) + var(--esp-6)); }

  /* >>> BUG achado na régua de 390px em 05/08 <<< O `padding-bottom` acima
     resolve o FIM da página, mas a barra é `fixed`: ela flutua sobre o que
     estiver embaixo dela em qualquer altura de rolagem. Na CENA, cujo bloco
     de texto encosta no pé (`margin-top: auto`), ela estava cobrindo o botão
     secundário do hero inteiro. Cada cena reserva o espaço dela, com folga
     para a altura real da barra (duas linhas de texto mais o botão). */
  .ah-dobra { padding-bottom: calc(var(--esp-8) + var(--esp-5)); }
  /* >>> rev. 06/08 <<< o HERO não reserva mais esse espaço, porque a barra
     fixa só aparece depois dele. O bloco de texto tem `margin-top: auto`, então
     devolver o espaço faz o conteúdo descer, que foi o pedido do Patrick. A
     segunda cena continua reservando: lá a barra existe. */
  .pg-cena--hero { padding-bottom: var(--esp-6); }

  /* >>> rev. 06/08 <<< Esta regra escondia a linha de reforço do hero no
     telefone, e a justificativa era que a barra fixa já dizia a mesma coisa na
     mesma tela. **A justificativa caiu**: a barra agora só aparece depois da
     cena, então sem esta linha a primeira tela ficaria sem preço e sem o "sem
     cartão". Ela volta.
     .pg-cena--hero .pg-reforco { display: none; }  <- não fazer */

  /* >>> BUG achado na régua de 390px em 05/08 <<< A tabela tinha 34rem de
     largura mínima e rolava para o lado dentro do próprio painel. Funciona,
     mas o que o pai vê é uma coluna "Sim" cortada ao meio, que lê como
     página quebrada, não como "arraste". A tabela é curta o bastante para
     caber: sem largura mínima e com o recuo interno menor, ela entra
     inteira e a comparação fica legível de primeira. */
  /* >>> rev. 06/08, achado no passe de celular <<< 6rem de margem mais 3rem de
     recuo entre a lista do "quem conduz" e a FAQ davam quase uma tela inteira
     de branco no telefone. O respiro de separar dois assuntos continua, na
     medida de baixo da escala. */
  .pg-duvidas { margin-top: var(--esp-7); padding-top: var(--esp-6); }

  /* >>> rev. 06/08, achado no passe de celular <<< O convite herda o 3/4 da
     ficha de foto, que existe para a foto do atleta. Sem foto atrás, numa
     coluna que no telefone ocupa a largura toda, sobrava um terço de laranja
     vazio acima do rótulo. Aqui ele passa a ter a altura do próprio conteúdo.
     No desktop nada muda: lá ele divide fileira com as fotos e o 3/4 é o que
     mantém a grade alinhada. */
  /* o convite fica na grade, com a mesma altura das fotos: é isso que faz ele
     ler como a vaga vazia da fileira. O recuo cai, porque a coluna é estreita.
     Com só duas peças dentro, o `space-between` do desktop abria um vão no
     meio do laranja: aqui elas ficam juntas, centradas na altura. */
  .ah-ficha-foto--convite {
    gap: var(--esp-3);
    padding: var(--esp-4);
    justify-content: center;
    /* em UMA coluna a peça é larga: o 3/4 daria 430px de altura para duas
       linhas de texto, e o laranja vazio volta. Aqui ela tem a altura do
       próprio conteúdo. */
    aspect-ratio: auto;
  }
  .ah-ficha-foto--convite .pg-convite__miolo { margin-top: 0; }

  .pg-tabela-rolagem .ah-tabela { min-width: 0; }
  /* >>> rev. 06/08 <<< o recuo de esp-3 ainda deixava a tabela em 336px numa
     caixa de 318px, e o que aparecia era a coluna ASSINATURA cortada na borda,
     que é o mesmo defeito de 05/08 voltando por 18px. Medido, não estimado. */
  .ah-tabela th,
  .ah-tabela td { padding-inline: var(--esp-2); }
  .pg-tabela__legenda { padding-inline: var(--esp-2); }
  /* o tracking de rótulo (0,16em) é o que fazia "ASSINATURA" estourar a
     última coluna. Na régua pequena ele cai para o tracking de dado. */
  .ah-tabela thead th { letter-spacing: var(--letra-dado); }
}

@media (min-width: 48rem) {
  .pg-barra-fixa { display: none; }
  .pg-nav__acao { display: inline-flex; }
  .pg-nav__links { display: flex; }
  .pg-carimbo { display: block; }
  .ah-parede__fichas { grid-template-columns: repeat(3, 1fr); gap: var(--esp-4); }
  /* a faixa de depoimento: peça de vídeo de um lado, fala do outro, e a
     segunda espelha a primeira. É o que troca "dois players iguais" por
     ritmo dentro da mesma seção. */
  .pg-depo { grid-template-columns: 19rem 1fr; gap: var(--esp-7); }
  .pg-depo--espelho { grid-template-columns: 1fr 19rem; }
  .pg-depo--espelho .pg-depo__peca { grid-column: 2; grid-row: 1; }
  .pg-depo--espelho .pg-depo__texto { grid-column: 1; grid-row: 1; }
  .pg-conduz { grid-template-columns: 0.85fr 1.15fr; gap: var(--esp-7); }
  .pg-planos { grid-template-columns: repeat(2, 1fr); gap: var(--esp-5); }
  .pg-janela { padding: var(--esp-6); }
  .pg-janela__par { grid-template-columns: repeat(2, 1fr); gap: var(--esp-7); }
  .ah-secao--leitura > .ah-medida,
  .ah-parede > .ah-medida,
  .ah-placa > .ah-medida { gap: var(--esp-5); }
}