/* ─────────────────────────────────────────────────────────────────────────
   No Papel FC — identidade visual (Etapa 2).
   Base preto/branco editorial. Cor é SEMÂNTICA (semáforo), não decorativa:
   verde = acerto/favorito venceu · amarelo = empate/dúvida · vermelho = erro/zebra.
   Tipografia: Kuhlman (display) + Aglet Sans (corpo) via Adobe Web Project —
   com FALLBACK decente pra não quebrar se a assinatura cair.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* Fontes — nomes EXATOS do Web Project xcb6cxg (lidos do CSS do Adobe).
     Kuhlman só tem peso 400 no projeto (peso vem do eixo wdth).
     Aglet é variável de 200 a 900 — usamos a faixa INTEIRA pra dar hierarquia
     por peso onde a Kuhlman não cabe (texto pequeno). Fallback sempre presente. */
  --fonte-display: "kuhlman-vf", "Arial Narrow", system-ui, sans-serif;
  --fonte-corpo: "aglet-sans-variable", "Inter", system-ui, -apple-system, sans-serif;

  /* Escala de pesos da Aglet (variável 200–900). Aplicada via font-variation-settings
     "wght" pra puxar o eixo de verdade, não negrito sintético. */
  --peso-leve: 300;     /* texto de apoio, refs */
  --peso-normal: 400;   /* corpo, análises */
  --peso-medio: 500;    /* ênfases sutis */
  --peso-forte: 700;    /* botões, rótulos, selos */
  --peso-pesado: 850;   /* nome dos times, títulos de bloco */

  /* Base */
  --tinta: #111110;        /* preto do texto/logo */
  --papel: #ffffff;        /* branco do fundo */
  --papel-2: #f4f4f1;      /* cinza-papel pros cards */
  --linha: #e2e2dc;        /* bordas */
  --tinta-2: #6a6a64;      /* texto secundário */
  --tinta-3: #9a9a92;      /* texto terciário/muted */

  /* Semáforo (cor = informação) */
  --verde: #1f9d57;        /* acerto / favorito venceu / confirmou */
  --verde-fundo: #e7f6ee;
  --amarelo: #d9a400;      /* empate / dúvida / parcial */
  --amarelo-fundo: #fbf3d6;
  --vermelho: #cf3030;     /* erro / derrota / zebra / furada */
  --vermelho-fundo: #fbe6e4;

  /* Cores do Brasil (torcida) — DECORATIVAS, distintas do semáforo (que é
     semântico). Verde-bandeira e amarelo-ouro vivos, não os tons do semáforo. */
  --brasil-verde: #009c3b;
  --brasil-amarelo: #ffd000;

  --raio: 10px;
  --largura: 680px;
}

* { box-sizing: border-box; }

/* O atributo HTML `hidden` deve sempre esconder — sem isto, regras com `display`
   explícito (ex.: .seletor-dia { display:inline-flex }) o sobrescreviam e o
   seletor de dia vazava no Glossário, disparando busca por -glossario.json. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--fonte-corpo);
  font-variation-settings: "wght" var(--peso-normal); /* puxa o eixo variável da Aglet */
  background: var(--papel);
  color: var(--tinta);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

main, .topo, .rodape { max-width: var(--largura); margin-inline: auto; padding-inline: 18px; }

/* ── Cabeçalho / marca ───────────────────────────────────────────────────── */
.topo {
  position: relative;
  padding-top: 40px;
  padding-bottom: 22px;
  border-bottom: 3px solid var(--tinta);
  margin-bottom: 24px;
}
/* Fina faixa verde-amarela (Brasil) logo abaixo da borda do header — torcida. */
.topo::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px;
  background: linear-gradient(90deg,
    var(--brasil-verde) 0%, var(--brasil-verde) 50%,
    var(--brasil-amarelo) 50%, var(--brasil-amarelo) 100%);
}
/* Marca centralizada — logo e tagline como bloco simétrico no topo. */
.marca { text-align: center; }
/* Kuhlman VF tem 2 eixos: wdth (largura/peso, ~50–125) e SEED (variação aleatória
   do recorte áspero das bordas — a cara "rasgada" do logo). wdth 125 = a versão
   larga e encorpada do logo "NO PAPEL FC".
   Decisão: Kuhlman SÓ no logo e no título do dia (pontos altos). Em texto pequeno
   o recorte áspero vira ruído — ali usamos Aglet (limpa, legível). */
