/* =====================================================================
   catalogo.css — lo que comparten las cuatro páginas de catálogo

   Referencias, arsenal y las dos galerías pintan cosas distintas con los
   mismos tres mecanismos: una fila de filtros, una caja de estado
   (cargando / vacío / falló) y una rejilla que no deforma la tarjeta.
   Estaban copiados cuatro veces, con cuatro comportamientos ligeramente
   distintos; aquí están una vez.

   Depende de sistema.css. Se carga antes que el CSS de cada página.
   ===================================================================== */

/* =====================================================================
   Filtros

   Antes eran enlaces de anclaje que hacían scroll y no había forma de
   volver a ver el catálogo entero. Ahora filtran de verdad, dicen cuál
   está activo y «Todas» siempre está a un clic.
   ===================================================================== */
.filtros {
  position: sticky;
  top: 3.4rem;
  z-index: var(--m-capa-pegado);
  display: flex;
  gap: var(--m-esp-2xs);
  overflow-x: auto;
  scrollbar-width: none;
  padding: var(--m-esp-2xs) var(--m-canal);
  background: color-mix(in srgb, var(--m-negro-1) 92%, transparent);
  backdrop-filter: blur(10px);
  scroll-snap-type: x proximity;
}

.filtros::-webkit-scrollbar {
  display: none;
}

.filtro {
  flex: none;
  scroll-snap-align: center;
  display: inline-flex;
  align-items: center;
  gap: var(--m-esp-3xs);
  min-height: 2.75rem;
  padding: 0 var(--m-esp-sm);
  border: 1px solid color-mix(in srgb, var(--m-acento) 25%, transparent);
  border-radius: 999px;
  background: transparent;
  color: var(--m-humo);
  font-family: var(--m-cuerpo);
  font-size: var(--m-txt-sm);
  font-weight: 500;
  letter-spacing: 0.06em;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--m-rapido), border-color var(--m-rapido), background var(--m-rapido);
}

.filtro:hover {
  color: var(--m-papel);
  border-color: color-mix(in srgb, var(--m-acento) 55%, transparent);
}

.filtro[aria-pressed='true'] {
  color: var(--m-negro-0);
  background: linear-gradient(180deg, var(--m-acento-claro), var(--m-acento));
  border-color: var(--m-acento-claro);
  font-weight: 600;
}

.filtro svg {
  /* El glifo acompaña, no compite: a 1,15 em quedaba en una mancha
     ilegible y a 1,45 se lee la silueta. */
  width: 1.45em;
  height: 1.45em;
  flex: none;
  opacity: 0.85;
}

.filtro[aria-pressed='true'] svg {
  opacity: 1;
}

/* ── La ficha, en el taller ─────────────────────────────────────────
   La píldora es una forma blanda y en la marca industrial no pinta nada:
   aquí el filtro es una pestaña recta, y el que está puesto se marca con
   un filete abajo —la pletina que sobresale del cajón— en vez de
   rellenarse de color. Menos adorno y la fila entera se lee como una
   regla graduada.

   El relleno sólido se retira a propósito: con seis pestañas seguidas,
   la píldora encendida era la mancha más fuerte de la página y competía
   con las propias fotografías del portafolio. */
[data-marca='cnc'] .filtro {
  border-radius: 0;
  border-color: transparent;
  border-block-end-color: color-mix(in srgb, var(--m-acento) 20%, transparent);
  letter-spacing: 0.08em;
}

[data-marca='cnc'] .filtro:hover {
  border-color: transparent;
  border-block-end-color: color-mix(in srgb, var(--m-acento) 55%, transparent);
  color: var(--m-texto);
}

[data-marca='cnc'] .filtro[aria-pressed='true'] {
  background: none;
  color: var(--m-acento-claro);
  border-color: transparent;
  border-block-end: 2px solid var(--m-acento);
}

