/*
  Página Recursos.
  El template de referencia (hirekit-temlis.webflow.io/blogs) no trae un filtro de categorías, así
  que se construye desde cero reutilizando el lenguaje visual del componente .badge ya usado en el
  resto del sitio. También se define el estado vacío editorial (Escenario A de la propuesta de
  contenido): el sitio lanza sin artículos publicados todavía, así que en vez de mostrar un grid roto
  o tarjetas de relleno, se muestra un mensaje claro. Cuando el primer artículo de cada pilar esté
  listo (Escenario B), este bloque se reemplaza por tarjetas reales (imagen, categoría, título,
  resumen, tiempo de lectura, enlace a /recursos/[slug]).
*/

.resource_filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

.resource_filter-item {
  padding: 0.6rem 1.25rem;
  border: 1px solid var(--bg-color--bg-dark, #e5e5e5);
  border-radius: 2.25rem;
  color: var(--text-color--text-primary, #1a1a1a);
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  cursor: default;
}

.resource_empty {
  border: 1px dashed var(--bg-color--bg-dark, #d9d9d9);
  border-radius: var(--_sizes---fixed--xlarge, 1.5rem);
  padding: 4rem 2rem;
  text-align: center;
  max-width: 34rem;
  margin: 0 auto;
}

.resource_empty .h5 {
  margin-bottom: 0.75rem;
}