.iso{
  --anatomy-page:#0b0b0b;--anatomy-card:#131313;--anatomy-text:#a3a3a3;--anatomy-strong:#e6e6e6;--anatomy-muted:#6e6e6e;
  --anatomy-paper:#131313;--anatomy-face:#1b1b1b;--anatomy-top:#1c1c1c;
  --anatomy-shade-0:#0f0f0f;--anatomy-shade-1:#121212;--anatomy-shade-2:#151515;--anatomy-shade-3:#181818;
  --anatomy-lit-top:#262626;--anatomy-lit-shade:#1d1d1d;
  --anatomy-hi:#d4d4d4;--anatomy-mid:#6a6a6a;--anatomy-lo:#3e3e3e;--anatomy-faint:#2a2a2a;--anatomy-lit:#ffffff;
  --anatomy-halo:#050505;--anatomy-halo-opacity:.9;--anatomy-dot:#e6e6e6;
  --anatomy-red:#ff6b6b;--anatomy-green:#6be0a0;--anatomy-blue:#6b9bff;
  --anatomy-weight:.6px;--anatomy-ease:cubic-bezier(.32,.72,0,1);
  --anatomy-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --anatomy-lift:inset 0 1px 0 0 #ffffff0a,inset 0 0 0 1px #ffffff06,0 0 0 1px #00000026,0 1px 1px -.5px #00000014,0 3px 3px -1.5px #00000014,0 6px 6px -3px #00000014,0 12px 12px -6px #00000014;
}
.iso[data-theme="light"]{
  --anatomy-page:#f2f2ef;--anatomy-card:#fbfbfa;--anatomy-text:#57575a;--anatomy-strong:#18181a;--anatomy-muted:#8c8c90;
  --anatomy-paper:#fbfbfa;--anatomy-face:#ffffff;--anatomy-top:#ffffff;
  --anatomy-shade-0:#dcdcd9;--anatomy-shade-1:#e5e5e2;--anatomy-shade-2:#ededea;--anatomy-shade-3:#f4f4f1;
  --anatomy-lit-top:#ffffff;--anatomy-lit-shade:#eeeeeb;
  --anatomy-hi:#26262a;--anatomy-mid:#8a8a8f;--anatomy-lo:#b4b4b8;--anatomy-faint:#d4d4d6;--anatomy-lit:#000000;
  --anatomy-halo:#8a8a80;--anatomy-halo-opacity:.32;--anatomy-dot:#3a3a3e;
  --anatomy-red:#e5484d;--anatomy-green:#30a46c;--anatomy-blue:#3e63dd;
  --anatomy-lift:inset 0 1px 0 0 #ffffff,0 0 0 1px #0000000f,0 1px 1px -.5px #0000000a,0 3px 3px -1.5px #0000000a,0 6px 6px -3px #0000000a,0 12px 12px -6px #0000000a;
}
.iso-svg{display:block;width:100%;height:auto;overflow:visible}
.iso-svg path,.iso-svg circle{vector-effect:non-scaling-stroke}
.iso-fill{fill:var(--anatomy-paper);stroke:none}
.iso-solid[data-lit]>.iso-fill{fill:var(--anatomy-face)}
.iso-shade,.iso-top{stroke:none}
.iso-shade[data-shade="0"]{fill:var(--anatomy-shade-0)}
.iso-shade[data-shade="1"]{fill:var(--anatomy-shade-1)}
.iso-shade[data-shade="2"]{fill:var(--anatomy-shade-2)}
.iso-shade[data-shade="3"]{fill:var(--anatomy-shade-3)}
.iso-top{fill:var(--anatomy-top)}
.iso-solid[data-lit]>.iso-top{fill:var(--anatomy-lit-top)}
.iso-solid[data-lit]>.iso-shade{fill:var(--anatomy-lit-shade)}
.iso-solid[data-seamless]>.iso-shade,.iso-solid[data-seamless]>.iso-top{stroke-width:.4;stroke-linejoin:round}
.iso-solid[data-seamless]>.iso-shade[data-shade="0"]{stroke:var(--anatomy-shade-0)}
.iso-solid[data-seamless]>.iso-shade[data-shade="1"]{stroke:var(--anatomy-shade-1)}
.iso-solid[data-seamless]>.iso-shade[data-shade="2"]{stroke:var(--anatomy-shade-2)}
.iso-solid[data-seamless]>.iso-shade[data-shade="3"]{stroke:var(--anatomy-shade-3)}
.iso-solid[data-seamless]>.iso-top{stroke:var(--anatomy-top)}
.iso-solid[data-seamless][data-lit]>.iso-top{stroke:var(--anatomy-lit-top)}
.iso-solid[data-seamless][data-lit]>.iso-shade{stroke:var(--anatomy-lit-shade)}
.iso-solid[data-lit]>.iso-edge{stroke:var(--anatomy-lit)}
.iso-halo{fill:var(--anatomy-halo);stroke:none;filter:blur(9px);opacity:var(--anatomy-halo-opacity);transform:translateY(3px)}
.iso-line{fill:none;stroke:var(--anatomy-lo);stroke-width:var(--anatomy-weight);stroke-linecap:round;stroke-linejoin:round}
.iso-line[data-tone="hi"]{stroke:var(--anatomy-hi)}
.iso-line[data-tone="mid"]{stroke:var(--anatomy-mid)}
.iso-line[data-tone="lo"]{stroke:var(--anatomy-lo)}
.iso-line[data-tone="faint"]{stroke:var(--anatomy-faint)}
.iso-line[data-tone="lit"]{stroke:var(--anatomy-lit)}
.iso-line[data-tone="red"]{stroke:var(--anatomy-red)}
.iso-line[data-tone="green"]{stroke:var(--anatomy-green)}
.iso-line[data-tone="blue"]{stroke:var(--anatomy-blue)}
.iso-line[data-dotted]{stroke-dasharray:.01 3.5;stroke-width:1}
.iso-line[data-dashed]{stroke-dasharray:3 3}
.iso-line[data-flow]{stroke-dasharray:2 6}
.iso-wire-end{fill:var(--anatomy-paper);stroke:var(--anatomy-lo);stroke-width:var(--anatomy-weight)}
.iso-wire[data-tone="hi"] .iso-wire-end{stroke:var(--anatomy-hi)}
.iso-wire[data-tone="mid"] .iso-wire-end{stroke:var(--anatomy-mid)}
.iso-wire[data-tone="faint"] .iso-wire-end{stroke:var(--anatomy-faint)}
.iso-wire[data-tone="lit"] .iso-wire-end{stroke:var(--anatomy-lit)}
.iso-dots circle{fill:var(--anatomy-dot);stroke:none;opacity:.32}
.iso-dots[data-tone="hi"] circle{opacity:.85}
.iso-dots[data-tone="mid"] circle{opacity:.45}
.iso-dots[data-tone="lo"] circle{opacity:.22}
.iso-dots[data-tone="faint"] circle{opacity:.12}
.iso-face-text{fill:var(--anatomy-mid);font-family:var(--anatomy-mono);letter-spacing:.04em}
.iso-face-text[data-tone="hi"]{fill:var(--anatomy-hi)}
.iso-face-text[data-tone="lo"]{fill:var(--anatomy-lo)}
.iso-face-text[data-tone="faint"]{fill:var(--anatomy-faint)}
.tb-body{fill:var(--anatomy-shade-2);stroke:none}
.tb-shine{fill:var(--anatomy-top);stroke:none}
.tb-shade{fill:var(--anatomy-shade-0);stroke:none}
.tb-ring{fill:none;stroke:var(--anatomy-lo);stroke-width:.45;stroke-linecap:butt;stroke-linejoin:round}
.tb-ring[data-tone="mid"]{stroke:var(--anatomy-mid)}
.tb-ring[data-tone="faint"]{stroke:var(--anatomy-faint)}
.tb-ring[data-tone="hi"]{stroke:var(--anatomy-hi)}
@keyframes iso-flow{to{stroke-dashoffset:-32}}
@keyframes iso-pulse{0%,100%{opacity:.18}12%{opacity:1}40%{opacity:.18}}
.iso-line[data-flow]{animation:iso-flow 1600ms linear infinite}
.iso-dots circle[data-pulse]{animation:iso-pulse 1600ms steps(1,end) infinite;animation-delay:var(--pulse-at,0ms)}
.iso-figure{margin:32px 0 36px}
.iso-plate{position:relative;padding:52px 24px;border-radius:0;background:var(--anatomy-card);box-shadow:0 0 0 1px var(--anatomy-mid);--anatomy-paper:var(--anatomy-card)}
.iso-plate-corners{position:absolute;inset:18px 20px;pointer-events:none}
.iso-plate-corner{position:absolute;color:var(--anatomy-muted);font-family:var(--anatomy-mono);font-size:10.5px;line-height:1;letter-spacing:.04em;white-space:nowrap}
.iso-plate-corner[data-corner="fig"]{top:0;left:0;color:var(--anatomy-text)}
.iso-plate-corner[data-corner="title"]{top:0;right:0;text-transform:uppercase;letter-spacing:.1em}
.iso-plate-corner[data-corner="hint"]{bottom:0;left:0;text-transform:uppercase;letter-spacing:.1em}
.iso-plate-corner[data-corner="readout"]{right:0;bottom:0;color:var(--anatomy-text);font-variant-numeric:tabular-nums}
.iso-plate .iso-svg{margin:0 auto}
.iso-legend{display:grid;gap:8px;margin-top:12px;color:var(--anatomy-muted);font-size:13px;line-height:1.55}
.iso-keys{display:flex;flex-wrap:wrap;gap:6px 18px}
.iso-key{display:inline-flex;align-items:center;gap:7px}
.iso-swatch{width:16px;height:10px;flex:none;overflow:visible}
.iso-swatch path{fill:none;stroke:var(--anatomy-hi);stroke-width:1;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.iso-swatch[data-mark="raised"] path,.iso-swatch[data-mark="flat"] path{stroke:var(--anatomy-mid)}
.iso-swatch[data-mark="lit"] path{stroke:var(--anatomy-lit)}
.iso-swatch[data-mark="dim"] path{stroke:var(--anatomy-lo)}
.iso-swatch[data-mark="dotted"] path{stroke-dasharray:.01 3;stroke-width:1.4}
.iso-swatch[data-mark="dashed"] path{stroke-dasharray:3 2.5}
.iso-swatch[data-mark="red"] path{stroke:var(--anatomy-red)}
.iso-swatch[data-mark="green"] path{stroke:var(--anatomy-green)}
.iso-swatch[data-mark="blue"] path{stroke:var(--anatomy-blue)}
.iso-swatch-crease{stroke:var(--anatomy-lo)!important}
@media (max-width:560px){.iso-plate{padding:48px 12px 70px}.iso-plate-corner[data-corner="hint"]{bottom:18px}}
@media (prefers-reduced-motion:reduce){.iso-line[data-flow],.iso-dots circle[data-pulse]{animation:none}}

/* Disposición: figura fija en una tarjeta clara a la izquierda, relato que se desplaza a la derecha (como una lámina técnica). */
:root {
  --pg-bg: #e8ebf0;
  --pg-card: #f6f8fb;
  --pg-ink: #13161c;
  --pg-text: #3a404b;
  --pg-muted: #7a8393;
  --pg-rule: #cdd3dd;
  --pg-accent: #2d4bd2;
  --pg-accent-soft: #dfe5fd;
  --pg-water: #4d73e6;
  --pg-hot: #e0533a;
  --pg-amber: #e8710c;
  --font-display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --font-body: "Barlow", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pg-bg: #0e1014;
    --pg-card: #14171d;
    --pg-ink: #eef1f6;
    --pg-text: #b2b9c5;
    --pg-muted: #707a89;
    --pg-rule: #2a2f39;
    --pg-accent: #8098ff;
    --pg-accent-soft: #1c2447;
    --pg-water: #6f93ff;
    --pg-hot: #ff6f55;
    --pg-amber: #ff9a3c;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --pg-bg: #0e1014;
  --pg-card: #14171d;
  --pg-ink: #eef1f6;
  --pg-text: #b2b9c5;
  --pg-muted: #707a89;
  --pg-rule: #2a2f39;
  --pg-accent: #8098ff;
  --pg-accent-soft: #1c2447;
  --pg-water: #6f93ff;
  --pg-hot: #ff6f55;
  --pg-amber: #ff9a3c;
  color-scheme: dark;
}
html { background: var(--pg-bg); }
body { margin: 0; background: var(--pg-bg); color: var(--pg-text); font-family: var(--font-body); }

/* ---------- tokens del dibujo ---------- */
.dx {
  --anatomy-card: var(--pg-card);
  --anatomy-paper: var(--pg-card);
  --anatomy-mono: var(--font-mono);
  --dx-blend: screen;
  --dx-water: var(--pg-water);
  --dx-water-top: var(--pg-water);
  --dx-water-edge: var(--pg-water);
  --dx-water-alpha: 0.3;
  --dx-hot: var(--pg-hot);
  --dx-stream: var(--pg-water);
  --dx-bubble: #dfe8ff;
  --dx-drop: var(--pg-water);
  --dx-lamp-off: #2c2f36;
  --dx-lamp-run: #f2f4f8;
  --dx-lamp-full: var(--pg-amber);
  --dx-lamp-glow: #ff9a3c88;
  --dx-lamp-run-glow: #ffffff66;
  --dx-glass: #9fb8d01a;
  --dx-glass-edge: var(--pg-water);
  --dx-flow-cold: var(--pg-water);
  --dx-flow-warm: var(--pg-hot);
  --dx-sel-top: #263264;
  --dx-sel-0: #161d3d;
  --dx-sel-1: #1a2247;
  --dx-sel-2: #1e2752;
  --dx-sel-3: #222c5c;
  --dx-sel-line: #9db0ff;
  --dx-sel-mid: #6f86e8;
}
.iso[data-theme="light"] .dx {
  --anatomy-page: var(--pg-bg);
  --anatomy-face: #ffffff;
  --anatomy-top: #ffffff;
  --anatomy-shade-0: #d9dee7;
  --anatomy-shade-1: #e2e6ee;
  --anatomy-shade-2: #eaedf3;
  --anatomy-shade-3: #f2f4f8;
  --anatomy-lit-top: #ffffff;
  --anatomy-lit-shade: #eef1f7;
  --anatomy-hi: #262b36;
  --anatomy-mid: #8a93a3;
  --anatomy-lo: #b5bdca;
  --anatomy-faint: #d3d9e3;
  --anatomy-halo: #7f8aa0;
  --anatomy-halo-opacity: 0.28;
  --anatomy-dot: #394050;
  --dx-blend: normal;
  --dx-water-alpha: 0.2;
  --dx-bubble: #ffffff;
  --dx-lamp-off: #cfd4dd;
  --dx-lamp-run: #fff6cf;
  --dx-lamp-glow: #e8710c55;
  --dx-lamp-run-glow: #f5c40044;
  --dx-glass: #2d4bd20a;
  --dx-sel-top: #edf1ff;
  --dx-sel-0: #c9d3fa;
  --dx-sel-1: #d3dbfb;
  --dx-sel-2: #dde4fc;
  --dx-sel-3: #e6ebfd;
  --dx-sel-line: #2d4bd2;
  --dx-sel-mid: #7088e6;
}

/* ---------- materiales: tonos fríos y sobrios, como una lámina ---------- */
.dx-black { --anatomy-top: #2a2d33; --anatomy-shade-0: #121418; --anatomy-shade-1: #16181c; --anatomy-shade-2: #1a1c21; --anatomy-shade-3: #1f2126; }
.dx-white { --anatomy-top: #2b2f37; --anatomy-shade-0: #1c1f25; --anatomy-shade-1: #20232a; --anatomy-shade-2: #24272e; --anatomy-shade-3: #282b32; }
.dx-maroon { --anatomy-top: #2a1f22; --anatomy-shade-0: #18110f; --anatomy-shade-1: #1c1416; --anatomy-shade-2: #21171a; --anatomy-shade-3: #261b1e; }
.dx-brass { --anatomy-top: #2c281c; --anatomy-mid: #8c7c55; }
.dx-mat { --anatomy-top: #181a1f; }
.dx-silicone .tb-body { fill: #3a2a30; }
.dx-silicone .tb-shine { fill: #4a3540; }
.dx-braid .tb-ring { stroke: #b85a5a; }
.dx-cable .tb-body { fill: #0e1013; }
.dx-cable .tb-shine { fill: #1c1f24; }

[data-theme="light"] .dx-black { --anatomy-top: #9ea6b4; --anatomy-shade-0: #6f7787; --anatomy-shade-1: #7a8291; --anatomy-shade-2: #858d9b; --anatomy-shade-3: #9098a6; --anatomy-mid: #4a5162; --anatomy-lo: #5d6475; --anatomy-faint: #8a92a1; --anatomy-hi: #1e222b; }
[data-theme="light"] .dx-white { --anatomy-top: #ffffff; --anatomy-shade-0: #e3e7ee; --anatomy-shade-1: #e9ecf2; --anatomy-shade-2: #eff1f6; --anatomy-shade-3: #f5f7fa; }
[data-theme="light"] .dx-maroon { --anatomy-top: #f6eeef; --anatomy-shade-0: #ddd0d3; --anatomy-shade-1: #e4d9db; --anatomy-shade-2: #eae1e3; --anatomy-shade-3: #f0e8ea; --anatomy-mid: #9a8a8f; }
[data-theme="light"] .dx-cream { --anatomy-top: #ffffff; --anatomy-shade-0: #e2e3e2; --anatomy-shade-1: #e8e9e8; --anatomy-shade-2: #eeefee; --anatomy-shade-3: #f4f5f4; }
[data-theme="light"] .dx-brass { --anatomy-top: #f3ead2; --anatomy-shade-0: #d6c69c; --anatomy-shade-1: #ddcfa9; --anatomy-shade-2: #e4d8b6; --anatomy-shade-3: #ebe1c4; --anatomy-mid: #8a7748; }
[data-theme="light"] .dx-heater { --anatomy-top: #f1f2f5; }
[data-theme="light"] .dx-mat { --anatomy-top: #e3e7ee; --anatomy-shade-0: #cfd5df; --anatomy-shade-1: #d5dbe4; --anatomy-shade-2: #dbe0e8; --anatomy-shade-3: #e0e5ec; }
[data-theme="light"] .dx-silicone .tb-body { fill: #f1dfe3; }
[data-theme="light"] .dx-silicone .tb-shine { fill: #f9eef0; }
[data-theme="light"] .dx-silicone .tb-shade { fill: #e2c9ce; }
[data-theme="light"] .dx-braid .tb-body { fill: #f4f5f8; }
[data-theme="light"] .dx-braid .tb-shine { fill: #ffffff; }
[data-theme="light"] .dx-braid .tb-ring { stroke: #d76b6b; }
[data-theme="light"] .dx-white-hose .tb-body { fill: #f1f3f7; }
[data-theme="light"] .dx-white-hose .tb-shine { fill: #ffffff; }
[data-theme="light"] .dx-pvc .tb-body { fill: #e8edf2; }
[data-theme="light"] .dx-pvc .tb-shine { fill: #f7f9fb; }
[data-theme="light"] .dx-cable .tb-body { fill: #6b7383; }
[data-theme="light"] .dx-cable .tb-shine { fill: #8d95a4; }
[data-theme="light"] .dx-coil .tb-body { fill: #e4e7ed; }
[data-theme="light"] .dx-coil .tb-shine { fill: #fbfcfd; }

.dx-print .iso-face-text { fill: var(--anatomy-mid); }
.dx-cut { fill: var(--anatomy-shade-1); stroke: var(--anatomy-mid); stroke-width: var(--anatomy-weight); stroke-linejoin: round; }
.dx-void { fill: var(--anatomy-shade-0); stroke: var(--anatomy-lo); stroke-width: var(--anatomy-weight); }
.dx-lever { fill: var(--anatomy-shade-2); stroke: var(--anatomy-mid); stroke-width: var(--anatomy-weight); stroke-linejoin: round; }

/* ---------- líquidos ---------- */
.dx-water .iso-fill { fill: var(--dx-water); fill-opacity: var(--dx-water-alpha); }
.dx-water .iso-shade { fill: var(--dx-water); fill-opacity: calc(var(--dx-water-alpha) * 0.9); }
.dx-water .iso-top { fill: var(--dx-water-top); fill-opacity: calc(var(--dx-water-alpha) * 1.35); }
.dx-water .iso-line { stroke: var(--dx-water-edge); stroke-opacity: 0.7; }
.dx-water-hot .iso-fill, .dx-water-hot .iso-shade { fill: color-mix(in srgb, var(--dx-hot) calc(var(--dx-heat, 0) * 70%), var(--dx-water)); }
.dx-water-hot .iso-top { fill: color-mix(in srgb, var(--dx-hot) calc(var(--dx-heat, 0) * 70%), var(--dx-water-top)); }
.dx-water-hot .iso-line { stroke: color-mix(in srgb, var(--dx-hot) calc(var(--dx-heat, 0) * 70%), var(--dx-water-edge)); }
.dx-bottle-water { fill: var(--dx-water); fill-opacity: calc(var(--dx-water-alpha) * 1.2); stroke: var(--dx-water-edge); stroke-opacity: 0.6; stroke-width: var(--anatomy-weight); }
.dx-glass-fill { fill: var(--dx-glass); stroke: none; }
.dx-glass .iso-line[data-tone="lo"] { stroke: var(--dx-glass-edge); stroke-opacity: 0.5; }
.dx-stream { fill: none; stroke: var(--dx-stream); stroke-width: 1.6; stroke-linecap: round; opacity: 0.85; }
.dx-bubble { fill: none; stroke: var(--dx-bubble); stroke-width: 0.5; vector-effect: non-scaling-stroke; }
.dx-drop { fill: var(--dx-drop); stroke: none; }
.dx-film { fill: none; stroke: var(--dx-drop); stroke-width: 0.6; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.dx-steam-puff { fill: var(--anatomy-mid); opacity: 0.12; }

.it[data-wave="cold"] .tb-body { fill: color-mix(in srgb, var(--dx-flow-cold) 55%, var(--pg-card)); }
.it[data-wave="warm"] .tb-body { fill: color-mix(in srgb, var(--dx-flow-warm) 55%, var(--pg-card)); }
.it[data-wave] .tb-shine { opacity: 0.55; }
.dx-heater > .iso-top { fill: color-mix(in srgb, var(--dx-hot) calc(var(--dx-heat, 0) * 70%), var(--anatomy-top)); }
.dx-heater > .iso-shade { fill: color-mix(in srgb, var(--dx-hot) calc(var(--dx-heat, 0) * 40%), var(--anatomy-shade-1)); }

.dx-lamp { --anatomy-top: var(--dx-lamp-off); }
.dx-lamp[data-glow] { filter: drop-shadow(0 0 2px var(--dx-lamp-glow)); }
.dx-lamp[data-lamp="lamp-run"][data-glow] { --anatomy-top: var(--dx-lamp-run); filter: drop-shadow(0 0 2px var(--dx-lamp-run-glow)); }
.dx-lamp[data-lamp="lamp-full"][data-glow] { --anatomy-top: var(--dx-lamp-full); }

/* pieza activa: azul, como en una lámina */
.it[data-on] {
  --anatomy-top: var(--dx-sel-top);
  --anatomy-face: var(--dx-sel-top);
  --anatomy-shade-0: var(--dx-sel-0);
  --anatomy-shade-1: var(--dx-sel-1);
  --anatomy-shade-2: var(--dx-sel-2);
  --anatomy-shade-3: var(--dx-sel-3);
  --anatomy-hi: var(--dx-sel-line);
  --anatomy-mid: var(--dx-sel-mid);
  --anatomy-lo: var(--dx-sel-mid);
  --anatomy-faint: var(--dx-sel-0);
}
.it[data-on] .iso-solid { --anatomy-top: var(--dx-sel-top); --anatomy-shade-0: var(--dx-sel-0); --anatomy-shade-1: var(--dx-sel-1); --anatomy-shade-2: var(--dx-sel-2); --anatomy-shade-3: var(--dx-sel-3); --anatomy-hi: var(--dx-sel-line); --anatomy-mid: var(--dx-sel-mid); --anatomy-lo: var(--dx-sel-mid); }
.it[data-on] .tb-body { fill: var(--dx-sel-2); }
.it[data-on] .tb-shine { fill: var(--dx-sel-top); }
.it[data-on] .tb-shade { fill: var(--dx-sel-0); }
.it[data-on] .tb-ring, .it[data-on] .tb-edge { stroke: var(--dx-sel-line); }
.it[data-hover]:not([data-on]) { --anatomy-hi: var(--dx-sel-mid); }

/* ---------- página ---------- */
.dx-page {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 48px);
  max-width: 1500px;
  margin: 0 auto;
  padding: 16px 16px 0;
  box-sizing: border-box;
}
.fg { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 16px); height: calc(100vh - 32px); height: calc(100dvh - 32px); min-height: 520px; }
.fg-card { position: relative; height: 100%; display: flex; flex-direction: column; background: var(--pg-card); box-shadow: 0 0 0 1px var(--pg-rule); overflow: hidden; }
.fg-progress { position: absolute; left: 0; right: 0; top: 0; height: 2px; }
.fg-progress i { display: block; height: 100%; width: 0; background: var(--pg-accent); transition: width 160ms linear; }
.fg-top { display: flex; justify-content: space-between; padding: 16px 18px 0; font: 400 10.5px/1 var(--font-mono); letter-spacing: 0.08em; color: var(--pg-muted); }
.fg-top span:last-child { text-transform: uppercase; letter-spacing: 0.14em; }
.fg-body { flex: 1; min-height: 0; display: grid; place-items: center; padding: 6px 46px 6px 12px; }
.dx-stage { position: relative; width: min(100%, calc((100vh - 150px) * 1.0857)); width: min(100%, calc((100dvh - 150px) * 1.0857)); touch-action: pan-y; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.dx-stage:focus-visible { outline: 1px solid var(--pg-accent); outline-offset: 4px; }
.dx-stage > svg, .dx-stage > canvas { display: block; width: 100%; height: auto; }
.dx-gl { position: absolute; inset: 0; height: 100% !important; pointer-events: none; mix-blend-mode: var(--dx-blend); }
.dx-stage[data-gl] .dx-fallback-steam { display: none; }
.dx-stage .it { cursor: pointer; }
.dx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.fg-steps { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: grid; gap: 2px; }
.fg-tick { position: relative; padding: 3px 6px; border: 0; background: none; font: 400 10px/1.2 var(--font-mono); color: var(--pg-muted); cursor: pointer; font-variant-numeric: tabular-nums; }
.fg-tick:hover { color: var(--pg-ink); }
.fg-tick[aria-current="step"] { color: var(--pg-accent); }
.fg-tick[aria-current="step"]::after { content: ""; position: absolute; right: -4px; top: 2px; bottom: 2px; width: 1px; background: var(--pg-accent); }
.fg-tick:focus-visible { outline: 1px solid var(--pg-accent); }

.fg-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 12px 12px; }
.fg-btn { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 9px; border: 0; background: var(--pg-card); box-shadow: inset 0 0 0 1px var(--pg-rule); font: 500 10.5px/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--pg-ink); cursor: pointer; }
.fg-btn kbd { font: 400 10px/1 var(--font-mono); letter-spacing: 0.06em; color: var(--pg-muted); text-transform: none; }
.fg-btn b { font-weight: 500; color: var(--pg-accent); }
.fg-btn:hover { box-shadow: inset 0 0 0 1px var(--pg-muted); }
.fg-btn:focus-visible { outline: 1px solid var(--pg-accent); outline-offset: 1px; }
.fg-btn[data-act="apart"][aria-pressed="true"], .fg-btn[data-act="power"][aria-pressed="false"] { color: var(--pg-accent); }
.fg-chip { margin-left: auto; max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; height: 24px; line-height: 24px; padding: 0 8px; box-shadow: inset 0 0 0 1px var(--pg-rule); font: 400 10.5px var(--font-mono); color: var(--pg-text); font-variant-numeric: tabular-nums; }

/* ---------- relato ---------- */
.st { min-width: 0; padding: 0 clamp(0px, 2vw, 32px) 30vh; max-width: 640px; }
.st-mast { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 0 18px; border-bottom: 1px solid var(--pg-rule); box-shadow: 0 6px 0 -5px var(--pg-rule); }
.st-mark { font: 700 22px/1 var(--font-display); letter-spacing: 0.22em; text-transform: uppercase; color: var(--pg-ink); }
.st-mast-sub { font: 400 10.5px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--pg-muted); }
.dx-step { padding: 14vh 0 10vh; border-bottom: 1px solid var(--pg-rule); scroll-margin-top: 10vh; }
.st-intro { padding-top: 8vh; }
.st-kicker { margin: 0 0 14px; font: 400 11px/1.4 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--pg-muted); }
.st-kicker em { font-style: normal; color: var(--pg-accent); }
.st-hero { margin: 0; font: 700 clamp(56px, 7vw, 96px)/0.9 var(--font-display); letter-spacing: -0.01em; color: var(--pg-ink); text-wrap: balance; }
.st-hero-sub { margin: 8px 0 22px; font: 500 clamp(20px, 2vw, 26px)/1.1 var(--font-display); text-transform: uppercase; letter-spacing: 0.02em; color: var(--pg-muted); text-wrap: balance; }
.st-lead { margin: 0 0 26px; font-size: 17px; line-height: 1.55; color: var(--pg-ink); max-width: 34em; }
.st-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--pg-rule); border-bottom: 1px solid var(--pg-rule); }
.st-stat { padding: 12px 12px 14px; min-width: 0; }
.st-stat + .st-stat { border-left: 1px solid var(--pg-rule); }
.st-stat span { display: block; font: 400 10px/1.3 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--pg-muted); }
.st-stat b { display: flex; align-items: baseline; gap: 3px; margin-top: 8px; font: 600 30px/1 var(--font-display); color: var(--pg-ink); font-variant-numeric: tabular-nums; }
.st-stat b i { font-style: normal; }
.st-stat small { font: 500 13px/1 var(--font-body); color: var(--pg-muted); }
.st-keys { margin: 18px 0 0; font: 400 11.5px/1.9 var(--font-mono); color: var(--pg-muted); }
kbd { font-family: var(--font-mono); }
.st-keys kbd { display: inline-block; padding: 0 5px; line-height: 1.5; box-shadow: inset 0 0 0 1px var(--pg-rule); background: var(--pg-card); color: var(--pg-ink); font-size: 10.5px; }
.st-num { margin: 0 0 12px; font: 400 11px/1 var(--font-mono); letter-spacing: 0.08em; color: var(--pg-muted); }
.st-num em { font-style: normal; color: var(--pg-accent); }
.st-title { margin: 0; font: 700 clamp(40px, 4.6vw, 60px)/0.95 var(--font-display); text-transform: uppercase; letter-spacing: 0.005em; color: var(--pg-ink); text-wrap: balance; }
.st-title-s { margin-top: 40px; font-size: clamp(28px, 3vw, 38px); }
.st-sub { margin: 16px 0 14px; font-size: 18px; font-weight: 500; line-height: 1.35; color: var(--pg-ink); max-width: 28em; text-wrap: balance; }
.st-body { margin: 0 0 24px; font-size: 15.5px; line-height: 1.65; color: var(--pg-text); max-width: 36em; }
.st-spec { margin: 0; border-top: 1px solid var(--pg-rule); }
.st-spec div { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1fr); gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--pg-rule); }
.st-spec dt { font: 400 10px/1.6 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--pg-muted); }
.st-spec dd { margin: 0; font-size: 14.5px; line-height: 1.4; color: var(--pg-ink); }
.st-table { overflow-x: auto; margin-top: 18px; }
.st-table table { width: 100%; border-collapse: collapse; font-size: 14px; border-top: 1px solid var(--pg-rule); }
.st-table th, .st-table td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--pg-rule); text-align: left; vertical-align: top; line-height: 1.45; }
.st-table th { width: 34%; font: 400 10px/1.7 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--pg-muted); }
.st-table td { color: var(--pg-ink); }
.st-tag { display: inline-block; margin-left: 4px; padding: 0 5px; font: 400 9.5px/1.6 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; box-shadow: inset 0 0 0 1px var(--pg-rule); color: var(--pg-muted); }
.st-tag[data-k="foto"] { color: var(--pg-accent); }
.st-tag[data-k="cat"] { color: var(--pg-text); }
.st-tag[data-k="duda"] { color: var(--pg-amber); }
.st-src { margin: 24px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--pg-muted); }
.st-src a { color: var(--pg-accent); }
.st-sheet { border-bottom: 0; }

@media (max-width: 900px) {
  .dx-page { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0 16px; }
  .fg { top: env(safe-area-inset-top, 0px); height: 54vh; height: 54dvh; min-height: 0; z-index: 2; margin: 0 -16px; }
  .fg-card { box-shadow: 0 1px 0 0 var(--pg-rule); }
  .fg-body { padding: 4px 34px 0 4px; }
  .dx-stage { width: min(100%, calc((54dvh - 120px) * 1.0857)); }
  .fg-steps { right: 4px; gap: 0; }
  .fg-tick { padding: 1px 4px; font-size: 9px; }
  .fg-bar { gap: 4px; padding: 0 8px 8px; }
  .fg-btn { height: 26px; padding: 0 7px; font-size: 9.5px; gap: 5px; }
  .fg-btn kbd { display: none; }
  .fg-chip { display: none; }
  .st { padding-bottom: 20vh; }
  .dx-step { padding: 8vh 0 6vh; scroll-margin-top: 56vh; }
  .st-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-stat:nth-child(3) { border-left: 0; }
  .st-stat:nth-child(n + 3) { border-top: 1px solid var(--pg-rule); }
}
@media (prefers-reduced-motion: reduce) {
  .fg-progress i { transition: none; }
}
.it[data-on] .dx-heater > .iso-top { fill: var(--dx-sel-top); }
.it[data-on] .dx-heater > .iso-shade { fill: var(--dx-sel-1); }
.fg-bar { flex-wrap: nowrap; }
.fg-chip { flex: 1 1 120px; text-align: right; }
@media (max-width: 1100px) { .fg-bar { flex-wrap: wrap; } .fg-btn kbd { display: none; } }

/* ---------- visor 3D ---------- */
.dx-stage > .dx-3d { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: none; cursor: grab; touch-action: pan-y; outline: none; }
.dx-stage > .dx-3d.is-dragging { cursor: grabbing; }
.dx-root[data-view="3d"] .fg-body { display: block; position: relative; }
.dx-root[data-view="3d"] .dx-stage { position: absolute; inset: 6px 46px 34px 12px; width: auto; }
.dx-root[data-view="3d"] .dx-stage > svg, .dx-root[data-view="3d"] .dx-stage > .dx-gl { display: none; }
.dx-root[data-view="3d"] .dx-stage > .dx-3d { display: block; }
.fg-view { display: none; align-items: center; gap: 0; box-shadow: inset 0 0 0 1px var(--pg-rule); height: 22px; margin-top: -6px; }
.dx-root[data-v3] .fg-view { display: inline-flex; }
.fg-view button { appearance: none; border: 0; background: none; height: 22px; padding: 0 9px; font: 500 10.5px/22px var(--font-mono); letter-spacing: 0.08em; color: var(--pg-muted); cursor: pointer; }
.fg-view button[aria-pressed="true"] { background: var(--pg-ink); color: var(--pg-card); }
.fg-view button:focus-visible { outline: 1px solid var(--pg-accent); outline-offset: 1px; }
.fg-view kbd { font: 400 9.5px/1 var(--font-mono); color: var(--pg-muted); padding: 0 7px; }
.fg-hint { display: none; position: absolute; left: 14px; right: 50px; bottom: 8px; margin: 0; font: 400 10px/1.5 var(--font-mono); letter-spacing: 0.02em; color: var(--pg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.fg-hint kbd { font: inherit; padding: 0 3px; margin: 0 1px; box-shadow: inset 0 0 0 1px var(--pg-rule); color: var(--pg-text); }
.fg-hint-touch { display: none; }
.dx-root[data-view="3d"] .fg-hint { display: block; }
@media (hover: none) { .fg-hint-mouse { display: none; } .fg-hint-touch { display: inline; } }
@media (max-width: 900px) {
  .dx-root[data-view="3d"] .dx-stage { inset: 4px 34px 24px 4px; }
  .fg-hint { left: 6px; right: 36px; bottom: 4px; }
  .fg-view kbd { display: none; }
}

/* ---------- esquema de cañerías ---------- */
.fg-schema { display: none; appearance: none; border: 0; background: none; height: 22px; margin-top: -6px; padding: 0 9px; box-shadow: inset 0 0 0 1px var(--pg-rule); font: 500 10.5px/22px var(--font-mono); letter-spacing: 0.08em; color: var(--pg-muted); cursor: pointer; }
.fg-schema kbd { font: 400 9.5px/1 var(--font-mono); margin-left: 6px; color: var(--pg-muted); }
.fg-schema[aria-pressed="true"] { background: var(--pg-accent); color: #fff; box-shadow: none; }
.fg-schema[aria-pressed="true"] kbd { color: #ffffffb0; }
.fg-schema:focus-visible { outline: 1px solid var(--pg-accent); outline-offset: 1px; }
.dx-root[data-v3][data-view="3d"] .fg-schema { display: inline-block; }
.fg-legend { display: none; position: absolute; left: 14px; top: 8px; z-index: 2; max-width: 210px; padding: 9px 11px; background: color-mix(in srgb, var(--pg-card) 88%, transparent); box-shadow: inset 0 0 0 1px var(--pg-rule); font: 400 10px/1.55 var(--font-mono); color: var(--pg-text); pointer-events: none; }
.fg-legend b { display: block; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pg-muted); margin-bottom: 4px; }
.fg-legend span { display: flex; align-items: center; gap: 7px; }
.fg-legend i { width: 18px; height: 5px; border-radius: 3px; background: var(--c); flex: none; }
.fg-legend i.is-steam { height: 9px; width: 9px; border-radius: 50%; margin: 0 4.5px; }
.fg-legend i.is-arrow { width: 0; height: 0; border-radius: 0; background: none; border-left: 9px solid var(--pg-text); border-top: 5px solid transparent; border-bottom: 5px solid transparent; margin: 0 4.5px; }
.fg-legend small { display: block; margin-top: 5px; color: var(--pg-muted); font-size: 9.5px; line-height: 1.4; }
.dx-root[data-view="3d"][data-schema] .fg-legend { display: block; }
@media (max-width: 900px) { .fg-legend { left: 6px; top: 4px; max-width: 170px; padding: 6px 8px; font-size: 9px; } .fg-legend small { display: none; } .fg-schema kbd { display: none; } }
.fg-legend em { display: block; margin-top: 6px; font-style: normal; color: var(--pg-accent); line-height: 1.4; }
@media (max-width: 900px) { .fg-legend b, .fg-legend em { display: none; } .fg-legend { line-height: 1.35; } }
a.st-back { color: var(--pg-muted); text-decoration: none; }
a.st-back:hover, a.st-back:focus-visible { color: var(--pg-ink); }