/* ══════════════════════════════════════════════
   Blue4 Alliance · la consola del operador
   El landing es un panel de control: paneles de metal pintado, placas
   grabadas, lámparas que significan «capacidad cubierta» y un solo pulsador
   azul para la única acción. Ámbar = encendido; azul = actuar. Nada más usa
   esos dos colores.
   ══════════════════════════════════════════════ */

@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;
  src:url(fonts/Archivo.woff2) format("woff2")}
@font-face{font-family:"B612 Mono";font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/B612Mono-Bold.woff2) format("woff2")}
@font-face{font-family:"Raleway";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/Raleway.woff2) format("woff2")}

:root{
  /* Metal pintado: marco, panel y el hueco de las ventanas. */
  --frame:#18212b;
  --panel:#2c3b4c;
  --panel-hi:#374a5f;
  --well:#141c24;
  --seam:rgb(0 0 0 / .45);
  --seam-hi:rgb(255 255 255 / .07);
  /* Tinta sobre el panel, teñida del mismo gris azulado. */
  --ink:#eef1f4;
  --ink-2:#b6c3d0;
  --ink-3:#a3b3c3;           /* ≥4.5:1 sobre los dos tonos del panel */
  /* Placas grabadas. */
  --plate:#cfccc1;
  --plate-hi:#e3e0d6;
  --plate-ink:#1d242b;
  --screw:#8c9095;
  --slot:#2b2f33;
  /* Cabeza de tornillo con bisel: centro claro, anillo y borde oscuro. */
  --head:#b9bdc1 0 1px,#80858a 1.6px 3.4px,#4c5055 3.6px,transparent 4.2px;
  /* Dos tornillos de ranura, uno a cada lado de una placa. */
  --screws:
    linear-gradient(var(--slot),var(--slot)) left calc(.55rem - 3px) center/6px 1.5px no-repeat,
    linear-gradient(var(--slot),var(--slot)) right calc(.55rem - 3px) center/6px 1.5px no-repeat,
    radial-gradient(circle at .55rem 50%,var(--head)),
    radial-gradient(circle at calc(100% - .55rem) 50%,var(--head));
  /* Letra grabada: el corte oscuro con su filo de luz debajo. */
  --engrave:0 -1px 0 rgb(0 0 0 / .45),0 1px 0 rgb(255 255 255 / .85);
  /* Lámpara incandescente: apagada, encendida, núcleo. */
  --lamp-off:#3a3226;
  --lamp-off-ink:#b0a07c;
  --amber:#f5b73a;
  --amber-core:#ffe2a0;
  --amber-ink:#2a1c00;
  /* Pulsador de acción: exclusivo de «Solicitar diagnóstico». */
  --act:#1d5fd6;
  --act-hi:#3a7cf2;
  --act-lo:#133f93;
  --err:#ffa99f;           /* 4.6:1 sobre el panel del formulario */

  --sans:"Archivo",system-ui,sans-serif;
  --mono:"B612 Mono",ui-monospace,monospace;
  --logo:"Raleway","Archivo",sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:4.5rem;color-scheme:dark;
  scrollbar-color:var(--panel-hi) var(--frame);accent-color:var(--amber)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--frame);color:var(--ink);font-family:var(--sans);font-size:1rem;line-height:1.55;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;caret-color:var(--amber)}
::selection{background:var(--amber);color:var(--amber-ink)}
h1,h2,h3,p,ul{margin:0}
ul{list-style:none;padding:0}
img,svg{display:block}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:3px}

.skip{position:absolute;left:-999px;top:0;z-index:100;background:var(--plate);color:var(--plate-ink);padding:.75rem 1rem;font-weight:700}
.skip:focus{left:0}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.wrap{max-width:1440px;margin-inline:auto;padding-inline:1.25rem}
@media (min-width:768px){.wrap{padding-inline:2rem}}
@media (min-width:1200px){.wrap{padding-inline:3rem}}

/* ── Placa grabada ──
   Rotulación del panel: metal claro atornillado a los lados. */
