/* ==========================================================================
   PÁGINAS — PROPIEDADES EN VENTA (listado, ficha y sección de portada)
   ========================================================================== */

/* ---- Tarjeta ---- */
.prop-card .lot-card-title a:hover { color: var(--color-gold-600); }
.prop-card-video {
  position: absolute; right: var(--space-3); bottom: var(--space-3);
  background: rgba(13, 27, 54, 0.82); color: var(--color-white);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  padding: 0.25rem 0.6rem; border-radius: var(--radius-full);
}
.prop-card-specs { font-size: var(--fs-xs); color: var(--text-secondary); }
.prop-card-precio { font-size: var(--fs-md); color: var(--color-navy-900); margin-top: var(--space-1); }

.props-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
@media (max-width: 960px) { .props-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); } }
@media (max-width: 560px) { .props-grid { grid-template-columns: 1fr; } }

/* ---- Portada: sección y tarjeta grande ---- */
.prop-home { padding: var(--space-10) 0; background: var(--surface-alt); }
/* Solo propiedades: portada más baja para que la casa se vea apenas se entra */
html[data-modo="propiedades"] .hero { min-height: 46vh; }
html[data-modo="propiedades"] .hero-scroll-cue { display: none; }
html[data-modo="propiedades"] .prop-home { padding-top: var(--space-8); }
.prop-home .props-grid:not(:empty) { margin-top: var(--space-8); }

.prop-feature {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  background: var(--surface-base); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg);
}
.prop-feature-media { position: relative; display: flex; flex-direction: column; background: var(--color-navy-900); }
.prop-feature-main { position: relative; display: block; flex: 1; min-height: 420px; overflow: hidden; }
.prop-feature-main img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-elegant);
}
.prop-feature-main:hover img { transform: scale(1.04); }
.prop-feature-main .badge {
  position: absolute; top: var(--space-4); left: var(--space-4);
  background: var(--color-gold-500); color: var(--color-navy-900); box-shadow: var(--shadow-sm);
}
.prop-feature-play {
  position: absolute; top: var(--space-4); right: var(--space-4);
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: rgba(13, 27, 54, 0.85); color: var(--color-white);
  font-weight: var(--fw-semibold); font-size: var(--fs-sm);
  padding: 0.5rem 1rem 0.5rem 0.5rem; border-radius: var(--radius-full);
  transition: background var(--dur-fast);
}
.prop-feature-play:hover { background: var(--color-navy-900); }
.prop-feature-play .icono {
  width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-gold-500); color: var(--color-navy-900); font-size: 0.8rem; padding-left: 2px;
}
.prop-feature-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; padding-top: 3px; }
.prop-feature-thumbs a { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.prop-feature-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.prop-feature-thumbs .mas {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(13, 27, 54, 0.6); color: var(--color-white); font-weight: var(--fw-semibold); font-size: var(--fs-sm);
}
.prop-feature-body { padding: var(--space-8); display: flex; flex-direction: column; }
.prop-feature-body .lot-card-number { margin-top: 0; }
.prop-feature-body h3 { font-size: var(--fs-xl); line-height: var(--lh-tight); margin-top: var(--space-2); }
.prop-feature-body h3 a:hover { color: var(--color-gold-600); }
.prop-feature-precio { font-size: var(--fs-2xl); font-weight: var(--fw-bold); color: var(--color-gold-600); margin-top: var(--space-4); line-height: 1.1; }
.prop-feature-actions { display: grid; gap: var(--space-3); margin-top: auto; padding-top: var(--space-6); }
.prop-feature-actions .btn { width: 100%; }

@media (max-width: 960px) {
  .prop-feature { grid-template-columns: minmax(0, 1fr); }
  .prop-feature-main { min-height: 0; aspect-ratio: 4 / 3; }
}
@media (max-width: 560px) {
  .prop-feature-body { padding: var(--space-5); }
  .prop-feature-body h3 { font-size: var(--fs-lg); }
  .prop-feature-precio { font-size: var(--fs-xl); }
  .prop-feature-play { font-size: var(--fs-xs); }
}

/* ---- Ficha ---- */
.prop-wrap { padding-top: calc(var(--header-height) + var(--space-8)); padding-bottom: var(--space-12); }
.prop-wrap .breadcrumb { color: var(--text-secondary); margin-bottom: var(--space-6); }
.prop-wrap .breadcrumb a { color: var(--text-secondary); }

.prop-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--space-10); align-items: start; }

