@charset "UTF-8";
/* =========================================================================
   RONAMAGIC — identidade visual
   Paleta e tipografia da spec §9. Escrito à mão, sem framework e sem CDN.

   A ideia: a página é clara e disciplinada — prata azulada, tinta azul
   profunda, hairlines em vez de cartões — e a cor só aparece em dois
   lugares, sempre carregando informação:

     1. A FAIXA VERTICAL de cada jogo, na cor do adversário. Com o logo ao
        lado do nome, é a identidade do time (CLAUDE.md), e é o que faz o
        calendário ser legível de longe.
     2. O ÂMBAR, reservado a preço e ação. Se está âmbar, é dinheiro ou é
        um botão.

   A hora de Orlando, rotulada, é o elemento assinatura: é a primeira coisa
   que o cliente brasileiro procura, e o site diz uma hora só — a de onde o
   jogo acontece (leva 25).
   ========================================================================= */

:root {
  /* Paleta fechada na spec §9 */
  --azul: #0b1f4b;
  --prata: #c4ced4;
  --preto: #0a0a0a;
  --acento: #f5a623;

  /* O MESMO âmbar não serve para as duas coisas. Como preenchimento (botão, faixa,
     contorno) o #f5a623 é a cor da marca; como TEXTO sobre papel claro ele dá 1,78:1
     de contraste, muito abaixo dos 4,5:1 da WCAG AA — o Lighthouse reprovou as cinco
     páginas por causa dele. Este é o mesmo âmbar escurecido até passar, e é ele que
     pinta preço e número. */
  --acento-texto: #8a5200;

  /* Derivadas — mesma família, para fundo e hairline */
  --azul-fundo: #081737;
  --papel: #eef1f5;
  --papel-alto: #ffffff;
  --linha: #d7dee6;
  --tinta: #0a0a0a;
  --tinta-fraca: #4a5568;

  --display: "Sora", "Segoe UI", system-ui, -apple-system, sans-serif;
  --texto: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Escala tipográfica: passo 1.25, do rótulo ao nome do adversário */
  --t-rotulo: 0.6875rem;
  --t-apoio: 0.8125rem;
  --t-corpo: 1rem;
  --t-medio: 1.25rem;
  --t-grande: clamp(1.75rem, 4vw, 2.5rem);
  --t-heroi: clamp(2.5rem, 8vw, 5.25rem);

  --coluna: 72rem;
  --respiro: clamp(1.25rem, 4vw, 3rem);
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: var(--t-corpo);
  line-height: 1.55;

  /* Números tabulares em todo o site: preço, hora e contagem ficam alinhados
     coluna a coluna, e a listagem para de "dançar" a cada linha. */
  font-variant-numeric: tabular-nums;
}

h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
}

a {
  color: inherit;
}

img {
  max-width: 100%;
}

/* Foco visível em todo elemento interativo. Não é acessório: o mapa da arena
   e o calendário precisam ser navegáveis só com o teclado. */
:focus-visible {
  outline: 3px solid var(--acento);
  outline-offset: 2px;
}

.container {
  width: 100%;
  max-width: var(--coluna);
  margin-inline: auto;
  padding-inline: var(--respiro);
}

.pular-para-conteudo {
  position: absolute;
  left: -9999px;
}

.pular-para-conteudo:focus {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 50;
  padding: 0.75rem 1rem;
  background: var(--acento);
  color: var(--preto);
  font-weight: 600;
}

/* ---------- Rótulo: o tipo de letra pequena que estrutura a página -------- */

.rotulo {
  display: block;
  font-family: var(--texto);
  font-size: var(--t-rotulo);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}

/* ---------- Cabeçalho ---------------------------------------------------- */

.topo {
  background: var(--azul);
  color: var(--papel-alto);
}

.topo-interno {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
  padding-block: 1rem;
}

/* O bloqueio da marca: `Rona` ⬤ `Magic`, com o símbolo NO MEIO. O corpo declarado
   aqui é o de `Magic` — `Rona` e o símbolo crescem a partir dele, em `em`, e por isso
   o bloqueio inteiro escala junto se este número mudar. */
.marca {
  display: inline-flex;
  align-items: center;
  gap: 0.06em;
  font-family: var(--display);
  font-size: 1.7875rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-decoration: none;
  margin-right: auto;
}

/* 1,5× o corpo de `Magic`, e é constante decidida, não ajuste de gosto: a Caveat Brush
   tem altura-x baixa e no MESMO corpo sai opticamente menor que a Sora ao lado. O
   `letter-spacing` negativo do bloqueio é da Sora; numa manuscrita ele empasta as
   letras, então aqui volta a zero. */
.marca-rona {
  font-family: "Caveat Brush", "Segoe Script", cursive;
  font-size: 1.5em;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--acento);
}

/* O símbolo é preso ao corpo de `Magic`, não ao de `Rona`: é ao lado da Sora que ele
   precisa parecer da mesma altura. O `viewBox` tem 64 e o disco tem 42 deles, então
   1,15em de caixa dá um disco de ~0,75em — a altura de caixa alta da Sora, medida na
   captura de 1440 px. `flex: none` porque em 360 px o cabeçalho quebra em duas linhas
   e um símbolo encolhível vira um oval. */
.marca-simbolo {
  flex: none;
  width: 1.15em;
  height: 1.15em;
}

.marca-magic {
  color: var(--acento);
}

/* No cabeçalho escuro o âmbar é de `Rona`, e `Magic` fica branco. O escopo em `.marca`
   é de propósito: `.marca-magic` sozinha continua âmbar, que é como o `_AdminLayout`
   a usa. */
.marca .marca-magic {
  color: var(--papel-alto);
}

.menu {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  align-items: center;
  font-size: var(--t-apoio);
  font-weight: 500;
}

.menu a {
  text-decoration: none;
  padding-block: 0.25rem;
  border-bottom: 2px solid transparent;
}

.menu a:hover,
.menu a[aria-current="page"] {
  border-bottom-color: var(--acento);
}

/* Item de navegação cuja página ainda não existe. Fica visível porque o mapa
   do site é uma promessa que o cliente lê — mas não é link, porque link que
   não leva a lugar nenhum é pior que a espera. */
/* A opacidade sobe de 0,6 para 0,75: em 0,6 a prata sobre o azul do topo dava 4,44:1,
   a seis centésimos de passar os 4,5:1 da WCAG AA. O item continua visivelmente mais
   apagado que os links de verdade — que é o trabalho dele. */
.menu-em-breve {
  color: var(--prata);
  cursor: default;
  opacity: 0.75;
}

.menu-em-breve::after {
  content: "em breve";
  display: inline-block;
  margin-left: 0.35rem;
  font-size: 0.5rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.8;
}

/* ---------- Herói: o próximo jogo ---------------------------------------- */

.heroi {
  background: var(--azul-fundo);
  color: var(--papel-alto);
  padding-block: clamp(2.5rem, 7vw, 4.5rem);
}

.heroi-interno {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
}

@media (min-width: 56rem) {
  .heroi-interno {
    grid-template-columns: minmax(0, 1.4fr) minmax(16rem, 1fr);
    align-items: end;
  }
}

.heroi .rotulo {
  color: var(--prata);
}

