:root{--n:#0A0A0A;--c:#F3EBDD;--a:#F5B31A;--g:#2A2A2A}*{box-sizing:border-box}html,body{margin:0;height:100%;overscroll-behavior:none}
body{background:var(--n);color:var(--c);font:16px/1.3 system-ui,sans-serif;display:flex;flex-direction:column;height:100dvh;overflow:hidden;-webkit-user-select:none;user-select:none}
header{display:flex;align-items:center;gap:10px;padding:8px 14px}header img{display:block;border-radius:50%}h1{font-size:20px;margin:0;flex:1;font-weight:800}.tot{text-align:right}.tot small{display:block;font-size:11px;opacity:.7}.tot strong{font-size:22px;color:var(--a)}
#plato{flex:1;min-height:150px;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 55%,#332408,#0a0a0a 70%);transition:box-shadow .2s}.near #plato{box-shadow:inset 0 0 0 3px var(--a)}
#tip{position:absolute;top:8px;left:0;right:0;margin:0;text-align:center;font-size:14px;opacity:.8;transition:opacity .2s}
#food{position:relative;width:min(70vw,44dvh,380px);aspect-ratio:1/.72}.pile{position:absolute;left:0;bottom:0;width:100%;filter:drop-shadow(0 10px 8px #000b)}.pile.b{transform:scaleX(-1);bottom:12%;filter:brightness(.8)}
#capa{position:absolute;inset:0}#capa .sc{position:absolute;left:4%;width:92%;bottom:8%;height:72%}#capa .tp{position:absolute;translate:-50% -50%;filter:drop-shadow(0 2px 2px #0009);border-radius:30%;object-fit:cover}
#chips{display:flex;gap:6px;overflow-x:auto;padding:6px 14px;min-height:42px;scrollbar-width:none}#chips button{flex:none;background:var(--g);color:var(--c);border:0;border-radius:99px;padding:6px 12px;font-size:14px;min-height:30px}
#chips .b0{opacity:.7;background:none;padding-left:0}
#bandeja{display:flex;gap:10px;overflow-x:auto;padding:6px 14px 10px;touch-action:pan-x;scrollbar-width:none}.it{flex:none;width:86px;background:var(--g);color:var(--c);border:2px solid transparent;border-radius:14px;padding:6px;text-align:center;position:relative;touch-action:pan-x;cursor:grab;font:inherit}.it.on{border-color:var(--a)}.it img,.it .ph{width:60px;height:60px;object-fit:contain;display:block;margin:0 auto 4px;pointer-events:none}.it .ph{border-radius:50%;background:#46601f;display:grid;place-items:center;font-size:24px;font-weight:800}.it b{display:block;font-size:12px;font-weight:600;min-height:30px;line-height:1.2}.it small{color:var(--a);font-size:13px;font-weight:700}.it u{position:absolute;top:-2px;right:-2px;background:var(--a);color:#000;border-radius:99px;min-width:22px;padding:2px 5px;font-size:12px;font-weight:800;text-decoration:none}
#ghost{position:fixed;width:84px;height:84px;object-fit:contain;translate:-50% -50%;pointer-events:none;z-index:9;filter:drop-shadow(0 8px 8px #000)}
footer{padding:8px 14px calc(8px + env(safe-area-inset-bottom));text-align:center}#pedir,#enviar,#wa{display:block;width:100%;background:var(--a);color:#111;border:0;border-radius:12px;padding:14px;font:800 17px system-ui;text-decoration:none;text-align:center;cursor:pointer}.firma{display:inline-block;color:var(--c);font-size:13px;padding:9px 6px 2px}.firma b{color:var(--a)}.ref{margin:0;font-size:10px;opacity:.55}
dialog{border:0;border-radius:18px;background:#181818;color:var(--c);width:min(92vw,420px);padding:18px;-webkit-user-select:text;user-select:text}dialog::backdrop{background:#000b}h2{margin:0 0 10px;font-size:20px}#res{font-size:14px;background:var(--g);border-radius:10px;padding:10px;margin-bottom:10px}#res div{display:flex;justify-content:space-between;gap:10px}#res .t{font-weight:800;color:var(--a);border-top:1px solid #555;margin-top:6px;padding-top:6px}label{display:block;font-size:13px;margin-bottom:8px}input{display:block;width:100%;margin-top:3px;padding:11px;border-radius:9px;border:1px solid #555;background:#0d0d0d;color:var(--c);font-size:16px}.hp{position:absolute;left:-9999px;width:1px}#err{color:#ff9a7a;font-size:14px;margin:4px 0;min-height:18px}.acc{display:flex;gap:8px}.sec{background:none;border:1px solid #777;color:var(--c);border-radius:12px;padding:13px;font-size:16px;cursor:pointer}#ok .sec{width:100%;margin-top:8px}
#toast{position:fixed;left:50%;bottom:150px;translate:-50% 0;background:#000;border:1px solid var(--a);padding:8px 14px;border-radius:99px;font-size:14px;opacity:0;pointer-events:none;transition:opacity .2s;white-space:nowrap}#toast.on{opacity:1}
:focus-visible{outline:3px solid #fff;outline-offset:2px}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

#prod{display:flex;gap:6px;padding:0 14px 8px}#prod button{flex:1;background:var(--g);color:var(--c);border:0;border-radius:99px;padding:9px 4px;font:700 14px system-ui;min-height:40px}#prod .on{background:var(--a);color:#111}
.gota{position:absolute;top:-8%;width:9px;height:15px;border-radius:50% 50% 50% 50%/30% 30% 70% 70%;animation:cae .7s ease-in backwards;z-index:5}@keyframes cae{from{transform:translateY(-120px);opacity:.9}to{transform:translateY(120px);opacity:0}}
.comp{position:absolute;inset:0}.pan{position:absolute;left:0;right:0;bottom:0;height:62px;background:linear-gradient(#e9b76d,#b9772d);border-radius:32px 32px 40px 40px;box-shadow:0 10px 14px #000a}.vien{position:absolute;left:-3%;right:-3%;bottom:40px;height:30px;background:linear-gradient(#c45a36,#8c3518);border-radius:20px;z-index:2}
.ly{position:absolute;left:4%;right:4%;height:20px;border-radius:12px 18px 10px 16px;box-shadow:0 2px 3px #0007}.ly.foto{height:30px;width:92%;object-fit:cover}.cae{animation:capa .4s cubic-bezier(.3,1.4,.5,1) backwards}@keyframes capa{from{transform:translateY(-110px);opacity:0}}
.emp{position:absolute;inset:0;perspective:700px}.masa,.tapa{position:absolute;left:6%;width:88%;background:radial-gradient(#f0cf8e,#d99f4e);box-shadow:0 8px 12px #0009}.masa{bottom:0;height:56%;border-radius:0 0 999px 999px}.tapa{top:0;height:46%;border-radius:999px 999px 0 0;transform-origin:bottom;transition:transform .7s;opacity:.96;bottom:auto}.emp.cerrada .tapa{transform:rotateX(-178deg)}.rell{position:absolute;inset:0;z-index:2;transition:opacity .4s}.emp.cerrada .rell{opacity:0}.fi{position:absolute;aspect-ratio:1;border-radius:40%;translate:-50% -50%}
html{overflow:hidden}#plato{overflow:hidden;max-width:100vw}
