/* El contenido va POR ENCIMA de la franja de portada.
   La aurora sobresale 3.2rem por debajo de .tope para poder disolverse en
   blanco; como .tope es un contexto de apilado, ese sobrante se pintaba encima
   de <main> (un bloque normal se pinta ANTES que un contexto de apilado) y
   tapaba el titulo "Paletas". Con position+z-index main recupera su sitio. */
main,.visita,.pie{position:relative;z-index:1}

/* Miel Tapekua · web pública.
   Regla de oro: solo se animan transform y opacity. Nada de blur en scroll. */

/* ---------- cabecera ---------- */
/* Arriba se apoya limpia sobre la aurora (sin barra, sin blur). En cuanto
   se baja un poco, tienda.js le pone .solida y se vuelve blanca para que el
   texto siga leyéndose sobre el contenido. Solo cambian color y sombra. */
.cab{position:sticky;top:0;z-index:40;padding-top:env(safe-area-inset-top);
  background:transparent;border-bottom:1px solid transparent;
  transition:background-color .25s var(--rapido),border-color .25s var(--rapido),box-shadow .25s var(--rapido)}
.cab.solida{background:rgba(255,255,255,.88);backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom-color:var(--linea);box-shadow:0 1px 3px rgba(42,26,11,.04)}
.cab-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:64px}
/* Arriba va el nombre escrito y en la portada el sello: la gente reconoce
   el sello de lejos, asi que ese es el que manda en grande. */
.marca{display:flex;align-items:center;gap:.65rem;line-height:1}
/* EL SELLO NO SE REPITE. Arriba del todo solo manda el grande de la portada:
   el chico de la barra esta invisible y aparece al bajar, justo cuando la
   barra se vuelve solida y el grande ya salio de pantalla. */
.marca-letras{display:block;height:34px;width:auto;aspect-ratio:848/451;
  opacity:0;transform:translateY(-4px);pointer-events:none;
  transition:opacity .25s var(--rapido),transform .25s var(--suave)}
.cab.solida .marca-letras{opacity:1;transform:none;pointer-events:auto}
.marca img,.marca picture{display:block}
@media(max-width:430px){.marca-letras{height:30px}}
.cab-acc{display:flex;align-items:center;gap:.55rem}
.bolsa{position:relative;display:inline-flex;align-items:center;gap:.42rem;
  padding:.55rem .95rem;border-radius:999px;border:1px solid var(--panel-borde);
  background:#fff;cursor:pointer;color:var(--tinta);font-size:.9rem;font-weight:500;line-height:1;
  transition:transform .18s var(--suave),border-color .18s}