.plate{display:inline-block;padding:.45rem 1.6rem;border-radius:2px;
  background:var(--screws),linear-gradient(var(--plate-hi),var(--plate));text-shadow:var(--engrave);
  color:var(--plate-ink);font-weight:700;font-stretch:118%;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  box-shadow:0 1px 0 var(--seam),0 2px 4px -1px rgb(0 0 0 / .5)}
.plate--sm{font-size:.66rem;padding:.35rem 1.5rem}

/* ── Teclas ──
   Botón neutro de la consola. El azul queda reservado al pulsador. */
.key{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;height:3rem;padding:0 1.4rem;border:0;border-radius:4px;
  background:linear-gradient(var(--plate-hi),var(--plate));color:var(--plate-ink);text-shadow:var(--engrave);
  font-weight:700;font-stretch:112%;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .7),inset 0 -2px 0 rgb(0 0 0 / .18),0 6px 14px -6px rgb(0 0 0 / .7);
  transition:transform .12s var(--ease),box-shadow .12s var(--ease),filter .15s}
.key:hover{filter:brightness(1.05)}
.key:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgb(255 255 255 / .5),inset 0 -1px 0 rgb(0 0 0 / .18),0 3px 8px -4px rgb(0 0 0 / .7)}
.key svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.key--sm{height:2.4rem;padding:0 1rem;font-size:.72rem}

/* ── Barra superior ── */
.bar{position:sticky;top:0;z-index:50;background:var(--frame);box-shadow:0 1px 0 var(--seam),0 2px 0 var(--seam-hi)}
.bar__in{height:3.75rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:flex;align-items:center;gap:.65rem}
/* Símbolo de la alianza: cuadro sólido con un cuadro hueco al centro. */
.brand__mark{display:grid;place-items:center;width:1.65rem;height:1.65rem;background:var(--plate);border-radius:1px}
.brand__mark span{width:.7rem;height:.7rem;border:2px solid var(--frame);border-radius:1px}
/* Raleway: sus cifras de estilo antiguo bajan el «4» bajo la línea base. */
.brand__txt,.foot__brand{font-family:var(--logo);font-weight:800;font-size:1.0625rem;letter-spacing:-.025em;
  font-variant-numeric:oldstyle-nums;color:var(--ink)}

/* ── Consola ── */
.console{background:linear-gradient(var(--panel-hi),var(--panel) 18rem);box-shadow:inset 0 1px 0 var(--seam-hi),0 1px 0 var(--seam)}
.console__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:2rem;padding-block:2.5rem 3rem;
  grid-template-areas:"head" "copy" "matrix" "panel"}
.console__head{grid-area:head;container-type:inline-size}
.console__copy{grid-area:copy;display:flex;flex-direction:column;align-items:flex-start;gap:1.25rem}
.matrix{grid-area:matrix}
.input-panel{grid-area:panel}
/* Desde 900 px: titular, texto y matriz apilados a la izquierda; el panel de
   entrada ocupa toda la altura a la derecha, visible sin scroll. */
@media (min-width:900px){
  .console__grid{grid-template-columns:minmax(0,1fr) minmax(22rem,26rem);column-gap:2.5rem;row-gap:1.75rem;
    grid-template-areas:"head panel" "copy panel" "matrix panel";align-items:start}
  .input-panel{grid-row:1 / span 3}
}
@media (min-width:1200px){
  .console__grid{column-gap:3.5rem;padding-block:2.75rem 3.5rem}
  .console__copy{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:2.5rem;row-gap:1rem;align-items:start}
  .console__copy .plate{grid-column:1 / -1;justify-self:start}
}

.display{font-weight:800;font-stretch:118%;text-transform:uppercase;letter-spacing:-.01em;line-height:.96;
  font-size:min(4.1rem,7.6cqi);text-wrap:balance;max-width:18ch}
/* El tamaño se mide contra el ancho de su propia columna: «INFRAESTRUCTURA»,
   la palabra más larga, siempre cabe en una línea sin desbordar. */
/* «Sin silos» va encendido: el mismo ámbar de las lámparas. */
.display em{font-style:normal;color:var(--amber)}
.lede{font-size:1.0625rem;line-height:1.55;color:var(--ink-2);max-width:44ch}
.status{display:flex;flex-direction:column;gap:.7rem;max-width:46ch}
.status li{display:flex;gap:.75rem;align-items:flex-start;font-size:.95rem;line-height:1.45;color:var(--ink-2)}
/* Piloto: lámpara redonda encendida. */
.pilot,.indicator{flex:none;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,var(--amber-core),var(--amber) 55%,#b9791a);
  box-shadow:0 0 0 2px var(--well),0 1px 2px 2px rgb(0 0 0 / .35)}
