/* ==========================================================
   ARMA TU BOX — caja que se llena cookie por cookie
   ========================================================== */
.builder {
  position: relative; background: var(--choc); color: var(--butter); padding: clamp(72px, 9vw, 130px) 0 clamp(64px, 8vw, 120px);
  border-radius: clamp(28px, 5vw, 64px) clamp(28px, 5vw, 64px) 0 0; margin-top: -1px; isolation: isolate;
}
.builder::before { /* textura de migas */ content: ''; position: absolute; inset: 0; z-index: -1; opacity: .5; pointer-events: none;
  background-image: radial-gradient(circle at 12% 18%, #6d4624 0 6px, transparent 7px), radial-gradient(circle at 86% 30%, #6d4624 0 9px, transparent 10px), radial-gradient(circle at 64% 82%, #6d4624 0 5px, transparent 6px), radial-gradient(circle at 22% 70%, #6d4624 0 7px, transparent 8px); }
.builder .eyebrow { color: var(--mint); }
.builder h2 em { color: var(--mint); }
.builder__head { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); display: grid; gap: 16px; }
.builder__head .lede { color: var(--butter); opacity: .8; }
#builder { max-width: var(--maxw); margin: clamp(28px, 4vw, 52px) auto 0; padding: 0 var(--gutter); }

.bx-sizes { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(20px, 3vw, 36px); }
.bx-size {
  min-height: 62px; padding: 8px 22px; border-radius: 18px; border: 2px solid color-mix(in srgb, var(--butter) 40%, transparent); display: grid; text-align: left;
  transition: background .3s, color .3s, transform .35s var(--ease), border-color .3s;
}
.bx-size b { font: 400 1.25rem/1.1 var(--f-display); }
.bx-size span { font-size: .86rem; font-weight: 600; opacity: .85; }
.bx-size:hover { transform: translateY(-3px); border-color: var(--butter); }
.bx-size[aria-checked="true"] { background: var(--butter); color: var(--choc); border-color: var(--butter); }

.bx-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(24px, 4vw, 64px); align-items: start; }

