/* ============================================================================
   Bodegón SuperYhon — Sistema de diseño
   Marca: navy carbón + coral + naranja. Tipografía redondeada (Baloo 2).
   ============================================================================ */

:root{
  /* Paleta de marca (extraída del logo) */
  --navy:#26313d;
  --navy-deep:#14283e;
  --navy-800:#1d2836;
  --navy-700:#2b3846;
  --coral:#ef4e3a;
  --coral-dark:#d33a27;
  --orange:#f5972e;
  --orange-dark:#e07d12;
  --cream:#fff8f0;

  --bg:#ffffff;
  --surface:#ffffff;
  --surface-2:#f8fafc;
  --text:#26313d;
  --muted:#69747f;
  --line:#e6eaef;
  --success:#25a25a;
  --success-bg:#e7f7ee;
  --danger:#e23b3b;

  --shadow-sm:0 1px 2px rgba(20,40,62,.06), 0 1px 3px rgba(20,40,62,.08);
  --shadow-md:0 6px 16px rgba(20,40,62,.10);
  --shadow-lg:0 18px 44px rgba(20,40,62,.18);
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:24px;

  --font-display:"Baloo 2","Nunito",system-ui,sans-serif;
  --font-body:"Inter","Nunito Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;

  --header-h:120px;
  --maxw:1240px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:15.5px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit}
