@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow:wght@400;500;600;700;800;900&family=Barlow+Condensed:wght@400;600;700;800;900&display=swap');

:root {
  --bg:      #10141A;
  --bg2:     #161d28;
  --bg3:     #1c2535;
  --bg4:     #222d3e;
  --orange:  #FF6200;
  --orange-h:#e05700;
  --white:   #FFFFFF;
  --t1:      #FFFFFF;
  --t2:      #8a96aa;
  --t3:      #4e5a6e;
  --border:  rgba(255,255,255,.07);
  --border2: rgba(255,255,255,.04);
  --green:   #F5B544;
  --green-bg:rgba(245,181,68,.1);
  --green-bd:rgba(245,181,68,.3);
  --success:    #22c55e;
  --success-bg: rgba(34,197,94,.1);
  --success-bd: rgba(34,197,94,.3);
  --red:     #ef4444;
  --ease:    cubic-bezier(.4,0,.2,1);
  --spring:  cubic-bezier(.34,1.56,.64,1);
  --shadow-sm: 0 2px 12px rgba(0,0,0,.25);
  --shadow-md: 0 4px 20px rgba(0,0,0,.35);
  --shadow-lg: 0 16px 48px rgba(0,0,0,.6);
  --shadow-xl: 0 24px 80px rgba(0,0,0,.7);
  --HDR:     60px;
  --DEL:     42px;
  --CAT:     48px;
  --MAX:     1440px;
  --BOT:     52px;
  --safe-b:  env(safe-area-inset-bottom, 0px);
  --orange-l: rgba(255,98,0,.15);
  --success:    #22c55e;
  --success-bg: rgba(34,197,94,.1);
  --success-bd: rgba(34,197,94,.3);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--t1);font-family:'Barlow',sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
button{cursor:pointer;font-family:inherit;border:none;background:none}
a{text-decoration:none;color:inherit}
input,select{font-family:inherit;-webkit-appearance:none}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}

/* Contención del app shell: solo #scroll-area debe scrollear. Sin esto la
   página (body) también queda scrolleable porque sticky-top+cat-bar+scroll-area
   suman más de 100vh, y el position:sticky nativo de cat-bar/sticky-top pelea
   con el toggle manual por JS de la clase .hidden — eso era el salto/parpadeo
   raro durante la animación de ocultar el header. */
#app{
  position:fixed;inset:0;
  /* 100vh como fallback; 100dvh (viewport dinámico) sigue en tiempo real la
     barra de Safari en iPhone ocultándose/mostrándose al hacer scroll — sin
     esto el alto quedaba anclado al tamaño de cuando cargó la página y no se
     agrandaba al desaparecer la barra del navegador. */
  height:100vh;height:100dvh;
  display:flex;flex-direction:column;
  overflow:hidden;
}

/* ═══ STICKY TOP ═══ */
#sticky-top{
  position:sticky;top:0;z-index:200;
  overflow:hidden;
}
#sticky-top.srch-open{overflow:visible}
#sticky-top.hidden{
  margin-top:calc(-1*(var(--HDR)));
  opacity:0;pointer-events:none;
}

/* ═══ HEADER ═══ */
.header{
  height:var(--HDR);background:var(--orange);
  display:flex;align-items:center;
  border-bottom:1px solid rgba(0,0,0,.15);
}
.hdr-inner{
  width:100%;max-width:var(--MAX);margin:0 auto;
  padding:0 24px;display:flex;align-items:center;gap:8px;
}
.hdr-menu{
  width:40px;height:40px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  color:var(--white);transition:background .15s;flex-shrink:0;
}
.hdr-menu:hover{background:rgba(0,0,0,.15)}
.hdr-logo{
  font-family:'Bebas Neue',sans-serif;
  font-size:26px;letter-spacing:5px;color:var(--white);
  flex-shrink:0;margin-right:4px;
}
/* Carta link */
.hdr-carta{
  flex-shrink:0;
  display:flex;align-items:center;gap:6px;
  padding:5px 12px;border-radius:999px;
  font-size:13px;font-weight:700;color:rgba(255,255,255,.9);
  transition:background .15s;
}
.hdr-carta:hover{
  background:rgba(0,0,0,.15);color:var(--white);
}
/* Search */
.hdr-search{
  flex:1;max-width:520px;
  background:rgba(0,0,0,.2);border:1.5px solid rgba(255,255,255,.25);
  border-radius:999px;height:40px;
  display:flex;align-items:center;padding:0 16px;gap:10px;
  transition:background .2s,border-color .2s;
}
.hdr-search:focus-within{background:rgba(0,0,0,.3);border-color:rgba(255,255,255,.5)}
.hdr-search svg{color:rgba(255,255,255,.7);flex-shrink:0}
.hdr-search input{
  flex:1;background:none;border:none;outline:none;
  color:var(--white);font-size:14px;font-weight:500;
}
.hdr-search input::placeholder{color:rgba(255,255,255,.55)}
/* Mobile icon buttons are hidden on desktop */
.hdr-icon { display: none !important; }
/* Right actions */
.hdr-actions{
  display:flex;align-items:center;gap:2px;
  margin-left:auto;
}
.hdr-action{
  display:flex;flex-direction:column;
  padding:5px 12px;border-radius:12px;
  border:1.5px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.18);
  cursor:pointer;transition:background .15s,border-color .15s;flex-shrink:0;
}
.hdr-action:hover{background:rgba(0,0,0,.3);border-color:rgba(255,255,255,.4)}
.hdr-action-label{font-size:10px;color:rgba(255,255,255,.7);line-height:1.2;font-weight:600}
.hdr-action-value{
  font-size:13px;font-weight:800;color:var(--white);
  line-height:1.3;white-space:nowrap;
  display:flex;align-items:center;gap:4px;
}
/* Cart button */
.hdr-cart{
  display:flex;align-items:center;gap:8px;
  background:var(--white);color:var(--orange);
  height:40px;padding:0 16px;border-radius:999px;
  font-size:13px;font-weight:800;margin-left:6px;
  box-shadow:var(--shadow-sm);
  transition:all .18s;flex-shrink:0;white-space:nowrap;
}
.hdr-cart:hover{background:rgba(255,255,255,.9);transform:translateY(-1px)}
.hdr-cart:active{transform:scale(.97)}
.cart-badge{
  background:var(--orange);color:var(--white);
  min-width:20px;height:20px;border-radius:12px;
  font-size:12px;font-weight:700;
  display:none;align-items:center;justify-content:center;
  padding:0 4px;border:2px solid var(--white);
}
.cart-badge.show{display:flex}
.cart-badge.bump{animation:cbump .3s var(--spring)}
@keyframes cbump{0%{transform:scale(1)}50%{transform:scale(1.5)}100%{transform:scale(1)}}

/* ═══ DELIVERY BAR ═══ */
.delivery-bar{
  display:none;
}
.del-inner{
  max-width:var(--MAX);width:100%;
  padding:0 24px;display:flex;align-items:center;justify-content:center;gap:8px;
}
.del-txt{font-size:13px;font-weight:600;color:var(--t2)}
.del-chevron{color:var(--t3);transition:transform .25s}
.delivery-bar.open .del-chevron{transform:rotate(180deg)}

/* ═══ SUBNAV ═══ */
.subnav{
  background:var(--bg2);border-bottom:1px solid var(--border);
  height:40px;display:flex;align-items:center;
}
.subnav-inner{
  width:100%;max-width:var(--MAX);margin:0 auto;
  padding:0 24px;display:flex;align-items:center;justify-content:space-between;
}
.subnav-link{
  display:flex;align-items:center;gap:7px;
  font-size:13px;font-weight:700;color:var(--t2);
  padding:0 4px;height:40px;
  border-bottom:2px solid transparent;
  transition:color .15s,border-color .15s;
}
.subnav-link:hover,.subnav-link.on{color:var(--orange);border-bottom-color:var(--orange)}

/* ═══ CATEGORY BAR ═══ */
#cat-bar{
  display:none;
  background:#10141A;border-bottom:1px solid rgba(255,255,255,.18);
  position:sticky;top:0;z-index:180;
  height:var(--HDR);
}
.cat-bar-inner{
  max-width:var(--MAX);margin:0 auto;
  padding:0 8px;display:flex;align-items:center;
  height:100%;
  justify-content:center;
  position:relative;
}
/* Fade gradient at edges when content overflows */
.cat-bar-inner::before,
.cat-bar-inner::after{
  content:'';position:absolute;top:0;bottom:0;width:48px;
  z-index:2;pointer-events:none;
}
.cat-bar-inner::before{
  left:44px;
}
.cat-bar-inner::after{
  right:44px;
  background:linear-gradient(to left,var(--bg2),transparent);
}
.cat-scroll{
  flex:1;display:flex;align-items:center;justify-content:center;
  overflow-x:auto;scroll-behavior:smooth;
  max-width:calc(100% - 80px);
}
.cat-scroll::-webkit-scrollbar{display:none}
.cat-tab{
  flex-shrink:0;height:var(--HDR);padding:0 20px;
  font-size:14px;font-weight:700;color:var(--t1);
  border-bottom:2.5px solid transparent;
  white-space:nowrap;transition:color .18s,border-color .18s;
}
.cat-tab:hover{color:var(--t1)}
.cat-tab.on{color:var(--orange);border-bottom-color:var(--orange)}
.cat-arr{
  width:34px;height:34px;border-radius:50%;
  background:var(--bg3);border:1px solid var(--border);
  color:var(--t1);font-size:16px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;margin:0 4px;
  position:relative;z-index:3;
}
.cat-arr:hover{background:var(--orange);border-color:var(--orange)}
.cat-arr.gone{opacity:0;pointer-events:none}

/* ═══ SCROLL AREA ═══ */
/* flex:1 (no altura fija): dentro de #app (flex column contenido) ocupa el
   espacio restante bajo sticky-top + cat-bar sin importar si cat-bar está
   visible o no — igual que en la versión mobile. Un height:calc(100vh - HDR)
   fijo no restaba la altura del cat-bar y recortaba el fondo de la carta. */
#scroll-area{
  flex:1;min-height:0;
  overflow-y:auto;overflow-x:hidden;
  overscroll-behavior-y:none;
}

/* ═══ PAGE WRAPPER ═══ */
.page-wrap{max-width:var(--MAX);margin:0 auto;padding:20px 24px 80px}
#view-menu{display:flex;flex-direction:column;min-height:100%}
#view-menu>.page-wrap{flex:1}

/* ═══ HERO BANNER — 1820:500 ratio ═══ */
.banner-wrap{
  position:relative;overflow:hidden;
  aspect-ratio:1820/500;max-height:520px;
  background:var(--bg3);border-radius:16px;
  margin-bottom:40px;
}
.banner-track{display:flex;height:100%;transition:transform .55s var(--ease)}
.banner-slide{
  flex-shrink:0;width:100%;height:100%;
  display:flex;align-items:center;
  padding:0 clamp(32px,5vw,80px);
  position:relative;overflow:hidden;
  background-size:cover;background-position:center;background-repeat:no-repeat;
}
/* Degradado uniforme sobre la imagen que suba el admin (para que el texto sea legible con cualquier foto) */
.banner-slide::before{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(6,8,10,.92) 0%,rgba(6,8,10,.5) 40%,transparent 75%);
}
.banner-content{position:relative;z-index:2;max-width:520px}
.banner-badge{
  display:inline-flex;align-items:center;gap:5px;
  background:rgba(255,98,0,.2);border:1px solid rgba(255,98,0,.45);
  color:#ffcca0;font-size:10px;font-weight:800;letter-spacing:1.5px;
  text-transform:uppercase;padding:4px 14px;border-radius:999px;margin-bottom:14px;
}
.banner-title{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(42px,5vw,68px);font-weight:900;
  text-transform:uppercase;line-height:.92;color:var(--white);
  margin-bottom:14px;text-shadow:0 4px 24px rgba(0,0,0,.5);
}
.banner-title em{color:var(--orange);font-style:normal}
.banner-desc{font-size:15px;color:rgba(255,255,255,.75);line-height:1.55;margin-bottom:22px;max-width:400px}
.banner-cta{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--orange);color:var(--white);
  padding:14px 28px;border-radius:12px;
  font-family:'Barlow Condensed',sans-serif;
  font-size:20px;font-weight:900;letter-spacing:.5px;
  box-shadow:0 4px 20px rgba(255,98,0,.4),0 2px 6px rgba(0,0,0,.25),0 1px 0 rgba(255,255,255,.1) inset;transition:all .18s;
}
.banner-cta:hover{background:var(--orange-h);transform:translateY(-2px)}
.banner-cta:active{transform:scale(.97);background:var(--orange-h)}
.banner-arr{
  position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:44px;border-radius:50%;
  background:rgba(16,20,26,.7);border:1.5px solid rgba(255,255,255,.18);
  backdrop-filter:blur(8px);color:var(--white);font-size:20px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  transition:all .18s;z-index:10;
}
.banner-arr:hover{background:var(--orange);border-color:var(--orange)}
.banner-prev{left:16px}.banner-next{right:16px}
.banner-dots{
  position:absolute;bottom:14px;left:50%;transform:translateX(-50%);
  display:flex;gap:7px;z-index:10;
}
.bdot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.35);transition:all .25s;cursor:pointer}
.bdot.on{background:var(--orange);width:24px;border-radius:12px}

/* ═══ CLOSED BANNER ═══ */
.closed-banner{
  background:rgba(30,20,0,.9);border:1px solid rgba(255,98,0,.3);
  border-radius:12px;padding:12px 18px;margin-bottom:24px;
  display:flex;align-items:center;gap:10px;
  font-size:13px;color:#ffb380;font-weight:600;
}

/* ═══ SECTION HEADER ═══ */
.sec-hdr{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:20px;
}
.sec-title{
  font-family:'Barlow Condensed',sans-serif;
  font-size:26px;font-weight:700;color:var(--t1);
  display:flex;align-items:center;gap:10px;
}
.sec-title::after{
  content:'';display:inline-block;
  width:28px;height:3px;background:var(--orange);border-radius:2px;
}
.sec-see-all{font-size:13px;font-weight:700;color:var(--orange);transition:opacity .15s}
.sec-see-all:hover{opacity:.75}
.section-gap{margin-bottom:48px}

/* ═══ SORT + VIEW BAR ═══ */
.sort-bar{
  display:flex;align-items:center;gap:0;
  background:var(--bg3);border:1px solid var(--border);
  border-radius:12px;padding:8px 16px;
  margin-bottom:10px;
}
.sort-btn{
  display:flex;align-items:center;gap:7px;
  padding:8px 16px;font-size:13px;font-weight:700;color:var(--t2);
  border-right:1px solid var(--border);
  transition:color .15s;cursor:pointer;
}
.sort-btn:hover{color:var(--t1)}
.view-btns{display:flex;align-items:center;gap:10px;padding-left:16px}
.vbtn{
  width:32px;height:32px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  color:var(--t3);transition:all .15s;
}
.vbtn.on{background:var(--orange);color:var(--white)}
.vbtn:hover:not(.on){color:var(--t1)}
.results-count{font-size:12px;font-weight:700;color:var(--t3);margin-bottom:10px}

/* ═══ PRODUCT GRID ═══ */
.pgrid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;margin-bottom:48px;
}
.pgrid.list{
  grid-template-columns:1fr 1fr;gap:12px;
}
@media(max-width:960px){.pgrid{grid-template-columns:repeat(3,1fr)}}

/* ═══ PRODUCT CARD ═══ */
.pcard{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:12px;overflow:hidden;
  display:flex;flex-direction:column;cursor:pointer;
  transition:box-shadow .22s,border-color .22s,transform .22s;
}
.pcard:hover{
  border-color:rgba(255,98,0,.4);
  box-shadow:var(--shadow-lg);
  transform:translateY(-2px);
}
.pcard:active{transform:scale(.98)}
.pcard-img{
  width:100%;aspect-ratio:1/1;
  background:var(--bg3);position:relative;overflow:hidden;flex-shrink:0;
}
.pcard-img img{width:100%;height:100%;object-fit:cover;transition:transform .3s var(--ease)}
.pcard:hover .pcard-img img{transform:scale(1.04)}
.pcard-badge{
  position:absolute;top:8px;left:8px;z-index:2;
  font-size:9px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
  padding:3px 10px;border-radius:999px;
}
.pcard-badge.popular{background:var(--orange);color:var(--white)}
.pcard-badge.new{background:var(--green);color:var(--white)}
.pcard-badge.hot{background:#ef4444;color:var(--white)}
.pcard-body{padding:12px;flex:1;display:flex;flex-direction:column;gap:3px}
.pcard-name{
  font-family:'Barlow Condensed',sans-serif;
  font-size:17px;font-weight:600;color:var(--t1);line-height:1.15;
}
.pcard-desc{font-size:13px;color:var(--t2);line-height:1.4;flex:1}
.pcard-foot{display:flex;align-items:flex-end;justify-content:space-between;margin-top:8px}
.pcard-disc{font-size:9px;font-weight:700;color:var(--success);display:flex;align-items:center;gap:4px}
.pcard-orig{font-size:9px;color:var(--t3);text-decoration:line-through}
.pcard-price{
  font-family:'Barlow Condensed',sans-serif;
  font-size:24px;font-weight:600;color:var(--t1);line-height:1;
}
.pcard-price small{font-size:12px;font-weight:700}
.pcard-add{
  width:34px;height:34px;border-radius:50%;
  background:var(--orange);color:var(--white);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  box-shadow:0 4px 14px rgba(255,98,0,.4),0 2px 4px rgba(0,0,0,.2),0 1px 0 rgba(255,255,255,.1) inset;transition:all .15s;
}
.pcard-add:hover{transform:scale(1.1)}
.pcard-qty{
  display:flex;align-items:center;
  background:var(--bg3);border:1px solid var(--border);
  border-radius:16px;height:34px;overflow:hidden;
}
.pcard-qbtn{
  width:28px;height:100%;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;color:var(--t1);transition:background .15s;
}
.pcard-qbtn:hover{background:var(--bg4)}
.pcard-qval{
  width:24px;text-align:center;
  font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:600;
}
/* List mode card */
.pgrid.list .pcard{flex-direction:row;min-height:100px}
.pgrid.list .pcard-img{width:120px;height:120px;aspect-ratio:unset;flex-shrink:0}
.pgrid.list .pcard-body{padding:14px}
.pgrid.list .pcard-name{font-size:16px}
.pgrid.list .pcard-desc{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* ═══ SIDEBAR ═══ */
.sb-overlay{
  position:fixed;inset:0;z-index:1000;
  background:rgba(5,8,14,.82);backdrop-filter:blur(8px);
  opacity:0;pointer-events:none;transition:opacity .25s var(--ease);
}
.sb-overlay.open{opacity:1;pointer-events:all}
.sidebar{
  position:absolute;left:0;top:0;bottom:0;
  width:346px;background:var(--bg);
  display:flex;flex-direction:column;
  transform:translateX(-100%);transition:transform .3s var(--ease);
  box-shadow:20px 0 60px rgba(0,0,0,.6);overflow-y:auto;
}
.sb-overlay.open .sidebar{transform:translateX(0)}
.sb-head{
  background:var(--orange);padding:18px 16px;
  display:flex;align-items:center;gap:12px;flex-shrink:0;min-height:76px;
  cursor:pointer;
}
.sb-head-user{
  width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.2);border:1.5px solid rgba(255,255,255,.35);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.sb-head-info{flex:1}
.sb-head-cta{
  font-size:16px;font-weight:900;color:var(--white);
  font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.5px;
  display:block;line-height:1.1;
}
.sb-head-sub{font-size:11px;color:rgba(255,255,255,.7);font-weight:600;margin-top:2px;display:block}
.sb-close{
  width:34px;height:34px;border-radius:50%;
  background:rgba(0,0,0,.2);color:var(--white);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.sb-close:hover{background:rgba(0,0,0,.38)}
.sb-addr{
  display:flex;align-items:center;gap:12px;
  padding:13px 16px;border-bottom:1px solid var(--border);cursor:pointer;
}
.sb-addr:hover{background:var(--bg3)}
.sb-addr-lbl{font-size:10px;color:var(--t3);text-transform:uppercase;letter-spacing:.5px;font-weight:700}
.sb-addr-val{font-size:13px;font-weight:700;color:var(--t1)}
.sb-section-lbl{
  font-size:10px;font-weight:800;color:var(--t3);
  text-transform:uppercase;letter-spacing:1.5px;padding:14px 16px 7px;
}
.sb-item{
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 16px;font-size:14px;font-weight:600;color:var(--t2);
  border-left:3px solid transparent;transition:all .15s;cursor:pointer;
}
.sb-item:hover,.sb-item.on{
  color:var(--orange);background:rgba(255,98,0,.06);border-left-color:var(--orange);
}
.sb-item-l{display:flex;align-items:center;gap:12px}
.sb-chevron{color:var(--t3);font-size:13px}
.sb-divider{height:1px;background:var(--border);margin:6px 16px}
.sb-call{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;margin-top:auto;
  font-size:13px;font-weight:700;color:var(--t2);
  border-top:1px solid var(--border);cursor:pointer;
}
.sb-call:hover{background:var(--bg3);color:var(--orange)}

/* ═══ PANEL DE CUENTA — lateral derecho estilo KFC/Popeyes ═══ */
#acct-panel-overlay{
  position:fixed;inset:0;z-index:830;
  background:rgba(5,8,14,.7);backdrop-filter:blur(8px);
  opacity:0;pointer-events:none;transition:opacity .25s var(--ease);
}
#acct-panel-overlay.open{opacity:1;pointer-events:all}
.acct-side-panel{
  position:absolute;right:0;top:0;bottom:0;
  width:320px;background:var(--bg);
  display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .3s var(--ease);
  box-shadow:-12px 0 48px rgba(0,0,0,.5);
  overflow:hidden;
}
#acct-panel-overlay.open .acct-side-panel{transform:translateX(0)}
/* Cabecera */
.acct-sp-hdr{
  background:var(--orange);
  padding:18px 16px;
  display:flex;align-items:center;gap:12px;
  flex-shrink:0;position:relative;min-height:68px;
}
.acct-sp-avatar{
  width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.25);border:2px solid rgba(255,255,255,.45);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  font-family:'Barlow Condensed',sans-serif;font-size:17px;font-weight:900;color:var(--white);
}
.acct-sp-name{
  font-family:'Barlow Condensed',sans-serif;
  font-size:20px;font-weight:900;color:var(--white);
  text-transform:uppercase;letter-spacing:.3px;
}
.acct-sp-x{
  position:absolute;top:10px;right:10px;
  width:28px;height:28px;border-radius:50%;
  background:rgba(0,0,0,.2);color:var(--white);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .15s;
}
.acct-sp-x:hover{background:rgba(0,0,0,.4)}
/* Lista de opciones */
.acct-sp-list{flex-shrink:0}
.acct-sp-item{
  display:flex;align-items:center;gap:14px;
  padding:16px 20px;font-size:14px;font-weight:600;color:var(--t1);
  border-bottom:1px solid var(--border);cursor:pointer;
  transition:background .12s;
}
.acct-sp-item:hover{background:var(--bg3)}
.acct-sp-item svg{color:var(--t3);flex-shrink:0}
.acct-sp-item:hover svg{color:var(--orange)}
.acct-sp-item-chevron{margin-left:auto;color:var(--t3);font-size:16px}
.acct-sp-item.danger{color:var(--red)}
.acct-sp-item.danger svg{color:var(--red)}
/* Contenido de cada sección */
.acct-sp-content{flex:1;overflow-y:auto;padding:20px}
.acct-sp-back{
  display:flex;align-items:center;gap:8px;
  font-size:13px;font-weight:700;color:var(--orange);
  cursor:pointer;margin-bottom:18px;
}
.acct-sp-back:hover{opacity:.8}
.acct-sp-section-title{
  font-family:'Barlow Condensed',sans-serif;
  font-size:22px;font-weight:900;margin-bottom:16px;
}
/* Campos de datos */
.acct-sp-field{margin-bottom:13px}
.acct-sp-lbl{
  display:block;font-size:10px;font-weight:700;color:var(--t3);
  text-transform:uppercase;letter-spacing:.7px;margin-bottom:5px;
}
.acct-sp-val{
  width:100%;background:var(--bg);border:1.5px solid rgba(255,255,255,.18);
  color:var(--t1);padding:11px 14px;border-radius:12px;
  font-size:14px;font-family:inherit;
}
.acct-sp-input{
  width:100%;background:var(--bg);border:1.5px solid rgba(255,255,255,.18);
  color:var(--t1);padding:11px 14px;border-radius:12px;
  font-size:14px;outline:none;transition:border-color .18s;font-family:inherit;
}
.acct-sp-input:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,98,0,.15);outline:none}
.acct-sp-input::placeholder{color:var(--t2)}
.acct-sp-btn{
  width:100%;height:46px;background:var(--orange);color:var(--white);
  font-family:'Barlow Condensed',sans-serif;font-size:17px;font-weight:600;
  border-radius:12px;
  box-shadow:0 4px 16px rgba(255,98,0,.38),0 2px 6px rgba(0,0,0,.22),0 1px 0 rgba(255,255,255,.1) inset;transition:all .15s;
  margin-bottom:10px;
}
.acct-sp-btn:hover{background:var(--orange-h)}
.acct-sp-btn:active{transform:scale(.97);background:var(--orange-h)}
.acct-sp-err{color:var(--red);font-size:12px;font-weight:600;min-height:16px;margin-bottom:10px}
/* Pedidos */
.acct-sp-order{
  background:var(--bg3);border:1px solid var(--border);
  border-radius:12px;padding:13px;margin-bottom:10px;
}
.acct-sp-order-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:3px}
.acct-sp-order-num{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:900;color:var(--orange)}
.acct-sp-order-badge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:999px;background:rgba(255,98,0,.15);color:#ffb380}
.acct-sp-order-date{font-size:11px;color:var(--t3);margin-bottom:5px}
.acct-sp-order-lines{font-size:12px;color:var(--t2);line-height:1.5;margin-bottom:5px}
.acct-sp-order-total{font-family:'Barlow Condensed',sans-serif;font-size:17px;font-weight:900;color:var(--orange)}
/* Seguimiento */
.acct-sp-track-step{
  display:flex;align-items:flex-start;gap:14px;
  padding:14px 0;border-bottom:1px solid var(--border2);
}
.acct-sp-track-step:last-child{border-bottom:none}
.acct-sp-track-dot{
  width:28px;height:28px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;margin-top:1px;
}
.acct-sp-track-dot.done{background:var(--success);color:var(--white)}
.acct-sp-track-dot.active{background:var(--orange);color:var(--white);animation:pulse-dot 1.5s infinite}
.acct-sp-track-dot.pending{background:var(--bg3);color:var(--t3)}
@keyframes pulse-dot{0%,100%{box-shadow:0 0 0 0 rgba(255,98,0,.4)}50%{box-shadow:0 0 0 6px rgba(255,98,0,0)}}
.acct-sp-track-info-title{font-size:14px;font-weight:700;color:var(--t1)}
.acct-sp-track-info-sub{font-size:12px;color:var(--t3);margin-top:2px}
/* Eliminar cuenta */
.acct-sp-delete{
  font-size:12px;color:var(--red);cursor:pointer;
  text-align:center;margin-top:16px;
}
.acct-sp-delete:hover{opacity:.8}

