/* Santiago Pereyra Propiedades — hoja de estilos compartida */

/* ============================================
   BRAND TOKENS — Santiago Pereyra Propiedades
============================================ */
:root {
  --red:        #d32443;
  --red-deep:   #9c1a31;
  --red-soft:   #f5e4e8;
  --ink:        #0F151C;
  --ink-soft:   #232932;
  --slate:      #4a5562;
  --slate-soft: #5c6572; /* AA: 5.9 sobre blanco, 5.0 sobre paper */
  --red-on-dark: #f27d92; /* AA: 6.9 sobre ink — rojo de marca para fondos oscuros */
  --paper:      #f6f3ee;
  --cream:      #ede7dd;
  --crema:      #f4eee2;
  --bone:       #ffffff;
  --line:       rgba(15,21,28, 0.10);
  --line-light: rgba(246, 243, 238, 0.18);

  --serif:  "Fraunces", Georgia, "Times New Roman", serif;
  --sans:   "DM Sans", -apple-system, sans-serif;
  --mono:   "DM Mono", monospace;

  --max:    1440px;
  --gutter: clamp(20px, 5vw, 80px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* Lectura en mobile: cuerpo levemente mayor por distancia de lectura */
@media (max-width: 640px){ body { font-size: 17px; } }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* Foco visible (accesibilidad — navegación por teclado) */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

/* Selección */
::selection { background: var(--red); color: var(--paper); }

/* ============================================
   TOP BAR — Strip institucional
============================================ */
.topstrip {
  background: var(--ink);
  color: var(--paper);
  padding: 8px var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.topstrip .right { display: flex; gap: 24px; }
.topstrip a { opacity: 0.75; transition: opacity 0.2s; }
.topstrip a:hover { opacity: 1; color: var(--red); }
.topstrip .dot { color: var(--red); }
@media (max-width: 720px) {
  .topstrip { font-size: 11px; padding: 6px var(--gutter); }
  .topstrip .left .hide-sm { display: none; }
  .topstrip .right { gap: 14px; }
  .topstrip .right .hide-sm { display: none; }
}

/* ============================================
   NAV
============================================ */
nav.top {
  position: sticky;
  top: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px var(--gutter);
  background: rgba(246, 243, 238, 0.92);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--line);
  transition: padding 0.3s ease;
}
nav.top .logo {
  height: 87px;
  width: auto;
}
nav.top ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, auto);
  justify-content: center;
  justify-items: center;
  align-items: center;
  column-gap: 26px;
  row-gap: 7px;
}
nav.top ul a {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  position: relative;
  padding: 4px 0;
  transition: color 0.2s;
}
nav.top ul a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%;
  height: 1.5px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
nav.top ul a:hover { color: var(--red); }
nav.top ul a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}
nav.top .cta {
  padding: 10px 20px;
  background: var(--red);
  color: var(--paper);
  border-radius: 100px;
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
}
nav.top .cta:hover {
  background: var(--red-deep);
  transform: translateY(-1px);
}
nav.top .cta svg { width: 14px; height: 14px; }


/* ============================================
   HERO
============================================ */
.hero {
  position: relative;
  min-height: min(88vh, 900px);
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 96px var(--gutter) 72px;
}
.hero .bg {
  position: absolute;
  inset: 0;
  background: url("../img/heros/hero-la-mano-playa-brava-punta-del-este.jpg") 70% 47% / 125% auto no-repeat;
  /* Grade editorial unificado: desatura, calienta y recontrasta parejo
     para que todas las fotos parezcan de la misma sesión */
  filter: saturate(0.72) sepia(0.16) saturate(1.18) contrast(1.05) brightness(0.9);
  transform: scale(1.05);
  animation: heroZoom 20s ease-out forwards;
}
@keyframes heroZoom {
  from { transform: scale(1.18); }
  to { transform: scale(1); }
}
.hero .bg { transition: opacity 1.3s ease; }
.hero .bg.layer2 { opacity: 0; }
/* En mobile el hero es más alto/angosto: forzamos cover+centro para que la foto cubra sin huecos */
@media (max-width: 760px){ .hero .bg { background-size: cover !important; background-position: center !important; } }
/* Capa de video del hero (hero-video-home.js): sin esto el <video> se
   dibuja a su tamaño nativo (a veces 1920×1080 y más) empujando todo el
   alto de la página. Ocultos por default — recién se ven con .is-active,
   que el script agrega cuando el video está listo para reproducir; si el
   teléfono no aguanta video, quedan tapados y se ve la foto de fondo.
   transform+animation calcados de ".hero .bg" (mismo scale, mismo heroZoom):
   sin esto la foto vive en pleno zoom (arranca en 1.18 y baja a 1 en 20s) y
   el video arranca plano en escala 1 — al cruzar de foto a video se nota un
   "salto" de tamaño porque uno está más zoomeado que el otro. Con la misma
   animación, ambas capas quedan siempre del mismo tamaño mientras se cruzan. */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease;
  pointer-events: none;
  transform: scale(1.05);
  animation: heroZoom 20s ease-out forwards;
  /* [A34] El MISMO grade editorial que ".hero .bg". Sin esto la foto de abajo
     se ve desaturada y ~10% más oscura y el video entra crudo, más brillante y
     más saturado: al cruzar se percibe un salto de color, como si cargara otro
     material. Con el mismo filtro, foto y video son la misma imagen. */
  filter: saturate(0.72) sepia(0.16) saturate(1.18) contrast(1.05) brightness(0.9);
}
.hero-video.is-active { opacity: 1; }
/* [A35] El scrim vive en .grain, no en .bg. Antes era ::after de la capa de
   FOTO, así que el video —que va encima— entraba sin velo y el hero saltaba
   a más claro justo al arrancar el video. .grain va después de los <video> en
   el HTML y antes de .hero-content (z-index 2), así que el velo cae parejo
   sobre foto y video, y el texto sigue arriba de todo. */
.hero .grain::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Scrim diagonal: oscurece sólo el rincón del texto y muere en el 58%,
     justo donde termina el título. De ahí a la derecha la foto queda como
     es, sin una sola gota de velo. La opacidad se sostiene hasta el 53%
     porque la última palabra del h1 vive entre el 50% y el 58%. */
  background: linear-gradient(100deg,
    rgba(15,21,28,0.56) 0%,
    rgba(15,21,28,0.50) 20%,
    rgba(15,21,28,0.42) 36%,
    rgba(15,21,28,0.33) 46%,
    rgba(15,21,28,0.22) 53%,
    rgba(15,21,28,0.09) 56%,
    rgba(15,21,28,0.00) 58%);
}
/* La sombra hace la otra mitad: dos píxeles, negra, pegada a la letra. Es la
   que salva la última palabra del título cuando atrás hay un ventanal blanco
   y ningún velo razonable puede taparlo. */
.hero h1,
.hero .lead,
.hero-meta {
  text-shadow: 0 1px 2px rgba(0,0,0,0.92), 0 0 1px rgba(0,0,0,0.55);
}
.hero .grain {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
  pointer-events: none;
  opacity: 0.55;
}

.hero-meta {
  position: static;
  margin-bottom: 20px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 1;
  color: #fff;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: fadeUp 1s ease 0.4s both;
}
.hero-meta .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red);
  animation: pulse 2s ease infinite;
}
@keyframes pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.9); }
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  padding-bottom: 0;
  animation: fadeUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}
.hero h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-variation-settings: "opsz" 144, "SOFT" 30;
  font-size: clamp(40px, 6.2vw, 92px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  margin-bottom: 20px;
  max-width: 1100px;
}
.hero h1 em {
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  color: var(--red);
}
.hero h1 .br-mobile { display: none; }
.hero h1 .hero-line1 { white-space: nowrap; }
@media (max-width: 720px) {
  .hero h1 .br-mobile { display: inline; }
  .hero h1 .hero-line1 { white-space: normal; }
}
/* [A28] Utilitario inverso a .br-mobile: un <br> que corta prolijo en PC
   pero se apaga en mobile, donde el contenedor ya es angosto y el texto
   reflowea solo sin necesitar el corte manual. Usado en nosotros.html para
   que el subtítulo del hero quede en 2 líneas en vez de 3. */
.br-desktop { display: inline; }
@media (max-width: 720px) {
  .br-desktop { display: none; }
}
.hero .lead {
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.6;
  max-width: 580px;
  color: #fff;
  font-weight: 400;
  margin-bottom: 24px;
}
.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.btn {
  padding: 14px 28px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 100px;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
  white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; }
.btn-primary {
  background: var(--red);
  color: var(--paper);
}
.btn-primary:hover {
  background: var(--red-deep);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(211, 36, 67, 0.35);
}
.btn-ghost {
  background: rgba(246, 243, 238, 0.08);
  color: var(--paper);
  border: 1px solid rgba(246, 243, 238, 0.25);
  backdrop-filter: blur(10px);
}
.btn-ghost:hover {
  background: rgba(246, 243, 238, 0.15);
  border-color: var(--paper);
}
.hero .btn-ghost {
  background: rgba(15,21,28, 0.42);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.6);
  font-weight: 600;
}
.hero .btn-ghost:hover {
  background: rgba(15,21,28, 0.6);
  border-color: #fff;
}
.btn-ink {
  background: var(--ink);
  color: var(--paper);
}
.btn-ink:hover {
  background: var(--ink-soft);
  transform: translateY(-2px);
}
.btn-outline {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}
.btn-outline:hover {
  background: var(--ink);
  color: var(--paper);
}

/* SEARCH BOX integrado en hero */
.search-box {
  position: relative;
  z-index: 3;
  background: rgba(15,21,28, 0.28);
  -webkit-backdrop-filter: blur(20px) saturate(1.25);
  backdrop-filter: blur(20px) saturate(1.25);
  border-radius: 16px;
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
  gap: 2px;
  max-width: 1100px;
  width: 100%;
  margin: 18px auto 0;
  box-shadow: 0 30px 70px -18px rgba(15,21,28, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
  animation: fadeUp 1s ease 0.6s both;
}
.search-field {
  position: relative;
  padding: 14px 18px;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.search-field:nth-of-type(-n+3) { border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.search-field:nth-of-type(3n) { border-right: none; }
.search-field label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(246, 243, 238, 0.7);
  display: block;
  margin-bottom: 4px;
}
.search-field > select,
.search-field > input {
  border: none;
  background: transparent;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--paper);
  width: 100%;
  outline: none;
  cursor: pointer;
  appearance: none;
  padding-right: 16px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='none' stroke='%23f6f3ee' stroke-width='1.5' d='M1 1l4 4 4-4'/></svg>");
  background-repeat: no-repeat;
  background-position: right center;
}
.search-field > input { background-image: none; padding-right: 0; }
.search-field > select option { color: var(--ink); background: var(--bone); }
.search-field > input::placeholder { color: rgba(246, 243, 238, 0.55); }
.search-field .zona-ms-search::placeholder { color: #6b7280; }
/* Multiselect de zonas dentro del buscador oscuro del hero: igual que los otros campos */
.search-box .zona-ms-btn { background: transparent; border: none; padding: 0; color: var(--paper); font-family: var(--sans); font-size: 14px; font-weight: 500; }
.search-box .zona-ms-btn .ph { color: rgba(246, 243, 238, 0.55); font-weight: 500; }
.search-box .zona-ms-btn:after { opacity: .8; }
/* Panel del dropdown: siempre texto oscuro legible sobre blanco */
.zona-ms-panel, .zona-ms-item, .zona-ms-search { color: #0F151C; }
.search-submit {
  grid-column: 1 / -1;
  justify-self: center;
  margin-top: 14px;
  background: var(--red);
  color: var(--paper);
  border: none;
  padding: 16px 64px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: background 0.3s, transform 0.2s;
}
.search-submit:hover { transform: translateY(-1px); }
.search-submit:hover { background: var(--red-deep); }
.search-submit svg { width: 18px; height: 18px; }

@media (max-width: 960px) {
  .search-box {
    grid-template-columns: 1fr 1fr;
    margin-bottom: -50px;
  }
  .search-submit { width: 100%; padding: 16px; }
  .search-field { border-right: none !important; border-bottom: 1px solid var(--line) !important; }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================
   TRUST STRIP — Después del hero
============================================ */
.trust-strip {
  background: var(--paper);
  padding: 64px var(--gutter) 40px;
  border-bottom: 1px solid var(--line);
}
.trust-grid {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.trust-item {
  padding: 0 30px;
  border-right: 1px solid var(--line);
}
.trust-item:last-child { border-right: none; }
.trust-item:first-child { padding-left: 0; }
.trust-num {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 12px;
}
.trust-num em {
  font-style: italic;
  color: var(--red);
}
.trust-num .plus { color: var(--red); font-style: italic; }
.trust-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 8px;
}
.trust-desc {
  font-size: 13px;
  color: var(--slate);
  line-height: 1.5;
  max-width: 200px;
  font-weight: 300;
}
@media (max-width: 768px) {
  .trust-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .trust-item { padding: 0 0 32px; border-right: none; border-bottom: 1px solid var(--line); }
  .trust-item:nth-last-child(-n+2) { border-bottom: none; padding-bottom: 0; }
}

/* ============================================
   SECTION DEFAULTS
============================================ */
section { position: relative; }
.section-head {
  max-width: var(--max);
  margin: 0 auto 44px;
  padding: 0 var(--gutter);
}
.kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.kicker::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--red);
}
h2.section-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(34px, 4.6vw, 62px);
  line-height: 1;
  letter-spacing: -0.025em;
  margin-bottom: 20px;
  max-width: 900px;
}
h2.section-title em {
  font-style: italic;
  color: var(--red);
}
.section-lead {
  font-size: 17px;
  line-height: 1.55;
  color: var(--slate);
  font-weight: 300;
  max-width: 600px;
}

/* ============================================
   LIFESTYLE CATEGORIES
============================================ */
.lifestyle {
  background: var(--paper);
  padding: clamp(52px, 8vh, 91px) 0;
}
.lifestyle-grid {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.life-card {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  cursor: pointer;
  background: var(--ink);
}
.life-card.wide { grid-column: span 2; aspect-ratio: 6/4; }
.life-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  filter: brightness(0.85);
}
.life-card:hover img {
  transform: scale(1.08);
  filter: brightness(0.7);
}
.life-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,21,28,0) 40%, rgba(15,21,28,0.85) 100%);
  pointer-events: none;
}
.life-card .info {
  position: absolute;
  bottom: 24px;
  left: 24px;
  right: 24px;
  z-index: 2;
  color: var(--paper);
}
.life-card .info h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.1;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.life-card .info h3 em {
  font-style: italic;
  color: var(--red);
}
.life-card.wide .info h3 { font-size: 34px; }
.life-card .info .count {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.85;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.life-card .info .count::after {
  content: "→";
  font-family: var(--sans);
  font-size: 14px;
  opacity: 0;
  transform: translateX(-4px);
  transition: all 0.3s ease;
}
.life-card:hover .info .count::after {
  opacity: 1;
  transform: translateX(0);
}
@media (max-width: 960px) {
  .lifestyle-grid { grid-template-columns: repeat(2, 1fr); }
  .life-card.wide { grid-column: span 2; }
}

/* ============================================
   PROPIEDADES DESTACADAS
============================================ */
.featured {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(64px, 9vh, 104px) 0;
}
.featured .section-head h2 em { color: var(--red); }
.featured .kicker { opacity: 0.85; }
.featured-tabs {
  max-width: var(--max);
  margin: 0 auto 50px;
  padding: 0 var(--gutter);
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 20px;
  border-bottom: 1px solid var(--line-light);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.featured-tabs::-webkit-scrollbar { display: none; }
.featured-tabs .tab { white-space: nowrap; flex: none; }
.featured-tabs .tab {
  color: #fff;
  opacity: 1;
  padding: 14px 0;
  transition: opacity 0.25s, background 0.25s, color 0.25s;
}
.featured-tabs .tab::after { display: none; }
.featured-tabs .tab:hover { opacity: 0.8; }
.cartera-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.cartera-cta .btn { flex: 1 1 240px; min-width: 240px; justify-content: center; text-align: center; }
.featured-tabs .tab.active {
  opacity: 1;
  background: var(--red);
  color: #fff;
  border: 1px solid var(--red);
  border-radius: 100px;
  padding: 9px 20px;
  margin: 6px 0;
}
.tab {
  background: none;
  border: none;
  color: var(--paper);
  opacity: 0.5;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 16px 0;
  position: relative;
  transition: opacity 0.3s;
}
.tab.active { opacity: 1; }
.tab.active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--red);
}
.tab:hover { opacity: 0.85; }
.tab .count {
  background: var(--red);
  color: var(--paper);
  padding: 2px 7px;
  border-radius: 100px;
  font-size: 11px;
  margin-left: 6px;
  letter-spacing: 0;
}

.props-grid {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.prop-card {
  position: relative;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}
.prop-img {
  position: relative;
  aspect-ratio: 4/3.2;
  overflow: hidden;
  margin-bottom: 20px;
  background: var(--ink-soft);
}
.prop-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.prop-card:hover .prop-img img { transform: scale(1.05); }

.prop-ref {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--red);
  color: var(--paper);
  padding: 6px 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  z-index: 2;
}
.prop-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(246, 243, 238, 0.95);
  color: var(--ink);
  padding: 6px 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  z-index: 2;
}
.prop-fav {
  position: absolute;
  bottom: 16px;
  right: 16px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(15,21,28, 0.6);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  color: var(--paper);
  z-index: 2;
  transition: all 0.3s;
}
.prop-fav:hover {
  background: var(--red);
  transform: scale(1.1);
}
.prop-fav svg { width: 16px; height: 16px; }

