/* ==========================================================================
   Scout Futebol — estilo do site
   --------------------------------------------------------------------------
   Visual: as cores do Brasil (verde, amarelo e azul) e "vidro" translúcido
   (fundo com brilhos coloridos e cartões semitransparentes por cima).

   Regras de acessibilidade que este arquivo segue (WCAG 2.2, nível AA):
   - Texto com contraste mínimo de 4,5:1; bordas, foco e estados com 3:1.
     As cores ficam todas nas variáveis abaixo e são conferidas pelo script
     ferramentas/verificar_site.py — inclusive o vidro, misturado com cada
     cor que pode estar atrás dele. Se trocar uma cor, rode o script.
   - Foco do teclado sempre visível (contorno grosso, nunca removido).
   - Links no meio do texto são sublinhados: a cor sozinha não basta.
   - Alvos de clique com pelo menos 44px.
   - Respeita as preferências do sistema: modo escuro, reduzir movimento,
     reduzir transparência, mais contraste e cores forçadas (alto contraste).
   - Nenhuma fonte ou CSS externo. A única coisa de fora são os placares (ESPN),
     descritos na Política de Privacidade. Os escudos ficam no próprio site.
   - Pensado primeiro para o celular: o menu principal fica embaixo da tela.
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* Fundo da página e os três brilhos (verde, azul e amarelo) que ficam atrás de tudo */
  --cor-fundo: #eef2f7;
  --cor-brilho-verde: #cdebd9;
  --cor-brilho-azul: #d3def3;
  --cor-brilho-amarelo: #fbf0c2;

  /* Superfícies: sólida (tabelas, campos) e de vidro (cartões, menus) */
  --cor-superficie: #ffffff;
  --vidro: rgb(255 255 255 / 0.72);
  --vidro-forte: rgb(255 255 255 / 0.88); /* menus que passam por cima do conteúdo */
  --vidro-borda: rgb(255 255 255 / 0.8);
  --cor-borda-suave: #d9e0ea; /* linhas que só separam (decorativas) */

  --cor-texto: #0b1a33;
  --cor-texto-suave: #44536a;
  --cor-primaria: #00843d; /* verde: botões, filtro escolhido, vitória */
  --cor-sobre-primaria: #ffffff;
  --cor-primaria-texto: #006b32; /* verde para texto (mais escuro, para ler bem) */
  --cor-link: #0a47a8; /* azul */
  --cor-borda: #6b7a90; /* bordas de campos e botões (3:1) */
  --cor-foco: #0a47a8;
  --cor-amarelo: #ffd23f;
  --cor-sobre-amarelo: #0b1a33;
  --cor-erro: #b3261e;
  --cor-aviso-fundo: #fff4c7;
  --cor-aviso-borda: #8a6d00;
  --cor-ok-fundo: #e1f3e8;
  --cor-ok-borda: #00843d;
  --cor-ao-vivo: #b80d29;
  --cor-sobre-ao-vivo: #ffffff;
  --cor-vitoria: #00843d;
  --cor-empate: #5b6660;
  --cor-derrota: #c8102e;
  --cor-sobre-resultado: #ffffff;
  --cor-zona-libertadores: #0a47a8;
  --cor-zona-sul-americana: #a87400;
  --cor-zona-acesso: #00843d;
  --cor-zona-rebaixamento: #c8102e;

  /* Faixa decorativa do topo, nas cores da bandeira */
  --cor-bandeira-verde: #009c3b;
  --cor-bandeira-amarela: #ffcc00;
  --cor-bandeira-azul: #002776;

  --altura-menu-inferior: calc(5.5rem + env(safe-area-inset-bottom));
  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --raio: 1.125rem;
  --raio-medio: 0.75rem;
  --raio-pequeno: 0.5rem;
  --desfoque: blur(18px) saturate(1.6);
  --sombra: 0 1px 2px rgb(11 26 51 / 0.06), 0 10px 28px -14px rgb(11 26 51 / 0.22);
  --sombra-forte: 0 18px 44px -16px rgb(11 26 51 / 0.38);
  --tinta-hover: rgb(11 26 51 / 0.05);
}

@media (prefers-color-scheme: dark) {
  :root {
    --cor-fundo: #06101f;
    --cor-brilho-verde: #0c2a22;
    --cor-brilho-azul: #0d2148;
    --cor-brilho-amarelo: #2a2610;

    --cor-superficie: #0f1c34;
    --vidro: rgb(20 36 66 / 0.55);
    --vidro-forte: rgb(10 22 44 / 0.86);
    --vidro-borda: rgb(255 255 255 / 0.09);
    --cor-borda-suave: #22314d;

    --cor-texto: #eef3fb;
    --cor-texto-suave: #a9b6cc;
    --cor-primaria: #2fd27a;
    --cor-sobre-primaria: #04210f;
    --cor-primaria-texto: #5fe39b;
    --cor-link: #8cb8ff;
    --cor-borda: #7d8ca6;
    --cor-foco: #ffd23f;
    --cor-amarelo: #ffd23f;
    --cor-sobre-amarelo: #1a1400;
    --cor-erro: #ff8f87;
    --cor-aviso-fundo: #3a2f05;
    --cor-aviso-borda: #c9a227;
    --cor-ok-fundo: #0f2e1f;
    --cor-ok-borda: #2fd27a;
    --cor-ao-vivo: #ff8585;
    --cor-sobre-ao-vivo: #2a0606;
    --cor-vitoria: #2fd27a;
    --cor-empate: #9aa6b8;
    --cor-derrota: #ff6b6b;
    --cor-sobre-resultado: #06101f;
    --cor-zona-libertadores: #6aa5ff;
    --cor-zona-sul-americana: #ffd23f;
    --cor-zona-acesso: #2fd27a;
    --cor-zona-rebaixamento: #ff6b6b;

    --cor-bandeira-verde: #2fd27a;
    --cor-bandeira-amarela: #ffd23f;
    --cor-bandeira-azul: #4c86ff;

    --sombra: 0 1px 2px rgb(0 0 0 / 0.4), 0 12px 32px -14px rgb(0 0 0 / 0.6);
    --sombra-forte: 0 20px 48px -16px rgb(0 0 0 / 0.75);
    --tinta-hover: rgb(255 255 255 / 0.06);
  }
}

/* No computador o menu fica no topo: não precisa reservar espaço embaixo. */
@media (min-width: 52rem) {
  :root {
    --altura-menu-inferior: 0px;
  }
}

/* Quem pede menos transparência (ou mais contraste) recebe superfícies sólidas. */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  :root {
    --vidro: var(--cor-superficie);
    --vidro-forte: var(--cor-superficie);
    --desfoque: none;
  }
}

@media (prefers-contrast: more) {
  :root {
    --vidro-borda: var(--cor-borda);
    --cor-borda-suave: var(--cor-borda);
  }
}