/* A faixa na cor do time: com os logos acima do nome, a identidade do adversário. */
.heroi-titulo {
  border-left: 6px solid var(--faixa, var(--prata));
  padding-left: clamp(1rem, 3vw, 1.75rem);
  margin-top: 0.75rem;
}

.heroi-adversario {
  font-size: var(--t-heroi);
  text-wrap: balance;
}

.heroi-data {
  margin: 0.75rem 0 0;
  font-size: var(--t-medio);
  color: var(--prata);
}

.heroi-contagem {
  display: inline-block;
  margin-top: 1.25rem;
  font-size: var(--t-apoio);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--acento);
}

.heroi-preco {
  border-top: 1px solid rgb(196 206 212 / 35%);
  padding-top: 1rem;
}

.heroi-preco .rotulo {
  color: var(--prata);
}

.preco-grande {
  display: block;
  font-family: var(--display);
  font-size: var(--t-grande);
  font-weight: 800;
  color: var(--acento);
  letter-spacing: -0.02em;
  margin-top: 0.25rem;
}

/* ---------- A hora de Orlando: o elemento assinatura --------------------- */

/* Uma célula só, na largura inteira do bloco: a hora de Brasília saiu (leva
   25), e nenhuma marcação produz mais duas células — por isso não há regra de
   célula vizinha. */
.horas {
  margin-top: 1.5rem;
  border: 1px solid var(--linha);
  background: var(--papel-alto);
}

.horas-celula {
  padding: 0.75rem 1rem;
}

.horas-valor {
  display: block;
  font-family: var(--display);
  font-size: var(--t-medio);
  font-weight: 700;
  margin-top: 0.125rem;
}

/* Sobre fundo escuro a caixa inverte: fundo transparente, hairline prata.
   **Vale para o herói E para o cabeçalho da página do jogo.** Quando eram duas
   regras separadas, a do jogo trocava só a cor do TEXTO e o fundo continuava
   branco — a caixa do horário, que é o elemento assinatura do site, ficava
   branca sobre branco e invisível. Foi a captura de tela do E2E que mostrou. */
.heroi .horas,
.jogo-topo .horas {
  background: transparent;
  border-color: rgb(196 206 212 / 35%);
}

.heroi .rotulo,
.heroi .horas-valor,
.jogo-topo .horas-valor {
  color: var(--papel-alto);
}

/* ---------- Botões ------------------------------------------------------- */

.botao {
  display: inline-block;
  padding: 0.875rem 1.5rem;
  border: 0;
  border-radius: 2px;
  font-family: var(--texto);
  font-size: var(--t-apoio);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

.botao-principal {
  background: var(--acento);
  color: var(--preto);
}

.botao-principal:hover {
  background: #ffb944;
}

.botao-secundario {
  background: transparent;
  color: inherit;
  border: 1px solid currentcolor;
}

.botao-linha {
  font-size: var(--t-apoio);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid var(--acento);
  padding-bottom: 1px;
  white-space: nowrap;
}

/* ---------- Seções ------------------------------------------------------- */

.secao {
  padding-block: clamp(2.5rem, 6vw, 4rem);
}

.secao-cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin-bottom: 1.5rem;
}

.secao-titulo {
  font-size: var(--t-grande);
}

/* ---------- A linha de jogo: a unidade que se repete no site inteiro ----- */

.jogos {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--linha);
}

/* Abaixo de 64rem, cada filho tem uma ÁREA com nome, e não a próxima célula
   livre: data e nome à esquerda, o preço no canto direito na altura dos dois,
   horário e selos embaixo, em toda linha. Na colocação automática, a posição de
   cada filho dependia da largura do vizinho, e nome e preço mudavam de lugar de
   uma linha para outra (leva 28). A ordem do HTML continua a de leitura. */
.jogo {
  border-bottom: 1px solid var(--linha);
  border-left: 4px solid var(--faixa, var(--prata));
  background: var(--papel-alto);
  padding: 1rem clamp(0.875rem, 2vw, 1.25rem);
  display: grid;
  gap: 0.5rem 1.25rem;
  /* minmax(0, ...) e não 1fr: em 360 px o "Minnesota Timberwolves" tem
     mínimo de 190 px com o logo, e a 1fr não encolhe abaixo disso — empurrava o
     preço 1 px para fora do alinhamento. Assim o preço fica sempre no canto. */
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "data preco"
    "adv preco"
    "horas horas"
    "meta meta";
  align-items: start;
}

/* 64rem, e não 56rem: com as colunas fixas abaixo, em 896 px sobrariam ~6rem
   para o nome, e a medição pegou 24 elementos estourando a linha. Em 1024 px o
   nome mais longo ocupa duas linhas e nada estoura. Entre 896 e 1023 px a linha
   usa o arranjo do celular. */
@media (min-width: 64rem) {
  /* Cinco colunas de largura FIXA, exceto a do nome: cada `li` é uma grade
     própria, e trilha `auto` mede o conteúdo só DAQUELA linha — a coluna dos
     selos mudava de largura com "Pré-temporada", e o horário andava junto.
     Larguras fixas dão o mesmo x em toda linha de toda lista, inclusive entre
     as `ul` dos meses (o subgrid alinharia só dentro de cada uma). Data,
     horário e preço cabem inteiros (medidos com Sora e Inter: 5,04, 10,65 e
     4,93rem); os selos que passam de 13rem — "Data a confirmar" com a faixa
     chega a 13,53rem — quebram dentro da célula, sem abrir a coluna. */
  .jogo {
    grid-template-columns: 6rem minmax(0, 1fr) 11.5rem 13rem 7.5rem;
    grid-template-areas: "data adv horas meta preco";
    align-items: center;
  }
}

.jogo-data {
  grid-area: data;
  font-size: var(--t-apoio);
  font-weight: 600;
  color: var(--tinta-fraca);
  white-space: nowrap;
}

.jogo-adversario {
  grid-area: adv;
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--display);
  font-size: var(--t-medio);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0;
}

/* Na linha de jogo, o logo ocupa uma caixa de largura fixa, para o nome começar
   no mesmo ponto em toda linha. 1.85em é a largura do logo mais largo que ainda
   cabe a 1.15em de altura (Lakers e Pelicans, 1,59:1); o Spurs, mais largo,
   fica mais baixo dentro da caixa. Herói, cabeçalho e lista de adversários
   continuam com a largura natural. */
.jogo-adversario .logo {
  width: 1.85em;
  height: 1.15em;
  max-width: none;
  object-fit: contain;
}

/* Linha que não tem logo (adversário a definir, ou arquivo ausente): um vazio
   do mesmo tamanho recua o nome a mesma distância, pelo mesmo gap do flex. */
.jogo-adversario:not(:has(.logo))::before {
  content: "";
  flex: none;
  width: 1.85em;
}

.jogo-meta {
  grid-area: meta;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 0.5rem;
  align-items: center;
  font-size: var(--t-apoio);
  color: var(--tinta-fraca);
}

.jogo-horas {
  grid-area: horas;
  font-size: var(--t-apoio);
  color: var(--tinta-fraca);
  line-height: 1.35;
}

.jogo-horas strong {
  color: var(--tinta);
  font-weight: 600;
}

.jogo-preco {
  grid-area: preco;
  align-self: center;
  font-family: var(--display);
  font-weight: 700;
  white-space: nowrap;
  text-align: right;
}

