/* ==========================================================================
   BELCEBURGER — el despiece ("baja al infierno"). Mismo motor probado que
   BRASA / QUINTO / ZORTZI / KOI (js/despiece.js) sobre el negro exacto de los
   fotogramas (#0F0A0B): fotograma real (Seedream + Kling), velo arriba y
   abajo, etiquetas numeradas en crudo con línea que crece desde un punto rojo.
   Con pestañas para cambiar de hamburguesa.
   ========================================================================== */
#capas{height:420vh;padding:0;position:relative;background:#0F0A0B;color:#F7F2EB}
#capas .fijo{position:sticky;top:0;height:100svh;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  padding:78px 24px 0}
#capas canvas{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;display:block;background:#0F0A0B}
#capas .velo{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom, rgba(15,10,11,.96) 0%, rgba(15,10,11,.86) 14%, rgba(15,10,11,.3) 26%,
             rgba(15,10,11,0) 36%, rgba(15,10,11,0) 74%, rgba(15,10,11,.55) 86%, rgba(15,10,11,.96) 100%)}
/* escritorio: rótulo en la esquina superior izquierda y pestañas en la derecha, el lienzo a pantalla completa */
#capas .rotulo{position:absolute;z-index:6;left:5%;top:96px;text-align:left;pointer-events:none;max-width:31%}
#capas .rotulo .sopra{margin-bottom:10px;box-shadow:3px 3px 0 #DA0430}
#capas h2{font-size:clamp(38px,4.2vw,64px);color:#F7F2EB}
#capas .rotulo p{font-size:15px;color:#B9AFA8;margin-top:8px}
#capas .rotulo .precio-capas{display:none}

/* pestañas para cambiar de hamburguesa */
#selector-capas{position:absolute;z-index:7;right:5%;top:100px;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
#selector-capas button{background:#0F0A0B;border:2px solid #F7F2EB;color:#F7F2EB;box-shadow:3px 3px 0 #F7F2EB;
  border-radius:8px;padding:8px 16px 7px;font-family:var(--display);font-size:15px;
  text-transform:uppercase;letter-spacing:.08em;cursor:pointer;transition:.12s}
#selector-capas button:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 #F7F2EB}
#selector-capas button.on{background:#DA0430;color:#fff}

/* etiquetas de ingrediente: número rojo, texto crudo, línea que crece desde el punto */
#capas .ing{position:absolute;z-index:4;display:flex;align-items:center;gap:0;opacity:0;transition:opacity .35s ease}
#capas .ing.izq{left:5%;flex-direction:row}
#capas .ing.der{right:5%;flex-direction:row-reverse}
#capas .ing .chip{color:#F7F2EB;font-size:14px;text-transform:uppercase;letter-spacing:.16em;
  white-space:nowrap;font-weight:700;font-family:var(--texto);display:flex;align-items:baseline;gap:12px;
  transform:translateY(8px);transition:transform .5s var(--curva)}
#capas .ing.der .chip{flex-direction:row-reverse}
#capas .ing .chip .num{font-family:var(--display);font-weight:900;font-size:22px;color:#FF3B5C;letter-spacing:0;line-height:1}
#capas .ing .raya{width:clamp(34px,9vw,150px);height:1.5px;background:rgba(247,242,235,.75);margin:0 12px;
  transform:scaleX(0);transition:transform .6s var(--curva) .05s}
#capas .ing.izq .raya{transform-origin:right center}
#capas .ing.der .raya{transform-origin:left center}
#capas .ing .punto{width:10px;height:10px;border-radius:99px;background:#DA0430;flex:0 0 auto;
  box-shadow:0 0 0 5px rgba(218,4,48,.28);transform:scale(0);transition:transform .35s var(--curva)}
#capas .ing.on{opacity:1}
#capas .ing.on .chip,#capas .ing.on .raya,#capas .ing.on .punto{transform:none}

/* pie: progreso + añadir + pista */
#capas .pie{position:absolute;left:0;right:0;bottom:0;z-index:5;
  display:flex;flex-direction:column;align-items:center;gap:12px;padding:0 0 28px}
#capas .progreso{width:min(320px,60vw);height:2px;background:rgba(247,242,235,.25);overflow:hidden;transition:opacity .3s;border-radius:2px}
#capas .progreso i{display:block;height:100%;width:0;background:#DA0430}
#capas .acciones-capas{display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:center;
  opacity:0;transform:translateY(12px);transition:opacity .45s var(--curva),transform .45s var(--curva);pointer-events:none}
#capas .acciones-capas.on{opacity:1;transform:none;pointer-events:auto}
#capas .acciones-capas .anadir{padding:13px 26px 12px;font-size:18px;background:#DA0430;border-color:#F7F2EB;color:#fff;box-shadow:4px 4px 0 #F7F2EB;border-radius:10px}
#capas .acciones-capas .anadir:hover{background:#DA0430;color:#fff;transform:translate(2px,2px);box-shadow:2px 2px 0 #F7F2EB}
#capas .acciones-capas .anadir.hecho{background:#1F6B3A;border-color:#1F6B3A;color:#fff}
#capas .acciones-capas a.ficha{color:#F7F2EB;font-size:13px;text-transform:uppercase;letter-spacing:.14em;font-weight:700;
  border-bottom:1.5px solid rgba(247,242,235,.6);padding-bottom:2px}
#capas .pista{font-family:var(--display);font-size:13px;text-transform:uppercase;letter-spacing:.25em;
  display:inline-block;color:#F7F2EB;background:rgba(15,10,11,.75);padding:8px 14px;border-radius:99px;transition:opacity .35s}
#capas .cargando{position:absolute;z-index:6;top:50%;left:50%;transform:translate(-50%,-50%);
  font-size:12.5px;letter-spacing:.3em;text-transform:uppercase;color:#B9AFA8}

@media(max-width:760px){
  #capas{height:360vh}
  #capas .fijo{padding-top:70px}
  #capas canvas{top:150px;height:calc(100% - 250px)}
  #capas .rotulo{position:relative;left:auto;top:auto;text-align:center;max-width:none}
  #selector-capas{position:relative;right:auto;top:auto;flex-direction:row;align-items:center;justify-content:center;margin-top:8px}
  #capas .ing.izq{left:3%} #capas .ing.der{right:3%}
  #capas .ing .chip{font-size:11px;letter-spacing:.1em;gap:8px;background:rgba(15,10,11,.82);padding:6px 10px;border-radius:99px}
  #capas .ing .chip .num{font-size:16px}
  #capas .ing .raya{width:16px;margin:0 8px}
  #capas h2{font-size:clamp(32px,9.5vw,46px)}
  #selector-capas button{padding:7px 12px 6px;font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  #capas{height:100svh}
  #capas .ing{opacity:1}
  #capas .ing .chip,#capas .ing .raya,#capas .ing .punto{transform:none;transition:none}
  #capas .acciones-capas{opacity:1;transform:none;pointer-events:auto}
}