/* Pantalla Vender · catalogo + barra de cobro */
.cat{display:grid;gap:clamp(11px,1.4vw,16px);padding-bottom:104px;
  grid-template-columns:repeat(auto-fill,minmax(clamp(150px,15vw,230px),1fr))}

/* --- tarjeta de producto --- */
.p{position:relative;background:var(--card);border:1.5px solid var(--line);border-radius:22px;
  padding:15px;cursor:pointer;user-select:none;overflow:hidden;display:grid;
  grid-template-rows:auto 1fr auto auto;gap:9px;min-height:clamp(292px,32vw,362px);
  transition:border-color .2s,background .2s}
.p:active{transform:scale(.975)}
.p[data-q]{border-color:var(--k);background:#1a1218}
.p .nm{font:600 13px Inter;color:var(--ink-2);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;padding-right:70px}
.p .im{display:grid;place-items:center;min-height:0}
.p img{width:100%;height:clamp(104px,15vw,164px);object-fit:contain;pointer-events:none;
  transition:transform .3s cubic-bezier(.2,1,.3,1)}
.p[data-q] img{transform:scale(.95)}
/* cinta: cubre la esquina entera, numero grande, poco angulo */
.p .rib{position:absolute;top:0;right:0;width:124px;height:124px;pointer-events:none;z-index:4;
  background:linear-gradient(200deg,var(--k2),var(--k));clip-path:polygon(100% 0,18% 0,100% 82%)}
.p .rib b{position:absolute;top:2px;right:10px;font:900 52px/1 Archivo;color:var(--kink);
  letter-spacing:-.04em;font-variant-numeric:tabular-nums}
/* animacion solo en la tarjeta tocada, nunca al cargar */
.p.pop .rib{animation:ribIn .3s cubic-bezier(.25,1.3,.4,1)}
@keyframes ribIn{from{transform:translate(26px,-26px);opacity:.4}}
.p.pop .rib b{animation:numIn .34s cubic-bezier(.3,1.6,.5,1)}
@keyframes numIn{from{transform:scale(.45)}}
.p.pop .st{animation:stIn .3s ease-out}
@keyframes stIn{from{transform:translateY(-5px);opacity:.35}}
/* subtotal: total grande + unitario legible */
.p .st{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.p .st .r{font:900 clamp(30px,4vw,46px)/1 Archivo;color:var(--k);letter-spacing:-.03em}
.p .st .l{font:800 clamp(15px,1.7vw,19px) Archivo;color:#c3c3cf;white-space:nowrap;padding-bottom:3px}
.p:not([data-q]) .st .r{color:var(--ink)}
.p:not([data-q]) .st .l{color:var(--ink-3)}
.p .bar{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.p .bar button{height:clamp(48px,5vw,54px);border-radius:15px;border:1.5px solid var(--line);
  background:var(--sub);color:var(--ink);font:700 26px/1 Inter;cursor:pointer;
  display:grid;place-items:center;padding-bottom:3px}
.p .bar button:active{background:var(--k);border-color:var(--k);color:var(--kink)}
.p .bar .ph{opacity:0;pointer-events:auto;cursor:default}

/* --- barra inferior --- */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:70;pointer-events:none}
.dock>*{pointer-events:auto}
.sheet{background:#121216f5;backdrop-filter:blur(24px);border-top:1.5px solid var(--line2);
  border-radius:26px 26px 0 0;box-shadow:0 -18px 60px #000a;
  padding-bottom:env(safe-area-inset-bottom);
  transform:translateY(110%);transition:transform .34s cubic-bezier(.22,1,.3,1)}
.sheet[data-show]{transform:none}
.hand{height:5px;width:46px;border-radius:99px;background:#ffffff2b;margin:9px auto 0}
.peek{display:flex;align-items:center;gap:14px;padding:12px clamp(16px,2.4vw,22px) 15px;cursor:pointer}
.peek .cn{background:var(--k);color:var(--kink);min-width:50px;height:50px;padding:0 13px;
  border-radius:99px;display:grid;place-items:center;font:900 24px Archivo;flex:none;
  font-variant-numeric:tabular-nums}
.peek.hit .cn{animation:cnPop .34s cubic-bezier(.3,1.6,.5,1)}
@keyframes cnPop{from{transform:scale(1.32)}}
.peek .lb{flex:1;min-width:0}
.peek .lb u{display:block;text-decoration:none;font:600 11px Inter;color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.12em}
.peek .lb .t{font:900 clamp(28px,4.6vw,42px) Archivo;letter-spacing:-.03em}
.peek .go{background:var(--k);color:var(--kink);border:0;border-radius:16px;height:56px;
  padding:0 clamp(18px,2.4vw,28px);font:900 17px Inter;cursor:pointer;flex:none}
.peek .go:active{transform:scale(.96)}
.body{max-height:0;overflow:hidden;transition:max-height .36s cubic-bezier(.22,1,.3,1)}
.sheet[data-open] .body{max-height:min(54dvh,460px);overflow:auto}
.inner{padding:2px clamp(14px,2.2vw,20px) 20px}
.inner h3{font:600 11px Inter;color:var(--ink-3);text-transform:uppercase;
  letter-spacing:.12em;margin:4px 4px 12px}
/* fichas del carrito: verticales, cifras grandes, sin simbolo */
.cart{display:grid;gap:11px;grid-template-columns:repeat(auto-fill,minmax(clamp(112px,11vw,142px),1fr))}
.ci{position:relative;background:var(--card2);border:1.5px solid var(--line2);border-radius:16px;
  padding:10px 10px 11px;display:grid;grid-template-rows:1fr auto auto;gap:4px;
  overflow:hidden;aspect-ratio:.76}
.ci img{width:100%;height:100%;object-fit:contain;min-height:0}
.ci .rib{position:absolute;top:0;right:0;width:74px;height:74px;
  background:linear-gradient(200deg,var(--k2),var(--k));clip-path:polygon(100% 0,18% 0,100% 82%)}
.ci .rib b{position:absolute;top:1px;right:7px;font:900 31px/1 Archivo;color:var(--kink)}
.ci .t{font:900 clamp(25px,3vw,31px)/1 Archivo;text-align:center;letter-spacing:-.03em}
.ci .u{font:800 clamp(12px,1.4vw,14px)/1 Archivo;color:#a9a9b6;text-align:center}

/* --- modal de cobro: pagar ya o a cuenta --- */
.opts{display:grid;gap:11px;margin-bottom:16px}
.opt{display:flex;align-items:center;gap:14px;background:var(--card2);border:2px solid var(--line2);
  border-radius:18px;padding:15px 16px;cursor:pointer;text-align:left;color:var(--ink);width:100%}
.opt:active{transform:scale(.985)}
.opt[data-on]{border-color:var(--k);background:#1a1218}
.opt .ic{width:52px;height:52px;border-radius:16px;background:var(--sub);display:grid;
  place-items:center;flex:none}
.opt .ic svg{width:25px;height:25px;stroke:var(--ink);stroke-width:2;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.opt[data-on] .ic{background:var(--k)}
.opt[data-on] .ic svg{stroke:var(--kink)}
.opt .tx b{display:block;font:800 17px Inter;letter-spacing:-.01em}
.opt .tx span{font:600 13px Inter;color:var(--ink-3)}
/* lista de perfiles para elegir cuenta */
.plist{display:grid;gap:9px;max-height:min(42dvh,340px);overflow:auto;margin-bottom:16px}
.pi{display:flex;align-items:center;gap:13px;background:var(--card2);border:2px solid var(--line2);
  border-radius:16px;padding:11px 14px;cursor:pointer;color:var(--ink);width:100%;text-align:left}
.pi[data-on]{border-color:var(--k);background:#1a1218}
.pi .av{width:50px;height:50px;border-radius:15px}
.pi .nm{flex:1;min-width:0;font:800 17px Inter;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pi .db{font:900 19px Archivo;color:var(--k);font-variant-numeric:tabular-nums}

/* avatares en el alta de perfil */
.avs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.avb{aspect-ratio:1;border-radius:20px;border:2.5px solid var(--line2);background:#0e0e11;
  cursor:pointer;overflow:hidden;padding:0;transition:.14s}
.avb:active{transform:scale(.95)}
.avb.on{border-color:var(--k);box-shadow:0 0 0 4px #ff5c9d2e}
.avb svg{width:100%;height:100%;display:block}