/* =====================================================================
   MENÚ DE MOLIENDA (menu.html)
   Es el diseño del "Menú digital con pedido" de la web de Make it Easy:
   el producto es la foto recortada, flota sobre granos de café que caen,
   y al tocarlo crece al centro y le salen los ingredientes.
   ===================================================================== */

/* ---------- Fondo de granos ----------
   Tres capas fijas que se repiten. Al bajar la página cada una se mueve
   a distinta velocidad: las desenfocadas lento, las enfocadas rápido.
   Esa diferencia es lo único que produce la profundidad. */
.granos { position: fixed; inset: 0; z-index: 0; pointer-events: none; background-repeat: repeat; will-change: background-position; }
.granos.lejos { background-image: url(img/granos-lejos.webp); background-size: 600px auto; }
.granos.medio { background-image: url(img/granos-medio.webp); background-size: 780px auto; }
.granos.cerca { background-image: url(img/granos-cerca.webp); background-size: 900px auto; }
/* velo del color del papel: los granos quedan presentes pero nunca compiten con lo que hay que leer */
.velo { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(247, 242, 232, .66), rgba(247, 242, 232, .74) 45%, rgba(247, 242, 232, .66)); }
.carta-objeto .granos { opacity: .6; }
@media (prefers-reduced-motion: reduce) { .granos { display: none; } }
body.carta-objeto::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(40% 30% at 15% 8%, rgba(180, 86, 42, .10), transparent 62%), radial-gradient(35% 28% at 88% 30%, rgba(176, 136, 66, .10), transparent 62%);
}
.carta-objeto main, .carta-objeto .top, .carta-objeto .demo, .carta-objeto .pie { position: relative; z-index: 2; }
.wrap { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 0 22px; }

