/* Property Detail Page - Diseño Moderno Inspirado en Apple */

.property-detail-page {
  min-height: 100vh;
  /* Usar el Fondo General (Blanco Roto) en lugar de la variable no definida --color-bg-general */
  background-color: var(--color-background);
  display: flex;
  flex-direction: column;
}

/* Prevent horizontal overflow caused by long text or unbroken content */
.property-detail-page,
.property-detail-page * {
  box-sizing: border-box;
}
.property-detail-page {
  /* `clip` y NO `hidden`, aunque para el scroll horizontal hagan lo mismo.
     `overflow: hidden` convierte al elemento en el contenedor de scroll de sus
     descendientes, y un `position: sticky` se pega respecto de ese contenedor.
     Como este no scrollea verticalmente, el sticky del formulario de contacto
     no tenía contra qué pegarse y no hacía nada — sin ningún error, sin ninguna
     advertencia, simplemente no pasaba.

     `clip` recorta igual y no crea contenedor de scroll. */
  overflow-x: clip;
}

.property-detail-content,
.gallery-card,
.property-description,
.property-features-section,
.property-location-info {
  max-width: 100%;
}

/* Ensure images, iframes and embedded content never exceed container width */
.property-detail-page img,
.property-detail-page picture,
.property-detail-page video,
.property-detail-page iframe {
  max-width: 100%;
  height: auto !important;
  display: block;
}

/* Force long words / long descriptions to wrap instead of creating horizontal scroll */
.property-description p,
.property-description,
.feature-item-minimal span,
.location-inline-address {
  word-break: break-word;
  overflow-wrap: anywhere;
}

.property-detail-main {
  flex: 1 1;
  /* Use the navbar height variable so content isn't overlapped on mobile */
  padding-top: calc(var(--navbar-height, 55px) + 1rem);
  padding-bottom: 1.25rem;
}

/* Mobile-specific stronger offset to avoid overlap with fixed navbar.
   Use !important so this wins over any other competing rules that
   might be loaded earlier/with higher specificity. We add a small
   extra gap to account for navbar padding / larger touch targets. */
@media (max-width: 767px) {
  .property-detail-main {
    padding-top: calc(var(--navbar-height, 55px) + 1.25rem) !important;
  }

  /* If some pages render the navbar taller than the variable (due to
     padding or wrapping), add a tiny safe-area fallback to ensure the
     first content is never hidden behind the navbar on phones. */
  .property-detail-main::before {
    content: "";
    display: block;
    height: env(safe-area-inset-top, 0px);
    pointer-events: none;
    visibility: hidden;
  }
}

/* Loading & Not Found States */
.property-loading,
.property-not-found {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  text-align: left;
  min-height: 60vh;
}

.loading-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--color-bg-section);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 1rem;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.property-loading p,
.property-not-found p {
  font-size: 1rem;
  color: var(--color-text-primary);
  font-weight: 500;
}

.property-not-found h1 {
  font-size: 2rem;
  color: var(--color-title);
  margin-bottom: 1rem;
}

.back-button {
  margin-top: 1.5rem;
  padding: 0.875rem 2rem;
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: 0;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: inherit;
}

.back-button:hover {
  background: var(--color-secondary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(100, 75, 109, 0.3);
}

/* Breadcrumb */
.breadcrumb-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem 1rem;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
}

.breadcrumb button {
  background: none;
  border: none;
  color: var(--color-title);
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  font-size: 0.875rem;
  text-decoration: underline;
  transition: color 0.3s ease;
}

.breadcrumb button:hover {
  color: var(--color-primary);
}

.breadcrumb span:last-child {
  color: var(--color-text-primary);
  font-weight: 500;
}

.breadcrumb > span {
  color: #9CA3AF;
}

/* Gallery - Layout Grid Moderno */
.property-gallery {
  max-width: 1400px;
  margin: 0 auto 2rem;
  padding: 0 2rem;
}

.gallery-grid-container {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 180px;
  gap: 0.75rem;
  height: 600px;
  width: 100%;
}

/* Mobile: Cambiar a layout vertical con imagen arriba y slider debajo */
@media (max-width: 768px) {
  .gallery-grid-container {
    display: flex;
    flex-direction: column;
    height: auto;
    gap: 1rem;
  }
}

/* Imagen Principal (Izquierda) */
.gallery-main-image {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  background: #F3F4F6;
  border-radius: 0;
  height: 600px;
  width: 100%;
  display: block;
}

.gallery-main-image.is-clickable {
  cursor: zoom-in;
}

.gallery-main-image.is-clickable:focus,
.gallery-main-image.is-clickable:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 4px;
}

/* View toggle (Imágenes / Video) */

/* Toggle positioned over the main image (pill + play button) */
.view-toggle {
  position: relative; /* flow inside the header */
  display: flex;
  align-items: center;
  gap: 0.5rem;
  z-index: 6;
  pointer-events: auto;
  margin-left: 0.75rem;
  margin-right: 1rem; /* separación con los botones de acción (favorito/compartir) */
}

.view-toggle.no-video .toggle-btn:last-child {
  opacity: 0.5;
  pointer-events: none;
}

.toggle-btn {
  /* Pill-shaped: icon + label, align visually with action buttons */
  min-height: 48px;
  height: 48px;
  padding: 0 12px;
  border-radius: 0;
  background: var(--color-background);
  border: 1px solid #E5E7EB;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-text-primary);
  font-size: 0.95rem;
  gap: 0.5rem;
  box-shadow: 0 2px 8px rgba(16,24,40,0.06);
  transition: transform 0.12s ease, background 0.12s ease, color 0.12s ease;
}

/* Primary pill (Imágenes) appearance when active */
.view-toggle .toggle-btn.active {
  background: var(--color-primary);
  color: #fff;
  border-color: rgba(0,0,0,0.06);
  transform: translateY(-1px);
}

/* Ensure icons inside toggle buttons are sized consistently */
.view-toggle .toggle-btn svg {
  font-size: 1.15rem;
  color: inherit;
}

/* Visible label next to icon */
.toggle-label {
  display: inline-block;
  line-height: 1;
  font-weight: 700;
  color: inherit;
}

.toggle-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Accessibility helper */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Video container: responsive 16:9 and full height on desktop where gallery expects it */
.video-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: black;
}

.video-iframe {
  width: 100% !important;
  height: 100% !important;
  border: 0;
  display: block;
}

/* Override generic rule that sets iframe height:auto !important earlier in the file */
.gallery-main-image .video-container,
.gallery-main-image .video-container .video-iframe {
  height: 100% !important;
  width: 100% !important;
}

/* Make the video container absolutely fill the gallery main image so iframe covers the area */
.gallery-main-image .video-container {
  position: absolute;
  top: 0;
  left: 0;
}

/* On mobile use a 16:9 aspect ratio for video previews */
@media (max-width: 768px) {
  .video-container { aspect-ratio: 16/9; max-height: 360px; height: auto; }
  .video-iframe { height: 100%; }
  .view-toggle {
    position: relative;
    gap: 0.4rem;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }
  .view-toggle .toggle-btn:first-child { padding: 0.35rem 0.6rem; font-size: 0.9rem; }
  .view-toggle .toggle-btn:last-child { width: 38px; height: 38px; }
}

