@charset "utf-8";
/* Google Fonts — títulos brasão (Cinzel/Cormorant) + corpo (Inter).
   Carregado por @import aqui (dono do CSS = %55) para o motor ser self-suficiente;
   o %54 também adiciona o <link> equivalente no <head> (carga duplicada é inócua). */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Cormorant+Garamond:wght@600;700&family=Inter:wght@400;500;600;700&display=swap');

/* ==========================================================================
   Nosso Fut — style.css · ONDA 3 "REDESIGN clube tradicional"
   Diretriz VERBATIM (missao-01-DESIGN.md) + arte anuncio-liga.png.
   Escuro/navy, dourado SEMPRE em gradiente (joia), molduras duplas, medalhas,
   tipografia serifada dourada, textura+vinheta+glow. MOBILE-FIRST.
   ========================================================================== */

/* ---------- Tema (valores EXATOS da diretriz) --------------------------- */
:root {
  /* Fundo */
  --navy-top:   #10172A;   /* topo do gradiente de fundo               */
  --navy-bot:   #080C18;   /* base do gradiente de fundo               */
  --card:       #161F36;   /* superfície de cards                      */
  --card-1:     #182238;   /* topo do gradiente de card                */
  --card-2:     #131B30;   /* base do gradiente de card                */
  --medal:      #0D1324;   /* círculo escuro da medalha                */

  /* Dourado metálico — SEMPRE gradiente, nunca chapado */
  --gold-1:     #F6D9A3;   /* brilho                                   */
  --gold-2:     #D2AA70;   /* médio                                    */
  --gold-3:     #A87C42;   /* sombra                                   */
  --gold-grad:  linear-gradient(180deg, #F6D9A3 0%, #D2AA70 52%, #A87C42 100%);
  --gold-line:  rgba(210,170,112,.60);   /* borda de card ~60% opac.    */
  --gold-soft:  rgba(210,170,112,.30);   /* linha interna moldura 30%   */

  /* Verde de ação */
  --green-1:    #2C6444;
  --green-2:    #163A28;

  /* Texto */
  --ink-title:  #F5F6FA;   /* títulos (branco quente)                  */
  --ink-body:   #C4C8D4;   /* corpo                                    */
  --ink-mut:    #8B93A7;   /* secundário                               */

  --radius:     16px;
  --max:        1080px;
  --gap:        1rem;
  --shadow:     0 18px 40px rgba(0,0,0,.45);
  --shadow-sm:  0 10px 24px rgba(0,0,0,.40);
  --foco:       2px solid var(--gold-1);
  --serif:      "Cinzel", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:       "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---------- Reset leve --------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-body);
  /* Fundo: gradiente vertical navy + brilho superior discreto */
  background:
    radial-gradient(120% 520px at 50% 0, rgba(46,66,112,.34), transparent 70%),
    linear-gradient(180deg, var(--navy-top) 0%, var(--navy-bot) 60%, var(--navy-bot) 100%);
  /* NÃO usar background-attachment:fixed: em página alta o fundo não se estende
     abaixo da 1ª viewport (canvas branco no full-page) — some título branco / footer. */
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
/* Camada de textura (trama diagonal 1px ~3.5%) + vinheta escurecendo cantos */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    repeating-linear-gradient(45deg,
      rgba(255,255,255,.035) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(-45deg,
      rgba(255,255,255,.018) 0 1px, transparent 1px 7px),
    radial-gradient(130% 100% at 50% 45%, transparent 52%, rgba(0,0,0,.55) 100%);
}

img { max-width: 100%; height: auto; }
p  { margin: 0 0 1rem; }
a  { color: var(--gold-2); }

/* Títulos: serifada brasão, caixa alta, tracking largo */
h1, h2, h3 {
  font-family: var(--serif);
  color: var(--ink-title);
  line-height: 1.15;
  letter-spacing: .06em;
  margin: 0 0 .5em;
  font-weight: 600;
}
h1 { font-size: 1.9rem; text-transform: uppercase; }
h2 { font-size: 1.5rem; text-transform: uppercase; letter-spacing: .12em; }
h3 { font-size: 1.1rem; }

/* Foco visível */
a:focus-visible, button:focus-visible, .doc-link:focus-visible {
  outline: var(--foco);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ==========================================================================
   HELPERS de design (contrato)
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: 1.1rem;
}

/* Título/parte com gradiente dourado (background-clip:text) */
.titulo-ouro {
  background: var(--gold-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Moldura dupla dourada: 2px externa forte + 1px interna 30%, cantos 16px */
.moldura {
  position: relative;
  border: 2px solid rgba(210,170,112,.78);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.moldura::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid var(--gold-soft);
  border-radius: 11px;
  pointer-events: none;
}

/* Divisor: linha dourada fina interrompida por círculo central */
.divisor-dourado {
  position: relative;
  height: 1px;
  max-width: 520px;
  margin: 1.75rem auto;
  background: linear-gradient(90deg,
    transparent, var(--gold-line) 18%, var(--gold-line) 82%, transparent);
}
.divisor-dourado::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 9px; height: 9px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--navy-bot);
  box-shadow: 0 0 0 1px var(--gold-2), 0 0 10px rgba(210,170,112,.4);
}

/* Placeholder (dado ainda do Wellington) — discreto no tema escuro */
.placeholder { font-style: italic; color: var(--ink-mut); }
td.placeholder, span.placeholder, p.placeholder {
  background: repeating-linear-gradient(-45deg,
    rgba(210,170,112,.08), rgba(210,170,112,.08) 6px,
    transparent 6px, transparent 12px);
  border-radius: 4px;
}

/* ==========================================================================
   HEADER + NAV
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: linear-gradient(180deg, rgba(10,15,30,.92), rgba(8,12,24,.86));
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--gold-soft);
}
.site-header.scrolled { box-shadow: 0 8px 26px rgba(0,0,0,.5); }
.site-header .nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  padding-block: .55rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--ink-title);
  text-decoration: none;
  white-space: nowrap;
}
/* Logo da liga no header — capado, não domina a barra (regra onda 2 mantida) */
.brand-logo {
  display: block;
  height: 40px;
  width: auto;
  object-fit: contain;
}

/* Hambúrguer — só no mobile */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--gold-1);
  background: transparent;
  border: 1px solid var(--gold-line);
  border-radius: 10px;
  cursor: pointer;
}
.nav-toggle:hover { background: rgba(210,170,112,.12); }

