/* ==========================================================================
   Hero v2 — Centro de Operaciones Judiciales (diseño aprobado en Figma)
   Scoped entirely under .jh- to avoid touching the rest of the site's CSS.
   Todo color pasa por variables para poder redefinirlas en modo claro
   (ver bloque [data-theme="light"] .jh-hero al final).
   ========================================================================== */

.jh-hero{
  --jh-bg:#070b16;
  --jh-card-bg: rgba(255,255,255,.04);
  --jh-card-bg-strong: rgba(30,41,59,.55);
  --jh-border: rgba(255,255,255,.09);
  --jh-border-strong: rgba(255,255,255,.16);
  --jh-blue:#3b82f6;
  --jh-blue-hover:#2563eb;
  --jh-blue-light:#93c5fd;
  --jh-green:#22c55e;
  --jh-green-bright:#4ade80;
  --jh-green-text:#4ade80;        /* verde usado como TEXTO (Conectado, checks) — debe tener buen contraste */
  --jh-text:#ffffff;              /* títulos: h1, nombre del hub, nombre de tarjeta */
  --jh-text-soft:#dbe3ee;         /* texto secundario legible: badge, checklist, filas de actividad */
  --jh-muted:#93a0b8;
  --jh-muted-2:#69768c;
  --jh-icon-color:var(--jh-blue-light); /* íconos de tarjeta + subtítulo del hub */
  --jh-accent-1:#5b9bff;          /* gradiente del título */
  --jh-accent-2:var(--jh-blue-light);
  --jh-ghost-bg: rgba(255,255,255,.03);
  --jh-ghost-bg-hover: rgba(255,255,255,.06);
  --jh-ghost-border-hover: rgba(255,255,255,.32);
  --jh-particle-dot: rgba(255,255,255,.12);
  --jh-activity-bg: rgba(15,23,42,.72);
  --jh-line-stroke: rgba(96,165,250,.4);
  --jh-card-shadow: rgba(0,0,0,.5);
  --jh-radius-lg:24px;
  --jh-radius-md:16px;
  --jh-radius-sm:12px;
  --jh-ease: cubic-bezier(.23,1,.32,1);

  /* Alias hacia las variables de demo-section.css: el diagrama animado
     ("Mientras tú trabajas...") vive ahora dentro del Hero, así que sus
     clases .ds-* necesitan estas variables --ds-* disponibles aquí.
     Reutilizan los mismos tokens del Hero — un solo origen de verdad,
     y heredan el modo claro/oscuro automáticamente sin duplicar reglas. */
  --ds-bg:var(--jh-bg);
  --ds-card-bg:var(--jh-card-bg);
  --ds-card-bg-strong:var(--jh-card-bg-strong);
  --ds-border:var(--jh-border);
  --ds-border-strong:var(--jh-border-strong);
  --ds-blue:var(--jh-blue);
  --ds-blue-light:var(--jh-blue-light);
  --ds-text:var(--jh-text);
  --ds-text-soft:var(--jh-text-soft);
  --ds-muted:var(--jh-muted);
  --ds-muted-2:var(--jh-muted-2);
  --ds-icon-color:var(--jh-icon-color);
  --ds-particle-dot:var(--jh-particle-dot);
  --ds-report-bg:var(--jh-activity-bg);
  --ds-shadow:var(--jh-card-shadow);
  --ds-dot-waiting: rgba(255,255,255,.25);
  --ds-amber:#f5b942;
  --ds-green:#22c55e;
  --ds-green-text:var(--jh-green-text);
  --ds-ease:var(--jh-ease);
  --ds-cycle:8s;

  position:relative;
  background:var(--jh-bg);
  padding:88px 0 140px;
  overflow:hidden;
  isolation:isolate;
  transition:background-color .3s;
}

.jh-hero *{box-sizing:border-box;}

