.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}}
/* The home page's two anatomy figures. The kit's dark tokens, on the site's black panels, with the book orange as the one accent. */
.an-iso {
  --anatomy-paper: #0a0a0b;
  --anatomy-face: #26262a; --anatomy-top: #28282c;
  --anatomy-shade-0: #141416; --anatomy-shade-1: #18181b; --anatomy-shade-2: #1d1d20; --anatomy-shade-3: #222226;
  --anatomy-lit-top: #34343a; --anatomy-lit-shade: #2a2a2e;
  --anatomy-hi: #ececee; --anatomy-mid: #8e8e94; --anatomy-lo: #5a5a60; --anatomy-faint: #3a3a3f;
  --anatomy-halo: #000000; --anatomy-dot: #f5f5f7;
  --anatomy-lit: #FF7A3D;
  --an-acento: #FF7A3D; --an-acento-medio: #D9531F; --an-acento-oscuro: #8A2C0E;
  --an-pantalla: #050505;
}
.an-figura text { font-family: 'Geist', 'Helvetica Neue', Helvetica, Arial, sans-serif; }

/* the order card, and anything that is lit, takes the accent */
.an-orden > .iso-fill { fill: var(--an-acento-oscuro); }
.an-orden > .iso-top { fill: var(--an-acento); }
.an-orden > .iso-shade { fill: var(--an-acento-medio); }
.an-orden > .iso-shade[data-shade="0"] { fill: var(--an-acento-oscuro); }
.an-orden > .iso-edge, .an-orden > .iso-crease { stroke: #FFB089; }
.an-orden-texto { stroke: var(--an-acento-oscuro); }
.an-stock > .iso-top { fill: var(--an-acento); }
.an-stock > .iso-shade { fill: var(--an-acento-medio); }
.an-hoja > .iso-top { fill: #DADADA; }
.an-hoja > .iso-shade { fill: #9a9a9a; }

/* faces: bays, screens, recesses, keys */
.an-bahia { fill: #101010; }
.an-pantalla, .an-hueco { fill: var(--an-pantalla); }
.an-teclas rect { fill: #1e1e1e; stroke: #3e3e3e; stroke-width: .4px; vector-effect: non-scaling-stroke; }
.an-disco { fill: var(--anatomy-face); }
.an-barra { fill: #1d1d1d; }
.an-digitos { font-family: var(--anatomy-mono); font-size: 8.4px; font-weight: 600; letter-spacing: .06em; }
.an-apagado { fill: #2c2c2c; opacity: calc(1 - var(--on, 0)); }
.an-encendido { fill: var(--an-acento); opacity: var(--on, 0); }
.an-led { fill: color-mix(in srgb, var(--an-acento) calc(var(--on, 0) * 100%), #333333); }
.an-portal-on { opacity: var(--on, 0); }
.an-portal-off { opacity: calc(1 - var(--on, 0)); }
.an-pt-grande { fill: #F5F5F7; font-size: 7.6px; font-weight: 600; letter-spacing: -.01em; }
.an-pt-pequeno { fill: #86868B; font-size: 4.6px; font-weight: 500; }
.an-pt-acento { fill: var(--an-acento); }
.an-lampara :is(.iso-shade, .iso-top) { fill: color-mix(in srgb, var(--an-acento) calc(var(--on, 0) * 90%), var(--anatomy-shade-3)); stroke: color-mix(in srgb, var(--an-acento) calc(var(--on, 0) * 90%), var(--anatomy-shade-3)); }
.an-lampara .iso-edge { stroke: color-mix(in srgb, #FFB089 calc(var(--on, 0) * 100%), var(--anatomy-hi)); }
.an-cable .tb-body { fill: color-mix(in srgb, var(--an-acento-medio) calc(var(--on, 0) * 100%), var(--anatomy-shade-2)); }
.an-cable .tb-shine { fill: color-mix(in srgb, var(--an-acento) calc(var(--on, 0) * 100%), var(--anatomy-top)); }
.an-cable .tb-shade { fill: color-mix(in srgb, var(--an-acento-oscuro) calc(var(--on, 0) * 100%), var(--anatomy-shade-0)); }

/* the method rack: every stage is a set of groups that fade or travel in, stepped by data-paso on #mapa-metodo */
.an-tornillo { fill: var(--anatomy-mid); }
.an-hueco-borde { fill: none; stroke: var(--anatomy-mid); stroke-width: .5px; vector-effect: non-scaling-stroke; }
.an-cuadro { fill: var(--an-acento); }
.an-prevision { fill: none; stroke: var(--an-acento); stroke-width: 1.1px; stroke-dasharray: 2 1.6; vector-effect: non-scaling-stroke; }
.an-tarjeta { fill: #DADADA; }
.an-cifra { font-family: var(--anatomy-mono); font-size: 6.2px; font-weight: 600; letter-spacing: .02em; transition: opacity .5s ease, fill .5s ease; }
.an-hoy { fill: #8e8e94; }
.an-una { fill: #F5F5F7; opacity: 0; }
.an-estado { fill: #333336; transition: fill .5s ease; }
.an-ficha { opacity: 0; transition: opacity .5s ease; }
.an-bus-texto { fill: var(--an-acento-oscuro); font-weight: 700; }
.an-cable-vivo .tb-body { fill: var(--an-acento-medio); }
.an-cable-vivo .tb-shine { fill: var(--an-acento); }
.an-cable-vivo .tb-shade { fill: var(--an-acento-oscuro); }
.an-rack .an-m { transition: opacity .55s ease, transform .9s cubic-bezier(.4, 0, .2, 1); }
.an-rack .an-m-bus { transition-delay: .25s; }
[data-paso]:not([data-paso="0"]) .an-rack .an-m-hoy { opacity: 0; }
[data-paso="0"] .an-rack .an-m-bus { opacity: 0; transform: translateY(6px); transition-delay: 0s; }
[data-paso]:is([data-paso="2"], [data-paso="3"], [data-paso="4"]) .an-rack .an-m-copias { opacity: 0; transform: translate(var(--sx), var(--sy)); }
[data-paso]:is([data-paso="2"], [data-paso="3"], [data-paso="4"]) .an-rack .an-hoy { opacity: 0; }
[data-paso]:is([data-paso="2"], [data-paso="3"], [data-paso="4"]) .an-rack .an-una { opacity: 1; }
[data-paso="2"] .an-rack .an-una { fill: var(--an-acento); }
[data-paso]:is([data-paso="3"], [data-paso="4"]) .an-rack .an-estado { fill: var(--an-acento); }
[data-paso]:is([data-paso="3"], [data-paso="4"]) .an-rack .an-ficha { opacity: 1; }
[data-paso]:not([data-paso="4"]) .an-rack .an-m-arriba { opacity: 0; transform: translate(var(--lx), var(--ly)); }
@media (prefers-reduced-motion: reduce) { .an-rack .an-m, .an-cifra, .an-estado, .an-ficha { transition: none; } }

/* the city block */
.an-ventana { fill: #0c0c0e; stroke: #3a3a3f; stroke-width: .4px; vector-effect: non-scaling-stroke; }
.an-vidrio { fill: #101216; stroke: #4a4a50; stroke-width: .45px; vector-effect: non-scaling-stroke; }
.an-luz { fill: color-mix(in srgb, var(--an-acento) calc(var(--on, 1) * 70%), #101216); }
.an-rotulo { fill: #121214; stroke: #4a4a50; stroke-width: .45px; vector-effect: non-scaling-stroke; }
.an-letrero { fill: #b8b8bd; font-size: 3.5px; font-weight: 600; letter-spacing: .14em; }
.an-rotulo-vivo { fill: color-mix(in srgb, var(--an-acento) calc(var(--on, 0) * 100%), #121214); }
.an-letrero-vivo { fill: color-mix(in srgb, #1a0a03 calc(var(--on, 0) * 100%), #b8b8bd); }
.an-cajero { fill: color-mix(in srgb, var(--an-acento) calc(var(--on, 0) * 100%), #1d1d20); }
.an-zanja { fill: none; stroke: #2a2a2e; stroke-width: 3px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.an-fibra { fill: none; stroke: var(--an-acento); stroke-width: 2px; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: calc(1 - var(--on, 0)); opacity: calc(var(--on, 0) * 4); vector-effect: non-scaling-stroke; }
.an-bandera { stroke: var(--an-acento); stroke-width: 1.4px; }
.an-bandera-punta circle { fill: var(--an-acento); opacity: 1; }
.an-persiana > .iso-top, .an-persiana > .iso-shade { fill: #2c2c30; }
.an-pedido-halo { fill: var(--an-acento); opacity: .35; filter: blur(5px); }
/* Scene Calle: the order (parcel, tape, label, glow, trail), the fibre ducts (the APIs) and the street's own marks. */

/* markings on the road */
.an-iso .an-calle-cebra { fill: #54545a; opacity: .62; stroke: none; }
.an-iso .an-calle-marca { fill: #54545a; opacity: .7; stroke: none; }

/* traffic lights, car lights */
.an-iso .an-calle-lente { fill: #0b0b0d; stroke: #55555b; stroke-width: .35px; vector-effect: non-scaling-stroke; }
.an-iso .an-calle-faro { fill: #9c9ca2; stroke: none; }

/* a fibre duct: a cut in the pavement, covers with joints, and the light that runs through it */
.an-iso .an-calle-zanja-borde, .an-iso .an-calle-zanja, .an-iso .an-calle-luz { fill: none; stroke-linejoin: round; }
.an-iso .an-calle-zanja-borde { stroke: #46464b; stroke-linecap: butt; }
.an-iso .an-calle-zanja { stroke: #0c0c0e; stroke-linecap: butt; }
.an-iso .an-calle-luz { stroke-linecap: butt; }
.an-iso .an-calle-luz-halo { stroke: var(--an-acento-medio); opacity: .34; }
.an-iso .an-calle-luz-nucleo { stroke: var(--an-acento); }
.an-iso .an-calle-punta { fill: #FFB089; opacity: 0; filter: drop-shadow(0 0 2.4px var(--an-acento)); }

/* the parcel: orange box, cream tape, a shipping label; a glow and a locator ring on the ground */
.an-iso .an-calle-caja > .iso-fill { fill: #8A2C0E; }
.an-iso .an-calle-caja > .iso-shade[data-shade="0"] { fill: #8A2C0E; }
.an-iso .an-calle-caja > .iso-shade[data-shade="1"] { fill: #B8420F; }
.an-iso .an-calle-caja > .iso-shade[data-shade="2"] { fill: #D9531F; }
.an-iso .an-calle-caja > .iso-shade[data-shade="3"] { fill: #E8622B; }
.an-iso .an-calle-caja > .iso-top { fill: #FF7A3D; }
.an-iso .an-calle-caja > .iso-edge { stroke: #FFC9A8; }
.an-iso .an-calle-caja > .iso-crease, .an-iso .an-calle-caja > .iso-bevel { stroke: #FFB089; }
.an-iso .an-calle-cinta { fill: #F6E3D3; stroke: none; opacity: .96; }
.an-iso .an-calle-papel { fill: #F4ECE4; stroke: #2a1209; stroke-width: .25px; vector-effect: non-scaling-stroke; }
.an-iso .an-calle-papel-cab { fill: #2A1209; }
.an-iso .an-calle-pt-cab { fill: #FFD7BD; font-size: .86px; font-weight: 700; letter-spacing: .16em; }
.an-iso .an-calle-pt-num { fill: #2A1209; font-size: 2.55px; font-weight: 800; letter-spacing: -.01em; }
.an-iso .an-calle-barras { fill: #2A1209; }
.an-iso .an-calle-anillo { fill: none; stroke: var(--an-acento); stroke-width: 1px; opacity: .6; vector-effect: non-scaling-stroke; }
.an-iso .an-calle-anillo-2 { opacity: .22; }
.an-iso .an-calle-rastro { fill: none; stroke: var(--an-acento); stroke-linecap: round; stroke-linejoin: round; }

/* Scene CRM: glass, spandrels, the funnel display and the fascia sign. --on (0..1) is written by the live code. */
.an-crm-fondo { fill: #101215; }
.an-crm-vidrio { fill: #0f1114; fill-opacity: .3; stroke: none; }
.an-crm-vidrio-puerta { fill: #0f1114; fill-opacity: .4; }
.an-crm-reflejo { fill: #ffffff; opacity: .05; }
.an-crm-panel { fill: var(--anatomy-shade-2); stroke: #3a3a3f; stroke-width: .35px; vector-effect: non-scaling-stroke; }
.an-crm-panel-rotulo { fill: #0d0d0f; stroke: #4a4a50; }
.an-crm-ranura { fill: #0c0c0e; stroke: #3a3a3f; stroke-width: .3px; vector-effect: non-scaling-stroke; }
.an-crm-puerta-acero { fill: #1e1e22; stroke: none; }
.an-crm-rejilla { fill: #0e0e10; }
.an-crm-zocalo { fill: #2a2a2f; }
.an-crm-salida { fill: #131315; stroke: #4a4a50; stroke-width: .35px; vector-effect: non-scaling-stroke; }
.an-crm-monitor { fill: #090a0c; stroke: #3e3e44; stroke-width: .3px; vector-effect: non-scaling-stroke; }
.an-crm-monitor-lineas { fill: none; stroke: #4a4a52; stroke-width: .35px; stroke-linecap: round; vector-effect: non-scaling-stroke; }

/* the fascia sign */
.an-crm-rotulo { fill: color-mix(in srgb, var(--an-acento-oscuro) calc(var(--on, 0) * 100%), #121214); stroke: color-mix(in srgb, var(--an-acento) calc(var(--on, 0) * 100%), #4a4a50); stroke-width: .5px; vector-effect: non-scaling-stroke; }
.an-crm-letrero { fill: color-mix(in srgb, #FFD2B8 calc(var(--on, 0) * 100%), #9a9aa0); font-size: 4.8px; font-weight: 700; letter-spacing: .1em; }
.an-crm-letrero-pq { font-size: 1.9px; font-weight: 600; letter-spacing: .2em; }

/* the funnel display */
.an-crm-marco { fill: #1a1a1d; stroke: var(--anatomy-mid); stroke-width: .5px; vector-effect: non-scaling-stroke; }
.an-crm-pantalla { fill: var(--an-pantalla); }
.an-crm-cabecera { fill: color-mix(in srgb, var(--an-acento) calc(var(--on, 0) * 100%), #1a1a1d); }
.an-crm-t { font-weight: 600; letter-spacing: .02em; }
.an-crm-t-cab { font-size: 2.4px; letter-spacing: .06em; fill: #9a9aa0; }
.an-crm-t-fin { fill: #1a0a03; font-weight: 700; }
.an-crm-check { fill: none; stroke: #1a0a03; stroke-width: .7px; stroke-linecap: round; stroke-linejoin: round; }
.an-crm-off { opacity: calc(1 - var(--on, 0) * 1.6); }
.an-crm-on { opacity: calc(var(--on, 0) * 1.6 - .6); }
.an-crm-fila { fill: #151517; stroke: #34343a; stroke-width: .5px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.an-crm-fila-fin { fill: color-mix(in srgb, var(--an-acento-oscuro) calc(var(--on, 0) * 100%), #151517); stroke: color-mix(in srgb, var(--an-acento) calc(var(--on, 0) * 100%), #34343a); }
.an-crm-t-fila { font-size: 2.8px; fill: #9a9aa0; }
.an-crm-t-ganado { fill: color-mix(in srgb, #FFB089 calc(var(--on, 0) * 100%), #9a9aa0); }
.an-crm-ficha-gris { fill: #202024; stroke: #3a3a40; stroke-width: .35px; vector-effect: non-scaling-stroke; }
.an-crm-ficha-lineas { fill: none; stroke: #55555c; stroke-width: .5px; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.an-crm-ficha { fill: var(--an-acento); stroke: #FFB089; stroke-width: .4px; vector-effect: non-scaling-stroke; }
.an-crm-ficha-halo { fill: var(--an-acento); opacity: .35; filter: blur(.9px); }
.an-crm-t-ficha { font-size: 2.6px; font-weight: 700; fill: #1a0a03; }

/* the sales floor behind the glass: a little lighter than the facade so it reads as a lit room */
.an-crm-suelo > .iso-fill { fill: #202226; }
.an-crm-suelo > .iso-top { fill: #34363c; }
.an-crm-suelo > .iso-shade { fill: #272a2f; }

/* Scene ERP. The live code sets three numbers on .an-erp, each 0..1: --reg (order registered), --res (stock reserved), --doc (invoice out).
   Everything that "reacts" reads one of them; nothing here animates by itself. */
.an-erp { --reg: 0; --res: 0; --doc: 0; }
.an-erp-lr { --lit: var(--reg); }
.an-erp-ls { --lit: var(--res); }
.an-erp-lf { --lit: var(--doc); }

/* the facade: windows, sills, piers, the band, frames */
.an-erp-v0, .an-erp-v1, .an-erp-v2, .an-erp-alfeizar, .an-erp-marco { stroke-width: .4px; vector-effect: non-scaling-stroke; }
.an-erp-v0 { fill: #0c0d10; stroke: #3a3a40; }
.an-erp-v1 { fill: #1b1e25; stroke: #3a3a40; }
.an-erp-v2 { fill: #2b2b30; stroke: #3a3a40; }
.an-erp-alfeizar { fill: #34343a; stroke: #4a4a50; }
.an-erp-pilar { fill: #2d2d32; opacity: .7; }
.an-erp-friso { fill: #2c2c31; }
.an-erp-marco { fill: #1b1b1e; stroke: #55555b; }
.an-erp-sujecion { fill: #3a3a40; }
.an-erp-tirador { fill: none; stroke: #b8b8bd; stroke-width: 1px; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.an-erp-cristal { fill: #0b0d11; }
.an-erp-reflejo { fill: #ffffff; opacity: .045; }
.an-erp-quiosco { fill: #1f1f23; }
.an-erp-capot { fill: #2a2a2f; stroke: #4a4a50; stroke-width: .4px; vector-effect: non-scaling-stroke; }
.an-erp-led { fill: color-mix(in srgb, var(--an-acento) calc(var(--lit, 0) * 100%), #3a3a40); }

/* signs: they light when the step reaches them */
.an-erp-rotulo { fill: color-mix(in srgb, var(--an-acento) calc(var(--lit, 0) * 100%), #121214); stroke: #4a4a50; stroke-width: .45px; vector-effect: non-scaling-stroke; }
.an-erp-letrero { fill: color-mix(in srgb, #1a0a03 calc(var(--lit, 0) * 100%), #b8b8bd); font-size: 5px; font-weight: 700; letter-spacing: .14em; }

/* the lobby */
.an-erp-suelo > .iso-top { fill: #2a2b31; }
.an-erp-suelo > .iso-shade { fill: #151618; }
.an-erp-suelo > .iso-fill { fill: #151618; }
.an-erp-calido { fill: var(--an-acento); opacity: calc(var(--reg) * .16); stroke: none; }
.an-erp-pantallita { fill: #12141a; stroke: #3a3a40; stroke-width: .3px; vector-effect: non-scaling-stroke; }
.an-erp-solera > .iso-top { fill: #2c2c31; }
.an-erp-cinta { fill: color-mix(in srgb, var(--an-acento) calc(var(--reg) * 100%), #2c2c30); }
.an-erp-aplique > .iso-top { fill: #cfcfd4; }

/* the order board: one row per order, three stage dots per row */
.an-erp-th { fill: #b8b8bd; font: 700 2.7px var(--anatomy-mono); letter-spacing: .08em; }
.an-erp-chip { fill: #1c110b; stroke: var(--an-acento); stroke-width: .4px; vector-effect: non-scaling-stroke; }
.an-erp-tc { fill: var(--an-acento); font: 700 2.1px var(--anatomy-mono); letter-spacing: .08em; }
.an-erp-tf { fill: #75757b; font: 600 2.8px var(--anatomy-mono); letter-spacing: .04em; }
.an-erp-ts { fill: #75757b; font: 600 2.1px var(--anatomy-mono); letter-spacing: .06em; }
.an-erp-hecho { fill: #8e8e94; }
.an-erp-punto { fill: #2c2c30; }
.an-erp-fila { fill: var(--an-acento); opacity: calc(var(--reg) * .2); }
.an-erp-marca { fill: var(--an-acento); opacity: var(--reg); }
.an-erp-vacio { fill: #333336; opacity: calc(1 - var(--reg)); }
.an-erp-tn { fill: var(--an-acento); font: 700 2.8px var(--anatomy-mono); letter-spacing: .04em; opacity: var(--reg); }
.an-erp-ts.an-erp-e1, .an-erp-ts.an-erp-e2, .an-erp-ts.an-erp-e3 { fill: var(--an-acento); }
.an-erp-e1 { opacity: calc(var(--reg) * (1 - var(--res))); }
.an-erp-e2 { opacity: calc(var(--res) * (1 - var(--doc))); }
.an-erp-e3 { opacity: var(--doc); }
.an-erp-pn { fill: var(--an-acento); }
.an-erp-pn1 { opacity: var(--reg); }
.an-erp-pn2 { opacity: var(--res); }
.an-erp-pn3 { opacity: var(--doc); }
.an-erp-tp { fill: #9a9aa0; font: 500 1.9px 'Geist', 'Helvetica Neue', Helvetica, Arial, sans-serif; opacity: calc(var(--reg) * (1 - var(--res))); }

/* the strip over the dock door */
.an-erp-estado .an-erp-vacio { opacity: calc(1 - var(--res)); }
.an-erp-estado .an-erp-tn { opacity: var(--res); }
.an-erp-p1 { opacity: calc(1 - var(--res)); }
.an-erp-p2 { opacity: var(--res); fill: var(--an-acento); }

/* billing counter: screen and the invoice sheet */
.an-erp-fact .an-erp-tn { opacity: var(--doc); }
.an-erp-barra { fill: #26262a; }
.an-erp-barra-on { fill: var(--an-acento); transform-box: fill-box; transform-origin: left center; transform: scaleX(var(--doc)); }
.an-erp-hoja { fill: #dadada; stroke: #9a9a9a; stroke-width: .35px; vector-effect: non-scaling-stroke; }
.an-erp-cabecera { fill: var(--an-acento); }
.an-erp-th2, .an-erp-th3 { fill: #1a0a03; font: 800 1.8px 'Geist', 'Helvetica Neue', Helvetica, Arial, sans-serif; letter-spacing: .04em; }
.an-erp-regla { fill: none; stroke: #8a8a8e; stroke-width: .6px; vector-effect: non-scaling-stroke; }
.an-erp-total { fill: var(--an-acento-medio); }

/* the dock: staging bay outline, the pallet of this order, its tag */
.an-erp-zona { stroke-dasharray: 1.8 1.4; opacity: var(--res); }
.an-erp-pedido > .iso-fill { fill: color-mix(in srgb, var(--an-acento-oscuro) calc(var(--res) * 100%), var(--anatomy-paper)); }
.an-erp-pedido > .iso-top { fill: color-mix(in srgb, var(--an-acento) calc(var(--res) * 100%), var(--anatomy-top)); }
.an-erp-pedido > .iso-shade { fill: color-mix(in srgb, var(--an-acento-medio) calc(var(--res) * 100%), var(--anatomy-shade-2)); }
.an-erp-pedido > .iso-shade[data-shade="0"] { fill: color-mix(in srgb, var(--an-acento-oscuro) calc(var(--res) * 100%), var(--anatomy-shade-0)); }
.an-erp-pedido > .iso-edge { stroke: color-mix(in srgb, #FFB089 calc(var(--res) * 100%), var(--anatomy-hi)); }
.an-erp-etiqueta { opacity: clamp(0, calc((var(--res) - .45) * 4), 1); }
.an-erp-etq { fill: #1a0a03; font: 800 1.9px 'Geist', 'Helvetica Neue', Helvetica, Arial, sans-serif; }

/* the post box: red-free, the accent is only the invoice envelope and the flag */
.an-erp-banda-b { fill: var(--an-acento-medio); }
.an-erp-ranura { fill: #050505; stroke: #8e8e94; stroke-width: .4px; vector-effect: non-scaling-stroke; }
.an-erp-solapa { fill: none; stroke: var(--an-acento-oscuro); stroke-width: .5px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.an-erp-sello { fill: #FFB089; }
.an-erp-mastil { stroke-width: 1.2px; }
.an-erp-banderola { fill: color-mix(in srgb, var(--an-acento) calc(var(--doc) * 100%), #3a3a40); stroke: #FFB089; stroke-width: .4px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

.an-erp-fondo > .iso-top { fill: #34343a; }
.an-erp-fondo > .iso-shade, .an-erp-fondo > .iso-fill { fill: #2b2b31; }
.an-erp-acero > .iso-top, .an-erp-acero > .iso-shade { fill: #4a4a52; }
.an-erp-acero > .iso-fill { fill: #3a3a40; }
.an-erp-caja > .iso-top { fill: #55555d; }
.an-erp-caja > .iso-shade { fill: #3e3e45; }
.an-erp-caja > .iso-shade[data-shade="0"] { fill: #33333a; }
.an-erp-caja > .iso-fill { fill: #33333a; }
.an-erp-pedido > .iso-top { fill: color-mix(in srgb, var(--an-acento) calc(var(--res) * 100%), #55555d); }
.an-erp-pedido > .iso-shade { fill: color-mix(in srgb, var(--an-acento-medio) calc(var(--res) * 100%), #3e3e45); }
.an-erp-pedido > .iso-shade[data-shade="0"] { fill: color-mix(in srgb, var(--an-acento-oscuro) calc(var(--res) * 100%), #33333a); }
.an-erp-pedido > .iso-fill { fill: color-mix(in srgb, var(--an-acento-oscuro) calc(var(--res) * 100%), #33333a); }
.an-erp-viga > .iso-top, .an-erp-viga > .iso-shade { fill: color-mix(in srgb, var(--an-acento) calc(var(--res) * 100%), #4a4a52); }
.an-erp-viga > .iso-fill { fill: color-mix(in srgb, var(--an-acento-oscuro) calc(var(--res) * 100%), #3a3a40); }

/* Scene Tienda: glass, panels, awning, the portal display. --on (0..1) is written per part by the live code. */
.an-tienda-fondo { fill: #101215; }
.an-tienda-vidrio { fill: #0f1114; fill-opacity: .28; stroke: none; }
.an-tienda-vidrio-puerta { fill-opacity: .4; }
.an-tienda-vidrio-alto { fill: #0c0d10; fill-opacity: .95; stroke: #3a3a40; stroke-width: .35px; vector-effect: non-scaling-stroke; }
.an-tienda-reflejo { fill: #ffffff; opacity: .05; pointer-events: none; }
.an-tienda-panel { fill: var(--anatomy-shade-2); stroke: #3a3a3f; stroke-width: .35px; vector-effect: non-scaling-stroke; }
.an-tienda-persiana { fill: #2a2b31; stroke: #3a3a40; stroke-width: .3px; vector-effect: non-scaling-stroke; }
.an-tienda-persiana-rodillo { fill: #1d1e22; }
.an-tienda-puerta-acero { fill: #1e1e22; stroke: none; }
.an-tienda-zocalo { fill: #2a2a2f; }
.an-tienda-rejilla { fill: #0e0e10; }
.an-tienda-cajon { fill: #232328; }
.an-tienda-salida { fill: #131315; stroke: #4a4a50; stroke-width: .35px; vector-effect: non-scaling-stroke; }
.an-tienda-monitor { fill: #090a0c; stroke: #3e3e44; stroke-width: .3px; vector-effect: non-scaling-stroke; }
.an-tienda-lineas { fill: none; stroke: #4a4a52; stroke-width: .35px; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.an-tienda-etiqueta { fill: #c4c4c9; opacity: .55; }
.an-tienda-suelo > .iso-fill { fill: #202226; }
.an-tienda-suelo > .iso-top { fill: #34363c; }
.an-tienda-suelo > .iso-shade { fill: #272a2f; }
.an-tienda-tabla > .iso-top { fill: #3c3e44; }

/* sign boards */
.an-tienda-rotulo { fill: #121214; stroke: #4a4a50; stroke-width: .45px; vector-effect: non-scaling-stroke; }
.an-tienda-letrero { fill: #d2d2d7; font-size: 3.1px; font-weight: 700; letter-spacing: .1em; }
.an-tienda-letrero-pq { font-size: 1.5px; font-weight: 600; letter-spacing: .12em; fill: #9a9aa0; }
.an-tienda-abierto { fill: #131315; stroke: #5a5a60; stroke-width: .35px; vector-effect: non-scaling-stroke; }

/* the awning: light and dark stripes in ink tones */
.an-tienda-toldo { stroke: #4a4a52; stroke-width: .3px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.an-tienda-toldo-a { fill: #5b5c64; }
.an-tienda-toldo-b { fill: #2a2b30; }
.an-tienda-toldo-c { fill: #222328; }
.an-tienda-faldon.an-tienda-toldo-a { fill: #4a4b52; }
.an-tienda-faldon.an-tienda-toldo-b { fill: #212226; }

/* the portal display */
.an-tienda-marco { fill: #1a1a1d; stroke: var(--anatomy-mid); stroke-width: .5px; vector-effect: non-scaling-stroke; }
.an-tienda-pantalla { fill: #08090b; }
.an-tienda-barra { fill: #17181c; }
.an-tienda-t { font-weight: 600; letter-spacing: .01em; }
.an-tienda-t-tit { font-size: 1.7px; fill: #f2f2f4; font-weight: 700; }
.an-tienda-t-pq { font-size: 1.2px; fill: #86868b; letter-spacing: .02em; }
.an-tienda-t-cap { font-size: 1.7px; fill: #a0a0a6; }
.an-tienda-logo { fill: color-mix(in srgb, var(--an-acento) calc(var(--on, 0) * 100%), #3a3b40); }
.an-tienda-sub { fill: none; stroke: var(--an-acento); stroke-width: .35px; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.an-tienda-avatar { fill: #26272c; stroke: #55555c; stroke-width: .3px; vector-effect: non-scaling-stroke; }
.an-tienda-tarjeta { fill: #111215; stroke: #2e2f35; stroke-width: .4px; vector-effect: non-scaling-stroke; }
.an-tienda-t-num { font-size: 4.3px; font-weight: 700; letter-spacing: -.01em; fill: color-mix(in srgb, #f5f5f7 calc(var(--on, 0) * 100%), #6a6a70); }
.an-tienda-pastilla { fill: color-mix(in srgb, var(--an-acento) calc(var(--on, 0) * 100%), #22232a); }
.an-tienda-t-past { font-size: 1.4px; font-weight: 700; }
.an-tienda-ap { fill: #8e8e94; opacity: calc(1 - var(--on, 0) * 2); }
.an-tienda-en { fill: #1a0a03; opacity: calc(var(--on, 0) * 2 - 1); }
.an-tienda-riel { fill: none; stroke: #2e2f35; stroke-width: .5px; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.an-tienda-riel-on { fill: none; stroke: var(--an-acento); stroke-width: .9px; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: var(--on, 0); }
.an-tienda-nodo { fill: color-mix(in srgb, var(--an-acento) calc(var(--on, 0) * 100%), #131418); stroke: color-mix(in srgb, #FFB089 calc(var(--on, 0) * 100%), #4a4a52); stroke-width: .4px; vector-effect: non-scaling-stroke; }
.an-tienda-check { fill: none; stroke: #1a0a03; stroke-width: .3px; stroke-linecap: round; stroke-linejoin: round; opacity: var(--on, 0); }
.an-tienda-t-paso { font-size: 1.75px; fill: color-mix(in srgb, #f2f2f4 calc(var(--on, 0) * 100%), #6a6a70); }
.an-tienda-t-hora { font-size: 1.25px; fill: #6a6a70; opacity: calc(.4 + var(--on, 0) * .6); }
.an-tienda-boton { fill: color-mix(in srgb, var(--an-acento) calc(var(--on, 0) * 100%), #131418); stroke: color-mix(in srgb, #FFB089 calc(var(--on, 0) * 100%), #3e3f46); stroke-width: .4px; vector-effect: non-scaling-stroke; }
.an-tienda-t-boton { font-size: 1.75px; font-weight: 700; fill: color-mix(in srgb, #1a0a03 calc(var(--on, 0) * 100%), #6a6a70); }
.an-tienda-doc { fill: none; stroke: color-mix(in srgb, #1a0a03 calc(var(--on, 0) * 100%), #6a6a70); stroke-width: .3px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.an-tienda-flecha { fill: none; stroke: color-mix(in srgb, #1a0a03 calc(var(--on, 0) * 100%), #6a6a70); stroke-width: .3px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

/* the phone: the notification slides in lit */
.an-tienda-aviso { fill: var(--an-acento); opacity: var(--on, 0); }
.an-tienda-aviso-halo { fill: var(--an-acento); opacity: calc(var(--on, 0) * .4); filter: blur(.5px); }
.an-tienda-aviso-check { fill: none; stroke: #1a0a03; stroke-width: .3px; stroke-linecap: round; stroke-linejoin: round; opacity: var(--on, 0); }
.an-tienda-aviso-lin { fill: none; stroke: #1a0a03; stroke-width: .3px; stroke-linecap: round; opacity: var(--on, 0); vector-effect: non-scaling-stroke; }

/* Scene Banco: stone, glass, the ticker, the sign, the cash machines and the API riser. --on (0..1) is written by the live code;
   the ticker also reads --p (payment received) and --q (reconciled). */
.an-banco-fondo { fill: #101215; }
.an-banco-vidrio { fill: #0f1114; fill-opacity: .32; stroke: none; }
.an-banco-vidrio-puerta { fill-opacity: .42; }
.an-banco-reflejo { fill: #ffffff; opacity: .05; }
.an-banco-panel { fill: var(--anatomy-shade-2); stroke: #3a3a3f; stroke-width: .35px; vector-effect: non-scaling-stroke; }
.an-banco-panel-comms { fill: var(--anatomy-shade-1); }
.an-banco-zocalo { fill: #2a2a2f; }
.an-banco-puerta-acero { fill: #1e1e22; stroke: none; }
.an-banco-rejilla { fill: #0e0e10; }
.an-banco-salida { fill: #131315; stroke: #4a4a50; stroke-width: .35px; vector-effect: non-scaling-stroke; }
.an-banco-t-salida { font-size: 1.5px; fill: #9a9aa0; letter-spacing: .1em; }
.an-banco-suelo > .iso-fill { fill: #202226; }
.an-banco-suelo > .iso-top { fill: #34363c; }
.an-banco-suelo > .iso-shade { fill: #272a2f; }
.an-banco-monitor { fill: #090a0c; stroke: #3e3e44; stroke-width: .3px; vector-effect: non-scaling-stroke; }
.an-banco-monitor-lineas { fill: none; stroke: #4a4a52; stroke-width: .35px; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.an-banco-boveda { fill: #26272b; stroke: #55555c; stroke-width: .5px; vector-effect: non-scaling-stroke; }
.an-banco-boveda-aro { fill: none; stroke: #4a4a52; stroke-width: .5px; vector-effect: non-scaling-stroke; }
.an-banco-boveda-rayos { fill: none; stroke: #6a6a72; stroke-width: .8px; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.an-banco-vidrio-techo > .iso-top { fill: #14161a; }
.an-banco-dentello { fill: var(--anatomy-shade-1); stroke: none; }

/* the sign in the frieze */
.an-banco-rotulo { fill: color-mix(in srgb, var(--an-acento-oscuro) calc(var(--on, 0) * 100%), #121214); stroke: color-mix(in srgb, var(--an-acento) calc(var(--on, 0) * 100%), #4a4a50); stroke-width: .5px; vector-effect: non-scaling-stroke; }
.an-banco-letrero { fill: color-mix(in srgb, #FFD2B8 calc(var(--on, 0) * 100%), #9a9aa0); font-size: 3.6px; font-weight: 700; letter-spacing: .24em; }

/* the ticker */
.an-banco-marco { fill: #18181b; stroke: var(--anatomy-mid); stroke-width: .5px; vector-effect: non-scaling-stroke; }
.an-banco-pantalla { fill: var(--an-pantalla); }
.an-banco-scan { fill: none; stroke: #ffffff; stroke-width: .3px; opacity: .05; vector-effect: non-scaling-stroke; }
.an-banco-t { font-weight: 650; letter-spacing: .02em; }
.an-banco-t-espera { font-size: 3.5px; fill: #77777e; opacity: calc(1 - var(--p, 0) * 1.6); }
.an-banco-t-a { font-size: 3.5px; fill: var(--an-acento); opacity: calc((var(--p, 0) * 1.6 - .6) * (1 - var(--q, 0) * 1.6)); }
.an-banco-t-b { font-size: 3.5px; fill: #FFD9C2; opacity: calc(var(--q, 0) * 1.6 - .6); }
.an-banco-on-b { opacity: calc(var(--q, 0) * 1.6 - .6); }
.an-banco-lampara { fill: color-mix(in srgb, var(--an-acento) calc(var(--p, 0) * 100%), #2c2c31); stroke: color-mix(in srgb, #FFB089 calc(var(--p, 0) * 100%), #4a4a50); stroke-width: .4px; vector-effect: non-scaling-stroke; }
.an-banco-check { fill: none; stroke: #1a0a03; stroke-width: .7px; stroke-linecap: round; stroke-linejoin: round; }
.an-banco-check-g { fill: none; stroke: #FFD9C2; stroke-width: .9px; stroke-linecap: round; stroke-linejoin: round; }
.an-banco-chip { fill: #1d1d21; stroke: #3a3a40; stroke-width: .35px; vector-effect: non-scaling-stroke; }
.an-banco-chip-a { fill: color-mix(in srgb, var(--an-acento-oscuro) calc(var(--p, 0) * 100%), #1d1d21); stroke: color-mix(in srgb, var(--an-acento) calc(var(--p, 0) * 100%), #3a3a40); }
.an-banco-chip-b { fill: color-mix(in srgb, var(--an-acento-oscuro) calc(var(--q, 0) * 100%), #1d1d21); stroke: color-mix(in srgb, var(--an-acento) calc(var(--q, 0) * 100%), #3a3a40); }
.an-banco-t-chip { font-size: 2.7px; letter-spacing: .1em; }
.an-banco-t-chip-a { fill: color-mix(in srgb, #FFD2B8 calc(var(--p, 0) * 100%), #77777e); }
.an-banco-t-chip-b { fill: color-mix(in srgb, #FFD2B8 calc(var(--q, 0) * 100%), #77777e); }

/* the cash machines */
.an-banco-alcoba { fill: #0b0b0d; stroke: #3a3a3f; stroke-width: .35px; vector-effect: non-scaling-stroke; }
.an-banco-cajero-cuerpo { fill: #1e1e22; stroke: #4a4a50; stroke-width: .35px; vector-effect: non-scaling-stroke; }
.an-banco-cajero-luz { fill: color-mix(in srgb, #FFD2B8 calc(var(--on, 0) * 80%), #34343a); }
.an-banco-pantalla-c { fill: color-mix(in srgb, #2a1208 calc(var(--on, 0) * 100%), #050505); stroke: #4a4a50; stroke-width: .3px; vector-effect: non-scaling-stroke; }
.an-banco-cajero { fill: color-mix(in srgb, var(--an-acento) calc(var(--on, 0) * 100%), #1d1d20); }
.an-banco-cajero-lineas { fill: none; stroke: color-mix(in srgb, #FFB089 calc(var(--on, 0) * 100%), #3e3e44); stroke-width: .45px; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.an-banco-tecla { fill: #2c2c31; stroke: none; }
.an-banco-ranura { fill: #08080a; stroke: #4a4a50; stroke-width: .3px; vector-effect: non-scaling-stroke; }
.an-banco-ranura-luz { fill: none; stroke: color-mix(in srgb, var(--an-acento) calc(var(--on, 0) * 100%), #3a3a40); stroke-width: .6px; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.an-banco-ranura-luz[d*="Z"] { fill: color-mix(in srgb, var(--an-acento) calc(var(--on, 0) * 100%), #1a1a1d); stroke: none; }

/* the API: riser light, comms box */
.an-banco-hilo { fill: none; stroke: var(--an-acento); stroke-width: 1.4px; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: calc(1 - var(--on, 0)); opacity: calc(var(--on, 0) * 4); vector-effect: non-scaling-stroke; }
.an-banco-hilo-halo { stroke-width: 5px; opacity: calc(var(--on, 0) * .5); stroke: var(--an-acento); }
.an-banco-hilo-nucleo { stroke: var(--an-acento); stroke-width: 1.7px; }
.an-banco-caja-marco { fill: #121214; stroke: #4a4a50; stroke-width: .3px; vector-effect: non-scaling-stroke; }
.an-banco-caja-led { fill: color-mix(in srgb, var(--an-acento) calc(var(--on, 0) * 100%), #333336); }
.an-banco-t-api { font-size: 1.5px; letter-spacing: .06em; fill: color-mix(in srgb, #FFD2B8 calc(var(--on, 0) * 100%), #8a8a90); }
/* The method rack (metodo.mjs). Loaded after anatomia.css; everything here is keyed on data-paso (0..4) written on #mapa-metodo.
   Base = stage 0. Every state change is a CSS transition; nothing animates on its own. */

/* surfaces drawn on the faces */
.mt-hundido { fill: #060607; }
.mt-jack { fill: #17171a; }
.mt-bisel { fill: #19191c; }
.mt-papel { fill: #d9d9dd; }
.mt-ficha-circ { fill: #5a5a60; }
.mt-ficha-resp { fill: none; stroke: #5a5a60; stroke-width: .5px; vector-effect: non-scaling-stroke; }
.mt-tecla { fill: #2c2c31; stroke: #4a4a50; stroke-width: .4px; vector-effect: non-scaling-stroke; }
.mt-tecla-redonda { fill: #2c2c31; stroke: #5a5a60; stroke-width: .4px; vector-effect: non-scaling-stroke; }
.mt-boton { fill: #2a2a2e; stroke: #6a6a70; stroke-width: .5px; vector-effect: non-scaling-stroke; }
.mt-pinza { fill: none; stroke: #6a6a70; stroke-width: .5px; vector-effect: non-scaling-stroke; }
.mt-tornillo-cab { fill: #55555b; stroke: #8e8e94; stroke-width: .35px; vector-effect: non-scaling-stroke; }
.mt-postit { fill: #cfcfd3; stroke: #8e8e94; stroke-width: .35px; vector-effect: non-scaling-stroke; }
.mt-nombre { font-weight: 700; letter-spacing: .06em; }
.mt-led-apagado { fill: #34343a; }
.mt-led-actividad { fill: #4a4a52; }
.mt-lampara-aro { fill: #0a0a0b; stroke: #5a5a60; stroke-width: .4px; vector-effect: non-scaling-stroke; }
.mt-lampara { fill: #2a2a2e; transition: fill .6s ease; }
.mt-enlace { fill: #34343a; transition: fill .6s ease .3s; }
.mt-contador-rotulo { letter-spacing: .12em; }
.mt-nodo { fill: #17171a; stroke: #8e8e94; stroke-width: .5px; vector-effect: non-scaling-stroke; }
.mt-cuadro { fill: var(--an-acento); }
.mt-flecha { fill: none; stroke: var(--an-acento); stroke-width: .8px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.mt-linea-ia { fill: none; stroke: var(--anatomy-hi); stroke-width: 1px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.mt-rotulo-api { fill: #1a0a03; stroke: var(--an-acento); stroke-width: .5px; vector-effect: non-scaling-stroke; }
.iso-face-text.mt-api-texto { fill: var(--an-acento); font-weight: 700; }
.mt-etiqueta > .iso-top, .mt-etiqueta > .iso-shade { fill: #d9d9dd; }
.iso-face-text.mt-etiqueta-texto { fill: #26262a; font-weight: 700; }
.mt-hoja > .iso-top { fill: #dadada; }
.mt-hoja > .iso-shade { fill: #9a9a9a; }
.iso-face-text.mt-hoja-texto, .iso-face-text.mt-hoja-cifra { fill: #26262a; }
.iso-face-text.mt-hoja-cifra { font-weight: 700; }
.mt-hoja-una-cifra { fill: var(--an-acento-oscuro); font-family: var(--anatomy-mono); font-weight: 700; letter-spacing: .04em; }
.mt-cable-api .tb-body { fill: var(--an-acento-medio); }
.mt-cable-api .tb-shine { fill: var(--an-acento); }
.mt-cable-api .tb-shade { fill: var(--an-acento-oscuro); }

/* the counters: today's own figure, then the one version */
.mt-cifra { font-family: var(--anatomy-mono); font-weight: 600; letter-spacing: .02em; transition: opacity .5s ease, fill .5s ease; }
.iso-face-text.mt-hoy { fill: #a8a8ae; }
.iso-face-text.mt-una { fill: var(--an-acento); opacity: 0; }
.iso-face-text.mt-gran { font-weight: 700; fill: #a8a8ae; transition: fill .5s ease; }
.mt-texto { opacity: 0; transition: opacity .45s ease; }
.mt-tarjeta { opacity: 0; transform: translateX(10px); transition: opacity .5s ease .2s, transform .7s cubic-bezier(.4, 0, .2, 1) .2s; }

/* groups that come and go */
.mt-rack .mt-m { transition: opacity .6s ease, transform .9s cubic-bezier(.4, 0, .2, 1); }
.mt-rack .mt-d1, .mt-rack .mt-d3, .mt-rack .mt-d4 { opacity: 0; transform: translate(var(--lx, 0px), var(--ly, 0px)); pointer-events: none; }
.mt-rack .mt-tronco { transform: scaleY(.02); transform-box: fill-box; transform-origin: 50% 100%; transition: transform 1s cubic-bezier(.4, 0, .2, 1) .15s; }
.mt-rack .mt-tomas { opacity: 0; transition: opacity .5s ease .7s; }
.mt-rack .mt-cables-api { transition-delay: .45s; }
.mt-rack .mt-conducto-sobre { opacity: 1; }

/* stage 0 only: the cords, the crank, the post-its */
[data-paso]:not([data-paso="0"]) .mt-rack .mt-s0 { opacity: 0; transform: translate(var(--lx, 0px), var(--ly, 0px)); pointer-events: none; }
[data-paso]:not([data-paso="0"]) .mt-rack .mt-caos { transform: translate(0, 8px); }
[data-paso]:not([data-paso="0"]) .mt-rack .mt-manivela { transform: translate(8px, 0); }

/* stage 1 on */
[data-paso]:is([data-paso="1"], [data-paso="2"], [data-paso="3"], [data-paso="4"]) .mt-rack .mt-d1 { opacity: 1; transform: none; pointer-events: auto; }
[data-paso]:is([data-paso="1"], [data-paso="2"], [data-paso="3"], [data-paso="4"]) .mt-rack .mt-tronco { transform: none; }
[data-paso]:is([data-paso="1"], [data-paso="2"], [data-paso="3"], [data-paso="4"]) .mt-rack .mt-tomas { opacity: 1; }
[data-paso]:is([data-paso="1"], [data-paso="2"], [data-paso="3"], [data-paso="4"]) .mt-rack .mt-enlace { fill: var(--an-acento); }
[data-paso]:is([data-paso="1"], [data-paso="2"], [data-paso="3"], [data-paso="4"]) .mt-rack .mt-gran { fill: var(--an-acento); }

/* stage 2: three copies become one, every counter reads 1.284 */
.mt-rack .mt-hoja-una { opacity: 0; transition: opacity .6s ease .6s; }
.mt-rack .mt-copia-a, .mt-rack .mt-copia-c { transition: opacity .5s ease .55s, transform .9s cubic-bezier(.4, 0, .2, 1); }
[data-paso]:is([data-paso="2"], [data-paso="3"], [data-paso="4"]) .mt-rack .mt-copia-a, [data-paso]:is([data-paso="2"], [data-paso="3"], [data-paso="4"]) .mt-rack .mt-copia-c { transform: translate(var(--sx), var(--sy)); opacity: 0; }
[data-paso]:is([data-paso="2"], [data-paso="3"], [data-paso="4"]) .mt-rack .mt-hoja-una { opacity: 1; }
[data-paso]:is([data-paso="2"], [data-paso="3"], [data-paso="4"]) .mt-rack .mt-hoja-texto, [data-paso]:is([data-paso="2"], [data-paso="3"], [data-paso="4"]) .mt-rack .mt-copia-b .mt-hoja-cifra { opacity: 0; }
[data-paso]:is([data-paso="3"], [data-paso="4"]) .mt-rack .mt-copia-b { opacity: 0; }
[data-paso]:is([data-paso="2"], [data-paso="3"], [data-paso="4"]) .mt-rack .mt-hoy { opacity: 0; }
[data-paso]:is([data-paso="2"], [data-paso="3"], [data-paso="4"]) .mt-rack .mt-una { opacity: 1; }

/* stage 3: lamps, owner cards, tags, straps, binder */
[data-paso]:is([data-paso="3"], [data-paso="4"]) .mt-rack .mt-d3 { opacity: 1; transform: none; pointer-events: auto; }
[data-paso]:is([data-paso="3"], [data-paso="4"]) .mt-rack .mt-lampara { fill: var(--an-acento); }
[data-paso]:is([data-paso="3"], [data-paso="4"]) .mt-rack .mt-tarjeta { opacity: 1; transform: none; }

/* stage 4 */
[data-paso="4"] .mt-rack .mt-d4 { opacity: 1; transform: none; pointer-events: auto; }

/* the status unit's text follows the stage */
[data-paso="0"] .mt-rack .mt-t0, [data-paso="1"] .mt-rack .mt-t1, [data-paso="2"] .mt-rack .mt-t2, [data-paso="3"] .mt-rack .mt-t3, [data-paso="4"] .mt-rack .mt-t4 { opacity: 1; }
.mt-rack:not(:is([data-paso="1"], [data-paso="2"], [data-paso="3"], [data-paso="4"]) *) .mt-t0 { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .mt-rack .mt-m, .mt-rack .mt-tronco, .mt-rack .mt-tomas, .mt-rack .mt-copia-a, .mt-rack .mt-copia-c, .mt-rack .mt-hoja-una, .mt-cifra, .mt-texto, .mt-tarjeta, .mt-lampara, .mt-enlace, .iso-face-text.mt-gran { transition: none; }
}

/* the stage-0 cords: mid-grey sheaths so they read against the dark faces */
.mt-caos .tb-body { fill: #46464d; }
.mt-caos .tb-shine { fill: #7a7a82; }
.mt-caos .tb-shade { fill: #2a2a2f; }

.iso-face-text.mt-ficha-txt { fill: #2a2a2e; font-weight: 700; }
.iso-face-text.mt-ficha-peq { font-weight: 500; fill: #5a5a60; }
.mt-carpeta-cuerpo > .iso-top { fill: #8e8e94; }
.mt-carpeta-cuerpo > .iso-shade { fill: #5d5d64; }
.mt-carpeta-cuerpo > .iso-fill { fill: #46464c; }
.iso-face-text.mt-carpeta-t { font-weight: 700; letter-spacing: .06em; }

.mt-troncal > .iso-fill { fill: var(--an-acento-medio); }
.mt-troncal > .iso-top { fill: #ffa070; }
.mt-troncal > .iso-shade, .mt-troncal > .iso-shade[data-shade="0"] { fill: var(--an-acento); }
.mt-troncal > .iso-shade[data-shade="3"] { fill: var(--an-acento-medio); }
.mt-troncal > .iso-edge, .mt-troncal > .iso-crease { stroke: #FFB089; }

/* how the figures sit in the home page */
.an-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.flujo-mapa.an-iso { display: block; min-height: 0; }
.flujo-mapa .an-figura { width: 100%; height: 100%; }
.flujo-lineas, .paquete { display: none !important; }
.an-paso { display: none; }
.mov .an-paso { display: block; position: absolute; z-index: 2; left: calc(44px + max(22px, (100vw - 1180px) / 2)); right: 66px; bottom: calc(44px + clamp(28px, 7vh, 72px)); opacity: var(--gira, 0); transform: translateY(calc((1 - var(--gira, 0)) * 22px)); pointer-events: none; }
.an-paso small { display: block; font-size: 15px; font-weight: 600; letter-spacing: 0.011em; color: var(--acento-oscuro); }
.an-paso b { display: block; margin-top: 6px; font-weight: 600; font-size: clamp(1.5rem, min(2.78vw, 4.6vh), 2.5rem); line-height: 1.1; letter-spacing: -0.02em; }
.an-paso span { display: block; margin-top: 8px; max-width: 28em; font-size: clamp(1rem, 1.3vw, 1.2rem); line-height: 1.3; color: var(--oscuro-gris); }
div.mapa-metodo { display: block; }
@media (max-width: 820px) { .mov .an-paso { left: 66px; bottom: calc(44px + 96px); } }
.an-paso small, .an-paso b, .an-paso span { text-shadow: 0 0 14px #000, 0 0 4px #000, 0 0 2px #000; }
/* the six steps as a route above the caption */
.an-ruta { display: flex; flex-wrap: wrap; gap: 6px 16px; list-style: none; margin: 0 0 16px; padding: 0; }
.an-ruta li { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--oscuro-gris); opacity: .55; transition: opacity .3s ease, color .3s ease; }
.an-ruta i { width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; }
.an-ruta li.hecho { opacity: .9; }
.an-ruta li.hecho i { background: var(--acento-oscuro); box-shadow: none; }
.an-ruta li.ahora { opacity: 1; color: var(--oscuro-ink); }
.an-ruta li.ahora i { background: var(--acento-oscuro); box-shadow: 0 0 0 4px color-mix(in srgb, var(--acento-oscuro) 30%, transparent); }
@media (max-width: 820px) { .an-ruta span { display: none; } .an-ruta li.ahora span { display: inline; } }
/* the method rack: five baked pictures, one per stage, that fade into each other */
div.mapa-metodo { display: grid; }
.mapa-metodo > img { grid-area: 1 / 1; display: block; width: 100%; height: auto; opacity: 0; transition: opacity .55s cubic-bezier(.4, 0, .2, 1); }
.mapa-metodo[data-paso="0"] > img:nth-child(1), .mapa-metodo[data-paso="1"] > img:nth-child(2), .mapa-metodo[data-paso="2"] > img:nth-child(3),
.mapa-metodo[data-paso="3"] > img:nth-child(4), .mapa-metodo[data-paso="4"] > img:nth-child(5) { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .mapa-metodo > img { transition: none; } }

.an-capa .an-calle-zanja, .an-capa .an-calle-zanja-borde, .an-capa [data-an^="fibra-"] > .iso-line { display: none; }
.an-canvas { position: absolute; left: 0; top: 0; pointer-events: none; }
.flujo-mapa .an-capa { position: relative; width: 100%; height: 100%; overflow: visible; }