.bx-visual { position: sticky; top: 90px; display: grid; gap: 18px; justify-items: center; }
.box-stage { position: relative; width: 100%; display: grid; place-items: center; padding: 10px 0 26px; clip-path: inset(0 -40px -70px -40px); }
.box {
  --cols: 3; --rows: 2; position: relative; width: min(100%, calc(var(--cols) * 168px + 60px)); padding: 22px; border-radius: 28px; background: #EAD79A; border: 3px solid #2E1A0B;
  box-shadow: 0 10px 0 #2E1A0B, 0 40px 50px -20px rgba(0, 0, 0, .65); transition: width .6s var(--ease);
}
.box__tray { background: #F6EBC1; border-radius: 18px; padding: 14px; box-shadow: inset 0 8px 14px rgba(86, 54, 26, .3); }
.slots { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 12px; justify-content: center; }
.box--single .slots { grid-template-columns: minmax(0, 150px); }
.slot { position: relative; aspect-ratio: 1; border-radius: 50%; border: 2px dashed rgba(86, 54, 26, .32); display: grid; place-items: center; transition: border-color .3s, background .3s; }
.slot::after { content: attr(data-n); position: absolute; font: 400 1.1rem/1 var(--f-display); color: rgba(86, 54, 26, .22); }
.slot.is-filled { border-color: transparent; }
.slot.is-filled::after { display: none; }
.slot--gift { border-color: var(--caramel); border-width: 3px; background: radial-gradient(circle, rgba(217, 142, 63, .18), transparent 70%); }
.slot--gift::after { color: rgba(176, 100, 20, .6); }
.slot__gift { position: absolute; z-index: 3; left: 50%; top: -10px; transform: translateX(-50%) rotate(-4deg); background: var(--caramel); color: #2E1A0B; font: 800 .62rem/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; padding: 5px 9px; border-radius: 6px; box-shadow: 0 4px 8px -3px rgba(0, 0, 0, .4); }
.slot .ck { position: absolute; inset: -7%; display: grid; place-items: center; filter: drop-shadow(0 8px 6px rgba(50, 25, 4, .4)); will-change: transform; }
.slot .ck img, .slot .ck svg { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; }
.box__lid {
  position: absolute; inset: -3px; z-index: 5; border-radius: 28px; background: #F6EBC1; border: 3px solid #2E1A0B; display: grid; place-items: center; align-content: center; gap: 8px;
  color: var(--choc); opacity: 0; pointer-events: none; transform: translateY(-120%) rotate(-5deg);
  box-shadow: 0 10px 0 #2E1A0B, 0 40px 50px -20px rgba(0,0,0,.65);
}
.box__lid .logo-mask { width: min(52%, 280px); }
.box__lid p { font: 700 .72rem/1 var(--f-body); letter-spacing: .24em; text-transform: uppercase; }
.box__lid .stamp { position: absolute; right: 8%; bottom: 10%; width: 74px; height: 74px; border-radius: 50%; background: var(--mint); display: grid; place-items: center; font: 800 .62rem/1.1 var(--f-body); text-align: center; letter-spacing: .08em; text-transform: uppercase; color: #123A33; transform: rotate(12deg); }
.box__lid .band { position: absolute; left: 0; right: 0; top: 50%; height: 8px; margin-top: -4px; background: var(--mint); opacity: .0; }
.box.is-closed .box__lid { opacity: 1; transform: none; pointer-events: auto; cursor: pointer; }
.lid-hint { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; font-size: .72rem; font-weight: 700; opacity: .6; }

.bx-counter { width: 100%; max-width: 520px; display: grid; gap: 10px; text-align: center; }
.bx-counter__n { font: 400 clamp(2rem, 4vw, 3rem)/1 var(--f-display); font-variant-numeric: tabular-nums; }
.bx-counter__n small { font: 600 .9rem/1 var(--f-body); opacity: .7; margin-left: 8px; }
.bx-bar { height: 12px; border-radius: 8px; background: rgba(248, 239, 198, .15); overflow: hidden; }
.bx-bar i { display: block; height: 100%; width: 0; background: var(--mint); border-radius: 8px; transition: width .6s var(--ease); }
.bx-summary { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; min-height: 36px; max-width: 520px; }
.bx-sum-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 6px 6px 12px; border-radius: 999px; background: rgba(248, 239, 198, .12); font-size: .82rem; font-weight: 700; }
.bx-sum-chip button { width: 24px; height: 24px; border-radius: 50%; background: var(--butter); color: var(--choc); font-weight: 800; line-height: 1; display: grid; place-items: center; transition: transform .2s; }
.bx-sum-chip button:hover { transform: scale(1.15) rotate(90deg); }
.bx-empty { font-size: .9rem; opacity: .7; text-align: center; }
.bx-tools { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.link-btn { font-weight: 700; font-size: .88rem; text-decoration: underline; text-underline-offset: 4px; padding: 8px 10px; border-radius: 8px; }
.link-btn:hover { background: rgba(248, 239, 198, .12); }

.bx-picker { display: grid; gap: 16px; }
.bx-picker__title { font: 700 .74rem/1 var(--f-body); letter-spacing: .2em; text-transform: uppercase; opacity: .7; display: flex; justify-content: space-between; }
.bx-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.bx-tile { position: relative; border-radius: 22px; background: var(--tile-bg); color: var(--tile-ink); display: grid; grid-template-rows: auto auto; overflow: hidden; transition: transform .4s var(--ease), box-shadow .4s; }
.bx-tile:hover { transform: translateY(-4px); box-shadow: 0 16px 24px -16px rgba(0, 0, 0, .6); }
.bx-tile__add { display: grid; justify-items: center; gap: 6px; padding: 14px 8px 8px; text-align: center; font-weight: 800; font-size: .88rem; line-height: 1.1; }
.bx-tile__art { width: 74px; height: 74px; display: grid; place-items: center; transition: transform .45s var(--ease); }
.bx-tile__add:hover .bx-tile__art { transform: rotate(-12deg) scale(1.1); }
.bx-tile__art img, .bx-tile__art svg { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 5px rgba(50, 25, 4, .35)); }
.bx-tile__qty { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 0 8px 12px; min-height: 44px; }
.bx-tile__qty button { width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .55); font-weight: 800; font-size: 1.1rem; line-height: 1; transition: transform .2s, background .2s; }
.bx-tile__qty button:hover:not([disabled]) { background: #fff; transform: scale(1.1); }
.bx-tile__qty button[disabled] { opacity: .3; cursor: not-allowed; }
.bx-tile__qty output { min-width: 24px; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }
.bx-tile__badge { position: absolute; top: 8px; right: 8px; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px; background: var(--tile-ink); color: var(--tile-bg); font-size: .76rem; font-weight: 800; display: grid; place-items: center; transform: scale(0); transition: transform .35s var(--ease); }
.bx-tile.has-qty .bx-tile__badge { transform: scale(1); }
.bx-tile.is-out { filter: grayscale(1); opacity: .62; }
.bx-tile.is-out:hover { transform: none; box-shadow: none; }
.bx-tile.is-out .bx-tile__add { cursor: not-allowed; }
.bx-tile.is-out .bx-tile__add:hover .bx-tile__art { transform: none; }
.bx-tile__out { position: absolute; z-index: 1; top: 8px; left: 8px; }
.bx-note { font-size: .78rem; opacity: .65; line-height: 1.4; }

.bx-foot { position: sticky; bottom: 0; z-index: 8; margin-top: clamp(24px, 3vw, 40px); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px 20px; border-radius: 24px; background: var(--butter); color: var(--choc); box-shadow: 0 -10px 40px -10px rgba(0, 0, 0, .35); }
.bx-foot__total { display: grid; gap: 2px; }
.bx-foot__total small { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.bx-foot__total b { font: 400 2rem/1 var(--f-display); font-variant-numeric: tabular-nums; }
/* botón directo, sin adornos */
.bx-foot .btn { --bg: var(--choc); --fg: var(--butter); flex: 1 1 240px; max-width: 360px; border-radius: 14px; box-shadow: none; letter-spacing: .02em; }
.bx-foot .btn:hover, .bx-foot .btn:active { transform: none; box-shadow: none; opacity: .92; }

.mascot-pop { position: fixed; z-index: 120; right: 14px; bottom: 76px; display: none; align-items: flex-end; gap: 10px; pointer-events: none; }
.mascot-pop.is-on { display: flex; }
.mascot-pop img { width: 70px; height: auto; transform-origin: 50% 100%; }
.mascot-pop span { background: var(--paper); color: var(--choc); font-weight: 700; font-size: .88rem; padding: 10px 14px; border-radius: 16px 16px 4px 16px; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .5); margin-bottom: 40px; max-width: 180px; line-height: 1.2; }

@media (max-width: 1000px) {
  .bx-grid { grid-template-columns: 1fr; gap: 20px; }
  .bx-visual { top: 76px; z-index: 6; background: var(--choc); padding-bottom: 8px; margin: 0 calc(var(--gutter) * -1); padding-inline: var(--gutter); gap: 8px; }
  .box--single .slots { grid-template-columns: minmax(0, 58px); }   /* tan alta como la caja de 4: la caja fija deja ver las tarjetas */
  .box { width: min(100%, calc(var(--cols) * 72px + 44px)); padding: 12px; border-radius: 20px; box-shadow: 0 6px 0 #2E1A0B, 0 24px 30px -18px rgba(0,0,0,.6); }
  .box__tray { padding: 8px; border-radius: 12px; }
  .slots { gap: 6px; }
  .box__lid { border-radius: 20px; }
  .box__lid .stamp { width: 52px; height: 52px; font-size: .5rem; }
  .box__lid p { display: none; }
  .box__lid .logo-mask { width: min(46%, 200px); }
  .box-stage { padding: 4px 0 14px; }
  .bx-counter__n { font-size: 1.7rem; }
  .bx-summary { display: none; }
  .bx-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .bx-tile__art { width: 58px; height: 58px; }
  .bx-tile__add { font-size: .78rem; padding: 10px 4px 4px; }
  .bx-tile__qty button { width: 32px; height: 32px; }
  .bx-foot { border-radius: 20px; padding: 12px 14px; margin-inline: calc(var(--gutter) * -.5); }
  .bx-foot .btn { flex-basis: 180px; }
  .bx-tools { gap: 2px; }
}
@media (max-width: 520px) {
  .bx-sizes { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 6px; }
  .bx-size { min-height: 56px; padding: 8px 6px; border-radius: 14px; text-align: center; justify-items: center; }
  .bx-size b { font-size: .86rem; white-space: nowrap; }
  .bx-size span { font-size: .78rem; }
  .bx-tile__add { font-size: .74rem; }
  .bx-tile__art { width: 56px; height: 56px; }
  .bx-picker__title { font-size: .62rem; }
  .bx-foot { flex-wrap: nowrap; gap: 10px; padding: 10px 12px; border-radius: 18px; }
  .bx-foot__total small { font-size: .6rem; }
  .bx-foot__total b { font-size: 1.45rem; }
  .bx-foot .btn { flex: 1 1 auto; min-height: 48px; padding: 0 .8em; font-size: .92rem; }
}
/* Cuatro tamaños: en pantallas muy angostas van de a dos */
@media (max-width: 349px) { .bx-sizes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }