/* ============================================================================
   LAS TIPOGRAFÍAS

   Dos: Bodoni Moda para titulares y DM Sans para el texto.

   Se sirven desde este servidor y no desde Google: la política de contenido
   sólo permite fuentes propias, cargan antes sin una petición a otro dominio, y
   no se le cuenta a nadie quién entra aquí.

   `font-display: swap` para que el texto se lea de inmediato con la de
   respaldo y cambie cuando llegue la buena.
   ========================================================================== */

@font-face { font-family: 'Bodoni Moda'; font-style: normal; font-weight: 400; font-display: swap;
             src: url('/assets/fonts/bodoni-400.woff2') format('woff2'); }
@font-face { font-family: 'Bodoni Moda'; font-style: normal; font-weight: 500; font-display: swap;
             src: url('/assets/fonts/bodoni-500.woff2') format('woff2'); }

@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap;
             src: url('/assets/fonts/dm-sans-400.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 500; font-display: swap;
             src: url('/assets/fonts/dm-sans-500.woff2') format('woff2'); }

:root {
  --negro: #0a0a0c;
  --negro-2: #111114;
  --negro-3: #17171b;

  --linea: rgba(255, 255, 255, .09);
  --linea-viva: rgba(255, 255, 255, .18);

  --texto: #f2f0ea;
  --texto-2: #a8a59d;
  --texto-3: #6f6d67;

  --claro: #e9e6df;

  /* Los respaldos son de sistema: si la tipografía tarda o falla, el texto se
     lee igual en vez de quedarse en blanco. */
  --serif: 'Bodoni Moda', Georgia, 'Times New Roman', serif;
  --sans:  'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* El ancho del contenido y el margen lateral. */
  --ancho: 1440px;
  --lado: clamp(20px, 5vw, 72px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--negro);
  color: var(--texto);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.contenido { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 var(--lado); }

/* ---------------------------------------------------------------- cabecera */

.cab {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  border-bottom: 1px solid transparent;
  transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
}

/* Al desplazar se vuelve opaca. Arriba flota sobre la fotografía, que es donde
   tiene que dejar respirar. */
.cab.fija {
  background: rgba(10, 10, 12, .92);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--linea);
}

.cab-in {
  max-width: var(--ancho); margin: 0 auto;
  padding: 20px var(--lado);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}

.cab-logo img { height: 27.6px; width: auto; }

.cab-nav { display: flex; align-items: center; gap: 30px; }
.cab-nav a { font-size: 13px; letter-spacing: .04em; color: var(--texto-2); transition: color .2s; }
.cab-nav a:hover { color: var(--texto); }

.cab-cta {
  background: var(--claro); color: var(--negro) !important;
  padding: 9px 20px; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase;
}
.cab-cta:hover { background: #fff; }

.cab-menu { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.cab-menu span { display: block; width: 22px; height: 1px; background: var(--texto); margin: 5px 0; transition: transform .25s; }

.cab-movil { display: none; }

/* ----------------------------------------------------------------- portada */

.portada {
  position: relative; min-height: 88vh;
  display: flex; align-items: flex-end;
  overflow: hidden;
}

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

/* El velo hace legible el texto sin oscurecer la foto entera: se concentra
   abajo, que es donde va el contenido. */
/* El velo cubre sólo el tercio inferior, que es donde va el texto.
   
   Antes se extendía a toda la foto con un 15% incluso arriba, y en el teléfono
   —donde la imagen ocupa menos alto— eso apagaba la fotografía entera. La foto
   es lo que vende; el velo sólo debe hacer legible una línea de texto. */
.portada::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 45%;
  background: linear-gradient(to top,
    rgba(10, 10, 12, .78) 0%,
    rgba(10, 10, 12, .42) 40%,
    rgba(10, 10, 12, 0) 100%);
}

.portada-txt {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--ancho); margin: 0 auto;
  padding: 0 var(--lado) clamp(26px, 3vw, 44px);
}

/* Una nota al pie, no un titular.
   
   La fotografía es lo que comunica el nivel; el texto sólo dice dónde y cuándo.
   A 68 píxeles competía con la imagen y la convertía en fondo de un cartel. */
.portada-frase {
  font-family: var(--serif);
  font-size: clamp(15px, 1.5vw, 21px);
  font-weight: 400; line-height: 1.4;
  letter-spacing: .02em;
  margin: 0; max-width: 30em;
  color: var(--texto-2);
}

/* --------------------------------------------------------------- buscador */

.busca { border-bottom: 1px solid var(--linea); background: var(--negro); }

.busca-in {
  max-width: var(--ancho); margin: 0 auto;
  padding: 22px var(--lado);
  display: flex; gap: 10px; align-items: stretch;
}

.busca-campo { position: relative; flex: 1; min-width: 0; }

.busca input[type="text"],
.busca select {
  width: 100%; height: 46px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--linea);
  border-radius: 2px;
  color: var(--texto);
  font-family: inherit; font-size: 15px;
  padding: 0 15px;
  outline: none;
  transition: border-color .18s, background .18s;
}

/* El color del texto de ejemplo se declara para TODOS los campos.
   
   Sin esto, cada navegador usa el suyo: en Safari de iOS sale casi blanco y se
   lee como texto ya escrito, no como ejemplo. */
.busca input::placeholder,
.campo input::placeholder,
.campo textarea::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--texto-3);
  opacity: 1;
}

.busca input:focus, .busca select:focus {
  border-color: var(--linea-viva);
  background: rgba(255,255,255,.06);
}

.busca select { cursor: pointer; width: auto; min-width: 118px; padding-right: 34px;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8a59d' stroke-width='1.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 16px;
}

.busca-btn {
  height: 46px; padding: 0 26px;
  background: var(--claro); color: var(--negro);
  border: 0; border-radius: 2px; cursor: pointer;
  font-family: inherit; font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  transition: background .18s;
}
.busca-btn:hover { background: #fff; }

.busca-mas {
  height: 46px; padding: 0 16px;
  background: transparent; border: 1px solid var(--linea);
  border-radius: 2px; color: var(--texto-2); cursor: pointer;
  font-family: inherit; font-size: 13px;
  white-space: nowrap;
}
.busca-mas:hover { border-color: var(--linea-viva); color: var(--texto); }

/* Sugerencias del buscador. */
.sug {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40;
  background: var(--negro-3); border: 1px solid var(--linea);
  max-height: 320px; overflow-y: auto;
}
.sug[hidden] { display: none; }

.sug-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 15px; cursor: pointer;
  border-bottom: 1px solid var(--linea);
}
.sug-item:last-child { border-bottom: 0; }
.sug-item:hover, .sug-item[aria-selected="true"] { background: rgba(255,255,255,.05); }

.sug-nom { font-size: 14px; }
.sug-meta { font-size: 12px; color: var(--texto-3); white-space: nowrap; }

/* Filtros avanzados, ocultos hasta que se piden. */
.filtros-mas {
  border-top: 1px solid var(--linea);
  background: var(--negro-2);
}
.filtros-mas[hidden] { display: none; }

/**
 * El panel de más filtros, con anchos según lo que contiene.
 *
 * Antes todos los campos medían lo mismo —`auto-fit` reparte por igual— y eso
 * dejaba a Tipo y Recámaras con espacio de sobra mientras el precio, que son
 * dos números de ocho cifras con su moneda, se ahogaba en el mismo hueco.
 *
 * Doce columnas y cada campo pide las suyas: es la única forma de que un
 * formulario con campos tan distintos no parezca repartido a ciegas.
 */
.filtros-mas-in {
  max-width: var(--ancho); margin: 0 auto;
  padding: 20px var(--lado) 24px;
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px;
  align-items: end;
}

.filtros-mas-in .filtro-campo { grid-column: span 4; min-width: 0; }

@media (min-width: 861px) {
  .filtros-mas-in .filtro-campo { grid-column: span 2; }
  /* El precio: dos números largos y un símbolo. Necesita el doble. */
  .filtros-mas-in .filtro-precio { grid-column: span 4; }
  .filtros-mas-in .filtro-acciones { grid-column: span 2; }
}

@media (max-width: 860px) {
  /* En el teléfono, dos por fila salvo el precio, que ocupa la suya entera:
     partido a la mitad no caben los dos campos con sus símbolos. */
  .filtros-mas-in .filtro-campo { grid-column: span 6; }
  .filtros-mas-in .filtro-precio,
  .filtros-mas-in .filtro-acciones { grid-column: 1 / -1; }
}

.filtro-campo label { display: block; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-3); margin-bottom: 7px; }

/* ------------------------------------------------------------ propiedades */

.seccion { padding: clamp(56px, 7vw, 104px) 0; }

.seccion-cab {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 20px; margin-bottom: clamp(28px, 3.5vw, 48px);
}

.seccion-tit {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(26px, 3vw, 42px); letter-spacing: -.01em; margin: 0;
}

.seccion-link { font-size: 13px; color: var(--texto-2); border-bottom: 1px solid var(--linea-viva); padding-bottom: 2px; }
.seccion-link:hover { color: var(--texto); }

.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: clamp(16px, 2vw, 28px);
}

.tarjeta { display: block; }

.tarjeta-foto {
  position: relative; width: 100%; aspect-ratio: 4 / 3;
  background: var(--negro-3); overflow: hidden;
}

.tarjeta-foto img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s cubic-bezier(.2,.7,.3,1);
}
.tarjeta:hover .tarjeta-foto img { transform: scale(1.035); }

.tarjeta-etq {
  position: absolute; top: 12px; left: 12px;
  background: rgba(10,10,12,.78); backdrop-filter: blur(6px);
  padding: 5px 11px; font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--texto);
}

.tarjeta-cuerpo { padding: 15px 2px 0; }

