/* Tarjeta de propiedad. Vive aparte porque la usan el listado y el bloque de
   similares de la ficha: si se duplicara, un dia dejarian de verse igual. */

/* --- Rejilla de tarjetas --- */
.rejilla {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 28px 24px;
}
.tarjeta-prop { min-width: 0; }
.tarjeta-prop a { text-decoration: none; color: inherit; display: block; }

.tarjeta-prop .foto {
  position: relative; aspect-ratio: 3 / 2; overflow: hidden;
  background: var(--superficie); border-radius: 2px;
}
.tarjeta-prop .foto img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s ease;
}
.tarjeta-prop a:hover .foto img { transform: scale(1.04); }

.pastilla {
  position: absolute; top: 12px; left: 12px;
  background: var(--cta-fondo); color: var(--cta-texto);
  font-size: 9px; letter-spacing: .18em; text-transform: uppercase;
  padding: 6px 11px;
}
.nfotos {
  position: absolute; bottom: 12px; right: 12px;
  background: rgba(10,10,10,.72); color: #FFFFFF;
  font-size: 10px; letter-spacing: .06em; padding: 5px 9px;
  font-variant-numeric: tabular-nums;
}

.cuerpo-tarjeta { padding: 14px 2px 0; }
.precio-tarjeta {
  font-family: var(--display); font-weight: 300;
  font-size: 22px; line-height: 1.1; letter-spacing: .01em;
  margin: 0; font-variant-numeric: tabular-nums;
}
.precio-tarjeta small { font-size: 12px; color: var(--apagado); letter-spacing: .04em; }
.tipo-tarjeta {
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--apagado); margin: 8px 0 0;
}
.zona-tarjeta { font-size: 15px; color: var(--grafito); margin: 4px 0 0; }
.datos-tarjeta { font-size: 13px; color: var(--apagado); margin: 6px 0 0; }