/* ============================================================================
   Real Campeonato — SITE PÚBLICO
   ----------------------------------------------------------------------------
   Frontend anônimo: capa, agenda, tabela, times, fichas, mídia e transmissão.
   Nenhuma noção de usuário logado existe aqui — não há login, conta ou
   qualquer link para a área administrativa.

   Princípio de composição: o site NÃO usa título de página. A identidade de
   cada tela vem do primeiro bloco (a capa) e da navegação; rótulos explicativos
   moram em tooltip. Isso deixa a página começar já no conteúdo, que é o que
   dá a sensação de aplicação em vez de documento.
   ============================================================================ */

.corpo-site { display: flex; flex-direction: column; min-height: 100dvh; }

/* ============================================================== CABEÇALHO ===
   Duas faixas, como nos portais esportivos: a barra escura com a identidade e
   a navegação, e abaixo dela a faixa de contexto dizendo de qual campeonato o
   site está falando.

   A barra é escura NOS DOIS TEMAS, de propósito: é ela que dá o peso de portal
   e separa o "canal" do conteúdo. Por isso usa tokens próprios (--topo-*) em
   vez dos semânticos de superfície, que se invertem com o tema. */
.site-cabecalho {
    position: sticky; top: 0; z-index: var(--z-topo);
    transition: box-shadow var(--transicao);
}
.site-cabecalho.rolou { box-shadow: var(--sombra-lg); }

/* A faixa de campeonatos SOME ao rolar — mas por rolagem natural, não por
   animação: ela vive FORA do cabeçalho fixo (ver layout_site.php) e sobe junto
   com a página, como qualquer conteúdo.

   A tentativa anterior recolhia a faixa por CSS enquanto ela estava dentro do
   cabeçalho. Isso encurtava o documento, o navegador corrigia o scrollY, o
   limiar era cruzado de volta e a barra tremia. Histerese amenizou e não
   resolveu, porque o gatilho é a mudança de altura em si. Sem JS e sem
   mudança de altura, o laço deixa de existir. */

/* ---------------------------------------------------- FAIXA 1 (principal) */
/* A faixa escura sangra de ponta a ponta, mas o CONTEÚDO dela vive num
   contêiner da mesma largura do corpo da página. Sem isso, num monitor de
   2560px a marca fica grudada na borda esquerda e o botão de tema na direita,
   a 2 metros um do outro e desalinhados de tudo que está embaixo. */
.topo-principal {
    position: relative;
    background: var(--topo-fundo);
    color: var(--topo-texto);
    border-bottom: 1px solid var(--topo-borda);
}
/* Fio de acento no topo absoluto da página — a assinatura da marca. */
.topo-principal::before {
    content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
    background: var(--grad-acento);
}

/* No mobile é flex simples: sem menu no centro, a grade de 3 colunas só
   criaria uma coluna 1fr estreita que espremeria a marca. A grade entra a
   partir de 900px, junto com o menu (ver breakpoints no fim do arquivo). */
.topo-interno {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-3);
    width: 100%;
    max-width: var(--largura-conteudo);
    margin: 0 auto;
    padding: 0 var(--esp-4);
    min-height: 70px;
}

.site-marca {
    display: flex; align-items: center; gap: var(--esp-3);
    font-weight: 700;
    letter-spacing: -.025em;
    font-size: var(--texto-md);
    min-width: 0;
    justify-self: start;
}
.topo-principal .site-marca { color: var(--topo-texto); }
.site-marca-icone {
    width: 38px; height: 38px; flex-shrink: 0;
    display: grid; place-items: center;
    background: var(--grad-acento);
    color: #FFF;
    border-radius: var(--raio);
    box-shadow: var(--sombra-acento);
    font-size: var(--texto-lg);
    transition: transform var(--vel) var(--curva-mola);
}
.site-marca-icone img { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; }

/* A logomarca respeita a própria proporção: altura fixa, largura livre.
   Encaixá-la no ladrilho quadrado de 38px do ícone deformava a arte e
   deixava o texto ilegível — a logo não é um ícone. */