input,select,textarea{font-family:inherit; font-size:1rem}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:800; line-height:1.1; margin:0}
.container{max-width:var(--maxw); margin:0 auto; padding:0 18px}
.hide{display:none !important}
.spin{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Barra utilitaria superior ---------- */
.topbar{background:var(--navy-deep); color:#cdd6e0; font-size:12.5px}
.topbar .container{display:flex; align-items:center; justify-content:space-between; gap:12px; height:34px}
.topbar .tb-left{display:flex; align-items:center; gap:14px; overflow:hidden; white-space:nowrap}
.topbar a{color:#cdd6e0; display:inline-flex; align-items:center; gap:5px}
.topbar a:hover{color:#fff}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--success);box-shadow:0 0 0 3px rgba(37,162,90,.25);display:inline-block}
.status-dot.closed{background:#e2683b;box-shadow:0 0 0 3px rgba(226,104,59,.25)}
.tb-socials{display:flex; gap:10px; align-items:center}
.tb-socials svg{width:15px;height:15px;fill:currentColor}

/* ---------- Header ---------- */
.header{position:sticky; top:0; z-index:60; background:var(--surface); border-bottom:1px solid var(--line); box-shadow:var(--shadow-sm)}
.header .container{display:flex; align-items:center; gap:18px; padding-top:12px; padding-bottom:12px}
.brand{display:flex; align-items:center; gap:10px; flex:0 0 auto}
.brand img{height:46px; width:auto}
.search{flex:1 1 auto; position:relative; max-width:560px}
.search input{width:100%; height:46px; border:2px solid var(--line); border-radius:999px; padding:0 46px 0 44px; background:var(--surface-2); transition:border-color .15s, background .15s}
.search input:focus{outline:none; border-color:var(--orange); background:#fff}
.search .s-icon{position:absolute; left:15px; top:50%; transform:translateY(-50%); color:var(--muted); width:20px;height:20px}
.search .s-clear{position:absolute; right:10px; top:50%; transform:translateY(-50%); color:var(--muted); font-size:20px; width:28px;height:28px;border-radius:50%}
.search .s-clear:hover{background:var(--line)}
.header-actions{display:flex; align-items:center; gap:10px; flex:0 0 auto}

/* Toggle moneda */
.cur-toggle{display:flex; background:var(--surface-2); border:2px solid var(--line); border-radius:999px; padding:3px; position:relative}
.cur-toggle button{padding:7px 14px; border-radius:999px; font-weight:800; font-family:var(--font-display); font-size:14px; color:var(--muted); z-index:1; transition:color .2s}
.cur-toggle button.active{color:#fff}
.cur-toggle .slider{position:absolute; top:3px; bottom:3px; width:calc(50% - 3px); background:linear-gradient(135deg,var(--orange),var(--coral)); border-radius:999px; transition:transform .22s cubic-bezier(.4,1.3,.5,1)}
.cur-toggle.ves .slider{transform:translateX(100%)}

/* Botón carrito */
.cart-btn{position:relative; display:flex; align-items:center; gap:8px; background:var(--navy); color:#fff; padding:11px 16px; border-radius:999px; font-weight:800; font-family:var(--font-display); transition:transform .12s, background .2s}
.cart-btn:hover{background:var(--navy-800); transform:translateY(-1px)}
.cart-btn svg{width:20px;height:20px;fill:#fff}
.cart-count{position:absolute; top:-6px; right:-6px; background:var(--coral); color:#fff; font-size:12px; min-width:20px; height:20px; border-radius:999px; display:flex; align-items:center; justify-content:center; padding:0 5px; font-family:var(--font-body); font-weight:700; border:2px solid #fff}
.icon-btn{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--surface-2);border:2px solid var(--line)}
.icon-btn:hover{border-color:var(--orange)}
.icon-btn svg{width:20px;height:20px}

/* ---------- Hero ---------- */
.hero{background:linear-gradient(135deg,var(--navy-deep),#0f2136); color:#fff; position:relative; overflow:hidden}
.hero::after{content:""; position:absolute; right:-80px; top:-60px; width:420px; height:420px; background:radial-gradient(circle,rgba(245,151,46,.18),transparent 60%); pointer-events:none}
.hero .container{position:relative; padding:34px 18px; display:flex; align-items:center; justify-content:space-between; gap:24px}
.hero-text h1{font-size:clamp(26px,4.4vw,44px); letter-spacing:-.5px}
.hero-text h1 .hl{color:var(--orange)}
.hero-text p{color:#c6d1dd; margin:10px 0 18px; font-size:16px; max-width:520px}
.hero-badges{display:flex; gap:10px; flex-wrap:wrap}
.hbadge{display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); padding:9px 14px; border-radius:999px; font-size:13.5px; font-weight:600}
.hbadge svg{width:17px;height:17px;fill:var(--orange)}
.hero-rate{background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); border-radius:var(--radius); padding:16px 20px; min-width:210px; text-align:center; backdrop-filter:blur(4px)}
.hero-rate .lbl{font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:#9fb0c1}
.hero-rate .val{font-family:var(--font-display); font-weight:800; font-size:30px; color:#fff; margin:4px 0}
.hero-rate .sub{font-size:11.5px; color:#9fb0c1}

/* ---------- Categorías (chips) ---------- */
.cats{position:sticky; top:var(--header-h); z-index:40; background:var(--bg); border-bottom:1px solid var(--line)}
.cats .scroller{display:flex; gap:9px; overflow-x:auto; padding:12px 0; scrollbar-width:none}
.cats .scroller::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; padding:9px 15px; background:var(--surface); border:2px solid var(--line); border-radius:999px; font-weight:700; font-size:13.5px; color:var(--navy); white-space:nowrap; transition:all .14s}
.chip:hover{border-color:var(--orange); transform:translateY(-1px)}
.chip.active{background:var(--navy); color:#fff; border-color:var(--navy)}
.chip .c-emoji{font-size:16px; line-height:1}
.chip .c-count{font-size:11px; opacity:.6; font-family:var(--font-body); font-weight:600}

/* ---------- Toolbar de resultados ---------- */
.toolbar{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:20px 0 8px; flex-wrap:wrap}
.toolbar h2{font-size:22px}
.toolbar .rcount{color:var(--muted); font-weight:600; font-size:13.5px}
.toolbar-right{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.switch{display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--navy); cursor:pointer}
.switch input{display:none}
.switch .track{width:40px;height:23px;background:var(--line);border-radius:999px;position:relative;transition:background .2s}
.switch .track::after{content:"";position:absolute;top:2px;left:2px;width:19px;height:19px;background:#fff;border-radius:50%;box-shadow:var(--shadow-sm);transition:transform .2s}
.switch input:checked + .track{background:var(--success)}
.switch input:checked + .track::after{transform:translateX(17px)}
.sort-sel{height:40px;border:2px solid var(--line);border-radius:10px;padding:0 10px;background:var(--surface);font-weight:600;color:var(--navy)}

/* ---------- Grid de productos ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:16px; padding:14px 0 40px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; transition:transform .14s, box-shadow .14s, border-color .14s; position:relative}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:#dfe5ec}
.card.out{opacity:.72}
.card-media{aspect-ratio:1/1; background:var(--surface-2); position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden}
.card-media img{width:100%; height:100%; object-fit:cover}
.card-ph{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#fff;text-align:center;padding:10px}
.card-ph .emoji{font-size:44px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.15))}
.card-ph .cat-icon{width:54px;height:54px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.18))}
.cat-icon{width:24px;height:24px;flex:0 0 auto}
.ci-media .cat-icon{width:30px;height:30px}
.mp-ph .cat-icon{width:22px;height:22px}
.card-ph .nm{margin-top:2px}
.card-ph .nm{font-family:var(--font-display);font-weight:700;font-size:13px;line-height:1.15;opacity:.95;text-shadow:0 1px 3px rgba(0,0,0,.25)}
.badge{position:absolute; top:10px; left:10px; font-size:11px; font-weight:800; font-family:var(--font-display); padding:4px 9px; border-radius:999px; color:#fff; letter-spacing:.02em}
.badge.stock{background:var(--success)}
.badge.low{background:var(--orange)}
.badge.out{background:#8a97a3}
.badge.offer{left:auto; right:10px; background:var(--coral); box-shadow:0 2px 8px rgba(239,78,58,.4)}
.card-body{padding:12px 13px 14px; display:flex; flex-direction:column; gap:6px; flex:1}
.card-cat{font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.04em}
.card-meta{display:flex; align-items:center; justify-content:space-between; gap:6px}
.card-code{flex:0 0 auto; font-size:10.5px; font-weight:700; color:var(--muted); background:var(--surface-2); border:1px solid var(--line); padding:1px 7px; border-radius:6px; font-variant-numeric:tabular-nums}
.card-name{font-family:var(--font-display); font-weight:700; font-size:15px; line-height:1.2; color:var(--navy); min-height:36px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.card-price{display:flex; align-items:baseline; gap:7px; margin-top:2px}
.price-main{font-family:var(--font-display); font-weight:800; font-size:20px; color:var(--navy)}
.price-main.on-offer{color:var(--coral); font-size:22px}
.price-alt{font-size:12.5px; color:var(--muted); font-weight:600}
.price-old{font-size:13px; color:var(--muted); font-weight:600; text-decoration:line-through}
.card-add{margin-top:auto; display:flex; align-items:center; justify-content:center; gap:5px; height:24px; border-radius:8px; background:linear-gradient(135deg,var(--orange),var(--coral)); color:#fff; font-weight:800; font-family:var(--font-display); font-size:12px; transition:filter .15s, transform .1s}
.card-add:hover{filter:brightness(1.05)}
.card-add:active{transform:scale(.98)}
.card-add:disabled{background:#c7ced6; cursor:not-allowed}
.card-add svg{width:13px;height:13px;fill:#fff}
.qty-inline{margin-top:auto; display:flex; align-items:center; justify-content:space-between; height:24px; border-radius:8px; background:var(--navy); color:#fff; padding:0 5px}
.qty-inline button{width:22px;height:22px;border-radius:6px;font-size:16px;font-weight:700;color:#fff;display:flex;align-items:center;justify-content:center}
.qty-inline button:hover{background:rgba(255,255,255,.14)}
.qty-inline .q{font-family:var(--font-display);font-weight:800;font-size:13px}

/* Placeholder colores por categoría */
.ph-candy{background:linear-gradient(135deg,#ff7aa2,#ff4d79)} .ph-drink{background:linear-gradient(135deg,#3aa8ef,#2b7fd4)}
.ph-care{background:linear-gradient(135deg,#59c6c9,#2f9fa6)} .ph-grocery{background:linear-gradient(135deg,#f5a742,#e07d12)}
.ph-food{background:linear-gradient(135deg,#f57a42,#e0491e)} .ph-beauty{background:linear-gradient(135deg,#c471ed,#a24fd0)}
.ph-deli{background:linear-gradient(135deg,#f2b134,#d98e0f)} .ph-ice{background:linear-gradient(135deg,#7ec8f0,#4aa3e0)}
.ph-sauce{background:linear-gradient(135deg,#f0644a,#d33a27)} .ph-paper{background:linear-gradient(135deg,#5b8def,#3b6fd4)}
.ph-clean{background:linear-gradient(135deg,#37c8e0,#1fa0c4)} .ph-spice{background:linear-gradient(135deg,#e0913a,#c06f13)}
.ph-party{background:linear-gradient(135deg,#ff6fae,#ff4d94)} .ph-bakery{background:linear-gradient(135deg,#e0a24a,#c07d1e)}
.ph-pharma{background:linear-gradient(135deg,#4ac97e,#25a25a)} .ph-plastic{background:linear-gradient(135deg,#7d8da0,#5c6b80)}
.ph-tobacco{background:linear-gradient(135deg,#6b7683,#49525c)} .ph-canned{background:linear-gradient(135deg,#e08a3a,#c06713)}
.ph-meat{background:linear-gradient(135deg,#ef5b6b,#d33a4c)} .ph-fireworks{background:linear-gradient(135deg,#8a5cf0,#6a3ad0)}
.ph-grain{background:linear-gradient(135deg,#d6a94a,#b8861f)} .ph-liquor{background:linear-gradient(135deg,#c9a13a,#a67d12)}
.ph-veggie{background:linear-gradient(135deg,#5cc46a,#2fa04a)} .ph-pet{background:linear-gradient(135deg,#8a6fef,#6a4dd0)}
.ph-other{background:linear-gradient(135deg,#7d8da0,#5c6b80)}

/* ---------- Botón + Vista "Comprar por departamento" ---------- */
.btn-dept{display:inline-flex; align-items:center; gap:10px; background:#fff; color:var(--navy); font-family:var(--font-display); font-weight:800; font-size:15px; padding:13px 22px; border-radius:13px; box-shadow:var(--shadow-md); transition:transform .12s, filter .15s; margin-top:18px}
.btn-dept:hover{transform:translateY(-2px); filter:brightness(1.02)}
.btn-dept svg{width:20px; height:20px; fill:var(--coral)}
.dept-head{padding:24px 0 2px}
.dept-head h2{font-size:26px}
.dept-head p{color:var(--muted); margin:5px 0 0; font-size:14.5px}
.dept-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; padding:18px 0 46px}
.dept-card{background:var(--surface); border:1px solid var(--line); border-radius:18px; overflow:hidden; cursor:pointer; transition:transform .14s, box-shadow .14s, border-color .14s; display:flex; flex-direction:column}
.dept-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:#dfe5ec}
.dept-banner{display:flex; align-items:center; gap:12px; padding:16px; color:#fff; min-height:80px}
.dept-banner .cat-icon{width:38px; height:38px; flex:0 0 auto; filter:drop-shadow(0 2px 4px rgba(0,0,0,.22))}
.dept-banner .d-name{font-family:var(--font-display); font-weight:800; font-size:20px; line-height:1.05; text-shadow:0 1px 3px rgba(0,0,0,.18)}
.dept-banner .d-count{font-size:12.5px; font-weight:600; opacity:.95; margin-top:3px}
.dept-banner .d-arrow{margin-left:auto; font-size:24px; opacity:.85; font-weight:700}
.dept-thumbs{display:grid; grid-template-columns:repeat(3,1fr); gap:7px; padding:11px}
.dept-thumb{aspect-ratio:1/1; border-radius:11px; overflow:hidden; display:flex; align-items:center; justify-content:center; color:#fff}
.dept-thumb img{width:100%; height:100%; object-fit:cover}
.dept-thumb .cat-icon{width:32px; height:32px}
.dept-foot{margin-top:auto; padding:2px 15px 15px}
.dept-foot .ver{font-family:var(--font-display); font-weight:800; color:var(--coral); font-size:14px}
.back-btn{display:inline-flex; align-items:center; gap:8px; background:linear-gradient(135deg,var(--orange),var(--coral)); border:none; border-radius:11px; padding:10px 16px; font-family:var(--font-display); font-weight:800; font-size:14px; color:#fff; margin-bottom:8px; box-shadow:var(--shadow-sm); transition:filter .15s, transform .1s}
.back-btn:hover{filter:brightness(1.05); transform:translateY(-1px); color:#fff}
.back-btn svg{width:17px; height:17px; fill:#fff}

/* ---------- Banner principal (destacados: 2 x departamento) ---------- */
.home-banner{background:linear-gradient(135deg,var(--navy-deep),#0f2136); border-radius:18px; padding:18px 0 20px; margin:18px 0 8px; overflow:hidden; position:relative}
.home-banner::after{content:""; position:absolute; right:-70px; top:-50px; width:320px; height:320px; background:radial-gradient(circle,rgba(245,151,46,.15),transparent 60%); pointer-events:none}
.hb-title{color:#fff; font-family:var(--font-display); font-weight:800; font-size:21px; padding:0 18px 14px; display:flex; align-items:center; gap:11px; flex-wrap:wrap}
.hb-title .tag{background:linear-gradient(135deg,var(--orange),var(--coral)); color:#fff; font-size:11.5px; padding:4px 11px; border-radius:999px; letter-spacing:.02em}
.hb-title .sub{font-family:var(--font-body); font-weight:600; font-size:13px; color:#9fb0c1}
.marquee-wrap{display:flex; flex-direction:column; gap:12px}
.marquee{display:flex; gap:12px; width:max-content; padding:0 6px; animation:marq 70s linear infinite; will-change:transform}
.marquee.rev{animation-direction:reverse; animation-duration:88s}
.home-banner:hover .marquee{animation-play-state:paused}
@keyframes marq{from{transform:translateX(0)} to{transform:translateX(-50%)}}
.mq-item{position:relative; flex:0 0 auto; width:152px; background:#fff; border-radius:13px; overflow:hidden; cursor:pointer; box-shadow:var(--shadow-sm); transition:transform .12s, box-shadow .12s}
.mq-offer{position:absolute; top:6px; left:6px; z-index:1; background:var(--coral); color:#fff; font-family:var(--font-display); font-weight:800; font-size:9px; padding:2px 7px; border-radius:999px; letter-spacing:.02em}
.mq-old{font-size:11px; color:var(--muted); font-weight:600; text-decoration:line-through}
.mq-item:hover{transform:translateY(-3px); box-shadow:var(--shadow-md)}
.mq-media{aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; color:#fff}
.mq-media img{width:100%; height:100%; object-fit:cover}
.mq-media .cat-icon{width:44px; height:44px}
.mq-info{padding:8px 10px 10px}
.mq-name{font-size:11.5px; font-weight:700; color:var(--navy); line-height:1.18; height:28px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
.mq-dept{font-size:10px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; margin-top:3px}
.mq-price{font-family:var(--font-display); font-weight:800; color:var(--coral); font-size:14.5px; margin-top:1px}
@media (max-width:560px){
  .mq-item{width:132px}
  .hb-title{font-size:18px; padding:0 14px 12px}
}
@media (prefers-reduced-motion:reduce){
  .marquee{animation:none; overflow-x:auto; width:100%}
  .marquee-wrap{gap:10px}
}
@media (max-width:560px){
  .dept-grid{grid-template-columns:1fr; gap:13px}
  .dept-head h2{font-size:22px}
  .btn-dept{width:100%; justify-content:center}
}

/* ---------- Drawer (carrito) ---------- */
.overlay{position:fixed; inset:0; background:rgba(20,40,62,.5); z-index:70; opacity:0; pointer-events:none; transition:opacity .2s; backdrop-filter:blur(2px)}
.overlay.show{opacity:1; pointer-events:auto}
.drawer{position:fixed; top:0; right:0; height:100%; width:min(420px,100%); background:var(--bg); z-index:80; transform:translateX(100%); transition:transform .28s cubic-bezier(.4,1,.4,1); display:flex; flex-direction:column; box-shadow:var(--shadow-lg)}
.drawer.show{transform:translateX(0)}
.drawer-head{display:flex; align-items:center; justify-content:space-between; padding:18px; background:var(--navy); color:#fff}
.drawer-head h3{font-size:19px; display:flex; align-items:center; gap:9px}
.drawer-head .close{width:38px;height:38px;border-radius:50%;color:#fff;font-size:22px;display:flex;align-items:center;justify-content:center}
.drawer-head .close:hover{background:rgba(255,255,255,.14)}
.drawer-body{flex:1; overflow-y:auto; padding:14px}
.drawer-foot{border-top:1px solid var(--line); background:var(--surface); padding:16px 18px 20px}
.cart-item{display:flex; gap:12px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); padding:10px; margin-bottom:10px}
.cart-item .ci-media{width:58px;height:58px;border-radius:9px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-size:26px;color:#fff;overflow:hidden}
.cart-item .ci-media img{width:100%;height:100%;object-fit:cover}
.ci-main{flex:1; min-width:0}
.ci-name{font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--navy); line-height:1.2}
.ci-price{font-size:12.5px; color:var(--muted); margin-top:2px}
.ci-controls{display:flex; align-items:center; justify-content:space-between; margin-top:8px}
.ci-qty{display:flex; align-items:center; gap:0; border:1.5px solid var(--line); border-radius:9px; overflow:hidden}
.ci-qty button{width:30px;height:30px;font-size:18px;font-weight:700;color:var(--navy)}
.ci-qty button:hover{background:var(--surface-2)}
.ci-qty .q{width:34px;text-align:center;font-weight:800;font-family:var(--font-display)}
.ci-sub{font-family:var(--font-display); font-weight:800; color:var(--navy)}
.ci-remove{color:var(--muted); font-size:12px; font-weight:600; display:inline-flex; align-items:center; gap:4px}
.ci-remove:hover{color:var(--danger)}
.cart-empty{text-align:center; color:var(--muted); padding:50px 20px}
.cart-empty .big{font-size:56px; margin-bottom:8px}
.totals-row{display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; font-size:14px; color:var(--muted)}
.totals-row.grand{margin-top:8px; padding-top:12px; border-top:1px dashed var(--line); font-size:16px; color:var(--navy)}
.totals-row.grand .amt{font-family:var(--font-display); font-weight:800; font-size:24px}
.totals-alt{font-size:13px; color:var(--muted); text-align:right; margin-top:-2px}
.btn{display:flex; align-items:center; justify-content:center; gap:9px; width:100%; height:52px; border-radius:13px; font-family:var(--font-display); font-weight:800; font-size:16px; transition:transform .1s, filter .15s}
.btn:active{transform:scale(.99)}
.btn-primary{background:linear-gradient(135deg,var(--orange),var(--coral)); color:#fff}
.btn-primary:hover{filter:brightness(1.05)}
.btn-wa{background:#25d366; color:#fff}
.btn-wa:hover{filter:brightness(1.04)}
.btn-wa svg{width:22px;height:22px;fill:#fff}
.btn-ghost{background:var(--surface-2); color:var(--navy); border:2px solid var(--line)}
.btn-ghost:hover{border-color:var(--orange)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-800)}

/* ---------- Modales ---------- */
.modal{position:fixed; inset:0; z-index:90; display:flex; align-items:flex-end; justify-content:center; opacity:0; pointer-events:none; transition:opacity .2s}
.modal.show{opacity:1; pointer-events:auto}
.modal-card{background:var(--bg); width:min(560px,100%); max-height:92vh; overflow-y:auto; border-radius:22px 22px 0 0; box-shadow:var(--shadow-lg); transform:translateY(30px); transition:transform .26s cubic-bezier(.4,1,.4,1)}
.modal.show .modal-card{transform:translateY(0)}
.modal-head{position:sticky; top:0; background:var(--navy); color:#fff; padding:18px 20px; display:flex; align-items:center; justify-content:space-between; border-radius:22px 22px 0 0; z-index:2}
.modal-head h3{font-size:19px}
.modal-head .close{width:36px;height:36px;border-radius:50%;color:#fff;font-size:22px;display:flex;align-items:center;justify-content:center}
.modal-head .close:hover{background:rgba(255,255,255,.14)}
.modal-body{padding:20px}
.field{margin-bottom:15px}
.field label{display:block; font-weight:700; font-size:13.5px; color:var(--navy); margin-bottom:6px}
.field .req{color:var(--coral)}
.field input,.field textarea,.field select{width:100%; height:48px; border:2px solid var(--line); border-radius:11px; padding:0 14px; background:var(--surface); transition:border-color .15s}
.field textarea{height:auto; padding:12px 14px; resize:vertical; min-height:70px}
.field input:focus,.field textarea:focus,.field select:focus{outline:none; border-color:var(--orange)}
.field .hint{font-size:12px; color:var(--muted); margin-top:5px}
.pay-methods{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.pay-opt{border:2px solid var(--line); border-radius:13px; padding:13px; cursor:pointer; transition:all .14s; background:var(--surface); display:flex; gap:10px; align-items:flex-start}
.pay-opt:hover{border-color:var(--orange)}
.pay-opt.sel{border-color:var(--coral); background:#fff5f3; box-shadow:0 0 0 3px rgba(239,78,58,.1)}
.pay-opt .pi{font-size:24px;line-height:1}
.pay-opt .pt{font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--navy)}
.pay-opt .pd{font-size:12px; color:var(--muted); margin-top:2px}
.pay-detail{background:var(--surface); border:1px dashed var(--orange); border-radius:12px; padding:14px; margin-top:12px}
.pay-detail .row{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 0; border-bottom:1px solid var(--line)}
.pay-detail .row:last-child{border-bottom:none}
.pay-detail .k{font-size:12.5px; color:var(--muted)}
.pay-detail .v{font-family:var(--font-display); font-weight:700; color:var(--navy); display:flex; align-items:center; gap:8px}
.copy-btn{font-size:11px; font-weight:700; color:var(--coral); border:1.5px solid var(--coral); padding:3px 8px; border-radius:7px}
.copy-btn:hover{background:var(--coral); color:#fff}
.seg{display:flex; gap:8px; margin-bottom:6px}
.seg button{flex:1; height:46px; border:2px solid var(--line); border-radius:11px; font-weight:700; color:var(--navy); background:var(--surface); display:flex; align-items:center; justify-content:center; gap:7px}
.seg button.sel{border-color:var(--coral); background:#fff5f3; color:var(--coral)}
.order-summary{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:14px; margin-bottom:16px}
.order-summary .l{display:flex; justify-content:space-between; font-size:13.5px; padding:3px 0; color:var(--muted)}
.order-summary .l.big{font-family:var(--font-display); font-weight:800; font-size:17px; color:var(--navy); border-top:1px dashed var(--line); margin-top:6px; padding-top:9px}

/* ---------- Cuenta / Registro ---------- */
.auth-btn{display:inline-flex; align-items:center; gap:7px; background:var(--surface-2); border:2px solid var(--line); border-radius:999px; padding:9px 15px; font-weight:800; font-family:var(--font-display); font-size:14px; color:var(--navy); max-width:180px; overflow:hidden; white-space:nowrap}
.auth-btn:hover{border-color:var(--orange)}
.auth-btn svg{width:19px; height:19px; fill:var(--navy); flex:0 0 auto}
.auth-btn.logged{background:var(--navy); color:#fff; border-color:var(--navy)}
.auth-btn.logged svg{fill:#fff}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.gender-opts{display:flex; gap:8px}
.gender-opts label{flex:1; display:flex; align-items:center; justify-content:center; gap:6px; height:46px; border:2px solid var(--line); border-radius:11px; font-weight:700; font-size:13.5px; color:var(--navy); cursor:pointer; background:var(--surface)}
.gender-opts input{display:none}
.gender-opts label.sel{border-color:var(--coral); background:#fff5f3; color:var(--coral)}
.auth-switch{text-align:center; font-size:13.5px; color:var(--muted); margin-top:14px}
.auth-switch a{color:var(--coral); font-weight:700; cursor:pointer}
.auth-note{font-size:11.5px; color:var(--muted); text-align:center; margin-top:14px; line-height:1.5; background:var(--surface-2); border:1px dashed var(--line); border-radius:10px; padding:10px}
.err-msg{background:#fdecea; color:#c0392b; border:1px solid #f5c6cb; border-radius:9px; padding:9px 12px; font-size:13px; font-weight:600; margin-bottom:14px}
.pw-wrap{position:relative}
.pw-toggle{position:absolute; right:10px; top:50%; transform:translateY(-50%); font-size:12px; color:var(--coral); font-weight:800; background:none; padding:4px 6px}
.acct-head{display:flex; align-items:center; gap:13px; margin-bottom:18px}
.acct-avatar{width:54px; height:54px; border-radius:50%; background:linear-gradient(135deg,var(--orange),var(--coral)); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:800; font-size:23px; flex:0 0 auto}
.acct-name{font-family:var(--font-display); font-weight:800; font-size:19px; color:var(--navy)}
.acct-mail{font-size:13px; color:var(--muted)}
.acct-tabs{display:flex; gap:8px; margin-bottom:16px}
.acct-tabs button{flex:1; height:44px; border-radius:11px; border:2px solid var(--line); background:var(--surface); font-weight:700; color:var(--navy); font-size:13.5px}
.acct-tabs button.sel{border-color:var(--coral); background:#fff5f3; color:var(--coral)}
.acct-data .row{display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); font-size:14px}
.acct-data .row .k{color:var(--muted); flex:0 0 auto}
.acct-data .row .v{font-weight:600; color:var(--navy); text-align:right; word-break:break-word}
.order-card{border:1px solid var(--line); border-radius:12px; padding:13px; margin-bottom:11px; background:var(--surface)}
.order-card .oc-top{display:flex; justify-content:space-between; align-items:center; font-size:12.5px; color:var(--muted); margin-bottom:7px}
.order-card .oc-total{font-family:var(--font-display); font-weight:800; color:var(--navy); font-size:16px}
.order-card .oc-items{font-size:13px; color:var(--navy); line-height:1.5}
.order-card .oc-badge{font-size:11px; font-weight:800; padding:2px 8px; border-radius:999px; background:var(--success-bg); color:var(--success)}
.acct-empty{text-align:center; color:var(--muted); padding:34px 12px}
.acct-empty .big{font-size:46px; margin-bottom:6px}
@media (max-width:520px){ .field-row{grid-template-columns:1fr} .auth-btn span{display:none} .auth-btn{padding:11px} }

/* ---------- Floating buttons ---------- */
.fabs{position:fixed; right:18px; bottom:18px; z-index:55; display:flex; flex-direction:column; gap:12px; align-items:flex-end}
.fab{width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-lg); transition:transform .14s; position:relative}
.fab:hover{transform:scale(1.07)}
.fab svg{width:28px;height:28px}
.fab-wa{background:#25d366}
.fab-wa svg{fill:#fff}
.fab-ai{background:linear-gradient(135deg,var(--orange),var(--coral))}
.fab-ai svg{fill:#fff}
.fab-label{position:absolute; right:70px; top:50%; transform:translateY(-50%); background:var(--navy); color:#fff; padding:7px 12px; border-radius:9px; font-size:13px; font-weight:600; white-space:nowrap; box-shadow:var(--shadow-md); opacity:0; pointer-events:none; transition:opacity .15s}
.fab:hover .fab-label{opacity:1}
.fab-ping{position:absolute; top:-2px; right:-2px; width:16px;height:16px;background:var(--coral);border:2px solid #fff;border-radius:50%}

/* ---------- Chat IA ---------- */
.chat{position:fixed; right:18px; bottom:18px; z-index:85; width:min(390px,calc(100vw - 24px)); height:min(600px,calc(100vh - 40px)); background:var(--bg); border-radius:20px; box-shadow:var(--shadow-lg); display:flex; flex-direction:column; overflow:hidden; transform:translateY(20px) scale(.98); opacity:0; pointer-events:none; transition:transform .22s, opacity .22s}
.chat.show{transform:translateY(0) scale(1); opacity:1; pointer-events:auto}
.chat-head{background:linear-gradient(135deg,var(--navy-deep),var(--navy)); color:#fff; padding:14px 16px; display:flex; align-items:center; gap:11px}
.chat-avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--orange),var(--coral));display:flex;align-items:center;justify-content:center;font-size:22px;flex:0 0 auto}
.chat-head .ch-name{font-family:var(--font-display); font-weight:800; font-size:16px}
.chat-head .ch-status{font-size:12px; color:#a9d9b9; display:flex; align-items:center; gap:5px}
.chat-head .ch-status .dot{width:7px;height:7px;border-radius:50%;background:#4ade80}
.chat-head .close{margin-left:auto; width:34px;height:34px;border-radius:50%;color:#fff;font-size:20px;display:flex;align-items:center;justify-content:center}
.chat-head .close:hover{background:rgba(255,255,255,.14)}
.chat-body{flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px; background:var(--surface-2)}
.msg{max-width:82%; padding:10px 13px; border-radius:15px; font-size:14px; line-height:1.4; white-space:pre-wrap; word-wrap:break-word}
.msg.bot{background:var(--surface); border:1px solid var(--line); border-bottom-left-radius:4px; align-self:flex-start; box-shadow:var(--shadow-sm)}
.msg.user{background:linear-gradient(135deg,var(--orange),var(--coral)); color:#fff; border-bottom-right-radius:4px; align-self:flex-end}
.msg .m-prod{display:flex; gap:10px; align-items:center; margin-top:8px; padding:8px; background:var(--surface-2); border-radius:10px; border:1px solid var(--line)}
.msg .m-prod .mp-ph{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;flex:0 0 auto}
.msg .m-prod .mp-name{font-weight:700;font-size:13px;color:var(--navy);line-height:1.15}
.msg .m-prod .mp-price{font-size:12.5px;color:var(--coral);font-weight:700}
.msg .m-prod button{margin-left:auto;background:var(--navy);color:#fff;font-size:11px;font-weight:700;padding:6px 10px;border-radius:8px;white-space:nowrap}
.chat-typing{display:flex; gap:4px; padding:12px 14px; align-self:flex-start; background:var(--surface); border:1px solid var(--line); border-radius:15px; border-bottom-left-radius:4px}
.chat-typing span{width:7px;height:7px;background:var(--muted);border-radius:50%;animation:blink 1.2s infinite}
.chat-typing span:nth-child(2){animation-delay:.2s} .chat-typing span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.chat-quick{display:flex; gap:7px; padding:8px 12px; overflow-x:auto; background:var(--surface-2); border-top:1px solid var(--line); scrollbar-width:none}
.chat-quick::-webkit-scrollbar{display:none}
.chat-quick button{flex:0 0 auto; font-size:12.5px; font-weight:600; color:var(--navy); background:var(--surface); border:1.5px solid var(--line); padding:7px 12px; border-radius:999px; white-space:nowrap}
.chat-quick button:hover{border-color:var(--orange); color:var(--coral)}
.chat-input{display:flex; gap:8px; padding:12px; background:var(--surface); border-top:1px solid var(--line)}
.chat-input input{flex:1; height:44px; border:2px solid var(--line); border-radius:999px; padding:0 16px; background:var(--surface-2)}
.chat-input input:focus{outline:none;border-color:var(--orange);background:#fff}
.chat-input button{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--orange),var(--coral));display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.chat-input button svg{width:20px;height:20px;fill:#fff}

/* ---------- Footer ---------- */
.footer{background:var(--navy-deep); color:#c6d1dd; margin-top:20px}
.footer .container{padding:40px 18px 24px}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:32px}
.footer h4{color:#fff; font-size:16px; margin-bottom:14px}
.footer img.f-logo{height:52px; margin-bottom:14px}
.footer p{font-size:13.5px; line-height:1.6; color:#9fb0c1}
.footer ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px}
.footer ul a,.footer ul li{font-size:13.5px; color:#c6d1dd; display:flex; align-items:center; gap:8px}
.footer ul a:hover{color:var(--orange)}
.footer .soc{display:flex; gap:10px; margin-top:6px}
.footer .soc a{width:40px;height:40px;border-radius:11px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;transition:all .15s}
.footer .soc a:hover{background:var(--orange); transform:translateY(-2px)}
.footer .soc svg{width:19px;height:19px;fill:#fff}
.footer .pay-icons{display:flex; flex-wrap:wrap; gap:7px; margin-top:6px}
.footer .pay-icons span{font-size:11.5px; background:rgba(255,255,255,.08); padding:5px 10px; border-radius:7px; color:#c6d1dd}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1); margin-top:30px; padding-top:18px; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:12.5px; color:#8b9bab}
.footer-bottom a{color:#8b9bab} .footer-bottom a:hover{color:var(--orange)}

/* ---------- Toast ---------- */
.toasts{position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:100; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none}
.toast{background:var(--navy); color:#fff; padding:12px 18px; border-radius:12px; font-weight:600; font-size:14px; box-shadow:var(--shadow-lg); display:flex; align-items:center; gap:9px; animation:toastIn .25s; max-width:90vw}
.toast.success{background:var(--success)} .toast .ti{font-size:18px}
@keyframes toastIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/* ---------- Admin bar ---------- */
.admin-bar{position:fixed; bottom:0; left:0; right:0; z-index:95; background:var(--navy); color:#fff; padding:10px 16px; display:flex; align-items:center; gap:12px; box-shadow:0 -6px 20px rgba(0,0,0,.2); flex-wrap:wrap}
.admin-bar .ab-tag{background:var(--orange); color:#fff; font-family:var(--font-display); font-weight:800; padding:4px 10px; border-radius:7px; font-size:12px}
.admin-bar button{background:rgba(255,255,255,.12); color:#fff; padding:8px 13px; border-radius:9px; font-weight:700; font-size:13px}
.admin-bar button:hover{background:rgba(255,255,255,.22)}
.admin-bar .ab-info{font-size:12.5px; color:#a9b6c4}
.editable{outline:2px dashed transparent; transition:outline .15s; border-radius:4px}
body.admin-on .editable{outline-color:rgba(245,151,46,.6); cursor:text}
body.admin-on .editable:hover{outline-color:var(--orange); background:rgba(245,151,46,.06)}

/* ---------- Loader ---------- */
.loader{position:fixed; inset:0; background:var(--navy-deep); z-index:200; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; transition:opacity .4s}
.loader.done{opacity:0; pointer-events:none}
.loader img{height:70px; animation:pulse 1.4s ease-in-out infinite}
.loader .bar{width:180px;height:5px;background:rgba(255,255,255,.15);border-radius:999px;overflow:hidden}
.loader .bar i{display:block;height:100%;width:40%;background:linear-gradient(90deg,var(--orange),var(--coral));border-radius:999px;animation:load 1.1s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.06);opacity:.85}}
@keyframes load{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .footer-grid{grid-template-columns:1fr 1fr}
  .hero-rate{display:none}
}
@media (max-width:760px){
  :root{--header-h:104px}
  .topbar .tb-left .hide-sm{display:none}
  .header .container{flex-wrap:wrap; gap:10px}
  .brand{order:1} .header-actions{order:2; margin-left:auto} .search{order:3; flex-basis:100%; max-width:100%}
  .brand img{height:38px}
  .hero .container{flex-direction:column; align-items:flex-start; padding:24px 18px}
  .cur-toggle button{padding:7px 11px;font-size:13px}
  .cart-btn span.cart-text{display:none}
}
@media (max-width:560px){
  .grid{grid-template-columns:repeat(2,1fr); gap:11px}
  .card-name{font-size:13.5px;min-height:33px} .price-main{font-size:17px}
  .pay-methods{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .modal-card{border-radius:20px 20px 0 0}
  .card-add{font-size:11px;height:22px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important}
}