/* ── BREADCRUMB ── */
.obra-breadcrumb {
  padding: 0 0 var(--spacing-sm);
  display: flex; gap: 8px; align-items: center;
  font-size: 14px; color: var(--color-ink-dim);
}
.obra-breadcrumb a { transition: color .3s; }
.obra-breadcrumb a:hover { color: var(--color-ink); }
.obra-breadcrumb > span:not(:last-child) { opacity: .4; }

/* ── OBRA INDIVIDUAL ── */
.obra-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "img top" "img info";
  column-gap: var(--spacing-md);
  row-gap: 0;
  padding: var(--spacing-md) var(--page-pad) var(--spacing-xl);
  align-items: start;
}
.obra-img-col  { grid-area: img; }
.obra-info-top { grid-area: top; }
.obra-info     { grid-area: info; }

/* IMAGEN */
.obra-img-col {
  position: sticky;
  top: calc(var(--header-h) + var(--spacing-md));
  height: calc(100vh - var(--header-h) - var(--spacing-md) * 2);
  display: grid;
  grid-template-columns: 56px 1fr;
  grid-template-areas: "thumbs main";
  gap: 0 8px;
}
.obra-img-main {
  grid-area: main;
  min-height: 0; overflow: hidden; position: relative; cursor: pointer;
}
.obra-contexto-label { display: none; }
.obra-img-thumbs {
  grid-area: thumbs;
  display: flex; flex-direction: column; gap: 6px;
  align-content: start;
  overflow-y: auto; scrollbar-width: none;
}
.obra-img-thumbs::-webkit-scrollbar { display: none; }
.obra-thumb { width: 100%; aspect-ratio: 1/1; cursor: pointer; border: 0.5px solid transparent; transition: border-color .3s, opacity .3s; overflow: hidden; opacity: 0.5; }
.obra-thumb:hover { opacity: 0.8; }
.obra-thumb.active { border-color: var(--color-ink); opacity: 1; }
.obra-thumb img, .obra-thumb .ph { width: 100%; height: 100%; object-fit: cover; }

/* INFO */
.obra-info {}
.obra-coleccion { font-size: 14px; color: var(--color-ink-dim); margin-bottom: var(--spacing-sm); }
.obra-titulo { font-family: var(--font-display); font-size: clamp(28px,4vw,56px); font-weight: 300; font-style: italic; line-height: 1.15; margin: 0 0 8px; }
.obra-year { font-size: 14px; color: var(--color-ink-dim); margin-bottom: var(--spacing-md); }
.obra-divider { height: var(--line-weight); background: var(--color-ink-faint); margin: var(--spacing-sm) 0; }
.obra-desc { font-size: 14px; color: var(--color-ink-dim); line-height: 1.9; margin-bottom: var(--spacing-md); }

/* OPCIONES DE COMPRA */
.opciones-titulo { font-size: 14px; color: var(--color-ink-dim); margin-bottom: var(--spacing-sm); }
.opcion-card {
  border: 0.5px solid var(--color-ink-faint);
  padding: var(--spacing-sm); margin-bottom: 8px;
  cursor: pointer; transition: border-color .3s;
}
.opcion-card:hover, .opcion-card.active { border-color: var(--color-ink); }
.opcion-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.opcion-nombre { font-size: 14px; color: var(--color-ink); }
.opcion-precio { font-family: var(--font-display); font-size: 24px; font-weight: 300; font-style: italic; }
.opcion-desc { font-size: 14px; color: var(--color-ink-dim); line-height: 1.7; }

/* VARIANTES PRINT */
.variantes-section { margin-top: var(--spacing-sm); display: none; }
.opcion-card.active .variantes-section { display: block; }
.variantes-label { font-size: 14px; color: var(--color-ink-dim); margin-bottom: 8px; margin-top: 12px; }
.variantes-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.variante-btn {
  font-size: 14px; border: 0.5px solid var(--color-ink-faint);
  padding: 5px 12px; color: var(--color-ink-dim); cursor: pointer;
  transition: border-color .3s, color .3s;
}
.variante-btn:hover, .variante-btn.active { border-color: var(--color-ink); color: var(--color-ink); }