.pilot{width:.6rem;height:.6rem;margin-top:.42rem}

/* ── Matriz de lámparas ──
   Cada capacidad es una lámpara: un bisel oscuro hundido en el panel con un
   lente translúcido que lleva la leyenda impresa. Encendida, el filamento
   calienta el centro casi a blanco, el borde cae a ámbar profundo y la luz se
   derrama sobre el panel entre celdas. */
.matrix{display:flex;flex-direction:column;gap:.9rem;padding:1.1rem;border-radius:6px;
  background:linear-gradient(#27364a,#223042);
  box-shadow:inset 0 1px 0 var(--seam-hi),inset 0 -1px 0 var(--seam),0 1px 0 var(--seam-hi)}
.matrix__row{display:grid;grid-template-columns:1fr;gap:.55rem}
/* Rótulo serigrafiado de la fila, con su línea que la amarra al panel. */
.matrix__area{display:flex;align-items:center;gap:.6rem;font-weight:700;font-stretch:100%;font-size:.66rem;letter-spacing:.1em;line-height:1.25;
  text-transform:uppercase;color:var(--ink-2)}
.matrix__area::after{content:"";flex:1;height:1px;background:rgb(182 195 208 / .28)}
.matrix__lamps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem}
@media (min-width:640px){
  .matrix__row{grid-template-columns:9.5rem 1fr;align-items:center}
  .matrix__area::after{display:none}
}
.lamp{display:flex;padding:4px;border-radius:4px;background:#0b1016;
  box-shadow:inset 0 2px 3px rgb(0 0 0 / .8),0 1px 0 rgb(255 255 255 / .08);transition:box-shadow .5s}