/* Galería */
.prop-gallery-main {
  position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-md); overflow: hidden;
  background: var(--color-navy-900); box-shadow: var(--shadow-sm); cursor: zoom-in;
}
.prop-gallery-main img { width: 100%; height: 100%; object-fit: contain; }
.prop-gallery-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; border-radius: 50%; border: none;
  background: rgba(255, 255, 255, 0.88); color: var(--color-navy-900);
  font-size: 1.4rem; line-height: 1; display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
}
.prop-gallery-nav:hover { background: var(--color-white); }
.prop-gallery-nav.prev { left: var(--space-3); }
.prop-gallery-nav.next { right: var(--space-3); }
.prop-gallery-counter {
  position: absolute; right: var(--space-3); bottom: var(--space-3);
  background: rgba(13, 27, 54, 0.75); color: var(--color-white);
  font-size: var(--fs-xs); padding: 0.25rem 0.6rem; border-radius: var(--radius-full);
}
.prop-thumbs {
  display: flex; gap: var(--space-2); margin-top: var(--space-3);
  overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: var(--space-2);
}
.prop-thumbs button {
  flex: 0 0 88px; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); overflow: hidden;
  border: 2px solid transparent; padding: 0; background: var(--surface-alt); scroll-snap-align: start;
}
.prop-thumbs button.is-active { border-color: var(--color-gold-500); }
.prop-thumbs img { width: 100%; height: 100%; object-fit: cover; }

/* Información */
.prop-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.prop-chip {
  font-size: var(--fs-xs); font-weight: var(--fw-semibold); padding: 0.3rem 0.8rem;
  border-radius: var(--radius-full); background: var(--surface-alt); color: var(--text-secondary);
}
.prop-chip.is-gold { background: var(--color-gold-500); color: var(--color-navy-900); }
.prop-info h1 { font-size: var(--fs-2xl); line-height: var(--lh-tight); margin-top: var(--space-3); }
.prop-ubicacion { color: var(--text-secondary); margin-top: var(--space-2); }
.prop-precio { font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--color-gold-600); margin-top: var(--space-4); }
.prop-specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); margin-top: var(--space-5); }
.prop-spec { border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); }
.prop-spec dt { font-size: var(--fs-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.prop-spec dd { margin: 0; font-weight: var(--fw-semibold); color: var(--color-navy-900); }
.prop-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-top: var(--space-6); }
.prop-actions .btn { width: 100%; }
.prop-actions .btn-wsp { grid-column: 1 / -1; }

.prop-section { padding: 0; margin-top: var(--space-10); scroll-margin-top: calc(var(--header-height) + var(--space-4)); }
.prop-section h2 { font-size: var(--fs-lg); margin-bottom: var(--space-4); }
.prop-descripcion { color: var(--text-secondary); line-height: var(--lh-relaxed); white-space: pre-line; }
.prop-caracteristicas { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.prop-caracteristicas li {
  list-style: none; font-size: var(--fs-sm); color: var(--text-secondary);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-full); padding: 0.35rem 0.9rem;
}

.prop-subtitulo { font-size: var(--fs-md); margin: var(--space-5) 0 var(--space-2); }
.prop-subtitulo:first-child { margin-top: 0; }
.prop-lista { list-style: disc; padding-left: 1.2rem; color: var(--text-secondary); line-height: var(--lh-relaxed); }
.prop-lista li + li { margin-top: var(--space-2); }
.prop-lista strong { color: var(--color-navy-900); }

/* Videos */
.prop-videos { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.prop-videos.is-single { grid-template-columns: 1fr; }
.prop-video { aspect-ratio: 16 / 9; border-radius: var(--radius-md); overflow: hidden; background: #000; }
.prop-video video, .prop-video iframe { width: 100%; height: 100%; border: 0; display: block; }
.prop-video.is-vertical { aspect-ratio: 9 / 16; max-height: 640px; justify-self: center; width: 100%; }

.prop-map { border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 16 / 7; }
.prop-map iframe { width: 100%; height: 100%; border: 0; }

@media (max-width: 960px) {
  .prop-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .prop-map { aspect-ratio: 4 / 3; }
}
@media (max-width: 560px) {
  .prop-videos { grid-template-columns: 1fr; }
  .prop-info h1 { font-size: var(--fs-xl); }
  .prop-thumbs button { flex-basis: 72px; }
}

/* Lightbox con navegación */
.prop-lightbox {
  position: fixed; inset: 0; z-index: 500; background: rgba(0, 0, 0, 0.94);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity var(--dur-base) ease, visibility var(--dur-base);
}
.prop-lightbox.is-open { opacity: 1; visibility: visible; }
.prop-lightbox img { max-width: 94vw; max-height: 88vh; object-fit: contain; }
.prop-lightbox button {
  position: absolute; width: 46px; height: 46px; border-radius: 50%; border: none;
  background: rgba(255, 255, 255, 0.15); color: #fff; font-size: 1.5rem;
  display: flex; align-items: center; justify-content: center;
}
.prop-lightbox button:hover { background: rgba(255, 255, 255, 0.3); }
.prop-lightbox .lb-close { top: 1rem; right: 1rem; }
.prop-lightbox .lb-prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.prop-lightbox .lb-next { right: 1rem; top: 50%; transform: translateY(-50%); }
.prop-lightbox .lb-counter { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); color: #fff; font-size: var(--fs-sm); }