/* puntos clave */
.xpu{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:40px;align-items:center;max-width:1160px;margin:0 auto}
.xpu__stage{width:100%;max-height:80vh}
.xpu__img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.xpu__pin{position:absolute;z-index:3;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;border:0;padding:0;background:transparent;cursor:pointer;opacity:0;transform:scale(.4);
  transition:opacity .5s var(--ease),transform .5s cubic-bezier(.34,1.56,.64,1)}
.xpu__pin.in{opacity:1;transform:none}
.xpu__pin::before{content:"";position:absolute;inset:0;border-radius:50%;background:rgba(255,255,255,.55);animation:xpuOnda 2.2s var(--ease) infinite}
.xpu__pin span{position:relative;display:grid;place-items:center;width:30px;height:30px;margin:5px;border-radius:50%;background:#fff;color:var(--ink);font:500 13px/1 var(--f-body);
  box-shadow:0 6px 18px -6px rgba(0,0,0,.45);transition:background .3s,color .3s,transform .3s}
.xpu__pin.on span,.xpu__pin:hover span{background:var(--sage-ink);color:#fff;transform:scale(1.1)}
@keyframes xpuOnda{0%{transform:scale(.7);opacity:.9}100%{transform:scale(1.7);opacity:0}}
.xpu__card{position:absolute;z-index:5;width:min(300px,72%);margin:28px 0 0 -20px;padding:16px 18px 18px;border-radius:var(--r-lg);background:#fff;color:var(--ink);
  box-shadow:0 24px 50px -24px rgba(0,0,0,.45);opacity:0;transform:translateY(8px) scale(.97);transform-origin:top left;transition:opacity .35s var(--ease),transform .35s var(--ease)}
.xpu__card.in{opacity:1;transform:none}
.xpu__card.is-izq{margin-left:calc(-1 * min(300px,72%) + 20px);transform-origin:top right}
.xpu__card.is-arriba{margin-top:0;transform:translateY(calc(-100% - 28px))}
.xpu__card.is-arriba.in{transform:translateY(calc(-100% - 28px))}
.xpu__x{position:absolute;right:8px;top:6px;width:32px;height:32px;border:0;background:none;font-size:22px;line-height:1;color:var(--muted);cursor:pointer}
.xpu__cf img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--r-md);margin-bottom:12px;display:block}
.xpu__ct{display:block;font:500 17px/1.25 var(--f-head);padding-right:24px}
.xpu__cx{margin:6px 0 0;font-size:14px;line-height:1.5;color:var(--muted)}
.xpu__list{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.xpu__list button{display:flex;gap:16px;width:100%;padding:14px 16px;border:0;border-radius:var(--r-lg);background:transparent;color:var(--x-ink);text-align:left;cursor:pointer;transition:background .3s}
.xpu__list button>span{flex:0 0 30px;height:30px;border-radius:50%;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--x-ink) 22%,transparent);font:500 13px/1 var(--f-body);transition:all .3s}
.xpu__list b{font:500 17px/1.3 var(--f-head);letter-spacing:-.01em}
.xpu__list p{margin:4px 0 0;font-size:14px;line-height:1.5;color:var(--x-muted)}
.xpu__list button.on{background:var(--x-photo)}
.xpu__list button.on>span{background:var(--sage-ink);border-color:var(--sage-ink);color:#fff}
@media(max-width:860px){.xpu{grid-template-columns:minmax(0,1fr);gap:18px}.xpu__stage{max-height:none}.xpu__list p{display:none}.xpu__list{grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr))}.xpu__list button{padding:10px 12px}.xpu__list b{font-size:15px}}
@media(max-width:760px){
  .xpu__card,.xpu__card.is-izq,.xpu__card.is-arriba{left:10px!important;right:10px;top:auto!important;bottom:10px;width:auto;margin:0;transform:translateY(12px);transform-origin:bottom center}
  .xpu__card.in,.xpu__card.is-arriba.in{transform:none}
  .xpu__cf img{aspect-ratio:16/8}
}
.xpu__card:not([hidden])~.nhx-hint{opacity:0}