/* =============================================================
   BLOOM LIVING — Main Styles
   Units: em  (1em = 16px at design width, scales via --size-font)
   BEM: block__element--modifier
   Desktop-first: 1440 → 1024 → 360
   ============================================================= */

/* =====================================================
   BASE
   ===================================================== */

html {
  overflow-x: clip; /* prevents horizontal scroll without breaking sticky */
}

body {
  font-family: var(--font);
  font-size: var(--size-font);
  color: var(--color-navy);
  background-color: var(--color-bege);
  line-height: 1.5;
}

.container {
  width: 100%;
  margin: 0 auto;
  max-width: var(--size-container);
  padding: 0 3.125em; /* 50px @ 1440 */
}

/* =====================================================
   SHARED: BUTTONS
   Block: btn
   ===================================================== */

/*
 * Base pill shape — dimensions from Figma SVG:
 * 140 × 43px, border-radius 21.5px (= height / 2 = perfect pill)
 *
 * em values are relative to this element's own font-size (0.75em = 12px @ 1440):
 *   height  43px → 43 / 12 = 3.5833em
 *   padding 0 → height achieved via line-height + top/bottom padding
 *   h-padding 22px (140px artboard – ~96px text / 2) → 22 / 12 = 1.8333em
 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  height: 3.5833em;     /* 43px at own 12px font-size */
  padding: 0 1.8333em;  /* 22px horizontal */
  border-radius: var(--radius-pill);
  font-family: var(--font);
  font-size: 0.75em;    /* 12px */
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  border: none;
  cursor: pointer;
  transition: opacity var(--ease);
  text-decoration: none;
}

.btn:hover { opacity: 0.85; }

.btn__icon {
  width: 1em;   /* scales with btn font-size (12px) */
  height: 1em;
  flex-shrink: 0;
}

/* Generic utility modifiers (used in footer, contact form, etc.) */
.btn--dark  { background-color: var(--color-navy);   color: var(--color-white); }
.btn--white { background-color: var(--color-white);  color: var(--color-navy);  }
.btn--navy  {
  background-color: var(--color-navy); color: var(--color-white);
  width: 100%; height: auto;
  padding: 0.875em 1.25em; font-size: 0.875em;
}

/*
 * CTA pill buttons — exact shape from SVG, only fill differs:
 *   btn--book    → #EF8354 (orange)   — "Book a Visit"
 *   btn--reserve → #172A34 (navy)     — "Reserve now"
 */
/*
 * btn--book: navy pill, arrow icon (↗) + "Book a Visit"
 * SVG dimensions: 130×43px — arrow left edge 15px, text left edge 46px
 *   left-padding:  15px / 12px = 1.25em
 *   icon→text gap: 18px / 12px = 1.5em
 *   right-padding: 14px / 12px = 1.1667em
 */
.btn--book {
  background-color: var(--color-navy);
  color: var(--color-white);
  padding: 0 1.1667em 0 1.25em;
  gap: 1.5em;
}

/* Colour override — applies on top of any btn--book/btn--dark */
.btn--orange { background-color: var(--color-orange); color: var(--color-white); }
.btn--reserve {
  background-color: transparent;
  border: 0.0833em solid var(--color-orange); /* ~1px at btn's own 12px */
  color: var(--color-orange);
}

/* =====================================================
   SHARED: SECTION HEADER
   Block: section-header
   ===================================================== */

.section-header {
  text-align: center;
  margin-bottom: 5.875em; /* 160px */
}

.section-header__title {
  font-size: 3.375em; /* 54px */
  font-weight: 400;
  line-height: 1.1;
  color: var(--color-navy);
  margin-bottom: 1em; /* relative to 54px = 54px gap */
}

.section-header__subtitle {
  font-size: 1.125em; /* 18px */
  color: var(--color-text-60);
  line-height: 1.3;
  max-width: 39.6875em; /* 635px */
  margin: 0 auto;
}

/* Colour modifier shared across headings */
.t-orange { color: var(--color-orange); }
.t-muted  { color: #727878; }

/* =====================================================
   HERO
   Block: hero
   ===================================================== */

.hero {
  padding: 0.75em; /* 12px */
  height: 100vh;
}

.hero__wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75em;     /* 12px — matches hero padding, matches Figma */
  height: 100%;
  border-radius: var(--radius-xs);
  overflow: hidden;
}

/* --- Left panel --- */
.hero__panel {
  background-color: var(--color-orange);
  display: flex;
  flex-direction: column;
  padding: 1.75em; /* 28px */
  border-radius: var(--radius-xs); /* all corners — gap separates panels */
}

.hero__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hero__logo img {
  height: 1.4375em; /* 23px */
  width: auto;
}

.hero__nav-controls {
  display: flex;
  align-items: center;
  gap: 0.375em; /* 6px */
}

/* Lang button */
.lang-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.1667em;   /* 38px @ font-size 12px */
  height: 3.1667em;
  border-radius: var(--radius-pill);
  border: 0.0625em solid var(--color-navy); /* 1px */
  font-family: var(--font);
  font-size: 0.75em; /* 12px */
  color: var(--color-navy);
  background: transparent;
  cursor: pointer;
  padding: 0;
}

/* Nav toggle (three bars → X) */
.lang-btn--dropdown {
  flex-direction: column;
  justify-content: center;
  gap: 0.35em;    /* ~4px between bars */
  padding: 0.6em; /* inner breathing room */
}

.lang-btn__bar {
  display: block;
  width: 100%;
  height: 0.09375em; /* 1.5px */
  background-color: var(--color-navy);
  transition: transform var(--ease-md), opacity var(--ease-md);
  transform-origin: center;
}

/* X state — translateY = gap + bar-height = (0.35 + 0.09375) ≈ 0.44em */
.lang-btn--dropdown--open .lang-btn__bar:nth-child(1) { transform: translateY(0.44em) rotate(45deg); }
.lang-btn--dropdown--open .lang-btn__bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.lang-btn--dropdown--open .lang-btn__bar:nth-child(3) { transform: translateY(-0.44em) rotate(-45deg); }

/* Hero content */
.hero__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 8em;             /* 128px entre título e subtítulo */
  padding-top: 5em;     /* 80px */
  padding-bottom: 7.5em;/* 120px margin bottom */
  max-width: 29.3125em; /* 469px */
}

.hero__eyebrow {
  font-size: 0.875em; /* 14px */
  color: var(--color-navy);
  margin-bottom: 0.5em;
  line-height: 1.3;
}

.hero__title {
  font-size: 5em;     /* 80px */
  font-weight: 400;
  line-height: 1;
  color: var(--color-white);
}

.hero__bottom {
  display: flex;
  flex-direction: column;
  gap: 1.5em; /* 24px */
}

.hero__subtitle {
  font-size: 1.125em; /* 18px */
  color: var(--color-navy);
  line-height: 1.3;
  max-width: 26.25em; /* 420px */
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: 0.5em; /* 8px */
  flex-wrap: wrap;
}

/* --- Right panel: building photo --- */
.hero__photo {
  overflow: hidden;
  border-radius: var(--radius-xs);
}