/* ---------- Ambient background: particle dots + soft glow blobs ---------- */
.jh-bg-particles{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(var(--jh-particle-dot) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 60% 40%,#000 40%,transparent 85%);
          mask-image:radial-gradient(ellipse 80% 70% at 60% 40%,#000 40%,transparent 85%);
}
.jh-glow{position:absolute;border-radius:50%;filter:blur(90px);opacity:.35;z-index:0;pointer-events:none;animation:jh-drift 18s ease-in-out infinite;will-change:transform;}
.jh-glow--a{width:420px;height:420px;background:#3b82f6;top:-120px;right:5%;}
.jh-glow--b{width:340px;height:340px;background:#22c55e;bottom:-100px;left:8%;animation-delay:-7s;opacity:.18;}
@keyframes jh-drift{
  0%,100%{transform:translate(0,0) scale(1);}
  50%{transform:translate(24px,-18px) scale(1.06);}
}
@media (prefers-reduced-motion:reduce){ .jh-glow{animation:none;} }

.jh-container{
  position:relative;z-index:1;
  max-width:1360px;margin-inline:auto;padding-inline:24px;
  display:grid;grid-template-columns:.92fr 1.08fr;gap:56px;align-items:center;
}

/* ---------- Left column: copy ---------- */
.jh-badge{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--jh-card-bg);border:1px solid var(--jh-border);
  border-radius:999px;padding:8px 18px;
  font-size:.82rem;font-weight:500;color:var(--jh-text-soft);margin-bottom:22px;
}
.jh-dot{width:7px;height:7px;border-radius:50%;background:var(--jh-green);flex-shrink:0;position:relative;}
/* Pulso del punto "en vivo": anillo que crece y se desvanece con transform+opacity
   (compositor-only, no dispara layout ni paint del box-shadow en cada frame). */
.jh-dot--live::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  border:1.5px solid var(--jh-green);
  animation:jh-ring 2s ease-out infinite;
  will-change:transform,opacity;
}
@keyframes jh-ring{
  0%{transform:scale(.5);opacity:.9;}
  100%{transform:scale(2.1);opacity:0;}
}

.jh-title{
  font-size:clamp(2.1rem,1.5rem + 2.6vw,3.4rem);
  font-weight:800;line-height:1.12;letter-spacing:-0.02em;
  color:var(--jh-text);margin:0 0 22px;
}
.jh-title .jh-accent{
  background:linear-gradient(90deg,var(--jh-accent-1),var(--jh-accent-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

.jh-desc{font-size:1.06rem;line-height:1.65;color:var(--jh-muted);max-width:46ch;margin:0 0 32px;}

.jh-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:28px;}
.jh-btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 26px;border-radius:var(--jh-radius-sm);
  font-weight:600;font-size:.95rem;text-decoration:none;white-space:nowrap;
  border:1px solid transparent;cursor:pointer;
  transition:transform .15s var(--jh-ease),background-color .15s,border-color .15s,box-shadow .15s,color .15s;
}
.jh-btn:active{transform:scale(.97);}
.jh-btn--primary{background:var(--jh-blue);color:#fff;box-shadow:0 12px 28px -10px rgba(59,130,246,.55);}
.jh-btn--primary:hover{background:var(--jh-blue-hover);}
.jh-btn--ghost{background:var(--jh-ghost-bg);color:var(--jh-text);border-color:var(--jh-border-strong);}
.jh-btn--ghost:hover{border-color:var(--jh-ghost-border-hover);background:var(--jh-ghost-bg-hover);}

.jh-checklist{display:flex;flex-wrap:wrap;gap:10px 28px;}
.jh-checklist span{display:inline-flex;align-items:center;gap:8px;font-size:.88rem;color:var(--jh-text-soft);}
.jh-check{color:var(--jh-green-text);flex-shrink:0;}

/* ---------- Right column: network visual ---------- */
.jh-visual{position:relative;min-height:680px;}
.jh-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:1;}
.jh-line{fill:none;stroke:var(--jh-line-stroke);stroke-width:.5;stroke-dasharray:60;stroke-dashoffset:60;transition:stroke-dashoffset .7s var(--jh-ease);}
.jh-line.connected{stroke-dashoffset:0;}
.jh-pulse{fill:var(--jh-green-bright);opacity:0;filter:drop-shadow(0 0 4px rgba(74,222,128,1)) drop-shadow(0 0 8px rgba(74,222,128,.6));}
.jh-pulse.active{opacity:1;}

.jh-hub{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.85);opacity:0;
  transition:transform .55s var(--jh-ease),opacity .55s var(--jh-ease);
  z-index:3;width:min(280px,74%);text-align:center;
  background:var(--jh-card-bg-strong);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  border:1px solid var(--jh-border-strong);border-radius:var(--jh-radius-lg);
  padding:28px 24px;box-shadow:0 30px 60px -25px rgba(59,130,246,.4);
}
.jh-hub.go{transform:translate(-50%,-50%) scale(1);opacity:1;}
.jh-hub-avatar{
  width:64px;height:64px;margin:0 auto 14px;border-radius:18px;overflow:hidden;
  background:rgba(59,130,246,.15);
  display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 10px 22px -10px rgba(59,130,246,.5);
}
.jh-hub-avatar img{width:100%;height:100%;object-fit:contain;padding:6px;}
.jh-hub-name{font-weight:800;font-size:1.15rem;color:var(--jh-text);margin-bottom:4px;}
.jh-hub-sub{font-size:.78rem;color:var(--jh-icon-color);margin-bottom:16px;}
.jh-hub-status{
  display:inline-flex;align-items:center;gap:7px;background:rgba(34,197,94,.15);color:var(--jh-green-text);
  font-size:.68rem;font-weight:700;letter-spacing:.05em;padding:7px 16px;border-radius:999px;margin-bottom:10px;
}
.jh-hub-count{display:inline-block;background:var(--jh-ghost-bg-hover);color:var(--jh-text-soft);font-size:.72rem;font-weight:500;padding:6px 14px;border-radius:999px;}

.jh-card{
  position:absolute;transform:translate(-50%,-50%) translateY(6px) scale(.9);opacity:0;
  transition:transform .45s var(--jh-ease),opacity .45s var(--jh-ease);
  z-index:2;width:190px;
  background:var(--jh-card-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--jh-border);border-radius:var(--jh-radius-md);padding:14px 16px;
  box-shadow:0 14px 30px -18px var(--jh-card-shadow);
}
.jh-card.connected{transform:translate(-50%,-50%) translateY(0) scale(1);opacity:1;}
.jh-card--top{left:50%;top:6%;}
.jh-card--ml{left:14%;top:34%;}
.jh-card--mr{left:86%;top:32%;}
.jh-card--bl{left:14%;top:68%;}
.jh-card--br{left:86%;top:68%;}

.jh-card-top{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px;}
.jh-card-icon{
  width:38px;height:38px;border-radius:10px;background:rgba(59,130,246,.15);color:var(--jh-icon-color);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.jh-card-name{font-weight:700;font-size:.86rem;color:var(--jh-text);line-height:1.25;}
.jh-card-sub{font-size:.68rem;color:var(--jh-muted);line-height:1.3;margin-top:2px;}
.jh-card-status{display:flex;align-items:center;gap:6px;font-size:.7rem;}
.jh-status-text{color:var(--jh-green-text);font-weight:700;}
.jh-status-time{color:var(--jh-muted-2);margin-left:auto;white-space:nowrap;}

/* ---------- Live activity panel ---------- */
.jh-activity{
  position:absolute;right:0;top:84%;z-index:4;width:min(340px,88%);
  background:var(--jh-activity-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--jh-border-strong);border-radius:var(--jh-radius-md);
  padding:16px 0;box-shadow:0 26px 50px -20px var(--jh-card-shadow);
}
.jh-activity-head{display:flex;align-items:center;gap:9px;padding:0 18px 12px;border-bottom:1px solid var(--jh-border);margin-bottom:2px;}
.jh-activity-title{font-weight:700;font-size:.86rem;color:var(--jh-text);}
.jh-live-badge{margin-left:auto;font-size:.62rem;font-weight:700;letter-spacing:.08em;color:var(--jh-muted);border:1px solid var(--jh-border-strong);padding:3px 9px;border-radius:999px;}
.jh-activity-row{
  display:flex;align-items:center;gap:9px;padding:9px 18px;opacity:0;transform:translateX(-8px);
  transition:opacity .4s var(--jh-ease),transform .4s var(--jh-ease);
}
.jh-activity-row.show{opacity:1;transform:translateX(0);}
.jh-check-ico{color:var(--jh-muted-2);flex-shrink:0;transition:color .3s;}
.jh-activity-row.show .jh-check-ico{color:var(--jh-green-text);}
.jh-activity-row span:not(.jh-activity-time){font-size:.8rem;color:var(--jh-text-soft);}
.jh-activity-time{margin-left:auto;font-size:.7rem;color:var(--jh-muted-2);white-space:nowrap;}

/* ==========================================================================
   Modo claro — mismos componentes, "vidrio" claro sobre fondo claro en vez
   de vidrio oscuro sobre fondo oscuro. Los degradados/acentos se oscurecen
   un poco para mantener contraste AA sobre fondo claro.
   ========================================================================== */
[data-theme="light"] .jh-hero{
  --jh-bg:linear-gradient(160deg,#e7f0fd 0%,#f4f8fc 45%,#eaf1fb 100%);
  --jh-card-bg: rgba(15,23,42,.035);
  --jh-card-bg-strong: rgba(255,255,255,.72);
  --jh-border: rgba(15,23,42,.10);
  --jh-border-strong: rgba(15,23,42,.16);
  --jh-blue:#2563eb;
  --jh-blue-hover:#1d4ed8;
  --jh-blue-light:#3b82f6;
  --jh-green-text:#15803d;
  --jh-text:#0f172a;
  --jh-text-soft:#334155;
  --jh-muted:#5b6675;
  --jh-muted-2:#7c8798;
  --jh-icon-color:#2563eb;
  --jh-accent-1:#1d4ed8;
  --jh-accent-2:#2563eb;
  --jh-ghost-bg: rgba(15,23,42,.03);
  --jh-ghost-bg-hover: rgba(15,23,42,.06);
  --jh-ghost-border-hover: rgba(15,23,42,.28);
  --jh-particle-dot: rgba(15,23,42,.10);
  --jh-activity-bg: linear-gradient(160deg,rgba(255,255,255,.86),rgba(231,240,253,.8));
  --jh-line-stroke: rgba(37,99,235,.4);
  --jh-card-shadow: rgba(15,23,42,.18);
  --ds-dot-waiting: rgba(15,23,42,.18);
}
[data-theme="light"] .jh-glow{opacity:.3;}
[data-theme="light"] .jh-glow--b{opacity:.2;}
[data-theme="light"] .jh-hub-status{background:rgba(21,128,61,.12);}
[data-theme="light"] .jh-btn--primary{box-shadow:0 12px 24px -10px rgba(37,99,235,.35);}

/* ==========================================================================
   Responsive — tablet & mobile
   Objetivo 2: el diagrama absoluto no tiene equivalente 1:1 en pantallas
   angostas, así que a partir de 768px se colapsa a una lista vertical simple
   (mismo contenido y jerarquía, sin líneas de conexión).
   ========================================================================== */
@media (max-width:1024px){
  .jh-container{grid-template-columns:1fr;gap:48px;}
  .jh-desc{max-width:60ch;}
  .jh-visual{min-height:640px;max-width:520px;margin-inline:auto;}
}

@media (max-width:768px){
  .jh-hero{padding:56px 0 72px;}
  .jh-title{font-size:clamp(1.8rem,1.3rem + 4vw,2.4rem);}
  .jh-ctas{flex-direction:column;}
  .jh-btn{justify-content:center;}

  .jh-visual{min-height:0;max-width:420px;display:flex;flex-direction:column;gap:14px;}
  .jh-lines{display:none;}

  .jh-hub{position:static;transform:none !important;opacity:1 !important;width:100%;margin-bottom:4px;}
  .jh-card{
    position:static;transform:none !important;opacity:1 !important;width:100%;
    display:flex;flex-direction:column;align-items:stretch;gap:10px;
  }
  .jh-card-top{margin-bottom:0;}
  .jh-card-status{flex-direction:row;align-items:center;justify-content:flex-start;gap:7px;flex-wrap:wrap;row-gap:2px;}
  .jh-status-time{margin-left:0;}

  .jh-activity{position:static;width:100%;}
}

@media (prefers-reduced-motion:reduce){
  .jh-hub,.jh-card,.jh-activity-row{transition:none;}
}