/* ════════════════════════════════════════════ Templum — Ficha de inmueble ══
   Plantilla de una propiedad. Las trece fichas comparten esta hoja: lo que
   cambia entre una y otra es el contenido, nunca el CSS.                   */

/* ----------------------------------------------------------- Migas de pan */
.migas {
  padding-top: calc(var(--barra) + var(--s-4));
  font-family: var(--sans); font-size: var(--t-cejilla); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--marfil-2);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.migas a { color: var(--marfil-2); text-decoration: none; }
.migas a:hover { color: var(--oro); }
.migas .sep { width: 4px; height: 4px; transform: rotate(45deg); background: var(--oro); flex: none; }
.migas [aria-current] { color: var(--oro-claro); }

/* --------------------------------------------------------------- Cabecera */
.ficha-cabecera { padding: var(--s-5) 0 var(--s-6); }
.ficha-cabecera .titulo { margin-top: var(--s-3); }
.ficha-cabecera .ubicacion {
  font-family: var(--sans); font-size: var(--t-cejilla); font-weight: 600;
  letter-spacing: var(--track-cejilla); text-transform: uppercase;
  color: var(--oro);
  display: flex; align-items: center; gap: 12px;
}
.ficha-cabecera .ubicacion::before {
  content: ""; width: 34px; height: 1px; background: var(--oro); flex: none;
}

/* El precio es el dato que se busca primero. Va en Playfair, grande y en oro
   grabado: es la cifra de la casa, no una etiqueta de comercio. */
.precio {
  margin-top: var(--s-4);
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
}
.precio b {
  font-family: var(--serif); font-size: clamp(2rem, 4.4vw, 3.2rem);
  font-weight: 700; line-height: 1;
  background: var(--acabado-oro);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.precio span {
  font-family: var(--sans); font-size: var(--t-cejilla); font-weight: 600;
  letter-spacing: var(--track-cejilla); text-transform: uppercase;
  color: var(--marfil-2);
}

/* ------------------------------------------------------------- Fotografía */
.ficha-marco {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  /* Tope de altura: a 16/10 y ancho completo, en un monitor ancho el marco
     se comía dos tercios de la primera pantalla. Con foto daría igual —sería
     la foto—, pero vacío es un hueco enorme antes de llegar al primer dato.
     La proporción se mantiene, así que cuando entre la fotografía encaja. */
  max-height: 62vh;
  border: 1px solid var(--oro-linea);
  background:
    linear-gradient(148deg, rgba(201, 162, 75, .17) 0%,
      rgba(201, 162, 75, .05) 34%, rgba(10, 9, 8, 0) 66%),
    linear-gradient(180deg, #1b1710 0%, #12100c 100%);
}
.ficha-marco img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ficha-marco .sello {
  position: absolute; right: 22px; bottom: 16px;
  font-family: var(--serif); font-size: 4rem; font-weight: 700; line-height: 1;
  color: var(--oro); opacity: .22;
}

/* ---------------------------------------------------------------- Galería
   Portada grande y una tira de miniaturas debajo. No hay ventana emergente
   a propósito: la foto se cambia dentro del mismo marco, así que nada tapa
   la ficha técnica ni hay que cerrar nada para volver.                     */
.galeria { display: grid; gap: var(--s-3); }

/* El tope de 62vh del marco vacío se levanta cuando hay galería. Lo decía ya
   el comentario de arriba —«con foto daría igual, sería la foto»—, y además
   con el tope puesto el marco salía más estrecho que la tira de miniaturas de
   debajo, porque la altura le recortaba el ancho: dos bloques desalineados
   uno encima de otro. */
.galeria .ficha-marco { max-height: none; }

/* El monograma se pinta encima de la foto. Sobre el marco vacío marcaba el
   hueco; sobre la fotografía hace de filigrana de la casa, que es de lo que
   vive esta página. */
.galeria .sello { z-index: 1; text-shadow: 0 2px 18px rgba(10, 9, 8, .7); }

/* Una foto vertical recortada a `cover` en un marco de 16/10 pierde más de
   la mitad; entera y centrada se lee, y el degradado del marco hace de
   fondo en vez de dejar dos franjas muertas. */
.galeria__foto.es-vertical { object-fit: contain; }

/* Flex y no retícula: con `flex: 1 1 0` más un tope, ocho miniaturas se
   reparten el ancho y dos se quedan pegadas a la izquierda a su tamaño. Con
   columnas de retícula había que elegir entre que ocho desbordaran o que dos
   salieran de 575 px cada una, separadas por medio marco de vacío. */
.galeria__tira {
  list-style: none; padding: 0; margin: 0;
  display: flex; gap: 10px;
}
.galeria__tira > li { flex: 1 1 0; min-width: 0; max-width: 220px; }
.galeria__pieza {
  display: block; width: 100%; padding: 0; cursor: pointer;
  aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--negro-3);
  border: 1px solid var(--oro-tenue);
  transition: border-color var(--transicion);
}
.galeria__pieza img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  /* Apagadas hasta que se piden: así la portada manda y la tira no compite
     con ella por la atención. */
  opacity: .5; transition: opacity var(--transicion), transform var(--transicion);
}
.galeria__pieza:hover img, .galeria__pieza:focus-visible img { opacity: 1; }
.galeria__pieza:hover { border-color: var(--oro-linea); }
.galeria__pieza.es-activa { border-color: var(--oro); }
.galeria__pieza.es-activa img { opacity: 1; }

