/* ===========================================================
   MyCasa · Stay Local — Home
   Sistema visual: olivo + crema + ocre · Playfair / Cormorant / Jost
   =========================================================== */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* Paleta */
  --carbon:    #444b2c;   /* olivo profundo — secciones oscuras */
  --carbon-2:  #3a4026;
  --olive:     #6b7a45;
  --olive-lt:  #8a9a5a;
  --cream:     #efe9dc;   /* fondo claro principal */
  --cream-2:   #e7e0cf;
  --cream-3:   #ded5c0;
  --ivory:     #f6f1e8;
  --ink:       #2f3327;   /* texto oscuro sobre crema */
  --ink-soft:  rgba(47,51,39,0.62);
  --line-dark: rgba(47,51,39,0.14);
  --on-dark:        rgba(246,241,232,0.92);
  --on-dark-soft:   rgba(246,241,232,0.58);
  --line-light:     rgba(246,241,232,0.16);
  --nav-text:       rgba(246,241,232,0.88);  /* texto de menú + footer (más legible) */

  /* Acento (tweakable) */
  --accent:    #a98c57;   /* ocre/dorado */
  --accent-lt: #c4aa7a;
  --accent-deep:#8a6f3e;

  /* Tweakables */
  --hero-overlay: 0.45;
  --card-radius: 10px;   /* HORNEADO. Antes: 4px */
  --font-head: 'Fraunces', Georgia, serif;   /* HORNEADO (canónico). Antes: Playfair (fallback) */
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-ui: 'Jost', system-ui, sans-serif;

  --maxw: 1240px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html { scroll-behavior: smooth; font-size: 16px; -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--font-ui);
  font-weight: 300;
  letter-spacing: 0.01em;
  color: var(--ink);
  background: var(--cream);
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

::selection { background: var(--accent); color: var(--ivory); }
::-webkit-scrollbar { width: 7px; }
::-webkit-scrollbar-track { background: var(--cream-2); }
::-webkit-scrollbar-thumb { background: var(--olive); border-radius: 4px; }

/* ---------- Tipografía utilitaria ---------- */
.eyebrow {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 0.66rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow.on-dark { color: var(--accent-lt); }
.serif-note {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}
.display {
  font-family: var(--font-head);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.01em;
}
.display em { font-style: italic; color: var(--accent); }
.rule {
  width: 46px; height: 1px; background: var(--accent);
  border: none;
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  font-family: var(--font-ui); font-weight: 400;
  font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
  padding: 1rem 2rem; border-radius: var(--card-radius);
  border: 1px solid transparent; transition: all .35s var(--ease);
  white-space: nowrap;
}
.btn-primary { background: var(--accent); color: var(--carbon-2); }
.btn-primary:hover { background: var(--accent-lt); transform: translateY(-2px); }
.btn-outline { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--ivory); }
.btn-outline.on-dark { border-color: var(--line-light); color: var(--ivory); }
.btn-outline.on-dark:hover { background: var(--ivory); color: var(--carbon); border-color: var(--ivory); }
.btn-ghost { background: transparent; color: var(--ink); padding-left: 0; padding-right: 0; }
.btn-link {
  font-family: var(--font-ui); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink); display: inline-flex; align-items: center; gap: 0.5rem;
  padding-bottom: 4px; border-bottom: 1px solid var(--line-dark); transition: all .3s var(--ease);
}
.btn-link .arw { transition: transform .35s var(--ease); }
.btn-link:hover { color: var(--accent-deep); border-color: var(--accent); }
.btn-link:hover .arw { transform: translateX(5px); }

/* ===========================================================
   NAV
   =========================================================== */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 1000;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.6rem clamp(1.2rem, 4vw, 3.4rem);
  transition: background .45s var(--ease), padding .45s var(--ease), border-color .45s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(58,64,38,0.90);
  backdrop-filter: blur(14px);
  padding-top: 1rem; padding-bottom: 1rem;
  border-bottom: 1px solid var(--line-light);
}
.nav.light:not(.scrolled) { /* over cream hero (dir B) */ }

/* Dir B: hero claro → barra olivo translúcida desde el inicio para que el menú se lea */
body[data-dir="b"] .nav {
  background: rgba(58,64,38,0.90);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-light);
}

.brand { display: flex; align-items: center; gap: 0.7rem; }
.brand-mark { width: 34px; height: 34px; flex: 0 0 auto; }
.brand-mark svg,
.brand-mark img { width: 100%; height: 100%; display: block; }
.brand-text { line-height: 1; }
.brand-name {
  font-family: var(--font-head); font-weight: 500; font-size: 1.3rem;
  letter-spacing: 0.02em; color: var(--ivory); white-space: nowrap;
}
.brand-sub {
  display: block; font-family: var(--font-ui); font-weight: 400;
  font-size: 0.5rem; letter-spacing: 0.42em; text-transform: uppercase; white-space: nowrap;
  color: var(--accent-lt); margin-top: 3px;
}

.nav-links { display: flex; gap: 2.2rem; list-style: none; }
.nav-links a {
  font-family: var(--font-ui); font-size: 0.82rem; font-weight: 400;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--nav-text);
  position: relative; padding: 4px 0; transition: color .3s; white-space: nowrap;
}
.nav-links a::after {
  content: ''; position: absolute; left: 0; bottom: -2px; height: 1px; width: 0;
  background: var(--accent-lt); transition: width .35s var(--ease);
}
.nav-links a:hover { color: var(--ivory); }
.nav-links a:hover::after { width: 100%; }

.nav-right { display: flex; align-items: center; gap: 1.3rem; }
.lang-switch {
  display: inline-flex; align-items: center; border: 1px solid var(--line-light);
  border-radius: 100px; overflow: hidden;
}
.lang-switch button,
.lang-switch a {
  background: transparent; border: none; color: var(--nav-text);
  font-family: var(--font-ui); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.12em; padding: 0.42rem 0.78rem; transition: all .3s; white-space: nowrap;
}
.lang-switch button.active,
.lang-switch a.active { background: var(--accent); color: var(--carbon-2); }
.nav-account {
  font-family: var(--font-ui); font-size: 0.78rem; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--nav-text); display: inline-flex; align-items: center; gap: 0.5rem;
  white-space: nowrap;
}
.nav-account:hover { color: var(--accent-lt); }
.nav-account .avatar {
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-light);
  display: grid; place-items: center; color: var(--accent-lt);
}
.nav-burger { display: none; }
.nav-mobile-menu { display: none; }

/* ===========================================================
   SECTION SCAFFOLD
   =========================================================== */
.section { position: relative; padding: clamp(5rem, 9vw, 8.5rem) 0; }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(1.2rem, 4vw, 2.6rem); }
.section.dark { background: var(--carbon); color: var(--on-dark); }
.section.cream2 { background: var(--cream-2); }