/* Mobile: Imagen principal más compacta */
@media (max-width: 768px) {
  /* Use an aspect ratio so image height adjusts to width and avoids hard cropping.
     On small screens prefer 'contain' so the full image is visible. */
  .gallery-main-image {
    aspect-ratio: 16/9;
    max-height: 360px;
    height: auto;
    border-radius: 0;
  }

  /* Avoid cropping: show the whole image within the box on mobile */
  .gallery-main-image img {
    object-fit: contain !important;
    background: #F3F4F6; /* fill background when using contain */
  }

  /* When using Next/Image fill, ensure the wrapper spans the aspect-ratio box */
  .gallery-main-image > span {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
  }
}

/* Asegurar que el Image de Next.js se renderice correctamente */
.gallery-main-image > span {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

.gallery-main-image img {
  transition: transform 0.4s ease;
  object-fit: cover !important;
}

.gallery-main-image:hover img {
  transform: scale(1.02);
}

/* Scroll Vertical de Thumbnails (Derecha) */
.gallery-thumbnails-scroll {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 0.25rem;
  height: 100%;
  scrollbar-width: thin;
  scrollbar-color: var(--color-primary) #E5E7EB;
}

/* Mobile: Convertir a slider horizontal */
@media (max-width: 768px) {
  .gallery-thumbnails-scroll {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    padding-right: 0;
    padding-bottom: 0.25rem;
    height: auto;
    gap: 0.5rem;
    scrollbar-width: thin;
    scrollbar-color: var(--color-primary) #E5E7EB;
  }
}

.gallery-thumbnails-scroll::-webkit-scrollbar {
  width: 6px;
}

.gallery-thumbnails-scroll::-webkit-scrollbar-track {
  background: #E5E7EB;
  border-radius: 0;
}

.gallery-thumbnails-scroll::-webkit-scrollbar-thumb {
  background: var(--color-primary);
  border-radius: 0;
  -webkit-transition: background 0.3s ease;
  transition: background 0.3s ease;
}

.gallery-thumbnails-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--color-secondary);
}

/* Mobile: Scrollbar horizontal */
@media (max-width: 768px) {
  .gallery-thumbnails-scroll::-webkit-scrollbar {
    height: 4px;
    width: auto;
  }
  
  .gallery-thumbnails-scroll::-webkit-scrollbar-track {
    background: #E5E7EB;
    border-radius: 0;
  }
  
  .gallery-thumbnails-scroll::-webkit-scrollbar-thumb {
    background: var(--color-primary);
    border-radius: 0;
    -webkit-transition: background 0.3s ease;
    transition: background 0.3s ease;
  }
  
  .gallery-thumbnails-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--color-secondary);
  }
}

/* Cada Thumbnail */
.gallery-thumbnail-item {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  background: #F3F4F6;
  border-radius: 0;
  /* Use 16:9 aspect ratio for thumbnails to match design */
  aspect-ratio: 16/9;
  min-height: 90px;
  border: 3px solid transparent;
  transition: all 0.3s ease;
}

/* Mobile: Thumbnails más pequeños y cuadrados para slider horizontal */
@media (max-width: 768px) {
  /* On mobile, keep thumbnails small but preserve 16:9 (not square) */
  .gallery-thumbnail-item {
    flex: 0 0 120px; /* thumbnail width */
    aspect-ratio: 16/9; /* force 16:9 instead of square */
    min-height: 64px; /* ~120 * 9/16 = 67.5 -> allow slight flexibility */
    border-radius: 0;
    border: 2px solid transparent;
  }

  .gallery-thumbnail-item .progressive-image-container {
    min-height: 64px;
  }
}

.gallery-thumbnail-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease, filter 0.3s ease;
}

/* Specific overrides to counter the global `img { height: auto !important }` rule
   that prevents Next/Image with `fill` from filling its parent. This forces
   images inside the gallery (main + thumbnails) to occupy the full area. */
.property-detail-page .gallery-main-image img,
.property-detail-page .gallery-main-image .progressive-image-container img,
.property-detail-page .gallery-thumbnail-item img,
.property-detail-page .gallery-thumbnail-item .progressive-image-container img,
.property-detail-page .progressive-image-container img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Asegurar que el contenedor del ProgressiveImage ocupe espacio cuando se usa fill */
.gallery-thumbnail-item .progressive-image-container,
.gallery-main-image .progressive-image-container {
  width: 100%;
  height: 100%;
  min-height: 120px;
  position: relative; /* ensure fill children position correctly */
}

/* Mobile: Ajustar min-height para thumbnails */
@media (max-width: 768px) {
  .gallery-thumbnail-item .progressive-image-container {
    min-height: 80px;
  }
}

.gallery-thumbnail-item:hover {
  transform: scale(1.05);
  border-color: var(--color-title);
}

.gallery-thumbnail-item:hover img {
  filter: brightness(1.1);
}

/* Thumbnail Activa */
.gallery-thumbnail-item.active {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary);
}

.gallery-thumbnail-item.active img {
  filter: brightness(1.05);
}

/* Badge de Operación */
.property-badge-detail {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  z-index: 3;
}

.operation-type {
  background: var(--color-title);
  color: white;
  padding: 0.625rem 1.25rem;
  border-radius: 0;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Contador de Fotos */
.gallery-counter {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  background: rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  color: white;
  padding: 0.625rem 1rem;
  border-radius: 0;
  font-size: 0.875rem;
  font-weight: 600;
  z-index: 3;
}

/* Botón "Ver en pantalla completa" */
.view-fullscreen-btn {
  position: absolute;
  bottom: 1.5rem;
  right: 1.5rem;
  background: white;
  color: var(--color-text-primary);
  border: 1px solid #E5E7EB;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 3;
  font-family: inherit;
}

.view-fullscreen-btn:hover {
  background: var(--color-primary);
  color: white;
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(100, 75, 109, 0.3);
}

.view-fullscreen-btn svg {
  font-size: 1.25rem;
}

/* Content Container */
.property-detail-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 1rem; /* reduced gap to tighten vertical spacing between columns/sections */
  align-items: start;
}

/* Main Content */
.property-detail-content {
  background: white;
  border-radius: 0;
  padding: 1.25rem; /* reduced padding to tighten vertical rhythm */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  /* Allow the content area to grow with its children (e.g. long descriptions) */
  height: auto;
  overflow: visible;
}

/* Header */
.property-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin: 0;
  padding: 0;
}

/* Desktop: align header controls (toggle/actions) vertically centered with the
   title/location block so the toggle appears aligned and visually balanced. */
@media (min-width: 768px) {
  .property-header {
    align-items: center; /* center vertically relative to the title block */
    gap: 0.75rem;
  }

  /* Slightly increase left margin of the toggle to separate from title on wide screens */
  .property-header .view-toggle {
    margin-left: 1rem;
    margin-right: 1rem;
  }
}

/* Card wrapper to give visual separation but keep it flush with gallery */
.gallery-card {
  /* Make gallery container match the visual card used by the rest of the page */
  max-width: 1400px;
  margin: 0 0 1rem 0;
  background: white;
  border-radius: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  padding: 1.25rem; /* match reduced padding to tighten spaces */
}

/* When gallery-card is inside the 2-column .property-detail-container, span both columns */
.property-detail-container > .gallery-card {
  grid-column: 1 / -1;
   width: calc(100% + 0px); /* ensure it uses full available width */
  padding-left: 2rem;
  padding-right: 2rem;
  box-sizing: border-box;
}

.property-header-card {
  background: transparent; /* header sits visually inside the gallery card */
  padding: 0 0 0.5rem 0;
  margin: 0 0 0.5rem 0;
  border-bottom: 1px solid #F3F4F6;
}

.property-header-card { position: relative; }

.property-gallery {
  margin-top: 0;
  padding: 0;
}

.gallery-card .gallery-grid-container {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 180px;
  gap: 0.75rem;
  height: 600px;
  width: 100%;
  margin: 0;
}

/* Mobile: asegurar que cuando .gallery-card use el grid, en pantallas pequeñas pase a columna
   (imagen principal arriba, miniaturas debajo) y que no mantenga altura fija que genera espacios */
@media (max-width: 768px) {
  .property-detail-container {
    grid-template-columns: 1fr; /* forzar single column layout */
  }

  .gallery-card {
    padding: 1rem; /* reducir padding en mobile para evitar overflow visual */
    border-radius: 0;
  }

  .gallery-card .gallery-grid-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    height: auto;
    width: 100%;
    margin: 0;
  }

  /* Alinear thumbnails al inicio y permitir scroll horizontal suave */
  .gallery-thumbnails-scroll {
    align-items: center;
    padding-left: 0.25rem;
    -webkit-overflow-scrolling: touch;
  }

  /* Asegurar que cualquier regla previa de altura no interrumpa el flujo */
  .gallery-main-image,
  .gallery-thumbnails-scroll {
    min-height: 0;
  }
}

/* Mobile - eliminar espacios vacíos debajo de imágenes */
@media (max-width: 768px) {
  .gallery-card {
    padding-bottom: 0.5rem; /* reducir espacio interior inferior */
    margin-bottom: 0.75rem; /* menos separación entre secciones */
  }

  .property-gallery {
    margin-bottom: 0.5rem;
    padding-bottom: 0;
  }

  /* Evitar gaps causados por line-height o elementos inline */
  .gallery-main-image,
  .gallery-thumbnails-scroll,
  .gallery-thumbnail-item {
    line-height: 0;
  }

  /* Asegurar que el contenedor que usa fill ocupe exactamente la altura prevista */
  .gallery-main-image .progressive-image-container {
    min-height: 0;
    height: 100%;
    display: block;
  }

  /* thumbnails: eliminar margenes innecesarios y mantener tamaño compacto */
  .gallery-thumbnails-scroll {
    margin-top: 0.5rem;
    padding-bottom: 0.25rem;
  }

  .gallery-thumbnail-item {
    margin: 0;
    padding: 0;
  }

  .gallery-thumbnail-item img,
  .gallery-main-image img {
    display: block; /* evitar whitespace debajo de imágenes */
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.gallery-card .gallery-grid-container .gallery-main-image {
  border-radius: 0;
}

@media (max-width: 767px) {
  .property-header-card .property-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .property-detail-main {
    padding-top: 4rem;
  }
}

.property-title-section {
  flex: 1 1;
}

.property-main-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-title);
  margin: 0 0 0.75rem 0;
  line-height: 1.2;
}

.property-location-detail {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  color: var(--color-text-primary);
}

.property-location-detail svg {
  color: var(--color-title);
  font-size: 1.125rem;
}

/* Inline location: city + specific address */
.location-inline {
  display: flex;
  flex-direction: column;
}

.location-city {
  font-weight: 600;
  color: var(--color-title);
  font-size: 1rem;
}

.location-inline-address {
  font-size: 0.9rem;
  color: var(--color-text-primary);
  margin-top: 2px;
  /* Allow address to wrap on small screens to avoid horizontal overflow */
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  max-width: 100%;
}

.property-actions-detail {
  display: flex;
  gap: 0.75rem;
}

.action-btn-detail {
  width: 48px;
  height: 48px;
  /* Asegurar contraste y coherencia con el fondo general */
  background: var(--color-background);
  border: 1px solid #E5E7EB;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1.25rem;
  color: var(--color-text-primary);

}

/* ======================================================================
   Fix: Ensure ProgressiveImage / Next/Image wrappers and imgs fill their
   parent thumbnail/main containers. This addresses cases where a global
   `img { height: auto !important }` rule prevents `fill` images from
   occupying the full area (seen in the devtools screenshots).
   These selectors are intentionally very specific and use !important to
   override library or global rules.
   ====================================================================== */
.gallery-thumbnail-item .progressive-image-container,
.gallery-main-image .progressive-image-container,
.gallery-thumbnail-item > span,
.gallery-thumbnail-item > span *,
.gallery-thumbnail-item picture,
.gallery-thumbnail-item picture img,
.gallery-thumbnail-item img,
.gallery-main-image > span,
.gallery-main-image picture,
.gallery-main-image picture img,
.gallery-main-image img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
}

.gallery-thumbnail-item .progressive-image-container > span,
.gallery-main-image .progressive-image-container > span {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

.gallery-thumbnail-item picture img,
.gallery-main-image picture img,
.gallery-thumbnail-item img,
.gallery-main-image img {
  object-fit: cover !important;
}

/* ======================================================================
   Mobile: make the view toggle icon-only. Hide the textual label, make
   buttons square and align them visually with the action buttons.
   Uses the same mobile breakpoint used elsewhere (<= 768px).
   ====================================================================== */
@media (max-width: 768px) {
  /* Default: hide labels so buttons are icon-only */
  .view-toggle .toggle-label {
    display: none !important;
  }

  /* Make all toggles compact circular by default on mobile */
  .view-toggle .toggle-btn {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    justify-content: center !important;
    gap: 0 !important;
  }

  /* Icon sizing for mobile */
  .view-toggle .toggle-btn svg {
    font-size: 1.15rem !important;
  }

  /* Inverted behavior: show the label for the INACTIVE button (so the
     user sees the alternative mode) while the active button remains
     icon-only. The inactive button expands into a pill and reveals its
     label. */
  .view-toggle .toggle-btn:not(.active) {
    width: auto !important;
    min-width: 44px !important;
    height: 44px !important;
    padding: 0 10px !important;
    border-radius: 0 !important;
    gap: 0.5rem !important;
    justify-content: center !important;
  }

  .view-toggle .toggle-btn:not(.active) .toggle-label {
    display: inline-block !important;
    line-height: 1 !important;
    font-weight: 700 !important;
  }

  /* Ensure active remains compact and label hidden */
  .view-toggle .toggle-btn.active {
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    gap: 0 !important;
  }

  .view-toggle .toggle-btn.active .toggle-label {
    display: none !important;
  }
}

.action-btn-detail:hover {
  background: white;
  border-color: var(--color-title);
  color: var(--color-title);
  transform: scale(1.1);
}

/* .action-btn-detail.liked selector removed because 'Me gusta' feature was removed. */

/* Overview */
.property-overview {
  margin-bottom: 1.5rem;
  padding: 0 !important;
  background: transparent !important;
}

.price-and-specs-container {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  align-items: stretch;
}

/* Desktop: make the specs area take the full height of the price box so
   both columns visually align. Use a CSS grid so spec cards distribute
   evenly and stretch to fill the column height. */
@media (min-width: 768px) {
  .price-and-specs-container {
    align-items: stretch;
  }

  .property-main-specs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    width: 100%;
    /* allow the specs column to stretch to the height of the price box */
    height: 100%;
    align-content: stretch; /* make rows fill available vertical space */
  }

  /* ensure each spec card fills its grid cell vertically */
  .property-main-specs .spec-card-modern {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
}

/* Desktop: use CSS grid for the price + specs area so both columns share the same
   height. The specs grid will then distribute rows evenly to fill the available
   vertical space, producing the 'filled' look from the reference image. */
@media (min-width: 768px) {
  .price-and-specs-container {
    display: grid;
    grid-template-columns: 300px 1fr; /* price column fixed, specs fill remaining */
    gap: 1rem;
    align-items: stretch; /* ensure both columns match height */
    width: 100%;
  }

  /* Make the specs grid fill the full height provided by the container */
  .property-main-specs {
    height: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.75rem !important;
    grid-auto-rows: 1fr; /* each row shares available height equally */
  }

  /* Each spec card should fill its grid cell */
  .property-main-specs .spec-card-modern {
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 1rem !important;
  }
}

/* Precio Box - Diseño Destacado */
.property-price-box {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  padding: 1.5rem;
  border-radius: 0;
  box-shadow: 0 4px 16px rgba(100, 75, 109, 0.12);
  position: relative;
  overflow: hidden;
  flex: 0 0 300px;
  min-width: 260px;
}

.property-price-box::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
  pointer-events: none;
}

.price-label {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 0.5rem;
  position: relative;
  z-index: 1;
}

/* Center price content and pin the label to the top-left */
.property-price-box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.property-price-box .price-label {
  position: relative;
  top: auto;
  left: auto;
  margin-bottom: 0.5rem;
  text-align: left;
  width: 100%;
}

.property-price-detail {
  font-size: 2.75rem;
  font-weight: 700;
  color: white;
  margin: 0;
  line-height: 1.2;
  position: relative;
  z-index: 1;
}

/* Características Modernas con Iconos Circulares */
.property-main-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: stretch;
  width: 100%;
}

.spec-card-modern {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  background: white;
  border: 2px solid #E5E7EB;
  border-radius: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: default;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: calc(33.333% - 0.5rem);
  min-width: 130px;
}

.spec-card-modern:hover {
  border-color: var(--color-primary);
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(100, 75, 109, 0.08);
}

.spec-icon-circle {
  width: 44px;
  height: 44px;
  min-width: 44px;
  background: rgba(100, 75, 109, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.375rem;
  color: var(--color-title);
  transition: all 0.3s ease;
}

.spec-card-modern:hover .spec-icon-circle {
  background: var(--color-primary);
  transform: scale(1.1) rotate(5deg);
}

.spec-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.spec-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-title);
  line-height: 1;
}

.spec-label {
  font-size: 0.75rem;
  color: var(--color-text-primary);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Description */
.property-description {
  margin-bottom: 1.5rem;
  background-color: #F8F9FA;
  border-radius: 0;
  padding: 1.75rem;
  border: 1px solid #E8E9ED;
  height: auto;
  max-height: none;
  overflow: visible;
  display: block;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  min-height: 0;
  max-width: 100%;
  align-self: stretch;
  width: 100%;
}

.property-description h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-title);
  margin: 0 0 0.75rem 0;
}

.property-description p {
  font-size: 1rem;
  color: var(--color-text-primary);
  line-height: 1.7;
  white-space: pre-wrap;
  text-align: left;
  margin: 0 0 1rem;
  max-width: none;
}

/* Features Section - Diseño Minimalista con Dropdowns */
.property-features-section {
  margin-bottom: 1.5rem;
}

/* Force smaller vertical padding for the features section to override
   global `section { padding: 80px 0 }` in `globals.css` which creates
   large violet gaps. Use high specificity and !important to ensure
   the rule wins both on desktop and mobile. */
section.property-features-section,
.property-features-section {
  padding: 0.75rem 0 !important; /* small vertical padding */
  /* Keep a comfortable gap from the price card above: not zero but not huge */
  margin: 1.5rem 0 1rem 0 !important; /* top, right, bottom, left */
  min-height: auto !important;
  background: transparent !important; /* keep background handling local */
}

/* Slightly larger top margin on wide screens so the section breathes on desktop */
@media (min-width: 768px) {
  section.property-features-section,
  .property-features-section {
    margin-top: 2rem !important;
  }
}

/* On desktop, visually frame the whole features section to match mobile 'encuadrado' style.
   Keep mobile compact; only apply the framed card on larger screens. */
@media (min-width: 768px) {
  section.property-features-section,
  .property-features-section {
    background: #ffffff !important; /* white card */
    padding: 1.25rem !important; /* internal breathing room */
    border-radius: 0 !important;
    border: 1px solid #E5E7EB !important;
    box-shadow: 0 6px 18px rgba(16,24,40,0.04) !important;
    /* preserve the comfortable gap from the price card */
    margin-top: 2rem !important;
    margin-bottom: 1rem !important;
  }

  /* Ensure the heading sits inside the framed area without extra outside spacing */
  .property-features-section > h2 {
    background: transparent !important;
    padding: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0.75rem !important;
  }

  /* Inner feature categories should keep a subtle card look (like mobile) */
  .property-features-section .feature-category {
    background: #ffffff;
    border: 1px solid #E5E7EB;
    box-shadow: 0 2px 8px rgba(100, 75, 109, 0.04);
    border-radius: 0;
    margin-bottom: 0.75rem;
  }
}

/* Apply the same framed/card style to all semantic sections inside the
   property detail content on desktop so every section appears encuadrada. */
@media (min-width: 768px) {
  .property-detail-content > section,
  .property-detail-content section {
    background: #ffffff !important;
    padding: 1.25rem !important;
    border-radius: 0 !important;
    border: 1px solid #E5E7EB !important;
    box-shadow: 0 6px 18px rgba(16,24,40,0.04) !important;
    margin-top: 1.5rem !important;
    margin-bottom: 1rem !important;
  }

  /* Keep headings compact inside framed sections */
  .property-detail-content > section > h2,
  .property-detail-content section > h2 {
    margin: 0 0 0.75rem 0 !important;
    padding: 0 !important;
  }

  /* For location map iframe, ensure it fits the framed area nicely */
  .property-detail-content .google-maps-container iframe {
    border-radius: 0;
    overflow: hidden;
  }

  /* Avoid double borders/shadows for inner cards inside sections */
  .property-detail-content .feature-category,
  .property-detail-content .spec-card-modern {
    /* Match mobile card/border styling exactly */
    background: #ffffff !important;
    border: 1px solid #E5E7EB !important; /* mobile uses 1px */
    box-shadow: 0 2px 8px rgba(100, 75, 109, 0.04) !important;
    border-radius: 0 !important;
    margin-bottom: 0.75rem !important;
  }

  /* spec-card-modern on mobile uses 1rem padding and a slightly smaller hover shadow; keep same on desktop */
  .property-detail-content .spec-card-modern {
    padding: 1rem !important;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: calc(33.333% - 0.5rem);
    min-width: 130px;
  }
}

/* The internal card already has its own white background; ensure heading
   spacing is compact */
.property-features-section > h2 {
  margin: 0 0 0.75rem 0 !important;
  padding: 0 !important;
}

.property-features-section > h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-title);
  margin: 0 0 1rem 0;
}

.feature-category {
  background: white;
  border: 1px solid #E5E7EB;
  border-radius: 0;
  margin-bottom: 1rem;
  overflow: hidden;
  transition: all 0.3s ease;
}

.feature-category:hover {
  box-shadow: 0 2px 8px rgba(100, 75, 109, 0.08);
}

.feature-category-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start; /* left align header content */
  padding: 1.25rem 1.5rem;
  background: white;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.feature-category-header:hover {
  background: #F9FAFB;
}

.feature-category-header h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-title);
  margin: 0;
  text-align: left;
}

.feature-category-header svg {
  font-size: 1.25rem;
  color: var(--color-title);
  transition: transform 0.3s ease;
  margin-left: auto; /* push chevron to the far right */
  flex-shrink: 0;
}

.feature-category-content {
  padding: 1rem 1.5rem 1.25rem;
  animation: slideDown 0.3s ease;
  background: white;
  text-align: left; /* ensure content is left-aligned */
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.features-grid-minimal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-start;
}

.feature-item-minimal {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--color-background);
  border-radius: 0;
  transition: all 0.2s ease;
  cursor: default;
  flex: 0 1 auto;
  white-space: nowrap;
}

.feature-item-minimal:hover {
  background: #E8E9ED;
  transform: translateX(4px);
}

/* Mobile: normalize border color across all section cards so none looks
   darker than the others (some rules previously used #E8E9ED). */
@media (max-width: 768px) {
  .property-detail-content > section,
  .property-description,
  .property-features-section,
  .feature-category,
  .spec-card-modern,
  .property-location-info,
  .location-detail,
  .gallery-card {
    border-color: #E5E7EB !important;
    border-width: 1px !important;
    border-style: solid !important;
  }

  /* ensure subtle backgrounds remain but borders match */
  .property-description,
  .feature-category,
  .spec-card-modern {
    background-clip: padding-box;
  }
}

.feature-item-minimal svg {
  font-size: 1.25rem;
  color: var(--color-title);
  flex-shrink: 0;
}

.feature-item-minimal span {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-primary);
}

/* Location Info - Simplificada */
.property-location-info {
  margin-bottom: 1.5rem;
}

.property-location-info h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-title);
  margin: 0 0 0.75rem 0;
}

.location-detail {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem;
  background: white;
  border: 1px solid #E5E7EB;
  border-radius: 0;
  transition: all 0.3s ease;
  margin-bottom: 1.5rem;
}

.location-detail:hover {
  box-shadow: 0 2px 8px rgba(100, 75, 109, 0.08);
}

.location-detail > svg {
  font-size: 1.5rem;
  color: var(--color-title);
  margin-top: 0.25rem;
  flex-shrink: 0;
}

.location-detail > div {
  flex: 1 1;
}

.location-primary {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-title);
  margin: 0 0 0.25rem 0;
}

.location-secondary {
  font-size: 0.875rem;
  color: var(--color-text-primary);
  margin: 0;
}

/* Small screens: make inline location horizontal when space allows */
@media (min-width: 768px) {
  .property-location-detail .location-inline {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
  }

  .property-location-detail .location-inline-address {
    margin-top: 0;
    white-space: nowrap;
  }
}

/* Google Maps Embebido - Iframe Container */
.google-maps-container {
  width: 100%;
  margin-top: 1.5rem;
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border: 2px solid #E5E7EB;
  transition: all 0.3s ease;
  background: #F3F4F6;
  min-height: 400px;
}

.google-maps-container:hover {
  box-shadow: 0 8px 24px rgba(100, 75, 109, 0.15);
  border-color: var(--color-title);
}

.google-maps-container iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 400px;
}

/* Fallback cuando el mapa no se puede embeber */
.map-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  text-align: center;
  background: linear-gradient(135deg, rgba(100, 75, 109, 0.05) 0%, rgba(100, 75, 109, 0.1) 100%);
  min-height: 400px;
}

.map-fallback-icon {
  font-size: 4rem;
  color: var(--color-title);
  margin-bottom: 1.5rem;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(0.95);
  }
}

.map-fallback-text {
  font-size: 1rem;
  color: var(--color-text-primary);
  margin: 0 0 1.5rem 0;
  font-weight: 500;
}

.map-fallback-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  background: var(--color-title);
  color: white;
  text-decoration: none;
  border-radius: 0;
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(100, 75, 109, 0.2);
}

.map-fallback-link:hover {
  background: var(--color-secondary);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(100, 75, 109, 0.3);
}

/* Sidebar */
.property-detail-sidebar {
  /* Default: relative so mobile layouts don't try to stick inside short containers */
  position: relative;
  top: auto;
}

/* Make contact card sticky on larger screens so the contact form remains visible while scrolling */
@media (min-width: 768px) {
  /* La columna tiene que ocupar todo el alto de la fila del grid para que el
     sticky de adentro tenga por dónde correrse. Sin esto la columna mide lo
     mismo que la tarjeta, el recorrido disponible es cero y la tarjeta se queda
     quieta aunque diga `sticky`.

     El `align-self` va acá, en el hijo directo del grid, y no en la tarjeta:
     sobre la tarjeta no tiene ningún efecto, porque la tarjeta no es un ítem
     del grid. */
  .property-detail-sidebar {
    align-self: stretch;
  }

  .property-detail-sidebar .contact-card {
    position: sticky !important;
    top: calc(var(--navbar-height, 55px) + 20px) !important;
    z-index: 60 !important;
    height: auto;
    /* Ensure the contact card never creates an internal scrollbar.
       Let the page itself scroll instead so the card can expand naturally. */
    max-height: none !important;
    overflow: visible !important; /* prevent internal scrolling */
  }
}

/* JS fallback fixed state (applied dynamically) */
.contact-card.fixed-js {
  /* Force the sticky/fixed visual using !important so CSS controls positioning.
     This overrides inline styles when necessary to keep the card inside the layout. */
  position: sticky !important;
  top: calc(var(--navbar-height, 55px) + 20px) !important;
  right: auto !important;
  z-index: 9999 !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.2) !important;
  will-change: left, top, transform;
}

.contact-card {
  background: white;
  border-radius: 0;
  padding: 2rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.contact-card h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-title);
  margin: 0 0 0.5rem 0;
}

.contact-card > p {
  font-size: 0.875rem;
  color: var(--color-text-primary);
  margin-bottom: 1.5rem;
}

/* Contact Form */
.contact-form {
  margin-bottom: 1.5rem;
}

.form-group {
  margin-bottom: 1.25rem;
}

.form-group label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-title);
  margin-bottom: 0.5rem;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #E5E7EB;
  border-radius: 0;
  font-size: 0.875rem;
  color: var(--color-text-primary);
  font-family: inherit;
  transition: all 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-title);
  box-shadow: 0 0 0 3px rgba(100, 75, 109, 0.1);
}

.form-group textarea {
  resize: vertical;
  min-height: 100px;
}

.submit-btn {
  width: 100%;
  padding: 1rem;
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: 0;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: inherit;
}

.submit-btn:hover {
  background: var(--color-secondary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(100, 75, 109, 0.3);
}

.submit-btn.whatsapp-btn {
  background: #25D366;
  color: white;
}

.submit-btn.whatsapp-btn:hover {
  background: #1EBE57;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
}

/* WhatsApp button: icon spacing and alignment */
.submit-btn.whatsapp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.submit-btn.whatsapp-btn .whatsapp-icon {
  font-size: 1.125rem;
  display: inline-block;
  line-height: 1;
}

.contact-divider {
  text-align: center;
  color: #9CA3AF;
  font-size: 0.875rem;
  margin: 1.5rem 0;
  position: relative;
}

.contact-divider::before,
.contact-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 40%;
  height: 1px;
  background: #E5E7EB;
}

.contact-divider::before {
  left: 0;
}

.contact-divider::after {
  right: 0;
}

