:root{
  --brand:#0f766e; --brand-ink:#fff;
  --on-bg:#1c1b19; --on-bg-muted:#6b6862; --fit:contain;
  --bg:#f6f5f2; --card:#fff; --ink:#1c1b19; --muted:#6b6862; --line:#e7e4de;
  --danger:#c2410c; --ok:#15803d; --wa:#25d366;
  --r:16px; --shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.06);
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:"Plus Jakarta Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--ink);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
img{display:block;max-width:100%}
.card img,.pm img,.ci img{-webkit-user-drag:none;user-select:none;-webkit-touch-callout:none}
a{color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 18px}
.muted{color:var(--muted)}
.hidden{display:none!important}

/* ---------- Botones / inputs ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);background:#fff;border-radius:12px;padding:10px 16px;font-weight:600;text-decoration:none;transition:transform .08s,background .15s,border-color .15s;white-space:nowrap}
.btn:hover{border-color:#cfcac2}
.btn:active{transform:scale(.98)}
.btn.primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.btn.primary:hover{filter:brightness(1.07)}
.btn.wa{background:var(--wa);border-color:var(--wa);color:#fff}
.btn.danger{color:var(--danger)}
.btn.ghost{background:transparent;border-color:transparent}
.btn.ghost:hover{background:rgba(0,0,0,.05)}
.btn.sm{padding:6px 11px;font-size:13px;border-radius:10px}
.btn.block{width:100%}
.btn[disabled]{opacity:.45;pointer-events:none}
.icon-btn{width:38px;height:38px;border-radius:12px;border:1px solid var(--line);background:#fff;display:inline-flex;align-items:center;justify-content:center;padding:0}
.input,select.input,textarea.input{width:100%;border:1px solid var(--line);background:#fff;border-radius:12px;padding:10px 12px;outline:none;transition:border-color .15s,box-shadow .15s}
.input:focus{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent)}
textarea.input{resize:vertical;min-height:84px}
label.lbl{display:block;font-size:13px;font-weight:600;margin:0 0 6px}
.field{margin-bottom:14px}
.hint{font-size:12.5px;color:var(--muted);margin-top:5px}
.row{display:flex;gap:12px;align-items:center}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.check{display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none;font-size:14px}
.check input{width:17px;height:17px;accent-color:var(--brand)}
.switch{position:relative;width:40px;height:23px;flex:none}
.switch input{opacity:0;width:0;height:0;position:absolute}
.switch span{position:absolute;inset:0;background:#d6d2cb;border-radius:99px;transition:.2s;cursor:pointer}
.switch span:before{content:"";position:absolute;width:17px;height:17px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.switch input:checked+span{background:var(--brand)}
.switch input:checked+span:before{transform:translateX(17px)}

/* ---------- Tienda ---------- */
.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);color:var(--on-bg);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:14px;height:66px}
.brand{display:flex;align-items:center;gap:11px;min-width:0;text-decoration:none}
.logo{width:40px;height:40px;border-radius:12px;object-fit:cover;flex:none;background:var(--brand);color:var(--brand-ink);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px}
.brand b{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spacer{flex:1}
.cart-btn{position:relative;display:inline-flex;align-items:center;gap:8px;border:0;background:var(--ink);color:#fff;border-radius:999px;padding:9px 16px 9px 13px;font-weight:700}
@media (max-width:520px){.hide-sm{display:none}}

.cart-btn .count{background:var(--brand);color:var(--brand-ink);border-radius:99px;min-width:22px;height:22px;font-size:12px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px}
.hero{padding:30px 0 8px}
.hero h1{font-size:clamp(26px,4.4vw,40px);line-height:1.1;margin:0 0 8px;letter-spacing:-.02em}
.hero h1{color:var(--on-bg)}
.hero p{margin:0;color:var(--on-bg-muted);max-width:640px;white-space:pre-line}
.search{position:relative;margin:20px 0 4px;max-width:480px}
.search input{padding-left:42px;height:46px;border-radius:14px}
.search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted)}
.chips{display:flex;gap:8px;overflow-x:auto;padding:14px 0 6px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 15px;font-weight:600;font-size:14px;white-space:nowrap}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px;padding:16px 0 120px}
@media (max-width:560px){.grid{grid-template-columns:1fr 1fr;gap:12px}}
.card{background:var(--card);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);cursor:pointer;display:flex;flex-direction:column;transition:transform .15s,box-shadow .15s;border:0;padding:0;text-align:left}
.card:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(0,0,0,.05),0 14px 32px rgba(0,0,0,.09)}
.card .ph{aspect-ratio:1/1;background:#fff;position:relative;overflow:hidden}
.card .ph img{width:100%;height:100%;object-fit:var(--fit)}
.badge{position:absolute;top:10px;left:10px;background:#fff;border-radius:99px;font-size:11.5px;font-weight:700;padding:4px 9px;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.badge.sale{background:var(--danger);color:#fff}
.badge.out{background:var(--ink);color:#fff}
.card .info{padding:12px 14px 14px;display:flex;flex-direction:column;gap:3px;flex:1}
.card .name{font-weight:600;font-size:14.5px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.price{font-weight:800;font-size:16px}
.price small{font-weight:600;color:var(--muted);font-size:12px;margin-right:3px}
.strike{text-decoration:line-through;color:var(--muted);font-weight:500;font-size:13px;margin-left:6px}
.card .vars{font-size:12px;color:var(--muted);padding-top:2px}
.card .cta{margin-top:auto;padding-top:10px}
.card .cta .btn{padding:9px 10px}
.stepper.full{display:flex;width:100%;justify-content:space-between;border-color:var(--brand);background:color-mix(in srgb,var(--brand) 8%,#fff)}
.stepper.full button{width:40px;height:36px;color:var(--brand);font-size:19px}
.stepper.full span{flex:1}
.qty-line{display:flex;flex-direction:column;gap:5px}
.mini-link{border:0;background:none;padding:0;font-size:12px;color:var(--muted);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.btn.in-cart{border-color:var(--brand);color:var(--brand);background:color-mix(in srgb,var(--brand) 8%,#fff)}
.empty{text-align:center;padding:60px 20px;color:var(--muted)}
.empty b{display:block;color:var(--ink);font-size:17px;margin-bottom:4px}
.foot{text-align:center;color:var(--on-bg-muted);font-size:13px;padding:0 0 40px}
.fab{position:fixed;right:18px;bottom:18px;z-index:30;width:56px;height:56px;border-radius:50%;background:var(--wa);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(37,211,102,.4);text-decoration:none}
.cartbar{white-space:nowrap;font-size:14px;position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:31;background:var(--ink);color:#fff;border:0;border-radius:999px;padding:13px 22px;font-weight:700;box-shadow:0 10px 30px rgba(0,0,0,.25);display:flex;gap:12px;align-items:center;max-width:calc(100% - 110px)}

/* ---------- Modales ---------- */
.static,.static .modal,.static.drawer{animation:none!important}
.overlay{position:fixed;inset:0;background:rgba(20,18,15,.45);z-index:50;display:flex;align-items:center;justify-content:center;padding:18px;animation:fade .15s}
@keyframes fade{from{opacity:0}}
@keyframes up{from{transform:translateY(16px);opacity:0}}
.modal{background:#fff;border-radius:20px;width:100%;max-width:880px;max-height:calc(100vh - 36px);overflow:auto;position:relative;animation:up .2s;box-shadow:0 30px 80px rgba(0,0,0,.25)}
.modal.sm{max-width:420px}
.modal.md{max-width:640px}
.modal .close{position:absolute;top:12px;right:12px;z-index:2;background:rgba(255,255,255,.92)}
.pm{display:grid;grid-template-columns:1.05fr 1fr}
.pm .gal{background:#eeebe5;padding:14px}
.pm .gal .main{aspect-ratio:1/1;border-radius:14px;overflow:hidden;background:#fff;position:relative}
.pm .gal .main img{width:100%;height:100%;object-fit:contain;cursor:zoom-in}
.zoom-hint{position:absolute;right:10px;bottom:10px;z-index:2;background:rgba(255,255,255,.92);border:0;border-radius:10px;padding:6px 10px;font-size:12px;font-weight:700;box-shadow:0 1px 4px rgba(0,0,0,.15);display:flex;gap:5px;align-items:center}
.thumbs{display:flex;gap:8px;margin-top:10px;overflow-x:auto}
.thumbs button{width:58px;height:58px;border-radius:10px;overflow:hidden;border:2px solid transparent;padding:0;flex:none;background:#ddd}
.thumbs button.on{border-color:var(--ink)}
.thumbs img{width:100%;height:100%;object-fit:cover}
.pm .det{padding:26px 26px 22px;display:flex;flex-direction:column}
.pm h2{margin:0 26px 6px 0;font-size:24px;line-height:1.2;letter-spacing:-.01em}
.pm .price{font-size:22px;margin-bottom:12px}
.pm .desc{color:#45423d;white-space:pre-line;margin:0 0 16px;font-size:14.5px}
.og{margin-bottom:16px}
.og .t{font-size:13px;font-weight:700;margin-bottom:8px;display:flex;gap:6px;align-items:baseline}
.og .t em{font-style:normal;color:var(--muted);font-weight:500}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{border:1.5px solid var(--line);background:#fff;border-radius:11px;padding:8px 13px;font-weight:600;font-size:14px}
.opt small{color:var(--muted);font-weight:600;margin-left:4px}
.opt.on{border-color:var(--ink);background:var(--ink);color:#fff}
.opt.on small{color:#ddd}
.opt.off{text-decoration:line-through;opacity:.45;pointer-events:none}
.og.err .t{color:var(--danger)}
.og.err .opt{border-color:#f0b8a0}
.stepper{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.stepper button{border:0;background:transparent;width:38px;height:40px;font-size:18px;font-weight:600}
.stepper span{min-width:30px;text-align:center;font-weight:700}
.stepper.sm button{width:30px;height:32px;font-size:16px}
.addrow{display:flex;gap:10px;margin-top:auto;padding-top:8px}
.addrow .btn{flex:1;padding:12px}
.err-msg{color:var(--danger);font-size:13px;font-weight:600;margin-top:8px;min-height:18px}
@media (max-width:720px){
  .overlay{align-items:flex-end;padding:0}
  .modal{border-radius:20px 20px 0 0;max-height:94vh}
  .pm{grid-template-columns:1fr}
  .pm .det{padding:20px 18px 0}
  .pm .gal{padding:10px}
  .pm .gal .main{aspect-ratio:1/1;max-height:52vh;margin:0 auto}
  .pm .addrow{position:sticky;bottom:0;background:#fff;padding:12px 0 16px;margin-top:8px}
}

/* ---------- Carrito (panel lateral) ---------- */
.drawer-ov{position:fixed;inset:0;background:rgba(20,18,15,.45);z-index:60;animation:fade .15s}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);background:#fff;z-index:61;display:flex;flex-direction:column;animation:slide .22s ease-out;box-shadow:-20px 0 60px rgba(0,0,0,.18)}
@keyframes slide{from{transform:translateX(30px);opacity:0}}
.drawer header{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line)}
.drawer header h3{margin:0;font-size:18px}
.drawer .body{flex:1;overflow:auto;padding:6px 18px 18px}
.drawer footer{border-top:1px solid var(--line);padding:14px 18px 18px;background:#fbfaf8}
.ci{display:grid;grid-template-columns:62px 1fr auto;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);align-items:start}
.ci img{width:62px;height:62px;border-radius:10px;object-fit:cover;background:#eee}
.ci .n{font-weight:600;font-size:14px;line-height:1.3}
.ci .s{font-size:12.5px;color:var(--muted);margin:2px 0 8px}
.ci .p{font-weight:700;text-align:right;font-size:14px}
.ci .rm{border:0;background:none;color:var(--muted);font-size:12.5px;text-decoration:underline;padding:0;margin-top:8px}
.tot{display:flex;justify-content:space-between;align-items:baseline;margin:2px 0 14px}
.tot b{font-size:22px}
.form-mini .input{padding:9px 11px;border-radius:10px}
.form-mini .field{margin-bottom:9px}

/* ---------- Admin ---------- */
.adm-top{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.adm-top .wrap{display:flex;align-items:center;gap:12px;height:62px}
.tabs{display:flex;gap:4px;overflow-x:auto;padding:12px 0 0;scrollbar-width:none}
.tab{border:0;background:none;padding:10px 14px;border-radius:10px 10px 0 0;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap}
.tab.on{color:var(--ink);border-bottom-color:var(--ink)}
.demo-bar{background:#fff7e6;border-bottom:1px solid #f3dfb4;color:#7a5410;font-size:13px;padding:9px 0}
.panel{background:#fff;border-radius:var(--r);box-shadow:var(--shadow);padding:20px;margin:18px 0}
.panel h3{margin:0 0 4px;font-size:17px}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:18px 0 12px}
.toolbar .input{max-width:320px}
.plist{background:#fff;border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.prow{display:grid;grid-template-columns:56px 1fr 120px 60px auto;gap:14px;align-items:center;padding:11px 16px;border-bottom:1px solid var(--line)}
.prow:last-child{border-bottom:0}
.prow img,.prow .noimg{width:56px;height:56px;border-radius:10px;object-fit:cover;background:#eeebe5}
.prow .t{font-weight:600;line-height:1.25}
.prow .m{font-size:12.5px;color:var(--muted);margin-top:2px}
.prow .acts{display:flex;gap:4px}
.tag{display:inline-block;font-size:11px;font-weight:700;border-radius:6px;padding:2px 6px;background:#efece6;color:#5a564f;margin-left:6px;vertical-align:1px}
.tag.off{background:#fde8de;color:var(--danger)}
@media (max-width:680px){
  .prow{grid-template-columns:48px 1fr auto;gap:10px}
  .prow img,.prow .noimg{width:48px;height:48px}
  .prow .pr,.prow .sw{display:none}
  .grid2{grid-template-columns:1fr}
}
.ed{padding:24px}
.ed h3{margin:0 0 18px;font-size:20px}
.sec{border-top:1px solid var(--line);padding-top:18px;margin-top:6px}
.sec>.st{font-weight:700;margin-bottom:4px}
.imgs{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.imgs .it{width:92px;height:92px;border-radius:12px;overflow:hidden;position:relative;background:#eee}
.imgs .it img{width:100%;height:100%;object-fit:cover}
.imgs .it .ctl{position:absolute;inset:auto 4px 4px 4px;display:flex;justify-content:space-between}
.imgs .it .ctl button{width:24px;height:24px;border-radius:7px;border:0;background:rgba(255,255,255,.92);font-size:13px;line-height:1;padding:0}
.imgs .it .main-tag{position:absolute;top:4px;left:4px;background:var(--ink);color:#fff;font-size:10px;font-weight:700;padding:2px 6px;border-radius:6px}
.imgs .add{width:92px;height:92px;border-radius:12px;border:1.5px dashed #c9c4bb;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:var(--muted);cursor:pointer;background:#fbfaf8;text-align:center;gap:4px}
.vg{border:1px solid var(--line);border-radius:14px;padding:14px;margin-top:12px;background:#fbfaf8}
.vg .head{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.vg .head .input{flex:1;min-width:150px;font-weight:600}
.vrow{display:grid;grid-template-columns:1fr 130px auto auto;gap:8px;align-items:center;margin-bottom:7px}
.vrow .input{padding:8px 10px;border-radius:10px}
.vrow-h{display:grid;grid-template-columns:1fr 130px auto auto;gap:8px;font-size:11.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:5px}
@media (max-width:560px){.vrow,.vrow-h{grid-template-columns:1fr 92px auto auto}}
.presets{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:12px}
.ed-foot{position:sticky;bottom:0;background:#fff;border-top:1px solid var(--line);padding:14px 24px;display:flex;gap:10px;justify-content:flex-end}
.catrow{display:flex;gap:8px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.catrow:last-child{border-bottom:0}
.catrow .input{flex:1}
.copybox{display:flex;gap:8px}
.copybox .input{font-size:13.5px;background:#fbfaf8}
#qr{background:#fff;padding:12px;border-radius:12px;display:inline-block;border:1px solid var(--line)}
#qr img,#qr canvas{width:180px;height:180px}
.login{max-width:380px;margin:9vh auto;background:#fff;border-radius:20px;box-shadow:var(--shadow);padding:28px}
.login h2{margin:0 0 4px}

/* ---------- v2: barra de categorías, filtros, carrusel, visor ---------- */
.catbar{display:flex;gap:12px;overflow-x:auto;padding:18px 2px 6px;scrollbar-width:none}
.catbar::-webkit-scrollbar{display:none}
.cb{flex:none;width:84px;display:flex;flex-direction:column;align-items:center;gap:7px;border:0;background:none;padding:0;color:var(--on-bg);font-size:12.5px;font-weight:600;text-align:center;line-height:1.2}
.cb .ic{width:68px;height:68px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.08);display:flex;align-items:center;justify-content:center;overflow:hidden;border:2.5px solid transparent;transition:border-color .15s,box-shadow .15s;font-size:24px;font-weight:800;color:var(--brand)}
.cb .ic img{width:100%;height:100%;object-fit:cover}
.cb.on .ic{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent)}
.cb.on span{font-weight:800}
.cb span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-transform:uppercase;letter-spacing:.02em;font-size:11.5px}
@media (max-width:560px){.cb{width:70px}.cb .ic{width:58px;height:58px;font-size:20px}}
.brandbar{display:flex;gap:8px;overflow-x:auto;padding:8px 0 2px;scrollbar-width:none;align-items:center}
.brandbar::-webkit-scrollbar{display:none}
.brandbar .lbl2{font-size:12.5px;font-weight:700;color:var(--on-bg-muted);flex:none;margin-right:2px}
.chip{display:inline-flex;align-items:center;gap:7px}
.chip .mini{width:22px;height:22px;border-radius:50%;object-fit:cover;margin:-3px 0 -3px -6px;background:#fff}
.filters{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:12px 0 0}
.filters .viewing{flex:1;min-width:200px;color:var(--on-bg-muted);font-size:14.5px}
.viewing b{color:var(--on-bg)}
.viewing button{border:0;background:none;color:var(--brand);font-weight:700;padding:0;margin-left:6px;text-decoration:underline;font-size:13.5px}
.sortbox{display:flex;align-items:center;gap:8px;margin-left:auto}
.sortbox span{font-size:13px;color:var(--on-bg-muted);white-space:nowrap}
.sortbox select{width:auto;padding:8px 10px;border-radius:11px;font-weight:600;font-size:14px}
.slides{display:flex;width:100%;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-behavior:smooth;overscroll-behavior-x:contain}
.slides::-webkit-scrollbar{display:none}
.slides>img{flex:0 0 100%;min-width:100%;scroll-snap-align:center}
.sl-arrow{position:absolute;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:50%;border:0;background:rgba(255,255,255,.94);box-shadow:0 1px 5px rgba(0,0,0,.2);display:flex;align-items:center;justify-content:center;z-index:3;opacity:0;transition:opacity .15s;padding:0;color:#1c1b19}
.sl-arrow.l{left:8px}.sl-arrow.r{right:8px}
.ph:hover .sl-arrow,.main:hover .sl-arrow{opacity:1}
@media (hover:none){.sl-arrow{opacity:.92;width:28px;height:28px}}
.dots{position:absolute;bottom:8px;left:0;right:0;display:flex;justify-content:center;gap:5px;z-index:2;pointer-events:none}
.dots i{width:6px;height:6px;border-radius:3px;background:rgba(0,0,0,.22);transition:width .15s,background .15s}
.dots i.on{background:#1c1b19;width:14px}
.lb{position:fixed;inset:0;z-index:95;background:#0b0b0b;display:flex;flex-direction:column;animation:fade .15s}
.lb-top{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;color:#fff;font-weight:600;font-size:14px}
.lb-top button{background:rgba(255,255,255,.14);border:0;color:#fff;width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center}
.lb-body{flex:1;position:relative;min-height:0}
.lb-slides{position:absolute;inset:0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.lb-slides::-webkit-scrollbar{display:none}
.lb-s{flex:0 0 100%;min-width:100%;scroll-snap-align:center;display:flex;align-items:center;justify-content:center;overflow:hidden;overscroll-behavior:contain}
.lb-s img{max-width:100%;max-height:100%;object-fit:contain;cursor:zoom-in;user-select:none;-webkit-user-drag:none}
.lb-s.z{overflow:auto;display:block}
.lb-s.z img{max-width:none;max-height:none;cursor:zoom-out;display:block;margin:auto}
.lb .sl-arrow{opacity:1;width:46px;height:46px}
.lb-hint{color:rgba(255,255,255,.6);text-align:center;font-size:12.5px;padding:8px 10px 16px}
.taxic{width:46px;height:46px;border-radius:50%;overflow:hidden;flex:none;background:#f3f1ec;display:flex;align-items:center;justify-content:center;cursor:pointer;font-weight:800;color:var(--brand);border:1.5px dashed #c9c4bb;position:relative}
.taxic img{width:100%;height:100%;object-fit:cover}
.taxic.has{border-style:solid;border-color:var(--line)}
.subbar{display:flex;gap:7px;overflow-x:auto;padding:6px 0 4px;scrollbar-width:none;align-items:center}
.subbar::-webkit-scrollbar{display:none}
.subbar .sub{flex:none;border:1.5px solid color-mix(in srgb,var(--brand) 35%,transparent);background:transparent;color:var(--on-bg);border-radius:999px;padding:6px 13px;font-size:13px;font-weight:600;white-space:nowrap}
.subbar .sub.on{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.subbar .arrow{color:var(--on-bg-muted);font-size:13px;flex:none;margin-right:2px}
.subrow{display:flex;gap:8px;align-items:center;padding:7px 0 7px 54px;border-bottom:1px dashed var(--line)}
.subrow .input{flex:1;padding:8px 10px;border-radius:10px;font-size:14px}
.subrow .tick{color:var(--muted);font-size:13px;margin-left:-20px;width:12px}
.subadd{display:flex;gap:8px;padding:8px 0 12px 54px}
.subadd .input{max-width:320px;padding:8px 10px;border-radius:10px;font-size:14px}
.catgroup{border-bottom:1px solid var(--line)}
.catgroup .catrow{border-bottom:0}
@media (max-width:560px){.subrow,.subadd{padding-left:22px}.subrow .tick{display:none}}
.warn{background:#fff7e6;border:1px solid #f3dfb4;color:#7a5410;border-radius:12px;padding:10px 12px;font-size:13.5px;margin:0 0 14px}

/* ---------- Toast ---------- */
#toast{position:fixed;left:50%;top:18px;transform:translateX(-50%) translateY(-120px);background:var(--ink);color:#fff;padding:11px 18px;border-radius:12px;font-weight:600;font-size:14px;z-index:100;transition:transform .25s;box-shadow:0 10px 30px rgba(0,0,0,.25);max-width:90vw}
#toast.show{transform:translateX(-50%) translateY(0)}
.spin{width:18px;height:18px;border:2.5px solid rgba(0,0,0,.15);border-top-color:var(--brand);border-radius:50%;animation:sp .7s linear infinite;display:inline-block}
@keyframes sp{to{transform:rotate(360deg)}}
.loading{display:flex;align-items:center;justify-content:center;gap:10px;min-height:60vh;color:var(--muted)}
@media (max-width:640px){
  .fab{right:14px;bottom:16px;width:52px;height:52px}
  .cartbar{left:12px;transform:none;bottom:18px;max-width:calc(100% - 92px);padding:12px 16px;font-size:14px;gap:9px}
  .grid{padding-bottom:100px}
}
@media (max-width:560px){.catrow{flex-wrap:wrap}.catrow .input{flex:1 1 calc(100% - 60px);min-width:0}}

/* =========================================================
   Plataforma (inicio, acceso, panel, superadmin)
   ========================================================= */
.btn.danger-solid{background:var(--danger);border-color:var(--danger);color:#fff}
.btn.lg{padding:14px 22px;font-size:16px;border-radius:14px}
.danger-text{color:var(--danger)}
.link{border:0;background:none;padding:4px 0;color:var(--muted);font-size:14px;cursor:pointer}
.link b{color:var(--brand)}
.ok-msg{color:var(--ok);font-size:13.5px;font-weight:600;margin-top:8px;min-height:18px}
.pf-logo{background:var(--brand);color:#fff}
.pf-logo svg{width:20px;height:20px}
.center-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px}
.auth{width:100%;max-width:400px;background:#fff;border-radius:22px;box-shadow:var(--shadow);padding:28px}
.auth.wide{max-width:480px}
.auth h2{margin:0 0 4px;font-size:24px;letter-spacing:-.01em}
.gbtn{padding:12px;font-size:15px;gap:10px}
.or{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12.5px;margin:18px 0}
.or:before,.or:after{content:"";flex:1;height:1px;background:var(--line)}
.auth-links{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:14px}
.slugbox{display:flex;align-items:center;border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden}
.slugbox:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent)}
.slugbox .input{border:0;box-shadow:none!important;border-radius:0;flex:1;min-width:0;font-weight:600}
.slugsuf{padding:0 12px 0 0;color:var(--muted);font-size:14px;white-space:nowrap}
.hint.bad{color:var(--danger)}
.hint.good{color:var(--ok)}
.super-bar{background:#eef6ff;border-color:#cfe2fb;color:#1e4b8f}
.off-bar{background:#fdecea;border-color:#f6c9c2;color:#8a2a1b}
.colorpick{width:52px;height:42px;border:1px solid var(--line);border-radius:10px;padding:3px;background:#fff}
.nf{text-align:center;max-width:420px}
.nf h2{margin:14px 0 6px}
.nf .btn{margin-top:16px}
.nf-ic{width:64px;height:64px;border-radius:20px;background:#fff;box-shadow:var(--shadow);display:inline-flex;align-items:center;justify-content:center;color:var(--brand)}
.foot.powered{font-size:12px;opacity:.75}
.foot.powered a{color:inherit}

/* superadmin */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:20px 0 4px}
.stat{background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:14px 16px;display:flex;flex-direction:column;gap:2px}
.stat span{font-size:12.5px;color:var(--muted);font-weight:600}
.stat b{font-size:24px}
@media (max-width:700px){.stats{grid-template-columns:1fr 1fr}}
.srow{display:grid;grid-template-columns:minmax(200px,1.6fr) 90px 130px 90px auto;gap:14px;align-items:center;padding:13px 16px;border-bottom:1px solid var(--line)}
.srow:last-child{border-bottom:0}
.srow.paused{background:#fcf7f6}
.sname{display:flex;flex-direction:column;min-width:0}
.sname a{font-size:13px;color:var(--brand);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sname .m,.scell .m{font-size:12px;color:var(--muted)}
.scell{display:flex;flex-direction:column;gap:2px}
.sacts{display:flex;gap:4px;justify-content:flex-end;flex-wrap:wrap}
.sm-input{padding:6px 8px;border-radius:9px;font-size:13px}
.pill{display:inline-block;font-size:12px;font-weight:700;border-radius:99px;padding:3px 10px;width:max-content}
.pill.ok{background:#dcfce7;color:#166534}
.pill.off{background:#fde2dc;color:#9a3412}
@media (max-width:820px){
  .srow{grid-template-columns:1fr 1fr 1fr;gap:10px}
  .sname{grid-column:1/-1}
  .sacts{grid-column:1/-1;justify-content:flex-start}
}

/* página de inicio */
.lp-top{position:sticky;top:0;z-index:20;background:rgba(246,245,242,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.lp-top .wrap{display:flex;align-items:center;gap:10px;height:64px}
.lp-hero{padding:56px 0 40px;background:radial-gradient(1200px 500px at 85% -10%,#d7f2ec 0,transparent 60%),radial-gradient(800px 400px at -10% 20%,#fde7ef 0,transparent 60%)}
.lp-hero-in{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
.lp-kicker{display:inline-block;background:#fff;border:1px solid var(--line);border-radius:99px;padding:6px 12px;font-size:12.5px;font-weight:700;color:var(--brand);margin-bottom:14px}
.lp-hero h1{font-size:clamp(32px,5vw,54px);line-height:1.05;letter-spacing:-.03em;margin:0 0 16px}
.lp-hero .hl{color:#16a34a}
.lp-sub{font-size:17.5px;color:#4b4842;max-width:560px;margin:0 0 24px}
.lp-sec{padding:64px 0}
.lp-sec.alt{background:#fff}
.lp-sec h2{font-size:clamp(26px,3.5vw,36px);letter-spacing:-.02em;margin:0 0 28px;text-align:center}
.lp-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.lp-steps>div{background:#fff;border-radius:20px;box-shadow:var(--shadow);padding:24px}
.lp-steps span{display:inline-flex;width:36px;height:36px;border-radius:12px;background:var(--brand);color:#fff;font-weight:800;align-items:center;justify-content:center}
.lp-steps h3,.lp-feat h3{margin:12px 0 6px;font-size:18px}
.lp-steps p,.lp-feat p{margin:0;color:var(--muted)}
.lp-feats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.lp-feat{border:1px solid var(--line);border-radius:20px;padding:22px;background:#fbfaf8}
.lp-feat .ic{font-size:26px}
.lp-cta{text-align:center;display:flex;flex-direction:column;align-items:center}
.lp-cta h2{margin-bottom:8px}
.lp-foot{border-top:1px solid var(--line);padding:22px 0;color:var(--muted);font-size:13.5px}
.lp-foot .wrap{display:flex;gap:18px;flex-wrap:wrap}
.lp-foot a{color:inherit}
@media (max-width:860px){
  .lp-hero-in{grid-template-columns:1fr}
  .lp-phone{display:none}
  .lp-steps,.lp-feats{grid-template-columns:1fr}
  .lp-sec{padding:44px 0}
}
/* teléfono de muestra */
.lp-phone{width:290px;justify-self:center;background:#fdf2f8;border:10px solid #1c1b19;border-radius:40px;padding:14px 12px 16px;box-shadow:0 30px 70px rgba(0,0,0,.22);position:relative;transform:rotate(2deg)}
.ph-notch{width:90px;height:20px;background:#1c1b19;border-radius:0 0 14px 14px;margin:-14px auto 10px}
.ph-head{display:flex;align-items:center;gap:8px;font-size:13px}
.ph-logo{width:26px;height:26px;border-radius:8px;background:#be185d;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px}
.ph-cart{margin-left:auto;background:#1c1b19;color:#fff;border-radius:99px;padding:3px 10px;font-size:11px;font-weight:700}
.ph-cats{display:flex;gap:8px;margin:12px 0}
.ph-cats i{width:38px;height:38px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.ph-cats i.on{outline:2.5px solid #be185d}
.ph-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ph-card{background:#fff;border-radius:12px;padding:6px;display:flex;flex-direction:column;gap:2px;font-size:11px}
.ph-img{aspect-ratio:1/1;border-radius:8px}
.ph-card b{font-size:12px}
.ph-card em{font-style:normal;background:#be185d;color:#fff;border-radius:7px;text-align:center;padding:4px;font-weight:700;margin-top:3px}
.ph-bar{margin-top:10px;background:#1c1b19;color:#fff;border-radius:99px;padding:9px;text-align:center;font-size:12px;font-weight:700}

.adm-top .brand{min-width:0;flex:0 1 auto}
.adm-top .spacer{flex:1 0 8px}
@media (max-width:520px){.adm-top .wrap{gap:6px}.adm-top .btn.sm{padding:6px 9px}.adm-top .tag{display:none}}

/* ---------- Portada del catálogo (v4) ---------- */
.cover{background:var(--cover);color:var(--cover-ink);padding:34px 0 30px}
.cover-in{display:flex;align-items:center;gap:26px;position:relative}
.avatar{flex:none;width:128px;height:128px;border-radius:50%;overflow:hidden;background:#fff;border:4px solid #fff;box-shadow:0 6px 22px rgba(0,0,0,.12);display:flex;align-items:center;justify-content:center;text-decoration:none}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar span{font-size:46px;font-weight:800;color:var(--brand)}
.cover-txt{min-width:0;flex:1;padding-right:150px}
.cover-txt h1{margin:0 0 6px;font-size:clamp(26px,4vw,40px);line-height:1.1;letter-spacing:-.02em;color:var(--cover-ink)}
.cover-txt p{margin:0;color:var(--cover-muted);max-width:620px;white-space:pre-line;font-size:15.5px}
.cover-cart{position:absolute;top:0;right:18px}
.store-search{margin:22px auto 4px;max-width:560px}
.catbar{justify-content:flex-start}
.catbar>:first-child{margin-left:auto}
.catbar>:last-child{margin-right:auto}
@media (max-width:640px){
  .cover{padding:18px 0 20px}
  .cover-in{gap:14px;align-items:center}
  .avatar{width:84px;height:84px;border-width:3px}
  .avatar span{font-size:32px}
  .cover-txt{padding-right:0;padding-top:30px}
  .cover-txt h1{font-size:22px;margin-bottom:3px}
  .cover-txt p{font-size:13.5px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .cover-cart{top:-4px;right:18px;padding:7px 12px 7px 10px}
  .store-search{margin-top:16px}
}
.brandbar .chip.on{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}

/* Pie de página de la plataforma en cada catálogo */
.pfoot{border-top:1px solid color-mix(in srgb,var(--on-bg) 10%,transparent);padding:22px 0 90px;text-align:center}
.pfoot .wrap{display:flex;flex-direction:column;align-items:center;gap:6px}
.pf-made{font-size:12.5px;color:var(--on-bg-muted);text-decoration:none}
.pf-made b{color:var(--on-bg)}
.pf-cta{font-size:13px;color:var(--on-bg-muted);text-decoration:none;border:1px solid color-mix(in srgb,var(--on-bg) 14%,transparent);border-radius:999px;padding:7px 14px;background:color-mix(in srgb,var(--bg) 70%,#fff)}
.pf-cta b{color:var(--brand)}
.pf-cta:hover{border-color:var(--brand)}
@media (max-width:640px){.pfoot{padding-bottom:96px}.pf-cta{font-size:12.5px}}
.grid{padding-bottom:28px}