/* MarketCity Experience · header mobile-first */
.mcx,.mcx *{box-sizing:border-box}
.mcx{
  --ink:#0a1628;--ink2:#132238;--blue:#0b5cff;--blue2:#0847c7;--yellow:#ffd332;
  --bg:#fff;--soft:#f3f5f8;--line:#e4e8ee;--text:#0f172a;--muted:#5b6678;--ok:#0f9d58;--sale:#e5383b;--wa:#25d366;
  position:sticky;top:0;z-index:9999;width:100%;font-family:inherit;color:var(--text);
  -webkit-tap-highlight-color:transparent
}
.mcx a{color:inherit;text-decoration:none}
.mcx button,.mcx input{font:inherit;color:inherit}
.mcx svg{width:1em;height:1em;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mcx-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mcx-wrap{width:100%;max-width:1320px;margin:0 auto;padding:0 12px}

/* ── BANNER SUPERIOR ── */
.mcx-promo{position:relative;background:var(--yellow);color:var(--ink);font-size:12px;font-weight:700;overflow:hidden;max-height:36px;transition:max-height .25s,background-color .35s,color .35s}
.mcx-promo[data-tone="dark"]{background:var(--ink2);color:#fff}
.mcx-promo[data-tone="blue"]{background:var(--blue);color:#fff}
.mcx-promo[data-tone="green"]{background:#0c7a45;color:#fff}
.mcx-promo[data-tone="red"]{background:#c62828;color:#fff}
.mcx-promo .mcx-wrap{height:34px;display:flex;align-items:center;justify-content:center;gap:6px;position:relative;padding-right:36px;padding-left:12px}
.mcx-promo-a{display:flex;align-items:center;justify-content:center;gap:7px;min-width:0;flex:1;height:100%}
.mcx-promo-a svg{font-size:15px}
.mcx-promo-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .2s,transform .2s}
.mcx-promo-t.is-out{opacity:0;transform:translateY(-6px)}
.mcx-promo-t b{font-weight:900}
.mcx-promo-t u{text-decoration:none;border-bottom:1px solid currentColor}
.mcx-cd{font-variant-numeric:tabular-nums;padding:1px 6px;border-radius:5px;background:rgba(0,0,0,.14);margin:0 2px}
.mcx-promo-nav{display:none;width:26px;height:26px;border:0;border-radius:7px;background:transparent;cursor:pointer;color:inherit;font-size:14px;align-items:center;justify-content:center;opacity:.7}
.mcx-promo-nav:hover{opacity:1;background:rgba(0,0,0,.08)}
.mcx-promo-x{position:absolute;right:4px;top:3px;width:28px;height:28px;border:0;background:none;cursor:pointer;font-size:17px;line-height:1;opacity:.55;color:inherit}
.mcx-promo-bar{position:absolute;left:0;bottom:0;height:2px;width:0;background:currentColor;opacity:.35}
.mcx[data-promo="off"] .mcx-promo{max-height:0}

/* ── BARRA PRINCIPAL ── */
.mcx-bar{background:var(--ink);color:#fff}
.mcx-bar .mcx-wrap{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"menu logo actions" "search search search";align-items:center;gap:8px 6px;padding-top:8px;padding-bottom:10px}
.mcx-menu-btn{grid-area:menu}
.mcx-logo{grid-area:logo;display:flex;align-items:center;min-width:0}
.mcx-logo img{display:block;height:34px;width:auto;max-width:132px;object-fit:contain}
.mcx-actions{grid-area:actions;display:flex;align-items:center;gap:4px}
.mcx-ibtn{position:relative;width:42px;height:42px;border:0;border-radius:12px;background:transparent;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:22px;cursor:pointer}
.mcx-ibtn:hover{background:rgba(255,255,255,.08)}
.mcx-count{position:absolute;top:3px;right:2px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--yellow);color:var(--ink);font-size:10px;font-weight:900;display:flex;align-items:center;justify-content:center;transform:scale(0);transition:transform .2s}
.mcx-count.is-on{transform:scale(1)}
.mcx-count.is-bump{animation:mcxBump .4s}
@keyframes mcxBump{50%{transform:scale(1.35)}}
.mcx-acc-label,.mcx-sell-top{display:none}

/* ── BUSCADOR ── */
.mcx-search{grid-area:search;position:relative}
.mcx-sform{display:flex;align-items:center;height:46px;background:#fff;border-radius:12px;border:2px solid transparent;transition:border-color .15s}
.mcx-sform:focus-within{border-color:var(--yellow)}
.mcx-sform>svg{margin-left:12px;font-size:19px;color:var(--muted)}
.mcx-sinput{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;padding:0 10px;font-size:16px;color:var(--text)}
.mcx-sinput::placeholder{color:#8a94a6;transition:opacity .2s}
.mcx-sinput::-webkit-search-cancel-button{display:none}
.mcx-sbtn{display:none;width:34px;height:34px;border:0;border-radius:9px;background:none;color:var(--muted);font-size:18px;cursor:pointer;align-items:center;justify-content:center}
.mcx-sform.has-text .mcx-sclear{display:inline-flex}
.mcx-sform.can-voice:not(.has-text) .mcx-mic{display:inline-flex}
.mcx-mic.is-rec{color:var(--sale);animation:mcxPulse 1s infinite}
@keyframes mcxPulse{50%{opacity:.4}}
.mcx-sgo{height:36px;margin-right:5px;padding:0 14px;border:0;border-radius:9px;background:var(--blue);color:#fff;font-weight:800;font-size:13px;cursor:pointer}
.mcx-sgo:hover{background:var(--blue2)}

/* ── RIEL DE CATEGORÍAS ── */
.mcx-rail{background:var(--bg);border-bottom:1px solid var(--line);overflow:hidden;max-height:52px;transition:max-height .25s}
.mcx-rail .mcx-wrap{display:flex;align-items:center;gap:12px;height:50px}
.mcx-chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0;scroll-snap-type:x proximity;padding:0 2px}
.mcx-chips::-webkit-scrollbar{display:none}
.mcx-chip{scroll-snap-align:start;flex:0 0 auto;height:34px;padding:0 12px;border-radius:17px;background:var(--soft);display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--ink2);white-space:nowrap}
.mcx-chip svg{font-size:15px;color:var(--blue)}
.mcx-chip:hover,.mcx-chip.is-on{background:var(--ink);color:#fff}
.mcx-chip:hover svg,.mcx-chip.is-on svg{color:var(--yellow)}
.mcx-chip--hot{background:#fff1f1;color:var(--sale)}
.mcx-chip--hot svg{color:var(--sale)}
.mcx-chip--credit{background:#eaf1ff;color:var(--blue)}
.mcx-chip--you{background:#fff8d9;color:var(--ink)}
.mcx-chip--you svg{color:#b58900}
.mcx-rail-links{display:none}
.mcx.is-compact .mcx-promo,.mcx.is-compact .mcx-rail{max-height:0;border:0}

/* ── PANEL DE BÚSQUEDA ── */
.mcx-panel{position:fixed;inset:0;z-index:100000;background:var(--bg);display:none;flex-direction:column}
.mcx[data-state~="search"] .mcx-panel{display:flex}
.mcx-phead{display:flex;align-items:center;gap:6px;padding:8px 10px;background:var(--ink)}
.mcx-phead .mcx-sform{flex:1}
.mcx-back{color:#fff}
.mcx-pbody{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:6px 14px 24px}
.mcx-sec{margin-top:16px}
.mcx-sec-h{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px;font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:#8a94a6}
.mcx-sec-h button,.mcx-sec-h a{border:0;background:none;color:var(--blue);font-size:12px;font-weight:700;text-transform:none;letter-spacing:0;cursor:pointer;white-space:nowrap}
.mcx-tags{display:flex;flex-wrap:wrap;gap:6px}
.mcx-tag{height:34px;padding:0 12px;border-radius:17px;border:1px solid var(--line);background:#fff;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;cursor:pointer;color:var(--text)}
.mcx-tag svg{color:#9aa3b2}
.mcx-tag:hover,.mcx-tag.is-focus{border-color:var(--ink)}
.mcx-tag--filter{background:var(--ink);border-color:var(--ink);color:#fff}
.mcx-tag--filter svg{color:#fff}
.mcx-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mcx-cat{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:80px;padding:8px;border-radius:14px;background:var(--soft);font-size:12px;font-weight:700;text-align:center}
.mcx-cat svg{font-size:22px;color:var(--blue)}
.mcx-cat small{font-size:10px;font-weight:600;color:var(--muted)}
.mcx-cat:hover,.mcx-cat.is-focus{background:#e7edf6}
.mcx-row{display:flex;align-items:center;gap:12px;padding:9px 8px;margin:0 -8px;border-radius:12px;cursor:pointer}
.mcx-row:hover,.mcx-row.is-focus{background:var(--soft)}
.mcx-row-ic{width:38px;height:38px;border-radius:10px;background:#eaf1ff;color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:18px;flex:0 0 auto}
.mcx-row-t{flex:1;min-width:0}
.mcx-row-t b{display:block;font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mcx-row-t small{display:block;font-size:12px;color:var(--muted)}
.mcx-row-go{color:#b4bcc8;font-size:16px}
/* tarjetas horizontales (para ti / vistos) */
.mcx-hcards{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;margin:0 -14px;padding:0 14px 4px;scroll-snap-type:x proximity}
.mcx-hcards::-webkit-scrollbar{display:none}
.mcx-hcard{scroll-snap-align:start;flex:0 0 128px;display:flex;flex-direction:column;gap:5px}
.mcx-hcard img{width:128px;height:128px;border-radius:12px;object-fit:cover;background:var(--soft)}
.mcx-hcard span{font-size:12px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mcx-hcard b{font-size:13px;font-weight:900}
.mcx-hcard.is-focus img{outline:3px solid var(--yellow)}
/* filas de producto */
.mcx-tabs{display:flex;gap:6px;margin-bottom:6px}
.mcx-tabs button{height:30px;padding:0 12px;border-radius:15px;border:1px solid var(--line);background:#fff;font-size:12px;font-weight:700;cursor:pointer;color:var(--muted)}
.mcx-tabs button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.mcx-note{margin:4px 0 8px;padding:8px 10px;border-radius:10px;background:#fff8d9;font-size:12px;color:var(--ink2)}
.mcx-prod{display:grid;grid-template-columns:56px 1fr auto;align-items:center;gap:12px;padding:8px;margin:0 -8px;border-radius:12px}
.mcx-prod:hover,.mcx-prod.is-focus{background:var(--soft)}
.mcx-prod img{width:56px;height:56px;border-radius:10px;object-fit:cover;background:var(--soft)}
.mcx-prod-n{font-size:13px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mcx-prod-n mark{background:none;color:var(--blue);font-weight:800}
.mcx-prod-m{margin-top:3px;font-size:11px;color:var(--muted);display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.mcx-prod-m .ok{color:var(--ok);font-weight:700}
.mcx-prod-m .low{color:var(--sale);font-weight:700}
.mcx-prod-m .cr{color:var(--blue);font-weight:700}
.mcx-prod-p{text-align:right;white-space:nowrap}
.mcx-prod-p b{display:block;font-size:14px;font-weight:900}
.mcx-prod-p s{font-size:11px;color:#9aa3b2}
.mcx-off{display:inline-block;margin-left:4px;padding:1px 5px;border-radius:5px;background:var(--sale);color:#fff;font-size:10px;font-weight:900}
.mcx-skel{height:72px;border-radius:12px;margin-bottom:6px;background:linear-gradient(90deg,var(--soft) 25%,#e9edf2 50%,var(--soft) 75%);background-size:200% 100%;animation:mcxSk 1.1s infinite}
@keyframes mcxSk{to{background-position:-200% 0}}
.mcx-all{display:flex;align-items:center;justify-content:center;gap:8px;height:46px;margin-top:12px;border-radius:12px;background:var(--ink);color:#fff !important;font-weight:800;font-size:14px;text-align:center;padding:0 12px}
.mcx-all.is-focus{outline:3px solid var(--yellow)}
.mcx-empty{padding:18px;border-radius:14px;background:var(--soft);text-align:center;font-size:14px;color:var(--muted)}
.mcx-empty b{display:block;color:var(--text);margin-bottom:4px}
.mcx-empty a{display:inline-flex;align-items:center;gap:6px;margin-top:10px;height:40px;padding:0 16px;border-radius:10px;background:var(--wa);color:#fff !important;font-weight:800}
.mcx-pay{display:flex;align-items:center;gap:10px;padding:12px;border-radius:14px;border:1px dashed #b9c9ea;background:#f6f9ff;font-size:13px;color:var(--ink2)}
.mcx-pay svg{font-size:22px;color:var(--blue)}
.mcx-pay b{color:var(--blue)}
.mcx-privacy{margin-top:18px;font-size:11px;color:#9aa3b2;text-align:center}
.mcx-privacy button{border:0;background:none;color:var(--muted);text-decoration:underline;cursor:pointer;font-size:11px}

/* ── DRAWER ── */
.mcx-ovl{position:fixed;inset:0;z-index:99998;background:rgba(10,22,40,.5);opacity:0;pointer-events:none;transition:opacity .2s}
.mcx-drawer{position:fixed;top:0;left:0;bottom:0;z-index:99999;width:min(86vw,370px);background:#fff;transform:translateX(-102%);transition:transform .25s ease;display:flex;flex-direction:column}
.mcx[data-state~="menu"] .mcx-ovl{opacity:1;pointer-events:auto}
.mcx[data-state~="menu"] .mcx-drawer{transform:none;box-shadow:12px 0 40px rgba(10,22,40,.25)}
.mcx-dhead{padding:14px 14px 12px;background:var(--ink);color:#fff}
.mcx-dtop{display:flex;align-items:center;justify-content:space-between}
.mcx-dtop img{height:30px;width:auto;filter:brightness(0) invert(1)}
.mcx-hello{margin:12px 0 0;font-size:17px;font-weight:800}
.mcx-hello small{display:block;font-size:12px;font-weight:500;color:rgba(255,255,255,.7);margin-top:2px}
.mcx-seg{margin-top:12px;display:grid;grid-template-columns:1fr 1fr;padding:3px;border-radius:12px;background:rgba(255,255,255,.1)}
.mcx-seg button{height:36px;border:0;border-radius:9px;background:none;color:rgba(255,255,255,.8);font-weight:800;font-size:13px;cursor:pointer}
.mcx-seg button[aria-selected="true"]{background:#fff;color:var(--ink)}
.mcx-dbody{flex:1;overflow-y:auto;padding:4px 14px 16px}
.mcx-tab[hidden]{display:none}
.mcx-dsec{margin:16px 0 6px;font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:#8a94a6}
.mcx-dcats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mcx-steps{margin:10px 0 0;padding:0;list-style:none;counter-reset:s}
.mcx-steps li{counter-increment:s;display:flex;gap:10px;align-items:flex-start;padding:8px 0;font-size:13px;color:var(--muted)}
.mcx-steps li::before{content:counter(s);flex:0 0 24px;height:24px;border-radius:50%;background:var(--ink);color:#fff;font-size:12px;font-weight:900;display:flex;align-items:center;justify-content:center}
.mcx-steps b{display:block;color:var(--text);font-size:14px}
.mcx-cta{display:flex;align-items:center;justify-content:center;gap:8px;height:46px;margin-top:12px;border-radius:12px;background:var(--blue);color:#fff !important;font-weight:800}
.mcx-cta--ghost{background:var(--soft);color:var(--ink) !important}
.mcx-dfoot{padding:12px 14px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.mcx-wa{display:flex;align-items:center;justify-content:center;gap:8px;height:44px;border-radius:12px;background:var(--wa);color:#fff !important;font-weight:800;font-size:14px}
.mcx-wa small{font-weight:600;opacity:.85}
.mcx-legal{display:flex;justify-content:center;gap:14px;font-size:11px;color:var(--muted)}
body.mcx-lock{overflow:hidden}

/* ── DESKTOP ── */
@media (min-width:992px){
  .mcx-wrap{padding:0 20px}
  .mcx-promo{font-size:13px}
  .mcx-promo .mcx-wrap{padding-right:44px}
  .mcx-promo-a{flex:0 1 auto}
  .mcx-promo-nav{display:inline-flex}
  .mcx-bar .mcx-wrap{grid-template-columns:auto auto 1fr auto;grid-template-areas:"menu logo search actions";gap:16px;padding-top:12px;padding-bottom:12px}
  .mcx-logo img{height:44px;max-width:180px}
  .mcx-search{max-width:720px;width:100%;justify-self:center}
  .mcx-sform{height:50px}
  .mcx-sgo{height:40px;padding:0 20px}
  .mcx-acc-label{display:inline;font-size:13px;font-weight:700;margin-left:8px;white-space:nowrap}
  .mcx-acc{width:auto;padding:0 12px}
  .mcx-sell-top{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px;margin-right:6px;border-radius:10px;border:1px solid rgba(255,255,255,.2);font-size:13px;font-weight:700;white-space:nowrap}
  .mcx-sell-top:hover{background:rgba(255,255,255,.08)}
  .mcx-rail-links{display:flex;gap:16px;font-size:13px;font-weight:700;color:var(--muted);white-space:nowrap}
  .mcx-rail-links a:hover{color:var(--ink)}
  .mcx-panel{position:absolute;inset:auto;top:calc(100% + 8px);left:0;right:0;max-height:min(74vh,640px);border-radius:16px;box-shadow:0 24px 60px rgba(10,22,40,.25);overflow:hidden}
  .mcx-phead{display:none}
  .mcx-pbody{padding:6px 18px 18px}
  .mcx-cats{grid-template-columns:repeat(4,1fr)}
  .mcx-panel-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:24px}
  .mcx-hcards{margin:0;padding:0 0 4px}
}
@media (prefers-reduced-motion:reduce){.mcx *{transition:none !important;animation:none !important}}

/* ── Plugin v1: añadidos ── */
.mcx-menu-btn:empty{width:0}
.mcx-prod-m .vd{color:var(--ink2);font-weight:700}
.mcx-store{display:flex;align-items:center;gap:12px;padding:8px;margin:0 -8px;border-radius:12px}
.mcx-store:hover,.mcx-store.is-focus{background:var(--soft)}
.mcx-store img,.mcx-store .mcx-row-ic{width:44px;height:44px;border-radius:50%;object-fit:cover;background:var(--soft)}
.mcx-store b{display:block;font-size:14px}
.mcx-store small{font-size:12px;color:var(--muted)}
.mcx-err{padding:14px;border-radius:12px;background:#fff1f1;color:#8a1c1c;font-size:13px;text-align:center}
.mcx-err button{margin-left:6px;border:0;background:none;color:var(--blue);font-weight:700;cursor:pointer}

/* Barra inferior tipo app (módulo opcional) */
.mcx-appbar{position:fixed;left:0;right:0;bottom:0;z-index:9998;display:grid;grid-template-columns:repeat(5,1fr);background:#fff;border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -6px 20px rgba(10,22,40,.06)}
.mcx-appbar a,.mcx-appbar button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:56px;border:0;background:none;font-size:10px;font-weight:700;color:var(--muted);cursor:pointer}
.mcx-appbar svg{font-size:22px}
.mcx-appbar .is-on{color:var(--blue)}
.mcx-appbar .mcx-count{top:5px;right:calc(50% - 22px)}
body.mcx-has-appbar{padding-bottom:calc(56px + env(safe-area-inset-bottom))}
@media (min-width:992px){.mcx-appbar{display:none}body.mcx-has-appbar{padding-bottom:0}}

/* iPhone con notch: el panel de búsqueda respeta el área segura */
.mcx-phead{padding-top:max(8px,env(safe-area-inset-top))}
.mcx-pbody{padding-bottom:calc(24px + env(safe-area-inset-bottom))}