/* ============================================================
   SISTEMA DE DISEÑO — MasVisual · Base gastronómicos
   Neutro / white-label. TOKENS con nombres fijos; los VALORES
   se cambian por cliente. Compartido por landing y /pedidos.
   ============================================================ */
:root{
  --bg-0:#ffffff; --bg-1:#f6f5f3; --bg-2:#eeece8; --bg-3:#e4e1dc;
  --tx-1:#17181d; --tx-2:#585c64; --tx-3:#9a9ea7;
  --accent:#e0483d; --accent-2:#c13a30; --accent-ink:#ffffff;
  --line:#eae8e4; --line-2:#dcd9d3;
  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-xl:30px;
  --sh-1:0 1px 2px rgba(20,20,25,.06), 0 2px 8px rgba(20,20,25,.05);
  --sh-2:0 8px 30px rgba(20,20,25,.14);
  --f-display:"Bricolage Grotesque", system-ui, sans-serif;
  --f-body:"Inter", system-ui, sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--f-body); color:var(--tx-1); background:var(--bg-1);
  -webkit-font-smoothing:antialiased; line-height:1.45}
.app{max-width:1120px; margin:0 auto; background:var(--bg-0); min-height:100vh; position:relative}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit}
a{color:inherit; text-decoration:none}
h1,h2,h3{font-family:var(--f-display); margin:0; letter-spacing:-.01em}
.oculto{display:none!important}
svg{display:block}

/* ---------- Topbar ---------- */
.topbar{position:sticky; top:0; z-index:30; background:var(--bg-0);
  border-bottom:1px solid var(--line); padding:12px clamp(16px,4vw,44px) 10px;
  display:flex; align-items:center; gap:12px}
.brand{display:flex; align-items:center; gap:10px; min-width:0; flex:1}
.logo{width:40px; height:40px; border-radius:12px; flex:none; background:var(--accent);
  color:var(--accent-ink); display:flex; align-items:center; justify-content:center;
  font-family:var(--f-display); font-weight:800; font-size:19px; overflow:hidden}
