/* ===== Tienda pública — estética de vidrio traslúcido ===== */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#000}
body{font-family:'Outfit',system-ui,sans-serif;color:var(--text);overflow:hidden}
button{font-family:inherit;color:inherit;cursor:pointer}
input,select{font-family:inherit}
img{display:block}
[hidden]{display:none!important}
.tone{position:absolute;inset:0;pointer-events:none;background-color:rgb(var(--accent-rgb));transition:background-color .7s ease}
.hero-tone{opacity:.5;-webkit-mask-image:radial-gradient(ellipse 80% 55% at 68% 22%,#000 0%,rgba(0,0,0,.55) 45%,transparent 85%);mask-image:radial-gradient(ellipse 80% 55% at 68% 22%,#000 0%,rgba(0,0,0,.55) 45%,transparent 85%)}
.sheet-tone{-webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.7) 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.7) 55%,transparent 100%)}
.app.sheet-on .view,.app.sheet-on .nav{visibility:hidden}
.noscroll::-webkit-scrollbar{display:none}.noscroll{scrollbar-width:none}
.muted{color:rgba(var(--text-rgb),.75)}
.center{text-align:center}

.app{position:relative;max-width:480px;height:100dvh;margin:0 auto;overflow:hidden;background:var(--bg)}
@media (min-width:520px){.app{border-left:1px solid var(--line);border-right:1px solid var(--line)}}

.glass{background:linear-gradient(var(--glass),var(--glass)),rgba(var(--bg-rgb),.82);border:1px solid var(--line)}
.glass-strong{background:linear-gradient(var(--glass-strong),var(--glass-strong)),rgba(var(--bg-rgb),.92);border:1px solid var(--line)}

.icon-btn{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0;border:1px solid var(--line);background:var(--glass)}
.icon-btn.sm{width:36px;height:36px}
.btn-gold{display:flex;align-items:center;justify-content:center;gap:8px;height:46px;border:0;border-radius:15px;background:linear-gradient(135deg,var(--accent),var(--accent-deep));color:var(--on-accent);font-size:15px;font-weight:600;padding:0 14px}
.btn-gold.big{height:54px;border-radius:18px;font-size:16px;box-shadow:0 10px 28px rgba(var(--accent-rgb),.3)}
.btn-text{border:0;background:transparent;height:44px;font-size:14px;color:rgba(var(--text-rgb),.8);text-decoration:none;display:flex;align-items:center;justify-content:center}
.link-gold{display:flex;align-items:center;gap:6px;border:0;background:transparent;color:var(--accent);font-size:14px;font-weight:500;height:44px;padding:0 6px}

/* ---------- vistas ---------- */
.view{position:absolute;inset:0;display:none;flex-direction:column;isolation:isolate}
.view.is-active{display:flex}
.nav-space{flex:0 0 100px}

/* ---------- portada ---------- */
.hero{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hero-img{position:absolute;right:-10px;top:-20px;width:76%;height:min(470px,58dvh);object-fit:cover;transition:object-position .5s,transform .5s;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 38%),linear-gradient(180deg,#000 62%,transparent 100%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0%,#000 38%),linear-gradient(180deg,#000 62%,transparent 100%);mask-composite:intersect}
.hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(var(--bg-rgb),0) 0%,rgba(var(--bg-rgb),0) 36%,rgba(var(--bg-rgb),.5) 47%,rgba(var(--bg-rgb),.9) 58%,var(--bg) 68%)}
.hero-scrim{position:absolute;left:0;top:0;width:100%;height:min(460px,56dvh);background:linear-gradient(90deg,rgba(var(--shade),.4) 0%,rgba(var(--shade),.22) 30%,rgba(var(--shade),0) 50%)}

.topbar{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:calc(env(safe-area-inset-top) + 18px) 20px 0}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand-logo{flex:0 0 auto;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--glass);border:1px solid rgba(var(--accent-rgb),.6);color:var(--accent);font-size:18px;font-weight:500;overflow:hidden;}
.brand-logo img{width:100%;height:100%;object-fit:cover}
.brand-text{display:flex;flex-direction:column;min-width:0}
.brand-text b{font-size:20px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 2px 12px rgba(var(--shade),.3)}
.brand-text small{font-size:12px;color:rgba(var(--text-rgb),.75)}