.jogo-preco small {
  display: block;
  font-family: var(--texto);
  font-size: var(--t-rotulo);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}

/* ---------- Selos -------------------------------------------------------- */

.selo {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  font-size: var(--t-rotulo);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--linha);
  color: var(--tinta-fraca);
  white-space: nowrap;
}

.selo-promo {
  border-color: var(--acento);
  background: var(--acento);
  color: var(--preto);
}

.selo-pre {
  border-style: dashed;
}

/* ---------- Filtros ------------------------------------------------------ */

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: flex-end;
  padding: 1rem clamp(0.875rem, 2vw, 1.25rem);
  background: var(--papel-alto);
  border: 1px solid var(--linha);
  margin-bottom: 2rem;
}

.campo {
  display: grid;
  gap: 0.25rem;
}

.campo select {
  font-family: var(--texto);
  font-size: var(--t-corpo);
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--linha);
  border-radius: 2px;
  background: var(--papel-alto);
  color: var(--tinta);
  min-width: 10rem;
}

.filtros-acoes {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-left: auto;
}

/* ---------- Mês ---------------------------------------------------------- */

.mes {
  margin-top: 2.5rem;
}

.mes:first-of-type {
  margin-top: 0;
}

.mes-titulo {
  font-size: var(--t-medio);
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--azul);
}

.mes-contagem {
  font-family: var(--texto);
  font-size: var(--t-apoio);
  font-weight: 500;
  color: var(--tinta-fraca);
  margin-left: 0.5rem;
}

/* ---------- Como funciona ------------------------------------------------ */

.passos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
  counter-reset: passo;
}

@media (min-width: 48rem) {
  .passos {
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
  }
}

/* A numeração fica porque isto É uma sequência: sem escolher o jogo não há o
   que cotar, e sem cotação não há o que confirmar. */
.passo {
  counter-increment: passo;
  border-top: 2px solid var(--azul);
  padding-top: 1rem;
}

.passo::before {
  content: counter(passo, decimal-leading-zero);
  display: block;
  font-family: var(--display);
  font-size: var(--t-medio);
  font-weight: 800;
  color: var(--acento-texto);
  margin-bottom: 0.375rem;
}

.passo h3 {
  font-size: var(--t-corpo);
  font-weight: 700;
  margin-bottom: 0.375rem;
}

.passo p {
  margin: 0;
  color: var(--tinta-fraca);
}

/* ---------- Vazio -------------------------------------------------------- */

.vazio {
  padding: 2.5rem 1.25rem;
  background: var(--papel-alto);
  border: 1px dashed var(--linha);
  text-align: center;
  color: var(--tinta-fraca);
}

/* ---------- Rodapé ------------------------------------------------------- */

.rodape {
  background: var(--azul);
  color: var(--prata);
  padding-block: clamp(2rem, 5vw, 3rem);
  margin-top: clamp(2.5rem, 6vw, 4rem);
  font-size: var(--t-apoio);
}

.rodape a {
  color: var(--papel-alto);
}

.rodape-marca {
  font-family: var(--display);
  font-size: var(--t-medio);
  font-weight: 800;
  color: var(--papel-alto);
}

.rodape-aviso {
  max-width: 46rem;
  margin-top: 1rem;
  line-height: 1.6;
}

/* ---------- WhatsApp flutuante ------------------------------------------- */

.whatsapp {
  position: fixed;
  right: clamp(0.75rem, 3vw, 1.5rem);
  bottom: clamp(0.75rem, 3vw, 1.5rem);
  z-index: 40;
  background: var(--acento);
  color: var(--preto);
  padding: 0.75rem 1.125rem;
  border-radius: 2px;
  font-size: var(--t-apoio);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  box-shadow: 0 6px 24px rgb(10 10 10 / 22%);
}

@media (prefers-reduced-motion: no-preference) {
  .whatsapp {
    transition: transform 120ms ease-out;
  }

  .whatsapp:hover {
    transform: translateY(-2px);
  }
}

/* ---------- Página de erro ----------------------------------------------- */

.erro-codigo {
  font-family: var(--display);
  font-size: var(--t-heroi);
  font-weight: 800;
  color: var(--prata);
}

/* =========================================================================
   ETAPA 03 — página do jogo, formulário, acompanhamento e páginas de texto
   ========================================================================= */

/* ---------- Coluna estreita: leitura e formulário ------------------------ */

/* 38rem dá uma linha de ~70 caracteres na escala do site. Formulário e texto
   corrido não herdam a largura do calendário: campo de 72rem faz o olho
   perder o começo da linha seguinte. */
.container-estreito {
  max-width: 38rem;
}

/* ---------- Linha de jogo clicável --------------------------------------- */

.jogo-link {
  text-decoration: none;
}

/* O alvo de clique é a linha inteira, mas quem é anunciado como link é só o
   nome do time. */
.jogo-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.jogo {
  position: relative;
}

.jogo:hover {
  background: var(--papel-alto);
}

.jogo:has(.jogo-link:focus-visible) {
  outline: 3px solid var(--acento);
  outline-offset: 2px;
}

.jogo-link:focus-visible {
  outline: none;
}

/* ---------- Cabeçalho da página do jogo ---------------------------------- */

.jogo-topo {
  position: relative;
  padding: clamp(1.5rem, 5vw, 3rem) 0;
  background: var(--azul);
  color: var(--papel-alto);
  border-bottom: 6px solid var(--faixa, var(--prata));
}

.migalhas {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 1.25rem;
  font-size: var(--t-apoio);
  color: var(--prata);
}

.migalhas a {
  color: var(--prata);
}

.jogo-topo .rotulo {
  color: var(--prata);
}

/* Centro, e não linha de base: com o logo, a linha de base de cada nome seria a
   borda de baixo da imagem, e "Orlando" desceria em relação ao adversário. */
.jogo-titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin: 0.75rem 0 0.5rem;
  font-size: var(--t-grande);
}

.jogo-titulo-x {
  color: var(--faixa, var(--prata));
  font-size: 0.7em;
}

.jogo-titulo-casa,
.jogo-titulo-fora {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
}

/* ---------- Logos dos times (leva 27) ------------------------------------ */

/* O logo acompanha o nome ao lado: a altura é relativa à fonte dele, e o nome
   já escala com clamp nas três larguras. A largura sai da proporção do arquivo
   (o width/height do <img>); o teto em em só segura um logo largo demais, sem
   deformar, para que nenhuma linha abra rolagem lateral em 360. */
.logo {
  flex: none;
  height: 1.15em;
  width: auto;
  max-width: 2.6em;
  object-fit: contain;
}

/* Nos fundos escuros, a pastilha clara: metade das cores principais dos times
   some contra o azul. Cantos arredondados, e não círculo — o círculo encolheria
   os logos largos. A altura conta sem a pastilha: o desenho fica em 1em do nome
   e a pastilha inteira em 1,25em. */
.heroi .logo,
.jogo-topo .logo {
  box-sizing: content-box;
  height: 1em;
  max-width: 2.4em;
  padding: 0.125em;
  border-radius: 0.2em;
  background: var(--papel-alto);
}

/* O herói: os dois logos numa linha própria, acima do nome, na escala dele. */
.heroi-logos {
  display: flex;
  align-items: center;
  gap: 0.3em;
  margin-bottom: 0.3em;
  font-size: var(--t-heroi);
  line-height: 1;
}

