/* =====================================================================
   Meu Cruzeiro — sistema de design
   ---------------------------------------------------------------------
   Base científica e de marca (detalhes em docs/DESIGN.md):
   • Primeira impressão em ~50 ms (Lindgaard et al., 2006) é guiada por
     complexidade visual baixa/média e prototipicidade (Tuch et al., 2012;
     Reinecke et al., 2013) → layout limpo, estrutura típica de site de clube.
   • Beleza eleva a usabilidade percebida (Tractinsky et al., 2000); facetas
     VisAWI: simplicidade, diversidade, colorido e acabamento
     (Moshagen & Thielsch, 2010) → tokens consistentes, detalhes caprichados.
   • Linhas de texto em torno de 55–70 caracteres (Dyson & Haselgrove, 2001).
   • Cor oficial do Cruzeiro: Pantone 286 C (manual de marca 2021) ≈ #0033A0.
   ===================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Escala do azul Cruzeiro (600 = Pantone 286 C) */
  --az-50: #eef3ff;
  --az-100: #dde7ff;
  --az-200: #bccdff;
  --az-300: #8eaaff;
  --az-400: #5b84f4;
  --az-500: #2a5bd8;
  --az-600: #0033a0;
  --az-700: #00287f;
  --az-800: #001d5e;
  --az-900: #00133f;
  --az-950: #000a26;

  --ouro: #f2c14e;           /* reservado: conquistas, campeão, destaques de marca */
  --vitoria: #16a34a;
  --empate: #8a94a8;
  --derrota: #dc2626;

  /* Superfícies e texto — modo claro (neutros levemente azulados) */
  --fundo: #f3f5fa;
  --superficie: #ffffff;
  --superficie-2: #f6f8fd;
  --borda: #e3e8f2;
  --borda-forte: #cfd7e8;
  --texto: #0b1530;
  --texto-suave: #4d5875;
  --texto-fraco: #5d6781;
  --destaque: #0033a0;       /* cor de links, números e ícones sobre a superfície */
  --celeste: #eaf0ff;        /* realce leve (linha do Cruzeiro, pílulas) */
  /* Os mesmos azuis em canais RGB, para as transparências (rgba) */
  --rgb-azul: 0, 51, 160; --rgb-claro: 91, 132, 244; --rgb-noite: 0, 10, 38; --rgb-escuro: 0, 29, 94;
  --placar-escuro: #1a2a57;

  /* Aliases usados pelo JavaScript e por estilos antigos */
  --azul: var(--az-600);
  --azul-escuro: var(--az-800);
  --azul-noite: var(--az-950);
  --azul-claro: var(--az-400);
  --branco: #ffffff;

  /* Tipografia — escala 1,25 (terça maior) */
  --fonte-titulo: 'Barlow Condensed', 'Arial Narrow', 'Arial Black', sans-serif;
  --fonte: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --t-xs: 0.75rem; --t-sm: 0.875rem; --t-md: 1rem; --t-lg: 1.125rem;
  --t-xl: 1.25rem; --t-2xl: 1.5625rem; --t-3xl: 1.953rem; --t-4xl: 2.441rem;

  /* Espaçamento — grade de 4 px */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 20px; --e-6: 24px;
  --e-8: 32px; --e-10: 40px; --e-12: 48px; --e-16: 64px; --e-20: 80px;

  /* Forma e profundidade */
  --mola: cubic-bezier(0.65, 0, 0.35, 1); --mola-suave: cubic-bezier(0.16, 1, 0.3, 1); --mola-pulo: cubic-bezier(0.34, 1.56, 0.64, 1);
  --raio-sm: 8px; --raio: 14px; --raio-lg: 20px;
  --sombra-1: 0 1px 2px rgba(11, 21, 48, 0.05), 0 1px 1px rgba(11, 21, 48, 0.03);
  --sombra: 0 1px 2px rgba(11, 21, 48, 0.04), 0 6px 16px -6px rgba(11, 21, 48, 0.10);
  --sombra-3: 0 2px 4px rgba(11, 21, 48, 0.04), 0 18px 36px -12px rgba(var(--rgb-azul), 0.28);
  --anel: 0 0 0 3px var(--az-300);
  --transicao: 180ms cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Gráficos (paleta validada para daltonismo) */
  --serie-pro: #1d4ed8;
  --serie-contra: #d97706;

  /* Textura de "grão" discreta para os fundos azuis (acabamento) */
  --grao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  --navbar-h: 64px;
  color-scheme: light;
}

/* Modo escuro: superfícies em azul-noite, destaque em azul claro para manter contraste AA */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fundo: #050b1c; --superficie: #0b1530; --superficie-2: #0f1b3b; --borda: #1b2749; --borda-forte: #26345c;
    --texto: #eaf0ff; --texto-suave: #a7b3d0; --texto-fraco: #8390b0; --destaque: #8eaaff; --celeste: #14224a;
    --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.3); --sombra: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 24px -10px rgba(0, 0, 0, 0.6);
    --sombra-3: 0 2px 4px rgba(0, 0, 0, 0.3), 0 20px 40px -14px rgba(0, 0, 0, 0.7);
    --serie-pro: #5b8cff; --serie-contra: #b87a12; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fundo: #050b1c; --superficie: #0b1530; --superficie-2: #0f1b3b; --borda: #1b2749; --borda-forte: #26345c;
  --texto: #eaf0ff; --texto-suave: #a7b3d0; --texto-fraco: #8390b0; --destaque: #8eaaff; --celeste: #14224a;
  --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.3); --sombra: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 24px -10px rgba(0, 0, 0, 0.6);
  --sombra-3: 0 2px 4px rgba(0, 0, 0, 0.3), 0 20px 40px -14px rgba(0, 0, 0, 0.7);
  --serie-pro: #5b8cff; --serie-contra: #b87a12; color-scheme: dark;
}

/* Futebol feminino: a mesma identidade, em azul celeste (o "Celeste", apelido do Cruzeiro).
   Troca a escala de azuis inteira; cabeçalhos, botões, gráficos e destaques acompanham. */
:root[data-modalidade="feminino"] {
  --az-50: #eef9ff; --az-100: #d8f1fe; --az-200: #b2e3fc; --az-300: #7dcef7; --az-400: #3fb2ec; --az-500: #1494d6;
  --az-600: #0a77b6; --az-700: #0a5f93; --az-800: #0b4a73; --az-900: #0a3352; --az-950: #051c30;
  --rgb-azul: 10, 119, 182; --rgb-claro: 63, 178, 236; --rgb-noite: 5, 28, 48; --rgb-escuro: 11, 74, 115;
  --fundo: #f2f7fa; --destaque: #0a6aa3; --celeste: #e2f4fd; --serie-pro: #0a77b6; --placar-escuro: #0f3a55;
}
@media (prefers-color-scheme: dark) {
  :root[data-modalidade="feminino"]:not([data-theme="light"]) {
    --fundo: #04121c; --superficie: #08202f; --superficie-2: #0b2839; --borda: #133548; --borda-forte: #1c4459;
    --texto: #e8f6fd; --texto-suave: #a3c1d1; --texto-fraco: #7f9fb1; --destaque: #7dcef7; --celeste: #0d2d40; --serie-pro: #3fb2ec;
  }
}
:root[data-modalidade="feminino"][data-theme="dark"] {
  --fundo: #04121c; --superficie: #08202f; --superficie-2: #0b2839; --borda: #133548; --borda-forte: #1c4459;
  --texto: #e8f6fd; --texto-suave: #a3c1d1; --texto-fraco: #7f9fb1; --destaque: #7dcef7; --celeste: #0d2d40; --serie-pro: #3fb2ec;
}

/* Vôlei (Sada Cruzeiro): azul-marinho com dourado, de time multicampeão.
   Cabeçalhos com brilho dourado; destaques e números em dourado no modo escuro. */
:root[data-modalidade="volei"] {
  --az-50: #f3f5fb; --az-100: #e2e8f4; --az-200: #c3cee6; --az-300: #9fb3dd; --az-400: #7b97d6; --az-500: #2f4f9a;
  --az-600: #1d3a7a; --az-700: #172f63; --az-800: #11244d; --az-900: #0b1838; --az-950: #060e24;
  --rgb-azul: 29, 58, 122; --rgb-claro: 242, 193, 78; --rgb-noite: 6, 14, 36; --rgb-escuro: 17, 36, 77;
  --fundo: #f4f5f9; --destaque: #1d3a7a; --celeste: #fbf2dc; --serie-pro: #1d3a7a; --serie-contra: #c98a12; --placar-escuro: #1b2c55;
}
@media (prefers-color-scheme: dark) {
  :root[data-modalidade="volei"]:not([data-theme="light"]) {
    --fundo: #050a18; --superficie: #0b1328; --superficie-2: #0f1a33; --borda: #1d2945; --borda-forte: #283656;
    --texto: #eef1f8; --texto-suave: #aeb8cf; --texto-fraco: #8590aa; --destaque: #f2c14e; --celeste: #1f1a0c; --serie-pro: #f2c14e; --serie-contra: #7b97d6;
  }
}
:root[data-modalidade="volei"][data-theme="dark"] {
  --fundo: #050a18; --superficie: #0b1328; --superficie-2: #0f1a33; --borda: #1d2945; --borda-forte: #283656;
  --texto: #eef1f8; --texto-suave: #aeb8cf; --texto-fraco: #8590aa; --destaque: #f2c14e; --celeste: #1f1a0c; --serie-pro: #f2c14e; --serie-contra: #7b97d6;
}
:root[data-modalidade="volei"] .selo-modalidade { background: var(--ouro); color: #1a1405; }

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--navbar-h) + 16px); }
body {
  font-family: var(--fonte); font-size: var(--t-md); line-height: 1.55; color: var(--texto); background: var(--fundo);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  font-feature-settings: 'cv11', 'ss01';
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, select { font: inherit; }
p { max-width: 68ch; }
::selection { background: var(--az-600); color: #fff; }
:focus-visible { outline: none; box-shadow: var(--anel); border-radius: var(--raio-sm); }
.container { width: min(1200px, 100% - 40px); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vazio { color: var(--texto-suave); font-size: var(--t-sm); }
.nota-dados { margin-top: var(--e-6); font-size: var(--t-xs); color: var(--texto-fraco); }

/* Números sempre alinhados (placar, tabela, estatísticas) */
.placar, .placar-grande, .tabela td, .stat b, .contagem b, .jd-dia, .chave-time b, .perna, .ranking li b, .jogador-stats b { font-variant-numeric: tabular-nums; }

/* ---------- 3. Tipografia utilitária ---------- */
.hero-tag, .rotulo {
  display: inline-flex; align-items: center; gap: var(--e-2);
  font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
}
.hero-tag { color: var(--ouro); margin-bottom: var(--e-4); }
.hero-tag::before { content: ''; width: 24px; height: 2px; background: currentColor; border-radius: 2px; }
.rotulo { opacity: 0.8; }

/* ---------- 4. Navbar ---------- */
.navbar {
  position: sticky; top: 0; z-index: 50; color: #fff;
  background: rgba(var(--rgb-noite), 0.95);
  backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.navbar .container { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); height: var(--navbar-h); }
.brand { display: flex; align-items: center; gap: var(--e-3); color: #fff; flex-shrink: 0; }
.brand img { width: 38px; height: 38px; object-fit: contain; }
.brand strong { font-family: var(--fonte-titulo); font-size: 1.45rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1; }
.selo-modalidade { align-self: center; padding: 3px 8px; border-radius: 999px; background: var(--az-400); color: var(--az-950); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.2; }
.nav-direita { display: flex; align-items: center; gap: var(--e-2); min-width: 0; }
.nav-links { display: flex; gap: 2px; list-style: none; overflow-x: auto; scrollbar-width: none; }
.nav-links a {
  position: relative; display: block; white-space: nowrap; color: rgba(255, 255, 255, 0.72);
  font-weight: 600; font-size: var(--t-sm); padding: 10px 12px; border-radius: var(--raio-sm); transition: color var(--transicao);
}
.nav-links a::after { /* indicador da página atual */
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; border-radius: 2px;
  background: #fff; transform: scaleX(0); transition: transform var(--transicao);
}
.nav-links a:hover { color: #fff; }
.nav-links a.ativo { color: #fff; }
.nav-links a.ativo::after { transform: scaleX(1); }
.nav-links .curto { display: none; }

.tema-btn {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.06); color: #fff; transition: background var(--transicao);
}
.tema-btn:hover { background: rgba(255, 255, 255, 0.14); }
.tema-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
/* Sol e lua no mesmo lugar: um gira e some enquanto o outro entra girando */
#tema svg { grid-area: 1 / 1; transition: transform 550ms var(--mola-pulo), opacity 300ms ease; }
:root:not([data-theme="dark"]) #tema .lua { opacity: 0; transform: rotate(-100deg) scale(0.3); }
:root[data-theme="dark"] #tema .sol { opacity: 0; transform: rotate(100deg) scale(0.3); }
#tema.pulso { animation: pulso-tema 600ms ease; }
@keyframes pulso-tema { 0% { box-shadow: 0 0 0 0 rgba(242, 193, 78, 0.55); } 100% { box-shadow: 0 0 0 14px rgba(242, 193, 78, 0); } }
.instalar-btn[hidden] { display: none; }
.menu-btn { display: none; }
/* Ícone ☰ que vira X */
.hamb { position: relative; display: block; width: 18px; height: 14px; }
.hamb i { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor; transition: top 300ms var(--mola), transform 300ms var(--mola), opacity 180ms ease; }
.hamb i:nth-child(1) { top: 0; } .hamb i:nth-child(2) { top: 6px; } .hamb i:nth-child(3) { top: 12px; }
.menu-btn[aria-expanded="true"] .hamb i:nth-child(1) { top: 6px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .hamb i:nth-child(2) { opacity: 0; transform: scaleX(0.2); }
.menu-btn[aria-expanded="true"] .hamb i:nth-child(3) { top: 6px; transform: rotate(-45deg); }
.menu-btn[aria-expanded="true"] { background: rgba(255, 255, 255, 0.16); }
/* Fundo escurecido atrás do menu aberto */
.menu-fundo { position: fixed; inset: 0; z-index: 49; background: rgba(0, 6, 20, 0.5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; transition: opacity 320ms ease; }
.menu-fundo.visivel { opacity: 1; }

.temporada-sel select {
  appearance: none; -webkit-appearance: none; height: 38px; padding: 0 28px 0 12px; border-radius: 10px; cursor: pointer;
  font-weight: 700; font-size: var(--t-sm); color: #fff; border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 10px center / 10px no-repeat;
}
.temporada-sel select option { color: #0b1530; }

@media (display-mode: standalone) { .navbar { padding-top: env(safe-area-inset-top); } }

/* ---------- 5. Botões, chips, badges ---------- */
.botoes { display: flex; gap: var(--e-3); flex-wrap: wrap; align-items: center; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2); min-height: 46px;
  padding: 0 22px; border-radius: 12px; border: 1.5px solid transparent; cursor: pointer;
  font-weight: 700; font-size: 0.95rem; letter-spacing: 0.005em; white-space: nowrap;
  transition: transform var(--transicao), background var(--transicao), box-shadow var(--transicao), border-color var(--transicao);
}
.btn:active { transform: scale(0.97); }
/* Toque: botões e cards "afundam" de leve */
.tema-btn { transition: background var(--transicao), transform 160ms var(--mola-pulo); }
.tema-btn:active, .chips-filtro button:active, .rede:active, .btn-compartilhar-discreto:active { transform: scale(0.92); }
a.card:active { transform: translateY(0) scale(0.99); }
.btn .ic { width: 18px; height: 18px; }
.btn-primario { background: #fff; color: var(--az-600); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 8px 20px -8px rgba(0, 0, 0, 0.5); }
.btn-contorno { border-color: rgba(255, 255, 255, 0.35); color: #fff; }
.btn-contorno:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.6); }
.btn-azul { background: var(--az-600); color: #fff; box-shadow: 0 8px 18px -10px rgba(var(--rgb-azul), 0.9); }
.btn-contorno-azul { border-color: var(--borda-forte); color: var(--destaque); background: var(--superficie); }
.btn-contorno-azul:hover { border-color: var(--destaque); background: var(--celeste); }

.chip {
  display: inline-flex; align-items: center; gap: 4px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em;
  padding: 3px 9px; border-radius: 999px; background: var(--celeste); color: var(--destaque); white-space: nowrap;
}
.chip.ao-vivo { background: var(--derrota); color: #fff; animation: pulsar 1.6s ease-in-out infinite; }
.chip-v { background: color-mix(in srgb, var(--vitoria) 16%, transparent); color: var(--vitoria); }
.chip-d { background: color-mix(in srgb, var(--derrota) 14%, transparent); color: var(--derrota); }
:root[data-theme="dark"] .chip-v { color: #4ade80; } :root[data-theme="dark"] .chip-d { color: #f87171; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .chip-v { color: #4ade80; } :root:not([data-theme="light"]) .chip-d { color: #f87171; } }
@keyframes pulsar { 50% { opacity: 0.55; } }

.badge {
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0;
  font-weight: 800; font-size: 0.72rem; color: #fff; letter-spacing: 0;
}
.badge.V { background: var(--vitoria); } .badge.E { background: var(--empate); } .badge.D { background: var(--derrota); }

.cartao { display: inline-block; width: 12px; height: 17px; border-radius: 2.5px; flex-shrink: 0; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); }
.cartao.amarelo { background: linear-gradient(160deg, #fde047, #facc15); } .cartao.vermelho { background: linear-gradient(160deg, #f87171, #dc2626); }

/* Ícones SVG */
.ic { width: 1.1em; height: 1.1em; display: inline-block; vertical-align: -0.18em; flex-shrink: 0; }
.ic.mini { width: 11px; height: 11px; }

/* ---------- 6. Cards ---------- */
.card {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra-1);
}
a.card { transition: transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao); }

/* ---------- 7. Cabeçalhos em azul (hero e páginas) ---------- */
/* Fundo com o azul oficial, luz vinda do alto, listras de gramado e grão sutil */
.hero, .page-header, .partida-header, .clube, .erro-404 {
  position: relative; isolation: isolate; color: #fff; overflow: hidden;
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(var(--rgb-claro), 0.55) 0%, transparent 55%),
    radial-gradient(90% 80% at 0% 110%, rgba(var(--rgb-noite), 0.9) 0%, transparent 60%),
    linear-gradient(160deg, var(--az-600) 0%, var(--az-800) 55%, var(--az-950) 100%);
}
.hero::before, .page-header::before, .partida-header::before, .erro-404::before { /* grão + listras */
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--grao), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.022) 0 90px, transparent 90px 180px);
  opacity: 0.9; mix-blend-mode: soft-light;
}

.hero { background-image:
    linear-gradient(100deg, rgba(var(--rgb-noite), 0.94) 0%, rgba(var(--rgb-escuro), 0.82) 50%, rgba(var(--rgb-azul), 0.45) 100%),
    radial-gradient(120% 90% at 85% -10%, rgba(var(--rgb-claro), 0.55) 0%, transparent 55%),
    linear-gradient(160deg, var(--az-600) 0%, var(--az-800) 55%, var(--az-950) 100%);
  background-position: center; }

.hero .container {
  display: grid; grid-template-columns: 1.25fr 1fr; gap: var(--e-10); align-items: center;
  padding: clamp(56px, 8vw, 104px) 0 clamp(120px, 12vw, 150px);
}
.hero h1 {
  font-family: var(--fonte-titulo); font-weight: 800; text-transform: uppercase; line-height: 0.9; letter-spacing: -0.005em;
  font-size: clamp(3.2rem, 8vw, 6.4rem); text-wrap: balance;
}
.hero h1 span { display: block; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.85); }
.hero h1 b { font-weight: inherit; } /* "Sada" na mesma linha de "Cruzeiro" (vôlei) */
.hero p { max-width: 46ch; margin: var(--e-5) 0 var(--e-8); color: rgba(255, 255, 255, 0.8); font-size: var(--t-lg); }

/* Escudo em destaque */
.hero-escudo {
  justify-self: center; width: min(300px, 62vw); position: relative; z-index: 1;
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.45)); animation: flutuar 7s ease-in-out infinite;
}
.hero .container > img.hero-escudo { outline: none; }

.hero .container { position: relative; }
@keyframes flutuar { 50% { transform: translateY(-10px); } }

/* Corte diagonal na base dos cabeçalhos: energia de esporte, sem poluir */
.hero, .page-header { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 36px), 0 100%); }