.section-head { max-width: 640px; }
.section-head.center { margin: 0 auto; text-align: center; }
.section-head .rule { margin: 1.4rem 0; }
.section-head.center .rule { margin: 1.4rem auto; }
.section-title { font-size: clamp(2rem, 4.4vw, 3.4rem); margin-top: 1rem; }
.section-intro {
  font-family: var(--font-serif); font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  font-weight: 400; color: var(--ink-soft); line-height: 1.55; margin-top: 1.1rem;
}
.section.dark .section-intro { color: var(--on-dark-soft); }

/* ===========================================================
   HERO — shared bits
   =========================================================== */
.hero { position: relative; }
#hero-a, #hero-c { display: grid; }
#hero-b { display: grid; }
body[data-dir="a"] #hero-b, body[data-dir="a"] #hero-c { display: none; }
body[data-dir="b"] #hero-a, body[data-dir="b"] #hero-c { display: none; }
body[data-dir="c"] #hero-a, body[data-dir="c"] #hero-b { display: none; }

/* ---- Search bar (shared component) ---- */
.search {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr auto;
  background: var(--ivory); border-radius: var(--card-radius);
  box-shadow: 0 24px 60px -28px rgba(40,44,26,0.55);
  overflow: hidden; border: 1px solid rgba(255,255,255,0.4);
}
.search-field {
  display: flex; flex-direction: column; gap: 0.35rem;
  padding: 1rem 1.3rem; border-right: 1px solid var(--line-dark); position: relative;
  text-align: left;
}
.search-field:last-of-type { border-right: none; }
.search-field > label {
  font-family: var(--font-ui); font-size: 0.58rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-deep);
}
.search-field .field-val {
  font-family: var(--font-serif); font-size: 1.12rem; color: var(--ink); font-weight: 500;
  background: transparent; border: none; outline: none; width: 100%;
}
.search-field input.field-val::placeholder { color: rgba(47,51,39,0.4); }
.search-field select.field-val { appearance: none; cursor: pointer; }
.search-dates { display: flex; gap: 0.6rem; }
.search-dates input { width: 100%; color-scheme: light; }
.search-btn {
  border: none; background: var(--accent); color: var(--carbon-2);
  display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  padding: 0 2rem; font-family: var(--font-ui); font-weight: 500;
  border-radius: 0 var(--card-radius) var(--card-radius) 0;
  font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase;
  transition: background .3s;
}
.search-btn:hover { background: var(--accent-lt); }
.search-btn svg { width: 16px; height: 16px; }

/* ===========================================================
   HERO A — Editorial / full-bleed
   =========================================================== */
#hero-a { min-height: 100vh; display: grid; grid-template-rows: 1fr auto; overflow: hidden; }
.heroA-media { position: absolute; inset: 0; z-index: 0; }
.heroA-media img { width: 100%; height: 100%; object-fit: cover; }
.heroA-media::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(40,44,26,0.55) 0%, rgba(40,44,26,0.12) 32%, rgba(40,44,26,0.18) 60%, rgba(35,38,22,0.86) 100%),
    rgba(40,44,26,calc(var(--hero-overlay) - 0.18));
}
.heroA-inner {
  position: relative; z-index: 2; align-self: center;
  width: 100%; max-width: var(--maxw); margin: 0 auto;
  padding: 7rem clamp(1.2rem,4vw,2.6rem) 0; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 1.5rem;
}
.heroA-inner .eyebrow { color: var(--accent-lt); }
.heroA-title {
  font-family: var(--font-head); font-weight: 400; color: var(--ivory);
  font-size: clamp(2.6rem, 6.4vw, 5.6rem); line-height: 1.02; letter-spacing: -0.015em;
  text-shadow: 0 2px 40px rgba(20,22,12,0.4);
}
.heroA-title em { font-style: italic; color: var(--accent-lt); }
.heroA-tagline {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.1rem, 2vw, 1.5rem); color: var(--on-dark); max-width: 540px;
}
.heroA-search { position: relative; z-index: 2; width: 100%; max-width: 920px;
  margin: 0 auto; padding: 0 clamp(1.2rem,4vw,2.6rem) clamp(2.2rem,4vw,3.2rem); }
.heroA-search .search { background: rgba(246,241,232,0.94); backdrop-filter: blur(8px); }
.heroA-scroll {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 1.4rem; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
}
.heroA-scroll span {
  font-family: var(--font-ui); font-size: 0.55rem; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--on-dark-soft);
}
.scroll-line { width: 1px; height: 42px; background: linear-gradient(var(--accent-lt), transparent); }

/* hero entrance — animation plays to a VISIBLE end state (forwards).
   A JS timer adds .rise-ready as a safety net so content is NEVER stuck hidden
   even if the animation is throttled (background load) or never runs. */
.rise { opacity: 0; transform: translateY(24px); }
[data-dir] .hero .rise { animation: riseIn .9s var(--ease) forwards; }
.rise.d1 { animation-delay: .12s; } .rise.d2 { animation-delay: .24s; }
.rise.d3 { animation-delay: .36s; } .rise.d4 { animation-delay: .48s; } .rise.d5 { animation-delay: .6s; }
@keyframes riseIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
body.rise-ready .rise { opacity: 1 !important; transform: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) { .rise { opacity: 1 !important; transform: none !important; animation: none !important; } }

/* ===========================================================
   HERO B — Funcional / split
   =========================================================== */