.site-marca-logo {
    /* Teto, não alvo: logomarca menor que isso fica no tamanho dela. */
    max-height: 55px;
    width: auto;
    max-width: 210px;
    object-fit: contain;
    flex-shrink: 0;
}
.site-marca-texto { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.site-marca-nome { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site-marca-sub {
    font-size: var(--texto-xs); font-weight: 500;
    color: var(--topo-texto-fraco); letter-spacing: .02em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* --------------------------------------------------------------- NAVEGAÇÃO
   Sem pílula e sem fundo: os itens ocupam a altura inteira da barra e o item
   ativo é marcado por um traço rente à base dela. É a leitura de aba — o
   usuário entende "estou nesta seção" sem que nada precise ganhar forma. */
.site-nav {
    display: none; align-self: stretch;
    align-items: stretch; gap: var(--esp-1);
    justify-self: center;
}
.site-nav > * { position: relative; display: flex; }
.nav-link {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 0 var(--esp-4);
    border-radius: 0;
    font-size: var(--texto-base);
    font-weight: 550;
    color: var(--topo-texto-suave);
    white-space: nowrap;
    transition: color var(--vel-rapida) var(--curva);
}
.nav-link:hover { color: var(--topo-texto); }
.nav-link.ativo { color: var(--topo-texto); font-weight: 600; }
/* Traço do item ativo, rente à borda inferior da barra. */
.nav-link.ativo::after {
    content: ''; position: absolute;
    left: var(--esp-3); right: var(--esp-3); bottom: 0;
    height: 2px;
    background: var(--acento);
    animation: nav-traco var(--vel-lenta) var(--curva-saida);
}
@keyframes nav-traco { from { transform: scaleX(.2); opacity: 0; } }
.nav-link .seta { font-size: 10px; transition: transform var(--transicao); }
.menu-raiz.aberto .nav-link .seta { transform: rotate(180deg); }

/* Painel do menu suspenso da navegação — mais largo que o menu genérico e
   com descrição em cada item, porque aqui ele vende o que existe no site. */
.submenu {
    position: absolute; z-index: var(--z-flutuante);
    top: calc(100% + 10px); left: 0;
    width: 300px;
    padding: var(--esp-2);
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-lg);
    box-shadow: var(--sombra-xl);
    opacity: 0; visibility: hidden;
    transform: translateY(-8px) scale(.98);
    transform-origin: top left;
    transition: opacity var(--vel) var(--curva),
                transform var(--vel) var(--curva-saida),
                visibility var(--vel);
}
.menu-raiz.aberto .submenu { opacity: 1; visibility: visible; transform: none; }
.submenu-item {
    display: flex; align-items: flex-start; gap: var(--esp-3);
    padding: var(--esp-3);
    border-radius: var(--raio);
    transition: background-color var(--vel-rapida) var(--curva);
}
.submenu-item:hover { background: var(--superficie-2); }
.submenu-item i {
    width: 32px; height: 32px; flex-shrink: 0;
    display: grid; place-items: center;
    border-radius: var(--raio-sm);
    background: var(--acento-suave);
    color: var(--acento);
    font-size: var(--texto-base);
}
.submenu-item b { display: block; font-size: var(--texto-base); font-weight: 600; }
.submenu-item span { display: block; font-size: var(--texto-sm); color: var(--texto-suave); line-height: 1.4; }

/* ------------------------------------------------------------------ AÇÕES */
.site-acoes {
    display: flex; align-items: center; gap: var(--esp-2);
    justify-self: end;
}

/* SELETORES — no celular, faixa própria abaixo da linha da marca.
   Com logomarca larga e mais de uma categoria cadastrada, o topo tinha de
   caber marca + categoria + temporada + tema + menu na mesma linha: os
   seletores encolhiam até virar dois retângulos espremidos em cima do
   logotipo. Na linha de baixo cada um fica com metade da tela.

   Bloco em `max-width` e não mobile-first: o desktop é o estado ORIGINAL do
   cabeçalho, e escrevê-lo como "desfazer o que o celular fez" espalharia a
   correção por dois lugares — foi assim que o `padding` do topo acabou
   vazando de um modo para o outro. */
@media (max-width: 899px) {
    .topo-interno {
        flex-wrap: wrap;
        /* O `min-height: 70px` valia para UMA linha e passou a valer para as
           duas somadas: a fileira da marca ficou com a altura exata do
           logotipo e ele encostou na borda de cima. O respiro agora é padding
           explícito, que não depende de quantas linhas existem. */
        min-height: 0;
        padding-top: var(--esp-2);
        padding-bottom: var(--esp-2);
        row-gap: var(--esp-2);
    }

    /* `.site-acoes` DISSOLVIDA. Os seletores são filhos dela, não do
       `.topo-interno`; sem isso o `flex: 0 0 100%` mediria a largura das AÇÕES,
       e a faixa começava depois da marca, com 67px de recuo à esquerda. */
    .site-acoes { display: contents; }

    /* EFEITO COLATERAL da dissolução: tema e menu deixaram de ser um grupo e
       viraram itens soltos, que o `space-between` do topo espalhou pela linha —
       o tema parava no meio, entre a marca e o menu.

       `margin-left: auto` no botão de TEMA recria o grupo: ele absorve toda a
       folga da linha, e tema e menu voltam a andar colados na direita,
       separados só pelo `gap`.

       O alvo é o atributo do próprio botão, não `:first-of-type`: aquele
       pseudo conta por TAG, e bastava o selo "ao vivo" aparecer na linha para
       a conta mudar e os botões se espalharem de novo.

       SEM o `>` a partir de `.topo-interno`: `display: contents` dissolve a
       CAIXA de `.site-acoes`, não a árvore do DOM. O botão continua sendo
       filho dela, então `.topo-interno > …` não casa com nada — e a regra
       ficava sem efeito, com o `space-between` espalhando os três itens. */
    .site-acoes > [data-alternar-tema] { margin-left: auto; }

    .site-seletores {
        order: 3;
        /* `1` no encolher e `min-width: 0`: com o encolhimento travado a faixa
           não podia ficar menor que a soma INTRÍNSECA dos dois botões, que
           passava da largura da tela — ela vazava 31px para fora do padding. */
        flex: 0 1 100%;
        min-width: 0;
        /* Flex e não grid: `auto-fit` com `minmax(0, 1fr)` gera dezenas de
           trilhas vazias (mínimo zero cabe infinitas vezes). Com `flex: 1` em
           cada filho, dois seletores dividem ao meio e um sozinho ocupa tudo —
           sem contar quantos existem. */
        display: flex;
        gap: var(--esp-2);
    }
    .site-seletores > * { flex: 1; min-width: 0; display: flex; }

    /* `min-width: 0` em toda a cadeia — botão, texto e nome. Sem isso cada item
       flex respeita o `min-width: auto`, que é a largura do CONTEÚDO:
       "Masculino" media 198px numa coluna de 175, os dois botões se
       sobrepunham e saíam de tamanhos diferentes. O que cede é o nome, com
       reticências; os ícones das pontas não encolhem, porque são eles que
       identificam o seletor de relance. */
    .site-seletores .btn-temporada { flex: 1; justify-content: center; min-width: 0; }
    .site-seletores .btn-temporada-texto { min-width: 0; }
    .site-seletores .btn-temporada-texto b {
        min-width: 0;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .site-seletores .btn-temporada > i { flex-shrink: 0; }
}
/* O rótulo "Categoria"/"Temporada" continua ESCONDIDO no celular, como já
   estava. A faixa existe para desafogar o topo — devolver duas palavras em
   caixa alta gastaria de novo a largura que ela veio liberar. O ícone (grupo
   ou troféu) já distingue os dois, e o menu que abre traz o título escrito. */
/* Os botões da barra escura precisam do próprio contraste — os tokens de
   superfície do .btn-icone são pensados para fundo claro. */
.acao-topo { color: var(--topo-texto-suave); }
.acao-topo:hover { background: var(--topo-hover); color: var(--topo-texto); }
.btn-vivo { display: inline-flex; align-items: center; }

/* ------------------------------------------------- SELETOR DE TEMPORADA
   Mora na coluna das AÇÕES da grade do topo. Se entrasse na coluna central,
   deslocaria o menu — é ela que garante a centralização. */
.btn-temporada {
    display: inline-flex; align-items: center; gap: var(--esp-2);
    padding: 6px var(--esp-3);
    border: 1px solid var(--topo-borda);
    border-radius: var(--raio-sm);
    color: var(--topo-texto-suave);
    transition: background-color var(--vel-rapida) var(--curva), color var(--vel-rapida) var(--curva);
}
.btn-temporada:hover { background: var(--topo-hover); color: var(--topo-texto); }
.btn-temporada > i:first-child { color: var(--ouro); }
.btn-temporada .seta { font-size: 9px; }
.menu-raiz.aberto .btn-temporada .seta { transform: rotate(180deg); }
.btn-temporada-texto { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.btn-temporada-texto small {
    font-size: 9px; text-transform: uppercase; letter-spacing: .1em;
    color: var(--topo-texto-fraco);
}
.btn-temporada-texto b { font-size: var(--texto-base); font-weight: 700; color: var(--topo-texto); }

.menu-temporadas { min-width: 350px; max-height: 70vh; overflow-y: auto; }
.menu-temporadas .menu-item { align-items: center; }
.menu-temporadas .menu-item.ativo { background: var(--acento-suave); color: var(--acento-forte); }
.menu-temporadas .menu-item.ativo i:first-child { color: var(--acento); }
.menu-item-sub { display: block; font-size: var(--texto-xs); color: var(--texto-fraco); }

/* Em telas estreitas só o ano cabe. */
@media (max-width: 560px) {
    .btn-temporada-texto small { display: none; }

    /* O menu deixa de ser ancorado no BOTÃO e passa a ser ancorado na TELA.
       Ancorado no botão (`position: absolute; right: 0`) ele abre da direita
       para a esquerda a partir de um gatilho que fica no meio do topo — com
       350px de largura mínima num aparelho de 360px, ele saía pela esquerda e
       o título "Competições" aparecia cortado.
       Nenhum ajuste de largura resolveria isso de forma confiável: o quanto
       sobra à esquerda depende de onde o botão parou, que muda com o tamanho
       do nome do campeonato. Preso à tela, o menu não tem como escapar. */
    .seletor-temporada .menu-temporadas {
        position: fixed;
        /* `--altura-topo` (64px) é o valor de projeto, mas o cabeçalho fecha
           em 71px com o padding e a borda reais — usá-lo aqui fazia o menu
           nascer 7px POR CIMA da barra. `anchor-name` ainda não é confiável,
           então o JS mede o cabeçalho e publica a altura real em
           `--topo-real`; o token fica como reserva para o primeiro paint. */
        top: calc(var(--topo-real, var(--altura-topo)) + 8px);
        left: var(--esp-3);
        right: var(--esp-3);
        min-width: 0;
        width: auto;
        max-height: calc(100dvh - var(--topo-real, var(--altura-topo)) - var(--esp-6));
        transform-origin: top center;
    }
}

/* --------------------------------------------------- FAIXA 2 (contexto) */
.topo-faixa-links a.ativo { background: var(--acento-suave); color: var(--acento-forte); }
.topo-faixa-links .temporada {
    font-size: var(--texto-xs); font-weight: 600;
    color: var(--texto-fraco);
    font-variant-numeric: tabular-nums;
}
.topo-faixa-links a.ativo .temporada { color: inherit; opacity: .75; }
/* Situação da competição, escrita. Substituiu o `.ponto-ativo`, um círculo
   verde de 6px cujo significado dependia de um tooltip — que no celular não
   abre. */
.selo-temporada {
    flex-shrink: 0;
    padding: 3px 8px;
    border-radius: var(--raio-full);
    font-size: 9px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .06em;
    white-space: nowrap;
    line-height: 1.4;
}
.selo-viva { background: var(--sucesso-suave); color: var(--sucesso); }
.selo-fim  { background: var(--superficie-alt); color: var(--texto-fraco); }

/* ------------------------------------------------------------- GAVETA MOBILE */
.btn-menu-site { display: inline-flex; }
.gaveta-site {
    position: fixed; inset: 0 0 0 auto; z-index: var(--z-lateral);
    width: min(88vw, 320px);
    display: flex; flex-direction: column;
    padding: var(--esp-4);
    background: var(--superficie);
    border-left: 1px solid var(--borda);
    transform: translateX(100%);
    transition: transform var(--vel-lenta) var(--curva-saida);
    overflow-y: auto;
}
.gaveta-site.aberta { transform: none; box-shadow: var(--sombra-xl); }
.gaveta-cabeca-site {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: var(--esp-4);
    margin-bottom: var(--esp-2);
    border-bottom: 1px solid var(--borda);
}
.gaveta-link {
    display: flex; align-items: center; gap: var(--esp-3);
    padding: var(--esp-3);
    border-radius: var(--raio);
    font-weight: 550;
    color: var(--texto-suave);
    transition: background-color var(--vel-rapida) var(--curva), color var(--vel-rapida) var(--curva);
}
.gaveta-link i { width: 20px; text-align: center; color: var(--texto-fraco); }
.gaveta-link:hover, .gaveta-link.ativo { background: var(--superficie-alt); color: var(--texto); }
.gaveta-link.ativo i { color: var(--acento); }
.gaveta-secao {
    padding: var(--esp-4) var(--esp-3) var(--esp-1);
    font-size: var(--texto-xs); font-weight: 600;
    text-transform: uppercase; letter-spacing: .07em;
    color: var(--texto-fraco);
}

/* ============================================================== PRELOADER ===
   Cortina de abertura. A saída é feita por ANIMAÇÃO CSS com atraso, e não só
   por JS: se um script quebrar, a cortina some sozinha e o site nunca fica
   preso atrás dela. O JS apenas antecipa a saída quando a página termina de
   carregar antes disso. */
.preloader {
    position: fixed; inset: 0; z-index: 500;
    display: grid; place-content: center; justify-items: center;
    gap: var(--esp-4);
    background: var(--fundo);
    animation: preloader-saida var(--vel-lenta) var(--curva) 2.5s forwards;
}
.preloader.sumiu { animation: preloader-saida var(--vel-lenta) var(--curva) forwards; }
@keyframes preloader-saida {
    to { opacity: 0; visibility: hidden; }
}
.preloader-bola {
    width: 64px; height: 64px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--grad-acento);
    color: #FFF;
    font-size: var(--texto-2xl);
    box-shadow: var(--sombra-acento);
    animation: bola-quica 1s var(--curva) infinite;
}
.preloader-bola i { animation: bola-gira 1.6s linear infinite; }
@keyframes bola-quica { 50% { transform: translateY(-14px); } }
@keyframes bola-gira { to { transform: rotate(360deg); } }
.preloader-marca {
    font-weight: 700; letter-spacing: -.02em;
    color: var(--texto-suave);
    font-size: var(--texto-sm);
    text-transform: uppercase; letter-spacing: .12em;
}

/* ================================================================= PALCO === */
/* O respiro até o rodapé é declarado UMA vez, aqui. Antes o palco fechava com
   64px de padding e o rodapé abria com 80px de margem: as duas medidas se
   somavam em 144px de vão morto no fim de toda página. */
.site-palco {
    flex: 1;
    width: 100%;
    max-width: var(--largura-conteudo);
    margin: 0 auto;
    padding: var(--esp-6) var(--esp-4) var(--esp-12);
}
.site-palco > * + * { margin-top: var(--esp-6); }

/* Modo "faixas": o palco deixa de ser caixa e passa a ser trilho. Cada faixa
   sangra de ponta a ponta e centraliza o próprio conteúdo num `.container`.
   É assim, e não com truques de `100vw`, porque `100vw` inclui a barra de
   rolagem e produz uns 15px de transbordo horizontal em toda a página. */
/* No modo faixas quem dá o respiro final é a última faixa, que já tem o
   próprio padding: qualquer sobra aqui vira uma tira de fundo sem conteúdo
   entre a última seção e o rodapé. */
.palco-largo {
    max-width: none;
    padding: 0;
}
.palco-largo > * + * { margin-top: 0; }

.container {
    width: 100%;
    max-width: var(--largura-conteudo);
    margin: 0 auto;
    padding-inline: var(--esp-4);
}

/* Faixas: alternância de fundo é o que dá ritmo à página. */
.faixa { padding: var(--esp-12) 0; }
.faixa-clara  { background: var(--fundo); }
.faixa-branca { background: var(--superficie); border-block: 1px solid var(--borda); }
.faixa-escura {
    position: relative;
    background: var(--topo-fundo);
    background-image: var(--grad-palco);
    color: var(--topo-texto);
}
.faixa-escura h1, .faixa-escura h2, .faixa-escura h3 { color: var(--topo-texto); }
.faixa-escura .secao-titulo h2 { color: var(--topo-texto); }
/* Malha discreta: textura sem virar enfeite. */
.faixa-escura::before {
    content: ''; position: absolute; inset: 0;
    background-image: linear-gradient(rgb(255 255 255 / .05) 1px, transparent 1px),
                      linear-gradient(90deg, rgb(255 255 255 / .05) 1px, transparent 1px);
    background-size: 52px 52px;
    -webkit-mask-image: radial-gradient(80% 70% at 50% 30%, #000, transparent);
    mask-image: radial-gradient(80% 70% at 50% 30%, #000, transparent);
    pointer-events: none;
}
.faixa-escura > * { position: relative; z-index: 1; }

.secao-titulo {
    display: flex; align-items: baseline; gap: var(--esp-3);
    margin-bottom: var(--esp-4);
}
.secao-titulo h2 { font-size: var(--texto-lg); }
.secao-titulo > a, .secao-titulo .linha-fim {
    margin-left: auto;
    font-size: var(--texto-sm);
    color: var(--texto-suave);
    font-weight: 550;
    display: inline-flex; align-items: center; gap: 5px;
    transition: color var(--transicao), gap var(--transicao);
}
.secao-titulo > a:hover { color: var(--acento); gap: var(--esp-2); }

/* ================================================================== CAPA === */
.capa {
    position: relative;
    overflow: hidden;
    padding: var(--esp-10) var(--esp-6);
    border: 1px solid var(--borda);
    border-radius: var(--raio-2xl);
    background: var(--superficie);
    background-image: var(--grad-palco);
}
/* Malha sutil por cima do gradiente: dá textura sem virar enfeite. */
.capa::after {
    content: ''; position: absolute; inset: 0;
    background-image: linear-gradient(var(--borda) 1px, transparent 1px),
                      linear-gradient(90deg, var(--borda) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(60% 60% at 50% 40%, #000, transparent);
    mask-image: radial-gradient(60% 60% at 50% 40%, #000, transparent);
    opacity: .5;
    pointer-events: none;
}
.capa > * { position: relative; z-index: 1; }
.capa-centro { text-align: center; }

/* Capa em duas colunas: texto à esquerda, painel de dados à direita.
   Uma capa só de texto ocupa meia largura e deixa a outra metade vazia em
   monitor grande — no celular as duas viram uma coluna só. */
.capa-duas { display: grid; grid-template-columns: 1fr; gap: var(--esp-6); align-items: center; }
.capa-painel {
    padding: var(--esp-4) var(--esp-5);
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-lg);
    box-shadow: var(--sombra-sm);
}
.capa-painel-linha {
    display: flex; align-items: center; gap: var(--esp-3);
    padding: var(--esp-3) 0;
    border-bottom: 1px solid var(--borda);
}
.capa-painel-linha:last-child { border-bottom: 0; }
.capa-painel-linha i {
    width: 30px; height: 30px; flex-shrink: 0;
    display: grid; place-items: center;
    border-radius: var(--raio-sm);
    background: var(--acento-suave);
    color: var(--acento);
    font-size: var(--texto-sm);
}
.capa-painel-linha span { flex: 1; color: var(--texto-suave); }
.capa-painel-linha b {
    font-size: var(--texto-xl); font-weight: 750;
    font-variant-numeric: tabular-nums;
}
.capa h1 {
    font-size: var(--texto-3xl);
    letter-spacing: -.035em;
    margin-bottom: var(--esp-3);
}
.capa p { color: var(--texto-suave); font-size: var(--texto-md); }
.capa-centro p { margin-inline: auto; }
.capa-logo { max-height: 76px; margin: 0 auto var(--esp-5); }

.selo {
    display: inline-flex; align-items: center; gap: var(--esp-2);
    padding: 5px var(--esp-3);
    border-radius: var(--raio-full);
    background: var(--acento-suave);
    color: var(--acento-forte);
    font-size: var(--texto-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom: var(--esp-4);
}

/* Números da capa */
.capa-numeros {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: var(--esp-4);
    margin-top: var(--esp-8);
    padding-top: var(--esp-6);
    border-top: 1px solid var(--borda);
}
/* `fit-content` para a caixa abraçar o número: como item de grade ela ocuparia
   a coluna inteira (~270px) com o texto encostado à esquerda, e qualquer coisa
   ancorada nela — tooltip, por exemplo — miraria o centro da coluna vazia em
   vez do número. */
.capa-numero { width: fit-content; }
.capa-numero b {
    display: block;
    font-size: var(--texto-2xl); font-weight: 700;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}
.capa-numero span {
    font-size: var(--texto-xs); color: var(--texto-suave);
    text-transform: uppercase; letter-spacing: .06em;
}

/* ========================================================= JOGO EM DESTAQUE */
.destaque-jogo {
    position: relative; overflow: hidden;
    padding: var(--esp-8) var(--esp-5);
    border: 1px solid var(--borda);
    border-radius: var(--raio-xl);
    background: var(--superficie);
    text-align: center;
}
.destaque-jogo.vivo { border-color: color-mix(in srgb, var(--erro) 45%, var(--borda)); }
.destaque-jogo.vivo::before {
    content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
    background: linear-gradient(90deg, transparent, var(--erro), transparent);
    background-size: 200% 100%;
    animation: varredura 2.2s linear infinite;
}
@keyframes varredura { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* `align-items: start` alinha os dois brasões pela MESMA linha de topo. Com
   `center`, a coluna do campeão — mais alta por causa do selo embaixo — era
   centralizada e o brasão dele subia alguns pixels em relação ao do rival.
   Só o placar continua no centro vertical. */
.confronto {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: start;
    gap: var(--esp-4);
    margin: var(--esp-10) 0 var(--esp-4);
}
.confronto-placar { align-self: center; }
.confronto-time {
    display: flex; flex-direction: column; align-items: center; gap: var(--esp-3);
    min-width: 0;
}
.confronto-time .escudo, .confronto-time .escudo-vazio { width: 84px; height: 84px; transition: transform var(--vel) var(--curva-mola); }
.confronto-time:hover .escudo { transform: scale(1.08); }
/* O `:not()` exclui o selo do vencedor, que é uma legenda pequena e tem
   tamanho próprio — sem isso ele herdava daqui os 15px e continuava grande. */
.confronto-time > span:not(.selo-vencedor) { font-weight: 650; font-size: var(--texto-md); text-align: center; }
.confronto-placar {
    font-size: var(--texto-4xl);
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.04em;
    line-height: 1;
}
/* -------------------------------------------- PLACAR FINAL COM VENCEDOR
   A cor do resultado vive nos BRILHOS DE CANTO do próprio container — os
   mesmos halos suaves que o `--grad-palco` já desenhava, agora tingidos:
   canto esquerdo com o resultado do mandante, direito com o do visitante.
   Verde para quem ganhou, vermelho para quem perdeu, laranja no empate.

   Nada de véu de fundo atrás de cada time nem caixa com padding: isso
   desenhava dois retângulos coloridos no meio do cartão e matava o layout. */
.placar-final {
    background-image:
        radial-gradient(1200px 480px at 12% -10%,
            color-mix(in srgb, var(--brilho-casa, var(--indigo-500)) 16%, transparent), transparent 60%),
        radial-gradient(900px 420px at 92% 8%,
            color-mix(in srgb, var(--brilho-fora, var(--ciano-500)) 16%, transparent), transparent 62%);
}

/* A única marca sobre o time é o anel do escudo — sutil, já existia. */
.confronto-time { position: relative; }
.confronto-time.venceu  { --resultado: var(--sucesso); }
.confronto-time.perdeu  { --resultado: var(--erro); }
.confronto-time.empatou { --resultado: var(--alerta); }
.confronto-time.venceu > span:not(.selo-vencedor) { color: var(--texto); font-weight: 750; }
/* O anel do resultado segue a SILHUETA da arte, não a caixa.
   `box-shadow` desenha um retângulo em volta do elemento — sobre um escudo
   recortado isso vira uma moldura quadrada em cima de um brasão que não é
   quadrado. `drop-shadow` respeita o alfa e contorna o desenho de verdade.

   O espaço reservado (sem arte) continua com o anel retangular: ali a caixa É
   a forma, e um brilho difuso em volta de um ícone cinza não se leria. */
.confronto-time.venceu .escudo,
.confronto-time.empatou .escudo {
    filter: drop-shadow(0 0 1px var(--resultado))
            drop-shadow(0 0 50px color-mix(in srgb, var(--resultado) 55%, transparent));
}
.confronto-time.venceu .escudo-vazio,
.confronto-time.empatou .escudo-vazio {
    box-shadow: 0 0 0 3px var(--resultado), var(--sombra-lg);
}
/* Quem perdeu fica quase em preto e branco: a cor é do campeão. O anel
   também sai do vermelho e vira borda neutra — anel colorido brigaria com o
   escudo dessaturado. */
.confronto-time.perdeu .escudo {
    /* Só a dessaturação. Quem perdeu não ganha contorno nenhum — o realce é
       do campeão, e uma moldura neutra em volta da arte é exatamente o que
       este ajuste veio remover. */
    filter: grayscale(.92);
}
.confronto-time.perdeu .escudo-vazio {
    filter: grayscale(.92);
    box-shadow: 0 0 0 3px var(--borda-forte), var(--sombra);
}
.confronto-time.perdeu { opacity: .8; }

.selo-vencedor {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 10px; font-weight: 700;
    letter-spacing: .04em;
    color: var(--texto-suave);
    animation: selo-entra var(--vel-lenta) var(--curva-mola) both;
    animation-delay: .9s;
}
.selo-vencedor i { color: var(--ouro); font-size: var(--texto-sm); }
@keyframes selo-entra { from { transform: translateY(-4px); opacity: 0; } }

/* --------------------------------------------- CONSAGRAÇÃO DO VENCEDOR
   Ao abrir a página o brasão do vencedor dá um salto curto, o anel de luz
   se expande uma vez e a coroa desce e assenta. Roda UMA vez, dura menos
   de 1,5s e não se repete — é um respiro, não um enfeite piscando.
   `prefers-reduced-motion` desliga tudo (ver o bloco no fim do arquivo).

   `.consagrando` é retirada pelo JS (com timeout de reserva, porque em aba
   de segundo plano `animationend` nunca dispara). Enquanto a animação existe
   com `fill: both`, o transform dela VENCE o `:hover` do escudo — e o time
   campeão era justamente o único que não reagia ao mouse. */
.confronto-time.venceu.consagrando .escudo,
.confronto-time.venceu.consagrando .escudo-vazio {
    animation: consagrar 1.1s var(--curva-mola) both;
}
@keyframes consagrar {
    0%   { transform: scale(.86) translateY(6px); }
    55%  { transform: scale(1.06) translateY(-4px); }
    100% { transform: none; }
}
/* Anel de luz: um pulso só, saindo do brasão. */
.confronto-time.venceu.consagrando::before {
    content: '';
    /* Centro do anel = centro do BRASÃO, medido na tela: 47px abaixo do topo
       da coluna. E dourado, como era — o verde do resultado já está no anel
       fixo do escudo e nos brilhos de canto. */
    position: absolute; top: 47px; left: 50%;
    width: 84px; height: 84px;
    margin: -42px 0 0 -42px;
    border-radius: 50%;
    border: 2px solid var(--ouro);
    opacity: 0;
    pointer-events: none;
    animation: anel-consagra 1.4s var(--curva-saida) .35s both;
}
@keyframes anel-consagra {
    0%   { opacity: .8; transform: scale(.9); }
    100% { opacity: 0;  transform: scale(2.1); }
}
/* A coroa desce e assenta sobre o brasão. */
.coroa-vencedor {
    position: absolute; top: -26px; left: 50%;
    transform: translateX(-50%);
    color: var(--ouro);
    font-size: var(--texto-lg);
    filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--ouro) 55%, transparent));
    animation: coroa-desce .9s var(--curva-mola) .5s both;
    pointer-events: none;
}
@keyframes coroa-desce {
    0%   { opacity: 0; transform: translate(-50%, -20px) rotate(-18deg); }
    70%  { opacity: 1; transform: translate(-50%, 3px) rotate(4deg); }
    100% { opacity: 1; transform: translate(-50%, 0) rotate(0); }
}

.confronto-placar { display: inline-flex; align-items: baseline; gap: var(--esp-3); }
.confronto-placar b { font-weight: 800; color: var(--texto-fraco); }
/* O placar acompanha a mesma leitura de cor do bloco de cada time. */
.confronto-placar b.ganhou  { color: var(--sucesso); }
.confronto-placar b.perdeu  { color: var(--erro); }
.confronto-placar b.empatou { color: var(--alerta); }

/* --------------------------------------------------- FICHA DA PARTIDA
   Data, duração e rodada em pílulas separadas. Numa linha só, com pontinhos
   entre elas, os três dados viravam uma frase e nenhum se lia de relance. */
.ficha-partida {
    display: flex; justify-content: center; flex-wrap: wrap;
    gap: var(--esp-3);
    margin-top: var(--esp-4);
}
.ficha-partida-item {
    display: inline-flex; align-items: center; gap: var(--esp-2);
    padding: var(--esp-2) var(--esp-4);
    border: 1px solid var(--borda);
    border-radius: var(--raio-full);
    background: var(--superficie);
}
.ficha-partida-item > i { color: var(--acento); font-size: var(--texto-base); }
.ficha-partida-item > span { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.ficha-partida-item b { font-size: var(--texto-base); font-weight: 700; }
.ficha-partida-item small {
    font-size: 10px; color: var(--texto-fraco);
    text-transform: uppercase; letter-spacing: .06em;
}

/* --------------------------------------- NÚMEROS (70%) + LINHA DO TEMPO (30%)
   `align-items: stretch` (padrão do grid) é o que mantém os dois cartões da
   MESMA altura — sem isso um fica curto e a dupla vira mosaico. */
.grade-jogo { display: grid; grid-template-columns: 1fr; gap: var(--esp-5); }
.grade-jogo > .cartao { display: flex; flex-direction: column; min-width: 0; }
.grade-jogo > .cartao > .cartao-corpo { flex: 1; }
/* A linha do tempo é a que cresce sem limite: ela rola dentro da própria
   altura em vez de esticar o cartão vizinho. */
.cartao-rolavel { max-height: 420px; overflow-y: auto; }

/* ---------------------------------------------------- SÚMULA EM COLUNAS */
.sumula-colunas { display: grid; grid-template-columns: 1fr; gap: var(--esp-6); }
.sumula-time { min-width: 0; }
.sumula-time .titulo-secao { margin-top: 0; }

/* ---------------------------------------------- COMPARATIVO DA PARTIDA */
.comparativo { margin-bottom: var(--esp-5); }
.comparativo-topo {
    display: flex; align-items: baseline; gap: var(--esp-3);
    margin-bottom: 6px;
    font-size: var(--texto-sm);
}
.comparativo-topo span {
    flex: 1; text-align: center;
    color: var(--texto-suave);
    text-transform: uppercase; letter-spacing: .06em; font-size: var(--texto-xs);
}
.comparativo-topo b { font-size: var(--texto-md); color: var(--texto-suave); font-weight: 700; }
.comparativo-topo b.lidera-casa { color: var(--time-casa); }
.comparativo-topo b.lidera-fora { color: var(--time-fora); }

/* Duas metades crescendo cada uma para o seu lado, a partir do centro. */
.comparativo-barra {
    display: flex;
    height: 10px;
    border-radius: var(--raio-full);
    background: var(--superficie-alt);
    overflow: hidden;
}
.comparativo-barra span {
    display: block;
    width: 0;
    transition: width var(--vel-cena) var(--curva-saida);
}
/* Uma cor por TIME — mandante e visitante, sempre as mesmas do sistema. As
   metades espelham o gradiente (claro nas pontas, forte no meio) para que se
   encontrem no mesmo tom: com gradientes na mesma direção aparecia um corte
   seco no centro da barra. */
.comparativo-barra .lado-casa {
    --tom: var(--time-casa);
    background: linear-gradient(90deg, color-mix(in srgb, var(--tom) 62%, transparent), var(--tom));
    border-radius: var(--raio-full) 0 0 var(--raio-full);
    margin-left: auto;
}
.comparativo-barra .lado-fora {
    --tom: var(--time-fora);
    background: linear-gradient(90deg, var(--tom), color-mix(in srgb, var(--tom) 62%, transparent));
    border-radius: 0 var(--raio-full) var(--raio-full) 0;
    margin-right: auto;
}

.legenda-cor {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 3px;
    vertical-align: -1px;
    margin-right: 3px;
}
.legenda-cor.casa { background: var(--time-casa); }
.legenda-cor.fora { background: var(--time-fora); }
/* A largura só é aplicada quando o cartão entra na tela: a barra cresce na
   frente do usuário em vez de já aparecer pronta. */
.revelado .comparativo-barra span { width: var(--parte); }

/* --------------------------------------------- DESTAQUES DA PARTIDA */
.destaque-partida {
    display: flex; flex-direction: column; gap: var(--esp-3);
    padding: var(--esp-5);
    transition: transform var(--transicao), border-color var(--transicao), box-shadow var(--transicao);
}
.destaque-partida:hover {
    transform: translateY(-3px);
    border-color: var(--borda-forte);
    box-shadow: var(--sombra-md);
}
.destaque-partida-rotulo {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: var(--texto-xs); font-weight: 700;
    text-transform: uppercase; letter-spacing: .07em;
    color: var(--texto-suave);
}
.destaque-partida-rotulo.acento i  { color: var(--acento); }
.destaque-partida-rotulo.sucesso i { color: var(--sucesso); }
.destaque-partida-rotulo.info i    { color: var(--info); }

.destaque-partida-corpo { display: flex; align-items: center; gap: var(--esp-3); min-width: 0; }
/* A classe explícita evita pegar o AVATAR, que também é um span filho: ele
   virava um flex-column e o ícone de silhueta subia para o topo do círculo,
   porque em coluna quem centraliza na vertical é `justify-content`, não o
   `align-items` do `place-items`. */
.destaque-partida-texto { display: flex; flex-direction: column; min-width: 0; }
.destaque-partida-corpo b {
    font-size: var(--texto-md); font-weight: 700;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.destaque-partida-corpo small { color: var(--texto-suave); font-size: var(--texto-xs); }

.destaque-partida-valor {
    align-self: flex-start;
    padding: 3px var(--esp-3);
    border-radius: var(--raio-full);
    font-size: var(--texto-sm); font-weight: 750;
    font-variant-numeric: tabular-nums;
    background: var(--superficie-alt);
    color: var(--texto);
}
.destaque-partida-valor.acento  { background: var(--acento-suave);  color: var(--acento-forte); }
.destaque-partida-valor.sucesso { background: var(--sucesso-suave); color: var(--sucesso); }
.destaque-partida-valor.info    { background: var(--info-suave);    color: var(--info); }


/* Contagem regressiva */
/* A regressiva vive DENTRO da faixa escura do herói. Ela usava
   `--superficie-2` de fundo (quase branco) e herdava o texto branco da faixa:
   número branco sobre bloco branco, ilegível. Como só existe ali, é estilizada
   para aquele fundo, com o vidro dos demais blocos do herói. */
/* Relógio, não painel de caixinhas: só tipografia, com dois-pontos entre as
   casas. Caixa, borda, fundo e o fio de acento no topo eram quatro camadas de
   moldura em volta de oito dígitos. */
.regressiva {
    display: flex; justify-content: center; gap: 22px;
    margin-top: var(--esp-6);
}
.regressiva-bloco { position: relative; min-width: 42px; text-align: center; }
/* O dois-pontos vive no vão entre as casas, centrado na altura do número. */
.regressiva-bloco + .regressiva-bloco::before {
    content: ':';
    position: absolute; left: -14px; top: -2px;
    font-size: var(--texto-2xl); font-weight: 600;
    line-height: 1.1;
    color: var(--topo-texto-fraco);
    opacity: .5;
}
.regressiva-bloco b {
    display: block;
    font-size: var(--texto-2xl); font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
    line-height: 1.1;
    color: var(--topo-texto);
}
.regressiva-bloco span {
    font-size: 9px;
    color: var(--topo-texto-fraco);
    text-transform: uppercase; letter-spacing: .1em;
}
/* Os segundos são o único campo que muda a cada tique — destacá-los deixa
   claro que o contador está VIVO, e não uma imagem parada. */
.regressiva-bloco:last-child b { color: var(--acento); }

/* ============================================================ TICKER ======= */
.ticker {
    display: flex; align-items: center; gap: 0;
    overflow: hidden;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    background: var(--superficie);
}
.ticker-rotulo {
    flex-shrink: 0;
    align-self: stretch;
    display: flex; align-items: center; gap: var(--esp-2);
    padding: var(--esp-3) var(--esp-4);
    background: var(--superficie-inv);
    color: var(--texto-invertido);
    font-size: var(--texto-xs); font-weight: 700;
    text-transform: uppercase; letter-spacing: .07em;
}
.ticker-trilho { flex: 1; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
.ticker-fita {
    display: flex; align-items: center; gap: var(--esp-6);
    width: max-content;
    padding: var(--esp-3) var(--esp-4);
    animation: correr 42s linear infinite;
}
.ticker:hover .ticker-fita { animation-play-state: paused; }
@keyframes correr { to { transform: translateX(-50%); } }
.ticker-item {
    display: inline-flex; align-items: center; gap: var(--esp-2);
    font-size: var(--texto-sm);
    white-space: nowrap;
    color: var(--texto-suave);
}
.ticker-item b { color: var(--texto); font-variant-numeric: tabular-nums; }
.ticker-item .escudo { width: 22px; height: 22px; }

/* O cartão de jogo (.jogo*) mora em base.css: o PAINEL usa o mesmo componente
   na agenda e na mesa, e o admin nao carrega este arquivo. */

/* Cartão de próximo jogo (vertical, em carrossel) */
.proximo {
    display: flex; flex-direction: column; gap: var(--esp-4);
    min-width: 264px;
    padding: var(--esp-5);
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-lg);
    transition: border-color var(--transicao), box-shadow var(--transicao), transform var(--transicao);
}
.proximo:hover { border-color: var(--borda-forte); box-shadow: var(--sombra-lg); transform: translateY(-3px); }
.proximo-time .escudo { width: 30px; height: 30px; }

/* Carrossel horizontal com rolagem por arrasto/atalho */
.carrossel {
    display: flex; gap: var(--esp-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-bottom: var(--esp-3);
    scrollbar-width: none;
}
.carrossel::-webkit-scrollbar { display: none; }
.carrossel > * { scroll-snap-align: start; flex-shrink: 0; }
.carrossel-controles { display: flex; gap: var(--esp-1); margin-left: auto; }

/* ============================================================ MÍDIA/POSTS == */
.post {
    display: flex; flex-direction: column;
    overflow: hidden;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-lg);
    transition: border-color var(--transicao), box-shadow var(--transicao), transform var(--transicao);
}
.post:hover { border-color: var(--borda-forte); box-shadow: var(--sombra-lg); transform: translateY(-4px); }
.post-capa {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--superficie-alt);
}
.post-capa img, .post-capa > svg {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform var(--vel-cena) var(--curva-saida);
}
.post:hover .post-capa img, .post:hover .post-capa > svg { transform: scale(1.05); }
.post-etiqueta {
    position: absolute; top: var(--esp-3); left: var(--esp-3);
    padding: 4px 10px;
    border-radius: var(--raio-full);
    background: var(--vidro-forte);
    backdrop-filter: var(--desfoque);
    -webkit-backdrop-filter: var(--desfoque);
    font-size: var(--texto-xs); font-weight: 650;
    color: var(--texto);
}
.post-corpo { padding: var(--esp-4) var(--esp-5) var(--esp-5); display: flex; flex-direction: column; gap: var(--esp-2); flex: 1; }
.post-corpo h3 { font-size: var(--texto-md); line-height: 1.35; }
.post-corpo p {
    color: var(--texto-suave); font-size: var(--texto-base);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.post-meta {
    margin-top: auto; padding-top: var(--esp-3);
    display: flex; align-items: center; gap: var(--esp-2);
    font-size: var(--texto-sm); color: var(--texto-fraco);
}

/* Post em destaque: capa grande, texto sobreposto */
.post-heroi {
    position: relative;
    min-height: 340px;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: var(--esp-6);
    overflow: hidden;
    border-radius: var(--raio-xl);
    border: 1px solid var(--borda);
    color: #FFF;
}
/* TRÊS CAMADAS EXPLÍCITAS: imagem (0), véu (1), texto (2).
   O `z-index: 0` aqui não é enfeite — é a correção de um bug que deixou o véu
   invisível desde sempre. A regra `.post-heroi > *` mais abaixo dá `z-index: 1`
   a TODO filho, e a imagem é filho: ela subia para a camada 1 enquanto o
   `::after` ficava em `auto` (0), ou seja, a foto era pintada POR CIMA do
   degradê. O gradiente estava lá, correto, e nunca escureceu nada.

   Pseudo-elemento não é alcançado por `> *` — é essa assimetria que faz o
   problema passar despercebido na leitura do CSS. */
.post-heroi > svg, .post-heroi > img {
    position: absolute; inset: 0;
    z-index: 0;
    width: 100%; height: 100%; object-fit: cover;
    transition: transform var(--vel-cena) var(--curva-saida);
}
.post-heroi:hover > svg, .post-heroi:hover > img { transform: scale(1.04); }
/* VÉU sob o texto. A versão anterior tinha três paradas e clareava rápido
   demais: já na altura do título a opacidade caía para perto de .35, e uma capa
   com uniforme amarelo ou parede clara ali embaixo apagava o texto branco.

   Agora o degradê fica CHEIO até passar do título (0 a 22%) e só então começa a
   abrir. As paradas intermediárias existem para a transição não virar uma
   faixa reta visível no meio da foto — degradê de duas paradas em alpha tem
   emenda perceptível sobre imagem. */
.post-heroi::after {
    content: ''; position: absolute; inset: 0;
    z-index: 1;
    background: linear-gradient(
        to top,
        rgb(12 17 29 / .95)  0%,
        rgb(12 17 29 / .90) 22%,
        rgb(12 17 29 / .70) 42%,
        rgb(12 17 29 / .38) 62%,
        rgb(12 17 29 / .12) 82%,
        transparent        100%
    );
}
/* O texto vai para 2, acima do véu. Era 1 — o mesmo valor que a imagem
   herdava, e empate de z-index resolve por ordem no DOM: a foto vinha depois
   do véu e ganhava. */
.post-heroi > * { position: relative; z-index: 2; }
/* SEM sombra no texto. A legibilidade é responsabilidade do véu, que escurece
   a IMAGEM; sombra desenha um halo em volta das letras e é outra coisa — some
   com a nitidez da tipografia e aparece como borrão sobre fundo já escuro.
   Com o véu em ~.90 na altura do título, o contraste passa de 14:1 sobre
   qualquer capa: não há o que a sombra resolveria. */
.post-heroi h2 {
    color: #FFF;
    font-size: var(--texto-2xl);
    margin-bottom: var(--esp-2);
}
.post-heroi p {
    color: rgb(255 255 255 / .88);
}

/* Galeria */
.galeria { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--esp-3); }
.galeria-item {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--raio);
    border: 1px solid var(--borda);
}
.galeria-item > svg, .galeria-item > img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--vel-lenta) var(--curva-saida); }
.galeria-item:hover > svg, .galeria-item:hover > img { transform: scale(1.08); }
.galeria-item figcaption {
    position: absolute; inset: auto 0 0 0;
    padding: var(--esp-4) var(--esp-3) var(--esp-2);
    background: linear-gradient(to top, rgb(12 17 29 / .85), transparent);
    color: #FFF;
    font-size: var(--texto-sm); font-weight: 550;
}

/* ================================================================ ENQUETE == */
.enquete-opcao {
    position: relative;
    display: block;
    width: 100%;
    padding: var(--esp-3) var(--esp-4);
    margin-bottom: var(--esp-2);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    overflow: hidden;
    text-align: left;
    transition: border-color var(--transicao), background-color var(--transicao);
}
.enquete-opcao:hover { border-color: var(--acento); }
.enquete-barra {
    position: absolute; inset: 0 auto 0 0;
    width: 0;
    background: var(--acento-suave);
    transition: width var(--vel-cena) var(--curva-saida);
}
.enquete-conteudo {
    position: relative;
    display: flex; align-items: center; gap: var(--esp-3);
    font-weight: 550;
}
.enquete-conteudo .pct {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--texto-suave);
    opacity: 0;
    transition: opacity var(--transicao);
}
.enquete.votada .enquete-conteudo .pct { opacity: 1; }
.enquete.votada .enquete-opcao { pointer-events: none; }
.enquete-opcao.escolhida { border-color: var(--acento); }
.enquete-opcao.escolhida .enquete-conteudo .pct { color: var(--acento); }

/* ================================================================= HERÓI ===
   Faixa de abertura: à esquerda o jogo (ou o campeão), à direita o resumo da
   temporada em linhas. Dois conjuntos de dados reais — nada de bloco grande
   com uma frase no meio. */
.heroi { display: grid; grid-template-columns: 1fr; gap: var(--esp-5); align-items: stretch; }

.heroi-painel {
    padding: var(--esp-6);
    border: 1px solid rgb(255 255 255 / .10);
    border-radius: var(--raio-xl);
    background: rgb(255 255 255 / .04);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.heroi-painel-titulo {
    display: flex; align-items: center; gap: var(--esp-2);
    padding-bottom: var(--esp-4);
    margin-bottom: var(--esp-5);
    border-bottom: 1px solid rgb(255 255 255 / .10);
    font-size: var(--texto-sm); font-weight: 700;
    text-transform: uppercase; letter-spacing: .1em;
    color: var(--topo-texto-suave);
}
.heroi-painel-titulo i { color: var(--acento); }

/* Confronto do herói */
.heroi-confronto {
    display: grid; grid-template-columns: 1fr auto 1fr;
    align-items: center; gap: var(--esp-4);
    text-align: center;
}
.heroi-time { display: flex; flex-direction: column; align-items: center; gap: var(--esp-3); min-width: 0; }
.heroi-time > span { font-weight: 650; font-size: var(--texto-md); color: var(--topo-texto); }
.heroi-x {
    font-size: var(--texto-3xl); font-weight: 800;
    letter-spacing: -.04em;
    font-variant-numeric: tabular-nums;
    color: var(--topo-texto);
}
.heroi-vs {
    font-size: var(--texto-sm); font-weight: 800; letter-spacing: .12em;
    color: var(--topo-texto-fraco);
    padding: var(--esp-2) var(--esp-3);
    border: 1px solid rgb(255 255 255 / .10);
    border-radius: var(--raio-full);
}
.heroi-meta {
    margin-top: var(--esp-5);
    display: flex; align-items: center; justify-content: center; gap: var(--esp-4);
    flex-wrap: wrap;
    font-size: var(--texto-sm);
    color: var(--topo-texto-suave);
}
.heroi-meta i { color: var(--acento); margin-right: 5px; }

/* Campeão */
.heroi-campeao { display: flex; align-items: center; gap: var(--esp-5); flex-wrap: wrap; }
/* Ocupa o espaço que sobra ao lado do escudo. Era `style="flex:1;min-width:200px"`
   no HTML, e estilo inline vence media query — o recorte de celular abaixo não
   conseguia zerar o `min-width` para o bloco poder encolher. */
.campeao-dados { flex: 1; min-width: 200px; }
.heroi-campeao h1 { font-size: var(--texto-3xl); letter-spacing: -.035em; }
.heroi-troteu { color: var(--ouro); font-size: var(--texto-xl); }

/* Resumo da temporada, em linhas (como painel de estatística de portal) */
.heroi-linha {
    display: flex; align-items: center; gap: var(--esp-3);
    padding: var(--esp-3) 0;
    border-bottom: 1px solid rgb(255 255 255 / .08);
}
.heroi-linha:last-child { border-bottom: 0; }
.heroi-linha i {
    width: 30px; height: 30px; flex-shrink: 0;
    display: grid; place-items: center;
    border-radius: var(--raio-sm);
    background: rgb(255 255 255 / .07);
    color: var(--acento);
    font-size: var(--texto-sm);
}
.heroi-linha span { flex: 1; color: var(--topo-texto-suave); font-size: var(--texto-base); }
.heroi-linha b {
    font-size: var(--texto-xl); font-weight: 750;
    font-variant-numeric: tabular-nums;
    color: var(--topo-texto);
}

/* ------------------------------------------------------- CRAQUE DA RODADA
   Retrato vertical: o craque é sempre UM, então ele merece o painel inteiro
   em vez de uma linha de 60px no topo de um bloco vazio. */
.craque {
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
    gap: var(--esp-3);
    padding-top: var(--esp-2);
}

.craque-retrato {
    position: relative;
    width: 132px; height: 132px;
    border-radius: 50%;
    padding: 4px;
    background: var(--grad-acento);
    box-shadow: var(--sombra-acento);
    flex-shrink: 0;
    transition: transform var(--vel) var(--curva-mola);
}
.craque:hover .craque-retrato { transform: scale(1.04); }
.craque-retrato img {
    width: 100%; height: 100%;
    border-radius: 50%;
    object-fit: cover;
    /* O enquadramento é 1:1 e centrado; sem isto, num retrato de corpo o
       recorte redondo corta a cabeça e sobra camisa. */
    object-position: top center;
    display: block;
}
.craque-semfoto {
    width: 100%; height: 100%;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--superficie-inv);
    color: var(--topo-texto-fraco);
    font-size: var(--texto-3xl);
}
.craque-numero {
    position: absolute; right: -2px; bottom: -2px;
    min-width: 34px; height: 34px;
    display: grid; place-items: center;
    padding-inline: 6px;
    border-radius: var(--raio-full);
    border: 1px solid var(--topo-fundo);
    background: var(--ouro);
    color: var(--cinza-900);
    font-size: var(--texto-base); font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.craque-nome {
    font-size: var(--texto-xl); font-weight: 750;
    letter-spacing: -.02em;
    color: var(--topo-texto);
    line-height: 1.15;
}
.craque-clube {
    display: inline-flex; align-items: center; gap: var(--esp-2);
    font-size: var(--texto-base);
    color: var(--topo-texto-suave);
}
.craque-pontos {
    display: inline-flex; align-items: baseline; gap: 5px;
    padding: 5px var(--esp-4);
    border-radius: var(--raio-full);
    background: rgb(255 255 255 / .07);
    color: var(--topo-texto-suave);
    font-size: var(--texto-sm); font-weight: 600;
}
.craque-pontos b {
    font-size: var(--texto-lg); font-weight: 800;
    color: var(--acento);
    font-variant-numeric: tabular-nums;
}

.craque-numeros {
    display: grid; grid-template-columns: repeat(3, 1fr);
    width: 100%;
    margin-top: var(--esp-2);
    padding-top: var(--esp-4);
    border-top: 1px solid rgb(255 255 255 / .08);
}
.craque-numeros > span { display: flex; flex-direction: column; gap: 2px; }
.craque-numeros b {
    font-size: var(--texto-lg); font-weight: 750;
    color: var(--topo-texto);
    font-variant-numeric: tabular-nums;
}
.craque-numeros small {
    font-size: var(--texto-xs);
    color: var(--topo-texto-fraco);
    text-transform: uppercase; letter-spacing: .06em;
}

/* ---------------------------------------------------- FAIXA DE RESULTADOS */
/* A COR sangra de ponta a ponta, mas o CONTEÚDO fica no contêiner: sem isto,
   num monitor largo o rótulo "RESULTADOS" cola na borda esquerda da janela e
   a fita corre até a direita, desalinhados de tudo abaixo. Foi exatamente a
   mesma falha do cabeçalho, repetida aqui. */
.faixa-ticker {
    background: var(--acento);
    color: #FFF;
    overflow: hidden;
}
.ticker-interno { display: flex; align-items: center; }

/* O rótulo aqui é uma ETIQUETA, não um bloco.
   Antes ele era uma caixa escura da altura inteira da fita, arredondada só do
   lado direito — o desenho vinha de encostar na borda da coluna de conteúdo,
   e num monitor largo essa borda fica no meio da tela: o resultado era um
   retângulo escuro solto no meio do índigo, cortado de um lado só. Como
   pílula fechada e centrada ele volta a parecer o que é, um rótulo. */
.faixa-ticker .ticker-rotulo {
    align-self: center;
    margin-right: var(--esp-4);
    padding: 5px var(--esp-3);
    border-radius: var(--raio-full);
    /* Grafite fixo, não véu translúcido: a fita é índigo-600 no claro e
       índigo-400 no escuro, e um véu de branco que se lê sobre o primeiro
       quase desaparece sobre o segundo. Como a faixa é índigo nos dois temas,
       a pílula não precisa virar com o tema — precisa contrastar com índigo. */
    background: var(--cinza-900);
    color: #FFF;
}
.faixa-ticker .ticker-rotulo i { font-size: var(--texto-sm); color: var(--ouro); }
.faixa-ticker .ticker-trilho { flex: 1; min-width: 0; }
.faixa-ticker .ticker-item { color: rgb(255 255 255 / .82); }
.faixa-ticker .ticker-item b { color: #FFF; }

/* -------------------------------------------------------- CHAMADA (CTA) */

/* ================================================== BLOCO DA COMPETIÇÃO ===
   Tabela e jogos lado a lado — o miolo da capa, no formato que o torcedor já
   conhece de portal esportivo. Empilha no celular, com a tabela primeiro. */
.bloco-competicao { display: grid; grid-template-columns: 1fr; gap: var(--esp-5); }

/* Coluna flexível para que o rodapé possa ser empurrado para a base com
   `margin-top: auto`. Os dois painéis desta faixa dividem a mesma linha da
   grade e esticam juntos; sem isso o rodapé ficaria colado na tabela, com o
   vazio continuando embaixo dele. */
.painel {
    display: flex; flex-direction: column;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-lg);
    overflow: hidden;
}
/* A ÚLTIMA LINHA VOLTA A TER BORDA — só aqui.
   `base.css` tira a borda da última linha de toda tabela, e com razão: onde a
   tabela encosta na base do cartão, quem fecha o desenho é a borda do próprio
   cartão, e as duas juntas virariam um traço grosso.

   Neste painel a tabela NÃO encosta em nada: o rodapé foi empurrado para a
   base e sobra um vão no meio. Sem a borda, a última linha some no branco e a
   tabela parece cortada — que é exatamente o que o vão deveria ter resolvido.
   O recorte por `.painel` mantém o comportamento antigo em todo o resto do
   sistema, inclusive na classificação completa, onde o rodapé encosta na
   tabela e a borda dupla apareceria. */
.painel .tabela tbody tr:last-child td { border-bottom: 1px solid var(--borda); }
/* ...e as duas bordas viram UMA quando se encostam.
   Com a agenda ao lado curta, o vão desaparece: a borda da última linha
   encosta na borda de topo do rodapé e o traço fica com 2px, visivelmente
   mais grosso que todos os outros da tabela.

   Não existe, fora de `border-collapse`, um seletor que perceba dois
   elementos se tocando — CSS não enxerga distância. O que existe é a margem
   negativa: o invólucro termina 1px acima de onde terminaria, o rodapé sobe
   1px e sua borda cobre a da linha. Uma linha só, em qualquer altura.

   Vai no INVÓLUCRO e não no rodapé porque o rodapé usa `margin-top: auto`
   para descer até a base, e a mesma propriedade não pode fazer as duas
   coisas. Quando há vão, o `auto` absorve o -1px e nada muda; quando não há,
   ele é exatamente a sobreposição que faltava. */
.painel .tabela-envolucro { margin-bottom: -1px; }

/* A regra do campeonato, fechando o painel da tabela.
   `margin-top: auto` come todo o espaço que sobra: o rodapé desce até a base
   e o painel termina com uma borda, em vez de um corte no ar. */
.painel-rodape {
    margin-top: auto;
    padding: var(--esp-4) var(--esp-5);
    border-top: 1px solid var(--borda);
    background: var(--superficie-2);
    text-align: center;
    font-size: var(--texto-sm);
    color: var(--texto-suave);
    line-height: 1.5;
}
.painel-cabeca {
    display: flex; align-items: baseline; gap: var(--esp-3);
    padding: var(--esp-5) var(--esp-5) var(--esp-4);
}
.painel-cabeca h2 {
    font-size: var(--texto-xl);
    font-weight: 750;
    letter-spacing: -.03em;
    text-transform: uppercase;
}
.painel-link {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 6px;
    font-size: var(--texto-sm); font-weight: 600;
    color: var(--texto-suave);
    transition: color var(--transicao), gap var(--transicao);
}
.painel-link:hover { color: var(--acento); gap: var(--esp-2); }
.painel-nota {
    display: flex; align-items: center; gap: var(--esp-2);
    padding: var(--esp-3) var(--esp-5) var(--esp-4);
    font-size: var(--texto-sm);
    color: var(--texto-fraco);
}
.marca-zona {
    width: 3px; height: 14px; border-radius: 2px;
    background: var(--acento);
    display: inline-block;
}

/* Tabela: primeira coluna larga com posição + escudo + nome. */
.painel .tabela th { background: transparent; font-size: var(--texto-xs); text-transform: uppercase; letter-spacing: .05em; }
/* ...menos a coluna FIXA. Célula que fica parada enquanto o resto rola tem de
   ser opaca, senão os números passam por baixo dela e o "P J V E" aparece por
   cima de "CLASSIFICAÇÃO". A regra da coluna fixa mora em base.css e empatava
   em especificidade com a linha acima, perdendo por vir antes. */
.painel .tabela th.col-pos { background: var(--superficie-2); }

/* ------------------------------------------- LINHA DO GRUPO TAMBÉM PARADA
   O rótulo do grupo ("A", "B", "C") acompanhava a rolagem lateral e saía da
   tela: o visitante rolava para ver os gols e perdia de vista de qual chave
   era aquela tabela. Ele passa a ficar preso na mesma borda da coluna do
   clube.

   `left: 0` com a largura da coluna fixa: a célula do grupo ocupa a linha
   inteira (`colspan`), então prendê-la significa manter o texto no começo. */
.tabela-classificacao .linha-grupo th {
    position: sticky; left: 0;
    /* Abaixo do cabeçalho (3) e acima das células comuns (2). */
    z-index: 2;
}
/* O rótulo inteiro — ícone E nome — acompanha a borda esquerda.
   Antes o seletor era `th > *`, que pegava só o ícone: o nome do grupo é um
   nó de TEXTO, e `sticky` não prende texto solto. O resultado era o ícone
   parado e a palavra "Grupo A" saindo pela esquerda. */
.tabela-classificacao .linha-grupo-rotulo {
    position: sticky; left: var(--esp-4);
    display: inline-flex; align-items: center; gap: 6px;
}

/* O cabeçalho da tabela precisa de linha em cima quando ele abre o cartão:
   sem ela, "CLASSIFICAÇÃO P J V E" flutua colado na borda do painel. */
.painel .tabela thead th { border-top: 1px solid var(--borda); }
.painel .tabela th.col-pos { padding-left: var(--esp-5); }
.painel .tabela td.col-pos { padding-left: var(--esp-5); }
.painel .tabela td:last-child, .painel .tabela th:last-child { padding-right: var(--esp-5); }
.time-celula { display: flex; align-items: center; gap: var(--esp-3); min-width: 0; }
.time-celula .pos {
    width: 20px; flex-shrink: 0;
    font-weight: 700; font-variant-numeric: tabular-nums;
    color: var(--texto-suave);
}
/* Faixa da zona de classificação, colada na borda esquerda da linha. */
.zona-classificacao { box-shadow: inset 3px 0 0 var(--acento); }
.zona-classificacao .pos { color: var(--acento); }

/* `.escudo` e `.escudo-vazio` são componentes de base.css (o painel também os usa). */

/* --------------------------------------------------------- JOGOS DA RODADA */
.rodada-nav {
    display: flex; align-items: center; gap: var(--esp-3);
    padding: 0 var(--esp-5) var(--esp-4);
}
.rodada-titulo {
    flex: 1; text-align: center;
    font-size: var(--texto-base); font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
}
.rodada-painel { border-top: 1px solid var(--borda); }

.jogo-rodada {
    padding: var(--esp-4) var(--esp-5);
    border-bottom: 1px solid var(--borda);
    text-align: center;
}
.jogo-rodada:last-child { border-bottom: 0; }
.jogo-rodada-quando {
    display: flex; align-items: center; justify-content: center; gap: var(--esp-2);
    font-size: var(--texto-sm);
    color: var(--texto-fraco);
    margin-bottom: var(--esp-2);
}
.jogo-rodada-linha {
    display: grid; grid-template-columns: 1fr auto 1fr;
    align-items: center; gap: var(--esp-3);
}
.jogo-rodada-time {
    display: flex; align-items: center; justify-content: flex-end; gap: var(--esp-2);
    min-width: 0;
    font-weight: 550;
}
.jogo-rodada-time.fora { justify-content: flex-start; }
.jogo-rodada-time.venceu { font-weight: 700; }
.jogo-rodada-placar {
    display: inline-flex; align-items: center; gap: var(--esp-2);
    font-size: var(--texto-lg); font-weight: 750;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* Só o posicionamento: cor, fundo, tamanho e forma vêm de `.etiqueta`
   (base.css), a mesma peça usada na agenda. Aqui havia uma segunda maneira de
   desenhar estado — maiúsculas em peso 700 — que competia com o placar e não
   existia em nenhuma outra tela. */
.jogo-rodada-saiba {
    margin-top: var(--esp-2);
    transition: filter var(--transicao);
}
/* Só as etiquetas que SÃO link reagem ao mouse; "A disputar" é um <span>. */
a.jogo-rodada-saiba:hover { filter: brightness(.94); }

/* `.esconde-sm` / `.esconde-md` mudaram para base.css: o painel também tem
   tabelas com colunas dispensáveis no celular, e ele não carrega esta folha —
   a coluna some no estreito e nunca mais volta no largo. */

/* A "tabela viva" (.pos-classificado, .time-celula, .tabela-classificacao)
   mudou para base.css: o PAINEL desenha a mesma tabela e não carrega esta
   folha. Ver o bloco CLASSIFICAÇÃO em base.css. */

/* ============================================================ TIME / CARDS = */
.cartao-time {
    position: relative;
    display: flex; flex-direction: column; align-items: center;
    gap: var(--esp-3);
    padding: var(--esp-6) var(--esp-5);
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-lg);
    text-align: center;
    overflow: hidden;
    transition: border-color var(--transicao), box-shadow var(--transicao), transform var(--transicao);
}
/* O realce do hover cobre o cartão INTEIRO.
   Antes era uma faixa de 64px no topo: como o escudo hoje tem 104px, a faixa
   terminava no meio dele e aparecia como um risco atravessando o cartão. */
.cartao-time::before {
    content: ''; position: absolute; inset: 0;
    background: var(--grad-palco);
    opacity: 0; transition: opacity var(--transicao);
    pointer-events: none;
}
.cartao-time:hover { border-color: var(--borda-forte); box-shadow: var(--sombra-lg); transform: translateY(-4px); }
.cartao-time:hover::before { opacity: 1; }
.cartao-time > * { position: relative; }
.cartao-time .escudo, .cartao-time .escudo-vazio { width: 104px; height: 104px; transition: transform var(--vel) var(--curva-mola); }
.cartao-time .escudo-vazio { border-radius: var(--raio-lg); }
.cartao-time:hover .escudo { transform: scale(1.08); }
.cartao-time h3 { font-size: var(--texto-md); }

/* ====================================================== CAPA DO CLUBE ======
   Identidade e campanha no MESMO bloco: eram dois cartões falando do mesmo
   assunto, e o segundo era só uma fileira de números soltos, sem hierarquia. */
.clube-capa {
    border: 1px solid var(--borda);
    border-radius: var(--raio-xl);
    background: var(--superficie);
    overflow: hidden;
    box-shadow: var(--sombra-sm);
}

/* ------------------------------------------------------ FAIXA DE PATROCÍNIO
   Discreta por construção: sem moldura de cartão, sem fundo, altura de uma
   linha de texto. As marcas ficam dessaturadas e ganham cor no hover — assim
   a faixa não compete com o escudo logo acima, mas responde a quem repara
   nela. Quem não tem `:hover` (toque) recebe a cor direto, na media query
   abaixo: senão o celular ficaria com marcas cinzas para sempre. */
/* Colada na identidade do clube, de propósito: a faixa é a placa do
   patrocinador na quadra, e ela fica junto do escudo, não num bloco à parte.
   O `margin-top` de 24px que a seção herdava do espaçamento genérico abria um
   vão que a lia como "outro assunto". */
.patrocinio {
    display: flex; align-items: center; gap: var(--esp-4); flex-wrap: wrap;
    margin-top: var(--esp-2);
    padding: var(--esp-1) var(--esp-2) var(--esp-4);
    border-bottom: 1px solid var(--borda);
}
.patrocinio-marcas {
    display: flex; align-items: center; gap: var(--esp-3); flex-wrap: wrap;
    flex: 1; min-width: 0;
}
/* PLACA CLARA por baixo da marca — ver o bloco `--placa-marca` mais abaixo,
   junto da faixa do sistema, para o porquê. As duas faixas usam o mesmo
   tratamento porque são a mesma coisa: marca de terceiro, desenhada para
   fundo branco, exibida dentro do nosso site. */
.patrocinio-marca {
    display: inline-grid; place-items: center;
    /* Mesma regra da faixa do sistema: a altura é da PLACA. */
    height: 64px;
    padding: 10px 16px;
    border-radius: var(--raio-sm);
    background: var(--placa-marca);
    border: 1px solid var(--placa-marca-borda);
    transition: transform .18s ease, box-shadow .18s ease;
}
/* Teto de altura, largura livre: a proporção da marca é preservada e uma
   logomarca pequena NUNCA é ampliada para alcançar os 34px. */
/* 44 = os 64 da placa menos os 10+10 de padding. Pixel e não `100%`, pelo
   mesmo motivo da faixa do sistema. */
.patrocinio-marca img {
    max-height: 44px; max-width: 170px;
    width: auto; height: auto;
    object-fit: contain;
    display: block;
}
a.patrocinio-marca:hover,
a.patrocinio-marca:focus-visible {
    transform: translateY(-2px);
    box-shadow: var(--sombra-md);
}
.clube-identidade {
    display: flex; align-items: center; gap: var(--esp-6); flex-wrap: wrap;
    padding: var(--esp-6);
    background-image: var(--grad-palco);
}
.clube-dados { flex: 1; min-width: 220px; }
.clube-dados h1 { font-size: var(--texto-2xl); letter-spacing: -.03em; }
.clube-meta {
    display: flex; align-items: center; gap: var(--esp-4); flex-wrap: wrap;
    margin-top: var(--esp-3);
    font-size: var(--texto-base);
    color: var(--texto-suave);
}
.clube-meta i { color: var(--acento); margin-right: 6px; }
.clube-forma { display: flex; align-items: center; gap: var(--esp-3); margin-top: var(--esp-4); }

/* ------------------------------------------------------ VER POR RODADA / DIA
   Duas opções lado a lado, com a ativa em relevo. É um par pequeno e
   permanente: transformar em `select` esconderia metade da informação (que a
   outra leitura existe) atrás de um clique. */
.ver-agenda {
    display: inline-flex;
    padding: 2px;
    gap: 2px;
    border: 1px solid var(--borda);
    border-radius: var(--raio-full);
    background: var(--superficie-alt);
    /* Colado no título, sem empurrar o "Todos" da outra ponta. */
    margin-left: var(--esp-2);
    align-self: center;
}
.ver-agenda-opcao {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px var(--esp-3);
    border-radius: var(--raio-full);
    /* Menor que o texto corrente: é um ajuste de leitura, não uma ação
       principal. Ao lado de um título em caixa alta, no mesmo tamanho, ele
       competia com o próprio nome do bloco. */
    font-size: var(--texto-xs); font-weight: 600;
    color: var(--texto-suave);
    transition: background var(--transicao), color var(--transicao), opacity var(--transicao);
}
/* A troca é instantânea, mas a rede nem sempre: o miolo esmaece enquanto os
   blocos novos não chegam, para o clique ter resposta imediata. */
[data-agenda-blocos] { transition: opacity .15s ease; }
/* O respiro entre uma rodada e a seguinte.
   `.site-palco > * + *` só alcança FILHO DIRETO, e este `div` foi acrescentado
   depois, para o alternador Rodada/Dia ter um elemento único para trocar por
   AJAX. Ele virou pai das seções, que passaram a ser netas do palco e ficaram
   sem margem nenhuma — o título "2ª rodada" encostando no último cartão da
   rodada anterior. Mesmo valor do palco, para o espaçamento da página não ter
   dois padrões. */
[data-agenda-blocos] > * + * { margin-top: var(--esp-6); }
.ver-agenda-opcao:hover { color: var(--texto); }
.ver-agenda-opcao.ativa {
    background: var(--superficie);
    color: var(--acento-forte);
    box-shadow: var(--sombra-sm);
}
/* Na capa o painel é escuro; ali a peça inteira inverte, senão ela apareceria
   como um retângulo claro no meio da faixa. */
.faixa-escura .ver-agenda { background: rgb(255 255 255 / .08); border-color: rgb(255 255 255 / .14); }
.faixa-escura .ver-agenda-opcao { color: var(--topo-texto-suave); }
.faixa-escura .ver-agenda-opcao.ativa { background: rgb(255 255 255 / .16); color: #FFF; }
/* Título e alternador na mesma linha, com o título podendo quebrar sem
   arrastar o controle junto. */
.capa-titulo-linha {
    display: flex; align-items: center; gap: var(--esp-3);
    flex-wrap: wrap;
}

/* ============================================================== GINÁSIOS
   A FOTO é o que identifica uma quadra. Numa lista de nomes, "Ginásio
   Municipal" e "Ginásio Poliesportivo" são duas linhas quase iguais; com a
   imagem, quem procura reconhece o lugar antes de ler. */
.grade-ginasios { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.ginasio-cartao { display: flex; flex-direction: column; overflow: hidden; }
/* PROPORÇÃO 4:3, com a imagem fora do fluxo.
   A foto do ginásio não passa pelo recortador — quadra é imagem deitada e o
   corte quadrado comeria justamente a lateral que mostra o tamanho do espaço.
   O preço é que cada arquivo chega na proporção que o celular do organizador
   produziu, e na grade os cartões terminavam em alturas diferentes.

   `aspect-ratio` sozinho não resolvia, e vale registrar por quê: este bloco é
   item de um flex column, onde `min-height: auto` impede o item de ficar
   menor que o conteúdo. A imagem, sendo elemento substituído, tem altura
   própria e empurrava a caixa por baixo — a proporção declarada era ignorada.

   A cura é tirar a imagem do fluxo: em `position: absolute` ela não contribui
   mais para a altura de nada, e `inset: 0` a prende exatamente à moldura que
   o `aspect-ratio` desenhou. `flex-shrink: 0` cobre o caminho inverso, de a
   moldura ser espremida quando o cartão vizinho é mais alto.

   O ícone de quadra sem foto continua centrado pelo `place-items`: ele é
   filho normal da grade, não foi para o absoluto. */
.ginasio-capa {
    position: relative;
    display: grid; place-items: center;
    aspect-ratio: 4 / 3;
    flex-shrink: 0;
    overflow: hidden;
    background: var(--superficie-alt);
    color: var(--texto-fraco);
    font-size: 28px;
}
/* `object-position` declarado, e não deixado no padrão: dois outros pontos do
   site usam `top center` para retrato de atleta (o recorte redondo cortava a
   cabeça), e uma foto de quadra pede o oposto — o prédio inteiro importa mais
   que o céu. Escrito aqui, o enquadramento não muda por causa de uma regra
   criada noutro canto. */
.ginasio-capa img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center center;
    display: block;
}
.ginasio-corpo {
    display: flex; flex-direction: column; gap: var(--esp-2);
    padding: var(--esp-4) var(--esp-5) var(--esp-5);
}
.ginasio-corpo strong { font-size: var(--texto-md); }
.ginasio-linha, .ginasio-meta span {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--texto-suave); font-size: var(--texto-sm);
}
.ginasio-linha i, .ginasio-meta i { color: var(--acento); }
.ginasio-meta { display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-4); }

/* Capa da página do ginásio: a foto ocupa a largura toda e o nome vem sobre
   ela, com um véu que garante o contraste — o mesmo recurso do herói da
   notícia, e pelo mesmo motivo (texto branco sobre foto imprevisível). */
.ginasio-capa-grande {
    position: relative;
    border-radius: var(--raio-xl);
    overflow: hidden;
    background: var(--superficie-alt);
    border: 1px solid var(--borda);
}
.ginasio-capa-grande img {
    width: 100%; max-height: 380px; object-fit: cover; display: block;
}
.ginasio-capa-grande:has(img) .ginasio-identidade {
    position: absolute; inset: auto 0 0 0;
    /* Três paradas, não duas. Com `.78 → transparent` o meio do véu já estava
       quase limpo na altura do título, e é lá que a foto costuma ser clara. */
    background: linear-gradient(to top,
        rgb(0 0 0 / .88) 0%, rgb(0 0 0 / .62) 45%, rgb(0 0 0 / 0) 100%);
    padding-top: var(--esp-8);
    color: #FFF;
}
/* O `color: #FFF` acima NÃO alcança o h1: a regra global de títulos define
   `color: var(--texto)` no próprio elemento, e cor declarada sempre vence cor
   herdada, por mais específico que seja o ancestral. Era isso que apagava o
   nome do ginásio — texto escuro sobre foto escura. */
.ginasio-capa-grande:has(img) .ginasio-identidade h1 {
    color: #FFF;
    /* Sombra curta e fechada: a foto de fundo é do usuário e pode ter uma
       parede branca justamente atrás do título. */
    text-shadow: 0 1px 12px rgb(0 0 0 / .55), 0 1px 2px rgb(0 0 0 / .4);
}
.ginasio-capa-grande:has(img) .ginasio-dados { color: rgb(255 255 255 / .86); }
.ginasio-capa-grande:has(img) .ginasio-dados i { color: #FFF; }
.ginasio-identidade { padding: var(--esp-6) var(--esp-5) var(--esp-5); }
.ginasio-identidade h1 { font-size: var(--texto-2xl); letter-spacing: -.02em; }
.ginasio-dados {
    display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-5);
    margin-top: var(--esp-2);
    color: var(--texto-suave); font-size: var(--texto-sm);
}
.ginasio-dados i { color: var(--acento); margin-right: 6px; }

.grade-ginasio-fotos { grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr)); }
.ginasio-foto {
    aspect-ratio: 1; border-radius: var(--raio); overflow: hidden;
    border: 1px solid var(--borda);
    transition: transform var(--transicao);
}
.ginasio-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ginasio-foto:hover { transform: scale(1.02); }

/* O local no cartão do próximo jogo. O NOME é link e ganha sublinhado no
   hover — sem ele, pareceria só mais um dado da linha. O alfinete é rótulo,
   fica fora da âncora e não sublinha junto. */
.heroi-local {
    display: inline-flex; align-items: center; gap: 6px;
}
.heroi-local a { transition: color var(--transicao); }
.heroi-local a:hover { color: #FFF; text-decoration: underline; }

/* Badge do local na ficha da partida: mesmo desenho dos outros itens, mas
   clicável — a seta discreta avisa que leva a algum lugar. */
a.ficha-partida-local { transition: color var(--transicao); }
a.ficha-partida-local:hover { color: var(--acento-forte); }

/* -------------------------------------------------- CAMPEÃO NO CELULAR
   Mesmo tratamento da identidade do clube: em tela estreita o bloco deixa de
   ser "escudo à esquerda, texto à direita" e vira uma coluna centrada.

   Os dois botões eram o pior ponto. Lado a lado eles não cabem, e o
   `flex-wrap` resolvia isso da pior maneira possível: dependendo da largura,
   o segundo caía sozinho para a linha de baixo com metade da largura do
   primeiro, e os dois ficavam desalinhados. Em coluna, cada um ocupa a linha
   inteira — vira uma escolha entre duas ações, que é o que eles são.

   O `h1` desce um degrau da escala: `--texto-3xl` foi pensado para o herói
   largo do desktop e, num nome de clube de duas palavras, ocupava três linhas
   antes de chegar ao troféu. */
@media (max-width: 639px) {
    .heroi-campeao {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: var(--esp-4);
    }
    /* Sem isto o `min-width: 200px` impede o bloco de acompanhar a tela. */
    .campeao-dados { flex: initial; min-width: 0; width: 100%; }
    .heroi-campeao h1 { font-size: var(--texto-2xl); }
    .campeao-legenda { justify-content: center; }
    .heroi-campeao .barra-acoes { flex-direction: column; align-items: stretch; }
    .heroi-campeao .barra-acoes .btn { width: 100%; justify-content: center; }
    .campeao-notas { justify-content: center; text-align: center; }
}

/* ==================================================== PÁGINA DE PATROCÍNIO
   Peça de venda, não página institucional: os blocos têm respiro maior que o
   resto do site porque aqui a pessoa está LENDO um argumento, não conferindo
   um dado. */
.patrocinio-pagina { display: grid; gap: var(--esp-6); }

/* O TEXTO em duas colunas no desktop, uma no estreito.
   Era um bloco só com `max-width` em `ch`: a caixa continuava do tamanho do
   cartão e o texto parava no meio dela, deixando metade da largura vazia à
   direita — buraco, não respiro. Duas colunas gastam a largura inteira e
   ainda mantêm a linha curta o bastante para o olho não se perder ao voltar. */
.patrocinio-bloco h2 { margin-bottom: var(--esp-3); }
.patrocinio-bloco p { color: var(--texto-suave); line-height: 1.65; }
.patrocinio-bloco .patrocinio-texto {
    display: grid; gap: var(--esp-4);
    grid-template-columns: 1fr;
}
@media (min-width: 860px) {
    .patrocinio-bloco .patrocinio-texto { grid-template-columns: 1fr 1fr; gap: var(--esp-6); }
}

.grade-patrocinio { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.patrocinio-beneficio h3 { font-size: var(--texto-base); margin: var(--esp-3) 0 var(--esp-2); }
.patrocinio-beneficio p { color: var(--texto-suave); font-size: var(--texto-sm); line-height: 1.6; }
.patrocinio-icone {
    display: grid; place-items: center;
    width: 44px; height: 44px;
    border-radius: var(--raio);
    background: var(--acento-suave);
    color: var(--acento-forte);
    font-size: 18px;
}

/* As marcas atuais usam a mesma placa da faixa — é a mesma coisa mostrada
   noutro contexto, e desenhá-la diferente faria parecer outro produto. */
.patrocinio-vitrine { display: flex; flex-wrap: wrap; gap: var(--esp-4); align-items: center; }

.patrocinio-convite {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--esp-5); flex-wrap: wrap;
    padding: var(--esp-6);
    border: 1px solid var(--borda);
    border-radius: var(--raio-xl);
    background: var(--superficie);
}
.patrocinio-convite h2 { margin-bottom: var(--esp-2); }
.patrocinio-convite p { color: var(--texto-suave); }

@media (max-width: 639px) {
    /* O convite empilha e o botão toma a linha: alvo de toque cheio, e o
       texto acima dele em vez de ao lado. */
    .patrocinio-convite { flex-direction: column; align-items: stretch; text-align: center; }
    .patrocinio-convite .btn { justify-content: center; }
}

/* ======================================================== COMISSÃO TÉCNICA
   O bloco existia no HTML com `.card-comissao` e `.card-comissao-cargo`, e
   nenhuma das duas classes tinha uma linha de estilo — o cartão chegava cru,
   com o avatar encostado à esquerda e cargo e nome disputando a mesma linha.

   Cinco colunas no largo porque cinco é o TETO da comissão: a fileira fecha
   exatamente com a equipe cheia. Abaixo disso são três e depois duas — nunca
   uma, porque o cartão é estreito por natureza e uma coluna só desperdiçaria
   a tela inteira com cinco retratos gigantes. */
.grade-comissao { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 600px)  { .grade-comissao { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .grade-comissao { grid-template-columns: repeat(5, 1fr); } }

.card-comissao {
    display: flex; flex-direction: column; align-items: center;
    gap: var(--esp-3);
    text-align: center;
    padding: var(--esp-5) var(--esp-3);
}
/* O retrato encolhe junto com a coluna: em duas colunas de 150px, 96px de
   avatar mais o anel encostavam nas bordas do cartão. */
.card-comissao .avatar { width: clamp(64px, 22vw, 96px); height: clamp(64px, 22vw, 96px); }
.card-comissao-cargo {
    /* Herda forma e cor de `.etiqueta`; aqui só o que é próprio do cargo. */
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: var(--texto-xs);
}
.card-comissao-nome {
    font-weight: 650;
    line-height: 1.25;
    /* Nome de três palavras não pode virar reticências num cartão que existe
       justamente para dizer QUEM é a pessoa. */
    overflow-wrap: anywhere;
}

/* ------------------------------------------------- CABEÇALHO DO CLUBE NO CELULAR
   Empilhado e centrado. Na horizontal, o escudo de 128px come um terço de uma
   tela de 375 e empurra o nome para uma coluna de ~180px, onde ele quebra em
   três linhas ao lado de um brasão grande — a leitura fica torta e o nome, que
   é a identidade da página, vira o elemento mais apertado dela.

   As informações secundárias (cidade, fundação, elenco, competição) deixam de
   ser uma fileira que quebra em qualquer ponto e viram itens separados por um
   ponto médio, centrados: ocupam duas linhas em vez de quatro e passam a ser
   lidas como uma legenda, não como quatro botões soltos. */
@media (max-width: 639px) {
    .clube-identidade {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: var(--esp-4);
        padding: var(--esp-5) var(--esp-4);
    }
    /* `flex: 1` com `min-width: 220px` numa coluna força a largura mínima
       mesmo sem espaço; aqui o bloco tem de poder encolher até a tela. */
    .clube-dados { flex: initial; min-width: 0; width: 100%; }
    .clube-dados h1 { font-size: var(--texto-xl); }
    .clube-meta {
        justify-content: center;
        gap: var(--esp-2) var(--esp-3);
        font-size: var(--texto-sm);
    }
    /* Ponto médio entre os itens: separa sem desenhar caixa nenhuma. */
    .clube-meta > span + span::before {
        content: '·';
        margin-right: var(--esp-3);
        color: var(--borda-forte);
    }
    .clube-forma { justify-content: center; }
    /* O escudo perde a moldura de 128px e fica proporcional à coluna. */
    .clube-identidade .escudo, .clube-identidade .escudo-vazio { width: 92px; height: 92px; }
}

/* Cabeçalho da página de um time */
.time-capa .escudo, .time-capa .escudo-vazio { width: 128px; height: 128px; }
.time-capa .escudo-vazio { border-radius: var(--raio-xl); box-shadow: var(--sombra-lg); }

/* ======================================================== GALERIA DE TÍTULOS
   Campeão e vice com os ANOS ao lado. É o bloco que dá peso de acervo à ficha
   do clube — "3 títulos" sozinho não conta história nenhuma. */
.galeria-titulos {
    display: grid; grid-template-columns: 1fr; gap: var(--esp-3);
    margin-bottom: var(--esp-4);
}
.trofeu-bloco {
    display: flex; align-items: center; gap: var(--esp-4);
    padding: var(--esp-4) var(--esp-5);
    border: 1px solid var(--borda);
    border-radius: var(--raio-lg);
    background: var(--superficie);
}
.trofeu-bloco > i {
    width: 44px; height: 44px; flex-shrink: 0;
    display: grid; place-items: center;
    border-radius: 50%;
    font-size: var(--texto-lg);
}
.trofeu-bloco.campeao > i { background: var(--alerta-suave); color: var(--ouro); }
.trofeu-bloco.vice > i    { background: var(--superficie-alt); color: var(--texto-suave); }
.trofeu-bloco b { display: block; font-size: var(--texto-md); font-weight: 700; }
.trofeu-bloco small {
    font-size: var(--texto-sm); color: var(--texto-suave);
    font-variant-numeric: tabular-nums;
}

/* Rodapé de retrospecto: a soma de todas as participações. */
.linha-retrospecto td {
    border-top: 2px solid var(--borda-forte);
    background: var(--superficie-2);
}

/* ========================================================= CARD DO ATLETA ==
   Cartão grande, no espírito de card de jogo: retrato ocupando o topo, número
   da camisa em marca-d'água, posição sobreposta e os números do atleta em
   rodapé. Substitui a linha de lista de 28px, que tratava o atleta como item
   de planilha — e o atleta é a razão de o torcedor entrar no site. */
.grade-elenco {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
    gap: var(--esp-4);
}

.card-atleta {
    position: relative;
    display: flex; flex-direction: column;
    overflow: hidden;
    border-radius: var(--raio-lg);
    background: var(--superficie);
    border: 1px solid var(--borda);
    box-shadow: var(--sombra-sm);
    transition: transform var(--vel) var(--curva-saida),
                box-shadow var(--transicao), border-color var(--transicao);
}
.card-atleta:hover {
    transform: translateY(-6px);
    box-shadow: var(--sombra-xl);
    border-color: color-mix(in srgb, var(--acento) 45%, var(--borda));
}

.card-atleta-retrato {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--grad-frio);
}
.card-atleta-retrato img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: top center;
    transition: transform var(--vel-cena) var(--curva-saida);
}
.card-atleta:hover .card-atleta-retrato img { transform: scale(1.06); }
/* Sem foto: silhueta grande, e não um ícone perdido no centro. */
.card-atleta-semfoto {
    width: 100%; height: 100%;
    display: grid; place-items: center;
    color: rgb(255 255 255 / .35);
    font-size: 64px;
}
/* Véu inferior para o nome sobreposto ficar legível em qualquer foto. */
.card-atleta-retrato::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to top, rgb(12 17 29 / .88) 0%, rgb(12 17 29 / .15) 45%, transparent 70%);
}