/* BTN AGREGAR */
.btn-agregar {
  display: block; width: 100%; text-align: center;
  border: 0.5px solid var(--color-ink-faint);
  padding: 16px; font-family: var(--font-mono);
  font-size: 14px;
  color: var(--color-ink); text-transform: uppercase;
  cursor: pointer; margin-top: var(--spacing-sm);
  transition: border-color .3s, background .3s;
}
.btn-agregar:hover { border-color: var(--color-ink); background: var(--color-ink-faint); }
.btn-pagar {
  display: block; width: 100%; text-align: center;
  background: var(--color-ink); color: var(--color-bg);
  padding: 16px; font-family: var(--font-mono);
  font-size: 14px; text-transform: uppercase;
  cursor: pointer; margin-top: 8px;
  transition: opacity .3s;
}
.btn-pagar:hover { opacity: 0.8; }
.obra-garantia { font-size: 14px; color: var(--color-ink-dim); line-height: 1.8; margin-top: var(--spacing-sm); }

/* ── CONTEXTO MOCKUP ── */
img.obra-direct-img, .obra-ctx-wrap {
  transition: opacity .3s var(--ease-out);
}
img.obra-direct-img {
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: top center;
  background: transparent;
}
.obra-ctx-wrap {
  position: absolute; inset: 0;
  display: flex; align-items: start; justify-content: center;
}
.obra-ctx-inner {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.obra-ctx-inner[data-frame="01"] { aspect-ratio: 1600/1067; }
.obra-ctx-inner[data-frame="02"] { aspect-ratio: 1536/1024; }
.obra-ctx-inner[data-frame="03"] { aspect-ratio: 1600/1128; }
.obra-ctx-inner[data-frame="04"] { aspect-ratio: 1600/1215; }
.obra-ctx-inner[data-frame="07"] { aspect-ratio: 1417/943; }
.obra-ctx-scene {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 2; pointer-events: none;
}
.obra-ctx-art {
  position: absolute; z-index: 1;
  object-fit: cover;
}
/* Posición del hueco por escena — ajustar visualmente */
.obra-ctx-inner[data-frame="01"] .obra-ctx-art { top: 13%; left: 36%; width: 28%; height: 62%; }
.obra-ctx-inner[data-frame="02"] .obra-ctx-art { top: 26%; left: 24%; width: 52%; height: 64%; }
.obra-ctx-inner[data-frame="03"] .obra-ctx-art { top: 18%; left: 51%; width: 39%; height: 39%; }
.obra-ctx-inner[data-frame="04"] .obra-ctx-art { top: 15%; left: 23%; width: 47%; height: 62%; }
.obra-ctx-inner[data-frame="07"] .obra-ctx-art { top: 0%;  left: 31%; width: 40%; height: 46%; }

/* Lightbox contexto */
.lb-ctx-wrap {
  display: flex; align-items: center; justify-content: center;
}
.lb-ctx-wrap .obra-ctx-inner[data-frame] {
  width: auto;
  aspect-ratio: unset;
}
.lb-ctx-wrap .obra-ctx-scene {
  position: relative;
  width: auto;
  max-width: 88vw;
  max-height: 88vh;
}

/* LIGHTBOX */
.lightbox {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.96);
  z-index: 500; display: none;
  align-items: center; justify-content: center;
  padding: var(--page-pad);
}
.lightbox.is-open { display: flex; }
.lightbox-img { max-width: 90vw; max-height: 90vh; object-fit: contain; cursor: grab; user-select: none; }
.lightbox .lb-ctx-wrap { cursor: grab; user-select: none; }
.lightbox.is-dragging .lightbox-img,
.lightbox.is-dragging .lb-ctx-wrap { cursor: grabbing; }
.lightbox-close {
  position: absolute; top: var(--page-pad); right: var(--page-pad);
  font-size: 28px; color: #ffffff;
  cursor: pointer; line-height: 1;
}
.lightbox-prev, .lightbox-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: transparent; border: 0.5px solid rgba(255,255,255,0.25);
  color: #ffffff; width: 40px; height: 40px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: border-color .3s, opacity .3s;
}
.lightbox-prev { left: var(--page-pad); }
.lightbox-next { right: var(--page-pad); }
.lightbox-prev:hover, .lightbox-next:hover { border-color: rgba(255,255,255,0.6); }
.lightbox-prev:disabled, .lightbox-next:disabled { opacity: 0.2; cursor: default; }

