﻿/* =========================================================
   OBJECT PAGE â€” pixel-perfect to Figma 1920
   (Villa Paradise / Paraiso Alto â€” single object detail page)
   ========================================================= */

.big_block_home--object {
  background: #FFFFFF;
  height: auto;
  min-height: 0;
}
.big_block_home--object > .container {
  padding: 0;
  height: auto;
}
/* Mega-menu logo override (logo1.svg is already dark) */
.big_block_home--object header .mega-menu .logo img { filter: none; }

/* ----- Vertical rails â€” Figma Lines 64 (x=1824) & 100 (x=96)
   Rails sit ABOVE header so they remain visible at the very top of the page
   AND visually break the header's horizontal divider at the intersection
   (Figma: vertical line crosses over horizontal). They're 1.6px so they don't
   visibly affect text/images they pass through. Only painted over the
   header+hero+main area (NOT the footer). ----- */
.big_block_home--object,
.obj_main { position: relative; }
.big_block_home--object::before,
.big_block_home--object::after,
.obj_main::before,
.obj_main::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1.6px;
  background: #E1E1E1;
  z-index: 200;
  pointer-events: none;
}
.big_block_home--object::before,
.obj_main::before { left: 96px; }
.big_block_home--object::after,
.obj_main::after  { right: 96px; }

/* Hide rails when mega-menu overlay is open */
body:has(.mega-menu.active) .big_block_home--object::before,
body:has(.mega-menu.active) .big_block_home--object::after,
body:has(.mega-menu.active) .obj_main::before,
body:has(.mega-menu.active) .obj_main::after,
body:has(.mega-menu.active) .obj_loc::before,
body:has(.mega-menu.active) .obj_loc::after,
body:has(.mega-menu.active) .obj_gallery::before,
body:has(.mega-menu.active) .obj_gallery::after,
body:has(.mega-menu.active) .obj_details::before,
body:has(.mega-menu.active) .obj_details::after,
body:has(.mega-menu.active) .obj_progress::before,
body:has(.mega-menu.active) .obj_progress::after,
body:has(.mega-menu.active) .obj_visit::before,
body:has(.mega-menu.active) .obj_visit::after,
body:has(.mega-menu.active) .obj_similar::before,
body:has(.mega-menu.active) .obj_similar::after {
  display: none;
}