.nav-menu {
  display: none;
  flex-direction: column;
  width: 100%;
  gap: .15rem;
  padding-top: .4rem;
}
.nav-menu.open { display: flex; }
.nav-menu a {
  display: block;
  padding: .65rem .6rem;
  color: var(--ink-body);
  text-decoration: none;
  border-radius: 8px;
  font-weight: 500;
  letter-spacing: .02em;
}
.nav-menu a:hover, .nav-menu a:focus-visible,
.nav-menu a[aria-current="page"] {
  background: rgba(210,170,112,.12);
  color: var(--gold-1);
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 3.2rem 1rem 2.4rem;
}
/* Brilho radial discreto atrás do logo/hero */
.hero::before {
  content: "";
  position: absolute;
  left: 50%; top: 40px;
  width: 460px; height: 460px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(210,170,112,.20), transparent 62%);
  pointer-events: none;
  z-index: 0;
}
.hero > * { position: relative; z-index: 1; }
.hero-logo {
  display: block;
  height: 132px;
  width: auto;
  max-width: 78%;
  margin: 0 auto 1.2rem;
  object-fit: contain;
  filter: drop-shadow(0 10px 26px rgba(0,0,0,.55));
}
.hero-titulo {
  font-size: 2.15rem;
  text-transform: uppercase;
  letter-spacing: .10em;
  margin-bottom: .3rem;
  color: var(--ink-title);
}
.hero-subtitulo {
  color: var(--ink-body);
  max-width: 46ch;
  margin: .6rem auto 0;
  font-family: var(--sans);
  letter-spacing: .01em;
}

/* ==========================================================================
   BOTÃO / CTA dourado metálico (a classe .btn-verde mantém o nome antigo)
   ========================================================================== */