#hero-b {
  min-height: 100vh; display: grid; grid-template-columns: 1.05fr 0.95fr;
  background: var(--cream);
}
.heroB-left {
  display: flex; flex-direction: column; justify-content: center;
  padding: 8rem clamp(1.6rem,4vw,4.5rem) 4rem; position: relative;
}
.heroB-left .eyebrow { margin-bottom: 1.4rem; }
.heroB-title {
  font-family: var(--font-head); font-weight: 400; color: var(--ink);
  font-size: clamp(2.4rem, 4.6vw, 4.2rem); line-height: 1.03; letter-spacing: -0.015em;
}
.heroB-title em { font-style: italic; color: var(--accent-deep); }
.heroB-tagline {
  font-family: var(--font-serif); font-style: italic; font-size: clamp(1.1rem,1.7vw,1.4rem);
  color: var(--ink-soft); margin-top: 1.3rem; max-width: 440px; line-height: 1.5;
}
.heroB-searchcard {
  margin-top: 2.4rem; background: var(--ivory); border-radius: var(--card-radius);
  border: 1px solid var(--line-dark); padding: 1.4rem; max-width: 560px;
  box-shadow: 0 30px 60px -34px rgba(40,44,26,0.4);
}
.heroB-searchcard .sc-label {
  font-family: var(--font-ui); font-size: 0.62rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--accent-deep); margin-bottom: 1rem; font-weight: 500;
}
.heroB-searchcard .search {
  grid-template-columns: 1fr 1fr; box-shadow: none; border: 1px solid var(--line-dark);
}
.heroB-searchcard .search-field { padding: 0.85rem 1rem; }
.heroB-searchcard .search-field:nth-child(1) { border-right: 1px solid var(--line-dark); }
.heroB-searchcard .search-field:nth-child(2) { border-right: none; }
.heroB-searchcard .search-field:nth-child(3),
.heroB-searchcard .search-field:nth-child(4) { border-top: 1px solid var(--line-dark); }
.heroB-searchcard .search-field:nth-child(3) { border-right: 1px solid var(--line-dark); }
.heroB-searchcard .search-btn { grid-column: 1 / -1; padding: 0.95rem; }
.heroB-trust {
  display: flex; gap: 2rem; margin-top: 2rem; flex-wrap: wrap;
}
.heroB-trust .tr { display: flex; flex-direction: column; }
.heroB-trust .tr b { font-family: var(--font-head); font-size: 1.7rem; color: var(--ink); font-weight: 500; }
.heroB-trust .tr span {
  font-family: var(--font-ui); font-size: 0.6rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-soft); margin-top: 3px;
}
.heroB-right { position: relative; overflow: hidden; }
.heroB-right img { width: 100%; height: 100%; object-fit: cover; }
.heroB-right::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--cream) 0%, rgba(239,233,220,0) 14%);
}
.heroB-badge {
  position: absolute; left: 1.8rem; bottom: 1.8rem; z-index: 2;
  background: rgba(58,64,38,0.82); backdrop-filter: blur(8px); color: var(--ivory);
  border: 1px solid var(--line-light); border-radius: var(--card-radius);
  padding: 0.9rem 1.2rem; display: flex; align-items: center; gap: 0.8rem;
}
.heroB-badge .hb-star { color: var(--accent-lt); font-size: 1.1rem; }
.heroB-badge .hb-txt { font-family: var(--font-serif); font-style: italic; font-size: 1rem; }

/* ===========================================================
   HERO C — Híbrido (editorial full-bleed + buscador + trust)
   =========================================================== */
#hero-c { min-height: 100vh; position: relative; overflow: hidden; place-items: stretch; }
.heroC-media { position: absolute; inset: 0; z-index: 0; }
.heroC-media img { width: 100%; height: 100%; object-fit: cover; }
.heroC-media::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(40,44,26,0.55) 0%, rgba(40,44,26,0.18) 38%, rgba(35,38,22,0.55) 78%, rgba(30,33,18,0.92) 100%),
    rgba(40,44,26,calc(var(--hero-overlay) - 0.16));
}
.heroC-inner {
  position: relative; z-index: 2; min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 1.4rem;
  width: 100%; max-width: 1000px; margin: 0 auto;
  padding: 8rem clamp(1.2rem,4vw,2.6rem) 4rem;
}
.heroC-inner .eyebrow { color: var(--accent-lt); font-weight: 500; font-size: 0.78rem; letter-spacing: 0.3em; text-shadow: 0 1px 3px rgba(20,22,12,0.95), 0 2px 22px rgba(20,22,12,0.75); }
.heroC-title {
  font-family: var(--font-head); font-weight: 400; color: var(--ivory);
  font-size: clamp(2.6rem, 6vw, 5.4rem); line-height: 1.02; letter-spacing: -0.015em;
  text-shadow: 0 2px 40px rgba(20,22,12,0.45);
}
.heroC-title em { font-style: italic; color: var(--accent-lt); }
.heroC-tagline {
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem); color: var(--ivory); max-width: 600px; line-height: 1.45;
  text-shadow: 0 1px 22px rgba(20,22,12,0.5);
}
.heroC-support {
  font-family: var(--font-ui); font-weight: 400; font-size: 1.02rem; letter-spacing: 0.01em;
  color: var(--on-dark); max-width: 560px; line-height: 1.55; margin-top: -0.3rem;
  text-shadow: 0 1px 16px rgba(20,22,12,0.6);
}
.heroC-search { width: 100%; max-width: 880px; margin-top: 0.6rem; }
.heroC-sclabel {
  display: block; font-family: var(--font-ui); font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--accent-lt);
  margin-bottom: 0.9rem;
}
.heroC-search .search {
  background: rgba(246,241,232,0.95); backdrop-filter: blur(8px);
  box-shadow: 0 30px 70px -30px rgba(20,22,12,0.7);
}
.heroC-trust {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 0.9rem 1.1rem; margin-top: 0.6rem;
}
.heroC-trust .ct-stars {
  font-family: var(--font-ui); font-size: 0.86rem; color: var(--ivory); letter-spacing: 0.06em;
  display: inline-flex; align-items: center; gap: 0.5rem;
}
.heroC-trust .ct-stars { color: var(--accent-lt); }
.heroC-trust .ct-stars b { font-family: var(--font-head); font-size: 1rem; color: var(--ivory); font-weight: 500; }
.heroC-trust .ct-line {
  font-family: var(--font-ui); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--on-dark);
}
.heroC-trust .ct-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--on-dark-soft); }

/* ===========================================================
   PROPIEDADES
   =========================================================== */
.props-bar {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2.6rem;
}
.filters { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.filter {
  font-family: var(--font-ui); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.55rem 1.1rem; border-radius: 100px; border: 1px solid var(--line-dark);
  background: transparent; color: var(--ink-soft); transition: all .3s var(--ease);
}
.filter:hover { border-color: var(--olive); color: var(--ink); }
.filter.active { background: var(--carbon); color: var(--ivory); border-color: var(--carbon); }

.props-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem;
}
/* Dir A: primera card destacada (2 col + alto) */
body[data-feat] .props-grid { grid-auto-flow: dense; }
body[data-feat] .prop-card.feature { grid-column: span 2; grid-row: span 2; }

.prop-card {
  background: var(--ivory); border-radius: var(--card-radius); overflow: hidden;
  border: 1px solid var(--line-dark); display: flex; flex-direction: column;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.prop-card:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -30px rgba(40,44,26,0.45); }