/* =====================================================================
   Estado del catálogo

   Una sola caja para los cuatro momentos en que no hay rejilla que
   enseñar: cargando, sin resultados para el filtro, catálogo vacío y
   servidor caído. Las cuatro páginas la pintan con la misma estructura
   —título, explicación y una salida— para que el visitante reconozca de
   qué se le está hablando sin volver a leerlo entero.

   La salida no es opcional: un estado vacío que solo dice «no hay nada»
   deja al visitante sin nada que hacer. Siempre lleva o un botón que
   arregla el estado aquí mismo (reintentar, quitar los filtros) o el
   enlace al cotizador, que es a lo que venía.
   ===================================================================== */
.estado {
  position: relative;
  margin: var(--m-esp-lg) auto;
  max-width: 60ch;
  padding: var(--m-esp-lg) var(--m-esp-md);
  border: 1px solid color-mix(in srgb, var(--m-acento) 22%, transparent);
  border-radius: var(--m-radio-md);
  background: var(--m-negro-2);
  text-align: center;
  color: var(--m-humo);
}

.estado[hidden] {
  display: none;
}

.estado__titulo {
  margin: 0 0 var(--m-esp-2xs);
  font-family: var(--m-titular);
  font-size: var(--m-txt-md);
  color: var(--m-texto);
}

.estado p {
  margin: 0 auto;
  max-width: 48ch;
}

.estado .m-boton {
  margin-block-start: var(--m-esp-md);
}

/* El estado de servidor caído ofrece dos salidas: reintentar y escribirnos.
   Los dos botones se añaden uno detrás de otro con appendChild, así que
   entre ellos no queda ni un nodo de texto y, siendo inline-flex, se
   pintaban pegados canto con canto. El hueco lo pone la regla, no un
   espacio en el JS, que el navegador podría colapsar. */
.estado .m-boton + .m-boton {
  margin-inline-start: var(--m-esp-2xs);
}

/* ── La caja, en la forja ───────────────────────────────────────────
   Cuatro escuadras en las esquinas y una trama de grabado muy tenue: la
   cartela de una lámina antigua. Va con degradados, sin ninguna imagen
   nueva, y con la mano corta que pide el sistema —las escuadras miden
   1,4 rem y la trama va al 6 % del oro—. */
[data-marca='medieval'] .estado {
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0 5px,
      color-mix(in srgb, var(--m-acento) 6%, transparent) 5px 6px
    ),
    var(--m-negro-2);
}

[data-marca='medieval'] .estado::before {
  content: '';
  position: absolute;
  inset: var(--m-esp-2xs);
  pointer-events: none;
  opacity: 0.5;
  background:
    linear-gradient(90deg, var(--m-acento) 0 100%) 0 0 / 1.4rem 1px no-repeat,
    linear-gradient(180deg, var(--m-acento) 0 100%) 0 0 / 1px 1.4rem no-repeat,
    linear-gradient(90deg, var(--m-acento) 0 100%) 100% 0 / 1.4rem 1px no-repeat,
    linear-gradient(180deg, var(--m-acento) 0 100%) 100% 0 / 1px 1.4rem no-repeat,
    linear-gradient(90deg, var(--m-acento) 0 100%) 0 100% / 1.4rem 1px no-repeat,
    linear-gradient(180deg, var(--m-acento) 0 100%) 0 100% / 1px 1.4rem no-repeat,
    linear-gradient(90deg, var(--m-acento) 0 100%) 100% 100% / 1.4rem 1px no-repeat,
    linear-gradient(180deg, var(--m-acento) 0 100%) 100% 100% / 1px 1.4rem no-repeat;
}

/* ── La caja, en el taller ──────────────────────────────────────────
   Lo contrario: ni escuadras, ni trama, ni esquinas redondeadas. Un
   rectángulo recto con el filete de acento a la izquierda, que es como
   se marca una nota en un plano. El texto se alinea al canto en vez de
   centrarse: centrar es adorno cuando hay un borde del que colgar. */
[data-marca='cnc'] .estado {
  border-radius: 0;
  border-inline-start: 2px solid var(--m-acento);
  padding: var(--m-esp-lg) var(--m-esp-lg);
  text-align: start;
}

[data-marca='cnc'] .estado p {
  margin-inline: 0;
}