.heroi-logos-x {
  color: var(--faixa, var(--prata));
  font-family: var(--display);
  font-size: 0.5em;
}

.jogo-data-longa {
  margin: 0 0 1.25rem;
  font-size: var(--t-medio);
  color: var(--prata);
}

.jogo-selos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.jogo-topo .selo {
  border-color: rgb(255 255 255 / 35%);
  color: var(--papel-alto);
}

/* O selo de promoção é o único com fundo âmbar, e sobre âmbar o texto é PRETO.
   A regra acima pintava todos os selos do cabeçalho de branco, e branco sobre
   âmbar dá 2,02:1 — ilegível, e o Lighthouse pegou. */
.jogo-topo .selo-promo {
  color: var(--preto);
}

.jogo-nota {
  margin: 1.25rem 0 0;
  font-size: var(--t-apoio);
  color: var(--prata);
}

/* ---------- Seções e apoio ----------------------------------------------- */

.secao-alterna {
  background: var(--papel-alto);
}

.secao-apoio {
  max-width: 44rem;
  margin: 0 0 1.5rem;
  color: var(--tinta-fraca);
}

.secao-subtitulo {
  margin: 2rem 0 0.75rem;
  font-size: var(--t-medio);
}

/* ---------- Matriz de áreas ---------------------------------------------- */

.areas {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--linha);
}

.area {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.35rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--linha);
}

@media (min-width: 48rem) {
  .area {
    grid-template-columns: 1fr auto auto;
    align-items: center;
    column-gap: 1.5rem;
  }

  .area-descricao,
  .area-distancia {
    grid-column: 1;
  }

  .area-preco,
  .area-botao {
    grid-row: 1 / span 3;
  }

  .area-preco {
    grid-column: 2;
    text-align: right;
  }

  .area-botao {
    grid-column: 3;
  }
}

.area-nome {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.area-nome h3 {
  font-size: var(--t-medio);
}

.area-descricao {
  margin: 0;
  font-size: var(--t-apoio);
  color: var(--tinta-fraca);
}

.area-distancia {
  font-size: var(--t-rotulo);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}

.area-preco {
  font-family: var(--display);
  font-size: var(--t-medio);
  font-weight: 800;
  color: var(--acento-texto);
}

/* ---------- Estoque de pré-adquiridos ------------------------------------ */

.estoque {
  list-style: none;
  margin: 0;
  padding: 0;
}

.estoque-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--linha);
}

.estoque-area {
  font-weight: 600;
}

.estoque-lugar {
  flex: 1 1 12rem;
  font-size: var(--t-apoio);
  color: var(--tinta-fraca);
}

.estoque-preco {
  font-family: var(--display);
  font-weight: 800;
  color: var(--acento-texto);
}

/* ---------- Adversário --------------------------------------------------- */

.adversario-linha {
  margin: 0 0 1rem;
  font-size: var(--t-apoio);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}

.adversario-resumo {
  max-width: 44rem;
  margin: 0;
}

/* ---------- Formulário --------------------------------------------------- */

.formulario {
  display: grid;
  gap: 1.25rem;
  margin-top: 2rem;
}

.formulario .campo {
  display: grid;
  gap: 0.35rem;
}

.formulario label {
  font-size: var(--t-apoio);
  font-weight: 600;
}

.formulario input[type="text"],
.formulario input[type="email"],
.formulario input[type="tel"],
.formulario input[type="number"],
.formulario select,
.formulario textarea {
  width: 100%;
  padding: 0.7rem 0.75rem;
  border: 1px solid var(--linha);
  background: var(--papel-alto);
  color: var(--tinta);
  font-family: inherit;
  font-size: var(--t-corpo);
}

.formulario textarea {
  resize: vertical;
}

.campo-curto {
  max-width: 10rem;
}

.campo-ajuda {
  font-size: var(--t-apoio);
  color: var(--tinta-fraca);
}

/* O honeypot. `display: none` seria mais simples, mas robô que interpreta CSS
   pula campo escondido assim; jogá-lo para fora da tela mantém o campo
   "visível" para o autômato, que é o que faz a armadilha funcionar. */
.campo-armadilha {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.campo-aceite label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6rem;
  align-items: start;
  font-weight: 400;
  line-height: 1.45;
}

.campo-aceite input {
  margin-top: 0.25rem;
  width: 1.1rem;
  height: 1.1rem;
}

.botao-grande {
  justify-self: start;
  padding: 0.9rem 1.75rem;
  font-size: var(--t-medio);
}

.erro-resumo:not(:empty) {
  padding: 0.9rem 1rem;
  border-left: 4px solid #b3261e;
  background: #fdecea;
  color: #7f1d1a;
}

.erro-resumo ul {
  margin: 0;
  padding-left: 1.1rem;
}

.erro-campo:not(:empty) {
  font-size: var(--t-apoio);
  font-weight: 600;
  color: #b3261e;
}

/* ---------- Confirmação e acompanhamento --------------------------------- */

.numero-pedido {
  margin: 1.5rem 0 0.5rem;
  font-family: var(--display);
  font-size: clamp(2rem, 7vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--azul);
}

.resumo {
  margin: 2rem 0;
  border-top: 1px solid var(--linha);
}

.resumo > div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.15rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--linha);
}

@media (min-width: 34rem) {
  .resumo > div {
    grid-template-columns: 10rem 1fr;
    gap: 1rem;
    align-items: baseline;
  }
}

.resumo dt {
  font-size: var(--t-rotulo);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}

.resumo dd {
  margin: 0;
}

.resumo-preco {
  font-family: var(--display);
  font-size: var(--t-medio);
  font-weight: 800;
  color: var(--acento-texto);
}

.status {
  padding: 1.25rem;
  border-left: 4px solid var(--acento);
  background: var(--papel-alto);
}

.status-valor {
  display: block;
  margin-top: 0.25rem;
  font-family: var(--display);
  font-size: var(--t-medio);
}

.status-ajuda {
  margin: 0.5rem 0 0;
  color: var(--tinta-fraca);
}

.linha-do-tempo {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0 0 0 1.25rem;
  border-left: 2px solid var(--linha);
}

.linha-do-tempo li {
  position: relative;
  padding: 0 0 1.25rem;
}

.linha-do-tempo li::before {
  content: "";
  position: absolute;
  left: calc(-1.25rem - 5px);
  top: 0.45rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--azul);
}

.linha-do-tempo-quando {
  display: block;
  font-size: var(--t-rotulo);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}

.linha-do-tempo-tipo {
  display: block;
  font-family: var(--display);
}

.linha-do-tempo-corpo {
  color: var(--tinta-fraca);

  /* Resposta ao cliente tem parágrafo; sem isto o span colapsa a quebra e dois parágrafos viram
     um bloco só, nas duas timelines. */
  white-space: pre-line;
}

.acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

/* ---------- Páginas de texto --------------------------------------------- */

.perguntas {
  margin-top: 2rem;
  border-top: 1px solid var(--linha);
}

.pergunta {
  padding: 1rem 0;
  border-bottom: 1px solid var(--linha);
}

.pergunta summary {
  font-family: var(--display);
  font-size: var(--t-medio);
  font-weight: 700;
  cursor: pointer;
}

