:root {
  --navy: #1c0a14;
  --navy-soft: #2b1620;
  --navy-deep: #10060b;
  --paper: #f7f5f0;
  --white: #ffffff;
  --ivory: #ede8e2;
  --warm: #d8d0c6;
  --line: #d5cdc4;
  --slate: #4d4642;
  --muted: #8a807a;
  --gold: #b8956a;
  --sage: #4f6f64;
  --clay: #a7604d;
  --blue: #637c93;
  --arthiax-ink: #0a0b0d;
  --arthiax-cyan: #15d5c8;
  --arthiax-lime: #b9ff5a;
  --arthiax-violet: #7257ff;
  --shadow: 0 24px 70px rgba(28, 10, 20, 0.14);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.25, 1, 0.5, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  color: var(--navy);
  background: var(--paper);
  font-family: "DM Sans", system-ui, sans-serif;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.is-locked {
  overflow: hidden;
}

body.modal-open {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

img,
svg {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2 {
  margin-bottom: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: 0;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.7rem, 7vw, 5.8rem);
}

h2 {
  font-size: clamp(2rem, 4.6vw, 3.4rem);
}

h1 span,
h2 span {
  font-style: italic;
  font-weight: 400;
}

.container {
  width: min(1200px, calc(100% - 40px));
  margin-inline: auto;
}

.page-curtain {
  position: fixed;
  z-index: 999;
  inset: 0;
  pointer-events: none;
  background: var(--navy);
  animation: curtainLift 0.7s var(--ease-out) 0.1s both;
}

@keyframes curtainLift {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

.noise {
  position: relative;
  overflow: hidden;
}

.noise::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.035;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px;
}

.noise > * {
  position: relative;
  z-index: 1;
}

.eyebrow,
.panel-kicker {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--navy);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  transition: color 0.25s ease;
}

.arrow-link svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  transition: transform 0.35s var(--ease-out);
}

.arrow-link:hover svg {
  transform: translateX(4px);
}

.arrow-link.dark {
  color: var(--white);
}

.primary-cta,
.header-cta,
.clear-filter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border: 0;
  border-radius: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  transition:
    transform 0.3s var(--ease-soft),
    background 0.3s var(--ease-soft),
    color 0.3s var(--ease-soft),
    box-shadow 0.3s var(--ease-soft);
}

.primary-cta:hover,
.header-cta:hover,
.clear-filter:hover {
  transform: translateY(-1px);
}

.primary-cta {
  width: 100%;
  padding: 0 26px;
  color: var(--white);
  background: var(--navy);
}

.primary-cta.dark {
  background: var(--white);
  color: var(--navy);
}

.login-screen {
  position: fixed;
  z-index: 120;
  inset: 0;
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 28px;
  color: var(--white);
  background:
    radial-gradient(circle at 14% 18%, rgba(21, 213, 200, 0.2), transparent 28%),
    radial-gradient(circle at 82% 72%, rgba(185, 255, 90, 0.14), transparent 24%),
    linear-gradient(135deg, #050607 0%, #0a0b0d 52%, #11130f 100%);
}

.login-screen.is-hidden {
  pointer-events: none;
  animation: loginOut 0.45s var(--ease-out) both;
}

@keyframes loginOut {
  to {
    opacity: 0;
    transform: translateY(-18px);
    visibility: hidden;
  }
}

.login-card {
  width: min(430px, 100%);
  padding: 34px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(10, 11, 13, 0.74);
  box-shadow: 0 30px 120px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(18px);
}

.login-logo {
  width: 214px;
  margin-bottom: 26px;
  filter: drop-shadow(0 0 26px rgba(21, 213, 200, 0.18));
}

.login-card .eyebrow {
  color: var(--arthiax-cyan);
}

.login-card h1 {
  margin-bottom: 12px;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: clamp(2.4rem, 8vw, 4rem);
  font-weight: 800;
  line-height: 0.96;
}

.login-copy {
  margin-bottom: 26px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 15px;
  line-height: 1.65;
}

.login-fields {
  display: grid;
  gap: 16px;
}

.login-card label,
.contact-form label,
.status-select {
  display: grid;
  gap: 8px;
}

.login-card label span,
.contact-form span,
.status-select span {
  color: rgba(255, 255, 255, 0.56);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.login-card input,
.contact-form input,
.contact-form textarea,
.status-select select {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 0;
  padding: 14px 15px;
  color: var(--white);
  background: rgba(255, 255, 255, 0.06);
  outline: 0;
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
}

.login-card input:focus,
.contact-form input:focus,
.contact-form textarea:focus,
.status-select select:focus {
  border-color: rgba(21, 213, 200, 0.72);
  box-shadow: 0 0 0 3px rgba(21, 213, 200, 0.12);
}

.login-error {
  min-height: 22px;
  margin: 14px 0;
  color: #f0b5a4;
  font-size: 13px;
}

.login-card .primary-cta {
  color: var(--arthiax-ink);
  background: linear-gradient(135deg, var(--arthiax-lime), var(--arthiax-cyan));
}

.site-shell[hidden] {
  display: none;
}

.site-header {
  position: fixed;
  z-index: 60;
  top: 0;
  left: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 82px;
  padding: 0 max(22px, calc((100vw - 1200px) / 2 + 22px));
  color: var(--white);
  transition:
    left 0.45s var(--ease-out),
    right 0.45s var(--ease-out),
    background 0.45s var(--ease-out),
    box-shadow 0.45s var(--ease-out),
    backdrop-filter 0.45s var(--ease-out);
}

.site-header.nav--solid {
  left: 0;
  right: 0;
  color: var(--navy);
  background: rgba(247, 245, 240, 0.96);
  box-shadow: 0 1px 0 rgba(28, 10, 20, 0.08);
  backdrop-filter: blur(16px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.brand img {
  width: 116px;
  height: 58px;
  object-fit: contain;
  object-position: left center;
}

.brand span {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: 38px;
}

.desktop-nav a {
  position: relative;
  color: currentColor;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  opacity: 0.72;
  transition: opacity 0.25s ease;
}

.desktop-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -7px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease-out);
}

.desktop-nav a:hover {
  opacity: 1;
}

.desktop-nav a:hover::after {
  transform: scaleX(1);
}

.header-cta {
  padding: 0 24px;
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(10px);
}

.nav--solid .header-cta {
  color: var(--white);
  background: var(--navy);
}

.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 0;
  color: currentColor;
  background: transparent;
}

.menu-toggle span {
  display: block;
  width: 23px;
  height: 1.5px;
  margin: 5px auto;
  background: currentColor;
  transition:
    transform 0.35s var(--ease-out),
    opacity 0.25s ease;
}

.menu-toggle.is-open span:first-child {
  transform: translateY(6.5px) rotate(45deg);
}

.menu-toggle.is-open span:last-child {
  transform: translateY(-6.5px) rotate(-45deg);
}

.mobile-menu {
  position: fixed;
  z-index: 50;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--navy);
}

.mobile-menu[hidden] {
  display: none;
}

.mobile-menu nav {
  display: grid;
  gap: 28px;
  text-align: center;
}

.mobile-menu a {
  color: rgba(255, 255, 255, 0.78);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.properties-section {
  position: relative;
  min-height: 100vh;
  padding: 132px 0 94px;
  color: var(--navy);
  background: var(--white);
  overflow: hidden;
}

.properties-section::before,
.properties-section::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  right: 0;
  height: 520px;
  pointer-events: none;
}

.properties-section::before {
  background-image: url("./assets/madrid-hero.jpg");
  background-position: center 46%;
  background-size: cover;
}

.properties-section::after {
  background:
    linear-gradient(180deg, rgba(28, 10, 20, 0.42) 0%, rgba(28, 10, 20, 0.72) 54%, rgba(28, 10, 20, 0.95) 82%, var(--white) 100%),
    linear-gradient(90deg, rgba(28, 10, 20, 0.82) 0%, rgba(28, 10, 20, 0.46) 42%, rgba(28, 10, 20, 0.2) 100%);
}

.properties-section > .container {
  position: relative;
  z-index: 1;
}

.properties-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  gap: 48px;
  align-items: end;
  color: var(--white);
}

.properties-top .eyebrow {
  color: rgba(255, 255, 255, 0.5);
}

.intro-copy {
  padding-bottom: 10px;
}

.intro-copy p {
  margin-bottom: 24px;
  color: rgba(255, 255, 255, 0.64);
  font-size: 17px;
}

.intro-copy .arrow-link {
  color: rgba(255, 255, 255, 0.72);
}

.filter-bar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 22px;
  margin-top: 54px;
  padding: 24px;
  color: var(--navy);
  background: var(--paper);
  border: 1px solid var(--line);
}

.zone-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.zone-tabs button {
  min-height: 42px;
  border: 1px solid var(--line);
  padding: 0 14px;
  color: var(--slate);
  background: var(--white);
  font-size: 13px;
  font-weight: 700;
  transition:
    background 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease;
}

.zone-tabs button[aria-pressed="true"],
.zone-tabs button:hover {
  color: var(--white);
  border-color: var(--navy);
  background: var(--navy);
}

.status-select {
  min-width: 178px;
}

.status-select span {
  color: var(--muted);
}

.status-select select {
  color: var(--navy);
  border-color: var(--line);
  background: var(--white);
}

.result-line {
  margin: 24px 0 20px;
  color: var(--muted);
  font-size: 13px;
}

.property-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

.property-card {
  background: var(--white);
  border: 1px solid var(--line);
  transition:
    transform 0.45s var(--ease-out),
    box-shadow 0.45s var(--ease-out);
}

.property-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
}

.property-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--ivory);
}

.property-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease-out);
}

.property-card:hover .property-media img {
  transform: scale(1.035);
}

.property-media button {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  border: 0;
  color: var(--white);
  background: rgba(28, 10, 20, 0.5);
  backdrop-filter: blur(8px);
  transition:
    background 0.25s ease,
    transform 0.25s ease;
}

.property-media button:hover {
  background: rgba(28, 10, 20, 0.78);
}

.gallery-step {
  top: 50%;
  width: 40px;
  height: 48px;
  transform: translateY(-50%);
}

.gallery-step svg,
.expand-media svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.gallery-step.prev {
  left: 0;
}