.page-header { padding: clamp(48px, 7vw, 80px) 0 clamp(64px, 8vw, 96px); }
.page-header h1 {
  font-family: var(--fonte-titulo); font-weight: 800; text-transform: uppercase; line-height: 0.95;
  font-size: clamp(2.6rem, 6.5vw, 4.6rem); text-wrap: balance;
}
.page-header p { margin-top: var(--e-3); color: rgba(255, 255, 255, 0.78); font-size: var(--t-lg); }
.page-header .hero-tag { margin-bottom: var(--e-3); }
/* Masculino | Feminino | Vôlei: cada texto e seção aparece só na sua modalidade
   (.so-masc, .so-fem, .so-volei; .so-futebol = masculino e feminino) */
:root:not([data-modalidade="feminino"]) .so-fem, :root:not([data-modalidade="volei"]) .so-volei,
:root[data-modalidade] .so-masc, :root[data-modalidade="volei"] .so-futebol, :root:not([data-modalidade]) .nao-masc { display: none !important; }
.seletor-modalidade { margin-top: var(--e-6); }
.hero .seletor-modalidade { margin: 0 0 var(--e-6); }
.hero .seletor-modalidade, .page-header .seletor-modalidade { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.18); box-shadow: none; }
.hero .seletor-modalidade button, .page-header .seletor-modalidade button { color: rgba(255, 255, 255, 0.78); padding: 9px 22px; }
.hero .seletor-modalidade button:hover, .page-header .seletor-modalidade button:hover { color: #fff; }
.hero .seletor-modalidade button.ativo, .page-header .seletor-modalidade button.ativo { color: #fff; }

.faixa-trofeus {
  width: 100%; margin-top: var(--e-10);
  filter: grayscale(1) contrast(4); mix-blend-mode: screen; opacity: 0.8;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

/* Evolução do escudo, no banner da página de História (mesmo lugar da faixa de troféus) */
.faixa-escudos {
  list-style: none; padding: 0; margin: var(--e-10) 0 0;
  display: flex; justify-content: space-between; align-items: flex-end; gap: var(--e-3);
}
.faixa-escudos li { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: var(--e-2); }
.faixa-escudos img { width: 100%; max-width: 104px; max-height: 118px; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35)); }
.faixa-escudos span { font-family: var(--fonte-titulo, inherit); font-weight: 700; font-size: var(--t-sm); color: rgba(255, 255, 255, 0.8); letter-spacing: 0.04em; }
@media (max-width: 600px) {
  .faixa-escudos { gap: 4px; margin-top: var(--e-6); }
  .faixa-escudos span { font-size: 10px; }
}

.voltar { display: inline-flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, 0.75); font-weight: 600; font-size: var(--t-sm); transition: color var(--transicao); }
.voltar:hover { color: #fff; }

/* ---------- 8. Seções ---------- */
.secao { padding: clamp(48px, 7vw, 88px) 0; }
.secao-titulo { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--e-4); margin-bottom: var(--e-6); flex-wrap: wrap; }
.secao-titulo small {
  display: flex; align-items: center; gap: var(--e-2); margin-bottom: var(--e-2);
  font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--destaque);
}
.secao-titulo small::before { content: ''; width: 20px; height: 2px; border-radius: 2px; background: currentColor; }
.secao-titulo h2 {
  font-family: var(--fonte-titulo); font-weight: 800; text-transform: uppercase; line-height: 0.95;
  font-size: clamp(2rem, 4.2vw, 2.8rem); letter-spacing: 0.005em;
}
.link-seta { display: inline-flex; align-items: center; gap: 6px; color: var(--destaque); font-weight: 700; font-size: var(--t-sm); }
.link-seta:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- 9. Destaques da home (próximo jogo / último resultado) ---------- */
.destaques { display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--e-6); margin-top: -104px; position: relative; z-index: 2; }
.card-destaque { padding: var(--e-8); position: relative; overflow: hidden; border-radius: var(--raio-lg); box-shadow: var(--sombra-3); }
.card-destaque.escuro {
  color: #fff; border: 1px solid rgba(255, 255, 255, 0.12);
  background:
    radial-gradient(80% 70% at 100% 0%, rgba(var(--rgb-claro), 0.45), transparent 60%),
    linear-gradient(150deg, var(--az-600), var(--az-800) 70%);
}
.confronto { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--e-3); margin: var(--e-6) 0; text-align: center; position: relative; z-index: 1; }
.time { display: flex; flex-direction: column; align-items: center; gap: var(--e-2); min-width: 0; }
.time img { width: 76px; height: 76px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.18)); }
.time span { font-weight: 700; font-size: var(--t-lg); line-height: 1.2; }
.placar-grande { font-family: var(--fonte-titulo); font-weight: 800; font-size: clamp(3rem, 6vw, 4rem); line-height: 1; letter-spacing: 0.02em; white-space: nowrap; }
.vs { font-family: var(--fonte-titulo); font-weight: 700; font-size: 1.8rem; opacity: 0.45; letter-spacing: 0.08em; }
.info-linha { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-5); justify-content: center; font-size: var(--t-sm); opacity: 0.9; position: relative; z-index: 1; }
.info-linha span { display: inline-flex; align-items: center; gap: 6px; }
.info-linha .ic { opacity: 0.75; }
.contagem { display: flex; justify-content: center; gap: var(--e-2); margin-top: var(--e-5); position: relative; z-index: 1; }
.contagem div {
  min-width: 70px; padding: 10px 12px; text-align: center; border-radius: 12px;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12);
}
.contagem b { display: block; font-family: var(--fonte-titulo); font-weight: 800; font-size: 2rem; line-height: 1; }
.contagem small { font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; opacity: 0.7; }
.card-destaque:not(.escuro) .info-linha { color: var(--texto-suave); }

/* ---------- 10. Números da temporada ---------- */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: var(--e-3); }
.stat { padding: var(--e-5) var(--e-4); text-align: left; position: relative; overflow: hidden; }
.stat::before { content: ''; position: absolute; left: 0; top: 16px; bottom: 16px; width: 3px; border-radius: 0 3px 3px 0; background: var(--az-600); opacity: 0.9; }
.stat b { display: block; font-family: var(--fonte-titulo); font-weight: 800; font-size: 2.6rem; line-height: 1; color: var(--destaque); letter-spacing: 0.01em; white-space: nowrap; }
.stat b.longo { font-size: 2.1rem; }
.stat span { display: block; margin-top: 6px; color: var(--texto-suave); font-weight: 600; font-size: var(--t-sm); }
.stat .badge { display: inline-grid; margin: 0; color: #fff; }
.stat-det { display: block; font-size: var(--t-xs); color: var(--texto-fraco); margin-top: 2px; }
.forma { display: flex; gap: 5px; margin-top: 2px; }
.stat .forma { gap: 4px; flex-wrap: wrap; }
.stat .forma .badge { width: 22px; height: 22px; border-radius: 6px; font-size: 0.66rem; }
.stat .forma { min-height: 42px; align-items: center; }

/* ---------- 11. Lista de jogos (card com bloco de data) ---------- */
.lista-jogos { display: grid; gap: var(--e-2); }
.jogo {
  position: relative; display: grid; grid-template-columns: 104px minmax(0, 1fr) 230px; align-items: center; gap: var(--e-5);
  padding: var(--e-3) var(--e-5) var(--e-3) var(--e-4); overflow: hidden;
}
.jogo::before { /* faixa com a cor do resultado: leitura instantânea */
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--borda-forte);
}
.jogo.res-V::before { background: var(--vitoria); } .jogo.res-E::before { background: var(--empate); } .jogo.res-D::before { background: var(--derrota); }
.jogo.res-vivo::before { background: var(--derrota); animation: pulsar 1.6s infinite; }
.jogo-data { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: end; padding-right: var(--e-4); border-right: 1px solid var(--borda); }
.jd-dia { grid-row: 1 / 3; font-family: var(--fonte-titulo); font-weight: 800; font-size: 2.3rem; line-height: 0.85; color: var(--texto); }
.jd-mes { font-size: var(--t-xs); font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--destaque); line-height: 1; align-self: end; }
.jd-sem { grid-column: 2; font-size: 0.72rem; font-weight: 600; color: var(--texto-fraco); text-transform: capitalize; line-height: 1.2; white-space: nowrap; }
.jogo-times { display: grid; grid-template-columns: minmax(0, 1fr) 100px minmax(0, 1fr); align-items: center; gap: var(--e-3); }
.jogo-times .lado { display: flex; align-items: center; gap: var(--e-3); font-weight: 600; min-width: 0; }
.jogo-times .lado span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jogo-times .lado:first-child { justify-content: flex-end; text-align: right; }
.jogo-times img { width: 32px; height: 32px; object-fit: contain; flex-shrink: 0; }
.jogo-times .cruzeiro { color: var(--destaque); font-weight: 800; }
/* Placar estilo "painel de estádio" */
.placar {
  display: inline-flex; flex-direction: column; align-items: center; justify-self: center; justify-content: center; line-height: 1;
  min-width: 88px; padding: 7px 12px; border-radius: 10px;
  font-family: var(--fonte-titulo); font-weight: 800; font-size: 1.7rem; letter-spacing: 0.04em;
  background: var(--az-950); color: #fff; box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.06), var(--sombra-1);
}
:root[data-theme="dark"] .placar { background: var(--placar-escuro); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .placar { background: var(--placar-escuro); } }
.placar.futuro {
  font-size: 1.15rem; padding: 8px 12px; color: var(--destaque); background: var(--celeste); box-shadow: none; letter-spacing: 0.02em;
}
.pen-placar { font-family: var(--fonte); font-size: 0.6rem; font-weight: 700; color: rgba(255, 255, 255, 0.7); letter-spacing: 0.02em; margin-top: 3px; }
.jogo-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; text-align: right; font-size: var(--t-xs); color: var(--texto-fraco); }
.jm-chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.jm-local { line-height: 1.35; }
.jogo-meta .badge { width: 22px; height: 22px; font-size: 0.66rem; display: none; } /* a faixa lateral já indica o resultado */

