/* =====================================================================
   SPFCBase — componentes de listagem e retrospecto
   Depende de tokens.css. Separado de base.css de propósito: base.css tem os
   componentes de documento, este tem os de conjunto de dados.
   ===================================================================== */

/* ---- Caixa de retrospecto -------------------------------------------
   A BARRA em si vive em base.css como `.barra-ved` — um componente só para
   o site inteiro. Aqui fica apenas a caixa e a lista de números que a
   acompanham. Não recriar a barra: a versão de base.css distingue empate
   por hachura, não só por cor. */
.retrospecto {
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-caixa);
  background: var(--cor-fundo-alt);
  padding: var(--e-4);
  margin-bottom: var(--e-5);
}
.retrospecto__titulo {
  font-family: var(--fonte-tabela);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--texto-xs);
  color: var(--cor-texto-fraco);
  margin: 0 0 var(--e-3);
}
.retrospecto__numeros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-5);
  margin: 0;
}
.retrospecto__numeros dt {
  font-family: var(--fonte-tabela);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--texto-xs);
  color: var(--cor-texto-fraco);
}
.retrospecto__numeros dd {
  margin: 0;
  font-family: var(--fonte-display);
  font-size: var(--texto-xl);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.retrospecto__numeros small {
  font-family: var(--fonte-texto);
  font-size: var(--texto-sm);
  font-weight: 400;
  color: var(--cor-texto-fraco);
  margin-left: 2px;
}

/* ---- Selo de campeão --------------------------------------------------
   Preto tradição com a taça em amarelo vitória: 11,05 de contraste, as duas
   cores oficiais do logo padrão.

   ⚠️ A seção 11 tira o amarelo do papel de "vitória" — mas o problema de lá
   era escala: o selo de resultado aparece milhares de vezes e dominava a
   tela. Este aparece só nos títulos, e ouro é cor de taça em qualquer
   lugar. Se um dia incomodar, trocar `--cor-selo-campeao` resolve sem tocar
   em mais nada.

   Autocontido como os selos de resultado: o contraste não depende da cor da
   página, então serve igual nos dois temas sem override. */
.campeao {
  --cor-selo-campeao: var(--spfc-amarelo-vitoria);
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  margin: 0 0 var(--e-3);
  padding: var(--e-2) var(--e-4);
  border-radius: var(--raio-caixa);
  background: var(--spfc-preto-tradicao);
  color: var(--cor-selo-campeao);
  font-family: var(--fonte-tabela);
}
.campeao__taca { flex-shrink: 0; }
.campeao strong {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--texto-sm);
  line-height: 1.2;
}
/* O nome da competição em branco, e não no amarelo: dois pesos de amarelo
   na mesma caixa competiriam, e a taça é quem deve puxar o olho. */
.campeao__detalhe {
  display: block;
  color: #FFFFFF;
  font-size: var(--texto-xs);
  opacity: 0.85;
}

/* Nota ao lado do título de uma fase — "eliminado nas quartas". */
.secao__nota {
  margin-left: var(--e-2);
  font-family: var(--fonte-tabela);
  font-size: var(--texto-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cor-texto-fraco);
}

/* Anos de outras edições: muitos números curtos, então viram uma grade que
   quebra sozinha em vez de uma linha que estoura no celular. */
.edicoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-3);
  font-family: var(--fonte-tabela);
  font-variant-numeric: tabular-nums;
}
.edicoes__atual { color: var(--cor-texto-fraco); }

/* Comissão de arbitragem, embaixo do árbitro principal na ficha. Lista, e
   não texto corrido: a função de cada um é parte da informação. */
