/* =========================================================================
   >>> CÓPIA DE 04/08/2026 do design-system (direção "Transmissão"). <<<
   NÃO É A FONTE DA VERDADE: ela é ../../design-system/tokens.css e
   ../../design-system/componentes/componentes.css. Editar lá e copiar de novo.
   Única diferença permitida nesta cópia: os caminhos de url() em tokens.css,
   que apontam para assets/ desta pasta em vez de ../apresentacao e ../grafismos.
   ========================================================================= */
/* =========================================================================
   Athlete's Hub, componentes
   Direção "TRANSMISSÃO" (rev. 04/08/2026). Consome design-system/tokens.css.
   O que a revisão mudou está marcado com >>> rev. 04/08 <<<.
   HTML + CSS puro, stack-agnostic. Nenhum valor mágico: tudo por token.
   Mobile-first. Todo componente funciona nos quatro contextos sem override.
   ========================================================================= */

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

body {
  margin: 0;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-texto);
  font-size: var(--tipo-corpo);
  line-height: var(--linha-corpo);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

/* -------------------------------------------------------------------------
   SUPERFÍCIE E LAYOUT
   ------------------------------------------------------------------------- */
.ah-superficie {
  background: var(--cor-fundo);
  color: var(--cor-texto);
}
.ah-medida {
  max-width: var(--largura-pagina);
  margin-inline: auto;
  padding-inline: var(--esp-margem);
}
.ah-secao {
  padding-block: var(--esp-secao);
}

/* -------------------------------------------------------------------------
   A PLACA   >>> rev. 04/08, 2ª rodada, pedido do Patrick <<<

   A seção deixou de ser uma faixa colada nas bordas da tela e virou uma
   PLACA: um retângulo de canto arredondado apoiado no chão da página, com
   respiro em volta. É a gramática das duas referências que ele mandou
   (unboundxinc.com e madewithgsap.com) e é o que organiza a leitura: cada
   bloco vira um objeto com começo e fim, em vez de faixas empilhadas.

   Três consequências, e as três importam:
   1. o recuo interno passa a ser --esp-painel, não --esp-margem, porque o
      canto arredondado precisa de mais ar do que a borda reta precisava;
   2. .ah-medida dentro de uma placa não repete o recuo (senão soma duas
      vezes e a coluna de texto encolhe);
   3. a placa recorta o que vaza (foto, marca d'água, esteira), então
      overflow: hidden é parte do componente, não decoração.
   ------------------------------------------------------------------------- */
.ah-placa,
.ah-dobra,
.ah-secao--leitura,
.ah-parede,
.ah-bloco {
  position: relative;
  overflow: hidden;
  border-radius: var(--raio-painel);
  margin-inline: var(--esp-margem);
  padding-inline: var(--esp-painel);
}
.ah-placa > .ah-medida,
.ah-dobra > .ah-medida,
.ah-secao--leitura > .ah-medida,
.ah-parede > .ah-medida,
.ah-bloco > .ah-medida { padding-inline: 0; }

/* placa neutra, para o conteúdo que não é uma das quatro linguagens
   (o fecho de oferta, por exemplo, que o CONTRATO manda no navy) */
.ah-placa {
  background: var(--cor-fundo);
  color: var(--cor-texto);
  padding-block: var(--esp-secao);
}
.ah-coluna-texto { max-width: var(--largura-texto); }

/* -------------------------------------------------------------------------
   AS DUAS VOZES EM CAIXA ALTA
   A distinção não vem da caixa (as duas são caixa alta). Vem de:
   postura (reta contra itálica), tracking (negativo contra positivo),
   escala (3x a 5x), peso, e a régua, que só o rótulo carrega.
   ------------------------------------------------------------------------- */

/* VOZ 1, manchete: reta, 800, tracking negativo, sem régua, sem itálico */
.ah-manchete,
.ah-titulo {
  font-family: var(--fonte-display);
  font-style: normal;
  font-weight: var(--peso-manchete);
  text-transform: uppercase;
  line-height: var(--linha-manchete);
  letter-spacing: var(--letra-manchete);
  color: var(--cor-texto);
  margin: 0;
  text-wrap: balance;
}
.ah-manchete { font-size: var(--tipo-manchete); }
.ah-titulo {
  font-size: var(--tipo-titulo);
  letter-spacing: var(--letra-titulo);
  line-height: var(--linha-titulo);
}
.ah-subtitulo {
  font-family: var(--fonte-display);
  font-style: normal;
  font-weight: var(--peso-forte);
  font-size: var(--tipo-subtitulo);
  line-height: var(--linha-compacta);
  letter-spacing: var(--letra-titulo);
  text-transform: none;
  color: var(--cor-texto);
  margin: 0;
}

/* VOZ 2, rótulo: 800, tracking positivo, miúdo, com régua.
   >>> rev. 04/08 <<< o rótulo saiu da display e voltou para a fonte de
   texto, em roman. Com duas famílias no sistema, a separação entre as vozes
   já é feita pela FAMÍLIA; o itálico sintético da display era ruído, e a
   Altone não tem corte itálico desenhado. */