.prop-media { position: relative; aspect-ratio: 4/3; overflow: hidden; }
body[data-feat] .prop-card.feature .prop-media { aspect-ratio: auto; height: 100%; min-height: 360px; }
.prop-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.prop-card:hover .prop-media img { transform: scale(1.05); }
.prop-media.is-empty {
  min-height: 260px;
  background:
    linear-gradient(135deg, rgba(58,64,38,0.86), rgba(169,140,87,0.34)),
    var(--olive);
}
.prop-type {
  position: absolute; top: 0.9rem; left: 0.9rem; z-index: 2;
  font-family: var(--font-ui); font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase;
  background: rgba(58,64,38,0.86); color: var(--ivory); padding: 0.4rem 0.75rem; border-radius: 100px;
  backdrop-filter: blur(4px); white-space: nowrap;
}
.prop-fav {
  position: absolute; top: 0.7rem; right: 0.7rem; z-index: 2; width: 34px; height: 34px;
  border-radius: 50%; background: rgba(246,241,232,0.85); border: none; display: grid; place-items: center;
  color: var(--ink); transition: all .3s;
}
.prop-fav:hover { background: var(--ivory); color: var(--accent-deep); }
.prop-fav.on { color: #b4513f; }
.prop-body { padding: 1.3rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.prop-name { font-family: var(--font-head); font-size: 1.25rem; font-weight: 500; color: var(--ink); }
body[data-feat] .prop-card.feature .prop-name { font-size: 1.7rem; }
.prop-loc {
  font-family: var(--font-ui); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-soft); display: flex; align-items: center; gap: 0.4rem;
}
.prop-loc svg { width: 12px; height: 12px; color: var(--accent); flex: 0 0 auto; }
.prop-desc {
  font-family: var(--font-serif); font-size: 1.02rem; color: var(--ink-soft); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
body[data-feat] .prop-card.feature .prop-desc { -webkit-line-clamp: 4; }
.prop-meta { display: flex; gap: 1.4rem; margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--line-dark); }
.prop-meta .m { display: flex; align-items: center; gap: 0.45rem; }
.prop-meta .m svg { width: 16px; height: 16px; color: var(--olive); }
.prop-meta .m b { font-family: var(--font-ui); font-weight: 500; font-size: 0.82rem; color: var(--ink); }
.prop-meta .m span { font-family: var(--font-ui); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.prop-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 1rem; }

.props-cta { text-align: center; margin-top: 3rem; }

/* ===========================================================
   POR QUÉ
   =========================================================== */
.why-layout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem,5vw,5rem); align-items: center; }
.why-benefits { display: flex; flex-direction: column; gap: 1.8rem; margin-top: 2.4rem; }
.benefit { display: grid; grid-template-columns: auto 1fr; gap: 1.3rem; align-items: start; }
.benefit-num {
  font-family: var(--font-head); font-size: 1.1rem; color: var(--accent-deep);
  width: 44px; height: 44px; border: 1px solid var(--accent); border-radius: 50%;
  display: grid; place-items: center; flex: 0 0 auto;
}
.benefit h4 { font-family: var(--font-head); font-weight: 500; font-size: 1.3rem; color: var(--ink); margin-bottom: 0.4rem; }
.benefit p { font-family: var(--font-serif); font-size: 1.06rem; color: var(--ink-soft); line-height: 1.55; }
.why-visual { position: relative; }
.why-frame { position: relative; aspect-ratio: 4/5; border-radius: var(--card-radius); overflow: hidden; }
.why-frame img { width: 100%; height: 100%; object-fit: cover; }
.why-frame.small {
  position: absolute; width: 46%; aspect-ratio: 1/1; right: -1.5rem; bottom: -1.8rem;
  border: 6px solid var(--cream); box-shadow: 0 30px 50px -30px rgba(40,44,26,0.5);
}
.why-tag {
  position: absolute; top: 1.4rem; left: 1.4rem;
  background: rgba(58,64,38,0.86); color: var(--ivory); border-radius: 100px;
  padding: 0.55rem 1.1rem; font-family: var(--font-ui); font-size: 0.6rem;
  letter-spacing: 0.18em; text-transform: uppercase; backdrop-filter: blur(4px);
}

/* ===========================================================
   RESEÑAS (collage)
   =========================================================== */
#resenas { background: var(--carbon); color: var(--on-dark); }
#resenas .eyebrow { color: var(--accent-lt); }
.reviews-collage { columns: 3; column-gap: 1.3rem; margin-top: 3rem; }
.reviews-empty {
  max-width: 620px;
  margin: 3rem auto 0;
  padding: 2rem;
  border: 1px solid var(--line-light);
  border-radius: var(--card-radius);
  background: rgba(246,241,232,0.08);
  color: var(--on-dark);
  text-align: center;
}
.reviews-empty h3 {
  font-family: var(--font-head);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 400;
  margin-bottom: 0.8rem;
}
.reviews-empty p {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--on-dark);
}
.rev-card {
  break-inside: avoid; margin-bottom: 1.3rem; padding: 1.5rem 1.6rem;
  background: var(--cream); color: var(--ink); border-radius: var(--card-radius);
  border: 1px solid rgba(0,0,0,0.04);
}
.rev-card.hero {
  background: linear-gradient(155deg, var(--olive) 0%, var(--carbon-2) 100%);
  color: var(--ivory); border: 1px solid var(--line-light);
}
.rev-stars { color: var(--accent); letter-spacing: 0.15em; font-size: 0.8rem; margin-bottom: 0.7rem; }
.rev-card.hero .rev-stars { color: var(--accent-lt); }
.rev-text { font-family: var(--font-serif); font-size: 1.1rem; line-height: 1.5; color: var(--ink); }
.rev-card.hero .rev-text { font-size: 1.32rem; color: var(--ivory); }
.rev-text em { font-style: italic; color: var(--accent-deep); }
.rev-card.hero .rev-text em { color: var(--accent-lt); }
.rev-author { display: flex; align-items: center; gap: 0.7rem; margin-top: 1.2rem; }
.rev-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto;
  background: var(--olive-lt); color: var(--ivory); display: grid; place-items: center;
  font-family: var(--font-head); font-size: 0.95rem;
}
.rev-card.hero .rev-avatar { background: var(--accent); color: var(--carbon-2); }
.rev-name { font-family: var(--font-ui); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.04em; }
.rev-meta { font-family: var(--font-ui); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); margin-top: 2px; }
.rev-card.hero .rev-meta { color: var(--on-dark-soft); }

/* ===========================================================
   EXPERIENCIA (light band — contrast between dark reviews & dark footer)
   =========================================================== */