.ficha__comissao {
  list-style: none;
  margin: var(--e-1) 0 0;
  padding: 0;
  font-size: var(--texto-sm);
}
.ficha__comissao li { margin-top: 2px; }
.ficha__comissao-tipo {
  color: var(--cor-texto-fraco);
  font-family: var(--fonte-tabela);
  font-size: var(--texto-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: var(--e-2);
}

/* Número da camisa na escalação. Largura fixa para os nomes alinharem
   mesmo com 7 e 11 na mesma lista, e `tabular-nums` pela mesma razão.
   Discreto: é referência, não o dado principal da linha. */
.escalacao__camisa {
  display: inline-block;
  min-width: 1.75em;
  margin-right: var(--e-2);
  text-align: right;
  font-family: var(--fonte-tabela);
  font-variant-numeric: tabular-nums;
  font-size: var(--texto-sm);
  color: var(--cor-texto-fraco);
}

/* ---- Coluna de posição em tabela ordenável ---------------------------
   Secundária de propósito: é referência de leitura, não o dado da linha.
   Peso igual ao do nome faria a tabela parecer um pódio, e ordenar por
   nome viraria "ranking alfabético", que não quer dizer nada. */
.pos {
  width: 1%;
  white-space: nowrap;
  color: var(--cor-texto-fraco);
  font-variant-numeric: tabular-nums;
  font-size: var(--texto-sm);
  padding-right: var(--e-3);
}
thead .pos { color: var(--cor-texto-fraco); }

/* ---- Paginação ------------------------------------------------------- */
.paginacao {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  flex-wrap: wrap;
  margin-top: var(--e-5);
  padding-top: var(--e-4);
  border-top: 1px solid var(--cor-borda);
  font-family: var(--fonte-tabela);
  font-size: var(--texto-sm);
}
.paginacao__pos { color: var(--cor-texto-fraco); }
.paginacao a,
.paginacao span[aria-current] {
  padding: var(--e-1) var(--e-3);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
}
.paginacao span[aria-current] {
  background: var(--spfc-preto-tradicao);
  color: var(--cor-texto-invertido);
  border-color: var(--spfc-preto-tradicao);
}

/* ---- Filtros --------------------------------------------------------- */
.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  align-items: flex-end;
  padding: var(--e-4);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-caixa);
  background: var(--cor-fundo-alt);
  margin-bottom: var(--e-5);
}
.filtros label {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
  font-family: var(--fonte-tabela);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--texto-xs);
  color: var(--cor-texto-fraco);
}
.filtros select,
.filtros button {
  font-family: var(--fonte-texto);
  font-size: var(--texto-sm);
  padding: var(--e-1) var(--e-2);
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio);
  background: var(--cor-fundo);
  color: var(--cor-texto);
  min-height: 2.1rem;
}
.filtros button {
  background: var(--spfc-preto-tradicao);
  color: var(--cor-texto-invertido);
  border-color: var(--spfc-preto-tradicao);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: var(--fonte-tabela);
}

/* ---- Grade de cartões ------------------------------------------------ */
.cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--e-4);
}
.cartao {
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-caixa);
  padding: var(--e-4);
  background: var(--cor-fundo);
}
.cartao__titulo {
  font-family: var(--fonte-display);
  font-size: var(--texto-lg);
  margin: 0 0 var(--e-2);
}
.cartao__numero {
  font-family: var(--fonte-display);
  font-size: var(--texto-2xl);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.cartao small { color: var(--cor-texto-fraco); font-size: var(--texto-sm); }

@media (max-width: 40rem) {
  .retrospecto__numeros { gap: var(--e-4); }
  .filtros { flex-direction: column; align-items: stretch; }
}

/* ---- Atalho de temporadas -------------------------------------------- */
.anos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1);
  margin-bottom: var(--e-5);
}
.anos a {
  font-family: var(--fonte-tabela);
  font-variant-numeric: tabular-nums;
  font-size: var(--texto-sm);
  padding: 2px var(--e-2);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  color: var(--cor-texto-suave);
}
.anos a:hover {
  background: var(--spfc-preto-tradicao);
  color: var(--cor-texto-invertido);
  border-color: var(--spfc-preto-tradicao);
}

/* ---- Aviso de clube renomeado ---------------------------------------
   Vai no topo da página de um nome antigo, antes de qualquer número: sem
   ele o visitante lê "32 jogos" achando que é o confronto inteiro. */