.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Mobile nav overlay --- */
.mobile-nav {
  /* Clip-path controls visibility — no display toggle needed */
  display: flex;
  position: fixed;
  inset: 0;
  background: var(--color-bege);
  z-index: 200;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2.5em;

  /* Closed state */
  visibility: hidden;
  pointer-events: none;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.6s cubic-bezier(0.76, 0, 0.24, 1),
              visibility 0s 0.6s;
}

.mobile-nav--open {
  visibility: visible;
  pointer-events: auto;
  clip-path: inset(0 0 0% 0);
  transition: clip-path 0.6s cubic-bezier(0.76, 0, 0.24, 1),
              visibility 0s 0s;
}

/* Decorative brand blob */
.mobile-nav__blob {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 65% 55% at 80% 85%, rgba(239, 131, 84, 0.14) 0%, transparent 65%),
    radial-gradient(ellipse 40% 40% at 15% 15%, rgba(240, 228, 211, 0.7) 0%, transparent 60%);
  transform: scale(0.85);
  transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

.mobile-nav--open .mobile-nav__blob { transform: scale(1); }

/* Close button */
.mobile-nav__close {
  position: absolute;
  top: 1.75em;
  right: 1.75em;
  width: 2.375em;
  height: 2.375em;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0.0625em solid var(--color-navy);
  border-radius: var(--radius-pill);
  cursor: pointer;
  color: var(--color-navy);
  opacity: 0;
  transform: rotate(-45deg) scale(0.7);
  transition: color var(--ease), border-color var(--ease), background-color var(--ease);
}

.mobile-nav__close:hover {
  background-color: var(--color-navy);
  color: var(--color-white);
}

@keyframes close-in {
  to { opacity: 1; transform: rotate(0deg) scale(1); }
}

