/* ============================================================
   CSS — Estilo landing aplicado a la página de Catálogo (categorías)
   tiendapedrollo.com

   Estas clases se verificaron directamente en el sitio en vivo
   (Contenido > Categorías > vista "Catálogo"), así que van a
   calzar exacto sin necesidad de ajustar nada.

   DÓNDE PEGAR ESTE CÓDIGO (elige UNA de las dos opciones):

   OPCIÓN A — La correcta a largo plazo (recomendada):
     1. Sistema > Sitio > Plantillas > pestaña "Estilos".
     2. Entra a "Cassiopeia - Predeterminado" (o como se llame tu
        estilo activo).
     3. Busca el botón/pestaña "Editor de plantillas" o el ícono
        de lápiz junto al nombre de la plantilla (no el estilo,
        la plantilla en sí — puede estar en Plantillas > Plantillas,
        no en Estilos).
     4. Busca el archivo "css/user.css" en el árbol de archivos de
        la izquierda. Si no existe, créalo con ese nombre exacto
        dentro de la carpeta css/ — Cassiopeia lo carga automático
        en todas las páginas si existe.
     5. Pega TODO este código ahí y guarda.
     Ventaja: se aplica en todo el sitio automáticamente, un solo
     lugar para mantenerlo, y no depende de módulos.

   OPCIÓN B — Más simple si no encuentras el editor de plantillas:
     1. Contenido > Módulos de sitio > Nuevo > Personalizado (HTML).
     2. Título: "CSS Catálogo" (no importa, no se va a mostrar).
     3. En el campo de contenido, pega SOLO esto (con las etiquetas
        <style> incluidas) — todo el bloque de abajo.
     4. Pestaña "Avanzado" > Posición: cualquiera que ya uses
        (ej. "banner" o "top-a" sirven, aunque el texto no se vea).
     5. Pestaña "Asignación de menú": marca "Catálogo" y las 6
        categorías (Periféricas, Centrífugas, etc.) — NO "Inicio".
     6. Pestaña "General" > Mostrar título: Ocultar.
     7. Estado = Publicado. Guardar.
   ============================================================ */

/* Contenedor general del catálogo */
.com-content-categories.categories-list {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 24px 64px;
}

/* Grid de categorías: mismo look que el landing — sin bordes
   redondeados, separado por líneas finas (hairline) en vez de
   sombras */
.com-content-categories__items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: #969696; /* crea las líneas divisorias entre celdas */
  list-style: none;
  padding: 0;
  margin: 0;
}

.com-content-categories__item {
  background: #ffffff;
  padding: 28px 20px;
  transition: background 0.15s ease;
}
.com-content-categories__item:hover {
  background: #f5f5f5;
}

.com-content-categories__item-title-wrapper {
  margin-bottom: 8px;
}

.com-content-categories__item-title {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 6px 0;
}

.com-content-categories__item-title a {
  font-family: Arial, sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 18px;
  letter-spacing: 0.01em;
  color: #2D308A;
  text-decoration: none;
}
.com-content-categories__item-title a:hover {
  text-decoration: underline;
}

/* La "insignia" de cantidad de artículos — la volvemos texto
   rojo pequeño en mayúsculas, como los números "01 — 6 productos"
   del landing, en vez del badge azul por defecto de Joomla */
.com-content-categories__item-title .badge.bg-info {
  background: transparent !important;
  color: #ED1C24 !important;
  font-family: Arial, sans-serif;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0;
  order: -1; /* la pone antes del título, como en el landing */
  flex-basis: 100%;
}

.com-content-categories__description.category-desc {
  font-family: Arial, sans-serif;
  font-size: 13px;
  line-height: 1.4;
  color: #555555;
  margin: 0;
}

/* Celular: una sola columna, igual que el landing */
@media (max-width: 720px) {
  .com-content-categories__items {
    grid-template-columns: 1fr;
  }
}