/* ==========================================================================
   DIAMANTI & CARATI — despiece del anillo en la portada.
   Fondo = color exacto de los fotogramas (#17150F, el --tinta de la marca), velo
   arriba y abajo, etiquetas numeradas en oro con línea que crece desde un punto.
   Colores comprobados antes del CSS (WCAG):
     marfil #F8F5EE sobre #17150F  16,8   ·  oro #C7B37F sobre #17150F  8,9
     gris   #B5AD9C sobre #17150F   8,2   ·  botón: tinta #17150F sobre oro 8,9
   ========================================================================== */
#despiece{height:400vh;padding:0;position:relative;background:#17150F;color:#F8F5EE}
#despiece .fijo{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
#despiece canvas{position:absolute;inset:0;width:100%;height:100%;display:block;background:#17150F;z-index:0}
#despiece .velo{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(23,21,15,.96) 0%,rgba(23,21,15,.82) 13%,rgba(23,21,15,0) 30%,
             rgba(23,21,15,0) 76%,rgba(23,21,15,.7) 88%,rgba(23,21,15,.97) 100%)}
#despiece .rotulo{position:absolute;z-index:5;left:6%;top:clamp(92px,13vh,140px);max-width:min(30%,420px);pointer-events:none}
#despiece .rotulo .kicker{color:#C7B37F;margin-bottom:14px}
#despiece h2{color:#F8F5EE;font-size:clamp(34px,3.6vw,56px);margin:0}
#despiece .rotulo p{color:#B5AD9C;font-size:15.5px;line-height:1.6;margin-top:16px;transition:opacity .35s ease}
#despiece.con-etiquetas .rotulo p{opacity:0}

/* etiquetas: número en oro, título marfil y detalle gris; línea que crece desde el punto */
#despiece .eti{position:absolute;z-index:4;display:flex;align-items:center;opacity:0;transition:opacity .4s ease}
#despiece .eti.izq{left:6%;flex-direction:row}
#despiece .eti.der{right:6%;flex-direction:row-reverse}
#despiece .eti .texto{display:flex;gap:14px;align-items:baseline;max-width:300px;transform:translateY(8px);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
#despiece .eti.der .texto{flex-direction:row-reverse;text-align:right}
#despiece .eti .num{font-family:var(--display);font-size:24px;line-height:1;color:#C7B37F;font-weight:700}
#despiece .eti strong{display:block;font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#F8F5EE}
#despiece .eti small{display:block;font-size:14.5px;line-height:1.5;color:#B5AD9C;margin-top:5px;letter-spacing:0;text-transform:none}
#despiece .eti .raya{width:clamp(30px,6vw,110px);height:1px;background:rgba(199,179,127,.8);margin:0 14px;transform:scaleX(0);transition:transform .6s cubic-bezier(.2,.7,.2,1) .05s}
#despiece .eti.izq .raya{transform-origin:right center}
#despiece .eti.der .raya{transform-origin:left center}
#despiece .eti .punto{width:9px;height:9px;border-radius:50%;background:#C7B37F;flex:0 0 auto;box-shadow:0 0 0 5px rgba(199,179,127,.22);transform:scale(0);transition:transform .35s ease}
#despiece .eti.on{opacity:1}
#despiece .eti.on .texto,#despiece .eti.on .raya,#despiece .eti.on .punto{transform:none}

/* pie: progreso, pista y cierre con botón */
#despiece .pie{position:absolute;left:0;right:0;bottom:0;z-index:5;display:flex;flex-direction:column;align-items:center;gap:14px;padding:0 20px 30px}
#despiece .progreso{width:min(300px,60vw);height:1px;background:rgba(248,245,238,.22)}
#despiece .progreso i{display:block;height:100%;width:0;background:#C7B37F}
#despiece .pista{font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;color:#B5AD9C;transition:opacity .35s}
#despiece .cierre{display:flex;gap:18px;align-items:center;flex-wrap:wrap;justify-content:center;opacity:0;transform:translateY(12px);
  transition:opacity .45s ease,transform .45s ease;pointer-events:none}
#despiece .cierre.on{opacity:1;transform:none;pointer-events:auto}
#despiece .cierre .enlace{color:#F8F5EE;border-color:rgba(248,245,238,.6)}
#despiece .cierre .btn{color:#17150F;background:#C7B37F;border-color:#C7B37F}  /* tinta sobre oro: 8,9 */
#despiece .cierre .btn:hover{background:#DCCEA8;border-color:#DCCEA8;color:#17150F}
#despiece .cargando{position:absolute;z-index:6;top:50%;left:50%;transform:translate(-50%,-50%);font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:#B5AD9C}

@media (max-width:760px){
  #despiece{height:340vh}
  #despiece .rotulo{left:20px;right:20px;top:78px;max-width:none;text-align:center}
  #despiece h2{font-size:clamp(28px,8.4vw,40px)}
  #despiece .rotulo p{display:none}
  #despiece canvas{top:150px;height:calc(100% - 250px)}
  #despiece .eti.izq{left:12px} #despiece .eti.der{right:12px}
  #despiece .eti .texto{background:rgba(23,21,15,.86);padding:8px 12px;border-radius:4px;max-width:190px;gap:9px}
  #despiece .eti .num{font-size:17px}
  #despiece .eti strong{font-size:11px;letter-spacing:.1em}
  #despiece .eti small{display:none}
  #despiece .eti .raya,#despiece .eti .punto{display:none}   /* en móvil no hay sitio para la línea: etiqueta sola, sin tocar el anillo */
}
@media (prefers-reduced-motion:reduce){
  #despiece{height:auto}
  #despiece .fijo{position:relative;height:100svh}
  #despiece .eti,#despiece .cierre{opacity:1}
  #despiece .eti .texto,#despiece .eti .raya,#despiece .eti .punto,#despiece .cierre{transform:none;transition:none}
}