.mobile-nav--open .mobile-nav__close {
  animation: close-in 0.45s 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Nav list */
.mobile-nav__list {
  display: flex;
  flex-direction: column;
  gap: 2em;
  text-align: center;
}

/* Links */
.mobile-nav__link {
  font-size: 2.5em; /* 40px */
  font-weight: 400;
  color: var(--color-navy);
  display: inline-block;
  position: relative;
  opacity: 0;
  transform: translateY(16px);
  transition: color 0.25s ease;
  text-decoration: none;
}

/* Underline that slides in from the left on hover */
.mobile-nav__link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: var(--color-orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.mobile-nav__link:hover { color: var(--color-orange); }
.mobile-nav__link:hover::after { transform: scaleX(1); }

/* Staggered entrance animation */
@keyframes link-in {
  to { opacity: 1; transform: translateY(0); }
}

.mobile-nav--open li:nth-child(1) .mobile-nav__link { animation: link-in 0.5s 0.22s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.mobile-nav--open li:nth-child(2) .mobile-nav__link { animation: link-in 0.5s 0.31s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.mobile-nav--open li:nth-child(3) .mobile-nav__link { animation: link-in 0.5s 0.40s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.mobile-nav--open li:nth-child(4) .mobile-nav__link { animation: link-in 0.5s 0.49s cubic-bezier(0.22, 1, 0.36, 1) forwards; }

/* =====================================================
   ABOUT
   Block: about
   ===================================================== */

.about__media {
  height: 40em; /* 640px */
  overflow: hidden;
}

.about__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about__text {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2.5em;
  padding-top: 7.5em;  /* 120px */
  padding-bottom: 5em;
}

.about__title {
  font-size: 2.5em; /* 40px */
  font-weight: 400;
  line-height: 1.1;
  color: var(--color-navy);
  max-width: 35.1875em; /* 563px */
  min-width: 0;
}

.about__body {
  font-size: 1.125em; /* 18px */
  color: var(--color-text-60);
  line-height: 1.3;
  max-width: 27.4375em; /* 439px */
  padding-top: 0.5em;
  min-width: 0;
}

/* =====================================================
   FEATURES + ACCORDION
   Blocks: features, accordion
   ===================================================== */

.features {
  padding: 7.5em 0; /* 120px */
}

.features__inner {
  display: grid;
  grid-template-columns: 36.9375em 1fr; /* 591px */
  gap: 4.5em; /* 72px */
  align-items: start;
}

.features__lead {
  display: flex;
  flex-direction: column;
  gap: 3em; /* 48px */
  align-items: flex-start;
}

.features__title {
  font-size: 3.375em; /* 54px */
  font-weight: 400;
  line-height: 1.1;
  color: var(--color-navy);
}

.features__body {
  font-size: 1.125em; /* 18px */
  color: var(--color-text-60);
  line-height: 1.3;
  margin-top: -2em; /* pull up */
}

/* Accordion */
.accordion {
  display: flex;
  flex-direction: column;
  gap: 0.75em; /* 12px */
}

.accordion__item {
  border-radius: var(--radius-xs);
  overflow: hidden;
}

.accordion__item--open {
  background-color: var(--color-white);
}

.accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1.25em;  /* 20px */
  padding: 1.4375em 2em; /* 23px 32px */
  cursor: pointer;
  background: transparent;
  border: none;
  text-align: left;
}

.accordion__icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.accordion__icon img {
  width: 1.5em;  /* 24px */
  height: 1.5em;
}

.accordion__label {
  flex: 1;
  font-family: var(--font);
  font-size: 1.5em; /* 24px */
  font-weight: 400;
  color: var(--color-navy);
}

.accordion__arrow {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  transition: transform var(--ease-md);
}

.accordion__arrow img {
  width: 0.875em;  /* 14px */
  height: 0.875em;
}

.accordion__item--open .accordion__arrow {
  transform: rotate(180deg);
}

.accordion__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--ease-md);
}

.accordion__item--open .accordion__body {
  max-height: 12.5em; /* 200px */
}

.accordion__body p {
  padding: 0 2em 1.4375em 4.75em; /* 0 32px 23px 76px */
  font-size: 0.875em; /* 14px */
  color: var(--color-text-60);
  line-height: 1.5;
}

/* =====================================================
   GALLERY
   Block: gallery
   ===================================================== */

.gallery {
  padding: 7.5em 0; /* 120px */
  background-color: var(--color-white);
}

.gallery__grid {
  display: grid;
  grid-template-columns: 22.4375em 30.125em 22.625em; /* 359/482/362px */
  gap: 1.3125em; /* 21px */
  align-items: center;
  width: max-content;
  margin: 0 auto;
}

.gallery__col {
  display: flex;
  flex-direction: column;
  gap: 1.3125em; /* 21px */
}

.gallery__item {
  border-radius: var(--radius-xs);
  overflow: hidden;
}

.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Named height modifiers (px → em, base 16) */
.gallery__item--h271 { height: 16.9375em; }
.gallery__item--h362 { height: 22.625em; }
.gallery__item--h542 { height: 33.875em; }
.gallery__item--h479 { height: 29.9375em; }
.gallery__item--h357 { height: 22.3125em; }
.gallery__item--h361 { height: 22.5625em; }
.gallery__item--h488 { height: 30.5em; }
.gallery__item--h269 { height: 16.8125em; }

/* Mobile-only gallery grid — hidden by default, shown at ≤430px */
.gallery__grid--mobile {
  display: none;
}

/* Mobile item heights (Figma 157:643, base 16px) */
.gallery__item--m140 { height: 8.75em; }  /* 140px */
.gallery__item--m160 { height: 10em; }    /* 160px */
.gallery__item--m200 { height: 12.5em; }  /* 200px */

/* =====================================================
   LOCATION
   Block: location
   ===================================================== */

.location {
  background-color: var(--color-bege);
}

.location__wrap {
  display: grid;
  grid-template-columns: 32em 1fr; /* 512px */
  height: 40.4375em; /* 647px */
  overflow: hidden;
}

.location__text {
  display: flex;
  flex-direction: column;
  gap: 1em;
  padding: 7.5em 2.5em; /* 120px 40px */
}

.location__title {
  font-size: 3.375em; /* 54px */
  font-weight: 400;
  line-height: 1.1;
  color: var(--color-navy);
}

.location__title .t-orange,
.nowrap {
  white-space: nowrap;
}

.location__body {
  font-size: 1.125em; /* 18px */
  color: var(--color-text-60);
  line-height: 1.3;
}

.location__map {
  overflow: hidden;
}

.location__map img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =====================================================
   AMENITIES — location features row
   Block: amenities
   ===================================================== */

.amenities {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2.5em; /* 40px */
  margin-bottom: 5em; /* 80px */
}

.amenities__item {
  display: flex;
  align-items: flex-start;
  gap: 0.75em; /* 12px */
  max-width: 13.125em; /* 210px */
}

.amenities__item img,
.amenities__item svg {
  width: 1.75em;  /* 28px @ 16px */
  height: 1.75em;
  flex-shrink: 0;
}

.amenities__item span {
  font-size: 1.125em; /* 18px */
  line-height: 1.2;
  color: var(--color-navy);
}

/* =====================================================
   DISCOVER — CTA banner section
   Block: discover
   ===================================================== */

.discover {
  padding: 7.5em 0; /* 120px */
  background-color: var(--color-white);
}

.discover__banner {
  position: relative;
  background-color: var(--color-orange);
  border-radius: var(--radius-xs);
  overflow: hidden;
  height: 30.3125em; /* 485px */
  display: flex;
  align-items: center;
}

.discover__content {
  position: relative;
  z-index: 1;
  padding: 3.5em; /* 56px */
  max-width: 35.0625em; /* 561px */
  display: flex;
  flex-direction: column;
}

.discover__title {
  font-size: 3.375em; /* 54px */
  font-weight: 400;
  line-height: 1;
  color: var(--color-white);
  max-width: 30.375em; /* ~486px at 54px → 9.004em */
}

.discover__body {
  font-size: 0.875em; /* 14px */
  color: var(--color-navy);
  line-height: 1.3;
  max-width: 22.5em; /* 315px at 14px → fit */
  margin-top: 11em;  /* ~154px from heading */
  margin-bottom: 1.5em;
}

.discover__actions {
  display: flex;
  gap: 0.5em;
  flex-wrap: nowrap;
}

.discover__photo {
  position: absolute;
  right: 0;
  top: 50%;
  margin-right: 6px;
  transform: translateY(-50%);
  width: 36.375em;  /* 582px */
  height: 29.5625em; /* 473px */
  border-radius: 0.09375em; /* 1.5px */
  overflow: hidden;
}

.discover__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =====================================================
   HOMES — Available units table
   Block: homes
   ===================================================== */

.homes {
  padding: 7.5em 0;
  background-color: var(--color-bege);
}

.homes__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2.5em;
  margin-bottom: 5em; /* 80px */
}

.homes__title {
  font-size: 3.375em; /* 54px */
  font-weight: 400;
  line-height: 1.1;
  color: var(--color-navy);
  white-space: nowrap;
}

.homes__description {
  font-size: 1.125em; /* 18px */
  color: var(--color-text-60);
  line-height: 1.3;
  max-width: 27.5em; /* 440px */
  padding-top: 0.5em;
}

/* Filters */
.homes__filters {
  display: flex;
  gap: 4.625em; /* 74px */
  margin-bottom: 2.5em; /* 40px */
}

.homes__filter-group {
  display: flex;
  flex-direction: column;
  gap: 0.875em; /* 14px */
}

.homes__filter-label {
  font-size: 1.125em; /* 18px */
  color: var(--color-orange);
  letter-spacing: -0.01em;
}

.homes__pills {
  display: flex;
  gap: 0.25em; /* 4px */
}

.homes__pill {
  padding: 0.0625em 0.625em; /* 1px 10px */
  border-radius: var(--radius-pill);
  font-family: var(--font);
  font-size: 0.875em; /* 14px */
  color: var(--color-navy);
  background-color: var(--color-white);
  border: none;
  cursor: pointer;
  line-height: 1.4286em; /* 20px / 14px */
  box-shadow: 0 0 0 0 transparent;
  transition: background-color var(--ease), color var(--ease), box-shadow var(--ease);
}

@media (hover: hover) {
  .homes__pill:not(.homes__pill--active):hover {
    box-shadow: 0 0 0 0.0714em var(--color-orange); /* 1px border laranja */
  }
}

.homes__pill--active {
  background-color: var(--color-navy);
  color: var(--color-bege);
}

/* Table */
.homes__table-wrap {
  overflow-x: auto;
}

.homes__table {
  width: 100%;
  border-collapse: collapse;
}

/*
 * Table column widths — from Figma column positions (total 1360px):
 * Unit 231 / Typology 229 / Area 230 / Floor 229 / Price 231 / Status auto
 */
.homes__table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.homes__table col:nth-child(1) { width: 17.0%; }  /* 231px / 1360 */
.homes__table col:nth-child(2) { width: 16.8%; }  /* 229px */
.homes__table col:nth-child(3) { width: 16.9%; }  /* 230px */
.homes__table col:nth-child(4) { width: 16.8%; }  /* 229px */
.homes__table col:nth-child(5) { width: 17.0%; }  /* 231px */
.homes__table col:nth-child(6) { width: 15.4%; }  /* 210px */

.homes__table thead th {
  font-size: 0.875em;   /* 14px */
  font-weight: 400;
  color: var(--color-navy);
  text-align: left;
  padding-bottom: 2.2857em; /* 32px / 14px — gap before divider */
  letter-spacing: -0.01075em; /* -0.1504px / 14px */
  border-bottom: 0.0714em solid var(--color-border); /* 1px / 14px */
}

.homes__table tbody tr { border-bottom: 0.0714em solid var(--color-border); }
.homes__table tbody tr:first-child { border-top: 0.0714em solid var(--color-navy); }
.homes__table tbody tr[hidden] { display: none; }

.homes__table tbody td {
  padding: 1.5714em 0;  /* 22px / 14px — top + bottom spacing */
  font-size: 0.875em;   /* 14px */
  vertical-align: middle;
  letter-spacing: -0.02232em; /* -0.3125px / 14px */
}

.homes__table-unit  { font-weight: 700; color: var(--color-navy); }
.homes__table-muted { color: var(--color-text-50); }

.homes__footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.25em;
}

.homes__pagination {
  display: flex;
  align-items: center;
  gap: 1em;
}

.homes__page-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2em;
  height: 2em;
  border-radius: var(--radius-pill);
  border: 0.0625em solid var(--color-border);
  background: transparent;
  color: var(--color-navy);
  cursor: pointer;
  transition: opacity var(--ease);
}
.homes__page-btn:hover:not(:disabled) { opacity: 0.6; }
.homes__page-btn:disabled { opacity: 0.25; cursor: default; }