.card-atleta-numero {
    position: absolute; top: 6px; right: var(--esp-3);
    z-index: 1;
    font-size: 56px; font-weight: 800;
    line-height: 1;
    letter-spacing: -.05em;
    color: rgb(255 255 255 / .22);
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}
.card-atleta-posicao {
    position: absolute; top: var(--esp-3); left: var(--esp-3);
    z-index: 1;
    padding: 3px 9px;
    border-radius: var(--raio-full);
    background: var(--vidro-forte);
    backdrop-filter: var(--desfoque);
    -webkit-backdrop-filter: var(--desfoque);
    font-size: 10px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .08em;
    color: var(--texto);
}
/* Selo do quinteto inicial, no canto oposto ao número. */
.card-atleta-titular {
    position: absolute; top: var(--esp-3); right: var(--esp-3);
    z-index: 2;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px;
    border-radius: var(--raio-full);
    background: var(--acento);
    color: #FFF;
    font-size: 10px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .06em;
    box-shadow: var(--sombra-md);
}
/* Com o selo presente, o número desce para não colidir com ele. */
.card-atleta-titular ~ .card-atleta-numero { top: 38px; }

.card-atleta-nome {
    position: absolute; inset: auto var(--esp-3) var(--esp-3) var(--esp-3);
    z-index: 1;
    color: #FFF;
    font-weight: 750;
    font-size: var(--texto-md);
    letter-spacing: -.02em;
    text-shadow: 0 1px 3px rgb(0 0 0 / .5);
}
.card-atleta-nome small {
    display: block;
    font-size: var(--texto-xs); font-weight: 500;
    color: rgb(255 255 255 / .72);
    letter-spacing: 0;
}

