/* =============================================================================
   Viplink Brasil — Design System v2 — camada TIPOGRAFIA
   Archivo (display e texto) + Chivo Mono (numero, etiqueta, dado).

   Conceito: PLANO, CORTE, VAO.
   A escala tem quatro degraus juntos (12 / 15 / 18 / 22) e depois dois saltos
   violentos (22 -> 46 -> 116). O agrupamento e o plano. O salto e o corte. A
   razao vazia entre 22 e 46, onde nada mora, e o vao. Uma escala modular macia
   de 1.25 em todos os degraus seria o oposto: uma chapa sem corte nenhum.

   Nada aqui define cor. Hierarquia e tamanho, peso, caixa e familia — nunca cor.

   Sem build step: propriedades customizadas nativas, escritas a mao.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. FACES

   As tres familias declaradas abaixo tem nome de PAPEL, nao de produto. Nenhuma
   outra linha deste arquivo (nem de qualquer outro) escreve "Archivo" ou
   "Chivo Mono". E isso que torna a troca pela Guanabara uma edicao de @font-face
   e nada mais. Ver a secao 7.

   "Viplink Display" e "Viplink Texto" apontam hoje para o MESMO arquivo. Duas
   regras @font-face com o mesmo src resolvem para um unico download — nao custa
   byte nenhum, e deixa o lugar pronto para a Guanabara, que vem em dois arquivos
   (Display e Sans).

   Os quatro woff2 sao os arquivos variaveis que o Google serve. Nao existe opcao
   estatica: pedir wght@400;500;600;700 e pedir wght@100..900 devolve a mesma URL.
   Um arquivo por subset cobre os 900 pesos.
       archivo-latin.woff2        34.940 bytes   (wght 100-900)
       archivo-latin-ext.woff2    32.672 bytes
       chivo-mono-latin.woff2     26.380 bytes   (wght 100-900)
       chivo-mono-latin-ext.woff2 22.944 bytes
   Total 116.936 bytes para duas familias. A Inter sozinha, hoje, pesa 133.704.

   latin-ext NAO e requisito do portugues. Todo acento nosso — a e i o u a o c —
   mora em Latin-1 (U+0000-00FF), que esta no subset `latin`. O latin-ext entra
   como rede para nome proprio estrangeiro (creator polones, marca turca) e para
   simbolos de moeda fora do intervalo basico. O navegador so baixa esses 55 KB
   quando um caractere do intervalo aparece na pagina. Por isso ele e declarado,
   mas nunca precarregado.
   -------------------------------------------------------------------------- */