.prop-meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 8px;
}
.prop-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
  min-height: 52px;
}
.prop-specs {
  display: flex;
  gap: 18px;
  font-size: 13px;
  color: rgba(246, 243, 238, 0.7);
  margin-top: auto;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line-light);
}
.prop-specs span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.prop-specs strong {
  color: var(--paper);
  font-weight: 500;
}
.prop-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0;
}
.prop-price {
  font-family: var(--serif);
  font-style: normal;
  font-size: 24px;
  font-weight: 400;
  color: var(--red);
  letter-spacing: -0.01em;
}
.prop-price small {
  font-family: var(--mono);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.18em;
  display: block;
  color: rgba(246, 243, 238, 0.55);
  margin-bottom: 2px;
}
.prop-cta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--paper);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--red);
  transition: all 0.3s;
}
.prop-cta:hover {
  color: var(--red);
  gap: 14px;
}

.featured-actions {
  max-width: var(--max);
  margin: 40px auto 0;
  padding: 36px var(--gutter) 0;
  border-top: 1px solid var(--line-light);
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
  align-items: center;
}
.featured-actions p {
  font-family: var(--serif);
  font-style: normal;
  font-size: 22px;
  font-weight: 300;
  color: inherit;
  max-width: 500px;
}
.featured-actions p em { font-style: normal; color: inherit; }
@media (max-width: 640px) {
  .featured-actions { margin-top: 16px; padding-top: 18px; gap: 12px; }
  .featured-actions p { font-size: 18px; margin-bottom: 4px; }
  
  .featured-tabs { margin-bottom: 22px; gap: 14px; }
  .featured { padding: 44px 0; }
}

@media (max-width: 1024px) {
  .props-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .props-grid { grid-template-columns: 1fr; }
}

/* ============================================
   VENDÉ TU PROPIEDAD — Bloque para propietarios
============================================ */
.sell-section {
  background: linear-gradient(135deg, var(--red) 0%, var(--red-deep) 100%);
  color: var(--paper);
  padding: clamp(64px, 9vh, 104px) var(--gutter);
  position: relative;
  overflow: hidden;
}
.sell-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
  opacity: 0.4;
  pointer-events: none;
}
.sell-grid {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 80px;
  position: relative;
  z-index: 2;
}
.sell-section .kicker { color: rgba(246, 243, 238, 0.8); }
.sell-section .kicker::before { background: var(--paper); }
.sell-section h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(36px, 5.5vw, 76px);
  line-height: 1;
  letter-spacing: -0.025em;
  margin-bottom: 28px;
  margin-top: 24px;
}
.sell-section h2 em {
  font-style: italic;
  color: var(--paper);
  text-decoration: underline;
  text-decoration-color: rgba(246, 243, 238, 0.5);
  text-decoration-thickness: 1px;
  text-underline-offset: 8px;
}
.sell-section .lead {
  font-size: 17px;
  line-height: 1.6;
  font-weight: 300;
  margin-bottom: 36px;
  max-width: 540px;
  color: rgba(246, 243, 238, 0.92);
}
.sell-bullets {
  list-style: none;
  margin-bottom: 40px;
}
.sell-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
  font-size: 15px;
  line-height: 1.5;
}
.sell-bullets li::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--paper);
  margin-top: 9px;
  flex-shrink: 0;
}
.sell-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-white {
  background: var(--paper);
  color: var(--ink);
}
.btn-white:hover {
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-2px);
}

/* Form de tasación dentro de la sección */
.sell-form {
  background: var(--paper);
  color: var(--ink);
  padding: 36px;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(15,21,28, 0.3);
}
.sell-form h3 {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 400;
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.sell-form h3 em {
  font-style: italic;
  color: var(--red);
}
.sell-form .sub {
  font-size: 13px;
  color: var(--slate);
  margin-bottom: 24px;
  font-weight: 300;
}
.form-row {
  display: flex;
  align-items: flex-end; /* si un label es más largo y ocupa 2 líneas (ej. "WhatsApp
    (con código de país)"), el input queda igual alineado con el del campo de al lado */
  gap: 10px;
  margin-bottom: 12px;
}
.form-row > * { flex: 1; }
.form-field label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate); /* la tarjeta base es clara; en tarjetas oscuras lo pisa .form-card--dark */
  margin: 0 0 6px 2px;
}
/* Variante para tarjetas de formulario oscuras (ej. contacto.html) */
.form-card--dark .form-field label { color: rgba(246, 243, 238, 0.72); }
.form-card--dark h3 { color: var(--paper); }
.form-card--dark .sub, .form-card--dark .form-note { color: rgba(246, 243, 238, 0.75); }
.form-field input,
.form-field select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-family: var(--sans);
  font-size: 14px;
  background: var(--bone);
  color: var(--ink);
  transition: border-color 0.2s;
}
.form-field input:focus,
.form-field select:focus {
  outline: none;
  border-color: var(--red);
}
.form-field input::placeholder { color: var(--slate-soft); }
.form-submit {
  width: 100%;
  padding: 14px;
  background: var(--ink);
  color: var(--paper);
  border: none;
  border-radius: 6px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  margin-top: 14px;
  transition: background 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.form-submit:hover { background: var(--red); }
.form-submit svg { width: 16px; height: 16px; flex-shrink: 0; }
.form-note {
  font-size: 11px;
  color: var(--slate);
  text-align: center;
  margin-top: 12px;
  line-height: 1.5;
}

@media (max-width: 960px) {
  .sell-grid { grid-template-columns: 1fr; gap: 50px; }
}

/* ============================================
   PROCESO — Cómo trabajamos
============================================ */
.process {
  background: var(--paper);
  padding: clamp(64px, 9vh, 104px) 0;
}
.process-grid {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}
.process-step {
  position: relative;
  padding-top: 30px;
  border-top: 1px solid var(--ink);
}
.process-step .num {
  position: absolute;
  top: -1px;
  left: 0;
  background: var(--paper);
  padding-right: 14px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--red);
  letter-spacing: 0.18em;
  transform: translateY(-50%);
}
.process-step h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}
.process-step h3 em {
  font-style: italic;
  color: var(--red);
}
.process-step p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--slate);
  font-weight: 300;
}
@media (max-width: 960px) {
  .process-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .process-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ============================================
   ZONAS Y BARRIOS
============================================ */
.zones {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(64px, 9vh, 104px) 0;
  overflow: hidden;
}
.zones .section-head h2 em { color: var(--red); }
.zones-grid {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.zones-list {
  border-top: 1px solid var(--line-light);
}
.zone-row {
  padding: 26px 0;
  border-bottom: 1px solid var(--line-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: padding 0.3s ease;
}
.zone-row:hover { padding-left: 16px; }
.zone-row .name {
  font-family: var(--serif);
  font-style: italic;
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.zone-row .right-side {
  display: flex;
  align-items: center;
  gap: 20px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.6;
}
.zone-row .arrow {
  opacity: 0;
  transform: translateX(-8px);
  transition: all 0.3s;
}
.zone-row:hover .arrow { opacity: 1; transform: translateX(0); color: var(--red); }
.zone-row:hover .name { color: var(--paper); }

.zones-intro p {
  font-size: 17px;
  line-height: 1.6;
  color: rgba(246, 243, 238, 0.75);
  font-weight: 300;
  margin-bottom: 24px;
  max-width: 480px;
}
.zones-intro .stats-mini {
  margin-top: 40px;
  padding-top: 30px;
  border-top: 1px solid var(--line-light);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}
.stats-mini .item .v {
  font-family: var(--serif);
  font-style: italic;
  font-size: 36px;
  font-weight: 300;
  color: var(--red);
  line-height: 1;
}
.stats-mini .item .l {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: 8px;
  opacity: 0.6;
}

@media (max-width: 960px) {
  .zones-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ============================================
   EDIFICIOS DESTACADOS
============================================ */
.buildings {
  background: var(--cream);
  padding: clamp(64px, 9vh, 104px) 0;
}
.buildings-grid {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.bld-card {
  background: var(--paper);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: transform 0.5s ease;
  border-top: 2px solid var(--red);
}
.bld-card:hover { transform: translateY(-4px); }
.bld-img {
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--ink);
}
.bld-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s ease;
}
.bld-card:hover .bld-img img { transform: scale(1.05); }
.bld-info { padding: 24px 22px 26px; }
.bld-zona {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 8px;
}
.bld-info h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.1;
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}
.bld-info p {
  font-size: 13px;
  color: var(--slate);
  line-height: 1.55;
  margin-bottom: 16px;
  font-weight: 300;
}
.bld-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.bld-actions a {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 100px;
  transition: all 0.3s;
}
.bld-actions a:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.bld-actions a.primary { background: var(--red); color: var(--paper); border-color: var(--red); }
.bld-actions a.primary:hover { background: var(--red-deep); border-color: var(--red-deep); }

@media (max-width: 960px) { .buildings-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .buildings-grid { grid-template-columns: 1fr; } }

/* ============================================
   ABOUT — Sobre Santiago
============================================ */
.about {
  background: var(--paper);
  padding: clamp(64px, 9vh, 104px) var(--gutter);
}
.about-grid {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}
.about-img {
  aspect-ratio: 4/5;
  background: url("../img/santiago-puerto.jpg") center / cover no-repeat;
  filter: grayscale(15%);
  position: relative;
}
.about-img::after {
  content: "SANTIAGO PEREYRA";
  position: absolute;
  bottom: 0;
  left: 0;
  background: var(--red);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  padding: 12px 18px;
}
.about h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin-bottom: 30px;
}
.about h2 em {
  font-style: italic;
  color: var(--red);
}
.about p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
  font-weight: 300;
  margin-bottom: 20px;
  max-width: 540px;
}
.about p strong { font-weight: 500; color: var(--ink); }
.about .signature {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: inline-block;
  padding-right: 60px;
}
.about .signature span {
  font-family: var(--serif);
  font-style: italic;
  font-size: 26px;
  color: var(--ink);
  display: block;
}
.about .signature small {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--slate);
  margin-top: 4px;
  display: block;
}

@media (max-width: 768px) {
  .about-grid { grid-template-columns: 1fr; }
}

/* ============================================
   GUÍAS Y REPORTES
============================================ */
.guides {
  background: var(--paper);
  padding: clamp(52px, 8vh, 91px) 0;
  border-top: 1px solid var(--line);
}
.guides-grid {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.guide-card {
  position: relative;
  cursor: pointer;
  padding: 32px;
  border: 1px solid var(--line);
  background: var(--bone);
  transition: all 0.4s ease;
}
.guide-card:hover {
  border-color: var(--red);
  transform: translateY(-4px);
  box-shadow: 0 20px 50px -20px rgba(211, 36, 67, 0.25);
}
.guide-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--red);
  margin-bottom: 20px;
}
.guide-card h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.15;
  margin-bottom: 14px;
  letter-spacing: -0.01em;
  min-height: 86px;
}
.guide-card h3 em { font-style: italic; color: var(--red); }
.guide-card p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--slate);
  margin-bottom: 20px;
}
.guide-card .read {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.guide-card .read::after {
  content: "→";
  transition: transform 0.3s;
}
.guide-card:hover .read::after { transform: translateX(4px); color: var(--red); }

@media (max-width: 960px) { .guides-grid { grid-template-columns: 1fr; } }

/* ============================================
   TESTIMONIO
============================================ */
.testimonial {
  background: var(--paper);
  padding: 80px var(--gutter) clamp(80px, 14vh, 140px);
}
.testimonial-wrap {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
  border-top: 1px solid var(--line);
  padding-top: 80px;
}
.testimonial .mark {
  font-family: var(--serif);
  font-style: italic;
  font-size: 100px;
  line-height: 0.5;
  color: var(--red);
  margin-bottom: 30px;
  font-weight: 300;
  display: block;
}
.testimonial blockquote {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(24px, 3vw, 40px);
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin-bottom: 36px;
}
.testimonial blockquote em {
  font-style: italic;
  color: var(--red);
}
.testimonial .author {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--slate);
}

/* ============================================
   CTA FINAL
============================================ */
.final-cta {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(64px, 9vh, 104px) var(--gutter);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.final-cta::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--red), transparent);
}
.final-cta .kicker { color: rgba(246, 243, 238, 0.7); justify-content: center; }
.final-cta .kicker::before { background: rgba(246, 243, 238, 0.7); }
.final-cta h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(40px, 6.5vw, 96px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin-bottom: 30px;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
.final-cta h2 em {
  font-style: italic;
  color: var(--red);
}
.final-cta p {
  font-size: 17px;
  line-height: 1.6;
  color: rgba(246, 243, 238, 0.75);
  max-width: 580px;
  margin: 0 auto 40px;
  font-weight: 300;
}
.final-cta .actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================
   FOOTER
============================================ */
footer {
  background: var(--ink);
  color: var(--paper);
  padding: 80px var(--gutter) 30px;
  border-top: 1px solid var(--line-light);
}
.footer-grid {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 50px;
  padding-bottom: 60px;
  border-bottom: 1px solid var(--line-light);
}
.footer-brand .logo {
  height: 60px;
  width: auto;
  margin-bottom: 20px;
}
img.logo { width: auto; }
.footer-brand p {
  font-size: 14px;
  line-height: 1.6;
  opacity: 0.7;
  max-width: 320px;
  font-weight: 300;
}
.footer-col h4 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 18px;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 10px; }
.footer-col a {
  font-size: 13px;
  opacity: 0.75;
  transition: all 0.2s;
}
.footer-col a:hover { opacity: 1; color: var(--red); }
.footer-col address {
  font-style: normal;
  font-size: 13px;
  line-height: 1.6;
  opacity: 0.75;
  margin-bottom: 12px;
}
.footer-bottom {
  max-width: var(--max);
  margin: 30px auto 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.5;
}
.footer-social {
  display: flex;
  gap: 14px;
}
.footer-social a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  opacity: 0.85;
}
.footer-social a:hover {
  background: var(--red);
  border-color: var(--red);
  transform: translateY(-2px);
  opacity: 1;
}
.footer-social svg { width: 16px; height: 16px; }

@media (max-width: 960px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .footer-brand { grid-column: 1 / -1; }
}

/* ============================================
   WHATSAPP FLOTANTE
============================================ */
/* ============================================
   REVEAL
============================================ */
/* Progressive enhancement: el contenido es visible por defecto.
   El estado oculto sólo se aplica si hay JS (html.js) y el usuario
   no pidió reducir el movimiento. Sin JS u observer, todo se ve. */
@media (prefers-reduced-motion: no-preference){
  .js .reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  }
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ============================================
   PÁGINAS INTERNAS
============================================ */
.page-hero {
  background: var(--ink); color: var(--paper);
  padding: clamp(104px, 13vh, 140px) 6vw clamp(60px, 8vh, 88px);
  position: relative; overflow: hidden;
}
.page-hero .kicker { color: #fff; }
.page-hero .kicker::before { background: var(--red); }
.page-hero h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.4rem, 5.4vw, 4.4rem);
  line-height: 1.06; letter-spacing: -0.01em; margin: 18px 0 22px;
}
.page-hero h1 em { font-style: italic; color: var(--red); }
.page-hero .lead {
  max-width: 560px; font-size: clamp(1rem, 1.25vw, 1.12rem);
  line-height: 1.7; color: #fff; font-weight: 300;
}
/* COMING SOON — artículos en preparación */
.coming-soon {
  background: var(--paper); color: var(--ink); text-align: center;
  padding: clamp(64px,11vh,128px) 6vw clamp(56px,9vh,104px);
  display: flex; flex-direction: column; align-items: center;
}
.coming-soon .cs-kicker {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--red);
  display: inline-flex; align-items: center; gap: 12px; margin-bottom: 24px;
}
.coming-soon .cs-kicker::before,
.coming-soon .cs-kicker::after {
  content: ""; width: 30px; height: 1px; background: rgba(15,21,28,0.22);
}
.coming-soon h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.9rem,4.2vw,3.2rem); line-height: 1.1;
  letter-spacing: -0.01em; max-width: 720px; margin: 0 0 22px;
}
.coming-soon h2 em { font-style: italic; color: var(--red); }
.coming-soon p {
  max-width: 560px; font-size: clamp(1rem,1.2vw,1.12rem);
  line-height: 1.75; color: var(--slate); font-weight: 300; margin: 0 auto;
}
.coming-soon .cs-meanwhile { margin-top: 18px; color: var(--ink-soft); }
.coming-soon .hero-actions { justify-content: center; margin-top: 36px; }

.page-section { padding: clamp(46px, 6.5vh, 72px) 6vw; }
.page-section.tinted { background: var(--cream); }
.page-section.dark { background: var(--ink); color: var(--paper); }

/* Fotos editoriales */
.photo-band { padding: 0 6vw clamp(46px, 6.5vh, 72px); }
.photo-band img { width: 100%; height: clamp(320px, 55vh, 560px); object-fit: cover; display: block; }
.photo-duo { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; }
.photo-duo img { width: 100%; height: 100%; min-height: 280px; object-fit: cover; display: block; }
.img-caption { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate-soft); margin-top: 12px; }

