/* ═══════════════════════════════════════════════════════
   ECOSMART · MARKETPLACE PÚBLICO — styles.css
   Diseño inspirado en MercadoLibre · Mobile-first PWA
   ═══════════════════════════════════════════════════════ */
:root{
  /* ── Paleta MercadoLibre ── */
  --ml-yellow:#fff159;--ml-yellow-dk:#ffe600;--ml-yellow-hover:#f5e900;
  --ml-blue:#3483fa;--ml-blue-dk:#2968c8;--ml-blue-lt:#4b8ffb;--ml-blue-10:rgba(52,131,250,.1);
  --ml-green:#00a650;--ml-green-lt:#39b54a;--ml-green-10:rgba(0,166,80,.1);
  --ml-red:#f23d4f;--ml-red-10:rgba(242,61,79,.08);
  --ml-orange:#ff7733;
  /* Superficies */
  --ml-bg:#ebebeb;--ml-bg2:#f5f5f5;
  --ml-white:#fff;--ml-card:#fff;
  /* Texto */
  --ml-text:#333;--ml-text2:#666;--ml-text3:#999;--ml-text4:#bbb;
  /* Bordes & sombras */
  --ml-border:#e6e6e6;--ml-border2:#d5d5d5;
  --ml-sh-sm:0 1px 2px 0 rgba(0,0,0,.12);--ml-sh-md:0 1px 6px 0 rgba(0,0,0,.12);
  --ml-sh-lg:0 6px 16px 0 rgba(0,0,0,.1);--ml-sh-hover:0 7px 16px 0 rgba(0,0,0,.2);
  /* Radios */
  --r-xs:4px;--r-sm:6px;--r-md:8px;--r-lg:12px;--r-full:9999px;
  /* Tipografía */
  --font:'Outfit',system-ui,-apple-system,sans-serif;
  --font-d:'Playfair Display',Georgia,serif;
  /* Transiciones */
  --tr:.18s ease;
  /* Compatibilidad con shop.css vars */
  --orange:#3483fa;--orange-h:#2968c8;--gold:#ff7733;
  --d2:var(--ml-card);--d3:var(--ml-bg2);--d4:var(--ml-bg);--d5:var(--ml-border);
  --b1:var(--ml-border);--b2:var(--ml-border);--b3:var(--ml-border2);
  --t1:var(--ml-text);--t2:var(--ml-text2);--t3:var(--ml-text3);--t4:var(--ml-text4);
  --o10:var(--ml-blue-10);--o15:rgba(52,131,250,.15);
  --g10:rgba(255,119,51,.1);
  --r10:6px;--r8:6px;--r12:8px;--r14:10px;--r16:12px;--r99:var(--r-full);
  --sh-card:var(--ml-sh-md);--sh-o:0 6px 16px rgba(52,131,250,.3);
  --display:var(--font-d);
  --hdr-h:96px;--nav-h:56px;
  --ts:cubic-bezier(.4,0,.2,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--font);background:var(--ml-bg);color:var(--ml-text);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;}
a{color:var(--ml-blue);text-decoration:none;}

/* ── HERO ─────────────────────────────────────────────── */
.hero{
  min-height:280px;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:48px 20px 56px;position:relative;
  background:linear-gradient(135deg,var(--ml-yellow-dk),var(--ml-yellow)) !important;
  transition:background 1s ease;
}
.hero-content{max-width:600px;}
.hero-icon{font-size:44px;margin-bottom:12px;animation:bounceIn .8s cubic-bezier(.34,1.56,.64,1);}
.hero-title{font-family:var(--font-d);font-size:clamp(24px,5vw,40px);font-weight:800;
  color:var(--ml-text);margin-bottom:10px;line-height:1.15;}
.hero-sub{font-size:15px;color:rgba(51,51,51,.7);margin-bottom:24px;line-height:1.6;}
.hero-cta{
  background:var(--ml-blue);color:#fff;
  padding:12px 28px;border-radius:var(--r-sm);
  font-family:var(--font);font-size:14px;font-weight:700;
  cursor:pointer;transition:all var(--tr);
  display:inline-flex;align-items:center;gap:8px;border:none;
}
.hero-cta:hover{background:var(--ml-blue-dk);}
.hero-dots{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:6px;}
.hero-dot{width:8px;height:8px;border-radius:50%;background:rgba(0,0,0,.15);cursor:pointer;transition:all var(--tr);}
.hero-dot.active{background:var(--ml-blue);width:20px;border-radius:4px;}

