/* ─────────────────────────────────────────────────────────────────────────
   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 da página. 760 (era 680) pra os 3 cards do 1X2 respirarem no desktop:
     a coluna do empate passou a caber a faixa "com gols · sem gols" numa linha só
     (precisa ~204px; em 680 tinha 197). O texto corrido (resenha/intro) NÃO cresce
     junto — tem --largura-texto própria pra não virar linha longa demais. */
  --largura: 760px;
  --largura-texto: 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); }
/* A aba "Ao vivo", quando ativa, fica vermelha (estado ao vivo), não preta. */
.visoes button.aovivo.active { background: var(--vermelho); border-left-color: var(--vermelho); }
.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 ───────────────────────────────────────────────────────── */
/* Topo das visões padronizado em estilo CENTRALIZADO (título + legenda). A intro
   (texto corrido) é a exceção consciente: alinhada à ESQUERDA pra legibilidade do
   parágrafo (Art. 8: leitura no celular), mas o bloco fica centralizado na página
   (margin auto + largura limitada). */
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; text-align: center;
}
/* Título do dia: desktop em 1 linha (com —); mobile quebra em 2 (torneio / data),
   maior pra preencher melhor o espaço. As partes viram bloco no mobile (CSS abaixo). */
.titulo-dia .td-torneio, .titulo-dia .td-data { display: inline; }
.intro {
  font-size: 16.5px; line-height: 1.6; color: var(--tinta);
  margin: 0 auto 20px; max-width: var(--largura-texto);
  text-align: left;  /* texto corrido legível, mas o bloco é centralizado (margin auto) */
}
.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;
  /* Degradê SUTIL (20%) das 2 seleções no fundo do card — mesmo do mobile (a
     regra mobile, mais abaixo, repete com a sangria própria de lá). Os blocos
     internos mantêm fundo claro por cima, então a legibilidade se preserva. */
  background:
    linear-gradient(160deg,
      color-mix(in srgb, var(--c-casa, var(--linha)) 20%, var(--papel)),
      color-mix(in srgb, var(--c-fora, var(--linha)) 20%, 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 à direita. */
.probs-rotulo {
  font-family: var(--fonte-display); font-variation-settings: "wdth" 100, "SEED" 0;
  font-size: 16px; letter-spacing: 0.01em;
  color: var(--tinta);
  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;
}
/* Empate: os dois pares (com gols · sem gols) numa LINHA só, abaixo do card —
   a base .prob-cs é column (bom pra "não sofre gol", 1 par); o empate tem 2 pares
   e precisa deitar, senão empilha feio com o "·" solto no meio. Espelha o mobile. */
.prob-cs-empate {
  flex-direction: row; flex-wrap: wrap; justify-content: center;
  align-items: baseline; gap: 4px 8px;
}
.prob-cs-empate .prob-cs-sep { color: var(--tinta-3); margin: 0 2px; }
.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;
}
/* 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); }
/* Dupla do bolão ("2x0 ou 2x1"): o "ou" é conector, peso leve, pra dupla não
   virar um número só; white-space evita quebra feia dentro da célula da grid. */
.placar-bolao dd { white-space: nowrap; }
.placar-bolao .bolao-ou {
  color: var(--tinta-3); font-size: 11px;
  font-variation-settings: "wght" var(--peso-leve); padding: 0 1px;
}

/* 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: 6px;
  padding: 7px 12px; border: 1px solid var(--linha); border-radius: 8px;
  font-size: 13px; color: var(--tinta-3); font-variant-numeric: tabular-nums;
  font-variation-settings: "wght" var(--peso-leve);
}
.placar-chip b {
  font-size: 16px; 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. */
/* Texto corrido NÃO acompanha o alargamento do card: limita a --largura-texto e
   centraliza, pra a linha não passar da medida de leitura confortável (~70 car.).
   O card cresce (cards 1X2, métricas), a resenha respira no centro. */
.analise { margin: 16px auto 0; max-width: var(--largura-texto); 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);
}
/* Itálico marca a VOZ (frase-lápide, imagem, resenha) — diferente do negrito,
   que marca FATO. A Aglet variável expõe só o eixo "wght", não tem eixo de
   itálico, então font-style: italic é inclinação sintética do navegador —
   suficiente pro destaque pontual e curto que o editorial usa. */
