/* ===========================================================================
   wesleycaribe.com — folha de estilo única

   A FONTE DESTE ARQUIVO É docs/DESIGN.md, e a composição da página vem da
   SPEC - Home, seção "Composição da página" (origem, 17/08/2026). Nenhuma cor,
   raio ou medida se decide aqui.

   O QUE ESTA FOLHA APRENDEU EM 17/08/2026
   O sistema proíbe ORNAMENTO — textura, motivo decorativo, ícone inventado,
   profundidade falsa. Continua tudo proibido. Mas ele nunca proibiu MEDIDA,
   ESCALA, RITMO, ALINHAMENTO, DENSIDADE e SEQUÊNCIA — e é aí que a
   personalidade é construída num sistema sem ornamento. A versão anterior
   tinha uma medida só, dois tamanhos de texto e todo separador igual: correta,
   e anônima.

   NÃO EXISTE SOMBRA NESTE ARQUIVO. A linha de 1px é a assinatura do sistema.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. Tipografia — Archivo, variável, hospedada aqui
   Licença SIL OFL 1.1 (Omnibus-Type), texto em arte/fontes/.
   Dois eixos no mesmo arquivo: peso 100–900 e largura 62%–125%.
   -------------------------------------------------------------------------- */
@font-face {
    font-family: 'Archivo';
    src: url('/assets/fonts/archivo-latin.woff2') format('woff2');
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-style: normal;
    font-display: swap;
    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: 'Archivo';
    src: url('/assets/fonts/archivo-latin-ext.woff2') format('woff2');
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-style: normal;
    font-display: swap;
    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;
}

/* O ITÁLICO, acrescentado em 22/08/2026 — pendência 9.17 fechada.

   POR QUE ELE EXISTE: a regra 3.3 da SPEC de Arquitetura exige que termo do
   ecossistema sem forma em inglês apareça EM ITÁLICO na página EN, para ler
   como nome próprio e não como erro de revisão. São dois termos, `Sorteador` e
   `Saque Rápido`, e os dois entram na /en/partnerships/.

   O MODO DE FALHA que ele evita é silencioso: sem arquivo itálico o navegador
   SINTETIZA o oblíquo, inclinando a letra reta por cálculo. Não há erro no
   console e não há nada quebrado na tela — só uma letra pior, e pior ainda
   numa fonte de largura variável, onde a inclinação por cálculo briga com o
   desenho do eixo de largura.

   Mesma família, mesma licença SIL OFL 1.1, mesmos dois eixos: o METADATA do
   Archivo em arte/fontes/ declara os dois arquivos variáveis, o reto e o
   itálico, sob o mesmo copyright. Nada de licença nova a guardar.

   CUSTO EM TEMPO DE EXECUÇÃO: zero nas páginas que não usam itálico. O
   navegador só baixa o arquivo de um @font-face quando precisa de um glifo
   naquele estilo E naquele intervalo. A página PT não tem itálico nenhum e não
   baixa nada disto; a EN baixa só o subconjunto latino, porque o `á` de
   "Rápido" é U+00E1 e mora nele. O latino estendido fica declarado pelo mesmo
   motivo que o reto: se um termo futuro trouxer um caractere de lá, ele tem
   arquivo em vez de síntese. */
