/* Fase 2: galería de ficha, contrato visible del catálogo y SEO estructurado. */
.catalogue-note { align-items: center; }
.catalogue-note strong { color: var(--ink); font-weight: 700; }

.property-dialog { overflow: hidden; }
.dialog-content { display: grid; }
.dialog-gallery { display: grid; gap: 10px; padding: 10px; background: #d9ddd3; }
.dialog-gallery > .gallery-stage { display: block; grid-template-columns: none; }
.dialog-gallery > .gallery-thumbs { display: flex; grid-template-columns: none; }
.dialog-gallery > .gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.gallery-stage { position: relative; min-height: 430px; background: #18261d; }
.gallery-stage:focus-visible { outline: 3px solid var(--green); outline-offset: -3px; }
.gallery-image { display: block; width: 100%; height: 430px; object-fit: contain; background: #18261d; }
.gallery-nav { position: absolute; top: 50%; display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid #ffffff55; border-radius: 50%; background: #07140dcc; color: #fff; cursor: pointer; font: inherit; font-size: 22px; transform: translateY(-50%); }
.gallery-nav:hover { background: var(--green-accessible); }
.gallery-prev { left: 16px; }
.gallery-next { right: 16px; }
.gallery-counter { position: absolute; right: 16px; bottom: 14px; padding: 5px 9px; border-radius: 20px; background: #07140dcc; color: #fff; font-size: 11px; font-weight: 700; }
.gallery-thumbs { display: flex; gap: 7px; overflow-x: auto; padding: 1px 0 2px; scrollbar-width: thin; }
.gallery-thumb { flex: 0 0 76px; height: 58px; padding: 0; border: 2px solid transparent; background: #18261d; cursor: pointer; opacity: .7; }
.gallery-thumb:hover, .gallery-thumb[aria-selected="true"] { border-color: var(--green-accessible); opacity: 1; }
.gallery-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dialog-copy { padding: 30px 34px 34px; }
.dialog-copy .button { margin-top: 4px; }

@media (max-width: 640px) {
  .catalogue-note { align-items: flex-start; }
  .property-dialog { width: calc(100% - 12px); max-height: 94vh; }
  .dialog-gallery { gap: 7px; padding: 7px; }
  .gallery-stage, .gallery-image { height: 270px; min-height: 270px; }
  .gallery-stage { touch-action: pan-y; }
  .gallery-nav { width: 36px; height: 36px; font-size: 18px; }
  .gallery-prev { left: 10px; }
  .gallery-next { right: 10px; }
  .gallery-counter { right: 10px; bottom: 10px; }
  .gallery-thumb { flex-basis: 64px; height: 50px; }
}