/* ---------- 12. Filtros, abas e chips ---------- */
.filtros { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; justify-content: space-between; margin: var(--e-8) 0 var(--e-6); }
.abas { display: inline-flex; gap: 2px; padding: 4px; border-radius: 12px; background: var(--superficie); border: 1px solid var(--borda); box-shadow: var(--sombra-1); }
.abas button {
  border: 0; background: none; cursor: pointer; padding: 9px 16px; border-radius: 9px;
  font-weight: 600; font-size: var(--t-sm); color: var(--texto-suave); transition: color var(--transicao), background var(--transicao);
}
.abas button:hover { color: var(--texto); }
.abas button.ativo { background: var(--az-600); color: #fff; box-shadow: 0 4px 10px -4px rgba(var(--rgb-azul), 0.7); }
.abas-rolagem { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.abas-rolagem button { white-space: nowrap; }
/* Logo da competição nas abas (no escuro e no botão azul ganha um contorno claro para não sumir) */
.abas button:has(.logo-comp) { display: inline-flex; align-items: center; gap: 8px; }
.logo-comp { height: 22px; width: auto; flex: none; transition: filter var(--transicao); }
.abas button.ativo .logo-comp { filter: drop-shadow(0 0 0.6px #fff) drop-shadow(0 0 0.6px #fff); }
/* Logo branca (Supercopa de vôlei): no tema claro, fora do botão azul, fica escura para aparecer */
:root[data-theme="light"] .abas button:not(.ativo) .logo-comp[src*="v.supercopa"] { filter: invert(1) brightness(0.35); }
:root[data-theme="dark"] .logo-comp { filter: drop-shadow(0 0 0.6px rgba(255, 255, 255, 0.85)) drop-shadow(0 0 0.6px rgba(255, 255, 255, 0.85)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo-comp { filter: drop-shadow(0 0 0.6px rgba(255, 255, 255, 0.85)) drop-shadow(0 0 0.6px rgba(255, 255, 255, 0.85)); } }
.filtros select {
  appearance: none; -webkit-appearance: none; cursor: pointer; height: 44px; padding: 0 40px 0 16px; border-radius: 12px;
  font-weight: 600; font-size: var(--t-sm); color: var(--texto); border: 1px solid var(--borda); background-color: var(--superficie);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e7891' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 12px; box-shadow: var(--sombra-1);
}
.chips-filtro { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-bottom: var(--e-6); }
.chips-filtro button {
  cursor: pointer; padding: 8px 14px; border-radius: 999px; font-weight: 600; font-size: var(--t-sm);
  border: 1px solid var(--borda); background: var(--superficie); color: var(--texto-suave); transition: all var(--transicao);
}
.chips-filtro button:hover { border-color: var(--borda-forte); color: var(--texto); }
.chips-filtro button.ativo { background: var(--az-600); border-color: var(--az-600); color: #fff; }

/* Título de grupo (mês, categoria de títulos, posição do elenco) */
.grupo-mes { margin-bottom: var(--e-10); }
.grupo-mes h3 {
  display: flex; align-items: center; gap: var(--e-3); margin-bottom: var(--e-4);
  font-family: var(--fonte-titulo); font-weight: 800; text-transform: uppercase; font-size: 1.45rem; letter-spacing: 0.02em; color: var(--texto);
}
.grupo-mes h3::after { content: ''; flex: 1; height: 1px; background: var(--borda); }
.grupo-mes h3 small { font-family: var(--fonte); font-size: var(--t-xs); font-weight: 700; color: var(--texto-fraco); background: var(--superficie-2); padding: 2px 8px; border-radius: 999px; }

/* ---------- 13. Seção "A Raposa de Minas" e página de história ---------- */
.clube { background:
    radial-gradient(120% 90% at 100% 100%, rgba(var(--rgb-claro), 0.35) 0%, transparent 55%),
    linear-gradient(110deg, rgba(var(--rgb-noite), 0.96) 30%, rgba(var(--rgb-escuro), 0.88) 70%, rgba(var(--rgb-azul), 0.7)),
    var(--az-950); }
.clube::before { /* raposa gigante e sutil ao fundo */
  content: ''; position: absolute; right: -60px; bottom: -80px; width: 540px; aspect-ratio: 1120 / 1080; z-index: -1;
  background: url('../assets/images/raposa.svg') center / contain no-repeat; filter: brightness(0) invert(1); opacity: 0.06; pointer-events: none;
}
.clube-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--e-12); align-items: center; }
.clube .secao-titulo h2 { color: #fff; }
.clube .secao-titulo small { color: var(--ouro); }
.clube p { color: rgba(255, 255, 255, 0.8); margin-top: var(--e-4); font-size: 1.05rem; }
.titulos { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e-3); }
.titulo {
  padding: var(--e-5); border-radius: var(--raio); background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12); backdrop-filter: blur(6px); transition: background var(--transicao);
}
.titulo:hover { background: rgba(255, 255, 255, 0.1); }
.titulo b { font-family: var(--fonte-titulo); font-weight: 800; font-size: 2.8rem; line-height: 1; color: var(--ouro); }
.titulo span { display: block; margin-top: 4px; font-size: var(--t-sm); color: rgba(255, 255, 255, 0.82); }
.idolos { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.idolos span {
  padding: 9px 16px; border-radius: 999px; font-weight: 600; font-size: var(--t-sm);
  background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.16);
}

.linha-tempo { list-style: none; position: relative; display: grid; gap: var(--e-4); }
.linha-tempo::before {
  content: ''; position: absolute; left: 96px; top: 12px; bottom: 12px; width: 2px; border-radius: 2px;
  background: linear-gradient(var(--az-600), var(--az-300), var(--az-600));
}
.marco { display: grid; grid-template-columns: 80px 1fr; gap: 44px; align-items: start; position: relative; }
.marco::before {
  content: ''; position: absolute; left: 89px; top: 20px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--superficie); border: 3px solid var(--destaque); box-shadow: 0 0 0 4px var(--fundo);
}
.marco .ano { font-family: var(--fonte-titulo); font-weight: 800; font-size: 1.5rem; line-height: 1; color: var(--destaque); text-align: right; padding-top: 14px; }
.marco .card { padding: var(--e-5) var(--e-6); transition: transform var(--transicao), box-shadow var(--transicao); }
.marco h3 { font-family: var(--fonte-titulo); font-weight: 800; text-transform: uppercase; font-size: 1.4rem; letter-spacing: 0.01em; margin-bottom: 4px; }
.marco p { color: var(--texto-suave); }

/* ---------- 14. Títulos ---------- */
.trofeus-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--e-4); }
.trofeu { padding: var(--e-6); position: relative; overflow: hidden; }
.trofeu::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--ouro), #ffe08a); }
.trofeu b { font-family: var(--fonte-titulo); font-weight: 800; font-size: 3.2rem; line-height: 1; color: var(--destaque); }
.grupo-mes .trofeu h3 { display: block; margin: 6px 0 var(--e-3); font-family: var(--fonte); font-weight: 700; text-transform: none; font-size: 1.02rem; letter-spacing: 0; color: var(--texto); }
.grupo-mes .trofeu h3::after { content: none; }
.anos { display: flex; flex-wrap: wrap; gap: 6px; }
.anos span { padding: 4px 10px; border-radius: 8px; font-weight: 700; font-size: var(--t-sm); background: var(--celeste); color: var(--destaque); font-variant-numeric: tabular-nums; }

/* ---------- 15. Página da partida ---------- */
.partida-header { padding: clamp(32px, 5vw, 56px) 0 clamp(40px, 6vw, 64px); text-align: center; }
.partida-header .confronto { max-width: 760px; margin: var(--e-6) auto; }
.partida-header .time img { width: 104px; height: 104px; }
.partida-header .time span { font-size: var(--t-xl); font-family: var(--fonte-titulo); font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; }
.partida-header .placar-grande { font-size: clamp(3.6rem, 10vw, 6rem); text-shadow: 0 6px 24px rgba(0, 0, 0, 0.3); }
.partida-header .chip { background: rgba(255, 255, 255, 0.12); color: #fff; }
.partida-header .chip.ao-vivo { background: var(--derrota); }
.atualizacao { margin: var(--e-3) auto 0; font-size: var(--t-xs); opacity: 0.7; }
.decisao {
  display: inline-flex; align-items: center; gap: var(--e-2); margin: 0 auto var(--e-4); padding: 8px 16px;
  border-radius: 999px; font-weight: 700; font-size: var(--t-sm); background: rgba(255, 255, 255, 0.12);
}
.decisao.passou { background: rgba(22, 163, 74, 0.9); } .decisao.caiu { background: rgba(220, 38, 38, 0.9); }

.detalhes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-5); margin-top: var(--e-8); }
.bloco { padding: var(--e-6); }
.bloco.largo { grid-column: 1 / -1; }
.bloco h3 {
  display: flex; align-items: center; gap: 10px; margin-bottom: var(--e-5);
  font-family: var(--fonte-titulo); font-weight: 800; text-transform: uppercase; font-size: 1.45rem; letter-spacing: 0.02em;
}
.bloco h3 .ic, h3 .ic { width: 22px; height: 22px; color: var(--destaque); }
h3 .cartao { width: 14px; height: 20px; }
.eventos { list-style: none; display: grid; gap: var(--e-3); }
.eventos li { display: grid; grid-template-columns: 52px 24px 1fr; gap: var(--e-3); align-items: start; font-size: 0.94rem; }
.eventos .min { font-family: var(--fonte-titulo); font-weight: 800; font-size: 1.15rem; color: var(--destaque); line-height: 1.3; font-variant-numeric: tabular-nums; }
.eventos small { display: block; margin-top: 1px; color: var(--texto-fraco); font-size: 0.8rem; }
.eventos .cartao { margin-top: 3px; }
.ev-ic { display: grid; place-items: center; height: 22px; color: var(--texto-fraco); }
.ev-ic .ic { width: 18px; height: 18px; }
.entrou-txt { color: var(--vitoria); } .saiu-txt { color: var(--derrota); }
.entrou-txt .ic, .saiu-txt .ic, .entrou .ic, .saiu .ic { width: 9px; height: 9px; vertical-align: 1px; }
.entrou { font-style: normal; color: var(--vitoria); }

.estatistica { margin-bottom: var(--e-4); }
.estatistica .valores { display: flex; justify-content: space-between; align-items: baseline; font-weight: 800; font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.estatistica .valores span:nth-child(2) { font-weight: 500; font-size: var(--t-sm); color: var(--texto-suave); }
.barra { display: flex; gap: 4px; height: 6px; margin-top: 7px; }
.barra i { display: block; border-radius: 999px; background: var(--az-600); min-width: 2px; }
.barra i + i { background: var(--borda-forte); }
:root[data-theme="dark"] .barra i:first-child { background: var(--az-400); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .barra i:first-child { background: var(--az-400); } }

.ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--e-5) var(--e-6); }
.ficha div small { display: block; margin-bottom: 2px; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--texto-fraco); }
.ficha div strong { font-size: var(--t-md); font-weight: 600; }

.escalacoes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-6); }
.escalacao h4 { display: flex; align-items: center; gap: 10px; margin-bottom: var(--e-3); font-size: var(--t-lg); }
.escalacao h4 img { width: 28px; height: 28px; object-fit: contain; }
.escalacao h4 em { font-style: normal; font-size: var(--t-xs); font-weight: 700; color: var(--destaque); background: var(--celeste); padding: 3px 9px; border-radius: 999px; }
.escalacao ul { list-style: none; }
.escalacao li { display: grid; grid-template-columns: 30px 1fr auto; gap: var(--e-2); padding: 8px 0; border-bottom: 1px solid var(--borda); font-size: 0.92rem; }
.escalacao li b { color: var(--destaque); font-variant-numeric: tabular-nums; }
.escalacao li span:last-child { color: var(--texto-fraco); font-size: var(--t-xs); font-weight: 600; }
.escalacao .reservas { margin-top: var(--e-4); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--texto-fraco); }
.lista-escalacao summary { cursor: pointer; font-weight: 700; color: var(--destaque); font-size: var(--t-sm); margin: var(--e-2) 0; list-style-position: inside; }

/* Campinho */
.campo {
  position: relative; aspect-ratio: 68 / 82; max-width: 420px; margin: var(--e-3) auto var(--e-4); padding: 14px 4px;
  display: flex; flex-direction: column; justify-content: space-around; border-radius: var(--raio); overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.08), transparent 70%),
    repeating-linear-gradient(180deg, #1c7a3c 0 10%, #1f8542 10% 20%);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.25), var(--sombra);
}
.campo-linhas { position: absolute; inset: 10px; border: 2px solid rgba(255, 255, 255, 0.5); border-radius: 3px; pointer-events: none; }
.campo-linhas::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px solid rgba(255, 255, 255, 0.5); }
.campo-linhas::after { content: ''; position: absolute; left: 50%; top: 50%; width: 24%; aspect-ratio: 1; transform: translate(-50%, -50%); border: 2px solid rgba(255, 255, 255, 0.5); border-radius: 50%; }
.campo-fila { position: relative; display: flex; justify-content: space-evenly; align-items: flex-start; }
.pino { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 72px; color: #fff; text-align: center; }
.pino-num {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 0.8rem;
  background: #fff; color: #1b2233; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35); transition: transform var(--transicao);
}
.campo-cruzeiro .pino-num { background: linear-gradient(160deg, var(--az-400), var(--az-600)); color: #fff; border: 2px solid #fff; }
.pino-nome { max-width: 100%; font-size: 0.7rem; font-weight: 700; line-height: 1.1; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pino-extras { display: flex; gap: 2px; align-items: center; }
.pino-extras .ic { color: #fff; }
.pino-extras .cartao { width: 8px; height: 11px; }
.pino-extras .saiu { font-style: normal; color: #fca5a5; }
.pino-extras .saiu .ic { color: #fca5a5; }

/* Pré-jogo */
.pj-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-8); }
.prejogo h4 { margin-bottom: var(--e-3); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--texto-fraco); }
.prejogo h4 small { text-transform: none; letter-spacing: 0; font-weight: 500; }
.pj-placar { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-2); margin-bottom: var(--e-2); }
.pj-placar div { text-align: center; padding: var(--e-3); border-radius: 12px; background: var(--superficie-2); border: 1px solid var(--borda); }
.pj-placar b { display: block; font-family: var(--fonte-titulo); font-weight: 800; font-size: 2.2rem; line-height: 1; }
.pj-placar span { font-size: var(--t-xs); font-weight: 600; color: var(--texto-suave); }
.pj-placar .v b { color: var(--vitoria); } .pj-placar .d b { color: var(--derrota); } .pj-placar .e b { color: var(--empate); }
.pj-ultimos { list-style: none; display: grid; gap: var(--e-2); margin-top: var(--e-3); }
.pj-ultimos li { display: grid; grid-template-columns: 26px 1fr; column-gap: var(--e-3); align-items: center; font-size: 0.9rem; }
.pj-ultimos li small { grid-column: 2; font-size: var(--t-xs); color: var(--texto-fraco); }
.pj-ultimos a:hover { color: var(--destaque); }
.pj-forma { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--borda); font-weight: 600; }
.pj-tabelas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-2); }
.pj-tab { padding: var(--e-3) var(--e-4); border-radius: 12px; background: var(--superficie-2); border: 1px solid var(--borda); }
.pj-tab b { font-family: var(--fonte-titulo); font-weight: 800; font-size: 2.2rem; line-height: 1; color: var(--destaque); }
.pj-tab span { display: block; font-weight: 700; }
.pj-tab small { font-size: var(--t-xs); color: var(--texto-fraco); }

