/* PixaWeb · Oficina isométrica del hero. Todo acotado bajo .pw-office. */
.pw-office{
  --pwo-paper:#F4F0E8; --pwo-alt:#ECE6DA; --pwo-surface:#FFFDF9;
  --pwo-ink:#13232B; --pwo-text:#22303A; --pwo-muted:#5B6870; --pwo-line:rgba(19,35,43,.12);
  --pwo-accent:#C8441B; --pwo-link:#B23C17; --pwo-coral:#FF6939; --pwo-sage:#2C6E62;
  --pwo-shadow:0 14px 34px rgba(19,35,43,.14),0 2px 6px rgba(19,35,43,.08);
  position:relative; width:100%; max-width:100%; min-width:0;
  color:var(--pwo-text); font:inherit;
  container-type:inline-size;
}
.pw-office *,.pw-office *::before,.pw-office *::after{box-sizing:border-box}

/* Escenario: proporción fija para que el lienzo nunca empuje la columna de texto. */
.pw-office__frame{position:relative; width:100%; aspect-ratio:7/4}
.pw-office__poster,.pw-office__canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
.pw-office__poster{object-fit:contain; transition:opacity .35s ease, visibility 0s linear .35s}
.pw-office.is-live .pw-office__poster{opacity:0; visibility:hidden}
.pw-office__canvas{background:transparent; touch-action:auto; -webkit-tap-highlight-color:transparent}
.pw-office__canvas[hidden]{display:none}
.pw-office__canvas.is-hover{cursor:pointer}
.pw-office__dialog .pw-office__canvas{touch-action:none; cursor:grab}
.pw-office__dialog .pw-office__canvas.is-hover{cursor:pointer}
.pw-office__dialog .pw-office__canvas.is-dragging{cursor:grabbing}

/* Controles */
.pw-office__controls{position:absolute; top:8px; right:8px; display:flex; gap:6px; z-index:3}
.pw-office__controls[hidden]{display:none}
.pw-office__btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-width:36px; height:36px; padding:0 10px; border-radius:999px;
  background:var(--pwo-surface); color:var(--pwo-ink); border:1px solid var(--pwo-line);
  box-shadow:0 2px 8px rgba(19,35,43,.08); font:inherit; font-size:13px; font-weight:600; line-height:1; cursor:pointer;
}
.pw-office__btn:hover{border-color:rgba(19,35,43,.28)}
.pw-office__btn:focus-visible,.pw-office__chip:focus-visible,.pw-office__close:focus-visible,.pw-office__panel a:focus-visible{outline:2px solid var(--pwo-accent); outline-offset:2px}
.pw-office__btn svg{width:16px; height:16px; flex:none}
.pw-office__btn .pw-office__i-play{display:none}
.pw-office__btn.is-paused .pw-office__i-play{display:block}
.pw-office__btn.is-paused .pw-office__i-pause{display:none}
.pw-office__btn[hidden]{display:none}
@container (max-width:420px){ .pw-office__btn-label{display:none} .pw-office__btn{padding:0} }

/* Tooltip */
.pw-office__tip{
  position:absolute; left:0; top:0; z-index:4; pointer-events:none;
  display:flex; flex-direction:column; gap:1px; white-space:nowrap;
  padding:6px 10px; border-radius:10px; background:var(--pwo-surface); color:var(--pwo-ink);
  border:1px solid var(--pwo-line); box-shadow:var(--pwo-shadow); font-size:13px; line-height:1.3;
}
.pw-office__tip[hidden]{display:none}
.pw-office__tip strong{font-weight:700}
.pw-office__tip span{color:var(--pwo-muted); font-size:12px}

