/* =========================================================
   KYVENZA — Design tokens v2 (refinamento visual)
   Mesma marca (verde Kyvenza + tipografia atual), aplicada com
   mais disciplina: fundo em camadas, brilho reservado pra poucos
   momentos, uma cor de destaque principal em vez de duas competindo.
   ========================================================= */

:root {
  /* Fundo em camadas — em vez de preto puro + cards translúcidos,
     cada nível tem seu próprio tom sólido. Mais fácil de ler, sensação
     de profundidade sem depender de blur/opacidade em tudo. */
  --bg: #0a0a0a;
  --surface: #131313;
  --surface-2: #1a1a1a;

  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);

  --text: #f2f1ed;
  --text-muted: #8b9284;

  /* Uma cor de destaque principal (a mesma do seu logo/marca).
     O ciano continua existindo, mas vira exceção — só pra "info"
     pontual, não decoração espalhada pela tela. */
  --accent: #76ff03;
  --accent-ink: #0a0a0a; /* texto em cima do accent */
  --info: #00daf3;

  --danger: #ff5c5c;
}

@keyframes pulse-glow {
  0%, 100% { opacity: 0.55; filter: blur(6px); }
  50% { opacity: 1; filter: blur(10px); }
}
/* Reservado só pra momentos de "IA trabalhando" — não usar em outro lugar */
.ai-pulse { animation: pulse-glow 2.4s infinite ease-in-out; }

@keyframes subir-suave {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.entrada-suave { animation: subir-suave 0.35s ease-out both; }
@media (prefers-reduced-motion: reduce) {
  .entrada-suave, .ai-pulse { animation: none; }
}

body {
  background-color: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  font-family: 'Geist', sans-serif;
}
.font-display { font-family: 'Space Grotesk', sans-serif; }
.font-mono { font-family: 'JetBrains Mono', monospace; letter-spacing: 0.04em; }

/* Card padrão — sólido, com borda fina neutra e sombra suave pra dar
   profundidade sem depender de cor. É o "chão" visual que sustenta o
   conteúdo. */
.glass-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.24), 0 4px 12px rgba(0, 0, 0, 0.16);
}

/* Barra de progresso — usada pra mostrar "X de Y concluídos hoje" */
.progresso-trilho {
  height: 6px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
}
.progresso-preenchido {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Ícone circular reutilizável (play, check) — consistente entre aparelhos,
   ao contrário de caracteres unicode (▶ ✓) que renderizam diferente
   dependendo da fonte do sistema. */
.icone-circular {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.icone-circular:active { transform: scale(0.92); }

@keyframes check-pop {
  0% { transform: scale(0.7); opacity: 0; }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}
.check-animado { animation: check-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }

/* Card em destaque — usar só quando o conteúdo realmente pede atenção
   prioritária (ex: treino ativo do dia). Não usar em toda lista. */
.card-destaque {
  background: var(--surface);
  border: 1px solid rgba(118, 255, 3, 0.25);
  border-radius: 14px;
  position: relative;
}
.card-destaque::before {
  content: '';
  position: absolute;
  top: -1px; left: 16px; right: 16px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.6;
}

/* Bordas neon — sem box-shadow de brilho por padrão. Reservar o glow
   (.neon-glow) só pro elemento MAIS importante da tela, nunca em série. */
.neon-border-green { border: 1px solid rgba(118, 255, 3, 0.35); }
.neon-border-cyan { border: 1px solid rgba(0, 218, 243, 0.3); }
.neon-glow { box-shadow: 0 0 20px rgba(118, 255, 3, 0.15); }

.neon-text-cyan { color: var(--info); }

/* CTA principal — sólido, direto. O gradiente fica reservado só pro
   .gradient-cta-hero (o ÚNICO botão de maior hierarquia da tela). */
.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}
.gradient-cta-hero {
  background: linear-gradient(90deg, #76ff03 0%, #00e5ff 100%);
  color: #000;
}
/* Mantido por compatibilidade com telas atuais — mas o objetivo é migrar
   os usos de botão comum pra .btn-primary e reservar este pro hero. */
.gradient-cta {
  background: linear-gradient(90deg, #76ff03 0%, #00e5ff 100%);
  color: #000;
}

.gradient-text {
  background: linear-gradient(90deg, #76ff03 0%, #00e5ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Label mono uppercase — usar com moderação (eyebrow de seção, tag de
   status), não em toda linha de texto secundário. */
.label-mono {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.spinner {
  width: 18px; height: 18px;
  border: 2px solid rgba(0,0,0,0.3);
  border-top-color: #000;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

.video-em-breve {
  display: flex; align-items: center; justify-content: center;
  height: 100%; width: 100%;
  background: var(--surface-2);
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}