/* =========================================================================
   Comandas — la carta que ve el comensal.

   Todo lo visual sale de la PLANTILLA que eligió el negocio (paleta, tipografía,
   radios) más SU color de acento. Aquí no hay colores fijos: si aparece uno,
   es un error.

   Tres anchos reales, no dos: el celular en la mesa, la tablet apoyada, y el
   computador de quien pide desde la oficina. Cada uno cambia la disposición,
   no solo el tamaño.
   ========================================================================= */

body.publico{
  /* La página NUNCA se mueve de lado: lo ancho (chips, fotos, brasas del
     telón) se desborda dentro de su propio contenedor, no arrastra el body. */
  overflow-x:hidden;
  background:var(--fondo);
  color:var(--texto);
  font-family:var(--f-texto);
  padding-bottom:104px;
  -webkit-font-smoothing:antialiased;
}
body.publico h1,body.publico h2,body.publico h3,body.publico .tipo-titulo{
  font-family:var(--f-titulo);
  letter-spacing:var(--ls,-0.02em);
}
.envoltura{max-width:1120px;margin:0 auto;padding:0 20px}

/* ───────── Las superficies que pone el navegador ─────────
   Aquí importan más que en el panel: esta es la carta del NEGOCIO, y una
   selección azul de fábrica encima de una plantilla italiana o de una de jugos
   la delata como una plantilla genérica. Todo sale del acento del negocio, así
   que cada carta se selecciona en su propio color sin una línea extra. */
body.publico ::selection{
  background:color-mix(in srgb, var(--acento) 26%, transparent);
  color:var(--texto);
}
body.publico{caret-color:var(--acento);scrollbar-color:var(--borde) transparent}
body.publico ::-webkit-scrollbar{width:10px;height:10px}
body.publico ::-webkit-scrollbar-track{background:transparent}
body.publico ::-webkit-scrollbar-thumb{
  background:var(--borde);border-radius:999px;border:3px solid transparent;background-clip:content-box;
}

/* Anillo de foco. El comensal pide desde el celular casi siempre, pero el
   pedido por internet entra también desde un computador, y ahí se llena el
   formulario con Tab. Sin anillo no se sabe en qué campo se está escribiendo.
   Va en el acento del negocio, con un halo del color del fondo debajo para que
   se despegue de cualquier plantilla, clara u oscura. */
body.publico :focus-visible{
  outline:2px solid var(--acento);
  outline-offset:2px;
  border-radius:var(--radio-foto,10px);
}

/* ───────── Cabecera ─────────
   La primera pantalla decide si el comensal se queda. Lleva marca, una línea de
   qué es el sitio, y el estado —abierto o no— en grande: es lo primero que
   pregunta quien abre una carta. */
.pub-cabeza{position:relative;overflow:hidden;padding:0 0 26px}
/* Dos halos y no uno: el segundo, más chico y desplazado, es lo que hace que
   el fondo se vea pintado y no como un degradado de plantilla. Se queda en
   opacidades bajas porque detrás va texto que tiene que leerse. */
.pub-cabeza::before{
  content:"";position:absolute;inset:0 0 auto;height:280px;pointer-events:none;
  background:
    radial-gradient(110% 90% at 12% 0%, var(--acento) 0%, transparent 58%),
    radial-gradient(70% 70% at 92% 12%, var(--acento) 0%, transparent 62%);
  opacity:.2;
}
.pub-cabeza .envoltura{position:relative;padding-top:28px}
/* La marca, CENTRADA como héroe de app: el logo arriba (transparente, ya sin
   caja), el nombre debajo, la descripción al centro. Una portada, no un
   membrete. */
.pub-marca{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:14px;margin-bottom:6px}
/* contain y no cover: muchos negocios suben un logotipo ANCHO (el nombre
   escrito), y recortarlo dentro de un cuadrado se come la mitad de la marca.
   Con contain, un logo cuadrado sigue viéndose cuadrado y uno ancho se ve
   completo. */
.pub-logo{
  height:80px;width:auto;max-width:min(260px,64vw);object-fit:contain;flex:none;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.28));
}
.pub-nombre{
  font-size:clamp(30px,6vw,50px);font-weight:800;line-height:1.02;
  letter-spacing:var(--ls,-.03em);text-transform:var(--tt,none);
  text-wrap:balance;
}
.pub-desc{color:var(--tenue);font-size:clamp(14.5px,2vw,17px);margin-top:8px;
  line-height:1.5;max-width:52ch;margin-inline:auto}
.pub-cabeza .envoltura{text-align:center}
.pub-datos{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px;
  color:var(--tenue);font-size:14px}
.pub-datos span{display:inline-flex;align-items:center;gap:7px}

/* ── El estado, sin franja ──
   Un chip del tamaño de su palabra y el tiempo aparte con su reloj. El color
   vive en el punto y en la letra, no en un lienzo de pared a pared: dice lo
   mismo, grita menos. */
.estado-linea{display:flex;align-items:center;justify-content:center;gap:10px;
  flex-wrap:wrap;margin-top:16px}

/* ── La corona ──
   Una ELIPSE de lado a lado asomando del borde superior, que baja
   fundiéndose con el fondo — y por su arco corren dos pulsos de corriente,
   el mismo circuito del interruptor de la cocina: encendido se NOTA.
   Verde en línea, ámbar en pausa, rojo cerrado. */