/* Navegador sem desfoque: o vidro fica quase opaco para o texto continuar legível. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --vidro-forte: var(--cor-superficie);
  }
}

/* --- Base ---------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--cor-fundo);
}

body {
  margin: 0;
  color: var(--cor-texto);
  font-family: var(--fonte);
  font-size: 1.0625rem;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding-bottom: var(--altura-menu-inferior);
  -webkit-font-smoothing: antialiased;
}

/* O fundo: brilhos verde, azul e amarelo, parados enquanto a página rola. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60vmax 50vmax at -5% -10%, var(--cor-brilho-verde), transparent 70%),
    radial-gradient(55vmax 45vmax at 105% 5%, var(--cor-brilho-azul), transparent 70%),
    radial-gradient(60vmax 40vmax at 50% 115%, var(--cor-brilho-amarelo), transparent 70%),
    var(--cor-fundo);
}

main {
  flex: 1;
}

/* "hidden" vale mesmo quando a classe do elemento define display (botões em pílula, por exemplo). */
[hidden] {
  display: none !important;
}

main:focus {
  outline: none; /* recebe foco só via "Pular para o conteúdo" */
}

img,
svg {
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3 {
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 1.6em 0 0.5em;
}

h1 {
  font-size: clamp(1.75rem, 4vw + 1rem, 2.75rem);
  margin-top: 0.5em;
}

h2 {
  font-size: clamp(1.35rem, 2vw + 0.9rem, 1.75rem);
}

h3 {
  font-size: 1.2rem;
}

p,
ul,
ol {
  margin: 0 0 1em;
}

/* Nomes de arquivo e endereços longos quebram a linha em vez de criar
   rolagem horizontal no celular (WCAG 1.4.10, reflow a 320px). */
code,
a {
  overflow-wrap: anywhere;
}

a {
  color: var(--cor-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

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

/* Foco: contorno grosso e afastado do elemento, em todas as páginas.
   O contorno acompanha o arredondamento de cada botão. */
:focus-visible {
  outline: 3px solid var(--cor-foco);
  outline-offset: 3px;
}

.container {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: 1rem;
}

.texto-suave {
  color: var(--cor-texto-suave);
}

/* Esconde só da tela; leitores de tela continuam lendo. */
.visualmente-oculto {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.icone {
  display: inline-block;
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  vertical-align: middle;
}

/* --- Pular para o conteúdo ------------------------------------------------ */

.pular {
  position: absolute;
  left: 1rem;
  top: -10rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--cor-superficie);
  color: var(--cor-texto);
  border: 2px solid var(--cor-foco);
  border-radius: var(--raio-pequeno);
  font-weight: 600;
}

.pular:focus {
  top: 1rem;
}

/* --- Vidro ------------------------------------------------------------------ */
/* Cartões: fundo translúcido, borda clarinha e sombra. O desfoque (caro para o
   celular) fica só no que passa por cima do conteúdo: menus e aviso de cookies. */

.vidro,
.cartao,
.bloco,
.competicao,
.placar-jogo,
.clube-topo,
.sumario,
.documento {
  background: var(--vidro);
  border: 1px solid var(--vidro-borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}

/* --- Topo e menu ---------------------------------------------------------- */
/* Celular: o menu principal flutua EMBAIXO da tela, como nos aplicativos de
   placar (fácil de alcançar com o polegar). Computador (52rem ou mais): no topo,
   preso ao rolar. O espaço que ele ocupa vem de --altura-menu-inferior, usada
   também pelo corpo da página e pelo aviso de cookies para não ficarem escondidos. */

.topo {
  position: relative;
  z-index: 40;
  background: var(--vidro-forte);
  border-bottom: 1px solid var(--cor-borda-suave);
}

/* Faixa verde, amarela e azul no alto da página */
.topo::before {
  content: "";
  display: block;
  height: 4px;
  background: linear-gradient(90deg,
    var(--cor-bandeira-verde) 0 40%, var(--cor-bandeira-amarela) 40% 60%, var(--cor-bandeira-azul) 60% 100%);
}

.topo__linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.5rem;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  color: var(--cor-texto);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.marca img {
  width: 2rem;
  height: 2rem;
  border-radius: 0.55rem;
  box-shadow: 0 4px 12px -4px rgb(0 132 61 / 0.6);
}

.menu {
  position: fixed;
  left: 0.75rem;
  right: 0.75rem;
  bottom: calc(0.5rem + env(safe-area-inset-bottom));
  z-index: 45;
  height: 4.25rem;
  padding: 0.35rem;
  background: var(--vidro-forte);
  -webkit-backdrop-filter: var(--desfoque);
  backdrop-filter: var(--desfoque);
  border: 1px solid var(--vidro-borda);
  border-radius: 1.5rem;
  box-shadow: var(--sombra-forte);
}

.menu__lista {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  height: 100%;
  min-height: 44px;
  border-radius: 1.15rem;
  color: var(--cor-texto-suave);
  font-size: 0.74rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}

.menu__item svg {
  width: 2.9rem;
  height: 1.9rem;
  padding: 0.3rem 0;
  border-radius: 999px;
}

.menu__item:hover {
  color: var(--cor-texto);
}

/* Página atual: cor, negrito e a "pílula" atrás do ícone (não só a cor), além do aria-current. */
.menu__item[aria-current="page"] {
  color: var(--cor-primaria-texto);
  font-weight: 800;
}

.menu__item[aria-current="page"] svg {
  background: color-mix(in srgb, var(--cor-primaria) 18%, transparent);
  stroke-width: 2.4;
}

@media (min-width: 52rem) {
  .topo {
    position: sticky;
    top: 0;
    -webkit-backdrop-filter: var(--desfoque);
    backdrop-filter: var(--desfoque);
  }

  .menu {
    position: static;
    height: auto;
    padding: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 0;
    box-shadow: none;
  }

  .menu__lista {
    display: flex;
    gap: 0.25rem;
  }

  .menu__item {
    flex-direction: row;
    gap: 0.45rem;
    padding: 0.4rem 0.95rem;
    border-radius: 999px;
    font-size: 1rem;
  }

  .menu__item svg {
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
  }

  .menu__item:hover {
    background: var(--tinta-hover);
  }

  .menu__item[aria-current="page"] {
    background: color-mix(in srgb, var(--cor-primaria) 15%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cor-primaria) 35%, transparent);
  }

  .menu__item[aria-current="page"] svg {
    background: none;
  }
}

/* --- Botões ---------------------------------------------------------------- */

.botao,
.botao-secundario {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.65rem 1.35rem;
  border-radius: 999px;
  border: 2px solid var(--cor-primaria);
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.botao {
  background: var(--cor-primaria);
  color: var(--cor-sobre-primaria);
  box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--cor-primaria) 90%, transparent);
}

.botao:hover {
  filter: brightness(1.08);
  box-shadow: 0 12px 26px -10px color-mix(in srgb, var(--cor-primaria) 95%, transparent);
}

.botao-secundario {
  background: var(--vidro);
  color: var(--cor-texto);
  border-color: var(--cor-borda);
}

.botao-secundario:hover {
  background: var(--cor-superficie);
  border-color: var(--cor-texto);
}

.botao:active,
.botao-secundario:active,
.botao-icone:active,
.chip-acao:active {
  transform: scale(0.97);
}

/* Botão redondo só com ícone (o nome vem do aria-label) */
.botao-icone {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1.5px solid var(--cor-borda);
  border-radius: 999px;
  background: var(--vidro);
  color: var(--cor-texto);
  font: inherit;
  cursor: pointer;
  box-shadow: var(--sombra);
}

.botao-icone:hover {
  background: var(--cor-superficie);
  border-color: var(--cor-texto);
}

/* Botão pequeno em forma de pílula, com ícone e texto (Ir para hoje) */
.chip-acao,
.botao-texto {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
  padding: 0.3rem 0.8rem;
  border: 1.5px solid var(--cor-borda);
  border-radius: 999px;
  background: var(--vidro);
  color: var(--cor-texto);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}

.chip-acao:hover,
.botao-texto:hover {
  background: var(--cor-superficie);
  border-color: var(--cor-texto);
}

.chip-acao .icone {
  width: 1.1rem;
  height: 1.1rem;
}

.link-botao {
  padding: 0;
  border: 0;
  background: none;
  color: var(--cor-link);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  cursor: pointer;
}

/* Link em forma de pílula ("Tabela ›" no topo de cada campeonato) */
.link-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  min-height: 44px;
  padding: 0 0.4rem 0 0.75rem;
  border-radius: 999px;
  color: var(--cor-link);
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
}

.link-chip:hover {
  background: var(--tinta-hover);
  text-decoration: underline;
}

.link-chip .icone {
  width: 1.1rem;
  height: 1.1rem;
}

/* "‹ Voltar": volta para a página anterior (ou para os jogos, se o link foi aberto direto) */
.voltar {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
  margin-bottom: 0.75rem;
  padding: 0.3rem 1rem 0.3rem 0.6rem;
  border: 1.5px solid var(--cor-borda);
  border-radius: 999px;
  background: var(--vidro);
  color: var(--cor-texto);
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--sombra);
}