#experiencia {
  position: relative; background: var(--cream); color: var(--ink);
  text-align: center; overflow: hidden;
  padding: clamp(6rem,10vw,9rem) 0;
}
.exp-inner { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; padding: 0 clamp(1.2rem,4vw,2.6rem); }
.exp-inner .eyebrow { color: var(--accent); }
.exp-title { font-family: var(--font-head); font-weight: 400; font-size: clamp(2.4rem,5.5vw,4.4rem); line-height: 1.05; margin: 1.2rem 0; color: var(--ink); }
.exp-title em { font-style: italic; color: var(--accent-deep); }
.exp-text { font-family: var(--font-serif); font-size: clamp(1.2rem,1.9vw,1.5rem); color: var(--ink-soft); line-height: 1.55; margin: 0 auto 2.2rem; max-width: 600px; }
.exp-photo {
  position: relative; z-index: 2; max-width: 1080px; margin: clamp(3rem,5vw,4rem) auto 0;
  padding: 0 clamp(1.2rem,4vw,2.6rem);
}
.exp-photo-frame {
  border-radius: calc(var(--card-radius) + 2px); overflow: hidden; aspect-ratio: 21 / 8;
  box-shadow: 0 44px 80px -44px rgba(40,44,26,0.55); border: 1px solid var(--line-dark);
}
.exp-photo-frame img { width: 100%; height: 100%; object-fit: cover; }
.exp-stats { display: flex; justify-content: center; gap: clamp(2rem,5vw,4.5rem); flex-wrap: wrap; max-width: 880px; margin: clamp(3rem,5vw,4rem) auto 0; padding: 2.6rem clamp(1.2rem,4vw,2.6rem) 0; border-top: 1px solid var(--line-dark); }
.exp-stat .num { font-family: var(--font-head); font-size: clamp(2.2rem,4vw,3rem); color: var(--ink); display: block; }
.exp-stat .num em { font-style: normal; color: var(--accent-deep); }
.exp-stat .lbl { font-family: var(--font-ui); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); margin-top: 0.5rem; display: block; }

/* ===========================================================
   FOOTER
   =========================================================== */
.footer { background: var(--carbon-2); color: var(--on-dark); padding: clamp(4rem,7vw,6rem) 0 2rem; }
.footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2.5rem; }
.footer .brand-name, .footer .brand-sub { }
.footer-blurb { font-family: var(--font-serif); font-size: 1.1rem; color: var(--nav-text); line-height: 1.55; margin-top: 1.3rem; max-width: 320px; }
.footer-col h5 { font-family: var(--font-ui); font-size: 0.64rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-lt); margin-bottom: 1.2rem; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.7rem; }
.footer-col a { font-family: var(--font-ui); font-size: 0.9rem; color: var(--nav-text); transition: color .3s; }
.footer-col a:hover { color: var(--ivory); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 3.5rem; padding-top: 1.8rem; border-top: 1px solid var(--line-light); }
.footer-bottom p { font-family: var(--font-ui); font-size: 0.74rem; letter-spacing: 0.06em; color: var(--nav-text); }
.credit-link { color: var(--accent-lt); font-weight: 500; transition: color .3s; }
.credit-link:hover { color: var(--ivory); }
.footer-social { display: flex; gap: 0.7rem; }
.footer-social a { width: 36px; height: 36px; border: 1px solid var(--line-light); border-radius: 50%; display: grid; place-items: center; color: var(--on-dark-soft); transition: all .3s; }
.footer-social a:hover { border-color: var(--accent); color: var(--accent-lt); }

/* ===========================================================
   DIRECTION SWITCHER (always visible)
   =========================================================== */
.dir-switch {
  position: fixed; bottom: 1.6rem; left: 50%; transform: translateX(-50%); z-index: 1200;
  display: flex; align-items: center; gap: 0.55rem;
  background: rgba(58,64,38,0.92); backdrop-filter: blur(14px);
  border: 1px solid var(--line-light); border-radius: 100px;
  padding: 0.45rem 0.5rem 0.45rem 1.1rem; box-shadow: 0 20px 40px -20px rgba(20,22,12,0.6);
}
.dir-switch .ds-label {
  font-family: var(--font-ui); font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--on-dark-soft); margin-right: 0.3rem;
}
.dir-switch button {
  background: transparent; border: none; color: var(--on-dark-soft);
  font-family: var(--font-ui); font-size: 0.72rem; letter-spacing: 0.1em; font-weight: 500;
  padding: 0.5rem 1rem; border-radius: 100px; transition: all .35s var(--ease); white-space: nowrap;
}
.dir-switch button .dsn { font-family: var(--font-head); font-size: 0.95rem; margin-right: 0.35rem; }
.dir-switch button.active { background: var(--accent); color: var(--carbon-2); }

/* ===========================================================
   Reveal on scroll
   =========================================================== */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; } .reveal.d3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; } }
@media print {
  .reveal, .rise { opacity: 1 !important; transform: none !important; animation: none !important; }
  .nav, .dir-switch { position: static !important; }
}

/* ===========================================================
   DIR C — refinamientos boutique (aire controlado, solo dirección C)
   =========================================================== */