.analise em, .intro em { font-style: italic; }

/* ── 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 fica NO FLUXO (não absolute): é o primeiro filho de um
   flex-coluna e sobe com margin-top negativo pra "sentar" na borda — mas OCUPA
   ESPAÇO. Assim, título de 1, 2 ou 3 linhas EMPURRA o conteúdo pra baixo em vez
   de sobrepor (era o bug latente do absolute: não reservava espaço, e título
   longo invadia a primeira linha do conteúdo). */
.caixa {
  border: 2px solid var(--tinta); border-radius: var(--raio);
  padding: 18px;
  margin: 30px 0 24px;            /* margin-top: ar pra a pílula que sobe pra fora */
  display: flex; flex-direction: column; align-items: center;
}
.caixa > * { width: 100%; }       /* conteúdo volta à largura cheia (a pílula é auto) */
.caixa-titulo {
  width: auto; align-self: center;
  margin: -29px 0 14px;           /* sobe metade pra fora (≈ -altura/2 - padding) */
  white-space: normal; max-width: calc(100% - 8px); line-height: 1.25;
  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); }

/* ── Selo de confiança da leitura (prévia) ─────────────────────────────────
   Portado do painel admin. Mede a NITIDEZ da previsão 1X2 (não é valor, não
   compara com mercado). Cores REMAPEADAS pra paleta semáforo do site (o admin
   usava --home/--draw/--away): forte→verde, média→amarelo, jogo aberto→vermelho.
   Fica no topo do 1º slide da prévia, acima do "Chance de cada resultado". */
.selo-confianca { display: flex; align-items: center; gap: 7px;
  font-size: 12px; font-variation-settings: "wght" var(--peso-forte);
  margin: 10px 0 4px; padding: 7px 11px; border-radius: 10px; background: var(--papel-2); }
.selo-confianca .selo-ponto { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.selo-confianca .selo-ajuda { margin-left: auto; font-size: 10px;
  font-variation-settings: "wght" 400; color: var(--tinta-3); text-align: right; }
/* Aviso de ferrolho — linha discreta logo abaixo do selo forte: o jeito
   histórico de a leitura forte falhar é o empate seco (medição 03/07). */
.selo-risco { margin: 2px 0 4px; padding: 0 11px; font-size: 11px;
  font-variation-settings: "wght" 400; color: var(--tinta-3); }
/* Placar da disputa de pênaltis (relatório, mata-mata): linha discreta sob o
   placar do jogo — o placar-num mostra o jogo REAL; a disputa vem à parte. */
.placar-penaltis { margin: -4px 0 6px; font-size: 12px; color: var(--tinta-2);
  text-align: center; font-variation-settings: "wght" var(--peso-medio); }
.selo-forte { color: var(--verde); }
.selo-forte .selo-ponto { background: var(--verde); }
.selo-media { color: var(--amarelo); }
.selo-media .selo-ponto { background: var(--amarelo); }
.selo-loteria { color: var(--vermelho); }
.selo-loteria .selo-ponto { background: var(--vermelho); }

/* ── Slide "Como chegam" (Raio-X da Copa, só mata-mata) ─────────────────────
   Reusa .av-row/.av-val/.av-lab/.av-bar do Ao vivo (mesma identidade); aqui só
   o invólucro: fundo cinza igual ao .metricas do slide 2 e a nota de rodapé. */
.raiox-stats { background: var(--papel-2); border-radius: 8px; padding: 6px 14px; }
.raiox-nota { margin: 8px 0 0; font-size: 11px; color: var(--tinta-3); text-align: center; }

/* ── 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; }
/* Placar acumulado das leituras na Copa ("31 de 51 confirmadas") — o retrovisor
   agregado acima da intro. Destaque discreto: só o número ganha peso. */
.leituras-placar { margin: 0 0 6px; font-size: 13px; color: var(--tinta); text-align: center; }
.leituras-placar strong { font-variation-settings: "wght" var(--peso-forte); }
.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); }
/* Markdown leve nas curiosidades: negrito é eixo variável (font-weight não pega
   na Aglet), itálico é inclinação sintética — igual ao corpo das análises. */
.curiosidades strong { font-variation-settings: "wght" var(--peso-pesado); }
.curiosidades em { font-style: italic; }

