/* Uberlândia Esporte Clube — página principal
   Só a identidade do clube (ver CORES.md): verde #307F49, dourado #DBC238, branco #FEFEFE e preto,
   mais os tons do site (noite, mata, verde-claro). Fontes do site oficial do clube: Lato e Roboto Slab.
   Uma linguagem só: o placar do Parque do Sabiá. O hero é o placar do título; cada seção abre como uma
   linha de placar (nome em LED + fio + numeração), e os números grandes também são LED (assets/led.js). */

:root {
  --verde: #307f49;
  --ouro: #dbc238;
  --branco: #fefefe;
  --preto: #000000;
  --noite: #06120b;
  --mata: #0b2215;
  --mata-2: #10301e;
  --verde-claro: #5fc27f;

  --fundo: #040a06;
  --texto: rgba(254, 254, 254, 0.92);
  --texto-2: rgba(254, 254, 254, 0.68);
  --texto-3: rgba(254, 254, 254, 0.5);
  --linha: rgba(254, 254, 254, 0.1);
  --linha-2: rgba(254, 254, 254, 0.18);
  --linha-ouro: rgba(219, 194, 56, 0.45);
  --painel: linear-gradient(180deg, #0b0d0c, #050605);

  --lato: "Lato", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --slab: "Roboto Slab", Georgia, serif;
  --caixa: 1240px;
  --gutter: clamp(18px, 4vw, 56px);
  --topo: 72px;
  --mola: cubic-bezier(0.32, 0.72, 0, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-padding-top: calc(var(--topo) + 12px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--fundo); color: var(--texto); font-family: var(--lato); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
::selection { background: var(--ouro); color: var(--preto); }
:focus-visible { outline: 2px solid var(--ouro); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.caixa { width: min(var(--caixa), 100% - 2 * var(--gutter)); margin-inline: auto; }
.pular { position: fixed; left: 12px; top: -60px; z-index: 200; padding: 10px 16px; border-radius: 999px; background: var(--ouro); color: var(--preto); font-weight: 700; text-decoration: none; }
.pular:focus { top: 12px; }
.credito { position: absolute; right: 14px; bottom: 10px; margin: 0; font-size: 12px; color: rgba(254, 254, 254, 0.55); }
.titulo { margin: 0; font-weight: 900; font-size: clamp(36px, 4.6vw, 64px); line-height: 1.02; letter-spacing: -0.03em; color: var(--branco); text-wrap: balance; }
.titulo em { font-style: normal; font-weight: 300; color: var(--ouro); letter-spacing: -0.035em; }

/* ------------------------------------------------------------- botões e links */
.bt {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 24px;
  border: 0; border-radius: 999px; font-weight: 700; font-size: 15px; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color 0.2s, filter 0.2s, transform 0.12s ease-out;
}
.bt:active { transform: scale(0.97); }
.bt--ouro { background: var(--ouro); color: var(--preto); }
.bt--ouro:hover { filter: brightness(1.08); }
.bt--vidro { background: rgba(254, 254, 254, 0.12); color: var(--branco); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 0 0 1px rgba(254, 254, 254, 0.14); }
.bt--vidro:hover { background: rgba(254, 254, 254, 0.2); }
.bt--pequeno { min-height: 38px; padding: 8px 18px; font-size: 14px; }
/* Link com seta: a forma única de "leia mais" na página */
.seta { display: inline-flex; align-items: center; gap: 10px; color: var(--ouro); font-weight: 700; font-size: 15px; text-decoration: none; }
.seta::after { content: ""; width: 26px; height: 1px; background: currentColor; transition: width 0.35s var(--mola); }
.seta:hover::after { width: 40px; }

/* ------------------------------------------------------------- topo */
.topo { position: fixed; inset: 0 0 auto; z-index: 100; transition: background-color 0.3s, box-shadow 0.3s; }
.topo.is-rolado { background: rgba(6, 18, 11, 0.72); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6); box-shadow: 0 1px 0 var(--linha); }
.topo__barra { display: flex; align-items: center; gap: 28px; height: var(--topo); width: min(1400px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--branco); }
.marca img { width: 30px; height: auto; }
.marca__nome { display: grid; font-weight: 900; font-size: 16px; line-height: 1.1; letter-spacing: -0.01em; }
.marca__nome small { font-weight: 400; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--texto-2); }
.topo__nav { display: flex; gap: 4px; margin-left: auto; }
.topo__nav a { padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 700; text-decoration: none; color: var(--texto-2); transition: color 0.2s, background-color 0.2s; }
.topo__nav a:hover { color: var(--branco); background: rgba(254, 254, 254, 0.08); }
.topo__menu { display: none; width: 42px; height: 42px; margin-left: auto; border: 0; border-radius: 50%; background: rgba(254, 254, 254, 0.1); cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.topo__menu span { width: 16px; height: 1.5px; background: var(--branco); transition: transform 0.3s var(--mola); }
.topo__menu[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.topo__menu[aria-expanded="true"] span:last-child { transform: translateY(-3.25px) rotate(-45deg); }
.menu-celular { display: grid; gap: 4px; padding: 8px var(--gutter) 22px; background: rgba(6, 18, 11, 0.94); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); border-bottom: 1px solid var(--linha); }
.menu-celular a:not(.bt) { padding: 12px 0; border-bottom: 1px solid var(--linha); font-size: 18px; font-weight: 700; text-decoration: none; }
.menu-celular .bt { margin-top: 12px; }

/* ------------------------------------------------------------- abertura (hero) */
.abertura { position: relative; isolation: isolate; min-height: 100svh; display: grid; align-items: center; padding-top: var(--topo); overflow: hidden; }
.abertura__foto { position: absolute; inset: 0; z-index: -2; }
.abertura__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 40%; filter: saturate(0.8) brightness(0.62) contrast(1.06); }
.abertura__foto::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(4, 10, 6, 0.95) 0%, rgba(4, 10, 6, 0.72) 42%, rgba(4, 10, 6, 0.55) 70%, rgba(4, 10, 6, 0.8) 100%),
    linear-gradient(180deg, rgba(4, 10, 6, 0.65) 0%, transparent 22%, transparent 62%, var(--fundo) 100%);
}
.abertura__grade { position: absolute; inset: 0; z-index: -1; display: grid; grid-template-columns: repeat(4, 1fr); width: min(1400px, 100% - 2 * var(--gutter)); margin-inline: auto; border-left: 1px solid rgba(254, 254, 254, 0.05); pointer-events: none; }
.abertura__grade i { border-right: 1px solid rgba(254, 254, 254, 0.05); }
.abertura__conteudo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(420px, 640px); gap: clamp(32px, 5vw, 80px); align-items: center; padding: clamp(36px, 7vh, 90px) 0 clamp(28px, 5vh, 56px); }
.abertura__texto { display: grid; gap: 22px; }
.abertura__sobre { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--texto-2); }
.abertura__sobre img { width: 22px; height: auto; }
.abertura__frase { margin: 0; max-width: 34ch; padding-top: 18px; border-top: 1px solid var(--linha-2); font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; color: var(--texto-2); }
.abertura__titulo { margin: 0; font-weight: 900; font-size: clamp(42px, 5.6vw, 84px); line-height: 0.98; letter-spacing: -0.035em; color: var(--branco); text-wrap: balance; }
.abertura__titulo em { display: block; margin-top: 6px; font-style: normal; font-weight: 300; color: var(--ouro); letter-spacing: -0.04em; }