.gallery-step.next {
  right: 0;
}

.expand-media {
  right: 12px;
  bottom: 12px;
  width: 42px;
  height: 42px;
}

.status-badge,
.photo-counter {
  position: absolute;
  z-index: 2;
  top: 12px;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  background: rgba(28, 10, 20, 0.72);
  backdrop-filter: blur(8px);
}

.status-badge {
  left: 12px;
}

.status-badge[data-status="en alquiler"] {
  background: rgba(79, 111, 100, 0.88);
}

.status-badge[data-status="reservado"] {
  background: rgba(99, 124, 147, 0.88);
}

.status-badge[data-status="vendido"],
.status-badge[data-status="alquilado"] {
  background: rgba(167, 96, 77, 0.88);
}

.photo-counter {
  right: 12px;
}

.property-body {
  display: block;
  width: 100%;
  padding: 22px 22px 24px;
  text-align: left;
}

.property-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.property-card h3 {
  margin-bottom: 5px;
  color: var(--navy);
  font-size: 19px;
  line-height: 1.26;
}

.property-zone {
  margin: 0 0 16px;
  color: #a58651;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .035em;
}

.property-title-link {
  transition: color 0.25s ease;
}

.property-title-link:hover {
  color: var(--gold);
}

.property-price {
  margin-bottom: 18px;
  color: var(--navy);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 25px;
  line-height: 1;
}

.property-details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--line);
}

.property-details div {
  min-width: 0;
  padding: 12px 10px;
  background: var(--paper);
}

.property-details dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.property-details dd {
  margin: 2px 0 0;
  color: var(--slate);
  font-size: 14px;
  font-weight: 700;
}

.empty-state {
  padding: 70px 20px;
  text-align: center;
  color: var(--muted);
}

.map-section {
  padding: 98px 0 112px;
  color: var(--white);
  background: var(--navy);
}

.map-heading {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  align-items: end;
  margin-bottom: 42px;
}

.map-heading .eyebrow {
  color: rgba(184, 149, 106, 0.8);
}

.clear-filter {
  flex: 0 0 auto;
  padding: 0 24px;
  color: var(--navy);
  background: var(--white);
}

.map-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 34px;
  align-items: start;
}

.madrid-map {
  width: 100%;
  min-height: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #f4f1ea;
}

.madrid-map svg {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.map-bg {
  fill: #f4f1ea;
}

.map-zone {
  outline: 0;
  cursor: pointer;
}

.map-zone path {
  fill: rgba(255, 255, 255, 0.68);
  stroke: rgba(28, 143, 168, 0.78);
  stroke-width: 1.15;
  vector-effect: non-scaling-stroke;
  transition:
    fill 0.25s ease,
    stroke 0.25s ease,
    transform 0.25s var(--ease-out);
  transform-box: fill-box;
  transform-origin: center;
}

.map-zone.has-listings path {
  fill: rgba(255, 255, 255, 0.9);
}

.map-zone-label {
  fill: #9a3a36;
  stroke: rgba(244, 241, 234, 0.84);
  paint-order: stroke;
  font-weight: 700;
  text-anchor: middle;
  pointer-events: none;
  text-transform: uppercase;
}

.map-zone:hover path,
.map-zone:focus-visible path,
.map-zone.is-active path {
  fill: rgba(184, 149, 106, 0.26);
  stroke: rgba(21, 151, 176, 1);
  transform: scale(1.01);
}

.map-zone:hover .map-zone-label,
.map-zone:focus-visible .map-zone-label,
.map-zone.is-active .map-zone-label {
  fill: #7f2525;
}

.nearby-zones {
  pointer-events: auto;
}

.map-nearby-zone rect {
  fill: rgba(28, 10, 20, 0.82);
  stroke: rgba(255, 255, 255, 0.82);
  stroke-width: 1;
  transition:
    fill 0.25s ease,
    stroke 0.25s ease;
}

.map-nearby-zone text {
  fill: var(--white);
  font-size: 11px;
  font-weight: 800;
  text-anchor: middle;
  pointer-events: none;
}

.map-nearby-zone .nearby-anchor {
  fill: var(--gold);
  stroke: var(--white);
  stroke-width: 2;
}

.map-nearby-zone:hover rect,
.map-nearby-zone:focus-visible rect,
.map-nearby-zone.is-active rect {
  fill: var(--gold);
  stroke: var(--white);
}

.property-point {
  cursor: pointer;
}

.property-point .property-count-badge {
  fill: #f4e89a;
  stroke: #b99b45;
  stroke-width: 0.8;
  filter: drop-shadow(0 1px 2px rgba(40, 30, 12, 0.16));
  transition: fill 0.2s ease, stroke 0.2s ease;
}

.property-point .property-count-label {
  fill: #6b5527;
  font-size: 9px;
  font-weight: 900;
  text-anchor: middle;
  pointer-events: none;
}

.property-point:hover .property-count-badge,
.property-point:focus-visible .property-count-badge {
  fill: #e4cf70;
  stroke: #9a7932;
}

.map-panel {
  padding: 32px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.04);
}

.map-panel h3 {
  margin: 0 0 12px;
  color: var(--white);
  font-size: 24px;
}

.map-panel p {
  color: rgba(255, 255, 255, 0.52);
}

.zone-summary {
  display: grid;
  gap: 10px;
  margin-top: 30px;
}

.zone-summary button {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 13px 14px;
  color: rgba(255, 255, 255, 0.68);
  background: rgba(255, 255, 255, 0.035);
  text-align: left;
}

.zone-summary a {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 13px 14px;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.035);
  font-size: 13px;
}

.zone-summary a:hover {
  color: var(--white);
  background: rgba(184, 149, 106, 0.18);
}

.zone-summary button:hover,
.zone-summary button[aria-pressed="true"] {
  color: var(--white);
  background: rgba(184, 149, 106, 0.18);
}

.about-section {
  padding: 116px 0;
  color: var(--white);
  background: var(--navy-deep);
}

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(300px, 0.8fr);
  gap: 74px;
  align-items: center;
}

.about-section .eyebrow {
  color: rgba(184, 149, 106, 0.78);
}

.about-section p {
  max-width: 560px;
  margin: 30px 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: 17px;
}

.about-card {
  padding: 34px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(237, 232, 226, 0.98)),
    var(--paper);
  box-shadow: var(--shadow);
}

.about-card img {
  width: 100%;
}

.stats-section {
  padding: 0;
  color: var(--white);
  background: var(--navy);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, 0.07);
}

.stats-grid div {
  padding: 44px 24px;
  text-align: center;
  background: var(--navy);
}

.stats-grid strong {
  display: block;
  color: var(--white);
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(2.6rem, 5vw, 4rem);
  font-weight: 500;
  line-height: 1;
}

.stats-grid span {
  display: block;
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.44);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.contact-section {
  padding: 116px 0;
  color: var(--white);
  background:
    linear-gradient(160deg, rgba(28, 10, 20, 0.98), rgba(43, 22, 32, 0.96)),
    var(--navy);
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(320px, 0.82fr);
  gap: 70px;
  align-items: start;
}

.contact-section .eyebrow {
  color: rgba(184, 149, 106, 0.78);
}

.contact-section p {
  max-width: 520px;
  margin: 30px 0;
  color: rgba(255, 255, 255, 0.58);
}

.contact-links {
  display: grid;
  gap: 12px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 700;
}

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

.contact-form {
  display: grid;
  gap: 18px;
  padding: 34px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.045);
}

.contact-form textarea {
  resize: vertical;
}

.site-footer {
  padding: 54px 0;
  color: rgba(255, 255, 255, 0.54);
  background: var(--navy-deep);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 46px;
  align-items: start;
}

.site-footer img {
  width: 160px;
  margin-bottom: 18px;
  filter: brightness(1.15);
}

.site-footer p {
  max-width: 260px;
  margin-bottom: 0;
  font-size: 14px;
}

.site-footer nav,
.footer-contact {
  display: grid;
  gap: 10px;
}

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

.wa-float {
  position: fixed;
  z-index: 45;
  right: 22px;
  bottom: 22px;
  display: inline-flex;
  align-items: center;
  height: 50px;
  color: var(--white);
  border-radius: 999px;
  background: #25d366;
  box-shadow: 0 9px 28px rgba(37, 211, 102, 0.26);
  animation: waIn 0.55s var(--ease-out) 1s both;
}

@keyframes waIn {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.94);
  }
}

.wa-float svg {
  width: 50px;
  height: 50px;
  padding: 14px;
  fill: currentColor;
}

.wa-float span {
  padding-right: 18px;
  font-size: 13px;
  font-weight: 700;
}

.gallery-modal {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) 74px;
  align-items: center;
  padding: 30px;
  color: var(--white);
  background: rgba(16, 6, 11, 0.94);
}

.gallery-modal[hidden] {
  display: none;
}

.gallery-modal figure {
  margin: 0;
}

.gallery-modal img {
  width: min(1180px, 100%);
  max-height: calc(100vh - 150px);
  margin-inline: auto;
  object-fit: contain;
  background: var(--navy-deep);
}

.gallery-modal figcaption {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  width: min(1180px, 100%);
  margin: 18px auto 0;
  color: rgba(255, 255, 255, 0.76);
}

.property-page .site-header {
  color: var(--white);
}

.property-hero {
  position: relative;
  min-height: 82vh;
  display: flex;
  align-items: end;
  overflow: hidden;
  color: var(--white);
  background: var(--navy);
}

.property-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.property-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(28, 10, 20, 0.34), transparent 34%),
    linear-gradient(0deg, rgba(28, 10, 20, 0.88), rgba(28, 10, 20, 0.1) 62%);
}

.property-hero-overlay {
  position: relative;
  z-index: 1;
  width: min(1200px, calc(100% - 40px));
  margin: 0 auto;
  padding: 0 0 70px;
}

.property-hero-overlay .eyebrow {
  color: rgba(255, 255, 255, 0.72);
}

.property-hero-overlay h1 {
  max-width: 820px;
  color: var(--white);
}

.property-hero-overlay p:last-child {
  margin: 22px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 18px;
}

.property-detail-section {
  padding: 92px 0;
  background: var(--white);
}

.property-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 70px;
  align-items: start;
}

.property-detail-main h2 {
  margin: 18px 0 28px;
  max-width: 760px;
}