/* ── 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).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── AO VIVO ─────────────────────────────────────────────────────────────────
   Cards de estatística ao vivo (aba "Ao vivo"). Identidade da casa: barra
   comparativa preto/cinza, chip vermelho pulsando, carimbo de frescor honesto. */
/* Textos de página (título + intro) centralizados; o conteúdo dos cards mantém
   seu próprio alinhamento (valores nas pontas, rótulo no meio). */
.aovivo-wrap { text-align: center; }
.aovivo-wrap .intro { margin-left: auto; margin-right: auto; }
.av-card {
  border: 2px solid var(--tinta); border-radius: var(--raio);
  margin: 28px 0; overflow: hidden; background: var(--papel);
}
.av-card:first-of-type { margin-top: 14px; }

/* ── SELETOR DE JOGOS (barra de chips) — pula direto ao card do jogo ──────────
   Sticky no topo (acompanha a rolagem). Rola lateral se houver muitos jogos.
   Reutilizado em prévia/relatório/ao vivo. */
.seletor-jogos {
  position: sticky; top: 0; z-index: 5;
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  justify-content: center;               /* centraliza quando os chips cabem */
  padding: 10px 0; margin: 4px 0 8px;
  background: var(--papel); border-bottom: 1px solid var(--linha);
}
/* Muitos chips (não cabem): justify-content:center cortaria os das pontas no
   scroll. margin:auto nos filhos centraliza E preserva a rolagem lateral. */
.seletor-jogos { justify-content: flex-start; }
.seletor-jogos::before, .seletor-jogos::after { content: ""; margin: auto; }
.seletor-jogos::-webkit-scrollbar { display: none; }
/* Desktop: vários cards cabem na tela, o seletor é redundante — esconde. */
@media (min-width: 561px) { .seletor-jogos { display: none; } }
.chip-jogo {
  flex: 0 0 auto; cursor: pointer;
  font-family: var(--fonte-corpo); font-size: 12px;
  font-variation-settings: "wght" var(--peso-forte);
  text-transform: uppercase; letter-spacing: .04em;
  padding: 7px 12px; border-radius: 100px;
  border: 1px solid var(--linha); background: var(--papel-2); color: var(--tinta-2);
  white-space: nowrap; transition: background .15s, color .15s;
}
.chip-jogo:hover { background: var(--linha); }
.chip-jogo[aria-current="true"] { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.av-cab {
  padding: 12px 16px 10px; border-bottom: 1px solid var(--linha);
  display: flex; justify-content: center;
}
/* Badge AO VIVO em destaque: pill vermelho PREENCHIDO + minuto grande ao lado.
   Centralizado e maior — comunica "está acontecendo agora", não passa batido. */
.av-vivo {
  display: inline-flex; align-items: center; gap: 9px;
  font-variation-settings: "wght" var(--peso-pesado);
}
.av-vivo .av-selo {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--vermelho); color: var(--papel);
  text-transform: uppercase; letter-spacing: .1em; font-size: 12px;
  padding: 5px 11px; border-radius: 100px; white-space: nowrap;
}
.av-min {
  font-size: 17px; color: var(--vermelho); letter-spacing: .02em;
  font-variation-settings: "wght" var(--peso-pesado);
}
.av-fase {
  font-size: 11px; color: var(--tinta-2); text-transform: uppercase; letter-spacing: .08em;
  font-variation-settings: "wght" var(--peso-forte);
}
.av-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--papel);
  animation: av-pisca 1.1s ease-in-out infinite;
}
@keyframes av-pisca { 50% { opacity: .2; } }
.av-jogo {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 12px; padding: 14px 16px 8px;
}
.av-time { display: flex; align-items: center; gap: 8px; min-width: 0; }
.av-time.dir { justify-content: flex-end; }
.av-time img { width: 26px; height: 26px; object-fit: contain; flex: 0 0 auto; }
.av-time span {
  font-variation-settings: "wght" var(--peso-pesado); font-size: 16px;
  text-transform: uppercase; line-height: 1.03;
}
.av-placar {
  font-family: var(--fonte-display); font-variation-settings: "wdth" 110;
  font-size: 26px; line-height: 1; white-space: nowrap;
}
.av-stats { padding: 4px 16px 18px; }
/* Mais respiro entre grupos: separador forte + espaço generoso (estava amontoado). */
.av-grupo + .av-grupo { margin-top: 34px; }
/* Categoria autoral na fonte do logo (Kuhlman). Menor e mais leve: a Kuhlman varia
   por LARGURA (wdth), não peso — wdth baixo = traço mais fino. Sem uppercase (a
   fonte já tem caráter); diferencia da fonte de corpo dos rótulos das stats. */