.logo, main h2 {
  font-variation-settings: "wdth" 125, "SEED" 0;
}
.logo {
  font-family: var(--fonte-display);
  font-weight: 400; /* Kuhlman no Web Project só tem peso 400 — não forçar bold falso */
  font-size: clamp(34px, 9vw, 56px);
  letter-spacing: -0.01em;
  line-height: 0.95;
  margin: 0;
  text-transform: uppercase;
}
/* "FC" em verde+amarelo do Brasil — torcida pela seleção. F verde, C amarelo.
   Sem contorno preto (as duas iguais ao F). O logo já está no wdth máximo (125),
   então pra dar MAIS PESO ao FC uso text-stroke da PRÓPRIA cor de cada letra —
   engrossa o traço sem virar contorno escuro. */
.logo .fc-f { color: var(--brasil-verde); -webkit-text-stroke: 1.5px var(--brasil-verde); }
.logo .fc-c { color: var(--brasil-amarelo); -webkit-text-stroke: 1.5px var(--brasil-amarelo); }
.tagline {
  font-family: var(--fonte-corpo);
  font-variation-settings: "wght" var(--peso-forte);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: clamp(11px, 2.6vw, 14px);
  color: var(--tinta-2);
  margin: 12px 0 0;
}

/* ── Controles (visão + dia) ─────────────────────────────────────────────── */
.controles {
  display: flex; flex-wrap: wrap; gap: 14px;
  align-items: center; justify-content: center;
  margin-top: 28px;
}
.visoes { display: inline-flex; border: 2px solid var(--tinta); border-radius: 999px; overflow: hidden; flex: none; }
.visoes button {
  font-family: var(--fonte-corpo); text-transform: uppercase; letter-spacing: 0.05em;
  font-size: 13px; font-variation-settings: "wght" var(--peso-forte);
  padding: 8px 18px; border: 0; background: var(--papel); color: var(--tinta); cursor: pointer;
  white-space: nowrap;
}
/* Divisória entre as abas pra deixar claro que são botões distintos. */
.visoes button + button { border-left: 1px solid var(--linha); }
.visoes button.active { background: var(--tinta); color: var(--papel); border-left-color: var(--tinta); }
.visoes button:not(.active):hover { background: var(--papel-2); }
.seletor-dia { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--tinta-2); }
.seletor-dia span { font-family: var(--fonte-corpo); text-transform: uppercase; letter-spacing: 0.05em; font-variation-settings: "wght" var(--peso-forte); }
.seletor-dia select {
  font: inherit; padding: 6px 10px; border: 1px solid var(--linha);
  border-radius: 8px; background: var(--papel); color: var(--tinta);
}

/* ── Título do dia ───────────────────────────────────────────────────────── */
main h2 {
  font-family: var(--fonte-display); text-transform: uppercase;
  font-size: clamp(18px, 4.5vw, 24px); letter-spacing: -0.01em;
  margin: 4px 0 14px;
}
.intro { font-size: 16.5px; line-height: 1.6; color: var(--tinta); margin: 0 0 20px; }
.intro p { margin: 0 0 0.7em; }
.intro p:last-child { margin-bottom: 0; }

/* ── Legenda do semáforo (cor = informação) ──────────────────────────────── */
.legenda {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  margin: 0 0 18px; padding-bottom: 16px;
  border-bottom: 1px dashed var(--linha);
  font-size: 11.5px; color: var(--tinta-2);
  font-variation-settings: "wght" var(--peso-medio);
}
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.ponto { width: 9px; height: 9px; border-radius: 999px; display: inline-block; flex: none; }
.ponto.verde { background: var(--verde); }
.ponto.amarelo { background: var(--amarelo); }
.ponto.vermelho { background: var(--vermelho); }

/* ── Card de jogo ────────────────────────────────────────────────────────── */
/* Respiro generoso entre jogos — pedido do Gabriel: blocos não se amontoam.
   overflow:hidden pra a barra de cores encostar limpo no topo arredondado. */