/* ----- HERO: breadcrumbs + title + subtitle (Figma: title at y=304, top divider at y=565) ----- */
.obj_hero {
  padding: 85px 96px 93px;
  text-align: center;
  background: #FFFFFF;
  /* Break out of .container's 96px side padding so the bottom divider spans the full
     viewport (Figma Line 126 at x=3..1923) instead of stopping at the rails. */
  margin-left: -96px;
  margin-right: -96px;
  border-bottom: 1.6px solid #E1E1E1;
  position: relative;
}
.obj_hero__breadcrumbs {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Inter", sans-serif;
  font-weight: 300;
  font-size: 25px;
  line-height: 130%;
  color: #C4C4C4;
  margin-bottom: 32px;
}
.obj_hero__breadcrumbs a,
.obj_hero__breadcrumbs span {
  color: #C4C4C4;
  text-decoration: none;
  transition: color .2s;
}
.obj_hero__breadcrumbs a:hover { color: #010101; }
.obj_hero__sep { display: inline-block; }

.obj_hero__title {
  font-family: "Felidae", "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: 80px;
  line-height: 110%;
  letter-spacing: 0.02em;
  color: #010101;
  text-transform: uppercase;
  margin: 0 auto 32px;
  max-width: 1482px;
}
.obj_hero__subtitle {
  font-family: "Felidae", "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: 44px;
  line-height: 110%;
  letter-spacing: 0.02em;
  color: #010101;
  margin: 0 auto;
  max-width: 1482px;
}

/* ----- MAIN: 2 rows with internal divider, full-bleed with side rails (1.6px borders at x=96 and x=1824) ----- */
.obj_main {
  width: 100%;
  background: #FFFFFF;
  border-bottom: 1.6px solid #E1E1E1;
}
.obj_main__inner {
  position: relative;
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 96px;
  box-sizing: border-box;
}
.obj_row {
  display: grid;
  align-items: start;
}
.obj_row--top {
  /* concept text (494) | big photo (1100) â€” Figma proportions */
  grid-template-columns: 36% 64%;
  height: 766px;
}
.obj_row--bottom {
  /* photo1 (546) | photo2 (555) | location text (494) */
  grid-template-columns: 32% 32% 36%;
  column-gap: 32px;
  min-height: 825px;
  align-items: start;
}
.obj_divider {
  height: 1.6px;
  background: #E1E1E1;
  margin: 0;
}

/* Text columns â€” Figma: concept/location at x=128, body width 494 */
.obj_col--text {
  padding: 46px 32px 0 32px;
}
.obj_block__title {
  font-family: "Felidae", "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: 44px;
  line-height: 110%;
  letter-spacing: 0.02em;
  color: #010101;
  margin: 0 0 25px;
}
.obj_block__text {
  font-family: "Inter", sans-serif;
  font-weight: 300;
  font-size: 25px;
  line-height: 130%;
  color: #3C3C3B;
  margin: 0;
  max-width: 494px;
}

/* Big hero photo (top-right) */
.obj_col--photo {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.obj_col--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Bottom row â€” 2 photos side by side */
.obj_col--photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 32px;
  grid-column: span 2;
}
.obj_col--photos img {
  width: 100%;
  height: 794px;
  object-fit: cover;
  display: block;
}

/* For .obj_row--bottom: 2 photo cells (546+555) + 1 text cell (494)
   Override grid: photos in 2 separate columns, text in 3rd */
.obj_row--bottom > .obj_col--photos { grid-column: 1 / 3; padding-top: 32px; }
.obj_row--bottom > .obj_col--text {
  grid-column: 3 / 4;
  /* Figma: title at y=384 from row top â†’ place location block lower (per design) */
  padding: 384px 32px 0 50px;
}

/* =========================================================
   NEIGHBORHOOD BLOCK â€” title + map (1730Ã—1011) with photo overlay (818Ã—915)
   Figma: title "ÐžÐ±ÑŠÐµÐºÑ‚ Ñ€Ð°ÑÐ¿Ð¾Ð»Ð¾Ð¶ÐµÐ½..." 1658Ã—176; map at x=96, y=3412
   ========================================================= */
.obj_loc {
  background: #FFFFFF;
  /* Use vw-aware padding so the section scales down on large monitors and
     never crowds the section title. clamp() floor matches the older 1200px
     responsive override (64px) and ceiling is the original Figma value. */
  padding: clamp(56px, 5vw, 96px) clamp(48px, 5vw, 96px);
  position: relative;
}
/* Vertical rails removed â€” the section no longer ships with side rules.
   Responsive overrides below still set `left`/`right` properties on these
   pseudo-elements but with no `content` declared they don't render. */
.obj_loc__head {
  text-align: center;
  margin-bottom: clamp(28px, 3vw, 56px);
}
.obj_loc__title {
  font-family: "Felidae", "Cormorant Garamond", serif;
  font-weight: 400;
  /* Was a flat 80px which felt enormous on 1920+ monitors. clamp() scales
     between the 1200-breakpoint size (50px) and a moderate large-screen
     size (60px) without ever hitting the original 80px again. */
  font-size: clamp(34px, 3.6vw, 60px);
  line-height: 115%;
  letter-spacing: 0.02em;
  color: #010101;
  text-transform: uppercase;
  margin: 0 auto;
  max-width: 1200px;
}
/* Small disclaimer under the location title: the pin is town-approximate, not
   the exact address. Kept visually quiet (muted, normal case, no uppercase). */
.obj_loc__note {
  margin: 12px auto 0;
  max-width: 720px;
  font-size: 13px;
  line-height: 140%;
  letter-spacing: 0.01em;
  color: #8A8A8A;
  text-transform: none;
}
.obj_loc__body {
  display: flex;
  justify-content: center;
}
/* Map container: scales with viewport width via aspect-ratio. 16:9 leaves
   enough vertical room for the photo overlay AND the map's surrounding
   streets â€” the old 16:8 made the box too squat at mid widths and the
   overlay started looking taller than the map. overflow:hidden ensures
   the absolutely-positioned overlay never bleeds past the map's edges. */
.obj_loc__map {
  position: relative;
  width: 100%;
  max-width: 1500px;
  aspect-ratio: 16 / 9;
  height: auto;
  background: #EAEAEA;
  overflow: hidden;
}
.obj_loc__map-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* Marker pin + label (Figma: 62px ring + 54px inner #41545C circle + white "X") */
.obj_loc__marker {
  position: absolute;
  top: 36%;
  left: 8%;
  display: flex;
  align-items: center;
  gap: 19px;
  z-index: 4;
  pointer-events: none;
}
.obj_loc__pin {
  width: 62px;
  height: 62px;
  border: 1.6px solid #41545C;
  border-radius: 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: transparent;
}
.obj_loc__pin::before {
  content: "";
  position: absolute;
  top: 4px; left: 4px; right: 4px; bottom: 4px;
  background: #41545C;
  border-radius: 50%;
  border: 1.92px dashed #41545C;
}
.obj_loc__pin svg { position: relative; z-index: 2; }
.obj_loc__addr {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 25px;
  line-height: 120%;
  color: #41545C;
  background: #FFFFFF;
  padding: 6px 12px;
  white-space: nowrap;
  pointer-events: auto;
}

/* Photo overlay on right. Anchored with top + right + bottom so its height
   is derived from the map container's height â€” guarantees it never grows
   taller than the map regardless of viewport width. Width is clamped to
   stay narrower than the map even at narrow desktop widths. */
.obj_loc__overlay {
  position: absolute;
  top: clamp(16px, 2.5%, 40px);
  right: clamp(16px, 2.5%, 40px);
  bottom: clamp(16px, 2.5%, 40px);
  /* Exactly half the map width minus the right inset, so the foto sits flush
     in the right half and the pin has the full left half to breathe in. */
  width: calc(50% - clamp(16px, 2.5%, 40px));
  z-index: 3;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.obj_loc__overlay-top {
  position: absolute;
  top: 32px;
  left: 32px;
  right: 32px;
  z-index: 2;
}
.obj_loc__progress {
  position: relative;
  width: 100%;
  height: 1.6px;
  background: rgba(255, 255, 255, 0.4);
  margin-bottom: 30px;
}
.obj_loc__progress-bar {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: #FFFFFF;
}
.obj_loc__caption {
  display: flex;
  align-items: baseline;
  /* flex-end so the slide counter sits on the right when it's the only
     child (caption-text was retired in favour of per-slide labels at the
     bottom of each photo). */
  justify-content: flex-end;
  gap: 16px;
}
.obj_loc__caption:has(.obj_loc__caption-text) {
  justify-content: space-between;
}
.obj_loc__caption-text {
  font-family: "Inter", sans-serif;
  font-weight: 300;
  font-size: 32px;
  line-height: 120%;
  color: #FFFFFF;
}
.obj_loc__caption-num {
  font-family: "Felidae", "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: 44px;
  line-height: 110%;
  letter-spacing: 0.02em;
  color: #FFFFFF;
}
.obj_loc__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =========================================================
   GALLERY â€” row1 (573+1126) + row2 (1728), each 803h. Figma 1728Ã—1638
   ========================================================= */
.obj_gallery {
  background: #FFFFFF;
  padding: 0 96px 96px;
  position: relative;
}
.obj_gallery__row {
  display: grid;
  margin-bottom: 32px;
}
.obj_gallery__row:last-child { margin-bottom: 0; }
.obj_gallery__row--top {
  /* Figma: 573 + 28.8 + 1126 = 1727.8 */
  grid-template-columns: 573fr 1126fr;
  column-gap: 28.8px;
}
.obj_gallery__row--bottom {
  grid-template-columns: 1fr;
}
.obj_gallery__img {
  width: 100%;
  height: 803px;
  object-fit: cover;
  display: block;
}
/* Rails â€” same as other sections so they continue through gallery */
.obj_gallery::before,
.obj_gallery::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1.6px;
  background: #E1E1E1;
  z-index: 200;
  pointer-events: none;
}
.obj_gallery::before { left: 96px; }
.obj_gallery::after  { right: 96px; }

/* =========================================================
   DETAILS â€” 3Ã—3 spec grid (Figma 1730Ã—822)
   ========================================================= */
.obj_details {
  background: #FFFFFF;
  padding: 96px 96px 96px;
  position: relative;
}
.obj_details::before,
.obj_details::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1.6px;
  background: #E1E1E1;
  z-index: 200;
  pointer-events: none;
}
.obj_details::before { left: 96px; }
.obj_details::after  { right: 96px; }

.obj_details__head {
  text-align: center;
  padding-bottom: 80px;
  border-bottom: 1.6px solid #E1E1E1;
  margin-bottom: 0;
}
.obj_details__title {
  font-family: "Felidae", "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: 80px;
  line-height: 110%;
  letter-spacing: 0.02em;
  color: #010101;
  text-transform: uppercase;
  margin: 0;
}
.obj_details__grid {
  display: grid;
  /* Figma columns: 572 | 587 | 571 (sums to 1730) */
  grid-template-columns: 572fr 587fr 571fr;
  border-bottom: 1.6px solid #E1E1E1;
}
.obj_details__cell {
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 17px;
  min-height: 218px;
  border-right: 1.6px solid #E1E1E1;
  border-bottom: 1.6px solid #E1E1E1;
  position: relative;
  box-sizing: border-box;
}
/* Remove rightmost column's right-border so it joins the page rails cleanly */
.obj_details__cell:nth-child(3n) { border-right: 0; }
/* Remove bottom row's bottom-border (parent grid has its own bottom border) */
.obj_details__cell:nth-last-child(-n+3) { border-bottom: 0; }
.obj_details__label {
  font-family: "Inter", sans-serif;
  font-weight: 300;
  font-size: 25px;
  line-height: 130%;
  color: rgba(1, 1, 1, 0.5);
}
.obj_details__value {
  font-family: "Inter", sans-serif;
  font-weight: 300;
  font-size: 32px;
  line-height: 120%;
  color: #010101;
  text-transform: uppercase;
}
/* "+" expand button â€” Figma: 37Ã—37 ring, vertical+horizontal lines, color #C4C4C4 */
.obj_details__expand {
  position: absolute;
  bottom: 16px;
  right: 16px;
  width: 37px;
  height: 37px;
  border: 1.6px solid #C4C4C4;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: border-color .2s, background .2s;
}
.obj_details__expand::before,
.obj_details__expand::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: #C4C4C4;
  transition: background .2s;
}
.obj_details__expand::before {
  width: 18px;
  height: 1.6px;
  transform: translate(-50%, -50%);
}
.obj_details__expand::after {
  width: 1.6px;
  height: 18px;
  transform: translate(-50%, -50%);
}
.obj_details__expand:hover {
  border-color: #010101;
}
.obj_details__expand:hover::before,
.obj_details__expand:hover::after {
  background: #010101;
}

/* =========================================================
   PROGRESS â€” "Ð¡Ñ‚Ñ€Ð¾Ð¸Ñ‚ÐµÐ»ÑŒÐ½Ñ‹Ðµ Ñ€Ð°Ð±Ð¾Ñ‚Ñ‹" / "Ð—Ð°Ð²ÐµÑ€ÑˆÐµÐ½Ð½Ñ‹Ðµ Ñ€Ð°Ð±Ð¾Ñ‚Ñ‹" (Figma 1920Ã—1584)
   Each row: label on left, big photo on right, divider between rows.
   ========================================================= */
.obj_progress {
  background: #FFFFFF;
  position: relative;
  padding: 0 96px;
  border-top: 1.6px solid #E1E1E1;
}
.obj_progress::before,
.obj_progress::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1.6px;
  background: #E1E1E1;
  z-index: 200;
  pointer-events: none;
}
.obj_progress::before { left: 96px; }
.obj_progress::after  { right: 96px; }

.obj_progress__row {
  display: grid;
  /* Figma: label area 573 + photo 1155 = 1728 (full content width) */
  grid-template-columns: 573fr 1155fr;
  align-items: start;
  padding-top: 48px;
  padding-bottom: 0;
  border-bottom: 1.6px solid #E1E1E1;
}
.obj_progress__row:last-child { border-bottom: 0; }

.obj_progress__label {
  padding: 0 32px 0 32px; /* 32 from rail (which sits at section edge after 96 padding) */
}
.obj_progress__heading {
  font-family: "Felidae", "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: 44px;
  line-height: 110%;
  letter-spacing: 0.02em;
  color: #010101;
  margin: 0;
  max-width: 443px;
}
.obj_progress__photo {
  width: 100%;
}
.obj_progress__photo img {
  width: 100%;
  height: 766px;
  object-fit: cover;
  display: block;
}

/* =========================================================
   VISIT CTA â€” mountain bg + 1349Ã—942 white card (Figma 1920Ã—1342)
   ========================================================= */