.ah-rotulo {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: var(--esp-2);
  font-family: var(--fonte-texto);
  font-style: normal;
  font-weight: var(--peso-manchete);
  font-size: var(--tipo-rotulo);
  line-height: var(--linha-rotulo);
  letter-spacing: var(--letra-rotulo);
  text-transform: uppercase;
  color: var(--cor-acento-texto);
  margin: 0;
}
/* a régua é obrigatória: é o segundo sinal que separa rótulo de manchete */
.ah-rotulo::before {
  content: "";
  width: var(--esp-5);
  height: var(--regua-altura);
  background: var(--cor-acento);
  flex: none;
}
.ah-rotulo--sem-regua::before { display: none; }
.ah-rotulo--neutro { color: var(--cor-texto-secundario); }
.ah-rotulo--neutro::before { background: var(--cor-regua); }

/* texto corrente */
.ah-lead {
  font-size: var(--tipo-destaque);
  color: var(--cor-texto-secundario);
  max-width: var(--largura-texto);
  margin: 0;
}
.ah-corpo { font-size: var(--tipo-corpo); color: var(--cor-texto); margin: 0; }
.ah-apoio { font-size: var(--tipo-apoio); color: var(--cor-texto-secundario); margin: 0; }
.ah-miudo { font-size: var(--tipo-miudo); color: var(--cor-texto-secundario); margin: 0; }

/* dado: caixa alta reta MIÚDA nunca existe sozinha. Dado usa tracking de
   dado e peso médio, e vem sempre colado a um valor. */
.ah-dado {
  font-family: var(--fonte-display);
  font-weight: var(--peso-medio);
  font-size: var(--tipo-miudo);
  letter-spacing: var(--letra-dado);
  text-transform: uppercase;
  color: var(--cor-texto-secundario);
  font-variant-numeric: tabular-nums;
}
.ah-numero {
  font-family: var(--fonte-display);
  font-weight: var(--peso-manchete);
  font-size: var(--tipo-numero);
  line-height: var(--linha-manchete);
  letter-spacing: var(--letra-manchete);
  font-variant-numeric: tabular-nums;
  color: var(--cor-texto);
}
.ah-indice {
  font-family: var(--fonte-display);
  font-weight: var(--peso-forte);
  font-size: var(--tipo-indice);
  font-variant-numeric: tabular-nums;
  color: var(--cor-texto-suave);
  letter-spacing: var(--letra-dado);
}

/* MARCA-TEXTO: é assim que o laranja entra na manchete do chão claro,
   já que laranja como texto reprova (2,60:1). O bloco é laranja, a
   palavra é tinta quente: 6,97:1. No navy o realce não é necessário,
   lá o laranja carrega texto sozinho (--ah-palavra-acento). */
.ah-realce {
  background: var(--realce-bg);
  color: var(--realce-tinta);
  padding-inline: var(--esp-2);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
/* >>> rev. 04/08 <<< a palavra de destaque da manchete agora usa o laranja
   de texto do contexto: o laranja escurecido no chão claro, o laranja puro
   no navy. Antes ela dependia do bloco de marca-texto. É o que a marca já
   faz nos posts. O .ah-realce continua existindo para quando a palavra
   precisar de mais peso que cor. */
.ah-palavra-acento { color: var(--cor-realce-texto); }

/* -------------------------------------------------------------------------
   FOCO. Anel de 2px na cor de foco do contexto + halo de 2px na cor do
   fundo do contexto. Resolve o bug medido no site (halo do tema claro
   aplicado sobre fundo escuro) e sobrevive sobre foto.
   ------------------------------------------------------------------------- */
/* rev. 04/08, 2ª rodada: o anel não impõe mais raio próprio. Com o botão em
   pílula, forçar --raio-p aqui deixava o foco quadrado em cima de uma peça
   redonda. Agora o anel acompanha a forma da peça. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--linha-grossa) solid var(--cor-foco);
  outline-offset: var(--linha-grossa);
  box-shadow: 0 0 0 var(--linha-grossa) var(--cor-foco-halo);
}

/* -------------------------------------------------------------------------
   BOTÃO
   ------------------------------------------------------------------------- */
.ah-botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  min-height: var(--esp-7);
  padding: var(--esp-3) var(--esp-6);
  border: var(--linha-fina) solid transparent;
  /* >>> rev. 04/08, 2ª rodada <<< o botão virou pílula, como nas duas
     referências que o Patrick mandou. Ele não é mais a única peça
     arredondada: agora todo o sistema tem canto redondo, em escala. */
  border-radius: var(--botao-raio);
  font-family: var(--fonte-display);
  font-weight: var(--peso-forte);
  font-size: var(--tipo-apoio);
  letter-spacing: var(--letra-rotulo);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-padrao) var(--ease-padrao),
              color var(--dur-padrao) var(--ease-padrao),
              border-color var(--dur-padrao) var(--ease-padrao),
              transform var(--dur-rapida) var(--ease-padrao);
}
.ah-botao:active { transform: translateY(var(--linha-fina)); }
.ah-botao[disabled], .ah-botao--desabilitado {
  opacity: 0.45;
  pointer-events: none;
  cursor: not-allowed;
}