.card {
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 18px;
  margin: 0 0 22px;
  background: var(--papel);
  overflow: hidden;
}

/* Barra de degradê das cores das duas seleções (casa → fora, transição direta).
   É o novo topo do card; sangra até as bordas. Cores vêm de custom properties. */
.barra-cores {
  height: 5px; margin: -18px -18px 0;
  background: linear-gradient(90deg, var(--c-casa, var(--linha)), var(--c-fora, var(--linha)));
}

/* Escudos: tamanho fixo, não distorcem; vazio mantém o alinhamento. */
.crest { width: 38px; height: 38px; object-fit: contain; flex: none; }
.crest-vazio { display: inline-block; }

/* Bloco-topo do jogo — seleções + horário/placar. É a IDENTIDADE do card.
   A barra de cores é o topo; o jogo-topo vem logo abaixo, sem raio no topo. */
.jogo-topo {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px;
  margin: 0 -18px 18px;                /* sangra lateralmente, encosta na barra */
  padding: 18px;
  background: var(--papel-2);
  border-bottom: 1px solid var(--linha);
}
/* Time: escudo ACIMA, nome ABAIXO, centralizado (vertical). Mesmo nos dois lados. */
.time {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  min-width: 0; text-align: center;
}
.time-nome {
  font-variation-settings: "wght" var(--peso-pesado);
  text-transform: uppercase; font-size: 15px; letter-spacing: 0.01em; line-height: 1.15;
}
/* Gols esperados (λ): abaixo do nome, peso leve, preto. */
.time-ge {
  font-variation-settings: "wght" var(--peso-leve);
  font-size: 11px; color: var(--tinta-2); font-variant-numeric: tabular-nums;
  text-transform: uppercase; letter-spacing: 0.02em;
}
/* Horário em destaque — pílula escura, é uma informação que o leitor procura. */
.hora {
  font-variation-settings: "wght" var(--peso-forte);
  font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap;
  background: var(--tinta); color: var(--papel);
  padding: 5px 13px; border-radius: 999px; justify-self: center;
}
/* Placar final (relatório) bem maior — é o desfecho, o ponto alto do card. */
.placar-num {
  font-variation-settings: "wght" var(--peso-pesado);
  font-size: 30px; font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
  text-align: center; justify-self: center;
}

