/* Página de clube — protótipo. Paleta do portal + cores do clube em --c1/--c2/--c3. */
:root {
  --giz: #f4f5f1;        /* fundo: cal da linha do campo */
  --papel: #ffffff;
  --tinta: #15171b;      /* texto */
  --grafite: #4a4f57;    /* texto secundário */
  --arquibancada: #8a8f98;
  --linha: #d9dbd4;
  --figurinha: #fff7e2;  /* papel das figurinhas */
  --gramado: #1d5a3a;    /* links do portal */
  --c1: #d90a1e; --c2: #ffffff; --c3: #111111;
  --display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --texto: "Newsreader", Georgia, serif;
  --mono: "DM Mono", ui-monospace, monospace;
  --larg: 1120px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--giz); color: var(--tinta); font: 400 1.125rem/1.6 var(--texto); }
img { max-width: 100%; display: block; }
a { color: var(--gramado); text-underline-offset: .18em; padding-block: .2rem; }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--c1); outline-offset: 3px; }
.envelope { max-width: var(--larg); margin: 0 auto; padding: 0 20px; }
.rotulo { font: 500 .78rem/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--grafite); }
sup.ref { font: 500 .62em/0 var(--mono); }
sup.ref a { color: var(--arquibancada); text-decoration: none; padding: .1rem .15rem; }
sup.ref a:hover { color: var(--c1); }

