/* Holly Burgers · base, inicio, carta y armador */
:root {
  --az: #0071E9; --az2: #0A4FD6; --azd: #062A8C;
  --noche: #070A12; --noche2: #0F1629;
  --am: #FFD21F; --am2: #F6B400;
  --cel: #4AC0EE; --papel: #FFFCF4; --tinta: #0B1020; --mut: #6B7083;
  --rojo: #E63B2E; --verde: #2E9B45; --line: rgba(11, 16, 32, .1);
  --fb: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ft: 'Titan One', 'Poppins', system-ui, sans-serif;
  --fs: 'Lobster', 'Brush Script MT', cursive;
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --out: cubic-bezier(.2, .8, .2, 1);
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --chk: conic-gradient(#fff 25%, var(--cel) 0 50%, #fff 0 75%, var(--cel) 0);
  --chk-s: conic-gradient(#fff 25%, #DDF2FC 0 50%, #fff 0 75%, #DDF2FC 0);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body { font: 500 14.5px/1.45 var(--fb); color: var(--tinta); background: var(--noche); overflow: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
img { max-width: 100%; }
a { color: inherit; }
ul, ol { padding: 0; }
:focus-visible { outline: 3px solid var(--cel); outline-offset: 2px; }

#app { position: relative; width: 100%; height: 100dvh; margin: 0 auto; overflow: hidden; background: var(--papel); isolation: isolate; container-type: inline-size; }
#view { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; padding-bottom: calc(96px + var(--sab)); scrollbar-width: none; overscroll-behavior: contain; background: var(--papel); outline: 0; }
#view::-webkit-scrollbar { display: none; }
#view.vin > * { animation: viewin .45s var(--out) backwards; }
#view.v-hoy { background: #05070D; }

.scr { font-family: var(--fs); font-weight: 400; font-style: normal; letter-spacing: 0; text-transform: none; }

/* ───── botones ───── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 22px; border-radius: 99px; font: 800 15px/1 var(--fb); letter-spacing: -.01em; text-decoration: none; white-space: nowrap; transition: transform .16s var(--out), box-shadow .16s; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:active { transform: scale(.96); }
.btn.sm { height: 40px; padding: 0 16px; font-size: 13px; }
.btn.sm svg { width: 15px; height: 15px; }
.btn-y { background: var(--am); color: var(--tinta); box-shadow: 0 5px 0 #B98300; }
.btn-y:active { transform: translateY(4px); box-shadow: 0 1px 0 #B98300; }
.btn-y.sm, .btn-az.sm { box-shadow: 0 3px 0 #B98300; }
.btn-az { background: var(--az); color: #fff; box-shadow: 0 5px 0 var(--azd); }
.btn-az.sm { box-shadow: 0 3px 0 var(--azd); }
.btn-az:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--azd); }
.btn-k { background: var(--tinta); color: #fff; }
.btn-w { background: #fff; color: var(--tinta); }
.btn-gl { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .32); }
.btn-ol { box-shadow: inset 0 0 0 2px var(--tinta); color: var(--tinta); }
.lnk { display: inline-flex; align-items: center; gap: 4px; font: 700 12.5px var(--fb); color: var(--az); }
.lnk svg { width: 14px; height: 14px; }

.coin { --cs: 26px; display: inline-block; flex: none; position: relative; width: var(--cs); height: var(--cs); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFF3A8, #FFD21F 45%, #E39A00); box-shadow: inset 0 0 0 calc(var(--cs) * .08) #C98600, inset 0 0 0 calc(var(--cs) * .15) #FFE25A, 0 2px 0 #9A6500; }
.coin::after { content: ""; position: absolute; inset: 22% 29%; background: #9A6500; clip-path: polygon(58% 0, 12% 56%, 44% 56%, 36% 100%, 88% 40%, 56% 40%); }

/* ───── barra de arriba ───── */
.top { position: absolute; top: 0; left: 0; right: 0; z-index: 6; display: flex; align-items: center; justify-content: space-between; padding: calc(12px + var(--sat)) 14px 0; }
.top-l { display: flex; align-items: center; gap: 9px; }
.top-l img { width: 42px; height: 42px; border-radius: 50%; background: #000; object-fit: cover; box-shadow: 0 0 0 2px var(--am), 0 4px 12px rgba(0, 0, 0, .35); }
.top-l b { display: block; font: 800 13.5px/1.1 var(--fb); letter-spacing: -.01em; }
.top-l small { display: flex; align-items: center; gap: 5px; font: 600 11px/1.2 var(--fb); opacity: .92; margin-top: 3px; }
.top-l small i { width: 7px; height: 7px; border-radius: 50%; background: #35E07A; animation: pulse 1.8s infinite; }
.top-l small.closed i { background: #FFB020; animation: none; }
.top-r { display: flex; gap: 8px; }
.snd, .fch { height: 38px; border-radius: 99px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .17); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.snd { width: 38px; }
.snd svg { width: 18px; height: 18px; }
.fch { gap: 6px; padding: 0 12px 0 6px; font: 800 14px var(--fb); }
.on-blue, .on-dark { color: #fff; }
.on-paper .snd, .on-paper .fch { background: rgba(11, 16, 32, .07); }
.on-yellow .snd, .on-yellow .fch { background: rgba(255, 255, 255, .6); }

/* ───── navegación ───── */
#nav { position: absolute; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: 1fr 1fr 80px 1fr 1fr; grid-template-rows: 66px; align-items: end; height: calc(66px + var(--sab)); padding: 0 6px var(--sab); background: var(--tinta); border-radius: 26px 26px 0 0; box-shadow: 0 -10px 30px -10px rgba(0, 0, 0, .5); }
#nav button { position: relative; height: 66px; display: grid; place-content: center; justify-items: center; gap: 3px; color: #8A93B0; font: 600 10.5px var(--fb); transition: color .25s; }
#nav button > svg { width: 23px; height: 23px; transition: transform .4s var(--spring); }
#nav button.on { color: var(--am); }
#nav button.on > svg { transform: translateY(-2px) scale(1.14); }
#nav .nj { height: 94px; margin-top: -28px; color: #fff; align-content: start; gap: 4px; }
#nav .nj.on { color: var(--am); }
.nj-w { position: relative; display: block; width: 62px; height: 62px; border-radius: 50%; padding: 4px; background: conic-gradient(#FFD21F, #F6A51B, #FFF0A0, #F6A51B, #FFD21F); box-shadow: 0 0 0 5px var(--tinta), 0 0 22px rgba(255, 210, 31, .55); transition: box-shadow .3s, transform .4s var(--spring); }
.nj.on .nj-w { transform: scale(1.06); box-shadow: 0 0 0 5px var(--tinta), 0 0 0 7px var(--am), 0 0 30px rgba(255, 210, 31, .85); }
.nb { position: absolute; top: 8px; left: 50%; margin-left: 5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--rojo); color: #fff; font: 800 10.5px/18px var(--fb); font-style: normal; text-align: center; box-shadow: 0 0 0 2px var(--tinta); }
.nb.y { top: -3px; margin-left: 14px; background: #fff; color: var(--tinta); }
.bump { animation: bump .45s var(--spring); }
.pop { animation: pop .45s var(--spring); }

/* ───── HOY: portada ───── */
.hero { --y: 0; position: relative; height: min(78dvh, 600px); min-height: 500px; background: var(--az); overflow: hidden; color: #fff; cursor: pointer; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 42% 55%; translate: 0 calc(var(--y) * .24px); scale: calc(1.06 + var(--y) * .0005); animation: heroin 1.5s var(--out) backwards; will-change: transform; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0, 60, 170, .6) 0, transparent 34%, transparent 60%, rgba(0, 46, 140, .66) 100%); pointer-events: none; }
.hero::after { content: ""; position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 16px; background: var(--chk) 0 0/16px 16px; animation: chk 1.1s linear infinite; }
.hero-txt { position: absolute; z-index: 2; left: 18px; right: 12px; top: calc(74px + var(--sat)); translate: 0 calc(var(--y) * -.14px); opacity: calc(1 - var(--y) / 360); }
.hero-eb { display: block; font-size: 23px; color: var(--am); transform: rotate(-3deg); transform-origin: left; text-shadow: 0 2px 0 rgba(6, 42, 140, .5); animation: rise .6s var(--out) .2s backwards; }
.hero-t { font: italic 900 66px/.95 var(--fb); font-size: clamp(54px, 18cqw, 76px); letter-spacing: -.045em; margin-top: 2px; white-space: nowrap; }
.hero-t i { display: inline-block; font-style: inherit; text-shadow: 0 1px 0 #dbe9ff, 3px 4px 0 var(--am), 6px 8px 0 rgba(6, 42, 140, .55); animation: letter .7s var(--spring) backwards; animation-delay: calc(.3s + var(--i) * 55ms); }
.hero-t .sp, .win-t .sp { width: .22em; display: inline-block; }
.ring { position: absolute; z-index: 3; right: 14px; bottom: 132px; width: 104px; height: 104px; border-radius: 50%; background: var(--am); color: var(--tinta); display: grid; place-items: center; box-shadow: 0 10px 24px rgba(0, 30, 110, .45); animation: stick .7s var(--spring) .85s backwards; }
.ring svg { position: absolute; inset: 0; animation: spin 14s linear infinite; }
.ring text { font: 800 10.5px var(--fb); letter-spacing: .04em; fill: var(--tinta); }
.ring b { font: 700 9.5px/1.1 var(--fb); text-align: center; text-transform: uppercase; letter-spacing: .1em; }
.ring b i { display: block; font: italic 900 16px/1 var(--fb); letter-spacing: -.03em; margin-top: 2px; }
.hero-b { position: absolute; z-index: 3; left: 18px; bottom: 36px; display: grid; gap: 12px; justify-items: start; }
.hero-l { font: 800 20px/1.1 var(--fb); letter-spacing: -.02em; text-shadow: 0 2px 12px rgba(0, 40, 130, .7); animation: rise .6s var(--out) .9s backwards; }
.hero-b .btn { animation: rise .6s var(--out) 1.05s backwards; }

.marq { position: relative; z-index: 4; margin: -8px -12px 0; padding: 10px 0; background: var(--am); color: var(--tinta); transform: rotate(-2deg); overflow: hidden; box-shadow: 0 8px 20px -10px rgba(11, 16, 32, .5); }
.marq-in { display: flex; gap: 14px; width: max-content; animation: marq 28s linear infinite; font: italic 900 14px/1 var(--fb); text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; }
.marq-in b { color: var(--az); }

.paper { position: relative; z-index: 2; margin-top: -14px; padding: 18px 0 34px; background: var(--papel); border-radius: 0 0 34px 34px; }
.sec { padding: 0 16px; margin-top: 26px; }
.sec-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
h2 { font: italic 900 27px/.95 var(--fb); letter-spacing: -.04em; text-transform: uppercase; }
h2 .scr { display: block; font-size: 22px; color: var(--az); transform: rotate(-3deg); transform-origin: left bottom; margin-bottom: 1px; }
.rv { opacity: 0; transform: translateY(28px) scale(.97); transition: opacity .6s var(--out), transform .75s var(--spring); }
.rv.seen { opacity: 1; transform: none; }

/* tarjeta de la ruleta */
.rcard { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px; border-radius: 28px; color: #fff; overflow: hidden; background: linear-gradient(rgba(74, 192, 238, .08) 1px, transparent 1px) 0 0/26px 26px, linear-gradient(90deg, rgba(74, 192, 238, .08) 1px, transparent 1px) 0 0/26px 26px, radial-gradient(120% 140% at 0 0, #12349A, #0B1020 62%); box-shadow: inset 0 0 0 2px #2E7BFF, 0 14px 34px -12px rgba(0, 80, 220, .65); transition: transform .2s var(--out); }
.rcard:active { transform: scale(.98); }
.rc-t { flex: 1; min-width: 0; display: grid; text-align: left; }
.rc-t .scr { font-size: 17px; color: var(--am); transform: rotate(-3deg); transform-origin: left; }
.rc-t > b { font: italic 900 23px/1 var(--fb); letter-spacing: -.03em; text-transform: uppercase; text-shadow: 0 0 14px rgba(90, 160, 255, .9); }
.rc-t small { font: 500 12px/1.3 var(--fb); opacity: .88; margin-top: 5px; }
.rc-t em { font-style: normal; font-weight: 800; color: var(--am); }
.rc-f { display: inline-flex; align-items: center; gap: 6px; margin-top: 9px; font: 700 11.5px var(--fb); }
.rc-f .coin { --cs: 18px; }
.rc-go { position: absolute; right: 14px; top: 14px; padding: 6px 12px; border-radius: 99px; background: var(--am); color: var(--tinta); font: 800 11px var(--fb); text-transform: uppercase; letter-spacing: .05em; animation: nudge 1.6s ease-in-out infinite; }

/* las cinco */
.rail { display: flex; gap: 12px; overflow-x: auto; padding: 36px 16px 20px; margin: 0 -16px; scroll-snap-type: x proximity; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.bcard { position: relative; flex: none; width: 160px; height: 210px; padding: 0 14px 14px; border-radius: 28px; background: linear-gradient(165deg, var(--c), var(--c2)); color: var(--on); display: flex; flex-direction: column; justify-content: flex-end; text-align: left; scroll-snap-align: center; box-shadow: 0 16px 28px -14px var(--c2); animation: cardin .7s var(--spring) backwards; animation-delay: calc(var(--i) * 80ms + .15s); transition: transform .25s var(--spring); }
.bcard:active { transform: scale(.95) rotate(-1.5deg); }
.bcard img { position: absolute; top: -30px; left: 50%; width: 144px; margin-left: -72px; filter: drop-shadow(0 12px 10px rgba(0, 0, 0, .3)); animation: float 4.5s ease-in-out infinite; animation-delay: calc(var(--i) * -.9s); }
.bname { display: block; font-size: 27px; line-height: 1; white-space: nowrap; transform-origin: left bottom; }
.bl { font: 600 11px/1.25 var(--fb); opacity: .95; margin-top: 7px; min-height: 28px; padding-right: 4px; }
.bp { font: 500 10.5px var(--fb); margin-top: 6px; }
.bp b { font: 800 14px var(--fb); display: block; }
.plus { position: absolute; right: 12px; bottom: 12px; width: 34px; height: 34px; border-radius: 50%; background: #fff; color: var(--tinta); display: grid; place-items: center; }
.plus svg { width: 16px; height: 16px; }
.tag-new { position: absolute; top: 12px; left: 12px; z-index: 2; padding: 4px 8px; border-radius: 8px; background: #fff; color: var(--rojo); font: 900 10px/1 var(--fb); letter-spacing: .12em; transform: rotate(-8deg); box-shadow: 2px 2px 0 rgba(0, 0, 0, .25); }

/* nombres con la letra de cada placa */
.l-holly, .l-classic, .l-cheese, .l-crispy, .l-okla { color: #fff; display: inline-block; }
.l-holly { font-family: var(--fb); font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: -.03em; transform: rotate(-4deg); text-shadow: .05em .06em 0 var(--c2), .09em .11em 0 rgba(0, 0, 0, .18); }
.l-classic { font-family: var(--ft); font-weight: 400; text-transform: uppercase; letter-spacing: .01em; transform: rotate(-4deg); text-shadow: .05em .07em 0 var(--c2), .09em .12em 0 rgba(0, 0, 0, .18); }
.l-crispy { font-family: var(--ft); font-weight: 400; text-transform: uppercase; transform: rotate(-4deg) skewX(-9deg); text-shadow: .06em .07em 0 var(--c2), .1em .12em 0 rgba(0, 0, 0, .18); }
.l-cheese, .l-okla { font-family: var(--fs); font-weight: 400; font-size: 1.14em; transform: rotate(-6deg); text-shadow: .04em .05em 0 var(--c2), .08em .1em 0 rgba(0, 0, 0, .18); padding-right: .1em; }

.siempre { display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 8px; border-radius: 24px; background: #fff; border: 2px dashed var(--cel); }
.siempre img { width: 76px; flex: none; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .2)); transform: rotate(-6deg); }
.siempre div { flex: 1; min-width: 0; }
.siempre .scr { font-size: 17px; color: var(--az); }
.siempre h4 { font: 800 13.5px/1.2 var(--fb); letter-spacing: -.01em; }
.siempre b { font: 800 14px var(--fb); color: var(--az); }

.hcmini { display: grid; gap: 12px; width: 100%; padding: 16px; border-radius: 28px; text-align: left; color: var(--tinta); background: linear-gradient(rgba(11, 16, 32, .09) 2px, transparent 2px) 0 -1px/100% 36px, linear-gradient(90deg, rgba(11, 16, 32, .09) 2px, transparent 2px) -1px 0/36px 100%, var(--am); box-shadow: 0 14px 26px -16px #B98300; transition: transform .2s var(--out); }
.hcmini:active { transform: scale(.98); }
.hc-h { display: flex; justify-content: space-between; align-items: center; }
.hc-h b { font: italic 900 22px/1 var(--fb); text-transform: uppercase; letter-spacing: -.03em; }
.hc-h b .scr { font-size: 21px; color: var(--az); margin-right: 2px; }
.hc-h em { font: 800 13px var(--fb); font-style: normal; background: var(--tinta); color: var(--am); padding: 5px 11px; border-radius: 99px; }
.hc-dots { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.hc-dots i { aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .6); border: 2px dashed rgba(11, 16, 32, .35); display: grid; place-items: center; color: rgba(11, 16, 32, .55); }
.hc-dots i svg { width: 58%; height: 58%; }
.hc-dots i.on { background: var(--az); border: 2px solid var(--tinta); color: #fff; }
.hc-m { font: 500 13px/1.3 var(--fb); }

.trip { position: relative; display: flex; align-items: center; border-radius: 28px; overflow: hidden; padding: 20px 0 18px 18px; background: var(--chk-s) 0 0/28px 28px; border: 2px solid var(--cel); }
.trip-t { flex: 1; min-width: 0; position: relative; z-index: 1; }
.l-trip { display: inline-block; font: italic 900 29px/1 var(--fb); text-transform: uppercase; letter-spacing: -.04em; color: #fff; background: var(--cel); padding: 4px 13px 5px 10px; border-radius: 10px; transform: rotate(-4deg) skewX(-6deg); box-shadow: 3px 4px 0 var(--az); }
.trip p { font: 600 12.5px/1.3 var(--fb); margin-top: 14px; max-width: 168px; }
.trip-b { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.trip-b b { font: 900 20px var(--fb); letter-spacing: -.03em; }
.trip img { width: 178px; margin: 0 -26px 0 -30px; flex: none; filter: drop-shadow(0 10px 8px rgba(0, 0, 0, .25)); animation: float 5s ease-in-out infinite; }

.amigo { position: relative; display: block; width: 100%; border-radius: 28px; overflow: hidden; aspect-ratio: 1/1.08; color: #fff; text-align: left; }
.amigo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; transform: scale(1.12); transition: transform 1.6s var(--out); }
.rv.seen .amigo img { transform: none; }
.amigo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 42%, rgba(7, 10, 18, .9)); }
.amigo-t { position: absolute; z-index: 1; left: 16px; right: 16px; bottom: 18px; display: grid; gap: 7px; justify-items: start; }
.amigo-t b { font: italic 900 25px/1 var(--fb); letter-spacing: -.035em; text-transform: uppercase; }
.amigo-t small { font: 500 13px/1.35 var(--fb); opacity: .92; }

.local { position: relative; margin-top: -34px; color: #fff; background: #05070D; overflow: hidden; }
.local-sign { display: grid; place-items: center; padding: 64px 0 0; background: linear-gradient(rgba(74, 192, 238, .05) 1.5px, transparent 1.5px) 0 0/44px 44px, linear-gradient(90deg, rgba(74, 192, 238, .05) 1.5px, transparent 1.5px) 0 0/44px 44px, radial-gradient(70% 60% at 50% 50%, #0B2068, #05070D 75%); }
.local-sign img { display: block; width: min(96%, 400px); height: auto; aspect-ratio: 1; }
.local-in { position: relative; margin-top: -46px; padding: 30px 18px 8px; background: linear-gradient(transparent, #05070D 26%); }
.local .scr { font-size: 23px; color: var(--am); text-shadow: 0 0 14px rgba(255, 210, 31, .8); }
.local h3 { font: italic 900 36px/1 var(--fb); letter-spacing: -.04em; text-transform: uppercase; }
.local p { opacity: .8; margin-top: 4px; }
.hrs { list-style: none; margin-top: 16px; display: grid; gap: 2px; }
.hrs li { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; border-radius: 12px; font-size: 13.5px; }
.hrs li.hoy { background: rgba(255, 210, 31, .14); box-shadow: inset 0 0 0 1.5px rgba(255, 210, 31, .6); }
.hrs em { font: 800 9.5px var(--fb); font-style: normal; text-transform: uppercase; letter-spacing: .08em; background: var(--am); color: var(--tinta); padding: 2px 6px; border-radius: 6px; margin-left: 6px; }
.hrs b { font-weight: 800; }
.local-b { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.foot { padding: 22px 18px 8px; text-align: center; font-size: 11.5px; color: var(--mut); }
.v-hoy .foot { color: #7f8ab0; }

/* ───── CARTA ───── */
.ph { padding: calc(78px + var(--sat)) 18px 4px; }
.ph .scr { display: block; font-size: 25px; color: var(--az); transform: rotate(-3deg); transform-origin: left; }
.ph h1 { font: italic 900 39px/.92 var(--fb); letter-spacing: -.045em; text-transform: uppercase; }
.ph p { margin-top: 8px; color: var(--mut); font-size: 13.5px; }
.ph .ph-n { font-size: 12.5px; }
.seg { position: relative; display: grid; grid-template-columns: repeat(var(--n), 1fr); padding: 4px; border-radius: 99px; background: rgba(11, 16, 32, .07); margin-top: 14px; }
.seg-th { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--n)); border-radius: 99px; background: var(--tinta); transform: translateX(calc(var(--k) * 100%)); transition: transform .45s var(--spring); }
.seg button { position: relative; z-index: 1; height: 40px; font: 700 13.5px/1.1 var(--fb); text-align: center; display: grid; place-content: center; transition: color .3s; }
.seg button.on { color: #fff; }
.seg button small { display: block; font: 600 11px var(--fb); opacity: .7; margin-top: 1px; }
.seg.big button { height: 56px; font-size: 15.5px; }

.blist { display: grid; gap: 22px; padding: 18px 16px 0; }
.bbig { position: relative; border-radius: 32px; overflow: hidden; background: linear-gradient(170deg, var(--c), var(--c2)); color: var(--on); box-shadow: 0 22px 36px -20px var(--c2); cursor: pointer; }
.bb-ph { position: relative; aspect-ratio: 1/.72; overflow: hidden; }
.bb-ph img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.2); transition: transform 1.6s var(--out); }
.bbig.seen .bb-ph img { transform: scale(1.02); }
.bb-ph::after { content: ""; position: absolute; inset: auto 0 0; height: 48%; background: linear-gradient(transparent, var(--c)); }
.bb-ph .tag-new { top: 16px; left: 16px; font-size: 12px; padding: 5px 10px; }
.bb-in { position: relative; padding: 0 18px 18px; margin-top: -38px; }
.bb-in h3 { font-size: 48px; line-height: 1; transform-origin: left bottom; }
.bb-l { font: 800 15.5px/1.2 var(--fb); margin-top: 10px; letter-spacing: -.01em; }
.bb-d { font: 500 12.5px/1.45 var(--fb); opacity: .93; margin-top: 6px; }
.bb-n { display: inline-block; font: 700 11px var(--fb); margin-top: 8px; padding: 4px 9px; border-radius: 8px; background: rgba(0, 0, 0, .22); }
.bb-f { display: flex; align-items: center; gap: 16px; margin-top: 14px; }
.bb-f span { font: 600 10px var(--fb); text-transform: uppercase; letter-spacing: .09em; }
.bb-f span b { display: block; font: 900 17px var(--fb); letter-spacing: -.02em; }
.bb-f .btn { margin-left: auto; }

.rows { background: #fff; border-radius: 26px; padding: 4px 14px; border: 1px solid var(--line); box-shadow: 0 10px 30px -24px rgba(11, 16, 32, .5); }
.row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1.5px dashed var(--line); }
.row:last-child { border: 0; }
.row img, .ci img { width: 58px; height: 50px; object-fit: contain; flex: none; }
.row-i { width: 46px; height: 46px; border-radius: 14px; background: #E4F5FD; color: var(--az); display: grid; place-items: center; flex: none; margin: 0 6px; }
.row-i svg { width: 22px; height: 22px; }
.row > div { flex: 1; min-width: 0; }
.row h4 { font: 700 14px/1.2 var(--fb); }
.row p { font-size: 11.5px; color: var(--mut); line-height: 1.3; margin-top: 2px; }
.row > b { font: 800 14px var(--fb); white-space: nowrap; }
.add { width: 36px; height: 36px; border-radius: 50%; background: var(--az); color: #fff; display: grid; place-items: center; flex: none; box-shadow: 0 3px 0 var(--azd); }
.add svg { width: 16px; height: 16px; }
.add:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--azd); }
.extras { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px; border-radius: 24px; background: var(--tinta); color: #fff; }
.extras b { width: 100%; font: italic 900 19px var(--fb); text-transform: uppercase; letter-spacing: -.02em; }
.extras span { font-size: 12px; padding: 7px 11px; border-radius: 99px; background: rgba(255, 255, 255, .1); }
.extras em { font-style: normal; font-weight: 800; color: var(--am); margin-left: 4px; }

/* ───── hojas ───── */
#sheets { position: absolute; inset: 0; z-index: 40; display: none; }
#sheets.on { display: block; }
.sh-bg { position: absolute; inset: 0; background: rgba(5, 8, 16, .64); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: fade .3s both; }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 95%; display: flex; flex-direction: column; border-radius: 32px 32px 0 0; background: var(--papel); overflow: hidden; animation: sheetup .55s var(--spring) both; }
#sheets.out .sheet { animation: sheetdown .26s ease-in both; }
#sheets.out .sh-bg { animation: fadeout .26s both; }
.sx { position: absolute; z-index: 5; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 50%; background: rgba(11, 16, 32, .55); color: #fff; display: grid; place-items: center; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.sx svg { width: 18px; height: 18px; }

.bsheet { height: 95%; }
.bs-top { position: relative; height: 176px; flex: none; overflow: hidden; background: var(--c); }
.bs-top img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; animation: kb 9s ease-out both; }
.bs-top::after { content: ""; position: absolute; inset: auto 0 0; height: 66%; background: linear-gradient(transparent, var(--c2)); }
.bs-name { position: absolute; z-index: 2; left: 18px; bottom: 12px; display: flex; align-items: center; gap: 12px; }
.bs-name h2 { font-size: 50px; line-height: 1; text-transform: none; animation: pop .6s var(--spring) .15s backwards; }
.bs-name .l-holly, .bs-name .l-classic, .bs-name .l-crispy { text-transform: uppercase; }
.bs-name .tag-new { position: static; }
.bs-body { flex: 1; overflow-y: auto; padding: 16px 18px 18px; scrollbar-width: none; }
.bs-body::-webkit-scrollbar { display: none; }
.bs-l { font: 800 16px/1.25 var(--fb); letter-spacing: -.01em; }
.bs-l span { color: var(--mut); font-weight: 600; }
.bs-d { font-size: 12.5px; color: var(--mut); margin-top: 6px; }

.stage { position: relative; height: 252px; margin-top: 14px; border-radius: 26px; display: grid; place-items: end center; padding-bottom: 28px; overflow: hidden; background: radial-gradient(60% 46% at 50% 100%, rgba(255, 255, 255, .95), transparent), var(--chk-s) 0 0/30px 30px; border: 2px solid var(--cel); }
.stage-t { position: absolute; left: 14px; top: 9px; font-size: 19px; color: var(--az); transform: rotate(-4deg); }
.stage-shadow { position: absolute; bottom: 18px; left: 50%; width: 190px; height: 16px; margin-left: -95px; border-radius: 50%; background: rgba(11, 16, 32, .2); filter: blur(6px); }
.stack { position: relative; z-index: 1; display: flex; flex-direction: column-reverse; align-items: center; width: 214px; transform-origin: 50% 100%; filter: drop-shadow(0 6px 5px rgba(11, 16, 32, .18)); }
.stack.squash { animation: squash .5s var(--spring); }
.ly { display: block; position: relative; flex: none; z-index: var(--z); }
.ly.in { animation: lydrop .55s cubic-bezier(.3, 1.45, .5, 1) backwards; animation-delay: calc(var(--i) * 70ms); }
.bun-b { width: 184px; height: 26px; border-radius: 9px 9px 44px 44px/8px 8px 24px 24px; background: linear-gradient(#F4BC69, #DB9136 65%, #B97023); }
.patty { width: 194px; height: 22px; margin-bottom: -3px; border-radius: 12px; background: radial-gradient(circle at 30% 40%, #7d4b2c 0 2.6px, transparent 3.4px) 0 0/19px 11px, radial-gradient(circle at 70% 70%, #331c10 0 2.2px, transparent 3px) 4px 2px/15px 10px, linear-gradient(#6d3f24, #472712); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .12); }
.p-pollo { background: radial-gradient(circle at 30% 40%, #F3C777 0 2.4px, transparent 3.2px) 0 0/13px 9px, radial-gradient(circle at 70% 70%, #B57A2A 0 2px, transparent 2.8px) 3px 2px/11px 8px, linear-gradient(#E3A54A, #C48328); }
.p-veggie { background: radial-gradient(circle at 30% 40%, #C9D36A 0 2.2px, transparent 3px) 0 0/17px 10px, radial-gradient(circle at 70% 60%, #E08A3C 0 2px, transparent 2.8px) 5px 2px/23px 11px, linear-gradient(#7C8A3E, #56632A); }
.cheddar { width: 204px; height: 11px; margin-bottom: -6px; background: linear-gradient(#FFD23F, #FFB81A); clip-path: polygon(0 0, 100% 0, 100% 40%, 97% 55%, 93% 100%, 88% 52%, 64% 48%, 60% 86%, 55% 48%, 25% 48%, 20% 100%, 14% 52%, 5% 55%, 0 40%); }
.cheddar.ch2 { transform: scaleX(-1); margin-bottom: -7px; }
.cebolla { width: 168px; height: 7px; margin-bottom: -2px; background: radial-gradient(circle, #fff 0 2.2px, #E9E2D0 2.3px 2.8px, transparent 3px) 0 0/9px 7px; }
.pepinillos { width: 180px; height: 11px; margin-bottom: -3px; background: radial-gradient(ellipse 19px 5px at center, #A9CC5B 0 50%, #5E8F2A 54% 96%, transparent 100%) 0 0/45px 11px; }
.tomate { width: 174px; height: 10px; margin-bottom: -2px; border-radius: 6px; background: radial-gradient(circle, #FFB09A 0 1.6px, transparent 2.2px) 0 2px/22px 10px, linear-gradient(#F24B3C, #C82D22); }
.lechuga { width: 208px; height: 17px; margin-bottom: -7px; background: radial-gradient(circle at 50% 0, #9AD765 0 9px, transparent 9.6px) 0 7px/19px 17px repeat-x, linear-gradient(#86CB54, #62A838) 0 0/100% 8px no-repeat; }
.salsa-rosa, .salsa-ahumada, .mayo, .ketchup { width: 182px; height: 10px; margin-bottom: -4px; border-radius: 6px; clip-path: polygon(0 0, 100% 0, 100% 50%, 94% 60%, 90% 100%, 85% 55%, 40% 55%, 36% 90%, 31% 55%, 8% 60%, 0 50%); }
.salsa-rosa { background: linear-gradient(#F7B592, #EE9468); }
.salsa-ahumada { background: linear-gradient(#EFD9B0, #DDBB80); }
.mayo { background: linear-gradient(#FFFBEF, #F1E6C8); width: 170px; }
.ketchup { background: linear-gradient(#E8382C, #BE1F17); }
.crispy { width: 208px; height: 14px; margin-bottom: -4px; background: radial-gradient(circle, transparent 0 2.6px, #EBAE42 3px 4.6px, transparent 5px) 0 0/13px 14px, radial-gradient(circle, transparent 0 2.2px, #C98522 2.6px 4px, transparent 4.4px) 6px 3px/15px 12px; }
.juliana { width: 204px; height: 12px; margin-bottom: -3px; border-radius: 6px; background: repeating-linear-gradient(104deg, #F5E6BD 0 3px, transparent 3px 7px), repeating-linear-gradient(72deg, rgba(222, 190, 120, .9) 0 2px, transparent 2px 9px), linear-gradient(#E9D29A, #D8B66E); }
.panceta { width: 206px; height: 11px; margin-bottom: -3px; background: repeating-linear-gradient(90deg, #A92E24 0 13px, #EDBBA4 13px 17px, #C5463A 17px 27px, #EDBBA4 27px 30px); clip-path: polygon(0 20%, 8% 0, 17% 30%, 26% 0, 35% 30%, 44% 0, 53% 30%, 62% 0, 71% 30%, 80% 0, 89% 30%, 100% 5%, 100% 80%, 92% 100%, 83% 70%, 74% 100%, 65% 70%, 56% 100%, 47% 70%, 38% 100%, 29% 70%, 20% 100%, 11% 70%, 0 100%); }
.bun-t { width: 190px; height: 58px; margin-bottom: -3px; border-radius: 95px 95px 14px 14px/56px 56px 10px 10px; background: radial-gradient(ellipse 58px 13px at 33% 24%, rgba(255, 255, 255, .55), transparent 70%), linear-gradient(#F8CA80, #E49E3E 60%, #C98028); }
.side { position: absolute; inset: 0; pointer-events: none; }
.s-papas { position: absolute; left: 8px; bottom: 22px; width: 66px; transform: translateY(170px) rotate(-24deg); opacity: 0; transition: transform .65s var(--spring), opacity .3s; filter: drop-shadow(0 6px 5px rgba(0, 0, 0, .22)); }
.side.papas .s-papas { transform: rotate(-8deg); opacity: 1; }
.s-lata { position: absolute; right: 20px; bottom: 24px; width: 38px; height: 68px; border-radius: 7px/5px; background: linear-gradient(90deg, #A30F17, #F03A32 35%, #FF7A6E 50%, #D4212A 75%, #8E0E14); box-shadow: inset 0 5px 0 #DADADA, inset 0 -5px 0 #C6C6C6, 0 6px 8px rgba(0, 0, 0, .22); transform: translateY(170px) rotate(24deg); opacity: 0; transition: transform .65s var(--spring), opacity .3s; }
.s-lata::after { content: ""; position: absolute; left: 0; right: 0; top: 46%; height: 3px; background: #fff; opacity: .85; transform: rotate(-9deg); }
.side.lata .s-lata { transform: rotate(7deg); opacity: 1; }

.opts { display: grid; gap: 10px; margin-top: 14px; }
.opts .seg { margin-top: 0; }
.opt-n { font-size: 12px; color: var(--mut); padding: 0 4px; }
.tgs { display: grid; gap: 8px; }
.tg { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); transition: box-shadow .2s, background .2s, transform .2s var(--spring); }
.tg:active { transform: scale(.98); }
.tg span { font: 700 14px/1.2 var(--fb); }
.tg small { display: block; font: 600 11.5px var(--fb); color: var(--mut); margin-top: 2px; }
.sw { flex: none; width: 46px; height: 28px; border-radius: 99px; background: rgba(11, 16, 32, .16); position: relative; transition: background .25s; }
.sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .25); transition: transform .35s var(--spring); }
.tg.on { box-shadow: inset 0 0 0 2px var(--az); background: #EEF6FF; }
.tg.on .sw { background: var(--az); }
.tg.on .sw::after { transform: translateX(18px); }
.bs-foot { flex: none; display: flex; gap: 10px; padding: 12px 16px calc(16px + var(--sab)); background: var(--papel); border-top: 1px solid var(--line); }
.stp { display: inline-flex; align-items: center; gap: 2px; border-radius: 99px; background: rgba(11, 16, 32, .07); padding: 4px; flex: none; }
.stp button { width: 38px; height: 44px; border-radius: 50%; display: grid; place-items: center; }
.stp svg { width: 16px; height: 16px; }
.stp span { min-width: 22px; text-align: center; font: 800 16px var(--fb); }
.stp.sm button { width: 30px; height: 32px; }
.stp.sm svg { width: 13px; height: 13px; }
.stp.sm span { font-size: 14px; min-width: 18px; }
.btn-add { flex: 1; min-width: 0; height: 52px; padding: 0 7px 0 20px; justify-content: space-between; background: var(--az); color: #fff; box-shadow: 0 5px 0 var(--azd); }
.btn-add:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--azd); }
.btn-add span { display: grid; text-align: left; min-width: 0; gap: 3px; }
.btn-add small { font: 500 10.5px/1 var(--fb); opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn-add em { font: 900 15px/1 var(--fb); font-style: normal; background: #fff; color: var(--az); padding: 11px 12px; border-radius: 99px; flex: none; }
.btn-add.done { background: var(--verde); box-shadow: 0 5px 0 #17612A; }

/* ───── avisos y efectos ───── */
#toast { position: absolute; left: 50%; bottom: calc(108px + var(--sab)); z-index: 60; width: max-content; max-width: calc(100% - 32px); padding: 11px 16px; border-radius: 16px; background: var(--tinta); color: #fff; font: 500 13px/1.3 var(--fb); text-align: center; box-shadow: 0 12px 30px -8px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .12); transform: translate(-50%, 30px) scale(.9); opacity: 0; pointer-events: none; transition: transform .4s var(--spring), opacity .25s; }
#toast.on { transform: translate(-50%, 0); opacity: 1; }
#toast b { color: var(--am); }
#fx { position: absolute; inset: 0; z-index: 70; pointer-events: none; }
#over { position: absolute; inset: 0; z-index: 50; display: none; }
#over.on { display: block; }
.fly { position: absolute; left: 0; top: 0; z-index: 65; pointer-events: none; display: grid; place-items: center; will-change: transform; }
.fly img { width: 100%; filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .3)); }
.fly-i { width: 46px; height: 46px; border-radius: 50%; background: var(--az); color: #fff; display: grid; place-items: center; }
.fly-i svg { width: 22px; height: 22px; }
.fly-c .coin { --cs: 30px; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(2deg); } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(53, 224, 122, .7); } 100% { box-shadow: 0 0 0 8px rgba(53, 224, 122, 0); } }
@keyframes rise { from { transform: translateY(22px); opacity: 0; } }
@keyframes viewin { from { transform: translateY(14px); opacity: 0; } }
@keyframes pop { 0% { transform: scale(.5); opacity: 0; } 100% { opacity: 1; } }
@keyframes fade { from { opacity: 0; } }
@keyframes fadeout { to { opacity: 0; } }
@keyframes sheetup { from { transform: translateY(100%); } }
@keyframes sheetdown { to { transform: translateY(100%); } }
@keyframes kb { from { transform: scale(1.25); } to { transform: scale(1.02); } }
@keyframes heroin { from { transform: scale(1.35) rotate(5deg); opacity: 0; } }
@keyframes letter { from { transform: translateY(-70px) rotate(-18deg) scale(.4); opacity: 0; } }
@keyframes cardin { from { transform: translateY(40px) rotate(6deg) scale(.8); opacity: 0; } }
@keyframes stick { from { transform: scale(0) rotate(-120deg); } }
@keyframes nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.3) rotate(-6deg); } 100% { transform: scale(1); } }
@keyframes chk { to { background-position: 16px 0; } }
@keyframes marq { to { transform: translateX(-33.333%); } }
@keyframes lydrop { 0% { transform: translateY(-200px) rotate(-9deg) scaleY(1.15); opacity: 0; } 50% { opacity: 1; } 78% { transform: translateY(3px) scaleY(.8); } 100% { transform: none; } }
@keyframes squash { 0% { transform: scaleY(1); } 35% { transform: scale(1.05, .93); } 100% { transform: none; } }

@media (min-width: 560px) {
  body { display: grid; place-items: center; background: #03040A; }
  body::before { content: ""; position: fixed; inset: 0; background: url(assets/neon.webp?v=2) center/min(92vh, 900px) no-repeat; opacity: .5; filter: blur(26px) saturate(1.3); }
  #app { width: 412px; height: min(880px, calc(100dvh - 36px)); border-radius: 46px; box-shadow: 0 0 0 10px #10141f, 0 0 0 11px #2a3142, 0 50px 120px rgba(0, 0, 0, .8); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .rv { opacity: 1; transform: none; }
}