/* ---------------------------------------------------------------- Cuerpo */
.ficha-cuerpo {
  display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: var(--s-6); align-items: start;
  padding-block: var(--s-7);
}
.ficha-cuerpo h2 { font-family: var(--serif); font-size: var(--t-h2); font-weight: 600;
  line-height: var(--lh-titulo); color: var(--marfil); }
.ficha-cuerpo .lead { margin-top: var(--s-4); }

/* Los rasgos de la descripción: rombo de oro, como los numerales. */
/* `padding-inline-start: 0` explícito: el navegador le da 40px a toda `ul` y
   el rombo, que se coloca dentro de esa caja, quedaba 40px a la derecha del
   párrafo de entrada. La sangría de la viñeta la pone el `li`, no el `ul`. */
.rasgos {
  list-style: none; padding-inline-start: 0;
  display: grid; gap: var(--s-3); margin-top: var(--s-4);
}
.rasgos li {
  position: relative; padding-left: 26px;
  font-family: var(--serif); font-size: var(--t-cuerpo);
  line-height: var(--lh-cuerpo); color: var(--marfil-2);
}
.rasgos li::before {
  content: ""; position: absolute; left: 2px; top: .62em;
  width: 6px; height: 6px; transform: rotate(45deg); background: var(--oro);
}

/* -------------------------------------------------------------- Ficha técnica */
.tecnica {
  border: 1px solid var(--oro-linea); background: var(--negro-3);
  padding: var(--s-5); position: relative;
  position: sticky; top: calc(var(--barra) + 20px);
}
.tecnica h3 {
  font-family: var(--sans); font-size: var(--t-cejilla); font-weight: 600;
  letter-spacing: var(--track-cejilla); text-transform: uppercase; color: var(--oro);
}
.medidas { display: grid; gap: 0; margin-top: var(--s-4); }
.medidas div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid var(--oro-tenue);
}
.medidas div:last-child { border-bottom: 0; }
/* `min-width: 0` para que la etiqueta pueda partir de línea: sin él un
   flex-item no baja de su ancho mínimo y una etiqueta larga —Arco 73 tiene
   seis medidas desglosadas— se salía de su casilla contra el valor. */
.medidas dt {
  font-family: var(--sans); font-size: var(--t-ui); color: var(--marfil-2);
  min-width: 0;
}
/* El valor puede partir de línea. Llevaba `nowrap` para que «1,140 m²» no se
   rompiera entre la cifra y la unidad, pero eso también volvía indivisible
   «Cuautlancingo · Coronango», y en un teléfono de 390 esa fila empujaba la
   página 65 px hacia la derecha. Lo que hay que mantener junto es la cifra y
   su unidad, y de eso se encarga el espacio duro que el HTML ya trae. */
.medidas dd {
  font-family: var(--serif); font-size: var(--t-h3); font-weight: 600;
  color: var(--oro-claro); text-align: right; min-width: 0;
}