/* ---------- 16. Classificação e chaveamento ---------- */
.tabela-card { padding: var(--e-2) 0; margin-bottom: var(--e-5); overflow: hidden; }
.tabela-titulo { padding: var(--e-3) var(--e-5) var(--e-1); font-family: var(--fonte-titulo); font-weight: 800; text-transform: uppercase; font-size: 1.35rem; color: var(--destaque); }
.tabela-rolagem { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.tabela th { padding: 12px 8px; text-align: center; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--texto-fraco); }
.tabela td { padding: 11px 8px; text-align: center; border-top: 1px solid var(--borda); }
.tabela tbody tr { transition: background var(--transicao); }
.tabela tbody tr:hover td { background: var(--superficie-2); }
.tabela .clube-col { text-align: left; }
.tabela td.clube-col { font-weight: 600; min-width: 170px; }
.clube-cel { display: flex; align-items: center; gap: 10px; }
.clube-cel img, .clube-cel .escudo-generico { width: 24px; height: 24px; object-fit: contain; font-size: 0.6rem; }
.tabela .pos span { display: inline-block; min-width: 30px; padding: 2px 0 2px 8px; font-weight: 800; }
.tabela .pts { font-weight: 800; color: var(--destaque); font-size: 1rem; }
.tabela tr.linha-cruzeiro td { background: var(--celeste); }
.tabela tr.linha-cruzeiro td:first-child { box-shadow: inset 3px 0 0 var(--az-600); }
.tabela tr.linha-cruzeiro .clube-cel span { color: var(--destaque); font-weight: 800; }
.legenda { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-5); align-items: center; margin: 0 0 var(--e-6); font-size: var(--t-sm); color: var(--texto-suave); }
.legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: 0; }
.legenda small { flex-basis: 100%; font-size: var(--t-xs); color: var(--texto-fraco); }
.outros-grupos { margin-bottom: var(--e-5); }
.outros-grupos summary { cursor: pointer; padding: var(--e-3) 0; font-weight: 700; color: var(--destaque); }
.grupos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 0 var(--e-5); margin-top: var(--e-2); }
.confronto-copa { margin-bottom: var(--e-8); }
.confronto-copa .fase { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); margin-bottom: var(--e-3); }
.confronto-copa .fase b { font-family: var(--fonte-titulo); font-weight: 800; text-transform: uppercase; font-size: 1.4rem; color: var(--destaque); }
.agregado { display: inline-flex; align-items: center; gap: 5px; font-size: var(--t-sm); font-weight: 600; color: var(--texto-suave); }
.agregado .ic { width: 16px; height: 16px; }

.chave-rolagem { overflow-x: auto; padding-bottom: var(--e-2); }
.chave {
  --linha-chave: color-mix(in srgb, var(--az-400) 55%, transparent);
  display: grid; grid-template-columns: repeat(var(--fases), minmax(250px, 1fr)); gap: 28px;
  min-width: calc(var(--fases) * 250px + (var(--fases) - 1) * 28px);
}
.chave-fase { display: flex; flex-direction: column; }
.chave-fase h4 {
  flex-shrink: 0; margin-bottom: var(--e-3); padding-bottom: var(--e-2); text-align: center; border-bottom: 2px solid var(--borda);
  font-family: var(--fonte-titulo); font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; font-size: 1.1rem; color: var(--destaque);
}
.chave-coluna { flex: 1; display: flex; flex-direction: column; }
.chave-slot { flex: 1; position: relative; display: flex; align-items: center; padding: 5px 0; }
.chave-item { position: relative; width: 100%; }
.chave-confronto { position: relative; display: block; background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px; box-shadow: var(--sombra-1); transition: transform var(--transicao), box-shadow var(--transicao); }
.chave-fase:not(:last-child) .chave-slot::after { content: ''; position: absolute; right: -14px; width: 14px; border-right: 2px solid var(--linha-chave); }
.chave-fase:not(:last-child) .chave-slot:nth-child(odd)::after { top: 50%; bottom: 0; border-top: 2px solid var(--linha-chave); border-top-right-radius: 6px; }
.chave-fase:not(:last-child) .chave-slot:nth-child(even)::after { top: 0; bottom: 50%; border-bottom: 2px solid var(--linha-chave); border-bottom-right-radius: 6px; }
.chave-fase:not(:last-child) .chave-slot:only-child::after { top: 50%; bottom: auto; height: 0; border-right: 0; border-bottom: 0; border-radius: 0; }
.chave-fase:not(:first-child) .chave-slot::before { content: ''; position: absolute; left: -14px; top: 50%; width: 14px; border-top: 2px solid var(--linha-chave); }
.chave:has(.campeao) { padding-bottom: 88px; }
.chave-item .campeao { position: absolute; left: 0; right: 0; top: 100%; margin-top: var(--e-4); }
.chave-confronto.destaque { border: 2px solid var(--az-600); box-shadow: 0 8px 20px -10px rgba(var(--rgb-azul), 0.6); }
:root[data-theme="dark"] .chave-confronto.destaque { border-color: var(--az-400); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .chave-confronto.destaque { border-color: var(--az-400); } }
.chave-time { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 7px; padding: 6px 10px; font-size: 0.8rem; font-weight: 600; }
.chave-time + .chave-time { border-top: 1px solid var(--borda); }
.chave-time img, .chave-time .escudo-generico { width: 20px; height: 20px; object-fit: contain; font-size: 0.55rem; }
.chave-time .nome { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chave-time b { font-family: var(--fonte-titulo); font-weight: 800; font-size: 1.1rem; min-width: 16px; text-align: right; }
.chave-time.ida-volta, .chave-cab { grid-template-columns: 20px minmax(0, 1fr) 24px 30px 28px; }
.chave-cab { display: grid; gap: 7px; padding: 5px 10px 0; font-size: 0.58rem; font-weight: 700; text-transform: uppercase; color: var(--texto-fraco); }
.chave-cab span { text-align: center; }
.chave-time .perna { text-align: center; font-size: 0.78rem; color: var(--texto-fraco); }
.chave-time.ida-volta b { text-align: center; padding: 1px 2px; border-radius: 5px; background: var(--celeste); }
.chave-time.caiu { opacity: 0.45; }
.chave-time.passou .nome { font-weight: 800; }
.chave-time.eh-cruzeiro .nome { color: var(--destaque); }
.chave-confronto .pen { display: block; padding: 0 8px 5px; text-align: center; font-size: 0.64rem; color: var(--texto-fraco); }
.campeao {
  padding: var(--e-3); border-radius: 12px; text-align: center; font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em;
  color: #6b4e00; background: linear-gradient(135deg, #ffe7a0, var(--ouro)); box-shadow: 0 10px 24px -12px rgba(242, 193, 78, 0.9);
}
.campeao .ic { width: 16px; height: 16px; vertical-align: -3px; }
.campeao strong { display: block; margin-top: 2px; font-family: var(--fonte-titulo); font-weight: 800; font-size: 1.35rem; text-transform: uppercase; letter-spacing: 0.02em; color: #3b2a00; }

/* ---------- 17. Elenco, jogador e rankings ---------- */
.rankings { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--e-4); margin-bottom: var(--e-12); }
.ranking { padding: var(--e-5); }
.ranking header { display: flex; gap: var(--e-4); align-items: center; padding-bottom: var(--e-4); margin-bottom: var(--e-2); border-bottom: 1px solid var(--borda); }
.rk-icone { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0; background: var(--celeste); color: var(--destaque); }
.rk-icone .ic { width: 26px; height: 26px; }
.rk-icone .cartao { width: 16px; height: 22px; }
.ranking header small { display: block; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--texto-fraco); }
.ranking header strong { display: block; font-family: var(--fonte-titulo); font-weight: 800; font-size: 1.7rem; line-height: 1.05; text-transform: uppercase; color: var(--destaque); }
.ranking header span { font-size: var(--t-sm); color: var(--texto-suave); }
.ranking ol { list-style: none; }
.ranking li { display: grid; grid-template-columns: 22px minmax(0, 1fr) 72px 28px; gap: var(--e-3); align-items: center; padding: 8px 0; font-size: 0.9rem; }
.ranking li + li { border-top: 1px dashed var(--borda); }
.ranking li.rk-cartao { grid-template-columns: 22px minmax(0, 1fr) auto; }
.rk-pos { font-weight: 800; font-size: var(--t-xs); color: var(--texto-fraco); }
.rk-nome { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-nome small { display: block; font-size: 0.7rem; font-weight: 500; color: var(--texto-fraco); }
.rk-barra { height: 6px; border-radius: 999px; overflow: hidden; background: var(--superficie-2); }
.rk-barra i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--az-500), var(--az-600)); }
.ranking li b { font-family: var(--fonte-titulo); font-weight: 800; font-size: 1.35rem; text-align: right; }
.rk-cartoes { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rk-cartoes .cartao { width: 10px; height: 14px; margin-left: 6px; }

.elenco-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: var(--e-3); }
.jogador { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: var(--e-4); align-items: center; padding: var(--e-4); }
.jogador.sem-jogos { opacity: 0.6; }
a.card.jogador:hover { border-color: var(--destaque); }
.camisa {
  width: 58px; height: 64px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(160deg, var(--az-400), var(--az-600) 55%, var(--az-800));
  clip-path: polygon(22% 0, 78% 0, 100% 18%, 88% 34%, 88% 100%, 12% 100%, 12% 34%, 0 18%);
}
.camisa span { margin-top: 8px; font-family: var(--fonte-titulo); font-weight: 800; font-size: 1.5rem; }
.camisa.grande { width: 104px; height: 114px; filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.35)); }
.camisa.grande span { font-size: 2.8rem; margin-top: 16px; }
.jogador-info strong { display: block; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jogador-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: var(--t-xs); color: var(--texto-fraco); }
.jogador-meta img { width: 16px; height: 11px; object-fit: cover; border-radius: 2px; }
.lesao { font-style: normal; background: var(--derrota); color: #fff; font-size: 0.62rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; }
.jogador-stats { display: flex; gap: var(--e-3); margin-top: var(--e-2); }
.jogador-stats span { font-size: 0.6rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--texto-fraco); text-align: center; }
.jogador-stats b { display: block; font-family: var(--fonte-titulo); font-weight: 800; font-size: 1.2rem; color: var(--texto); letter-spacing: 0; }
.link-jogador { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, currentColor 22%, transparent); text-underline-offset: 4px; transition: color var(--transicao); }
.link-jogador:hover { color: var(--destaque); text-decoration-color: currentColor; }

