:root{--bg:#07040d;--bg2:#120a1f;--card:#160d26;--line:#2c1a47;--p:#a855f7;--neon:#c026ff;--txt:#efe7ff;--mut:#9d8bb8}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(circle at 20% 0,#1d0b33 0,var(--bg) 50%);color:var(--txt);font-family:"Segoe UI",system-ui,sans-serif;min-height:100vh}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--neon);outline-offset:2px}
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 5vw;background:rgba(7,4,13,.8);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.logo{background:none;border:0;font-weight:900;font-size:1.5rem;letter-spacing:2px}
.logo span,h1 span{color:var(--neon);text-shadow:0 0 18px var(--neon)}
.nav{display:flex;gap:6px}
.nav button{background:none;border:0;padding:8px 14px;border-radius:99px;color:var(--mut);transition:.25s}
.nav button:hover,.nav button.on{color:#fff;background:rgba(168,85,247,.18)}
.row-c{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center}
.cartbtn{position:relative;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:8px 12px;font-size:1.2rem;transition:.25s}
.cartbtn:hover{border-color:var(--neon);box-shadow:0 0 14px rgba(192,38,255,.5)}
.cartbtn b{position:absolute;top:-6px;right:-6px;background:var(--neon);font-size:.7rem;border-radius:99px;padding:2px 6px}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:10px;padding:6px 10px}
.wrap{max-width:1200px;margin:0 auto;padding:0 5vw 60px}
.hero{position:relative;text-align:center;padding:90px 0 70px;overflow:hidden}
.glow{position:absolute;inset:20% 25%;background:var(--neon);filter:blur(120px);opacity:.25;animation:pulse 5s ease-in-out infinite}
@keyframes pulse{50%{opacity:.4;transform:scale(1.1)}}
.hero>*{position:relative}
.eyebrow{color:var(--p);letter-spacing:4px;text-transform:uppercase;font-size:.8rem}
.hero h1{font-size:clamp(3rem,12vw,7rem);margin:.1em 0;font-weight:900;letter-spacing:4px}
.slogan{font-size:1.3rem;color:var(--mut);margin-bottom:30px}
.btn-neon,.btn-ghost{display:inline-block;text-decoration:none;border-radius:12px;padding:12px 24px;font-weight:700;transition:.25s;border:1px solid var(--neon)}
.btn-neon{background:linear-gradient(135deg,#7c3aed,var(--neon));color:#fff;border:0;box-shadow:0 0 18px rgba(192,38,255,.45)}
.btn-neon:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 0 30px rgba(192,38,255,.8)}
.btn-neon:disabled{opacity:.4;cursor:not-allowed}
.btn-ghost{background:transparent;color:#fff}
.btn-ghost:hover{background:rgba(192,38,255,.15)}
.sm{padding:8px 14px;font-size:.85rem}
.sec{padding:30px 0;animation:fade .5s ease}
@keyframes fade{from{opacity:0;transform:translateY(12px)}}
h2{font-size:1.6rem}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px}
.pcard{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:.3s;display:flex;flex-direction:column}
.pcard:hover{transform:translateY(-6px);border-color:var(--p);box-shadow:0 10px 30px rgba(168,85,247,.25)}
.pimg{position:relative;border:0;height:170px;background:radial-gradient(circle,#3b1466,#140a24);font-size:4.5rem;display:grid;place-items:center}
.pimg span{transition:.4s}.pcard:hover .pimg span{transform:scale(1.15) rotate(-6deg)}
.pimg{height:220px;padding:0;overflow:hidden;background:#fff;cursor:pointer}
.proveedor{display:block;text-decoration:none;background:linear-gradient(90deg,#7c1fff,#b026ff);color:#fff;transition:transform .2s}.proveedor:hover{transform:scale(1.04)}
.qro{margin:12px auto 0;width:fit-content;max-width:92%;text-align:center;padding:8px 16px;border-radius:999px;border:1px solid #b026ff;background:rgba(176,38,255,.15);color:#e9d5ff;font-weight:700;box-shadow:0 0 18px rgba(176,38,255,.45)}
.summary .btn-neon{display:block;text-align:center;margin-top:12px;text-decoration:none}
.pimg{background:#fff}.pimg img{width:100%;height:100%;object-fit:contain;transition:transform .5s}.pcard:hover .pimg img{transform:scale(1.08)}
.pimg .tag{z-index:1}
.dimg{overflow:hidden;background:#fff}.dimg img{width:100%;height:100%;object-fit:contain}
.cicon{width:64px;height:64px;object-fit:cover;border-radius:12px;background:#fff;flex-shrink:0}
@media (max-width:480px){.pimg{height:160px}}
.tag{position:absolute;top:10px;left:10px;background:var(--neon);font-style:normal;font-weight:700;font-size:.75rem;padding:3px 8px;border-radius:8px}
.pbody{padding:16px;display:flex;flex-direction:column;flex:1}
.pbody h3{margin:4px 0;font-size:1.05rem;cursor:pointer}
.cat{color:var(--p);text-transform:uppercase;letter-spacing:1px;font-size:.7rem}
.muted{color:var(--mut);font-size:.88rem}
.prow{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:8px}
.price{font-size:1.15rem;color:#fff}.price.big{font-size:2rem}
.old{color:var(--mut);margin-left:8px;font-size:.85rem}
.filters{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:12px;align-items:center}
.inp{background:var(--bg2);border:1px solid var(--line);color:var(--txt);border-radius:12px;padding:11px 14px;font:inherit;width:100%}
.inp:focus{border-color:var(--neon);outline:none;box-shadow:0 0 0 3px rgba(192,38,255,.25)}
.range{display:flex;flex-direction:column;font-size:.85rem;color:var(--mut)}
.range input{accent-color:var(--neon)}
.chk{display:flex;gap:6px;align-items:center;white-space:nowrap}.chk input{accent-color:var(--neon)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}
.chip{background:var(--bg2);border:1px solid var(--line);padding:7px 16px;border-radius:99px;transition:.2s}
.chip:hover{border-color:var(--p)}.chip.on{background:var(--p);border-color:var(--p)}
.empty-box{display:flex;flex-direction:column;gap:14px;align-items:center;padding:50px 20px;border:1px dashed var(--line);border-radius:18px;color:var(--mut)}
.link{background:none;border:0;color:var(--p);padding:0}
.dgrid{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin:20px 0 40px}
.dimg{aspect-ratio:1;border-radius:24px;background:radial-gradient(circle,#4c1d95,#120a1f);display:grid;place-items:center;font-size:9rem;border:1px solid var(--line);box-shadow:0 0 50px rgba(168,85,247,.25)}
.dtitle{font-size:2.2rem;margin:6px 0 12px}
.cartgrid{display:grid;grid-template-columns:2fr 1fr;gap:24px;align-items:start}
.clist{display:flex;flex-direction:column;gap:12px}
.citem{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px}
.cicon{font-size:2rem}.cinfo{flex:1;min-width:120px;display:flex;flex-direction:column}
.qty{display:flex;align-items:center;gap:10px;background:var(--bg2);border-radius:10px;padding:4px}
.qty button{background:none;border:0;width:28px;height:28px;border-radius:8px}.qty button:hover{background:var(--p)}
.del{background:none;border:0;color:var(--mut)}.del:hover{color:#ff4d8d}
.summary{background:var(--card);border:1px solid var(--p);border-radius:18px;padding:20px;box-shadow:0 0 25px rgba(168,85,247,.2)}
.summary h3{margin-top:0}
.line{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line)}
.line.total{font-weight:800;font-size:1.2rem;border:0}
.foot{text-align:center;padding:30px;color:var(--mut);border-top:1px solid var(--line)}
.wa{position:fixed;right:20px;bottom:20px;width:56px;height:56px;border-radius:50%;background:#25d366;display:grid;place-items:center;font-size:1.6rem;text-decoration:none;box-shadow:0 0 20px rgba(37,211,102,.6);transition:.25s;z-index:30}
.wa:hover{transform:scale(1.1)}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--card);border:1px solid var(--neon);padding:12px 20px;border-radius:12px;box-shadow:0 0 20px rgba(192,38,255,.5);z-index:40;animation:fade .3s}
.loading,.empty{padding:30px;text-align:center;color:var(--mut)}
.alert-error{background:#3a0c1e;border:1px solid #ff4d8d;padding:12px;border-radius:12px}
@media (max-width:860px){
  .filters{grid-template-columns:1fr 1fr}
  .dgrid,.cartgrid{grid-template-columns:1fr}
  .burger{display:block}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:var(--bg);padding:12px 5vw;border-bottom:1px solid var(--line)}
  .nav.open{display:flex}
}
.pimgwrap{position:relative}
.pcard .pimg{display:block;position:relative;width:100%;height:auto;aspect-ratio:1/1;padding:10px;background:#fff;border:0}
.pcard .pimg img{position:absolute;inset:10px;width:calc(100% - 20px);height:calc(100% - 20px);object-fit:contain}
.pcard:hover .pimg img{transform:scale(1.04)}
.fab-add{position:absolute;right:10px;bottom:10px;z-index:2;border:0;border-radius:999px;padding:8px 14px;font-weight:700;color:#fff;cursor:pointer;
background:linear-gradient(135deg,#a855f7,#7c3aed);box-shadow:0 0 18px rgba(168,85,247,.7);transition:.25s}
.fab-add:hover{transform:scale(1.08);box-shadow:0 0 28px rgba(192,132,252,.95)}
.fab-add:disabled{background:#444;box-shadow:none;cursor:not-allowed}
.prow .btn-neon{display:none}
@media (max-width:480px){.filters{grid-template-columns:1fr}.pgrid{grid-template-columns:1fr 1fr;gap:12px}.pcard .pimg{height:auto}
.fab-add{padding:6px 10px;font-size:.8rem;right:6px;bottom:6px}.pbody .muted{display:none}.prow{flex-direction:column;align-items:flex-start}}