/* ── ENCUADRE TRIGGER ── */
.encuadre-trigger { margin-top: 8px; }
.btn-encuadre {
  display: block; width: 100%; text-align: left;
  border: 0.5px solid var(--color-ink-faint);
  padding: 10px 16px; font-family: var(--font-mono);
  font-size: 14px; color: var(--color-ink-dim);
  cursor: pointer; background: transparent;
  transition: border-color .3s, color .3s;
}
.btn-encuadre:hover { border-color: var(--color-ink); color: var(--color-ink); }

/* ── ENCUADRE MODAL ── */
.encuadre-modal {
  position: fixed; inset: 0; z-index: 600;
  background: rgba(0,0,0,0.88);
  display: none; align-items: center; justify-content: center;
  padding: var(--spacing-sm);
}
.encuadre-modal.is-open { display: flex; }
.encuadre-box {
  width: 100%; max-width: 640px;
  height: clamp(420px, 90vh, 740px);
  background: var(--color-surface);
  border: 0.5px solid var(--color-ink-faint);
  display: flex; flex-direction: column;
}
.encuadre-modal-hd {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 16px; border-bottom: 0.5px solid var(--color-ink-faint);
  flex-shrink: 0;
}
.encuadre-modal-title { font-size: 14px; color: var(--color-ink-dim); letter-spacing: .15em; }
.encuadre-modal-close { font-size: 24px; color: var(--color-ink-dim); cursor: pointer; line-height: 1; transition: color .3s; }
.encuadre-modal-close:hover { color: var(--color-ink); }
.encuadre-modal-body {
  flex: 1; min-height: 0; padding: 16px;
  display: flex; flex-direction: column; overflow: hidden;
}
.encuadre-modal-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--color-ink-dim);
  margin-top: 3px;
}
.encuadre-frame-wrap {
  flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.encuadre-frame {
  position: relative; overflow: hidden;
  background: var(--color-ph);
  cursor: grab; touch-action: none; user-select: none;
}
.encuadre-frame.is-dragging { cursor: grabbing; }
.encuadre-img { position: absolute; pointer-events: none; display: block; }
.encuadre-footer {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 8px; flex-shrink: 0;
}
.encuadre-hint   { font-size: 14px; color: var(--color-ink-dim); }
.encuadre-reset  { font-size: 14px; color: var(--color-ink-dim); cursor: pointer; transition: color .3s; }
.encuadre-reset:hover { color: var(--color-ink); }
.encuadre-modal-ft {
  display: flex; gap: 8px; padding: 14px 16px;
  border-top: 0.5px solid var(--color-ink-faint);
  flex-shrink: 0; justify-content: flex-end;
}
.btn-encuadre-cancel {
  font-size: 14px; color: var(--color-ink-dim); cursor: pointer;
  background: transparent; border: 0.5px solid var(--color-ink-faint);
  padding: 10px 20px; font-family: var(--font-mono); letter-spacing: .1em;
  transition: border-color .3s, color .3s;
}
.btn-encuadre-cancel:hover { border-color: var(--color-ink); color: var(--color-ink); }
.btn-encuadre-save {
  font-size: 14px; cursor: pointer;
  background: var(--color-ink); color: var(--color-bg);
  border: none; padding: 10px 20px; font-family: var(--font-mono);
  letter-spacing: .1em; transition: opacity .3s;
}
.btn-encuadre-save:hover { opacity: 0.8; }

/* ── OBRAS RELACIONADAS ── */
.obras-relacionadas {
  padding: var(--spacing-lg) var(--page-pad) var(--spacing-xl);
  border-top: 0.5px solid var(--color-ink-faint);
}
.obras-rel-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: var(--spacing-md);
}
.obras-rel-label { font-size: 14px; color: var(--color-ink-dim); }
.obras-rel-ver   { font-size: 14px; color: var(--color-ink-dim); transition: color .3s; }
.obras-rel-ver:hover { color: var(--color-ink); }
.obras-rel-grid {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 8px;
}
.obras-rel-item {
  aspect-ratio: 1/1; position: relative; overflow: hidden; display: block;
}
.obras-rel-item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--ease-out);
}
.obras-rel-item:hover img { transform: scale(1.04); }
.obras-rel-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(transparent 40%, var(--color-overlay-end) 100%);
  opacity: 0; transition: opacity .4s var(--ease-out);
  display: flex; flex-direction: column; justify-content: flex-end; padding: 16px;
}
.obras-rel-item:hover .obras-rel-overlay { opacity: 1; }
.obras-rel-titulo { font-family: var(--font-display); font-size: 14px; font-weight: 300; font-style: italic; margin-bottom: 2px; }
.obras-rel-precio { font-size: 14px; color: var(--color-ink-dim); }