.hero-copy{position:relative;z-index:2;flex:1 1 auto;min-height:150px;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:10px 22px;max-width:62%}
.kicker{font-size:13px;letter-spacing:.4px;color:rgba(var(--text-rgb),.8)}
.hero-copy h1{margin:0;font-size:clamp(28px,8.6vw,36px);line-height:1.08;font-weight:500;text-shadow:0 2px 18px rgba(var(--shade),.35)}
.hero-copy p{margin:0;font-size:14px;line-height:1.45;color:rgba(var(--text-rgb),.88);text-shadow:0 1px 10px rgba(var(--shade),.4)}

.chips{position:relative;z-index:2;display:flex;gap:8px;overflow-x:auto;padding:0 16px;flex:0 0 auto}
.chip{flex:0 0 auto;height:40px;padding:0 18px;border-radius:20px;border:1px solid var(--line);background:rgba(var(--bg-rgb),.88)!important;color:var(--text);font-size:14px;font-weight:500}
.chip.is-on{background:linear-gradient(rgba(var(--accent-rgb),.32),rgba(var(--accent-rgb),.32)),rgba(var(--bg-rgb),.92)!important;border-color:rgba(var(--accent-rgb),.75);box-shadow:0 0 18px rgba(var(--accent-rgb),.35)}
.chips.sm .chip{height:32px;padding:0 13px;font-size:13px;border-radius:16px}

.sec-title{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:10px;padding:14px 20px 0;font-size:16px}
.sec-title b{font-weight:500}
.sec-title i{width:1px;height:14px;background:var(--line)}
.sec-title span{font-size:13px;color:rgba(var(--text-rgb),.72)}

