:root{--ink:#1C1813;--ink-soft:#5C5347;--ivory:#FAF6EF;--porcelain:#FFFDF9;--line:#E8E0D2;--gold:#A9854A;--gold-lt:#D9B868;--off:#9A8F7E;--rose:#B96A6A;--green:#5F7A57}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
html,body{background:var(--ivory);color:var(--ink);font-family:'Jost',system-ui,sans-serif;font-size:15px}
.disp{font-family:'Cormorant Garamond',serif}
.up{text-transform:uppercase}.trk{letter-spacing:.16em}
button{font-family:'Jost'}
/* ── HERO ── */
.hero{background:linear-gradient(180deg,#171310,#241E17 70%,#2B241B);color:var(--ivory);text-align:center;padding:34px 18px 40px;position:relative;overflow:hidden}
.hero::after{content:'';position:absolute;inset:auto -20% -60% -20%;height:120px;background:radial-gradient(ellipse at center,rgba(217,184,104,.18),transparent 70%)}
.klogo{font-weight:400;letter-spacing:.34em;padding-left:.34em;font-size:24px;background:linear-gradient(180deg,#F2E0A6,#C6A765 55%,#9A7836);-webkit-background-clip:text;background-clip:text;color:transparent}
.krule{height:2px;width:110px;margin:8px auto 6px;border-radius:2px;background:linear-gradient(90deg,#9A7836,#E7CE8C,#9A7836)}
.hsub{font-size:10px;letter-spacing:.22em;color:rgba(250,246,239,.5)}
.htitle{font-size:clamp(26px,6vw,38px);margin-top:22px;line-height:1.15}
.htag{font-size:13px;color:rgba(250,246,239,.65);margin-top:6px}
.hcount{display:inline-block;margin-top:12px;font-size:10px;letter-spacing:.18em;border:1px solid rgba(217,184,104,.4);color:var(--gold-lt);padding:6px 14px;border-radius:999px}
.hbtns{display:flex;gap:10px;justify-content:center;margin-top:20px;flex-wrap:wrap}
.hb{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:999px;font-size:13px;letter-spacing:.04em;cursor:pointer;text-decoration:none;border:none}
.hb-gold{background:linear-gradient(145deg,var(--gold-lt),var(--gold));color:#1c1813;font-weight:500}
.hb-ghost{background:transparent;color:var(--ivory);border:1px solid rgba(250,246,239,.35)}
/* ── FILTER BAR ── */
.fwrap{position:sticky;top:0;z-index:30;background:rgba(250,246,239,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.fbar{display:flex;gap:8px;align-items:center;padding:10px 12px;max-width:1100px;margin:0 auto;flex-wrap:wrap}
.fsearch{flex:1 1 160px;min-width:140px;position:relative}
.fsearch input{width:100%;padding:11px 12px 11px 36px;border:1px solid var(--line);border-radius:999px;background:var(--porcelain);font-size:14px;font-family:'Jost';color:var(--ink)}
.fsearch svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);opacity:.5}
.fsel{padding:11px 12px;border:1px solid var(--line);border-radius:999px;background:var(--porcelain);font-size:13px;font-family:'Jost';color:var(--ink);max-width:46vw}
.fbtn{display:inline-flex;align-items:center;gap:6px;padding:11px 16px;border:1px solid var(--line);border-radius:999px;background:var(--porcelain);font-size:13px;cursor:pointer;color:var(--ink)}
.fbtn.on{border-color:var(--gold);color:var(--gold);background:#FBF3E4}
.fpanel{display:none;border-top:1px solid var(--line);padding:14px 12px;max-width:1100px;margin:0 auto}
.fpanel.open{display:block}
.frow{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.fchk{display:inline-flex;align-items:center;gap:7px;font-size:13px;cursor:pointer;color:var(--ink-soft)}
.fchk input{width:16px;height:16px;accent-color:var(--gold)}
.fprice{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-soft)}
.fprice input{width:84px;padding:9px 10px;border:1px solid var(--line);border-radius:9px;background:var(--porcelain);font-size:13px}
/* chips */
.chips{display:flex;gap:6px;flex-wrap:wrap;padding:8px 12px 2px;max-width:1100px;margin:0 auto}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:11px;background:#FBF3E4;border:1px solid var(--gold-lt);color:var(--ink-soft);padding:5px 8px 5px 11px;border-radius:999px;cursor:pointer}
.chip b{color:var(--gold);font-weight:500}
.chip span{font-size:14px;line-height:1;color:var(--gold)}
/* ── GRID ── */
.section{max-width:1100px;margin:0 auto;padding:18px 12px 0}
.gcount{font-size:11px;color:var(--off);letter-spacing:.06em;margin:4px 2px 12px}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:640px){.grid{grid-template-columns:repeat(3,1fr);gap:16px}}
@media(min-width:1000px){.grid{grid-template-columns:repeat(4,1fr)}}
.card{background:var(--porcelain);border:1px solid var(--line);border-radius:16px;overflow:hidden;position:relative;transition:transform .25s ease,box-shadow .25s ease}
@media(hover:hover){.card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(28,24,19,.12)}.card:hover .media img{transform:scale(1.05)}}
.media{aspect-ratio:1/1;width:100%;overflow:hidden;background:var(--line);cursor:pointer;position:relative}
.media img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .35s ease,transform .5s ease}
.media img.on{opacity:1}
.ld{background:linear-gradient(100deg,#EFE8DA 40%,#F8F2E6 50%,#EFE8DA 60%);background-size:200% 100%;animation:sk 1.3s infinite linear}
@keyframes sk{to{background-position:-200% 0}}
.ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#F7EBCB,#D9B868,#AE8842)}
.badges{position:absolute;top:10px;left:10px;z-index:2;display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.bd{font-size:9px;letter-spacing:.1em;padding:4px 8px;border-radius:999px;color:#fff}
.bd-new{background:var(--ink)}.bd-off{background:var(--rose)}.bd-free{background:var(--green)}
.soldout{position:absolute;inset:0;background:rgba(250,246,239,.55);display:flex;align-items:center;justify-content:center;z-index:1}
.soldout span{font-size:10px;letter-spacing:.14em;background:var(--ink);color:var(--ivory);padding:6px 12px;border-radius:999px}
.cinfo{padding:11px 11px 12px}
.cname{font-family:'Cormorant Garamond';font-size:17px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.cmat{font-size:10px;color:var(--ink-soft);margin-top:2px;letter-spacing:.04em}
.csz{font-size:9.5px;color:var(--off);margin-top:4px;letter-spacing:.05em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cprice{margin-top:7px;font-size:15px;color:var(--gold);font-weight:500}
.cold{font-size:11px;color:var(--off);text-decoration:line-through;margin-left:6px;font-weight:400}
.cact{display:flex;gap:6px;margin-top:10px}
.qbtn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 8px;border-radius:10px;font-size:11.5px;cursor:pointer;border:1px solid var(--line);background:var(--ivory);color:var(--ink);letter-spacing:.02em}
.qbtn.wa{flex:0 0 42px;background:#1e7a52;border-color:#1e7a52;color:#fff}
.more{display:block;margin:24px auto 0;padding:13px 30px;border-radius:999px;border:1px solid var(--line);background:var(--porcelain);color:var(--ink);font-size:13px;cursor:pointer}
.center{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:52vh;text-align:center;padding:24px;color:var(--ink-soft);gap:12px}
.spin{width:34px;height:34px;border:3px solid var(--line);border-top-color:var(--gold);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.nores{ text-align:center;padding:56px 20px;color:var(--ink-soft)}
.nores .disp{font-size:20px;color:var(--ink)}
footer{text-align:center;padding:48px 24px calc(110px + env(safe-area-inset-bottom));color:var(--off);font-size:11px}
/* ── FABs ── */
.wafab{position:fixed;bottom:max(18px,env(safe-area-inset-bottom));right:14px;z-index:40;display:flex;align-items:center;gap:8px;padding:12px 16px;border-radius:999px;background:#1e7a52;color:#fff;text-decoration:none;box-shadow:0 6px 20px rgba(0,0,0,.25);font-size:13px}
.bagfab{position:fixed;bottom:max(18px,env(safe-area-inset-bottom));left:14px;z-index:40;display:none;align-items:center;gap:8px;padding:12px 16px;border-radius:999px;background:var(--ink);color:var(--ivory);box-shadow:0 6px 20px rgba(0,0,0,.25);font-size:13px;border:none;cursor:pointer}
.bagfab.on{display:inline-flex}
.bagn{background:var(--gold-lt);color:#1c1813;border-radius:999px;font-size:11px;min-width:19px;height:19px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px;font-weight:500}
/* ── SHEETS / DETAIL ── */
.ov{position:fixed;inset:0;background:rgba(20,16,12,.5);z-index:50;display:flex;align-items:flex-end;justify-content:center;animation:fade .2s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
@media(min-width:760px){.ov{align-items:center;padding:24px}}
.sheet{background:var(--ivory);width:100%;max-height:94dvh;overflow-y:auto;border-radius:20px 20px 0 0;animation:up .25s ease;position:relative}
@keyframes up{from{transform:translateY(30px);opacity:.6}to{transform:none;opacity:1}}
@media(min-width:760px){.sheet{border-radius:20px;max-width:920px;max-height:88dvh}}
.dwrap{display:grid;grid-template-columns:1fr;gap:0}
@media(min-width:760px){.dwrap{grid-template-columns:1fr 1fr;gap:22px;padding:22px}}
.dclose{position:absolute;top:10px;right:10px;z-index:5;width:38px;height:38px;border-radius:50%;border:none;background:rgba(250,246,239,.9);color:var(--ink-soft);font-size:22px;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.12)}
.gal{position:relative}
.gmain{aspect-ratio:1/1;background:var(--line);overflow:hidden;position:relative;cursor:zoom-in;touch-action:pan-y}
@media(min-width:760px){.gmain{border-radius:14px}}
.gmain img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .3s}
.gmain img.on{opacity:1}
.garr{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;border:none;background:rgba(250,246,239,.88);color:var(--ink);font-size:20px;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.15);display:flex;align-items:center;justify-content:center}
.garr.l{left:10px}.garr.r{right:10px}
.gzoom{position:absolute;bottom:10px;right:10px;border:none;background:rgba(250,246,239,.88);border-radius:999px;padding:8px 13px;font-size:11px;cursor:pointer;color:var(--ink-soft);box-shadow:0 2px 8px rgba(0,0,0,.12)}
.gthumbs{display:flex;gap:7px;overflow-x:auto;padding:10px 12px}
@media(min-width:760px){.gthumbs{padding:10px 0 0}}
.gt{width:58px;height:58px;min-width:58px;object-fit:cover;border-radius:9px;border:2px solid var(--line);cursor:pointer;transition:border-color .2s}
.gt.on{border-color:var(--gold)}
.dinfo{padding:16px 16px 0}
@media(min-width:760px){.dinfo{padding:6px 0 0}}
.dsku{font-size:10px;letter-spacing:.14em;color:var(--off)}
.dname{font-size:clamp(22px,5vw,28px);line-height:1.15;margin-top:4px}
.dbadges{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.dprice{margin-top:12px;font-size:24px;color:var(--gold);font-weight:500}
.davail{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:12px}
.dot{width:8px;height:8px;border-radius:50%}
.ddesc{margin-top:14px;font-size:13.5px;line-height:1.65;color:var(--ink-soft);background:rgba(0,0,0,.025);border-radius:10px;padding:12px 13px}
.attrs{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
.attr{font-size:11px;background:var(--porcelain);border:1px solid var(--line);border-radius:999px;padding:6px 11px;color:var(--ink-soft)}
.attr b{color:var(--ink);font-weight:500}
.lbl{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--off)}
.dsel{margin-top:16px}
select,.dqty input{font-size:16px;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--porcelain);color:var(--ink)}
select{width:100%;margin-top:6px;font-family:'Jost'}
.dqty{display:flex;gap:8px;align-items:center;margin-top:6px}
.dqty button{width:44px;height:44px;border:1px solid var(--line);border-radius:10px;background:var(--porcelain);font-size:18px;cursor:pointer}
.dqty input{flex:1;text-align:center}
.buybar{position:sticky;bottom:0;background:linear-gradient(180deg,rgba(250,246,239,0),var(--ivory) 26%);padding:16px 16px calc(14px + env(safe-area-inset-bottom));margin-top:18px;display:flex;gap:8px}
@media(min-width:760px){.buybar{padding:16px 0 6px}}
.bb{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px;border-radius:12px;font-size:14px;font-weight:500;cursor:pointer;border:none}
.bb-gold{background:linear-gradient(145deg,var(--gold-lt),var(--gold));color:#1c1813}
.bb-ghost{background:var(--porcelain);border:1px solid var(--line);color:var(--ink);flex:0 0 auto;padding:14px 16px}
.bb[disabled]{background:var(--line);color:var(--off);cursor:not-allowed}
.trust{font-size:11px;color:var(--off);text-align:center;padding:2px 16px 14px}
.dshare{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:12px;color:var(--ink-soft);background:none;border:1px solid var(--line);border-radius:999px;padding:8px 14px;cursor:pointer}
/* relacionados */
.rel{padding:6px 16px 20px}
@media(min-width:760px){.rel{grid-column:1/3;padding:6px 0 8px}}
.rel h4{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--off);margin-bottom:10px}
.relrow{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px}
.relc{flex:0 0 128px;background:var(--porcelain);border:1px solid var(--line);border-radius:12px;overflow:hidden;cursor:pointer}
.relc .rm{width:128px;height:128px;background:var(--line)}
.relc img{width:100%;height:100%;object-fit:cover;display:block}
.relc .rn{font-size:11.5px;padding:7px 8px 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:'Cormorant Garamond';font-size:13px}
.relc .rp{font-size:11px;color:var(--gold);padding:0 8px 9px}
/* zoom */
.zoom{position:fixed;inset:0;background:rgba(15,12,9,.94);z-index:70;display:flex;align-items:center;justify-content:center;cursor:zoom-out}
.zoom img{max-width:96vw;max-height:94dvh;object-fit:contain}
.zx{position:fixed;top:14px;right:14px;width:40px;height:40px;border-radius:50%;border:none;background:rgba(250,246,239,.15);color:#fff;font-size:22px;cursor:pointer}
/* cart drawer */
.citem{display:flex;gap:10px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line)}
.citem .ci{width:52px;height:52px;border-radius:9px;overflow:hidden;background:var(--line);flex-shrink:0}
.citem img{width:100%;height:100%;object-fit:cover}
.citem .cn{flex:1;min-width:0}
.citem .cn div:first-child{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.citem .cn div:last-child{font-size:11px;color:var(--off)}
.cq{display:flex;align-items:center;gap:4px}
.cq button{width:28px;height:28px;border:1px solid var(--line);background:var(--porcelain);border-radius:7px;cursor:pointer;font-size:14px}
.cq span{min-width:20px;text-align:center;font-size:13px}
.crm{border:none;background:none;color:var(--rose);font-size:16px;cursor:pointer;padding:4px}
/* ── C2 v2: Detalle a pantalla completa en móvil (spec exacta) ── */
.bb{min-width:0}
.buybar .bb-gold{flex:1.4}
@media(max-width:767px){
  html, body{
    overflow-x:hidden;
  }
  .ov{
    z-index:80;
    padding:0;
    align-items:stretch;
  }
  .sheet{
    width:100vw;
    max-width:100vw;
    height:100dvh;
    max-height:100dvh;
    border-radius:0;
    overflow-y:auto;
    overflow-x:hidden;
    box-sizing:border-box;
  }
  .dwrap,
  .dinfo,
  .gal,
  .rel,
  .buybar{
    max-width:100vw;
    box-sizing:border-box;
    overflow-x:hidden;
  }
  .dclose{
    position:fixed;
    top:calc(10px + env(safe-area-inset-top));
    right:10px;
    z-index:90;
  }
  .gmain{
    aspect-ratio:auto;
    height:48dvh;
    max-height:48dvh;
  }
  /* C6: joyería sin recorte agresivo en el detalle móvil */
  .gmain img{
    object-fit:contain;
    background:var(--porcelain);
  }
  .attrs{
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    max-width:100%;
    -webkit-overflow-scrolling:touch;
    padding-bottom:4px;
  }
  .attr{
    flex:0 0 auto;
  }
  .buybar{
    width:100%;
    max-width:100%;
    display:grid;
    grid-template-columns:minmax(0,118px) minmax(0,1fr);
    gap:10px;
    padding:12px 14px calc(12px + env(safe-area-inset-bottom));
    background:linear-gradient(180deg,rgba(250,246,239,0),var(--ivory) 18%);
  }
  .buybar .bb{
    width:100%;
    min-width:0;
    max-width:100%;
    box-sizing:border-box;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    padding-left:10px;
    padding-right:10px;
  }
  .buybar .bb-ghost,
  .buybar .bb-gold{
    flex:initial;
  }
  .bt-l{
    display:none!important;
  }
  .relrow{
    max-width:100%;
    overflow-x:auto;
  }
}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(86px + env(safe-area-inset-bottom));background:var(--ink);color:var(--ivory);padding:10px 18px;border-radius:999px;font-size:13px;z-index:80;opacity:0;transition:opacity .25s;pointer-events:none;max-width:88vw;text-align:center}
.toast.on{opacity:1}

/* Controles legibles y cómodos en pantallas pequeñas. */
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
button:disabled{opacity:.6;cursor:wait}
.qbtn,.cq button,.dqty button,.crm{min-height:44px}
.cname{white-space:normal;min-height:2.4em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.cn{min-width:0;overflow-wrap:anywhere}
@media(max-width:430px){.fsearch{flex-basis:100%}.fbar .fsel{flex:1;max-width:none;min-width:0}.fbar .fbtn{min-height:44px}.cinfo{padding:10px}.cact{gap:5px}.citem{gap:8px}.cq button{min-width:32px}.buybar{flex-wrap:wrap}.buybar .bb{min-width:120px;min-height:48px}.dinfo{padding-bottom:18px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}