.lens{flex:1;display:flex;align-items:center;min-height:3.4rem;padding:.5rem .5rem;border-radius:2px;
  font-weight:650;font-stretch:62%;font-size:.7rem;line-height:1.2;letter-spacing:.02em;text-transform:uppercase;
  color:var(--amber-ink);hyphens:manual;overflow-wrap:normal;
  background:radial-gradient(90% 120% at 50% 45%,#fff8e6 0%,var(--amber-core) 22%,var(--amber) 58%,#c47a12 100%);
  box-shadow:inset 0 0 0 1px rgb(90 50 0 / .35),inset 0 -8px 14px -6px rgb(120 60 0 / .35)}
/* La luz que sale del lente pinta el panel alrededor del bisel. */
.lamp{box-shadow:inset 0 2px 3px rgb(0 0 0 / .8),0 1px 0 rgb(255 255 255 / .08),0 0 22px -4px rgb(245 183 58 / .38)}
@media (min-width:640px){.lens{font-stretch:75%;font-size:.74rem;min-height:3.4rem;padding:.55rem .7rem}}
/* Con movimiento reducido no hay barrido: las lámparas ya están encendidas. */
@media (prefers-reduced-motion:no-preference){
  .js .matrix:not(.is-on) .lamp{box-shadow:inset 0 2px 3px rgb(0 0 0 / .8),0 1px 0 rgb(255 255 255 / .08)}
  .js .matrix:not(.is-on) .lens{background:radial-gradient(90% 120% at 50% 45%,#4a3e2b,#2e261a);color:var(--lamp-off-ink);box-shadow:inset 0 0 0 1px rgb(0 0 0 / .5)}
  .js .matrix.is-on .lens{animation:warm .75s var(--d,0ms) both}
  .js .matrix.is-on .lamp{animation:spill .75s var(--d,0ms) both}
}
/* Filamento incandescente: tarda en llegar a su brillo y titubea al hacerlo. */
@keyframes warm{
  0%{background:radial-gradient(90% 120% at 50% 45%,#4a3e2b,#2e261a);color:var(--lamp-off-ink);filter:brightness(.6)}
  35%{filter:brightness(.8)}
  50%{filter:brightness(1.15)}
  65%{filter:brightness(.93)}
  100%{filter:none}
}
@keyframes spill{from{box-shadow:inset 0 2px 3px rgb(0 0 0 / .8),0 1px 0 rgb(255 255 255 / .08),0 0 22px -4px rgb(245 183 58 / 0)}}

/* ── Panel de entrada del operador ── */
.input-panel{position:relative;padding:1.75rem 1.5rem 1.5rem;border-radius:6px;background:linear-gradient(#3a4d63,var(--panel));
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .1),0 1px 0 var(--seam),0 22px 40px -18px rgb(0 0 0 / .8);scroll-margin-top:5rem}
@media (min-width:768px){.input-panel{padding:2rem 1.9rem 1.75rem}}
.input-panel__t{font-weight:700;font-stretch:108%;font-size:1.5rem;line-height:1.2;margin-bottom:1.5rem;text-wrap:balance}
.fields{display:grid;grid-template-columns:1fr;gap:1rem}
@media (min-width:480px){.fields{grid-template-columns:1fr 1fr}.field--full{grid-column:span 2}}
.field{min-width:0}
.field label{display:block;margin-bottom:.4rem;font-weight:600;font-stretch:110%;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.req{color:var(--amber)}
.field input,.field select{width:100%;height:2.75rem;padding:0 .85rem;border:1px solid #0d1319;border-radius:3px;background:var(--well);
  color:var(--ink);font:inherit;font-size:.95rem;box-shadow:inset 0 2px 4px rgb(0 0 0 / .55);
  transition:border-color .15s,box-shadow .15s}
.field input::placeholder{color:var(--ink-3);opacity:1}
.field input:focus,.field select:focus{outline:none;border-color:var(--amber);box-shadow:inset 0 2px 4px rgb(0 0 0 / .55),0 0 0 3px rgb(245 183 58 / .22)}
.select{position:relative}
.select select{appearance:none;-webkit-appearance:none;padding-right:2.4rem;cursor:pointer}
.select select option{background:var(--well);color:var(--ink)}
.select svg{position:absolute;right:.8rem;top:50%;width:1rem;height:1rem;translate:0 -50%;pointer-events:none;
  fill:none;stroke:var(--ink-2);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.field__err{display:none;margin-top:.35rem;font-size:.78rem;color:var(--err)}
.field.is-bad input{border-color:var(--err)}
.field.is-bad .field__err{display:block}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
#turnstile-box:empty{display:none}

.push__plate{display:table;margin:1.8rem auto 1.1rem}
/* El pulsador: la única pieza azul de toda la página. Hombros cuadrados,
   hundido en un collar oscuro y con recorrido al oprimirlo. Va a lo ancho del
   panel porque su leyenda, fija por el copy, no cabe en un botón cuadrado. */
.push{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:3.6rem;border:0;border-radius:2px;
  background:linear-gradient(var(--act-hi),var(--act) 55%,var(--act-lo));color:#fff;
  font-weight:800;font-stretch:115%;font-size:.88rem;letter-spacing:.12em;text-transform:uppercase;
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .35),inset 0 -5px 0 rgb(0 0 0 / .28),0 0 0 7px #0b1016,0 0 0 8px var(--seam-hi),0 14px 24px -12px rgb(0 0 0 / .8);
  transition:transform .1s var(--ease),box-shadow .1s var(--ease),filter .15s}
.push:hover{filter:brightness(1.08)}
.push:active{transform:translateY(3px);box-shadow:inset 0 1px 0 rgb(255 255 255 / .2),inset 0 -2px 0 rgb(0 0 0 / .28),0 0 0 7px #0b1016,0 0 0 8px var(--seam-hi),0 6px 12px -8px rgb(0 0 0 / .8)}
.push:disabled{filter:saturate(.5) brightness(.85);cursor:progress}
.push .form__label{display:inline-flex;align-items:center;gap:.6rem}
.push svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.form__msg{margin-top:.8rem;font-size:.85rem;text-align:center;color:var(--ink-2)}
.form__msg:empty{display:none}
.form__msg.err{color:var(--err)}
.form__msg.ok{color:var(--amber)}
.form__legal{margin-top:1rem;display:flex;align-items:center;justify-content:center;gap:.5rem;font-size:.75rem;text-align:center;color:var(--ink-2)}
.form__legal svg{width:.9rem;height:.9rem;flex:none;fill:none;stroke:var(--ink-2);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.done{padding:1.5rem 0 .5rem;text-align:center}
.done__lamp{display:block;width:3rem;height:3rem;margin:0 auto 1.25rem;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,var(--amber-core),var(--amber) 55%,#b9791a);
  box-shadow:0 0 0 4px var(--well),0 3px 6px 3px rgb(0 0 0 / .35)}
.done h3{font-weight:800;font-stretch:115%;font-size:1.35rem;text-transform:uppercase;margin-bottom:.5rem}
.done p{color:var(--ink-2);max-width:30ch;margin:0 auto 1.5rem}

/* ── Placas de los aliados ── */
.plates{background:#26343f;padding-block:1.75rem;box-shadow:inset 0 1px 0 var(--seam),inset 0 2px 0 var(--seam-hi),inset 0 -1px 0 var(--seam)}
.plates__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
.nameplate{display:grid;place-items:center;height:5.25rem;padding:.9rem 1.25rem;border-radius:3px;
  background:
    linear-gradient(var(--slot),var(--slot)) left calc(.6rem - 3px) top calc(.6rem - .75px)/6px 1.5px no-repeat,
    linear-gradient(var(--slot),var(--slot)) right calc(.6rem - 3px) top calc(.6rem - .75px)/6px 1.5px no-repeat,
    linear-gradient(var(--slot),var(--slot)) left calc(.6rem - 3px) bottom calc(.6rem - .75px)/6px 1.5px no-repeat,
    linear-gradient(var(--slot),var(--slot)) right calc(.6rem - 3px) bottom calc(.6rem - .75px)/6px 1.5px no-repeat,
    radial-gradient(circle at .6rem .6rem,var(--head)),
    radial-gradient(circle at calc(100% - .6rem) .6rem,var(--head)),
    radial-gradient(circle at .6rem calc(100% - .6rem),var(--head)),
    radial-gradient(circle at calc(100% - .6rem) calc(100% - .6rem),var(--head)),
    linear-gradient(var(--plate-hi),var(--plate));
  box-shadow:0 1px 0 var(--seam),0 6px 12px -8px rgb(0 0 0 / .8)}
/* Los logotipos llegan en colores distintos (el sello de IBM en un gris que se
   pierde sobre la placa); grabados, van todos en la misma tinta. */
.nameplate img{width:auto;max-width:100%;object-fit:contain;filter:brightness(0);opacity:.78}
.nameplate--ibm img{height:3.4rem}
.logo--iw{height:2.1rem}.logo--tps{height:2.4rem}.logo--cmx{height:1.7rem}.logo--jv{height:1.45rem}
.nameplate--ibm{grid-column:span 2}
@media (min-width:900px){
  .plates__row{grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem}
  .nameplate--ibm{grid-column:auto}
}

/* ── Secciones ── */
.sec{padding-block:clamp(4rem,8vw,6.5rem);scroll-margin-top:3.75rem;background:var(--panel);
  box-shadow:inset 0 1px 0 var(--seam),inset 0 2px 0 var(--seam-hi)}
/* Las secciones alternan entre dos tonos del mismo metal, separadas por la
   junta entre paneles. */
.sec--panel{background:#314255}
.h2{font-weight:800;font-stretch:118%;text-transform:uppercase;letter-spacing:-.005em;line-height:1;
  font-size:clamp(1.6rem,.9rem + 3vw,3.25rem);text-wrap:balance;overflow-wrap:break-word}
.sec__lede{margin-top:1rem;font-size:1.0625rem;color:var(--ink-2);max-width:48ch}

/* ── Por qué: indicadores de estado ── */
.why{display:grid;gap:2.5rem}
@media (min-width:960px){.why{grid-template-columns:5fr 7fr;gap:4rem;align-items:start}.why__t{position:sticky;top:6rem}}
.why__t{max-width:12ch}
.why__item{display:flex;gap:1.25rem;padding-block:1.75rem;box-shadow:inset 0 1px 0 var(--seam),inset 0 2px 0 var(--seam-hi)}
.why__item:first-child{padding-top:0;box-shadow:none}
.indicator{width:1.1rem;height:1.1rem;margin-top:.3rem}
.why h3{font-weight:700;font-stretch:112%;font-size:1.3rem;line-height:1.25;text-transform:uppercase;letter-spacing:.02em;margin-bottom:.5rem}
.why p{color:var(--ink-2);max-width:52ch}

/* ── Catálogo: selector rotatorio ──
   Las cuatro posiciones van grabadas alrededor de la perilla, cada una en su
   ángulo de retén; la aguja apunta a la leyenda encendida. */
.selector{display:grid;gap:2.5rem;margin-top:3rem}
@media (min-width:960px){.selector{grid-template-columns:minmax(24rem,27rem) 1fr;gap:3rem;align-items:center}}
.dial{--k:8rem;--r:7.6rem;position:relative;height:16rem;max-width:26rem}
@media (min-width:960px){.dial{--k:10rem;--r:9.2rem;height:19rem}}
/* Aro moleteado con una tapa lisa encima; la perilla entera gira. */
.knob{position:absolute;left:0;top:50%;width:var(--k);height:var(--k);margin-top:calc(var(--k) / -2);border-radius:50%;cursor:grab;touch-action:none;
  background:repeating-conic-gradient(#566575 0deg 4deg,#1d262f 4deg 8deg);
  box-shadow:0 0 0 6px var(--well),0 0 0 7px var(--seam-hi),0 16px 26px -10px rgb(0 0 0 / .9);
  transform:rotate(var(--angle,-48deg));transition:transform .45s cubic-bezier(.22,1.04,.36,1)}
.knob::before{content:"";position:absolute;inset:14%;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#61707f,#3c4957 70%,#323d49);
  box-shadow:inset 0 2px 2px rgb(255 255 255 / .18),inset 0 -2px 3px rgb(0 0 0 / .45),0 2px 4px rgb(0 0 0 / .5)}
.knob:active{cursor:grabbing}
.knob.is-dragging{transition:none}
/* Línea indicadora grabada en el borde de la tapa y rellena de pintura blanca. */
.knob__pointer{position:absolute;left:66%;top:50%;width:18%;height:5px;margin-top:-2.5px;border-radius:2px;background:var(--ink);
  box-shadow:inset 0 1px 1px rgb(0 0 0 / .45),0 1px 0 rgb(255 255 255 / .2)}
.dial__labels{position:absolute;inset:0}
/* Leyendas y retenes en su ángulo: x = r·cos(a), y = r·sin(a), desde el
   centro de la perilla. */
.detent,.tab{--cx:calc(var(--k) / 2)}
.detent{position:absolute;left:calc(var(--cx) + (var(--k) / 2 + .9rem) * var(--cos));top:calc(50% + (var(--k) / 2 + .9rem) * var(--sin));
  width:.9rem;height:2px;margin-top:-1px;background:var(--ink-2);transform-origin:0 50%;rotate:var(--a)}
.detent:nth-of-type(1),.tab:nth-child(1){--cos:.669;--sin:-.743;--a:-48deg}
.detent:nth-of-type(2),.tab:nth-child(2){--cos:.961;--sin:-.276;--a:-16deg}
.detent:nth-of-type(3),.tab:nth-child(3){--cos:.961;--sin:.276;--a:16deg}
.detent:nth-of-type(4),.tab:nth-child(4){--cos:.669;--sin:.743;--a:48deg}
.tab{position:absolute;left:calc(var(--cx) + var(--r) * var(--cos));top:calc(50% + var(--r) * var(--sin));translate:0 -50%;
  display:flex;align-items:center;gap:.55rem;max-width:calc(100% - var(--cx) - var(--r) * var(--cos));padding:.4rem .25rem;border:0;background:none;text-align:left;
  font-weight:700;font-stretch:108%;font-size:.72rem;letter-spacing:.08em;line-height:1.2;text-transform:uppercase;color:var(--ink-3);transition:color .15s}
.tab::before{content:"";flex:none;width:.6rem;height:.6rem;border-radius:50%;background:var(--lamp-off);box-shadow:inset 0 1px 2px rgb(0 0 0 / .6);transition:background .25s,box-shadow .25s}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{color:var(--ink)}
.tab[aria-selected="true"]::before{background:radial-gradient(circle at 40% 35%,#fff8e6,var(--amber) 60%);box-shadow:0 0 10px -1px rgb(245 183 58 / .7)}
.readout{padding:clamp(1.5rem,3vw,2.5rem);border-radius:6px;background:var(--well);box-shadow:inset 0 2px 6px rgb(0 0 0 / .6),0 1px 0 var(--seam-hi)}
.panel + .panel{margin-top:2.5rem}
.js .panel + .panel{margin-top:0}
.panel h3{font-weight:700;font-stretch:110%;font-size:clamp(1.35rem,1rem + 1vw,1.85rem);line-height:1.2;margin-bottom:.8rem}
.panel > p{color:var(--ink-2);max-width:56ch}
.ticks{margin-top:1.75rem}
.ticks li{display:flex;gap:.85rem;align-items:center;padding-block:.85rem;font-size:1rem;color:var(--ink);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .06)}
.ticks li::before{content:"";flex:none;width:.7rem;height:.7rem;border-radius:2px;background:radial-gradient(circle at 40% 35%,#fff8e6,var(--amber) 60%)}

/* ── Registros ──
   Contadores de panel: cada cifra en su propia ventana, separadas por
   parteluces, con la placa grabada debajo. */
.registers{display:grid;gap:2rem}
@media (min-width:720px){.registers{grid-template-columns:repeat(3,1fr);gap:1.25rem}}
.register{display:flex;flex-direction:column;align-items:flex-start;gap:.9rem}
.register__wheels{display:inline-flex;gap:3px;padding:6px;border-radius:4px;background:#0b1016;
  box-shadow:inset 0 2px 4px rgb(0 0 0 / .8),0 1px 0 var(--seam-hi)}
.register__wheels span{display:grid;place-items:center;width:clamp(2.6rem,1.8rem + 2vw,3.6rem);height:clamp(3.6rem,2.6rem + 2.6vw,4.9rem);
  border-radius:2px;background:linear-gradient(#10161d,#1c2530 45%,#1c2530 55%,#10161d);
  box-shadow:inset 0 0 0 1px rgb(0 0 0 / .6),inset 0 1px 0 rgb(255 255 255 / .06);
  font-family:var(--mono);font-weight:700;font-variant-numeric:tabular-nums;font-size:clamp(1.9rem,1.3rem + 1.6vw,2.8rem);line-height:1;color:var(--amber)}
.register__l{display:inline-block;padding:.4rem 1.55rem;border-radius:2px;
  background:var(--screws),linear-gradient(var(--plate-hi),var(--plate));text-shadow:var(--engrave);
  color:var(--plate-ink);font-weight:700;font-stretch:112%;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  box-shadow:0 1px 0 var(--seam),0 2px 4px -1px rgb(0 0 0 / .5)}
.accr{margin-top:3.5rem;display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem}
.accr__t{font-weight:700;font-stretch:115%;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.accr__list{display:flex;flex-wrap:wrap;gap:.6rem}
.accr__list li{padding:.5rem 1.7rem;border-radius:2px;
  background:var(--screws),linear-gradient(var(--plate-hi),var(--plate));text-shadow:var(--engrave);
  color:var(--plate-ink);font-weight:700;font-stretch:110%;font-size:.85rem;letter-spacing:.06em;
  box-shadow:0 1px 0 var(--seam),0 4px 8px -4px rgb(0 0 0 / .7)}

/* ── Cierre ── */
.close__in{display:grid;gap:2rem}
@media (min-width:960px){.close__in{grid-template-columns:7fr 5fr;gap:4rem;align-items:end}}
.close .h2{max-width:18ch}
.close__side{display:flex;flex-direction:column;align-items:flex-start;gap:1.5rem}
.close__side p{color:var(--ink-2);font-size:1.0625rem;max-width:46ch}

/* ── Pie ── */
.foot{background:var(--frame);box-shadow:inset 0 1px 0 var(--seam),inset 0 2px 0 var(--seam-hi)}
.foot__in{padding-block:2rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 2rem}
.foot__c{font-size:.8rem;color:var(--ink-3)}