.tarjeta-precio {
  font-family: var(--serif); font-size: clamp(20px, 1.7vw, 26px);
  font-weight: 400; letter-spacing: -.005em;
}

.tarjeta-zona { font-size: 13.5px; color: var(--texto-2); margin-top: 5px; }

.tarjeta-datos {
  display: flex; gap: 16px; margin-top: 10px;
  font-size: 12.5px; color: var(--texto-3);
}

/* -------------------------------------------------------------- resultados */

.res-cab {
  padding: 26px 0 4px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.res-conteo { font-size: 14px; color: var(--texto-2); }

.vacio { padding: clamp(56px, 8vw, 110px) 0; text-align: center; }
.vacio-tit { font-family: var(--serif); font-size: clamp(22px, 2.4vw, 32px); font-weight: 300; margin: 0 0 12px; }
.vacio-txt { font-size: 15px; color: var(--texto-2); max-width: 34em; margin: 0 auto; line-height: 1.7; }

/* ------------------------------------------------------------------ ficha */

/* Mosaico: una principal grande y cuatro al lado.
   
   Muestra cinco fotos de un vistazo en vez de una. En este segmento la
   fotografía es lo que decide, y hacer que alguien pulse para ver la segunda
   pierde a quien sólo estaba mirando. */
.galeria { padding-top: 74px; }

.mosaico {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 6px;
  aspect-ratio: 16 / 8;
  max-height: 620px;
}

.mosaico-principal {
  grid-row: span 2;
  padding: 0; border: 0; background: var(--negro-3);
  overflow: hidden; cursor: pointer;
}

.mosaico-chica {
  position: relative;
  padding: 0; border: 0; background: var(--negro-3);
  overflow: hidden; cursor: pointer;
}

.mosaico img {
  width: 100%; height: 100%;
  /* `cover` recorta para llenar el hueco. Es lo correcto en el mosaico —los
     huecos tienen proporciones fijas— pero NUNCA en el visor, donde la foto
     debe verse entera. */
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.2,.7,.3,1);
}
.mosaico button:hover img { transform: scale(1.03); }

/* Con menos de cinco fotos el mosaico queda con huecos: se pasa a dos columnas. */
.mosaico--pocas { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; aspect-ratio: 16 / 7; }
.mosaico--pocas .mosaico-principal { grid-row: span 1; }

.mosaico-mas {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10, 10, 12, .62);
  color: var(--texto); font-size: clamp(18px, 2vw, 26px);
  font-family: var(--serif); font-weight: 300;
  pointer-events: none;
}

.galeria-todas {
  margin-top: 12px; padding: 10px 20px;
  background: transparent; border: 1px solid var(--linea-viva);
  border-radius: 2px; color: var(--texto-2);
  font-family: inherit; font-size: 13px; cursor: pointer;
  transition: border-color .15s, color .15s;
}
.galeria-todas:hover { border-color: var(--texto-3); color: var(--texto); }

.galeria-vacia { height: 74px; }

/* ------------------------------------------------------------------ visor */

.visor {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(6, 6, 8, .985);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.visor[hidden] { display: none; }

/* Las fotos apiladas, una debajo de otra. Desplazar es el gesto natural del
   móvil, y en escritorio funciona igual con la rueda. */
.visor-tira {
  max-width: 1180px;
  margin: 0 auto;
  padding: 68px clamp(10px, 2vw, 24px) clamp(40px, 6vw, 80px);
  display: flex; flex-direction: column;
  gap: clamp(8px, 1.2vw, 16px);
}

.visor-tira img {
  width: 100%; height: auto;
  display: block;
  background: var(--negro-3);
}

.visor-cerrar {
  position: fixed; top: 16px; right: 18px; z-index: 101;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .1);
  backdrop-filter: blur(8px);
  border: 0; border-radius: 50%;
  color: var(--texto); font-size: 26px; line-height: 1;
  cursor: pointer;
  transition: background .18s;
}
.visor-cerrar:hover { background: rgba(255, 255, 255, .18); }

.ficha-cuerpo {
  display: grid; grid-template-columns: minmax(0, 1fr) 372px;
  gap: clamp(28px, 4vw, 72px);
  padding: clamp(36px, 4.5vw, 64px) 0 clamp(56px, 7vw, 104px);
  align-items: start;
}

.ficha-precio {
  font-family: var(--serif); font-size: clamp(30px, 3.6vw, 50px);
  font-weight: 300; letter-spacing: -.015em; margin: 0;
}

.ficha-zona { font-size: 15px; color: var(--texto-2); margin-top: 8px; }

.ficha-datos {
  display: flex; flex-wrap: wrap; gap: clamp(24px, 3vw, 48px);
  padding: 26px 0; margin: 28px 0;
  border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea);
}

.dato-num { font-family: var(--serif); font-size: 24px; font-weight: 400; }
.dato-lbl { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-3); margin-top: 4px; }

.ficha-desc { font-size: 15.5px; line-height: 1.85; color: var(--texto-2); max-width: 44em; white-space: pre-line; }

.amenidad { font-size: 14px; color: var(--texto-2); padding-left: 16px; position: relative; }
.amenidad::before { content: ''; position: absolute; left: 0; top: 8px; width: 4px; height: 4px; border-radius: 50%; background: var(--texto-3); }

/* --------------------------------------------------- formulario de contacto */

/* Se queda a la vista al desplazar: el momento de contactar llega en cualquier
   punto de la ficha, y hacer que la persona vuelva arriba pierde leads. */
.contacto-caja {
  position: sticky; top: 96px;
  background: var(--negro-2); border: 1px solid var(--linea);
  padding: 26px 24px;
}

.contacto-tit { font-family: var(--serif); font-size: 22px; font-weight: 400; margin: 0 0 6px; }
.contacto-sub { font-size: 13px; color: var(--texto-3); margin: 0 0 20px; line-height: 1.6; }

.campo { margin-bottom: 11px; }
.campo label { display: block; font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--texto-3); margin-bottom: 6px; }

.campo input, .campo textarea {
  width: 100%;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--linea);
  border-radius: 2px;
  color: var(--texto);
  font-family: inherit;
  /* 16px como mínimo: por debajo, iOS acerca la pantalla al tocar el campo. */
  font-size: 16px;
  padding: 12px 14px;
  outline: none;
  transition: border-color .18s, background .18s;
}
.campo input:focus, .campo textarea:focus { border-color: var(--linea-viva); background: rgba(255,255,255,.06); }
.campo textarea { resize: vertical; min-height: 74px; }

