/* Ajustes */
.cfg{display:grid;gap:16px}
.cfgS u{display:block;text-decoration:none;font:600 11px Inter;color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.12em;margin-bottom:8px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chips button{flex:1;min-width:76px;height:52px;border-radius:14px;
  border:1.5px solid var(--line);background:var(--card2);color:var(--ink-2);
  font:800 15px Inter;cursor:pointer;transition:.14s}
.chips button:active{transform:scale(.96)}
.chips button[data-on]{background:var(--k);border-color:var(--k);color:var(--kink)}
.cfgVol{display:flex;align-items:center;gap:14px}
.cfgVol input{flex:1;accent-color:var(--k);height:34px}
.cfgVol span{font:900 20px Archivo;color:var(--ink-2);min-width:38px;text-align:right}
.cfgBt{display:grid;grid-template-columns:1fr 1fr;gap:9px}

/* Escaparate */
.esq{position:fixed;inset:0;z-index:450;background:#07070a;overflow:hidden;
  display:grid;grid-template-rows:auto 1fr auto;opacity:0;transition:opacity .32s}
.esq[data-on]{opacity:1}
.esqBg{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 28%,#ff5c9d26 0%,transparent 62%),
             radial-gradient(circle at 15% 85%,#ff8fc01f 0%,transparent 55%)}
@keyframes esqPulso{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.02)}}
.esqHd{position:relative;text-align:center;padding:clamp(20px,4vh,44px) 20px 0}
.esqLogo{font:900 clamp(38px,7vw,78px) Fraunces,Georgia,serif;color:var(--k);
  letter-spacing:-.03em;animation:esqPulso 3.4s ease-in-out infinite;
  text-shadow:0 6px 40px #ff5c9d4d}
.esqSub{font:600 clamp(12px,1.8vw,16px) Inter;color:var(--ink-3);
  letter-spacing:.3em;text-transform:uppercase;margin-top:10px}
.esqMain{position:relative;display:grid;place-items:center;min-height:0;padding:20px}
@keyframes esqIn{from{opacity:0;transform:translateY(28px) scale(.94)}to{opacity:1;transform:none}}
.esqCard{text-align:center;max-width:min(92vw,620px)}
.esqCard.in{animation:esqIn .7s cubic-bezier(.2,1,.3,1)}
.esqCard img{width:min(56vw,360px);height:min(38vh,340px);object-fit:contain;
  filter:drop-shadow(0 22px 50px #000a)}
.esqNm{font:800 clamp(22px,3.6vw,38px) Inter;color:var(--ink);letter-spacing:-.02em;
  margin-top:clamp(14px,2.6vh,28px)}
.esqPz{font:900 clamp(46px,9vw,96px) Archivo;color:var(--k);letter-spacing:-.04em;
  margin-top:6px;text-shadow:0 8px 34px #ff5c9d40}
/* tira desfilando */
.esqTira{position:relative;overflow:hidden;padding:clamp(12px,2.4vh,24px) 0;
  border-top:1.5px solid #1e1e26;mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
@keyframes esqRun{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.esqRun{display:flex;gap:clamp(18px,3vw,38px);width:max-content;
  animation:esqRun 34s linear infinite}
.esqMini{display:grid;justify-items:center;gap:6px;opacity:.85}
.esqMini img{width:clamp(52px,6vw,78px);height:clamp(48px,5.4vw,70px);object-fit:contain}
.esqMini span{font:900 clamp(14px,1.7vw,18px) Archivo;color:var(--ink-2)}
.esqX{position:fixed;top:16px;right:16px;z-index:10;width:52px;height:52px;border-radius:16px;
  background:#ffffff14;border:1.5px solid #ffffff26;color:#fff;font:700 21px Inter;
  cursor:pointer;backdrop-filter:blur(8px)}
.esqX:active{transform:scale(.94)}

/* Ordenar catalogo */
.ordAcc{display:grid;grid-template-columns:2fr 1fr;gap:9px;margin-bottom:10px}
.ordHint{font:500 12.5px Inter;color:var(--ink-3);margin-bottom:12px}
.ordLista{display:grid;gap:8px;max-height:min(52dvh,440px);overflow:auto;
  touch-action:pan-y}
.ordIt{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;
  gap:12px;background:var(--card2);border:1.5px solid var(--line2);border-radius:14px;
  padding:9px 13px;user-select:none;touch-action:none;position:relative;z-index:1;
  transition:transform .18s cubic-bezier(.2,1,.3,1);cursor:grab}
.ordIt.drag{z-index:5;border-color:var(--k);background:#1a1218;cursor:grabbing;
  box-shadow:0 14px 34px #000c;transition:none;scale:1.03}
.ordN{font:900 15px Archivo;color:var(--ink-3);min-width:22px}
.ordIt img{width:44px;height:38px;object-fit:contain}
.ordNm{font:800 15px Inter;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ordGrip{font:700 20px Inter;color:var(--ink-3);cursor:grab}

/* Productos: precio vs coste bien diferenciados */
.pr .campos{display:flex;gap:10px;flex-wrap:wrap}
.fl2.vende u{color:var(--k)}
.fl2.vende .pin{border-color:#3d2434}
.fl2.vende input{color:var(--ink)}
.fl2.cuesta u{color:#7e8a9c}
.fl2.cuesta .pin{background:#0c0f12;border-color:#25303a}
.fl2.cuesta input{color:#9fb0c4;font-family:Inter,sans-serif;font-size:19px;font-weight:800}
.pin.cuestaIn{background:#0c0f12;border-color:#25303a}
.pin.cuestaIn input{color:#9fb0c4}
.marg{font:700 13px Inter;margin-top:9px}
.marg.bien{color:var(--ok)}
.marg.mal{color:var(--bad)}
.marg.cero{color:var(--ink-3)}
.marg b{font-weight:900}
.marg .sinc{color:var(--ink-3);background:#22222b;padding:4px 10px;border-radius:99px;
  font:700 11px Inter}