.jogador-topo { display: flex; align-items: center; gap: var(--e-6); margin-top: var(--e-5); }
.jogador-header h1 { margin-top: 2px; }
.jogador-header .jogador-meta { margin-top: var(--e-2); font-size: var(--t-md); color: rgba(255, 255, 255, 0.8); }
.jogador-header .hero-tag { margin-bottom: var(--e-2); }
.jp-linha { display: grid; grid-template-columns: 130px minmax(0, 1fr) 96px 52px 52px 52px; gap: var(--e-3); align-items: center; padding: var(--e-3) var(--e-5); font-size: 0.9rem; }
.jp-linha.nao-jogou { opacity: 0.55; }
.jp-data b { display: block; }
.jp-data small { font-size: var(--t-xs); color: var(--texto-fraco); }
.jp-jogo { display: flex; align-items: center; gap: var(--e-2); min-width: 0; font-weight: 600; }
.jp-jogo img, .jp-jogo .escudo-generico { width: 22px; height: 22px; object-fit: contain; font-size: 0.55rem; }
.jp-placar { margin-left: auto; font-family: var(--fonte-titulo); font-weight: 800; font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.jp-jogo .badge { width: 22px; height: 22px; font-size: 0.66rem; }
.jp-local { display: inline-grid; place-items: center; color: var(--texto-fraco); }
.jp-local .ic { width: 17px; height: 17px; }
.sit { font-size: 0.7rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.sit.titular { background: var(--celeste); color: var(--destaque); }
.sit.entrou { background: color-mix(in srgb, var(--vitoria) 15%, transparent); color: var(--vitoria); }
.sit.banco { background: var(--superficie-2); color: var(--texto-fraco); }
.jp-sit small { display: block; margin-top: 2px; font-size: var(--t-xs); color: var(--texto-fraco); }
.jp-num { display: flex; align-items: center; gap: 4px; font-weight: 700; }
.jp-num .ic { color: var(--destaque); }
.jp-num .cartao { width: 10px; height: 14px; }

/* ---------- 18. Estatísticas ---------- */
.graficos { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: var(--e-5); margin-top: var(--e-6); }
.grafico { padding: var(--e-6); }
.grafico header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--e-2); margin-bottom: var(--e-5); }
.grafico h3 { font-family: var(--fonte-titulo); font-weight: 800; text-transform: uppercase; font-size: 1.35rem; letter-spacing: 0.02em; }
.legenda-graf { display: flex; gap: var(--e-4); font-size: var(--t-xs); color: var(--texto-suave); }
.legenda-graf i, .dica i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
i.pro { background: var(--serie-pro); } i.contra { background: var(--serie-contra); }
.bg-area { display: grid; grid-template-columns: 24px 1fr; gap: var(--e-2); margin-bottom: var(--e-6); }
.bg-grade { display: flex; flex-direction: column; justify-content: space-between; height: 190px; font-size: 0.68rem; color: var(--texto-fraco); text-align: right; font-variant-numeric: tabular-nums; }
.bg-grupos { display: flex; gap: 6px; height: 190px; border-bottom: 1px solid var(--borda-forte); background: linear-gradient(var(--borda) 1px, transparent 1px) 0 0 / 100% 50%; }
.bg-grupo { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; outline: none; }
.bg-barras { display: flex; align-items: flex-end; justify-content: center; gap: 2px; height: 100%; }
.bg-barras i { width: min(16px, 40%); min-height: 2px; border-radius: 4px 4px 0 0; transition: opacity 0.15s; }
.bg-rotulo { position: absolute; top: 100%; left: 0; right: 0; padding-top: 6px; text-align: center; font-size: 0.7rem; color: var(--texto-fraco); }
.bg-grupos:hover .bg-grupo:not(:hover) .bg-barras i { opacity: 0.4; }
.dica {
  display: none; position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 5; white-space: nowrap;
  padding: 8px 12px; border-radius: 10px; font-size: var(--t-xs); background: var(--superficie); border: 1px solid var(--borda); box-shadow: var(--sombra-3);
}
.dica strong, .dica span { display: block; }
.bg-grupo:hover .dica, .bg-grupo:focus .dica { display: block; }
.cmp-topo { display: flex; justify-content: space-between; margin-bottom: var(--e-2); font-weight: 700; font-size: var(--t-sm); }
.cmp-topo span { display: inline-flex; align-items: center; gap: 6px; }
.cmp-linha { display: grid; grid-template-columns: 46px 1fr 46px; gap: var(--e-3); align-items: center; padding: 6px 0; }
.cmp-linha > b { font-family: var(--fonte-titulo); font-weight: 800; font-size: 1.25rem; text-align: center; font-variant-numeric: tabular-nums; }
.cmp-meio span { display: block; margin-bottom: 4px; text-align: center; font-size: var(--t-xs); color: var(--texto-fraco); }
.cmp-barra { display: flex; gap: 4px; height: 6px; }
.cmp-barra i { display: block; border-radius: 999px; }
.cmp-barra i.a { background: var(--serie-pro); } .cmp-barra i.b { background: var(--borda-forte); }
/* Últimos jogos */
.forma-card { margin-top: var(--e-6); }
.forma-lista { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--e-3); }
.forma-jogo { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: var(--e-3) 4px; border-radius: var(--raio); transition: background var(--transicao); text-align: center; }
.forma-jogo:hover { background: rgba(91, 140, 255, 0.08); }
.forma-res { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; font-weight: 800; font-size: var(--t-sm); }
.forma-res.V { background: var(--vitoria); } .forma-res.E { background: var(--empate); } .forma-res.D { background: var(--derrota); }
.forma-jogo img, .forma-jogo .escudo-generico { width: 40px; height: 40px; object-fit: contain; }
.forma-jogo b { font-family: var(--fonte-titulo); font-weight: 800; font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.forma-jogo small { color: var(--texto-fraco); font-size: var(--t-xs); }

/* Quem marca primeiro */
.pg-grade { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-3); }
.pg-bloco {
  display: grid; gap: 4px; padding: var(--e-4); border-radius: var(--raio); background: rgba(91, 140, 255, 0.07); border: 1px solid transparent; border-top: 3px solid var(--vitoria);
  text-align: left; font: inherit; color: inherit; cursor: pointer; transition: background var(--transicao), border-color var(--transicao);
}
.pg-bloco:hover { background: rgba(91, 140, 255, 0.12); }
.pg-bloco[aria-expanded="true"] { border-color: var(--vitoria); background: rgba(22, 163, 74, 0.1); }
.pg-bloco.sofreu[aria-expanded="true"] { border-color: var(--derrota); background: rgba(220, 38, 38, 0.1); }
.pg-ver { font-style: normal; display: inline-flex; align-items: center; gap: 4px; margin-top: var(--e-2); font-size: var(--t-xs); font-weight: 700; color: var(--destaque); }
.pg-ver svg { width: 14px; height: 14px; transition: transform var(--transicao); }
.pg-bloco[aria-expanded="true"] .pg-ver svg { transform: rotate(180deg); }
.pg-detalhe { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 450ms var(--mola-suave), opacity 280ms ease; }
.pg-detalhe.aberto { grid-template-rows: 1fr; opacity: 1; }
.pg-detalhe-corpo { overflow: hidden; min-height: 0; }
.pg-detalhe-conteudo { margin-top: var(--e-4); padding-top: var(--e-4); border-top: 1px solid var(--borda); }
.pg-detalhe h4 { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--t-sm); font-weight: 700; margin-bottom: var(--e-2); }
.pg-detalhe h4 span { color: var(--texto-fraco); font-weight: 600; }
.pg-lista { display: grid; gap: 2px; max-height: 420px; overflow-y: auto; }
.pg-jogo { display: grid; grid-template-columns: 30px 32px 1fr; gap: var(--e-3); align-items: center; padding: 8px 6px; border-radius: 10px; transition: background var(--transicao); }
.pg-jogo:hover { background: rgba(91, 140, 255, 0.08); }
.pg-jogo img, .pg-jogo .escudo-generico { width: 32px; height: 32px; object-fit: contain; }
.pg-jogo-info { display: grid; gap: 2px; min-width: 0; }
.pg-jogo-info b { font-family: var(--fonte-titulo); font-weight: 800; font-size: 1.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-jogo-info b span { font-family: var(--fonte); font-weight: 600; font-size: var(--t-sm); color: var(--texto-suave); }
.pg-jogo-info small { color: var(--texto-fraco); font-size: var(--t-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-bloco.sofreu { border-top-color: var(--derrota); }
.pg-bloco small { color: var(--texto-suave); font-weight: 600; font-size: var(--t-sm); }
.pg-bloco strong { font-family: var(--fonte-titulo); font-weight: 800; font-size: 2.6rem; line-height: 1; margin-top: 6px; }
.pg-bloco span { color: var(--texto-suave); font-size: var(--t-sm); }
.pg-bloco em { font-style: normal; color: var(--texto-fraco); font-size: var(--t-xs); margin-top: 4px; }

/* Rankings de jogadores */
.graficos-3 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin-top: 0; }
.rk-lista { display: grid; gap: 4px; }
.rk-linha { display: grid; grid-template-columns: 26px 1fr auto; gap: var(--e-3); align-items: center; padding: 8px 6px; border-radius: 10px; transition: background var(--transicao); }
.rk-linha:hover { background: rgba(91, 140, 255, 0.08); }
.rk-pos { font-family: var(--fonte-titulo); font-weight: 800; color: var(--texto-fraco); text-align: center; }
.rk-meio { display: grid; gap: 6px; min-width: 0; }
.rk-meio span { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-barra { height: 6px; border-radius: 999px; background: var(--borda); overflow: hidden; }
.rk-barra i { display: block; height: 100%; border-radius: 999px; background: var(--serie-pro); }
.rk-linha b { font-family: var(--fonte-titulo); font-weight: 800; font-size: 1.25rem; display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.rk-linha b .cartao { margin-left: 6px; }
.nota-cartoes { margin-top: var(--e-3); color: var(--texto-suave); font-size: var(--t-sm); }
@media (max-width: 600px) {
  .forma-lista { gap: 2px; }
  .forma-jogo img, .forma-jogo .escudo-generico { width: 30px; height: 30px; }
  .forma-jogo b { font-size: 1.05rem; }
  .pg-bloco strong { font-size: 2rem; }
}

/* Frente a frente */
/* Cabeçalho: título e compartilhar na mesma linha; lista de times embaixo, larga */
.duelo-card header { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "titulo botao" "liga liga"; align-items: center; gap: var(--e-3) var(--e-2); }
.duelo-card header h3 { grid-area: titulo; }
.duelo-card header .btn-compartilhar-discreto { grid-area: botao; order: 0; margin: 0; }
.duelo-nome { color: var(--destaque); }
.duelo-liga { grid-area: liga; color: var(--texto-fraco); font-size: var(--t-xs); margin-top: -4px; }
.duelo-escolha select {
  width: 100%; max-width: 380px; font: inherit; font-weight: 700; font-size: var(--t-sm); color: var(--texto); background: var(--superficie-2);
  border: 1px solid var(--borda); border-radius: 999px; padding: 10px 14px; cursor: pointer;
}
@media (max-width: 600px) { .duelo-escolha select { max-width: none; } }
.duelo-topo { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--e-3); margin-bottom: var(--e-3); }
.duelo-time { display: grid; justify-items: center; gap: 4px; text-align: center; }
.duelo-time img, .duelo-time .escudo-generico { width: 64px; height: 64px; object-fit: contain; }
.duelo-time strong { font-family: var(--fonte-titulo); font-weight: 800; font-size: 1.3rem; text-transform: uppercase; }
.duelo-time small { color: var(--texto-fraco); font-size: var(--t-xs); }
.duelo-x { font-family: var(--fonte-titulo); font-weight: 800; font-size: 2rem; color: var(--texto-fraco); }
.duelo-sub { margin: var(--e-5) 0 var(--e-2); font-size: var(--t-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--destaque); }
#duelo .cmp-barra i.b { background: var(--serie-contra); }
#duelo .cmp-linha > b { font-size: 1.1rem; color: var(--texto-suave); }
#duelo .cmp-linha > b.melhor { color: var(--texto); }
#duelo .cmp-linha > b.melhor::after { content: ''; display: block; width: 18px; height: 3px; margin: 3px auto 0; border-radius: 2px; background: #f5c542; }
#duelo .cmp-linha { grid-template-columns: 58px 1fr 58px; }
.duelo-vazio, .duelo-trocar { cursor: pointer; font: inherit; color: inherit; background: none; border: 0; padding: var(--e-2); border-radius: var(--raio); transition: background var(--transicao), transform 160ms var(--mola-pulo); }
.duelo-vazio { color: var(--texto-suave); }
.duelo-vazio:hover, .duelo-trocar:hover { background: rgba(91, 140, 255, 0.08); }
.duelo-vazio:active, .duelo-trocar:active { transform: scale(0.96); }
.duelo-interroga { position: relative; transition: transform 300ms var(--mola-pulo), border-color var(--transicao), color var(--transicao); }
.duelo-interroga::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%; pointer-events: none;
  border: 2px solid rgba(91, 140, 255, 0.55); animation: chamar-anel 2.4s ease-out infinite;
}
@keyframes chamar-anel { 0% { transform: scale(0.95); opacity: 0.7; } 70%, 100% { transform: scale(1.4); opacity: 0; } }
.duelo-trocar { display: grid; justify-items: center; }
.duelo-trocar em { font-style: normal; font-size: var(--t-xs); font-weight: 700; color: var(--destaque); margin-top: 2px; }
/* Janela com os escudos */
.escolha-caixa { width: min(560px, 100%); }
.escolha-grade { width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--e-2); max-height: 62vh; overflow-y: auto; padding: 4px; }
.escolha-time-item {
  display: grid; justify-items: center; gap: 4px; padding: var(--e-3) 6px; border-radius: 14px; cursor: pointer; font: inherit; color: #fff;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1);
  animation: pula 420ms var(--mola-pulo) both; animation-delay: calc(var(--i, 0) * 22ms);
  transition: background var(--transicao), transform 200ms var(--mola-pulo), border-color var(--transicao);
}
.escolha-time-item.ativo { border-color: var(--ouro); background: rgba(242, 193, 78, 0.12); }
.escolha-time-item img, .escolha-time-item .escudo-generico { width: 44px; height: 44px; object-fit: contain; }
.escolha-time-item span { font-size: var(--t-xs); font-weight: 700; line-height: 1.2; text-align: center; }
.escolha-time-item small { font-size: 10px; color: rgba(255, 255, 255, 0.55); }
.duelo-interroga { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; border: 2px dashed var(--borda-forte); font-family: var(--fonte-titulo); font-weight: 800; font-size: 1.8rem; color: var(--texto-fraco); }
#duelo .cmp-linha > b.vazio { color: var(--texto-fraco); }
.duelo-nota { margin-top: var(--e-4); color: var(--texto-fraco); font-size: var(--t-xs); }

.recordes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--e-4); }
.recorde { display: block; padding: var(--e-5); }
.recorde small { display: block; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--texto-fraco); }
.recorde strong { display: block; margin: 4px 0 2px; font-family: var(--fonte-titulo); font-weight: 800; font-size: 2.7rem; line-height: 1.05; color: var(--destaque); font-variant-numeric: tabular-nums; }
.recorde.v strong { color: var(--vitoria); } .recorde.d strong { color: var(--derrota); }
.recorde span { display: block; font-weight: 600; }
.recorde em { display: block; margin-top: 4px; font-style: normal; font-size: var(--t-xs); color: var(--texto-fraco); }

/* ---------- 19. Faixas (ao vivo, temporada), notícias, disciplina, assistir ---------- */
.faixa-ao-vivo {
  position: sticky; top: var(--navbar-h); z-index: 40; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 16px;
  padding: 10px 16px; font-weight: 600; font-size: var(--t-sm); color: #fff; background: linear-gradient(90deg, #b91c1c, #dc2626 50%, #b91c1c);
  box-shadow: 0 6px 16px -8px rgba(185, 28, 28, 0.7);
}
.faixa-ao-vivo[hidden] { display: none; }
.faixa-ao-vivo.hoje { background: linear-gradient(90deg, var(--az-700), var(--az-500) 50%, var(--az-700)); box-shadow: 0 6px 16px -8px rgba(var(--rgb-azul), 0.7); }
.faixa-ao-vivo .pulso { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: var(--t-xs); letter-spacing: 0.1em; }
.faixa-ao-vivo:not(.hoje) .pulso { animation: pulsar 1.6s infinite; }
.faixa-ao-vivo .fv-jogo { display: inline-flex; align-items: center; gap: 8px; }
.faixa-ao-vivo .fv-jogo img, .faixa-ao-vivo .escudo-generico { width: 22px; height: 22px; object-fit: contain; font-size: 0.55rem; }
.faixa-ao-vivo b { padding: 0 4px; font-family: var(--fonte-titulo); font-weight: 800; font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.faixa-ao-vivo .fv-min { font-variant-numeric: tabular-nums; opacity: 0.9; }
.faixa-ao-vivo .fv-link { opacity: 0.9; text-decoration: underline; text-underline-offset: 3px; }

.aviso-temporada {
  position: sticky; top: var(--navbar-h); z-index: 39; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 16px; font-size: var(--t-sm); background: var(--ouro); color: #3b2a00;
}
.aviso-temporada .ic { width: 16px; height: 16px; }
.aviso-temporada button { background: none; border: 0; cursor: pointer; color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.assistir { display: inline-flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; font-weight: 700; font-size: var(--t-sm); }
.assistir .ic { width: 18px; height: 18px; }
.assistir .canal { margin: 0; font-size: var(--t-xs); background: rgba(255, 255, 255, 0.14); color: #fff; }
.assistir-busca { padding: 9px 16px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.3); color: #fff; transition: background var(--transicao); }
.assistir-busca:hover { background: rgba(255, 255, 255, 0.1); }

.disciplina-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--e-4); }
.disciplina { display: grid; grid-template-columns: minmax(160px, 1fr) 3fr; gap: var(--e-3) var(--e-6); padding: var(--e-6); }
.disciplina header { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px; padding-bottom: var(--e-3); border-bottom: 1px solid var(--borda); }
.disciplina header strong { font-family: var(--fonte-titulo); font-weight: 800; text-transform: uppercase; font-size: 1.3rem; color: var(--destaque); }
.disciplina header span { font-size: var(--t-sm); color: var(--texto-fraco); }
.disc-col h4 { margin-bottom: var(--e-3); font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--texto-fraco); }
.disc-col ul { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--e-3) var(--e-4); }
.disc-col li { display: grid; grid-template-columns: 14px 1fr; column-gap: var(--e-2); align-items: center; font-size: 0.9rem; }
.disc-col li .cartao { width: 11px; height: 15px; }
.disc-col li small { grid-column: 2; font-size: var(--t-xs); color: var(--texto-fraco); }

.noticias { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--e-4); }
.noticia { display: flex; flex-direction: column; gap: var(--e-3); padding: var(--e-5) var(--e-5) var(--e-4); position: relative; overflow: hidden; }
.noticia::before { content: ''; position: absolute; left: 0; top: 0; right: 0; height: 3px; background: var(--az-600); transform: scaleX(0.18); transform-origin: left; transition: transform 300ms ease; }
.noticia-fonte { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--texto-fraco); }
.noticia strong { flex: 1; font-size: 1.02rem; line-height: 1.4; font-weight: 700; text-wrap: pretty; }
.noticia-ler { font-size: var(--t-sm); font-weight: 700; color: var(--destaque); }