/* Probabilidades 1X2 — o protagonista. Rótulo do lado + % grande + odd justa. */
.probs-rotulo {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--tinta-3); font-variation-settings: "wght" var(--peso-forte);
  margin: 0 0 12px; text-align: center;
}
.probs { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin: 0 0 16px; align-items: start; }
/* Coluna = card de probabilidade + (nos times) o clean sheet logo abaixo. */
.prob-col { display: flex; flex-direction: column; gap: 6px; }
.prob {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  text-align: center; padding: 14px 6px 10px;
  border: 1px solid var(--linha); border-radius: 8px; background: var(--papel);
}
/* Clean sheet: "não sofre gol" abaixo do card do time a que se refere. */
.prob-cs {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--tinta-3); text-align: center;
}
.prob-cs span { font-variation-settings: "wght" var(--peso-forte); }
.prob-cs strong {
  font-size: 13px; color: var(--tinta-2); text-transform: none;
  font-variation-settings: "wght" var(--peso-medio); font-variant-numeric: tabular-nums;
}
.prob-flag {
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap;
  font-variation-settings: "wght" var(--peso-forte);
  padding: 2px 8px; border-radius: 999px; color: var(--papel);
}
.prob-lado {
  font-size: 11px; color: var(--tinta-2); text-transform: uppercase; letter-spacing: 0.02em;
  font-variation-settings: "wght" var(--peso-forte);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.prob-pct {
  font-size: 22px; color: var(--tinta); line-height: 1;
  font-variation-settings: "wght" var(--peso-pesado); font-variant-numeric: tabular-nums;
}
.prob-odd { font-size: 10.5px; color: var(--tinta-3); font-variation-settings: "wght" var(--peso-leve); }
/* Semáforo nas colunas do 1X2. O MAIS PROVÁVEL (fav-*) tem borda GROSSA (2px) +
   etiqueta + número colorido. Empate e zebra têm borda FINA colorida (1px), sem
   etiqueta — menos destaque que o favorito, mas a cor conta a história. */
.prob.fav-verde { border: 2px solid var(--verde); }
.prob.fav-verde .prob-pct, .prob.fav-verde .prob-lado { color: var(--verde); }
.prob.fav-verde .prob-flag { background: var(--verde); }
.prob.fav-amarelo { border: 2px solid var(--amarelo); }
.prob.fav-amarelo .prob-pct, .prob.fav-amarelo .prob-lado { color: var(--amarelo); }
.prob.fav-amarelo .prob-flag { background: var(--amarelo); }

/* Tons fracos (não-favorito): só a borda colorida fina sinaliza o semáforo. */
.prob.tom-amarelo { border-color: var(--amarelo); }
.prob.tom-amarelo .prob-lado { color: var(--amarelo); }
.prob.tom-vermelho { border-color: var(--vermelho); }
.prob.tom-vermelho .prob-lado { color: var(--vermelho); }
/* tom-neutro: mantém a borda padrão (var(--linha)) — nada a fazer. */

/* Métricas: o fundo acinzentado agrupa as refs fixas + a caixa de outros
   placares. A caixa fica DENTRO do cinza, com respiro das demais informações. */
.metricas {
  background: var(--papel-2); border-radius: 8px; padding: 14px;
}
/* Referências descritivas (placar/over/btts) — SECUNDÁRIAS (invariante 2):
   grid rotulado, peso leve, contraste com os números pesados do 1X2. */
.ref-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin: 0; padding: 0; background: transparent;
}
.ref-grid div { text-align: center; }
.ref-grid dt {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--tinta-3); font-variation-settings: "wght" var(--peso-forte); margin-bottom: 2px;
}
.ref-grid dd {
  margin: 0; font-size: 15px; color: var(--tinta);
  font-variation-settings: "wght" var(--peso-medio); font-variant-numeric: tabular-nums;
}
.ref-grid dd small { color: var(--tinta-3); font-size: 11px; font-variation-settings: "wght" var(--peso-leve); }

/* Outros resultados prováveis: caixa DENTRO do cinza .metricas. Fundo branco
   pra se destacar do cinza. margin-top FOLGADO pra a pílula do título (que sobe
   sobre a borda) não encavalar na grid de métricas acima. */
/* margin-top vem do .caixa base (30px); só o fundo branco e zera o bottom. */
.outros-placares { margin-bottom: 0; background: var(--papel); }
.outros-placares-lista {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
}
.placar-chip {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 5px 10px; border: 1px solid var(--linha); border-radius: 7px;
  font-size: 12px; color: var(--tinta-3); font-variant-numeric: tabular-nums;
  font-variation-settings: "wght" var(--peso-leve);
}
.placar-chip b {
  font-size: 14px; color: var(--tinta);
  font-variation-settings: "wght" var(--peso-forte);
}

/* Resenha do jogo. Fonte maior e linha mais alta pra leitura confortável de
   newsletter; cada parágrafo (vindos de rico()) ganha respiro entre si pra não
   virar parede de texto. O negrito é eixo variável — font-weight sozinho não
   pega na Aglet, então forçamos "wght" pra o <strong> de fato pesar. */
.analise { margin: 16px 0 0; font-size: 18px; line-height: 1.65; color: var(--tinta); }
.analise p { margin: 0 0 0.85em; }
.analise p:last-child { margin-bottom: 0; }
.analise strong, .intro strong {
  font-variation-settings: "wght" var(--peso-pesado);
  color: var(--tinta);
}

/* ── Componente base "caixa + título" (reutilizável) ─────────────────────────
   Moldura com o TÍTULO em pílula pousada sobre a borda superior (legenda de
   fieldset). A pílula é POSICIONADA ABSOLUTA — não entra no fluxo, então NÃO
   invade o que está acima da caixa nem é empurrada (margin negativo invadia o
   vizinho — era a causa da sobreposição). A caixa precisa de margin-top próprio
   pra a pílula (que sobe ~metade da própria altura) não encostar no de cima. */
