/* Caju Cup — design system (Valoare). Reformulado em 15/10/2026 a partir do LOGO OFICIAL que o Deco mandou
 * (levantamento/oficial/logo-oficial.jpeg, 1254 px): arara + caju + bola, cores chapadas, contorno preto grosso, fundo preto.
 * A versão anterior (14/10) saía das artes do post de lançamento, com respingos e pinceladas; o logo oficial não tem textura,
 * então a linguagem passou de "pincelada" para "lâmina": a pena da arara, chapada, afinando até a ponta, com contorno preto.
 *
 * Paleta medida no logo oficial (amostras nas áreas chapadas; participação sobre a imagem inteira):
 *   preto #000000 (73,6%, fundo do logo) → interface #0A0A0A
 *   vermelho-arara #EA0318 (pena) e #FD371D (corpo) · laranja #FE7909 (caju) · amarelo #FEB80E e #FDD230 (aro e topo)
 *   azul #0061B8 → #049DD5 → ciano #01D1F5 (as penas azuis, em degradê) · castanha #A06B3F · creme #FAF9F4 (rosto) / #FBF3E6 (bola)
 * Regras de contraste (WCAG, sobre #0A0A0A):
 *   laranja #FE7909 como texto 7,5:1 → livre. Botão laranja leva texto PRETO (7,5:1), nunca branco (2,5:1).
 *   amarelo #FEB80E 11,4:1 → dado, número, destaque. Botão amarelo com texto preto.
 *   vermelho de botão #D40216 com texto creme 5,2:1. Como texto sobre preto (3,6:1) só título grande ou ícone.
 *   "ao vivo" #FD371D com texto PRETO (5,4:1).  ciano #01D1F5 10,8:1 → dado ao vivo / link.
 *   azul #0061B8 só como fundo (creme por cima 5,9:1), nunca como texto sobre preto (3,2:1).  castanha só decorativa (4,4:1).
 * Logo: assets LOGO = levantamento/oficial/logo-transparente.png (o preto do logo virou transparência).
 *   Só sobre fundo escuro (preto/grafite): o contorno preto passa a ser o próprio fundo. Sobre cor, o olho e a bola somem —
 *   em fundo colorido usar o logo dentro do selo preto (.selo-logo).
 * Tipografia: Anton (títulos condensados das artes) + Montserrat (texto). O logo não tem letra; o par fica.
 * Tratamentos: telas do atleta/torcedor com lâminas 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&family=Saira:ital,wdth,wght@1,125,900&display=swap');

:root {
  --preto: #0A0A0A;
  --grafite: #242424;
  --grafite-2: #161616;
  --linha: #333333;
  --cinza: #A3A3A3;      /* texto secundário sobre preto: 7,9:1 */
  --branco: #FAF9F4;     /* o creme do rosto da arara */
  --creme-bola: #FBF3E6;
  --caju: #FE7909;       /* laranja do caju, destaque principal */
  --caju-claro: #FF9A3D;
  --arara: #D40216;      /* vermelho de botão (texto creme 5,2:1) */
  --arara-pena: #EA0318; /* o vermelho da pena, para lâmina e ícone */
  --arara-vivo: #FD371D; /* "ao vivo", com texto preto */
  --ferrugem: #FD5413;
  --sol: #FEB80E;
  --sol-claro: #FDD230;
  --ciano: #01D1F5;
  --azul-medio: #049DD5;
  --azul: #0061B8;
  --castanha: #A06B3F;
  --ok: #3FBF6B;
  --alerta: #FEB80E;
  --erro: #FD371D;

  --fonte-titulo: 'Anton', Impact, 'Arial Narrow', sans-serif;
  /* a Anton "da arte": o título "O JOGO VAI COMEÇAR" do 1º post é uma condensada mais larga e mais grossa que a Anton.
     Engrossa só na horizontal (cópias da letra deslocadas para os lados), o que mantém os miolos abertos como na arte;
     o espaço entre letras compensa a largura ganha. Calibrado lado a lado com a arte em 15/10/2026. */
  --anton-p: max(0px, calc(.03em - .9px));   /* some em letra pequena: miolo de "6", "8" e "9" não fecha */
  --anton: var(--anton-p) 0 currentColor, calc(var(--anton-p) * -1) 0 currentColor, calc(var(--anton-p) * .5) 0 currentColor, calc(var(--anton-p) * -.5) 0 currentColor;
  --anton-espaco: .045em;
  /* --ts é herdado como texto ("var(--anton)") e não como medida: cada elemento recalcula o .026em no próprio
     tamanho de letra. Assim um "de 11" pequeno dentro de um título grande não herda a sombra do título e não borra. */
  --fonte: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --raio: 14px;
  --raio-p: 8px;
  --contorno: 3px;       /* o contorno preto grosso do logo, em peças coloridas */
  --sombra: 0 10px 30px rgba(0,0,0,.45);
  /* o degradê do aro do caju (amarelo → laranja → vermelho) e o das penas azuis */
  --gradiente-fogo: linear-gradient(100deg, var(--sol-claro) 0%, var(--sol) 22%, var(--caju) 52%, var(--arara-vivo) 80%, var(--arara-pena) 100%);
  --gradiente-pena: linear-gradient(100deg, var(--azul) 0%, var(--azul-medio) 55%, var(--ciano) 100%);
  /* a pena: lâmina que afina até a ponta à esquerda e tem a base cortada em diagonal à direita */
  --lamina: polygon(0 58%, 14% 34%, 40% 12%, 100% 0, 92% 100%, 40% 88%, 12% 74%);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; text-shadow: var(--ts, none); }
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: var(--anton-espaco); line-height: .95; text-transform: uppercase; margin: 0; --ts: var(--anton); }
.destaque { color: var(--caju); }
.selo { /* a faixa branca com texto preto das artes de lançamento ("CAJU CUP?") */
  display: inline-block; background: var(--branco); color: var(--preto);
  font-family: var(--fonte-titulo); --ts: var(--anton); letter-spacing: var(--anton-espaco); text-transform: uppercase; padding: .08em .3em .02em; line-height: 1;
}
.selo-logo { /* logo sobre fundo colorido: dentro de uma placa preta redonda */
  display: inline-grid; place-items: center; background: #000; border-radius: 50%; padding: 12%; box-shadow: 0 0 0 var(--contorno) #000;
}
.lamina { /* peça decorativa: a pena do logo, chapada */
  clip-path: var(--lamina); background: var(--gradiente-fogo);
}
.lamina.pena { background: var(--gradiente-pena); }
.pincelada { /* (nome mantido por compatibilidade) duas penas saindo do canto, como no logo */
  position: relative; isolation: isolate;
}
.pincelada::before, .pincelada::after {
  content: ''; position: absolute; z-index: -1; clip-path: var(--lamina); pointer-events: none;
}
.pincelada::before { inset: auto -8% -4% auto; width: 58%; height: 16%; background: var(--gradiente-fogo); transform: rotate(-24deg); }
.pincelada::after { inset: auto -2% 10% auto; width: 40%; height: 9%; background: var(--gradiente-pena); transform: rotate(-24deg); }