/* ---------- 20. Estados, escudo genérico e extras ---------- */
.carregando {
  grid-column: 1 / -1; position: relative; overflow: hidden; padding: var(--e-5); border-radius: var(--raio);
  color: var(--texto-fraco); font-size: var(--t-xs); font-weight: 600; text-align: left;
  background: color-mix(in srgb, currentColor 5%, transparent); border: 1px solid color-mix(in srgb, currentColor 10%, transparent);
}
/* "Esqueleto" do conteúdo que vai chegar */
.carregando::before {
  content: ''; display: block; height: 92px; margin-bottom: var(--e-3); opacity: 0.16; background:
    linear-gradient(currentColor, currentColor) 0 0 / 38% 14px no-repeat,
    linear-gradient(currentColor, currentColor) 0 30px / 82% 10px no-repeat,
    linear-gradient(currentColor, currentColor) 0 50px / 66% 10px no-repeat,
    linear-gradient(currentColor, currentColor) 0 76px / 26% 16px no-repeat;
  border-radius: 4px;
}
.carregando::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-100%); animation: brilho 1.4s ease-in-out infinite;
  background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, currentColor 14%, transparent) 50%, transparent 70%);
}
@keyframes girar { to { transform: rotate(360deg); } }
.erro { padding: var(--e-6); text-align: center; color: var(--derrota); font-weight: 600; }
/* Fonte do feminino fora do ar e sem cópia guardada */
.card.indisponivel { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: var(--e-10) var(--e-6); text-align: center; }
.card.indisponivel .ic { width: 36px; height: 36px; color: var(--az-400); margin-bottom: 4px; }
.card.indisponivel strong { font-family: var(--fonte-titulo, inherit); font-size: 1.4rem; text-transform: uppercase; letter-spacing: 0.02em; }
.card.indisponivel span { color: var(--texto-suave); }
.partida-header .card.indisponivel, .jogador-header .card.indisponivel { margin-top: var(--e-6); }

.escudo-generico {
  display: inline-grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px;
  border-radius: 50% 50% 45% 45% / 40% 40% 60% 60%; background: linear-gradient(160deg, #cbd5e1, #8a94a8);
  color: #fff; font-family: var(--fonte-titulo); font-weight: 800; font-size: 0.85rem; letter-spacing: 0.02em;
}
.time .escudo-generico { width: 76px; height: 76px; font-size: 1.8rem; }
.partida-header .time .escudo-generico { width: 104px; height: 104px; font-size: 2.4rem; }

/* Rivalidade: o escudo do Atlético-MG (ID 7632 na ESPN; 69390 no feminino, na 365Scores) sempre aparece de cabeça para baixo */
img[src*="/7632.png"], img[src$="/Competitors/69390"] { transform: rotate(180deg); }

/* Rodapé */
.rodape { margin-top: var(--e-12); padding: var(--e-10) 0; background: var(--az-950); color: rgba(255, 255, 255, 0.65); font-size: var(--t-sm); border-top: 3px solid var(--az-600); }
.rodape .container { display: flex; justify-content: space-between; align-items: center; gap: var(--e-5); flex-wrap: wrap; }
.rodape .brand img, .rodape .raposa { width: 38px; height: auto; }
.rodape .raposa { filter: brightness(0) invert(1); }
.creditos { line-height: 1.7; max-width: 60ch; }
.creditos strong { color: #fff; }

/* Página 404 */
.erro-404 { min-height: calc(100vh - var(--navbar-h) - 120px); display: grid; place-items: center; padding: var(--e-16) 0; text-align: center; }
.erro-404 h1 { font-family: var(--fonte-titulo); font-weight: 800; font-size: clamp(2.6rem, 7vw, 4.6rem); line-height: 0.95; text-transform: uppercase; }
.erro-404 p { margin: var(--e-4) auto var(--e-8); color: rgba(255, 255, 255, 0.8); }
.erro-404 .botoes, .erro-404 .hero-tag { justify-content: center; }
.raposa-404 { width: 140px; margin: 0 auto var(--e-5); filter: brightness(0) invert(1) drop-shadow(0 12px 24px rgba(0, 0, 0, 0.3)); animation: balancar 3s ease-in-out infinite; }
@keyframes balancar { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }

/* Janela de compartilhar */
.barra-compartilhar { display: flex; justify-content: flex-end; margin-bottom: var(--e-4); }
/* Botão discreto de compartilhar (resumo e cada gráfico das estatísticas): mesmo padrão em todos */
.btn-compartilhar-discreto {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--borda); background: transparent; color: var(--texto-suave);
  font-family: inherit; font-weight: 600; font-size: var(--t-sm); line-height: 1; cursor: pointer; white-space: nowrap;
  transition: color var(--transicao), border-color var(--transicao), background var(--transicao);
}
.btn-compartilhar-discreto:hover, .btn-compartilhar-discreto:focus-visible { color: var(--destaque, var(--texto)); border-color: currentColor; background: rgba(79, 124, 255, 0.08); }
.btn-compartilhar-discreto svg { width: 16px; height: 16px; }
.btn-compartilhar-discreto[hidden] { display: none; }
.grafico header .btn-compartilhar-discreto { order: 2; margin-left: auto; }
.grafico header .legenda-graf { order: 3; flex-basis: 100%; }
.redes { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-3); }
.rede {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer;
  color: #fff; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.6); transition: transform var(--transicao), filter var(--transicao);
}
.rede svg { width: 24px; height: 24px; }
.rede[data-rede="x"] { outline: 1px solid rgba(255, 255, 255, 0.25); }
.rede-baixar { background: rgba(255, 255, 255, 0.14); outline: 1px solid rgba(255, 255, 255, 0.25); }
.rede-baixar svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.modal-dica { color: rgba(255, 255, 255, 0.7); font-size: var(--t-sm); text-align: center; max-width: 380px; }
/* ---------- Janela de compartilhar ---------- */
.modal-compartilhar {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: var(--e-6) var(--e-4); overflow-y: auto;
  background: radial-gradient(circle at 50% 30%, rgba(31, 91, 216, 0.28), rgba(0, 6, 20, 0.88) 60%);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: fundo-entra 300ms ease both;
}
.modal-compartilhar.saindo { animation: fundo-sai 260ms ease forwards; }
.modal-compartilhar.saindo .modal-caixa { animation: caixa-sai 240ms ease forwards; }
html.sem-rolagem { overflow: hidden; }
.modal-caixa { position: relative; width: min(420px, 100%); display: grid; gap: var(--e-4); justify-items: center; }

/* Carregando: cartão com brilho passando */
.modal-gerando { display: grid; justify-items: center; gap: 6px; color: #fff; text-align: center; animation: caixa-entra 420ms var(--mola-suave) both; }
.mg-cartao {
  position: relative; width: 240px; aspect-ratio: 4 / 5; margin-bottom: var(--e-3); border-radius: 22px; overflow: hidden;
  background: linear-gradient(160deg, var(--az-500), var(--az-600) 55%, var(--az-800)); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.7);
  display: grid; place-items: center;
}
.mg-cartao::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.22) 50%, transparent 70%); transform: translateX(-100%); animation: brilho 1.3s ease-in-out infinite; }
.mg-anel { width: 46px; height: 46px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.25); border-top-color: #fff; animation: girar 0.8s linear infinite; }
.modal-gerando strong { font-size: var(--t-md); }
.modal-gerando small { color: rgba(255, 255, 255, 0.65); font-size: var(--t-sm); }

/* Pronta: cabeçalho, imagem entrando em 3D com reflexo, botões pulando em sequência */
.modal-topo { display: grid; gap: 2px; text-align: center; color: #fff; animation: desce 500ms var(--mola-suave) both; }
.modal-topo strong { font-family: var(--fonte-titulo); font-weight: 800; font-size: 1.5rem; letter-spacing: 0.02em; text-transform: uppercase; }
.modal-topo small { color: rgba(255, 255, 255, 0.65); font-size: var(--t-xs); }
.modal-foto { position: relative; width: 100%; border-radius: var(--raio-lg); overflow: hidden; perspective: 900px; animation: foto-entra 700ms var(--mola-suave) both 60ms; box-shadow: 0 34px 70px -24px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.08); }
.modal-foto img { display: block; width: 100%; max-height: 60vh; object-fit: contain; }
.modal-foto::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.35) 50%, transparent 65%); transform: translateX(-120%); animation: reflexo 1.1s ease 650ms both; }
.modal-principal { animation: pula 500ms var(--mola-pulo) both 380ms; }
.redes > * { animation: pula 480ms var(--mola-pulo) both; animation-delay: calc(460ms + var(--i, 0) * 60ms); }
.modal-fechar { animation: gira-entra 500ms var(--mola-pulo) both 300ms; }
.modal-dica:not([hidden]) { animation: desce 360ms var(--mola-suave) both; }

@keyframes fundo-entra { from { opacity: 0; backdrop-filter: blur(0); } }
@keyframes fundo-sai { to { opacity: 0; } }
@keyframes caixa-entra { from { opacity: 0; transform: translateY(18px) scale(0.96); } }
@keyframes caixa-sai { to { opacity: 0; transform: translateY(14px) scale(0.96); } }
@keyframes foto-entra { from { opacity: 0; transform: translateY(40px) rotateX(14deg) scale(0.9); } }
@keyframes reflexo { to { transform: translateX(120%); } }
@keyframes brilho { to { transform: translateX(100%); } }
@keyframes desce { from { opacity: 0; transform: translateY(-10px); } }
@keyframes pula { from { opacity: 0; transform: translateY(14px) scale(0.6); } }
@keyframes gira-entra { from { opacity: 0; transform: rotate(-120deg) scale(0.4); } }
.modal-caixa .botoes { justify-content: center; }
.modal-fechar {
  position: absolute; top: -12px; right: -12px; z-index: 2; width: 38px; height: 38px; display: grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer; background: #fff; color: #0b1530; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  transition: transform 200ms var(--mola-pulo);
}
.modal-fechar .ic { width: 18px; height: 18px; }
@media (max-width: 420px) {
  .redes { gap: 10px; flex-wrap: nowrap; }
  .rede { width: 44px; height: 44px; }
  .rede svg { width: 21px; height: 21px; }
}
@keyframes surgir { from { opacity: 0; } }

/* Entrada suave dos cards quando carregam (sem exagero) */
.lista-jogos > *, .stats-grid > *, .noticias > *, .elenco-grid > *, .rankings > *, .recordes > * { animation: entrar 360ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.lista-jogos > :nth-child(2), .stats-grid > :nth-child(2), .noticias > :nth-child(2) { animation-delay: 30ms; }
.lista-jogos > :nth-child(3), .stats-grid > :nth-child(3), .noticias > :nth-child(3) { animation-delay: 60ms; }
.lista-jogos > :nth-child(4), .stats-grid > :nth-child(4), .noticias > :nth-child(4) { animation-delay: 90ms; }
.lista-jogos > :nth-child(n+5), .stats-grid > :nth-child(n+5), .noticias > :nth-child(n+5) { animation-delay: 120ms; }
@keyframes entrar { from { opacity: 0; transform: translateY(6px); } }

/* Barra de rolagem discreta */
* { scrollbar-width: thin; scrollbar-color: var(--borda-forte) transparent; }

/* ---------- 21. Responsivo ---------- */
@media (max-width: 1100px) {
  .nav-links .longo { display: none; }
  .nav-links .curto { display: inline; }
  .nav-links a { padding: 10px 10px; }
  .nav-links a::after { left: 10px; right: 10px; }
}
@media (max-width: 900px) {
  .brand strong { display: none; }
  .nav-links .so-desktop { display: none; }
  .hero .container, .clube-grid, .destaques, .detalhes-grid, .escalacoes, .pj-grid { grid-template-columns: 1fr; }
  .hero .container { text-align: center; padding-top: 48px; }
  .hero p { margin-inline: auto; }
  .hero .botoes, .hero .hero-tag { justify-content: center; }
  .hero-escudo { order: -1; width: 150px; }
  .destaques { margin-top: -96px; }
  .jogo { grid-template-columns: 76px minmax(0, 1fr); gap: var(--e-3) var(--e-4); }
  .jogo-meta { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; text-align: left; padding-top: var(--e-2); border-top: 1px dashed var(--borda); }
  .jm-chips { justify-content: flex-start; }
  .jd-dia { font-size: 2rem; }
}
@media (max-width: 760px) {
  .menu-btn { display: grid; }
  /* Painel do menu: desce "se desenrolando", com os itens entrando em cascata */
  .navbar .nav-links {
    display: flex; position: absolute; top: 100%; left: -20px; right: -20px; flex-direction: column; gap: 2px;
    padding: var(--e-3) var(--e-5) var(--e-5); background: var(--az-950); border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0 0 22px 22px; box-shadow: 0 30px 50px -18px rgba(0, 0, 0, 0.7);
    visibility: hidden; pointer-events: none; opacity: 0; transform: translateY(-10px);
    clip-path: inset(0 0 100% 0 round 0 0 22px 22px);
    transition: clip-path 420ms var(--mola-suave), transform 420ms var(--mola-suave), opacity 220ms ease, visibility 0s linear 420ms;
  }
  .navbar .nav-links::before { /* filete dourado no topo do painel */
    content: ''; position: absolute; top: 0; left: 20px; right: 20px; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--ouro), transparent); opacity: 0.7;
  }
  .navbar .nav-links.aberto {
    visibility: visible; pointer-events: auto; opacity: 1; transform: none; clip-path: inset(0 0 0 0 round 0 0 22px 22px);
    transition: clip-path 480ms var(--mola-suave), transform 480ms var(--mola-suave), opacity 200ms ease, visibility 0s;
  }
  .navbar .nav-links li { opacity: 0; transform: translateX(-16px); transition: opacity 200ms ease, transform 300ms var(--mola-suave); }
  .navbar .nav-links.aberto li { opacity: 1; transform: none; transition: opacity 320ms ease, transform 420ms var(--mola-suave); transition-delay: calc(90ms + var(--i, 0) * 45ms); }
  .navbar .nav-links li:nth-child(1) { --i: 0; } .navbar .nav-links li:nth-child(2) { --i: 1; } .navbar .nav-links li:nth-child(3) { --i: 2; }
  .navbar .nav-links li:nth-child(4) { --i: 3; } .navbar .nav-links li:nth-child(5) { --i: 4; } .navbar .nav-links li:nth-child(6) { --i: 5; }
  .navbar .nav-links li:nth-child(7) { --i: 6; } .navbar .nav-links li:nth-child(8) { --i: 7; }
  .navbar .nav-links a:active { background: rgba(255, 255, 255, 0.1); }
  .navbar .nav-links .so-desktop { display: block; }
  .navbar .nav-links a { padding: 14px 12px; font-size: var(--t-md); border-radius: 10px; }
  .navbar .nav-links a.ativo { background: rgba(255, 255, 255, 0.08); }
  .navbar .nav-links a::after { display: none; }
  .navbar .nav-links .longo { display: inline; }
  .navbar .nav-links .curto { display: none; }
  .brand strong { display: inline; }
  /* Feminino no celular: o selo fica embaixo do nome, para não empurrar os botões */
  .brand:has(.selo-modalidade) { display: grid; grid-template-columns: auto auto; column-gap: var(--e-3); row-gap: 3px; align-items: center; }
  .brand:has(.selo-modalidade) img { grid-row: span 2; }
  .brand:has(.selo-modalidade) strong { align-self: end; }
  .selo-modalidade { align-self: start; justify-self: start; padding: 2px 6px; font-size: 0.58rem; }
  .hero, .page-header { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), 0 100%); }
}
@media (max-width: 560px) {
  .container { width: min(1200px, 100% - 32px); }
  .navbar .nav-links { left: -16px; right: -16px; }
  .brand img { width: 34px; height: 34px; }
  .tema-btn { width: 36px; height: 36px; }
  .temporada-sel select { height: 36px; padding: 0 24px 0 10px; font-size: var(--t-xs); background-position: right 8px center; }
  .card-destaque { padding: var(--e-6) var(--e-4); }
  .time img { width: 60px; height: 60px; }
  .time span { font-size: var(--t-md); }
  .partida-header .time img, .partida-header .time .escudo-generico { width: 72px; height: 72px; }
  .contagem div { min-width: 62px; }
  .jogo { grid-template-columns: 1fr; padding: var(--e-3) var(--e-4); }
  .jogo-data { display: flex; align-items: baseline; gap: 8px; padding: 0 0 var(--e-2); border-right: 0; border-bottom: 1px dashed var(--borda); }
  .jd-dia { font-size: 1.35rem; line-height: 1; }
  .jd-sem { margin-left: auto; }
  .jogo-times { grid-template-columns: minmax(0, 1fr) minmax(76px, auto) minmax(0, 1fr); gap: var(--e-2); }
  .jogo-times .lado { flex-direction: column; gap: 4px; font-size: var(--t-sm); text-align: center; }
  .jogo-times .lado:first-child { flex-direction: column-reverse; justify-content: flex-start; text-align: center; }
  .jogo-times .lado span { max-width: 100%; }
  .placar { min-width: 70px; font-size: 1.4rem; white-space: nowrap; padding-inline: 8px; }
  .jogo-meta { padding-top: var(--e-2); }
  .filtros { flex-direction: column; align-items: stretch; }
  .abas.abas-rolagem { display: flex; width: 100%; }
  .abas-rolagem button { flex: 1; padding: 9px 4px; font-size: var(--t-xs); }
  .abas button:has(.logo-comp) { flex-direction: column; justify-content: center; gap: 4px; padding: 8px 4px; }
  .titulos { grid-template-columns: 1fr 1fr; }
  .eventos li { grid-template-columns: 44px 22px 1fr; }
  .tabela .opc { display: none; }
  .tabela td, .tabela th { padding: 9px 5px; }
  .tabela td.clube-col { min-width: 0; font-size: 0.85rem; }
  .grupos-grid, .graficos, .rankings, .disciplina { grid-template-columns: 1fr; }
  .linha-tempo::before { left: 64px; }
  .marco { grid-template-columns: 52px 1fr; gap: 32px; }
  .marco::before { left: 57px; }
  .marco .ano { font-size: 1.15rem; }
  .bg-grupos { gap: 2px; }
  .bg-rotulo { font-size: 0.58rem; }
  .clube::before { width: 320px; right: -60px; }
}
@media (max-width: 700px) {
  .jp-linha { grid-template-columns: 1fr auto; row-gap: 6px; }
  .jp-linha .jp-jogo { grid-column: 1 / -1; order: -1; }
  .jp-num:empty { display: none; }
  .jogador-topo { gap: var(--e-4); }
  .camisa.grande { width: 76px; height: 84px; }
  .camisa.grande span { font-size: 2rem; margin-top: 11px; }
  .pino { width: 56px; }
  .pino-num { width: 27px; height: 27px; font-size: 0.72rem; }
}

