/* DiaDeJogo — landing page */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 400 16px/24px var(--font-texto);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--tinta); }
a:hover { color: var(--tinta-suave); }

:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.painel :focus-visible { outline-color: var(--lampada); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.container { max-width: 1120px; margin: 0 auto; padding-inline: var(--space-4); }

/* ---------- Tipografia ---------- */
.rotulo {
  margin: 0;
  font: 600 12px/16px var(--font-texto);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.painel .rotulo { color: var(--cal); }

.titulo-xl {
  margin: 0;
  font: 800 clamp(48px, 7vw, 88px)/.92 var(--font-titulo);
}
.titulo-l {
  margin: 0;
  font: 700 40px/1 var(--font-titulo);
}
.titulo-m {
  margin: 0;
  font: 700 24px/1.1 var(--font-titulo);
}
.suave { color: var(--tinta-suave); }
.legenda { font-size: 14px; line-height: 20px; }

.cabecalho-secao { display: flex; flex-direction: column; gap: var(--space-2); }

/* ---------- Botões ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding: 0 var(--space-6);
  border: var(--border-placar) solid var(--moldura); border-radius: var(--radius-0);
  font: 700 18px/1 var(--font-titulo); letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: background-color .12s, color .12s, border-color .12s;
}
.botao--primario { background: var(--painel); color: var(--lampada); }
.botao--primario:hover { background: var(--lampada); color: var(--na-lampada); border-color: var(--lampada); }
.botao--acesa { background: var(--lampada); color: var(--na-lampada); border-color: var(--lampada); }
.botao--acesa:hover { background: var(--cal); border-color: var(--cal); color: var(--na-lampada); }
.botao--secundario { background: transparent; color: var(--tinta); border-color: var(--tinta); font-size: 16px; padding: 0 var(--space-4); }
.botao--secundario:hover { background: var(--papel); color: var(--tinta); }
.botao--contorno-claro { background: transparent; color: var(--cal); border-color: var(--cal); font-size: 16px; min-height: 44px; padding: 0 var(--space-4); }
.botao--contorno-claro:hover { background: var(--cal); color: var(--painel); }
.botao--bloco { width: 100%; }

/* ---------- Cabeçalho ---------- */
.site-header { border-bottom: var(--border-fina) solid var(--linha-fraca); }
.site-header .container {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-3); padding-block: var(--space-4);
}
.marca {
  font: 800 28px/1 var(--font-titulo);
  color: var(--tinta); text-decoration: none;
}
.nav { display: flex; flex-wrap: wrap; gap: var(--space-6); font-weight: 600; font-size: 14px; }
.nav a { text-decoration: none; }

/* ---------- Hero ---------- */
.hero {
  display: flex; flex-wrap: wrap; align-items: center; gap: 48px;
  padding-block: 64px 48px;
}
.hero__texto { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-6); }
.hero__texto p.lead { margin: 0; font-size: 18px; line-height: 28px; color: var(--tinta-suave); max-width: 480px; }
.hero__texto .botao { align-self: flex-start; }
.hero__placar { flex: 1 1 360px; min-width: 0; display: flex; justify-content: center; }

