:root{
  --bg:#0b1020;
  --panel:#0f172a;
  --panel2:#111c36;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --brand:#7c3aed;
  --brand2:#22d3ee;
  --border:rgba(255,255,255,.10);
  --shadow: 0 20px 60px rgba(0,0,0,.45);
  --radius:18px;
  --max:1100px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: radial-gradient(1200px 600px at 20% 0%, rgba(124,58,237,.25), transparent 60%),
              radial-gradient(900px 500px at 90% 10%, rgba(34,211,238,.18), transparent 55%),
              var(--bg);
  color:var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  line-height:1.6;
}
a{color:inherit; text-decoration:none}
a:hover{opacity:.95}
.container{max-width:var(--max); margin:0 auto; padding:0 20px}
header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(180%) blur(14px);
  background: rgba(11,16,32,.65);
  border-bottom:1px solid var(--border);
}
.navbar{display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:14px}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.2px}
.logo{
  width:34px; height:34px; border-radius:12px;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  box-shadow: 0 10px 30px rgba(124,58,237,.35);
}
.navlinks{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.navlinks a{
  padding:10px 12px;
  border:1px solid transparent;
  border-radius:999px;
  color:var(--muted);
  font-weight:600;
  font-size:14px;
}
.navlinks a.active{color:var(--text); border-color:var(--border); background: rgba(255,255,255,.04)}
.navlinks a:hover{color:var(--text); border-color:var(--border); background: rgba(255,255,255,.03)}
.navbtn{
  display:none;
  border:1px solid var(--border);
  background: rgba(255,255,255,.04);
  color:var(--text);
  border-radius:12px;
  padding:10px 12px;
}
.hero{padding:54px 0 26px}
.hero-grid{display:grid; gap:24px; grid-template-columns:1.2fr .8fr; align-items:stretch}
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.hero-card{padding:28px}
.kicker{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  color:var(--muted);
  font-weight:600;
  font-size:13px;
}
.kicker .dot{
  width:8px; height:8px; border-radius:50%;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
}
h1{margin:14px 0 10px; font-size:42px; line-height:1.15}
p.lead{margin:0; color:#d1d5db; font-size:17px; max-width:62ch}
.cta-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 14px;
  border-radius: 14px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.04);
  font-weight:700;
}
.btn.primary{
  border-color: rgba(124,58,237,.45);
  background: linear-gradient(135deg, rgba(124,58,237,.35), rgba(34,211,238,.18));
}
.btn:hover{transform: translateY(-1px)}
.small{font-size:13px; color:var(--muted)}
.side{padding:22px}
.side h3{margin:0 0 10px; font-size:16px}
.badges{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}
.badge{
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
  border-radius:999px;
  padding:7px 10px;
  color:var(--muted);
  font-weight:600;
  font-size:13px;
}
.section{padding:18px 0 44px}
.grid3{display:grid; gap:14px; grid-template-columns:repeat(3,1fr)}
.feature{padding:18px}
.feature h3{margin:2px 0 6px; font-size:16px}
.feature p{margin:0; color:var(--muted); font-size:14px}
.prose{
  padding:24px;
}
.prose h2{margin:10px 0 6px; font-size:22px}
.prose h3{margin:16px 0 6px; font-size:18px}
.prose p{margin:8px 0; color:#d1d5db}
.prose ul{margin:10px 0 10px 18px; color:#d1d5db}
.prose li{margin:6px 0}
.prose a{color: #c4b5fd; text-decoration:underline; text-underline-offset:3px}
hr.sep{border:none; height:1px; background:var(--border); margin:18px 0}
.codebox, pre, code{
  font-family: var(--mono);
}
pre{
  overflow:auto;
  padding:14px 16px;
  border-radius: 16px;
  background: rgba(0,0,0,.28);
  border:1px solid var(--border);
  margin:12px 0;
  color:#e5e7eb;
}
code{
  background: rgba(0,0,0,.28);
  border:1px solid var(--border);
  padding:2px 6px;
  border-radius: 10px;
}
table{
  width:100%;
  border-collapse:collapse;
  overflow:hidden;
  border-radius: 14px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.02);
}
th,td{
  text-align:left;
  padding:10px 12px;
  border-bottom:1px solid var(--border);
  vertical-align:top;
}
th{color:#e5e7eb; font-size:13px; letter-spacing:.2px}
td{color:#d1d5db; font-size:14px}
tr:last-child td{border-bottom:none}
footer{
  border-top:1px solid var(--border);
  padding:22px 0 28px;
  color:var(--muted);
  font-size:13px;
}
.footer-row{display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap}
.footer-links{display:flex; gap:10px; flex-wrap:wrap}
.footer-links a{color:var(--muted); text-decoration:underline; text-underline-offset:3px}
.notice{
  margin-top:10px;
  padding:12px 14px;
  border-radius: 16px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
  color: var(--muted);
}
@media (max-width: 920px){
  .hero-grid{grid-template-columns:1fr}
  h1{font-size:36px}
  .grid3{grid-template-columns:1fr}
  .navlinks{display:none}
  .navbtn{display:inline-flex}
  .navlinks.open{display:flex; flex-direction:column; align-items:stretch; width:100%}
  .navlinks.open a{border-radius:14px}
  .navbar{flex-wrap:wrap}
}

/* --- Tipografía / lectura --- */
.prose p, .content p, main p { text-align: justify; text-justify: inter-word; hyphens: auto; }

/* --- Cargador superior (barra de progreso) --- */
.page-loader{position:fixed;inset:0 0 auto 0;height:3px;z-index:9999;background:transparent;pointer-events:none}
.page-loader .bar{height:100%;width:0;transform:translateZ(0);background:linear-gradient(90deg, rgba(255,255,255,.15), rgba(255,255,255,.7), rgba(255,255,255,.15));animation:loaderIndeterminate 1.4s ease-in-out infinite}
body.page-loaded .page-loader{opacity:0;transition:opacity .3s ease}
body.page-loaded .page-loader .bar{animation:none;width:100%}
@keyframes loaderIndeterminate{0%{width:0;opacity:.7}50%{width:65%;opacity:1}100%{width:90%;opacity:.7}}

/* --- Comandos: mejoras visuales sin cambiar contenido --- */
.command-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:14px}
.command-card{border:1px solid rgba(255,255,255,.10);border-radius:16px;padding:14px;background:rgba(255,255,255,.03);transition:transform .12s ease,border-color .12s ease, background .12s ease}
.command-card:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.04)}
.command-card h3{margin:0 0 6px 0;font-size:1.02rem}
.command-card p{margin:0;opacity:.9}
.table-responsive{overflow:auto;border-radius:14px;border:1px solid rgba(255,255,255,.10)}
.table-responsive table{min-width:720px}

/* --- Formularios --- */
.form{display:grid;gap:12px;margin-top:10px}
.form label{display:grid;gap:6px;font-weight:600}
.form input,.form textarea{width:100%;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.25);color:inherit}
.form input:focus,.form textarea:focus{outline:none;border-color:rgba(255,255,255,.25)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width: 720px){.form-row{grid-template-columns:1fr}}