.homes__page-info {
  font-size: 0.875em;
  color: var(--color-text-50);
  min-width: 3em;
  text-align: center;
}

/*
 * Status badges — h-[30px] pill, 12px horizontal padding
 * em relative to own 14px font-size (inherited from td)
 */
.homes__status {
  display: inline-flex;
  align-items: center;
  height: 2.1429em;     /* 30px / 14px */
  padding: 0 0.8571em;  /* 0 12px / 14px */
  border-radius: var(--radius-pill);
  font-size: 1em;        /* same as td (14px) */
  letter-spacing: -0.01075em;
  white-space: nowrap;
  text-decoration: none;
  transition: opacity var(--ease);
}

.homes__status:hover { opacity: 0.75; }

.homes__status--available {
  border: 0.0714em solid var(--color-orange);
  color: var(--color-orange);
}

.homes__status--reserved {
  border: 0.0714em solid var(--color-navy);
  color: var(--color-navy);
}

.homes__note {
  margin-top: 1.5em;
  font-size: 0.875em;
  color: var(--color-text-50);
  letter-spacing: -0.02em;
}

/* =====================================================
   OFFERS — "What Bloom Living offers"
   Block: offers
   ===================================================== */

.offers {
  padding: 7.5em 0;
  background-color: var(--color-white);
}

.offers__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2.5em; /* 40px */
}

.offers__item {
  display: grid;
  grid-template-columns: 1.75em 1fr; /* ícone | texto */
  grid-template-rows: auto auto;
  column-gap: 1em;   /* 16px entre ícone e texto */
  row-gap: 0.375em;  /* 6px entre título e descrição */
}

.offers__item svg,
.offers__item img {
  width: 1.75em;
  height: 1.75em;
  grid-row: 1 / 3;   /* ícone ocupa as 2 linhas */
  align-self: start;
}

.offers__item-title {
  font-size: 1.5em; /* 24px */
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-navy);
}

.offers__item-desc {
  font-size: 0.875em; /* 14px */
  color: var(--color-text-50);
  line-height: 1.4;
}

/* =====================================================
   PLOTS — Plots for sale
   Block: plots
   ===================================================== */

.plots {
  padding: 7.5em 0;
  background-color: var(--color-bege);
  border-top: 0.0625em solid var(--color-border);
  border-bottom: 0.0625em solid var(--color-border);
}

.plots__header {
  display: flex;
  flex-direction: column;
  gap: 1em;
  margin-bottom: 4.3125em; /* 69px */
  max-width: 39.6875em; /* 635px */
}

.plots__title {
  font-size: 3.375em; /* 54px */
  font-weight: 400;
  color: var(--color-navy);
}

.plots__body {
  font-size: 1.125em; /* 18px */
  color: var(--color-text-60);
  line-height: 1.4;
  max-width: 34.5em; /* 552px */
}

.plots__image-wrap {
  position: relative;
  border-radius: var(--radius-xs);
  overflow: hidden;
  height: 42em; /* 672px */
}

.plots__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.plots__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
}

.plots__marker {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1875em;
}

.plots__marker--1 { left: 37.72%; top: 43.75%; }
.plots__marker--2 { left: 47.09%; top: 47.4%; }

.plots__marker-pin {
  width: 4.6875em; /* 75px */
  height: 2.09375em; /* 33.5px */
  background: rgba(249, 238, 222, 0.9);
  border-radius: 0.25em;
}

.plots__marker-label {
  font-size: 0.875em;
  color: var(--color-navy);
  background: rgba(249, 238, 222, 0.9);
  padding: 0.125em 0.375em;
  border-radius: 0.1875em;
}

/* =====================================================
   EFFICIENCY
   Block: efficiency
   ===================================================== */

.efficiency {
  padding: 7.5em 0;
  background-color: var(--color-bege);
}

.efficiency__grid {
  display: grid;
  grid-template-columns: repeat(4, 18.125em); /* 290px */
  gap: 1.25em; /* 20px */
  justify-content: center;
}

.efficiency__card {
  background-color: var(--color-card);
  border-radius: var(--radius-xs);
  padding: 2.5em;   /* 40px */
  height: 20.4375em; /* 327px */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.efficiency__card img,
.efficiency__card svg {
  width: 2.25em;  /* 36px */
  height: 2.25em;
  flex-shrink: 0;
}

.efficiency__card-text {
  display: flex;
  flex-direction: column;
  gap: 0.75em;
}

.efficiency__card-title {
  font-size: 0.875em; /* 14px */
  font-weight: 400;
  color: var(--color-navy);
}

.efficiency__card-desc {
  font-size: 0.875em;
  color: var(--color-text-40);
  line-height: 1.4;
}

/* =====================================================
   CONTACT — "Let's talk"
   Block: contact
   ===================================================== */

.contact {
  background-color: var(--color-bege);
  margin-bottom: 7.5em;
}

.contact__wrap {
  display: grid;
  grid-template-columns: 40.3125em 1fr; /* 645px */
  min-height: 41.5em; /* 664px */
}

.contact__info {
  background-color: var(--color-orange);
  padding: 3.125em 3.375em; /* 50px 54px */
  display: flex;
  flex-direction: column;
  gap: 4em; /* 64px */
  border-radius: var(--radius-xs) 0 0 var(--radius-xs);
}

.contact__title {
  font-size: 3.375em; /* 54px */
  font-weight: 400;
  line-height: 1;
  color: var(--color-white);
}

.contact__details {
  display: flex;
  flex-direction: column;
  gap: 2em;
}

p .contact__details {
  color: #c0392b;
}

.contact__details p {
  font-size: 1.125em; /* 18px */
  color: var(--color-navy);
  line-height: 1.3;
  max-width: 26.25em;
}

.contact__links {
  display: flex;
  flex-direction: column;
  gap: 0.75em;
}

.contact__links a,
.contact__links address {
  font-size: 0.875em; /* 14px */
  color: rgba(255, 255, 255, 0.75);
  font-style: normal;
  transition: color var(--ease);
}

.contact__links a:hover { color: var(--color-white); }

/* Form */
/* contact__form: pl-[76px] pr-[75px] py-[53px] — rounded right side */
.contact__form {
  background-color: var(--color-white);
  padding: 3.3125em 4.6875em 3.3125em 4.75em; /* 53px 75px 53px 76px */
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
}

.form {
  display: flex;
  flex-direction: column;
  gap: 1.5em; /* 24px between groups */
}

/* Each field group: label (14px) + 8px gap + input (48px) */
.form__group {
  display: flex;
  flex-direction: column;
  gap: 0.5em; /* 8px */
}

/* font-weight: 500 (Medium), 14px, no opacity modifier */
.form__label {
  font-size: 0.875em;   /* 14px */
  font-weight: 500;
  line-height: 1;       /* 14px line-height */
  color: var(--color-navy);
}

/* Full-border box input: h-[48px] border rgba(23,42,52,0.4) rounded-[3px] px-[12px] */
.form__input {
  width: 100%;
  height: 3em;          /* 48px at 16px */
  padding: 0.25em 0.75em; /* 4px 12px */
  border: 0.0625em solid rgba(23, 42, 52, 0.4);
  border-radius: var(--radius-xs); /* 3px */
  font-family: var(--font);
  font-size: 0.875em;   /* 14px */
  color: var(--color-navy);
  background-color: var(--color-white);
  outline: none;
  transition: border-color var(--ease);
}

.form__input:focus        { border-color: var(--color-navy); }
.form__input--invalid     { border-color: #c0392b; }
.form__input::placeholder { color: rgba(23, 42, 52, 0.40); }

/* Select chevron */
.form__select {
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3E%3Cpath d='M1 1l3 3 3-3' stroke='%23172a34' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75em center;
  padding-right: 2em;
}

/* Checkbox group — label + row of checkboxes */
.form__checkboxes {
  display: flex;
  gap: 0.375em; /* 6px */
  align-items: center;
}

.form__checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.375em; /* 6px */
  font-size: 0.875em; /* 14px */
  color: var(--color-navy);
  cursor: pointer;
  line-height: 1;
}

.form__checkbox-label--terms {
  align-items: flex-start;
  gap: 0.5em;
}

/* Custom checkbox: 17×17px border rounded-[3px] */
.form__checkbox {
  appearance: none;
  flex-shrink: 0;
  width: 1.0625em;  /* 17px */
  height: 1.0625em;
  border: 0.0625em solid var(--color-navy);
  border-radius: var(--radius-xs);
  background-color: var(--color-white);
  cursor: pointer;
  position: relative;
  transition: background-color var(--ease);
}

.form__checkbox:checked {
  background-color: var(--color-navy);
}

.form__checkbox:checked::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8' fill='none'%3E%3Cpath d='M1 4l3 3 5-6' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 65%;
}

