/* =========================================================================
   >>> 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, design system
   Direção: "TRANSMISSÃO" (aprovada pelo Patrick em 04/08/2026)
   Revisão da "Sala de Recrutamento" (03/08): a estrutura técnica ficou, a
   direção estética foi refeita a partir do que a própria marca publica.
   O que mudou nesta revisão está marcado com >>> rev. 04/08 <<<.
   Status: proposta. Fonte da verdade: design-system/DIRECAO.md e CONTRATO.md
   Origem de cada valor: design-system/extracao.md (medido) e
   insumos/proposta-low-ticket-aprovada.html (aprovado pelo Patrick).

   TRÊS CAMADAS
   1. primitiva  --marca-* / --escala-*  : a matéria bruta da marca, sem papel
   2. semântica  --cor-* --tipo-* --esp-*: o papel. É o que a produção usa
   3. componente --botao-* --ficha-* ... : override pontual de componente

   REGRA DE CONTEXTO
   Toda classe .contexto-* redefine o MESMO conjunto de tokens, integral.
   Remap parcial = componente aninhado herda token do pai = bug.
   A auditoria (auditar-tokens.sh) reprova contexto incompleto.
   ========================================================================= */

/* -------------------------------------------------------------------------
   FONTES  >>> rev. 04/08: o sistema passa a ter DUAS famílias <<<

   ALTONE carrega manchete, título, número e nome de atleta. Escolha do
   Patrick em 04/08, vendo duas páginas inteiras renderizadas lado a lado.
   PENDÊNCIA: a licença foi comprada dentro do projeto BORA. Conferir a
   cobertura para este cliente ANTES de publicar.

   MONTSERRAT carrega leitura, rótulo, apoio e interface. Continua sendo a
   fonte medida no site do cliente (extracao.md §2.2). O itálico segue
   disponível como gesto do lettering, agora só em rótulo.
   ------------------------------------------------------------------------- */
