/* ============================================================
   PÁGINA DE OBRA — una plantilla para las tres

   Los tokens y la base vienen de ../assets/d.css: aquí no se declara
   ni un color ni una fuente. Un solo :root en todo el proyecto
   (CLAUDE.md, decisión 1).

   La regla que gobierna esta hoja: NINGUNA CAJA IMPONE SU FORMA A LA
   FOTO. Cada plancha lleva su propia proporción, puesta por obra.js
   desde el archivo, así que no hay un solo `cover` que pueda cortar
   una cara. Es la regla 7 de CLAUDE.md llevada al extremo: no es que
   la caja ceda cuando no cabe, es que la caja nunca decide.
   ============================================================ */

.ob-bar{
  position:fixed; z-index:var(--z-bar, 40);
  inset:clamp(10px,1.6vw,18px) clamp(10px,1.6vw,18px) auto;
  display:flex; align-items:center; gap:clamp(10px,2vw,22px);
  padding:11px clamp(12px,1.6vw,20px);
  background:color-mix(in oklab, var(--deep) 88%, transparent);
  border:1px solid color-mix(in oklab, var(--ink) 16%, transparent);
  backdrop-filter:blur(14px) saturate(1.3);
}
.ob-back{ display:inline-flex; align-items:center; gap:.5em; }
.ob-back:hover{ color:var(--acc); }
.ob-bar .grow{ margin-inline-start:auto; }

/* ---------------- cabecera ---------------- */
.ob-head{ padding:clamp(96px,13vh,150px) var(--gut) 0; }
.ob-head .m--s{ display:block; margin-bottom:14px; }
.ob-title{ display:grid; gap:clamp(16px,2.4vw,28px); }
@media (min-width:1000px){
  .ob-title{ grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); align-items:end;
             gap:clamp(28px,5vw,72px); }
}
.ob-title h1 small{
  display:block; font-family:var(--text); font-weight:400; text-transform:none;
  letter-spacing:0; line-height:1.3; color:var(--ink-2);
  font-size:clamp(1rem,1.6vw,1.35rem); margin-top:.5em;
}

/* la ficha: el estudio enseña la especificación, no se adjetiva */
.ob-spec{ display:grid; margin:0; }
.ob-spec div{ display:flex; justify-content:space-between; gap:16px;
  padding:9px 0; border-bottom:1px solid var(--line-2); }
.ob-spec dt{ font-family:var(--mono); font-size:.62rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-2); }
.ob-spec dd{ margin:0; font-size:.92rem; text-align:right; }
.ob-spec dd.num{ font-variant-numeric:tabular-nums; }

/* ---------------- el argumento ---------------- */
.ob-claim{
  margin:clamp(52px,8vw,104px) var(--gut) 0;
  border-top:1px solid var(--line); padding-top:clamp(22px,3vw,34px);
  display:grid; gap:clamp(14px,2vw,26px);
}
@media (min-width:1000px){
  .ob-claim{ grid-template-columns:minmax(0,32ch) minmax(0,1fr);
             gap:clamp(28px,5vw,72px); }
}
.ob-claim h2{ font-size:clamp(1.15rem,2.2vw,1.7rem); }

/* ---------------- planchas ----------------
   Una columna en móvil, dos desde 760. La plancha NO recorta: la caja
   toma la proporción del archivo (`--ar`, puesta por obra.js). Si una
   pieza es más ancha que alta ocupa la fila entera, porque partirla en
   dos columnas la dejaría en un sello de 300px. */
.ob-plates{
  display:grid; gap:2px; padding:0 2px;
  margin-top:clamp(52px,8vw,104px); background:var(--line-2);
  grid-template-columns:1fr;
}
@media (min-width:760px){ .ob-plates{ grid-template-columns:repeat(2,1fr); } }
.ob-plate{
  position:relative; overflow:hidden; background:var(--deep);
  aspect-ratio:var(--ar, 4/5); width:100%;
}
.ob-plate[data-wide="1"]{ grid-column:1 / -1; }
.ob-plate > img, .ob-plate > video{
  position:absolute; inset:0; width:100%; height:100%;
  /* contain, no cover: la caja ya tiene la proporción del archivo, así que
     coinciden y no sobra nada — y si alguna vez no coincidieran, se vería
     el plano entero en vez de recortarlo. */
  object-fit:contain;
  transition:filter .45s var(--ease-s), transform .6s var(--ease);
}
.ob-plate:hover > img, .ob-plate:hover > video{
  filter:saturate(1.04) brightness(1.05); transform:scale(1.012);
}
.ob-cap{
  position:absolute; inset:auto 0 0 0; z-index:3; padding:10px 12px;
  display:flex; justify-content:space-between; align-items:flex-end; gap:10px;
  background:linear-gradient(to top, color-mix(in oklab, var(--deep) 92%, transparent), transparent);
  opacity:0; transform:translateY(6px);
  transition:opacity .24s var(--ease-s), transform .24s var(--ease-s);
}
.ob-plate:hover .ob-cap, .ob-plate:focus-within .ob-cap{ opacity:1; transform:none; }
/* Los films llevan su propio control: nada de autoplay en una página de obra,
   aquí se viene a mirar una pieza concreta, no a que te asalten seis. */
.ob-play{
  position:absolute; inset:0; z-index:4; display:grid; place-items:center;
  background:color-mix(in oklab, var(--deep) 30%, transparent);
  transition:background .2s var(--ease-s);
}
.ob-play:hover{ background:color-mix(in oklab, var(--deep) 12%, transparent); }
.ob-play span{
  width:clamp(48px,5vw,64px); aspect-ratio:1; border-radius:50%;
  background:var(--acc); color:var(--deep);
  display:grid; place-items:center; font-size:1.1rem; line-height:1;
  box-shadow:0 10px 34px color-mix(in oklab, var(--deep) 78%, black);
}
.ob-plate[data-playing="1"] .ob-play{ display:none; }
.ob-sound{
  position:absolute; top:10px; right:10px; z-index:5;
  border:1px solid var(--acc); color:var(--acc); padding:.24em .5em;
  background:color-mix(in oklab, var(--deep) 70%, transparent);
}

/* ---------------- cierre ---------------- */
.ob-end{ padding:clamp(56px,9vw,120px) var(--gut) clamp(34px,5vw,64px);
  display:grid; gap:clamp(18px,2.6vw,32px); }
.ob-next{ display:flex; flex-wrap:wrap; gap:10px 14px; }
.ob-next a{
  border:1px solid var(--line); padding:.7em 1em;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  transition:border-color .2s var(--ease-s), color .2s var(--ease-s);
}
.ob-next a:hover{ border-color:var(--acc); color:var(--acc); }
.ob-disc{ border:1px solid var(--line-2); padding:clamp(15px,2vw,24px); max-width:72ch; }

@media (prefers-reduced-motion: reduce){
  .ob-plate > img, .ob-plate > video, .ob-cap{ transition:none }
}