.voltar:hover {
  background: var(--cor-superficie);
  border-color: var(--cor-texto);
}

.acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-block: 1.5rem;
}

figure {
  margin: 0;
}

figcaption {
  margin-top: 0.5rem;
  font-size: 0.95rem;
  color: var(--cor-texto-suave);
}

.lista-check {
  padding-left: 0;
  list-style: none;
}

.lista-check li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 0.5rem;
}

.lista-check li::before {
  content: "✓";
  position: absolute;
  left: 0;
  font-weight: 700;
  color: var(--cor-primaria-texto);
}

.lista-x li::before {
  content: "✗";
  color: var(--cor-erro);
}

/* --- Avisos ---------------------------------------------------------------- */

.aviso,
.aviso-ok {
  padding: 1rem 1.25rem;
  border-left: 6px solid var(--cor-aviso-borda);
  border-radius: var(--raio-medio);
  background: var(--cor-aviso-fundo);
  margin-block: 1.5rem;
}

.aviso-ok {
  border-left-color: var(--cor-ok-borda);
  background: var(--cor-ok-fundo);
}

.aviso > :last-child,
.aviso-ok > :last-child {
  margin-bottom: 0;
}

/* Só o título da caixa (o <strong> filho direto) vira bloco; negrito no meio do texto não. */
.aviso > strong:first-child,
.aviso-ok > strong:first-child {
  display: block;
  margin-bottom: 0.25rem;
}

/* --- Documentos (políticas, termos) ----------------------------------------- */

/* O texto fica num cartão de vidro, com folga das bordas da tela no celular.
   (width: auto em vez do 100% do .container: senão a margem empurraria o cartão para fora.) */
.documento {
  width: auto;
  max-width: 48rem;
  margin: 1.25rem 0.75rem 2rem;
  padding: 1.25rem 1.1rem 2rem;
}

@media (min-width: 40rem) {
  .documento {
    padding-inline: 2rem;
  }
}

@media (min-width: 50rem) {
  .documento {
    margin-inline: auto;
  }
}

.documento h2 {
  padding-top: 0.75rem;
  border-top: 1px solid var(--cor-borda-suave);
}

.atualizacao {
  color: var(--cor-texto-suave);
}

.sumario {
  padding: 1rem 1.25rem;
}

.sumario h2 {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  font-size: 1.1rem;
}

.sumario ol {
  margin-bottom: 0;
}

/* position: relative faz os textos escondidos (.visualmente-oculto, que são
   absolutos) ficarem DENTRO da caixa que rola. Sem isso, eles escapam e
   alargam a página inteira no celular. */
.tabela-rolagem {
  position: relative;
  overflow-x: auto;
  margin-block: 1rem 1.5rem;
  border-radius: var(--raio-medio);
}

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--cor-superficie);
  font-size: 0.97rem;
}

caption {
  text-align: left;
  font-weight: 600;
  padding-bottom: 0.5rem;
}

th,
td {
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--cor-borda);
  text-align: left;
  vertical-align: top;
}

th {
  background: var(--cor-fundo);
}

/* --- Formulários ------------------------------------------------------------ */

.formulario {
  max-width: 40rem;
}

.campo {
  margin-bottom: 1.25rem;
}

label,
legend {
  display: block;
  font-weight: 600;
  margin-bottom: 0.3rem;
}

.dica {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--cor-texto-suave);
  font-size: 0.95rem;
  font-weight: 400;
}

.obrigatorio {
  color: var(--cor-erro);
}

input[type="text"],
input[type="search"],
input[type="email"],
input[type="file"],
textarea,
select {
  width: 100%;
  min-height: 44px;
  padding: 0.55rem 0.85rem;
  border: 2px solid var(--cor-borda);
  border-radius: var(--raio-medio);
  background: var(--cor-superficie);
  color: var(--cor-texto);
  font: inherit;
}

textarea {
  min-height: 8rem;
  resize: vertical;
}

fieldset {
  margin: 0 0 1.25rem;
  padding: 1rem 1.25rem;
  border: 2px solid var(--cor-borda-suave);
  border-radius: var(--raio-medio);
}

legend {
  padding-inline: 0.25rem;
}

.opcao {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
  font-weight: 400;
}

.opcao:last-child {
  margin-bottom: 0;
}

.opcao input {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.2rem;
  accent-color: var(--cor-primaria);
}