.card-atleta-stats {
    display: grid; grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--borda);
}
.card-atleta-stats div {
    padding: var(--esp-3) var(--esp-1);
    text-align: center;
}
.card-atleta-stats div + div { border-left: 1px solid var(--borda); }
.card-atleta-stats b {
    display: block;
    font-size: var(--texto-lg); font-weight: 750;
    font-variant-numeric: tabular-nums;
}
.card-atleta-stats span {
    font-size: 10px; color: var(--texto-suave);
    text-transform: uppercase; letter-spacing: .06em;
}

/* Cabeçalho de setor do elenco */

/* ========================================================== FICHA JOGADOR == */
/* O raio vem do `.clube-capa`, que já recorta os filhos com `overflow: hidden`.
   Repetir `border-radius` aqui arredondava também a base deste bloco, e ali
   ele encosta na faixa de indicadores — o resultado era um canto arredondado
   no meio do cartão, sem nada para justificar. */
.ficha-jogador {
    display: flex; align-items: center; gap: var(--esp-6); flex-wrap: wrap;
    padding: var(--esp-8) var(--esp-6);
    position: relative;
    overflow: hidden;
    background-image: var(--grad-palco);
}
.ficha-identidade { flex: 1; min-width: 200px; }
.ficha-jogador h1 { font-size: var(--texto-2xl); }