/* Página que termina com o bloco azul (início e história): rodapé colado, sem faixa clara no tema claro */
main:has(> .clube:last-child) + .rodape { margin-top: 0; }

/* Bolinhas de resultado com contraste melhor para o texto branco */
.badge.V, .forma-res.V { background: #15803d; }
.badge.E, .forma-res.E { background: #64748b; }

/* Conteúdo sendo atualizado (troca de filtro/time): fica esmaecido no lugar, sem sumir nem pular */
.atualizando { position: relative; opacity: 0.45; pointer-events: none; cursor: progress; transition: opacity 200ms ease; }
.atualizando::after {
  content: ''; position: absolute; top: -12px; left: 0; width: 28%; height: 3px; border-radius: 3px;
  background: var(--az-400); animation: progresso 1s ease-in-out infinite alternate;
}
@keyframes progresso { from { transform: translateX(0); } to { transform: translateX(257%); } }

/* Animação que roda sem parar fica pausada fora da tela (economiza bateria) */
.fora-da-tela, .fora-da-tela *, .fora-da-tela::after, .fora-da-tela *::after { animation-play-state: paused !important; }

/* ================= Animações (js/animacoes.js) ================= */
.sem-anim, .sem-anim *, .sem-anim::before, .sem-anim::after, .sem-anim *::before, .sem-anim *::after { transition: none !important; }
/* Barras crescendo quando aparecem */
.animado .barra-anim { transition: transform 900ms var(--mola-suave); }
.barra-v { transform-origin: bottom; } .barra-h { transform-origin: left; } .barra-h-dir { transform-origin: right; }
.barra-v.barra-oculta { transform: scaleY(0); }
.barra-h.barra-oculta, .barra-h-dir.barra-oculta { transform: scaleX(0); }

/* Pílula que desliza até a aba/filtro escolhido */
.com-pilula { position: relative; }
.com-pilula button { position: relative; z-index: 1; }
.pilula { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; background: var(--az-600); transition: transform 420ms var(--mola-suave), width 420ms var(--mola-suave), height 420ms var(--mola-suave), opacity 200ms ease; }
.pilula.sem-transicao { transition: none; }
.abas.com-pilula .pilula { border-radius: 9px; box-shadow: 0 4px 10px -4px rgba(var(--rgb-azul), 0.7); }
.abas.com-pilula button.ativo { background: transparent; box-shadow: none; }
.chips-filtro.com-pilula .pilula { border-radius: 999px; }
.chips-filtro.com-pilula button.ativo { background: transparent; border-color: transparent; }

/* Classificação: linhas entrando em sequência e brilho passando na linha do Cruzeiro */
.animado .linha-entra { animation: entrar 420ms var(--mola-suave) both; animation-delay: calc(var(--i, 0) * 22ms); }
.animado .tabela tr.linha-cruzeiro td {
  background-image: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, 0.3) 50%, transparent 65%);
  background-size: 260% 100%; background-repeat: no-repeat; background-position: 160% 0;
  animation: brilho-linha 1.3s ease both; animation-delay: calc(800ms + var(--c, 0) * 40ms);
}
@keyframes brilho-linha { from { background-position: 160% 0; } to { background-position: -60% 0; } }

/* Mata-mata: fases entrando da esquerda e linhas do chaveamento se desenhando */
.animado .chave-fase { transition: opacity 500ms ease, transform 650ms var(--mola-suave); transition-delay: calc(var(--f, 0) * 200ms); }
.chave-oculta .chave-fase { opacity: 0; transform: translateX(-18px); }
.animado .chave-slot::after, .animado .chave-slot::before { transition: transform 420ms ease; transform-origin: left center; transition-delay: calc(var(--f, 0) * 200ms + 380ms); }
.chave-oculta .chave-slot::after, .chave-oculta .chave-slot::before { transform: scaleX(0); }

/* Troféus, escudos da história, marcos da linha do tempo e títulos: aparecem em sequência */
.animado .revela { transition: opacity 600ms ease, transform 700ms var(--mola-suave), box-shadow var(--transicao); transition-delay: calc(var(--i, 0) * 70ms); }
.revela-oculto { opacity: 0; transform: translateY(24px) scale(0.97); }
.animado .revela:hover { transition-delay: 0s; }
.animado .marco { transition-delay: 0s; }
.marco.revela-oculto { transform: translateX(-24px); }
.animado .marco::before { transition: transform 500ms var(--mola-pulo) 200ms; }
.marco.revela-oculto::before { transform: scale(0); }
.animado .linha-tempo::before { transform-origin: top; transform: scaleY(var(--progresso, 1)); transition: transform 120ms linear; }
.taca, .grande-conquista { position: relative; overflow: hidden; }
.taca::after, .grande-conquista::after, .trofeu::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 35%, rgba(242, 193, 78, 0.16) 50%, transparent 65%); transform: translateX(-120%); }
.faixa-escudos img { transition: transform 400ms var(--mola-pulo), filter 400ms ease; }

/* Escalação: jogadores entrando no campinho do goleiro para o ataque */
.campo-anim .pino { animation: pino-entra 520ms var(--mola-pulo) both; animation-delay: calc(var(--fila, 0) * 120ms + var(--col, 0) * 45ms + 150ms); }
@keyframes pino-entra { from { opacity: 0; transform: translateY(18px) scale(0.5); } }

/* Contagem regressiva: número virando como placar de estádio */
.contagem div { perspective: 400px; }
.contagem b { transform-origin: 50% 60%; }
.contagem b.vira-sai { animation: vira-sai 180ms ease-in forwards; }
.contagem b.vira-entra { animation: vira-entra 260ms var(--mola-suave); }
@keyframes vira-sai { to { transform: rotateX(90deg); opacity: 0.3; } }
@keyframes vira-entra { from { transform: rotateX(-90deg); opacity: 0.3; } }