.property-detail-description {
  max-width: 760px;
  color: var(--slate);
  font-size: 18px;
  line-height: 1.85;
}

.property-highlights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 42px 0 0;
  padding: 0;
  list-style: none;
  background: var(--line);
}

.property-highlights li {
  padding: 18px;
  color: var(--navy);
  background: var(--paper);
  font-weight: 700;
}

.property-facts {
  position: sticky;
  top: 108px;
  padding: 30px;
  border: 1px solid var(--line);
  background: var(--paper);
}

.property-facts strong {
  display: block;
  margin-bottom: 24px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 34px;
  font-weight: 500;
}

.property-facts dl {
  display: grid;
  gap: 1px;
  margin: 0 0 26px;
  background: var(--line);
}

.property-facts dl div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px;
  background: var(--white);
}

.property-facts dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.property-facts dd {
  margin: 0;
  color: var(--navy);
  font-weight: 700;
  text-align: right;
}

.property-gallery-section {
  padding: 0 0 96px;
  background: var(--white);
}

.property-gallery {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 18px;
}

.property-gallery button {
  border: 0;
  padding: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--ivory);
}

.property-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s var(--ease-out);
}

.property-gallery button:hover img {
  transform: scale(1.035);
}

.property-location-section {
  padding: 96px 0;
  color: var(--white);
  background: var(--navy);
}

.property-location-grid {
  display: grid;
  grid-template-columns: 0.58fr 1fr;
  gap: 50px;
  align-items: center;
}

.property-location-grid .eyebrow {
  color: rgba(184, 149, 106, 0.8);
}

.property-location-grid p {
  color: rgba(255, 255, 255, 0.58);
  font-size: 17px;
}

.property-detail-map {
  min-height: 440px;
}

.property-detail-map svg {
  min-height: 440px;
}

.property-detail-map .map-zone path {
  fill: rgba(255, 255, 255, 0.72);
  stroke-width: 0.95;
}

.property-detail-map .map-zone-label {
  opacity: 0.78;
}

.single-point circle {
  fill: var(--gold);
  stroke: var(--white);
}

.modal-close,
.modal-nav {
  border: 0;
  color: var(--white);
  background: rgba(255, 255, 255, 0.08);
  transition: background 0.25s ease;
}

.modal-close:hover,
.modal-nav:hover {
  background: rgba(255, 255, 255, 0.18);
}

.modal-close {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 46px;
  height: 46px;
  font-size: 31px;
  line-height: 1;
}

.modal-nav {
  display: grid;
  place-items: center;
  width: 54px;
  height: 72px;
  justify-self: center;
}

.modal-nav svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.sr,
.sr-stagger > * {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.8s var(--ease-out),
    transform 0.8s var(--ease-out);
}

.sr.vis,
.sr-stagger.vis > * {
  opacity: 1;
  transform: translateY(0);
}

.sr-stagger.vis > *:nth-child(2) {
  transition-delay: 0.08s;
}

.sr-stagger.vis > *:nth-child(3) {
  transition-delay: 0.16s;
}

.sr-stagger.vis > *:nth-child(4) {
  transition-delay: 0.24s;
}

.sr-stagger.vis > *:nth-child(5) {
  transition-delay: 0.32s;
}

.sr-stagger.vis > *:nth-child(6) {
  transition-delay: 0.4s;
}

.sr-stagger.vis > *:nth-child(7) {
  transition-delay: 0.48s;
}

.sr-stagger.vis > *:nth-child(8) {
  transition-delay: 0.56s;
}

.sr-stagger.vis > *:nth-child(9) {
  transition-delay: 0.64s;
}

.sr-stagger.vis > *:nth-child(10) {
  transition-delay: 0.72s;
}

@media (max-width: 1080px) {
  .desktop-nav,
  .header-cta {
    display: none;
  }

  .menu-toggle {
    display: block;
  }

  .property-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .map-layout,
  .about-grid,
  .contact-grid,
  .property-detail-grid,
  .property-location-grid {
    grid-template-columns: 1fr;
  }

  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .property-facts {
    position: static;
  }
}