/* ── HEADER ───────────────────────────────────────────── */
.mkt-header{
  background:var(--ml-yellow);position:sticky;top:0;z-index:100;
}
.mkt-header-inner{
  max-width:1200px;margin:0 auto;padding:10px 16px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.mkt-brand{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.mkt-logo{width:36px;height:36px;background:var(--ml-blue);
  border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;
  color:white;font-size:16px;}
.mkt-brand-name{font-weight:800;font-size:15px;color:var(--ml-text);}
.mkt-brand-sub{font-size:9px;font-weight:700;color:var(--ml-text2);letter-spacing:1.5px;text-transform:uppercase;}
.mkt-search{position:relative;flex:1;min-width:180px;}
.mkt-search-icon{position:absolute;right:12px;top:50%;transform:translateY(-50%);
  color:var(--ml-text3);font-size:14px;z-index:1;pointer-events:none;}
.mkt-search-input{
  width:100%;height:40px;padding:0 36px 0 14px;
  border:none;border-radius:var(--r-xs);box-shadow:var(--ml-sh-sm);
  font-family:var(--font);font-size:14px;background:var(--ml-white);outline:none;
  transition:all var(--tr);
}
.mkt-search-input:focus{box-shadow:0 0 0 2px var(--ml-blue),var(--ml-sh-sm);}
.mkt-search-input::placeholder{color:var(--ml-text4);}
.mkt-actions{display:flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0;}
.mkt-user{font-size:13px;font-weight:600;color:var(--ml-text2);display:flex;align-items:center;gap:5px;}
.mkt-cart-btn{
  position:relative;width:38px;height:38px;border-radius:var(--r-sm);
  border:none;background:transparent;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;color:var(--ml-text);transition:all var(--tr);
}
.mkt-cart-btn:hover{background:rgba(0,0,0,.06);}
.mkt-cart-badge{
  position:absolute;top:-4px;right:-4px;
  background:var(--ml-red);color:#fff;
  font-size:10px;font-weight:900;padding:1px 5px;border-radius:var(--r-full);
  min-width:16px;text-align:center;
  animation:pop .3s cubic-bezier(.34,1.56,.64,1);
}

/* ── CATEGORÍAS ───────────────────────────────────────── */
.mkt-cats{background:var(--ml-white);border-bottom:1px solid var(--ml-border);box-shadow:var(--ml-sh-sm);}
.mkt-cats-inner{
  max-width:1200px;margin:0 auto;padding:8px 16px;
  display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;
}
.mkt-cats-inner::-webkit-scrollbar{display:none;}
.mkt-cat{
  padding:6px 14px;border-radius:var(--r-full);
  border:none;background:var(--ml-bg2);
  font-family:var(--font);font-size:13px;font-weight:600;
  color:var(--ml-text2);cursor:pointer;white-space:nowrap;
  transition:all var(--tr);flex-shrink:0;
}
.mkt-cat:hover{background:var(--ml-border);color:var(--ml-text);}
.mkt-cat.active{background:var(--ml-blue);color:#fff;}

/* ── MAIN ─────────────────────────────────────────────── */
.mkt-main{max-width:1200px;margin:0 auto;padding:16px;}
.mkt-results{font-size:13px;color:var(--ml-text3);margin-bottom:12px;}
.mkt-clear{background:none;border:none;color:var(--ml-blue);cursor:pointer;font-size:13px;
  font-family:var(--font);text-decoration:none;}
.mkt-clear:hover{text-decoration:underline;}

/* ── SECTION HEADERS (sectorización) ──────────────────── */
.mkt-section{margin-bottom:1.5rem;}
.mkt-section-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:.75rem;padding:0 2px;
}
.mkt-section-title{
  font-size:1.1rem;font-weight:700;color:var(--ml-text);
  display:flex;align-items:center;gap:.5rem;
}
.mkt-section-title i{font-size:.9rem;}
.mkt-section-link{font-size:.8rem;color:var(--ml-blue);font-weight:600;text-decoration:none;}
.mkt-section-link:hover{text-decoration:underline;}

/* ── GRID 4 columnas ─────────────────────────────────── */
.mkt-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}

/* ── PRODUCT CARD (estilo Amazon/ML compacto) ────────── */
.prod-card{
  background:var(--ml-card);border-radius:var(--r-sm);
  overflow:hidden;cursor:pointer;
  transition:all var(--tr);box-shadow:var(--ml-sh-sm);
  border:1px solid var(--ml-border);
  animation:fadeUp .35s ease both;
  display:flex;flex-direction:column;
}
.prod-card:hover{box-shadow:var(--ml-sh-hover);border-color:#ccc;transform:translateY(-2px);}
.prod-img-wrap{
  aspect-ratio:1;overflow:hidden;background:#fff;position:relative;
  display:flex;align-items:center;justify-content:center;
  border-bottom:1px solid var(--ml-bg2);
}
.prod-img{width:100%;height:100%;object-fit:contain;transition:transform .3s ease;padding:12px;}
.prod-card:hover .prod-img{transform:scale(1.05);}
.prod-img-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  font-size:2.5rem;color:var(--ml-text4);}
.prod-badge{
  position:absolute;top:6px;left:6px;
  background:var(--ml-green);color:#fff;
  font-size:9px;font-weight:800;padding:2px 6px;border-radius:3px;
  letter-spacing:.3px;text-transform:uppercase;
}
.prod-badge.promo{background:var(--ml-red);}
.prod-badge.eco{background:var(--ml-green);}

.prod-info{padding:8px 10px 10px;flex:1;display:flex;flex-direction:column;}
.prod-cat{font-size:9px;font-weight:600;color:var(--ml-text4);letter-spacing:.4px;text-transform:uppercase;margin-bottom:2px;}
.prod-title{font-size:12px;font-weight:400;color:var(--ml-text);margin-bottom:4px;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.prod-vendor{font-size:10px;color:var(--ml-text4);margin-bottom:4px;}
.prod-footer{display:flex;align-items:center;justify-content:space-between;margin-top:auto;}
.prod-price{font-size:18px;font-weight:400;color:var(--ml-text);letter-spacing:-.3px;}
.prod-price-sm{font-size:11px;color:var(--ml-green);font-weight:600;}
.prod-rating{font-size:10px;color:var(--ml-blue);font-weight:600;display:flex;align-items:center;gap:2px;margin-bottom:3px;}
.prod-rating i{color:#ff9900;font-size:9px;}
.prod-add-sm{
  width:28px;height:28px;border:none;border-radius:50%;
  background:var(--ml-blue);color:#fff;
  font-size:.75rem;cursor:pointer;transition:all var(--tr);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.prod-add-sm:hover{background:var(--ml-blue-dk);transform:scale(1.1);}

/* ── Envío gratis badge ──────────────────────────────── */
.prod-info .free-ship{color:var(--ml-green);font-size:10px;font-weight:600;display:flex;align-items:center;gap:3px;}

/* ── RESPONSIVE ──────────────────────────────────────── */
@media(max-width:1024px){
  .mkt-grid{grid-template-columns:repeat(3,1fr);gap:10px;}
}
@media(max-width:768px){
  .mkt-grid{grid-template-columns:repeat(2,1fr);gap:8px;}
  .prod-price{font-size:16px;}
  .prod-title{font-size:11px;}
  .prod-info{padding:6px 8px 8px;}
  .prod-img{padding:8px;}
}
@media(max-width:380px){
  .mkt-grid{gap:6px;}
  .prod-price{font-size:14px;}
}

/* ── SKELETON ─────────────────────────────────────────── */
.prod-skeleton{pointer-events:none;}
.sk-block{background:linear-gradient(90deg,var(--ml-bg2) 25%,var(--ml-white) 50%,var(--ml-bg2) 75%);
  background-size:200% 100%;animation:shimmer 1.5s infinite;}
.sk-line{height:14px;border-radius:3px;margin-bottom:8px;}
.sk-line.sk-lg{width:70%;}.sk-line.sk-sm{width:45%;}

/* ── EMPTY ────────────────────────────────────────────── */
.mkt-empty{display:flex;flex-direction:column;align-items:center;padding:56px 20px;text-align:center;}
.mkt-empty-icon{font-size:44px;color:var(--ml-text4);margin-bottom:14px;}
.mkt-empty h3{font-size:20px;font-weight:600;color:var(--ml-text2);margin-bottom:6px;}
.mkt-empty p{font-size:14px;color:var(--ml-text3);margin-bottom:16px;}

/* ── PAGINATION ───────────────────────────────────────── */
.mkt-pagination{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:24px;padding-top:16px;}
.pg-btn{width:36px;height:36px;border:1px solid var(--ml-border);background:var(--ml-white);
  border-radius:var(--r-xs);cursor:pointer;color:var(--ml-blue);font-size:13px;
  display:flex;align-items:center;justify-content:center;transition:all var(--tr);}
.pg-btn:hover:not(:disabled){background:var(--ml-blue);color:#fff;border-color:var(--ml-blue);}
.pg-btn:disabled{opacity:.3;cursor:not-allowed;}
.pg-info{font-size:13px;color:var(--ml-text3);font-weight:600;}

/* ── DRAWER CART ──────────────────────────────────────── */
.drawer-mask{
  position:fixed;inset:0;background:rgba(0,0,0,.45);
  z-index:500;opacity:0;pointer-events:none;transition:opacity .25s;
}
.drawer-mask.open{opacity:1;pointer-events:all;}
.drawer{
  position:fixed;top:0;right:0;width:380px;max-width:100vw;height:100vh;
  background:var(--ml-white);display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .3s var(--ts);
  box-shadow:var(--ml-sh-lg);z-index:501;
}
.drawer.open{transform:translateX(0);}
.drawer-head{padding:16px 20px;border-bottom:1px solid var(--ml-border);
  display:flex;align-items:center;justify-content:space-between;}
.drawer-title{font-size:18px;font-weight:700;color:var(--ml-text);
  display:flex;align-items:center;gap:8px;}
.drawer-x{width:32px;height:32px;border:none;background:transparent;
  border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;
  color:var(--ml-text3);font-size:18px;transition:all var(--tr);}
.drawer-x:hover{background:var(--ml-bg2);color:var(--ml-text);}
.drawer-body{flex:1;overflow-y:auto;padding:12px 20px;}
.drawer-empty{display:flex;flex-direction:column;align-items:center;padding:40px 0;text-align:center;color:var(--ml-text3);}
.drawer-foot{padding:14px 20px 20px;border-top:1px solid var(--ml-border);background:var(--ml-bg2);}
.drawer-total{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-size:14px;font-weight:600;color:var(--ml-text2);}
.drawer-total-val{font-size:22px;font-weight:700;color:var(--ml-text);}

/* ── CART ITEM ────────────────────────────────────────── */
.cart-item{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--ml-border);}
.cart-item:last-child{border-bottom:none;}
.cart-item-img{width:56px;height:56px;border-radius:var(--r-xs);overflow:hidden;
  background:var(--ml-bg2);flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--ml-text4);}
.cart-item-img img{width:100%;height:100%;object-fit:contain;}
.cart-item-info{flex:1;}
.cart-item-title{font-size:13px;font-weight:600;color:var(--ml-text);margin-bottom:2px;}
.cart-item-price{font-size:12px;color:var(--ml-text3);margin-bottom:6px;}
.cart-item-qty{display:flex;align-items:center;gap:8px;}
.cart-item-sub{font-size:16px;font-weight:600;color:var(--ml-text);align-self:center;flex-shrink:0;}

/* ── QTY BUTTONS ──────────────────────────────────────── */
.qty-btn{width:28px;height:28px;border:1px solid var(--ml-border2);background:var(--ml-white);
  border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-size:13px;color:var(--ml-blue);transition:all var(--tr);}
.qty-btn:hover{background:var(--ml-blue);color:#fff;border-color:var(--ml-blue);}
.qty-remove{width:28px;height:28px;border:1px solid var(--ml-border2);background:var(--ml-white);
  border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-size:11px;color:var(--ml-blue);margin-left:4px;transition:all var(--tr);}
.qty-remove:hover{background:var(--ml-red-10);color:var(--ml-red);border-color:var(--ml-red);}

/* ── MODAL ────────────────────────────────────────────── */
.modal-mask{
  position:fixed;inset:0;background:rgba(0,0,0,.5);
  z-index:1000;display:flex;align-items:flex-end;justify-content:center;padding:0;
  opacity:0;pointer-events:none;transition:opacity .25s;
}
@media(min-width:520px){.modal-mask{align-items:center;padding:20px;}}
.modal-mask.open{opacity:1;pointer-events:all;}
.modal-box{
  background:var(--ml-white);width:100%;max-width:500px;
  max-height:90vh;overflow-y:auto;position:relative;
  transform:translateY(100%);transition:transform .3s var(--ts);
  border-radius:var(--r-lg) var(--r-lg) 0 0;
}
@media(min-width:520px){.modal-box{border-radius:var(--r-lg);transform:scale(.94) translateY(12px);}
  .modal-mask.open .modal-box{transform:scale(1) translateY(0);}}
.modal-mask.open .modal-box{transform:translateY(0);}
.modal-x{position:absolute;top:12px;right:12px;z-index:10;
  width:32px;height:32px;border:none;background:var(--ml-bg2);
  border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;
  color:var(--ml-text3);font-size:14px;transition:all var(--tr);}
.modal-x:hover{background:var(--ml-border);color:var(--ml-text);}
.modal-img-wrap{aspect-ratio:4/3;overflow:hidden;background:var(--ml-bg2);display:flex;align-items:center;justify-content:center;}
.modal-img{width:100%;height:100%;object-fit:contain;padding:12px;}
.modal-img-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:52px;color:var(--ml-text4);}
.modal-body{padding:20px;}
.modal-cat{font-size:10px;font-weight:700;color:var(--ml-text4);letter-spacing:1px;text-transform:uppercase;margin-bottom:6px;}
.modal-title{font-size:20px;font-weight:600;color:var(--ml-text);margin-bottom:6px;line-height:1.3;}
.modal-vendor{font-size:12px;color:var(--ml-text3);margin-bottom:12px;}
.modal-price{font-size:32px;font-weight:400;color:var(--ml-text);margin-bottom:4px;letter-spacing:-.5px;}
.modal-desc{font-size:14px;color:var(--ml-text2);line-height:1.7;margin-bottom:14px;}
.modal-stock{font-size:12px;font-weight:600;padding:6px 10px;border-radius:var(--r-xs);
  background:var(--ml-green-10);color:var(--ml-green);display:inline-flex;align-items:center;gap:5px;margin-bottom:14px;}
.modal-stock.low{background:rgba(255,119,51,.1);color:var(--ml-orange);}
.modal-qty-row{display:flex;align-items:center;gap:12px;}
.modal-qty-val{font-size:18px;font-weight:700;color:var(--ml-text);min-width:32px;text-align:center;}

/* ── CHECKOUT ─────────────────────────────────────────── */
.checkout-wallet{background:var(--ml-bg2);border:1px solid var(--ml-border);border-radius:var(--r-md);
  padding:16px;margin-bottom:16px;text-align:center;}
.checkout-wallet-label{font-size:11px;font-weight:700;color:var(--ml-text3);letter-spacing:.8px;text-transform:uppercase;margin-bottom:4px;}
.checkout-wallet-saldo{font-size:28px;font-weight:700;color:var(--ml-green);}
.checkout-wallet-total{font-size:13px;color:var(--ml-text3);margin-top:4px;}
.checkout-insuficiente{margin-top:8px;font-size:12px;font-weight:700;color:var(--ml-red);
  background:var(--ml-red-10);padding:6px 12px;border-radius:var(--r-xs);}
.checkout-items{background:var(--ml-bg2);border-radius:var(--r-xs);padding:12px;margin-top:12px;}
.checkout-item{display:flex;justify-content:space-between;font-size:13px;color:var(--ml-text2);
  padding:4px 0;border-bottom:1px solid var(--ml-border);}
.checkout-item:last-child{border-bottom:none;}
.checkout-total-row{display:flex;justify-content:space-between;padding-top:10px;
  font-weight:700;font-size:16px;color:var(--ml-text);}

/* ── FORM ─────────────────────────────────────────────── */
.fld{margin-bottom:0;}
.fld label{display:block;font-size:11px;font-weight:700;color:var(--ml-text3);
  letter-spacing:.5px;text-transform:uppercase;margin-bottom:4px;}
.fld input,.fld textarea{width:100%;padding:10px 12px;border:1px solid var(--ml-border2);
  border-radius:var(--r-sm);font-family:var(--font);font-size:14px;color:var(--ml-text);
  background:var(--ml-white);outline:none;transition:all var(--tr);}
.fld input:focus,.fld textarea:focus{border-color:var(--ml-blue);
  box-shadow:0 0 0 1px var(--ml-blue);}
.fld textarea{resize:none;}

/* ── BUTTONS ──────────────────────────────────────────── */
.mkt-btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:11px 20px;border-radius:var(--r-sm);
  font-family:var(--font);font-size:14px;font-weight:600;
  cursor:pointer;border:none;transition:all var(--tr);
}
.mkt-btn-primary{background:var(--ml-blue);color:#fff;}
.mkt-btn-primary:hover{background:var(--ml-blue-dk);}
.mkt-btn-primary:disabled{opacity:.4;cursor:not-allowed;}
.mkt-btn-ghost{background:transparent;color:var(--ml-blue);border:1px solid var(--ml-blue);}
.mkt-btn-ghost:hover{background:var(--ml-blue-10);}
.w-full{width:100%;justify-content:center;}

/* ── TOAST ────────────────────────────────────────────── */
#toast-container{position:fixed;bottom:20px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:8px;pointer-events:none;}
.toast-notif{
  background:var(--ml-white);border-radius:var(--r-sm);padding:12px 16px;
  box-shadow:var(--ml-sh-lg);border-left:4px solid;
  display:flex;align-items:center;gap:9px;min-width:240px;
  font-family:var(--font);font-size:13px;font-weight:600;pointer-events:all;
  animation:toastIn .35s cubic-bezier(.34,1.56,.64,1);
}
.toast-success{border-left-color:var(--ml-green);}
.toast-error{border-left-color:var(--ml-red);}
.toast-success i{color:var(--ml-green);}
.toast-error i{color:var(--ml-red);}

/* ── SPINNER ──────────────────────────────────────────── */
.spinner{width:28px;height:28px;border:3px solid var(--ml-border);border-top-color:var(--ml-blue);
  border-radius:50%;animation:spin .8s linear infinite;}

/* ── ANIMATIONS ───────────────────────────────────────── */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
@keyframes bounceIn{from{opacity:0;transform:scale(.5);}to{opacity:1;transform:scale(1);}}
@keyframes shimmer{from{background-position:200% 0;}to{background-position:-200% 0;}}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes pop{from{transform:scale(0);}to{transform:scale(1);}}
@keyframes toastIn{from{opacity:0;transform:translateX(40px);}to{opacity:1;transform:translateX(0);}}
@keyframes tsPulse{0%,100%{box-shadow:0 0 0 0 rgba(52,131,250,.4);}50%{box-shadow:0 0 0 8px rgba(52,131,250,0);}}
@keyframes fabIn{from{transform:translateX(-50%) translateY(20px);opacity:0}to{transform:translateX(-50%) translateY(0);opacity:1}}

/* ── RESPONSIVE GLOBAL ────────────────────────────────── */
@media(max-width:768px){
  .mkt-header-inner{padding:8px 12px;gap:8px;}
  .mkt-search{max-width:none;order:3;flex-basis:100%;min-width:0;}
  .mkt-brand-sub{display:none;}
  .drawer{width:100%;}
  .hero{min-height:220px;padding:36px 16px 48px;}
  .mkt-main{padding:10px;}
}

/* ═══ MOSAICO DESTACADOS (8 productos) ════════════════ */
.featured-section{
  margin:0 0 26px;padding:18px 16px 16px;
  background:linear-gradient(135deg,rgba(255,222,109,.18) 0%,rgba(39,174,96,.08) 100%);
  border:1px solid rgba(201,151,28,.25);border-radius:var(--r-md);
  position:relative;overflow:hidden;
}
.featured-section::before{
  content:'';position:absolute;top:-40px;right:-40px;width:160px;height:160px;
  background:radial-gradient(circle,rgba(255,222,109,.35),transparent 70%);
  border-radius:50%;pointer-events:none;
}
.featured-header{display:flex;align-items:baseline;gap:10px;margin-bottom:14px;flex-wrap:wrap;position:relative;z-index:1;}
.featured-title{font-size:1.15rem;font-weight:800;color:#1a3317;letter-spacing:-.3px;margin:0;display:inline-flex;align-items:center;gap:8px;}
.featured-title i{color:#c9971c;font-size:1rem;}
.featured-sub{font-size:.78rem;color:var(--ml-text3);font-weight:500;}
.featured-grid{margin-bottom:0;position:relative;z-index:1;}
.featured-card{border:1.5px solid rgba(201,151,28,.4);box-shadow:0 2px 8px rgba(201,151,28,.1);}
.featured-card:hover{border-color:#c9971c;box-shadow:0 6px 20px rgba(201,151,28,.25);}
.rest-badge.featured-badge{
  background:linear-gradient(135deg,#c9971c,#e6b835);color:#fff;
  font-weight:800;letter-spacing:.2px;
}
.rest-badge.featured-badge i{font-size:.55rem;margin-right:1px;}
@media(max-width:768px){
  .featured-section{padding:14px 12px 12px;margin-bottom:18px;}
  .featured-title{font-size:1rem;}
}

/* ═══ REST-GRID: GRID 4→2 col ═══════════════════════ */
.rest-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;margin-bottom:1.5rem;
}
@media(max-width:1024px){.rest-grid{grid-template-columns:repeat(3,1fr);gap:10px;}}
@media(max-width:768px){.rest-grid{grid-template-columns:repeat(2,1fr);gap:8px;}}

.rest-card{
  background:var(--ml-card);border-radius:var(--r-sm);
  border:1px solid var(--ml-border);overflow:hidden;cursor:pointer;
  transition:all var(--tr);box-shadow:var(--ml-sh-sm);
  animation:fadeUp .35s ease both;
  display:flex;flex-direction:column;
}
.rest-card:hover{transform:translateY(-2px);box-shadow:var(--ml-sh-hover);border-color:#ccc;}
.rest-banner{aspect-ratio:1;position:relative;background:#f5f5f5;overflow:hidden;
  display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--ml-bg2);}
.rest-banner-img{width:100%;height:100%;object-fit:contain;padding:12px;transition:transform .3s ease;}
.rest-card:hover .rest-banner-img{transform:scale(1.05);}
.rest-banner-emoji{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  font-size:2.5rem;background:#fff;color:var(--ml-text4);}
.rest-banner-badge{position:absolute;top:6px;left:6px;display:flex;flex-direction:column;gap:.2rem;z-index:2;}
.rest-badge{display:inline-flex;align-items:center;gap:.2rem;
  color:#fff;font-size:.6rem;font-weight:700;padding:2px 6px;border-radius:3px;}
.rest-badge.promo{background:var(--ml-red);}
.rest-badge.gratis{background:var(--ml-green);}
.rest-info{padding:8px 10px 10px;flex:1;display:flex;flex-direction:column;}
.rest-name{font-size:12px;font-weight:400;color:var(--ml-text);margin-bottom:3px;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.rest-meta{display:flex;align-items:center;gap:.4rem;font-size:.65rem;color:var(--ml-text3);flex-wrap:wrap;margin-bottom:4px;}
.rest-meta-item{display:flex;align-items:center;gap:.15rem;}
.rest-rating i{color:#ff9900;font-size:.55rem;}
.rest-rating span{font-weight:700;color:var(--ml-text2);}
.rest-footer{display:flex;align-items:center;justify-content:space-between;margin-top:auto;}
.rest-price{font-size:17px;font-weight:400;color:var(--ml-text);letter-spacing:-.3px;}
.menu-item-add{
  width:28px;height:28px;border-radius:50%;
  background:var(--ml-blue);color:#fff;border:none;
  display:flex;align-items:center;justify-content:center;
  font-size:.75rem;cursor:pointer;transition:all var(--tr);flex-shrink:0;
}
.menu-item-add:hover{background:var(--ml-blue-dk);transform:scale(1.1);}
/* skeleton */
.rest-grid.skeleton-grid .rest-card{pointer-events:none;}
.skeleton-card{pointer-events:none;background:var(--ml-white);border:1px solid var(--ml-border);border-radius:var(--r-sm);overflow:hidden;}

@media(max-width:768px){
  .rest-info{padding:6px 8px 8px;}
  .rest-name{font-size:11px;}
  .rest-price{font-size:15px;}
  .rest-meta{font-size:.6rem;}
  .rest-badge{font-size:.55rem;}
  .menu-item-add{width:26px;height:26px;font-size:.7rem;}
}