/* 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 {
  overflow-x: hidden; /* avoid page-level horizontal scrolling on mobile */
}

.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: 968px) {
  .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: 967px) {
  .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: 968px) {
  .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: 968px) {
  .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: 968px) {
  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: 968px) {
  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: 968px) {
  .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: 968px) {
  .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: 968px) {
  .property-detail-sidebar .contact-card {
    position: sticky !important;
    top: calc(var(--navbar-height, 55px) + 20px) !important;
    align-self: start;
    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;
}

/* Gallery Modal */
.gallery-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.95);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  animation: fadeIn 0.3s ease;
}

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

.gallery-close:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

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

/* 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;
}

.gallery-modal-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.9);
  color: var(--color-title);
  border: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 2rem;
  transition: all 0.3s ease;
  z-index: 10001;
}

.gallery-modal-nav:hover {
  background: white;
  transform: translateY(-50%) scale(1.1);
}

.gallery-modal-nav.prev {
  left: -28px;
}

.gallery-modal-nav.next {
  right: -28px;
}

.gallery-modal-counter {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 0;
  font-size: 1rem;
  font-weight: 600;
  z-index: 10001;
}

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

/* 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: 968px) {
  .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;
  }

  .gallery-modal {
    padding: 1rem;
  }

  .gallery-modal-nav {
    width: 48px;
    height: 48px;
    font-size: 1.5rem;
  }

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

  .gallery-modal-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%);
  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;
}

.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;
  }

  .gallery-modal-nav {
    width: 48px;
    height: 48px;
    font-size: 1.5rem;
  }

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

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

  .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;
}

@media (max-width: 640px) {
  .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;
    }
}