.pergunta p {
  margin: 0.75rem 0 0;
  color: var(--tinta-fraca);
}

.lista {
  padding-left: 1.1rem;
  color: var(--tinta-fraca);
}

.lista li {
  margin-bottom: 0.5rem;
}

.destaque {
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--prata);
  background: var(--papel-alto);
  font-size: var(--t-apoio);
}

.contatos {
  display: grid;
  gap: 1.5rem;
  margin: 2rem 0;
}

@media (min-width: 34rem) {
  .contatos {
    grid-template-columns: repeat(2, 1fr);
  }
}

.contato {
  padding: 1.25rem;
  background: var(--papel-alto);
  border: 1px solid var(--linha);
}

.contato-valor {
  margin: 0.35rem 0 1rem;
  font-family: var(--display);
  font-size: var(--t-medio);
  font-weight: 700;
}

/* ---------- Rodapé: links ------------------------------------------------ */

.rodape-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
  margin: 1rem 0;
  font-size: var(--t-apoio);
}

/* =========================================================================
   ETAPA 04 — ADMIN

   Outro clima, de propósito: topo escuro fixo, densidade alta, tabela em vez
   de cartão. Quem está aqui está trabalhando, não sendo convencido — e a
   diferença visual evita a confusão de não saber em qual lado do site se
   está.
   ========================================================================= */

.admin {
  background: var(--papel-alto);
}

.admin-container {
  width: 100%;
  max-width: 82rem;
  margin-inline: auto;
  padding-inline: clamp(1rem, 3vw, 2rem);
}

.admin-conteudo {
  padding-block: 2rem 4rem;
}

/* ---------- Topo ---------------------------------------------------------- */

.admin-topo {
  background: var(--azul-fundo);
  color: var(--papel-alto);
  border-bottom: 3px solid var(--acento);
}

.admin-topo .admin-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  padding-block: 0.85rem;
}

.admin-marca {
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.admin-etiqueta {
  font-family: var(--texto);
  font-size: var(--t-rotulo);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--prata);
}

.admin-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.1rem;
  flex: 1 1 auto;
  font-size: var(--t-apoio);
}

.admin-menu a {
  padding: 0.35rem 0;
  color: var(--prata);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.admin-menu a:hover,
.admin-menu a[aria-current="page"] {
  color: var(--papel-alto);
  border-bottom-color: var(--acento);
}

.admin-usuario {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--t-apoio);
}

.admin-email {
  color: var(--prata);
}

.admin-link-site {
  color: var(--prata);
}

.admin-sair {
  margin: 0;
}

.admin-topo .botao-linha {
  border-color: rgb(255 255 255 / 35%);
  color: var(--papel-alto);
}

/* ---------- Cabeçalhos e seções ------------------------------------------ */

.admin-cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.admin-titulo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: clamp(1.5rem, 4vw, 2rem);
}

.admin-subtitulo {
  margin-bottom: 0.75rem;
  font-size: var(--t-medio);
}

.admin-secao {
  margin-top: 2.5rem;
}

.migalhas-admin {
  margin-bottom: 0.75rem;
  color: var(--tinta-fraca);
}

.migalhas-admin a {
  color: var(--tinta-fraca);
}

.admin-colunas {
  display: grid;
  gap: 2rem;
}

@media (min-width: 62rem) {
  .admin-colunas {
    grid-template-columns: minmax(0, 1fr) 22rem;
    align-items: start;
  }
}

.admin-coluna-lateral {
  position: sticky;
  top: 1rem;
}

/* ---------- Painel -------------------------------------------------------- */

.painel-numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 1px;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  background: var(--linha);
  border: 1px solid var(--linha);
}

.painel-numero {
  background: var(--papel-alto);
}

.painel-numero a {
  display: block;
  padding: 1rem;
  text-decoration: none;
}

.painel-numero a:hover {
  background: var(--papel);
}

.painel-valor {
  display: block;
  font-family: var(--display);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--azul);
}

/* Pedido novo é o único número que pede ação imediata. */
.painel-numero-atencao {
  background: #fff8ec;
}

.painel-numero-atencao .painel-valor {
  color: var(--acento-texto);
}

/* ---------- Tabelas ------------------------------------------------------- */

.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-apoio);
}

.tabela th,
.tabela td {
  padding: 0.6rem 0.75rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--linha);
}

.tabela thead th {
  font-family: var(--texto);
  font-size: var(--t-rotulo);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  border-bottom: 2px solid var(--linha);
  white-space: nowrap;
}

.tabela tbody tr:hover {
  background: var(--papel);
}

.tabela .numerica {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.tabela-apoio {
  display: block;
  font-size: var(--t-rotulo);
  color: var(--tinta-fraca);
}

/* Tabela larga rola dentro do próprio quadro; a PÁGINA nunca rola de lado. */
.tabela-rolagem {
  overflow-x: auto;
}

/* ---------- Etiquetas de status ------------------------------------------ */

.etiqueta {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  font-size: var(--t-rotulo);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--linha);
  white-space: nowrap;
}

.etiqueta-grande {
  padding: 0.35rem 0.75rem;
  font-size: var(--t-apoio);
}

/* Cor com significado: âmbar é o que espera por mim, verde é o que fechou,
   cinza é o que saiu da mesa. */
.etiqueta-new {
  border-color: var(--acento);
  background: #fff8ec;
  color: #7a4b00;
}

.etiqueta-quoted,
.etiqueta-reserved {
  border-color: #7a9cc6;
  background: #eff5fc;
  color: #1d3f66;
}

.etiqueta-confirmed,
.etiqueta-paid {
  border-color: #4a8f6d;
  background: #eefaf3;
  color: #14532d;
}

.etiqueta-delivered,
.etiqueta-sold {
  border-color: var(--linha);
  background: var(--papel);
  color: var(--tinta-fraca);
}

.etiqueta-cancelled {
  border-color: #d8b4b0;
  background: #fdecea;
  color: #7f1d1a;
}

.etiqueta-available {
  border-color: #4a8f6d;
  background: #eefaf3;
  color: #14532d;
}

.etiqueta-interna {
  border-color: var(--linha);
  background: var(--papel);
  color: var(--tinta-fraca);
  text-transform: none;
  letter-spacing: 0;
}

/* ---------- Avisos -------------------------------------------------------- */

.aviso {
  margin-bottom: 1.25rem;
  padding: 0.85rem 1rem;
  border-left: 4px solid var(--linha);
  background: var(--papel);
  font-size: var(--t-apoio);
}

.aviso-ok {
  border-left-color: #4a8f6d;
  background: #eefaf3;
}

.aviso-atencao {
  border-left-color: var(--acento);
  background: #fff8ec;
}

.aviso-erro {
  border-left-color: #b3261e;
  background: #fdecea;
  color: #7f1d1a;
}

/* ---------- Formulário do admin ------------------------------------------ */

.formulario-admin {
  max-width: 44rem;
}

.formulario-admin .campo {
  display: grid;
  gap: 0.35rem;
  margin-bottom: 1.1rem;
}

.formulario-admin label {
  font-size: var(--t-apoio);
  font-weight: 600;
}

