/* ==========================================================================
   Zinho Toda Hora — tokens da LP pública.
   ARQUIVO ÚNICO DE COR, CORPO E ESPAÇAMENTO. Trocar a identidade visual da
   LP = trocar linhas AQUI. Nenhum HEX pode aparecer em lp.css, cta.css ou
   anim.css. Verificação de go-live (Fase 5) depende disso.
   ========================================================================== */

/* --- Tipografia: a webfont, sem NENHUM override --------------------------
   size-adjust NÃO vai aqui. Aplicado à própria webfont de display, ele renderiza
   a display 8% maior que a escala medida nas fatias E não elimina o shift — o
   shift acontece ENTRE o fallback e a webfont. Quem carrega os overrides é a
   face de fallback abaixo (RESEARCH §6.2).

   FONTE DE MARCA EMBUTIDA EM 2026-08-07 (bloqueio externo #2 FECHADO).
   O .woff2 referenciado no `src:` abaixo foi gerado nesta máquina com fontTools
   4.63.0 a partir do arquivo Regular da família, em `_projetos/` (o caminho
   completo está no SUMMARY da tarefa 260807-pgo; não é repetido aqui porque
   `grep` do nome do arquivo é critério de aceite e não distingue código de
   comentário), subset Latin-1 + pontuação tipográfica (U+0020-007E, U+00A0-00FF, U+2010-2014,
   U+2018-201D, U+2026, U+20AC), features kern/liga/ccmp preservadas: 242 glifos,
   ~150 KB. A CitrusGothic tem outlines densas (o glifo `B` sozinho tem 1055
   operações de desenho) — os ~150 KB são o desenho, não desperdício de subset.
   O subset é Latin-1 e NÃO só-maiúsculas de propósito: nenhum .css daqui aplica
   text-transform ao display, o caixa-alta da peça vem do CONTEÚDO gravado no
   banco, e o cliente edita esse conteúdo toda semana. Um subset só-maiúsculas
   faria a primeira minúscula digitada cair no Arial, sem erro e sem aviso na
   tela — os 45 KB economizados não pagam esse modo de falha.
   A fonte substituta declarada no plano 02-0x saiu daqui. O .woff2 dela continua
   em `assets/fonts/`, órfão e sem nenhuma referência, só como caminho de
   reversão de 1 linha até o aceite da Fase 5 — está nomeado no STATE.
   (O nome dela não é escrito neste arquivo de propósito: `grep` é o critério de
   aceite da troca e não distingue código de comentário.)

   `--ff-texto` (Barlow Semi Condensed 600) NÃO mudou nesta troca e continua
   sendo o corpo de texto da LP — a troca foi exclusivamente da família de
   display.

   TROCAR A FONTE DE DISPLAY DE NOVO exige DUAS coisas, nunca só o `src:`:
     1. Recalcular size-adjust/ascent-override/descent-override da face
        '*Fallback' correspondente contra a métrica REAL da fonte nova
        (capsizecss/metrics ou equivalente) — sem isso o CLS documentado
        no bloco de fallback volta;
     2. Reexecutar `node scripts/regua-bloco.mjs http://zinho.test/ "#bloco-5"`
        — largura média de caractere diferente muda o PONTO DE QUEBRA dos
        títulos, que é critério contratual de fidelidade (gate do design-chief,
        Fase 02), e o `max-width: 980px` do título foi varrido no navegador
        contra a métrica da fonte anterior.
   As duas famílias (`--ff-display`/`--ff-texto`) seguem sendo a ÚNICA porta de
   tipografia de assets/css/ — mas NÃO do projeto inteiro: a prévia do admin
   declara o seu próprio @font-face em admin/css/admin-blocos.css e tem que ser
   trocada junto, ou a prévia mente. */
