/* Contenedor principal */
.catalogo-section {
  padding: 40px 0;
}
.catalogo-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Título y descripción */
.catalogo-title {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 10px;
  text-align: center;
}
.catalogo-description {
  color: #555;
  margin-bottom: 30px;
  text-align: center;
}

/* Filtros */
.filtros {
  text-align: center;
  margin-bottom: 30px;
}
.filter-btn {
  display: inline-block;
  margin: 5px;
  padding: 8px 14px;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  font-size: 14px;
}
.filter-btn:hover,
.filter-btn.active {
  background: #3f51b5;
  color: #fff;
}

/* Grid de canales */
.catalogo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 15px;
}

/* Tarjeta de canal */
.canal-card {
  display: block;
  background: #fff;
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}
.canal-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  background: #fafafa;
  text-decoration: none !important;
}
.canal-nombre {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 4px;
  text-decoration: none;
  display: inline-block;
}
.canal-card:hover .canal-nombre {
  color: #3f51b5;
  text-decoration: underline;
}
.canal-categoria {
  color: #777;
  font-size: 13px;
  margin-bottom: 8px;
}

/* Compatibilidad */
.canal-icons {
  display: flex;
  justify-content: center;
  gap: 15px;
  font-size: 18px;
  min-height: 30px;
  color: #444;
}

.canal-icons i {
  opacity: 0.8;
  transition: transform 0.15s, opacity 0.15s;
  margin-top: 10px;
}

.canal-icons i:hover {
  opacity: 1;
  transform: translateY(-2px);
}

/* Si tienes modo oscuro */
@media (prefers-color-scheme: dark) {
  .canal-icons {
    color: #ddd;
  }
}

/* Etiquetas adicionales */
.canal-extra {
  font-size: 12px;
  margin: 0;
  font-weight: 500;
}
.canal-extra.geo {
  color: #1e90ff;
}
.canal-extra.reg {
  color: #b8860b;
}
.canal-extra.noem {
  color: #a52a2a;
}
.canal-extra.evt {
  color: #c2185b;
}