/* O placar do Sabiá */
.placar { margin: 0; display: grid; gap: 14px; }
.placar__caixa {
  position: relative; padding: 26px 24px 22px; border-radius: 20px; background: var(--painel);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.9), inset 0 0 0 1px rgba(254, 254, 254, 0.08), inset 0 1px 0 rgba(254, 254, 254, 0.12);
}
.placar__caixa::before { content: ""; position: absolute; inset: 9px; border-radius: 13px; border: 1px solid rgba(254, 254, 254, 0.05); pointer-events: none; }
.placar__luz { position: absolute; top: 10px; width: 5px; height: 5px; border-radius: 50%; background: rgba(254, 254, 254, 0.18); }
.placar__luz:first-of-type { left: 14px; }
.placar__luz:last-of-type { right: 14px; }
.placar__tela { display: none; width: 100%; height: auto; }
.placar__texto { display: grid; gap: 4px; font-family: var(--slab); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; }
.placar__texto p { margin: 0; }
.placar__fase { color: var(--verde-claro); font-size: 15px; }
.placar__time { display: flex; justify-content: space-between; color: #fff3d6; font-size: clamp(26px, 3vw, 38px); }
.placar__campeao { margin-top: 6px !important; color: var(--ouro); font-size: 22px; text-align: center; }
.placar.is-aceso .placar__tela { display: block; }
.placar.is-aceso .placar__texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.placar__legenda { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; font-size: 13.5px; color: var(--texto-2); }
.placar__legenda span { display: flex; align-items: center; gap: 8px; }
.placar__legenda span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ouro); flex: none; }


