/* ============================================================
   APEX — DEMOS DE PRODUCTO CONSTRUIDAS CON CÓDIGO (página local)

   Solo la carga una página cuyo contenido trae `data-lp-demo` (hoy
   /product): el resto del sitio no paga ni un byte. Las demos son
   HTML/CSS/SVG con los tokens de APEX, no capturas ni imágenes
   generadas, y se rotulan «Demo · datos de ejemplo».

   Mismas reglas que site.css: TODA regla lleva prefijo .lp-, NI UN
   COLOR escrito a mano (todo deriva de --lp-*, que derivan de
   base.css), y se ve bien en claro y en oscuro sin bloque propio.
   Nada se mueve solo: la página se lee igual sin animación.
   ============================================================ */

/* ---------- el marco de una demo ---------- */
.lp-demo{
  margin:0;min-width:0;
  border:1px solid var(--lp-line);border-radius:var(--lp-r-lg);
  background:var(--lp-surface);
  overflow:hidden;
}
.lp-demo-bar{
  display:flex;align-items:center;gap:12px;
  padding:11px 16px;border-bottom:1px solid var(--lp-line);
  background:var(--lp-surface-2);
}
.lp-demo-dots{display:inline-flex;gap:6px;}
.lp-demo-dots span{width:9px;height:9px;border-radius:50%;background:var(--lp-line-2);}
.lp-demo-url{font-size:var(--lp-small);font-weight:600;color:var(--lp-ink-2);letter-spacing:-.005em;}
.lp-demo-tag{
  margin-left:auto;padding:3px 9px;border-radius:999px;
  font-size:var(--lp-micro);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--lp-accent-ink);background:var(--lp-accent-soft);
}
.lp-demo-cap{
  padding:12px 16px;border-top:1px solid var(--lp-line);
  font-size:12.5px;line-height:1.55;color:var(--lp-ink-3);
}
.lp-demo-label{
  display:block;font-size:var(--lp-micro);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--lp-ink-3);
}
.lp-demo-c{font-variant-numeric:tabular-nums;font-weight:600;font-size:13px;}
.lp-demo-c.is-up{color:var(--lp-ok);}
.lp-demo-c.is-down{color:var(--lp-bad);}

/* ---------- Command Center ---------- */
.lp-pd-hero-sec{padding-top:clamp(8px,2vw,24px);}
.lp-demo-cc .lp-demo-body{display:grid;grid-template-columns:168px minmax(0,1fr);}
.lp-demo-side{border-right:1px solid var(--lp-line);padding:14px 10px;}
.lp-demo-side ul{display:flex;flex-direction:column;gap:2px;}
.lp-demo-side li{
  padding:8px 10px;border-radius:9px;font-size:13.5px;color:var(--lp-ink-2);
}
.lp-demo-side li.is-on{background:var(--lp-accent-soft);color:var(--lp-accent-ink);font-weight:600;}
.lp-demo-main{padding:18px clamp(14px,2vw,24px) 22px;min-width:0;}
.lp-demo-greet{font-size:15px;font-weight:650;color:var(--lp-ink);letter-spacing:-.01em;}
.lp-demo-greet span{font-weight:400;color:var(--lp-ink-3);}
.lp-demo-strip{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  margin-top:14px;border:1px solid var(--lp-line);border-radius:var(--lp-r);
  background:var(--lp-line);overflow:hidden;
}
.lp-demo-strip li{display:flex;flex-direction:column;gap:2px;padding:10px 12px;background:var(--lp-surface);min-width:0;}
.lp-demo-k{font-size:12px;color:var(--lp-ink-3);}
.lp-demo-v{font-size:15px;font-weight:650;color:var(--lp-ink);font-variant-numeric:tabular-nums;}
.lp-demo-grid{
  display:grid;gap:14px;margin-top:14px;
  grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);
  grid-template-areas:"pf dec" "mem dec";
}
.lp-demo-card{border:1px solid var(--lp-line);border-radius:var(--lp-r);padding:14px 16px;min-width:0;background:var(--lp-canvas);}
.lp-demo-card:first-child{grid-area:pf;}
.lp-demo-card.is-decision{grid-area:dec;}
.lp-demo-card.is-memory{grid-area:mem;}
.lp-demo-big{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-top:6px;
  font-size:26px;font-weight:700;letter-spacing:-.03em;color:var(--lp-ink);font-variant-numeric:tabular-nums;
}
.lp-demo-spark{display:block;width:100%;height:44px;margin-top:8px;}
.lp-demo-spark path{fill:none;stroke:var(--lp-ok);stroke-width:2;vector-effect:non-scaling-stroke;}
.lp-demo-rows{margin-top:8px;}
.lp-demo-rows li{
  display:flex;justify-content:space-between;padding:6px 0;border-top:1px solid var(--lp-line);
  font-size:13px;color:var(--lp-ink-2);font-variant-numeric:tabular-nums;
}
.lp-demo-q{margin-top:8px;font-size:15px;line-height:1.5;color:var(--lp-ink);}
.lp-demo-dl{margin-top:12px;display:flex;flex-direction:column;}
.lp-demo-dl > div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:10px;padding:8px 0;border-top:1px solid var(--lp-line);}
.lp-demo-dl dt{font-size:12.5px;font-weight:650;color:var(--lp-ink);}
.lp-demo-dl dd{margin:0;font-size:13px;line-height:1.5;color:var(--lp-ink-2);}
.lp-demo-verdict{
  margin-top:12px;padding:10px 12px;border-left:2px solid var(--lp-accent);
  font-size:14px;font-weight:600;color:var(--lp-ink);background:var(--lp-accent-soft);border-radius:0 10px 10px 0;
}
.lp-demo-verdict span{display:block;font-size:var(--lp-micro);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--lp-accent-ink);}
.lp-demo-mem{margin-top:8px;font-size:14px;line-height:1.55;color:var(--lp-ink-2);}
.lp-demo-mem strong{color:var(--lp-ink);}
.lp-demo-meta{margin-top:8px;font-size:12px;color:var(--lp-ink-3);}