.aviso-clube {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  border: 1px solid var(--spfc-vermelho-fibra);
  border-left-width: 5px;
  border-radius: var(--raio-caixa);
  background: var(--cor-fundo-alt);
  padding: var(--e-3) var(--e-4);
  margin-bottom: var(--e-5);
}
.aviso-clube__texto { margin: 0; }
.aviso-clube__acao {
  font-family: var(--fonte-tabela);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--texto-sm);
  padding: var(--e-2) var(--e-3);
  border: 2px solid var(--spfc-vermelho-fibra);
  border-radius: var(--raio);
  color: var(--spfc-vermelho-fibra);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.aviso-clube__acao:hover {
  background: var(--spfc-vermelho-fibra);
  color: #FFFFFF;
  border-bottom-color: var(--spfc-vermelho-fibra);
}

/* Em tela estreita o aviso empilha e o botão ocupa a linha toda.
   Sem isto o texto do botão estoura a largura e a PÁGINA inteira passa a
   rolar de lado — não só o bloco. */
@media (max-width: 34rem) {
  .aviso-clube { flex-direction: column; align-items: stretch; }
  .aviso-clube__acao { justify-content: center; text-align: center; }
}

/* ---- Menu do topo ----------------------------------------------------
   ⚠️ SEM `overflow` aqui. Ele já esteve: rolava horizontalmente em tela
   estreita. Só que `overflow: auto` cria contexto de recorte, e o submenu
   de "Pessoas" abria fora da caixa — existia no DOM, com altura e largura,
   e o navegador simplesmente não o pintava. Clicar não fazia nada.
   Em tela estreita a barra quebra em duas linhas, que não corta nada. */
.menu {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1);
  margin-left: auto;
}
.menu a {
  font-family: var(--fonte-tabela);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--texto-sm);
  white-space: nowrap;
  padding: var(--e-2) var(--e-3);
  border-radius: var(--raio);
  color: var(--spfc-cinza-king);
  border-bottom: 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.menu a:hover,
.menu a:focus-visible {
  background: var(--spfc-vermelho-fibra);
  color: #FFFFFF;
}
.menu a:visited { color: var(--spfc-cinza-king); }


/* ---- Apoio no rodapé -------------------------------------------------
   Crédito de quem levantou os dados. Presença discreta e permanente, não
   anúncio: o rodapé é onde a origem do acervo pertence.

   A plaquinha branca não é decoração — a marca tem uma barra preta que
   sumiria no fundo `preto tradição` do tema escuro. Branca, ela aparece
   igual nos dois temas, com a marca intacta. 🚫 Nada de `filter`,
   `opacity` ou recolorização sobre logo de terceiro. */
/* Sem margem própria: o espaçamento entre as colunas é do `gap`
   do rodapé, e somar os dois desalinharia o topo das duas. */
.apoio { margin: 0; }

.apoio__link {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-2);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-caixa);
  /* Fundo do tema, não branco fixo: só a plaquinha do logo é branca. Assim
     o texto ao lado continua sendo o do tema e o contraste se resolve
     sozinho nos dois. */
  background: var(--cor-fundo);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease;
}
/* O realce do hover mora na moldura e no texto — nunca na marca. */
.apoio__link:hover { border-color: var(--spfc-vermelho-fibra); }
.apoio__link:hover .apoio__texto strong { color: var(--spfc-vermelho-fibra); }
.apoio__link:focus-visible {
  outline: 2px solid var(--cor-foco);
  outline-offset: 2px;
}

.apoio__logo {
  display: block;
  width: 132px;
  height: auto;
  background: #FFFFFF;          /* a plaquinha, atrás do lettering */
  border-radius: var(--raio);
  padding: var(--e-2) var(--e-3);
}

.apoio__texto {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  font-family: var(--fonte-tabela);
}
.apoio__rotulo {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--texto-xs);
  /* `--cor-texto-suave` (Valentim), não `--cor-texto-fraco` (Peres): a
     plaquinha é branca nos DOIS temas, e Peres sobre branco dá 3,16 —
     reprova em AA para texto de 13px. Valentim dá 7,80. O resto do rodapé
     pode usar Peres porque o fundo dele é outro. */
  color: var(--cor-texto-suave);
}
.apoio__texto strong {
  font-size: var(--texto-base);
  color: var(--cor-texto);
  transition: color .15s ease;
}