/* ------------------------------------------------------------- seções: linha de placar */
.bloco { position: relative; padding: clamp(72px, 10vw, 128px) 0; }
.led { display: block; }
.linha-placar { display: flex; align-items: center; gap: 18px; margin-bottom: clamp(28px, 4vw, 44px); }
.linha-placar canvas { flex: none; }
.linha-placar__fio { flex: 1; height: 1px; background: linear-gradient(90deg, var(--linha-ouro), var(--linha) 40%); }
.linha-placar__n { font-family: var(--slab); font-weight: 300; font-size: 14px; letter-spacing: 0.08em; color: var(--texto-3); }
.bloco__topo { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 20px 56px; align-items: end; margin-bottom: clamp(36px, 5vw, 60px); }
.bloco__titulo { margin: 0; font-weight: 900; font-size: clamp(32px, 3.8vw, 52px); line-height: 1.04; letter-spacing: -0.03em; color: var(--branco); text-wrap: balance; }
/* Títulos das seções: cada linha sobe de trás de uma máscara (linha a linha, nunca palavra a palavra) */
.linhas > span { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.linhas > span > span { display: block; }
.revelar .linhas > span > span { transform: translateY(108%); transition: transform 1.1s var(--mola); }
.revelar .linhas > span + span > span { transition-delay: 0.12s; }
.revelar.is-visivel .linhas > span > span { transform: none; }
.grifo { position: relative; display: inline-block; color: var(--ouro); }
.grifo::after { content: ""; position: absolute; left: 0; right: 0.12em; bottom: 0.02em; height: 3px; border-radius: 3px; background: var(--ouro); transform-origin: left; }
.revelar .grifo::after { transform: scaleX(0); transition: transform 0.9s var(--mola) 0.75s; }
.revelar.is-visivel .grifo::after { transform: none; }
.bloco__apoio { margin: 0; color: var(--texto-2); font-size: 17px; line-height: 1.6; }
.bloco__apoio strong { color: var(--branco); }
.bloco__topo .seta { justify-self: end; }
.rodape-bloco { margin: 28px 0 0; padding-top: 16px; border-top: 1px solid var(--linha); color: var(--texto-3); font-size: 13px; }

/* 01 · Títulos: dois painéis de LED, ficha técnica e a régua do tempo */
.tacas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.taca { display: grid; gap: 22px; align-content: start; }
.painel-led { position: relative; padding: clamp(18px, 2.4vw, 30px); border-radius: 18px; background: var(--painel); box-shadow: inset 0 0 0 1px rgba(254, 254, 254, 0.08), 0 30px 60px -36px rgba(0, 0, 0, 0.9); }
.painel-led canvas { width: 100%; }
.ficha { display: grid; margin: 0; border-top: 1px solid var(--linha-2); }
.ficha > div { display: grid; grid-template-columns: 130px 1fr; gap: 16px; padding: 12px 4px; border-bottom: 1px solid var(--linha); }
.ficha dt { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--texto-3); padding-top: 2px; }
.ficha dd { margin: 0; color: var(--branco); font-size: 15.5px; line-height: 1.5; }

.regua { position: relative; height: 2px; margin: clamp(120px, 13vw, 150px) clamp(20px, 3vw, 40px) clamp(96px, 10vw, 120px); padding: 0; list-style: none; }
.regua::before { content: ""; position: absolute; inset: 0; border-radius: 2px; background: linear-gradient(90deg, var(--verde), var(--verde-claro) 55%, var(--ouro)); transform-origin: left; }
.regua li { position: absolute; left: var(--x); bottom: 0; display: grid; justify-items: center; gap: 2px; transform: translateX(-50%); padding-bottom: 18px; text-align: center; white-space: nowrap; }
.regua li::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--fundo); box-shadow: inset 0 0 0 2px var(--verde-claro); }
.regua li.em-baixo { bottom: auto; top: 0; padding: 18px 0 0; }
.regua li.em-baixo::after { bottom: auto; top: -5px; }
.regua li.ouro::after { background: var(--ouro); box-shadow: 0 0 0 4px rgba(219, 194, 56, 0.2); }
.regua b { font-family: var(--slab); font-weight: 400; font-size: 22px; color: var(--branco); }
.regua li.ouro b { color: var(--ouro); }
.regua span { font-size: 13px; color: var(--texto-2); }
.taca-icone { width: 34px; height: 34px; margin-bottom: 4px; color: rgba(255, 241, 207, 0.85); }
.regua li.ouro .taca-icone { width: 48px; height: 48px; color: var(--ouro); filter: drop-shadow(0 0 12px rgba(219, 194, 56, 0.35)); }
.regua li.em-baixo .taca-icone { order: 3; margin: 6px 0 0; }
/* A régua se desenha da esquerda para a direita; os marcos acendem em sequência e as taças sobem */
.revelar.regua { opacity: 1; transform: none; }
.revelar.regua::before { transform: scaleX(0); transition: transform 1.6s var(--mola); }
.revelar.regua li { opacity: 0; transition: opacity 0.6s ease calc(0.25s + var(--i) * 0.2s); }
.revelar.regua .taca-icone { transform: translateY(10px) scale(0.5); opacity: 0; transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) calc(0.45s + var(--i) * 0.2s), opacity 0.4s ease calc(0.45s + var(--i) * 0.2s); }
.revelar.regua.is-visivel::before { transform: none; }
.revelar.regua.is-visivel li { opacity: 1; }
.revelar.regua.is-visivel .taca-icone { transform: none; opacity: 1; }

