/* AlchemyCode API · documentación pública
   Sistema de diseño derivado de design/consta-api (cobalto #2E5BFF, lima #D4F26B,
   Archivo / Inter / JetBrains Mono, base 13 px) adaptado a un sitio fluido. */
:root{
  --ink-950:#030508;--ink-900:#05070C;--ink-850:#0B1220;--ink-800:#0F172A;--ink-700:#1E293B;
  --slate-600:#475569;--slate-500:#64748B;--slate-400:#94A3B8;--slate-300:#CBD5E1;
  --slate-200:#E2E8F0;--slate-100:#F1F5F9;
  --paper:#FFFFFF;--canvas:#FAFAFA;--canvas-2:#F8FAFC;--warm:#F8FAFC;
  --line:#E2E8F0;--line-soft:#F1F5F9;
  --cobalt-700:#1E40AF;--cobalt-600:#1D4ED8;--cobalt-500:#2563EB;--cobalt-200:#BFDBFE;
  --cobalt-100:#DBEAFE;--cobalt-50:#EFF6FF;
  --lime-500:#3B82F6;--lime-400:#60A5FA;--lime-100:#DBEAFE;
  --green-600:#047857;--green-500:#10B981;--green-50:#ECFDF5;
  --amber-600:#B45309;--amber-500:#F59E0B;--amber-50:#FFFBEB;
  --red-600:#B91C1C;--red-500:#EF4444;--red-50:#FEF2F2;
  --violet-500:#7C3AED;--violet-50:#F5F3FF;
  --text:var(--ink-900);--text-2:var(--slate-500);--text-3:var(--slate-400);
  --font-display:"Inter",ui-sans-serif,system-ui,sans-serif;
  --font-sans:"Inter",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  --r-sm:6px;--r-md:8px;--r-lg:12px;--r-xl:16px;--r-full:999px;
  --sh-sm:0 1px 2px rgba(10,13,21,.06);
  --sh-md:0 8px 24px -12px rgba(10,13,21,.18);
  --sh-lg:0 24px 60px -24px rgba(10,13,21,.28);
  --header-h:57px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth}
body{font-family:var(--font-sans);font-size:13px;line-height:1.55;color:var(--text);background:var(--paper);min-height:100vh}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input{font:inherit;color:inherit}
table{border-collapse:collapse;width:100%}
svg{display:block}
::selection{background:var(--cobalt-100);color:var(--cobalt-700)}
:focus-visible{outline:2px solid var(--cobalt-500);outline-offset:2px;border-radius:4px}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--text-2)}
.tiny{font-size:11px}
.nowrap{white-space:nowrap}
.ic{width:18px;height:18px;flex:0 0 auto;display:inline-block;vertical-align:middle}
.ic-xs{width:13px;height:13px}.ic-sm{width:15px;height:15px}.ic-lg{width:21px;height:21px}