/* ---------- Placar ---------- */
.placar {
  width: 100%; max-width: 420px;
  background: var(--painel); color: var(--cal);
  border: var(--border-placar) solid var(--moldura);
  padding: var(--space-6);
}
.lampadas { display: flex; gap: var(--space-1); margin-bottom: 20px; }
.lampadas span { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--lampada-apagada); }
.lampadas span.on { background: var(--lampada); }
.placar__topo { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.placar__times, .placar__nomes { display: grid; grid-template-columns: 1fr auto 1fr; text-align: center; }
.placar__times {
  align-items: center; margin-top: var(--space-6);
  font: 900 40px/1.1 var(--font-placar); letter-spacing: .04em; color: var(--lampada);
}
.placar__x { font: 700 20px/1 var(--font-titulo); color: var(--cal); padding: 0 var(--space-2); }
.placar__nomes { font-size: 14px; line-height: 20px; }
.placar__nomes span:nth-child(2) { width: 36px; }
.placar__hora { margin-top: 28px; text-align: center; font: 900 72px/1 var(--font-placar); color: var(--lampada); }
.placar__data { margin-top: var(--space-2); text-align: center; font-weight: 600; }
.placar__rodape {
  margin-top: 20px; padding-top: var(--space-3);
  border-top: var(--border-fina) dashed var(--lampada-apagada);
  text-align: center; font-size: 14px; line-height: 20px;
}

/* ---------- Selo de mando ---------- */
.selo {
  display: inline-flex; align-items: center; padding: 2px var(--space-2);
  border: var(--border-placar) solid var(--tinta); color: var(--tinta);
  font: 600 12px/16px var(--font-texto); letter-spacing: .1em; text-transform: uppercase;
}
.selo--casa { background: var(--tinta); color: var(--papel); }
.painel .selo { border-color: var(--cal); color: var(--cal); }
.painel .selo--casa { background: var(--cal); color: var(--painel); }

/* ---------- Clubes ---------- */
.clubes { display: flex; flex-direction: column; gap: var(--space-6); padding-block: var(--space-6) 72px; }
.grade-clubes {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2);
}
@media (min-width: 560px) { .grade-clubes { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-3); } }
@media (min-width: 1000px) { .grade-clubes { grid-template-columns: repeat(10, minmax(0, 1fr)); } }
.grade-clubes li { display: flex; min-width: 0; }
.clube {
  flex: 1; min-width: 0; min-height: 128px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-2);
  background: var(--papel-2); color: var(--tinta);
  border: var(--border-placar) solid var(--linha-fraca); border-radius: var(--radius-0);
  font: 600 14px/18px var(--font-texto); text-align: center; cursor: pointer;
  transition: border-color .12s, background-color .12s;
}
@media (max-width: 559px) {
  .clube { min-height: 80px; flex-direction: row; justify-content: flex-start; gap: var(--space-3); padding: var(--space-2) var(--space-3); text-align: left; }
  .clube__escudo { flex: none; }
}
.clube:hover { border-color: var(--tinta); }
.clube[aria-pressed="true"] { background: var(--painel); border-color: var(--moldura); color: var(--cal); }
.clube__escudo { position: relative; width: 56px; height: 64px; display: flex; align-items: center; justify-content: center; }
.clube__escudo img { width: 56px; height: 64px; object-fit: contain; }
.clube__escudo svg { position: absolute; inset: 0; }
.clube__escudo svg path { fill: none; stroke: var(--linha); stroke-width: 2; stroke-dasharray: 4 3; }
.clube[aria-pressed="true"] .clube__escudo svg path { stroke: var(--lampada); }
.clube__sigla { position: relative; font: 900 16px/1 var(--font-placar); }
.clube[aria-pressed="true"] .clube__sigla { color: var(--lampada); }