.formulario-admin input,
.formulario-admin select,
.formulario-admin textarea {
  width: 100%;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--linha);
  background: var(--papel-alto);
  color: var(--tinta);
  font-family: inherit;
  font-size: var(--t-corpo);
}

.formulario-admin textarea {
  resize: vertical;
  font-size: var(--t-apoio);
}

.campo-aceite-linha {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 400;
}

.filtros-admin {
  align-items: end;
  margin-bottom: 1.5rem;
}

.botao-pequeno {
  padding: 0.35rem 0.75rem;
  font-size: var(--t-apoio);
}

.botao-perigo {
  border-color: #b3261e;
  color: #b3261e;
}

.botao-perigo:hover {
  background: #fdecea;
}

/* ---------- Ações do pedido ---------------------------------------------- */

.admin-acoes {
  margin-top: 0;
  padding: 1.25rem;
  border: 1px solid var(--linha);
  background: var(--papel);
}

.acao {
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--linha);
}

.acao:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.evento-falha .linha-do-tempo-tipo {
  color: #b3261e;
}

.evento-falha::before {
  background: #b3261e !important;
}

/* ---------- Grade de preços ---------------------------------------------- */

.tabela-precos th[scope="row"] {
  min-width: 10rem;
}

.celula-preco {
  min-width: 8.5rem;
}

.celula-campo {
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.25rem;
}

.celula-campo .rotulo {
  letter-spacing: 0.06em;
}

.celula-campo input {
  width: 100%;
  padding: 0.25rem 0.35rem;
  border: 1px solid var(--linha);
  font-family: inherit;
  font-size: var(--t-apoio);
  text-align: right;
}

.celula-final {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--display);
  font-weight: 800;
  text-align: right;
  color: var(--acento-texto);
}

/* ---------- Adversários --------------------------------------------------- */

.amostra-cor {
  display: inline-block;
  width: 0.85rem;
  height: 0.85rem;
  background: var(--cor, var(--prata));
  border: 1px solid rgb(0 0 0 / 15%);
}

.texto-completo {
  color: #14532d;
  font-weight: 600;
}

.texto-pendente {
  color: var(--tinta-fraca);
}

.promo-ativa {
  font-weight: 700;
  color: var(--acento-texto);
}

.promo-expirada {
  color: var(--tinta-fraca);
  text-decoration: line-through;
}

.previa {
  padding: 1.25rem;
  border: 1px solid var(--linha);
  background: var(--papel);
}

.previa h3 {
  margin-top: 1.25rem;
  font-size: var(--t-medio);
}

.previa h3:first-child {
  margin-top: 0;
}

/* =========================================================================
   MAPA DA ARENA — setor por setor (leva 29; o desenho de anéis era da etapa 05)

   O desenho é a Kia Center em relevo, cada setor pintado na cor da ÁREA de
   preço — as seis cores do PDF de turismo, que o cliente vê em todo material
   do Magic. A cor é fixa por área e não diz mais "mais caro": o Club custa
   mais que o Terrace B e fica mais longe da quadra, e uma rampa por preço
   desmentia o próprio desenho. Quem diz o preço é a escada, ao lado.

   O palco é escuro como a cena aprovada pelo Rod: as cores do PDF são claras
   e saturadas, e sobre o papel do site o Club e o Ultimate sumiriam.
   ========================================================================= */

:root {
  --palco-fundo: #0c1322;
  --palco-linha: #070b14;
  --palco-apagado: #1d2739;
  --palco-texto: #6f7d94;
}

.arena {
  display: grid;
  gap: 2rem;
  margin-top: 1.5rem;
}

/* Sem isto, o desenho de 640 px do celular alarga a coluna da grade e a
   PÁGINA passa a rolar de lado — foi o que a cena mostrou antes do ajuste. */
.arena > * {
  min-width: 0;
}

@media (min-width: 62rem) {
  .arena {
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem);
    align-items: start;
    gap: 2.5rem;
  }
}

/* A imagem do topo da /arena. Nunca maior que o contêiner: 1376 px é o
   limite de nitidez dela. */
/* A altura é limitada para o mapa — o motivo de a página existir — aparecer
   na primeira tela da janela larga. O recorte fica centrado um pouco abaixo
   do meio, onde estão a quadra e o jogo. */
.arena-destaque {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(55vh, 26rem);
  object-fit: cover;
  object-position: center 60%;
  margin: 1.5rem 0;
  border-radius: 2px;
}

/* ---------- O desenho ----------------------------------------------------- */

.arena-vistas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
}

.arena-vistas[hidden] {
  display: none;
}

.arena-vista-botao {
  padding: 0.4rem 0.9rem;
  background: var(--papel-alto);
  border: 1px solid var(--linha);
  border-radius: 999px;
  font-family: inherit;
  font-size: var(--t-apoio);
  font-weight: 600;
  color: var(--tinta);
  cursor: pointer;
}

.arena-vista-botao[aria-pressed="true"] {
  border-color: var(--acento);
  box-shadow: inset 0 0 0 1px var(--acento);
}