.obj_visit {
  position: relative;
  width: 100%;
  min-height: 720px;
  background-color: #2A2A2A;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px 96px;
  box-sizing: border-box;
  overflow: hidden;
}
/* BG image as separate layer ABOVE rails â€” hides them where opaque photo covers */
.obj_visit__bg {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 250;
  pointer-events: none;
}
/* Rails extend through this section */
.obj_visit::before,
.obj_visit::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1.6px;
  background: #E1E1E1;
  z-index: 200;
  pointer-events: none;
}
.obj_visit::before { left: 96px; }
.obj_visit::after  { right: 96px; }

.obj_visit__card {
  position: relative;
  z-index: 300;
  width: 100%;
  max-width: 880px;
  min-height: 480px;
  background: #FAFAFA;
  padding: 64px 48px 56px;
  text-align: center;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.obj_visit__title {
  font-family: "Felidae", "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: 44px;
  line-height: 110%;
  letter-spacing: 0.02em;
  color: #010101;
  text-transform: uppercase;
  margin: 0;
  max-width: 760px;
}
.obj_visit__sub {
  font-family: "Felidae", "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 120%;
  letter-spacing: 0.02em;
  color: #010101;
  margin: 0 auto;
  max-width: 620px;
}
.obj_visit__btn {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 460px;
  height: 56px;
  background: transparent;
  color: #232323;
  border: 1.6px solid #232323;
  font-family: "Felidae", "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .25s, color .25s;
}
.obj_visit__btn:hover { background: #010101; color: #FFFFFF; border-color: #010101; }
.obj_visit__micro {
  font-family: "Inter", sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 130%;
  color: #3C3C3B;
  margin: 0 auto;
  max-width: 460px;
}

/* =========================================================
   SIMILAR PROPERTIES â€” title + Swiper carousel (up to 6 cards)
   The cards live inside .obj_similar__swiper (a Swiper instance with
   slidesPerView:'auto'); whatever doesn't fit is reached via the
   prev/next arrow buttons on the right side of the section.
   ========================================================= */
.obj_similar {
  background: #FFFFFF;
  position: relative;
  padding: 64px 0 56px;
  border-bottom: 1.6px solid #E1E1E1;
  margin-bottom: 64px;
}
/* Vertical rails removed by request â€” keep the rules absent (rather than
   `display:none` overrides) so future styles don't accidentally re-enable
   them via specificity wars. */

.obj_similar__head {
  text-align: center;
  padding: 0 96px;
  margin-bottom: 40px;
}
.obj_similar__title {
  font-family: "Felidae", "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: 44px;
  line-height: 115%;
  letter-spacing: 0.02em;
  color: #010101;
  text-transform: uppercase;
  margin: 0 auto;
  max-width: 1100px;
}

/* Carousel wrapper: clipped on the right so a partially visible "next"
   card sits flush with the right rail instead of overflowing past it. */
.obj_similar__carousel {
  position: relative;
  padding: 0 96px;
  box-sizing: border-box;
}
.obj_similar__swiper {
  width: 100%;
  overflow: hidden;
}
.obj_similar__cell {
  /* slidesPerView:'auto' â†’ width controlled by the slide itself */
  width: 320px;
  flex-shrink: 0;
  position: relative;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.obj_similar__name {
  font-family: "Felidae", "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 115%;
  letter-spacing: 0.02em;
  color: #010101;
  margin: 0 0 18px;
  min-height: 56px;
}
.obj_similar__photo-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.obj_similar__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s ease;
  will-change: transform;
}
.obj_similar__cell:hover .obj_similar__photo {
  transform: scale(1.06);
}
.obj_similar__link {
  position: absolute;
  bottom: 16px;
  right: 16px;
  width: 37px;
  height: 37px;
  border-radius: 50%;
  border: 1.6px solid #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.25);
  transition: background .2s, border-color .2s;
}
.obj_similar__cell:hover .obj_similar__link {
  background: rgba(255, 255, 255, 0.25);
  border-color: #FFFFFF;
}

/* Prev/next arrows â€” sit just inside the rails, vertically centred on the
   photo strip. Hidden when Swiper reports no overflow (watchOverflow). */
.obj_similar__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1.6px solid #E1E1E1;
  color: #232323;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  transition: background .2s, border-color .2s, color .2s, opacity .2s;
}
.obj_similar__nav:hover { background: #010101; border-color: #010101; color: #FFFFFF; }
.obj_similar__nav--prev { left: 36px; }
.obj_similar__nav--next { right: 36px; }
.obj_similar__nav.swiper-button-disabled,
.obj_similar__nav.swiper-button-lock { opacity: 0; pointer-events: none; }

/* =========================================================
   ADAPTIVE â€” tablet â‰¤1200
   ========================================================= */
/* Pixel-perfect to Figma 1200_Object Investment (1200x8650).
   Content area 1080 (60px side padding). Hero title 50px Felidae uppercase,
   subtitle 28px Felidae. Section titles 50px, block titles 28px Felidae,
   body 16px Inter (309 wide). Details labels 16px Inter, values 20px Inter ls 2%.
   Concept row: text 33% / image 67% (722Ã—479). Bottom row: 2 photos (~341+347, gap 22) + ÐœÐµÑÑ‚Ð¾Ð¿Ð¾Ð»Ð¾Ð¶ÐµÐ½Ð¸Ðµ (309 wide).
   Map 1081Ã—632, overlay 511Ã—572. Gallery rows 502 height (358:704 + 1080).
   Details 3Ã—3 grid cells 137 tall, padding 20. Progress photos 722Ã—479.
   Visit card 843Ã—589 padding 80Ã—28. Similar photos 347Ã—350. */
@media (max-width: 1200px) {
  /* Vertical rails â€” Figma at x=60 and x=1140 (60px from sides) */
  .big_block_home--object::before,
  .obj_main::before,
  .obj_loc::before,
  .obj_gallery::before,
  .obj_details::before,
  .obj_progress::before,
  .obj_visit::before,
  .obj_similar::before { left: 60px; }
  .big_block_home--object::after,
  .obj_main::after,
  .obj_loc::after,
  .obj_gallery::after,
  .obj_details::after,
  .obj_progress::after,
  .obj_visit::after,
  .obj_similar::after  { right: 60px; }

  /* Hero: 48 60 60 padding, breadcrumbs 16px, title 50px (max 926), sub 28px (max 926) */
  .obj_hero { padding: 48px 60px 60px; margin-left: -60px; margin-right: -60px; }
  .obj_hero__title { font-size: 50px; line-height: 110%; letter-spacing: 0.02em; max-width: 926px; margin-bottom: 20px; }
  .obj_hero__subtitle { font-size: 28px; line-height: 110%; letter-spacing: 0.02em; max-width: 926px; }
  .obj_hero__breadcrumbs { font-size: 16px; gap: 6px; margin-bottom: 25px; }

  /* Main 60px padding, content 1080 */
  .obj_main__inner { padding: 0 60px; }

  /* Concept row: text col 33%, image 67% â€” image 722Ã—479 */
  .obj_row--top { grid-template-columns: 33% 67%; height: auto; min-height: 480px; }
  .obj_col--text { padding: 30px 16px 0 20px; }
  .obj_col--photo { min-height: 479px; }
  .obj_col--photo img { height: 479px; min-height: 479px; }

  /* Bottom row: 2 photos (each ~340) + ÐœÐµÑÑ‚Ð¾Ð¿Ð¾Ð»Ð¾Ð¶ÐµÐ½Ð¸Ðµ (309) */
  .obj_row--bottom {
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 0;
    min-height: 496px;
  }
  .obj_col--photos { column-gap: 22px; }
  .obj_col--photos img { height: 496px; }
  .obj_row--bottom > .obj_col--photos { padding-top: 0; }
  .obj_row--bottom > .obj_col--text { padding: 220px 16px 0 30px; }

  /* Block titles 28px / body 16px, body max 309 to match figma wrapping */
  .obj_block__title { font-size: 28px; line-height: 110%; letter-spacing: 0.02em; margin: 0 0 20px; }
  .obj_block__text { font-size: 16px; line-height: 130%; max-width: 309px; }

  /* Location section: title 50px max 1036, map 1081Ã—632, overlay 511Ã—572 */
  .obj_loc { padding: 64px 60px; }
  .obj_loc__title { font-size: 50px; line-height: 110%; letter-spacing: 0.02em; max-width: 1036px; }
  .obj_loc__head { margin-bottom: 50px; }
  .obj_loc__map { max-width: 1081px; height: 632px; }
  .obj_loc__overlay { width: calc(50% - 30px); height: 572px; right: 30px; top: 30px; }
  .obj_loc__overlay-top { top: 35px; left: 30px; right: 30px; }
  .obj_loc__caption-text { font-size: 20px; }
  .obj_loc__caption-num { font-size: 28px; }
  .obj_loc__pin { width: 39px; height: 39px; }
  .obj_loc__pin::before { top: 2.5px; left: 2.5px; right: 2.5px; bottom: 2.5px; }
  .obj_loc__addr { font-size: 16px; padding: 5px 10px; }
  .obj_loc__marker { gap: 10px; top: 50%; left: 11%; }

  /* Gallery: figma 1078Ã—1024 = 502 + gap + 502, top row 358:704 */
  .obj_gallery { padding: 0 60px 60px; }
  .obj_gallery__row { margin-bottom: 20px; }
  .obj_gallery__row--top { grid-template-columns: 358fr 704fr; column-gap: 16px; }
  .obj_gallery__img { height: 502px; }

  /* Details: 1081Ã—514, title 50px (~55h), grid 3Ã—3 cells 137 tall */
  .obj_details { padding: 64px 60px; }
  .obj_details__title { font-size: 50px; line-height: 110%; letter-spacing: 0.02em; max-width: 1081px; }
  .obj_details__head { padding-bottom: 50px; margin-bottom: 0; }
  .obj_details__grid { grid-template-columns: 1fr 1fr 1fr; }
  .obj_details__cell { min-height: 137px; padding: 20px; gap: 9px; }
  .obj_details__label { font-size: 16px; line-height: 130%; }
  .obj_details__value { font-size: 20px; line-height: 110%; letter-spacing: 0.02em; }
  .obj_details__expand { width: 23px; height: 23px; bottom: 12px; right: 12px; }
  .obj_details__expand::before { width: 11px; }
  .obj_details__expand::after  { height: 11px; }

  /* Progress: 1200Ã—990, label 277 + photo 722Ã—479. Heading 28px */
  .obj_progress { padding: 0 60px; }
  .obj_progress__row { grid-template-columns: 33% 67%; padding-top: 30px; padding-bottom: 30px; }
  .obj_progress__label { padding: 0 32px 0 20px; }
  .obj_progress__heading { font-size: 28px; line-height: 110%; max-width: 277px; }
  .obj_progress__photo img { height: 479px; }

  /* Visit CTA: section 1200Ã—849, white card 843Ã—589 */
  .obj_visit { padding: 130px 60px; min-height: 849px; }
  .obj_visit__card {
    max-width: 843px;
    min-height: 589px;
    padding: 80px 28px;
  }
  .obj_visit__title { font-size: 50px; line-height: 110%; letter-spacing: 0.02em; max-width: 788px; margin: 0 0 20px; }
  .obj_visit__sub { font-size: 28px; line-height: 110%; letter-spacing: 0.02em; max-width: 575px; }
  .obj_visit__btn { font-size: 16px; height: 50px; line-height: 150%; letter-spacing: 0.05em; max-width: 437px; }
  .obj_visit__micro { font-size: 16px; line-height: 130%; max-width: 433px; margin-top: 20px; }

  /* Similar: 1200Ã—623, photos 347Ã—350. Names 28px, 3 cards */
  .obj_similar { padding: 64px 0 0; }
  .obj_similar__head { padding: 0 60px; margin-bottom: 50px; }
  .obj_similar__title { font-size: 50px; line-height: 110%; letter-spacing: 0.02em; max-width: 1026px; }
  .obj_similar__name { font-size: 28px; line-height: 110%; letter-spacing: 0.02em; min-height: 62px; margin-bottom: 30px; }
  .obj_similar__cell { padding-top: 28px; }
  .obj_similar__cell:nth-child(1) { padding-left: 60px; padding-right: 11px; }
  .obj_similar__cell:nth-child(2) { padding-left: 0; padding-right: 0; }
  .obj_similar__cell:nth-child(3) { padding-left: 0; padding-right: 60px; }
  .obj_similar__photo-wrap { width: 347px; max-width: 100%; height: 350px; }
  .obj_similar__photo { width: 100%; max-width: 347px; height: 350px; }
}

/* =========================================================
   ADAPTIVE â€” tablet â‰¤768
   ========================================================= */
/* Pixel-perfect to Figma 768_Object Investment (768x5526).
   Content padding 40px (688 content). Hero title 35px Felidae (max 679),
   subtitle 19.2px Felidae (max 514), breadcrumbs 12px Inter.
   Concept row: text 210 (12px Inter, 10 lines) | photo 454Ã—281.
   Bottom row: 2 photos (227+221, 10 gap) | text 218 (10 lines).
   Wide photo 689Ã—281. "ÐžÐ±ÑŠÐµÐºÑ‚ Ñ€Ð°ÑÐ¿Ð¾Ð»Ð¾Ð¶ÐµÐ½" 35px (max 693).
   Map 689Ã—403, overlay 324Ã—366. Gallery rows 321 height (235:444 + 689).
   Details 3Ã—3 grid cells ~74h, label 14px (#a6a6a6), value 14px ls 2%.
   Progress photos 453Ã—307, label 20px (181 wide).
   Visit card 534Ã—373, title 35px (max 499), sub 20px (max 459), btn 325Ã—30 (10px Felidae).
   Similar photos 225/211Ã—201, names 20px. */
@media (max-width: 768px) {
  /* Hide secondary navigation (ÐŸÑ€Ð¾ÐµÐºÑ‚Ñ‹/ÐšÐ°Ñ‚Ð°Ð»Ð¾Ð³/Ðž Ð½Ð°Ñ/ÐšÐ¾Ð½Ñ‚Ð°ÐºÑ‚Ñ‹ + burger) â€” Figma 768 has only top header */
  .big_block_home--object header .about_block .bottom_header { display: none !important; }

  /* Vertical rails at x=40 / x=728 */
  .big_block_home--object::before,
  .obj_main::before,
  .obj_loc::before,
  .obj_gallery::before,
  .obj_details::before,
  .obj_progress::before,
  .obj_visit::before,
  .obj_similar::before { left: 40px; }
  .big_block_home--object::after,
  .obj_main::after,
  .obj_loc::after,
  .obj_gallery::after,
  .obj_details::after,
  .obj_progress::after,
  .obj_visit::after,
  .obj_similar::after  { right: 40px; }

  /* Hero â€” centered, breadcrumbs 12px, title 35px (1 line), subtitle 19.2px (1 line) */
  .obj_hero { padding: 32px 40px 40px; margin-left: -40px; margin-right: -40px; }
  .obj_hero__breadcrumbs { font-size: 12px; gap: 6px; margin-bottom: 16px; }
  .obj_hero__title { font-size: 35px; line-height: 110%; letter-spacing: 0.02em; max-width: 679px; margin-bottom: 16px; }
  .obj_hero__subtitle { font-size: 19.2px; line-height: 110%; letter-spacing: 0.02em; max-width: 514px; }

  /* Main: padding 40px, content 688 */
  .obj_main__inner { padding: 0 40px; border: 0; }

  /* Concept row: text 210 (31%) | photo 454 (66%) */
  .obj_row--top {
    grid-template-columns: 31% 66%;
    column-gap: 21px;
    height: auto;
    min-height: 281px;
  }
  .obj_col--text { padding: 22px 0 0 0; }
  .obj_col--photo { min-height: 281px; }
  .obj_col--photo img { height: 281px; min-height: 281px; }

  /* Bottom row: 2 photos (227+221, 10 gap) | ÐœÐµÑÑ‚Ð¾Ð¿Ð¾Ð»Ð¾Ð¶ÐµÐ½Ð¸Ðµ text 218 */
  .obj_row--bottom {
    grid-template-columns: 458fr 218fr;
    column-gap: 14px;
    min-height: 311px;
    gap: 0;
  }
  .obj_col--photos {
    grid-template-columns: 1fr 1fr;
    column-gap: 10px;
  }
  .obj_col--photos img { height: 311px; }
  .obj_row--bottom > .obj_col--photos { padding-top: 0; grid-column: 1 / 2; }
  .obj_row--bottom > .obj_col--text { padding: 87px 0 0 0; grid-column: 2 / 3; }

  /* Block titles 20px Felidae / body 12px Inter, body max 218 */
  .obj_block__title { font-size: 20px; line-height: 110%; letter-spacing: 0.02em; margin: 0 0 11px; }
  .obj_block__text { font-size: 12px; line-height: 130%; max-width: 218px; }
  .obj_row--top .obj_block__text { max-width: 210px; }

  /* Location section: title 35px (max 693), map 689Ã—403, overlay 324Ã—366 */
  .obj_loc { padding: 30px 40px; }
  .obj_loc__head { margin-bottom: 30px; }
  .obj_loc__title { font-size: 35px; line-height: 110%; letter-spacing: 0.02em; max-width: 693px; }
  .obj_loc__map { max-width: 689px; height: 403px; }
  .obj_loc__overlay { width: calc(50% - 20px); height: 366px; right: 20px; top: 20px; }
  .obj_loc__overlay-top { top: 13px; left: 14.4px; right: 14.4px; }
  .obj_loc__caption-text { font-size: 14px; }
  .obj_loc__caption-num { font-size: 20px; }
  .obj_loc__pin { width: 25px; height: 25px; }
  .obj_loc__pin::before { top: 1.6px; left: 1.6px; right: 1.6px; bottom: 1.6px; }
  .obj_loc__pin svg { width: 13px; height: 13px; }
  .obj_loc__addr { font-size: 14px; padding: 4px 8px; }
  .obj_loc__marker { gap: 7px; top: 53%; left: 12%; }

  /* Gallery: rows 321 height, top row 235:444 (10 gap) */
  .obj_gallery { padding: 0 40px 30px; }
  .obj_gallery__row { margin-bottom: 10px; }
  .obj_gallery__row--top { grid-template-columns: 235fr 444fr; column-gap: 10px; row-gap: 0; }
  .obj_gallery__img { height: 321px; }

  /* Details: 689 wide, title 35px, grid 3Ã—3 cells ~228Ã—74. Label 14px (#a6a6a6), value 14px ls 2% */
  .obj_details { padding: 30px 40px; }
  .obj_details__title { font-size: 35px; line-height: 110%; letter-spacing: 0.02em; max-width: 693px; }
  .obj_details__head { padding-bottom: 32px; margin-bottom: 0; }
  .obj_details__grid { grid-template-columns: 1fr 1fr 1fr; }
  .obj_details__cell { min-height: 74px; padding: 11px 10px; gap: 5px; }
  .obj_details__label { font-size: 14px; line-height: 130%; color: #A6A6A6; }
  .obj_details__value { font-size: 14px; line-height: 110%; letter-spacing: 0.02em; }
  .obj_details__expand { width: 20px; height: 20px; bottom: 8px; right: 8px; }
  .obj_details__expand::before { width: 9px; }
  .obj_details__expand::after  { height: 9px; }

  /* Progress: 768x624. Label 20px (max 181), photo 453Ã—307. Grid 31:66 */
  .obj_progress { padding: 0 40px; }
  .obj_progress__row { grid-template-columns: 33% 65%; column-gap: 10px; padding-top: 20px; padding-bottom: 0; }
  .obj_progress__label { padding: 0 0 0 0; }
  .obj_progress__heading { font-size: 20px; line-height: 110%; max-width: 181px; }
  .obj_progress__photo img { height: 307px; }

  /* Visit CTA: 768Ã—533, white card 534Ã—373. Card padding 50 top/bot, ~28 sides */
  .obj_visit { padding: 80px 40px; min-height: 533px; }
  .obj_visit__card {
    max-width: 534px;
    min-height: 373px;
    padding: 50px 17.5px;
  }
  .obj_visit__title { font-size: 35px; line-height: 110%; letter-spacing: 0.02em; max-width: 499px; margin: 0 0 10px; }
  .obj_visit__sub { font-size: 20px; line-height: 110%; letter-spacing: 0.02em; max-width: 459px; }
  .obj_visit__btn { font-size: 10px; height: 30px; line-height: 150%; letter-spacing: 0.05em; max-width: 325px; }
  .obj_visit__micro { font-size: 12px; line-height: 130%; max-width: 325px; margin-top: 13px; }

  /* Similar: 768x441, title 35px (max 679, 3 lines). Photos 225/211/212Ã—201, names 20px.
     Layout: 41 + 225 + 20 + 211 + 20 + 212 + 39 = 768. */
  .obj_similar { padding: 40px 0 0; margin-bottom: 40px; }
  .obj_similar__head { padding: 0 40px; margin-bottom: 30px; }
  .obj_similar__title { font-size: 35px; line-height: 110%; letter-spacing: 0.02em; max-width: 679px; }
  .obj_similar__grid { grid-template-columns: 266fr 231fr 271fr; }
  .obj_similar__cell { padding: 19px 0 16px; }
  .obj_similar__cell:nth-child(1) { padding-left: 41px; padding-right: 0; }
  .obj_similar__cell:nth-child(2) { padding-left: 20px; padding-right: 0; }
  .obj_similar__cell:nth-child(3) { padding-left: 20px; padding-right: 39px; }
  .obj_similar__name { font-size: 20px; line-height: 110%; letter-spacing: 0.02em; min-height: 44px; margin-bottom: 32px; }
  .obj_similar__photo-wrap { width: 100%; max-width: 225px; height: 201px; }
  .obj_similar__photo { width: 100%; max-width: 225px; height: 201px; }
  .obj_similar__cell:nth-child(2) .obj_similar__photo-wrap,
  .obj_similar__cell:nth-child(2) .obj_similar__photo { max-width: 211px; }
  .obj_similar__cell:nth-child(3) .obj_similar__photo-wrap,
  .obj_similar__cell:nth-child(3) .obj_similar__photo { max-width: 212px; }
}

/* Pixel-perfect to Figma 360_Object Investment (360x7104).
   Content padding 25px (310 content). Hero title 30px Felidae 2 lines (max 332),
   subtitle 20px Felidae 4 lines ls 4% (max 332). Breadcrumbs 14px Inter (#A6A6A6).
   Single-column stacked layout. Body text 14px Inter (max 320).
   Concept/Location: photo 310Ã—220 above text. Section titles 30px Felidae.
   Map photo 310Ã—311, overlay 310Ã—366 stacked below. Wide gallery 360Ã—708.
   Details 2-col grid cells 165Ã—58. Progress photo 310Ã—275 stacked above label.
   Visit card 310Ã—549 padding 50/20. Similar stacked single column, photos 310Ã—260. */
@media (max-width: 360px) {
  /* Hide secondary navigation (ÐŸÑ€Ð¾ÐµÐºÑ‚Ñ‹/ÐšÐ°Ñ‚Ð°Ð»Ð¾Ð³/Ðž Ð½Ð°Ñ/ÐšÐ¾Ð½Ñ‚Ð°ÐºÑ‚Ñ‹ + burger) â€” Figma 360 has only top header */
  .big_block_home--object header .about_block .bottom_header { display: none !important; }

  /* Vertical rails at x=15 / x=345 */
  .big_block_home--object::before,
  .obj_main::before,
  .obj_loc::before,
  .obj_gallery::before,
  .obj_details::before,
  .obj_progress::before,
  .obj_visit::before,
  .obj_similar::before { left: 15px; }
  .big_block_home--object::after,
  .obj_main::after,
  .obj_loc::after,
  .obj_gallery::after,
  .obj_details::after,
  .obj_progress::after,
  .obj_visit::after,
  .obj_similar::after  { right: 15px; }

  /* Hero â€” 30px title (2 lines), 20px subtitle (~4 lines, ls 4%), breadcrumbs 14px */
  .obj_hero { padding: 24px 25px 40px; margin-left: -25px; margin-right: -25px; }
  .obj_hero__breadcrumbs { font-size: 14px; gap: 4px; margin-bottom: 16px; }
  .obj_hero__title { font-size: 30px; line-height: 110%; letter-spacing: 0.02em; max-width: 332px; margin-bottom: 10px; }
  .obj_hero__subtitle { font-size: 20px; line-height: 130%; letter-spacing: 0.04em; max-width: 332px; }

  /* Main: padding 25, content 310. Stacked single-column for both rows. */
  .obj_main__inner { padding: 0 25px; border: 0; }
  .obj_row--top, .obj_row--bottom {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 0;
    min-height: auto;
    height: auto;
  }
  .obj_col--photos {
    grid-template-columns: 1fr;
    grid-column: span 1;
    column-gap: 0;
    row-gap: 16px;
  }
  .obj_col--photos img { height: 220px; }
  .obj_col--photo { min-height: 220px; }
  .obj_col--photo img { height: 220px; min-height: 220px; }
  .obj_col--text { padding: 16px 0 24px 0; }
  .obj_row--bottom > .obj_col--photos {
    padding-top: 0;
    grid-column: auto;
  }
  .obj_row--bottom > .obj_col--text {
    padding: 16px 0 24px 0;
    grid-column: auto;
  }

  /* Block titles 20px / body 14px (~6 lines concept, ~9 lines location), max 320 */
  .obj_block__title { font-size: 20px; line-height: 110%; letter-spacing: 0.02em; margin: 0 0 16px; }
  .obj_block__text { font-size: 14px; line-height: 130%; max-width: 320px; }
  .obj_row--top .obj_block__text { max-width: 320px; }

  /* Location section: title 30px, map 310Ã—311, overlay 310Ã—366 stacked below */
  .obj_loc { padding: 30px 25px; }
  .obj_loc__head { margin-bottom: 24px; }
  .obj_loc__title { font-size: 30px; line-height: 110%; letter-spacing: 0.02em; max-width: 332px; }
  .obj_loc__body { display: block; }
  .obj_loc__map { width: 100%; max-width: 310px; height: 311px; margin: 0 auto; }
  .obj_loc__overlay {
    position: relative;
    right: auto; top: auto;
    width: 100%; max-width: 310px; height: 366px;
    margin: 16px auto 0;
  }
  .obj_loc__overlay-top { top: 14px; left: 11px; right: 11px; }
  .obj_loc__caption-text { font-size: 14px; }
  .obj_loc__caption-num { font-size: 20px; }
  .obj_loc__pin { width: 39px; height: 39px; }
  .obj_loc__pin::before { top: 2.5px; left: 2.5px; right: 2.5px; bottom: 2.5px; }
  .obj_loc__pin svg { width: 16px; height: 16px; }
  .obj_loc__addr { font-size: 14px; padding: 6px 8px; }
  .obj_loc__marker { gap: 8px; top: 53%; left: 30%; transform: translateY(-50%); }

  /* Gallery: stacked single column, all images 310Ã—220 */
  .obj_gallery { padding: 0 25px 30px; }
  .obj_gallery__row { margin-bottom: 16px; }
  .obj_gallery__row--top { grid-template-columns: 1fr; row-gap: 16px; }
  .obj_gallery__img { height: 220px; }

  /* Details: 30px title, 2-col grid cells 165Ã—58. Label 12px (#A6A6A6), value 14px */
  .obj_details { padding: 30px 25px; }
  .obj_details__title { font-size: 30px; line-height: 110%; letter-spacing: 0.02em; max-width: 332px; }
  .obj_details__head { padding-bottom: 24px; margin-bottom: 0; }
  .obj_details__grid { grid-template-columns: 1fr 1fr; }
  .obj_details__cell {
    min-height: 58px;
    padding: 9px 10px;
    gap: 4px;
    border-right: 1.6px solid #E1E1E1;
    border-bottom: 1.6px solid #E1E1E1;
  }
  .obj_details__cell:nth-child(2n) { border-right: 0 !important; }
  .obj_details__cell:nth-last-child(-n+2) { border-bottom: 0; }
  .obj_details__cell:last-child { border-bottom: 0 !important; }
  .obj_details__label { font-size: 12px; line-height: 130%; color: #A6A6A6; }
  .obj_details__value { font-size: 14px; line-height: 110%; letter-spacing: 0.02em; }
  .obj_details__expand { width: 17px; height: 17px; bottom: 5px; right: 5px; }
  .obj_details__expand::before { width: 8px; }
  .obj_details__expand::after  { height: 8px; }

  /* Progress: stacked. Label 20px (max 271), photo 310Ã—275 */
  .obj_progress { padding: 0 25px; }
  .obj_progress__row { grid-template-columns: 1fr; column-gap: 0; row-gap: 16px; padding-top: 24px; padding-bottom: 0; }
  .obj_progress__label { padding: 0; }
  .obj_progress__heading { font-size: 20px; line-height: 110%; letter-spacing: 0.02em; max-width: 271px; }
  .obj_progress__photo img { height: 275px; }

  /* Visit CTA: 360Ã—709, white card 310Ã—549 */
  .obj_visit { padding: 80px 25px; min-height: 709px; }
  .obj_visit__card {
    max-width: 310px;
    min-height: 549px;
    padding: 50px 20px;
  }
  .obj_visit__title { font-size: 30px; line-height: 110%; letter-spacing: 0.02em; max-width: 250px; margin: 0 0 16px; }
  .obj_visit__sub { font-size: 14px; line-height: 130%; letter-spacing: 0; max-width: 276px; }
  .obj_visit__btn { font-size: 14px; height: 50px; line-height: 130%; letter-spacing: 0.05em; max-width: 270px; }
  .obj_visit__micro { font-size: 12px; line-height: 130%; max-width: 236px; margin-top: 16px; }

  /* Similar: stacked single column, photos 310Ã—260, names 20px */
  .obj_similar { padding: 30px 0 0; margin-bottom: 30px; }
  .obj_similar__head { padding: 0 25px; margin-bottom: 24px; }
  .obj_similar__title { font-size: 30px; line-height: 110%; letter-spacing: 0.02em; max-width: 332px; }
  .obj_similar__grid { grid-template-columns: 1fr; }
  .obj_similar__cell {
    border-right: 0;
    border-bottom: 1.6px solid #E1E1E1;
    padding: 16px 25px !important;
  }
  .obj_similar__cell:last-child { border-bottom: 0; }
  .obj_similar__name { font-size: 20px; line-height: 110%; letter-spacing: 0.02em; min-height: auto; margin-bottom: 16px; }
  .obj_similar__photo-wrap { width: 100%; max-width: 310px; height: 260px; }
  .obj_similar__photo { width: 100%; max-width: 310px; height: 260px; }
  .obj_similar__cell:nth-child(2) .obj_similar__photo-wrap,
  .obj_similar__cell:nth-child(2) .obj_similar__photo,
  .obj_similar__cell:nth-child(3) .obj_similar__photo-wrap,
  .obj_similar__cell:nth-child(3) .obj_similar__photo { max-width: 310px; }
}

/* === obj_similar carousel â€” neutralise legacy 3-col grid overrides ===
   The @media (max-width:1200/900/720) blocks above were authored for the
   original Figma 3-cell grid (.obj_similar__grid + nth-child paddings +
   fixed photo widths). The carousel variant uses slidesPerView:'auto' with
   320px cards, so we force-reset those rules whenever the section carries
   the .obj_similar--carousel modifier. Last in the file â†’ wins the cascade. */
.obj_similar--carousel .obj_similar__cell {
    padding: 0 !important;
    border: 0 !important;
    width: 320px !important;
    max-width: 320px !important;
}
.obj_similar--carousel .obj_similar__photo-wrap {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    aspect-ratio: 4 / 3;
}
.obj_similar--carousel .obj_similar__photo {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
}
@media (max-width: 1200px) {
    .obj_similar--carousel { padding: 56px 0 48px; }
    .obj_similar--carousel .obj_similar__head { padding: 0 60px; }
    .obj_similar--carousel .obj_similar__title { font-size: 36px; }
    .obj_similar--carousel .obj_similar__carousel { padding: 0 60px; }
    .obj_similar--carousel .obj_similar__nav--prev { left: 18px; }
    .obj_similar--carousel .obj_similar__nav--next { right: 18px; }
    .obj_similar::before { left: 60px; }
    .obj_similar::after  { right: 60px; }
}
@media (max-width: 720px) {
    .obj_similar--carousel .obj_similar__cell { width: 260px !important; max-width: 260px !important; }
    .obj_similar--carousel .obj_similar__head { padding: 0 24px; }
    .obj_similar--carousel .obj_similar__carousel { padding: 0 24px; }
    .obj_similar--carousel .obj_similar__title { font-size: 28px; }
    .obj_similar--carousel .obj_similar__nav { width: 38px; height: 38px; }
    .obj_similar--carousel .obj_similar__nav--prev { left: 6px; }
    .obj_similar--carousel .obj_similar__nav--next { right: 6px; }
}

/* === obj_loc map marker â€” clickable variant + arrows + per-slide labels ===
   When the project has a Google Maps URL, the marker is rendered as an <a>
   with the .obj_loc__marker--linked class â€” give it pointer-events:auto and
   a pointer cursor so the whole pin (not just the address chip) is clickable. */
.obj_loc__marker--linked {
    cursor: pointer;
    pointer-events: auto !important;
    text-decoration: none;
}
.obj_loc__marker--linked .obj_loc__pin {
    transition: transform .2s ease, box-shadow .2s ease;
}
.obj_loc__marker--linked:hover .obj_loc__pin {
    transform: scale(1.08);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

/* Per-slide label â€” single instance, pinned to the bottom-left of each
   photo with a subtle gradient so it reads on both light and dark images.
   Lives inside the swiper-slide (one label per slide), sourced from
   inm_loc_slide_labels[i] or falling back to inm_loc_caption. The slide
   counter (.obj_loc__caption-num) sits in the top-right overlay-top â€” the
   two no longer collide. */
.obj_loc__slide-label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    padding: 56px 28px 22px;
    color: #FFFFFF;
    font-family: "Inter", sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 130%;
    letter-spacing: 0.02em;
    pointer-events: none;
    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);
}

/* Interactive map container (Leaflet). The wrapper .obj_loc__map already
   provides the box; .obj_loc__leaflet just fills it. Apply a light grayscale
   filter so the tiles match the muted palette of the rest of the page. */
.obj_loc__leaflet {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: #F4F4F4;
    filter: saturate(0.45) contrast(1.02);
}
.obj_loc__leaflet .leaflet-control-attribution {
    font-size: 10px;
    background: rgba(255,255,255,0.7);
}
/* Custom map pin â€” pulsing concentric ring + solid core. divIcon classes
   sit on the marker element itself; the inner spans are positioned via the
   wrapper. */
.proj-loc-pin {
    background: none !important;
    border: 0 !important;
}
.proj-loc-pin__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(181, 140, 77, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: proj-loc-pin-pulse 1.8s ease-out infinite;
    cursor: pointer;
}
.proj-loc-pin__core {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #b58c4d;
    box-shadow: 0 0 0 4px #FFFFFF;
}
@keyframes proj-loc-pin-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(181, 140, 77, 0.45); }
    70%  { box-shadow: 0 0 0 18px rgba(181, 140, 77, 0); }
    100% { box-shadow: 0 0 0 0 rgba(181, 140, 77, 0); }
}

/* Prev/next arrows inside the location slider. Sit centred vertically inside
   the overlay; hide automatically via Swiper's swiper-button-disabled when at
   the start or end (we're using loop:true so they stay visible). */
.obj_loc__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: 1.6px solid rgba(255, 255, 255, 0.95);
    color: #232323;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}
.obj_loc__nav:hover { background: #010101; color: #FFFFFF; border-color: #010101; }
.obj_loc__nav--prev { left: 16px; }
.obj_loc__nav--next { right: 16px; }

/* Responsive overrides for the obj_loc map + photo overlay. The desktop
   layout (defined further up) keeps the photo at a generous 38%/580px width
   so it never reads as a thin sliver. Side-by-side flips to a clean
   vertical stack at â‰¤900px, where the map and the photo each take their
   own row. There are no intermediate "shrink the overlay" breakpoints in
   between â€” those made the photo look anaemic on common laptop widths. */
@media (max-width: 900px) {
    /* Keep the side-by-side composition (map left, photo right) so the pin
       stays visible in the LEFT half. Shrink the overall map height and the
       overlay insets so neither half feels cramped. We do NOT switch to a
       stacked layout here â€” that hid the pin behind the photo. */
    .obj_loc__map {
        aspect-ratio: auto;
        height: clamp(320px, 55vw, 480px);
    }
    .obj_loc__overlay {
        top: 12px;
        right: 12px;
        bottom: 12px;
        width: calc(50% - 12px);
    }
    .obj_loc__overlay-top {
        top: 14px;
        left: 14px;
        right: 14px;
    }
}
@media (max-width: 600px) {
    /* Mobile composition: map is shown at its full height, then the photo
       starts at 75% of the map's height â€” overlapping the bottom 25% of the
       map and extending fully below. Both elements become relative blocks
       (the leaflet was absolute/inset:0 before) and we pull the overlay up
       with a negative margin equal to 25% of the map height. overflow visible
       on the wrapper lets the overlap render past the map's own box. */
    .obj_loc__map {
        --map-h: clamp(260px, 55vh, 360px);
        aspect-ratio: auto;
        height: auto;
        overflow: visible;
        background: transparent;
        position: relative;
    }
    .obj_loc__leaflet {
        position: relative;
        inset: auto;
        width: 100%;
        height: var(--map-h);
    }
    .obj_loc__body { flex-direction: column; }
    .obj_loc__overlay {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        width: 100%;
        height: clamp(240px, 45vh, 340px);
        /* Overlap the bottom 25% of the map. The photo keeps 100% of its
           own height; only the top quarter of it sits on top of the map. */
        margin-top: calc(var(--map-h) * -0.25);
        z-index: 3;
        box-shadow: 0 -12px 24px rgba(0, 0, 0, 0.18);
    }
}

/* === obj_loc__slider â€” Ð¼ÑƒÐ»ÑŒÑ‚Ð¸-Ñ„Ð¾Ñ‚Ð¾ ÑÐ»Ð°Ð¹Ð´ÐµÑ€ Ð½Ð° ÑÑ‚Ñ€Ð°Ð½Ð¸Ñ†Ðµ Ð¾Ð±ÑŠÐµÐºÑ‚Ð° (prod fix) === */
.obj_loc__slider {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
}
.obj_loc__slider .swiper-wrapper,
.obj_loc__slider .swiper-slide {
    width: 100%;
    height: 100%;
}
.obj_loc__slider .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* =========================================================
   OBJ-CLEAN — Single property layout (Resales-driven).
   Activated by $GLOBALS['inmolux_bb_variant'] = 'buy object obj-clean'
   in single-inm_property.php. Cleans up the legacy Figma layout:
   - kills the vertical rails + horizontal dividers ("lineas por la cara")
   - replaces fixed pixel paddings with fluid clamp() values so the page
     scales gracefully from 1366 to 2560+ monitors
   - reorders sections: hero -> details -> main image -> description ->
     gallery -> map -> visit CTA -> similar carousel
   - hides the legacy map photo overlay so the Leaflet map fills width
   ========================================================= */

/* --- Rails OFF everywhere on this page --- */
body:has(.big_block_home--obj-clean) .obj_main::before,
body:has(.big_block_home--obj-clean) .obj_main::after,
body:has(.big_block_home--obj-clean) .obj_loc::before,
body:has(.big_block_home--obj-clean) .obj_loc::after,
body:has(.big_block_home--obj-clean) .obj_gallery::before,
body:has(.big_block_home--obj-clean) .obj_gallery::after,
body:has(.big_block_home--obj-clean) .obj_details::before,
body:has(.big_block_home--obj-clean) .obj_details::after,
body:has(.big_block_home--obj-clean) .obj_progress::before,
body:has(.big_block_home--obj-clean) .obj_progress::after,
body:has(.big_block_home--obj-clean) .obj_visit::before,
body:has(.big_block_home--obj-clean) .obj_visit::after,
body:has(.big_block_home--obj-clean) .obj_similar::before,
body:has(.big_block_home--obj-clean) .obj_similar::after,
.big_block_home--obj-clean::before,
.big_block_home--obj-clean::after {
    content: none !important;
    display: none !important;
    background: none !important;
    border: 0 !important;
}

/* --- Hero: dynamic margins, no bottom border --- */
.big_block_home--obj-clean .obj_hero {
    padding: clamp(48px, 5vw, 120px) clamp(32px, 5vw, 160px) clamp(32px, 3vw, 64px);
    margin-left: 0;
    margin-right: 0;
    border-bottom: 0;
}
.big_block_home--obj-clean .obj_hero__title {
    font-size: clamp(36px, 4.5vw, 80px);
    max-width: min(1482px, 92%);
    margin-bottom: clamp(12px, 1.2vw, 24px);
}
.big_block_home--obj-clean .obj_hero__subtitle {
    font-size: clamp(18px, 2vw, 36px);
    max-width: min(1200px, 90%);
}
.big_block_home--obj-clean .obj_hero__breadcrumbs {
    font-size: clamp(13px, 1.1vw, 22px);
    margin-bottom: clamp(16px, 1.6vw, 32px);
}

/* --- Details (now top of page, no head/subheading) --- */
body:has(.big_block_home--obj-clean) .obj_details--top {
    padding: clamp(24px, 2.5vw, 56px) clamp(32px, 5vw, 96px) clamp(40px, 4vw, 80px);
    max-width: 1920px;
    margin: 0 auto;
}
body:has(.big_block_home--obj-clean) .obj_details--top .obj_details__head {
    display: none;
}
body:has(.big_block_home--obj-clean) .obj_details__grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: clamp(14px, 1.2vw, 24px);
    border-bottom: 0;
}
body:has(.big_block_home--obj-clean) .obj_details__cell {
    border: 0 !important;
    padding: clamp(16px, 1.4vw, 28px);
    min-height: 0;
    background: #FAFAFA;
}
body:has(.big_block_home--obj-clean) .obj_details__label {
    font-size: clamp(13px, 1vw, 18px);
    color: rgba(1,1,1,0.5);
}
body:has(.big_block_home--obj-clean) .obj_details__value {
    font-size: clamp(16px, 1.3vw, 26px);
}
body:has(.big_block_home--obj-clean) .obj_details__expand { display: none; }

/* --- Main image (full feature shot under the details grid) --- */
.obj_main_image {
    width: 100%;
    background: #FFFFFF;
    padding: 0 clamp(32px, 5vw, 96px);
    box-sizing: border-box;
}
.obj_main_image__inner {
    max-width: 1920px;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}
.obj_main_image__inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
@media (max-width: 900px) {
    .obj_main_image__inner { aspect-ratio: 4 / 3; }
}

/* --- Description block --- */
.obj_desc {
    background: #FFFFFF;
    padding: clamp(48px, 5vw, 96px) clamp(32px, 5vw, 96px);
}
.obj_desc__inner {
    max-width: 1100px;
    margin: 0 auto;
}
.obj_desc__title {
    font-family: "Felidae", "Cormorant Garamond", serif;
    font-weight: 400;
    font-size: clamp(28px, 3vw, 56px);
    line-height: 110%;
    letter-spacing: 0.02em;
    color: #010101;
    margin: 0 0 clamp(20px, 2vw, 40px);
    text-transform: none;
}
.obj_desc__body {
    font-family: "Inter", sans-serif;
    font-weight: 300;
    font-size: clamp(15px, 1.1vw, 20px);
    line-height: 1.6;
    color: #3C3C3B;
}
.obj_desc__body p { margin: 0 0 1em; }
.obj_desc__body p:last-child { margin-bottom: 0; }

/* --- Map-only location (no photo overlay) --- */
body:has(.big_block_home--obj-clean) .obj_loc--map-only .obj_loc__overlay,
body:has(.big_block_home--obj-clean) .obj_loc--map-only .obj_loc__marker {
    display: none !important;
}
body:has(.big_block_home--obj-clean) .obj_loc--map-only .obj_loc__map {
    max-width: 1600px;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
}
body:has(.big_block_home--obj-clean) .obj_loc {
    padding: clamp(48px, 4vw, 96px) clamp(32px, 5vw, 96px);
}
body:has(.big_block_home--obj-clean) .obj_loc__title {
    font-size: clamp(28px, 3vw, 56px);
    max-width: 1200px;
}

/* --- Progress: no top border --- */
body:has(.big_block_home--obj-clean) .obj_progress {
    border-top: 0;
    padding: 0 clamp(32px, 5vw, 96px);
}

/* --- Visit CTA: fluid padding --- */
body:has(.big_block_home--obj-clean) .obj_visit {
    padding: clamp(80px, 8vw, 140px) clamp(32px, 5vw, 96px);
}

/* --- Similar carousel: fluid padding --- */
body:has(.big_block_home--obj-clean) .obj_similar--carousel {
    padding: clamp(48px, 4vw, 96px) 0;
}
body:has(.big_block_home--obj-clean) .obj_similar--carousel .obj_similar__head {
    padding: 0 clamp(32px, 5vw, 96px);
}
body:has(.big_block_home--obj-clean) .obj_similar--carousel .obj_similar__carousel {
    padding: 0 clamp(32px, 5vw, 96px);
}

/* --- Gallery aligned with the same fluid container --- */
body:has(.big_block_home--obj-clean) .proj_gallery {
    max-width: 1920px;
    margin: 0 auto;
    padding: clamp(48px, 4vw, 96px) clamp(32px, 5vw, 96px);
}
body:has(.big_block_home--obj-clean) .proj_gallery__title {
    font-size: clamp(28px, 3vw, 56px);
    text-align: center;
    margin-bottom: clamp(28px, 2.5vw, 56px);
}

@media (max-width: 900px) {
    body:has(.big_block_home--obj-clean) .obj_details__grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
}


/* --- Features list (bullets under the after-gallery description) --- */
.obj_features__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: clamp(10px, 1vw, 20px);
    font-family: "Inter", sans-serif;
    font-weight: 300;
    font-size: clamp(15px, 1.1vw, 18px);
    color: #3C3C3B;
}
.obj_features__list li {
    position: relative;
    padding: 10px 0 10px 22px;
    border-bottom: 1px solid #ECECEC;
}
.obj_features__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 8px;
    height: 8px;
    background: #b58c4d;
    border-radius: 50%;
    transform: translateY(-50%);
}
.obj_desc__title--features {
    margin-top: clamp(28px, 3vw, 56px);
}
/* obj_desc--below: same padding shell as obj_desc but tighter on top so
   it visually links with the gallery sitting just above it. */