[aria-invalid="true"] {
  border-color: var(--cor-erro) !important;
}

fieldset.com-erro {
  border-color: var(--cor-erro);
}

.erro-campo {
  display: block;
  margin-top: 0.35rem;
  color: var(--cor-erro);
  font-weight: 600;
}

.erro-campo::before {
  content: "⚠ ";
}

.resumo-erros {
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  border: 3px solid var(--cor-erro);
  border-radius: var(--raio-medio);
  background: var(--cor-superficie);
}

.resumo-erros h2 {
  margin-top: 0;
  font-size: 1.15rem;
}

.resumo-erros ul {
  margin-bottom: 0;
}

.resumo-erros a {
  color: var(--cor-erro);
  font-weight: 600;
}

.mensagem-copia {
  width: 100%;
  min-height: 12rem;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.9rem;
}

/* --- Páginas do placar (Jogos, Jogo, Clube, Tabela, Artilharia, Mais) ------- */

.pagina {
  padding-block: 1rem 2rem;
}

.pagina__titulo {
  margin: 0.5rem 0 1rem;
  font-size: clamp(1.6rem, 3vw + 1rem, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.025em;
}

.bloco {
  margin-bottom: 1rem;
  padding: 1rem;
}

.bloco > h2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
  font-size: 1.1rem;
}

/* Tracinho amarelo antes do título de cada bloco */
.bloco > h2::before,
.competicao__titulo::before {
  content: "";
  flex: none;
  width: 0.3rem;
  height: 1.1em;
  border-radius: 999px;
  background: var(--cor-amarelo);
}

.vazio {
  margin: 0;
  padding: 1rem 0.75rem;
  color: var(--cor-texto-suave);
}

.fonte-dados {
  margin-top: 1rem;
  color: var(--cor-texto-suave);
  font-size: 0.85rem;
}

/* Faixa de dias: ‹ Ter 3 · Qua 4 · Hoje 5 · Sex 6 · Sáb 7 › */
.dias {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.25rem 0 0.75rem;
}

.dias__lista {
  display: flex;
  flex: 1;
  justify-content: space-between;
  gap: 0.3rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dias__lista li {
  flex: 1;
  min-width: 0;
}

/* Telas estreitas mostram 5 dias; as maiores, 7. */
@media (max-width: 27.99rem) {
  .dias__lista li:first-child,
  .dias__lista li:last-child {
    display: none;
  }
}

.dia {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 3.6rem;
  padding: 0.3rem 0.1rem;
  border: 1px solid var(--vidro-borda);
  border-radius: var(--raio-medio);
  background: var(--vidro);
  color: var(--cor-texto);
  line-height: 1.15;
  text-decoration: none;
}

.dia:hover {
  background: var(--cor-superficie);
}

.dia__semana {
  color: var(--cor-texto-suave);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.dia__numero {
  font-size: 1.2rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* Hoje (quando não está escolhido): um tracinho amarelo embaixo do número. */
.dia--hoje .dia__numero {
  box-shadow: inset 0 -0.2em 0 var(--cor-amarelo);
}

/* Dia escolhido: verde cheio (cor + preenchimento + aria-current). */
.dia[aria-current="date"] {
  background: var(--cor-primaria);
  border-color: var(--cor-primaria);
  color: var(--cor-sobre-primaria);
  box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--cor-primaria) 90%, transparent);
}

.dia[aria-current="date"] .dia__semana {
  color: var(--cor-sobre-primaria);
}

.dia[aria-current="date"] .dia__numero {
  box-shadow: none;
}

.titulo-dia {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  font-weight: 800;
}

/* Filtros em "chips": são botões de rádio de verdade (teclado e leitor de tela
   funcionam sozinhos). O círculo do rádio fica escondido; o chip é o rótulo. */
.filtros {
  display: flex;
  gap: 0.5rem;
  /* Sem isto, o fieldset nunca fica mais estreito que os chips somados e
     empurra a página inteira para os lados no celular (o menu sumia da tela). */
  min-width: 0;
  margin: 0 0 0.5rem;
  padding: 0.25rem 0.1rem 0.5rem;
  border: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.filtro {
  position: relative;
  flex: none;
  margin: 0;
  font-weight: 700;
}

.filtro input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* ">": só o chip em si, não os pedacinhos dentro dele (ponto do ao vivo, contador). */
.filtro > span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
  padding: 0.4rem 0.65rem;
  border: 1.5px solid var(--cor-borda);
  border-radius: 999px;
  background: var(--vidro);
  color: var(--cor-texto);
  font-size: 0.875rem;
  cursor: pointer;
}

/* Telas maiores: chips mais folgados (no celular eles precisam caber os quatro). */
@media (min-width: 26rem) {
  .filtro > span {
    padding-inline: 0.95rem;
    font-size: 0.92rem;
  }
}

.filtro > span:hover {
  background: var(--cor-superficie);
}

.filtro input:checked + span {
  border-color: var(--cor-primaria);
  background: var(--cor-primaria);
  color: var(--cor-sobre-primaria);
  box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--cor-primaria) 90%, transparent);
}

.filtro input:focus-visible + span {
  outline: 3px solid var(--cor-foco);
  outline-offset: 3px;
}

/* Contador "Ao vivo (3)" */
.contador {
  min-width: 1.4rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: var(--cor-ao-vivo);
  color: var(--cor-sobre-ao-vivo);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.4rem;
  text-align: center;
}

.contador:empty {
  display: none;
}

.barra-atualizacao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin: 0 0 0.9rem;
  color: var(--cor-texto-suave);
  font-size: 0.9rem;
}

.barra-atualizacao__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Um campeonato com a sua lista de jogos */
.competicao {
  margin-bottom: 1rem;
  overflow: hidden;
}

.competicao__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.3rem 0.5rem 0.3rem 1rem;
  border-bottom: 1px solid var(--cor-borda-suave);
}

.competicao__titulo {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
}

.jogos {
  margin: 0;
  padding: 0;
  list-style: none;
}

.jogos > li + li {
  border-top: 1px solid var(--cor-borda-suave);
}

.jogo-linha {
  position: relative;
}

.jogo-linha__link {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  min-height: 4.25rem;
  padding: 0.65rem 0.75rem 0.65rem 0.6rem;
  color: var(--cor-texto);
  text-decoration: none;
}

.jogo-linha__link:hover {
  background: var(--tinta-hover);
}

.jogo-linha__link:focus-visible {
  outline-offset: -3px;
}

/* Jogo rolando: faixa vermelha à esquerda (além do minuto e do texto "ao vivo"). */
.jogo-linha[data-situacao="ao-vivo"]::before,
.jogo-linha[data-situacao="intervalo"]::before {
  content: "";
  position: absolute;
  inset: 0.5rem auto 0.5rem 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--cor-ao-vivo);
}