.ah-botao--primario {
  background: var(--botao-bg);
  color: var(--botao-texto);
  border-color: var(--botao-bg);
}
.ah-botao--primario:hover { background: var(--botao-bg-ativo); border-color: var(--botao-bg-ativo); }

.ah-botao--secundario {
  background: var(--botao-2-bg);
  color: var(--botao-2-texto);
  border-color: var(--botao-2-linha);
}
.ah-botao--secundario:hover { background: var(--botao-2-bg-ativo); }

.ah-botao--texto {
  background: transparent;
  color: var(--cor-texto);
  border-color: transparent;
  padding-inline: var(--esp-2);
  text-decoration: underline;
  text-underline-offset: var(--esp-1);
  text-decoration-color: var(--cor-acento);
  text-decoration-thickness: var(--linha-grossa);
}
.ah-botao--texto:hover { color: var(--cor-texto-secundario); }

/* -------------------------------------------------------------------------
   CARD. Documento, não bolha: canto reto, filete, sem sombra difusa.
   ------------------------------------------------------------------------- */
.ah-card {
  background: var(--card-bg);
  color: var(--cor-texto);
  border: var(--linha-fina) solid var(--card-linha);
  border-radius: var(--raio-g);
  padding: var(--esp-5);
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
}
.ah-card--destacado { box-shadow: var(--sombra); }

/* -------------------------------------------------------------------------
   ETIQUETA. A "pill" da marca, com canto reto em vez de raio total.
   ------------------------------------------------------------------------- */
.ah-etiqueta {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-1) var(--esp-3);
  background: var(--etiqueta-bg);
  color: var(--etiqueta-texto);
  border: var(--linha-fina) solid var(--etiqueta-linha);
  border-radius: var(--raio-p);
  font-family: var(--fonte-display);
  font-style: italic;
  font-weight: var(--peso-forte);
  font-size: var(--tipo-rotulo);
  letter-spacing: var(--letra-rotulo);
  text-transform: uppercase;
  line-height: var(--linha-rotulo);
}
.ah-etiqueta--vazada {
  background: transparent;
  color: var(--cor-texto);
  border-color: var(--cor-linha-forte);
}

/* -------------------------------------------------------------------------
   SELO TRACEJADO DE LACUNA. A trava de verdade virando elemento visual.
   Onde falta insumo do cliente, o sistema declara a falta. Nunca inventa
   dado, nunca deixa contorno vazio sem rótulo.
   ------------------------------------------------------------------------- */
.ah-selo-lacuna {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-1) var(--esp-3);
  border: var(--linha-fina) dashed var(--selo-lacuna-linha);
  border-radius: var(--raio-p);
  color: var(--selo-lacuna-texto);
  background: transparent;
  font-family: var(--fonte-display);
  font-style: italic;
  font-weight: var(--peso-forte);
  font-size: var(--tipo-rotulo);
  letter-spacing: var(--letra-rotulo);
  text-transform: uppercase;
  line-height: var(--linha-rotulo);
}

/* -------------------------------------------------------------------------
   CABEÇALHO DE SEÇÃO EM DUAS PONTAS. Rótulo à esquerda, nota editorial à
   direita, régua fina cruzando embaixo. Detalhe autoral da proposta
   aprovada; é o que dá ritmo editorial à página inteira.
   ------------------------------------------------------------------------- */
.ah-cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--esp-3);
  padding-bottom: var(--esp-3);
  border-bottom: var(--regua-altura) solid var(--cor-regua);
  margin-bottom: var(--esp-6);
}
.ah-cabecalho__nota {
  font-size: var(--tipo-apoio);
  color: var(--cor-texto-secundario);
}

/* -------------------------------------------------------------------------
   ASSINATURA VISUAL: A FICHA DE ATLETA COM CARIMBO
   Retrato recortado, nome, esporte e ano em voz de rótulo, escola em
   destaque, e o carimbo de entrada da marca marcando o status.
   O carimbo é o vetor real do Adesivos.ai, em duas camadas de máscara
   (tinta e acento) pintadas por token, então ele vive nos quatro contextos.
   ------------------------------------------------------------------------- */
.ah-ficha {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--esp-4);
  align-items: stretch;
  background: var(--ficha-bg);
  border: var(--linha-fina) solid var(--ficha-linha);
  border-radius: var(--raio-g);
  padding: var(--esp-4);
  max-width: var(--largura-ficha);
  overflow: hidden;
}
.ah-ficha__retrato {
  width: var(--esp-8);
  aspect-ratio: var(--img-retrato);
  border-radius: var(--raio-p);
  overflow: hidden;
  background: var(--cor-fundo-recuado);
  position: relative;
  flex: none;
}
.ah-ficha__retrato img { width: 100%; height: 100%; object-fit: cover; }

/* retrato ainda não enviado: o lugar é preenchido com o grafismo da própria
   marca (a letra H do lettering), nunca deixado como contorno vazio */
