/* ============================================================
   BIX · Camada 5: identidade visual do manual (set/2026)
   MANUAL DE IDENTIDADE VISUAL BIX_2026.pdf

   Carregada por último, depois de bix-ajustes.css. Tudo que veio
   do manual está aqui: tipografia, itálico real, grafite e o
   pattern da marca. Para reverter a rodada inteira, basta tirar
   este arquivo dos <link> das 9 páginas.

   O que o manual define:
     Tipografia principal .... Plus Jakarta Sans (Google Fonts)
                               Regular para texto, Bold para títulos
     Detalhes ................ Fraunces (Google Fonts), Regular ou Itálica
     Cor principal ........... Azul Petróleo #0E516A
     Cor adicional ........... Amarelo #F9B321
     Cor adicional secundária  Grafite #575756
     Patterns ................ elementos do símbolo, cheios ou em linha
   ============================================================ */

/* ============================================================
   1. TIPOGRAFIA
   ------------------------------------------------------------
   Sora e IBM Plex Mono saem do site. Os dois papéis tipográficos
   antigos continuam existindo como tokens, então nenhuma das
   camadas anteriores precisou ser reescrita:

     --sans  vira Plus Jakarta Sans (títulos e texto)
     --mono  vira Plus Jakarta Sans também (eyebrows, labels e
             números). O manual só autoriza duas fontes, então o
             papel "técnico" passa a ser feito por caixa alta +
             espacejamento, que já estavam em todas essas regras.
     --serif entra novo: Fraunces, para os detalhes em itálico.

   Se um dia a Plex Mono for reaprovada só para dados numéricos,
   é reescrever a linha do --mono aqui.
   ============================================================ */
:root {
  --sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --serif: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
}

/* Jakarta tem altura de x (0,53) e altura de caixa alta (0,745)
   maiores que as da Sora, então o mesmo font-size rende um texto
   opticamente maior. No corpo isso é bem-vindo (o pedido da
   rodada anterior foi justamente aumentar), nos tamanhos de
   display gera peso demais: as réguas de título descem ~5%. */
:root {
  --pg-d1: clamp(33px, 3.5vw, 59px);
  --pg-d2: clamp(25px, 2.5vw, 38px);
  --display: clamp(1.62rem, 3vw + 0.26rem, 3.7rem);
}

.hero__title,
.statement {
  font-size: var(--display);
  letter-spacing: -0.032em;
}

.pillars__title {
  font-size: clamp(1.9rem, 3.15vw + 0.5rem, 3.42rem);
  letter-spacing: -0.034em;
}

/* os dois títulos que não passam pelos tokens: o hero dos cases e
   o da página de contato. Mesma redução de ~5%. */
.cs-hero h1 {
  font-size: clamp(38px, 5.3vw, 84px);
  letter-spacing: -0.044em;
}

.ct-left h1 {
  font-size: clamp(34px, 3.8vw, 61px);
  letter-spacing: -0.038em;
}

/* Jakarta é uma grotesca de terminais retos: em corpo grande ela
   pede um pouco mais de aperto que a Sora para não abrir vãos
   entre as palavras. Abaixo do display nada muda. */
.mf-hero h1,
.mt-hero h1 {
  letter-spacing: -0.038em;
}

body {
  font-optical-sizing: auto;
  /* algarismos de mesma largura: os números 01–04 das etapas, as
     fichas técnicas dos cases e os anos das certificações eram
     alinhados pela Plex Mono. */
  font-variant-numeric: tabular-nums;
}

/* Opção de marca, desligada por padrão.
   O manual pede Bold nos títulos. O site usa display leve (300)
   nos títulos grandes, que foi a direção aprovada nas rodadas
   anteriores e é o que sustenta o tom editorial. Se o cliente
   quiser a leitura literal do manual, é só acrescentar a classe
   `tipo--titulos-bold` no <body> das 9 páginas. */
body.tipo--titulos-bold .statement,
body.tipo--titulos-bold .mf-hero h1,
body.tipo--titulos-bold .mt-hero h1,
body.tipo--titulos-bold .mf-where__txt h2,
body.tipo--titulos-bold .mf-inst__head h2 {
  font-weight: 700;
  letter-spacing: -0.042em;
}

/* ============================================================
   2. ITÁLICO (pendência antiga, agora destravada)
   ------------------------------------------------------------
   O pedido "adicionar a versão itálico em alguns locais" estava
   parado porque a Sora não tem itálico e o oblíquo sintético
   empobrece o texto. A Fraunces do manual tem itálico de verdade,
   e é justamente a fonte de detalhe.

   Onde entra: só nas palavras já marcadas como ênfase no copy
   (<em>), nos statements e nos h1 das internas. O destaque do
   hero (.accent) continua em Jakarta, como foi aprovado na
   rodada de julho.

   A Fraunces tem altura de x menor (0,47 contra 0,53 da Jakarta),
   então precisa de ~7% a mais de corpo para parecer do mesmo
   tamanho na mesma linha.
   ============================================================ */
.statement em,
.mf-hero h1 em,
.mt-hero h1 em,
.mf-certs h2 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.07em;
  letter-spacing: -0.012em;
  font-optical-sizing: auto;
}

/* a variante ativa é a `emph--solid`: amarelo da marca, sem tarja
   e sem halo. O peso volta a 400 porque a Fraunces itálica já
   marca a diferença pela forma. */
body.emph--solid .statement em {
  font-weight: 400;
}

/* Sobre · certificações: a camada 4 tinha desligado o itálico
   ("font-style: normal") porque não havia itálico real. Agora há. */
.mf-certs h2 em {
  font-style: italic;
  color: var(--yellow-deep);
}

/* ============================================================
   3. GRAFITE: a cor adicional secundária do manual
   ------------------------------------------------------------
   Os textos de apoio usavam cinzas com fundo de petróleo
   (#3A535B, #6B7F85). Passam a usar o grafite #575756 do manual
   e seus clareamentos. Os títulos continuam no petróleo.
   Contraste sobre branco: 7,0:1 no corpo e 4,6:1 nos labels.
   ============================================================ */
:root {
  --graphite: #575756;
  --ink-70: #575756;
  --ink-45: #797978;
  --ink-30: #a3a3a2;
}

/* ============================================================
   4. PATTERN DA MARCA
   ------------------------------------------------------------
   Desenhado a partir dos próprios caminhos do símbolo
   (assets/img/mark.svg), em amarelo a 8,5% de opacidade. Entra
   só no rodapé: é textura de fundo, não elemento de leitura.
   O CTA final ficou de fora de propósito, porque ele já tem o
   halo amarelo e os dois blocos são vizinhos.
   ============================================================ */
.footer {
  background-color: var(--blue-950);
  background-image: url('img/pattern-bix.svg');
  background-size: 420px 420px;
  background-position: right -70px top -60px;
  background-repeat: repeat;
}

/* ============================================================
   5. PILARES DO MÉTODO: filete do modelo do cliente
   ------------------------------------------------------------
   O modelo enviado no PDF de ajustes traz um filete amarelo curto
   entre o subtítulo e os cartões. Estava faltando na rodada de
   julho; entra aqui por ser detalhe de marca.
   ============================================================ */
.mt-pilares__head p::after {
  content: '';
  display: block;
  width: 64px;
  height: 3px;
  margin: clamp(16px, 2vw, 22px) auto 0;
  background: var(--yellow);
  border-radius: 2px;
}