.btn-principal {
  width: 100%; padding: 15px;
  background: var(--claro); color: var(--negro);
  border: 0; border-radius: 2px; cursor: pointer;
  font-family: inherit; font-size: 13px; letter-spacing: .07em; text-transform: uppercase;
  margin-top: 8px;
  transition: background .18s;
}
.btn-principal:hover { background: #fff; }
.btn-principal:disabled { opacity: .5; cursor: default; }

.contacto-nota { font-size: 11.5px; color: var(--texto-3); text-align: center; margin: 12px 0 0; line-height: 1.6; }

/* Lo que aparece cuando ya dejó sus datos. */
.contacto-abierto { text-align: center; padding: 8px 0; }
.contacto-abierto-tit { font-family: var(--serif); font-size: 21px; font-weight: 400; margin: 0 0 6px; }
.contacto-abierto-sub { font-size: 13px; color: var(--texto-3); margin: 0 0 20px; }

.btn-wa {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; padding: 14px;
  background: #1fa855; color: #fff;
  border-radius: 2px; font-size: 14px; margin-bottom: 9px;
}
.btn-wa:hover { background: #189347; }

.btn-tel {
  display: block; width: 100%; padding: 14px; text-align: center;
  border: 1px solid var(--linea-viva); border-radius: 2px;
  font-size: 14px; color: var(--texto);
}
.btn-tel:hover { background: rgba(255,255,255,.04); }

.aviso { padding: 11px 14px; font-size: 13px; margin-bottom: 14px; border-radius: 2px; line-height: 1.55; }
.aviso-err { background: rgba(226,75,74,.12); color: #f5a3a2; border: 1px solid rgba(226,75,74,.25); }

/* ------------------------------------------------------------------- pie */

.pie { border-top: 1px solid var(--linea); padding: clamp(44px, 5vw, 72px) 0 0; }

.pie-in {
  max-width: var(--ancho); margin: 0 auto; padding: 0 var(--lado);
  display: flex; justify-content: space-between; gap: clamp(32px, 5vw, 80px); flex-wrap: wrap;
}

/* La rejilla de columnas tiene que ocupar el espacio que le queda.

   Sin esto, dentro de un contenedor flexible se encoge a su contenido mínimo y
   `auto-fit` acaba dando una sola columna: cinco listas apiladas en vertical.
   `min-width: 0` es lo que permite que un elemento flexible se reparta de
   verdad en vez de quedarse con lo justo. */
.pie-cols { flex: 1 1 auto; min-width: 0; }

.pie-logo { height: 23px; width: auto; opacity: .85; }

.pie-cols { display: flex; gap: clamp(32px, 5vw, 76px); flex-wrap: wrap; }
.pie-col { display: flex; flex-direction: column; gap: 9px; }
.pie-tit { font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--texto-3); margin-bottom: 3px; }
.pie-col a { font-size: 14px; color: var(--texto-2); }
.pie-col a:hover { color: var(--texto); }

.pie-legal {
  max-width: var(--ancho); margin: clamp(40px, 5vw, 64px) auto 0; padding: 22px var(--lado);
  border-top: 1px solid var(--linea);
  font-size: 12.5px; color: var(--texto-3);
}

/* --------------------------------------------------------------- pantallas */

@media (max-width: 1080px) {
  .ficha-cuerpo { grid-template-columns: 1fr; }
  .contacto-caja { position: static; }
}

@media (max-width: 760px) {
  .cab-nav { display: none; }
  .cab-menu { display: block; }

  .cab-movil {
    display: block; border-top: 1px solid var(--linea);
    background: rgba(10,10,12,.97); backdrop-filter: blur(14px);
    padding: 12px var(--lado) 20px;
  }
  .cab-movil[hidden] { display: none; }
  .cab-movil a { display: block; padding: 13px 0; font-size: 16px; border-bottom: 1px solid var(--linea); }
  .cab-movil a:last-child { border-bottom: 0; }

  .portada { min-height: 76vh; }

  /**
   * La barra en el teléfono, en tres filas.
   *
   *   1. El campo de texto, a lo ancho.
   *   2. Operación y Ubicación, mitad y mitad.
   *   3. «Más filtros» a la derecha y «Buscar» a la izquierda.
   *
   * La regla anterior apuntaba a `select`, que ya no existe: al migrar a los
   * desplegables propios dejó de aplicar y los elementos caían donde tocara.
   * Por eso «Más filtros» acababa a la izquierda.
   */
  .busca-in { flex-wrap: wrap; }
  .busca-campo { flex: 1 1 100%; }
  /* Mitad y mitad: los dos filtros de la misma fila deben medir lo mismo, o
     uno se lee como principal y el otro como accesorio. */
  .busca-in .sel { flex: 1 1 calc(50% - 5px); }
  .busca-in .sel-pop { width: auto; left: 0; right: 0; }
  .busca-btn { flex: 1 1 auto; order: 1; }
  .busca-mas { flex: 0 0 auto; order: 2; margin-left: auto; }

  .rejilla { grid-template-columns: 1fr; }
  .ficha-datos { gap: 22px; }
}

/* ---------------------------------------------------------------- cookies */

/* Discreto y abajo, no un muro que tape el sitio.
   Un banner que obliga a decidir antes de ver nada hace que la gente acepte sin
   leer, que es justo lo contrario de un consentimiento informado. */
.galletas {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  padding: 16px clamp(20px, 5vw, 56px);
  background: rgba(13, 13, 16, .97);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--linea);
}

.galletas-txt { font-size: 13.5px; color: var(--texto-2); margin: 0; max-width: 62ch; line-height: 1.6; }
.galletas-txt a { color: var(--texto); border-bottom: 1px solid var(--linea-viva); }

.galletas-btns { display: flex; gap: 9px; flex: none; }

.galletas-si, .galletas-no {
  padding: 9px 20px; border-radius: 2px; cursor: pointer;
  font-family: inherit; font-size: 13px; letter-spacing: .04em;
  border: 1px solid var(--linea-viva); background: transparent; color: var(--texto);
}
.galletas-si { background: var(--claro); color: var(--negro); border-color: var(--claro); }
.galletas-si:hover { background: #fff; }
.galletas-no:hover { background: rgba(255,255,255,.05); }

@media (max-width: 620px) {
  .galletas { flex-direction: column; align-items: stretch; gap: 12px; }
  .galletas-btns { justify-content: stretch; }
  .galletas-si, .galletas-no { flex: 1; }
}

/* -------------------------------------------------------------- privacidad */

/* Documento legal: se lee de corrido, no se escanea. Columna estrecha, línea
   generosa y jerarquía clara entre secciones. */
.priv { max-width: 760px; }

/* Texto justificado sólo aquí. En el resto del sitio la bandera derecha lee
   mejor, pero un documento legal se lee de corrido y el bloque justificado le
   da la formalidad que corresponde.
   
   `text-wrap: pretty` evita los ríos de espacio que el justificado produce
   cuando una línea tiene pocas palabras largas. */
.priv p, .priv li {
  text-align: justify;
  text-wrap: pretty;
  hyphens: auto;
  -webkit-hyphens: auto;
}

.priv p { font-size: 15px; line-height: 1.85; color: var(--texto-2); margin: 0 0 18px; }
.priv h2 {
  font-family: var(--serif); font-size: 22px; font-weight: 400;
  color: var(--texto); margin: 40px 0 14px; letter-spacing: -.01em;
}
.priv ul { margin: 0 0 18px; padding-left: 20px; }
.priv li { font-size: 15px; line-height: 1.8; color: var(--texto-2); margin-bottom: 9px; }
.priv a { color: #a8bcd8; border-bottom: 1px solid rgba(168,188,216,.3); }
.priv-fecha { font-size: 13px !important; color: var(--texto-3) !important; margin-top: 44px !important; padding-top: 22px; border-top: 1px solid var(--linea); }

.priv-sub { font-weight: 600; color: var(--texto) !important; margin-top: 22px !important; }
.priv-lista { margin: 0 0 18px; padding-left: 20px; }
.priv-lista li { font-size: 15px; line-height: 1.8; color: var(--texto-2); margin-bottom: 9px; }

/* ------------------------------------------------------------------ zonas */

.zona-cab { padding: clamp(28px, 4vw, 52px) 0 clamp(24px, 3vw, 40px); }

/* Migas de pan: dicen dónde está uno y ayudan a Google a entender la
   estructura del sitio. */
.migas { font-size: 13px; color: var(--texto-3); margin-bottom: 18px; }
.migas a { color: var(--texto-2); }
.migas a:hover { color: var(--texto); }
.migas span { margin: 0 6px; }
.migas-actual { color: var(--texto-3); margin-left: 0 !important; }

.zona-tit {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(28px, 3.6vw, 48px); letter-spacing: -.02em;
  line-height: 1.12; margin: 0 0 16px;
}

.zona-txt { font-size: clamp(15px, 1.1vw, 17px); color: var(--texto-2); line-height: 1.75; max-width: 62ch; margin: 0; }

.otras-zonas { border-top: 1px solid var(--linea); padding: clamp(40px, 5vw, 64px) 0; }
.otras-tit { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-3); margin: 0 0 20px; font-weight: 500; }

.otras-lista { display: flex; flex-wrap: wrap; gap: 9px; }
.otras-lista a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px; border: 1px solid var(--linea);
  font-size: 14px; color: var(--texto-2);
  transition: border-color .15s, color .15s;
}
.otras-lista a:hover { border-color: var(--linea-viva); color: var(--texto); }
.otras-lista em { font-style: normal; font-size: 12px; color: var(--texto-3); }

.similares { border-top: 1px solid var(--linea); padding: clamp(48px, 6vw, 88px) 0; }

/* ------------------------------------------------------- zonas en el inicio */

.zonas-inicio { border-top: 1px solid var(--linea); padding: clamp(48px, 6vw, 88px) 0; }

.zonas-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
}

.zona-enlace {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 18px 20px;
  background: var(--negro);
  transition: background .15s;
}
.zona-enlace:hover { background: var(--negro-2); }

.zona-nom { font-size: 15.5px; }
.zona-n { font-size: 12.5px; color: var(--texto-3); }

.res-zona { margin: 0 0 6px; }
.res-zona a { font-size: 14px; color: var(--texto-2); border-bottom: 1px solid var(--linea-viva); padding-bottom: 2px; }
.res-zona a:hover { color: var(--texto); }

/* --------------------------------------------------------- directorio zonas */

/**
 * El directorio de zonas.
 *
 * Antes era una rejilla de cajas grises separadas por líneas de un píxel: el
 * patrón exacto de una tabla de administración, y por eso se leía barato.
 *
 * Ahora cada zona es un bloque con un degradado apenas perceptible y el nombre
 * en grande. Al pasar el cursor el degradado se aviva y una línea se dibuja de
 * izquierda a derecha por debajo — es un detalle pequeño, pero es lo que separa
 * algo cuidado de algo hecho por salir del paso.
 */

.dir-zonas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}