/* ═══ VISTA DE CUENTA — layout estilo KFC ═══ */
.acct-view-wrap{
  display:flex;gap:0;min-height:calc(100vh - var(--HDR));
  max-width:var(--MAX);margin:0 auto;padding:32px 24px 80px;
}
.acct-view-nav{
  width:260px;flex-shrink:0;margin-right:32px;
}
.acct-view-nav-hdr{
  display:flex;align-items:center;gap:14px;
  padding:0 0 20px;border-bottom:1px solid var(--border);margin-bottom:8px;
}
.acct-view-nav-avatar{
  width:46px;height:46px;border-radius:50%;
  background:var(--orange);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  font-family:'Barlow Condensed',sans-serif;font-size:18px;font-weight:900;color:var(--white);
}
.acct-view-nav-name{
  font-family:'Barlow Condensed',sans-serif;
  font-size:18px;font-weight:900;color:var(--t1);
}
.acct-view-nav-item{
  display:flex;align-items:center;gap:12px;
  padding:14px 12px;font-size:14px;font-weight:600;color:var(--t2);
  border-radius:12px;cursor:pointer;transition:all .15s;
  border-left:3px solid transparent;
}
.acct-view-nav-item:hover{background:var(--bg3);color:var(--t1)}
.acct-view-nav-item.on{
  background:rgba(255,98,0,.08);color:var(--orange);
  border-left-color:var(--orange);
}
.acct-view-nav-item.on svg{color:var(--orange)}
.acct-view-nav-item svg{color:var(--t3);flex-shrink:0}
.acct-view-nav-chevron{margin-left:auto;color:var(--t3);font-size:16px}
.acct-view-nav-item.danger{color:var(--red)}
.acct-view-nav-item.danger svg{color:var(--red)}
/* Contenido principal */
.acct-view-main{
  flex:1;min-width:0;
  padding:28px 32px;
}
.acct-view-section-title{
  font-family:'Barlow Condensed',sans-serif;
  font-size:26px;font-weight:900;margin-bottom:6px;
}
.acct-view-section-sub{font-size:13px;color:var(--t3);margin-bottom:24px}
.acct-view-header-row{
  display:flex;align-items:flex-start;justify-content:space-between;
  margin-bottom:24px;gap:16px;
}
.acct-view-header-row .acct-view-section-title{margin-bottom:4px}
.acct-view-header-row .acct-view-section-sub{margin-bottom:0}
.acct-view-link-btn{
  font-size:14px;font-weight:700;color:var(--orange);
  display:flex;align-items:center;gap:6px;
  transition:opacity .15s;white-space:nowrap;
}
.acct-view-link-btn:hover{opacity:.75}
.acct-view-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px;
}
.acct-view-field{display:flex;flex-direction:column;gap:5px}
.acct-view-lbl{
  font-size:10px;font-weight:700;color:var(--t3);
  text-transform:uppercase;letter-spacing:.7px;
}
.acct-view-val{
  background:var(--bg);border:1.5px solid rgba(255,255,255,.18);
  color:var(--t2);padding:11px 14px;border-radius:12px;font-size:14px;
}
.acct-view-input{
  background:var(--bg);border:1.5px solid rgba(255,255,255,.18);
  color:var(--t1);padding:11px 14px;border-radius:12px;font-size:14px;
  outline:none;transition:border-color .18s;font-family:inherit;width:100%;
}
.acct-view-input:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,98,0,.15);outline:none}
.acct-view-err{color:var(--red);font-size:12px;font-weight:600;min-height:16px;margin-bottom:10px}
.acct-view-actions{display:flex;gap:10px;margin-bottom:12px}
.acct-view-btn{
  height:42px;padding:0 24px;background:var(--orange);color:var(--white);
  font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:600;
  border-radius:12px;
  box-shadow:0 4px 16px rgba(255,98,0,.35),0 2px 6px rgba(0,0,0,.2),0 1px 0 rgba(255,255,255,.1) inset;transition:all .15s;
  display:flex;align-items:center;gap:6px;
}
.acct-view-btn:hover{background:var(--orange-h)}
.acct-view-btn:active{transform:scale(.97);background:var(--orange-h)}
.acct-view-btn.sec{background:var(--bg3);color:var(--t2);box-shadow:none}
.acct-view-btn.sec:hover{background:var(--bg4);color:var(--t1)}
.acct-view-btn-link{
  font-size:14px;font-weight:700;color:var(--orange);
  display:flex;align-items:center;gap:5px;
  transition:opacity .15s;
}
.acct-view-btn-link:hover{opacity:.75}
.acct-view-delete{
  font-size:12px;color:var(--red);cursor:pointer;display:inline-block;margin-top:8px;
}
.acct-view-delete:hover{opacity:.8}

/* Formulario Mis direcciones */
.addr-form{}
.addr-map{
  width:100%;height:320px;border-radius:12px;overflow:hidden;
  background:var(--bg);border:1px solid rgba(255,255,255,.18);
  margin-bottom:14px;position:relative;
  display:block;
}
.addr-map-placeholder{
  height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
}
.addr-map-text{font-size:13px;color:var(--t3);font-weight:600}
.addr-map-sub{font-size:11px;color:var(--t3);opacity:.7}
.addr-gps{
  display:flex;align-items:center;gap:8px;
  font-size:13px;font-weight:700;color:var(--orange);
  margin-bottom:16px;cursor:pointer;width:fit-content;
}
.addr-gps:hover{opacity:.75}
.addr-field{margin-bottom:14px}
.addr-label{
  display:flex;align-items:center;gap:6px;
  font-size:13px;font-weight:700;color:var(--t1);margin-bottom:6px;
}
.addr-label svg{color:var(--t2)}
.addr-input{
  width:100%;background:var(--bg);border:1.5px solid rgba(255,255,255,.18);
  color:var(--t1);padding:12px 14px;border-radius:12px;font-size:14px;
  outline:none;transition:border-color .18s;font-family:inherit;
}
.addr-input:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,98,0,.15);outline:none}
.addr-input::placeholder{color:var(--t2)}
.addr-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.addr-labels{display:flex;gap:10px;flex-wrap:wrap}
.addr-label-opt{
  display:flex;align-items:center;gap:8px;
  padding:10px 16px;border-radius:12px;
  background:var(--bg2);border:1.5px solid var(--border);
  font-size:13px;font-weight:600;color:var(--t2);
  cursor:pointer;transition:all .15s;
}
.addr-label-opt:hover{border-color:var(--t3)}
.addr-label-opt.sel{border-color:var(--orange);color:var(--t1);background:rgba(255,98,0,.08)}
.addr-label-opt svg{color:var(--t2)}
.addr-label-opt.sel svg{color:var(--orange)}
.addr-label-radio{
  width:16px;height:16px;border-radius:50%;
  border:2px solid var(--border);
  position:relative;transition:all .15s;
}
.addr-label-opt.sel .addr-label-radio{border-color:var(--orange)}
.addr-label-opt.sel .addr-label-radio::after{
  content:'';position:absolute;
  top:3px;left:3px;width:6px;height:6px;
  background:var(--orange);border-radius:50%;
}
.addr-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:20px}
.addr-cancel{
  font-size:14px;font-weight:700;color:var(--red);
  padding:10px 20px;transition:opacity .15s;
}
.addr-cancel:hover{opacity:.75}
.addr-save{
  background:var(--orange);color:var(--white);
  font-family:'Barlow Condensed',sans-serif;
  font-size:15px;font-weight:800;
  padding:12px 24px;border-radius:12px;
  box-shadow:0 4px 16px rgba(255,98,0,.35),0 2px 6px rgba(0,0,0,.2),0 1px 0 rgba(255,255,255,.1) inset;transition:background .15s;
}
.addr-save:hover{background:var(--orange-h)}

/* Tarjetas de direcciones guardadas */
.addr-card{
  display:flex;align-items:flex-start;gap:14px;
  background:var(--bg3);border:1px solid var(--border);
  border-radius:12px;padding:16px;margin-bottom:10px;
}
.addr-card-icon{color:var(--orange);flex-shrink:0;margin-top:2px}
.addr-card-info{flex:1;min-width:0}
.addr-card-label{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:800;margin-bottom:2px}
.addr-card-address{font-size:13px;color:var(--t2);line-height:1.4}
.addr-card-ref{font-size:12px;color:var(--t3);margin-top:4px}
.addr-card-actions{display:flex;gap:12px;flex-shrink:0}
.addr-card-btn{
  display:flex;align-items:center;gap:5px;
  font-size:13px;font-weight:700;transition:opacity .15s;
}
.addr-card-btn:hover{opacity:.75}
.addr-card-btn.delete{color:var(--red)}
.addr-card-btn.edit{color:var(--orange)}

/* Pedidos */
.acct-view-order{
  background:var(--bg3);border:1px solid var(--border);
  border-radius:12px;padding:16px;margin-bottom:12px;
}
.acct-view-order-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.acct-view-order-num{font-family:'Barlow Condensed',sans-serif;font-size:18px;font-weight:900;color:var(--orange)}
.acct-view-order-badge{font-size:10px;font-weight:700;padding:3px 10px;border-radius:999px;background:rgba(255,98,0,.15);color:#ffb380}
.acct-view-order-date{font-size:11px;color:var(--t3);margin-bottom:6px}
.acct-view-order-lines{font-size:13px;color:var(--t2);line-height:1.5;margin-bottom:6px}
.acct-view-order-total{font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:900;color:var(--orange)}
/* Seguimiento */
.acct-view-track{display:flex;flex-direction:column}
.acct-view-track-step{
  display:flex;align-items:flex-start;gap:16px;
  padding:16px 0;border-bottom:1px solid var(--border2);
}
.acct-view-track-step:last-child{border-bottom:none}
.acct-view-track-dot{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;margin-top:1px;
}
.acct-view-track-dot.done{background:var(--success);color:var(--white)}
.acct-view-track-dot.active{background:var(--orange);color:var(--white);animation:pulse-dot 1.5s infinite}
.acct-view-track-dot.pending{background:var(--bg3);color:var(--t3)}
.acct-view-track-title{font-size:15px;font-weight:700;color:var(--t1)}
.acct-view-track-sub{font-size:12px;color:var(--t3);margin-top:3px}

/* ═══ CART PANEL — 420px right drawer ═══ */
.cart-overlay{
  position:fixed;inset:0;z-index:1000;
  background:rgba(5,8,14,.8);backdrop-filter:blur(10px);
  opacity:0;pointer-events:none;transition:opacity .25s var(--ease);
}
.cart-overlay.open{opacity:1;pointer-events:all}
.cart-panel{
  position:absolute;right:0;top:0;bottom:0;
  width:420px;background:var(--bg);
  display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .3s var(--ease);
  box-shadow:-20px 0 60px rgba(0,0,0,.6);
}
.cart-overlay.open .cart-panel{transform:translateX(0)}
.cart-hdr{
  height:60px;flex-shrink:0;padding:0 20px;
  border-bottom:1px solid rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:space-between;
}
.cart-title{
  font-family:'Barlow Condensed',sans-serif;
  font-size:20px;font-weight:700;text-transform:uppercase;
  display:flex;align-items:center;gap:8px;
}
.cart-x{
  width:34px;height:34px;border-radius:50%;
  background:var(--bg3);border:1px solid var(--border);
  color:var(--t1);display:flex;align-items:center;justify-content:center;
}
.cart-x:hover{background:var(--bg4)}
.cart-body{flex:1;overflow-y:auto}
.cart-empty{
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;height:100%;padding:40px 24px;text-align:center;
}
.cart-empty-icon{margin-bottom:16px;opacity:.2}
.cart-empty-title{
  font-family:'Barlow Condensed',sans-serif;
  font-size:22px;font-weight:900;margin-bottom:8px;
}
.cart-empty-sub{font-size:13px;color:var(--t2);line-height:1.6;margin-bottom:20px}
.cart-empty-cta{
  background:var(--orange);color:var(--white);
  padding:12px 28px;border-radius:12px;
  font-family:'Barlow Condensed',sans-serif;
  font-size:17px;font-weight:600;
  box-shadow:0 4px 18px rgba(255,98,0,.4),0 2px 6px rgba(0,0,0,.22),0 1px 0 rgba(255,255,255,.1) inset;
}
.cart-items{padding:8px 16px}
.cart-item{
  display:flex;gap:12px;padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,.18);
}
.cart-item:last-child{border-bottom:none}
.cart-item-img{
  width:60px;height:60px;border-radius:12px;
  background:var(--bg3);flex-shrink:0;overflow:hidden;cursor:pointer;
}
.cart-item-img img{width:100%;height:100%;object-fit:cover}
.cart-item-info{flex:1;min-width:0}
.cart-item-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:4px}
.cart-item-name{
  font-family:'Barlow Condensed',sans-serif;
  font-size:15px;font-weight:600;cursor:pointer;
  line-height:1.2;
}
.cart-item-name:hover{color:var(--orange)}
.cart-item-del{color:var(--orange);transition:all .15s;cursor:pointer;display:flex;align-items:center;flex-shrink:0;padding:2px}
.cart-item-del:hover{color:var(--orange)}
.cart-item-see{font-size:12px;color:var(--t1);cursor:pointer;margin-bottom:6px;display:inline-flex;align-items:center;gap:3px}
.cart-item-see:hover{color:var(--t1)}
.cart-item-see-arrow{transition:transform .2s;display:inline-block;color:var(--orange)}
.cart-item-see-arrow{transition:transform .2s;display:inline-block}
.cart-item-see.open .cart-item-see-arrow{transform:rotate(180deg)}
.cart-item-detail{font-size:11px;color:var(--t1);line-height:1.5;margin-bottom:6px;display:none}
.cart-item-detail.show{display:block}
.cart-item-foot{display:flex;align-items:center;justify-content:space-between}
.cart-item-price{
  font-family:'Barlow Condensed',sans-serif;
  font-size:19px;font-weight:600;color:var(--orange);
}
.cart-item-qty{display:flex;align-items:center;gap:0;border:1.5px solid rgba(255,255,255,.18);border-radius:999px;overflow:hidden}
.cart-item-qty-btn{
  width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  font-size:16px;cursor:pointer;color:var(--t1);transition:background .15s;
  background:transparent;border:none;
}
.cart-item-qty-btn:hover{background:var(--bg3)}
.cart-item-qty-btn.disabled{color:var(--t3);cursor:not-allowed}
.cart-item-qty-btn.disabled:hover{background:transparent}
.cart-item-qty-val{
  font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:600;
  min-width:24px;text-align:center;color:var(--t1);
}
.cart-upsell{padding:12px 16px;}
.cart-upsell-lbl{font-size:10px;font-weight:800;color:var(--t1);text-transform:uppercase;letter-spacing:1px;margin-bottom:10px}
.cart-upsell-row{display:flex;gap:8px;padding-bottom:2px;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;cursor:grab;touch-action:pan-x}
.cart-upsell-row:active{cursor:grabbing}
.cart-upsell-row::-webkit-scrollbar{display:none}
.cart-upsell-row .cupc{scroll-snap-align:start}
.cupc{
  flex-shrink:0;width:88px;background:#10141A;border:1px solid rgba(255,255,255,.18);
  border-radius:12px;padding:8px 7px;text-align:center;cursor:pointer;
}
.cupc:hover{border-color:rgba(255,98,0,.4)}
.cupc-img{width:100%;aspect-ratio:1/1;border-radius:12px;overflow:hidden;margin-bottom:5px}
.cupc-img img{width:100%;height:100%;object-fit:cover}
.cupc-name{font-size:10px;font-weight:700;color:var(--t1);margin-bottom:2px;line-height:1.3}
.cupc-price{font-size:12px;font-weight:800;color:var(--orange)}
.cart-upsell-nav{display:flex;justify-content:center;gap:10px;margin-top:8px}
.cart-upsell-arr{
  width:26px;height:26px;border-radius:50%;
  background:var(--bg3);border:1px solid var(--border);
  color:var(--t1);font-size:14px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;
}
.cart-upsell-arr:hover{background:var(--orange);border-color:var(--orange)}
.cart-upsell-arr.gone{opacity:0;pointer-events:none}
.cart-foot{
  padding:16px;border-top:1px solid var(--border);
  background:var(--bg);flex-shrink:0;
}
.cart-row{display:flex;justify-content:space-between;font-size:13px;color:var(--t1);margin-bottom:6px}
.cart-total{
  display:flex;justify-content:space-between;
  font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:700;
  margin-bottom:14px;
}
.cart-total em{color:var(--orange);font-style:normal}
.btn-pay{
  width:100%;height:50px;
  background:var(--orange);color:var(--white);
  font-family:'Barlow Condensed',sans-serif;
  font-size:18px;font-weight:600;
  border-radius:12px;letter-spacing:.4px;
  box-shadow:0 4px 20px rgba(255,98,0,.4),0 2px 6px rgba(0,0,0,.25),0 1px 0 rgba(255,255,255,.1) inset;transition:all .15s;
}
.btn-pay:hover{background:var(--orange-h);transform:translateY(-1px)}
.btn-pay:active{transform:scale(.97);background:var(--orange-h)}
.btn-seguir{width:100%;margin-top:10px;font-size:12px;font-weight:700;color:var(--orange);padding:6px}

