/* Despiece: la ortodoncia en un scroll. El lienzo comparte el color exacto del fondo de los fotogramas (#D6E1EB). */
.despiece{position:relative;background:var(--celeste);color:var(--tinta)}
.despiece .pista{height:420vh;position:relative}
.despiece .pegado{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-columns:1fr minmax(320px,80vh) 1fr;align-items:center;gap:0;overflow:hidden}
.despiece canvas{grid-column:2;width:100%;aspect-ratio:1/1;display:block}
.despiece .rotulo{grid-column:1;padding:0 40px 0 max(40px,calc((100vw - var(--ancho)) / 2));align-self:start;margin-top:60px}
.despiece .rotulo .ceja{color:var(--acento-txt)}
.despiece .rotulo h2{font-size:clamp(28px,3vw,40px)}
.despiece .rotulo p{color:var(--gris);margin-top:12px;font-size:17px;max-width:360px}
.despiece .etiquetas{grid-column:3;position:relative;height:100%;pointer-events:none}
.despiece .eti{position:absolute;left:0;top:50%;transform:translateY(-50%) translateX(12px);opacity:0;transition:opacity .25s,transform .25s;max-width:min(360px,calc(100% - 40px));margin-left:20px}
.despiece .eti.ver{opacity:1;transform:translateY(-50%) translateX(0)}
.despiece .eti .mes{display:inline-block;background:var(--tinta);color:var(--blanco);font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;padding:8px 14px;border-radius:var(--pildora)}
.despiece .eti .que{display:block;background:var(--blanco);color:var(--tinta);font-weight:700;font-size:20px;line-height:1.3;padding:16px 20px;border-radius:14px;margin-top:8px;box-shadow:0 12px 30px rgba(14,31,61,.12)}
.despiece .eti .que small{display:block;font-weight:500;color:var(--gris);font-size:15px;margin-top:6px}
.despiece .barra-progreso{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);width:min(320px,70vw);height:6px;border-radius:6px;background:rgba(14,31,61,.15);overflow:hidden}
.despiece .barra-progreso i{display:block;height:100%;width:0;background:var(--tinta)}
.despiece .pista-sigue{position:absolute;left:50%;bottom:44px;transform:translateX(-50%);background:var(--tinta);color:var(--blanco);font-weight:700;font-size:14px;padding:9px 16px;border-radius:var(--pildora);transition:opacity .3s;white-space:nowrap}
.despiece .pista-sigue.fuera{opacity:0}
.despiece .final{position:absolute;left:50%;bottom:64px;transform:translateX(-50%);opacity:0;transition:opacity .3s;pointer-events:none}
.despiece .final.ver{opacity:1;pointer-events:auto}
@media (max-width:980px){
  .despiece .pegado{grid-template-columns:1fr;grid-template-rows:auto 1fr auto;align-items:start}
  .despiece .rotulo{grid-column:1;padding:24px 20px 0;margin-top:0}
  .despiece .rotulo p{display:none}
  .despiece canvas{grid-column:1;width:min(100vw,52vh);margin:0 auto;align-self:center}
  .despiece .etiquetas{grid-column:1;height:auto;min-height:120px;padding:0 20px 90px}
  .despiece .eti{position:absolute;top:0;left:20px;right:20px;transform:translateY(8px);margin-left:0;max-width:none}
  .despiece .eti.ver{transform:translateY(0)}
  .despiece .eti .que{font-size:17px;padding:12px 16px}
  .despiece .pista{height:360vh}
}