/* =================================================================
   JRI Core — catálogo (pestañas de categorías y marcas)

   Las pestañas van con `:target` + `:has()`, sin JavaScript: la pestaña
   abierta queda en la URL, así que los enlaces de la cabecera y del menú
   lateral (`#jri-tab-categorias`, `#jri-tab-marcas`) abren directamente
   la que toca. Sin ningún anclaje activo se muestra la de categorías.
   ================================================================= */

.jri-catalog { text-align: center; }

/* Dos pestañas a media banda, subrayadas. La línea va en un `::after`
   absoluto y no en el `border-bottom`: al engordar de 1 a 2 px la activa
   desplazaría el texto medio píxel arriba en cada cambio de pestaña. */
.jri-tab-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin: 0 0 var(--space-8);
}
.jri-tab-btn {
  position: relative;
  padding: 0 var(--space-4) 14px;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--text-muted);
  transition: color .2s;
}
.jri-tab-btn::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: var(--gray-150);
  transition: background .2s, height .2s;
}
.jri-tab-btn:hover { color: var(--near-black); }

/* Pestaña activa: categorías por defecto, marcas cuando es el objetivo. */
.jri-catalog:not(:has(#jri-tab-marcas:target)) .jri-tab-btn--cats,
.jri-catalog:has(#jri-tab-marcas:target) .jri-tab-btn--brands {
  color: var(--near-black);
  font-weight: 700;
}
.jri-catalog:not(:has(#jri-tab-marcas:target)) .jri-tab-btn--cats::after,
.jri-catalog:has(#jri-tab-marcas:target) .jri-tab-btn--brands::after {
  height: 2px;
  background: var(--near-black);
}

.jri-catalog-panel { display: none; scroll-margin-top: calc(var(--header-h) + 20px); }
.jri-catalog-panel:target { display: block; }
.jri-catalog:not(:has(.jri-catalog-panel:target)) #jri-tab-categorias { display: block; }

/* Con una sola pestaña no hay conmutador: el panel se muestra siempre. */
.jri-catalog:not(:has(.jri-tab-toggle)) .jri-catalog-panel { display: block; }

.jri-catalog-grid { display: grid; gap: var(--space-4); }
.jri-catalog-grid--cats { grid-template-columns: repeat(6, 1fr); }
.jri-catalog-grid--brands { grid-template-columns: repeat(6, 1fr); }

.jri-cat-card {
  background: var(--gray-50);
  border: 1px solid var(--gray-150);
  border-radius: var(--radius-2xl);
  padding: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 150px;
  box-shadow: var(--shadow-card);
  transition: transform .2s, box-shadow .2s;
}
.jri-cat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-glow-yellow); }

/* El icono ilustrado ya trae el nombre incrustado, así que se muestra
   grande y el texto duplicado se oculta. El nombre sigue llegando a los
   lectores de pantalla por el `alt` de la imagen. */
.jri-cat-card img { width: 120px; height: 120px; object-fit: contain; }
.jri-cat-card span { display: none; }

/* El nombre va debajo del logo, así que la altura es mínima y no fija: con
   `height` el texto se salía de la tarjeta en los nombres de dos líneas. */
.jri-brand-card {
  background: var(--gray-50);
  border: 1px solid var(--gray-150);
  border-radius: var(--radius-2xl);
  min-height: 142px;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  box-shadow: var(--shadow-card);
  transition: transform .2s, box-shadow .2s;
}
.jri-brand-card:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0, 0, 0, .12); }
/* Muchos logos traen el fondo blanco horneado en el PNG y sobre el gris se
   veían como recuadros blancos. `multiply` funde ese blanco con el fondo de
   la tarjeta y deja el color del logo intacto —el gris es tan claro que lo
   oscurece un 5 %, imperceptible—. Los logos de fondo oscuro (Astara,
   HARDWORK) siguen viéndose oscuros, que es como son. */
.jri-brand-card img {
  max-height: 72px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.jri-brand-card-nombre {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--dark-1);
}

@media (max-width: 980px) {
  .jri-catalog-grid--cats { grid-template-columns: repeat(3, 1fr); }
  .jri-catalog-grid--brands { grid-template-columns: repeat(3, 1fr); }
  .jri-tab-toggle { gap: var(--space-3); }
  .jri-tab-btn { padding: 0 var(--space-2) 12px; letter-spacing: .5px; }
}

@media (max-width: 767px) {
  .jri-catalog-grid--cats { grid-template-columns: repeat(2, 1fr); }
  .jri-catalog-grid--brands { grid-template-columns: repeat(2, 1fr); }
}