/* Em tela estreita a plaquinha ocupa a linha inteira em vez de espremer o
   nome ao lado dela. */
@media (max-width: 30rem) {
  .apoio__link { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 48rem) {
  .topo__interno { flex-wrap: wrap; gap: var(--e-2); }
  .menu { margin-left: 0; width: 100%; }
}

/* A lista cai para a esquerda quando o item está encostado na borda direita. */
.menu__grupo:last-child .menu__sub { left: auto; right: 0; }

/* ---- Linha de tabela clicável ---------------------------------------
   Só com `.js` na raiz: sem JavaScript a linha não é clicável e o cursor
   de mão seria mentira. A data continua sendo link nos dois casos. */
.js tr[data-url] { cursor: pointer; }
.js tr[data-url]:hover { background: var(--cor-fundo-realce); }

/* O link de dentro precisa continuar identificável sobre a linha em hover. */
.js tr[data-url]:hover a { text-decoration: underline; }

/* Foco no link da linha destaca a linha toda, para o teclado dar o mesmo
   retorno visual que o mouse. */
tr[data-url]:focus-within { background: var(--cor-fundo-realce); }

/* ---- Ordenação de tabela --------------------------------------------
   O botão é criado por JavaScript; sem ele o cabeçalho fica texto simples.
   Por isso a dica de uso e a seta só existem com a classe `js` na raiz. */
.js-somente { display: none; }
.js .js-somente { display: block; }

.ordenar {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  width: 100%;
  min-height: 32px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  text-align: inherit;
}
th.num .ordenar { justify-content: flex-end; }
.ordenar:hover { color: var(--spfc-vermelho-fibra); }

/* A seta indica o estado: apagada quando a coluna não é a ordenada. */
.ordenar__seta {
  width: 0; height: 0; flex: none;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.25;
}
th[aria-sort="ascending"] .ordenar__seta {
  border-top: 0;
  border-bottom: 5px solid currentColor;
  opacity: 1;
}
th[aria-sort="descending"] .ordenar__seta { opacity: 1; }
th[aria-sort="ascending"],
th[aria-sort="descending"] {
  color: var(--spfc-vermelho-fibra);
  background: var(--cor-fundo-realce);
}

/* ---- Marca de identificação em dúvida --------------------------------
   Terceiro estado, ao lado de `.ausente` (não se sabe) e `.nulo-real`
   (zero verdadeiro): o nome existe, mas não se tem certeza de que é o
   registro certo. Visualmente distinta das outras duas de propósito. */
.duvida {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.05em;
  height: 1.05em;
  margin-left: 0.25em;
  border: 1px solid var(--cor-borda-forte);
  border-radius: 50%;
  font-family: var(--fonte-tabela);
  font-size: 0.78em;
  line-height: 1;
  color: var(--cor-texto-fraco);
  cursor: help;
  vertical-align: baseline;
}

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

/* ---- Marca redonda (1.000º jogo, 2.000º...) -------------------------- */
.marca-redonda {
  border: 2px solid var(--spfc-vermelho-fibra);
  border-radius: var(--raio-caixa);
  background: var(--cor-fundo-alt);
  padding: var(--e-3) var(--e-4);
  margin-bottom: var(--e-5);
  font-family: var(--fonte-texto);
}
.marca-redonda strong { font-family: var(--fonte-display); font-size: var(--texto-lg); }

/* ---- Busca ----------------------------------------------------------- */
.busca { display: flex; gap: var(--e-1); align-items: stretch; }
.busca input[type="search"] {
  font-family: var(--fonte-texto);
  font-size: var(--texto-sm);
  padding: var(--e-1) var(--e-3);
  min-height: 40px;
  min-width: 12rem;
  border: 1px solid var(--spfc-cinza-valentim);
  border-radius: var(--raio);
  background: var(--cor-fundo);
  color: var(--cor-texto);
}
/* ---- Botão -----------------------------------------------------------
   O site tem um botão só, e agora ele é um componente: o "Buscar" do topo
   e a faixa de cookies usam a mesma regra. Duas definições parecidas se
   soltam uma da outra na primeira mudança de tom.

   Vermelho preenchido com texto branco dá 5,19 — passa em AA e é
   autocontido, então serve igual no tema claro e no escuro e sobre o fundo
   escuro da faixa, sem override. 🚫 Nunca verde, nem para "aceitar". */
.botao,
.busca button {
  font-family: var(--fonte-tabela);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--texto-sm);
  padding: 0 var(--e-3);
  min-height: 40px;
  border: 2px solid var(--spfc-vermelho-fibra);
  border-radius: var(--raio);
  background: var(--spfc-vermelho-fibra);
  color: #FFFFFF;
  cursor: pointer;
}
.botao:hover,
.busca button:hover {
  background: var(--spfc-vermelho-bandeirante);
  border-color: var(--spfc-vermelho-bandeirante);
}