/* Número da camisa como NÚMERO mesmo, grande e discreto, prefixado por `#`.
   A versão com o ícone de camisa e o algarismo vazado dentro não leu bem em
   tamanho grande. A cor vem de `--borda-forte`, que inverte com o tema: o
   `--borda` de antes era #1F2937 no escuro, quase o próprio fundo, e o
   número simplesmente sumia. */
.ficha-numero {
    flex-shrink: 0;
    font-size: var(--texto-5xl);
    font-weight: 800;
    letter-spacing: -.05em;
    line-height: 1;
    color: var(--borda-forte);
    font-variant-numeric: tabular-nums;
}

/* `.ficha-stats` foi REMOVIDA: a ficha do atleta passou a usar
   `.faixa-indicadores`, o mesmo componente da campanha do clube. A grade de
   números grandes gastava quase uma tela inteira para exibir nove valores —
   quase todos zero, no caso de um atleta sem cartões. */

/* Os blocos de gráfico (.grafico-*) moram em base.css: a visão geral do
   painel usa os mesmos, e o admin não carrega este arquivo. */

/* ========================================================= FEED DE EVENTOS = */
.feed-eventos { display: flex; flex-direction: column; }
.feed-evento {
    display: flex; align-items: center; gap: var(--esp-3);
    padding: var(--esp-3) 0;
    border-bottom: 1px solid var(--borda);
}
.feed-evento:last-child { border-bottom: 0; }
.feed-evento > i {
    width: 30px; height: 30px; flex-shrink: 0;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--superficie-alt);
    color: var(--texto-suave);
    font-size: var(--texto-sm);
}
.fe-minuto {
    font-family: var(--fonte-mono);
    font-size: var(--texto-sm);
    color: var(--texto-fraco);
    min-width: 34px;
}
.fe-texto { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.fe-amarelo > i { color: var(--alerta); background: var(--alerta-suave); }
.fe-azul > i    { color: var(--info);   background: var(--info-suave); }
.fe-vermelho > i { color: var(--erro);  background: var(--erro-suave); }

/* ================================================================ AO VIVO ==
   A quadra é escura por natureza (placar.css). O placar e as ações ficavam
   soltos na página clara, com 1192px de largura contra 640px de quadra — três
   larguras diferentes empilhadas. Agora tudo vive numa casca retrato única,
   com a mesma paleta da mesa: o palco é a quadra, não a página. */
.aovivo-palco {
    display: flex; flex-direction: column; gap: var(--esp-4);
    width: 100%; max-width: 680px; margin: 0 auto;
    padding: var(--esp-4);
    background:
        radial-gradient(80% 45% at 50% 0%, #1B2436, transparent 70%),
        #0B0F17;
    border: 1px solid #222B3C;
    border-radius: var(--raio-lg);
    box-shadow: var(--sombra-md);
}
/* Paleta própria dentro da casca, independente do tema do site. */
.aovivo-palco .placar-time {
    background: #141A26; border-color: #232C3D; color: #E8ECF3;
}
.aovivo-palco .time-nome { color: #8A94A6; }
.aovivo-palco .cronometro { color: #FFF; }
.aovivo-palco .crono-status { color: #8A94A6; }
.aovivo-palco .btn-fantasma {
    color: #C4CCDA; border: 1px solid #262F41; background: #141A26;
}
.aovivo-palco .btn-fantasma:hover { color: #FFF; border-color: var(--acento); }

.aovivo-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--esp-3); }
.stat-parcial {
    padding: var(--esp-4);
    text-align: center;
    background: var(--superficie-2);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
}
/* O seletor era só `b`, mas a view escreve `<strong>`: o número não recebia
   `display:block` e colava no rótulo ("0FALTAS"). */
.stat-parcial b,
.stat-parcial strong {
    display: block;
    font-size: var(--texto-xl); font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.stat-parcial span { font-size: var(--texto-xs); color: var(--texto-suave); text-transform: uppercase; letter-spacing: .05em; }
.aovivo-encerrada {
    text-align: center; padding: var(--esp-3);
    border-radius: var(--raio);
    background: var(--alerta-suave); color: var(--alerta);
    font-size: var(--texto-sm); font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
}
.aovivo-acoes { display: flex; justify-content: center; gap: var(--esp-2); flex-wrap: wrap; }

/* ---- Gavetas: folhas que sobem da base, uma de cada vez.
   Sem CSS nenhum, os dois painéis ficavam sempre abertos e sem forma logo
   abaixo da quadra — era o grosso da bagunça desta tela. */
.painel-gaveta {
    position: fixed; inset: auto 0 0 0; z-index: 60;
    width: 100%; max-width: 680px; margin: 0 auto;
    max-height: min(70dvh, 560px);
    display: flex; flex-direction: column;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-bottom: 0;
    border-radius: var(--raio-lg) var(--raio-lg) 0 0;
    box-shadow: 0 -18px 50px rgb(0 0 0 / .28);
    transform: translateY(101%);
    visibility: hidden;
    transition: transform .26s ease, visibility .26s;
}
.painel-gaveta.aberta { transform: none; visibility: visible; }
.gaveta-cabeca {
    display: flex; align-items: center; gap: var(--esp-2);
    padding: var(--esp-4) var(--esp-5);
    border-bottom: 1px solid var(--borda);
    font-weight: 700;
    flex-shrink: 0;
}
.gaveta-cabeca > i { color: var(--acento); }
.gaveta-cabeca [data-fechar-gaveta] { margin-left: auto; }
.gaveta-corpo { padding: var(--esp-3) var(--esp-5) var(--esp-6); overflow-y: auto; }
.veu-gaveta {
    position: fixed; inset: 0; z-index: 59;
    background: rgb(0 0 0 / .5);
    opacity: 0; visibility: hidden;
    transition: opacity var(--transicao), visibility var(--transicao);
}
.veu-gaveta.visivel { opacity: 1; visibility: visible; }
body.gaveta-aberta { overflow: hidden; }

/* ================================================================ RODAPÉ ===
   Três faixas: chamada do próximo jogo, navegação + marca do produto, e a
   assinatura. A grade dos links é `auto-fit`, então ela decide sozinha quantas
   colunas cabem — não há breakpoint escrito à mão para o miolo. */
.site-rodape {
    border-top: 1px solid var(--borda);
    background: var(--superficie);
}

/* ---- Faixa 1: a barra índigo ÚNICA — convite, próximo jogo e ações.
   Eram duas faixas azuis empilhadas (a chamada da home e a do jogo) com um
   vão branco no meio. Aqui as três informações dividem a mesma barra, cada
   uma com seu peso: texto flexível, jogo com largura própria, ações fixas. */
.rodape-chamada {
    background: var(--acento);
    background-image: linear-gradient(120deg, var(--indigo-700), var(--indigo-500));
    color: #FFF;
}
.rodape-chamada-interno {
    width: 100%; max-width: var(--largura-conteudo);
    margin: 0 auto;
    padding: var(--esp-6) var(--esp-4);
    display: grid; gap: var(--esp-5);
    align-items: center;
}
.rc-texto h2 {
    color: #FFF; font-size: var(--texto-xl); line-height: 1.2; margin: 0;
}
.rc-texto p {
    color: rgb(255 255 255 / .78); font-size: var(--texto-sm);
    margin: 6px 0 0; max-width: 46ch;
}

/* O jogo fica num painel de vidro: separa-o do convite sem precisar de outra
   faixa nem de uma borda dura. */
.rc-jogo {
    display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
    padding: var(--esp-3) var(--esp-4);
    border-radius: var(--raio);
    background: rgb(255 255 255 / .10);
    border: 1px solid rgb(255 255 255 / .16);
}
.rodape-chamada-selo {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px var(--esp-3);
    border-radius: var(--raio-full);
    background: rgb(255 255 255 / .16);
    font-size: 10px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .07em;
}
.rodape-chamada strong { font-size: var(--texto-md); font-weight: 700; }
/* O CONFRONTO centrado sob as pílulas. O bloco alinha tudo à esquerda porque
   o selo e a data são rótulos que começam na margem; o confronto é o conteúdo
   principal do cartão e ficava deslocado para um canto, com um vão à direita
   sempre que os nomes eram curtos.

   `align-self` no lugar de mudar o `align-items` do pai: as pílulas de cima
   continuam onde estavam, e centralizá-las junto abriria buracos dos dois
   lados de uma fileira que já preenche a largura. */
.rc-jogo strong {
    align-self: center;
    text-align: center;
}
.rc-x { color: rgb(255 255 255 / .5); margin: 0 4px; }
.rc-jogo-topo { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* A data é a segunda pílula da mesma linha do selo. */
.rodape-chamada-data {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px var(--esp-3);
    border-radius: var(--raio-full);
    background: rgb(255 255 255 / .10);
    font-size: var(--texto-xs); font-weight: 600;
    color: rgb(255 255 255 / .82);
    white-space: nowrap;
}
.rodape-chamada-data i { font-size: 10px; opacity: .8; }

/* No CELULAR o cartão inteiro centra. Acima de 900px a chamada vira grade de
   três colunas e o cartão fica estreito, ao lado do texto — ali o alinhamento
   à esquerda casa com o parágrafo vizinho. Empilhado, ele ocupa a largura toda
   e o conteúdo encostado num canto fica visivelmente torto, ainda mais com o
   confronto já centrado logo abaixo. */
@media (max-width: 899px) {
    .rc-jogo { align-items: center; }
    /* Vale quando as duas pílulas não cabem numa linha só: sem isto, a segunda
       cairia alinhada à esquerda em vez de centrada sob a primeira. */
    .rc-jogo-topo { justify-content: center; }
}

.rc-acoes { display: flex; align-items: center; gap: var(--esp-4); flex-wrap: wrap; }
.rodape-chamada .btn-primario {
    background: #FFF; border-color: #FFF; color: var(--indigo-700);
    white-space: nowrap;
}
.rodape-chamada .btn-primario:hover { background: rgb(255 255 255 / .9); border-color: transparent; }
.rc-secundario {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: var(--texto-sm); font-weight: 600;
    color: rgb(255 255 255 / .82);
    white-space: nowrap;
    transition: color var(--transicao), transform var(--transicao);
}
.rc-secundario:hover { color: #FFF; transform: translateX(3px); }

/* ---- Faixa 2: marca do produto + navegação. */
.rodape-grade {
    width: 100%; max-width: var(--largura-conteudo); margin: 0 auto;
    padding: var(--esp-12) var(--esp-4) var(--esp-8);
    display: grid; grid-template-columns: 1fr; gap: var(--esp-10);
}
.rodape-marca { display: flex; flex-direction: column; align-items: flex-start; gap: var(--esp-4); }

/* Logo solta, sem ladrilho nem borda. Duas artes, uma por tema — melhor que
   `filter: invert`, que desbota as cores da marca. */
.rodape-tatiqa { display: block; opacity: .92; transition: opacity var(--transicao); }
.rodape-tatiqa:hover { opacity: 1; }
.rodape-tatiqa img { height: 40px; width: auto; display: block; }
.rodape-tatiqa .marca-escura { display: none; }
[data-tema="escuro"] .rodape-tatiqa .marca-clara { display: none; }
[data-tema="escuro"] .rodape-tatiqa .marca-escura { display: block; }

.rodape-sobre {
    font-size: var(--texto-md);
    color: var(--texto);
    font-weight: 550;
    max-width: 42ch;
    line-height: 1.5;
}
.rodape-recursos {
    display: flex; flex-direction: column; gap: 7px;
    margin: 0; padding: 0; list-style: none;
}
.rodape-recursos li {
    display: flex; align-items: flex-start; gap: var(--esp-2);
    font-size: var(--texto-base);
    color: var(--texto-suave);
    line-height: 1.45;
}
.rodape-recursos i { color: var(--sucesso); font-size: 11px; margin-top: 4px; flex-shrink: 0; }

.rodape-cta {
    display: inline-flex; align-items: center; gap: var(--esp-2);
    padding: var(--esp-2) var(--esp-4);
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio-full);
    font-size: var(--texto-base); font-weight: 600;
    transition: border-color var(--transicao), color var(--transicao), transform var(--transicao);
}
.rodape-cta:hover { border-color: var(--acento); color: var(--acento); transform: translateX(3px); }
.rodape-cta i { font-size: 11px; }

/* A navegação se divide sozinha conforme a largura disponível. No desktop
   vira quatro colunas fixas (ver breakpoint de 900px): o `auto-fit` sozinho
   colapsava tudo numa coluna só, porque a nav é UM filho da grade externa e
   media apenas a largura dessa célula, não a da página. */
.rodape-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--esp-8) var(--esp-6);
}
.rodape-coluna { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rodape-coluna h4 {
    font-size: var(--texto-xs); font-weight: 700;
    text-transform: uppercase; letter-spacing: .07em;
    color: var(--texto);
    margin-bottom: var(--esp-3);
}
/* `> a`, e não `a`: os links do menu suspenso também são <a> dentro desta
   coluna, e com o seletor solto estas regras venciam as do `.submenu-item`
   por especificidade — o chevron perdia o ladrilho e o item ficava diferente
   do mesmo menu no topo da página. O combinador de filho atinge só os links
   soltos da coluna, que é o que estas regras sempre quiseram dizer. */
.rodape-coluna > a {
    display: flex; align-items: center; gap: var(--esp-2);
    padding: 6px 0;
    font-size: var(--texto-base);
    color: var(--texto-suave);
    transition: color var(--transicao), transform var(--transicao);
    min-width: 0;
}
.rodape-coluna > a > i { width: 15px; text-align: center; font-size: 11px; color: var(--texto-fraco); flex-shrink: 0; }
.rodape-coluna > a > span { min-width: 0; }
.rodape-coluna > a b { font-weight: 600; }
.rodape-coluna > a:hover { color: var(--acento); transform: translateX(3px); }
.rodape-coluna > a:hover > i { color: var(--acento); }

.rodape-vivo {
    margin-left: auto;
    padding: 1px 7px;
    border-radius: var(--raio-full);
    background: var(--erro-suave);
    color: var(--erro);
    font-size: 10px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .05em;
}
.rodape-cidade {
    display: flex; align-items: center; gap: var(--esp-2);
    padding: 6px 0;
    font-size: var(--texto-base);
    color: var(--texto-fraco);
}
.rodape-cidade i { width: 15px; text-align: center; font-size: 11px; }

/* ---- Faixa 3: assinatura. */
/* ------------------------------------------------------------ REDES SOCIAIS
   Mora na última linha do rodapé, encostada à direita pelo `.linha-fim`. Sem
   largura, margem ou padding próprios: quem manda no espaço é o `.rodape-fim`.
   Uma faixa de largura inteira deixava cinco ícones à esquerda e o resto da
   linha vazio — o rodapé precisa ser compacto e crescer com o conteúdo, não
   reservar espaço para o que ainda não existe.

   `flex-wrap` para o bloco quebrar em vez de empurrar o crédito quando houver
   redes demais para a linha. */
.rodape-social { display: flex; align-items: center; gap: var(--esp-2); flex-wrap: wrap; }

/* Alvo de 38px: abaixo disso o toque erra no celular. O ícone é discreto,
   a área de clique não precisa ser. */
.rodape-social a {
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border: 1px solid var(--borda);
    border-radius: var(--raio-full);
    color: var(--texto-suave);
    font-size: var(--texto-base);
    transition: color var(--transicao), border-color var(--transicao), transform var(--transicao);
}
.rodape-social a:hover,
.rodape-social a:focus-visible {
    color: var(--acento);
    border-color: var(--acento);
    transform: translateY(-2px);
}

.rodape-fim {
    width: 100%; max-width: var(--largura-conteudo);
    margin: 0 auto;
    padding: var(--esp-5) var(--esp-4);
    border-top: 1px solid var(--borda);
    display: flex; align-items: center; gap: var(--esp-3); flex-wrap: wrap;
    color: var(--texto-fraco);
    font-size: var(--texto-sm);
}
/* Em tela estreita a linha final se centra. Alinhada à esquerda, a assinatura
   quebrava em duas linhas irregulares e as redes ficavam penduradas na ponta
   oposta — dois blocos desalinhados no fecho da página. O `linha-fim` das
   redes é desligado aqui: `margin-left: auto` e centralização são ordens
   contrárias, e a margem venceria. */
@media (max-width: 719px) {
    .rodape-fim { justify-content: center; text-align: center; }
    .rodape-fim .rodape-social { margin-left: 0; width: 100%; justify-content: center; }
}

.rodape-assinatura { font-weight: 700; color: var(--texto-suave); }
.rodape-assinatura:hover { color: var(--acento); }

/* ============================================================ BREAKPOINTS = */
@media (min-width: 640px) {
    .site-palco { padding-left: var(--esp-6); padding-right: var(--esp-6); }
    .palco-largo { padding-left: 0; padding-right: 0; }
    .container { padding-inline: var(--esp-6); }
    .topo-interno { padding-left: var(--esp-6); padding-right: var(--esp-6); }
    .faixa-larga { padding-inline: calc(50vw - 50% + var(--esp-6)); }
    .capa-numeros { grid-template-columns: repeat(4, 1fr); }
    .aovivo-stats { grid-template-columns: repeat(4, 1fr); }
    .galeria { grid-template-columns: repeat(3, 1fr); }
    .capa h1 { font-size: var(--texto-4xl); }
    .faixa-indicadores { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1100px) {
    /* A tabela pede mais largura que a coluna de jogos: 8 colunas numéricas
       contra um confronto por linha. */
    .bloco-competicao { grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr); }
    /* Herói: o jogo ocupa o dobro do resumo. */
    .heroi { grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); }
}
@media (min-width: 900px) {
    /* A grade só entra junto com o menu: é ela que garante o centro REAL,
       independentemente da largura da marca e das ações. */
    .topo-interno { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--esp-4); }
    /* O invólucro dos seletores se dissolve: os dois botões voltam a ser
       filhos diretos de `.site-acoes`, na mesma linha da marca. */
    .site-seletores { display: contents; }
    .site-nav { display: flex; }
    .btn-menu-site { display: none; }
    .gaveta-site, .veu-menu { display: none; }
    .faixa-indicadores { grid-template-columns: repeat(6, 1fr); }
    .indicador-item { border-bottom: 0; }
    .indicador-item + .indicador-item { border-left: 1px solid var(--borda); }
    /* Números 70% / linha do tempo 30%, e a súmula com um time em cada
       coluna. Abaixo disso as duas empilham — no celular lado a lado
       espremeria o nome do atleta a três letras. */
    .grade-jogo { grid-template-columns: 1fr 1fr; }
    .sumula-colunas { grid-template-columns: 1fr 1fr; }
    .capa-duas { grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); }
    /* A grade externa tem DOIS filhos (marca e nav). Declarar quatro colunas
       aqui espremia a nav inteira dentro de 1fr — era esse o motivo dos menus
       empilhados. A marca ganha largura fixa; a nav fica com o resto e se
       divide em quatro por conta própria. */
    .rodape-grade { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: var(--esp-16); }
    .rodape-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    /* A barra índigo em três blocos: convite · jogo · ações. */
    .rodape-chamada-interno { grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--esp-8); }
    .galeria { grid-template-columns: repeat(4, 1fr); }
    .capa { padding: var(--esp-16) var(--esp-10); }
}

/* ------------------------------------------------- LINHA DO TEMPO COMPACTA
   Na coluna estreita ao lado dos números, cada lance ocupava quase 60px de
   altura e três eventos já esticavam o cartão. Compacto aqui, inteiro no
   modal de expandir. */
.feed-compacto .feed-evento { padding: 7px 0; gap: var(--esp-2); }
.feed-compacto .feed-evento > i { width: 24px; height: 24px; font-size: 11px; }
.feed-compacto .fe-minuto { min-width: 26px; font-size: var(--texto-xs); }
.feed-compacto .fe-texto { font-size: var(--texto-base); line-height: 1.35; }

/* Dentro do modal o espaço sobra: volta ao tamanho confortável. */
.sd-modal .feed-compacto .feed-evento { padding: var(--esp-3) 0; gap: var(--esp-3); }
.sd-modal .feed-compacto .feed-evento > i { width: 30px; height: 30px; font-size: var(--texto-sm); }
.sd-modal .feed-compacto .fe-minuto { min-width: 34px; font-size: var(--texto-sm); }

/* ------------------------------------------------------------- CONFETE
   Peças posicionadas em absoluto dentro do bloco do vencedor, animadas só
   por CSS. `overflow: hidden` no palco impede que a chuva crie barra de
   rolagem — transform entra na área rolável (foi o bug da barra fantasma
   no painel, e aqui seria o mesmo). */
.confete-chuva {
    /* Do topo do cartão até a base e de ponta a ponta. O `right: 0` é
       essencial: sem ele a faixa nascia com LARGURA ZERO, e como cada peça é
       posicionada em `left: var(--x)` — uma porcentagem — todas caíam
       empilhadas na borda esquerda. Na página da partida o defeito não
       aparecia porque lá o JS define `left` e `width` para recortar a chuva
       na coluna do vencedor; sem esse recorte, não sobrava largura nenhuma. */
    position: absolute; top: 0; bottom: 0; left: 0; right: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 2;
}
.confete-chuva i {
    position: absolute;
    top: -14px;
    left: var(--x);
    width: 7px; height: 10px;
    background: var(--cor);
    border-radius: 1px;
    opacity: 0;
    animation: confete-cai var(--dur) var(--curva) var(--atraso) both;
}
/* Uma em cada três é fita: comprida e estreita, para a chuva não parecer
   um punhado de quadradinhos iguais. */
.confete-chuva i.fita { width: 3px; height: 16px; border-radius: 2px; }

/* `--queda` é medido no JS a partir da altura real do cartão: com um valor
   fixo, cartão alto deixava o confete sumir no meio e cartão baixo fazia a
   peça atravessar a borda antes de desaparecer. */
@keyframes confete-cai {
    0%   { opacity: 0; transform: translate(0, 0) rotate(0); }
    10%  { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--deriva), var(--queda, 320px)) rotate(var(--giro)); }
}