.corona{
  position:relative;height:86px;overflow:hidden;
  display:grid;justify-items:center;align-items:start;
  --ep:#16A34A;
}
.corona-forma{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:150vw;height:100%;
  border-radius:0 0 50% 50% / 0 0 100% 100%;    /* el arco elíptico */
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--ep) 46%, var(--fondo)) 0%,
    color-mix(in srgb, var(--ep) 18%, var(--fondo)) 55%,
    transparent 96%);                            /* se funde, sin borde duro */
}
.corona-circuito{
  position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
}
.corona-circuito path{fill:none;stroke-linecap:round}
/* el riel: el borde del arco, apenas presente */
.cc-riel{stroke:color-mix(in srgb, var(--ep) 38%, transparent);stroke-width:2}
/* los pulsos: corriente recorriendo el arco, con su brillo */
.cc-pulso{
  stroke:color-mix(in srgb, var(--ep) 80%, #fff);stroke-width:2.5;
  stroke-dasharray:70 1000;stroke-dashoffset:1070;
  filter:drop-shadow(0 0 5px var(--ep));
  animation:cc-corre 3.4s linear infinite;
}
.cc-pulso-b{animation-delay:1.7s}
@keyframes cc-corre{to{stroke-dashoffset:0}}
/* cerrado no corre corriente: el riel queda quieto y dice lo suyo */
.corona.cerrado .cc-pulso{animation:none;opacity:0}

.corona-txt{
  position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;
  padding-top:calc(14px + env(safe-area-inset-top));
  font-size:12.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.35);
}
.corona .bolita{
  width:8px;height:8px;border-radius:50%;flex:none;position:relative;
  background:#fff;box-shadow:0 0 8px rgba(255,255,255,.9);
}
.corona.abierto .bolita::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid #fff;animation:pulso-abierto 2.6s ease-out infinite;
}
.corona.abierto{--ep:#16A34A}
.corona.espera{--ep:#D97706}
.corona.cerrado{--ep:#DC2626}
@media (prefers-reduced-motion:reduce){
  .cc-pulso{animation:none;opacity:0}
  .corona.abierto .bolita::after{animation:none;opacity:0}
}

/* la marca baja de verdad: la corona respira sola arriba y el nombre (o el
   logo del negocio) arranca despegado, con escena propia */
.corona + .envoltura{padding-top:34px}
/* El chip del tiempo: color de la marca, respirando un brillo suave, y el
   reloj hace TIC — el dato más consultado de la carta merece estar vivo. */
.est-det{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 18px;border-radius:999px;
  font-size:14.5px;font-weight:750;
  color:var(--acento-leible,var(--acento));
  background:color-mix(in srgb, var(--acento) 14%, var(--sup));
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--acento) 32%, transparent);
  animation:det-respira 3.2s ease-in-out infinite;
}
@keyframes det-respira{
  50%{box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--acento) 32%, transparent),
      0 0 22px -6px var(--acento)}
}
.est-det svg{width:17px;height:17px;flex:none;transform-origin:50% 55%;
  animation:det-tic 2.4s ease-in-out infinite}
@keyframes det-tic{0%,58%,100%{transform:rotate(0)}66%{transform:rotate(-11deg)}
  76%{transform:rotate(8deg)}86%{transform:rotate(-4deg)}}
@media (prefers-reduced-motion:reduce){ .est-det,.est-det svg{animation:none} }
@media (prefers-reduced-motion:reduce){ .est-chip.abierto .bolita::after{animation:none;opacity:0} }
}

.barra-cerrado{
  position:sticky;top:0;z-index:30;padding:13px 20px;text-align:center;
  font-weight:700;font-size:14.5px;
  background:#3B1114;color:#FFD9D9;border-bottom:1px solid #7F1D1D;
}

/* ───────── Categorías ─────────
   Fichas con ICONO, no solo texto. En una carta larga el pulgar desplaza esta
   fila sin que el ojo llegue a leer: la forma del vaso encuentra "Bebidas"
   antes que la palabra. El icono se deduce del nombre que ya escribió el
   dueño (cm_icono_categoria) — no hay que pedirle que elija nada. */
.cats-envoltura{
  position:sticky;top:0;z-index:25;
  background:var(--vidrio);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--borde);
}
.cats{display:flex;gap:10px;overflow-x:auto;padding:14px 0;scrollbar-width:none;-ms-overflow-style:none}
.cats::-webkit-scrollbar{display:none}
.cat{
  display:inline-flex;align-items:center;gap:9px;
  padding:11px 18px 11px 13px;border-radius:999px;
  background:var(--sup2);color:var(--texto);
  font-weight:650;font-size:15px;white-space:nowrap;
  border:0;cursor:pointer;flex:none;font-family:inherit;
  transition:background-color .2s var(--ease-salida),color .2s var(--ease-salida),
             border-color .2s var(--ease-salida),transform .12s var(--ease-salida);
}
.cat-ico{
  display:grid;place-items:center;width:26px;height:26px;flex:none;
  color:var(--acento-leible,var(--acento));transition:color .2s var(--ease-salida);
}
.cat-ico svg{width:20px;height:20px}
.cat:active{transform:scale(.96)}
/* Activa: rellena en el color del negocio. El icono pasa a heredar el color del
   texto para que no quede un icono de acento sobre un fondo de acento. */
.cat.on{background:var(--acento);color:var(--acento-txt);border-color:transparent}
.cat.on .cat-ico{color:currentColor}
@media (hover:hover) and (pointer:fine){
  .cat:not(.on):hover{background:var(--acento-suave);color:var(--acento-leible,var(--acento))}
}

.seccion{padding:38px 0 0}
.seccion h2{
  font-size:clamp(21px,3vw,29px);font-weight:750;letter-spacing:var(--ls,-.02em);
  margin-bottom:20px;text-transform:var(--tt,none);
}

/* ───────── Producto ─────────
   Reconstruida al nivel de una app de comida: la foto manda, el nombre pesa,
   el precio se ve desde lejos y agregar es UN toque desde la propia tarjeta.
   Antes el precio iba en un renglón suelto y para agregar había que abrir el
   detalle: tres platos costaban nueve toques en vez de tres.

   Dos disposiciones según la plantilla: LISTA (foto al lado, se recorre rápido,
   sirve para cartas largas) o REJILLA (la foto manda, para negocios donde el
   producto entra por los ojos). */
