:root {
      --red:#cc1f1f; --red-dark:#a81818; --yellow:#f5c400; --yellow-dk:#d4a900;
      --bg:#f5f5f5; --white:#ffffff; --gray-1:#f0f0f0; --gray-2:#e0e0e0;
      --gray-3:#9e9e9e; --gray-4:#616161; --text:#212121; --text-sm:#424242;
      --green:#2e7d32; --blue:#1565c0; --radius:6px;
      --shadow:0 2px 8px rgba(0,0,0,.1); --shadow-h:0 4px 16px rgba(0,0,0,.15);
    }
    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth}
    body{background:var(--bg);color:var(--text);font-family:'Inter',sans-serif;font-size:14px}
    a{text-decoration:none;color:inherit}

    /* ══ LOGIN OVERLAY ══ */
    .login-overlay{
      position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:3000;
      display:flex;align-items:center;justify-content:center;
      backdrop-filter:blur(4px);
    }
    .login-overlay.hidden{display:none}
    .login-box{
      background:var(--white);border-radius:12px;width:420px;max-width:95vw;
      box-shadow:0 20px 60px rgba(0,0,0,.35);overflow:hidden;
    }
    .login-head{
      background:linear-gradient(135deg,#0d1120,#1a1a2e);
      padding:28px 32px;text-align:center;
    }
    .login-head img{height:54px;margin-bottom:14px;display:block;margin-left:auto;margin-right:auto}
    .login-head-title{color:var(--yellow);font-size:16px;font-weight:700;letter-spacing:.5px}
    .login-head-sub{color:rgba(255,255,255,.6);font-size:12px;margin-top:4px}
    .login-body{padding:28px 32px}
    .login-tabs{display:flex;gap:0;margin-bottom:24px;border:1px solid var(--gray-2);border-radius:var(--radius);overflow:hidden}
    .ltab{
      flex:1;padding:10px;text-align:center;font-size:13px;font-weight:600;cursor:pointer;
      background:var(--gray-1);color:var(--gray-4);transition:all .2s;border:none;font-family:'Inter',sans-serif;
    }
    .ltab.active{background:var(--red);color:#fff}
    .lfg{margin-bottom:16px}
    .lfg label{display:block;font-size:12px;font-weight:600;color:var(--gray-4);margin-bottom:5px;text-transform:uppercase;letter-spacing:.5px}
    .lfg input,.lfg select{
      width:100%;border:1.5px solid var(--gray-2);border-radius:var(--radius);
      padding:10px 12px;font-size:14px;font-family:'Inter',sans-serif;
      color:var(--text);transition:border-color .2s;outline:none;
    }
    .lfg input:focus,.lfg select:focus{border-color:var(--red)}
    .login-err{background:#fff5f5;border:1px solid #fcc;border-radius:var(--radius);padding:10px 14px;font-size:13px;color:var(--red);margin-bottom:14px;display:none}
    .btn-login{
      width:100%;background:var(--red);color:#fff;border:none;padding:13px;
      border-radius:var(--radius);font-size:15px;font-weight:700;cursor:pointer;
      transition:background .2s;font-family:'Inter',sans-serif;margin-bottom:12px;
    }
    .btn-login:hover{background:var(--red-dark)}
    .login-hint{font-size:12px;color:var(--gray-3);text-align:center;line-height:1.6}
    .login-hint b{color:var(--gray-4)}
    .login-guest{
      width:100%;background:none;border:1.5px solid var(--gray-2);color:var(--gray-4);
      padding:10px;border-radius:var(--radius);font-size:13px;font-weight:600;cursor:pointer;
      transition:all .2s;font-family:'Inter',sans-serif;
    }
    .login-guest:hover{border-color:var(--text);color:var(--text)}

    /* ══ TOPBAR ══ */
    .topbar{background:var(--red);color:#fff;font-size:12px;padding:6px 24px;display:flex;justify-content:space-between;align-items:center}
    .topbar-links{display:flex;gap:20px}
    .topbar-links a{color:rgba(255,255,255,.88);transition:color .15s}
    .topbar-links a:hover{color:#fff}

    /* ══ HEADER ══ */
    header{background:var(--white);box-shadow:0 2px 6px rgba(0,0,0,.08);position:sticky;top:0;z-index:100}
    .header-main{display:flex;align-items:center;gap:16px;padding:12px 24px;max-width:1280px;margin:0 auto}
    .logo-wrap{flex-shrink:0}
    .logo-wrap img{height:50px;width:auto;display:block}
    .search-bar{flex:1;display:flex;border:2px solid var(--red);border-radius:var(--radius);overflow:hidden;max-width:680px}
    .search-bar input{flex:1;border:none;outline:none;padding:10px 16px;font-size:14px;font-family:'Inter',sans-serif;color:var(--text)}
    .search-bar select{border:none;border-left:1px solid var(--gray-2);padding:0 12px;font-size:13px;color:var(--text);background:var(--gray-1);cursor:pointer;outline:none}
    .btn-search{background:var(--red);color:#fff;border:none;padding:0 20px;cursor:pointer;font-size:18px;transition:background .2s}
    .btn-search:hover{background:var(--red-dark)}
    .header-actions{display:flex;gap:8px;align-items:center;flex-shrink:0}
    .action-btn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 14px;border-radius:var(--radius);cursor:pointer;color:var(--text);transition:background .15s;background:none;border:none;font-family:'Inter',sans-serif;position:relative}
    .action-btn:hover{background:var(--gray-1)}
    .action-btn .icon{font-size:22px}
    .action-btn .label{font-size:11px;color:var(--gray-4)}
    .action-btn .badge{position:absolute;top:4px;right:8px;background:var(--red);color:#fff;border-radius:50%;width:18px;height:18px;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center}
    .btn-wa-header{background:#25d366;color:#fff;border:none;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,transform .15s;flex-shrink:0;text-decoration:none}
    .btn-wa-header:hover{background:#1ea355;transform:scale(1.1)}

    /* User pill in header */
    .user-pill{
      display:flex;align-items:center;gap:8px;padding:7px 14px;
      border-radius:30px;border:1.5px solid var(--gray-2);cursor:pointer;
      font-size:13px;font-weight:600;color:var(--text);background:var(--white);
      transition:all .2s;position:relative;
    }
    .user-pill:hover{border-color:var(--red);color:var(--red)}
    .user-pill .role-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
    .role-dot.admin{background:#9c27b0}
    .role-dot.vendedor{background:var(--blue)}
    .role-dot.visitante{background:var(--green)}

    /* ══ CAT NAV ══ */
    .cat-nav{background:var(--white);border-top:1px solid var(--gray-2);border-bottom:2px solid var(--yellow);position:relative}
    .cat-nav-inner{max-width:1280px;margin:0 auto;display:flex;align-items:center;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory}
    .cat-nav-inner::-webkit-scrollbar{display:none}
    .cat-link{display:flex;align-items:center;gap:6px;padding:10px 18px;white-space:nowrap;font-size:13px;font-weight:600;color:var(--text-sm);border-right:1px solid var(--gray-1);transition:all .15s;cursor:pointer;scroll-snap-align:start;flex-shrink:0}
    .cat-link:hover,.cat-link.active{background:var(--red);color:#fff}
    /* Degradado derecho — indica que hay más items */
    .cat-nav::after{content:'';position:absolute;top:0;right:0;width:40px;height:100%;background:linear-gradient(to left,rgba(255,255,255,.95),transparent);pointer-events:none;display:none}

    /* ══ MAIN ══ */
    .page-wrap{max-width:1280px;margin:0 auto;padding:20px 24px}

    /* ══ HERO ══ */
    .hero-section{display:grid;grid-template-columns:1fr 280px;gap:16px;margin-bottom:24px}
    .hero-banner{border-radius:var(--radius);overflow:hidden;position:relative;background:linear-gradient(135deg,#0d1120,#1a1a2e,#0f3460);min-height:320px;display:flex;align-items:center;padding:40px 48px}
    .hero-bg-pattern{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle at 70% 50%,rgba(245,196,0,.15) 0%,transparent 60%),linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:auto,40px 40px,40px 40px}
    .hero-bolt{position:absolute;right:60px;top:50%;transform:translateY(-50%);font-size:160px;opacity:.08;pointer-events:none}
    .hero-text{position:relative}
    .hero-eyebrow{display:inline-block;background:var(--yellow);color:#000;font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase;padding:4px 12px;border-radius:2px;margin-bottom:14px}
    .hero-title{font-size:36px;font-weight:800;color:#fff;line-height:1.1;margin-bottom:12px}
    .hero-title span{color:var(--yellow)}
    .hero-sub{font-size:14px;color:rgba(255,255,255,.72);margin-bottom:24px;line-height:1.55;max-width:400px}
    .btn-hero-y{background:var(--yellow);color:#000;border:none;padding:12px 28px;border-radius:var(--radius);font-size:14px;font-weight:700;cursor:pointer;display:inline-block;transition:all .2s;margin-right:10px}
    .btn-hero-y:hover{background:var(--yellow-dk);transform:translateY(-1px)}
    .btn-hero-r{background:var(--red);color:#fff;border:none;padding:12px 28px;border-radius:var(--radius);font-size:14px;font-weight:700;cursor:pointer;display:inline-block;transition:all .2s}
    .btn-hero-r:hover{background:var(--red-dark);transform:translateY(-1px)}
    .hero-side{display:flex;flex-direction:column;gap:8px}
    .side-banner{flex:1;border-radius:var(--radius);padding:20px;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden;cursor:pointer;transition:transform .2s}
    .side-banner:hover{transform:scale(1.01)}
    .side-banner-1{background:linear-gradient(135deg,#cc1f1f,#8b0000)}
    .side-banner-2{background:linear-gradient(135deg,#1a472a,#2d6a4f)}
    .side-banner .sb-icon{font-size:40px;position:absolute;top:16px;right:16px;opacity:.5}
    .side-banner .sb-label{font-size:11px;color:rgba(255,255,255,.75);text-transform:uppercase;letter-spacing:1px;margin-bottom:4px}
    .side-banner .sb-title{font-size:17px;font-weight:700;color:#fff;line-height:1.2}
    .side-banner .sb-cta{margin-top:10px;font-size:12px;color:var(--yellow);font-weight:600}

    /* ══ QUICK CATS ══ */
    .quick-cats{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:24px}
    .qcat{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 8px;text-align:center;cursor:pointer;transition:all .2s;border:2px solid transparent}
    .qcat:hover{border-color:var(--yellow);box-shadow:var(--shadow-h);transform:translateY(-2px)}
    .qcat-icon{font-size:32px;margin-bottom:8px;display:block}
    .qcat-name{font-size:12px;font-weight:600;color:var(--text);line-height:1.3}

    /* ══ SECTION HEADER ══ */
    .sec-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
    .sec-title{font-size:20px;font-weight:800;color:var(--text);display:flex;align-items:center;gap:10px}
    .sec-title::before{content:'';display:block;width:4px;height:22px;background:linear-gradient(180deg,var(--yellow),var(--red));border-radius:2px}

    /* ══ PRODUCT GRID ══ */
    .prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;margin-bottom:32px}
    .prod-card{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;transition:box-shadow .2s,transform .2s;display:flex;flex-direction:column;border:1px solid transparent}
    .prod-card:hover{box-shadow:var(--shadow-h);transform:translateY(-3px);border-color:var(--gray-2)}
    .prod-card.agotado{opacity:.6}
    .prod-img{height:170px;display:flex;align-items:center;justify-content:center;background:#fafafa;font-size:70px;position:relative;border-bottom:1px solid var(--gray-1)}
    .badge-oferta{position:absolute;top:10px;left:10px;background:var(--red);color:#fff;font-size:11px;font-weight:700;padding:3px 8px;border-radius:3px}
    .badge-nuevo{position:absolute;top:10px;left:10px;background:var(--green);color:#fff;font-size:11px;font-weight:700;padding:3px 8px;border-radius:3px}
    .badge-agotado{position:absolute;top:10px;left:10px;background:#555;color:#fff;font-size:11px;font-weight:700;padding:3px 8px;border-radius:3px}
    /* Edit overlay for seller/admin */
    .prod-edit-btn{position:absolute;bottom:8px;right:8px;background:rgba(0,0,0,.65);color:#fff;border:none;border-radius:4px;padding:5px 10px;font-size:11px;font-weight:600;cursor:pointer;display:none;gap:4px;align-items:center}
    .prod-card:hover .prod-edit-btn{display:flex}
    .prod-body{padding:12px;flex:1;display:flex;flex-direction:column}
    .prod-brand{font-size:11px;color:var(--gray-3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
    .prod-name{font-size:13px;font-weight:600;color:var(--text);line-height:1.35;margin-bottom:6px;flex:1}
    .prod-stars{color:var(--yellow);font-size:12px;margin-bottom:8px}
    .prod-price-old{font-size:12px;color:var(--gray-3);text-decoration:line-through}
    .prod-price{font-size:20px;font-weight:800;color:var(--red);line-height:1}
    .prod-discount{display:inline-block;background:#fff3cd;color:#856404;font-size:11px;font-weight:700;padding:2px 7px;border-radius:3px;margin-top:4px}
    .prod-shipping{font-size:11px;color:var(--green);font-weight:600;margin-top:6px}
    .prod-footer{padding:10px 12px;border-top:1px solid var(--gray-1);display:flex;gap:8px}
    .btn-cart-prod{flex:1;background:var(--yellow);color:#000;border:none;padding:9px;border-radius:var(--radius);font-size:13px;font-weight:700;cursor:pointer;transition:background .2s}
    .btn-cart-prod:hover{background:var(--yellow-dk)}
    .btn-cart-prod:disabled{background:var(--gray-2);color:var(--gray-3);cursor:not-allowed}
    .btn-wish{background:none;border:1px solid var(--gray-2);padding:9px 12px;border-radius:var(--radius);cursor:pointer;font-size:16px;transition:all .2s}
    .btn-wish:hover{border-color:var(--red);color:var(--red)}

    /* ══ FILTER ROW ══ */
    .filter-row{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
    .flt{background:var(--white);border:1.5px solid var(--gray-2);color:var(--text-sm);padding:6px 16px;border-radius:20px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s}
    .flt.active,.flt:hover{border-color:var(--red);color:var(--red);background:#fff5f5}

    /* ══ PROMO BANNER ══ */
    .promo-banner{background:linear-gradient(90deg,var(--yellow),#ffd200,var(--yellow));border-radius:var(--radius);padding:28px 40px;display:flex;justify-content:space-between;align-items:center;margin-bottom:32px;gap:24px}
    .promo-eyebrow{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--red);margin-bottom:6px}
    .promo-title{font-size:26px;font-weight:800;color:#000;line-height:1.1}
    .promo-sub{font-size:14px;color:#333;margin-top:6px}
    .promo-actions{display:flex;gap:12px;flex-shrink:0}
    .btn-promo-dark{background:#000;color:var(--yellow);border:none;padding:12px 28px;border-radius:var(--radius);font-size:14px;font-weight:700;cursor:pointer;transition:all .2s;font-family:'Inter',sans-serif}
    .btn-promo-wa{background:#25d366;color:#fff;border:none;padding:12px 24px;border-radius:var(--radius);font-size:14px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:7px;transition:background .2s;font-family:'Inter',sans-serif}
    .btn-promo-wa:hover{background:#1ea355}

    /* ══ ADVISORS ══ */
    .advisors-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:32px}
    .adv-card{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;display:flex;align-items:flex-start;gap:16px;border-top:3px solid var(--yellow);transition:box-shadow .2s}
    .adv-card:hover{box-shadow:var(--shadow-h)}
    .adv-avatar{width:60px;height:60px;border-radius:50%;background:var(--gray-1);display:flex;align-items:center;justify-content:center;font-size:28px;flex-shrink:0;border:2px solid var(--yellow)}
    .adv-name{font-size:15px;font-weight:700;color:var(--text)}
    .adv-role{font-size:12px;color:var(--red);font-weight:600;margin-bottom:6px}
    .adv-bio{font-size:12px;color:var(--gray-4);line-height:1.5;margin-bottom:12px}
    .btn-adv-wa{display:inline-flex;align-items:center;gap:6px;background:#25d366;color:#fff;padding:8px 14px;border-radius:var(--radius);font-size:12px;font-weight:700;border:none;cursor:pointer;transition:background .2s;font-family:'Inter',sans-serif}
    .btn-adv-wa:hover{background:#1ea355}

    /* ══ CONTACT ══ */
    .contact-grid{display:grid;grid-template-columns:340px 1fr;gap:24px;margin-bottom:32px}
    .contact-sidebar{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
    .contact-sidebar-head{background:var(--red);padding:20px;display:flex;align-items:center;gap:12px}
    .contact-sidebar-head img{height:40px}
    .contact-sidebar-title{color:#fff;font-size:15px;font-weight:700}
    .contact-sidebar-sub{color:rgba(255,255,255,.8);font-size:12px}
    .contact-info-list{padding:20px}
    .ci-item{display:flex;align-items:flex-start;gap:14px;padding:12px 0;border-bottom:1px solid var(--gray-1)}
    .ci-item:last-child{border-bottom:none}
    .ci-icon{font-size:22px;flex-shrink:0;margin-top:1px}
    .ci-label{font-size:11px;color:var(--gray-3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px}
    .ci-val{font-size:14px;font-weight:600;color:var(--text);line-height:1.4}
    .btn-wa-big{margin:0 20px 20px;display:flex;align-items:center;justify-content:center;gap:8px;background:#25d366;color:#fff;padding:13px;border-radius:var(--radius);font-size:14px;font-weight:700;cursor:pointer;border:none;width:calc(100% - 40px);transition:background .2s;font-family:'Inter',sans-serif}
    .btn-wa-big:hover{background:#1ea355}
    .contact-form-card{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);padding:28px}
    .cf-title{font-size:18px;font-weight:700;margin-bottom:20px;color:var(--text)}
    .form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
    .fg{margin-bottom:14px}
    .fg label{display:block;font-size:12px;font-weight:600;color:var(--gray-4);margin-bottom:5px;text-transform:uppercase;letter-spacing:.5px}
    .fg input,.fg select,.fg textarea{width:100%;border:1.5px solid var(--gray-2);border-radius:var(--radius);padding:10px 12px;font-size:14px;font-family:'Inter',sans-serif;color:var(--text);transition:border-color .2s;outline:none;background:#fff}
    .fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--red)}
    .fg textarea{height:110px;resize:vertical}
    .field-err{font-size:12px;color:var(--red);margin-top:4px;min-height:16px}
    .fg input.invalid,.fg select.invalid,.fg textarea.invalid{border-color:var(--red);background:#fff8f8}
    .btn-submit{background:var(--red);color:#fff;border:none;padding:13px 32px;border-radius:var(--radius);font-size:14px;font-weight:700;cursor:pointer;width:100%;transition:background .2s;font-family:'Inter',sans-serif}
    .btn-submit:hover{background:var(--red-dark)}

    /* ══ CART DRAWER ══ */
    .cart-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:999;opacity:0;pointer-events:none;transition:opacity .3s}
    .cart-overlay.open{opacity:1;pointer-events:all}
    .cart-drawer{position:fixed;top:0;right:0;width:400px;height:100vh;background:var(--white);z-index:1000;box-shadow:-4px 0 20px rgba(0,0,0,.15);transform:translateX(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column}
    .cart-drawer.open{transform:translateX(0)}
    .cart-head{background:var(--red);padding:16px 20px;display:flex;align-items:center;justify-content:space-between}
    .cart-head-title{color:#fff;font-size:16px;font-weight:700}
    .btn-close{background:none;border:none;color:rgba(255,255,255,.8);font-size:22px;cursor:pointer}
    .btn-close:hover{color:#fff}
    .cart-body{flex:1;overflow-y:auto;padding:16px}
    .cart-empty-state{text-align:center;padding:60px 20px;color:var(--gray-3)}
    .cart-empty-state .cei{font-size:50px;margin-bottom:12px;display:block}
    .cart-item{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--gray-1)}
    .ci-pic{font-size:36px;flex-shrink:0}
    .ci-detail{flex:1}
    .ci-name{font-size:13px;font-weight:600;color:var(--text);line-height:1.3}
    .ci-price-line{font-size:15px;font-weight:800;color:var(--red);margin-top:3px}
    .ci-qty{display:flex;align-items:center;gap:6px;margin-top:6px}
    .qb{width:26px;height:26px;border:1.5px solid var(--gray-2);background:var(--white);border-radius:4px;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;transition:all .15s}
    .qb:hover{border-color:var(--red);color:var(--red)}
    .qn{font-size:13px;font-weight:700;width:22px;text-align:center}
    .btn-del{background:none;border:none;color:var(--gray-3);cursor:pointer;font-size:16px;transition:color .15s}
    .btn-del:hover{color:var(--red)}
    .cart-foot{padding:16px;border-top:1px solid var(--gray-2)}
    .cart-subtotal{display:flex;justify-content:space-between;font-weight:700;font-size:16px;margin-bottom:14px}
    .cart-subtotal span:last-child{color:var(--red);font-size:20px}
    .btn-comprar{width:100%;background:var(--red);color:#fff;border:none;padding:14px;border-radius:var(--radius);font-size:15px;font-weight:700;cursor:pointer;margin-bottom:8px;transition:background .2s;font-family:'Inter',sans-serif}
    .btn-comprar:hover{background:var(--red-dark)}
    .btn-wa-cart{width:100%;background:#25d366;color:#fff;border:none;padding:12px;border-radius:var(--radius);font-size:14px;font-weight:700;cursor:pointer;transition:background .2s;display:flex;align-items:center;justify-content:center;gap:6px;font-family:'Inter',sans-serif}
    .btn-wa-cart:hover{background:#1ea355}

    /* ══ ADMIN / SELLER PANEL ══ */
    .panel-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:2000;display:none;align-items:flex-start;justify-content:center;padding:40px 20px;overflow-y:auto;backdrop-filter:blur(3px)}
    .panel-overlay.open{display:flex}
    .panel-box{background:var(--white);border-radius:12px;width:100%;max-width:860px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.3)}
    .panel-head{display:flex;align-items:center;justify-content:space-between;padding:20px 28px;border-bottom:1px solid var(--gray-2)}
    .panel-title{font-size:20px;font-weight:800;color:var(--text)}
    .panel-tabs{display:flex;gap:4px;padding:0 28px;background:var(--gray-1);border-bottom:1px solid var(--gray-2)}
    .ptab{padding:12px 20px;font-size:13px;font-weight:600;cursor:pointer;color:var(--gray-4);border-bottom:3px solid transparent;transition:all .2s;background:none;border-left:none;border-right:none;border-top:none;font-family:'Inter',sans-serif}
    .ptab.active{color:var(--red);border-bottom-color:var(--red)}
    .panel-body{padding:28px}
    .tab-content{display:none}
    .tab-content.active{display:block}

    /* Stats row */
    .stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px}
    .stat-card{background:var(--gray-1);border-radius:var(--radius);padding:16px;text-align:center}
    .stat-num{font-size:28px;font-weight:800;color:var(--red)}
    .stat-label{font-size:12px;color:var(--gray-4);margin-top:4px}

    /* Users table */
    .data-table{width:100%;border-collapse:collapse;font-size:13px}
    .data-table th{background:var(--gray-1);padding:10px 14px;text-align:left;font-weight:700;color:var(--gray-4);font-size:12px;text-transform:uppercase;letter-spacing:.5px}
    .data-table td{padding:12px 14px;border-bottom:1px solid var(--gray-1);vertical-align:middle}
    .data-table tr:hover td{background:#fafafa}
    .role-badge{display:inline-block;padding:3px 10px;border-radius:12px;font-size:11px;font-weight:700}
    .role-badge.admin{background:#f3e5f5;color:#7b1fa2}
    .role-badge.vendedor{background:#e3f2fd;color:#1565c0}
    .role-badge.visitante{background:#e8f5e9;color:#2e7d32}
    .btn-sm{background:none;border:1px solid var(--gray-2);padding:5px 12px;border-radius:4px;font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;font-family:'Inter',sans-serif}
    .btn-sm:hover{border-color:var(--red);color:var(--red)}
    .btn-sm.danger:hover{border-color:#c62828;color:#c62828}

    /* Product editor */
    .prod-edit-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
    .lfg-inline{display:grid;grid-template-columns:1fr 1fr;gap:10px}
    .btn-add-prod{background:var(--green);color:#fff;border:none;padding:11px 22px;border-radius:var(--radius);font-size:13px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:6px;transition:background .2s;font-family:'Inter',sans-serif;margin-bottom:20px}
    .btn-add-prod:hover{background:#1b5e20}

    /* Product edit modal */
    .edit-modal{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:3000;display:none;align-items:center;justify-content:center}
    .edit-modal.open{display:flex}
    .edit-modal-box{background:var(--white);border-radius:10px;width:500px;max-width:95vw;padding:28px;box-shadow:0 20px 60px rgba(0,0,0,.3);max-height:90vh;overflow-y:auto}
    .edit-modal-title{font-size:17px;font-weight:700;margin-bottom:20px;display:flex;justify-content:space-between;align-items:center}

    /* ══ FOOTER ══ */
    .footer-top{background:#1a1a2e;color:#fff;padding:40px 24px 32px}
    .footer-inner{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px}
    .footer-logo img{height:54px;margin-bottom:14px;display:block}
    .footer-desc{font-size:13px;color:rgba(255,255,255,.6);line-height:1.7}
    .footer-social{display:flex;gap:10px;margin-top:16px}
    .soc-btn{width:38px;height:38px;background:rgba(255,255,255,.1);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;text-decoration:none;transition:background .2s,transform .15s}
    .soc-btn:hover{background:var(--yellow);color:#000;transform:scale(1.1)}
    .soc-btn svg{display:block}
    .footer-col h4{font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--yellow);margin-bottom:16px}
    .footer-col ul{list-style:none}
    .footer-col li{margin-bottom:9px}
    .footer-col a{font-size:13px;color:rgba(255,255,255,.6);transition:color .15s}
    .footer-col a:hover{color:var(--yellow)}
    .footer-bottom{background:#111;padding:14px 24px}
    .footer-bottom-inner{max-width:1280px;margin:0 auto;width:100%;display:flex;justify-content:space-between;align-items:center}
    .fc{font-size:12px;color:rgba(255,255,255,.45)}
    .fd{font-size:12px;color:var(--yellow);font-weight:600}
    .pay-icon{background:#fff;border-radius:4px;padding:3px 8px;font-size:11px;font-weight:700;color:#333}

    /* ══ TOAST ══ */
    .toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(60px);background:var(--text);color:#fff;padding:12px 24px;border-radius:30px;font-size:13px;z-index:9999;transition:transform .3s;white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,.2)}
    .toast.show{transform:translateX(-50%) translateY(0)}


    /* ── IMAGE UPLOAD ── */
    .img-upload-wrap { border: 2px dashed var(--g2); border-radius: var(--radius); padding: 12px; text-align: center; transition: border-color .2s; cursor: pointer; position: relative; }
    .img-upload-wrap:hover { border-color: var(--red); }
    .img-preview { width: 100%; max-height: 160px; object-fit: contain; border-radius: 4px; display: none; margin-bottom: 8px; }
    .img-preview.show { display: block; }
    .img-placeholder { font-size: 36px; margin-bottom: 6px; display: block; }
    .img-upload-label { font-size: 13px; color: var(--g4); line-height: 1.5; }
    .img-upload-label b { color: var(--red); }
    .img-btns { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; justify-content: center; }
    .img-btn { flex: 1; min-width: 100px; background: var(--g1); border: 1.5px solid var(--g2); color: var(--text); padding: 8px 12px; border-radius: var(--radius); font-size: 12px; font-weight: 600; cursor: pointer; font-family: 'Inter',sans-serif; transition: all .2s; display: flex; align-items: center; justify-content: center; gap: 6px; }
    .img-btn:hover { border-color: var(--red); color: var(--red); }
    .img-btn.primary { background: var(--red); color: #fff; border-color: var(--red); }
    .img-btn.primary:hover { background: var(--red-dk); }
    .img-remove { position: absolute; top: 6px; right: 6px; background: rgba(0,0,0,.55); color: #fff; border: none; border-radius: 50%; width: 22px; height: 22px; font-size: 13px; cursor: pointer; display: none; align-items: center; justify-content: center; }
    .img-remove.show { display: flex; }
    /* Product image in card */
    .prod-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
    .prod-img-ph { font-size: 70px; color: var(--g2); }
    .upload-progress { display: none; height: 4px; background: var(--g2); border-radius: 2px; margin-top: 8px; overflow: hidden; }
    .upload-progress-bar { height: 100%; background: var(--red); width: 0; transition: width .3s; }
    .upload-progress.show { display: block; }


  /* ══════════════════════════════════════════════════════════
   INSTRUCCIÓN: En tu index.html, dentro de <style>,
   REEMPLAZA los dos bloques @media existentes por estos.
   ══════════════════════════════════════════════════════════ */

  /* ══ MODAL RASTREAR PEDIDO ══ */
  .rastrear-modal{
    position:fixed;top:0;right:0;bottom:0;left:0;   /* inset:0 no soportado en iOS<15 */
    background:rgba(0,0,0,.72);z-index:3000;
    display:none;align-items:center;justify-content:center;
    -webkit-backdrop-filter:blur(4px);
    backdrop-filter:blur(4px);
    padding:20px;
    box-sizing:border-box;
    overflow-y:auto;                                  /* scroll dentro del overlay en iOS */
    -webkit-overflow-scrolling:touch;
  }
  .rastrear-modal.open{display:flex}
  .rastrear-modal-box{
    background:linear-gradient(135deg,#0d1120 0%,#1a1a2e 100%);
    border-radius:12px;width:100%;max-width:560px;
    box-shadow:0 20px 60px rgba(0,0,0,.55);
    overflow:hidden;max-height:90vh;display:flex;flex-direction:column;
  }
  .rastrear-modal-head{
    display:flex;align-items:center;justify-content:space-between;
    padding:18px 24px;border-bottom:1px solid rgba(255,255,255,.1);
    flex-shrink:0;
  }
  .rastrear-modal-body{
    padding:28px 24px;overflow-y:auto;
  }
  .rastrear-modal-body::-webkit-scrollbar{width:4px}
  .rastrear-modal-body::-webkit-scrollbar-track{background:rgba(255,255,255,.05)}
  .rastrear-modal-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:2px}

  /* ── Tablet ──────────────────────────────────────────────── */
  @media(max-width:960px){
    .hero-section{grid-template-columns:1fr}
    .hero-side{flex-direction:row}
    .quick-cats{grid-template-columns:repeat(3,1fr)}
    .advisors-row{grid-template-columns:1fr}
    .contact-grid{grid-template-columns:1fr}
    .footer-inner{grid-template-columns:1fr 1fr}
    .cart-drawer{width:100%}
    .stats-row{grid-template-columns:repeat(2,1fr)}
  }

  /* ── Móvil ───────────────────────────────────────────────── */
  @media(max-width:600px){
    /* Topbar: visible y compacto en móvil */
    .topbar{
      flex-direction:column;
      align-items:center;
      gap:4px;
      padding:6px 12px;
      font-size:11px;
      text-align:center;
    }
    .topbar > div:first-child{
      display:none; /* oculta el slogan largo, conserva los links */
    }
    .topbar-links{
      gap:10px;
      flex-wrap:wrap;
      justify-content:center;
    }
    .topbar-links span{
      display:none; /* oculta el horario —ya aparece en el pie— */
    }

    /* Header: logo + acciones en fila, buscador abajo */
    .header-main{
      flex-wrap:wrap;
      gap:8px;
      padding:10px 14px;
    }
    .logo-wrap{ flex-shrink:0; }
    .logo-wrap img{ height:36px; }

    /* El buscador ocupa toda la fila inferior */
    .search-bar{
      order:3;
      width:100%;
      max-width:100%;
      flex:none;
      border-width:1.5px;
    }
    /* En móvil: ocultar el selector de categoría
       (las categorías se eligen con el menú de abajo) */
    .search-bar select{ display:none; }
    /* Input ocupa todo el ancho disponible */
    .search-bar input{
      flex:1;
      min-width:0;
      padding:10px 12px;
      font-size:13px;
    }
    /* Botón buscar siempre visible */
    .btn-search{
      padding:0 16px;
      font-size:16px;
      flex-shrink:0;
    }

    /* Acciones: botón WA + Ingresar + Carrito */
    .header-actions{
      flex:1;
      justify-content:flex-end;
      gap:6px;
    }
    /* btn-wa-header: ya es ícono circular, sin ajustes adicionales */

    /* Botón Ingresar */
    #btnIngresar{
      padding:8px 12px !important;
      font-size:12px !important;
    }

    /* Pill de sesión: más compacto */
    #btnSesion > div:first-child{
      padding:7px 10px;
      font-size:12px;
    }
    #btnSesion > button{
      padding:7px 10px !important;
      font-size:12px !important;
    }

    /* Resto de ajustes móvil */
    .quick-cats{grid-template-columns:repeat(2,1fr)}
    .footer-inner{grid-template-columns:1fr}
    .form-row{grid-template-columns:1fr}
    .promo-banner{flex-direction:column}
    .prod-edit-grid{grid-template-columns:1fr}

    /* Cat-nav: texto más pequeño */
    .cat-link{ padding:8px 14px; font-size:12px; }
    /* En móvil el nav es slider: sin max-width, ancho completo */
    .cat-nav-inner{ max-width:none; margin:0; padding:0 4px; }
    /* Mostrar degradado derecho como hint de scroll */
    .cat-nav::after{ display:block; }

    /* Hero adaptado */
    .hero-banner{ padding:28px 24px; min-height:260px; }
    .hero-title{ font-size:26px; }
    .hero-side{ flex-direction:column; }
  }