/* O palco recorta a chuva: sem isto ela transborda o cartão e estica a página. */
.placar-final { overflow: hidden; }

/* ---------------------------------------------------------- BLOCO DO CAMPEÃO
   O cartão é a âncora e o recorte da chuva contínua. */
[data-confete] { position: relative; overflow: hidden; }
.campeao-legenda {
    display: flex; align-items: center; gap: var(--esp-3); flex-wrap: wrap;
    color: var(--topo-texto-suave);
    margin-top: var(--esp-2);
}
.campeao-titulos {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px var(--esp-2);
    border-radius: var(--raio-full);
    background: color-mix(in srgb, var(--ouro) 16%, transparent);
    color: var(--ouro);
    font-size: var(--texto-xs); font-weight: 700;
}
/* Quatro números da campanha. `auto-fit` para caírem para duas colunas no
   celular sem breakpoint escrito à mão. */
.campeao-numeros {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(122px, 1fr));
    gap: var(--esp-3);
    margin-top: var(--esp-5);
}
.campeao-num {
    padding: var(--esp-3);
    border-radius: var(--raio);
    background: rgb(255 255 255 / .06);
    border: 1px solid rgb(255 255 255 / .10);
}
.campeao-num b {
    display: block;
    font-size: var(--texto-xl); font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--topo-texto);
    line-height: 1.1;
}
.campeao-num b.positivo { color: var(--sucesso); }

