/* obra.css — catálogo y ficha de Obra */

/* Las clases compartidas (.catalog-hero, .cat-toolbar, .toolbar, .chip, .search, .grid-3, .prod-card,
   .prod-foto, .prod-name, .prod-meta) ya están en tienda.css. Importamos lo necesario aparte
   incluyendo tienda.css también desde el router (css_modules: ['tienda', 'obra']). Acá solo
   los específicos de obra. */

.prod-card-obra .prod-foto-obra { aspect-ratio: 3/4; }
.prod-cat-obra {
  font-family: var(--serif); font-style: italic; font-size: 13.5px;
  color: var(--earth);
}

/* ─────── Ficha Obra ─────── */
.ficha-obra { padding-bottom: 96px; }

.ficha-obra-top {
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 52px;
  align-items: start; margin-bottom: 48px;
}
@media (max-width: 900px) {
  .ficha-obra-top { grid-template-columns: 1fr; gap: 28px; }
}

.ficha-obra-foto .ph,
.ficha-obra-foto .lp-picture {
  position: relative; aspect-ratio: 3/4; overflow: hidden;
  background: linear-gradient(135deg, #C9C2A8, #82724E);
}
.ficha-obra-foto img { width: 100%; height: 100%; object-fit: cover; }
.ficha-obra-foto .ph-label {
  position: absolute; left: 14px; bottom: 12px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .06em;
  color: var(--earth); opacity: .85;
}

.placa {
  padding: 32px; border: 1px solid var(--sand); background: #fff;
  border-radius: 4px;
}
.placa-name {
  font-family: var(--sans); font-size: 44px; font-weight: 500;
  line-height: 1.02; margin: 6px 0 4px; letter-spacing: -.008em;
}
.placa-name em { font-style: italic; color: var(--earth); }
.placa-autora {
  font-family: var(--serif); font-style: italic; font-size: 22px;
  color: var(--earth); font-weight: 300;
}

.placa .price-row {
  padding: 18px 0; margin: 18px 0;
  border-top: 1px solid var(--sand);
  border-bottom: 1px solid var(--sand);
}

.placa-fields {
  display: flex; flex-direction: column; gap: 14px; margin: 24px 0;
}
.placa-fields > div {
  display: grid; grid-template-columns: 90px 1fr; gap: 12px; align-items: baseline;
}
.placa-fields dt {
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--earth);
}
.placa-fields dd {
  margin: 0; font-family: var(--sans); font-size: 17px;
  font-style: italic; color: var(--dark);
}

.ficha-obra-story {
  padding-top: 24px; border-top: 1px solid var(--sand);
  display: grid; grid-template-columns: 1fr 2fr; gap: 48px;
}
@media (max-width: 700px) {
  .ficha-obra-story { grid-template-columns: 1fr; gap: 18px; }
}
.story-label {
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--earth); padding-top: 6px;
}
.story-body p {
  font-family: var(--sans); font-size: 21px; font-weight: 500;
  line-height: 1.6; color: var(--dark); margin: 0 0 18px; max-width: 58ch;
}