/* ═══ PRODUCT DETAIL — desktop: image left + accordion right ═══ */
#detail-page{
  position:fixed;
  top:calc(var(--HDR));
  left:0;right:0;bottom:0;
  z-index:800;background:var(--bg);
  display:flex;flex-direction:column;
  transform:translateY(100%);
  transition:transform .38s var(--ease), top .28s var(--ease);
  overflow:hidden;
}
#detail-page.open{transform:translateY(0)}
.det-hdr{
  height:60px;flex-shrink:0;background:var(--bg2);border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:14px;padding:0 24px;
  box-shadow:var(--shadow-sm);
}
.det-back{
  width:38px;height:38px;border-radius:50%;
  background:var(--bg3);border:1px solid var(--border);color:var(--t1);
  display:flex;align-items:center;justify-content:center;
}
.det-back:hover{background:var(--bg4)}
.det-hdr-name{
  flex:1;font-family:'Barlow Condensed',sans-serif;
  font-size:26px;font-weight:700;
}
.det-hdr-price{
  font-family:'Barlow Condensed',sans-serif;
  font-size:28px;font-weight:600;color:var(--orange);flex-shrink:0;
}
.det-body{display:flex;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden}
/* LEFT — 40% */
.det-left{
  width:40%;flex-shrink:0;
  padding:10px 24px 24px 32px;
  background:var(--bg);
  position:sticky;top:0;align-self:flex-start;
}
.det-left::-webkit-scrollbar{display:none}
.det-img{
  width:100%;aspect-ratio:16/10;border-radius:16px;overflow:hidden;
  background:var(--bg3);margin-bottom:14px;position:relative;
}
.det-img img{width:100%;height:100%;object-fit:cover}
.det-img-ref{
  position:absolute;bottom:8px;left:10px;
  font-size:8px;color:rgba(255,255,255,.35);
  text-transform:uppercase;letter-spacing:.5px;font-weight:600;
}
.det-price-big{
  font-family:'Barlow Condensed',sans-serif;
  font-size:30px;font-weight:600;color:var(--t1);
  display:flex;align-items:baseline;gap:4px;margin-bottom:2px;
}
.det-price-big small{font-size:15px}
.det-price-reg{
  font-size:12px;color:var(--t3);margin-bottom:10px;
  display:flex;align-items:center;gap:7px;
}
.det-price-pct{color:var(--success);font-weight:700}
.det-name{
  font-family:'Barlow Condensed',sans-serif;
  font-size:26px;font-weight:900;margin-bottom:8px;line-height:1.1;
}
.det-desc{font-size:15px;color:var(--t2);line-height:1.6;margin-bottom:16px}
.det-includes{
  background:var(--bg3);border:1px solid var(--border);
  border-radius:12px;padding:14px 16px;
}
.det-inc-lbl{font-size:9px;font-weight:800;color:var(--t3);text-transform:uppercase;letter-spacing:1px;margin-bottom:10px}
.det-inc-row{
  display:flex;align-items:center;gap:8px;
  font-size:12px;font-weight:600;color:rgba(255,255,255,.8);margin-bottom:6px;
}
.det-inc-row:last-child{margin-bottom:0}
.det-inc-dot{width:5px;height:5px;border-radius:50%;background:var(--orange);flex-shrink:0}

/* Checklist personaliza */
.det-checklist{
  margin-top:16px;
}
.det-checklist-title{
  font-size:10px;font-weight:800;color:var(--t3);
  text-transform:uppercase;letter-spacing:1px;
  padding:0 0 10px 0;margin-bottom:4px;
  border-bottom:1px solid var(--border);
}
.det-check-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 0;border-bottom:1px solid var(--border2);
  gap:8px;
}
.det-check-row:last-child{border-bottom:none}
.det-check-name{
  font-size:12px;font-weight:700;color:var(--t2);flex:1;
  line-height:1.3;
}
.det-check-name.done{color:var(--t1)}
.det-check-badge{
  font-size:9px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;white-space:nowrap;flex-shrink:0;
}
.det-check-badge.req{border:1.5px solid var(--t3);color:var(--t3)}
.det-check-badge.opt{border:1.5px solid var(--border);color:var(--t3)}
.det-check-badge.done{background:var(--success-bg);border:1.5px solid var(--success-bd);color:var(--success)}
/* RIGHT — 60% accordion */
.det-right{flex:1;display:flex;flex-direction:column}
.det-right-scroll{flex:1;padding:10px 0 100px}
/* ACCORDION */
.acc-step{
  border:1px solid rgba(255,98,0,.35);
  border-radius:12px;
  margin:0 20px 18px;
  background:var(--bg);
  overflow:hidden;
  transition:border-color .2s;
}
.acc-step.active-step{border-color:var(--orange)}
.acc-step.done-step{border-color:rgba(255,98,0,.25)}
.acc-hdr{
  width:100%;text-align:left;padding:16px 20px;
  display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
}
.acc-hdr:hover{background:rgba(255,255,255,.015)}
.acc-hdr-l{flex:1;min-width:0}
.acc-hdr-title{font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:600;color:var(--t1);margin-bottom:2px}
.acc-hdr-sub{font-size:13px;color:var(--t2);line-height:1.6}
.acc-hdr-r{display:flex;align-items:center;gap:8px;flex-shrink:0}
.badge{font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;padding:3px 9px;border-radius:999px;white-space:nowrap}
.badge-req{border:1.5px solid var(--t3);color:var(--t3)}
.badge-opt{border:1.5px solid var(--border);color:var(--t3)}
.badge-done{background:var(--success-bg);border:1.5px solid var(--success-bd);color:var(--success);animation:bpop .25s var(--spring)}
.badge-done-static{background:var(--success-bg);border:1.5px solid var(--success-bd);color:var(--success)}
@keyframes bpop{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}
.acc-chev{color:var(--t3);font-size:13px;transition:transform .25s var(--ease);flex-shrink:0}
.acc-step.open .acc-chev{transform:rotate(180deg)}
.acc-body{max-height:0;overflow:hidden;transition:max-height .35s var(--ease)}
.acc-step.open .acc-body{max-height:1200px}
.acc-opt{
  display:flex;align-items:center;gap:12px;
  padding:11px 16px;border-bottom:1px solid var(--border);
  cursor:pointer;transition:background .12s;
}
.acc-opt:last-child{border-bottom:none}
.acc-opt:hover,.acc-opt.sel{background:rgba(255,98,0,.04)}
.acc-opt-img{
  width:46px;height:46px;border-radius:12px;
  background:#10141A;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:22px;overflow:hidden;
}
.acc-opt-img img{width:100%;height:100%;object-fit:cover}
.acc-opt-info{flex:1;min-width:0}
.acc-opt-name{font-size:15px;font-weight:500;color:var(--t1);margin-bottom:1px}
.acc-opt-sub{font-size:11px;color:var(--t2)}
.acc-opt-extra{font-size:12px;font-weight:700;color:var(--t2);flex-shrink:0;margin-right:8px}
.acc-radio{
  width:22px;height:22px;border-radius:50%;
  border:2px solid var(--t3);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s var(--spring);
}
.acc-opt.sel .acc-radio{
  border-color:var(--orange);background:var(--orange);
  box-shadow:0 0 10px rgba(255,98,0,.45);transform:scale(1.08);
}
.acc-radio-dot{width:8px;height:8px;border-radius:50%;background:var(--white);opacity:0;transition:opacity .15s}
.acc-opt.sel .acc-radio-dot{opacity:1}
.acc-upg{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:13px 20px;border-bottom:1px solid var(--border);cursor:pointer;
}
.acc-upg:last-child{border-bottom:none}
.acc-upg:hover{background:rgba(255,255,255,.015)}
.acc-upg-l{display:flex;align-items:center;gap:12px;min-width:0;flex:1}
.acc-upg-name{font-size:15px;font-weight:500;color:var(--t1)}
.acc-upg-sub{font-size:11px;color:var(--t2)}
.acc-upg-add{
  width:36px;height:36px;border-radius:12px;flex-shrink:0;
  background:var(--bg3);border:1.5px solid var(--border);
  color:var(--t1);font-size:20px;display:flex;align-items:center;justify-content:center;
}
.acc-upg-add:hover{background:var(--orange);border-color:var(--orange)}
.acc-upg-qty{display:flex;align-items:center;background:var(--bg3);border:1.5px solid var(--border);border-radius:12px;overflow:hidden;height:36px;flex-shrink:0}
.acc-upg-qbtn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--t1)}
.acc-upg-qbtn:hover{background:var(--orange)}
.acc-upg-qval{width:28px;text-align:center;font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:900}
/* Detail footer */
.det-footer{
  height:68px;flex-shrink:0;
  background:var(--bg2);border-top:1px solid var(--border);
  display:flex;align-items:center;gap:14px;
  padding:0 32px;box-shadow:0 -4px 20px rgba(0,0,0,.35);
}
.det-qty{
  display:flex;align-items:center;
  background:var(--bg3);border:1.5px solid var(--border);
  border-radius:12px;overflow:hidden;height:46px;flex-shrink:0;
}
.det-qbtn{
  width:46px;height:100%;display:flex;align-items:center;justify-content:center;
  font-size:20px;color:var(--t1);transition:background .15s;
}
.det-qbtn:hover{background:var(--bg4)}
.det-qval{
  width:40px;text-align:center;
  font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:700;
  border-left:1px solid var(--border);border-right:1px solid var(--border);
}
.det-add-btn{
  flex:1;height:46px;background:var(--orange);color:var(--white);
  font-family:'Barlow Condensed',sans-serif;
  font-size:18px;font-weight:600;letter-spacing:.5px;
  border-radius:12px;box-shadow:0 4px 18px rgba(255,98,0,.4),0 2px 6px rgba(0,0,0,.22),0 1px 0 rgba(255,255,255,.1) inset;
  display:flex;align-items:center;justify-content:center;gap:8px;transition:all .15s;
}
.det-add-btn:hover{background:var(--orange-h);transform:translateY(-1px)}
.det-add-btn:active{transform:scale(.97);background:var(--orange-h)}
.det-add-btn:disabled{background:var(--bg3);color:var(--t3);box-shadow:none;transform:none;cursor:not-allowed;opacity:.6;border:1.5px solid var(--border)}

/* ═══ SEARCH DROPDOWN (desktop) ─── */
#srch-dropdown{
  position:fixed;
  width:560px;max-width:90vw;
  background:var(--bg2);border:1px solid var(--border);
  border-radius:16px;box-shadow:var(--shadow-lg);
  z-index:800;
  opacity:0;pointer-events:none;
  transition:opacity .2s var(--ease),transform .2s var(--ease);
  transform:translateY(-6px);
}
#srch-dropdown.open{
  opacity:1;pointer-events:all;
  transform:translateY(0);
}
/* Backdrop para cerrar al click fuera */
#srch-backdrop{
  position:fixed;inset:0;z-index:790;
  display:none;
}
#srch-backdrop.open{display:block}
.srch-dd-section{padding:16px 20px 8px;font-size:11px;font-weight:700;letter-spacing:.8px;color:var(--t3);text-transform:uppercase}
.srch-dd-history{padding:0 12px 8px;display:flex;flex-wrap:wrap;gap:6px}
.srch-dd-history-clear{
  margin-left:auto;font-size:11px;font-weight:700;color:var(--orange);
  cursor:pointer;padding:2px 6px;border-radius:999px;
  transition:opacity .15s;
}
.srch-dd-history-clear:hover{opacity:.7}
.srch-dd-chip{
  display:flex;align-items:center;gap:5px;
  background:var(--bg3);border:1px solid var(--border);
  border-radius:999px;padding:5px 12px;font-size:12px;color:var(--t2);
  cursor:pointer;transition:border-color .15s,color .15s;
}
.srch-dd-chip:hover{border-color:var(--orange);color:var(--t1)}
.srch-dd-chip svg{opacity:.5}
/* Fila de resultado */
.srch-dd-results{padding:0 0 8px}
.srch-result-row{
  display:flex;align-items:center;gap:14px;
  padding:10px 20px;cursor:pointer;
  transition:background .12s;
  border-bottom:1px solid var(--border2);
}
.srch-result-row:last-child{border-bottom:none}
.srch-result-row:hover{background:var(--bg3)}
.srch-result-img{
  width:64px;height:64px;border-radius:12px;
  object-fit:cover;flex-shrink:0;background:var(--bg3);
}
.srch-result-info{flex:1;min-width:0}
.srch-result-name{
  font-size:14px;font-weight:600;color:var(--t1);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  margin-bottom:4px;
}
.srch-result-name mark{background:none;color:var(--orange);font-weight:700}
.srch-result-prices{display:flex;align-items:center;gap:8px;font-size:13px}
.srch-result-pct{color:var(--success);font-weight:700;font-size:11px}
.srch-result-orig{color:var(--t3);text-decoration:line-through}
.srch-result-price{color:var(--t1);font-weight:700}
.srch-result-ver{
  font-size:12px;font-weight:700;color:var(--orange);
  flex-shrink:0;white-space:nowrap;
  padding:5px 10px;border-radius:999px;
  transition:background .12s;
}
.srch-result-row:hover .srch-result-ver{background:rgba(255,98,0,.1)}
/* Ver más productos */
.srch-dd-more{
  display:block;width:100%;
  padding:14px;text-align:center;
  font-size:13px;font-weight:700;color:var(--orange);
  border-top:1px solid var(--border);
  cursor:pointer;transition:background .12s;
  border-radius:0 0 16px 16px;
}
.srch-dd-more:hover{background:rgba(255,98,0,.06)}
.srch-dd-empty{
  padding:28px 20px;text-align:center;
  font-size:13px;color:var(--t3);
}

/* ═══ DELIVERY MODAL (desktop centered) ═══ */
#delivery-modal{
  position:fixed;inset:0;z-index:820;
  background:rgba(5,8,14,.82);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .25s var(--ease);
}
#delivery-modal.open{opacity:1;pointer-events:all}
.dm-panel{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:16px;width:820px;max-width:94vw;
  height:760px;max-height:92vh;
  overflow-y:auto;
  padding:28px;
  transform:scale(.95) translateY(16px);transition:transform .3s var(--spring);
  box-shadow:var(--shadow-xl);position:relative;
}
#delivery-modal.open .dm-panel{transform:scale(1) translateY(0)}
.dm-close{
  position:absolute;top:16px;right:16px;
  width:32px;height:32px;border-radius:50%;
  background:var(--bg3);border:1px solid var(--border);color:var(--t1);
  display:flex;align-items:center;justify-content:center;
}
.dm-close:hover{background:var(--bg4)}
.dm-title{
  font-family:'Barlow Condensed',sans-serif;
  font-size:24px;font-weight:700;margin-bottom:20px;text-align:center;
}
.dm-tabs{
  display:flex;background:var(--bg3);border:1px solid var(--border);
  border-radius:12px;padding:4px;margin-bottom:20px;gap:4px;
}
.dm-tab{
  flex:1;padding:10px;border-radius:12px;
  font-size:14px;font-weight:600;color:var(--t2);
  text-align:center;transition:all .2s;cursor:pointer;
}
.dm-tab.on{background:var(--orange);color:var(--white);box-shadow:0 2px 10px rgba(255,98,0,.4),0 1px 3px rgba(0,0,0,.2),0 1px 0 rgba(255,255,255,.1) inset}
.dm-delivery-fields{display:none}
.dm-delivery-fields.show{display:block}
.dm-map{
  width:100%;height:400px;border-radius:12px;overflow:hidden;
  background:var(--bg3);border:1.5px solid var(--border);
  margin-bottom:16px;position:relative;
  display:block;
}
.dm-map-placeholder{
  height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
}
.dm-map-placeholder{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  color:var(--t3);font-size:13px;font-weight:600;
}
.dm-gps-btn{
  display:flex;align-items:center;gap:8px;
  font-size:13px;font-weight:700;color:var(--orange);
  margin-bottom:16px;cursor:pointer;transition:opacity .15s;
  width:fit-content;
}
.dm-gps-btn:hover{opacity:.75}
.dm-gps-btn svg{flex-shrink:0}
.dm-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:0}
.dm-field{margin-bottom:14px}
.dm-lbl{display:block;font-size:13px;font-weight:700;color:var(--t1);margin-bottom:6px}
.dm-lbl svg{display:inline;margin-right:5px;vertical-align:middle;color:var(--t2)}
.dm-input{
  width:100%;background:var(--bg);border:1.5px solid rgba(255,255,255,.18);color:var(--t1);
  padding:12px 14px;border-radius:12px;font-size:14px;outline:none;transition:border-color .18s;
  font-family:inherit;
}
.dm-input:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,98,0,.15);outline:none}
.dm-input::placeholder{color:var(--t2)}
/* Checkbox guardar dirección */
.dm-save{
  display:flex;align-items:center;gap:10px;
  margin-top:16px;cursor:pointer;
}
.dm-save-box{
  width:20px;height:20px;border-radius:12px;
  border:2px solid var(--orange);
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;flex-shrink:0;
}
.dm-save.checked .dm-save-box{
  background:var(--orange);border-color:var(--orange);
}
.dm-save-box svg{opacity:0;transition:opacity .15s}
.dm-save.checked .dm-save-box svg{opacity:1}
.dm-save-text{font-size:14px;color:var(--t2)}

/* Contenido delivery con lista de direcciones */
.dm-delivery-content{display:none}
.dm-delivery-content.show{display:block}

/* Botón agregar dirección minimalista */
.dm-add-btn{
  display:flex;align-items:center;gap:8px;
  font-size:14px;font-weight:600;color:var(--t2);
  padding:14px 0;cursor:pointer;transition:color .15s;
}
.dm-add-btn:hover{color:var(--orange)}
.dm-add-btn svg{color:var(--t3);transition:color .15s}
.dm-add-btn:hover svg{color:var(--orange)}

/* Formulario inline - sin fondo extra, se integra directo */
.dm-form{}

/* Tarjetas de dirección en modal */
.dm-addr-item{
  display:flex;align-items:flex-start;gap:12px;
  padding:14px 16px;border-radius:12px;
  background:var(--bg3);border:1px solid var(--border);
  margin-bottom:10px;cursor:pointer;transition:all .15s;
}
.dm-addr-item:hover{border-color:var(--orange);background:rgba(255,98,0,.05)}
.dm-addr-item.selected{border-color:var(--orange);background:rgba(255,98,0,.08)}
.dm-addr-item-icon{color:var(--orange);flex-shrink:0;margin-top:2px}
.dm-addr-item-icon.history{color:var(--t3)}
.dm-addr-item-info{flex:1;min-width:0}
.dm-addr-item-label{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:800;margin-bottom:2px}
.dm-addr-item-address{font-size:13px;color:var(--t2);line-height:1.4}
.dm-addr-item-check{
  color:var(--orange);opacity:0;transition:opacity .15s;flex-shrink:0;
}
.dm-addr-item.selected .dm-addr-item-check{opacity:1}
.dm-addr-item-actions{
  display:flex;gap:8px;flex-shrink:0;
}
.dm-addr-item-btn{
  padding:6px;border-radius:12px;color:var(--t3);
  transition:all .15s;
}
.dm-addr-item-btn:hover{background:var(--bg4);color:var(--t1)}
.dm-addr-item-btn.delete:hover{color:var(--red)}
.dm-addr-item-btn.edit:hover{color:var(--orange)}

.dm-store-info{
  background:var(--bg3);border:1px solid var(--border);border-radius:12px;
  padding:16px;display:none;
}
.dm-store-info.show{display:block}
.dm-store-name{font-family:'Barlow Condensed',sans-serif;font-size:18px;font-weight:900;margin-bottom:4px}
.dm-store-addr{font-size:13px;color:var(--t2)}
.dm-store-hours{font-size:12px;color:var(--success);margin-top:4px;font-weight:700}
.dm-btn{
  width:100%;height:48px;margin-top:20px;
  background:var(--orange);color:var(--white);
  font-family:'Barlow Condensed',sans-serif;
  font-size:18px;font-weight:600;
  border-radius:12px;box-shadow:0 4px 18px rgba(255,98,0,.4),0 2px 6px rgba(0,0,0,.22),0 1px 0 rgba(255,255,255,.1) inset;transition:all .15s;
}
.dm-btn:hover{background:var(--orange-h)}
.dm-btn:active{transform:scale(.97);background:var(--orange-h)}

/* ═══ SORT DROPDOWN (desktop) ═══ */
.sort-dropdown-wrap{position:relative;display:inline-block}
.sort-dropdown{
  position:absolute;top:calc(100% + 6px);left:0;
  background:var(--bg2);border:1px solid var(--border);
  border-radius:12px;min-width:220px;
  box-shadow:var(--shadow-lg);
  overflow:hidden;z-index:300;
  opacity:0;pointer-events:none;transform:translateY(-8px);
  transition:all .2s var(--ease);
}
.sort-dropdown.open{opacity:1;pointer-events:all;transform:translateY(0)}
.sort-opt{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;font-size:14px;font-weight:600;color:var(--t2);
  cursor:pointer;transition:background .12s;border-bottom:1px solid var(--border2);
}
.sort-opt:last-child{border-bottom:none}
.sort-opt:hover{background:var(--bg3)}
.sort-opt.on{color:var(--orange)}
.sort-check{color:var(--orange);font-size:14px;opacity:0}
.sort-opt.on .sort-check{opacity:1}