.prods{display:grid;gap:16px}
@media (min-width:640px){ .prods{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ body.disp-rejilla .prods{grid-template-columns:repeat(3,1fr)} }

.prod{
  position:relative;background:var(--sup);
  border:1px solid var(--card-borde,var(--borde));
  box-shadow:var(--card-sombra,none);
  cursor:pointer;overflow:hidden;
  /* transform y no box-shadow al pulsar: el transform no repinta la tarjeta */
  transition:transform .12s var(--ease-salida),border-color .2s var(--ease-salida);
}
.prod:active{transform:scale(.985)}
@media (hover:hover) and (pointer:fine){
  .prod:hover{border-color:var(--acento)}
  .prod:hover .prod-foto{transform:scale(1.04)}
}
.prod:focus-visible{outline:2px solid var(--acento);outline-offset:3px}

.prod-medio{position:relative;flex:none;overflow:hidden}
.prod-foto{
  width:100%;height:100%;object-fit:cover;background:var(--sup2);display:block;
  transition:transform .5s var(--ease-salida);
}

/* ── Sin foto ──
   La mayoría de los restaurantes arrancan sin fotos, así que este estado NO es
   el caso raro: es el que van a ver los primeros días y tiene que verse bien.
   Antes era un degradado casi blanco con un icono al 42% — se leía como que
   faltaba algo. Ahora es un bloque con el color del negocio, la inicial del
   plato en grande al fondo y el icono de su tipo de comida encima. Se lee como
   una decisión, no como un hueco. */
.prod-sinfoto{
  position:relative;width:100%;height:100%;display:grid;place-items:center;
  background:
    radial-gradient(120% 120% at 20% 0%, var(--acento-suave) 0%, transparent 70%),
    linear-gradient(150deg, var(--acento-suave), var(--sup2) 85%);
  color:var(--acento);
  box-shadow:inset 0 0 0 1px var(--borde);
}
.prod-sinfoto svg{width:34%;height:34%;max-width:56px;max-height:56px;
  position:relative;z-index:1;opacity:.92}
.psf-letra{
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:min(58%, 92px);font-weight:800;line-height:1;
  color:var(--acento);opacity:.12;user-select:none;
  font-family:var(--f-titulo);
}

/* Sello sobre la foto (agotado). Va encima de la imagen, como en las apps. */
.prod-sello{
  position:absolute;left:10px;top:10px;z-index:2;
  padding:5px 11px;border-radius:999px;
  font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.prod-sello-agotado{background:rgba(15,15,18,.78);color:#FCA5A5}

.prod-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.prod-nom{
  font-family:var(--f-titulo);font-size:17.5px;font-weight:750;line-height:1.25;
  letter-spacing:var(--ls,-.01em);text-transform:var(--tt,none);
}
.prod-desc{
  font-size:14px;color:var(--tenue);margin-top:6px;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
/* El pie se pega abajo: en una rejilla, dos tarjetas de alto distinto dejan el
   precio a la misma altura y la fila se lee como una fila. */
.prod-pie{
  display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:12px;
}
.prod-precio{
  font-size:19px;font-weight:800;color:var(--acento-leible,var(--acento));letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;line-height:1;
}
/* El botón de agregar: círculo relleno en el color del negocio. Es el elemento
   más brillante de la tarjeta a propósito — es lo que hay que tocar. */
.prod-mas{
  margin-left:auto;flex:none;
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:var(--acento);color:var(--acento-txt);
  box-shadow:0 6px 16px -6px var(--acento);
  transition:transform .14s var(--ease-salida);
}
.prod-mas svg{width:19px;height:19px}
.prod:active .prod-mas{transform:scale(.9)}

/* ── Disposición LISTA ── */
body.disp-lista .prod{
  display:flex;gap:15px;padding:14px;border-radius:var(--radio,18px);
}
body.disp-lista .prod-medio{
  width:118px;height:118px;border-radius:var(--radio-foto,14px);order:2;
}
body.disp-lista .prod-sello{left:8px;top:8px;font-size:10.5px;padding:4px 9px}

/* ── Disposición REJILLA ── */
body.disp-rejilla .prod{
  display:flex;flex-direction:column;border-radius:var(--radio,18px);
}
body.disp-rejilla .prod-medio{width:100%;aspect-ratio:4/3;height:auto;order:-1}
body.disp-rejilla .prod-txt{padding:15px 16px 17px}

/* Agotado: se ve que existe, se ve que hoy no hay, y no se puede tocar. */
.prod.agotado{opacity:.62;cursor:default}
.prod.agotado .prod-nom{text-decoration:line-through}
.prod.agotado .prod-foto,.prod.agotado .prod-sinfoto{filter:grayscale(.85)}
.prod.agotado:active{transform:none}

/* Se conserva la clase vieja por si quedó algún marcado sin migrar */
.etq-agotado{
  display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;padding:4px 9px;border-radius:999px;
  background:var(--sup2);color:var(--tenue);margin-top:9px;border:1px solid var(--borde);
}

/* ───────── Modal ───────── */
/* ── La apertura del popup ──
   Dos movimientos coordinados: el fondo se FUNDE a oscuro y la hoja SUBE desde
   abajo con una curva fuerte. Transiciones y no keyframes: se pueden disparar
   seguido (producto → carrito → producto) y siempre parten de donde van, sin
   reiniciarse a cero. El velo vive siempre en el DOM (visibility, no display):
   display:none no deja animar nada. */
.velo{position:fixed;inset:0;background:rgba(4,4,6,.78);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  z-index:150;display:flex;align-items:flex-end;justify-content:center;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .26s var(--ease-salida), visibility 0s linear .26s;
}
.velo.ver{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
.velo .modal{
  transform:translateY(34px) scale(.97);opacity:0;
  transition:transform .32s var(--ease-salida), opacity .26s var(--ease-salida);
}
.velo.ver .modal{transform:none;opacity:1}
@media (prefers-reduced-motion:reduce){
  .velo,.velo .modal{transition:opacity .2s ease}
  .velo .modal{transform:none}
}
.modal{
  background:var(--sup);color:var(--texto);
  /* Esta hoja SÍ flota sobre la carta: le toca sombra, y por eso no lleva
     borde. Es el mismo criterio, aplicado al revés. */
  box-shadow:0 -18px 48px -16px rgba(0,0,0,.5);
  border-radius:26px 26px 0 0;width:100%;max-height:92dvh;overflow-y:auto;padding:24px 20px 26px;
  font-family:var(--f-texto);
;
  /* Solo scroll vertical: cualquier hijo que se pase de ancho (una palabra
     larga, una imagen, un flex sin min-width) creaba una barra horizontal
     dentro de la ventana, y una ventana que se mueve para los lados se siente
     rota. Lo que no quepa, se envuelve o se recorta. */
  overflow-x:hidden;overflow-wrap:break-word}
.modal h3{font-family:var(--f-titulo);font-size:23px;margin-bottom:5px;line-height:1.2}
.modal .campo input,.modal .campo textarea,.modal .campo select{
  background:var(--sup2);border-color:var(--borde);color:var(--texto);
  border-radius:var(--radio,12px);
}
.modal .campo label{color:var(--tenue)}
.modal .ayuda{color:var(--tenue)}

.op-grupo{margin:22px 0}
.op-grupo h4{font-family:var(--f-titulo);font-size:16px;font-weight:700;margin-bottom:3px}
.op-grupo .req{font-size:11.5px;color:var(--acento);font-weight:700;
  text-transform:uppercase;letter-spacing:.06em}
.op-val{display:flex;align-items:center;gap:13px;padding:14px 14px;
  border-radius:var(--radio,12px);background:var(--sup2);margin-top:9px;cursor:pointer;
  border:1px solid transparent;transition:border-color .15s ease,background-color .15s ease}
.op-val.on{border-color:var(--acento);background:var(--acento-suave)}
body.oscura .op-val.on{background:var(--sup3,var(--sup2))}
.op-val input{width:22px;height:22px;accent-color:var(--acento);flex:none}
.op-val .n{flex:1}
.op-val .r{color:var(--tenue);font-weight:700;font-size:14px}
.op-val.agotado{opacity:.4;pointer-events:none}

.cantidad{display:flex;align-items:center;gap:18px;justify-content:center;margin:24px 0}
.cantidad button{width:54px;height:54px;border-radius:50%;border:1px solid var(--borde);
  background:var(--sup2);color:var(--texto);font-size:25px;cursor:pointer;
  display:grid;place-items:center;transition:transform .08s var(--ease-salida)}
.cantidad button:active{transform:scale(.92)}
.cantidad span{font-size:28px;font-weight:700;min-width:48px;text-align:center;
  font-family:var(--f-titulo)}

/* ───────── Carrito ───────── */
.carrito-btn{
  position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;
  padding:12px 20px calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(to top,var(--fondo) 62%,transparent);
  border:0;font-family:var(--f-texto);
}
.carrito-btn.ver{display:block}
.carrito-btn .caja{
  display:flex;align-items:center;gap:13px;max-width:560px;margin:0 auto;
  padding:16px 20px;border-radius:var(--radio,16px);
  background:var(--acento);color:var(--acento-txt);font-weight:700;font-size:16px;
  box-shadow:0 10px 30px -8px rgba(0,0,0,.45);cursor:pointer;
  transition:transform .09s var(--ease-salida);
}
.carrito-btn:active .caja{transform:scale(.985)}
.carrito-btn .n{background:rgba(0,0,0,.18);border-radius:999px;padding:3px 11px;font-size:14px}
.carrito-btn .t{margin-left:auto}

.linea{display:flex;gap:12px;align-items:center;padding:13px 0;border-bottom:1px solid var(--borde)}
.linea:last-child{border-bottom:0}
.li-foto{
  width:48px;height:48px;border-radius:12px;object-fit:cover;flex:none;
  background:var(--sup2);
}
.li-sinfoto{
  display:grid;place-items:center;font-family:var(--f-titulo);font-size:19px;
  color:var(--acento-leible,var(--acento));
  background:color-mix(in srgb, var(--acento) 12%, var(--sup2));
}
.linea .c{font-weight:800;color:var(--acento-leible,var(--acento));flex:none;
  font-variant-numeric:tabular-nums}
.linea .n{flex:1;min-width:0}
.linea .n b{font-weight:650;font-size:15.5px;display:block;line-height:1.25}
.linea .n span{display:block;font-size:13px;color:var(--tenue);margin-top:2px}
.li-nota{color:var(--tx-ojo,#FCD34D)!important}
.linea .p{font-weight:750;font-variant-numeric:tabular-nums;flex:none}
/* Quitar: un basurero con área de toque de verdad, centrado a la línea */
.linea .x{
  flex:none;width:40px;height:40px;border:0;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;background:transparent;color:var(--tenue);
  transition:color .15s ease,background-color .15s ease,transform .12s var(--ease-salida);
}
.linea .x svg{width:18px;height:18px}
.linea .x:active{transform:scale(.88)}
@media (hover:hover){ .linea .x:hover{color:#EF4444;background:rgba(239,68,68,.1)} }

.total-fila{display:flex;justify-content:space-between;align-items:center;
  padding:18px 0 6px;font-size:20px;font-weight:700;font-family:var(--f-titulo)}

.pago-op{display:flex;align-items:flex-start;gap:13px;padding:16px 15px;
  border-radius:var(--radio,14px);background:var(--sup2);border:1px solid var(--borde);
  margin-bottom:11px;cursor:pointer;transition:border-color .15s ease}
.pago-op.on{border-color:var(--acento);background:var(--acento-suave)}
body.oscura .pago-op.on{background:var(--sup)}
.pago-op input{width:22px;height:22px;accent-color:var(--acento);flex:none;margin-top:2px}
.pago-op b{display:block;font-size:15.5px;margin-bottom:2px}
.pago-op span{font-size:13.5px;color:var(--tenue);line-height:1.45}

/* ───────── Estado del pedido ───────── */
.estado-pag{max-width:560px;margin:0 auto;padding:36px 20px 70px;text-align:center}
.turno-etq{font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;color:var(--tenue)}
.turno-gigante{font-family:var(--f-titulo);font-size:clamp(72px,18vw,104px);
  font-weight:800;letter-spacing:-.05em;line-height:1;margin:8px 0 4px;color:var(--acento)}
.pasos{display:flex;gap:10px;margin:34px 0 28px}
.paso{flex:1;text-align:center}
.paso .bola{width:40px;height:40px;border-radius:50%;background:var(--sup2);margin:0 auto 9px;
  display:grid;place-items:center;font-weight:700;color:var(--tenue);border:1px solid var(--borde);
  font-variant-numeric:tabular-nums;
  transition:background-color .3s ease,color .3s ease,border-color .3s ease}
.paso .bola-visto{width:19px;height:19px}
.paso.on .bola{background:var(--acento);color:var(--acento-txt);border-color:transparent}
.paso.hecho .bola{background:#22C55E;color:#04240F;border-color:transparent}
.paso b{font-size:12.5px;color:var(--tenue);font-weight:600}
.paso.on b,.paso.hecho b{color:var(--texto)}
.listo-grande{background:rgba(34,197,94,.13);border:1px solid rgba(34,197,94,.36);
  border-radius:var(--radio,18px);padding:24px;margin-bottom:22px}
.listo-grande b{display:block;font-family:var(--f-titulo);font-size:24px;color:#1E9E56;margin-bottom:5px}
body.oscura .listo-grande b{color:#86EFAC}
.resumen{text-align:left;background:var(--sup);border:1px solid var(--card-borde,var(--borde));
  border-radius:var(--radio,16px);padding:20px;box-shadow:var(--card-sombra,none);
  font-variant-numeric:tabular-nums}
.resumen h3{font-family:var(--f-titulo);font-size:17px;margin-bottom:12px}

/* ═══════════ RESPONSIVE ═══════════
   Los tres anchos cambian la DISPOSICIÓN, no solo el tamaño de la letra. */

/* Tablet: la carta empieza a caber en dos columnas */
@media (min-width:680px){
  .envoltura{padding:0 28px}
  body.disp-lista .prods{grid-template-columns:repeat(2,1fr)}
  body.disp-rejilla .prods{grid-template-columns:repeat(2,1fr)}
  .pub-logo{height:80px}
  .seccion{padding-top:42px}
  .modal{border-radius:24px;max-width:560px;padding:28px}
  .velo{align-items:center;padding:20px}
}

/* iPad horizontal y computador */
@media (min-width:1000px){
  body.disp-rejilla .prods{grid-template-columns:repeat(3,1fr)}
  .pub-cabeza .envoltura{padding-top:44px}
  .pub-cabeza{padding-bottom:34px}
  .cats{padding:16px 0}
  /* El botón del carrito deja de ser una barra completa y pasa a ser una
     pastilla flotante: en un escritorio, una barra de lado a lado se ve como
     un anuncio, no como el pedido de uno. */
  .carrito-btn{left:auto;right:28px;bottom:28px;padding:0;background:none}
  .carrito-btn .caja{width:auto;min-width:320px;box-shadow:0 16px 40px -12px rgba(0,0,0,.5)}
}

/* Celulares angostos */
@media (max-width:400px){
  .envoltura{padding:0 15px}
  body.disp-lista .prod{padding:12px;gap:12px}
  body.disp-lista .prod-foto,body.disp-lista .prod-sinfoto{width:86px;height:86px}
}

@media (prefers-reduced-motion:reduce){
  .modal{animation:none}
  .prod,.cat,.op-val,.pago-op,.cantidad button{transition:none}
}

/* ───────── "Lo de siempre" ─────────
   Para quien ya pidió aquí. Va arriba de las categorías porque es el camino más
   corto a un pedido, y quien vuelve no quiere volver a recorrer la carta. */
/* El atributo hidden lo pone el navegador con muy poca especificidad: cualquier
   display: explícito lo gana y el bloque se queda visible aunque esté "oculto".
   Hay que decirlo a mano. */
.lo-de-siempre[hidden]{display:none}
.lo-de-siempre{
  display:flex;gap:16px;align-items:center;flex-wrap:wrap;
  margin:20px 0 4px;padding:16px 18px;border-radius:var(--radio,16px);
  background:var(--acento-suave);border:1px solid var(--acento);
  box-shadow:var(--sombra);
}
body.oscura .lo-de-siempre{background:var(--sup);border-color:var(--borde)}
.lds-txt{flex:1;min-width:190px}
.lds-txt b{display:block;font-family:var(--f-titulo);font-size:17px;margin-bottom:3px}
.lds-que{display:block;font-size:14px;color:var(--tenue);line-height:1.45}
.lds-nota{display:block;font-size:12.5px;color:var(--tenue);margin-top:4px;font-style:italic}
.lds-nota:empty{display:none}
.lds-btn{
  background:var(--acento);color:var(--acento-txt);min-height:48px;padding:0 22px;
  border-radius:var(--radio,12px);font-weight:700;flex:none;
}

/* ───────── Confirmación de "agregado" ─────────
   Cuando se agrega desde el botón + de la tarjeta, la confirmación aparece EN
   la tarjeta, no en un aviso al pie. El pulgar ya está ahí y el ojo también;
   mandar la respuesta al otro extremo de la pantalla obliga a mirar a otro
   lado para saber si el toque sirvió. */
.prod.agregado{ border-color:var(--acento) }
.prod.agregado::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  border-radius:inherit;
  box-shadow:inset 0 0 0 2px var(--acento);
  animation:prod-ok .9s var(--ease-salida) forwards;
}
@keyframes prod-ok{ 0%{opacity:0} 18%{opacity:1} 100%{opacity:0} }
.prod.agregado .prod-mas{
  background:#16A34A;color:#fff;
  animation:mas-ok .5s var(--ease-salida);
}
@keyframes mas-ok{ 0%{transform:scale(.72)} 55%{transform:scale(1.12)} 100%{transform:scale(1)} }
@media (prefers-reduced-motion:reduce){
  .prod.agregado::after,.prod.agregado .prod-mas{animation:none}
}

/* ───────── El botón del carrito ─────────
   Es el único camino a pagar, así que es lo más brillante de la pantalla y no
   se va nunca. Se sube por encima del borde inferior del teléfono
   (safe-area-inset) para que el gesto de inicio del iPhone no lo tape. */
.carrito-btn{
  padding-bottom:calc(18px + env(safe-area-inset-bottom));
}
.carrito-btn .caja{
  gap:14px;padding:16px 20px;border-radius:999px;
  font-size:16.5px;font-weight:750;
  box-shadow:0 14px 34px -10px var(--acento), 0 4px 12px -4px rgba(0,0,0,.3);
}
.carrito-btn .n{
  min-width:28px;height:28px;border-radius:999px;
  display:grid;place-items:center;font-size:14.5px;font-weight:800;
  background:rgba(0,0,0,.18);font-variant-numeric:tabular-nums;
}
.carrito-btn .t{font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* ───────── Recoger o domicilio ─────────
   Va primero en el checkout y no en un desplegable: cambia el tiempo, cambia
   lo que hay que preguntar después y a veces cambia el precio. Escondida en un
   desplegable obliga a abrirla para saber qué opciones hay; así se ven las dos
   y se toca una. */
.entregas{display:grid;gap:10px;margin-bottom:18px}
@media (min-width:420px){ .entregas{grid-template-columns:repeat(2,1fr)} }
.entrega-op{
  display:flex;align-items:center;gap:12px;cursor:pointer;
  padding:14px;border-radius:var(--radio,16px);
  background:var(--sup2);border:2px solid var(--borde);
  min-height:66px;
  transition:border-color .18s var(--ease-salida),background-color .18s var(--ease-salida);
}
.entrega-op input{position:absolute;opacity:0;pointer-events:none}
.eo-ico{
  display:grid;place-items:center;width:42px;height:42px;flex:none;border-radius:12px;
  background:var(--sup);color:var(--acento-leible,var(--acento));
  transition:background-color .18s ease,color .18s ease;
}
.eo-ico svg{width:24px;height:24px}
.eo-txt{min-width:0}
.eo-txt b{display:block;font-size:15.5px;font-weight:700;line-height:1.2}
.eo-txt span{display:block;font-size:12.5px;color:var(--tenue);line-height:1.35;margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.entrega-op.on{border-color:var(--acento);background:var(--acento-suave)}
.entrega-op.on .eo-ico{background:var(--acento);color:var(--acento-txt)}
.entrega-op:active{transform:scale(.985)}
@media (hover:hover) and (pointer:fine){
  .entrega-op:not(.on):hover{border-color:var(--borde2,var(--borde));background:var(--sup)}
}

/* ───────── El telón de cerrado ─────────
   Pantalla completa y VIVA: dos brasas del color del negocio derivando al
   fondo, la marca en el centro con un anillo que gira (el "estamos en eso"
   sin decirlo), y una frase que rota debajo del título. Cerrado no es un
   error: es el local respirando antes de abrir. */
.telon{
  position:fixed;inset:0;z-index:220;overflow:hidden;
  display:grid;place-items:center;
  padding:calc(20px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom));
  background:color-mix(in srgb, var(--fondo) 94%, #000);
}
/* Las brasas: puro transform y opacidad — viven en la GPU, no recalculan nada */
.telon-brasa{
  position:absolute;width:56vmax;height:56vmax;border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--acento) 26%, transparent), transparent 62%);
  filter:blur(10px);pointer-events:none;
}
.telon-brasa-a{top:-24vmax;left:-16vmax;animation:brasa-a 16s ease-in-out infinite alternate}
.telon-brasa-b{bottom:-28vmax;right:-18vmax;animation:brasa-b 19s ease-in-out infinite alternate}
@keyframes brasa-a{to{transform:translate(9vmax,7vmax) scale(1.15)}}
@keyframes brasa-b{to{transform:translate(-8vmax,-6vmax) scale(1.1)}}

.telon-caja{position:relative;width:100%;max-width:440px;margin:0 auto;text-align:center}

/* La marca: logo del cliente o su inicial — nunca un hueco. El anillo cónico
   gira lento alrededor, como una hornilla encendida. */
.telon-marca{
  position:relative;width:118px;height:118px;margin:0 auto 22px;
  display:grid;place-items:center;
}
.telon-anillo{
  position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg, var(--acento), transparent 28%, transparent 72%, var(--acento));
  -webkit-mask:radial-gradient(closest-side, transparent 82%, #000 83%);
          mask:radial-gradient(closest-side, transparent 82%, #000 83%);
  animation:anillo-gira 3.2s linear infinite;
}
@keyframes anillo-gira{to{transform:rotate(360deg)}}
.telon-logo{
  width:96px;height:96px;object-fit:contain;border-radius:50%;
  background:var(--sup);padding:10px;
}
.telon-mono{
  width:96px;height:96px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(150deg, var(--acento), var(--acento-osc,var(--acento)));
  color:var(--acento-txt);font-family:var(--f-titulo);font-size:44px;font-weight:800;
}

.telon-nombre{
  display:block;font-size:12px;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;color:var(--tenue);margin-bottom:10px;
}
.telon h2{
  font-family:var(--f-titulo);font-size:clamp(28px,7.4vw,40px);line-height:1.08;
  letter-spacing:var(--ls,-.02em);text-transform:var(--tt,none);margin-bottom:12px;
  text-wrap:balance;
}
/* La frase que rota: cambia cada ~3 s con un fundido que sube */
.telon-rota{
  color:var(--acento-leible,var(--acento));font-weight:700;font-size:16.5px;
  min-height:1.5em;margin-bottom:8px;
  transition:opacity .35s var(--ease-salida), transform .35s var(--ease-salida);
}
.telon-rota.saliendo{opacity:0;transform:translateY(-7px)}
.telon-detalle{color:var(--tenue);font-size:14.5px;line-height:1.6;margin-bottom:26px}
.telon .btn{min-height:48px}
.telon.oculto{display:none}

/* Entrada escalonada: la pantalla se ARMA, no aparece de golpe */
@keyframes telon-sube{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.telon-marca{animation:telon-sube .5s var(--ease-salida) backwards}
.telon-nombre{animation:telon-sube .5s var(--ease-salida) .08s backwards}
.telon h2{animation:telon-sube .5s var(--ease-salida) .15s backwards}
.telon-rota{animation:telon-sube .5s var(--ease-salida) .22s backwards}
.telon-detalle,.telon .btn{animation:telon-sube .5s var(--ease-salida) .3s backwards}

@media (prefers-reduced-motion:reduce){
  .telon-brasa,.telon-anillo,.telon-marca,.telon-nombre,.telon h2,
  .telon-rota,.telon-detalle,.telon .btn{animation:none}
}

/* ───────── La portada de categorías ─────────
   Cuadritos como el lanzador del panel: icono, nombre y cuántos productos.
   Centrados, y en columnas según quepa — celular 2, tablet 3, escritorio los
   que entren. */
/* La PORTADA: al entrar solo se ve esto — la marca arriba, los cuadritos en
   el centro y un pie abajo. Estilo app. La carta completa sigue debajo: tocar
   un cuadrito baja directo a su categoría. */
.portada{
  min-height:calc(100dvh - var(--alto-cabeza, 210px));
  display:flex;flex-direction:column;
}
.portada-centro{
  flex:1;display:grid;place-items:center;width:100%;padding:12px 20px;
}
/* ── LAS BANDAS ──
   Nada de cuadritos tímidos: cada categoría es una BANDA horizontal de borde a
   borde, con su plato asomando en grande, el nombre con peso de cartel y una
   flecha que invita. Pensadas para verse con fuerza también en una pantalla
   capacitiva en la puerta del negocio. La foto respira (un zoom lentísimo) y
   entran escalonadas. */
.cat-losas{
  display:flex;flex-direction:column;gap:14px;
  width:100%;max-width:820px;margin:0 auto;
}
.cat-losa{
  position:relative;overflow:hidden;cursor:pointer;font-family:inherit;
  display:flex;align-items:center;gap:18px;text-align:left;
  width:100%;min-height:clamp(104px,17dvh,170px);padding:20px 24px;
  color:var(--texto);border:0;border-radius:var(--radio,18px);
  background:var(--sup);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--acento) 22%, transparent),
             var(--card-sombra,none);
  transition:transform .14s var(--ease-salida),box-shadow .2s ease;
}
.cat-losa:active{transform:scale(.98)}
@media (hover:hover) and (pointer:fine){
  .cat-losa:hover{box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--acento) 60%, transparent),
                  var(--card-sombra,none)}
  .cat-losa:hover .cl-flecha{transform:translateX(6px)}
}

/* La foto: presencia de verdad, no marca de agua. Respira con un zoom de 14 s. */
.cat-losa.con-foto::before{
  content:"";position:absolute;inset:0;
  background-image:var(--losa-foto);background-size:cover;background-position:center right;
  opacity:.5;
  animation:losa-respira 14s ease-in-out infinite alternate;
}
@keyframes losa-respira{from{transform:scale(1)}to{transform:scale(1.12)}}
/* El velo que garantiza leer el nombre: nace del color de la superficie a la
   izquierda y se disuelve hacia la foto. */
.cat-losa.con-foto::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--sup) 96%, transparent) 22%,
    color-mix(in srgb, var(--sup) 55%, transparent) 55%,
    color-mix(in srgb, var(--acento) 12%, transparent) 100%);
}
.cat-losa > *{position:relative;z-index:1}

.cl-ico{display:grid;place-items:center;color:var(--acento-leible,var(--acento));flex:none}
.cl-ico svg{width:34px;height:34px}
.cl-txt{flex:1;min-width:0}
.cat-losa b{
  display:block;font-family:var(--f-titulo);font-size:clamp(20px,4.6vw,28px);
  letter-spacing:var(--ls,0);text-transform:var(--tt,none);line-height:1.1;
}
.cl-n{font-size:13px;color:var(--tenue);margin-top:3px;display:block}
.cl-flecha{
  flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:var(--acento);color:var(--acento-txt);
  box-shadow:0 8px 20px -8px var(--acento);
  transition:transform .2s var(--ease-salida);
}
.cl-flecha svg{width:19px;height:19px}

/* Entrada: una tras otra, como abriéndose el telón */
@keyframes losa-entra{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.cat-losa{animation:losa-entra .45s var(--ease-salida) backwards}
.cat-losa:nth-child(2){animation-delay:.09s}
.cat-losa:nth-child(3){animation-delay:.18s}
.cat-losa:nth-child(4){animation-delay:.27s}
.cat-losa:nth-child(5){animation-delay:.36s}

/* De borde a borde en el teléfono y el quiosco: la banda ES la pantalla */
@media (max-width:640px){
  .cat-losas{width:100vw;max-width:none;margin-left:calc(50% - 50vw);gap:10px}
  .cat-losa{border-radius:0;padding:18px 20px}
}
@media (prefers-reduced-motion:reduce){
  .cat-losa,.cat-losa.con-foto::before{animation:none}
}

/* El pie de la portada: datos mínimos y aire para la barra del teléfono —
   env(safe-area-inset-bottom) es lo que evita que el gesto de atrás o la
   barra de dirección de Safari se lo coman. */
.portada-pie{
  display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;
  padding:16px 20px calc(18px + env(safe-area-inset-bottom));
  color:var(--tenue);font-size:13px;
}
.portada-pie a{color:var(--acento-leible,var(--acento));font-weight:700;text-decoration:none}
.pp-marca{opacity:.6}
/* UN solo material por losa: un degradado que nace del color de la marca y se
   funde con la superficie. El icono va DESNUDO encima — nada de icono en un
   recuadro dentro de otro recuadro: tres cajas anidadas se leen como interfaz
   armada, una superficie con degradado se lee como diseño. */
.cat-losa{
  display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:22px 14px 18px;cursor:pointer;font-family:inherit;text-align:center;
  color:var(--texto);border:0;border-radius:var(--radio,18px);
  background:
    linear-gradient(165deg,
      color-mix(in srgb, var(--acento) 20%, var(--sup)) 0%,
      color-mix(in srgb, var(--acento) 6%, var(--sup)) 55%,
      var(--sup) 100%);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--acento) 22%, transparent),
             var(--card-sombra,none);
  transition:transform .12s var(--ease-salida),box-shadow .2s ease;
}
.cat-losa:active{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){
  .cat-losa:hover{box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--acento) 55%, transparent),
                  var(--card-sombra,none)}
}
.cl-ico{display:grid;place-items:center;color:var(--acento-leible,var(--acento));margin-bottom:2px}
.cl-ico svg{width:30px;height:30px}
.cat-losa b{font-family:var(--f-titulo);font-size:16px;letter-spacing:var(--ls,0);
  text-transform:var(--tt,none);line-height:1.2}
.cl-n{font-size:12px;color:var(--tenue)}

/* ───────── La foto grande del detalle ───────── */
/* La foto del detalle: A SANGRE — de borde a borde y pegada al techo del
   popup, como la portada de una app de comida. El truco no son márgenes
   adivinados: cuando el modal trae foto, ÉL cede su padding superior
   (:has), y la foto solo compensa los 20px laterales exactos del modal.
   En navegadores sin :has, cae a foto con margen — se ve bien igual. */
.mp-foto{
  width:100%;display:block;margin:0 auto 16px;
  aspect-ratio:16/10;object-fit:cover;object-position:center;
  border-radius:16px;cursor:zoom-in;
}
.modal.con-foto,
.modal:has(.mp-foto){padding-top:0}
.modal.con-foto .mp-foto,
.modal:has(.mp-foto) .mp-foto{
  width:calc(100% + 40px);max-width:none;
  margin:0 -20px 18px;
  border-radius:26px 26px 0 0;
}
/* En pantalla grande el modal tiene 28px de padding y esquinas de 24 */
@media (min-width:640px){
  .modal.con-foto .mp-foto,
  .modal:has(.mp-foto) .mp-foto{
    width:calc(100% + 56px);margin:0 -28px 18px;border-radius:24px 24px 0 0;
  }
}
/* La X respira sobre la foto cuando esta llega al techo */


/* ───────── Lightbox ───────── */
.lightbox{
  position:fixed;inset:0;z-index:300;display:grid;place-items:center;
  background:rgba(5,5,7,.93);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  padding:16px;
}
.lightbox img{
  max-width:100%;max-height:92dvh;border-radius:14px;display:block;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.8);
}
.lb-cerrar{
  position:absolute;top:calc(14px + env(safe-area-inset-top));right:16px;
  width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.14);color:#fff;font-size:18px;
  display:grid;place-items:center;backdrop-filter:blur(6px);
}
.prod-foto{cursor:zoom-in}