.dir-zona {
  position: relative;
  display: block;
  padding: 22px 24px;
  border-radius: 3px;
  overflow: hidden;
  /* Un degradado casi invisible: da cuerpo sin que se lea como un botón. */
  background: linear-gradient(135deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  transition: background .25s ease;
}

/**
 * El resaltado, SÓLO donde hay cursor.
 *
 * En un teléfono no hay «pasar por encima»: al tocar, el navegador simula un
 * hover que se queda pegado hasta que se toca otra cosa. Eso hacía que el
 * degradado se quedara encendido mientras la página navegaba, y se percibía
 * como si el botón se trabara.
 *
 * `hover: hover` es la consulta que distingue un ratón de un dedo. Con ella,
 * el efecto existe en escritorio y no estorba en móvil.
 */
@media (hover: hover) {
  .dir-zona:hover {
    background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  }

  /* La línea que se dibuja al pasar por encima. */
  .dir-zona::after {
    content: '';
    position: absolute; left: 0; bottom: 0;
    height: 1px; width: 0;
    background: var(--claro);
    transition: width .35s ease;
  }

  .dir-zona:hover::after { width: 100%; }
}

/**
 * En pantallas táctiles, la respuesta es al tocar y es instantánea.
 *
 * `:active` dura sólo lo que el dedo está encima, así que no puede quedarse
 * pegado. Y sin transición: en un toque, cualquier animación se percibe como
 * retraso.
 */
@media (hover: none) {
  .dir-zona { transition: none; }
  .dir-zona:active {
    background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
  }
}

.dir-zona-nom {
  display: block;
  font-family: var(--serif);
  font-size: clamp(21px, 2vw, 26px);
  font-weight: 400;
  line-height: 1.15;
  color: var(--texto);
}

/* Los fraccionamientos: más columnas y más pequeños. Son secundarios respecto
   a las zonas, y la jerarquía tiene que decirlo sin explicarlo. */
.dir-zonas--frac { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.dir-zona--frac { padding: 17px 19px; }
.dir-zona--frac .dir-zona-nom { font-size: clamp(17px, 1.5vw, 19px); }

@media (max-width: 560px) {
  .dir-zonas { grid-template-columns: 1fr; gap: 8px; }
  .dir-zonas--frac { grid-template-columns: 1fr 1fr; }
}

.dir-otras { margin-top: clamp(40px, 5vw, 64px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--linea); }

.vacio-form { max-width: 460px; margin: 34px auto 0; text-align: left; }
.ck-fila-doble { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }

@media (max-width: 560px) { .ck-fila-doble { grid-template-columns: 1fr; } }

/* El telefono ocupa su propia linea cuando lleva selector de pais.

   En dos columnas de 460px, cada campo mide 224. El selector se lleva 90 y al
   numero le quedan 120: caben seis digitos y hay que escribir diez a ciegas.
   En movil no pasaba porque ahi la rejilla ya es de una sola columna.

   El nombre se queda arriba ocupando el ancho completo, que tampoco le sobra:
   «nombre y apellido» es el campo mas largo del formulario. */
.ck-fila-doble:has(.lada-fila) { grid-template-columns: 1fr; }

.dir-seccion { margin-top: clamp(44px, 5vw, 72px); }


/* ------------------------------------------------- mosaico en el teléfono */

@media (max-width: 760px) {
  /* Portada completa arriba y tres cuadradas debajo, en rejilla.
     
     Se probó con `inline-block`, pero eso hereda el espacio en blanco que hay
     entre las etiquetas del HTML: las tres fotos no cabían en la fila, la
     tercera bajaba y quedaba un hueco. Con rejilla el reparto es exacto y no
     depende de cómo esté escrito el marcado.
     
     El reparto de escritorio —una grande y cuatro al lado— deja aquí cinco
     fotos diminutas donde no se distingue nada. */
  .mosaico,
  .mosaico--pocas {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
    gap: 5px;
    aspect-ratio: auto;
    max-height: none;
  }

  /* La portada ocupa las tres columnas. */
  .mosaico-principal {
    grid-column: 1 / -1;
    grid-row: 1;
    aspect-ratio: 4 / 3;
  }

  /* Cuadradas: a este tamaño lo que importa es reconocer el ambiente, no la
     composición, y así llenan la fila sin sobrar ni faltar. */
  .mosaico-chica {
    grid-row: 2;
    aspect-ratio: 1;
  }

  /* La cuarta sobra: con tres queda una fila limpia y completa. */
  .mosaico-chica:nth-of-type(5) { display: none; }

  .mosaico-mas { font-size: 15px; }

  /* Con pocas fotos, las que haya reparten el ancho disponible. */
  .mosaico--pocas { grid-template-columns: repeat(2, 1fr); }
  .mosaico--pocas .mosaico-principal { grid-column: 1 / -1; }
}

/* El contador va en la última foto visible, que cambia según la pantalla. */
.mosaico-mas--movil { display: none; }

@media (max-width: 760px) {
  .mosaico-mas--movil { display: flex; }
  .mosaico-mas--desktop { display: none; }
}

/* -------------------------------------------------------- propietarios */

.prop-cab { padding: clamp(32px, 4.5vw, 64px) 0 clamp(28px, 3.5vw, 48px); }

.prop-tit {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(30px, 4vw, 54px); letter-spacing: -.02em;
  line-height: 1.1; margin: 0 0 18px;
}

.prop-sub {
  font-size: clamp(15px, 1.15vw, 18px); color: var(--texto-2);
  line-height: 1.75; max-width: 40em; margin: 0;
}

.prop-cuerpo {
  display: grid; grid-template-columns: minmax(0, 1fr) 372px;
  gap: clamp(28px, 4vw, 72px); align-items: start;
}

/**
 * Los puntos, numerados.
 *
 * Son ocho bloques seguidos con la misma forma: sin numeración, el ojo pierde
 * la cuenta a mitad y todo se lee como un párrafo largo. El número no informa
 * de nada —nadie va a buscar «el punto 05»—, pero da ritmo y deja ver de un
 * vistazo cuánto queda.
 */

.prop-punto {
  display: flex; gap: 18px;
  padding: 26px 0;
  border-top: 1px solid var(--linea);
}

.prop-punto:first-child { border-top: 0; padding-top: 0; }

.prop-num {
  flex: 0 0 30px;
  font-family: var(--serif);
  font-size: 14px;
  color: var(--texto-3);
  padding-top: 6px;
}

.prop-punto-in { min-width: 0; }

.prop-punto h2 {
  font-family: var(--serif); font-size: clamp(19px, 1.6vw, 24px);
  font-weight: 400; margin: 0 0 10px;
}

.prop-punto p { font-size: 15px; color: var(--texto-2); line-height: 1.75; margin: 0 0 12px; max-width: 44em; }
.prop-punto p:last-child { margin-bottom: 0; }

@media (max-width: 560px) {
  /* En el teléfono el número va más pegado: treinta píxeles de sangría en una
     pantalla de 360 se comen el ancho de la frase. */
  .prop-punto { gap: 12px; }
  .prop-num { flex-basis: 22px; font-size: 12.5px; }
}

@media (max-width: 1080px) {
  .prop-cuerpo { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- páginas */

.paginas {
  display: flex; align-items: center; justify-content: center;
  gap: 4px; flex-wrap: wrap;
  margin-top: clamp(36px, 4.5vw, 64px);
  padding-top: clamp(28px, 3.5vw, 44px);
  border-top: 1px solid var(--linea);
}

.paginas a,
.paginas-actual {
  min-width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 10px;
  font-size: 14.5px;
  border: 1px solid transparent;
  transition: border-color .15s, color .15s, background .15s;
}

.paginas a { color: var(--texto-2); }
.paginas a:hover { border-color: var(--linea-viva); color: var(--texto); }

.paginas-actual {
  background: var(--claro); color: var(--negro);
  font-weight: 500;
}

.paginas-flecha { font-size: 16px; }
.paginas-hueco { color: var(--texto-3); padding: 0 4px; font-size: 14px; }

/* --------------------------------------------------- asesor en el contacto */

.contacto-quien {
  display: flex; align-items: center; gap: 13px;
  margin-bottom: 20px;
}

.contacto-avatar {
  width: 52px; height: 52px; flex: none;
  border-radius: 50%; object-fit: cover;
  background: var(--negro-3);
}

/* Sin foto, las iniciales: mejor que un hueco o una silueta genérica. */
.contacto-avatar--txt {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 19px; color: var(--texto-2);
  border: 1px solid var(--linea);
}

.contacto-quien .contacto-tit { margin: 0 0 3px; font-size: 19px; }
.contacto-quien .contacto-sub { margin: 0; }

/* Cuando hay venta y renta, ambos precios uno junto al otro. */
.ficha-precios { display: flex; align-items: baseline; gap: clamp(20px, 3vw, 44px); flex-wrap: wrap; }
.ficha-precios .ficha-precio { margin: 0; }
.ficha-precio-op {
  display: block; font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--texto-3); margin-top: 4px;
}

/* Precios uno debajo de otro: en la misma línea se leían como un solo importe
   partido en dos. */
.ficha-precios { display: block; }
.ficha-precio-item + .ficha-precio-item { margin-top: 14px; }
.ficha-precio-item .ficha-precio { margin: 0; }
.ficha-precio-op {
  display: block; font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--texto-3); margin-bottom: 2px;
}

.ficha-id {
  font-size: 12.5px; color: var(--texto-3); margin: 8px 0 0;
  letter-spacing: .04em;
}

/* ============================================================================
   Accesibilidad.

   Tres cosas que no se ven pero que deciden si el sitio se puede usar sin
   ratón, sin vista, o con vértigo. Google también las mira para posicionar.
   ========================================================================== */

/* --- El salto al contenido -------------------------------------------------

   Fuera de la pantalla hasta que el tabulador lo alcanza. No se usa
   `display:none` ni `visibility:hidden` a propósito: eso lo sacaría también
   del recorrido del teclado y no serviría para nada.                        */

.saltar {
  position: absolute; left: -9999px; top: 0;
  z-index: 999;
  padding: 14px 22px;
  background: var(--claro); color: var(--negro);
  font-family: var(--sans); font-size: 14px; letter-spacing: .02em;
  text-decoration: none;
}

.saltar:focus {
  left: 50%; transform: translateX(-50%);
  outline: 2px solid var(--negro); outline-offset: -6px;
}

/* Al aterrizar el foco en el contenido, el navegador dibuja un borde alrededor
   de toda la página. Es correcto que el foco esté ahí, pero el recuadro no
   aporta nada.                                                              */
main:focus { outline: none; }

/* --- Foco visible ----------------------------------------------------------

   `:focus-visible` sólo se activa cuando el navegador cree que hace falta:
   con teclado sí, al hacer clic con el ratón no. Así el indicador está
   siempre para quien lo necesita y nunca estorba a quien no.

   El color claro sobre fondo negro pasa el contraste con holgura.           */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--claro);
  outline-offset: 3px;
  border-radius: 1px;
}

/* --- Movimiento reducido ---------------------------------------------------

   Hay quien tiene activado «reducir movimiento» en su sistema porque las
   animaciones le provocan mareo o migraña. No es una preferencia estética:
   es una condición médica, y el sistema operativo ya la comunica.

   Se anula todo salvo los cambios de color, que no producen ese efecto.     */

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

/* ------------------------------------------------- código de país

   El teléfono se parte en dos: el código a la izquierda, el número a la
   derecha. La proporción no es negociable —el código ocupa lo mínimo— porque
   el dato importante es el número.                                          */

.lada-fila { display: flex; gap: 8px; align-items: stretch; }
.lada-fila > input[type="tel"] { flex: 1; min-width: 0; }