.form__error {
  font-size: 0.75em;
  color: #c0392b;
  min-height: 1em;
}

.form__success {
  font-size: 0.875em;
  color: var(--color-navy);
  text-align: center;
  min-height: 1.5em;
}

.form__success--error {
  color: #c0392b;
}

/* Submit button: full-width, h-56px, border-radius 3px, 18px Medium, navy */
.form__submit-btn {
  width: 100%;
  height: 3.1111em;    /* 56px at 18px font-size */
  padding: 0;
  background-color: var(--color-navy);
  border: 0.0556em solid var(--color-navy); /* ~1px at 18px */
  border-radius: var(--radius-xs);          /* 3px */
  font-family: var(--font);
  font-size: 1.125em;  /* 18px */
  font-weight: 500;
  color: var(--color-white);
  letter-spacing: -0.02442em; /* -0.4395px / 18px */
  cursor: pointer;
  transition: opacity var(--ease);
}

.form__submit-btn:hover { opacity: 0.85; }

/* =====================================================
   FOOTER
   Block: footer
   ===================================================== */

.footer {
  background-color: var(--color-navy);
}

/* --- Main info row --- */
.footer__main {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-top: 4.125em;   /* 66px */
  padding-bottom: 2.5em;
}

/* Left: brand name + contact + CTA */
.footer__brand {
  display: flex;
  flex-direction: column;
  gap: 2em;               /* 32px */
  max-width: 26.6875em;   /* 427px */
  align-items: flex-start;
}

.footer__brand-name {
  font-size: 3.375em;     /* 54px */
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-bege);
}

.footer__contact {
  display: flex;
  flex-direction: column;
  gap: 0.5em;             /* 8px */
  opacity: 0.6;
}

.footer__contact-item {
  font-size: 0.875em;     /* 14px */
  color: var(--color-bege);
  text-decoration: none;
  line-height: 1.4;
}

.footer__contact-item[href]:hover { opacity: 0.8; }

address.footer__contact-item {
  font-style: normal;
  margin-top: 0.25em;
}

/* Right: menu + socials columns */
.footer__cols {
  display: flex;
  gap: 6.25em;            /* 100px between columns */
  align-items: flex-start;
}

.footer__col {
  display: flex;
  flex-direction: column;
  gap: 0.8125em;          /* 13px label → list */
}

.footer__col-label {
  font-size: 0.75em;      /* 12px */
  color: rgba(249, 238, 222, 0.5);
  line-height: 1;
}

.footer__col-list {
  display: flex;
  flex-direction: column;
  gap: 0.375em;           /* 6px */
}

.footer__col-list a {
  font-size: 1.125em;     /* 18px */
  color: var(--color-bege);
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
  transition: opacity var(--ease);
}

.footer__col-list a:hover { opacity: 0.6; }

/* --- Legal / copyright bar --- */
.footer__legal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1.25em;
  padding-bottom: 1.25em;

}

.footer__copyright {
  font-size: 0.75em;      /* 12px */
  color: var(--color-bege);
}

.footer__policies {
  display: flex;
  gap: 1em;               /* 16px */
}

.footer__policy-link {
  font-size: 0.75em;      /* 12px */
  color: var(--color-bege);
  text-decoration: none;
  transition: opacity var(--ease);
}

.footer__policy-link:hover { opacity: 0.6; }

/* --- Bottom image banner with BLOOM wordmark --- */
.footer__banner {
  position: relative;
  margin: 0 0.75em;       /* 12px each side */
  height: 21em;           /* 336px */
  border-radius: var(--radius-xs);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer__banner-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  padding-bottom: 0.75em; /* 12px @ 16px */
}

.footer__banner-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
}

.footer__banner-logo {
  position: relative;
  z-index: 1;
  width: 26.3125em;       /* 421px */
  height: auto;
}


/* =============================================================
   TABLET  ≤ 1024px  (Figma 1024 frame)
   ============================================================= */