/* ═══ CHECKOUT ═══ */
#checkout{
  position:fixed;inset:0;z-index:650;background:var(--bg);
  display:flex;flex-direction:column;
  transform:translateY(100%);transition:transform .35s var(--ease);overflow:hidden;
}
#checkout.open{transform:translateY(0)}
.co-hdr{
  height:60px;flex-shrink:0;background:var(--orange);border-bottom:none;
  padding:0 28px;display:flex;align-items:center;justify-content:space-between;
}
.co-hdr .det-back{background:rgba(0,0,0,.2);border:none}
.co-hdr-title{font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:900;color:var(--white)}
.co-steps-bar{
  display:flex;align-items:center;justify-content:center;
  gap:8px;padding:14px 28px;border-bottom:1px solid var(--border);
  background:var(--bg2);flex-shrink:0;
}
.co-step-dot{
  width:26px;height:26px;border-radius:50%;
  border:2px solid var(--t3);display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;color:var(--t3);transition:all .25s;
}
.co-step-dot.on{background:var(--orange);border-color:var(--orange);color:var(--white)}
.co-step-dot.done{background:var(--success);border-color:var(--success);color:var(--white)}
.co-step-lbl{font-size:11px;font-weight:700;color:var(--t3);text-transform:uppercase;margin-left:5px}
.co-step-lbl.on{color:var(--t1)}
.co-step-line{width:28px;height:2px;background:var(--t3);transition:background .25s}
.co-step-line.done{background:var(--success)}
.co-body-wrap{flex:1;overflow-y:auto;display:flex;justify-content:center}
.co-body{width:100%;max-width:900px;padding:28px;}
.co-step-grid{display:grid;grid-template-columns:1fr 320px;gap:28px;align-items:start}
.co-main{}
.co-section-title{font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:600;margin-bottom:5px}
.co-section-sub{font-size:13px;color:var(--t2);line-height:1.5;margin-bottom:20px}
.co-options-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}
.co-option{
  display:flex;align-items:center;gap:14px;
  background:var(--bg2);border:2px solid var(--border);
  border-radius:16px;padding:18px 16px;position:relative;cursor:pointer;transition:all .18s;
}
.co-option.sel{border-color:var(--orange);background:rgba(255,98,0,.07)}
.co-option-check{position:absolute;top:10px;right:12px;color:var(--orange);font-size:15px;opacity:0}
.co-option.sel .co-option-check{opacity:1}
.co-option-title{font-family:'Barlow Condensed',sans-serif;font-size:17px;font-weight:900;margin-bottom:3px}
.co-option-sub{font-size:12px;color:var(--t2);line-height:1.4}
.co-option-badge{display:inline-block;margin-top:6px;background:rgba(255,98,0,.15);color:#ffb380;font-size:10px;font-weight:800;padding:2px 9px;border-radius:999px}
.co-addr{display:none;margin-top:4px}
.co-addr.show{display:block}
.co-field{margin-bottom:13px}
.co-lbl{display:block;font-size:13px;font-weight:700;color:var(--t1);margin-bottom:5px}
.co-input{
  width:100%;background:var(--bg);border:1.5px solid rgba(255,255,255,.18);color:var(--t1);
  padding:13px 14px;border-radius:12px;font-size:14px;outline:none;transition:border-color .18s;
}
.co-input:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,98,0,.15);outline:none}
.co-input::placeholder{color:var(--t2)}
.co-2col{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pay-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}
.pay-opt{
  background:var(--bg2);border:2px solid var(--border);
  border-radius:12px;padding:16px 12px;text-align:center;position:relative;cursor:pointer;transition:all .18s;
}
.pay-opt.sel{border-color:var(--orange);background:rgba(255,98,0,.07)}
.pay-opt-check{position:absolute;top:8px;right:10px;color:var(--orange);font-size:13px;opacity:0}
.pay-opt.sel .pay-opt-check{opacity:1}
.pay-opt-icon{font-size:28px;display:block;margin-bottom:7px}
.pay-opt-name{font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:600}
.pay-opt-sub{font-size:10px;color:var(--t2);margin-top:2px}
.co-sidebar{}
.co-summary{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:16px;position:sticky;top:20px}
.co-sum-lbl{font-size:10px;font-weight:800;color:var(--t3);text-transform:uppercase;letter-spacing:1px;margin-bottom:12px}
.co-sum-item{display:flex;align-items:flex-start;gap:9px;padding:8px 0;border-bottom:1px solid var(--border2)}
.co-sum-item:last-child{border-bottom:none}
.co-sum-img{width:36px;height:36px;border-radius:12px;background:var(--bg3);flex-shrink:0;overflow:hidden}
.co-sum-img img{width:100%;height:100%;object-fit:cover}
.co-sum-name{font-size:12px;font-weight:600;line-height:1.3}
.co-sum-detail{font-size:10px;color:var(--t2);margin-top:1px}
.co-sum-price{font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:600;color:var(--orange);flex-shrink:0}
.co-totals{margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.co-total-row{display:flex;justify-content:space-between;font-size:13px;color:var(--t1);margin-bottom:5px}
.co-grand{display:flex;justify-content:space-between;font-family:'Barlow Condensed',sans-serif;font-size:22px;font-weight:700;margin-top:7px}
.co-grand em{color:var(--orange);font-style:normal}
.co-foot{
  padding:16px 28px;border-top:1px solid var(--border);background:var(--bg);flex-shrink:0;
  display:flex;align-items:center;justify-content:flex-end;gap:12px;
}
.btn-co-back{
  height:48px;padding:0 24px;
  border:2px solid var(--border);color:var(--t2);border-radius:12px;
  font-weight:800;font-size:14px;display:flex;align-items:center;gap:6px;transition:all .18s;
}
.btn-co-back:hover{border-color:var(--t1);color:var(--t1)}
.btn-co-next{
  height:48px;padding:0 32px;
  display:flex;align-items:center;justify-content:center;
  background:var(--orange);color:var(--white);
  font-family:'Barlow Condensed',sans-serif;font-size:18px;font-weight:600;
  border-radius:12px;letter-spacing:.4px;box-shadow:0 4px 18px rgba(255,98,0,.4),0 2px 6px rgba(0,0,0,.22),0 1px 0 rgba(255,255,255,.1) inset;transition:all .15s;
}
.btn-co-next:hover{background:var(--orange-h)}
.btn-co-next:active{transform:scale(.97);background:var(--orange-h)}
.btn-co-next:disabled{
  background:var(--bg3);color:var(--t3);
  box-shadow:none;cursor:not-allowed;
  opacity:.6;border:1.5px solid var(--border);
}
.btn-co-next:disabled:hover{background:var(--bg3)}
.co-success{
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;min-height:70vh;padding:40px 20px;text-align:center;
}
.co-success-icon{width:80px;height:80px;margin:0 auto 20px;animation:popIn .5s var(--spring)}
@keyframes popIn{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes drawCheck{to{stroke-dashoffset:0}}
.co-success-title{font-family:'Barlow Condensed',sans-serif;font-size:40px;font-weight:900;color:var(--orange);text-transform:uppercase;margin-bottom:10px}
.co-success-sub{font-size:14px;color:var(--t2);line-height:1.6;margin-bottom:24px}
.co-order-box{background:rgba(255,98,0,.08);border:1px solid rgba(255,98,0,.25);border-radius:12px;padding:14px 28px;display:inline-block;margin-bottom:28px}
.co-order-lbl{font-size:9px;color:var(--t2);text-transform:uppercase;letter-spacing:1px}
.co-order-num{font-family:'Bebas Neue',sans-serif;font-size:36px;color:var(--orange);letter-spacing:5px}

/* ─── IZIPAY PAYMENT CARD ─── */
.izipay-pay-card{
  background:var(--bg2);border:1.5px solid rgba(255,98,0,.3);
  border-radius:16px;overflow:hidden;margin-top:20px;
}
.izipay-pay-hdr{
  background:rgba(255,98,0,.1);
  padding:10px 16px;
  display:flex;align-items:center;gap:8px;
  font-size:12px;font-weight:700;color:var(--orange);
  border-bottom:1px solid rgba(255,98,0,.2);
}
.izipay-pay-body{padding:16px}
.izipay-pay-desc{font-size:13px;color:var(--t2);line-height:1.6;margin-bottom:14px}
.izipay-logos{display:flex;flex-wrap:wrap;gap:8px}
.izipay-logo-chip{
  background:var(--bg3);border:1px solid var(--border);
  padding:4px 12px;border-radius:8px;
  font-size:11px;font-weight:800;color:var(--t1);letter-spacing:.4px;
}
.izipay-logo-yape{background:rgba(146,39,143,.12);border-color:rgba(146,39,143,.3);color:#c060c0}

/* Comprobante de pago selector */
.co-select-wrap{position:relative}
.co-select-btn{
  width:100%;background:var(--bg3);border:1.5px solid var(--border);
  color:var(--t1);padding:13px 14px;border-radius:12px;font-size:14px;
  display:flex;align-items:center;justify-content:space-between;cursor:pointer;
  transition:border-color .18s;
}
.co-select-btn:hover{border-color:rgba(255,98,0,.3)}
.co-select-opts{
  position:absolute;top:100%;left:0;right:0;
  background:var(--bg3);border:1.5px solid var(--border);
  border-radius:12px;margin-top:4px;overflow:hidden;
  display:none;z-index:10;
}
.co-select-opts.open{display:block}
.co-select-opt{
  padding:12px 14px;font-size:14px;color:var(--t2);cursor:pointer;
  transition:all .12s;
}
.co-select-opt:hover{background:rgba(255,98,0,.1);color:var(--t1)}
.co-select-opt.sel{color:var(--orange);font-weight:600}

/* Checkbox términos */
.co-check-row{display:flex;align-items:flex-start;gap:10px;margin:16px 0}
.co-check-box{
  width:20px;height:20px;border-radius:12px;flex-shrink:0;
  border:2px solid var(--orange);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;margin-top:1px;
}
.co-check-box.checked{background:var(--orange);border-color:var(--orange)}
.co-check-box svg{display:none;color:var(--white)}
.co-check-box.checked svg{display:block}
.co-check-txt{font-size:12px;color:var(--t2);line-height:1.5}
.co-check-txt a{color:var(--orange);text-decoration:none}

/* Card de entrega paso 2 */
.co-deliv-card{
  display:flex;align-items:center;gap:14px;
  background:var(--bg);border:1.5px solid rgba(255,255,255,.18);
  border-radius:12px;padding:16px;margin-bottom:16px;
}
.co-deliv-icon{
  width:44px;height:44px;border-radius:12px;
  background:rgba(255,98,0,.12);
  display:flex;align-items:center;justify-content:center;
  color:var(--orange);flex-shrink:0;
}
.co-deliv-info{flex:1}
.co-deliv-title{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:600}
.co-deliv-sub{font-size:12px;color:var(--t2);margin-top:2px}
.co-change-addr{
  display:inline-flex;align-items:center;gap:6px;
  padding:10px 16px;border:1.5px dashed rgba(255,255,255,.18);
  border-radius:12px;font-size:12px;font-weight:700;
  color:var(--t1);cursor:pointer;margin-top:12px;
  transition:all .15s;
}
.co-change-addr:hover{border-color:var(--orange);color:var(--orange)}

/* Cupón de descuento */
.co-coupon-bar{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--bg3);border:1px solid var(--border);
  border-radius:12px;padding:14px 18px;cursor:pointer;
  margin-bottom:20px;transition:all .15s;
}
.co-coupon-bar:hover{border-color:var(--orange);background:rgba(255,98,0,.03)}
.co-coupon-left{display:flex;align-items:center;gap:12px;color:var(--t1);font-size:14px;font-weight:600}
.co-coupon-left svg{color:var(--orange)}

/* Canje de puntos de lealtad — checkout */
.co-loyalty-bar{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--bg3);border:1px solid var(--border);
  border-radius:12px;padding:14px 18px;cursor:pointer;
  margin-bottom:12px;transition:all .15s;
}
.co-loyalty-bar:hover{border-color:var(--orange)}
.co-loyalty-bar.on{border-color:var(--orange);background:rgba(255,98,0,.06)}
.co-loyalty-toggle{
  width:38px;height:22px;border-radius:12px;background:var(--bg4);
  border:1px solid var(--border);position:relative;flex-shrink:0;transition:all .15s;
}
.co-loyalty-toggle::after{
  content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;
  border-radius:50%;background:var(--t2);transition:all .15s;
}
.co-loyalty-bar.on .co-loyalty-toggle{background:var(--orange);border-color:var(--orange)}
.co-loyalty-bar.on .co-loyalty-toggle::after{left:18px;background:var(--white)}

/* Tarjeta de puntos — vista de cuenta */
.acct-loyalty-card{
  background:linear-gradient(135deg,rgba(255,98,0,.14),rgba(255,98,0,.03));
  border:1px solid rgba(255,98,0,.3);border-radius:14px;
  padding:16px 18px;margin-bottom:22px;
}
.acct-loyalty-hdr{display:flex;align-items:center;justify-content:space-between;font-weight:700;color:var(--t1);font-size:14px;margin-bottom:10px}
.acct-loyalty-pts{color:var(--orange);font-family:'Barlow Condensed',sans-serif;font-size:18px}
.acct-loyalty-bar{height:6px;border-radius:4px;background:var(--bg4);overflow:hidden;margin-bottom:8px}
.acct-loyalty-bar-fill{height:100%;background:var(--orange);border-radius:4px;transition:width .3s}
.acct-loyalty-sub{font-size:12px;color:var(--t2);line-height:1.4}

/* Lista de métodos de pago */
.co-pay-list{display:flex;flex-direction:column;gap:0;margin-bottom:20px}
.co-pay-item{
  display:flex;align-items:center;gap:14px;
  padding:18px;border:1px solid var(--border);
  background:var(--bg2);cursor:pointer;transition:all .15s;
}
.co-pay-item:first-child{border-radius:12px 12px 0 0}
.co-pay-item:last-of-type{border-radius:0 0 12px 12px}
.co-pay-item:not(:last-of-type){border-bottom:none}
.co-pay-item.sel{background:rgba(255,98,0,.05);border-color:var(--orange)}
.co-pay-item.sel + .co-pay-fields{border-color:var(--orange)}
.co-pay-radio{
  width:22px;height:22px;border-radius:50%;
  border:2px solid var(--border);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;
}
.co-pay-radio.on{border-color:var(--orange)}
.co-pay-radio.on::after{content:'';width:12px;height:12px;border-radius:50%;background:var(--orange)}
.co-pay-name{font-size:15px;font-weight:700;color:var(--t1)}
.co-pay-fields{
  padding:18px;background:rgba(255,255,255,.02);
  border:1px solid var(--border);border-top:none;margin-top:-1px;
}
/* Floating label inputs */
.co-float-field{
  position:relative;margin-bottom:12px;
}
.co-float-field:last-child{margin-bottom:0}
.co-float-input{
  width:100%;height:54px;padding:22px 14px 8px;
  background:var(--bg);border:1.5px solid rgba(255,255,255,.18);border-radius:12px;
  font-size:15px;font-weight:500;color:var(--t1);
  transition:border-color .2s, box-shadow .2s;
}
.co-float-input:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,98,0,.15)}
.co-float-label{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  font-size:14px;color:var(--t3);pointer-events:none;
  transition:all .2s ease;
}
.co-float-input:focus + .co-float-label,
.co-float-input:not(:placeholder-shown) + .co-float-label{
  top:12px;transform:translateY(0);font-size:10px;color:var(--t2);
  font-weight:600;letter-spacing:.3px;text-transform:uppercase;
}
.co-float-input:focus + .co-float-label{color:var(--orange)}
.co-float-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.co-pay-help{
  display:flex;align-items:center;gap:8px;
  padding:12px 14px;background:rgba(255,98,0,.08);
  border-radius:12px;margin-top:10px;cursor:pointer;
  font-size:13px;color:var(--orange);font-weight:600;
}
.co-pay-help svg:first-child{flex-shrink:0}
.co-pay-help span{flex:1}
.co-pay-help-content{
  padding:14px;background:var(--bg3);border-radius:12px;margin-top:10px;
  font-size:13px;color:var(--t2);line-height:1.6;
}
.co-pay-help-content p{margin:5px 0}
.co-qr-placeholder{
  display:flex;flex-direction:column;align-items:center;
  padding:30px;gap:14px;background:var(--bg3);border-radius:12px;text-align:center;
}
.co-qr-placeholder span{font-size:14px;color:var(--t2);font-weight:600}

/* Modal cupón desktop */
#couponOverlay{
  position:fixed;inset:0;z-index:700;
  background:rgba(0,0,0,.7);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .25s;
}
#couponOverlay.open{opacity:1;pointer-events:all}
.coupon-modal{
  background:var(--bg);border-radius:16px;width:100%;max-width:420px;
  overflow:hidden;transform:scale(.95);transition:transform .25s var(--spring);
}
#couponOverlay.open .coupon-modal{transform:scale(1)}
/* Modal cupón mobile — el show/hide debe aplicar en todos los anchos: el JS
   (openCouponModal/closeCouponModal) decide cuál de los dos overlays usar según
   window.innerWidth, no el CSS. Antes esta regla solo vivía dentro del media
   query de 768px, así que en desktop #couponModal nunca quedaba oculto. */
#couponModal{
  position:fixed;inset:0;z-index:850;
  background:var(--bg);
  transform:translateY(100%);
  transition:transform .3s var(--ease);
  display:flex;flex-direction:column;
}
#couponModal.open{transform:translateY(0)}
.coupon-hdr{
  background:var(--orange);padding:18px 24px;
  display:flex;align-items:center;justify-content:space-between;
}
.coupon-hdr-title{
  display:flex;align-items:center;gap:10px;
  font-family:'Barlow Condensed',sans-serif;
  font-size:20px;font-weight:800;color:var(--white);
}
.coupon-close{
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  color:var(--white);cursor:pointer;border-radius:12px;transition:background .15s;
}
.coupon-close:hover{background:rgba(0,0,0,.2)}
.coupon-body{padding:24px}
.coupon-input{
  width:100%;background:var(--bg3);border:1.5px solid var(--border);
  color:var(--t1);padding:14px 16px;border-radius:12px;
  font-size:15px;margin-bottom:16px;
}
.coupon-input:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,98,0,.15);outline:none}
.coupon-apply{
  width:100%;height:50px;background:var(--orange);
  color:var(--white);font-family:'Barlow Condensed',sans-serif;
  font-size:17px;font-weight:800;border-radius:12px;
  transition:background .15s;
}
.coupon-apply:hover{background:var(--orange-h)}

/* ═══ PLACES AUTOCOMPLETE ═══ */
.nbh-ac-item{padding:11px 14px;cursor:pointer;color:#e8eaed;font-size:13px;border-bottom:1px solid rgba(255,255,255,.05);display:flex;gap:8px;align-items:center}
.nbh-ac-item:last-child{border-bottom:none}
.nbh-ac-item:hover{background:rgba(255,255,255,.06)}

/* ═══ FOOTER ═══ */
.footer-social-bar{background:var(--orange);padding:20px 0}
.footer-social-inner{max-width:var(--MAX);margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:center;gap:20px}
.footer-social-text{font-family:'Barlow Condensed',sans-serif;font-size:18px;font-weight:600;color:var(--white)}
.footer-social-icons{display:flex;gap:12px}
.footer-social-icon{width:40px;height:40px;border-radius:50%;border:2px solid var(--white);display:flex;align-items:center;justify-content:center;color:var(--white);transition:all .2s}
.footer-social-icon:hover{background:var(--white);color:var(--orange)}
.site-footer{background:var(--bg);padding:48px 0 24px;margin-top:0}
.footer-inner{max-width:var(--MAX);margin:0 auto;padding:0 24px}
.footer-grid{display:grid!important;grid-template-columns:1fr 1fr 1fr;gap:48px;margin-bottom:40px}
.footer-accordion{display:none!important}
.footer-col-title{font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:700;color:var(--white);text-transform:uppercase;letter-spacing:1px;margin-bottom:16px}
.footer-link{display:block;font-size:14px;color:var(--t2);margin-bottom:10px;transition:color .15s;cursor:pointer}
.footer-link:hover{color:var(--orange)}
.footer-bottom{border-top:1px solid var(--border);padding-top:24px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.footer-logo-img{height:40px;margin-bottom:4px}
.footer-copyright{font-size:13px;color:var(--t1)}

/* ═══ VISTA INSTITUCIONAL ═══ */
.inst-view-wrap{
  display:flex;gap:0;min-height:calc(100vh - var(--HDR));
  max-width:var(--MAX);margin:0 auto;padding:32px 24px 0;
}
.inst-view-nav{
  width:280px;flex-shrink:0;margin-right:32px;
}
.inst-view-nav-group{margin-bottom:24px}
.inst-view-nav-title{
  font-family:'Barlow Condensed',sans-serif;
  font-size:12px;font-weight:800;color:var(--t3);
  text-transform:uppercase;letter-spacing:1.2px;
  padding:0 12px 10px;
}
.inst-view-nav-item{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 12px;font-size:14px;font-weight:600;color:var(--t2);
  border-radius:12px;cursor:pointer;transition:all .15s;
  border-left:3px solid transparent;
}
.inst-view-nav-item:hover{background:var(--bg3);color:var(--t1)}
.inst-view-nav-item.on{
  background:rgba(255,98,0,.08);color:var(--orange);
  border-left-color:var(--orange);
}
.inst-view-nav-chevron{color:var(--t3);font-size:14px}
.inst-view-nav-item.on .inst-view-nav-chevron{color:var(--orange)}
.inst-view-main{
  flex:1;min-width:0;
  padding:32px 40px;margin-bottom:40px;
}
.inst-view-title{
  font-family:'Barlow Condensed',sans-serif;
  font-size:32px;font-weight:900;margin-bottom:20px;
}
.inst-view-content{font-size:15px;color:var(--t2);line-height:1.75}
.inst-view-content p{margin-bottom:16px}
.inst-view-content h3{
  font-family:'Barlow Condensed',sans-serif;
  font-size:20px;font-weight:800;color:var(--t1);margin:24px 0 12px;
}
.inst-view-content ul{margin:12px 0 16px 20px}
.inst-view-content li{margin-bottom:8px}

/* ═══ QUIÉNES SOMOS — SECCIÓN BRUTAL ═══ */
.qs-intro{
  font-size:20px;line-height:1.7;color:var(--t1);
  margin-bottom:12px;font-weight:500;
  position:relative;padding-left:24px;
  opacity:0;animation:qsFadeUp .8s var(--ease) .1s forwards;
}
.qs-intro:first-child{
  font-size:22px;font-weight:600;margin-bottom:32px;
}
.qs-intro::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--orange) 0%,transparent 100%);
  border-radius:2px;
}
.qs-intro strong{color:var(--orange);font-weight:700}

.qs-body{
  position:relative;
  background:linear-gradient(145deg,rgba(255,255,255,.02) 0%,rgba(255,255,255,0) 100%);
  border:1px solid var(--border);border-radius:16px;
  padding:32px 36px;overflow:hidden;
  margin-bottom:40px;
  opacity:0;transform:translateY(20px);
  animation:qsFadeUp .7s var(--ease) .3s forwards;
  transition:border-color .4s;
}
.qs-body::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent 0%,var(--orange) 50%,transparent 100%);
  opacity:.5;
}
.qs-body::after{
  content:"";position:absolute;top:-80px;right:-80px;width:250px;height:250px;
  background:radial-gradient(circle,rgba(255,98,0,.06) 0%,transparent 50%);
  pointer-events:none;
}
.qs-body:hover{border-color:rgba(255,98,0,.25)}
.qs-body p{
  font-size:16px;line-height:1.8;color:var(--t2);
  margin-bottom:18px;position:relative;z-index:1;
}
.qs-body p:last-child{margin-bottom:0}
.qs-body strong{color:var(--orange);font-weight:700}
.qs-body em{
  color:var(--t1);font-weight:600;font-style:normal;
}

