/* ===========================================================================
   CATÁLOGOS — el índice /catalogos/ y cada página de catálogo.

   Medido sobre producción (aristas.co/catalogos/ y /catalogo-el-poder-del-
   diseno/) con estilos computados:
     · titular de año ... Amadine 300, letter-spacing .15em, SIN mayúsculas,
                          centrado, #1e1e1c
     · título de ficha .. Futura PT 20px/400, centrado, rgb(84,89,95)
     · h1 de catálogo ... sans 36px/300, centrado, #1e1e1c
     · portada .......... 665x850 nativo, sin radio, gap de 20px
     · fondo ............ blanco

   Dos cosas se apartan de producción a propósito:

   1) Ancho de ficha uniforme. Allá cada año es una fila de columnas de
      Elementor que se reparten el ancho, así que las fichas encogen según
      cuántas haya: 227px en el año con 4 y 178px en el que tiene 5. Se ven
      de tamaños distintos en la misma página. Acá la ficha mide igual en
      todos los años y la fila envuelve cuando no cabe.

   2) Filas centradas. Allá van pegadas a la izquierda y el año con 3 deja un
      hueco a la derecha que parece un error. Con la tipografía centrada, la
      fila centrada se lee como una decisión.

   3) Visor a sangre y del alto de la pantalla. Allá va en una caja de
      1240x800 dentro de los márgenes de la página, y como Flipsnack centra
      la página del catálogo sobre su propio fondo, quedaban dos franjas
      crema enormes a los lados. Ocupando la pantalla, el catálogo escala a
      su máximo. De paso el visor aparece en tablet, que en producción se
      queda sin ninguno: el de escritorio está oculto en tablet y el de
      móvil también.
   ======================================================================== */

.pagina--catalogo,
.pagina--catalogos {
  background: var(--white);
  /* .pagina trae 40px de lado y 56 arriba. Se anulan: el visor va a sangre
     completa y cada bloque pone su propio margen. */
  padding: 0 0 clamp(3rem, 7vw, 5.5rem);
}

/* El alto del header, para restarlo del visor y que el catalogo quepa justo
   en lo que queda de pantalla. En aristas.css el header colapsa su barra
   superior en max-width:900px y pasa de 133 a 96px. */
.pagina--catalogo { --cat-header: 96px; }
@media (min-width: 901px) { .pagina--catalogo { --cat-header: 133px; } }