/* Barra do portal */
.portal { background: var(--tinta); color: #fff; }
.portal .envelope { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; }
.portal a { color: #fff; text-decoration: none; }
.marca { font: 800 1.35rem/1 var(--display); letter-spacing: .02em; text-transform: uppercase; }
.aviso-homolog { font: 500 .72rem/1.2 var(--mono); color: #ffd68a; text-align: right; }

/* Topo do clube: a camisa */
.camisa { background: var(--papel); padding-top: 40px; overflow: hidden; }
.camisa .trilha { font: 500 .8rem/1.4 var(--mono); color: var(--grafite); }
.camisa .trilha a { color: var(--grafite); }
.camisa h1 { font: 900 clamp(4rem, 15vw, 11.5rem)/.82 var(--display); text-transform: uppercase; letter-spacing: -.01em; margin: 34px 0 0; }
.camisa .complemento { font: 700 clamp(1.3rem, 3vw, 2rem)/1 var(--display); text-transform: uppercase; letter-spacing: .04em; margin: 10px 0 0; color: var(--grafite); }
.faixa { display: grid; grid-template-rows: 1fr 1fr 1fr; height: clamp(54px, 9vw, 96px); margin-top: 34px; }
.faixa span { display: block; transform-origin: left; }
.faixa span:nth-child(1) { background: var(--c1); }
.faixa span:nth-child(2) { background: var(--c2); }
.faixa span:nth-child(3) { background: var(--c3); }
@media (prefers-reduced-motion: no-preference) {
  .faixa span { animation: costura .9s cubic-bezier(.2,.7,.2,1) both; }
  .faixa span:nth-child(2) { animation-delay: .08s; }
  .faixa span:nth-child(3) { animation-delay: .16s; }
}
@keyframes costura { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Foto do estádio + ingresso do próximo jogo */
.palco { position: relative; background: var(--tinta); }
.palco figure { margin: 0; }
.palco img { width: 100%; height: clamp(300px, 52vw, 560px); object-fit: cover; opacity: .92; }
.palco figcaption { position: absolute; left: 20px; bottom: 12px; font: 400 .7rem/1.3 var(--mono); color: #e7e7e7; text-shadow: 0 1px 2px #000; max-width: 60%; }
.palco figcaption a { color: inherit; }
.ingresso { position: absolute; right: max(20px, calc((100vw - var(--larg)) / 2 + 20px)); top: -28px; width: min(380px, calc(100% - 40px)); background: var(--figurinha); color: var(--tinta); border-radius: 6px; box-shadow: 0 18px 40px rgba(0,0,0,.28); display: grid; grid-template-columns: 1fr; }
.ingresso .corpo { padding: 20px 22px 16px; }
.ingresso .canhoto { border-top: 2px dashed #cdbf98; padding: 12px 22px 16px; }
.ingresso h2 { font: 800 1rem/1.2 var(--mono); text-transform: uppercase; letter-spacing: .08em; margin: 0 0 10px; color: var(--c1); }
.ingresso .duelo { font: 900 2rem/1 var(--display); text-transform: uppercase; margin: 0 0 8px; }
.ingresso .quando { font: 500 .95rem/1.4 var(--mono); margin: 0; }
.ingresso .onde-ver { margin: 6px 0 0; font-size: 1rem; }
.ingresso .botao { display: inline-block; margin-top: 10px; background: var(--tinta); color: #fff; text-decoration: none; font: 600 .85rem/1 var(--mono); padding: 12px 14px; border-radius: 3px; }
.ingresso .nota { font: 400 .75rem/1.4 var(--mono); color: var(--grafite); margin: 8px 0 0; }

/* Ficha rápida */
.ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0; border-bottom: 1px solid var(--linha); background: var(--papel); }
.ficha div { padding: 18px 20px; border-right: 1px solid var(--linha); }
.ficha dt { font: 500 .72rem/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--grafite); }
.ficha dd { margin: 4px 0 0; font: 800 1.45rem/1.1 var(--display); text-transform: uppercase; }

/* Seções */
section.bloco { padding: 72px 0 8px; }
section.bloco > .envelope > h2 { font: 900 clamp(2.4rem, 6vw, 4rem)/.9 var(--display); text-transform: uppercase; margin: 6px 0 28px; }
.intro { max-width: 680px; color: var(--grafite); margin: -12px 0 28px; }

/* Sala de troféus */
.trofeus { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.trofeu { background: var(--papel); padding: 20px 20px 18px; border-top: 4px solid var(--c1); }
.trofeu .qtd { font: 900 3.6rem/.9 var(--display); color: var(--c1); }
.trofeu h3 { font: 700 1.25rem/1.15 var(--display); text-transform: uppercase; margin: 6px 0 8px; letter-spacing: .02em; }
.trofeu .anos { font: 400 .82rem/1.6 var(--mono); color: var(--grafite); margin: 0; }
.trofeu .por { font: 400 .72rem/1.4 var(--mono); color: var(--arquibancada); margin: 8px 0 0; }
.cat-titulo { font: 500 .78rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; margin: 28px 0 10px; color: var(--grafite); }

/* Linha do tempo */
.tempo { list-style: none; margin: 0; padding: 0; border-left: 4px solid var(--c1); }
.tempo li { display: grid; grid-template-columns: 110px 1fr; gap: 22px; padding: 0 0 30px 24px; position: relative; }
.tempo li::before { content: ""; position: absolute; left: -11px; top: 10px; width: 18px; height: 18px; background: var(--giz); border: 4px solid var(--c3); border-radius: 50%; }
.tempo .ano { font: 900 2.2rem/1 var(--display); }
.tempo h3 { font: 700 1.3rem/1.2 var(--display); text-transform: uppercase; margin: 2px 0 6px; }
.tempo p { margin: 0; max-width: 640px; }
.tempo .foto-hist figure { margin: 0; max-width: 640px; }
.tempo .foto-hist img { width: 100%; height: auto; filter: grayscale(1) contrast(1.05); border-radius: 3px; }
.tempo .foto-hist figcaption { font: 400 .74rem/1.45 var(--mono); color: var(--grafite); margin-top: 6px; }
.tempo .foto-hist figcaption a { color: inherit; }

/* Ídolos: álbum de figurinhas */
.album { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 22px; }
.figurinha { background: var(--figurinha); border-radius: 8px; padding: 10px 10px 14px; box-shadow: 0 1px 0 #e6d9b5, 0 6px 16px rgba(21,23,27,.08); transition: transform .2s ease; }
@media (prefers-reduced-motion: no-preference) { .figurinha:hover { transform: rotate(-1.2deg) translateY(-3px); } }
.figurinha .foto { aspect-ratio: 4/5; border-radius: 4px; overflow: hidden; background: linear-gradient(180deg, var(--c1) 0 33%, var(--c2) 33% 66%, var(--c3) 66%); position: relative; }
.figurinha .foto img { width: 100%; height: 100%; object-fit: cover; }
.figurinha .foto:has(.vazia) { background: transparent; }
.figurinha .vazia { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; border: 2px dashed #cdbf98; border-radius: 4px; text-align: center; padding: 14px; }
.figurinha .vazia b { font: 900 4.5rem/1 var(--display); color: #d8caa3; }
.figurinha .vazia small { font: 400 .68rem/1.4 var(--mono); color: var(--grafite); max-width: 14ch; }
.figurinha h3 { font: 800 1.35rem/1.05 var(--display); text-transform: uppercase; margin: 12px 4px 2px; }
.figurinha .meta { font: 400 .76rem/1.45 var(--mono); color: var(--grafite); margin: 0 4px; }
.figurinha .feito { font-size: .98rem; line-height: 1.45; margin: 8px 4px 0; }
.figurinha .credito { font: 400 .62rem/1.3 var(--mono); color: var(--arquibancada); margin: 8px 4px 0; }
.figurinha .credito a { color: inherit; }

/* Clássicos */
.classicos { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; }
.classico { background: var(--papel); border-top: 6px solid var(--c3); padding: 22px; }
.classico .apelido { font: 900 2.2rem/.95 var(--display); text-transform: uppercase; margin: 4px 0 4px; }
.classico .contra { margin: 0 0 14px; color: var(--grafite); }
.placar-bar { display: flex; height: 14px; border-radius: 2px; overflow: hidden; margin: 10px 0 6px; }
.placar-bar .v { background: var(--c1); } .placar-bar .e { background: var(--arquibancada); } .placar-bar .d { background: var(--c3); }
.placar-num { font: 500 .82rem/1.5 var(--mono); }
.classico .marcante { font-size: 1rem; margin: 12px 0 0; }

/* Estádio */
.estadio { display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; align-items: start; }
.estadio figure { margin: 0; }
.estadio img { width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: 4px; }
.estadio figcaption, .credito-foto { font: 400 .7rem/1.4 var(--mono); color: var(--arquibancada); margin-top: 6px; }
.estadio dl { margin: 0; display: grid; gap: 14px; }
.estadio dt { font: 500 .72rem/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--grafite); }
.estadio dd { margin: 2px 0 0; font-size: 1.1rem; }

/* Tabelas: recordes, resultados */
table.lista { width: 100%; border-collapse: collapse; background: var(--papel); }
table.lista th, table.lista td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--linha); vertical-align: top; }
table.lista th { font: 500 .72rem/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--grafite); background: var(--giz); }
table.lista td.num { font: 700 1.25rem/1.2 var(--display); overflow-wrap: anywhere; }
table.lista { table-layout: fixed; }
.duas-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.resultado { font: 800 1.2rem/1 var(--display); }

/* Perguntas */
details.pergunta { background: var(--papel); border-bottom: 1px solid var(--linha); }
details.pergunta summary { cursor: pointer; padding: 18px 20px; font: 700 1.25rem/1.25 var(--display); text-transform: uppercase; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
details.pergunta summary::-webkit-details-marker { display: none; }
details.pergunta summary::after { content: "+"; font-family: var(--mono); color: var(--c1); }
details.pergunta[open] summary::after { content: "–"; }
details.pergunta p { margin: 0; padding: 0 20px 20px; max-width: 720px; }

/* Fontes e rodapé */
ol.fontes { font: 400 .82rem/1.55 var(--mono); color: var(--grafite); padding-left: 2.2em; columns: 2 380px; column-gap: 40px; }
ol.fontes li { break-inside: avoid; margin-bottom: 6px; }
ol.fontes li:target { background: var(--figurinha); }
.lacunas { font-size: 1rem; color: var(--grafite); background: var(--papel); border-left: 4px solid var(--arquibancada); padding: 14px 18px; }
footer.rodape { margin-top: 80px; background: var(--tinta); color: #c9ccd1; padding: 36px 0 48px; font: 400 .8rem/1.6 var(--mono); }
footer.rodape a { color: #fff; }

@media (max-width: 760px) {
  body { font-size: 1.05rem; }
  .ingresso { position: relative; right: auto; top: auto; width: auto; margin: -36px 16px 0; }
  .palco figcaption { position: static; padding: 6px 16px 0; color: #c9ccd1; text-shadow: none; max-width: none; background: var(--tinta); }
  .palco { padding-bottom: 24px; }
  .tempo li { grid-template-columns: 1fr; gap: 4px; }
  .estadio, .duas-colunas { grid-template-columns: 1fr; }
  .envelope { padding: 0 16px; }
  .ficha div { border-bottom: 1px solid var(--linha); }
  .aviso-homolog { display: none; }
  .album { grid-template-columns: 1fr 1fr; gap: 12px; }
  .figurinha h3 { font-size: 1.1rem; }
  .figurinha .feito { font-size: .9rem; }
  .figurinha .vazia b { font-size: 3rem; }
}

/* ===== v2: herói cinematográfico, troféus no escuro, conquistas com foto ===== */
.heroi { position: relative; min-height: min(88vh, 760px); display: flex; flex-direction: column; justify-content: flex-end; background: var(--c3); color: #fff; overflow: hidden; }
.heroi .fundo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.heroi .veu { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,12,.15) 0%, rgba(10,10,12,.25) 45%, rgba(10,10,12,.88) 100%); }
.heroi .conteudo { position: relative; padding-bottom: 34px; width: 100%; }
.heroi .trilha { font: 500 .8rem/1.4 var(--mono); color: #d8d8d8; margin: 0 0 18px; }
.heroi .trilha a { color: #fff; }
.heroi .nome { display: flex; align-items: flex-end; gap: clamp(16px, 3vw, 32px); }
.heroi .escudo { width: clamp(84px, 13vw, 168px); height: auto; flex: none; filter: drop-shadow(0 6px 18px rgba(0,0,0,.5)); }
.heroi h1 { font: 900 clamp(3.6rem, 13vw, 10.5rem)/.8 var(--display); text-transform: uppercase; margin: 0; letter-spacing: -.01em; text-shadow: 0 4px 30px rgba(0,0,0,.45); }
.heroi .complemento { font: 700 clamp(1.05rem, 2.6vw, 1.7rem)/1.1 var(--display); text-transform: uppercase; letter-spacing: .05em; margin: 12px 0 0; color: #f1f1f1; }
.heroi .faixa { position: relative; margin-top: 0; width: 100%; }
.heroi .credito-heroi { position: absolute; right: 16px; top: 12px; margin: 0; font: 400 .65rem/1.3 var(--mono); color: #ddd; text-shadow: 0 1px 2px #000; }
.heroi .credito-heroi a { color: inherit; }
.sob-heroi { position: relative; display: flex; justify-content: flex-end; margin-top: -60px; z-index: 2; }
.sob-heroi .ingresso { position: static; width: min(400px, 100%); }

section.bloco.escuro { background: var(--c3); color: #fff; padding-bottom: 72px; margin-top: 56px; }
section.bloco.escuro .rotulo, section.bloco.escuro .cat-titulo, section.bloco.escuro .intro { color: #b9bcc2; }
section.bloco.escuro .trofeu { background: #1d1e22; border-top-color: var(--c1); }
section.bloco.escuro .trofeu .anos { color: #c9ccd1; }
section.bloco.escuro sup.ref a { color: #8a8f98; }
section.bloco.escuro .trofeu .qtd { font-size: 4.4rem; }

.tempo li.conquista h3 { color: var(--c1); }
.tempo li.conquista .ano { color: var(--c1); }
.tempo li.conquista::before { background: var(--c1); border-color: var(--c1); }
.conquista-foto { margin: 16px 0 6px; max-width: 760px; }
.conquista-foto img { width: 100%; height: auto; aspect-ratio: 16/10; object-fit: cover; border-radius: 4px; box-shadow: 0 14px 34px rgba(21,23,27,.18); }
.conquista-foto figcaption { font: 400 .74rem/1.45 var(--mono); color: var(--grafite); margin-top: 8px; }
.conquista-foto figcaption a { color: inherit; }

@media (max-width: 760px) {
  .heroi { min-height: 78vh; }
  .heroi .nome { flex-direction: column; align-items: flex-start; }
  .sob-heroi { margin-top: -24px; }
  .heroi .credito-heroi { display: none; }
}

/* ===== Diretório: todos os clubes com o mesmo tamanho ===== */
.dir-main { padding: 48px 20px 40px; }
.dir-h1 { font: 900 clamp(3rem, 9vw, 6.5rem)/.88 var(--display); text-transform: uppercase; margin: 8px 0 18px; }
.uf { margin-top: 44px; }
.uf h2 { font: 800 1.6rem/1 var(--display); text-transform: uppercase; letter-spacing: .03em; border-bottom: 2px solid var(--tinta); padding-bottom: 8px; margin: 0 0 18px; }
.diretorio { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.clube-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 26px 14px 18px; background: var(--papel); border-radius: 6px; text-decoration: none; color: var(--tinta); box-shadow: 0 1px 0 var(--linha); overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
@media (prefers-reduced-motion: no-preference) { .clube-card:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(21,23,27,.12); } }
.clube-card .mini-faixa { position: absolute; left: 0; right: 0; top: 0; height: 9px; display: grid; grid-template-rows: 1fr 1fr 1fr; }
.clube-card .mini-faixa i:nth-child(1) { background: var(--c1); } .clube-card .mini-faixa i:nth-child(2) { background: var(--c2); } .clube-card .mini-faixa i:nth-child(3) { background: var(--c3); }
.clube-card img { width: 112px; height: 112px; object-fit: contain; }
.clube-card .sem-escudo { width: 112px; height: 112px; display: grid; place-items: center; font: 900 3.5rem/1 var(--display); background: var(--c1); color: var(--c2); border-radius: 50%; }
.clube-card strong { font: 800 1.3rem/1.05 var(--display); text-transform: uppercase; }
.clube-card small { font: 400 .75rem/1.3 var(--mono); color: var(--grafite); }
@media (max-width: 760px) { .diretorio { grid-template-columns: 1fr 1fr; gap: 10px; } .clube-card img, .clube-card .sem-escudo { width: 84px; height: 84px; } }
.vices { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font: 400 .9rem/1.5 var(--mono); }
section.bloco.escuro .vices { color: #c9ccd1; }

/* ===== cores de destaque legíveis (geradas a partir das cores do clube) ===== */
:root { --destaque: var(--c1); --destaque-escuro: var(--c1); --fundo-escuro: var(--c3); }
.ingresso h2, .trofeu .qtd, .tempo li.conquista h3, .tempo li.conquista .ano, details.pergunta summary::after, sup.ref a:hover { color: var(--destaque); }
.tempo { border-left-color: var(--destaque); }
.tempo li.conquista::before { background: var(--destaque); border-color: var(--destaque); }
.trofeu { border-top-color: var(--destaque); }
.placar-bar .v { background: var(--destaque); }
section.bloco.escuro { background: var(--fundo-escuro); }
section.bloco.escuro .trofeu { border-top-color: var(--destaque-escuro); }
section.bloco.escuro .trofeu .qtd { color: var(--destaque-escuro); }
a:focus-visible, summary:focus-visible { outline-color: var(--destaque); }

/* ===== canais oficiais no topo ===== */
.redes { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.redes a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.35); color: #fff; text-decoration: none; font: 500 .8rem/1 var(--mono); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background .2s ease, color .2s ease; }
.redes a:hover { background: #fff; color: var(--tinta); }
.redes li:first-child a { background: #fff; color: var(--tinta); border-color: #fff; }
@media (max-width: 760px) { .redes a span { display: none; } .redes a { padding: 10px; } .redes li:first-child a span { display: inline; } }

/* ===== links de mapa ===== */
a.mapa { color: inherit; text-decoration-color: var(--destaque); text-decoration-thickness: 2px; }
a.mapa .pino, a.botao-mapa .pino { font-size: .8em; margin-left: .25em; }
a.botao-mapa { display: inline-block; background: var(--tinta); color: #fff; text-decoration: none; font: 600 .85rem/1 var(--mono); padding: 12px 14px; border-radius: 3px; }
a.botao-mapa:hover { background: var(--destaque); }

.conquista-foto.historica img { filter: none; }

/* ===== herói sem foto: cores do clube + escudo apagado ===== */
.heroi .fundo.sem-foto { position: absolute; inset: 0; overflow: hidden;
  background: radial-gradient(120% 90% at 80% 20%, var(--c1), var(--fundo-escuro) 70%); }
.heroi .fundo.sem-foto img { position: absolute; right: -6%; top: 50%; transform: translateY(-50%);
  height: 140%; width: auto; opacity: .14; filter: grayscale(.2); }

/* ===== marca: o O de BOM é a bola ===== */
.marca { display: inline-flex; align-items: center; white-space: nowrap; }
.marca svg.bola { width: .86em; height: .86em; margin: 0 .03em; flex: none; }
.vis-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ===== HOME ===== */
.home { --gram: #1b532f; --cal: #f4f5f1; }
.portal-home .envelope { min-height: 56px; }
.nav-home { display: flex; gap: 20px; font: 500 .8rem/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.nav-home a { opacity: .85; } .nav-home a:hover { opacity: 1; text-decoration: underline; }

/* o gramado visto de cima */
.gramado { position: relative; overflow: hidden; background: var(--gram); color: var(--cal);
  min-height: clamp(640px, 88vh, 880px); isolation: isolate; }
.gramado .campo { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.gramado .campo-v { display: none; }
@media (max-aspect-ratio: 1/1) { .gramado .campo-h { display: none; } .gramado .campo-v { display: block; } }
.faixas .es { fill: #1a512e; } .faixas .cl { fill: #22653b; }
.cal path { fill: none; stroke: rgba(244,245,241,.8); stroke-width: .22; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.marcas circle { fill: rgba(244,245,241,.85); }
.gramado .luz { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 55% at 12% -8%, rgba(255,250,225,.20), transparent 70%),
    radial-gradient(60% 55% at 88% -8%, rgba(255,250,225,.20), transparent 70%),
    radial-gradient(120% 90% at 50% 50%, transparent 45%, rgba(4,20,10,.55) 100%); }
.gramado::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 .25 0 0 0 0 .08 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* conteúdo em três faixas: acima do círculo central, o círculo, abaixo dele */
.g-conteudo { position: relative; min-height: inherit; display: grid;
  --circ: calc(18.3 * max(100vw / 117, clamp(640px, 88vh, 880px) / 76) + 28px);
  grid-template-rows: 1fr var(--circ) 1fr; grid-template-columns: minmax(0, 1fr);
  justify-items: center; text-align: center; padding-top: 28px; padding-bottom: 28px; }
.g-titulo { grid-row: 1; align-self: end; padding-bottom: clamp(10px, 2vmin, 24px); }
.g-rotulo { margin: 0 0 14px; font: 500 .78rem/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(244,245,241,.85); }
.gramado h1 { margin: 0; font: 900 clamp(3.2rem, 9vw, 7.6rem)/.84 var(--display); text-transform: uppercase; letter-spacing: -.005em;
  color: var(--cal); text-shadow: 0 6px 34px rgba(0,0,0,.35); }
.g-centro { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: clamp(72px, 9vmin, 116px); aspect-ratio: 1; }
.bola-grande { width: 100%; height: 100%; filter: drop-shadow(0 6px 10px rgba(0,0,0,.35)); }
.g-centro .sombra { position: absolute; left: 12%; right: 12%; bottom: -10%; height: 18%; border-radius: 50%; background: rgba(0,0,0,.38); filter: blur(6px); }
.g-base { grid-row: 3; align-self: start; display: grid; justify-items: center; gap: 18px; padding-top: clamp(10px, 2vmin, 24px); width: 100%; }
.g-sub { max-width: 34em; margin: 0; font: 400 clamp(1.05rem, 1.6vw, 1.3rem)/1.45 var(--texto); color: var(--cal); text-shadow: 0 1px 12px rgba(0,0,0,.45); }
.busca { position: relative; display: flex; width: min(560px, 100%); box-shadow: 0 18px 50px rgba(0,0,0,.35); border-radius: 6px; }
.busca input { flex: 1; min-width: 0; height: 58px; border: 0; border-radius: 6px 0 0 6px; padding: 0 18px; font: 500 1rem var(--mono); color: var(--tinta); background: var(--cal); }
.busca input:focus { outline: 3px solid #ffd23f; outline-offset: 2px; }
.busca button { height: 58px; border: 0; border-radius: 0 6px 6px 0; padding: 0 22px; font: 800 1.15rem/1 var(--display); text-transform: uppercase; letter-spacing: .04em; background: var(--tinta); color: var(--cal); cursor: pointer; }
.busca button:hover { background: #000; }
.sugestoes { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 5; list-style: none; margin: 0; padding: 6px; background: var(--papel); border-radius: 6px; box-shadow: 0 20px 50px rgba(0,0,0,.35); text-align: left; }
.sugestoes a { display: grid; grid-template-columns: 32px 1fr; column-gap: 12px; align-items: center; padding: 8px 10px; border-radius: 4px; color: var(--tinta); text-decoration: none; }
.sugestoes a:hover, .sugestoes a:focus { background: var(--giz); }
.sugestoes img, .sugestoes i { grid-row: span 2; width: 32px; height: 32px; object-fit: contain; }
.sugestoes b { font: 800 1.1rem/1 var(--display); text-transform: uppercase; }
.sugestoes small { font: 400 .72rem/1.2 var(--mono); color: var(--grafite); }
.sugestoes .nada { padding: 10px; font: 400 .85rem/1.4 var(--mono); color: var(--grafite); }
.g-numeros { grid-row: 3; align-self: end; list-style: none; margin: 24px 0 0; padding: 0; display: flex; gap: clamp(18px, 4vw, 48px); font: 500 .74rem/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: rgba(244,245,241,.88); }
.g-numeros b { display: block; margin-bottom: 4px; font: 900 2.1rem/1 var(--display); letter-spacing: 0; color: var(--cal); }

@media (prefers-reduced-motion: no-preference) {
  .cal path { stroke-dashoffset: 1; animation: cal 1.5s calc(.25s + var(--i) * .08s) cubic-bezier(.45,0,.2,1) forwards; }
  .marcas circle { opacity: 0; animation: surge .4s 1.6s forwards; }
  .g-centro .bola-grande { animation: rola 1.6s .3s cubic-bezier(.15,.8,.25,1) both; }
  .g-centro .sombra { animation: rola-sombra 1.6s .3s cubic-bezier(.15,.8,.25,1) both; }
  .g-titulo, .g-base, .g-numeros { animation: sobe .7s both; }
  .g-titulo { animation-delay: .5s; } .g-base { animation-delay: .85s; } .g-numeros { animation-delay: 1.1s; }
}
@keyframes cal { to { stroke-dashoffset: 0; } }
@keyframes surge { to { opacity: 1; } }
@keyframes rola { from { transform: translateX(-62vw) rotate(-900deg); } to { transform: none; } }
@keyframes rola-sombra { from { transform: translateX(-62vw); } to { transform: none; } }
@keyframes sobe { from { opacity: 0; transform: translateY(14px); } }

/* blocos da home */
.h-bloco { padding: clamp(48px, 8vw, 88px) 0; }
.h-bloco h2 { margin: 6px 0 10px; font: 900 clamp(2.4rem, 6vw, 4.4rem)/.9 var(--display); text-transform: uppercase; }
.h-bloco .intro { max-width: 40em; margin: 0 0 28px; color: var(--grafite); }

/* próximos jogos: ingressos picotados */
.bilhetes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.bilhete { position: relative; display: grid; gap: 14px; padding: 18px 20px 16px; background: var(--figurinha); border-radius: 8px; color: var(--tinta); text-decoration: none;
  box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 10px 24px -14px rgba(0,0,0,.35); transition: transform .2s ease; }
.bilhete:hover { transform: translateY(-3px); }
.bilhete::before, .bilhete::after { content: ""; position: absolute; top: 44px; width: 18px; height: 18px; border-radius: 50%; background: var(--giz); }
.bilhete::before { left: -9px; } .bilhete::after { right: -9px; }
.b-quando { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 12px; border-bottom: 2px dashed rgba(21,23,27,.18); font: 500 .74rem/1.2 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--grafite); }
.b-quando b { color: var(--tinta); }
.b-duelo { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 8px; text-align: center; font: 800 1.05rem/1.05 var(--display); text-transform: uppercase; }
.b-duelo img, .b-duelo .sem { width: 48px; height: 48px; object-fit: contain; margin: 0 auto 8px; display: block; }
.b-duelo .sem, .parede .sem { display: grid; place-items: center; border-radius: 50%; background: var(--linha); font: 900 1.4rem/1 var(--display); font-style: normal; }
.b-duelo em { font: 900 1.5rem/48px var(--display); font-style: normal; color: var(--arquibancada); }
.b-comp { font: 400 .72rem/1.3 var(--mono); color: var(--grafite); text-align: center; }

/* séries: parede de escudos */
.h-series { background: var(--papel); }
.serie { margin-top: 34px; }
.serie h3 { display: flex; align-items: baseline; gap: 14px; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 3px solid var(--tinta); }
.serie h3 b { font: 900 clamp(1.8rem, 4vw, 2.6rem)/1 var(--display); text-transform: uppercase; }
.serie h3 small { font: 500 .78rem/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--grafite); }
.parede { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.parede a { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px 10px; border-radius: 6px; text-decoration: none; color: var(--tinta); transition: background .15s ease, transform .15s ease; }
.parede a:hover { background: var(--giz); transform: translateY(-2px); }
.parede img, .parede .sem { width: 60px; height: 60px; object-fit: contain; }
.parede span { font: 800 .82rem/1.05 var(--display); text-transform: uppercase; text-align: center; }

/* memorial: figurinhas sobre o gramado */
.h-memorial { background: #1b532f; color: #f4f5f1;
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 90px, transparent 90px 180px); }
.h-memorial .rotulo, .h-memorial .intro { color: rgba(244,245,241,.82); }
.figs { list-style: none; margin: 0; padding: 10px 6px 24px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(170px, 200px); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; }
.figs li { scroll-snap-align: start; }
.fig { display: block; padding: 10px 10px 12px; background: var(--figurinha); border-radius: 6px; color: var(--tinta); text-decoration: none; border-top: 6px solid var(--c1);
  box-shadow: 0 14px 28px -12px rgba(0,0,0,.6); transform: rotate(-1.4deg); transition: transform .2s ease; }
.figs li:nth-child(even) .fig { transform: rotate(1.2deg); }
.fig:hover, .figs li:nth-child(even) .fig:hover { transform: rotate(0) translateY(-4px); }
.fig-foto { display: block; aspect-ratio: 4/5; overflow: hidden; border-radius: 3px; background: var(--linha); }
.fig-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.fig b { display: block; margin-top: 10px; font: 800 1.15rem/1 var(--display); text-transform: uppercase; }
.fig small { font: 400 .7rem/1.3 var(--mono); color: var(--grafite); }

/* estados */
.estados { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.estados a { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; padding: 14px 16px; background: var(--papel); border-radius: 6px; text-decoration: none; color: var(--tinta); transition: background .15s ease, color .15s ease; }
.estados a:hover { background: #1b532f; color: #f4f5f1; }
.estados b { grid-row: span 2; font: 900 2rem/1 var(--display); }
.estados span { font: 700 .95rem/1.1 var(--display); text-transform: uppercase; }
.estados small { font: 400 .7rem/1.2 var(--mono); opacity: .7; }
.h-mais { margin-top: 28px; }
.botao-cal { display: inline-block; padding: 14px 20px; border-radius: 4px; background: var(--tinta); color: #f4f5f1; text-decoration: none; font: 800 1.1rem/1 var(--display); text-transform: uppercase; letter-spacing: .04em; }
.botao-cal:hover { background: #1b532f; }

.rodape-home { background: #123b22; color: rgba(244,245,241,.8); }
.rodape-home .marca { color: #f4f5f1; text-decoration: none; font-size: 1.8rem; margin-bottom: 10px; }
.rodape-home p { font: 400 .78rem/1.5 var(--mono); }

@media (max-width: 640px) {
  .gramado h1 { font-size: clamp(2.8rem, 13vw, 4rem); }
  .g-sub { font-size: 1rem; }
  .nav-home a:not(:last-child) { display: none; }
  .busca button { padding: 0 14px; }
  .g-numeros b { font-size: 1.6rem; }
  .parede { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }
  .parede img, .parede .sem { width: 48px; height: 48px; }
}

@media (max-aspect-ratio: 1/1) { .g-conteudo { --circ: calc(18.3 * max(100vw / 76, clamp(640px, 88vh, 880px) / 117) + 22px); } }
.g-titulo, .g-base, .g-numeros { grid-column: 1; }
.b-duelo .lado { display: flex; flex-direction: column; align-items: center; }
@media (max-width: 640px) {
  .g-rotulo { font-size: .64rem; letter-spacing: .08em; }
  .g-centro { width: 50px; }
  .g-numeros { gap: 20px; font-size: .6rem; letter-spacing: .06em; }
  .g-numeros li { white-space: nowrap; }
  .g-numeros b { font-size: 1.5rem; }
  .busca input { padding: 0 14px; font-size: .92rem; }
}