/* Estilos de las páginas estáticas (/docs, /ejemplos).

   Reutiliza las mismas variables que el editor para que se lean como el mismo
   producto. El editor ocupa el viewport completo y no scrollea; estas páginas
   son documentos normales, así que aquí sí hay flujo vertical. */
:root{
  --bg:#111213; --panel:#1b1d1f; --panel2:#222527; --line:#2e3134;
  --text:#e8e6e1; --muted:#9a978f; --accent:#d08b5b; --accent2:#3aa7e8;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  background:var(--bg); color:var(--text);
  font:15px/1.65 "Segoe UI", system-ui, sans-serif;
  -webkit-text-size-adjust:100%;
}
.wrap{max-width:820px; margin:0 auto; padding:0 22px 90px;}

/* ---- barra superior ---- */
.topbar{
  border-bottom:1px solid var(--line); background:var(--panel);
  position:sticky; top:0; z-index:10;
}
.topbar .inner{
  max-width:820px; margin:0 auto; padding:11px 22px;
  display:flex; align-items:center; gap:18px;
}
.logo{
  font-family:Georgia,serif; font-size:19px; letter-spacing:.3px;
  color:var(--text); text-decoration:none; display:flex; align-items:baseline; gap:7px;
}
.logo b{color:var(--accent); font-weight:normal;}
.logo .dots span{
  display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--accent); margin-left:3px; animation:flow 1.6s infinite;
}
.logo .dots span:nth-child(2){animation-delay:.25s; opacity:.65;}
.logo .dots span:nth-child(3){animation-delay:.5s; opacity:.35;}
@keyframes flow{0%,100%{transform:translateY(0);}50%{transform:translateY(-3px);}}
@media (prefers-reduced-motion: reduce){ .logo .dots span{animation:none;} }
.topbar nav{display:flex; gap:16px; margin-left:auto; flex-wrap:wrap;}
.topbar nav a{
  color:var(--muted); text-decoration:none; font-size:13px;
  border-bottom:1px solid transparent; padding-bottom:1px;
}
.topbar nav a:hover, .topbar nav a[aria-current]{color:var(--accent); border-bottom-color:var(--accent);}

/* ---- tipografía del documento ---- */
h1{
  font-family:Georgia,serif; font-weight:normal; font-size:34px; line-height:1.25;
  margin:46px 0 14px; letter-spacing:-.2px;
}
h2{
  font-family:Georgia,serif; font-weight:normal; font-size:24px;
  margin:44px 0 12px; padding-top:14px; border-top:1px solid var(--line);
}
h3{font-size:15px; text-transform:uppercase; letter-spacing:1.1px; color:var(--muted); margin:26px 0 8px;}
p{margin:0 0 14px; color:#d5d2cb;}
.lead{font-size:17px; color:var(--text); margin-bottom:22px;}
ul,ol{margin:0 0 16px 22px;}
li{margin-bottom:7px; color:#d5d2cb;}
li::marker{color:var(--accent);}
a{color:var(--accent2);}
a:hover{color:var(--accent);}
strong,b{color:var(--text); font-weight:600;}
code{
  font:13px/1.5 "Cascadia Code", Consolas, "Courier New", monospace;
  background:var(--panel2); border:1px solid var(--line); border-radius:5px;
  padding:1px 5px; color:#e8c9a8;
}
pre{
  background:var(--panel); border:1px solid var(--line); border-radius:9px;
  padding:14px 16px; overflow-x:auto; margin:0 0 18px;
}
pre code{background:none; border:none; padding:0; color:#cfd4d8;}
kbd{
  background:var(--panel2); border:1px solid var(--line); border-radius:4px;
  padding:1px 5px; font-size:12px; font-family:inherit;
}
hr{border:none; border-top:1px solid var(--line); margin:36px 0;}
table{width:100%; border-collapse:collapse; margin:0 0 18px; font-size:14px; display:block; overflow-x:auto;}
th,td{text-align:left; padding:8px 11px; border-bottom:1px solid var(--line); vertical-align:top;}
th{color:var(--muted); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.7px;}
td code{white-space:nowrap;}

/* ---- botón de llamada a la acción ---- */
.btn{
  display:inline-block; background:var(--accent); color:#16110c; font-weight:600;
  border:1px solid var(--accent); border-radius:7px; padding:8px 16px;
  text-decoration:none; font-size:14px;
}
.btn:hover{filter:brightness(1.08); color:#16110c;}
.btn.ghost{background:var(--panel2); border-color:var(--line); color:var(--text); font-weight:normal;}
.btn.ghost:hover{border-color:var(--accent); color:var(--accent); filter:none;}

/* ---- nota destacada ---- */
.note{
  background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:0 9px 9px 0; padding:13px 16px; margin:0 0 20px;
}
.note p:last-child{margin-bottom:0;}

/* ---- galería de ejemplos ---- */
.gallery{display:flex; flex-direction:column; gap:14px; margin:0 0 20px;}
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:11px;
  overflow:hidden; transition:border-color .15s;
}
.card:hover{border-color:#4a4e52;}
.card .preview{
  display:block; background:#161616; border-bottom:1px solid var(--line);
  padding:14px; text-align:center;
}
.card .preview img{
  display:block; width:100%; height:auto; max-height:280px;
  object-fit:contain; margin:0 auto;
}
.card .body{padding:16px 18px 18px;}
.card h2{margin:0 0 8px; padding:0; border:none; font-size:21px;}
.card p{font-size:14px; margin-bottom:14px;}
.card .actions{display:flex; gap:9px; flex-wrap:wrap; align-items:center;}
.card .actions .meta{color:var(--muted); font-size:12px; margin-left:auto;}

/* ---- pie ---- */
.pagefoot{
  border-top:1px solid var(--line); margin-top:56px; padding:20px 0 0;
  color:var(--muted); font-size:12.5px;
}
.pagefoot a{color:var(--muted);}
.pagefoot a:hover{color:var(--accent);}

@media (max-width: 620px){
  h1{font-size:27px; margin-top:30px;}
  h2{font-size:21px;}
  body{font-size:14.5px;}
  .wrap{padding:0 16px 60px;}
  .topbar .inner{padding:10px 16px; gap:12px;}
  .topbar nav{gap:12px;}
}