:root{
  --accion:#37C75B;   /* el boton de agregar, medido de la referencia */
  --red:#000000;
  --bg:#ffffff;
  --ink:#000000;
  --mut:#575757;
  --line:#e0e0e0;

  --ancho:560px;      /* tope solo para tablet/escritorio: en telefono el
                         contenido va a ancho completo y se alinea con la
                         barra de categorias, que nunca estuvo topada */
  --gut:16px;         /* un solo margen lateral para toda la maqueta */
  --vw:min(1vw,17px);          /* congela la escala en pantallas gigantes */
  --pad:calc(4.021 * var(--vw));   /* margen lateral de la maqueta */
  --sepbg:#000000;                 /* fondo del separador */
  --bar:calc(11.6 * var(--vw));
  --disp:"Hoolister","Arial Narrow",Arial,sans-serif;
  --txt:Arial,Helvetica,sans-serif;
  --ui:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* Fondo de la pagina: negro fijo, como al principio. Probe dos veces a
   pintarlo del color del pie y las dos veces aparecio una linea de ese
   color en los bordes (los visores que escalan la pagina y la franja de
   la barra de desplazamiento dejan ver un pixel de fondo). Negro no se
   nota junto al hero oscuro. Lo que dejaba ver fondo debajo del pie era
   el hueco reservado para la barra del carrito, y ese ya no existe. */
html{background:#000}
body{background:#000;color:var(--ink);font-family:var(--txt);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,video{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit}
.page{width:100%;padding-bottom:0;transition:padding-bottom .3s}
/* La barra del carrito se queda visible tambien sobre el pie, asi que al
   final se reserva su alto: sin esto taparia lo ultimo del pie (el sello de
   MESA). El hueco toma el fondo de la pagina, que aqui es el rojo del pie,
   asi que no se ve como franja. */
.page.concarrito{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}

/* --- glifos que la versión demo de la fuente no trae --- */
.ap{display:inline-block;width:.115em;height:.30em;background:currentColor;
  border-radius:.055em;vertical-align:.42em;margin:0 .055em}
.amp{font-family:"Oswald","Arial Narrow",sans-serif;font-weight:600;
  font-size:.92em;margin:0 .04em}

/* ================= CARGA ================= */
/* fondo blanco, marca en negro. Sin parpadeo: entra una vez y se queda
   quieta, que es lo que hace que se lea como pausa y no como espera. */
.boot{position:fixed;inset:0;z-index:200;background:var(--bg);display:grid;place-items:center;
  transition:opacity .45s cubic-bezier(.4,0,.2,1),visibility .45s}
.boot.off{opacity:0;visibility:hidden;pointer-events:none}
.bootlogo{position:relative;width:min(46%,330px);max-height:38vh;color:var(--ink);
  display:grid;place-items:center}
.bootlogo svg{width:100%;height:auto;max-height:38vh;display:block}
/* maquina de escribir: las letras entran una a una (el JS las enciende).
   Sin JS, el logo sale entero. */
.bootlogo.tecleando svg path{opacity:0}
.bootlogo svg path.on{opacity:1;transition:opacity 60ms linear}
html.loading,html.loading body{overflow:hidden}

/* ---------------- despliegue del pedido ----------------
   No hay pantalla de espera: el carrito ya esta listo cuando llega, asi que
   lo unico que hace falta es que se vea llegar. Dos capas:
   1) la transicion entre paginas (View Transitions), que borra el parpadeo
      blanco del cambio de documento;
   2) el despliegue interno, cada tarjeta subiendo 10 px en cascada.
   Donde no hay View Transitions el punto 2 funciona igual. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:saleVista .16s ease both}
::view-transition-new(root){animation:entraVista .3s cubic-bezier(.2,.8,.3,1) both}
@keyframes saleVista{to{opacity:0}}
@keyframes entraVista{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

@keyframes despliega{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* display:none corta la animacion y la reinicia cuando la pantalla se muestra,
   asi que este mismo bloque sirve para las tres pantallas sin repetir reglas. */
.pantalla .phead,
.pantalla .pwrap > *{animation:despliega .40s cubic-bezier(.2,.8,.3,1) both}
.pantalla .phead{animation-duration:.32s}
.pantalla .pwrap > *:nth-child(1){animation-delay:.05s}
.pantalla .pwrap > *:nth-child(2){animation-delay:.11s}
.pantalla .pwrap > *:nth-child(3){animation-delay:.17s}
.pantalla .pwrap > *:nth-child(4){animation-delay:.23s}
.pantalla .pwrap > *:nth-child(5){animation-delay:.29s}
.pantalla .pwrap > *:nth-child(n+6){animation-delay:.35s}
@media(prefers-reduced-motion:reduce){
  .pantalla .phead,.pantalla .pwrap > *{animation:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* ================= HERO ================= */
.hero{position:sticky;top:0;z-index:0;width:100%;height:100vh;height:100lvh;background:#000000;overflow:hidden}
.capas{position:relative;z-index:1;background:var(--bg)}
.hero video,.hero img{width:100%;height:100%;object-fit:cover}
.hero .med{position:absolute;inset:0;transform:scale(1.01)}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.62) 0,rgba(0,0,0,.12) 34%,rgba(0,0,0,0) 55%,rgba(0,0,0,.45) 100%)}
/* cabecera fija: sobre el hero va grande, blanca y sin fondo; al pasar el
   hero se encoge, se pone negra y se apoya en un vidrio esmerilado.
   Vive fuera del .hero para que ni su overflow ni su sticky la arrastren. */
.lock{position:fixed;z-index:50;top:0;left:0;right:0;
  padding:var(--pad) var(--pad) 11px calc(var(--pad) - 2.45px);
  color:var(--bg);pointer-events:none;
  filter:drop-shadow(0 calc(.3 * var(--vw)) calc(1.4 * var(--vw)) rgba(0,0,0,.42));
  transition:color .3s ease,background-color .3s ease,filter .3s ease}
/* El logotipo va INCRUSTADO, no como mascara ni como <img>.

   Lo intente con mask-image para tener un solo archivo recoloreable. En
   Chromium se veia bien; en el telefono no se veia NADA. Cuando una
   imagen de mascara no carga, la norma dice que el elemento queda
   transparente del todo: el fallo no se ve como un error, se ve como si
   el logo no existiera. Demasiado fragil para lo primero que mira el
   cliente.

   Incrustado no depende de que cargue nada, y fill:currentColor le da el
   mismo truco del color: claro sobre el hero, oscuro sobre la cabecera.
   El SVG lo mete nuevo-cliente.py desde logo.svg, asi que sigue habiendo
   un solo archivo de logo por cliente. */
.wm{display:block}
.wm svg{width:100%;height:auto;display:block;fill:currentColor}
/* El logo se agranda y se achica con transform, no cambiando su ancho ni
   el relleno de la cabecera. Cambiar el ancho obliga al navegador a
   recalcular la maqueta en cada cuadro de la animacion (y la barra de
   categorias, que se pega debajo, saltaba con cada medida). transform lo
   hace la tarjeta grafica sola: va fluido incluso en un telefono viejo.
   En maqueta el logo mide siempre lo de la cabecera solida (27 %); sobre
   el hero se ve 1.741 veces mas grande = 47 %, como antes. */
.lock .wm{width:27%;transform-origin:0 0;transform:scale(1.741);
  transition:transform .42s cubic-bezier(.22,.8,.24,1)}
.lock.solido .wm{transform:translate(calc(21px - var(--pad)),calc(20px - var(--pad)))}   /* aire para la pastilla contra el borde */
/* Pastilla blanca detras del logo chico: con ella el logo rojo se lee sobre
   cualquier cosa (fotos rojas, el pie, texto). Va en un ::before que solo
   aparece con opacidad, asi no cambia medidas ni mueve nada al encogerse. */
.lock .wm{position:relative;isolation:isolate}
.lock .wm::before{content:"";position:absolute;inset:-8px -7.3px -8px -6.6px;z-index:-1;
  background:var(--bg);border-radius:0;box-shadow:0 4px 16px rgba(0,0,0,.14);
  opacity:0;transition:opacity .3s ease}
.lock.solido .wm::before{opacity:1}
/* al medir el alto real hay que congelar tambien la transicion del logo:
   si no, se mide un cuadro a medio camino y la barra queda despegada */
.lock.midiendo,.lock.midiendo .wm{transition:none!important}

/* Cabecera transparente: solo el logo. Grande y blanco sobre el hero;
   al encogerse pasa al rojo de la marca. El color cambia junto con el
   tamano, en la misma transicion. pointer-events:none deja tocar lo de abajo. */
.lock,.lock.solido{background:none;box-shadow:none;pointer-events:none}
.lock{color:#fff}
.lock.solido{color:var(--red);filter:none}
@media(prefers-reduced-motion:reduce){.lock,.lock .wm{transition:none}}

/* ================= SEPARADOR ================= */
.sep{width:100%;display:block;line-height:0;font-size:0;background:var(--sepbg)}

/* ================= BARRA DE SECCI&#211;N ================= */
/* medidas tomadas de la maqueta: barra 12.309% del ancho de pagina */
.bar{background:var(--red);color:var(--bg);display:flex;align-items:flex-start;
  gap:0;padding:0 calc(6.199 * var(--vw));
  height:calc(12.309 * var(--vw));position:sticky;top:0;z-index:30}

/* lockup vectorial: mascota + titulo en la tipografia real */

/* ================= ZONA DE COBERTURA ================= */

/* titulo de opiniones: misma familia y mismo truco de trazo que los
   titulos de categoria, para que los dos pesen igual en pantalla */
.revs-tit{margin:0 auto;text-align:center;max-width:var(--ancho);margin-left:auto;margin-right:auto;
  padding:clamp(26px,8.85vw,34.5px) max(18px,var(--pad)) 0;
  font-family:"NHaas",-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-weight:600;font-size:clamp(24px,7.2vw,28px);letter-spacing:-.03em;line-height:1.05;
  color:var(--ink);-webkit-text-stroke:.043em currentColor;text-wrap:balance}

/* ================= FOOTER ================= */
.foot{background:var(--red);color:var(--bg);display:block;
  padding:clamp(20px,5vw,32px) 0 clamp(26px,6.4vw,40px);overflow:hidden}

/* la marca a sangre, como en la referencia */
.foot .marca{padding:0 var(--gut);max-width:var(--ancho);margin-left:auto;margin-right:auto;}
.foot .marca .wm{width:100%}

.foot .cuerpo{padding:0 var(--gut);max-width:var(--ancho);margin-left:auto;margin-right:auto;display:flex;flex-direction:column;
  gap:clamp(44px,14vw,62px);margin-top:clamp(34px,10.2vw,50px)}

.foot h3{margin:0 0 clamp(13px,3.2vw,17px);font-family:var(--ui);font-weight:600;
  font-size:clamp(14px,3.9vw,15.5px);line-height:1.25;letter-spacing:-.014em;color:var(--bg)}
.foot p{margin:0;font-family:var(--ui);font-weight:400;
  font-size:clamp(12.5px,3.3vw,13px);line-height:1.45;letter-spacing:-.008em;
  color:rgba(255,255,255,.72);max-width:34ch}

/* abierto / cerrado, calculado con el horario real */
.estado{display:inline-flex;align-items:center;gap:8px;margin-bottom:clamp(10px,2.6vw,14px);
  font-family:var(--ui);font-weight:600;font-size:clamp(11.5px,3vw,13px);
  letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.estado .pt{width:8px;height:8px;border-radius:50%;background:#8a8a8a;flex:none}
.estado.abierto{color:var(--bg)}
.estado.abierto .pt{background:#5fb87c;box-shadow:0 0 0 4px rgba(95,184,124,.18)}

/* ---------- comunidad ----------
   Va pegado al logotipo y separado de las columnas: es lo primero que se
   lee al llegar al pie, no una linea mas de la lista de enlaces. */
.comunidad{max-width:36ch}
/* en la referencia el titulo de comunidad es ~1.35 veces el de las
   columnas, y su parrafo es mayor que el resto del pie: es el unico
   bloque del pie que pide que lo lean, no que lo ojeen */
.comunidad h3{margin-bottom:clamp(20px,6.4vw,28px);
  font-size:clamp(17px,4.8vw,19.5px);letter-spacing:-.02em}

.cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,4.6vw,34px);align-items:start}
.cols ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(11px,2.8vw,14px)}
.cols li{font-family:var(--ui);font-weight:400;font-size:clamp(12.5px,3.3vw,13px);
  line-height:1.3;letter-spacing:-.008em;color:rgba(255,255,255,.72)}
.cols a{color:inherit;text-decoration:none;transition:color .2s}
.cols a:hover{color:var(--bg)}
.cols .dato{line-height:1.45}

.social{display:flex;gap:clamp(24px,6.4vw,32px);justify-content:center;align-items:center}
.social a{display:grid;place-items:center;color:var(--bg);
  width:clamp(28px,7.2vw,34px);height:clamp(28px,7.2vw,34px);
  -webkit-tap-highlight-color:transparent}
.social a svg{width:100%;height:auto;display:block}

/* la linea no separa los legales del resto del pie, sino el copyright de
   los legales: abajo del todo, como en la referencia */
.legal{display:flex;flex-direction:column;align-items:center;
  gap:clamp(22px,6.4vw,30px);text-align:center;
  margin-top:clamp(8px,3.8vw,18px)}
.legal .links{display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(12px,3.4vw,22px) clamp(14px,3.8vw,24px)}
.legal a{font-family:var(--ui);font-weight:400;font-size:clamp(12px,3.2vw,13.5px);
  letter-spacing:-.006em;color:rgba(255,255,255,.72);text-decoration:none}
.legal a:hover{color:var(--bg)}

/* el credito de quien hizo la pagina va debajo del copyright y mas
   apagado que el: es informacion de tercer orden, no publicidad */
/* el sello de MESA cierra la pagina: sin copyright encima, con una raya
   que cruza la pantalla de lado a lado (sale del margen con el truco de
   50% - 50vw; el pie ya recorta lo que sobre) y el sello a tamano
   mediano, pintado con el color del texto del pie */
.legal .mesa{display:block;align-self:stretch;line-height:0;
  margin:clamp(6px,2vw,10px) calc(50% - 50vw) 0;
  padding:clamp(22px,6vw,28px) 0 clamp(4px,1.4vw,8px);
  border-top:1px solid rgba(255,255,255,.2);
  color:rgba(255,255,255,.8)}
.legal .mesa svg{display:block;height:clamp(11px,3vw,12px);width:auto;margin:0 auto}
.legal .mesa a{display:inline-block;color:inherit;transition:color .2s}
.legal .mesa a:hover{color:var(--bg)}

/* ================= INDICE FLOTANTE =================
   Barra flotante retirada. Se recrea aparte. */
[id="inicio"],[id="menu"],[id="opiniones"]{scroll-margin-top:calc(var(--cab,45px) + 12px)}

/* ================= PAGINA DEL PEDIDO ================= */
/* la Display es otra familia, no otro peso de la Text Round */

body.pedido{
  --nh:"NHaas",-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --caja:#ffffff;         /* fondo de las tarjetas */
  --linea:#000000;        /* borde de lo seleccionado */
  --suave:#ffffff;        /* fondo de la pagina: un solo blanco, sin dos tonos */
  --gris:#8a8a8a;
  --borde:#e6e6e6;
  background:var(--suave);color:var(--ink);
  font-family:var(--nh);-webkit-font-smoothing:antialiased;
  margin:0;padding:0 0 calc(88px + env(safe-area-inset-bottom,0px))}
body.pedido *{font-family:var(--nh)}

/* ---------- cabecera fija ---------- */
.phead{position:sticky;top:0;z-index:20;background:var(--suave);
  display:flex;align-items:center;gap:9px;
  padding:calc(env(safe-area-inset-top,0px) + 20px) 18px 18px}
/* el margen negativo hace que la punta de la flecha caiga en la misma linea
   de 18px donde empiezan las tarjetas */
.phead .atras{width:30px;height:30px;margin-left:-11.8px;flex:none;display:grid;place-items:center;
  color:var(--ink);text-decoration:none;-webkit-tap-highlight-color:transparent}
.phead .atras svg{width:19px;height:19px;display:block}
/* mismo tamano y misma altura de linea en los dos: asi las bases coinciden
   exactas, sin depender de las metricas de la tipografia */
.phead h1{margin:0;font-weight:600;font-size:17px;line-height:1;letter-spacing:-.018em;flex:1}
.phead .tot{margin:0;padding:0;border:0;font-weight:600;font-size:17px;line-height:1;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- envoltura ---------- */
.pwrap{padding:0 var(--gut);display:flex;flex-direction:column;gap:18px;max-width:var(--ancho);margin:0 auto}
.ptit{margin:6px 0 0;font-weight:600;font-size:18.5px;letter-spacing:-.022em}

/* ---------- tarjetas ---------- */
/* con la pagina y la tarjeta del mismo blanco, lo que separa los bloques
   es un filete, no un cambio de tono */
.tarj{background:var(--caja);border:1px solid rgba(0,0,0,.11);
  border-radius:17px;padding:15px}
.rot{display:flex;align-items:center;gap:9px;margin-bottom:14px}
.rot svg{width:19px;height:19px;flex:none;color:var(--ink)}
.rot h2{margin:0;font-weight:600;font-size:15px;letter-spacing:-.014em}

/* ---------- lineas de producto ---------- */
.ln{display:block;padding:0 0 14px;margin-bottom:14px;border-bottom:1px solid var(--borde)}
.ln:last-of-type{border-bottom:0;margin-bottom:0;padding-bottom:0}
.ln .fila1{display:flex;align-items:flex-start;gap:12px}
.ln .nm{font-weight:600;font-size:13px;letter-spacing:.004em;line-height:1.3;
  flex:1}
.ln .pu{font-weight:600;font-size:13px;letter-spacing:-.008em;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.ln .ds{margin:4px 0 0;font-weight:400;font-size:11.5px;line-height:1.35;
  letter-spacing:-.002em;color:var(--gris)}
.ln .acc{display:flex;align-items:center;gap:13px;margin-top:12px}
.qty{display:flex;align-items:center;gap:10px}
.qty button{width:26px;height:26px;border-radius:999px;border:1px solid var(--borde);
  background:transparent;color:var(--ink);font-size:15px;line-height:1;cursor:pointer;
  display:grid;place-items:center;padding:0;-webkit-tap-highlight-color:transparent;
  transition:background .15s}
.qty button:active{background:rgba(0,0,0,.05)}
.qty span{min-width:13px;text-align:center;font-weight:600;font-size:13px;
  font-variant-numeric:tabular-nums}
.quitar{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;
  color:var(--ink);font-weight:600;font-size:12px;letter-spacing:-.004em;cursor:pointer;
  padding:0;-webkit-tap-highlight-color:transparent}
.quitar svg{width:14px;height:14px}
.vacio{margin:0;padding:6px 0 2px;color:var(--gris);font-size:13px;letter-spacing:-.006em}

/* ---------- opciones seleccionables ---------- */
.opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.op{position:relative;display:flex;flex-direction:column;justify-content:center;gap:4px;
  min-height:63px;padding:11px 37px 11px 13px;border:1px solid var(--borde);border-radius:13px;
  cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color .18s}
.op input{position:absolute;opacity:0;width:0;height:0}
.op b{font-weight:600;font-size:13px;letter-spacing:-.008em}
.op span{font-weight:400;font-size:11.5px;color:var(--gris);letter-spacing:-.002em}
.op .marca{position:absolute;right:12px;top:50%;transform:translateY(-50%);
  width:21px;height:21px;border-radius:999px;border:1.4px solid var(--ink);
  display:grid;place-items:center;transition:background .18s}
.op .marca svg{width:11px;height:11px;color:var(--caja);opacity:0;transition:opacity .18s}
.op:has(input:checked){border-color:var(--linea);border-width:1.4px;padding:10.6px 36.6px 10.6px 12.6px}
.op:has(input:checked) .marca{background:var(--ink)}
.op:has(input:checked) .marca svg{opacity:1}

/* ---------- cupon ---------- */
/* el margen de arriba despega el bloque de cantidad del ultimo producto */
.cupon{display:flex;align-items:center;gap:10px;padding:12px 13px;
  border:1.5px solid var(--ink);border-radius:13px;margin:18px 0 15px}
.cupon svg{width:19px;height:19px;flex:none}
.cupon input{flex:1;min-width:0;border:0;background:transparent;padding:0;
  font-size:13px;letter-spacing:-.006em;color:var(--ink);text-overflow:ellipsis}
.cupon input::placeholder{color:var(--gris)}
.cupon button{border:0;background:transparent;color:var(--ink);font-weight:600;
  font-size:12px;letter-spacing:.01em;cursor:pointer;padding:0;white-space:nowrap}
.cupon.puesto{border-width:2px;padding:11.5px 12.5px;margin:18px 0 15px}
.cupon .puesto-tx{flex:1;font-weight:600;font-size:13px;letter-spacing:-.006em}

/* ---------- totales ---------- */
.totales{border-top:1px solid var(--borde);padding-top:13px;display:flex;flex-direction:column;gap:7px}
.totales div{display:flex;justify-content:space-between;align-items:baseline;
  font-size:12.5px;letter-spacing:-.004em;color:var(--gris);font-variant-numeric:tabular-nums}
.totales div span:last-child{color:var(--ink)}
.totales .grande{margin-top:3px;font-weight:600;font-size:17px;letter-spacing:-.022em}
.totales .grande span{color:var(--ink)}

/* ---------- campos ---------- */
.campos{display:flex;flex-direction:column;gap:13px}
.campos input,.campos textarea{width:100%;border:1.5px solid var(--ink);border-radius:13px;
  background:transparent;padding:13px;color:var(--ink);font-size:13.5px;
  letter-spacing:-.006em;-webkit-appearance:none}
.campos textarea{min-height:66px;resize:vertical;line-height:1.35}
.campos input::placeholder,.campos textarea::placeholder{color:var(--gris)}
.campos input:focus,.campos textarea:focus{outline:0;border-color:var(--ink);border-width:2px;padding:12.5px}

/* ---------- llave Bre-B ---------- */
.breb{margin-top:13px;border:1px solid var(--borde);border-radius:14px;padding:14px;
  display:flex;flex-direction:column;gap:7px}
.breb .llave{font-weight:600;font-size:18px;letter-spacing:-.01em}
.breb .monto{font-size:12.5px;color:var(--gris);letter-spacing:-.002em}
.breb p{margin:0;font-size:12px;line-height:1.35;color:var(--gris)}
.breb .copiar{align-self:flex-start;margin-top:3px;border:1px solid var(--ink);border-radius:999px;
  background:transparent;color:var(--ink);font-weight:600;font-size:12.5px;letter-spacing:.01em;
  padding:8px 15px;cursor:pointer;-webkit-tap-highlight-color:transparent}

/* ---------- casilla ---------- */
/* centrado: es la ultima linea antes de pagar y va sola en su caja. A la
   izquierda quedaba desbalanceada contra el boton, que si esta centrado.
   El texto se limita en ancho para que las dos lineas queden parejas. */
/* ---------- aviso de tratamiento de datos ----------
   Chico y gris a proposito: tiene que estar y poder leerse, no competir
   con el boton. Centrado como el resto de lo que va suelto en la columna. */
.datos-aviso{margin:4px auto 0;max-width:38ch;text-align:center;
  font-size:11.5px;line-height:1.45;letter-spacing:-.002em;color:var(--gris)}
.datos-aviso a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* ---------- barra fija de pago ---------- */
.barrapago{position:fixed;left:0;right:0;bottom:0;z-index:40;
  padding:12px 18px calc(12px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(to top,var(--suave) 72%,rgba(250,246,238,0))}
.barrapago .caja{max-width:484px;margin:0 auto;display:flex;align-items:center;
  justify-content:space-between;gap:12px;
  /* el mismo verde de la bolita de agregar: el boton que cierra la
     compra es el mismo gesto que la abrio, y el verde ya significa
     "esto suma" en toda la carta */
  border:1.4px solid var(--accion);border-radius:16px;background:var(--accion);color:#fff;
  padding:14px 17px;cursor:pointer;width:100%;
  -webkit-tap-highlight-color:transparent;transition:transform .16s cubic-bezier(.2,.7,.3,1)}
.barrapago .caja:active{transform:scale(.985)}
.barrapago .caja:disabled{background:#e4e4e4;border-color:#e4e4e4;color:#9a9a9a;cursor:default}
.barrapago .plata{font-weight:600;font-size:16px;letter-spacing:-.022em;
  font-variant-numeric:tabular-nums}
/* en mayusculas el tracking negativo aprieta las letras hasta tocarse:
   con caja alta hay que abrirlo, no cerrarlo */
.barrapago .accion{font-weight:600;font-size:13.5px;letter-spacing:.055em;
  text-transform:uppercase}

/* ---------- aviso de cerrado ---------- */
.aviso{display:none;gap:11px;align-items:flex-start;border-radius:14px;
  background:var(--caja);border:1px solid rgba(0,0,0,.11);padding:14px}
.aviso.on{display:flex}
.aviso b{display:block;font-weight:600;font-size:14px;letter-spacing:-.008em;margin-bottom:3px}
.aviso span{font-size:12px;line-height:1.35;color:#6b6b6b}

/* ---------- pantallas ---------- */
.pantalla{display:none}
body.pedido.p-pedido .pantalla[data-p="pedido"],
body.pedido.p-listo  .pantalla[data-p="listo"],
body.pedido.p-buscar .pantalla[data-p="buscar"],
body.pedido.p-seguir .pantalla[data-p="seguir"]{display:block}
body.pedido.p-listo .barrapago,body.pedido.p-seguir .barrapago,
body.pedido.p-buscar .barrapago{display:none}
body.pedido.p-listo,body.pedido.p-seguir,body.pedido.p-buscar{padding-bottom:38px}

/* confirmado */
.exito{padding:4px 0 0;display:flex;flex-direction:column;gap:16px}
.sello{display:flex;flex-direction:column;align-items:center;gap:10px;
  background:var(--caja);border-radius:18px;padding:30px 18px}
.sello .tic{width:45px;height:45px;border-radius:999px;background:var(--ink);
  display:grid;place-items:center}
.sello .tic svg{width:23px;height:23px;color:var(--caja)}
.sello .rotulo{font-size:12.5px;color:var(--gris);letter-spacing:-.002em}
.sello .num{font-weight:600;font-size:37px;letter-spacing:-.03em;line-height:1;
  font-variant-numeric:tabular-nums}
.resumen{display:flex;flex-direction:column;gap:12px}
.resumen .grupo{display:flex;flex-direction:column;gap:3px}
.resumen .et{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}
.resumen .va{font-size:13px;line-height:1.35;letter-spacing:-.004em}
.botones{display:flex;flex-direction:column;gap:10px}
.btn{display:flex;align-items:center;justify-content:center;min-height:47px;border-radius:15px;
  font-weight:600;font-size:14px;letter-spacing:-.012em;cursor:pointer;
  border:1.4px solid var(--ink);text-decoration:none;-webkit-tap-highlight-color:transparent}
.btn.lleno{background:var(--ink);color:var(--caja)}
.btn.vacio2{background:transparent;color:var(--ink)}

/* seguimiento */
.etapas{display:flex;flex-direction:column;gap:0}
.etapa{display:flex;gap:12px;padding:11px 0;position:relative}
.etapa:not(:last-child)::before{content:"";position:absolute;left:8px;top:28px;bottom:-4px;
  width:1.4px;background:var(--borde)}
.etapa.hecha:not(:last-child)::before{background:var(--ink)}
.etapa .pt{width:16px;height:16px;border-radius:999px;border:1.4px solid var(--borde);flex:none;
  margin-top:1px;background:var(--caja);z-index:1}
.etapa.hecha .pt{background:var(--ink);border-color:var(--ink)}
.etapa.ahora .pt{border-color:var(--ink);box-shadow:inset 0 0 0 3px var(--caja),inset 0 0 0 10px var(--ink)}
.etapa .tx b{display:block;font-weight:600;font-size:13.5px;letter-spacing:-.01em}
.etapa .tx span{font-size:11.5px;line-height:1.35;color:var(--gris)}
.etapa:not(.hecha):not(.ahora) .tx b{color:var(--gris)}

/* ---------- aviso flotante ---------- */
.toast{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 14px);
  transform:translate(-50%,-10px);z-index:90;
  background:var(--ink);color:#fff;border-radius:999px;
  font-weight:600;font-size:13px;letter-spacing:.01em;padding:11px 19px;
  opacity:0;pointer-events:none;transition:.28s;max-width:calc(100% - 36px);text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* revelado al hacer scroll: sin esto los productos nunca aparecen */
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .rv{opacity:1!important;transform:none!important}
}

/* ================= BARRA DE PEDIDO =================
   Misma caja negra que la barra de pago de pedido.html, para que las dos
   pantallas se sientan el mismo sistema. Con el carrito vacio no existe:
   se va hacia abajo, asi el hero queda limpio. */
/* por encima de la hoja (85): es la misma pastilla la que cambia de
   contexto y tiene que verse tambien con la ficha abierta */
.barrapedido{position:fixed;left:0;right:0;bottom:0;z-index:90;
  padding:0 10px calc(11px + env(safe-area-inset-bottom,0px));
  text-decoration:none;-webkit-tap-highlight-color:transparent;
  transform:translateY(140%);pointer-events:none;
  transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.barrapedido.hay{transform:none;pointer-events:auto}
/* sobre la hoja el degradado de la pagina no existe: la pastilla se
   apoya en una banda blanca para separarse de la lista de extras */
html.abierta .barrapedido{background:linear-gradient(to top,var(--bg) 62%,rgba(250,246,238,0))}
/* mismo vidrio esmerilado de la cabecera. Sobre el catalogo blanco el blur
   no tiene nada que difuminar, asi que el filete oscuro de 1 px es lo que
   dibuja la pastilla; sobre el footer negro la aclara el propio fondo. */
/* baseline y no center: con dos tamanos distintos, centrar cada texto por
   separado los deja sentados en lineas diferentes.
   text-box recorta la caja de linea a la altura de mayuscula: asi el centrado
   deja de depender de las metricas de la fuente y Safari y Chrome coinciden.
   Donde no hay text-box, el relleno desparejo hace la misma correccion a mano
   (medido sobre Safari, que es lo que usa casi todo el trafico movil). */
.barrapedido .caja{max-width:520px;margin:0 auto;display:flex;align-items:baseline;
  justify-content:space-between;gap:12px;
  /* La pastilla es el unico boton de accion que sigue al cliente por toda
     la pagina, asi que lleva el verde de agregar en vez de tener otro boton
     verde metido adentro del carrito: un solo sitio donde se avanza. */
  border-radius:999px;
  border:1px solid var(--accion);
  background-color:var(--accion);color:#fff;padding:12.6px 20px 13.4px;
  /* la sombra toma el color de la marca, no un verde escrito a mano: con
     el verde fijo, la barra roja de otro cliente salia con halo verde.
     La primera linea es para navegadores sin color-mix. */
  box-shadow:0 8px 26px rgba(0,0,0,.2);
  box-shadow:0 8px 26px color-mix(in srgb, var(--accion) 34%, transparent);
  font-family:"NHaas",-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  transition:transform .16s cubic-bezier(.2,.7,.3,1)}
.barrapedido:active .caja{transform:scale(.985)}
/* sobre el pie: la pastilla baja y se esconde para no tapar los enlaces;
   vuelve sola al subir. Con la ficha abierta no se esconde nunca. */
.barrapedido .caja{transition:transform .16s cubic-bezier(.2,.7,.3,1)}
.barrapedido.hay.enpie{transform:translateY(140%);pointer-events:none}
html.abierta .barrapedido.hay.enpie{transform:none;pointer-events:auto}
.barrapedido .plata{font-weight:600;font-size:15px;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
/* con text-box la caja de cada texto va exactamente de la altura de
   mayuscula a la linea base: ya no sobra hueco por las colas, el centrado
   sale de la geometria y no de las metricas, y da igual en Safari que en
   Chrome. 16.2 arriba deja 17.94 y 17.95 de aire: centrado a 0.01 px. */
@supports (text-box: trim-both cap alphabetic){
  .barrapedido .caja{height:45px;padding:15.4px 19px 0}
  .barrapedido .plata,.barrapedido .accion{line-height:1;text-box:trim-both cap alphabetic}
}
.barrapedido .accion{font-weight:600;font-size:13.5px;letter-spacing:.025em}
.barrapedido:focus-visible{outline:0}
.barrapedido:focus-visible .caja{outline:2px solid var(--ink);outline-offset:3px}
/* sobre el footer negro el filete verde se pierde: ahi el aro blanco lo separa */
.barrapedido .caja{outline-offset:3px}
@media(prefers-reduced-motion:reduce){.barrapedido{transition:none}}

/* ================= CINTA DE MARCA (separador en movimiento) ================= */
.marquee{background:var(--bg);overflow:hidden;display:flex;
  padding:clamp(14px,3.6vw,24px) 0}

@keyframes mq{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media(prefers-reduced-motion:reduce){.mq-pista{animation:none}}

/* ================= BLOQUE DE MARCA =================
   Medido sobre la referencia (captura de 736 px de ancho) y llevado a
   nuestra escala: etiqueta 32/736, titular 51/736, texto 25/736, boton
   72 px de alto y borde de 3 px. Los margenes laterales son los mismos
   16 px de la rejilla, para que todo caiga en la misma columna. */
.forma{background:var(--bg);padding:clamp(10px,2.6vw,16px) var(--gut) clamp(26px,6.4vw,36px);max-width:var(--ancho);margin-left:auto;margin-right:auto;
  font-family:"NHaas",-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink)}
.forma-et{margin:0;font-weight:400;font-size:clamp(13px,3.7vw,14px);
  letter-spacing:.02em;line-height:1.1;text-transform:uppercase}
/* el titular son dos lineas: la primera pesada, la segunda normal */
.forma-tit{margin:clamp(13px,3.6vw,18px) 0 0;font-weight:400;
  font-size:clamp(20.5px,5.9vw,23px);letter-spacing:-.03em;line-height:1.06}
.forma-tit b{display:block;font-weight:600;-webkit-text-stroke:.043em currentColor}
.forma-tit span{display:block}
/* sin tope de ancho: el parrafo aprovecha toda la columna hasta el
   margen derecho, en vez de cortarse a media caja */
.forma-tx{margin:clamp(15px,4.2vw,20px) 0 0;font-weight:400;
  font-size:13px;line-height:1.36;letter-spacing:-.006em}
.forma-btn{display:flex;align-items:center;justify-content:center;
  width:max-content;margin:clamp(15px,4vw,20px) auto 0;
  min-height:43px;padding:0 clamp(20px,5.5vw,27px);
  border:1.4px solid var(--ink);border-radius:999px;
  color:var(--ink);text-decoration:none;font-weight:600;
  font-size:13.5px;letter-spacing:-.008em;
  -webkit-tap-highlight-color:transparent;transition:transform .18s cubic-bezier(.2,.7,.3,1)}
.forma-btn:active{transform:scale(.97)}
.forma-foto{position:relative;margin:clamp(18px,5vw,24px) 0 0;aspect-ratio:4/5;
  background:#ececec;border-radius:0;overflow:hidden}
.forma-foto video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;border-radius:0}
.forma-foto img{width:100%;height:100%;object-fit:cover;display:block}

/* ================= REALGAR (solo la carta) =================
   Version TRIAL: 70 glifos. No trae acentos, apostrofo, signo de peso ni
   punto medio; esos caracteres caen en la NHaas de la pila.
   El rango 100-900 evita que el navegador finja negritas: solo hay un peso,
   asi que donde hace falta mancha se usa -webkit-text-stroke. */

/* ================= LA CARTA =================
   Rejilla medida sobre la referencia: foto cuadrada de 160 css px, margen
   lateral de 25 y separacion de 22; el boton redondo monta la esquina
   superior derecha de la foto, saliendose 3 px. Precio arriba, nombre
   debajo. Al tocar la tarjeta se abre la ficha flotante; el boton suma
   directo sin abrirla. */
.carta{--nh2:"Realgar","NHaas",-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --nhb:"Realgar","NHaas",-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --gris2:#8a8a8a;
  /* aire abajo: sin esto la ultima fila de productos queda pegada al
     borde del footer negro, y el corte se lee como un error de carga
     en vez de como el final de la carta */
  background:var(--bg);padding:0 0 clamp(36px,8.6vw,50px)}
.carta *{font-family:var(--nh2)}

/* ---------- barra de categorias ----------
   Medida sobre la referencia: texto de 15 px, activa en negro y las demas
   en gris, subrayado de 3 px. Navega por ancla sobre el scroll continuo,
   no filtra: la pestana activa la decide el scroll. */
.cats-caja{position:relative;z-index:34;display:flex;align-items:stretch;
  background:var(--bg);box-shadow:0 1px 0 rgba(0,0,0,.09)}
.cats-menu{flex:none;display:flex;align-items:center;gap:5px;padding:0 14px 0 24px;
  border:0;background:none;color:var(--ink);cursor:pointer;
  font-family:"Realgar","NHaas",-apple-system,Helvetica,Arial,sans-serif;
  font-weight:600;font-size:16px;letter-spacing:-.012em;
  -webkit-text-stroke:.032em currentColor;
  -webkit-tap-highlight-color:transparent}
.cats-menu .chv{width:13px;height:13px;display:block;transition:transform .22s}
.cats-menu[aria-expanded="true"] .chv{transform:rotate(180deg)}
.cats-sep{flex:none;width:1px;margin:16px 0;background:rgba(0,0,0,.14)}

.cats{position:relative;flex:1;min-width:0;display:flex;gap:0;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.cats::-webkit-scrollbar{display:none}
/* sin subrayado, la diferencia la tiene que hacer el color: gris muy claro
   contra negro puro, no el gris medio de antes */
.cat-tab{flex:none;display:flex;align-items:center;padding:16px 13px 14px;
  color:var(--gris2);text-decoration:none;-webkit-tap-highlight-color:transparent;
  transition:color .2s}
.cat-tab:first-child{padding-left:14px}
.cat-tab:last-of-type{padding-right:24px}
/* mismo peso siempre: si la activa se pone bold cambia de ancho y la fila
   entera se mueve. La diferencia la hace el color y el subrayado. */
/* mismo peso siempre: si la activa se pusiera bold cambiaria de ancho y la
   fila entera se moveria. La diferencia la hacen el color y el subrayado. */
.cat-tx{font-weight:600;font-size:15px;letter-spacing:-.008em;line-height:1.2;white-space:nowrap}
.cat-tab.on{color:var(--ink)}
.cat-tab.on .cat-tx{-webkit-text-stroke:.032em currentColor}
@media (hover:hover) and (pointer:fine){.cat-tab:hover{color:var(--ink)}}

/* el ancho no se anima: cambiar width recalcula la maqueta en cada cuadro.
   Se parte de 100 px y el JS lo estira con scaleX, que va en la GPU. */
.cat-linea{position:absolute;bottom:0;left:0;height:3px;width:100px;
  transform-origin:left center;transform:translateX(0) scaleX(0);
  background:var(--ink);pointer-events:none;will-change:transform;
  transition:transform .24s cubic-bezier(.2,.9,.3,1)}
.cats.quieta .cat-linea{transition:none}

/* ---------- panel de Menu ---------- */
.cats-velo{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.34);
  opacity:0;transition:opacity .24s ease}
.cats-velo.on{opacity:1}
.cats-panel{position:fixed;left:0;right:0;bottom:0;z-index:75;
  background:var(--bg);border-radius:20px 20px 0 0;
  padding:10px 0 calc(14px + env(safe-area-inset-bottom,0px));
  transform:translateY(100%);transition:transform .3s cubic-bezier(.2,.8,.3,1);
  font-family:"NHaas",-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.cats-panel.on{transform:none}
.cp-item{display:block;padding:15px 24px;color:var(--ink);text-decoration:none;
  font-family:"Realgar","NHaas",-apple-system,Helvetica,Arial,sans-serif;font-weight:600;font-size:17px;letter-spacing:-.018em;
  -webkit-tap-highlight-color:transparent}
.cp-item + .cp-item{border-top:1px solid rgba(0,0,0,.09)}
.cp-item.on{color:var(--ink);-webkit-text-stroke:.03em currentColor}
.cp-item:not(.on){color:var(--gris2)}
@media(prefers-reduced-motion:reduce){.cats-panel,.cats-velo,.cat-linea{transition:none}}

/* solo se muestra la categoria elegida: la barra filtra, no navega */
.seccion{display:none}
.seccion.on{display:block;animation:entraDer .2s cubic-bezier(.2,.9,.3,1) both}
.seccion.on.izq{animation-name:entraIzq}
@keyframes entraDer{from{opacity:0;transform:translate3d(16px,0,0)}45%{opacity:1}to{opacity:1;transform:none}}
@keyframes entraIzq{from{opacity:0;transform:translate3d(-16px,0,0)}45%{opacity:1}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.seccion.on{animation:none}}
/* el aire va como padding de la seccion: el margin del titulo lo pisaba
   la regla de .stit de mas abajo y quedaba pegado a la barra */
/* 42 px de aire arriba y abajo del titulo, medidos en la referencia
   (descontando la interlinea que la caja de texto ya aporta) */
.seccion{padding-top:clamp(24px,7.6vw,32px)}

.stit{margin:0 auto clamp(16px,5vw,22px);padding:0 var(--gut);max-width:var(--ancho);margin-left:auto;margin-right:auto;
  font-family:var(--nhb);font-weight:600;font-size:clamp(20px,5.7vw,22px);
  letter-spacing:-.028em;line-height:1.08;-webkit-text-stroke:.03em currentColor}

/* auto-fill en vez de dos columnas fijas: en un celular caben dos de 160 px
   (la medida exacta de la referencia) y en una ventana mas ancha entran tres
   en vez de estirarse. Sin esto, a 500 px de ancho la tarjeta llega a 215. */
/* Cada categoria es una fila que se desliza de lado, como en la referencia
   (Rappi/KFC): tarjetas de ~142 px en un celular de 390, dos enteras y la
   tercera asomando para que se note que hay mas. Con cuadricula no habia
   termino medio: dos columnas llenaban el ancho y salian gigantes (173),
   tres salian diminutas (113).
   El relleno de arriba es para el boton de agregar, que se sale 3 px de la
   esquina de la foto: una fila con overflow lo recortaria. */
.rej{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(132px,36.4vw,160px);
  gap:15px;padding:4px var(--gut) 4px;max-width:var(--ancho);margin-left:auto;margin-right:auto;
  overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;scroll-padding-inline:var(--gut);scrollbar-width:none}
.rej::-webkit-scrollbar{display:none}
.rej > .tar{scroll-snap-align:start}
.tar{position:relative;display:flex;flex-direction:column;
  cursor:pointer;-webkit-tap-highlight-color:transparent}
.tfoto{position:relative;aspect-ratio:1/1;border-radius:14px;background:#EDE7DB;
  transition:transform .16s cubic-bezier(.2,.7,.3,1)}
.tfoto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  border-radius:14px;display:block}
.tar:active .tfoto{transform:scale(.975)}

/* el boton monta la esquina: por eso .tfoto no lleva overflow:hidden */
/* sello sobre la foto: pastilla blanca abajo a la izquierda.
   Va despues del <img> en el DOM para quedar por encima sin z-index. */
.tsello{position:absolute;left:8px;bottom:8px;display:inline-flex;align-items:center;gap:5px;
  height:26px;padding:0 10px;border-radius:999px;
  background:var(--bg);color:var(--ink);
  font-size:12.5px;line-height:1;letter-spacing:-.008em;white-space:nowrap;
  box-shadow:0 1px 3px rgba(0,0,0,.18);pointer-events:none}
/* Realgar tiene un solo peso: la negrita del numero la da el trazo */

/* el aro blanco va por fuera con box-shadow: asi el circulo verde conserva
   sus 33 px exactos y el anillo no entra en la maqueta */
.tmas{position:absolute;top:-3px;right:-3px;width:33px;height:33px;border-radius:999px;
  background:var(--accion);color:#fff;display:grid;place-items:center;padding:0;border:0;
  box-shadow:0 0 0 2px #fff;cursor:pointer;-webkit-tap-highlight-color:transparent}
.tmas svg{width:14px;height:14px;display:block}
.tar.puesto .tmas{display:none}

.tqty{position:absolute;top:-3px;right:-3px;display:none;align-items:center;
  height:33px;padding:0 3px;border-radius:999px;background:var(--accion);color:#fff;
  box-shadow:0 0 0 2px #fff}
.tar.puesto .tqty{display:flex}
.tqty button{width:27px;height:27px;flex:none;padding:0;border:0;border-radius:999px;
  background:none;color:inherit;display:grid;place-items:center;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.tqty button svg{width:12px;height:12px;display:block}
.tqty .n{min-width:15px;text-align:center;font-weight:600;font-size:13.5px;line-height:1;
  font-variant-numeric:tabular-nums}

.tpre{margin:8px 0 0;font-family:var(--nhb);font-weight:600;font-size:16.5px;line-height:1.1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--ink);-webkit-text-stroke:.022em currentColor}
.tnom{margin:4px 0 0;font-weight:400;font-size:14px;line-height:1.15;letter-spacing:-.006em;
  color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- promociones ----------
   No es .seccion, asi que el filtro de categorias no la esconde: queda
   siempre debajo de la categoria que este seleccionada. */
.promos{padding-top:clamp(24px,7.6vw,32px)}
/* etiqueta amarilla + precio tachado, medidos en la referencia:
   48.8 x 17.9 css, con 5.4 de relleno lateral */
/* huecos parejos entre precio, oferta y nombre: antes el nombre caia
   mas lejos que la etiqueta y el bloque se leia desarmado */
.tpromo{margin:4px 0 0;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
/* el descuento y el precio tachado comparten tamano: si no, el ojo lee
   dos jerarquias distintas en la misma linea */
.tdto{display:inline-flex;align-items:center;height:19px;padding:0 5px;border-radius:3px;
  background:#FADB27;color:var(--ink);font-size:14px;line-height:1;letter-spacing:-.012em;
  font-variant-numeric:tabular-nums;-webkit-text-stroke:.03em currentColor}
.tantes{font-size:14px;line-height:1;letter-spacing:-.012em;color:var(--gris2);
  font-variant-numeric:tabular-nums;text-decoration-thickness:1.5px}
/* con promocion el nombre baja un poco menos: la etiqueta ya separa */
.tpromo + .tnom{margin-top:3px}

/* ================= FICHA FLOTANTE =================
   Hoja que sube desde abajo. La barra del pedido no se duplica: la misma
   pastilla cambia de contexto y pasa a mostrar el total de este producto. */
.velo{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.42);
  opacity:0;transition:opacity .28s ease}
.velo.on{opacity:1}

.hoja{position:fixed;left:0;right:0;bottom:0;z-index:85;
  height:92dvh;max-height:92dvh;
  background:var(--bg);border-radius:20px 20px 0 0;overflow:hidden;
  transform:translateY(100%);transition:transform .34s cubic-bezier(.2,.8,.3,1);
  font-family:"Realgar","NHaas",-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --nhb:"Realgar","NHaas",-apple-system,Helvetica,Arial,sans-serif;
  --gris2:#8a8a8a}
.hoja.on{transform:none}
.hoja *{font-family:inherit}
.hcuerpo{height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding-bottom:calc(86px + env(safe-area-inset-bottom,0px))}

.hfoto{position:relative;aspect-ratio:5/3;background:#EDE7DB}
.hfoto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hcerrar{position:absolute;top:14px;left:14px;width:34px;height:34px;border-radius:999px;
  border:0;padding:0;background:var(--bg);color:var(--ink);
  display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hcerrar svg{width:16px;height:16px;display:block}

.hcab{padding:20px var(--gut) 22px;max-width:var(--ancho);margin-left:auto;margin-right:auto;}
.hpre{margin:0;font-family:var(--nhb);font-weight:600;font-size:19px;line-height:1.1;letter-spacing:-.022em;
  font-variant-numeric:tabular-nums;color:var(--ink);-webkit-text-stroke:.022em currentColor}
.hnom{margin:7px 0 0;font-weight:600;font-size:clamp(25px,7vw,30px);line-height:1.06;
  letter-spacing:-.03em;color:var(--ink);-webkit-text-stroke:.03em currentColor}
.hdes{margin:10px 0 0;font-weight:400;font-size:14px;line-height:1.38;letter-spacing:-.004em;
  color:var(--gris2)}
.hdes:empty{display:none}
.hcant{margin-top:20px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.het{font-family:var(--nhb);font-weight:600;font-size:14px;letter-spacing:-.01em;color:var(--ink)}
.hstep{display:flex;align-items:center;height:34px;padding:0 3px;border-radius:999px;
  border:1px solid rgba(0,0,0,.16)}
.hstep button{width:30px;height:30px;flex:none;padding:0;border:0;border-radius:999px;
  background:none;color:var(--ink);display:grid;place-items:center;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.hstep button:disabled{opacity:.28;cursor:default}
.hstep button svg{width:12px;height:12px;display:block}
.hstep .n{min-width:22px;text-align:center;font-weight:600;font-size:14.5px;line-height:1;
  font-variant-numeric:tabular-nums}

/* ---------- extras ---------- */
.hgrupo{border-top:8px solid #EFE9DE;padding:20px var(--gut) 4px;max-width:var(--ancho);margin-left:auto;margin-right:auto;}
.hgtit{margin:0;font-family:var(--nhb);font-weight:600;font-size:17px;letter-spacing:-.02em;line-height:1.15;color:var(--ink)}
.hgsub{margin:4px 0 14px;font-weight:400;font-size:13px;letter-spacing:-.004em;color:var(--gris2)}
.hfila{display:flex;align-items:center;gap:12px;padding:12px 0;
  border-top:1px solid rgba(0,0,0,.09)}
.hfila:first-of-type{border-top:0}
.hmini{flex:0 0 46px;height:46px;border-radius:10px;overflow:hidden;background:#EDE7DB}
.hmini img{width:100%;height:100%;object-fit:cover;display:block}
.htx{flex:1;min-width:0}
.htx b{display:block;font-weight:400;font-size:14px;line-height:1.25;letter-spacing:-.006em;color:var(--ink)}
.htx span{display:block;margin-top:3px;font-family:var(--nhb);font-weight:600;font-size:13.5px;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.hacc{flex:none;width:62px;display:flex;justify-content:flex-end}
.hacc .add{width:28px;height:28px;border-radius:999px;border:0;padding:0;
  background:var(--accion);color:#fff;display:grid;place-items:center;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.hacc .add svg{width:13px;height:13px;display:block}
.hfila.puesto .add{display:none}
.hacc .qty{display:none;align-items:center;height:28px;padding:0 2px;border-radius:999px;
  background:var(--accion);color:#fff}
.hfila.puesto .qty{display:flex}
.hacc .qty button{width:24px;height:24px;flex:none;padding:0;border:0;border-radius:999px;
  background:none;color:inherit;display:grid;place-items:center;cursor:pointer}
.hacc .qty button svg{width:11px;height:11px;display:block}
.hacc .qty .n{min-width:14px;text-align:center;font-weight:600;font-size:13px;line-height:1;
  font-variant-numeric:tabular-nums}

html.abierta,html.abierta body{overflow:hidden}
@media(prefers-reduced-motion:reduce){.hoja,.velo{transition:none}}

/* pista bajo un titulo de tarjeta, y su version de error */
.pista{margin:0 0 14px;color:var(--mut);font-size:13.5px;line-height:1.45}
.pista.malo{margin:0 0 12px;padding:10px 12px;border-radius:10px;
  background:#fdecec;color:#a11}
.pista.malo[hidden]{display:none}
#formBuscar .btn{margin-top:4px}

/* ==========================================================
   VITRINA - carrusel de portadas
   Sustituye al letrero en movimiento que habia tras el hero.

   El desplazamiento y el centrado los hace CSS con scroll-snap, no
   JavaScript: se arrastra con el dedo como cualquier carrusel nativo,
   respeta el rebote del sistema y sigue funcionando aunque el JS falle.
   El JS solo pinta el punto activo.
   ========================================================== */
/* el ancho va en vw, no en %: un % dentro de flex-basis se mide contra
   la caja de contenido de la pista, que a su vez depende del relleno que
   se calcula con ese mismo ancho. La cuenta se mordia la cola y la
   tarjeta salia mas estrecha de lo pedido. */
.vitrina{--vit-w:min(86vw, 380px);
  /* poco aire abajo: el bloque de texto que sigue es parte del mismo
     discurso, no una seccion aparte. Antes quedaba un hueco blanco
     largo entre los dos que partia la pagina en dos. */
  background:var(--bg);padding:clamp(28px,7.8vw,38px) 0 clamp(8px,2.2vw,12px)}

.vit-tit{margin:0;padding:0 var(--gut);text-align:center;
  font-family:"NHaas",-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-weight:600;font-size:clamp(22px,6.5vw,25.5px);letter-spacing:-.03em;line-height:1.05;
  color:var(--ink);-webkit-text-stroke:.043em currentColor;text-wrap:balance}
.vit-sub{margin:clamp(9px,2.6vw,12px) 0 0;padding:0 var(--gut);text-align:center;
  color:var(--mut);font-size:14px;line-height:1.35}

/* el hueco entre tarjetas se encoge con la tarjeta mas ancha: si no,
   se come el filo de las vecinas y el carrusel deja de leerse como tal */
.vit-pista{margin:clamp(20px,5.6vw,26px) 0 0;display:flex;gap:clamp(10px,3.2vw,14px);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  /* el relleno lateral deja la primera y la ultima tarjeta centradas,
     y de paso asoma la vecina por el borde */
  padding-inline:calc((100% - var(--vit-w)) / 2)}
.vit-pista::-webkit-scrollbar{display:none}

.vit-card{position:relative;flex:0 0 var(--vit-w);scroll-snap-align:center;
  /* mas ancha que alta de lo que era: a 4/5 la tarjeta salia estirada y
     parecia un banner de pie; a 7/8 se planta y se lee como tarjeta */
  aspect-ratio:7/8;border-radius:22px;overflow:hidden;background:#ececec;
  display:block;text-decoration:none;color:#fff;
  -webkit-tap-highlight-color:transparent;
  /* las de al lado casi transparentes: se adivinan, no compiten con la
     del centro. El JS le pone .en a la que esta centrada. */
  opacity:.38;
  transition:opacity .28s ease, transform .18s cubic-bezier(.2,.7,.3,1)}
.vit-card.en{opacity:1;box-shadow:0 16px 38px rgba(0,0,0,.18)}
.vit-card:active{transform:scale(.985)}
.vit-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* velo solo abajo: sin el, un texto blanco sobre una foto clara
   desaparece, y con una capa entera la foto se apaga */
.vit-card::after{content:"";position:absolute;inset:auto 0 0;height:64%;
  background:linear-gradient(to top, rgba(0,0,0,.68), rgba(0,0,0,.32) 44%, rgba(0,0,0,0));
  pointer-events:none}

.vit-tx{position:absolute;left:0;right:0;bottom:0;z-index:1;
  padding:0 clamp(19px,5.3vw,23px) clamp(19px,5.3vw,23px)}
.vit-tx b{display:block;font-weight:600;
  font-size:clamp(25.5px,7.7vw,31px);letter-spacing:-.03em;line-height:1.02;
  -webkit-text-stroke:.04em currentColor}
.vit-tx span{display:block;margin-top:clamp(6px,1.9vw,9px);
  font-weight:400;font-size:clamp(14px,4vw,15.5px);letter-spacing:-.01em;line-height:1.3}

.vit-puntos{display:flex;justify-content:center;align-items:center;gap:9px;
  margin:clamp(14px,3.6vw,17px) 0 0}
.vit-punto{width:8px;height:8px;padding:0;border:0;border-radius:999px;
  background:#d2d2d2;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:background .2s, transform .2s}
.vit-punto.on{background:var(--ink);transform:scale(1.15)}

@media (prefers-reduced-motion:reduce){.vit-card{transition:none}}

/* ---- barrio: ubicacion + buscador ---- */
.brr{position:relative;display:flex;flex-direction:column;gap:10px}
.brr[hidden]{display:none}

.brr-gps{display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;box-sizing:border-box;min-height:48px;padding:0 16px;
  border:1.5px solid var(--ink);border-radius:12px;background:var(--bg);color:var(--ink);
  font-family:inherit;font-size:15px;font-weight:600;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.brr-gps svg{width:19px;height:19px;flex:none}
.brr-gps:disabled{opacity:.55}

/* la lista flota sobre lo que sigue en vez de empujarlo: si empujara,
   el campo saltaria bajo el dedo justo mientras se escribe */
.brr-lista{position:absolute;top:100%;left:0;right:0;z-index:20;
  margin:6px 0 0;padding:6px;list-style:none;
  background:var(--bg);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 12px 30px rgba(0,0,0,.12);max-height:270px;overflow-y:auto}
.brr-lista[hidden]{display:none}
.brr-lista button{display:flex;align-items:baseline;gap:8px;width:100%;
  min-height:46px;padding:0 12px;border:0;border-radius:10px;background:none;
  color:var(--ink);font-family:inherit;font-size:15px;text-align:left;cursor:pointer}
.brr-lista button:hover,.brr-lista button:focus{background:#F1ECE1;outline:0}
.brr-lista b{font-weight:600}
.brr-lista span{margin-left:auto;color:var(--mut);font-size:12.5px;white-space:nowrap}

.zona{margin:0;padding:11px 13px;border-radius:12px;
  background:#fdf0dc;color:#8a5a10;font-size:13.5px;line-height:1.4}
.zona[hidden]{display:none}

/* ==========================================================
   CARRITO FLOTANTE
   Sale de la barra hacia arriba. Tres piezas apiladas:
     velo (85) - carrito (88) - barra (90)
   El carrito va por DEBAJO de la barra a proposito: asi se despliega
   desde detras de ella y parece que sale de la propia barra, en vez de
   aparecer flotando por su cuenta.
   ========================================================== */
.velocar{position:fixed;inset:0;z-index:85;
  /* velo claro: la idea es que se siga viendo la pagina detras, no
     taparla. Con un velo oscuro esto dejaria de ser una ventana
     flotante y seria una pantalla nueva. */
  background:rgba(20,20,20,.18);
  opacity:0;transition:opacity .26s ease}
.velocar.on{opacity:1}
.velocar[hidden]{display:none}

.carrito{position:fixed;z-index:88;left:10px;right:10px;
  /* el borde de abajo queda justo sobre la barra */
  bottom:calc(11px + env(safe-area-inset-bottom,0px) + var(--bar, 56px) + 8px);
  max-width:520px;margin:0 auto;
  display:flex;flex-direction:column;
  background:var(--bg);border-radius:22px;
  border:1px solid rgba(0,0,0,.10);
  box-shadow:0 18px 50px rgba(0,0,0,.20);
  max-height:min(62vh, 520px);overflow:hidden;
  transform:translateY(calc(100% + 24px));opacity:0;
  transition:transform .28s cubic-bezier(.2,.8,.3,1), opacity .2s ease}
.carrito.on{transform:none;opacity:1}
.carrito[hidden]{display:none}

.car-cab{display:flex;align-items:center;gap:10px;
  padding:15px 16px 11px;border-bottom:1px solid var(--line)}
.car-cab h2{margin:0;font-family:"NHaas",-apple-system,Helvetica,Arial,sans-serif;
  font-weight:600;font-size:17px;letter-spacing:-.02em}
.car-x{margin-left:auto;width:32px;height:32px;padding:0;border:0;border-radius:999px;
  background:#EFE9DE;color:var(--ink);display:grid;place-items:center;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.car-x svg{width:15px;height:15px}

/* sin pie, el relleno de abajo lo pone la propia lista */
.car-lineas{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:4px 16px 14px}
.car-ln{display:flex;align-items:center;gap:10px;
  padding:12px 0;border-bottom:1px solid var(--line)}
.car-ln:last-child{border-bottom:0}
.car-tx{flex:1;min-width:0}
.car-tx b{display:block;font-weight:400;font-size:14.5px;line-height:1.25}
.car-tx span{display:block;margin-top:2px;color:var(--mut);font-size:12.5px}

.car-qty{flex:none;display:flex;align-items:center;gap:2px;
  border:1px solid var(--line);border-radius:999px;padding:2px}
.car-qty button{width:30px;height:30px;padding:0;border:0;border-radius:999px;
  background:none;color:var(--ink);display:grid;place-items:center;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.car-qty button svg{width:14px;height:14px}
.car-qty span{min-width:18px;text-align:center;font-size:14px;font-weight:600;
  font-variant-numeric:tabular-nums}

.car-pre{flex:none;min-width:74px;text-align:right;
  font-size:14px;font-weight:600;white-space:nowrap;
  font-variant-numeric:tabular-nums}

.car-vacio{margin:26px 0;text-align:center;color:var(--mut);font-size:14px}

@media (prefers-reduced-motion:reduce){
  .carrito,.velocar{transition:none}
}