:root{
  --blue:#14366e; --blue-dark:#0d2550; --red:#d62828; --gold:#f2b705;
  --bg:#e8eaed; --card:#ffffff; --text:#1c2333; --muted:#6b7280;
  --green:#22a06b; --wa:#25d366;
  --radius:14px; --shadow:0 2px 10px rgba(10,25,60,.08);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{margin:0; font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--bg); color:var(--text); padding-bottom:0}

/* Splash */
#splash{position:fixed; inset:0; z-index:200; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:14px;
  background:linear-gradient(160deg,var(--blue-dark),var(--blue)); color:#fff;
  transition:opacity .5s}
#splash.hide{opacity:0; pointer-events:none}
#splash-logo{width:min(58vw,240px); filter:drop-shadow(0 6px 18px rgba(0,0,0,.4))}
.splash-slogan{font-size:1.25rem; letter-spacing:.5px; color:var(--gold); margin:0}
.splash-ask{font-size:1rem; margin:.4rem 0 0; opacity:.95}
.splash-selects{display:flex; flex-direction:column; gap:.6rem; width:min(78vw,320px)}
.splash-selects select{border:2px solid rgba(255,255,255,.35); border-radius:12px;
  padding:.75rem .9rem; font-size:1rem; background:rgba(255,255,255,.12); color:#fff;
  appearance:auto}
.splash-selects select option{color:#1c2333}
#splash-enter:disabled{opacity:.45; cursor:not-allowed}

/* Botones */
.btn-primary{background:var(--red); color:#fff; border:0; border-radius:999px;
  padding:.8rem 1.6rem; font-size:1.05rem; font-weight:700; cursor:pointer}
.btn-primary:active{transform:scale(.97)}
.btn-block{width:100%; margin-top:.6rem}
.icon-btn{background:rgba(255,255,255,.14); color:#fff; border:0; border-radius:10px;
  padding:.45rem .7rem; font-size:1rem; font-weight:700; cursor:pointer; position:relative}
.cart-badge{position:absolute; top:-8px; right:-8px; background:var(--gold); color:#3a2b00;
  font-size:.72rem; font-weight:800; min-width:20px; height:20px; border-radius:999px;
  display:flex; align-items:center; justify-content:center; padding:0 5px}

/* Encabezado */
#header{background:linear-gradient(160deg,var(--blue-dark),var(--blue)); color:#fff;
  position:sticky; top:0; z-index:50; box-shadow:0 2px 12px rgba(0,0,0,.25)}
.header-top{display:flex; align-items:center; gap:.7rem; padding:.7rem .9rem}
.header-logo{width:52px; height:52px; object-fit:contain}
.header-titles{flex:1}
.header-titles h1{margin:0; font-size:1.25rem}
.slogan{margin:.1rem 0 0; color:var(--gold); font-size:.85rem; font-style:italic}
.header-actions{display:flex; gap:.5rem}
.header-route{text-align:center; font-size:.85rem; padding:.35rem; background:rgba(0,0,0,.18)}

/* Barra herramientas */
#toolbar{position:sticky; top:0; z-index:40; display:flex; gap:.5rem; padding:.6rem .8rem;
  background:var(--bg); border-bottom:1px solid #e5e7eb}
#province-select{flex:0 0 auto; max-width:34%; border:1px solid #d1d5db; border-radius:10px;
  padding:.55rem .5rem; font-size:.92rem; background:#fff}
#muni-select{flex:0 0 auto; max-width:30%; border:1px solid #d1d5db; border-radius:10px;
  padding:.55rem .5rem; font-size:.92rem; background:#fff}
.search-wrap{flex:1; position:relative; display:flex}
#search-input{flex:1; border:2px solid #1e3a8a; border-radius:14px; padding:.85rem 2.5rem .85rem 1.1rem;
  font-size:1.1rem; width:100%; box-shadow:0 2px 8px rgba(30,58,138,.12)}
#search-clear{position:absolute; right:.4rem; top:50%; transform:translateY(-50%);
  border:0; background:none; font-size:1rem; color:var(--muted); cursor:pointer}