/* 02 · Sabiá: foto aérea ao fundo, números em LED */
.bloco--sabia { isolation: isolate; overflow: hidden; }
.sabia__fundo { position: absolute; inset: 0; z-index: -1; }
.sabia__fundo img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 62%; filter: saturate(0.75) brightness(0.55); }
.sabia__fundo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--fundo) 0%, rgba(4, 10, 6, 0.55) 30%, rgba(4, 10, 6, 0.55) 60%, var(--fundo) 100%), linear-gradient(90deg, rgba(4, 10, 6, 0.85), transparent 70%); }
.placares { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; }
.placares > div { display: grid; gap: 14px; align-content: start; padding: 20px; border-radius: 16px; background: rgba(5, 6, 5, 0.82); box-shadow: inset 0 0 0 1px rgba(254, 254, 254, 0.08); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.placares dt { min-height: 28px; display: flex; align-items: center; }
.placares dd { margin: 0; display: grid; gap: 4px; color: var(--texto-2); font-size: 14px; line-height: 1.5; }
.placares dd b { color: var(--branco); font-size: 15px; }

/* 03 · Elenco sem JavaScript: a escalação por setor */
.escalacao { border-top: 1px solid var(--linha-2); }
.escalacao > section { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; align-items: baseline; padding: 26px 0; border-bottom: 1px solid var(--linha); }
.escalacao h3 { display: flex; align-items: baseline; gap: 12px; margin: 0; font-size: 20px; font-weight: 900; letter-spacing: -0.01em; color: var(--branco); }
.escalacao h3 b { font-family: var(--slab); font-weight: 300; font-size: 28px; line-height: 1; color: var(--ouro); }
.escalacao ul { display: flex; flex-wrap: wrap; gap: 10px 30px; margin: 0; padding: 0; list-style: none; }
.escalacao li { font-size: clamp(18px, 1.7vw, 23px); line-height: 1.35; letter-spacing: -0.01em; color: var(--texto); }

/* 03 · Elenco com foto: cartões com o fundo do painel de LED, o jogador recortado por cima */
.filtro { display: flex; flex-wrap: wrap; gap: 8px; margin: -12px 0 28px; }
.filtro button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 16px; border: 0; border-radius: 999px; background: rgba(254, 254, 254, 0.05); box-shadow: inset 0 0 0 1px var(--linha); color: var(--texto-2); font: 700 14px/1 var(--lato); cursor: pointer; transition: background-color 0.2s, color 0.2s, transform 0.12s ease-out; }
.filtro button:hover { color: var(--branco); background: rgba(254, 254, 254, 0.1); }
.filtro button:active { transform: scale(0.97); }
.filtro button b { font-family: var(--slab); font-weight: 400; color: var(--texto-3); }
.filtro button[aria-pressed="true"] { background: var(--ouro); color: var(--preto); box-shadow: none; }
.filtro button[aria-pressed="true"] b { color: rgba(0, 0, 0, 0.55); }
.elenco__grade { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px 18px; margin: 0; padding: 0; list-style: none; }
.atleta { width: calc((100% - 6 * 18px) / 7); }
.atleta__bt { display: grid; gap: 12px; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: 16px; }
.atleta__bt:active .atleta__foto { transform: scale(0.98); }
.atleta__foto {
  position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 16px; transition: box-shadow 0.25s, transform 0.12s ease-out;
  background:
    linear-gradient(180deg, transparent 38%, rgba(48, 127, 73, 0.22) 72%, rgba(48, 127, 73, 0.5) 100%),
    radial-gradient(rgba(254, 254, 254, 0.07) 1px, transparent 1.4px) 0 0 / 9px 9px,
    var(--painel);
  box-shadow: inset 0 0 0 1px rgba(254, 254, 254, 0.08);
}
.atleta__foto img { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 94%; object-fit: contain; object-position: 50% 100%; transform-origin: 50% 100%; transition: transform 0.7s var(--mola); }
.atleta__bt:hover .atleta__foto img { transform: scale(1.05); }
.atleta__bt:hover .atleta__foto { box-shadow: inset 0 0 0 1.5px rgba(219, 194, 56, 0.55); }
.atleta__silhueta { position: absolute; left: 12%; bottom: 0; width: 76%; height: auto; }
.atleta__silhueta circle, .atleta__silhueta path { fill: rgba(254, 254, 254, 0.04); stroke: rgba(254, 254, 254, 0.16); stroke-width: 1; }
.atleta__silhueta text { font-family: var(--slab); font-weight: 300; font-size: 22px; fill: var(--ouro); letter-spacing: 0.04em; }
.atleta__txt { display: grid; gap: 2px; padding: 0 4px; }
.atleta__num { position: absolute; top: 10px; left: 12px; font-family: var(--slab); font-weight: 300; font-size: 24px; line-height: 1; color: var(--ouro); }
.atleta__txt strong { font-size: 16px; font-weight: 900; line-height: 1.25; letter-spacing: -0.01em; color: var(--branco); }
.atleta__txt small { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--texto-3); }
@keyframes subir { from { opacity: 0; transform: translateY(16px); } }
.revelar.is-visivel .atleta, .elenco.is-trocando .atleta { animation: subir 0.8s var(--mola) both; animation-delay: calc(var(--i) * 55ms); }

