/* JC Inventory site stylesheet, shared by index.html (the landing) and manual.html. Both link it
   right after cookie-notice.css, so these rules come later in the cascade.
   legal.css copies the :root tokens below; test/design.test.mjs keeps the copies in sync. */
:root {
  /* Design plan
     Color: light, like the desktop app's light theme (frontend/src/index.css). White page, #fafaf9 bands,
     #e7e5e4 lines, stone text. Green is the app's teal, never neon: teal-700 (--accent) for buttons and
     links, because white text passes AA on it and reaches only about 3.7:1 on the brand teal; teal-600
     (--brand) for icons, the logo tile and large display accents; teal-50/100 for soft panels. Tints,
     the scene's dot grid and hover lines are the brand teal at three opacities (--glow-soft, --glow,
     --line-strong). Every color in a rule is a token; test/design.test.mjs keeps it so and checks AA
     contrast from these values.
     Effects: none for decoration. No pointer-driven effects, no looping animation, no glows; surfaces
     are flat tokens. Gradients appear only where they draw the hero sale scene (.scene, .sc-*), plus
     the hairline at the top of .band.alt; test/design.test.mjs enforces both.
     Type: the app's system font stack (frontend/src/index.css), so the screen recreations read like the app;
     no web font. Four weights only: display 800 with tight tracking at poster sizes, labels and buttons 700,
     text 400/600; mono for codes.
     Layout: one column up to 1200px with the gutter set once on .wrap; grids collapse below 760px.
     Motion: transform and opacity only, paused off-screen and in hidden tabs, off under reduced motion. */
  color-scheme: light;
  --bg: #ffffff;
  --bg-2: #fafaf9;
  --bg-3: #f0fdfa;
  --surface: #ffffff;
  --surface-2: #fafaf9;
  --ink: #1c1917;
  --soft: #57534e;
  --muted: #78716c;
  --line: #e7e5e4;
  --line-strong: rgba(13, 148, 136, .45);
  --brand: #0d9488;
  --brand-2: #0f766e;
  --accent: #0f766e;
  --accent-2: #115e59;
  --on-accent: #ffffff;
  --glow: rgba(13, 148, 136, .22);
  --glow-soft: rgba(13, 148, 136, .08);
  --hero-teal: #ccfbf1;
  --shadow: rgba(28, 25, 23, .14);
  --warn: #b45309;
  --warn-soft: #fffbeb;
  --focus: #0f766e;
  --glyph-bg: #0d9488;
  --glyph-ink: #ffffff;

  /* App UI tokens mirrored from frontend/src/index.css (light theme); used only by the screen recreations. */
  --ui-bg: #fafaf9;
  --ui-card: #ffffff;
  --ui-ink: #1c1917;
  --ui-muted: #78716c;
  --ui-line: #e7e5e4;
  --ui-soft: #f5f5f4;
  --ui-primary: #0d9488;
  --ui-on-primary: #ffffff;
  --ui-accent: #ccfbf1;
  --ui-accent-ink: #0f766e;
  --ui-side: #ffffff;
  --ui-side-ink: #57534e;
  --ui-side-on: #f5f5f4;
  --ui-side-on-ink: #0f766e;
  --ui-ok-soft: #dcfce7;
  --ui-ok: #15803d;
  --ui-warn-soft: #fef3c7;
  --ui-warn: #b45309;
  --ui-bad-soft: #fee2e2;
  --ui-bad: #b91c1c;
  --ui-chrome: #f5f5f4;
  --ui-dot: #d6d3d1;
  --ui-frame: var(--line);
  --ui-pos-bar: #0f766e;
  --ui-pos-ink: #ffffff;
  --ui-pos-chip: rgba(255, 255, 255, .2);
  --ui-shadow: rgba(0, 0, 0, .1);

  /* Hero scene hardware (printer, cash drawer): stone, the app's neutrals. Laser: the app's dark destructive red. */
  --hw-slot: #1c1917;
  --hw-base: #292524;
  --hw-top: #44403c;
  --hw-led: #57534e;
  --laser: #ef4444;

  --font-display: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-text: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --gutter: clamp(16px, 4vw, 40px);
  --maxw: 1200px;

  /* Corner radii: the app's scale (frontend/src/index.css: --radius 0.625rem and its @theme offsets),
     plus Tailwind's default rounded-xs for hairline bars. Large cards and panels use 2xl, like the app's Card. */
  --radius-xs: 2px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-2xl: 18px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; background: var(--bg); }
