/* La casa por dentro: tres columnas; la del centro se abre en una rendija con el video del tour
   y acaba ocupando toda la pantalla. Sin JS (o con movimiento reducido) se ve en estatico.
   Portado de joyeria-mabel/sitio/pieza.css a la paleta negra de Life Maxxxing. */
.pieza{background:var(--bg);position:relative}
.pz-stage{position:relative}
.pz-kicker{position:absolute;top:18px;left:clamp(16px,4vw,40px);z-index:4;margin:0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.pz-cols{display:grid;grid-template-columns:repeat(3,1fr);min-height:clamp(420px,70vh,720px)}
.pz-col{margin:0;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:56px clamp(10px,2vw,28px) 40px;border-left:1px solid var(--border);will-change:transform,opacity}
.pz-col:first-child{border-left:0}
.pz-plate{width:min(88%,420px);aspect-ratio:16/10;background:var(--surface);overflow:hidden;border-radius:8px;border:1px solid var(--border)}
.pz-plate img{width:100%;height:100%;object-fit:cover;display:block}
.pz-col figcaption{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;min-height:96px}
.pz-name{font-family:var(--display);font-size:clamp(15px,1.5vw,19px);letter-spacing:.04em;color:var(--text)}
.pz-meta{font-size:12.5px;color:var(--muted);line-height:1.5;max-width:26ch}
.pz-peek{font-family:var(--body);font-weight:600;font-size:12px;letter-spacing:.06em;text-transform:uppercase;background:none;border:0;color:var(--text);text-decoration:underline;text-decoration-color:var(--xxx);text-underline-offset:5px;padding:0;cursor:pointer;min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}
.pz-peek:hover{color:var(--xxx)}
.pz-peek:focus-visible{outline:2px solid var(--xxx);outline-offset:4px}
.pz-film{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000}
.pz-film video{width:100%;height:100%;object-fit:cover;display:block}
.pz-veil{position:absolute;inset:0;pointer-events:none;opacity:0;background:linear-gradient(90deg,rgba(10,10,10,.88) 0%,rgba(10,10,10,.55) 34%,rgba(10,10,10,0) 62%)}
.pz-over{padding:36px clamp(16px,4vw,40px) 56px;max-width:36rem}
.pz-over h2{font-family:var(--display);font-weight:400;font-size:clamp(30px,4.6vw,64px);line-height:1.02;letter-spacing:-.01em;color:var(--text);margin:0}
.pz-copy{font-size:15.5px;line-height:1.65;color:var(--muted);margin:18px 0 26px;max-width:42ch}
.pz-copy strong{color:var(--text);font-weight:600}
.pz-ctas{display:flex;gap:12px;flex-wrap:wrap}
.pz-hint{display:none}
/* modo vivo (lo activa pieza.js) */
.pieza.pz-live .pz-track{height:380vh}
.pieza.pz-live .pz-stage{position:sticky;top:var(--pz-top,0px);height:calc(100vh - var(--pz-top,0px));height:calc(100svh - var(--pz-top,0px));overflow:hidden}
.pieza.pz-live .pz-cols{position:absolute;inset:0;min-height:0}
.pieza.pz-live .pz-film{position:absolute;inset:0;aspect-ratio:auto;z-index:2;visibility:hidden;clip-path:inset(0 50% 0 50%);will-change:clip-path}
.pieza.pz-live .pz-film video{transform:scale(var(--pz-zoom,1.08));transform-origin:50% 45%}
.pieza.pz-live .pz-over{position:absolute;z-index:3;left:clamp(16px,5vw,64px);bottom:clamp(28px,7vh,72px);padding:0;opacity:0;visibility:hidden;transform:translateY(24px);will-change:opacity,transform}
.pieza.pz-live .pz-hint{display:flex;align-items:center;gap:12px;position:absolute;z-index:4;left:50%;bottom:22px;transform:translateX(-50%);margin:0;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);white-space:nowrap;transition:opacity .3s ease}
.pz-hint span{width:1px;height:28px;background:var(--border);position:relative;overflow:hidden}
.pz-hint span::after{content:"";position:absolute;left:0;top:-40%;width:1px;height:40%;background:var(--xxx);animation:pzDrop 1.8s ease-in-out infinite}
@keyframes pzDrop{to{top:100%}}
@media (max-width:640px){
  .pz-col{gap:12px;padding:52px 8px 64px}
  .pz-plate{width:92%}
  .pz-col:not(.pz-col--hero) .pz-meta{display:none}
  .pz-col:not(.pz-col--hero) .pz-name{font-size:11px;letter-spacing:.06em}
  .pz-col--hero .pz-plate{width:100%}
  .pz-col figcaption{min-height:90px}
  .pieza:not(.pz-live) .pz-film{aspect-ratio:4/5}
  .pieza.pz-live .pz-over{top:22px;bottom:22px;left:16px;right:16px;max-width:none;display:flex;flex-direction:column}
  .pieza.pz-live .pz-ctas{margin-top:auto}
  .pz-over h2{font-size:clamp(26px,8vw,36px)}
  .pz-copy{font-size:14px;margin:10px 0 18px}
  .pz-veil{background:linear-gradient(180deg,rgba(10,10,10,.94) 0%,rgba(10,10,10,.7) 30%,rgba(10,10,10,0) 48%),linear-gradient(0deg,rgba(10,10,10,.9) 0%,rgba(10,10,10,0) 24%)}
}
@media (prefers-reduced-motion:reduce){.pz-hint span::after{animation:none}}