/* Sección Hacia dónde vamos */
.qs-vision{
  position:relative;margin-top:8px;padding:36px 36px;
  background:linear-gradient(135deg,rgba(255,98,0,.06) 0%,rgba(255,98,0,.01) 100%);
  border:1px solid rgba(255,98,0,.2);border-radius:16px;
  overflow:hidden;
  opacity:0;animation:qsFadeUp .7s var(--ease) .55s forwards;
}
.qs-vision::before{
  content:"";position:absolute;top:0;left:0;width:4px;height:100%;
  background:linear-gradient(180deg,var(--orange) 0%,transparent 100%);
}
.qs-vision::after{
  content:"";position:absolute;top:-100px;right:-100px;width:300px;height:300px;
  background:radial-gradient(circle,rgba(255,98,0,.08) 0%,transparent 60%);
  pointer-events:none;
}
.qs-vision-label{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11px;font-weight:800;color:var(--orange);
  text-transform:uppercase;letter-spacing:1.5px;margin-bottom:16px;
}
.qs-vision-label::before{
  content:"";width:24px;height:1px;background:var(--orange);
}
.qs-vision-text{
  font-size:16px;line-height:1.8;color:var(--t2);
  margin-bottom:14px;max-width:90%;position:relative;z-index:1;
}
.qs-vision-text:last-child{margin-bottom:0}
.qs-vision-quote{
  display:block;font-family:'Barlow Condensed',sans-serif;
  font-size:24px;font-weight:700;color:var(--t1);
  font-style:italic;margin-top:28px;padding-top:28px;
  border-top:1px solid rgba(255,98,0,.15);
  letter-spacing:.3px;
}
.qs-vision-quote span{color:var(--orange)}

@keyframes qsFadeUp{
  to{opacity:1;transform:translateY(0)}
}

