/* ============================================================
   CODEKEEB — la tienda, segunda version
   ------------------------------------------------------------
   Inspirada en ergodox-ez.com, que es la referencia de Ernesto, pero
   con lo que el pidio aparte: nada de fondo negro por defecto y nada de
   scroll sin fin. Lo que se trae de alli, medido con el navegador:

   - Suelos claros alternos (blanco y un gris frio) y UN solo acento.
     El acento no es el azul de ZSA: es el azul del degradado de nuestro
     propio logotipo (#2a3dff), algo mas calmado.
   - UNA familia tipografica, como ellos con Inter. La nuestra es Archivo,
     que ya era la de la marca, en su version variable: el ancho extendido
     hace de voz de titular sin necesitar una segunda familia.
   - Cuerpo a 18 px, que es su tamano dominante: se lee comodo en el movil.
   - Un principio ergonomico por seccion, explicado con el teclado
     dibujado y la parte que cuenta encendida.
   - El configurador en una sola columna, con la barra de compra fija.
   - Cero entradas al hacer scroll. Ellos no tienen ninguna, y a nosotros
     nos costaron media pagina en blanco en las capturas.

   La unica seccion oscura es la de la luz: el RGB no se ve sobre blanco.
   ============================================================ */

:root{
  /* --- color. Contrastes medidos (ver el commit), no a ojo. --- */
  --blanco:#ffffff;
  --niebla:#f1f2f4;
  --hielo:#e6e9fb;          /* la seccion tintada: capas y editor */
  --noche:#0e1016;          /* solo la seccion de la luz */
  --tinta:#20232c;          /* 14:1 en niebla. Gris azulado, no negro */
  --gris:#575c6b;           /* 5,5:1 hasta en hielo */
  --tenue:#656a79;          /* 4,8:1 en niebla. NO sobre hielo */
  --filete:rgba(32,35,44,.1);
  --filete-2:rgba(32,35,44,.2);
  --azul:#3340e6;           /* el acento: 7:1 con blanco encima */
  --azul-2:#2330c8;
  --azul-velo:rgba(51,64,230,.08);
  --ok:#176b43;
  --aviso:#955710;
  --rgb:linear-gradient(90deg,#ff992a,#ff39c0 40%,#2a3dff 75%,#1be8ff);
  /* El mismo recorrido, oscurecido para TEXTO sobre fondo claro: el naranja
     y el cian del original daban 2,1:1 y 1,5:1 sobre blanco y la palabra
     "RGB" del nombre no se leia. Todos por encima de 4,5:1 (WCAG AA). */
  --rgb-texto:linear-gradient(90deg,#b93d0a,#b3176f 40%,#2a3dff 75%,#0a6c80);
  /* el teclado dibujado */
  --caja:#383c45;
  --base:#15171c;
  --cara:#23262d;

  /* --- tipo: una familia, Archivo variable --- */
  --letra:"Archivo","Helvetica Neue",Arial,sans-serif;
  --t-xs:.8125rem;    /* 13 */
  --t-s:.9375rem;     /* 15 */
  --t-m:1.125rem;     /* 18: el cuerpo */
  --t-l:1.3125rem;    /* 21 */
  --t-xl:clamp(1.5rem,2.6vw,1.9rem);
  --t-2xl:clamp(2rem,4.2vw,3.1rem);
  --t-3xl:clamp(2.5rem,6vw,4.6rem);

  /* --- movimiento: dos duraciones y una curva --- */
  --t-tap:200ms;            /* la de ergodox: 90 de sus 116 transiciones */
  --t-enter:420ms;
  --ease:cubic-bezier(.16,1,.3,1);
  --paso:60ms;
  /* bucles que ensenan algo del teclado; cada uno en check-movimiento */
  --loop-mitades:5.2s;
  --loop-columnas:4.2s;
  --loop-capa:12s;
  --loop-tecla:3.2s;

  --col:1200px;
  --canal:clamp(20px,5vw,64px);
  --cabecera:64px;
  /* Capas: una escala con nombre en vez de numeros sueltos. De abajo
     arriba: lo que se pega dentro de una tabla o tarjeta, la barra del
     producto, la barra de compra, la cabecera, el menu y el salto. */
  --z-dentro:1; --z-pbarra:55; --z-cbarra:58; --z-cabecera:60; --z-menu:70; --z-salto:100;
  --radio:16px;
  --radio-s:10px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--cabecera) + 16px);
  caret-color:var(--azul);scrollbar-color:rgba(32,35,44,.3) transparent;scrollbar-width:thin}