.av-grupo-tit {
  text-align: center; font-family: var(--fonte-display);
  font-variation-settings: "wdth" 100, "SEED" 0;
  font-size: 15px; letter-spacing: .01em; color: var(--tinta);
  margin: 0 0 8px; padding-top: 18px; border-top: 2px solid var(--tinta);
}
.av-grupo:first-child .av-grupo-tit { border-top: none; padding-top: 6px; }
/* Mais ar entre as linhas de stat dentro de um grupo. */
.av-row { padding: 12px 0; border-top: 1px solid var(--linha); }
.av-row:first-child { border-top: none; }
.av-grupo .av-row:first-child { border-top: 1px solid var(--linha); }
.av-grupo .av-row:first-of-type { border-top: none; }
.av-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; }
.av-val { font-variation-settings: "wght" var(--peso-pesado); font-size: 14px; min-width: 46px; }
.av-val.r { text-align: right; }
.av-suf { font-size: .7em; color: var(--tinta-3); }
.av-lab {
  font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--tinta-2); font-variation-settings: "wght" var(--peso-forte);
}
.av-bar {
  height: 8px; border-radius: 100px; background: var(--linha);
  display: flex; overflow: hidden;
}
/* As metades recebem a cor da seleção (var --c-casa/--c-fora vêm do card).
   Fallback preto/cinza se a cor não existir (time sem cor no mapa). */
.av-bar span:first-child { background: var(--c-casa, var(--tinta)); }
.av-bar span:last-child  { background: var(--c-fora, var(--tinta-3)); }
/* Risco fino entre as metades pra separar cores parecidas (ex: dois vermelhos). */
.av-bar span:first-child { box-shadow: inset -1px 0 0 rgba(255,255,255,.6); }
.av-aviso { padding: 18px 16px; text-align: center; color: var(--tinta-3); font-size: 13px; }

