/* ═══════════════════════════════════════════════════════════
   MARKET — aba "Market" (ecossistema do G2-ERP). Página de
   apresentação ("em breve") com hero + grade de categorias.
   Tudo em var() para acompanhar o seletor de Tema.
   ═══════════════════════════════════════════════════════════ */

.mkt-hero {
  position: relative; overflow: hidden;
  display: flex; gap: 28px; align-items: center; justify-content: space-between;
  background:
    radial-gradient(120% 150% at 100% 0%, var(--accent-soft), transparent 55%),
    linear-gradient(135deg, var(--s1), var(--s2));
  border: 1px solid var(--bd); border-radius: 16px; padding: 28px 30px;
}
.mkt-hero::before {
  content: ''; position: absolute; right: -70px; top: -70px; width: 240px; height: 240px;
  background: radial-gradient(circle, var(--glow1), transparent 70%); pointer-events: none;
}
.mkt-hero-txt { position: relative; z-index: 1; max-width: 600px; }
.mkt-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--or); background: var(--accent-soft); border: 1px solid var(--bd);
  padding: 4px 11px; border-radius: 999px; margin-bottom: 13px;
}
.mkt-badge svg { width: 13px; height: 13px; }
.mkt-hero-title {
  font-family: 'Barlow Condensed', sans-serif; font-size: 31px; font-weight: 700;
  line-height: 1.05; margin-bottom: 8px; color: var(--tx);
}
.mkt-hero-sub { font-size: 13.5px; line-height: 1.6; color: var(--mu); margin-bottom: 18px; }
.mkt-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.mkt-hero-note { font-size: 11.5px; color: var(--mu); }
.mkt-hero-art { position: relative; z-index: 1; flex-shrink: 0; }

.mkt-secttl {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--mu); margin: 24px 2px 12px;
}

.mkt-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 14px;
}
.mkt-cat {
  position: relative; text-align: left; cursor: pointer;
  background: var(--s1); border: 1px solid var(--bd); border-radius: 14px; padding: 18px 16px 16px;
  color: var(--tx); font-family: 'Inter', sans-serif;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.mkt-cat:hover { transform: translateY(-3px); border-color: var(--or); box-shadow: 0 12px 30px rgba(0,0,0,.35); }
.mkt-cat-ico {
  width: 42px; height: 42px; border-radius: 12px; margin-bottom: 12px;
  background: var(--accent-soft); color: var(--or);
  display: flex; align-items: center; justify-content: center;
}
.mkt-cat-ico svg { width: 21px; height: 21px; }
.mkt-cat-title { font-size: 15px; font-weight: 700; color: var(--tx); margin-bottom: 5px; }
.mkt-cat-desc { font-size: 12.5px; line-height: 1.55; color: var(--mu); }
.mkt-soon {
  position: absolute; top: 14px; right: 14px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--amber); background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.32);
  padding: 3px 8px; border-radius: 999px;
}

@media (max-width: 640px) {
  .mkt-hero { flex-direction: column; align-items: flex-start; }
  .mkt-hero-art { align-self: center; }
}