[data-marca='cnc'] .estado__titulo {
  letter-spacing: var(--m-titular-ajuste, -0.02em);
}

/* =====================================================================
   El titular de la portada, grabado

   Las cuatro páginas de catálogo abren con .portada__titulo, y es el
   único sitio donde las dos marcas pueden decir quiénes son con una sola
   regla. En la forja el título va incidido: una sombra oscura justo
   debajo y un filo de oro justo encima, que es lo que hace una letra
   grabada en metal cuando la luz le entra de arriba.

   Dos sombras de un píxel, no un relieve. A más de eso la palabra se
   emborrona en vez de hundirse, y el titular de la portada es lo más
   grande de la página: cualquier exceso aquí se ve desde la puerta.

   La marca industrial no lleva nada. Un taller de corte por plasma no
   graba sus rótulos, los imprime.
   ===================================================================== */
[data-marca='medieval'] .portada__titulo {
  text-shadow:
    0 2px 0 rgb(0 0 0 / 0.7),
    0 -1px 0 color-mix(in srgb, var(--m-acento-claro) 18%, transparent);
}

/* =====================================================================
   Rejilla

   auto-fill con un mínimo en min(): las columnas se calculan solas y en
   pantalla estrecha el mínimo cede en vez de desbordar. Cada página ajusta
   el ancho de columna con --col.
   ===================================================================== */
.rejilla {
  display: grid;
  gap: var(--m-esp-md);
  grid-template-columns: repeat(auto-fill, minmax(min(var(--col, 15rem), 100%), 1fr));
}

/* =====================================================================
   Impresión

   sistema.css dice que el catálogo se imprime, y apaga la atmósfera y el
   resplandor del corte. Falta lo de aquí: el acabado de marca.

   Las reglas de ornamento llevan [data-marca] y pesan (0,2,0) o más, así
   que ganan a cualquier regla de clase suelta dentro de un @media print.
   Hay que nombrarlas con el mismo atributo o no se apagan.

   En papel, la trama del grabado sale como una malla gris que ensucia el
   texto que lleva encima, las escuadras de las esquinas se imprimen como
   ocho rayitas sueltas y la sombra del titular se convierte en un
   contorno emborronado. Nada de eso significa nada fuera de la pantalla.
   ===================================================================== */
@media print {
  [data-marca='medieval'] .portada__titulo {
    text-shadow: none;
  }

  [data-marca='medieval'] .estado {
    background: none;
  }

  [data-marca='medieval'] .estado::before {
    display: none;
  }

  /* Los controles no se imprimen: filtrar y buscar son gestos de
     pantalla, y en papel ocupan una fila que no hace nada. */
  .filtros,
  .barra {
    display: none;
  }
}

/* =====================================================================
   El encuadre de las fotografías — contrato de --foco

   Toda foto que rellena su hueco se recorta con `object-fit: cover`. El
   recorte sale del centro, que es lo correcto mientras no se sepa nada
   de la imagen, pero centrar a ciegas parte por la mitad justo lo que
   había que enseñar: una espada fotografiada en vertical pierde el pomo,
   una plancha ancha pierde el corte.

   Por eso cada foto lee su encuadre de --foco, y cada regla que declara
   `object-fit: cover` en este sitio declara al lado:

       object-position: var(--foco, 50% 50%);

   El valor por defecto va DENTRO del var(), no en un :root. Así no
   depende del orden de carga de las hojas y una imagen sin dato se ve
   hoy exactamente igual que antes de existir esta variable.

   Quién rellena --foco: el JS de la página, cuando el registro de la API
   trae punto focal —los campos `foco_x` y `foco_y`, de 0 a 100—. Se
   escribe con element.style.setProperty(), nunca con un atributo style=
   en el HTML: el CSP del sitio es `style-src 'self'` y un estilo en línea
   quedaría bloqueado en producción. El CSSOM sí está permitido.

   El visor de la galería es la excepción y no participa: ahí la foto va
   con `object-fit: contain` porque se enseña entera, y encuadrar algo que
   no se recorta no significa nada.
   ===================================================================== */