/* Equipo */
.team-hero-img { width: 100%; height: clamp(340px, 60vh, 620px); object-fit: cover; display: block; }
.team-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 36px 24px; margin-top: 56px;
}
.team-card .photo { aspect-ratio: 3/4; overflow: hidden; background: var(--cream); }
.team-card .photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.7s cubic-bezier(0.22,1,0.36,1); }
.team-card:hover .photo img { transform: scale(1.04); }
.team-card .name { font-family: var(--serif); font-size: 1.25rem; margin-top: 18px; }
.team-card .role { font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--red); margin-top: 6px; }
.team-card .bio { font-size: 0.92rem; color: var(--slate); line-height: 1.6; margin-top: 10px; font-weight: 300; }

/* Zonas */
.zone-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; margin-top: 56px; }
.zone-card { position: relative; display: block; overflow: hidden; background: var(--ink); color: var(--paper); min-height: 380px; }
.zone-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.78; transition: transform 0.8s cubic-bezier(0.22,1,0.36,1), opacity 0.4s; }
.zone-card:hover img { transform: scale(1.05); opacity: 0.6; }
.zone-card .zc-info { position: absolute; left: 26px; right: 26px; bottom: 24px; z-index: 2; }
.zone-card .zc-info::before { content: ""; position: absolute; inset: -200px -40px -40px; background: linear-gradient(to top, rgba(15,21,28,0.85), transparent); z-index: -1; }
.zone-card h3 { font-family: var(--serif); font-size: 1.6rem; font-weight: 400; }
.zone-card .zc-count { font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(246,243,238,0.75); display: block; margin-top: 6px; }
.zone-card p { font-size: 0.92rem; font-weight: 300; color: rgba(246,243,238,0.82); margin-top: 10px; line-height: 1.55; }

/* Ficha de propiedad */
.ficha-top { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(28px, 4vw, 60px); align-items: start; }
.ficha-gallery .main { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; background: var(--cream); }
.ficha-thumbs { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; margin-top: 8px; }
.ficha-thumbs img { width: 100%; aspect-ratio: 1; object-fit: cover; cursor: pointer; opacity: 0.55; transition: opacity 0.25s; display: block; }
.ficha-thumbs img.active, .ficha-thumbs img:hover { opacity: 1; }
.ficha-ref { font-family: var(--mono, monospace); font-size: 0.78rem; letter-spacing: 0.14em; color: var(--slate-soft); }
.ficha-info h1 { font-family: var(--serif); font-size: clamp(1.7rem, 2.6vw, 2.4rem); font-weight: 400; line-height: 1.15; margin: 14px 0 8px; }
.ficha-zona { font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); }
.ficha-precio { font-family: var(--serif); font-size: 2rem; margin: 26px 0 6px; }
.ficha-precio small { display: block; font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--slate-soft); margin-bottom: 6px; }
.ficha-specs { display: flex; flex-wrap: wrap; gap: 10px 26px; padding: 22px 0; margin: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 0.95rem; color: var(--slate); }
.ficha-specs strong { color: var(--ink); font-weight: 600; }
.ficha-desc { color: var(--slate); line-height: 1.75; font-weight: 300; }
.ficha-desc p + p { margin-top: 14px; }
.ficha-amenities { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0; }
.ficha-amenities span { font-size: 0.78rem; letter-spacing: 0.08em; padding: 8px 14px; border: 1px solid var(--line); color: var(--slate); }
.ficha-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.back-link { display: inline-flex; align-items: center; gap: 8px; font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate); text-decoration: none; margin-bottom: 26px; }
.back-link:hover { color: var(--red); }
/* En las fichas, "Volver a propiedades" queda fijo bajo el menú al scrollear */
.ficha-wrap .back-link {
  position: sticky; top: 127px; z-index: 90;
  align-self: flex-start; width: max-content;
  background: rgba(246,243,238,0.45);
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid rgba(255,255,255,0.4); border-radius: 100px;
  padding: 9px 18px; margin-bottom: 18px;
  box-shadow: 0 8px 22px -14px rgba(15,21,28,.4);
}
@media (max-width: 768px) { .ficha-wrap .back-link { top: 88px; } }

/* Contacto */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(36px, 5vw, 80px); align-items: start; }
.contact-item { padding: 22px 0; border-bottom: 1px solid var(--line); }
.contact-item .lbl { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--slate-soft); margin-bottom: 8px; }
.contact-item a, .contact-item address { font-family: var(--serif); font-style: normal; font-size: 1.25rem; color: var(--ink); text-decoration: none; line-height: 1.4; }
.contact-item a:hover { color: var(--red); }

/* Guías */
.guide-full { max-width: 760px; }
.guide-full h3 { font-family: var(--serif); font-size: 1.5rem; font-weight: 400; margin: 40px 0 14px; }
.guide-full p, .guide-full li { color: var(--slate); line-height: 1.75; font-weight: 300; }
.guide-full ul { margin: 14px 0 14px 18px; }

/* Nav activo */
nav.top ul a.active { color: var(--red); }

@media (max-width: 900px) {
  .ficha-top, .contact-grid, .photo-duo { grid-template-columns: 1fr; }
  .page-hero { padding-top: 100px; }
  nav.top ul { display: none; }
}

/* ============================================
   MARQUEE — tarjetas volando
============================================ */
.marquee { overflow: hidden; position: relative; }
.marquee-track {
  display: flex; gap: 24px; width: max-content;
  will-change: transform;
  animation: fly-right 40s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes fly-right {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
.marquee-track .prop-card { width: min(380px, 80vw); flex: none; }

/* Testimonios voladores */
.testimonial { padding: clamp(52px, 8vh, 85px) 0; background: var(--cream); overflow: hidden; }
.testimonial .section-head { padding: 0 6vw; margin-bottom: 48px; }
.t-track { animation-duration: 70s; }
.t-card {
  width: min(440px, 84vw); flex: none;
  background: var(--bone); border: 1px solid var(--line);
  padding: 34px 32px 28px; display: flex; flex-direction: column; gap: 18px;
}
.t-card .mark { font-family: var(--serif); font-size: 3rem; line-height: 0.5; color: var(--red); }
.t-card blockquote {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: 1.12rem; line-height: 1.55; color: var(--ink); flex: 1;
}
.t-card blockquote em { color: var(--red); }
.t-card .author {
  font-family: var(--mono, monospace); font-size: 0.72rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate-soft);
}

/* ============================================
   MEDIOS (prensa) + iconos uniformes
============================================ */
.media-band { text-align:center; padding: clamp(40px,6vh,64px) var(--gutter); border-top:1px solid var(--line); }
.media-band .eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--slate-soft); margin-bottom: 26px; }
.media-logos { display:flex; flex-wrap:wrap; gap: clamp(28px,5vw,64px); align-items:center; justify-content:center; }
.media-logos img { height: 34px; width:auto; opacity: 0.55; transition: opacity .3s; filter: none; }
.media-logos img:hover { opacity: 0.95; }
footer .footer-social a, nav.top .cta svg, footer .footer-social a { color: var(--paper); opacity:.7; transition:opacity .3s,color .3s; }
footer .footer-social a:hover { opacity:1; color: var(--red); }

/* LISTADOS */
nav.top li.has-sub { position: relative; }
nav.top li.has-sub > a { cursor: pointer; }
nav.top .submenu {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  background: var(--bone); border: 1px solid var(--line); border-radius: 12px;
  padding: 8px; min-width: 240px; box-shadow: 0 20px 50px -16px rgba(15,21,28,.35);
  display: none; flex-direction: column; gap: 2px; z-index: 120;
}
nav.top li.has-sub:hover .submenu { display: flex; }
nav.top .submenu .sub-head { font-family: var(--mono); font-size: 11px; letter-spacing:.14em; text-transform:uppercase; color: var(--slate-soft); padding: 10px 14px 4px; }
nav.top .submenu a { padding: 10px 14px; border-radius: 8px; font-size: 14px; white-space: nowrap; }
nav.top .submenu a::after { display:none; }
nav.top li.lang-switch > a::after { content:"▾"; margin-left:5px; font-size:.8em; opacity:.65; display:inline-block; transition:transform .2s; }
nav.top li.lang-switch:hover > a::after { transform:translateY(2px); opacity:1; }
nav.top .submenu a:hover { background: var(--cream); color: var(--red); }


.filterbar { position: sticky; top: 0; z-index: 400; background: rgba(246,243,238, 0.88); -webkit-backdrop-filter: blur(20px) saturate(1.25); backdrop-filter: blur(20px) saturate(1.25); border-bottom: 1px solid rgba(15,21,28,.10); padding: 12px var(--gutter); display: flex; flex-wrap: nowrap; gap: 10px; align-items: center; overflow-x: visible; }
.filterbar::-webkit-scrollbar { display: none; }
.filterbar .fb-label { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(15,21,28,.7); white-space: nowrap; padding-right: 4px; }
.filterbar .fb-label svg { width: 13px; height: 13px; flex: none; }
@media (max-width: 768px) { .filterbar .fb-label { width: 100%; } }
.filterbar select { flex: none; }
@media (max-width: 768px) { .filterbar { flex-wrap: wrap; overflow-x: visible; } }
.filterbar select { appearance: none; background: rgba(15,21,28,.04); border: 1px solid rgba(15,21,28,.18); border-radius: 100px; padding: 10px 18px; font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--ink); cursor: pointer; }
.filterbar select option { color: var(--ink); background: var(--bone); }
.filterbar select:hover { border-color: rgba(15,21,28,.4); }
.filterbar input.fb-precio { appearance: none; background: rgba(15,21,28,.04); border: 1px solid rgba(15,21,28,.18); border-radius: 100px; padding: 10px 18px; font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--ink); width: 132px; }
.filterbar input.fb-precio::placeholder { color: rgba(15,21,28,.5); }
.filterbar input.fb-precio:hover, .filterbar input.fb-precio:focus { border-color: rgba(15,21,28,.4); outline: none; }

/* Compartir en la ficha */
.fi-share { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 16px; }
.fi-share-lbl { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--slate-soft, #6b7683); margin-right: 2px; }
.fi-share-ic { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(15,21,28,.25); color: var(--ink); background: transparent; cursor: pointer; transition: all .25s; padding: 0; }
.fi-share-ic svg { width: 17px; height: 17px; }
.fi-share-ic:hover { border-color: var(--red); color: var(--red); }
.fi-share-link { background: none; border: none; padding: 0; font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(15,21,28,.35); cursor: pointer; }
.fi-share-link:hover { color: var(--red); text-decoration-color: var(--red); }

/* Grilla de precios al costado de la foto (fichas de alquiler) */
.fi-lado { margin: 18px 0 6px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; }
.fi-lado h2 { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--slate-soft, #6b7683); margin: 0 0 10px; }
.fi-lado .fi-gastos li { font-size: 13.5px; padding: 7px 0; }

/* Flechas y pasada suave de la galería */
.gallery { position: relative; }
.gallery .main { transition: opacity .45s ease; }
.g-arrow { position: absolute; width: 42px; height: 42px; border-radius: 50%; border: none; background: rgba(15,21,28,.42); color: #f6f3ee; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 5; transition: background .25s; padding: 0; }
.g-arrow svg { width: 18px; height: 18px; }
.g-arrow:hover { background: var(--red); }
.g-arrow.prev { left: 12px; }
.g-arrow.next { right: 12px; }

/* Tarjetas ricas: badges, mini-carrusel, snippet, precio anterior tachado */
.prop-badges { position: absolute; top: 12px; right: 12px; display: flex; gap: 6px; z-index: 3; }
.prop-badge { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px; border-radius: 99px; color: #fff; }
.prop-badge.nueva { background: var(--red); }
.prop-badge.baja { background: #2E6B45; }
.prop-price s { opacity: .55; font-weight: 400; margin-right: 6px; font-size: .85em; }
.prop-snip { font-size: 12.5px; line-height: 1.45; color: var(--slate-soft, #6b7683); margin: 4px 0 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pc-arr { position: absolute; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; border: none; background: rgba(15,21,28,.45); color: #f6f3ee; font-size: 13px; line-height: 1; cursor: pointer; z-index: 3; opacity: 0; transition: opacity .25s, background .25s; display: flex; align-items: center; justify-content: center; padding: 0; }
.prop-card:hover .pc-arr { opacity: 1; }
.pc-arr:hover { background: var(--red); }
.pc-arr.prev { left: 10px; } .pc-arr.next { right: 10px; }
@media (hover: none) { .pc-arr { opacity: .85; } }
.btn-avisame { display: block; margin: 26px auto 0; background: transparent; border: 1px solid rgba(15,21,28,.3); border-radius: 99px; padding: 12px 26px; font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--ink); cursor: pointer; transition: all .25s; }
.btn-avisame:hover { border-color: var(--red); color: var(--red); }
.novedades-sec .section-lead { max-width: 560px; }
.filterbar .count { margin-left: auto; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgba(15,21,28,.55); }
.listing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px,1fr)); gap: 28px; padding: clamp(36px,5vh,56px) var(--gutter); max-width: var(--max); margin: 0 auto; }
.listing-empty { grid-column: 1/-1; text-align:center; color: var(--slate); padding: 60px 0; }
/* Tarjetas de cartera con la misma estética que el home (fondo claro) */
.listing-grid .prop-specs { color: rgba(15,21,28,.65); border-bottom-color: rgba(15,21,28,.12); }
.listing-grid .prop-specs strong { color: var(--ink); }
.listing-grid .prop-price small { color: rgba(15,21,28,.5); }
.listing-grid .prop-cta { color: var(--ink); }
.lcard { background: var(--bone); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s; }
.lcard:hover { transform: translateY(-5px); box-shadow: 0 24px 50px -22px rgba(15,21,28,.4); }
.lcard .ph { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--cream); }
.lcard .ph img { width:100%; height:100%; object-fit: cover; transition: transform .8s; }
.lcard:hover .ph img { transform: scale(1.06); }
.lcard .badge { position:absolute; top:12px; left:12px; background: var(--red); color:#fff; font-size:11px; font-weight:600; letter-spacing:.04em; padding:5px 12px; border-radius:100px; }
.lcard .ref { position:absolute; top:12px; right:12px; background: rgba(15,21,28,.7); color:#fff; font-family:var(--mono); font-size:11px; letter-spacing:.1em; padding:5px 10px; border-radius:100px; }
.lcard .body { padding: 18px 20px 20px; display:flex; flex-direction:column; gap:8px; flex:1; }
.lcard .zona { font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--red); }
.lcard h3 { font-family:var(--serif); font-weight:400; font-size:1.25rem; line-height:1.15; }
.lcard .specs { display:flex; gap:16px; font-size:.85rem; color:var(--slate); margin-top:auto; }
.lcard .specs strong { color:var(--ink); }
.lcard .foot { margin-top:0; padding-top:14px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; }
.lcard .price { font-family:var(--serif); font-size:1.3rem; }
.lcard .price small { display:block; font-family:var(--sans); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--slate-soft); }
.lcard .go { font-size:13px; font-weight:600; color:var(--red); }
.cta-band { background: var(--ink); color: var(--paper); text-align:center; padding: clamp(48px,7vh,80px) var(--gutter); }
.cta-band h2 { font-family:var(--serif); font-weight:400; font-size:clamp(1.6rem,3vw,2.4rem); margin-bottom:14px; }
.cta-band h2 em{font-style:italic;color:var(--red);}
.cta-band p { color: rgba(246,243,238,.7); max-width:540px; margin:0 auto 26px; font-weight:300; }
.cta-band .hero-actions{justify-content:center;}
@media (max-width:1024px){ .filterbar{ position:static; top:auto; } }

/* MEDIA INLINE */
.media-inline { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line); }
.media-inline .eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--slate-soft); margin-bottom: 16px; display: block; }
.media-row { display: flex; flex-wrap: wrap; gap: 18px 26px; align-items: center; }
.media-row .medio { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; color: var(--ink); }
.media-row .medio img { height: 24px; width: auto; opacity: .9; }