/* Categorías */
#categories{display:flex; gap:.5rem; overflow-x:auto; padding:.7rem .8rem;
  scrollbar-width:none; background:var(--bg)}
#categories::-webkit-scrollbar{display:none}
.cat-chip{flex:0 0 auto; border:1px solid #d1d5db; background:#fff; border-radius:999px;
  padding:.5rem .95rem; font-size:.88rem; cursor:pointer; white-space:nowrap}
.cat-chip.active{background:var(--blue); color:#fff; border-color:var(--blue); font-weight:700}
.cat-chip .cnt{opacity:.65; font-size:.78rem}

/* Rejilla */
#grid{display:grid; grid-template-columns:repeat(2,1fr); gap:.7rem; padding:.2rem .8rem 1rem}
@media(min-width:700px){#grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){#grid{grid-template-columns:repeat(4,1fr)}}
.card{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow);
  overflow:hidden; display:flex; flex-direction:column; cursor:pointer}
.card-img{width:100%; aspect-ratio:1; object-fit:cover; background:#eef0f4}
.card-img.ph{display:flex; align-items:center; justify-content:center; font-size:2.2rem;
  background:linear-gradient(140deg,#dfe7f5,#f4e8d0)}
.card-body{padding:.6rem .7rem; display:flex; flex-direction:column; gap:.25rem; flex:1}
.card-name{font-size:.88rem; font-weight:600; margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.price{color:var(--red); font-weight:800; font-size:1.02rem; margin:0}
.price .old{color:var(--muted); font-weight:400; font-size:.8rem; text-decoration:line-through; margin-left:.35rem}
.tax-note{color:var(--muted); font-size:.74rem; margin:0}
.card-add{margin-top:auto; background:var(--blue); color:#fff; border:0; border-radius:10px;
  padding:.5rem; font-weight:700; cursor:pointer; font-size:.88rem}
.card-add:active{transform:scale(.96)}

/* Cargando / fin */
#loader,#end-msg{text-align:center; color:var(--muted); padding:1.2rem}

/* Modales */
.modal{position:fixed; inset:0; z-index:120; background:rgba(8,15,35,.6);
  display:flex; align-items:flex-end; justify-content:center}
@media(min-width:700px){.modal{align-items:center}}
.modal[hidden]{display:none}
.modal-card{background:#fff; width:100%; max-width:560px; max-height:92vh; overflow-y:auto;
  border-radius:18px 18px 0 0; position:relative; animation:up .25s ease}
@media(min-width:700px){.modal-card{border-radius:18px}}
@keyframes up{from{transform:translateY(30px); opacity:.6}to{transform:none; opacity:1}}
.modal-close{position:absolute; top:.6rem; right:.6rem; z-index:2; border:0; background:rgba(0,0,0,.45);
  color:#fff; width:34px; height:34px; border-radius:999px; font-size:1rem; cursor:pointer}
#pm-img{width:100%; max-height:320px; object-fit:cover; background:#eef0f4}
#pm-img.ph{display:flex; align-items:center; justify-content:center; font-size:4rem; min-height:220px;
  background:linear-gradient(140deg,#dfe7f5,#f4e8d0)}
.modal-body{padding:1rem 1.1rem 1.4rem}
.modal-body h2{margin:.2rem 0 .5rem; font-size:1.2rem}
.modal-body p{line-height:1.5}
#pm-contents{margin:.3rem 0; padding-left:1.1rem; font-size:.92rem}
#pm-contents li{margin:.15rem 0}
.zones{font-size:.82rem; color:var(--green); font-weight:600}
.qty-row{display:flex; align-items:center; gap:.6rem; margin-top:1rem}
.qty-btn{width:40px; height:40px; border-radius:999px; border:1px solid #d1d5db;
  background:#fff; font-size:1.3rem; cursor:pointer}
#pm-qty{font-size:1.15rem; font-weight:800; min-width:1.6rem; text-align:center}
.qty-row .btn-primary{flex:1}

/* Carrito */
.drawer{position:fixed; inset:0; z-index:120; background:rgba(8,15,35,.6);
  display:flex; justify-content:flex-end}
.drawer[hidden]{display:none}
.drawer-card{background:#fff; width:min(430px,94vw); height:100%; display:flex;
  flex-direction:column; animation:slidein .25s ease}
@keyframes slidein{from{transform:translateX(40px); opacity:.6}to{transform:none; opacity:1}}
.drawer-head{display:flex; align-items:center; justify-content:space-between;
  padding:1rem 1.1rem; border-bottom:1px solid #eef0f4}
.drawer-head h2{margin:0}
.drawer-head .modal-close{position:static; background:#eef0f4; color:var(--text)}
#cart-items{flex:1; overflow-y:auto; padding:.8rem 1.1rem}
.cart-item{display:flex; gap:.7rem; align-items:center; padding:.6rem 0; border-bottom:1px solid #f1f3f7}
.cart-item img{width:58px; height:58px; object-fit:cover; border-radius:10px; background:#eef0f4}
.cart-item .ci-info{flex:1}
.cart-item .ci-name{font-size:.86rem; font-weight:600; margin:0 0 .2rem}
.cart-item .ci-price{font-size:.85rem; color:var(--red); font-weight:700}
.ci-qty{display:flex; align-items:center; gap:.4rem}
.ci-qty button{width:28px; height:28px; border-radius:999px; border:1px solid #d1d5db; background:#fff; cursor:pointer}
.cart-empty{text-align:center; color:var(--muted); padding:2rem 0}
.drawer-foot{padding:1rem 1.1rem 1.4rem; border-top:1px solid #eef0f4; background:#fafbfd}
.cart-subtotal{margin:.2rem 0; font-size:1.05rem}

/* Checkout */
.modal-body label{display:block; margin:.7rem 0; font-size:.9rem; font-weight:600}
.modal-body input,.modal-body select,.modal-body textarea{width:100%; margin-top:.3rem;
  border:1px solid #d1d5db; border-radius:10px; padding:.6rem .7rem; font-size:.95rem; font-family:inherit}

/* Pie */
#footer{background:linear-gradient(160deg,var(--blue-dark),var(--blue)); color:#fff;
  text-align:center; padding:1.6rem 1rem 2.2rem; margin-top:1rem}
#footer .slogan{font-size:1.05rem}
.btn-whatsapp{display:inline-block; margin:.8rem 0; background:var(--wa); color:#fff;
  font-weight:800; text-decoration:none; padding:.8rem 1.5rem; border-radius:999px}
.foot-note{font-size:.78rem; opacity:.75}

/* Banner promocional */
#banner{position:relative; overflow:hidden; margin:.6rem .8rem 0; border-radius:14px}
#banner-track{display:flex; transition:transform .5s ease}
.banner-slide{flex:0 0 100%; position:relative; display:flex; align-items:flex-end;
  min-height:230px; background-size:cover; background-position:center; cursor:pointer;
  color:#fff; overflow:hidden}
.banner-shade{position:absolute; inset:0;
  background:linear-gradient(100deg,rgba(0,0,0,.78) 20%,rgba(0,0,0,.35) 55%,rgba(0,0,0,.05) 80%)}
.banner-txt{position:relative; padding:1rem 1.1rem; max-width:85%}
.banner-kicker{display:inline-block; font-size:.75rem; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; background:#fbbf24; color:#1e3a8a; padding:.2rem .6rem;
  border-radius:999px; margin-bottom:.4rem}
.banner-title{font-size:1.35rem; font-weight:800; line-height:1.15; text-shadow:0 1px 6px rgba(0,0,0,.5)}
.banner-sub{font-size:.9rem; opacity:.94; margin-top:.15rem; text-shadow:0 1px 4px rgba(0,0,0,.5)}
.banner-cta{display:inline-block; margin-top:.55rem; font-weight:700; background:#fff;
  color:#1e3a8a; padding:.45rem .95rem; border-radius:999px; font-size:.9rem}
#banner-dots{position:absolute; bottom:.5rem; right:.7rem; display:flex; gap:.4rem}
#banner-dots button{width:.55rem; height:.55rem; border-radius:50%; border:0;
  background:rgba(255,255,255,.5); cursor:pointer; padding:0}
#banner-dots button.active{background:#fff}