body{font-family:var(--letra);font-size:var(--t-m);line-height:1.6;background:var(--blanco);color:var(--tinta);
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
/* `height:auto`: los atributos width/height se vuelven CSS y le ganan a
   `aspect-ratio`. Sin esto las fotos salian verticales. */
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
table{border-collapse:collapse;width:100%}
h1,h2,h3{font-weight:800;font-stretch:112%;letter-spacing:-.03em;line-height:1.05;text-wrap:balance}
p{text-wrap:pretty}
[hidden]{display:none!important}
::selection{background:var(--azul);color:#fff}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-thumb{background:rgba(32,35,44,.25);border:3px solid var(--blanco);border-radius:99px}
:focus-visible{outline:2px solid var(--azul);outline-offset:3px;border-radius:6px}
.oscura :focus-visible{outline-color:#fff}
.env{width:100%;max-width:var(--col);margin-inline:auto;padding-inline:var(--canal)}
.saltar{position:fixed;left:12px;top:-60px;z-index:var(--z-salto);padding:10px 16px;border-radius:10px;background:var(--noche);color:#fff;
  font-weight:600;transition:top var(--t-tap) var(--ease)}
.saltar:focus{top:12px}
.top__pausa{margin-right:calc(-1 * clamp(12px,2.4vw,32px) + 4px);display:grid;place-items:center;width:44px;height:44px;border-radius:10px;color:var(--gris)}
.top__pausa[aria-pressed="true"]{color:var(--azul);background:var(--azul-velo)}
@media (hover:hover) and (pointer:fine){ .top__pausa:hover{color:var(--tinta);background:var(--niebla)} }
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- cabecera: blanca, fina ---------- */
.top{position:sticky;top:0;z-index:var(--z-cabecera);background:rgba(255,255,255,.9);backdrop-filter:saturate(170%) blur(14px);
  border-bottom:1px solid var(--filete)}
.top__in{display:flex;align-items:center;gap:clamp(12px,2.4vw,32px);height:var(--cabecera)}
.marca{display:flex;align-items:center;min-height:44px;flex:0 0 auto}
/* El logo mide lo mismo en todas las paginas y en Keymap Studio: 38 px,
   32 por debajo de 900 (css/aparato.css, .f-marca). El margen negativo
   evita que empuje la cabecera. */
.marca img{height:38px;width:auto;display:block;margin:-6px 0}
@media (max-width:900px){ .marca img{height:32px} }
.top__nav{display:flex;gap:clamp(6px,1.6vw,24px)}
.top__nav a{display:inline-flex;align-items:center;min-height:44px;padding-inline:2px;white-space:nowrap;font-size:var(--t-s);font-weight:500;
  color:var(--gris);transition:color var(--t-tap) var(--ease)}
.top__nav a[aria-current="page"]{color:var(--tinta)}
.top__sp{flex:1}
@media (hover:hover) and (pointer:fine){ .top__nav a:hover{color:var(--azul)} }

.idiomas{position:relative}
.idiomas__d{display:inline-flex;align-items:center;gap:.45em;min-height:44px;padding:0 .75em;border-radius:99px;
  font-size:var(--t-xs);font-weight:600;letter-spacing:.06em;color:var(--gris);
  transition:color var(--t-tap) var(--ease),background var(--t-tap) var(--ease)}
.idiomas__d svg{transition:transform var(--t-tap) var(--ease)}
.idiomas__d[aria-expanded="true"]{color:var(--tinta)}
.idiomas__d[aria-expanded="true"] svg{transform:rotate(180deg)}
.idiomas__m{position:absolute;top:calc(100% + 6px);right:0;z-index:var(--z-menu);min-width:160px;display:grid;padding:6px;
  border-radius:12px;background:#fff;box-shadow:0 0 0 1px var(--filete),0 20px 40px -22px rgba(20,24,40,.45);
  animation:despliega var(--t-tap) var(--ease)}
@keyframes despliega{from{opacity:0;transform:translateY(-4px) scale(.98)}}
.idiomas__m button{display:flex;align-items:center;min-height:42px;padding:0 .8em;border-radius:8px;font-size:var(--t-s);
  text-align:left;color:var(--gris)}
.idiomas__m button[aria-checked="true"]{color:var(--tinta);font-weight:700}
.idiomas__m button[aria-checked="true"]::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--azul);margin-left:auto}
@media (hover:hover) and (pointer:fine){
  .idiomas__d:hover{color:var(--tinta);background:var(--niebla)}
  .idiomas__m button:hover{background:var(--niebla);color:var(--tinta)}
}

/* ---------- botones: el azul es la accion, y solo la accion ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:50px;padding:0 1.5em;
  border-radius:10px;font-size:var(--t-s);font-weight:700;white-space:nowrap;background:var(--azul);color:#fff;
  transition:background var(--t-tap) var(--ease),box-shadow var(--t-tap) var(--ease),color var(--t-tap) var(--ease),
             transform var(--t-tap) var(--ease)}
.btn:active{transform:scale(.97)}
.btn--linea{background:transparent;color:var(--tinta);box-shadow:inset 0 0 0 1.5px var(--filete-2)}
.btn--claro{background:#fff;color:var(--tinta)}
.btn--ancho{width:100%}
@media (hover:hover) and (pointer:fine){
  .btn:hover{background:var(--azul-2)}
  .btn--linea:hover{background:transparent;box-shadow:inset 0 0 0 1.5px var(--tinta)}
  .btn--claro:hover{background:#e9ebf6}
}
.enlace{display:inline-flex;align-items:center;gap:.4em;min-height:44px;font-weight:700;color:var(--azul);
  transition:gap var(--t-tap) var(--ease)}
.enlace svg{transition:transform var(--t-tap) var(--ease)}
@media (hover:hover) and (pointer:fine){ .enlace:hover svg{transform:translateX(3px)} }

/* ---------- nombre en tres niveles, como el logotipo ----------
   El degradado solo en la palabra RGB: compromiso de marca. */
.nombre b{font-weight:inherit}
.nombre i{font-style:normal;color:var(--gris)}
.nombre u{text-decoration:none;background:var(--rgb-texto);-webkit-background-clip:text;background-clip:text;color:transparent}

.stock{display:inline-flex;align-items:center;gap:.5em;font-size:var(--t-xs);font-weight:600;color:var(--gris)}
.stock::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.stock--hay{color:var(--ok)}
.stock--ultima,.stock--encargo{color:var(--aviso)}
.stock--agotado,.stock--pronto,.stock--consulta{color:var(--tenue)}
.precio{font-weight:700;letter-spacing:-.01em}
.precio small{font-size:.78em;font-weight:500;color:var(--gris)}
.dto{display:inline-block;font-size:var(--t-xs);font-weight:700;padding:.2em .55em;border-radius:6px;
  background:rgba(27,122,76,.1);color:var(--ok)}

/* ---------- secciones ---------- */
.seccion{padding-block:clamp(72px,10vw,128px)}
.s-niebla{background:var(--niebla)}
.s-hielo{background:var(--hielo)}
.oscura{background:var(--noche);color:#fff}
.cab{display:grid;gap:14px;max-width:44rem;margin-bottom:clamp(32px,4.4vw,56px)}
.cab--centro{margin-inline:auto;text-align:center;justify-items:center}
.cab h2{font-size:var(--t-2xl)}
.cab p{color:var(--gris);font-size:var(--t-m)}
/* La pagina que empieza directamente en su contenido (el comparador) no
   necesita el aire de una seccion que llega despues de otra. */
.seccion--suelta{padding-top:clamp(40px,6vw,72px)}
.oscura .cab p{color:rgba(255,255,255,.72)}
.titular{font-size:var(--t-3xl);line-height:1}

/* ============================================================
   LA FAMILIA
   Lo primero de ergodox: "A family of keyboards", los modelos de la
   casa en fila, el que miras marcado. Aqui hace de portada y de tienda.
   ============================================================ */
.familia{padding-block:clamp(48px,7vw,88px) clamp(56px,8vw,96px);background:var(--niebla)}
.familia__cab{display:grid;gap:14px;justify-items:center;text-align:center;margin-bottom:clamp(34px,5vw,56px)}
.familia__cab p{color:var(--gris);max-width:40rem}
.filtros{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:6px}
.filtros button{min-height:40px;padding:0 1.05em;border-radius:99px;font-size:var(--t-s);font-weight:600;color:var(--gris);
  background:#fff;box-shadow:inset 0 0 0 1px var(--filete);
  transition:background var(--t-tap) var(--ease),color var(--t-tap) var(--ease),box-shadow var(--t-tap) var(--ease)}
.filtros button[aria-pressed="true"]{background:var(--tinta);color:#fff;box-shadow:none}
@media (hover:hover) and (pointer:fine){ .filtros button:not([aria-pressed="true"]):hover{color:var(--tinta);box-shadow:inset 0 0 0 1px var(--tinta)} }
.cuenta{font-size:var(--t-xs);color:var(--tenue);align-self:center;margin-left:4px}

/* La rejilla de la familia: fotos grandes, texto justo debajo. Sin caja
   alrededor de cada modelo: la foto ya delimita, y cinco recuadros
   blancos seria el "cuadro encima de otro" que Ernesto no quiere. */
/* Tres por fila en escritorio, como la familia de ergodox: con cinco
   modelos quedan tres y dos. A 340 px de minimo solo cabian dos y la
   familia ocupaba tres filas. */
.rejilla{display:grid;gap:clamp(34px,4vw,48px) clamp(20px,2.6vw,32px);grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr))}
.modelo{position:relative;display:grid;gap:14px;align-content:start}
.modelo__foto{position:relative;aspect-ratio:3/2;border-radius:var(--radio);overflow:hidden;background:#e3e4e8}
.modelo__foto img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-enter) var(--ease)}
.modelo__stock{position:absolute;left:12px;top:12px;padding:.4em .75em;border-radius:99px;background:rgba(255,255,255,.95)}
.modelo h3{font-size:var(--t-xl)}
.modelo h3 a::after{content:"";position:absolute;inset:0;z-index:var(--z-dentro)}
.modelo p{font-size:var(--t-s);color:var(--gris);line-height:1.55}
.datos{display:flex;flex-wrap:wrap;gap:6px}
.datos li{font-size:var(--t-xs);font-weight:600;padding:.3em .65em;border-radius:6px;background:#fff;box-shadow:inset 0 0 0 1px var(--filete)}
.modelo__pie{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.modelo__pie .precio{font-size:var(--t-l)}
.modelo__cta{display:inline-flex;align-items:center;gap:.35em;font-size:var(--t-s);font-weight:700;color:var(--azul)}
.modelo__cta svg{transition:transform var(--t-tap) var(--ease)}
@media (hover:hover) and (pointer:fine){
  .modelo:hover .modelo__foto img{transform:scale(1.03)}
  .modelo:hover .modelo__cta svg{transform:translateX(3px)}
}
.vacio{grid-column:1/-1;padding:40px;text-align:center;color:var(--gris)}

/* ============================================================
   UN PRINCIPIO POR SECCION
   El dibujo a un lado y el texto al otro, alternando. Como "Columnar"
   en ergodox: el teclado, la parte encendida, y 300 caracteres.
   ============================================================ */
.principio{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center}
.principio--der .principio__vis{order:2}
.principio__vis{display:grid;justify-items:center;gap:14px;min-width:0}
.principio__txt{display:grid;gap:18px;align-content:center;min-width:0}
.principio__txt h2{font-size:var(--t-2xl)}
.principio__txt p{color:var(--gris);max-width:32rem}
.oscura .principio__txt p{color:rgba(255,255,255,.74)}
.nota{font-size:var(--t-xs);color:var(--tenue);text-align:center;max-width:34rem;line-height:1.55}
.s-hielo .nota{color:var(--gris)}
.oscura .nota{color:rgba(255,255,255,.55)}

/* ---------- el teclado dibujado (js/dibujo.js) ---------- */
.dib{display:block;width:100%;height:auto;overflow:visible}
.dib__caja{fill:var(--caja)}
.dib__base{fill:var(--base);transition:fill var(--t-tap) var(--ease)}
.dib__cara{fill:var(--cara);transition:fill var(--t-tap) var(--ease)}
/* Los pulgares encendidos: el azul del acento, y un poco mas oscuro en la
   base para que la tecla siga leyendose como tecla. */
.dib--pulgares .dib__tecla--pulgar .dib__cara{fill:var(--azul)}
.dib--pulgares .dib__tecla--pulgar .dib__base{fill:var(--azul-2)}
/* Las mitades se separan hasta el ancho de los hombros y vuelven. */
.dib--mitades .dib__desliza--0{animation:separa-i var(--loop-mitades) var(--ease) infinite}
.dib--mitades .dib__desliza--1{animation:separa-d var(--loop-mitades) var(--ease) infinite}
@keyframes separa-i{0%,15%,100%{transform:translateX(90px)}45%,80%{transform:translateX(-50px)}}
@keyframes separa-d{0%,15%,100%{transform:translateX(-90px)}45%,80%{transform:translateX(50px)}}
/* Las columnas se encienden de fuera adentro, las dos manos a la vez: el
   menique primero, el indice al final. Es el orden de los dedos. */
.dib--columnas .dib__tecla:not(.dib__tecla--pulgar) .dib__cara{
  animation:columna var(--loop-columnas) var(--ease) infinite;
  animation-delay:calc(var(--c) * var(--paso) * 5)}
@keyframes columna{0%,4%{fill:var(--azul)}30%,100%{fill:var(--cara)}}

/* ---------- capas (seccion hielo) ---------- */
.capas{width:min(100%,520px)}
.capas__fila{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.capas__fila+.capas__fila{margin-top:8px}
.capas__t{aspect-ratio:1;border-radius:10px;background:var(--base);display:grid;place-items:center;position:relative;
  box-shadow:inset 0 -5px 0 rgba(0,0,0,.35),0 6px 14px -8px rgba(20,24,40,.5)}
.capas__t span{position:absolute;font-weight:700;font-size:clamp(.85rem,1.6vw,1.1rem);color:#e8eaf0;
  animation:capaA var(--loop-capa) steps(1,end) infinite}
.capas__t span+span{color:#9aa6ff;animation-name:capaB}
@keyframes capaA{0%,49.9%{opacity:1}50%,100%{opacity:0}}
@keyframes capaB{0%,49.9%{opacity:0}50%,100%{opacity:1}}
.capas__t--hold{background:var(--azul-2)}
.capas__t--hold::after{content:"";position:absolute;inset:0;border-radius:10px;box-shadow:inset 0 0 0 2px #fff;
  opacity:0;animation:pulsada var(--loop-capa) steps(1,end) infinite}
@keyframes pulsada{0%,49.9%{opacity:0}50%,100%{opacity:1}}
.funciones{display:grid;gap:16px 28px;grid-template-columns:repeat(2,minmax(0,1fr))}
.funciones li{border-top:1px solid var(--filete-2);padding-top:12px}
.funciones b{display:block;font-size:var(--t-s);margin-bottom:2px}
.funciones span{font-size:var(--t-s);color:var(--gris);line-height:1.5}

/* ---------- la luz (la unica seccion oscura) ---------- */
.kb{position:relative;width:min(100%,680px);aspect-ratio:1520/666}
.kb__escena{position:absolute;left:0;top:0;transform-origin:0 0}
.kb__mitad{position:absolute}
.kb__tecla{position:absolute;border-radius:9px;background:#0e1016;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.06),inset 0 -4px 7px rgba(0,0,0,.7)}
.modos{display:flex;flex-wrap:wrap;gap:8px}
.modos button{min-height:40px;padding:0 1em;border-radius:99px;font-size:var(--t-s);font-weight:600;color:rgba(255,255,255,.7);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);
  transition:background var(--t-tap) var(--ease),color var(--t-tap) var(--ease),box-shadow var(--t-tap) var(--ease)}
.modos button[aria-pressed="true"]{background:#fff;color:var(--noche);box-shadow:none}
@media (hover:hover) and (pointer:fine){ .modos button:not([aria-pressed="true"]):hover{color:#fff;box-shadow:inset 0 0 0 1px #fff} }

/* ---------- pantallas ---------- */
.oleds{display:flex;gap:clamp(28px,6vw,72px);justify-content:center;align-items:flex-start}
.oled{display:grid;justify-items:center;gap:14px}
.oled__marco{padding:8px;border-radius:12px;background:#0b0d12;box-shadow:0 26px 44px -24px rgba(20,24,40,.6)}
.oled canvas{display:block;width:clamp(96px,12vw,132px);height:auto;aspect-ratio:68/160;image-rendering:pixelated;
  border-radius:4px;background:#04060a}
.oled figcaption{font-size:var(--t-xs);font-weight:600;color:var(--gris)}

/* ---------- hotswap, sobre suelo claro ---------- */
.hot{display:flex;gap:clamp(30px,7vw,80px);align-items:flex-end;justify-content:center}
.hot__col{display:grid;justify-items:center;gap:2px}
.hot__sw{width:clamp(124px,15vw,176px);height:auto;overflow:visible;filter:drop-shadow(0 16px 20px rgba(20,24,40,.2))}
.hot__pieza{animation:saca var(--loop-tecla) var(--ease) infinite;transform-origin:50% 70%}
.hot__col--2 .hot__pieza{animation-delay:calc(var(--loop-tecla) / 2)}
@keyframes saca{0%,10%{transform:translateY(0) rotate(0)}40%,60%{transform:translateY(-46px) rotate(-7deg)}90%,100%{transform:translateY(0) rotate(0)}}
.hot__et{font-size:var(--t-s);font-weight:700;margin-top:12px}
.hot__dato{font-size:var(--t-xs);color:var(--gris)}

/* ---------- tablas ---------- */
.tabla-env{position:relative;overflow-x:auto;border-radius:var(--radio);background:#fff;box-shadow:0 0 0 1px var(--filete)}
.tabla th,.tabla td{padding:16px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--filete);font-size:var(--t-s)}
.tabla tbody tr:last-child>*{border-bottom:0}
.tabla thead th{font-weight:700;min-width:160px}
.tabla th[scope="row"]{position:sticky;left:0;z-index:var(--z-dentro);background:#fff;font-weight:600;color:var(--gris);white-space:nowrap}
.tabla .actual{background:#f4f5ff}
.tabla th[scope="row"].actual{background:#f4f5ff}
.tabla .igual{color:var(--tenue)}
.tabla a.nombre{color:var(--tinta)}
@media (hover:hover) and (pointer:fine){ .tabla a.nombre:hover{color:var(--azul)} }

/* ---------- confianza ---------- */
.confianza{display:grid;gap:clamp(24px,3vw,40px);grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
.confianza li{display:grid;gap:8px;align-content:start}
.confianza svg{color:var(--azul)}
.confianza b{font-size:var(--t-m)}
.confianza span{font-size:var(--t-s);color:var(--gris);line-height:1.55}

.pie{background:var(--niebla);padding-block:34px 44px}
.pie__in{display:flex;flex-wrap:wrap;gap:14px 30px;justify-content:space-between;align-items:start}
.pie p{font-size:var(--t-xs);color:var(--tenue);max-width:60ch;line-height:1.7}
.pie nav{display:flex;flex-wrap:wrap;gap:4px 20px}
.pie nav a{display:inline-flex;align-items:center;min-height:44px;font-size:var(--t-s);color:var(--gris)}

/* ============================================================
   LA FICHA DE MODELO
   ============================================================ */

/* En la ficha la cabecera del sitio no se pega: la que se pega es la
   barra del producto. Dos barras pegadas se comerian 120 px del movil. */
.top--suelta{position:relative}

/* La tira de la familia: los cinco en pequeno, el que miras marcado. Es
   lo primero que ensena ergodox en cada producto: te situa. */
.tira{background:var(--niebla);border-bottom:1px solid var(--filete)}
.tira ul{display:flex;gap:clamp(8px,1.4vw,18px);overflow-x:auto;padding-block:14px;scrollbar-width:none}
.tira ul::-webkit-scrollbar{display:none}
.tira a{display:grid;grid-template-columns:72px auto;align-items:center;gap:10px;min-height:56px;padding:6px 14px 6px 6px;
  border-radius:12px;white-space:nowrap;font-size:var(--t-s);font-weight:600;color:var(--gris);
  transition:background var(--t-tap) var(--ease),color var(--t-tap) var(--ease),box-shadow var(--t-tap) var(--ease)}
.tira img{width:72px;aspect-ratio:3/2;object-fit:cover;border-radius:7px}
.tira a[aria-current="page"]{background:#fff;color:var(--tinta);box-shadow:inset 0 0 0 2px var(--azul)}
@media (hover:hover) and (pointer:fine){ .tira a:not([aria-current]):hover{background:#fff;color:var(--tinta)} }

/* La barra del producto: el nombre, sus secciones y la accion. */
.pbarra{position:sticky;top:0;z-index:var(--z-pbarra);background:rgba(255,255,255,.93);backdrop-filter:saturate(170%) blur(14px);
  border-bottom:1px solid var(--filete)}
.pbarra__in{display:flex;align-items:center;gap:clamp(12px,2.4vw,32px);min-height:62px}
.pbarra__nombre{font-size:var(--t-l);font-weight:800;font-stretch:112%;letter-spacing:-.02em;white-space:nowrap;
  min-width:0;overflow:hidden;text-overflow:ellipsis}
.pbarra nav{display:flex;gap:clamp(4px,1.6vw,22px);overflow-x:auto;scrollbar-width:none;flex:1}
.pbarra nav::-webkit-scrollbar{display:none}
.pbarra nav a{display:inline-flex;align-items:center;min-height:44px;white-space:nowrap;font-size:var(--t-s);font-weight:500;
  color:var(--gris);box-shadow:inset 0 -2px 0 transparent;transition:color var(--t-tap) var(--ease),box-shadow var(--t-tap) var(--ease)}
.pbarra nav a[aria-current="true"]{color:var(--tinta);box-shadow:inset 0 -2px 0 var(--azul)}
.pbarra .btn{min-height:44px;padding:0 1.2em;flex:none}

/* La presentacion: galeria y lo esencial. */
.intro{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center;
  padding-block:clamp(36px,5vw,64px) clamp(56px,8vw,96px)}
.galeria{display:grid;gap:12px;min-width:0}
.galeria__foto{position:relative;aspect-ratio:4/3;border-radius:var(--radio);overflow:hidden;background:#e3e4e8}
.galeria__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity var(--t-enter) var(--ease)}
.galeria__foto img[data-sale]{opacity:0}
.miniaturas{display:flex;gap:10px}
.miniaturas button{width:88px;aspect-ratio:4/3;border-radius:var(--radio-s);overflow:hidden;opacity:.55;
  box-shadow:0 0 0 1px var(--filete);transition:opacity var(--t-tap) var(--ease),box-shadow var(--t-tap) var(--ease)}
.miniaturas button[aria-pressed="true"]{opacity:1;box-shadow:0 0 0 2px var(--azul)}
.miniaturas img{width:100%;height:100%;object-fit:cover}
@media (hover:hover) and (pointer:fine){ .miniaturas button:hover{opacity:1} }
.esencial{display:grid;gap:18px;align-content:center}
.esencial h1{font-size:var(--t-3xl)}
.esencial>p{color:var(--gris)}
.esencial__precio{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px}
.esencial__precio .precio{font-size:var(--t-2xl);font-weight:800}
.rasgos{display:grid;gap:10px}
.rasgos li{display:grid;grid-template-columns:auto 1fr;gap:12px;font-size:var(--t-s);line-height:1.5}
.rasgos svg{margin-top:2px;color:var(--azul)}
.esencial__acciones{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.valoracion{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-s);color:var(--gris)}
.valoracion svg{color:var(--tinta)}

/* ---------- el configurador, en una columna ----------
   Como la pagina de compra de ergodox: una columna estrecha, un paso
   por bloque, cada opcion con su icono, su etiqueta y su precio. En
   una columna no hay que buscar donde sigue: se baja y ya. */
.configura{background:var(--niebla)}
.config{display:grid;gap:18px;max-width:640px;margin-inline:auto}
.paso{display:grid;gap:10px;padding:22px;border:0;border-radius:var(--radio);background:#fff;min-width:0}
/* Las etiquetas de paso van en frase normal, no en MAYUSCULAS: en
   mayusculas pequenas todo se lee igual y gritan sin decir mas. */
.paso legend,.paso__t{float:left;width:100%;font-size:var(--t-m);font-weight:700;letter-spacing:-.01em;
  color:var(--tinta);margin-bottom:6px}
.paso legend+*{clear:both}
.opcion{position:relative;display:grid;grid-template-columns:48px 1fr auto;gap:4px 14px;align-items:center;
  min-height:76px;padding:12px 16px 12px 12px;border-radius:12px;cursor:pointer;background:#fff;
  box-shadow:inset 0 0 0 1.5px var(--filete-2);
  transition:box-shadow var(--t-tap) var(--ease),background var(--t-tap) var(--ease),transform var(--t-tap) var(--ease)}
.opcion input{position:absolute;opacity:0;pointer-events:none}
.opcion__ic{grid-row:span 2;display:grid;place-items:center;width:48px;height:48px;border-radius:10px;background:var(--niebla);color:var(--tinta)}
.opcion__n{font-size:var(--t-m);font-weight:700;line-height:1.25}
.opcion__p{grid-row:span 2;font-size:var(--t-s);font-weight:700;text-align:right;white-space:nowrap}
.opcion__d{font-size:var(--t-s);color:var(--gris);line-height:1.45}
.opcion__chip{display:inline-block;margin-left:8px;padding:.15em .6em;border-radius:99px;font-size:var(--t-xs);font-weight:600;
  vertical-align:.1em;box-shadow:inset 0 0 0 1px var(--filete-2);color:var(--gris)}
/* La elegida: borde en el azul y un velo del mismo azul. El brillo de
   ergodox alrededor de la opcion es un halo de color sin desplazamiento,
   que nuestro suelo de calidad prohibe: aqui el borde basta. */
.opcion:has(input:checked){box-shadow:inset 0 0 0 2px var(--azul);background:var(--azul-velo)}
.opcion:has(input:checked) .opcion__ic{background:var(--azul);color:#fff}
.opcion:has(input:focus-visible){outline:2px solid var(--azul);outline-offset:3px}
.opcion:active{transform:scale(.99)}
.opcion--agotada{cursor:not-allowed;opacity:.6}
.opcion--agotada .opcion__n{text-decoration:line-through}
@media (hover:hover) and (pointer:fine){
  .opcion:not(.opcion--agotada):not(:has(input:checked)):hover{box-shadow:inset 0 0 0 1.5px var(--tinta)}
}
.fija{display:grid;grid-template-columns:48px 1fr;gap:2px 14px;align-items:center;padding:12px;border-radius:12px;background:var(--niebla)}
.fija .opcion__ic{background:#fff;grid-row:span 2}
.fija b{font-size:var(--t-m)}
.fija span:not(.opcion__ic){grid-column:2;font-size:var(--t-s);color:var(--gris)}

/* "Tu configuracion incluye": lo de ergodox al final de la pagina de
   compra. Lo que viene en la caja, y lo que no. */
.incluye{display:grid;gap:16px;padding:24px;border-radius:var(--radio);background:#fff}
.incluye h3{font-size:var(--t-l)}
.incluye ul{display:grid;gap:8px}
.incluye li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;font-size:var(--t-s)}
.incluye li.si svg{color:var(--ok)}
.incluye li.no{color:var(--tenue)}
.incluye li.no span{text-decoration:line-through;text-decoration-color:var(--filete-2)}
.incluye__total{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 14px;
  padding-top:16px;border-top:1px solid var(--filete)}
.incluye__total .precio{font-size:var(--t-xl);font-weight:800}
.incluye__total small{flex-basis:100%;text-align:right;font-size:var(--t-xs);color:var(--gris)}
.incluye__nota{font-size:var(--t-xs);color:var(--gris);line-height:1.6}

/* La barra de compra fija abajo, como la de ergodox: garantia, envio,
   precio y comprar. Sale cuando ya has visto la presentacion. */
.cbarra{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-cbarra);background:rgba(255,255,255,.96);backdrop-filter:blur(16px);
  box-shadow:0 -1px 0 var(--filete),0 -20px 40px -30px rgba(20,24,40,.45);
  transform:translateY(110%);transition:transform var(--t-enter) var(--ease)}
.cbarra.visible{transform:none}
.cbarra__in{display:flex;align-items:center;gap:clamp(12px,2.4vw,28px);min-height:72px;
  padding-bottom:env(safe-area-inset-bottom,0px)}
.cbarra__garantias{display:flex;flex-wrap:wrap;gap:4px 18px;flex:1;font-size:var(--t-xs);font-weight:600;color:var(--gris)}
.cbarra__garantias a{color:var(--azul)}
.cbarra__txt{display:none;min-width:0;flex:1}
.cbarra__txt span{display:block;font-size:var(--t-xs);color:var(--gris);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cbarra .precio{font-size:var(--t-l);white-space:nowrap}
body.con-cbarra{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
/* Que la barra fija de abajo no tape lo que recibe el foco (WCAG 2.4.11) */
html:has(body.con-cbarra){scroll-padding-bottom:96px}

/* ---------- ficha y componentes ---------- */
.ficha{display:grid;gap:0 clamp(28px,4vw,64px);grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}
.ficha div{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr);gap:16px;padding-block:14px;border-top:1px solid var(--filete)}
.ficha dt{font-size:var(--t-s);font-weight:600;color:var(--gris)}
.ficha dd{font-size:var(--t-s)}
.ficha-dos{display:grid;gap:clamp(40px,6vw,72px)}
.ficha-dos h3{font-size:var(--t-l);margin-bottom:12px}

/* ============================================================
   COMPARADOR
   ============================================================ */
.mandos{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:10px;margin-bottom:22px}
.interruptor{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 1.05em 0 .8em;border-radius:99px;
  font-size:var(--t-s);font-weight:700;background:#fff;box-shadow:inset 0 0 0 1px var(--filete-2);transition:box-shadow var(--t-tap) var(--ease)}
.interruptor__luz{position:relative;width:32px;height:19px;border-radius:99px;background:var(--filete-2);transition:background var(--t-tap) var(--ease)}
.interruptor__luz::after{content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform var(--t-tap) var(--ease)}
.interruptor[aria-pressed="true"] .interruptor__luz{background:var(--azul)}
.interruptor[aria-pressed="true"] .interruptor__luz::after{transform:translateX(13px)}
@media (hover:hover) and (pointer:fine){ .interruptor:hover{box-shadow:inset 0 0 0 1px var(--tinta)} }
.cmp thead th{min-width:150px;vertical-align:top}
.cmp th[scope="row"]{max-width:124px;white-space:normal}
.cmp__col{display:grid;gap:8px;justify-items:start}
.cmp__foto{display:block;width:100%;aspect-ratio:3/2;border-radius:var(--radio-s);overflow:hidden;background:#e3e4e8}
.cmp__foto img{width:100%;height:100%;object-fit:cover}
.cmp__nombre{font-size:var(--t-m);font-weight:800;line-height:1.2}
.cmp__acciones{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:4px}
/* Con el relleno de la tabla general, los cinco no cabian en 1440px y el
   quinto quedaba cortado sin que se notara que hay mas a la derecha. */
.cmp th,.cmp td{padding:14px 12px}
.cmp__acciones .btn{min-height:42px;padding:0 1.05em}
.cmp__quitar{display:inline-flex;align-items:center;min-height:42px;padding:0 .4em;font-size:var(--t-s);color:var(--gris);
  text-decoration:underline;text-decoration-color:var(--filete-2);text-underline-offset:.3em}
@media (hover:hover) and (pointer:fine){ .cmp__quitar:hover{color:var(--tinta)} }
.cmp__agotado{color:var(--tenue);text-decoration:line-through}
.cmp tr.igual td{color:var(--tenue)}

/* ---------- legal: texto para leer, no para vender ----------
   Mismo sistema, mas estrecho y con indice fijo a la izquierda. La
   medida de linea (68ch) importa mas que en ninguna otra pagina. */
.legal{display:grid;grid-template-columns:200px minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start}
.legal__indice{position:sticky;top:calc(var(--cabecera) + 24px)}
.legal__indice-t{font-size:var(--t-s);font-weight:700;color:var(--gris);margin-bottom:8px}
.legal__indice ul{display:grid;gap:2px}
.legal__indice a{display:flex;align-items:center;min-height:40px;color:var(--gris);font-weight:500}
@media (hover:hover) and (pointer:fine){ .legal__indice a:hover{color:var(--azul)} }
.legal__fecha{font-size:var(--t-s);color:var(--tenue)}
.legal__sec{padding-bottom:clamp(40px,6vw,64px);margin-bottom:clamp(40px,6vw,64px);border-bottom:1px solid var(--filete)}
.legal__sec:last-child{border-bottom:0;margin-bottom:0}
.legal__sec h2{font-size:var(--t-2xl);margin-bottom:20px}
.legal__cuerpo{max-width:68ch;color:var(--tinta)}
.legal__cuerpo>*+*{margin-top:14px}
.legal__cuerpo h3{font-size:var(--t-l);margin-top:36px}
.legal__cuerpo ul{list-style:disc;padding-left:1.3em;display:grid;gap:10px}
.legal__cuerpo a{color:var(--azul);text-decoration:underline;text-underline-offset:3px}
.legal__cuerpo code{font-size:.85em;background:var(--niebla);padding:1px 6px;border-radius:5px;word-break:break-word}
.legal__resumen{background:var(--hielo);padding:18px 20px;border-radius:12px;font-weight:500}
.legal__pendiente{background:var(--niebla);padding:16px 18px;border-radius:12px;color:var(--gris)}
.legal__titular{display:grid;gap:8px}
.legal__titular div{display:grid;grid-template-columns:minmax(120px,max-content) 1fr;gap:12px}
.legal__titular dt{color:var(--gris);font-weight:600}
.legal__tabla th[scope="row"]{white-space:normal;min-width:150px}
.legal__borrar{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.legal__estado{flex-basis:100%;font-size:var(--t-s);color:var(--ok);font-weight:600;min-height:1.5em}
.pie__legal{flex-basis:100%;border-top:1px solid var(--filete);padding-top:8px}
.pie nav.pie__legal a{font-size:var(--t-xs)}

/* ---------- 404: los cinco, para volver a encontrar el camino ---------- */
.perdida{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:40px}
.perdida a{display:grid;gap:10px;padding:10px;border-radius:var(--radio);background:var(--niebla);color:var(--tinta);
  transition:background var(--t-tap) var(--ease)}
.perdida img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:8px}
.perdida .nombre{font-weight:800;font-stretch:112%;letter-spacing:-.02em;padding-inline:4px}
@media (hover:hover) and (pointer:fine){ .perdida a:hover{background:var(--hielo)} }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:960px){
  .principio,.intro{grid-template-columns:minmax(0,1fr)}
  .principio--der .principio__vis{order:0}
  .cbarra__garantias{display:none}
  .cbarra__txt{display:block}
}
@media (max-width:760px){
  .legal{grid-template-columns:minmax(0,1fr)}
  .legal__indice{position:static}
  /* Keymap Studio pide Chrome de escritorio (Web Serial): en el movil se
     queda en el pie y deja sitio a Tienda y Manuales, como en la portada */
  .top__nav .top__comparar,.top__nav .top__studio{display:none}
  .pbarra nav{display:none}
  /* "Sofle Choc · Space Black RGB" no cabe entero junto al boton en 390px */
  .pbarra__nombre{font-size:var(--t-m)}
  .pbarra__in{justify-content:space-between}
  .funciones{grid-template-columns:minmax(0,1fr)}
  .ficha div{grid-template-columns:minmax(0,1fr);gap:2px}
  .tabla th,.tabla td{padding:12px 10px}
  .tabla thead th{min-width:120px}
  .tabla th[scope="row"]{white-space:normal;min-width:96px;max-width:120px}
  .opcion{grid-template-columns:40px 1fr auto;gap:2px 12px;padding:12px}
  .opcion__ic,.fija .opcion__ic{width:40px;height:40px}
  .fija{grid-template-columns:40px 1fr}
  .paso{padding:16px}
}
@media (max-width:520px){
  /* En el movil la barra deja solo precio y comprar: el nombre ya va en la
     barra de arriba, y un rango de precio no cabe al lado de otra cosa. */
  .cbarra__txt{display:none}
  .cbarra__in{justify-content:space-between}
  .cbarra .precio{font-size:var(--t-m)}
  .cbarra .btn{flex:none;padding-inline:18px}
  .top__in{gap:10px} .top__pausa{margin-right:-6px;width:40px} }

/* Menos movimiento, no menos informacion: fuera los bucles y los
   desplazamientos; el cambio de estado se conserva. */
/* Los bucles se paran con la clase .sin-movimiento, que pone tienda.js
   cuando el sistema pide poco movimiento O el visitante pulsa pausa en la
   cabecera (WCAG 2.2.2). Un solo sitio para las dos vias. */
.sin-movimiento .dib--mitades .dib__desliza--0,.sin-movimiento .dib--mitades .dib__desliza--1,
.sin-movimiento .hot__pieza,.sin-movimiento .capas__t span,.sin-movimiento .capas__t--hold::after,
.sin-movimiento .dib--columnas .dib__tecla .dib__cara{animation:none}
.sin-movimiento .capas__t span+span{opacity:0}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .idiomas__m{animation:none}
  .modelo__foto img,.opcion,.btn,.cbarra{transition-property:background,color,box-shadow,opacity}
}

h1 em,h2 em{font-style:normal;color:var(--gris)}
.oscura h2 em{color:rgba(255,255,255,.55)}
.nota--izq{text-align:left}
.centro-pie{text-align:center;margin-top:18px}
.dibujo{width:100%;max-width:640px}
.ic-flecha{display:inline-flex}