/* ───────── El popup de promoción ───────── */
.promo-velo{
  position:fixed;inset:0;z-index:260;display:grid;place-items:center;
  background:rgba(5,5,7,.7);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  padding:20px;
}
.promo-caja{
  position:relative;width:min(420px,100%);overflow:hidden;
  background:var(--sup);color:var(--texto);
  border-radius:var(--radio,20px);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.75);
  animation:promo-entra .38s var(--ease-salida) backwards;
}
@keyframes promo-entra{from{opacity:0;transform:translateY(18px) scale(.97)}}
.promo-medio{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:#000}
.promo-x{
  position:absolute;top:10px;right:10px;z-index:2;
  width:38px;height:38px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(10,10,12,.55);color:#fff;font-size:15px;
  display:grid;place-items:center;backdrop-filter:blur(6px);
}
.promo-txt{padding:18px 20px 20px}
.promo-txt h3{font-family:var(--f-titulo);font-size:22px;line-height:1.15;
  letter-spacing:var(--ls,-.01em);text-transform:var(--tt,none)}
.promo-txt p{color:var(--tenue);font-size:14.5px;line-height:1.5;margin-top:7px}
.promo-pie{display:flex;align-items:center;gap:14px;margin-top:16px}
.promo-precio{
  font-family:var(--f-titulo);font-size:21px;font-weight:800;
  color:var(--acento-leible,var(--acento));font-variant-numeric:tabular-nums;
}
.promo-ir{flex:1;min-height:48px}
@media (prefers-reduced-motion:reduce){ .promo-caja{animation:none} }

/* Cerrado = vitrina: los botones de agregar no existen y el carrito tampoco.
   Chismosear es mirar; pedir vuelve cuando enciendan (y la página se recarga
   sola en ese momento). */
body.cerrada .prod-mas,
body.cerrada .carrito-btn,
body.cerrada .lo-de-siempre{display:none!important}


/* El pie al final de la carta completa */
.carta-pie{border-top:1px solid var(--borde);margin-top:44px}

/* ───────── Navegación estilo app ─────────
   Al entrar: SOLO la portada (marca arriba, losas al centro, pie abajo).
   Al elegir: SOLO esa categoría, con la barra de chips para saltar y el chip ←
   para volver. El botón atrás del teléfono también devuelve (history). */
body.en-portada .cats-envoltura,
body.en-portada .seccion,
body.en-portada .carta-pie{display:none}

/* ── La portada es UNA pantalla, exacta ──
   Columna de 100dvh: cabecera arriba, las bandas se REPARTEN el espacio que
   sobra, y el pie cierra abajo. Cero scroll de página: si el negocio tuviera
   ocho categorías, se deslizan las bandas por dentro — la pantalla no escurre.
   Es lo que separa una portada de app de una página que sigue de largo. */
body.en-portada{
  height:100dvh;overflow:hidden;padding-bottom:0;
  display:flex;flex-direction:column;
}
body.en-portada .pub-cabeza{flex:none;padding-bottom:10px}
body.en-portada .pub-cabeza .envoltura{padding-top:20px}
body.en-portada .corona{height:64px}
body.en-portada .pub-marca{margin-bottom:10px}
body.en-portada .pub-desc{margin-top:4px}
body.en-portada .pub-datos{display:none}   /* en la portada manda lo esencial */
body.en-portada .estado-linea{margin-top:12px}

body.en-portada .portada{flex:1;min-height:0;display:flex;flex-direction:column}
body.en-portada .portada-centro{
  flex:1;min-height:0;display:flex;padding:10px 20px;
  overflow-y:auto;                     /* muchas categorías: se deslizan ELLAS */
}
body.en-portada .cat-losas{flex:1;min-height:0}
body.en-portada .cat-losa{flex:1;min-height:96px}
body.en-portada .portada-pie{flex:none;padding-top:10px}

body.en-categoria .portada{display:none}
body.en-categoria .seccion{display:none}
body.en-categoria .seccion.activa{display:block;padding-top:20px}

.cat-volver{padding:11px 14px;background:var(--sup2)}
.cat-volver .cat-ico{color:var(--texto)}
.cat-volver .cat-ico svg{width:18px;height:18px}

/* ───────── La foto detrás de la losa ─────────
   El primer plato de la categoría asoma al fondo, apenas: presencia, no
   protagonismo — el degradado de la marca sigue mandando encima. */
.cat-losa{position:relative;overflow:hidden}
.cat-losa.con-foto::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background-image:var(--losa-foto);background-size:cover;background-position:center;
  opacity:.16;
}
.cat-losa.con-foto::after{ /* el degradado de la marca se reafirma sobre la foto */
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(165deg,
    color-mix(in srgb, var(--acento) 14%, transparent),
    color-mix(in srgb, var(--sup) 55%, transparent) 78%);
}
.cat-losa > *{position:relative;z-index:1}