.bolsa-t{white-space:nowrap}
@media(max-width:380px){.bolsa-t{display:none}}
.bolsa:active{transform:scale(.93)}
.bolsa:hover{border-color:rgba(42,26,11,.2)}
.bolsa-n{position:absolute;top:-3px;right:-3px;min-width:19px;height:19px;padding:0 5px;
  border-radius:999px;background:var(--miel);color:#fff;font-size:.68rem;font-weight:600;
  display:grid;place-items:center;font-variant-numeric:tabular-nums;
  box-shadow:0 0 0 2px #fff}

/* ---------- portada ---------- */
/* franja compacta: ocupaba casi media pantalla para decir un nombre */
/* menos aire arriba: el rotulo sube. Abajo queda sitio para el desvanecido */
.hero{padding:1.3rem 0 2.3rem}
/* el rotulo va DEBAJO del sello: el sello ya dice el nombre */
/* sobre la foto, el gris claro de .mayus no se leia: va en color miel */
.hero-eti{margin:1.1rem 0 0;font-size:.6rem;color:var(--miel)}
.hero-h1{margin:0;line-height:1}
/* El sello es un hexagono de punta arriba: 1031x1190. aspect-ratio reserva el
   hueco exacto antes de que cargue, asi el texto de abajo no da el salto. */
/* Sin filter: en algunos Android el drop-shadow de una imagen recortada se
   pinta como un CUADRADO detras, y ademas cuesta pintarlo. */
.hero-logo{display:block;margin:0 auto;width:clamp(168px,50vw,248px);height:auto;
  aspect-ratio:963/1156;object-fit:contain}
/* <picture> es un contenedor en linea: sin esto el <img> deja de centrarse */
.hero-h1 picture{display:block}
.hero-txt{font-size:clamp(2.4rem,10vw,3.6rem);display:inline-block}
.hero-p{margin:.7rem auto 0;max-width:36ch;color:var(--tinta2);font-size:.98rem}
/* renglon chico bajo el nombre: el precio por kilo del balde */
.prod-nota{margin:.15rem 0 0;font-size:.8rem;color:var(--tinta3);line-height:1.3}
/* El sitio de la nota se reserva SIEMPRE, la haya o no. En una rejilla todas
   las tarjetas miden lo mismo, asi que la que no tiene nota dejaba todo ese
   aire junto, en medio, y parecia un fallo. Reservandolo, el precio y el boton
   quedan a la misma altura en las tres y el espacio sobrante se reparte igual.
   En em, para que siga cuadrando si cambia el cuerpo de letra. */
.prod-txt{min-height:3.75em}
.hero-lugar{display:inline-flex;align-items:center;gap:.4rem;margin:1.4rem 0 0;
  font-size:.86rem;color:var(--tinta3)}
.hero-lugar .ic{color:var(--miel)}

/* ---------- carta ---------- */
.grupo{padding:2rem 0 .5rem}
.grupo:first-child{padding-top:clamp(1.6rem,4vw,2.4rem)}
.grupo-h2{font-size:clamp(1.25rem,3.6vw,1.6rem);font-weight:600;letter-spacing:-.025em;margin:0 0 1.3rem}
/* grid-auto-rows:1fr iguala TODAS las filas. Sin esto, un nombre de 3 lineas
   hacia su tarjeta mas alta que la de al lado y los precios no se alineaban:
   en Android salian alturas de 303, 285 y 266px en la misma cuadricula. */
.rejilla{display:grid;gap:.7rem;grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-rows:1fr}
@media(min-width:620px){.rejilla{grid-template-columns:repeat(3,1fr);gap:1rem}}
@media(min-width:920px){.rejilla{grid-template-columns:repeat(4,1fr);gap:1.15rem}}

/* ---------- carta sin fotos: lista compacta ----------
   Es el estado real hasta que suban las imagenes. Cada sabor ocupa una fila
   legible en lugar de una tarjeta con un cuadro vacio de 170px. */
.rejilla-lista{grid-template-columns:1fr;gap:.5rem}
.rejilla-lista .prod{flex-direction:row;align-items:stretch}
.rejilla-lista .prod-cuerpo{flex-direction:row;align-items:center;justify-content:space-between;
  gap:1rem;padding:.9rem 1rem .9rem 1.15rem;width:100%}
.rejilla-lista .prod-txt{min-width:0;flex:1}
.rejilla-lista .prod-nom{font-size:1.02rem;font-weight:500}
.rejilla-lista .prod-pie{margin-top:0;padding-top:0;gap:1rem;flex-shrink:0}
.rejilla-lista .prod-precio{font-size:1.02rem}
.etiq-linea{position:static;display:inline-block;margin-left:.5rem;vertical-align:.12em}
@media(min-width:700px){.rejilla-lista{grid-template-columns:repeat(2,1fr);gap:.65rem}}
@media(min-width:1040px){.rejilla-lista{grid-template-columns:repeat(3,1fr)}}

.prod{background:var(--panel);border:1px solid var(--panel-borde);border-radius:20px;
  box-shadow:var(--sombra);overflow:hidden;display:flex;flex-direction:column;
  transition:transform .22s var(--suave),box-shadow .22s var(--suave)}
@media(hover:hover){.prod:hover{transform:translateY(-3px);box-shadow:var(--sombra-alta)}}
.prod.agotado{opacity:.55}
/* 4:5 en vertical: una paleta es alta, y en cuadrado se perdia el palito o
   la punta. Asi la foto manda en la tarjeta, que es lo que vende. */
.prod-foto{position:relative;aspect-ratio:4/5;display:grid;place-items:center;overflow:hidden;
  background:linear-gradient(160deg,#FBF1E4 0%,#fff 100%)}
/* absoluta y no height:100%: contra una caja definida por aspect-ratio el
   porcentaje no se resuelve y la imagen salia 217px en una caja de 169,
   recortada por abajo de cualquier manera. */
.prod-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* La foto respira al pasar el raton. Es lo unico que se mueve en el catalogo:
   un detalle y basta. Va con transform, que lo pinta la GPU y no toca el
   layout; un filter o un backdrop-filter aqui arruinaria el scroll del movil.
   Solo donde hay raton de verdad: en tactil el :hover se queda pegado tras
   tocar y la foto se quedaria agrandada. */
.prod-foto img{transition:transform .5s var(--suave)}
@media(hover:hover){ .prod:hover .prod-foto img{transform:scale(1.045)} }
@media(prefers-reduced-motion:reduce){
  .prod-foto img{transition:none}
  .prod:hover .prod-foto img{transform:none}
}
.etiq{position:absolute;top:.55rem;left:.55rem;background:rgba(42,26,11,.82);color:#fff;
  font-size:.62rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:.24rem .55rem;border-radius:999px}
.prod-cuerpo{padding:.85rem .9rem .9rem;display:flex;flex-direction:column;gap:.25rem;flex:1}
/* min-height de DOS lineas: asi la tarjeta de un nombre corto mide igual que
   la de uno largo, y las cuadriculas de "Paletas" y "Otros" quedan a la misma
   altura entre si (cada grid se alinea solo por dentro). */
.prod-nom{margin:0;font-size:.97rem;font-weight:500;line-height:1.28;letter-spacing:-.015em;
  min-height:2.56em}
.prod-desc{margin:0;font-size:.79rem;color:var(--tinta3);line-height:1.4}
/* nowrap arriba + este min-width:0: "13 Bs" se partia en dos lineas ("13" y
   "Bs" debajo) porque el boton apretaba la columna del precio. */
.prod-pie{margin-top:auto;padding-top:.7rem;display:flex;align-items:center;
  justify-content:space-between;gap:.45rem;min-width:0}
.prod-pie .anadir{padding:.54rem .8rem .54rem .68rem}
@media(max-width:400px){ .prod-nom{font-size:.88rem;min-height:2.56em} }
/* A 320px "Frutilla rellena de leche condensada" no entra en dos lineas por
   mucho que baje la letra, asi que ahi se reservan TRES para todas y siguen
   quedando iguales entre si. */
@media(max-width:340px){ .prod-nom{font-size:.82rem;min-height:3.84em} }
/* A 320px "13 Bs" + "Añadir" no caben en una linea y el boton se salia de la
   tarjeta. Debajo cabe entero y ademas el area de toque es mucho mayor. */
@media(max-width:359px){
  .prod-pie{flex-direction:column;align-items:stretch;gap:.5rem}
  .prod-pie .anadir{justify-content:center;width:100%}
}
.prod-precio{font-weight:600;font-size:1rem;letter-spacing:-.02em;white-space:nowrap}
/* Era un circulito con un "+" y nada mas: quien no conoce la web no sabia
   que hacia. Ahora lleva la palabra y se lee de un vistazo. */
.anadir{position:relative;display:inline-flex;align-items:center;gap:.34rem;
  padding:.56rem .95rem .56rem .78rem;border-radius:999px;border:0;
  background:var(--miel);color:#fff;font-size:.9rem;font-weight:500;line-height:1;
  cursor:pointer;flex-shrink:0;white-space:nowrap;
  box-shadow:0 4px 12px -5px rgba(154,95,8,.7);
  transition:transform .18s var(--suave),background .18s}
.anadir:active{transform:scale(.95)}
.anadir:hover{background:var(--miel-osc)}
.anadir::after{content:"";position:absolute;inset:-8px;border-radius:999px}
.anadir-n{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 5px;
  border-radius:999px;background:var(--tinta);color:#fff;font-size:.68rem;font-weight:600;
  display:none;place-items:center;font-variant-numeric:tabular-nums;box-shadow:0 0 0 2px #fff}
.anadir.con-n .anadir-n{display:grid}
.anadir:active{transform:scale(.86)}
.anadir:hover{background:var(--miel-osc)}
/* nada de borde rojo: se leia como error. El numero en el boton lo dice. */
.prod.puesto{box-shadow:var(--sombra-alta)}
.anadir-n{font-weight:600;font-size:.95rem;line-height:1;font-variant-numeric:tabular-nums}


/* ---------- visítanos ---------- */
/* una sola banda tenue para cortar el blanco, al estilo Stripe */
.visita{padding:3.6rem 0 4rem;background:#FBF8F4;
  border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);margin-top:2.5rem}
.datos{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.dato{padding:1.5rem}
.dato-ic{display:block;margin-bottom:.8rem;color:var(--miel)}
.dato h3{margin:0 0 .5rem;font-size:1rem;font-weight:600;letter-spacing:-.015em}
.dato p{margin:0 0 .35rem;color:var(--tinta2);font-size:.92rem}
.lnk{color:var(--miel);font-weight:500}
.lnk:hover{text-decoration:underline}
.hueco{padding:3rem 1.5rem}

/* ---------- pie ---------- */
.pie{background:#fff;padding:3.4rem 0 calc(2.2rem + env(safe-area-inset-bottom));margin-top:0}
.pie-in{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1rem}
/* ---------- como pedir ---------- */
.pasos-sec{position:relative;z-index:1;padding:2.6rem 0 .6rem}
.pasos{list-style:none;margin:.4rem 0 0;padding:0;display:grid;gap:.8rem;align-items:start;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,255px),1fr))}
.paso-i{display:flex;gap:.85rem;align-items:flex-start;padding:1.15rem 1.2rem;
  background:#fff;border:1px solid var(--panel-borde);border-radius:16px;box-shadow:var(--sombra)}
.paso-n{display:grid;place-items:center;width:30px;height:30px;flex-shrink:0;border-radius:9px;
  background:var(--miel);color:#fff;font-weight:600;font-size:.95rem;font-variant-numeric:tabular-nums}
.paso-i b{display:block;font-size:.97rem;font-weight:600;line-height:1.3}
.paso-i p{margin:.25rem 0 0;color:var(--tinta2);font-size:.89rem;line-height:1.5}

/* ---------- aparicion al bajar ----------
   Solo opacity y transform, que es lo unico que no cuesta pintar. Si el
   telefono pide menos movimiento, no se mueve nada. */
.sube{opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--suave),transform .5s var(--suave)}
.sube.visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.sube{opacity:1;transform:none;transition:none}}

/* ---------- sobre nuestra miel ---------- */
/* Panal de fondo, muy tenue: da el aire de miel sin estorbar la lectura.
   Es un mosaico SVG que encaja solo; nada de blur ni de capas animadas. */
.info{position:relative;z-index:1;padding:3rem 0 3.2rem;background:#FDFAF1;
  border-top:1px solid rgba(154,95,8,.08);border-bottom:1px solid rgba(154,95,8,.08)}
.info::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.14;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34.64' height='60' viewBox='0 0 34.64 60'%3E%3Cg fill='none' stroke='%23E8A400' stroke-width='1.5'%3E%3Cpath d='M17.32 -10 34.64 0 34.64 20 17.32 30 0 20 0 0Z'/%3E%3Cpath d='M0 20 17.32 30 17.32 50 0 60 -17.32 50 -17.32 30Z'/%3E%3Cpath d='M34.64 20 51.96 30 51.96 50 34.64 60 17.32 50 17.32 30Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:34.64px 60px}
.info-entrada{margin:.2rem auto 1.7rem;max-width:52ch;color:var(--tinta2)}
/* align-items:start para que cada tarjeta mida lo que dice y no se estire
   hasta la mas larga, que dejaba un hueco blanco abajo. */
.info-rejilla{display:grid;gap:.9rem;align-items:start;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.info-caja{padding:1.3rem 1.25rem}
.info-caja h3{margin:.7rem 0 .35rem;font-size:1.02rem;font-weight:600}
.info-caja p{margin:0;color:var(--tinta2);font-size:.92rem;line-height:1.55}
.info-ic{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;
  background:rgba(240,174,31,.16);color:var(--miel)}
.info-pie{margin:1.4rem auto 0;max-width:70ch;text-align:center;
  color:var(--tinta2);font-size:.9rem;line-height:1.6}
.info-aviso{display:inline-flex;align-items:center;gap:.4rem;margin-top:.7rem;
  padding:.45rem .85rem;border-radius:999px;background:rgba(154,95,8,.09);
  color:var(--miel-osc);font-size:.84rem}

.pie-letras{height:60px;width:auto;aspect-ratio:848/451;margin-inline:auto}
.pie-in picture{display:block}
.pie-txt{margin:0;font-size:.88rem;color:var(--tinta2);max-width:42ch;line-height:1.6}
.redes{display:flex;gap:1.3rem;align-items:center;margin-top:.2rem}
.red{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  transition:transform .28s var(--suave),background .2s}
.red:hover{transform:translateY(-3px) scale(1.06);background:#FBF8F4}
.red-tk .tk{position:relative;width:22px;height:22px}
.red-tk .tk svg{position:absolute;inset:0}
.pie-linea{width:44px;height:1px;background:linear-gradient(90deg,transparent,var(--linea),transparent);margin:.4rem 0}
.pie-cr{margin:0;font-size:.78rem;color:var(--tinta3);letter-spacing:0}
/* en pantallas estrechas el interletrado lo partia en dos lineas */
@media(max-width:430px){.pie-cr{font-size:.74rem}}
.tuerca{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  color:var(--tinta3);opacity:.35;transition:opacity .2s,transform .5s var(--suave)}
.tuerca:hover{opacity:1;transform:rotate(90deg)}

/* ---------- bolsa ---------- */
.bolsa-ui{position:fixed;inset:0;z-index:80;overscroll-behavior:contain;touch-action:none}
.bolsa-lista{touch-action:pan-y}
.bolsa-fondo{position:absolute;inset:0;background:rgba(42,26,11,.42);
  animation:aparecer .22s var(--rapido)}
@keyframes aparecer{from{opacity:0}to{opacity:1}}
.bolsa-panel{position:absolute;top:0;right:0;height:100dvh;width:min(100%,410px);
  background:#fff;display:flex;flex-direction:column;
  box-shadow:-24px 0 60px -30px rgba(42,26,11,.5);
  animation:entrar .3s var(--suave)}
@keyframes entrar{from{transform:translateX(100%)}to{transform:translateX(0)}}
.bolsa-cab{display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem 1.2rem;border-bottom:1px solid var(--linea);
  padding-top:calc(1.1rem + env(safe-area-inset-top))}
.bolsa-cab h2{margin:0;font-size:1.1rem;font-weight:600;letter-spacing:-.02em}
.icono-b{width:36px;height:36px;border-radius:50%;border:0;background:transparent;
  display:grid;place-items:center;cursor:pointer;color:var(--tinta2)}
.icono-b:hover{background:rgba(42,26,11,.05)}
/* overscroll-behavior:contain evita que al llegar al final de la lista el
   scroll siga en la pagina de detras, que era lo que se veia "re feo". */
.bolsa-lista{flex:1;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;padding:.6rem 1.2rem}
.bolsa-vacia{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.7rem;height:100%;color:var(--tinta3);text-align:center}
.bolsa-vacia .silueta{width:56px;opacity:.14}
.linea{display:flex;gap:.85rem;align-items:flex-start;padding:.95rem 0;border-bottom:1px solid var(--linea)}
.linea-cuerpo{flex:1;min-width:0;display:grid;gap:.6rem}
/* space-between dejaba 125px de vacio entre el contador y el subtotal y la
   fila se veia descuadrada. Ahora van juntos: el grupo se lee como una unidad. */
.linea-abajo{display:flex;align-items:center;justify-content:flex-start;gap:1.15rem}
.linea-sub{font-weight:600;font-size:1.02rem;letter-spacing:-.02em;white-space:nowrap;color:var(--tinta)}
.linea:last-child{border-bottom:0}
.linea-foto{width:58px;height:58px;border-radius:12px;flex-shrink:0;overflow:hidden;
  background:linear-gradient(160deg,#FBF1E4,#fff);display:grid;place-items:center}
.linea-foto img{width:100%;height:100%;object-fit:cover}
.linea-foto .silueta{width:52%;opacity:.18}
.linea-nom{margin:0;font-size:.98rem;font-weight:500;line-height:1.32}
.linea-pre{margin:-.35rem 0 0;font-size:.82rem;color:var(--tinta3)}
/* Eran circulos de 28px con un palito de 15px dentro: se veian endebles y se
   fallaba al tocarlos. 40px de boton, trazo mas grueso y area tactil de 48. */
/* Antes esto era una pastilla crema con los dos circulos pegados a sus bordes
   (4px) y el numero flotando en un hueco de 34px: se leia descentrado, como si
   los signos estuvieran "al costado". Ahora son tres piezas con la MISMA
   separacion entre ellas, asi que la simetria sale sola. */
/* EL CONTADOR. Antes eran dos circulos sueltos y en el telefono se
   aplastaban: un border-radius:50% sobre una caja comprimida por el flex deja
   de ser un circulo y se ve deforme. Ahora es UNA sola pieza rectangular con
   tres celdas, asi que no hay nada que se pueda deformar. */
.contador{display:inline-flex;align-items:stretch;flex-shrink:0;
  border:1.5px solid rgba(42,26,11,.14);border-radius:13px;overflow:hidden;
  background:#fff;box-shadow:0 1px 2px rgba(42,26,11,.05)}
.cnt{flex:0 0 auto;width:44px;height:40px;border:0;background:transparent;
  color:var(--tinta);display:grid;place-items:center;cursor:pointer;
  transition:background .15s var(--rapido)}
.cnt:active{background:#F7F0E2}
.cnt svg{width:17px;height:17px;stroke-width:2.4}
.cnt-n{flex:0 0 auto;min-width:42px;display:grid;place-items:center;
  font-size:1rem;font-weight:600;font-variant-numeric:tabular-nums;
  border-inline:1.5px solid rgba(42,26,11,.1)}
.bolsa-pie{padding:1.1rem 1.2rem calc(1.2rem + env(safe-area-inset-bottom));
  border-top:1px solid var(--linea);background:#fff}
.bolsa-total{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:.9rem}
.bolsa-total span{font-size:.8rem;text-transform:uppercase;letter-spacing:.2em;color:var(--tinta3)}
.bolsa-total strong{font-size:1.5rem;font-weight:600;letter-spacing:-.03em}

/* ---------- aviso ---------- */
.aviso{position:fixed;left:50%;bottom:calc(1.4rem + env(safe-area-inset-bottom));
  transform:translateX(-50%);z-index:90;background:var(--tinta);color:var(--crema-cla);
  padding:.7rem 1.3rem;border-radius:999px;font-size:.88rem;font-weight:500;
  box-shadow:var(--sombra-alta);animation:sube .24s var(--suave)}
@keyframes sube{from{transform:translate(-50%,14px);opacity:0}to{transform:translate(-50%,0);opacity:1}}


/* ---------- superficies del navegador ----------
   Lo que no dibuje yo tambien es parte del diseno. */
::selection{background:rgba(154,95,8,.16);color:var(--tinta)}
:focus-visible{outline:2px solid var(--miel);outline-offset:2px;border-radius:6px}
input,textarea{caret-color:var(--miel)}


/* ---------- barra de pedido ----------
   Aparece sola en cuanto hay algo. Es el camino evidente a pagar para quien
   no sabe que existe un carrito arriba. */
.barra-pedido{position:fixed;left:0;right:0;bottom:0;z-index:45;
  padding:.7rem clamp(1.1rem,4vw,1.6rem) calc(.7rem + env(safe-area-inset-bottom));
  background:linear-gradient(to top,#fff 62%,rgba(255,255,255,0));
  animation:subeBarra .32s var(--suave)}
@keyframes subeBarra{from{transform:translateY(110%)}to{transform:none}}
.barra-b{display:flex;align-items:center;gap:.7rem;padding:.95rem 1.2rem;
  font-size:1rem;max-width:640px;margin-inline:auto}
.barra-n{min-width:26px;height:26px;padding:0 7px;border-radius:999px;
  background:rgba(255,255,255,.22);display:grid;place-items:center;
  font-size:.85rem;font-weight:600;font-variant-numeric:tabular-nums}
.barra-total{margin-left:auto;font-weight:600}
/* que la barra no tape la ultima fila de sabores */
body.con-barra main{padding-bottom:4.6rem}

/* ---------- sin zoom por doble toque ----------
   Se quejaba de que al mirar la carta se le hacia zoom sin querer.
   manipulation quita el doble toque pero DEJA el pellizco para ampliar. */
/* pan-x pan-y (y no manipulation) tambien bloquea el pellizco: la pagina no
   hace zoom de ninguna forma, como pidio. */
html{touch-action:pan-x pan-y}
/* las fotos ya no se abren ni sacan el menu de iOS al mantener pulsado */
img{-webkit-touch-callout:none;-webkit-user-drag:none;user-select:none;pointer-events:none}