.lada { position: relative; flex: 0 0 auto; }

.lada-btn {
  display: flex; align-items: center; gap: 6px;
  height: 100%; padding: 0 11px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--linea);
  color: var(--texto);
  font-family: var(--sans); font-size: 15px;
  cursor: pointer; white-space: nowrap;
  transition: border-color .18s, background .18s;
}

.lada-btn:hover { border-color: var(--linea-viva); background: rgba(255,255,255,.06); }

.lada-bandera { font-size: 16px; line-height: 1; }
.lada-cod { font-variant-numeric: tabular-nums; }
.lada-caret { font-size: 10px; color: var(--texto-3); }

/* El panel flota sobre el formulario: empujarlo hacia abajo movería los campos
   de sitio cada vez que se abre. */
.lada-pop {
  position: absolute; top: calc(100% + 5px); left: 0; z-index: 40;
  width: 290px; max-width: 78vw;
  background: var(--negro-2);
  border: 1px solid var(--linea-viva);
  box-shadow: 0 14px 40px rgba(0,0,0,.55);
}

.lada-busca {
  width: 100%; padding: 11px 13px;
  background: transparent; border: 0;
  border-bottom: 1px solid var(--linea);
  color: var(--texto); font-family: var(--sans); font-size: 14px;
}

.lada-busca:focus { outline: none; border-bottom-color: var(--linea-viva); }
.lada-busca::placeholder { color: var(--texto-3); }

.lada-lista { max-height: 264px; overflow-y: auto; margin: 0; padding: 5px 0; list-style: none; }

.lada-opt {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 9px 13px;
  background: none; border: 0; cursor: pointer;
  color: var(--texto-2); font-family: var(--sans); font-size: 14px; text-align: left;
}

.lada-opt:hover, .lada-opt:focus-visible { background: rgba(255,255,255,.06); color: var(--texto); }
.lada-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lada-cod-l { color: var(--texto-3); font-variant-numeric: tabular-nums; }
.lada-vacio { padding: 15px 13px; color: var(--texto-3); font-size: 13.5px; }

/* ------------------------------------------------- sin zoom al escribir

   Safari en iOS hace zoom automático al enfocar cualquier campo con letra por
   debajo de 16 píxeles. La página se agranda, se descoloca, y al terminar de
   escribir se queda así: quien llenaba un formulario acaba perdido buscando el
   botón de enviar. Es de las cosas que más abandono provocan en móvil.

   La solución no es bloquear el zoom en la etiqueta `viewport` —eso también
   impide ampliar con los dedos, y hay quien lo necesita para leer—. Basta con
   que ningún campo baje de 16 píxeles cuando se toca con el dedo.

   `pointer: coarse` cubre además tabletas y móviles anchos que no entran por
   ancho de pantalla. En escritorio no cambia nada.                          */

@media (max-width: 768px), (pointer: coarse) {
  input,
  select,
  textarea,
  .busca input[type="text"],
  .busca select,
  .campo input,
  .campo textarea,
  .lada-busca,
  [contenteditable="true"] {
    font-size: 16px;
  }
}

/* ------------------------------------------------------------ guardadas

   El corazón vive encima de la foto, no dentro del enlace: un botón dentro de
   un <a> navega al pulsarlo, que es justo lo contrario de lo que se quiere. */

.tarjeta-env { position: relative; }

.fav-btn {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  background: rgba(10,10,12,.55);
  backdrop-filter: blur(6px);
  border: 0; border-radius: 50%;
  color: rgba(255,255,255,.82);
  cursor: pointer;
  transition: background .18s, color .18s, transform .12s;
}

.fav-btn:hover  { background: rgba(10,10,12,.78); color: #fff; }
.fav-btn:active { transform: scale(.9); }

/* Lleno cuando está guardada. El relleno se hace con el mismo trazo para no
   cargar un segundo icono. */
.fav-btn.is-on { color: #fff; }
.fav-btn.is-on svg path { fill: currentColor; }

.cab-fav { display: inline-flex; align-items: center; gap: 7px; }
.cab-fav-n {
  min-width: 18px; padding: 1px 6px; border-radius: 999px;
  background: var(--claro); color: var(--negro);
  font-size: 11px; text-align: center; font-variant-numeric: tabular-nums;
}

/* --- El aviso del segundo favorito --- */

.fav-modal { position: fixed; inset: 0; z-index: 90; display: flex;
  align-items: center; justify-content: center; padding: 20px; }

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

.fav-modal-fondo { position: absolute; inset: 0; background: rgba(0,0,0,.72); }

.fav-modal-caja {
  position: relative; z-index: 1;
  width: 100%; max-width: 430px;
  max-height: 88vh; overflow-y: auto;
  background: var(--negro-2);
  border: 1px solid var(--linea-viva);
  padding: 30px 28px;
}

.fav-modal-x {
  position: absolute; top: 12px; right: 14px;
  background: none; border: 0; color: var(--texto-3);
  font-size: 26px; line-height: 1; cursor: pointer; padding: 4px 8px;
}

.fav-modal-x:hover { color: var(--texto); }

.fav-modal-tit {
  font-family: var(--serif); font-size: 23px; font-weight: 300;
  margin: 0 0 10px; color: var(--texto);
}

.fav-modal-txt {
  font-size: 14px; color: var(--texto-2); line-height: 1.65;
  margin: 0 0 22px;
}

/* Guardar desde la ficha. Discreto, junto a la zona: quien llega aquí ya está
   decidiendo, y no hace falta gritarle. */
.ficha-fav {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 14px 0 0; padding: 9px 16px;
  background: transparent; border: 1px solid var(--linea);
  color: var(--texto-2);
  font-family: var(--sans); font-size: 13.5px; letter-spacing: .02em;
  cursor: pointer;
  transition: border-color .18s, color .18s;
}

.ficha-fav:hover { border-color: var(--linea-viva); color: var(--texto); }
.ficha-fav.is-on { border-color: var(--claro); color: var(--claro); }
.ficha-fav.is-on svg path { fill: currentColor; }

/* El enlace que reabre el formulario desde la página de guardadas. */
.fav-link { color: var(--texto); text-decoration: underline; text-underline-offset: 3px; }
.fav-link:hover { color: var(--claro); }

/* El menú móvil lleva icono y palabra: ahí hay sitio, y una fila con sólo un
   marcador entre seis nombres se leería como un error. */
.cab-movil-fav { display: inline-flex; align-items: center; gap: 9px; }

/* ------------------------------------------------------- baja de avisos

   Página corta y sin distracciones: quien llega aquí quiere resolver una cosa
   y salir. Nada de menú de propiedades ni ofertas de última hora — insistirle a
   alguien que se está yendo es lo que convierte una baja en un reporte de spam. */

.baja-caja { max-width: 520px; }

.baja-txt {
  font-size: 15px; color: var(--texto-2); line-height: 1.7;
  margin: 0 0 8px;
}

.baja-txt strong { color: var(--texto); font-weight: 500; }

.baja-nota {
  font-size: 13px; color: var(--texto-3); line-height: 1.6;
  margin: 22px 0 0;
}

.baja-form { margin-top: 26px; }

.baja-opt {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 15px 17px; margin-bottom: 10px;
  border: 1px solid var(--linea);
  cursor: pointer;
  transition: border-color .18s;
}

.baja-opt:hover { border-color: var(--linea-viva); }
.baja-opt:has(input:checked) { border-color: var(--claro); }

.baja-opt input { margin-top: 3px; flex: 0 0 auto; }
.baja-opt strong { display: block; font-size: 14.5px; color: var(--texto); font-weight: 500; }
.baja-opt em {
  display: block; font-style: normal;
  font-size: 13px; color: var(--texto-3); line-height: 1.55; margin-top: 3px;
}

/* El encabezado de una búsqueda. Discreto: informa a Google y ubica a quien
   llega desde un resultado, pero no compite con las fotos. */
.res-h1 {
  font-family: var(--serif);
  font-size: clamp(20px, 2.2vw, 27px);
  font-weight: 300;
  margin: 0 0 18px;
  color: var(--texto);
}

/* El título de la propiedad, ahora que es el H1 y no el precio. */
.ficha-titulo {
  font-family: var(--serif);
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 300;
  line-height: 1.3;
  margin: 14px 0 4px;
  color: var(--texto);
}

/* ============================================================================
   Los desplegables del sitio.

   Reemplazan al `<select>` nativo, que se pintaba con el estilo del sistema
   operativo y en el teléfono abría la rueda del sistema tapando media pantalla
   —justo cuando hace falta ver contra qué se filtra—.
   ========================================================================== */

.sel { position: relative; }

.sel-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; min-height: 46px; padding: 0 13px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--linea);
  color: var(--texto);
  font-family: var(--sans); font-size: 15px;
  text-align: left; cursor: pointer;
  transition: border-color .18s, background .18s;
}

.sel-btn:hover { border-color: var(--linea-viva); }
.sel.is-abierto .sel-btn { border-color: var(--linea-viva); background: rgba(255,255,255,.06); }

.sel-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel-vacio { color: var(--texto-3); }
.sel.is-lleno .sel-txt { color: var(--texto); }
.sel-flecha { flex: 0 0 auto; font-size: 10px; color: var(--texto-3); }

/* El panel flota: empujarlo hacia abajo movería los campos de sitio cada vez
   que se abre, y con cuatro filtros seguidos eso salta a la vista. */
.sel-pop {
  position: absolute; top: calc(100% + 5px); left: 0; z-index: 45;
  min-width: 100%; max-width: 340px;
  background: var(--negro-2);
  border: 1px solid var(--linea-viva);
  box-shadow: 0 14px 40px rgba(0,0,0,.55);
}

.sel-busca {
  width: 100%; padding: 11px 13px;
  background: transparent; border: 0;
  border-bottom: 1px solid var(--linea);
  color: var(--texto); font-family: var(--sans); font-size: 14px;
}

.sel-busca:focus { outline: none; border-bottom-color: var(--linea-viva); }
.sel-busca::placeholder { color: var(--texto-3); }

.sel-lista { max-height: 290px; overflow-y: auto; margin: 0; padding: 5px 0; list-style: none; }

/* El encabezado de grupo dice de qué nivel es cada opción sin obligar a
   elegirlo primero: quien busca «bosque» ve la colonia y el fraccionamiento
   juntos, y sabe cuál es cuál. */
.sel-grupo {
  padding: 9px 13px 5px;
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--texto-3);
}

.sel-opt {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 13px;
  font-size: 14.5px; color: var(--texto-2);
  cursor: pointer;
}

.sel-opt:hover { background: rgba(255,255,255,.06); color: var(--texto); }
.sel-opt.is-on { color: var(--texto); }

/* La marca sólo aparece en los múltiples: en uno simple, ver una casilla vacía
   junto a cada opción sugiere que se pueden elegir varias. */
.sel-marca { display: none; }

.sel--multi .sel-marca {
  display: block; flex: 0 0 auto;
  width: 15px; height: 15px;
  border: 1px solid var(--linea-viva);
  border-radius: 2px;
  position: relative;
}

.sel--multi .sel-opt.is-on .sel-marca { background: var(--claro); border-color: var(--claro); }

.sel--multi .sel-opt.is-on .sel-marca::after {
  content: ''; position: absolute; left: 4px; top: 1px;
  width: 4px; height: 8px;
  border: solid var(--negro); border-width: 0 1.6px 1.6px 0;
  transform: rotate(45deg);
}

/* --- El precio, con dos campos --- */

.filtro-precio-in { display: flex; align-items: center; gap: 8px; }
.filtro-precio-in input { flex: 1; min-width: 0; }
.filtro-precio-sep { color: var(--texto-3); flex: 0 0 auto; }

.filtro-acciones { display: flex; align-items: flex-end; gap: 14px; }
.filtro-limpiar { font-size: 13.5px; color: var(--texto-3); white-space: nowrap; }
.filtro-limpiar:hover { color: var(--texto); }

/* --- El pie, con iconos --- */

.pie-col--contacto a,
/* La dirección se ve igual que los enlaces que tiene al lado.

   Es un `<span>` y los demás son `<a>`, así que no heredaba el tamaño que
   estaba declarado sólo para los enlaces: salía con la letra del pie y en un
   gris más apagado, y en una columna de cinco líneas eso salta a la vista. */
.pie-dir {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 14px;
  color: var(--texto-2);
  line-height: 1.55;
}

.pie-ico { flex: 0 0 auto; margin-top: 2px; opacity: .7; }
.pie-redes { display: flex; gap: 14px; margin-top: 4px; }
.pie-redes a { padding: 4px 0; }
.pie-redes .pie-ico { margin-top: 0; width: 17px; height: 17px; }

@media (max-width: 700px) {
  .sel-pop { max-width: none; right: 0; }
}

/* ---- Ajustes de la ronda de filtros ------------------------------------- */

/* El selector, con ancho propio.

   Antes heredaba el de su columna en la barra y quedaba estrecho, y al abrirse
   la lista se hacía un chorizo vertical. Ahora el botón tiene un mínimo digno y
   el panel se ensancha en dos columnas cuando hay sitio. */

/**
 * Los anchos de la barra, sólo en escritorio.
 *
 * Van dentro de una consulta de ancho mínimo a propósito. Estas reglas se
 * escribieron al final del archivo, y sin la consulta ganaban sobre las de
 * móvil —que están cientos de líneas más arriba— aunque aquéllas estuvieran en
 * su propia media query: a igual especificidad manda la que va después.
 *
 * Ése era el motivo de que en el teléfono Operación saliera enorme y Ubicación
 * diminuta.
 */
.busca-in .sel { min-width: 0; }

@media (min-width: 861px) {
  /* Operación tiene dos opciones y una palabra corta; Ubicación puede llevar
     «Bosque de las Lomas +3». Con el mismo ancho, la primera sobra y le roba
     sitio al campo de texto, que es el que más lo necesita. */
  .busca-in .sel:nth-of-type(1) { flex: 0 0 128px; }
  .busca-in .sel:nth-of-type(2) { flex: 0 1 200px; }
  .busca-in .busca-campo { flex: 1 1 auto; min-width: 0; }
  .busca-in .sel-pop { width: 340px; }
}

.sel-lista { max-height: 320px; }

@media (min-width: 900px) {
  /**
   * Dos columnas con rejilla, no con `columns`.
   *
   * `columns` reparte el contenido en un flujo continuo, y dentro de una caja
   * con desplazamiento eso descoloca los grupos largos: las últimas categorías
   * —colonia y fraccionamiento, las de más opciones— se pintaban partidas y sin
   * su encabezado. La rejilla coloca cada opción en su celda y el encabezado
   * ocupa la fila entera sin ambigüedad.
   */
  .sel--multi .sel-lista {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-content: start;
  }

  .sel--multi .sel-grupo { grid-column: 1 / -1; }
  .sel--multi .sel-pop { width: 500px; }
}

/* --- Los filtros activos --- */

.busca-activos {
  max-width: var(--ancho); margin: 0 auto;
  padding: 0 var(--lado) 18px;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}

.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--linea);
  border-radius: 999px;
  color: var(--texto-2);
  font-family: var(--sans); font-size: 13px;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}

.chip:hover { border-color: var(--linea-viva); color: var(--texto); }
.chip-x { font-size: 15px; line-height: 1; color: var(--texto-3); }
.chip:hover .chip-x { color: var(--texto); }

.chip--limpiar { background: none; border-style: dashed; color: var(--texto-3); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* --- El pie, alineado --- */

/* Con `flex-wrap` las columnas se escalonaban al envolver: cada una empezaba
   donde acababa la anterior y los títulos quedaban a distinta altura. Con
   rejilla, todas arrancan en la misma línea. */
.pie-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(26px, 4vw, 56px);
  align-items: start;
}

@media (max-width: 560px) {
  /* Dos columnas en el teléfono: una sola hace un pie larguísimo, y cuatro no
     caben sin partir los nombres. */
  .pie-cols { grid-template-columns: 1fr 1fr; gap: 26px 20px; }
  .pie-col--contacto { grid-column: 1 / -1; }
  .busca-in .sel-pop { width: auto; left: 0; right: 0; }
}

/* El símbolo de moneda, pegado a su campo. */
.filtro-precio-in { align-items: center; }
.filtro-moneda {
  flex: 0 0 auto;
  font-size: 14px; color: var(--texto-3);
  font-variant-numeric: tabular-nums;
}
.filtro-precio-in input { font-variant-numeric: tabular-nums; }

/* El nivel de cada sugerencia: «Bosque Real» existe como colonia y como
   fraccionamiento, y sin decirlo las dos filas se leen idénticas. */
.sug-nivel {
  margin-left: 8px;
  font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--texto-3);
}

/* El botón del selector no cambia de ancho al elegir varias opciones.

   El nombre se recorta dentro del espacio que ya tiene; el contador y la flecha
   se quedan fijos a la derecha. Antes iban en el mismo texto, así que el «+3»
   alargaba el contenido, el botón crecía y la barra entera se recorría al
   marcar la segunda opción. */

.sel-btn { overflow: hidden; }

.sel-txt {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sel-mas {
  flex: 0 0 auto;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
  font-size: 11.5px;
  color: var(--texto-2);
  font-variant-numeric: tabular-nums;
}

.sel-flecha { flex: 0 0 auto; }

/* Los selectores de la barra, con ancho inamovible.

   El intento anterior separaba el contador del nombre, y aun así algo se movía.
   Esto lo fija por la vía dura: los dos botones no crecen ni encogen, y su
   contenido no puede desbordarlos.

   `flex: 0 0` en vez de `0 1`: con `shrink: 1`, un contenido más largo puede
   arrastrar al elemento aunque tenga base fija. */

@media (min-width: 861px) {
  .busca-in .sel:nth-of-type(1) { flex: 0 0 128px !important; width: 128px; }
  .busca-in .sel:nth-of-type(2) { flex: 0 0 210px !important; width: 210px; }
}

@media (max-width: 860px) {
  .busca-in .sel { flex: 0 0 calc(50% - 5px) !important; width: calc(50% - 5px); }
}

.busca-in .sel-btn { width: 100%; max-width: 100%; overflow: hidden; }
.busca-in .sel-btn > * { pointer-events: none; }

/* Guardar y Compartir, uno junto al otro.

   Misma forma para los dos: son la misma clase de acción y jerarquizar uno
   sobre el otro sugeriría que el sitio prefiere que hagas uno. No es el caso. */

.ficha-acciones { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 0; }
.ficha-acciones .ficha-fav { margin: 0; }

.ficha-compartir.is-ok { border-color: var(--claro); color: var(--claro); }

@media (max-width: 560px) {
  /* Con texto también en el teléfono. Un icono solo obliga a interpretarlo, y
     dos iconos seguidos sin nombre se leen como una barra de herramientas: no
     queda claro que uno guarda y el otro reparte. */
  .ficha-acciones .ficha-fav { flex: 1 1 0; justify-content: center; }
}

/* Copiar el código, junto al ID.

   Discreto a propósito: es una comodidad, no una llamada a la acción. Si
   pesara igual que Guardar o Compartir competiría con ellos por la atención. */

.ficha-id { display: inline-flex; align-items: center; gap: 7px; }

.ficha-id-copiar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; padding: 0;
  background: none; border: 0; border-radius: 4px;
  color: var(--texto-3); cursor: pointer;
  transition: color .15s, background .15s;
}