@font-face {
    font-family: 'Archivo';
    src: url('/assets/fonts/archivo-italic-latin.woff2') format('woff2');
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-style: italic;
    font-display: swap;
    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: 'Archivo';
    src: url('/assets/fonts/archivo-italic-latin-ext.woff2') format('woff2');
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-style: italic;
    font-display: swap;
    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

   Tema CLARO é o estado sem classe; o ESCURO vem da classe `dark` no <html>.
   O PHP escreve a classe sempre e o tema.js a REMOVE quando a escolha é clara.
   -------------------------------------------------------------------------- */
:root {
    color-scheme: light;

    --wes-surface:        #f9fafb;
    --wes-surface-raised: #ffffff;
    --wes-surface-sunken: #f3f4f6;
    --wes-border:         #e5e7eb;
    --wes-text:           #111827;
    --wes-text-muted:     #6b7280;

    /* Cor de ação: por ÁREA, igual nos dois temas. Depende de
       data-wes-area="user" no <body>. */
    --wes-accent:         #9146ff;
    --wes-accent-hover:   #772ce8;

    /* Ratificados na origem em 17/08/2026 */
    --wes-focus:          #9146ff;   /* >= 3:1 nas quatro superfícies */
    --wes-live:           #e5484d;   /* 3,75:1 na pior — pinta o PONTO, nunca a palavra */

    /* PROPOSTOS pelo site: o valor real de --wes-success-* vive no CSS do
       Rewards e não em documento. Medido: nenhum verde fixo passa 4,5:1 nas
       duas pontas, então ele pinta borda e ícone (>= 3:1), nunca a palavra.
       #059669 entrega 3,61:1 na pior superfície. Ver docs/DESIGN.md. */
    --wes-success:        #059669;

    /* Forma */
    --raio-cartao: 12px;
    --raio-botao:  8px;

    /* MEDIDA POR PAPEL — a regra que mais mudou em 17/08/2026.
       Uma medida só, do topo ao rodapé, é o que faz a página ler como PDF. */
    --medida-leitura: 65ch;    /* texto de leitura corrida */
    --medida-faixa:   72rem;   /* linha do tempo, redes, rodapé */
    --medida-cartao:  54rem;   /* o cartão do Rewards */
    --medida-mural:   78rem;   /* o mosaico de clipes */

    /* AS TRÊS FAIXAS DA LINHA DO TEMPO — estrutura declarada pela origem em
       18/08/2026, depois de o print mostrar quatro defeitos com uma causa só:
       a seção não tinha faixas declaradas.

           A  eixo      a linha vertical e o ponto de cada nó. Estreita, e SÓ isso
           B  calha     vazia por padrão; só a marginália do vão ocupa, entre
                        um nó e outro
           C  conteúdo  o título da seção e cada marco inteiro — marca, nome,
                        cargo e data, numa borda esquerda só

       NADA CRUZA FRONTEIRA DE FAIXA. É essa regra que resolve os quatro
       defeitos de uma vez: o eixo não corta as letras do título porque o
       título está na faixa C; a marginália não encosta na linha porque a
       faixa B é só dela.

       A CALHA É UMA E É ESTREITA. Os ~150px de vão entre o ponto e a marca
       existiam porque havia DUAS calhas empilhadas — a do nó e a do logotipo.
       A do logotipo deixou de existir: a marca empilha acima do nome. */
    --faixa-eixo:     0.75rem;   /* 12px — exatamente o diâmetro do nó */
    --faixa-calha:    5rem;
    --eixo-espessura: 2px;

    /* O RESPIRO À ESQUERDA DA SEÇÃO. Sem ele o eixo nasce na margem da página e,
       no celular, fica a 20px da borda da tela — uma linha vertical encostada na
       borda lê como corte, e não como eixo. Texto não sofre disso; linha sofre.
       Apontado pelo Wesley no print de 18/08/2026. */
    --credenciais-recuo: clamp(1.25rem, 1.5vw, 1.75rem);

    /* --faixa-conteudo NÃO MORA AQUI, e isso é a correção de um bug real.
       `var()` dentro de custom property é substituída NO ELEMENTO QUE DECLARA a
       propriedade — não em quem a usa. Declarada no :root, ela congelava a calha
       de 5rem, e a media query que encolhe a calha no celular nunca a alcançava:
       a grade ia para 72px e o nó continuava sendo desenhado em 92px.

       O resultado eram DOIS defeitos com uma causa só, os dois vistos no print:
       um degrau de 25px partindo o eixo entre o título e o primeiro nó, e os nós
       colados na borda da tela. Ela agora é declarada em .credenciais, junto de
       quem a alimenta. Ver a seção 8. */

    /* A CAIXA DA MARCA — QUADRADA desde 19/08/2026, e ela É o gabarito.

       Cada marca vem composta à mão num gabarito de 1080 x 1080, com o tamanho
       decidido a olho dentro de uma grade e o espaço vazio do arquivo
       carregando a equidade. A caixa do CSS tem que ter A MESMA PROPORÇÃO do
       gabarito: se o gabarito é quadrado e a caixa é deitada, `contain` encaixa
       o quadrado inteiro na altura da caixa e TODAS as marcas encolhem juntas.

       O NÚMERO: 128px é o que devolve à Twitch os 120px de largura que ela já
       tinha — a marca dela ocupa 94,4% do gabarito. Nenhuma marca encolheu para
       as outras crescerem.

       O respiro de 20px agora mora DENTRO do arquivo, na margem morta do
       gabarito; o token abaixo é só o que separa a caixa do marco anterior. */
    --marca-caixa:    128px;
    --marca-respiro:  20px;

    /* QUANTO DA MARGEM MORTA DO GABARITO SE APARA, em cima e embaixo.

       O gabarito é quadrado e a arte é centrada na vertical, então uma marca
       deitada chega com muita margem morta embaixo — a Twitch tinha 44px, e o
       vão dela até o nome saía em 76px, o dobro do da Klei. No print isso lia
       como logotipo e nome sendo duas coisas separadas.

       Aparar é da CAIXA, não da arte: a tinta continua inteira, e continua
       contida. ⚠️ O CORTE NÃO PODE PASSAR DA MENOR MARGEM MORTA DO CONJUNTO,
       que hoje é a da Klei — 14px. Com 10px sobram 4px de folga. Marca nova
       mais alta que 78% do gabarito obriga a recalcular este número, e o
       sintoma de errar é arte cortada. */
    --marca-corte:    10px;
    --marca-altura:   calc(var(--marca-caixa) - var(--marca-corte) * 2);

    /* Onde o nó cai dentro do marco: no meio da caixa da marca, que é a
       primeira coisa do bloco. É constante nos quatro marcos, então a distância
       entre dois nós continua sendo o vão mais uma altura de marco — a
       proporção não se perde. */
    --no-centro: calc(var(--marca-respiro) + var(--marca-altura) / 2);

    /* A MARGINÁLIA de glosa: largura da coluna e a calha até o texto. */
    --glosa-largura: 16rem;
    --glosa-minima:  12rem;
    --glosa-calha:   2rem;

    /* O RESPIRO DO CARTÃO, e ele é usado em DOIS lugares distantes: o padding
       do próprio cartão e o recuo da pilha de glosas que ancora nele.

       Os dois têm que ser o mesmo número, e o motivo é a regra 3.4.1: a glosa
       alinha pelo topo do bloco, e num bloco que é SUPERFÍCIE COM PADDING o
       topo que interessa é o do conteúdo, não o da borda. Alinhar com a borda
       poria a régua da glosa ao lado do vazio do cartão.

       Estavam escritos como dois `clamp` iguais em lugares diferentes até
       25/08/2026. Iguais hoje, e nada obrigava a continuarem: mexer no
       padding do cartão descolaria a glosa SEM ERRO NENHUM NA TELA. É o mesmo
       raciocínio do `2lh` do título do card do mural.

       Pode morar no `:root` porque não deriva de outra custom property e o
       `vw` se resolve contra a janela, não contra quem declara — não é o caso
       da armadilha do `--faixa-conteudo`, na seção 8. */
    --cartao-respiro: clamp(1.5rem, 4vw, 2.5rem);

    --margem-lateral: clamp(1.25rem, 5vw, 3rem);
    --respiro-secao:  clamp(3rem, 7vw, 5.5rem);

    --tipo: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

:root.dark {
    color-scheme: dark;

    --wes-surface:        #0e0e10;
    --wes-surface-raised: #18181b;
    --wes-surface-sunken: #1f1f23;
    --wes-border:         #26262c;
    --wes-text:           #ffffff;
    --wes-text-muted:     #9ca3af;
}

/* ---------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--wes-surface);
    color: var(--wes-text);
    font-family: var(--tipo);
    font-size: 1.0625rem;
    font-weight: 400;
    font-stretch: 100%;
    line-height: 1.6;
}

p { margin: 0 0 1.15em; }

/* O roxo NÃO passa no contraste como texto de corpo. Link em texto corrido usa
   a cor do texto e se anuncia pelo sublinhado. Ver docs/DESIGN.md, seção 2. */
a {
    color: inherit;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}

a:hover { text-decoration-thickness: 2px; }

:focus-visible {
    outline: 2px solid var(--wes-focus);
    outline-offset: 2px;
    border-radius: 2px;
}

::selection { background: var(--wes-accent); color: #ffffff; }

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

ul, ol { margin: 0; padding: 0; list-style: none; }

.oculto-visual {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   4. Cabeçalho
   -------------------------------------------------------------------------- */
.topo {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    align-items: center;
    justify-content: space-between;
    max-width: var(--medida-faixa);
    margin: 0 auto;
    padding: 1.1rem var(--margem-lateral);
}

.topo__marca {
    display: block;
    width: 148px;
    height: 44px;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
    background-image: url('/assets/img/marca-fundo-claro.png');
    background-image: image-set(
        url('/assets/img/marca-fundo-claro.webp') type('image/webp'),
        url('/assets/img/marca-fundo-claro.png')  type('image/png')
    );
}

:root.dark .topo__marca {
    background-image: url('/assets/img/marca-fundo-escuro.png');
    background-image: image-set(
        url('/assets/img/marca-fundo-escuro.webp') type('image/webp'),
        url('/assets/img/marca-fundo-escuro.png')  type('image/png')
    );
}

.topo__controles {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

@media (max-width: 30rem) {
    .topo { padding-top: 0.85rem; padding-bottom: 0.85rem; gap: 0.75rem 1rem; }
    .topo__marca { width: 121px; height: 36px; }
    .topo__controles { gap: 1rem; }
}

.idiomas,
.tema {
    font-size: 0.8125rem;
    font-weight: 600;
    font-stretch: 108%;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* O vão é token porque o alvo de toque abaixo o consome: os dois precisam ser
   o mesmo número, e escritos separados descolam em silêncio. Mora aqui e não
   no `:root` — quem o alimenta é este componente. */
.idiomas {
    --idiomas-vao: 0.45rem;
    display: flex;
    gap: var(--idiomas-vao);
    align-items: baseline;
}

.idiomas a { color: var(--wes-text-muted); text-decoration: none; }

/* ALVO DE TOQUE — WCAG 2.2, critério 2.5.8, que é AA.
   Medido a 320px em 25/08/2026: `PT` saía com 20 × 21px e `EN` com 22 × 21px.
   O mínimo é 24 × 24, então os dois reprovavam — e reprovavam no dedo antes de
   reprovarem na norma: dois destinos diferentes a 7px um do outro.

   A ÁREA CRESCE SEM QUE NADA SE MOVA. O `::after` é filho do próprio link, não
   participa do fluxo e não pinta nada; o texto, a fonte, a cor e o vão entre
   `PT` e `EN` continuam exatamente onde estavam. Não há print a pedir porque
   não há pixel a mostrar.

   O recuo lateral é METADE do vão, e essa é a trava: esticar até os 44px de
   conforto faria as duas áreas se sobreporem, e quem mira `EN` acertaria `PT`.
   Alvo grande demais que rouba o clique do vizinho é pior que alvo pequeno. */
.idiomas a { position: relative; }

.idiomas a::after {
    content: '';
    position: absolute;
    inset-block: -0.72rem;                 /* 21 + 23 = 44px de altura */
    inset-inline: calc(var(--idiomas-vao) / -2);
}

.idiomas a:hover { color: var(--wes-text); text-decoration: underline; }

.idiomas a[aria-current="page"] { color: var(--wes-text); }

.idiomas__sep { color: var(--wes-border); }

.tema {
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--wes-border);
    border-radius: var(--raio-botao);
    background: transparent;
    color: var(--wes-text-muted);
    font-family: inherit;
    cursor: pointer;
}

.tema:hover { color: var(--wes-text); border-color: var(--wes-text-muted); }

.tema__claro  { display: none; }
.tema__escuro { display: inline; }
:root.dark .tema__claro  { display: inline; }
:root.dark .tema__escuro { display: none; }

/* ---------------------------------------------------------------------------
   5. Medida por papel

   O contêiner não constrange mais: quem decide a largura é a faixa dentro de
   cada seção. É o que permite o herói sangrar e o texto ficar estreito na
   mesma página.
   -------------------------------------------------------------------------- */
.conteudo { width: 100%; }

.secao {
    padding-block: var(--respiro-secao);
    padding-inline: var(--margem-lateral);
}

.faixa {
    max-width: var(--medida-leitura);
    margin-inline: auto;
}

.faixa--larga  { max-width: var(--medida-faixa); }
.faixa--cartao { max-width: var(--medida-cartao); }
.faixa--mural  { max-width: var(--medida-mural); }

/* ---------------------------------------------------------------------------
   6. Três degraus de tipo: título, entrada, corpo
   -------------------------------------------------------------------------- */
.secao__titulo {
    margin: 0 0 1.25rem;
    max-width: 22ch;
    font-size: clamp(1.5rem, 1.1rem + 1.9vw, 2.4rem);
    font-weight: 800;
    font-stretch: 125%;
    line-height: 1.02;
    letter-spacing: -0.015em;
}

/* O degrau do meio. A PRIMEIRA FRASE DE UMA SEÇÃO É UMA PROMESSA, e por isso a
   entrada não é um parágrafo comum: corpo maior, medida um pouco mais larga que
   a de leitura e respiro maior antes do corpo. Corrigido na segunda passada —
   o terceiro degrau existia e estava sendo usado como parágrafo qualquer. */
.entrada {
    max-width: 70ch;
    font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.6rem);
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.015em;
    color: var(--wes-text);
    margin-bottom: 2.25rem;
}

/* A FRASE QUE SAI DO FLUXO. Uma por seção longa: a frase que carrega a tese do
   parágrafo estava diluída no meio dele. Não é citação e não duplica texto —
   é a mesma frase, tratada como o que ela é.

   HOUVE UMA VARIANTE INLINE AQUI, E ELA MORREU EM 18/08/2026. Na seção 5 a
   tese era uma ORAÇÃO no meio de um período: separá-la deixaria "...não existe
   preço em dinheiro e" pendurado, e o texto é da SPEC. A origem resolveu o
   impasse onde ele nascia — reescreveu o parágrafo para que a frase virasse
   período próprio. Com isso as duas teses da página são bloco, e a variante
   deixou de ter uso. */
.tese {
    display: block;
    max-width: 34ch;
    margin: 0 0 1.6rem;
    padding-left: 1.25rem;
    border-left: 3px solid var(--wes-accent);
    font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
    font-weight: 600;
    font-stretch: 106%;
    line-height: 1.25;
    letter-spacing: -0.015em;
}

/* A MARGINÁLIA — o aparato de glosa.

   AS QUATRO GLOSAS CHEGARAM DA ORIGEM EM 18/08/2026 e estão em src/textos.php,
   nos dois idiomas. Elas são do GLOSSÁRIO do ecossistema: o site é consumidor,
   nunca autor. Nenhuma palavra delas se reescreve aqui.

   ONDE A GLOSA MORA — SPEC de Arquitetura, regra 3.4: na margem onde houver
   margem, no rodapé onde não houver. Em tela larga ela vive ao lado da primeira
   aparição do termo, porque ler a explicação sem sair da frase é melhor que
   descer até o rodapé e voltar. Abaixo do ponto de recolhimento não há margem e
   ela sai da tela — o rodapé continua sendo o lugar canônico, e é lá que a
   página EN lista os quatro termos (regra 3.3).

   O PONTO DE RECOLHIMENTO É DERIVADO, NÃO ESCOLHIDO, e a origem ratificou a
   derivação em 18/08/2026: coluna hospedeira + calha + glosa mínima + margens.
   Daí saem DOIS pontos, porque a home tem dois hospedeiros diferentes:

       coluna de leitura   65ch (~39,6rem) + 2 + 12 + 6  ≈  60rem  →  64rem
       cartão do Rewards   54rem           + 2 + 12 + 6  =  74rem

   Os 74rem não são um número novo: são a MESMA conta com outro hospedeiro. É
   isso que a regra quis dizer com "se a largura da glosa mudar, o ponto muda
   junto". Abaixo de 74rem a glosa recolhe e o cartão volta a ficar centrado na
   medida dele, intacto — o cartão nunca encolhe para dar lugar à margem.

   A GLOSA ANCORA NO BLOCO, NÃO NA SEÇÃO — regra 3.4.1, escrita na origem em
   23/08/2026 a partir da medição feita aqui, e construída em 25/08/2026.

   O QUE ESTAVA ERRADO: as glosas empilhavam todas no topo do `<aside>` da
   seção. Onde a seção é um parágrafo só isso cumpre a 3.4 por ACIDENTE DE
   GEOMETRIA — é o caso da home, e é por isso que o defeito levou cinco dias
   para aparecer. Onde a seção tem vários blocos, não cumpre: medido na
   `/en/partnerships/` a 1280px, a glosa do `Sorteador` nascia 191px ACIMA do
   bloco que ela explica, e a 3.4 promete exatamente o contrário — "ler a
   explicação sem sair da frase".

   O MECANISMO É UMA LINHA DE GRADE POR BLOCO. Cada bloco vira uma `.ancora`
   que ocupa as duas colunas do hospedeiro e as repassa para dentro por
   `subgrid`. O bloco cai na coluna do texto, a pilha de glosas na coluna da
   margem, as duas na MESMA LINHA e as duas alinhadas ao topo dela.

   POR QUE `subgrid` E NÃO DUAS COLUNAS REDECLARADAS: assim as colunas nascem
   UMA VEZ, no hospedeiro, e cada âncora as herda. Redeclarar criaria dois
   números que precisam concordar escritos em lugares diferentes — que é a
   mesma receita de desencontro silencioso que tirou o `auto-fill` do mosaico
   em 23/08/2026.

   AS QUATRO CLÁUSULAS DA REGRA CAEM SOZINHAS, e nenhuma custou linha própria:

     · dois termos estreando no mesmo bloco EMPILHAM nele, porque a pilha é uma
       célula só da linha e o `gap` de baixo ordena;
     · pilha mais alta que o bloco faz a LINHA crescer, e a linha empurra a
       âncora seguinte. Nunca sobrepõe e nunca reordena — é o que se ganha por
       ser grade e não posicionamento;
     · o ponto de recolhimento NÃO SE MOVE: a caixa continua pedindo
       hospedeiro + calha + glosa, e as quatro parcelas são as mesmas;
     · a home sai idêntica, porque ela tem UM bloco só. Os quatro termos vivem
       todos dentro do mesmo cartão, então "topo da seção" e "topo do bloco"
       são o mesmo pixel — que é justamente por que ela nunca acusou o defeito.

   ⚠️ O QUE MORREU JUNTO: um `padding-top: 6.5rem` escrito à mão na seção 3 da
   página de Parcerias, que empurrava a pilha inteira até a altura do primeiro
   bloco. Ele acertava UM bloco por número e deixava os outros dois errados.
   Número escrito à mão para posicionar coisa que a grade sabe posicionar é o
   sintoma; a âncora é a causa resolvida. */
.glosas { display: none; }

/* O VÃO ENTRE ÂNCORAS vale em TODA largura, e mora aqui e não no bloco.
   Margem no bloco deslocaria o bloco DENTRO da própria linha, e a glosa —
   que não tem margem — ficaria alinhada com o topo da linha enquanto o bloco
   desceria 2,5rem. O desvio seria de 40px, e nasceria justamente da linha
   escrita para dar ritmo. Na âncora, o vão é da linha inteira. */
.ancora + .ancora { margin-top: 2.5rem; }

.glosa {
    margin: 0;
    padding-top: 0.3rem;
    border-top: 2px solid var(--wes-accent);
    color: var(--wes-text-muted);
    font-size: 0.875rem;
    line-height: 1.5;
}

.glosa__termo {
    display: block;
    color: var(--wes-text);
    font-weight: 700;
    font-stretch: 108%;
}

/* Hospedeiro 1: a coluna de leitura corrida. */
@media (min-width: 64rem) {
    .com-glosa--leitura {
        /* ESTA LINHA FALTAVA, e a falta era silenciosa. Achada em 22/08/2026,
           quando a página de Parcerias virou a PRIMEIRA a usar este hospedeiro.

           O modo de falha: `.faixa` limita a caixa em `--medida-leitura`, que
           é a largura da coluna de texto SOZINHA. Sem esta linha, a grade tinha
           que espremer coluna + calha + glosa dentro da largura de uma coluna
           só, e quem encolhia era o texto — de 65ch para uns 41ch, sem erro
           nenhum na tela e com a marginália funcionando "quase certo".

           A conta é a mesma da derivação do ponto de recolhimento, e por isso o
           ponto fecha: hospedeiro + calha + glosa. A 64rem de viewport sobram
           58rem depois das margens de 3rem de cada lado, e a caixa pede
           39,6 + 2 + 16 = 57,6rem. Passa por 0,4rem — o número nunca foi
           escolhido, e é isso que faz ele caber raspando.

           O irmão `.com-glosa--cartao` já tinha a linha desde 18/08/2026,
           porque ele hospedou de verdade desde o primeiro dia. Regra que nunca
           hospedou nada nunca foi medida. */
        max-width: calc(
            var(--medida-leitura) + var(--glosa-calha) + var(--glosa-largura)
        );
        display: grid;
        grid-template-columns:
            minmax(0, var(--medida-leitura))
            minmax(var(--glosa-minima), var(--glosa-largura));
        /* COLUNA, NÃO `gap`. O atalho escreve os dois eixos, e com mais de uma
           linha um vão de 2rem entre elas apareceria sem ninguém ter pedido —
           quem dá ritmo entre âncoras é a regra `.ancora + .ancora`. Antes da
           3.4.1 havia uma linha só, e a diferença não tinha como aparecer. */
        column-gap: var(--glosa-calha);
        align-items: start;
    }

    /* Quem não é âncora ocupa só a coluna do texto — o título da seção, por
       exemplo, que não glosa nada e não pode invadir a margem. */
    .com-glosa--leitura > * { grid-column: 1; }

    /* A ÂNCORA: ocupa as duas colunas e as REPASSA para dentro. É esta linha
       que faz o bloco e a pilha dele nascerem na mesma altura. */
    .com-glosa--leitura > .ancora {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: subgrid;
        align-items: start;
    }

    .com-glosa--leitura .glosas {
        display: grid;
        gap: 1.5rem;
        align-content: start;
    }
}

/* Hospedeiro 2: o cartão do Rewards, onde os quatro termos do léxico aparecem
   pela primeira vez na home. O cartão fica com a largura dele; a margem nasce
   ao lado, e a faixa cresce para caber as duas. Isto não mexe no cartão: a
   superfície, a borda, o raio e a medida do bloco continuam os mesmos. */
@media (min-width: 74rem) {
    .com-glosa--cartao {
        max-width: calc(
            var(--medida-cartao) + var(--glosa-calha) + var(--glosa-largura)
        );
        display: grid;
        grid-template-columns:
            var(--medida-cartao)
            minmax(var(--glosa-minima), var(--glosa-largura));
        gap: var(--glosa-calha);
        align-items: start;
    }

    /* Desce até a altura do texto do cartão, para a primeira glosa nascer ao
       lado do parágrafo que traz os termos, e não acima do título. */
    .com-glosa--cartao > .glosas {
        display: grid;
        gap: 1.5rem;
        align-content: start;
        padding-top: var(--cartao-respiro);
    }
}

.corpo { color: var(--wes-text-muted); }

/* Termos do léxico na primeira aparição: peso, largura e um traço roxo por
   baixo. O roxo pinta o traço, nunca a palavra — ele reprova como cor de texto. */
.termo {
    font-weight: 700;
    font-stretch: 112%;
    /* O traço é fundo, e fundo é desenhado por CAIXA DE FRAGMENTO: um termo de
       duas palavras que quebre entre linhas perderia o traço num dos pedaços.
       `clone` desenha o fundo em cada fragmento. Medido em 18/08/2026: hoje
       nenhum dos cinco quebra, nem a 380px — mas "Cargo Hold" e "Trophy Room"
       são de duas palavras, e a quebra depende da largura e do idioma. */
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    background-image: linear-gradient(var(--wes-accent), var(--wes-accent));
    background-size: 100% 2px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    padding-bottom: 1px;
}

.acao { margin-top: 2rem; }

.botao {
    display: inline-block;
    padding: 0.75rem 1.35rem;
    border: 1px solid var(--wes-accent);
    border-radius: var(--raio-botao);
    background: var(--wes-accent);
    color: #ffffff;             /* 4,64:1 sobre o roxo — passa */
    font-weight: 600;
    font-stretch: 108%;
    text-decoration: none;
}

.botao:hover { background: var(--wes-accent-hover); border-color: var(--wes-accent-hover); }

.seta { font-weight: 400; }

/* ---------------------------------------------------------------------------
   7. Seção 1 — o herói é dono da primeira tela

   NENHUMA FRONTEIRA DE SEÇÃO VISÍVEL NA PRIMEIRA PINTURA. A página antiga
   mostrava o herói em ~12% da tela e já emendava a divisória: a primeira
   impressão do site era uma seção terminando.
   -------------------------------------------------------------------------- */
.secao--topo {
    position: relative;
    display: flex;
    align-items: center;
    min-height: min(46rem, calc(100svh - 4.6rem));
    padding-block: clamp(3rem, 8vw, 6rem);
    overflow: hidden;
}

/* A capa só existe quando há transmissão ao vivo, e é servida DESTA origem —
   nunca referenciada do CDN da Twitch. Ver a SPEC de Home, "Composição". */
/* Vai como <img> e não como background porque o endereço é dinâmico, e a CSP
   deste site recusa atributo `style` no HTML. */
.topo__capa {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Véu SÓLIDO, não gradiente: sobre imagem parada o contraste se mede.
   A calibragem final acontece na etapa dos dados reais, com imagem de verdade. */
.topo__veu {
    position: absolute;
    inset: 0;
    background: var(--wes-surface);
    opacity: 0.86;
    z-index: 1;
}

.secao--topo > .faixa { position: relative; z-index: 2; }

.topo__saudacao {
    margin: 0 0 2rem;
    font-size: clamp(3rem, 1.2rem + 9vw, 8rem);
    font-weight: 800;
    font-stretch: 125%;
    line-height: 0.88;
    letter-spacing: -0.03em;
}

/* .wes-status — o primeiro do ecossistema. */
.wes-status {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.85rem;
    align-items: center;
    margin: 0;
    padding: 0.6rem 1rem;
    border: 1px solid var(--wes-border);
    border-radius: var(--raio-botao);
    background: var(--wes-surface-raised);
    font-size: 0.9375rem;
}

.wes-status__ponto { font-size: 0.85em; line-height: 1; }

.wes-status__estado {
    font-weight: 700;
    font-stretch: 112%;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.wes-status--no-ar .wes-status__ponto { color: var(--wes-live); }

.wes-status--offline .wes-status__ponto,
.wes-status--offline .wes-status__estado,
.wes-status--carregando .wes-status__ponto { color: var(--wes-text-muted); }

.wes-status--carregando .wes-status__estado {
    color: var(--wes-text-muted);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

@media (prefers-reduced-motion: no-preference) {
    .wes-status--carregando .wes-status__ponto { animation: respira 1.8s ease-in-out infinite; }
}

@keyframes respira {
    0%, 100% { opacity: 0.35; }
    50%      { opacity: 1; }
}

/* ---------------------------------------------------------------------------
   8. Seção 2 — credenciais como LINHA DO TEMPO LITERAL

   ESTRUTURA DE TRÊS FAIXAS, declarada pela origem em 18/08/2026. Ver o bloco de
   tokens, seção 2 desta folha. Em uma linha: faixa A é o eixo, faixa B é a
   calha da marginália, faixa C é todo o conteúdo — e nada cruza fronteira.

   O espaçamento entre os nós é proporcional ao tempo real: três anos de
   silêncio, depois três parcerias em cinco meses. A forma É o argumento, e o
   parágrafo de fechamento só confirma o que já está visível.

   Os vãos foram calculados a partir das datas da SPEC e escritos aqui porque
   o dado é estático — recalcular quando entrar uma quinta parceria:

       Klei 2022 → Twitch 19/12/2025    1448 dias   → vão grande
       Twitch → Hytale 18/01/2026         30 dias   → piso de legibilidade
       Hytale → PugStorm 15/05/2026      117 dias   → piso + folga

   PISO DE LEGIBILIDADE: onde a proporção honesta faria os rótulos colidirem,
   o vão trava no mínimo legível. Proporção até onde ajuda a leitura, não além.
   Empilhar a marca acrescentou uma linha por marco, então o piso subiu: os
   valores abaixo foram remedidos depois da mudança, não herdados dela.
   -------------------------------------------------------------------------- */

/* AS FAIXAS. A grade existe para uma coisa que o posicionamento absoluto não dá
   de graça: o pedaço de eixo que corre ao lado do TÍTULO tem exatamente a altura
   do título, sem ninguém precisar adivinhar quanto ele mede. Se o título quebrar
   em duas linhas, o eixo acompanha sozinho. */
.credenciais {
    /* AQUI, e não no :root. `var()` dentro de custom property é substituída no
       elemento QUE DECLARA a propriedade. Declarada no :root, esta derivada
       congelava a calha larga e a media query do celular não a alcançava —
       a grade encolhia e o nó não. Declarada junto de quem a alimenta, ela
       recalcula sozinha em qualquer ponto de quebra.

       QUEM MEXER NA CALHA CONFERE OS DOIS: a coluna da grade e o `left` do nó
       têm que dar o mesmo número. */
    --faixa-conteudo: calc(var(--faixa-eixo) + var(--faixa-calha));

    display: grid;
    grid-template-columns:
        var(--faixa-eixo)      /* A — eixo     */
        var(--faixa-calha)     /* B — calha    */
        minmax(0, 1fr);        /* C — conteúdo */
    padding-left: var(--credenciais-recuo);
}

/* FAIXA C: o título vive aqui, alinhado à MESMA borda esquerda do nome de cada
   marca. É isto que faz o eixo subir até a altura dele sem tocar as letras — na
   versão anterior o título ficava na borda da faixa e a linha o atravessava. */
.credenciais__titulo { grid-column: 3; grid-row: 1; }
.linha-tempo         { grid-column: 3; grid-row: 2; }
.credenciais__fecho  { grid-column: 3; grid-row: 3; margin-top: 2.5rem; }

/* FAIXA A, primeiro pedaço: o eixo ao lado do título. Ocupa a linha 1 inteira,
   então mede o título exatamente, inclusive a margem de baixo dele. */
.credenciais__eixo {
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    width: var(--eixo-espessura);
    background: var(--wes-accent);
}

/* Cada marco desenha o pedaço de eixo que chega até o PRÓPRIO nó. É o que faz a
   linha terminar exatamente no último ponto, sem depender de altura calculada à
   mão — e o que a mantém certa quando os textos mudarem de tamanho. */
.marco {
    --vao: 0px;                 /* o vão ACIMA deste marco */
    position: relative;
    display: grid;              /* grade, e não bloco: impede que a margem do
                                   logotipo escape e desloque o nó */
    justify-items: start;
    margin-top: var(--vao);
}

/* FAIXA A, o nó. Diâmetro igual à largura da faixa: ele a preenche e não sobra
   para lado nenhum. */
.marco::before {
    content: "";
    position: absolute;
    left: calc(-1 * var(--faixa-conteudo));
    top: calc(var(--no-centro) - var(--faixa-eixo) / 2);
    width: var(--faixa-eixo);
    height: var(--faixa-eixo);
    border-radius: 50%;
    background: var(--wes-accent);
}

/* FAIXA A, o segmento de linha deste marco.

   ⚠️ ELE VAI DO FIM DO MARCO ANTERIOR ATÉ O FIM DESTE — não até o próprio nó.
   A primeira versão parava no nó, e o trecho entre o nó e o fim do marco não
   era coberto por ninguém: o eixo saía com TRÊS BURACOS de 166px, um por vão.
   Passou por três rodadas de medição sem ser pego, porque o teste conferia o
   alinhamento HORIZONTAL dos segmentos e nunca a continuidade VERTICAL. Quem
   pegou foi o print.

   Encadeado assim, cada marco emenda no anterior sem precisar saber a altura
   dele — e a soma cobre do topo do título ao último nó, sem nenhuma conta à
   mão. O `100%` resolve contra a altura do próprio marco.

   QUEM MEXER AQUI MEDE OS BURACOS, não o alinhamento: junta as caixas dos
   segmentos em ordem e confere que o fim de um é o começo do seguinte. */
.marco::after {
    content: "";
    position: absolute;
    left: calc(
        -1 * var(--faixa-conteudo)
        + (var(--faixa-eixo) - var(--eixo-espessura)) / 2
    );
    top: calc(-1 * var(--vao));
    width: var(--eixo-espessura);
    height: calc(var(--vao) + 100%);
    background: var(--wes-accent);
}

/* O último para NO NÓ: a linha do tempo termina na última parceria, e não
   embaixo do bloco de texto dela. */
.marco:last-child::after {
    height: calc(var(--vao) + var(--no-centro));
}

.marco--vao-grande { --vao: clamp(7rem, 19vw, 17rem); }
.marco--vao-medio  { --vao: 6rem; }
.marco--vao-minimo { --vao: 4.5rem; }

/* FAIXA B — a marginália do vão, e ela é a ÚNICA coisa que mora aqui.
   O espaço entre 2022 e dezembro de 2025 é o argumento inteiro da seção, e era
   a única coisa da página que não dizia nada. Na versão anterior ela cruzava por
   cima do eixo; agora a faixa é só dela, então encostar virou impossível.
   Centrada no meio do vão, que é o vazio que ela nomeia. */
.linha-tempo__vao {
    position: absolute;
    left: calc(-1 * var(--faixa-calha) + 0.5rem);
    top: calc(-1 * var(--vao) / 2);
    width: calc(var(--faixa-calha) - 1rem);
    transform: translateY(-50%);
    color: var(--wes-text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    font-stretch: 108%;
    line-height: 1.25;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* O LOGOTIPO — padrão da casa, e ele NÃO tem mais coluna própria.

   Por que a marca entra: logotipo é RECONHECIDO, nome precisa ser LIDO. A marca
   dá reconhecimento instantâneo a quem já conhece o estúdio; o nome escrito
   serve a quem não conhece e a qualquer busca. É o que mantém de pé a crítica
   da própria SPEC à "fileira de selos" — selo sozinho não pode ser lido.

   POR QUE A CALHA ACABOU (origem, 18/08/2026): com caixa de proporção fixa e
   arte contida, uma das bordas da marca é SEMPRE irregular. Alinhar à direita
   só troca de lado: o vão fica constante contra o texto e irregular contra o
   eixo, que é uma linha reta — borda tão dura quanto a coluna de texto. Com a
   marca empilhada dentro da faixa C existe UMA borda esquerda na seção, e a
   irregularidade sobra do lado do espaço aberto, onde ninguém a vê.

   ⚠️ ISSO DESCREVE A CAIXA COMO ELA ERA EM 18/08 — deitada, com a arte contida
   por `contain`. O gabarito de 19/08 acabou com as duas coisas: a caixa é
   quadrada e o tamanho é explícito (ver `.marco__logo`, mais abaixo). O
   raciocínio continua valendo e por isso fica escrito, mas ele é o MOTIVO
   histórico de a calha ter acabado, não uma descrição do que roda hoje.

   Por que não houve conferência de manual: Klei, Hypixel Studios e PugStorm NÃO
   PUBLICAM manual de marca, confirmado com contato nos estúdios. Não existe
   documento a conferir, e sem documento de terceiro a régua é a da casa. A
   Twitch é exceção e publica kit aberto: se o dela for mais estrito, o dela
   vence.

   PROIBIDO em todas: recolorir, inverter, converter para escala de cinza,
   distorcer, girar, inclinar, aplicar sombra, contorno, brilho ou filtro,
   sobrepor a imagem, gradiente ou textura, usar como decoração, repetida, de
   fundo ou marca d’água. Aparece UMA vez, ao lado da credencial que a nomeia.

   Vai como fundo, e não como <img>, por dois motivos: a marca é decorativa (o
   nome do estúdio está escrito ao lado, então `alt` seria vazio de qualquer
   forma) e assim só a variante do tema em uso é baixada. */
.marco__logo {
    width: var(--marca-caixa);
    height: var(--marca-altura);
    margin-top: var(--marca-respiro);
    margin-bottom: 1.25rem;     /* 20px — ver os três vãos, mais abaixo */
    background-repeat: no-repeat;
    background-position: left center;

    /* Tamanho EXPLÍCITO, não `contain`. A caixa é mais baixa que o gabarito
       para aparar a margem morta, e `contain` leria isso como ordem de encolher
       o gabarito inteiro até caber na altura — as quatro marcas encolheriam
       juntas, em silêncio. Com a largura fixada no gabarito, o que sobra em
       cima e embaixo é aparado pela caixa, que é o desejado. */
    background-size: var(--marca-caixa) var(--marca-caixa);
}

/* --------------------------------------------------------------------------
   EQUIDADE ÓTICA — resolvida no ARQUIVO, não no CSS. 19/08/2026.

   O PROBLEMA, medido em 18/08: `contain` numa caixa deitada normaliza pela
   ALTURA, e altura igual não é tamanho igual. A área de cada marca na tela era

       Twitch 100%  ·  PugStorm 81%  ·  Hypixel 64%  ·  Klei  21%

   — a Klei com um quinto da presença da Twitch, por ser a única de formato
   retrato. Não era impressão de quem olhava: é aritmética.

   A SOLUÇÃO É DO WESLEY: cada marca composta à mão num gabarito de 1080 x 1080,
   com o tamanho decidido a olho dentro de uma grade. O espaço vazio do arquivo
   é o que carrega a equidade. Isso tira a decisão do algoritmo e devolve para o
   olho, que é o único que sabe equilibrar — tamanho ótico não é calculável.

   O que cada gabarito entrega, medido pela caixa da tinta:

       Twitch    94,4% x 31,5% do gabarito
       PugStorm  99,3% x 38,1%
       Hypixel   93,9% x 48,6%
       Klei      54,4% x 84,4%

   VANTAGEM SOBRE A VERSÃO EM CSS que isto substitui: a equidade viaja junto do
   arquivo. Ela vale de graça no media kit, na página de parcerias e nas imagens
   de compartilhamento, sem ninguém precisar copiar quatro números.

   PROIBIDO em todas: recolorir, inverter, converter para escala de cinza,
   distorcer, girar, inclinar, aplicar sombra, contorno, brilho ou filtro,
   sobrepor a imagem, gradiente ou textura, usar como decoração, repetida, de
   fundo ou marca d’água. Aparece UMA vez, ao lado da credencial que a nomeia.

   Vai como fundo, e não como <img>, por dois motivos: a marca é decorativa (o
   nome do estúdio está escrito ao lado, então `alt` seria vazio de qualquer
   forma) e assim só a variante do tema em uso é baixada.
   -------------------------------------------------------------------------- */
.marco__logo--twitch   { background-image: url('/assets/img/marcas/twitch-square.svg'); }
.marco__logo--pugstorm { background-image: url('/assets/img/marcas/pugstorm-square.png'); }
.marco__logo--klei     { background-image: url('/assets/img/marcas/klei-square.svg'); }

/* Klei, Twitch e PugStorm têm cor oficial que serve aos dois temas. A Hypixel
   precisa das duas variantes, e elas trocam com o alternador. */
.marco__logo--hypixel  { background-image: url('/assets/img/marcas/hypixel-fundo-claro-square.svg'); }

:root.dark .marco__logo--hypixel { background-image: url('/assets/img/marcas/hypixel-fundo-escuro-square.svg'); }

/* A HIERARQUIA. A seção pergunta QUEM disse sim: a resposta é o NOME, e é ele
   que carrega o peso tipográfico. A data ancora a POSIÇÃO do nó no eixo — que é
   o mecanismo inteiro da seção — e por isso não precisa de peso.
   ÂNCORA E MANCHETE NÃO SÃO A MESMA COISA.

   OS TRÊS VÃOS DO BLOCO — 32 / 4 / 3, INVERTIDOS EM 18/08/2026 PELO WESLEY,
   olhando o print:

     marca → nome   20px   a marca se separa; ela é reconhecimento, não legenda
     nome → cargo    4px   nome, cargo e data leem como UMA unidade
     cargo → data    3px   idem

   O PRIMEIRO NÃO É O QUE SE VÊ. Entre o 20px e a tinta da marca ainda existe a
   margem morta que sobrou do gabarito depois do corte, e ela é diferente em
   cada marca — de 4px na Klei a 33px na Twitch. O vão RENDERIZADO vai de 24 a
   54px, e a variação é o preço do gabarito compartilhado. Ver docs/DESIGN.md.

   A ORIGEM RATIFICOU ESTES NÚMEROS EM 20/08/2026, e a SPEC de Home passou a
   escrevê-los. A regra dela pedia o contrário — "a marca cola no nome: o espaço
   entre marca e nome é MENOR que o espaço entre nome e cargo" — e a primeira
   versão obedeceu, em 20 / 28 / 6. Na tela deu o oposto do pretendido: o cargo
   descolava do nome, e a unidade que ficava colada era marca+nome, justamente a
   que NÃO precisa ler junto, porque o nome do estúdio já está escrito por
   extenso logo abaixo do logotipo dele. O print reprovou e o Wesley inverteu.

   EFEITO COLATERAL BOM: com 32px, o respiro de 20px da marca passa a ser
   cumprido com folga em vez de raspando. A colisão que a pendência 9.13
   registrava deixou de existir, e a pendência fechou. */
.marco__marca {
    display: block;
    font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
    font-weight: 800;
    font-stretch: 118%;
    line-height: 1.05;
    letter-spacing: -0.02em;
}

.marco__relacao {
    display: block;
    margin-top: 0.25rem;
    font-size: 1.0625rem;
    line-height: 1.35;
}

/* Pequena e secundária. A DATA VEM COM "desde" / "since" DESDE 20/08/2026 —
   correção da origem, e ela mexe no texto da view, não aqui.

   A regra anterior proibia a preposição por peso visual, e o argumento morreu
   junto com a manchete: ele tinha sido escrito quando a data era o elemento
   maior da linha. Com ela neste tamanho e nesta cor, quatro preposições custam
   quase nada — e sem elas cada marco lê como período encerrado, numa seção que
   existe para provar que as quatro parcerias estão ATIVAS.

   O "desde" NÃO TEM ELEMENTO PRÓPRIO e não pode ganhar um: ele é parte da data,
   herda daqui o tamanho e a cor, e nunca sai em negrito. */
.marco__data {
    display: block;
    margin-top: 0.1875rem;
    color: var(--wes-text-muted);
    font-size: 0.875rem;
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
}

/* TELA ESTREITA. A calha encolhe e a marginália encolhe junto — a faixa B só
   precisa caber as duas palavras dela.

   A MARCA NÃO SOME MAIS. O mínimo absoluto de 20px de altura continua valendo, e
   ele deixou de ser alcançável: empilhada na faixa C, a caixa de 128px cabe
   inteira mesmo num aparelho de 320px, onde antes disputava largura com o nome
   do estúdio. Foi um ganho de graça da mudança de estrutura. */
@media (max-width: 34rem) {
    .credenciais { --faixa-calha: 3.75rem; }
    .linha-tempo__vao { font-size: 0.6875rem; letter-spacing: 0.03em; }
}

/* ---------------------------------------------------------------------------
   9. Seção 3 — retrato e texto, duas colunas
   -------------------------------------------------------------------------- */
.duas-colunas {
    display: grid;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: start;
}

@media (min-width: 52rem) {
    .duas-colunas { grid-template-columns: minmax(0, 1fr) minmax(14rem, 22rem); }
    .duas-colunas__arte { order: 2; position: sticky; top: 2rem; }
}

.duas-colunas__arte img { width: 100%; }

/* ---------------------------------------------------------------------------
   10. Seção 4 — o silêncio da página: coluna estreita, respiro grande
   -------------------------------------------------------------------------- */
.secao--silencio {
    padding-block: clamp(5rem, 12vw, 9rem);
}

.secao--silencio .faixa { max-width: 46ch; }

/* ---------------------------------------------------------------------------
   11. Seção 5 — o cartão do Rewards. JÁ ESTAVA CERTO: não mexer.
   -------------------------------------------------------------------------- */
.cartao {
    padding: var(--cartao-respiro);
    border: 1px solid var(--wes-border);
    border-radius: var(--raio-cartao);
    background: var(--wes-surface-raised);
}

/* O CARTÃO tem medida intermediária, mas o texto DENTRO dele continua sendo
   texto de leitura corrida — e a regra de medida por papel vale igual aqui.
   Sem esta linha, a linha de texto vai a ~90 caracteres dentro do cartão,
   enquanto o resto da página lê a 65. Entendido como aplicação da regra de
   medida, não como mexer no cartão, que a origem mandou preservar. */
.cartao p { max-width: var(--medida-leitura); }

/* ---------------------------------------------------------------------------
   12. Seção 6 — uma frase estoura a margem

   A linha em papel de RÉGUA DE COLUNA: ela sai da medida de leitura e avança
   sobre a margem, o que quebra o ritmo sem acrescentar ornamento nenhum.
   -------------------------------------------------------------------------- */
.estoura {
    position: relative;
    padding-left: 1.25rem;
    border-left: 3px solid var(--wes-accent);
}

@media (min-width: 60rem) {
    .estoura {
        margin-left: -4.5rem;
        max-width: calc(var(--medida-leitura) + 4.5rem);
    }
}

/* ---------------------------------------------------------------------------
   13. Seção 7 — redes: fileira horizontal e densa, ancorada por linha
   -------------------------------------------------------------------------- */
.secao--redes {
    padding-block: clamp(2rem, 4vw, 3rem);
    border-top: 1px solid var(--wes-border);
    border-bottom: 1px solid var(--wes-border);
}

.secao--redes .secao__titulo {
    font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
    margin-bottom: 0.75rem;
}

.redes {
    --redes-vao-linha: 0.35rem;
    --redes-vao-coluna: 0.9rem;
    display: flex;
    flex-wrap: wrap;
    gap: var(--redes-vao-linha) var(--redes-vao-coluna);
    margin-top: 1rem;
    font-weight: 700;
    font-stretch: 110%;
    letter-spacing: 0.01em;
}

/* ALVO DE TOQUE, o mesmo caso do alternador de idioma — WCAG 2.2, 2.5.8.
   Medido a 320px: os cinco links saíam com 19px de altura, contra o mínimo de
   24. No celular a fileira quebra em duas linhas, e é justamente aí que errar
   o dedo custa: cada link vai para uma rede diferente.

   O CRESCIMENTO É DE METADE DO VÃO PARA CADA LADO, e não mais que isso. Assim
   as áreas de duas linhas vizinhas encostam sem nunca se sobrepor — 19 + 5,6 =
   24,6px, que passa raspando de propósito. Esticar mais exigiria abrir o vão
   entre as linhas, e aí seria mudança de composição, não de acessibilidade. */
.redes a { position: relative; }

.redes a::after {
    content: '';
    position: absolute;
    inset-block: calc(var(--redes-vao-linha) / -2);
    inset-inline: calc(var(--redes-vao-coluna) / -2);
}

.redes li + li::before {
    content: "·";
    color: var(--wes-border);
    margin-right: 0.9rem;
}

.redes a { text-decoration-color: var(--wes-border); }

.redes a:hover { text-decoration-color: currentColor; }

/* ---------------------------------------------------------------------------
   14. Seção 8 — mural: MOSAICO de células desiguais, não grade uniforme
   -------------------------------------------------------------------------- */
.mural {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-top: 2rem;

    /* CADA CARD TEM A ALTURA DO QUE ELE CARREGA, e esta linha é o que garante
       isso. Sem ela o grid estica todo card até a altura da LINHA, e o card
       normal que divide a linha com um card grande vira uma terceira coisa:
       a largura do pequeno, a altura do grande, e um retângulo vazio no meio.

       Medido em 23/08/2026, antes do reparo: cards 2, 3, 9 e 10 saíam com
       277 × 434 e imagem de 275 × 155 — 168px de caixa vazia abaixo do texto
       (434 da linha menos 267 de altura natural). A borda desenhava uma
       promessa de conteúdo que não existia, e o print reprovou: "passa a
       impressão de que algo saiu fora do esperado".

       O vazio não sumiu; ele saiu de DENTRO da caixa e virou respiro entre as
       linhas, que é o que um mosaico de células desiguais deve parecer. */
    align-items: start;
}

/* O MOSAICO VARIA ESCALA, NUNCA PROPORÇÃO — esclarecido pela origem em
   17/08/2026, e é o que evita o problema óbvio: toda célula é 16:9, e a célula
   grande é simplesmente um 16:9 MAIOR, ocupando mais colunas. Nada estica e
   nada é recortado, e o mosaico continua irregular.

   Medido: célula grande 573x322 e célula normal 275x155, as duas em 1,78.

   QUAL clipe recebe a célula grande é decisão EDITORIAL, não técnica, e por
   isso não bloqueou a etapa dos dados. O critério continua sendo a POSIÇÃO —
   a 1ª e a 8ª células —, e quem chega na 1ª é o destaque mais recente, porque
   é essa a ordem que src/twitch.php entrega.

   UMA RESSALVA DESTE COMENTÁRIO ENVELHECEU e fica corrigida aqui: ele dizia
   que o critério "evita depender de um campo de destaque na API que ninguém
   confirmou existir". O campo existe. Medido em 23/08/2026: `is_featured` vem
   na resposta da Helix e há filtro por ele, e é justamente esse filtro que
   tira a contagem de visualização da escolha dos clipes. */
/* ---------------------------------------------------------------------------
   QUANTAS CÉLULAS GRANDES É ARITMÉTICA, NÃO GOSTO.

   Medido em 23/08/2026, depois de o print reprovar o vão da última linha.

   O mosaico tem 12 cards e cada célula grande vale DUAS unidades de coluna,
   então o total é 12 + (quantas forem grandes). Para as linhas fecharem sem
   sobra, esse total precisa ser MÚLTIPLO DO NÚMERO DE COLUNAS:

       2 colunas  →  12 + 2 = 14  =  7 linhas cheias
       3 colunas  →  12 + 3 = 15  =  5 linhas cheias
       4 colunas  →  12 + 4 = 16  =  4 linhas cheias

   Com duas células grandes fixas dava 14 unidades em 4 colunas, ou seja 3,5
   linhas: a meia linha que sobrava eram 595 × 267px de nada à direita dos dois
   últimos cards, e o aproveitamento do mosaico ficava em 72%.

   POR ISSO AS COLUNAS SÃO EXPLÍCITAS AQUI, e não `auto-fill`. Com `auto-fill`
   o número de colunas é decidido pela largura e o número de células grandes
   seria decidido em outro lugar — dois números que precisam concordar, escritos
   longe um do outro, é a receita do desencontro silencioso. Assim eles nascem
   na mesma regra e não têm como divergir.

   E NÃO HÁ MAIS `grid-auto-flow: dense`. Ele existia para tapar buracos, e com
   a conta fechando não há buraco nenhum. Ele tinha um preço que só apareceu na
   medição: a 3 colunas, o card 9 era promovido para a frente do 7 e do 8, ou
   seja o mosaico EMBARALHAVA a ordem que a SPEC define (destaque primeiro,
   depois recente). Sem ele, a ordem visual é a ordem do HTML.

   QUAIS cards são grandes continua sendo decisão EDITORIAL. A escolha abaixo
   evita repetir o mesmo desenho de linha quatro vezes, que é a uniformidade
   que a SPEC de Home critica na seção 10.
   -------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   A CONTA DEIXOU DE ASSUMIR DOZE — pendência 9.40, fechada em 25/08/2026.

   ATÉ AQUI a folha escrevia `G = C`: 4 células grandes em 4 colunas, 3 em 3,
   2 em 2. Isso é a solução da conta PARA N = 12 E MAIS NADA. Com N = 10 — que
   é o que a tela mostrou o dia inteiro de 23/08/2026, antes de a janela da
   busca geral devolver os doze — a conta pede 2 nas três faixas, e a folha
   entregava 4, 3 e 2: sobravam 595px de vão a 4 colunas e 622px a 3, com o
   aproveitamento caindo de 83–94% para 75%.

   O SINTOMA SUMIU EM 24/08 E A CAUSA FICOU. A origem chamou isso de DÍVIDA
   LATENTE de propósito, para ninguém ler "0px em todas as faixas" e concluir
   que a conta em N deixou de ser necessária.

   QUEM CALCULA É O SERVIDOR, E O MOTIVO É QUE O CSS NÃO FAZ ARITMÉTICA
   MODULAR. `:nth-child()` não aceita variável, então não há como escrever
   "o menor inteiro G com N + G múltiplo de C" em folha de estilo. O partial
   sabe N (é `count($clipes)`) e sabe as três faixas, calcula as três respostas
   e marca cada card com as faixas EM QUE ELE É GRANDE:

       <li class="clipe" data-mosaico="2 4">

   Lê-se: grande a 2 colunas e a 4, normal a 3.

   O RESET DE CADA FAIXA CONTINUA PRECISANDO DA MESMA ESPECIFICIDADE das
   regras que ele zera — agora (0,2,1) dos dois lados —, porque MEDIA QUERY
   NÃO SOMA ESPECIFICIDADE. As três faixas são `min-width`, então a de 40rem
   continua valendo a 1280px: sem o reset, um card grande a 2 colunas
   continuaria grande a 4 e a conta das unidades quebraria. Com a mesma
   especificidade quem decide é a ordem no arquivo, e o reset vem antes.
   É a mesma armadilha que já cobrou quatro vezes neste projeto — o card 8 a
   1024px em 23/08, a nota do glossário no rodapé, a `.com-glosa--leitura`, e
   agora ela de novo, num seletor diferente.

   QUAIS cards são grandes continua sendo decisão EDITORIAL, e para N = 12 são
   as posições que o Wesley ratificou no print de 23/08/2026. Para qualquer
   outro N a escolha é PROVISÓRIA e mora no partial, declarada como tal — a
   origem escreveu que a conta é dívida barata e a POSIÇÃO é dívida dela, que
   se afrouxa olhando um print e não deduzindo.
   -------------------------------------------------------------------------- */

/* Duas colunas: a célula grande ocupa a linha inteira. */
@media (min-width: 40rem) {
    .mural { grid-template-columns: repeat(2, 1fr); }

    .mural > [data-mosaico]      { grid-column: auto; }
    .mural > [data-mosaico~="2"] { grid-column: span 2; }
}

/* Três colunas: grande + pequena, três vezes, e depois duas linhas cheias. */
@media (min-width: 56rem) {
    .mural { grid-template-columns: repeat(3, 1fr); }

    .mural > [data-mosaico]      { grid-column: auto; }
    .mural > [data-mosaico~="3"] { grid-column: span 2; }
}

/* Quatro colunas: com os doze de hoje, a terceira linha traz DUAS grandes lado
   a lado, que é o ponto em que o ritmo quebra. */
@media (min-width: 75rem) {
    .mural { grid-template-columns: repeat(4, 1fr); }

    .mural > [data-mosaico]      { grid-column: auto; }
    .mural > [data-mosaico~="4"] { grid-column: span 2; }
}

.clipe {
    border: 1px solid var(--wes-border);
    border-radius: var(--raio-cartao);
    background: var(--wes-surface-raised);
    overflow: hidden;
}

.clipe__link { display: block; text-decoration: none; }

.clipe__miniatura {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--wes-surface-sunken);
    object-fit: cover;
    border-bottom: 1px solid var(--wes-border);
}

/*
 * O TÍTULO OCUPA DUAS LINHAS SEMPRE, use uma ou duas.
 *
 * O título é escrito por quem recortou, e o comprimento dele não é decisão de
 * ninguém aqui. Sem a reserva, o card cresce com o texto: medido em
 * 24/08/2026, dos 123 clipes da comunidade na janela, 15 (12%) quebram em duas
 * linhas na célula pequena, e cada um deles fica 21px mais alto que os vizinhos
 * da mesma fileira. NENHUM passa de duas linhas — o mais longo do acervo tem 45
 * caracteres e cabe. Na célula grande, os 15 cabem em UMA linha: o defeito é
 * exclusivo da célula pequena.
 *
 * NÃO É O DEFEITO DA 9.37, E É PARENTE DELE. Lá o card prometia conteúdo que
 * não existia — 168px de caixa vazia abaixo do texto. Aqui o card é mais alto
 * porque tem mais texto, e o vão morto dentro dele é de 1px. O que incomoda é
 * outra coisa: uma TERCEIRA ALTURA dentro de uma fileira que deveria ter uma
 * só, e o crédito de quem recortou — que é o que esta seção existe para
 * mostrar — parando numa linha diferente da dos vizinhos. A 9.37 fechou com
 * "duas alturas em vez de três", e a variação de texto trazia a terceira de
 * volta.
 *
 * A RESERVA É UNIFORME, e não só na célula pequena. Assim o slot do título é
 * uma MEDIDA FIXA em todo card, o vão entre título e crédito é o mesmo em toda
 * a página, e a regra não precisa saber qual célula é grande — ou seja, não se
 * acopla à aritmética do mosaico, que é justamente o que a 9.40 vai reescrever.
 * O preço é 21px de ar sob todo título curto, inclusive nas duas células
 * grandes, que nunca quebram.
 *
 * `2lh` são duas linhas DESTE elemento, derivadas do `line-height` de baixo.
 * Escrever `2.6rem` daria o mesmo número hoje e se descolaria em silêncio no
 * dia em que o `line-height` mudasse. `content-box` é para a reserva valer
 * sobre o texto e o `padding` somar por cima, sem repetir a conta do padding.
 */
.clipe__titulo {
    margin: 0;
    padding: 0.85rem 1rem 0.35rem;
    box-sizing: content-box;
    min-block-size: 2lh;
    font-size: 1rem;
    font-weight: 700;
    font-stretch: 106%;
    line-height: 1.3;
}

.clipe__link:hover .clipe__titulo { text-decoration: underline; }

/* O crédito é o que este mural anuncia. Não é letra miúda. */
.clipe__credito {
    margin: 0;
    padding: 0 1rem 0.5rem;
    font-weight: 600;
    font-size: 0.9375rem;
}

.clipe__meta {
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    margin: 0;
    padding: 0 1rem 1rem;
    color: var(--wes-text-muted);
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
}

.clipe--vazio { padding-bottom: 1rem; }

.clipe__linha {
    display: block;
    height: 0.7rem;
    margin: 0.9rem 1rem 0;
    border-radius: 3px;
    background: var(--wes-surface-sunken);
}

.clipe__linha--curta { width: 55%; }

@media (prefers-reduced-motion: no-preference) {
    .mural--esqueleto .clipe__miniatura,
    .mural--esqueleto .clipe__linha { animation: pulsa 1.9s ease-in-out infinite; }

    .mural--esqueleto .clipe:nth-child(even) .clipe__miniatura,
    .mural--esqueleto .clipe:nth-child(even) .clipe__linha { animation-delay: 0.35s; }
}

@keyframes pulsa {
    0%, 100% { opacity: 0.6; }
    50%      { opacity: 1; }
}

/* ---------------------------------------------------------------------------
   15. Estados com ilustração — mural vazio e 404
   Uma ilustração por tela, nunca mais que isso. É a marca, não ornamento.
   -------------------------------------------------------------------------- */
.com-ilustracao {
    display: grid;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
    margin-top: 2rem;
}

@media (min-width: 46rem) {
    .com-ilustracao { grid-template-columns: 1fr minmax(14rem, 20rem); }
}

.com-ilustracao__arte {
    width: 100%;
    max-width: 20rem;
    justify-self: center;
}

/* A LINHA DA FALHA, e só ela. Discreta é o que a SPEC pede: a Twitch não
   respondeu, o visitante não tem nada a fazer a respeito, e a seção não deve
   gritar por causa disso. */
.mural__aviso { margin: 0; color: var(--wes-text-muted); font-size: 1.0625rem; }

/* O ESTADO VAZIO PRECISA PARECER DELIBERADO — pedido da origem em 24/08/2026,
   quando a frase perdeu a primeira metade. "Nenhum clipe recortado ainda"
   afirmava sobre o ACERVO uma coisa que a página não tem como saber depois da
   janela da busca geral; o que sobrou afirma sobre o futuro. A origem escreveu
   que uma linha só, com zero cards, ainda precisa parecer deliberada, e que
   isso é TELA. Construído em 25/08/2026.

   MEDIDO ANTES: a frase saía com 801px de largura numa linha só, em cinza de
   legenda, ao lado de uma ilustração de 320px. Uma sentença esticada por 801px
   passa longe da medida de leitura e lê como rodapé de imagem — o oposto de
   deliberada.

   O TRATAMENTO NÃO É NOVO, E ISSO É O PONTO. `.tese` é o device que a página já
   usa duas vezes para a frase que carrega a tese de uma seção. Num mural sem
   cards, essa frase É a seção inteira: não há o que ela possa estar legendando.
   Reaproveitar o device não inventa vocabulário, não acrescenta ornamento — que
   o ecossistema proíbe — e não cria um papel novo para o roxo: o traço da tese
   já é um dos papéis que a SPEC de Home lista.

   O que sobra aqui é só o que o contexto muda: a tese normal separa-se do
   parágrafo seguinte, e esta não tem parágrafo seguinte. */
.mural__convite { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   16. Página de endereço inexistente
   -------------------------------------------------------------------------- */
.secao--erro { padding-top: clamp(2.5rem, 7vw, 4.5rem); }

.secao--erro .secao__titulo { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.2rem); }

.saidas__chamada { margin-bottom: 0.75rem; }

.saidas {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    font-weight: 600;
    font-stretch: 106%;
}

.saidas a { text-decoration-color: var(--wes-border); }

.saidas a:hover { text-decoration-color: currentColor; }

/* ---------------------------------------------------------------------------
   17. Página de Parcerias — /parcerias/

   O media kit público. Sete seções de conteúdo mais o relatório de exemplo, e
   nenhuma delas repete o tratamento da vizinha — mesma regra de composição que
   governa a home, aplicada a outro conteúdo:

       1 tese        primeira tela, tipo grande, medida curta
       2 comprovo    coluna de leitura, com a tese saindo do fluxo
       - relatório   ficha dobrável dentro da seção 2, com tabela
       3 onde        coluna de leitura COM MARGINÁLIA — o segundo hospedeiro
       4 quem        lista densa, cada linha separada por régua
       5 escolho     lista com marcador roxo, respiro entre itens
       6 retorno     coluna estreita e respiro grande: o silêncio da página
       7 falar       endereço grande, com a segunda porta do e-mail

   O QUE NÃO EXISTE AQUI, E É REGRA: número de audiência em qualquer formato. A
   página ABRE prometendo que a marca não vai receber print de contagem de
   espectadores, e um número na tela desmentiria a promessa duas telas depois.
   Nem o relatório de exemplo tem um: o que ele prova é EXECUÇÃO, não alcance.
   -------------------------------------------------------------------------- */

/* ---- Seção 1: a tese ------------------------------------------------------

   Herói próprio, e não o `.secao--topo` da home. Aquele é construído em volta
   da capa da transmissão e do indicador de live, que não existem aqui; e a
   escala dele (até 8rem) foi calibrada para uma saudação de dezessete
   caracteres. A tese tem trinta e nove e sairia com três linhas gigantes.

   A medida curta é o que faz a frase quebrar onde ela quer quebrar:
   CANAL PEQUENO / NÃO É DESCONTO. / É ACESSO. */
.secao--tese {
    display: flex;
    align-items: center;
    min-height: min(34rem, calc(100svh - 4.6rem));
    padding-block: clamp(3.5rem, 9vw, 7rem);
}

.tese-topo {
    margin: 0 0 2rem;
    max-width: 16ch;
    font-size: clamp(2.4rem, 1rem + 5.4vw, 5rem);
    font-weight: 800;
    font-stretch: 125%;
    line-height: 0.92;
    letter-spacing: -0.03em;
}

/* ---- O relatório de exemplo ----------------------------------------------

   É TABELA MONTADA EM HTML, e não imagem. Decidido na origem em 22/08/2026,
   por quatro razões e nenhuma estética: o site tem dois temas e imagem pediria
   uma variante por tema; o site é bilíngue, o que daria quatro arquivos para
   uma tabela só; a seção pede links de VOD, e link é elemento, que imagem não
   tem dentro; e a passada de telas pequenas vem depois, onde tabela achatada em
   imagem fica ilegível, sem seleção de texto e sem leitor de tela.

   POR QUE <details> E NÃO UM BLOCO SEMPRE ABERTO: a SPEC escreve a chamada
   como LINK, e link pede um destino. Com o <details>, a frase da SPEC vira o
   controle de verdade em vez de âncora decorativa, o relatório abre na própria
   página como a SPEC manda, e nada disso custa JavaScript — o que importa numa
   página onde a CSP recusa script embutido. Fechado por padrão, a seção 2
   continua sendo argumento em prosa e a tabela é o anexo de quem quiser
   conferir. */
.relatorio {
    margin-top: 2.5rem;
    border: 1px solid var(--wes-border);
    border-radius: var(--raio-cartao);
    background: var(--wes-surface-raised);
}

/* O triângulo padrão do navegador sai, e a seta do site entra no lugar — é o
   mesmo sinal do botão do Rewards e das saídas da 404. Some em dois dialetos
   porque o Safari ainda usa o pseudo-elemento antigo. */
.relatorio__abrir {
    padding: 1rem 1.25rem;
    color: var(--wes-text);
    font-weight: 600;
    font-stretch: 108%;
    cursor: pointer;
    list-style: none;
}

.relatorio__abrir::-webkit-details-marker { display: none; }

.relatorio__corpo {
    padding: 0 1.25rem 1.5rem;
    border-top: 1px solid var(--wes-border);
}

/* O CARIMBO fica no TOPO e não em nota de rodapé — exigência da seção 9 da
   SPEC. Ele pinta a BORDA em roxo e deixa a palavra em `--wes-text`, pela
   regra geral do ecossistema: nenhuma cor fixa é texto de corpo nos dois
   temas, e cor semântica pinta ponto, borda, eixo ou ícone. */
.relatorio__carimbo {
    display: inline-block;
    margin: 1.25rem 0 0.75rem;
    padding: 0.25rem 0.65rem;
    border: 2px solid var(--wes-accent);
    border-radius: var(--raio-botao);
    color: var(--wes-text);
    font-size: 0.75rem;
    font-weight: 800;
    font-stretch: 112%;
    letter-spacing: 0.12em;
}

.relatorio__aviso {
    margin: 0 0 1.25rem;
    max-width: 60ch;
    color: var(--wes-text-muted);
    font-size: 0.875rem;
}

/* A ficha do cabeçalho do relatório: marca, campanha e sessão. A sessão declara
   a hora de início, e é ela que torna os deslocamentos de VOD da última coluna
   conferíveis por quem ler. */
.relatorio__ficha {
    display: grid;
    gap: 0.35rem 1.25rem;
    margin: 0 0 1.5rem;
    font-size: 0.875rem;
}

.relatorio__ficha dt {
    color: var(--wes-text-muted);
    font-weight: 600;
    font-stretch: 106%;
}

.relatorio__ficha dd { margin: 0; color: var(--wes-text); }

@media (min-width: 34rem) {
    .relatorio__ficha { grid-template-columns: max-content minmax(0, 1fr); }
    .relatorio__ficha dt { grid-column: 1; }
    .relatorio__ficha dd { grid-column: 2; }
}

/* A tabela rola dentro da PRÓPRIA caixa. Sem este contêiner, uma tabela larga
   empurra a largura do documento e a PÁGINA INTEIRA passa a rolar de lado —
   defeito que só aparece em tela estreita, que é justamente a passada que ainda
   não rodou. */
.relatorio__rolagem {
    overflow-x: auto;
    margin-bottom: 1.25rem;
}

.relatorio__tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    text-align: left;
}

.relatorio__tabela th,
.relatorio__tabela td {
    padding: 0.65rem 0.9rem 0.65rem 0;
    border-bottom: 1px solid var(--wes-border);
    vertical-align: top;
}

.relatorio__tabela thead th {
    border-bottom: 2px solid var(--wes-border);
    color: var(--wes-text);
    font-size: 0.75rem;
    font-weight: 700;
    font-stretch: 108%;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.relatorio__tabela td { color: var(--wes-text-muted); }

/* O entregável é o que a marca contratou, e é ele que a pessoa procura na
   tabela: fica na cor do texto, o resto fica secundário. */
.relatorio__tabela .col-entregavel {
    color: var(--wes-text);
    font-weight: 600;
    font-stretch: 106%;
}

/* Algarismos de largura fixa: sem isto as horas não alinham em coluna, e uma
   coluna de hora desalinhada é o que faz relatório parecer digitado à mão. */
.relatorio__tabela .col-hora,
.relatorio__tabela .col-vod {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* O LINK DE VOD ESTÁ DESATIVADO, e por isso não é um elemento de âncora:
   sem href não existe link, não existe foco e não existe destino prometido. O
   tracejado diz que ali existe um link no relatório de verdade.

   QUEM UM DIA LIGAR ESTES LINKS: eles nunca apontam para VOD real de outra
   campanha. A SPEC é explícita, e o motivo é que relatório com dado inventado
   apontando para gravação real vira registro fabricado. */
.vod-exemplo {
    color: var(--wes-text-muted);
    text-decoration: underline dashed var(--wes-border);
    text-underline-offset: 3px;
    cursor: not-allowed;
}

.relatorio__auth {
    margin: 0;
    max-width: 60ch;
    color: var(--wes-text-muted);
    font-size: 0.8125rem;
}

/* ---- Seção 3: onde o produto aparece --------------------------------------

   ESTA É A PRIMEIRA PÁGINA A PENDURAR GLOSA NA COLUNA DE LEITURA. A classe
   `.com-glosa--leitura` existe desde 18/08/2026 e nunca hospedou nada — a home
   só glosa dentro do cartão do Rewards. A SPEC de Arquitetura previu o momento
   na regra 3.4: a coluna de leitura ainda não hospeda glosa nenhuma, e o ponto
   dela passa a valer na primeira página que glosar em texto corrido.

   Os três blocos são separados por RÉGUA e não por cartão: o sistema é
   recortado, e três cartões lado a lado virariam a fileira de selos que a
   própria SPEC de Home critica na seção de credenciais. */
.oferta__bloco {
    padding-top: 1.5rem;
    border-top: 1px solid var(--wes-border);
}

/* O VÃO ENTRE BLOCOS mudou de dono em 25/08/2026, com a regra 3.4.1. Ele era
   `.oferta__bloco + .oferta__bloco` e passou a ser `.ancora + .ancora`, na
   seção 6 — os blocos deixaram de ser irmãos adjacentes quando cada um ganhou
   a própria pilha de glosas ao lado.

   NÃO É SÓ RENOMEAR O SELETOR, e o motivo é geométrico: margem no bloco
   deslocaria o bloco DENTRO da linha de grade, e a glosa, que não tem margem,
   ficaria 2,5rem acima dele. A regra que existe para dar ritmo produziria
   exatamente o desalinho que a 3.4.1 veio matar. Na âncora, o vão é da linha
   inteira e os dois descem juntos. */

.oferta__nome {
    margin: 0 0 0.85rem;
    font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem);
    font-weight: 800;
    font-stretch: 118%;
    line-height: 1.05;
    letter-spacing: -0.015em;
}

.oferta__bloco p { margin: 0 0 0.9rem; }
.oferta__bloco p:last-child { margin-bottom: 0; }

/* AQUI HAVIA UM `padding-top: 6.5rem` NA PILHA INTEIRA DE GLOSAS, e ele saiu
   em 25/08/2026 com a regra 3.4.1. Ele empurrava as cinco de uma vez até a
   altura do PRIMEIRO bloco — acertava aquele por número e deixava os outros
   dois errados, em 67px e 191px. Agora quem posiciona é a linha de grade de
   cada âncora, e não há número nenhum a manter. Ver a seção 6. */

/* ---- Seção 4: quem já disse sim, versão curta -----------------------------

   NÃO É A LINHA DO TEMPO DA HOME, e a diferença é da SPEC: aqui a seção é o
   mesmo conteúdo da home em versão curta, escrita como quatro linhas de uma
   linha só. A linha do tempo literal da home existe porque LÁ o vão de três
   anos é o argumento da seção; aqui o argumento da página é a prova de
   execução da seção 2, e as credenciais corroboram.

   O que sobrevive da regra da home é a HIERARQUIA: o nome da marca domina, e
   cargo, data e estado ficam secundários. A data continua sendo âncora e não
   manchete, e continua vindo com "desde" nos quatro marcos — sem a preposição
   cada linha lê como período encerrado, numa seção que existe para provar que
   as quatro parcerias estão ativas.

   A DATA NÃO SE ALINHA À DIREITA. A SPEC de Home derrubou esse arranjo em
   17/08/2026 com o nome próprio dele: é uma planilha, e planilha não mostra
   nada. Tudo fica na cadeia de pontos médios, na borda esquerda. */
.credenciais-curtas {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--wes-border);
}

.credenciais-curtas li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2rem 0.55rem;
    padding: 0.95rem 0;
    border-bottom: 1px solid var(--wes-border);
}

.credencial__marca {
    color: var(--wes-text);
    font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
    font-weight: 800;
    font-stretch: 112%;
    letter-spacing: -0.015em;
}

/* Havia um `.credencial__estado` aqui, para o `· ativo` da linha da Klei. Ele
   saiu junto com a palavra em 22/08/2026 — regra que não veste nada é resíduo,
   e resíduo de CSS é a mesma família da pendência 9.24. Se o "ativo" voltar por
   decisão da origem, ele volta nas QUATRO linhas ou não volta. */
.credencial__sep,
.credencial__relacao,
.credencial__data {
    color: var(--wes-text-muted);
    font-size: 0.9375rem;
}

/* ---- Seção 5: como eu escolho --------------------------------------------

   O marcador é um PONTO ROXO, e não o ponto médio literal do bloco da SPEC: em
   texto plano o ponto médio é só como se escreve uma lista, e na tela ele
   sairia quase invisível ao lado de uma linha inteira de texto. O ponto redondo
   é o mesmo desenho do nó da linha do tempo da home, que é onde o roxo já pinta
   forma em vez de palavra. */
.criterios {
    display: grid;
    gap: 0.9rem;
    margin: 0 0 2rem;
    padding: 0;
    list-style: none;
}

.criterios li {
    display: grid;
    grid-template-columns: 0.75rem minmax(0, 1fr);
    gap: 0.75rem;
}

.criterios li::before {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    margin-top: 0.62em;
    border-radius: 50%;
    background: var(--wes-accent);
    justify-self: center;
}

/* ---- Seção 7: falar comigo ------------------------------------------------

   O endereço é o conteúdo da seção, então ele sai em tamanho de conteúdo e não
   de rodapé. O componente de copiar é o MESMO do rodapé, lido do mesmo partial:
   duas cópias do mesmo botão na mesma página é como o Rewards acabou com cinco
   implementações divergentes do componente. */
.contato--destaque { margin: 0 0 1.75rem; }

.contato__email {
    font-size: clamp(1.1rem, 1rem + 0.7vw, 1.5rem);
    font-weight: 700;
    font-stretch: 108%;
}

/* ---------------------------------------------------------------------------
   18. Rodapé — denso, ancorado por linha
   -------------------------------------------------------------------------- */
.rodape {
    max-width: var(--medida-faixa);
    margin: 0 auto;
    padding: 2.25rem var(--margem-lateral) 3.5rem;
    border-top: 3px solid var(--wes-text);
    color: var(--wes-text-muted);
    font-size: 0.9375rem;
}

.rodape p { max-width: none; margin: 0 0 0.5rem; }

.rodape__marca { color: var(--wes-text); font-weight: 700; font-stretch: 106%; }

.rodape .idiomas { margin-top: 1.25rem; }

/* O GLOSSÁRIO DO RODAPÉ — SPEC de Arquitetura, regras 3.3 e 3.5.

   ⚠️ ESTE COMENTÁRIO ESTAVA VELHO ATÉ 22/08/2026, e o defeito é o da pendência
   9.24: ele dizia que o bloco existe na página EN e NÃO existe na PT, o que
   deixou de ser verdade em 20/08/2026, quando a regra 3.5 entrou — e a home PT
   ganhou o glossário em 21/08. O comentário sobreviveu à construção que o
   contradizia. Comentário que descreve a tela é documentação embutida no
   código, envelhece igual a documento, e não tem carimbo para conferir.

   ELE EXISTE NAS DUAS LÍNGUAS, e cada uma tem o seu motivo. Na EN o motivo é
   LINGUÍSTICO (regra 3.3): termo que fica em português precisa de um lugar onde
   seja lido como nome, e não como erro de revisão. Na PT o motivo é
   GEOMÉTRICO: abaixo do ponto de recolhimento da 3.4 não existe margem, e sem
   rodapé o leitor em português ficaria sem glosa nenhuma — todo celular, todo
   tablet e toda janela estreitada.

   E ELE APARECE EM TODA LARGURA, não só abaixo do recolhimento. Em tela larga o
   leitor recebe os dois arranjos; a margem é o alternativo e o rodapé é o
   canônico, e canônico não some quando sobra espaço.

   VEM DEPOIS DE TUDO, e é a posição de colofão. A ordem foi escolhida contra a
   alternativa óbvia: pôr o glossário antes empurraria para baixo o contato
   comercial e o link de Parcerias, que são o motivo de a marca ter chegado até
   o rodapé. Glossário é material de consulta — quem precisa dele desce até ele.

   O texto é o mesmo da margem, lido da mesma linha de src/textos.php. Duas
   cópias de um texto de glossário divergindo é criar uma segunda definição do
   mesmo termo. */
.glossario {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--wes-border);
}

.glossario__titulo {
    margin: 0 0 1rem;
    color: var(--wes-text);
    font-size: 0.8125rem;
    font-weight: 700;
    font-stretch: 108%;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.glossario__lista { display: grid; margin: 0; }

.glossario__lista dt {
    color: var(--wes-text);
    font-weight: 700;
    font-stretch: 108%;
}

.glossario__lista dd { margin: 0 0 0.9rem; max-width: 62ch; }

@media (min-width: 40rem) {
    .glossario__lista {
        grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
        column-gap: 1.5rem;
        row-gap: 0.75rem;
    }

    .glossario__lista dt { grid-column: 1; }
    .glossario__lista dd { grid-column: 2; margin: 0; }
}

/* A NOTA DE FECHO da lista, hoje só na /en/partnerships/. Ela é o que converte
   "ainda não traduzimos" em "isto tem nome", e por isso não pode ler como
   rodapé de rodapé: fica na cor secundária, como as definições, mas alinhada à
   COLUNA DAS DEFINIÇÕES acima de 40rem, e não à margem da lista.

   O recuo é o mesmo cálculo da grade logo acima: a calha de 11rem da coluna dos
   termos mais os 1,5rem de vão. A nota comenta as definições, não os termos.
   Sem ele a frase começaria embaixo de "Sorteador" e leria como a ficha de um
   sétimo termo — e o risco não é teórico, porque a nota literalmente COMEÇA com
   a palavra "Sorteador", que é um dos seis termos da lista logo acima.

   ⚠️ O SELETOR PRECISA DO `.rodape` NA FRENTE, e a primeira versão não tinha.
   Quarenta linhas acima existe `.rodape p { max-width: none; margin: 0 0 0.5rem }`,
   de especificidade (0,1,1), que alcança este <p> e vence `.glossario__nota`
   sozinha, que é (0,1,0). Medido em 22/08/2026: sem o prefixo, `margin-top`
   saía 0 e `max-width` saía `none` — os dois valores da regra genérica — e a
   media query não socorria, porque media query não soma especificidade.

   É A MESMA FAMÍLIA DE FALHA DA `.com-glosa--leitura`, e ela reaparece pelo
   mesmo motivo: classe nova, primeira vez que hospeda alguma coisa, e o defeito
   não dá erro nenhum na tela. O que muda é o mecanismo — lá faltava uma
   declaração, aqui sobrava um vizinho mais específico. A pergunta que pega as
   duas é a mesma: quem mais alcança este elemento? */
.rodape .glossario__nota {
    margin: 1.25rem 0 0;
    max-width: 62ch;
    color: var(--wes-text-muted);
    font-size: 0.875rem;
    line-height: 1.5;
}

@media (min-width: 40rem) {
    .rodape .glossario__nota { margin-left: calc(11rem + 1.5rem); }
}

/* Endereço de e-mail e o botão de copiar, lado a lado. O mailto continua, e o
   endereço continua sendo texto selecionável: sem JavaScript, nada se perde. */
.contato {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

.wes-copy {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--wes-border);
    border-radius: var(--raio-botao);
    background: transparent;
    color: var(--wes-text-muted);
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
}

.wes-copy:hover { color: var(--wes-text); border-color: var(--wes-text-muted); }

.wes-copy svg { width: 15px; height: 15px; }

.wes-copy__feito { display: none; }

/* Os dois rótulos ocupam a MESMA célula, então o botão já nasce com a largura
   do maior e não pula ao trocar de "Copiar" para "Copiado". `visibility`, e
   não `display`, é o que reserva o espaço — e também esconde do leitor de tela,
   que é o comportamento desejado. */
.wes-copy__textos { display: grid; }

.wes-copy__textos > span { grid-area: 1 / 1; text-align: left; }

.wes-copy__rotulo-feito { visibility: hidden; }

/* Feedback de "copiado": borda e ícone na cor de sucesso — elemento não
   textual, 3,61:1 na pior superfície. O rótulo fica na cor do texto, pela mesma
   razão do ponto do "ao vivo": nenhum verde fixo passa 4,5:1 nas duas pontas. */
.wes-copy[data-copiado] {
    border-color: var(--wes-success);
    color: var(--wes-text);
}

.wes-copy[data-copiado] .wes-copy__icone { display: none; }
.wes-copy[data-copiado] .wes-copy__feito { display: inline-flex; color: var(--wes-success); }

.wes-copy[data-copiado] .wes-copy__rotulo       { visibility: hidden; }
.wes-copy[data-copiado] .wes-copy__rotulo-feito { visibility: visible; }

/* ---------------------------------------------------------------------------
   19. Troca de tema — "Flashbang Prevent"

   MECÂNICA COMPLETA, transcrita da origem em 17/08/2026. O QUE SEGURA O
   FLASHBANG É O MODO DE MESCLAGEM E A GEOMETRIA, não a duração: quem for
   depurar não começa pelos 650ms.
   -------------------------------------------------------------------------- */

/* O cross-fade padrão da API usa `plus-lighter`, que SOMA luminância. */
::view-transition-old(root),
::view-transition-new(root) {
    mix-blend-mode: normal;
    animation: none;
}

/* Sem direção conhecida: cross-fade simples, sem círculo. */
:root:not([data-wes-theme-dir])::view-transition-old(root) {
    animation: wes-saida 400ms ease-in-out both;
}

:root:not([data-wes-theme-dir])::view-transition-new(root) {
    animation: wes-entrada 400ms ease-in-out both;
}

/* ACENDER: a luz nova cresce por cima. */
:root[data-wes-theme-dir="to-light"]::view-transition-new(root) {
    z-index: 2;
    animation: wes-crescer 650ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* APAGAR: a luz velha encolhe por cima, revelando o escuro já inteiro embaixo. */
:root[data-wes-theme-dir="to-dark"]::view-transition-old(root) {
    z-index: 2;
    animation: wes-encolher 350ms cubic-bezier(0.5, 0, 0.75, 0) both;
}

/* A camada de baixo fica PARADA: sem isto ela desbota junto e o que aparece
   pelo buraco do círculo é uma mistura das duas fotos. */
:root[data-wes-theme-dir="to-light"]::view-transition-old(root),
:root[data-wes-theme-dir="to-dark"]::view-transition-new(root) {
    z-index: 1;
    animation: none;
}

@keyframes wes-crescer {
    from { clip-path: circle(0px at var(--wes-theme-x, 50%) var(--wes-theme-y, 50%)); }
    to   { clip-path: circle(var(--wes-theme-r, 150vmax) at var(--wes-theme-x, 50%) var(--wes-theme-y, 50%)); }
}

@keyframes wes-encolher {
    from { clip-path: circle(var(--wes-theme-r, 150vmax) at var(--wes-theme-x, 50%) var(--wes-theme-y, 50%)); }
    to   { clip-path: circle(0px at var(--wes-theme-x, 50%) var(--wes-theme-y, 50%)); }
}

@keyframes wes-saida   { to   { opacity: 0; } }
@keyframes wes-entrada { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        clip-path: none !important;
        z-index: auto !important;
        mix-blend-mode: normal !important;
    }

    ::view-transition-old(root) { animation: wes-saida   180ms ease-in-out both !important; }
    ::view-transition-new(root) { animation: wes-entrada 180ms ease-in-out both !important; }
}