/* ------------------------------- cabecera del índice ------------------- */
.cat-cab {
  max-width: 62rem;
  margin: 0 auto;
  padding: clamp(2.4rem, 5vw, 4rem) 20px clamp(1.4rem, 3vw, 2.2rem);
  text-align: center;
}
.cat-cab__titulo {
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(2rem, 3.4vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: .01em;
  color: var(--ink);
  margin: 0;
}
.cat-cab__bajada {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.78;
  color: var(--text-2);
  max-width: 62ch;
  margin: 1.1em auto 0;
}
.cat-cab__bajada p { margin: 0; }
@media (min-width: 821px) { .cat-cab__bajada { font-size: 1.125rem; } }

/* ------------------------------- título del catálogo ------------------- */
/* Va DENTRO del espacio del visor y encima, no sobre la página: asi el
   catalogo se ve de una, sin breadcrumb ni titular que lo empujen hacia
   abajo. Se apoya en la franja de fondo que el visor deja arriba.
   pointer-events:none para que el titulo no robe los clics del visor. */
.cat-titulo {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  pointer-events: none;
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.2;
  letter-spacing: .01em;
  text-align: center;
  color: var(--ink);
  margin: 0;
  padding: clamp(.85rem, 1.8vw, 1.5rem) 20px;
}
/* Sobre un visor de fondo oscuro. Lo marca un campo por catalogo, porque el
   fondo lo decide cada documento en Flipsnack y no hay forma de leerlo desde
   aca: el visor va en un iframe de otro dominio. */
.cat-titulo--claro { color: var(--white); }

/* Sin visor no hay donde montarlo encima: vuelve a ser un titular normal. */
.cat-titulo--suelto {
  position: static;
  pointer-events: auto;
  padding: clamp(2rem, 4.5vw, 3.25rem) 20px clamp(1.4rem, 3vw, 2.25rem);
}

/* ------------------------------- el visor ------------------------------ */
/* A sangre: ni margen ni ancho maximo. El visor es el motivo de la pagina,
   asi que se lleva la pantalla entera. */
.cat-visor {
  position: relative;
  max-width: none;
  margin: 0;
  padding: 0;
}
/* El alto es el de la pantalla menos el header pegajoso, para que el visor
   llene el viewport y Flipsnack escale la pagina del catalogo a su maximo:
   con una caja baja y ancha el visor deja media pantalla de fondo a los
   lados. svh y no vh porque en el movil vh cuenta la barra del navegador y
   el visor quedaba cortado por abajo; la linea de vh queda como respaldo
   para los navegadores que no entienden svh. */
.cat-visor__marco {
  display: block;
  width: 100%;
  height: calc(100vh - var(--cat-header));
  height: calc(100svh - var(--cat-header));
  min-height: 420px;
  border: 0;
  background: var(--bg-light);
}
@media (max-width: 600px) {
  .cat-visor__marco { min-height: 380px; }
}

/* ------------------------------- galería (catálogos sin visor) --------- */
/* La galeria si se centra: son imagenes nuestras, no un visor ajeno. */
.cat-visor--galeria { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
/* Sobre las fotos del catalogo el titulo no se leeria: aca si va arriba. */
.cat-visor--galeria .cat-titulo {
  position: static;
  pointer-events: auto;
  padding: clamp(1.5rem, 3.5vw, 2.5rem) 0 clamp(1.1rem, 2.4vw, 1.6rem);
}
.cat-galeria {
  display: flex;
  gap: 16px;
  margin: 0;
  padding: 0 0 14px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
}
.cat-galeria__item { flex: 0 0 auto; scroll-snap-align: center; }
.cat-galeria__img {
  display: block;
  width: auto;
  max-width: min(88vw, 620px);
  height: auto;
  max-height: 72vh;
}
.cat-galeria:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* ------------------------------- el archivo por años ------------------- */
/* 1160 = 1120 utiles + los 20 de cada lado. Los 1120 son los que en
   produccion dan una ficha de 265px con cuatro columnas. */
.cat-archivo {
  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(2.6rem, 5.5vw, 4.25rem) 20px 0;
}
.cat-ano + .cat-ano { margin-top: clamp(2.5rem, 4.5vw, 3.5rem); }

.cat-ano__titulo {
  font-family: var(--display);
  font-weight: 300;
  /* El trazo, no el peso, es lo que le da nitidez a Amadine. Es lo que
     Elementor llama «trazo del texto» y produccion lo tiene en 0,5px.
     Mismo criterio que --arq-trazo en blog.css. */
  -webkit-text-stroke: var(--ar-trazo, .5px) currentColor;
  font-size: clamp(1.625rem, 2.2vw, 2.125rem);
  line-height: 1.25;
  letter-spacing: .15em;
  text-align: center;
  color: var(--ink);
  margin: 0 0 30px;
}

/* Cada ano ocupa una sola fila y las fichas se reparten el ancho completo del
   archivo, asi que todos los anos arrancan y terminan en la misma linea. Sin
   esto las filas iban centradas y, al tener cada ano un numero distinto de
   catalogos, cada una empezaba en una x distinta: el margen izquierdo quedaba
   dentado. El numero de columnas lo pone la plantilla con --cols. */
.cat-rejilla {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
  gap: 30px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cat-ficha {
  width: 100%;
}
.cat-ficha__enlace {
  display: block;
  text-decoration: none;
  color: inherit;
}
/* La foto no lleva bordes redondeados: regla de marca de Aristas. */
.cat-ficha__fig {
  display: block;
  overflow: hidden;
  background: var(--bg-light);
}
.cat-ficha__img {
  display: block;
  width: 100%;
  height: auto;
  /* la proporción nativa de las portadas vivas (665x850). Va con height:auto
     porque WordPress escribe width/height en el <img> y esos atributos, que
     cuentan como CSS de especificidad cero, ganan al aspect-ratio si la
     altura se queda en el valor del atributo. */
  aspect-ratio: 665 / 850;
  object-fit: cover;
  transition: opacity .3s var(--ease);
}
.cat-ficha__titulo {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.35;
  letter-spacing: normal;
  text-align: center;
  color: #54595f;
  margin: 19px 0 10px;
  transition: color .25s var(--ease);
}
.cat-ficha__enlace:hover .cat-ficha__img { opacity: .88; }
.cat-ficha__enlace:hover .cat-ficha__titulo { color: var(--ink); }
.cat-ficha__enlace:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* El catálogo que se está viendo sigue en la lista —es un archivo por años,
   no un «también te puede interesar»— pero se marca para que no parezca que
   el enlace no hace nada. */
.cat-ficha--actual .cat-ficha__titulo { color: var(--ink); font-weight: 500; }
.cat-ficha--actual .cat-ficha__img { opacity: .55; }

/* En pantallas chicas el reparto por ano no sirve: cinco columnas dejarian
   fichas de 60px. Manda el ancho de la pantalla, no cuantos catalogos hay. */
@media (max-width: 900px) {
  .cat-rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .cat-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .cat-ficha__titulo { font-size: 1.0625rem; margin-top: 14px; }
  .cat-ano__titulo { margin-bottom: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .cat-ficha__img, .cat-ficha__titulo { transition: none; }
}