/* JohnJohn · propuesta «La bolsa»: la primera pantalla es el frente de su bolsa de papel blanca.
   La burger sale de adentro, se hunde al cambiar y cae adentro al sumarla.
   El «John John» impreso se lee entero: el sticker con el nombre va pegado en la boca y los controles abajo. */

.bolsa{
  --alto:clamp(500px, calc(100svh - var(--top-h) - env(safe-area-inset-top,0px) - 92px - var(--safe-b)), 780px);
  --lado:max(12px, calc(50vw - 320px));      /* naranja a los costados de la bolsa (bolsa de 640 como máximo) */
  --bw:calc(100vw - 2 * var(--lado));         /* ancho de la bolsa */
  --logo-y:28px;                              /* dónde empieza el «John» impreso, debajo del serrucho */
  --banda:calc(var(--logo-y) + .39 * var(--bw) + 4px); /* papel libre para la primera línea del «John» */
  --pie:clamp(22px, calc((100svh - 700px) * .26), 64px); /* papel debajo del botón: asoma el segundo «John» */
  --bajo:42px;                                /* cuánto baja el sticker del nombre por debajo de la boca */
  --hundir:30px;                              /* cuánto de la burger queda adentro de la bolsa */
  --st:56px;                                  /* stickers para saltar */
  position:relative;height:var(--alto);overflow:hidden;display:flex;flex-direction:column;
  background:radial-gradient(120% 64% at 50% 30%, #FF9A2E 0, #F7760F 58%, #EC6A08 100%);
}
/* el mostrador donde se apoya la bolsa */
.bolsa::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;background:linear-gradient(transparent,rgba(160,60,0,.16));pointer-events:none}