.contact-methods {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.contact-method-btn {
  padding: 0.875rem;
  background: var(--color-title);
  color: white;
  border: none;
  border-radius: 0;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: inherit;
  text-decoration: none;
  text-align: center;
  display: block;
}

.contact-method-btn:hover {
  background: var(--color-secondary);
  transform: translateY(-2px);
}

.contact-method-btn.whatsapp {
  background: #25D366;
}

.contact-method-btn.whatsapp:hover {
  background: #1EBE57;
}

/* LA TIRA QUE SE DESLIZA
   ======================
   Antes esto era una sola imagen que cambiaba de `src` según el índice: en el
   teléfono no se podía deslizar, había que apuntarle a una flecha.

   El gesto lo resuelve el navegador con scroll nativo + scroll-snap. Eso da
   inercia, rebote, la foto siguiendo al dedo y la posibilidad de arrepentirse a
   mitad de camino — cosas que un handler de `touchend` no puede imitar. */
.gallery-track {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  /* Inercia en Safari de iOS. Sin esto el arrastre se siente rígido. */
  -webkit-overflow-scrolling: touch;
  /* Que llegar al final de la tira no dispare el gesto de "atrás" del navegador
     ni mueva la página de abajo. En iOS, deslizar desde el borde es navegar
     hacia atrás, y sin esto salirse de la galería por accidente es fácil. */
  overscroll-behavior-x: contain;
  /* La barra de scroll no aporta nada acá y tapa parte de la foto. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.gallery-track::-webkit-scrollbar {
  display: none;
}

.gallery-slide {
  /* Exactamente el ancho de la pista: es lo que hace que
     `Math.round(scrollLeft / clientWidth)` en PropertyDetailClient dé el índice
     correcto. Si esto deja de ser 100%, el contador miente. */
  flex: 0 0 100%;
  scroll-snap-align: center;
  /* Un gesto largo salta una sola foto, no cinco. En una galería se mira de a
     una; el barrido rápido casi siempre es sin querer. */
  scroll-snap-stop: always;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* Quien pidió menos animación tampoco quiere el desplazamiento suave de las
   flechas. */
@media (prefers-reduced-motion: reduce) {
  .gallery-track {
    scroll-behavior: auto;
  }
}

/* Forzar que el contenedor del modal tenga espacio para Image fill */
.gallery-modal-content .progressive-image-container {
  width: 100%;
  height: 100%;
  min-height: 60vh;
}

.gallery-modal-content img {
  max-width: 100%;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain !important;
  border-radius: 0;
}

/* Responsive */
@media (max-width: 1200px) {
  .property-detail-container {
    grid-template-columns: 1fr 350px;
    gap: 1.5rem;
  }

  .property-main-specs {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }

  .gallery-grid-container {
    height: 500px;
    grid-template-columns: 1fr 150px;
  }

  /* En pantallas grandes pero menores a 1200px dejamos la overview en fila si cabe */
  .price-and-specs-container {
    flex-direction: row;
    gap: 1rem;
  }

  .gallery-thumbnail-item {
    min-height: 100px;
  }
  
  /* Precio box en tablet grande */
  .property-price-detail {
    font-size: 2.25rem;
  }
}

@media (max-width: 767px) {
  .property-detail-container {
    grid-template-columns: 1fr;
  }

  .property-detail-sidebar {
    position: relative;
    top: 0;
  }

  .property-main-title {
    font-size: 1.5rem;
  }

  /* Cambiar a vertical en tablet */
  .price-and-specs-container {
    flex-direction: column;
  }

  .property-price-box {
    width: 100%;
    flex: none;
    padding: 1.5rem;
  }
  
  .property-price-detail {
    font-size: 2rem;
  }
  
  /* Specs en tablet - 2 columnas */
  .property-main-specs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
  
  .spec-card-modern {
    padding: 1.25rem;
  }
  
  .spec-icon-circle {
    width: 44px;
    height: 44px;
    min-width: 44px;
    font-size: 1.25rem;
  }
  
  .spec-value {
    font-size: 1.25rem;
  }

  .characteristics-grid-detail {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }

  /* Features grid para tablets - 2 columnas */
  .features-grid-minimal {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  .feature-item-minimal {
    flex: none;
    white-space: normal;
  }  /* Galería en tablet - mantener layout */
  .gallery-grid-container {
    height: 450px;
    grid-template-columns: 1fr 140px;
    gap: 0.5rem;
  }

  .gallery-thumbnail-item {
    min-height: 90px;
  }

  .property-badge-detail {
    top: 1rem;
    left: 1rem;
  }

  .operation-type {
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
  }

  .gallery-counter {
    bottom: 1rem;
    left: 1rem;
    padding: 0.5rem 0.875rem;
    font-size: 0.8125rem;
  }

  .view-fullscreen-btn {
    bottom: 1rem;
    right: 1rem;
    width: 44px;
    height: 44px;
  }

  .view-fullscreen-btn svg {
    font-size: 1.125rem;
  }
  
  /* Mapa en tablet */
  .google-maps-container {
    min-height: 350px;
  }
  
  .google-maps-container iframe {
    min-height: 350px;
  }
  
  .map-fallback {
    min-height: 350px;
    padding: 2.5rem 1.5rem;
  }
  
  .map-fallback-icon {
    font-size: 3.5rem;
  }
}

@media (max-width: 640px) {
  .property-detail-main {
    /* ensure extra top padding so fixed navbar doesn't cover the hero/gallery */
    padding-top: calc(var(--navbar-height, 55px) + 0.5rem);
  }

  .breadcrumb-container,
  .property-gallery,
  .property-detail-container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .property-detail-content,
  .contact-card {
    padding: 1.5rem;
  }

  .property-header {
    flex-direction: column;
    gap: 1rem;
  }

  .property-actions-detail {
    align-self: flex-end;
  }

  .property-main-title {
    font-size: 1.25rem;
  }

  /* Precio en móvil */
  .property-price-box {
    padding: 1.25rem;
  }
  
  .price-label {
    font-size: 0.8125rem;
  }
  
  .property-price-detail {
    font-size: 1.75rem;
  }

  /* Specs en móvil */
  .property-main-specs {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  .spec-card-modern {
    padding: 1rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  
  .spec-icon-circle {
    width: 40px;
    height: 40px;
    min-width: 40px;
    font-size: 1.125rem;
  }
  
  .spec-value {
    font-size: 1.125rem;
  }
  
  .spec-label {
    font-size: 0.6875rem;
  }

  /* Galería en móvil - stack vertical */
  .gallery-grid-container {
    grid-template-columns: 1fr;
    grid-template-rows: 400px auto;
    height: auto;
    gap: 0.75rem;
  }

  .gallery-main-image {
    border-radius: 0;
  }

  .gallery-thumbnails-scroll {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    height: auto;
    gap: 0.5rem;
    padding-bottom: 0.25rem;
  }

  .gallery-thumbnail-item {
    min-width: 100px;
    flex-shrink: 0;
    min-height: 75px;
  }

  .property-badge-detail {
    top: 0.75rem;
    left: 0.75rem;
  }
  
  /* Mapa en móvil */
  .google-maps-container {
    margin-top: 1rem;
    min-height: 300px;
    border-radius: 0;
  }
  
  .google-maps-container iframe {
    min-height: 300px;
  }
  
  .map-fallback {
    min-height: 300px;
    padding: 2rem 1rem;
  }
  
  .map-fallback-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
  }
  
  .map-fallback-text {
    font-size: 0.875rem;
    margin-bottom: 1rem;
  }
  
  .map-fallback-link {
    padding: 0.75rem 1.5rem;
    font-size: 0.9375rem;
  }

  .operation-type {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
  }

  .gallery-counter {
    bottom: 0.75rem;
    left: 0.75rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
  }

  .view-fullscreen-btn {
    bottom: 0.75rem;
    right: 0.75rem;
    width: 40px;
    height: 40px;
  }

  .view-fullscreen-btn svg {
    font-size: 1rem;
  }

  .characteristics-grid-detail {
    grid-template-columns: 1fr;
  }

  /* Features grid responsive - columna única en móvil */
  .features-grid-minimal {
    display: block;
  }

  .feature-item-minimal {
    flex: none;
    width: 100%;
    margin-bottom: 0.5rem;
    white-space: normal;
  }


/* Envolver secciones principales en cajas blancas según design_web */
.property-overview {
  background: transparent;
  padding: 0;
  margin-bottom: 1.25rem;
}

.property-description,
.property-features-section,
.property-location-info {
  background: white;
  padding: 1.5rem;
  border-radius: 0;
  margin-bottom: 1.25rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.property-description > h2,
.property-location-info > h2,
.property-features-section > h2 {
  color: var(--color-title);
  margin-bottom: 1rem;
}
  .gallery-nav {
    width: 40px;
    height: 40px;
    font-size: 1.25rem;
  }

  .gallery-nav.prev {
    left: 0.5rem;
  }

  .gallery-nav.next {
    right: 0.5rem;
  }

  .contact-methods {
    grid-template-columns: 1fr;
  }

  /* Ajustar padding de cajas en móvil */
  .property-overview,
  .property-description,
  .property-features-section,
  .property-location-info {
    padding: 1rem;
    margin-bottom: 1rem;
  }
}

/* ========================================
   MODAL DE GALERÍA
   ======================================== */

.gallery-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.95);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.gallery-close {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.gallery-close:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: rotate(90deg);
}

.gallery-modal-content {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 1400px;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-modal-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  /* `none`, no `manipulation`.
     `manipulation` solo saca el zoom por doble toque: el PANEO lo sigue
     permitiendo, así que apenas el dedo se movía un pixel el navegador decidía
     que era un arrastre y le pasaba el gesto a la tira que scrollea.
     Con `none`, de este elemento no sale ningún desplazamiento.
     No afecta al deslizamiento de la galería: la tira es otro elemento y sigue
     con su `overflow-x: auto` intacto.

     ⚠️ Esto es necesario y NO es suficiente. `touch-action` impide el scroll,
     no la cancelación del toque: iOS igual descarta el `click` si el dedo se
     corre unos pixeles. Por eso la flecha cambia de foto en `pointerdown` — ver
     `flechaDeGaleria` en PropertyDetailClient. Las dos cosas juntas son el
     arreglo; cualquiera de las dos sola falla. */
  touch-action: none;
  width: 56px;
  height: 56px;
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: white;
  font-size: 1.75rem;
  cursor: pointer;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

/* Detrás de la guarda de hover por lo mismo que las tarjetas de propiedad: en un
   teléfono, una regla de `:hover` que cambia lo que se ve se lleva el primer
   toque para encenderse. */
@media (hover: hover) and (pointer: fine) {
  .gallery-modal-nav:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-50%) scale(1.1);
  }
}

.gallery-modal-nav.prev {
  left: 2rem;
}

.gallery-modal-nav.next {
  right: 2rem;
}

.gallery-modal-counter {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 0;
  font-size: 0.9375rem;
  font-weight: 500;
  z-index: 10001;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Responsive para el modal */
@media (max-width: 768px) {
  .gallery-modal {
    padding: 1rem;
  }

  .gallery-close {
    top: 1rem;
    right: 1rem;
    width: 44px;
    height: 44px;
    font-size: 1.25rem;
  }

  /* En el teléfono la flecha se AGRANDA, no se achica: es el control que más se
     usa de esta pantalla y el dedo no apunta como un mouse. */
  .gallery-modal-nav {
    width: 56px;
    height: 56px;
    font-size: 1.5rem;
  }

  /* Despegadas del borde: los ~20px del filo de la pantalla son de iOS, que los
     usa para el gesto de "atrás". Un botón ahí compite con el sistema y pierde. */
  .gallery-modal-nav.prev {
    left: 0.75rem;
  }

  .gallery-modal-nav.next {
    right: 0.75rem;
  }

  .gallery-modal-counter {
    bottom: 1rem;
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
  }
}

/* Mobile contact bar - visible only on small screens */
.mobile-contact-bar {
  display: none;
}

/* 767 y no 640: entre 641 y 767 no se veía NINGÚN formulario de contacto.
   La sidebar con el formulario recién pasa a la columna derecha en 768, y por
   debajo se apila al final de la página; la barra fija llegaba solo hasta 640.
   Un iPad mini vertical mide 744 y caía justo en el medio. Ahora la frontera
   de la barra es la misma que la del layout. */
@media (max-width: 767px) {
  .mobile-contact-bar {
    display: flex;
    position: fixed;
    left: 0.5rem;
    right: 0.5rem;
    bottom: 0.75rem;
    background: linear-gradient(90deg, rgba(255,255,255,0.98), rgba(255,255,255,0.98));
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    border-radius: 0;
    padding: 0.5rem;
    gap: 0.5rem;
    align-items: center;
    justify-content: space-between;
    z-index: 2000;
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
  }

  .mobile-contact-price {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-title);
    padding-left: 0.75rem;
  }

  .mobile-contact-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #25D366;
    color: white;
    padding: 0.625rem 1rem;
    border-radius: 0;
    text-decoration: none;
    font-weight: 700;
    box-shadow: 0 6px 18px rgba(37,211,102,0.18);
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.875rem;
  }

  .mobile-contact-whatsapp svg {
    font-size: 1.125rem;
  }

  /* Push main content bottom padding so bar doesn't overlap important elements */
  .property-detail-main {
    padding-bottom: 5.5rem; /* leave space for the fixed bar */
  }

    /* When the contact form is visible, hide the mobile bar with a smooth transition */
    .mobile-contact-bar {
      transition: transform 280ms cubic-bezier(.2,.9,.2,1), opacity 200ms ease;
      will-change: transform, opacity;
    }

    .mobile-contact-bar.hidden-by-form {
      transform: translateY(120%);
      opacity: 0;
      pointer-events: none;
    }

  /* El botón de "subir", escondido mientras esté la barra de contacto.
     Los dos son `fixed` en la esquina de abajo a la derecha y se pisan entre los
     24 y los 68px: la barra va en `bottom: 12px` con `z-index: 2000` y el botón
     en `bottom: 24px` con 999, así que gana la barra y el botón queda tapado.
     Correrlo no alcanza, porque la barra ocupa todo el ancho.

     Va acá y no en `TopButton.css` a propósito: el mismo botón se usa en la
     portada, en el listado y en las legales, donde no hay barra que lo tape y sí
     hace falta. `.property-detail-page` es el div raíz de esta pantalla. */
  .property-detail-page .top-button {
    display: none;
  }
}


/* ─────────────────────────────────────────────────────────────────────────────
   TABLET (768–1023px)
   ===================
   La ficha ya pasa a dos columnas desde 768px (ver los `min-width: 768px` de
   arriba, que antes eran 968). Acá se ajusta lo que en un iPad queda
   desproporcionado con las medidas de escritorio.
   ───────────────────────────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
  .property-detail-container {
    /* La columna de contacto más angosta: con 380px, la galería queda casi
       cuadrada y las fotos se ven chicas. */
    grid-template-columns: 1fr 300px;
    gap: 1.5rem;
    padding: 1.25rem;
  }

  .gallery-main-image {
    /* Proporción de foto, no el alto fijo de escritorio. */
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .property-header h1 {
    font-size: 1.6rem;
  }
}


/* ─────────────────────────────────────────────────────────────────────────────
   EL CONTROL MAPA / STREET VIEW
   =============================
   Aparece solo cuando Street View se puede armar de verdad —hacen falta
   coordenadas y la key de la Embed API—, así que en una propiedad sin
   coordenadas esta franja no existe y la ficha se ve igual que antes.

   Los colores salen de las variables de la marca. Ningún hex escrito acá.
   ───────────────────────────────────────────────────────────────────────────── */
.map-view-toggle {
  display: inline-flex;
  gap: 0;
  margin-bottom: 0.75rem;
  border: 1px solid var(--color-border, rgba(0, 0, 0, 0.12));
  /* La forma la pone la marca, desde `siteConfig.marca.radio`, igual que la
     barra de filtros del mapa del listado. Estaba clavado en 0 y por eso el
     control se veía igual en abadie —que redondea todo— y en peirano, que no
     redondea nada. */
  border-radius: var(--marca-radio, 0);
  overflow: hidden;
}

.map-view-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--color-text-secondary, #666);
  /* 44px de alto: es la medida mínima de un blanco táctil, y este control vive
     justo arriba de un mapa que se arrastra con el dedo. */
  min-height: 44px;
  padding: 0.5rem 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
  /* Es un botón, no una superficie que se arrastra: sin esto, en el teléfono
     hay 300ms de retardo antes de que responda. */
  touch-action: manipulation;
}

