/* Reductor de engranajes (muestras/reductor/). Lo escribe «Figuras técnicas/engranajes/build.mjs --sitio»: no se edita a mano.
   Primero la hoja de la biblioteca Anatomy (licencia MIT, licencias/anatomy-MIT.txt) y el tema papel; después, lo propio de la página. */

.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}}

.iso[data-theme="papel"]{
  --anatomy-page:#efece4;--anatomy-card:#f7f4ec;--anatomy-text:#5b564c;--anatomy-strong:#23201b;--anatomy-muted:#8f897c;
  --anatomy-paper:#f7f4ec;--anatomy-face:#fffdf8;--anatomy-top:#fffdf8;
  --anatomy-shade-0:#dcd6c8;--anatomy-shade-1:#e5e0d3;--anatomy-shade-2:#eee9de;--anatomy-shade-3:#f5f2e9;
  --anatomy-lit-top:#fff7f2;--anatomy-lit-shade:#f2e4dc;
  --anatomy-hi:#2b2722;--anatomy-mid:#8b8477;--anatomy-lo:#b6af9f;--anatomy-faint:#d7d1c3;--anatomy-lit:#c0392b;
  --anatomy-halo:#7c7362;--anatomy-halo-opacity:.30;--anatomy-dot:#3b362e;
  --anatomy-red:#c0392b;--anatomy-green:#2f8f5b;--anatomy-blue:#3a5fc8;
  --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;
}
body[data-theme="papel"]{color-scheme:light}
.iso-line.cordon{stroke-width:1.5px}
.iso-stage{touch-action:pan-y;outline:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.iso-stage:focus-visible{outline:1px solid var(--anatomy-muted);outline-offset:6px}

@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .iso[data-theme="papel"] { --anatomy-page:#141011;--anatomy-card:#1c1718;--anatomy-text:#cbc0c1;--anatomy-strong:#f3eded;--anatomy-muted:#a39597;
  --anatomy-paper:#1c1718;--anatomy-face:#2b2425;--anatomy-top:#2d2627;
  --anatomy-shade-0:#151011;--anatomy-shade-1:#191415;--anatomy-shade-2:#1e1819;--anatomy-shade-3:#231d1e;
  --anatomy-lit-top:#3d2428;--anatomy-lit-shade:#311d21;
  --anatomy-hi:#ebe2e2;--anatomy-mid:#998c8e;--anatomy-lo:#6e6164;--anatomy-faint:#463c3e;--anatomy-lit:#f0566a;
  --anatomy-halo:#000000;--anatomy-halo-opacity:.6;--anatomy-dot:#ebe2e2;
  --anatomy-red:#f0566a;--anatomy-green:#4fc1b3;--anatomy-blue:#7ea8f2;
  --anatomy-lift:0 0 0 1px #00000040; } }
:root[data-theme="dark"] .iso[data-theme="papel"] { --anatomy-page:#141011;--anatomy-card:#1c1718;--anatomy-text:#cbc0c1;--anatomy-strong:#f3eded;--anatomy-muted:#a39597;
  --anatomy-paper:#1c1718;--anatomy-face:#2b2425;--anatomy-top:#2d2627;
  --anatomy-shade-0:#151011;--anatomy-shade-1:#191415;--anatomy-shade-2:#1e1819;--anatomy-shade-3:#231d1e;
  --anatomy-lit-top:#3d2428;--anatomy-lit-shade:#311d21;
  --anatomy-hi:#ebe2e2;--anatomy-mid:#998c8e;--anatomy-lo:#6e6164;--anatomy-faint:#463c3e;--anatomy-lit:#f0566a;
  --anatomy-halo:#000000;--anatomy-halo-opacity:.6;--anatomy-dot:#ebe2e2;
  --anatomy-red:#f0566a;--anatomy-green:#4fc1b3;--anatomy-blue:#7ea8f2;
  --anatomy-lift:0 0 0 1px #00000040; }

/* Barra superior: volver a los trabajos y el nombre, que lleva al inicio (como en las demás demos) */
.barra-demo { background: var(--bg); border-bottom: 1px solid var(--rule); }
.barra-demo-interior { display: flex; align-items: center; justify-content: space-between; gap: 8px 20px; min-height: 56px; }
.barra-volver, .barra-marca { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; }
.barra-volver { gap: 10px; font: 700 .95rem/1.2 var(--font-display); }
.barra-volver::before { content: ""; width: 8px; height: 8px; margin-left: 2px; flex: none; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform var(--dur-hover) ease; }
.barra-marca { font: 800 1rem/1.15 var(--font-display); letter-spacing: -.01em; }
/* Solo con ratón: en una pantalla táctil, el :hover se queda pegado después de tocar */
@media (hover: hover) and (pointer: fine) {
  .barra-volver:hover { color: var(--accent-ink); }
  .barra-volver:hover::before { transform: translateX(-3px) rotate(45deg); }
  .barra-marca:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); }
}
/* Al pulsar, el mismo aspecto que con el ratón encima: sin esta regla, el a:active de base.css pondría el nombre en
   rojo. «Volver a los trabajos» ya se pone rojo con el ratón, así que a:active le sirve. */
.barra-marca:active { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); }