/* Botão "Campo": o elenco no gramado, cada um na sua posição */
.filtro__campo { margin-left: auto; }
.filtro__campo svg { width: 18px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.campo__gramado {
  position: relative; aspect-ratio: 105 / 60; overflow: hidden; border-radius: 20px;
  background: repeating-linear-gradient(90deg, #0c2817 0 9.52%, #0a2213 9.52% 19.04%);
  box-shadow: inset 0 0 0 1px var(--linha), 0 40px 80px -40px rgba(0, 0, 0, 0.9);
}
.campo__gramado::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, 0.28), transparent 25%, transparent 75%, rgba(0, 0, 0, 0.34)); }
.campo__linhas { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: rgba(254, 254, 254, 0.2); stroke-width: 1; }
.campo__linhas * { vector-effect: non-scaling-stroke; }
.campo__linhas circle[r="0.5"] { fill: rgba(254, 254, 254, 0.3); }
.campo__linhas--em-pe { display: none; }
.zona { position: absolute; z-index: 1; left: clamp(40px, calc(var(--x) * 1%), calc(100% - 40px)); top: calc(var(--y) * 1%); transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 6px; }
.zona__nome { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(254, 254, 254, 0.5); white-space: nowrap; }
.zona__curto { display: none; }
.zona__pecas { display: flex; flex-direction: column; gap: 6px; }
.zona--ala .zona__pecas { flex-direction: row; }
.peca {
  display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border: 0; border-radius: 999px;
  background: rgba(4, 10, 6, 0.74); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(254, 254, 254, 0.14);
  color: var(--branco); font: 700 13px/1.1 var(--lato); white-space: nowrap; cursor: pointer;
  transition: box-shadow 0.2s, opacity 0.3s, transform 0.12s ease-out;
}
.peca:hover { box-shadow: inset 0 0 0 1.5px var(--ouro); }
.peca:active { transform: scale(0.96); }
.peca.is-apagada { opacity: 0.22; }
.peca__foto { flex: none; display: grid; place-items: center; width: 36px; height: 36px; overflow: hidden; border-radius: 50%; background: linear-gradient(180deg, #1c4229, #0d2416); }
.peca__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 6%; }
.peca__foto b { font-family: var(--slab); font-weight: 400; font-size: 13px; color: var(--ouro); }
@keyframes peca-entra { from { opacity: 0; transform: scale(0.6); } }
.campo.is-entrando .peca { animation: peca-entra 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-delay: calc(var(--n) * 22ms); }
.campo.is-entrando .zona__nome { animation: subir 0.6s var(--mola) both; }
.campo__legenda { margin: 14px 0 0; color: var(--texto-3); font-size: 13px; }

/* 04 · Agenda: jogos com a data em painel, avisos ao lado */
.agenda { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.agenda--sem-avisos { grid-template-columns: minmax(0, 1fr); }
.agenda--sem-avisos .agenda__avisos { display: none; }
.agenda h3 { margin: 0 0 14px; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--texto-3); }
.agenda__jogos > h3 + .jogos + h3 { margin-top: 36px; }
.agenda__vazio { display: grid; gap: 18px; }
.agenda__vazio p { margin: 0; max-width: 52ch; color: var(--texto-2); }
.jogos { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--linha-2); }
.jogo { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--linha); }
.jogo__data { display: grid; justify-items: center; padding: 10px 0 8px; border-radius: 12px; background: var(--painel); box-shadow: inset 0 0 0 1px rgba(254, 254, 254, 0.08); line-height: 1.1; }
.jogo__data b { font-family: var(--slab); font-weight: 400; font-size: 28px; color: var(--branco); }
.jogo__data span { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; color: var(--ouro); }
.jogo__data small { font-size: 11px; color: var(--texto-3); }
.jogo__info { display: grid; gap: 4px; }
.jogo__info strong { font-size: 19px; font-weight: 900; letter-spacing: -0.01em; color: var(--branco); }
.jogo__info i { font-style: normal; font-weight: 300; color: var(--ouro); }
.jogo__info span { font-size: 14px; color: var(--texto-2); }
.jogo__mando { padding: 6px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--linha-2); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--texto-2); white-space: nowrap; }
.jogo__placar { font-family: var(--slab); font-size: 24px; color: var(--ouro); white-space: nowrap; }
.jogo--passado .jogo__data b { color: var(--texto-2); }
.agenda__avisos { padding: 24px 24px 10px; border-radius: 18px; background: rgba(254, 254, 254, 0.03); box-shadow: inset 0 0 0 1px var(--linha); }
.agenda__avisos ul { margin: 0; padding: 0; list-style: none; }
.agenda__avisos li { display: grid; gap: 6px; justify-items: start; padding: 14px 0; border-top: 1px solid var(--linha); }
.agenda__avisos time { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ouro); }
.agenda__avisos p { margin: 0; color: var(--texto); font-size: 15.5px; line-height: 1.55; }