.logo img{width:100%; height:100%; object-fit:contain; padding:4px}
.brand-name{font-family:var(--f-display); font-weight:700; font-size:17px; line-height:1.1;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.brand-sub{font-size:12px; color:var(--tx-2); display:flex; align-items:center; gap:5px}
.dot{width:7px; height:7px; border-radius:50%; background:var(--tx-3); display:inline-block}
.dot.on{background:#28a745}
.seg{display:flex; background:var(--bg-2); border-radius:999px; padding:3px; flex:none}
.seg button{font-size:12.5px; font-weight:600; color:var(--tx-2); padding:6px 12px;
  border-radius:999px; transition:color .18s ease}
.seg button.on{background:var(--bg-0); color:var(--tx-1); box-shadow:var(--sh-1)}

/* ---------- Chips de categoría (sticky) ---------- */
.cats{position:sticky; top:var(--h-topbar,63px); z-index:20; background:var(--bg-0);
  border-bottom:1px solid var(--line); padding:10px clamp(12px,3vw,40px);
  display:flex; gap:8px; overflow-x:auto; scrollbar-width:none}
.cats::-webkit-scrollbar{display:none}
.chip{flex:none; font-size:13.5px; font-weight:600; color:var(--tx-2); padding:8px 14px;
  border-radius:999px; background:var(--bg-1); border:1px solid transparent;
  transition:color .18s ease, background .18s ease}
.chip.on{background:var(--tx-1); color:var(--bg-0)}

/* ---------- Reservar mesa (barra opcional) ---------- */
.reservar-bar{margin:16px 0 0}
.reservar-bar button{width:100%; border:1px solid var(--line-2); border-radius:var(--r-md);
  padding:13px; font-weight:600; color:var(--tx-1); background:var(--bg-0);
  display:flex; align-items:center; justify-content:center; gap:9px; transition:border-color .18s}
.reservar-bar button:hover{border-color:var(--accent)}

/* ---------- Menú ---------- */
main{padding:6px clamp(16px,4vw,44px) 30px}

/* ---------- Firma Pedi2 ---------- */
/* Clase propia y no ".firma" a secas: la landing ya usa ".historia .firma"
   para la firma manuscrita de Nosotros y se pisaban. */
/* El colchón de abajo despeja la barra flotante del carrito, que es fija y
   taparía la firma justo cuando hay productos cargados. */
.pedi2{margin-top:34px; padding:26px 20px calc(94px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line); text-align:center}
.pedi2 a{display:inline-flex; align-items:baseline; gap:7px; font-size:12.5px;
  color:var(--tx-3); transition:color .16s}
.pedi2 b{font-family:var(--f-display); font-weight:700; font-size:14.5px;
  letter-spacing:-.01em; color:var(--tx-2); transition:color .16s}
.pedi2 a:hover{color:var(--tx-2)}
.pedi2 a:hover b{color:var(--accent)}
.sec{padding:20px 0 4px}
.sec h2{font-size:clamp(20px,2.4vw,26px); font-weight:700}
.estado-msg{color:var(--tx-2); text-align:center; padding:32px 12px; grid-column:1/-1}
.cards{display:grid; grid-template-columns:1fr; gap:16px; margin-top:14px}
@media(min-width:560px){ .cards{grid-template-columns:repeat(2,1fr)} }
@media(min-width:860px){ .cards{grid-template-columns:repeat(3,1fr)} }
@media(min-width:1080px){ .cards{grid-template-columns:repeat(4,1fr)} }
.card{background:var(--bg-0); border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; display:flex; flex-direction:column; transition:box-shadow .2s ease}
.card:hover{box-shadow:var(--sh-1)}
.media{position:relative; width:100%; aspect-ratio:16/11; background:var(--bg-1); overflow:hidden}
.media img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease}
.card:hover .media img{transform:scale(1.03)}
.media.ph{display:flex; flex-direction:column; gap:5px; align-items:center; justify-content:center; color:var(--tx-3)}
.media.ph small{font-size:10.5px; letter-spacing:.05em; text-transform:uppercase}
.card-body{padding:13px 15px 15px; display:flex; flex-direction:column; flex:1}
.card .name{font-family:var(--f-display); font-weight:600; font-size:16.5px; line-height:1.2}
.card .desc{font-size:13.5px; color:var(--tx-2); margin-top:3px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.card .foot{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:12px}
.card .price{font-family:var(--f-display); font-weight:700; font-size:16.5px}
.card.off{opacity:.6}
.badge-off{position:absolute; top:10px; left:10px; background:rgba(23,24,29,.82); color:#fff;
  font-size:11px; padding:4px 9px; border-radius:999px; letter-spacing:.02em}
.add-btn{width:42px; height:42px; border-radius:12px; background:var(--accent); color:var(--accent-ink);
  display:flex; align-items:center; justify-content:center; box-shadow:var(--sh-1);
  transition:transform .12s ease, background .18s ease; flex:none}
.add-btn:active{transform:scale(.9)} .add-btn:hover{background:var(--accent-2)}
.stepper{display:flex; align-items:center; gap:4px; background:var(--accent); color:var(--accent-ink);
  border-radius:12px; box-shadow:var(--sh-1); flex:none}
.stepper button{width:38px; height:42px; display:flex; align-items:center; justify-content:center}
.stepper .q{min-width:18px; text-align:center; font-weight:700; font-size:14px}

/* ---------- Barra de pedido flotante ---------- */
.cartbar{position:fixed; left:50%; transform:translateX(-50%) translateY(calc(100% + 28px));
  bottom:16px; width:min(432px,calc(100% - 32px)); z-index:40; background:var(--accent);
  color:var(--accent-ink); border-radius:var(--r-lg); box-shadow:var(--sh-2);
  padding:14px 16px; display:flex; align-items:center; gap:12px;
  transition:transform .32s cubic-bezier(.22,1,.36,1); font-weight:600}
.cartbar.show{transform:translateX(-50%) translateY(0)}
.cartbar .n{background:rgba(255,255,255,.22); border-radius:8px; min-width:26px; height:26px;
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700}
.cartbar .lbl{flex:1; font-family:var(--f-display)}
.cartbar .tot{font-family:var(--f-display); font-weight:800}

/* ---------- Sheet (carrito / checkout / reserva) ---------- */
.backdrop{position:fixed; inset:0; background:rgba(15,16,20,.42); z-index:50; opacity:0;
  pointer-events:none; transition:opacity .28s ease}
.backdrop.show{opacity:1; pointer-events:auto}
.sheet{position:fixed; left:50%; transform:translateX(-50%) translateY(100%); bottom:0;
  width:min(520px,100%); max-height:88vh; overflow:auto; z-index:60; background:var(--bg-0);
  border-radius:var(--r-xl) var(--r-xl) 0 0; transition:transform .34s cubic-bezier(.22,1,.36,1)}
.sheet.show{transform:translateX(-50%) translateY(0)}
.grip{width:40px; height:4px; border-radius:2px; background:var(--line-2); margin:10px auto 4px}
.sheet-in{padding:8px 20px 24px}
.sheet h3{font-size:19px; font-weight:700; margin:6px 0 12px}
.line{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:11px 0; border-bottom:1px solid var(--line)}
.line .nm{font-weight:500; font-size:14.5px}
.line .mini{font-size:12px; color:var(--tx-3)}
.line .rt{display:flex; align-items:center; gap:12px}
.mini-step{display:flex; align-items:center; gap:8px; background:var(--bg-1); border-radius:999px; padding:4px}
.mini-step button{width:26px; height:26px; border-radius:50%; background:var(--bg-0); box-shadow:var(--sh-1);
  display:flex; align-items:center; justify-content:center; color:var(--accent)}

/* ---------- Solo retiro (el local no hace envíos) ---------- */
/* Con el envío apagado, el selector de entrega desaparece y sin esto el cliente
   se queda sin saber que tiene que ir a buscarlo. Es un dato del pedido, no un
   adorno: va dentro del panel "Tu pedido", antes del total, y repetido chico en
   la barra de arriba para que se vea desde que entra a la carta. */
.solo-retiro{display:flex; align-items:center; gap:12px; margin:16px 0 2px;
  padding:13px 15px; background:var(--bg-1); border-radius:var(--r-md)}
.solo-retiro svg{color:var(--accent); flex:none}
.solo-retiro b{display:block; font-size:14.5px; font-weight:600; color:var(--tx-1)}
.solo-retiro span{display:block; font-size:13px; color:var(--tx-2); line-height:1.35; margin-top:1px}
/* En la barra de arriba queda una etiqueta en el lugar del selector. El selector
   de .topbar tiene su propio fondo, así que se anula con la misma especificidad. */
.seg.solo, .topbar .seg.solo{background:transparent; padding:0}
.seg.solo span{font-size:12.5px; font-weight:600; color:var(--tx-2); white-space:nowrap}
.topbar .seg.solo span{color:rgba(255,255,255,.72)}

/* ---------- Opciones en fila (forma de pago) ---------- */
/* Un desplegable esconde las opciones detrás de un toque y en el celular abre
   la rueda del sistema. Acá son pocas y conocidas: mostrarlas todas se entiende
   de un vistazo, se toca con el pulgar y no tapa el resto del formulario.
   A diferencia de las fichas del panel, esta elección es única. */
.opciones{display:flex; flex-wrap:wrap; gap:8px}
.opcion{padding:10px 15px; border-radius:999px; border:1.5px solid var(--line-2);
  background:var(--bg-0); font-family:inherit; font-size:14px; font-weight:600;
  color:var(--tx-2); transition:background .15s, border-color .15s, color .15s}
.opcion:hover{border-color:var(--tx-3); color:var(--tx-1)}
.opcion.on{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}

/* ---------- Selector de entrega dentro del panel "Tu pedido" ---------- */
.seg-full{display:flex; gap:6px; background:var(--bg-1); border-radius:999px; padding:4px}
.seg-full button{flex:1; font-family:inherit; font-size:13.5px; font-weight:600; color:var(--tx-2);
  padding:11px 8px; border-radius:999px; transition:color .18s ease, background .18s ease}
.seg-full button:hover{color:var(--tx-1)}
.seg-full button.on{background:var(--accent); color:var(--accent-ink); box-shadow:var(--sh-1)}

.line strong{font-family:var(--f-display); min-width:64px; text-align:right}
.sum{margin-top:14px; font-size:14px}
.sum .row{display:flex; justify-content:space-between; padding:5px 0; color:var(--tx-2)}
.sum .row.tot{color:var(--tx-1); font-family:var(--f-display); font-weight:800; font-size:18px;
  border-top:1px solid var(--line); margin-top:6px; padding-top:12px}
label{display:block; font-size:12.5px; color:var(--tx-2); margin:12px 0 5px; font-weight:500}
input,select,textarea{width:100%; font-family:inherit; font-size:15px; color:var(--tx-1);
  padding:11px 12px; border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--bg-0)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:transparent}
.btn{display:flex; align-items:center; justify-content:center; gap:9px; width:100%; background:var(--accent);
  color:var(--accent-ink); font-family:var(--f-display); font-weight:700; font-size:16px; padding:15px;
  border-radius:var(--r-md); margin-top:18px; transition:transform .12s ease, background .18s ease}
.btn:active{transform:scale(.99)} .btn:hover{background:var(--accent-2)}
.link{background:none; color:var(--tx-2); font-size:13.5px; width:100%; padding:12px; margin-top:4px}

/* ---------- Landing ---------- */
.hero{position:relative; padding:clamp(28px,7vw,64px) clamp(16px,4vw,44px)}
.hero-logo{width:64px; height:64px; border-radius:18px; background:var(--accent); color:var(--accent-ink);
  display:flex; align-items:center; justify-content:center; font-family:var(--f-display); font-weight:800;
  font-size:30px; overflow:hidden; margin-bottom:16px}
.hero-logo img{width:100%; height:100%; object-fit:contain; padding:8px}
.hero h1{font-size:clamp(30px,6vw,52px); font-weight:800; line-height:1.02}
.hero .estado{display:inline-flex; align-items:center; gap:7px; font-size:14px; color:var(--tx-2); margin-top:12px}
.hero p{font-size:clamp(15px,2vw,17px); color:var(--tx-2); max-width:52ch; margin:10px 0 0}
.cta{display:inline-flex; align-items:center; gap:9px; background:var(--accent); color:var(--accent-ink);
  font-family:var(--f-display); font-weight:700; font-size:16px; padding:14px 22px; border-radius:var(--r-md);
  margin-top:22px; transition:transform .12s ease, background .18s ease}
.cta:hover{background:var(--accent-2)} .cta:active{transform:scale(.99)}
.cta.ghost{background:var(--bg-0); color:var(--tx-1); border:1px solid var(--line-2)}
.cta.ghost:hover{border-color:var(--accent); background:var(--bg-0)}
.block{padding:8px clamp(16px,4vw,44px) 40px}
.block h2{font-size:clamp(21px,2.6vw,28px); font-weight:700; margin-bottom:4px}
.promos{display:grid; gap:12px; margin:14px 0 26px}
@media(min-width:720px){ .promos{grid-template-columns:repeat(2,1fr)} }
.promo{border:1px solid var(--line-2); border-left:4px solid var(--accent); border-radius:var(--r-md);
  padding:14px 16px; background:var(--bg-0)}
.promo strong{font-family:var(--f-display); font-size:16px; display:block}
.promo span{font-size:14px; color:var(--tx-2)}
.foot-cta{text-align:center; padding:8px clamp(16px,4vw,44px) 56px}

@media (prefers-reduced-motion: reduce){*{transition:none!important}}