/* ═══ FORMULARIO INSTITUCIONAL ═══ */
.qs-form{max-width:560px}
.qs-form-field{margin-bottom:18px}
.qs-form-label{
  display:block;font-size:13px;font-weight:700;color:var(--t1);
  margin-bottom:6px;
}
.qs-form-input{
  width:100%;background:var(--bg);border:1.5px solid rgba(255,255,255,.18);
  color:var(--t1);padding:12px 16px;border-radius:12px;font-size:14px;
  font-family:inherit;outline:none;transition:border-color .18s;
}
.qs-form-input::placeholder{color:var(--t2)}
.qs-form-input:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,98,0,.15);outline:none}
.qs-form-textarea{resize:vertical;min-height:100px}
.qs-form-file-wrap{
  display:flex;align-items:center;gap:12px;
}
.qs-form-file-input{
  position:absolute;width:0;height:0;opacity:0;pointer-events:none;
}
.qs-form-file-btn{
  flex-shrink:0;padding:10px 18px;border-radius:12px;
  background:var(--bg3);border:1.5px solid var(--border);
  color:var(--t1);font-size:13px;font-weight:700;font-family:inherit;
  cursor:pointer;transition:all .18s;
}
.qs-form-file-btn:hover{border-color:rgba(255,98,0,.4);color:var(--orange)}
.qs-form-file-name{
  font-size:13px;color:var(--t3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.qs-form-submit{
  width:100%;height:48px;background:var(--orange);color:var(--white);
  font-family:'Barlow Condensed',sans-serif;font-size:17px;font-weight:600;
  border-radius:12px;border:none;cursor:pointer;
  box-shadow:0 4px 16px rgba(255,98,0,.4),0 2px 6px rgba(0,0,0,.22),0 1px 0 rgba(255,255,255,.1) inset;
  transition:all .2s;margin-top:8px;
}
.qs-form-submit:hover{
  background:#e55800;box-shadow:0 6px 20px rgba(255,98,0,.5);
  transform:translateY(-1px);
}
.qs-form-submit:active{transform:scale(.97);background:#e55800}
select.qs-form-input{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
  padding-right:36px;cursor:pointer;
}

/* ═══ TOAST PREMIUM ═══ */
.toast{
  position:fixed;bottom:28px;left:50%;
  transform:translateX(-50%) translateY(24px) scale(.95);
  z-index:900;
  background:rgba(10,14,20,.85);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,.08);
  color:var(--t1);
  padding:14px 20px 14px 16px;
  border-radius:16px;
  display:flex;align-items:center;gap:12px;
  min-width:280px;max-width:420px;
  box-shadow:
    0 20px 40px rgba(0,0,0,.5),
    0 0 0 1px rgba(255,255,255,.04) inset;
  opacity:0;pointer-events:none;
  transition:all .45s cubic-bezier(.34,1.56,.64,1);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
.toast-ico{
  width:36px;height:36px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;color:var(--white);
  background:linear-gradient(135deg,#FF6200 0%,#F5B544 100%);
  box-shadow:0 4px 12px rgba(255,98,0,.35);
}
.toast.success .toast-ico{background:linear-gradient(135deg,#F5B544 0%,#FF6200 100%)}
.toast.warning .toast-ico{background:linear-gradient(135deg,#FF6200 0%,#e55800 100%)}
.toast-body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.toast-title{font-size:14px;font-weight:700;color:var(--t1);line-height:1.3}
.toast-desc{font-size:12px;color:rgba(255,255,255,.55);line-height:1.35}
.toast-desc:empty{display:none}


/* ─── INPUT ERROR STATE ─── */
.input-error{border-color:var(--red)!important;box-shadow:0 0 0 3px rgba(239,68,68,.12)!important}
.input-error::placeholder{color:rgba(239,68,68,.5)}

/* .det-scroll is mobile-only; hide on desktop so it doesn't occlude .det-body */
.det-scroll { display: none; }

/* Mobile-only panels — ocultos en desktop */
#bottom-nav,
#search-overlay,
#delivery-sheet,
#sort-sheet,
#view-account-mobile,
#view-inst-mobile { display: none; }

/* ═══ MOBILE RESPONSIVE OVERRIDES (max-width: 768px) ═══ */
@media (max-width: 768px) {

/* ═══════════════════════════════════════════
   TOKENS
═══════════════════════════════════════════ */
:root {
  --bg:       #10141A;
  --bg2:      #161d28;
  --bg3:      #1c2535;
  --bg4:      #222d3e;
  --orange:   #FF6200;
  --orange-h: #e05700;
  --orange-l: rgba(255,98,0,.15);
  --white:    #FFFFFF;
  --t1:       #FFFFFF;
  --t2:       #8a96aa;
  --t3:       #4e5a6e;
  --border:   rgba(255,255,255,.07);
  --border2:  rgba(255,255,255,.04);
  --green:    #F5B544;
  --green-bg: rgba(245,181,68,.1);
  --green-bd: rgba(245,181,68,.3);
  --success:    #22c55e;
  --success-bg: rgba(34,197,94,.1);
  --success-bd: rgba(34,197,94,.3);
  --red:      #ef4444;
  --shadow-sm: 0 2px 12px rgba(0,0,0,.25);
  --shadow-md: 0 4px 20px rgba(0,0,0,.35);
  --shadow-lg: 0 16px 48px rgba(0,0,0,.6);
  --shadow-xl: 0 24px 80px rgba(0,0,0,.7);
  --ease:     cubic-bezier(.4,0,.2,1);
  --spring:   cubic-bezier(.34,1.56,.64,1);
  --HDR:      54px;
  --DEL:      64px;
  --CAT:      48px;
  --BOT:      52px;
  --safe-b:   env(safe-area-inset-bottom, 0px);
}

/* ═══════════════════════════════════════════
   RESET
═══════════════════════════════════════════ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{height:100%;overflow:hidden}
body{
  height:100%;overflow:hidden;
  background:var(--bg);color:var(--t1);
  font-family:'Barlow',sans-serif;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
}
button{cursor:pointer;font-family:inherit;border:none;background:none;touch-action:manipulation}
a{text-decoration:none;color:inherit}
input,select{font-family:inherit;-webkit-appearance:none}
::-webkit-scrollbar{display:none}
*{scrollbar-width:none}

/* ═══════════════════════════════════════════
   SVG ICONS — thin line, modern
═══════════════════════════════════════════ */
.ico{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.ico svg{display:block}

/* ═══════════════════════════════════════════
   LAYOUT SHELL
═══════════════════════════════════════════ */
#app{
  position:fixed;inset:0;
  /* 100dvh sigue el alto real del viewport mientras la barra de Safari en
     iPhone se oculta/aparece al hacer scroll (100vh queda como fallback). */
  height:100vh;height:100dvh;
  display:flex;flex-direction:column;
  overflow:hidden;
}

/* ═══════════════════════════════════════════
   HEADER — disappears on scroll with delivery bar
═══════════════════════════════════════════ */
#sticky-top{
  position:relative;z-index:100;flex-shrink:0;
  background:transparent;
  overflow:hidden;
}
#sticky-top.hidden{
  margin-top:calc(-1 * (var(--HDR) + var(--DEL)));
  opacity:0;
  pointer-events:none;
}

.header{
  height:var(--HDR);
  display:flex;align-items:center;
  padding:0 12px;gap:4px;
  border-bottom:none;
  background:var(--orange);
}
.hdr-menu{
  width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  color:var(--white);
}
.hdr-logo{
  flex:1;
  font-family:'Bebas Neue',sans-serif;
  font-size:22px;letter-spacing:4px;color:var(--white);
  padding-left:2px;
}
.hdr-logo em{color:var(--white);font-style:normal;opacity:.9}
/* Desktop-only header elements hidden on mobile */
.hdr-search { display: none; }
.hdr-actions { display: none; }
.hdr-carta { display: none; }
.hdr-icon{
  width:40px;height:40px;
  display:flex !important;align-items:center;justify-content:center;
  color:var(--white);position:relative;
}
.hdr-cart{
  background:var(--white);
  border-radius:12px;
  width:auto;padding:0 10px;
  gap:6px;
  color:var(--orange);font-size:12px;font-weight:800;
}
.hdr-cart:active{background:rgba(255,255,255,.85)}
.cart-badge{
  background:var(--orange);color:var(--white);
  min-width:18px;height:18px;border-radius:12px;
  font-size:12px;font-weight:700;
  display:none;align-items:center;justify-content:center;
  padding:0 4px;border:1.5px solid var(--white);
}
.cart-badge.show{display:flex}
.cart-badge.bump{animation:cbump .3s var(--spring)}
@keyframes cbump{0%{transform:scale(1)}50%{transform:scale(1.5)}100%{transform:scale(1)}}

/* DELIVERY BAR */
.delivery-bar{
  display:flex;align-items:center;justify-content:center;
  gap:8px;padding:0 14px;
  margin:8px 14px;
  border:1.5px solid rgba(255,255,255,.18);
  border-radius:12px;
  background:var(--bg);
  cursor:pointer;
  min-height:48px;
  transition:background .15s,border-color .15s;
}
.delivery-bar:active{background:var(--bg3);border-color:rgba(255,255,255,.35)}
.del-txt{font-size:13px;font-weight:600;color:var(--t1)}
.del-chevron{color:var(--t3);transition:transform .25s}
.delivery-bar.open .del-chevron{transform:rotate(180deg)}

/* ═══════════════════════════════════════════
   CATEGORY BAR — always sticky after header hides
═══════════════════════════════════════════ */
#cat-bar{
  display:none;
  height:var(--CAT);flex-shrink:0;
  background:#10141A;
  border-bottom:1px solid rgba(255,255,255,.18);
  position:relative;z-index:90;
}
.cat-scroll{
  flex:1;display:flex;align-items:center;
  overflow-x:auto;scroll-behavior:smooth;
  padding:0 6px;
}
.cat-tab{
  flex-shrink:0;
  height:var(--CAT);
  padding:0 14px;
  font-size:14px;font-weight:700;color:var(--t1);
  border-bottom:2.5px solid transparent;
  white-space:nowrap;
  transition:color .18s,border-color .18s;
}
.cat-tab.on{color:var(--orange);border-bottom-color:var(--orange)}
.cat-tab:active{color:var(--t1)}
.cat-arr{
  width:34px;height:34px;flex-shrink:0;margin:0 2px;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg3);border:1px solid var(--border);
  border-radius:50%;color:var(--t1);font-size:15px;
  transition:all .15s;
}
.cat-arr:active{background:var(--orange);border-color:var(--orange)}
.cat-arr.gone{opacity:0;pointer-events:none}

/* ═══════════════════════════════════════════
   SORT + VIEW TOOLBAR
═══════════════════════════════════════════ */
.sort-bar{
  display:flex;align-items:center;
  padding:8px 14px;gap:0;
  background:var(--bg3);
  border:1px solid var(--border);
  border-radius:12px;
  margin:10px 14px 6px;
}
.sort-btn{
  flex:1;display:flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 0;font-size:13px;font-weight:700;color:var(--t2);
  border-right:1px solid var(--border);
  transition:color .15s;
}
.sort-btn:active,.sort-btn.on{color:var(--t1)}
.view-btn{
  display:flex;align-items:center;gap:12px;
  padding:9px 0 9px 14px;
}
.vbtn{
  width:32px;height:32px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  color:var(--t3);transition:all .15s;
}
.vbtn.on{background:var(--orange);color:var(--white)}
.results-count{
  font-size:12px;font-weight:700;color:var(--t3);
  padding:0 14px 8px;
}

/* ═══════════════════════════════════════════
   MAIN SCROLL AREA
═══════════════════════════════════════════ */
#scroll-area{
  flex:1;overflow-y:auto;overflow-x:hidden;
  overscroll-behavior-y:none;
  padding-bottom:calc(var(--BOT) + var(--safe-b));
  -webkit-overflow-scrolling:touch;
}

/* ═══════════════════════════════════════════
   BOTTOM NAV — Inicio | Carta | Login (KFC order)
═══════════════════════════════════════════ */
#bottom-nav{
  height:calc(var(--BOT) + var(--safe-b));
  padding-bottom:var(--safe-b);
  flex-shrink:0;
  background:#10141A;
  border-top:1px solid rgba(255,255,255,.18);
  display:flex;align-items:stretch;
  position:relative;z-index:100;
}
.bnav-item{
  flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:2px;color:var(--t1);
  transition:color .18s;
  font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;
  padding-top:2px;
}
.bnav-item.on{color:var(--orange)}
.bnav-item:active{opacity:.7}
.bnav-dot{
  width:3px;height:3px;border-radius:50%;
  background:var(--orange);margin-top:2px;
  opacity:0;transition:opacity .18s;
}
.bnav-item.on .bnav-dot{opacity:1}

/* ═══════════════════════════════════════════
   HERO BANNER — mobile: más grande, a todo el ancho
═══════════════════════════════════════════ */
.hero-wrap{
  position:relative;overflow:hidden;
  aspect-ratio:4/5;
  background:var(--bg3);
  max-height:560px;
  /* Sale del padding de .page-wrap para ocupar todo el ancho de la pantalla */
  margin-left:-24px;margin-right:-24px;
  border-radius:0;
}
.hero-track{
  display:flex;height:100%;
  transition:transform .5s var(--ease);
}
.hero-slide{
  flex-shrink:0;width:100%;height:100%;
  display:flex;align-items:flex-end;padding:20px 22px 28px;position:relative;
  overflow:hidden;
}
.hero-bg-text{display:none}
.hero-content{position:relative;z-index:2;width:100%}
.hero-badge{
  display:inline-flex;align-items:center;gap:4px;
  background:rgba(255,98,0,.25);border:1px solid rgba(255,98,0,.5);
  color:#ffcca0;font-size:9px;font-weight:800;
  letter-spacing:1.2px;text-transform:uppercase;
  padding:3px 11px;border-radius:999px;margin-bottom:10px;
}
.hero-title{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(32px,10vw,48px);
  font-weight:900;text-transform:uppercase;
  line-height:.92;color:var(--white);margin-bottom:12px;
  text-shadow:0 2px 20px rgba(0,0,0,.6);
}
.hero-title em{color:var(--orange);font-style:normal}
.hero-cta{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--orange);color:var(--white);
  padding:11px 22px;border-radius:12px;
  font-family:'Barlow Condensed',sans-serif;
  font-size:16px;font-weight:600;
  letter-spacing:.5px;
  box-shadow:0 4px 18px rgba(255,98,0,.45),0 2px 6px rgba(0,0,0,.25),0 1px 0 rgba(255,255,255,.1) inset;
}
.hero-cta:active{transform:scale(.96)}
.hero-dots{
  position:absolute;bottom:16px;left:50%;transform:translateX(-50%);
  display:flex;gap:6px;z-index:10;
}
.hdot{
  width:6px;height:6px;border-radius:50%;
  background:rgba(255,255,255,.45);
  transition:all .22s;cursor:pointer;
}
.hdot.on{background:var(--orange);width:20px;border-radius:3px}

/* ═══════════════════════════════════════════
   SECTIONS
═══════════════════════════════════════════ */
.section{padding:14px 14px 0}
.sec-hdr{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:12px;
}
.sec-title{
  font-family:'Barlow Condensed',sans-serif;
  font-size:22px;font-weight:700;color:var(--t1);
  display:flex;align-items:center;gap:7px;
}
.sec-title::after{
  content:'';display:inline-block;
  width:24px;height:2.5px;background:var(--orange);border-radius:2px;
}
.sec-see-all{font-size:12px;font-weight:700;color:var(--orange)}

#view-menu{display:flex;flex-direction:column;min-height:100%}
#view-menu>.page-wrap{flex:1}

/* ═══════════════════════════════════════════
   PRODUCT GRID — 2 columns
═══════════════════════════════════════════ */
.pgrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  padding:0 16px 16px;
}
/* LIST MODE — 1 column */
.pgrid.list{
  grid-template-columns:1fr;
  gap:8px;
}

/* ═══════════════════════════════════════════
   PRODUCT CARD — grid mode
═══════════════════════════════════════════ */
.pcard{
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:12px;overflow:hidden;
  display:flex;flex-direction:column;
  cursor:pointer;
  transition:transform .15s,border-color .2s;
  position:relative;
}
.pcard:active{transform:scale(.975)}
.pcard-badge{
  position:absolute;top:7px;left:7px;z-index:2;
  font-size:8px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
  padding:2px 9px;border-radius:999px;
}
.pcard-badge.popular{background:var(--orange);color:var(--white)}
.pcard-badge.new{background:var(--green);color:var(--white)}
.pcard-badge.hot{background:#ef4444;color:var(--white)}
/* image — 1:1, medido contra KFC real (card completa 163.5×313.5 en viewport 375) */
.pcard-img{
  width:100%;aspect-ratio:1/1;
  background:var(--bg3);
  overflow:hidden;flex-shrink:0;position:relative;
}
.pcard-img img{width:100%;height:100%;object-fit:cover}
.pcard-img-placeholder{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  font-size:48px;opacity:.25;
}
.pcard-body{padding:14px 14px 16px;flex:1;display:flex;flex-direction:column;gap:6px}
.pcard-name{
  font-family:'Barlow Condensed',sans-serif;
  font-size:19px;font-weight:700;color:var(--t1);line-height:1.2;
}
.pcard-desc{font-size:13.5px;color:var(--t2);line-height:1.45;flex:1}
.pcard-foot{display:flex;align-items:flex-end;justify-content:space-between;margin-top:10px}
.pcard-pricing{}
.pcard-disc{font-size:10px;font-weight:700;color:var(--success);display:flex;align-items:center;gap:4px}
.pcard-orig{font-size:10px;color:var(--t3);text-decoration:line-through}
.pcard-price{
  font-family:'Barlow Condensed',sans-serif;
  font-size:27px;font-weight:700;color:var(--t1);line-height:1;
}
.pcard-price small{font-size:12px;font-weight:700}
.pcard-add{
  width:42px;height:42px;border-radius:50%;
  background:var(--orange);color:var(--white);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  box-shadow:0 3px 12px rgba(255,98,0,.4),0 2px 4px rgba(0,0,0,.2),0 1px 0 rgba(255,255,255,.1) inset;
  transition:all .15s;
}
.pcard-add:active{transform:scale(.9)}

/* Qty control (in-card) */
.pcard-qty{
  display:flex;align-items:center;
  background:var(--bg3);border:1px solid var(--border);
  border-radius:21px;height:42px;overflow:hidden;
}
.pcard-qbtn{
  width:34px;height:100%;
  display:flex;align-items:center;justify-content:center;
  font-size:17px;color:var(--t1);
}
.pcard-qbtn:active{background:var(--bg4)}
.pcard-qval{
  width:26px;text-align:center;
  font-family:'Barlow Condensed',sans-serif;
  font-size:15px;font-weight:700;
}

/* ═══ LIST MODE CARD ═══ */
.pgrid.list .pcard{
  flex-direction:row;align-items:stretch;
  border-radius:12px;min-height:90px;
}
.pgrid.list .pcard-img{
  width:90px;height:90px;aspect-ratio:unset;
  flex-shrink:0;border-radius:0;
}
.pgrid.list .pcard-body{
  padding:11px 11px 11px 12px;
  justify-content:space-between;
}
.pgrid.list .pcard-name{font-size:14px}
.pgrid.list .pcard-desc{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.pgrid.list .pcard-foot{margin-top:0}
.pgrid.list .pcard-badge{top:8px;left:8px}
/* ═══════════════════════════════════════════
   SIDEBAR DRAWER — 346px / 90%
═══════════════════════════════════════════ */
.sb-overlay{
  position:fixed;inset:0;z-index:1000;
  background:rgba(5,8,14,.82);backdrop-filter:blur(8px);
  opacity:0;pointer-events:none;
  transition:opacity .25s var(--ease);
}
.sb-overlay.open{opacity:1;pointer-events:all}

.sidebar{
  position:absolute;left:0;top:0;bottom:0;
  width:min(346px, 90%);
  background:var(--bg);
  display:flex;flex-direction:column;
  transform:translateX(-100%);
  transition:transform .3s var(--ease);
  box-shadow:20px 0 60px rgba(0,0,0,.6);
  overflow-y:auto;
}
.sb-overlay.open .sidebar{transform:translateX(0)}

/* Head: orange bar with user icon + Iniciar sesión + X */
.sb-head{
  background:var(--orange);
  padding:16px;
  display:flex;align-items:center;gap:12px;
  flex-shrink:0;min-height:72px;
}
.sb-head-user{
  width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.2);
  border:1.5px solid rgba(255,255,255,.35);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.sb-head-info{flex:1}
.sb-head-cta{
  font-size:16px;font-weight:900;color:var(--white);
  font-family:'Barlow Condensed',sans-serif;
  text-transform:uppercase;letter-spacing:.5px;
  display:block;line-height:1.1;
}
.sb-head-sub{
  font-size:11px;color:rgba(255,255,255,.7);
  font-weight:600;margin-top:2px;display:block;
}
.sb-close{
  width:34px;height:34px;border-radius:50%;
  background:rgba(0,0,0,.2);color:var(--white);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.sb-close:active{background:rgba(0,0,0,.38)}

.sb-addr{
  display:flex;align-items:center;gap:12px;
  padding:13px 16px;border-bottom:1px solid var(--border);
  cursor:pointer;
}
.sb-addr:active{background:var(--bg3)}
.sb-addr-lbl{font-size:10px;color:var(--t3);text-transform:uppercase;letter-spacing:.5px;font-weight:700}
.sb-addr-val{font-size:13px;font-weight:700;color:var(--t1)}

.sb-section-lbl{
  font-size:10px;font-weight:800;color:var(--t3);
  text-transform:uppercase;letter-spacing:1.5px;
  padding:14px 16px 7px;
}
.sb-item{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;
  font-size:14px;font-weight:600;color:var(--t2);
  border-left:3px solid transparent;
  transition:all .15s;cursor:pointer;
}
.sb-item:active,.sb-item.on{
  color:var(--orange);background:rgba(255,98,0,.06);
  border-left-color:var(--orange);
}
.sb-item-l{display:flex;align-items:center;gap:12px}
.sb-chevron{color:var(--t3);font-size:13px}
.sb-divider{height:1px;background:var(--border);margin:6px 16px}
.sb-call{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;margin-top:auto;
  font-size:13px;font-weight:700;color:var(--t2);
  border-top:1px solid var(--border);
  cursor:pointer;
}
.sb-call:active{background:var(--bg3);color:var(--orange)}

/* ═══════════════════════════════════════════
   PRODUCT DETAIL — slides up from bottom
═══════════════════════════════════════════ */
/* .det-body (desktop left/right split) must be hidden on mobile */
.det-body{display:none}

#detail-page{
  position:fixed;inset:0;z-index:600;
  background:var(--bg);
  display:flex;flex-direction:column;
  transform:translateY(100%);
  transition:transform .38s var(--ease);
  overflow:hidden;
}
#detail-page.open{transform:translateY(0)}

.det-hdr{
  height:var(--HDR);flex-shrink:0;
  background:var(--bg2);border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:10px;
  padding:0 12px;
}
.det-back{
  width:38px;height:38px;border-radius:50%;
  background:var(--bg3);border:1px solid var(--border);
  color:var(--t1);
  display:flex;align-items:center;justify-content:center;
}
.det-back:active{background:var(--bg4)}
.det-hdr-name{
  flex:1;
  font-family:'Barlow Condensed',sans-serif;
  font-size:20px;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.det-hdr-price{
  font-family:'Barlow Condensed',sans-serif;
  font-size:20px;font-weight:600;color:var(--orange);
  flex-shrink:0;
}

.det-scroll{display:block;flex:1;overflow-y:auto;padding-bottom:90px}

/* Product image — full width 16:10 */
.det-img{
  width:100%;aspect-ratio:16/10;
  background:var(--bg3);position:relative;overflow:hidden;
}
.det-img img{width:100%;height:100%;object-fit:cover}
.det-img-placeholder{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  font-size:80px;opacity:.2;
}
.det-img-ref{
  position:absolute;bottom:6px;left:10px;
  font-size:8px;color:rgba(255,255,255,.35);
  text-transform:uppercase;letter-spacing:.5px;font-weight:600;
}

.det-info{padding:14px 16px}
.det-price-big{
  font-family:'Barlow Condensed',sans-serif;
  font-size:30px;font-weight:600;color:var(--t1);
  display:flex;align-items:baseline;gap:3px;margin-bottom:3px;
}
.det-price-big small{font-size:15px}
.det-price-reg{
  font-size:12px;color:var(--t3);margin-bottom:10px;
  display:flex;align-items:center;gap:7px;
}
.det-price-pct{color:var(--success);font-weight:700}
.det-name{
  font-family:'Barlow Condensed',sans-serif;
  font-size:21px;font-weight:900;margin-bottom:7px;line-height:1.1;
}
.det-desc{font-size:15px;color:var(--t2);line-height:1.6;margin-bottom:14px}
.det-includes{
  background:var(--bg3);border:1px solid var(--border);
  border-radius:12px;padding:12px 14px;margin-bottom:14px;
}
.det-inc-lbl{
  font-size:9px;font-weight:800;color:var(--t3);
  text-transform:uppercase;letter-spacing:1px;margin-bottom:9px;
}
.det-inc-row{
  display:flex;align-items:center;gap:8px;
  font-size:12px;font-weight:600;color:rgba(255,255,255,.8);
  margin-bottom:5px;
}
.det-inc-row:last-child{margin-bottom:0}
.det-inc-dot{width:5px;height:5px;border-radius:50%;background:var(--orange);flex-shrink:0}

/* Personaliza tu pedido header */
.det-customize-hdr{
  padding:14px 16px 10px;
  font-family:'Barlow Condensed',sans-serif;
  font-size:22px;font-weight:700;
  color:var(--t1);letter-spacing:.3px;
  border-top:1px solid var(--border);
}

/* ═══════════════════════════════════════════
   ACCORDION — KFC style exact
═══════════════════════════════════════════ */
.acc-step{
  border:1px solid rgba(255,98,0,.35);
  border-radius:12px;
  margin:0 0 10px;
  background:var(--bg);
  overflow:hidden;
  transition:border-color .2s;
}
.acc-step.active-step{border-color:var(--orange)}
.acc-step.done-step{border-color:rgba(255,98,0,.25)}

.acc-hdr{
  width:100%;text-align:left;padding:14px 16px;
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:10px;
}
.acc-hdr:active{background:rgba(255,255,255,.02)}
.acc-hdr-l{flex:1;min-width:0}
.acc-hdr-title{
  font-family:'Barlow Condensed',sans-serif;
  font-size:18px;font-weight:600;color:var(--t1);margin-bottom:2px;
}
.acc-hdr-sub{
  font-size:13px;color:var(--t2);line-height:1.6;
}
.acc-hdr-r{display:flex;align-items:center;gap:7px;flex-shrink:0}

/* Badges */
.badge{
  font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
  padding:3px 9px;border-radius:999px;white-space:nowrap;
}
.badge-req{border:1.5px solid var(--t3);color:var(--t3)}
.badge-opt{border:1.5px solid var(--border);color:var(--t3)}
.badge-done{
  background:var(--success-bg);border:1.5px solid var(--success-bd);color:var(--success);
  animation:bpop .25s var(--spring);
}
.badge-done-static{
  background:var(--success-bg);border:1.5px solid var(--success-bd);color:var(--success);
}
@keyframes bpop{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}
.acc-chev{
  color:var(--t3);font-size:13px;
  transition:transform .25s var(--ease);flex-shrink:0;
}
.acc-step.open .acc-chev{transform:rotate(180deg)}

/* Accordion body */
.acc-body{
  max-height:0;overflow:hidden;
  transition:max-height .35s var(--ease);
}
.acc-step.open .acc-body{max-height:1000px}

/* Option rows */
.acc-opt{
  display:flex;align-items:center;gap:12px;
  padding:13px 16px;border-bottom:1px solid var(--border);
  cursor:pointer;transition:background .12s;
}
.acc-opt:last-child{border-bottom:none}
.acc-opt:active,.acc-opt.sel{background:rgba(255,98,0,.04)}
.acc-opt-img{
  width:42px;height:42px;border-radius:12px;
  background:#10141A;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:20px;overflow:hidden;
}
.acc-opt-img img{width:100%;height:100%;object-fit:cover}
.acc-opt-info{flex:1;min-width:0}
.acc-opt-name{font-size:14px;font-weight:500;color:var(--t1);margin-bottom:1px}
.acc-opt-sub{font-size:11px;color:var(--t2)}
.acc-opt-extra{font-size:11px;font-weight:700;color:var(--t2);flex-shrink:0;margin-right:6px}
/* Radio */
.acc-radio{
  width:22px;height:22px;border-radius:50%;
  border:2px solid var(--t3);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s var(--spring);
}
.acc-opt.sel .acc-radio{
  border-color:var(--orange);background:var(--orange);
  box-shadow:0 0 10px rgba(255,98,0,.45);transform:scale(1.08);
}
.acc-radio-dot{
  width:8px;height:8px;border-radius:50%;background:var(--white);
  opacity:0;transition:opacity .15s;
}
.acc-opt.sel .acc-radio-dot{opacity:1}

/* Upgrade option */
.acc-upg{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 16px;border-bottom:1px solid var(--border);
  cursor:pointer;
}
.acc-upg:last-child{border-bottom:none}
.acc-upg:active{background:rgba(255,255,255,.02)}
.acc-upg-l{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.acc-upg-name{font-size:14px;font-weight:500;color:var(--t1)}
.acc-upg-sub{font-size:11px;color:var(--t2)}
.acc-upg-add{
  width:36px;height:36px;border-radius:12px;
  background:var(--bg3);border:1.5px solid var(--border);
  color:var(--t1);font-size:20px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.acc-upg-add:active{background:var(--orange);border-color:var(--orange)}
.acc-upg-qty{
  display:flex;align-items:center;
  background:var(--bg3);border:1.5px solid var(--border);
  border-radius:12px;overflow:hidden;height:36px;flex-shrink:0;
}
.acc-upg-qbtn{
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;color:var(--t1);
}
.acc-upg-qbtn:active{background:var(--orange)}
.acc-upg-qval{
  width:28px;text-align:center;
  font-family:'Barlow Condensed',sans-serif;
  font-size:15px;font-weight:700;
}

/* DETAIL FOOTER */
.det-footer{
  position:fixed;bottom:0;left:0;right:0;
  background:var(--bg2);border-top:1px solid var(--border);
  padding:10px 14px calc(10px + var(--safe-b));
  display:flex;align-items:center;gap:10px;
  z-index:10;box-shadow:0 -4px 20px rgba(0,0,0,.4);
}
.det-qty{
  display:flex;align-items:center;
  background:var(--bg3);border:1.5px solid var(--border);
  border-radius:12px;overflow:hidden;height:46px;flex-shrink:0;
}
.det-qbtn{
  width:44px;height:100%;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;color:var(--t1);
}
.det-qbtn:active{background:var(--bg4)}
.det-qval{
  width:36px;text-align:center;
  font-family:'Barlow Condensed',sans-serif;
  font-size:18px;font-weight:700;
  border-left:1px solid var(--border);border-right:1px solid var(--border);
}
.det-add-btn{
  flex:1;height:46px;
  background:var(--orange);color:var(--white);
  font-family:'Barlow Condensed',sans-serif;
  font-size:18px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;
  border-radius:12px;
  box-shadow:0 4px 18px rgba(255,98,0,.4),0 2px 6px rgba(0,0,0,.22),0 1px 0 rgba(255,255,255,.1) inset;
  display:flex;align-items:center;justify-content:center;gap:7px;
  transition:all .15s;
}
.det-add-btn:active{background:var(--orange-h)}
.det-add-btn:disabled{background:var(--bg3);color:var(--t3);box-shadow:none;cursor:not-allowed;opacity:.6;border:1.5px solid var(--border)}

/* ═══════════════════════════════════════════
   CART PANEL — slides from right, full width mobile
═══════════════════════════════════════════ */
.cart-overlay{
  position:fixed;inset:0;z-index:1000;
  background:rgba(5,8,14,.85);backdrop-filter:blur(10px);
  opacity:0;pointer-events:none;
  transition:opacity .25s var(--ease);
}
.cart-overlay.open{opacity:1;pointer-events:all}
.cart-panel{
  position:absolute;right:0;top:0;bottom:0;width:100%;
  background:var(--bg);
  display:flex;flex-direction:column;
  transform:translateX(100%);
  transition:transform .3s var(--ease);
}
.cart-overlay.open .cart-panel{transform:translateX(0)}
.cart-hdr{
  height:var(--HDR);flex-shrink:0;
  padding:0 14px;border-bottom:1px solid rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:space-between;
  background:var(--bg);
}
.cart-title{
  font-family:'Barlow Condensed',sans-serif;
  font-size:18px;font-weight:700;text-transform:uppercase;
  display:flex;align-items:center;gap:8px;
}
.cart-x{
  width:34px;height:34px;border-radius:50%;
  background:var(--bg3);border:1px solid var(--border);
  color:var(--t1);
  display:flex;align-items:center;justify-content:center;
}
.cart-x:active{background:var(--bg4)}
.cart-body{flex:1;overflow-y:auto}
.cart-empty{
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;height:100%;padding:40px 24px;text-align:center;
}
.cart-empty-icon{margin-bottom:16px;opacity:.2}
.cart-empty-title{
  font-family:'Barlow Condensed',sans-serif;
  font-size:22px;font-weight:900;margin-bottom:8px;
}
.cart-empty-sub{font-size:13px;color:var(--t2);line-height:1.6;margin-bottom:20px}
.cart-empty-cta{
  background:var(--orange);color:var(--white);
  padding:12px 28px;border-radius:12px;
  font-family:'Barlow Condensed',sans-serif;
  font-size:17px;font-weight:600;
  box-shadow:0 4px 18px rgba(255,98,0,.4),0 2px 6px rgba(0,0,0,.22),0 1px 0 rgba(255,255,255,.1) inset;
}
.cart-items{padding:6px 14px}
.cart-item{
  display:flex;gap:12px;padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,.18);
}
.cart-item:last-child{border-bottom:none}
.cart-item-img{
  width:60px;height:60px;border-radius:12px;
  background:var(--bg3);flex-shrink:0;overflow:hidden;cursor:pointer;
}
.cart-item-img img{width:100%;height:100%;object-fit:cover}
.cart-item-info{flex:1;min-width:0}
.cart-item-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:4px}
.cart-item-name{
  font-family:'Barlow Condensed',sans-serif;
  font-size:15px;font-weight:600;cursor:pointer;line-height:1.2;
}
.cart-item-del{color:var(--orange);transition:all .15s;cursor:pointer;display:flex;align-items:center;flex-shrink:0;padding:2px}
.cart-item-del:active{color:var(--orange)}
.cart-item-see{font-size:12px;color:var(--t1);cursor:pointer;margin-bottom:6px;display:inline-flex;align-items:center;gap:3px}
.cart-item-see-arrow{transition:transform .2s;display:inline-block;color:var(--orange)}
.cart-item-see.open .cart-item-see-arrow{transform:rotate(180deg)}
.cart-item-detail{font-size:11px;color:var(--t1);line-height:1.5;margin-bottom:6px;display:none}
.cart-item-detail.show{display:block}
.cart-item-foot{display:flex;align-items:center;justify-content:space-between}
.cart-item-price{
  font-family:'Barlow Condensed',sans-serif;
  font-size:19px;font-weight:600;color:var(--orange);
}
.cart-item-qty{display:flex;align-items:center;border:1.5px solid rgba(255,255,255,.18);border-radius:999px;overflow:hidden}
.cart-item-qty-btn{
  width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  font-size:16px;cursor:pointer;color:var(--t1);transition:background .15s;
  background:transparent;border:none;
}
.cart-item-qty-btn:active{background:var(--bg3)}
.cart-item-qty-btn.disabled{color:var(--t3);cursor:not-allowed;}
.cart-item-qty-val{
  font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:600;
  min-width:24px;text-align:center;color:var(--t1);
}

.cart-upsell{padding:12px 14px;}
.cart-upsell-lbl{
  font-size:13px;font-weight:700;color:var(--t1);
  margin-bottom:10px;
}
.cart-upsell-row{display:flex;gap:8px;padding-bottom:2px;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;cursor:grab;touch-action:pan-x}
.cart-upsell-row:active{cursor:grabbing}
.cart-upsell-row::-webkit-scrollbar{display:none}
.cart-upsell-row .cupc{scroll-snap-align:start}
.cupc{
  flex-shrink:0;width:88px;
  background:#10141A;border:1px solid rgba(255,255,255,.18);
  border-radius:12px;padding:8px 7px;text-align:center;cursor:pointer;
}
.cupc:active{border-color:rgba(255,98,0,.4)}
.cupc-img{font-size:24px;margin-bottom:4px}
.cupc-name{font-size:10px;font-weight:700;color:var(--t1);margin-bottom:2px;line-height:1.3}
.cupc-price{font-size:12px;font-weight:800;color:var(--orange)}
.cart-upsell-nav{display:flex;justify-content:center;gap:10px;margin-top:8px}
.cart-upsell-arr{
  width:26px;height:26px;border-radius:50%;
  background:var(--bg3);border:1px solid var(--border);
  color:var(--t1);font-size:14px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;
}
.cart-upsell-arr:active{background:var(--orange);border-color:var(--orange)}
.cart-upsell-arr.gone{opacity:0;pointer-events:none}

.cart-foot{
  padding:14px;border-top:1px solid var(--border);
  background:var(--bg);flex-shrink:0;
  padding-bottom:calc(14px + var(--safe-b));
}
.cart-row{display:flex;justify-content:space-between;font-size:13px;color:var(--t1);margin-bottom:6px}
.cart-total{
  display:flex;justify-content:space-between;
  font-family:'Barlow Condensed',sans-serif;font-size:24px;font-weight:700;
  margin-bottom:14px;
}
.cart-total em{color:var(--orange);font-style:normal}
.btn-pay{
  width:100%;height:50px;
  background:var(--orange);color:var(--white);
  font-family:'Barlow Condensed',sans-serif;
  font-size:18px;font-weight:600;
  border-radius:12px;letter-spacing:.4px;
  box-shadow:0 4px 20px rgba(255,98,0,.4),0 2px 6px rgba(0,0,0,.25),0 1px 0 rgba(255,255,255,.1) inset;
}
.btn-pay:active{background:var(--orange-h)}
.btn-seguir{
  width:100%;margin-top:10px;
  font-size:12px;font-weight:700;color:var(--orange);padding:6px;
}

/* ═══════════════════════════════════════════
   SEARCH OVERLAY
═══════════════════════════════════════════ */
#search-overlay{
  position:fixed;inset:0;z-index:550;
  background:var(--bg);
  display:flex;flex-direction:column;
  transform:translateY(-100%);
  transition:transform .28s var(--ease);
}
#search-overlay.open{transform:translateY(0)}
.srch-hdr{
  height:var(--HDR);flex-shrink:0;
  padding:0 12px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:10px;
}
.srch-back{
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--t1);font-size:20px;
}
.srch-wrap{
  flex:1;display:flex;align-items:center;
  background:var(--bg3);border:1.5px solid rgba(255,255,255,.18);
  border-radius:999px;height:42px;padding:0 14px;gap:8px;
  transition:border-color .18s;
}
.srch-wrap:focus-within{border-color:rgba(255,98,0,.4)}
.srch-input{
  flex:1;background:none;border:none;outline:none;
  color:var(--t1);font-size:15px;
}
.srch-input::placeholder{color:var(--t2)}
/* Botón X para limpiar input */
.srch-clear{
  width:26px;height:26px;border-radius:50%;
  background:var(--bg4);display:flex;align-items:center;justify-content:center;
  color:var(--t2);flex-shrink:0;display:none;
}
.srch-clear.show{display:flex}
.srch-body{flex:1;overflow-y:auto}
/* Historial */
.srch-hist-hdr{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 16px 8px;
}
.srch-hist-lbl{font-size:12px;font-weight:700;letter-spacing:.6px;color:var(--t3);text-transform:uppercase}
.srch-hist-clear{font-size:12px;font-weight:700;color:var(--orange)}
.srch-chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 16px}
.srch-chip{
  display:flex;align-items:center;gap:5px;
  background:var(--bg3);border:1px solid var(--border);
  border-radius:999px;padding:6px 14px;font-size:12px;color:var(--t2);
}
.srch-chip svg{opacity:.5}
/* Sección de resultados */
.srch-results-lbl{
  padding:14px 16px 8px;
  font-size:12px;font-weight:700;letter-spacing:.6px;color:var(--t3);text-transform:uppercase;
}
/* Fila resultado */
.srch-row{
  display:flex;align-items:center;gap:12px;
  padding:10px 16px;
  border-bottom:1px solid var(--border2);
}
.srch-row-img{
  width:60px;height:60px;border-radius:12px;
  object-fit:cover;flex-shrink:0;background:var(--bg3);
}
.srch-row-info{flex:1;min-width:0}
.srch-row-name{
  font-size:13px;font-weight:600;color:var(--t1);
  margin-bottom:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.srch-row-name mark{background:none;color:var(--orange);font-weight:700}
.srch-row-prices{display:flex;align-items:center;gap:6px;font-size:12px;flex-wrap:wrap}
.srch-row-pct{color:#22c55e;font-weight:700;font-size:11px}
.srch-row-orig{color:var(--t3);text-decoration:line-through}
.srch-row-price{color:var(--t1);font-weight:700}
.srch-row-ver{font-size:12px;font-weight:700;color:var(--orange);flex-shrink:0;padding:4px 2px}
/* Ver más productos */
.srch-more-btn{
  display:block;width:100%;padding:18px;
  text-align:center;font-size:14px;font-weight:700;color:var(--orange);
  border-top:1px solid var(--border);
}
.srch-empty{
  padding:40px 16px;text-align:center;font-size:13px;color:var(--t3);
}

/* ═══════════════════════════════════════════
   DELIVERY MODE SHEET
═══════════════════════════════════════════ */
/* ═══ PANEL LATERAL CUENTA ═══ */
#acct-panel-overlay{
  position:fixed;inset:0;z-index:830;
  background:rgba(5,8,14,.72);backdrop-filter:blur(8px);
  opacity:0;pointer-events:none;transition:opacity .25s var(--ease);
}
#acct-panel-overlay.open{opacity:1;pointer-events:all}
.acct-side-panel{
  position:absolute;right:0;top:0;bottom:0;
  width:280px;background:var(--bg);
  display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .3s var(--ease);
  box-shadow:-12px 0 48px rgba(0,0,0,.5);overflow:hidden;
}
#acct-panel-overlay.open .acct-side-panel{transform:translateX(0)}
.acct-sp-hdr{
  background:var(--orange);padding:16px 14px;
  display:flex;align-items:center;gap:10px;
  flex-shrink:0;position:relative;min-height:62px;
}
.acct-sp-avatar{
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.25);border:2px solid rgba(255,255,255,.45);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:900;color:var(--white);
}
.acct-sp-name{
  font-family:'Barlow Condensed',sans-serif;
  font-size:17px;font-weight:900;color:var(--white);
  text-transform:uppercase;letter-spacing:.3px;flex:1;
}
.acct-sp-x{
  width:26px;height:26px;border-radius:50%;
  background:rgba(0,0,0,.2);color:var(--white);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;flex-shrink:0;
}
.acct-sp-list{flex:1;overflow-y:auto}
.acct-sp-item{
  display:flex;align-items:center;gap:12px;
  padding:15px 16px;font-size:14px;font-weight:600;color:var(--t1);
  border-bottom:1px solid var(--border);cursor:pointer;
  transition:background .12s;
}
.acct-sp-item:active{background:var(--bg3)}
.acct-sp-item svg{color:var(--t3);flex-shrink:0}
.acct-sp-item-chevron{margin-left:auto;color:var(--t3);font-size:16px}
.acct-sp-item.danger{color:var(--red)}
.acct-sp-item.danger svg{color:var(--red)}

/* ═══ VISTA DE CUENTA MOBILE ═══ */
#view-account-mobile{
  position:fixed;top:0;left:0;right:0;bottom:calc(var(--BOT) + var(--safe-b));z-index:500;
  background:var(--bg);
  display:none;flex-direction:column;
  overflow:hidden;
}
#view-account-mobile.open{display:flex}
.avm-hdr{
  background:var(--bg2);border-bottom:1px solid var(--border);
  padding:12px 16px;display:flex;align-items:center;gap:12px;
  flex-shrink:0;padding-top:calc(12px + var(--safe-t));
}
.avm-back{
  width:36px;height:36px;border-radius:50%;
  background:var(--bg3);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;color:var(--t1);
  flex-shrink:0;
}
.avm-title{
  font-family:'Barlow Condensed',sans-serif;
  font-size:20px;font-weight:900;flex:1;
}
.avm-body{flex:1;overflow-y:auto;padding:16px}
/* Nav tabs en mobile */
.avm-nav{
  display:flex;overflow-x:auto;gap:8px;
  padding:0 0 12px;margin-bottom:16px;
  border-bottom:1px solid var(--border);
}
.avm-nav::-webkit-scrollbar{display:none}
.avm-nav-item{
  flex-shrink:0;display:flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:999px;font-size:13px;font-weight:700;
  color:var(--t3);border:1.5px solid var(--border);cursor:pointer;
  white-space:nowrap;transition:all .15s;
}
.avm-nav-item.on{background:var(--orange);color:var(--white);border-color:var(--orange)}
/* Contenido sección */
.avm-section-title{
  font-family:'Barlow Condensed',sans-serif;
  font-size:22px;font-weight:900;margin-bottom:4px;
}
.avm-section-sub{font-size:12px;color:var(--t3);margin-bottom:18px}
.avm-header-row{
  display:flex;align-items:flex-start;justify-content:space-between;
  margin-bottom:18px;gap:12px;
}
.avm-header-row .avm-section-title{margin-bottom:2px}
.avm-header-row .avm-section-sub{margin-bottom:0}
.avm-link-btn{
  font-size:13px;font-weight:700;color:var(--orange);
  display:flex;align-items:center;gap:5px;
  white-space:nowrap;
}
.avm-field{margin-bottom:12px}
.avm-lbl{display:block;font-size:10px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.7px;margin-bottom:4px}
.avm-val{
  width:100%;background:var(--bg);border:1.5px solid rgba(255,255,255,.18);
  color:var(--t2);padding:11px 14px;border-radius:12px;font-size:14px;
}
.avm-input{
  width:100%;background:var(--bg);border:1.5px solid rgba(255,255,255,.18);
  color:var(--t1);padding:11px 14px;border-radius:12px;font-size:14px;
  outline:none;transition:border-color .18s;font-family:inherit;
}
.avm-input:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,98,0,.15);outline:none}
.avm-input::placeholder{color:var(--t2)}
.avm-err{color:var(--red);font-size:12px;font-weight:600;min-height:16px;margin-bottom:8px}
.avm-btn{
  width:100%;height:46px;background:var(--orange);color:var(--white);
  font-family:'Barlow Condensed',sans-serif;font-size:17px;font-weight:600;
  border-radius:12px;
  box-shadow:0 4px 16px rgba(255,98,0,.4),0 2px 6px rgba(0,0,0,.22),0 1px 0 rgba(255,255,255,.1) inset;margin-bottom:10px;
}
.avm-btn.sec{background:var(--bg3);color:var(--t2);box-shadow:none}
.avm-btn:active{transform:scale(.97);background:var(--orange-h)}
.avm-btn.sec:active{background:var(--bg4)}
.avm-btn-link{font-size:14px;font-weight:700;color:var(--orange);margin-bottom:8px;display:inline-block}
.avm-delete{font-size:12px;color:var(--red);cursor:pointer;display:inline-block;margin-top:8px}