.ah-ficha__retrato--lacuna::before {
  content: "";
  position: absolute;
  inset: calc(var(--esp-1) * -2);
  background: var(--cor-texto);
  opacity: 0.14;
  -webkit-mask-image: var(--grafismo-letra-h);
  mask-image: var(--grafismo-letra-h);
  -webkit-mask-size: 150%;
  mask-size: 150%;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.ah-ficha__dados {
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
  justify-content: center;
  min-width: 0;
}
.ah-ficha__nome {
  font-family: var(--fonte-display);
  font-weight: var(--peso-manchete);
  font-size: var(--tipo-subtitulo);
  line-height: var(--linha-compacta);
  letter-spacing: var(--letra-titulo);
  color: var(--ficha-nome);
  margin: 0;
}
.ah-ficha__perfil {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  align-items: center;
}
.ah-ficha__escola {
  font-family: var(--fonte-display);
  font-weight: var(--peso-forte);
  font-size: var(--tipo-apoio);
  color: var(--ficha-escola);
  letter-spacing: var(--letra-corpo);
}
.ah-ficha__indice {
  position: absolute;
  top: var(--esp-3);
  right: var(--esp-3);
}

/* o carimbo, em duas camadas de máscara sobre o vetor original */
.ah-carimbo {
  position: relative;
  display: block;
  width: var(--esp-8);
  aspect-ratio: 423 / 418;
  flex: none;
}
.ah-carimbo::before,
.ah-carimbo::after {
  content: "";
  position: absolute;
  inset: 0;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}
.ah-carimbo::before {
  background: var(--carimbo-tinta);
  -webkit-mask-image: var(--grafismo-carimbo-tinta);
  mask-image: var(--grafismo-carimbo-tinta);
}
.ah-carimbo::after {
  background: var(--carimbo-acento);
  -webkit-mask-image: var(--grafismo-carimbo-acento);
  mask-image: var(--grafismo-carimbo-acento);
}
.ah-carimbo--peq { width: var(--esp-7); }
.ah-carimbo--gr { width: var(--esp-9); }

/* a batida: o carimbo entra girado e desce em cima da ficha, uma vez só */
@keyframes ah-batida {
  from { opacity: 0; transform: rotate(-14deg) scale(1.5); }
  to { opacity: 1; transform: rotate(-7deg) scale(1); }
}
.ah-ficha .ah-carimbo {
  position: absolute;
  right: var(--esp-3);
  bottom: var(--esp-3);
  transform: rotate(-7deg);
  animation: ah-batida var(--dur-carimbo) var(--ease-carimbo) both;
}
@media (prefers-reduced-motion: reduce) {
  .ah-ficha .ah-carimbo { animation: none; }
}

/* a ficha com carimbo reserva o canto: os dados não passam por baixo dele */
.ah-ficha--carimbada .ah-ficha__dados { padding-right: var(--esp-8); }

/* -------------------------------------------------------------------------
   QUADRO DE APROVAÇÕES. A ficha em formato de lista, para quando o
   conteúdo é a sequência inteira e não uma unidade.
   ------------------------------------------------------------------------- */
.ah-quadro {
  border: var(--linha-fina) solid var(--tabela-linha);
  border-radius: var(--raio-g);
  overflow: hidden;
  background: var(--cor-superficie);
}
.ah-quadro__cabeca,
.ah-quadro__linha {
  display: grid;
  grid-template-columns: var(--esp-6) 1fr auto;
  gap: var(--esp-3);
  align-items: center;
  padding: var(--esp-3) var(--esp-4);
  border-bottom: var(--linha-fina) solid var(--tabela-linha);
}
.ah-quadro__linha:last-child { border-bottom: 0; }
.ah-quadro__cabeca { background: var(--tabela-destaque-bg); }
.ah-quadro__fim { text-align: right; }

/* -------------------------------------------------------------------------
   FOTO E LEGENDA DE BARRA. É o mecanismo que transforma foto em prova.
   ------------------------------------------------------------------------- */
.ah-quadro-foto {
  border: var(--linha-fina) solid var(--cor-linha);
  border-radius: var(--raio-g);
  overflow: hidden;
  background: var(--cor-superficie);
}
.ah-quadro-foto img { width: 100%; aspect-ratio: var(--img-quadro); object-fit: cover; }
.ah-legenda {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-3) var(--esp-4);
  background: var(--legenda-bg);
  color: var(--legenda-texto);
  font-size: var(--tipo-apoio);
}
.ah-legenda::before {
  content: "";
  width: var(--esp-2);
  height: var(--esp-2);
  border-radius: var(--raio-selo);
  background: var(--legenda-marcador);
  flex: none;
}
.ah-legenda strong { font-weight: var(--peso-forte); }

/* -------------------------------------------------------------------------
   CONTEXTO FOTO. O scrim é tokenizado e obrigatório: sem ele o texto
   sobre imagem não tem contraste garantido.
   ------------------------------------------------------------------------- */