@supports (interpolate-size: allow-keywords) { :root { interpolate-size: allow-keywords; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1rem/1.6 var(--font-text);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); text-wrap: balance; }
p { margin: 0; max-width: 65ch; }
ul, ol { margin: 0; padding: 0; }
figure { margin: 0; }
a { color: var(--accent); text-underline-offset: .18em; }
code, kbd { font-family: var(--font-mono); font-size: .88em; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: var(--radius-sm); }
.skip { position: absolute; left: 16px; top: -100px; z-index: 100; background: var(--accent); color: var(--on-accent); padding: 10px 14px; border-radius: var(--radius-md); font-weight: 700; }
.skip:focus { top: 12px; }
.num { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Motion switches: reduced motion and the user's pause button stop every animation. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after,
.is-paused, .is-paused *, .is-paused *::before, .is-paused *::after { animation-play-state: paused !important; }

/* ---------- Layout ---------- */
.wrap {
  width: 100%;
  max-width: calc(var(--maxw) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
}
.band { position: relative; padding-block: clamp(64px, 9vw, 128px); }
.band.alt { background: var(--bg-2); }
.band.alt::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); }
.stack { display: flex; flex-direction: column; gap: 16px; }
.sec-head { display: flex; flex-direction: column; gap: 16px; margin-bottom: clamp(32px, 5vw, 64px); max-width: 860px; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: var(--radius-xs); background: var(--accent); }
h2 { font-size: clamp(2.2rem, 1.1rem + 4.2vw, 4.6rem); line-height: .98; letter-spacing: -.045em; font-weight: 800; }
h3 { font-size: 1.16rem; line-height: 1.3; letter-spacing: -.012em; font-weight: 700; }
.lead { font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); color: var(--soft); }
.muted { color: var(--muted); }
.small { font-size: .92rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  backdrop-filter: saturate(1.5) blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; gap: 12px 16px; min-height: 66px; }
.logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.08rem; letter-spacing: -.02em; color: var(--ink); text-decoration: none; white-space: nowrap; }
.glyph { flex: none; width: 34px; height: 34px; border-radius: var(--radius-lg); background: var(--glyph-bg); display: grid; place-items: center; }
.glyph svg { width: 20px; height: 20px; stroke: var(--glyph-ink); fill: none; stroke-width: 2; stroke-linejoin: round; }
.logo:hover .glyph svg { animation: wobble .6s var(--ease-spring); }
@keyframes wobble { 30% { transform: rotate(-12deg) scale(1.1); } 60% { transform: rotate(8deg); } }
.site-nav ul { display: flex; gap: 2px; list-style: none; }
.site-nav a { position: relative; display: block; padding: 8px 10px; border-radius: var(--radius-md); color: var(--soft); font-size: .92rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.site-nav a::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 4px; height: 2px; border-radius: var(--radius-xs); background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease-out); }
.site-nav a:hover { color: var(--ink); }
.site-nav a:hover::after { transform: scaleX(1); }
.site-nav a[aria-current="page"] { color: var(--ink); }
.site-nav a[aria-current="page"]::after { transform: scaleX(1); }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.nav-toggle { display: none; width: 42px; height: 42px; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface); color: var(--ink); align-items: center; justify-content: center; cursor: pointer; }
.nav-toggle svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
@media (max-width: 1100px) {
  .site-header .wrap { flex-wrap: wrap; }
  .site-nav { order: 3; width: 100%; overflow-x: auto; padding-bottom: 8px; }
  .site-nav ul { width: max-content; }
  .js .nav-toggle { display: inline-flex; }
  .js .site-nav { display: none; overflow: visible; }
  .js .site-nav[data-open] { display: block; }
  .js .site-nav ul { flex-direction: column; width: auto; padding-block: 4px 12px; }
  .js .site-nav a { padding: 12px 10px; font-size: 1.05rem; }
}

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 12px; padding: 13px 20px; border-radius: var(--radius-xl); font-weight: 700; font-size: 1rem; line-height: 1.2; text-decoration: none; border: 1px solid transparent; cursor: pointer; font-family: inherit; transition: background-color .2s ease, border-color .2s ease; }
.btn svg { flex: none; width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn small { display: block; font-weight: 400; font-size: .8rem; opacity: .88; margin-top: 2px; }
.btn-sm { padding: 9px 14px; font-size: .92rem; border-radius: var(--radius-lg); }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-2); }
.btn-line { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn-line:hover { border-color: var(--accent); }
.btn-quiet { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn-quiet:hover { border-color: var(--accent); }

/* ---------- Hero ---------- */
/* A flat white band: the sale scene is the hero's only illustration. */
.hero {
  overflow: hidden;
  background: var(--bg);
  padding-block: clamp(36px, 5vw, 72px) clamp(44px, 6vw, 88px);
}
.hero-grid { display: grid; gap: clamp(36px, 4vw, 64px); align-items: center; }
.hero-copy { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; color: var(--accent); border: 1px solid var(--line); background: var(--surface); padding: 6px 14px; border-radius: 999px; font-size: .84rem; font-weight: 600; }
.kinetic { font-size: clamp(3rem, 1.2rem + 6vw, 6.6rem); line-height: .92; letter-spacing: -.055em; font-weight: 800; }
.kinetic .w { display: inline-block; animation: rise .9s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 70ms); transition: transform .35s var(--ease-spring); }
.kinetic:hover .w { transform: translateY(-.04em); }
.kinetic:hover .w:nth-child(odd) { transform: translateY(.03em) rotate(-1deg); }
@keyframes rise { from { transform: translateY(.26em) rotate(3deg); } to { transform: none; } }
.kinetic em { position: relative; display: inline-block; font-style: normal; color: var(--brand); }
.kinetic em svg { position: absolute; left: -2%; bottom: -.12em; width: 104%; height: .24em; overflow: visible; }
.kinetic em path { fill: none; stroke: var(--brand); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; animation: draw 1.1s .55s var(--ease-out) both; }
@keyframes draw { from { stroke-dashoffset: 1; } }
.hero .sub { font-size: clamp(1.06rem, 1rem + .4vw, 1.28rem); color: var(--soft); }
.hero .sub b { color: var(--ink); font-weight: 700; }
.dl-row { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-note { font-size: .93rem; color: var(--soft); }
.facts { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; font-size: .88rem; color: var(--soft); }
.facts li { display: inline-flex; align-items: center; gap: 8px; }
.facts li::before { content: ""; width: 6px; height: 6px; border-radius: var(--radius-xs); background: var(--accent); }
.chips { margin-top: clamp(36px, 5vw, 60px); display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); list-style: none; }
.chip { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: var(--radius-xl); background: var(--surface); border: 1px solid var(--line); transition: transform .3s var(--ease-out), border-color .3s ease; }
.chip:hover { transform: translateY(-3px); border-color: var(--line-strong); }
.chip i { flex: none; width: 40px; height: 40px; border-radius: var(--radius-lg); background: var(--glyph-bg); display: grid; place-items: center; }
.chip svg { width: 20px; height: 20px; stroke: var(--glyph-ink); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chip:hover svg { animation: wobble .6s var(--ease-spring); }
.chip b { display: block; font-size: .98rem; }
.chip span { display: block; font-size: .84rem; color: var(--soft); }
@media (min-width: 1040px) {
  /* The headline spans both columns; copy and the sale scene sit side by side below it. */
  .hero-grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); grid-template-rows: repeat(6, auto) 1fr; column-gap: 56px; row-gap: 22px; align-items: start; }
  .hero-copy { display: contents; }
  .hero-copy > .pill, .hero-copy > h1 { grid-column: 1 / -1; }
  .hero-copy > .pill { justify-self: start; }
  .hero-copy > :not(.pill):not(h1) { grid-column: 1; }
  .hero-copy > h1 { margin-bottom: 18px; }
  .scene-fig { grid-column: 2; grid-row: 3 / -1; }
  .kinetic { font-size: clamp(4rem, 1rem + 6.4vw, 7.6rem); }
}