/* Campanha: três colunas com fio entre elas. Cada dígito tem o rótulo logo
   abaixo, na mesma vertical — assim o par número/letra se lê de uma vez, sem
   depender de espaçamento para separar um valor do seguinte. */
.campanha-ved { display: grid; grid-template-columns: repeat(3, 1fr); }
.campanha-ved span {
    display: flex; flex-direction: column; align-items: center; gap: 1px;
    line-height: 1.05;
}
.campanha-ved span + span { border-left: 1px solid rgb(255 255 255 / .12); }
.campanha-ved b {
    font-size: var(--texto-xl); font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--topo-texto);
}
.campanha-ved i {
    font-style: normal;
    font-size: 9px; font-weight: 700;
    letter-spacing: .08em;
    color: var(--topo-texto-fraco);
}
/* A caixa da campanha carrega dois níveis (números + rótulo geral), então o
   rótulo de baixo ganha um respiro maior que o das outras. */
.campeao-campanha small { margin-top: var(--esp-2); text-align: center; }
.campeao-num small {
    display: block; margin-top: 3px;
    font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
    color: var(--topo-texto-fraco);
}
.campeao-notas {
    display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-5);
    margin-top: var(--esp-4);
    font-size: var(--texto-sm);
    color: var(--topo-texto-suave);
}
.campeao-notas i { color: var(--acento); margin-right: 6px; }
.campeao-notas b { color: var(--topo-texto); font-weight: 700; }


/* ================================================================= NOTÍCIAS =
   Lista, cartão, artigo e o texto publicado. */

/* Nuvem de etiquetas do topo: filtro que também mostra o vocabulário do site
   — quem chega descobre sobre o que se escreve aqui. */
.nuvem-tags {
    display: flex; flex-wrap: wrap; gap: var(--esp-2);
    margin-top: var(--esp-5);
}
.nuvem-tags a {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px var(--esp-3);
    border-radius: var(--raio-full);
    border: 1px solid var(--borda);
    background: var(--superficie);
    font-size: var(--texto-sm); font-weight: 550;
    color: var(--texto-suave);
    transition: border-color var(--transicao), color var(--transicao), background var(--transicao);
}
.nuvem-tags a:hover { border-color: var(--acento); color: var(--acento); }
.nuvem-tags a.ativo {
    background: var(--acento); border-color: var(--acento); color: var(--acento-contraste);
}
.nuvem-tags small {
    padding: 0 6px;
    border-radius: var(--raio-full);
    background: var(--superficie-alt);
    color: var(--texto-fraco);
    font-size: 10px; font-weight: 700;
}
.nuvem-tags a.ativo small { background: rgb(255 255 255 / .22); color: inherit; }

/* Espaço reservado quando a notícia não tem capa. Deixar o cartão sem imagem
   quebraria o alinhamento da grade inteira. */
.noticia-sem-capa {
    display: grid; place-items: center;
    width: 100%; height: 100%;
    background: linear-gradient(135deg, var(--superficie-alt), var(--superficie-2));
    color: var(--texto-fraco);
    font-size: var(--texto-3xl);
}

/* ---- Destaque: a notícia mais recente ocupa a largura toda. */
.noticia-destaque {
    display: grid; grid-template-columns: 1fr; align-items: stretch;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-lg);
    overflow: hidden;
    box-shadow: var(--sombra-sm);
    transition: border-color var(--transicao), box-shadow var(--transicao), transform var(--transicao);
}
.noticia-destaque:hover {
    border-color: var(--acento); box-shadow: var(--sombra-md); transform: translateY(-2px);
}
.noticia-destaque-capa { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
/* A imagem sai do FLUXO (`absolute`). Sem isso ela entra na conta da altura da
   linha do grid, e uma capa em pé — colagem de duas fotos empilhadas, que é
   comum quando o clube monta a arte — esticava o cartão para o dobro da altura
   do texto ao lado. Fora do fluxo, quem manda na altura é a moldura; a imagem
   só preenche e o `cover` recorta. */
.noticia-destaque-capa img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
}
.noticia-destaque-corpo {
    display: flex; flex-direction: column; align-items: flex-start; gap: var(--esp-3);
    padding: var(--esp-6);
}
.noticia-destaque-corpo h2 { font-size: var(--texto-2xl); }
/* Sem teto em `ch` aqui: o bloco é alinhado à ESQUERDA dentro de um cartão
   largo, então tudo o que sobra se acumula à direita e vira buraco. Medida em
   `ch` só ajuda quando o texto é centralizado — aí a sobra fica simétrica e
   lê como respiro. Neste cartão quem limita a linha é a própria coluna, ao
   lado da imagem. */
.noticia-destaque-corpo p { color: var(--texto-suave); }

/* ---- Cartão da grade. */
.noticia-cartao {
    display: flex; flex-direction: column;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-lg);
    overflow: hidden;
    box-shadow: var(--sombra-sm);
    transition: border-color var(--transicao), box-shadow var(--transicao), transform var(--transicao);
}
.noticia-cartao:hover {
    border-color: var(--acento); box-shadow: var(--sombra-md); transform: translateY(-2px);
}
.noticia-capa { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--superficie-alt); }
.noticia-capa img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform var(--vel-cena) var(--curva);
}
.noticia-cartao:hover .noticia-capa img { transform: scale(1.04); }
.noticia-corpo {
    display: flex; flex-direction: column; align-items: flex-start; gap: var(--esp-2);
    padding: var(--esp-4) var(--esp-5) var(--esp-5);
    flex: 1;
}
/* As etiquetas correm em LINHA e quebram juntas. Sem este invólucro elas são
   filhas diretas do flex em coluna do corpo — e viram uma fileira cada. */
.noticia-tags { display: flex; flex-wrap: wrap; gap: var(--esp-1); }
.noticia-corpo h3 { font-size: var(--texto-md); line-height: 1.3; }
.noticia-corpo h3 a:hover { color: var(--acento); }
.noticia-corpo p {
    color: var(--texto-suave);
    font-size: var(--texto-sm);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.noticia-meta {
    margin-top: auto;
    font-size: var(--texto-xs);
    color: var(--texto-fraco);
    font-variant-numeric: tabular-nums;
}
.noticia-cartao-mini .noticia-corpo { padding: var(--esp-4); }
.noticia-cartao-mini h3 { font-size: var(--texto-base); }

/* ---- Paginação. */
.paginacao {
    display: flex; align-items: center; justify-content: center; gap: var(--esp-4);
    margin-top: var(--esp-8);
    flex-wrap: wrap;
}
.paginacao-conta { font-size: var(--texto-sm); color: var(--texto-suave); }
/* `pointer-events: none` e não `display: none`: o botão continua ocupando o
   lugar dele, e a paginação não muda de posição na primeira e na última
   página. */
.btn.desabilitado { opacity: .4; pointer-events: none; }

/* ---- Artigo. */
.artigo { max-width: 760px; margin: 0 auto; }
.artigo-cabeca { text-align: center; margin-bottom: var(--esp-6); }
.artigo-tags { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--esp-2); margin-bottom: var(--esp-4); }
.artigo-tags .etiqueta { transition: background var(--transicao), color var(--transicao); }
.artigo-tags .etiqueta:hover { background: var(--acento-suave); color: var(--acento-forte); }
.artigo-cabeca h1 { font-size: var(--texto-3xl); line-height: 1.15; }
.artigo-resumo {
    margin: var(--esp-4) auto 0;
    max-width: 60ch;
    font-size: var(--texto-md);
    color: var(--texto-suave);
    line-height: 1.6;
}
.artigo-meta {
    display: flex; justify-content: center; flex-wrap: wrap; gap: var(--esp-4);
    margin-top: var(--esp-5);
    font-size: var(--texto-sm);
    color: var(--texto-fraco);
}
.artigo-meta i { margin-right: 5px; }
.artigo-capa {
    /* `--esp-8` e não `--esp-7`: esse token NUNCA existiu (a escala vai 6 → 8),
       e uma variável indefinida invalida o SHORTHAND inteiro — a margem caía
       para 0 e o texto da matéria encostava na capa. Falha silenciosa: nenhum
       aviso no console, e o CSS parece correto na leitura. */
    margin: 0 0 var(--esp-8);
    border-radius: var(--raio-lg);
    overflow: hidden;
    border: 1px solid var(--borda);
}
.artigo-capa img { width: 100%; height: auto; }
.artigo-galeria, .artigo-relacionados { margin-top: var(--esp-10); }
.artigo-relacionados { max-width: none; }

/* ---------------------------------------------------- TEXTO PUBLICADO
   Tipografia do HTML que veio do editor. É o único lugar do site onde as tags
   soltas (h2, p, ul, blockquote) precisam de estilo próprio: em todo o resto,
   o CSS é por classe. Por isso tudo aqui está preso a `.conteudo-publicado` —
   sem esse escopo, viraria estilo global de tag e vazaria para o sistema
   inteiro. */
.conteudo-publicado {
    font-size: var(--texto-md);
    line-height: 1.75;
    color: var(--texto);
    overflow-wrap: break-word;
}
.conteudo-publicado > * + * { margin-top: var(--esp-5); }
/* Imagem no meio do texto. Hoje `HtmlSeguro` remove `<img>` do corpo, então
   isto não tem efeito — está aqui porque a regra `> * + *` só espaça IRMÃOS
   diretos, e imagem colada num parágrafo (`<p><img>texto</p>`) escaparia dela.
   No dia em que a tag for liberada, o respiro já vem junto. */
.conteudo-publicado img {
    display: block;
    max-width: 100%; height: auto;
    margin: var(--esp-6) 0;
    border-radius: var(--raio-lg);
}
.conteudo-publicado h1, .conteudo-publicado h2,
.conteudo-publicado h3, .conteudo-publicado h4 {
    margin-top: var(--esp-8);
    line-height: 1.25;
}
.conteudo-publicado h1 { font-size: var(--texto-2xl); }
.conteudo-publicado h2 { font-size: var(--texto-xl); }
.conteudo-publicado h3 { font-size: var(--texto-lg); }
.conteudo-publicado h4 { font-size: var(--texto-md); }
.conteudo-publicado a {
    color: var(--acento);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.conteudo-publicado a:hover { color: var(--acento-forte); }
.conteudo-publicado ul, .conteudo-publicado ol { padding-left: var(--esp-6); }
.conteudo-publicado li + li { margin-top: var(--esp-2); }
.conteudo-publicado blockquote {
    padding: var(--esp-2) 0 var(--esp-2) var(--esp-5);
    border-left: 3px solid var(--acento);
    color: var(--texto-suave);
    font-size: var(--texto-lg);
    font-style: italic;
}
.conteudo-publicado hr { border: 0; border-top: 1px solid var(--borda); margin: var(--esp-8) 0; }
.conteudo-publicado strong, .conteudo-publicado b { font-weight: 700; color: var(--texto); }

@media (min-width: 900px) {
    /* Destaque em duas colunas só quando há largura para isso: empilhado num
       celular, a imagem 16/9 já ocupa meia tela. */
    /* `auto` na primeira coluna: quem define a largura é a capa, que agora tem
       lado fixo. Com fração, a coluna media primeiro e o quadrado herdava a
       largura dela — era daí que vinha a foto gigante. */
    .noticia-destaque { grid-template-columns: auto minmax(0, 1fr); }
    /* Capa QUADRADA no desktop, e o tamanho vem da ALTURA — não da largura.
       Com a coluna medindo primeiro (`1.25fr`), 1:1 dava uma foto de 660px e o
       cartão inteiro ficava com a altura de meia tela. Fixando a altura em
       380px, o quadrado tem 380 de lado e a coluna `auto` se ajusta a ele; o
       texto fica com todo o resto.

       1:1 e não 16/9 porque a capa que o clube publica é quadrada — é o
       formato que sai do celular e das redes. Recortar em paisagem cortava
       justamente as cabeças da foto de equipe. */
    .noticia-destaque-capa { aspect-ratio: 1 / 1; height: 380px; }
    .noticia-destaque-corpo { justify-content: center; padding: var(--esp-8); }
}

/* ================================================================= GALERIAS =
   Cartão de álbum: capa grande, contagem no canto e o nome embaixo. */
.album {
    display: flex; flex-direction: column;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-lg);
    overflow: hidden;
    box-shadow: var(--sombra-sm);
    transition: border-color var(--transicao), box-shadow var(--transicao), transform var(--transicao);
}
.album:hover { border-color: var(--acento); box-shadow: var(--sombra-md); transform: translateY(-2px); }
.album-capa {
    position: relative;
    display: block; aspect-ratio: 4 / 3; overflow: hidden;
    background: var(--superficie-alt);
}
.album-capa img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform var(--vel-cena) var(--curva);
}
.album:hover .album-capa img { transform: scale(1.04); }
/* Contagem sobre a capa: é a informação que diferencia um álbum de uma foto
   solta, e precisa aparecer antes do clique. */
.album-conta {
    position: absolute; right: var(--esp-3); bottom: var(--esp-3);
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px var(--esp-3);
    border-radius: var(--raio-full);
    background: rgb(0 0 0 / .6);
    color: #FFF;
    font-size: var(--texto-xs); font-weight: 700;
    backdrop-filter: blur(4px);
}
.album-corpo { padding: var(--esp-4); }
.album-corpo h3 { font-size: var(--texto-md); line-height: 1.3; }

/* Álbum aberto: mais colunas que a galeria da capa, porque aqui a foto é o
   conteúdo e não a ilustração de outra coisa. */