.ah-cena {
  position: relative;
  isolation: isolate;
  border-radius: var(--raio-g);
  overflow: hidden;
  min-height: var(--cena-altura);
  display: flex;
  align-items: flex-end;
  background: var(--cor-fundo);
}
.ah-cena__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.ah-cena::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--scrim);
  z-index: -1;
}
.ah-cena--base::before { background: var(--scrim-base); }
/* a área de texto vive na faixa forte do scrim, nunca na fraca */
.ah-cena__area {
  padding: var(--esp-6);
  max-width: 60%;
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  color: var(--cor-texto);
}

/* -------------------------------------------------------------------------
   GRAFISMO DAS LETRAS H U B. Grande, lateral, sangrando pela borda.
   É a transição entre o chão claro e o chão navy.
   ------------------------------------------------------------------------- */
.ah-letra {
  position: absolute;
  pointer-events: none;
  background: var(--cor-texto);
  opacity: 1;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  z-index: 0;
}
.ah-letra--h { -webkit-mask-image: var(--grafismo-letra-h); mask-image: var(--grafismo-letra-h); }
.ah-letra--u { -webkit-mask-image: var(--grafismo-letra-u); mask-image: var(--grafismo-letra-u); }
.ah-letra--b { -webkit-mask-image: var(--grafismo-letra-b); mask-image: var(--grafismo-letra-b); }

/* -------------------------------------------------------------------------
   MARCA D'ÁGUA DE SEÇÃO  >>> rev. 04/08, aprovada pelo Patrick <<<

   A mesma letra do bloco acima, no papel novo: grande, tom sobre tom,
   sangrando por uma borda e ESMAECENDO antes de encostar no texto.
   Duas camadas de máscara (a letra e o gradiente), combinadas por interseção.

   QUANDO USAR: uma por seção de leitura, prova ou oferta. No máximo três na
   página, na ordem H, U, B, que soletra a marca de cima a baixo sem escrever
   o nome.
   QUANDO NÃO USAR: sobre foto (lá quem faz esse papel é a imagem), duas na
   mesma seção, ou inteira e centrada, que vira logotipo gigante.
   REGRA: cresce e apaga junto. A cor vem de --cor-grafismo, que cada
   contexto redefine; nunca escrever a opacidade na página.
   ------------------------------------------------------------------------- */
.ah-marca-letra {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  width: var(--grafismo-letra);
  height: var(--grafismo-letra-altura);
  background: var(--cor-grafismo);
  -webkit-mask-position: center, center;
          mask-position: center, center;
  -webkit-mask-repeat: no-repeat, no-repeat;
          mask-repeat: no-repeat, no-repeat;
  -webkit-mask-size: contain, cover;
          mask-size: contain, cover;
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
/* a borda por onde sangra decide o lado do esmaecimento */
.ah-marca-letra--direita { top: -16%; right: -12%; }
.ah-marca-letra--esquerda { top: -18%; left: -11%; }
.ah-marca-letra--direita.ah-marca-letra--h {
  -webkit-mask-image: var(--grafismo-letra-h), var(--grafismo-fade-esquerda);
          mask-image: var(--grafismo-letra-h), var(--grafismo-fade-esquerda);
}
.ah-marca-letra--direita.ah-marca-letra--u {
  -webkit-mask-image: var(--grafismo-letra-u), var(--grafismo-fade-esquerda);
          mask-image: var(--grafismo-letra-u), var(--grafismo-fade-esquerda);
}
.ah-marca-letra--direita.ah-marca-letra--b {
  -webkit-mask-image: var(--grafismo-letra-b), var(--grafismo-fade-esquerda);
          mask-image: var(--grafismo-letra-b), var(--grafismo-fade-esquerda);
}
.ah-marca-letra--esquerda.ah-marca-letra--h {
  -webkit-mask-image: var(--grafismo-letra-h), var(--grafismo-fade-direita);
          mask-image: var(--grafismo-letra-h), var(--grafismo-fade-direita);
}
.ah-marca-letra--esquerda.ah-marca-letra--u {
  -webkit-mask-image: var(--grafismo-letra-u), var(--grafismo-fade-direita);
          mask-image: var(--grafismo-letra-u), var(--grafismo-fade-direita);
}
.ah-marca-letra--esquerda.ah-marca-letra--b {
  -webkit-mask-image: var(--grafismo-letra-b), var(--grafismo-fade-direita);
          mask-image: var(--grafismo-letra-b), var(--grafismo-fade-direita);
}
.ah-campo-grafismo {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.ah-campo-grafismo > .ah-letra { background: var(--cor-grafismo); }
.ah-campo-grafismo > * { position: relative; }
.ah-campo-grafismo > .ah-letra { position: absolute; }

/* VIRADA DE CHÃO. A troca de superfície (claro para navy, ou navy para
   marca) não é um corte seco: as letras H U B sangram pela borda de cima da
   seção que entra. É o grafismo da marca fazendo o trabalho de transição.
   Uma por página, no máximo duas. Nunca decorativa no meio do texto. */
.ah-virada {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  padding-block: var(--esp-secao);
}
.ah-virada__letras {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: flex-start;
  pointer-events: none;
  z-index: -1;
  translate: 6% -34%;
}
.ah-virada__letras .ah-letra {
  position: relative;
  width: var(--grafismo-letra);
  height: var(--grafismo-letra);
  background: var(--cor-grafismo);
}
.ah-virada--esquerda .ah-virada__letras { right: auto; left: 0; translate: -6% -34%; }

/* ANEL DE FOCO ESTÁTICO. Só para o specimen mostrar o estado sem exigir
   interação. Mesmos valores do :focus-visible. Não usar em página. */
.ah-foco {
  outline: var(--linha-grossa) solid var(--cor-foco);
  outline-offset: var(--linha-grossa);
  box-shadow: 0 0 0 var(--linha-grossa) var(--cor-foco-halo);
  border-radius: var(--raio-p);
}

/* -------------------------------------------------------------------------
   PASSO DE PROCESSO. Sequência real (o processo de entrada tem ordem),
   com índice, régua e status. Não é grid de card com iconezinho.
   ------------------------------------------------------------------------- */
.ah-passo {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--esp-4);
  padding-block: var(--esp-4);
  border-top: var(--linha-fina) solid var(--cor-linha);
  align-items: start;
}
.ah-passo:last-child { border-bottom: var(--linha-fina) solid var(--cor-linha); }
.ah-passo__corpo { display: flex; flex-direction: column; gap: var(--esp-2); }

/* -------------------------------------------------------------------------
   TABELA DE COMPARAÇÃO. Grátis contra assinatura, GPS contra consultoria.
   ------------------------------------------------------------------------- */
.ah-tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--tipo-apoio);
  color: var(--cor-texto);
}
.ah-tabela th,
.ah-tabela td {
  text-align: left;
  padding: var(--esp-3) var(--esp-4);
  border-bottom: var(--linha-fina) solid var(--tabela-linha);
  vertical-align: top;
}
.ah-tabela thead th {
  font-family: var(--fonte-display);
  font-style: italic;
  font-weight: var(--peso-forte);
  font-size: var(--tipo-rotulo);
  letter-spacing: var(--letra-rotulo);
  text-transform: uppercase;
  color: var(--cor-texto-secundario);
}
.ah-tabela tbody th {
  font-weight: var(--peso-medio);
  color: var(--cor-texto);
}
.ah-tabela__coluna-destaque { background: var(--tabela-destaque-bg); }
.ah-tabela__sim { color: var(--cor-sucesso); font-weight: var(--peso-forte); }
.ah-tabela__nao { color: var(--cor-texto-suave); }

