/* Caju Cup — tokens e peças comuns (Valoare, 15/10/2026).
 * Paleta extraída por quantização das 5 artes do post de lançamento do @cajucup (14/10/2026) e da logo:
 *   preto #0C0C0C (64% do feed) · grafite #242424 (11,8%) · branco #FCFCFC (7,8%)
 *   vermelho-arara #C8170D (7,8% da logo) · laranja-caju #E88D0F (2,1% do feed, a cor de destaque do texto)
 *   ferrugem #B65014 · amarelo #E9C42C · ciano #0FC0E0 · azul #0E61D3 (as penas da arara)
 * Regras de contraste (WCAG, sobre preto #0C0C0C):
 *   laranja #E88D0F como texto: 7,7:1 → livre.  Botão laranja leva texto PRETO (7,7:1), nunca branco (2,5:1).
 *   vermelho #C8170D como texto: 3,3:1 → só título grande/ícone. Botão vermelho com texto branco: 5,7:1 → ok.
 *   ciano #0FC0E0: 9,0:1 → bom para dado ao vivo / link.  Azul #0E61D3 como texto: 3,4:1 → só grande.
 * Tipografia: Anton (o título condensado e pesado das artes) + Montserrat (o corpo das artes, com negrito de destaque).
 * Tratamentos: telas do atleta/torcedor com textura de pincelada e movimento; telas de gestão densas, movimento só funcional.
 */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,700&display=swap');

:root {
  --preto: #0C0C0C;
  --grafite: #242424;
  --grafite-2: #1A1A1A;
  --linha: #333333;
  --cinza: #9A9A9A;      /* texto secundário sobre preto: 7,0:1 */
  --branco: #FCFCFC;
  --caju: #E88D0F;       /* laranja-caju, destaque principal */
  --caju-claro: #F5A83A;
  --arara: #C8170D;      /* vermelho da arara */
  --arara-vivo: #E8261A;
  --ferrugem: #B65014;
  --sol: #E9C42C;
  --ciano: #0FC0E0;
  --azul: #0E61D3;
  --ok: #3FBF6B;
  --alerta: #E9C42C;
  --erro: #E8261A;

  --fonte-titulo: 'Anton', Impact, 'Arial Narrow', sans-serif;
  --fonte: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --raio: 14px;
  --raio-p: 8px;
  --sombra: 0 10px 30px rgba(0,0,0,.45);
  --gradiente-fogo: linear-gradient(100deg, var(--arara) 0%, var(--ferrugem) 35%, var(--caju) 70%, var(--sol) 100%);
  --gradiente-pena: linear-gradient(100deg, var(--azul), var(--ciano));
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--preto); color: var(--branco);
  font-family: var(--fonte); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--caju); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--ciano); outline-offset: 2px; border-radius: 4px; }

.titulo, h1, h2, h3 { font-family: var(--fonte-titulo); font-weight: 400; letter-spacing: .01em; line-height: .95; text-transform: uppercase; margin: 0; }
.destaque { color: var(--caju); }
.selo { /* a faixa branca com texto preto das artes ("CAJU CUP?") */
  display: inline-block; background: var(--branco); color: var(--preto);
  font-family: var(--fonte-titulo); text-transform: uppercase; padding: .08em .3em .02em; line-height: 1;
}
.pincelada { /* as pinceladas laranja/vermelho/azul dos cantos das artes */
  position: relative; isolation: isolate;
}
.pincelada::before {
  content: ''; position: absolute; inset: auto -10% -6% auto; width: 60%; height: 22%; z-index: -1;
  background: var(--gradiente-fogo); transform: rotate(-24deg); filter: blur(.5px);
  mask-image: repeating-linear-gradient(90deg, #000 0 14px, transparent 14px 18px, #000 18px 40px, transparent 40px 43px);
  opacity: .9;
}

/* botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 48px; padding: 0 1.3em;
  border-radius: 999px; border: 0; cursor: pointer; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: .9rem; text-decoration: none; }
.btn-caju { background: var(--caju); color: var(--preto); }           /* texto preto: 7,7:1 */
.btn-caju:hover { background: var(--caju-claro); }
.btn-arara { background: var(--arara); color: var(--branco); }         /* 5,7:1 */
.btn-fantasma { background: transparent; color: var(--branco); box-shadow: inset 0 0 0 2px var(--linha); }
.btn-fantasma:hover { box-shadow: inset 0 0 0 2px var(--caju); }

/* cartões e superfícies */
.cartao { background: var(--grafite-2); border: 1px solid var(--linha); border-radius: var(--raio); }
.pilula { display: inline-flex; align-items: center; gap: .4em; padding: .3em .8em; border-radius: 999px; background: var(--grafite); font-size: .78rem; font-weight: 700; }
.ao-vivo { color: var(--preto); background: var(--arara-vivo); }
.ao-vivo::before { content: ''; width: .5em; height: .5em; border-radius: 50%; background: currentColor; animation: pulsa 1.2s infinite; }
@keyframes pulsa { 50% { opacity: .25; } }

/* tabelas de gestão */
.tabela { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabela th { text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--cinza); font-weight: 700; padding: .6em .5em; border-bottom: 1px solid var(--linha); }
.tabela td { padding: .6em .5em; border-bottom: 1px solid #1f1f1f; }
.num { font-variant-numeric: tabular-nums; text-align: right; }

/* aviso de protótipo (toda página tem) */
.aviso-proto { font-size: .72rem; color: var(--cinza); text-align: center; padding: 1.5em 1em 2em; }
.aviso-proto b { color: var(--branco); }

/* ritmo de entrada em cascata (usar com IntersectionObserver ou animation-delay) */
.surge { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.surge.on { opacity: 1; transform: none; }
.no-js .surge, .sem-js .surge { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .surge { opacity: 1; transform: none; }
}