.galeria-album { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px)  { .galeria-album { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .galeria-album { grid-template-columns: repeat(4, 1fr); } }

/* ------------------------------------------------- ESTADO VAZIO NAS FAIXAS
   `.estado-vazio` foi desenhado para o cartão claro do painel. Dentro de uma
   faixa escura do site ele saía com texto cinza-escuro sobre fundo escuro —
   invisível. As cores passam a vir dos tokens da faixa. */
.faixa-escura .estado-vazio h3 { color: var(--topo-texto); }
.faixa-escura .estado-vazio p  { color: var(--topo-texto-suave); }
.faixa-escura .estado-vazio-icone {
    background: rgb(255 255 255 / .08);
    color: var(--topo-texto-suave);
}

/* Nas faixas o aviso tem menos ar que num cartão: ele divide a seção com
   outros blocos e não pode empurrar a página inteira para baixo. */
.estado-vazio-faixa { padding: var(--esp-8) var(--esp-5); }

/* Pênaltis no placar: "2 (4) – 2 (3)". O número entre parênteses é menor e
   mais fraco — quem bate o olho precisa ler o placar do jogo primeiro. */
.confronto-placar b small {
    font-size: .55em; font-weight: 700; margin-left: 3px;
    vertical-align: super; color: var(--texto-suave);
}
.confronto-nota {
    grid-column: 1 / -1;
    text-align: center;
    font-size: var(--texto-xs); font-weight: 600;
    text-transform: uppercase; letter-spacing: .08em;
    color: var(--texto-suave);
    margin-top: calc(var(--esp-2) * -1);
}

/* Vaga de mata-mata ainda não decidida no cartão de jogo: mostra de onde o
   time vem ("1º do Grupo A"), em itálico e mais fraco — é uma promessa, não
   um nome. */
.jogo-time .indefinido { color: var(--texto-fraco); font-style: italic; }
/* Etiqueta do grupo dentro da coluna de data do cartão de jogo. */
.jogo-grupo {
    display: block; margin-top: 3px;
    font-size: var(--texto-xs); font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
    color: var(--texto-suave);
}

/* Faixa de grupo DENTRO da tabela da home: uma linha que atravessa todas as
   colunas, separando os blocos sem quebrar a grade. É o que permite manter um
   cabeçalho só e as colunas em prumo de um grupo para o outro.

   Fundo próprio e não só texto: sem ele a linha se confunde com a de um time,
   e o olho perde onde um grupo termina. */
.tabela-classificacao .linha-grupo th {
    padding: var(--esp-3) var(--esp-4);
    background: var(--superficie-2);
    border-top: 1px solid var(--borda);
    color: var(--texto-suave);
    font-size: var(--texto-xs); font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    text-align: left;
}
/* O primeiro grupo encosta no cabeçalho da tabela, que já separa sozinho. */
.tabela-classificacao tbody:first-of-type .linha-grupo th { border-top: 0; }
/* O espaçamento agora vem do `gap` do rótulo; aqui fica só a cor. */
.tabela-classificacao .linha-grupo i { color: var(--acento); }

/* Cabeçalho das páginas de texto (Sobre e as criadas no painel). A descrição
   ganha largura máxima própria: centralizada e ocupando a linha inteira, ela
   viraria uma faixa larga e rasa, difícil de ler. */
.pagina-cabeca {
    text-align: center;
    margin-bottom: var(--esp-6);
}
.pagina-cabeca p {
    max-width: 62ch;
    margin: var(--esp-2) auto 0;
}

/* ------------------------------------------------ MENU "MAIS" DO RODAPÉ
   Reaproveita o componente da navegação (`.menu-raiz` + `data-menu`), então
   não há JavaScript novo: abre no clique, fecha ao clicar fora ou no Esc, e
   cada item continua sendo um <a> de verdade — abre em nova aba, é indexável
   e funciona sem script, ao contrário de um <select> que navega no `change`.

   O gatilho imita um link da coluna para não parecer um corpo estranho no
   meio dos outros três. */
.rodape-menu-gatilho {
    display: flex; align-items: center; gap: var(--esp-2);
    /* Largura do conteúdo, não da coluna. Esticado, a seta era empurrada para
       a outra ponta e ficava órfã, sem nada ligando ela ao rótulo. */
    align-self: flex-start;
    padding: 6px 0;
    border: 0; background: none;
    color: var(--texto-suave);
    font: inherit; font-size: var(--texto-base);
    text-align: left; cursor: pointer;
    transition: color var(--transicao), transform var(--transicao);
}
.rodape-menu-gatilho > i:first-child {
    width: 15px; text-align: center; font-size: 11px;
    color: var(--texto-fraco); flex-shrink: 0;
    transition: color var(--transicao);
}
.rodape-menu-gatilho:hover { color: var(--acento); transform: translateX(3px); }
.rodape-menu-gatilho:hover > i:first-child { color: var(--acento); }
.rodape-menu-gatilho .seta {
    font-size: 10px;
    transition: transform var(--vel) var(--curva);
}
.menu-raiz.aberto .rodape-menu-gatilho .seta { transform: rotate(180deg); }

/* Painel para cima. Só troca a âncora vertical e a origem da animação — o
   resto do `.submenu` continua valendo. */
.submenu-acima {
    top: auto; bottom: calc(100% + 10px);
    transform: translateY(8px) scale(.98);
    transform-origin: bottom left;
}

/* Em tela estreita o painel para de FLUTUAR e vira um bloco dentro da própria
   coluna.

   Ancorar à direita não resolvia: a coluna do rodapé chega a 150px e o painel
   tem 300px, então ele escapa da tela por um lado ou pelo outro dependendo de
   onde a coluna caiu na grade — não existe âncora certa para o dobro da
   largura disponível. Como bloco, ele nunca é mais largo que o espaço que tem.

   A descrição sai junto: numa coluna de 150px ela quebraria em cinco linhas
   por item. O título basta — é para ele que a pessoa está olhando. */
@media (max-width: 900px) {
    .rodape-menu .submenu {
        position: static;
        width: 100%;
        display: none;
        margin-top: var(--esp-2);
        padding: var(--esp-1);
        transform: none;
        box-shadow: none;
    }
    .rodape-menu.aberto .submenu { display: block; }
    .rodape-menu .submenu-item { align-items: center; padding: var(--esp-2); gap: var(--esp-2); }
    .rodape-menu .submenu-item i { width: 24px; height: 24px; font-size: var(--texto-xs); }
    .rodape-menu .submenu-item b { font-size: var(--texto-sm); }
    .rodape-menu .submenu-item span span { display: none; }
}

/* ================================================== FAIXA DE PATROCINADORES
   Marcas da organização rolando acima do rodapé, mesmo mecanismo da faixa de
   resultados (`.ticker-fita` + `@keyframes correr`), com uma diferença: aqui
   passam imagens, e imagem exige altura previsível.

   A classe é `.faixa-marca`, NÃO `.patrocinio-marca`: esse nome já pertence
   aos patrocinadores do clube, na página do time (bloco lá em cima, 34px e
   cinza). Como este arquivo é lido de cima para baixo, as regras daqui
   venciam as de lá por ordem — a marca do clube passou a aparecer com 80px.
   Todo seletor abaixo ainda é escopado por `.faixa-patrocinio`, para que nem
   um nome repetido no futuro consiga vazar.

   Fundo neutro e não índigo: a faixa de resultados é conteúdo do site e pede
   destaque; esta é institucional, precisa ficar abaixo dela na hierarquia — e
   um fundo colorido brigaria com as cores das próprias marcas. */
.faixa-patrocinio {
    border-top: 1px solid var(--borda);
    background: var(--superficie-2);
    overflow: hidden;
}
/* Mais devagar que os resultados (42s): logomarca não se lê como placar, o
   olho precisa reconhecer a marca antes de ela sair de cena. */
.faixa-patrocinio .fita-patrocinio {
    gap: var(--esp-10);
    padding: var(--esp-4) var(--esp-6);
    animation-duration: 58s;
}
/* `.marca-aberta` acompanha o `:hover`: com o balão aberto o ponteiro está
   DENTRO do cartão, fora da faixa — e sem esta classe a fita voltaria a correr,
   levando embora a marca que o balão descreve. */
.faixa-patrocinio:hover .fita-patrocinio,
.faixa-patrocinio.marca-aberta .fita-patrocinio { animation-play-state: paused; }

/* PLACA CLARA por baixo de cada marca, em VEZ do preto-e-branco que havia
   aqui — e a razão é que o tratamento anterior não tinha como funcionar nos
   dois temas ao mesmo tempo.

   Logomarca de patrocinador é PNG/WebP transparente desenhada para papel
   branco: no tema claro ela se lê, no escuro ela some. A tentativa anterior
   (`brightness(0) invert(1)`) resolvia o sumiço achatando o desenho inteiro
   numa silhueta branca — e uma marca com ilustração, gradiente ou duas cores
   perdia tudo que a identifica.

   A placa resolve os dois casos com uma decisão só: a marca aparece SEMPRE
   sobre o fundo para o qual foi desenhada, exatamente como o dono dela a fez.
   Nenhum filtro, nenhuma dessaturação — inclusive porque cor é parte do que a
   cota comprou. */
.faixa-patrocinio .faixa-marca {
    display: grid; place-items: center;
    flex-shrink: 0;
    /* ALTURA FIXA na placa, não na imagem. Com a altura vindo da imagem, uma
       marca deitada renderiza mais baixa que uma quadrada e a fileira de
       placas fica com degraus. A largura continua livre: é ela que preserva a
       proporção de cada marca. */
    height: 72px;
    padding: 10px 16px;
    border-radius: var(--raio-sm);
    background: var(--placa-marca);
    border: 1px solid var(--placa-marca-borda);
    transition: transform .18s ease, box-shadow .18s ease;
}
.faixa-patrocinio .faixa-marca img {
    /* `max-height`, nunca `height`: uma marca enviada com 40px seria ESTICADA
       até 50 e apareceria borrada. O teto limita, não promove.
       O teto é em PIXEL, não `100%`: percentual de altura dentro de um item de
       grid centralizado não resolve contra a linha do grid, o navegador o
       ignora, e marca deitada vazava para fora da placa (62px numa área de
       52). 52 = os 72 da placa menos os 10+10 de padding. */
    max-height: 52px;
    max-width: 180px;
    width: auto; height: auto;
    object-fit: contain;
    display: block;
}
.faixa-patrocinio a.faixa-marca:hover,
.faixa-patrocinio a.faixa-marca:focus-visible {
    transform: translateY(-2px);
    box-shadow: var(--sombra-md);
}


@media (max-width: 719px) {
    .faixa-patrocinio .faixa-marca { height: 58px; padding: 8px 12px; }
    .faixa-patrocinio .faixa-marca img { max-height: 42px; max-width: 140px; }
    .faixa-patrocinio .fita-patrocinio { gap: var(--esp-8); padding: var(--esp-3) var(--esp-4); }
}

/* Tema escuro NÃO tem regra própria aqui: a placa é a mesma nos dois temas,
   e é justamente isso que a torna previsível. O tom dela vem do token
   `--placa-marca`, em tokens.css. */


/* ------------------------------------------------- SELETOR DE CATEGORIA
   Reaproveita `.btn-temporada` e `.menu` do seletor vizinho: são o mesmo
   gesto (escolher um recorte) e não há por que parecerem componentes
   diferentes. Só o menu é mais estreito — aqui cada item é um nome curto,
   sem ano nem selo de status. */
.menu-categorias { min-width: 190px; }
.seletor-categoria .btn-temporada i:first-child { color: var(--acento); }

/* Na gaveta, pílulas abertas em vez de menu: no toque não existe hover, e a
   categoria é a escolha mais ampla da navegação. */
.gaveta-categorias {
    display: flex; flex-wrap: wrap; gap: var(--esp-2);
    padding: var(--esp-3) var(--esp-4);
    border-bottom: 1px solid var(--borda);
}
.gaveta-categoria {
    padding: 6px 14px;
    border: 1px solid var(--borda);
    border-radius: var(--raio-full);
    color: var(--texto-suave);
    font-size: var(--texto-sm); font-weight: 600;
    transition: border-color var(--transicao), background-color var(--transicao), color var(--transicao);
}
.gaveta-categoria:hover { border-color: var(--acento); color: var(--texto); }

/* Divisor dentro do menu suspenso: separa o que MUDA toda semana (notícias,
   galerias) do que é texto de consulta (as páginas). Sem ele os seis itens
   viram uma lista só, e a hierarquia que a ordem estabelece se perde. */
.submenu-divisor {
    height: 1px;
    margin: var(--esp-2) var(--esp-3);
    background: var(--borda);
}

/* A categoria ATIVA em verde suave, e não no acento.
   Motivo: o acento é a cor da própria categoria (a paleta muda com ela), então
   marcar a escolhida com o acento seria pintar a seleção com a cor que ela
   mesma define — no dia em que alguém escolher a paleta esmeralda, "ativo" e
   "inativo" ficariam iguais. O verde diz "é esta" independentemente da paleta.

   O texto usa `--sucesso-forte` (tom 700), não `--sucesso`: sobre o fundo
   suave, o 600 não alcança o contraste AA. */
.menu-categorias .menu-item.ativo {
    background: var(--sucesso-suave);
    color: var(--sucesso-forte);
}
.menu-categorias .menu-item.ativo i:first-child { color: var(--sucesso); }

/* A pílula da gaveta é a mesma escolha em outra forma — segue a mesma cor. */
.gaveta-categoria.ativa {
    background: var(--sucesso-suave);
    border-color: var(--sucesso);
    color: var(--sucesso-forte);
}

/* ============================================================ BALÃO DA MARCA
   Cartão que abre ao passar o mouse sobre um patrocinador da faixa. Vive no
   `<body>` (ver o porquê em site.js) e por isso NÃO é escopado por
   `.faixa-patrocinio` — o nome `balao-` não se repete em lugar nenhum.

   SEGUE O TEMA. A primeira versão era branca nos dois, para não sumir dentro
   de uma faixa de marcas apagadas — mas a faixa deixou de ser apagada (cada
   marca ganhou placa própria), e o cartão branco passou a ser o único bloco
   claro de uma página escura, brilhando sozinho.
   Agora usa os tokens de superfície: no escuro o balão é escuro, e o que se
   destaca é a placa clara da marca logo abaixo dele — que é o que interessa. */
.balao-marca {
    position: fixed;
    /* Escala de tokens, não um número solto. 1200 cravado aqui deixava o
       cartão ACIMA do tooltip do sistema (400), e o rótulo dos ícones de
       contato ficaria escondido atrás dele. `--z-flutuante` é a camada dos
       painéis presos a um elemento — menu suspenso, seletor — que é
       exatamente o que este balão é. */
    z-index: var(--z-flutuante);
    left: 0; top: 0;
    width: max-content;
    max-width: min(300px, calc(100vw - 24px));
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: 14px;
    /* Duas sombras: a curta assenta o cartão, a longa e difusa dá o
       destacamento. Uma sombra só faria o balão parecer colado na faixa. */
    box-shadow: var(--sombra-lg), var(--sombra-xl);
    /* `visibility` e não `display`: o JS mede a altura do cartão para decidir
       se ele abre para cima ou para baixo, e `display: none` mede zero. */
    visibility: hidden;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
    pointer-events: none;
}
.balao-marca.visivel {
    visibility: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;   /* precisa receber o mouse: o rodapé tem links */
}
@media (prefers-reduced-motion: reduce) {
    .balao-marca { transition: none; transform: none; }
}

/* A seta segue a marca, não o meio do cartão: com o balão empurrado pela borda
   da janela, uma seta centrada apontaria para o lado errado. */
.balao-seta {
    position: absolute;
    left: var(--seta-x, 50%);
    bottom: -6px;
    width: 12px; height: 12px;
    margin-left: -6px;
    background: var(--superficie-alt);
    transform: rotate(45deg);
    border-radius: 2px;
}
/* O cartão tem contorno; a seta precisa continuar esse contorno, ou fica uma
   ponta solta encostada numa caixa desenhada. Girada 45°, as bordas que ficam
   PARA FORA são a direita e a de baixo — e viram a esquerda e a de cima
   quando o balão abre para baixo. */
.balao-seta {
    border-right: 1px solid var(--borda);
    border-bottom: 1px solid var(--borda);
}
.balao-marca.abaixo .balao-seta {
    bottom: auto; top: -6px;
    border: 0;
    border-left: 1px solid var(--borda);
    border-top: 1px solid var(--borda);
}

/* CABEÇALHO E RODAPÉ recuados em cinza, com o miolo branco entre eles.
   O cartão inteiro branco fazia as três faixas terem o mesmo peso, e o nome
   em caixa forte no topo puxava toda a atenção — a descrição, que é o que a
   pessoa quer ler, virava a parte apagada. Com as pontas em cinza claro, o
   branco do meio é que se destaca, e nome e ícones podem ser discretos. */
.balao-cabeca {
    display: flex; flex-direction: column; gap: 1px;
    padding: 8px 14px 7px;
    background: var(--superficie-alt);
    border-bottom: 1px solid var(--borda);
    border-radius: 14px 14px 0 0;
}
/* Sem esta etiqueta o cartão abre com um nome de empresa solto, e o visitante
   não tem por que supor que aquilo é patrocínio e não notícia. */
.balao-etiqueta {
    font-size: 8.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .1em;
    color: var(--texto-fraco);
}
/* 13px/600 e a fonte do corpo, não a de título: o nome é uma referência, não
   uma manchete. Em 800 com fonte display ele gritava dentro de um cartão de
   300px e fazia a descrição logo abaixo parecer legenda. */
.balao-nome {
    font-size: 13px; font-weight: 600;
    letter-spacing: -.005em; line-height: 1.3;
    color: var(--texto);
}
.balao-corpo {
    padding: 10px 14px 11px;
    font-size: 12px; font-weight: 400; line-height: 1.5;
    color: var(--texto-suave);
}
.balao-corpo[hidden] { display: none; }

.balao-rodape {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding: 7px 14px;
    background: var(--superficie-alt);
    border-top: 1px solid var(--borda);
    border-radius: 0 0 14px 14px;
}
.balao-rodape[hidden] { display: none; }
/* Sem descrição, o rodapé encosta direto no cabeçalho e as duas bordas viram
   uma linha dupla. */
.balao-corpo[hidden] + .balao-rodape { border-top: 0; }

/* SÓ O ÍCONE. Com rótulo escrito, três contatos ocupavam duas linhas e o
   cartão ficava mais alto que a descrição que ele existe para mostrar. O nome
   de cada um vem por `title` e `aria-label`, no JS.

   28px e fundo BRANCO sobre a faixa cinza: em cinza-sobre-cinza os círculos
   sumiriam, e o preenchimento colorido que estava aqui antes deixava três
   bolotas competindo com a marca real logo abaixo do cartão. Agora a cor está
   só no traço do ícone. */
.balao-selo {
    display: inline-grid; place-items: center;
    width: 28px; height: 28px;
    border-radius: 50%;
    font-size: 15px;
    background: var(--superficie);
    border: 1px solid var(--borda);
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.balao-selo:hover,
.balao-selo:focus-visible {
    transform: translateY(-1px);
    border-color: currentColor;
    box-shadow: var(--sombra-md);
}
/* Cores da própria rede, e não o acento do site: o ícone é reconhecido pela
   cor antes de ser lido, e é isso que faz o WhatsApp virar clique. Só o
   TRAÇO é colorido — o fundo dos três é branco. */
/* A classe vem do NOME da rede (`selo-whatsapp`, `selo-instagram`…), montada
   no JS a partir do que o PHP mandou. Acrescentar uma rede é acrescentar duas
   linhas aqui — e enquanto elas não existirem o ícone sai na cor neutra do
   cartão, que é degradação aceitável, não tela quebrada. */
.balao-selo.selo-whatsapp  { color: #1FA855; }
.balao-selo.selo-instagram { color: #D6337E; }
.balao-selo.selo-facebook  { color: #1877F2; }
.balao-selo.selo-youtube   { color: #E5322D; }
/* No escuro os tons de marca escurecem contra a superfície e perdem a leitura
   imediata que justifica usar a cor da rede. Clareados só o bastante para o
   ícone continuar sendo reconhecido antes de ser lido. */
:root[data-tema="escuro"] .balao-selo.selo-whatsapp  { color: #3DD68C; }
:root[data-tema="escuro"] .balao-selo.selo-instagram { color: #F472B6; }
:root[data-tema="escuro"] .balao-selo.selo-facebook  { color: #60A5FA; }
:root[data-tema="escuro"] .balao-selo.selo-youtube   { color: #F87171; }
/* O site fica neutro de propósito: é o terceiro em importância — a logomarca
   inteira já leva para lá, e um cinza evita que ele compita com os contatos
   diretos, que é onde o patrocinador realmente atende. */
.balao-selo.selo-site  { color: var(--texto-fraco); }

@media (max-width: 719px) {
    /* A faixa continua rolando no celular; o balão é que não abre por toque.
       A regra fica aqui como garantia caso um aparelho híbrido reporte mouse. */
    .balao-marca { max-width: calc(100vw - 24px); }
}