/* -------------------------------------------------------------------------
   DEPOIMENTO. Protagonista, não card em grade de três. A fala grande, a
   assinatura embaixo em voz de rótulo, e o retrato ao lado.
   ------------------------------------------------------------------------- */
.ah-depoimento {
  display: grid;
  gap: var(--esp-5);
  align-items: center;
  border-top: var(--regua-altura) solid var(--cor-regua);
  padding-top: var(--esp-5);
}
.ah-depoimento__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);
  margin: 0;
}
.ah-depoimento__assina {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  margin-top: var(--esp-4);
}
.ah-depoimento__retrato {
  width: var(--esp-7);
  height: var(--esp-7);
  border-radius: var(--raio-p);
  object-fit: cover;
  flex: none;
}

/* -------------------------------------------------------------------------
   FAQ. Aberto por padrão nas primeiras, porque as perguntas do pai são o
   conteúdo, não um enfeite escondido atrás de clique.
   ------------------------------------------------------------------------- */
.ah-faq { border-top: var(--linha-fina) solid var(--cor-linha); }
.ah-faq__item { border-bottom: var(--linha-fina) solid var(--cor-linha); }
.ah-faq__pergunta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--esp-4);
  padding-block: var(--esp-4);
  cursor: pointer;
  list-style: none;
  font-family: var(--fonte-display);
  font-weight: var(--peso-forte);
  font-size: var(--tipo-corpo);
  color: var(--cor-texto);
}
.ah-faq__pergunta::-webkit-details-marker { display: none; }
.ah-faq__pergunta::after {
  content: "+";
  color: var(--cor-acento-texto);
  font-weight: var(--peso-manchete);
  transition: transform var(--dur-padrao) var(--ease-padrao);
}
.ah-faq__item[open] .ah-faq__pergunta::after { transform: rotate(45deg); }
.ah-faq__resposta {
  padding-bottom: var(--esp-4);
  color: var(--cor-texto-secundario);
  max-width: var(--largura-texto);
}

/* -------------------------------------------------------------------------
   FORMULÁRIO. Nenhum campo foi capturado nas 4 páginas do site: é
   definição nova do sistema, não sistematização.
   ------------------------------------------------------------------------- */