@media screen and (max-width: 1024px) {

  /* Hero — mantém 2 colunas com foto para transição suave */
  .hero { height: auto; }
  .hero__wrap {
    grid-template-columns: 1fr 1fr;
    height: auto;
    min-height: calc(100svh - 1.5em);
  }
  .hero__photo  { display: block; }
  .hero__panel  { border-radius: var(--radius-xs); }
  .hero__title   { font-size: 3.5em; } /* 56px */
  .hero__content { padding-top: 3.75em; }

  /* About */
  .about__media { height: 22.5em; } /* 360px */
  .about__text  { flex-direction: column; gap: 1.5em; padding-top: 2.5em; padding-bottom: 2.5em; }
  .about__title { font-size: 2em; }
  .about__body  { max-width: 100%; }

  /* Features */
  .features__inner { grid-template-columns: 1fr; gap: 3em; }
  .features__title { font-size: 2.5em; }

  /* Gallery — mantém 3 colunas com alturas proporcionais */
  .gallery__grid {
    grid-template-columns: 1fr 1.35fr 1fr;
    gap: 0.75em;
    width: 100%;
    margin: 0 auto;
  }
  .gallery__item--h271,
  .gallery__item--h361 { height: 12.5em !important; }
  .gallery__item--h362,
  .gallery__item--h357,
  .gallery__item--h269 { height: 16em   !important; }
  .gallery__item--h542,
  .gallery__item--h479,
  .gallery__item--h488 { height: 20em   !important; }

  /* Section header */
  .section-header__title { font-size: 2.5em; }

  /* Location — mantém lado a lado para transição suave */
  .location__wrap {
    position: relative;
    display: block;
    height: 30em;
    overflow: hidden;
  }
  .location__map {
    position: absolute;
    right: 0;
    top: 0;
    width: 60%;
    height: 100%;
    overflow: hidden;
  }
  .location__text {
    position: absolute;
    left: 1.5em;
    top: 3em;
    padding: 0;
    width: calc(40% - 3em);
    display: flex;
    flex-direction: column;
    gap: 1em;
  }
  .location__title { font-size: 2.5em; }
  .location__body  { display: block; font-size: 1em; opacity: 0.6; }

  /* Amenities */
  .amenities       { flex-wrap: wrap; gap: 1.5em; }
  .amenities__item { max-width: 45%; }

  /* Discover */
  .discover__banner { height: 22.33em; padding: 0; }
  .discover__content { padding: 2em; max-width: 25em; }
  .discover__body  { margin-top: 1.5em; }
  .discover__photo {
    display: block;
    position: absolute;
    right: 0.3333em;
    left: auto;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    width: 26.9167em;
    height: 21.6667em;
    border-radius: 0.125em;
    margin-right: 0;
  }

  /* Homes */
  .homes__header  { flex-direction: column; gap: 1em; margin-bottom: 2.5em; }
  .homes__title   { font-size: 2.5em; }
  .homes__filters { flex-direction: row; gap: 1.5em; }

  /* Offers */
  .offers__grid { grid-template-columns: repeat(2, 1fr); gap: 2em; }

  /* Plots */
  .plots__image-wrap { height: 25em; }
  .plots__title { font-size: 2.5em; }

  /* Efficiency */
  .efficiency__grid { grid-template-columns: repeat(2, 1fr); justify-content: start; }
  .efficiency__card { height: auto; min-height: 18em; }

  /* Contact */
  .contact__wrap { grid-template-columns: 1fr; }
  .contact__info {
    border-radius: var(--radius-xs) var(--radius-xs) 0 0;
    padding: 2.5em 2em;
    gap: 2em;
    min-height: auto;
  }
  .contact__title  { font-size: 2.5em; }
  .contact__form   { border-radius: 0 0 var(--radius-xs) var(--radius-xs); padding: 2em; }

  /* Footer */
  .footer__main  { flex-direction: column; gap: 3em; padding-top: 3em; }
  .footer__brand { max-width: 100%; }
  .footer__cols  { gap: 3em; }
}


/* =============================================================
   TABLET  ≤ 768px  (Figma 768 frame)
   ============================================================= */

@media screen and (max-width: 768px) {

  .container { padding: 0 1.5em; }

  /* HERO — restore 2-column layout with photo (Figma: 362px + 370px panels) */
  .hero { height: auto; }
  .hero__wrap {
    grid-template-columns: 1fr 1fr;
    gap: 0.75em;          /* 12px gap between panels */
    height: auto;
    min-height: 44.75em;  /* 537px @ 12px base */
  }
  .hero__photo  { display: block; }
  .hero__panel  { border-radius: var(--radius-xs); } /* gap entre painéis — todos os cantos */
  .hero__title  { font-size: 4em; }
  .hero__content { padding-top: 3em; max-width: none; }
  /* Buttons stack vertically at tablet */
  .hero__actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5em;
  }

  /* ABOUT — restore side-by-side layout */
  .about__text {
    flex-direction: row;
    align-items: flex-start;
    gap: 2em;
    padding-top: 3em;
    padding-bottom: 3em;
  }
  .about__title { font-size: 2.25em; max-width: 22em; }
  .about__body  { max-width: 17.5em; }
  .about__media { height: 33em; } /* ~400px @ 12px */

  /* FEATURES — restore 2-column (lead ~38% + accordion) */
  .features__inner {
    grid-template-columns: 38% 1fr;
    gap: 2em;
  }
  .features__title { font-size: 2.25em; }

  /* GALLERY — restore 3 columns with Figma-proportioned widths (210 : 284 : 210) */
  .gallery__grid {
    grid-template-columns: 1fr 1.35fr 1fr;
    gap: 0.75em;
    width: 100%;
  }
  .gallery__col:last-child { display: flex; } /* was hidden at ≤1024px */
  /* Restore variable item heights (override the uniform 12.5em from ≤1024px) */
  .gallery__item--h271,
  .gallery__item--h361 { height: 15em !important; }   /* short  ~180px */
  .gallery__item--h362,
  .gallery__item--h357,
  .gallery__item--h269 { height: 20em !important; }   /* medium ~240px */
  .gallery__item--h542,
  .gallery__item--h479,
  .gallery__item--h488 { height: 25em !important; }   /* tall   ~300px */

  /* SECTION HEADER */
  .section-header__title { font-size: 2.25em; }

  /* LOCATION — bege bg, map flush right, text absolute on left */
  .location__wrap {
    position: relative;
    display: block;
    height: 25.25em;          /* 303px @ 12px fluid */
    background-color: var(--color-bege);
    overflow: hidden;
  }
  .location__map {
    position: absolute;
    right: 0;
    top: 0;
    width: 61.3%;             /* 471 / 768 */
    height: 100%;
    overflow: hidden;
  }
  .location__text {
    position: absolute;
    z-index: 2;
    left: 1.25em;
    top: 2em;
    padding: 0;
    background: transparent;
    /* fica sempre dentro da zona bege: 38.7% da secção – offset esq – buffer */
    width: calc(38.7% - 1.25em - 1em);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 1em;
  }
  .location__title { font-size: 2.25em; }
  .location__body  { display: block; font-size: 0.875em; opacity: 0.6; }

  /* AMENITIES — 3 em cima, 2 centrados em baixo (Figma 168:2485) */
  .amenities {
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    column-gap: 2.75em;  /* ~44px */
    row-gap: 1.5em;      /* ~24px */
    margin-bottom: 3em;
  }
  /* Cada item ocupa exactamente 1/3 do espaço disponível → 3 por linha */
  .amenities__item {
    flex: 0 0 calc((100% - 5.5em) / 3); /* (100% - 2 gaps) / 3 */
    max-width: none;
    align-items: flex-start;
    gap: 0.75em;
  }
  .amenities__item svg {
    width: 2em;      /* 24px @ 12px base */
    height: 2em;
    flex-shrink: 0;
  }
  .amenities__item span { font-size: 0.875em; line-height: 1.3; }

  /* DISCOVER — tablet Figma 166:2424 (base 12px) */
  .discover__banner  { height: 22.33em; padding: 0; }    /* 268px */
  .discover__content {
    padding: 2em;           /* 24px — Figma left/top: 24px */
    max-width: 25em;        /* 300px */
    justify-content: flex-start;
  }
  .discover__title   { font-size: 2.3333em; }            /* 28px */
  .discover__body    { font-size: 1em; margin-top: 5.0833em; margin-bottom: 1em; } /* 61px gap, 12px antes das CTAs */
  .discover__photo {
    display: block;
    position: absolute;
    right: 0.3333em;        /* 4px = (banner 268px − foto 260px) / 2 — igual ao topo/fundo */
    left: auto;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    width: 26.9167em;       /* 323px */
    height: 21.6667em;      /* 260px */
    border-radius: 0.125em; /* 1.5px */
    margin-right: 0;
  }
  .discover__actions { flex-wrap: nowrap; gap: 0.5em; }

  /* HOMES */
  .homes__title { font-size: 3em; }

  /* OFFERS — 3 per row */
  /* OFFERS — 3 em cima, 2 centrados em baixo (mesma lógica que amenities) */
  .offers__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    column-gap: 2.5em;
    row-gap: 2.5em;
  }
  .offers__item {
    flex: 0 0 calc((100% - 5em) / 3); /* (100% - 2 × col-gap) / 3 */
  }

  /* PLOTS — full image visible with beige background */
  .plots__image-wrap {
    height: auto;
    background-color: var(--color-bege);
  }
  .plots__image {
    object-fit: contain;
    height: auto;
  }
  .plots__title { font-size: 2.5em; }

  /* EFFICIENCY — 2×2 already set by ≤1024 — just ensure font */
  .efficiency__grid { grid-template-columns: repeat(2, 1fr); }

  /* CONTACT — tablet padding Figma: 76/76/284/161px (base 12px) */
  .contact__info {
    padding: 6.3333em 23.6667em 13.4167em 6.3333em; /* top right bottom left */
    gap: 2em;
    min-height: auto;
  }
  .contact__title { font-size: 2.5em; }

  /* FOOTER — lado a lado: brand esq + cols dir (Figma 162:666) */
  .footer__main {
    flex-direction: row;       /* override 1024px column */
    justify-content: space-between;
    align-items: flex-start;
    padding-top: 4.125em;     /* 66px / 16 */
    padding-bottom: 2.5em;
    gap: 0;
  }
  .footer__brand {
    max-width: 28em;           /* contém título + contactos + btn */
    gap: 2em;
  }
  .footer__brand-name { font-size: 3.33em; } /* ~40px @ 12px */
  .footer__cols {
    flex-direction: row;       /* Menu + Socials lado a lado */
    flex-wrap: nowrap;
    gap: 3.33em;               /* ~40px @ 12px */
    align-items: flex-start;
  }
  .footer__col-list a { font-size: 1.5em; } /* 18px @ 12px */
  .footer__banner {
    height: 28em;              /* 336px @ 12px */
    margin: 0 1em;             /* 12px @ 12px */
    padding-bottom: 1em;       /* 12px @ 12px */
  }
  .footer__banner-logo { width: 40%; }

  .footer__legal {
    margin-bottom: 1em;
    margin-top: 1em;
  }

  .discover__photo{
    margin-bottom: 0.25em;
  }
}