.ficha-id-copiar:hover { color: var(--texto); background: rgba(255,255,255,.07); }

/* Al copiar, el icono se pone claro un momento: es la única confirmación que
   cabe sin mover nada de sitio. */
.ficha-id-copiar.is-ok { color: var(--claro); }

/* ============================================================================
   Amenidades, agrupadas por categoría.

   Antes salían todas revueltas en una sola lista. En una propiedad con veinte,
   «Cisterna» quedaba junto a «Alberca» sin distinción, y eso no se lee: se
   salta el bloque entero.

   Con título por grupo, la vista puede saltar directamente a la parte que le
   interesa —lo recreativo, lo de dentro, las reglas— en vez de recorrerlo todo.
   ========================================================================== */

.ficha-amen { margin: 34px 0 0; display: grid; gap: 26px; }

.amen-tit {
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--texto-3); font-weight: 400;
  margin: 0 0 13px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--linea);
}

.amen-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px 22px;
}

@media (max-width: 560px) {
  .amen-lista { grid-template-columns: 1fr 1fr; gap: 9px 14px; }
}


/* ============================================================================
   La descripción, con «Ver descripción completa».

   El texto completo está siempre en el HTML —Google lo recibe entero— y aquí
   sólo se limita la altura. Sin JavaScript se ve todo, que es el fallo correcto:
   más vale una descripción larga que una cortada sin forma de abrirla.
   ========================================================================== */

.ficha-desc-caja { max-width: 44em; }

/* El recorte, sólo mientras la caja está cerrada y hay JavaScript.

   `is-js` la pone el propio script al arrancar: sin él, esta regla no aplica y
   el texto se ve completo. */
.ficha-desc-caja.es-recortable.is-js:not(.is-abierta) .ficha-desc {
  display: -webkit-box;
  -webkit-line-clamp: var(--lineas, 6);
  -webkit-box-orient: vertical;
  overflow: hidden;
  position: relative;
}

/* Un degradado sobre la última línea: el corte limpio parece que el texto
   acaba ahí, y entonces nadie busca el botón. Difuminado se entiende que hay
   más antes de leer nada. */
.ficha-desc-caja.es-recortable.is-js:not(.is-abierta)::after {
  content: '';
  position: absolute; left: 0; right: 0;
  height: 3.4em;
  margin-top: -3.4em;
  background: linear-gradient(to bottom, transparent, var(--negro));
  pointer-events: none;
}

.ficha-desc-caja.es-recortable { position: relative; }

.ficha-desc-mas {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 14px; padding: 0;
  background: none; border: 0;
  color: var(--texto);
  font-family: var(--sans); font-size: 13.5px; letter-spacing: .02em;
  cursor: pointer;
  border-bottom: 1px solid var(--linea-viva);
  padding-bottom: 3px;
  transition: color .18s, border-color .18s;
}

.ficha-desc-mas:hover { color: var(--claro); border-color: var(--claro); }
.ficha-desc-mas svg { transition: transform .25s ease; }

/* La flecha gira al abrir: dice que el botón es el mismo y que se puede
   cerrar, sin necesidad de cambiar el texto dos veces. */
.is-abierta .ficha-desc-mas svg { transform: rotate(180deg); }

/* Los enlaces de la página no encontrada. En fila, separados: quien llegó aquí
   se equivocó de dirección y necesita opciones claras, no un párrafo. */
.nf-enlaces { display: flex; flex-wrap: wrap; gap: 26px; justify-content: center; margin: 0; }

/* Las cifras en Propietarios, bajo el titular. */
.prop-cifras {
  margin: 20px 0 0;
  font-size: 14.5px;
  color: var(--texto-3);
  line-height: 1.7;
}

.prop-cifras strong { color: var(--texto); font-weight: 400; }

/* La descripción de la zona, al final.

   Arriba empujaba el inventario hacia abajo justo cuando la persona acaba de
   llegar: quien entra a Polanco quiere ver casas de Polanco, no leer sobre
   Polanco. Aquí cumple igual su función para Google y la lee quien ha bajado
   hasta el final, que es quien tiene interés de verdad. */

.zona-sobre { border-top: 1px solid var(--linea); }

.zona-sobre-tit {
  font-family: var(--serif);
  font-size: clamp(18px, 2vw, 23px);
  font-weight: 300;
  color: var(--texto);
  margin: 0 0 14px;
}

.zona-sobre .zona-txt { max-width: 46em; margin: 0; }

/* ============================================================================
   Sin transiciones en pantallas táctiles.

   En un teléfono no existe «pasar por encima»: al tocar, el navegador simula
   un hover que se queda pegado hasta que se toca otra cosa. Con una transición
   de por medio, ese resaltado se queda encendido mientras la página navega y
   se percibe como si el botón se trabara.

   `hover: none` distingue un dedo de un ratón. Ahí la respuesta al toque tiene
   que ser instantánea: cualquier animación en un toque se lee como retraso, no
   como cuidado.

   Los efectos de hover siguen intactos en escritorio, que es donde tienen
   sentido.
   ========================================================================== */

@media (hover: none) {
  .baja-opt,
  .btn-principal,
  .chip,
  .fav-btn,
  .ficha-desc-mas,
  .ficha-id-copiar,
  .ficha-fav,
  .lada-btn,
  .sel-btn,
  .visor-cerrar,
  .zona-enlace,
  .otras-lista a,
  .sug-fila {
    transition: none;
  }
}

/* ============================================================================
   Nosotros.

   Cada sección tiene su propia forma. Antes eran cuatro bloques idénticos
   —título, párrafos, título, párrafos— y eso se lee como un documento, no como
   una página: el ojo no encuentra dónde mirar porque todo pesa lo mismo.
   ========================================================================== */

/* --- La apertura --- */

.nos-abre { padding: clamp(40px, 6vw, 80px) 0 clamp(44px, 5vw, 68px); }

.nos-marca {
  display: block;
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--texto-3);
  margin-bottom: clamp(18px, 2.5vw, 26px);
}

.nos-h1 {
  font-family: var(--serif);
  font-size: clamp(34px, 5.5vw, 62px);
  font-weight: 400;
  line-height: 1.08;
  color: var(--texto);
  margin: 0;
}

.nos-lead {
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.8;
  color: var(--texto-2);
  max-width: 34em;
  margin: clamp(22px, 3vw, 30px) 0 0;
}

/* --- Las cifras, sobre su propia franja ---

   Un fondo distinto las separa del texto que las rodea: así se leen como dato
   duro y no como un párrafo más con números dentro. */

.nos-cifras-franja {
  padding: clamp(30px, 4vw, 46px) 0;
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
  background: linear-gradient(135deg, rgba(255,255,255,.035), transparent);
}

.nos-cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(22px, 3vw, 44px);
}

.nos-cifra { display: flex; flex-direction: column; gap: 7px; }

.nos-cifra-n {
  font-family: var(--serif);
  font-size: clamp(27px, 3.4vw, 42px);
  font-weight: 400;
  line-height: 1;
  color: var(--texto);
}

.nos-cifra-q { font-size: 11.5px; line-height: 1.5; color: var(--texto-3); }

/* --- Las secciones en dos columnas ---

   El título a la izquierda y el contenido a la derecha. Así el ojo sabe dónde
   empieza cada sección sin un encabezado idéntico cada tres párrafos. */

.nos-doble { padding: clamp(44px, 6vw, 84px) 0; }
.nos-doble--linea { border-top: 1px solid var(--linea); }

.nos-doble-in {
  display: grid;
  grid-template-columns: 1fr 1.7fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}

.nos-lado {
  font-family: var(--serif);
  font-size: clamp(23px, 2.6vw, 32px);
  font-weight: 400;
  line-height: 1.18;
  color: var(--texto);
  margin: 0;
}

/* La numeración da ritmo a una lista que si no sería otro muro de texto. */

.nos-item { display: flex; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--linea); }
.nos-item:first-child { padding-top: 0; }
.nos-item:last-child { border-bottom: 0; padding-bottom: 0; }

.nos-num {
  flex: 0 0 26px;
  font-family: var(--serif);
  font-size: 13px;
  color: var(--texto-3);
  padding-top: 3px;
}

.nos-item-tit {
  font-size: 15px;
  font-weight: 400;
  color: var(--texto);
  margin: 0 0 5px;
}

.nos-item-txt {
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--texto-2);
  margin: 0 0 16px;
  max-width: 42em;
}

.nos-item-txt:last-child { margin-bottom: 0; }
.nos-item-tit + .nos-item-txt { margin-bottom: 0; }
.nos-item-txt--intro { color: var(--texto); }

.nos-lista { margin: 0 0 22px; padding: 0; list-style: none; }

.nos-lista li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 11px;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--texto-2);
  max-width: 42em;
}

.nos-lista li::before {
  content: ''; position: absolute; left: 0; top: 12px;
  width: 6px; height: 1px; background: var(--texto-3);
}

/* --- El cierre --- */

.nos-cierre {
  border-top: 1px solid var(--linea);
  padding: clamp(50px, 7vw, 96px) 0;
  text-align: center;
}

.nos-frase {
  font-family: var(--serif);
  font-size: clamp(23px, 3.2vw, 40px);
  font-weight: 400;
  line-height: 1.4;
  color: var(--texto);
  margin: 0;
}

.nos-cta { margin: clamp(28px, 3.5vw, 40px) 0 0; }

@media (max-width: 760px) {
  /* En el teléfono, el título encima del contenido: dos columnas de 160px cada
     una parten las frases en tres palabras por línea. */
  .nos-doble-in { grid-template-columns: 1fr; gap: 22px; }
  .nos-lado br { display: none; }
  .nos-h1 br { display: none; }
}