.ah-form { display: flex; flex-direction: column; gap: var(--esp-4); }
.ah-campo { display: flex; flex-direction: column; gap: var(--esp-2); }
.ah-campo__rotulo {
  font-family: var(--fonte-display);
  font-style: italic;
  font-weight: var(--peso-forte);
  font-size: var(--tipo-rotulo);
  letter-spacing: var(--letra-rotulo);
  text-transform: uppercase;
  color: var(--cor-texto-secundario);
}
.ah-campo__entrada {
  width: 100%;
  min-height: var(--esp-7);
  padding: var(--esp-3) var(--esp-4);
  background: var(--campo-bg);
  color: var(--campo-texto);
  border: var(--linha-fina) solid var(--campo-linha);
  border-radius: var(--raio-m);
  font-family: var(--fonte-texto);
  font-size: var(--tipo-corpo);
  transition: border-color var(--dur-padrao) var(--ease-padrao);
}
.ah-campo__entrada::placeholder { color: var(--campo-placeholder); }
.ah-campo__entrada:hover { border-color: var(--cor-linha-forte); }
.ah-campo__ajuda { font-size: var(--tipo-miudo); color: var(--cor-texto-secundario); }
.ah-campo__erro {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  font-size: var(--tipo-miudo);
  color: var(--cor-erro);
  font-weight: var(--peso-medio);
}
.ah-campo--erro .ah-campo__entrada { border-color: var(--cor-erro); border-width: var(--linha-grossa); }
.ah-campo--sucesso .ah-campo__entrada { border-color: var(--cor-sucesso); }
.ah-campo__entrada[disabled] { opacity: 0.45; cursor: not-allowed; }
.ah-opcao { display: flex; align-items: flex-start; gap: var(--esp-3); cursor: pointer; }
.ah-opcao input { margin-top: var(--esp-1); accent-color: var(--cor-acento); flex: none; }

/* -------------------------------------------------------------------------
   RESPONSIVO. Mobile-first: o que está acima é a régua pequena.
   ------------------------------------------------------------------------- */
@media (min-width: 48rem) {
  .ah-ficha__retrato { width: var(--esp-9); }
  .ah-depoimento { grid-template-columns: 2fr 1fr; }
  .ah-cena__area { max-width: 50%; padding: var(--esp-8); }
}

/* =========================================================================
   AS QUATRO LINGUAGENS DE SEÇÃO   >>> rev. 04/08, aprovadas pelo Patrick <<<

   O sistema anterior tinha UMA fôrma de seção (cabeçalho + título + caixa)
   repetida do começo ao fim da página. Era a causa do "tudo igual".
   Agora existem quatro linguagens, e a regra do CONTRATO é dura:
   DUAS SEÇÕES VIZINHAS NUNCA USAM A MESMA.

   1. CENA    .ah-dobra   foto em tela cheia, texto por cima, sem caixa
   2. PÁGINA  .ah-secao--leitura   chão claro, respiro, tipografia, zero foto
   3. PAREDE  .ah-parede  prova em fotos grandes lado a lado
   4. BLOCO   .ah-bloco   cor de marca em superfície inteira

   O cabeçalho de seção (.ah-cabecalho) deixou de ser obrigatório: em CENA e
   em BLOCO ele é proibido, porque quem abre a seção é a imagem ou a cor.
   ========================================================================= */

/* --- 1. CENA -------------------------------------------------------------
   A foto É a página. Usar no hero e, no máximo, em mais uma virada de prova.
   Faça: atleta em jogo, corte apertado, olhando para fora do quadro.
   Não faça: foto de banco de imagem, retrato posado, imagem gerada por IA,
   texto na faixa aberta do scrim (é onde o contraste cai).
   ------------------------------------------------------------------------- */
/* A dobra SÓ existe sobre imagem, então ela vem SEMPRE com .contexto-foto:
   <section class="ah-dobra contexto-foto">. Sem a classe, o rótulo, o botão
   secundário e o anel de foco herdam o contexto claro e somem sobre a foto
   (medido no primeiro specimen desta revisão). Está no CONTRATO como regra
   dura, e é a primeira coisa a conferir se a dobra "sumiu". */
.ah-dobra {
  isolation: isolate;
  min-height: var(--dobra-altura);
  display: flex;
  flex-direction: column;
  background: var(--marca-navy-fundo);
  color: var(--cor-sobre-foto);
  padding-block: var(--esp-painel);
}
.ah-dobra__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -3;
}
/* a luz da marca sobre a foto */
.ah-dobra::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--luz-cena);
  mix-blend-mode: var(--luz-cena-mistura);
  opacity: var(--luz-cena-forca);
}
/* o scrim que garante o AA do texto */
.ah-dobra::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--scrim-dobra);
}
.ah-dobra__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
}
/* o texto encosta no pé da dobra, na faixa forte do scrim */
.ah-dobra__bloco { margin-top: auto; }
.ah-dobra .ah-manchete { max-width: 14ch; }