/* FICHA NUEVA */
.ficha-wrap { max-width: var(--max); margin: 0 auto; padding: clamp(8px,1.2vh,16px) var(--gutter) clamp(50px,7vh,80px); }
.ficha-top { display:grid; grid-template-columns: 1.55fr 1fr; gap: clamp(28px,3.5vw,56px); align-items:start; }
.gallery .main { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:14px; background:var(--cream); display:block; cursor:zoom-in; }
.gallery .thumbs { display:grid; grid-template-columns: repeat(5,1fr); gap:8px; margin-top:8px; }
.gallery .thumbs img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:8px; cursor:pointer; opacity:.55; transition:opacity .25s; }
.gallery .thumbs img.active, .gallery .thumbs img:hover { opacity:1; }
.fi-aside { position:sticky; top:90px; }
.fi-ref { font-family:var(--mono); font-size:12px; letter-spacing:.14em; color:var(--slate-soft); }
.fi-zona { font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--red); margin-top:8px; }
.fi-title { font-family:var(--serif); font-weight:400; font-size:clamp(1.6rem,2.4vw,2.3rem); line-height:1.12; margin:6px 0 4px; }
.fi-price { font-family:var(--serif); font-size:2.1rem; margin:18px 0 4px; }
.fi-price small { display:block; font-family:var(--sans); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--slate-soft); }
.fi-specs { display:flex; flex-wrap:wrap; gap:14px; margin:20px 0; }
.fi-spec { flex:1 1 calc(50% - 14px); min-width:120px; border:1px solid var(--line); border-radius:12px; padding:14px 16px; }
.fi-spec .n { font-family:var(--serif); font-size:1.5rem; }
.fi-spec .l { font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--slate-soft); }
.fi-cta { display:flex; flex-direction:column; gap:10px; margin-top:18px; }
.fi-cta .btn { justify-content:center; }
.fi-asesor { display:flex; align-items:center; gap:14px; margin-top:22px; padding-top:20px; border-top:1px solid var(--line); }
.fi-asesor img { width:54px; height:54px; border-radius:50%; object-fit:cover; }
.fi-asesor .nm { font-weight:600; }
.fi-asesor .rl { font-size:12px; color:var(--slate); }
.fi-section { max-width: var(--max); margin:0 auto; padding: clamp(36px,5vh,60px) var(--gutter); border-top:1px solid var(--line); }
.fi-section h2 { font-family:var(--serif); font-weight:400; font-size:1.6rem; margin-bottom:18px; }
.fi-desc { color:var(--slate); line-height:1.8; font-weight:300; white-space:pre-line; max-width:820px; }
.fi-amen { display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; }
.fi-amen span { font-size:13px; padding:9px 16px; border:1px solid var(--line); border-radius:100px; color:var(--slate); display:inline-flex; gap:8px; align-items:center; }
.fi-loc { display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:center; }
.fi-loc .map { aspect-ratio:16/10; border-radius:14px; overflow:hidden; border:1px solid var(--line); }
.fi-loc iframe { width:100%; height:100%; border:0; }
.rel-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:24px; }
.lightbox { position:fixed; inset:0; background:rgba(10,12,16,.92); display:none; align-items:center; justify-content:center; z-index:999; padding:30px; }
.lightbox.open { display:flex; }
.lightbox img { max-width:95%; max-height:92%; border-radius:8px; }
.lightbox .x { position:absolute; top:20px; right:28px; color:#fff; font-size:34px; cursor:pointer; line-height:1; }
@media (max-width:900px){ .ficha-top,.fi-loc{grid-template-columns:1fr;} .fi-aside{position:static;} }

/* BRAND BAND */
.brand-band { position: relative; min-height: clamp(360px,52vh,520px); display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden; }
.brand-band img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.brand-band::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,21,28,.55), rgba(15,21,28,.35)); }
.brand-band .bb-inner { position:relative; z-index:2; color:var(--paper); padding: 40px var(--gutter); max-width:780px; }
.brand-band .kicker { color: rgba(246,243,238,.8); justify-content:center; display:inline-flex; }
.brand-band .kicker::before { background: var(--paper); }
.brand-band h2 { font-family:var(--serif); font-weight:400; font-size:clamp(1.8rem,3.6vw,3rem); line-height:1.08; margin:14px 0 10px; }
.brand-band h2 em { font-style:italic; color:#fff; }
.brand-band p { color: rgba(246,243,238,.85); font-weight:300; max-width:560px; margin:0 auto; }

/* FICHA V2 */
.fi-logo { display:block; margin:0 auto 6px; height:147px; max-height:26vw; width:auto; max-width:90%; object-fit:contain; }
.fi-head-top { text-align:center; margin-bottom:8px; }
.fi-tags { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.fi-tag { font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:5px 12px; border-radius:100px; }
.fi-tag.venta { background:var(--red); color:#fff; }
.fi-tag.alq { background:var(--ink); color:#fff; }
.fi-tag.cod { background:transparent; border:1px solid var(--line); color:var(--slate); }
.fi-loc-pin { display:inline-flex; align-items:center; gap:6px; color:var(--slate); font-size:14px; margin-top:4px; }
.fi-price-alt { font-size:13px; color:var(--red); font-weight:600; margin-top:4px; display:inline-block; }
.fi-video { aspect-ratio:16/9; border-radius:14px; overflow:hidden; border:1px solid var(--line); background:var(--ink); }
.fi-video iframe { width:100%; height:100%; border:0; }
/* Video vertical en su columna + toda la info en la otra, alineada hacia abajo */
/* [A29] El video de cada ficha viene de YouTube en 16:9 horizontal (chequeado
   contra los IDs reales via oEmbed) — antes esta caja forzaba 9:16 vertical
   dentro de una columna angosta (240–320px), así que el video quedaba con
   barras negras arriba/abajo y se veía chico. Ahora respeta su proporción
   real: apilado, ancho, con la info debajo. */
.fi-vd { display:flex; flex-direction:column; gap:clamp(24px,3vw,32px); }
.fi-vd .fi-video { width:100%; max-width:820px; margin:6px 0 0; }
.fi-vd .fi-vd-info { min-width:0; }
.fi-vd-block { margin-top:30px; padding-top:24px; border-top:1px solid var(--line); }
.fi-vd.no-video { display:block; }
.fi-vd.no-video .fi-video { display:none; }
@media (max-width:760px){ .fi-vd .fi-video{ width:100%; max-width:100%; margin:0 auto 24px; } .fi-logo{ display:none; } .fi-head-top{ margin:0; } }
.fi-otras { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.fi-otras .it { background:var(--bone); padding:14px 16px; }
.fi-otras .k { font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--slate-soft); }
.fi-otras .v { font-weight:600; margin-top:2px; }
.fi-gastos { list-style:none; padding:0; max-width:520px; }
.fi-gastos li { display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--line); }
.fi-gastos li span:last-child { color:var(--slate); }
.rel-marquee .marquee-track .lcard { width:min(340px,80vw); flex:none; }

/* ARTICULOS */
.art-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:28px; padding:clamp(36px,5vh,56px) var(--gutter); max-width:var(--max); margin:0 auto; }
.art-card { background:var(--bone); border:1px solid var(--line); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; transition:transform .4s,box-shadow .4s; }
.art-card:hover { transform:translateY(-5px); box-shadow:0 24px 50px -22px rgba(15,21,28,.4); }
.art-card .ph { aspect-ratio:16/10; overflow:hidden; background:var(--cream); }
.art-card .ph img { width:100%; height:100%; object-fit:cover; transition:transform .8s; }
.art-card:hover .ph img { transform:scale(1.05); }
.art-card .body { padding:20px 22px 24px; display:flex; flex-direction:column; gap:10px; flex:1; }
.art-card .tag { font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--red); }
.art-card h3 { font-family:var(--serif); font-weight:400; font-size:1.3rem; line-height:1.2; }
.art-card p { color:var(--slate); font-size:.92rem; font-weight:300; line-height:1.55; }
.art-card .go { margin-top:auto; font-size:13px; font-weight:600; color:var(--red); }
.art-mid-cta { background:var(--cream); border-radius:16px; margin:clamp(20px,3vh,30px) var(--gutter); padding:clamp(30px,5vh,52px); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; max-width:var(--max); }
.art-mid-cta h3 { font-family:var(--serif); font-weight:400; font-size:1.5rem; max-width:520px; }
.art-body { max-width:760px; margin:0 auto; padding:clamp(40px,6vh,70px) var(--gutter); }
.art-body p, .art-body li { color:var(--ink-soft); line-height:1.7; font-weight:400; font-size:1.05rem; max-width:65ch; }
.art-body h2 { font-family:var(--serif); font-weight:400; font-size:1.7rem; margin:34px 0 12px; }
.art-body ul { margin:14px 0 14px 20px; }
.art-inline-cta { border-left:3px solid var(--red); background:var(--cream); padding:20px 24px; border-radius:0 12px 12px 0; margin:30px 0; }
.art-inline-cta .hero-actions{margin:14px 0 0;}

/* MOBILE NAV */
.nav-toggle { display:none; background:none; border:1px solid var(--line); border-radius:10px; width:44px; height:40px; cursor:pointer; align-items:center; justify-content:center; }
.nav-toggle span { position:relative; width:20px; height:2px; background:var(--ink); display:block; transition:.3s; }
.nav-toggle span::before,.nav-toggle span::after { content:""; position:absolute; left:0; width:20px; height:2px; background:var(--ink); transition:.3s; }
.nav-toggle span::before { top:-6px; } .nav-toggle span::after { top:6px; }
nav.top.open .nav-toggle span { background:transparent; }
nav.top.open .nav-toggle span::before { transform:rotate(45deg); top:0; }
nav.top.open .nav-toggle span::after { transform:rotate(-45deg); top:0; }
@media (max-width: 1024px) {
  nav.top { flex-wrap: wrap; row-gap: 0; }
  nav.top .logo { height: 52px; }
  .nav-toggle { display:flex; order:3; margin-left:12px; }
  nav.top .cta { order:2; }
  nav.top ul { order:4; display:none; flex-direction:column; align-items:stretch; gap:0; width:100%; max-width:none; margin-top:12px; }
  nav.top.open ul { display:flex; }
  nav.top ul li { width:100%; border-top:1px solid var(--line); }
  /* En móvil, el menú ordena por intención de lead: Comprar, Vender, Alquilar…
     y Pizarra/Administración al FINAL (la auditoría los midió 3° y 4°, por
     encima de Alquilar y Contacto). El idioma cierra la lista. */
  nav.top ul > li { order: 5; }
  nav.top ul > li:nth-child(1) { order: 1; }
  nav.top ul > li:nth-child(2) { order: 2; }
  nav.top ul > li.nav-admin { order: 6; }
  nav.top ul > li.lang-switch { order: 7; }
  nav.top ul li.has-sub > a::after { content:""; }
  nav.top ul a { display:block; padding:14px 2px; font-size:16px; }
  nav.top .submenu { position:static; transform:none; opacity:1; visibility:visible; box-shadow:none; border:none; background:transparent; padding:0 0 8px 16px; min-width:0; }
  nav.top .submenu a { padding:9px 2px; font-size:14px; color:var(--slate); }
}
@media (max-width: 520px){
  nav.top .cta span, nav.top .cta { font-size:12px; }
  .nav-toggle { width:42px; height:38px; }
}

.fi-final-cta { text-align:center; }
.fi-cta-final { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.fi-cta-final .btn { min-width:240px; justify-content:center; }

/* OP TAG */
.op-tag{ position:absolute; top:12px; left:12px; z-index:2; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:5px 12px; border-radius:100px; color:#fff; }
.op-tag.venta{ background:var(--red); }
.op-tag.alq{ background:var(--ink); }
.prop-img{ position:relative; }
/* FICHA GRID AREAS */
.ficha-top{ grid-template-areas:"gallery head" "gallery comm"; }
.gallery{ grid-area:gallery; }
.fi-head{ grid-area:head; }
.fi-comm{ grid-area:comm; }
.fi-head .fi-title{ margin-top:6px; }
@media (max-width:900px){
  .ficha-top{ grid-template-columns:1fr; grid-template-areas:"head" "gallery" "comm"; }
}
/* MOBILE: submenu acordeón sin animación */
@media (max-width:1024px){
  nav.top .submenu{ display:none; }
  nav.top li.has-sub.open .submenu{ display:flex; }
  nav.top li.has-sub:hover .submenu{ display:none; }
  nav.top li.has-sub.open .submenu{ display:flex; }
}

/* PROYECTOS */
.proj-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:20px; padding:clamp(36px,5vh,56px) var(--gutter); max-width:var(--max); margin:0 auto; }
.proj-card{ position:relative; display:flex; flex-direction:column; justify-content:space-between; min-height:200px; background:var(--ink); color:var(--paper); border-radius:14px; padding:24px 24px 20px; overflow:hidden; transition:transform .4s, box-shadow .4s; border-top:3px solid var(--red); }
.proj-card:hover{ transform:translateY(-5px); box-shadow:0 24px 50px -22px rgba(15,21,28,.5); }
.proj-card .units{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--red); }
.proj-card h3{ font-family:var(--serif); font-weight:400; font-size:1.5rem; line-height:1.1; margin:10px 0 0; }
.proj-card .go{ margin-top:18px; font-size:13px; font-weight:600; color:var(--paper); opacity:.85; }
.proj-card.soft{ background:var(--cream); color:var(--ink); border-top-color:var(--slate-soft); }
.proj-card.soft .units{ color:var(--slate-soft); } .proj-card.soft .go{ color:var(--red); opacity:1; }
/* tarjeta de proyecto con foto del edificio */
.proj-card .proj-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.proj-card.has-photo{ background:var(--ink); color:#fff; }
.proj-card.has-photo::after{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(15,21,28,.15) 0%, rgba(15,21,28,.45) 55%, rgba(15,21,28,.9) 100%); }
.proj-card.has-photo > *:not(.proj-bg){ position:relative; z-index:2; }
.proj-card.has-photo .units{ color:#fff; }
.proj-card.has-photo .go{ color:#fff; opacity:.95; }
.proj-card.has-photo h3{ text-shadow:0 1px 14px rgba(15,21,28,.78); }

/* ART LAYOUT (artículos con barra lateral a la derecha) */
.art-fly{ padding:clamp(28px,4vh,48px) 0; overflow:hidden; }
.art-bands{ display:grid; grid-template-columns:1fr; gap:28px; max-width:var(--max); margin:0 auto; padding:0 var(--gutter) clamp(36px,5vh,56px); align-items:start; }
.art-bands .side-sell{ max-width:760px; width:100%; margin:0 auto; text-align:center; }
.art-bands .side-sell .btn{ width:auto; min-width:260px; }
.art-bands .side-feat .vmarquee{ max-height:520px; }
@media (max-width:880px){ .art-bands{ grid-template-columns:1fr; } }
.art-layout{ display:grid; grid-template-columns:1fr 330px; gap:40px; max-width:var(--max); margin:0 auto; padding:clamp(28px,4vh,48px) var(--gutter); align-items:start; }
.art-layout .art-grid-main{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; padding:0; max-width:none; margin:0; }
.art-side{ position:sticky; top:104px; display:flex; flex-direction:column; gap:22px; }
.side-sell{ background:var(--ink); color:var(--paper); border-radius:16px; padding:26px 24px; border-top:3px solid var(--red); }
.side-sell .k{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--red); }
.side-sell h3{ font-family:var(--serif); font-weight:400; font-size:1.45rem; line-height:1.12; margin:10px 0 8px; }
.side-sell p{ font-size:.9rem; color:rgba(246,243,238,.75); font-weight:300; margin-bottom:16px; }
.side-sell .btn{ width:100%; justify-content:center; }
.side-feat .lbl{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--slate-soft); margin-bottom:12px; display:block; }
.side-rot{ transition:opacity .35s ease; }
@media (max-width:980px){
  .art-layout{ grid-template-columns:1fr; }
  .art-layout .art-grid-main{ grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); }
  .art-side{ position:static; flex-direction:column; }
}
/* Proyectos volando en el home */
.marquee-track .proj-card{ width:min(320px,80vw); flex:none; min-height:190px; }

