/* ==========================================================================
   BRASA — el despiece, estilos compartidos.
   Los usan la portada de pedido (delivery.html) y las cuatro fichas de
   hamburguesa. Estaban dentro de delivery.html y se sacaron aqui al montar las
   fichas: cuatro copias del mismo CSS es cuatro sitios donde olvidarse de
   cambiar algo.
   ========================================================================== */

/* ---- despiece: la burger se abre al bajar --------------------------------
   Es la pieza que mas gusta de toda la maqueta, asi que va aqui dentro y no
   escondida detras de un enlace. Tecnica de pagina de producto: una seccion
   alta, dentro un bloque pegado a la pantalla, y un lienzo que va pintando el
   fotograma que toca segun cuanto has bajado. Son 81 fotogramas de la misma
   toma, asi que la luz y la perspectiva no saltan. */
#capas{height:360vh;padding:0;position:relative}
#capas .fijo{position:sticky;top:0;height:100svh;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  padding:96px 24px 26px}
#capas canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block}
#capas .velo{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom, rgba(43,0,12,.72) 0%, rgba(43,0,12,.12) 26%,
             rgba(43,0,12,0) 48%, rgba(43,0,12,.35) 78%, rgba(43,0,12,.9) 100%)}
#capas .rotulo{position:relative;z-index:6;text-align:center;pointer-events:none}
#capas h2{font-size:clamp(40px,6.4vw,92px);color:var(--limon);
  text-shadow:0 4px 26px rgba(0,0,0,.6)}
#capas .rotulo p{font-size:21px;opacity:.85;margin-top:8px;
  text-shadow:0 2px 14px rgba(0,0,0,.7)}

/* etiquetas de ingrediente: salen a su altura cuando toca */
#capas .ing{position:absolute;z-index:4;display:flex;align-items:center;gap:0;
  opacity:0;transition:opacity .35s ease, transform .45s cubic-bezier(.34,1.56,.64,1)}
#capas .ing.izq{left:5%;flex-direction:row;transform:translateX(-26px)}
#capas .ing.der{right:5%;flex-direction:row-reverse;transform:translateX(26px)}
#capas .ing.on{opacity:1;transform:none}
#capas .ing .chip{background:var(--limon);color:var(--marron);font-size:18px;
  text-transform:uppercase;letter-spacing:.05em;padding:8px 16px;border-radius:99px;
  white-space:nowrap;box-shadow:0 6px 20px rgba(0,0,0,.45)}
#capas .ing .raya{width:clamp(30px,7vw,88px);height:3px;background:var(--limon);
  box-shadow:0 0 12px rgba(255,215,80,.7)}
#capas .ing .punto{width:11px;height:11px;border-radius:99px;background:var(--limon);
  box-shadow:0 0 12px rgba(255,215,80,.9);flex:0 0 auto}

/* pestañas para cambiar de hamburguesa */
#capas .selector{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;
  margin-top:18px;pointer-events:auto}
#capas .selector button{background:rgba(20,0,8,.78);border:2px solid rgba(245,227,205,.42);
  box-shadow:0 4px 16px rgba(0,0,0,.5);
  color:var(--crema);cursor:pointer;font-family:var(--texto);font-size:18px;
  text-transform:uppercase;letter-spacing:.05em;padding:7px 16px;border-radius:99px;
  backdrop-filter:blur(6px);transition:.2s}
#capas .selector button:hover{border-color:var(--limon);color:var(--limon)}
#capas .selector button.on{background:var(--limon);border-color:var(--limon);color:var(--marron)}

/* pie: progreso + añadir + pantalla completa */
#capas .pie{position:absolute;left:0;right:0;bottom:24px;z-index:5;
  display:flex;flex-direction:column;align-items:center;gap:14px;padding:0 24px}
#capas .progreso{width:min(420px,74vw);height:6px;border-radius:99px;
  background:rgba(245,227,205,.22);overflow:hidden}
#capas .progreso i{display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--naranja),var(--limon))}
#capas .acciones-capas{display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  justify-content:center;opacity:0;transform:translateY(14px);
  transition:opacity .45s ease,transform .45s ease;pointer-events:none}
#capas .acciones-capas.on{opacity:1;transform:none;pointer-events:auto}
#capas .pista{font-size:17px;text-transform:uppercase;letter-spacing:.3em;opacity:1;
  display:inline-block;background:rgba(18,8,12,.86);color:var(--crema);
  padding:7px 16px;border-radius:99px;transition:opacity .35s}
#capas .cargando{position:absolute;z-index:6;top:50%;left:50%;transform:translate(-50%,-50%);
  font-size:18px;letter-spacing:.24em;text-transform:uppercase;opacity:.75}

@media(max-width:760px){
  #capas{height:320vh}
  #capas .fijo{padding-top:82px}
  #capas .ing.izq{left:3%} #capas .ing.der{right:3%}
  #capas .ing .chip{font-size:16px;padding:7px 13px}
  #capas .ing .raya{width:22px}
}
/* Si el visitante ha pedido menos animacion, la seccion se queda en una sola
   pantalla con un fotograma fijo: se ve el producto, no se marea a nadie. */
@media (prefers-reduced-motion:reduce){
  #capas{height:100svh}
  #capas .ing{opacity:1;transform:none}
  #capas .acciones-capas{opacity:1;transform:none;pointer-events:auto}
}