/* =============================================================
   MOBILE  ≤ 430px  (Figma 390 frame)
   ============================================================= */

@media screen and (max-width: 430px) {


  .contact__details {
    margin-bottom: 8.125em;
  } 

  .footer__legal {
    display: flex;
    flex-direction: column;
    align-items:flex-start;
  }

  .footer__policies{
    margin-top: 1.25em;
  }

  .container { padding: 0 1.25em; } /* 20px */

  /* HERO — orange panel + foto empilhados, ambos visíveis */
  .hero { padding: 0.75em; height: auto; }
  .hero__wrap {
    grid-template-columns: 1fr;
    gap: 0.75em;
    height: auto;
    min-height: auto;
  }
  .hero__panel {
    border-radius: var(--radius-xs);
    height: 33.5625em;   /* 537px @ 16px */
    min-height: auto;
    padding: 1.125em 1.125em 2.5em; /* 18px 18px 40px — Figma */
  }
  .hero__photo {
    display: block;
    height: 21.875em;    /* 350px @ 16px */
    border-radius: var(--radius-xs);
  }

  .hero__photo img{
    height: 100%;
  }

  .hero__title    { font-size: 3em; }       /* 48px */
  .hero__eyebrow  { font-size: 0.75em; }   /* 12px */
  .hero__subtitle { font-size: 1em; }       /* 16px */
  .hero__content  { padding-top: 4em; max-width: none; } /* 64px gap from nav */
  .hero__actions  { flex-direction: row; align-items: center; gap: 0.5em; }
  .hero__nav .lang-btn { display: flex; } /* show EN button on mobile */
  .lang-btn { width: 3.1667em; height: 3.1667em; } /* 38px (38 ÷ 12px) */

  /* ABOUT — Figma: gap-64px texto→foto, gap-32px título→body, pt-120px secção */
  .about__text  { flex-direction: column; gap: 2em; padding-top: 7.5em; padding-bottom: 4em; }
  .about__title { font-size: 2em; }        /* 32px */
  .about__body  { font-size: 1em; max-width: 100%; }  /* 16px */
  .about__media { height: 15em; }          /* 240px */

  /* FEATURES — Figma: gap-64px lead→accordion, gap-32px dentro do lead */
  .features__inner { grid-template-columns: 1fr; gap: 4em; }  /* 64px */
  .features__lead  { gap: 2em; }                              /* 32px */
  .features__title { font-size: 2em; }                        /* 32px */
  .features__body  { font-size: 1em; margin-top: 0; }         /* 16px, reset neg margin */
  .accordion__label   { font-size: 1em; }                     /* 16px */
  .accordion__trigger { padding: 1.4375em 1em; }             /* 23px 16px — remove deep indent */
  .accordion__body p  { padding: 0 1em 1.4375em 1em; font-size: 0.75em; color: var(--color-text-50); }

  /* GALLERY — Figma: py-64px, gap-72px header→grid, grelha mobile 2 colunas */
  .gallery { padding: 4em 0; }                    /* 64px */
  .section-header { margin-bottom: 4.5em; }       /* 72px */
  .section-header__title    { font-size: 2.5em; } /* 40px */
  .section-header__subtitle { font-size: 1em; }   /* 16px */
  .gallery__grid { display: none; }               /* esconde desktop */
  .gallery__grid--mobile {
    display: flex;
    gap: 0.75em;           /* 12px */
    align-items: flex-start;
    width: 100%;
  }
  .gallery__grid--mobile .gallery__col {
    flex: 1;
    gap: 0.75em;           /* 12px */  
  }

  /* LOCATION — reset absolute positioning do 768px, layout Figma */
  .location__wrap {
    display: flex;
    flex-direction: column;
    position: static;     /* reset position: relative do 768px */
    height: auto;
    overflow: visible;    /* reset overflow: hidden que escondia tudo */
    background-color: transparent;
  }
  .location__text {
    position: static;     /* reset position: absolute do 768px */
    width: 100%;
    padding: 4em 1.25em 4em; /* 64px top (gap da gallery), 20px lados, 64px bottom */
    overflow: visible;
  }
  .location__map {
    position: static;     /* reset position: absolute do 768px */
    width: 100%;
    height: 16.0625em;    /* 257px */
    overflow: hidden;
    background-color: var(--color-bege);
  }
  .location__title { font-size: 2.5em; }       /* 40px */
  .location__body  { font-size: 1em; opacity: 1; } /* 16px, reset opacity do 768px */

  .footer__banner-img{
    padding-bottom: 1.25em; /* 12px @ 16px */
  }
  

  /* AMENITIES — coluna única, gap 32px, margin-bottom 120px para o banner */
  .amenities {
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: flex-start;
    gap: 2em;          /* 32px entre items */
    margin-bottom: 7.5em; /* 120px gap até o discover banner */
    column-gap: 0;
  }
  .amenities__item {
    flex: none;
    width: 100%;
    max-width: 100%;
  }
  .amenities__item svg { width: 1.75em; height: 1.75em; } /* 28px @ ~16px */

  /* DISCOVER — Figma: py-64px/80px, banner flex-col+foto visível em baixo */
  .discover { padding: 4em 0 5em; }            /* 64px top, 80px bottom */
  .discover__banner {
    flex-direction: column;
    align-items: stretch;
    height: auto;
    min-height: auto;
    padding: 2.625em 1em 0;  /* 42px top, ~16px sides, sem bottom (foto preenche) */
  }
  .discover__content { max-width: 100%; padding: 0; }
  .discover__body    { font-size: 0.875em; margin-top: 2.857em; margin-bottom: 1.5em; } /* 40px/24px */
  .discover__actions { flex-wrap: nowrap; gap: 0.5em; }
  .discover__title   { font-size: 2.5em; }     /* 40px */
  .discover__photo {
    display: block;
    position: static;
    width: calc(100% + 1em); /* estica para 0.5em de cada borda do container */
    height: auto;
    aspect-ratio: 582 / 473;
    transform: none;
    margin: 4em -0.5em 0.5em -0.5em; /* top: 64px; direita/baixo/esquerda: 0.5em do container */
    border-radius: var(--radius-xs);
    overflow: hidden;
  }
  .discover__photo img { height: auto; }

  /* HOMES — Figma: título 40px, filtros em coluna */
  .homes__header      { flex-direction: column; gap: 1em; }
  .homes__title       { font-size: 2.5em; }    /* 40px */
  .homes__description { font-size: 1em; }      /* 16px */
  .homes__filters     { flex-direction: column; gap: 1.5em; }
  .homes__table-wrap  { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .homes__table {
    width: auto;
    min-width: 40em;    /* ~640px — força scroll horizontal */
    table-layout: auto; /* colunas dimensionadas ao conteúdo */
  }
  .homes__table thead th,
  .homes__table tbody td {
    padding-left: 1em;   /* 16px respiro horizontal */
    padding-right: 1em;
  }
  .homes__table thead th:first-child,
  .homes__table tbody td:first-child { padding-left: 0; }  /* alinhar com filtros */

  /* HOMES — pagination above note */
  .homes__footer-row {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 0.75em;
  }

  /* OFFERS — coluna única */
  .offers__grid { display: flex; flex-direction: column; gap: 2em; }
  .offers__item { flex: none; width: 100%; }

  /* PLOTS */
  /* .plots__image-wrap { height: 16.25em; } */
  .plots__title      { font-size: 2.5em; }

  /* EFFICIENCY */
  .efficiency__grid { grid-template-columns: 1fr; }

  /* CONTACT — full-bleed mobile */
  .contact { margin-bottom: 4em; }
  .contact__wrap  { grid-template-columns: 1fr; padding: 0; }
  .contact__info  { border-radius: 0; padding: 2.5em 1.25em; }
  .contact__title { font-size: 2.5em; }
  .contact__form  { border-radius: 0; padding: 2em 1.25em; }

  /* FOOTER — empilhado (override tablet side-by-side) */
  .footer__main {
    flex-direction: column;
    gap: 2.5em;
    padding-top: 2.5em;
    padding-bottom: 2.5em;
  }
  .footer__brand      { max-width: 100%; gap: 1.5em; }
  .footer__brand-name { font-size: 2.5em; }
  .footer__cols {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 1.5em;
  }
  .footer__col-list a { font-size: 1.125em; }
  .footer__banner     { height: 14em; margin: 0 1.25em; padding-bottom: 1.25em; } /* bottom 20px @ ~16px */
  .footer__banner-logo{ width: 70%; }
}


/* =============================================================
   ANIMATIONS
   ============================================================= */

/* --- Prevent scroll while loader is active --- */
.loader-active { overflow: hidden; }

/* =====================================================
   PAGE LOADER
   ===================================================== */

#page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bege);
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

#page-loader.loader--gone {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Decorative warm gradient */
.loader__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 55% at 65% 38%, rgba(239, 131, 84, 0.22) 0%, transparent 70%),
    radial-gradient(ellipse 45% 40% at 28% 68%, rgba(240, 228, 211, 0.9) 0%, transparent 65%);
  pointer-events: none;
}