.caixa {
  position: relative;
  border: 2px solid var(--tinta); border-radius: var(--raio);
  padding: 30px 18px 18px;        /* padding-top reserva espaço pra a pílula */
  margin: 30px 0 24px;            /* margin-top: ar pra a pílula que pousa no topo */
}
.caixa-titulo {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  white-space: nowrap;
  background: var(--papel); border: 1.5px solid var(--tinta); border-radius: 999px;
  padding: 5px 16px;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--tinta); font-variation-settings: "wght" var(--peso-forte);
  text-align: center;
}

/* ── Calibração (placar de credibilidade no topo do relatório) ───────────── */
/* Caixa/título via .caixa/.caixa-titulo; aqui só o conteúdo interno. */
.calib-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.calib-item { text-align: center; display: flex; flex-direction: column; gap: 3px; }
.calib-item strong {
  font-size: 26px; color: var(--tinta); font-variant-numeric: tabular-nums;
  font-variation-settings: "wght" var(--peso-pesado); line-height: 1;
}
.calib-item span {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.02em; color: var(--tinta-3);
  font-variation-settings: "wght" var(--peso-forte);
}
.calib-ressalva {
  margin: 12px 0 0; text-align: center; font-size: 11.5px; color: var(--tinta-3);
  font-variation-settings: "wght" var(--peso-leve);
}

/* ── Relatório: veredito (fallback) + previsão + Brier + gols ─────────────── */
.veredito-topo {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 14px;
}
/* Brier: só rótulo + número (o que significa fica no Glossário). */
.brier { display: flex; align-items: baseline; gap: 6px; cursor: help; }
.brier-rotulo {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--tinta-3);
  font-variation-settings: "wght" var(--peso-forte);
}
.brier-num {
  font-size: 20px; color: var(--tinta); font-variant-numeric: tabular-nums;
  font-variation-settings: "wght" var(--peso-pesado);
}

/* A previsão é o CORAÇÃO do relatório (previsto × ocorrido) — protagonista,
   logo abaixo do placar. Usa .caixa/.caixa-titulo; aqui só o conteúdo interno.
   padding-bottom menor: sem o espaço vazio que sobrava sob os números. */
.previsao.caixa { margin-bottom: 14px; padding-bottom: 14px; }
.previsao-cab { display: flex; justify-content: center; margin-bottom: 14px; }
/* Brier CENTRALIZADO abaixo dos números, com divisor sutil — não jogado no canto. */
.previsao-rodape {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linha);
  display: flex; justify-content: center;
}
/* Quanta convicção o modelo tinha no que aconteceu — frase de destaque. */
.prev-consumada {
  margin: 12px 0 0; text-align: center; font-size: 13.5px; color: var(--tinta-2);
  font-variation-settings: "wght" var(--peso-normal);
}
.prev-consumada strong {
  color: var(--tinta); font-variation-settings: "wght" var(--peso-pesado);
  font-variant-numeric: tabular-nums;
}
/* Gols esperados previstos (confronto com o placar real). Referência, peso leve. */
.prev-ge-linha { margin-top: 6px; text-align: center; }
.prev-ge {
  font-size: 11.5px; color: var(--tinta-3); text-transform: uppercase; letter-spacing: 0.03em;
  font-variation-settings: "wght" var(--peso-leve); font-variant-numeric: tabular-nums;
}

.previsao-linha { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; text-align: center; }
/* Todas as colunas com a mesma caixinha (uniforme); a vencedora muda só a cor.
   Sem isso, só a vencedora tinha fundo e as outras flutuavam (assimétrico). */
.previsao-linha span {
  font-size: 12px; color: var(--tinta-2);
  display: flex; flex-direction: column; gap: 3px; padding: 10px 4px; border-radius: 8px;
  background: var(--papel-2);
}
.previsao-linha strong {
  font-size: 17px; color: var(--tinta);
  font-variation-settings: "wght" var(--peso-pesado); font-variant-numeric: tabular-nums;
}
/* O lado que de fato venceu, realçado em verde (acerto = verde no semáforo). */
.previsao-linha .venceu { background: var(--verde-fundo); }
.previsao-linha .venceu, .previsao-linha .venceu strong { color: var(--verde); }
.gols {
  margin-top: 12px; font-size: 12.5px; color: var(--tinta-2);
  font-variation-settings: "wght" var(--peso-leve); font-variant-numeric: tabular-nums;
}