/* Aire entre hero y propiedad destacada (sin empujar de más) */
body[data-dir="c"] #espacios { padding-top: clamp(5.5rem, 9vw, 9rem); padding-bottom: clamp(6rem, 10vw, 9.5rem); }
/* Separación leve destacada ↔ grid y entre cards */
body[data-dir="c"] .props-grid { gap: 2rem; }
/* Respiración interna de la propiedad destacada (sin cambiar jerarquía) */
body[data-dir="c"] .prop-card.feature .prop-body { padding: 2.1rem 2.2rem 2.3rem; gap: 0.9rem; }
body[data-dir="c"] .prop-card.feature .prop-meta { margin-top: 0.6rem; padding-top: 1.5rem; }
/* Cards más sobrias (sombra ligera) */
body[data-dir="c"] .prop-card { box-shadow: none; }
body[data-dir="c"] .prop-card:hover { transform: translateY(-4px); box-shadow: 0 24px 44px -32px rgba(40,44,26,0.4); }
/* Beneficios / experiencia: más aire editorial */
body[data-dir="c"] #porque { padding-top: clamp(7rem, 11vw, 10.5rem); padding-bottom: clamp(7rem, 11vw, 10.5rem); }
body[data-dir="c"] .why-benefits { gap: 2.4rem; margin-top: 2.8rem; }
body[data-dir="c"] #experiencia { padding-top: clamp(7rem, 11vw, 10.5rem); padding-bottom: clamp(7rem, 11vw, 10.5rem); }
/* Reseñas: masonry sobrio, más aire entre tarjetas */
body[data-dir="c"] #resenas { padding-top: clamp(7rem, 11vw, 10.5rem); padding-bottom: clamp(7rem, 11vw, 10.5rem); }
body[data-dir="c"] .reviews-collage { column-gap: 1.9rem; margin-top: 3.4rem; }
body[data-dir="c"] .rev-card { margin-bottom: 1.9rem; padding: 1.75rem 1.85rem; border: 1px solid rgba(0,0,0,0.05); }
body[data-dir="c"] .rev-text {
  font-size: 1.06rem;
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
}
/* CTA final con más aire alrededor */
body[data-dir="c"] #experiencia .exp-text { margin-bottom: 2.6rem; }
/* Footer más sobrio */
body[data-dir="c"] .footer { padding-top: clamp(5rem, 8vw, 7rem); }
body[data-dir="c"] .footer-top { gap: 3.4rem; }

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width: 1080px) {
  .props-grid { grid-template-columns: repeat(2, 1fr); }
  body[data-feat] .prop-card.feature { grid-column: span 2; grid-row: span 1; }
  body[data-feat] .prop-card.feature .prop-media { min-height: 280px; }
  .reviews-collage { columns: 2; }
}
@media (max-width: 860px) {
  .nav {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.85rem 1rem;
    padding: 0.85rem clamp(1rem, 4vw, 1.2rem);
    background: rgba(58,64,38,0.92);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line-light);
  }
  .nav.scrolled { padding-top: 0.75rem; padding-bottom: 0.75rem; }
  .brand { min-width: 0; }
  .brand-name { font-size: 1.2rem; }
  .brand-sub { font-size: 0.95rem; letter-spacing: 0.28em; }
  .nav-right {
    justify-self: end;
    gap: 0.55rem;
  }
  .lang-switch a,
  .lang-switch button {
    min-height: 34px;
    padding: 0.45rem 0.7rem;
    font-size: 0.95rem;
  }
  .nav-account {
    width: 36px;
    height: 36px;
    justify-content: center;
  }
  .nav-account .avatar {
    width: 34px;
    height: 34px;
  }
  .nav-account-label { display: none; }
  .nav-links {
    grid-column: 1 / -1;
    display: none;
  }
  .nav-mobile-menu {
    grid-column: 1 / -1;
    display: block;
    position: relative;
    width: 100%;
  }
  .nav-mobile-menu > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 42px;
    padding: 0.68rem 0.9rem;
    border: 1px solid rgba(246,241,232,0.24);
    border-radius: 999px;
    background: rgba(246,241,232,0.08);
    color: var(--nav-text);
    cursor: pointer;
    font-family: var(--font-ui);
    font-size: 0.88rem;
    font-weight: 500;
    letter-spacing: 0.13em;
    line-height: 1.2;
    list-style: none;
    text-transform: uppercase;
  }
  .nav-mobile-menu > summary::-webkit-details-marker { display: none; }
  .nav-mobile-menu > summary::after {
    content: '⌄';
    color: var(--accent-lt);
    font-size: 1rem;
    line-height: 1;
    transition: transform .2s var(--ease);
  }
  .nav-mobile-menu[open] > summary::after { transform: rotate(180deg); }
  .nav-mobile-menu ul {
    display: grid;
    gap: 0.55rem;
    margin-top: 0.55rem;
    padding: 0.55rem;
    width: 100%;
    border: 1px solid rgba(246,241,232,0.2);
    border-radius: 14px;
    background: rgba(58,64,38,0.96);
    box-shadow: 0 18px 36px -24px rgba(20,22,12,0.75);
    list-style: none;
  }
  .nav-mobile-menu a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0.68rem 0.75rem;
    border-radius: 9px;
    color: var(--nav-text);
    font-family: var(--font-ui);
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    line-height: 1.2;
    text-transform: uppercase;
  }
  .nav-mobile-menu a:hover { background: rgba(246,241,232,0.08); color: var(--ivory); }
  #hero-b { grid-template-columns: 1fr; }
  .heroB-right { min-height: 42vh; order: -1; }
  .heroB-right::after { background: linear-gradient(0deg, var(--cream) 0%, rgba(239,233,220,0) 22%); }
  .why-layout { grid-template-columns: 1fr; }
  .why-frame.small { width: 40%; right: 0; }
  .search { grid-template-columns: 1fr 1fr; }
  .search-field:nth-child(2) { border-right: none; }
  .search-field:nth-child(3) { border-top: 1px solid var(--line-dark); border-right: 1px solid var(--line-dark); }
  .search-field:nth-child(4) { border-top: 1px solid var(--line-dark); }
  .heroA-search .search .search-btn { grid-column: 1 / -1; padding: 1rem; }
  .heroC-inner {
    min-height: 100svh;
    justify-content: center;
    gap: 1rem;
    padding-top: 9.5rem;
    padding-bottom: 2.4rem;
  }
  .heroC-inner .eyebrow {
    font-size: 0.95rem;
    line-height: 1.35;
    letter-spacing: 0.22em;
  }
  .heroC-title {
    font-size: clamp(2.45rem, 11vw, 3.7rem);
    line-height: 1.03;
  }
  .heroC-tagline {
    font-size: 1.28rem;
    line-height: 1.4;
  }
  .heroC-support {
    font-size: 1rem;
    line-height: 1.5;
  }
  .heroC-sclabel {
    font-size: 0.95rem;
    line-height: 1.3;
    letter-spacing: 0.18em;
  }
  .search-field {
    min-height: 76px;
    padding: 0.95rem 1.05rem;
  }
  .search-field > label {
    font-size: 0.95rem;
    line-height: 1.25;
    letter-spacing: 0.16em;
  }
  .search-field .field-val {
    min-height: 34px;
    font-size: 1.12rem;
    line-height: 1.35;
  }
  .search-field select.field-val,
  .search-field .date-trigger {
    width: 100%;
    min-height: 44px;
    padding: 0.1rem 2rem 0.1rem 0;
    font-family: var(--font-ui);
    font-size: 1rem;
    line-height: 1.45;
  }
  .search-field select.field-val {
    appearance: none;
    border-radius: 0;
    background:
      linear-gradient(45deg, transparent 50%, var(--accent-deep) 50%) calc(100% - 15px) 50% / 6px 6px no-repeat,
      linear-gradient(135deg, var(--accent-deep) 50%, transparent 50%) calc(100% - 10px) 50% / 6px 6px no-repeat;
    color: var(--ink);
    text-overflow: ellipsis;
  }
  .search-field select.field-val option {
    min-height: 44px;
    padding: 0.75rem 0.9rem;
    color: var(--ink);
    background: var(--ivory);
    font-family: var(--font-ui);
    font-size: 1rem;
  }
  .search-btn {
    min-height: 48px;
    padding: 0.4rem 2rem;
    border-radius: 0 0 10px 10px;
  }
  .footer-top { grid-template-columns: 1fr 1fr; }
}
.client-content-page {
  background: var(--cream);
  color: var(--ink);
}
.client-content-page .nav {
  background: rgba(58,64,38,0.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-light);
}
.client-content-main {
  width: min(100% - 2rem, 880px);
  margin: 0 auto;
  padding: 10rem 0 7rem;
}
.client-content-header {
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--line-dark);
}
.client-content-brand {
  margin: 0 0 0.75rem;
  color: var(--accent-deep);
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
}
.client-content-header h1 {
  max-width: 760px;
  margin: 0;
  font-family: var(--font-head);
  font-size: 4.4rem;
  font-weight: 400;
  line-height: 1.04;
}
.client-content-intro {
  max-width: 720px;
  margin: 1.4rem 0 0;
  color: var(--ink-soft);
  font-family: var(--font-ui);
  font-size: 1.08rem;
  line-height: 1.75;
}
.client-content-section {
  padding: 3rem 0 0;
}
.client-content-section h2 {
  margin: 0 0 1.5rem;
  font-family: var(--font-head);
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.2;
}
.client-content-items {
  border-top: 1px solid var(--line-dark);
}
.client-content-item {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--line-dark);
}
.client-content-item h3 {
  margin: 0 0 0.65rem;
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.45;
}
.client-content-item p {
  margin: 0.55rem 0 0;
  color: var(--ink-soft);
  font-family: var(--font-ui);
  font-size: 0.98rem;
  line-height: 1.75;
}
.client-content-item p:first-child { margin-top: 0; }
.client-content-closing {
  padding-top: 3rem;
  color: var(--accent-deep);
  font-family: var(--font-head);
  font-size: 1.2rem;
  line-height: 1.5;
}
.client-content-closing p { margin: 0; }

