/* ============================================================================
   PLAYWEBAI Pre-Site · TOKENS MÍNIMO
   ----------------------------------------------------------------------------
   v2.0 · 2026-05-21 · refatorado após feedback Enzo:
   "quando você cria um template é para usar a tipografia dele e não dos
    exemplos de copywright que te envia. Era só pra pegar o texto."

   REGRA: este arquivo NÃO sobrescreve tipografia, paleta principal ou classes
   visuais do template canonical (`pw-tokens.css` + `pw-components.css`).
   Aqui ficam APENAS:
   - Tokens semânticos pro pre-site (categorias dos 9 serviços)
   - Classes utilitárias que NÃO mudam identidade visual
   - Overrides legítimos (responsivos, a11y)

   Tipografia/paleta/mood = template canonical (JetBrains Mono Variable + Inter
   + Lato Thin wordmark · dark-first cyan accent neon).
   ============================================================================ */

:root {
  /* Categorias dos 9 serviços PlayCenter · usam cores do template + variantes da paleta editorial Anthropic já disponível em pw-tokens.css */
  --svc-aiteam: var(--accent-cyan);        /* AITeam = atendimento foco */
  --svc-branding: var(--acc-fig);           /* editorial · fig pink */
  --svc-center: var(--accent-cyan);          /* CEnter · cyan */
  --svc-consultoria: var(--brand-pc-blue);   /* corporate */
  --svc-copywriting: var(--code-purple);     /* purple criativo */
  --svc-apps: var(--accent-cyan-dim);        /* apps · tech */
  --svc-ecommerce: var(--acc-cactus);        /* ecommerce · cactus */
  --svc-playcenter: var(--brand-pc-blue);   /* sistema · pc-blue */
  --svc-trafego: var(--acc-kraft);           /* trafego · kraft warm */

}

/* ============ CLASSES SEMÂNTICAS DO PRE-SITE ============ */
/* Mantém visual do template · só agrupa elementos do pre-site                */

/* Card de serviço · herda visualmente de .card do template, só adiciona
   accent por categoria pra borda quando hover */
.svc-card {
  display: block;
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  text-decoration: none; color: inherit;
  transition: all var(--dur-base) var(--ease-out);
  position: relative;
}
.svc-card:hover {
  transform: translateY(-2px);
  text-decoration: none; color: inherit;
  border-color: var(--svc-accent, var(--accent-cyan-dim));
}
.svc-card.svc-card--aiteam       { --svc-accent: var(--svc-aiteam); }
.svc-card.svc-card--branding     { --svc-accent: var(--svc-branding); }
.svc-card.svc-card--center       { --svc-accent: var(--svc-center); }
.svc-card.svc-card--consultoria  { --svc-accent: var(--svc-consultoria); }
.svc-card.svc-card--copywriting  { --svc-accent: var(--svc-copywriting); }
.svc-card.svc-card--apps         { --svc-accent: var(--svc-apps); }
.svc-card.svc-card--ecommerce    { --svc-accent: var(--svc-ecommerce); }
.svc-card.svc-card--playcenter   { --svc-accent: var(--svc-playcenter); }
.svc-card.svc-card--trafego      { --svc-accent: var(--svc-trafego); }

/* Ícone da categoria — usa fonte mono do template (NÃO Orbitron) */
.svc-card-icon {
  width: 48px; height: 48px;
  border-radius: var(--radius-md);
  display: grid; place-items: center;
  font-family: var(--font-display);     /* JetBrains Mono do template */
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--svc-accent, var(--accent-cyan));
  background: var(--surface-1);
  border: 1px solid var(--border);
}

/* Hero de serviço · só padding e overflow, sem gradient maluco */
.svc-hero {
  padding: var(--space-24) 0 var(--space-16);
  position: relative;
  overflow: hidden;
}
.svc-hero .mesh-bg { z-index: -1; }    /* reusa .mesh-bg do template */

/* Pricing display · usa fonte do template */
.svc-price-big {
  font-family: var(--font-display);     /* JetBrains Mono template */
  font-size: clamp(var(--text-4xl), 8vw, var(--text-6xl));
  font-weight: 700;
  color: var(--text);
  letter-spacing: var(--tracking-mono-tight);
  line-height: 1;
}
.svc-price-big strong { color: var(--accent-cyan); }
.svc-price-from {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono-loose);
  font-weight: 500;
  margin-bottom: var(--space-2);
  display: block;
}

