/* ==========================================================================
   NeuralJuris · Capa visual profesional  (neuraljuris-pro.css)
   ========================================================================== */
:root{
  --njp-gold:#22d3ee;
  --njp-gold-2:#38bdf8;
  --njp-line:rgba(34,211,238,.18);
  --njp-line-strong:rgba(34,211,238,.45);
  --njp-ink:#0b1018;
  --njp-panel-1:rgba(30,43,63,.96);
  --njp-panel-2:rgba(15,23,35,.98);
  --njp-up:#57c98a;
  --njp-text-dim:rgba(220,231,239,.55);
}
body{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
h1{ letter-spacing:-.02em; }

/* ---------- Encabezados de sección ---------- */
.gtit{
  display:flex !important; align-items:center; gap:14px;
  font-size:13px !important; letter-spacing:.18em; text-transform:uppercase;
  color:var(--njp-gold) !important; font-weight:700 !important;
  margin:46px 0 20px !important;
}
.gtit::before{
  content:""; flex:0 0 auto; width:26px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--njp-gold),transparent);
}
.gtit::after{
  content:""; flex:1 1 auto; height:1px;
  background:linear-gradient(90deg,var(--njp-line),transparent);
}

/* ---------- Grid fluida ---------- */
.grid{
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr)) !important;
  gap:18px !important;
}

/* ---------- Tarjetas premium ---------- */
.card{
  position:relative; overflow:hidden;
  border:1px solid var(--njp-line) !important;
  border-radius:18px !important;
  padding:24px 22px !important;
  background:linear-gradient(158deg,var(--njp-panel-1),var(--njp-panel-2)) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 18px 40px -18px rgba(0,0,0,.7) !important;
  transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s !important;
}
.card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--njp-gold),rgba(34,211,238,.15));
  opacity:.55; transition:opacity .35s;
}
.card::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(600px circle at var(--mx,50%) var(--my,0%),rgba(34,211,238,.10),transparent 40%);
  opacity:0; transition:opacity .4s;
}
.card:hover{
  transform:translateY(-6px);
  border-color:var(--njp-line-strong) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 30px 55px -20px rgba(0,0,0,.85), 0 0 0 1px rgba(34,211,238,.12) !important;
}
.card:hover::before{ opacity:1; }
.card:hover::after{ opacity:1; }
.cico{
  width:46px !important; height:46px !important; border-radius:13px !important;
  background:linear-gradient(145deg,rgba(34,211,238,.20),rgba(34,211,238,.05)) !important;
  border:1px solid rgba(34,211,238,.25);
  box-shadow:0 6px 16px -8px rgba(34,211,238,.5);
  transition:transform .35s;
}
.card:hover .cico{ transform:scale(1.06) rotate(-3deg); }

/* ---------- Barra de KPIs ---------- */
.njp-kpis{
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
  margin:26px 0 8px; max-width:960px; position:relative; z-index:3;
}
.njp-kpis .njp-k{
  position:relative; overflow:hidden;
  border:1px solid var(--njp-line); border-radius:16px;
  background:linear-gradient(158deg,rgba(30,43,63,.9),rgba(15,23,35,.95));
  padding:16px 16px 12px;
  box-shadow:0 18px 40px -22px rgba(0,0,0,.8);
  /* tilt 3D (los mismos --rx/--ry/--ty/--gx/--gy que inyecta el script premium) */
  transform:perspective(820px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px));
  transform-style:preserve-3d;
  transition:transform .16s cubic-bezier(.22,.9,.28,1),box-shadow .2s ease,border-color .2s ease;
  will-change:transform;
}
.njp-kpis .njp-k::after{ content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .2s;
  background:radial-gradient(220px circle at var(--gx,50%) var(--gy,50%),rgba(224,247,255,.12),transparent 60%); }
.njp-kpis .njp-k:hover{ border-color:var(--njp-gold); }
.njp-kpis .njp-k:hover::after{ opacity:1; }
@media(prefers-reduced-motion:reduce){ .njp-kpis .njp-k{ transform:none; transition:none; } }
.njp-kpis .njp-lbl{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--njp-text-dim); font-weight:600; }
.njp-kpis .njp-val{ font-size:26px; font-weight:800; color:#eae3d5; margin-top:4px; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.njp-kpis .njp-val small{ font-size:14px; color:var(--njp-gold); font-weight:700; margin-left:2px; }
.njp-kpis .njp-trend{ font-size:11px; color:var(--njp-up); font-weight:700; margin-top:2px; }
.njp-kpis svg{ position:absolute; right:12px; bottom:10px; }
@media(max-width:820px){ .njp-kpis{ grid-template-columns:repeat(2,1fr); } }