/* VMARQUEE (propiedad volando vertical en sidebar) */
.vmarquee{ overflow:hidden; max-height:430px; position:relative; -webkit-mask-image:linear-gradient(180deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(180deg,transparent,#000 8%,#000 92%,transparent); }
.vmarquee-track{ display:flex; flex-direction:column; gap:18px; animation:fly-up 26s linear infinite; }
.vmarquee:hover .vmarquee-track{ animation-play-state:paused; }
@keyframes fly-up{ from{transform:translateY(0);} to{transform:translateY(-50%);} }

/* SOCIAL BAND */
.social-follow{ margin-top:34px; padding-top:26px; border-top:1px solid rgba(246,243,238,.15); }
.social-follow .sf-lbl{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:rgba(246,243,238,.7); margin-bottom:14px; }
.social-follow .sf-links{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.social-follow .sf-links a{ display:inline-flex; align-items:center; gap:9px; padding:11px 20px; border:1px solid rgba(246,243,238,.28); border-radius:100px; color:var(--paper); font-size:14px; font-weight:500; transition:all .3s; }
.social-follow .sf-links a:hover{ background:rgba(246,243,238,.12); border-color:var(--paper); transform:translateY(-2px); }
.social-follow .sf-links svg{ width:18px; height:18px; }

/* CRUMBS (navegabilidad: volver) */
.crumbs{ max-width:var(--max); margin:0 auto; padding:16px var(--gutter) 0; font-size:13px; color:var(--slate); display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.crumbs a{ color:var(--slate); } .crumbs a:hover{ color:var(--red); }
.crumbs .sep{ color:var(--slate-soft); } .crumbs strong{ color:var(--ink); font-weight:600; }
.crumbs .back{ margin-left:auto; color:var(--red); font-weight:600; cursor:pointer; }

/* LEAD POPUP */
.lead-ov{ position:fixed; inset:0; background:rgba(10,12,16,.6); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; z-index:1000; opacity:0; transition:opacity .3s; padding:20px; }
.lead-ov.open{ opacity:1; }
.lead-card{ background:var(--bone); border-radius:18px; max-width:440px; width:100%; padding:34px 30px; position:relative; transform:translateY(14px); transition:transform .3s; box-shadow:0 30px 80px -20px rgba(0,0,0,.5); border-top:4px solid var(--red); }
.lead-ov.open .lead-card{ transform:translateY(0); }
.lead-x{ position:absolute; top:12px; right:16px; background:none; border:none; font-size:28px; line-height:1; color:var(--slate); cursor:pointer; }
.lead-card .lead-k{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--red); }
.lead-card h3{ font-family:var(--serif); font-weight:400; font-size:1.7rem; line-height:1.12; margin:8px 0; }
.lead-card h3 em{ font-style:italic; color:var(--red); }
.lead-card p{ color:var(--slate); font-size:.95rem; line-height:1.55; font-weight:300; margin-bottom:16px; }
.lead-card #lead-input{ width:100%; border:1px solid var(--line); border-radius:10px; padding:13px 14px; font-family:var(--sans); font-size:.95rem; margin-bottom:12px; }
.lead-card #lead-input:focus{ outline:none; border-color:var(--red); }
.lead-card .lead-send{ width:100%; justify-content:center; }
.lead-card .lead-skip{ display:block; text-align:center; margin-top:12px; font-size:13px; color:var(--slate); cursor:pointer; }
.lead-card .lead-skip:hover{ color:var(--red); }

/* HOME ARTICULOS MARQUEE */
.marquee-track .art-card{ width:min(330px,82vw); flex:none; }

/* PROYECTO DETALLE */
.u-table{ width:100%; border-collapse:collapse; font-size:.95rem; }
.u-table td{ padding:13px 10px; border-bottom:1px solid var(--line); color:var(--slate); }
.u-table td:first-child{ color:var(--ink); }
.u-cta{ display:inline-block; background:var(--red); color:#fff; font-size:12px; font-weight:600; padding:7px 14px; border-radius:100px; }
.u-cta:hover{ background:var(--red-deep); }
.side-info{ background:var(--cream); border-radius:16px; padding:24px 22px; }
.side-info h3{ font-family:var(--serif); font-weight:400; font-size:1.3rem; margin-bottom:6px; }
.side-info p{ font-size:.9rem; color:var(--slate); font-weight:300; margin-bottom:14px; }
.side-info input, .side-info textarea{ width:100%; border:1px solid var(--line); border-radius:10px; padding:11px 13px; font-family:var(--sans); font-size:.92rem; margin-bottom:10px; background:var(--bone); }
.side-info .btn{ width:100%; justify-content:center; }

/* BIO SANTIAGO — foto con texto envolvente */
.sp-bio{ margin-top:26px; }
.sp-bio::after{ content:""; display:block; clear:both; }
/* Bio de Nosotros: mismo tratamiento que "Sobre Santiago" del home
   (recorte 4:5, byn suave y etiqueta roja). La foto flotante anterior quedaba
   estirada porque el height del HTML (1346px) pisaba al CSS. */
.sp-bio{ display:grid; grid-template-columns:minmax(280px,340px) 1fr; gap:clamp(28px,4vw,56px); align-items:start; }
.sp-bio-figure{ margin:0; aspect-ratio:4/5; overflow:hidden; position:relative; filter:grayscale(15%); }
.sp-bio-figure img{ width:100%; height:100%; object-fit:cover; object-position:50% 18%; display:block; }
.sp-bio-figure::after{ content:"SANTIAGO PEREYRA"; position:absolute; bottom:0; left:0;
  background:var(--red); color:var(--paper); font-family:var(--mono); font-size:11px;
  letter-spacing:.22em; padding:12px 18px; }
@media (max-width:640px){
  .sp-bio{ grid-template-columns:1fr; }
  .sp-bio-figure{ max-width:340px; margin:0 auto 6px; width:100%; }
}

/* ===== CHAT IA (botón flotante + panel) ===== */
.ai-chat-btn{ position:fixed; bottom:24px; right:24px; overflow:hidden; padding:0; z-index:99; width:60px; height:60px; border-radius:50%; background:var(--ink); color:var(--paper); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 28px -6px rgba(15,21,28,.55); transition:transform .25s, box-shadow .25s, opacity .2s; }
.ai-chat-btn:hover{ transform:scale(1.08); box-shadow:0 14px 34px -6px rgba(15,21,28,.6); }
.ai-chat-btn img{ width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; }
.ai-chat-btn .ai-dot{ z-index:2; }
.ai-chat-head img{ width:38px; height:38px; border-radius:50%; object-fit:cover; }
.ai-chat-btn.hidden{ opacity:0; pointer-events:none; transform:scale(.6); }
.ai-chat-btn .ai-dot{ position:absolute; top:7px; right:8px; width:10px; height:10px; background:var(--red); border-radius:50%; border:2px solid var(--ink); }
.ai-chat-panel{ position:fixed; bottom:24px; right:24px; z-index:100; width:min(360px, calc(100vw - 32px)); background:var(--bone); border:1px solid var(--line); border-radius:18px; box-shadow:0 30px 70px -20px rgba(15,21,28,.5); overflow:hidden; transform:translateY(14px) scale(.98); opacity:0; pointer-events:none; transition:transform .25s, opacity .25s; }
.ai-chat-panel.open{ transform:none; opacity:1; pointer-events:auto; }
.ai-chat-head{ background:var(--ink); color:var(--paper); padding:15px 18px; display:flex; align-items:center; gap:12px; }
.ai-chat-head .ttl{ font-family:var(--serif); font-weight:400; font-size:1.12rem; line-height:1; }
.ai-chat-head .sub{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; opacity:.7; margin-top:4px; }
.ai-chat-x{ margin-left:auto; background:none; border:none; color:var(--paper); font-size:24px; line-height:1; cursor:pointer; opacity:.8; }
.ai-chat-x:hover{ opacity:1; }
.ai-chat-body{ padding:16px 16px 18px; }
.ai-feed{ display:flex; flex-direction:column; gap:10px; max-height:300px; overflow-y:auto; }
.ai-msg{ border-radius:14px; padding:11px 14px; font-size:.92rem; line-height:1.5; max-width:88%; }
.ai-msg.bot{ background:var(--cream); color:var(--ink); align-self:flex-start; border-bottom-left-radius:4px; }
.ai-msg.user{ background:var(--red); color:#fff; align-self:flex-end; border-bottom-right-radius:4px; }
.ai-chat-input{ display:flex; gap:8px; margin-top:14px; }
.ai-chat-input input{ flex:1; border:1px solid var(--line); border-radius:100px; padding:11px 16px; font-family:var(--sans); font-size:.9rem; background:var(--paper); color:var(--ink); }
.ai-chat-send{ background:var(--red); color:#fff; border:none; border-radius:50%; width:42px; height:42px; flex:none; font-size:18px; cursor:pointer; transition:background .2s; }
.ai-chat-send:hover{ background:var(--red-deep); }
.ai-chat-note{ font-size:11px; color:var(--slate-soft); text-align:center; margin-top:12px; }
@media (max-width:600px){ .ai-chat-btn,.ai-chat-panel{ bottom:88px; right:16px; } }

/* Home: sección "Propiedades destacadas" en cremita (antes negra) */
#destacadas{ background:var(--paper); color:var(--ink); padding-top:clamp(80px,12vh,150px); }
#destacadas .section-head{ margin-bottom:clamp(28px,4vh,48px); }
/* botón "ghost" (Ver cartera de casas) visible sobre cremita */
#destacadas .btn-ghost{ background:rgba(15,21,28,0.04); color:var(--ink); border-color:rgba(15,21,28,0.28); }
#destacadas .btn-ghost:hover{ background:rgba(15,21,28,0.08); border-color:var(--ink); }
#destacadas .featured-tabs .tab{ color:var(--ink); }
#destacadas .featured-tabs .tab.active{ color:#fff; }
#destacadas .featured-actions p{ color:rgba(15,21,28,.7); }
/* las prop-card estaban pensadas para fondo negro: oscurecer textos sobre cremita */
#destacadas .prop-specs{ color:rgba(15,21,28,.65); border-bottom-color:rgba(15,21,28,.12); }
#destacadas .prop-specs strong{ color:var(--ink); }
#destacadas .prop-price small{ color:rgba(15,21,28,.5); }
#destacadas .prop-cta{ color:var(--ink); }

/* Home: tarjetas de proyecto con la misma estética que las propiedades */
.proj-card-v2 .prop-title{ min-height:auto; margin-bottom:0; }
.proj-card-v2 .prop-footer{ margin-top:auto; padding-top:16px; }
.proj-card-v2 .prop-cta{ color:var(--ink); }
.prop-loc{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--slate-soft); display:flex; align-items:center; gap:6px; }

/* Video real en la foto de la tarjeta (mismo encuadre que la imagen) */
.prop-img .prop-video{ width:100%; height:100%; object-fit:cover; display:block; background:var(--ink-soft); }

/* Movimiento sutil tipo "mini video" en las fotos de las tarjetas del home */
@keyframes kenburns{ from{ transform:scale(1.02); } to{ transform:scale(1.13); } }
@media (prefers-reduced-motion: no-preference){
  #destacadas .prop-img img,
  .proj-card-v2 .prop-img img{
    animation:kenburns 16s ease-in-out infinite alternate;
    will-change:transform;
  }
  #destacadas .prop-card:nth-child(3n) .prop-img img,
  .proj-card-v2:nth-child(3n) .prop-img img{ animation-duration:19s; transform-origin:top right; }
  #destacadas .prop-card:nth-child(3n+1) .prop-img img,
  .proj-card-v2:nth-child(3n+1) .prop-img img{ animation-duration:21s; transform-origin:bottom left; }
  #destacadas .prop-card:nth-child(3n+2) .prop-img img,
  .proj-card-v2:nth-child(3n+2) .prop-img img{ animation-duration:17s; transform-origin:center; }
  /* al pasar el mouse el marquee se frena: dejamos la imagen quieta para que se aprecie */
  .marquee:hover .prop-img img{ animation-play-state:paused; }
}

/* ===== PÁGINAS POR ZONA (zona-*.html) ===== */
.page-hero .zona-capsula{
  max-width: 680px; margin-top: 22px; padding: 18px 22px;
  border-left: 3px solid var(--red);
  background: rgba(246,243,238,0.05);
  font-size: clamp(1rem, 1.25vw, 1.12rem); line-height: 1.7;
  color: rgba(246,243,238,0.86); font-weight: 300;
}
.zona-intro{ background: var(--paper); color: var(--ink); padding: clamp(46px,7vh,80px) 6vw; }
.zona-intro-wrap{ max-width: 760px; margin: 0 auto; }
.zona-intro h2{
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.5rem,3vw,2.2rem); line-height: 1.12; margin: 0 0 22px;
}
.zona-intro p{
  font-size: clamp(1rem,1.15vw,1.08rem); line-height: 1.8;
  color: var(--slate); font-weight: 300; margin: 0 0 18px;
}
.zona-sec{ padding: clamp(36px,5vh,56px) var(--gutter) 0; max-width: var(--max); margin: 0 auto; }
.zona-sec-head{
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; padding: 0 var(--gutter); flex-wrap: wrap;
}
.zona-sec-head h2{
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.35rem,2.6vw,1.9rem); margin: 0;
}
.zona-sec-head .count{
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--slate);
}
.zona-sec .listing-grid{ padding-top: clamp(20px,3vh,32px); }
.zona-faq{ background: var(--cream, var(--paper)); color: var(--ink); padding: clamp(46px,7vh,80px) 6vw; }
.zona-faq-wrap{ max-width: 760px; margin: 0 auto; }
.zona-faq h2{
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.5rem,3vw,2.2rem); margin: 0 0 26px;
}
.zfaq{
  border-top: 1px solid var(--line); padding: 18px 0;
}
.zfaq:last-child{ border-bottom: 1px solid var(--line); }
.zfaq summary{
  cursor: pointer; list-style: none; font-family: var(--sans);
  font-weight: 500; font-size: clamp(1rem,1.3vw,1.12rem); color: var(--ink);
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.zfaq summary::-webkit-details-marker{ display: none; }
.zfaq summary::after{ content: "+"; color: var(--red); font-size: 1.4rem; line-height: 1; flex: none; }
.zfaq[open] summary::after{ content: "–"; }
.zfaq p{
  margin: 14px 0 0; color: var(--slate); font-weight: 300;
  line-height: 1.75; font-size: clamp(.98rem,1.1vw,1.05rem);
}

/* Banda "Explorá por zona" (hub emprendimientos) */
.zona-band{ background: var(--paper); color: var(--ink); text-align: center; padding: clamp(40px,6vh,68px) 0; overflow: hidden; }
.zona-band h2{ font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem,3vw,2.2rem); margin: 0 0 10px; padding: 0 6vw; }
.zona-band h2 em{ font-style: italic; color: var(--red); }
.zona-band > p{ color: var(--slate); font-weight: 300; max-width: 540px; margin: 0 auto 30px; padding: 0 6vw; line-height: 1.6; }

/* Ribbon de zonas — una sola línea, volando */
.zona-marquee{
  position: relative; overflow: hidden; padding: 8px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.zona-track{
  display: flex; gap: 14px; width: max-content;
  will-change: transform;
  animation: fly-right 58s linear infinite;
}
.zona-marquee:hover .zona-track{ animation-play-state: paused; }
.zona-track a{
  flex: none; white-space: nowrap;
  font-family: var(--sans); font-size: .95rem; font-weight: 400; letter-spacing: .01em;
  padding: 12px 22px; border: 1px solid var(--line); border-radius: 100px;
  background: var(--cream); color: var(--ink); text-decoration: none;
  transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.zona-track a:hover{
  background: var(--red); border-color: var(--red); color: #fff;
  transform: translateY(-2px); box-shadow: 0 10px 24px rgba(211,36,67,.22);
}
@media (prefers-reduced-motion: reduce){
  .zona-track{ animation: none; flex-wrap: wrap; justify-content: center; width: auto; max-width: 820px; margin: 0 auto; }
  .zona-track a[aria-hidden="true"]{ display: none; }
  .zona-marquee{ -webkit-mask-image: none; mask-image: none; }
}

/* Hero con foto en páginas de zona */
.page-hero.has-photo{ background-size: cover; background-position: center 30%; background-repeat: no-repeat; }
/* Sombra de texto en todos los heros (igual que el home) para legibilidad sobre el gradiente claro */
.hero-content h1, .hero-meta, .hero-content .lead,
.page-hero.has-photo h1, .page-hero.has-photo .lead, .page-hero.has-photo .kicker, .page-hero.has-photo p { text-shadow: 0 1px 16px rgba(15,21,28,.85); }

/* Mapa de zona (zona-*.html) */
.zona-map{ background: var(--paper); color: var(--ink); padding: 0 6vw clamp(24px,4vh,44px); }
.zona-map-wrap{ max-width: 980px; margin: 0 auto; text-align: center; }
.zona-map-wrap h2{ font-family: var(--serif); font-weight: 400; font-size: clamp(1.4rem,2.8vw,2rem); margin: 0 0 18px; }
.zona-map-frame{ position: relative; width: 100%; max-width: 560px; aspect-ratio: 4/3; margin: 0 auto; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); }
.zona-map-frame iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* [A33] Zonas sin foto propia: el mapa pasa a ser la pieza visual de la
   pagina y ocupa el lugar que en las otras zonas ocupa la fotografia. */
.zona-map.is-lead{ padding-top: clamp(12px,2vh,26px); }
.zona-map.is-lead .zona-map-frame{ max-width: 860px; aspect-ratio: 16/10; }
@media (max-width: 640px){ .zona-map.is-lead .zona-map-frame{ aspect-ratio: 4/3; } }

.zona-map-cap{ margin: 12px 0 0; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--slate); }
.zona-hero-credit{ position: absolute; right: 14px; bottom: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.55); text-decoration: none; }
.zona-hero-credit:hover{ color: rgba(255,255,255,.85); }

/* Secciones "volando" (marquee) en páginas de zona */
.zona-marq{ padding-left: 0; padding-right: 0; }
.zona-marq .zona-sec-head{ padding: 0 6vw; }
.zona-marq .marquee{ margin-top: clamp(18px,3vh,30px); padding: 6px 0; }

/* Imagen de mapa de zona (Higgsfield) dentro del frame */
.zona-map-frame img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Mapa vectorial de zona (SVG inline) */
.zona-map-box{ border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--paper); }
.zona-map-box .zona-map-svg{ display: block; width: 100%; height: auto; }

/* ===== Carruseles interactivos (volando + arrastrable + flechas) ===== */
.cshell{ position: relative; }
.carousel{
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; -ms-overflow-style: none;
  cursor: grab;
}
.carousel::-webkit-scrollbar{ display: none; height: 0; width: 0; }
.carousel.grabbing{ cursor: grabbing; }
.carousel.grabbing a{ pointer-events: none; }
.carousel .marquee-track,
.carousel .zona-track{ animation: none !important; }
/* En modo carrusel la cinta de zonas va siempre en una sola fila */
.zona-marquee.carousel .zona-track{ flex-wrap: nowrap !important; width: max-content !important; }