/* 05 · Notícias: uma capa e duas matérias, sem caixas */
.materias { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: 0 clamp(24px, 4vw, 56px); }
.materia { display: grid; gap: 16px; text-decoration: none; }
.materia__foto { display: block; overflow: hidden; border-radius: 14px; background: var(--mata); }
.materia__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--mola); }
.materia:hover .materia__foto img { transform: scale(1.04); }
.materia__txt { display: grid; gap: 6px; }
.materia__txt small { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ouro); }
.materia__txt strong { font-size: 19px; line-height: 1.3; letter-spacing: -0.01em; color: var(--branco); transition: color 0.2s; }
.materia:hover strong { color: var(--ouro); }
.materia--capa { grid-row: 1 / 3; }
.materia--capa .materia__foto { aspect-ratio: 16 / 10; }
.materias--uma { grid-template-columns: minmax(0, 1fr); }
.materia__fina { color: var(--texto-2); font-size: 16px; line-height: 1.55; }
.mh-rodape { display: flex; justify-content: center; margin-top: clamp(32px, 4vw, 48px); }
.materia--capa .materia__txt strong { font-size: clamp(24px, 2.4vw, 32px); font-weight: 900; letter-spacing: -0.02em; }
.materias > .materia:not(.materia--capa) { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); gap: 22px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--linha); }
.materias > .materia:not(.materia--capa):nth-child(2) { border-top: 1px solid var(--linha); }
.materias > .materia:not(.materia--capa) .materia__foto { position: relative; align-self: stretch; min-height: 150px; }
.materias > .materia:not(.materia--capa) .materia__foto img { position: absolute; inset: 0; }

/* 06 · O clube hoje */
.hoje { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); }
.hoje__item { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 24px; align-items: center; padding-top: 24px; border-top: 1px solid var(--linha-2); }
.hoje__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; }
.hoje__item h3 { margin: 0 0 10px; font-size: 24px; font-weight: 900; letter-spacing: -0.02em; color: var(--branco); }
.hoje__item h3 span { color: var(--ouro); }
.hoje__item p { margin: 0 0 14px; color: var(--texto-2); font-size: 15.5px; line-height: 1.6; }
.hoje__led { display: grid; place-items: center; aspect-ratio: 4 / 3; padding: 20px; border-radius: 14px; background: var(--painel); box-shadow: inset 0 0 0 1px rgba(254, 254, 254, 0.08); }

