/*
Theme Name: Xtamina
Theme URI: https://xtamina.com.br
Author: Xtamina
Description: Portal gamer brasileiro. Dois aparelhos num tema so: no escuro uma TV de tubo, no claro um Game Boy. Calendario de eventos, HUD e botoes de joystick.
Version: 6.22.0
Requires at least: 5.9
Tested up to: 6.6
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: xtamina
Tags: two-columns, right-sidebar, custom-menu, featured-images, translation-ready
*/

/* A versao acima NAO e enfeite: functions.php enfileira o style.css com
   wp_get_theme()->get('Version') como cache-buster. Esquecer de subi-la faz
   o navegador e o cache do servidor continuarem servindo o CSS antigo depois
   do upload, e o site parece nao ter mudado.
   "Requires PHP: 7.0" tambem e medido, nao chutado: o tema usa ?? em
   functions.php e tag-eventos.php e <=> em functions.php.
   "Requires at least: 5.9" e por causa do theme.json versao 2. */

/* ====================================================
   XTAMINA BLOG — WORDPRESS THEME
   Portal gamer. Roxo primario, vermelho de destaque, registro retro.

   PALETA — revisao de 16/09/2026, corrigida em 17/09
   O problema anterior nao era a intensidade do roxo, era a quantidade: as
   superficies e bordas carregavam 27% a 47% de saturacao roxa, entao o roxo
   nao destacava nada, estava no ar o tempo todo.

   ERRATA: esta nota dizia que os neutros tinham ficado "entre 8% e 14%".
   Medidos, estavam entre 15% e 25% — --border-bright a 24,5% e
   --border-campo a 24,8% nao eram neutros, eram roxo dessaturado. O numero
   foi escrito por estimativa e nunca conferido.

   CARCACA DE DUALSHOCK 2 — correcao de 17/09/2026
   Referencia: o controle preto do PS2 e os botoes escuros do PS1, que sao
   praticamente acromaticos. Os neutros foram para 5% de saturacao (7% nas
   bordas, que ganham um sopro a mais para nao virarem cinza de escritorio),
   com a MESMA matiz de antes.

   A conversao preservou a LUMINANCIA de cada token, com desvio de 0,00%.
   Por isso nenhuma medida de contraste mudou: contraste e funcao de
   luminancia, e so a saturacao se moveu. A auditoria seguiu em zero falhas
   antes e depois, sem reajustar um unico par de cores.

   O roxo ambiente tambem recuou, porque neutro dessaturado nao resolve
   sozinho se houver um veu por cima: o fosforo da vinheta foi de 4,5% para
   2%, o vazamento do topo de 12% para 4,5%, e o brilho que cobria cada card
   do feed deixou de ser roxo e virou branco — reflexo em vidro nao assume a
   cor da marca.

   Os acentos ficaram intactos, entre 43% e 72%. O roxo nao diminuiu: ele
   parou de estar no ar para poder aparecer onde e apontamento.
   Fosforo de CRT nunca foi saturado puro, e e dai que vem a leitura retro.

   As matizes de marca estao preservadas: roxo em 272 graus, vermelho em 350.
   Nenhuma cor trocou de familia.

   As cores de topico (--g-*) seguem saturadas DE PROPOSITO. Com o roxo
   ambiente recuando, o sinal semantico passa a ser o unico que grita, que e
   exatamente onde a cor deveria estar.
   ==================================================== */

