/* ============================================================================
 * Gestão Matriz — Azoth Systems
 * brand.css — camada de apresentação compartilhada por TODAS as páginas.
 *
 * Antes: cada HTML repetia seu próprio bloco <style> (~187 tokens/classes
 * duplicados entre index, precos, plataforma e as vitrines de componente).
 * Agora: fonte única de verdade. Alterar aqui muda as 5 páginas.
 *
 * Contrato de uso numa página:
 *   <link rel="preconnect" href="https://fonts.googleapis.com" />
 *   <link href="...DM+Serif+Display...Outfit...JetBrains+Mono..." rel="stylesheet" />
 *   <script src="https://cdn.tailwindcss.com"></script>
 *   <script src="./assets/brand-config.js"></script>
 *   <link rel="stylesheet" href="./assets/brand.css" />
 *   <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
 *   <script defer src="./assets/site.js"></script>
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * 1. Tokens de design — espelham brand-config.js para uso em CSS puro
 * ------------------------------------------------------------------------- */
:root {
  --gm-ink:        #14171e;
  --gm-ink-soft:   #3a4256;
  --gm-ink-mute:   #65635b;   /* AA-compliant para texto pequeno */
  --gm-cream:      #f7f5f0;
  --gm-cream-deep: #ece6d8;
  --gm-cream-edge: #e9e3d6;
  --gm-forest:     #2f6f5e;
  --gm-forest-deep:#1f4a3f;
  --gm-forest-soft:#e8efeb;
  --gm-copper:     #c97b3f;
  --gm-copper-deep:#9c5e2d;
  --gm-copper-soft:#f6e9da;
  --gm-rosewood:   #b06367;

  /* Bordas hairline: .07 para divisórias internas, .10 para contornos externos
     de card — em monitores corporativos de gama baixa o .07 some. */
  --gm-hairline-internal:  rgba(20, 23, 30, .07);
  --gm-hairline-external:  rgba(20, 23, 30, .10);
}

/* ---------------------------------------------------------------------------
 * 2. Base
 * ------------------------------------------------------------------------- */
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Outfit', ui-sans-serif, system-ui, sans-serif;
  background: var(--gm-cream);
  color: var(--gm-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.font-serif { font-family: 'DM Serif Display', ui-serif, Georgia, serif; font-weight: 400; letter-spacing: -.005em; }
.font-mono  { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace; }

/* Números tabulares — evita jitter em KPIs, preços e tabelas. */
.ticker-num, .big-num, .num { font-variant-numeric: tabular-nums; }
.big-num { line-height: 1; }

/* Âncora de seção não fica atrás da nav fixa. */
section[id] { scroll-margin-top: 90px; }

[x-cloak] { display: none !important; }

/* ---------------------------------------------------------------------------
 * 3. Superfícies
 * ------------------------------------------------------------------------- */
/* Canvas ambiente: cream quente com gradientes radiais muito sutis. */
.bg-canvas {
  background:
    radial-gradient(800px 500px at 90% -10%, rgba(201, 123, 63, .06), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, rgba(47, 111, 94, .06), transparent 60%),
    var(--gm-cream);
}

/* Grid pontilhado sutil — usado atrás do mockup do cockpit no hero. */
.dot-grid {
  background-image: radial-gradient(circle, rgba(20, 23, 30, .08) 1px, transparent 1px);
  background-size: 18px 18px;
}

.nav-blur {
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  background: rgba(247, 245, 240, .78);
}

.hairline        { border: 1px solid var(--gm-hairline-internal); }
.hairline-strong { border: 1px solid var(--gm-hairline-external); }

/* ---------------------------------------------------------------------------
 * 4. Botões — com feedback de clique (active:scale), ausente antes
 * ------------------------------------------------------------------------- */
.btn-primary {
  background: var(--gm-ink);
  color: var(--gm-cream);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn-primary:hover  { transform: translateY(-1px); box-shadow: 0 8px 20px -4px rgba(20, 23, 30, .35); }
.btn-primary:active { transform: translateY(-1px) scale(.99); }

.btn-secondary {
  background: transparent;
  color: var(--gm-ink);
  border: 1px solid rgba(20, 23, 30, .2);
  transition: all .2s ease;
}
.btn-secondary:hover  { background: rgba(20, 23, 30, .04); border-color: rgba(20, 23, 30, .4); }
.btn-secondary:active { transform: scale(.99); }

/* Brilho que atravessa o botão uma vez a cada Mount. */
.btn-shine { position: relative; overflow: hidden; }
.btn-shine::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(247, 245, 240, .22), transparent);
  transform: translateX(-120%);
}
.btn-shine:hover::after { animation: gm-shine 1.1s ease-in-out; }
@keyframes gm-shine { to { transform: translateX(320%); } }

/* ---------------------------------------------------------------------------
 * 5. Cards e hovers
 * ------------------------------------------------------------------------- */
.module-card {
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.module-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px -8px rgba(20, 23, 30, .10);
  border-color: rgba(47, 111, 94, .35);
}

.card-hover { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.card-hover:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px -8px rgba(20, 23, 30, .10);
  border-color: rgba(47, 111, 94, .35);
}
.card-hover:active { transform: translateY(-1px) scale(.99); }

.tier-card { transition: transform .25s ease, box-shadow .25s ease; }
.tier-card:hover { transform: translateY(-4px); }
.tier-card:active { transform: translateY(-2px) scale(.995); }