.obj_desc--below { padding-top: clamp(32px, 3vw, 64px); }

/* --- Mobile gallery: collapse to 3 cells (2 normal + 1 teaser).
       The PHP renders the desktop teaser/hidden classes on cells 4-5/6+;
       on phones we reset those and use nth-child to redraw the boundaries
       so the third cell is the teaser and everything from cell 4 disappears.
       Targets only the obj-clean property page to leave the project gallery
       untouched. --- */
@media (max-width: 720px) {
    body:has(.big_block_home--obj-clean) .proj_gallery__grid[data-state="collapsed"] .proj_gallery__cell {
        max-height: none;
        aspect-ratio: 4 / 3;
        display: block;
    }
    body:has(.big_block_home--obj-clean) .proj_gallery__grid[data-state="collapsed"] .proj_gallery__cell::after {
        content: none;
    }
    body:has(.big_block_home--obj-clean) .proj_gallery__grid[data-state="collapsed"] .proj_gallery__cell:nth-child(3) {
        max-height: 160px;
        aspect-ratio: auto;
        position: relative;
    }
    body:has(.big_block_home--obj-clean) .proj_gallery__grid[data-state="collapsed"] .proj_gallery__cell:nth-child(3)::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom, transparent 0%, rgba(255,255,255,0.65) 55%, rgba(255,255,255,0.98) 100%);
        pointer-events: none;
    }
    body:has(.big_block_home--obj-clean) .proj_gallery__grid[data-state="collapsed"] .proj_gallery__cell:nth-child(n+4) {
        display: none !important;
    }
}