:root {
  --bg-base:        #0f0e0f;
  --bg-surface:     #161617;
  --bg-card:        #1d1d1e;
  --bg-card-hover:  #272628;

  /* CAMPO DE FORMULARIO — separado de --bg-surface de proposito.
     --bg-surface faz dois trabalhos: poco de campo e cromo secundario. No
     escuro os dois querem a mesma coisa (mais escuro que o container, um
     rebaixo). No claro querem o OPOSTO: campo mais escuro que o fundo e a
     convencao universal de DESABILITADO, e campo disponivel e claro com
     borda. Espelhar a luminosidade preservava a mecanica e invertia o
     sentido. */
  --bg-campo:       #161617;

  --border:         #424044;
  --border-bright:  #5a575e;
  /* BORDA DE CAMPO — so para onde se digita ou se escolhe.
     Num botao com rotulo a palavra ja diz que ali se clica, entao a borda
     pode ser discreta. Num campo nao: a borda E o que informa que existe
     uma caixa de entrada, e a WCAG cobra 3:1 dela. O --border-bright que
     os campos usavam dava 2,38 no escuro e 1,76 no claro.
     Nao virou um ajuste no proprio --border-bright porque ele tambem pinta
     a linha de secao, a citacao, o anel do avatar e o fundo do hover do
     card: mexer nele mudaria oito coisas para consertar uma. */
  --border-campo:   #6d6971;
  /* Direcao e dose da --g-tinta (ver o mapa de topicos). No escuro a cor do
     topico sobe em direcao ao branco; no claro desce para o preto. */
  --g-mistura:      #ffffff;
  /* 20% e nao 16%: a pastilha do filtro ganhou banda de luz no topo, o que
     levantou o fundo sob o rotulo, e o Battle Royale caiu para 4,48. */
  --g-dose:         20%;
  /* ══ RAIO ══════════════════════════════════════════════════════════
     ESCALA POR TAMANHO. Medido, a razao raio/lado ia de 1,7% a 14,6% entre
     pecas que carregavam o mesmo token: .cal-pitch com 96px de lado e
     .post-full com 600px, ambas em raio 14. Mesmo numero, peso visual
     completamente diferente.

     A pratica corrente e raio fixo por FAIXA de tamanho, nao proporcional:
     o olho relaciona raio e tamanho ate uns 48px e depois para de comparar.
       ate 28px   -> mini       peca pequena, selo, campo estreito
       28 a 48px  -> controle   botao, linha de lista, miniatura
       acima      -> painel     card, widget, artigo, dropdown

     ANINHAMENTO. Filho encostado no canto do pai precisa de arco
     CONCENTRICO, senao a folga se abre na quina. A conta e
     interno = externo - folga (cloudfour.com/thinks/the-math-behind-
     nesting-rounded-corners). Aqui ela sai de calc, e nao de um token
     chumbado, para se corrigir sozinha se a folga ou o raio mudarem.

     O painel foi de 14 para 20px POR CAUSA disso: com 14 e folga de 14 o
     interno dava zero e todo rebaixo virava quadrado. A 20 sobram 6 — que e
     exatamente a faixa de controle, entao botao e poco concordam por
     estarem na mesma profundidade.

     A regra so vale para filho NO CANTO. .cal-pitch-icon fica centralizado
     no meio de um banner, longe das quinas: ali nao ha arco para ser
     concentrico, e ele usa a faixa de tamanho.

     Pastilha (999px) e redondo (50%) ficam fora da escala: neles a forma e
     a identidade da peca, nao um acabamento. */
  /* COLOR-SCHEME — o que o navegador desenha por conta propria.
     A lista que o <select> abre nao e HTML: quem pinta e o sistema, e CSS
     nao alcanca aquilo. O unico controle que existe e este: declarar o
     esquema, e o navegador escolhe a versao escura ou clara dos controles
     nativos. Vale tambem para barra de rolagem, seletor de data e menu de
     contexto de campo. Sem isso o popup do UF saia claro sobre um site
     escuro, que foi o que apareceu na tela. */
  color-scheme: dark;

  /* LARGURA DA PAGINA — um numero, tres lugares.
     Header, conteudo e rodape tinham o mesmo 1280 escrito tres vezes. Quando
     a sidebar foi alargada, o .site-wrapper subiu para 1520 e os outros dois
     ficaram para tras: o painel do menu passou a comecar 120px para dentro
     da coluna de conteudo, e a curva do canto inferior direito parava 120px
     antes da borda do card. Era visivel na home a olho nu.
     Nao e erro de valor, e erro de FORMA: tres copias do mesmo numero so
     permanecem iguais por disciplina, e disciplina falha na primeira vez que
     uma delas muda. Com token, alterar a largura da pagina passa a ser uma
     linha, e desalinhar os tres deixa de ser possivel. */
  --largura-pagina: 1520px;

  /* ══ ESCALA TIPOGRAFICA ═══════════════════════════════════════════
     NOVE NIVEIS. Antes eram dezoito tamanhos literais espalhados por 124
     declaracoes, numa rampa continua de 9 a 20px de um pixel por vez.

     Um pixel nao e hierarquia. A regra pratica e que um degrau precisa
     ser uns 12% maior que o anterior para ser percebido como outro
     nivel — de 19 para 20px sao 5%, e abaixo do limiar o olho nao
     classifica como "maior", classifica como desalinhado. Era dai que
     vinha a sensacao de bagunca na home, e nao de uma peca errada:
     seis tamanhos entre 15 e 20 nao criavam seis niveis, criavam um
     nivel borrado.

     Os degraus daqui para cima sao todos de 14% ou mais. Os tres de
     baixo (10, 11, 12) sao a excecao declarada: entre eles a distancia
     e de 9 a 10%, abaixo do limiar. Ficam porque no tamanho pequeno o
     olho e mais tolerante e porque os tres carregam trabalhos distintos
     e separados na tela — selo, meta e rotulo nunca aparecem lado a
     lado no mesmo bloco. E excecao com nome e motivo, nao degrau
     inventado.

     USE O TOKEN, NAO O NUMERO. Peca nova escolhe entre --t-selo e
     --t-display; nao existe "um pouquinho maior". Foi assim que
     apareceram 14,5px, 11px com 1,6 de entreletra e 34px, todos
     inventados e todos corrigidos depois.

     As duas familias nao rendem igual no mesmo px: medido nos arquivos,
     a Rajdhani tem caixa alta 12% menor que a Inter e largura media 17%
     menor. Um rotulo em caixa alta de HUD aparenta menos que o mesmo
     numero em texto corrido. Isso nao esta compensado aqui — fica como
     ajuste futuro, se incomodar. */
  --t-selo:      10px;   /* badge de genero, antetitulo                */
  --t-meta:      11px;   /* hora, data de evento, etiqueta             */
  --t-mini:      12px;   /* rotulo pequeno, resumo de card secundario  */
  --t-rotulo:    14px;   /* ANCORA: rotulo HUD, titulo de lista, resumo*/
  --t-corpo:     16px;   /* corpo do post, titulo de card pequeno      */
  --t-titulo:    20px;   /* titulo de card                             */
  --t-secao:     24px;   /* h2 do post                                 */
  --t-artigo:    32px;   /* h1                                         */
  --t-display:   48px;   /* estado vazio                               */


  --raio-painel:    16px;
  /* O CARTUCHO FICA FORA DA FAIXA DE PAINEL, de proposito.
     Medido na referencia: 7,2px, arredondado para 8 para nao introduzir
     quebrado numa escala inteira. A 16px a peca lia como card de aplicativo;
     a 8px lia como plastico moldado, que e o material que ela imita. E a
     aresta seca e o que faz o entalhe do canto ter sentido — chanfro agudo
     ao lado de canto muito arredondado e contradicao de material.

     A escala nao se rompe: ela ja abre excecao declarada para pastilha e
     redondo, "neles a forma e a identidade da peca". O card do feed e o
     objeto que da nome ao tema e o unico com silhueta propria. Mesmo caso.
     Vira token com nome, e nao numero solto, para nao virar precedente. */
  --raio-cartucho:   8px;
  --raio-controle:   6px;
  --raio-mini:       4px;
  /* Padrao do filho aninhado. Cada container com folga propria sobrescreve
     com a conta dele; quem nao sobrescreve cai na faixa de controle, que e
     o valor certo para peca solta de 28 a 48px. */
  --raio-interno:   var(--raio-controle);

  /* POCO REBAIXADO — o degrau dos cards de cartucho.
     Mesmo tom da carcaca; o que se ve e a sombra do rebaixo. Ver .post-thumb. */
  --poco-sombra:    60%;
  --poco-contorno:  34%;
  --poco-luz:       11%;

  /* POCO DE CAMPO — o mesmo recesso, dose propria.
     As doses do poco acima foram calibradas para a miniatura, que e grande e
     fica sobre --bg-card. O campo de formulario nao serve nenhuma das duas
     condicoes, e copiar os numeros nao funciona em nenhum dos modos:

     Escuro: --bg-campo e #161617, luminancia 0,81%. Escurecer 60% move
     -0,53 ponto percentual. E nada. Quem desenha o rebaixo aqui e so o fio
     de luz na aresta de baixo, +2,16 pp, 1,37:1 contra o fundo — o mesmo
     motivo pelo qual a carcaca do cartucho e desenhada adicionando luz.

     Claro: --bg-campo e #f9f8f6, luminancia 93,93%. A mesma sombra de 22%
     custa 40,5 pp. Dentro de uma caixa de 38px isso nao le como rebaixo, le
     como sombra projetada dura. A 3,5% da 7 pp, que e o degrau certo.

     Entao a regra e uma so e os dois tokens se invertem: no escuro a luz
     trabalha e a sombra e zero; no claro a sombra trabalha e a luz e zero.
     Mix a 0% resolve para transparente, entao a camada inutil nao pinta. */
  --campo-sombra:    0%;
  --campo-luz:      13%;

  --purple-dark:    #3a1f51;
  --purple-mid:     #763caa;
  --purple-bright:  #b17edd;
  --purple-glow:    #c69ce8;
  --red-mid:        #ae3247;
  --red-bright:     #df586e;
  --red-glow:       #e87386;
  --text-primary:   #eae9e6;
  --text-secondary: #a29fa8;
  --text-muted:     #8b888f;
  /* Apelidos legados, nenhum componente consome. Ficam como var() e nao como
     hex: repetidos a mao eles envelhecem sozinhos, que foi o que aconteceu
     quando --purple-bright mudou no modo claro e o --accent nao acompanhou. */

  /* CORES DE TOPICO — fonte unica.
     Elas ja existiam chumbadas dentro do calendario (.cal-filter-btn.mod-*,
     .cal-event-item.mod-*, .cal-event-card.mod-*) e cobriam so cinco
     generos. Aqui viram variaveis e ganham os dois que faltavam. As regras
     do calendario ainda repetem os mesmos hex na mao; quando forem
     migradas, estas sao as canonicas.

     ORIGEM: cada matiz corresponde a uma carcaca real da familia Game Boy,
     o que amarra o modo claro ao modo escuro. Seis ja caiam nela por acaso;
     so o battle-royale foi corrigido, de um verde-agua inventado para o
     Cobalt do Advance SP, que de quebra abriu o vao mais espremido da roda.

       fgc            Flame          GBA SP
       fps            Spice Orange   GBA
       gacha          Dandelion      GBC
       rpg            Kiwi           GBC
       moba           Teal           GBC
       battle-royale  Cobalt         GBA SP
       cozy           Berry          GBC

     Saturacao em 74%, acima do teto de 72% da marca e bem acima dos 14% dos
     neutros. Ficam sendo o mais saturado da tela, que e onde a cor deve
     gritar, sem cair no neon que destoava da base retro.

     A excecao e fps e gacha, separados por 15 graus: laranja e dourado sao
     vizinhos na propria linha de produtos. Distinguem-se pela luminancia
     (6,20 contra 10,04 de contraste) e nunca aparecem coloridos ao mesmo
     tempo, porque no widget a cor so existe no hover. */
  --g-fgc:           #e65971;
  --g-moba:          #21b5de;
  --g-battle-royale: #5f81e7;
  --g-fps:           #de8921;
  --g-rpg:           #a4ea75;
  --g-gacha:         #e4c64e;
  --g-cozy:          #ee91cc;
  /* ESTRATEGIA — matiz 158, o vao que sobrava no circulo.
     Os dois vaos grandes eram 144 e 273 graus. O 273 e roxo, a cor da
     marca, entao restou o verde-azulado. Dentro dele o matiz foi
     escolhido MEDINDO: para cada candidato calculei a distancia
     perceptiva (CIE76) ate os sete que ja existem e fiquei com o que
     maximiza a menor delas. Resultado: 40,6 no escuro e 33,6 no claro,
     contra 32,1 e 17,1 do par mais apertado que o portal ja tinha
     (fps e gacha). A cor nova e mais separada do que a briga que ja
     estava no ar. */
  --g-estrategia:    #83ecc6;

  /* Estado, nao categoria. Antes sucesso e erro usavam os hex de RPG e FPS
     copiados na mao, entao uma mensagem de erro era laranja identico ao FPS e
     o leitor nao sabia se a cor significava estado ou genero. */
  --ok:             #8dd65c;
  --alerta:         #e0a052;

  /* Texto sobre preenchimento da marca. Branco serve nos dois modos, porque
     no claro o roxo escurece em vez de clarear. */
  --text-on-brand:  #ffffff;

  /* LED apagado. Derivado do vermelho, nao preto puro. */
  --led-off:        #371b1f;

  /* Rotulo de peca fisica. No claro e o azul cobalto do Game Boy, que
     funciona porque a pastilha la e clara e o azul e escuro. No escuro a
     pastilha e escura e o roxo tambem — dois tons medios um sobre o outro,
     medido em 2,19. Quem carrega a cor do portal sao os botoes de acao, nao
     os rotulos, entao aqui o rotulo e so texto. */
  --gb-rotulo:      var(--text-primary);

  /* Plastico do botao deslizante do interruptor. Medido em #e3e1d5 na foto
     do DMG; no escuro ele nao pode ser off-white, senao vira a peca mais
     clara da tela inteira. */
  --gb-knob:        #6d6a70;
  /* Trilho do interruptor. NAO e --bg-campo: campo de formulario precisa ler
     como disponivel e por isso e quase branco no modo claro, e ali o botao
     desaparecia (1,24 de contraste). Trilho e um sulco cortado no plastico,
     e sulco mostra sombra. */
  --gb-trilho:      #161617;
  /* A tela do bloco de data existe nos DOIS modos: e display, e tanto uma TV
     quanto um Game Boy exibem. Os quatro tons canonicos do LCD nao pertencem
     ao tema, pertencem a tela — por isso nao mudam com o interruptor.
     --gb-moldura e a carcaca em volta do vidro; essa SIM muda de modo,
     porque a moldura so tem trabalho a fazer no claro (ver .evento-data). */
  --gb-tela:        #9bbc0f;
  --gb-moldura:     color-mix(in srgb, #000 40%, transparent);

  /* LAVAGEM DE ESTADO — a cor que pinta hover, ativo e selecionado.
     No escuro o roxo e MAIS CLARO que o fundo, entao lavar com ele levanta
     a superficie e o texto ganha contraste. No claro o roxo e mais escuro,
     e a mesma expressao AFUNDA o fundo em direcao a cor do proprio texto:
     doze regras reprovavam por isso, entre 3,85 e 4,46.
     Nao e o texto que esta errado, e a lavagem indo para o lado contrario.
     Por isso ela e token: no escuro clareia com roxo, no claro clareia com
     branco. Mesma intencao, direcao oposta. */
  --lavagem:        var(--purple-mid);
  /* Painel do menu. No escuro ele quase nao se destaca da moldura (1,12 de
     contraste) e e proposital: quem desenha a regiao e a curva do canto. */
  --bg-painel:      #1c1b1d;
  --nav-hover:      #222223;
  /* Poco no escuro: sombra no topo, fio de luz na aresta de baixo, contorno
     aceso. Escurecer nao funciona aqui — daria contraste 1,03. */
  --nav-atual:      #181718;
  --nav-atual-relevo:
    inset 0 3px 5px color-mix(in srgb, #000 65%, transparent),
    inset 0 -1px 0 color-mix(in srgb, #fff 22%, transparent),
    0 0 0 1px color-mix(in srgb, var(--purple-bright) 50%, transparent);

  /* A PILHA TINHA DUAS PROMESSAS FALSAS.
     'Orbitron' vinha depois da Rajdhani, que sempre carrega primeiro —
     entao o navegador baixava tres pesos que nenhum caractere do site
     chegava a usar. 'Share Tech Mono' nunca foi pedida ao Google: so
     resolveria em quem ja a tivesse instalada na maquina.
     Sobrou a fonte que e usada de verdade e um fallback honesto. */
  --font-hud:       'Rajdhani', system-ui, sans-serif;
  --font-body:      'Inter', 'Segoe UI', system-ui, sans-serif;
}

/* MAPA DE TOPICO -> COR
   Vale para qualquer elemento que carregue a classe, seja o widget da
   sidebar (.g-fgc) ou o calendario (.mod-fgc). Definido uma vez aqui, o
   --g-topico desce por heranca para icone, borda, fundo e contorno de foco
   de todos os componentes, presentes e futuros. Genero novo entra com uma
   linha aqui e uma no :root, e ja funciona nos dois lugares. */
.g-fgc,           .mod-fgc           { --g-topico: var(--g-fgc); }
.g-moba,          .mod-moba          { --g-topico: var(--g-moba); }
.g-battle-royale, .mod-battle-royale { --g-topico: var(--g-battle-royale); }
.g-fps,           .mod-fps           { --g-topico: var(--g-fps); }
.g-rpg,           .mod-rpg           { --g-topico: var(--g-rpg); }
.g-gacha,         .mod-gacha         { --g-topico: var(--g-gacha); }
.g-cozy,          .mod-cozy          { --g-topico: var(--g-cozy); }
.g-estrategia,    .mod-estrategia    { --g-topico: var(--g-estrategia); }

/* Rede de seguranca: genero sem cor definida acima nao fica invisivel, cai
   no roxo da marca. Em :where() para ter especificidade zero e sempre
   perder para o mapa, independente da ordem no arquivo. */
:where(.genero-item, .cal-filter-btn, .cal-event-item, .cal-event-card,
        .sidebar-post-item-popular) {
  --g-topico: var(--purple-bright);
  /* As sete cores de topico saem de carcacas reais de Game Boy: foram
     escolhidas como PREENCHIMENTO. Usadas como TEXTO ou CONTORNO elas
     reprovavam feio, sobretudo no claro, onde o verde de RPG sobre a
     sidebar dava 1,15. --g-tinta e a mesma cor puxada na direcao do modo:
     clareada no escuro, escurecida no claro. O matiz nao anda mais que
     0,5°, entao a categoria continua sendo reconhecida pela cor.
     Preenchimento continua usando --g-topico cru. */
  --g-tinta: color-mix(in srgb, var(--g-mistura) var(--g-dose), var(--g-topico));
}

/* O rotulo de secao e preenchido, entao sua face sai de --peca, nao de
   --g-topico. Sem genero fica no roxo da marca; com genero, na cor do
   genero escurecida o bastante para segurar texto branco.
   Em :where() pelo mesmo motivo: precisa perder para .g-fgc e afins. */
:where(.section-label) { --peca: var(--purple-mid); }
.section-label.g-fgc           { --peca: color-mix(in srgb, #000 55%, var(--g-fgc)); }
.section-label.g-moba          { --peca: color-mix(in srgb, #000 55%, var(--g-moba)); }
.section-label.g-battle-royale { --peca: color-mix(in srgb, #000 55%, var(--g-battle-royale)); }
.section-label.g-fps           { --peca: color-mix(in srgb, #000 55%, var(--g-fps)); }
.section-label.g-rpg           { --peca: color-mix(in srgb, #000 55%, var(--g-rpg)); }
.section-label.g-gacha         { --peca: color-mix(in srgb, #000 55%, var(--g-gacha)); }
.section-label.g-cozy          { --peca: color-mix(in srgb, #000 55%, var(--g-cozy)); }
.section-label.g-estrategia    { --peca: color-mix(in srgb, #000 55%, var(--g-estrategia)); }


/* ══════════════════════════════════════════════════════════════════════
   MODO CLARO — GAME BOY

   O escuro e o padrao e vive no :root. Aqui so os tokens que mudam.

   POR QUE UM SEGUNDO DESENHO E NAO UMA INVERSAO: o efeito de tubo so
   existe porque o fundo tem 0,32% de luminancia e tudo la e desenhado
   CLAREANDO. Em fundo claro isso nao funciona. Um Game Boy resolve pelo
   caminho oposto: a tela de LCD tem grade de pontos, e grade de pontos e
   desenhada ESCURECENDO, o que funciona porque ali sobra luminancia para
   remover. Cada modo usa a unica tecnica valida no proprio fundo.

   HIERARQUIA INVERTIDA: no escuro, mais enfase e mais claro, entao glow
   fica acima de bright. No claro e o contrario, e glow fica ABAIXO. Nao e
   descuido, e o que mantem o significado dos tokens nos dois modos.

   INVARIANTE: O CARD E SEMPRE MAIS CLARO QUE A PAGINA, nos dois modos.
   O card e o conteudo, entao ele avanca; o fundo recua. Inverter isso faz o
   card virar um buraco e a pagina brilhar em volta. No escuro a base tem 6%
   de luz e o card 12%; no claro a base tem 70% e o card 87%. A relacao e a
   mesma, so a faixa muda.

   Por isso o cinza do DMG (#c4bebb, o off-white original; o bege da
   referencia era amarelamento do plastico com UV) e a PAGINA, nao o card.
   O aparelho e o fundo, e o conteudo sao placas claras sobre ele.

   As matizes sao as mesmas do escuro, so escurecidas: uma categoria nao
   pode trocar de cor entre os modos, senao o leitor perde o codigo.
   ══════════════════════════════════════════════════════════════════════ */
html[data-tema="claro"] {
  color-scheme: light;
  --bg-base:         #d0cabe;
  --bg-surface:      #dfdbd3;
  --bg-card:         #ece9e2;
  --bg-card-hover:   #e3e0d9;
  --bg-campo:          #f9f8f6;
  --border:          #bfb7a6;
  --border-bright:   #988c71;
  /* Mesma matiz do --border-bright, so mais escura: e o tom mais CLARO que
     ainda fecha 3:1 contra as quatro superficies, para a borda continuar
     discreta em vez de virar um traco preto em volta do campo. */
  --border-campo:    #6e6552;
  --g-mistura:       #000000;
  --g-dose:          56%;
  /* No claro a sombra do rebaixo e mais discreta e o fio de luz mais forte:
     plastico claro devolve mais luz, e a sombra dura denunciaria o truque. */
  --poco-sombra:     22%;
  --poco-contorno:   14%;
  --poco-luz:        65%;
  /* Invertido em relacao ao escuro: aqui o campo e quase branco, entao a
     sombra do topo carrega o rebaixo e o fio de luz nao teria onde aparecer
     (65% de branco sobre #f9f8f6 da 1,04:1, invisivel). Ver o bloco de
     --campo-sombra no tema escuro para as medidas. */
  --campo-sombra:   3.5%;
  --campo-luz:        0%;
  --purple-dark:     #3a1c54;
  --purple-mid:      #5e2b8a;
  /* 4% mais escuro que o roxo da marca. E o minimo para o link passar 4,5:1
     sobre --bg-base, que e a superficie mais escura onde ele cai no claro
     (4,34 antes, 4,59 agora). O ajuste so ficou pequeno porque a lavagem
     dos estados virou branca; antes disso precisaria de quatro vezes mais
     e o link ficaria quase preto. */
  --purple-bright:   #7237a5;
  --purple-glow:     #53257c;
  --red-mid:         #86182e;
  --red-bright:      #b4214d;
  --red-glow:        #761327;
  --text-primary:    #1c1c1c;
  --text-secondary:  #4c4441;
  --text-muted:      #655c58;
  --text-on-brand:   #ffffff;
  --ok:              #225d16;
  --alerta:          #794415;
  --led-off:         #7c5057;
  --g-fgc:           #b71530;
  --g-moba:          #0e647c;
  --g-battle-royale: #194be1;
  --g-fps:           #85500f;
  --g-rpg:           #31690c;
  --g-gacha:         #6e5a0d;
  --g-cozy:          #ae1476;
  --g-estrategia:    #0a5238;

  /* IDENTIDADE DO APARELHO — so fazem sentido no modo claro.
     A moldura fosca em volta do vidro e o verde do fosforo aceso. */
  /* Todo rotulo de um Game Boy e azul cobalto: "Nintendo GAME BOY",
     SELECT, START, A, B. Nao e preto, e essa e a assinatura tipografica do
     aparelho. Medido na foto do DMG em 17/09/2026. */
  /* O rotulo da tag e NEUTRO nos dois modos.
     Era --gb-azul aqui e --text-primary no escuro, ou seja, a mesma peca
     mudava de cor com o interruptor sem razao — sobra de quando eu montei
     a paleta Game Boy e liguei o azul do DMG ao rotulo sem pensar no que
     ele disputa. Medido: o azul tem 100% de saturacao com peso 700, o
     titulo tem 0% com peso 600. Cor saturada em negrito chama mais atencao
     que 6px a mais de tamanho, entao a tag vencia o titulo do post.
     O --gb-azul fica declarado para quando houver um lugar onde ele seja
     o acento, e nao o ruido. */
  --gb-azul:           #003cb3;
  --gb-rotulo:         var(--text-primary);
  --gb-knob:           #e3e1d5;
  --gb-trilho:         #a39f85;
  /* Painel do DMG, matiz 208 graus. O hex medido no aparelho e #828c95, mas
     a 55% de luminosidade ele e MEIO-TOM: nem texto claro nem escuro passam
     nele. Na foto esse painel carrega dois rotulos minusculos; aqui ele
     carrega dez itens de menu, entao precisa de margem.
     A 74% o texto secundario passa com 5,01 e a hierarquia contra o
     primario sobrevive. Quem faz a peca ser reconhecivel e a matiz
     cinza-lavanda e a curva do canto, nao a luminosidade exata. */
  /* Cinza NEUTRO, matiz 26 e saturacao 6%, como medido na foto frontal
     (#c6c2bf / #c2bebb). O #b7bdc2 anterior tinha matiz 207 — azul. Veio da
     primeira foto, que tinha dominante fria de iluminacao, e eu tomei o
     desvio de luz por cor do objeto.
     A 74% de luz o texto secundario passa com 5,05; a carcaca real e mais
     clara, mas ali o painel carrega dois rotulos e aqui carrega dez itens. */
  --bg-painel:         #c1bcb9;
  --nav-hover:         #b0aaa6;
  --nav-atual:         #a29c98;
  --nav-atual-relevo:
    inset 0 3px 5px color-mix(in srgb, #000 30%, transparent),
    inset 0 -1px 0 color-mix(in srgb, #fff 25%, transparent);
  --gb-tela:           #9bbc0f;
  /* Moldura opaca e escura no claro: aqui ela e a unica coisa que separa a
     tela do item (1,50 sem ela, 8,97 com ela). */
  --gb-moldura:        #2e3133;
  --lavagem:           #ffffff;

  /* espelham purple-bright e red-bright, como no escuro */
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  /* Nao ha mais moldura para reservar: a vinheta faz o fechamento das bordas.
     O que sobra aqui e so a calha minima para o conteudo nao encostar na
     quina da tela em viewport estreita. */
  padding: 0 20px 28px;
  background-color: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--t-corpo);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

/* TELA DE TUBO NO FUNDO DA PAGINA
   Fica ATRAS do conteudo, em z-index 0. Card, sidebar e rodape tem fundo
   opaco e a cobrem, entao o efeito aparece nas margens e nos vaos, sem
   nunca encostar em texto.

   Regra que vale para tudo aqui: o fundo tem 0,32% de luminancia, entao
   escurecer nao produz efeito nenhum. Toda a forma e desenhada CLAREANDO,
   e so a vinheta escurece, porque ali ja existe area clara para apagar.

   POR QUE VINHETA E NAO MOLDURA: moldura tem proporcao, e a viewport do
   navegador e 2:1 enquanto um tubo e 4:3. Toda tentativa de moldura ou
   cortava conteudo, ou sumia em notebook de 1366, ou precisava de clamp de
   espessura e raio escalando por breakpoint. Vinheta nao tem proporcao:
   funciona identica em qualquer largura, sem uma unica media query de
   geometria, e nunca encosta no conteudo.

   A ordem em background e de CIMA para BAIXO. A vinheta vem primeiro
   justamente para apagar as camadas abaixo dela conforme se afasta do
   centro: a varredura nao termina numa linha, ela se apaga. Era a quina
   dura que denunciava que isso e uma div. */
html:not([data-tema="claro"]) body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    /* 1. vinheta: fecha antes da margem e satura no preto.
          Centro deslocado para 52% porque a base do site tem rodape e a
          queda simetrica apagava ele por completo. */
    radial-gradient(ellipse 72% 88% at 50% 52%,
      transparent 32%,
      rgba(0,0,0,.42) 64%,
      rgba(0,0,0,.86) 86%,
      #000 100%),
    /* 2. reflexo especular do vidro, alto a esquerda */
    radial-gradient(ellipse 40% 38% at 27% 19%, rgba(255,255,255,.05) 0%, transparent 100%),
    /* 3. fosforo aceso no centro.
          De 4,5% para 2%: somado a camada 4 e as superficies, era isso que
          punha um veu roxo em tudo. O fosforo continua existindo, so parou
          de ser a cor dominante da tela. */
    radial-gradient(ellipse 56% 56% at 50% 46%, color-mix(in srgb, var(--purple-bright) 2%, transparent) 0%, transparent 100%),
    /* 4. brilho vazando do topo. De 12% para 4,5%, mesma razao: era uma
          elipse de 80% de largura cobrindo cabecalho e topo do feed, ou
          seja, a maior area roxa da pagina. */
    radial-gradient(ellipse 80% 42% at 50% -6%, color-mix(in srgb, var(--purple-mid) 4.5%, transparent) 0%, transparent 70%),
    /* 5. varredura */
    repeating-linear-gradient(0deg, rgba(255,255,255,.055) 0, transparent 1.5px, transparent 4px),
    /* 6. levantamento do centro: e o que da o que a vinheta apaga */
    radial-gradient(ellipse 70% 85% at 50% 48%,
      rgba(255,255,255,.048) 0%,
      rgba(255,255,255,.030) 58%,
      transparent 100%);
}

/* FIO DE LUZ: unico vestigio da quina do tubo. Uma linha, nao uma area,
   entao nao tem espessura para brigar com proporcao nem corta nada.
   A 7% porque abaixo disso a vinheta o engole na altura em que ele passa.
   So no escuro: no claro nao ha tubo, o aparelho e outro. */
html:not([data-tema="claro"]) body::after {
  content: '';
  position: fixed;
  inset: 70px 24px 30px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 26% / 10%;
  pointer-events: none;
  z-index: 0;
}

/* Em tela estreita a varredura de 4px vira ruido e o fio precisa se
   aproximar da borda. A vinheta nao muda: ela ja e relativa. */
@media (max-width: 680px) {
  body { padding: 0 12px 16px; }
  html:not([data-tema="claro"]) body::before {
    background:
      radial-gradient(ellipse 78% 86% at 50% 52%,
        transparent 34%,
        rgba(0,0,0,.40) 66%,
        rgba(0,0,0,.85) 87%,
        #000 100%),
      radial-gradient(ellipse 46% 34% at 28% 17%, rgba(255,255,255,.04) 0%, transparent 100%),
      radial-gradient(ellipse 60% 56% at 50% 45%, color-mix(in srgb, var(--purple-bright) 3.5%, transparent) 0%, transparent 100%),
      radial-gradient(ellipse 92% 38% at 50% -6%, color-mix(in srgb, var(--purple-mid) 10%, transparent) 0%, transparent 70%),
      repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0, transparent 2px, transparent 6px),
      radial-gradient(ellipse 76% 84% at 50% 48%,
        rgba(255,255,255,.040) 0%,
        rgba(255,255,255,.025) 58%,
        transparent 100%);
  }
  html:not([data-tema="claro"]) body::after {
    inset: 60px 8px 12px;
    border-radius: 18% / 6%;
    border-color: rgba(255,255,255,.055);
  }
}

/* O Inter so era carregado ate o peso 600. O navegador pede 700 no <strong>,
   nao encontrava, e caia no 600 sem avisar. Regra explicita para nao depender
   do padrao do navegador em nenhum contexto do portal. */
strong, b { font-weight: 700; }

a { color: var(--purple-bright); text-decoration: none; transition: color .2s; }
a:hover { color: var(--red-bright); }
img { max-width: 100%; display: block; }

/* Rola junto com a pagina, nao fixo: header flutuante fica POR CIMA da tela
   de tubo e quebra a ilusao de que tudo esta dentro dela. Fundo transparente
   pelo mesmo motivo, deixando a varredura do fundo atravessar. */
/* O menu vive na moldura do aparelho, acima da tela. Centrado nos 88px:
   12px de folga, 64px de header, 12px de folga. */
#site-header {
  position: relative;
  z-index: 10;
  padding-top: 12px;
  background: transparent;
}

.header-inner {
  max-width: var(--largura-pagina);
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  gap: 16px;
}

/* So o simbolo no header: o letreiro completo renderizado a 44px virava
   borrao ilegivel, e o grupo de texto ocupava ~121px que o menu precisava. */
.site-logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.logo-simbolo { width: 46px; height: 40px; display: block; transition: filter .25s ease; }
.site-logo:hover .logo-simbolo { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--red-bright) 55%, transparent)); }
.site-logo:focus-visible { outline: 2px solid var(--purple-bright); outline-offset: 4px; }


@keyframes pulse-logo {
  0%, 100% { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--red-glow) 80%, transparent)); }
  50%       { filter: drop-shadow(0 0 14px color-mix(in srgb, var(--red-glow) 35%, transparent)); }
}




.site-nav { display: flex; align-items: center; gap: 2px; }
.nav-item { position: relative; display: flex; align-items: center; }


/* ══════════════════════════════════════════════════════════════════════
   PAINEL DO MENU — a regiao cinza do DMG

   No Game Boy o painel que envolve a tela nao e a carcaca: e uma regiao
   propria, que agrupa a tela e os rotulos. Um menu faz exatamente isso.
   Ate aqui o menu flutuava na moldura, sem superficie nenhuma.

   A ASSINATURA E O CANTO. Tres cantos retos e um raio grande so no
   inferior direito. Com canto reto o painel e uma barra atravessando a
   tela; com a curva ele vira peca, com comeco e fim.

   O raio e a propria altura do painel, como no aparelho. A 26px parecia
   arredondamento generico de interface e nao remetia a nada.

   E e por causa dele que o painel sobrevive no modo escuro: medido, o
   contraste contra a moldura e 1,12, quase nada — mas o olho le a
   SILHUETA, nao a diferenca de luminancia. */
/* O PAINEL VIVE NA COLUNA DE CONTEUDO, NAO NA VIEWPORT.
   Coloca-lo no #site-header, que e de largura total, fazia ele atravessar a
   tela inteira enquanto o conteudo trava em --largura-pagina centralizados: o painel
   vazava pelos lados e a curva do canto ia parar na borda do monitor, longe
   de tudo. No .header-inner ele nasce alinhado com o card e com o rotulo de
   secao, porque os tres compartilham o mesmo max-width. */
#site-header { --painel-h: 46px; }
/* AS DUAS LINHAS DO APARELHO SAIRAM.
   Era um .header-inner::before de 26x7px a direita do menu, imitando o par
   magenta e azul-violeta que no DMG abraca a frase "DOT MATRIX WITH STEREO
   SOUND". A justificativa escrita aqui era que elas davam ritmo ao painel.

   No aparelho elas tem trabalho: abracam um texto. Aqui nao abracavam
   nada — ficavam soltas entre a busca e a curva do canto, e a 26px de
   largura num painel que passou a ter 1520, lendo como sujeira antes de
   ler como referencia. A assinatura do painel ja e a curva do canto
   inferior direito, que o proprio comentario acima chama de "A ASSINATURA
   E O CANTO". Dois ornamentos disputando a mesma funcao, e o menor
   perdendo.

   Com elas saiu o --gb-listra-a e o --gb-listra-b dos dois modos, e a
   regra de celular que as escondia. */
.header-inner {
  position: relative;
  background: var(--bg-painel);
  border-radius: 0 0 var(--painel-h) 0;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #000 22%, transparent);
  /* a busca recua da direita: sem isso a curva a engole */
  padding-right: calc(20px + var(--painel-h));
}

/* ITEM DO MENU — plano em repouso, relevo no toque.
   Dez itens com relevo permanente viravam painel de nave, e o item ativo
   ficava tao pesado quanto o item sob o mouse. Plano em repouso, so o
   apontado e o atual ganham peca. */
.nav-link {
  border-radius: var(--raio-controle);
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.nav-link:hover,
.nav-item:focus-within .nav-link {
  background: var(--nav-hover);
  box-shadow: 0 2px 0 color-mix(in srgb, #000 42%, var(--nav-hover)),
              inset 0 1px 0 color-mix(in srgb, #fff 15%, transparent);
  color: var(--text-primary);
}
/* SECAO ATUAL — afundada. O site nao tinha nenhuma indicacao disso. */
.nav-item.atual .nav-link,
.nav-link[aria-current="page"] {
  background: var(--nav-atual);
  box-shadow: var(--nav-atual-relevo);
  color: var(--text-primary);
}

/* O menu tem largura disputada por dez itens num espaco de ~790px. A 13px
   com espacamento de 1,5px ele ocupava ~785px e quebrava "Battle Royale" em
   duas linhas. 12px com espacamento menor deixa ~50px de folga.
   O nowrap e a garantia: nome de item de menu nunca quebra no meio. */
.nav-link {
  font-family: var(--font-hud);
  font-weight: 600;
  font-size: var(--t-rotulo);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-secondary);
  padding: 6px 8px;
  border: 1px solid transparent;
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all .2s;
  height: 64px;
}

.nav-link::before { content: ''; position: absolute; bottom: 0; left: 50%; right: 50%; height: 2px; background: var(--purple-bright); transition: all .2s; }
.nav-link:hover, .nav-item:focus-within .nav-link { color: var(--text-primary); background: color-mix(in srgb, var(--lavagem) 8%, transparent); }
.nav-link:hover::before, .nav-item:focus-within .nav-link::before { left: 0; right: 0; }

.nav-arrow { font-size: var(--t-mini); opacity: 0.45; transition: transform .2s, opacity .2s; line-height: 1; margin-top: 1px; }
.nav-item:hover .nav-arrow, .nav-item:focus-within .nav-arrow { transform: rotate(180deg); opacity: 1; color: var(--purple-bright); }

.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 180px;
  background: color-mix(in srgb, var(--bg-base) 97%, transparent);
  border: 1px solid var(--border-bright);
  border-top: 2px solid var(--purple-mid);
  box-shadow: 0 12px 40px rgba(0,0,0,0.7), 0 0 24px color-mix(in srgb, var(--purple-mid) 12%, transparent);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 200;
  backdrop-filter: blur(16px); border-radius: var(--raio-painel);
}

.nav-item:hover .nav-dropdown, .nav-item:focus-within .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }

.nav-dropdown-item {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 14px;
  font-family: var(--font-hud); font-weight: 500; font-size: var(--t-rotulo); letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--text-secondary);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
  transition: color .15s, background .15s, padding-left .15s;
  white-space: nowrap;
}
.nav-dropdown-item:last-child { border-bottom: none; }
.nav-dropdown-item::before { content: ''; width: 4px; height: 4px; background: var(--text-muted); clip-path: polygon(50% 0%,100% 50%,50% 100%,0% 50%); flex-shrink: 0; transition: background .15s; }
.nav-dropdown-item:hover { color: var(--text-primary); background: color-mix(in srgb, var(--lavagem) 10%, transparent); padding-left: 20px; }
.nav-dropdown-item:hover::before { background: var(--purple-bright); }

.nav-dropdown-all { display: flex; align-items: center; gap: 9px; padding: 8px 14px; font-family: var(--font-hud); font-size: var(--t-rotulo); letter-spacing: 2px; text-transform: uppercase; color: var(--purple-bright); border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--lavagem) 6%, transparent); transition: background .15s, color .15s; }
.nav-dropdown-all:hover { background: color-mix(in srgb, var(--lavagem) 15%, transparent); color: var(--purple-glow); }

.mobile-nav-section { margin-bottom: 4px; }

/* ══════════════════════════════════════════════════════════════════════
   DRAWER — peca, e nao contorno. SEM RELEVO, de proposito.

   Os itens eram background: none sobre o painel, ou seja, so um retangulo de
   linha fina. Liam como campo desenhado, nao como coisa que se toca.

   O relevo do sistema de botoes NAO entra aqui: a regra "plano = cromo =
   header e formulario" classifica navegacao de cabecalho como cromo, e o
   drawer e o menu do cabecalho. Abrir excecao trocaria o vocabulario do site
   para resolver um problema de presenca, que tem solucao mais barata.

   A presenca vem do par fundo + borda, e cada um trabalha num modo:

     fundo --bg-card sobre o painel --bg-surface
       claro   +10,55 pp   e o que da o volume
       escuro   +0,43 pp   nao faz nada (regra do quase-preto)

     borda --border-bright contra o card
       escuro   2,37:1     e o que delimita a peca
       claro    2,74:1     reforca o degrau de fundo

   No escuro a peca existe pela aresta, no claro pelo preenchimento. Mesma
   assimetria do poco e do campo de formulario — nao e excecao, e o padrao.

   O submenu volta para --bg-surface: com o item virando card, ele precisava
   de outro tom, e o tom do painel o coloca ABAIXO do item, que e a leitura
   certa para lista aninhada. Texto conferido nos dois modos, 4,72 e 5,18. */
.mobile-nav-item,
.mobile-nav-toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; box-sizing: border-box;
  background: var(--bg-card);
  border: 1px solid var(--border-bright);
  border-radius: var(--raio-controle);
  cursor: pointer; padding: 12px 16px;
  font-family: var(--font-hud); font-weight: 600; font-size: var(--t-mini);
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--text-secondary); text-decoration: none;
  transition: all .2s;
}
/* Estes dois nao abrem submenu: a borda inteira fica, o raio tambem. */
.mobile-nav-item:hover { color: var(--purple-bright); border-color: var(--purple-mid); }
/* Aberto, o botao e a bandeja viram uma peca so: o raio de baixo do botao
   some para o encaixe nao mostrar duas curvas coladas. */
.mobile-nav-section.open .mobile-nav-toggle { border-radius: var(--raio-controle) var(--raio-controle) 0 0; }
.mobile-nav-section.open .mobile-nav-sub { border-radius: 0 0 var(--raio-controle) var(--raio-controle); }
.mobile-nav-toggle:hover { color: var(--purple-bright); border-color: var(--border-bright); background: color-mix(in srgb, var(--lavagem) 6%, transparent); }
.mobile-nav-toggle-arrow { font-size: var(--t-mini); transition: transform .2s; opacity: 0.5; }
.mobile-nav-section.open .mobile-nav-toggle { color: var(--purple-bright); border-color: var(--purple-mid); background: color-mix(in srgb, var(--lavagem) 8%, transparent); }
.mobile-nav-section.open .mobile-nav-toggle-arrow { transform: rotate(180deg); opacity: 1; }
/* Era rgba(0,0,0,0.25), um dos ultimos valores chumbados, e ele falhava nos
   dois modos pelo mesmo motivo de sempre — preto nao e neutro entre paletas:

     escuro  #161617 -> #101011   -0,29 pp   nao faz nada
     claro   #dfdbd3 -> #a7a49e  -33,82 pp   vira o bloco cinza

   No claro isso derrubava o texto do submenu para 2,62:1, ilegivel de fato,
   e nem trocar --text-muted por --text-secondary salvava (3,82): o problema
   era o fundo.

   A saida nao precisa de token novo. O site inteiro ja segue uma invariante:
   o card e mais claro que a superficie em QUALQUER modo. O submenu vira card
   sobre o painel do drawer e herda isso de graca — +0,42 pp no escuro,
   +10,5 pp no claro — e o texto sobe para 4,83 e 5,37. */
.mobile-nav-sub { display: none; background: var(--bg-surface); border: 1px solid var(--border-bright); border-top: none; }
.mobile-nav-section.open .mobile-nav-sub { display: block; }
.mobile-nav-sub-item { display: flex; align-items: center; gap: 8px; padding: 10px 22px; font-family: var(--font-hud); font-size: var(--t-mini); letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid color-mix(in srgb, var(--border) 30%, transparent); transition: all .15s; }
.mobile-nav-sub-item:last-child { border-bottom: none; }
.mobile-nav-sub-item::before { content: '›'; color: var(--text-muted); font-size: var(--t-rotulo); line-height: 1; }
.mobile-nav-sub-item:hover { color: var(--purple-bright); background: color-mix(in srgb, var(--lavagem) 8%, transparent); padding-left: 26px; }

/* A CAIXA DE BUSCA E UM CAMPO, NAO UM ORNAMENTO.
   O fundo era rgba(255,255,255,0.04), quase transparente. Funcionava
   enquanto o menu ficava solto sobre a pagina: sobrava contraste com o
   fundo escuro atras. Com o painel embaixo, ela sumiu — restava so a borda.
   Agora usa --bg-campo, o mesmo token do formulario de contato: no escuro
   e um poco mais fundo que a superficie, no claro e quase branco. Em
   interface clara campo escuro le como desabilitado; campo disponivel e
   claro com borda. */
.header-search {
  display: flex;
  align-items: center;
  background: var(--bg-campo);
  border: 1px solid var(--border-campo);
  border-radius: var(--raio-controle);
  height: 36px;
  padding: 0 12px;
  /* O POCO SE LE PELA QUINA, NAO PELA FACE.
     No escuro o campo fica a 1,06 de contraste do painel: nao ha para onde
     escurecer, entao a diferenca de preenchimento nao produz nada. Sombra
     no topo e fio de luz na aresta de baixo desenham a cavidade
     independente do fundo — mesmo principio do item de menu ativo. */
  box-shadow:
    inset 0 2px 3px color-mix(in srgb, #000 45%, transparent),
    inset 0 -1px 0 color-mix(in srgb, #fff 10%, transparent);
  transition: border-color .2s, box-shadow .2s;
}
.header-search:focus-within {
  border-color: var(--purple-mid);
  /* o poco continua existindo no foco; o brilho e somado, nao substituido */
  box-shadow:
    inset 0 2px 3px color-mix(in srgb, #000 45%, transparent),
    inset 0 -1px 0 color-mix(in srgb, #fff 10%, transparent),
    0 0 12px color-mix(in srgb, var(--purple-mid) 30%, transparent);
}
.header-search input { background: none; border: none; outline: none; color: var(--text-primary); font-family: var(--font-body); font-size: var(--t-rotulo); width: 160px; }
.header-search input::placeholder { color: var(--text-muted); }
.search-btn { background: none; border: none; cursor: pointer; color: var(--text-secondary); padding: 0 0 0 8px; font-size: var(--t-rotulo); transition: color .2s; }
.search-btn:hover { color: var(--purple-bright); }

/* ══════════════════════════════════════════════════════════════════════
   INTERRUPTOR DO APARELHO

   Não um ícone de sol e lua: um slider físico, no molde do ON/OFF do Game
   Boy. A leitura fica óbvia sem rótulo, porque não se troca um tema, se
   liga o outro aparelho. As ranhuras do botão saem de um gradiente
   repetido, que é o que o plástico do DMG tem de verdade.
   ══════════════════════════════════════════════════════════════════════ */
.tema-switch {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  flex-shrink: 0;
  line-height: 0;
}
.tema-switch-trilho {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 56px;
  height: 24px;
  padding: 0 5px;
  border: 1px solid var(--border-bright);
  border-radius: var(--raio-mini);
  /* O TRILHO E UM REBAIXO DE VERDADE.
     Antes a sombra era --bg-base misturado com transparent. No modo escuro
     --bg-base E o fundo da pagina: a sombra do rebaixo era feita da mesma
     cor que estava atras dela, entao nao produzia rebaixo nenhum.
     Agora usa --bg-campo, o token de poco, e a cavidade e desenhada pela
     quina: parede escura em cima, fio de luz na aresta de baixo. */
  background: var(--gb-trilho);
  box-shadow:
    inset 0 2px 3px color-mix(in srgb, #000 50%, transparent),
    inset 0 -1px 0 color-mix(in srgb, #fff 12%, transparent);
}
.tema-switch-trilho svg {
  width: 12px;
  height: 12px;
  color: var(--text-muted);
  transition: color .25s ease;
  position: relative;
  z-index: 1;
}
.tema-switch-botao {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 22px;
  height: 18px;
  border-radius: var(--raio-mini);
  /* CADA RANHURA TEM DUAS FACES.
     Antes era uma linha escura a cada 3px, e linha unica o olho le como
     listra, nao como relevo. Ranhura de verdade tem uma face que pega luz e
     outra que faz sombra — por isso cada sulco aqui e um par: escuro
     seguido de claro.
     Por baixo, o gradiente vertical da a forma do plastico moldado: luz em
     cima, face no meio, aresta escura embaixo. */
  background:
    repeating-linear-gradient(90deg,
      color-mix(in srgb, #000 30%, var(--gb-knob)) 0 1px,
      color-mix(in srgb, #fff 34%, var(--gb-knob)) 1px 2px,
      transparent 2px 4px),
    linear-gradient(180deg,
      color-mix(in srgb, #fff 26%, var(--gb-knob)) 0%,
      var(--gb-knob) 46%,
      color-mix(in srgb, #000 24%, var(--gb-knob)) 100%);
  /* a sombra propria e o que coloca a peca ACIMA do trilho, em vez de
     desenhada dentro dele */
  box-shadow:
    0 1px 2px color-mix(in srgb, #000 55%, transparent),
    inset 0 -1px 0 color-mix(in srgb, #000 28%, transparent);
  transition: transform .22s cubic-bezier(.4,.1,.3,1);
  z-index: 2;
}
.tema-switch[aria-checked="true"] .tema-switch-botao { transform: translateX(28px); }
/* o ícone do aparelho ativo acende */
.tema-switch[aria-checked="false"] .tema-switch-trilho svg:first-of-type,
.tema-switch[aria-checked="true"]  .tema-switch-trilho svg:last-of-type { color: var(--purple-bright); }
.tema-switch:hover .tema-switch-trilho { border-color: var(--purple-mid); }
.tema-switch:focus-visible { outline: 2px solid var(--purple-bright); outline-offset: 3px; }

/* TRANSIÇÃO: desligamento de tubo.
   A tela apaga, uma linha horizontal colapsa no centro, e o outro aparelho
   liga. O tema troca escondido atrás da tela apagada, então as duas paletas
   nunca aparecem juntas. Só transform e opacity, que rodam na GPU. */
.tema-transicao {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background: #000;
  opacity: 0;
  visibility: hidden;
}
.tema-transicao::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  margin-top: -1px;
  background: #fff;
  transform: scaleX(0);
  opacity: 0;
}
.tema-transicao.desligando {
  visibility: visible;
  opacity: 1;
  transition: opacity .12s ease;
}
.tema-transicao.desligando::after {
  animation: tubo-desliga .22s ease-in forwards;
}
.tema-transicao.ligando {
  visibility: visible;
  opacity: 0;
  transition: opacity .26s ease .06s;
}
.tema-transicao.ligando::after {
  animation: tubo-liga .26s ease-out forwards;
}
@keyframes tubo-desliga {
  0%   { transform: scaleX(1); opacity: .9; }
  100% { transform: scaleX(0); opacity: 1; }
}
@keyframes tubo-liga {
  0%   { transform: scaleX(0); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  /* o JS já pula a animação; isto é a rede de segurança */
  .tema-switch-botao { transition: none; }
  .tema-transicao,
  .tema-transicao::after { animation: none !important; transition: none !important; }
}

@media (max-width: 680px) {
  .tema-switch-trilho { width: 48px; height: 22px; }
  .tema-switch-botao { width: 18px; height: 16px; }
  .tema-switch[aria-checked="true"] .tema-switch-botao { transform: translateX(24px); }
}

.menu-toggle { display: none; border: 1px solid var(--border); border-radius: var(--raio-controle); padding: 8px 10px; cursor: pointer; font-family: var(--font-hud); font-size: var(--t-titulo); line-height: 1; }

/* minmax(0, 1fr) na coluna de conteudo, e nao "1fr" puro.
   "1fr" e atalho de minmax(auto, 1fr), e "auto" nunca encolhe abaixo do
   min-content do que a coluna carrega. Resultado: qualquer coisa larga
   demais la dentro — uma fileira de tags nowrap, um titulo sem espacos,
   uma tabela dentro de um post — empurrava a coluna e jogava a sidebar
   para fora da tela, em vez de ser contida.
   Esta linha e a rede de seguranca da pagina inteira: com ela, excesso de
   largura vira problema local do componente, nunca do layout. */
.site-wrapper {
  max-width: var(--largura-pagina);
  margin: 0 auto;
  padding: 32px 20px;
  display: grid;
  /* SIDEBAR ELASTICA, de 300 a 420px.
     Era 200px fixos, estreito demais para o widget carregar qualquer layout
     — so cabia uma fileira de miniatura de 52px com duas linhas de texto.

     Os numeros vieram da conta, nao do gosto. Alargar a sidebar sem alargar
     a pagina custa caro: a 1280 de largura total, uma sidebar de 442 derruba
     o card do feed de 494 para 373px, e abaixo de ~430 o cartucho perde o
     titulo em duas linhas. Alargando a pagina para 1520 a sidebar cabe sem
     tocar no card: 420 de sidebar, 493 de card, contra 494 hoje.

     O clamp existe porque 1520 e teto, nao piso: em notebook de 1366 a
     sidebar recua para 355 e o card fica em 459. A 1280, 333 e 428. So
     abaixo de 1100 a coisa aperta, e ali a sidebar ja empilha.

     O piso subiu de 300 para 320 por causa do anuncio. O bloco da sidebar e
     300x250 com largura cravada, e o container dele nao tem recuo nenhum:
     numa coluna de 300px o encaixe dava exatamente zero de folga, entao
     qualquer 1px — barra de rolagem dentro do iframe, arredondamento de
     subpixel — empurrava a peca para fora. Com 320 sobram 20px, e ela
     centraliza. O piso so vale entre 1024 e 1154px de viewport, onde 26vw
     ainda nao alcancou 320; abaixo de 1024 a sidebar empilha. O custo e 20px
     a menos na coluna de conteudo nessa faixa estreita.

     De quebra os ladrilhos do widget Topicos sobem de 64 para 69px. */
  grid-template-columns: minmax(0, 1fr) clamp(320px, 26vw, 420px);
  gap: 32px;
  position: relative;
  z-index: 1;
}
#main-content { min-width: 0; }

.section-header { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
/* RÓTULO DE SEÇÃO — braço do direcional do PS1.
   Os dois cantos externos cortados em diagonal formam a ponta romba. Ela
   aponta para a linha que segue à direita, entao empurra o olho na direcao
   da leitura. Os .hud-dots a esquerda passam a ler como o lado oposto da
   peca, e o rotulo inteiro vira um eixo horizontal.

   O RELEVO VEM DE GRADIENTE, NAO DE SOMBRA. clip-path corta box-shadow e
   come a borda, mesmo problema que resolvemos nos cards com casca dupla.
   Aqui a peca e preenchida, entao o volume cabe dentro do proprio
   preenchimento: faixa de luz em cima, face no meio, aresta viva embaixo.

   A luz fica em 14% de branco. A 18% o texto branco cai para 4,66 sobre a
   faixa clara, no limite; 14% deixa 5,12 de folga e ainda le como plastico.

   O padding da direita soma o corte: sem isso a ponta invade a ultima letra
   em titulo longo como "Calendário de Eventos". */
.section-label {
  --corte: 15px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  line-height: 1;
  padding: 0 calc(12px + var(--corte)) 0 12px;
  border: none;
  /* --peca e a face. Por padrao e o roxo da marca; quando o rotulo carrega
     um genero (.g-fgc e afins), vira a cor do genero escurecida em 55%.
     O escurecimento e necessario porque as cores de topico foram calibradas
     para serem TEXTO sobre o card, nao preenchimento: cruas, o verde do RPG
     e o dourado do Gacha nao seguram texto branco. Escurecer preserva a
     matiz (desvio medido de 1 grau) e so baixa a luz, entao o genero
     continua reconhecivel. */
  background: linear-gradient(180deg,
    color-mix(in srgb, #fff 14%, var(--peca)) 0%,
    color-mix(in srgb, #fff 14%, var(--peca)) 38%,
    var(--peca) 38%,
    var(--peca) 84%,
    color-mix(in srgb, #000 38%, var(--peca)) 84%);
  clip-path: polygon(0 0, calc(100% - var(--corte)) 0, 100% 50%, calc(100% - var(--corte)) 100%, 0 100%);
  color: var(--text-on-brand);
  font-family: var(--font-hud);
  font-weight: 700;
  font-size: var(--t-rotulo);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  white-space: nowrap;
  box-sizing: border-box;
}
.section-line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--border-bright), transparent); }

/* Masonry de posts — column-count (sem linhas fixas, sem espaços vazios) */
/* O destaque saiu. O primeiro post era um card de duas colunas com a imagem
   em proporcao fixa mandando na altura; o texto ao lado nunca tinha conteudo
   para acompanhar e sobrava um vao de ~111px. Ver a razao no index.php.
   As 16 regras .post-card.post-featured foram removidas daqui. */
.posts-masonry {
  column-count: 2;
  column-gap: 20px;
  margin-bottom: 4px;
}
.posts-masonry > .post-card {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: 20px;
}

/* ══════════════════════════════════════════════════════════════════════
   CARD EM FORMA DE CARTUCHO

   Antes o recorte vivia em duas camadas de clip-path, uma pintada na cor da
   borda para simular contorno, porque clip-path nao aceita border. Isso
   custava caro: clip-path corta box-shadow, e foi ele que comeu a sombra
   das pastilhas de tag. Toda peca dentro do card tinha que carregar o
   relevo por dentro, com inset.

   Depois disso a silhueta passou a ser DUAS PECAS IRMAS — a faixa da data e
   a carcaca — e o degrau nascia da diferenca de largura entre elas.

   ERRATA: a faixa saiu. A data foi para dentro da carcaca, centralizada
   entre as duas listras do DMG, e o card virou uma caixa so com raio nos
   quatro cantos. O degrau chanfrado descrito abaixo nao existe mais; ele
   volta como pendencia, nao como esquecimento — ver o bloco do .post-topo.

   O degrau e o canto chanfrado do cartucho de Game Boy, o que impede enfiar
   a peca ao contrario. A faixa chegou a ter 90% fixos, imitando a proporcao
   do objeto, mas ali a largura e preenchida pela gravacao "Nintendo GAME
   BOY"; aqui so ha uma data, e o resto ficava vazio. Largura pelo conteudo
   resolve os dois: a data cabe e o degrau existe.

   Com border-radius no lugar do clip-path, border volta a funcionar,
   box-shadow deixa de ser cortado, e o drop-shadow do hover passa a seguir
   a silhueta das duas pecas somadas.
   ══════════════════════════════════════════════════════════════════════ */
.post-card {
  --aba: 30px;
  --raio: var(--raio-cartucho);
  /* A FORMULA DE ANINHAMENTO DEIXOU DE VALER AQUI, e isso e conclusao, nao
     esquecimento. Ela era: interno = externo - folga - borda, e a folga do
     poco e --mg-cart mais a borda de 1px, ou seja 11px. Com o externo em 16
     dava 5 e fazia sentido, porque o poco ainda acompanhava a curva do card.

     Com o externo em 8 a conta da -3, que o max() achata em zero. Numero
     negativo nao e caso de borda a proteger: e o aviso de que a folga passou
     a ser MAIOR que o raio, e nessa situacao o filho ja se soltou da quina.
     Quem decide passa a ser a faixa de tamanho dele — mesma conclusao que
     ja apareceu no botao ler mais, nos ladrilhos de Topicos e na miniatura
     da sidebar. O poco pega --raio-mini direto, ver .post-thumb.

     Por isso --raio-interno some daqui: mantido, ele seria uma variavel que
     resolve para zero em todo cenario, e o proximo leitor tentaria consertar
     o valor em vez de entender que a regra mudou. */
  /* A margem de plastico em volta dos pocos. E ela que faz o card parecer
     uma peca moldada e nao uma caixa: sem folga, poco e carcaca viram a
     mesma coisa e o degrau nao tem onde existir.
     Desceu de 14 para 10 junto com o raio do painel, que foi de 20 para 16.
     As duas coisas andam amarradas: interno = externo - folga, entao baixar
     so o raio zeraria o poco. Com 16 e 10 o poco segue em 6. */
  --mg-cart: 10px;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform .3s ease, filter .3s ease;
}
/* A FAIXA. Carrega a data, que e a unica peca de plastico do cartucho real
   a ganhar funcao aqui: no objeto ela traz "Nintendo GAME BOY" gravado.
   border-bottom: none e a margem negativa costuram a faixa na carcaca —
   sem isso apareceria uma linha atravessando o card na altura do degrau. */
/* ══════════════════════════════════════════════════════════════════════
   SILHUETA DE CARTUCHO — UM CONTORNO SO.

   O degrau ja foi feito de duas maneiras antes, e as duas tinham limite:

     clip-path: polygon()  — so faz quina viva. Nao arredonda canto nenhum e
       ainda come a borda, porque clip-path nao aceita border.
     duas pecas irmas      — arredonda o que e CONVEXO, mas a junta de baixo
       e CONCAVA, e border-radius nao faz canto concavo. Remendar aquele
       ponto com um terceiro elemento deixava emenda visivel.

   shape() descreve o caminho inteiro com arcos e aceita %, entao a silhueta
   sai de uma peca so. O SENTIDO DE CADA ARCO E O QUE IMPORTA, e foi o que
   eu errei varias vezes: quina externa e a dobra de cima do degrau sao
   CONVEXAS (cw); a junta de baixo e CONCAVA (ccw, o padrao). Usar o mesmo
   sentido nos dois produz um caroco saltando para dentro do vao.

   Verificado ponto a ponto com document.elementFromPoint, nao no olho:

     dobra de cima (convexa)        junta de baixo (concava)
       0|#####.......                -8|#################...
       2|###########.                -5|###################.
       5|##############              -3|#####################
       8|################            -1|########################

   A BORDA VEM DE DUAS CAMADAS. clip-path corta border, entao o .post-card
   e pintado na cor da borda e o .post-card-inner por cima, recuado 1px, na
   cor da carcaca — os dois com a mesma forma. O contorno acompanha a
   silhueta inteira, inclusive a curva concava, sem emenda.
   ══════════════════════════════════════════════════════════════════════ */
.post-card {
  --curva: 8px;
  /* 120px e nao 78%. A aba era larga porque carregava as listras; sem elas
     ela levava so a data e sobravam 269px de plataforma vazia num card de
     493px. Em px e nao em %, porque o que ela precisa vestir e a data, que
     tem largura fixa — em porcentagem o vazio voltava a crescer com o card. */
  --aba-w: 120px;
  background: var(--border);
  clip-path: shape(from 0 var(--raio),
    arc to var(--raio) 0 of var(--raio) cw,
    line to calc(var(--aba-w) - var(--curva)) 0,
    arc to var(--aba-w) var(--curva) of var(--curva) cw,
    line to var(--aba-w) calc(var(--aba) - var(--curva)),
    arc to calc(var(--aba-w) + var(--curva)) var(--aba) of var(--curva),
    line to calc(100% - var(--raio)) var(--aba),
    arc to 100% calc(var(--aba) + var(--raio)) of var(--raio) cw,
    line to 100% calc(100% - var(--raio)),
    arc to calc(100% - var(--raio)) 100% of var(--raio) cw,
    line to var(--raio) 100%,
    arc to 0 calc(100% - var(--raio)) of var(--raio) cw,
    close);
  padding: 1px;
  box-sizing: border-box;
}
.post-card-inner {
  background: var(--bg-card);
  border: none;
  border-radius: 0;
  clip-path: shape(from 0 var(--raio),
    arc to var(--raio) 0 of var(--raio) cw,
    line to calc(var(--aba-w) - var(--curva)) 0,
    arc to var(--aba-w) var(--curva) of var(--curva) cw,
    line to var(--aba-w) calc(var(--aba) - var(--curva)),
    arc to calc(var(--aba-w) + var(--curva)) var(--aba) of var(--curva),
    line to calc(100% - var(--raio)) var(--aba),
    arc to 100% calc(var(--aba) + var(--raio)) of var(--raio) cw,
    line to 100% calc(100% - var(--raio)),
    arc to calc(100% - var(--raio)) 100% of var(--raio) cw,
    line to var(--raio) 100%,
    arc to 0 calc(100% - var(--raio)) of var(--raio) cw,
    close);
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 100%;
  position: relative;
  transition: background-color .3s ease;
}
.post-card:hover { background: var(--border-bright); }
.post-card:hover .post-card-inner { background: var(--bg-card-hover); }

/* A faixa ocupa a altura do degrau e carrega o selo entre as listras. */
.post-topo {
  display: flex;
  align-items: center;
  height: calc(var(--aba) - 1px);
  padding: 0 12px;
  box-sizing: border-box;
  flex-shrink: 0;
}
/* As listras sairam. Elas vieram da referencia e tinham funcao la, onde
   abracavam um selo elastico; aqui o selo veste a data e elas viravam
   preenchimento de vao. Ornamento que so ocupa espaco pesa contra a peca. */
/* A CAPSULA SAIU. A data ficava numa pastilha com fundo e borda proprios —
   uma peca dentro da peca, para carregar cinco numeros. Sem ela a data e o
   que sempre foi: um rotulo sobre o plastico da aba, na tipografia do HUD,
   com o losango roxo que o .post-date ja traz. */

/* FALLBACK. Navegador sem shape() ignora o clip-path e mostraria um
   retangulo com a faixa dentro — sem degrau, mas inteiro e legivel. Aqui a
   carcaca so recupera a borda e o raio, para nao ficar sem contorno. */
@supports not (clip-path: shape(from 0 0, line to 1px 1px)) {
  .post-card { background: none; padding: 0; }
  .post-card-inner { border: 1px solid var(--border); border-radius: var(--raio); }
  .post-card:hover .post-card-inner { border-color: var(--border-bright); }
}

/* Reflexo BRANCO, nao roxo. Luz refletida em plastico ou vidro nao assume a
   cor da marca, e este brilho cobre a area inteira de cada card do feed —
   multiplicado por doze cards era a maior superficie roxa da home. */
.post-card-inner::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(135deg, rgba(255,255,255,.035), transparent 60%); pointer-events: none; z-index: 2; }
/* drop-shadow e nao box-shadow porque a silhueta sao DUAS pecas: o
   drop-shadow segue o contorno somado das duas, o box-shadow desenharia um
   retangulo por peca e apareceria a costura entre elas. */
.post-card:hover { transform: translateY(-3px); filter: drop-shadow(0 6px 18px rgba(0,0,0,0.45)) drop-shadow(0 0 14px color-mix(in srgb, var(--purple-mid) 18%, transparent)); }



/* ── OS DOIS POCOS ──────────────────────────────────────────────────────
   O poco da imagem e o do texto tem o MESMO tom da carcaca. Nao e economia
   de token, e a unica solucao que cabe: medido, um terceiro nivel de tom
   nao existe no escuro. Escurecendo, o poco fica a 1,03 da carcaca, ou
   seja, nada — e a regra do quase-preto de sempre. E no claro escurecer
   aproxima o poco da PAGINA (1,08), e a carcaca vira um anel boiando entre
   duas superficies iguais.

   Entao o degrau se le pela QUINA, como no objeto real: no cartucho o
   plastico do poco e da mesma cor da carcaca, e o que voce enxerga e a
   sombra do rebaixo. Sombra em cima, fio de luz embaixo, contorno fechando.
   Custo em orcamento de contraste: zero.

   3/2 em vez de 16/9 porque e a proporcao do rotulo (medida: 1 : 0,87 no
   cartucho, 1 : 0,67 aqui, mais perto do que os 1 : 0,56 do 16/9).
   object-fit: cover faz as imagens ja publicadas RECORTAREM em vez de
   esticar, entao regenerar miniaturas e desejavel mas nao bloqueante. */
.post-thumb {
  /* --raio-mini e nao --raio-interno: com o cartucho em 8px e a folga em
     11px, a conta de aninhamento resolveria para zero. O poco esta solto da
     quina, entao vale a faixa dele. 4px tambem e o que a referencia usa na
     imagem (3,2px), arredondado para a escala. */
  border-radius: var(--raio-mini);
  box-shadow:
    inset 0 2px 3px color-mix(in srgb, #000 var(--poco-sombra), transparent),
    inset 0 0 0 1px color-mix(in srgb, #000 var(--poco-contorno), transparent),
    inset 0 -1px 0 color-mix(in srgb, #fff var(--poco-luz), transparent);
}
.post-thumb { position: relative; aspect-ratio: 3/2; overflow: hidden; background: var(--bg-surface); margin: var(--mg-cart) var(--mg-cart) 0; }
/* Sem escurecimento global: o brightness(.85) existia para segurar o selo
   branco sobre qualquer foto. Sem selo, ele so roubava cor da arte do jogo.
   O gradiente de baixo fica: e ele que solda a imagem ao corpo do card. */
.post-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease, filter .3s ease; filter: saturate(1.12); }
/* Poco vazio: o simbolo do portal no lugar da capa que nao existe. Saiu de
   style inline no PHP para ca. */
/* .post-thumb-vazia saiu: o card sem imagem so existia no destaque, que era
   o unico a reservar espaco para a marca quando o post nao tinha capa. */
.post-card:hover .post-thumb img { transform: scale(1.04); filter: saturate(1.25) brightness(1.05); }
.post-thumb-overlay { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(to top, color-mix(in srgb, var(--bg-base) 90%, transparent) 0%, transparent 50%); }

/* TUBO: varredura de CRT, so na imagem.
   Mesma intensidade da camada global antiga (linha a cada 4px, alfa efetivo
   0,063 = 0,35 x 0,18) para o efeito continuar identico ao que ja existia.
   O alfa vem embutido na cor em vez de opacity, para nao criar uma camada
   de composicao a mais. Fica acima da img e do gradiente por ser o ultimo
   elemento empilhado no .post-thumb. */
.post-thumb::after,
.post-full-thumb-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,.063) 2px, rgba(0,0,0,.063) 4px);
}

/* NO CLARO A MESMA CAMADA VIRA MATRIZ DE PONTOS DO LCD.
   A varredura de tubo e horizontal porque o feixe percorre linha a linha.
   O LCD do Game Boy e uma grade: cada pixel e uma celula quadrada com vao
   nos dois eixos. Entao o gradiente ganha o irmao vertical e o passo cai
   de 4px para 3px, que e a proporcao de pixel gordo do DMG.

   Repare que os dois modos escurecem, e nao e coincidencia: tanto a linha
   de varredura quanto o vao entre celulas sao ausencia de luz. E a unica
   camada do tema que funciona nos dois fundos sem inverter. */
html[data-tema="claro"] .post-thumb::after,
html[data-tema="claro"] .post-full-thumb-wrap::after {
  background:
    repeating-linear-gradient(0deg,  transparent, transparent 2px, rgba(0,0,0,.10) 2px, rgba(0,0,0,.10) 3px),
    repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0,0,0,.10) 2px, rgba(0,0,0,.10) 3px);
}

/* A MOLDURA DA TELA FOI REMOVIDA.
   Ela existia so no modo claro: quadro escuro em volta da miniatura, para
   ela parecer uma tela de LCD acesa. Funcionava numa peca isolada, mas a
   home tem uma duzia de cards e o efeito virava ruido multiplicado — e o
   modo escuro, que nunca teve a moldura, lia melhor.
   A referencia ao aparelho continua: a matriz de pontos do LCD segue sobre
   toda imagem no modo claro, e o verde do fosforo aparece por tras enquanto
   a imagem nao carregou. O que saiu foi o quadro, nao a tela. */
html[data-tema="claro"] .post-thumb img,
html[data-tema="claro"] .post-full-thumb-wrap img {
  background: var(--gb-tela);
}
/* Folga ZERO: a imagem encosta na borda do artigo, entao o raio dela e o
   MESMO do pai, nao um derivado menor — interno = externo - 0. So os cantos
   de cima, porque embaixo ela encontra o corpo do texto. */
/* SEM RAIO NA CAPA. Ela tinha os 16px do painel repetidos nos dois cantos de
   cima, o que arredondava a imagem uma segunda vez: o .post-full ja recorta a
   propria silhueta, entao a curva saia engordada. E a mesma conclusao ja
   registrada no card de evento do calendario — filho que encosta na borda com
   folga ZERO nao ganha raio proprio, quem arredonda e o recorte do pai. Ali
   estava escrito e aqui tinha ficado de fora. */
.post-full-thumb-wrap { position: relative; display: block; overflow: hidden; border-radius: 0; }

/* Titulo e resumo ficam NO PLASTICO, nao num poco.
   Chegaram a ter rebaixo proprio, e com ele o card virava tres retangulos
   empilhados: a peca lia como formulario, nao como cartucho. No objeto real
   ha um rebaixo so, o do rotulo — o resto da carcaca e lisa.
   Sobrou entao um poco para a imagem e a capsula para a data, e o texto
   respira na propria carcaca, alinhado com as tags. */
.post-body { padding: 12px var(--mg-cart) 0; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 9px; position: relative; z-index: 1; }
/* As tags ficam NO PLASTICO, entre os dois pocos — e onde o cartucho traz
   os codigos impressos pequenos. Por isso saem de dentro de .post-body no
   markup: aqui elas nao pertencem a nenhum dos dois rebaixos. */
.post-meta { padding: 11px var(--mg-cart) 0; }
/* O botao do rodape esta na MESMA profundidade do poco da imagem: mesma
   folga ate a quina do card. Entao usa o raio derivado, e nao o token de
   controle — que por acaso batia no desktop (16-10-1=5 contra 6) e errava
   no mobile (12-8-1=3 contra 6). */
/* Aqui vivia: .post-footer .read-more { border-radius: var(--raio-interno) }
   Ou seja, o botao herdava a geometria do CARTUCHO — 16 menos a folga de 10
   menos a borda — e renderizava a 5px dentro do card contra 6px em todo o
   resto do site. Mesmo componente, duas aparencias, e a diferenca vinha de
   um pai com quem ele nem e concentrico.

   A conta de aninhamento vale para filho que ACOMPANHA a curva do pai: a
   miniatura, que atravessa a largura do card com a mesma folga dos dois
   lados. O botao flutua a 10px da quina de um raio de 16 — ja se soltou dela,
   exatamente como os ladrilhos do widget Topicos, onde a folga de 13 contra
   raio 16 me fez escolher a faixa de tamanho em vez da formula. Era a mesma
   situacao decidida dos dois jeitos.

   Sem o override o botao passa a mandar no proprio raio, e para de derivar
   toda vez que alguem mexe em --raio ou --mg-cart do cartucho. */

/* Rodape: so o botao, alinhado a direita, na margem de baixo.
   Os riscos que moravam a esquerda sairam. Eles vinham da linha azul do
   esboco, mas na tela competiam com os tres rebaixos sem acrescentar
   informacao nenhuma — plastico decorado dentro de uma peca que ja tem
   degrau, capsula e dois pocos. A margem vazia faz mais pelo objeto. */
.post-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 12px var(--mg-cart) var(--mg-cart);
  border-top: none;
  margin-top: auto;
}

/* Sem overflow: ele vinha da epoca em que a fila de tags precisava ser
   contida por mascara. Nao ha clip-path aqui, entao so cortava. */
.post-meta { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; padding: 11px var(--mg-cart) 0; min-width: 0; overflow: hidden; }
.post-date { font-family: var(--font-hud); font-size: var(--t-mini); letter-spacing: 1.5px; color: var(--text-secondary); text-transform: uppercase; display: flex; align-items: center; flex-shrink: 0; gap: 4px; }
.post-date::before { content: ''; display: inline-block; width: 4px; height: 4px; background: var(--purple-mid); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }

/* A FILA NAO PODE CORTAR A SOMBRA DA PASTILHA.
   Ao virar peca fisica, a pastilha ganhou box-shadow projetado ABAIXO da
   propria caixa — e a aresta que da o relevo. Com overflow: hidden na fila,
   tudo que passa da caixa e cortado, entao a aresta e o arredondamento de
   baixo eram comidos e a tag aparecia fatiada.

   O overflow existia para esconder estouro horizontal, junto com uma
   mascara de desvanecimento. Como o PHP agora limita a quatro tags, nada
   disso e mais necessario: sem overflow, a sombra respira.

   O min-width: 0 fica, porque e ele que permite ao flex encolher os itens
   em vez de empurrar a fila para fora do card. */
/* A fileira de tags nao corta nem conta: ela ESMAECE na borda direita.
   Havia um limite de 4 tags aqui, posto por mim quando eu achava que o
   relato de "tag cortada" era transbordo horizontal. Nao era: era a sombra
   da pastilha sendo comida pelo clip-path do card, e isso foi resolvido
   passando o relevo para inset. O limite ficou, e limite e pior que fade,
   porque quem escreve o post nao escolhe quais 4 aparecem — o corte e
   arbitrario e silencioso.
   Agora imprime todas e o mascaramento resolve o que nao couber. A tag do
   genero vem primeiro (ordenacao em xtamina_the_tags), entao a que fica
   sempre inteira e a que mais informa.
   O fade cobre os ultimos 34px SEMPRE, mas so aparece quando alguma
   pastilha chega la: em cima de espaco vazio, esmaecer nada nao se ve. */
.post-tags-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent 100%);
          mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent 100%);
}
/* Tag do post: em repouso o texto e neutro e legivel (13:1); a cor entra no
   hover como resposta a interacao, em vez de vermelho sobre vermelho no
   estado parado, que media 4,69:1 e gerou reclamacao de leitor. */
/* TAG DO POST
   Em repouso o texto e neutro e legivel (13:1); a cor entra no hover como
   resposta a interacao, em vez de vermelho sobre vermelho parado, que media
   4,69:1 e gerou reclamacao de leitor.
   A nuvem de categorias da sidebar compartilhava esta regra, mas o widget
   virou lista de generos e usa .genero-item, entao ela saiu daqui. */
.post-tag-pill {
  display: inline-block;
  font-family: var(--font-hud);
  font-size: var(--t-rotulo);
  line-height: 1.4;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}
/* Na linha do card, nenhuma tag pode comer a fila sozinha. "Avatar Legends
   The Fighting Game" tem 31 caracteres e ocupava a linha inteira, escondendo
   as outras. Com teto e reticencias, todas continuam visiveis. */
/* A pastilha engordou ao virar peca fisica: o padding lateral foi de 8px
   para 11px. Com a fila em nowrap e mascara de recorte, isso passou a
   cortar tag no meio. Menos folga por peca devolve o espaco. */
/* Sem max-width nem reticencias: com o fade da fileira, truncar dentro da
   pastilha era o segundo corte em cima do primeiro, e "BANDAI NAM…" le pior
   do que a palavra inteira desaparecendo na borda. A pastilha nao encolhe
   (flex-shrink 0) para o texto nao ser espremido antes de chegar ao fade. */
.post-tags-row .post-tag-pill { padding: 3px 8px; flex-shrink: 0; white-space: nowrap; }

/* Hover e foco da pastilha vem do sistema de botoes. O que existia aqui era
   da epoca da tag com borda: pintava border-color numa peca que nao tem mais
   borda, e um fundo vermelho translucido que brigava com a face cinza. */
/* O hover so LEVANTA a face, sem puxar cor de marca. Tingir de vermelho
   escurecia a pastilha no modo claro e afundava o rotulo azul junto (3,52).
   E conceitualmente: pastilha e rotulo, nao acao — nao deve reivindicar a
   cor que os botoes usam para dizer "isto faz alguma coisa". */
.post-tag-pill:hover { background: color-mix(in srgb, #fff 14%, var(--face)); }

/* 20px e nao 17px: com 17 a razao para o resumo de 14px era 1,21, abaixo
   do ~1,25 em que o olho le outro nivel. A 20px vai para 1,43. */
.post-title { font-family: var(--font-hud); font-weight: 600; font-size: var(--t-titulo); line-height: 1.25; letter-spacing: .5px; color: var(--text-primary); transition: color .2s; }
.post-title a { color: inherit; }
.post-card:hover .post-title a { color: var(--purple-bright); }

.post-excerpt { font-size: var(--t-rotulo); line-height: 1.65; color: var(--text-secondary); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* O rodape antigo, com border-top, foi substituido pelo de riscos la em cima. */

/* O tratamento do .read-more vem do sistema de botoes, mais abaixo.
   O que existia aqui era da epoca anterior: cor e borda roxas, mais um
   ::before que deslizava preenchendo de --purple-mid no hover. Como o
   sistema novo nao redefine ::before, aquele overlay sobrevivia e pintava
   de roxo um botao que agora e vermelho. */
.read-more span { position: relative; z-index: 1; }

/* ── DESTAQUE ───────────────────────────────────────────────────────────
   Mesma gramatica dos cards comuns: faixa horizontal no topo com o degrau a
   direita, e a carcaca embaixo. O que muda e so a arrumacao interna —
   imagem a esquerda, conteudo a direita.

   POR QUE NAO UM CARTUCHO DEITADO DE VERDADE: medido, um cartucho fiel em
   1008px de largura pediria 884px de altura, contra os ~330px de hoje. E
   3,2 vezes. A silhueta nao cabe nessa proporcao, entao o destaque carrega
   o vocabulario (degrau, riscos, pocos, raio) e nao a forma.

   GRID e nao flex-direction: row, porque .post-meta, .post-body e
   .post-footer sao tres irmaos soltos dentro da carcaca. Com grid a imagem
   ocupa a coluna da esquerda inteira e os tres empilham na direita, sem
   precisar de mais uma div envolvendo no PHP. */
/* min-width: 0 em todo filho do grid, pela mesma razao: o padrao e auto e
   qualquer conteudo largo (tag comprida, titulo sem espaco) empurra a
   coluna em vez de ser contido. */
.post-card { cursor: pointer; }

.post-full { background: var(--bg-card); border: 1px solid var(--border); padding: 0; position: relative; overflow: hidden; border-radius: var(--raio-painel); }
.post-full::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--purple-mid), var(--red-mid)); }
.post-full-thumb { width: 100%; max-height: 480px; object-fit: cover; display: block; }
/* ══════════════════════════════════════════════════════════════════════
   MEDIDA DE LINHA — a unica coisa do tema que nunca tinha sido conferida.

   Medido no navegador com a metrica real da Inter a 17px: 10,24px por
   caractere, numa coluna de 847px. Dao 83 caracteres por linha.

   A faixa confortavel de leitura corrida e 45 a 75, com 66 como alvo. Acima
   disso o olho perde o inicio da linha seguinte no retorno, e o texto do post
   e a superficie onde o leitor passa mais tempo no site.

     66 caracteres -> 676px de texto
     75 caracteres -> 768px

   Ficou em 676 mais os 40px de recuo de cada lado = 756px, centralizado. O
   titulo usa a MESMA caixa para nao desalinhar do corpo, e a capa segue
   larga, porque imagem nao tem medida de linha.

   Os 40px viviam em style inline nos dois templates. Sairam de la: limite de
   leitura e decisao de sistema, e em atributo inline nenhuma media query
   alcanca. */
.post-full-texto { max-width: 756px; margin-inline: auto; padding: 0 40px; }
.post-full-texto-topo  { padding-top: 28px; }
.post-full-texto-corpo { padding-bottom: 28px; }
.post-full-title { font-family: var(--font-hud); font-weight: 700; font-size: var(--t-artigo); line-height: 1.2; letter-spacing: .5px; color: var(--text-primary); margin-bottom: 16px; }

/* CORPO DO POST — ritmo vertical
   Escala de espaco: 22px entre paragrafos, 56px acima de h2, 38px acima de h3.
   O espaco ACIMA do subtitulo e sempre maior que o de baixo: o titulo pertence
   ao texto que vem depois dele, nao ao que veio antes. */
.post-full-body { font-size: var(--t-corpo); line-height: 1.75; color: var(--text-secondary); }
.post-full-body > *:first-child { margin-top: 0; }
.post-full-body > *:last-child { margin-bottom: 0; }

.post-full-body h1, .post-full-body h2, .post-full-body h3, .post-full-body h4 { font-family: var(--font-hud); font-weight: 700; color: var(--text-primary); letter-spacing: .5px; line-height: 1.25; }
.post-full-body h2 { font-size: var(--t-secao); margin: 56px 0 18px; border-left: 4px solid var(--purple-mid); padding-left: 14px; }
.post-full-body h3 { font-size: var(--t-titulo); margin: 38px 0 14px; color: var(--purple-bright); }
.post-full-body h4 { font-size: var(--t-corpo); margin: 30px 0 12px; color: var(--text-primary); text-transform: uppercase; letter-spacing: 1.5px; }

.post-full-body p { margin: 0 0 22px; }

/* NEGRITO NO CORPO DO POST
   O peso sozinho nao resolve em fundo escuro: texto claro irradia sobre o
   preto e o traco parece mais grosso do que e, o que comprime a diferenca
   entre 400 e 700. Quem faz o trabalho aqui e a LUMINANCIA. O corpo corre
   em --text-secondary (6,6:1 sobre o card) e o negrito sobe para
   --text-primary (15,2:1). Peso mais cor, os dois juntos. */
.post-full-body strong,
.post-full-body b {
  font-weight: 700;
  color: var(--text-primary);
}
.post-full-body ul, .post-full-body ol { margin: 0 0 22px; padding-left: 26px; }
.post-full-body li { margin-bottom: 10px; }
.post-full-body li:last-child { margin-bottom: 0; }
.post-full-body li > ul, .post-full-body li > ol { margin: 10px 0 0; }

.post-full-body blockquote { border-left: 2px solid var(--border-bright); padding: 18px 24px; background: color-mix(in srgb, var(--purple-mid) 5%, transparent); color: var(--text-secondary); margin: 32px 0; font-style: italic; }
.post-full-body blockquote p:last-child { margin-bottom: 0; }

.post-full-body a { color: var(--red-bright); border-bottom: 1px solid color-mix(in srgb, var(--red-mid) 35%, transparent); transition: color .2s, border-color .2s; }
.post-full-body a:hover { color: var(--red-glow); border-color: var(--red-bright); }

.post-full-body img { border: 1px solid var(--border); width: 100%; height: auto; display: block; }
.post-full-body figure { margin: 32px 0; }
.post-full-body figcaption { font-family: var(--font-hud); font-size: var(--t-mini); letter-spacing: 1px; color: var(--text-muted); margin-top: 8px; text-transform: uppercase; }
.post-full-body iframe { display: block; margin: 8px 0 32px; max-width: 100%; }
.post-full-body hr { border: none; border-top: 1px solid var(--border); margin: 44px 0; }

/* Um <br> solto entre blocos nao gera respiro nenhum: quem faz o ritmo
   sao as margens acima. Neutraliza para nao criar buraco irregular. */
.post-full-body > br { display: none; }

/* EMOJI (Twemoji do WordPress)
   O core troca o caractere por <img class="emoji"> com 1em de lado e
   vertical-align -0.1em, tudo !important. 1em e grande demais: a Rajdhani
   tem caixa alta de 0.65em e a Inter de 0.73em, entao o emoji fica ~60%
   maior que as maiusculas e com o centro optico acima da linha do texto.
   Os valores abaixo alinham o centro do emoji ao centro da caixa alta.
   Precisam de !important para vencer o CSS inline do core. */
.post-full-body img.emoji {
  width: .9em !important;
  height: .9em !important;
  vertical-align: -.085em !important;
  margin: 0 .08em 0 0 !important;
}
.post-full-body h1 img.emoji,
.post-full-body h2 img.emoji,
.post-full-body h3 img.emoji,
.post-full-body h4 img.emoji { width: .8em !important; height: .8em !important; }

@media (max-width: 680px) {
  .post-full-body h2 { font-size: var(--t-titulo); margin: 40px 0 14px; }
  .post-full-body h3 { font-size: var(--t-corpo); margin: 30px 0 12px; }
  .post-full-body p, .post-full-body ul, .post-full-body ol { margin-bottom: 20px; }
  /* 40px de cada lado numa tela de 375 deixam 255px de texto, ou seja ~25
     caracteres por linha — o defeito oposto ao de 83 no desktop, e igualmente
     ruim: a linha quebra antes de a frase andar. Isso ja acontecia com o
     padding inline; so ficou visivel quando o recuo virou regra. */
  .post-full-texto { padding-left: 20px; padding-right: 20px; }
}


.post-author-header { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--purple-mid) 4%, transparent); }
.post-author-avatar { width: 40px; height: 40px; flex-shrink: 0; border: 1.5px solid var(--border-bright); box-shadow: 0 0 10px color-mix(in srgb, var(--purple-mid) 30%, transparent); object-fit: cover; }
.post-author-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.post-author-name { font-family: var(--font-hud); font-weight: 700; font-size: var(--t-rotulo); letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-primary); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .2s; }
.post-author-name:hover { color: var(--purple-bright); }
.post-author-date { font-family: var(--font-hud); font-size: var(--t-rotulo); letter-spacing: 1.5px; color: var(--text-secondary); text-transform: uppercase; display: flex; align-items: center; gap: 5px; }
.post-author-date::before { content: ''; display: inline-block; width: 4px; height: 4px; background: var(--red-mid); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); flex-shrink: 0; }
.post-author-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }

.sidebar-post-list { display: flex; flex-direction: column; gap: 0; }
/* CHAMADA DO CALENDARIO NO FIM DO POST
   Alvo: leitor de primeira viagem, que chega por busca ou link direto num post
   e nunca viu a home. Fica antes dos comentarios porque e o pico de atencao:
   a pessoa acabou de ler o texto inteiro. */
.cal-pitch { display: flex; align-items: center; gap: 20px; margin-top: 28px; padding: 24px 28px; background: var(--bg-card); border: 1px solid var(--border-bright); border-left: 3px solid var(--purple-mid); position: relative; overflow: hidden; border-radius: var(--raio-painel); }
.cal-pitch::after { content: ''; position: absolute; top: 0; right: 0; width: 200px; height: 100%; background: radial-gradient(ellipse at right, color-mix(in srgb, var(--purple-mid) 18%, transparent) 0%, transparent 70%); pointer-events: none; }
/* Centralizado no banner, longe das quinas: aninhamento nao se aplica, vale
   a faixa de tamanho (48px = controle). */
.cal-pitch-icon { flex-shrink: 0; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border-bright); background: color-mix(in srgb, var(--purple-mid) 10%, transparent); border-radius: var(--raio-controle); }
.cal-pitch-icon svg { width: 24px; height: 24px; color: var(--purple-bright); stroke-width: 1.5; }
.cal-pitch-text { flex: 1; min-width: 0; }
.cal-pitch-title { font-family: var(--font-hud); font-weight: 700; font-size: var(--t-titulo); letter-spacing: .5px; line-height: 1.3; color: var(--text-primary); margin: 0 0 6px; }
.cal-pitch-desc { font-size: var(--t-rotulo); line-height: 1.6; color: var(--text-secondary); margin: 0; }
.cal-pitch-cta { flex-shrink: 0; position: relative; z-index: 1; font-family: var(--font-hud); font-weight: 600; font-size: var(--t-mini); letter-spacing: 2px; text-transform: uppercase; white-space: nowrap; }
.cal-pitch-cta:focus-visible { outline: 2px solid var(--purple-bright); outline-offset: 2px; }

@media (max-width: 680px) {
  .cal-pitch { flex-direction: column; align-items: flex-start; gap: 14px; padding: 20px; }
  .cal-pitch-title { font-size: var(--t-corpo); }
  .cal-pitch-cta { width: 100%; text-align: center; }
}

/* PROXIMOS EVENTOS NA SIDEBAR
   A coluna tem 200px, entao o bloco de data vira coluna fixa de 38px e o
   resto e o que sobra. O titulo corta em duas linhas com -webkit-line-clamp
   porque nome de evento e longo e sem o corte um item empurraria os outros
   tres para fora da dobra. */
.evento-list { display: flex; flex-direction: column; }
/* O BLOCO DA DATA E UMA TELA, NAO UM FUNDO COLORIDO.
   E o unico lugar do site onde um numero e EXIBIDO em vez de escrito, e e
   isso que um aparelho faz. Entao ele usa a paleta canonica de quatro tons
   do LCD: verde #9bbc0f como campo e #0f380f, o tom mais escuro, como
   pixel. Um LCD de verdade escurece o pixel sobre o campo claro — nunca o
   contrario.

   Por isso a cor do texto e fixa nos dois modos: ela nao pertence ao tema,
   pertence a tela. Trocar --text-primary aqui quebraria a leitura no
   escuro, onde ele e claro.

   A grade de pontos e a mesma das miniaturas, com passo menor: numa peca de
   38px o passo de 3px viraria textura, nao matriz. */
.evento-data {
  position: relative;
  flex-shrink: 0;
  /* 44px e nao 34: com o widget a 420px sobra espaco, e a 34 o bloco ficava
     34x48, ou seja RETRATO — a tela de um Game Boy e quase quadrada. A 44
     fica 44x51, que le como visor. */
  width: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5px 0 4px;
  border-radius: 2px;
  /* Campo sempre no verde cheio. Foi testado deixa-lo apagado em repouso e
     acende-lo no hover: a matriz de pontos achata a diferenca e a mudanca
     nao se le, enquanto o verde dessaturado fica oliva e deixa de parecer
     LCD. Quem sinaliza o hover e o fundo da linha, que ja muda. */
  background: var(--gb-tela);
  /* o vidro fica rebaixado na carcaca: parede escura em cima, luz embaixo,
     e a moldura da carcaca por fora. A moldura existe para o modo claro,
     onde a tela contra o item dava 1,50 e o bloco nao se lia como peca
     separada; com ela vai a 8,97. No escuro a tela ja separa em 7,74 por
     conta propria, e uma moldura escura contra fundo escuro desaparece —
     que e o que ela faz num aparelho de verdade. */
  box-shadow:
    0 0 0 1px var(--gb-moldura),
    inset 0 2px 3px color-mix(in srgb, #0f380f 45%, transparent),
    inset 0 -1px 0 color-mix(in srgb, #fff 30%, transparent);
  overflow: hidden;
  transition: background .18s ease;
}
.evento-data::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg,  transparent 0 1px, color-mix(in srgb, #0f380f 14%, transparent) 1px 2px),
    repeating-linear-gradient(90deg, transparent 0 1px, color-mix(in srgb, #0f380f 14%, transparent) 1px 2px);
}
.evento-dia {
  position: relative;
  z-index: 1;
  font-family: var(--font-hud);
  font-weight: 700;
  /* 26px e nao 17: o dia e a informacao que o leitor procura primeiro nessa
     fileira, e a 17 ele nao era maior que o titulo do evento ao lado. Dois
     digitos a 26px ocupam ~29px dos 36px uteis da tela. */
  font-size: var(--t-secao);
  line-height: 1;
  color: #0f380f;
}
.evento-mes {
  position: relative;
  z-index: 1;
  font-family: var(--font-hud);
  font-weight: 600;
  font-size: var(--t-meta);
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
  /* Mesmo tom do dia. A 78% ele media 3,96 sobre o verde e reprovava — e um
     LCD tem quatro tons, nao meio-tom. A hierarquia entre dia e mes vem de
     tamanho e peso, que e como o aparelho tambem resolve. */
  color: #0f380f;
  margin-top: 3px;
}
/* A tela acende quando o leitor aponta para o evento. */
.evento-item:hover .evento-data {
  background: color-mix(in srgb, #fff 16%, var(--gb-tela));
}

/* O item vira um encaixe no painel: mesma superficie do menu, com a tela
   embutida. Sem isso a tela flutua sobre o card e perde o parentesco. */
.evento-item {
  display: flex;
  gap: 10px;
  padding: 10px;
  text-decoration: none;
  background: color-mix(in srgb, var(--bg-painel) 45%, var(--bg-card));
  border-bottom: 1px solid var(--border);
  transition: background-color .2s ease;
}
.evento-item:last-child { border-bottom: none; }
.evento-item:hover { background: color-mix(in srgb, var(--lavagem) 10%, transparent); }
.evento-item:focus-visible { outline: 2px solid var(--purple-bright); outline-offset: -2px; }


.evento-info { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
/* 13px, IGUAL AO .sidebar-post-title.
   Os dois sao a mesma peca com nomes diferentes: o titulo de um item de
   lista na coluna estreita. Estavam a 1px de distancia — 13 no Populares,
   12 aqui — e 1px nao e hierarquia, e descuido. O olho nao classifica como
   "menos importante", classifica como desalinhado.

   Havia um agravante que so aparece dentro do widget: a 12px o titulo
   ficava a UM pixel da meta abaixo dele, que e 11. Titulo e apoio no mesmo
   corpo, e a linha inteira vira um bloco cinza sem ordem de leitura.
   A 13 a razao para a meta vai a 1,18 — ainda discreta, mas ja le como
   dois niveis.

   Isso tambem alinha os dois na escala: em qualquer redimensionamento
   futuro eles sobem juntos, em vez de abrir mais distancia. */
.evento-titulo {
  font-size: var(--t-rotulo);
  line-height: 1.35;
  color: var(--text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.evento-item:hover .evento-titulo { color: var(--purple-glow); }
/* A DATA FICA COM A LINHA INTEIRA.
   O selo encostado nela roubava espaco de um texto que pode ser
   "19/09 – 20/09". Empurrado para a direita com margin-left: auto, a data
   respira e o selo ganha uma posicao fixa — o olho passa a saber onde
   procurar por "isto e online" sem varrer a linha.
   nowrap porque com o selo na ponta nao ha mais motivo para quebrar: se
   faltar espaco, quem cede e o selo, nao a data. */
.evento-meta { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.evento-meta time { flex-shrink: 0; }
.evento-badge { margin-left: auto; flex-shrink: 0; }
.evento-meta time {
  font-family: var(--font-hud);
  font-size: var(--t-meta);
  letter-spacing: 1px;
  color: var(--text-muted);
}

/* ══════════════════════════════════════════════════════════════════════
   SELO DE EVENTO ONLINE — o LED de bateria

   O DMG tem um LED vermelho ao lado da tela, aceso enquanto o aparelho
   funciona, com "BATTERY" impresso embaixo. Ponto vermelho tambem e a
   convencao universal de AO VIVO — gravando, no ar. Para um evento online
   os dois significados apontam para a mesma coisa.

   Tecnicamente tambem melhora: caixa com borda e peso visual num lugar
   apertado, e o selo disputava atencao com o titulo do evento. Ponto mais
   palavra pesa menos e diz mais.

   O ponto e um LED, entao acende de dentro: nucleo claro deslocado para
   cima e para a esquerda, caindo para a cor cheia na borda. O mesmo
   principio do domo dos botoes A e B, em 7px.

   O brilho so aparece no hover, como o Matheus pediu — LED sempre pulsando
   numa lista de doze eventos vira arvore de natal. */
.evento-badge,
.cal-event-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: none;
  background: none;
  padding: 0;
  font-family: var(--font-hud);
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.evento-badge::before,
.cal-event-card-badge::before {
  content: '';
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%,
      color-mix(in srgb, #fff 55%, var(--red-bright)) 0%,
      var(--red-bright) 62%,
      color-mix(in srgb, #000 22%, var(--red-bright)) 100%);
  transition: box-shadow .22s ease;
}
.evento-badge { font-size: var(--t-selo); }
.cal-event-card-badge { font-size: var(--t-meta); align-self: flex-start; margin-top: 2px; }

/* O brilho e do LED, entao acompanha o card inteiro no hover, nao so o selo */
.evento-item:hover .evento-badge::before,
.cal-event-card:hover .cal-event-card-badge::before {
  box-shadow:
    0 0 6px 1px color-mix(in srgb, var(--red-bright) 65%, transparent),
    0 0 12px 3px color-mix(in srgb, var(--red-bright) 30%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .evento-badge::before,
  .cal-event-card-badge::before { transition: none; }
}

.evento-todos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 10px;
  text-decoration: none;
  font-family: var(--font-hud);
  font-size: var(--t-meta);
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.evento-todos:focus-visible { outline: 2px solid var(--purple-bright); outline-offset: 2px; }
.evento-todos svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════════════════
   POPULARES — o primeiro em destaque, o resto em fileira.

   Com a sidebar a 200px so cabia uma coisa: miniatura de 52px mais duas
   linhas de texto, cinco vezes. Cinco fileiras identicas nao dizem nada
   sobre ranking, so sobre ordem de leitura, e ranking era justamente o que
   o widget existia para mostrar.

   A 420px cabe hierarquia: o primeiro colocado ganha imagem grande e o
   numero por cima dela, os outros ficam compactos. O numero e a peca que
   faz o widget ser lido como ranking sem precisar da palavra "ranking".

   O genero entra como antetitulo, na cor do topico — e a mesma --g-tinta
   dos filtros do calendario, entao FGC segue vermelho e MOBA segue ciano.
   ══════════════════════════════════════════════════════════════════════ */
.sidebar-post-list { display: flex; flex-direction: column; gap: 10px; }

.sidebar-post-item-popular {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 0;
  border-bottom: none;
  text-decoration: none;
}
.sidebar-post-item-popular + .sidebar-post-item-popular { padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }

/* A miniatura carrega o numero, entao precisa ser o bloco posicionado.

   O raio saiu de --raio-interno (3px no widget) para a faixa de controle.
   --raio-interno e a conta de filho que ACOMPANHA a curva do painel; esta
   miniatura nao acompanha curva nenhuma — e item de linha, 78x52px, no meio
   de uma lista, longe de qualquer quina. Quem decide e o tamanho dela.
   Mesma correcao feita no .read-more, pelo mesmo motivo. */
.sidebar-thumb-wrap {
  position: relative;
  flex-shrink: 0;
  width: 78px;
  aspect-ratio: 3/2;
  overflow: hidden;
  border-radius: var(--raio-controle);
  background: var(--bg-surface);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, #000 var(--poco-contorno), transparent),
    inset 0 -1px 0 color-mix(in srgb, #fff var(--poco-luz), transparent);
}
.sidebar-thumb { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(.86) saturate(1.1); transition: filter .25s ease; }
.sidebar-post-item-popular:hover .sidebar-thumb { filter: brightness(1) saturate(1.3); }
/* Post sem imagem cai aqui. O bloco e uma superficie lisa, e isso e o
   estado final: dentro dele havia um <div class="sidebar-thumb-icon"> que
   nunca teve regra nenhuma no CSS — um elemento vazio herdado de um
   desenho que nao chegou a existir. Se um dia entrar um icone de
   marcador, ele vem do mapa de inc/icones.php, nao de um div oco. */
.sidebar-thumb-fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--bg-surface); }

/* Sem numeracao: os algarismos vazados sobre a imagem sairam. Eram a peca
   mais alta em peso visual do widget e disputavam com o titulo, e o rotulo
   "Populares" ja diz o que a ordem significa. O ranking continua legivel
   pela hierarquia — primeiro grande, resto compacto. */
.sidebar-post-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sidebar-post-genero {
  font-family: var(--font-hud);
  font-weight: 700;
  /* ERRATA: eu tinha subido para 12px porque o antetitulo "sumia". Sumia
     mesmo, mas nao por tamanho — .sidebar-post-item-popular nao estava na
     lista que calcula --g-tinta, entao a cor caia no cinza de --text-muted
     e um antetitulo cinza de 10px ao lado de um titulo branco de 13px
     desaparece. Subir o tamanho tratava o sintoma, e de quebra punha o
     antetitulo a 1,08 do titulo, que e competir com ele.
     Com a cor do topico funcionando, 10px basta. */
  font-size: var(--t-selo);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--g-tinta, var(--text-muted));
}

/* PRIMEIRO COLOCADO — imagem larga, numero grande, titulo maior. */
.sidebar-post-item-popular.e-primeiro { flex-direction: column; gap: 9px; }
.sidebar-post-item-popular.e-primeiro .sidebar-thumb-wrap { width: 100%; }
/* Titulo em --text-primary, nao no secundario.
   Aqui ele e o elemento principal da fileira, nao apoio: quem e apoio e o
   antetitulo do genero. A regra antiga trazia
   var(--text-secondary, var(--text-secondary)), com o mesmo token nos dois
   lados — fallback que nunca teve como servir para nada. */
.sidebar-post-title {
  font-size: var(--t-rotulo);
  line-height: 1.35;
  color: var(--text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sidebar-post-item-popular:hover .sidebar-post-title { color: var(--purple-bright); }
.sidebar-post-item-popular.e-primeiro .sidebar-post-title { font-size: var(--t-corpo); -webkit-line-clamp: 3; }
.sidebar-post-item-popular.e-primeiro .sidebar-post-genero { font-size: var(--t-meta); }

/* Estado vazio dos widgets de lista. Estava inline em 9px, abaixo do piso. */
.sidebar-vazio { font-family: var(--font-hud); font-size: var(--t-mini); letter-spacing: 2px; color: var(--text-muted); text-transform: uppercase; }

#sidebar { display: flex; flex-direction: column; gap: 24px; }
/* WIDGET EM FORMA DE PASTA
   Mesmo perfil do card de post, em escala menor: a sidebar tem 200px, entao
   o mesmo chanfro absoluto pesaria mais. O titulo mora na aba e dispensa a
   faixa de cabecalho separada que existia antes.
   Topo e base compartilham a linha de corte, entao qualquer peca encaixa em
   qualquer outra e esconder um widget nao quebra a coluna. */
/* O perfil da base repete o do topo, deslocado para baixo: e a MESMA linha
   de corte. Por isso a aba de uma peca preenche exatamente o recorte da
   peca de cima, e qualquer widget encaixa em qualquer outro, em qualquer
   ordem. Esconder um nao quebra a coluna.
   O chanfro de canto do card nao serve aqui: canto cortado nao encaixa. */
.widget {
  /* 28px de aba deixa 9,8px acima e abaixo da caixa alta do titulo (8,4px em
     13px de Rajdhani), que casa com os 10px de recuo lateral. Com 24px o
     respiro vertical era 7,8px contra 12px na lateral, e isso lia como
     desalinhado.
     A parte reta vai ate 76% porque o titulo mais longo, "Somos Afiliados",
     precisa de 118px e a 62% so sobravam 96px.

     TETO DE TITULO: 118px de texto, ou cerca de 15 caracteres em caixa alta
     nesta fonte. Acima disso o rotulo entra na diagonal. O .widget-header
     tem max-width de 76% e o .widget-title corta em reticencias, entao o
     estouro aparece em vez de ser cortado no meio da letra pelo clip-path —
     foi exatamente assim que "Proximos eventos", com 126px, passou. */
  --aba: 28px;
  position: relative;
  display: flex;
  flex-direction: column;
}
/* MESMA SILHUETA DOS CARDS.
   O widget ja tinha a topologia do cartucho — uma aba no topo com o titulo
   e o corpo embaixo — so que desenhada com clip-path. E poligono nao aceita
   canto redondo, entao arredondar o widget exigia converte-lo.

   Vale o mesmo que valeu no card: com border-radius no lugar do recorte,
   border volta a funcionar, box-shadow deixa de ser cortado, e o titulo
   comprido deixa de correr o risco de ser fatiado no meio da letra pela
   diagonal — que foi como "Proximos eventos" passou despercebido.

   A aba abraca o titulo, como a do card abraca a data. Some junto o teto de
   76%: nao ha mais diagonal para o texto atravessar, entao o limite passa a
   ser a largura da sidebar, e o proprio reticencias resolve. */
.widget-header {
  width: fit-content;
  max-width: 100%;
  height: var(--aba);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: var(--raio-cartucho) var(--raio-cartucho) 0 0;
  margin-bottom: -1px;
  position: relative;
  z-index: 2;
}
.widget-inner {
  background: var(--bg-card);
  border: 1px solid var(--border);
  /* ══════════════════════════════════════════════════════════════════
     O WIDGET E A UNICA PECA QUE AINDA TEM ABA — entao ele segue o cartucho,
     nao o painel.

     A regra que sobrou do site e limpa: peca com silhueta de aba usa
     --raio-cartucho; painel liso usa --raio-painel. Depois que o card do
     feed perdeu a aba, o widget ficou sozinho no primeiro grupo; os outros
     doze consumidores de --raio-painel — formulario, hero, calendario,
     comentarios, dropdown, leaderboard — sao painel liso e nao mudam.

     Vale tambem por vizinhanca: widget a 16px ao lado de card a 8px deixaria
     a sidebar visivelmente mais macia que o feed, na mesma tela.

     O --raio-interno que vivia aqui SAIU, e por dois motivos somados. O
     primeiro e o mesmo do card: com o externo em 8 e a folga em 13 (12 de
     recuo mais 1 de borda) a conta da -5, ou seja o filho ja se soltou da
     quina e quem decide e a faixa de tamanho dele. O segundo e que ele nao
     tinha consumidor nenhum — o unico candidato, .cal-event-card-thumb,
     vive dentro do .cal-event-card, que declara o proprio --raio-interno.
     Era variavel morta herdando uma conta errada.
     ══════════════════════════════════════════════════════════════════ */
  border-radius: 0 var(--raio-cartucho) var(--raio-cartucho) var(--raio-cartucho);
  position: relative;
}
/* ══════════════════════════════════════════════════════════════════════
   PUBLICIDADE — sem moldura e sem rotulo, de proposito.

   Anuncio dentro da silhueta de cartucho passa a parecer conteudo do
   portal: mesma carcaca, mesma aba, mesma borda que uma materia. Isso
   sugere endosso editorial de algo que o portal nao escolheu nem apurou.
   Entao o bloco perde tudo que e identidade — carcaca, aba, borda, raio e o
   losango vermelho que pulsa nos titulos de widget — e fica so o criativo.

   ERRATA: este bloco dizia "o rotulo NAO sai: e divulgacao". A palavra
   "Publicidade" saiu, e o argumento estava mal colocado. CONAR e CDC exigem
   que publicidade seja identificavel, mas a exigencia morde em peca que
   IMITA materia. Um 728x90 ou um 300x250 em slot delimitado ja se
   identifica pelo formato; o rotulo ali nao acrescenta informacao e, com
   adblock, sobrava sozinho na tela sem nada embaixo.

   O limite: peca que imita a forma de conteudo — Native Banner, publieditorial,
   card patrocinado no feed — LEVA rotulo, e ai nao e negociavel. A regra e a
   forma da peca, nao a existencia do anuncio.

   As regras de .widget-header/.widget-title deste container sairam junto:
   o markup nao imprime mais cabecalho nenhum nos slots de anuncio.
   ══════════════════════════════════════════════════════════════════════ */
.widget.ad-sidebar-container { padding: 0; background: transparent; border: none; }
.widget.ad-sidebar-container .widget-inner {
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
}
.widget.ad-sidebar-container .widget-body { padding: 0; justify-content: center; }

/* ── O BLOCO SO EXISTE SE O ANUNCIO EXISTIR ─────────────────────────────
   Com bloqueador o script do anunciante nao injeta nada, e o slot vazio
   continuaria ocupando altura no meio da pagina. :has() pergunta se o
   criativo chegou: se chegou, o bloco aparece; se nao, some inteiro e nao
   deixa buraco.

   Isso resolvia tambem a palavra "Publicidade" orfa, que era o sintoma mais
   visivel. O rotulo saiu do markup de vez (ver o bloco acima), entao hoje
   esta regra cuida so do espaco vazio — que continua valendo a pena.

   O seletor procura iframe, img ou ins, que e o que as redes injetam. */
.widget.ad-sidebar-container,
.ad-leaderboard { display: none; }
.widget.ad-sidebar-container:has(iframe),
.widget.ad-sidebar-container:has(img),
.widget.ad-sidebar-container:has(ins) {
  display: block;
  /* RESERVA DE ALTURA, como no leaderboard.
     O iframe do anunciante chega depois do HTML, e sem reserva o bloco
     nasce com zero e empurra o que vem embaixo quando o criativo carrega.
     Isso e deslocamento de layout e conta contra o CLS.
     --ad-h vem inline do template-part, porque so o PHP sabe qual formato
     foi pedido: a sidebar serve 300x250, a coluna do destaque serve
     320x50. O padrao cobre o caso de alguem chamar a peca sem argumento. */
  min-height: var(--ad-h, 250px);
}
.ad-leaderboard:has(iframe),
.ad-leaderboard:has(img),
.ad-leaderboard:has(ins) { display: flex; }

/* Rede de seguranca: se o navegador nao entender :has(), nada disso vale e
   o slot volta a aparecer sempre — que e o comportamento antigo, nao um
   quebrado. Melhor um espaco vazio do que sumir com o inventario. */
@supports not selector(:has(*)) {
  .widget.ad-sidebar-container { display: block; }
  .ad-leaderboard { display: flex; }
}

/* A regra antiga do cabecalho vivia aqui: absolute, preso a 76% da largura
   para nao passar por baixo da diagonal do clip-path. Sem diagonal, nada
   disso e necessario — o cabecalho e a propria aba agora. */

.widget-title { font-family: var(--font-hud); font-weight: 700; font-size: var(--t-rotulo); letter-spacing: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; text-transform: uppercase; color: var(--purple-bright); }
/* Subtitulo da aba: divide a faixa com o titulo, separado por um ponto.
   Menor e em --text-secondary para nao disputar com o rotulo — ele qualifica
   o widget, nao o nomeia. A aba e fit-content, entao ela cresce sozinha. */
.widget-sub {
  font-family: var(--font-hud);
  font-size: var(--t-meta);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-secondary);
  flex-shrink: 0;
}
.widget-sub::before { content: '\00B7'; margin: 0 6px; opacity: .6; }
/* ══════════════════════════════════════════════════════════════════════
   MARCA DO TITULO — icone do widget, nao mais o losango pulsante.

   O losango tinha uma funcao real: era a assinatura que separava widget do
   portal de bloco de anuncio, e por isso foi deliberadamente escondido nos
   containers de publicidade. So que os slots de anuncio pararam de imprimir
   cabecalho, entao nao ha de quem se distinguir. A funcao evaporou e sobrou
   o movimento.

   E o movimento era caro: animacao infinita em quatro cabecalhos ao mesmo
   tempo, sem respeitar prefers-reduced-motion. A WCAG 2.2.2 pede controle
   sobre conteudo que se move por mais de cinco segundos, e isso nunca para.

   No lugar entra o icone do proprio widget, reaproveitando os desenhos que
   o tema ja embute. Com quatro blocos empilhados na sidebar, ele da uma
   ancora para achar o certo sem ler o rotulo — que e o que uma aba sozinha
   nao faz, porque as quatro sao iguais.

   Widget vindo do wp-admin nao recebe icone: ali o tema nao sabe o assunto,
   e inventar um generico seria pior que nao ter.
   ══════════════════════════════════════════════════════════════════════ */
.widget-title-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--purple-bright);
}
html[data-tema="claro"] .widget-title-icon { color: var(--purple-mid); }
.widget-body { padding: 14px 12px; }

.comments-section { margin-top: 32px; background: var(--bg-card); border: 1px solid var(--border); padding: 20px 24px 28px; position: relative; border-radius: var(--raio-painel); }
.comments-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--purple-mid), transparent); }
/* ══════════════════════════════════════════════════════════════════════
   COMENTARIOS NATIVOS — substituiram o embed do Disqus.

   Nada aqui inventa vocabulario. O campo de texto e POCO, com as mesmas
   doses --campo-* calibradas para o formulario de contato (no escuro so a
   luz inferior desenha, no claro so a sombra do topo). O botao de enviar
   entra na familia de acao pela classe .read-more, entao herda face, saia
   de relevo e o afundar no clique. A lista e uma pilha de placas sobre a
   carcaca, com a mesma invariante dos cards: mais clara que a superficie.
   ══════════════════════════════════════════════════════════════════════ */
.comment-list { list-style: none; margin: 0 0 28px; padding: 0; }
.comment-list .children { list-style: none; margin: 12px 0 0; padding-left: 20px; border-left: 1px solid var(--border); }
.comment-item { margin-bottom: 12px; }
.comment-corpo {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--raio-controle);
  padding: 14px 16px;
}
.comment-cabecalho { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.comment-avatar { border-radius: 50%; flex-shrink: 0; display: block; }
.comment-identidade { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.comment-autor {
  font-family: var(--font-hud); font-weight: 700; font-size: var(--t-rotulo);
  letter-spacing: 1px; color: var(--text-primary);
}
.comment-data {
  font-family: var(--font-hud); font-size: var(--t-meta); letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--text-secondary);
}
.comment-texto { font-family: var(--font-body); font-size: var(--t-corpo); line-height: 1.6; color: var(--text-secondary); }
.comment-texto p { margin-bottom: 10px; }
.comment-texto p:last-child { margin-bottom: 0; }
.comment-moderacao {
  font-family: var(--font-hud); font-size: var(--t-meta); letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--alerta); margin-bottom: 8px;
}
.comment-acoes { margin-top: 10px; }
.comment-acoes a {
  font-family: var(--font-hud); font-size: var(--t-meta); letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--text-secondary);
  text-decoration: underline; text-underline-offset: 3px;
}
.comment-acoes a:hover { color: var(--text-primary); }
.comment-fechado { font-family: var(--font-hud); font-size: var(--t-mini); letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 20px; }

/* ── Formulário ── */
.comment-respond { border-top: 1px solid var(--border); padding-top: 22px; }
.comment-reply-title {
  font-family: var(--font-hud); font-weight: 700; font-size: var(--t-corpo);
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--text-primary); margin-bottom: 6px;
}
.comment-reply-title small { font-size: var(--t-meta); margin-left: 8px; font-weight: 400; }
.comment-reply-title small a { color: var(--text-secondary); text-decoration: underline; text-underline-offset: 3px; }
.comment-aviso { font-family: var(--font-body); font-size: var(--t-rotulo); color: var(--text-secondary); margin-bottom: 16px; }
.comment-aviso abbr, .comment-campo abbr { text-decoration: none; color: var(--red-bright); }
.comment-campo { margin-bottom: 14px; }
.comment-campo label {
  display: block; margin-bottom: 5px;
  font-family: var(--font-hud); font-size: var(--t-mini); font-weight: 600;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-secondary);
}
.comment-campo input,
.comment-campo textarea {
  width: 100%; box-sizing: border-box;
  font-family: var(--font-body); font-size: var(--t-rotulo); line-height: 1.4;
  color: var(--text-primary);
  background: var(--bg-campo);
  border: 1px solid var(--border-campo);
  border-radius: var(--raio-controle);
  padding: 9px 12px;
  -webkit-appearance: none; appearance: none;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  /* Mesmo poco do formulario de contato: as doses se invertem por tema. */
  box-shadow:
    inset 0 2px 3px color-mix(in srgb, #000 var(--campo-sombra), transparent),
    inset 0 -1px 0 color-mix(in srgb, #fff var(--campo-luz), transparent);
}
.comment-campo textarea { resize: vertical; min-height: 110px; }
.comment-campo input:focus,
.comment-campo textarea:focus {
  border-color: var(--purple-bright);
  /* O anel SOMA ao rebaixo; sozinho ele achatava o campo no foco. */
  box-shadow:
    inset 0 2px 3px color-mix(in srgb, #000 var(--campo-sombra), transparent),
    inset 0 -1px 0 color-mix(in srgb, #fff var(--campo-luz), transparent),
    0 0 0 2px color-mix(in srgb, var(--purple-bright) 18%, transparent);
}
.comment-campo input::placeholder,
.comment-campo textarea::placeholder { color: var(--text-muted); }
/* .read-more ja veio do markup: face, relevo e afundar vem da familia. */
.comment-enviar { margin-top: 4px; }
.comment-form-cookies-consent { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 14px; }
.comment-form-cookies-consent label { font-family: var(--font-body); font-size: var(--t-rotulo); color: var(--text-secondary); }
.comment-paginacao { display: flex; gap: 8px; margin-bottom: 24px; }


/* Generos da sidebar, com o icone que o tema ja mapeia em xtamina_tag_icon().
   Substitui a nuvem que misturava genero, formato e plataforma numa
   taxonomia so.

   Eram sete linhas empilhadas, uma coluna alta de rotulos quase iguais que o
   olho percorria sem parar em nenhum. Viraram ladrilho: icone em cima,
   rotulo embaixo, quatro por fileira. O desenho passa a carregar a distincao
   que o texto sozinho nao carregava, e a altura do widget cai pela metade.

   Quatro colunas e o que fecha os oito itens em duas fileiras exatas. Na
   sidebar mais estreita (300px) sobram 274px uteis, entao o ladrilho tem
   64px; na mais larga (420px), 94px. Em 64px cabe "BATTLE" numa linha de
   11px de Rajdhani (36px), que e o rotulo mais comprido depois da quebra.

   minmax(0, 1fr) e obrigatorio: 1fr sozinho e minmax(auto, 1fr), e auto nao
   encolhe abaixo do min-content, entao "BATTLE ROYALE" inflaria a coluna.
   grid-auto-rows: 1fr iguala as duas fileiras, que senao teriam alturas
   diferentes por causa do unico rotulo que quebra em duas linhas. */
/* TRES COLUNAS, E NAO QUATRO.
   Eram 8 ladrilhos em duas fileiras de quatro, e o oitavo (Eventos) existia
   justamente para fechar a segunda fileira. Com Estrategia sao NOVE, e nove
   em quatro colunas deixa um orfao sozinho na terceira fileira.
   Tres colunas por tres fileiras fecha exato, e de quebra cada ladrilho vai
   de ~93px para ~126px na coluna de 420 — largura em que "Battle Royale",
   o unico rotulo que quebrava em duas linhas, passa a caber numa so. */
.genero-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 6px;
}
.genero-item {
  /* Alinhado ao topo, nao centralizado. "Battle Royale" e o unico rotulo que
     quebra em duas linhas; centralizado, o bloco inteiro dele subiria e o
     icone desse ladrilho ficaria desalinhado dos outros tres da fileira.
     Ancorando no topo, todos os icones e todas as primeiras linhas nascem na
     mesma altura, e so a segunda linha desce. */
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 7px; text-align: center;
  font-family: var(--font-hud); font-weight: 600; font-size: var(--t-meta);
  letter-spacing: 1px; line-height: 1.15; text-transform: uppercase;
  color: var(--text-primary); border: 1px solid var(--border); padding: 11px 4px;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease;
  /* O ladrilho fica a 13px da borda do painel (12 de recuo do corpo + 1 da
     borda dele), contra 16px de raio do painel. A conta de aninhamento daria
     3px, mas ela vale enquanto o filho ainda acompanha a curva do pai: com
     folga de 13 para raio de 16 ele ja se soltou da quina, e quem decide
     passa a ser a faixa de tamanho. O ladrilho tem ~70px, mesma situacao do
     card de evento do calendario, que tambem ficou em 6px. Os 3px, num
     ladrilho desse tamanho, leriam como canto vivo mal renderizado. */
  border-radius: var(--raio-controle);
}
.genero-item svg { width: 20px; height: 20px; color: var(--text-muted); flex-shrink: 0; transition: color .18s ease; }
/* ERRATA: aqui estava escrito que Eventos fica colorido JA EM REPOUSO "porque
   e o unico item da grade que muda de pagina em vez de filtrar". A frase e
   falsa. Os oito ladrilhos apontam para arquivo de tag; /tag/eventos/ e o
   mesmo tipo de destino que /tag/fgc/, sem nenhuma diferenca funcional.

   Alem de falsa, ela quebrava a regra escrita vinte linhas acima — em repouso
   todos neutros, cor so no item apontado — e o resultado era um ladrilho
   aceso no meio de sete apagados, exatamente o que aquela regra evita.

   Eventos mantem o roxo da marca como tinta, por nao pertencer a genero
   nenhum, mas ela so acende no hover e no foco, como as outras sete. */
.genero-item.e-eventos { --g-topico: var(--purple-bright); --g-tinta: var(--purple-bright); }

/* Em repouso todos os itens sao neutros: sete cores acesas ao mesmo tempo
   numa coluna de 200px viraria arco-iris e mataria a hierarquia da sidebar.
   A cor do topico aparece so no item apontado, o que tambem resolve
   qualquer questao de matizes vizinhas, ja que nunca ha duas simultaneas.
   --g-topico e definida por item logo abaixo. */
.genero-item:hover,
.genero-item:focus-visible {
  color: var(--g-tinta);
  border-color: var(--g-tinta);
  background: color-mix(in srgb, var(--g-topico) 14%, transparent);
}
.genero-item:hover svg,
.genero-item:focus-visible svg { color: var(--g-tinta); }
.genero-item:focus-visible { outline: 2px solid var(--g-tinta); outline-offset: 2px; }

/* O mapa de topico -> cor esta logo abaixo do :root e vale para a sidebar
   e para o calendario ao mesmo tempo. */


/* ══════════════════════════════════════════════════════════════════════
   SISTEMA DE BOTÕES — controle físico

   TV de tubo e controle nao sao metaforas concorrentes: sao a mesma cena.
   Quem jogava nos anos 90 tinha os dois ligados um no outro. Entao o
   vocabulario e um so, e cada modo o renderiza na propria paleta.

   DO CONTROLE vem a forma: plastico alto com aresta viva embaixo, faixa de
   luz na metade de cima, e no clique a peca AFUNDA — desce 3px e a aresta
   some. E iluminacao, nao cor, entao funciona em qualquer fundo.
   DO TUBO vem o hover: um anel de fosforo em volta, que e como a TV
   responde ao toque.

   FORMA SEGUE FUNCAO:
     raio 3px   acao          faz alguma coisa acontecer     braco do direcional
     redondo    navegacao     vai para outra pagina ou mes   botoes A e B
     pastilha   rotulo        so nomeia, nao executa         select / start
     plano      cromo         header e formulario            sem relevo

   O ESTADO ATIVO NAO USA COR, USA RELEVO. Pagina atual e secao atual ficam
   permanentemente afundadas. Cor marcaria "clique aqui" e "voce esta aqui"
   com o mesmo sinal, e o leitor nao saberia qual e qual.

   No modo claro afundar e ESCURECER. No escuro isso nao existe: a moldura
   tem 6% de luz e escurecer 30% da contraste 1,03, ou seja, o item some.
   La o poco se le pela quina que PEGA LUZ — sombra no topo, fio de luz na
   aresta de baixo. Mesma regra da vinheta e do LCD: em fundo abaixo de 1%
   de luminancia, forma so existe somando luz.
   ══════════════════════════════════════════════════════════════════════ */
.read-more,
.cal-pitch-cta,
.evento-todos,
.contato-form-wrap input[type="submit"],
.page-numbers,
.cal-nav-btn,
.cal-picker-year-btn,
.post-tag-pill {
  /* --red-mid, nao --red-bright. O bright e a cor do LINK, calibrada como
     TEXTO sobre fundo; como face de botao com texto branco ele reprova
     (2,45 no escuro). Cor de texto nao vira preenchimento sem ajuste. */
  --face: var(--red-mid);
  --prof: 3px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-hud);
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--text-on-brand);
  /* A QUINA DESVANECE, NAO CORTA.
     O corte era instantaneo em 38%, e um degrau seco no meio de uma peca de
     25px de altura le como linha divisoria, nao como quina pegando luz.
     Plastico moldado tem aresta arredondada: a luz apaga em alguns pixels.
     A faixa cheia vai ate 26%, mistura ate 46% e so entao vira face. */
  background:
    linear-gradient(180deg,
      color-mix(in srgb, #fff 13%, var(--face)) 0%,
      color-mix(in srgb, #fff 13%, var(--face)) 26%,
      color-mix(in srgb, #fff 5%, var(--face)) 40%,
      var(--face) 52%);
  box-shadow: 0 var(--prof) 0 color-mix(in srgb, #000 42%, var(--face));
  transition: transform .09s ease, box-shadow .18s ease;
}
/* O BRILHO E DA SILHUETA, NAO DO CONTEUDO.
   Era filter: drop-shadow, que filtra o elemento RENDERIZADO — texto
   incluso. Cada letra ganhava um halo na cor da face, e sobre uma face
   vermelha o halo comia o contorno dos glifos: o rotulo sumia justamente
   quando o leitor apontava para ele.
   box-shadow desenha fora da caixa e nao encosta no texto. A aresta do
   relevo entra na mesma lista, senao o hover a apagaria. */
.read-more:hover,
.cal-pitch-cta:hover,
.evento-todos:hover,
.contato-form-wrap input[type="submit"]:hover {
  box-shadow:
    0 var(--prof) 0 color-mix(in srgb, #000 42%, var(--face)),
    0 0 10px color-mix(in srgb, var(--face) 50%, transparent);
}
/* O redondo tem tres camadas de relevo; o hover soma o brilho sem descartar
   nenhuma delas. O brilho sai de --brilho e nao de --face: nas pecas
   vermelhas os dois sao a mesma coisa, mas na paginacao inativa a face e
   cinza, e brilho cinza sobre fundo escuro nao aparece. */
.page-numbers:hover,
.cal-nav-btn:hover,
.cal-picker-year-btn:hover {
  box-shadow:
    0 var(--prof) 0 color-mix(in srgb, #000 42%, var(--face)),
    inset 0 -2px 3px color-mix(in srgb, #000 28%, transparent),
    inset 0 1px 1px color-mix(in srgb, #fff 22%, transparent),
    0 0 10px color-mix(in srgb, var(--brilho) 50%, transparent);
}
.read-more:active,
.cal-pitch-cta:active,
.evento-todos:active,
.contato-form-wrap input[type="submit"]:active,
.page-numbers:active,
.cal-nav-btn:active,
.cal-picker-year-btn:active,
.post-tag-pill:active {
  transform: translateY(var(--prof));
  box-shadow: 0 0 0 color-mix(in srgb, #000 42%, var(--face));
}
.read-more:focus-visible,
.cal-pitch-cta:focus-visible,
.evento-todos:focus-visible,
.contato-form-wrap input[type="submit"]:focus-visible,
.page-numbers:focus-visible,
.cal-nav-btn:focus-visible,
.cal-picker-year-btn:focus-visible,
.post-tag-pill:focus-visible { outline: 2px solid var(--purple-bright); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
.read-more,
.cal-pitch-cta,
.evento-todos,
.contato-form-wrap input[type="submit"],
.page-numbers,
.cal-nav-btn,
.cal-picker-year-btn,
.post-tag-pill { transition: none; }
}

/* ACAO — o raio segue o TAMANHO DA PECA, nunca o container.
   O TRATAMENTO E UM SO, O TAMANHO NAO. "Ler mais" e acao secundaria dentro
   de um card; o CTA de fim de post e acao principal. Um padding unico para
   os quatro engordava o pequeno: o vertical do read-more foi de 4px para
   10px, mais que dobrou.

   ERRATA: este bloco dizia "AÇÃO — raio 3px, braço do direcional" e defendia
   que 3px numa peca de 24px e o certo. O codigo nunca teve 3px: declarava
   --raio-controle, 6px, para a familia inteira. O comentario descrevia um
   valor que nao existia, igual ao "8% a 14%" de saturacao. Medido agora:

     .read-more       fonte 11px, pad-v  5px  ->  ~23px de altura
     .evento-todos    fonte 11px, pad-v 10px  ->  ~33px
     .cal-pitch-cta   fonte 12px, pad-v 10px  ->  ~34px
     input[submit]    fonte 13px, pad-v 10px  ->  ~36px

   --raio-controle esta documentado como a faixa de 28 a 48px. Tres dos
   quatro cabem; o read-more, com 23px, esta ABAIXO dela — 6px ali sao 26%
   da altura e a peca vira pastilha. Entao a familia se divide pela faixa,
   que e o unico criterio que escala: os tres grandes ficam em controle, o
   pequeno cai para mini. --prof acompanha pelo mesmo motivo. */
.cal-pitch-cta,
.evento-todos,
.contato-form-wrap input[type="submit"] {
  border-radius: var(--raio-controle);
}
.read-more {
  border-radius: var(--raio-mini);
  --prof: 2px;
  padding: 5px 12px;
  font-size: var(--t-meta);
  letter-spacing: 1.4px;
}
/* Na coluna de 200px o botao ocupa a largura toda e o texto tem 135px
   uteis. "VER CALENDÁRIO COMPLETO" media 152px com o espacamento de 1,6px
   herdado da base, entao quebrava em duas linhas — e com o peso 700 virava
   tres. O rotulo encurtou para "Ver calendário" (92px) e o espacamento
   voltou para 1,4px. "Completo" nao informava nada: o widget ja se chama
   Agenda e lista eventos. */
.evento-todos {
  --prof: 2px;
  display: flex;
  width: calc(100% - 20px);
  padding: 8px 12px;
  font-size: var(--t-meta);
  letter-spacing: 1.4px;
  font-weight: 600;
}
.cal-pitch-cta,
.contato-form-wrap input[type="submit"] {
  padding: 12px 22px;
  font-size: var(--t-mini);
}

/* NAVEGAÇÃO — redondo, botões A e B.

   O VOLUME DE UMA PECA REDONDA NAO E LINEAR. Gradiente de duas faixas com
   corte seco funciona num retangulo, porque tecla moldada e plana; numa
   peca redonda vira meia-lua, e meia-lua o olho nao le como volume. Botao
   A/B e ABAULADO: brilho radial deslocado para cima e para a esquerda, face
   escurecendo em direcao a borda, e sombra interna embaixo, onde o domo
   curva para longe da luz. */
.page-numbers,
.cal-nav-btn,
.cal-picker-year-btn {
  /* A face do redondo e 20% mais escura que a da tecla retangular. Nao e
     arbitrario: com o brilho do domo somado, --red-mid puro deixa o texto
     branco em 3,49 no modo escuro. E e fiel ao objeto — o botao A/B de um
     controle e mais escuro que a peca de acao chapada. */
  --face: color-mix(in srgb, #000 20%, var(--red-mid));
  /* Por padrao o brilho e a propria face; so a paginacao inativa desvia. */
  --brilho: var(--face);
  border-radius: 50%;
  min-width: 36px;
  width: 36px;
  height: 36px;
  font-size: var(--t-corpo);
  letter-spacing: 0;
  background:
    radial-gradient(circle at 34% 26%,
      color-mix(in srgb, #fff 26%, var(--face)) 0%,
      color-mix(in srgb, #fff 10%, var(--face)) 30%,
      var(--face) 60%,
      color-mix(in srgb, #000 18%, var(--face)) 100%);
  box-shadow:
    0 var(--prof) 0 color-mix(in srgb, #000 42%, var(--face)),
    inset 0 -2px 3px color-mix(in srgb, #000 28%, transparent),
    inset 0 1px 1px color-mix(in srgb, #fff 22%, transparent);
}
.cal-nav-btn { font-size: var(--t-titulo); }
/* As setas de ano do seletor de mes sao navegacao, nao selecao: mesma peca
   redonda dos botoes A e B, um numero menor porque vivem dentro do painel. */
.cal-picker-year-btn { min-width: 30px; width: 30px; height: 30px; font-size: var(--t-corpo); }

/* Pagina atual: afundada de vez, sem domo e sem aresta.

   SEM translateY, e essa e a diferenca entre afundar e DESCER.

   O botao tinha os dois movimentos somados: perdia a saia de relevo E
   descia --prof. Como a saia vive FORA da caixa, tirar ela ja encosta a
   face no lugar onde a base estava; somar o deslocamento leva a peca
   inteira, topo e base, 3px abaixo dos vizinhos. Medido no navegador:
   topo 3097,1 contra 3094,1 dos outros, base 3133,1 contra 3130,1.

   No fundo listrado do tema isso fica evidente, porque as linhas servem de
   regua e a peca escapa da fileira.

   O :active continua com o deslocamento, e ali esta certo: o clique e
   momentaneo e o pulo faz parte do gesto. O que nao pode e um ESTADO
   PERMANENTE mover a peca de lugar — quem diz "voce esta aqui" e o rebaixo,
   nao a posicao. E este era o unico estado permanente do tema com
   translateY; o filtro escolhido do calendario ja funcionava assim. */
.page-numbers.current,
.page-numbers[aria-current="page"] {
  background: color-mix(in srgb, #000 14%, var(--face));
  box-shadow:
    inset 0 3px 4px color-mix(in srgb, #000 45%, transparent),
    inset 0 -1px 0 color-mix(in srgb, #fff 18%, transparent);
  cursor: default;
}
/* ERRATA — o numero inativo E botao.
   Aqui dizia que ele era "slot vazio" e que nenhuma face cinza segurava
   texto no escuro, "melhor caso 3,68". Os dois pontos estavam errados.

   O primeiro e de conceito: pagina 3 leva a pagina 3, e o que leva a algum
   lugar e botao. Slot vazio e o "...", que nao clica. O resultado do
   achatamento era uma fileira de aneis finos ao lado de uma peca solida, e
   a unica com volume era justamente a que NAO clica, porque e a atual.

   O segundo e de medida: os 3,68 sairam de --text-secondary sobre a face.
   Com --text-primary, que e o que a familia de acao secundaria ja usa
   nessas mesmas superficies, o pior ponto do domo da 5,86 no escuro e
   14,06 no claro. A face nunca foi o problema, o texto era.

   So --face e a cor do texto mudam: o domo, a aresta e as luzes internas
   vem inteiros do bloco de navegacao redonda la em cima. */
.page-numbers:not(.current):not([aria-current="page"]):not(.dots) {
  --face: var(--bg-card);
  --brilho: var(--purple-mid);
  color: var(--text-primary);
}
/* No escuro a face sobe para a superficie levantada, mesma troca da familia
   de acao secundaria: la a aresta nao desenha nada e quem separa a peca do
   fundo e a luz do topo, entao ela precisa de mais material para refletir. */
html:not([data-tema="claro"]) .page-numbers:not(.current):not([aria-current="page"]):not(.dots) {
  --face: var(--bg-card-hover);
}
/* O "..." nao clica: fica plano, sem domo e sem aresta.
   Texto em --text-secundario e nao --text-muted: ao sair da regra dos
   inativos ele perdeu o secundario que vinha de la e caiu para 3,99 no
   claro. O "..." informa que existem mais paginas, entao e texto. */
.page-numbers.dots {
  background: none;
  box-shadow: none;
  color: var(--text-secondary);
  cursor: default;
}
/* Hover: sobe, igual as pastilhas do calendario. */
a.page-numbers:not(.current):hover {
  --prof: 4px;
  transform: translateY(-1px);
}

/* RÓTULO — pastilha select / start */
/* A PASTILHA CARREGA O RELEVO POR DENTRO.
   A razao original ja nao existe: o card tinha clip-path, que recortava
   qualquer coisa saindo da caixa, e a metade de baixo da tag aparecia
   fatiada. Com a silhueta de cartucho o clip-path saiu, entao hoje um
   box-shadow projetado funcionaria.

   O inset fica assim mesmo, por outro motivo: a pastilha agora mora no
   plastico entre os dois pocos, encostada neles. Aresta projetada somaria
   uma terceira sombra num espaco de 11px que ja tem duas — a do poco de
   cima e a do de baixo. Relevo por dentro mantem a peca lendo como peca sem
   sujar a folga. */
.post-tag-pill {
  --face: color-mix(in srgb, var(--text-muted) 30%, var(--bg-card));
  border-radius: 999px;
  padding: 4px 11px 5px;
  font-size: var(--t-meta);
  font-weight: 700;
  color: var(--gb-rotulo);
  box-shadow:
    inset 0 -2px 0 color-mix(in srgb, #000 30%, var(--face)),
    inset 0 1px 0 color-mix(in srgb, #fff 18%, var(--face));
}
.post-tag-pill:active {
  transform: none;
  box-shadow: inset 0 2px 3px color-mix(in srgb, #000 28%, var(--face));
}

/* PAGINACAO NUMERADA */
.pagination { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--border); }
.page-numbers-list { display: flex; align-items: center; justify-content: center; gap: 4px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.page-numbers-list li { display: flex; }

/* O sublinhado da pagina atual saiu: ela agora e um domo afundado, e a
   barrinha embaixo do circulo era resquicio do desenho anterior. */

/* So geometria: a cor vem da regra la de cima. Esta linha ainda trazia
   --text-muted e, por vir depois, desfazia a correcao. */
.page-numbers.dots { min-width: 24px; letter-spacing: 2px; }

.page-num-arrow { font-size: var(--t-titulo); line-height: 1; }
.page-numbers.prev::after, .page-numbers.next::after { display: none; }
a.page-numbers.prev:hover, a.page-numbers.next:hover { color: var(--purple-bright); }

/* ══════════════════════════════════════════════════════════════════════
   AÇÃO SECUNDÁRIA — a mesma peça, face neutra.

   Voltar ao inicio, abrir e fechar o menu sao acoes, entao tem relevo. Mas
   pintar as tres de vermelho poria tres botoes de acao principal na tela ao
   mesmo tempo, competindo com "Ler mais" e com o CTA de fim de post. A face
   sai do proprio --bg-card: e a tecla moldada na mesma carcaca, que e o que
   o direcional de um controle tambem e.

   A BORDA FICA. Medida, a face neutra separa 1,14 da pagina no escuro e
   1,35 no claro, e nenhum ajuste de luminosidade chega aos 3:1 sem virar
   outra cor. Quem identifica a peca continua sendo o contorno de 1px; o
   relevo entra por cima, para dar o volume, nao para delimitar.
   ══════════════════════════════════════════════════════════════════════ */
.page-btn,
.menu-toggle,
.mobile-close {
  --face: var(--bg-card);
  --prof: 2px;
  /* --text-primary e nao --text-secondary: a peca deixou de ser fundo nu e
     virou superficie levantada, e o secundario sobre a banda de luz do
     relevo caia para 4,34. */
  color: var(--text-primary);
  background: linear-gradient(180deg,
    color-mix(in srgb, #fff 13%, var(--face)) 0%,
    color-mix(in srgb, #fff 13%, var(--face)) 26%,
    color-mix(in srgb, #fff 5%,  var(--face)) 40%,
    var(--face) 52%);
  box-shadow: 0 var(--prof) 0 color-mix(in srgb, #000 42%, var(--face));
  transition: transform .09s ease, box-shadow .18s ease, color .18s ease;
}
/* No escuro a aresta de baixo nao existe: escurecer um fundo com 0,3% de
   luminancia nao produz nada, e a peca ficava chapada. La ela se le so pela
   banda de luz do topo, entao a face sobe para --bg-card-hover, que e o
   token de "superficie levantada" — que e o que uma tecla e — e a banda vai
   de 13% para 18%. Da pagina, 1,71 passa a 2,28.
   Nao subiu mais que isso de proposito: a 3:1 a face fica mais clara que os
   proprios cards de post, e um botao de "voltar" nao pode pesar mais que o
   conteudo. */
html:not([data-tema="claro"]) .page-btn,
html:not([data-tema="claro"]) .menu-toggle,
html:not([data-tema="claro"]) .mobile-close {
  --face: var(--bg-card-hover);
  background: linear-gradient(180deg,
    color-mix(in srgb, #fff 18%, var(--face)) 0%,
    color-mix(in srgb, #fff 18%, var(--face)) 26%,
    color-mix(in srgb, #fff 7%,  var(--face)) 40%,
    var(--face) 52%);
}
.page-btn:hover,
.menu-toggle:hover,
.mobile-close:hover {
  color: var(--purple-bright);
  border-color: var(--purple-mid);
  box-shadow:
    0 var(--prof) 0 color-mix(in srgb, #000 42%, var(--face)),
    0 0 10px color-mix(in srgb, var(--purple-mid) 28%, transparent);
}
/* Pressionar afunda a peca ate a aresta sumir, igual a familia principal. */
.page-btn:active,
.menu-toggle:active,
.mobile-close:active {
  transform: translateY(var(--prof));
  box-shadow: 0 0 0 color-mix(in srgb, #000 42%, var(--face));
}
.page-btn:focus-visible,
.menu-toggle:focus-visible,
.mobile-close:focus-visible { outline: 2px solid var(--purple-bright); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .page-btn, .menu-toggle, .mobile-close { transition: none; }
}

.page-btn { font-family: var(--font-hud); font-weight: 600; font-size: var(--t-mini); letter-spacing: 2px; text-transform: uppercase; border: 1px solid var(--border); border-radius: var(--raio-controle); padding: 10px 20px; display: inline-flex; align-items: center; gap: 8px; }
.page-btn .arrow { font-size: var(--t-corpo); line-height: 1; }

/* ══════════════════════════════════════════════════════════════════════
   ESTADO VAZIO — home sem posts, busca sem resultado, arquivo vazio, 404.

   Os quatro repetiam o mesmo bloco em style inline, com o gradiente do
   titulo escrito por extenso quatro vezes. Mudar a cor da marca exigia
   editar quatro arquivos PHP, e foi assim que os tres textos acabaram
   dizendo "essa tag" ate numa pagina de busca.
   O titulo e texto grande (48px e 72px), entao o gradiente responde a 3:1,
   nao a 4,5 — e passa nos dois modos com margem (o pior e o vermelho no
   claro, 3,94). */
.estado-vazio { padding: 80px 20px; text-align: center; }
.estado-vazio-titulo {
  font-family: var(--font-hud);
  font-size: var(--t-display);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 3px;
  margin: 0 0 16px;
  background: linear-gradient(90deg, var(--purple-bright), var(--red-bright));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.estado-vazio-texto {
  font-family: var(--font-body);
  font-size: var(--t-corpo);
  color: var(--text-secondary);
  margin: 0;
}
/* Quando vem um formulario ou um botao depois do texto, o respiro sai daqui
   e nao de um margin-bottom chumbado no paragrafo. */
.estado-vazio-texto + * { margin-top: 28px; }
/* O 404 e a unica pagina em que o estado vazio E a pagina inteira, entao o
   titulo cresce. Os outros tres dividem a tela com cabecalho e sidebar. */
.estado-vazio.grande .estado-vazio-titulo { font-size: var(--t-display); letter-spacing: 4px; margin-bottom: 20px; }
.estado-vazio.grande .estado-vazio-texto + * { margin-top: 32px; }
.estado-vazio .header-search { display: inline-flex; max-width: 360px; width: 100%; }
.estado-vazio .header-search input { flex: 1; }

/* ══════════════════════════════════════════════════════════════════════
   AFILIADOS — um bloco por parceiro, cor da marca do parceiro.

   O hover vinha de onmouseover/onmouseout escritos no HTML, trocando
   style.background e style.borderColor na mao. Isso e JavaScript inline
   para fazer o que :hover faz sozinho, nao funciona com foco de teclado e
   quebra qualquer Content-Security-Policy.
   A cor do parceiro entra por --marca no proprio elemento, entao um
   parceiro novo e uma linha de HTML, sem CSS novo. */
.afiliado {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px;
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--marca) 20%, transparent);
  background: color-mix(in srgb, var(--marca) 6%, transparent);
  transition: background .2s ease, border-color .2s ease;
  /* Peca de ~300x70px: acima da faixa de controle mas longe de painel, mesma
     situacao do card de evento do calendario, que ficou em 6px. */
  border-radius: var(--raio-controle);
}
.afiliado:hover,
.afiliado:focus-visible {
  background: color-mix(in srgb, var(--marca) 12%, transparent);
  border-color: color-mix(in srgb, var(--marca) 45%, transparent);
}
.afiliado:focus-visible { outline: 2px solid var(--purple-bright); outline-offset: 2px; }
/* ══════════════════════════════════════════════════════════════════════
   --marca E PREENCHIMENTO, NUNCA TEXTO.

   Cor de marca e escolhida para ser fundo de logotipo, e nenhuma das tres
   sobrevive como tinta de texto no modo claro, sobre o card #ece9e2:

     Amazon        #FF9900   escuro  7,87:1   claro  1,77:1
     Shopee        #EE4D2D   escuro  4,60:1   claro  3,02:1
     Mercado Livre #FFE600   escuro 13,29:1   claro  1,05:1

   O auditor nunca viu isso porque --marca e definida inline no PHP, fora do
   CSS. E o mesmo problema do --red-bright virando face de botao, na direcao
   contraria — ali era texto virando preenchimento, aqui e preenchimento
   virando texto.

   A saida vale para qualquer parceiro futuro sem recalcular nada: a marca
   pinta fundo, borda e um filete, que sao usos de preenchimento e nao tem
   exigencia de 4,5:1. O texto usa a paleta do portal. */
.afiliado-nota {
  font-family: var(--font-hud);
  /* 9px ficava abaixo do piso do portal, que e 10px (o tamanho das datas). */
  font-size: var(--t-selo);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.5;
  color: var(--text-secondary);
}
.afiliado-nome {
  font-family: var(--font-hud);
  font-weight: 900;
  font-size: var(--t-corpo);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-primary);
  /* O filete e onde a marca aparece na cor dela, como preenchimento. */
  border-bottom: 2px solid var(--marca);
  padding-bottom: 5px;
}

.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Atalho para o conteudo: o header tem 110 links, e sem isso quem navega por
   teclado atravessa todos antes de chegar no primeiro post, em toda pagina.
   Fica invisivel ate receber foco. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  font-family: var(--font-hud);
  font-weight: 600;
  font-size: var(--t-rotulo);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-primary);
  background: var(--bg-card);
  border: 1px solid var(--purple-mid);
  padding: 12px 20px; border-radius: var(--raio-mini);
}
.skip-link:focus {
  left: 8px;
  top: 8px;
  outline: 2px solid var(--purple-bright);
  outline-offset: 2px;
}

@media (max-width: 480px) {
  .page-numbers { min-width: 34px; height: 34px; font-size: var(--t-rotulo); }
}

#site-footer { background: transparent; border-top: 1px solid var(--border); position: relative; z-index: 1; margin-top: 64px; }
.footer-inner { max-width: var(--largura-pagina); margin: 0 auto; padding: 32px 20px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
/* Assinatura completa no rodape: simbolo, nome e tagline.
   O header ficou so com o simbolo para liberar espaco ao menu; aqui nao ha
   disputa de largura, entao a marca aparece por extenso. Iceland e a fonte
   do logo e ja esta na fila do wp_enqueue_style. */
.footer-logo { display: flex; align-items: center; gap: 12px; }
.footer-logo-simbolo { width: 44px; height: 38px; display: block; flex-shrink: 0; }
.footer-logo-group { display: flex; flex-direction: column; gap: 3px; }
.footer-logo-text { font-family: 'Iceland', var(--font-hud), sans-serif; font-weight: 400; font-size: var(--t-secao); line-height: 1; letter-spacing: 5px; text-transform: uppercase; background: linear-gradient(90deg, var(--purple-bright), var(--red-bright)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.footer-logo-tagline { font-family: 'Iceland', var(--font-hud), sans-serif; font-size: var(--t-rotulo); letter-spacing: 3.4px; line-height: 1; text-transform: uppercase; color: var(--text-secondary); }
/* ── Páginas institucionais (page.php) ─────────────────────────────────── */
/* .page-atualizacao saiu junto com o markup que ela estilizava: a data de
   atualizacao ja vem escrita no proprio texto das paginas legais. */
/* Paginacao interna do wp_link_pages(), quando a pagina usa quebras. */
.page-links {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 24px; padding-top: 16px;
  border-top: 1px solid var(--border);
  font-family: var(--font-hud); font-size: var(--t-mini); letter-spacing: 1.5px;
  color: var(--text-secondary);
}
.page-links a { color: var(--text-secondary); text-decoration: underline; text-underline-offset: 3px; }
.page-links a:hover { color: var(--text-primary); }

/* ══════════════════════════════════════════════════════════════════════
   RODAPE — o fundo aqui e --bg-base, nao --bg-card.

   #site-footer tem background: transparent, entao o texto do rodape esta
   sobre a pagina, que e a superficie mais escura no escuro e a mais escura
   tambem no claro (#d0cabe, mais escura que o card). Medido sobre ela:

     --text-muted      escuro 5,52:1   claro 3,99:1   REPROVA no claro
     --text-secondary  escuro 7,40:1   claro 5,82:1   passa nos dois
     --red-bright      escuro 5,28:1   claro 3,94:1   REPROVA no claro

   .footer-copy usava --text-muted e estava no ar reprovando no modo claro.
   O auditor nao pegou porque ele infere o fundo por uma lista de padroes de
   seletor e .footer-* nao estava nela — a regra nao declara fundo proprio,
   entao era simplesmente pulada. A lista foi corrigida na ferramenta.

   E por isso que o link do rodape NAO e vermelho, apesar de vermelho ser a
   cor de destaque do portal: --red-bright nao fecha 4,5:1 sobre esta
   superficie no claro. O sublinhado marca que e link, e o hover sobe para
   --text-primary em vez de trocar de matiz.
   ══════════════════════════════════════════════════════════════════════ */
.footer-copy { font-family: var(--font-hud); font-size: var(--t-mini); letter-spacing: 2px; color: var(--text-secondary); text-align: center; text-transform: uppercase; }
.footer-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; }
/* Separador entre itens, pronto para quando houver mais de um link. */
/* --text-secondary e nao --text-muted: sobre --bg-base o muted da 3,99:1 no
   claro. O ponto e decorativo e nao teria exigencia formal, mas a 3,99 ele
   simplesmente nao aparece, que e o unico trabalho dele. */
.footer-links li + li::before { content: '·'; color: var(--text-secondary); margin-right: 20px; }
.footer-links a {
  font-family: var(--font-hud);
  font-size: var(--t-mini);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-secondary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color .18s ease;
}
.footer-links a:hover { color: var(--text-primary); }
.footer-links a:focus-visible { outline: 2px solid var(--purple-bright); outline-offset: 3px; border-radius: var(--raio-mini); }
.footer-hud-line { width: 100%; height: 1px; background: linear-gradient(90deg, transparent, var(--purple-mid), transparent); }

#mobile-nav { display: none; position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,0.8); backdrop-filter: blur(8px); }
#mobile-nav.open { display: flex; }
.mobile-nav-panel { background: var(--bg-surface); border-right: 1px solid var(--border); width: 280px; height: 100%; padding: 24px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; border-radius: var(--raio-painel); }
/* Sem "background: none" aqui: esta regra vem DEPOIS da familia de acao
   secundaria e apagava o relevo dela. O fundo agora vem de la. */
.mobile-close { border: 1px solid var(--border); border-radius: var(--raio-controle); padding: 10px; cursor: pointer; font-family: var(--font-hud); font-size: var(--t-corpo); margin-bottom: 16px; align-self: flex-end; }
/* Fechar continua sendo a unica das tres que reage em vermelho: e a acao
   que desfaz. Troca so a cor, o relevo e a aresta seguem da familia. */
.mobile-close:hover { border-color: var(--red-mid); color: var(--red-bright); box-shadow: 0 var(--prof) 0 color-mix(in srgb, #000 42%, var(--face)), 0 0 10px color-mix(in srgb, var(--red-mid) 30%, transparent); }


.hud-dots { display: flex; align-items: center; gap: 4px; }
.hud-dots span { width: 3px; height: 3px; background: var(--purple-mid); display: inline-block; }
.hud-dots span:nth-child(2) { background: var(--red-mid); opacity: 0.7; }
.hud-dots span:nth-child(3) { opacity: 0.4; }



/* LED DE STANDBY
   Fica na moldura de baixo a direita, onde fica numa TV. Pisca enquanto a
   pagina carrega e apaga quando termina. Diferente da barra que substituiu,
   esta ligado ao estado real: quem apaga o LED e o evento de load. */
.tv-led {
  position: fixed;
  /* Canto esquerdo: o selo do reCAPTCHA ocupa o inferior direito e os dois
     se sobrepunham. Continua sendo moldura, continua lendo como LED. */
  left: 18px;
  bottom: 16px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  z-index: 70;
  pointer-events: none;
  background: var(--led-off);
  box-shadow: 0 0 0 1px rgba(255,255,255,.05);
  transition: background-color .4s ease, box-shadow .4s ease;
}
html.carregando .tv-led {
  background: var(--red-bright);
  box-shadow: 0 0 12px 2px color-mix(in srgb, var(--red-bright) 75%, transparent), 0 0 0 1px rgba(255,255,255,.06);
  animation: led-pisca 1s ease-in-out infinite;
}
@keyframes led-pisca { 0%, 100% { opacity: 1; } 50% { opacity: .28; } }

/* SKELETON DAS IMAGENS
   A pagina e renderizada no servidor, entao o texto ja chega pronto: o unico
   conteudo que realmente demora e a imagem. O brilho corre so enquanto ela
   nao carregou, e para assim que a classe .carregada entra.
   Anima transform, que roda no compositor, e nao background-position, que
   forcaria repintura em cada card da grade. */
.post-thumb::before,
.post-full-thumb-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.07) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: skeleton 1.6s ease-in-out infinite;
}
.post-thumb.carregada::before,
.post-full-thumb-wrap.carregada::before { display: none; }
@keyframes skeleton { to { transform: translateX(100%); } }

.post-thumb img,
.post-full-thumb-wrap img { opacity: 0; transition: opacity .35s ease; }
.post-thumb.carregada img,
.post-full-thumb-wrap.carregada img { opacity: 1; }

/* Sem movimento para quem pediu menos movimento: LED aceso fixo, sem brilho
   correndo, e a imagem aparece sem transicao. */
@media (prefers-reduced-motion: reduce) {
  html.carregando .tv-led { animation: none; }
  .post-thumb::before, .post-full-thumb-wrap::before { animation: none; opacity: .35; }
  .post-thumb img, .post-full-thumb-wrap img { opacity: 1; transition: none; }
}

/* AD LEADERBOARD */
/* Sem fundo nem borda propria: a faixa deixa de ser um bloco separado do
   site. O rotulo "Publicidade" continua sendo o que identifica a area como
   anuncio, e por isso nao sai. */
/* A reserva de altura acompanha a peca que o PHP escolheu (--ad-h, definida
   no header). Era 110px fixos, o que sobrava 60px de buraco em volta do
   320x50 do mobile. Reservar a altura certa evita os dois defeitos: o salto
   de layout quando o anuncio chega e o vazio quando ele e menor que a caixa.
   Os 20px eram o rotulo "Publicidade" mais folga; com o rotulo fora, sobrou
   so a folga, e por isso caiu para 8px. O padding de 52px no topo continua:
   ele nao tem nada a ver com o rotulo, e o vao do cabecalho fixo. */
.ad-leaderboard { background: transparent; position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; padding: 52px 20px 10px; min-height: calc(var(--ad-h, 90px) + 8px); overflow: hidden; max-width: 100%; border-radius: var(--raio-painel); }
.ad-leaderboard .ad-wrap { position: relative; display: flex; flex-direction: column; align-items: center; max-width: 100%; overflow: hidden; }
/* .ad-leaderboard .ad-label saiu junto com o <span> que ela estilizava. */

@media (max-width: 1100px) {
  .site-wrapper { grid-template-columns: minmax(0, 1fr); }
  #sidebar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Empilhado, o destaque vira um cartucho comum, so que maior.
     GRID e nao flex: o destaque deixou de ser flex-direction: row quando
     virou grid de duas colunas, e "flex-direction: column" aqui nao fazia
     efeito nenhum — ele continuaria lado a lado no tablet. */
}

@media (max-width: 680px) {
  .posts-masonry { column-count: 1; }
  /* O raio NAO muda no mobile. Ele mudava porque era 16 e precisava encolher
     junto com a peca; a 8px ja esta no piso de uma silhueta que precisa ler
     como plastico, e reduzir mais devolveria canto vivo. So a folga encolhe. */
  .post-card { --aba: 26px; --mg-cart: 8px; }
  .site-nav, .header-search { display: none; }
  .menu-toggle { display: flex; align-items: center; }
  /* A regra que escondia as duas listras aqui saiu junto com elas. Ela ja
     era o segundo sinal de que o ornamento nao servia: no celular ele
     passava por cima do icone do menu e precisava ser desligado. */
  .header-inner { height: 56px; }
  #sidebar { grid-template-columns: minmax(0, 1fr); }
  /* min-height sai daqui: quem define a reserva agora e --ad-h, que ja vem
     com o tamanho real da peca. Zerar aqui devolveria o salto de layout. */
  .ad-leaderboard { padding: 26px 8px 8px; }
  .cal-nav { flex-basis: 100%; justify-content: center; }
}


/* ══════════════════════════════════════════════════════════════════════
   HOME EM FAIXAS

   Vale so para a home. As demais paginas seguem no .site-wrapper, que e a
   grade de conteudo mais sidebar; quem quiser entender aquela estrutura
   deve olhar o bloco do .site-wrapper la em cima, nao este.

   A explicacao da mecanica — por que as faixas, por que a terceira
   inverte, por que o cartucho saiu do feed — esta no index.php, junto do
   markup. Aqui ficam so as medidas.
   ══════════════════════════════════════════════════════════════════════ */

     abaixo tem SO o que e novo: a mecanica das faixas. -->
<link rel="stylesheet" href="xtamina-theme/style.css">

<style>
/* ══════════════════════════════════════════════════════════════════════
   FAIXAS — o que muda na home

   Hoje a home e UM .site-wrapper: uma grade de conteudo + sidebar que
   atravessa a pagina inteira, do primeiro post ao rodape. O ritmo e
   constante porque a grade e constante.

   Aqui a pagina vira uma pilha de FAIXAS de largura total. Cada faixa tem
   a propria divisao interna, e a divisao TROCA DE LADO. Medido na
   referencia: o peso vem a esquerda, a faixa do feed inverte, e as
   seguintes voltam. E a inversao que o olho le como ritmo — nao tamanho
   de card variavel, nao masonry.

   A largura externa continua sendo --largura-pagina, o mesmo token do
   header e do rodape. As faixas nao escapam da coluna; elas se dividem
   por dentro dela. */
.faixa { width: 100%; }
.faixa-inner {
  max-width: var(--largura-pagina);
  margin: 0 auto;
  padding: 36px 20px;
}

/* A DIVISAO E UM TOKEN, nao um numero escrito em cada faixa.
   Assim inverter uma faixa e trocar --split, e nao reescrever a grade. */
.faixa-dupla {
  display: grid;
  grid-template-columns: var(--split);
  gap: 28px;
  align-items: start;
}
/* A COLUNA DO POPULARES TEM LARGURA DE PROJETO, nao fracao livre.
   Com 0,75fr ela chegava a 474px numa tela larga, e o widget foi desenhado
   para a sidebar, que vai de 320 a 420. A imagem do primeiro item tem 420px
   de largura real: passar disso so estica bitmap. O teto de 420 e o mesmo
   da sidebar, entao a peca nunca sai da faixa para a qual foi feita. */
.faixa-hero     { --split: minmax(0, 1fr) minmax(320px, 420px); }
/* O widget tem altura propria e nao deve esticar para acompanhar a coluna
   da esquerda: sem isso o ultimo item ganharia vao no pe, que e exatamente
   o defeito que o destaque acabou de perder. */
/* Vale para toda coluna estreita de faixa, nao so a do destaque: widget
   tem altura propria, e esticar para acompanhar a coluna vizinha abre vao
   no pe do ultimo item. */
.faixa-dupla > .widget,
.faixa-dupla > .coluna-pilha,
.faixa-dupla > aside { align-self: start; }

/* ── PILHA DE WIDGETS ──────────────────────────────────────────────
   A sidebar nao sumiu do projeto: ela mudou de endereco. O que era a
   coluna lateral da pagina inteira virou a coluna estreita de UMA faixa,
   com os mesmos widgets, na mesma ordem de sidebar.php e com o mesmo vao
   de 24px que #sidebar ja usava.

   Isso resolve o que estava em aberto desde a primeira prova: os dois
   blocos de 300x250 voltam a ter endereco, e com a mesma separacao de
   antes — um no alto da pilha, outro no fim. Anuncio colado em anuncio
   rende menos e a rede reclama. */
.coluna-pilha { display: flex; flex-direction: column; gap: 24px; }
.faixa-feed     { --split: minmax(320px, 420px) minmax(0, 1fr); }  /* INVERTIDA */

/* O fundo proprio de faixa saiu junto com a Arena. A tarja das ultimas
   continua com o dela, e agora e o unico corte horizontal da pagina — o
   que e melhor assim: com tres faixas, dois fundos virariam listra. */

/* ── TARJA DE ULTIMAS ──────────────────────────────────────────────
   Faixa de 4 manchetes sem imagem. Existe para dar DENSIDADE sem gastar
   altura: quatro noticias em 78px. E tambem o respiro entre o destaque e
   o feed — sem ela, dois blocos pesados se encostam. */
.tarja { background: var(--bg-surface); border-block: 1px solid var(--border); }
.tarja-inner {
  max-width: var(--largura-pagina); margin: 0 auto; padding: 0 20px;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: stretch;
}
.tarja-rotulo {
  display: flex; align-items: center; gap: 8px; padding: 14px 18px 14px 0;
  /* 1.5px e nao 1.6: o 1.6 que estava aqui era o unico do arquivo inteiro,
     contra 22 ocorrencias de 1.5px. E o peso 700 dos outros rotulos HUD. */
  font-family: var(--font-hud); font-weight: 700; font-size: var(--t-meta); letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--purple-bright); white-space: nowrap;
}

/* O RODIZIO E UMA JANELA SOBRE UM TRILHO.
   Sao sete manchetes, uma por genero, e a janela mostra quatro. O trilho
   anda UM item por vez; quando a animacao termina, o primeiro item e
   movido para o fim e o trilho volta a zero sem transicao. Assim o giro e
   sempre para a frente e nao existe salto de volta ao comeco.
   Sem clone: item duplicado e link duplicado, que leitor de tela anuncia
   duas vezes e buscador conta como repeticao. */
.tarja-janela { overflow: hidden; }
.tarja-trilho { display: flex; will-change: transform; }
.tarja-item {
  flex: 0 0 25%; min-width: 0;
  padding: 14px 16px; border-left: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 5px; text-decoration: none;
  transition: background .15s ease;
}
.tarja-item:hover { background: var(--bg-card); }
/* A linha de cima da tarja carrega a mesma dupla do chapeu do card: a
   badge do genero e a hora discreta. */
.tarja-hora {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-hud); font-weight: 700; font-size: var(--t-selo); letter-spacing: 1.4px;
  text-transform: uppercase;
}
/* A badge da tarja nao precisa de ajuste de fundo: a face dela sai da cor
   do topico escurecida, nao de uma mistura com o fundo, entao ela fica
   igual em qualquer superficie. Foi o que a face opaca resolveu de quebra. */
.tarja-titulo {
  font-size: var(--t-rotulo); line-height: 1.35; color: var(--text-primary);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tarja-item:hover .tarja-titulo { color: var(--purple-bright); }

/* CONTROLE DE PAUSA — nao e enfeite, e requisito.
   A WCAG 2.2.2 exige um jeito de parar conteudo que se move sozinho por
   mais de cinco segundos. O rodizio tambem para sob o mouse e sob o foco
   do teclado, mas nenhum dos dois serve como o mecanismo que a norma
   pede: os dois exigem manter a mao ou o foco ali. */
.tarja-pausa {
  display: flex; align-items: center; justify-content: center;
  width: 36px; padding: 0; background: none; border: 0;
  border-left: 1px solid var(--border);
  color: var(--text-muted); cursor: pointer;
}
.tarja-pausa:hover { color: var(--text-primary); background: var(--bg-card); }
.tarja-pausa:focus-visible { outline: 2px solid var(--purple-bright); outline-offset: -2px; }
/* Duas barras enquanto gira (a acao e pausar); um triangulo quando parado
   (a acao e retomar). O icone mostra o que o botao FAZ, nao o estado. */
.tarja-pausa-icone { width: 10px; height: 11px; background: currentColor;
  clip-path: polygon(0 0, 3.5px 0, 3.5px 11px, 0 11px, 0 0,
                     6.5px 0, 10px 0, 10px 11px, 6.5px 11px); }
.tarja-pausa[aria-pressed="true"] .tarja-pausa-icone {
  clip-path: polygon(0 0, 10px 50%, 0 100%); }

/* ── DESTAQUE ──────────────────────────────────────────────────────
   O VAO FOI RESOLVIDO NA ESTRUTURA, e nao com alinhamento.
   O destaque de duas colunas saiu do tema porque a imagem tinha proporcao
   fixa e mandava na altura, enquanto o texto ao lado era variavel e mais
   curto: media 111px de plastico vazio. A referencia repete o defeito —
   medi cerca de 200px de vao no cartucho grande dela.
   Aqui a imagem NAO fica ao lado do texto: ela fica ATRAS dele. Com o
   texto por cima, nao existe segunda coluna para sobrar altura. */
.hero { position: relative; overflow: hidden; border-radius: var(--raio-painel);
        border: 1px solid var(--border); min-height: 420px; display: flex; }
.hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-veu {
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    color-mix(in srgb, var(--bg-base) 96%, transparent) 0%,
    color-mix(in srgb, var(--bg-base) 82%, transparent) 42%,
    color-mix(in srgb, var(--bg-base) 18%, transparent) 100%);
}
.hero-texto { position: relative; margin-top: auto; padding: 28px; max-width: 640px; }
.hero-titulo {
  /* 32px, peso 700, .5px: os mesmos valores de .post-full-title. O hero e
     o maior titulo da home, mesmo papel que o h1 do post. Estava em 34px,
     um tamanho que nao existe em lugar nenhum do tema. */
  font-family: var(--font-hud); font-weight: 700; font-size: var(--t-artigo); line-height: 1.12;
  letter-spacing: .5px; color: var(--text-primary); margin: 10px 0 12px;
}
.hero-titulo a { color: inherit; }
.hero-titulo a:hover { color: var(--purple-bright); }
.hero-resumo { font-size: var(--t-rotulo); line-height: 1.6; color: var(--text-secondary); margin-bottom: 16px; }
.hero-pe { display: flex; align-items: center; gap: 14px; }

/* ── DESTAQUES SECUNDARIOS ─────────────────────────────────────────
   Tres pecas sob o destaque, na mesma coluna.

   NAO E UM COMPONENTE NOVO: sao os mesmos .mini da grade do feed. Um card
   compacto que ja existe, reaproveitado noutro lugar, vale mais do que um
   quarto desenho de card na mesma pagina — cada anatomia nova cobra
   manutencao para sempre.

   O que muda e so a moldura da fileira. O .mini traz um fio embaixo, que
   na grade do feed separa uma linha da outra; aqui nao ha linha seguinte, e
   o fio ficaria sublinhando o nada. Entao ele sai, e o fio vai para CIMA da
   fileira, onde tem trabalho: separar os secundarios do destaque principal.

   Tres e o numero que a coluna comporta. Com a coluna util em torno de
   1000px cada um fica perto de 320, que e onde o titulo do HUD ainda cabe
   em duas linhas. Com dois eles iriam a ~490 e competiriam com o destaque;
   com quatro, a ~235, e o titulo quebraria em quatro linhas. */
.destaques-sec {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}
.destaques-sec .mini { border-bottom: 0; padding-bottom: 0; }
/* O SECUNDARIO E MENOR QUE O DO FEED, e agora a conta fecha.
   Ele esta ABAIXO do destaque, e dois titulos do mesmo peso na mesma
   coluna disputariam a primeira leitura. O card tambem e menor de fato:
   329px contra os 505 do feed, porque sao tres numa fileira.

   O par 16/12 nao foi escolhido no olho. Com o titulo do feed em 20, os
   niveis disponiveis abaixo dele sao 16 e 14 — e 16/14 devolveria a razao
   de 1,14 que acabou de ser corrigida. Levando o resumo a 12, a razao vai
   a 1,33, acima do limiar, e os dois numeros seguem sendo degraus que ja
   existem na escala. Inventar um 17 ou um 13 aqui seria criar degrau novo
   para resolver um problema que a escala ja resolve. */
.destaques-sec .mini-titulo { font-size: var(--t-corpo); }
.destaques-sec .mini-resumo { font-size: var(--t-mini); }

/* ── POPULARES ─────────────────────────────────────────────────────
   NAO HA CSS AQUI, e esse e o ponto.

   Este lugar tinha uma lista numerada propria, inventada a partir da
   referencia. Ela saiu: o widget Populares que ja existe na sidebar entra
   inteiro, com a mesma marcacao de sidebar.php. Ele deixa de ser widget de
   coluna lateral e vira a coluna estreita desta faixa — mesma peca, mesmo
   codigo, mais espaco.

   Isso funciona porque o widget nao depende do ancestral. Das regras do
   tema, so tres estao ancoradas em #sidebar, e as tres governam o
   empilhamento da coluna, nao o miolo da peca. Conferido antes de mover.

   O par de rotulos que a Arena usava saiu com ela. */

/* ── CARD COMPACTO ─────────────────────────────────────────────────
   Miniatura em cima, chapeu, titulo, resumo. UMA anatomia de card para a
   home inteira: ela serve os tres destaques secundarios e as dez noticias
   do feed, mudando so o tamanho do titulo.

   O cartucho saiu do feed a pedido, e com ele a silhueta sumiu da home.
   Ele segue nas paginas de tag, categoria e busca. */
.feed-grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 22px;
}
/* ── CHAPEU: UMA BADGE E UMA DATA ──────────────────────────────────
   O genero e uma tag e precisa parecer uma tecla, entao ele nao tem
   estilo proprio: recebe .post-tag-pill e herda a familia de acao inteira
   — gradiente com a quina desvanecendo, aresta projetada, hover que
   levanta, clique que afunda. So a face, a cor do texto e o tamanho sao
   sobrescritos.

   A FACE E A COR CRUA DO TOPICO, E O TEXTO E QUE INVERTE.

   Antes daqui passaram tres tentativas, e o erro em todas foi o mesmo:
   tratar a face como coadjuvante e a cor como detalhe.

   1. Face tingida a 24% com texto colorido: a banda de luz da familia
      clareia o topo justamente onde o texto comeca — 3,42 no Battle
      Royale.
   2. Banda enfraquecida para #fff 4%: o texto passa, mas a banda fica a
      1,13 da face. Relevo que nao se ve nao e relevo.
   3. Face escurecida 55% com texto branco: o texto passa (4,65), mas a
      face fica de 1,75 a 3,09 contra o fundo no escuro, contra os 3,07 da
      pastilha vermelha do tema. Escura demais, some no fundo. Foi para
      tapar isso que entrou uma borda na cor crua — e borda mais clara que
      a face le como EMISSAO, nao como peca moldada. A peca parecia acesa
      sem ninguem ter tocado nela. O .post-tag-pill do tema tem
      border: none exatamente por isso.

   O que faltava era inverter a pergunta. A face nao precisa se adaptar ao
   texto: o TEXTO e que se adapta a face. As sete cores foram calibradas
   como preenchimento, entao elas entram cruas, e quem muda de lado e a
   tinta em cima.

     escuro  as cores do topico sao claras -> texto escuro
     claro   as cores do topico sao escuras -> texto branco

   Medido nos sete topicos, com a banda de #fff 13% da familia por cima:

                    texto/banda   texto/face   face/fundo
       escuro           5,92         4,90         5,30
       claro            4,93         6,64         4,07

   Sem borda nenhuma, a face sozinha da 5,30 contra o fundo no escuro —
   quase o dobro dos 3,07 da pastilha vermelha. O contorno nao era
   necessario; era remendo de uma face escura demais.

   A DATA e referencia: serve depois, para situar. Fica no tom do subtitulo
   do widget Agenda e e so isso que precisa ser. */
/* ── A GEOMETRIA E COMPARTILHADA; A FACE, NAO ──────────────────────
   As pastilhas do destaque e as badges do resto da home tinham CINCO
   diferencas de medida: 11px contra 10, entreletra 1,6 contra 1,4,
   entrelinha 1,4 contra 1,2, recuo 4/11/5 contra 2/9/3 e aresta de 3px
   contra 2. A familia sempre foi a mesma, var(--font-hud); o que fazia
   parecer outra fonte era a soma dessas cinco.

   A medida mora aqui, escrita UMA vez. Repetida nos dois seletores ela
   voltaria a divergir na proxima mexida — foi assim que as cinco
   apareceram: o hero reaproveitou a fileira de tags do cartucho, e o
   chapeu com badge foi desenhado depois, para os cards.

   ALTURA: 17px de caixa, 19 com a aresta projetada.
   Medido no modo escuro, a badge NAO ganha do titulo por contraste — o
   titulo da 15,87 contra o fundo e ela da 5,53. Ela ganha por saturacao
   (74% contra 9%) e por area CHEIA: um bloco inteiramente pintado pesa
   mais que letra, mesmo com menos contraste. Dessaturar nao serve, a 85%
   de mistura a saturacao so cai para 56% e o texto ja despenca para 3,93.
   Entao o que sobra e area.
     line-height 1.2 e nao 1.4: o 1.4 vem da regra generica de
     .post-tag-pill, calibrada para 13px. Em 10px maiusculo, sem
     descendentes, 1.2 basta.
     Recuo 2/3 e o piso: abaixo disso a aresta interna de 2px do proprio
     .post-tag-pill encosta nos glifos.
     Aresta de 2px e nao 3: ela e proporcional a peca. */
.mini-genero,
.hero-texto .post-tag-pill {
  --prof: 2px;
  font-size: var(--t-selo);
  letter-spacing: 1.4px;
  line-height: 1.2;
  padding: 2px 9px 3px;
  border-radius: 999px;
}

/* A FACE E QUE SEPARA OS DOIS, e e a unica divergencia de proposito.
   No destaque a pastilha cai SOBRE a imagem, e face saturada em cima de
   foto disputa com ela — la fica a face neutra que o .post-tag-pill ja
   traz. No resto da home ela e o sinal de genero e leva a cor do topico. */
.mini-genero {
  --face: var(--g-topico);
  /* 82% de preto sobre a propria cor do topico, e nao um cinza fixo: a
     tinta fica na familia do matiz e a badge continua lendo como uma peca
     so, em vez de rotulo preto colado numa face colorida. */
  color: color-mix(in srgb, #000 82%, var(--g-topico));
}
/* No claro as cores do topico ja sao escuras, entao a tinta volta a ser a
   mesma dos outros botoes do portal. */
html[data-tema="claro"] .mini-genero { color: var(--text-on-brand); }

/* O chapeu deixa de ser uma linha de texto e passa a alinhar duas pecas de
   alturas diferentes. */
.mini-chapeu { display: flex; align-items: center; gap: 10px; }
.mini-data { color: var(--text-secondary); }

.mini { display: flex; flex-direction: column; gap: 10px; text-decoration: none;
        border-bottom: 1px solid var(--border); padding-bottom: 18px; }
.mini-thumb { aspect-ratio: 16 / 9; border-radius: var(--raio-controle); overflow: hidden;
              background: var(--bg-surface); }
.mini-thumb img { width: 100%; height: 100%; object-fit: cover; display: block;
                  transition: transform .3s ease; }
.mini:hover .mini-thumb img { transform: scale(1.04); }
/* 10px, 700, 1.4px, caixa alta: copia exata de .sidebar-post-genero, que
   e a peca equivalente no tema. Faltava o peso, entao o chapeu saia em
   regular onde o portal inteiro usa bold. */
.mini-chapeu { font-family: var(--font-hud); font-weight: 700; font-size: var(--t-selo);
               letter-spacing: 1.4px; text-transform: uppercase; }
/* Peso 600 e espacamento de .5px, como .post-title. Estava em 700 sem
   espacamento: mesma familia, mas mais pesado e mais apertado que todo
   titulo do portal — e era isso que fazia o card parecer de outro site. */
/* 20px, IGUAL AO .post-title, e pelo mesmo motivo que esta escrito la:
   "com 17 a razao para o resumo de 14px era 1,21, abaixo do ~1,25 em que o
   olho le outro nivel". Eu tinha posto 16 aqui, o que da 1,14 — abaixo do
   limiar que o proprio tema estabeleceu, e por isso o titulo nao lia como
   titulo, lia como resumo em negrito.

   Nao ha motivo para os dois diferirem: MEDIDOS, o card do cartucho na
   pagina de tag tem 504px e este tem 505px. Mesma largura, mesmo papel,
   mesmo tamanho. A 20px a razao vai a 1,43, igual a do cartucho. */
.mini-titulo { font-family: var(--font-hud); font-weight: 600; font-size: var(--t-titulo); line-height: 1.25;
               letter-spacing: .5px; color: var(--text-primary); }
.mini:hover .mini-titulo { color: var(--purple-bright); }
/* 14px, como .post-excerpt. 13px era mais um degrau de 1px inventado. */
.mini-resumo { font-size: var(--t-rotulo); line-height: 1.5; color: var(--text-secondary); }

/* A faixa ARENA e a de CULTURA sairam da home, e o CSS delas saiu junto.
   Regra de secao que nao existe mais e a proxima armadilha de quem for
   procurar por que um seletor nao faz nada. */

/* ── AGENDA ────────────────────────────────────────────────────────
   Tambem sem CSS proprio, pelo mesmo motivo do Populares: entra o widget
   que ja existe, com a marcacao de sidebar.php. A lista de data e evento
   que eu tinha desenhado aqui foi apagada — era um terceiro jeito de
   listar evento num portal que ja tem dois (o widget e o calendario). */

/* ── MOBILE ────────────────────────────────────────────────────────
   Toda faixa dupla vira coluna unica, como na referencia. A tarja vira
   lista. A ordem de leitura segue a do HTML, entao a faixa invertida NAO
   precisa de order: no empilhado, "invertida" nao quer dizer nada. */
@media (max-width: 1100px) {
  .faixa-dupla { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .tarja-inner { grid-template-columns: minmax(0, 1fr); }
  .tarja-rotulo { padding: 14px 0 8px; }
  /* EMPILHADA, O RODIZIO NAO EXISTE: cabem as sete de uma vez, e girar
     conteudo que ja esta todo visivel so atrapalha. O trilho vira coluna,
     o transform e anulado e o botao de pausa some com ele. */
  .tarja-janela { overflow: visible; }
  .tarja-trilho { flex-direction: column; transform: none !important; }
  .tarja-item { flex-basis: auto; border-left: 0; border-top: 1px solid var(--border); padding: 12px 0; }
  .tarja-pausa { display: none; }
}
@media (max-width: 900px) {
  /* Tres viram dois antes de virar um: a 900px a coluna ainda comporta
     dois, e passar direto de tres para um desperdicaria largura. */
  .destaques-sec { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .feed-grade { grid-template-columns: minmax(0, 1fr); }
  .destaques-sec { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .destaques-sec .mini { border-bottom: 1px solid var(--border); padding-bottom: 18px; }
  .destaques-sec .mini:last-child { border-bottom: 0; padding-bottom: 0; }
  .hero-titulo { font-size: var(--t-secao); }
  .hero { min-height: 320px; }
  .faixa-inner { padding: 26px 20px; }
}

/* ── A GRADE VAZIA DO CARD SEM IMAGEM ──────────────────────────────
   Na prova todo post tinha miniatura. No portal nao: xtamina_get_thumb()
   devolve vazio quando o post nao tem destacada nem imagem no corpo, e
   ai o card colapsa e desalinha a linha inteira da grade de duas
   colunas. O bloco vazio segura a altura. */
.mini-thumb-vazia {
  background:
    repeating-linear-gradient(135deg,
      var(--bg-surface) 0 6px,
      color-mix(in srgb, #fff 3%, var(--bg-surface)) 6px 12px);
}
html[data-tema="claro"] .mini-thumb-vazia {
  background:
    repeating-linear-gradient(135deg,
      var(--bg-surface) 0 6px,
      color-mix(in srgb, #000 4%, var(--bg-surface)) 6px 12px);
}

/* ── O RECUO DA FAIXA NO CELULAR ───────────────────────────────────
   O body do tema ja traz 20px de calha. A faixa soma os seus 20, e no
   celular isso vira 40px de margem numa tela de 360. Aqui ela zera o
   recuo lateral e deixa a calha do body trabalhar sozinha. */
@media (max-width: 680px) {
  .faixa-inner { padding-left: 0; padding-right: 0; }
  .tarja-inner { padding-left: 0; padding-right: 0; }
}


/* ══════════════════════════════════════════════════════════════════════
   CABECALHO DA PAGINA DE ARQUIVO

   Vale para /tag/, /category/ e arquivos por data. A home NAO usa nada
   disto, e e de proposito: as duas superficies respondem perguntas
   diferentes. A home pergunta o que aconteceu; o arquivo pergunta o que
   existe sobre um assunto que a pessoa ja escolheu.

   E por isso que o CARTUCHO ficou aqui quando saiu da home. Ele deixou de
   ser resquicio e virou a assinatura das paginas de colecao — junto com a
   sidebar, que na home se dissolveu em faixas.
   ══════════════════════════════════════════════════════════════════════ */


/* ══ A FILEIRA DE JOGOS DO GENERO ═════════════════════════════════════
   Navegacao DENTRO de um assunto, que a home nao tem e nao deve ter: na
   home a pessoa procura o que aconteceu; aqui ela ja escolheu o tema e
   quer estreitar. A lista sai de xtamina_menu(), que ja carrega os jogos
   de cada genero — nenhum dado novo precisa ser inventado.

   ISTO ERA UMA FILEIRA DE CHIPS DE TEXTO (.arq-jogos / .arq-jogo). Os
   chips funcionavam e eram baratos, mas eram a parte mais seca de uma
   pagina de portal de games, num site que fala em cartucho e HUD no resto
   inteiro. A capa resolve isso sem inventar linguagem nova: e a mesma do
   .hero da home — imagem ao fundo, veu, rotulo por cima. */

/* A CAPA.
   Proporcao 3/2 porque a imagem vem da thumb do post (500x334), nao de
   capa de caixa em retrato: forcar retrato recortaria toda imagem que o
   portal tem. De onde vem a imagem, e por que ela nao e curada a mao,
   esta em xtamina_jogos_do_genero(). */
.cap {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 3 / 2; text-decoration: none;
  border: 1px solid var(--border); border-radius: var(--raio-mini);
  transition: border-color .18s ease;
}
.cap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cap-veu {
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    color-mix(in srgb, var(--bg-base) 94%, transparent) 0%,
    color-mix(in srgb, var(--bg-base) 58%, transparent) 48%,
    color-mix(in srgb, var(--bg-base) 6%, transparent) 100%);
}
.cap-nome {
  position: absolute; left: 10px; right: 10px; bottom: 8px;
  font-family: var(--font-hud); font-weight: 600; font-size: var(--t-mini);
  letter-spacing: 1px; text-transform: uppercase; color: var(--text-primary);
  line-height: 1.2;
}
.cap:hover, .cap:focus-visible { border-color: var(--g-topico, var(--purple-bright)); }

/* SEM ARTE NAO E BURACO, e a cor do genero. Acontece quando o post mais
   recente do jogo nao tem imagem nenhuma — raro, mas o card nao pode
   quebrar a fileira por causa disso. O veu nao entra aqui: nao ha imagem
   para escurecer, e escurecer o proprio fundo so apagaria o nome. */
.cap-sem-arte {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--g-topico, var(--purple-bright)) 26%, var(--bg-surface)),
    var(--bg-surface));
}

/* O TRILHO, E A ULTIMA CAPA CORTADA DE PROPOSITO.
   O corte avisa que ha mais para o lado, e avisa melhor que um degrade na
   borda porque o pedaco visivel e conteudo, nao efeito.

   A largura da capa sai de conta, nao de gosto. Numa pista de largura W,
   com N capas inteiras, N vaos G e uma espiada P, cada capa mede
   (W - P - N*G) / N — e entao a capa N+1 aparece com exatos P pixels, em
   qualquer largura de tela, porque a conta e toda em porcentagem. Na
   coluna de 1028px do desktop, com N=4 e P=34: capa de 238,5px, a quinta
   comecando em 994 e a coluna terminando em 1028.

   N=4 E NAO 5 POR UM MOTIVO MEDIDO: FGC e o maior genero do menu e tem
   cinco jogos. Com N=5 a espiada nunca apareceria no caso mais comum, e a
   afordancia seria codigo morto justo onde precisa trabalhar. Com N=4 ela
   aparece de verdade e a capa ainda cresce de 188 para 238px.

   Quando nao ha o que esconder a espiada zera, senao sobraria um vao morto
   de 34px na direita de uma fileira completa. Quem decide e o JS do
   archive.php, que CONTA itens em vez de medir largura. */
.capas-trilho {
  --itens:   4;
  --vao:     10px;
  --espiada: 34px;
  display: flex; gap: var(--vao); overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* A BARRA DE ROLAGEM NAO APARECE, e aqui esconder nao custa afordancia.
     Esconder barra normalmente e erro: ela e o unico aviso de que ha mais
     conteudo. Neste trilho o aviso ja existe em dobro e melhor — a capa
     cortada e as setas — entao a barra so repetia o recado num desenho
     que o sistema operacional escolhe e o tema nao controla, quebrando a
     HUD. O padding de baixo sai junto: ele so existia para a barra. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.capas-trilho::-webkit-scrollbar { display: none; }
.capas-trilho .cap {
  flex: 0 0 calc((100% - var(--espiada) - var(--vao) * var(--itens)) / var(--itens));
  scroll-snap-align: start;
}
.trilho-caixa[data-transbordo="nao"] .capas-trilho { --espiada: 0px; }

.trilho-caixa { position: relative; margin: 14px 0 22px; }

.trilho-seta {
  position: absolute; top: 50%; transform: translateY(-50%);
  display: none; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; cursor: pointer;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--bg-surface); color: var(--text-primary);
  font-family: var(--font-hud); line-height: 1;
  transition: border-color .18s ease, background-color .18s ease;
}
.trilho-caixa[data-transbordo="sim"] .trilho-seta { display: flex; }
.trilho-seta:hover { border-color: var(--g-topico, var(--purple-bright)); background: var(--bg-card); }
.trilho-seta[disabled] { opacity: .3; cursor: default; }
.trilho-ant  { left: -6px; }
.trilho-prox { right: -6px; }

/* A pausa reaproveita o rodizio da home, inclusive o icone em clip-path
   de .tarja-pausa-icone, que vira um play quando aria-pressed e true.
   Dois controles de pausa com desenhos diferentes seriam duas coisas
   para a pessoa aprender. */
.trilho-pausa {
  position: absolute; right: 0; bottom: -18px;
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 20px; padding: 0; cursor: pointer;
  background: none; border: 0; color: var(--text-muted);
}
.trilho-pausa:hover { color: var(--text-primary); }

/* Menos capas inteiras conforme a tela encolhe. So --itens muda: a conta
   da largura e da espiada continua a mesma. */
@media (max-width: 760px) { .capas-trilho { --itens: 3; } }
@media (max-width: 560px) {
  .capas-trilho { --itens: 2; --espiada: 28px; }
  /* No toque a seta nao serve para nada: o dedo ja arrasta. */
  .trilho-caixa[data-transbordo="sim"] .trilho-seta { display: none; }
}

.aligncenter { display: block; margin: 0 auto; }
.alignleft { float: left; margin: 0 16px 16px 0; }
.alignright { float: right; margin: 0 0 16px 16px; }

/* ══ CELULAR: A HOME DEIXA DE COBRAR ROLAGEM PELO QUE A NAVEGACAO JA DA ══
   Origem: reclamacao de dois usuarios sobre a experiencia no celular.
   Medido em 375x812 com a v6.18.1 no ar, e registrado em
   Auditorias/auditoria-mobile-2026-09-24.md (E12 e E15).

   O PROBLEMA ERA ESTRUTURAL E O DESKTOP O ESCONDIA. As pilhas de widget
   sao COLUNA ao lado do feed em tela larga, e ali nao custam nada. No
   celular a coluna vira empilhamento, e a ordem do DOM — irrelevante no
   desktop — passa a ser ordem de LEITURA. Resultado medido: o primeiro
   post do feed comecava a 4647px do topo, ou 5,7 telas de rolagem, com
   2187px de widget na frente.

   Duas correcoes, que somam e nao se substituem:

     1. `order` inverte conteudo e pilha abaixo de 1024px. Leva o feed
        para ~2350px, de 5,7 para ~2,9 telas.
     2. `.so-desktop` tira os tres widgets que DUPLICAM navegacao. Isso
        nao move o comeco do feed — encurta os 1349px de rolagem morta
        depois dele.

   Nada disso toca o DOM nem o desktop: `order` nao tem efeito onde a
   pilha continua sendo coluna. */
@media (max-width: 1024px) {
  .faixa-dupla { display: flex; flex-direction: column; }
  .faixa-dupla > *             { order: 1; }   /* conteudo primeiro */
  .faixa-dupla > .coluna-pilha { order: 2; }   /* pilha depois      */

  /* A PILHA VOLTA A OCUPAR A LARGURA TODA.
     Existe `.coluna-pilha, .faixa-dupla > aside { align-self: start; }`,
     escrita para o GRID do desktop, onde `start` quer dizer "alinha ao
     topo e nao estica a altura" — sem ela a coluna da direita esticaria
     ate a altura do feed.

     A linha acima virou a faixa em `flex-direction: column`, e com isso o
     eixo transversal passou a ser o HORIZONTAL. O mesmo `align-self:
     start`, que ninguem tocou, passou a significar "alinha a esquerda e
     encolhe ate o conteudo": a pilha ficou com 216px numa faixa de 319,
     nem larga nem centralizada, e o anuncio ao lado herdou o desalinho.
     Daí a impressão de bug que o Matheus reportou.

     Propriedade que muda de sentido quando o contexto de layout muda e o
     tipo de regressao que nenhum grep encontra. Ver E22. */
  .faixa-dupla > .coluna-pilha { align-self: stretch; }

  /* AGENDA E TOPICOS VOLTARAM AO CELULAR; POPULARES NAO PODE.
     A Leva 1 escondia os tres porque duplicavam destinos da barra e da
     gaveta. O argumento era contra ROLAGEM ANTES DO FEED, nao contra
     existir: depois da paginacao eles nao cobram nada de quem esta lendo.

     Agenda e Topicos moram na pilha da faixa do FEED, que ja cai depois da
     paginacao pelo `order: 2` acima — bastou parar de esconder. Os
     anuncios daquela pilha nao se moveram: continuam na mesma ordem e na
     mesma posicao relativa ao feed, que era a condicao do Matheus.

     POPULARES MORA NA PILHA DA FAIXA DO DESTAQUE, nao na do feed.
     Desescondido ali, ele apareceria entre o hero e a tarja — ANTES do
     feed, que e exatamente o que a Leva 1 consertou. Move-lo para a outra
     faixa resolveria no celular e quebraria o desktop: a coluna direita da
     primeira faixa ficaria com um anuncio de 50px ao lado de um hero de
     420, praticamente vazia.

     Entao ele segue escondido no celular, onde tem aba e folha propria na
     barra — dos tres, e o mais bem servido pela navegacao nova. Ver E23. */
  .so-desktop { display: none; }
}

/* ESTOURO HORIZONTAL NO CALENDARIO — a pagina inteira rolava de lado.
   Medido em 375px: .cal-filters-group com 388px de conteudo em 311px de
   caixa, vazando por .cal-wrapper e .site-wrapper ate o body.

   A causa e a armadilha do `min-width: auto`: item flex nao encolhe
   abaixo do tamanho intrinseco do conteudo dele, entao o rotulo
   "Online / Digital" empurrava a pagina inteira em vez de quebrar linha.
   `min-width: 0` devolve a permissao de encolher; o wrap faz o resto.
   Ver auditoria-mobile-2026-09-24.md, E16. */
.cal-filter-section { min-width: 0; }
.cal-local-group,
.cal-presence-group { flex-wrap: wrap; }

/* ══ NAVEGACAO DE CELULAR ══════════════════════════════════════════════
   Alca da gaveta, barra inferior e duas folhas. A marcacao e o
   comportamento vivem em inc/nav-mobile.php, com o porque de cada peca.
   Tudo abaixo de 1024px: no desktop a navegacao do topo ja resolve.    */
@media (max-width: 1024px) {

  /* ── A GAVETA QUE JA EXISTIA, ajustada ─────────────────────────────
     #mobile-nav nao e novo. O que muda: abre pela DIREITA, porque a borda
     esquerda e onde mora o gesto de voltar do iOS; e a largura sai de
     280px fixos para 75% da tela, teto de 320px, para o conteudo
     continuar aparecendo atras e dizer "voce esta por cima de uma pagina,
     nao em outra tela". A 375px isso deixa 94px a mostra. */
  #mobile-nav { display: flex; justify-content: flex-end;
    opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s linear .2s; }
  #mobile-nav.open { opacity: 1; visibility: visible; transition-delay: 0s; }
  .mobile-nav-panel {
    width: min(75vw, 320px);
    border-right: 0; border-left: 1px solid var(--border);
    padding-right: calc(24px + env(safe-area-inset-right, 0px));
    padding-top: calc(24px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(24px + 56px + env(safe-area-inset-bottom, 0px));
    transform: translateX(100%); transition: transform .24s cubic-bezier(.4,0,.2,1);
  }
  #mobile-nav.open .mobile-nav-panel { transform: translateX(0); }

  /* O botao do cabecalho sai: ele rola embora com o cabecalho, que e
     `relative`, e era justamente isso que deixava a pagina sem navegacao
     depois do primeiro gesto. A alca fixa faz o trabalho dele. */
  .menu-toggle { display: none !important; }


  /* ── A BARRA ───────────────────────────────────────────────────────
     Quatro destinos, escolhidos pelo que a pessoa vem fazer. Ela NAO some
     ao rolar: barra que se esconde devolve espaco e cobra em
     previsibilidade, e o portal ja tem duas coisas se movendo sozinhas —
     a tarja da home e o trilho de capas das paginas de genero. */
  .navbar {
    position: fixed; z-index: 1100; left: 0; right: 0; bottom: 0;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--bg-surface); border-top: 1px solid var(--border);
  }
  .navbar-item {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    /* Cinco abas em 375px dao 75px cada. O rotulo mais longo e "Populares",
       que cabe em 10px com 1px de espacamento; `min-width: 0` e o
       `text-overflow` existem para o caso de tela mais estreita ainda. */
    min-width: 0; min-height: 56px; padding: 8px 2px; cursor: pointer;
    background: none; border: 0; text-decoration: none;
    /* --text-secondary e nao --text-muted: o rotulo tem 10px, e texto
       pequeno pede 4,5:1. Medido com o auditor, --text-muted dava 3,99 no
       modo claro. Aba inativa continua discreta, so que legivel. */
    color: var(--text-secondary);
    font-family: var(--font-hud); font-weight: 600; font-size: var(--t-selo);
    letter-spacing: 1px; text-transform: uppercase;
  }
  .navbar-item .xt-icone { stroke-width: 1.8; flex: 0 0 auto; }
  .navbar-item > span {
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .navbar-item:hover, .navbar-item:focus-visible { color: var(--text-primary); }
  .navbar-atual { color: var(--purple-bright); }
  /* A aba atual muda de FORMA, nao so de cor: quem nao distingue as duas
     cores continua sabendo onde esta. */
  .navbar-atual::before {
    content: ""; position: absolute; top: 0; width: 26px; height: 2px;
    background: var(--purple-bright);
  }

  /* O conteudo termina ACIMA da barra. Sem isto o ultimo bloco da pagina
     fica coberto e ninguem descobre que ele existe. */
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }

  /* RESPIRO LATERAL. A .faixa-inner tinha `padding: 26px 0` — zero nas
     laterais. O que separava o card da borda eram 12px de margem interna
     do proprio card, e o conteudo ficava praticamente encostado.

     16px e o piso: abaixo disso o texto encosta na moldura do aparelho e a
     leitura piora. O safe-area entra por causa do recorte lateral em
     aparelho com tela curva no modo paisagem. */
  .faixa-inner {
    padding-inline: max(16px, env(safe-area-inset-left, 0px))
                    max(16px, env(safe-area-inset-right, 0px));
  }
}

/* Fora da media query: no desktop a barra, a alca e as folhas nao existem. */
@media (min-width: 1025px) {
  .navbar, .folha, .folha-veu { display: none; }
}

/* O anuncio dentro do feed ocupa a linha inteira. A grade e de duas
   colunas no desktop; sem isto a peca dividiria a linha com um card e
   ficaria espremida em metade da largura. */
/* O anuncio dentro do feed ocupa a linha inteira e o criativo fica
   centrado nela. A grade e de duas colunas no desktop; sem `grid-column`
   a peca dividiria a linha com um card e ficaria espremida em metade da
   largura.

   O `min-width: 0` e a guarda de estouro, e ela e necessaria: no celular
   a coluna do feed mede cerca de 319px e a peca servida ali e um 320x50.
   Um pixel de diferenca basta para reaparecer a rolagem horizontal que o
   E16 custou a consertar. O .ad-wrap do leaderboard ja tem essa protecao;
   o .ad-sidebar-container, que e o container usado aqui, nao tem. */
.feed-anuncio {
  grid-column: 1 / -1; min-width: 0;
  display: flex; justify-content: center;
}
.feed-anuncio > * { max-width: 100%; overflow: hidden; }

/* ── AS FOLHAS ────────────────────────────────────────────────────────
   Populares e Buscar. Estado por CLASSE e nao pelo atributo `hidden`:
   `.folha { display: flex }` venceria `[hidden] { display: none }` da
   folha do navegador, porque classe tem especificidade maior que
   atributo — o painel nasceria aberto sem nada denunciar.
   `visibility` acompanha o `transform` porque so empurrar para fora da
   tela nao tira da ordem de tabulacao. */
.folha-veu {
  position: fixed; inset: 0; z-index: 1150;
  background: color-mix(in srgb, var(--bg-base) 72%, transparent);
  opacity: 0; visibility: hidden;
  transition: opacity .2s ease, visibility 0s linear .2s;
}
.folha-veu.aberta { opacity: 1; visibility: visible; transition-delay: 0s; }

.folha {
  position: fixed; z-index: 1200; left: 0; right: 0; bottom: 0;
  max-height: 74%; display: flex; flex-direction: column;
  background: var(--bg-card); border-top: 1px solid var(--border);
  border-radius: var(--raio-painel) var(--raio-painel) 0 0;
  box-shadow: 0 -8px 28px rgb(0 0 0 / .45);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transform: translateY(100%); visibility: hidden;
  transition: transform .24s cubic-bezier(.4,0,.2,1), visibility 0s linear .24s;
}
.folha.aberta { transform: translateY(0); visibility: visible; transition-delay: 0s; }
.folha-alca { width: 36px; height: 4px; border-radius: 999px; margin: 9px auto 2px; background: var(--border); }
.folha-topo {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px 12px; border-bottom: 1px solid var(--border);
}
.folha-titulo {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-hud); font-weight: 600; font-size: var(--t-corpo);
  letter-spacing: 1px; text-transform: uppercase; color: var(--text-primary);
}
.folha-fechar {
  width: 32px; height: 32px; cursor: pointer; font-size: 14px;
  background: none; border: 1px solid var(--border); border-radius: var(--raio-mini);
  color: var(--text-secondary);
}
.folha-corpo { overflow-y: auto; overscroll-behavior: contain; padding: 10px 14px 18px; }

.folha-item { display: flex; align-items: center; gap: 10px; padding: 9px 0; text-decoration: none; }
.folha-pos {
  flex: 0 0 auto; width: 20px; text-align: center;
  font-family: var(--font-hud); font-weight: 700; font-size: var(--t-corpo);
  color: var(--text-muted); font-variant-numeric: tabular-nums;
}
.folha-mini {
  flex: 0 0 72px; aspect-ratio: 3/2; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--raio-mini);
}
.folha-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.folha-txt { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; min-width: 0; }
.folha-tit { font-size: var(--t-rotulo); line-height: 1.25; color: var(--text-primary); }

.folha-busca { display: flex; gap: 8px; }
.folha-busca input {
  flex: 1; min-width: 0; padding: 11px 13px;
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--raio-mini); color: var(--text-primary);
  font-family: var(--font-hud); letter-spacing: 1px; font-size: var(--t-corpo);
}
.folha-dica { margin: 12px 0 10px; font-size: var(--t-mini); color: var(--text-muted); }
.folha-sugestoes { display: flex; flex-wrap: wrap; gap: 7px; }
.folha-sug {
  padding: 7px 12px; text-decoration: none;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--bg-surface); color: var(--text-secondary); font-size: var(--t-mini);
}
.folha-sug:hover { border-color: var(--purple-bright); color: var(--text-primary); }

@media (prefers-reduced-motion: reduce) {
  .folha, .folha-veu, #mobile-nav, .mobile-nav-panel { transition-duration: 0s; }
}

/* ── CALENDÁRIO DE EVENTOS ────────────────────────────────────────────── */
.cal-wrapper {
  margin-bottom: 40px;
}

/* ── Cabeçalho do calendário ─────────────────────────────────────────────── */
.cal-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

/* Linha 1: seletor de data — largura total */
.cal-header-top {
  display: flex;
}
.cal-header-top .cal-nav {
  width: 100%;
  justify-content: space-between;
}

/* Linha 2: Categoria + Local na mesma linha */
.cal-filters-group {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
}

/* Seção individual com label acima */
.cal-filter-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Label da seção — padrão tipográfico do site */
.cal-filter-section-label {
  font-family: var(--font-hud);
  font-size: var(--t-rotulo);
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Grupo Local: Formato + Estado em linha */
.cal-local-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
}

/* Filtros de modalidade */
/* 6px e nao 4: com a quina menos redonda, 4px fazia dois botoes lerem como
   um bloco so. O vao segue MENOR que o recuo interno de 12px — invertido,
   a peca perde a leitura de objeto e vira texto solto numa fileira. */
.cal-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cal-filter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 44px;
  line-height: 1;
  font-family: var(--font-hud);
  font-size: var(--t-rotulo);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 0 12px;
  border: 1px solid var(--border-campo);
  color: var(--text-muted);
  text-decoration: none;
  background: var(--bg-surface);
  transition: border-color .2s, color .2s, background .2s;
  white-space: nowrap;
  box-sizing: border-box;
  /* O raio vem da regra agrupada mais abaixo, junto com o resto da familia
     de selecao. Declarar aqui tambem so criava duas fontes para o mesmo
     valor — foi assim que o --raio-controle ficou escrito sem nunca render. */
}
/* Mesma geometria, mesma familia, mesmo raio: o alternador do formulario e
   as chips que listam os generos na pagina de contato. */
.cf7-tipo-btn,
.contato-hero-list li { border-radius: var(--raio-controle); }
.cal-filter-btn:hover {
  border-color: var(--purple-mid);
  color: var(--text-secondary);
}
/* Ícones Lucide — o createIcons() substitui <i> por <svg> diretamente */
.cal-filter-btn svg,
.cal-radio-label svg,
.cal-estado-icon svg,
.section-label svg {
  width: 12px !important;
  height: 12px !important;
  flex-shrink: 0;
  display: block;
  stroke-width: 2;
}
/* Radio buttons de formato (presença) */
.cal-presence-group {
  display: flex;
  gap: 6px;
}
.cal-radio-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 44px;
  line-height: 1;
  font-family: var(--font-hud);
  font-size: var(--t-rotulo);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 0 12px;
  box-sizing: border-box;
  border: 1px solid var(--border-campo);
  color: var(--text-muted);
  background: var(--bg-surface);
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
  user-select: none;
  white-space: nowrap;
}
.cal-radio-label:hover {
  border-color: var(--purple-mid);
  color: var(--text-secondary);
}
.cal-radio-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Dropdown de estado */
.cal-estado-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
/* O PIN FICA ONDE O ICONE DOS VIZINHOS FICA: 13px da borda externa.
   Nos botoes de filtro isso sai de 1px de borda + 12px de recuo. Aqui o
   icone e absoluto (nao da para por filho dentro de um <select>), entao a
   mesma posicao precisa ser escrita na mao. Estava em 8px, cinco pixels
   fora de alinhamento com a fileira inteira. */
.cal-estado-icon {
  position: absolute;
  left: 13px;
  display: flex;
  align-items: center;
  pointer-events: none;
  color: var(--text-muted);
  z-index: 1;
}
.cal-estado-select {
  font-family: var(--font-hud);
  font-size: var(--t-rotulo);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  min-height: 44px;
  /* BORDA DOS VIZINHOS, NAO DE CAMPO.
     Ele e <select>, entao tinha entrado no vocabulario de campo, com borda
     --border-campo — calibrada em 3:1 porque campo recebe dado. So que ele
     nao recebe dado, ele ESCOLHE: mesma funcao dos botoes ao lado. A borda
     mais clara empurrava o miolo para tras por contraste simultaneo e fazia
     a peca parecer de outra familia. Isso continua valendo.

     ERRATA DO RECUO. Junto com a borda eu derrubei o recuo esquerdo de 28
     para 12px, alegando que 28 deixava "1,77x mais face escura a mostra por
     letra". A medida comparava coisas diferentes: 28px aqui e a distancia
     ate o TEXTO, e os 12px dos botoes e a distancia ate o ICONE. Refeita a
     conta nos vizinhos — 1 de borda + 12 de recuo + 12 de icone + 5 de gap
     — o texto deles comeca a 30px da borda externa, nao a 12. Os 28 nunca
     estiveram largos; estavam dois pixels curtos.

     E o corte para 12 colocou o texto POR BAIXO do pin, que mora a 13px.
     Agora sao 29px de recuo, que somados ao 1px de borda dao os mesmos 30px
     dos botoes. O icone, o vao e a primeira letra caem na mesma coluna da
     fileira inteira.
     Os 28px da direita ficam, porque a seta mora ali. */
  padding: 11px 28px 11px 29px;
  border: 1px solid var(--border-campo);
  color: var(--text-secondary);
  background: var(--bg-campo);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color .2s, color .2s;
  min-width: 160px;
  box-sizing: border-box;
  line-height: 24px; border-radius: var(--raio-mini);
}

/* ══════════════════════════════════════════════════════════════════════
   FILTROS DO CALENDARIO — mesma familia do menu

   Eu os tinha classificado como "vocabulario de campo", mas sao uma fileira
   de controles selecionaveis com um ativo — que e exatamente o que o menu
   e. Mesma coisa, mesmo tratamento: plano em repouso, relevo no toque,
   afundado quando selecionado.

   ERRATA NA FORMA. Este bloco dizia "a forma e a pastilha, nao o retangulo
   de acao: filtro NOMEIA um recorte, nao executa". A taxonomia de funcao
   nao decide sozinha: ela brigava com a regra de TAMANHO, que e a que vale
   no resto do site, e vencia so por estar escrita depois no arquivo.

   O filtro tem 24px de altura. A faixa de controle esta documentada como
   peca solta de 28 a 48px, entao ele cai ABAIXO dela — mesma situacao do
   botao Ler mais, que tem 23px e usa --raio-mini. Os dois passam a usar o
   mesmo valor, e isso deixa de ser excecao para virar coerencia.

   De quebra, o --raio-controle escrito na regra do .cal-filter-btn nunca
   chegou a renderizar: a pastilha vinha depois e ganhava a cascata.

   SELECIONADO = AFUNDADO, nao preenchido de roxo. O roxo chapado dizia
   "voce esta aqui" com a mesma cor que o resto do site usa para "clique
   aqui". Relevo separa os dois sem gastar cor — e libera o roxo.

   A cor do topico continua no rotulo, entao FGC segue vermelho e MOBA segue
   ciano. O relevo soma ao codigo de cor.

   O RELEVO E DO REPOUSO, NAO DO HOVER. Ele estava so no hover, e o efeito
   disso era uma fileira de contornos arredondados que so viravam peca
   quando o mouse passava — em celular, nunca. Uma almofada de SELECT esta
   levantada quando ninguem esta tocando nela.

   E A ALTURA QUE FALA, NAO A COR. Tentei separar repouso de hover clareando
   a face: no modo claro isso deu 1,04 de diferenca, ou seja, nada, porque a
   superficie ja e clara e nao tem para onde clarear. Agora sao quatro
   alturas — repouso levantado, hover mais alto, clique afundado, escolhido
   no fundo — e altura funciona igual nos dois modos.

   Cada modo tem o seu mecanismo, como o resto do tema: no claro quem
   desenha a peca e a aresta escura de baixo (1,83 contra o fundo da barra);
   no escuro a aresta nao existe, porque escurecer um fundo de 0,3% de
   luminancia nao produz nada, e quem desenha e a banda de luz do topo. */
.cal-filter-btn,
.cal-radio-label,
.cf7-tipo-btn,
.cal-picker-month,
.cal-estado-select {
  --prof: 2px;
  --pad: var(--bg-surface);
  /* Cor do brilho do hover. Roxo por padrao, porque roxo e a cor de "isto
     responde ao toque" no portal. Numa pastilha que ja carrega a cor do
     topico, o roxo brigava com ela — mesmo erro que o hover roxo nos botoes
     vermelhos. Ali embaixo cada pastilha de topico assume a propria. */
  --brilho: var(--purple-mid);
  border-radius: var(--raio-mini);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, #fff 12%, var(--pad)) 0%,
      color-mix(in srgb, #fff 12%, var(--pad)) 32%,
      color-mix(in srgb, #fff 4%,  var(--pad)) 46%,
      var(--pad) 58%);
  box-shadow: 0 var(--prof) 0 color-mix(in srgb, #000 32%, var(--pad));
  transition: transform .1s ease, box-shadow .15s ease, color .15s ease;
}
/* O tratamento e um so, o tamanho nao — mesma regra da familia de acao.
   O tipo de contato tem 36px e o mes vive numa grade de quatro colunas,
   entao cada um guarda o proprio respiro.

   ALVO DE TOQUE. O filtro era uma pastilha de 24px com `padding: 0 12px`:
   sem respiro vertical nenhum, a altura saia so do line-height. A WCAG
   2.5.5 pede 44x44 para alvo de toque, e estes sao a peca central do
   calendario, que a instrucao do projeto define como o diferencial do
   portal. Com 11px em cima e embaixo a caixa fecha em 44 sem tocar na
   fonte; os 14px laterais dao o respiro horizontal que faltava.

   CONTORNO. Passa a usar --border-campo, que ja existe e ja e calibrado
   em 3:1 (3,37 no escuro, 4,17 no claro). O --border dava 1,76 contra a
   face do botao, e era por isso que a fileira inteira parecia apagada: o
   TEXTO tinha contraste, a CAIXA nao.

   Isto revisa, de proposito, a decisao escrita no docblock de
   --border-campo, que reservava o token para campo de entrada com o
   argumento de que "num botao com rotulo a palavra ja diz que ali se
   clica". O argumento vale para botao de acao. Nao vale aqui: estes
   carregam ESTADO — ligado ou desligado —, e estado se le pela caixa,
   nao pelo rotulo, que nao muda quando o filtro liga. */
.cal-filter-btn,
.cal-radio-label { padding: 11px 14px; border-color: var(--border-campo); }

/* Texto secundario e nao --text-muted: a pastilha deixou de ser contorno
   vazio e virou superficie. No escuro o secundario sobre a banda de luz da
   4,95; no claro, 7,15. */
.cal-filter-btn,
.cal-radio-label { color: var(--text-secondary); }
/* Hover: a peca SOBE. Um pixel a mais de aresta e um de deslocamento. */
.cal-filter-btn:hover,
.cal-radio-label:hover,
.cf7-tipo-btn:hover,
.cal-picker-month:hover,
.cal-estado-select:hover {
  --prof: 3px;
  transform: translateY(-1px);
  box-shadow:
    0 var(--prof) 0 color-mix(in srgb, #000 32%, var(--pad)),
    0 0 9px color-mix(in srgb, var(--brilho) 28%, transparent);
  color: var(--text-primary);
}
/* Clique: afunda ate a aresta sumir, igual a familia de acao. */
.cal-filter-btn:active,
.cal-radio-label:active,
.cf7-tipo-btn:active,
.cal-picker-month:active {
  transform: translateY(var(--prof));
  box-shadow: 0 0 0 color-mix(in srgb, #000 32%, var(--pad));
}
.cal-filter-btn.active,
.cal-radio-label.checked,
.cf7-tipo-btn.active,
.cal-picker-month.current {
  background: color-mix(in srgb, #000 18%, var(--bg-surface));
  box-shadow:
    inset 0 3px 4px color-mix(in srgb, #000 42%, transparent),
    inset 0 -1px 0 color-mix(in srgb, #fff 16%, transparent);
  border-color: var(--border-bright);
  color: var(--text-primary);
}

/* O ativo nao pode ter contorno mais fraco que o inativo, e teria: o
   --border-bright da regra acima e mais apagado que o --border-campo
   contra a face do botao. O que marca o estado continua sendo o rebaixo e,
   no escuro, o anel roxo — nao a forca da borda.

   A POSICAO IMPORTA E JA CUSTOU UMA VERSAO. Na v6.21.0 esta regra ficou
   ANTES da de cima. As duas tem especificidade (0,2,0), e em empate vence
   a que vem depois no arquivo — entao ela nunca valeu, sem erro no console
   e sem nada que um grep pegasse. Se mover, mover para depois. */
.cal-filter-btn.active,
.cal-radio-label.checked { border-color: var(--border-campo); }
/* No escuro afundar nao produz diferenca: a superficie ja tem 9% de luz.
   La o poco se le pela quina acesa, mesma regra do menu. */
html:not([data-tema="claro"]) .cal-filter-btn.active,
html:not([data-tema="claro"]) .cal-radio-label.checked,
html:not([data-tema="claro"]) .cf7-tipo-btn.active,
html:not([data-tema="claro"]) .cal-picker-month.current {
  background: color-mix(in srgb, #fff 4%, var(--bg-surface));
  box-shadow:
    inset 0 3px 5px color-mix(in srgb, #000 65%, transparent),
    inset 0 -1px 0 color-mix(in srgb, #fff 20%, transparent),
    0 0 0 1px color-mix(in srgb, var(--purple-bright) 45%, transparent);
}
/* Selecionado tambem nao pinta o contorno: quem diz "escolhido" e o poco,
   e quem diz "qual" e a cor da palavra. Duas informacoes, dois canais. */
.cal-filter-btn[class*="mod-"].active { color: var(--g-tinta); }
/* No claro o poco escurece a face em 18%, e sobre ela a tinta normal caia
   para 3,11 no RPG. A dose sobe SO AQUI: enfraquecer o poco resolveria
   igual, mas o afundado e justamente o que diz "escolhido", e a tinta de
   56% segue certa em todo o resto do site. */
/* O poco do filtro selecionado escurece a face em 18%, e sobre ela a tinta
   do claro caia para 3,56 no Battle Royale. Aqui ela recebe 20% de preto.
   Antes isso era feito por --g-dose, que deixou de valer quando a tinta
   clara passou a ser declarada em vez de derivada. */
html[data-tema="claro"] .cal-filter-btn.mod-fgc.active { --g-tinta: color-mix(in srgb, #000 20%, #ad001d); }
html[data-tema="claro"] .cal-filter-btn.mod-moba.active { --g-tinta: color-mix(in srgb, #000 20%, #005c75); }
html[data-tema="claro"] .cal-filter-btn.mod-battle-royale.active { --g-tinta: color-mix(in srgb, #000 20%, #003bed); }
html[data-tema="claro"] .cal-filter-btn.mod-fps.active { --g-tinta: color-mix(in srgb, #000 20%, #804600); }
html[data-tema="claro"] .cal-filter-btn.mod-rpg.active { --g-tinta: color-mix(in srgb, #000 20%, #276100); }
html[data-tema="claro"] .cal-filter-btn.mod-gacha.active { --g-tinta: color-mix(in srgb, #000 20%, #695300); }
html[data-tema="claro"] .cal-filter-btn.mod-cozy.active { --g-tinta: color-mix(in srgb, #000 20%, #a60069); }
/* Aqui vivia um .cal-estado-select { border-radius: 999px } solto, perdido
   entre as tintas de topico. Ele vinha DEPOIS da familia e por isso o
   select continuou em pastilha enquanto os vizinhos foram para 4px —
   a borda e o recuo tinham sido alinhados, o raio nao. */

.cal-estado-select:hover,
.cal-estado-select:focus {
  border-color: var(--purple-mid);
  color: var(--text-primary);
  outline: none;
}
.cal-estado-caret {
  position: absolute;
  right: 10px;
  font-size: var(--t-mini);
  color: var(--text-muted);
  pointer-events: none;
}


/* ── TINTA DO MODO CLARO, declarada e nao derivada ──────────────────────
   No escuro a tinta sai de --g-mistura/--g-dose: clarear 20% preserva a
   cor. No claro nao funciona pelo mesmo caminho — escurecer 56% para passar
   contraste custava 45% da cromaticidade, e o Battle Royale virava um
   azul-marinho quase preto que a 10px lia como cinza. Foi o que apareceu no
   antetitulo do widget Populares.

   Escurecer menos e saturar um pouco resolve: as sete cores abaixo passam
   4,5:1 sobre card, superficie E pagina, com 2,5x mais cor em media que a
   versao derivada.

   Preto tira cor muito mais rapido que branco poe. Por isso o escuro segue
   com a conta e o claro tem valores proprios. */
html[data-tema="claro"] .g-fgc, html[data-tema="claro"] .mod-fgc { --g-tinta: #ad001d; }
html[data-tema="claro"] .g-moba, html[data-tema="claro"] .mod-moba { --g-tinta: #005c75; }
html[data-tema="claro"] .g-battle-royale, html[data-tema="claro"] .mod-battle-royale { --g-tinta: #003bed; }
html[data-tema="claro"] .g-fps, html[data-tema="claro"] .mod-fps { --g-tinta: #804600; }
html[data-tema="claro"] .g-rpg, html[data-tema="claro"] .mod-rpg { --g-tinta: #276100; }
html[data-tema="claro"] .g-gacha, html[data-tema="claro"] .mod-gacha { --g-tinta: #695300; }
html[data-tema="claro"] .g-cozy, html[data-tema="claro"] .mod-cozy { --g-tinta: #a60069; }
html[data-tema="claro"] .g-estrategia, html[data-tema="claro"] .mod-estrategia { --g-tinta: #005c3b; }

/* Cores por modalidade nos filtros.
   Uma regra so, servida pela variavel do topico. Antes eram cinco blocos
   repetindo o mesmo hex tres vezes cada, e adicionar um genero significava
   escrever mais seis linhas.

   A COR E DO ROTULO, NAO DA CARCACA. O contorno tambem assumia a cor do
   topico, e sete pastilhas contornadas de sete cores viravam sete objetos
   diferentes numa fileira que e um controle so. No joystick do PS1 os
   quatro botoes de acao sao da mesma borracha cinza; o que muda de cor e o
   simbolo estampado. Aqui e igual: contorno neutro para todos, cor so na
   palavra. O brilho do hover segue a cor do topico porque brilho e luz
   emitida pelo rotulo, nao material da peca. */
.cal-filter-btn[class*="mod-"] { --brilho: var(--g-topico); color: var(--g-tinta); }

/* Navegação de mês */
.cal-nav {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}
.cal-month-label {
  font-family: var(--font-hud);
  font-size: var(--t-titulo);
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-primary);
  min-width: 200px;
  text-align: center;
}

/* ── Picker de mês/ano ──────────────────────────────────────────────────── */
.cal-month-picker { position: relative; display: flex; align-items: center; justify-content: center; flex: 1; }
button.cal-month-label {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 8px;
  width: 100%;
  transition: color .2s;
}
button.cal-month-label:hover { color: var(--purple-bright); }
.cal-picker-caret { font-size: var(--t-mini); opacity: 0.55; line-height: 1; }

.cal-picker-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-surface);
  border: 1px solid var(--border-bright);
  padding: 14px;
  z-index: 200;
  min-width: 230px;
  box-shadow: 0 10px 36px rgba(0,0,0,0.65); border-radius: var(--raio-painel);
}
.cal-picker-year-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.cal-picker-year-display {
  font-family: var(--font-hud);
  font-size: var(--t-corpo);
  letter-spacing: 2px;
  color: var(--text-primary);
}
/* A regra plana que existia aqui foi removida: .cal-picker-year-btn entrou
   na familia dos botoes redondos la em cima, e esta, por vir depois, anulava
   o domo e devolvia a caixa de contorno. Mesmo tipo de sobra de cascata que
   ja tinha apagado o relevo da paginacao e da navegacao do calendario. */
.cal-picker-months {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}
/* Repouso plano; hover e selecionado vem da familia de selecao la em cima.
   As regras de estado que existiam aqui foram removidas: por virem depois,
   devolviam a caixa plana com roxo chapado por cima do relevo. */
.cal-picker-month {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  cursor: pointer;
  font-family: var(--font-hud);
  font-size: var(--t-rotulo);
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 8px 4px;
}
.cal-picker-month.current { font-weight: 700; }

/* Grid do calendário */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  /* SEM VAO HORIZONTAL.
     Cada semana sao DUAS linhas de grade: os 7 quadrados do numero do dia e,
     abaixo, a faixa de eventos que ocupa as 7 colunas. Com `gap: 2px` o vao
     caia tambem entre essas duas, e o `background: var(--border)` do grid
     aparecia ali como uma linha. Resultado: o numero do dia ficava numa
     faixa e o conteudo dele em outra, separados por um risco.
     Agora o vao existe so entre colunas, e a divisao entre SEMANAS e
     desenhada como borda no ultimo elemento de cada uma. */
  column-gap: 2px;
  row-gap: 0;
  background: var(--border);
  border: 1px solid var(--border);
  overflow: hidden; border-radius: var(--raio-painel);
}

/* Cabeçalho (dias da semana) */
.cal-weekday {
  background: var(--bg-surface);
  font-family: var(--font-hud);
  font-size: var(--t-mini);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
  padding: 8px 4px;
  min-width: 0;
  overflow: hidden;
}

/* Células dos dias — só exibem o número; eventos ficam na camada abaixo */
.cal-day {
  background: var(--bg-card);
  height: 36px;
  padding: 4px 6px;
  position: relative;
  transition: background .15s;
  min-width: 0;
  overflow: hidden;
}
/* A CELULA VAZIA NAO TEM FUNDO PROPRIO.
   Ela usava --bg-base, a cor da pagina, e por isso lia como janela furada
   no meio da grade: o dia que nao existe virava um vazio atravessando o
   calendario. Trocar por um tom intermediario so trocaria a intensidade do
   buraco. A resposta e nao pintar: a celula e a mesma superficie das
   outras, e o que diz que ela esta vazia e nao ter numero dentro.
   O :hover continua excluido dela, entao ela tambem nao responde ao mouse. */
/* Semana sem nenhum evento nao renderiza a faixa, entao quem fecha a
   semana e a propria celula do dia. */
.cal-day-sem-faixa { border-bottom: 2px solid var(--border); }

.cal-day-empty {
  background: var(--bg-card);
}
.cal-day:hover:not(.cal-day-empty) {
  background: var(--bg-card-hover);
}
.cal-day-today {
  background: var(--bg-surface);
  border-top: 2px solid var(--red-bright);
}
.cal-day-has-event {
  /* Era um roxo escuro chumbado, que no modo claro viraria uma mancha escura
     no meio do calendario. Derivado do hover do card, segue o tema sozinho. */
  background: linear-gradient(160deg, var(--bg-card-hover) 0%, var(--bg-card) 100%);
}

/* Número do dia */
.cal-day-num {
  display: block;
  font-family: var(--font-hud);
  font-size: var(--t-rotulo);
  letter-spacing: 1px;
  color: var(--text-muted);
  line-height: 1;
}
.cal-day-today .cal-day-num {
  color: var(--red-bright);
  font-weight: 700;
}
.cal-day-has-event .cal-day-num {
  color: var(--text-secondary);
}

/* Camada de eventos por semana — grid-row e grid-column via inline style */
.cal-week-events {
  grid-column: 1 / -1;                    /* span todas as 7 colunas do cal-grid */
  /* Fecha a semana. Com row-gap zerado, a divisao entre semanas nao vem
     mais do vao do grid, vem daqui. */
  border-bottom: 2px solid var(--border);
  position: relative;
  --lane-h: 48px;
  height: calc(var(--num-lanes, 0) * var(--lane-h));
  pointer-events: none;
  /* Replica visualmente as 7 colunas com gap de 2px */
  background-color: var(--bg-card);
  background-image: repeating-linear-gradient(
    to right,
    var(--bg-card)   0px,
    var(--bg-card)   calc((100% + 2px) / 7 - 2px),
    var(--border)    calc((100% + 2px) / 7 - 2px),
    var(--border)    calc((100% + 2px) / 7)
  );
}

/* Item de evento no calendário */
.cal-event-item {
  position: absolute;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  height: calc(var(--lane-h) - 4px);
  font-size: var(--t-rotulo);
  line-height: 1.3;
  border-left: 2px solid var(--purple-mid);
  /* OPACO, nao translucido.
     A camada .cal-week-events desenha as divisorias das colunas como
     background dela proprio. Com fundo translucido a linha aparecia ATRAVES
     da barra e cortava o texto, e a cor do topico virava um veu de 15% que
     nao lia como cor nenhuma. Misturando com --bg-card em vez de transparent
     o resultado e o mesmo tom, so que solido: cobre a divisoria e a cor
     aparece de verdade.

     E mais fiel ao aparelho, de quebra: um LCD de Game Boy tem quatro tons
     chapados e opacos. Transparencia nao existe em matriz de pontos. */
  --tinta: 30%;
  --tinta-hover: 38%;
  background: color-mix(in srgb, var(--purple-mid) var(--tinta), var(--bg-card));
  color: var(--text-primary);
  text-decoration: none;
  overflow: hidden;
  border-radius: var(--raio-mini);
  pointer-events: auto;
  transition: background .15s, color .15s;
}
/* O claro precisa de mais tinta: texto escuro sobre tom claro le mais fraco
   que texto claro sobre tom escuro, com a mesma quantidade de cor. */
html[data-tema="claro"] .cal-event-item { --tinta: 36%; --tinta-hover: 48%; }
/* Evento sem genero marcado: mesma logica, na cor da marca. */
.cal-event-item:hover {
  background: color-mix(in srgb, var(--lavagem) var(--tinta-hover), var(--bg-card));
}
/* Thumbnail à esquerda */
.cal-event-thumb {
  display: block;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  object-fit: cover;
  object-position: center;
}
/* Label à direita */
.cal-event-label {
  flex: 1;
  min-width: 0;
  padding: 3px 5px 3px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Continuação de semana — remove border-radius na borda de corte */
.cal-event-item.cal-chip-cont-l {
  border-left: none;
  border-radius: 0 var(--raio-mini) var(--raio-mini) 0;
}
.cal-event-item.cal-chip-cont-r {
  border-radius: var(--raio-mini) 0 0 var(--raio-mini);
}
.cal-event-item.cal-chip-cont-l.cal-chip-cont-r {
  border-radius: 0;
}

/* Cores por modalidade */
/* Borda em --g-tinta, fundo em --g-topico cru: a borda precisa se destacar
   DA propria barra. Com a cor crua nos dois lados, no claro isso dava 1,10
   e a barra ficava sem contorno nenhum. */
.cal-event-item[class*="mod-"] { border-color: var(--g-tinta); background: color-mix(in srgb, var(--g-topico) var(--tinta), var(--bg-card)); }

/* O texto NAO vai para a cor do topico no hover.
   Texto na cor do topico sobre um fundo feito da mesma cor tem a mesma
   matiz, entao o contraste depende so da diferenca de luminosidade — e ela
   e pequena por construcao. Media a regra antiga: 4,12 no melhor caso,
   abaixo do minimo de 4,5, em TODOS os sete topicos e nos dois modos.
   A cor da categoria vive na borda de 2px, que e onde ela nao disputa
   legibilidade com nada. O hover so adensa a tinta do fundo. */
.cal-event-item[class*="mod-"]:hover { background: color-mix(in srgb, var(--g-topico) var(--tinta-hover), var(--bg-card)); }


/* ── Painel de eventos do mês (lista abaixo do calendário) ───────────────── */
.cal-events-panel {
  margin-top: 32px;
  padding-top: 24px;
  /* Tinha border-radius aqui, e ele nao pintava nada: o bloco so tem borda no
     topo e nenhum fundo, e raio sem contorno fechado nem preenchimento nao
     tem o que curvar. Era instrucao morta, do tipo que o proximo leitor
     interpreta como decisao e replica. */
  border-top: 1px solid var(--border);
}
.cal-events-panel-title {
  font-family: var(--font-hud);
  font-size: var(--t-rotulo);
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
/* --text-on-brand, nao --purple-bright: roxo sobre lavagem roxa dava 2,01.
   E nao --text-primary: --purple-dark e escuro NOS DOIS MODOS, entao o
   texto tem que ser branco nos dois. A identidade da cor fica na borda. */
.cal-events-panel-count {
  font-size: var(--t-rotulo);
  background: var(--purple-dark);
  color: var(--text-on-brand);
  border: 1px solid var(--purple-mid);
  padding: 1px 8px;
  letter-spacing: 1px;
}
.cal-events-panel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}
.cal-events-empty {
  color: var(--text-muted);
  font-size: var(--t-rotulo);
  text-align: center;
  padding: 20px 0 0;
}

/* Card de evento no painel */
.cal-event-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  text-decoration: none;
  color: var(--text-secondary);
  transition: border-color .2s, background .2s;
  overflow: hidden; border-radius: var(--raio-controle);
  /* CARD PEQUENO, RAIO DE CONTROLE.
     Ele tem ~150px de largura e vive numa grade de varios: com o raio de
     painel (16px) a razao dava 11% e a peca lia como bolha, nao como card.
     Pela faixa de tamanho ele e controle, entao 6px.

     E a miniatura fica QUADRADA. Ela encosta na borda (folga zero), e a
     conta diria "mesmo raio do pai" — mas o pai ja tem overflow: hidden,
     entao quem arredonda a foto e o recorte do card, nao a foto. Arredondar
     as duas vezes engorda a curva e foi o que apareceu na tela. */
  --raio-interno: 0px;
}
.cal-event-card:hover {
  border-color: var(--purple-mid);
  background: var(--bg-card-hover);
  color: var(--text-primary);
}
.cal-event-card[class*="mod-"]       { border-color: color-mix(in srgb, var(--g-tinta) 30%, transparent); }
.cal-event-card[class*="mod-"]:hover { border-color: var(--g-tinta); }

.cal-event-card-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg-surface); border-radius: var(--raio-interno);
}
.cal-event-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s;
}
.cal-event-card:hover .cal-event-card-thumb img { transform: scale(1.04); }
.cal-event-card-nothumb {
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, var(--bg-surface) 0%, var(--purple-dark) 100%);
}
.cal-event-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px;
}
.cal-event-card-date {
  font-family: var(--font-hud);
  font-size: var(--t-mini);
  letter-spacing: 1.5px;
  color: var(--purple-bright);
  text-transform: uppercase;
}
.cal-event-card-title {
  font-size: var(--t-rotulo);
  line-height: 1.35;
  color: inherit;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Responsivo */
@media (max-width: 680px) {
  .cal-weekday { padding: 6px 2px; letter-spacing: 0; }
  .cal-month-label { font-size: var(--t-rotulo); min-width: 160px; }
  .cal-week-events { --lane-h: 44px; }
  .cal-event-thumb { width: 40px; height: 40px; }
  .cal-events-panel-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
  /* Filtros empilhados verticalmente no mobile */
  .cal-filters-group { flex-direction: column; align-items: flex-start; gap: 10px; }
  .cal-local-group   { flex-wrap: wrap; gap: 6px; }
}
@media (max-width: 400px) {
  .cal-week-events { display: none; }
  .cal-day-has-event::after {
    content: '●';
    display: block;
    font-size: var(--t-mini);
    color: var(--purple-bright);
    text-align: center;
    margin-top: 2px;
  }
  .cal-events-panel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── PÁGINA DE CONTATO / DIVULGUE SEU EVENTO ─────────────────────────────── */

.contato-hero {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 24px 28px;
  margin-bottom: 16px;
  position: relative; border-radius: var(--raio-painel);
}
.contato-hero-sys {
  font-family: var(--font-hud);
  font-size: var(--t-rotulo);
  letter-spacing: 2px;
  color: var(--red-bright);
  text-transform: uppercase;
  margin: 0 0 6px;
}
.contato-hero-title {
  font-family: var(--font-hud);
  font-size: var(--t-secao);
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-primary);
  margin: 0 0 10px;
  line-height: 1.15;
}
.contato-hero-text {
  font-family: var(--font-body);
  font-size: var(--t-rotulo);
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0 0 16px;
  max-width: 620px;
}
.contato-hero-disclaimer {
  color: var(--text-muted);
  font-size: var(--t-rotulo);
  border-left: 2px solid var(--border-bright);
  padding-left: 10px;
  margin-top: 10px;
}
.contato-hero-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.contato-hero-list li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-hud);
  font-size: var(--t-mini);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  background: var(--bg-surface);
  padding: 0 10px;
  height: 24px;
}
.contato-hero-list li svg { width: 11px !important; height: 11px !important; flex-shrink: 0; }

/* ── Canais de contato (bloco acima do formulário) ────────────────────── */
/* Sem caixa propria: ele vive dentro do hero. A moldura, o fundo e o raio
   sairam porque eram os do painel que ja o envolve — duas bordas iguais
   coladas nao separavam assunto nenhum, so dobravam o contorno.
   O que separa agora e um fio, que e o suficiente para marcar a virada de
   "o que cobrimos" para "como falar com a gente". */
.contato-canais {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.contato-canais-rotulo {
  font-family: var(--font-hud);
  font-size: var(--t-meta);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0 0 4px;
}
.contato-canais-email { margin: 0 0 10px; }
/* Vermelho e a cor de link do portal, e aqui ele passa nos dois modos sobre
   o card: 4,62:1 no escuro e 5,30:1 no claro. (No rodape nao passava, porque
   la o fundo e --bg-base, que e mais claro no modo claro.) */
.contato-canais-email a {
  font-family: var(--font-hud);
  font-size: var(--t-titulo);
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--red-bright);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  word-break: break-all;   /* o endereco nao pode estourar a coluna no celular */
}
.contato-canais-email a:hover { color: var(--text-primary); }
.contato-canais-email a:focus-visible { outline: 2px solid var(--purple-bright); outline-offset: 3px; border-radius: var(--raio-mini); }
.contato-canais-texto {
  font-family: var(--font-body);
  font-size: var(--t-rotulo);
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0;
  max-width: 620px;
}

/* ── Wrapper do formulário ── */
.contato-form-wrap {
  background: var(--bg-card);
  border: 1px solid var(--border-bright);
  padding: 24px 28px 20px;
  position: relative; border-radius: var(--raio-painel);
}
.contato-form-wrap::before {
  content: '';
  position: absolute;
  /* Ia de borda a borda num painel de raio 16, entao atravessava reto por
     cima das duas curvas e esquadrava o topo do formulario. A aresta de
     cima so e reta a partir de 16px da quina, entao o filete comeca ai. */
  top: 0; left: var(--raio-painel); right: var(--raio-painel);
  height: 2px;
  background: linear-gradient(90deg, var(--purple-mid), var(--red-mid));
}
.contato-form-note {
  font-family: var(--font-hud);
  font-size: var(--t-rotulo);
  letter-spacing: 1.5px;
  color: var(--text-muted);
  text-align: center;
  margin: 16px 0 0;
  text-transform: uppercase;
}

/* ── Grid de campos ── */
.contato-form-wrap .wpcf7 { width: 100%; }

.cf7-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 0;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.cf7-row + .cf7-row,
.cf7-row + .cf7-presencial-fields,
.cf7-presencial-fields + .cf7-row { margin-top: 16px; }
.cf7-row--half {
  flex-direction: row;
  gap: 14px;
}
.cf7-row--half > .cf7-label,
.cf7-row--half > label { flex: 1; min-width: 0; }

.cf7-row--dates {
  flex-direction: row;
  gap: 14px;
}
.cf7-row--dates > .cf7-label,
.cf7-row--dates > label { flex: 1; min-width: 0; }

/* ── Labels — contraste WCAG AA ── */
.cf7-label,
.contato-form-wrap label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-family: var(--font-hud);
  font-size: var(--t-rotulo);
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-secondary); /* var(--text-secondary) sobre var(--bg-card) → contraste ~4.6:1 */
}
.cf7-label abbr,
.contato-form-wrap label abbr { text-decoration: none; color: var(--red-bright); margin-left: 2px; }

/* CF7 converte newlines do template em <br> — oculta em todo o form */
.contato-form-wrap br { display: none; }

/* CF7 envolve campos num <p> automático — remove da árvore de layout
   para que os labels virem filhos diretos do flex (.cf7-row--half etc.) */
.contato-form-wrap .cf7-row > p { display: contents; }

/* Garante que o wrapper CF7 ocupe linha própria e largura total */
.contato-form-wrap .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}
.contato-form-wrap .wpcf7-form-control-wrap input,
.contato-form-wrap .wpcf7-form-control-wrap select,
.contato-form-wrap .wpcf7-form-control-wrap textarea {
  width: 100%;
  box-sizing: border-box;
}

/* Label sem flex (p) */
p.cf7-label {
  font-family: var(--font-hud);
  font-size: var(--t-rotulo);
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0 0 8px;
}

/* ── Toggle Online / Presencial (botões HTML + hidden CF7) ── */
.cf7-tipo-btns {
  display: flex;
  gap: 8px;
}
/* Escolher Online ou Presencial e SELECAO, nao acao: mesma familia dos
   filtros do calendario, com o proprio tamanho. Hover e ".active" vem de la
   — plano em repouso, relevo no toque, afundado quando escolhido. As regras
   de estado que existiam aqui foram removidas porque, vindo depois,
   apagavam o relevo e devolviam o preenchimento vermelho chapado. */
.cf7-tipo-btn {
  height: 36px;
  padding: 0 18px;
  border: 1px solid var(--border-bright);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-family: var(--font-hud);
  font-size: var(--t-rotulo);
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-appearance: none;
  white-space: nowrap;
}
.cf7-tipo-btn:focus-visible {
  outline: 2px solid var(--purple-bright);
  outline-offset: 2px;
}

/* ── Inputs base ── */
.contato-form-wrap input[type="text"],
.contato-form-wrap input[type="email"],
.contato-form-wrap input[type="url"],
.contato-form-wrap input[type="date"],
.contato-form-wrap input[type="time"],
.contato-form-wrap select,
.contato-form-wrap textarea {
  font-family: var(--font-body);
  font-size: var(--t-rotulo);
  color: var(--text-primary);
  background: var(--bg-campo);
  border: 1px solid var(--border-campo);
  padding: 9px 12px;
  width: 100%;
  box-sizing: border-box;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none;
  appearance: none;
  /* Era border-radius: 0, escrito antes da escala de raio existir. O campo
     tem 38px de altura, entao cai na faixa de controle. A conta de
     aninhamento NAO se aplica: o painel tem 28px de recuo lateral contra
     16px de raio, entao o campo nao encosta na curva — quem decide e a
     faixa de tamanho, nao o pai. A area de texto segue os 6px tambem, por
     ser a mesma familia: coerencia dentro da familia vence a faixa. */
  border-radius: var(--raio-controle);
  /* Campo e onde se deposita coisa, entao e rebaixo, igual a miniatura do
     card. As doses vem de --campo-*, que se invertem por tema. */
  box-shadow:
    inset 0 2px 3px color-mix(in srgb, #000 var(--campo-sombra), transparent),
    inset 0 -1px 0 color-mix(in srgb, #fff var(--campo-luz), transparent);
  line-height: 1.4;
}
.contato-form-wrap input::placeholder,
.contato-form-wrap textarea::placeholder {
  color: var(--text-muted);
  font-size: var(--t-rotulo);
}
.contato-form-wrap input:focus,
.contato-form-wrap select:focus,
.contato-form-wrap textarea:focus {
  border-color: var(--purple-bright);
  /* O anel de foco SOMA ao rebaixo. Declarado sozinho ele substituia a
     sombra inteira, e o campo voltava a ser chapado justo no estado em que
     a pessoa esta olhando para ele. */
  box-shadow:
    inset 0 2px 3px color-mix(in srgb, #000 var(--campo-sombra), transparent),
    inset 0 -1px 0 color-mix(in srgb, #fff var(--campo-luz), transparent),
    0 0 0 2px color-mix(in srgb, var(--purple-bright) 18%, transparent);
  outline: none;
}
.contato-form-wrap textarea {
  resize: vertical;
  min-height: 120px;
}

/* ── Select com seta ── */
.contato-form-wrap select {
  color: var(--text-primary);
  cursor: pointer;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239898b0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

/* ── Contador de caracteres ── */
.cf7-char-count {
  font-family: var(--font-hud);
  font-size: var(--t-rotulo);
  color: var(--text-muted);
  text-align: right;
  margin-top: 3px;
}
.cf7-char-count.cf7-char-limit { color: var(--red-bright); }

/* wpcf7-radio nativo oculto (não usado) */
.contato-form-wrap .wpcf7-radio { display: none; }

/* Campos condicionais de presencial */
.cf7-presencial-fields {
  display: none;
  border-left: 2px solid var(--red-bright);
  padding-left: 14px;
  margin-bottom: 14px;
}
.cf7-presencial-fields.visible { display: block; }

/* ── File input ── */
.contato-form-wrap input[type="file"] {
  font-family: var(--font-body);
  font-size: var(--t-rotulo);
  color: var(--text-secondary);
  background: var(--bg-campo);
  border: 1px solid var(--border-campo);
  padding: 9px 12px;
  width: 100%;
  box-sizing: border-box;
  cursor: pointer;
}

/* Remove divisor do último cf7-row (antes do submit) */
.contato-form-wrap .cf7-row:last-of-type { border-bottom: none; padding-bottom: 0; }

/* ── Botão submit — só o que é DESTE botão ──────────────────────────────
   Este bloco declarava o botao inteiro: gradiente roxo-vermelho, border
   none, border-radius 0 e :hover com opacity .88. Vindo depois da familia de
   acao no arquivo, ele ganhava a cascata e apagava o tratamento todo — o
   botao nunca chegou a ter a face solida nem a saia de relevo, era o unico
   botao com gradiente e canto reto do site. Mesmo defeito que o alternador
   Online/Presencial tinha, e que ficou de fora daquela varredura.

   O que era regra de estado saiu inteiro: face, relevo, raio, foco e hover
   vem da familia. Aqui ficam so a largura e o respiro, que sao deste botao
   por ser o unico submit de formulario do site.

   O gradiente nao volta como face: ele e o filete do topo do painel, e
   repetir a mesma peca em dois papeis — moldura e botao — tirava do filete
   a funcao de marcar onde o formulario comeca. */
.contato-form-wrap input[type="submit"] {
  display: block;
  width: 100%;
  margin-top: 6px;
  height: 44px;
  /* Este fica, e nao e detalhe: <input type="submit"> e o unico membro da
     familia que nao e <a>. Safari e iOS reaplicam o desenho nativo de botao
     por cima do nosso — fundo proprio e raio proprio — e so appearance: none
     desliga isso. Sem esta linha o botao volta a destoar, mas so no iPhone,
     que e onde ninguem testa. */
  -webkit-appearance: none;
  appearance: none;
}

/* ── Mensagens CF7 — estilo cal-event-item ── */
.contato-form-wrap .wpcf7-response-output {
  font-family: var(--font-hud) !important;
  font-size: var(--t-rotulo) !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  margin: 16px 0 0 !important;
  padding: 12px 16px !important;
  border-radius: var(--raio-controle) !important;
  border: 1px solid var(--purple-mid) !important;
  background: color-mix(in srgb, var(--purple-mid) 10%, transparent) !important;
  /* Nas quatro variantes abaixo o texto e sempre --text-primary e o estado
     e dito pela borda e pela lavagem. Cor da marca sobre lavagem da propria
     cor reprovava (4,37 roxo / 4,01 e 4,46 vermelho). */
  color: var(--text-primary) !important;
}
/* Erro de validação */
.contato-form-wrap .wpcf7-response-output.wpcf7-validation-errors,
.contato-form-wrap .wpcf7-response-output.wpcf7-acceptance-missing {
  border-color: var(--red-bright) !important;
  background: color-mix(in srgb, var(--red-bright) 10%, transparent) !important;
  color: var(--text-primary) !important;
}
/* Enviado com sucesso */
.contato-form-wrap .wpcf7-response-output.wpcf7-mail-sent-ok {
  border-color: var(--ok) !important;
  background: color-mix(in srgb, var(--ok) 8%, transparent) !important;
  color: var(--text-primary) !important;
}
/* Erro de envio de e-mail */
.contato-form-wrap .wpcf7-response-output.wpcf7-mail-sent-ng,
.contato-form-wrap .wpcf7-response-output.wpcf7-spam-blocked {
  border-color: var(--alerta) !important;
  background: color-mix(in srgb, var(--alerta) 10%, transparent) !important;
  color: var(--text-primary) !important;
}
.contato-form-wrap .wpcf7-not-valid-tip {
  font-family: var(--font-body);
  font-size: var(--t-mini);
  color: var(--red-bright);
  margin-top: 4px;
}
.contato-form-wrap .wpcf7-spinner { display: none !important; }

/* ── Responsivo ── */
@media (max-width: 680px) {
  .contato-hero, .contato-form-wrap { padding: 18px 16px; }
  .cf7-row--half, .cf7-row--dates { flex-direction: column; gap: 14px; }
  .contato-hero-title { font-size: var(--t-titulo); }
}