/* ============================================================
   SISTEMA DE DISEÑO — MasVisual · PolloStok (Rosario)
   Base gastronómicos vestida con la marca del cliente.
   Solo cambian los VALORES de los tokens; los nombres son fijos.
   Marca: carbón + naranja fuego (acción) + rojo marca (detalle) + crema.
   ============================================================ */
:root{
  /* Claros (carta, cards, fondos de contenido) */
  --bg-0:#fffdf8; --bg-1:#f7f2e8; --bg-2:#efe6d6; --bg-3:#e3d6c0;
  /* Oscuros de marca (hero, topbar, footer) */
  --ink-0:#11100e; --ink-1:#1b1511; --ink-2:#2a211b;
  --tx-1:#1b1511; --tx-2:#5b4f45; --tx-3:#8c8075;
  --tx-osc-1:#fffdf8; --tx-osc-2:#b3a99d;        /* texto sobre oscuro */
  /* Naranja = acción/energía. Lleva texto carbón encima, nunca blanco (no da contraste). */
  --accent:#f59a00; --accent-2:#dd8700; --accent-3:#ffb43a; --accent-ink:#11100e;
  --rojo:#e02b20;                                /* marca: detalles puntuales, no botones */
  --line:#e6dccb; --line-2:#d5c7b0;
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:22px;
  --sh-1:0 1px 2px rgba(27,21,17,.07), 0 3px 10px rgba(27,21,17,.06);
  --sh-2:0 10px 30px rgba(27,21,17,.22);
  --f-display:"Barlow Condensed", "Arial Narrow", sans-serif;
  --f-body:"Manrope", 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,83px); 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}}


/* ============================================================
   POLLOSTOK — ajustes de marca sobre la base
   (topbar carbón + logo blanco con pico naranja en /pedidos)
   ============================================================ */
.topbar{background:var(--ink-0); border-bottom-color:rgba(255,253,248,.10)}
.topbar .logo{width:auto; height:clamp(32px,5.4vw,48px); min-width:0; padding:0; background:none;
  border-radius:0; box-shadow:none}
.topbar .logo img{width:auto; height:100%; padding:0; object-fit:contain}
.topbar .brand-name{color:var(--tx-osc-1)}
.topbar .brand-sub{color:var(--tx-osc-2)}
.topbar .seg{background:rgba(255,253,248,.10)}
.topbar .seg button{color:rgba(255,253,248,.7)}
.topbar .seg button.on{background:var(--accent); color:var(--accent-ink); box-shadow:none}
.topbar .volver{color:var(--tx-osc-2); font-size:12.5px; display:flex; align-items:center; gap:6px; white-space:nowrap}
@media(max-width:400px){ .topbar{gap:8px} .topbar .seg.solo span{white-space:normal; text-align:right; display:block; max-width:9em; line-height:1.2} }
.topbar .volver:hover{color:var(--tx-osc-1)}
.cats{background:var(--bg-0)}
.chip{font-weight:700}
.chip.on{background:var(--ink-1); color:var(--tx-osc-1)}

/* Display condensada: títulos cortos en mayúsculas, nombres de plato en caja normal */
h1,h2,h3{font-weight:700; letter-spacing:.005em}
.sec h2{font-size:clamp(24px,3vw,32px); text-transform:uppercase; letter-spacing:.01em}
.card{border-radius:var(--r-lg)}
.card .name{font-size:19px; font-weight:700; line-height:1.1}
.card .price{font-size:21px; font-weight:800}
.cartbar .lbl, .cartbar .tot{font-size:18px; letter-spacing:.01em}
.cartbar .n{background:rgba(17,16,14,.14)}
.btn{font-size:18px; letter-spacing:.02em; text-transform:uppercase}
.sheet h3{font-size:24px; text-transform:uppercase}
.sum .row.tot{font-size:22px}
.badge-off{background:var(--rojo)}
.dot.on{background:#2fa84f}
.pedi2 b{font-size:16px}
.mini-step button{color:var(--tx-1)}
/* Producto sin foto: placeholder de marca (la cara del logo), nunca una foto engañosa */
.media.ph{background:var(--ink-1)}
.media.ph .ph-cara{width:30%; height:auto; opacity:.5; object-fit:contain}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}