@media (max-width: 560px) {
  .client-content-main {
    width: min(100% - 2rem, 880px);
    padding-top: 8.5rem;
    padding-bottom: 4.5rem;
  }
  .client-content-header h1 { font-size: 2.65rem; }
  .client-content-section { padding-top: 2.4rem; }
  .props-grid { grid-template-columns: 1fr; }
  body[data-feat] .prop-card.feature { grid-column: span 1; }
  .reviews-collage { columns: 1; }
  .search { grid-template-columns: 1fr; }
  .search-field { border-right: none !important; border-top: 1px solid var(--line-dark); }
  .search-field:first-child { border-top: none; }
  .heroC-inner {
    align-items: stretch;
    text-align: left;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .heroC-title,
  .heroC-tagline,
  .heroC-support,
  .heroC-sclabel,
  .heroC-trust { text-align: left; }
  .heroC-search { margin-top: 0.25rem; }
  .heroC-trust {
    justify-content: flex-start;
    gap: 0.7rem 0.85rem;
  }
  .heroC-trust .ct-line,
  .heroC-trust .ct-stars {
    font-size: 0.95rem;
    line-height: 1.35;
  }
  .heroB-trust { gap: 1.3rem; }
  .footer-top { grid-template-columns: 1fr; }
  .dir-switch { bottom: 1rem; padding-left: 0.8rem; }
  .dir-switch .ds-label { display: none; }
}

.condesa-guide-page {
  --guide-olive: #6c6a43;
  --guide-olive-dark: #3a4026;
  --guide-paper: #f6f3ea;
  --guide-charcoal: #30302d;
  --guide-teal: #496d68;
  --guide-rust: #9b5544;
  background: var(--guide-paper);
  color: var(--guide-charcoal);
}
.condesa-guide-page .nav {
  background: rgba(48, 48, 45, 0.94);
  border-bottom: 1px solid rgba(246, 243, 234, 0.2);
  backdrop-filter: blur(14px);
}
.guide-wrap {
  width: min(100% - 3rem, 1120px);
  margin-inline: auto;
}
.guide-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 520px;
  height: min(760px, calc(100svh - 4rem));
  overflow: hidden;
  background: var(--guide-charcoal);
  color: #fff;
}
.guide-hero > img,
.guide-hero-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.guide-hero > img { object-fit: cover; object-position: center 58%; }
.guide-hero-shade {
  background: linear-gradient(180deg, rgba(27, 28, 24, 0.14) 20%, rgba(27, 28, 24, 0.82) 100%);
}
.guide-hero-content {
  position: relative;
  z-index: 1;
  width: min(100% - 3rem, 1120px);
  margin-inline: auto;
  padding: 8rem 0 4rem;
}
.guide-eyebrow,
.guide-index {
  margin: 0 0 0.75rem;
  color: #d7d4ac;
  font-family: var(--font-ui);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
}
.guide-hero h1 {
  max-width: 760px;
  margin: 0;
  font-family: var(--font-head);
  font-size: 4.8rem;
  font-weight: 400;
  line-height: 1.02;
}
.guide-hero-intro {
  margin: 1.2rem 0 0;
  font-family: var(--font-head);
  font-size: 1.45rem;
  line-height: 1.4;
}
.guide-hero-body {
  max-width: 600px;
  margin: 0.65rem 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.65;
}
.guide-jump {
  position: sticky;
  top: 72px;
  z-index: 8;
  overflow-x: auto;
  border-bottom: 1px solid rgba(48, 48, 45, 0.16);
  background: rgba(246, 243, 234, 0.96);
  backdrop-filter: blur(12px);
}
.guide-jump .guide-wrap {
  display: flex;
  gap: 0;
  width: max-content;
  min-width: min(100% - 3rem, 1120px);
}
.guide-jump a {
  display: inline-flex;
  align-items: center;
  min-height: 54px;
  padding: 0.85rem 1rem;
  border-right: 1px solid rgba(48, 48, 45, 0.12);
  color: var(--guide-charcoal);
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}
.guide-jump a:hover { color: var(--guide-rust); }
.guide-philosophy {
  padding: 7rem 0;
  background: var(--guide-olive);
  color: #fff;
}
.guide-philosophy-inner {
  display: grid;
  grid-template-columns: minmax(220px, 0.75fr) minmax(0, 1.25fr);
  gap: 5rem;
}
.guide-philosophy h2,
.guide-story-copy h2,
.guide-favorites h2,
.guide-place-content h2,
.guide-simple-copy h2,
.guide-concierge h2,
.guide-words h2,
.guide-practical h2,
.guide-closing h2 {
  margin: 0;
  font-family: var(--font-head);
  font-size: 3.15rem;
  font-weight: 400;
  line-height: 1.08;
}
.guide-copy p,
.guide-story-copy > p:not(.guide-index),
.guide-concierge p {
  margin: 0 0 1rem;
  font-family: var(--font-ui);
  font-size: 1.02rem;
  line-height: 1.75;
}
.guide-philosophy .guide-copy p { color: rgba(255, 255, 255, 0.86); }
.guide-script {
  margin-top: 2rem !important;
  color: #fff !important;
  font-family: var(--font-head) !important;
  font-size: 1.65rem !important;
  font-style: italic;
}
.guide-story { padding: 0; background: var(--guide-paper); }
.guide-story-reverse { background: #e7eadf; }
.guide-story-grid,
.guide-place-grid,
.guide-simple-grid,
.guide-favorites-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 620px;
}
.guide-story-image,
.guide-place-photo {
  min-height: 620px;
  overflow: hidden;
}
.guide-story-image img,
.guide-place-photo img,
.guide-simple-grid > img,
.guide-favorites-grid > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.guide-story-copy,
.guide-place-content,
.guide-simple-copy,
.guide-favorites-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5rem;
}
.guide-story-reverse .guide-story-image { order: 2; }
.guide-story-copy > p:not(.guide-index) { color: #62625a; }
.guide-favorites {
  background: var(--guide-charcoal);
  color: #fff;
}
.guide-favorites-grid > img { order: 2; }
.guide-place-section { scroll-margin-top: 126px; background: #eef0e9; }
.guide-place-dark { background: var(--guide-charcoal); color: #fff; }
.guide-place-dark .guide-place-photo { order: 2; }
.guide-subtitle {
  margin: 0.75rem 0 2rem;
  color: var(--guide-rust);
  font-family: var(--font-head);
  font-size: 1.25rem;
  font-style: italic;
  line-height: 1.4;
}
.guide-place-dark .guide-subtitle { color: #d7d4ac; }
.guide-place-list {
  margin: 2rem 0 0;
  padding: 0;
  border-top: 1px solid currentColor;
  list-style: none;
}
.guide-place-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(170px, 0.8fr);
  gap: 1.25rem;
  padding: 1rem 0;
  border-bottom: 1px solid currentColor;
  font-family: var(--font-ui);
  line-height: 1.45;
}
.guide-place-list li strong { font-weight: 500; }
.guide-place-list li span { color: #74746b; font-size: 0.88rem; }
.guide-favorites .guide-place-list,
.guide-place-dark .guide-place-list { border-color: rgba(255, 255, 255, 0.24); }
.guide-favorites .guide-place-list li,
.guide-place-dark .guide-place-list li { border-color: rgba(255, 255, 255, 0.24); }
.guide-favorites .guide-place-list li span,
.guide-place-dark .guide-place-list li span { color: rgba(255, 255, 255, 0.68); }
.guide-simple-section { scroll-margin-top: 126px; background: var(--guide-teal); color: #fff; }
.guide-simple-dark { background: var(--guide-olive-dark); }
.guide-simple-grid { min-height: 580px; }
.guide-simple-copy { padding: 5rem; }
.guide-simple-grid > img { order: 2; }
.guide-simple-copy .guide-subtitle { color: #d7d4ac; }
.guide-name-list {
  display: grid;
  gap: 0.7rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}
.guide-name-list li {
  padding: 0.95rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.24);
  font-family: var(--font-ui);
  font-size: 1rem;
}
.guide-concierge {
  padding: 6.5rem 0;
  background: #dfe8e5;
}
.guide-concierge-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: 5rem;
  align-items: center;
}
.guide-concierge-grid > div:first-child > p:last-child {
  max-width: 580px;
  margin-top: 1.25rem;
  color: #4c5b57;
}
.guide-concierge-contact {
  padding-left: 2rem;
  border-left: 3px solid var(--guide-teal);
}
.guide-concierge-contact span,
.guide-concierge-contact strong { display: block; }
.guide-concierge-contact span {
  color: var(--guide-teal);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}
.guide-concierge-contact strong {
  margin-top: 0.35rem;
  font-family: var(--font-head);
  font-size: 2.4rem;
  font-weight: 400;
}
.guide-concierge-contact p { color: #4c5b57; }
.guide-concierge-contact a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.8rem 1.2rem;
  border-radius: 6px;
  background: var(--guide-teal);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 0.88rem;
  font-weight: 600;
}
.guide-words { padding: 7rem 0; background: var(--guide-olive); color: #fff; }
.guide-word-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 3rem;
}
.guide-word {
  min-height: 220px;
  padding: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 6px;
}
.guide-word h3 {
  margin: 0 0 0.85rem;
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-style: italic;
  font-weight: 400;
}
.guide-word p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--font-ui);
  font-size: 0.9rem;
  line-height: 1.6;
}
.guide-practical { padding: 7rem 0; background: var(--guide-paper); }
.guide-practical-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5rem;
}
.guide-practical-grid > div:first-child { border-top: 5px solid var(--guide-rust); }
.guide-practical-grid > div:last-child { border-top: 5px solid var(--guide-teal); }
.guide-practical h2 { padding-top: 1.5rem; font-size: 2.5rem; }
.guide-practical ul {
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}
.guide-practical li {
  padding: 1rem 0;
  border-bottom: 1px solid rgba(48, 48, 45, 0.18);
  font-family: var(--font-ui);
  line-height: 1.5;
}
.guide-closing {
  padding: 7rem 0;
  background: var(--guide-rust);
  color: #fff;
  text-align: center;
}
.guide-closing .guide-script { margin: 0 0 0.6rem !important; }
.guide-closing-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem 1.5rem;
  margin-top: 2rem;
}
.guide-closing-links a {
  color: #fff;
  font-family: var(--font-ui);
  font-size: 0.92rem;
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (max-width: 900px) {
  .guide-philosophy-inner,
  .guide-concierge-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .guide-story-grid,
  .guide-place-grid,
  .guide-simple-grid,
  .guide-favorites-grid { grid-template-columns: 1fr; min-height: 0; }
  .guide-story-image,
  .guide-place-photo,
  .guide-simple-grid > img,
  .guide-favorites-grid > img { min-height: 0; height: auto; aspect-ratio: 4 / 3; }
  .guide-story-reverse .guide-story-image,
  .guide-place-dark .guide-place-photo,
  .guide-simple-grid > img,
  .guide-favorites-grid > img { order: 0; }
  .guide-story-copy,
  .guide-place-content,
  .guide-simple-copy,
  .guide-favorites-copy { padding: 4rem 2.5rem; }
  .guide-word-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .guide-wrap,
  .guide-hero-content { width: min(100% - 2rem, 1120px); }
  .guide-hero { height: calc(100svh - 4.5rem); min-height: 500px; }
  .guide-hero-content { padding-bottom: 2.5rem; }
  .guide-hero h1 { font-size: 3.25rem; }
  .guide-hero-intro { font-size: 1.2rem; }
  .guide-jump { top: 68px; }
  .guide-philosophy { padding: 4.5rem 0; }
  .guide-philosophy h2,
  .guide-story-copy h2,
  .guide-favorites h2,
  .guide-place-content h2,
  .guide-simple-copy h2,
  .guide-concierge h2,
  .guide-words h2,
  .guide-closing h2 { font-size: 2.45rem; }
  .guide-story-copy,
  .guide-place-content,
  .guide-simple-copy,
  .guide-favorites-copy { padding: 3rem 1rem; }
  .guide-place-list li { grid-template-columns: 1fr; gap: 0.25rem; }
  .guide-concierge,
  .guide-words,
  .guide-practical,
  .guide-closing { padding: 4.5rem 0; }
  .guide-concierge-contact { padding-left: 1.25rem; }
  .guide-word-grid,
  .guide-practical-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .guide-word { min-height: 0; }
}