/* --- "Ver más características" button + features modal ----------------
   Modal follows the same visual idiom as proj_lightbox (dark backdrop +
   white card) but smaller and uppercase Felidae title to match the
   property page's typography. body.obj-features-modal-open locks
   scrolling while the popup is on screen. */
.obj_features__more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: clamp(20px, 2vw, 36px) 0 0;
    padding: 12px 28px;
    background: transparent;
    border: 1px solid #010101;
    color: #010101;
    font-family: "Inter", sans-serif;
    font-size: 13px;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}
.obj_features__more:hover { background: #010101; color: #FFFFFF; }
.obj_features__more-count { opacity: .65; }

body.obj-features-modal-open { overflow: hidden; }

.obj_features_modal {
    position: fixed;
    inset: 0;
    background: rgba(8, 10, 14, 0.86);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(16px, 4vw, 48px);
    box-sizing: border-box;
}
.obj_features_modal[hidden] { display: none; }

.obj_features_modal__card {
    position: relative;
    background: #FFFFFF;
    width: 100%;
    max-width: 720px;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    padding: clamp(40px, 5vw, 64px) clamp(28px, 4vw, 56px);
    box-sizing: border-box;
}
.obj_features_modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    border: 1px solid #E1E1E1;
    border-radius: 50%;
    background: #FFFFFF;
    color: #232323;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
    padding: 0;
}
.obj_features_modal__close:hover {
    background: #010101;
    border-color: #010101;
    color: #FFFFFF;
}

.obj_features_modal__title {
    font-family: "Felidae", "Cormorant Garamond", serif;
    font-weight: 400;
    font-size: clamp(26px, 2.4vw, 40px);
    line-height: 110%;
    letter-spacing: 0.02em;
    color: #010101;
    margin: 0 0 clamp(20px, 2vw, 36px);
    text-transform: none;
    padding-right: 48px; /* room for the close button */
}

.obj_features__list--full {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

@media (max-width: 720px) {
    .obj_features_modal__card {
        padding: 56px 20px 24px;
        max-height: calc(100vh - 32px);
    }
    .obj_features__list--full {
        grid-template-columns: 1fr;
    }
}