/* Ficha do jogador */
.ficha-jogador { width: min(880px, 100% - 24px); max-height: calc(100svh - 24px); padding: 0; border: 0; border-radius: 24px; background: #07110b; color: var(--texto); box-shadow: 0 50px 120px -30px rgba(0, 0, 0, 0.9), inset 0 0 0 1px var(--linha); overflow: auto; }
.ficha-jogador::backdrop { background: rgba(2, 6, 4, 0.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ficha-jogador[open] { animation: ficha-abre 0.45s var(--mola); }
@keyframes ficha-abre { from { opacity: 0; transform: translateY(16px) scale(0.97); } }
.fj { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.fj__foto {
  position: relative; min-height: 460px;
  background:
    linear-gradient(180deg, transparent 38%, rgba(48, 127, 73, 0.22) 72%, rgba(48, 127, 73, 0.5) 100%),
    radial-gradient(rgba(254, 254, 254, 0.07) 1px, transparent 1.4px) 0 0 / 10px 10px,
    var(--painel);
}
.fj__foto img { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 92%; object-fit: contain; object-position: 50% 100%; }
.fj__foto .atleta__silhueta { left: 14%; width: 72%; }
.fj__dados { display: grid; align-content: start; gap: 4px; padding: 26px 30px 24px; }
.fj__topo { display: flex; align-items: flex-start; justify-content: space-between; min-height: 44px; margin-bottom: 8px; }
.fj__fechar { width: 40px; height: 40px; margin-left: auto; border: 0; border-radius: 50%; background: rgba(254, 254, 254, 0.08); color: var(--branco); font-size: 22px; line-height: 1; cursor: pointer; transition: background-color 0.2s; }
.fj__fechar:hover { background: rgba(254, 254, 254, 0.16); }
.fj__setor { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ouro); }
.fj__nome { margin: 0; font-size: clamp(32px, 4vw, 46px); font-weight: 900; line-height: 1.02; letter-spacing: -0.03em; color: var(--branco); }
.fj__completo { margin: 4px 0 14px; color: var(--texto-2); font-size: 15px; }
.fj__lista { margin: 0; border-top: 1px solid var(--linha-2); }
.fj__lista > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; padding: 10px 2px; border-bottom: 1px solid var(--linha); }
.fj__lista dt { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--texto-3); padding-top: 3px; }
.fj__lista dd { margin: 0; color: var(--branco); font-size: 16px; }
.fj__nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 20px; }
.fj__nav .bt { min-height: 40px; padding: 8px 16px; font-size: 14px; }
.fj__fonte { font-size: 13px; color: var(--texto-3); }
.fj__fonte:hover { color: var(--ouro); }

/* Torcida */
.torcida { position: relative; isolation: isolate; display: grid; align-items: end; min-height: 90vh; overflow: hidden; }
.torcida > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9) brightness(0.8); }
.torcida::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--fundo) 0%, transparent 30%, rgba(4, 10, 6, 0.4) 55%, var(--fundo) 100%); }
.torcida__texto { display: grid; gap: 26px; justify-items: start; padding-bottom: clamp(60px, 10vh, 110px); }
.torcida .titulo { max-width: 16ch; font-size: clamp(36px, 5vw, 70px); }

