/* ============================================================
   FOCUS — Sala de demos: armazón común

   Este fichero se carga siempre (la sala y el conmutador se ven desde
   el primer momento). El CSS interno de cada demo se carga solo cuando
   la demo se acerca a la pantalla.
   ============================================================ */

.demos{
  padding:96px 0;
  background:var(--tinta);
  color:var(--papel);

  /* Superficie propia de las demos: escalones oscuros por encima de
     --tinta, para que un panel dentro de otro siga leyéndose. */
  --demo-bg:#0C1015;
  --demo-panel:#161B21;
  --demo-panel-2:#1B222A;
  --demo-line:#232A31;
  --demo-muted:#68737D;
}
.demos h2{color:var(--papel)}

/* ---------- Conmutador de sector ----------
   Cambia las tres demos a la vez. Es, de paso, el mejor argumento de
   la página: demuestra «personalizado» en un clic. */
.sector-switch{
  margin-top:32px;display:flex;flex-wrap:wrap;align-items:center;gap:10px;
}
.sector-switch-label{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--demo-muted);margin-right:4px;
}
.sector-options{
  display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;
  background:var(--demo-panel);border:1px solid var(--demo-line);border-radius:999px;
}
.sector-btn{
  font-family:'Inter',sans-serif;font-size:14px;font-weight:500;
  padding:8px 18px;border-radius:999px;border:none;background:none;cursor:pointer;
  color:var(--niebla);white-space:nowrap;
  transition:color var(--dur-fast),background var(--dur-fast);
}
.sector-btn:hover{color:var(--papel)}
.sector-btn[aria-selected="true"]{background:var(--ambar);color:var(--tinta);font-weight:600}
.sector-btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(245,179,1,.35)}

/* ---------- Escenario de una demo ---------- */
.demo-stage{
  margin-top:56px;
  display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:44px;
  align-items:start;
}
.demo-intro{position:sticky;top:110px}
.demo-badge{
  display:inline-block;font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ambar);
  background:rgba(245,179,1,.1);border:1px solid rgba(245,179,1,.28);
  padding:5px 11px;border-radius:6px;margin-bottom:18px;
}
.demo-intro h3{
  font-size:clamp(23px,2.9vw,32px);font-weight:700;line-height:1.16;
  letter-spacing:-.025em;color:var(--papel);margin-bottom:14px;
}
.demo-intro p{color:var(--niebla);font-size:16px}
.demo-note{
  margin-top:20px;padding-top:18px;border-top:1px solid var(--demo-line);
  font-size:14px;color:var(--demo-muted);
}

/* El marco: los mismos corchetes de visor de la marca, más grandes. */
.demo-frame{
  position:relative;--vf-size:26px;
  background:var(--demo-bg);border:1px solid var(--demo-line);
  border-radius:var(--radius);padding:26px;
  /* El navegador se salta layout y pintado mientras está fuera de vista. */
  content-visibility:auto;contain-intrinsic-size:auto 560px;
}
.demo-frame .vf{border-color:rgba(245,179,1,.5);border-width:2px}
.demo-frame .vf.tl{top:12px;left:12px}
.demo-frame .vf.tr{top:12px;right:12px}
.demo-frame .vf.bl{bottom:12px;left:12px}
.demo-frame .vf.br{bottom:12px;right:12px}

/* ---------- Respaldo estático ----------
   Es lo que se ve antes de montar, sin JS, o si la demo falla.
   Nunca un hueco vacío. */
.demo-fallback{
  color:var(--demo-muted);font-size:14px;text-align:center;padding:60px 20px;
  font-family:'JetBrains Mono',monospace;letter-spacing:.06em;
}
.demo-host.demo-ready .demo-fallback{display:none}

/* ---------- Métrica que cierra cada demo ---------- */
.demo-metric{
  margin-top:18px;display:flex;align-items:baseline;gap:10px;
  font-size:15px;color:var(--niebla);
}
.demo-metric span{
  font-family:'Sora',sans-serif;font-weight:800;font-size:26px;
  color:var(--ambar);letter-spacing:-.02em;
}

/* ---------- Cierre de la sala ---------- */
.demos-cta{
  margin-top:72px;padding-top:44px;border-top:1px solid var(--demo-line);
  text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px;
}
.demos-cta p{font-family:'Sora',sans-serif;font-weight:600;font-size:clamp(19px,2.4vw,24px)}

/* ---------- Responsive ---------- */
@media(max-width:980px){
  .demo-stage{grid-template-columns:1fr;gap:28px}
  .demo-intro{position:static}
  .demo-frame{padding:18px}
}
@media(max-width:760px){
  .demos{padding:72px 0}
  .demo-stage{margin-top:40px}
  .sector-options{width:100%}
  .sector-btn{flex:1;padding:9px 12px;font-size:13.5px}
}