/* Variante de menor peso, para a escolha que não é a principal. Mantém a
   forma e o tamanho do botão cheio — o que muda é só o preenchimento, para
   os dois continuarem parecendo botão. */
.botao--fantasma {
  background: transparent;
  color: currentColor;
  border-color: currentColor;
}
.botao--fantasma:hover {
  background: transparent;
  border-color: var(--spfc-vermelho-fibra);
  color: var(--spfc-vermelho-fibra);
}

.busca--pagina { margin-bottom: var(--e-5); flex-wrap: wrap; }
.busca--pagina label {
  width: 100%;
  font-family: var(--fonte-tabela);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--texto-xs);
  color: var(--cor-texto-fraco);
  margin-bottom: var(--e-1);
}
.busca--pagina input[type="search"] { flex: 1 1 18rem; }

.resultados { list-style: none; margin: 0 0 var(--e-5); padding: 0; }
.resultados li + li { border-top: 1px solid var(--cor-borda); }
.resultados a {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e-2);
  padding: var(--e-3) var(--e-2);
  border-bottom: 0;
  min-height: 44px;
}
.resultados a:hover { background: var(--cor-fundo-alt); }
.resultados__nome { font-family: var(--fonte-display); font-size: var(--texto-lg); }
.resultados__detalhe { color: var(--cor-texto-suave); font-size: var(--texto-sm); }

@media (max-width: 48rem) {
  .busca { width: 100%; }
  .busca input[type="search"] { flex: 1; min-width: 0; }
}

/* ---- Escalação e gols de uma partida ---------------------------------- */
/* Duas colunas em tela larga, uma no celular. Titulares e reservas lado a
   lado porque o olho compara os dois grupos; gols marcados e sofridos lado a
   lado porque é assim que um placar se lê. */
.escalacao, .gols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--e-5);
}
.escalacao h3, .gols h3 {
  font-size: var(--texto-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cor-texto-suave);
  margin: 0 0 var(--e-2);
  padding-bottom: var(--e-2);
  border-bottom: 1px solid var(--cor-borda);
}
.escalacao__lista, .gols__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--fonte-tabela);
  font-size: var(--texto-sm);
}
.escalacao__lista li, .gols__lista li {
  padding: var(--e-2) 0;
  border-bottom: 1px solid var(--cor-borda);
}
.escalacao__lista li:last-child, .gols__lista li:last-child { border-bottom: 0; }