/* Selo de acerto (relatório) — semáforo. */
.selo { display: inline-block; text-transform: uppercase;
  font-size: 11px; font-variation-settings: "wght" var(--peso-forte); letter-spacing: 0.04em;
  padding: 3px 9px; border-radius: 999px; }
.selo.acerto { background: var(--verde-fundo); color: var(--verde); }
.selo.zebra { background: var(--vermelho-fundo); color: var(--vermelho); }
.selo.empate { background: var(--amarelo-fundo); color: var(--amarelo); }

/* ── Nossas leituras (teses verificáveis — o gesto editorial da No Papel) ─── */
/* .leituras usa .caixa/.caixa-titulo; aqui só o conteúdo interno.
   margin-top maior que o 30px base — respiro extra entre seções grandes. */
.leituras { margin-top: 40px; }
.leituras-intro { margin: 0 0 14px; font-size: 13px; color: var(--tinta-2); text-align: center; }
.leituras ul { list-style: none; margin: 0; padding: 0; }
.leitura { padding: 14px 0; border-top: 1px solid var(--linha); }
.leitura:first-child { border-top: 0; padding-top: 0; }
/* Cabeçalho da leitura: confronto (protagonista) + selo de aposta. Saber DE QUAL
   jogo é a leitura importa — por isso o confronto ganha peso e tamanho. */
.leitura-cab { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 7px; }
.leitura-jogo {
  font-size: 14px; color: var(--tinta); text-transform: uppercase; letter-spacing: 0.02em;
  font-variation-settings: "wght" var(--peso-pesado);
}
.leitura-selo {
  display: inline-block; text-transform: uppercase; letter-spacing: 0.04em;
  font-size: 11px; font-variation-settings: "wght" var(--peso-forte);
  padding: 2px 9px; border-radius: 999px;
}
.aposta-verde { background: var(--verde-fundo); color: var(--verde); }
.aposta-amarelo { background: var(--amarelo-fundo); color: var(--amarelo); }
.aposta-vermelho { background: var(--vermelho-fundo); color: var(--vermelho); }
.leitura-texto {
  margin: 0; font-size: 15.5px; color: var(--tinta);
  font-variation-settings: "wght" var(--peso-medio);
  white-space: pre-line; /* respeita quebras de linha se a geração do texto emitir */
}

/* ── Curiosidades ────────────────────────────────────────────────────────── */
/* .curiosidades usa .caixa/.caixa-titulo; aqui só o conteúdo interno.
   Tirado o fundo papel-2 pra não competir com a moldura. */
.curiosidades { margin-top: 40px; }
.curiosidades ul { list-style: none; margin: 0; padding: 0; }
.curiosidades li {
  position: relative; padding: 8px 0 8px 18px; font-size: 13.5px; color: var(--tinta);
  border-top: 1px solid var(--linha);
}
.curiosidades li:first-child { border-top: 0; }
.curiosidades li::before { content: "›"; position: absolute; left: 2px; color: var(--tinta-3); font-variation-settings: "wght" var(--peso-forte); }

/* ── Glossário ───────────────────────────────────────────────────────────── */
.glossario { margin: 0; }
.termo { padding: 16px 0; border-top: 1px solid var(--linha); }
.termo:first-child { border-top: 0; padding-top: 4px; }
.termo dt {
  font-variation-settings: "wght" var(--peso-pesado);
  text-transform: uppercase; font-size: 15px; letter-spacing: 0.01em;
  color: var(--tinta); margin-bottom: 5px;
}
.termo dd {
  margin: 0; font-size: 14.5px; color: var(--tinta-2); line-height: 1.6;
  font-variation-settings: "wght" var(--peso-normal);
}

/* ── Rodapé / disclaimer (sempre visível — invariante 2) ─────────────────── */
.rodape {
  margin-top: 32px; padding: 16px 18px 40px;
  border-top: 1px solid var(--linha);
  font-size: 11.5px; color: var(--tinta-3); line-height: 1.7;
}