/* Gol ao vivo: placar pulando e aviso "GOL!" */
.gol-pulo { animation: gol-pulo 1s var(--mola-pulo); }
@keyframes gol-pulo { 30% { transform: scale(1.35); color: var(--ouro); text-shadow: 0 0 24px rgba(242, 193, 78, 0.8); } }
.gol-aviso {
  position: fixed; left: 50%; top: calc(var(--navbar-h) + 14px); z-index: 90; transform: translateX(-50%);
  display: flex; align-items: center; gap: var(--e-3); padding: 12px 22px; border-radius: 999px;
  background: linear-gradient(90deg, #f2c14e, #ffe08a, #f2c14e); color: #1a1300; box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.6);
  font-family: var(--fonte-titulo); font-weight: 800; font-size: 1.6rem; letter-spacing: 0.04em; text-transform: uppercase;
  animation: gol-entra 700ms var(--mola-pulo) both, gol-sai 400ms ease 4s forwards;
}
.gol-aviso .ic { width: 26px; height: 26px; }
.gol-aviso.contra { background: linear-gradient(90deg, #cfd6e4, #fff, #cfd6e4); }
.gol-aviso { max-width: calc(100vw - 32px); }
.gol-texto { display: grid; line-height: 1.05; }
.gol-texto strong { white-space: nowrap; }
.gol-aviso small { font-family: var(--fonte); font-size: var(--t-xs); font-weight: 700; letter-spacing: 0; text-transform: none; opacity: 0.75; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes gol-entra { from { opacity: 0; transform: translate(-50%, -40px) scale(0.6); } }
@keyframes gol-sai { to { opacity: 0; transform: translate(-50%, -20px) scale(0.9); } }

/* Estrelas do escudo cintilando na página inicial */
.hero-logo-caixa { position: relative; display: block; }
.hero-logo-caixa img { display: block; width: 100%; height: auto; aspect-ratio: 1; }
.cintila {
  position: absolute; left: var(--x); top: var(--y); width: 11%; aspect-ratio: 1; transform: translate(-50%, -50%) scale(0); pointer-events: none;
  background: radial-gradient(circle, #fff 0 14%, rgba(255, 255, 255, 0.85) 20%, rgba(190, 215, 255, 0.35) 38%, transparent 62%);
  clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 16px rgba(160, 200, 255, 0.7));
  animation: cintilar 4.5s ease-in-out infinite; animation-delay: var(--d);
}
@keyframes cintilar { 0%, 62%, 100% { transform: translate(-50%, -50%) scale(0) rotate(0); opacity: 0; } 72% { transform: translate(-50%, -50%) scale(1.05) rotate(45deg); opacity: 1; } 80% { transform: translate(-50%, -50%) scale(0.9) rotate(70deg); opacity: 0.9; } 90% { transform: translate(-50%, -50%) scale(0.2) rotate(100deg); opacity: 0; } }

/* Notícias: zoom suave na foto */
.noticia-foto img { transition: transform 700ms var(--mola-suave), filter 700ms ease; }

/* Escudos e placar "voando" do card para a página da partida */
::view-transition-group(vt-casa), ::view-transition-group(vt-fora), ::view-transition-group(vt-placar) { animation-duration: 560ms; animation-timing-function: var(--mola-suave); }
::view-transition-old(vt-casa), ::view-transition-old(vt-fora), ::view-transition-old(vt-placar),
::view-transition-new(vt-casa), ::view-transition-new(vt-fora), ::view-transition-new(vt-placar) { height: 100%; object-fit: contain; }

/* Transição suave entre as páginas (navegadores compatíveis); a barra do topo fica parada */
@view-transition { navigation: auto; }
.navbar { view-transition-name: barra-topo; }
::view-transition-old(root) { animation: 180ms ease both pagina-sai; }
::view-transition-new(root) { animation: 320ms var(--mola-suave) both pagina-entra; }
@keyframes pagina-sai { to { opacity: 0; } }
@keyframes pagina-entra { from { opacity: 0; transform: translateY(12px); } }
/* Troca de tema: o novo tema se espalha a partir do botão numa onda de borda esfumada (animada pelo JS) */
@property --onda { syntax: '<length>'; inherits: false; initial-value: 0px; }
html.trocando-tema::view-transition-old(root), html.trocando-tema::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html.trocando-tema .navbar { view-transition-name: none; }
html.trocando-tema.onda::view-transition-new(root) {
  -webkit-mask-image: radial-gradient(circle at var(--onda-x) var(--onda-y), #000 calc(var(--onda) - 90px), transparent var(--onda));
  mask-image: radial-gradient(circle at var(--onda-x) var(--onda-y), #000 calc(var(--onda) - 90px), transparent var(--onda));
}
/* Sem essa função no navegador: as cores só mudam suavemente */
html.tema-suave, html.tema-suave *, html.tema-suave *::before, html.tema-suave *::after {
  transition: background-color 450ms ease, color 450ms ease, border-color 450ms ease, fill 450ms ease, stroke 450ms ease, box-shadow 450ms ease !important;
}

/* Respeita quem prefere menos movimento (acessibilidade) */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* Botões dos cards de destaque: dois lado a lado, mesmo tamanho, centralizados */
.acoes-card { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-3); max-width: 460px; margin: var(--e-6) auto 0; position: relative; z-index: 1; }
.acoes-card .btn { width: 100%; padding: 0 14px; }
.acoes-card .btn:only-child { grid-column: 1 / -1; }
.resultado-linha { display: flex; justify-content: center; align-items: center; gap: var(--e-2); margin-top: var(--e-4); }
.card-destaque { display: flex; flex-direction: column; }
.card-destaque .acoes-card { margin-top: auto; padding-top: var(--e-6); }
@media (max-width: 420px) { .acoes-card { grid-template-columns: 1fr; } }

/* ---------- Página de títulos ---------- */
.destaques-titulos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-4); }
.grande-conquista { position: relative; overflow: hidden; padding: var(--e-6); border-top: 3px solid var(--ouro); }
.gc-ano { display: block; font-family: var(--fonte-titulo); font-weight: 800; font-size: 3.6rem; line-height: 1; color: var(--ouro); }
.grande-conquista h3 { margin: var(--e-2) 0; font-family: var(--fonte-titulo); font-weight: 800; text-transform: uppercase; font-size: 1.5rem; }
.grande-conquista p { color: var(--texto-suave); font-size: var(--t-sm); }

.tl-titulos { padding: var(--e-8) var(--e-6) var(--e-5); overflow-x: auto; }
.tl-trilho { list-style: none; position: relative; height: 70px; min-width: 640px; margin-bottom: var(--e-4); }
.tl-trilho::before { content: ''; position: absolute; left: 0; right: 0; top: 14px; height: 2px; background: var(--borda-forte); }
.tl-trilho li { position: absolute; left: var(--x); top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.tl-trilho i { width: 14px; height: 14px; margin-top: 8px; border-radius: 50%; background: var(--az-400); box-shadow: 0 0 0 3px var(--superficie); }
.tl-trilho li.ouro i { background: var(--ouro); }
.tl-trilho span { font-size: 0.66rem; font-weight: 700; color: var(--texto-fraco); writing-mode: vertical-rl; transform: rotate(180deg); font-variant-numeric: tabular-nums; }

.tacas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--e-4); }
.taca { padding: var(--e-5); border-top: 3px solid var(--az-600); }
.taca.ouro { border-top-color: var(--ouro); }
.taca-topo { display: flex; align-items: center; gap: var(--e-3); margin-bottom: var(--e-3); }
.taca-topo strong { font-family: var(--fonte-titulo); font-weight: 800; font-size: 2.6rem; line-height: 1; color: var(--destaque); min-width: 1.4ch; }
.taca.ouro .taca-topo strong { color: var(--ouro); }
.taca-topo h3 { font-size: 1rem; font-weight: 700; line-height: 1.25; }
.taca-anos { list-style: none; display: grid; gap: 6px; }
.taca-anos li { display: flex; align-items: baseline; gap: var(--e-3); padding-top: 6px; border-top: 1px solid var(--borda); font-size: var(--t-sm); }
.taca-anos b { font-variant-numeric: tabular-nums; color: var(--destaque); min-width: 3ch; }
.taca-anos span { color: var(--texto-fraco); }
@media (max-width: 900px) { .destaques-titulos { grid-template-columns: 1fr; } }
.tl-dica { display: none; }
@media (max-width: 700px) { .tl-dica { display: inline; flex-basis: 100%; font-size: var(--t-xs); } }

/* Aviso de dados antigos (plano B quando a ESPN falha) */
.aviso-antigo { padding: 9px 16px; text-align: center; font-size: var(--t-sm); background: var(--superficie-2); color: var(--texto-suave); border-bottom: 1px solid var(--borda); }
.aviso-antigo b { color: var(--texto); }

/* Notícias com foto */
.noticia.com-foto { padding-top: 0; }
.noticia-foto { display: block; margin: 0 calc(var(--e-5) * -1) var(--e-1); aspect-ratio: 16 / 10; overflow: hidden; background: var(--superficie-2); }
.noticia-foto img { width: 100%; height: 100%; object-fit: cover; }
.noticia.com-foto::before { z-index: 1; }
.link-oficial { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* Página de privacidade (texto longo: linha de ~68 caracteres) */
.texto-legal { max-width: 72ch; }
.texto-legal h2 { margin: var(--e-8) 0 var(--e-3); font-family: var(--fonte-titulo); font-weight: 800; text-transform: uppercase; font-size: 1.5rem; }
.texto-legal p, .texto-legal li { color: var(--texto-suave); line-height: 1.7; }
.texto-legal p + p { margin-top: var(--e-3); }
.texto-legal ul { margin: var(--e-3) 0 0 var(--e-5); display: grid; gap: 6px; }
.texto-legal a { color: var(--destaque); text-decoration: underline; text-underline-offset: 3px; }
.link-rodape { color: rgba(255, 255, 255, 0.85); text-decoration: underline; text-underline-offset: 3px; }
.link-rodape:hover { color: #fff; }

/* Aviso "Instale o app" (celular) */
.aviso-instalar {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 90;
  display: grid; grid-template-columns: 44px 1fr 32px; gap: var(--e-3); align-items: start;
  padding: var(--e-4); border-radius: var(--raio); background: var(--superficie); border: 1px solid var(--borda); box-shadow: var(--sombra-3);
  animation: subir 260ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.aviso-instalar img { border-radius: 10px; }
.ai-texto { display: grid; gap: 4px; font-size: var(--t-sm); color: var(--texto-suave); }
.ai-texto strong { color: var(--texto); font-size: var(--t-md); }
.ai-texto .ic { width: 16px; height: 16px; vertical-align: -3px; color: var(--destaque); }
.ai-instalar { margin-top: var(--e-2); min-height: 40px; justify-self: start; }
.ai-fechar { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 8px; background: var(--superficie-2); color: var(--texto-suave); cursor: pointer; }
.ai-fechar .ic { width: 16px; height: 16px; }
@keyframes subir { from { transform: translateY(120%); } }
.texto-legal ul + p { margin-top: var(--e-3); }
.navbar .brand img.logo-site { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; }
.hero-logo { border-radius: 0; height: auto; aspect-ratio: 1; }

/* Estádio clicável: abre a localização no Google Maps */
.link-mapa { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; transition: text-decoration-color var(--transicao); }
.link-mapa:hover { text-decoration-color: currentColor; }
.link-mapa::after { content: ' ↗'; font-size: 0.8em; opacity: 0.6; }

/* Efeitos de "passar o mouse" que movem elementos: só em aparelhos com mouse.
   No celular, o toque deixava o elemento "preso" levantado (e o efeito de afundar ao tocar não aparecia). */
@media (hover: hover) {
  .btn-primario:hover { transform: translateY(-1px); box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.55); }
  .btn-azul:hover { background: var(--az-700); transform: translateY(-1px); }
  a.card:hover { transform: translateY(-2px); box-shadow: var(--sombra-3); border-color: var(--borda-forte); }
  .marco .card:hover { transform: translateX(3px); box-shadow: var(--sombra); }
  a.pino:hover .pino-num { transform: scale(1.12); }
  a.chave-confronto.destaque:hover { transform: translateY(-2px); }
  .duelo-vazio:hover .duelo-interroga { border-color: var(--destaque); color: var(--destaque); transform: rotate(8deg) scale(1.06); }
  .escolha-time-item:hover { background: rgba(255, 255, 255, 0.14); transform: translateY(-3px); }
  .noticia:hover::before { transform: scaleX(1); }
  .rede:hover { transform: translateY(-2px); filter: brightness(1.1); }
  .modal-fechar:hover { transform: rotate(90deg); }
  .trofeu:hover, .taca:hover, .grande-conquista:hover { transform: translateY(-4px); box-shadow: 0 18px 32px -16px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(242, 193, 78, 0.45); }
  .taca:hover::after, .grande-conquista:hover::after, .trofeu:hover::after { transition: transform 900ms ease; transform: translateX(120%); }
  .faixa-escudos li:hover img { transform: translateY(-8px) scale(1.08); filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 14px rgba(242, 193, 78, 0.4)); }
  .noticia:hover .noticia-foto img { transform: scale(1.07); filter: saturate(1.1); }
}

/* Imprimir ou "Salvar como PDF": mostra tudo, inclusive o que ainda não tinha aparecido na tela */
@media print {
  .barra-oculta, .revela-oculto, .chave-oculta .chave-fase, .chave-oculta .chave-slot::before, .chave-oculta .chave-slot::after { opacity: 1 !important; transform: none !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Vôlei: placar set a set ---------- */
.parciais { margin-top: var(--e-2); text-align: center; font-weight: 700; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.85); font-variant-numeric: tabular-nums; }
.set-topo { display: flex; justify-content: space-between; padding: 0 46px 0 122px; font-size: var(--t-xs); font-weight: 700; color: var(--texto-suave); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
.set-linha { display: grid; grid-template-columns: 76px 36px 1fr 36px; align-items: center; column-gap: 10px; row-gap: 2px; padding: 10px 0; border-top: 1px solid var(--borda); }
.set-linha small { grid-column: 3; color: var(--texto-fraco); font-size: var(--t-xs); text-align: center; }
.set-num { font-size: var(--t-xs); font-weight: 700; color: var(--texto-suave); text-transform: uppercase; letter-spacing: 0.04em; }
.set-linha b { font-family: var(--fonte-titulo); font-size: 1.5rem; text-align: center; color: var(--texto-fraco); font-variant-numeric: tabular-nums; }
.set-linha b.venceu { color: var(--destaque); }
.set-barra { display: flex; gap: 3px; height: 8px; }
.set-barra i { border-radius: 999px; }
.set-barra i.nosso { background: var(--destaque); }
.set-barra i.deles { background: var(--borda-forte); }
@media (max-width: 560px) {
  .set-topo { padding: 0 34px 0 96px; }
  .set-linha { grid-template-columns: 62px 28px 1fr 28px; column-gap: 8px; }
}

/* Escudo oficial do Sada Cruzeiro (vôlei): é largo, então ocupa a altura do espaço e cresce na largura */
img[src*="/escudos/sada-cruzeiro"] { width: auto !important; max-width: none; }
/* Feminino: a marca "Cabulosas" no cabeçalho de cada aba.
   Telas largas: coluna própria à direita (o título quebra a linha em vez de passar por baixo dela).
   Telas estreitas: logo abaixo do título. */
.page-header .hero-tag { display: flex; width: fit-content; }
.selo-cabulosas { display: block; height: auto; width: min(240px, 70vw); margin-top: var(--e-3); transform: rotate(-3deg); filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.35)); }
@media (min-width: 901px) {
  :root[data-modalidade="feminino"] .page-header .container:has(> .selo-cabulosas) { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--e-10); align-items: center; }
  :root[data-modalidade="feminino"] .page-header .container:has(> .selo-cabulosas) > * { grid-column: 1; }
  :root[data-modalidade="feminino"] .page-header .container > .selo-cabulosas { grid-column: 2; grid-row: 1 / span 4; align-self: center; width: clamp(240px, 26vw, 380px); margin: 0; }
  :root[data-modalidade="feminino"] .page-header .container:has(> .selo-cabulosas) > .faixa-escudos { grid-column: 1 / -1; }
}

/* Tabela de competição que ainda não começou */
.aviso-sem-jogos { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-4) var(--e-5); color: var(--texto-suave); }
.aviso-sem-jogos .ic { width: 22px; height: 22px; color: var(--destaque); flex: none; }
.aviso-sem-jogos strong { color: var(--texto); }

/* Celular: com 5 ou mais competições (vôlei), as abas quebram em duas linhas em vez de esconder as últimas */
@media (max-width: 760px) {
  .abas.abas-rolagem:has(> button:nth-of-type(5)) { flex-wrap: wrap; overflow: visible; }
  .abas.abas-rolagem:has(> button:nth-of-type(5)) > button { flex: 1 1 30%; }
}

/* ---------- Aba "Baixe o app" ---------- */
.nav-links .nav-app { display: inline-flex; align-items: center; gap: 6px; }
.nav-links .nav-app .ic { width: 16px; height: 16px; flex: none; color: var(--ouro); }
.app-topo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e-8); align-items: center; }
.app-topo-texto p { max-width: 56ch; }
.app-icone { display: grid; justify-items: center; gap: var(--e-3); color: rgba(255, 255, 255, 0.9); font-weight: 600; font-size: var(--t-sm); }
.app-icone img { width: 132px; height: 132px; border-radius: 30px; box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.14); animation: app-flutua 4s ease-in-out infinite; }
@keyframes app-flutua { 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .app-icone img { animation: none; } }
.app-status { margin-top: var(--e-6); display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3) var(--e-4); }
.app-status:empty { display: none; }
.app-status small { color: rgba(255, 255, 255, 0.72); font-size: var(--t-sm); }
.app-status p { margin: 0; color: rgba(255, 255, 255, 0.88); font-size: var(--t-md); }
.app-status .app-ok { display: inline-flex; align-items: center; gap: var(--e-2); padding: 10px 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); }
.app-ok .ic { width: 18px; height: 18px; color: var(--ouro); }

.app-sistemas { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--e-5); align-items: start; }
.app-sistema { padding: var(--e-6); scroll-margin-top: 90px; }
.app-sistema-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); }
.app-sistema h3 { font-family: var(--fonte-titulo); font-weight: 800; text-transform: uppercase; font-size: 1.6rem; line-height: 1; }
.app-seu { padding: 3px 10px; border-radius: 999px; background: var(--ouro); color: #1a1300; font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.app-meu { border-color: var(--destaque); box-shadow: 0 0 0 1px var(--destaque), var(--sombra-1); }
.app-navegador { margin-top: 6px; color: var(--texto-suave); font-size: var(--t-sm); }
.app-passos { margin-top: var(--e-5); display: grid; gap: var(--e-4); list-style: none; padding: 0; counter-reset: passo; }
.app-passos li { position: relative; padding-left: 44px; min-height: 30px; line-height: 1.55; color: var(--texto-suave); counter-increment: passo; }
.app-passos li::before { content: counter(passo); position: absolute; left: 0; top: -2px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--destaque); color: var(--superficie); font-weight: 800; font-size: var(--t-sm); }
.app-passos b { color: var(--texto); }
.app-ic-compartilhar { width: 18px; height: 18px; vertical-align: -3px; color: var(--destaque); }
.app-pc { text-align: center; }
.app-pc .app-sistema-topo { justify-content: center; }
.app-qr { display: block; margin: var(--e-4) auto 0; width: 168px; height: 168px; border-radius: 12px; background: #fff; }

.app-vantagens { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--e-4); }
.app-vantagens li { padding: var(--e-5); display: grid; gap: 6px; align-content: start; }
.app-vantagens strong { font-size: var(--t-lg); }
.app-vantagens li > span:last-child { color: var(--texto-suave); font-size: var(--t-sm); line-height: 1.55; }
.app-vic { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--superficie-2); color: var(--destaque); margin-bottom: 6px; }
.app-vic .ic { width: 22px; height: 22px; }

.app-perguntas details { max-width: 80ch; border-bottom: 1px solid var(--borda); padding: var(--e-4) 0; }
.app-perguntas summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--e-4); font-weight: 700; color: var(--texto); }
.app-perguntas summary::-webkit-details-marker { display: none; }
.app-perguntas summary::after { content: '+'; flex: none; font-size: 1.4rem; line-height: 1; color: var(--destaque); transition: transform var(--transicao); }
.app-perguntas details[open] summary::after { transform: rotate(45deg); }
.app-perguntas details p { margin-top: var(--e-3); color: var(--texto-suave); line-height: 1.7; }
.app-perguntas a { color: var(--destaque); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) {
  .app-topo { grid-template-columns: 1fr; gap: var(--e-5); }
  .app-icone { order: -1; justify-items: start; }
  .app-icone img { width: 84px; height: 84px; border-radius: 20px; }
  .app-icone span { display: none; }
  .app-vantagens li { grid-template-columns: 44px minmax(0, 1fr); column-gap: var(--e-4); row-gap: 2px; padding: var(--e-4); }
  .app-vic { grid-row: span 2; margin: 0; }
}
.ai-texto a { color: var(--destaque); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.sem-quebra { white-space: nowrap; }

/* Celular: as abas Todos | Resultados | Próximos ocupam a largura toda, divididas por igual */
@media (max-width: 760px) {
  .filtros > .abas { display: flex; width: 100%; }
  .filtros > .abas > button { flex: 1; }
}