/* ---------- Trader Mode: escalera de niveles ---------- */
.lp-pd-split{display:grid;gap:clamp(32px,5vw,72px);grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;}
.lp-demo-trade .lp-demo-ladder{padding:18px 18px 4px;display:flex;flex-direction:column;}
.lp-demo-trade .lp-demo-verdict{margin:12px 18px 18px;}
.lp-demo-lvl{
  display:flex;justify-content:space-between;align-items:center;
  padding:9px 12px;border-radius:10px;font-size:14px;font-weight:650;font-variant-numeric:tabular-nums;
  border:1px solid var(--lp-line-2);color:var(--lp-ink);background:var(--lp-canvas);
}
.lp-demo-lvl.is-target{border-color:color-mix(in srgb,var(--lp-ok) 45%,transparent);}
.lp-demo-lvl.is-stop{border-color:color-mix(in srgb,var(--lp-bad) 45%,transparent);}
.lp-demo-lvl.is-entry{border-color:var(--lp-accent-line);}
.lp-demo-zone{
  display:flex;align-items:center;justify-content:center;margin:4px 14px;border-radius:8px;
  font-size:12.5px;font-weight:600;
}
.lp-demo-zone.is-reward{height:96px;color:var(--lp-ok);background:color-mix(in srgb,var(--lp-ok) 10%,transparent);}
.lp-demo-zone.is-risk{height:40px;color:var(--lp-bad);background:color-mix(in srgb,var(--lp-bad) 10%,transparent);}

/* ---------- los dos modos ---------- */
.lp-pd-modes{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));}
.lp-pd-mode{
  display:flex;flex-direction:column;gap:10px;padding:clamp(22px,3vw,34px);
  border:1px solid var(--lp-line);border-radius:var(--lp-r-lg);background:var(--lp-surface);
  color:inherit;text-decoration:none;transition:border-color .2s var(--lp-ease-soft),transform .2s var(--lp-ease-soft);
}
.lp-pd-mode:hover{border-color:var(--lp-accent-line);transform:translateY(-2px);}
.lp-pd-mode p{color:var(--lp-ink-2);line-height:1.65;}
.lp-pd-more{margin-top:auto;padding-top:8px;font-weight:650;color:var(--lp-accent-ink);}
.lp-pd-more::after{content:" →";}

/* ---------- el directorio ---------- */
.lp-dir{display:grid;gap:clamp(28px,4vw,48px);grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));}
.lp-dir-h{font-size:var(--lp-h3);font-weight:700;letter-spacing:-.022em;color:var(--lp-ink);margin-bottom:10px;}
.lp-dir-h a{color:inherit;text-decoration:none;}
.lp-dir-h a:hover{color:var(--lp-accent-ink);}
.lp-dir-col li{display:flex;flex-direction:column;gap:2px;padding:10px 0;border-top:1px solid var(--lp-line);}
.lp-dir-col li a{font-weight:600;color:var(--lp-ink);text-decoration:none;}
.lp-dir-col li a:hover{color:var(--lp-accent-ink);text-decoration:underline;text-underline-offset:3px;}
.lp-dir-col li span{font-size:13.5px;line-height:1.5;color:var(--lp-ink-3);}

/* ---------- responsive: composiciones propias ---------- */
@media (max-width:900px){
  .lp-pd-split{grid-template-columns:1fr;}
  .lp-demo-cc .lp-demo-body{grid-template-columns:1fr;}
  .lp-demo-side{border-right:0;border-bottom:1px solid var(--lp-line);padding:8px 10px;}
  .lp-demo-side ul{flex-direction:row;flex-wrap:wrap;gap:4px;}
  .lp-demo-side li{white-space:nowrap;padding:6px 10px;}
}
@media (max-width:640px){
  .lp-demo-strip{grid-template-columns:repeat(2,minmax(0,1fr));}
  .lp-demo-grid{grid-template-columns:1fr;grid-template-areas:"dec" "pf" "mem";}
  .lp-demo-dl > div{grid-template-columns:1fr;gap:2px;}
  .lp-demo-big{font-size:22px;}
}
@media (prefers-reduced-motion:reduce){
  .lp-pd-mode{transition:none;}
  .lp-pd-mode:hover{transform:none;}
}