/* La X del popup: ABSOLUTA sobre la esquina, fuera del flujo.
   La versión anterior (sticky + float) reservaba un renglón antes de la foto
   en WebKit y la imagen quedaba despegada del techo — el "como con un scroll"
   que se veía en iPhone. Absoluta no ocupa nada: la foto ES el primer
   elemento y pega arriba sí o sí. En una lista larga la X se va con el
   scroll, como en cualquier app de comida. */
.modal{position:relative}
.modal-x{
  position:absolute;top:12px;right:12px;z-index:6;
  width:38px;height:38px;
  border:0;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;
  background:rgba(10,10,12,.55);color:#fff;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:transform .14s var(--ease-salida);
}
.modal-x:active{transform:scale(.9)}
.modal-x svg{width:16px;height:16px}
body.clara .modal-x{background:rgba(20,20,24,.45)}

/* El contador del carrito da un brinquito cada vez que entra algo: la
   confirmación viaja hasta donde está el total, no solo en la tarjeta. */
@keyframes cesta-pop{0%{transform:scale(1)}45%{transform:scale(1.35)}100%{transform:scale(1)}}
.carrito-btn .n.pop{animation:cesta-pop .4s var(--ease-salida)}

/* Al entrar a una categoría, sus productos entran en cascada — 40 ms entre
   tarjetas, como las listas de las apps de comida. Solo las primeras ocho. */