/* Rodapé */
.rodape { padding: 56px 0 40px; border-top: 1px solid var(--linha); }
.rodape__grade { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; }
.rodape__marca { display: flex; align-items: center; gap: 16px; }
.rodape__marca img { width: 40px; }
.rodape__marca p { margin: 0; display: grid; color: var(--texto-3); font-size: 14px; }
.rodape__marca strong { color: var(--branco); font-size: 17px; }
.rodape nav { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.rodape nav a { color: var(--texto-2); text-decoration: none; font-size: 14px; font-weight: 700; }
.rodape nav a:hover { color: var(--ouro); }
.rodape__fontes { margin-top: 28px !important; color: var(--texto-3); font-size: 12.5px; }

/* Entrada suave das seções */
.revelar { opacity: 0; transform: translateY(18px); transition: opacity 0.9s var(--mola), transform 0.9s var(--mola); }
.revelar.is-visivel { opacity: 1; transform: none; }

/* ------------------------------------------------------------- responsivo */
@media (max-width: 1100px) {
  /* O placar sobe para logo depois do título */
  .abertura__conteudo { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .abertura__texto { display: contents; }
  .abertura__titulo { order: 2; }
  .placar { order: 3; max-width: 640px; }
  .abertura__frase { order: 4; }
  .placares { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .escalacao > section { grid-template-columns: 190px minmax(0, 1fr); }
  .atleta { width: calc((100% - 3 * 18px) / 4); }
  .hoje, .agenda { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .topo__nav, .topo__cta { display: none; }
  .topo__menu { display: flex; }
  .bloco__topo, .tacas, .materias { grid-template-columns: minmax(0, 1fr); }
  .bloco__topo .seta { justify-self: start; }
  .materia--capa { grid-row: auto; margin-bottom: 8px; }
  /* Campo em pé, ataque para cima */
  .campo__gramado { aspect-ratio: 60 / 105; max-width: 480px; margin-inline: auto; background: repeating-linear-gradient(0deg, #0c2817 0 9.52%, #0a2213 9.52% 19.04%); }
  .campo__linhas--deitado { display: none; }
  .campo__linhas--em-pe { display: block; }
  .zona { left: clamp(36px, calc(var(--y) * 1%), calc(100% - 36px)); top: clamp(50px, calc((100 - var(--x)) * 1%), calc(100% - 50px)); gap: 4px; }
  .zona--centro .zona__pecas { flex-direction: row; gap: 4px; }
  .zona--ala .zona__pecas { flex-direction: column; gap: 6px; }
  .zona__nome { font-size: 9px; letter-spacing: 0.1em; }
  .zona--ala .zona__longo { display: none; }
  .zona--ala .zona__curto { display: inline; }
  .peca { flex-direction: column; gap: 4px; width: 66px; padding: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; font-size: 11px; white-space: normal; text-align: center; }
  .peca:hover { box-shadow: none; }
  .peca:hover .peca__foto { box-shadow: 0 0 0 1.5px var(--ouro); }
  .peca__foto { width: 40px; height: 40px; box-shadow: 0 0 0 1px rgba(254, 254, 254, 0.2); }
  .peca__nome { padding: 2px 5px; border-radius: 6px; background: rgba(4, 10, 6, 0.72); line-height: 1.15; }
}
@media (max-width: 760px) {
  /* Régua na vertical */
  .regua { height: auto; margin: 56px 0 8px 8px; padding: 4px 0; border-left: 2px solid var(--verde-claro); display: grid; gap: 22px; }
  .regua::before { display: none; }
  .regua .taca-icone, .regua li.ouro .taca-icone, .regua li.em-baixo .taca-icone { order: 3; width: 22px; height: 22px; margin: 0; align-self: center; }
  .regua li, .regua li.em-baixo { position: relative; left: auto; top: auto; bottom: auto; transform: none; display: flex; align-items: baseline; gap: 12px; padding: 0 0 0 22px; text-align: left; }
  .regua li::after, .regua li.em-baixo::after { left: -7px; top: 8px; bottom: auto; margin-left: 0; }
}
@media (max-width: 600px) {
  .placares, .hoje__item { grid-template-columns: minmax(0, 1fr); }
  .escalacao > section { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 22px 0; }
  .escalacao ul { gap: 8px 22px; }
  .ficha > div { grid-template-columns: 1fr; gap: 2px; }
  .materias > .materia:not(.materia--capa) { grid-template-columns: 112px minmax(0, 1fr); gap: 16px; }
  .materias > .materia:not(.materia--capa) .materia__foto { min-height: 92px; }
  .linha-placar__n { display: none; }
  .elenco__grade { gap: 20px 10px; }
  .atleta { width: calc((100% - 2 * 10px) / 3); gap: 8px; }
  .atleta__foto { border-radius: 12px; }
  .atleta__txt { padding: 0 2px; }
  .atleta__txt strong { font-size: 14px; }
  .atleta__txt small { font-size: 10px; letter-spacing: 0.08em; }
  .atleta__num { top: 7px; left: 8px; font-size: 18px; }
  .fj { grid-template-columns: minmax(0, 1fr); }
  .fj { position: relative; }
  .fj__foto { min-height: 300px; }
  .fj__fechar { position: absolute; top: 12px; right: 12px; z-index: 1; background: rgba(0, 0, 0, 0.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .fj__topo { min-height: 0; margin: 0; }
  .fj__dados { padding: 20px 18px; }
  .fj__lista > div { grid-template-columns: 104px minmax(0, 1fr); }
  .fj__nav .bt { padding: 8px 12px; }
  .jogo { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; }
  .jogo__mando, .jogo__placar { grid-column: 2; justify-self: start; }
  .jogo__info strong { font-size: 17px; }
  .placar__caixa { padding: 18px 14px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .revelar { opacity: 1; transform: none; }
  .atleta, .peca, .zona__nome { animation: none !important; }
}