.muted { color: var(--tinta-3); }
.center { text-align: center; }

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE — 90%+ do tráfego é celular. Até aqui o CSS era mobile-first nas
   FONTES (clamp), mas os grids fixos de 3 colunas e os paddings de 18px em
   caixas aninhadas espremiam tudo em telas ~360px. Estratégia, do mais
   importante pro detalhe:
   - O 1X2 (.probs) MANTÉM as 3 colunas (Casa/Empate/Fora só faz sentido lado a
     lado, e o "não sofre gol" pendura embaixo de cada coluna). Só aperta.
   - Demais grids 3-col (ref, calibração, previsão) ganham fonte/padding menor.
   - Recuperar largura cortando padding das caixas aninhadas (card>metricas>caixa).
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 560px) {
  /* Respiro lateral menor — em 360px cada px de largura conta. */
  main, .topo, .rodape { padding-inline: 14px; }

  .topo { padding-top: 28px; padding-bottom: 18px; margin-bottom: 18px; }
  .controles { margin-top: 20px; gap: 10px; }

  /* Card e suas caixas aninhadas: padding menor pra devolver largura útil.
     A barra de cores e o jogo-topo sangram com -14px (era -18px) pra casar. */
  .card { padding: 14px; margin-bottom: 18px; }
  .barra-cores { margin: -14px -14px 0; }
  .jogo-topo { margin: 0 -14px 14px; padding: 14px 12px; gap: 8px; }
  .metricas { padding: 12px; }
  .caixa { padding: 26px 12px 14px; }

  /* Confronto no topo: escudos um pouco menores, nome sem estourar. */
  .crest { width: 32px; height: 32px; }
  .time-nome { font-size: 14px; }
  .time-ge { font-size: 10px; }
  .hora { font-size: 13px; padding: 4px 10px; }
  .placar-num { font-size: 26px; }

  /* 1X2 — 3 colunas mantidas, tudo encolhido pra caber em 360px sem cortar. */
  .probs { gap: 6px; }
  .prob { padding: 13px 3px 9px; }
  .prob-lado { font-size: 10px; letter-spacing: 0; }
  .prob-pct { font-size: 19px; }
  .prob-odd { font-size: 9.5px; }
  .prob-flag { font-size: 8px; padding: 2px 6px; }
  .prob-cs { font-size: 9px; }
  .prob-cs strong { font-size: 12px; }

  /* Métricas de referência (placar/over/btts): 3 col com fonte menor. */
  .ref-grid { gap: 6px; }
  .ref-grid dt { font-size: 9.5px; }
  .ref-grid dd { font-size: 13px; }
  .ref-grid dd small { font-size: 10px; }

  /* Calibração e linha de previsão do relatório: idem, apertados mas em 3 col. */
  .calib-nums { gap: 8px; }
  .calib-item strong { font-size: 22px; }
  .calib-item span { font-size: 10px; }
  .previsao-linha { gap: 6px; }
  .previsao-linha span { padding: 9px 3px; font-size: 11px; }
  .previsao-linha strong { font-size: 15px; }

  /* Pílula de título da caixa: menor e, se não couber numa linha, quebra em vez
     de furar a borda (era nowrap → estourava "Outros resultados prováveis"). */
  .caixa-titulo {
    white-space: normal; max-width: calc(100% - 24px);
    font-size: 10px; padding: 4px 12px; line-height: 1.25;
  }

  /* Texto corrido: leve redução pra não dominar a tela estreita, mas ainda
     maior e mais arejado que a versão antiga (era 14px). */
  .analise { font-size: 16px; line-height: 1.6; }
  .intro { font-size: 15.5px; }
  .leitura-texto { font-size: 15px; }
}

/* Celulares estreitos (iPhone SE/mini, ~360px e menos): o 1X2 é o que mais
   sofre. Último aperto pra o % de três dígitos não encostar nas bordas. */
@media (max-width: 380px) {
  .probs { gap: 4px; }
  .prob { padding: 12px 2px 8px; }
  .prob-pct { font-size: 17px; }
  .prob-flag { font-size: 7.5px; padding: 2px 5px; letter-spacing: 0; }
  .ref-grid { gap: 4px; }
  .previsao-linha { gap: 4px; }
}