/* Cards COLAPSADOS (pendente/encerrado): borda fina, sem destaque do ao vivo. */
.av-colapsado { border-width: 1px; border-color: var(--linha); }
.av-colapsado .av-cab { border-bottom: none; padding-bottom: 0; }
.av-colapsado .av-jogo { padding-bottom: 14px; }
.av-colapsado .av-placar { color: var(--tinta-2); font-size: 22px; }
.av-hora {
  font-variation-settings: "wght" var(--peso-forte); font-size: 12px;
  color: var(--tinta-3); text-transform: uppercase; letter-spacing: .08em;
}
.av-fim {
  font-variation-settings: "wght" var(--peso-forte); font-size: 11px;
  color: var(--tinta-3); text-transform: uppercase; letter-spacing: .1em;
}
.av-cab:has(.av-hora), .av-cab:has(.av-fim) { justify-content: center; }
.av-pend-msg {
  padding: 0 16px 14px; text-align: center; color: var(--tinta-3); font-size: 12px;
}
.av-vazio {
  padding: 28px 18px; text-align: center; color: var(--tinta-3); font-size: 14px;
  border: 1px dashed var(--linha); border-radius: var(--raio); margin: 14px 0;
}
.av-carimbo {
  font-size: 11px; color: var(--tinta-3); text-align: center; margin: 16px 0 0;
  line-height: 1.5;
}

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

  /* Título do dia quebra em 2 linhas intuitivas: torneio / data. Some o "—",
     cada parte vira bloco. Cada parte NÃO quebra internamente (balance/nowrap) pra
     não virar 3 linhas; tamanho moderado pra "COPA DO MUNDO 2026" caber numa linha. */
  .titulo-dia { font-size: 23px; line-height: 1.08; }
  .titulo-dia .td-torneio, .titulo-dia .td-data { display: block; text-wrap: balance; }
  .titulo-dia .td-sep { display: none; }

  .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.
     ITEM 3: degradê SUTIL (20%) das 2 seleções no fundo do card inteiro. Os
     blocos internos mantêm fundo claro por cima (legibilidade preservada). */
  .card {
    padding: 14px; margin-bottom: 18px;
    /* 20%: agora que a variável está no .card certo (era o bug do degradê branco),
       20% já aparece. Gabriel preferiu voltar de 38% pra 20% — mais sutil. */
    background:
      linear-gradient(160deg,
        color-mix(in srgb, var(--c-casa, var(--linha)) 20%, var(--papel)),
        color-mix(in srgb, var(--c-fora, var(--linha)) 20%, var(--papel)));
  }
  .barra-cores { margin: -14px -14px 0; }
  /* jogo-topo levemente translúcido pra o degradê "respirar" sob o topo fixo. */
  .jogo-topo { margin: 0 -14px 14px; padding: 14px 12px; gap: 8px;
               background: color-mix(in srgb, var(--papel-2) 88%, transparent); }
  /* ITEM 2: menos moldura — .metricas perde a caixa cinza no mobile (o degradê do
     card já delimita); vira conteúdo solto. .caixa interna fica semitranslúcida. */
  .metricas { background: transparent; padding: 0; }
  .caixa { padding: 14px; margin-top: 26px;
           background: color-mix(in srgb, var(--papel) 80%, transparent); }
  .caixa-titulo { margin-top: -26px; }   /* casa com a caixa mobile menor */

  /* 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-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) — fora do carrossel. O tratamento
     do box direito DENTRO do slide está mais abaixo (.slide .ref-grid), que é a
     regra que vence; editar aqui não pegava. */
  .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: só reduz fonte/padding no mobile. A quebra de linha e o
     max-width já vêm do .caixa-titulo base (no fluxo) — não repetir aqui. */
  .caixa-titulo { font-size: 10px; padding: 4px 12px; }

  /* 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; }

  /* ── ITEM 1: carrossel de swipe DENTRO do card ──────────────────────────────
     Só as ESTATÍSTICAS (1X2, métricas, previsão, gols) deslizam. O topo do jogo
     fica fixo (fora do trilho) e a resenha fica estática embaixo (fora do trilho).
     Swipe nativo via scroll-snap — sem JS de arrastar; o JS só acende os dots. */
  .card-slides {
    display: flex; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;                 /* Firefox */
    margin: 0 -14px;                       /* sangra: cada slide ocupa a largura cheia */
  }
  .card-slides::-webkit-scrollbar { display: none; }   /* Chrome/Safari */
  .slide {
    flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always;
    padding: 16px 14px; min-width: 0;
    /* ALINHA o conteúdo ao TOPO (flex-start), com respiro fixo de 16px no padding.
       Os dois slides têm conteúdos de alturas diferentes (1X2 ~352px vs métricas
       ~380px); space-between empurrava cada corpo de pontas opostas e o corpo das
       métricas (mais alto) começava ANTES — "PLACAR" ficava acima de "66,2%".
       Alinhando pelo topo, rótulo E corpo dos dois começam na MESMA linha; a
       diferença de altura sobra embaixo (respiro), invisível e simétrica entre os
       slides. É o "descer um pouco a direita" que faltava. gap separa rótulo↔corpo. */
    display: flex; flex-direction: column; justify-content: flex-start; gap: 14px;
    /* Altura igual dos slides via JS (min-height = maior). O RÓTULO fica no topo
       (alinhado entre os dois slides — não reabre o bug do "PLACAR acima de 66,2%");
       o CORPO estica (flex:1) e CENTRALIZA seu conteúdo no espaço — assim o grupo
       com menos info se distribui no meio, sem respiro vazio embaixo. */
  }
  /* ── 1X2 EMPILHADO (vertical) — cada resultado é uma LINHA LARGA: rótulo à
     esquerda, % grande + odd à direita. Reabertura consciente da decisão "3 col"
     (2026-06-22): com o carrossel, cada slide tem a tela toda. ── */
  /* A seção 1X2 (3 blocos com sub-faixa) media 350px e a de métricas 380px — 30px
     a menos. Como o 1X2 tem 2 gaps entre os 3 blocos, distribuir esses 30px é
     gap 10→25px: as duas seções passam a ter a MESMA altura total (~380), dando
     aspecto alinhado ao deslizar, sem mexer nas sub-faixas (info real). */
  .slide .probs { display: flex; flex-direction: column; gap: 25px; margin: 0; }
  .slide .prob-col { width: 100%; overflow: visible; margin-bottom: 2px; }
  .slide .prob {
    position: relative; overflow: visible;
    /* GRID de 2 colunas: rótulo flexível | % na ponta direita. A "odd justa" saiu
       (2026-06-22), então o % vai encostado à direita — coluna reta nas três
       linhas, sem risco de colidir com nome de seleção grande (o rótulo, em 1fr,
       absorve a sobra e quebra linha se precisar). Antes o % colava no fim do
       rótulo via margin-left:auto e "dançava" de uma linha pra outra. */
    display: grid;
    grid-template-columns: 1fr max-content;
    align-items: center; column-gap: 14px;
    /* padding vertical menor (era 18px + min-height 76px) — o conteúdo já tem
       altura própria (% em 34px). Isso elimina o VÃO BRANCO morto entre o
       conteúdo e o tracejado da aba (o "corte" que aparecia acima do tracejado). */
    text-align: left; padding: 14px 18px;
    /* trava em 64px (= altura das caixas de métrica do outro slide), pra os 3
       blocos do 1X2 e os 3 das métricas terem altura idêntica e casarem ao
       deslizar. Antes variavam 63-64 (o card do favorito, com etiqueta, +1px). */
    min-height: 64px; box-sizing: border-box;
  }
  .slide .prob-lado { font-size: 16px; white-space: normal; letter-spacing: 0.02em; }
  /* % na ponta direita + dígitos tabulares: os três números terminam na mesma
     vertical entre as linhas, formando coluna reta. */
  .slide .prob-pct {
    font-size: 34px; text-align: right; justify-self: end;
    font-variant-numeric: tabular-nums;
  }
  /* etiqueta "favorita": pílula do semáforo pousada CENTRALIZADA no topo do card */
  .slide .prob-flag { top: -10px; font-size: 10px; padding: 3px 12px; }

  /* Aba "não sofre gol" / "empate com·sem gols": SUB-FAIXA colada na base do card,
     com presença (uppercase + peso, identidade da página). */
  .slide .prob-cs {
    display: flex; flex-direction: row; align-items: baseline;
    justify-content: center; gap: 8px; width: 100%; padding: 9px 14px;
    margin: -1px 0 0;                 /* sobe 1px pra COLAR no card: bordas laterais
                                         contínuas, sem o gap de subpixel que parecia
                                         um "corte" na junção card↔aba. */
    text-transform: uppercase; letter-spacing: 0.04em; color: var(--tinta-2);
    border: 1px solid var(--linha); border-top: 1px dashed var(--linha);
    border-radius: 0 0 8px 8px;
    background: color-mix(in srgb, var(--papel) 78%, transparent);
  }
  .slide .prob-cs span { font-size: 12px; font-variation-settings: "wght" var(--peso-forte); }
  .slide .prob-cs strong {
    font-size: 16px; color: var(--tinta); text-transform: none;
    font-variation-settings: "wght" var(--peso-pesado);
  }
  /* aba do EMPATE: dois pares numa linha, separador "·" no meio */
  .slide .prob-cs-empate { gap: 5px; flex-wrap: wrap; }
  .slide .prob-cs-empate .prob-cs-sep { color: var(--tinta-3); margin: 0 4px; }

  /* CONTORNO CONTÍNUO card + aba: o card só perde a base/cantos QUANDO É SEGUIDO
     por uma aba (:has) — card sem aba (ex.: empate de dia antigo) fica fechado.
     A aba herda a cor/espessura do tom do semáforo, formando peça única. */
  /* CAUSA REAL do espaço acima do tracejado (medido via CDP): o .prob-col é flex
     com gap:6px (regra base, linha ~236), que separava o card da aba por 6px (−1
     do margin = 5px visível). Zerar o gap quando há aba faz a aba COLAR no card. */
  .slide .prob-col:has(.prob-cs) { gap: 0; }
  .slide .prob-col:has(.prob-cs) .prob {
    border-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0;
  }
  .slide .prob.fav-verde + .prob-cs {
    border: 2px solid var(--verde); border-top: 1px dashed color-mix(in srgb, var(--verde) 45%, transparent);
  }
  .slide .prob.tom-amarelo + .prob-cs {
    border: 1px solid var(--amarelo); border-top: 1px dashed color-mix(in srgb, var(--amarelo) 45%, transparent);
  }
  .slide .prob.tom-vermelho + .prob-cs {
    border: 1px solid var(--vermelho); border-top: 1px dashed color-mix(in srgb, var(--vermelho) 45%, transparent);
  }

  /* ── CORPO DO SLIDE OCUPA A ALTURA TODA ─────────────────────────────────────
     Os dois slides têm 463px; o rótulo fica no topo e o CORPO (.probs no 1X2,
     .metricas no Gols) ocupa todo o resto (flex:1). A DISTRIBUIÇÃO interna é
     feita no JS (montarCarrosseis): este container resiste a space-between/grow
     do CSS (testado), então o JS mede o respiro que sobra e o injeta como gap
     uniforme entre os blocos — adaptável por jogo, simétrico entre os dois
     slides. Ver app.js → distribuirTrilho(). */
  .slide .probs,
  .slide .metricas { flex: 0 0 auto; display: flex; flex-direction: column; }

  /* ── MÉTRICAS EMPILHADAS — placar/over/btts viram 3 linhas largas. ── */
  .slide .metricas { background: transparent; padding: 0; }
  /* A caixa "Outros resultados" carrega margin-top:26px (regra .caixa do mobile,
     p/ o layout FORA do carrossel) que somaria errado ao gap do distribuirTrilho —
     zero SÓ o da caixa. O margin-top:-26px do TÍTULO fica (é o que faz a pílula
     "OUTROS RESULTADOS" pousar SOBRE a borda — design original); é interno à caixa,
     não atrapalha o cálculo (o JS soma o offsetHeight da caixa, que já reflete o
     título recuado). */
  .slide .metricas .caixa { margin-top: 0; }
  .slide .ref-grid { display: flex; flex-direction: column; gap: 10px; }
  .slide .ref-grid div {
    display: flex; align-items: center; justify-content: space-between;
    text-align: left; padding: 14px 16px;
    border: 1px solid var(--linha); border-radius: 8px;
    background: color-mix(in srgb, var(--papel) 70%, transparent);
  }
  .slide .ref-grid dt { font-size: 12px; margin: 0; }
  .slide .ref-grid dd { font-size: 22px; }
  /* "Placar para o bolão" ganha o MESMO destaque do card do favorito (1X2):
     contorno verde 2px + valor em verde. É só ênfase visual — NÃO selo de valor
     (o slide de Gols é referência, Art. 3); o verde aqui é "olha aqui, é o palpite
     do bolão", não "aposta boa". Padding −1px nos lados pra a borda 2px não somar
     largura e desalinhar com as outras linhas (1px). */
  .slide .ref-grid div.placar-bolao {
    border: 3px solid var(--verde); padding: 12px 14px;
  }
  .slide .ref-grid div.placar-bolao dd {
    color: var(--verde); font-variation-settings: "wght" var(--peso-pesado);
  }
  /* caixa interna translúcida pra o degradê do card transparecer atrás */
  .slide .caixa { background: color-mix(in srgb, var(--papel) 60%, transparent); }

  /* Dots — indicador de quantos slides + qual está ativo (acende ao deslizar). */
  .card-dots { display: flex; justify-content: center; gap: 7px; margin-top: 12px; }
  .card-dots button {
    width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%;
    background: var(--tinta-3); opacity: 0.4; cursor: pointer;
    transition: opacity .2s, transform .2s;
  }
  .card-dots button[aria-current="true"] {
    opacity: 1; transform: scale(1.35); background: var(--tinta);
  }
  .dica-swipe {
    text-align: center; font-size: 11px; color: var(--tinta-3); margin: 6px 0 0;
    text-transform: uppercase; letter-spacing: 0.05em;
  }
  /* Resenha estática (fora do carrossel): filete sutil separando das estatísticas. */
  .card > .analise {
    margin-top: 16px; padding-top: 14px;
    border-top: 1px solid color-mix(in srgb, var(--linha) 70%, transparent);
  }
}