/* ---------- Hero sale scene (state set by the script; the markup holds the finished sale) ---------- */
.scene-fig { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.scene-box { container-type: inline-size; width: 100%; }
.scene {
  position: relative; overflow: hidden; cursor: pointer;
  font-size: calc(100cqi / 60); width: 100%; height: 42em;
  border-radius: 1.6em; border: 1px solid var(--line);
  background:
    radial-gradient(var(--glow) 1px, transparent 1.2px) 0 0 / 2.2em 2.2em,
    linear-gradient(180deg, var(--bg-3), var(--bg-2) 70%);
  box-shadow: 0 3em 6em -3em var(--shadow), inset 0 1px 0 var(--surface-2);
  font-family: var(--font-text); line-height: 1.3; font-variant-numeric: tabular-nums;
  -webkit-user-select: none; user-select: none;
}
.sc-counter { position: absolute; left: 0; right: 0; top: 30em; bottom: 0; background: linear-gradient(180deg, var(--hero-teal), var(--bg-3)); border-top: .25em solid var(--line-strong); }
.sc-pos { position: absolute; left: 1.6em; top: 1.6em; width: 31em; height: 22.6em; border-radius: 1em; background: var(--ui-card); color: var(--ui-ink); overflow: hidden; box-shadow: 0 0 0 .1em var(--line), 0 1.6em 3em -1.4em var(--shadow); display: flex; flex-direction: column; }
.sp-bar { flex: none; height: 3em; display: flex; align-items: center; gap: .8em; padding-inline: 1.1em; background: var(--ui-pos-bar); color: var(--ui-pos-ink); font-size: 1em; }
.sp-bar b { font-size: .95em; font-weight: 600; }
.sp-bar span { font-size: .75em; opacity: .8; }
.sp-scan { margin-left: auto; display: inline-flex; align-items: center; gap: .45em; }
.sp-scan::before { content: ""; width: .6em; height: .6em; border-radius: 50%; background: var(--ui-accent); box-shadow: 0 0 .6em var(--ui-accent); }
.sp-rows { list-style: none; flex: 1; padding: .7em 1.1em 0; display: flex; flex-direction: column; gap: .2em; }
.sp-rows li { display: grid; grid-template-columns: minmax(0, 1fr) 4.5em 6.5em; gap: .6em; align-items: center; padding: .7em .2em; border-bottom: 1px solid var(--ui-line); font-size: 1.02em; will-change: transform, opacity; }
.sp-rows li span:nth-child(2) { color: var(--ui-muted); text-align: center; }
.sp-rows li span:nth-child(3) { text-align: right; font-weight: 600; }
.sp-total { display: flex; justify-content: space-between; align-items: baseline; padding: .8em 1.3em .5em; font-size: 1em; }
.sp-total span { color: var(--ui-muted); font-size: .9em; }
.sp-total b { font-size: 1.7em; font-weight: 800; letter-spacing: -.02em; }
.sp-pay { display: flex; align-items: center; gap: .6em; padding: .4em 1.3em 1.2em; }
.sp-pay span { font-size: .82em; padding: .45em .9em; border-radius: .5em; border: 1px solid var(--ui-line); }
.sp-pay .on { background: var(--ui-accent); color: var(--ui-accent-ink); border-color: transparent; font-weight: 600; }
.sp-cobrar { margin-left: auto; background: var(--ui-primary) !important; color: var(--ui-on-primary); border: 0 !important; font-weight: 700; padding: .6em 2.2em !important; font-size: .95em !important; will-change: transform; }
.sc-chart { position: absolute; right: 1.6em; top: 1.6em; width: 23.6em; height: 12.6em; border-radius: 1em; background: var(--ui-card); color: var(--ui-ink); padding: 1em 1.1em .8em; box-shadow: 0 0 0 .1em var(--line), 0 1.4em 3em -1.4em var(--shadow); display: flex; flex-direction: column; gap: .3em; }
.sc-chart .t { font-size: .8em; color: var(--ui-muted); }
.sc-chart b { font-size: 1.35em; font-weight: 800; letter-spacing: -.02em; }
.sc-bars { flex: 1; display: flex; align-items: flex-end; gap: .45em; border-bottom: 1px solid var(--ui-line); }
.sc-bars i { flex: 1; height: var(--h); background: var(--ui-primary); border-radius: .3em .3em 0 0; transform-origin: bottom; will-change: transform; }
.sc-bars i:last-child { background: var(--accent); box-shadow: 0 0 1em var(--glow); }
.sc-printer { position: absolute; right: 3.6em; top: 15.6em; width: 15em; height: 15em; }
.sc-paper-clip { position: absolute; left: 2.2em; right: 2.2em; bottom: 4.6em; height: 10.6em; overflow: hidden; }
.sc-paper { position: absolute; inset: 0; background: var(--ui-card); color: var(--ui-ink); padding: .8em .9em; display: flex; flex-direction: column; gap: .32em; font-family: var(--font-mono); font-size: .62em; box-shadow: inset 0 0 0 1px var(--line); will-change: transform; }
.sc-paper::before { content: ""; position: absolute; left: 0; right: 0; top: -.5em; height: .6em; background: radial-gradient(circle at .35em 0, transparent .36em, var(--ui-card) .38em) 0 0 / .7em .6em repeat-x; }
.sc-paper b { text-align: center; font-size: 1.1em; }
.sc-paper span { display: flex; justify-content: space-between; }
.sc-paper hr { border: 0; border-top: 1px dashed var(--ui-muted); margin: .2em 0; width: 100%; }
.sc-paper .end { text-align: center; color: var(--ui-muted); display: block; }
.sc-printer-body { position: absolute; left: 0; right: 0; bottom: 0; height: 4.8em; border-radius: 1em; background: linear-gradient(180deg, var(--hw-top), var(--hw-base)); box-shadow: inset 0 .3em 0 var(--surface-2); }
.sc-printer-body::before { content: ""; position: absolute; left: 1.8em; right: 1.8em; top: .4em; height: .5em; border-radius: .3em; background: var(--hw-slot); }
.sc-led { position: absolute; right: 1.2em; bottom: 1.2em; width: .8em; height: .8em; border-radius: 50%; background: var(--hw-led); }
.sc-led.on { background: var(--ui-accent); box-shadow: 0 0 .8em var(--brand); }
.sc-drawer { position: absolute; right: 1.8em; top: 31.4em; width: 19em; height: 7.4em; }
.sc-drawer-tray { position: absolute; left: .8em; right: .8em; top: .6em; height: 5.2em; border-radius: .5em; background: var(--hw-slot); display: grid; grid-template-columns: repeat(4, 1fr); gap: .3em; padding: .4em; will-change: transform; }
.sc-drawer-tray i { border-radius: .25em; background: var(--hw-base); position: relative; overflow: hidden; }
.sc-drawer-tray i::after { content: ""; position: absolute; left: .25em; right: .25em; bottom: .25em; height: 1.2em; border-radius: .15em; background: var(--brand); opacity: .75; }
.sc-drawer-tray i:nth-child(2)::after { background: var(--ui-accent); height: 1.6em; }
.sc-drawer-tray i:nth-child(3)::after { background: var(--brand-2); }
.sc-drawer-tray i:nth-child(4)::after { background: var(--ui-dot); height: .8em; border-radius: 50%; }
.sc-drawer-body { position: absolute; left: 0; right: 0; top: 0; height: 3.6em; border-radius: .7em; background: linear-gradient(180deg, var(--hw-top), var(--hw-base)); box-shadow: 0 .3em 0 var(--hw-slot); z-index: 1; }
.sc-drawer-body::after { content: ""; position: absolute; left: 45%; top: 1.4em; width: 10%; height: .5em; border-radius: .3em; background: var(--ui-muted); }
.sc-scanner { position: absolute; left: 14.4em; top: 24.4em; width: 6em; height: 6em; z-index: 3; }
.sc-scanner svg { width: 100%; height: 100%; transform: rotate(90deg); }
.sc-scanner path { fill: var(--brand-2); stroke: var(--accent-2); }
.sc-scanner rect { fill: var(--ui-accent); }
.sc-beam { position: absolute; left: 14.5em; top: 28.6em; width: 8em; height: 3.2em; z-index: 2; background: linear-gradient(180deg, var(--line-strong), transparent); clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%); opacity: 0; will-change: opacity; }
.sc-item { position: absolute; left: 12em; top: 31.6em; width: 13em; height: 8.6em; border-radius: .8em; background: var(--ui-card); color: var(--ui-ink); padding: .8em .9em; display: flex; flex-direction: column; gap: .3em; box-shadow: 0 1em 2em -1em var(--shadow); opacity: 0; will-change: transform, opacity; z-index: 2; }
.sc-item b { font-size: .95em; line-height: 1.15; }
.sc-item small { font-size: .72em; color: var(--ui-muted); }
.sc-item .bc { position: relative; margin-top: auto; height: 2.8em; overflow: hidden; background: repeating-linear-gradient(90deg, var(--ui-ink) 0 .14em, transparent .14em .3em, var(--ui-ink) .3em .5em, transparent .5em .62em, var(--ui-ink) .62em .7em, transparent .7em .9em); }
.sc-item.hit { box-shadow: 0 0 0 .25em var(--brand), 0 0 2.4em var(--glow); }
.sc-laser { position: absolute; left: 0; top: -.2em; bottom: -.2em; width: .25em; background: var(--laser); box-shadow: 0 0 .7em var(--laser); opacity: 0; }
.scene-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ctl { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: .86rem; font-weight: 600; cursor: pointer; transition: border-color .2s ease, background-color .2s ease; }
.ctl:hover { border-color: var(--accent); background: var(--surface-2); }
.ctl svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.shot-note { font-size: .8rem; color: var(--muted); }