.cnav{
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 6; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--line); background: rgba(255,255,255,.92);
  color: var(--ink); cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 6px 20px rgba(15,21,28,.16);
  opacity: .9; transition: background .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease, transform .15s ease;
}
.cnav svg{ width: 22px; height: 22px; }
.cnav.cprev{ left: 12px; }
.cnav.cnext{ right: 12px; }
.cnav:hover{ background: var(--red); border-color: var(--red); color: #fff; }
.cnav:active{ transform: translateY(-50%) scale(.94); }
.cshell:hover .cnav{ opacity: 1; }
@media (hover: none){ .cnav{ opacity: .96; } }
@media (max-width: 640px){
  .cnav{ width: 38px; height: 38px; }
  .cnav svg{ width: 18px; height: 18px; }
  .cnav.cprev{ left: 6px; }
  .cnav.cnext{ right: 6px; }
}

/* ── Contraste AA en texto chico rojo sobre fondo claro (>=4.5:1) ──
   El rojo de marca #d32443 se mantiene en botones, títulos grandes y fondos.
   Solo se oscurece el rojo de etiquetas/links chicos sobre claro. */
:root{ --red-ink:#b81d3a; }
.team-card .role,
.ficha-zona,
.lcard .zona { color: var(--red-ink); }

/* ── Barra de contacto fija en mobile (fichas) ── */
.fi-sticky{ display:none; }
@media (max-width:768px){
  .fi-sticky{
    display:flex; gap:10px; position:fixed; left:0; right:0; bottom:0; z-index:60;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));
    background:rgba(246,243,238,.96); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    border-top:1px solid var(--line); box-shadow:0 -6px 20px rgba(15,21,28,.10);
  }
  .fi-sticky a{ flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
    padding:13px 10px; border-radius:100px; font-family:var(--sans); font-weight:600; font-size:.92rem;
    letter-spacing:.01em; text-decoration:none; }
  .fi-sticky-wa{ background:#25D366; color:#fff; }
  .fi-sticky-wa svg{ width:18px; height:18px; fill:#fff; }
  .fi-sticky-visita{ background:var(--ink); color:var(--paper); }
  body.has-fi-sticky{ padding-bottom:74px; }
  body.has-fi-sticky #spc-launch{ bottom:86px !important; }
}

/* ── Favoritos ── */
.fav-btn{ position:absolute; top:10px; right:10px; z-index:4; width:36px; height:36px; border-radius:50%;
  border:none; background:rgba(255,255,255,.9); cursor:pointer; display:flex; align-items:center; justify-content:center;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); box-shadow:0 4px 12px rgba(15,21,28,.18);
  transition:transform .15s ease, background .2s ease; padding:0; }
.fav-btn:hover{ transform:scale(1.08); }
.fav-btn svg{ width:19px; height:19px; fill:none; stroke:var(--ink); stroke-width:1.8; }
.fav-btn.on svg{ fill:var(--red); stroke:var(--red); }
.fav-nav{ display:inline-flex; align-items:center; gap:5px; }
.fav-nav svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; }
.fav-count{ display:inline-flex; align-items:center; justify-content:center; font-family:var(--mono);
  font-size:11px; min-width:16px; height:16px; padding:0 4px; border-radius:10px; background:var(--red); color:#fff; }
.fav-save{ display:inline-flex; align-items:center; gap:8px; }
.fav-save svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; }
.fav-save.on svg{ fill:var(--red); stroke:var(--red); }
.fav-empty{ text-align:center; padding:clamp(40px,8vh,90px) 6vw; color:var(--slate); }
.fav-empty a:not(.btn){ color:var(--red); }
.fav-empty .btn-primary{ color:var(--paper); }

/* ============================================
   NAV 2 LÍNEAS (5+5) + idioma sobre WhatsApp (desktop)
============================================ */
@media (min-width:1025px){
  nav.top{ gap:28px; }
  nav.top > ul{
    flex:1 1 auto;
    display:flex;
    flex-wrap:wrap;
    justify-content:space-evenly;
    align-items:center;
    column-gap:10px;
    row-gap:8px;
  }
  nav.top > ul li{ display:flex; align-items:center; justify-content:center; text-align:center; }
  nav.top > ul li.has-sub .submenu{ left:50%; transform:translateX(-50%); }
  nav.top .nav-right{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:10px;
  }
  nav.top .nav-lang{ list-style:none; display:flex; margin:0; padding:0; }
  nav.top .nav-lang .submenu{ left:auto; right:0; transform:none; }
  nav.top .nav-lang li.has-sub:hover .submenu{ display:flex; }
}
@media (max-width:1024px){
  nav.top .nav-right{ display:contents; }
}