/* KPI grid · utility */
.svc-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
}
.svc-kpi {
  padding: var(--space-3) var(--space-4);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: flex; align-items: center; gap: var(--space-3);
}
.svc-kpi-icon {
  font-size: var(--text-xl);
  flex-shrink: 0;
  font-family: var(--font-mono);
  color: var(--svc-accent, var(--accent-cyan));
  width: 32px; height: 32px;
  display: grid; place-items: center;
}
.svc-kpi-label { font-size: var(--text-sm); color: var(--text-soft); }
.svc-kpi-value { font-family: var(--font-mono); font-weight: 600; color: var(--success); }

/* Pain card · semantic red (já existe similar no template) */
.pain-card {
  padding: var(--space-6);
  border: 1px solid rgba(243,18,96,0.25);   /* var(--danger) com alpha */
  background: rgba(243,18,96,0.04);
  border-radius: var(--radius-md);
  text-align: center;
}
.pain-icon { font-family: var(--font-mono); font-size: var(--text-2xl); color: var(--danger); margin-bottom: var(--space-3); display: block; }
.pain-title { font-weight: 600; color: var(--text); margin-bottom: var(--space-2); }
.pain-desc { font-size: var(--text-sm); color: var(--text-muted); }

/* Stage badge · utility pra documento de produção */
.stage-badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 3px var(--space-3);
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
}
.stage-badge--done { background: rgba(62,207,142,0.12); color: var(--success); border: 1px solid var(--success); }
.stage-badge--progress { background: rgba(0,229,255,0.12); color: var(--accent-cyan); border: 1px solid var(--accent-cyan); }
.stage-badge--pending { background: var(--surface-1); color: var(--text-muted); border: 1px solid var(--border-strong); }

/* Funcionário AI card · reusa visual do .card template, só adiciona barra de progresso */
.ai-employee-card {
  background: var(--surface-0);
  padding: var(--space-6);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  transition: all var(--dur-base) var(--ease-out);
}
.ai-employee-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent-cyan-dim);
}
.ai-employee-rating {
  display: flex; align-items: center; gap: 4px;
  color: var(--success);
  font-family: var(--font-mono);
  font-weight: 600;
}
.ai-employee-progress {
  height: 4px;
  background: var(--surface-2);
  border-radius: 2px;
  overflow: hidden;
  margin-top: var(--space-2);
}
.ai-employee-progress-fill {
  height: 100%;
  background: var(--accent-cyan);
  transition: width 1s var(--ease-out);
}

/* ============ ALIASES DE COMPATIBILIDADE ============ */
/* Classes que sub-agents podem ter usado durante a v1.0 errônea do
   ps-tokens.css (Orbitron + paleta SiteFront). Mapeadas pra tokens canônicos
   do template canonical pra não quebrar visualmente. */

.h-condensed, .h-heading {
  font-family: var(--font-display);              /* JetBrains Mono do template */
  font-weight: 700;
  letter-spacing: var(--tracking-mono-tight);
  text-transform: none;
}

.title-glow, .title-glow-cyan, .title-glow-lime {
  /* sem text-shadow agressivo · alinha com mood do template */
  color: var(--text);
}
.title-glow-cyan { color: var(--accent-cyan); }

.pulsating-border, .pulsating-line, .pulsating-line-cyan {
  /* sem animação heavy · usa glow sutil do template */
  box-shadow: var(--shadow-glow);
}
.pulsating-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
  box-shadow: none;
}

.cta-gradient-purple, .cta-gradient-cyan, .cta-gradient-purple-blue {
  /* alias pra .btn-primary do template */
  background: var(--accent-cyan);
  color: #001318;
  border-color: var(--accent-cyan);
  font-weight: 600;
}
.cta-gradient-purple:hover, .cta-gradient-cyan:hover, .cta-gradient-purple-blue:hover {
  box-shadow: var(--shadow-glow);
}

.sale-tag {
  /* sale tag mais sóbria · alinha com mood mono do template */
  position: absolute;
  top: var(--space-4); right: var(--space-4);
  background: var(--surface-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--accent-cyan);
  font-family: var(--font-mono);
  text-align: center;
}
.sale-tag-value { font-size: var(--text-2xl); color: var(--accent-cyan); font-weight: 700; line-height: 1; }
.sale-tag-label { font-size: 11px; color: var(--text-muted); margin-top: 4px; letter-spacing: 0.05em; text-transform: uppercase; }

.subtle-grid {
  /* utility já útil · mantida */
  background-image:
    linear-gradient(rgba(122,130,148,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(122,130,148,0.06) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* ============ BRAND TAG (Interactive · Studio) ============ */
/* Cravado por Enzo 2026-05-22 · brand wordmark com sub-tag */
.pc-brand-tag {
  display: block;
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 0.18em;
  color: var(--code-purple);
  text-transform: uppercase;
  margin-top: -2px;
  font-weight: 500;
}