@font-face {
  font-family: 'Citrus Gothic';
  src: url('../fonts/citrus-gothic-400-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  src: url('../fonts/barlow-semi-condensed-600-latin.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

/* --- Fallbacks calibrados: é ONDE o CLS de troca de fonte morre -----------
   Números derivados das métricas reais (@capsizecss/metrics 4.2.0):
   CitrusGothic upem 1000 · asc 1036 · desc -251 · lineGap 0 · xWidthAvg 500
   BarlowSC upem 1000 · asc 1000 · desc -200 · xWidthAvg 385
   Arial  upem 2048 · asc 1854 · desc -434 · xWidthAvg 904
   Sem isso, "TEM AQUELE PROVOLONE QUE FAZ TODA A DIFERENÇA." quebra em 3
   linhas no fallback e volta para 2 quando a CitrusGothic chega — shift de 62px
   em 8 blocos, e os start/end do ScrollTrigger ficam desalinhados.
   ATENÇÃO À LARGURA: relativo ao Arial, a substituta que saiu daqui tinha
   largura média de caractere 0,92 e a CitrusGothic tem 1,13 — a fonte de marca
   é ~23% MAIS LARGA por caractere no mesmo font-size. É exatamente isso
   que torna `scripts/regua-bloco.mjs` obrigatório depois desta troca: o ponto
   de quebra dos títulos mudou de lugar, e ponto de quebra é o critério de
   fidelidade tipográfica do gate do design-chief (Fase 02), não a contagem de
   linhas. */
@font-face {
  font-family: 'Citrus Gothic Fallback';
  src: local('Arial'), local('Helvetica'), local('Liberation Sans');
  size-adjust: 113.27%; ascent-override: 91.46%; descent-override: 22.16%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Barlow SC Fallback';
  src: local('Arial'), local('Helvetica'), local('Liberation Sans');
  size-adjust: 87.22%; ascent-override: 114.65%; descent-override: 22.93%;
  line-gap-override: 0%;
}

:root {
  /* --- Famílias: 2 famílias, 1 weight cada. O destaque do PDF é CORPO, não peso. */
  --ff-display: 'Citrus Gothic', 'Citrus Gothic Fallback', sans-serif;
  --ff-texto:   'Barlow Semi Condensed', 'Barlow SC Fallback', sans-serif;

  /* --- Escala tipográfica: exatamente 4 tamanhos base.
     line-height 0.95/0.92 é MEDIDO nas fatias — nas duas linhas do título de
     produto as ascendentes da linha 2 tangenciam as descendentes da linha 1.
     Um line-height 1.2 de default quebraria o bloco tipográfico da peça. */
  --fs-legal:  clamp(13px, 1.05vw, 15px);  /* piso de 13px = RDC ANVISA 26/2015 (CONTÉM GLÚTEN) */
  --fs-corpo:  clamp(16px, 1.4vw, 21px);
  --fs-titulo: clamp(28px, 5.4vw, 62px);
  --fs-hero:   clamp(40px, 8.2vw, 96px);
  --lh-legal:  1.5;
  --lh-corpo:  1.5;
  --lh-titulo: 0.95;
  --lh-hero:   0.92;
  --ls-legal:  0.01em;
  --ls-corpo:  0.02em;
  --ls-titulo: 0.005em;
  --ls-hero:   0;

  /* --- Destaque: token DERIVADO, não um 5º tamanho.
     1.45 é medição: Moça TEM ~42px vs PÃOZINHO ~62px (1.48);
     Tirolez TEM AQUELE ~40px vs PROVOLONE ~60px (1.50). */
  --fs-destaque: calc(var(--fs-titulo) * 1.45);

  /* --- Espaçamento base 4. Nenhum valor fora desta lista entra no CSS. */
  --sp-4: 4px;  --sp-8: 8px;   --sp-16: 16px; --sp-24: 24px; --sp-32: 32px;
  --sp-48: 48px; --sp-64: 64px; --sp-96: 96px; --sp-128: 128px;

  /* --- Exceções declaradas (as únicas permitidas) */
  --alvo-toque: 44px;              /* WCAG 2.2 AA 2.5.8 pede 24px; 44px é o piso de conversão */
  --cta-h: 88px;                   /* RESERVADO ESTATICAMENTE. Medir por JS é CLS garantido */
  --bloco-h-min: clamp(560px, 82vw, 940px);

  /* --- Cor 60/30/10 */
  --creme:          #EED4AF;       /* dominante — fundo dos 8 blocos */
  --marrom:         #8A4025;       /* tinta — TODO texto sobre creme. 5.16:1 */
  --destaque-zinho: #B05F1E;       /* acento — SÓ as 4 ocorrências de {{ }}. 3.26:1 sobre creme */

  /* --- CTA (único elemento interativo da LP) */
  --cta-fundo:    #C4262E;
  --cta-texto:    #F6E7CE;         /* 4.71:1 sobre --cta-fundo */
  --cta-destaque: #FFD36B;         /* 4.03:1 sobre --cta-fundo */
  --cta-pilula:   #EFA23D;
  --cta-rotulo:   #5A2A16;         /* 5.57:1 sobre --cta-pilula. Divergência #2 do UI-SPEC §11 */
  --cta-borda:    #F6E7CE;         /* 4.71:1 — WCAG 1.4.11 */

  /* --- Foco: anel DUPLO, porque o CTA existe sobre dois fundos e nenhuma cor
     única passa 3:1 nos dois. Branco resolve o vermelho (5.73:1), escuro
     resolve o creme (11.96:1). Nunca outline:none sem substituto. */
  --foco-interno: #FFFFFF;
  --foco-externo: #1F1B16;

  /* --- Cores de marca parceira. TODAS de FUNDO, NENHUMA de texto.
     Nenhum texto da LP fica sobre uma delas — confirmado fatia a fatia. É essa
     propriedade que resolve o Tirolez a 1.10:1 sem tocar no amarelo. */
  --marca-prestigio: #DF3124;  /* TODO: HEX oficial — bloqueio externo #4 */
  --marca-tirolez:   #FFC609;  /* TODO: HEX oficial — bloqueio externo #4 */
  --marca-aviacao:   #F78A34;  /* TODO: HEX oficial — bloqueio externo #4 */
  --marca-catupiry:  #C53841;  /* TODO: HEX oficial — bloqueio externo #4 */
  --marca-moca:      #32549E;  /* TODO: HEX oficial — bloqueio externo #4 — sem uso visual no v1 */
}

/* --- O CTA some do fluxo em telas largas: ele vira card ancorado, não barra. */
@media (min-width: 1024px) {
  :root { --cta-h: 0px; }
}