/* assinatura "CAJU / CUP" (levantamento/oficial/assinatura-ref.jpeg, 15/10/2026): CAJU larga, pesada e inclinada em creme;
   CUP menor, em degradê laranja, entre dois fios que somem para fora. Fonte: Saira 125% Black Italic, a mais próxima
   da assinatura entre as gratuitas (comparada com Exo 2, Kanit, Russo One, Racing Sans, Chakra Petch e outras).
   Uso: <a class="assinatura-caju"><span class="caju">Caju</span><span class="cup"><span class="cup-t">Cup</span></span></a>; o tamanho vem do font-size. */
.assinatura-caju { display: inline-grid; justify-items: center; font-family: 'Saira', var(--fonte-titulo); font-style: italic; font-weight: 900;
  font-stretch: 125%; text-transform: uppercase; line-height: .82; color: var(--branco); text-decoration: none; --ts: none; letter-spacing: .01em; }
.assinatura-caju .caju { font-size: 1em; padding-right: .06em; }
.assinatura-caju .cup { display: flex; align-items: center; gap: .3em; font-size: .62em; margin-top: .14em; }
.assinatura-caju .cup-t { font: inherit; letter-spacing: inherit; text-transform: inherit; --ts: none; background: linear-gradient(180deg, #FF9A1F 0%, var(--caju) 45%, var(--ferrugem) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .08em; }
.assinatura-caju .cup::before, .assinatura-caju .cup::after { content: ''; height: max(1px, .07em); width: 1.5em; border-radius: 1px; }
.assinatura-caju .cup::before { background: linear-gradient(90deg, transparent, var(--caju)); }
.assinatura-caju .cup::after { background: linear-gradient(90deg, var(--caju), transparent); }

/* 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,5:1 */
.btn-sol { background: var(--sol); color: var(--preto); }             /* 11,4:1 */
.btn-caju:hover { background: var(--caju-claro); }
.btn-arara { background: var(--arara); color: var(--branco); }         /* 5,2: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 #1d1d1d; }
.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; }
}