/* ---------- Tutorial ---------- */
.tutorial { border: var(--border-placar) solid var(--moldura); background: var(--papel-2); scroll-margin-top: var(--space-4); }
.tutorial[hidden] { display: none; }
.tutorial__topo {
  background: var(--painel); color: var(--cal);
  padding: 20px var(--space-6);
  display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; justify-content: space-between;
}
.tutorial__titulo { margin: var(--space-1) 0 0; font: 800 32px/1 var(--font-titulo); color: var(--lampada); }
.tutorial__corpo { padding: var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-8); }
.tutorial__link { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.tutorial__link label { font-weight: 600; }
.tutorial__passos { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.linha-link { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.campo {
  flex: 1 1 220px; min-width: 0; min-height: 48px; padding: 0 var(--space-3);
  border: var(--border-fina) solid var(--linha); border-radius: var(--radius-sm);
  background: var(--papel); color: var(--tinta);
  font: 400 14px/20px "Courier New", monospace;
}
.copiado { color: var(--gramado); font-weight: 600; font-size: 14px; line-height: 20px; margin: 0; min-height: 20px; }

.abas { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.aba {
  min-height: 40px; padding: 0 14px;
  background: transparent; color: var(--tinta);
  border: var(--border-placar) solid var(--tinta); border-radius: var(--radius-0);
  font: 600 14px/20px var(--font-texto); cursor: pointer;
}
.aba[aria-selected="true"] { background: var(--painel); color: var(--lampada); border-color: var(--moldura); }
.lista-passos { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-3); counter-reset: passo; }
.lista-passos li { display: flex; gap: var(--space-3); align-items: flex-start; counter-increment: passo; }
.lista-passos li::before {
  content: counter(passo);
  flex: none; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  background: var(--painel); color: var(--lampada); border: var(--border-fina) solid var(--moldura);
  font: 900 18px/1 var(--font-placar);
}
.lista-passos li span { padding-top: var(--space-1); }

/* ---------- Como funciona ---------- */
.faixa { background: var(--papel-2); border-block: var(--border-fina) solid var(--linha-fraca); }
.secao { padding-block: 72px; display: flex; flex-direction: column; gap: 40px; }
.passos {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-6);
}
.passos li { display: flex; flex-direction: column; gap: var(--space-4); }
.passos p { margin: 0; }
.numero {
  width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;
  background: var(--painel); color: var(--lampada); border: var(--border-placar) solid var(--moldura);
  font: 900 44px/1 var(--font-placar);
}
.numero--aceso { background: var(--lampada); color: var(--na-lampada); border-color: var(--lampada); }

/* ---------- Exemplo de evento ---------- */
.exemplo { padding-block: 72px; display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.exemplo > div { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.exemplo p { margin: 0; }
.evento { background: var(--papel-2); border: var(--border-fina) solid var(--linha); padding: 20px; display: flex; flex-direction: column; gap: 6px; }
.evento__titulo { font-weight: 600; font-size: 18px; }
.evento__info { display: flex; align-items: center; gap: var(--space-2); }
.evento__info svg { flex: none; stroke: currentColor; }
.aviso { background: var(--lampada); color: var(--na-lampada); padding: var(--space-4) 20px; display: flex; gap: var(--space-3); align-items: flex-start; }
.aviso svg { flex: none; margin-top: 2px; stroke: currentColor; }

/* ---------- FAQ ---------- */
.faq { max-width: 760px; margin: 0 auto; padding: 72px var(--space-4); display: flex; flex-direction: column; gap: var(--space-6); }
.faq__lista { border-top: var(--border-placar) solid var(--tinta); }
.faq details { border-bottom: var(--border-fina) solid var(--linha); }
.faq summary {
  min-height: 56px; padding: var(--space-3) 0;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  font: 600 18px/24px var(--font-texto); cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 900 24px/1 var(--font-placar); }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0 0 var(--space-4); color: var(--tinta-suave); max-width: 640px; }

/* ---------- CTA final ---------- */
.cta { background: var(--painel); color: var(--cal); border-block: var(--border-placar) solid var(--moldura); }
.cta .container { padding-block: 72px; display: flex; flex-wrap: wrap; gap: var(--space-8); align-items: center; justify-content: space-between; }
.cta__texto { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.cta__texto h2 { margin: 0; font: 800 clamp(36px, 5vw, 56px)/.95 var(--font-titulo); color: var(--lampada); }
.cta__texto p { margin: 0; }

/* ---------- Rodapé ---------- */
.rodape .container {
  padding-block: var(--space-8);
  display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between;
  font-size: 14px; line-height: 20px; color: var(--tinta-suave);
}
.rodape .marca { font-size: 20px; }

/* ---------- Animação de marca: dígitos acendem ---------- */
@media (prefers-reduced-motion: no-preference) {
  .acender { animation: acender .4s steps(4, end) both; }
  @keyframes acender { from { opacity: 0; } to { opacity: 1; } }
}