@media (max-width: 767px) {
  .obras-rel-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 767px) {
  .obra-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas: "top" "img" "info";
    gap: 12px;
  }
  .obra-year { margin-bottom: 0; }
  .obra-img-col { position: static; height: auto; grid-template-columns: 1fr; grid-template-areas: "main" "thumbs"; }
  .obra-img-main { height: 80vw; }
  .obra-img-thumbs { flex-direction: row; overflow-x: auto; overflow-y: hidden; }
  .obra-thumb { width: 56px; flex-shrink: 0; }
}

/* ── PRODUCTO SELECTOR ── */
.producto-selector { margin-top: var(--spacing-md); }

.sel-step { margin-bottom: 20px; }

.sel-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .15em;
  color: var(--color-ink-dim);
  margin-bottom: 10px;
}

/* Tipos */
.sel-tipos { display: flex; flex-direction: column; gap: 6px; }

.sel-tipo-btn {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 12px 16px;
  background: transparent;
  border: 0.5px solid var(--color-white-faint);
  color: var(--color-white);
  cursor: pointer;
  text-align: left;
  transition: border-color .3s, background .3s;
}
.sel-tipo-btn:hover { border-color: rgba(255,255,255,0.3); background: rgba(255,255,255,0.02); }
.sel-tipo-btn.active { border-color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.04); }

.sel-tipo-name {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  display: block;
}
.sel-tipo-desc {
  font-size: 12px;
  color: var(--color-ink-dim);
  display: block;
  margin-top: 2px;
}

/* Tamaños */
.sel-tamanos { display: flex; flex-wrap: wrap; gap: 6px; }

.sel-tamano-btn {
  padding: 8px 14px;
  background: transparent;
  border: 0.5px solid var(--color-white-faint);
  color: var(--color-white);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  cursor: pointer;
  transition: border-color .3s, background .3s;
}
.sel-tamano-btn:hover  { border-color: var(--color-ink-dim); }
.sel-tamano-btn.active { background: var(--color-ink); color: var(--color-bg); border-color: var(--color-ink); }

.sel-tamano-btn--eu {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
}
.sel-tamano-eu {
  font-size: 9px;
  letter-spacing: .06em;
  color: var(--color-white-dim);
  margin-top: 3px;
  padding-left: 10px;
  text-transform: uppercase;
}
.sel-tamano-btn.active .sel-tamano-eu { color: var(--color-bg); opacity: .6; }

/* Colores */
.sel-colores { display: flex; flex-wrap: wrap; gap: 6px; }

.sel-color-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: transparent;
  border: 0.5px solid var(--color-ink-faint);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  cursor: pointer;
  transition: border-color .3s, background .3s;
}
.sel-color-btn:hover  { border-color: var(--color-ink-dim); }
.sel-color-btn.active { border-color: var(--color-ink); background: rgba(255,255,255,0.10); }