/* ============================================
   HOME: NAV TRANSPARENTE SOBRE EL HERO
   (solo index.html — body.home)
============================================ */
body.home .topstrip { display: none; }
body.home nav.top {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 1px solid transparent;
  transition: background .45s ease, border-color .45s ease, padding .3s ease;
}
body.home nav.top ul a { color: var(--paper); }
body.home nav.top ul a.active,
body.home nav.top ul a:hover { color: #ff92a6; }
body.home .nav-toggle { border-color: rgba(246,243,238,.35); }
body.home .nav-toggle span,
body.home .nav-toggle span::before,
body.home .nav-toggle span::after { background: var(--paper); }
body.home nav.top.open .nav-toggle span { background: transparent; }
/* submenús en vidrio oscuro */
@media (min-width: 1025px) {
  body.home nav.top .submenu {
    background: rgba(15,21,28,.94);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    border: 1px solid rgba(246,243,238,.14);
  }
  body.home nav.top .submenu a { color: var(--paper); }
  body.home nav.top .submenu a:hover { background: rgba(246,243,238,.1); color: #ff92a6; }
  body.home nav.top .submenu .sub-head { color: rgba(246,243,238,.55); }
}
/* al scrollear: vidrio oscuro, nada de crema */
body.home nav.top.nav-frost {
  background: rgba(15,21,28, 0.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.25);
  backdrop-filter: blur(20px) saturate(1.25);
  border-bottom-color: rgba(246,243,238,.12);
}
/* Menú transparente (home + páginas nav-dark): misma sombra que las letras del
   hero del home, para que se lea sobre la foto. Al scrollear (vidrio oscuro)
   la sombra se quita porque el fondo ya da contraste. */
body.home nav.top ul a,
body.nav-dark nav.top ul a {
  text-shadow: 0 1px 16px rgba(15,21,28, 0.85);
  transition: color .2s, text-shadow .45s ease;
}
body.home nav.top.nav-frost ul a,
body.nav-dark nav.top.nav-frost ul a { text-shadow: none; }
/* menú móvil abierto: fondo sólido para legibilidad */
body.home nav.top.open { background: var(--ink); }
@media (max-width: 1024px) {
  body.home nav.top ul li { border-top-color: rgba(246,243,238,.16); }
  body.home nav.top .submenu { background: transparent; border: none; }
  body.home nav.top .submenu a { color: rgba(246,243,238,.75); }
}
/* el hero pasa a vivir debajo del nav fijo */
body.home .hero { padding-top: clamp(170px, 22vh, 230px); }


/* ============================================
   AVISO DE FAVORITOS (listados)
============================================ */
.fav-toast {
  position: fixed;
  left: 16px;
  bottom: 18px;
  z-index: 95;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 430px;
  padding: 16px 18px;
  background: rgba(255,255,255,.96);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(15,21,28,.18);
  font-size: .92rem;
  line-height: 1.5;
  color: var(--ink);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s ease, transform .5s ease;
}
.fav-toast.on { opacity: 1; transform: none; }
.fav-toast .ft-heart { flex: 0 0 auto; margin-top: 2px; }
.fav-toast .ft-heart svg { width: 20px; height: 20px; fill: var(--red); }
.fav-toast .ft-txt em { font-style: italic; color: var(--red); font-weight: 500; }
.fav-toast .ft-cta {
  display: inline-block;
  margin-top: 4px;
  font-weight: 600;
  color: var(--red);
  border-bottom: 1px solid currentColor;
}
.fav-toast .ft-close {
  flex: 0 0 auto;
  background: none;
  border: none;
  font-size: 20px;
  line-height: 1;
  color: var(--slate-soft);
  cursor: pointer;
  padding: 0 2px;
}
.fav-toast .ft-close:hover { color: var(--ink); }
@media (max-width: 600px) {
  .fav-toast { left: 12px; right: 84px; bottom: 14px; max-width: none; font-size: .88rem; }
}

/* ============================================
   CONTRASTE AA — rojo legible sobre fondos oscuros
   (texto chico rojo sobre ink: 3.48:1 → var(--red-on-dark) 6.9:1)
============================================ */
footer .footer-col h4,
.side-sell .k,
.proj-card .units,
.featured .kicker,
.featured .prop-price { color: var(--red-on-dark); }
/* variantes claras de .featured: mantienen el rojo de marca */
#destacadas .kicker,
#destacadas .prop-price,
.featured[style*="--paper"] .kicker,
.featured[style*="--paper"] .prop-price,
.featured[style*="--cream"] .kicker,
.featured[style*="--cream"] .prop-price { color: var(--red); }
/* variantes con foto o fondo claro de proj-card: sin cambio */
.proj-card.soft .units { color: var(--slate-soft); }
.proj-card.has-photo .units { color: #fff; }


/* ============================================
   MICROINTERACCIONES 2026 (piloto home)
   Sutiles: reveals con clip-path, stagger y
   hovers finos. Respetan reduced-motion.
============================================ */

/* Reveal de imagen con clip-path (estilo editorial/arquitectura)
   — sólo con JS activo y sin reduced-motion (progressive enhancement) */
@media (prefers-reduced-motion: no-preference){
  .js .reveal-img {
    clip-path: inset(0 0 100% 0);
    transition: clip-path 1.32s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .js .reveal-img img {
    transform: scale(1.06);
    transition: transform 1.68s cubic-bezier(0.16, 1, 0.3, 1);
  }
}
.reveal-img.visible { clip-path: inset(0 0 0% 0); }
.reveal-img.visible img { transform: scale(1); }

/* Grupo con stagger: los hijos directos entran escalonados
   — sólo con JS activo y sin reduced-motion */
@media (prefers-reduced-motion: no-preference){
  .js .reveal-group > * {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 1.56s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1.56s cubic-bezier(0.16, 1, 0.3, 1);
  }
}
.reveal-group.visible > * { opacity: 1; transform: translateY(0); }
.reveal-group.visible > *:nth-child(2) { transition-delay: 0.18s; }
.reveal-group.visible > *:nth-child(3) { transition-delay: 0.36s; }
.reveal-group.visible > *:nth-child(4) { transition-delay: 0.54s; }
.reveal-group.visible > *:nth-child(5) { transition-delay: 0.72s; }
.reveal-group.visible > *:nth-child(n+6) { transition-delay: 0.9s; }

/* Flecha de botones: desplazamiento mínimo al hover */
.btn svg, .form-submit svg { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.btn:hover svg, .form-submit:hover svg { transform: translateX(3px); }

/* Cards de testimonios: elevación fina */
.t-card {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s ease, border-color 0.4s ease;
}
.t-card:hover {
  transform: translateY(-4px);
  border-color: rgba(211, 36, 67, 0.22);
  box-shadow: 0 14px 34px rgba(15,21,28, 0.08);
}


/* Títulos con entrada lateral enmascarada (alterna con .from-right)
   — estado oculto sólo con JS y sin reduced-motion */
@media (prefers-reduced-motion: no-preference){
  .js .reveal-group h2 {
    opacity: 1;
    transform: translateX(-44px);
    clip-path: inset(-8% 100% -14% 0);
    transition: clip-path 1.92s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1.92s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .js .reveal-group.from-right h2 {
    transform: translateX(44px);
    clip-path: inset(-8% 0 -14% 100%);
  }
}
.reveal-group.visible h2 {
  transform: translateX(0);
  clip-path: inset(-8% -2% -14% 0);
  transition-delay: 0.15s;
}
.reveal-group.from-right.visible h2 {
  transform: translateX(0);
  clip-path: inset(-8% 0 -14% -2%);
}

/* La palabra en itálica roja llega con su propio tiempo
   — estado oculto sólo con JS y sin reduced-motion */
@media (prefers-reduced-motion: no-preference){
  .js .reveal-group h2 em {
    display: inline-block;
    opacity: 0;
    transform: translateX(16px);
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 1.02s,
                transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 1.02s;
  }
  .js .reveal-group.from-right h2 em { transform: translateX(-16px); }

  /* La hairline del kicker se dibuja */
  .js .reveal-group .kicker::before { width: 0; transition: width 1.32s cubic-bezier(0.16, 1, 0.3, 1) 0.3s; }
}
.reveal-group.visible h2 em { opacity: 1; transform: translateX(0); }
.reveal-group.visible .kicker::before { width: 28px; }


/* Hero: entrada orquestada y pausada (secuencia de ~2.5s) */
.hero-content { animation: none; }
.hero-meta { animation: fadeUp 1.68s cubic-bezier(0.16, 1, 0.3, 1) 0.24s both; }
.hero h1 { animation: fadeUp 2.16s cubic-bezier(0.16, 1, 0.3, 1) 0.6s both; }
.hero .lead { animation: fadeUp 1.92s cubic-bezier(0.16, 1, 0.3, 1) 1.14s both; }
.hero-actions { animation: fadeUp 1.92s cubic-bezier(0.16, 1, 0.3, 1) 1.5s both; }
.search-box { animation: fadeUp 1.68s cubic-bezier(0.16, 1, 0.3, 1) 1.86s both; }
@keyframes heroEm {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: translateX(0); }
}


/* Heros internos (page-hero y fichas de edificio): misma apertura orquestada */
@keyframes drawLine { from { width: 0; } to { width: 28px; } }
.page-hero .kicker { animation: fadeUp 1.68s cubic-bezier(0.16, 1, 0.3, 1) 0.24s both; }
.page-hero .kicker::before { animation: drawLine 1.32s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both; }
.page-hero h1 { animation: fadeUp 2.16s cubic-bezier(0.16, 1, 0.3, 1) 0.6s both; }
.page-hero .lead, .page-hero p { animation: fadeUp 1.92s cubic-bezier(0.16, 1, 0.3, 1) 1.14s both; }

.eb-hero .eb-crumb { animation: fadeUp 1.68s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both; }
.eb-hero .eb-loc { animation: fadeUp 1.68s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both; }
.eb-hero h1 { animation: fadeUp 2.16s cubic-bezier(0.16, 1, 0.3, 1) 0.6s both; }
.eb-hero .eb-lead { animation: fadeUp 1.92s cubic-bezier(0.16, 1, 0.3, 1) 1.1s both; }
.eb-hero .eb-actions { animation: fadeUp 1.92s cubic-bezier(0.16, 1, 0.3, 1) 1.4s both; }

/* Accesibilidad: sin animaciones si el usuario las redujo */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-img, .reveal-img img, .reveal-group > *,
  .reveal-group h2, .reveal-group h2 em {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  .reveal-group .kicker::before { width: 28px !important; transition: none !important; }
  .t-card, .t-card:hover { transform: none; }
  .page-hero .kicker, .page-hero .kicker::before, .page-hero h1, .page-hero .lead, .page-hero p,
  .eb-hero .eb-crumb, .eb-hero .eb-loc, .eb-hero h1, .eb-hero .eb-lead, .eb-hero .eb-actions,
  .hero-content, .hero-meta, .hero h1, .hero h1 em,
  .hero .lead, .hero-actions, .search-box {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Fallback: navegadores sin clip-path muestran todo sin recorte */
@supports not (clip-path: inset(0 0 0 0)) {
  .reveal-img, .reveal-group h2 { clip-path: none !important; transform: none !important; opacity: 1 !important; }
}

/* Launcher del chat IA: vidrio esmerilado como el buscador del hero,
   en lugar del verde WhatsApp sólido (pisa los estilos inline del snippet) */
#spc-launch{
  background: rgba(15,21,28, 0.32) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  box-shadow: 0 8px 28px rgba(15,21,28, 0.22) !important;
}
#spc-launch:hover{
  background: rgba(15,21,28, 0.5) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
}

/* ============================================
   NAV ESTILO HOME EN PÁGINAS INTERNAS (body.nav-dark)
   Mismo tratamiento que body.home: fijo, transparente,
   links claros y vidrio oscuro al scrollear.
============================================ */
body.nav-dark .topstrip { display: none; }
body.nav-dark nav.top {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 1px solid transparent;
  transition: background .45s ease, border-color .45s ease, padding .3s ease;
}
body.nav-dark nav.top ul a { color: var(--paper); }
body.nav-dark nav.top ul a.active,
body.nav-dark nav.top ul a:hover { color: #ff92a6; }
body.nav-dark .nav-toggle { border-color: rgba(246,243,238,.35); }
body.nav-dark .nav-toggle span,
body.nav-dark .nav-toggle span::before,
body.nav-dark .nav-toggle span::after { background: var(--paper); }
body.nav-dark nav.top.open .nav-toggle span { background: transparent; }
@media (min-width: 1025px) {
  body.nav-dark nav.top .submenu {
    background: rgba(246,243,238,.96);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    border: 1px solid rgba(15,21,28,.08);
    box-shadow: 0 18px 40px -18px rgba(15,21,28,.35);
  }
  body.nav-dark nav.top .submenu a { color: var(--ink); }
  body.nav-dark nav.top .submenu a:hover { background: rgba(15,21,28,.05); color: var(--red); }
  body.nav-dark nav.top .submenu .sub-head { color: var(--slate-soft); }
}
/* nav.js le agrega .nav-frost al pasar 40px de scroll (misma lógica que el
   home, pero ahora en blanco: ver la nota igual en body.nav-solid más abajo). */
body.nav-dark nav.top.nav-frost {
  background: rgba(246,243,238, 0.88);
  -webkit-backdrop-filter: blur(20px) saturate(1.25);
  backdrop-filter: blur(20px) saturate(1.25);
  border-bottom-color: rgba(15,21,28,.10);
}
body.nav-dark nav.top.nav-frost ul a { color: var(--ink); }
body.nav-dark nav.top.nav-frost ul a.active,
body.nav-dark nav.top.nav-frost ul a:hover { color: var(--red); }
body.nav-dark nav.top.nav-frost .nav-toggle { border-color: rgba(15,21,28,.25); }
body.nav-dark nav.top.nav-frost .nav-toggle span,
body.nav-dark nav.top.nav-frost .nav-toggle span::before,
body.nav-dark nav.top.nav-frost .nav-toggle span::after { background: var(--ink); }
/* Drawer móvil (hamburguesa abierta): antes fondo ink sólido + texto crema.
   Ahora blanco + tinta, igual que el resto del vidrio nuevo. */
body.nav-dark nav.top.open { background: var(--paper); }
body.nav-dark nav.top.open ul a { color: var(--ink); }
body.nav-dark nav.top.open .nav-toggle span::before,
body.nav-dark nav.top.open .nav-toggle span::after { background: var(--ink); }
@media (max-width: 1024px) {
  body.nav-dark nav.top ul li { border-top-color: rgba(246,243,238,.16); }
  body.nav-dark nav.top .submenu { background: transparent; border: none; }
  body.nav-dark nav.top .submenu a { color: rgba(246,243,238,.75); }
  body.nav-dark nav.top.nav-frost ul li { border-top-color: rgba(15,21,28,.10); }
  body.nav-dark nav.top.nav-frost .submenu a { color: rgba(15,21,28,.75); }
  body.nav-dark nav.top.open ul li { border-top-color: rgba(15,21,28,.10); }
  body.nav-dark nav.top.open .submenu a { color: rgba(15,21,28,.75); }
}
/* El nav fijo sale del flujo: los heros oscuros compensan arriba */
body.nav-dark .page-hero { padding-top: clamp(150px, 18vh, 190px); }
body.nav-dark .eb-hero { padding-top: clamp(125px, 15vh, 165px); }

/* Fichas: vidrio BLANCO desde que abre (nada de estado transparente/gris
   inicial). Opacidad alta para que no dependa de lo que haya detrás (arriba
   de todo suele ser apenas una esquina de la primera foto). Como el fondo
   pasa de oscuro a claro, el texto y los bordes se invierten también. */
body.nav-solid nav.top {
  background: rgba(246, 243, 238, 0.88);
  -webkit-backdrop-filter: blur(20px) saturate(1.25);
  backdrop-filter: blur(20px) saturate(1.25);
  border-bottom-color: rgba(15, 21, 28, 0.10);
}
/* nav.js le agrega .nav-frost al pasar 40px de scroll (misma lógica que el
   home); esa regla pesa más que la de arriba, así que sin este empate
   quedaría más clara al scrollear. La repetimos con el mismo valor. */
body.nav-solid nav.top.nav-frost {
  background: rgba(246, 243, 238, 0.88);
}
body.nav-solid nav.top ul a { color: var(--ink); text-shadow: none; }
body.nav-solid nav.top ul a.active,
body.nav-solid nav.top ul a:hover { color: var(--red); }
body.nav-solid .nav-toggle { border-color: rgba(15,21,28,.25); }
body.nav-solid .nav-toggle span,
body.nav-solid .nav-toggle span::before,
body.nav-solid .nav-toggle span::after { background: var(--ink); }
body.nav-solid nav.top.open .nav-toggle span { background: transparent; }
body.nav-solid { padding-top: 76px; }

/* Mobile: el chat nunca debajo del dock/indicador del teléfono */
@media (max-width: 768px) {
  #spc-launch { bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important; }
  body.has-fi-sticky #spc-launch { bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* Fotos humanas: firma de autor, retrato en fichas, foto editorial */
.eb-santi{width:112px;height:112px;border-radius:50%;object-fit:cover;object-position:50% 18%;margin:0 auto 20px;display:block;border:1px solid var(--line);box-shadow:0 10px 30px rgba(15,21,28,.12)}
.autor-firma{max-width:760px;margin:0 auto;padding:34px var(--gutter) 60px;display:flex;gap:18px;align-items:center;border-top:1px solid var(--line)}
.autor-firma img{width:76px;height:76px;border-radius:50%;object-fit:cover;object-position:50% 18%;flex:none}
.autor-firma strong{font-family:var(--serif);font-weight:400;font-size:1.05rem;display:block;margin-bottom:4px}
.autor-firma span{font-size:.9rem;color:var(--slate);line-height:1.5}
.autor-firma a{color:var(--red);text-decoration:none}
.foto-editorial{margin:26px 0 0;overflow:hidden}
.foto-editorial img{width:100%;max-height:340px;object-fit:cover;display:block}
.img-cap-min{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--slate-soft);margin-top:10px}

/* Link a reseñas de Google */
.g-link{display:inline-block;margin-top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--red);text-decoration:none;border-bottom:1px solid rgba(211,36,67,.3);padding-bottom:2px}
.g-link:hover{color:var(--red-deep);border-bottom-color:var(--red-deep)}

/* Nav en una sola línea (desktop) */
@media (min-width: 1025px) {
  nav.top ul { display: flex; flex-wrap: nowrap; column-gap: clamp(13px, 1.5vw, 24px); row-gap: 0; white-space: nowrap; }
  nav.top ul a { font-size: 13.5px; }
}

/* Buscador del hero: TODO en una sola línea (zona incluida).
   El buscador se ensancha a 1280px; la columna de zona es la más ancha
   porque lleva los nombres largos del multiselect. */
@media (min-width: 901px) {
  .search-box { grid-template-columns: repeat(6, 1fr); max-width: 1280px; }
  .search-box .search-field { border-bottom: none; }
  /* el botón Buscar queda centrado abajo, como siempre (grid-column 1/-1 del estilo base) */
}

/* Listados: nav + filtros como un solo bloque de vidrio blanco.
   La filterbar se pega arriba (top:0) por debajo del nav fijo; para que el
   conjunto se lea unido, el nav en estas páginas lleva vidrio permanente. */

body.nav-dark .filterbar { top: 118px; border-top: none; }
@media (max-width: 1024px) { body.nav-dark .filterbar { top: 83px; position: sticky; background: rgba(246,243,238,.92); } }

/* Mensaje proactivo del chat (aparece a los 90s, una vez por sesión) */
.spp-nudge{position:fixed;right:94px;bottom:calc(26px + env(safe-area-inset-bottom,0px));z-index:99998;max-width:300px;background:rgba(246,243,238,.97);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(15,21,28,.1);border-radius:16px 16px 4px 16px;box-shadow:0 18px 48px rgba(15,21,28,.28);padding:14px 36px 12px 14px;display:flex;gap:11px;align-items:flex-start;cursor:pointer;opacity:0;transform:translateY(14px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.spp-nudge.on{opacity:1;transform:translateY(0)}
.spp-nudge img{width:38px;height:38px;border-radius:50%;object-fit:cover;object-position:50% 18%;flex:none;border:1px solid rgba(15,21,28,.08)}
.spp-nudge .tx{font-family:var(--sans);font-size:13.5px;line-height:1.5;color:var(--ink)}
.spp-nudge .who{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--red);display:block;margin-bottom:4px}
.spp-nudge .hora{font-family:var(--mono);font-size:11px;color:var(--slate-soft);display:block;margin-top:6px;text-align:right}
.spp-nudge .x{position:absolute;top:6px;right:8px;background:none;border:none;color:var(--slate-soft);font-size:15px;line-height:1;cursor:pointer;padding:4px}
.spp-nudge .x:hover{color:var(--ink)}
@media (max-width:768px){.spp-nudge{right:14px;left:14px;max-width:none;bottom:calc(94px + env(safe-area-inset-bottom,0px))}body.has-fi-sticky .spp-nudge{bottom:calc(158px + env(safe-area-inset-bottom,0px))}}
@media (prefers-reduced-motion:reduce){.spp-nudge{transition:none;transform:none}}

/* Barra fija de las fichas: volver + buscador, siempre visibles bajo el nav.
   Vidrio blanco (igual que el nav de arriba) — texto y bordes en tinta. */
.fi-topbar{position:fixed;left:0;right:0;top:118px;z-index:400;display:flex;gap:14px;align-items:center;padding:10px var(--gutter);background:rgba(246,243,238,.88);-webkit-backdrop-filter:blur(20px) saturate(1.25);backdrop-filter:blur(20px) saturate(1.25);border-bottom:1px solid rgba(15,21,28,.10);overflow-x:auto;scrollbar-width:none}
.fi-topbar::-webkit-scrollbar{display:none}
/* [A26] Pista de "hay más campos hacia la derecha" (auditoría de
   accesibilidad del buscador): sin scrollbar visible, en mobile solo se
   veía Zona y nada avisaba que Dormitorios/Baños/Precio/Buscar seguían de
   largo. Este degradado aparece mientras falte contenido por scrollear
   (clase .fi-mas-a-la-derecha, la pone js/ficha.js) y se apaga solo al
   llegar al final, para no tapar el botón Buscar en reposo. */
.fi-topbar::after{content:'';position:absolute;top:0;right:0;bottom:1px;width:40px;pointer-events:none;opacity:0;transition:opacity .2s ease;background:linear-gradient(to right, rgba(246,243,238,0), rgba(246,243,238,.95) 65%)}
.fi-topbar.fi-mas-a-la-derecha::after{opacity:1}
.fi-topbar .fi-back{flex:none;font-family:var(--sans);font-size:13px;font-weight:500;color:var(--ink);text-decoration:none;padding:9px 16px;border:1px solid rgba(15,21,28,.18);border-radius:100px;background:rgba(15,21,28,.04);white-space:nowrap;transition:all .2s}
.fi-topbar .fi-back:hover{border-color:rgba(15,21,28,.4)}
.fi-buscar{display:flex;gap:8px;align-items:center;margin-left:auto}
/* [A27] Targets táctiles del buscador de la ficha a 44px de alto mínimo
   (antes 33–37px — auditoría de accesibilidad, por debajo del mínimo
   recomendado para tocar cómodo con el dedo). */
.fi-buscar select{flex:none;display:inline-flex;align-items:center;min-height:44px;box-sizing:border-box;appearance:none;background:rgba(15,21,28,.04);border:1px solid rgba(15,21,28,.18);border-radius:100px;padding:9px 16px;font-family:var(--sans);font-size:13px;font-weight:500;color:var(--ink);cursor:pointer}
.fi-buscar select option{color:var(--ink);background:var(--bone)}
.fi-buscar button{flex:none;display:inline-flex;align-items:center;justify-content:center;min-height:44px;box-sizing:border-box;background:var(--red);color:var(--paper);border:none;border-radius:100px;padding:9px 22px;font-family:var(--sans);font-size:13px;font-weight:600;cursor:pointer;transition:background .2s}
.fi-buscar button:hover{background:var(--red-deep)}
body.nav-solid{padding-top:176px}
body.nav-solid .back-link{display:none}
@media (max-width:1024px){.fi-topbar{top:83px}body.nav-solid{padding-top:140px}}

/* Selector de idioma: nombre completo + flechita */
nav.top .lang-switch > a{display:inline-flex;align-items:center}
nav.top .lang-switch .caret{display:inline-block;margin-left:6px;margin-top:1px;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;opacity:.65;transition:transform .35s cubic-bezier(.16,1,.3,1)}
nav.top .lang-switch:hover .caret{transform:rotate(180deg);opacity:1}

/* Nav una linea: compactar en anchos justos (etiqueta Español es mas larga) */
@media (min-width: 1025px) and (max-width: 1300px) {
  nav.top ul { column-gap: 11px; }
  nav.top ul a { font-size: 12.5px; }
}

/* Medios: una sola linea en desktop */
@media (min-width: 901px) {
  .media-row { flex-wrap: nowrap; white-space: nowrap; gap: 14px 20px; }
  .media-row .medio { flex: none; }
}

/* ── Accesibilidad de teclado en el menú ─────────────────────────────────
   Los submenús y el selector de idioma se abrían solamente con :hover, así
   que con teclado eran inalcanzables: el foco entraba al padre y el submenú
   seguía en display:none. Se agrega :focus-within replicando exactamente el
   comportamiento de :hover en cada punto de corte, para que el menú funcione
   igual con mouse, con teclado y con lector de pantalla. */
nav.top li.has-sub:focus-within .submenu { display: flex; }

@media (max-width: 1024px) {
  /* En móvil manda la clase .open que pone nav.js al tocar: el foco solo no
     debe abrir nada, o el submenú se despliega apenas se tabula por encima. */
  nav.top li.has-sub:focus-within .submenu { display: none; }
  nav.top li.has-sub.open .submenu { display: flex; }
}

@media (min-width: 1025px) {
  nav.top .nav-lang li.has-sub:focus-within .submenu { display: flex; }
}

/* Bloque "Seguir mirando" de las fichas de edificio */
.eb-links a{display:inline-block;padding:9px 15px;border:1px solid rgba(20,24,31,.16);
 border-radius:999px;font-size:.92rem;line-height:1.3;color:var(--ink);text-decoration:none;
 background:#fff;transition:border-color .18s,color .18s}
.eb-links a:hover{border-color:var(--red);color:var(--red)}


/* GALERIA EMP VOLANDO */
/* Ficha de emprendimiento: principal con fundido lento + cinta volando abajo */
.mp-wrap{ position:relative; width:100%; height:clamp(300px,55vh,560px);
  border-radius:14px; overflow:hidden; cursor:zoom-in; background:#e9e5de; }
.mp-wrap img{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; transition:opacity 1.8s ease; }
.emp-fly{ width:100vw; margin-left:calc(50% - 50vw); overflow:hidden; margin-top:14px; }
.emp-fly .marquee-track{ gap:14px; padding:4px 0 10px; align-items:stretch; }
.emp-fly img{ height:clamp(120px,17vh,180px); width:auto; flex:none;
  border-radius:10px; box-shadow:0 10px 26px rgba(20,24,31,.14);
  cursor:pointer; transition:opacity .8s ease; }
.emp-fly img.en-grande{ opacity:.32; }
.fi-credit{ font-size:12px; color:#888; margin:8px 0 0; }
@media(max-width:760px){
  .emp-fly img{ height:110px; border-radius:8px; }
  /* En celular la caja quedaba casi cuadrada (350x464) y las fotos son
     apaisadas: con object-fit:cover se perdía el 45% de cada imagen, y en las
     panorámicas hasta el 88%. Con proporción 4:3 la pérdida baja al 22% y la
     foto sigue ocupando el ancho completo. */
  .mp-wrap{ height:auto; aspect-ratio:4/3; }
  .mp-wrap img{ position:absolute; inset:0; }
}

/* FAQ-CTA:start — cierre del bloque de preguntas frecuentes de las fichas.
   La última respuesta manda a escribir por WhatsApp; acá está el botón para
   hacerlo sin salir a buscarlo. Estilo .btn/.btn-primary ya existente. */
.fi-faq-cta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin-top: 26px;
}
.fi-faq-cta .btn { white-space: normal; }
.fi-faq-cta-alt {
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--slate);
}
.fi-faq-cta-alt a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.fi-faq-cta-alt a:hover { color: var(--red); }
@media (max-width: 600px) {
  .fi-faq-cta { align-items: flex-start; gap: 12px; margin-top: 22px; }
  .fi-faq-cta .btn { width: 100%; justify-content: center; }
}
/* FAQ-CTA:end */

/* ═══════════════════════════════════════════════════════════════
   FIXES AUDITORÍA UX MÓVIL — 2026-08-14
   10 auditores sobre iPhone emulado. Cada bloque referencia el
   hallazgo que corrige. No tocar sueltos: van juntos.
═══════════════════════════════════════════════════════════════ */

/* [A1] Desborde horizontal de la home (417px vs 393): los h2 animados con
   translateX expandían el layout viewport y cortaban la hamburguesa. */
html, body { overflow-x: clip; }

/* [A6] Palabra en itálica roja cortada ("narcando"): el estado final de la
   animación from-right perdía por especificidad contra el estado inicial. */
.js .reveal-group.from-right.visible h2 em { transform: translateX(0); }

/* [A4] Corazón "Guardar" invisible en la ficha (btn-ghost claro sobre paper) */
.fi-cta .fav-save { color: var(--ink); border-color: rgba(15,21,28,.35); background: transparent; }
.fi-cta .fav-save:hover { border-color: var(--red); color: var(--red); }

/* [A7] Panel de zonas: texto blanco sobre blanco. El .search-field label
   (mono 11px papel) pisaba los ítems del multiselect. */
.search-field .zona-ms-panel label.zona-ms-item {
  font-family: var(--sans); font-size: 15px; letter-spacing: 0;
  text-transform: none; color: #0F151C; margin: 0; display: flex;
}
.zona-ms-panel { min-width: 300px; }
@media (max-width: 768px) {
  .search-field .zona-ms-panel { min-width: 0; width: calc(100vw - 56px); max-width: 360px; max-height: 46vh; }
}
/* Chips de zonas más buscadas arriba de la lista (las agrega js/zonas.js) */
.zona-ms-tops { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0 8px; }
.zona-ms-top { font: 500 12.5px/1 var(--sans); color: #0F151C; background: rgba(15,21,28,.06);
  border: 1px solid rgba(15,21,28,.16); border-radius: 100px; padding: 8px 12px; cursor: pointer; }
.zona-ms-top.on { background: var(--red); border-color: var(--red); color: #fff; }

/* [A8] Buscador del hero: el select ocupa TODO el campo (área táctil 44px+,
   antes 129x16). El label queda arriba como etiqueta visual. */
.search-field { padding: 0; }
/* OJO: solo los hijos directos del campo — adentro vive el panel de zonas
   con sus propios labels/inputs y no deben heredar nada de esto. */
.search-field > label { position: absolute; top: 12px; left: 18px; right: 18px; pointer-events: none; z-index: 1; margin: 0; }
.search-field > select, .search-field > input {
  min-height: 66px; padding: 30px 34px 10px 18px;
  background-position: right 18px center;
}
.search-field > input { padding-right: 18px; }
.search-field > .zona-ms { padding: 30px 18px 10px; }
.search-field .zona-ms-panel label { position: static; pointer-events: auto; }
.search-field .zona-ms-search { min-height: 0; color: #0F151C; }
.search-box .zona-ms-btn { min-height: 26px; width: 100%; }

/* [A9] iOS auto-zoom: todo control de formulario a 16px en móvil. */
@media (max-width: 768px) {
  input, select, textarea { font-size: 16px !important; }
}

/* [A10] Formularios: la grilla de dos columnas se apila en pantallas chicas
   (placeholders cortados, teléfonos que no se ven enteros). */
@media (max-width: 480px) {
  .form-row { flex-direction: column; align-items: stretch; gap: 12px; margin-bottom: 12px; }
}

/* [A11] Botón WhatsApp de la barra fija de ficha: texto en tinta sobre el
   verde (9.2:1) en vez de blanco (2:1). */
.fi-sticky-wa { color: var(--ink) !important; font-size: 15px; }
.fi-sticky-wa svg { fill: var(--ink) !important; }

/* [A12] Anchors (#precios) que quedaban tapados por nav + fi-topbar. */
html { scroll-padding-top: 150px; }
@media (max-width: 1024px) { html { scroll-padding-top: 170px; } }

/* [A13] Targets táctiles bajo 44px en puntos de conversión. */
.fav-btn::after { content: ""; position: absolute; inset: -8px; }
.fi-share-ic { width: 44px; height: 44px; }
.fi-share-ic svg { width: 19px; height: 19px; }
.fi-share-link { padding: 12px 14px; min-height: 44px; display: inline-flex; align-items: center; }
.fav-toast { z-index: 450; }
.fav-toast .ft-close { padding: 10px 12px; font-size: 22px; min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center; margin: -8px -10px -8px 0; }
@media (hover: none) {
  .pc-arr { width: 42px; height: 42px; font-size: 15px; }
  .cnav { width: 44px; height: 44px; }
  .footer-social a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .fi-topbar .fi-back { padding: 12px 18px; }
}

/* [A14] Micro-tipografía de conversión: 11px era el piso en móvil. */
@media (max-width: 768px) {
  .prop-cta { font-size: 13px; letter-spacing: .12em; }
  .prop-meta { font-size: 12px; }
  .form-field label { font-size: 12px; }
  .fi-share-lbl { font-size: 12px; }
}

/* [A15] Links dentro de cajas beige de artículos: rojo más profundo, 5.5:1. */
:root { --red-text: #B01F3A; }
.article-body a, .art-body a { color: var(--red-text); }

/* [A30] Botones dentro de artículos: la regla [A15] pintaba de rojo TODOS los
   <a> del cuerpo, botones incluidos, y un .btn-primary quedaba con texto rojo
   sobre fondo rojo (ilegible). Ahora los .btn quedan fuera y el ghost se
   adapta al fondo claro del artículo. */
.article-body a.btn, .art-body a.btn,
.art-inline-cta a.btn, .ig-act a.btn, .cartera-cta a.btn { color: var(--paper); }
.article-body a.btn-ghost, .art-body a.btn-ghost,
.article-body a.btn-outline, .art-body a.btn-outline,
.art-inline-cta a.btn-ghost, .ig-act a.btn-ghost, .cartera-cta a.btn-ghost {
  background: rgba(15,21,28,.04);
  color: var(--ink);
  border-color: rgba(15,21,28,.28);
}
.article-body a.btn-ghost:hover, .art-body a.btn-ghost:hover,
.art-inline-cta a.btn-ghost:hover, .ig-act a.btn-ghost:hover, .cartera-cta a.btn-ghost:hover {
  background: rgba(15,21,28,.08);
  border-color: var(--ink);
}
.article-body a.btn-white, .art-body a.btn-white { color: var(--ink); }
.article-body a.btn-ink,   .art-body a.btn-ink   { color: var(--paper); }
/* Bloques oscuros dentro del artículo: el ghost vuelve a ser claro. */
.cta-band a.btn-ghost, .hero a.btn-ghost,
.article-body .cta-band a.btn-ghost, .art-body .cta-band a.btn-ghost {
  background: rgba(246,243,238,.08);
  color: var(--paper);
  border-color: rgba(246,243,238,.25);
}

/* [A31] Links de la caja "Fuentes": iban en --red sobre fondo crema (4,2:1).
   Pasan al rojo profundo de texto para llegar a AA. */
.art-fuentes a { color: var(--red-text); }

/* [A32] Firma de autor al cierre del artículo: foto circular + nombre + cargo
   y un WhatsApp discreto. Coincide con el "author" del schema Article, así que
   refuerza la autoría para Google y para los buscadores con IA. */
.art-autor{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  margin-top:44px; padding-top:28px;
  border-top:1px solid var(--line);
}
.art-autor-foto{
  width:88px; height:88px; flex:0 0 88px;
  border-radius:50%; object-fit:cover;
  box-shadow:0 0 0 3px var(--paper), 0 0 0 4px rgba(15,21,28,.12);
}
.art-autor-info{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.art-autor-kicker{
  font-family:var(--mono); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--slate-soft);
}
.art-autor-nombre{
  font-family:var(--serif); font-weight:400; font-size:1.3rem;
  line-height:1.2; color:var(--ink);
}
.art-autor-rol{ font-size:13px; color:var(--slate); line-height:1.45; }
.art-autor-wa{
  margin-left:auto; display:inline-flex; align-items:center; gap:8px;
  padding:11px 20px; border-radius:100px;
  background:var(--red); font-size:13px; font-weight:500;
  white-space:nowrap; transition:background .25s, transform .25s;
}
.art-body a.art-autor-wa, .article-body a.art-autor-wa,
.art-autor a.art-autor-wa{ color:var(--paper); }
.art-autor-wa:hover{ background:var(--red-deep); transform:translateY(-2px); }
.art-autor-wa svg{ width:16px; height:16px; flex:0 0 16px; }
@media (max-width:560px){
  .art-autor{ gap:14px; padding-top:24px; }
  .art-autor-foto{ width:68px; height:68px; flex:0 0 68px; }
  /* La foto y el nombre quedan en la misma fila; el WhatsApp baja completo. */
  .art-autor-info{ flex:1 1 140px; }
  .art-autor-nombre{ font-size:1.15rem; }
  .art-autor-rol{ font-size:12.5px; }
  .art-autor-wa{ margin-left:0; width:100%; justify-content:center; margin-top:4px; }
}



/* [A16] Heros con foto rotativa: el título siempre legible aunque la foto
   sea clara (el velo tiene una franja transparente a la altura del H1). */
.page-hero h1, .page-hero .lead { text-shadow: 0 1px 24px rgba(15,21,28,.45), 0 1px 3px rgba(15,21,28,.35); }

/* [A2] Filterbar móvil colapsable: al scrollear queda una sola fila opaca;
   tocándola se reabren los filtros (clase .fb-compact desde listing-page.js). */
@media (max-width: 768px) {
  .filterbar.fb-compact { cursor: pointer; background: rgba(246,243,238,.96); padding-top: 10px; padding-bottom: 10px; }
  .filterbar.fb-compact select, .filterbar.fb-compact input.fb-precio, .filterbar.fb-compact .zona-ms { display: none; }
  .filterbar.fb-compact { flex-wrap: nowrap; }
  .filterbar.fb-compact .fb-label { width: auto; white-space: nowrap; }
  .filterbar.fb-compact .fb-label::after { content: " ▾"; color: rgba(15,21,28,.5); }
  .filterbar.fb-compact .count { margin-left: auto; white-space: nowrap; font-size: 11px; }
}

/* [A3] Menú móvil abierto: pantalla completa, fondo sólido y scroll bloqueado
   (la clase menu-lock la pone js/nav.js). El <ul> pintaba su propio fondo
   ink sin mirar el body, así que en nav-dark quedaba una franja oscura
   debajo del logo/WhatsApp ya blancos (bug encontrado al comparar blur
   blanco vs. negro). Ahora el <ul> hereda del nav (blanco en nav-dark,
   ink en home) salvo que se pise explícito para el home. */
body.menu-lock { overflow: hidden; height: 100dvh; }
@media (max-width: 1024px) {
  nav.top.open > ul { height: 100dvh; max-height: 100dvh; overflow-y: auto; background: inherit; padding-bottom: 40vh; }
  body.home nav.top.open > ul { background: var(--ink); }
}

/* [A5] fi-topbar: se esconde al bajar y vuelve al subir (clase desde ficha.js).
   El buscador (zona/dormitorios/baños/precio) queda SIEMPRE visible, también
   en móvil — antes se ocultaba bajo 768px, pero eso contradecía el pedido de
   que el filtro esté siempre presente; ahora scrollea horizontal junto con
   el resto de la fi-topbar (que ya tiene overflow-x:auto). */
.fi-topbar { transition: transform .35s cubic-bezier(.16,1,.3,1); }
.fi-topbar.oculta { transform: translateY(-160%); }

/* [A17] Mapa de la ficha: overlay "tocá para explorar" para que el scroll de
   la página no quede atrapado en el iframe. */
.fi-loc .map { position: relative; }
.map-shield { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center;
  background: rgba(15,21,28,.18); cursor: pointer; border: 0; padding: 0; }
.map-shield span { font: 500 13px/1 var(--sans); color: #fff; background: rgba(15,21,28,.72);
  padding: 10px 16px; border-radius: 100px; }

/* [A18] Comparador de favoritos en móvil: columnas clave visibles, sin foto
   ni zona; sombra que invita a scrollear lateral. */
@media (max-width: 560px) {
  #fav-comp th:nth-child(1), #fav-comp td:nth-child(1),
  #fav-comp th:nth-child(3), #fav-comp td:nth-child(3) { display: none; }
  #fav-comp { position: relative; }
}

/* [A19] CLS de la ficha: la galería reserva su espacio antes de que llegue
   el JS (la foto entra sin empujar el layout). */
.gallery .main { aspect-ratio: 4 / 3; object-fit: cover; background: var(--bone); width: 100%; }
.fi-title { min-height: 1.2em; }

/* [A20] Lightbox navegable: flechas + contador (los agrega ficha.js). */
.lightbox .lb-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 48px; height: 48px; border-radius: 50%; border: none; background: rgba(246,243,238,.14);
  color: #fff; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.lightbox .lb-nav:hover { background: var(--red); }
.lightbox .lb-prev { left: 14px; } .lightbox .lb-next { right: 14px; }
.lightbox .lb-count { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  font: 500 13px/1 var(--mono); letter-spacing: .1em; color: rgba(246,243,238,.85); z-index: 3; }

/* [A21] Contador de fotos del mini-carrusel de tarjetas ("2/8") */
.pc-count { position: absolute; right: 10px; bottom: 10px; z-index: 3;
  font: 500 11px/1 var(--mono); letter-spacing: .08em; color: #fff;
  background: rgba(15,21,28,.55); padding: 5px 8px; border-radius: 100px; pointer-events: none; }

/* [A22] "Favoritos" con texto en el menú móvil (el corazón solo era ambiguo) */
.fav-nav .fav-txt { display: none; font-weight: 500; }
@media (max-width: 1024px) { .fav-nav .fav-txt { display: inline; } }

/* [A23] Administración es un link externo: se marca para no sorprender */
nav.top .nav-admin a[target="_blank"]::after { content: " ↗"; opacity: .6; }

/* [A24] Primer pantallazo del home en móvil: el botón Buscar entraba cortado
   en el fold. Se recorta el aire vertical del hero para que el buscador
   cierre completo en un iPhone con las barras de Safari visibles. */
@media (max-width: 768px) {
  body.home .hero { padding-top: clamp(120px, 15vh, 160px); padding-bottom: 40px; min-height: 0; }
  .hero .lead { margin-bottom: 16px; }
  .hero-actions { margin-bottom: 4px; }
}


/* [A25] Tabs de destacadas: en móvil la tercera pestaña quedaba cortada.
   Fila scrolleable con inercia, sin romper el layout desktop. */
@media (max-width: 768px) {
  .tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; gap: 8px; padding-bottom: 4px; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs .tab { flex: none; white-space: nowrap; }
}

/* [A36] El panel de zonas del buscador del hero se cortaba: es position:absolute
   dentro de .search-field, y .hero tenía overflow:hidden (necesario para que el
   zoom de la foto/video no se desborde). Ahora ese recorte vive en .hero-media,
   que envuelve SOLO las capas de fondo (.bg, los <video> y .grain). .hero queda
   sin recorte y el desplegable puede pasar por debajo del hero sin cortarse. */
.hero { overflow: visible; }
.hero .hero-media { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.hero .search-field .zona-ms-panel { z-index: 60; }

/* [A37] Menú del home: letras NEGRAS mientras el nav está transparente sobre el
   hero. El cielo del hero es claro, así que el crema anterior daba 1,38:1 de
   contraste (ilegible sin la sombra) y el negro da 11,98:1. Al scrollear entra
   el vidrio oscuro (rgba(15,21,28,.6)) y las letras vuelven al crema, que ahí
   sí es lo legible. La sombra se invierte: sobre la foto clara, halo blanco. */
body.home nav.top ul a { color: var(--ink); text-shadow: 0 1px 14px rgba(246,243,238,.85); }
body.home nav.top ul a.active,
body.home nav.top ul a:hover { color: var(--red); }
body.home .nav-toggle { border-color: rgba(15,21,28,.35); }
body.home .nav-toggle span,
body.home .nav-toggle span::before,
body.home .nav-toggle span::after { background: var(--ink); }
body.home nav.top.open .nav-toggle span { background: transparent; }
/* scrolleado: vuelve el esquema oscuro de siempre */
body.home nav.top.nav-frost ul a { color: var(--paper); text-shadow: none; }
body.home nav.top.nav-frost ul a.active,
body.home nav.top.nav-frost ul a:hover { color: #ff92a6; }
body.home nav.top.nav-frost .nav-toggle { border-color: rgba(246,243,238,.35); }
body.home nav.top.nav-frost .nav-toggle span,
body.home nav.top.nav-frost .nav-toggle span::before,
body.home nav.top.nav-frost .nav-toggle span::after { background: var(--paper); }
body.home nav.top.open .nav-toggle span,
body.home nav.top.nav-frost.open .nav-toggle span { background: transparent; }
/* el menú móvil abierto tiene fondo oscuro: ahí las letras van claras */
body.home nav.top.open ul a { color: var(--paper); text-shadow: none; }

/* [M1] Chequeo móvil 02/09/2026 — 5 teléfonos (375/393/430/360/412).
   Zonas táctiles ≥44px, texto mínimo 12px, sin scroll lateral en iOS,
   ficha: contenido no tapado por la barra fija, fondo de respaldo del hero. */
html { overflow-x: clip; }                       /* iOS ignora overflow-x en body solo */
.page-hero.has-photo { background-color: #1c2530; } /* si la foto no carga, el texto blanco sigue legible */
@media (max-width:1024px){
  body.nav-solid { padding-top: 162px; }          /* nav 83 + topbar 67 + aire: antes 140 y las chips quedaban tapadas */
}
@media (max-width:768px){
  .fav-btn { width: 44px; height: 44px; }
  .fav-btn svg { width: 21px; height: 21px; }
  .nav-toggle { height: 44px; min-width: 44px; }
  nav.top .cta { min-height: 44px; }
  .crumbs a, .crumbs .back { display: inline-block; padding: 10px 0; margin: -10px 0; }
  .filterbar select, .filterbar input, .filterbar .zona-ms-btn { min-height: 44px; }
  .btn, .btn-ghost, .btn-primary { min-height: 44px; }
  .g-arrow, .pc-arr { width: 44px; height: 44px; }
  .tabs .tab, .fi-tabs .tab, button.tab { min-height: 44px; }
  #price-alt, .fi-links a { display: inline-block; padding: 10px 0; }
  footer .footer-col a, footer .footer-bottom a { display: inline-block; padding: 8px 0; }
  .contact-list a, .fi-contact a { display: inline-block; padding: 8px 0; }
  /* texto: piso de 12px para etiquetas y notas (antes 11px / 10px) */
  .kicker, label, small, .trust-label, .badge, .tag, figcaption, .zona, .op-tag,
  .pc-count, .num, .fb-label, .lbl, .form-note, footer h4, .marquee .zona { font-size: 12px; }
  .prop-badge { font-size: 11px; }
}
@media (max-width:768px){
  .hero .search-field label, .search-box label, .search-field label { font-size: 12px; }
  .prop-card small, .prop-price small, .lcard small, .card small { font-size: 12px; }
  footer .footer-col a { padding: 12px 0; }
  .search-box .zona-ms-btn { min-height: 44px; display: flex; align-items: center; }
  .prop-loc, .fi-tag, .fb-label, .filterbar .fb-label, .prop-card .prop-loc { font-size: 12px; }
  footer .footer-bottom a { padding: 12px 0; }
}

/* [M2] Chips de filtros activos + "Limpiar filtros" (listing-page.js v14) */
.fb-chips { display:flex; flex-wrap:wrap; gap:8px; padding:10px var(--gutter) 0; }
.fb-chips[hidden] { display:none; }
.fb-chip { display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:6px 12px 6px 14px; border-radius:100px; border:1px solid rgba(15,21,28,.18); background:rgba(15,21,28,.04); color:var(--ink); font-family:var(--sans); font-size:13px; font-weight:500; cursor:pointer; }
.fb-chip i { font-style:normal; font-size:16px; line-height:1; opacity:.6; }
.fb-chip:hover { border-color:rgba(15,21,28,.45); }
.fb-chip-all { background:var(--ink); color:var(--paper); border-color:var(--ink); }
@media (max-width:768px){ .fb-chip { min-height:44px; } }

/* [M3] Accesibilidad: skip-link, campo honeypot */
.skip-link { position:absolute; left:-9999px; top:8px; z-index:10000; background:var(--ink); color:var(--paper); padding:12px 18px; border-radius:10px; font-family:var(--sans); font-weight:600; }
.skip-link:focus { left:12px; outline:2px solid var(--red); outline-offset:2px; }
.hp-field { position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; pointer-events:none; }