/* ==========================================================================
   TERCER OJO — el despiece: la pizza que se abre por capas al bajar.
   Misma tecnica que BRASA/FORNO: seccion alta, bloque pegado, lienzo que
   pinta el fotograma segun el scroll. 81 fotogramas de una sola toma.
   AQUI los fotogramas son OSCUROS (pizarra negra): el velo oscurece con el
   negro de la marca y el rotulo va en hueso. En FORNO era al reves.
   ========================================================================== */

#capas{height:360vh;padding:0;position:relative;border-top:1px solid var(--borde)}
#capas .fijo{position:sticky;top:0;height:100svh;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  padding:72px 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(10,10,10,.94) 0%, rgba(10,10,10,.4) 22%,
             rgba(10,10,10,0) 45%, rgba(10,10,10,.35) 80%, rgba(10,10,10,.92) 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(--hueso)}
#capas .rotulo p{font-size:19px;color:var(--gris);margin-top:8px}

/* 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(--crema);color:var(--negro);font-size:17px;
  font-family:var(--display);font-weight:500;
  text-transform:uppercase;letter-spacing:.08em;padding:8px 16px;
  white-space:nowrap;box-shadow:0 6px 20px rgba(0,0,0,.55)}
#capas .ing .raya{width:clamp(30px,7vw,88px);height:2px;background:var(--crema);
  box-shadow:0 0 12px rgba(233,196,106,.6)}
#capas .ing .punto{width:10px;height:10px;border-radius:99px;background:var(--crema);
  box-shadow:0 0 12px rgba(233,196,106,.85);flex:0 0 auto}

/* pestañas por si algun dia hay mas de un despiece */
#capas .selector{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;
  margin-top:18px;pointer-events:auto}
#capas .selector button{background:rgba(10,10,10,.8);border:1px solid var(--gris);
  color:var(--hueso);cursor:pointer;font-family:var(--display);font-size:16px;
  text-transform:uppercase;letter-spacing:.08em;padding:7px 16px;
  backdrop-filter:blur(6px);transition:.2s}
#capas .selector button:hover{border-color:var(--crema);color:var(--crema)}
#capas .selector button.on{background:var(--crema);border-color:var(--crema);color:var(--negro)}

/* pie: progreso + añadir + pista */
#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:4px;
  background:rgba(237,229,212,.2);overflow:hidden}
#capas .progreso i{display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--rojo-txt),var(--crema))}
#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 .acciones-capas .anadir{background:var(--crema);border-color:var(--crema);color:var(--negro)}
#capas .acciones-capas .anadir.hecho{background:var(--verde);border-color:var(--verde);color:var(--hueso)}
#capas .pista{font-size:14px;text-transform:uppercase;letter-spacing:.3em;opacity:1;
  display:inline-block;background:rgba(10,10,10,.88);color:var(--hueso);
  border:1px solid var(--borde);padding:7px 16px;transition:opacity .35s}
#capas .cargando{position:absolute;z-index:6;top:50%;left:50%;transform:translate(-50%,-50%);
  font-size:16px;letter-spacing:.24em;text-transform:uppercase;color:var(--gris)}

@media(max-width:760px){
  #capas{height:320vh}
  #capas .fijo{padding-top:76px}
  #capas .ing.izq{left:3%} #capas .ing.der{right:3%}
  #capas .ing .chip{font-size:14px;padding:6px 11px}
  #capas .ing .raya{width:22px}
}
/* Si el visitante pide menos animacion: una pantalla, un fotograma fijo. */
@media (prefers-reduced-motion:reduce){
  #capas{height:100svh}
  #capas .ing{opacity:1;transform:none}
  #capas .acciones-capas{opacity:1;transform:none;pointer-events:auto}
}