/* Cabecera, más corta que la portada de las páginas para que la figura quede cerca */
.reductor-portada { padding-block: clamp(28px, 4.5vw, 52px) clamp(20px, 3vw, 32px); }
.reductor-portada-interior { display: grid; gap: 14px; }
.reductor-zona { padding-bottom: clamp(40px, 6vw, 72px); }
.reductor-zona-interior { display: grid; gap: 14px; }
.reductor-zona-interior > * { max-width: 64rem; }
.reductor-instruccion { font: 600 .98rem/1.45 var(--font-display); color: var(--ink-2); }
.si-tactil { display: none; }
@media (pointer: coarse) { .si-puntero { display: none; } .si-tactil { display: inline; } }

/* La figura: la lámina de papel de la biblioteca, con las esquinas redondeadas y el borde de las tarjetas del sitio */
.reductor-figura { margin: 0; display: grid; gap: 14px; }
.reductor-figura .iso-plate { padding: clamp(14px, 3vw, 32px) clamp(8px, 3vw, 32px) clamp(12px, 2.4vw, 24px); border-radius: var(--radio-grande); box-shadow: 0 0 0 1px var(--rule); }
.reductor-figura .iso-stage { border-radius: 12px; cursor: ew-resize; }
.reductor-figura .iso-stage:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
/* La lámina, la lectura y los botones caben juntos en la pantalla (también en el visor): el dibujo, de 3:2, no pasa
   del alto que dejan la instrucción, los márgenes de la lámina, la lectura y los botones. */
.reductor-figura .iso-stage svg { width: min(100%, max(420px, calc((100svh - 220px) * 1.5))); margin-inline: auto; }
.reductor-lectura { margin-top: clamp(6px, 1.4vw, 14px); text-align: right; font: 600 .92rem/1.4 var(--font-display); color: var(--anatomy-text); font-variant-numeric: tabular-nums; }
.reductor-mandos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.reductor-mandos .boton[data-pausa] { min-width: 13.5rem; }
.reductor-figura .iso-legend { margin: 0; gap: 8px; font: 500 .9rem/1.55 var(--font-display); color: var(--muted); }
.reductor-figura .iso-keys { gap: 6px 22px; color: var(--ink-2); }
.reductor-figura .iso-caption { max-width: 46rem; }

/* Pie: de qué es la figura, la licencia de la biblioteca y el tema */
.pie-demo { margin-top: auto; border-top: 1px solid var(--rule); padding-block: 22px; font: 500 .88rem/1.5 var(--font-display); color: var(--muted); }
.pie-demo-interior { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.pie-demo a { color: var(--ink); }

/* Dentro del visor de trabajos.html (un marco): sin barra ni pie, y la cabecera solo para lectores de pantalla */
.incrustada .barra-demo, .incrustada .pie-demo, .incrustada .reductor-video { display: none; }
.incrustada .reductor-portada { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.incrustada .reductor-zona { padding-top: 16px; padding-bottom: 20px; }

@media (max-width: 560px) {
  .reductor-lectura { text-align: left; font-size: .86rem; }
  .reductor-mandos .boton { flex: 1 1 auto; }
  .reductor-mandos .boton[data-pausa] { flex-basis: 100%; min-width: 0; }
}
@media (forced-colors: active) { .reductor-figura .iso-plate { border: 1px solid CanvasText; } }
@media print { .barra-demo, .reductor-mandos, .reductor-instruccion, .pie-demo .pie-tema { display: none !important; } }