/* a esteira de prova que fecha a dobra: nome e escola já na primeira tela */
.ah-esteira {
  position: relative;
  z-index: 1;
  overflow: hidden;
  /* sangra até a borda da placa e encosta no pé dela */
  margin: var(--esp-6) calc(var(--esp-painel) * -1) calc(var(--esp-painel) * -1);
  border-top: var(--linha-fina) solid var(--esteira-linha);
  background: var(--esteira-bg);
}
.ah-esteira__trilho {
  display: flex;
  width: max-content;
  gap: var(--esp-7);
  padding-block: var(--esp-3);
  animation: ah-esteira-correr var(--dur-esteira) linear infinite;
}
.ah-esteira__item {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  white-space: nowrap;
  font-family: var(--fonte-texto);
  font-size: var(--tipo-rotulo);
  font-weight: var(--peso-forte);
  letter-spacing: var(--letra-rotulo);
  text-transform: uppercase;
  color: var(--cor-sobre-foto);
}
.ah-esteira__item::before {
  content: "";
  width: var(--esp-2);
  height: var(--esp-2);
  background: var(--cor-acento);
}
.ah-esteira__item b {
  font-weight: var(--peso-manchete);
  color: var(--cor-realce-texto);
}
@keyframes ah-esteira-correr {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ah-esteira__trilho { animation: none; }
}

/* etapa em régua com índice de MARCO: o número grande, na cor de realce.
   É a forma que a linguagem PÁGINA usa para lista de processo real.
   Não usar para lista que não é sequência (a régua vira decoração). */
.ah-passo--marco { gap: var(--esp-6); padding-block: var(--esp-5); }
.ah-passo--marco .ah-indice {
  font-size: var(--tipo-numero);
  line-height: var(--linha-manchete);
  font-weight: var(--peso-manchete);
  color: var(--cor-realce-texto);
  letter-spacing: var(--letra-titulo);
}

/* --- 2. PÁGINA -----------------------------------------------------------
   Chão claro, respiro grande, só tipografia. É onde o pai lê devagar.
   Faça: lista em régua, uma marca d'água de letra sangrando por uma borda.
   Não faça: foto, card com filete, grade de N caixas iguais.
   ------------------------------------------------------------------------- */
.ah-secao--leitura {
  background: var(--cor-superficie);
  color: var(--cor-texto);
  padding-block: var(--esp-secao);
}
.ah-secao--leitura > .ah-medida { position: relative; z-index: 1; }

/* --- 3. PAREDE -----------------------------------------------------------
   A prova em fotos grandes, coladas, cada uma com nome, esporte e escola.
   É o que responde ao "produto invisível": a foto vira dossiê.
   Faça: uma foto por atleta REAL, com o par verificado.
   Não faça: retrato ilustrativo com nome de outra pessoa, legenda genérica,
   vaga vazia sem declarar a lacuna.
   ------------------------------------------------------------------------- */
.ah-parede {
  background: var(--cor-fundo);
  color: var(--cor-texto);
  padding-block: var(--esp-secao);
}
.ah-parede > .ah-medida { position: relative; z-index: 1; }
/* rev. 04/08, 2ª rodada: as fotos deixaram de ficar coladas em bloco único.
   Cada uma virou uma peça com canto arredondado e ar em volta, que é o que
   separa "parede organizada" de "mosaico". */
.ah-parede__fichas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--esp-3);
  margin-top: var(--esp-7);
}
.ah-ficha-foto {
  position: relative;
  overflow: hidden;
  margin: 0;
  aspect-ratio: var(--img-retrato);
  border-radius: var(--raio-g);
}
.ah-ficha-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-entrada) var(--ease-padrao);
}
.ah-ficha-foto:hover img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .ah-ficha-foto img,
  .ah-ficha-foto:hover img { transition: none; transform: none; }
}
.ah-ficha-foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--scrim-base);
}
.ah-ficha-foto figcaption {
  position: absolute;
  z-index: 1;
  inset-inline: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
  padding: var(--esp-4);
  color: var(--cor-sobre-foto);
}
.ah-ficha-foto .ah-ficha-foto__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;
}
.ah-ficha-foto .ah-ficha-foto__escola {
  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;
}
/* a vaga declarada: lugar de foto nunca fica vazio com contorno */
.ah-ficha-foto--lacuna {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cor-fundo-recuado);
}
.ah-ficha-foto--lacuna::after { content: none; }

/* --- 4. BLOCO ------------------------------------------------------------
   A cor de marca em superfície inteira, com tinta escura por cima. É onde
   a página pede a ação. A força vem da SUPERFÍCIE, então a tipografia fica
   em escala de subtítulo: manchete grande aqui vira grito.
   Faça: uma linha de promessa, uma de apoio, um botão.
   Não faça: manchete em escala de hero, dois botões, texto longo.
   ------------------------------------------------------------------------- */
.ah-bloco {
  background: var(--cor-fundo);
  color: var(--cor-texto);
  padding-block: var(--esp-secao);
}
.ah-bloco > .ah-medida { position: relative; z-index: 1; }
.ah-bloco__grade {
  display: grid;
  grid-template-columns: 1.4fr auto;
  gap: var(--esp-6);
  align-items: center;
}
.ah-bloco__titulo {
  font-family: var(--fonte-display);
  font-weight: var(--peso-forte);
  font-size: var(--tipo-subtitulo);
  line-height: var(--linha-titulo);
  text-transform: uppercase;
  max-width: 22ch;
  margin: 0;
}
@media (max-width: 48rem) {
  .ah-bloco__grade { grid-template-columns: 1fr; }
  .ah-parede__fichas { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
}