@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/demos/ramecode-72/fonts/3y9K6as8bTXq_nANBjzKo3IeZx8z6up5BeSl9D4dj_x9PpZBMlGIInE.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/demos/ramecode-72/fonts/3y9K6as8bTXq_nANBjzKo3IeZx8z6up5BeSl9D4dj_x9PpZBMlGIInE.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/demos/ramecode-72/fonts/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxeKYY.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/demos/ramecode-72/fonts/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxeKYY.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/demos/ramecode-72/fonts/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxeKYY.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/demos/ramecode-72/fonts/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxDcwg.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/demos/ramecode-72/fonts/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxDcwg.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* Layout: ficha técnica de un instrumento. Cabecera + panel de "registro de versión" al lado del titular,
   y secciones en columna única con un margen izquierdo para etiquetas, como un cuaderno de laboratorio. */
:root {
  --bg: #f0f2ee; --surface: #fbfcfa; --ink: #121b18; --muted: #4f5d57; --line: #cfd6cf;
  --accent: #0b6560; --on-accent: #ffffff; --soft: #dfece8;
  --warn: #9a4510; --warn-bg: #f9ecdf; --plan: #3a4a63; --plan-bg: #e5e9f1;
  --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0d1412; --surface: #141d1a; --ink: #e5ebe7; --muted: #9aa9a1; --line: #263430;
  --accent: #52c4b8; --on-accent: #06201d; --soft: #123029;
  --warn: #f2a76c; --warn-bg: #2b1d11; --plan: #a9b8d6; --plan-bg: #1b2231; color-scheme: dark; } }
:root[data-theme="dark"] {
  --bg: #0d1412; --surface: #141d1a; --ink: #e5ebe7; --muted: #9aa9a1; --line: #263430;
  --accent: #52c4b8; --on-accent: #06201d; --soft: #123029;
  --warn: #f2a76c; --warn-bg: #2b1d11; --plan: #a9b8d6; --plan-bg: #1b2231; color-scheme: dark; }
* { box-sizing: border-box; }
body { background: var(--bg); color: var(--ink); font: 400 16px/1.6 var(--body); }
.w { max-width: 1080px; margin: 0 auto; padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px)); }
a { color: var(--accent); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
[data-l] { display: none; }
html[data-lang="en"] [data-l="en"], html[data-lang="es"] [data-l="es"] { display: inline; }
html[data-lang="en"] p [data-l="en"], html[data-lang="es"] p [data-l="es"] { display: inline; }
h1, h2, h3 { font-family: var(--display); text-wrap: balance; line-height: 1.12; margin: 0; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); font-weight: 700; letter-spacing: -.01em; }
h3 { font-size: 1.05rem; font-weight: 700; }
.eyebrow { font: 500 .75rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
header.top { border-bottom: 1px solid var(--line); }
header.top .w { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 14px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; font: 700 1.1rem var(--display); color: var(--ink); text-decoration: none; }
.brand i { width: 28px; height: 28px; border-radius: 7px; background: var(--ink); color: var(--bg); display: grid; place-items: center; font: 500 .85rem var(--mono); font-style: normal; }
nav.m { display: flex; gap: 6px 20px; flex-wrap: wrap; align-items: center; font-size: .92rem; }
nav.m a { color: var(--muted); text-decoration: none; }
nav.m a:hover { color: var(--ink); }
.lang { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.lang button { font: 500 .78rem var(--mono); padding: 5px 10px; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.lang button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.hero .w { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 48px; padding-block: 72px 64px; align-items: start; }
.hero h1 { font-size: clamp(2.6rem, 6.4vw, 4.6rem); font-weight: 700; letter-spacing: -.025em; margin-block: 16px 18px; }
.hero .lead { font-size: 1.15rem; max-width: 34em; color: var(--muted); margin: 0 0 28px; }
.btns { display: flex; gap: 12px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 8px; border: 1px solid var(--ink); font: 600 .95rem var(--body); text-decoration: none; color: var(--ink); background: transparent; }
.btn.p { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn:hover { filter: brightness(1.08); }
.note { font-size: .85rem; color: var(--muted); margin-top: 14px; }
.ledger { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 20px; font: 400 .85rem/1.5 var(--mono); }
.ledger dl { margin: 12px 0 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; }
.ledger dt { color: var(--muted); }
.ledger dd { margin: 0; overflow-wrap: anywhere; }
.ledger .head { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-right: 6px; }
section.s { border-top: 1px solid var(--line); }
section.s .w { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 32px 48px; padding-block: 64px; }
section.s .side p { margin: 12px 0 0; font-size: .9rem; color: var(--muted); }
.grid { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 28px 32px; }
.grid li p { margin: 6px 0 0; color: var(--muted); font-size: .95rem; }
.grid li { border-top: 2px solid var(--ink); padding-top: 12px; }
.profs { margin-top: 40px; display: grid; gap: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface); }
.prof { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; padding: 14px 18px; }
.prof + .prof { border-top: 1px solid var(--line); }
.prof b { font-family: var(--mono); font-weight: 500; font-size: .9rem; }
.road { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 14px; }
.rd { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; display: grid; gap: 6px; }
.rd p { margin: 0; color: var(--muted); font-size: .95rem; }
.pill { justify-self: start; font: 500 .72rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 5px 9px; border-radius: 99px; }
.pill.planned { background: var(--plan-bg); color: var(--plan); }
.pill.testing { background: var(--warn-bg); color: var(--warn); }
.pill.out { background: var(--soft); color: var(--accent); }
.rd.testing { border-style: dashed; }
.legend { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; align-items: center; font-size: .9rem; color: var(--muted); }
.tl { list-style: none; margin: 24px 0 0; padding: 0; display: grid; }
.tl li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 20px; padding: 14px 0; border-top: 1px solid var(--line); }
.tl time { font: 500 .85rem var(--mono); color: var(--muted); padding-top: 3px; }
.tl p { margin: 4px 0 0; color: var(--muted); font-size: .95rem; }
.rel { margin-top: 40px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.rel .r { display: grid; grid-template-columns: 90px 120px minmax(0, 1fr) auto; gap: 16px; padding: 14px 18px; align-items: center; }
.rel .r + .r { border-top: 1px solid var(--line); }
.rel .r.slot { border-top-style: dashed; color: var(--muted); }
.rel .r b { font-family: var(--mono); font-weight: 500; }
.demos { margin-top: 24px; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.demo { border: 1px dashed var(--line); border-radius: 10px; padding: 20px; background: var(--surface); }
.demo .fr { aspect-ratio: 16 / 9; max-width: 100%; border-radius: 6px; background: var(--soft); display: grid; place-items: center; font: 500 .8rem var(--mono); color: var(--muted); margin-bottom: 14px; text-align: center; padding: 8px; }
.demo p { margin: 6px 0 0; color: var(--muted); font-size: .9rem; }
pre.cmd { margin: 12px 0 0; background: var(--ink); color: var(--bg); border-radius: 8px; padding: 12px 14px; font: 400 .85rem var(--mono); overflow-x: auto; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
pre.cmd button { font: 500 .75rem var(--mono); border: 1px solid currentColor; background: transparent; color: inherit; padding: 4px 10px; border-radius: 5px; cursor: pointer; flex: none; }
ul.lim { margin: 20px 0 0; padding-left: 1.1em; color: var(--muted); }
ul.lim li { margin-block: 6px; }
.prov { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 20px 22px; margin-top: 24px; }
.prov p { margin: 0 0 10px; }
.prov p:last-child { margin: 0; }
footer { border-top: 1px solid var(--line); }
footer .w { padding-block: 32px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; font-size: .88rem; color: var(--muted); }
footer a { color: var(--muted); }
@media (max-width: 860px) {
  .hero .w { grid-template-columns: minmax(0, 1fr); padding-block: 44px 40px; gap: 32px; }
  section.s .w { grid-template-columns: minmax(0, 1fr); padding-block: 44px; gap: 12px; }
  .rel .r { grid-template-columns: minmax(0, 1fr) auto; }
  .rel .r > :nth-child(2), .rel .r > :nth-child(3) { grid-column: 1 / -1; }
  .tl li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .prof { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
@media (prefers-reduced-motion: no-preference) { .btn { transition: filter .15s; } }

.lang a{font:500 .78rem var(--mono);padding:5px 10px;color:var(--muted);text-decoration:none;display:inline-block}
.lang a[aria-current]{background:var(--ink);color:var(--bg)}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:8px;background:var(--ink);color:var(--bg);padding:8px 12px;z-index:20}
footer .legal{display:flex;flex-wrap:wrap;gap:6px 20px;width:100%;padding-top:14px;border-top:1px solid var(--line)}
footer .linkbtn{font:inherit;color:var(--muted);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline}
.legal-main{max-width:820px;margin:0 auto;padding:56px max(16px,env(safe-area-inset-left,0px)) 72px}
.legal-main h1{font-size:clamp(2rem,4.4vw,3rem);letter-spacing:-.02em;margin-bottom:24px}
.legal-body{color:var(--ink)}.legal-body h2{font-size:1.35rem;margin:32px 0 10px}.legal-body h3{margin:22px 0 8px}
.legal-body p,.legal-body li{max-width:68ch}.legal-body table{display:block;overflow-x:auto;border-collapse:collapse}
.legal-body th,.legal-body td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}