/* ───────── Catálogo por tipología ─────────
   Las fotos llegan de siete casas distintas, cada una con su propio fondo.
   La rejilla las unifica: cada pieza se monta sobre una placa blanca idéntica,
   con aire alrededor, de modo que la mezcla se lea como una sola colección. */

.cat-cabeza { padding-bottom: clamp(30px, 3.4vw, 52px); }
.cat-cabeza .intro { max-width: 36rem; }

/* ── Filtros ── */
.cat-barra {
  position: sticky;
  top: var(--cabecera);
  z-index: 20;
  background: var(--lino);
  border-bottom: 1px solid var(--travertino);
  transition: top 0.4s ease;
}
/* El encabezado se oculta al bajar; la barra sube a ocupar su lugar. */
.cabecera.oculta ~ #contenido .cat-barra { top: 0; }
.cat-filtros {
  display: flex;
  gap: clamp(20px, 2.6vw, 42px);
  padding: clamp(16px, 1.8vw, 24px) 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.cat-filtros::-webkit-scrollbar { display: none; }

.cat-filtro {
  appearance: none;
  background: none;
  border: 0;
  padding: 0 0 7px;
  margin: 0;
  flex: 0 0 auto;
  position: relative;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.64rem;
  font-weight: 300;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--nogal);
  white-space: nowrap;
  transition: color 0.5s var(--ease);
}
.cat-filtro::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 0;
  background: var(--laton-oscuro);
  transition: width 0.55s var(--ease);
}
.cat-filtro:hover { color: var(--carbon); }
.cat-filtro.activo { color: var(--carbon); }
.cat-filtro.activo::after { width: 100%; }
.cat-filtro:focus-visible { outline: 2px solid var(--laton-oscuro); outline-offset: 5px; }

/* ── Conteo ── */
.cat-conteo {
  margin: clamp(26px, 3vw, 44px) 0 clamp(22px, 2.4vw, 34px);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  color: var(--nogal);
}
.cat-conteo span { color: var(--laton-oscuro); font-style: normal; }

/* ── Rejilla ── */
.cat-campo { background: var(--suave); padding-bottom: var(--espacio); }

.cat-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(158px, 23vw, 345px), 1fr));
  gap: clamp(18px, 2vw, 32px) clamp(10px, 1.3vw, 20px);
}
.cat-ficha { margin: 0; }
.cat-ref {
  margin: 0.9rem 0 0;
  font-size: 0.6rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--nogal);
  transition: color 0.5s var(--ease);
}
.cat-pieza {
  appearance: none;
  border: 1px solid transparent;
  padding: 0;
  margin: 0;
  background: #fff;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  cursor: zoom-in;
  display: block;
  position: relative;
  transition: border-color 0.6s var(--ease);
}
.cat-pieza img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: clamp(6px, 0.9vw, 16px);
  opacity: 0;
  transform: scale(1);
  transition: opacity 0.9s ease, transform 0.9s var(--curva);
}
.cat-pieza.cargada img { opacity: 1; }
.cat-pieza:hover,
.cat-pieza:focus-visible { border-color: var(--laton); }
.cat-pieza:hover img,
.cat-pieza:focus-visible img { transform: scale(1.08); }
.cat-ficha:hover .cat-ref { color: var(--laton-oscuro); }
.cat-pieza:focus-visible { outline: 2px solid var(--laton-oscuro); outline-offset: 4px; }

.cat-centinela { height: 1px; }
.cat-estado {
  margin: clamp(30px, 3.4vw, 50px) 0 0;
  color: var(--nogal);
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-align: center;
}
.cat-estado[hidden] { display: none; }

.cat-aviso {
  max-width: 34rem;
  margin-inline: auto;
  padding: 1.7rem 1.5rem;
  background: #fff;
  border: 1px solid var(--travertino);
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 0.92rem;
  line-height: 1.75;
}

/* ── Visor ──
   Acotado a .visor-cat para no pisar el visor de Proyectos, que comparte clases. */
.visor-cat {
  background: rgba(30, 26, 23, 0.95);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: none;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
.visor-cat.abierto { opacity: 1; }

.visor-cat .visor-fig {
  width: min(92vw, 1180px);
  max-width: none;
  height: min(84vh, 900px);
  max-height: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.visor-cat .visor-fig img {
  max-width: 100%;
  max-height: 100%;
  background: #fff;
  padding: clamp(10px, 1.5vw, 26px);
  animation: visor-entra 0.65s var(--curva) both;
}
@keyframes visor-entra {
  from { opacity: 0; transform: scale(0.985); }
  to   { opacity: 1; transform: none; }
}

.visor-cat button {
  border: 1px solid rgba(249, 246, 243, 0.26);
  border-radius: 50%;
  color: var(--lino);
  opacity: 1;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  transition: border-color 0.5s var(--ease), background-color 0.5s var(--ease);
}
.visor-cat button:hover { border-color: var(--laton); background: rgba(168, 141, 105, 0.16); }
.visor-cat button svg { width: 19px; height: 19px; }
.visor-cat .visor-cerrar { top: clamp(16px, 3vw, 34px); right: clamp(16px, 3vw, 34px); }
.visor-cat .visor-ant { left: clamp(10px, 2.4vw, 40px); }
.visor-cat .visor-sig { right: clamp(10px, 2.4vw, 40px); }

.visor-cat .visor-cuenta {
  left: 0;
  width: 100%;
  transform: none;
  bottom: clamp(18px, 3vw, 36px);
  text-align: center;
  color: rgba(249, 246, 243, 0.72);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.02rem;
  letter-spacing: 0.05em;
  text-transform: none;
}

@media (max-width: 760px) {
  .visor-cat button { width: 44px; height: 44px; }
  .visor-cat .visor-ant { left: 8px; }
  .visor-cat .visor-sig { right: 8px; }
  .visor-cat .visor-fig { width: 94vw; height: 76vh; }
}

@media (prefers-reduced-motion: reduce) {
  .cat-pieza img,
  .cat-ref,
  .cat-filtro,
  .cat-filtro::after,
  .visor-cat { transition: none; }
  .visor-cat .visor-fig img { animation: none; }
}