/* ============================================================
   JYNX — /solucoes catalog styles
   ============================================================ */

/* ---------- hero ---------- */
.cathero { position: relative; overflow: hidden; padding-block: clamp(48px, 7vw, 88px) clamp(36px, 5vw, 56px); }
.cathero__atmo {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(50% 60% at 85% 0%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 70%),
    radial-gradient(40% 50% at 5% 10%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 65%);
}
.cathero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; opacity: .5; pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--ink) 9%, transparent) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(75% 75% at 50% 20%, #000, transparent 75%);
          mask-image: radial-gradient(75% 75% at 50% 20%, #000, transparent 75%);
}
.cathero__inner { position: relative; z-index: 1; max-width: 760px; }
.cathero h1 { font-size: clamp(2.4rem, 5.4vw, 4rem); margin-top: 18px; letter-spacing: -0.035em; }
.cathero p { margin-top: 22px; font-size: 1.2rem; line-height: 1.55; color: var(--ink-64); max-width: 56ch; }
.cathero__meta { display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; margin-top: 28px; color: var(--ink-64); font-size: 1rem; }
.cathero__meta b { color: var(--ink); font-weight: 800; }
.cathero__stat { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.cathero__stat:not(:last-child) { padding-right: 18px; border-right: 1px solid var(--hair); }

/* ---------- filter bar ---------- */
.catalog { padding-bottom: clamp(64px, 9vw, 120px); }
.catalog__bar {
  position: sticky; top: var(--nav-h); z-index: 20;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  border-block: 1px solid var(--hair);
  margin-bottom: 36px;
}
.catalog__filters { display: flex; gap: 9px; padding-block: 16px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-family: var(--font-body); font-size: .94rem; font-weight: 600;
  padding: 9px 15px; border-radius: 100px; border: 1px solid var(--hair);
  background: var(--bg); color: var(--ink-64); transition: all .18s;
}
.chip:hover { border-color: var(--ink-28); color: var(--ink); }
.chip--on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.chip__n {
  font-size: .76rem; font-weight: 700; min-width: 20px; height: 20px; padding: 0 5px;
  display: inline-grid; place-items: center; border-radius: 100px;
  background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink-48);
}
.chip--on .chip__n { background: color-mix(in srgb, white 22%, transparent); color: #fff; }

/* ---------- grid ---------- */
.catalog__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.sol { padding: 26px; display: flex; flex-direction: column; }
.sol:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--accent) 32%, var(--hair)); }
.sol__top { display: flex; align-items: center; justify-content: space-between; }
.sol__ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--accent-12); color: var(--accent); transition: transform .25s; }
.sol:hover .sol__ic { transform: scale(1.08) rotate(-4deg); }
.sol__prazo { display: inline-flex; align-items: center; gap: 5px; font-size: .8rem; font-weight: 700; color: var(--ink-48); white-space: nowrap; }
.sol__name { font-size: 1.28rem; margin-top: 20px; }
.sol__desc { color: var(--ink-64); margin-top: 9px; font-size: 1rem; flex: 1; }
.sol__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--hair-soft); }
.sol__erps { display: flex; flex-wrap: wrap; gap: 6px; }
.sol__erp { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 6px; background: var(--bg-alt); color: var(--ink-64); border: 1px solid var(--hair); }
.sol__cat { font-size: 11.5px; font-weight: 700; color: var(--accent-ink); background: var(--accent-12); padding: 3px 9px; border-radius: 6px; }
.sol__more { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-size: .92rem; color: var(--ink); white-space: nowrap; transition: gap .2s, color .2s; }
.sol__more:hover { color: var(--accent); gap: 9px; }
@media (max-width: 900px) { .catalog__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .catalog__grid { grid-template-columns: 1fr; } }

/* ---------- custom block ---------- */
.custom { position: relative; overflow: hidden; text-align: center; }
.custom__glow { position: absolute; top: -40%; left: 50%; transform: translateX(-50%); width: 600px; height: 500px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 24%, transparent), transparent 70%); pointer-events: none; }
.custom__inner { position: relative; z-index: 1; max-width: 680px; margin: 0 auto; }
.custom h2 { color: var(--bg); font-size: clamp(1.9rem, 4vw, 3rem); margin-top: 22px; }
.custom p { margin: 18px auto 0; color: color-mix(in srgb, white 74%, var(--ink)); font-size: 1.18rem; max-width: 50ch; }
.custom__btns { display: flex; gap: 14px; justify-content: center; margin-top: 34px; flex-wrap: wrap; }