.loader__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
}

.loader__logo {
  width: 7.5rem;
  opacity: 0;
  transform: translateY(1rem);
  animation: loader-rise 0.65s 0.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes loader-rise {
  to { opacity: 1; transform: translateY(0); }
}

.loader__progress {
  width: 7.5rem;
  height: 1.5px;
  background: rgba(239, 131, 84, 0.22);
  border-radius: 2px;
  overflow: hidden;
}

.loader__bar {
  height: 100%;
  width: 0;
  background: var(--color-orange);
  border-radius: 2px;
  animation: loader-fill 1.1s 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes loader-fill {
  to { width: 100%; }
}

/* =====================================================
   LANGUAGE TOGGLE — slide non-linear
   ===================================================== */

.lang-btn { overflow: hidden; }

.lang-btn__text { display: block; }

@keyframes lang-exit-right {
  to { transform: translateX(120%); opacity: 0; }
}

@keyframes lang-enter-left {
  from { transform: translateX(-120%); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

.lang-btn__text--exit {
  animation: lang-exit-right 0.28s cubic-bezier(0.4, 0, 0.85, 0) forwards;
}

.lang-btn__text--enter {
  animation: lang-enter-left 0.36s cubic-bezier(0.15, 0, 0.1, 1) forwards;
}

/* =====================================================
   BTN--BOOK — sweep + arrow nudge on hover
   ===================================================== */

.btn--book {
  position: relative;
  overflow: hidden;
  transition: opacity var(--ease), box-shadow 0.4s ease;
}

.btn--book:hover {
  opacity: 1;
  box-shadow: 0 6px 24px rgba(23, 42, 52, 0.22);
}

/* Translucent sweep that slides across the button on hover */
.btn--book::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.13);
  transform: translateX(-105%);
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.btn--book::after { content: none; }

.btn--book:hover::before { transform: translateX(0); }

/* Arrow icon nudges ↗ on hover — matches the icon's own direction */
.btn--book .btn__icon {
  position: relative;
  z-index: 1;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn--book:hover .btn__icon { transform: translate(3px, -3px); }

/* hero parallax removed — image fills container naturally */

/* =====================================================
   ABOUT TITLE — scroll text fill, line by line
   ===================================================== */

/* Each .about__line fills left-to-right independently */
.about__line {
  display: block;
  background: linear-gradient(
    to right,
    var(--color-navy) var(--line-fill, 0%),
    rgba(23, 42, 52, 0.18) var(--line-fill, 0%)
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.about__line .t-muted { color: inherit; }

/* =====================================================
   GALLERY — column overflow clip
   ===================================================== */

.gallery { overflow: hidden; }

/* =====================================================
   CONTACT FORM — exit + success state
   ===================================================== */

/* Smooth exit when form is replaced */
.form {
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.form--exiting {
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
}

/* Success panel */
.contact__success {
  display: none;
  flex-direction: column;
  gap: 1.25em; /* 20px — matches Figma */
  opacity: 0;
  transform: translateY(14px);
}

.contact__success--visible {
  display: flex;
  animation: success-panel-in 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes success-panel-in {
  to { opacity: 1; transform: translateY(0); }
}

.contact__success__title {
  font-size: 2.5em; /* 40px */
  font-weight: 400;
  color: var(--color-navy);
  line-height: 1.1;
}

.contact__success__body {
  font-size: 1.125em; /* 18px */
  color: rgba(23, 42, 52, 0.60);
  line-height: 1.4;
}