/* ---------- Barra superior ---------- */
.top { position: sticky; top: 0; z-index: 40; background: rgba(247, 242, 232, .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color .26s var(--ease), box-shadow .26s var(--ease); }
.top.is-stuck { border-bottom-color: var(--linea); box-shadow: 0 10px 30px -24px rgba(46, 33, 26, .6); }
.top-in { display: flex; align-items: center; gap: 16px; height: 64px; }
.brand { flex: none; display: flex; align-items: center; gap: 10px; white-space: nowrap; font: 800 16px/1.1 var(--f-titulo); text-decoration: none; color: var(--titulo); }
.brand .bead { width: 9px; height: 9px; border-radius: 50%; background: var(--acento); box-shadow: 0 0 0 4px var(--acento-suave); }
.brand small { display: block; font: 500 8.5px/1.4 var(--f-etiqueta); letter-spacing: .16em; text-transform: uppercase; color: var(--acento-2); }
.brand small { font-size: 10px; }
.navcat { margin-left: auto; min-width: 0; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.navcat::-webkit-scrollbar { display: none; }
.navcat a { flex: none; text-decoration: none; color: var(--texto-2); font-size: 13.5px; font-weight: 600; padding: 9px 15px; border-radius: 100px; transition: background .2s var(--ease), color .2s var(--ease); }
.navcat a:hover { background: var(--fondo-3); color: var(--titulo); }
.navcat a.is-on { background: var(--titulo); color: var(--fondo); }

/* ---------- Portada de la carta ---------- */
.carta-portada { padding: 56px 0 22px; text-align: center; }
.carta-portada .kick { display: inline-flex; align-items: center; gap: 9px; font: 500 11.5px/1 var(--f-etiqueta); letter-spacing: .2em; text-transform: uppercase; color: var(--acento-2); margin-bottom: 16px; }
.carta-portada .kick::before, .carta-portada .kick::after { content: ""; width: 24px; height: 1px; background: var(--acento); opacity: .55; }
.carta-portada h1 { font: 800 clamp(34px, 6vw, 58px)/1.06 var(--f-titulo); letter-spacing: -.02em; color: var(--titulo); }
.carta-portada h1 em { font-style: normal; color: #A34B22; }
.carta-portada p { margin: 18px auto 0; max-width: 52ch; font-size: 16px; line-height: 1.65; color: var(--texto-2); }
.carta-portada .mesa-qr { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 8px 14px; border-radius: 99px; background: var(--titulo); color: var(--fondo); font-weight: 700; font-size: 14px; }
.carta-portada .mesa-qr .ico { width: 18px; height: 18px; }
.scrollhint { margin-top: 30px; font: 500 10.5px/1 var(--f-etiqueta); letter-spacing: .16em; text-transform: uppercase; color: var(--texto-3); }
.scrollhint i { display: inline-block; font-style: normal; animation: bob 1.7s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(5px); } }

/* Promos de hoy */
.promos-hoy { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 12px; margin: 18px 0 6px; }
.promo-hoy { display: flex; align-items: center; gap: 14px; text-align: left; background: var(--fondo-2); border: 1px dashed rgba(180, 86, 42, .45); border-radius: 16px; padding: 14px 16px; }
.promo-hoy__txt { flex: 1; min-width: 0; }
.promo-hoy__txt small { display: block; font: 500 10px/1 var(--f-etiqueta); letter-spacing: .16em; text-transform: uppercase; color: var(--acento-2); margin-bottom: 6px; }
.promo-hoy__txt b { display: block; font: 800 17px/1.2 var(--f-titulo); color: var(--titulo); }
.promo-hoy__txt span { display: block; font-size: 13px; color: var(--texto-3); margin-top: 3px; }
.promo-hoy button { flex: none; display: grid; justify-items: center; gap: 3px; padding: 9px 14px; border-radius: 14px; background: var(--acento-suave); color: var(--acento-2); border: 1px solid rgba(180, 86, 42, .28); transition: background .18s, color .18s, transform .2s var(--ease-rebote); }
.promo-hoy button b { font: 800 16px/1 var(--f-titulo); }
.promo-hoy button span { font-size: 12px; font-weight: 700; }
.promo-hoy button:hover { background: var(--acento); color: #fff; }
.promo-hoy button:active { transform: scale(.9); }

/* ---------- Secciones ---------- */
.sec { padding: 30px 0 8px; scroll-margin-top: 78px; }
.sec-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 26px; }
.sec-head h2 { font: 800 clamp(22px, 3.4vw, 30px)/1.1 var(--f-titulo); letter-spacing: -.02em; color: var(--titulo); }
.sec-head .rule { flex: 1; height: 1px; background: var(--linea); }
.sec-head .cnt { font: 500 11.5px/1 var(--f-etiqueta); color: var(--texto-3); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(214px, 1fr)); gap: 15px; }

/* ---------- Tarjeta de producto ---------- */
.card {
  position: relative; background: var(--fondo-2); border: 1px solid var(--linea); border-radius: 18px;
  padding: 15px 15px 13px; cursor: pointer; overflow: hidden; box-shadow: 0 18px 40px -34px rgba(46, 33, 26, .55);
  transition: transform .38s var(--ease), box-shadow .38s var(--ease), border-color .24s var(--ease);
  opacity: 0; transform: translateY(22px);
}
.card.is-in { opacity: 1; transform: none; transition: opacity .62s var(--ease), transform .62s var(--ease), box-shadow .38s var(--ease), border-color .24s var(--ease); }
.card:hover { transform: translateY(-5px); box-shadow: 0 30px 56px -34px rgba(46, 33, 26, .6); border-color: rgba(180, 86, 42, .35); }
.card:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }
.card.agotado { cursor: default; }
.card.agotado .dish, .card.agotado h3, .card.agotado .desc { opacity: .42; filter: grayscale(.7); }
.card.agotado:hover { transform: none; box-shadow: 0 18px 40px -34px rgba(46, 33, 26, .55); border-color: var(--linea); }
.agotado-cartel { font: 600 11px/1 var(--f-etiqueta); letter-spacing: .1em; text-transform: uppercase; color: var(--texto-3); padding: 9px 0; }
.dish { position: relative; aspect-ratio: 1 / .78; margin: 1px 0 9px; perspective: 620px; }
.dish-shadow { position: absolute; left: 50%; bottom: 11%; transform: translateX(-50%) scale(.6); width: 38%; height: 12px; border-radius: 50%; opacity: .06; background: radial-gradient(closest-side, rgba(46, 33, 26, .6), transparent 72%); filter: blur(3px); transition: opacity .12s linear; }
.dish-item { position: absolute; inset: 2% 10% 12%; will-change: transform; transform-style: preserve-3d; }
.dish-item img { width: 100%; height: 100%; object-fit: contain; filter: saturate(1.04) drop-shadow(0 10px 12px rgba(46, 33, 26, .16)); transition: transform .42s var(--ease); }
.card:hover .dish-item img { transform: scale(1.06); }
.card.tilt .dish-item img { transition: transform .12s linear; }
.card h3 { font: 800 15.2px/1.25 var(--f-titulo); color: var(--titulo); }
.card .desc { margin-top: 5px; font-size: 12.5px; line-height: 1.5; color: var(--texto-3); min-height: 2.5em; }
.card .foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 9px; padding: 9px 0 0; border-top: 1px solid var(--linea); }
.add-fast { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(180, 86, 42, .28); background: var(--acento-suave); color: var(--acento-2); display: grid; place-items: center; transition: background .18s, color .18s, border-color .18s, transform .2s var(--ease-rebote); }
.add-fast .ico { width: 16px; height: 16px; stroke-width: 2.6; }
.add-fast:hover { background: var(--acento); border-color: var(--acento); color: #fff; }
.add-fast:active { transform: scale(.86); }
.add-fast .n { display: none; }
.add-fast.tiene { width: auto; padding: 0 10px 0 8px; gap: 3px; display: inline-flex; align-items: center; background: var(--acento); border-color: var(--acento); color: #fff; }
.add-fast.tiene .n { display: inline; font-weight: 800; font-size: 13px; }
.price { font: 800 17px/1 var(--f-titulo); color: var(--acento-2); }
.price small { font: 500 11.5px/1 var(--f-texto); color: var(--texto-3); }
.tags { position: absolute; top: 14px; left: 14px; display: flex; flex-direction: column; gap: 5px; z-index: 3; }
.tag { font: 500 9.5px/1 var(--f-etiqueta); letter-spacing: .08em; text-transform: uppercase; padding: 5px 8px; border-radius: 100px; background: var(--acento-suave); border: 1px solid rgba(180, 86, 42, .32); color: var(--acento-2); }

/* ---------- Escena del producto ---------- */
.stage { position: fixed; inset: 0; z-index: 70; padding: 14px; opacity: 0; pointer-events: none; transition: opacity .32s var(--ease); }
.stage.is-on { opacity: 1; pointer-events: auto; }
.stage-bg { position: absolute; inset: 0; background: rgba(46, 33, 26, .52); backdrop-filter: blur(13px) saturate(.9); -webkit-backdrop-filter: blur(13px) saturate(.9); }
.win { position: relative; z-index: 2; width: 100%; height: 100%; display: flex; flex-direction: column; }
.stage-x { position: fixed; top: 16px; right: 16px; z-index: 8; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--linea); background: var(--fondo); color: var(--titulo); display: grid; place-items: center; transition: background .2s, color .2s; }
.stage-x:hover { background: var(--acento); border-color: var(--acento); color: #fff; }
.stage-x .ico { width: 16px; height: 16px; }
.win-scene { position: absolute; inset: 0; }
.win-abajo { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; }
.hero { position: absolute; z-index: 4; cursor: pointer; }
.hero img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 26px 34px rgba(28, 18, 12, .42)); pointer-events: none; user-select: none; -webkit-user-drag: none; }
.hero-pista { text-align: center; margin: 0 0 10px; text-shadow: 0 1px 10px rgba(28, 18, 12, .7); font: 500 10px/1 var(--f-etiqueta); letter-spacing: .13em; text-transform: uppercase; color: rgba(247, 242, 232, .7); opacity: 0; transition: opacity .34s var(--ease); }
.stage.abierto .hero-pista { opacity: 1; }
.stage.ings .hero-pista { opacity: 0; }
.lines { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: visible; width: 100%; height: 100%; }
.lines path { fill: none; stroke: #D9793F; stroke-width: 1.6; opacity: .75; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .46s var(--ease); }
.lines path.on { stroke-dashoffset: 0; }
.lines circle { fill: #D9793F; opacity: 0; transition: opacity .22s var(--ease); }
.lines circle.on { opacity: .95; }
.chip { position: absolute; z-index: 5; display: inline-flex; align-items: center; gap: 7px; background: var(--fondo); border: 1px solid var(--linea); border-radius: 100px; padding: 5px 12px 5px 6px; white-space: nowrap; font-size: 12.4px; color: var(--texto-2); box-shadow: 0 10px 22px -16px rgba(46, 33, 26, .6); opacity: 0; pointer-events: none; will-change: transform, opacity; }
.stage.ings .chip { pointer-events: auto; }
.chip.alerg { background: #FDF3EC; color: var(--acento-2); }
.chip i { width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--fondo-2); border: 1px solid var(--linea); display: grid; place-items: center; }
.chip i svg { width: 13px; height: 13px; display: block; }
.chip i svg .s { fill: none; stroke: var(--acento-2); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.chip i svg .f { fill: var(--acento-2); }
.hpanel { text-align: center; margin: 0 auto; width: min(500px, 100%); padding: 0 16px 4px; opacity: 0; transform: translateY(14px); transition: opacity .38s var(--ease), transform .42s var(--ease); }
.stage.abierto .hpanel { opacity: 1; transform: none; }
.hpanel h2 { font: 800 26px/1.14 var(--f-titulo); color: var(--fondo); text-shadow: 0 2px 18px rgba(28, 18, 12, .55); }
.hpanel .d { margin-top: 7px; font-size: 14px; line-height: 1.5; color: rgba(247, 242, 232, .84); text-shadow: 0 1px 12px rgba(28, 18, 12, .5); }
.hpanel .sizes { display: flex; gap: 8px; justify-content: center; margin-top: 15px; flex-wrap: wrap; }
.hpanel .size { flex: 1 1 0; min-width: 126px; max-width: 215px; text-align: left; background: rgba(255, 253, 248, .13); backdrop-filter: blur(6px); border: 1px solid rgba(247, 242, 232, .3); border-radius: 13px; padding: 10px 13px; transition: background .2s, border-color .2s; }
.hpanel .size b { display: block; font: 800 13px/1.2 var(--f-titulo); color: var(--fondo); }
.hpanel .size span { display: block; font-size: 14px; color: #F0A26E; font-weight: 700; margin-top: 2px; }
.hpanel .size:hover { border-color: rgba(247, 242, 232, .7); background: rgba(255, 253, 248, .2); }
.hpanel .size.is-on { background: var(--fondo); border-color: var(--fondo); }
.hpanel .size.is-on b { color: var(--titulo); }
.hpanel .size.is-on span { color: var(--acento-2); }
.hpanel .addrow { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.hpanel .qty { display: flex; align-items: center; gap: 2px; background: rgba(255, 253, 248, .14); backdrop-filter: blur(6px); border: 1px solid rgba(247, 242, 232, .3); border-radius: 100px; padding: 3px; }
.hpanel .qty button { width: 36px; height: 36px; border-radius: 50%; color: var(--fondo); display: grid; place-items: center; transition: background .18s; }
.hpanel .qty button .ico { width: 16px; height: 16px; }
.hpanel .qty button:hover { background: rgba(255, 253, 248, .22); }
.hpanel .qty button:disabled { opacity: .35; cursor: default; }
.hpanel .qty b { min-width: 26px; text-align: center; font: 800 15px/1 var(--f-titulo); color: var(--fondo); }
.hpanel .add { flex: 1; min-height: 50px; border-radius: 100px; padding: 14px 18px; background: linear-gradient(100deg, #A64E25, #C8683A); color: #fff; font: 800 14.5px/1 var(--f-titulo); box-shadow: 0 16px 32px -14px rgba(180, 86, 42, .9); transition: transform .2s var(--ease-rebote); }
.hpanel .add:hover { transform: translateY(-2px); }
.hpanel .add:active { transform: scale(.97); }

/* la miga que vuela al pedido al agregar */
.crumb { position: fixed; z-index: 60; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; background: var(--fondo-2); border: 1px solid var(--linea); pointer-events: none; box-shadow: 0 10px 22px -10px rgba(46, 33, 26, .6); }
.crumb img { width: 100%; height: 100%; object-fit: contain; }

/* ---------- Barra de pedido ---------- */
.bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: rgba(255, 253, 248, .92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--linea); padding: 12px 22px calc(12px + env(safe-area-inset-bottom, 0px)); transform: translateY(120%); transition: transform .52s var(--ease); }
.bar.is-up { transform: none; }
.bar-in { max-width: 1180px; margin: 0 auto; display: flex; align-items: center; gap: 14px; }
.bar .info { min-width: 0; }
.bar .info b { display: block; font: 800 15px/1.2 var(--f-titulo); color: var(--titulo); }
.bar .info span { display: block; font-size: 12.5px; color: var(--texto-3); margin-top: 2px; }
.bar .go { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 9px; text-decoration: none; background: var(--titulo); color: var(--fondo); border-radius: 100px; padding: 13px 22px; font: 800 14px/1 var(--f-titulo); transition: transform .2s var(--ease-rebote), background .22s var(--ease); }
.bar .go:hover { transform: translateY(-2px); background: var(--acento-2); }
.bar .go .ico { width: 16px; height: 16px; }
.bar .go .n { background: var(--acento); color: #fff; border-radius: 100px; min-width: 22px; height: 22px; display: inline-grid; place-items: center; font-size: 12px; padding: 0 6px; }
.bar.pop .go .n { animation: pop .42s var(--ease-rebote); }
@keyframes pop { 40% { transform: scale(1.45); } }
body.con-barra { padding-bottom: 80px; }
.toast { position: fixed; left: 50%; bottom: calc(92px + env(safe-area-inset-bottom, 0px)); z-index: 55; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; background: var(--titulo); color: var(--fondo); border-radius: 100px; padding: 10px 18px; font-size: 13.5px; font-weight: 600; box-shadow: 0 18px 40px -20px rgba(46, 33, 26, .8); transition: opacity .3s var(--ease), transform .3s var(--ease); white-space: nowrap; max-width: calc(100vw - 32px); overflow: hidden; text-overflow: ellipsis; }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

.carta-pie { margin-top: 46px; padding: 30px 0 40px; border-top: 1px solid var(--linea); text-align: center; }
.carta-pie b { font: 800 15px/1 var(--f-titulo); color: var(--titulo); }
.carta-pie p { margin-top: 8px; font-size: 13px; color: var(--texto-3); line-height: 1.7; }
.carta-pie .qr { margin-top: 16px; font: 500 10.5px/1 var(--f-etiqueta); letter-spacing: .14em; text-transform: uppercase; color: var(--texto-3); }
.carta-pie a { color: var(--acento-2); font-weight: 700; }

@media (max-width: 720px) {
  .wrap { padding: 0 15px; }
  .top-in { height: 58px; gap: 10px; }
  .brand { font-size: 14.5px; }
  .brand small { font-size: 9.5px; }
  .navcat { gap: 2px; }
  .navcat a { font-size: 12.3px; padding: 7px 10px; }
  .carta-portada { padding: 34px 0 16px; }
  .carta-portada p { font-size: 14.5px; }
  .grid { grid-template-columns: 1fr 1fr; gap: 11px; }
  .card { padding: 10px 10px 11px; border-radius: 15px; }
  .card h3 { font-size: 13.4px; }
  .card .desc { font-size: 11.6px; min-height: 3.1em; }
  .price { font-size: 15px; }
  .tags { top: 10px; left: 10px; }
  .tag { font-size: 8.6px; padding: 4px 6px; }
  .stage { padding: 10px; }
  .hpanel { padding: 13px 14px 15px; }
  .hpanel h2 { font-size: 20px; }
  .hpanel .size { min-width: 0; padding: 9px 11px; }
  .hpanel .add { padding: 13px 14px; font-size: 13.5px; }
  .chip { font-size: 11.4px; padding: 4px 10px 4px 5px; }
  .chip i { width: 19px; height: 19px; }
  .chip i svg { width: 11px; height: 11px; }
  .stage-x { top: 10px; right: 10px; }
  .bar { padding: 10px 15px calc(10px + env(safe-area-inset-bottom, 0px)); }
  .bar .info b { font-size: 13.5px; }
  .bar .info span { font-size: 11.6px; }
  .bar .go { padding: 12px 16px; font-size: 13px; }
}
@media (max-width: 330px) { .grid { grid-template-columns: 1fr; } .card .desc { min-height: 0; } }
@media (hover: none) {
  .card:hover { transform: none; box-shadow: 0 18px 40px -34px rgba(46, 33, 26, .55); border-color: var(--linea); }
  .card:hover .dish-item img { transform: none; }
  .bar .go:hover, .hpanel .add:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .card { opacity: 1 !important; transform: none !important; }
  .chip { opacity: 1 !important; }
  .lines path { stroke-dashoffset: 0 !important; }
}