/* ═══ VISTA INSTITUCIONAL MOBILE ═══ */
#view-inst-mobile{
  position:fixed;top:0;left:0;right:0;bottom:calc(var(--BOT) + var(--safe-b));z-index:500;
  background:var(--bg);
  display:none;flex-direction:column;
  overflow:hidden;
}
#view-inst-mobile.open{display:flex}
.vim-hdr{
  background:var(--bg2);border-bottom:1px solid var(--border);
  padding:12px 16px;display:flex;align-items:center;gap:12px;
  flex-shrink:0;padding-top:calc(12px + var(--safe-t));
}
.vim-back{
  width:36px;height:36px;border-radius:50%;
  background:var(--bg3);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;color:var(--t1);
  flex-shrink:0;
}
.vim-title{
  font-family:'Barlow Condensed',sans-serif;
  font-size:20px;font-weight:900;flex:1;
}
.vim-body{flex:1;overflow-y:auto}
.vim-nav{
  display:flex;overflow-x:auto;gap:8px;
  padding:16px 16px 12px;
  border-bottom:1px solid var(--border);
  position:sticky;top:0;background:var(--bg);z-index:10;
}
.vim-nav::-webkit-scrollbar{display:none}
.vim-nav-item{
  flex-shrink:0;
  padding:8px 14px;border-radius:999px;font-size:13px;font-weight:700;
  color:var(--t3);border:1.5px solid var(--border);cursor:pointer;
  white-space:nowrap;transition:all .15s;
}
.vim-nav-item.on{background:var(--orange);color:var(--white);border-color:var(--orange)}
.vim-content{padding:20px 16px}
.vim-section-title{
  font-family:'Barlow Condensed',sans-serif;
  font-size:24px;font-weight:900;margin-bottom:16px;
}
.vim-section-text{font-size:14px;color:var(--t2);line-height:1.7}
.vim-section-text p{margin-bottom:14px}
.vim-section-text h3{
  font-family:'Barlow Condensed',sans-serif;
  font-size:18px;font-weight:800;color:var(--t1);margin:20px 0 10px;
}
.vim-section-text ul{margin:10px 0 14px 18px}
.vim-section-text li{margin-bottom:6px}

/* ═══ QUIÉNES SOMOS — MOBILE BRUTAL ═══ */
.qs-intro{
  font-size:16px;line-height:1.65;color:var(--t1);
  margin-bottom:20px;font-weight:600;
  position:relative;padding-left:18px;
  opacity:0;animation:qsFadeUp .8s cubic-bezier(.4,0,.2,1) .1s forwards;
}
.qs-intro::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--orange) 0%,transparent 100%);
  border-radius:2px;
}
.qs-intro strong{color:var(--orange);font-weight:700}

.qs-body{
  position:relative;
  background:linear-gradient(145deg,rgba(255,255,255,.02) 0%,rgba(255,255,255,0) 100%);
  border:1px solid var(--border);border-radius:16px;
  padding:22px 20px;overflow:hidden;
  margin-bottom:28px;
  opacity:0;transform:translateY(20px);
  animation:qsFadeUp .7s cubic-bezier(.4,0,.2,1) .3s forwards;
}
.qs-body::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent 0%,var(--orange) 50%,transparent 100%);
  opacity:.5;
}
.qs-body::after{
  content:"";position:absolute;top:-60px;right:-60px;width:180px;height:180px;
  background:radial-gradient(circle,rgba(255,98,0,.06) 0%,transparent 50%);
  pointer-events:none;
}
.qs-body p{
  font-size:14px;line-height:1.7;color:var(--t2);
  margin-bottom:14px;position:relative;z-index:1;
}
.qs-body p:last-child{margin-bottom:0}
.qs-body strong{color:var(--orange);font-weight:700}
.qs-body em{
  color:var(--t1);font-weight:600;font-style:normal;
}

/* Sección Hacia dónde vamos - Mobile */
.qs-vision{
  position:relative;padding:22px 20px;
  background:linear-gradient(135deg,rgba(255,98,0,.08) 0%,rgba(255,98,0,.01) 100%);
  border:1px solid rgba(255,98,0,.2);border-radius:16px;
  overflow:hidden;
  opacity:0;animation:qsFadeUp .7s cubic-bezier(.4,0,.2,1) .5s forwards;
}
.qs-vision::before{
  content:"";position:absolute;top:0;left:0;width:3px;height:100%;
  background:linear-gradient(180deg,var(--orange) 0%,transparent 100%);
}
.qs-vision::after{
  content:"";position:absolute;top:-80px;right:-80px;width:200px;height:200px;
  background:radial-gradient(circle,rgba(255,98,0,.08) 0%,transparent 60%);
  pointer-events:none;
}
.qs-vision-label{
  display:inline-flex;align-items:center;gap:8px;
  font-size:10px;font-weight:800;color:var(--orange);
  text-transform:uppercase;letter-spacing:1.3px;margin-bottom:12px;
}
.qs-vision-label::before{
  content:"";width:18px;height:1px;background:var(--orange);
}
.qs-vision-text{
  font-size:13.5px;line-height:1.7;color:var(--t2);
  margin-bottom:12px;position:relative;z-index:1;
}
.qs-vision-quote{
  display:block;font-family:'Barlow Condensed',sans-serif;
  font-size:17px;font-weight:700;color:var(--t1);
  font-style:italic;margin-top:18px;padding-top:18px;
  border-top:1px solid rgba(255,98,0,.15);line-height:1.4;
}
.qs-vision-quote span{color:var(--orange)}

@keyframes qsFadeUp{
  to{opacity:1;transform:translateY(0)}
}

/* ═══ FORMULARIO INSTITUCIONAL MOBILE ═══ */
.qs-form{max-width:100%}
.qs-form-field{margin-bottom:16px}
.qs-form-label{
  display:block;font-size:13px;font-weight:700;color:var(--t1);
  margin-bottom:5px;
}
.qs-form-input{
  width:100%;background:var(--bg);border:1.5px solid rgba(255,255,255,.18);
  color:var(--t1);padding:12px 14px;border-radius:12px;font-size:14px;
  font-family:inherit;outline:none;transition:border-color .18s;
}
.qs-form-input::placeholder{color:var(--t2)}
.qs-form-input:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,98,0,.15);outline:none}
.qs-form-textarea{resize:vertical;min-height:90px}
.qs-form-file-wrap{
  display:flex;align-items:center;gap:10px;
}
.qs-form-file-input{
  position:absolute;width:0;height:0;opacity:0;pointer-events:none;
}
.qs-form-file-btn{
  flex-shrink:0;padding:10px 16px;border-radius:12px;
  background:var(--bg3);border:1.5px solid rgba(255,255,255,.18);
  color:var(--t1);font-size:12px;font-weight:700;font-family:inherit;
  cursor:pointer;transition:all .18s;
}
.qs-form-file-btn:active{border-color:rgba(255,98,0,.4);color:var(--orange)}
.qs-form-file-name{
  font-size:12px;color:var(--t3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  min-width:0;flex:1;
}
.qs-form-submit{
  width:100%;height:46px;background:var(--orange);color:var(--white);
  font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:600;
  border-radius:12px;border:none;cursor:pointer;
  box-shadow:0 4px 16px rgba(255,98,0,.4),0 2px 6px rgba(0,0,0,.22),0 1px 0 rgba(255,255,255,.1) inset;
  margin-top:6px;
}
.qs-form-submit:active{transform:scale(.97);background:#e55800}
select.qs-form-input{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
  padding-right:36px;cursor:pointer;
}

/* Formulario Mis direcciones Mobile */
.avm-addr-form{}
.avm-addr-map{
  width:100%;height:340px;border-radius:12px;overflow:hidden;
  background:var(--bg);border:1px solid rgba(255,255,255,.18);
  margin-bottom:14px;position:relative;
  display:block;
}
.avm-addr-map-placeholder{
  height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
}
.avm-addr-map-text{font-size:12px;color:var(--t3);font-weight:600}
.avm-addr-gps{
  display:flex;align-items:center;gap:8px;
  font-size:13px;font-weight:700;color:var(--orange);
  margin-bottom:16px;
}
.avm-addr-field{margin-bottom:14px}
.avm-addr-label{
  display:block;font-size:14px;font-weight:700;color:var(--t1);margin-bottom:6px;
}
.avm-addr-input{
  width:100%;background:var(--bg);border:1.5px solid rgba(255,255,255,.18);
  color:var(--t1);padding:12px 14px;border-radius:12px;font-size:15px;
  outline:none;transition:border-color .18s;font-family:inherit;
}
.avm-addr-input:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,98,0,.15);outline:none}
.avm-addr-input::placeholder{color:var(--t2)}
.avm-addr-labels{display:flex;flex-direction:column;gap:8px}
.avm-addr-label-opt{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;border-radius:12px;
  background:var(--bg);border:1.5px solid rgba(255,255,255,.18);
  font-size:15px;font-weight:600;color:var(--t2);
  cursor:pointer;transition:all .15s;
}
.avm-addr-label-opt.sel{border-color:var(--orange);color:var(--t1);background:rgba(255,98,0,.08)}
.avm-addr-label-opt svg{color:var(--t2)}
.avm-addr-label-opt.sel svg{color:var(--orange)}
.avm-addr-radio{
  width:20px;height:20px;border-radius:50%;
  border:2px solid var(--border);
  position:relative;transition:all .15s;flex-shrink:0;
}
.avm-addr-label-opt.sel .avm-addr-radio{border-color:var(--orange)}
.avm-addr-label-opt.sel .avm-addr-radio::after{
  content:'';position:absolute;
  top:4px;left:4px;width:8px;height:8px;
  background:var(--orange);border-radius:50%;
}
.avm-addr-actions{display:flex;gap:12px;margin-top:20px}
.avm-addr-cancel{
  flex:1;height:48px;
  font-size:15px;font-weight:700;color:var(--red);
  background:transparent;border:1.5px solid var(--red);border-radius:12px;
}
.avm-addr-save{
  flex:1;height:48px;
  background:var(--orange);color:var(--white);
  font-family:'Barlow Condensed',sans-serif;
  font-size:18px;font-weight:600;
  border-radius:12px;
  box-shadow:0 4px 16px rgba(255,98,0,.35),0 2px 6px rgba(0,0,0,.2),0 1px 0 rgba(255,255,255,.1) inset;
}

/* Tarjetas de direcciones guardadas Mobile */
.avm-addr-card{
  display:flex;flex-direction:column;gap:10px;
  background:var(--bg3);border:1px solid var(--border);
  border-radius:12px;padding:14px;margin-bottom:10px;
}
.avm-addr-card-icon{color:var(--orange);display:inline-flex;align-items:center}
.avm-addr-card-info{flex:1}
.avm-addr-card-label{font-family:'Barlow Condensed',sans-serif;font-size:17px;font-weight:800;margin-bottom:2px;display:flex;align-items:center;gap:8px}
.avm-addr-card-address{font-size:13px;color:var(--t2);line-height:1.4}
.avm-addr-card-ref{font-size:12px;color:var(--t3);margin-top:4px}
.avm-addr-card-actions{display:flex;gap:16px;padding-top:10px;border-top:1px solid var(--border)}
.avm-addr-card-btn{
  display:flex;align-items:center;gap:6px;
  font-size:13px;font-weight:700;
}
.avm-addr-card-btn.delete{color:var(--red)}
.avm-addr-card-btn.edit{color:var(--orange)}

.avm-order{
  background:var(--bg3);border:1px solid var(--border);
  border-radius:12px;padding:14px;margin-bottom:10px;
}
.avm-order-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:3px}
.avm-order-num{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:900;color:var(--orange)}
.avm-order-badge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:999px;background:rgba(255,98,0,.15);color:#ffb380}
.avm-order-date{font-size:11px;color:var(--t3);margin-bottom:5px}
.avm-order-lines{font-size:12px;color:var(--t2);line-height:1.5;margin-bottom:5px}
.avm-order-total{font-family:'Barlow Condensed',sans-serif;font-size:18px;font-weight:900;color:var(--orange)}
.avm-track-step{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid var(--border2)}
.avm-track-step:last-child{border-bottom:none}
.avm-track-dot{width:28px;height:28px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:12px}
.avm-track-dot.done{background:var(--success);color:var(--white)}
.avm-track-dot.active{background:var(--orange);color:var(--white);animation:pulse-dot 1.5s infinite}
.avm-track-dot.pending{background:var(--bg3);color:var(--t3)}
.avm-track-title{font-size:14px;font-weight:700;color:var(--t1)}
.avm-track-sub{font-size:11px;color:var(--t3);margin-top:2px}

/* ═══ DELIVERY SHEET MEJORADO ═══ */
/* ═══ DELIVERY SHEET — ESTILO KFC ═══ */
#delivery-sheet{
  position:fixed;inset:0;z-index:520;
  background:var(--bg);
  opacity:0;pointer-events:none;
  transition:opacity .2s var(--ease);
  display:flex;flex-direction:column;
}
#delivery-sheet.open{opacity:1;pointer-events:all}
#delivery-sheet.over-cart{z-index:600}
#delivery-sheet.over-checkout{z-index:700}
.ds-header{
  display:flex;align-items:center;justify-content:center;
  height:56px;padding:0 16px;
  border-bottom:1px solid var(--border);
  position:relative;flex-shrink:0;
}
.ds-header-title{
  font-family:'Barlow Condensed',sans-serif;
  font-size:18px;font-weight:700;color:var(--t1);
}
.ds-close{
  position:absolute;right:16px;top:50%;transform:translateY(-50%);
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  color:var(--t2);cursor:pointer;
}
.ds-close:active{opacity:.6}
.ds-body{
  flex:1;overflow-y:auto;padding:20px 16px calc(20px + var(--safe-b));
}
/* Tabs toggle */
.ds-tabs{
  display:flex;gap:0;
  background:var(--bg3);border-radius:12px;padding:4px;margin-bottom:20px;
}
.ds-tab{
  flex:1;height:40px;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;color:var(--t2);
  border-radius:12px;cursor:pointer;
  transition:all .18s var(--ease);
}
.ds-tab.sel{
  background:var(--orange);color:var(--white);
  box-shadow:0 2px 8px rgba(255,98,0,.3);
}
/* Mapa grande */
.ds-map{
  width:100%;height:300px;border-radius:12px;
  background:var(--bg3);border:1px solid var(--border);
  margin-bottom:16px;overflow:hidden;
  display:block;position:relative;
}
.ds-map-placeholder{color:var(--t3);font-size:12px;font-weight:600}
/* GPS link */
.ds-gps{
  display:flex;align-items:center;gap:8px;
  font-size:13px;font-weight:700;color:var(--orange);
  margin-bottom:20px;cursor:pointer;
}
.ds-gps:active{opacity:.7}
/* Campos */
.ds-field{margin-bottom:16px}
.ds-field:last-of-type{margin-bottom:20px}
.ds-label{
  display:block;font-size:14px;font-weight:700;color:var(--t1);
  margin-bottom:8px;
}
.ds-input{
  width:100%;background:var(--bg);
  border:1.5px solid rgba(255,255,255,.18);color:var(--t1);
  padding:14px 16px;border-radius:12px;
  font-size:15px;outline:none;font-family:inherit;
  transition:border-color .15s;
}
.ds-input:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,98,0,.15);outline:none}
.ds-input::placeholder{color:var(--t2)}
/* Dirección readonly con fondo diferente */
.ds-address-display{
  width:100%;background:var(--bg3);
  border:1.5px solid rgba(255,255,255,.18);color:var(--t1);
  padding:14px 16px;border-radius:12px;
  font-size:15px;min-height:50px;
}
/* Checkbox guardar */
.ds-save{
  display:flex;align-items:center;gap:10px;
  margin-bottom:24px;cursor:pointer;
}
.ds-save-box{
  width:20px;height:20px;border-radius:12px;
  border:2px solid var(--orange);
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;flex-shrink:0;
}
.ds-save.checked .ds-save-box{
  background:var(--orange);border-color:var(--orange);
}
.ds-save-box svg{opacity:0;transition:opacity .15s}
.ds-save.checked .ds-save-box svg{opacity:1}
.ds-save-text{font-size:14px;color:var(--t2)}
/* Botón confirmar */
.ds-confirm{
  width:100%;height:52px;
  background:var(--orange);color:var(--white);
  font-family:'Barlow Condensed',sans-serif;
  font-size:17px;font-weight:800;
  border-radius:12px;
  box-shadow:0 4px 16px rgba(255,98,0,.35);
  transition:background .15s;
}
.ds-confirm:active{background:var(--orange-h)}
/* Contenido delivery (oculto por defecto) */
.ds-delivery-content{display:none}
.ds-delivery-content.show{display:block}

/* Botón agregar dirección minimalista */
.ds-add-btn{
  display:flex;align-items:center;gap:8px;
  font-size:14px;font-weight:600;color:var(--t2);
  padding:14px 0;cursor:pointer;transition:color .15s;
}
.ds-add-btn:active{color:var(--orange)}
.ds-add-btn svg{color:var(--t3);transition:color .15s}