.niche-chip { transition: all .2s ease; cursor: pointer; }
.niche-chip:hover { background: var(--gm-forest); color: var(--gm-cream); transform: translateY(-2px); }
/* Nicho selecionado (Alpine) — mesmo estado do hover, sem depender do mouse. */
.niche-chip[aria-pressed='true'] {
  background: var(--gm-forest);
  color: var(--gm-cream);
  border-color: var(--gm-forest);
}

.top-row { transition: background .2s ease; cursor: pointer; }
.top-row:hover { background: rgba(20, 23, 30, .02); }

.dd-enter        { opacity: 0; transform: translateY(-4px) scale(.98); }
.dd-enter-active { opacity: 1; transform: translateY(0) scale(1); transition: all .15s ease; }

/* ---------------------------------------------------------------------------
 * 6. Selos e pílulas
 * ------------------------------------------------------------------------- */
.tier-popular { position: relative; }
.tier-popular::before {
  content: "Mais popular";
  position: absolute; top: -12px; left: 50%;
  transform: translateX(-50%);
  background: var(--gm-ink); color: var(--gm-cream);
  padding: 4px 14px; border-radius: 999px;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600;
  z-index: 10;
}

.view-pill { transition: all .2s ease; cursor: pointer; }
.view-pill:hover { background: rgba(20, 23, 30, .06); }
.view-pill.active { background: var(--gm-ink); color: var(--gm-cream); }
.view-pill:focus-visible { outline: 2px solid var(--gm-forest); outline-offset: 2px; }

.switch-track        { background: rgba(20, 23, 30, .08); transition: background .2s ease; }
.switch-track.on     { background: var(--gm-forest); }
.switch-knob         { background: #fff; transition: transform .2s ease; }
.switch-track.on .switch-knob { transform: translateX(20px); }

.subdomain-pill { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px; }

.wizard-step { transition: all .2s ease; }
.wizard-step:hover { transform: translateX(4px); }

/* Ponto de status com anel pulsante. */
.live-dot { position: relative; }
.live-dot::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 999px;
  animation: gm-pulse-ring 1.8s ease-out infinite;
}
@keyframes gm-pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(47, 111, 94, .45); }
  70%  { box-shadow: 0 0 0 6px rgba(47, 111, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(47, 111, 94, 0); }
}

/* ---------------------------------------------------------------------------
 * 7. Mockups de processo (Kanban, Gantt, calendário, tabela, lista)
 * ------------------------------------------------------------------------- */
.kanban-col  { background: rgba(20, 23, 30, .03); border-radius: 10px; padding: 10px; }
.kanban-card {
  background: #fff;
  border: 1px solid rgba(20, 23, 30, .08);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 8px;
  font-size: 12px;
}
.gantt-bar { height: 22px; border-radius: 4px; }
.gantt-grid-line { border-top: 1px dashed rgba(20, 23, 30, .10); }

/* ---------------------------------------------------------------------------
 * 8. Tabela comparativa — coluna de recurso fixa no mobile
 * ------------------------------------------------------------------------- */
.compare-table th { position: sticky; top: 64px; background: var(--gm-cream); z-index: 5; }
.compare-table thead th:first-child { left: 0; z-index: 6; }
/* Primeira coluna grudada à esquerda: sem ela o usuário perde a referência
   do recurso ao rolar horizontalmente no celular. */
.compare-table .col-recurso {
  position: sticky;
  left: 0;
  z-index: 4;
  background: #fff;
  box-shadow: 1px 0 0 var(--gm-hairline-external);
}
.compare-table thead .col-recurso { z-index: 7; background: var(--gm-cream); }
.compare-table tbody tr:nth-child(even) .col-recurso { background: #fbfaf7; }

/* ---------------------------------------------------------------------------
 * 9. Foco visível — WCAG 2.4.7, antes só havia rings em alguns inputs
 * ------------------------------------------------------------------------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--gm-forest);
  outline-offset: 2px;
  border-radius: 4px;
}
.search-focus { transition: all .2s ease; }
.search-focus:focus-within { box-shadow: 0 0 0 3px rgba(47, 111, 94, .12); border-color: var(--gm-forest); }

/* Respeita quem pediu menos movimento. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .module-card:hover, .card-hover:hover, .tier-card:hover, .niche-chip:hover { transform: none; }
}

/* ---------------------------------------------------------------------------
 * 10. Sidebar (vitrine de componente)
 * ------------------------------------------------------------------------- */
.sb-item { transition: all .2s cubic-bezier(.4, 0, .2, 1); }
.sb-item:hover { background: rgba(20, 23, 30, .04); }
.sb-item.active { background: var(--gm-forest); color: var(--gm-cream); }
.sb-item.active .sb-icon { color: var(--gm-cream); }
.sb-item.active .sb-dot { background: var(--gm-copper); }
.sb-icon { transition: color .2s ease; }
.sb-dot { width: 6px; height: 6px; border-radius: 999px; background: transparent; transition: background .2s ease; }

.sb-logo-full  { display: block; }
.sb-logo-icon  { display: none; }
.sidebar.collapsed .sb-label,
.sidebar.collapsed .sb-section-label,
.sidebar.collapsed .sb-arrow,
.sidebar.collapsed .sb-user-meta { display: none; }
.sidebar.collapsed .sb-item { justify-content: center; padding-left: 0; padding-right: 0; }
.sidebar.collapsed .sb-logo-full { display: none; }
.sidebar.collapsed .sb-logo-icon { display: block; }

.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

.demo-content { margin-left: 304px; padding: 24px; min-height: 100vh; transition: margin-left .3s; }
.demo-content.collapsed { margin-left: 96px; }
@media (max-width: 1023px) { .demo-content { margin-left: 0; } }