body.en-categoria .seccion.activa .prod{animation:losa-entra .34s var(--ease-salida) backwards}
body.en-categoria .seccion.activa .prod:nth-child(2){animation-delay:40ms}
body.en-categoria .seccion.activa .prod:nth-child(3){animation-delay:80ms}
body.en-categoria .seccion.activa .prod:nth-child(4){animation-delay:120ms}
body.en-categoria .seccion.activa .prod:nth-child(5){animation-delay:160ms}
body.en-categoria .seccion.activa .prod:nth-child(6){animation-delay:200ms}
body.en-categoria .seccion.activa .prod:nth-child(7){animation-delay:240ms}
body.en-categoria .seccion.activa .prod:nth-child(8){animation-delay:280ms}
@media (prefers-reduced-motion:reduce){
  body.en-categoria .seccion.activa .prod,.carrito-btn .n.pop{animation:none}
}

/* ───────── Lo que le faltaba a la tarjeta ─────────
   El sello del dueño, los tamaños reales y el "Desde" honesto. Información
   que vende, no adorno: era el vacío que se sentía entre el título y el
   precio. */
.prod-reco{
  display:inline-flex;align-items:center;gap:5px;margin-bottom:6px;
  font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--acento-leible,var(--acento));
}
.prod-reco svg{width:13px;height:13px;flex:none}
.prod-vars{
  display:inline-block;margin-top:7px;padding:4px 10px;border-radius:999px;
  font-size:12px;font-weight:650;color:var(--tenue);
  background:color-mix(in srgb, var(--acento) 9%, var(--sup2));
}
.prod-precio .desde{
  font-size:12px;font-weight:650;color:var(--tenue);
  text-transform:uppercase;letter-spacing:.05em;
}

/* La bolsa del botón de pedido */
.carrito-btn .cb-ico{display:grid;place-items:center;flex:none}
.carrito-btn .cb-ico svg{width:20px;height:20px}