.arena-palco {
  padding: 0.75rem;
  background: radial-gradient(ellipse at 50% 45%, #16233a 0%, var(--palco-fundo) 60%, #0a0f1a 100%);
  border-radius: 2px;
}

.arena-svg {
  display: block;
  width: 100%;
  height: auto;
}

.arena-svg[hidden] {
  display: none;
}

/* No celular o mapa APARECE (antes ele sumia abaixo de 48rem): a moldura rola
   de lado e o desenho guarda 640 px, a menor largura em que os números do
   nível 200 ainda se leem. A página não rola — quem rola é a moldura. */
@media (max-width: 39.99rem) {
  .arena-palco {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
  }

  .arena-svg {
    min-width: 640px;
  }
}

/* Nada do assoalho nem dos textos intercepta ponteiro: quadra, linhas, números
   e fachadas são desenho, não controle. Sem isto o número por cima de um setor
   engoliria o toque de quem mirou nele. */
.arena-piso,
.arena-luz,
.arena-quadra,
.arena-garrafao,
.arena-linha,
.arena-cadeira,
.arena-banco,
.arena-fachada,
.arena-borda,
.arena-num,
.arena-trecho {
  pointer-events: none;
}

.arena-piso { fill: #141d2e; }
.arena-quadra { fill: #d3a46a; stroke: #f3e3c8; stroke-width: 1.6; }
.arena-garrafao { fill: #1f4f9a; opacity: 0.85; }
.arena-linha { fill: none; stroke: #f3e3c8; stroke-width: 1.3; }
.arena-cadeira { fill: #3a4558; }
.arena-banco { fill: #e8edf5; opacity: 0.7; }
.arena-fachada { fill: #0d1424; stroke: #1f2b42; stroke-width: 0.8; }
.arena-borda { fill: #0c1220; stroke: #1a2438; stroke-width: 0.8; }
.arena-tunel { fill: #2a3448; stroke: var(--palco-linha); stroke-width: 1; }
.arena-naovende { fill: var(--palco-apagado); stroke: var(--palco-linha); stroke-width: 1.2; }

/* Um setor: a superfície na cor da área (`--cor`, que o Razor escreve em cada
   grupo) e as linhas de fileira por cima. Setor de duas áreas são dois grupos
   com o mesmo `data-setor`. */
.arena-setor {
  cursor: pointer;
  transition: filter 150ms ease, opacity 200ms ease;
}

.arena-sup {
  fill: var(--cor, var(--palco-apagado));
  stroke: var(--palco-linha);
  stroke-width: 1.4;
  stroke-linejoin: round;
}

.arena-fileiras {
  fill: none;
  stroke: rgb(0 0 0 / 0.26);
  stroke-width: 0.9;
}

/* Área que este banco não tem (fixture de teste): cinza, sem clique. */
.arena-setor-sem-area {
  cursor: default;
}

.arena-setor-sem-area .arena-sup {
  fill: #2a3448;
}

.arena-setor:not(.arena-setor-sem-area):hover,
.arena-regiao-realce {
  filter: brightness(1.22) saturate(1.1);
}

/* Uma área aberta na escada acende os setores dela e apaga o resto. */
.arena-esmaecer .arena-setor:not(.arena-regiao-escolhida) {
  opacity: 0.25;
}

/* O setor tocado: contorno claro em todas as peças dele. */
.arena-setor-marcado .arena-sup {
  stroke: #ffffff;
  stroke-width: 2.6;
}

@media (prefers-reduced-motion: reduce) {
  .arena-setor {
    transition: none;
  }
}

.arena-num {
  fill: #ffffff;
  font-family: var(--display);
  font-size: 12.5px;
  font-weight: 600;
  text-anchor: middle;
  dominant-baseline: middle;
  paint-order: stroke;
  stroke: rgb(0 0 0 / 0.35);
  stroke-width: 2px;
}

.arena-num-lower {
  font-size: 15px;
}

.arena-num-middle {
  font-size: 12px;
}

/* Ultimate e Club são claros: o número vai escuro. */
.arena-num-escuro {
  fill: #0a0f1a;
  stroke: none;
}

.arena-trecho {
  fill: var(--palco-texto);
  font-family: var(--texto);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-anchor: middle;
  text-transform: uppercase;
  dominant-baseline: middle;
}

.arena-legenda-setor {
  margin: 0.75rem 0 0;
  font-size: var(--t-apoio);
  font-weight: 600;
  color: var(--tinta);
}

/* ---------- A escada de preço --------------------------------------------
   A ordem de preço, empilhada, com a cor da área na marca de cada degrau —
   a mesma do desenho — e cada degrau abre o que se precisa saber para
   escolher.
   ------------------------------------------------------------------------- */

.arena-escada-titulo {
  margin: 0 0 0.75rem;
}

.escada {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--linha);
}

.escada-degrau {
  border-bottom: 1px solid var(--linha);
}

/* `minmax(0, …)` no nome: com `1fr`, a grade do degrau do Ultimate pedia
   340 px numa caixa de 305 e vazava para fora da lista (bloco L da leva 29). */
.escada-botao {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  padding: 0.9rem 0;
  background: none;
  border: none;
  font-family: inherit;
  font-size: var(--t-corpo);
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.escada-botao:hover .escada-nome {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* O sinal de abrir/fechar. Com a escada nascendo fechada, ele é o que diz que cada
   linha tem mais coisa dentro. */
.arena-com-script .escada-botao::after {
  content: "+";
  font-family: var(--display);
  font-size: var(--t-medio);
  line-height: 1;
  color: var(--tinta-fraca);
}

.arena-com-script .escada-botao[aria-expanded="true"]::after {
  content: "–";
  color: var(--acento-texto);
}

.arena-com-script .escada-botao {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
}

/* A marca é a ponte com o desenho: a cor da área. A largura cresce com o
   preço, então a coluna de marcas continua sendo um gráfico da ordem. */
.escada-marca {
  width: calc(0.75rem + (5 - var(--nivel, 0)) * 0.5rem);
  height: 0.75rem;
  background: var(--cor, var(--prata));
}

/* No celular a faixa de preço desce para a segunda linha, embaixo do nome, e
   a marca fica mais curta: as três coisas lado a lado não cabem em 320 px. */
@media (max-width: 39.99rem) {
  .escada-botao,
  .arena-com-script .escada-botao {
    grid-template-columns: auto minmax(0, 1fr) auto;
    row-gap: 0.2rem;
  }

  .escada-preco {
    grid-column: 2 / 3;
    grid-row: 2;
  }

  .escada-marca {
    width: calc(0.5rem + (5 - var(--nivel, 0)) * 0.3rem);
  }
}

.escada-nome {
  font-family: var(--display);
  font-weight: 700;
}

.escada-preco {
  font-weight: 600;
  color: var(--acento-texto);
  white-space: nowrap;
}

.escada-degrau-realce {
  background: var(--papel-alto);
}

/* Sem JavaScript, todo detalhe fica visível — a página inteira continua
   utilizável. A classe abaixo só existe depois que o script roda. */
.arena-com-script .escada-detalhe {
  display: none;
}

.arena-com-script .escada-degrau-aberto .escada-detalhe {
  display: grid;
}

.escada-detalhe {
  display: grid;
  gap: 1rem;
  padding: 0 0 1.25rem;
}

/* A coluna da foto só existe quando há foto da área (ViewPhotoPath). */
@media (min-width: 34rem) {
  .escada-detalhe-com-foto {
    grid-template-columns: 12.5rem 1fr;
  }
}

.escada-visao img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--linha);
}

.escada-texto p {
  margin: 0 0 0.65rem;
  font-size: var(--t-apoio);
  color: var(--tinta-fraca);
}

.escada-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

/* ---------- Página /arena ------------------------------------------------- */

.arena-guia {
  display: grid;
  gap: 2rem;
  margin-top: 1rem;
}

@media (min-width: 48rem) {
  .arena-guia {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem 3rem;
  }
}

.arena-guia h3 {
  margin-bottom: 0.5rem;
  font-size: var(--t-medio);
}

.arena-guia p {
  margin: 0 0 0.75rem;
  color: var(--tinta-fraca);
}

.arena-endereco {
  display: grid;
  gap: 0.35rem;
  padding: 1.25rem;
  border-left: 4px solid var(--acento);
  background: var(--papel-alto);
}

.arena-endereco strong {
  font-family: var(--display);
  font-size: var(--t-medio);
}

/* =========================================================================
   ETAPA 06 — conteúdo, história e gerador de post
   ========================================================================= */

/* ---------- Índice de adversários ---------------------------------------- */

.divisao-titulo {
  margin: 1.75rem 0 0.5rem;
  font-family: var(--texto);
  font-size: var(--t-rotulo);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}

.times {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* A mesma anatomia da linha de jogo: faixa da cor do time à esquerda, nome, meta
   e um número à direita. Repetir a forma é o que faz o site parecer um site. */
.time {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.35rem 1.25rem;
  align-items: baseline;
  padding: 0.9rem clamp(0.875rem, 2vw, 1.25rem);
  border-bottom: 1px solid var(--linha);
  border-left: 4px solid var(--faixa, var(--prata));
  background: var(--papel-alto);
}

@media (min-width: 48rem) {
  .time {
    grid-template-columns: minmax(10rem, 1fr) 10rem minmax(8rem, auto) 8rem;
    align-items: center;
  }
}

.time-nome {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 0;
  font-family: var(--display);
  font-size: var(--t-medio);
  font-weight: 700;
  letter-spacing: -0.015em;
}

.time-nome a {
  text-decoration: none;
}

.time-nome a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.time-cidade {
  font-size: var(--t-apoio);
  color: var(--tinta-fraca);
}

.time-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 0.5rem;
  align-items: center;
}

.time-proximo {
  font-family: var(--display);
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

.time-proximo small {
  display: block;
  font-family: var(--texto);
  font-size: var(--t-rotulo);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}

/* ---------- Prosa ---------------------------------------------------------
   O texto longo do site: página de adversário, linha do tempo e os termos.
   Medida de linha curta e espaço entre parágrafos — é para ler, não para
   varrer.

   Os títulos existem porque o texto dos termos passou a vir inteiro de um
   markdown, título incluído: sem estas duas regras, os subtítulos sairiam do
   tamanho de um parágrafo e a página perderia a hierarquia que tinha.
   ------------------------------------------------------------------------- */

.prosa {
  max-width: 36rem;
}

.prosa h1 {
  margin: 0 0 0.75rem;
  font-size: var(--t-grande);
}

.prosa h2 {
  margin: 2rem 0 0.75rem;
  font-size: var(--t-medio);
}

.prosa h2:first-child {
  margin-top: 0;
}

.prosa p {
  margin: 0 0 1rem;
  line-height: 1.65;
}

.prosa p:last-child {
  margin-bottom: 0;
}

.prosa strong {
  font-weight: 600;
}

.prosa ul {
  padding-left: 1.1rem;
  line-height: 1.65;
}

.texto-secao {
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--linha);
}

.texto-secao:last-child {
  border-bottom: none;
}

/* ---------- Linha do tempo ------------------------------------------------ */

.tempo {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: marco;
}

.tempo-marco {
  display: grid;
  gap: 0.5rem;
  padding: 2rem 0;
  border-top: 1px solid var(--linha);
}

@media (min-width: 42rem) {
  .tempo-marco {
    grid-template-columns: 7.5rem 1fr;
    gap: 2rem;
  }
}

/* O ano é a âncora da página: quem rola a história procura por década, não por
   título. Daí o tamanho, e daí ele ficar na coluna da esquerda, alinhado. */
.tempo-ano {
  font-family: var(--display);
  font-size: clamp(2rem, 6vw, 2.75rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--acento-texto);
}

.tempo-titulo {
  margin: 0 0 0.75rem;
  font-size: var(--t-medio);
}

/* ---------- Gerador de post ----------------------------------------------- */

.cards {
  display: grid;
  gap: 2rem;
  margin: 1.5rem 0 0;
}

@media (min-width: 56rem) {
  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

/* A caixa de consulta do card mora AQUI, e não no `.card-tela`, e o motivo é medido:
   unidade de container não enxerga o próprio elemento — ela resolve no ancestral mais
   próximo, e sem nenhum cai no viewport. Declarada no `.card-tela`, o `padding: 9cqw`
   da própria regra escapava para o viewport enquanto os `cqw` dos filhos resolviam no
   content box daquela caixa: duas bases no mesmo desenho, e a prévia mudando de escala
   com a largura da janela. Aqui o `.card` não tem padding nem borda, então o content
   box dele É a largura do card — a mesma base que o `post.js` usa para tudo. É isto
   que faz a prévia ser a especificação do PNG. Devolver a declaração para o
   `.card-tela` faz `AEscalaDaPreviaNaoDependeDoViewport` ficar vermelho. */
.card {
  container-type: inline-size;
  margin: 0;
}

/* A prévia é uma redução fiel: as proporções são as do PNG (1080×1080 e
   1080×1920) e todo tamanho de texto está em `cqw`, para que encolher a caixa
   encolha o desenho inteiro junto — e não só a moldura. */
.card-tela {
  position: relative;
  padding: 9cqw;
  background: var(--azul);
  color: var(--papel-alto);
  border-top: 2.2cqw solid var(--faixa, var(--prata));
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.card-story .card-tela {
  aspect-ratio: 1080 / 1920;
}

.card-topo {
  display: grid;
  gap: 0.4cqw;
}

/* O mesmo bloqueio do cabeçalho, com a mesma leitura: `Rona` âmbar, `Magic` papel. Sem o
   símbolo, de propósito — o rodapé do card já o carrega junto do perfil, e a mesma bola duas
   vezes no mesmo quadrado de 1080 é ruído. O corpo declarado aqui é o de `Magic`. */
.card-marca {
  display: inline-flex;
  align-items: center;
  font-family: var(--display);
  font-size: 4.1cqw;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* 1,5×, a mesma constante do `.marca-rona` do cabeçalho, e pelo mesmo motivo medido. */
.card-marca-rona {
  font-family: "Caveat Brush", "Segoe Script", cursive;
  font-size: 1.5em;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--acento);
}

/* O âmbar é do `Rona`, e não do `Magic`: se o acento cair na metade descritiva, o olho lê
   `Magic` como o nome e a manuscrita vira enfeite pendurado. `Rona` é a metade que carrega a
   linhagem da Ronatrip. Não "harmonize" isto de volta. */
.card-marca-magic {
  color: var(--papel-alto);
}

.card-local {
  font-size: 2.4cqw;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--prata);
}

.card-times {
  display: grid;
  gap: 0.5cqw;
  margin-top: auto;
}

.card-casa,
.card-fora {
  font-family: var(--display);
  font-size: 8.9cqw;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.card-x {
  font-family: var(--display);
  font-size: 5.2cqw;
  font-weight: 800;
  color: var(--faixa, var(--prata));
}

.card-quando {
  display: grid;
  gap: 0.4cqw;
  margin-top: 3cqw;
}

.card-data {
  font-size: 3.7cqw;
  font-weight: 600;
}

.card-hora {
  font-size: 3.1cqw;
  color: var(--prata);
}

.card-preco {
  margin-top: auto;
  padding-top: 3cqw;
}

.card-preco-rotulo {
  display: block;
  font-size: 2.6cqw;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--prata);
}

.card-preco-valor {
  font-family: var(--display);
  font-size: 8.1cqw;
  font-weight: 800;
  color: var(--acento);
}

.card-rodape {
  display: flex;
  justify-content: space-between;
  margin-top: 3cqw;
  font-size: 2.8cqw;
  color: var(--prata);
}

/* O carimbo do perfil no rodapé do card: símbolo e arroba na mesma linha. A caixa de
   3,2cqw sai da MESMA proporção do cabeçalho — disco a ~0,75 do corpo do texto ao lado —
   e é o mesmo número que o `post.js` usa como `LARGURA * 0.032` para desenhar no canvas.
   Se um mudar sem o outro, a prévia e o PNG deixam de bater. */
.card-perfil {
  display: inline-flex;
  align-items: center;
  gap: 0.6cqw;
}

.card-simbolo {
  flex: none;
  width: 3.2cqw;
  height: 3.2cqw;
}

.card-legenda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.75rem;
  font-size: var(--t-rotulo);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}

.legenda {
  margin-bottom: 1.5rem;
  border: 1px solid var(--linha);
  background: var(--papel-alto);
}

.legenda-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--linha);
}

.legenda-topo h3 {
  margin: 0;
  font-size: var(--t-corpo);
}

.legenda-texto {
  margin: 0;
  padding: 1rem;
  font-family: var(--texto);
  font-size: var(--t-apoio);
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}