/* --- Viplink Display — hoje Archivo variavel ------------------------------ */
@font-face {
  font-family: "Viplink Display";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Viplink Display";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Viplink Texto — hoje Archivo variavel (mesmo arquivo, um download) --- */
@font-face {
  font-family: "Viplink Texto";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Viplink Texto";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Viplink Dado — Chivo Mono variavel. Nao troca junto com a Guanabara. - */
@font-face {
  font-family: "Viplink Dado";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/chivo-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Viplink Dado";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/chivo-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* -----------------------------------------------------------------------------
   2. TOKENS

   Dezesseis. As classes da secao 4 cobrem o uso normal; estes tokens existem
   para o caso que as classes nao preveem.
   -------------------------------------------------------------------------- */
:root {
  /* familias — a pilha de recurso e escolhida por metrica, nao por habito.
     A SF (-apple-system) tem altura-x 0.52 contra 0.526 da Archivo; a Segoe UI
     0.50; a Arial 0.519 e e estreita. Sao os tres recursos que menos pulam
     quando o swap acontece. Helvetica esta fora: no Windows ela vira Arial e no
     Mac o -apple-system ganha antes. */
  --fonte-titulo: "Viplink Display", -apple-system, "Segoe UI", Arial, sans-serif;
  --fonte-texto:  "Viplink Texto", -apple-system, "Segoe UI", Arial, sans-serif;
  --fonte-dado:   "Viplink Dado", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* pesos — tres. O eixo vai de 100 a 900, mas o sistema usa 400/500/600.
     600 no display, nao 700: a Archivo em 700 a 116px vira grito, e o leitor
     e VP de uma das maiores empresas do pais. Aloisio Magalhaes e Wollner nao
     resolveram identidade institucional com peso, resolveram com espaco. */
  --peso-corpo:  400;
  --peso-medio:  500;
  --peso-forte:  600;

  /* escala — seis degraus, cada um com um uso.
     Fluido so onde escalar e o trabalho do degrau (display e titulo). Corpo,
     apoio e etiqueta sao fixos: texto de 15px que encolhe no celular e falha de
     legibilidade, e 12px que cresce para 13px num monitor 4K e ruido. */
  --t-etiqueta:   0.75rem;    /* 12px — rotulo em caixa alta, mono */
  --t-apoio:      0.9375rem;  /* 15px — meta, legenda, rodape, ajuda de campo */
  --t-corpo:      1.125rem;   /* 18px — texto corrido */
  --t-subtitulo:  1.375rem;   /* 22px — h3, titulo de cartao, linha de abertura */
  --t-titulo:     clamp(1.875rem, 1.48rem + 1.74vw, 2.875rem);  /* 30px -> 46px */
  --t-display:    clamp(2.875rem, 1.42rem + 6.48vw, 7.25rem);   /* 46px -> 116px */

  /* medidas — em ch, que se corrige sozinho conforme o tamanho muda.
     ATENCAO: 1ch NAO e 1 caractere. Na Archivo o avanco do "0" e 0.573em e o
     avanco medio de uma frase real em portugues e 0.4601em, entao 1ch vale 1.25
     caracteres. Medido nos woff2 com fontTools, nao estimado.
        54ch = 67 caracteres  <- dentro da faixa 60-75 exigida
        48ch = 60 caracteres  (limite inferior)
        60ch = 75 caracteres  (limite superior)
     O valor 54ch vale para qualquer degrau: a 18px da 557px, a 22px da 681px, e
     os dois dao os mesmos 67 caracteres. */
  --medida:         54ch;  /* texto corrido: 67 caracteres */
  --medida-titulo:  22ch;  /* h2: 27 caracteres */
  --medida-display: 12ch;  /* h1: 15 caracteres — o olho pega a linha grande de
                              uma fixacao so; medida de leitura aqui seria erro */

  /* mono dentro de uma frase da Archivo. A Chivo Mono tem avanco 0.600em contra
     0.460em da Archivo: 30% mais larga. Sem correcao, "R$ 30 mil" no meio de um
     paragrafo parece um degrau acima. 0.94em tira a impressao de largura sem
     derrubar a altura-x (0.511 da mono contra 0.526 da Archivo — ela ja e
     menor, entao 0.875em, a convencao de codigo, seria pequena demais aqui). */
  --mono-inline: 0.94em;
}

/* -----------------------------------------------------------------------------
   3. BASE
   -------------------------------------------------------------------------- */
:where(body) {
  font-family: var(--fonte-texto);
  font-size: var(--t-corpo);
  font-weight: var(--peso-corpo);
  line-height: 1.65;
  letter-spacing: 0;
  /* `auto` = subpixel. No claro, o texto escuro sobre cal ja parece mais fino do
     que e; `antialiased` afinaria de novo. No escuro a conta inverte — ver a
     secao 6. Isto e o contrario do que o v1 fazia. */
  -webkit-font-smoothing: auto;
}

/* pretty resolve orfao: impede a ultima linha do paragrafo com uma palavra so.
   Degrada em silencio onde nao ha suporte. */
:where(p, li, dd) { text-wrap: pretty; }

/* -----------------------------------------------------------------------------
   4. OS SEIS DEGRAUS

   Cada classe fecha o quarteto tamanho + peso + entrelinha + tracking. Ninguem
   precisa lembrar que o display anda com -0.035em: a classe sabe.

   Tracking segue a compensacao optica: corpo grande fecha, corpo pequeno abre.
   A Archivo e uma grotesca de espacejamento generoso — em 116px as palavras se
   soltam e o titulo desmancha; em 12px em caixa alta as letras colam.
   -------------------------------------------------------------------------- */

/* DISPLAY — 46px no celular, 116px a partir de 1440px.
   Por que 116. Abaixo de ~64px a Archivo ainda e so texto grande; o corte dos
   terminais e o lado reto do "o" e do "e" — o que da carater a face — so viram
   objeto visivel acima disso. Acima de ~130px a frase para de ser frase e vira
   logotipo, e quem le e VP, nao Gen-Z. 116px com medida de 12ch ocupa 798px de
   um conteiner de 1140: a manchete toma dois tercos do plano e o terco restante
   fica vazio de proposito. O vao nao e sobra, e a composicao.
   Cabe na dobra: 3 linhas a 116/1.0 = 348px; com cabecalho, etiqueta, linha de
   abertura e botoes fecha em ~662px, dentro de um 1440x900.

   Entrelinha 1.0 e nao 0.92. O portugues e cheio de til e circunflexo, e a caixa
   natural da Archivo e 1.088em (asc 0.878 + desc 0.210). Abaixo de 1.0 o "a" de
   "campanha" na linha de baixo comeca a bater no "g" da linha de cima. 1.0 ja
   le como corte e nao cobra esse preco.

   Tracking -0.035em = -4.1px por vao em 116px. -0.05em seria onde "rn" comeca a
   virar "m" e a manchete vira marca. */
.t-display {
  font-family: var(--fonte-titulo);
  font-size: var(--t-display);
  font-weight: var(--peso-forte);
  line-height: 1.0;
  letter-spacing: -0.035em;
  max-width: var(--medida-display);
  text-wrap: balance;
}

/* TITULO — 30px -> 46px. h2. */
.t-titulo {
  font-family: var(--fonte-titulo);
  font-size: var(--t-titulo);
  font-weight: var(--peso-forte);
  line-height: 1.1;
  letter-spacing: -0.022em;
  max-width: var(--medida-titulo);
  text-wrap: balance;
}

/* SUBTITULO — 22px. Faz dois servicos: h3 e linha de abertura de secao.
   Reaproveitar e melhor do que inventar um degrau de 20px que ninguem distingue
   de 18px. A diferenca de 22 para 18 e 1.22x: visivel, e o minimo que e. */
.t-subtitulo {
  font-family: var(--fonte-titulo);
  font-size: var(--t-subtitulo);
  font-weight: var(--peso-medio);
  line-height: 1.35;
  letter-spacing: -0.015em;
  max-width: var(--medida);
  text-wrap: balance;
}

/* CORPO — 18px, nao os 17px do v1. Nao e gosto: a altura-x da Archivo e 0.526em
   contra 0.546em da Inter, 3.7% menor. 18px de Archivo le do tamanho de 17px de
   Inter. E como a Archivo e 7.7% mais estreita (avanco medio 0.4601 contra
   0.4985), 18px dela ainda cabe mais caractere por linha do que 17px de Inter —
   sobe o tamanho sem perder densidade. */
.t-corpo {
  font-family: var(--fonte-texto);
  font-size: var(--t-corpo);
  font-weight: var(--peso-corpo);
  line-height: 1.65;
  letter-spacing: 0;
  max-width: var(--medida);
}

/* APOIO — 15px. Um unico degrau secundario. O v1 tinha 15, 14 e 13px fazendo o
   mesmo trabalho; a diferenca entre eles nao comunica nada. 15 e nao 14 porque
   14px de Archivo le como 13.5px de Inter, e o leitor tem 45 anos. */
.t-apoio {
  font-family: var(--fonte-texto);
  font-size: var(--t-apoio);
  font-weight: var(--peso-corpo);
  line-height: 1.5;
  letter-spacing: 0.005em;
  max-width: var(--medida);
}

/* ETIQUETA — 12px, caixa alta, Chivo Mono, peso 500.
   Tracking 0.12em e nao 0.16em do v1: a mono ja e larga por construcao (avanco
   0.600em), e 0.16em em cima disso le como etiqueta de perfume. 0.12em e o que
   caixa alta precisa para nao colar — maiuscula nao tem ascendente nem
   descendente para criar ritmo, entao o ritmo vem do vao.
   Peso 500, nao 400: a 12px com esse tracking, 400 some. */
.t-etiqueta {
  font-family: var(--fonte-dado);
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-medio);
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* -----------------------------------------------------------------------------
   5. ONDE A CHIVO MONO ENTRA E ONDE NUNCA ENTRA

   A regra util, em uma frase: se voce leria em voz alta digito por digito, ou
   se e um rotulo que se escaneia em vez de se ler, e Chivo Mono. Se e frase,
   e Archivo.

   ENTRA
     etiqueta de secao / eyebrow ......... "PROCESSO", "GARANTIA"
     numero que e o dado da secao ........ "14 dias", "4 a 5 semanas"
     valor ............................... "R$ 30 mil"
     cabecalho e celula numerica de tabela
     metadado de post .................... data, tempo de leitura, categoria
     linha juridica do rodape ............ CNPJ 48.834.417/0001-86 — e o fato mais
                                           checavel da pagina; em mono le como
                                           registro, nao como copy
     <code>, <pre>, <kbd>

   NUNCA ENTRA
     frase corrida — mono custa 10-15% de velocidade de leitura. Nunca em <p>,
       nunca em <li> de prosa, nunca na linha de abertura.
     titulo de qualquer nivel — h2 em mono le como comentario de codigo, nao como
       declaracao institucional.
     rotulo de botao — botao e acao em palavra, nao dado.
     link de navegacao.
     o wordmark. "Viplink" e Archivo (depois Guanabara). Nunca mono.
     qualquer string acima de ~6 palavras.

   TAMANHO DO NUMERO: nao existe degrau proprio para numero. O numero assume o
   degrau do contexto dele, em Chivo Mono. No bloco de etapas isso e
   --t-subtitulo (22px); se o numero for o heroi da secao, e --t-titulo. Zero
   token novo, e a regra cabe numa linha.
   -------------------------------------------------------------------------- */
.t-dado {
  font-family: var(--fonte-dado);
  font-weight: var(--peso-medio);
  letter-spacing: 0;
  font-size: inherit;
}

/* mono no meio de uma frase da Archivo — so aqui a correcao optica se aplica */
:where(p, li, dd, td) .t-dado,
:where(code, kbd) {
  font-family: var(--fonte-dado);
  font-size: var(--mono-inline);
}

/* -----------------------------------------------------------------------------
   6. MODO ESCURO — correcao tipografica, nao inversao

   Texto claro sobre fundo escuro floresce: o olho espalha a luz e a letra le
   mais pesada e mais fechada do que e. Sao tres correcoes, uma linha cada.

   1. Peso um passo abaixo. So da para fazer isso porque a face e variavel —
      400/500/600 viram 370/470/560. E o unico retorno concreto de ter escolhido
      variavel em vez de estatica, e vale sozinho pela decisao.
   2. -webkit-font-smoothing: antialiased. No escuro ele afina o florescimento e
      corrige. No claro ele afinaria o que ja esta fino — por isso a base usa
      `auto`.
   3. Display um pouco menos apertado. O florescimento fecha os vaos entre letra,
      e -0.035em em 116px no escuro chega a colar. -0.028em devolve o ar.
      So no display: nos degraus menores o efeito nao aparece.

   Nenhuma cor definida aqui — cor e de outra camada.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --peso-corpo: 370;
    --peso-medio: 470;
    --peso-forte: 560;
  }
  :root:not([data-tema="claro"]) body { -webkit-font-smoothing: antialiased; }
  :root:not([data-tema="claro"]) .t-display { letter-spacing: -0.028em; }
}
:root[data-tema="escuro"] {
  --peso-corpo: 370;
  --peso-medio: 470;
  --peso-forte: 560;
}
:root[data-tema="escuro"] body { -webkit-font-smoothing: antialiased; }
:root[data-tema="escuro"] .t-display { letter-spacing: -0.028em; }

/* -----------------------------------------------------------------------------
   7. TROCAR PARA GUANABARA DISPLAY + SANS

   Nenhuma linha fora da secao 1 escreve o nome de uma fonte. Trocar e:

   1. Colocar os woff2 em /assets/fonts/.
   2. Em "Viplink Display", trocar o src pelo arquivo da Guanabara Display.
      Em "Viplink Texto", trocar o src pelo arquivo da Guanabara Sans.
      "Viplink Dado" fica: a Guanabara nao tem mono.
   3. Se a Guanabara vier estatica em vez de variavel, trocar
      `font-weight: 100 900` pelo peso de cada arquivo e repetir o bloco por
      peso. Os tokens --peso-* continuam valendo; o modo escuro perde a correcao
      fracionada de peso (370/470/560 arredondam para 400/500/600) — e a unica
      coisa que se perde.
   4. Trocar o preload em layout.php para o novo arquivo latin.

   O PASSO QUE NAO PODE SER ESQUECIDO — metrica.
   Toda face tem altura-x e avanco proprios. Se a Guanabara for mais estreita que
   a Archivo, os mesmos 54ch deixam de dar 67 caracteres e a regra de 60-75 quebra
   em silencio. A correcao mora DENTRO do @font-face, entao a promessa continua
   de pe. Meça os dois numeros da Guanabara e ajuste:

       @font-face {
         font-family: "Viplink Texto";
         src: url("/assets/fonts/guanabara-sans-latin.woff2") format("woff2");
         size-adjust: calc(0.526 / <altura-x da Guanabara em em> * 100%);
         ascent-override: 87.8%;    <- metrica da Archivo, para nao mudar leading
         descent-override: 21.0%;
       }

   Numeros da Archivo para bater contra (medidos com fontTools nos woff2):
       unidades por em ......... 1000
       altura-x ................ 0.526 em
       altura de maiuscula ..... 0.686 em
       avanco do "0" ........... 0.573 em
       avanco medio (pt-BR) .... 0.4601 em
       ascendente / descendente  0.878 / -0.210

   Com size-adjust acertado, todo clamp, todo ch e toda entrelinha deste arquivo
   continuam corretos sem uma unica edicao fora do @font-face.
   -------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
   8. PADROES DE ELEMENTO

   Em :where() para ficarem com especificidade zero: qualquer classe da secao 4
   sobrescreve sem !important e sem briga de seletor.
   -------------------------------------------------------------------------- */
:where(h1) {
  font-family: var(--fonte-titulo);
  font-size: var(--t-display);
  font-weight: var(--peso-forte);
  line-height: 1.0;
  letter-spacing: -0.035em;
  max-width: var(--medida-display);
  text-wrap: balance;
  margin: 0;
}
:where(h2) {
  font-family: var(--fonte-titulo);
  font-size: var(--t-titulo);
  font-weight: var(--peso-forte);
  line-height: 1.1;
  letter-spacing: -0.022em;
  max-width: var(--medida-titulo);
  text-wrap: balance;
  margin: 0;
}
:where(h3, h4, h5, h6) {
  font-family: var(--fonte-titulo);
  font-size: var(--t-subtitulo);
  font-weight: var(--peso-medio);
  line-height: 1.35;
  letter-spacing: -0.015em;
  max-width: var(--medida);
  text-wrap: balance;
  margin: 0;
}
:where(p) { max-width: var(--medida); margin: 0; }

/* enfase — 600 e nao 700. Ao lado de 400 em 18px, 700 e um salto; 600 e o peso
   que le como enfase e nao como outro paragrafo. */
:where(strong, b) { font-weight: var(--peso-forte); }

/* tabela: cabecalho e dado em mono. E o unico lugar onde a mono ocupa area
   grande, e e justamente onde ela deve — tabela e registro de midia. */
:where(th) {
  font-family: var(--fonte-dado);
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-medio);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: left;
}

:where(code, pre, kbd, samp) {
  font-family: var(--fonte-dado);
  font-weight: var(--peso-corpo);
  letter-spacing: 0;
}
:where(pre) { font-size: var(--t-apoio); line-height: 1.55; max-width: none; }

/* linha juridica do rodape e metadado de post */
.t-registro {
  font-family: var(--fonte-dado);
  font-size: var(--t-apoio);
  font-weight: var(--peso-corpo);
  line-height: 1.5;
  letter-spacing: 0;
}