.map-view-btn svg {
  width: 1.05em;
  height: 1.05em;
  flex-shrink: 0;
}

@media (hover: hover) and (pointer: fine) {
  .map-view-btn:hover {
    background: var(--color-background-alt, rgba(0, 0, 0, 0.04));
  }
}

.map-view-btn.active {
  background: var(--color-title, #333);
  color: #fff;
  /* Una segunda señal además del relleno. El acento de peirano es casi blanco:
     si fuera lo único que distingue al activo, no se distinguiría. */
  box-shadow: inset 0 -3px 0 var(--color-accent, #888);
}

.map-view-btn:focus-visible {
  outline: 2px solid var(--color-accent, #888);
  outline-offset: -2px;
}


/* ─────────────────────────────────────────────────────────────────────────────
   LAS CARACTERÍSTICAS DE LA PROPIEDAD
   ===================================
   Va al final del archivo a propósito: hay reglas repartidas en cinco media
   queries que se contradicen entre sí —una pone `display: flex` y otra le
   define `grid-template-columns`, que ahí no hace nada— y desenredarlas una por
   una es más riesgoso que fijar el resultado en un solo lugar.

   La regla de fondo: **el ancho de la tarjeta lo decide la grilla, y la etiqueta
   parte en dos renglones antes que desbordarse.** Antes la etiqueta se salía de
   su tarjeta y la de al lado, que tiene fondo blanco, se la comía: eso es lo que
   se veía como "AMBIENTE" y "DORMITOR" cortados.
   ───────────────────────────────────────────────────────────────────────────── */
.property-main-specs {
  display: grid !important;
  /* `auto-fit` con un mínimo que sí entra: 148px dan lugar al ícono, al número y
     a la palabra más larga ("DORMITORIOS") en dos renglones. Las columnas que
     sobran se reparten solas, así que no hace falta una media query por tramo. */
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)) !important;
  gap: 0.75rem !important;
  align-items: stretch;
  width: 100%;
}

.property-main-specs .spec-card-modern {
  /* Sin `flex-basis`: acá el ancho lo da la columna de la grilla. Dejarlo hacía
     que la tarjeta pidiera un tercio del ancho aunque su columna midiera otra
     cosa. */
  flex: initial !important;
  /* La pieza que evita el desborde. El mínimo de un ítem de grilla es su
     contenido, así que sin esto la tarjeta se niega a achicarse por debajo de lo
     que mide la palabra más larga y se sale de su columna. */
  min-width: 0 !important;
  margin-bottom: 0 !important;
  box-sizing: border-box;
}

/* Lo mismo un nivel más adentro: la columna de texto también tiene que poder
   encogerse, si no el problema se muda de la tarjeta al texto. */
.spec-card-modern .spec-info {
  min-width: 0;
  flex: 1 1 auto;
}

.spec-card-modern .spec-label {
  /* Que parta en dos renglones en vez de salirse. */
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.2;
}

.spec-card-modern .spec-icon-circle {
  /* Que el ícono no se achique cuando la etiqueta es larga: lo que se acomoda es
     el texto, no el ícono. */
  flex-shrink: 0;
}

/* En pantallas angostas, dos por fila. Con `auto-fit` y 148px de mínimo, a 360px
   de ancho entrarían dos justas; se fija en dos para que no baje a una sola y
   queden cinco tarjetas altísimas una abajo de la otra. */
@media (max-width: 480px) {
  .property-main-specs {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}