/* Posição, minuto e afins: informação de apoio, nunca competindo com o nome. */
.escalacao__posicao, .escalacao__nota,
.gols__minuto, .gols__tipo, .gols__assistencia {
  color: var(--cor-texto-suave);
  font-size: var(--texto-xs);
}
.escalacao__posicao, .gols__tipo {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.gols__minuto { font-variant-numeric: tabular-nums; }
.escalacao__nota::before, .gols__assistencia::before { content: "· "; }

/* A formação ao lado do nome do time: contexto, não título. */
.escalacao__formacao {
  font-family: var(--fonte-tabela);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  color: var(--cor-texto-suave);
}
/* Dois times empilham; dentro de cada um, titulares e reservas dividem. */
.escalacao + .escalacao { margin-top: var(--e-5); }

/* ---- Submenu do topo -------------------------------------------------
   `<details>` em vez de um menu de JavaScript: abre, fecha e navega por
   teclado sozinho, e sem script continua funcionando (seção 4). */
.menu__grupo { position: relative; }
.menu__grupo > summary {
  font-family: var(--fonte-tabela);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--texto-sm);
  white-space: nowrap;
  padding: var(--e-2) var(--e-3);
  border-radius: var(--raio);
  color: var(--spfc-cinza-king);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  cursor: pointer;
  list-style: none;
}
.menu__grupo > summary::-webkit-details-marker { display: none; }
.menu__grupo > summary::after {
  content: "▾";
  font-size: 0.7em;
  opacity: 0.7;
}
.menu__grupo > summary:hover,
.menu__grupo > summary:focus-visible,
.menu__grupo[open] > summary {
  background: var(--spfc-vermelho-fibra);
  color: #FFFFFF;
}
.menu__sub {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 40;
  min-width: 12rem;
  /* Nunca mais larga que a tela: no celular a lista tem quase a largura
     toda e sem isto escaparia pela direita. */
  max-width: calc(100vw - 2rem);
  display: flex;
  flex-direction: column;
  padding: var(--e-1);
  background: var(--spfc-preto-tradicao);
  border: 1px solid var(--spfc-cinza-valentim);
  border-radius: var(--raio);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
.menu__sub a { width: 100%; }

/* ⚠️ Nada de `position: static` no `.menu__grupo` em tela estreita. Já esteve
   aqui, e sem ancoragem o `top: 100%` da lista passava a valer contra a
   janela inteira: no celular ela abria em 812px, fora da tela. O submenu
   fica ancorado ao próprio rótulo em qualquer largura. */

/* ---- Passagens pelo clube --------------------------------------------- */
.passagens {
  list-style: none;
  margin: 0 0 var(--e-4);
  padding: 0;
  font-family: var(--fonte-tabela);
}
.passagens li {
  padding: var(--e-2) 0;
  border-bottom: 1px solid var(--cor-borda);
}
.passagens li:last-child { border-bottom: 0; }
.passagens__periodo { font-variant-numeric: tabular-nums; }
.passagens__nota {
  color: var(--cor-texto-suave);
  font-size: var(--texto-sm);
}
.passagens__nota::before { content: "· "; }

/* ---- Aviso de cookies -------------------------------------------------
   Discreto de propósito: faixa no rodapé, não janela sobre o conteúdo. O
   visitante veio ler o placar de 1993, não decidir sobre medição — e uma
   caixa no meio da tela transformaria isso em pedágio.
   Nasce com [hidden]; só o JavaScript a mostra, e só quando não há
   escolha registrada. */
.cookies {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--e-3) var(--e-4);
  padding: var(--e-3) var(--e-4);
  background: var(--spfc-preto-tradicao);
  color: var(--spfc-cinza-king);
  border-top: 3px solid var(--spfc-vermelho-fibra);
  font-size: var(--texto-sm);
}
.cookies__texto { margin: 0; max-width: 52rem; }
.cookies__texto strong { color: #FFFFFF; }
.cookies__acoes { display: flex; gap: var(--e-2); flex-shrink: 0; }
.cookies__botao {
  /* A aparência vem de .botao. Aqui fica só o que é próprio da faixa: alvo
     de toque de 44px, o mínimo confortável no celular — o Buscar do topo
     usa 40 para alinhar com a altura do campo ao lado. */
  min-height: 44px;
  padding: var(--e-2) var(--e-4);
}
/* Sobre o fundo escuro da faixa, o fantasma herda o cinza claro do texto
   pelo currentColor; no hover ele assume o vermelho, como o irmão cheio. */
.cookies .botao--fantasma { color: var(--spfc-cinza-king); }
.cookies .botao--fantasma:hover { color: var(--spfc-vermelho-fibra); border-color: var(--spfc-vermelho-fibra); }

.cookies__botao:focus-visible {
  outline: 2px solid var(--spfc-amarelo-vitoria);
  outline-offset: 2px;
}

@media (max-width: 40rem) {
  .cookies { justify-content: flex-start; }
  .cookies__acoes { width: 100%; }
  .cookies__botao { flex: 1; }
}