/* ══════════════════════════════════════════════ Templum — Inventario ══
   Solo lo propio de la pagina de inventario. Todo lo demas —barra, pie,
   botones, filetes, esquinas, tipografia— sale de `templum.css`: esta hoja
   no redefine ni un token.                                                */

/* ------------------------------------------------------------- Portada
   No lleva escena: el recorrido cinematico es de la portada del sitio y
   repetirlo aqui lo gastaria. Esta cabecera es tipografica, con la celosia
   y la orla como unico ornamento, y ocupa poco para que el inventario
   empiece dentro de la primera pantalla — que es a lo que se viene.      */
.cabecera-inventario {
  position: relative;
  padding: calc(var(--barra) + var(--s-7)) 0 var(--s-6);
  border-bottom: 1px solid var(--oro-linea);
  text-align: center;
  overflow: hidden;
}
.cabecera-inventario::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 0%,
      rgba(201, 162, 75, .13) 0%, rgba(201, 162, 75, 0) 62%);
}
.cabecera-inventario .titulo { margin-top: var(--s-3); }
.cabecera-inventario .lead { margin: var(--s-4) auto 0; max-width: 62ch; }

/* La cuenta del portafolio, en oro y con filetes a los lados. Es el unico
   dato duro que esta pagina puede dar hoy, asi que se le da rango. */
.recuento {
  display: flex; align-items: center; justify-content: center; gap: var(--s-4);
  margin-top: var(--s-5);
  font-family: var(--sans); font-size: var(--t-cejilla); font-weight: 600;
  letter-spacing: var(--track-cejilla); text-transform: uppercase;
  color: var(--oro);
}
.recuento::before, .recuento::after {
  content: ""; width: clamp(28px, 8vw, 90px); height: 1px;
  background: linear-gradient(90deg, transparent, var(--oro), transparent);
  flex: none;
}

/* --------------------------------------------------------- Grupos
   Cuatro bloques: residencias, bodegas, ranchos y reservas. Llevan numeral
   romano como el resto del sitio, porque aqui el orden si informa: es el
   mismo orden en que la landing presenta las clases de activo.           */
.grupo { padding: var(--s-7) 0; }
.grupo + .grupo { border-top: 1px solid var(--oro-tenue); }
.grupo__cabecera {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-4); flex-wrap: wrap;
  margin-bottom: var(--s-6);
}
.grupo__cuenta {
  font-family: var(--sans); font-size: var(--t-cejilla); font-weight: 600;
  letter-spacing: var(--track-cejilla); text-transform: uppercase;
  color: var(--marfil-2); white-space: nowrap;
}

/* ------------------------------------------------------------- Piezas */
.piezas {
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
}

/* Un grupo con una sola pieza —hoy, Bodegas— dejaba una tarjeta de 268 px
   perdida en una fila de cuatro huecos, y se leia como un error de carga y no
   como «solo hay una». Ocupando dos columnas y en formato apaisado, la unica
   bodega del portafolio se presenta como pieza destacada, que es justo lo que
   es. En una columna esta regla no aplica y no estorba. */
@media (min-width: 641px) {
  .pieza:only-child { grid-column: span 2; }
  .pieza:only-child .pieza__marco { aspect-ratio: 21 / 9; }
  .pieza:only-child .pieza__nombre { font-size: var(--t-h2, 2rem); }
}

.pieza {
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  border: 1px solid var(--oro-tenue);
  background: var(--negro-3);
  transition: border-color var(--transicion), transform var(--transicion),
              background var(--transicion);
}
.pieza:hover, .pieza:focus-visible {
  border-color: var(--oro-linea);
  background: var(--negro-4);
  transform: translateY(-3px);
}

/* El marco sin fotografia. La tentacion es dejar un rectangulo vacio con el
   monograma en medio, y eso es exactamente lo que hace que una pagina
   parezca a medio terminar. Aqui el hueco tiene material: un degradado
   calido en diagonal —la misma luz de tarde por arriba a la izquierda que
   manda en toda la escena del portico— y un monograma pequeno, discreto,
   apoyado abajo. Se lee como una placa de piedra, no como una foto que
   falta. Cuando entren las fotografias, se sustituye el interior y la caja
   no se mueve: ya tiene su proporcion. */
.pieza__marco {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background:
    linear-gradient(148deg,
      rgba(201, 162, 75, .16) 0%,
      rgba(201, 162, 75, .05) 34%,
      rgba(10, 9, 8, 0) 66%),
    linear-gradient(180deg, #1b1710 0%, #12100c 100%);
  border-bottom: 1px solid var(--oro-tenue);
}
.pieza__marco img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.pieza__sello {
  position: absolute; right: 14px; bottom: 10px;
  font-family: var(--serif); font-size: 2.4rem; font-weight: 700;
  line-height: 1; color: var(--oro);
  opacity: .26;
  user-select: none;
}
/* Filete de oro en la esquina superior izquierda: de ahi entra la luz en
   todas las fotografias del sitio, asi que el reflejo cae donde toca. */
.pieza__marco::after {
  content: ""; position: absolute; top: 0; left: 0;
  width: 42%; height: 1px;
  background: linear-gradient(90deg, var(--oro), transparent);
  opacity: .5;
}

.pieza__cuerpo {
  padding: var(--s-4) var(--s-4) var(--s-5);
  display: flex; flex-direction: column; gap: 10px; flex: 1;
}
.pieza__lugar {
  font-family: var(--sans); font-size: var(--t-cejilla); font-weight: 600;
  letter-spacing: var(--track-cejilla); text-transform: uppercase;
  color: var(--oro);
}
.pieza__nombre {
  font-family: var(--serif); font-size: var(--t-h3); font-weight: 600;
  line-height: var(--lh-titulo); color: var(--marfil);
}
.pieza__ver {
  margin-top: auto; padding-top: var(--s-3);
  font-family: var(--sans); font-size: .78rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--marfil-2);
  display: flex; align-items: center; gap: 8px;
  transition: color var(--transicion);
}
.pieza:hover .pieza__ver, .pieza:focus-visible .pieza__ver { color: var(--oro-claro); }
.pieza__ver .flecha { transition: transform var(--transicion); }
.pieza:hover .pieza__ver .flecha { transform: translateX(5px); }

/* La ficha vive todavia en el sitio anterior; se avisa en el propio enlace
   y no solo con un icono, que a un lector de pantalla no le dice nada. */
.pieza__fuera {
  font-size: .68rem; letter-spacing: .1em; color: var(--marfil-2);
  opacity: .62; text-transform: none;
}

/* --------------------------------------------------------- Responsivo */
@media (max-width: 900px) {
  .piezas { grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); }
}
@media (max-width: 640px) {
  .piezas { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  .grupo { padding: var(--s-6) 0; }
  .grupo__cabecera { margin-bottom: var(--s-5); }
  /* En una sola columna el 4/3 deja tarjetas larguisimas y obliga a un
     scroll enorme para recorrer trece inmuebles. Mas bajo se recorre. */
  .pieza__marco { aspect-ratio: 16 / 9; }
  .cabecera-inventario { padding-top: calc(var(--barra) + var(--s-5)); }
}