/* ---------- Header ---------- */
.hd{position:sticky;top:0;z-index:60;height:var(--header-h);background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hd-inner{max-width:1440px;margin:0 auto;height:var(--header-h);padding:0 32px;display:flex;align-items:center;gap:18px}
.brand{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.brand-logo{height:36px;width:auto;display:block}
.brand-word{font-size:15px;letter-spacing:-.02em}
.brand-word span{color:var(--cobalt-600)}
.brand-mark{display:none;width:27px;height:27px;border-radius:8px;background:linear-gradient(145deg,#3B82F6,#1D4ED8);
  display:grid;place-items:center;color:#fff;box-shadow:0 2px 6px -2px rgba(27,61,209,.5);flex:0 0 27px}
.brand-mark .ic{width:15px;height:15px}
.brand-word{font-family:var(--font-display);font-size:13.5px;font-weight:800;letter-spacing:-.02em;color:var(--ink-900)}
.brand-word span{color:var(--cobalt-600)}
.brand-tag{font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--slate-400);border:1px solid var(--line);border-radius:4px;padding:2px 5px;margin-left:2px}
.hd-nav{display:flex;align-items:center;gap:2px;margin-left:6px}
.hd-nav a{font-size:12px;color:var(--slate-500);padding:6px 10px;border-radius:6px;font-weight:500;white-space:nowrap}
.hd-nav a:hover{color:var(--ink-800);background:var(--canvas)}
.hd-nav a.on{color:var(--cobalt-600);background:var(--cobalt-50);font-weight:600}
.hd-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.hd-cta{height:31px;padding:0 12px;border-radius:7px;background:var(--cobalt-500);color:#fff;font-size:11.5px;
  font-weight:600;display:inline-flex;align-items:center;gap:6px;box-shadow:0 1px 2px rgba(36,71,232,.3)}
.hd-cta:hover{background:var(--cobalt-600)}
.hd-cta .ic{width:13px;height:13px}
.menu-btn{display:none;width:32px;height:32px;border:1px solid var(--line);border-radius:7px;place-items:center;color:var(--slate-500)}
.menu-btn .ic{width:16px;height:16px}

/* Buscador */
.search{position:relative;width:250px;flex:0 1 250px}
.search-box{height:31px;border:1px solid var(--line);border-radius:7px;background:var(--canvas-2);
  display:flex;align-items:center;gap:7px;padding:0 9px;color:var(--slate-400);font-size:11.5px}
.search-box:focus-within{border-color:var(--cobalt-200);background:#fff;box-shadow:0 0 0 3px rgba(46,91,255,.08)}
.search-box .ic{width:14px;height:14px}
.search-box input{border:0;outline:0;background:none;width:100%;font-size:11.5px;color:var(--ink-800)}
.search-box input::placeholder{color:var(--slate-400)}
.search-box kbd{font-family:var(--font-mono);font-size:9px;border:1px solid var(--line);background:#fff;
  border-radius:3px;padding:1px 4px;color:var(--slate-400)}
.search-pop{position:absolute;top:38px;left:0;right:0;background:#fff;border:1px solid var(--line);
  border-radius:9px;box-shadow:var(--sh-lg);padding:5px;display:none;max-height:60vh;overflow:auto;z-index:70;min-width:320px}
.search-pop.open{display:block}
.search-pop .sp-empty{padding:10px;font-size:11.5px;color:var(--slate-400)}
.search-pop a{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:6px;font-size:11.8px;color:var(--ink-700)}
.search-pop a:hover,.search-pop a.sel{background:var(--cobalt-50);color:var(--cobalt-700)}
.search-pop a .sp-sec{margin-left:auto;font-size:9px;color:var(--slate-400);text-transform:uppercase;letter-spacing:.06em}
.search-pop a b{font-weight:600}

/* ---------- Layout ---------- */
.shell{max-width:1440px;margin:0 auto;padding:0 32px}
.layout{display:grid;grid-template-columns:246px minmax(0,1fr) 204px;gap:46px;padding:30px 0 84px;align-items:start}
.side{position:sticky;top:calc(var(--header-h) + 22px);max-height:calc(100vh - var(--header-h) - 40px);
  overflow-y:auto;padding-right:6px;scrollbar-width:thin}
.side::-webkit-scrollbar{width:5px}
.side::-webkit-scrollbar-thumb{background:var(--slate-200);border-radius:3px}
.side .group{margin-bottom:22px}
.side .glabel{font-size:9px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--slate-400);
  margin-bottom:6px;padding-left:10px}
.side a{display:flex;align-items:center;gap:7px;font-size:11.9px;color:var(--slate-500);padding:5px 10px;
  border-left:1.5px solid transparent;line-height:1.35;border-radius:0 5px 5px 0}
.side a:hover{color:var(--ink-800);background:var(--canvas-2)}
.side a.on{color:var(--cobalt-600);border-left-color:var(--cobalt-500);
  background:linear-gradient(90deg,var(--cobalt-50),transparent);font-weight:600}
.side a .badge{margin-left:auto;font-size:8.5px;height:16px;padding:0 5px}
.doc{min-width:0;max-width:840px}
.toc{position:sticky;top:calc(var(--header-h) + 22px);font-size:11px}
.toc .label{font-size:9px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--slate-400);margin-bottom:8px}
.toc a{display:block;color:var(--slate-400);padding:3.5px 0 3.5px 11px;border-left:1px solid var(--line);line-height:1.4}
.toc a:hover{color:var(--cobalt-600)}
.toc a.on{color:var(--cobalt-600);border-left-color:var(--cobalt-500);font-weight:600}
.toc .toc-help{margin-top:22px;border:1px solid var(--line);border-radius:8px;padding:11px;background:var(--canvas-2)}
.toc .toc-help b{display:block;font-size:10.5px;margin-bottom:3px}
.toc .toc-help p{font-size:9.8px;color:var(--slate-400);line-height:1.5;margin-bottom:7px}
.toc .toc-help a{border:0;padding:0;font-size:10px;color:var(--cobalt-600);font-weight:600}

/* ---------- Tipografía de artículo ---------- */
.breadcrumb{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--slate-400);margin-bottom:12px;flex-wrap:wrap}
.breadcrumb a:hover{color:var(--cobalt-600)}
.breadcrumb .sep{color:var(--slate-200)}
h1{font-family:var(--font-display);font-size:clamp(29px,3.2vw,38px);line-height:1.08;letter-spacing:-.032em;
  font-weight:800;margin-bottom:12px;color:var(--ink-900)}
.lead{font-size:14.5px;line-height:1.65;color:var(--slate-500);max-width:700px}
.doc h2{font-family:var(--font-display);font-size:21px;letter-spacing:-.02em;font-weight:700;
  margin:40px 0 10px;scroll-margin-top:calc(var(--header-h) + 18px);color:var(--ink-900)}
.doc h3{font-size:13.5px;font-weight:650;margin:24px 0 7px;letter-spacing:-.01em;color:var(--ink-800)}
.doc p{font-size:13.4px;line-height:1.72;color:var(--slate-500);margin:10px 0}
.doc p b,.doc li b{color:var(--ink-800);font-weight:650}
.doc a.inline,.doc p a,.doc li a{color:var(--cobalt-600);text-decoration:underline;text-underline-offset:2px}
.doc a.inline:hover{color:var(--cobalt-700)}
.doc ul,.doc ol{margin:10px 0 14px 20px;font-size:13.4px;color:var(--slate-500);line-height:1.7}
.doc li{margin:4px 0}
.doc li code,.doc p code,.doc td code{font-family:var(--font-mono);font-size:.88em;background:#F1F3F7;
  border:1px solid #E3E7EE;border-radius:4px;padding:1px 5px;color:#2A3345;overflow-wrap:anywhere}
.doc hr{border:0;border-top:1px solid var(--line);margin:30px 0}
.kicker{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--cobalt-600);margin-bottom:10px}
.kicker .ic{width:12px;height:12px}
.section-intro{max-width:720px}

/* ---------- Código ---------- */
.code{background:var(--ink-950);border:1px solid #1C2434;border-radius:10px;overflow:hidden;
  color:#C6CEDB;margin:14px 0 20px;box-shadow:var(--sh-md)}
.code-head{height:34px;display:flex;align-items:center;gap:9px;padding:0 11px;background:#0B0F19;
  border-bottom:1px solid #1A2130;font-family:var(--font-mono);font-size:9.5px;color:#7C8AA3}
.code-head .dots{display:flex;gap:4px;margin-right:2px}
.code-head .dots i{width:6px;height:6px;border-radius:50%;background:#2B3548;display:block}
.code-head .dots i:first-child{background:#3B455A}
.code-lang{text-transform:uppercase;letter-spacing:.09em;font-size:9px;color:#8494AC}
.code-file{color:#4F5C73;font-size:9.5px;margin-left:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.copy-btn{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:9.5px;color:#8494AC;
  border:1px solid #263043;border-radius:4px;padding:2px 7px;background:#111725;flex:0 0 auto}
.copy-btn:hover{color:#DDE6F3;border-color:#3A4860}
.copy-btn .ic{width:11px;height:11px}
.copy-btn.copied{color:var(--lime-400);border-color:#3C4A33}
.copy-btn-light{color:var(--slate-400);background:#fff;border-color:var(--line);margin-left:auto;padding:2px 6px}
.copy-btn-light:hover{color:var(--cobalt-600);border-color:var(--cobalt-200)}
.code pre{margin:0;padding:13px 15px 15px;font-family:var(--font-mono);font-size:11.5px;
  line-height:1.7;color:#C6CEDB;tab-size:2;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}
.code pre code{font-family:inherit;white-space:inherit;background:none;border:0;padding:0;color:inherit}
.code pre::-webkit-scrollbar{height:8px}
.code pre::-webkit-scrollbar-thumb{background:#2B3548;border-radius:4px}

/* Pestañas de lenguaje */
.codetabs{margin:16px 0 22px}
.codetabs-nav{display:flex;gap:2px;overflow-x:auto;border-bottom:1px solid var(--line);padding-bottom:0;scrollbar-width:none}
.codetabs-nav::-webkit-scrollbar{display:none}
.codetab{font-size:11.2px;color:var(--slate-400);padding:7px 11px;border-bottom:2px solid transparent;
  margin-bottom:-1px;white-space:nowrap;font-weight:500;border-radius:5px 5px 0 0}
.codetab:hover{color:var(--ink-700);background:var(--canvas-2)}
.codetab.is-active{color:var(--cobalt-600);border-bottom-color:var(--cobalt-500);font-weight:650}
.codetab-panel{display:none}
.codetab-panel.is-active{display:block}
.codetab-panel>.code{margin-top:0;border-top-left-radius:0;border-top-right-radius:0;border-top:0}

/* ---------- Endpoint ---------- */
.endpoint-head{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);
  border-radius:9px;background:var(--canvas-2);margin:16px 0 18px;flex-wrap:wrap}
.endpoint-head code{font-family:var(--font-mono);font-size:12.5px;font-weight:500;color:var(--ink-800);
  overflow-wrap:anywhere;min-width:0}
.endpoint-head .ep-note{font-size:10px;color:var(--slate-400);border-left:1px solid var(--line);padding-left:10px}
.method{display:inline-flex;align-items:center;justify-content:center;height:21px;min-width:40px;padding:0 6px;
  border-radius:4px;font-family:var(--font-mono);font-size:9.5px;font-weight:700;letter-spacing:.03em;flex:0 0 auto}
.method.post{background:var(--cobalt-500);color:#fff}
.method.get{background:var(--green-50);color:var(--green-600);border:1px solid #C6EBDD}
.method.put{background:var(--amber-50);color:var(--amber-600);border:1px solid #F1DCB4}
.method.del{background:var(--red-50);color:var(--red-600);border:1px solid #F3D0CB}

/* ---------- Tablas ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:9px;margin:14px 0 22px;
  background:#fff;box-shadow:0 1px 0 rgba(10,13,21,.02)}
.doc-table{font-size:11.8px;min-width:520px}
.doc-table th{background:var(--canvas-2);font-size:9px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--slate-400);text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);
  font-weight:700;white-space:nowrap}
.doc-table td{padding:9px 12px;border-bottom:1px solid var(--line-soft);color:var(--slate-600);
  vertical-align:top;line-height:1.55}
.doc-table tr:last-child td{border-bottom:0}
.doc-table tbody tr:hover{background:#FCFCFD}
.doc-table a{color:var(--cobalt-600);font-weight:600}
.doc-table a:hover{text-decoration:underline;text-underline-offset:2px}
.doc-table td code{white-space:nowrap}
.doc-table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.pill{display:inline-flex;align-items:center;margin-left:6px;font-size:8.5px;font-weight:600;
  border-radius:3px;padding:1px 4px;background:var(--canvas);border:1px solid var(--line);color:var(--slate-400);
  vertical-align:1px;white-space:nowrap}
.pill-req{background:var(--red-50);border-color:#F3D0CB;color:var(--red-600)}

/* ---------- Callouts ---------- */
.callout{display:flex;gap:10px;padding:12px 13px;border-radius:9px;border:1px solid #DCE4FF;
  background:var(--cobalt-50);font-size:12.2px;line-height:1.6;color:#26408F;margin:16px 0 20px}
.callout .ic{width:15px;height:15px;flex:0 0 15px;margin-top:1px;color:var(--cobalt-600)}
.callout.warn{background:var(--amber-50);border-color:#F1DCB4;color:#7A4605}
.callout.warn .ic{color:var(--amber-600)}
.callout.ok{background:var(--green-50);border-color:#C9EBDD;color:#06624A}
.callout.ok .ic{color:var(--green-600)}
.callout code{background:rgba(255,255,255,.62);border-color:rgba(10,13,21,.08)}
.callout a{color:inherit;text-decoration:underline;text-underline-offset:2px;font-weight:600}

/* ---------- Tarjetas y pasos ---------- */
.card-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0 24px}
.doc-card{position:relative;border:1px solid var(--line);border-radius:10px;padding:15px 16px;background:#fff;
  display:block;transition:border-color .14s,box-shadow .14s,transform .14s}
a.doc-card:hover{border-color:#C9D3E6;box-shadow:var(--sh-md);transform:translateY(-1px)}
.card-ico{width:30px;height:30px;border-radius:8px;background:var(--cobalt-50);color:var(--cobalt-600);
  display:grid;place-items:center;margin-bottom:10px}
.card-ico .ic{width:15px;height:15px}
.doc-card b{display:block;font-size:12.4px;margin-bottom:3px;color:var(--ink-800);letter-spacing:-.01em}
.doc-card p{font-size:11.3px;color:var(--slate-400);margin:0;line-height:1.55}
.card-arrow{position:absolute;right:13px;top:15px;width:13px;height:13px;color:var(--slate-300)}
a.doc-card:hover .card-arrow{color:var(--cobalt-500)}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0 24px}
.step{display:flex;gap:11px;border:1px solid var(--line);border-radius:10px;padding:14px;background:#fff}
.step-num{width:24px;height:24px;border-radius:7px;background:var(--cobalt-500);color:#fff;
  font-family:var(--font-mono);font-size:11px;font-weight:600;display:grid;place-items:center;flex:0 0 24px}
.step b{display:block;font-size:12px;margin-bottom:3px;color:var(--ink-800)}
.step p{font-size:11.2px;color:var(--slate-400);margin:0;line-height:1.55}

/* ---------- Badges y metadatos ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;height:19px;padding:0 7px;border-radius:5px;
  font-size:10px;font-weight:600;letter-spacing:.01em;white-space:nowrap;border:1px solid transparent}
.badge .dot{width:5px;height:5px;border-radius:50%;background:currentColor;flex:0 0 auto}
.badge-ok{background:var(--green-50);color:var(--green-600);border-color:#C6EBDD}
.badge-warn{background:var(--amber-50);color:var(--amber-600);border-color:#F3DDB5}
.badge-danger{background:var(--red-50);color:var(--red-600);border-color:#F5CDC8}
.badge-info{background:var(--cobalt-50);color:var(--cobalt-700);border-color:#D9E1FF}
.badge-neutral{background:var(--canvas);color:var(--slate-500);border-color:var(--line)}
.badge-lime{background:var(--lime-100);color:#4C6300;border-color:#E2F3AC}
.badge-violet{background:var(--violet-50);color:#5836D6;border-color:#DED4FF}
.meta-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:14px 0 4px}
.meta{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;color:var(--slate-500);
  border:1px solid var(--line);background:var(--canvas-2);border-radius:6px;padding:4px 8px}
.meta .ic{width:12px;height:12px;color:var(--slate-400)}
.meta b{font-size:10.5px;color:var(--ink-700);font-weight:600}

/* ---------- Landing ---------- */
.landing{max-width:1160px;margin:0 auto;padding:0 32px}
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);
  background:
    radial-gradient(900px 380px at 12% -8%,rgba(46,91,255,.10),transparent 62%),
    radial-gradient(700px 320px at 88% 8%,rgba(212,242,107,.28),transparent 60%),
    linear-gradient(180deg,#FBFCFE,#fff)}
.hero-inner{max-width:1160px;margin:0 auto;padding:64px 32px 58px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:52px;align-items:center}
.hero-badge{display:inline-flex;align-items:center;gap:7px;font-size:10.5px;font-weight:600;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-full);padding:4px 10px 4px 5px;
  color:var(--slate-500);box-shadow:var(--sh-sm);margin-bottom:20px}
.hero-badge .tag{background:var(--cobalt-100);color:var(--cobalt-700);font-size:9px;font-weight:700;
  border-radius:99px;padding:2px 7px;letter-spacing:.03em;text-transform:uppercase}
.hero h1{font-size:clamp(36px,4.3vw,50px);line-height:1.04;letter-spacing:-.042em;margin-bottom:18px;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--cobalt-600);position:relative;white-space:nowrap}
.hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:3px;height:9px;
  background:var(--lime-400);z-index:-1;border-radius:2px}
.hero-lead{font-size:15px;line-height:1.66;color:var(--slate-500);max-width:520px;margin-bottom:24px}
.hero-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:22px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:38px;padding:0 16px;
  border-radius:8px;font-size:12.5px;font-weight:650;white-space:nowrap;transition:background .14s,border-color .14s}
.btn .ic{width:15px;height:15px}
.btn-primary{background:var(--cobalt-500);color:#fff;box-shadow:0 1px 2px rgba(36,71,232,.3),inset 0 1px 0 rgba(255,255,255,.15)}
.btn-primary:hover{background:var(--cobalt-600)}
.btn-ghost{background:#fff;border:1px solid var(--line);color:var(--ink-700);box-shadow:var(--sh-sm)}
.btn-ghost:hover{border-color:var(--slate-200);background:var(--canvas-2)}
.hero-facts{display:flex;gap:16px;flex-wrap:wrap;font-size:11px;color:var(--slate-400)}
.hero-facts span{display:inline-flex;align-items:center;gap:5px}
.hero-facts .ic{width:12px;height:12px;color:var(--green-500)}
.hero-visual{position:relative;min-width:0}
.hero-visual .code{box-shadow:0 30px 70px -34px rgba(10,13,21,.55);margin:0;border-color:#232C3E}
.hero-visual .code pre{max-height:352px}
.hero-note{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--slate-400);margin-top:10px;justify-content:flex-end}
.hero-note .ic{width:11px;height:11px}
.hero-strip{display:flex;align-items:center;gap:8px;font-size:10.5px;color:var(--slate-400);
  border-top:1px solid var(--line);background:#fff}
.hero-strip .inner{max-width:1160px;margin:0 auto;padding:12px 32px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.hero-strip b{color:var(--slate-500);font-weight:600}
.hero-strip .dot{width:6px;height:6px;border-radius:50%;background:var(--green-500)}
.section{padding:56px 0 6px}
.section-head{display:flex;align-items:flex-end;gap:16px;justify-content:space-between;margin-bottom:22px}
.section-head h2{font-family:var(--font-display);font-size:27px;letter-spacing:-.03em;font-weight:800;margin:0}
.section-head p{font-size:12.8px;color:var(--slate-500);margin:4px 0 0;max-width:560px}
.section-head .linkbtn{font-size:11.5px;font-weight:650;color:var(--cobalt-600);display:inline-flex;align-items:center;gap:5px}
.section-head .linkbtn .ic{width:13px;height:13px}
.svc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.svc{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:11px;padding:16px;
  background:#fff;transition:border-color .15s,box-shadow .15s,transform .15s;min-height:186px}
.svc:hover{border-color:#C9D3E6;box-shadow:var(--sh-md);transform:translateY(-2px)}
.svc-top{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.svc-ico{width:28px;height:28px;border-radius:7px;display:grid;place-items:center;flex:0 0 28px;
  background:var(--cobalt-50);color:var(--cobalt-600)}
.svc-ico .ic{width:14px;height:14px}
.svc-ico.green{background:var(--green-50);color:var(--green-600)}
.svc-ico.amber{background:var(--amber-50);color:var(--amber-600)}
.svc-ico.violet{background:var(--violet-50);color:#5836D6}
.svc h3{font-size:12.6px;font-weight:650;letter-spacing:-.01em;color:var(--ink-800);line-height:1.3;margin:0}
.svc p{font-size:11.2px;line-height:1.55;color:var(--slate-400);margin:0 0 12px;flex:1}
.svc-foot{display:flex;align-items:center;gap:6px;margin-top:auto;flex-wrap:wrap}
.svc-key{font-family:var(--font-mono);font-size:9px;color:var(--slate-400);background:var(--canvas);
  border:1px solid var(--line);border-radius:4px;padding:1px 4px}
.beta-band{border:1px solid var(--line);background:linear-gradient(120deg,#0A0D15,#121724 55%,#1B2233);
  border-radius:14px;padding:26px 28px;color:#fff;display:flex;align-items:center;gap:26px;margin:52px 0 10px;
  position:relative;overflow:hidden}
.beta-band::after{content:"";position:absolute;right:-60px;top:-80px;width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle,rgba(212,242,107,.32),transparent 62%)}
.beta-band .bb-main{min-width:0;flex:1}
.beta-band h2{font-family:var(--font-display);font-size:22px;letter-spacing:-.025em;margin-bottom:6px;color:#fff}
.beta-band p{font-size:12.5px;color:#A6AFBE;line-height:1.65;max-width:620px;margin:0}
.beta-band .btn-lime{background:#fff;color:var(--ink-950);flex:0 0 auto}
.beta-band .btn-lime:hover{background:var(--lime-500)}
.landing-foot{border-top:1px solid var(--line);margin-top:56px;padding:26px 0 40px;font-size:11px;color:var(--slate-400)}
.landing-foot .lf-inner{max-width:1160px;margin:0 auto;padding:0 32px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.landing-foot a:hover{color:var(--cobalt-600)}
.landing-foot .sep{color:var(--slate-200)}

/* ---------- Pie y utilidades ---------- */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink-900);color:#fff;padding:8px 12px;
  border-radius:0 0 8px 0;z-index:100;font-size:12px}
.skip-link:focus{left:0}
.site-foot{border-top:1px solid var(--line);background:var(--canvas-2);margin-top:0}
.foot-inner{max-width:1440px;margin:0 auto;padding:26px 32px;display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.foot-brand{display:flex;align-items:center;gap:9px}
.foot-logo{height:26px;width:auto;display:block}
.foot-brand .brand-mark{width:24px;height:24px;flex:0 0 24px;border-radius:7px}
.foot-brand .brand-mark .ic{width:13px;height:13px}
.foot-brand b{display:block;font-family:var(--font-display);font-size:11.5px;font-weight:700;color:var(--ink-800)}
.foot-brand span{display:block;font-size:10px;color:var(--slate-400)}
.foot-links{display:flex;gap:14px;flex-wrap:wrap;font-size:10.8px;color:var(--slate-500);margin-left:auto}
.foot-links a:hover{color:var(--cobalt-600)}
.foot-copy{width:100%;font-size:9.8px;color:var(--slate-400);border-top:1px solid var(--line);padding-top:14px}
.side-status{display:flex;align-items:center;gap:8px;padding:10px;border-top:1px solid var(--line);
  margin-top:4px;font-size:10.5px;flex-wrap:wrap}
.side-status .status-dot{font-size:10px}
.side-status a{margin-left:auto;color:var(--cobalt-600);font-weight:600;font-size:10px}

.demo-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;margin:18px 0 26px;align-items:start}
.demo-grid .code{margin:0}
.demo-head{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-400);margin-bottom:7px}
.hero-code-note{display:flex;align-items:center;gap:6px;font-size:10px;color:#8494AC;font-family:var(--font-mono);margin-top:8px}
.hero-code-note .dot{width:6px;height:6px;border-radius:50%;background:var(--green-500)}
.inline-note{font-size:11px;color:var(--slate-400);margin-top:-6px}
.timeline{display:flex;flex-direction:column;gap:0;margin:18px 0 24px;border-left:1px solid var(--line);padding-left:22px}
.tl-item{position:relative;padding:0 0 24px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:"";position:absolute;left:-27px;top:4px;width:9px;height:9px;border-radius:50%;
  background:#fff;border:2px solid var(--cobalt-500)}
.tl-item b{display:block;font-size:13px;color:var(--ink-800);margin-bottom:3px}
.tl-item p{font-size:12.2px;color:var(--slate-500);margin:0 0 8px}
.tl-item .code{margin:10px 0 0}
.checklist{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;margin:14px 0 20px;padding:0;list-style:none}
.checklist li{display:flex;gap:8px;font-size:12.2px;color:var(--slate-500);line-height:1.55;margin:0}
.checklist li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green-500);margin-top:8px;flex:0 0 6px}
@media (max-width:1020px){.demo-grid{grid-template-columns:1fr}.checklist{grid-template-columns:1fr}}

.next-prev{display:flex;gap:12px;border-top:1px solid var(--line);margin-top:44px;padding-top:18px}
.next-prev a{display:flex;flex-direction:column;gap:2px;font-size:10.5px;color:var(--slate-400);
  padding:10px 13px;border:1px solid var(--line);border-radius:8px;min-width:0;flex:1}
.next-prev a:hover{border-color:var(--cobalt-200);background:var(--cobalt-50)}
.next-prev b{font-size:12px;color:var(--ink-800)}
.next-prev .np-r{text-align:right;align-items:flex-end}
.tag-list{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}
.tag-list .tag{font-family:var(--font-mono);font-size:9.5px;border:1px solid var(--line);border-radius:4px;
  padding:2px 6px;background:var(--canvas-2);color:var(--slate-500)}
.kv{display:grid;grid-template-columns:150px 1fr;gap:8px 14px;font-size:12px;margin:14px 0 20px}
.kv dt{color:var(--slate-400);font-size:11px}
.kv dd{color:var(--ink-700);min-width:0;overflow-wrap:anywhere}
.mini-code{font-family:var(--font-mono);font-size:10.5px;background:#F1F3F7;border:1px solid #E3E7EE;
  border-radius:4px;padding:1px 5px;color:#2A3345;white-space:nowrap}
.status-table td:first-child{font-weight:600;color:var(--ink-700)}
.status-dot{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--green-600);font-weight:600}
.status-dot i{width:7px;height:7px;border-radius:50%;background:var(--green-500);box-shadow:0 0 0 3px var(--green-50)}
.status-dot.warn{color:var(--amber-600)}.status-dot.warn i{background:var(--amber-500);box-shadow:0 0 0 3px var(--amber-50)}

/* ---------- Responsive ---------- */
@media (max-width:1280px){
  .layout{grid-template-columns:236px minmax(0,1fr);gap:40px}
  .toc{display:none}
  .svc-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1020px){
  .hd-nav{display:none}
  .hd-inner{padding:0 20px;gap:10px}
  .layout{grid-template-columns:minmax(0,1fr);padding:22px 0 60px}
  .side{display:none;position:static;max-height:none;border:1px solid var(--line);border-radius:10px;
    padding:14px;margin-bottom:20px;background:var(--canvas-2)}
  body.nav-open .side{display:block}
  .doc{max-width:none}
  .menu-btn{display:grid}
  .search{width:200px;flex:0 1 200px}
  .hero-inner{grid-template-columns:minmax(0,1fr);padding:44px 24px 40px;gap:30px}
  .hero h1{font-size:clamp(32px,7vw,46px)}
  .landing,.hero-strip .inner{padding-left:24px;padding-right:24px}
  .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:1fr}
  .beta-band{flex-direction:column;align-items:flex-start;gap:16px}
}
@media (max-width:720px){
  .hd-inner{padding:0 16px}
  .hd-cta{display:none}
  .search{display:none}
  .brand-tag{display:none}
  .shell{padding:0 16px}
  .landing,.hero-inner,.hero-strip .inner{padding-left:16px;padding-right:16px}
  .svc-grid,.card-grid{grid-template-columns:1fr}
  h1{font-size:30px}
  .doc h2{font-size:19px}
  .section{padding:38px 0 4px}
  .section-head{flex-direction:column;align-items:flex-start;gap:8px}
  .section-head h2{font-size:23px}
  .next-prev{flex-direction:column}
  .code pre{font-size:10.8px}
  .kv{grid-template-columns:1fr;gap:2px 0}
  .kv dd{margin-bottom:8px}
}
@media print{
  .hd,.side,.toc,.next-prev,.copy-btn,.hd-cta,.search{display:none!important}
  .layout{display:block}
  .code{box-shadow:none}
}