.bo-escena{position:relative;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.bo-zona{position:relative;flex:1 1 auto;min-height:120px}

/* --- adentro de la bolsa: la pared de atrás con la sombra de la boca --- */
.bo-fondo{position:absolute;left:calc(var(--lado) + 7px);right:calc(var(--lado) + 7px);bottom:-44px;height:76px;z-index:0;
  background:linear-gradient(#F3ECE1 0, #E2D7C7 34%, #B6A690 72%, #8D7B65 100%);
  -webkit-mask:conic-gradient(from 135deg at top,#000 90deg,#0000 0) top/16px 8px repeat-x,linear-gradient(#000 0 0) 0 8px/100% calc(100% - 8px) no-repeat;
          mask:conic-gradient(from 135deg at top,#000 90deg,#0000 0) top/16px 8px repeat-x,linear-gradient(#000 0 0) 0 8px/100% calc(100% - 8px) no-repeat;
  transform-origin:50% 100%}
/* el papel de su mostrador que asoma por la boca: damero azul y blanco con el «JJ» estampado */
.bo-cuadrille{position:absolute;left:var(--lado);right:var(--lado);bottom:-34px;height:74px;z-index:1;transform-origin:50% 100%}
.bo-cuadrille i{position:absolute;bottom:0;width:54%;height:100%;overflow:hidden;background-color:#fff;
  background-image:conic-gradient(#5874BE 25%,#fff 0 50%,#5874BE 0 75%,#fff 0);background-size:18px 18px;
  box-shadow:inset 0 -26px 22px -12px rgba(20,30,70,.35);
  clip-path:polygon(0 20%,9% 8%,21% 15%,33% 2%,47% 12%,60% 0,73% 11%,86% 3%,100% 14%,100% 100%,0 100%)}
.bo-cuadrille i::after{content:"JJ";position:absolute;left:36%;top:22px;padding:0 3px;background:#fff;border-radius:3px;
  font:italic 400 13px/1.1 var(--serif);color:var(--rojo);transform:rotate(-8deg)}
.bo-cuadrille i:first-child{left:5%;transform:rotate(-7deg);transform-origin:0 100%}
.bo-cuadrille i:last-child{right:5%;height:84%;transform:rotate(6deg);transform-origin:100% 100%;background-position:9px 0}
.bo-cuadrille i:last-child::after{left:auto;right:22%;top:16px;transform:rotate(7deg)}

/* --- la burger: más ancha que la bolsa, sale por la boca --- */
.bo-pista{position:absolute;left:max(-2%, calc(50% - 340px));right:max(-2%, calc(50% - 340px));top:6px;bottom:calc(-1 * var(--hundir));z-index:2;pointer-events:none;
  clip-path:inset(-400px -400px 0 -400px)}
.bo-cae,.bo-mueve{position:absolute;inset:0}
.bo-cae.adentro{transform:translateY(110%)}
.bo-burger{width:100%;height:100%;max-width:none;object-fit:contain;object-position:50% 100%;pointer-events:auto;cursor:pointer;
  filter:drop-shadow(0 18px 16px rgba(120,38,0,.34));transform-origin:50% 85%;animation:boFlota 3.6s ease-in-out infinite;will-change:transform}
@keyframes boFlota{0%,100%{transform:translateY(0) rotate(-1.1deg)}50%{transform:translateY(-8px) rotate(1.3deg)}}

/* --- el frente de la bolsa --- */
.bo-frente{position:relative;z-index:3;flex:none;margin:0 var(--lado);padding:var(--banda) 14px var(--pie);transform-origin:50% 100%}
.bo-frente::after{content:"";position:absolute;left:3%;right:3%;bottom:-12px;height:22px;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(110,35,0,.42),transparent)}
.bo-cara{position:absolute;inset:0;overflow:hidden;background:#FFFDF8;
  clip-path:polygon(0 0,100% 0,98.6% 100%,1.4% 100%); /* la base apenas más angosta: la bolsa tiene cuerpo */
  -webkit-mask:conic-gradient(from 135deg at top,#000 90deg,#0000 0) top/18px 9px repeat-x,linear-gradient(#000 0 0) 0 9px/100% calc(100% - 9px) no-repeat;
          mask:conic-gradient(from 135deg at top,#000 90deg,#0000 0) top/18px 9px repeat-x,linear-gradient(#000 0 0) 0 9px/100% calc(100% - 9px) no-repeat}
/* el «John John» impreso: casi de borde a borde, como en la bolsa de verdad */
.bo-impreso{position:absolute;inset:0}
.bo-impreso svg{position:absolute;left:-3%;top:var(--logo-y);width:104%;height:auto;overflow:visible;color:var(--rojo)}
/* fuelles a los costados, labio doblado de la boca, pliegue de la base y pliegues sutiles */
.bo-cara::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(90,60,30,.16) 0,rgba(90,60,30,0) 24px),
    linear-gradient(180deg,transparent 28px,rgba(90,60,30,.10) 29px,rgba(255,255,255,.7) 31px,transparent 33px),
    linear-gradient(0deg,rgba(90,60,30,.12) 0,rgba(90,60,30,0) 16px),
    linear-gradient(90deg,rgba(90,60,30,.20) 0,rgba(90,60,30,.09) 8.4%,rgba(255,255,255,.85) 9%,rgba(90,60,30,.06) 9.6%,transparent 13%,
                          transparent 87%,rgba(90,60,30,.06) 90.4%,rgba(255,255,255,.8) 91%,rgba(90,60,30,.11) 91.6%,rgba(90,60,30,.24) 100%),
    linear-gradient(90deg,transparent 31%,rgba(90,60,30,.035) 33%,transparent 36%,transparent 63%,rgba(255,255,255,.35) 65%,rgba(90,60,30,.04) 67%,transparent 69%)}
/* textura de papel: grano fino + arrugas largas */
.bo-cara::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:multiply;opacity:.55;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .42  0 0 0 0 .33  0 0 0 .32 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='420'><filter id='a'><feTurbulence type='fractalNoise' baseFrequency='.006 .03' numOctaves='3' seed='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .55  0 0 0 0 .45  0 0 0 0 .35  0 0 0 -1.2 .62'/></filter><rect width='100%' height='100%' filter='url(%23a)'/></svg>")}

/* --- el sticker troquelado con el nombre, pegado en la boca y pisando la base de la burger --- */
.bo-etiqueta{position:absolute;z-index:5;left:4%;bottom:calc(100% - var(--bajo));width:min(76%,430px);
  display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;
  background:var(--azul);color:#fff;border-radius:13px;padding:8px 62px 10px 14px;transform:rotate(-6deg);
  box-shadow:0 0 0 4.5px #fff,0 7px 0 4.5px rgba(26,22,19,.2),0 14px 22px -6px rgba(90,30,0,.4)}
.bo-etiqueta:active{transform:rotate(-6deg) translateY(2px)}
.bo-grupo{font:700 10.5px/1 var(--cuerpo);letter-spacing:.15em;text-transform:uppercase;color:#C9D6F2;font-variant-numeric:tabular-nums}
.bo-nombre{font:700 25px/.94 var(--tit);text-transform:uppercase;letter-spacing:.005em;text-wrap:balance}
/* el sello del precio, montado en la esquina del sticker */
.bo-sello{position:absolute;right:-36px;top:50%;width:94px;height:94px;margin-top:-50px;border-radius:50%;
  background:var(--naranja-2);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  transform:rotate(16deg);box-shadow:0 0 0 4px #fff,0 5px 0 4px rgba(26,22,19,.24)}
.bo-sello::before{content:"";position:absolute;inset:6px;border-radius:50%;border:1.5px dashed rgba(255,255,255,.65)}
.bo-sello b{font:600 23px/1 var(--tit);font-variant-numeric:tabular-nums;letter-spacing:0}
.bo-sello small{font:800 9.5px/1 var(--cuerpo);letter-spacing:.12em;text-transform:uppercase;color:#FFF3E2;white-space:nowrap}

/* --- tamaño y botón, pegados abajo de la primera línea del «John» --- */
.bo-controles{position:relative;z-index:4;max-width:540px;margin:0 auto}
.bo-tam{display:flex;gap:8px;height:38px;margin:0 0 11px}
.bo-tam.solo{visibility:hidden} /* de un solo tamaño: el «Solo doble» va en el sello y el lugar queda (no salta la bolsa) */
.bo-tam button{flex:1 1 0;border-radius:999px;background:#fff;border:2.5px solid var(--carbon);box-shadow:0 3px 0 var(--carbon);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font:600 15px/1 var(--tit);letter-spacing:.05em;text-transform:uppercase;color:var(--carbon);
  transition:background .18s,color .18s,transform .12s,box-shadow .12s}
.bo-tam button small{font:700 9px/1 var(--cuerpo);letter-spacing:.04em;text-transform:none;color:#6d6158}
.bo-tam button.on{background:var(--azul);color:#fff}
.bo-tam button:active{transform:translateY(2px);box-shadow:0 1px 0 var(--carbon)}
.bo-tam button:disabled{cursor:not-allowed;background:#F2EBE1;color:#9A8E85;border-style:dashed;border-color:#9A8E85;box-shadow:none}
.bo-tam button:disabled small{color:#9A8E85}
.bo-sumar{width:100%;height:54px;border-radius:999px;background:var(--rojo);color:#fff;box-shadow:0 0 0 3px #fff,0 6px 0 3px #9E2C0B;
  font:700 19px/1 var(--tit);letter-spacing:.04em;text-transform:uppercase;transition:transform .12s,box-shadow .12s}
.bo-sumar:active{transform:translateY(3px);box-shadow:0 0 0 3px #fff,0 3px 0 3px #9E2C0B}

/* sticker que cuenta lo que hay en la bolsa (al costado, sobre la «n» que ya corta el borde) */
.bo-cuenta{position:absolute;z-index:5;right:-10px;top:-76px;width:62px;height:62px;border-radius:50%;
  background:var(--carbon);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  box-shadow:0 0 0 3.5px #fff,0 4px 0 3.5px rgba(26,22,19,.22);transform:rotate(9deg);pointer-events:none}
.bo-cuenta b{font:700 25px/1 var(--tit);color:#FFC233;font-variant-numeric:tabular-nums}
.bo-cuenta small{font:800 8px/1.05 var(--cuerpo);letter-spacing:.06em;text-transform:uppercase;text-align:center;max-width:50px}

/* --- stickers sueltos en el mostrador para saltar a otra: tira que se desliza, el último queda cortado --- */
.bo-saltar{position:relative;z-index:4;flex:none;display:flex;gap:13px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;
  padding:8px 20px 9px;margin:6px 0 22px;scroll-padding:0 20px}
.bo-saltar::-webkit-scrollbar{display:none}
.bo-st{position:relative;flex:none;width:var(--st);height:var(--st);border-radius:50%;background:#fff;
  box-shadow:inset 0 0 0 3px var(--azul),0 0 0 3px #fff,0 4px 0 3px rgba(26,22,19,.18);
  display:grid;place-items:center;transition:transform .25s cubic-bezier(.2,.8,.3,1),background .2s,box-shadow .2s}
.bo-st:nth-child(3n+1){transform:rotate(-6deg)}.bo-st:nth-child(3n+2){transform:rotate(5deg)}.bo-st:nth-child(3n){transform:rotate(-2deg)}
.bo-st img{width:118%;max-width:none;pointer-events:none;filter:drop-shadow(0 2px 2px rgba(90,30,0,.3));transform:translateY(-2px)}
.bo-st.on{background:var(--azul);box-shadow:inset 0 0 0 3px var(--carbon),0 0 0 3px #fff,0 0 0 6px var(--carbon);transform:scale(1.06) rotate(-4deg)}

.bolsa+.cinta{margin-top:-8px;z-index:4}

/* teléfonos bajos: la cinta queda debajo de la barra y todo un poco más compacto */
@media (max-height:720px){
  .bolsa{--alto:clamp(480px, calc(100svh - var(--top-h) - env(safe-area-inset-top,0px) - 70px - var(--safe-b)), 640px);
    --hundir:24px;--logo-y:22px;--pie:14px;--bajo:36px;--st:48px}
  .bo-frente{padding-left:12px;padding-right:12px}
  .bo-etiqueta{padding:7px 62px 9px 12px}
  .bo-nombre{font-size:22px}
  .bo-sello{width:84px;height:84px;margin-top:-44px;right:-32px}.bo-sello b{font-size:20.5px}.bo-sello small{font-size:8.5px}
  .bo-tam{height:35px;margin-bottom:9px}.bo-tam button{font-size:14px}
  .bo-sumar{height:49px;font-size:17px}
  .bo-cuenta{width:54px;height:54px;top:-64px}.bo-cuenta b{font-size:21px}
  .bo-saltar{gap:12px;padding:7px 18px 8px;margin:2px 0 8px}
  .bolsa+.cinta{margin-top:0}
}
/* teléfono acostado: bolsa más angosta y más alta que la pantalla (se desliza) */
@media (orientation:landscape) and (max-height:500px){
  .bolsa{--alto:620px;--lado:max(12px, calc(50vw - 210px))}
}
@media (prefers-reduced-motion:reduce){.bo-burger{animation:none}}