@media (max-width: 760px) {
  .container {
    width: min(100% - 28px, 1200px);
  }

  .site-header {
    height: 74px;
    padding-inline: 16px;
  }

  .brand img {
    width: 92px;
    height: 48px;
  }

  .brand span {
    display: none;
  }

  .properties-section {
    padding-top: 108px;
  }

  .properties-section::before,
  .properties-section::after {
    height: 600px;
  }

  .properties-top,
  .filter-bar,
  .map-heading {
    display: grid;
    grid-template-columns: 1fr;
  }

  .filter-bar {
    padding: 18px;
  }

  .property-grid,
  .stats-grid,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .madrid-map,
  .madrid-map svg {
    min-height: 0;
  }

  .map-nearby-zone text {
    font-size: 12px;
  }

  .about-section,
  .contact-section,
  .map-section {
    padding-block: 82px;
  }

  .property-hero {
    min-height: 72vh;
  }

  .property-hero-overlay {
    width: min(100% - 28px, 1200px);
    padding-bottom: 44px;
  }

  .property-detail-section,
  .property-location-section {
    padding-block: 72px;
  }

  .property-highlights,
  .property-gallery {
    grid-template-columns: 1fr;
  }

  .property-facts {
    padding: 22px;
  }

  .gallery-modal {
    grid-template-columns: 1fr;
    padding: 18px;
  }

  .modal-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  .modal-nav.prev {
    left: 10px;
  }

  .modal-nav.next {
    right: 10px;
  }

  .gallery-modal figcaption {
    display: grid;
  }

  .wa-float span {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .sr,
  .sr-stagger > * {
    opacity: 1;
    transform: none;
  }
}


/* Personal brand refresh — Samadi Real Estate */
:root {
  --navy: #14233d;
  --navy-soft: #1d3150;
  --navy-deep: #0d1729;
  --paper: #f7f4ee;
  --gold: #b49a72;
}
.site-header { padding-inline: max(22px, calc((100vw - 1200px) / 2 + 22px)); }
.brand img { width: 126px; height: 68px; object-fit: contain; }
.site-header.nav--solid .brand img { filter: none; }
.personal-hero {
  position: relative;
  min-height: min(850px, 100svh);
  padding: 142px 0 82px;
  color: var(--white);
  background: var(--navy-deep);
  overflow: hidden;
}
.personal-hero-backdrop {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(13,23,41,.98) 0%, rgba(13,23,41,.91) 47%, rgba(13,23,41,.45) 100%), url("./assets/madrid-hero.jpg") center/cover;
  opacity: .95;
}
.personal-hero-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .72fr);
  gap: clamp(36px, 7vw, 100px); align-items: center;
}
.personal-hero-copy { max-width: 720px; }
.personal-hero .eyebrow { color: var(--gold); letter-spacing: .16em; }
.personal-hero h1 { max-width: 760px; margin: 0 0 28px; font-size: clamp(3rem, 6.3vw, 6.1rem); letter-spacing: -.035em; }
.personal-hero h1 span { display: block; color: #d6c4a6; }
.hero-intro { max-width: 620px; margin: 0 0 30px; color: rgba(255,255,255,.76); font-size: clamp(16px, 1.45vw, 19px); line-height: 1.8; }
.hero-actions { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.hero-actions .primary-cta { width: auto; min-height: 54px; padding: 0 24px; color: var(--navy-deep); background: #e8dfd0; }
.hero-actions .arrow-link { color: rgba(255,255,255,.86); }
.hero-signature { margin: 44px 0 0; color: rgba(255,255,255,.48); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.hero-portrait-frame { position: relative; max-width: 420px; justify-self: end; width: 100%; }
.hero-portrait-placeholder {
  position: relative; display: flex; flex-direction: column; justify-content: space-between;
  aspect-ratio: 4 / 5; min-height: 390px; padding: 28px;
  border: 1px solid rgba(232,223,208,.48);
  background: linear-gradient(180deg, rgba(20,35,61,.08), rgba(13,23,41,.88)), url("./assets/madrid-hero.jpg") center/cover;
  box-shadow: 18px 18px 0 rgba(180,154,114,.18);
}
.portrait-mark { align-self: flex-end; display: grid; place-items: center; width: 68px; height: 68px; border: 1px solid rgba(255,255,255,.6); border-radius: 50%; color: #e8dfd0; font-family: "Playfair Display", Georgia, serif; font-size: 24px; }
.portrait-caption { font-family: "Playfair Display", Georgia, serif; font-size: 28px; }
.portrait-caption small { display: block; margin-top: 7px; color: rgba(255,255,255,.7); font-family: "DM Sans", sans-serif; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.portrait-note { margin: 17px 0 0; color: rgba(255,255,255,.55); font-size: 11px; text-align: right; }
.hero-bottomline { position: relative; z-index: 1; display: flex; justify-content: center; gap: clamp(24px, 6vw, 92px); margin-top: 74px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.62); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; }
.properties-section { min-height: 0; padding-top: 100px; background: var(--paper); }
.properties-section::before, .properties-section::after { display: none; }
.properties-top { color: var(--navy); }
.properties-top .eyebrow { color: var(--gold); }
.intro-copy p { color: var(--slate); }
.intro-copy .arrow-link { color: var(--navy); }
.filter-bar { margin-top: 38px; }
.biography-section { padding: 120px 0; color: var(--navy); background: #fff; }
.biography-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: clamp(38px, 8vw, 112px); align-items: start; }
.biography-heading { position: sticky; top: 120px; }
.biography-heading .eyebrow, .philosophy-intro .eyebrow { color: #92774f; letter-spacing: .15em; }
.biography-heading h2, .philosophy-intro h2 { font-size: clamp(2.5rem, 4.4vw, 4.4rem); }
.biography-heading h2 span, .philosophy-intro h2 span { color: #8e7657; }
.bio-lead { margin-top: 28px; color: var(--muted); font-size: 18px; }
.biography-copy { color: #4c5058; font-size: 16px; line-height: 1.9; }
.biography-copy p { margin-bottom: 22px; }
.biography-copy blockquote { margin: 34px 0; padding: 8px 0 8px 24px; border-left: 2px solid var(--gold); color: var(--navy); font-family: "Playfair Display", Georgia, serif; font-size: 25px; line-height: 1.5; }
.bio-note { padding: 14px 16px; border-left: 2px solid #c7b99f; background: var(--paper); color: #766e63; font-size: 12px; line-height: 1.65; }
.philosophy-section { padding: 112px 0; color: var(--white); background: var(--navy-deep); }
.philosophy-intro { max-width: 790px; margin-bottom: 54px; }
.philosophy-intro h2 span { color: #d6c4a6; }
.philosophy-intro > p:last-child { max-width: 680px; margin-top: 24px; color: rgba(255,255,255,.66); font-size: 17px; line-height: 1.8; }
.philosophy-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.14); }
.philosophy-grid article { min-height: 240px; padding: 28px 24px; background: var(--navy-deep); }
.philosophy-grid article > span { color: var(--gold); font-size: 11px; letter-spacing: .16em; }
.philosophy-grid h3 { margin: 32px 0 12px; color: #f3eee6; font-family: "Playfair Display", Georgia, serif; font-size: 23px; font-weight: 500; }
.philosophy-grid p { margin: 0; color: rgba(255,255,255,.6); font-size: 14px; line-height: 1.75; }
.philosophy-close { margin: 42px 0 0; color: #d6c4a6; font-family: "Playfair Display", Georgia, serif; font-size: 23px; }
.site-footer { background: #0a1322; }
.site-footer img { width: 150px; max-height: 86px; object-fit: contain; }
.site-footer p { max-width: 280px; }
@media (max-width: 900px) {
  .personal-hero { min-height: 0; padding: 126px 0 54px; }
  .personal-hero-grid { grid-template-columns: 1fr; gap: 42px; }
  .hero-portrait-frame { justify-self: start; max-width: 460px; }
  .hero-portrait-placeholder { min-height: 330px; }
  .hero-bottomline { justify-content: flex-start; flex-wrap: wrap; margin-top: 54px; }
  .biography-grid { grid-template-columns: 1fr; }
  .biography-heading { position: static; }
  .philosophy-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 600px) {
  .brand img { width: 105px; height: 58px; }
  .personal-hero h1 { font-size: clamp(2.8rem, 13vw, 4.2rem); }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 18px; }
  .hero-signature { line-height: 1.8; }
  .hero-bottomline { gap: 14px 24px; font-size: 9px; letter-spacing: .12em; }
  .properties-section { padding-top: 78px; }
  .filter-bar { align-items: stretch; flex-direction: column; padding: 16px; }
  .philosophy-grid { grid-template-columns: 1fr; }
  .philosophy-grid article { min-height: 0; }
  .biography-section, .philosophy-section { padding: 78px 0; }
}

:root{--navy:#142a49;--navy-soft:#203b60;--navy-deep:#0b1b30;--paper:#f8f5ed;--white:#fffdf8;--ivory:#eee7d8;--warm:#d6c8ad;--line:#ded5c4;--slate:#45464a;--muted:#837c70;--gold:#b49a62;--burgundy:#8d2f32}
body{background:var(--paper);color:var(--navy)}.site-header{background:rgba(248,245,237,.96);color:var(--navy);border-bottom:1px solid rgba(180,154,98,.24);backdrop-filter:blur(14px)}.site-header.nav--transparent{background:rgba(248,245,237,.92)}.site-header .desktop-nav a,.site-header .brand{color:var(--navy)}.brand img{width:152px;height:78px;object-fit:contain}.header-cta{background:var(--navy);color:var(--paper);border:1px solid var(--navy)}.header-cta:hover{background:var(--burgundy);border-color:var(--burgundy)}
.personal-hero{min-height:780px;padding:155px 0 58px;background:var(--navy-deep);color:var(--white)}.personal-hero-backdrop{background:linear-gradient(90deg,rgba(11,27,48,.93),rgba(11,27,48,.78) 48%,rgba(11,27,48,.28)),url("./assets/madrid-hero.jpg") center/cover}.personal-hero .eyebrow,.eyebrow{color:var(--gold)}.personal-hero h1{font-size:clamp(3.2rem,6.4vw,6.2rem);line-height:1.02;max-width:780px}.personal-hero h1 span{color:#d8c49b}.hero-intro{font-size:17px;max-width:590px;line-height:1.85}.hero-actions .primary-cta{background:var(--paper);color:var(--navy);border:1px solid var(--paper)}.hero-actions .primary-cta:hover{background:var(--gold);border-color:var(--gold)}.hero-portrait-placeholder{background:linear-gradient(180deg,rgba(20,42,73,.08),rgba(11,27,48,.8)),url("./assets/madrid-hero.jpg") center/cover;border:1px solid rgba(180,154,98,.7);box-shadow:16px 16px 0 rgba(180,154,98,.28)}.portrait-mark{color:var(--paper);border-color:var(--gold)}.hero-bottomline{border-color:rgba(180,154,98,.45);color:#e0d4bd}
.properties-section{background:var(--paper);color:var(--navy);padding-top:104px}.properties-top h1,.properties-top h2,.map-heading h2,.biography-heading h2,.philosophy-intro h2,.contact-grid h2{color:var(--navy)}.properties-top h1 span,.map-heading h2 span,.biography-heading h2 span,.contact-grid h2 span{color:#92774f}.filter-bar{border:1px solid var(--line);background:#fffdf9}.zone-tabs button[aria-pressed=true],.zone-tabs button.active{background:var(--navy);color:var(--paper)}.map-section{background:#eee7d8;color:var(--navy)}.map-bg{fill:#f8f5ed}.biography-section{background:#fffdf9}.biography-heading .eyebrow,.philosophy-intro .eyebrow{color:#92774f}.biography-copy blockquote{border-color:var(--burgundy);color:var(--navy)}.philosophy-section{background:var(--navy-deep);color:var(--white)}.philosophy-grid{border-color:rgba(180,154,98,.32);background:rgba(180,154,98,.32)}.philosophy-grid article{background:var(--navy-deep)}.philosophy-grid article>span{color:var(--gold)}.philosophy-grid h3{color:var(--paper)}.philosophy-grid p{color:rgba(255,253,248,.7)}.philosophy-close{color:#d8c49b}.contact-section{background:var(--paper);color:var(--navy)}.contact-form{background:#fffdf9;border:1px solid var(--line);box-shadow:0 22px 70px rgba(20,42,73,.07)}.contact-form input,.contact-form textarea{background:#fffdf9;border-color:var(--line)}.primary-cta.dark,.contact-form .primary-cta{background:var(--navy);color:var(--paper)}.site-footer{background:#09182b;color:var(--paper)}.site-footer img{width:165px;max-height:100px;object-fit:contain;background:var(--paper);padding:5px}.wa-float{background:var(--burgundy);color:white}@media(max-width:900px){.brand img{width:125px;height:68px}.personal-hero{padding-top:130px}}@media(max-width:600px){.brand img{width:105px;height:60px}.personal-hero h1{font-size:clamp(2.7rem,12vw,4rem)}.site-header{background:var(--paper)}}


/* Marca y retrato: proporciones legibles y acabado editorial */
.brand img { width: 218px; height: 66px; object-fit: contain; object-position: left center; }
.site-header.nav--solid .brand img { filter: none; }
.hero-portrait-placeholder {
  position: relative; display: block; width: min(100%, 390px); aspect-ratio: .76;
  margin-inline: auto; overflow: hidden; border: 1px solid rgba(211,177,115,.9);
  border-radius: 50% / 44%; background: linear-gradient(145deg,#26384a,#111b2b);
  box-shadow: 0 28px 90px rgba(0,0,0,.3),0 0 0 10px rgba(211,177,115,.07);
}
.hero-portrait-placeholder::before {
  content:""; position:absolute; z-index:1; inset:0;
  background:linear-gradient(180deg,rgba(14,24,38,.02) 38%,rgba(14,24,38,.84) 100%);
  pointer-events:none;
}
.portrait-mark {
  position:absolute; inset:0; display:grid; place-items:center;
  color:rgba(248,245,237,.92); font:italic 160px/1 "Playfair Display",Georgia,serif;
  letter-spacing:-.12em; transform:translateX(-.05em); opacity:.88;
}
.portrait-caption {
  position:absolute; z-index:2; left:12px; right:12px; bottom:28px; color:#f8f5ed;
  text-align:center; font-family:"Playfair Display",Georgia,serif;
  font-size:clamp(1.2rem,2vw,1.65rem); letter-spacing:.06em;
}
.portrait-caption small { display:block; margin-top:7px; font-family:"DM Sans",sans-serif; font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; }
.personal-hero-backdrop {
  background-image:linear-gradient(90deg,rgba(9,22,38,.88) 0%,rgba(9,22,38,.62) 42%,rgba(9,22,38,.18) 100%),url("./assets/madrid-hero.jpg");
  background-position:center,center 48%; background-size:cover;
}
.sr,.sr-stagger { opacity:0; transform:translate3d(0,34px,0); transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1); }
.sr.vis,.sr-stagger.vis { opacity:1; transform:translate3d(0,0,0); }
.sr-stagger.vis > * { animation:samadiRise .8s cubic-bezier(.16,1,.3,1) both; }
.sr-stagger.vis > *:nth-child(2) { animation-delay:.09s; }
.sr-stagger.vis > *:nth-child(3) { animation-delay:.18s; }
.sr-stagger.vis > *:nth-child(4) { animation-delay:.27s; }
@keyframes samadiRise { from {opacity:0;transform:translate3d(24px,18px,0)} to {opacity:1;transform:translate3d(0,0,0)} }
@media(max-width:760px) { .brand img {width:154px;height:56px} .hero-portrait-placeholder {width:min(78vw,310px)} }
@media(prefers-reduced-motion:reduce) { .sr,.sr-stagger,.sr-stagger.vis > * {animation:none!important;transition:none!important;transform:none!important;opacity:1!important} }


/* Refinamiento de legibilidad, accesibilidad y comportamiento móvil */
:root { scroll-behavior: smooth; }
img { max-width: 100%; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
.map-zone:focus-visible, .property-point:focus-visible {
  outline: 2px solid var(--gold, #b79a61);
  outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
@media (max-width: 760px) {
  .personal-hero { min-height: auto; padding-top: 112px; }
  .personal-hero-grid { gap: 34px; }
  .personal-hero-copy h1 { font-size: clamp(2.5rem, 11vw, 4rem); line-height: 1.02; }
  .hero-portrait-frame { width: min(76vw, 330px); margin-inline: auto; }
  .properties-section { padding-top: 88px; }
  .properties-top { grid-template-columns: 1fr; gap: 20px; }
  .filter-bar { align-items: stretch; flex-direction: column; padding: 18px; }
  .property-grid { grid-template-columns: 1fr; gap: 20px; }
  .property-body { padding: 18px; }
  .map-layout { grid-template-columns: 1fr; }
  .biography-grid, .contact-grid { grid-template-columns: 1fr; gap: 32px; }
  .philosophy-grid { grid-template-columns: 1fr; }
  .site-footer .footer-grid { grid-template-columns: 1fr; gap: 24px; }
}



/* Rediseño editorial: dirección visual aprobada para Samadi Real Estate */
:root{--navy:#0b1b30;--navy-soft:#142a43;--navy-deep:#071321;--paper:#f7f3ec;--ivory:#eee6da;--gold:#d2b27a;--line:#d9cdbb;--slate:#3f4650;--muted:#8a8178;--shadow:0 24px 70px rgba(7,19,33,.18)}
html{scroll-behavior:smooth}
.site-header{background:linear-gradient(180deg,rgba(7,19,33,.86),rgba(7,19,33,.16));border-bottom:1px solid rgba(230,207,159,.16);color:#fff;backdrop-filter:blur(8px)}
.site-header a{color:#fff}
.brand img{background:transparent!important;padding:0!important;filter:drop-shadow(0 2px 8px rgba(0,0,0,.2))}
.personal-hero{min-height:min(900px,100svh);padding:150px 0 62px;background:var(--navy-deep);color:#fff;display:flex;align-items:center;position:relative;isolation:isolate}
.personal-hero-backdrop{position:absolute;inset:0;z-index:-1;background-image:linear-gradient(90deg,rgba(7,19,33,.91) 0%,rgba(7,19,33,.68) 39%,rgba(7,19,33,.12) 100%),url("./assets/madrid-hero.jpg");background-position:center;background-size:cover}
.personal-hero-grid{grid-template-columns:minmax(0,1.08fr) minmax(300px,.82fr);align-items:center;gap:clamp(32px,5vw,80px)}
.personal-hero-copy{max-width:690px}
.personal-hero .eyebrow{color:#e4c78e;letter-spacing:.22em;font-size:.72rem;text-transform:uppercase}
.personal-hero h1{max-width:740px;margin:0 0 22px;font-family:"Playfair Display",Georgia,serif;font-size:clamp(3.3rem,5.6vw,5.8rem);font-weight:400;line-height:1.04;letter-spacing:-.045em}
.personal-hero h1 span{display:block;color:#e4c78e;font-style:italic}
.hero-intro{max-width:520px;font-size:clamp(1rem,1.25vw,1.13rem);line-height:1.8;color:rgba(255,255,255,.91)}
.hero-actions .primary-cta{display:inline-flex;align-items:center;gap:24px;padding:16px 24px;background:#e4c78e;color:#102036;border:1px solid #e4c78e;text-transform:uppercase;letter-spacing:.08em;font-size:.74rem;font-weight:700}
.hero-actions .primary-cta:hover{background:#f4e4c3;border-color:#f4e4c3;transform:translateY(-2px)}
.hero-actions .arrow-link{color:#fff}
.hero-signature{color:#e4c78e;text-transform:uppercase;letter-spacing:.16em;font-size:.7rem}
.hero-portrait-frame{width:min(100%,410px);justify-self:center;position:relative}
.hero-portrait-placeholder{position:relative;min-height:470px;aspect-ratio: .72;overflow:hidden;border:2px solid #e4c78e;border-radius:49% 49% 48% 48%;background:linear-gradient(180deg,rgba(7,19,33,.04) 38%,rgba(7,19,33,.88) 100%),url("./assets/madrid-hero.jpg") center/cover;box-shadow:0 0 0 1px rgba(228,199,142,.25),0 26px 70px rgba(0,0,0,.3);isolation:isolate}
.hero-portrait-placeholder::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(7,19,33,.86));pointer-events:none}
.portrait-mark{position:absolute;top:22px;left:22px;border:1px solid rgba(228,199,142,.8);border-radius:50%;width:44px;height:44px;display:grid;place-items:center;color:#e4c78e;background:rgba(7,19,33,.35)}
.portrait-caption{position:absolute;z-index:2;bottom:28px;left:12px;right:12px;text-align:center;color:#e4c78e;font-family:"Playfair Display",Georgia,serif;font-size:1.3rem;letter-spacing:.05em}
.portrait-caption small{display:block;margin-top:8px;color:#fff;font-family:"DM Sans",sans-serif;font-size:.62rem;letter-spacing:.24em;text-transform:uppercase}
.hero-bottomline{max-width:1240px;margin:34px auto 0;padding:22px 24px 0;border-top:1px solid rgba(228,199,142,.35);color:#e9deca;text-transform:uppercase;letter-spacing:.18em;font-size:.65rem}
.properties-section{background:#0a1a2d;color:#fff;padding:110px 0}
.properties-section::before{opacity:.25;background-image:url("./assets/madrid-hero.jpg");background-position:center;background-size:cover}
.properties-section::after{background:linear-gradient(90deg,rgba(7,19,33,.95),rgba(7,19,33,.72))}
.properties-top h1,.properties-top h2{color:#fff;font-family:"Playfair Display",Georgia,serif;font-weight:400}
.properties-top h1 span,.properties-top h2 span{color:#e4c78e}
.properties-top p,.result-line{color:rgba(255,255,255,.78)}
.filter-bar{background:rgba(255,255,255,.07);border-color:rgba(228,199,142,.25);color:#fff}
.filter-bar label{color:#eee}
.property-card{background:#f8f4ec;color:#17253a;border:1px solid rgba(228,199,142,.35);box-shadow:0 18px 48px rgba(0,0,0,.25)}
.biography-section{background:#f7f3ec;color:#15243a;position:relative}
.biography-section::before{content:"";position:absolute;left:0;bottom:0;width:18%;height:100%;opacity:.08;background:url("./assets/madrid-hero.jpg") center/cover;mask-image:linear-gradient(90deg,#000,transparent)}
.biography-heading h2,.philosophy-intro h2,.contact-grid h2{font-family:"Playfair Display",Georgia,serif;font-weight:400;letter-spacing:-.035em}
.biography-heading .eyebrow,.philosophy-intro .eyebrow,.contact-grid .eyebrow{color:#a58651;letter-spacing:.18em;text-transform:uppercase}
.biography-copy p{line-height:1.85}
.philosophy-section{background:#0a1a2d;color:#fff;background-image:linear-gradient(135deg,rgba(7,19,33,.96),rgba(12,33,53,.9)),url("./assets/madrid-hero.jpg");background-position:center;background-size:cover}
.philosophy-intro h2 span{color:#e4c78e}
.philosophy-grid{gap:1px;border:1px solid rgba(228,199,142,.32);background:rgba(228,199,142,.25)}
.philosophy-grid article{background:rgba(7,19,33,.88);padding:32px}
.philosophy-grid h3{color:#fff}
.philosophy-grid article>span{color:#e4c78e}
.contact-section{background:#f7f3ec;color:#15243a}
.contact-form{border:1px solid #ded2bf;border-radius:2px;box-shadow:0 24px 70px rgba(7,19,33,.1)}
.primary-cta.dark,.contact-form .primary-cta{background:#0b1b30;color:#f7f3ec;border-color:#0b1b30}
.site-footer{background:#071321;color:#f7f3ec}
.wa-float{background:#b99a64;color:#071321}
@media(max-width:900px){.site-header{background:rgba(7,19,33,.94)}.personal-hero{min-height:0;padding:130px 0 45px}.personal-hero-grid{grid-template-columns:1fr;gap:36px}.personal-hero-copy{max-width:700px}.hero-portrait-frame{justify-self:center;max-width:330px}.hero-portrait-placeholder{min-height:390px}.hero-bottomline{margin:28px 24px 0}}
@media(max-width:600px){.personal-hero h1{font-size:clamp(2.8rem,12vw,4rem)}.hero-portrait-placeholder{min-height:350px}.properties-section{padding:76px 0}.biography-section,.philosophy-section{padding:78px 0}.hero-bottomline{font-size:.56rem;letter-spacing:.1em;gap:12px}}

/* Hero portrait: the profile photograph must sit inside the gold oval. */
.hero-portrait-placeholder{background:#10243a;}
.hero-portrait-placeholder::before{z-index:1;}
.hero-portrait-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 31%;border-radius:inherit;display:block;transform:scale(1.28);transform-origin:center 31%;}
.hero-portrait-placeholder .portrait-caption{z-index:2;text-shadow:0 2px 12px rgba(0,0,0,.65);}

/* Retrato integrado: el fondo del tren no forma parte de la composición final. */
.hero-portrait-placeholder {
  background:
    linear-gradient(180deg, rgba(7, 19, 33, .04) 40%, rgba(7, 19, 33, .78) 100%),
    url("./assets/madrid-hero.jpg") center / cover;
}
.hero-portrait-photo {
  object-fit: contain;
  object-position: center bottom;
  transform: scale(1.04);
  transform-origin: center bottom;
  z-index: 0;
}
.hero-signature {
  text-transform: none;
  letter-spacing: .04em;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 16px;
  font-style: italic;
  font-weight: 400;
}

/* Contenido de marca: una firma personal, no un catálogo corporativo. */
.brand-section {
  padding: clamp(82px, 10vw, 132px) 0;
  color: #10243b;
  background: #f7f3ec;
}
.brand-grid {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
  gap: clamp(44px, 8vw, 128px);
  align-items: start;
}
.brand-heading { position: sticky; top: 120px; }
.brand-heading h2 {
  max-width: 520px;
  margin: 0;
  color: #10243b;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(2.7rem, 5vw, 5rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.04em;
}
.brand-heading h2 span { color: #a47f49; }
.brand-copy {
  max-width: 700px;
  color: #46515d;
  font-size: 17px;
  line-height: 1.85;
}
.brand-copy p { margin: 0 0 20px; }
.brand-copy .brand-tagline {
  margin-top: 32px;
  color: #a47f49;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 25px;
  font-style: italic;
}

.trajectory-layout .biography-copy > p:first-child {
  max-width: 720px;
  margin-bottom: 36px;
}
.trajectory-list {
  display: grid;
  gap: 0;
  border-top: 1px solid #d7cbb9;
}
.trajectory-list article {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid #d7cbb9;
}
.trajectory-list article > span {
  color: #a47f49;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
}
.trajectory-list h3 {
  margin: 0 0 6px;
  color: #10243b;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 22px;
  font-weight: 500;
}
.trajectory-list p { margin: 0; font-size: 14px; line-height: 1.65; }

.philosophy-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) {
  .philosophy-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .brand-grid { grid-template-columns: 1fr; gap: 32px; }
  .brand-heading { position: static; }
  .philosophy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .philosophy-grid { grid-template-columns: 1fr; }
  .trajectory-list article { grid-template-columns: 40px 1fr; gap: 10px; }
}

/* Hero final: Puerta de Alcalá, retrato recortado y jerarquía de la referencia. */
.personal-hero-backdrop {
  background-image:
    linear-gradient(90deg, rgba(5, 18, 34, .98) 0%, rgba(5, 18, 34, .86) 36%, rgba(5, 18, 34, .54) 66%, rgba(5, 18, 34, .28) 100%),
    linear-gradient(0deg, rgba(5, 18, 34, .5), rgba(5, 18, 34, .08) 65%),
    url("./assets/madrid-puerta-alcala.jpg");
  background-position: center 56%;
}
.hero-portrait-placeholder {
  background:
    linear-gradient(180deg, rgba(7, 19, 33, .06) 40%, rgba(7, 19, 33, .76) 100%),
    url("./assets/madrid-puerta-alcala.jpg") center / cover;
}
.hero-portrait-photo {
  object-fit: contain;
  object-position: center bottom;
  transform: scale(1.04);
  transform-origin: center bottom;
}

/* Composición aprobada del hero: conserva exactamente la referencia visual entregada. */
.site-header {
  opacity: 0;
  pointer-events: none;
}
.personal-hero {
  min-height: 0;
  height: min(100svh, 1040px);
  padding: 0;
  display: block;
  background: #071a2d;
}
.personal-hero-backdrop {
  opacity: 1;
  filter: none;
  background: url("./assets/madrid-puerta-alcala.jpg") center / cover no-repeat;
}
.personal-hero-copy,
.hero-portrait-frame,
.hero-bottomline {
  opacity: 0;
  pointer-events: none;
}
.wa-float {
  opacity: 0;
  pointer-events: none;
}

/* Composición aprobada del hero: conserva exactamente la referencia visual entregada. */
.site-header {
  opacity: 0;
  pointer-events: none;
}
.personal-hero {
  min-height: 0;
  height: clamp(520px, 55.664vw, 1040px);
  padding: 0;
  display: block;
  background: #071a2d;
}
.personal-hero-backdrop {
  opacity: 1;
  filter: none;
  background: url("./assets/madrid-puerta-alcala.jpg") center / cover no-repeat;
}
.personal-hero-copy,
.hero-portrait-frame,
.hero-bottomline {
  opacity: 0;
  pointer-events: none;
}
.site-header {
  padding-inline: clamp(24px, 4vw, 80px);
}
.properties-section::before,
.biography-section::before {
  background-image: url("./assets/madrid-puerta-alcala.jpg");
}
.philosophy-section {
  background-image: linear-gradient(135deg, rgba(7,19,33,.96), rgba(12,33,53,.9)), url("./assets/madrid-puerta-alcala.jpg");
}

/* Ajuste final de contraste y composición siguiendo la referencia visual. */
.site-header,
.site-header.nav--transparent,
.site-header.nav--solid {
  background: #f5f2eb;
  color: #0b1b30;
  border-bottom: 1px solid rgba(180, 154, 98, .28);
  box-shadow: 0 8px 24px rgba(7, 19, 33, .08);
}
.site-header a,
.site-header .desktop-nav a,
.site-header .brand { color: #0b1b30; }
.site-header .desktop-nav a { font-weight: 700; }
.site-header .desktop-nav a:hover,
.site-header .desktop-nav a:focus-visible { color: #9b773f; }
.header-cta { background: #0b1b30; color: #f7f3ec !important; }
.header-cta:hover,
.header-cta:focus-visible { background: #9b773f; border-color: #9b773f; }

.personal-hero { min-height: min(820px, 100svh); padding-top: 146px; }
.personal-hero > .container { width: min(1770px, calc(100% - 100px)); }
.personal-hero-backdrop {
  opacity: 1;
  filter: saturate(.86) contrast(1.05);
  background-image:
    linear-gradient(90deg, rgba(5, 18, 34, .98) 0%, rgba(5, 18, 34, .86) 36%, rgba(5, 18, 34, .56) 66%, rgba(5, 18, 34, .32) 100%),
    linear-gradient(0deg, rgba(5, 18, 34, .45), rgba(5, 18, 34, .04) 65%),
    url("./assets/madrid-hero.jpg");
  background-position: center;
  background-size: cover;
}
.personal-hero h1 { color: #fffdf8; text-shadow: 0 3px 18px rgba(0, 0, 0, .2); }
.personal-hero h1 { max-width: 900px; font-size: clamp(3rem, 5.15vw, 5.6rem); }
.personal-hero h1 span { color: #e6c987; }
.personal-hero .hero-intro { color: #fffdf8; text-shadow: 0 2px 12px rgba(0, 0, 0, .28); }
.hero-actions .primary-cta { background: #e8c987; color: #0b1b30; border-color: #e8c987; }
.hero-actions .arrow-link { color: #fffdf8; font-weight: 700; text-shadow: 0 2px 10px rgba(0, 0, 0, .35); }
.hero-signature { color: #e6c987; }
.hero-bottomline { display: none; }
.hero-portrait-placeholder { box-shadow: 0 0 0 1px rgba(230, 201, 135, .35), 0 28px 70px rgba(0, 0, 0, .42); }

.map-section {
  background: #eee6d8;
  color: #0b1b30;
}
.map-heading h2,
.map-heading p,
.map-heading .eyebrow { color: #0b1b30; }
.map-heading .eyebrow { color: #9b773f; }
.clear-filter { background: #0b1b30; color: #f7f3ec; }
.clear-filter:hover,
.clear-filter:focus-visible { background: #9b773f; color: #fff; }
.map-panel {
  border: 1px solid #d3c4ad;
  background: #fffdf8;
  color: #0b1b30;
  box-shadow: 0 18px 42px rgba(7, 19, 33, .08);
}
.map-panel h3 { color: #0b1b30; }
.map-panel p { color: #4f5863; }
.zone-summary button,
.zone-summary a {
  border-color: #d3c4ad;
  color: #25344a;
  background: #f7f3ec;
}
.zone-summary button:hover,
.zone-summary button[aria-pressed="true"],
.zone-summary a:hover { color: #fff; background: #0b1b30; }
.zone-summary button strong,
.zone-summary a strong { color: inherit; }

@media (max-width: 900px) {
  .site-header,
  .site-header.nav--transparent,
  .site-header.nav--solid { background: #f5f2eb; }
  .personal-hero { padding-top: 126px; }
}
@media (max-width: 760px) {
  .personal-hero > .container { width: min(100% - 28px, 1200px); }
}

/* Hero construido con HTML/CSS: la imagen entregada solo actúa como referencia visual. */
.site-header,
.site-header.nav--transparent,
.site-header.nav--solid {
  opacity: 1;
  pointer-events: auto;
  left: 0;
  right: 0;
  background: linear-gradient(180deg, rgba(7, 19, 33, .86), rgba(7, 19, 33, .12));
  border-bottom-color: rgba(230, 207, 159, .18);
  color: #fff;
}
.site-header a,
.site-header .desktop-nav a,
.site-header .brand { color: #fff; }
.site-header .desktop-nav a { opacity: .9; }
.brand img {
  width: 218px;
  height: 66px;
  object-fit: contain;
  object-position: left center;
}
.header-cta {
  color: #071321 !important;
  background: #e8c987;
  border-color: #e8c987;
}
.personal-hero {
  min-height: min(900px, 100svh);
  height: auto;
  padding: 132px 0 46px;
  display: flex;
  align-items: center;
  background: #071321;
}
.personal-hero-backdrop {
  opacity: 1;
  filter: saturate(.9) contrast(1.05);
  background-image:
    linear-gradient(90deg, rgba(5, 18, 34, .96) 0%, rgba(5, 18, 34, .78) 38%, rgba(5, 18, 34, .28) 100%),
    linear-gradient(0deg, rgba(5, 18, 34, .55), rgba(5, 18, 34, .08) 65%),
    url("./assets/madrid-puerta-alcala.jpg");
  background-position: center 48%;
  background-size: cover;
}
.personal-hero-copy,
.hero-portrait-frame,
.hero-bottomline {
  opacity: 1;
  pointer-events: auto;
}
.personal-hero-copy { max-width: 680px; }
.personal-hero h1 {
  max-width: 700px;
  font-size: clamp(2.4rem, 4vw, 4.8rem);
  line-height: 1.04;
}
.hero-intro { max-width: 540px; }
.hero-portrait-frame { width: min(100%, 360px); }
.hero-portrait-placeholder {
  min-height: 0;
  aspect-ratio: .76;
  background:
    linear-gradient(180deg, rgba(7, 19, 33, .08) 34%, rgba(7, 19, 33, .78) 100%),
    url("./assets/madrid-puerta-alcala.jpg") center / cover;
}
.hero-portrait-photo {
  object-fit: contain;
  object-position: center bottom;
  transform: scale(1.04);
  transform-origin: center bottom;
}
.hero-bottomline { display: none; }
.wa-float { opacity: 1; pointer-events: auto; }
@media (min-width: 1081px) {
  .personal-hero-backdrop { background-size: 118% auto; background-position: 25% 48%; }
}
@media (min-width: 761px) {
  .desktop-nav { display: flex; }
  .header-cta { display: inline-flex; }
  .menu-toggle { display: none; }
}
@media (max-width: 900px) {
  .site-header,
  .site-header.nav--transparent,
  .site-header.nav--solid { background: rgba(7, 19, 33, .94); }
  .personal-hero { min-height: 0; padding-top: 122px; }
}
@media (max-width: 760px) {
  .brand img { width: 154px; height: 56px; }
  .personal-hero { padding-bottom: 44px; }
  .hero-portrait-placeholder { min-height: 430px; }
}
@media (min-width: 901px) {
  .personal-hero-backdrop { background-size: 125% auto; background-position: 0 45%; }
  .hero-portrait-frame {
    width: min(100%, 285px);
    justify-self: start;
    transform: translateX(-190px);
  }
}

/* Composición de referencia: un único Madrid panorámico y Elías recortado en primer plano. */
.site-header {
  height: 96px;
  background: linear-gradient(180deg, rgba(7, 19, 33, .28), rgba(7, 19, 33, 0));
  border-bottom-color: transparent;
  backdrop-filter: none;
}
.personal-hero {
  min-height: 100svh;
  padding: 136px 0 42px;
}
.personal-hero > .container {
  width: min(100% - 8px, 1400px);
}
.personal-hero-backdrop {
  background-image:
    linear-gradient(90deg, rgba(5, 18, 34, .78) 0%, rgba(5, 18, 34, .42) 42%, rgba(5, 18, 34, .10) 100%),
    linear-gradient(110deg, rgba(5, 18, 34, .14), rgba(5, 18, 34, .03) 62%, rgba(190, 125, 51, .14)),
    linear-gradient(0deg, rgba(5, 18, 34, .48), rgba(5, 18, 34, .03) 72%),
    url("./assets/madrid-puerta-alcala-sunset.png");
  background-size: cover;
  background-position: center center;
}
.personal-hero-grid {
  grid-template-columns: minmax(0, 1fr) minmax(330px, 420px);
  gap: clamp(24px, 4vw, 70px);
  align-items: center;
}
.personal-hero-copy { max-width: 630px; transform: translateY(-38px); }
.personal-hero h1 {
  max-width: 590px;
  margin-bottom: 24px;
  font-size: clamp(2.6rem, 4.3vw, 5.25rem);
  line-height: .98;
}
.hero-intro {
  max-width: 620px;
  margin-bottom: 18px;
  font-size: clamp(1rem, 1.45vw, 1.18rem);
  line-height: 1.6;
}
.hero-actions .primary-cta {
  min-width: 168px;
  padding: 13px 18px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .72rem;
}
.hero-signature { display: none; }
.hero-portrait-frame {
  width: min(100%, 348px);
  justify-self: center;
  transform: translate(-290px, -42px);
}
.hero-portrait-placeholder {
  aspect-ratio: .89;
  min-height: 0;
  background: transparent;
  border: 0;
  border-radius: 50% 50% 48% 48%;
  box-shadow: none;
}
.hero-portrait-placeholder::before {
  display: none;
}
.hero-portrait-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: center;
  transform: none;
  z-index: 0;
}
.portrait-signature {
  display: none;
  position: absolute;
  z-index: 2;
  bottom: 42px;
  left: 50%;
  color: #e6c987;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 2.6rem;
  font-style: italic;
  letter-spacing: -.08em;
  transform: translateX(-50%) rotate(-12deg);
  opacity: .95;
}
.portrait-caption {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: -58px;
  width: max-content;
  color: #e6c987;
  text-align: center;
  transform: translateX(-50%);
}
.portrait-caption span {
  display: block;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.2rem, 2.2vw, 1.7rem);
  letter-spacing: .02em;
}
.portrait-caption small {
  display: block;
  margin-top: 6px;
  color: #fff;
  font-family: "DM Sans", sans-serif;
  font-size: .62rem;
  letter-spacing: .3em;
  text-transform: uppercase;
}
.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 24px;
  z-index: 3;
  display: grid;
  width: 34px;
  height: 48px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 50%;
  color: #fff;
  font-size: 1.3rem;
  transform: translateX(-50%);
}
@media (min-width: 761px) and (max-width: 1100px) {
  .header-cta { display: none; }
  .site-header { padding-inline: 4px; }
  .brand { margin-left: -10px; }
  .brand img { width: 300px; height: 72px; }
  .desktop-nav { position: absolute; left: 48%; gap: 34px; }
  .desktop-nav a { font-weight: 400; text-transform: none; }
}
@media (max-width: 900px) {
  .personal-hero-grid { grid-template-columns: 1fr; }
  .personal-hero-copy { transform: none; }
  .hero-portrait-frame { transform: none; }
  .hero-scroll { display: none; }
}
@media (min-width: 761px) and (max-width: 900px) {
  .personal-hero { min-height: 100svh; padding: 136px 0 42px; }
  .personal-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 330px);
    gap: 24px;
  }
  .personal-hero-copy { transform: translateY(-38px); }
  .hero-portrait-frame { width: 330px; transform: translate(-210px, -42px); }
  .hero-scroll { display: grid; }
}
@media (max-width: 600px) {
  .site-header { height: 78px; }
  .personal-hero { padding-top: 112px; }
  .personal-hero > .container { width: min(100% - 28px, 600px); }
  .personal-hero-backdrop { background-size: auto 100%; background-position: 38% center; }
  .hero-portrait-frame { width: min(78vw, 318px); }
  .portrait-caption { bottom: -68px; }
}


/* Ajuste solicitado: separar de verdad el texto y el retrato del hero. */
@media (min-width: 901px) {
  .personal-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(320px, .88fr);
    gap: clamp(36px, 6vw, 96px);
    align-items: center;
  }
  .personal-hero-copy {
    position: relative;
    z-index: 2;
    max-width: 620px;
    transform: none;
    min-width: 0;
  }
  .personal-hero h1 {
    max-width: 620px;
    font-size: clamp(2.7rem, 4.1vw, 4.8rem);
    overflow-wrap: normal;
  }
  .hero-portrait-frame {
    position: relative;
    justify-self: center;
    align-self: center;
    width: min(100%, 360px);
    max-width: 360px;
    transform: none;
    margin: 0;
  }
  .hero-portrait-placeholder {
    position: relative;
    width: 100%;
    aspect-ratio: .78;
    overflow: hidden;
    border: 2px solid #e6c987;
    border-radius: 50% / 48%;
    background: rgba(7, 19, 33, .25);
    box-shadow: 0 18px 55px rgba(0, 0, 0, .3);
  }
  .hero-portrait-photo {
    object-fit: cover;
    object-position: center 30%;
    transform: none;
    border-radius: inherit;
  }
  .portrait-caption {
    position: static;
    width: auto;
    margin-top: 18px;
    transform: none;
    text-align: center;
  }
}
@media (min-width: 601px) and (max-width: 900px) {
  .personal-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
    gap: clamp(24px, 4vw, 44px);
    align-items: center;
  }
  .personal-hero-copy,
  .hero-portrait-frame { transform: none; }
  .hero-portrait-frame { width: 100%; justify-self: center; }
  .personal-hero h1 { font-size: clamp(2.35rem, 4.2vw, 3.5rem); }
}
@media (max-width: 600px) {
  .personal-hero-grid { display: flex; flex-direction: column; align-items: stretch; gap: 28px; }
  .personal-hero-copy { transform: none; width: 100%; }
  .hero-portrait-frame { width: min(78vw, 300px); align-self: center; transform: none; }
  .hero-portrait-placeholder { aspect-ratio: .82; min-height: 0; border: 2px solid #e6c987; border-radius: 50% / 48%; overflow: hidden; }
  .hero-portrait-photo { object-fit: cover; object-position: center 30%; transform: none; }
  .portrait-caption { position: static; width: auto; margin-top: 14px; transform: none; }
  .personal-hero h1 { max-width: 100%; }
}


/* Ajuste de composición: retrato más próximo al texto, siempre en una columna independiente. */
@media (min-width: 901px) {
  .personal-hero-grid {
    grid-template-columns: minmax(0, 610px) minmax(270px, 330px);
    justify-content: start;
    column-gap: clamp(22px, 2.6vw, 38px);
  }
  .personal-hero-copy {
    max-width: 610px;
  }
  .personal-hero h1 {
    max-width: 570px;
  }
  .hero-portrait-frame {
    width: min(100%, 330px);
    justify-self: start;
    margin-left: 0;
    transform: none;
  }
}
@media (min-width: 761px) and (max-width: 900px) {
  .personal-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 300px);
    column-gap: 20px;
  }
  .hero-portrait-frame {
    width: 100%;
    justify-self: start;
    transform: none;
  }
}

/* Contrast fix: keep the requested section title legible on its dark background. */
#philosophyTitle { color: #f8f5ed; }

/* Logo supplied by the client: keep its transparent background in header and footer. */
.site-footer { background: #f8f5ed; color: #102b49; border-top-color: rgba(180,154,98,.24); }
.site-footer img { background: transparent !important; padding: 0 !important; filter: none !important; }
.site-footer p, .site-footer nav, .footer-contact, .site-footer a { color: #102b49; }
.site-footer a:hover { color: #8d2f32; }


/* Contact section: Madrid architecture backdrop and legible form labels. */
.contact-section {
  position: relative;
  isolation: isolate;
  color: #fffdf8;
  background:
    linear-gradient(105deg, rgba(7, 19, 33, .88), rgba(7, 19, 33, .68)),
    url("https://images.unsplash.com/photo-1594719072279-4cef70e118f0?auto=format&fit=crop&fm=jpg&q=85&w=2400") center 48% / cover no-repeat;
}
.contact-section .eyebrow { color: #d6bd88; }
.contact-section p { color: rgba(255, 253, 248, .82); }
.contact-links { color: #fffdf8; }
.contact-form {
  background: rgba(248, 245, 237, .97);
  border: 1px solid rgba(214, 189, 136, .65);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .24);
}
.contact-form label { display: grid; gap: 9px; }
.contact-form label > span {
  display: block;
  color: #102b49;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.4;
  text-transform: uppercase;
}
.contact-form input,
.contact-form textarea {
  color: #102b49;
  background: #fffdf9;
  border: 1px solid #cfc3ae;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: #756c60; }
.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #a58651;
  box-shadow: 0 0 0 3px rgba(165, 134, 81, .18);
}
@media (max-width: 700px) {
  .contact-section { background-position: 58% center; }
  .contact-form { padding: 24px; }
}

/* CTA de navegación al hacer scroll: texto blanco sobre botón azul marino. */
.site-header.nav--solid .header-cta {
  color: #ffffff !important;
  background: #0b1b30 !important;
  border-color: #0b1b30 !important;
}


/* Los controles sobre las fotos de propiedades deben tener fondo transparente. */
.property-media button,
.property-media button:hover,
.property-media button:focus-visible,
.modal-nav,
.modal-nav:hover,
.modal-nav:focus-visible {
  background: transparent !important;
  box-shadow: none;
}


/* WhatsApp flotante: animación sutil al pasar el cursor, sin alterar su posición fija. */
.wa-float {
  transform: translateY(0) scale(1);
  transform-origin: center;
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, filter .28s ease;
  will-change: transform;
}
.wa-float:hover,
.wa-float:focus-visible {
  transform: translateY(-5px) scale(1.045);
  filter: brightness(1.06);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .24);
}
.wa-float svg {
  transition: transform .32s cubic-bezier(.2,.8,.2,1);
}
.wa-float:hover svg,
.wa-float:focus-visible svg {
  transform: rotate(-8deg) scale(1.08);
}
@media (prefers-reduced-motion: reduce) {
  .wa-float,
  .wa-float svg { transition: none; }
  .wa-float:hover,
  .wa-float:focus-visible { transform: none; }
}


.property-detail-modal{position:fixed;z-index:110;inset:0;overflow-y:auto;background:#f7f5f1;color:var(--navy-deep)}
.property-detail-modal[hidden]{display:none}
.detail-modal-close{position:fixed;z-index:3;top:18px;right:22px;width:48px;height:48px;border:1px solid rgba(255,255,255,.7);border-radius:50%;color:#fff;background:rgba(15,25,38,.68);font-size:32px;line-height:1;cursor:pointer}
.detail-modal-hero{position:relative;min-height:min(68vh,680px);display:flex;align-items:end;padding:clamp(28px,6vw,84px);color:#fff;background:#18283b}
.detail-modal-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.detail-modal-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,17,29,.82),rgba(8,17,29,.16)),linear-gradient(0deg,rgba(8,17,29,.52),transparent 70%)}
.detail-modal-hero-copy{position:relative;z-index:1;max-width:850px}
.detail-modal-hero-copy h1{margin:12px 0;font:500 clamp(38px,6vw,76px)/1.05 "Playfair Display",serif}
.detail-modal-hero-copy>strong{display:inline-block;margin-top:18px;font-size:24px}
.detail-modal-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,340px);gap:clamp(32px,6vw,90px);max-width:1240px;margin:auto;padding:clamp(34px,6vw,82px) 28px}
.detail-modal-layout h2{font:500 clamp(30px,4vw,46px)/1.1 "Playfair Display",serif}
.detail-modal-description{max-width:780px;white-space:pre-line;line-height:1.8;color:#536071}
.detail-modal-layout aside{align-self:start;padding:28px;background:#fff;box-shadow:0 12px 36px rgba(20,35,55,.08)}
.detail-modal-price{display:block;margin-bottom:20px;font-size:25px}
.detail-modal-layout dl{margin:0 0 24px}
.detail-modal-layout dl div{display:flex;justify-content:space-between;gap:12px;padding:13px 0;border-bottom:1px solid #e8e6e1}
.detail-modal-layout dt{color:#697586}
.detail-modal-layout dd{margin:0;font-weight:600;text-align:right}
.detail-modal-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:32px}
.detail-modal-gallery button{padding:0;border:0;background:transparent;cursor:pointer}
.detail-modal-gallery img{width:100%;aspect-ratio:4/3;object-fit:cover}
.detail-back-link{display:block;margin-top:18px;text-align:center;color:#596779}
@media(max-width:760px){.detail-modal-hero{min-height:58vh;padding:26px 20px}.detail-modal-layout{grid-template-columns:1fr;padding:32px 20px}.detail-modal-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* The photo lightbox must sit above the local property-detail overlay. */
.gallery-modal{z-index:120}

/* Seamless district map: use the actual dark map-section surface */
.map-section .madrid-map {
  background: transparent;
  border-color: transparent;
}
.map-section .madrid-map .map-bg {
  fill: #242523;
}
.map-section .madrid-map .map-zone path {
  fill: rgba(255, 253, 248, 0.06);
}
.map-section .madrid-map .map-zone.has-listings path {
  fill: rgba(255, 253, 248, 0.12);
}


/* Integrar el mapa como herramienta dentro de la sección de activos. */
#propiedades.properties-section{background:#eee6d8!important;color:#0b1b30!important;padding:104px 0 112px!important}
#propiedades.properties-section::before,#propiedades.properties-section::after{display:none!important;content:none!important}
#propiedades.properties-section>.container{position:relative;z-index:1}
#propiedades .properties-top,#propiedades .properties-top h1,#propiedades .properties-top h1 span,#propiedades .properties-top .eyebrow,#propiedades .properties-top .intro-copy p,#propiedades .properties-top .intro-copy a,#propiedades .result-line{color:#0b1b30!important;-webkit-text-fill-color:#0b1b30!important}
#propiedades .properties-top h1 span{color:#9b773f!important;-webkit-text-fill-color:#9b773f!important}
#propiedades .map-section.map-tool{margin:34px 0 28px;padding:0;color:#0b1b30;background:transparent!important}
#propiedades .map-tool .map-heading{margin-bottom:26px}
#propiedades .map-tool .map-heading h2,#propiedades .map-tool .map-heading p,#propiedades .map-tool .map-heading .eyebrow{color:#0b1b30!important}
#propiedades .map-tool .map-heading .eyebrow{color:#9b773f!important}
#propiedades .map-tool .clear-filter{background:#0b1b30;color:#f7f3ec}
#propiedades .map-tool .clear-filter:hover,#propiedades .map-tool .clear-filter:focus-visible{background:#9b773f;color:#fff}
#propiedades .map-tool .madrid-map{background:transparent!important;border-color:transparent!important}
#propiedades .map-tool .madrid-map .map-bg{fill:transparent!important}
#propiedades .map-tool .map-zone path{fill:rgba(11,27,48,.07)}
#propiedades .map-tool .map-zone.has-listings path{fill:rgba(11,27,48,.13)}
#propiedades .map-tool .map-zone:hover path,#propiedades .map-tool .map-zone:focus-visible path,#propiedades .map-tool .map-zone.is-active path{fill:#55402d!important}
#propiedades .map-tool .map-zone-label{fill:#0b1b30!important}
#propiedades .map-tool .property-point rect{fill:#0b1b30;stroke:#eee6d8}
#propiedades #propertyGrid .property-card{box-shadow:0 14px 36px rgba(7,19,33,.12)}
@media(max-width:760px){#propiedades.properties-section{padding:76px 0 82px!important}#propiedades .map-section.map-tool{margin:26px 0 22px}}


/* Los gestos verticales sobre el mapa desplazan la página; el mapa no se arrastra. */
#propiedades .district-map-svg,
#propiedades .district-map-svg * {
  touch-action: pan-y pinch-zoom !important;
}
#propiedades .district-map-svg {
  user-select: none;
  -webkit-user-select: none;
}
#resultLine,
#propertyGrid,
#emptyState {
  scroll-margin-top: 108px;
}


/* 2026-11-06: mobile portrait cleanup — use the full-resolution source and a single oval rim. */
.hero-portrait-frame {
  width: min(78vw, 330px);
  max-width: 330px;
  justify-self: center;
  margin-inline: auto;
  transform: none;
}
.hero-portrait-placeholder {
  width: 100%;
  aspect-ratio: .83;
  min-height: 0 !important;
  overflow: hidden;
  border: 0 !important;
  border-radius: 50% / 48%;
  background: transparent !important;
  box-shadow: none !important;
}
.hero-portrait-photo {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  object-position: center 38% !important;
  transform: none !important;
  border: 0;
  border-radius: inherit;
}
@media (max-width: 900px) {
  .hero-portrait-frame { transform: none !important; }
}
@media (max-width: 600px) {
  .personal-hero-grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
  }
  .hero-portrait-frame {
    width: min(78vw, 330px);
    max-width: 330px;
    align-self: center;
    margin-inline: auto;
  }
  .hero-portrait-placeholder { aspect-ratio: .83; }
  .portrait-caption {
    position: static !important;
    width: auto;
    margin: 16px 0 0;
    transform: none !important;
    text-align: center;
  }
}


/* Final portrait correction: preserve native proportions and remove the previous zoom/crop. */
.hero-portrait-photo{width:100%;height:100%;object-fit:cover;object-position:center center;transform:none!important;transform-origin:center center;border-radius:inherit;display:block;}


/* 2026-11-07: remove image overlay artifacts; keep the same oval crop and frame. */
.hero-portrait-placeholder::before{content:none!important;display:none!important;}
.hero-portrait-photo{filter:none!important;opacity:1!important;mix-blend-mode:normal!important;object-fit:cover!important;object-position:center 38%!important;transform:none!important;box-shadow:none!important;}
.hero-portrait-placeholder{background:transparent!important;box-shadow:none!important;}

/* 2026-11-07: desktop hero alignment — keep portrait and caption fully inside the viewport. */
@media (min-width: 901px) {
  .personal-hero > .container {
    width: min(calc(100% - 64px), 1320px) !important;
    max-width: 1320px;
    margin-inline: auto;
  }
  .personal-hero-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr) !important;
    column-gap: clamp(28px, 4vw, 64px) !important;
    justify-content: center;
    align-items: center;
  }
  .personal-hero-copy {
    min-width: 0;
    max-width: 680px;
    transform: none !important;
  }
  .hero-portrait-frame {
    position: relative;
    justify-self: center !important;
    align-self: center;
    width: min(100%, 360px) !important;
    max-width: 360px !important;
    margin: 0 auto !important;
    transform: none !important;
  }
  .hero-portrait-placeholder {
    width: 100%;
  }
  .portrait-caption {
    position: static !important;
    width: 100% !important;
    max-width: 100%;
    margin: 18px auto 0 !important;
    transform: none !important;
    text-align: center !important;
    white-space: normal;
  }
  .portrait-caption span,
  .portrait-caption small {
    overflow-wrap: anywhere;
  }
}