/* Swatch circular por color */
.sel-color-btn::before {
  content: '';
  width: 11px; height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 0.5px solid rgba(255,255,255,0.25);
}
.sel-color-btn[data-value="black"]::before     { background: #1c1c1c; }
.sel-color-btn[data-value="natural"]::before   { background: #c4a882; border-color: rgba(196,168,130,0.4); }
.sel-color-btn[data-value="dark grey"]::before { background: #3a3a3a; }
.sel-color-btn[data-value="white"]::before     { background: #f0ede8; border-color: rgba(255,255,255,0.5); }

/* Combo */
.sel-combo {
  margin-top: var(--spacing-sm);
  padding-top: var(--spacing-sm);
  border-top: 0.5px solid var(--color-ink-faint);
}

.sel-combo-label {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer;
  font-size: 14px;
}
.sel-combo-check { width: 14px; height: 14px; cursor: pointer; accent-color: #fff; flex-shrink: 0; }
.sel-combo-text { color: var(--color-white); }
.sel-combo-info {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--color-ink-dim);
}

/* Precio total */
.sel-precio-wrap {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 16px 0;
  border-top: 0.5px solid var(--color-white-faint);
  margin-bottom: 16px;
}
.sel-precio-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .15em;
  color: var(--color-ink-dim);
}
.sel-precio {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 300;
}

@media (max-width: 767px) {
  .sel-tipos { gap: 4px; }
  .sel-tipo-btn { padding: 10px 12px; }
}

/* ── PRINT SELECTOR — EXPANDIBLE ── */
.print-selector { display: none; }
#opcion-print.active .print-selector { display: block; }

.sel-divider {
  height: var(--line-weight);
  background: var(--color-ink-faint);
  margin: var(--spacing-sm) 0;
}

/* Chips de tipo (papel / marco) */
.sel-tipos-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.sel-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 10px 12px;
  background: transparent;
  border: 0.5px solid var(--color-ink-faint);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  cursor: pointer;
  text-align: left;
  line-height: 1.3;
  transition: border-color .3s, background .3s;
}
.sel-chip:hover   { border-color: var(--color-ink-dim); background: var(--color-ink-faint); }
.sel-chip.active  { border-color: var(--color-ink);     background: rgba(255,255,255,0.05); }

.sel-chip-sub {
  display: block;
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--color-ink-dim);
  margin-top: 3px;
}

/* Combo badge + detalle */
.sel-combo-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
}
.sel-combo-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  background: var(--color-ink);
  color: var(--color-bg);
  padding: 3px 7px;
  flex-shrink: 0;
}
.sel-combo-detalle {
  font-size: 12px;
  color: var(--color-ink-dim);
  margin-top: 6px;
  min-height: 0;
}

@media (max-width: 767px) {
  .sel-tipos-grid { grid-template-columns: 1fr; }
}

/* ── ORIENTACIÓN ── */
.sel-orientacion { display: flex; gap: 6px; }

.sel-orient-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: transparent;
  border: 0.5px solid var(--color-ink-faint);
  color: var(--color-ink-dim);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  cursor: pointer;
  transition: border-color .3s, background .3s, color .3s;
}
.sel-orient-btn:hover  { border-color: var(--color-ink-dim); color: var(--color-ink); }
.sel-orient-btn.active { background: var(--color-ink); color: var(--color-bg); border-color: var(--color-ink); }

/* ── PREVIEW EN TIEMPO REAL ── */
.sel-preview {
  margin: var(--spacing-sm) 0 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.sel-preview-wrap {
  width: 100%;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sel-preview-frame {
  /* aspect-ratio sobrescrita por JS */
  aspect-ratio: 3/4;
  max-height: 200px;
  max-width: 100%;
  overflow: hidden;
  position: relative;
  transition: border .25s, padding .25s, background .25s, box-shadow .25s;
}

.sel-preview-art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Paper — sin marco */
.sel-preview-frame[data-tipo="hge"],
.sel-preview-frame[data-tipo="ema"] {
  outline: 0.5px solid rgba(255,255,255,0.12);
}

/* Classic frame — mat board + marco de madera */
.sel-preview-frame[data-tipo="classic"] {
  padding: 10px 8px 14px;
  background: #ece9e2;
}
.sel-preview-frame[data-tipo="classic"][data-color="black"]     { border: 10px solid #141414; }
.sel-preview-frame[data-tipo="classic"][data-color="natural"]   { border: 10px solid #c4a882; }
.sel-preview-frame[data-tipo="classic"][data-color="dark grey"] { border: 10px solid #3a3a3a; }

/* Box frame — imagen al borde del marco */
.sel-preview-frame[data-tipo="box"][data-color="black"]   { border: 10px solid #111;    box-shadow: 0 0 0 0.5px rgba(255,255,255,0.1); }
.sel-preview-frame[data-tipo="box"][data-color="natural"] { border: 10px solid #b8956a; }
.sel-preview-frame[data-tipo="box"][data-color="white"]   { border: 10px solid #e8e4de; box-shadow: 0 0 0 0.5px rgba(255,255,255,0.2); }

.sel-preview-info {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--color-ink-dim);
  text-align: center;
}