.hero-cta, a.hero-cta, .cta, a.cta, .btn-verde {
  display: inline-block;
  margin-top: 1.3rem;
  padding: .85rem 1.9rem;
  font-family: var(--serif);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #1B1406;
  text-decoration: none;
  border-radius: 999px;
  border: 1px solid #F9E6BF;
  background: var(--gold-grad);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -2px 0 rgba(120,82,34,.45),
    0 0 0 4px rgba(210,170,112,.12),
    0 12px 28px rgba(0,0,0,.45);
  transition: filter .18s ease, transform .18s ease, box-shadow .18s ease;
}
.hero-cta:hover, .cta:hover, .btn-verde:hover {
  filter: brightness(1.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -2px 0 rgba(120,82,34,.45),
    0 0 0 6px rgba(210,170,112,.18),
    0 0 32px rgba(246,217,163,.25),
    0 14px 30px rgba(0,0,0,.5);
  transform: translateY(-1px);
}

/* ==========================================================================
   SEÇÃO CATEGORIAS (coração da arte) — cards com medalha
   ========================================================================== */
.categorias { padding-block: 1.4rem 2.6rem; }
.categorias > h2 { text-align: center; margin-bottom: 1.4rem; }

.categoria-card {
  display: flex;
  align-items: center;
  gap: 1.05rem;
  padding: 1rem 1.2rem;
  margin-bottom: .95rem;
  background: linear-gradient(180deg, var(--card-1), var(--card-2));
  border: 1px solid var(--gold-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.categoria-card:last-child { margin-bottom: 0; }
.categoria-card h3 {
  font-family: var(--serif);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink-title);
  font-size: 1.05rem;
  margin: 0 0 .12rem;
}
.categoria-desc {
  margin: 0;
  color: var(--ink-body);
  font-size: .94rem;
  line-height: 1.45;
}

/* Ícone estilo MEDALHA: círculo escuro + anel dourado duplo + símbolo em gradiente */
.medalha {
  flex: 0 0 auto;
  width: 58px; height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 36%, #18233F 0%, var(--medal) 72%);
  border: 2px solid rgba(210,170,112,.85);              /* anel interno       */
  box-shadow:
    0 0 0 4px var(--medal),                             /* respiro            */
    0 0 0 5px rgba(210,170,112,.5),                     /* anel externo fino  */
    0 8px 18px rgba(0,0,0,.5);
}
.medalha-icone {
  font-size: 1.55rem;
  line-height: 1;
  font-weight: 700;
  /* símbolo preenchido com o gradiente dourado (glifos de texto) */
  background: var(--gold-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ==========================================================================
   Seções genéricas — título limpo com linha de fechamento dourada
   ========================================================================== */
.sobre, .classificacao, .times, .jogos, .noticias, .documentos, .artilheiros {
  padding-block: 2.6rem;
}
.sobre h2, .classificacao h2, .times h2, .jogos h2, .noticias h2,
.documentos h1 {
  position: relative;
  padding-bottom: .4rem;
  /* Título-chave em dourado gradiente vivo (legível sobre o navy) */
  background: var(--gold-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.sobre h2::after, .classificacao h2::after, .times h2::after,
.jogos h2::after, .noticias h2::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 54px; height: 3px;
  background: var(--gold-grad);
  border-radius: 2px;
}
.sobre p { max-width: 65ch; color: var(--ink-body); }

/* ==========================================================================
   CLASSIFICAÇÃO — tabela dark com scroll horizontal no mobile
   ========================================================================== */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--gold-line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}
.tabela-classificacao {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: .95rem;
  color: var(--ink-body);
}
.tabela-classificacao thead th {
  background: linear-gradient(180deg, #1C2848, #141D34);
  color: var(--gold-1);
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: .04em;
  text-align: center;
  padding: .6rem .5rem;
  white-space: nowrap;
  position: sticky;
  top: 0;
}
.tabela-classificacao th:nth-child(2),
.tabela-classificacao td:nth-child(2) { text-align: left; }
.tabela-classificacao tbody td {
  padding: .55rem .5rem;
  text-align: center;
  border-top: 1px solid rgba(210,170,112,.14);
  white-space: nowrap;
}
.tabela-classificacao tbody tr:nth-child(even) { background: rgba(255,255,255,.02); }
.tabela-classificacao tbody tr:hover { background: rgba(210,170,112,.07); }

/* ==========================================================================
   TIMES — grid de cards com escudo
   ========================================================================== */
.times-grid, .times .cards, .times .grid-times, .times ul, .times .lista-times {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  padding: 0; margin: 0;
  list-style: none;
}
.card-time {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: 1rem;
  background: linear-gradient(180deg, var(--card-1), var(--card-2));
  border: 1px solid var(--gold-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  color: var(--ink-title);
}
.card-time .nome-time, .card-time h3 {
  margin: 0;
  font-size: 1.02rem;
  color: var(--ink-title);
}
/* Escudo — 56px (regra onda 2 mantida), agora sobre fundo escuro */
.escudo {
  flex: 0 0 auto;
  width: 56px; height: 56px;
  border-radius: 50%;
}
img.escudo {
  object-fit: contain;
  background: var(--medal);
  border: 2px solid rgba(210,170,112,.7);
  box-shadow: 0 0 0 4px rgba(210,170,112,.14), var(--shadow-sm);
  padding: 3px;
}
.escudo.placeholder {
  background:
    radial-gradient(circle at 50% 38%, rgba(210,170,112,.9) 0 26%, transparent 27%),
    radial-gradient(circle at 50% 36%, #18233F, var(--medal) 72%);
  border: 2px solid rgba(210,170,112,.6);
  box-shadow: 0 0 0 4px var(--medal), 0 0 0 5px rgba(210,170,112,.4);
  font-style: normal;
  position: relative;
}
.escudo.placeholder::after {
  content: "⚽";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 1.15rem; line-height: 1;
  filter: grayscale(1) brightness(1.4);
  opacity: .85;
}

/* ==========================================================================
   JOGOS — rodadas e linhas de jogo
   ========================================================================== */
.rodada {
  background: linear-gradient(180deg, var(--card-1), var(--card-2));
  border: 1px solid var(--gold-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
}
.rodada h3 {
  color: var(--gold-1);
  font-family: var(--serif);
  letter-spacing: .06em;
  border-bottom: 1px solid var(--gold-soft);
  padding-bottom: .4rem;
  margin-bottom: .6rem;
}
.jogo {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .5rem;
  padding: .55rem 0;
  border-top: 1px solid rgba(210,170,112,.12);
}
.jogo:first-of-type { border-top: 0; }
.time-casa { text-align: right; font-weight: 600; color: var(--ink-title); }
.time-fora { text-align: left;  font-weight: 600; color: var(--ink-title); }
.placar {
  min-width: 66px;
  text-align: center;
  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--gold-1);
  background: linear-gradient(180deg, #0F1628, var(--medal));
  border: 1px solid var(--gold-line);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(246,217,163,.12), 0 0 0 3px rgba(210,170,112,.08);
  padding: .25rem .7rem;
  white-space: nowrap;
}

/* ==========================================================================
   NOTÍCIAS — grid de cards
   ========================================================================== */
.noticias-grid, .noticias .cards, .noticias .grid-noticias, .noticias ul {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  padding: 0; margin: 0; list-style: none;
}
.card-noticia {
  background: linear-gradient(180deg, var(--card-1), var(--card-2));
  border: 1px solid var(--gold-line);
  border-left: 3px solid var(--gold-2);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1rem 1.1rem;
}
.card-noticia h3 { margin-bottom: .25rem; color: var(--ink-title); }
.card-noticia .data, .card-noticia time {
  display: block;
  font-size: .8rem;
  color: var(--ink-mut);
  margin-bottom: .5rem;
}
.card-noticia p { color: var(--ink-body); }

/* ==========================================================================
   DOCUMENTOS
   ========================================================================== */
.documentos h1 { margin-bottom: 1.2rem; }
.doc-list {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: .75rem;
}
.doc-link {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "icon titulo" "icon desc" "icon data";
  column-gap: .9rem;
  align-items: center;
  padding: 1rem 1.1rem;
  background: linear-gradient(180deg, var(--card-1), var(--card-2));
  border: 1px solid var(--gold-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: var(--ink-title);
}
.doc-link::before {
  content: "📜";
  grid-area: icon;
  font-size: 1.7rem;
  line-height: 1;
  filter: sepia(.4) saturate(1.2);
}
.doc-link:hover { border-color: var(--gold-1); filter: brightness(1.08); }
.doc-titulo { grid-area: titulo; font-family: var(--serif); font-weight: 600; color: var(--gold-1); }
.doc-desc   { grid-area: desc;   color: var(--ink-body); font-size: .92rem; }
.doc-data   { grid-area: data;   color: var(--ink-mut);  font-size: .8rem; }
.doc-empty {
  padding: 1.2rem;
  text-align: center;
  color: var(--ink-mut);
  background: var(--card);
  border: 1px dashed var(--gold-soft);
  border-radius: var(--radius);
}
.doc-empty[hidden] { display: none; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  color: var(--ink-body);            /* legível (era ink-mut, apagado)        */
  text-align: center;
  padding: 2rem 1rem;
  margin-top: 2.6rem;
  border-top: 1px solid var(--gold-soft);
  /* navy sólido (não transparente) — nunca depende do fundo do body           */
  background: linear-gradient(180deg, #0B1120 0%, var(--navy-bot) 100%);
  font-size: .9rem;
}
.site-footer .placeholder { color: var(--ink-mut); }
.site-footer a { color: var(--gold-2); }

/* ==========================================================================
   MISSÃO 02 — liga EXCLUSIVA por convite (classes novas)
   Identidade navy/dourado da diretriz; mobile-first.
   ========================================================================== */

/* ---- Selo de convite (substitui o CTA; SEM cara de botão, SEM link) ------ */
.selo-convite {
  display: inline-block;
  margin: 1.4rem auto 0;
  padding: .62rem 1.5rem;
  font-family: var(--serif);
  font-size: .82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--gold-1);
  background: rgba(13,19,36,.55);
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(210,170,112,.22), 0 8px 20px rgba(0,0,0,.4);
  cursor: default;                 /* não é clicável                         */
}
.selo-convite::before,
.selo-convite::after {
  content: "✦";
  margin: 0 .55em;
  font-size: .7em;
  color: var(--gold-2);
  vertical-align: .08em;
}
/* Variante faixa de fechamento: bloco largo centralizado */
.selo-convite.faixa,
.selo-convite--faixa {
  display: block;
  width: fit-content;
  margin-inline: auto;
}

/* ---- Narrativa / exclusividade ------------------------------------------ */
.narrativa { padding-block: 2.4rem; }
.narrativa > h2, .narrativa > .titulo-ouro { text-align: center; margin-bottom: 1.2rem; }
.narrativa p {
  max-width: 66ch;
  margin: 0 auto 1rem;
  color: var(--ink-body);
  font-size: 1.05rem;
  line-height: 1.8;
}
.narrativa .destaque,
.narrativa strong { color: var(--gold-1); font-weight: 600; }

/* ---- Fala do presidente (blockquote solene) ----------------------------- */
.presidente-fala {
  position: relative;
  margin: 1.1rem 0 0;
  padding: 1.1rem 1.3rem 1rem 2.7rem;
  border-left: 3px solid var(--gold-2);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: linear-gradient(180deg, rgba(22,31,54,.7), rgba(19,27,48,.7));
  box-shadow: var(--shadow-sm);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 1.12rem;
  line-height: 1.7;
  color: var(--ink-title);
}
.presidente-fala::before {
  content: "\201C";
  position: absolute;
  left: .55rem; top: .35rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.8rem;
  line-height: 1;
  background: var(--gold-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.presidente-fala p { margin: 0 0 .5rem; }
.presidente-fala cite {
  display: block;
  margin-top: .3rem;
  font-family: var(--serif);
  font-style: normal;
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-1);
}

/* ---- Time "A REVELAR" (aura de mistério) -------------------------------- */
.card-time.misterio {
  border-style: dashed;
  border-color: rgba(210,170,112,.5);
  background: linear-gradient(180deg, #141B30, #0F1526);
  position: relative;
}
.card-time.misterio h3 {
  color: var(--gold-1);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .92rem;
  opacity: .92;
}
/* escudo placeholder do mistério vira "?" dourado */
.card-time.misterio .escudo.placeholder::after {
  content: "?";
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--gold-1);
  filter: none;
  opacity: .95;
}
/* selo "A REVELAR" (pequeno; reutilizável no card ou onde o markup marcar) */
.selo-revelar {
  display: inline-block;
  margin-top: .25rem;
  padding: .14rem .55rem;
  font-family: var(--serif);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-1);
  background: rgba(13,19,36,.6);
  border: 1px solid var(--gold-line);
  border-radius: 999px;
}

/* ---- Patrocinadores ----------------------------------------------------- */
.patrocinadores { padding-block: 2.6rem; }
.patrocinadores > h2, .patrocinadores .esfera-titulo { text-align: center; margin-bottom: 1.2rem; }

/* Master: destaque máximo, moldura dupla, glow dourado */
.patrocinador-master {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 132px;
  padding: 2.2rem 1.4rem;
  margin-bottom: 1.3rem;
  text-align: center;
  font-family: var(--serif);
  font-size: 1.15rem;
  letter-spacing: .08em;
  color: var(--ink-body);
  background:
    radial-gradient(120% 90% at 50% 0, rgba(210,170,112,.14), transparent 60%),
    linear-gradient(180deg, #182238, #131B30);
  border: 2px solid rgba(210,170,112,.8);
  border-radius: var(--radius);
  box-shadow: 0 0 34px rgba(210,170,112,.14), var(--shadow);
}
.patrocinador-master::before {          /* linha interna da moldura dupla    */
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid var(--gold-soft);
  border-radius: 11px;
  pointer-events: none;
}
.patrocinador-master::after {           /* rótulo "MASTER" no topo            */
  content: "★ MASTER ★";
  position: absolute;
  top: -.7rem; left: 50%;
  transform: translateX(-50%);
  padding: .12rem .7rem;
  font-size: .62rem;
  letter-spacing: .22em;
  color: var(--gold-1);
  background: var(--navy-bot);
  border: 1px solid var(--gold-line);
  border-radius: 999px;
}
.patrocinador-master.placeholder { font-style: italic; }

/* Grade dos 4 patrocinadores (placeholders) */
.patrocinadores-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap);
}
.patrocinador-card {
  display: grid;
  place-items: center;
  min-height: 92px;
  padding: 1.2rem;
  text-align: center;
  font-size: .9rem;
  color: var(--ink-mut);
  background: linear-gradient(180deg, #161F36, #121A2E);
  border: 1px dashed var(--gold-line);
  border-radius: var(--radius);
}
.patrocinador-card.placeholder { font-style: italic; }

/* ---- Tabela de artilheiros (reusa o visual da classificação) ------------ */
.tabela-artilheiros {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: .95rem;
  color: var(--ink-body);
}
.tabela-artilheiros thead th {
  background: linear-gradient(180deg, #1C2848, #141D34);
  color: var(--gold-1);
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: .04em;
  text-align: center;
  padding: .6rem .5rem;
  white-space: nowrap;
  position: sticky;
  top: 0;
}
.tabela-artilheiros th:nth-child(2), .tabela-artilheiros td:nth-child(2),
.tabela-artilheiros th:nth-child(3), .tabela-artilheiros td:nth-child(3) { text-align: left; }
.tabela-artilheiros tbody td {
  padding: .55rem .5rem;
  text-align: center;
  border-top: 1px solid rgba(210,170,112,.14);
  white-space: nowrap;
}
.tabela-artilheiros tbody tr:nth-child(even) { background: rgba(255,255,255,.02); }
.tabela-artilheiros tbody tr:hover { background: rgba(210,170,112,.07); }

/* ==========================================================================
   MISSÃO 03 — PÓDIO "OS 3 MELHORES DA RODADA" + respiro das 2 tabelas
   Contrato markup: DECISOES-PROJETO #P2. `.podio-rodada` > 3 `.podio-lugar`
   em ordem de ranking (1º = :first-child). Navy+dourado; medalha combina com
   os ícones-medalha existentes. MOBILE-FIRST: empilha 1→2→3.
   ========================================================================== */

/* Respiro entre as 2 tabelas de stats (gols + assistências) e seus títulos */
.artilheiros .table-wrap { margin-bottom: 1.5rem; }
.artilheiros h2 { margin-top: 2.2rem; }

/* Container do pódio — mobile empilha em coluna */
.podio-rodada {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 1.2rem 0 1.8rem;
}

/* Cada lugar — card navy com moldura dourada, medalha no topo, texto central */
.podio-lugar {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .45rem;
  padding: 1.3rem 1rem 1.1rem;
  background: linear-gradient(180deg, var(--card-1), var(--card-2));
  border: 1px solid var(--gold-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

/* Medalha no pódio — reusa .medalha/.medalha-icone, um pouco maiores */
.podio-lugar .medalha { width: 66px; height: 66px; margin-bottom: .1rem; }
.podio-lugar .medalha-icone { font-size: 1.75rem; }

/* Filhos de texto (contrato #P2; opcionais — o card centraliza qualquer conteúdo) */
.podio-pos {
  font-family: var(--serif);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: var(--gold-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.podio-jogador, .podio-nome {   /* %56 emitiu `.podio-nome`; ambos suportados */
  font-family: var(--serif);
  font-size: 1.02rem;
  letter-spacing: .04em;
  color: var(--ink-title);
}
.podio-time { font-size: .9rem; color: var(--ink-body); }
.podio-rotulo {
  font-family: var(--serif);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-mut);
}

/* 1º LUGAR (:first-child) — maior, ouro vivo, glow discreto */
.podio-lugar:first-child {
  border-color: rgba(210,170,112,.9);
  background:
    radial-gradient(120% 90% at 50% 0, rgba(210,170,112,.16), transparent 60%),
    linear-gradient(180deg, #1B2540, #131B30);
  box-shadow: 0 0 30px rgba(210,170,112,.16), var(--shadow);
}
.podio-lugar:first-child .medalha { width: 84px; height: 84px; }
.podio-lugar:first-child .medalha-icone { font-size: 2.2rem; }
.podio-lugar:first-child .podio-jogador,
.podio-lugar:first-child .podio-nome { font-size: 1.15rem; }
/* rótulo "MELHOR DA RODADA" flutuante no topo do 1º (moldura estilo MASTER) */
.podio-lugar:first-child::after {
  content: "★ MELHOR DA RODADA ★";
  position: absolute;
  top: -.7rem; left: 50%;
  transform: translateX(-50%);
  padding: .12rem .7rem;
  font-family: var(--serif);
  font-size: .58rem;
  letter-spacing: .18em;
  white-space: nowrap;
  color: var(--gold-1);
  background: var(--navy-bot);
  border: 1px solid var(--gold-line);
  border-radius: 999px;
}

/* ==========================================================================
   MISSÃO 04 — MANIFESTO da home + TEASER das disputas (com assistências)
   Identidade navy+dourado; dourado SEMPRE em gradiente. MOBILE-FIRST.
   ========================================================================== */

/* ---- Manifesto (momento de brilho, logo após o hero) -------------------- */
.manifesto { padding-block: 2.4rem 1rem; }
.manifesto-inner {
  max-width: 760px;
  margin-inline: auto;
  padding: 2.2rem 1.5rem;
  text-align: center;
  background:
    radial-gradient(120% 90% at 50% 0, rgba(210,170,112,.12), transparent 60%),
    linear-gradient(180deg, var(--card-1), var(--card-2));
}
.manifesto-olho {
  margin: 0 0 .5rem;
  font-family: var(--serif);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-1);
}
.manifesto-titulo {
  font-size: 1.7rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 0 0 1.1rem;
}
.manifesto-inner p {
  max-width: 60ch;
  margin: 0 auto 1rem;
  color: var(--ink-body);
  font-size: 1.05rem;
  line-height: 1.8;
}
.manifesto-inner strong { color: var(--gold-1); font-weight: 600; }
/* Fechamento: linha dourada fina + chamada pra acompanhar */
.manifesto-cta {
  margin-top: 1.3rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--gold-soft);
  font-family: var(--serif);
  letter-spacing: .02em;
  color: var(--ink-title);
}
.manifesto-cta a {
  color: var(--gold-1);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--gold-soft);
}
.manifesto-cta a:hover { border-bottom-color: var(--gold-1); }

/* ---- Teaser das disputas individuais (Chuteira / Garçom / Rodada) -------- */
.stats-teaser { padding-block: 1rem 2.2rem; }
.stats-teaser > h2 { text-align: center; margin-bottom: 1.2rem; }
.stats-teaser-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}
.stats-teaser-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .45rem;
  padding: 1.4rem 1.1rem;
  background: linear-gradient(180deg, var(--card-1), var(--card-2));
  text-decoration: none;
  color: var(--ink-title);
  transition: filter .18s ease, transform .18s ease, border-color .18s ease;
}
.stats-teaser-item h3 {
  margin: .2rem 0 0;
  font-family: var(--serif);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink-title);
  font-size: 1.05rem;
}
.stats-teaser-item .categoria-desc { margin: 0; }
.stats-teaser-item:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
  border-color: var(--gold-1);
}
/* Selo pré-temporada — pílula dourada; sobrepõe a hachura do .placeholder
   (`.stats-teaser-tag.placeholder` 0,2,0 vence `span.placeholder` 0,1,1) */
.stats-teaser-tag {
  margin-top: .35rem;
  padding: .16rem .7rem;
  font-family: var(--serif);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  border: 1px solid var(--gold-line);
  border-radius: 999px;
}
.stats-teaser-tag.placeholder {
  background: rgba(13,19,36,.6);
  color: var(--gold-1);
  font-style: normal;
}

/* ==========================================================================
   DESKTOP / TABLET — amplia o base mobile
   ========================================================================== */
@media (min-width: 768px) {
  h1 { font-size: 2.2rem; }
  .hero { padding: 4.4rem 1rem 3rem; }
  .hero-logo { height: 168px; }
  .hero-titulo { font-size: 3rem; letter-spacing: .12em; }
  .hero::before { width: 620px; height: 620px; top: 30px; }

  /* Nav horizontal; hambúrguer some. 8 itens: permite quebrar sem estourar. */
  .nav-toggle { display: none; }
  .nav-menu {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    width: auto;
    gap: .1rem;
    padding-top: 0;
  }
  .nav-menu a { padding: .5rem .7rem; font-size: .95rem; }

  /* Categorias mais largas, ainda coluna única (fiel à arte) */
  .categorias { max-width: 760px; }

  /* MISSÃO 04 — manifesto maior; teaser em 3 colunas */
  .manifesto-titulo { font-size: 2.1rem; letter-spacing: .1em; }
  .manifesto-inner { padding: 2.8rem 2.4rem; }
  .stats-teaser-grid { grid-template-columns: repeat(3, 1fr); }

  /* MISSÃO 02 — desktop */
  .patrocinadores-grid { grid-template-columns: repeat(4, 1fr); }
  .tabela-artilheiros { min-width: 0; }
  .narrativa { max-width: 820px; margin-inline: auto; }

  /* MISSÃO 03 — pódio em linha, layout clássico 2º · 1º · 3º
     (bottom-align faz o 1º, mais alto, "subir"; ordem visual centra o 1º) */
  .podio-rodada {
    flex-direction: row;
    align-items: flex-end;
    justify-content: center;
    gap: 1.1rem;
    max-width: 720px;
    margin-inline: auto;
  }
  .podio-lugar { flex: 1 1 0; max-width: 240px; }
  .podio-lugar:nth-child(2) { order: 1; }   /* 2º à esquerda */
  .podio-lugar:first-child  { order: 2; padding-top: 1.7rem; } /* 1º ao centro, maior */
  .podio-lugar:nth-child(3) { order: 3; }   /* 3º à direita */

  /* Grids multi-coluna */
  .times-grid, .times .cards, .times .grid-times, .times ul, .times .lista-times {
    grid-template-columns: repeat(3, 1fr);
  }
  .noticias-grid, .noticias .cards, .noticias .grid-noticias, .noticias ul {
    grid-template-columns: repeat(2, 1fr);
  }
  .tabela-classificacao { min-width: 0; }
}

@media (min-width: 1024px) {
  .noticias-grid, .noticias .cards, .noticias .grid-noticias, .noticias ul {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ==========================================================================
   EM BREVE — bloco para seções que ainda não têm conteúdo (27/10)
   ========================================================================== */
.em-breve {
  text-align: center;
  padding: 2rem 1.25rem;
  margin: 1rem auto 0;
  max-width: 640px;
  background: linear-gradient(180deg, var(--card-1), var(--card-2));
  border-radius: var(--radius);
}
.em-breve-selo {
  display: inline-block;
  margin: 0 0 .8rem;
  padding: .3rem 1.1rem;
  font-family: var(--serif);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-1);
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  background: rgba(13,19,36,.6);
}
.em-breve-texto { margin: 0 auto; max-width: 46ch; color: var(--ink-body); }
.em-breve .btn-verde { margin-top: 1.2rem; }
.hero .btn-verde { margin-top: 1.6rem; }
.em-breve + .selo-convite,
.doc-wrap + .selo-convite { display: table; margin-left: auto; margin-right: auto; }