/* La pieza: fila de columnas; la del centro se abre en una rendija con el anillo puesto
   y el vídeo acaba ocupando toda la pantalla. Sin JS (o con movimiento reducido) se ve en estático. */
.pieza{background:var(--bg);border-bottom:1px solid var(--line);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:.28em;text-transform:uppercase;color:var(--gold-deep);
}

/* columnas */
.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(--line);
  will-change:transform,opacity;
}
.pz-col:first-child{border-left:0;}
.pz-plate{width:min(64%,300px);aspect-ratio:1/1;background:#fff;overflow:hidden;}
.pz-plate img{width:100%;height:100%;object-fit:cover;display:block;}
.pz-col figcaption{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;text-align:center;min-height:118px;}
.pz-peek{margin-top:2px;}
.pz-name{font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(16px,1.6vw,20px);color:var(--ink);}
.pz-meta{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);line-height:1.5;max-width:22ch;}
.pz-peek{
  font-family:"Jost",sans-serif;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  background:none;border:0;color:var(--ink);
  text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:5px;
  padding:0;cursor:pointer;
}
.pz-peek{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;}
.pz-peek:hover{color:var(--gold-deep);}

/* contraste de los números del proceso (el dorado claro se quedaba en 2,96:1) */
.step .num{color:var(--gold-deep);}
.pz-peek:focus-visible{outline:2px solid var(--gold-deep);outline-offset:4px;}

/* vídeo */
.pz-film{position:relative;aspect-ratio:16/9;overflow:hidden;background:#efeae2;}
.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(247,245,240,.88) 0%,rgba(247,245,240,.55) 32%,rgba(247,245,240,0) 60%);
}

/* texto final */
.pz-over{padding:36px clamp(16px,4vw,40px) 56px;max-width:34rem;}
.pz-over h2{font-size:clamp(34px,5.2vw,72px);line-height:1.02;letter-spacing:-.01em;color:var(--ink);max-width:11ch;}
.pz-copy{font-size:15.5px;line-height:1.65;color:var(--ink-soft);margin:18px 0 26px;max-width:40ch;}
.pz-ctas{display:flex;gap:12px;flex-wrap:wrap;}
.pz-over .btn-ghost{background:rgba(247,245,240,.6);}

.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(--ink-soft);white-space:nowrap;
  transition:opacity .3s ease;
}
.pz-hint span{width:1px;height:28px;background:var(--line);position:relative;overflow:hidden;}
.pz-hint span::after{
  content:"";position:absolute;left:0;top:-40%;width:1px;height:40%;background:var(--gold-deep);
  animation:pzDrop 1.8s ease-in-out infinite;
}
@keyframes pzDrop{to{top:100%;}}

/* móvil: columnas estrechas como en una tira, sin meta larga */
@media (max-width:640px){
  .pz-col{gap:12px;padding:52px 8px 64px;}
  .pz-plate{width:88%;}
  .pz-meta{font-size:9.5px;letter-spacing:.1em;}
  .pz-col:not(.pz-col--hero) .pz-meta{display:none;}
  .pz-col figcaption{min-height:112px;}
  .pieza:not(.pz-live) .pz-film{aspect-ratio:4/5;}
  /* en vertical el anillo queda en el centro: texto arriba, botones abajo */
  .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;padding-right:64px;}
  .pz-over h2{font-size:clamp(28px,8.4vw,38px);max-width:13ch;}
  .pz-copy{font-size:14px;margin:10px 0 18px;}
  .pz-ctas .btn{padding:12px 16px;font-size:11.5px;min-height:44px;}
  .pz-veil{background:
    linear-gradient(180deg,rgba(247,245,240,.94) 0%,rgba(247,245,240,.72) 30%,rgba(247,245,240,0) 46%),
    linear-gradient(0deg,rgba(247,245,240,.9) 0%,rgba(247,245,240,0) 22%);}
}
@media (max-width:380px){
  .pz-name{font-size:14px;}
  .pz-meta{display:none;}
}

@media (prefers-reduced-motion: reduce){
  .pz-hint span::after{animation:none;}
}