@font-face {
  font-family: 'Altone';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fontes/Altone-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Altone';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fontes/Altone-Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Altone';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('assets/fontes/Altone-ExtraBold.woff2') format('woff2');
}
@font-face {
  font-family: 'Altone';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('assets/fontes/Altone-Heavy.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('assets/fontes/montserrat-variavel.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url('assets/fontes/montserrat-variavel-italico.woff2') format('woff2');
}

/* =========================================================================
   CAMADA 1, PRIMITIVAS
   ========================================================================= */
:root {
  /* --- cor de marca ---------------------------------------------------- */
  /* laranja do site e da proposta aprovada. É COR DE MARCAÇÃO.             */
  --marca-laranja: #F97015;
  /* laranja dos vetores originais (LOGO.ai, Adesivos.ai). Existe para      */
  /* registro e para impressão; não é usado em tela, para não haver dois.   */
  --marca-laranja-vetor: #F86A08;
  /* >>> rev. 04/08 <<< o laranja QUANDO CARREGA TEXTO em superfície clara.
     O laranja de marca dá 2,85:1 no branco e reprova em qualquer tamanho.
     Este, medido: 3,84:1 no branco · 3,65:1 no osso-2 · 3,49:1 no osso.
     Os três passam em AA para TEXTO GRANDE (>=24px, ou >=18,66px em peso
     700). NUNCA em corpo, rótulo ou dado. É o que devolve o laranja para a
     manchete do chão claro, como a marca já faz no feed. */
  --marca-laranja-texto: #E35205;

  /* navy da marca. Documentado nos posts (Bg_06), no flyer e nos adesivos  */
  /* em vetor (família #111728 a #222E48). Aposenta o quase-preto do site.  */
  --marca-navy: #132A48;        /* chão de prova                            */
  --marca-navy-fundo: #0F1729;  /* superfície recuada: ficha, faixa, scrim  */
  --marca-navy-linha: #223450;  /* filete sobre navy (flyer)                */
  --marca-navy-tonal: #263A59;  /* grafismo tom sobre tom (flyer, bandeira) */

  /* chão claro, herdado da proposta aprovada */
  --marca-osso: #F6F4F0;
  --marca-osso-2: #FBF9F5;
  --marca-branco: #FFFFFF;

  /* tintas */
  --marca-tinta: #0C0D18;        /* texto no claro,      17,60:1 sobre osso */
  --marca-tinta-quente: #12060A; /* texto sobre laranja,  6,97:1            */
  --marca-cinza: #5C6173;        /* secundário no claro,  5,60:1 sobre osso */
  --marca-nevoa: #ECE8E1;        /* texto sobre navy,    11,84:1            */
  --marca-nevoa-2: #9AA0B2;      /* secundário no navy,   5,54:1            */
  --marca-vidro: #D8DCE4;        /* secundário sobre foto com scrim forte   */

  /* estados. O verde vem da proposta aprovada (--field). O vermelho e o    */
  /* laranja escurecido são introduções registradas na DIRECAO.md.          */
  --marca-campo: #186040;        /* sucesso no claro,     6,86:1            */
  --marca-campo-claro: #5BC38C;  /* sucesso no navy,      6,63:1            */
  --marca-alerta: #A8201A;       /* erro no claro,        6,62:1            */
  --marca-alerta-claro: #FF9A8F; /* erro no navy,         7,07:1            */
  --marca-brasa: #B84C05;        /* atenção no claro,     4,69:1            */
  --marca-areia: #FFC48A;        /* atenção sobre foto,  10,25:1            */
  --marca-menta: #7FDCAB;        /* sucesso sobre foto,   9,65:1            */
  --marca-coral: #FFB4AA;        /* erro sobre foto,      9,37:1            */

  /* --- escala de espaço (degraus usados, não a régua inteira do framework) */
  --escala-1: 0.25rem;
  --escala-2: 0.5rem;
  --escala-3: 0.75rem;
  --escala-4: 1rem;
  --escala-5: 1.5rem;
  --escala-6: 2rem;
  --escala-7: 3rem;
  --escala-8: 4rem;
  --escala-9: 6rem;

  /* --- famílias -------------------------------------------------------- */
  --familia-marca: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* >>> rev. 04/08 <<< a família de manchete, ver o bloco de fontes acima */
  --familia-display: 'Altone', 'Montserrat', system-ui, sans-serif;
}

/* =========================================================================
   CAMADA 2, SEMÂNTICA, parte invariante
   (cor e superfície vivem nos blocos de contexto, mais abaixo)
   ========================================================================= */
:root {
  /* --- tipografia ------------------------------------------------------ */
  --fonte-display: var(--familia-display);  /* >>> rev. 04/08 <<< */
  --fonte-texto: var(--familia-marca);

  /* escala herdada da proposta aprovada, com dois degraus novos            */
  /* >>> rev. 04/08 <<< a manchete da cena cresceu: ela é o primeiro peso da
     página e divide a dobra com a foto, não com uma caixa. O título de seção
     também subiu, porque o cabeçalho de seção deixou de ser obrigatório e a
     hierarquia passou a ser feita por escala. */
  --tipo-manchete: clamp(2.5rem, 6.6vw, 5.6rem);
  --tipo-titulo: clamp(1.9rem, 4vw, 3.4rem);
  --tipo-subtitulo: 1.375rem;
  --tipo-destaque: 1.1875rem;
  --tipo-corpo: 1.0625rem;
  --tipo-apoio: 0.875rem;
  --tipo-miudo: 0.8125rem;
  --tipo-rotulo: 0.72rem;
  --tipo-numero: clamp(2.1rem, 5vw, 3.1rem);
  --tipo-indice: 0.875rem;

  --peso-manchete: 800;
  --peso-forte: 700;
  --peso-medio: 600;
  --peso-normal: 400;

  --linha-manchete: 1.02;
  --linha-titulo: 1.1;
  --linha-corpo: 1.65;
  --linha-compacta: 1.25;
  --linha-rotulo: 1;

  /* AS DUAS VOZES EM CAIXA ALTA, separadas por desenho e não por caixa.
     manchete = reta,   peso 800, tracking NEGATIVO, escala grande
     rótulo   = itálica, peso 700, tracking POSITIVO, escala miúda + régua
     Caixa alta reta com tracking positivo é a zona neutra: proibida. */
  /* >>> rev. 04/08 <<< Altone já é fechada de desenho; o -0,03em que a
     Montserrat precisava fecha demais aqui e cola as hastes em caixa alta. */
  --letra-manchete: -0.015em;
  --letra-titulo: -0.01em;
  --letra-corpo: 0em;
  --letra-rotulo: 0.16em;
  --letra-dado: 0.08em;

  /* --- espaço, medida, forma ------------------------------------------- */
  --esp-1: var(--escala-1);
  --esp-2: var(--escala-2);
  --esp-3: var(--escala-3);
  --esp-4: var(--escala-4);
  --esp-5: var(--escala-5);
  --esp-6: var(--escala-6);
  --esp-7: var(--escala-7);
  --esp-8: var(--escala-8);
  --esp-9: var(--escala-9);
  --esp-margem: clamp(1rem, 3vw, 2rem);
  /* >>> rev. 04/08, 2ª rodada <<< mais respiro, a pedido do Patrick. */
  --esp-secao: clamp(4rem, 9vw, 7.5rem);
  /* o recuo interno da PLACA. É o que dá o ar entre a borda arredondada e o
     conteúdo; sem ele o canto redondo corta o texto e fica apertado. */
  --esp-painel: clamp(1.25rem, 4vw, 3.5rem);

  --largura-pagina: 1120px;
  --largura-texto: 42rem;
  --largura-ficha: 34rem;

  /* >>> rev. 04/08, 2ª RODADA: A FORMA MUDOU. <<<
     A regra anterior ("canto quase reto em tudo, o botão é a única peça
     arredondada") caiu por decisão do Patrick, com duas referências na mão:
     unboundxinc.com (placa 32px, card 24px, botão em pílula de 50px) e
     madewithgsap.com (placa de 20 a 30px, peça miúda 12px). O que ele pediu
     em uma frase: arredondar mais, organizar melhor, mais respiro.
     A escala abaixo é medida dessas duas páginas, não inventada. */
  --raio-0: 0px;
  --raio-p: 10px;   /* etiqueta, selo, peça miúda                          */
  --raio-m: 16px;   /* campo de formulário, tela de vídeo, foto pequena    */
  --raio-g: 24px;   /* card, ficha, foto de prova, quadro, tabela          */
  --raio-painel: 32px;  /* a seção inteira: a PLACA                        */
  --raio-selo: 50%;
  /* o botão virou pílula, como nas duas referências */
  --raio-botao: 999px;

  --linha-fina: 1px;
  --linha-grossa: 2px;
  --regua-altura: 1px;

  /* --- movimento ------------------------------------------------------- */
  --dur-rapida: 120ms;
  --dur-padrao: 180ms;
  --dur-entrada: 320ms;
  --dur-carimbo: 420ms;
  --ease-padrao: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-saida: cubic-bezier(0.4, 0, 1, 1);
  --ease-carimbo: cubic-bezier(0.2, 1.35, 0.4, 1);

  /* --- imagem ---------------------------------------------------------- */
  --img-retrato: 3 / 4;
  --img-quadro: 4 / 3;
  --img-cena: 16 / 10;
  --img-faixa: 21 / 9;
  --img-raio: var(--raio-g);
  /* altura mínima da cena com foto: o texto precisa caber inteiro dentro da
     faixa forte do scrim, senão a garantia de contraste some */
  --cena-altura: clamp(17rem, 32vw, 25rem);

  /* >>> rev. 04/08 <<< A CENA DE DOBRA: a foto do atleta ocupando a tela.
     Invariante de propósito: é a luz da marca, a mesma dos posts, e não muda
     com o contexto porque ela SEMPRE mora sobre fotografia.               */
  /* rev. 04/08, 2ª rodada: a cena virou PLACA, então a altura desconta o
     respiro que ela tem em volta. */
  --dobra-altura: calc(100svh - var(--esp-margem) * 2);
  /* a luz: azul entrando por cima à esquerda, laranja por baixo à direita */
  --luz-cena:
    radial-gradient(120% 90% at 8% 18%, rgba(23, 70, 150, 0.85), transparent 62%),
    radial-gradient(80% 70% at 96% 76%, rgba(249, 112, 21, 0.60), transparent 60%);
  --luz-cena-mistura: screen;
  --luz-cena-forca: 0.5;
  /* o scrim vertical da dobra: escuro em cima (logo), aberto no meio (o
     atleta), escuro embaixo (manchete e botões). Difere do --scrim lateral. */
  --scrim-dobra: linear-gradient(180deg,
      rgba(11, 26, 46, 0.86) 0%,
      rgba(11, 26, 46, 0.45) 32%,
      rgba(11, 26, 46, 0.72) 64%,
      rgba(11, 26, 46, 0.96) 100%);
  /* a esteira de prova que fecha a dobra */
  --esteira-bg: rgba(11, 26, 46, 0.72);
  --esteira-linha: rgba(236, 232, 225, 0.22);
  --dur-esteira: 34s;

  /* tamanho do grafismo de letra quando ele sangra pela borda da seção */
  /* >>> rev. 04/08 <<< a letra virou MARCA D'ÁGUA DE SEÇÃO, não mais um
     detalhe na virada de chão. Ela é grande, sangra por uma borda, fica
     tom sobre tom e esmaece antes de encostar no texto.
     Regra: CRESCE E APAGA JUNTO. Letra grande com opacidade de letra
     pequena vira mancha; a cor por superfície mora em --cor-grafismo. */
  --grafismo-letra: clamp(16rem, 60vw, 52rem);
  --grafismo-letra-altura: 150%;
  /* o esmaecimento é a 2ª camada de máscara, combinada por interseção */
  --grafismo-fade-esquerda: linear-gradient(to left, #000 0%, rgba(0,0,0,0.55) 38%, rgba(0,0,0,0.12) 72%, transparent 92%);
  --grafismo-fade-direita: linear-gradient(to right, #000 0%, rgba(0,0,0,0.55) 38%, rgba(0,0,0,0.12) 72%, transparent 92%);

  /* --- grafismos da marca, extraídos dos vetores originais --------------
     ATENÇÃO ao caminho: o navegador resolve url() dentro de custom property
     no ARQUIVO QUE USA o token, não no que o declara (medido: o mesmo
     'grafismos/x.svg' virou 404 em componentes/grafismos/x.svg). Como o
     único lugar que usa estes cinco é componentes/componentes.css, o
     caminho é relativo a ELE. Consequência, e é regra do CONTRATO.md:
     grafismo se consome pelas classes .ah-letra--* e .ah-carimbo,
     nunca pelo token cru no CSS de uma página.                            */
  --grafismo-letra-h: url('assets/grafismos/letra-h.svg');
  --grafismo-letra-u: url('assets/grafismos/letra-u.svg');
  --grafismo-letra-b: url('assets/grafismos/letra-b.svg');
  --grafismo-carimbo-tinta: url('assets/grafismos/carimbo-a.svg');
  --grafismo-carimbo-acento: url('assets/grafismos/carimbo-b.svg');
}

/* =========================================================================
   CAMADAS 2 e 3, POR CONTEXTO
   Quatro superfícies, medidas na extração (§7.2): claro, navy, marca, foto.
   Cada bloco redefine o conjunto INTEGRAL. Nada de remap parcial.

   Razões de contraste conferidas par a par (evidencias/contraste-wcag.json
   e recálculo desta rodada). Nenhum par abaixo de 4,5:1 em texto de corpo,
   nenhum abaixo de 3:1 em texto grande e em borda de componente.
   ========================================================================= */

/* --- CONTEXTO CLARO, o chão de leitura -----------------------------------
   Explicação, FAQ, comparação, processo, formulário.
   PROIBIDO: laranja como texto (2,60:1). O laranja entra como preenchimento,
   régua e marca-texto. É o padrão do :root.
   ------------------------------------------------------------------------- */
:root {
  --cor-fundo: var(--marca-osso);
  --cor-fundo-recuado: var(--marca-osso-2);
  --cor-superficie: var(--marca-branco);
  --cor-superficie-2: var(--marca-osso-2);
  --cor-texto: var(--marca-tinta);
  --cor-texto-secundario: var(--marca-cinza);
  --cor-texto-suave: var(--marca-cinza);
  --cor-acento: var(--marca-laranja);
  --cor-acento-texto: var(--marca-tinta);
  --cor-linha: rgba(12, 13, 24, 0.12);
  --cor-linha-forte: rgba(12, 13, 24, 0.24);
  --cor-regua: rgba(12, 13, 24, 0.24);
  --cor-grafismo: rgba(18, 6, 10, 0.05);  /* marca d'água de seção, rev. 04/08 */
  --cor-realce-texto: var(--marca-laranja-texto);  /* laranja QUANDO carrega texto: chão claro */
  --botao-raio: var(--raio-botao);
  --cor-foco: var(--marca-navy);
  --cor-foco-halo: var(--marca-osso);
  --cor-sucesso: var(--marca-campo);
  --cor-erro: var(--marca-alerta);
  --cor-atencao: var(--marca-brasa);
  --cor-sobre-foto: var(--marca-branco);
  --scrim: linear-gradient(to right, rgba(15, 23, 41, 0.9), rgba(15, 23, 41, 0.75), rgba(15, 23, 41, 0.5));
  --scrim-base: linear-gradient(to top, rgba(15, 23, 41, 0.94), rgba(15, 23, 41, 0.88) 35%, rgba(15, 23, 41, 0.78) 55%, rgba(15, 23, 41, 0.3) 80%, rgba(15, 23, 41, 0) 100%);
  --sombra: 0 20px 44px -22px rgba(12, 13, 24, 0.28);
  --botao-bg: var(--marca-laranja);
  --botao-texto: var(--marca-tinta-quente);
  --botao-bg-ativo: var(--marca-laranja-vetor);
  --botao-2-bg: transparent;
  --botao-2-texto: var(--marca-tinta);
  --botao-2-linha: rgba(12, 13, 24, 0.24);
  --botao-2-bg-ativo: rgba(12, 13, 24, 0.06);
  --card-bg: var(--marca-branco);
  --card-linha: rgba(12, 13, 24, 0.12);
  --ficha-bg: var(--marca-branco);
  --ficha-linha: rgba(12, 13, 24, 0.12);
  --ficha-nome: var(--marca-tinta);
  --ficha-escola: var(--marca-tinta);
  --carimbo-tinta: var(--marca-tinta);
  --carimbo-acento: var(--marca-laranja);
  --etiqueta-bg: var(--marca-laranja);
  --etiqueta-texto: var(--marca-tinta-quente);
  --etiqueta-linha: transparent;
  --selo-lacuna-linha: var(--marca-brasa);
  --selo-lacuna-texto: var(--marca-brasa);
  --legenda-bg: var(--marca-branco);
  --legenda-texto: var(--marca-tinta);
  --legenda-marcador: var(--marca-campo);
  --campo-bg: var(--marca-branco);
  --campo-texto: var(--marca-tinta);
  --campo-linha: rgba(12, 13, 24, 0.24);
  --campo-placeholder: var(--marca-cinza);
  --realce-bg: var(--marca-laranja);
  --realce-tinta: var(--marca-tinta-quente);
  --tabela-linha: rgba(12, 13, 24, 0.12);
  --tabela-destaque-bg: var(--marca-osso-2);
}

.contexto-claro {
  --cor-fundo: var(--marca-osso);
  --cor-fundo-recuado: var(--marca-osso-2);
  --cor-superficie: var(--marca-branco);
  --cor-superficie-2: var(--marca-osso-2);
  --cor-texto: var(--marca-tinta);
  --cor-texto-secundario: var(--marca-cinza);
  --cor-texto-suave: var(--marca-cinza);
  --cor-acento: var(--marca-laranja);
  --cor-acento-texto: var(--marca-tinta);
  --cor-linha: rgba(12, 13, 24, 0.12);
  --cor-linha-forte: rgba(12, 13, 24, 0.24);
  --cor-regua: rgba(12, 13, 24, 0.24);
  --cor-grafismo: rgba(18, 6, 10, 0.05);  /* marca d'água de seção, rev. 04/08 */
  --cor-realce-texto: var(--marca-laranja-texto);  /* laranja QUANDO carrega texto: chão claro */
  --botao-raio: var(--raio-botao);
  --cor-foco: var(--marca-navy);
  --cor-foco-halo: var(--marca-osso);
  --cor-sucesso: var(--marca-campo);
  --cor-erro: var(--marca-alerta);
  --cor-atencao: var(--marca-brasa);
  --cor-sobre-foto: var(--marca-branco);
  --scrim: linear-gradient(to right, rgba(15, 23, 41, 0.9), rgba(15, 23, 41, 0.75), rgba(15, 23, 41, 0.5));
  --scrim-base: linear-gradient(to top, rgba(15, 23, 41, 0.94), rgba(15, 23, 41, 0.88) 35%, rgba(15, 23, 41, 0.78) 55%, rgba(15, 23, 41, 0.3) 80%, rgba(15, 23, 41, 0) 100%);
  --sombra: 0 20px 44px -22px rgba(12, 13, 24, 0.28);
  --botao-bg: var(--marca-laranja);
  --botao-texto: var(--marca-tinta-quente);
  --botao-bg-ativo: var(--marca-laranja-vetor);
  --botao-2-bg: transparent;
  --botao-2-texto: var(--marca-tinta);
  --botao-2-linha: rgba(12, 13, 24, 0.24);
  --botao-2-bg-ativo: rgba(12, 13, 24, 0.06);
  --card-bg: var(--marca-branco);
  --card-linha: rgba(12, 13, 24, 0.12);
  --ficha-bg: var(--marca-branco);
  --ficha-linha: rgba(12, 13, 24, 0.12);
  --ficha-nome: var(--marca-tinta);
  --ficha-escola: var(--marca-tinta);
  --carimbo-tinta: var(--marca-tinta);
  --carimbo-acento: var(--marca-laranja);
  --etiqueta-bg: var(--marca-laranja);
  --etiqueta-texto: var(--marca-tinta-quente);
  --etiqueta-linha: transparent;
  --selo-lacuna-linha: var(--marca-brasa);
  --selo-lacuna-texto: var(--marca-brasa);
  --legenda-bg: var(--marca-branco);
  --legenda-texto: var(--marca-tinta);
  --legenda-marcador: var(--marca-campo);
  --campo-bg: var(--marca-branco);
  --campo-texto: var(--marca-tinta);
  --campo-linha: rgba(12, 13, 24, 0.24);
  --campo-placeholder: var(--marca-cinza);
  --realce-bg: var(--marca-laranja);
  --realce-tinta: var(--marca-tinta-quente);
  --tabela-linha: rgba(12, 13, 24, 0.12);
  --tabela-destaque-bg: var(--marca-osso-2);
}

/* --- CONTEXTO NAVY, o chão de prova e de dinheiro ------------------------
   Hero, quadro de aprovações, depoimento, oferta, CTA final.
   É AQUI que o laranja carrega texto: 5,06:1 sobre o chão e 6,26:1 sobre a
   superfície recuada da ficha. É a razão de existir do segundo chão.
   ------------------------------------------------------------------------- */
.contexto-navy {
  --cor-fundo: var(--marca-navy);
  --cor-fundo-recuado: var(--marca-navy-fundo);
  --cor-superficie: var(--marca-navy-fundo);
  --cor-superficie-2: var(--marca-navy);
  --cor-texto: var(--marca-nevoa);
  --cor-texto-secundario: var(--marca-nevoa-2);
  --cor-texto-suave: var(--marca-nevoa-2);
  --cor-acento: var(--marca-laranja);
  --cor-acento-texto: var(--marca-laranja);
  --cor-linha: rgba(236, 232, 225, 0.14);
  --cor-linha-forte: rgba(236, 232, 225, 0.28);
  --cor-regua: rgba(236, 232, 225, 0.28);
  --cor-grafismo: rgba(255, 255, 255, 0.05);  /* marca d'água de seção, rev. 04/08 */
  --cor-realce-texto: var(--marca-laranja);  /* laranja QUANDO carrega texto: chão navy, 5,06:1 */
  --botao-raio: var(--raio-botao);
  --cor-foco: var(--marca-laranja);
  --cor-foco-halo: var(--marca-navy-fundo);
  --cor-sucesso: var(--marca-campo-claro);
  --cor-erro: var(--marca-alerta-claro);
  --cor-atencao: var(--marca-laranja);
  --cor-sobre-foto: var(--marca-branco);
  --scrim: linear-gradient(to right, rgba(15, 23, 41, 0.9), rgba(15, 23, 41, 0.75), rgba(15, 23, 41, 0.5));
  --scrim-base: linear-gradient(to top, rgba(15, 23, 41, 0.94), rgba(15, 23, 41, 0.88) 35%, rgba(15, 23, 41, 0.78) 55%, rgba(15, 23, 41, 0.3) 80%, rgba(15, 23, 41, 0) 100%);
  --sombra: 0 24px 60px -20px rgba(0, 0, 0, 0.7);
  --botao-bg: var(--marca-laranja);
  --botao-texto: var(--marca-tinta-quente);
  --botao-bg-ativo: var(--marca-laranja-vetor);
  --botao-2-bg: transparent;
  --botao-2-texto: var(--marca-nevoa);
  --botao-2-linha: rgba(236, 232, 225, 0.32);
  --botao-2-bg-ativo: rgba(236, 232, 225, 0.08);
  --card-bg: var(--marca-navy-fundo);
  --card-linha: rgba(236, 232, 225, 0.14);
  --ficha-bg: var(--marca-navy-fundo);
  --ficha-linha: rgba(236, 232, 225, 0.14);
  --ficha-nome: var(--marca-nevoa);
  --ficha-escola: var(--marca-laranja);
  --carimbo-tinta: var(--marca-nevoa);
  --carimbo-acento: var(--marca-laranja);
  --etiqueta-bg: var(--marca-laranja);
  --etiqueta-texto: var(--marca-tinta-quente);
  --etiqueta-linha: transparent;
  --selo-lacuna-linha: var(--marca-laranja);
  --selo-lacuna-texto: var(--marca-laranja);
  --legenda-bg: var(--marca-navy-fundo);
  --legenda-texto: var(--marca-nevoa);
  --legenda-marcador: var(--marca-campo-claro);
  --campo-bg: var(--marca-navy-fundo);
  --campo-texto: var(--marca-nevoa);
  --campo-linha: rgba(236, 232, 225, 0.32);
  --campo-placeholder: var(--marca-nevoa-2);
  --realce-bg: var(--marca-laranja);
  --realce-tinta: var(--marca-tinta-quente);
  --tabela-linha: rgba(236, 232, 225, 0.14);
  --tabela-destaque-bg: rgba(249, 112, 21, 0.1);
}

/* --- CONTEXTO MARCA, o laranja cheio -------------------------------------
   Faixa de virada, etiqueta de oferta, banda de fecho. Área grande de
   laranja é exceção, nunca superfície de leitura longa.
   PROIBIDO: branco sobre laranja (2,85:1). Toda tinta aqui é escura.
   ------------------------------------------------------------------------- */
.contexto-marca {
  --cor-fundo: var(--marca-laranja);
  --cor-fundo-recuado: var(--marca-laranja-vetor);
  --cor-superficie: var(--marca-branco);
  --cor-superficie-2: var(--marca-osso);
  --cor-texto: var(--marca-tinta-quente);
  --cor-texto-secundario: var(--marca-navy);
  --cor-texto-suave: var(--marca-navy);
  --cor-acento: var(--marca-navy);
  --cor-acento-texto: var(--marca-navy);
  --cor-linha: rgba(18, 6, 10, 0.22);
  --cor-linha-forte: rgba(18, 6, 10, 0.4);
  --cor-regua: rgba(18, 6, 10, 0.4);
  --cor-grafismo: rgba(18, 6, 10, 0.055);  /* marca d'água de seção, rev. 04/08 */
  --cor-realce-texto: var(--marca-tinta-quente);  /* laranja QUANDO carrega texto: sobre laranja, 6,97:1 */
  --botao-raio: var(--raio-botao);
  --cor-foco: var(--marca-tinta-quente);
  --cor-foco-halo: var(--marca-laranja);
  --cor-sucesso: var(--marca-tinta-quente);
  --cor-erro: var(--marca-tinta-quente);
  --cor-atencao: var(--marca-tinta-quente);
  --cor-sobre-foto: var(--marca-branco);
  --scrim: linear-gradient(to right, rgba(15, 23, 41, 0.9), rgba(15, 23, 41, 0.75), rgba(15, 23, 41, 0.5));
  --scrim-base: linear-gradient(to top, rgba(15, 23, 41, 0.94), rgba(15, 23, 41, 0.88) 35%, rgba(15, 23, 41, 0.78) 55%, rgba(15, 23, 41, 0.3) 80%, rgba(15, 23, 41, 0) 100%);
  --sombra: 0 20px 44px -22px rgba(18, 6, 10, 0.4);
  --botao-bg: var(--marca-tinta-quente);
  --botao-texto: var(--marca-osso);
  --botao-bg-ativo: var(--marca-navy);
  --botao-2-bg: transparent;
  --botao-2-texto: var(--marca-tinta-quente);
  --botao-2-linha: rgba(18, 6, 10, 0.4);
  --botao-2-bg-ativo: rgba(18, 6, 10, 0.1);
  --card-bg: var(--marca-branco);
  --card-linha: rgba(12, 13, 24, 0.12);
  --ficha-bg: var(--marca-branco);
  --ficha-linha: rgba(12, 13, 24, 0.12);
  --ficha-nome: var(--marca-tinta);
  --ficha-escola: var(--marca-tinta);
  --carimbo-tinta: var(--marca-tinta-quente);
  --carimbo-acento: var(--marca-navy);
  --etiqueta-bg: var(--marca-tinta-quente);
  --etiqueta-texto: var(--marca-osso);
  --etiqueta-linha: transparent;
  --selo-lacuna-linha: var(--marca-tinta-quente);
  --selo-lacuna-texto: var(--marca-tinta-quente);
  --legenda-bg: var(--marca-branco);
  --legenda-texto: var(--marca-tinta);
  --legenda-marcador: var(--marca-campo);
  --campo-bg: var(--marca-branco);
  --campo-texto: var(--marca-tinta);
  --campo-linha: rgba(12, 13, 24, 0.24);
  --campo-placeholder: var(--marca-cinza);
  --realce-bg: var(--marca-tinta-quente);
  --realce-tinta: var(--marca-laranja);
  --tabela-linha: rgba(18, 6, 10, 0.22);
  --tabela-destaque-bg: rgba(255, 255, 255, 0.16);
}

/* --- CONTEXTO FOTO, texto sobre imagem -----------------------------------
   O scrim é o da própria marca (medido no hero da home e nos slides 1 dos
   carrosséis). O texto só vive na faixa forte do gradiente, onde o branco
   dá 15,92:1 e o laranja 5,58:1. O anel de foco é branco com halo navy,
   porque anel colorido some sobre foto (achado real da extração).
   ------------------------------------------------------------------------- */
.contexto-foto {
  --cor-fundo: var(--marca-navy-fundo);
  --cor-fundo-recuado: var(--marca-navy-fundo);
  --cor-superficie: rgba(15, 23, 41, 0.88);
  --cor-superficie-2: rgba(15, 23, 41, 0.72);
  --cor-texto: var(--marca-branco);
  --cor-texto-secundario: var(--marca-vidro);
  --cor-texto-suave: var(--marca-vidro);
  --cor-acento: var(--marca-laranja);
  --cor-acento-texto: var(--marca-areia);
  --cor-linha: rgba(255, 255, 255, 0.28);
  --cor-linha-forte: rgba(255, 255, 255, 0.5);
  --cor-regua: rgba(255, 255, 255, 0.5);
  --cor-grafismo: transparent;  /* marca d'água de seção, rev. 04/08 */
  --cor-realce-texto: var(--marca-laranja);  /* laranja QUANDO carrega texto: letra NÃO entra sobre foto; sobre scrim forte o laranja dá 6,12:1 */
  --botao-raio: var(--raio-botao);
  --cor-foco: var(--marca-branco);
  --cor-foco-halo: var(--marca-navy-fundo);
  --cor-sucesso: var(--marca-menta);
  --cor-erro: var(--marca-coral);
  --cor-atencao: var(--marca-areia);
  --cor-sobre-foto: var(--marca-branco);
  --scrim: linear-gradient(to right, rgba(15, 23, 41, 0.9), rgba(15, 23, 41, 0.75), rgba(15, 23, 41, 0.5));
  --scrim-base: linear-gradient(to top, rgba(15, 23, 41, 0.94), rgba(15, 23, 41, 0.88) 35%, rgba(15, 23, 41, 0.78) 55%, rgba(15, 23, 41, 0.3) 80%, rgba(15, 23, 41, 0) 100%);
  --sombra: 0 24px 60px -20px rgba(0, 0, 0, 0.7);
  --botao-bg: var(--marca-laranja);
  --botao-texto: var(--marca-tinta-quente);
  --botao-bg-ativo: var(--marca-laranja-vetor);
  --botao-2-bg: transparent;
  --botao-2-texto: var(--marca-branco);
  --botao-2-linha: rgba(255, 255, 255, 0.6);
  --botao-2-bg-ativo: rgba(255, 255, 255, 0.14);
  --card-bg: rgba(15, 23, 41, 0.88);
  --card-linha: rgba(255, 255, 255, 0.28);
  --ficha-bg: rgba(15, 23, 41, 0.88);
  --ficha-linha: rgba(255, 255, 255, 0.28);
  --ficha-nome: var(--marca-branco);
  --ficha-escola: var(--marca-laranja);
  --carimbo-tinta: var(--marca-branco);
  --carimbo-acento: var(--marca-laranja);
  --etiqueta-bg: var(--marca-laranja);
  --etiqueta-texto: var(--marca-tinta-quente);
  --etiqueta-linha: transparent;
  --selo-lacuna-linha: var(--marca-areia);
  --selo-lacuna-texto: var(--marca-areia);
  --legenda-bg: rgba(15, 23, 41, 0.92);
  --legenda-texto: var(--marca-branco);
  --legenda-marcador: var(--marca-menta);
  --campo-bg: rgba(15, 23, 41, 0.92);
  --campo-texto: var(--marca-branco);
  --campo-linha: rgba(255, 255, 255, 0.5);
  --campo-placeholder: var(--marca-vidro);
  --realce-bg: var(--marca-laranja);
  --realce-tinta: var(--marca-tinta-quente);
  --tabela-linha: rgba(255, 255, 255, 0.28);
  --tabela-destaque-bg: rgba(255, 255, 255, 0.12);
}

/* =========================================================================
   TABELA DE CONTRASTE, o que passou e o que ficou proibido
   (calculado com composição de alfa sobre o fundo real de cada contexto)

   CONTEXTO CLARO, chão #F6F4F0
     tinta #0C0D18                17,60:1  ok corpo
     cinza #5C6173                 5,60:1  ok corpo
     tinta sobre branco           19,33:1  ok corpo
     sucesso #186040               6,86:1  ok corpo
     erro #A8201A                  6,62:1  ok corpo
     atenção #B84C05               4,69:1  ok corpo
     foco #132A48                 13,16:1  ok componente
     PROIBIDO laranja como texto   2,60:1  reprova em qualquer tamanho
     saída: marca-texto laranja com tinta quente por cima, 6,97:1

   CONTEXTO NAVY, chão #132A48
     névoa #ECE8E1                11,84:1  ok corpo
     névoa-2 #9AA0B2               5,54:1  ok corpo
     laranja #F97015               5,06:1  ok corpo
     laranja sobre ficha #0F1729   6,26:1  ok corpo
     branco                       14,46:1  ok corpo
     sucesso #5BC38C               6,63:1  ok corpo
     erro #FF9A8F                  7,07:1  ok corpo
     foco laranja sobre navy       5,06:1  ok componente
     PROIBIDO texto navy herdado do tema claro sobre ficha: 1,02:1
       (é o bug medido na /readiness; o remap integral impede)

   CONTEXTO MARCA, chão #F97015
     tinta quente #12060A          6,97:1  ok corpo
     navy #132A48                  5,06:1  ok corpo
     botão tinta com texto osso   17,42:1  ok corpo
     foco #12060A                  6,97:1  ok componente
     PROIBIDO branco               2,85:1  reprova em qualquer tamanho
     PROIBIDO branco a 80%         2,31:1  reprova

   CONTEXTO FOTO, scrim forte composto #1A2232
     branco                       15,92:1  ok corpo
     vidro #D8DCE4                11,58:1  ok corpo
     laranja                       5,58:1  ok corpo
     sucesso #7FDCAB               9,65:1  ok corpo
     erro #FFB4AA                  9,37:1  ok corpo
     atenção #FFC48A              10,25:1  ok corpo
     foco branco                  15,92:1  ok componente
     PROIBIDO texto na faixa fraca do scrim (0,5): laranja cai para 3,02:1

   SCRIM DE BASE, --scrim-base, medido no pior caso (foto branca por baixo)
     alfa 0,94 (base da cena)   composto #1D2536  branco 15,33:1  areia 9,86:1
     alfa 0,78 (55% da altura)  composto #444A58  branco  8,87:1  areia 5,71:1
     alfa 0,30 (80% da altura)  composto #B4B6BC  branco  1,93:1  areia 1,32:1
     REGRA 1: o texto da .ah-cena--base vive nos 55% de baixo. Manchete de mais
     de 2 linhas empurra o rótulo para a faixa fraca; nesse caso a manchete
     encurta ou vira .ah-subtitulo. É o piso que --cena-altura protege.
     REGRA 2: sobre foto o acento de TEXTO é a areia #FFC48A, não o laranja.
     O laranja sobre scrim varia de 5,37:1 (base) a 1,64:1 (60% da altura) e
     não é seguro; a areia sustenta a faixa inteira de texto. O laranja
     continua sendo --cor-acento (régua, filete, preenchimento de etiqueta).
     PROIBIDO ember #FFB37E como texto em qualquer chão claro: 1,59:1
   ========================================================================= */

/* =========================================================================
   MOVIMENTO REDUZIDO
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-rapida: 1ms;
    --dur-padrao: 1ms;
    --dur-entrada: 1ms;
    --dur-carimbo: 1ms;
  }
}