/* Tarjetas de dirección en delivery sheet */
.ds-addr-item{
  display:flex;align-items:flex-start;gap:12px;
  padding:14px 16px;border-radius:12px;
  background:var(--bg3);border:1px solid var(--border);
  margin-bottom:10px;cursor:pointer;transition:all .15s;
}
.ds-addr-item:active{border-color:var(--orange);background:rgba(255,98,0,.05)}
.ds-addr-item.selected{border-color:var(--orange);background:rgba(255,98,0,.08)}
.ds-addr-item-icon{color:var(--orange);flex-shrink:0;margin-top:2px}
.ds-addr-item-icon.history{color:var(--t3)}
.ds-addr-item-info{flex:1;min-width:0}
.ds-addr-item-label{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:800;margin-bottom:2px}
.ds-addr-item-address{font-size:13px;color:var(--t2);line-height:1.4}
.ds-addr-item-actions{
  display:flex;gap:8px;flex-shrink:0;
}
.ds-addr-item-btn{
  padding:6px;border-radius:12px;color:var(--t3);
  transition:all .15s;
}
.ds-addr-item-btn:active{background:var(--bg4);color:var(--t1)}
.ds-addr-item-btn.delete:active{color:var(--red)}
.ds-addr-item-btn.edit:active{color:var(--orange)}

/* Pickup info */
.ds-pickup-info{
  text-align:center;padding:40px 20px;color:var(--t2);
}
.ds-pickup-icon{
  width:64px;height:64px;margin:0 auto 16px;
  background:var(--bg3);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.ds-pickup-title{
  font-family:'Barlow Condensed',sans-serif;
  font-size:20px;font-weight:800;color:var(--t1);margin-bottom:6px;
}
.ds-pickup-sub{font-size:14px;line-height:1.5}

/* ═══════════════════════════════════════════
   SORT BOTTOM SHEET
═══════════════════════════════════════════ */
#sort-sheet{
  position:fixed;inset:0;z-index:520;
  background:rgba(5,8,14,.82);backdrop-filter:blur(8px);
  display:flex;flex-direction:column;justify-content:flex-end;
  opacity:0;pointer-events:none;transition:opacity .25s var(--ease);
}
#sort-sheet.open{opacity:1;pointer-events:all}
.ss-panel{
  background:var(--bg2);border-radius:999px 20px 0 0;
  border-top:1px solid var(--border);
  padding:6px 0 calc(8px + var(--safe-b));
  transform:translateY(100%);transition:transform .3s var(--ease);
}
#sort-sheet.open .ss-panel{transform:translateY(0)}
.ss-title{
  font-size:16px;font-weight:700;color:var(--t1);
  padding:14px 20px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
}
.ss-x{color:var(--t2);font-size:18px}
.ss-option{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;font-size:15px;font-weight:600;color:var(--t2);
  border-bottom:1px solid var(--border2);cursor:pointer;
}
.ss-option:active{background:var(--bg3)}
.ss-option.on{color:var(--orange)}
.ss-check{color:var(--orange);font-size:16px;opacity:0}
.ss-option.on .ss-check{opacity:1}
.ss-apply{
  width:calc(100% - 32px);margin:16px 16px 0;height:50px;
  background:var(--orange);color:var(--white);
  font-family:'Barlow Condensed',sans-serif;
  font-size:18px;font-weight:600;
  border-radius:12px;letter-spacing:.4px;
  box-shadow:0 4px 18px rgba(255,98,0,.4),0 2px 6px rgba(0,0,0,.22),0 1px 0 rgba(255,255,255,.1) inset;
}
.ss-apply:active{background:var(--orange-h)}

/* ═══════════════════════════════════════════
   CHECKOUT FULL-SCREEN
═══════════════════════════════════════════ */
#checkout{
  position:fixed;inset:0;z-index:650;
  background:var(--bg);
  display:flex;flex-direction:column;
  transform:translateY(100%);
  transition:transform .35s var(--ease);
  overflow:hidden;
}
#checkout.open{transform:translateY(0)}
.co-hdr{
  height:var(--HDR);flex-shrink:0;
  background:var(--orange);border-bottom:none;
  padding:0 14px;
  display:flex;align-items:center;justify-content:space-between;
}
.co-hdr .det-back{background:rgba(0,0,0,.2);border:none}
.co-hdr-title{
  font-family:'Barlow Condensed',sans-serif;
  font-size:18px;font-weight:900;color:var(--white);
}
.co-steps-bar{
  display:flex;align-items:center;justify-content:center;
  gap:6px;padding:10px 16px;border-bottom:1px solid var(--border);
  background:var(--bg2);flex-shrink:0;
}
.co-step-dot{
  width:24px;height:24px;border-radius:50%;
  border:2px solid var(--t3);
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:800;color:var(--t3);
  transition:all .25s;
}
.co-step-dot.on{background:var(--orange);border-color:var(--orange);color:var(--white)}
.co-step-dot.done{background:var(--success);border-color:var(--success);color:var(--white)}
.co-step-lbl{font-size:10px;font-weight:700;color:var(--t3);text-transform:uppercase;margin-left:4px}
.co-step-lbl.on{color:var(--t1)}
.co-step-line{width:18px;height:2px;background:var(--t3);transition:background .25s}
.co-step-line.done{background:var(--success)}
.co-body-wrap{flex:1;overflow-y:auto;display:block;}
.co-body{display:block;max-width:none;padding:16px;}
.co-step-grid{display:block;}
.co-sidebar{display:none;}
.co-section-title{
  font-family:'Barlow Condensed',sans-serif;
  font-size:20px;font-weight:600;margin-bottom:5px;
}
.co-section-sub{font-size:13px;color:var(--t2);line-height:1.5;margin-bottom:18px}
.co-option{
  display:flex;align-items:center;gap:14px;
  background:var(--bg2);border:2px solid var(--border);
  border-radius:16px;padding:16px;margin-bottom:10px;
  position:relative;cursor:pointer;transition:all .18s;
}
.co-option.sel{border-color:var(--orange);background:rgba(255,98,0,.07)}
.co-option-check{position:absolute;top:10px;right:12px;color:var(--orange);font-size:15px;opacity:0}
.co-option.sel .co-option-check{opacity:1}
.co-option-icon{font-size:34px}
.co-option-title{
  font-family:'Barlow Condensed',sans-serif;
  font-size:17px;font-weight:900;margin-bottom:3px;
}
.co-option-sub{font-size:12px;color:var(--t2);line-height:1.4}
.co-option-badge{
  display:inline-block;margin-top:6px;
  background:rgba(255,98,0,.15);color:#ffb380;
  font-size:10px;font-weight:800;padding:2px 9px;border-radius:999px;
}
.co-field{margin-bottom:13px}
.co-lbl{
  display:block;font-size:13px;font-weight:700;color:var(--t1);
  margin-bottom:5px;
}
.co-input{
  width:100%;background:var(--bg);border:1.5px solid rgba(255,255,255,.18);
  color:var(--t1);padding:13px 14px;border-radius:12px;
  font-size:15px;outline:none;transition:border-color .18s;
}
.co-input:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,98,0,.15);outline:none}
.co-input::placeholder{color:var(--t2)}
.co-2col{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pay-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}
.pay-opt{
  background:var(--bg2);border:2px solid var(--border);
  border-radius:12px;padding:14px 10px;text-align:center;
  position:relative;cursor:pointer;transition:all .18s;
}
.pay-opt.sel{border-color:var(--orange);background:rgba(255,98,0,.07)}
.pay-opt-check{position:absolute;top:7px;right:9px;color:var(--orange);font-size:13px;opacity:0}
.pay-opt.sel .pay-opt-check{opacity:1}
.pay-opt-icon{font-size:26px;display:block;margin-bottom:6px}
.pay-opt-name{font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:600}
.pay-opt-sub{font-size:10px;color:var(--t2);margin-top:2px}
.co-summary{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:14px}
.co-sum-lbl{font-size:13px;font-weight:600;color:var(--t1);margin-bottom:11px}
.co-sum-item{display:flex;align-items:flex-start;gap:9px;padding:8px 0;border-bottom:1px solid var(--border2)}
.co-sum-item:last-child{border-bottom:none}
.co-sum-img{
  width:34px;height:34px;border-radius:12px;background:var(--bg3);
  flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:16px;
}
.co-sum-name{font-size:12px;font-weight:600;line-height:1.3}
.co-sum-detail{font-size:10px;color:var(--t2);margin-top:1px}
.co-sum-info{flex:1;min-width:0}
.co-sum-price{font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:600;color:var(--orange);flex-shrink:0;margin-left:auto}
.co-totals{margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.co-total-row{display:flex;justify-content:space-between;font-size:13px;color:var(--t1);margin-bottom:5px}
.co-grand{display:flex;justify-content:space-between;font-family:'Barlow Condensed',sans-serif;font-size:22px;font-weight:700;margin-top:7px}
.co-grand em{color:var(--orange);font-style:normal}

/* Selector de comprobante estilo dropdown */
.co-select-wrap{
  width:100%;background:var(--bg3);border:1.5px solid rgba(255,255,255,.18);
  color:var(--t1);padding:13px 14px;border-radius:12px;
  font-size:15px;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;
  transition:border-color .18s;
}
.co-select-wrap:active{border-color:rgba(255,98,0,.45)}
.co-select-opts{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:12px;margin-top:6px;overflow:hidden;
}
.co-select-opt{
  padding:12px 14px;font-size:14px;color:var(--t2);
  border-bottom:1px solid var(--border);cursor:pointer;
  transition:all .15s;
}
.co-select-opt:last-child{border-bottom:none}
.co-select-opt:active,.co-select-opt.sel{background:rgba(255,98,0,.08);color:var(--orange)}

/* Checkbox estilizado */
.co-check-box{
  width:18px;height:18px;border-radius:12px;
  border:2px solid var(--orange);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;
}
.co-check-box.checked{background:var(--orange);border-color:var(--orange)}
.co-check-box svg{opacity:0;transition:opacity .15s}
.co-check-box.checked svg{opacity:1}

/* Card de delivery en paso 2 */
.co-deliv-card{
  display:flex;align-items:center;gap:14px;
  background:var(--bg2);border:1px solid var(--border);
  border-radius:12px;padding:14px 16px;
}
.co-deliv-icon{color:var(--orange)}
.co-deliv-title{
  font-family:'Barlow Condensed',sans-serif;
  font-size:16px;font-weight:600;margin-bottom:2px;
}
.co-deliv-sub{font-size:12px;color:var(--t2)}

/* Botón cambiar dirección */
.co-change-addr{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:12px;margin-top:20px;
  border:1.5px dashed rgba(255,255,255,.18);border-radius:12px;
  font-size:13px;font-weight:600;color:var(--t1);
  background:transparent;cursor:pointer;
  transition:all .15s;
}
.co-change-addr:active{border-color:var(--orange);color:var(--orange)}

.co-foot{
  padding:12px 14px calc(12px + var(--safe-b));
  border-top:1px solid var(--border);background:var(--bg);flex-shrink:0;
  display:flex;gap:10px;
}
.btn-co-back{
  flex:1;height:50px;
  border:2px solid var(--border);color:var(--t2);border-radius:12px;
  font-weight:800;font-size:14px;
  display:flex;align-items:center;justify-content:center;gap:6px;
  transition:all .18s;
}
.btn-co-back:active{border-color:var(--t1);color:var(--t1)}
.btn-co-next{
  flex:2;height:50px;
  background:var(--orange);color:var(--white);
  font-family:'Barlow Condensed',sans-serif;
  font-size:18px;font-weight:600;
  border-radius:12px;letter-spacing:.4px;
  box-shadow:0 4px 18px rgba(255,98,0,.4),0 2px 6px rgba(0,0,0,.22),0 1px 0 rgba(255,255,255,.1) inset;
  display:flex;align-items:center;justify-content:center;gap:7px;
  transition:all .15s;
}
.btn-co-next:active{background:var(--orange-h)}
.btn-co-next:disabled{
  background:var(--bg3);color:var(--t3);
  box-shadow:none;cursor:not-allowed;
  opacity:.6;border:1.5px solid var(--border);
}
.btn-co-next:disabled:active{background:var(--bg3)}

/* ─ SUCCESS ─ */
.co-success{
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;min-height:70vh;padding:40px 20px;text-align:center;
}
.co-success-icon{
  width:72px;height:72px;margin:0 auto 16px;
  animation:popIn .5s var(--spring);
}
@keyframes popIn{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes drawCheck{to{stroke-dashoffset:0}}
.co-success-title{
  font-family:'Barlow Condensed',sans-serif;
  font-size:30px;font-weight:900;color:var(--white);text-transform:uppercase;
  margin-bottom:8px;
}
.co-success-sub{font-size:13px;color:var(--t2);line-height:1.6;margin-bottom:22px}
.co-order-box{
  background:rgba(255,98,0,.08);border:1px solid rgba(255,98,0,.25);
  border-radius:12px;padding:13px 24px;display:inline-block;margin-bottom:24px;
}
.co-order-lbl{font-size:9px;color:var(--t2);text-transform:uppercase;letter-spacing:1px}
.co-order-num{
  font-family:'Bebas Neue',sans-serif;
  font-size:30px;color:var(--white);letter-spacing:4px;
}

/* Cupón de descuento */
.co-coupon-bar{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--bg3);border:1px solid var(--border);
  border-radius:12px;padding:14px 16px;cursor:pointer;
  transition:all .15s;
}
.co-coupon-bar:active{border-color:var(--orange);background:rgba(255,98,0,.05)}
.co-coupon-left{display:flex;align-items:center;gap:10px;color:var(--t1);font-size:14px;font-weight:600}
.co-coupon-left svg{color:var(--orange)}

/* Lista de métodos de pago */
.co-pay-list{display:flex;flex-direction:column;gap:0}
.co-pay-item{
  display:flex;align-items:center;gap:12px;
  padding:16px;border:1px solid var(--border);
  background:var(--bg2);cursor:pointer;
  transition:all .15s;
}
.co-pay-item:first-child{border-radius:12px 10px 0 0}
.co-pay-item:last-of-type{border-radius:0 0 10px 10px}
.co-pay-item:not(:last-of-type){border-bottom:none}
.co-pay-item.sel{background:rgba(255,98,0,.05);border-color:var(--orange)}
.co-pay-item.sel + .co-pay-fields{border-color:var(--orange)}
.co-pay-radio{
  width:20px;height:20px;border-radius:50%;
  border:2px solid var(--border);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;
}
.co-pay-radio.on{border-color:var(--orange)}
.co-pay-radio.on::after{
  content:'';width:10px;height:10px;border-radius:50%;
  background:var(--orange);
}
.co-pay-name{font-size:14px;font-weight:600;color:var(--t1)}
.co-pay-fields{
  padding:16px;background:rgba(255,255,255,.02);
  border:1px solid var(--border);border-top:none;
  margin-top:-1px;
}
/* Floating label inputs */
.co-float-field{
  position:relative;margin-bottom:12px;
}
.co-float-field:last-child{margin-bottom:0}
.co-float-input{
  width:100%;height:52px;padding:20px 14px 8px;
  background:var(--bg);border:1.5px solid rgba(255,255,255,.18);border-radius:12px;
  font-size:15px;font-weight:500;color:var(--t1);
  transition:border-color .2s, box-shadow .2s;
}
.co-float-input:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,98,0,.15)}
.co-float-label{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  font-size:14px;color:var(--t3);pointer-events:none;
  transition:all .2s ease;
}
.co-float-input:focus + .co-float-label,
.co-float-input:not(:placeholder-shown) + .co-float-label{
  top:12px;transform:translateY(0);font-size:10px;color:var(--t2);
  font-weight:600;letter-spacing:.3px;text-transform:uppercase;
}
.co-float-input:focus + .co-float-label{color:var(--orange)}
.co-float-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.co-pay-help{
  display:flex;align-items:center;gap:8px;
  padding:12px;background:rgba(255,98,0,.08);
  border-radius:12px;margin-top:8px;cursor:pointer;
  font-size:12px;color:var(--orange);font-weight:600;
}
.co-pay-help svg:first-child{flex-shrink:0}
.co-pay-help span{flex:1}
.co-pay-help-content{
  padding:12px;background:var(--bg3);
  border-radius:12px;margin-top:8px;
  font-size:12px;color:var(--t2);line-height:1.6;
}
.co-pay-help-content p{margin:4px 0}
.co-qr-placeholder{
  display:flex;flex-direction:column;align-items:center;
  padding:24px;gap:12px;
  background:var(--bg3);border-radius:12px;
  text-align:center;
}
.co-qr-placeholder span{font-size:13px;color:var(--t2);font-weight:600}

/* Modal cupón */
#couponModal{
  position:fixed;inset:0;z-index:850;
  background:var(--bg);
  transform:translateY(100%);
  transition:transform .3s var(--ease);
  display:flex;flex-direction:column;
}
#couponModal.open{transform:translateY(0)}
.coupon-hdr{
  background:var(--orange);padding:16px;
  display:flex;align-items:center;justify-content:space-between;
}
.coupon-hdr-title{
  display:flex;align-items:center;gap:10px;
  font-family:'Barlow Condensed',sans-serif;
  font-size:18px;font-weight:800;color:var(--white);
}
.coupon-close{
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  color:var(--white);cursor:pointer;
}
.coupon-body{flex:1;padding:20px 16px}
.coupon-input{
  width:100%;background:var(--bg);border:1.5px solid rgba(255,255,255,.18);
  color:var(--t1);padding:14px 16px;border-radius:12px;
  font-size:15px;margin-bottom:14px;
}
.coupon-input:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,98,0,.15);outline:none}
.coupon-apply{
  width:100%;height:50px;background:var(--orange);
  color:var(--white);font-family:'Barlow Condensed',sans-serif;
  font-size:17px;font-weight:800;border-radius:12px;
  transition:background .15s;
}
.coupon-apply:active{background:var(--orange-h)}
.coupon-footer{
  padding:16px;border-top:1px solid var(--border);
  display:flex;justify-content:center;
}
.coupon-continue{
  padding:12px 32px;background:var(--orange);
  color:var(--white);font-family:'Barlow Condensed',sans-serif;
  font-size:16px;font-weight:800;border-radius:999px;
}

/* ═══════════════════════════════════════════
   SITE FOOTER
═══════════════════════════════════════════ */
.footer-social-bar{background:var(--orange);padding:16px 14px}
.footer-social-inner{display:flex;flex-direction:column;align-items:center;gap:12px}
.footer-social-text{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:600;color:var(--white)}
.footer-social-icons{display:flex;gap:12px}
.footer-social-icon{width:36px;height:36px;border-radius:50%;border:2px solid var(--white);display:flex;align-items:center;justify-content:center;color:var(--white);transition:all .2s}
.footer-social-icon:active{background:var(--white);color:var(--orange)}
.site-footer{background:var(--bg);padding:0 0 24px}
.footer-grid{display:none!important}
.footer-accordion{display:block!important}
.footer-acc-item{border-bottom:1px solid var(--border)}
.footer-acc-header{display:flex;align-items:center;justify-content:space-between;padding:16px 14px;cursor:pointer}
.footer-acc-title{font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:700;color:var(--white)}
.footer-acc-arrow{width:32px;height:32px;border-radius:50%;border:1.5px solid var(--orange);display:flex;align-items:center;justify-content:center;color:var(--orange);transition:transform .2s}
.footer-acc-item.open .footer-acc-arrow{transform:rotate(180deg)}
.footer-acc-content{display:none;padding:0 14px 16px}
.footer-acc-item.open .footer-acc-content{display:block}
.footer-link{display:block;font-size:14px;color:var(--t2);padding:8px 0;transition:color .15s}
.footer-link:active{color:var(--orange)}
.footer-bottom{padding:24px 14px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.footer-logo-img{height:36px;margin-bottom:2px}
.footer-copyright{font-size:12px;color:var(--t1)}

/* ═══════════════════════════════════════════
   TOAST PREMIUM — above bottom nav
═══════════════════════════════════════════ */
.toast{
  position:fixed;bottom:calc(var(--BOT) + var(--safe-b) + 12px);
  left:50%;transform:translateX(-50%) translateY(20px) scale(.95);
  z-index:800;
  background:rgba(10,14,20,.88);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,.08);
  color:var(--t1);
  padding:12px 18px 12px 14px;
  border-radius:16px;
  display:flex;align-items:center;gap:10px;
  min-width:260px;max-width:calc(100vw - 32px);
  box-shadow:
    0 16px 32px rgba(0,0,0,.5),
    0 0 0 1px rgba(255,255,255,.04) inset;
  opacity:0;pointer-events:none;
  transition:all .42s cubic-bezier(.34,1.56,.64,1);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
.toast-ico{
  width:32px;height:32px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;color:var(--white);
  background:linear-gradient(135deg,#FF6200 0%,#F5B544 100%);
  box-shadow:0 4px 12px rgba(255,98,0,.35),0 2px 4px rgba(0,0,0,.2),0 1px 0 rgba(255,255,255,.1) inset;
}
.toast.success .toast-ico{background:linear-gradient(135deg,#F5B544 0%,#FF6200 100%)}
.toast.warning .toast-ico{background:linear-gradient(135deg,#FF6200 0%,#e55800 100%)}
.toast-body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.toast-title{font-size:13px;font-weight:700;color:var(--t1);line-height:1.3;white-space:normal}
.toast-desc{font-size:11px;color:rgba(255,255,255,.55);line-height:1.35;white-space:normal}
.toast-desc:empty{display:none}

/* ═══════════════════════════════════════════
   CLOSED BANNER (inline, not blocking)
═══════════════════════════════════════════ */
.closed-banner{
  background:rgba(30,20,0,.9);border:1px solid rgba(255,98,0,.3);
  border-radius:12px;margin:12px 14px 0;
  padding:11px 14px;
  display:flex;align-items:center;gap:10px;
  font-size:13px;color:#ffb380;font-weight:600;
}
.closed-banner svg{flex-shrink:0}
.closed-banner span{flex:1;line-height:1.4}

/* MISC */
.divider{height:8px;background:rgba(0,0,0,.3);margin:0}

/* ─── INPUT ERROR STATE ─── */
.input-error{border-color:var(--red)!important;box-shadow:0 0 0 3px rgba(239,68,68,.12)!important}
.input-error::placeholder{color:rgba(239,68,68,.5)}

}