.jogo-linha__status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  color: var(--cor-texto-suave);
  font-size: 0.85rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
  text-align: center;
}

.jogo-linha[data-situacao="ao-vivo"] .jogo-linha__status,
.jogo-linha[data-situacao="intervalo"] .jogo-linha__status {
  color: var(--cor-ao-vivo);
}

.jogo-linha__data {
  display: block;
  color: var(--cor-texto-suave);
  font-size: 0.75rem;
  font-weight: 600;
}

.jogo-linha__times {
  display: grid;
  gap: 0.45rem;
  min-width: 0;
}

.jogo-linha__fim {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--cor-texto-suave);
}

.jogo-linha__fim .icone {
  width: 1.1rem;
  height: 1.1rem;
}

.time {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
}

.time__nome {
  overflow: hidden;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.time__gols {
  min-width: 1.5ch;
  font-size: 1.1rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Quem perdeu fica mais apagado — o placar continua dizendo o resultado. */
.time--perdeu .time__nome,
.time--perdeu .time__gols {
  color: var(--cor-texto-suave);
  font-weight: 500;
}

/* O time da página do clube aparece em destaque na lista de jogos dele. */
.time--destaque .time__nome {
  font-weight: 800;
}

.ponto-ao-vivo {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
}

.selo-ao-vivo,
.selo-situacao {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.7rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 800;
}

.selo-ao-vivo {
  background: var(--cor-ao-vivo);
  color: var(--cor-sobre-ao-vivo);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.selo-situacao {
  border: 1.5px solid var(--cor-borda);
  color: var(--cor-texto);
}

/* Quadradinho V / E / D (resultado de um jogo) */
.resultado {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.4rem;
  color: var(--cor-sobre-resultado);
  font-size: 0.75rem;
  font-weight: 800;
}

.resultado--V {
  background: var(--cor-vitoria);
}

.resultado--E {
  background: var(--cor-empate);
}

.resultado--D {
  background: var(--cor-derrota);
}

/* Escudo (imagem guardada no site) e distintivo (cores + sigla, quando não há escudo) */
.escudo {
  display: block;
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  object-fit: contain;
}

picture.escudo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* No escuro, um brilho bem fraquinho em volta: escudos pretos não somem no fundo. */
@media (prefers-color-scheme: dark) {
  .escudo {
    filter: drop-shadow(0 0 1px rgb(255 255 255 / 0.22));
  }
}

.distintivo {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid;
  border-radius: 50%;
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}

.escudo--grande {
  width: 4rem;
  height: 4rem;
}

.escudo--enorme {
  width: 5.5rem;
  height: 5.5rem;
}

.distintivo.escudo--grande,
.distintivo.escudo--enorme {
  font-size: 1rem;
  border-width: 3px;
}

/* --- Página do jogo ---------------------------------------------------------- */

/* O placar ganha um leve degradê com as cores dos dois clubes. */
.placar-jogo {
  position: relative;
  margin-bottom: 1rem;
  padding: 1.1rem 0.75rem 1.25rem;
  overflow: hidden;
  text-align: center;
  isolation: isolate;
}

.placar-jogo::before,
.clube-topo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg,
    color-mix(in srgb, var(--cor-casa, transparent) 16%, transparent),
    transparent 42%, transparent 58%,
    color-mix(in srgb, var(--cor-fora, transparent) 16%, transparent));
}

.placar-jogo__info {
  margin: 0 0 0.9rem;
  color: var(--cor-texto-suave);
  font-size: 0.88rem;
  font-weight: 600;
}

.placar-jogo__linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start;
  gap: 0.5rem;
}

.placar-jogo__time {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0.4rem 0.25rem;
  border-radius: var(--raio-medio);
  color: var(--cor-texto);
  font-weight: 800;
  line-height: 1.25;
  overflow-wrap: anywhere;
  text-decoration: none;
}

a.placar-jogo__time:hover {
  background: var(--tinta-hover);
  text-decoration: underline;
}