.stage{position:relative;z-index:2;flex:0 0 auto;height:clamp(250px,40dvh,330px);perspective:900px;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab}
.card{position:absolute;left:50%;top:10px;border-radius:22px;overflow:hidden;background:#222;will-change:transform;pointer-events:none;backface-visibility:hidden}
.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card .shine{position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.14) 48%,rgba(255,255,255,0) 62%)}
.card .lbl{position:absolute;left:8px;right:8px;bottom:8px;padding:8px 10px;border-radius:14px;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.16);display:flex;flex-direction:column;gap:1px;color:#f4ede3}
.card .lbl b{font-size:13px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .lbl span{font-size:13px;font-weight:600;color:var(--accent)}
.card .lbl s{font-size:11px;opacity:.65;margin-left:6px;font-weight:400;color:#f4ede3}
.tag{position:absolute;top:10px;left:10px;padding:4px 9px;border-radius:10px;font-size:11px;font-weight:500;color:#f4ede3;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.25);white-space:nowrap}

.stage-foot{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:0 14px 0 26px;flex:0 0 auto}
.dots{display:flex;gap:6px;align-items:center;overflow:hidden;max-width:55%}
.dots i{flex:0 0 auto;height:6px;width:6px;border-radius:3px;background:rgba(var(--text-rgb),.35);transition:width .3s,background .3s}
.dots i.on{width:22px;background:var(--accent)}

/* ---------- nav ---------- */
.nav{position:absolute;left:14px;right:14px;bottom:calc(env(safe-area-inset-bottom) + 14px);height:70px;border-radius:26px;display:flex;align-items:center;justify-content:space-around;padding:0 6px;z-index:30;box-shadow:0 18px 40px rgba(0,0,0,.35)}
.nav-btn{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:60px;height:56px;border:0;border-radius:18px;background:transparent;color:rgba(var(--text-rgb),.75);font-size:11px;text-decoration:none}
.nav-btn.is-on{background:rgba(var(--accent-rgb),.18);color:var(--accent)}
.badge{position:absolute;top:4px;right:10px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--accent);color:var(--on-accent);font-size:11px;font-weight:600;font-style:normal;display:flex;align-items:center;justify-content:center}

/* ---------- catálogo ---------- */
.ambient{position:absolute;inset:0;overflow:hidden;pointer-events:none;background-color:rgb(var(--accent-rgb));transition:background-color .8s ease;-webkit-mask-image:radial-gradient(ellipse 120% 70% at 50% 18%,rgba(0,0,0,.75) 0%,rgba(0,0,0,.35) 55%,transparent 100%);mask-image:radial-gradient(ellipse 120% 70% at 50% 18%,rgba(0,0,0,.75) 0%,rgba(0,0,0,.35) 55%,transparent 100%)}
.cat-head{position:relative;z-index:6;margin:calc(env(safe-area-inset-top) + 14px) 14px 0;padding:8px 10px 10px;border-radius:22px;display:flex;flex-direction:column;gap:8px}
.cat-row{display:flex;align-items:center;gap:10px}
.cat-title{font-size:16px;font-weight:500}
.cat-count{font-size:12px;color:rgba(var(--text-rgb),.75);white-space:nowrap}
.search{flex:1;display:flex;align-items:center;gap:6px;height:34px;padding:0 10px;border-radius:17px;background:rgba(var(--shade),.2);border:1px solid var(--line);color:rgba(var(--text-rgb),.75);min-width:0}
.search input{flex:1;min-width:0;border:0;background:transparent;color:var(--text);font-size:15px;outline:none}
.cat-head .chips{padding:0;margin:0 -10px;padding:0 10px}
.cols-row{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:rgba(var(--text-rgb),.8)}
.seg{display:flex;gap:3px;padding:3px;border-radius:13px;background:rgba(var(--shade),.25);border:1px solid var(--line)}
.seg button{min-width:36px;height:30px;border-radius:10px;border:1px solid transparent;background:transparent;font-size:13px;font-weight:500;padding:0 10px;color:rgba(var(--text-rgb),.8)}
.seg button.on{background:rgba(var(--accent-rgb),.3);border-color:rgba(var(--accent-rgb),.7);color:var(--text)}
.seg.wide{width:100%}.seg.wide button{flex:1;height:38px}

.gal-wrap{position:relative;flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
.gal-bg{position:absolute;inset:0;border:0;background:transparent;padding:0;cursor:default}
.gal-stage{position:relative;z-index:1;flex:1 1 auto;margin-top:10px;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.gcard{position:absolute;left:50%;top:0;bottom:0;border-radius:26px;overflow:hidden;background-color:#1d1d1d;will-change:transform,width}
.gcard .gc{position:absolute;left:50%;top:0;width:340px;height:100%;margin-left:-170px;object-fit:cover;transition:opacity .45s;pointer-events:none}
.gcard .go{position:absolute;left:0;top:0;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;opacity:0;transition:opacity .45s;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 70%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 70%,transparent 100%)}
.gcard .gshade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,.6) 100%);pointer-events:none}
.gcard .vname{position:absolute;left:14px;bottom:64px;writing-mode:vertical-rl;transform:rotate(180deg);font-size:14px;letter-spacing:1.2px;color:#f4ede3;white-space:nowrap;text-shadow:0 1px 10px rgba(0,0,0,.5);pointer-events:none;transition:opacity .3s}
.gcard .plbl{position:absolute;left:8px;right:8px;bottom:10px;padding:7px 6px;border-radius:14px;text-align:center;display:flex;flex-direction:column;gap:1px;background:rgba(0,0,0,.58);border:1px solid rgba(255,255,255,.16);pointer-events:none;transition:opacity .3s}
.gcard .plbl s{font-size:10px;color:rgba(244,237,227,.62)}
.gcard .plbl b{font-size:12px;line-height:1.25;font-weight:600;color:var(--accent)}
.gcard .gopen{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .35s}
.gcard.open .go,.gcard.open .gopen{opacity:1}
.gcard.open .gopen{pointer-events:auto}
.gcard.open .gc,.gcard.open .vname,.gcard.open .plbl{opacity:0}
.g-actions{position:absolute;top:10px;right:10px;display:flex;gap:8px}
.g-actions .icon-btn{width:40px;height:40px;background:rgba(0,0,0,.35);border-color:rgba(255,255,255,.25);color:#f4ede3}
.g-panel{position:absolute;left:8px;right:8px;bottom:8px;padding:10px 12px;border-radius:18px;background:rgba(var(--bg-rgb),.55);border:1px solid var(--line);;display:flex;flex-direction:column;gap:7px;color:var(--text)}
.g-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.g-row b{min-width:0;font-size:16px;font-weight:500;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g-price{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end}
.g-price span{font-size:17px;font-weight:600;line-height:1.2;color:var(--accent);white-space:nowrap}
.g-price small{font-size:11px;color:rgba(var(--text-rgb),.65);white-space:nowrap}
.g-desc{font-size:12px;line-height:1.35;color:rgba(var(--text-rgb),.82);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0}
.g-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cdot{width:13px;height:13px;border-radius:50%;border:1.5px solid rgba(255,255,255,.45);display:inline-block}
.g-meta .sep{width:1px;height:14px;background:var(--line)}
.szs{display:flex;gap:4px;flex-wrap:wrap}
.sz{min-width:24px;height:22px;padding:0 4px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;font-size:11px;border:1px solid var(--line)}
.sz.out{opacity:.45;text-decoration:line-through}
.g-btns{display:flex;gap:8px}
.g-btns .btn-gold{flex:2;height:40px;border-radius:13px;font-size:14px}
.g-btns .vbtn{flex:1;height:40px;border-radius:13px;border:1px solid var(--line);background:var(--glass);font-size:12px;display:flex;align-items:center;justify-content:center;gap:5px;white-space:nowrap}
.gal-foot{position:relative;display:flex;align-items:center;justify-content:space-between;padding:10px 24px 0;font-size:13px;color:rgba(var(--text-rgb),.78);pointer-events:none}
.gal-foot b{color:var(--accent);font-weight:500}

.grid-wrap{position:relative;flex:1 1 auto;overflow-y:auto;padding:12px 14px 20px;z-index:2}
.grid{display:grid;gap:12px}
.gitem{position:relative;border-radius:22px;overflow:hidden;background:var(--glass);border:1px solid var(--line);animation:rise .6s cubic-bezier(.2,.8,.2,1) both}
.gitem>button.ph{display:block;width:100%;aspect-ratio:3/4;padding:0;border:0;background:#222;position:relative;overflow:hidden}
.gitem>button.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gitem .fav{position:absolute;top:6px;right:6px;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.35);;display:flex;align-items:center;justify-content:center;padding:0;color:#f4ede3}
.gitem .info{padding:8px 10px 10px;display:flex;flex-direction:column;gap:3px}
.gitem .info b{font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gitem .info .pr{display:flex;align-items:center;justify-content:space-between;gap:6px}
.gitem .info .pr span{font-weight:600;color:var(--accent);white-space:nowrap}
.gitem .info .pr s{font-size:10px;opacity:.6;margin-left:5px}
.grid.c3 .gitem,.grid.c4 .gitem{border-radius:14px}
.grid.c4 .info{display:none}
.grid.c3 .info{padding:6px 8px 8px;font-size:11px}
@keyframes rise{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:none}}
.empty{position:relative;z-index:2;text-align:center;color:rgba(var(--text-rgb),.75);padding:40px 20px}

/* ---------- ficha: foto arriba, datos al medio, botón fijo abajo ---------- */
.sheet{position:absolute;inset:0;z-index:200;background:var(--bg);display:flex;flex-direction:column;overflow:hidden}
.sh-photo{position:relative;flex:0 0 auto;width:100%;aspect-ratio:4/5;max-height:72dvh;overflow:hidden}
.sheet-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 78%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 78%,transparent 100%)}
.sheet-tint{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(var(--shade),.82) 0%,rgba(var(--shade),.5) 9%,rgba(var(--shade),.14) 19%,rgba(var(--shade),0) 28%,rgba(var(--bg-rgb),0) 80%,var(--bg) 100%)}
.sheet-top{position:absolute;left:18px;right:70px;top:calc(env(safe-area-inset-top) + 14px);display:flex;align-items:center;justify-content:space-between;gap:10px;z-index:2}
.video-pill{position:absolute;right:14px;bottom:16px;z-index:2;height:36px;padding:0 14px 0 11px;border-radius:18px;border:1px solid rgba(255,255,255,.3);background:rgba(0,0,0,.45);color:#fff;font-size:13px;display:flex;align-items:center;gap:6px}
.sh-body{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;-webkit-overflow-scrolling:touch}
.sh-content{padding:4px 18px 14px;display:flex;flex-direction:column;gap:12px;margin-top:-28px;position:relative;z-index:1}
.sh-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.sh-title{min-width:0}
.sh-head small{font-size:12px;color:rgba(var(--text-rgb),.72)}
.sh-head h2{margin:2px 0 0;font-size:20px;font-weight:500;line-height:1.2}
.sh-price{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;padding-top:14px}
.sh-price b{font-size:19px;font-weight:600;color:var(--accent);white-space:nowrap}
.sh-price s{font-size:12px;color:rgba(var(--text-rgb),.62);white-space:nowrap}
.sh-desc{margin:-4px 0 0;font-size:13px;line-height:1.4;color:rgba(var(--text-rgb),.82)}
.sh-block{display:flex;flex-direction:column;gap:7px}
.sh-label{font-size:13px;color:rgba(var(--text-rgb),.85);display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.sh-hint{font-size:12px;color:rgba(var(--text-rgb),.65)}
.sh-hint.warn{color:var(--accent);font-weight:500}
.opts{display:flex;gap:7px;flex-wrap:wrap}
.opt{min-width:46px;height:40px;padding:0 12px;border-radius:13px;border:1px solid var(--line);background:var(--glass);font-size:14px;font-weight:500;display:flex;align-items:center;justify-content:center;gap:7px}
.opt.on{background:rgba(var(--accent-rgb),.32);border-color:var(--accent)}
.opt:disabled{opacity:.4;text-decoration:line-through;cursor:not-allowed}
.opt .cdot{width:16px;height:16px}
.seg.wide button{height:38px}
.zone-wrap{display:flex;gap:8px}
.zone-wrap select{flex:1 1 auto;min-width:0;height:42px;border-radius:13px;border:1px solid var(--line);background:var(--glass);color:var(--text);font-size:15px;padding:0 10px}
.zone-wrap select option{color:#111}
.loc-btn{flex:0 0 auto;height:42px;padding:0 12px;border-radius:13px;border:1px solid rgba(var(--accent-rgb),.6);background:transparent;color:var(--accent);font-size:13px;display:flex;align-items:center;gap:6px;white-space:nowrap}
.loc-btn.on{background:rgba(var(--accent-rgb),.2)}
.sh-foot{flex:0 0 auto;padding:10px 16px calc(env(safe-area-inset-bottom) + 12px);border-top:1px solid var(--line);background:rgba(var(--bg-rgb),.96);display:flex;flex-direction:column;gap:6px}
.sh-foot .btn-gold.big{height:52px}
.sh-note{font-size:11px;color:rgba(var(--text-rgb),.65);text-align:center}

/* ---------- modales ---------- */
.modal{position:absolute;inset:0;z-index:210;display:flex;align-items:center;justify-content:center;padding:0 18px;background:rgba(0,0,0,.55)}
.modal-card{width:100%;border-radius:28px;padding:22px 20px 16px;display:flex;flex-direction:column;gap:14px;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.modal-card h3{margin:0;font-size:19px;font-weight:500}
.modal-card p{margin:-8px 0 0;font-size:13px}
.modal-card label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:rgba(var(--text-rgb),.85)}
.modal-card input{height:46px;padding:0 14px;border-radius:14px;border:1px solid var(--line);background:var(--glass);color:var(--text);font-size:16px;outline:none}
.modal-card input:focus{border-color:var(--accent)}
.err{color:var(--accent);font-size:12px}
.video-modal{flex-direction:column;gap:6px;background:rgba(0,0,0,.88);}
.video-frame{width:min(340px,90%);aspect-ratio:9/16;max-height:78dvh;border-radius:22px;overflow:hidden;background:#000;border:1px solid rgba(255,255,255,.18)}
.video-frame iframe{width:100%;height:100%;border:0;background:#fff}
.video-modal .btn-text{color:#fff}
.close-tr{position:absolute;top:calc(env(safe-area-inset-top) + 16px);right:16px;color:#fff;background:rgba(0,0,0,.4)}
.list-card{max-height:80dvh}
.lm-head{display:flex;align-items:center;justify-content:space-between}
.lm-body{overflow-y:auto;display:flex;flex-direction:column;gap:10px;min-height:0;padding:2px 0}
.lm-body p{margin:0;font-size:14px;line-height:1.5}
.lm-item{display:flex;align-items:center;gap:12px;padding:8px;border-radius:16px;background:var(--glass);border:1px solid var(--line);text-align:left;width:100%}
.lm-item img{width:46px;height:60px;border-radius:10px;object-fit:cover}
.lm-item span{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:14px}
.lm-item small{font-size:12px;color:rgba(var(--text-rgb),.72)}
.lm-item em{font-style:normal;color:var(--accent);font-weight:600;font-size:13px}

.toast{position:absolute;left:22px;right:22px;top:calc(env(safe-area-inset-top) + 20px);z-index:220;padding:14px 16px;border-radius:20px;display:flex;flex-direction:column;gap:4px;box-shadow:0 16px 40px rgba(0,0,0,.45);border-color:rgba(var(--accent-rgb),.6)}
.toast b{font-size:14px;color:var(--accent)}
.toast span{font-size:13px;color:rgba(var(--text-rgb),.88)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.sh-total{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:4px;padding:10px 12px;border-radius:14px;background:rgba(var(--accent-rgb),.12);border:1px solid rgba(var(--accent-rgb),.35);font-size:13px;color:rgba(var(--text-rgb),.8)}
.sh-total b{font-size:16px;color:var(--accent);font-weight:600}
.lm-btn{width:100%;height:46px;margin-top:6px;border-radius:16px;border:1px solid rgba(var(--accent-rgb),.6);background:rgba(var(--accent-rgb),.12);color:var(--text);font-size:14px}
.lm-body .lm-me{margin:4px 0 0;line-height:1.4;font-size:12px;color:rgba(var(--text-rgb),.6);text-align:center}
.lm-me .link{border:0;background:transparent;padding:0;color:var(--accent);font-size:12px;text-decoration:underline;cursor:pointer}

.sh-close{position:absolute;right:14px;top:calc(env(safe-area-inset-top) + 14px);z-index:5}
.video-pill{bottom:40px}
.zoom-pill{position:absolute;left:14px;bottom:40px;z-index:2;width:36px;height:36px;border-radius:18px;border:1px solid rgba(255,255,255,.3);background:rgba(0,0,0,.45);color:#fff;display:flex;align-items:center;justify-content:center;padding:0}
.zoom{position:absolute;inset:0;z-index:230;background:#000;display:flex;align-items:center;justify-content:center;overflow:auto;touch-action:pinch-zoom}
.zoom img{max-width:100%;max-height:100%;object-fit:contain}
.zoom-close{position:absolute;right:14px;top:calc(env(safe-area-inset-top) + 14px);background:rgba(0,0,0,.5);color:#fff;border-color:rgba(255,255,255,.3)}
/* Video subido: solo el video */
.video-frame video{width:100%;height:100%;object-fit:contain;background:#000;display:block}
/* Instagram: se recorta el marco (perfil, me gusta, comentarios) y queda solo el video */
.video-frame.ig{position:relative;background:#000}
.video-frame.ig iframe{position:absolute;border:0;background:#000}
.video-frame.ig .ig-hint{position:absolute;left:0;right:0;bottom:10px;text-align:center;font-size:12px;color:rgba(255,255,255,.7);pointer-events:none}

/* Aviso de talle: rojo con texto blanco que titila */
.sh-hint.alert{display:inline-block;margin-left:6px;padding:3px 10px;border-radius:10px;background:#e0353b;color:#fff;font-weight:600;font-size:12px;animation:blinkAlert .45s ease-in-out 0s 4 alternate}
@keyframes blinkAlert{from{opacity:1;transform:scale(1)}to{opacity:.35;transform:scale(1.06)}}
.opts.need .opt:not(:disabled){border-color:#e0353b;animation:needPulse .9s ease-in-out 2}
@keyframes needPulse{0%,100%{box-shadow:0 0 0 0 rgba(224,53,59,0)}50%{box-shadow:0 0 0 4px rgba(224,53,59,.35)}}
.sh-foot .btn-gold.need{background:#e0353b;color:#fff}
.sheet-top .brand-text b,.sheet-top .brand-text small{text-shadow:0 1px 8px rgba(var(--shade),.7)}

/* Entrega y modal de ubicación */
.ship-sum{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;width:100%;padding:10px 12px;border-radius:14px;border:1px solid rgba(var(--accent-rgb),.45);background:rgba(var(--accent-rgb),.1);color:var(--text);font-size:13px;text-align:left}
.ship-sum span{flex:1 1 auto}
.ship-sum b{color:var(--accent);font-weight:600}
.ship-sum small{flex:0 0 auto;color:var(--accent);text-decoration:underline;font-size:12px}
.loc-card{gap:12px}
.loc-card select{width:100%;height:48px;border-radius:14px;border:1px solid var(--line);background:var(--glass);color:var(--text);font-size:15px;padding:0 12px}
.loc-err{padding:12px 14px;border-radius:14px;background:#e0353b;color:#fff;font-size:13px;line-height:1.45;font-weight:500;animation:blinkAlert .45s ease-in-out 0s 2 alternate}
.loc-err.soft{background:rgba(var(--accent-rgb),.16);color:var(--text);border:1px solid rgba(var(--accent-rgb),.5);animation:none;font-weight:400}
.loc-res{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border-radius:14px;background:rgba(var(--accent-rgb),.1);border:1px solid rgba(var(--accent-rgb),.35);font-size:14px}
.loc-res p{margin:0}
.loc-row{display:flex;justify-content:space-between;gap:10px}
.loc-row.muted{font-size:12px;color:rgba(var(--text-rgb),.7)}
.loc-row.tot{padding-top:6px;border-top:1px solid var(--line)}
.loc-row.tot b{color:var(--accent);font-size:17px}
.btn-gold:disabled{opacity:.55;cursor:default}

.nav-wa svg{color:#25d366}

/* Fotos de la ficha: se deslizan de costado */
.sh-slides{position:absolute;inset:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.sh-slides .sheet-img{position:relative;inset:auto;flex:0 0 100%;width:100%;height:100%;scroll-snap-align:center;scroll-snap-stop:always}
.sh-dots{position:absolute;left:0;right:0;bottom:52px;z-index:2;display:flex;justify-content:center;gap:6px;pointer-events:none}
.sh-dots i{width:7px;height:7px;border-radius:4px;background:rgba(255,255,255,.55);box-shadow:0 0 4px rgba(0,0,0,.4);transition:width .25s,background .25s}
.sh-dots i.on{width:20px;background:#fff}
.sheet-tint,.sheet-tone{pointer-events:none}

/* Talle y color en la misma fila cuando entran (si hay muchos, uno debajo del otro) */
.sh-pick{display:flex;flex-direction:column;gap:12px}
.sh-pick>.sh-block[hidden]{display:none}
.sh-pick.inline{flex-direction:row;align-items:flex-start;gap:22px}
.sh-pick.inline>.sh-block{flex:0 0 auto}
.sh-pick.inline .opts{flex-wrap:nowrap}
.sh-pick.inline .sh-label{width:0;min-width:100%}

/* Compartir */
.top-acts{display:flex;gap:8px;align-items:center}
.sh-share{position:absolute;right:66px;top:calc(env(safe-area-inset-top) + 14px);z-index:5}
.sheet-top{right:120px}

/* Estado de cada pedido */
.lm-item .st{font-style:normal;font-size:11px;font-weight:600;align-self:flex-start;margin-top:2px;padding:2px 8px;border-radius:8px;background:rgba(var(--accent-rgb),.18);color:var(--text)}
.lm-item .st-confirmado{background:rgba(110,160,230,.25)}
.lm-item .st-entregado{background:rgba(120,200,140,.28)}
.lm-item .st-cancelado{background:rgba(224,53,59,.25)}

/* Corazón en el carrusel y en la ficha */
.card .cfav{position:absolute;top:8px;right:8px;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;padding:0;color:#f4ede3;pointer-events:none}
.sh-fav{position:absolute;right:118px;top:calc(env(safe-area-inset-top) + 14px);z-index:5}
.sheet-top{right:172px}

/* Botones redondos sobre fotos: siempre blancos con íconos negros, con cualquier color de tienda */
.top-acts .icon-btn,.sh-close,.sh-share,.sh-fav{background:rgba(255,255,255,.9)!important;border-color:rgba(0,0,0,.12)!important;color:#111!important;box-shadow:0 2px 10px rgba(0,0,0,.18)}
.zoom-close{background:rgba(0,0,0,.5)!important;border-color:rgba(255,255,255,.3)!important;color:#fff!important}