/* ---------- Para quién ---------- */
.who { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); list-style: none; }
.who li { display: flex; flex-direction: column; gap: 10px; padding: 22px 20px 24px; border-radius: var(--radius-2xl); border: 1px solid var(--line); background: var(--surface); transition: transform .35s var(--ease-out), border-color .3s ease; }
.who li:hover { transform: translateY(-6px) rotate(-.6deg); border-color: var(--line-strong); }
.who svg, .feat-group h3 svg, .hw svg { width: 30px; height: 30px; stroke: var(--brand); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.who li:hover svg { animation: wobble .6s var(--ease-spring); }
.who p { font-size: .94rem; color: var(--soft); }

/* ---------- Funciones ---------- */
.feat-groups { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.feat-group { display: flex; flex-direction: column; gap: 18px; padding: 26px 24px 28px; border-radius: var(--radius-2xl); border: 1px solid var(--line); background: var(--surface); }
.feat-group h3 { display: flex; align-items: center; gap: 12px; font-size: 1.5rem; letter-spacing: -.03em; }
.feat-group ul { list-style: none; display: flex; flex-direction: column; gap: 16px; }
.feat-group li { padding-top: 14px; border-top: 1px solid var(--line); }
.feat-group li b { display: block; font-weight: 700; }
.feat-group li span { display: block; color: var(--soft); font-size: .94rem; }

/* ---------- Module showcase ---------- */
.showcase { display: flex; flex-direction: column; gap: 28px; }
.sc-tabs { display: none; position: relative; align-self: flex-start; max-width: 100%; overflow-x: auto; scrollbar-width: none; padding: 6px; gap: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.sc-tabs::-webkit-scrollbar { display: none; }
.sc-tabs [role="tab"] { position: relative; z-index: 1; flex: none; padding: 10px 16px; border: 0; border-radius: 999px; background: transparent; color: var(--soft); font-weight: 600; font-size: .95rem; cursor: pointer; white-space: nowrap; transition: color .25s ease; }
.sc-tabs [role="tab"]:hover { color: var(--ink); }
.sc-tabs [role="tab"][aria-selected="true"] { color: var(--on-accent); }
.sc-ind { position: absolute; z-index: 0; left: 0; top: 6px; bottom: 6px; width: 100px; border-radius: 999px; background: var(--accent); transition: transform .45s var(--ease-spring), width .45s var(--ease-spring); pointer-events: none; }
.showcase.tabs-ready .sc-tabs { display: flex; }
.sc-stage { display: flex; flex-direction: column; gap: clamp(56px, 7vw, 96px); }
.showcase.tabs-ready .sc-stage { display: grid; }
.showcase.tabs-ready .sc-panel { grid-area: 1 / 1; }
.mod { display: grid; gap: clamp(22px, 3vw, 48px); align-items: center; }
.mod-shot { min-width: 0; }
.mod-text { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
/* The panel title is a paragraph (its tab already names the panel), styled like the h3 it replaced. */
.mod-text .mod-title { max-width: none; font-family: var(--font-display); text-wrap: balance; color: inherit; font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.6rem); letter-spacing: -.04em; font-weight: 800; line-height: 1.02; }
.mod-text p { color: var(--soft); }
.path { align-self: flex-start; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .82rem; font-weight: 600; color: var(--accent); background: var(--glow-soft); border: 1px solid var(--line); padding: 4px 10px; border-radius: var(--radius-md); }
.ticks { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.ticks li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 10px; }
.ticks li::before { content: ""; width: 14px; height: 3px; border-radius: var(--radius-xs); background: var(--accent); margin-top: .72em; }
.mod figcaption { font-size: .8rem; color: var(--muted); margin-top: 12px; }
@media (min-width: 900px) { .mod { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }

/* ---------- Screen recreations (container-relative sizing) ---------- */
.ui { container-type: inline-size; width: 100%; min-width: 0; }
.ui-win {
  font-size: clamp(5.4px, calc(100cqi / 62), 12.5px);
  font-family: var(--font-text);
  line-height: 1.35;
  color: var(--ui-ink);
  background: var(--ui-bg);
  border: 1px solid var(--ui-frame);
  border-radius: 1em;
  overflow: hidden;
  box-shadow: 0 2em 5em -2em var(--shadow);
  font-variant-numeric: tabular-nums;
  -webkit-user-select: none; user-select: none;
}
.ui-title { height: 2.4em; display: flex; align-items: center; gap: .5em; padding-inline: .95em; background: var(--ui-chrome); border-bottom: 1px solid var(--ui-line); }
.ui-title i { width: .9em; height: .9em; border-radius: 50%; background: var(--ui-dot); }
.ui-title span { margin-inline: auto; padding-right: 2.7em; font-size: .82em; color: var(--ui-muted); font-weight: 400; }
.ui-app { display: grid; grid-template-columns: 12.5em minmax(0, 1fr); height: var(--ui-h, 37em); }
.ui-side { background: var(--ui-side); border-right: 1px solid var(--ui-line); display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.ui-brand { flex: none; display: flex; align-items: center; gap: .6em; height: 3.8em; padding-inline: 1.05em; }
.ui-brand b { font-size: 1.05em; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.ui-mark { flex: none; width: 2.2em; height: 2.2em; border-radius: .65em; background: var(--ui-primary); display: grid; place-items: center; }
.ui-mark svg { width: 1.25em; height: 1.25em; stroke: var(--ui-on-primary); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ui-navbox { flex: 1; min-height: 0; overflow: hidden; }
.ui-nav { list-style: none; display: flex; flex-direction: column; gap: .12em; padding: .2em .65em; transform: translateY(var(--shift, 0)); }
.ui-nav li { display: flex; align-items: center; gap: .7em; padding: .45em .75em; border-radius: .6em; font-size: .82em; font-weight: 400; color: var(--ui-side-ink); white-space: nowrap; }
.ui-nav li::before { content: ""; flex: none; width: 1.05em; height: 1.05em; border: .15em solid currentColor; border-radius: .32em; opacity: .55; }
.ui-nav li.on { background: var(--ui-side-on); color: var(--ui-side-on-ink); }
.ui-nav li.g { font-size: .64em; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ui-muted); padding: 1.5em 1.1em .35em; }
.ui-nav li.g::before { display: none; }
.ui-side-foot { flex: none; border-top: 1px solid var(--ui-line); padding: .75em 1.1em; font-size: .7em; color: var(--ui-muted); }
.ui-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ui-top { flex: none; height: 3.8em; display: flex; align-items: center; justify-content: flex-end; gap: .7em; padding-inline: 1.4em; border-bottom: 1px solid var(--ui-line); }
.ui-select { display: inline-flex; align-items: center; gap: .6em; border: 1px solid var(--ui-line); background: var(--ui-card); border-radius: .55em; padding: .45em .75em; font-size: .78em; white-space: nowrap; }
.ui-select::after { content: ""; width: .45em; height: .45em; border-right: .14em solid var(--ui-muted); border-bottom: .14em solid var(--ui-muted); transform: translateY(-.15em) rotate(45deg); }
.ui-ico { width: 2.3em; height: 2.3em; display: grid; place-items: center; color: var(--ui-ink); }
.ui-ico svg { width: 1.2em; height: 1.2em; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ui-user { display: inline-flex; align-items: center; gap: .55em; font-size: .8em; font-weight: 400; }
.ui-user i { width: 2.2em; height: 2.2em; border-radius: 50%; background: var(--ui-accent); }
.ui-body { flex: 1; min-height: 0; overflow: hidden; padding: 1.5em 1.7em; display: flex; flex-direction: column; gap: 1.15em; }
.ui-h { display: flex; align-items: center; justify-content: space-between; gap: 1em; }
.ui-h .t { font-size: 1.5em; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
.ui-h .d { font-size: .8em; color: var(--ui-muted); margin-top: .25em; }
.ui-btn { display: inline-flex; align-items: center; justify-content: center; gap: .45em; background: var(--ui-primary); color: var(--ui-on-primary); border: 1px solid transparent; border-radius: .6em; padding: .55em 1em; font-size: .78em; font-weight: 600; white-space: nowrap; }
.ui-btn.o { background: var(--ui-card); color: var(--ui-ink); border-color: var(--ui-line); }
.ui-btn.w { width: 100%; padding: .8em; font-size: .92em; }
.ui-card { background: var(--ui-card); border: 1px solid var(--ui-line); border-radius: .9em; padding: 1em 1.1em; min-width: 0; display: flex; flex-direction: column; gap: .6em; }
.ui-card .ct { font-size: .9em; font-weight: 600; }
.ui-card .cd { font-size: .7em; color: var(--ui-muted); margin-top: -.4em; }
.ui-row { display: flex; align-items: center; gap: .7em; min-width: 0; }
.ui-row .sp { flex: 1; }
.ui-g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1em; }
.ui-g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1em; }
.ui-g4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9em; }
.ui-tbl { width: 100%; border-collapse: collapse; font-size: .76em; }
.ui-tbl th { text-align: left; font-weight: 400; color: var(--ui-muted); padding: .6em .75em; border-bottom: 1px solid var(--ui-line); white-space: nowrap; }
.ui-tbl td { padding: .62em .75em; border-bottom: 1px solid var(--ui-line); white-space: nowrap; }
.ui-tbl tr:last-child td { border-bottom: 0; }
.ui-tbl .r { text-align: right; }
.ui-tbl .m { color: var(--ui-muted); }
.ui-badge { display: inline-block; font-size: .86em; font-weight: 600; padding: .12em .65em; border-radius: 999px; background: var(--ui-soft); color: var(--ui-ink); }
.ui-badge.ok { background: var(--ui-ok-soft); color: var(--ui-ok); }
.ui-badge.warn { background: var(--ui-warn-soft); color: var(--ui-warn); }
.ui-badge.bad { background: var(--ui-bad-soft); color: var(--ui-bad); }
.ui-tabs { align-self: flex-start; display: inline-flex; flex-wrap: wrap; gap: .2em; padding: .25em; background: var(--ui-soft); border-radius: .65em; font-size: .78em; }
.ui-tabs span { padding: .38em .85em; border-radius: .5em; color: var(--ui-muted); font-weight: 400; white-space: nowrap; }
.ui-tabs .on { background: var(--ui-card); color: var(--ui-ink); box-shadow: 0 1px 2px var(--ui-shadow); }
.ui-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85em 1.1em; }
.ui-field { display: flex; flex-direction: column; gap: .3em; min-width: 0; }
.ui-field .l { font-size: .74em; font-weight: 400; }
.ui-in { border: 1px solid var(--ui-line); border-radius: .55em; padding: .5em .7em; font-size: .78em; background: var(--ui-card); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-in.ph { color: var(--ui-muted); }
.ui-hint { font-size: .64em; color: var(--ui-muted); }
.ui-kpi .k { font-size: .72em; font-weight: 400; color: var(--ui-muted); background: none; border: 0; padding: 0; }
.ui-kpi .v { font-size: 1.15em; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.ui-ok-t { font-size: .82em; font-weight: 400; color: var(--ui-ok); }
.ui-sc { flex-direction: row; align-items: center; gap: .7em; }
.ui-sc i { flex: none; width: 2.6em; height: 2.6em; border-radius: .75em; background: var(--ui-accent); }
.ui-sc b { display: block; font-size: .84em; font-weight: 600; }
.ui-sc span { display: block; font-size: .64em; color: var(--ui-muted); }
.ui-bars { display: flex; align-items: flex-end; gap: .38em; height: var(--bh, 7.6em); border-bottom: 1px solid var(--ui-line); padding-top: .4em; }
.ui-bars i { flex: 1; min-width: 0; height: var(--h); background: var(--ui-primary); border-radius: .28em .28em 0 0; }
.ui-axis { display: flex; gap: .38em; }
.ui-axis span { flex: 1; min-width: 0; text-align: center; font-size: .58em; color: var(--ui-muted); white-space: nowrap; overflow: hidden; }
.ui-hb { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); align-items: center; gap: .35em .6em; }
.ui-hb span { font-size: .64em; color: var(--ui-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.ui-hb i { height: 1.05em; width: var(--w); background: var(--ui-primary); border-radius: 0 .28em .28em 0; }
.ui-sum { font-size: 1.05em; font-weight: 600; }
.ui-pos { height: var(--ui-h, 37em); display: flex; flex-direction: column; }
.ui-posbar { flex: none; height: 3.5em; display: flex; align-items: center; gap: .9em; padding-inline: 1.2em; background: var(--ui-pos-bar); color: var(--ui-pos-ink); }
.ui-posbar .pm { width: 2em; height: 2em; border-radius: .55em; background: var(--ui-pos-chip); display: grid; place-items: center; }
.ui-posbar .pm svg { width: 1.1em; height: 1.1em; stroke: currentColor; fill: none; stroke-width: 2; }
.ui-posbar b { font-size: .84em; font-weight: 600; white-space: nowrap; }
.ui-posbar b span { font-weight: 400; opacity: .8; }
.ui-posbar .op { font-size: .7em; opacity: .75; white-space: nowrap; }
.ui-posbar .sp { flex: 1; }
.ui-posbar .pn { font-size: .8em; font-weight: 400; padding: .4em .85em; border-radius: .45em; opacity: .75; white-space: nowrap; }
.ui-posbar .pn.on { background: var(--ui-pos-chip); opacity: 1; }
.ui-pos-grid { display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); gap: 1em; min-height: 0; }
.ui-pos-grid .ui-tbl { font-size: .7em; }
.ui-pos-grid .ui-tbl th, .ui-pos-grid .ui-tbl td { padding-inline: .5em; }
.ui-chipline { display: flex; flex-wrap: wrap; gap: .45em; }
.ui-chipline span { font-size: .72em; padding: .35em .8em; border: 1px solid var(--ui-line); border-radius: .5em; background: var(--ui-card); white-space: nowrap; }
.ui-chipline .on { background: var(--ui-primary); color: var(--ui-on-primary); border-color: transparent; }
.ui-scan { display: inline-flex; align-items: center; gap: .4em; font-size: .7em; color: var(--ui-ok); font-weight: 400; white-space: nowrap; }
.ui-scan::before { content: ""; width: .6em; height: .6em; border-radius: 50%; background: currentColor; }
.ui-fav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5em; }
.ui-fav span { font-size: .68em; font-weight: 400; padding: .8em .6em; border-radius: .6em; background: var(--ui-accent); color: var(--ui-accent-ink); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-qty { display: inline-flex; align-items: center; gap: .55em; }
.ui-qty i { width: 1.6em; height: 1.6em; border: 1px solid var(--ui-line); border-radius: .4em; display: grid; place-items: center; font-style: normal; font-size: .9em; color: var(--ui-muted); }
.ui-tot { display: flex; justify-content: space-between; gap: 1em; font-size: .78em; }
.ui-tot.big { font-size: 1em; font-weight: 600; }
.ui-acts { display: inline-flex; gap: .35em; }
.ui-acts i { width: 1.5em; height: 1.5em; border: .14em solid var(--ui-muted); border-radius: .35em; opacity: .6; }
.ui-pop { position: absolute; right: 1.6em; bottom: 1.4em; width: 22em; box-shadow: 0 1.4em 3em -1em var(--ui-shadow); }
.ui-rel { position: relative; }
.ui-wiz { padding: 1.8em 2.2em; display: flex; flex-direction: column; gap: 1.2em; background: var(--ui-bg); }
.ui-steps { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: .45em; }
.ui-steps span { display: flex; flex-direction: column; gap: .4em; font-size: .64em; color: var(--ui-muted); white-space: nowrap; overflow: hidden; }
.ui-steps span::before { content: ""; height: .5em; border-radius: 999px; background: color-mix(in srgb, var(--ui-muted) 25%, transparent); }
.ui-steps .done::before, .ui-steps .on::before { background: var(--ui-primary); }
.ui-steps .on { color: var(--ui-ink); font-weight: 600; }
.ui-opt { display: flex; align-items: center; gap: .9em; border: 1px solid var(--ui-line); border-radius: .8em; padding: .9em 1em; background: var(--ui-card); }
.ui-opt i { flex: none; width: 2.6em; height: 2.6em; border-radius: .7em; background: var(--ui-accent); }
.ui-opt b { font-size: .84em; font-weight: 600; }
.ui-opt span { display: block; font-size: .68em; color: var(--ui-muted); }
.ui-opt .ui-badge { display: inline-block; margin-left: .5em; font-size: .62em; color: var(--ui-ink); }
.ui-opt .ui-btn { margin-left: auto; }
.ui-cap { font-size: .66em; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ui-muted); }
@container (max-width: 520px) {
  .ui-win { font-size: calc(100cqi / 46); }
  .ui-app { grid-template-columns: minmax(0, 1fr); }
  .ui-side { display: none; }
  .ui-pop { display: none; }
}

/* The wizard and update-flow windows are narrower, so their text scales on a smaller base. */
.wiz-fig .ui-win, .upd .ui-win { font-size: clamp(6px, calc(100cqi / 44), 13px); }
.ui-bars i { transform-origin: bottom; will-change: transform; }
.ui-hb i { transform-origin: left; }

/* ---------- Numbered sequences ---------- */
.steps { list-style: none; counter-reset: step; display: flex; flex-direction: column; gap: 20px; }
.steps > li { counter-increment: step; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 14px; }
.steps > li::before { content: counter(step); width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--glow-soft); border: 1px solid var(--line); color: var(--accent); font-weight: 800; font-size: .98rem; font-variant-numeric: tabular-nums; transition: background-color .3s ease, color .3s ease, transform .3s var(--ease-spring); }
.steps > li.is-current::before { background: var(--accent); color: var(--on-accent); transform: scale(1.08); }
.steps > li > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding-top: 6px; }
.steps > li > div > p, .steps .sub-list { color: var(--soft); }
.steps.sm { gap: 12px; }
.steps.sm > li { grid-template-columns: 28px minmax(0, 1fr); gap: 12px; }
.steps.sm > li::before { width: 28px; height: 28px; font-size: .84rem; }
.steps.sm > li > div { padding-top: 2px; }
.sub-list { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.sub-list li { padding-left: 16px; position: relative; }
.sub-list li::before { content: ""; position: absolute; left: 0; top: .72em; width: 7px; height: 2px; background: var(--accent); }
.k { font-weight: 600; color: var(--ink); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0 .35em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.wizard-layout { display: grid; gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (min-width: 960px) {
  .wizard-layout { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
  .wizard-aside { position: sticky; top: 96px; }
}
.wizard-aside { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.callout { padding: 18px 20px; border-radius: var(--radius-sm) var(--radius-xl) var(--radius-xl) var(--radius-sm); border-left: 4px solid var(--accent); background: var(--glow-soft); display: flex; flex-direction: column; gap: 8px; }
.callout.warn { border-left-color: var(--warn); background: var(--warn-soft); }
.callout ul { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.callout h3 { font-size: 1.02rem; }
.callout p, .callout li { color: var(--soft); }
.callout b { color: var(--ink); }
.ctl-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Wizard animation: one mini screen per step; the progress segments fill as it advances. */
.wiz-screens { display: grid; }
.wiz-screen { grid-area: 1 / 1; }
.wiz-screen:not(.is-active) { visibility: hidden; }
.ui-steps span { position: relative; }
.ui-steps span::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: .5em; border-radius: 999px; background: var(--ui-primary); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease-out); }
.ui-steps .done::after, .ui-steps .on::after { transform: scaleX(1); }
.ui-steps .done::before, .ui-steps .on::before { background: color-mix(in srgb, var(--ui-muted) 25%, transparent) !important; }

/* Update flow */
.upd { display: flex; flex-direction: column; gap: 16px; padding: 20px; border-radius: var(--radius-2xl); border: 1px solid var(--line); background: var(--surface); }
.upd-win .upd-body { padding: 1.4em 1.6em 1.6em; display: flex; flex-direction: column; gap: .9em; background: var(--ui-bg); }
.upd-states { display: grid; }
.upd-state { grid-area: 1 / 1; display: flex; flex-direction: column; gap: .7em; padding: 1em 1.2em; border-radius: .8em; background: color-mix(in srgb, var(--ui-primary) 10%, var(--ui-card)); border: 1px solid color-mix(in srgb, var(--ui-primary) 30%, transparent); }
.upd-state:not(.is-active) { visibility: hidden; }
.upd-state b { font-size: 1em; }
.upd-state p { font-size: .8em; color: var(--ui-muted); }
.upd-prog { height: .6em; border-radius: 999px; background: var(--ui-soft); overflow: hidden; }
.upd-prog i { display: block; height: 100%; width: 100%; background: var(--ui-primary); transform-origin: left; transform: scaleX(1); }
.upd-state.is-active .upd-prog i { animation: fill 1.9s var(--ease-out) both; }
@keyframes fill { from { transform: scaleX(.04); } }
.upd-steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; position: relative; }
.upd-steps li { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-size: .82rem; color: var(--muted); position: relative; }
.upd-steps li::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line); background: var(--bg-2); position: relative; z-index: 1; transition: background-color .3s ease, border-color .3s ease; }
.upd-steps li::after { content: ""; position: absolute; top: 6px; left: 50%; width: 100%; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease-out); }
.upd-steps li:last-child::after { display: none; }
.upd-steps li.done, .upd-steps li.on { color: var(--ink); }
.upd-steps li.done::before, .upd-steps li.on::before { background: var(--accent); border-color: var(--accent); }
.upd-steps li.done::after { transform: scaleX(1); }

/* ---------- Guías ---------- */
.guide-groups { display: flex; flex-direction: column; gap: 40px; }
.guide-group { display: flex; flex-direction: column; gap: 10px; }
.guide-group > h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .14em; color: var(--accent); font-weight: 700; margin-bottom: 6px; }
.guide { border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); transition: border-color .3s ease, background-color .3s ease, transform .3s var(--ease-out); }
.guide:hover { border-color: var(--line-strong); }
.guide[open] { border-color: var(--line-strong); background: var(--surface-2); }
.guide summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 34px; gap: 4px 14px; align-items: center; padding: 18px 20px; border-radius: var(--radius-xl); }
.guide summary::-webkit-details-marker { display: none; }
.guide summary::after { content: "+"; grid-column: 2; grid-row: 1 / span 2; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); color: var(--accent); font-size: 1.3rem; font-weight: 400; line-height: 1; transition: transform .35s var(--ease-spring), background-color .3s ease, color .3s ease; }
.guide[open] summary::after { transform: rotate(135deg); background: var(--accent); color: var(--on-accent); }
.guide::details-content { overflow: clip; height: 0; transition: height .4s var(--ease-out), content-visibility .4s allow-discrete; }
.guide[open]::details-content { height: auto; }
.g-title { font-weight: 700; font-size: 1.06rem; }
.g-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .84rem; color: var(--muted); }
.g-meta .path { font-size: .78rem; padding: 2px 8px; }
.g-body { padding: 4px 20px 22px; display: flex; flex-direction: column; gap: 14px; }
.g-body > p, .g-body li p { color: var(--soft); }
.g-body > p b { color: var(--ink); }
.tip { font-size: .93rem; color: var(--muted) !important; border-top: 1px dashed var(--line); padding-top: 12px; }
.tip b { color: var(--ink); }
.guide-grid { display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 900px) { .guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }

/* ---------- Roles ---------- */
.role-lab { display: grid; gap: clamp(20px, 3vw, 32px); align-items: start; }
.role-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.role-picker [role="radio"] { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 18px; border-radius: var(--radius-xl); border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; text-align: left; transition: transform .3s var(--ease-spring), border-color .25s ease, background-color .25s ease; }
.role-picker [role="radio"] b { font-size: 1.05rem; }
.role-picker [role="radio"] small { font-size: .78rem; color: var(--muted); font-family: var(--font-mono); }
.role-picker [role="radio"]:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.role-picker [role="radio"][aria-checked="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.role-picker [role="radio"][aria-checked="true"] small { color: var(--on-accent); }
.role-demo { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.role-count { display: flex; align-items: baseline; gap: 10px; color: var(--soft); font-size: .95rem; }
.role-count b { font-size: 2.6rem; font-weight: 800; letter-spacing: -.05em; color: var(--brand); line-height: 1; font-variant-numeric: tabular-nums; }
.role-win .ui-win { font-size: clamp(6px, calc(100cqi / 46), 12.5px); }
.role-win .ui-app { grid-template-columns: 13em minmax(0, 1fr); height: auto; min-height: 30em; }
.role-win .ui-nav { padding-bottom: .8em; }
.role-win .ui-nav li { padding-block: .34em; }
.role-win .ui-nav li.off { display: none; }
.role-win .ui-nav li.disabled { opacity: .45; }
.role-win .ui-nav li.disabled::after { content: "Requiere permiso de ventas"; margin-left: auto; font-size: .78em; color: var(--ui-muted); }
.role-win .r-off { display: none !important; }
.role-win .ui-body { overflow: visible; }
@container (max-width: 520px) {
  .role-win .ui-win { font-size: calc(100cqi / 26); }
  .role-win .ui-app { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .role-win .ui-side { display: flex; border-right: 0; }
  .role-win .ui-main { display: none; }
}
.roles { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.role-lab.roles-ready .roles { display: block; }
.role-lab.roles-ready .role:not(.is-active) { display: none; }
.role { display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: var(--radius-2xl); border: 1px solid var(--line); background: var(--surface); }
.role.lead-role { background: var(--bg-3); border-color: var(--line-strong); }
.role header { display: flex; flex-direction: column; gap: 4px; }
.role h3 { font-size: 1.6rem; letter-spacing: -.035em; font-weight: 800; }
.role .sys { font-size: .84rem; color: var(--muted); }
.role .lbl { font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.role ul { list-style: none; display: flex; flex-direction: column; gap: 7px; font-size: .95rem; }
.role li { padding-left: 18px; position: relative; color: var(--soft); }
.role .yes-list li::before { content: ""; position: absolute; left: 0; top: .6em; width: 9px; height: 5px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.role .no-list li { color: var(--muted); }
.role .no-list li::before { content: ""; position: absolute; left: 1px; top: .78em; width: 8px; height: 2px; background: currentColor; }
.role.is-active { animation: pop .45s var(--ease-out); }
@keyframes pop { from { transform: translateY(10px) scale(.98); } }
.role-notes { margin-top: 28px; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
@media (min-width: 980px) {
  .role-lab.roles-ready { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .role-lab.roles-ready .role-picker { grid-column: 1 / -1; }
}

/* ---------- Tables ---------- */
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); }
table.data { width: 100%; min-width: 560px; border-collapse: collapse; font-size: .94rem; }
table.data th, table.data td { text-align: left; vertical-align: top; padding: 13px 16px; border-bottom: 1px solid var(--line); color: var(--soft); }
table.data th { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); background: var(--glow-soft); }
table.data tr:last-child td { border-bottom: 0; }
table.data td:first-child { font-weight: 600; color: var(--ink); }
table.data tbody tr { transition: background-color .2s ease; }
table.data tbody tr:hover { background: var(--surface-2); }

/* ---------- Instalación ---------- */
.two { display: grid; gap: clamp(24px, 3vw, 40px); }
.two > *, .stack { min-width: 0; }
@media (min-width: 900px) { .two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.panel { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: clamp(20px, 2.5vw, 30px); border-radius: var(--radius-2xl); border: 1px solid var(--line); background: var(--surface); }
.panel h3 { display: flex; align-items: center; gap: 10px; font-size: 1.3rem; letter-spacing: -.02em; }
.panel h3 svg { color: var(--brand); }
.panel > p { color: var(--soft); }
.req { list-style: none; display: grid; gap: 10px 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.req li { display: flex; flex-direction: column; gap: 2px; padding: 14px 0; border-top: 1px solid var(--line); }
.req b { font-weight: 700; }
.req span { color: var(--soft); font-size: .94rem; }
.db-options { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); list-style: none; }
.db-options li { display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: var(--radius-xl); background: var(--surface-2); border: 1px solid var(--line); }
.db-options b { font-size: 1.05rem; }
.db-options span { font-size: .93rem; color: var(--soft); }
.sub-h { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); letter-spacing: -.03em; font-weight: 800; margin-top: clamp(40px, 6vw, 72px); margin-bottom: 18px; }
pre.cmd { margin: 0; padding: 12px 14px; border-radius: var(--radius-lg); background: var(--bg-2); border: 1px solid var(--line); color: var(--accent-2); overflow-x: auto; font: 400 .86rem/1.5 var(--font-mono); }

/* ---------- Hardware, FAQ ---------- */
.hw { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); list-style: none; }
.hw li { display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: var(--radius-2xl); border: 1px solid var(--line); background: var(--surface); }
.hw p { color: var(--soft); font-size: .95rem; }
.faq { display: flex; flex-direction: column; gap: 10px; }
.faq-more { margin-top: 24px; color: var(--soft); }

/* ---------- Manual page (manual.html) ----------
   A flat page head, then the table of contents: a card under the head on small screens and, from
   1101px (where the header shows its nav), a bar that sticks under the header. site.js marks the
   section being read with aria-current="location". */
.page-head { background: var(--bg-2); border-bottom: 1px solid var(--line); padding-block: clamp(40px, 7vw, 88px) clamp(32px, 5vw, 56px); }
.page-head .sec-head { margin-bottom: 0; }
.page-head h1 { font-size: clamp(2.2rem, 1.1rem + 4.2vw, 4.6rem); line-height: .98; letter-spacing: -.045em; font-weight: 800; }
.mtoc { padding-top: 28px; }
.mtoc .wrap > * { max-width: 860px; }
.mtoc-title { font-size: .78rem; font-weight: 700; line-height: 1.4; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.mtoc ol { margin-top: 10px; padding: 18px 20px 18px calc(20px + 1.4em); border: 1px solid var(--line); border-radius: var(--radius-2xl); background: var(--surface); display: grid; gap: 6px 28px; font-size: .98rem; }
.mtoc li::marker { color: var(--muted); font-variant-numeric: tabular-nums; }
.mtoc a { color: var(--soft); font-weight: 600; text-decoration: none; }
.mtoc a:hover { color: var(--accent); text-decoration: underline; }
.mtoc a[aria-current] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.mtoc li:has(> a[aria-current])::marker { color: var(--accent); }
@media (min-width: 520px) and (max-width: 1100px) { .mtoc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1101px) {
  .mtoc { position: sticky; top: 67px; z-index: 40; padding: 0; background: var(--bg); border-bottom: 1px solid var(--line); }
  .mtoc .wrap { display: flex; align-items: center; gap: 20px; min-height: 52px; }
  .mtoc .wrap > * { max-width: none; }
  .mtoc-title { flex: none; color: var(--muted); }
  .mtoc ol { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; display: flex; gap: 2px; list-style: none; font-size: .92rem; }
  .mtoc a { display: block; padding: 8px 10px; border-radius: var(--radius-md); white-space: nowrap; }
  .mtoc a:hover { color: var(--ink); text-decoration: none; }
  .mtoc a[aria-current] { text-underline-offset: .5em; }
  /* Anchors land below the header and this bar (html's scroll-padding-top covers the header).
     A section starts right at the bar's edge; anchors inside one keep some air above them. */
  .manual [id] { scroll-margin-top: 56px; }
  .manual > section[id] { scroll-margin-top: 32px; }
}

/* ---------- Downloads band ---------- */
.dl-band { overflow: hidden; background: var(--bg-2); }
.dl-band h2 { font-size: clamp(2.6rem, 1.2rem + 5.4vw, 6rem); }
.dl-cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); list-style: none; }
.dl-card { display: flex; flex-direction: column; gap: 14px; padding: 24px; border-radius: var(--radius-2xl); background: color-mix(in srgb, var(--bg) 55%, transparent); border: 1px solid var(--line); min-width: 0; transition: transform .35s var(--ease-out), border-color .3s ease; }
.dl-card:hover { transform: translateY(-4px); border-color: var(--line-strong); }
.dl-card.rec { border-color: var(--line-strong); }
.dl-card h3 { font-size: 1.3rem; letter-spacing: -.02em; }
.dl-card .tag { align-self: flex-start; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--on-accent); background: var(--accent); padding: 3px 8px; border-radius: var(--radius-sm); }
.dl-card p { color: var(--soft); font-size: .94rem; }
.dl-card .file { font: 400 .84rem/1.4 var(--font-mono); color: var(--soft); overflow-wrap: anywhere; }
.dl-card .btn { align-self: flex-start; }
.hash { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.hash .lbl { font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.hash code { font-size: .78rem; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; word-break: break-all; }
.hash-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: .86rem; }
.copy { display: inline-flex; align-items: center; gap: 6px; font: 600 .84rem/1 var(--font-text); color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 7px 10px; cursor: pointer; transition: border-color .2s ease, background-color .2s ease; }
.copy svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; }
.copy:hover { border-color: var(--accent); }
.copy.done { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.copy-status { font-size: .84rem; color: var(--accent); min-height: 1.2em; }
.contact-cta { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; padding: 22px 24px; border-radius: var(--radius-2xl); background: var(--accent); color: var(--on-accent); }
.contact-cta b { font-size: 1.4rem; letter-spacing: -.02em; }
.contact-cta span { display: block; font-size: .94rem; }
.contact-cta .btn { margin-left: auto; background: var(--bg-2); color: var(--ink); }
.contact-cta :focus-visible { outline-color: var(--on-accent); }

/* ---------- Footer ---------- */
.site-footer { padding-block: 48px calc(40px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--bg); }
.foot { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
/* Footer column titles are paragraphs, not headings, styled like the h3s they replaced. */
.foot .foot-title { max-width: none; font-family: var(--font-display); text-wrap: balance; font-size: .78rem; line-height: 1.3; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--accent); margin-bottom: 10px; }
.foot ul { list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: .94rem; }
.foot a { color: var(--soft); text-decoration: none; }
.foot a:hover { color: var(--accent); }
.foot .logo { color: var(--ink); }
.foot a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.fine { margin-top: 32px; font-size: .86rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: 18px; display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; align-items: center; max-width: none; }