/* --------------------------------------------------------------- Amenidades
   Iconos dibujados, de un solo trazo de 1.5. El sitio original usaba emoji
   (🚿🛏️🚘): un emoji lo pinta el sistema operativo, cambia de color y de
   estilo en cada máquina y no pertenece a ningún sistema visual.          */
/* Columnas fijas y pares, no `auto-fill`. El relleno automático dejaba una
   celda huérfana al final de la última fila, y como la retícula se dibuja con
   el fondo asomando por los huecos de 1px, esa celda vacía se veía como un
   bloque más claro. Con 2 columnas la fila siempre cierra.
   Dos y no cuatro: esta lista vive en la columna izquierda del cuerpo, que a
   1440px mide 645px. Repartida en cuatro dejaba celdas de 150px y
   «Estacionamiento» —que pide 194— salía cortada a media palabra. */
.amenidades {
  list-style: none; padding-inline-start: 0; margin-top: var(--s-4);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; background: var(--oro-tenue);
  border: 1px solid var(--oro-tenue);
}
.amenidades li {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; background: var(--negro-2);
  font-family: var(--sans); font-size: var(--t-ui); color: var(--marfil);
}
.amenidades svg { flex: none; color: var(--oro); }
.amenidades b {
  font-family: var(--serif); font-size: 1.15rem; font-weight: 700;
  color: var(--oro-claro); margin-left: auto;
}

/* Aviso de dato ausente. Cuando el expediente no publica una cifra —cuantas
   recamaras tiene Las Fuentes, por ejemplo— se dice, en vez de inventarla o
   de dejar el hueco sin explicar. */
.apunte {
  font-family: var(--sans); font-size: .82rem; line-height: 1.55;
  color: var(--marfil-2);
  padding-left: 16px; border-left: 1px solid var(--oro-tenue);
}

/* -------------------------------------------------------------- Vecinas
   Puebla tiene once activos: quien abre una ficha casi siempre quiere
   comparar contra las de al lado, y mandarlo al inventario completo lo
   obliga a recorrer antes Morelos y Tlaxcala. Es una lista, no una reja de
   tarjetas: aqui el visitante ya viene de ver fotografia y lo que necesita
   es saltar rapido entre nombres y precios. */
.ficha-vecinas {
  border-top: 1px solid var(--oro-linea);
  padding-block: var(--s-7);
}
.ficha-vecinas .grupo__cabecera {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-5);
}
.vecinas {
  list-style: none;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; background: var(--oro-tenue);
  border: 1px solid var(--oro-tenue);
}
.vecinas a {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-3); padding: 16px 18px;
  background: var(--negro-2); text-decoration: none;
  font-family: var(--serif); font-size: 1.05rem; color: var(--marfil-2);
  transition: background var(--transicion), color var(--transicion);
}
.vecinas a:hover { background: var(--negro-3); color: var(--marfil); }
.vecinas__precio {
  font-family: var(--sans); font-size: .78rem; font-weight: 600;
  letter-spacing: .08em; color: var(--oro); white-space: nowrap;
}

/* ------------------------------------------------------------------ Cierre */
.ficha-cierre {
  border-top: 1px solid var(--oro-linea);
  padding-block: var(--s-7); text-align: center;
}
.ficha-cierre .acciones {
  display: flex; gap: var(--s-3); justify-content: center;
  flex-wrap: wrap; margin-top: var(--s-5);
}

@media (max-width: 900px) {
  .ficha-cuerpo { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .tecnica { position: static; }
}
@media (max-width: 720px) {
  /* Ocho miniaturas repartidas en 390 px salen a 40 px: no se ve qué hay en
     ellas y el dedo no acierta. Se les da tamaño fijo y la tira se arrastra
     a lo ancho, con hueco al final para que se note que sigue. */
  .galeria__tira {
    overflow-x: auto; padding-bottom: 4px;
    scroll-snap-type: x proximity;
  }
  .galeria__tira > li { flex: 0 0 104px; max-width: none; }
  .galeria__pieza { scroll-snap-align: start; }
}
@media (max-width: 640px) {
  .ficha-marco { aspect-ratio: 4 / 3; }
  .vecinas { grid-template-columns: minmax(0, 1fr); }
  .ficha-cuerpo { padding-block: var(--s-6); }
  .amenidades { grid-template-columns: minmax(0, 1fr); }
  .tecnica { padding: var(--s-4); }
}