/* ============================================================================
   Las fotografías de Nosotros.

   A lo ancho de la pantalla y sin marco. Es una firma cuyo argumento central es
   que la imagen vende, y hasta ahora esa página no tenía ni una fotografía.

   Sin borde ni sombra: el marco es lo que hace que una foto parezca una
   ilustración de catálogo en vez de una obra.
   ========================================================================== */

.nos-foto { margin: 0; }

.nos-foto img {
  width: 100%;
  height: clamp(260px, 46vw, 620px);
  object-fit: cover;
  display: block;
}

/* El pie, alineado con el resto del texto de la página y no bajo la imagen a
   lo ancho: leído en el margen se entiende como comentario, no como titular. */
.nos-pie {
  max-width: var(--ancho);
  margin: 12px auto 0;
  padding: 0 var(--lado);
  font-size: 12.5px;
  letter-spacing: .02em;
  color: var(--texto-3);
}

/* ============================================================================
   Las imágenes de Propietarios.
   ========================================================================== */

/* --- La portada, con el titular encima ---

   El texto va sobre la parte de abajo con un degradado detrás: sin él, un
   titular claro sobre una fachada clara no se lee, y no se puede controlar qué
   fotografía sube el cliente. */

.prop-cab--foto {
  position: relative;
  padding: 0;
  min-height: clamp(400px, 62vh, 620px);
  display: flex; align-items: flex-end;
}

.prop-portada-img { position: absolute; inset: 0; }

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

.prop-cab--foto::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    var(--negro) 6%,
    rgba(10,10,12,.82) 32%,
    rgba(10,10,12,.30) 62%,
    rgba(10,10,12,.15));
}

.prop-cab--foto .contenido {
  position: relative; z-index: 1;
  padding-bottom: clamp(34px, 4.5vw, 64px);
  padding-top: clamp(90px, 12vw, 150px);
}

/* --- La imagen junto al texto ---

   Dentro de la columna, no a lo ancho: a lo ancho taparía el formulario, que
   es lo que convierte. */

.prop-foto-img { display: block; margin: 18px 0 0; }

.prop-foto-img img {
  width: 100%;
  height: clamp(200px, 24vw, 330px);
  object-fit: cover;
  border-radius: 3px;
  display: block;
}

/* --- Las operaciones cerradas --- */

.ops { border-top: 1px solid var(--linea); padding: clamp(44px, 6vw, 84px) 0; }

.ops-tit {
  font-family: var(--serif);
  font-size: clamp(21px, 2.4vw, 30px);
  font-weight: 400;
  color: var(--texto);
  margin: 0 0 clamp(24px, 3vw, 36px);
}

.ops-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(16px, 2.5vw, 28px);
}

.op { margin: 0; }

.op img {
  width: 100%;
  height: clamp(200px, 22vw, 300px);
  object-fit: cover;
  border-radius: 3px;
  display: block;
}

.op-pie { display: flex; flex-direction: column; gap: 3px; margin-top: 12px; }
.op-zona { font-size: 14.5px; color: var(--texto); }
.op-anio { font-size: 12px; color: var(--texto-3); }

@media (max-width: 760px) {
  .prop-cab--foto { min-height: clamp(340px, 55vh, 480px); }
}

/* ============================================================================
   Contacto.

   La columna izquierda era un titular, una frase y dos enlaces sueltos: media
   pantalla vacía junto a un formulario. Ahora lleva las tres vías de contacto,
   la dirección y las redes — que es lo que alguien busca cuando entra aquí.
   ========================================================================== */

.cto-h1 {
  font-family: var(--serif);
  font-size: clamp(30px, 4vw, 50px);
  font-weight: 400;
  line-height: 1.1;
  color: var(--texto);
  margin: 0 0 18px;
}

.cto-lead {
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.75;
  color: var(--texto-2);
  max-width: 32em;
  margin: 0 0 clamp(32px, 4vw, 44px);
}

/* --- Las tres vías ---

   Cada una con su icono y en dos líneas: qué es arriba, el dato abajo. Un
   número de teléfono suelto no dice si es para llamar o para WhatsApp. */

.cto-vias { display: flex; flex-direction: column; gap: 2px; }

.cto-via {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 16px;
  border-radius: 3px;
  background: linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.012));
  transition: background .25s ease;
}

@media (hover: hover) {
  .cto-via:hover { background: linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,.03)); }
}

@media (hover: none) {
  .cto-via { transition: none; }
  .cto-via:active { background: linear-gradient(135deg, rgba(255,255,255,.11), rgba(255,255,255,.04)); }
}

.cto-via > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cto-ico { flex: 0 0 auto; opacity: .7; }

.cto-via-que {
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--texto-3);
}

.cto-via-dato { font-size: 15px; color: var(--texto); }

/* --- La oficina --- */

.cto-oficina { margin-top: clamp(30px, 4vw, 42px); }

.cto-oficina-tit {
  display: block;
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--texto-3);
  margin-bottom: 9px;
}

.cto-oficina-dir {
  font-size: 15px; line-height: 1.7; color: var(--texto-2);
  margin: 0; max-width: 24em;
}

/* --- Las redes --- */

.cto-redes { display: flex; gap: 18px; margin-top: clamp(28px, 3.5vw, 38px); }
.cto-redes a { padding: 5px 0; color: var(--texto-3); transition: color .2s; }

@media (hover: hover) { .cto-redes a:hover { color: var(--texto); } }
@media (hover: none)  { .cto-redes a { transition: none; } }

.cto-redes .cto-ico { width: 19px; height: 19px; opacity: 1; }

/* La rejilla de contacto: texto a la izquierda, formulario a la derecha.

   Estaba escrita en línea en el HTML, así que ninguna consulta de ancho podía
   tocarla: en un teléfono la columna del formulario se mantenía en 372px fijos
   y aplastaba la otra hasta encimarse. */

.cto-cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 372px;
  gap: clamp(28px, 4vw, 72px);
  align-items: start;
}

@media (max-width: 1080px) {
  /* Una columna, y el formulario debajo: quien llega a contacto ya decidió
     escribir, así que leer primero y escribir después es el orden correcto. */
  .cto-cuerpo { grid-template-columns: 1fr; gap: 34px; }
}

/* El botón de WhatsApp del pie: parece un enlace más, pero abre el formulario.

   Tiene que verse igual que sus vecinos —si destacara, se leería como un
   anuncio en vez de como una vía de contacto más. */

.pie-wa {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 0; background: none; border: 0;
  font-family: inherit; font-size: 14px; color: var(--texto-2);
  cursor: pointer; text-align: left;
}

@media (hover: hover) { .pie-wa:hover { color: var(--texto); } }

/* El de contacto es un botón dentro de una lista de enlaces: se le quita todo
   lo que un botón trae de fábrica para que no desentone. */
button.cto-via {
  border: 0; font-family: inherit; text-align: left; cursor: pointer; width: 100%;
}

/* ============================================================================
   El directorio de zonas.
   ========================================================================== */

/* --- La apertura, con peso de portada ---

   Antes usaba el estilo genérico de sección: el mismo tamaño que los títulos de
   más abajo, así que la página abría sin jerarquía y el ojo no sabía dónde
   empezar. */

.zdir-abre { padding: clamp(36px, 5vw, 72px) 0 clamp(30px, 4vw, 52px); }

.zdir-h1 {
  font-family: var(--serif);
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 400;
  line-height: 1.08;
  color: var(--texto);
  margin: 0 0 20px;
}

.zdir-lead {
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.75;
  color: var(--texto-2);
  max-width: 40em;
  margin: 0;
}

/* Los títulos de las tres secciones, iguales entre sí y más discretos que el
   titular: son separadores, no encabezados que compitan con la apertura. */
.zdir-seccion-tit {
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--texto-3);
  margin: 0 0 clamp(16px, 2vw, 22px);
}

/* --- Las zonas con fotografía ---

   La imagen sale del inventario: la propiedad más cara publicada en esa zona.
   Va muy oscurecida para que el nombre siga siendo lo que se lee primero —una
   foto a plena luz convertiría el directorio en una galería y el nombre en un
   pie de foto. */

.dir-zona--foto { min-height: 148px; display: flex; align-items: flex-end; }

.dir-zona-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .30;
  transition: opacity .35s ease, transform .5s ease;
}

.dir-zona--foto .dir-zona-nom { position: relative; z-index: 1; }

@media (hover: hover) {
  /* Al pasar por encima la foto se aviva y se acerca un punto: es lo que hace
     que se sienta viva sin que el movimiento distraiga. */
  .dir-zona--foto:hover .dir-zona-img { opacity: .48; transform: scale(1.04); }
}

@media (hover: none) { .dir-zona-img { transition: none; } }

/* --- El remate --- */

.zdir-cierre {
  border-top: 1px solid var(--linea);
  padding: clamp(44px, 6vw, 80px) 0;
  text-align: center;
}

.zdir-cierre-txt {
  font-family: var(--serif);
  font-size: clamp(20px, 2.4vw, 30px);
  font-weight: 400;
  line-height: 1.45;
  color: var(--texto);
  margin: 0;
}

.zdir-cierre-cta {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(18px, 3vw, 32px);
  flex-wrap: wrap;
  margin: clamp(26px, 3.5vw, 36px) 0 0;
}

/* El botón, a su ancho.

   `.btn-principal` nace con `width: 100%` porque vive dentro de un formulario
   estrecho, donde ocupar toda la columna es lo correcto. Suelto en el centro de
   una página de 1440 píxeles, ese mismo ancho lo convierte en una barra. */
.zdir-cierre-cta .btn-principal,
.nos-cta .btn-principal {
  width: auto;
  padding: 15px 34px;
  margin-top: 0;
}