/* Panel contextual */
.pw-office__panel{
  position:absolute; left:12px; bottom:12px; z-index:5; width:min(340px, calc(100% - 24px));
  padding:16px 16px 14px; border-radius:14px; background:var(--pwo-surface); color:var(--pwo-text);
  border:1px solid var(--pwo-line); box-shadow:var(--pwo-shadow); font-size:14px; line-height:1.5;
}
.pw-office__panel[hidden]{display:none}
.pw-office__panel:focus{outline:none}
.pw-office__panel:focus-visible{outline:none}
.pw-office__panel.is-right{left:auto; right:12px}
.pw-office .pw-office__eyebrow{margin:0 32px 4px 0; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--pwo-sage)}
.pw-office .pw-office__ptitle{margin:0 32px 2px 0; font-size:18px; line-height:1.25; font-weight:700; color:var(--pwo-ink)}
.pw-office .pw-office__spec{margin:0 0 8px; color:var(--pwo-muted); font-size:13px}
.pw-office .pw-office__msg{margin:0 0 10px; font-size:14px; line-height:1.5; color:var(--pwo-text)}
.pw-office__link{display:inline-block; color:var(--pwo-link); font-weight:700; text-decoration:underline; text-underline-offset:3px}
.pw-office__link:hover{color:var(--pwo-accent)}
.pw-office .pw-office__note{margin:10px 0 0; padding-top:8px; border-top:1px solid var(--pwo-line); color:var(--pwo-muted); font-size:12px}
.pw-office .pw-office__note[hidden],.pw-office .pw-office__spec[hidden]{display:none}
.pw-office__close{
  position:absolute; top:8px; right:8px; width:32px; height:32px; border-radius:999px; border:0;
  background:transparent; color:var(--pwo-ink); font-size:22px; line-height:1; cursor:pointer;
}
.pw-office__close:hover{background:var(--pwo-alt)}
/* Escenario estrecho: el panel se abre debajo del lienzo en vez de taparlo. */
@container (max-width:520px){
  .pw-office__frame > .pw-office__panel,.pw-office__frame > .pw-office__panel.is-right{left:0; right:0; bottom:auto; top:calc(100% + 8px); width:auto}
}

/* Leyenda accesible (texto real, indexable) */
.pw-office__legend{margin-top:10px}
.pw-office .pw-office__legend-hint{margin:0 0 6px; font-size:12px; line-height:1.4; color:var(--pwo-muted)}
.pw-office__chips{display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; list-style:none}
.pw-office__chips li{margin:0}
.pw-office__chips li[hidden]{display:none}
.pw-office__chip{
  display:inline-flex; align-items:center; gap:7px; min-height:32px; padding:5px 12px; border-radius:999px;
  background:var(--pwo-surface); color:var(--pwo-ink); border:1px solid var(--pwo-line);
  font:inherit; font-size:13px; font-weight:600; line-height:1.2; cursor:pointer; text-align:left;
}
.pw-office__chip::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--pwo-sage); flex:none}
.pw-office__chip:hover{border-color:var(--pwo-sage)}
.pw-office__explore h3,.pw-office__explore .pw-office__group{margin:10px 0 6px; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--pwo-muted)}
.pw-office__explore .pw-office__chip::before{background:var(--pwo-coral)}
/* Zonas y personajes: visibles al recibir foco con teclado (o dentro del diálogo). */
.pw-office__explore:not(:focus-within){
  position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
.pw-office .pw-office__nojs{margin:8px 0 0; font-size:13px}
.pw-office__nojs a{color:var(--pwo-link)}

/* Vista ampliada */
.pw-office__dialog{
  width:min(1240px, calc(100vw - 32px)); max-width:none; max-height:calc(100dvh - 32px); margin:auto;
  padding:0; border:0; border-radius:18px; background:var(--pwo-paper); color:var(--pwo-text);
  box-shadow:0 30px 80px rgba(19,35,43,.35); overflow:auto;
}
.pw-office__dialog::backdrop{background:rgba(19,35,43,.55)}
.pw-office__dialog-in{padding:14px 16px 16px; container-type:inline-size}
.pw-office__dialog-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px}
.pw-office .pw-office__dialog-title{margin:0; font-size:18px; font-weight:700; color:var(--pwo-ink); flex:1 1 auto}
.pw-office .pw-office__dialog-sub{margin:0; font-size:12px; line-height:1.45; color:var(--pwo-muted); flex-basis:100%; order:3}
.pw-office__dialog-tools{display:flex; gap:6px}
.pw-office__dialog .pw-office__frame{aspect-ratio:auto; height:min(70dvh, calc((min(1240px, 100vw - 32px) - 32px) * 4 / 7)); border-radius:12px; background:var(--pwo-alt)}
.pw-office__dialog .pw-office__explore{position:static; width:auto; height:auto; margin:0; overflow:visible; clip:auto; clip-path:none; white-space:normal}
@media (max-width:640px){
  .pw-office__dialog{width:100vw; max-height:100dvh; height:100dvh; border-radius:0}
  .pw-office__dialog .pw-office__frame{height:62dvh}
}
@media (prefers-reduced-motion:reduce){ .pw-office__poster{transition:none} }