/* No DESKTOP o carrossel não existe: .card-slides é um container normal e os
   indicadores somem. O card volta a empilhar exatamente como era antes. */
@media (min-width: 561px) {
  .card-slides { display: block; }
  .card-dots, .dica-swipe { display: none; }
}

/* 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; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Modal de interesse — futebol brasileiro (HANDOFF §12.2).
   Overlay em cima de tudo; caixa editorial (borda grossa, papel) no centro.
   Mobile primeiro: em tela estreita a caixa gruda embaixo (bottom sheet),
   mais perto do polegar. Nasce `hidden` no HTML — o [hidden] global some com
   ele se o JS não rodar.
   ───────────────────────────────────────────────────────────────────────── */
.modal-fundo {
  position: fixed; inset: 0; z-index: 100;
  background: color-mix(in srgb, var(--tinta) 55%, transparent);
  display: flex; align-items: flex-end; justify-content: center;
}
.modal-caixa {
  position: relative;
  background: var(--papel); border: 3px solid var(--tinta);
  border-radius: var(--raio) var(--raio) 0 0;
  padding: 24px 20px 20px; width: 100%; max-width: 480px;
  max-height: 88vh; overflow-y: auto;
}
.modal-fechar {
  position: absolute; top: 8px; right: 10px;
  border: 0; background: none; cursor: pointer;
  font-size: 26px; line-height: 1; color: var(--tinta-2); padding: 4px;
}
.modal-chapeu {
  margin: 0 0 4px; font-size: 11.5px; color: var(--tinta-2);
  text-transform: uppercase; letter-spacing: 0.08em;
  font-variation-settings: "wght" var(--peso-forte);
}
.modal-caixa h2 {
  margin: 0 0 12px; font-family: var(--fonte-display);
  text-transform: uppercase; font-size: 26px; line-height: 1.1;
}
.modal-caixa p { margin: 0 0 12px; font-size: 15px; line-height: 1.55; }
.modal-caixa input[type="email"] {
  width: 100%; padding: 12px 14px; font-size: 16px; /* 16px evita zoom do iOS */
  font-family: var(--fonte-corpo);
  border: 2px solid var(--tinta); border-radius: 8px;
  background: var(--papel); color: var(--tinta); margin-bottom: 10px;
}
.modal-consentimento {
  display: flex; gap: 8px; align-items: flex-start;
  font-size: 13px; line-height: 1.45; color: var(--tinta-2); cursor: pointer;
}
.modal-consentimento input { margin-top: 2px; flex: none; }
.modal-consentimento a { color: inherit; }
.modal-aviso { font-size: 12px !important; color: var(--tinta-3); margin: 10px 0 14px !important; }
.modal-acoes { display: flex; gap: 10px; }
.modal-acoes button {
  font-family: var(--fonte-corpo); text-transform: uppercase; letter-spacing: 0.05em;
  font-variation-settings: "wght" var(--peso-forte); font-size: 13px;
  padding: 12px 16px; border-radius: 999px; cursor: pointer;
}
.modal-quero { flex: 1; border: 2px solid var(--tinta); background: var(--tinta); color: var(--papel); }
.modal-agora-nao { border: 2px solid var(--linha); background: var(--papel); color: var(--tinta-2); }
.modal-agora-nao:hover { border-color: var(--tinta-2); }

/* Desktop: caixa flutua no centro, cantos inteiros. */
@media (min-width: 561px) {
  .modal-fundo { align-items: center; padding: 20px; }
  .modal-caixa { border-radius: var(--raio); }
}

/* ─── Página de texto (privacidade.html) — mesmo miolo editorial do site ─── */
.pagina-texto {
  max-width: var(--largura-texto); margin: 0 auto; padding: 28px 20px 60px;
  font-size: 15.5px; line-height: 1.6;
}
.pagina-texto h2 {
  font-family: var(--fonte-display); text-transform: uppercase;
  font-size: 30px; margin: 0 0 6px;
}
.pagina-texto h3 {
  font-size: 17px; margin: 26px 0 8px;
  font-variation-settings: "wght" var(--peso-pesado);
}
.pagina-texto p, .pagina-texto li { margin: 0 0 10px; }
.pagina-texto ul, .pagina-texto ol { padding-left: 22px; }
.pagina-texto a { color: var(--tinta); }
.logo-link { text-decoration: none; color: inherit; }
.rodape a { color: inherit; }
.modal-erro { color: var(--vermelho); font-size: 13px; margin: 0 0 10px; }