.placar-jogo__gols {
  align-self: center;
  padding-top: 0.25rem;
  font-size: clamp(2.25rem, 8vw, 3rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.placar-jogo__status {
  margin: 0.85rem 0 0;
}

.placar-jogo[data-situacao="ao-vivo"] .selo-situacao,
.placar-jogo[data-situacao="intervalo"] .selo-situacao {
  border-color: var(--cor-ao-vivo);
  background: var(--cor-ao-vivo);
  color: var(--cor-sobre-ao-vivo);
}

.lances {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lance {
  display: grid;
  grid-template-columns: 3.25rem 1.5rem minmax(0, 1fr);
  align-items: start;
  gap: 0.5rem;
  padding: 0.55rem 0;
}

.lance + .lance {
  border-top: 1px solid var(--cor-borda-suave);
}

.lance__minuto {
  justify-self: start;
  padding: 0 0.45rem;
  border-radius: 999px;
  background: var(--tinta-hover);
  color: var(--cor-texto-suave);
  font-size: 0.9rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.lance__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.1rem;
  font-size: 1rem;
  line-height: 1;
}

.lance__icone--amarelo,
.lance__icone--vermelho {
  width: 0.9rem;
  height: 1.2rem;
  border-radius: 2px;
}

.lance__icone--amarelo {
  background: #f2c230;
}

.lance__icone--vermelho {
  background: #d50000;
}

.lance--gol {
  font-weight: 700;
}

.lance__detalhe {
  display: block;
  color: var(--cor-texto-suave);
  font-size: 0.9rem;
  font-weight: 400;
}

/* Estatísticas: números dos dois lados e uma barra comparando. */
table.estatisticas {
  background: none;
  font-variant-numeric: tabular-nums;
}

table.estatisticas th,
table.estatisticas td {
  padding: 0.55rem 0.25rem;
  border: 0;
  border-bottom: 1px solid var(--cor-borda-suave);
  background: none;
  text-align: center;
  vertical-align: middle;
}

table.estatisticas tbody tr:last-child > * {
  border-bottom: 0;
}

table.estatisticas td {
  width: 3.5rem;
  font-weight: 800;
}

table.estatisticas td:first-child {
  text-align: left;
}

table.estatisticas td:last-child {
  text-align: right;
}

table.estatisticas th {
  color: var(--cor-texto-suave);
  font-size: 0.9rem;
  font-weight: 600;
}

table.estatisticas thead th {
  font-weight: 800;
}

.comparacao {
  display: flex;
  gap: 0.25rem;
  height: 0.4rem;
  margin-top: 0.35rem;
}

.comparacao span {
  border-radius: 999px;
}

.comparacao__casa {
  background: var(--cor-primaria);
}

.comparacao__fora {
  background: var(--cor-link);
}

.escalacoes {
  display: grid;
  gap: 1rem;
}

@media (min-width: 40rem) {
  .escalacoes {
    grid-template-columns: 1fr 1fr;
  }
}

.escalacao h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.25rem;
  font-size: 1rem;
}

.escalacao h4 {
  margin: 0.75rem 0 0.25rem;
  color: var(--cor-texto-suave);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.escalacao ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.escalacao li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  gap: 0.5rem;
  padding: 0.25rem 0;
}

.camisa {
  color: var(--cor-texto-suave);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* --- Tabela de classificação --------------------------------------------------- */
/* A 1ª coluna (posição e clube) fica parada ao rolar para o lado. */

.tabela-cartao {
  padding: 0.25rem;
}

.tabela-cartao .tabela-rolagem {
  margin: 0;
}

table.classificacao {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}

table.classificacao th,
table.classificacao td {
  padding: 0.55rem 0.5rem;
  border: 0;
  border-bottom: 1px solid var(--cor-borda-suave);
  background: var(--cor-superficie);
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}

table.classificacao tbody tr:last-child > * {
  border-bottom: 0;
}

table.classificacao tbody tr:hover > * {
  background: color-mix(in srgb, var(--cor-superficie) 92%, var(--cor-texto));
}

table.classificacao thead th {
  color: var(--cor-texto-suave);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}

table.classificacao .col-pontos {
  font-weight: 800;
}

table.classificacao .col-clube {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 11rem;
  text-align: left;
}

.clube-celula {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.clube-celula a {
  color: var(--cor-texto);
  font-weight: 700;
  text-decoration: none;
}

.clube-celula a:hover {
  text-decoration: underline;
}

.posicao-numero {
  display: inline-block;
  min-width: 1.5rem;
  font-weight: 800;
  text-align: right;
}

.zona--libertadores .col-clube {
  box-shadow: inset 4px 0 0 var(--cor-zona-libertadores);
}

.zona--sul-americana .col-clube {
  box-shadow: inset 4px 0 0 var(--cor-zona-sul-americana);
}

.zona--acesso .col-clube {
  box-shadow: inset 4px 0 0 var(--cor-zona-acesso);
}

.zona--rebaixamento .col-clube {
  box-shadow: inset 4px 0 0 var(--cor-zona-rebaixamento);
}

/* A linha do clube da página (na tabela resumida do jogo e do clube) */
.linha-destaque > * {
  font-weight: 800;
}

.linha-destaque > .col-clube {
  background: color-mix(in srgb, var(--cor-superficie) 88%, var(--cor-amarelo));
}

/* Tabela resumida: no celular, sem o saldo e só os 3 últimos jogos, para caber no cartão. */
.tabela-resumida .col-clube {
  min-width: 0;
}

@media (max-width: 29.99rem) {
  table.tabela-resumida {
    font-size: 0.9rem;
  }

  table.tabela-resumida th,
  table.tabela-resumida td {
    padding-inline: 0.3rem;
  }

  .tabela-resumida .ultimos .resultado {
    width: 1.3rem;
    height: 1.3rem;
  }

  .tabela-resumida .posicao-numero {
    min-width: 0;
  }

  .tabela-resumida .clube-celula {
    gap: 0.35rem;
  }

  .tabela-resumida .col-saldo,
  .tabela-resumida .ultimos .resultado:nth-last-child(n + 4) {
    display: none;
  }
}

.ultimos {
  display: inline-flex;
  gap: 0.2rem;
}

.ultimos .resultado {
  width: 1.4rem;
  height: 1.4rem;
}

.legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin: 0.75rem 0 0;
  padding: 0;
  color: var(--cor-texto-suave);
  font-size: 0.9rem;
  list-style: none;
}

.legenda li::before {
  content: "";
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  margin-right: 0.4rem;
  border-radius: 3px;
  background: var(--cor-legenda);
  vertical-align: -0.1em;
}

/* --- Artilharia ------------------------------------------------------------------ */

.ranking {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ranking li {
  display: grid;
  grid-template-columns: 2rem 1.75rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.85rem;
}

.ranking li + li {
  border-top: 1px solid var(--cor-borda-suave);
}

.ranking .escudo,
.ranking .distintivo {
  width: 1.75rem;
  height: 1.75rem;
}

.ranking__posicao {
  justify-self: center;
  min-width: 1.75rem;
  color: var(--cor-texto-suave);
  font-weight: 800;
  text-align: center;
}

/* Os três primeiros ganham um círculo (o 1º, amarelo). */
.ranking li:nth-child(-n + 3) .ranking__posicao {
  border-radius: 999px;
  background: var(--tinta-hover);
  color: var(--cor-texto);
  line-height: 1.75rem;
}

.ranking li:first-child .ranking__posicao {
  background: var(--cor-amarelo);
  color: var(--cor-sobre-amarelo);
}

.ranking__nome {
  min-width: 0;
  font-weight: 800;
}

.ranking__clube {
  display: block;
  color: var(--cor-texto-suave);
  font-size: 0.85rem;
  font-weight: 500;
}

.ranking__clube a {
  color: inherit;
}

.ranking__total {
  font-size: 1.25rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.ranking__total small {
  display: block;
  color: var(--cor-texto-suave);
  font-size: 0.75rem;
  font-weight: 500;
}

/* --- Página do clube -------------------------------------------------------------- */

.clube-topo {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 1.25rem;
  overflow: hidden;
  isolation: isolate;
}

/* Aqui o degradê usa as duas cores do próprio clube. */
.clube-topo::before {
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--cor-casa, transparent) 22%, transparent), transparent 60%),
    radial-gradient(90% 120% at 100% 100%, color-mix(in srgb, var(--cor-fora, transparent) 14%, transparent), transparent 60%);
}

.clube-topo__nome {
  margin: 0 0 0.4rem;
  font-size: clamp(1.6rem, 5vw + 0.5rem, 2.4rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.7rem;
  border: 1.5px solid var(--cor-borda);
  border-radius: 999px;
  color: var(--cor-texto);
  font-size: 0.85rem;
  font-weight: 700;
}

/* Etiqueta da zona (Libertadores, rebaixamento...): bolinha com a cor da zona + o nome escrito. */
.etiqueta--zona::before {
  content: "";
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: var(--cor-legenda);
}

/* Números da campanha em quadradinhos */
.numeros {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  margin: 0 0 1rem;
}

@media (min-width: 36rem) {
  .numeros {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.numero {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--vidro-borda);
  border-radius: var(--raio-medio);
  background: var(--vidro);
  box-shadow: var(--sombra);
}

.numero dt {
  color: var(--cor-texto-suave);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.numero dd {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.numero small {
  display: block;
  color: var(--cor-texto-suave);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0;
}

.duas-colunas {
  display: grid;
  gap: 0 1rem;
}

@media (min-width: 56rem) {
  .duas-colunas {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.bloco .jogos {
  margin-inline: -1rem;
}

.bloco > .jogos:last-child {
  margin-bottom: -1rem;
}

/* --- Escalação em campo 3D (página do jogo) ------------------------------------------- */
/* O gramado é inclinado com rotateX dentro de uma "perspectiva"; cada jogador recebe
   a rotação contrária, então fica em pé, como um pino de mesa de botão. */

/* O pé do campo fica parado e o fundo se afasta (transform-origin embaixo):
   assim o desenho nunca fica mais largo que a tela. */
.campo-3d {
  --inclinacao: 34deg;
  margin: 0.25rem 0 1.25rem;
  perspective: 1000px;
  perspective-origin: 50% 40%;
}

.campo-3d figcaption {
  margin-top: 0.5rem;
  text-align: center;
}

.campo-3d__gramado {
  position: relative;
  width: min(100%, 24rem);
  aspect-ratio: 68 / 105;
  margin: -22% auto 0;
  border: 2px solid rgb(255 255 255 / 0.85);
  border-radius: 0.5rem;
  background:
    linear-gradient(rgb(255 255 255 / 0.85), rgb(255 255 255 / 0.85)) 50% 50% / 100% 2px no-repeat,
    repeating-linear-gradient(180deg, #2f8a4c 0 6.25%, #297c43 6.25% 12.5%);
  box-shadow: 0 28px 36px -18px rgb(0 0 0 / 0.55);
  transform: rotateX(var(--inclinacao));
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
}

.campo-3d__circulo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26%;
  aspect-ratio: 1;
  border: 2px solid rgb(255 255 255 / 0.85);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.campo-3d__area {
  position: absolute;
  left: 22%;
  width: 56%;
  height: 15%;
  border: 2px solid rgb(255 255 255 / 0.85);
}

.campo-3d__area--cima {
  top: -2px;
  border-top: 0;
}

.campo-3d__area--baixo {
  bottom: -2px;
  border-bottom: 0;
}

.jogador-3d {
  position: absolute;
  left: calc(var(--x) * 100%);
  top: calc(var(--y) * 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  transform: translate(-50%, -100%) rotateX(calc(-1 * var(--inclinacao)));
  transform-origin: 50% 100%;
}

.jogador-3d__numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: var(--cor);
  color: var(--cor-numero);
  font-size: 0.72rem;
  font-weight: 900;
  box-shadow: 0 3px 6px rgb(0 0 0 / 0.45);
}

.jogador-3d__nome {
  max-width: 4.6rem;
  overflow: hidden;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: rgb(0 0 0 / 0.72);
  color: #ffffff;
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Alto contraste do sistema: sem 3D, só o desenho chapado com bordas. */
@media (forced-colors: active) {
  .campo-3d__gramado,
  .jogador-3d {
    transform: none;
  }

  .campo-3d__gramado {
    margin-top: 0;
  }

  .jogador-3d {
    transform: translate(-50%, -100%);
  }
}

/* --- Notícias ---------------------------------------------------------------------------- */

.noticias {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 52rem) {
  .noticias {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Cartão: fonte e título à esquerda, foto à direita, resumo embaixo de tudo.
   O link do título cobre o cartão inteiro (::after), então tocar na foto também abre. */
.noticia {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 6.75rem;
  grid-template-areas:
    "meta foto"
    "titulo foto"
    "resumo resumo";
  grid-template-rows: auto 1fr auto;
  column-gap: 0.85rem;
  height: 100%;
  padding: 0.9rem 0.9rem 1rem 1rem;
  border: 1px solid var(--vidro-borda);
  border-radius: var(--raio);
  background: var(--vidro);
  box-shadow: var(--sombra);
}

.noticia:hover {
  border-color: var(--cor-borda);
}

/* Com mais espaço, o resumo também fica ao lado da foto. */
@media (min-width: 30rem) {
  .noticia {
    grid-template-columns: minmax(0, 1fr) 8.5rem;
    grid-template-areas:
      "meta foto"
      "titulo foto"
      "resumo foto";
    grid-template-rows: auto auto 1fr;
  }
}

.noticia__meta {
  grid-area: meta;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.6rem;
  margin: 0 0 0.35rem;
  color: var(--cor-texto-suave);
  font-size: 0.85rem;
}

.noticia__foto {
  grid-area: foto;
  position: relative;
  align-self: start;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: calc(var(--raio) - 0.35rem);
  background: linear-gradient(135deg, #00843d, #0a47a8);
}

.noticia__foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Sem foto: o ícone de jornal no meio do quadro verde e azul. */
.noticia__foto-icone {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.25rem;
  height: 2.25rem;
  color: #ffffff;
  opacity: 0.9;
  transform: translate(-50%, -50%);
}

.noticia__fonte {
  padding: 0 0.6rem;
  border-radius: 999px;
  background: var(--cor-amarelo);
  color: var(--cor-sobre-amarelo);
  font-weight: 800;
}

.noticia__titulo {
  grid-area: titulo;
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.35;
}

.noticia__titulo a {
  color: var(--cor-texto);
  text-decoration: none;
}

.noticia__titulo a::after {
  content: "";
  position: absolute;
  z-index: 1; /* por cima da foto, para o toque nela também abrir a notícia */
  inset: 0;
  border-radius: var(--raio);
}

.noticia__titulo a:hover {
  color: var(--cor-link);
  text-decoration: underline;
}

/* O contorno de foco fica em volta do cartão inteiro, que é o que abre. */
.noticia__titulo a:focus-visible {
  outline: none;
}

.noticia__titulo a:focus-visible::after {
  outline: 3px solid var(--cor-foco);
  outline-offset: 3px;
}

.noticia__resumo {
  grid-area: resumo;
  margin: 0.6rem 0 0;
  color: var(--cor-texto-suave);
  font-size: 0.93rem;
}

/* --- Estatísticas: abas, busca e rankings -------------------------------------------- */

/* Abas em "pílula": são links; a atual tem aria-current e fica preenchida. */
.abas {
  display: flex;
  gap: 0.35rem;
  margin: 0 0 0.75rem;
  padding: 0.3rem;
  overflow-x: auto;
  border: 1px solid var(--vidro-borda);
  border-radius: 999px;
  background: var(--vidro);
  box-shadow: var(--sombra);
  scrollbar-width: none;
}

.aba {
  display: inline-flex;
  flex: 1 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.3rem 0.55rem;
  border-radius: 999px;
  color: var(--cor-texto);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

@media (min-width: 30rem) {
  .aba {
    padding-inline: 0.9rem;
    font-size: 0.92rem;
  }
}

.aba:hover {
  background: var(--tinta-hover);
}

.aba[aria-current="page"] {
  background: var(--cor-primaria);
  color: var(--cor-sobre-primaria);
  box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--cor-primaria) 90%, transparent);
}

.nota-serie,
.contagem {
  margin: 0 0 0.75rem;
  color: var(--cor-texto-suave);
  font-size: 0.9rem;
}

/* Busca e escolhas da aba Jogadores (e Times) */
.controles {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  padding: 0.9rem;
}

@media (min-width: 40rem) {
  .controles {
    grid-template-columns: 2fr 1fr 1fr;
    align-items: end;
  }

  .controles:has(> :only-child) {
    grid-template-columns: minmax(0, 20rem);
  }
}

.campo-pequeno label {
  margin-bottom: 0.25rem;
  font-size: 0.9rem;
}

.ranking__jogador {
  color: var(--cor-texto);
  text-decoration: none;
}

.ranking__jogador:hover {
  text-decoration: underline;
}

/* "3º em gols, de 98 atacantes" */
.lista-rankings {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lista-rankings li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.lista-rankings__posicao {
  flex: none;
  min-width: 3rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--cor-amarelo);
  color: var(--cor-sobre-amarelo);
  font-weight: 900;
  text-align: center;
}

.etiqueta--link {
  color: var(--cor-link);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

table.tabela-numeros td {
  width: auto;
  text-align: right;
}

table.tabela-numeros th[scope="row"] {
  text-align: left;
}

/* --- Página Mais ------------------------------------------------------------------ */

.lista-links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lista-links li + li {
  border-top: 1px solid var(--cor-borda-suave);
}

.lista-links a {
  display: flex;
  flex-direction: column;
  min-height: 44px;
  padding: 0.75rem 2.5rem 0.75rem 1rem;
  position: relative;
  color: var(--cor-texto);
  text-decoration: none;
  font-weight: 700;
}

/* Setinha › no fim de cada item */
.lista-links a::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1.1rem;
  width: 0.5rem;
  height: 0.5rem;
  border-top: 2px solid var(--cor-texto-suave);
  border-right: 2px solid var(--cor-texto-suave);
  transform: translateY(-50%) rotate(45deg);
}

.lista-links a:hover {
  background: var(--tinta-hover);
}

.lista-links small {
  color: var(--cor-texto-suave);
  font-size: 0.9rem;
  font-weight: 400;
}

/* Preferência com interruptor (Mais > Preferências) */
.preferencia {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.25rem 1rem;
  padding: 0.75rem 1rem;
}

.preferencia__rotulo {
  font-weight: 700;
  cursor: pointer;
}

.preferencia__dica {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--cor-texto-suave);
  font-size: 0.9rem;
}

/* Caixa de seleção com cara de interruptor; o leitor de tela ouve "interruptor, ligado". */
.interruptor {
  appearance: none;
  position: relative;
  width: 3.25rem;
  height: 2rem;
  margin: 0;
  border: 2px solid var(--cor-borda);
  border-radius: 999px;
  background: var(--vidro-forte);
  cursor: pointer;
}

.interruptor::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.2rem;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  background: var(--cor-texto-suave);
  transform: translateY(-50%);
}

.interruptor:checked {
  border-color: var(--cor-primaria);
  background: var(--cor-primaria);
}

.interruptor:checked::before {
  left: auto;
  right: 0.2rem;
  background: var(--cor-sobre-primaria);
}

@media (forced-colors: active) {
  .interruptor {
    appearance: auto;
    width: 1.5rem;
    height: 1.5rem;
  }

  .interruptor::before {
    content: none;
  }
}

.aviso__titulo {
  margin-top: 0;
  font-size: 1.15rem;
}

/* --- Aviso de cookies --------------------------------------------------------- */

.cookies {
  position: fixed;
  left: 0.75rem;
  right: 0.75rem;
  bottom: calc(var(--altura-menu-inferior) + 0.25rem); /* logo acima do menu inferior, no celular */
  z-index: 50;
  max-width: 52rem;
  max-height: 70vh;
  margin-inline: auto;
  overflow-y: auto;
  background: var(--vidro-forte);
  -webkit-backdrop-filter: var(--desfoque);
  backdrop-filter: var(--desfoque);
  border: 1px solid var(--vidro-borda);
  border-top: 4px solid var(--cor-primaria);
  border-radius: var(--raio);
  box-shadow: var(--sombra-forte);
}

@media (min-width: 52rem) {
  .cookies {
    bottom: 1rem;
  }
}

.cookies__caixa {
  padding-block: 1rem;
}

.cookies__titulo {
  margin: 0 0 0.25rem;
  font-size: 1.1rem;
}

.cookies__titulo:focus {
  outline: none;
}

.cookies p {
  max-width: 52rem;
  margin-bottom: 0.75rem;
}

.cookies .acoes {
  margin-block: 0.5rem 0;
}

/* --- Rodapé ------------------------------------------------------------------- */

.rodape {
  margin-top: 2rem;
  padding-block: 1.5rem 2rem;
  border-top: 1px solid var(--cor-borda-suave);
  font-size: 0.95rem;
}

.rodape__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.rodape__links a,
.rodape__links .link-botao {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.rodape p {
  margin-bottom: 0.4rem;
  color: var(--cor-texto-suave);
}

@media print {
  .topo,
  .menu,
  .rodape,
  .cookies,
  .pular,
  .nao-imprimir {
    display: none !important;
  }

  body::before {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
    padding: 0;
  }

  .documento {
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: none;
  }

  .documento h2 {
    break-after: avoid;
  }

  a {
    color: #000;
  }
}

/* --- Alto contraste do sistema (cores forçadas) -------------------------------------- */
/* O sistema troca as cores; garantimos que cada cartão e botão continue com borda. */
@media (forced-colors: active) {
  .vidro,
  .cartao,
  .bloco,
  .competicao,
  .placar-jogo,
  .clube-topo,
  .numero,
  .dia,
  .menu {
    border: 1px solid CanvasText;
  }

  .dia[aria-current="date"],
  .filtro input:checked + span {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
    border-color: Highlight;
  }

  .dia[aria-current="date"] .dia__semana {
    color: HighlightText;
  }
}

/* --- Movimento --------------------------------------------------------------------- */
/* Só para quem não pediu ao sistema para reduzir o movimento. */

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  .botao,
  .botao-secundario,
  .botao-icone,
  .chip-acao,
  .botao-texto,
  .voltar,
  .dia,
  .filtro > span,
  .menu__item,
  .menu__item svg,
  .jogo-linha__link,
  .link-chip {
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease,
      box-shadow 0.18s ease, transform 0.12s ease, filter 0.18s ease;
  }

  .botao:hover,
  .voltar:hover,
  .botao-icone:hover {
    transform: translateY(-1px);
  }

  .ponto-ao-vivo {
    animation: pulsar 1.6s ease-in-out infinite;
  }

  @keyframes pulsar {
    50% {
      opacity: 0.3;
    }
  }
}