/* tarjeta-propiedad.css — la tarjeta 3:4 que se voltea. rotateY() con backface-visibility: hidden;
   preserve-3d en el interior y perspective en el padre (.carrusel__item / .ficha__otra). */
.tarjeta {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--radio-lg);
  isolation: isolate;
}
.tarjeta__interior {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transform-style: preserve-3d;
  transition: transform var(--mov-lento) var(--curva);
}
.tarjeta--volteada .tarjeta__interior { transform: rotateY(180deg); }

.tarjeta__cara {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  background: var(--kv-bruma);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.tarjeta__cara--reverso { transform: rotateY(180deg); color: var(--kv-nube); }

/* Frente: la foto es la protagonista */
.tarjeta__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
}
.tarjeta__degradado { position: absolute; inset: 0; background: var(--kv-degradado-foto); }
.tarjeta__etiqueta {
  position: absolute;
  top: var(--esp-4);
  left: var(--esp-4);
  padding: var(--esp-1) var(--esp-3);
  border-radius: var(--radio-pill);
  background: var(--kv-lino-velo);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--kv-tinta);
  font-size: var(--txt-xs);
  font-weight: 600;
}
.tarjeta__pie {
  position: absolute;
  left: var(--esp-5);
  right: var(--esp-5);
  bottom: var(--esp-5);
  display: grid;
  gap: var(--esp-1);
  color: var(--kv-nube);
}
.tarjeta__ciudad { font-size: var(--txt-sm); font-weight: 500; }
.tarjeta__precio {
  font-size: var(--txt-xl);
  font-weight: 600;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
/* Botón de volteo para teclado: invisible hasta que recibe foco, así el frente sigue limpio */
.tarjeta__voltear {
  position: absolute;
  right: var(--esp-3);
  bottom: var(--esp-3);
  z-index: 2;
  width: var(--toque-min);
  height: var(--toque-min);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--kv-lino-velo);
  color: var(--kv-tinta);
  opacity: 0;
  pointer-events: none;
}
.tarjeta__voltear svg { width: 20px; height: 20px; }
.tarjeta__voltear:focus-visible { opacity: 1; pointer-events: auto; border-radius: 50%; }

/* Reverso: la misma foto desenfocada, el velo y el texto */
.tarjeta__fondo {
  position: absolute;
  inset: -10%;
  width: 120%;
  height: 120%;
  object-fit: cover;
  filter: blur(24px) saturate(.85);
}
.tarjeta__velo { position: absolute; inset: 0; background: var(--kv-velo-tarjeta); }
.tarjeta__contenido {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--esp-3);
  padding: var(--esp-6) var(--esp-5);
}
.tarjeta__nombre { font-size: var(--txt-xl); color: var(--kv-nube); }
/* Sin recorte: el resumen se lee completo. Se mantiene corto desde los datos
   (propiedades.js), no cortándolo aquí — un texto cortado con «…» no dice nada. */
.tarjeta__resumen {
  font-size: var(--txt-sm);
  line-height: 1.5;
}
.tarjeta__datos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2) var(--esp-4);
  padding-top: var(--esp-3);
  border-top: 1px solid var(--kv-nube-velo);
  font-size: var(--txt-xs);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
/* CTA ligero: texto con flecha, no botón sólido */
.tarjeta__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  align-self: flex-start;
  min-height: var(--toque-min);
  margin-top: var(--esp-2);
  padding-inline: var(--esp-4);
  border-radius: var(--radio-md);
  /* Ámbar sólido, no texto con flecha: sobre la foto desenfocada el enlace de texto se perdía
     y es el paso que lleva a la ficha. Texto oscuro encima, como todo ámbar. (Carlos, 23 sep) */
  background: var(--kv-ambar);
  color: var(--kv-tinta);
  font-size: var(--txt-sm);
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--sombra-1);
  transition: background-color var(--mov-rapido) var(--curva), box-shadow var(--mov-rapido) var(--curva);
}
.tarjeta__cta:hover { background: var(--kv-ambar-profundo); color: var(--kv-tinta); text-decoration: none; box-shadow: var(--sombra-2); }
.tarjeta__cta:focus-visible { box-shadow: 0 0 0 2px var(--kv-tinta), 0 0 0 5px var(--kv-nube); }
.tarjeta__cta-flecha { width: 18px; height: 18px; transition: transform var(--mov-rapido) var(--curva); }
.tarjeta__cta:hover .tarjeta__cta-flecha { transform: translateX(4px); }