:root{
  --bg:#F6F7F9; --card:#FFFFFF; --text:#111318; --muted:#6B7280; --line:#E6E8EC;
  --btn:#111318; --on-btn:#FFFFFF; --radius:20px;
  --bs-body-font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
}
body.estilo-oscuro{--bg:#0B0B0F;--card:#16161D;--text:#F3F4F6;--muted:#9CA3AF;--line:#26262F;--btn:var(--brand);--on-btn:var(--on-brand);}
body.estilo-urbano{--bg:#EFEFEA;--card:#FFFFFF;--text:#111;--muted:#555;--line:#D4D4CC;--btn:var(--brand);--on-btn:var(--on-brand);--radius:14px;}
body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;padding-bottom:90px;}
a{color:inherit;}

/* Barra superior */
.topnav{position:sticky;top:0;z-index:1030;padding:.65rem 0;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:.2s;}
.topnav.scrolled{border-bottom-color:var(--line);}
.topnav-name{display:flex;align-items:center;gap:.5rem;font-weight:800;opacity:0;transform:translateY(4px);transition:.25s;min-width:0;}
.topnav-name img{width:30px;height:30px;border-radius:50%;object-fit:cover;}
.topnav-name span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.topnav.scrolled .topnav-name{opacity:1;transform:none;}
.btn-round{width:46px;height:46px;border-radius:15px;border:1px solid var(--line);background:var(--card);color:var(--text);display:inline-flex;align-items:center;justify-content:center;font-size:1.15rem;position:relative;}
.btn-cart{width:auto;padding:0 .9rem;gap:.5rem;background:var(--btn);color:var(--on-btn);border-color:var(--btn);}
.btn-cart:hover,.btn-round:hover{background:var(--btn);color:var(--on-btn);}
.cart-count{min-width:24px;height:24px;border-radius:999px;background:#fff;color:#111;font-size:.8rem;font-weight:800;display:inline-flex;align-items:center;justify-content:center;padding:0 6px;}

/* Portada */
.hero{position:relative;color:#fff;text-align:center;overflow:hidden;
  background:radial-gradient(700px 380px at 50% 0%,color-mix(in srgb,var(--brand) 55%,transparent),transparent 70%),#111318;}
.hero[style*="--portada"]{background:#111 var(--portada) center/cover no-repeat;}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,.55) 50%,rgba(0,0,0,.85) 100%);}
.hero-inner{position:relative;z-index:1;padding:2.5rem 1rem 2.25rem;max-width:720px;}
.hero-logo{width:132px;height:132px;margin:0 auto 1rem;border-radius:50%;border:5px solid #fff;overflow:hidden;background:var(--brand);box-shadow:0 12px 30px rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;}
.hero-logo img{width:100%;height:100%;object-fit:cover;}
.hero-logo span{font-family:'Bebas Neue',sans-serif;font-size:4rem;color:var(--on-brand);}
.hero-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(2.8rem,11vw,5rem);line-height:.92;letter-spacing:.01em;margin:0 0 .75rem;text-shadow:0 4px 18px rgba(0,0,0,.45);}
.hero-slogan{display:inline-block;background:#000;color:#fff;border-radius:999px;padding:.4rem 1.2rem;font-weight:800;letter-spacing:.35em;font-size:.78rem;text-transform:uppercase;margin-bottom:.9rem;}
.hero-desc{font-size:1.05rem;opacity:.95;margin-bottom:.5rem;}
.hero-dir{opacity:.9;margin-bottom:.9rem;}
.estado-pill{border:0;border-radius:999px;padding:.4rem 1rem;font-weight:700;font-size:.92rem;display:inline-flex;align-items:center;gap:.45rem;background:rgba(255,255,255,.14);backdrop-filter:blur(6px);color:#fff;}
.estado-pill .dot{width:10px;height:10px;border-radius:50%;}
.estado-pill.abierto{color:#86EFAC;} .estado-pill.abierto .dot{background:#22C55E;box-shadow:0 0 0 4px rgba(34,197,94,.25);}
.estado-pill.cerrado{color:#FCA5A5;} .estado-pill.cerrado .dot{background:#EF4444;}
.hero-nota{margin:.6rem 0 0;font-size:.95rem;opacity:.92;}
.hero-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:1rem;}
.hero-chips span{font-size:.82rem;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:.3rem .8rem;}
.btn-glass{border:1.5px solid rgba(255,255,255,.7);color:#fff;border-radius:16px;padding:.7rem 1.4rem;font-weight:700;background:rgba(0,0,0,.25);}
.btn-glass:hover{background:#fff;color:#111;}
.mesa-banner{background:var(--brand);color:var(--on-brand);text-align:center;padding:.6rem;font-weight:600;}

/* Filtros */
.sec-title{font-weight:800;letter-spacing:-.02em;font-size:1.7rem;}
.estilo-urbano .sec-title{font-family:'Bebas Neue',sans-serif;font-size:2.3rem;letter-spacing:.02em;}
.filtros{position:sticky;top:66px;z-index:1020;background:var(--bg);padding:.5rem 0 .75rem;margin-bottom:.5rem;}
.search-box{position:relative;margin-bottom:.75rem;}
.search-box i{position:absolute;left:1rem;top:50%;transform:translateY(-50%);color:var(--muted);}
.search-box input{width:100%;border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:16px;padding:.85rem 1rem .85rem 2.75rem;font-size:1rem;outline:none;}
.search-box input:focus{border-color:var(--brand);box-shadow:0 0 0 .2rem color-mix(in srgb,var(--brand) 25%,transparent);}
.chips{display:flex;gap:.5rem;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;}
.chips::-webkit-scrollbar{display:none;}
.chip{flex-shrink:0;border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:14px;padding:.55rem 1.1rem;font-weight:600;font-size:.93rem;}
.chip.active{background:var(--btn);color:var(--on-btn);border-color:var(--btn);}
.estilo-clasico .chip.active{background:#111318;color:#fff;border-color:#111318;}

/* Producto */
.prod{background:var(--card);border-radius:var(--radius);overflow:hidden;height:100%;display:flex;flex-direction:column;border:1px solid var(--line);box-shadow:0 2px 10px rgba(0,0,0,.04);transition:transform .15s;}
.estilo-urbano .prod{border:2px solid #111;box-shadow:4px 4px 0 #111;}
.prod:hover{transform:translateY(-2px);}
.prod-img{position:relative;aspect-ratio:1/1;background:color-mix(in srgb,var(--brand) 12%,var(--card));}
.prod-img img{width:100%;height:100%;object-fit:cover;}
.noimg{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:2.6rem;color:color-mix(in srgb,var(--brand) 70%,#000);}
.zoom{position:absolute;right:10px;bottom:10px;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:#111;box-shadow:0 2px 8px rgba(0,0,0,.2);}
.tag-dest{position:absolute;left:10px;top:10px;background:var(--brand);color:var(--on-brand);font-size:.72rem;font-weight:800;border-radius:999px;padding:.2rem .6rem;}
.prod-body{padding:.9rem;display:flex;flex-direction:column;flex:1;}
.prod-cat{color:var(--muted);font-size:.8rem;margin-bottom:.15rem;}
.prod-name{font-size:1.02rem;font-weight:700;line-height:1.25;margin:0 0 .3rem;}
.prod-desc{color:var(--muted);font-size:.82rem;margin-bottom:.5rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.prod-price{display:flex;align-items:baseline;gap:.45rem;flex-wrap:wrap;margin-top:auto;}
.prod-price .now{font-size:1.2rem;font-weight:800;}
.prod-price s{color:var(--muted);font-size:.85rem;}
.badge-desc{align-self:flex-start;background:#DC2626;color:#fff;border-radius:999px;font-size:.75rem;font-weight:700;padding:.2rem .65rem;margin-top:.35rem;}
.prod-action{margin-top:.75rem;}
.btn-add{width:100%;border:0;border-radius:14px;background:var(--btn);color:var(--on-btn);font-weight:700;padding:.7rem;display:flex;align-items:center;justify-content:center;gap:.4rem;}
.btn-add:active{transform:scale(.98);}
.qty{display:flex;align-items:center;justify-content:space-between;border-radius:14px;background:color-mix(in srgb,var(--brand) 18%,var(--card));padding:.25rem;}
.qty button{width:40px;height:40px;border-radius:11px;border:0;background:var(--btn);color:var(--on-btn);font-size:1.1rem;}
.qty span{font-weight:800;font-size:1.05rem;}
@media (max-width:400px){.prod-body{padding:.7rem;}.prod-name{font-size:.93rem;}.prod-price .now{font-size:1.05rem;}}

.empty-state{text-align:center;color:var(--muted);padding:3rem 1rem;}
.empty-state i{font-size:2.6rem;opacity:.5;}

/* Footer */
.foot{border-top:1px solid var(--line);padding:2rem 0 1rem;margin-top:2rem;}
.powered{font-size:.8rem;color:var(--muted);}
.powered a{color:var(--muted);font-weight:600;}
.powered img{vertical-align:-4px;border-radius:5px;}
.btn-wa{background:#25D366;color:#fff;border:0;font-weight:700;border-radius:14px;}
.btn-wa:hover{background:#1EBE5A;color:#fff;}
.btn-brand{background:var(--btn);color:var(--on-btn);border:0;border-radius:14px;font-weight:700;}
.btn-brand:hover{filter:brightness(1.08);background:var(--btn);color:var(--on-btn);}
.estilo-clasico .btn-brand,.estilo-clasico .btn-add,.estilo-clasico .qty button,.estilo-clasico .btn-cart{background:#111318;color:#fff;border-color:#111318;}

/* Carrito flotante */
.float-cart{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:1040;border:0;border-radius:999px;background:#111318;color:#fff;padding:.85rem 1.3rem;display:flex;align-items:center;gap:.6rem;font-size:1.1rem;box-shadow:0 12px 30px rgba(0,0,0,.35);}
.float-cart .sep{width:1px;height:20px;background:rgba(255,255,255,.3);}
.float-cart.bump{animation:bump .35s;}
@keyframes bump{50%{transform:scale(1.08);}}

.carrito{--bs-offcanvas-width:440px;background:var(--card);color:var(--text);}
.carrito .btn-close{filter:var(--close-filter,none);}
.estilo-oscuro .carrito .btn-close,.estilo-oscuro .modal .btn-close:not(.btn-close-white){filter:invert(1);}
.cart-item{display:flex;gap:.75rem;align-items:center;padding:.75rem 0;border-bottom:1px solid var(--line);}
.cart-item img,.cart-item .ph{width:58px;height:58px;border-radius:14px;object-fit:cover;background:color-mix(in srgb,var(--brand) 15%,var(--card));display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.cart-item .info{flex:1;min-width:0;}
.cart-item .info b{display:block;font-size:.93rem;line-height:1.2;}
.cart-item .info small{color:var(--muted);}
.cart-item .qty{background:transparent;padding:0;gap:.35rem;}
.cart-item .qty button{width:32px;height:32px;border-radius:10px;font-size:.95rem;}
.cart-foot{padding:1rem 1.25rem calc(1rem + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--card);}
.modos{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:.5rem;}
.modo{border:1.5px solid var(--line);border-radius:14px;padding:.7rem .5rem;text-align:center;cursor:pointer;font-weight:600;font-size:.88rem;display:flex;flex-direction:column;align-items:center;gap:.25rem;}
.modo i{font-size:1.3rem;}
.btn-check:checked + .modo{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 14%,var(--card));}
.carrito .form-control,.carrito .form-select{background-color:var(--bg);border-color:var(--line);color:var(--text);border-radius:12px;padding:.7rem .9rem;}
.carrito .form-control:focus,.carrito .form-select:focus{border-color:var(--brand);box-shadow:0 0 0 .2rem color-mix(in srgb,var(--brand) 25%,transparent);}
.carrito .form-label{font-weight:600;font-size:.9rem;}
.estilo-oscuro .modal-content{background:var(--card);color:var(--text);}
.ok-ico{width:72px;height:72px;border-radius:50%;background:#DCFCE7;color:#16A34A;font-size:2.4rem;display:flex;align-items:center;justify-content:center;margin:0 auto;}
.toast{background:#111318;color:#fff;border-radius:14px;}